/* timeline */
.timeline-header {
	color: #000000;
	font-family: Offside;
	font-size: 30px;
	margin-bottom: 40px;
}
.timeline { position: relative; padding-left: 20px; display: table; width: 100%; }
.timeline:before {
	content: '';
	height: 100%;
	width: 1px;
	background-color: #eb3300;
	position: absolute;
	left: 0;
	top: 0;
}

/* timeline blocks */
.timeline-block { display: block; float: left; width: 100%; }
.timeline-block.open {}
.timeline-block h3 {
	color: #000000;
	font-size: 16px;
	cursor: pointer;
	position: relative;
	-webkit-user-select: none;
	user-select: none;
	transition: color .2s;
	-webkit-transition: color .2s;
	-moz-transition: color .2s;
}
.timeline-block h3:before {
	content: '';
	height: 9px;
	width: 9px;
	position: absolute;
	background-color: #eb3300;
	left: -24px;
	bottom: 7px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
.timeline-block.open h3,
.timeline-block h3:hover { color: #eb3300; }
.timeline-block .outer { display: none!important; margin-bottom: 20px; float: left; }
.timeline-block .block img { width: 100%; height: auto; }
.timeline-block .block .text {
	background: #d22e26; /* Old browsers */
	background: -moz-linear-gradient(left, #d22e26 0%, #eb3300 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #d22e26 0%,#eb3300 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #d22e26 0%,#eb3300 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d22e26', endColorstr='#eb3300',GradientType=1 ); /* IE6-9 */
	display: block;
	padding: 20px 20px;
}
.timeline-block .block .text p { padding-bottom: 0; color: #FFFFFF; font-size: 13px; }
.timeline-block.open .outer { display: block!important; }

	/* media specific styles */
	@media(min-width: 768px){
		/* timeline */
		.timeline:before { top: 41px; width: 100%; height: 1px; }
		.timeline-block { float: left; width: 25%; }
		.timeline-block.open { min-height: 550px; }
		.timeline-block.open:nth-child(2) .outer { margin-left: 25%; }
		.timeline-block.open:nth-child(3) .outer { margin-left: 55%; }
		.timeline-block.open:nth-child(4) .outer { text-align: right; }
		.timeline-block.open:nth-child(4) .outer .block { text-align: left; }
		.timeline-block h3 { margin-bottom: 100px; }
		.timeline-block h3:before { left: 0; bottom: -50px; margin: auto; top: 7px; }
		.timeline-block:nth-child(1) h3:before { left: -20px; }
		.timeline-block:nth-child(2) h3:before { left: 33.3334%; }
		.timeline-block:nth-child(3) h3:before { left: 66.6667%; }
		.timeline-block:nth-child(4) h3:before { left: auto; right: 0px; }
		.timeline-block:nth-child(2) h3 { text-align: center; }
		.timeline-block:nth-child(3) h3 { text-align: right; padding-right: 20px; }
		.timeline-block:nth-child(4) h3 { text-align: right; }
		.timeline-block h3:after {
			content: '';
			position: absolute;
			height: 0px;
			width: 1px;
			background-color: #eb3300;
			bottom: -40px;
			transform: translateY(-20px);
			-webkit-transform: translateY(-20px);
			-moz-transform: translateY(-20px);
			transition: height .4s, transform .4s;
			-webkit-transition: height .4s, transform .4s;
			-moz-transition: height .4s, transform .4s;
		}
		.timeline-block.open h3:after {
			height: 41px;
			transform: translateY(0px);
			-webkit-transform: translateY(0px);
			-moz-transform: translateY(0px);
		}
		.timeline-block:nth-child(1) h3:after { left: -16px; }
		.timeline-block:nth-child(2) h3:after {
			left: calc(33.3334% + 4px);
			left: -moz-calc(33.3334% + 4px);
			left: -ms-calc(33.3334% + 4px);
			left: -webkit-calc(33.3334% + 4px);
			left: -o-calc(33.3334% + 4px);
		}
		.timeline-block:nth-child(3) h3:after {
			left: calc(66.6667% + 4px);
			left: -moz-calc(66.6667% + 4px);
			left: -ms-calc(66.6667% + 4px);
			left: -webkit-calc(66.6667% + 4px);
			left: -o-calc(66.6667% + 4px);
		}
		.timeline-block:nth-child(4) h3:after { right: 4px; }
		.timeline-block .outer { position: absolute; left: 0; width: 100%; }
		.timeline-block .block {
			width: 50%;
			float: none;
			display: inline-block;
		}
	}
	@media(min-width: 1024px){
		/* timeline */
		.timeline-block .block { width: 25%; }
	}