.main-story {
    position: relative;
    height: 100%;
    margin: auto;
    color: #fff;
}

.story-cover-shadow {
    position: fixed;
    z-index: -9;
    left: 0;
    right: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.67);
}

.story-cover {
    position: fixed;
    z-index: -10;
    filter: grayscale(1);
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.67);
    object-fit: cover;
    object-position: top;
}

.content__elements {
    height: 100%;
    overflow: hidden;
}

.content__elements #pagepiling {
    display: flex;
    justify-content: center;
}

.section {
    opacity: 0;
    height: calc(100% - 125px - 0px - 125px);
    top: 0;
    display: flex;
    align-items: center;
}

.section.active {
    opacity: 1;
}

@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio:1){
    .section{
        height: calc(100% - 100px - 0px - 100px);
    }
}

/* Animation for story sections */
/* Scroll-out (up) and fade-out for the current section */
.fade-out-scroll-up {
    animation: fadeOutScrollUp 1s forwards ease-in-out;
}

@keyframes fadeOutScrollUp {
    0% {
        opacity: 1;
        transform: translateY(0); /* Start from its current position */
    }
    100% {
        opacity: 0;
        transform: translateY(-100vh); /* Move out upwards */
    }
}

/* Scroll-in (up) and fade-in for the next section */
.fade-in-scroll-up {
    animation: fadeInScrollUp 1s forwards ease-in-out;
}

@keyframes fadeInScrollUp {
    0% {
        opacity: 0;
        transform: translateY(100vh); /* Start from below the viewport */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* End at its normal position */
    }
}

/* Scroll-out (down) and fade-out for the current section when scrolling up */
.fade-out-scroll-down {
    animation: fadeOutScrollDown 1s forwards ease-in-out;
}

@keyframes fadeOutScrollDown {
    0% {
        opacity: 1;
        transform: translateY(0); /* Start from its current position */
    }
    100% {
        opacity: 0;
        transform: translateY(100vh); /* Move out downwards */
    }
}

/* Scroll-in (down) and fade-in for the next section when scrolling up */
.fade-in-scroll-down {
    animation: fadeInScrollDown 1s forwards ease-in-out;
}

@keyframes fadeInScrollDown {
    0% {
        opacity: 0;
        transform: translateY(-100vh); /* Start from above the viewport */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* End at its normal position */
    }
}

.blueimp-gallery>.next, .blueimp-gallery>.prev {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

.blueimp-gallery .indicator {
     display: none !important;
 }

/* Laptop */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio:1) {
    /*.section {
        scale: 0.9;
    } */
}

/* Mobile */
@media (max-width: 768px) {
    #pagepiling {
        height: 100%;
    }
    .main-story {
        max-width: 100%;
    }
    .content__elements {
        padding-top: 0;
    }
    .section {
        height: auto;
    }
    .black-bg-mobile {
        display: none;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.95);
        height: 100%;
        width: 100%;
        top: 0;
    }
    .black-bg-mobile.active {
        display: block;
    }
}

.blueimp-gallery-carousel{
    background: #242424!important;
    box-shadow: none!important;
}