:root{--progress:0%}.timeline{min-height:50px;width:90%;margin:30px auto;position:relative;padding:0;will-change:--progress;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-ms-transition:all .4s ease;transition:all .4s ease}.timeline:before{content:"";width:3px;height:100%;left:0%;top:0;position:absolute;background:#eee;transform:translateX(-50%);transition:background 0.3s ease-in-out;z-index:1}.timeline:after{content:"";width:3px;height:var(--progress);left:0;top:0;position:absolute;background:var(--primary);transform:translateX(-50%);transition:height 0.4s cubic-bezier(.4,0,.2,1);z-index:2}.timeline .timeline-item{margin-bottom:100px;position:relative}.timeline .timeline-item:last-child{margin-bottom:0;padding-bottom:80px}.timeline .timeline-item .timeline-year{z-index:3;background:var(--primary);color:#fff;width:50px;height:50px;position:absolute;top:0;left:0;overflow:hidden;margin-left:-23px;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;text-align:center;display:flex;flex-direction:column;justify-content:center}.timeline .timeline-item .timeline-year span{line-height:1;display:block}.timeline .timeline-item .timeline-content{width:85%;float:right;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease}.timeline .timeline-item .timeline-content .timeline-title{margin:0;font-weight:700;position:relative}.timeline .timeline-item:nth-child(even) .timeline-content{float:right}.timeline .timeline-item:after,.timeline .timeline-item:before{content:'';display:block;width:100%;clear:both}@media screen and (min-width:768px){.timeline{width:100%}.timeline:before{left:50%;transform:translateX(-50%)}.timeline:after{left:50%;transform:translateX(-50%)}.timeline .timeline-item .timeline-content{width:45%;float:none}.timeline .timeline-item .timeline-content:before{left:45%;margin-left:0;border-right:0;border-left-color:#eee}.timeline .timeline-item .timeline-year{left:50%}.timeline .timeline-item:nth-child(even) .timeline-content:before{right:45%}.timeline .timeline-item:nth-child(even) .timeline-title:before{left:auto;right:100%;border-left-color:transparent!important;border-right-color:#eee}}