/*  BASE MENU */

/* --------------------------------------------------------
    MARK: GENERAL
-------------------------------------------------------- */

header.element {
    z-index: 100;
}

a[title="Add a menu"] { 
    margin-left: 30px;
}

/* --------------------------------------------------------
    MARK: NAVBAR
-------------------------------------------------------- */

.navbar { 
    padding: 0; 
}

.navbar-nav { 
    margin: 0; 
    list-style: none; 
}

#navbar-home .navbar-nav { 
    gap: 10px; 
}

/* --------------------------------------------------------
    MARK: MENU WRAP
-------------------------------------------------------- */

.menu_wrap {
    padding: 20px 0;
}

    @media only screen and (max-width: 1024px) {
        .menu_wrap {
            padding: 8px 0;
        }
    }


/* --------------------------------------------------------
    MARK: LINKS
-------------------------------------------------------- */

.main-menu .nav-link {
    display: inline-flex;
    align-items: center;
}

/* --------------------------------------------------------
    MARK: LOGO
-------------------------------------------------------- */

.navbar-brand {
    line-height: 1; 
    padding: 0;
    margin-right: 0; 
    width: 150px; 
}

.navbar-brand.mobile-logo {
    display: none;
}

    @media only screen and (max-width: 1024px) {
        .header.sticky-head .sticky-logo { 
            display: none !important;
        }

        .header[data-sticky="sticky-fixed"] .main-logo {
            display: none;
        }

        .navbar-brand.main-logo {
            display: none;
        }

        .navbar-brand.mobile-logo {  
            display: inline-block;
        }
    }

/* --------------------------------------------------------
    MARK: STICKY LOGO
-------------------------------------------------------- */

    .header .sticky-logo {
        display: none;
    }

    .header[data-sticky="sticky"].sticky-head {
        position: fixed;
        z-index: 1030;
        width: 100%;
        left: 0;
        top: 0;         
    }  

    .header.sticky-head .sticky-logo {
        display: inline-flex;
    }

    .header.sticky-head .main-logo {
        display: none;
    }

/* --------------------------------------------------------
    MARK: TOGGLE
-------------------------------------------------------- */

.menu-toggle { 
    display: none; 
}

@media only screen and (max-width: 1024px) {
    .menu-toggle { 
        display: block; 
    }
}

.opener, .closer {
    padding: 0;
    background-color: transparent;
    border: none;
}

    .opener svg, .closer svg {
        width: 40px;
        height: 40px;
    }

@media only screen and (max-width: 1024px) {
    .navbar-expand-lg .navbar-collapse {  
        display: none !important;
    }
}


/* --------------------------------------------------------
    MARK: DROPDOWN
-------------------------------------------------------- */

.dropdown-menu { 
    padding: 0; 
    top: calc(100% - 2px);
}

    .dropdown-menu .menu-item a { 
        padding: 7px 10px; 
    }

        .dropdown-item {
            display: flex;
            align-items: center;
        }

.header-menu .menu-icon {
    height: 18px;
    width: 18px;
    margin-right: 5px;
    max-width: unset;
}

/* --------------------------------------------------------
    MARK: EXTENSION
-------------------------------------------------------- */

#navbar-home .menu-extension {
    margin-left: 20px;
}

.menu-extension {  
    display: flex;
    gap: 20px;
    align-items: center;
}

    .menu-extension .btn-loop {
        margin: 0;
    }

/* --------------------------------------------------------
    MARK: OVERLAY
-------------------------------------------------------- */

header.menu-overlay { 
    position: absolute; 
}

    @media only screen and (max-width: 1024px) {
        header.menu-overlay { 
            position: relative;
        }
    }

/* --------------------------------------------------------
    MARK: DATA-WIDTH
-------------------------------------------------------- */

header[data-width="full-width"] .container-xl,
header[data-width="full-width"] .container-lg {
    max-width: 100%;
}

/* --------------------------------------------------------
    MARK: DATA ALIGN
-------------------------------------------------------- */

header[data-menu="right"] .main-menu {
    margin-left: auto;
}

/* left menu / right extension */
header[data-menu="left"] .menu-extension {
    margin-left: auto;
}

/* center */
header[data-menu="center"] .main-menu { 
    margin: 0 auto;
}

header[data-menu="center"] .navbar-brand {
    position: absolute;
    left: 0;
}

header[data-menu="center"] .menu-extension {
    position: absolute;
    right: 0;
}

