/* header menu */
#header
{
	width: 100%;
	height: var(--MB_header-height);
	position:var(--MB_header-position);
	z-index:100;
	transition: var(--MB_header-transition_scroll);
	pointer-events: auto;
    background-color: var(--MB_header-bg);

    border-bottom: transparent 1px solid;
}

#header.scrolledMenu
{
	background-color: var(--MB_header-bg_scrolled);
	border-bottom: rgb(18, 18, 18) 1px solid;
    filter: drop-shadow(0px 4px 2px transparent);
}






/* main menu ////////////////////////////////////////////////////////////////////////// */


#menu
{
	height: var(--MB_header-height);
    width: 100%;
    position: relative;
    pointer-events: none;
}

/* menu con */
.menu-main_menu-container
{
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* menu */
.primary_menu
{
	width: 100%;
	height: 100%;
	display: flex;
	align-items:center;
	justify-content:right;
	box-sizing:border-box;
    position:relative;
	min-height: var(--MB_header-height);
	pointer-events: none;
    padding: var(--MB_main_menu-padding);
}

/* menu items */
.primary_menu .menu-item
{
    height: var(--MB_main_menu_item-height);
    width: var(--MB_main_menu_item-width);
    transition: var(--MB_main_menu-transition);
    position: relative;
    box-sizing: border-box;
}



.primary_menu .menu-item a
{
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--MB_main_menu-transition);
        text-decoration: none;
        color: var(--MB_main_menu-color);
        font-weight: normal;
        letter-spacing: var(--MB_main_menu-letter-spacing);
        font-size: var(--MB_main_menu-font-size);
        pointer-events: all;
        font-family: var(--MB_main_menu-font_family);

}

.primary_menu .menu-item a:hover, .scrolledMenu .primary_menu .menu-item a:hover
{
    color: var(--MB_main_menu-color_hover);
}



/* scrolled menu */


.scrolledMenu .menu-main_menu-container .menu-item a
{
    color: var(--MB_main_menu-color_scrolled);
}
.scrolledMenu .menu-main_menu-container .menu-item a:hover
{
	color: var(--MB_main_menu-color_hover_scrolled);
}










/* top logo */

#primary_logo_holder
{
	width: 100%;
	height:100%;
	box-sizing: border-box;
	position: absolute;
	display: flex;
	align-items: center;
	
	padding-left:30px;
	pointer-events: none;

    justify-content: var(--MB_header_logo-position);
}
    #primary_logo_holder img
    {
        width: var(--MB_header-logo_width);
        height: var(--MB_header-logo_height);
        transition: 0.5s;
        pointer-events: auto;
    }
        #primary_logo_holder img:hover
        {
            filter: brightness(.5);
        }



/* main sub menu ////////////////////////////////////////////////////////////////////////// */

.primary_menu .menu-item.menu-item-has-children a::after
{
    content: "+";
    display: block;
    padding: 5px;
    position: absolute;
    right: 3px;
    transition: 0.4s;
}
.primary_menu .menu-item.menu-item-has-children:hover a::after
{
    content: "\2212";
    transform: rotate(180deg);
}



.primary_menu .menu-item .sub-menu
{
    display: none;
    position: absolute;
    width: fit-content;
}
.primary_menu .menu-item:hover .sub-menu
{
    display: block;
}

.primary_menu .menu-item .sub-menu .menu-item
{
    background-color: rgb(49, 49, 49);
    height: auto;
    text-wrap: nowrap;
    width: 100%;
}
.primary_menu .menu-item .sub-menu .menu-item a
{
    padding: 10px 10px;
    font-size: 14px;
    text-align: start;
    justify-content: start;
    width: 100%;
    color: white;
}
    .primary_menu .menu-item .sub-menu .menu-item a::after
    {
        content: "";
    }
    .primary_menu .menu-item .sub-menu .menu-item:hover a
    {
        background-color: lightgrey;
        color: black;
    }


















/* side nav menu ////////////////////////////////////////////////////////////////////////// */




.side_menu_holder
{
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;


}

/* btn */

.mobile_menu_close
{
	height: 100%;
    width: 30px;
	color: var(--MB_main_menu-color);
	display: flex;
	align-items:center;
	justify-content:center;
    float: var(--MB_header_side_menu_btn-position);
    padding: 0 var(--MB_side_menu-btn_offset);

}
    .mobile_menu_close::after
    {
        content: "☰";
        font-size: var(--MB_side_menu-font-size-btn);
        transition: var(--MB_main_menu-transition);
        pointer-events: all;
        color: var(--MB_main_menu-color);

    }
        .mobile_menu_close:hover::after
        {
            color: var(--MB_main_menu-color_hover);
            cursor:pointer;
        }

     .scrolledMenu .mobile_menu_close::after
     {
        color: var(--MB_main_menu-color_scrolled);
     }

    .scrolledMenu .mobile_menu_close
    {
        color: var(--MB_main_menu-color_scrolled);
    }
    .scrolledMenu .mobile_menu_close:hover::after
    {
        color: var(--MB_main_menu-color_hover_scrolled);
    }






