.timeline{
    position:relative;
}
.timeline-item{
    position:relative;
    box-sizing:border-box;
}
.timeline-item::before{
    content:"";
    position:absolute;
    width:14px;
    height:14px;
    background:#3498db;
    border-radius:50%;
    border:3px solid #fff;
}
.timeline-shape .timeline-item::before{
    transform: rotate(45deg);
    border-radius:0px !important;
}
.timeline-vertical.align-center .timeline-item > span.button, .timeline-horizontal .timeline-item > span.button{
    position:absolute;
    white-space:nowrap;
}
.timeline-animated::before{
    animation:pulse 2s infinite;
}
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(0,0,0,0.45);}
    70%{box-shadow:0 0 0 14px rgba(0,0,0,0);}
    100%{box-shadow:0 0 0 3px rgba(0,0,0,0);}
}
.timeline-vertical::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:2px;
    background:#e5e5e5;
}
.timeline-vertical.align-center::before{
    left:50%;
    transform:translateX(-50%);
}
.timeline-vertical.align-center .timeline-item{
    width:50%;
    padding:20px 40px;
}
.timeline-vertical.align-center .timeline-item:nth-child(odd){
    left:0;
    text-align:right;
}
.timeline-vertical.align-center .timeline-item:nth-child(even){
    left:50%;
}
.timeline-vertical.align-center .timeline-item::before{
    top:28px;
}
.timeline-vertical.align-center .timeline-item:nth-child(odd)::before{
    right:-8px;
}
.timeline-vertical.align-center .timeline-item:nth-child(even)::before{
    left:-8px;
}
.timeline-vertical.align-center .timeline-item:nth-child(odd) > span.button{
    left:100%;
    margin-left:40px;
}
.timeline-vertical.align-center .timeline-item:nth-child(even) > span.button{
    right:100%;
    margin-right:40px;
}
.timeline-vertical.align-left::before{
    left:18px;
}
.timeline-vertical.align-left .timeline-item{
    width:100%;
    padding:20px 40px 20px 60px;
}
.timeline-vertical.align-left .timeline-item::before{
    left:12px;
    top:28px;
}
.timeline-vertical.align-right::before{
    right:18px;
}
.timeline-vertical.align-right .timeline-item{
    width:100%;
    padding:20px 60px 20px 40px;
    text-align:right;
}
.timeline-vertical.align-right .timeline-item::before{
    right:12px;
    top:28px;
}
.timeline-horizontal{
    display:flex;
    gap:40px;
    overflow-x:auto;
    padding:80px 20px 20px;
    scroll-snap-type:x mandatory;
}
.timeline-horizontal::before{
    content:"";
    position:absolute;
    top:60px;
    left:0;
    right:0;
    height:2px;
    background:#e5e5e5;
}
.timeline-horizontal .timeline-item{
    flex:0 0 220px;
    text-align:center;
    scroll-snap-align:center;
    transition:.3s;
}
.timeline-horizontal .timeline-item::before{
    top:-28px;
    left:50%;
    transform:translateX(-50%);
    width:16px;
    height:16px;
    border:4px solid #fff;
}
.timeline-horizontal .timeline-item > span.button{
    top:-70px;
    left:50%;
    transform:translateX(-50%);
}
.timeline-horizontal .timeline-item > span.button::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-7px;
    transform:translateX(-50%);
    width:2px;
    height:6px;
    background:#e5e5e5;
}
@media(max-width:768px){
    .timeline-vertical::before{
        left:20px !important;
    }
    .timeline-vertical .timeline-item{
        width:100% !important;
        left:0 !important;
        text-align:left !important;
        padding-left:60px !important;
    }
    .timeline-vertical .timeline-item::before{
        left:12px !important;
        right:auto !important;
    }
    .timeline-horizontal{
        gap:20px;
    }
    .timeline-horizontal .timeline-item{
        flex:0 0 180px;
    }
}