/* --------------------------------------------------------
    MARK: DATA COLLAPSED
-------------------------------------------------------- */

[data-type="collapsed"] .collapse {
    display: none !important;
}

[data-type="collapsed"] .menu-toggle {
    display: block !important;
}

/* --------------------------------------------------------
    MARK: ANIMATED
-------------------------------------------------------- */     

header[data-animated="yes"] {
    animation: fadeIn 0.5s;
    -webkit-animation: fadeIn 0.5s;
    -moz-animation: fadeIn 0.5s;
    -o-animation: fadeIn 0.5s;
    -ms-animation: fadeIn 0.5s; 
}

header[data-animated="no"] {
    animation: none;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    -ms-animation: none; 
}

/* --------------------------------------------------------
    MARK: DROP DEFAULT
-------------------------------------------------------- */

/* 2nd child and below arrow */

.navbar .dropdown-menu .dropdown > a:after {
    content: ""; 
    display: inline-block; 
    margin-left: .255em; 
    border-top: .3em solid transparent; 
    border-bottom: .3em solid transparent; 
    border-left: .3em solid; 
    border-right: 0;
}

    .navbar .dropdown-item::after {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

/* sub-level */

.navbar .dropdown-menu .dropdown-menu {
    left: calc(100% - 5px);
    top: 0px;
}

/* initial when no drop */

.dropdown-menu .dropdown-menu a:after { 
    display: none;
}

    .dropdown-level-2 .dropdown-menu { 
        display: block; 
    }

.navbar .dropdown-menu .dropdown a.dropdown-item-1,
.navbar .dropdown-menu .dropdown a.dropdown-item-2,
.navbar .dropdown-menu .dropdown a.dropdown-item-3 { 
    width: 100%;
}

/* --------------------------------------------------------
    MARK: DROP TRIGGER
-------------------------------------------------------- */

.navbar[data-drop="default"][data-trigger="hover"] .dropdown:hover > .dropdown-menu {
    display: block;
}

.navbar[data-trigger="hover"] .dmenu-0 .dropdown:hover > .dropdown-menu,
.navbar[data-trigger="click"] .dmenu-0 .dropdown:hover > .dropdown-menu {
    display: block !important;
}

/* 3rd level */
@media only screen and (max-width : 1300px)  and (min-width : 1024px) { 

    .navbar .dropdown-menu.dmenu-1 li {
        position: relative;
    }

    .navbar .dropdown-menu.dmenu-2 {
        left: 0 !important;
        position: relative;
        top: unset;
    }
    
}

/* --------------------------------------------------------
    MARK: DROP ANIMATE
-------------------------------------------------------- */

.navbar[data-drop="animate"] .dropdown-menu .dropdown-menu {
    left: calc(100%);
}

.navbar[data-drop="animate"][data-trigger="hover"] .dropdown:hover > .dropdown-menu {
    display: block;
}

.navbar[data-drop="animate"] .dropdown-menu.shown { 
    display: block; 
}

    .navbar[data-drop="animate"] .dropdown-item-0 .dropdown-menu li { 
        display: none; 
    }

        .navbar[data-drop="animate"][data-trigger="click"] .dropdown .dropdown-menu.shown li,
        .navbar[data-drop="animate"][data-trigger="hover"] .dropdown:hover .dropdown-menu li { 
            display: block; 
        }

.navbar[data-drop="animate"] .dropdown {
    perspective: 1000px;
    z-index: 1;
}

    .navbar[data-drop="animate"] .dropdown:hover {
        cursor: pointer;
    }

        .navbar[data-drop="animate"] .dropdown .dmenu-0.shown li,
        .navbar[data-drop="animate"] .dropdown:hover .dmenu-0 li {
            display: block;
            transform-origin: top center;
        }

            .navbar[data-drop="animate"] .dropdown .dmenu-0.shown li a,
            .navbar[data-drop="animate"] .dropdown:hover .dmenu-0 li a {
                position: relative;
                padding: 10px;
            }  

                .navbar[data-drop="animate"][data-trigger="click"] .dropdown .dmenu-0.shown li,
                .navbar[data-drop="animate"][data-trigger="hover"] .dropdown:hover .dropdown-menu li { 
                    display: block; 
                    line-height: 1;
                }

.navbar[data-drop="animate"] .dropdown-menu {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

    .navbar[data-drop="animate"] .dmenu-0 {
        position: absolute;
        top: calc(100% - 2px);
        left: 0;
        width: auto;
        perspective: 1000px;
    }

        .navbar[data-drop="animate"] .dmenu-0 > li {
            display: none;
            opacity: 0;
        }

        .navbar[data-drop="animate"] a.dropdown-item-1:hover > .dropdown-menu { 
            display: block;
        } 

.navbar[data-drop="animate"][data-item="group"] .dropdown-menu  {
    transform-origin: top center;
}

    .navbar[data-drop="animate"][data-item="group"] .dmenu-0 > li {
        display: block;
        opacity: 1;
    }

/* --------------------------------------------------------
    MARK: FLOAT MENU
-------------------------------------------------------- */

#navbar-float { 
    padding: 5px 0; 
    height:0px; 
    top: -90px; 
    transition: 0.2s; 
    overflow: hidden;    
    position: fixed;
    z-index: 1030;
    width: 100%;
    left: 0;
}

    #navbar-float.float-menu-show {
        height:auto; 
        top: 0px; 
        overflow: inherit;
    }

        .admin-bar #navbar-float.float-menu-show {
            top: 32px;
        }

    .header #navbar-float .sticky-logo {
        display: inline-block;
        animation: none;
        transition: none;
    }

    .header[data-sticky="sticky-fixed"] #navbar-float {
        display: none !important;
    }

