@import url("https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans+Condensed:300");
.wrapper {
	/* background-color: #42a5f5; */
	width: 100%;
	min-height: 100vh;
	height: 100%;
	font: normal 16px/26px Open Sans Condensed, sans-serif;
	/* color: #fff; */
	color: #000000;
	padding: 0px 20px 200px;
	box-sizing: border-box;
}

.block {
	z-index: 1;
	position: relative;
}

.block:before {
	content: "";
	position: absolute;
	height: calc(100% - 40px);
	width: 1px;
	background-color: #000;
	left: 50%;
	margin-top: 90px;
}

.title {
	font: bold 42px/52px Open Sans Condensed, sans-serif;
	text-align: center;
	padding: 20px;
	transition: all 0.8s ease-in-out;
}

.each-event {
	background-color: #f4f4f4;
	color: #777;
	padding: 15px;
	margin: 60px 20px;
	width: 300px;
	position: relative;
	border-radius: 4px;
	box-sizing: border-box;
	transition: all 0.3s ease-in-out;
}

.each-event:before {
	content: "";
	position: absolute;
	top: calc(50% - 8px);
	left: -27px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	/* background-color: #fff; */
	background-color: #696969;
	box-shadow: 0 4px 20px -4px rgba(64, 64, 64, 0.8);
}

.each-event:nth-child(odd) {
	margin-left: calc(50% + 20px);
}

.each-event:nth-child(even) {
	margin-left: calc(50% - 321px);
}

.each-event:nth-child(even):before {
	left: calc(100% + 14px);
}

.title.non-focus {
	font-size: 24px;
	line-height: 34px;
	transition: all 0.8s ease-in-out;
}

.each-event.non-focus {
	color: #d2d2d2;
	/* background: #e6e6e6; */
	background: #fff;
	margin-top: 90px;
	transform: rotateZ(45deg);
	transition: all 0.8s ease-in-out;
}

.each-event.non-focus:before {
	opacity: 0;
	background-color: #aaa;
}