.timeline{position:relative;max-width:1200px;margin:100px auto}.container{padding:10px 50px;position:relative;width:50%;animation:movedown 1s linear forwards;opacity:0;z-index:10}@keyframes movedown{0%{opacity:1;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.text-box{padding:30px 10px;border-radius:6px;font-size:15px;color:#fff}.left-container{left:0}.left-container-date{left:0;top:5%}.right-container-date{left:50%;top:5%}.right-container{left:50%}.timeline:after{content:"";position:absolute;width:6px;height:0;background-color:#303030;top:73px;left:50%;margin-left:-3px;z-index:1;animation:moveDown 10s forwards}@keyframes moveDown{0%{height:0}to{height:calc(100% - 5%)}}.left-container-arrow{right:36px}.left-container-arrow,.right-container-arrow{height:0;width:0;position:absolute;top:20px;z-index:10;border-top:15px solid transparent;border-bottom:15px solid transparent}.right-container-arrow{left:36px}.container:first-child,.container:nth-child(2){animation-delay:0s}.container:nth-child(3),.container:nth-child(4){animation-delay:.5s}.container:nth-child(5),.container:nth-child(6){animation-delay:1s}.container:nth-child(7),.container:nth-child(8){animation-delay:1.5s}.container:nth-child(10),.container:nth-child(9){animation-delay:2s}.container:nth-child(11),.container:nth-child(12){animation-delay:2.5s}.container:nth-child(13),.container:nth-child(14){animation-delay:3s}.container:nth-child(15),.container:nth-child(16){animation-delay:3.5s}.container:nth-child(17),.container:nth-child(18){animation-delay:4s}.container:nth-child(19),.container:nth-child(20){animation-delay:4.5s}@media screen and (max-width:768px){.timeline{margin:50px auto}.timeline:after{left:31px}.container{width:100%;padding-left:88px;padding-right:25px}.right-container{left:0}.left-container .left-container-img,.right-container .right-container-img{left:10px}.left-container-arrow,.right-container-arrow{border-right-width:15px!important;left:73px}}