ul.timeline{list-style-type:none;margin:0;padding:60px 0 0;display:inline-block;border-left:solid 3px #ccc;text-align:left;position:relative}
ul.timeline li{list-style-type:none;position:relative;padding:0 0 60px 60px;line-height:18px;text-indent:0}
ul.timeline li::before{content:'';display:block;float:left;margin-left:-69px;box-sizing:border-box;height:15px;width:15px;background-color:#fff;border:3px solid #e04a3a;border-radius:8px}
ul.timeline li.orange::before{border-color:#edbd0e}
ul.timeline li.green::before{border-color:#89ba17}
ul.timeline li.blue::before{border-color:#23bae2}
ul.timeline li.lila::before{border-color:#4823ba}
ul.timeline li.yellow::before{border-color:#F8D210}
ul.timeline::before,ul.timeline::after{content:'';display:block;width:100%;height:60px;position:absolute;top:0;left:-3px;background-image:linear-gradient(#fff,transparent)}
ul.timeline::after{bottom:0;top:auto;background-image:linear-gradient(transparent,#fff)}
ul.timeline li span.hint{position:absolute;left:-120px}
ul.timeline li span.hint a{color:#fff}
ul.timeline li.orange span.hint{background-color:#edbd0e}
@media only screen and (max-width: 1000px) {div.timeline{box-sizing:border-box;padding-left:120px}}