* { margin: 0; padding: 0; }
body { 
background: rgba(142,158,171,1);
background: -moz-linear-gradient(left, rgba(142,158,171,1) 0%, rgba(238,242,243,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(142,158,171,1)), color-stop(100%, rgba(238,242,243,1)));
background: -webkit-linear-gradient(left, rgba(142,158,171,1) 0%, rgba(238,242,243,1) 100%);
background: -o-linear-gradient(left, rgba(142,158,171,1) 0%, rgba(238,242,243,1) 100%);
background: -ms-linear-gradient(left, rgba(142,158,171,1) 0%, rgba(238,242,243,1) 100%);
background: linear-gradient(to right, rgba(142,158,171,1) 0%, rgba(238,242,243,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e9eab', endColorstr='#eef2f3', GradientType=1 );
}

#demo { width:1000px; font-family: 'Roboto', sans-serif; margin:30px auto 0 auto; text-align: center; position: relative; }
#demo a, #demo input { outline: none; }
#demo .midline { position: absolute; width: 2px; height: 100%; left:50%; top:0; background: #fff; margin-left: -1px; z-index: 0; }
#demo .year { width: 100%; overflow: hidden; position: relative; z-index: 999; }
#demo .ylabel { display: block; width: 100px; margin:50px auto 30px auto; padding: 5px 15px; border-radius: 5px; background: #fff; }
#demo .y2015 .ylabel { margin-top: 0; }
#demo .day { width: 50%; margin-top: 50px; margin-bottom: 20px; position: relative; }
#demo .day:nth-child(even) { float: left; }
#demo .day:nth-child(odd) { float: right;  }
#demo .day:nth-child(3) { margin-top: 75px; }
#demo .day .dlabel { display: block; font-size:13px; position: absolute; top: -27px; background: rgba(255,255,255,0.9); padding: 5px 15px; border-radius: 5px 5px 0 0; }
#demo .day:nth-child(even) .dlabel { right: -2px; }
#demo .day:nth-child(odd) .dlabel { left: -2px; }
#demo .day .line { display: block; width:13.2%; height:2px; position: absolute; top:50px; background: #fff; }
#demo .day .line:after { content:""; width: 10px; height: 10px; background: #eee; border:solid 2px #fff; border-radius: 80px; position: absolute; top:-7px; }
#demo .day:nth-child(even) .line { right: 0; }
#demo .day:nth-child(even) .line:after { right: -7px; }
#demo .day:nth-child(odd) .line { left: 0%; }
#demo .day:nth-child(odd) .line:after { left: -7px; }
#demo .tag { width: 80%; text-align: left; overflow: visible; background:rgba(255,255,255,0.3); border:solid 2px rgba(255,255,255,0.7); margin: 10px; padding: 10px; position: relative; }
#demo .day:nth-child(even) .tag { float: left; border-radius: 5px 0 5px 5px; }
#demo .day:nth-child(odd) .tag { float: right; border-radius: 0 5px 5px 5px; }
#demo .tag img { width: 70px; float: left; margin-right: 15px; }
#demo .tag h1 { font-size:14px; font-weight: 300; margin: 0; }
#demo .tag h2 { font-size:13px; font-weight: 300; margin: 10px 0 0 0; }
#demo .tag p { font-size:12px; font-weight: 300; margin: 10px 0 0 0; }

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

@media screen and (max-width: 768px) {
	#demo .tag { width: 75%; }
}

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




/*Other*/
body #header { width: 900px; z-index: 9999; position: relative; }
body #header .custom-menu li:hover > a { background: none;  color: #000; }
body #header .custom-menu li.current > a { background: none;  color: #fff; }
@media screen and (max-width: 900px) {
    body #header { width: 100%; }
}