.timeline-slider-container {
    position: absolute;
    width: 80%;
    max-width: 600px;
    height: 100px;

    left: 50%;
    bottom: 10%;

    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);

    mask-image: linear-gradient(left, rgba(0, 0, 0, 0), black, black, black, rgba(0, 0, 0, 0));
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), black, black, black, rgba(0, 0, 0, 0));
}

.timeline-slider {
    position: absolute;
    left: 50%;

    height: 100%;
    bottom: 20px;

    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transition: all;
}

.timline-dot {
    position: absolute;
    bottom: 0px;
    left: 0px;

    height: 10px;

    background-image: url("../images/timline-dot.png");
    background-repeat: repeat-x;
    background-size: auto;
    background-position-x: 4px;

    transform: translateX(-2px);
    -webkit-transform: translateX(-2px);
    display: inline-block;
}


.timeline-year {
    position: absolute;

    bottom: 20px;
    transform: translateX(-50%) scale(1);
    font-size: 20px;
    width: auto;
    text-align: center;
    white-space: nowrap;
}

.timeline-dot-container {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: calc(100% + 4px);
    height: 20px;
    display: inline-flex;
    overflow: hidden;
}

.timeline-triangle {
    position: absolute;
    left: 50%;
    bottom: 0px;

    width: 15px;
    height: 15px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);

    background-image: url("../images/triangle.svg");
    background-size: contain;
    background-position: center;
}

.timeline-title {
    position: absolute;
    left: 50%;
    top: 10%;

    transform: translateX(-50%) scale(1.6);
    -webkit-transform: translateX(-50%) scale(1.6);
    width: 100%;
    max-width: 400px;

    text-align: center;
    font-size: 23px;
    font-family: "Lemon Milk";
    font-weight: 500;
    letter-spacing: -1px;
}


.timeline-title-line-top {
    position: absolute;
    max-width: 350px;
    width: 100%;
    height: 20px;
    left: 50%;
    top: -20px;
    /* background-color: rgba(255, 255, 255, 0.288); */

    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}


.timeline-title-line-bottom {
    position: absolute;
    max-width: 350px;
    width: 100%;
    height: 20px;
    left: 50%;
    bottom: -20px;
    /* background-color: rgba(255, 255, 255, 0.226); */

    transform: translateX(-50%) rotate(180deg);
    -webkit-transform: translateX(-50%) rotate(180deg);
}


