/*==================================================
                    TIMELINE
==================================================*/

.timeline{

    position:fixed;

    left:clamp(12px,2vw,40px);

    top:clamp(90px,9vw,110px);

    width:clamp(20px,2vw,24px);

    height:calc(100vh - clamp(130px,12vw,150px));

    z-index:900;

    pointer-events:none;

}



/*==================================================
                BASE LINE
==================================================*/

.timeline-line{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:2px;

    height:100%;

    background:rgba(21,133,15,.20);

}



/*==================================================
                PROGRESS
==================================================*/

.timeline-progress{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:2px;

    height:0;

    background:var(--green);

    transition:height .15s linear;

}



/*==================================================
                DOT cursor
==================================================*/
.timeline-cursor{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:clamp(18px,1.5vw,20px);

    height:clamp(18px,1.5vw,20px);

    border-radius:50%;

    background:var(--green);

    box-shadow:

        0 0 10px var(--green),

        0 0 22px rgba(22,163,74,.55);

}



/*==================================================
            SMALL DESKTOP
==================================================*/

@media (max-width:1200px){

    .timeline{

        left:clamp(20px,3vw,40px);

    }

}



/*==================================================
                TABLET
==================================================*/

@media (max-width:992px){

    .timeline{

        display:none;

    }

}