.timeline-slider__frame {
    background-image: linear-gradient(#005538, #007A50);
}

@media screen and (min-width: 1024px) {
    .timeline-slider__frame {
        padding: 35px 0;
    }
}

.timeline-slider__container-fluid {
    overflow: hidden;
}

.timeline-slider__container {
    max-width: 1280px;
    margin: 15px auto;
}

@media screen and (min-width: 1024px) {
    .timeline-slider__container {
        margin: 35px auto;
    }
}

.slick-list {
    overflow-x: visible;
}

.slick-slide {
    height: auto;
}

.timeline-item {
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
}

@media screen and (min-width: 1024px) {
    .timeline-item {
        display: flex;
        margin-bottom: 50px;
        margin-left: 100px;
        margin-right: 100px;
    }
}

.timeline-item__image {
    position: relative;
    height: auto;
    max-height: 200px;
}

@media screen and (min-width: 1024px) {
    .timeline-item__image {
        height: 500px;
        max-height: unset;
        width: 55%;
    }
}

.timeline-item__image .image-wrapper {
    overflow: hidden;
}

.timeline-item__image .image-wrapper img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.timeline-item__image.full-width {
    width: 100%;
    float: none;
}

.timeline-item__image.full-width img {
    display: block;
    max-width: 100%;
    height: auto;
}

/** Count 1 **/

.timeline-item__image.image-count-1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}

@media screen and (min-width: 1024px) {
    .timeline-item__image.image-count-1 {
        grid-column-gap: 30px;
        grid-row-gap: 30px;
    }

    .timeline-item__image.image-count-1 .img-1 {
        margin-bottom: 50px;
    }
}

/** Count 2 **/

.timeline-item__image.image-count-2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-row-gap: 15px;
}

@media screen and (min-width: 1024px) {
    .timeline-item__image.image-count-2 {
        grid-row-gap: 30px;
    }
}

/** Count 3 **/

.timeline-item__image.image-count-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}

.timeline-item__image.image-count-3 .img-1 {
    grid-area: 1 / 1 / 2 / 2;
}

.timeline-item__image.image-count-3 .img-2 {
    grid-area: 2 / 1 / 3 / 2;
}

.timeline-item__image.image-count-3 .img-3 {
    grid-area: 1 / 2 / 3 / 3;
}

@media screen and (min-width: 1024px) {
    .timeline-item__image.image-count-3 {
        grid-column-gap: 30px;
        grid-row-gap: 30px;
    }
}

.timeline-item__content-wrapper {
    position: relative;
    color: #FFF;
    margin-top: 25px;
}

@media screen and (min-width: 1024px) {
    .timeline-item__content-wrapper {
        margin-top: 0;
        margin-left: 50px;
        width: calc(45% - 50px);
        max-height: 500px;
    }
}

@media screen and (min-width: 1024px) {
    .timeline-item__content {
        height: 100%;
        overflow-y: auto;
    }
}

.timeline-item__subheader {
    font-size: 1.8rem;
    line-height: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

@media screen and (min-width: 1024px) {
    .timeline-item__subheader {
        font-size: 4rem;
        line-height: 4rem;
        margin-bottom: 2rem;
    }
}

.timeline-item__header {
    font-size: 1.6rem;
    line-height: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

@media screen and (min-width: 1024px) {
    .timeline-item__header {
        font-size: 2rem;
        line-height: 2.5rem;
        margin-bottom: 2rem;
    }
}

.timeline-item__text {
    font-size: 1.4rem;
}

@media screen and (min-width: 1024px) {
    .timeline-item__text {
        font-size: 1.5rem;
    }
}

.timeline-item__overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow-y: scroll;
}

.open-overlay-button,
.close-overlay-button {
    background: none;
    border: none;
    padding: 0;
    font-size: 1rem;
    color: #FFF;
    text-decoration: underline;
}

@media screen and (min-width: 1024px) {
    .open-overlay-button,
    .close-overlay-button {
        font-size: 1.5rem;
    }
}

.timeline-navigation {
    height: 8px;
    border-radius: 100px;
    margin: 5px 0 25px 0;
}

@media screen and (min-width: 1024px) {
    .timeline-navigation {
        margin: 80px 0 50px 0;
    }
}

.slick-list {
    overflow: visible;
}

.timeline-navigation-bullet {
    height: 8px;
    background-color: #CCC;
    /* opacity: 0.5; */
    position: relative;
}

.timeline-navigation-bullet:last-child.slick-current {
    background-color: transparent;
}

.timeline-navigation-bullet:before {
    content: "";
    display: block;
    background-color: #FFF;
    height: 16px;
    width: 16px;
    border-radius: 100px;
    z-index: 999;
    cursor: pointer;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 0;
    top: 50%;
    border: 5px solid white;
}

.slick-current.timeline-navigation-bullet {
    opacity: 1;
}

.slick-current.timeline-navigation-bullet:before {
    border: 5px solid #FFF;
    box-shadow: 0 0 20px #FFF;
}

.custom-slider-navigation-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-slider-navigation {
    display: block;
    width: 45px;
    height: 45px;
    margin: 0 5px;
    cursor: pointer;
    border: none;
    outline: none;
    background-color: rgb(255, 255, 255, 0.5);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
    border-radius: 100% !important;
}

.custom-slider-navigation__start {
    /* play-solid */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTczIDM5Yy0xNC44LTkuMS0zMy40LTkuNC00OC41LS45UzAgNjIuNiAwIDgwVjQzMmMwIDE3LjQgOS40IDMzLjQgMjQuNSA0MS45czMzLjcgOC4xIDQ4LjUtLjlMMzYxIDI5N2MxNC4zLTguNyAyMy0yNC4yIDIzLTQxcy04LjctMzIuMi0yMy00MUw3MyAzOXoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=);
}

