.nav-button {
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 2;
}

.navbar-cus {
    font-family: 'NotoSerifDisplay', sans-serif;
}

    .navbar-cus .nav-menu-content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        flex-direction: row;
        padding: 6rem;
        background: #fff;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
    }

    .navbar-cus.open .nav-menu-content {
        -webkit-animation-duration: .5s;
        animation-duration: .5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: bounceInTop;
        animation-name: bounceInTop;
        background-image: url(/files/system/img/general/bg-slide.jpg);
    }

@keyframes bounceInTop {
    0% {
        opacity: 0;
        transform: translateY(-2000px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.navbar-cus.close .nav-menu-content {
    animation-delay: 1s;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounceOutTop;
    animation-name: bounceOutTop;
}

@keyframes bounceOutTop {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-2000px);
    }
}

.nav-button .toggle-text {
    width: 50px;
}

.nav-button .text-nav {
    transition: all 2s ease-in-out;
}

.nav-button:hover .text-open,
.open .nav-button:hover .text-close {
    display: block;
}

.nav-button:hover .text-menu,
.open .nav-button:hover .text-open,
.open .text-open,
.text-open,
.text-close {
    display: none;
}

.nav-button .toggle-icon {
    --width-icon: 25px;
    margin-right: 10px
}

    .nav-button .toggle-icon .toggle-line {
        position: relative;
        height: 2px;
        background-color: #fff;
        width: 25px;
        transition: .5s
    }

.nav-button.text-black .toggle-icon .toggle-line {
    background-color: #fff;
}

.nav-button .toggle-icon .toggle-line:not(:first-child) {
    margin-top: 5px
}

.nav-button .toggle-icon .toggle-line:first-of-type,
.nav-button .toggle-icon .toggle-line:nth-of-type(3) {
    transform: scaleX(.5)
}

.nav-button .toggle-icon .toggle-line:nth-of-type(2) {
    width: var(--width-icon)
}

.nav-button .toggle-icon .toggle-line:first-of-type {
    transform-origin: left
}

.nav-button .toggle-icon .toggle-line:nth-of-type(3) {
    transform-origin: right
}

.nav-button:hover .toggle-line {
    --trans-icon: scale(0.2, 1.7)
}

    .nav-button:hover .toggle-line:first-of-type,
    .nav-button:hover .toggle-line:nth-of-type(2),
    .nav-button:hover .toggle-line:nth-of-type(3) {
        transform: var(--trans-icon);
        border-radius: 3px
    }

    .nav-button:hover .toggle-line:first-of-type {
        transform: var(--trans-icon) translateY(4px)
    }

    .nav-button:hover .toggle-line:nth-of-type(3) {
        transform: var(--trans-icon) translateY(-4px)
    }

.open .nav-button .toggle-line:nth-of-type(2) {
    transform: scale(0) !important;
    display: none
}

.open .nav-button .toggle-line:first-of-type,
.open .nav-button .toggle-line:nth-of-type(3) {
    margin-top: 0 !important
}

.open .nav-button .toggle-line:first-of-type {
    transform: scale(1) rotate(45deg) !important;
    transform-origin: bottom !important
}

.open .nav-button .toggle-line:nth-of-type(3) {
    transform: scale(1) rotate(-45deg) !important;
    transform-origin: top !important
}

.navbar-cus.open .nav-menu-content .nav-menu {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translateX(-2000px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.navbar-cus.open .nav-menu-content .nav-contact {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.navbar-cus.close .nav-menu-content .nav-menu {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounceoutLeft;
    animation-name: bounceoutLeft;
}

@keyframes bounceoutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}

.navbar-cus.close .nav-menu-content .nav-contact {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}

@keyframes bounceOutRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}

.navbar-cus .nav-menu-content .nav-menu {
    width: 70%;
}

.navbar-cus .nav-menu-content .nav-contact {
    width: 30%;
    padding: 2.5rem;
    color: #fff;
}

    .navbar-cus .nav-menu-content .nav-contact a,
    .navbar-cus .nav-menu-content .nav-contact a:hover,
    .navbar-cus .nav-menu-content .nav-contact a:focus {
        color: #fff;
    }

    .navbar-cus .nav-menu-content .nav-contact h3 {
        color: #fff;
        font-size: 1.25rem;
        line-height: 1.75rem;
        font-weight: 700;
    }

.close-1 .nav-menu-content {
    display: none !important;
}

.nav-menu-content .nav-menu > .mod_navigation {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

    .nav-menu-content .nav-menu > .mod_navigation > ul {
        /*     counter-reset: mycounter;*/
    }

        .nav-menu-content .nav-menu > .mod_navigation > ul > li:not(:first-child) {
            margin-top: 1.5rem;
        }

        .nav-menu-content .nav-menu > .mod_navigation > ul > li:before {
            /*     content: counter(mycounter,decimal-leading-zero) ".";*/
            /*     counter-increment: mycounter;*/
            content: "\f111";
            font-family: "Font Awesome 5 Pro";
            font-weight: 700;
            display: inline-block;
            padding-right: .5em;
            width: 2.5rem;
            font-size: 16px;
            color: #fff;
        }

        .nav-menu-content .nav-menu > .mod_navigation > ul > li > a {
            padding-bottom: 7px;
            letter-spacing: 4px;
            border: 0;
            background: none;
            display: inline-block;
            padding: 0;
            color: #fff;
        }

            .nav-menu-content .nav-menu > .mod_navigation > ul > li > a:after {
                content: "";
                position: absolute;
                width: 100%;
                transform: scaleX(0);
                height: 2px;
                bottom: 0;
                left: 0;
                background-color: #fff;
                transform-origin: bottom right;
                transition: transform .25s ease-out;
            }

        .nav-menu-content .nav-menu > .mod_navigation > ul > li:hover a,
        .nav-menu-content .nav-menu > .mod_navigation > ul > li.active > a {
            opacity: 1;
            color: #fff;
        }

            .nav-menu-content .nav-menu > .mod_navigation > ul > li:hover > a:after,
            .nav-menu-content .nav-menu > .mod_navigation > ul > li.active > a:after {
                transform: scaleX(1);
                transform-origin: bottom left;
            }

.text-white {
    color: #fff;
}

.text-black {
    color: #000 !important;
}

@media screen and (max-width:767.98px) {
    .navbar-cus .nav-menu-content {
        padding: 1.25rem;
        font-size: 1.5rem;
        line-height: 2rem;
    }

        .navbar-cus .nav-menu-content .nav-menu {
            width: 100%;
        }

        .navbar-cus .nav-menu-content .nav-contact {
            width: 100%;
            padding: 0;
        }

    .nav-menu-content .nav-menu > .mod_navigation {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}