/* --------------------------------------------------------
    MARK: BY VER.1
-------------------------------------------------------- */    

.menu-overlay.ver-1 .menu_wrap {
    background-color: transparent;
    position: absolute;
    width: 100%;
}

.ver-1[data-sticky="sticky-fixed"] {
    position: sticky;
    top: 0;
}

    .admin-bar header.ver-1[data-sticky="sticky-fixed"] { 
        position: sticky;
        top: 32px;
    }


/* --------------------------------------------------------
    MARK: FIXED MENU
-------------------------------------------------------- */

header[data-sticky="sticky-fixed"],
header.menu-overlay[data-sticky="sticky-fixed"] {
    position: fixed;
}

    @media only screen and (max-width: 1024px) {
        header[data-sticky="sticky-fixed"],
        header.menu-overlay[data-sticky="sticky-fixed"] {
            position: relative;
        }
    }


    header[data-sticky="sticky-fixed"].sticky-me {
        top: 0;
    }

    header.menu-overlay[data-sticky="sticky-fixed"] .menu_wrap {
        background-color: transparent;
    }

    header[data-sticky="sticky-fixed"] .sticky-logo,
    header.sticky-me[data-sticky="sticky-fixed"] .main-logo { 
        display: none;
    }

    header.sticky-me[data-sticky="sticky-fixed"] .sticky-logo,
    header[data-sticky="sticky-fixed"] .main-logo { 
        display: block;
    }

    header[data-sticky="sticky-fixed"] + main.page-inner {
        padding-top: 81px;
    }    

/* #endregion */

/* --------------------------------------------------------
    MARK: ADMIN BAR @ STIKCY
-------------------------------------------------------- */

.admin-bar header[data-sticky="sticky-fixed"].sticky-me {
    top: 32px;
}

.admin-bar header.header[data-sticky="sticky"].sticky-head {
    top: 32px;
}

#wp-admin-bar-customize {
    display: none;
}

    @media only screen and (max-width: 1024px) {
        .admin-bar header[data-sticky="sticky-fixed"].sticky-me,
        .admin-bar header.header[data-sticky="sticky"].sticky-head {
            top: 32px;
        }
    }

    @media only screen and (max-width: 782px) {
        .admin-bar header[data-sticky="sticky-fixed"].sticky-me,
        .admin-bar header.header[data-sticky="sticky"].sticky-head {
            top: 46px;
        }
        .admin-bar #navbar-float.float-menu-show {
            top: 46px;
        }
    }

    @media only screen and (max-width: 600px) {
        .admin-bar header[data-sticky="sticky-fixed"].sticky-me,
        .admin-bar header.header[data-sticky="sticky"].sticky-head {
            top: 0px;
        }
        
        html #wpadminbar {
            top: -46px;
        }
        
    }

/* #endregion */

/* --------------------------------------------------------
    MARK: MEGA MENU
-------------------------------------------------------- */

    .mega-drop .wrap {
        padding: 30px 0;
    }

    .mega-drop {
        display: none;
        background-color: white;
        position: absolute;
        width: 100%;
    }

    .mega-drop .menu-links {
        padding: 0;
        margin: 0;
    }


/* --------------------------------------------------------
    MARK: MOBILE
-------------------------------------------------------- */

