body {
    background-color: black;
    overflow: hidden;
    transition: background-color 1.2s ease-in;
}

.projectContainer {
    width: 100%;
    height: 100vh;
    flex: 1;
    position: relative;
}

#projectMenu {
    flex: 1;
}

#projectPresentation {
    flex: 2;
}

.projectMenuContainer {
    gap: 1.2em;
    /* max-height: 100vh; */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    translate: -1em 0;
}

.projectMenuContainer .projectMenuItem {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    min-width: 30vw;
    height: 180px;
}

.projectMenuContainer .projectMenuItem img.active {
    box-shadow: 0px 5px 80px 0px white, 2px 8px 2px 1px rgb(0 0 0 / 40%);
}

.projectMenuContainer .projectMenuItem:not(.active) img {
    filter: grayscale(100%);
}

.projectMenuContainer::-webkit-scrollbar {
    display: none;
}

#projectDescription {
    position: absolute;
    margin-top: calc(180px - 50px);
    width: 150px;
    height: 100px;
    border-radius: 8px;
}

#projectDescription video {
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px;
    object-fit: fill;
}

.no-interactions {
    pointer-events: none;
    user-select: none;
}

.projectDescriptionLg video {
    /* height: 25vh !important; */
    width: 20vw;
    border-radius: 8px;
}

.rotation-3d-animation {
    animation: rotation3d 1.2s ease-in-out;
    transition: .2s ease-in-out;
}

@keyframes rotation3d {
    0% {
        transform: rotateY(0);
        scale: 0.8;
    }

    100% {
        transform: rotateY(180deg);
        scale: 1;
    }
}

/*  RIGHT LATERAL BAR */

.lateralBar {
    position: relative;
    --barColor: transparent;
}

.lateralBar::before {
    --lateralBarWidth: 10px;
    position: absolute;
    content: ' ';
    width: var(--lateralBarWidth);
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--barColor);
    z-index: 3;
    transition: .2s ease-in-out;
}

.lateralBar.navigate::before {
    display: block !important;
    opacity: .4;
    animation: coverLeftRight 3s ease-in-out;
}


@keyframes coverLeftRight {
    0% {
        width: var(--lateralBarWidth);
    }

    100% {
        width: 100vw;
    }
}


@media (min-width: 992px) {
    .projectContainer {
        margin-top: 0px !important;
        overflow: hidden;
    }

    #projectDescriptionDescription {
        cursor: pointer;
        transition: .2s ease-in;
    }

    #projectDescriptionDescription i {
        transition: .2s ease-in;
    }

    .exploreProject:hover i {
        transform: translateX(.5em);
    }

    .projectContainer {
        flex-direction: row-reverse !important;
    }


    .projectMenuContainer {
        position: relative;
        display: block !important;
        gap: 2.2em;
        justify-content: center !important;
        overflow-y: hidden;
        /* min-height: calc(420px *3) !important; set this property via JQuery*/
        /** CREATE A STARTING PROJECT ANIMATION  **/
        /* animation: fadeInTop 1.3s 1s ease; set this property via JQuery */
        top: 50px;
        transition: .3s ease;
    }

    @keyframes fadeInTop {
        100% {
            translate: -4em 0;
            rotate: 0deg;
        }
    }

    .projectMenuContainer::-webkit-scrollbar {
        display: none;
    }

    .projectMenuContainer .projectMenuItem {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0px;
        overflow: hidden;
        height: calc(70vh) !important;
        width: calc(43vw) !important;
        /* min-height: 420px !important; */

        /* animation: animateProjectItem 1.2s ease-in-out infinite alternate-reverse; */
        /* animate via JQUERY to set random animation duration */
    }

    .projectMenuContainer .projectMenuItem {
        /* perspective: 800px; */
    }

    .projectMenuContainer .projectMenuItem img {
        width: 100% !important;
        min-height: 100% !important;
        transform-style: preserve-3d;
        scale: .8;
        transform: rotateY(-15deg);
        transition: .2s ease-in-out;
    }

    @keyframes animateProjectItem {
        0% {
            clip-path: polygon(5% 5%, 100% 5%, 95% 100%, 0% 100%);
        }

        100% {
            clip-path: polygon(5% 0%, 100% 0%, 95% 95%, 0% 95%);
        }
    }

    .projectMenuContainer .projectMenuItem img.active {
        /* clip-path: polygon(5% 5%, 100% 5%, 95% 100%, 0% 100%); */
        /* clip-path: polygon(5% 5%, 34.5% 2.1%, 71.22% 0%, 100% 0%, 100% 93%, 71.22% 92.36%, 58.5% 92.36%, 40.07% 92.36%, 5% 95%); */
        scale: 1;
        transform: none;
        /* -webkit-mask: url('../images/mask.png') 0 0/100% 100%;
        mask: url('../images/mask.png') 0 0/100% 100%; */

    }

    #projectMenuContainer {
        flex-direction: column !important;
        justify-content: start;
        transform: translate(0em, 0, 150px);
    }

    .projectDescriptionTitle {
        justify-content: flex-start !important;
    }

    #projectDescriptionTitle h1 {
        font-size: 5.4em !important;
        /* white-space: nowrap; */
        /* position: absolute;
        top: 30%; */
    }

    .projectMenuContainer .projectMenuItem {
        scale: .8;
        transform: translateX(-20px) translateY(7px) !important;
        transition: 1.2s .1s ease-in-out;
    }

    .projectMenuContainer .projectMenuItem.active {
        scale: 1;
        transform: translateX(0px) !important;
    }


}

