:root
{
    --red: #f45b69;
    --dark-blue: #0976d1;
    --orange: #f68e24;
    --white: #fff;
    --black: #000;
}

*,
*::before,
*::after
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a
{
    color: inherit;
}

/* TIMELINE
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.timeline
{
    padding: 50px 20px;
    margin: 0 auto;
    color: var(--black);
}
    .timeline img
    {
        margin-top: 15px;
        border-radius: 10px 0 0 10px;
    }

    .timeline ol
    {
        position: relative;
        list-style: none;
    }

        .timeline ol::before
        {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: var(--orange);
        }

        .timeline ol li .item-inner
        {
            padding: 20px 180px;
            margin-bottom: 8vh;
        }

        .timeline ol li .time-wrapper
        {
            position: relative;
            font-size: 4.5rem;
            font-weight: bold;
            line-height: 0.9;
        }

            .timeline ol li .time-wrapper::before,
            .timeline ol li .time-wrapper::after
            {
                content: "";
                position: absolute;
                background: var(--orange);
            }

            .timeline ol li .time-wrapper::before
            {
                top: 50%;
                left: -180px;
                transform: translateY(-50%);
                width: 0;
                height: 3px;
                transition: width 0.8s linear;
            }

            .timeline ol li .time-wrapper::after
            {
                top: calc(50% - 8px);
                left: -60px;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                transform: scale(0);
                transform-origin: left center;
                transition: all 0.4s linear;
            }

        .timeline ol li time,
        .timeline ol li .details > *
        {
            opacity: 0;
            transition: 0.5s;
        }

        .timeline ol li time
        {
            display: inline-block;
            transform: translateY(-30px);
        }

        .timeline ol li .details > *
        {
            transform: translateY(30px);
        }

        .timeline ol li .details
        {
            background-color: #FFF;
            padding: 1rem 3rem;
            margin-top: 1rem;
            border-radius: 20px;
            box-shadow: 0 0 5px #aeaeae;
        }

            .timeline ol li .details h3
            {
                font-size: 2rem;
                line-height: 1;
                margin: 15px 0;
            }

        /* ANIMATION STYLES
末末末末末末末末末末末末末末末末末末末末末末末末末 */

        .timeline ol li.in-view .time-wrapper::before
        {
            width: 120px;
        }

        .timeline ol li.in-view .time-wrapper::after
        {
            transition-delay: 0.8s;
            transform: scale(1.5);
        }

        .timeline ol li.in-view time,
        .timeline ol li.in-view .details > *
        {
            opacity: 1;
            transform: none;
        }

        .timeline ol li.in-view time
        {
            transition-delay: 1.3s;
        }

        .timeline ol li.in-view .details h3
        {
            transition-delay: 1.5s;
        }

        .timeline ol li.in-view .details p
        {
            transition-delay: 1.7s;
            color: #000;
        }

/* MQ STYLES
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media (max-width: 700px)
{
    .timeline ol li .item-inner
    {
        padding: 20px 40px;
    }

    .timeline ol li .time-wrapper::before
    {
        display: none;
    }

    .timeline ol li .time-wrapper::after
    {
        left: -45px;
        transform-origin: center;
    }

    .timeline ol li.in-view .time-wrapper::after
    {
        transition-delay: 0s;
    }

    .timeline ol li.in-view time
    {
        transition-delay: 0.5s;
    }

    .timeline ol li.in-view .details h3
    {
        transition-delay: 0.7s;
    }

    .timeline ol li.in-view .details p
    {
        transition-delay: 0.9s;
    }
}