body,html{margin:0;padding:0;font-family:Helvetica,sans-serif}.time{background:#1d2833}section#timeline{width:80%;margin:20px auto;position:relative}section#timeline:before{content:'';display:block;position:absolute;left:50%;top:0;margin:0 0 0 -1px;width:2px;height:100%;background:rgba(255,255,255,.2)}section#timeline article{width:100%;margin:0 0 20px 0;position:relative}section#timeline article:after{content:'';display:block;clear:both}section#timeline article div.inner{width:40%;float:left;margin:5px 0 0 0;border-radius:6px}section#timeline article div.inner span.date{display:block;width:60px;height:50px;padding:5px 0;position:absolute;top:0;left:50%;margin:0 0 0 -32px;border-radius:100%;font-size:12px;font-weight:900;text-transform:uppercase;background:#25303b;color:rgba(255,255,255,.5);border:2px solid rgba(255,255,255,.2);box-shadow:0 0 0 7px #25303b}section#timeline article div.inner span.date span{display:block;text-align:center}section#timeline article div.inner span.date span.day{font-size:10px}section#timeline article div.inner span.date span.month{font-size:18px}section#timeline article div.inner span.date span.year{font-size:10px}section#timeline article div.inner h2{padding:15px;margin:0;color:#fff;font-size:20px;text-transform:uppercase;letter-spacing:-1px;border-radius:6px 6px 0 0;position:relative}section#timeline article div.inner h2:after{content:'';position:absolute;top:20px;right:-5px;width:10px;height:10px;-webkit-transform:rotate(-45deg)}section#timeline article div.inner p{padding:15px;margin:0;font-size:14px;background:#fff;color:#656565;border-radius:0 0 6px 6px}section#timeline article:nth-child(2n+2) div.inner{float:right}section#timeline article:nth-child(2n+2) div.inner h2:after{left:-5px}section#timeline article:nth-child(1) div.inner h2{background:#e74c3c}section#timeline article:nth-child(1) div.inner h2:after{background:#e74c3c}section#timeline article:nth-child(2) div.inner h2{background:#2ecc71}section#timeline article:nth-child(2) div.inner h2:after{background:#2ecc71}section#timeline article:nth-child(3) div.inner h2{background:#e67e22}section#timeline article:nth-child(3) div.inner h2:after{background:#e67e22}section#timeline article:nth-child(4) div.inner h2{background:#1abc9c}section#timeline article:nth-child(4) div.inner h2:after{background:#1abc9c}section#timeline article:nth-child(5) div.inner h2{background:#9b59b6}section#timeline article:nth-child(5) div.inner h2:after{background:#9b59b6}