@media (min-width: 1200px) {
    .projectContainer {
        margin-top: 0px !important;
    }

    #projectDescriptionDescription p {
        max-width: 75%;
    }

    .projectContainer {
        flex-direction: row-reverse !important;
    }

    #projectMenu {}

    #projectMenuContainer {
        flex-direction: column !important;
    }

    #projectPresentation {}

    .projectDescriptionTitle {
        justify-content: flex-start !important;
        position: relative;
    }

    #projectDescriptionTitle h1 {
        position: absolute;
        margin-bottom: 2em;
        white-space: nowrap;
        font-size: 5.4em !important;
    }

}

@media (min-width: 2000px) {
    .projectContainer {
        margin-top: 0px !important;
    }

    #projectDescriptionDescription p {
        max-width: 80%;
        font-size: 3.1em !important;
    }

    #projectDescriptionDescription .exploreProject span {
        font-size: 1.6em !important;
    }

    .projectContainer {
        flex-direction: row-reverse !important;
    }

    #projectMenu {}

    #projectMenuContainer {
        flex-direction: column !important;
    }

    #projectPresentation {}

    .projectDescriptionTitle {
        justify-content: flex-start !important;
    }

    #projectDescriptionTitle h1 {
        font-size: 12.4em !important;
    }

}


@media (max-width: 772px) {
    .projectMenuContainer {
        /* border: 1px solid yellow; */
        /* transition: .3s ease-in-out; */
    }

    .projectMenuContainer .projectMenuItem {
        display: flex;
        justify-content: flex-start;
        border-radius: 0px;
        align-items: center;
        height: 180px;
    }

}

@media (max-width: 992px) {

    .lateralBar::before {
        display: none;
    }
}

@media (max-width: 576px) {
    .projectMenuContainer .projectMenuItem {
        height: 180px;
    }
}

/* cutomize text logo */
#brand {
    --brandCaptionWidth: 80px;
    --firstLetterColor: var(--primaryColor);
    --brandTextColor: white;
    position: relative;
    font-size: 3.1em;
    color: var(--brandTextColor);
    transition: .2s ease-in;
}

#brand::after {
    position: absolute;
    /* content: 'Agence créative'; */
    left: calc(100% - 1.7em + (var(--brandCaptionWidth) / (-2)));
    bottom: -.1em;
    background-color: var(--firstLetterColor);
    color: var(--brandTextColor);
    height: 13px;
    width: var(--brandCaptionWidth);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .2em;
}

@media (max-width: 992px) {
    #brand {
        --brandCaptionWidth: 60px;
        font-size: 2em;
    }

    #brand::after {
        bottom: -.8em;
        left: 0;
    }
}

@media (max-width: 772px) {
    #brand {
        --brandCaptionWidth: 60px;
        font-size: 2em;
    }

    #brand::after {
        bottom: -.8em;
        left: calc(100% - 1em + (var(--brandCaptionWidth) / (-2)));
    }
}

/* #brand::first-letter {
    color: var(--firstLetterColor);
} */


/*  PROJECT INDICATOR  */
#projectIndicators {
    --indicatorColor: transparent;
    gap: 1em;
    margin-right: 2em;
    height: max-content;
    align-content: center;
}

.projectIndicatorItem {
    cursor: pointer;
    gap: .5em;
}

.projectIndicatorItemTitle {
    width: 0px;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transition: .25s ease-out;
    font-weight: bold;
    text-transform: uppercase;
    height: 2.8vh !important;
}

.projectIndicatorItemIndicator {
    width: .6vw;
    height: 2.8vh;
    border-radius: 4px;
    background-color: var(--indicatorColor);
    transition: .25s ease;
}

/* PLAY HOVER INDICATORS ANIMATION */

#projectIndicators:hover .projectIndicatorItem .projectIndicatorItemTitle {
    transition-delay: .35s;
    min-width: max-content;
    width: 3vw;
    font-size: 1em;
}

@keyframes showIndicator {
    50% {
        width: 150px;
        border-radius: 0px 6px 0px 6px;
    }

    100% {
        width: 8px;
        height: 18px;
        border-radius: 2px
    }
}

@media (min-width:2000px) {

    /* PLAY HOVER INDICATORS ANIMATION */

    #projectIndicators .projectIndicatorItem .projectIndicatorItemTitle {
        font-size: 2em !important;
    }

    @keyframes showIndicatdor {
        50% {
            width: 820px;
            border-radius: 0px 6px 0px 6px;
        }

        100% {
            width: 50px;
            /* height: 18px; */
            border-radius: 2px
        }
    }

}

/* #projectIndicators:hover .projectIndicatorItem .projectIndicatorItemIndicator {
    animation: showIndicator .5s ease-in;
} */


.removed {
    width: 0px !important;
    height: 0px !important;
    overflow: hidden;
}