/* //////////////////////////////////////////////////////////// */
/* // Standard Nav */
/* //////////////////////////////////////////////////////////// */

nav {
    background-color : var(--white);
    z-index          : 10;
}

nav,
.navbar-logo,
.navbar-items li a:not(.active),
.fa {
    transition : all 0.15s ease-in-out;
}

.main-nav {
    padding   : 15px;
    font-size : clamp(15px, 2vw, 17px);
}

.main-nav > .inner {
    max-width : var(--site_width);
}

.navbar-items li a {
    padding         : 20px;
    text-decoration : none;
}

/*.navbar-items li a:hover,
.navbar-items li a.active {
    color : var(--primary);
}*/

@media (min-width : 769px) {

    .burger {
        display : none;
    }

    nav .inner {
        display         : flex;
        flex-direction  : row;
        justify-content : space-between;
        align-items     : flex-end;
    }

    nav .navbar-items ul {
        flex-direction  : row;
        list-style-type : none;
        justify-content : flex-start;
        align-items     : center;
    }
}

@media (max-width : 1024px) {

    .main-nav {
        font-size : 19px;
    }

    .navbar-items li a {
        padding : 13px;
    }
}

@media (max-width : 768px) {

    .main-nav {
        padding : 10px 10px;
    }

    .main-nav > .inner {
        display         : flex;
        justify-content : flex-start;
        align-items     : center;
        max-width       : var(--site_width);
        flex-direction  : column;
    }

    body.nav-open .navbar-items {
        max-height : 1000px;
        transition : max-height 0.75s ease-in-out;
    }

    .navbar-items {
        width       : 100%;
        overflow    : hidden;
        max-height  : 0;
        transition  : max-height 0.75s cubic-bezier(0, 1, 0, 1);
        margin-left : 0px;
        text-align  : center;
    }

    .navbar-items li {
        width : 100%;
    }

    .navbar-items li a {
        width   : 100%;
        padding : 4px;
        display : block;
    }

    .navbar-items ul {
        margin : 20px 0 0 0 !important;
    }

    .navbar-logo img {
        max-height : 36px;
    }

    .burger a {
        padding   : 3px 10px;
        font-size : 20px;
        display   : block;
    }

}

@media (max-width : 480px) {

    nav .main-nav > .inner {
        flex-direction : column;
    }

}