/* ------------------------------------------------------------------ Swipe */
.swipeLeft {
    display: none;
}

.swipeRight {
    display: none;
}

@media screen and (orientation: portrait) {

    /* a droite */
    .swipeLeft {
        text-transform: uppercase;
        font-size: var(--size50);
        line-height: 1em;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        z-index: 1;
        top: 50%;
        left: calc(-1 *var(--f));
        transform: translate(-50%, -50%);
        text-align: center;
        border: 1px solid var(--color1);
        z-index: 100;
        background-color: var(--color2);
        width: var(--arrow);
        height: var(--arrow);
        border-radius: 100%;
        cursor: pointer;
    }
    /* a gauche */
    .swipeRight {
        text-transform: uppercase;
        font-size: var(--size50);
        line-height: 1em;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        z-index: 1;
        top: 50%;
        right: calc(-1 *var(--f));
        transform: translate(50%, -50%);
        text-align: center;
        border: 1px solid var(--color1);
        z-index: 100;
        background-color: var(--color2);
        width: var(--arrow) !important;
        height: var(--arrow);
        border-radius: 100%;
        cursor: pointer;
    }
    .swipeRight span, .swipeLeft span {
        margin-top: -0.65rem;
        /* margin-left: -0.1rem; */
    }

    /* ------------------------------------------------------------------ Button repositioning when open */
    .voletLeftOpen .swipeRight {
        right: 0px;
    }

    .voletRightOpen .swipeLeft {
        left: 0px;
    }

    /* ------------------------------------------------------------------ Volet open position */
    .voletRightOpen .voletRight {
        right: var(--f);
        z-index: 101;
    }

    .voletLeftOpen .voletLeft {
        left: var(--f);
        z-index: 101;
    }

    .arrow,
    .cross {
        padding: 1em;
        display: none;
    }

    .arrow {
        display: block;
    }

    /* ------------------------------------------------------------------ Visibility of buttons */
    .voletLeftOpen .voletRight {
        display: none;
    }

    .voletRightOpen .voletLeft {
        display: none;
    }
    /* ------------------------------------------------------------------ Cross and arrows */
    .voletLeftOpen .voletLeft .cross {
        display: block;
    }
    .voletLeftOpen .voletLeft .arrow {
        display: none;
    }
    .voletRightOpen .voletRight .cross {
        display: block;
    }
    .voletRightOpen .voletRight .arrow {
        display: none;
    }
    /* .appFilters {
        line-height: 10rem !important;
    }  */
    /* .voletRight .arrow,
    .voletLeft .arrow {
        display: block;
    }

    .voletRight.open .arrow,
    .voletLeft.open .arrow {
        display: none;
    }

    .voletRight .cross,
    .voletLeft .cross {
        display: none;
    }

    .voletRight.open .cross,
    .voletLeft.open .cross {
        display: block;
    } */
}