/* @group Site Nav
------------------------------------ */
.site-nav-wrapper {
    --height-site-nav: 8.2rem;
}

.frame-container+.container {
    margin-top: var(--heightNav, 0px);
}

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: var(--border);
    z-index: var(--z-index-site-nav);
    background-color: var(--deep-moss, #393839);
    height: var(--height-site-nav);
}

.site-nav__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 4.6%;
}

.site-nav__main-menu a {
    color: var(--canvas-weave, #BCB094);
    text-align: center;
    font-family: var(--titleFont);
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.45em;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
}

.site-nav__main-logo img {
    width: auto;
    height: 3rem;
}

@media only screen and (min-width: 961px) {
    .site-nav-wrapper {
        position: fixed;
        top: 0;
        z-index: var(--z-index-modal);
        height: var(--height-site-nav);
        width: 100%;
        --height-site-nav: 10.3rem;
    }

    .site-nav {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-inline: 4.6%;
        background-color: var(--deep-moss, #393839);
    }

    .site-nav__row {
        padding-inline: 4.6%;
    }

    .site-nav__main-logo img {
        height: 4.8rem;
    }

    .site-nav__main-menu a {
        font-size: 1.2rem;
    }

    .site-nav__main-menu .current-menu-item a {
        color: var(--white);
    }

    .site-nav__right {
        display: none;
    }

    .menu-site-nav {
        display: flex;
        align-items: center;
        position: absolute;
        right: 0;
        top: 0;
        padding-inline: 4.6%;
        z-index: var(--z-index-modal);
        height: var(--height-site-nav);
    }

    .site-nav__main-menu {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        column-gap: 4.8rem;
    }
}

@media only screen and (min-width: 0) and (max-width: 960px) {
    .site-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 3rem;
    }

    .site-nav .icon-burguer {
        font-size: 2rem;
        -webkit-text-stroke: .07rem;
    }

    [data-menu="openedMenu"] .site-nav {
        background-color: var(--canopy-green, #464F3C);
    }

    [data-menu="openedMenu"] .icon-burguer {
        font-size: 5.2rem;
    }

    [data-menu="openedMenu"] .icon-burguer:before {
        content: "\e90e";
    }

    .menu-site-nav {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: var(--z-index-highest);
        background-color: var(--canopy-green, #464F3C);
        background-image: url('../../img/layout/menu-mobile-bg.svg');
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center bottom;
        padding: 34.5svh 3rem 0;
        opacity: 0;
        transform: translateY(-3rem);
        transition: all .7s;
        pointer-events: none;
    }

    [data-menu="openedMenu"] .menu-site-nav {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
    }

    .site-nav__main-menu li:not(:last-child) {
        margin: 0 0 4.8rem;
    }
}

/* @end */



/* @group frame-container
------------------------------------ */
.frame-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none !important;
    z-index: var(--z-index-medium-high);
}

.frame-container .line {
    position: absolute;
    top: 0;
    height: 100%;
    border-color: var(--canvas-weave, #BCB094);
    border-style: solid;
    background-color: var(--deep-moss, #393839);
    width: 3rem;
}

.frame-container .line--left {
    left: 0;
    border-width: 0 2px 0 0;
}

.frame-container .line--right {
    right: 0;
    border-width: 0 0 0 2px;
}

.frame-container .line--left {
    border-right: var(--border);
}

.frame-container .line--right {
    border-left: var(--border);
}

@media only screen and (min-width : 961px) {
    .frame-container .line {
        width: calc(4.6% + 2px);
    }
}

/* @end */