#side_nav_menu
{
	width: 100%;
    height: 100vh;
    background-color: #111;
    position: fixed;
    z-index: 101;
    top: 0;
    overflow-x: hidden;
    max-width: 0;
    transition: var(--MB_main_menu-transition);;
    pointer-events: all;
}
    #side_nav_menu.sideNav_opened
    {
        max-width: 250px;
    }


.side_nav_menu_cls_btn_holder
{
	width: 100%;
	height: auto;
	position: relative;
	background-color: #1a1a1a;
	padding: 5px 10px;
	display:flex;
	justify-content:end;
}
    .side_nav_menu_cls_btn
    {
        background-color:transparent;
        width: 35px;
        height: 35px;
        display:flex;
        justify-content:center;
        align-items:center;
        color:var(--MB_side_menu-color);
        font-family: var(--MB_side_menu-font-family);
        font-size: var(--MB_side_menu-font-size-btn);
        transition: var(--MB_side_menu-transition);
        cursor:pointer;
        overflow:hidden;
    }
        .side_nav_menu_cls_btn:hover
        {
            background-color: var(--MB_side_menu-color_hover);
        }



























/* side menu items */

.side_menu_list_container
{
	width: 100%;
	height: 95%;
	box-sizing: border-box;
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto;

}
    #menu-side_menu
    {
        width: 100%;
        height:auto;
        position:relative;
        padding-top: 10px;
        box-sizing:border-box;

    }

#menu-side_menu li
{
	position:relative;
	height: 100%;
	width: 100%;
		font-family: var(--MB_side_menu-font-family);
	display:flex;
	transform: translateX(-200px);
}
    #menu-side_menu li a
    {
        color: var(--MB_side_menu-color);
        text-decoration:none;
        height: 32px;
        width: 100%;
        position:relative;
        display:flex;
        align-items:center;
        padding: 0px 10px;
        box-sizing:border-box;
        transition:0.3s;
        text-wrap: nowrap;
    }
        #menu-side_menu li a:hover 
        {
            background-color:#858585;
        }


#menu-side_menu .menu-item.menu-item-has-children 
{
    display: flex;
    flex-direction: column;

}


#menu-side_menu .menu-item.menu-item-has-children a::before
{
    content: '+';
    position: absolute;
    right: 15px;
    transition: 0.2s;
}
#menu-side_menu .menu-item.menu-item-has-children a.activeCLMenu
{
    background-color: #4d4d4d;
}


#menu-side_menu .menu-item.menu-item-has-children a.activeCLMenu::before
{
    content: '\2212';
    transform: rotate(180deg);
}
/* sublist items */
#menu-side_menu .menu-item.menu-item-has-children ul
{
    max-height: 0;
    overflow: hidden;
    transition: 0.2s;
}

#menu-side_menu .menu-item.menu-item-has-children ul li a
{
    background-color: #272727;
    transition: 0.4s;
    padding-left: 18px;
    font-size: calc(var(--MB_main_menu-font-size) - 1px);
}
#menu-side_menu .menu-item.menu-item-has-children ul li a::before
{
    content: '';
}
#menu-side_menu .menu-item.menu-item-has-children ul li a:hover
{
        background-color: #4d4d4d;
}






/* overlay //////////////////////  */
#SN_Overlay
{
	width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 98;
    background-color: black;
    top: 0;
    opacity: 0.6;
    transition: 0.5s;
    pointer-events: all;
    display: none;
}
    #SN_Overlay.sideNav_opened
    {
        display:block;
    }






/* deco elements /////////////////////////////////////////////////// */
/* deco line */
.SN_deco_line_holder
{
	background-color: transparent;
	width: 100%;
	height: 100%;
	position:absolute;
	top: 0;
	display: flex;
	justify-content: end;
	pointer-events: none;
	align-items: center;
}
#SN_deco_line
{
	background-color: #5d5d5d;
	height: 0px;
	width: 1px;
	transition: 0.2s;
	transition-delay:0s;
}

#SN_deco_line.line_open
{
	height: 100%;
	transition-delay:0.2s;
}

.sideNav_opened #menu-side_menu .menu-item
{
	transform: translatex(0);
}