/*
 * Responsive Menu 1.2.0
*/

/* DO NOT EDIT | Add override styles in site css to customise */

.container-fluid {position:relative; z-index:1; background:#fff; color:#000; transition:transform 0.6s;}
#menu {display:none;}

.menu-toggle * {pointer-events: none;}

.mobile-menu {position:fixed; top:0; left:10%; right:0; bottom:0; z-index:0; transform:translate3d(50vw,0,0); transition:transform 0.4s, opacity 0.4s; overflow-y: auto; opacity:0; -webkit-overflow-scrolling: touch; background:rgb(51,51,51); color:#fff;}
.mobile-menu > div {padding:3rem 0;}

.mobile-menu ul {padding:0; margin:0; list-style: none;}
.mobile-menu li {position:relative; padding:0; margin:0;}
.mobile-menu a, .mobile-menu span.title {position:relative; display:block; padding:0.6em 1.875rem; color:inherit !important; font-weight:inherit;}
.mobile-menu a:hover {background:rgba(0,0,0,0.1) !important;}
.mobile-menu li:hover > .title {background:rgba(0,0,0,0.2) !important;}

.mobile-menu .drop > div {display:none; background:rgba(255,255,255,0.1);}
.mobile-menu .drop > button {position:relative; display:block; padding:0.6em 3.5rem 0.6em 1.875rem; color:inherit !important; font-weight:inherit; width:100%; box-sizing:border-box;}
.mobile-menu .drop > button::after {content:'\f078'; font-family:'Font Awesome 5 Pro'; font-weight:400; position:absolute; top:50%; right:1.5rem; transform:translateY(-50%); width:1em; text-align: center;}
.mobile-menu .drop:hover > button {background:rgba(0,0,0,0.2);}
.mobile-menu .drop.active > button {background:rgb(0,173,239);}
.mobile-menu .drop.active > button::after {transform:translateY(-50%) rotate(180deg);}

.mobile-menu .group a {padding-left:2.25rem; background:rgba(255,255,255,0.1);}
.mobile-menu .group .title {padding-left:1.875rem; background:rgba(255,255,255,0.05);}

.mobile-menu + .overlay {position:absolute; top:0; right:0; bottom:0; width:100%; background:rgba(255,255,255,0.8); opacity: 0; transition:transform 0.6s, opacity 0.6s; z-index:0;}

.mobile-menu .close-menu {position:absolute; top:0.625rem; right:0.625rem; width:3em; height:3em;}
.mobile-menu .close-menu svg {width:100%; height:100%;}

@media (max-width:47.9375em) {
	.menu-open[data-menu-scope='["main"]'] .container-fluid {transform:translate3d(-90%,0,0); position:absolute; top:0; left:0; right:0; bottom:0; overflow-y: hidden; min-height:0;}
	.menu-open[data-menu-scope='["main"]'] #mobile-menu {transform:translate3d(0,0,0); opacity:1;}
	.menu-open[data-menu-scope='["main"]'] #mobile-menu + .overlay {transform:translate3d(-90%,0,0); opacity:1; z-index:1;}
}

@media (max-width:61.9375em) {
	.menu-open[data-menu-scope='["shop"]'] .container-fluid {transform:translate3d(-90%,0,0); position:absolute; top:0; left:0; right:0; bottom:0; overflow-y: hidden; min-height:0;}
	.menu-open[data-menu-scope='["shop"]'] #mobile-menu {transform:translate3d(0,0,0); opacity:1;}
	.menu-open[data-menu-scope='["shop"]'] #mobile-menu + .overlay {transform:translate3d(-90%,0,0); opacity:1; z-index:1;}
}

@media (min-width:48em) {
	.menu ul {padding:0; margin:0; list-style: none;}
	.menu li {position:relative; padding:0; margin:0;}
	.menu li > a, .menu li > span {position:relative; display:block; padding:0.6em 3.5rem 0.6em 1.875rem;}
	.menu li:hover > a {background:rgb(240,240,240); cursor:pointer;}
	.menu li:hover > span {background:rgb(240,240,240);}
	.menu .drop > div {display: none; background:rgb(242,242,242);}
	
	#menu-btn {display:none;}
	#menu {display: block;}
	#menu li > a {padding:0.6em;}
	#menu > div > ul {display:flex;}
	#menu > div > ul > li {display:flex;}
	#menu > div > ul > li > a {display:flex; align-items: center;}
	#menu > div > ul > li > span {display:flex; align-items: center;}
	#menu .drop > div {display:block; visibility:hidden; position:absolute; top:100%; left:50%; transform:translateX(-50%); background:#fff;}
	#menu .drop:hover > div {visibility:visible;}
	#menu .drop > a {padding-right:2rem;}
	#menu .drop > a::after {right:0.5rem;}
	#menu .drop > div > div > ul > li > a {white-space: nowrap;}
	
	/* Helper Classes */
	#menu .drop.megamenu {position:static;}
	#menu .drop.megamenu > div {left:0; right:0; transform: none;}
}

/* DO NOT EDIT | Add override styles in site css to customise */