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 li.red::before{border-color:#ae3029}
ul.timeline::before,ul.timeline::after{content:'';display:block;width:100%;height:60px;position:absolute;top:0;left:-3px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA8CAYAAACn8dD6AAAANklEQVQY02P4////fyYGBoZ/TAwMDH9RWQjiDyoLJ/EblUUS8QsvF6cYEQSa03ASaF79ixYkAADpPnbqAMVeAAAAAElFTkSuQmCC)}
ul.timeline::after{bottom:0;top:auto;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA8CAYAAACn8dD6AAAANUlEQVQY02P4//8/ExMDAwMzEwMDA4KFIFhQWTgJVlQWSQQbYTE28kxGcxpOAs2rzFiChAkAVPcEc9T05SMAAAAASUVORK5CYII=)}
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}}