#menu-oc-right { 
    width: 100%; 
    height: 100%; 
    transition: 0.5s; 
    position: fixed; 
    top: 0px; 
    overflow: scroll;
}

#menu-oc-right .dropdown-menu {
    background-color: transparent;
}

.mobile-menu .box { 
    padding: 50px 30px 0px; 
    position: relative; 
}

    @media only screen and (max-width: 780px) { 
        .mobile-menu .box { padding-top: 60px; }
    }

.mobile-menu .navbar-brand { 
    margin: 0; 
}

.mobile-menu .navbar-nav {
    margin-bottom: 30px;
}

.mobile-menu .menu-item { 
    padding: 5px;
    border-bottom: 1px solid;
}

    .mobile-menu .menu-item:last-child { 
        border: none; 
    }

        .mobile-menu .menu-item .nav-link {
            padding: 8px 0;
        }

.mobile-menu a::after { 
    display: none; 
}

/* --------------------------------------------------------
    MARK: MOBILE CHILD TOGGLE
-------------------------------------------------------- */

.m-toggler { 
    position: absolute; 
    right: 10px; 
    top: 12px; 
    width: 24px; 
    height: 24px;
    transition: 0.3s; 
}

    .m-toggler svg { 
        transform: rotate(90deg); 
        width: 12px; 
        height: 12px; 
    }

    .m-toggler.active { 
        transform: rotate(180deg); 
    }

/* --------------------------------------------------------
    MARK: MOBILE DROP
-------------------------------------------------------- */    

.mobile-menu .dropdown-menu { 
    margin: 5px 0 10px; 
    position: relative; 
    border-radius: 0; 
    padding: 0; 
    border: 0; 
}

/* 1st level */
.mobile-menu .dropdown-menu .menu-item {
    padding: 0;
}
    
    .mobile-menu .dropdown-menu .menu-item a {
        padding: 10px;
    }

/* 2nd level */
.mobile-menu .dropdown-lv2,
.mobile-menu .dropdown-toggle { 
    max-width: 80%; 
}

.mobile-menu .dropdown-menu .dropdown-menu {
    margin: 0;
}


/* --------------------------------------------------------
    MARK: MOBILE ANIMA
-------------------------------------------------------- */ 

/* data-animate : slide from right */
#menu-oc-right {
    overflow-x: hidden;
}

#menu-oc-right.active { 
    display: block !important; 
}

#menu-oc-right.active .menu-toggle {
    display: block;
}

#menu-oc-right[data-animate="off-right"]{
    z-index: 1100;
    left: unset;
    right: -100%;
}

    #menu-oc-right.active[data-animate="off-right"]{
        right: 0px;
    }

/* data-animate : slide from left */

#menu-oc-right[data-animate="off-left"]{
    z-index: 1100;
    right: unset;
    left: -100%;
}

    #menu-oc-right.active[data-animate="off-left"]{
        left: 0px;
    }

/* data-animate : slides */

#menu-oc-right[data-animate="off-right"],
#menu-oc-right[data-animate="off-left"] {
    max-width: 400px;
}
/*
    @media only screen and (min-width : 1025px) {
        #menu-oc-right[data-animate="off-right"],
        #menu-oc-right[data-animate="off-left"] {
            display: none;
        }
    }

    @media only screen and (max-width : 540px) { 
        #menu-oc-right[data-animate="off-right"],
        #menu-oc-right[data-animate="off-left"] {
            max-width: 100%;
        }
    }
*/

/* data-animate : fade */

#menu-oc-right[data-animate="fade"] {
    left: 0;
    position: fixed;
    z-index: 1100;   
    overflow: hidden;
    height: 0%;
}

    #menu-oc-right.inactive[data-animate="fade"]{   
        animation: fadeOut 1s;
        -webkit-animation: fadeOut 1s;
        -moz-animation: fadeOut 1s;
        -o-animation: fadeOut 1s;
        -ms-animation: fadeOut 1s;
        height: 0%;        
        transition: height 0ms 0ms;
    }

    #menu-oc-right.active[data-animate="fade"] {
        height: 100%;
        transition: height 0ms 0ms;
        animation: fadeIn 1s;
        -webkit-animation: fadeIn 1s;
        -moz-animation: fadeIn 1s;
        -o-animation: fadeIn 1s;
        -ms-animation: fadeIn 1s;    
    }

/* --------------------------------------------------------
    MARK: COLORS
-------------------------------------------------------- */    

