h4 {padding-bottom:.5em;}

.timeline {list-style:none; padding:0 0 10px; position:relative;}
.timeline:hover .tldate {color:#ff0; border:1px solid #888; background:linear-gradient(to bottom, rgba(120,120,120,1) 0%,rgba(0,0,0,1) 100%);}
.timeline:before { top:0; bottom:0; position:absolute; content:" "; width:2px; background-color:#888; left:50%; margin-left:-1.5px;}
.timeline .tldate { display:block; width:200px; border:1px solid #666; border-radius:15px; color:#fff; margin:0 auto; padding:5px 0; font-weight:bold; text-align:center; box-shadow: 0 0 21px rgba(20%,20%,40%,0.5); background:linear-gradient(to bottom, rgba(92,98,102,1) 0%,rgba(0,0,0,1) 100%);}
.timeline li { margin-bottom:1em; position:relative;}
.timeline li:before, .timeline li:after { content:" "; display:table;}
.timeline li:after { clear: both;}
.timeline li .timeline-panel { width:44%; float:left; background:#222; color:#999; border:1px solid #666; padding:10px; position:relative; border-radius:5px;}
.timeline li:hover .timeline-panel { box-shadow:2px 2px 5px rgba(100%, 100%, 100%, 0.4); color:#ccc; }
.timeline li .timeline-panel:before { position:absolute; top:12px; right:-8px; display:inline-block; border-top:8px solid transparent; border-left:8px solid #666; border-right:0 solid #666; border-bottom:10px solid transparent; content: " ";}
.timeline li .timeline-panel:after { position:absolute; top:13px; right:-7px; display:inline-block; border-top:7px solid transparent; border-left:7px solid #222; border-right:0 solid #222; border-bottom:9px solid transparent; content: " ";}
.timeline li .timeline-panel.noarrow:before, .timeline li .timeline-panel.noarrow:after {top:0; right:0; display:none; border:0;}
.timeline li.timeline-inverted .timeline-panel { float: right;}
.timeline li.timeline-inverted .timeline-panel:before { border-left-width:0; border-right-width:8px; left:-8px; right:auto;}
.timeline li.timeline-inverted .timeline-panel:after { border-left-width:0; border-right-width:7px; left:-7px; right:auto;}
.timeline li .tl-circ { position:absolute; top:10px; left:50%; text-align:center; background:#555; width:15px; height:15px; line-height:15px; margin-left:-12px; border:3px solid #222; border-radius:50%; z-index:99999;}
.timeline li:hover .tl-circ {background:#0ff;}
.timeline .model { font-weight:bold; color:#fff;}

@media screen and (max-width:480px) {
	.wide-80-1 {padding-top:1em;}
	.timeline li .timeline-panel {width:38%;}
}