/****************************
 * Menu overlay
****************************/
html:not(.menu-open) .vii-menu-overlay {
    clip-path:polygon(100% 0, 100% 0, 100% 0, 100% 0);
}

.vii-menu-overlay {
    --image-w:clamp(300px, 35vw, 500px);

    transition:all .6s ease-in-out;
    padding:var(--vii-spacing-48);

    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.vii-menu-overlay-inner {max-width:1560px;}

/* overlay hamburger */
.vii-menu-sticky-right {
    opacity:0; visibility:hidden;
    padding:24px var(--vii-gap-container) 0 0;
}
html.menu-open .vii-menu-sticky-right,
body.scroll-middle .vii-menu-sticky-right {opacity:1; visibility:visible;}

@media only screen and (max-width:1180px) {
    html:not(.menu-open) .vii-menu-sticky-right {
        opacity:0; visibility:hidden;
    }
}

/* column */
.vii-menu-overlay__col.image {width:var(--image-w);}
.vii-menu-overlay__col.menu {width:calc(100% - var(--image-w)); gap:45px var(--vii-gap-container);}
.vii-menu-overlay__col.menu:before {content:"";}
.vii-menu-block.menu {max-width:380px;}
.vii-menu-block.content {max-width:350px;}

/* image */
.vii-menu-overlay__image {aspect-ratio:500/625;}

/* menu */
.vii-menu-overlay ul.menu ul {display:none;}
.vii-menu-overlay ul.menu {list-style:none; margin:0; padding:0;}
.vii-menu-overlay ul.menu > li {padding:0; margin:0;}
.vii-menu-overlay ul.menu > li > a {
    display:block; padding:10px 0;
    text-decoration:none;
    font-size:var(--vii-size-h4); font-weight:300; letter-spacing:0.02em;
}


/* hover */
.vii-menu-overlay ul.menu > li[class*="current"] > a,
.vii-menu-overlay ul.menu:hover > li[class*="current"] > a:hover,
.vii-menu-overlay ul.menu > li > a:hover {font-weight:700; color:#fff; letter-spacing:0.06em;}

.vii-menu-overlay ul.menu:hover > li[class*="current"] > a {font-weight:300; letter-spacing:0.02em;}

/* social */
.vii-menu-overlay .vii-social-buttons ul {flex-direction:column;}


@media only screen and (max-width:1023px) {
    .vii-menu-overlay__col.image {display:none;}
    .vii-menu-overlay__col.menu {width:100%;}
}
@media only screen and (max-width:767px) {
    .vii-menu-overlay {overflow:auto; padding:0;}
    .vii-menu-overlay-inner {max-height:100vh; height:auto;}
    .vii-menu-overlay__col.menu {flex-direction:column; align-items:flex-start; padding:120px 20px 60px;}
    .vii-menu-overlay__col.menu:before {display:none;}
}