#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; }
@media (min-width: 782px)	 { .customize-support #nav { top: 32px; } }
@media (max-width: 781.99px) { .customize-support #nav { top: 46px; } }

#nav:before {
	content: '';
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	
	background-color: var(--main-color);
	
	opacity: 0;
}
.loaded #nav:before { transition: none; }
.menu-open #nav:before {
	opacity: 1;
	transition: opacity 0s ease-out .4s;
}

.loaded #nav {
    transition:
        background-color .2s ease-out,
        box-shadow		 .2s ease-out,
        color 			 .2s ease-out;
}
.menu-open #nav,
body:not(.menu-open) #nav.static {
	background-color: transparent;
	box-shadow: 0px 4px 4px 0px rgba(0,0,0,0); 
	
	color: #FFF;
}
body:not(.menu-open) #nav.scroll {
	background-color: #FFF;
	box-shadow: 0px 4px 4px 0px rgba(0,0,0,.25);
	
	color: var(--main-color);
}

/*-----------------------------------------------------------------------------------------------*/

#nav > .menu-wrapper {
	position: relative;
	
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	column-gap: 20px;
}
.loaded #nav > .menu-wrapper { transition: padding .2s ease-out; }
@media (min-width: 1200px)	  { #nav > .menu-wrapper { padding: 20px 40px; } }
@media (max-width: 1199.99px) { #nav > .menu-wrapper { padding: 20px 25px; } }

/*-----------------------------------------------------------------------------------------------*/

#nav > .menu-wrapper > .home-btn { position: relative; }
.loaded #nav > .menu-wrapper > .home-btn {
	transition:
		height		  .2s ease-out,
		margin-bottom .2s ease-out;
}
body:not(.menu-open) #nav.static > .menu-wrapper > .home-btn { height: 168px; flex: 0 1 132px; margin-bottom: -118px; }
.menu-open #nav > .menu-wrapper > .home-btn,
body:not(.menu-open) #nav.scroll > .menu-wrapper > .home-btn { height:  18px; flex: 0 1 132px; margin-bottom: 0px; }

#nav > .menu-wrapper > .home-btn:before,
#nav > .menu-wrapper > .home-btn:after {
	content: '';
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	
	background-position: bottom center;
	background-size: 100% auto;
	background-repeat: no-repeat;
}
.loaded #nav > .menu-wrapper > .home-btn:before,
.loaded #nav > .menu-wrapper > .home-btn:after { transition: opacity .2s ease-out; }
#nav > .menu-wrapper > .home-btn:before { background-image: url("../../images/logo.white.svg"); }
#nav > .menu-wrapper > .home-btn:after { background-image: url("../../images/logo.color.svg"); }
.menu-open #nav > .menu-wrapper > .home-btn:before,
body:not(.menu-open) #nav.static > .menu-wrapper > .home-btn:before { opacity: 1; }
.menu-open #nav > .menu-wrapper > .home-btn:after,
body:not(.menu-open) #nav.static > .menu-wrapper > .home-btn:after  { opacity: 0; }
body:not(.menu-open) #nav.scroll > .menu-wrapper > .home-btn:before { opacity: 0; }
body:not(.menu-open) #nav.scroll > .menu-wrapper > .home-btn:after  { opacity: 1; }

/*-----------------------------------------------------------------------------------------------*/

#nav > .menu-wrapper > .menu-btn {
	position: relative;
	height: 30px; flex: 0 0 45px;
}
#nav > .menu-wrapper > .menu-btn > span {
    position: absolute; right: 0; left: 0; transform: translateY(-50%);
    display: block; height: 2px;
    
    background-color: currentColor;
    
    pointer-events: none;
    
    transition:
        background-color .2s ease-out .2s,
        transform        .2s ease-out,
        top              .2s ease-out .2s;
}
#nav > .menu-wrapper > .menu-btn > .top { top:   0%; }
#nav > .menu-wrapper > .menu-btn > .mid { top:  50%; }
#nav > .menu-wrapper > .menu-btn > .bot { top: 100%; }
.menu-open #nav > .menu-wrapper > .menu-btn > .mid { background-color: transparent; }
.menu-open #nav > .menu-wrapper > .menu-btn > .top { top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-open #nav > .menu-wrapper > .menu-btn > .bot { top: 50%; transform: translateY(-50%) rotate(-45deg); }
.menu-open #nav > .menu-wrapper > .menu-btn > span {
    transition:
        background-color .2s ease-out,
        transform .2s ease-out .2s,
        top       .2s ease-out;
}

