#carrousel-custom {
    position: relative;
    height: 450px;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
}

#carrousel-custom div {
    position: absolute;
    transition: transform 400ms, left 400ms, opacity 400ms, z-index 0s;
    opacity: 1;
}

#carrousel-custom div img {
    width: 350px;
    transition: width 400ms;
    -webkit-user-drag: none;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    border-radius: 10px;
}

#carrousel-custom div.hideLeft {
    left: 0%;
    opacity: 0;
    transform: translateY(50%) translateX(-50%);
}

#carrousel-custom div.hideLeft img {
    width: 150px;
}

#carrousel-custom div.hideRight {
    left: 100%;
    opacity: 0;
    transform: translateY(50%) translateX(-50%);
}

#carrousel-custom div.hideRight img {
    width: 150px;
}

#carrousel-custom div.prev {
    z-index: 5;
    left: 24%;
    transform: translateY(50px) translateX(-50%);
}

#carrousel-custom img:hover {
    cursor:
}

#carrousel-custom div.prev img {
    width: 250px;
}

#carrousel-custom div.prevLeftSecond {
    z-index: 4;
    left: 9%;
    transform: translateY(50%) translateX(-50%);
    opacity: 0.7;
}

#carrousel-custom div.prevLeftSecond img {
    width: 150px;
}

#carrousel-custom div.selected {
    z-index: 10;
    left: 50%;
    transform: translateY(0px) translateX(-50%);
}

#carrousel-custom .selected p {
    text-align: center;
    font-size: 1.5rem;
    font-family: 'Plymouth';
    width: 350px;
}

#carrousel-custom .next p {
    text-align: center;
    font-size: 1.1rem;
    font-family: 'Plymouth';
    width: 250px;
}

#carrousel-custom .prev p {
    text-align: center;
    font-size: 1.1rem;
    font-family: 'Plymouth';
    width: 250px;
}

#carrousel-custom .nextRightSecond p {
    text-align: center;
    font-size: .8rem;
    font-family: 'Plymouth';
    width: 150px;
}

#carrousel-custom .prevLeftSecond p {
    text-align: center;
    font-size: .8rem;
    font-family: 'Plymouth';
    width: 150px;
}

#carrousel-custom div.next {
    z-index: 5;
    left: 76%;
    transform: translateY(50px) translateX(-50%);
}

#carrousel-custom div.next img {
    width: 250px;
}

#carrousel-custom div.nextRightSecond {
    z-index: 4;
    left: 93%;
    transform: translateY(50%) translateX(-50%);
    opacity: 0.7;
}

#carrousel-custom div.nextRightSecond img {
    width: 150px;
}

/*previous or next buttons css*/

.carrousel-button {
    background-color: unset;
    border: 0px;
    color: var(--gray-light);
    font-size: 3rem;
}

.carrousel-button:hover {
    color: var(--orange);
    transform: scale(1.1);
}

@media (min-width: 768px) {
    .button-82-front {
        font-size: 1.25rem;
        padding: 12px 42px;
    }
}

@media (min-width: 320px) and (max-width: 480px) {

    #carrousel-custom {
        height: 12rem;
    }

    #carrousel-custom div img {
        width: 250px;
    }

    #carrousel-custom .selected p {
        width: 100%;
    }

    #carrousel-custom div.prev {
        opacity: 0;
    }

    #carrousel-custom div.prevLeftSecond {
        opacity: 0;
    }

    #carrousel-custom div.next {
        opacity: 0;
    }

    #carrousel-custom div.nextRightSecond {
        opacity: 0;
    }

    #carrousel-custom .selected p {
        font-size: 1.5rem;
        margin-top: 2rem;
    }

    .carrousel-button {
        font-size: 2rem;
    }
}