#timeline, #timeline * { margin: 0; padding: 0; }


#timeline { width:1000px; margin:30px auto 0 auto; text-align: center; position: relative; }
#timeline a, #timeline input { outline: none; }
#timeline .midline { position: absolute; width: 2px; height: 100%; left:50%; top:0; background: #617d9d; margin-left: -1px; z-index: 0; }
#timeline .year { width: 100%; overflow: hidden; position: relative; z-index: 999; }
#timeline .ylabel { display: none; width: 100px; margin:50px auto 30px auto; padding: 5px 15px; border-radius: 5px; background: #fff; }
#timeline .y2015 .ylabel { margin-top: 0; }
#timeline .day { width: 50%; margin-top: 50px; margin-bottom: 20px; position: relative; }
#timeline .day:nth-child(even) { float: left;  clear: both; margin-top: 20px; }
#timeline .day:nth-child(odd) { float: right;  }
#timeline .day:nth-child(3) { margin-top: 75px; }
#timeline .day .dlabel { display: block; font-size:13px; position: absolute; top: -29px; color: #fff; font-weight: 700; background: #617d9d; padding: 5px 15px; border-radius: 5px 5px 0 0; }
#timeline .day:nth-child(even) .dlabel { right: -2px; }
#timeline .day:nth-child(odd) .dlabel { left: -2px; }
#timeline .day .line { display: block; width:18.2%; height:2px; position: absolute; top:50px; background: #617d9d; }
#timeline .day .line:after { content:""; width: 15px; height: 15px; background: #eee; border:solid 2px #617d9d; border-radius: 80px; position: absolute; top:-7px; }
#timeline .day:nth-child(even) .line { right: 0; }
#timeline .day:nth-child(even) .line:after { right: -7px; }
#timeline .day:nth-child(odd) .line { left: 0%; }
#timeline .day:nth-child(odd) .line:after { left: -7px; }
#timeline .tag { width: 80%; text-align: left; overflow: visible; background: #ced6e0; border:solid 2px #617d9d; margin: 10px; padding: 10px; position: relative; }
#timeline .day:nth-child(even) .tag { float: left; border-radius: 5px 0 5px 5px; }
#timeline .day:nth-child(odd) .tag { float: right; border-radius: 0 5px 5px 5px; }
#timeline .tag img { /*width: 70px;*/ float: left; margin-right: 15px; }
#timeline .tag h1 { font-size:14px; font-weight: 300; margin: 0; }
#timeline .tag h2 { font-size:13px; font-weight: 300; margin: 10px 0 0 0; }
#timeline .tag p { font-size:12px; font-weight: 300; margin: 0; }

@media screen and (max-width: 991px) {
	#timeline { width:100%; margin-top: 0px; }
	#timeline .day .line { display: none; }
	#timeline .day { width: 100%; }
	#timeline .day:nth-child(2n) { float:none; margin-top: 40px;}
	#timeline .day:nth-child(2n+1) { float:none; }
	#timeline .tag:after { clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden; }
	#timeline .tag { width: 50%; margin: 0 auto; }
	#timeline .day:nth-child(2n) .tag { float:none; }
	#timeline .day:nth-child(2n+1) .tag { float:none; }
	#timeline .day .dlabel { top: -27px; }
}

@media screen and (max-width: 768px) {
	#timeline .tag { width: 75%; }
	#timeline .day .dlabel { top: -24px; }
}

@media screen and (max-width: 500px) {
	#timeline .tag { width: 85%; }
}