#header { position: fixed; top: 0; left: 0; width: 100%; max-width: 100%; background-color: #004E64; 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; width: 52px; }
#header .navArea { position: relative; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; min-height:90px; }
#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%; right: -10px; background-color: #004E64; 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 li { margin: 10px; }
#header a { color: inherit; }
#header .stdLink { color: transparent; text-shadow: 0 0 0 rgba(255, 255, 255, 1), 0 -20px 0 rgba(255, 255, 255, 0); font-size: 14px; font-weight: 700; text-transform: uppercase; position: relative; display: flex; justify-content: flex-start; align-items: flex-start; padding: 10px; 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 { color: transparent; text-shadow: 0 20px 0 rgba(122, 229, 130, 0), 0 0 0 rgba(122, 229, 130, 1); }
#header .stdLink i {}
#header .languages .stdLink {  }
#header .languages .activeLanguage { opacity:0.5; font-weight:400; }
#header .languages .activeLanguage i { position:absolute; bottom: 0px; left: 16px; font-size:8px; }




/* START TEMPLATE NAVBAR */
#header.startTemplate { background-color: transparent; }
#header.startTemplate .mainNav { justify-content:center; }
#header.startTemplate .brand img { width:0; }

/* Responsive */
@media only screen and (max-width : 1200px) {
    #header nav { position: fixed; left: 0; width: 100%; background-color: #004E64; 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%; }
    #header .mainLink li { margin: 5px 0px; }
    #header .stdLink { justify-content:center; }
    #header .languages .activeLanguage { opacity:1; }


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

    /* START TEMPLATE NAVBAR */
    #header.startTemplate .mainNav { justify-content:space-between; }
    #header.startTemplate .brand img { width:52px; }
}


@media only screen and (max-width : 576px) {
    #header .mainNav { padding: 0; }
}