/* ------------------- Timeline -------------------*/

/* @group basic */

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#cd-timeline {
	position: relative;
	padding: 30px 0 0;
	margin: 0;
}
#cd-timeline:before {
	content: '';
	position: absolute;
	top: 0;
	left: 10px;
	height: 100%;
	width: 4px;
	background: #e2e1de;
}
.cd-timeline-block {
	position: relative;
	margin: 0 0 50px;
	text-align: left;
}
.cd-timeline-block:last-child {
	margin: 0;
}
.cd-timeline-block:after {
	content: "";
	display: table;
	clear: both;
}

/* @end */


/* @group timeline content */

.cd-timeline-img {
	position: absolute;
	top: 0;
	left: -13px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #787878;
	margin: 5px 0;
	border: 7px solid #fff;
	text-align: center;
}
.cd-timeline-img span {
	display: block;
	padding: 8px;
	margin: 0 0 0 1px;
	font-size: 18px;
	line-height: 18px;
	font-weight: 700;
	color: #fff;
}
.cd-timeline-content {
	position: relative;
	margin-left: 50px;
	background: white;
	padding: 8px 0 0 0;
}
.cd-timeline-content:after {
	content: "";
	display: table;
	clear: both;
}
.cd-timeline-content .cd-read-more, 
.cd-timeline-content .cd-date {
	display: inline-block;
}
.cd-timeline-content .cd-date {
	float: none;
	clear: both;
	padding: 0;
	font-size: 40px; 
	line-height: 40px; 
	text-transform: uppercase; 
	font-weight: 600;
	color: #555;
}
.timeline-image {
	margin: 15px 0;
}
.timeline-image a {
	position: relative;
	font-size: 0; 
	line-height: 0; 
	display: block; 
	overflow: hidden;
	text-align: center;
}
.timeline-image img {
	width: 100%;
	height: auto;	
}
/*.timeline-image a:after {
	content: ''; 
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	-webkit-transition: all 0.3s ease-out;
	   -moz-transition: all 0.3s ease-out;
	     -o-transition: all 0.3s ease-out;
		 	transition: all 0.3s ease-out;
	z-index: 5;
	border-color: rgba(255,255,255,0.7);
}
.timeline-image a:hover:after {
	background: rgba(115,113,107,0.4);
	border: 10px solid rgba(255,255,255,0.7);
}*/
.timeline-image a span {
	font-size: 30px; 
	line-height: 34px; 
	color: #fff;
	text-transform: uppercase;
	border-top: 3px solid #fff; 
	padding: 22px 30px;
	position: absolute; 
	opacity: 0; 
	visibility: hidden;
	left: 50%; 
	top: 50%; 
	z-index: 10;
	text-shadow: 2px 3px 5px rgba(74, 74, 74, 1);
	-webkit-transition: all 0.25s ease-out;
	   -moz-transition: all 0.25s ease-out;
	     -o-transition: all 0.25s ease-out;
		 	transition: all 0.25s ease-out;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
	     -o-transform: translate(-50%, -50%);
		 	transform: translate(-50%, -50%);
}
.timeline-image a span:before {
	content:'';
	border-top: 3px solid #fff;
	height: 3px;
	margin-top: -25px;
	position: absolute;
	left: 0;
	width: 100%;
	box-shadow: 2px 2px 6px rgba(74, 74, 74, 1);
	-webkit-transition: all 0.8s ease-out;
	   -moz-transition: all 0.8s ease-out;
	     -o-transition: all 0.8s ease-out;
		 	transition: all 0.8s ease-out;
}
.timeline-image a img:hover ~ span:before {
	width: 130%;
	left: -15%;
}
.timeline-image a span {
	pointer-events: none;
}
.timeline-image a:hover span {
	opacity: 1; 
	visibility: visible;
}
.cssanimations .cd-timeline-content.is-hidden,
.cssanimations .cd-timeline-img.is-hidden {
	visibility: hidden;
}
.cssanimations .cd-timeline-block .cd-timeline-img.bounce-in,
.cssanimations .cd-timeline-content.bounce-in {
	visibility: visible;
	-webkit-animation: cd-bounce-2-inverse 0.6s;
	-moz-animation: cd-bounce-2-inverse 0.6s;
	animation: cd-bounce-2-inverse 0.6s;
}

