/* -------------------------------------------
    Base MENU CSS 1.0
----------------------------------------------*/

:root {
    --header-bg     : white;
    --mobile-bg     : #f5f5f5;
    --toggle-a      : #f0f0f0;
    --toggle-b      : #333333;
    --mobile-border : rgba(0, 0, 0, 0.1);
    --mobile-color1 : black; 
    --mobile-color2 : #00A3D9; 
    --menu-link-bg  : rgba(0, 0, 0, 0.1);
}

/*-------------------------------------------------------*/

/* #region ------ *STUB ~ GENERAL */

    header.element {
        z-index: 100;
    }

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

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

    .navbar { 
        padding: 0; 
    }

    .menu_wrap {
        padding: 20px 0;
    }

    .menu-toggle  { 
        display: none; 
    }

    .header-menu ul { 
        margin: 0; 
        list-style: none; 
    }

    .dropdown-menu { 
        padding: 0; 
    }

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

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

    .main-menu .navbar-nav { 
        gap: 10px; 
    }

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

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


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

        @media only screen and (max-width: 1024px) {

            .menu-toggle { 
                display: block; 
            }

            .menu_wrap {
                background-color: var(--bglight);
            }
        }

        @media only screen and (max-width: 480px) {
            .navbar-brand {  
                margin-right: 0px; 
            }
        }    

/* #endregion */

/*-------------------------------------------------------*/

/* #region ------ *STUB ~ LOGOS */

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

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

/* #endregion */

/*-------------------------------------------------------*/

/* #region ------ *STUB - STICKIES */

    .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;
    }

/* #endregion */

/*-------------------------------------------------------*/

/* #region ------ *STUB - EXTENSION */

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

    header .btn-loop {
        margin-top: 0;
    }

/* #endregion */

/*-------------------------------------------------------*/

/* #region ------ *STUB - {PAGE SETTINGS} */

    header.menu-overlay { 
        position: absolute; 
        background-color: transparent; 
    }

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

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

/* #endregion */

/*-------------------------------------------------------*/

/* #region ------ *STUB - [COLORS] */

    .navbar[data-drop="animate"] .dropdown .dmenu-0.shown li,
    .navbar[data-drop="animate"] .dropdown:hover .dmenu-0 li {  
        background-color: var(--nav-bg); 
    }

    .main-menu .dropdown-menu a:hover,
    .main-menu .dropdown-menu a:active { 
        background-color: var(--menu-link-bg);
    }

    .mobile-menu .dmenu-1 { 
        background-color: #f0f0f0; 
    }
    .mobile-menu .dropdown-menu .dropdown-menu li:hover { 
        background-color: aliceblue; 
    }
    .mobile-menu .dropdown-menu .dropdown-menu li a:not(.m-toggler) { 
        background-color: transparent; 
    }

    #menu-oc-right { 
        background-color: var(--mobile-bg); 
    } 

    .m-toggler { 
        background-color: var(--toggle-a);
    }

    .m-toggler.active,
    .m-toggler:hover { 
        background-color: var(--toggle-b); 
    }

    .m-toggler svg { 
        color: var(--toggle-b); 
    }

    .m-toggler:hover svg, 
    .m-toggler.active svg { 
        color: var(--toggle-a); 
    }

    .mobile-menu .nav-link { 
        color: var(--mobile-color1); 
    }
    .mobile-menu .nav-link:hover {
        color: var(--mobile-color2); 
    }

    .mobile-menu ul .menu-item { 
        border-color: var(--mobile-border); 
    }

/* #endregion */

/*-------------------------------------------------------*/

/* #region ------ *STUB - MENU {DROPDOWN ~ BASIC} */

/* 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[data-drop="animate"] .dropdown-menu .dropdown-menu {
        left: calc(100%);
    }

/* normal:hover */

    .navbar[data-drop="animate"][data-trigger="hover"] .dropdown:hover>.dropdown-menu,
    .navbar[data-drop="default"][data-trigger="hover"] .dropdown:hover>.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%;
    }

    /* mormal click */

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

    .navbar .dropdown:hover > .dropdown-menu {
        min-width: 180px;
        width: auto;
    }

/* #endregion */

/*-------------------------------------------------------*/

/* #region ------ *STUB - MENU {MOBILE} */

    .menu-oc-right {
        padding: 0;
        background-color: transparent;
        border: none;
    }

    .menu-oc-right svg {
        width: 40px;
        height: 40px;
    }

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

    .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 a::after { 
        display: none; 
    }

/* MOBILE-DROPDOWN */

    .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); 
    }

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

    .mobile-menu .dropdown-menu .menu-item {
        padding: 0;
    }

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

    .mobile-menu .dropdown-lv2,
    .mobile-menu .dropdown-toggle { 
        max-width: 80%; 
    }

/* sub-levels */

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

/* 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;
        }
        
    }

/* #endregion */

/*-------------------------------------------------------*/

/* #region ------ *STUB - MOBILE MENU {ANIMATION} */

/* data-animate : slide from right */

    #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 : 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;    
    }

/* #endregion */

/*-------------------------------------------------------*/

/* #region ------ *STUB - MENU {DROP-DOWN ~ ANIMATED} */

    .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: 100%;
        left: 0;
        width: 100%;
        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;
    }

/* #endregion */

/*-------------------------------------------------------*/

/* #region ------ *STUB - HEADER {OPTION - IS-ANIMATE} */

    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; 
    }

/* #endregion */

/*-------------------------------------------------------*/

/* #region ------ *STUB - MENU {OPTIONS - POSITION} */

/* left */ 
    
    /* default */

/* right */

    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,
    header[data-menu="center"] .menu-extension {
        position: absolute;
    }

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

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

/* #endregion */

/*-------------------------------------------------------*/

/* #region ------ *STUB - VER.1 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;
    }

    .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;
    }

/* #endregion */

/*-------------------------------------------------------*/

/* #region ------ *STUB - FIXED MENU */

    header[data-sticky="sticky-fixed"],
    header.menu-overlay[data-sticky="sticky-fixed"] {
        position: fixed;
    }
    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 */

/*-------------------------------------------------------*/

/* #region ------ *STUB - Sticky Bar */
/* Sticky Bar with WP Admin Sticky Bar */    

    .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 */

/*-------------------------------------------------------*/

/* #region ------ *STUB - MEGA MENU */

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

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

/* #endregion */