/*-----------------------------------------------------------------------------------------------*/

#nav > .menu-wrapper > .join-btn {
	height: 45px; flex: 0 0 45px;
	
	background-color: var(--off-color);
	
	-webkit-mask-image: url("../../images/icons/phone.svg");
	mask-image: url("../../images/icons/phone.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 35px;
	mask-size: 35px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.loaded #nav > .menu-wrapper > .join-btn { transition: background-color .2s ease-out; }
#nav > .menu-wrapper > .join-btn:hover { background-color: currentColor; }

/*-----------------------------------------------------------------------------------------------*/

#nav > .menu-wrapper > .menu {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	column-gap: 50px;
}

#nav > .menu-wrapper > .menu a {
	font-size: 16px;
	font-weight: 500;
	
	cursor: pointer;
}
.loaded #nav > .menu-wrapper > .menu a { transition: color .2s ease-out; }
#nav > .menu-wrapper > .menu a.current,
#nav > .menu-wrapper > .menu a:hover { color: var(--off-color); }

#nav > .menu-wrapper > .menu .menu-item { line-height: 30px; }

#nav > .menu-wrapper > .menu .menu-item.cta-btn {
	position: relative;
	overflow: hidden;
	padding: 10px 25px;
	
	background-color: var(--off-color);
	border-radius: 30px;
	
	color: #FFF;
}
#nav > .menu-wrapper > .menu .menu-item.cta-btn:before {
	content: '';
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	
	background-color: rgba(0,0,0,.1);
	
	opacity: 0;
}
.loaded #nav > .menu-wrapper > .menu .menu-item.cta-btn:before { transition: opacity .2s ease-out; }
#nav > .menu-wrapper > .menu .menu-item.cta-btn:hover:before { opacity: 1; }
#nav > .menu-wrapper > .menu .menu-item.cta-btn > span { position: relative; }
#nav > .menu-wrapper > .menu > .submenu-container { position: relative; }
#nav > .menu-wrapper > .menu > .submenu-container > .submenu-btn {
	position: relative;
	padding-right: 35px;
}
#nav > .menu-wrapper > .menu > .submenu-container > .submenu-btn:after {
	content: '';
	position: absolute; top: 50%; right: 0; transform: translateY(-50%);
	display: block; width: 14px; height: 8px;
	
	background-color: var(--off-color);
	
	-webkit-mask-image: url("../../images/icons/arrow.down.svg");
	mask-image: url("../../images/icons/arrow.down.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.loaded #nav > .menu-wrapper > .menu > .submenu-container > .submenu-btn:after { transition: transform .2s ease-out; }
#nav > .menu-wrapper > .menu > .submenu-container > .submenu-btn.open:after { transform: translateY(-50%) scale(-1); }
#nav > .menu-wrapper > .menu > .submenu-container > .submenu {
	position: absolute; top: 100%; left: -25px;
	display: flex; width: 350px;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 10px;
	padding: 20px 25px;
	
	background-color: #FFF;
	
	color: var(--main-color);
	
	opacity: 0;
	pointer-events: none;
}
.loaded #nav > .menu-wrapper > .menu > .submenu-container > .submenu {
	transition:
		top		.2s ease-out,
		opacity .2s ease-out;
}
#nav > .menu-wrapper > .menu > .submenu-container > .submenu-btn.open + .submenu {
	top: 160%;
	opacity: 1;
	pointer-events: auto;
}
#nav > .menu-wrapper > .menu > .submenu-container > .submenu > .submenu-item { font-size: 14px; }

/*-----------------------------------------------------------------------------------------------*/

@media (min-width: 1200px) {
	#nav > .menu-wrapper > .menu-btn { display: none; }
	#nav > .menu-wrapper > .join-btn { display: none; }
}
@media (max-width: 1199.99px) {
	#nav > .menu-wrapper > .menu { display: none; }
}