.custom-slider-navigation__start.active {
    /* pause-solid */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTQ4IDY0QzIxLjUgNjQgMCA4NS41IDAgMTEyVjQwMGMwIDI2LjUgMjEuNSA0OCA0OCA0OEg4MGMyNi41IDAgNDgtMjEuNSA0OC00OFYxMTJjMC0yNi41LTIxLjUtNDgtNDgtNDhINDh6bTE5MiAwYy0yNi41IDAtNDggMjEuNS00OCA0OFY0MDBjMCAyNi41IDIxLjUgNDggNDggNDhoMzJjMjYuNSAwIDQ4LTIxLjUgNDgtNDhWMTEyYzAtMjYuNS0yMS41LTQ4LTQ4LTQ4SDI0MHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=);
}

.custom-slider-navigation__restart {
    /* arrow-rotate-left-solid */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTEyNS43IDE2MEgxNzZjMTcuNyAwIDMyIDE0LjMgMzIgMzJzLTE0LjMgMzItMzIgMzJINDhjLTE3LjcgMC0zMi0xNC4zLTMyLTMyVjY0YzAtMTcuNyAxNC4zLTMyIDMyLTMyczMyIDE0LjMgMzIgMzJ2NTEuMkw5Ny42IDk3LjZjODcuNS04Ny41IDIyOS4zLTg3LjUgMzE2LjggMHM4Ny41IDIyOS4zIDAgMzE2LjhzLTIyOS4zIDg3LjUtMzE2LjggMGMtMTIuNS0xMi41LTEyLjUtMzIuOCAwLTQ1LjNzMzIuOC0xMi41IDQ1LjMgMGM2Mi41IDYyLjUgMTYzLjggNjIuNSAyMjYuMyAwczYyLjUtMTYzLjggMC0yMjYuM3MtMTYzLjgtNjIuNS0yMjYuMyAwTDEyNS43IDE2MHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=);
}

.custom-slider-navigation__prev {
    /* chevron-left-solid */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTkuNCAyMzMuNGMtMTIuNSAxMi41LTEyLjUgMzIuOCAwIDQ1LjNsMTkyIDE5MmMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMHMxMi41LTMyLjggMC00NS4zTDc3LjMgMjU2IDI0Ni42IDg2LjZjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBsLTE5MiAxOTJ6IiBmaWxsPSIjRkZGIi8+PC9zdmc+);
}

.custom-slider-navigation__next {
    /* chevron-right-solid */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTMxMC42IDIzMy40YzEyLjUgMTIuNSAxMi41IDMyLjggMCA0NS4zbC0xOTIgMTkyYy0xMi41IDEyLjUtMzIuOCAxMi41LTQ1LjMgMHMtMTIuNS0zMi44IDAtNDUuM0wyNDIuNyAyNTYgNzMuNCA4Ni42Yy0xMi41LTEyLjUtMTIuNS0zMi44IDAtNDUuM3MzMi44LTEyLjUgNDUuMyAwbDE5MiAxOTJ6IiBmaWxsPSIjRkZGIi8+PC9zdmc+);
}

.custom-slider-navigation:hover {
    background-color: rgb(255, 255, 255, 0.75);
}

.slick-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.speed-indicator {
    background-color: #FFF;
    width: 0;
    height: 8px;
    position: absolute;
    left: 0;
    top: 0;
}

/* alle Items */
.timeline-navigation-bullet {
    background: #FFF;
}

/* alle Items nach dem aktuellen, daher wird dann nur das erste in #FFF gefärbt. */
.timeline-navigation-bullet.slick-current,
.timeline-navigation-bullet.slick-current + .timeline-navigation-bullet {
    background: #CCC;
}