.timeline {
    overflow: hidden;
    padding: 2em 0;
}
.timeline-container {
    position: relative;
    padding: 0;
}
.timeline-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    height: 100%;
    width: 4px;
    background: #76A4EA;
}


        .timeline-container::before {
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
        }


.timeline-block {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}
.timeline-block:last-child {
    margin-bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgb(255, 255, 255) 50%);
}


        .timeline-block:nth-child(even) {
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
        }


.timeline-date {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border: 2px solid #76A4EA;
    color: #19273E;
    font-size: 2vw;
    line-height: 2vw;
    font-weight: 700;
}
.timeline-date {
    background-color: #fff;
    z-index: 1;
}


        .timeline-date {
            width: 240px;
            height: 58px;
            -ms-flex-order: 1;
            order: 1;
            margin-left: calc(10% - 120px);
            will-change: transform;
            align-self: center;
        }
        .timeline-block:first-of-type .timeline-date {
            align-self:flex-start;
        }
        .timeline-block:nth-child(even) .timeline-date {
            margin-right: calc(10% - 120px);
        }


.timeline-content {
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative;
    margin-left: 1.25em;
    padding: 1.25em;
}
.timeline-content::before {
    content: "";
    position: absolute;
    right: 100%;
    width: 100px;
    height: 0;
    border: 2px solid transparent;
    border-bottom-color: #76A4EA;
    margin-right: 2px;
    border-right: 2px;
}


        .timeline-content {
            width: 40%;
            -ms-flex-positive: 0;
            flex-grow: 0;
            will-change: transform;
            margin: 0;
            border: 2px solid #335892;
            display: inline-grid;
        }
        .timeline-content::before {
            align-self: center;
        }
        .timeline-block:first-of-type .timeline-content::before {
            align-self:flex-start;
            top: 24px;
        }
        .timeline-block:nth-child(odd) .timeline-content::before {
            right: auto;
            left: 100%;
            width: 100px;
            height: 0;
            border: 2px solid transparent;
            border-bottom-color: #76A4EA;
            margin-left: 2px;
            border-left: 2px;
        }
        .timeline-date--hidden,
        .timeline-content--hidden {
            visibility: hidden;
        }
        .timeline-date--bounce-in {
            -webkit-animation: cd-bounce-1 0.6s;
            animation: cd-bounce-1 0.6s;
        }
        .timeline-content--bounce-in {
            -webkit-animation: cd-bounce-2 0.6s;
            animation: cd-bounce-2 0.6s;
        }
        .timeline-block:nth-child(even) .timeline-content--bounce-in {
            -webkit-animation-name: cd-bounce-2-inverse;
            animation-name: cd-bounce-2-inverse;
        }



@-webkit-keyframes cd-bounce-1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes cd-bounce-1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes cd-bounce-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes cd-bounce-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@-webkit-keyframes cd-bounce-2-inverse {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes cd-bounce-2-inverse {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}


@media only screen and (max-width: 1450px) { 
    .timeline-date { width: 140px; margin-left: calc(10% - 70px); }
    .timeline-block:nth-child(2n) .timeline-date { margin-right: calc(10% - 70px); }
}

@media only screen and (max-width: 900px) {
    
    .timeline-block { display: block; }
    .timeline-block .timeline-date { margin: 0 auto !important; width: 240px; font-size: 26px; line-height: 36px; }
    .timeline-content { width: 90%; margin: 20px auto; display: block; background-color: #fff; font-size: 20px; line-height: 30px; }
    .history .container .timeline-content strong { font-size: 22px; line-height: 22px; }
    .timeline-block .timeline-content::before { display: none !important; }
    
}