*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav, .nav{
top:0;
}
nav ul,
nav li {
list-style: none;
padding: 0;
margin: 0;
}
nav a {
display: block;
text-decoration: none;
}
nav a:hover,
nav a:visited {
text-decoration: none;
}
.menu-bar {
background: #090718;
display: flex;
}
.menu-link {
padding: 20px 25px;
background: #090718;
color: #fff;
transition: background 0.2s, color 0.2s;
position: relative;
z-index: 1;
}
.menu-link[aria-haspopup="true"] {
padding-right: 40px;
}
.menu-link[aria-haspopup="true"]:after {
content: ">";
background-size: 14px;
width: 14px;
height: 14px;
font-size: 12px;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.mega-menu-header {
font-size: 1.2em;
text-transform: uppercase;
font-weight: bold;
color: #fff;
}
.mega-menu {
background: #090708;
z-index: 10;
}
.mega-menu--multiLevel {
flex-direction: column;
}
@media all and (min-width: 951px) {
.nav {
/*margin-top: 50px;*/
background: #090718;
}
.nav > nav {
max-width: 900px;
margin: 0 auto;
}
.menu [aria-haspopup="true"] ~ ul {
display: none;
}
.menu-bar {
position: relative;
}
.menu-bar > li > [aria-haspopup="true"]:after {
	content: ">";
}
.menu-bar > li > [aria-haspopup="true"]:hover:after {
	content: ">";
}
.menu-bar > li > [aria-haspopup="true"]:focus ~ ul {
display: flex;
transform-origin: top;
animation: dropdown 0.2s ease-out;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul:hover {
display: flex;
}
.menu-bar > li:focus-within > [aria-haspopup="true"] ~ ul {
display: flex;
}
.menu-bar > li > [aria-haspopup="true"]:focus,
.menu-bar > li:focus-within > [aria-haspopup="true"],
.menu-bar > li:hover > a {
background: #177E89;
color: #ffffff;
}
.menu-bar > li > [aria-haspopup="true"]:focus:after,
.menu-bar > li:focus-within > [aria-haspopup="true"]:after,
.menu-bar > li:hover > a:after {
	content: ">";
}
.mega-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
}
.mega-menu:hover {
display: flex;
}
.mega-menu a:hover {
background: #090710;
color: #136a73;
}
.mega-menu--multiLevel > li {
width: 33.33333333%;
}
.mega-menu--multiLevel > li > [aria-haspopup="true"] ~ ul {
left: 33.33333333%;
width: 33.33333333%;
}
.mega-menu--multiLevel > li > [aria-haspopup="true"] ~ ul ul {
width: 100%;
left: 100%;
}
.mega-menu--multiLevel li:hover > [aria-haspopup="true"] ~ ul {
display: block;
transform-origin: left;
animation: flyout 0.2s ease-out;
}
.mega-menu--multiLevel li:focus-within > [aria-haspopup="true"] ~ ul {
display: block;
}
.mega-menu--multiLevel li:hover > [aria-haspopup="true"],
.mega-menu--multiLevel li:focus-within > [aria-haspopup="true"],
.mega-menu--multiLevel li:hover > a,
.mega-menu--multiLevel li:focus-within > a {
background: #090710;
color: #136a73;
}
.mega-menu--multiLevel [aria-haspopup="true"] ~ ul,
.mega-menu--multiLevel [aria-haspopup="true"] {
border-left: 1px solid #f0f0f0;
}
.mega-menu--multiLevel [aria-haspopup="true"] ~ ul:hover,
.mega-menu--multiLevel [aria-haspopup="true"]:hover {
display: block;
}
.mega-menu--multiLevel [aria-haspopup="true"] ~ ul {
position: absolute;
top: 0;
height: 100%;
}
.mega-menu--flat > * {
flex: 1;
}
.mobile-menu-trigger,
.mobile-menu-header,
.mobile-menu-back-item {
display: none;
}
}
@media all and (max-width: 950px) {
.nav {
}
.mobile-menu-trigger,
.mobile-menu-header,
.mobile-menu-back-item {
display: block;
}
.mobile-menu-trigger {
background: #090718;
color: #fff;
border: 0;
font-size: 1.2em;
border-radius: 4px;
}
.mobile-menu-header {
order: -1;
background: grey;
}
.mobile-menu-header a {
padding: 20px 25px;
color: #ffffff;
visibility: visible;
}
.menu-bar {
flex-direction: column;
position: fixed;
top: 0;
left: -100%;
height: 100vh;
width: 50wh;
max-width: 600wh;
/*max-width: 90%;*/
overflow-x: hidden;
transition: left 0.3s;
box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.25);
}
.menu-bar > li > [aria-haspopup="true"] ~ ul {
display: flex;
flex-direction: column;
background: #ffffff;
position: absolute;
left: 100%;
top: 0;
max-height: 100vh;
width: 100%;
transition: left 0.3s;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] {
font-size: 1.2em;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] ~ ul a {
padding-left: 40px;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] ~ ul > li > [aria-haspopup="true"] ~ ul a {
padding-left: 80px;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"] {
color: #2a2a2a;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"]:after {
content: "+";
background: none;
font-size: 1em;
font-weight: normal;
height: 20px;
line-height: 1;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"] ~ ul {
max-height: 0px;
transform-origin: top;
transform: scaleY(0);
transition: max-height 0.1s;
}
.mega-menu-content {
padding: 20px 25px;
}
.mobile-menu-back-item {
order: -1;
}
.mobile-menu-back-item a {
background: #090710;
color: #2a2a2a;
max-height: calc(1.4em + 40px);
margin-top: calc(0px - (1.4em + 40px));
pointer-events: none;
}
.mobile-menu-back-item a:before {
content: ">";
width: 14px;
height: 12px;
background-size: 14px;
margin-right: 10px;
display: inline-block;
}
.mobile-menu-trigger:focus ~ ul {
left: 0;
}
.menu-bar:hover,
.menu-bar:focus-within {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"]:focus ~ ul {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul {
margin-top: calc(1.4em + 40px);
}
.menu-bar > li > [aria-haspopup="true"] ~ ul:hover,
.menu-bar > li > [aria-haspopup="true"] ~ ul:focus-within {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"]:focus ~ ul {
max-height: 500px;
animation: dropdown 0.3s forwards;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul li:focus-within > [aria-haspopup="true"] ~ ul {
max-height: 500px;
transform: scaleY(1);
}
.menu-bar > li:focus-within ~ .mobile-menu-header a {
visibility: hidden;
}
}
@media all and (max-width: 950px) and (hover: none) {
.mobile-menu-trigger:hover ~ ul {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"]:hover ~ ul {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul:hover {
left: 0;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"]:hover ~ ul {
max-height: 500px;
animation: dropdown 0.3s forwards;
}
.menu-bar > li > [aria-haspopup="true"] ~ ul [aria-haspopup="true"] ~ ul:hover {
max-height: 500px;
transform: scaleY(1);
}
.menu-bar > li:hover ~ .mobile-menu-header a {
visibility: hidden;
}
}
@keyframes dropdown {
0% {
opacity: 0;
transform: scaleY(0);
}
50% {
opacity: 1;
}
100% {
transform: scaleY(1);
}
}
@keyframes flyout {
0% {
opacity: 0;
transform: scaleX(0);
}
100% {
opacity: 1;
transform: scaleX(1);
}
}