.timeline-fade-in {
    opacity: 0;

    animation-name: animattion-fade-in;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


.timeline-slide-container {
    position: absolute;

    top: 18%;

    width: 100%;
    height: 62%;

    /* background-color: white; */

    /* animation-name: timeline-slide-container-up-down;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards; */
}

.timeline-slide-image-container {
    position: absolute;

    top: 0%;

    width: 100%;
    height: 100%;

    /* background-color: white; */

    animation-name: timeline-slide-container-up-down;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.image-container-side {
    width: 30%;
    right: 50%;
}

.background-position-right {
    background-position: right;
}

.background-position-center {
    background-position: center;
}

.timeline-slide-text-container {
    position: absolute;

    top: 45%;
    left: 55%;

    width: 20%;
    max-height: 40%;

    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 15px;
    /* background-color: #feeabf75; */

    transform: translateY(-50%);

    animation-name: timeline-text-container-show;
    animation-duration: 0.2s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.timeline-slide-text-container::-webkit-scrollbar {
    width: 4px;
}

/* Track */
.timeline-slide-text-container::-webkit-scrollbar-track {
    background: #ffffff41;
    border-radius: 2px;
}

/* Handle */
.timeline-slide-text-container::-webkit-scrollbar-thumb {
    background: #ebebeb34;
    border-radius: 2px;
}

/* Handle on hover */
.timeline-slide-text-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

@keyframes timeline-text-container-show {
    0% {
        left: 70%;
        opacity: 0;
    }

    100% {
        left: 55%;
        opacity: 1;
    }
}

.timeline-headline {
    font-size: 20px;
    font-family: 'Lemon Milk';
    margin-bottom: 20px;
}

.timeline-description {
    font-family: sans-serif;
    text-align: left;
    font-size: 19px;
    line-height: 25px;

    pointer-events: none;
}

@keyframes timeline-slide-container-up-down {
    0% {
        transform: translateY(-10px) scale(0.8);
        -webkit-transform: translateY(-10px) scale(0.8);
    }

    10% {
        transform: translateY(-10px) scale(0.8);
        -webkit-transform: translateY(-10px) scale(0.8);
    }

    40% {
        transform: translateY(10px) scale(0.9);
        -webkit-transform: translateY(10px) scale(0.9);
    }

    60% {
        transform: translateY(10px) scale(0.9);
        -webkit-transform: translateY(10px) scale(0.9);
    }

    90% {
        transform: translateY(-10px) scale(0.8);
        -webkit-transform: translateY(-10px) scale(0.8);
    }

    100% {
        transform: translateY(-10px) scale(0.8);
        -webkit-transform: translateY(-10px) scale(0.8);
    }
}

.timeline-slide {
    position: absolute;

    height: 100%;
    width: 90%;

    left: 50%;

    transform: translate(-50%);
    -webkit-transform: translate(-50%);

}

.timeline-slide-content {
    position: absolute;
    /* background-color: white; */
    width: 100%;
    height: 90%;

    display: flex;
    opacity: 1;


    overflow: hidden;

    background-size: contain;
    background-repeat: no-repeat;

    /* filter: drop-shadow(2px 2px 50px #feeabf75);
    -webkit-filter: drop-shadow(2px 2px 50px #feeabf75); */
}

.timeline-animate-in-left {

    animation: timeline-animation-slide-left 150ms cubic-bezier(.46, .29, 0, 1.24) 1 forwards;
}

.timeline-animate-in-right {

    animation: timeline-animation-slide-right 150ms cubic-bezier(.46, .29, 0, 1.24) 1 forwards;
}


.timeline-animate-out-left {

    animation: timeline-animation-out-left 150ms cubic-bezier(.46, .29, 0, 1.24) 1 forwards;
}

.timeline-animate-out-right {

    animation: timeline-animation-out-right 150ms cubic-bezier(.46, .29, 0, 1.24) 1 forwards;
}

.timeline-animate-glitch {
    animation: glitch 2s ease infinite 2s alternate-reverse;
}

.slide-1 {
    animation-delay: 0.01s;


    top: calc(12.5% * 0);
    --glitch-translate: -10px;

    background-position-y: 0px;
}

.slide-2 {
    animation-delay: 0.02s;

    top: calc(12.5% * 1);
    --glitch-translate: 10px;

}

.slide-3 {
    animation-delay: 0.03s;

    top: calc(12.5% * 2);
    --glitch-translate: 15px;
}

.slide-4 {
    animation-delay: 0.04s;

    top: calc(12.5% * 3);
    --glitch-translate: -16px;
}

.slide-5 {
    animation-delay: 0.05s;

    top: calc(12.5% * 4);
    --glitch-translate: 40px;
}

.slide-6 {
    animation-delay: 0.06s;

    top: calc(12.5% * 5);
    --glitch-translate: -23px;
}

.slide-7 {
    animation-delay: 0.07s;

    top: calc(12.5% * 6);
    --glitch-translate: -30px;
}

.slide-8 {
    animation-delay: 0.08s;

    top: calc(12.5% * 7);
    --glitch-translate: 4px;
}

.image-slide-1 {
    clip: rect(0px, 0px, 0px, 0px);
}


@keyframes timeline-animation-slide-left {

    0% {
        opacity: 1;
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
    }

    100% {
        opacity: 1;
    }
}


@keyframes timeline-animation-slide-right {

    0% {
        opacity: 1;
        transform: translate(50%);
        -webkit-transform: translate(50%);
    }

    100% {
        opacity: 1;
    }
}


@keyframes timeline-animation-out-left {


    0% {
        opacity: 1;
        transform: translateX(100px);
        -webkit-transform: translateX(100px);
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        transform: translateX(-200%);
        -webkit-transform: translateX(-200%);
    }
}


@keyframes timeline-animation-out-right {

    0% {
        opacity: 1;
        transform: translateX(-100px);
        -webkit-transform: translateX(-100px);
    }

    30% {
        opacity: 0;
    }

    100% {
        transform: translateX(200%);
        -webkit-transform: translateX(200%);
        opacity: 0;
    }
}

@keyframes glitch {
    0% {
        opacity: 1;
        transform: translateX(var(--glitch-translate));
        -webkit-transform: translateX(var(--glitch-translate));
    }

    2% {
        opacity: 1;
        transform: none;
        -webkit-transform: none;
    }

    4% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        text-shadow: none;
        transform: none;
        -webkit-transform: none;
    }
}

.timeline-bullet-container {
    position: absolute;

    bottom: 22%;
    height: 20px;

    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);

    display: inline-flex;
    text-align: center;
    /* max-width: 120px; */

    z-index: 1000;
}


.timeline-bullet {
    width: 5px;
    height: 5px;
    background-color: white;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-flex;
    opacity: 0.5;

    border-radius: 50%;
}

.timeline-bullet-selected {
    opacity: 1;
}

.timeline-bullet-small {
    transform: scale(0.6);
    opacity: 0.5;
    background-color: rgba(255, 255, 255, 0.555);
}

.z0 {
    z-index: 0;
}

.z1 {
    z-index: 0;
}

.zm0 {
    z-index: -2;
}

.zm1 {
    z-index: -1;
}


.z5 {
    z-index: 5;
}

.z6 {
    z-index: 6;
}


.timeline-arrow-left {
    position: absolute;
    top: 50%;
    left: -30px;

    width: 40px;
    height: 40px;

    transform: translate(-50%, calc(-100% + 10px)) rotate(180deg);
    -webkit-transform: translate(-50%, calc(-100% + 10px)) rotate(180deg);
}


.timeline-arrow-right {
    position: absolute;
    top: 50%;
    right: -30px;

    width: 40px;
    height: 40px;

    transform: translate(50%, calc(-100% + 10px));
    -webkit-transform: translate(50%, calc(-100% + 10px));
}

.timeline-up-arrow {
    top: 5%;
    width: 40px;
    height: 40px;
}

.timeline-down-arrow {
    bottom: 0%;
    width: 40px;
    height: 40px;
}


@media only screen and (max-width: 1000px) {

    .image-container-side {
        width: 100%;
        right: 0%;
        height: 42%;
        top: 14%;
    }

    .background-position-right {
        background-position: center;
    }

    .background-position-center {
        background-position: center;
    }


    .timeline-slide-text-container {
        position: absolute;

        top: 53%;
        width: 80%;
        left: 50%;


        /* background-color: #feeabf75; */

        pointer-events: none;

        animation-name: timeline-text-container-show;
        animation-duration: 0.2s;
        animation-timing-function: ease-in;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;


        height: 18vh;

        transform: translateX(-50%);

        mask-image: linear-gradient(-90deg, black, black, black, rgba(0, 0, 0, 0));
        -webkit-mask-image: -webkit-linear-gradient(-90deg, black, black, black, rgba(0, 0, 0, 0));
        z-index: 100;

        -webkit-overflow-scrolling: touch;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    .timeline-content {
        position: relative;
        top: 0px;
    }

    @keyframes timeline-text-container-show {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }


    .timeline-headline {
        font-size: 20px;
        font-family: 'Lemon Milk';
        margin-bottom: 5px;

        pointer-events: none;
    }

    .timeline-description {
        font-family: sans-serif;
        text-align: left;

        pointer-events: all;
        padding-bottom: 40px;

        letter-spacing: auto;

        font-size: 15px;
    }


    .timeline-bullet-container {
        bottom: 22%;
    }

    .timeline-slider-container {

        bottom: 7%;
    }



    .timeline-title {
        transform: translateX(-50%) scale(1);
        -webkit-transform: translateX(-50%) scale(1);
    }
}

.timeline-bullet-slider {
    display: inline-flex;
}