#timeline {
    padding   : 0 20px 0 0;
    max-width : 100%;
    margin    : 0 0 20px 0px;
}

.timeline {
    list-style-type : none;
    display         : flex;
    padding         : 0;
    text-align      : center;
}

.timeline li {
    transition : all 200ms ease-in;
}

.timestamp {
    margin-bottom   : 30px;
    padding         : 0 40px;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    text-align      : center;
    color           : #004f59;
}

.timestamp span a {
    text-decoration : none;
    font-weight     : 700;
    font-size       : 1.2em;
    color           : #004f59;
}

.timestamp span span {
    text-decoration : none;
    font-weight     : 400;
    font-size       : 1.2em;
    color           : #757575;
}

.status {
    display    : flex;
    border-top : 4px solid #004f59;
    position   : relative;
}

.status:before {
    content          : "";
    width            : 4px;
    height           : 20px;
    background-color : #004f59;
    position         : absolute;
    top              : -20px;
    left             : calc(50% - 2px);
    transition       : all 200ms ease-in;
}

.status::after {
    content          : "";
    width            : 8.5px;
    height           : 8.5px;
    background-color : #004f59;
    position         : absolute;
    top              : -25px;
    left             : calc(50% - 4px);
    border-radius    : 50%;
}

.swiper-control button {
    border     : none;
    background : #ffffff;
    top        : 43px;
    position   : relative;
    z-index    : 3;
    cursor     : pointer;
    height     : 30px;
    width      : 30px;
    padding    : 0;
    right      : -31px;
}

.prev-slide {
    float : left;
    left  : -10px;
}

.prev-slide svg {
    width     : 45px;
    height    : 30px;
    position  : relative;
    transform : rotateY(179deg); /* thanks apple, for not letting me rotate this by 180deg */
}

.prev-slide.swiper-button-disabled svg {
    display : none;
}

.prev-slide.swiper-button-disabled {
    background : url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23004F59%22%20class%3D%22st0%22%20d%3D%22M16.1%2C10.1l5-8.8l5%2C2.9l-5%2C8.8h0v5.8h0l5.1%2C8.8l-5%2C2.9l-5-8.7l-5%2C8.7l-5-2.9l5-8.8H1V13h10.1l-5-8.8l5-2.9%20L16.1%2C10.1z%22%2F%3E%3C%2Fsvg%3E") transparent;
    height     : 24px;
    width      : 24px;
    left       : 10px;
    top        : 46px;
}

.next-slide {
    float : right;
    right : -25px;
}

.next-slide svg {
    width                      : 30px;
    height                     : 30px;
    position                   : relative;
    transition                 : 0.35s;
    transition-timing-function : linear;
}

.next-slide.swiper-button-disabled svg {
    right                      : 5px !important;
    transition                 : 0.35s;
    transition-timing-function : linear;
}

.swiper-container {
    width      : 100%;
    overflow   : hidden;
    padding    : 0px 20px 25px 0;
    max-width  : 100%;
    max-height : 100vh;
    min-height : 0;
    min-width  : 0;
}


.swiper-container::before {
    content        : '';
    display        : block;
    position       : relative;
    width          : 100px;
    height         : 20px;
    top            : 72px;
    z-index        : 2;
    pointer-events : none;
    background     : rgb(255, 255, 255);
    background     : linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.65) 50%, rgb(255, 255, 255) 100%)
}

.swiper-container::after {
    content        : '';
    display        : block;
    position       : absolute;
    width          : 100px;
    height         : 20px;
    left           : 96%;
    top            : -60px;
    pointer-events : none;
    background     : rgb(255, 255, 255);
    background     : linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.85) 50%, rgb(255, 255, 255) 100%);
}

.swiper-slide {
    width       : auto;
    flex-shrink : 0;
    display     : block;
    height      : 100%;
    max-height  : 100%;
    text-align  : center;
    font-size   : 18px;
}

.swiper-slide:first-child span {
    padding : 0 0 0 5px;
}

.swiper-slide:nth-child(2n) {
    width : 40%;
}

.swiper-slide:nth-child(3n) {
    width : 20%;
}

.swiper-wrapper {
    max-height : 100%;
    height     : 100%;
    display    : flex;
}