/*-- OFFCANVAS --*/

    .c-offcanvas{
        transition: all 0.2s ease-out;
        height:0vh;
        width:100vw;
        position:fixed;
        z-index:var(--zaux-zindex4);
        top:0;
        left:0;
        right:0;
        bottom:0;
        backdrop-filter: blur(10px);
        background-color:rgb(39 70 99 / 90%);
        color:var(--zaux-color-white);
        overflow:hidden;
        opacity:0;
        pointer-events:none;
        overflow:auto;
    }

    .c-offcanvas__inner{
        height:100%;
        display:flex;
        justify-content:space-between;
        align-items:center;
        flex-direction: column;
    }

    .c-offcanvas[class*=--open]{
        height:100vh;        
        opacity:1;
        pointer-events: all;
    }

    .c-offcanvas__close-btn{
        position:absolute;
        top:var(--zaux-spacing6);
        right:var(--zaux-spacing8);
    }
    
    .c-offcanvas-trigger{
        color:var(--zaux-color-white);
        position:relative;
        cursor:pointer;
        position:relative;
        z-index:var(--zaux-zindex4);
    }

    .c-offcanvas__head, .c-offcanvas__foot{
        padding: var(--zaux-spacing4) 0px;
        width:100%;
    }

    .c-offcanvas__body .menu{
        font-size:var(--zaux-fsize6);
        list-style-type:none;
        text-align:center;
        display:flex;
        flex-direction:column;
        gap:var(--zaux-spacing4);
    }
    
/*-- END OFFCANVAS --*/