/* ##################################### CARROUSSEL #################################### */

.projectDisplayerCarroussel {
    background-color: rgba(29, 29, 29, 0);
    width: 100%;
    height: calc(30vmin + 18vw + 40px);
    min-height: 120px;
    max-height: 600px;
    border-radius: 0.8%;
    text-shadow: 0px 0px 1vmin rgb(0, 0, 0);
}

.carrousselContainer {
    position: relative;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    height: 100%;
}

.carrousselImgContainer {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    width: calc(40px + 45%);
    height: calc(10vw + 32%);
    transition-duration: 0.2s;
    left: 50%;
    top: 50%;
}

.carrousselSetContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:rgb(0, 0, 0 , 0.6);
}

.centerImageCarroussel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 95%;
    max-height: 95%;
    cursor: zoom-in;
    transition-duration: 0.2s;
}

img.centerImageCarroussel:hover {
    max-width: 100%;
    max-height: 100%;    
}

.imgBehindLeft,
.imgBehindRight {
    z-index: 5;
    filter: opacity(75%) brightness(25%);
    pointer-events: none;
}

.imgBehindLeft {
    left: calc(39% - 10vmin);
}

.imgBehindRight {
    left: calc(61% + 10vmin);
}

.imgBehindCenter {
    left: 50%;
}


.imgFront {
    /*object-fit: cover;*/
    z-index: 500;
    width: calc(150px + 55%);
    height: 90%;
}

.carrousselArrow {
    background-image: url(../img/arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    width: auto;
    height: auto;
    max-width: 20%;
    max-height: 60%;
    min-height: calc(20px + 15%);
    min-width: calc(8px + 5%);
    z-index: 500;
    transition-duration: 100ms;
    z-index: 1000;
    cursor: pointer;
    filter: opacity(60%);
}
.carrousselArrow:hover {
    background-image: url(../img/arrow_over.png);
    max-width: 21%;
    max-height: 63%;
    min-height: calc(21px + 16%);
    min-width: calc(9px + 5%);
    filter: opacity(75%);
}
.carrousselArrow:active {
    background-image: url(../img/arrow_over.png);
    max-width: 19%;
    max-height: 57%;
    min-height: calc(19px + 14%);
    min-width: calc(7px + 5%);
}


.carrousselArrowLeft {
    left: 21%;
    transform: translateX(-50%) translateY(-50%) scaleX(-1);
}

.carrousselArrowRight {
    left: 79%;
    transform: translateX(-50%) translateY(-50%);
}


@media screen and (orientation:portrait) {
 
    .imgFront {
        width: 95%;
        height: 90%;
    }
    
    .projectDisplayerVideo {
        height: calc(40px + 15vmin + 19vw);
        width: calc(200px + 29vmin + 20vw);
    }

}