#header { position: fixed; top: 0; left: 0; width: 100%; max-width: 100%; color: #ffffff; background-color: #13130D; z-index: 100; }
#header .mainNav { position: relative; width: 1400px; max-width: 100%; margin: auto; padding: 0px 30px; display: flex; align-items: center; justify-content: space-between; }
#header .brand img { position: relative; height:70px; }
#header .navArea { position: relative; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
#header .mainLink { position: relative; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
#header ul li { position: relative; }
#header ul.dropMenu { display: none; position: absolute; top: 100%; left: 0px; background-color: #13130D; width: max-content; max-width: 250px; z-index: 1; }
#header ul.dropMenu.dropMenuInvert { left: auto; right: 0px; }
#header ul.dropMenu ul.dropMenu { top: 0; left: auto; right: 100%; }
#header .burger { display: none; }
#header a { color: inherit; }
#header #numberOfProducts { margin-left: 5px; }
#header .stdLink { position: relative; display: flex; justify-content: flex-start; align-items: flex-start; padding: 10px; margin: 5px; cursor: pointer; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; }
#header .stdLink:hover { background-color:#BDA05C; color: #13130D; }
#header .stdLink i { font-size:20px; }
#header .noHoverEffect:hover { background-color:transparent; color: #ffffff; } {  }


/* START TEMPLATE NAVBAR */
#header.startTemplate {  }
#header.startTemplate .mainNav { padding: 5px 30px; }
#header.startTemplate .brand img { height:100px; }

/* Responsive */
@media only screen and (max-width : 1300px) {
    #header nav { position: fixed; left: 0; width: 100%; background-color: #13130D; opacity: 0; pointer-events: none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; }
    #header .mainLink { display: block; text-align: center; padding: 30px; width: 500px; max-width: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%)!important; -moz-transform: translate(-50%,-50%)!important; -ms-transform: translate(-50%,-50%)!important; -o-transform: translate(-50%,-50%)!important; transform: translate(-50%,-50%)!important; overflow-y: auto; }
    #header .mainLink::-webkit-scrollbar { display: none; }
    #header .mainLink { -ms-overflow-style: none; scrollbar-width: none; }
    #header .mainLink ul.dropMenu,#header .mainLink ul.dropMenu ul.dropMenu  { position: relative; top: auto; left: auto; right: auto; width: 100%; max-width: 100%; background-color: transparent; }
    #header .burger { display: inline-block; }
    #header .burgerLines { position: relative; width: 30px; height: 18px; }
    #header .burgerLines .line { position: absolute; left: 0; width: 100%; height: 1px; background-color: #ffffff; }
    #header .burgerLines .line1 { top: 0; }
    #header .burgerLines .line2 { top: 50%; }
    #header .burgerLines .line3 { top: 100%; }

    /* OPEN NAVBAR */
    #header.expandedMenu nav { opacity: 1; pointer-events: auto; }
    #header.expandedMenu .burgerLines { transform: rotate(180deg); }
    #header.expandedMenu .burgerLines .line1 { top: 50%; width: 100%; transform: rotate(45deg); transform-origin: center center; }
    #header.expandedMenu .burgerLines .line2 { opacity: 0; }
    #header.expandedMenu .burgerLines .line3 { top: 50%; width: 100%; transform: rotate(-45deg); transform-origin: center center; }

    #header .mainLink ul.dropMenu { padding-left:40px; }

    /* START TEMPLATE NAVBAR */
    #header.startTemplate {  }
    
}

@media only screen and (max-width : 576px) {
    #header .brand img {  height:50px; }
    #header .mainNav { padding: 0px 15px; }
    #header.startTemplate .mainNav { padding: 0px 15px; }
    #header.startTemplate .brand img { height:50px; }
    #header .mainLink ul.dropMenu { padding-left:20px; }
    #header .stdLink { margin:5px 0px; }
}