:root {
    --lightc : #333333;
    --darkc : white;
}

/* --------------------------------------------------------
    MARK: COLORS
-------------------------------------------------------- */

header[data-navth="dark"] {
    background-color: var(--lightc);
}

header[data-navth="light"] {
    background-color: var(--darkc);
}

header[data-navth="dark"].menu-overlay,
header[data-navth="light"].menu-overlay {
    background-color: transparent;
}

header[data-navth="light"].sticky-head {
    background-color: var(--darkc);
}

header[data-navth="dark"].sticky-head {
    background-color: var(--lightc);
}

header[data-navth="light"].sticky-head .main-menu .nav-link {
    color: var(--lightc);
}

header[data-navth="dark"].sticky-head .main-menu .nav-link {
    color: var(--darkc);
}

header[data-navth="light"] .main-menu .nav-link {
    color: var(--lightc);
}

header[data-navth="dark"] .main-menu .nav-link {
    color: var(--darkc);
}

header[data-navth="light"] .dropdown-item {
    background-color: var(--darkc);
    color: var(--lightc);
}

header[data-navth="dark"] .dropdown-item {
    background-color: var(--lightc);
    color: var(--darkc);
}

header[data-navth="light"] .dropdown-item.hoved,
header[data-navth="light"] .dropdown-item:hover {
    color: var(--darkc);
    background-color: var(--lightc);
}

header[data-navth="dark"] .dropdown-item.hoved,
header[data-navth="dark"] .dropdown-item:hover {
    color: var(--lightc);
    background-color: var(--darkc);
}

header[data-navth="dark"] .opener svg {
    filter: invert(1);
}

header[data-navth="light"].menu-overlay .opener svg {
    filter: invert(1);
}


header[data-navth="light"].menu-overlay .main-menu .nav-link span {
    color: var(--darkc);
}

header[data-navth="light"].sticky-head .main-menu .nav-link span {
    color: var(--lightc);
}

@media only screen and (max-width: 1024px) { 
    header[data-navth="light"].menu-overlay .menu_wrap,
    header[data-navth="dark"].menu-overlay .menu_wrap {
        background: none;
    }

    header[data-navth="light"].menu-overlay {
        background-color: var(--darkc);
    }

    header[data-navth="dark"].menu-overlay {
        background-color: var(--lightc);
    }

    header[data-navth="light"].menu-overlay .opener svg {
        filter: none;
    }
}


[data-mobth="dark"] {
    background-color: var(--lightc);
}

[data-mobth="light"] {
    background-color: var(--darkc);
}

header [data-mobth="dark"] .closer svg {
    filter: invert(1);
}

header [data-mobth="light"] .closer svg {
    filter: none;
}

header [data-mobth="light"] .dropdown-item {
    background-color: var(--darkc);
    color: var(--lightc);
}

header [data-mobth="dark"] .dropdown-item {
    background-color: var(--lightc);
    color: var(--darkc);
}

header [data-mobth="light"] .dropdown-item.hoved,
header [data-mobth="light"] .dropdown-item:hover {
    color: var(--darkc);
    background-color: var(--lightc);
}

header [data-mobth="dark"] .dropdown-item.hoved,
header [data-mobth="dark"] .dropdown-item:hover {
    color: var(--lightc);
    background-color: var(--darkc);
}

header [data-mobth="light"] .nav-link {
    color: var(--lightc);
}

header [data-mobth="dark"] .nav-link {
    color: var(--darkc);
}

.mobile-menu .dropdown-menu .menu-item a {
    opacity: 0.9;
}

[data-mobth="light"] .menu-item {
    border-color: rgba(0,0,0,0.1);
}

[data-mobth="dark"] .menu-item {
    border-color: rgba(200,200,200,0.1);
}

[data-mobth="dark"] .dropdown-menu .menu-item {
    background-color: rgba(255,255,255,0.2);
}

[data-mobth="light"] .dropdown-menu .menu-item {
    background-color: rgba(0,0,0,0.2);
}

[data-mobth="dark"] .menu-icon {
    filter: brightness(0) invert(1);
}

.mobile-menu .m-toggler { 
    background-color: #ccc;
    opacity: 0.6;
}

.mobile-menu .m-toggler:hover,
.mobile-menu .m-toggler.active {
    opacity: 1;
}

[data-mobth="light"] .m-toggler svg {
    filter: brightness(0) invert(1);
}

[data-mobth="dark"] .m-toggler svg {
    color: var(--lightc);
}