#slider .film_roll_wrapper {
    transition: all 1s ease;
}

#slider {
    width: 100vw;
    z-index: 98;
    margin-top: 100px;
    display: flex;
}

#slider .film_roll_child {
    z-index: 98;
    transition: all 1s ease;
    transform: translateX(0) scale(0.95) !important;
    border: 1px solid #db5e37;
    border-radius: 31px;
    opacity: 0.8;
    position: relative;
}

#slider .film_roll_child:hover {
    background: linear-gradient(
        180deg,
        rgba(206, 79, 55, 1) 0%,
        rgba(104, 40, 28, 1) 82.2%
    );
    opacity: 1;
    border: 1px transparent !important;
}

#slider .film_roll_child.active {
    transform: translateX(0) scale(1) !important;
    z-index: 99;
    opacity: 1 !important;
    background: linear-gradient(
        180deg,
        rgba(206, 79, 55, 1) 0%,
        rgba(104, 40, 28, 1) 82.2%
    );

    border-radius: 31px;
    border: 0 !important;
    position: relative;
}

#slider-left,
#slider-right {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    fill: #0b0b0c;
    background: #0b0b0c;
    border: 1px solid #979797;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    top: 55%;
    z-index: 1000000 !important;
    position: absolute;
    transition: all 0.4s ease-in-out;
    opacity: 0.7;
}

#slider-left {
    transform: rotate(-90deg);
    left: 80px;
}

#slider-right {
    transform: rotate(90deg);
    right: 80px;
}

.arrow-slider {
    width: 40px;
    height: auto;
    filter: brightness(0) invert(1);
    transition: all 0.4s ease-in-out;
}

#slider-left:hover {
    opacity: 1;
    animation: sliderPrevious 1s infinite;
}

#slider-right:hover {
    opacity: 1;
    animation: sliderNext 1s infinite;
}

@keyframes sliderPrevious {
    0% {
        transform: rotate(-90deg) scale(1);
    }
    50% {
        transform: rotate(-90deg) scale(1.2);
    }
    100% {
        transform: rotate(-90deg) scale(1);
    }
}

@keyframes sliderNext {
    0% {
        transform: rotate(90deg) scale(1);
    }
    50% {
        transform: rotate(90deg) scale(1.2);
    }
    100% {
        transform: rotate(90deg) scale(1);
    }
}

#slider-left:hover .arrow-slider,
#slider-right:hover .arrow-slider {
    animation: sliderNextPreviousArrow 1s infinite;
}

@keyframes sliderNextPreviousArrow {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

#slider-left:hover,
#slider-right:hover {
    cursor: pointer;
    opacity: 1;
}

@media screen and (max-width: 600px) and (orientation: portrait) {
    #slider {
        width: 100%;
    }

    #slider-left,
    #slider-right {
        border: 1px solid #979797;
        width: 15vw;
        height: 15vw;
        top: 60%;
        opacity: 0.5;
        z-index: 100;
    }

    #slider-left {
        left: 4vw;
    }

    #slider-right {
        right: 4vw;
    }

    .arrow-slider {
        width: 4.2vw;
    }
}