﻿

#menu-holder { visibility: hidden; transition: visibility 0s linear 580ms; }
#menu-holder.open,
#menu-holder.closing { visibility: visible; transition: visibility 0s linear 0ms; }

#menu-holder__bg {
    transform: scaleX(0);
    transition: transform 500ms cubic-bezier(0.16, 0.01, 0.77, 1);
}
#menu-holder.open #menu-holder__bg { transform: scaleX(1); }

#menu-holder.closing #menu-holder__bg {
    transform: scaleX(0);
    transition: transform 460ms cubic-bezier(0.16, 0.01, 0.77, 1) 200ms !important;
}

#main-menu__side-bg {
    transform: scaleX(0);
    transition: transform 500ms cubic-bezier(0.16, 0.01, 0.77, 1) 80ms;
}
#menu-holder.open #main-menu__side-bg { transform: scaleX(1); }

#menu-holder.closing #main-menu__side-bg {
    transform: scaleX(0);
    transition: transform 380ms cubic-bezier(0.16, 0.01, 0.77, 1) 80ms !important;
}

.menu-holder .main-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 220ms ease, transform 220ms ease;
}

#menu-holder.open .main-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 380ms ease, transform 380ms ease;
}
#menu-holder.open .main-item:nth-child(1) { transition-delay: 280ms; }
#menu-holder.open .main-item:nth-child(2) { transition-delay: 340ms; }
#menu-holder.open .main-item:nth-child(3) { transition-delay: 400ms; }
#menu-holder.open .main-item:nth-child(4) { transition-delay: 460ms; }
#menu-holder.open .main-item:nth-child(5) { transition-delay: 520ms; }
#menu-holder.open .main-item:nth-child(6) { transition-delay: 580ms; }

#menu-holder.closing .main-item {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: opacity 180ms ease, transform 180ms ease !important;
}
#menu-holder.closing .main-item:nth-child(6) { transition-delay: 0ms !important; }
#menu-holder.closing .main-item:nth-child(5) { transition-delay: 30ms !important; }
#menu-holder.closing .main-item:nth-child(4) { transition-delay: 60ms !important; }
#menu-holder.closing .main-item:nth-child(3) { transition-delay: 90ms !important; }
#menu-holder.closing .main-item:nth-child(2) { transition-delay: 120ms !important; }
#menu-holder.closing .main-item:nth-child(1) { transition-delay: 150ms !important; }

#menu-holder.open .js-menu-fade,
#menu-holder.open .js-menu-fadeup {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 380ms ease 650ms, transform 380ms ease 650ms;
}

#menu-holder.closing .js-menu-fade,
#menu-holder.closing .js-menu-fadeup {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: opacity 150ms ease 0ms, transform 150ms ease 0ms !important;
    visibility: visible !important;
}

#menu-burger.loc .burger__line.line--top  { transform: rotate(45deg) translateY(-8px); }
#menu-burger.loc .burger__line.line--bottom{ transform: rotate(-45deg) translateY(7px); }
#menu-burger.loc .burger__line.line--mid  { transform: translateX(-110%); }

.menu-holder .menu-item .menu-a { color: #efebe5; }

#menu-holder .block-60 {
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}
#menu-holder .main-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-top: 8vh !important;
    padding-bottom: 0 !important;
    font-size: clamp(32px, min(calc(11vh - 14px), 8vw), 95px) !important;
}
.main-menu__social {
    position: static !important;
    flex-shrink: 0;
    padding: 20px 8% 48px;

    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.main-menu__social > a.abs-tl {
    position: static !important;
    display: inline !important;
}

.menu-social__icon--email { display: none !important; }

@media (max-width: 720px) {
    .main-menu__social {
        display: block !important;
        padding: 20px 8% 40px;
    }

    .main-menu__social > a.menu-social__email-text { display: none !important; }
    .menu-social__icon--email { display: inline-flex !important; }
    .menu-social__icons {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        justify-items: center;
        align-items: center;
        gap: 22px 0;
        max-width: 320px;
        margin: 0 auto;
    }
    .menu-social__icons .footer__social {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
}
