/**
 * Timeline styling
 */
.timeline {
    display: flex;
    flex-direction: column;
    padding: 60px 20px 0 37px;
    position: relative;
}

@media screen and (min-width: 768px) {
    .timeline {
        padding: 60px 20px 0;
    }
}

.timeline__track {
    background: #919191;
    background-clip: content-box;
    height: 100%;
    left: 30px;
    min-height: 9px;
    max-height: 100%;
    padding: 0 5px 7px;
    position: absolute;
    top: 0;
    width: 14px;
    z-index: 2;
}

@media screen and (min-width: 768px) {
    .timeline__track {
        left: calc(50% - 7px);
    }
}

.timeline__track::after {
    background: #2c71f3;
    border-radius: 50%;
    bottom: 0;
    content: '';
    height: 14px;
    left: 0;
    position: absolute;
    width: 14px;
}

.timeline__item {
    padding-top: 20px;
    padding-left: 30px;
    position: relative;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .timeline__item {
        padding-left: 0;
        width: calc(50% + 2px);
    }
}

@media screen and (min-width: 768px) {
    .timeline__item:nth-child(odd) {
        margin-right: auto;
        padding-right: 40px;
    }
}

@media screen and (min-width: 768px) {
    .timeline__item:nth-child(even) {
        margin-left: auto;
        padding-left: 40px;
        text-align: right;
    }
}

@media screen and (min-width: 768px) {
    .timeline__item:nth-child(even) .timeline__line {
        left: 0;
        right: auto;
    }
}

.timeline__line {
    background: #919191;
    height: 4px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
}

@media screen and (min-width: 768px) {
    .timeline__line {
        left: auto;
        right: 0;
    }
}

.timeline__wrap img {
    height: 200px;
    width: 300px;
}

@media screen and (max-width: 767.9px) {
    .timeline__footer {
        padding-left: 30px;
    }
}

.timeline.is-init .timeline__line {
    transition: width 0.5s ease-in-out;
    width: 0;
    will-change: width;
}

.timeline.is-init .timeline__wrap {
    opacity: 0;
    transform: translateY(-20px);
    transition: transform 0.5s, opacity 0.2s;
    will-change: opacity, transform;
}

.timeline.is-init .timeline__footer {
    opacity: 0;
    transition: opacity 0.2s;
    will-change: opacity;
}

.timeline.is-loading .timeline__line,
.timeline.is-loading .timeline__wrap,
.timeline.is-loading .timeline__footer {
    transition: none;
}

.timeline .is-visible .timeline__line {
    width: 100%;
}

.timeline .is-visible .timeline__wrap {
    opacity: 1;
    transform: translateY(0);
}

.timeline .is-visible.timeline__footer {
    opacity: 1;
}

.timeline__content a {
    color: inherit;
    text-decoration: none;
}

/* .timeline__content h3 {
    color: #1978d9;
} */

/* .time h4 {
    color: red;
} */