section.timeline{width:80%;margin:10px auto;position:relative;padding:2em;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px}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,0.2);border:1px solid #616061}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:6.5em;height:6.5em;padding:2.5em 0;position:absolute;top:0;left:calc(50% - 0.5em);margin:0 0 0 -32px;border-radius:100%;font-size:12px;font-weight:900;background:#616061;color:#fff;border:2px solid #616061;box-shadow:0 0 0 8px #616061}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;margin-top:-1em}section.timeline article div.inner h2{padding:20px;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:-10px;width:20px;height:20px;-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;border:1px solid #888}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 div.inner h2{background:#616061}section.timeline article div.inner h2:after{background:#616061}