/* @end */


/* @group responsive */

/* -------- if bigger than ------- */

@media screen and (min-width: 760px) {
	.cd-timeline-img span {
		padding: 13px;
		margin: 0;
		font-size: 24px;
		line-height: 24px;
	}
	#cd-timeline::before {
		left: 50%;
		margin-left: -2px;
	}
	.cd-timeline-block {
		margin: 0 0 50px;
	}
	.cd-timeline-block:last-child {
		margin: 0;
	}
	.cd-timeline-img {
		width: 66px;
		height: 66px;
		left: 50%;
		margin-left: -33px;
		-webkit-transform: translateZ(0);
		-webkit-backface-visibility: hidden;
	}
	.cd-timeline-block {
		text-align: right;
	}
	.cd-timeline-block:nth-child(even) {
		text-align: left;
	}
	.cssanimations .cd-timeline-block .cd-timeline-img.bounce-in {
		-webkit-animation: cd-bounce-2 0.6s;
		-moz-animation: cd-bounce-2 0.6s;
		animation: cd-bounce-2 0.6s;
	}
	.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-img.bounce-in {
		visibility: visible;
		-webkit-animation: cd-bounce-2-inverse 0.6s;
		-moz-animation: cd-bounce-2-inverse 0.6s;
		animation: cd-bounce-2-inverse 0.6s;
	}
	.cd-timeline-content {	
		margin: 0;
		padding: 15px 0;
		width: 45%;
	}
	.timeline-image,
	.cd-timeline-content .cd-date {
		position: absolute;
		width: 100%;
		left: 122%;
		top: 7px;
		padding: 10px 0;
		font-weight: 400;
		text-align: left;
	}
	.timeline-image {
		top: 96px;
		padding: 0;
		margin: 0 0 20px 0;
	}
	.cd-timeline-block:nth-child(even) .cd-timeline-content {
		float: right;
	}
	.cd-timeline-block:nth-child(even) .timeline-image,
	.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
		left: auto;
		right: 122%;
		text-align: right;
	}
	.cssanimations .cd-timeline-content.bounce-in {
		-webkit-animation: cd-bounce-2 0.6s;
		-moz-animation: cd-bounce-2 0.6s;
		animation: cd-bounce-2 0.6s;
	}
	/* inverse bounce effect on even content blocks */
	.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
		-webkit-animation: cd-bounce-2-inverse 0.6s;
		-moz-animation: cd-bounce-2-inverse 0.6s;
		animation: cd-bounce-2-inverse 0.6s;
	}
}

/* @end */


/* @group keyframes */

@-webkit-keyframes cd-bounce-2 {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100px);
	}
	100% {
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes cd-bounce-2 {
	0% {
		opacity: 0;
		-moz-transform: translateX(-100px);
	}
	100% {
		-moz-transform: translateX(0);
	}
}

@keyframes cd-bounce-2 {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-100px);
		   -moz-transform: translateX(-100px);
		    -ms-transform: translateX(-100px);
		     -o-transform: translateX(-100px);
			 	transform: translateX(-100px);
	}
	100% {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
			 	transform: translateX(0);
	}
}

@-webkit-keyframes cd-bounce-2-inverse {
	0% {
		opacity: 0;
		-webkit-transform: translateX(100px);
	}
	100% {
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes cd-bounce-2-inverse {
	0% {
		opacity: 0;
		-moz-transform: translateX(100px);
	}
	100% {
		-moz-transform: translateX(0);
	}
}

@keyframes cd-bounce-2-inverse {
	0% {
		opacity: 0;
		-webkit-transform: translateX(100px);
		   -moz-transform: translateX(100px);
		    -ms-transform: translateX(100px);
		     -o-transform: translateX(100px);
			 	transform: translateX(100px);
	}
	100% {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
			 	transform: translateX(0);
	}
}

/* @end */