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

/* #region - VERSION 0 --------------------------- */
.oc-menu-991  { display: none; }
header.element { z-index: 20; }
header.sticky-head #navbar-home { padding: 0; }
header #navbar-home { padding: 10px 0; }

.header-menu { width: 100%; }
.header-menu.menu-overlay { position: absolute; background-color: transparent; }
.header-menu ul { margin: 0; list-style: none; }
.main-menu ul.dropdown-menu .menu-item a { padding: 5px 10px; }

ul.dropdown-menu { padding: 5px 0; }

@media only screen and (max-width: 991px) {
    .oc-menu-991 { display: block; }
    .header-menu.menu-overlay { position: relative; }
    header #navbar-home { height: inherit !important; }
    header[data-sticky="sticky"].sticky-head #navbar-home { padding: 0; }
}

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

}

/* #endregion */

/* #region - FONT SIZE ---------- */

.navbar a.nav-link { font-size: var(--nav-fs); }
.navbar a.dropdown-item { font-size: var(--nav-fs); }

#menu-oc-right { font-size: var(--mob-fs); }
#menu-oc-right .dropdown-menu,
#menu-oc-right a.nav-link,
#menu-oc-right a.dropdown-item { font-size: inherit; }


/* #endregion */

/* #region - EXTENSIONS ---------- */
.mobile-menu .social-icons { text-align: center; }
.mobile-menu .social-icons a.idflex-center { 
    border: none; background-color: transparent; margin: 0 5px; padding: 5px; 
}
/* #endregion */

/* #region - COLOR ---------- */

.navbar a.nav-link { color: var(--nav-a); }
.navbar a.nav-link:hover { color: var(--nav-ahover); }

.navbar a.dropdown-item { color: var(--nav-a); background-color: var(--nav-bg); }
.navbar a.dropdown-item:hover { background-color: var(--nav-bghover); color: var(--nav-ahover); }

a.menu-oc-right svg { fill:black; }
#menu-oc-right { background-color: var(--bg2); } 

#navbar-float { background-color: var(--stickybg); }
header[data-sticky="sticky"].sticky-head { background-color: var(--stickybg); }

.m-toggler { background-color: rgba(0, 0, 0, 0.1); }
.m-toggler svg { color: #777; }
.m-toggler.active,.m-toggler:hover { background-color: #666; }
.m-toggler:hover svg, .m-toggler.active svg { color: white; }

.mobile-menu .nav-link { color: black; }
.mobile-menu .menu-item { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.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 { background-color: transparent; }

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

.navbar a:focus,
.navbar .dropdown a:focus { background-color: transparent; }

/* #endregion */

/* #region - MENU [MOBILE] ---------- */

.m-toggler { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s; border-radius: 100%;
}
.m-toggler svg { transform: rotate(90deg); width: 12px; height: 12px; }
.m-toggler.active { transform: rotate(180deg); }

a.menu-oc-right svg { width: 29px; height: 30px; }

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

.mobile-menu .dropdown a::after,
.mobile-menu .brand { display: none; }
.mobile-menu .box { padding: 50px 30px 20px; position: relative; }
.mobile-menu .dropdown-item { padding: 10px; }
.mobile-menu .dropdown-lv2,
.mobile-menu .dropdown-toggle { max-width: 80%; }
.mobile-menu .menu-item:last-child { border: none; }
.mobile-menu .dropdown-menu { margin: 10px 0 20px; position: relative; border-radius: 0; padding: 0; border: 0; transform: none !important; }
.mobile-menu .dmenu-1 { margin: 0; }
.mobile-menu .box .closer svg { width: 25px; height: 25px; }
.mobile-menu .mob-contact div { padding: 5px 0; }

.mobile-menu .mob-logo a.navbar-brand { margin-right: 0; }

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

@media only screen and (max-width: 480px) { 
    .mobile-menu .box .closer svg { width: 15px; height: 15px; }
}


/* #endregion */

/* #region - MOBILE MENU [ANIMATION] ------------- */

/* data-animate : off-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;
}

#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 - FLOAT MENU -------------------------- */

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

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

/* #endregion */

/* #region - NON-FLOAT STICKY MENU  -------------- */

header[data-sticky="sticky"].sticky-head {
    position: fixed;
    z-index: 1030;
    width: 100%;
    left: 0;
    /* transition: 0.3s; */
    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-sticky="sticky"].sticky-head .menu_wrap {
    padding: 5px 0;
}    

header[data-sticky="sticky"].sticky-head #navbar-home {
    height: auto !important;
}

@media only screen and (max-width: 991px) {
    header[data-sticky="sticky"].sticky-head {
        top: 0;
    }
}

/* #endregion */

/* #region - MENU [DROP-DOWN] -------------------- */
.navbar .dropdown-menu .dropdown > a:after {
    /* arrow */
    display: inline-block; margin-left: .255em; content: ""; 
    border-top: .3em solid transparent; border-bottom: .3em solid transparent; 
    border-left: .3em solid; border-right: 0;
}
.navbar .dropdown-menu .dropdown-menu {
    left: calc(100% - 5px);
    top: 0px;
}
.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 { 
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    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: none;
    width: auto;
}

/* #endregion */

/* #region - 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: 100;
}
.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; }

.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;
    z-index: -1;
}
.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 - MENU Position ----------------------- */

.header-menu[data-menu="left"] .menu-extension {
    margin-left: auto;
}
.header-menu[data-menu="right"] .menu-extension,
.header-menu[data-menu="leftext"] .menu-extension { 
    margin-left: 30px;
}
.header-menu[data-menu="right"] .main-menu {
    margin-left: auto;
}
.header-menu[data-menu="center"] .main-menu { 
    margin: 0 auto;
}
.header-menu[data-menu="center"] .navbar-brand,
.header-menu[data-menu="center"] .menu-extension {
    position: absolute;
}
.header-menu[data-menu="center"] .navbar-brand {
    left: 0;
}
.header-menu[data-menu="center"] .menu-extension {
    right: 0;
}

/* #endregion */

/* #region - MENU Width ----------------------- */

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

/* #endregion */

/* #region - Extension [SEARCH] ------------------- */

#searchform-mobile .btn img { width: 15px; }

.top-search { position: relative; }
.top-search .i-close { display: none; }

.top-search .active .i-close { display: block; }
.top-search .active .i-search {  display: none; }

.top-search a { color: #333; position: relative; top: -2px; }

.navbar .show-search {
    background: #fff;
    border-top: 3px solid #999;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 10000;
    top: 100%;
    right: 0;
    padding: 15px;
    display: none;
}

.ext-show-search input,
.show-search input {
    font-size: 13px;
    font-weight: 300;
    display: block;
    width: 200px;
    padding: 10px 13px;
    border-radius: 0;
    border: 1px solid #e8e8e8;
    background: #f4f4f4;
    box-shadow: 0 5px 4px -4px rgba(190, 190, 190, 0.1);
}

.ext-show-search input { width: 100%; }
.ext-show-search form { position: relative; }

.ext-show-search .btn {
    position: absolute;
    top: 1px;
    right: 0;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    padding-top: 7px;
}

.ext-margin { margin-top: 2rem; }

/* #endregion */

/* #region - Extension [ICONS] -------------------- */

.top-search svg { width: 14px; height: 14px; }
.fa-14 { width: 14px; height: 14px; }
.fa-16 { width: 16px; height: 16px; }

/* #endregion */