#nav {
    position: fixed; z-index: 200;
	width: 100%;
    padding: 25px;
    
    color: #000;
	
    pointer-events: none;
}
.loaded #nav {
    transition:
        padding          .4s ease-out,
        background-color .4s ease-out,
        box-shadow       .4s ease-out;
}
body[class*='open'] #nav,
body:not([class*='open']) #nav.static {
    background-color: rgba(255,255,255,0);
    box-shadow: 0 0 3px rgba(0,0,0,0);
}
body:not([class*='open']) #nav.scroll {
    background-color: rgba(255,255,255,1);
    box-shadow: 0 0 3px rgba(0,0,0,.2);
}
@media (min-width: 1100px) {
	body:not([class*='open']) #nav.static { padding: 50px; }
}

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

#nav > .nav-wrapper { position: relative; }
.loaded #nav > .nav-wrapper { transition: height .4s ease-out; }
body[class*='open'] #nav > .nav-wrapper,
body:not([class*='open']) #nav.static > .nav-wrapper { height: 50px; }
body:not([class*='open']) #nav.scroll > .nav-wrapper { height: 30px; }
#nav > .nav-wrapper > * { pointer-events: auto; }

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

#nav > .nav-wrapper > .home-btn {
    position: absolute; top: 50%; left: 0; transform: translate(0%, -50%);
	display: block;
	
    background-image: url("../../images/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
	
	transition:
		height .4s ease-out,
		width  .4s ease-out,
		margin .4s ease-out;
}
.front.loaded #nav > .nav-wrapper > .home-btn {
	transition:
		left	  .4s ease-out,
		transform .4s ease-out,
		height	  .4s ease-out,
		margin 	  .4s ease-out,
		width 	  .4s ease-out;
}
@media (min-width: 1100px) {
	#nav.static > .nav-wrapper > .home-btn { height: 80px; width: 70px; }
	body[class*='open'] #nav > .nav-wrapper > .home-btn,
	#nav.scroll > .nav-wrapper > .home-btn { height: 50px; width: 45px; }
}
@media (max-width: 1099.99px) {
	#nav.static > .nav-wrapper > .home-btn { height: 70px; width: 65px; }
	body[class*='open'] #nav > .nav-wrapper > .home-btn,
	#nav.scroll > .nav-wrapper > .home-btn { height: 50px; width: 45px; }
}
/*@media (max-width: 899.99px) {
	.front:not([class*='open']) #nav > .nav-wrapper > .home-btn {
		left: 50%; transform: translate(-50%, -50%);
	}
}*/

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

#nav > .nav-wrapper > .menu {
	position: absolute; top: 50%; right: 0; transform: translateY(-50%);
	
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	column-gap: 35px;
	
	font-size: 15px;
	font-weight: 500;
}
.loaded #nav > .nav-wrapper > .menu {
	transition: opacity .2s ease-out;
}
body[class*='open'] #nav > .nav-wrapper > .menu {
	opacity: 0;
	pointer-events: none !important;
}
#nav > .nav-wrapper > .menu > .menu-item {
	position: relative;
	display: flex; height: 50px;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding: 0 30px 0 60px;

	background-color: #FFF;
	border: solid 1px #000;
	border-radius: 25px;

	color: #000;
}
.loaded #nav > .nav-wrapper > .menu > .menu-item {
	transition:
		background-color .2s ease-out,
		color			 .2s ease-out;
}
#nav > .nav-wrapper > .menu > .menu-item:hover {
	background-color: #000;
	color: #FFF;
}
#nav > .nav-wrapper > .menu > .menu-item > .label {
	font-size: 12px;
	font-weight: 800;
	font-style: italic;
}
#nav > .nav-wrapper > .menu > .menu-item > .icon {
	position: absolute; top: 50%; left: 25px; transform: translateY(-50%);
	display: block; height: 20px; width: 20px;
}
#nav > .nav-wrapper > .menu > .menu-item > .icon > img {
	height: 100%; width: 100%;

	object-fit: contain;
	object-position: center;
}

#nav > .nav-wrapper > .menu > .contact-btn > .icon { content: url("../../images/emojis/contact.png"); }

@media (min-width: 1100px) {
	#nav > .nav-wrapper > .menu > .contact-btn { padding: 0 30px 0 60px; }
	#nav > .nav-wrapper > .menu > .contact-btn > .icon { left: 25px; }
	#nav > .nav-wrapper > .menu > .contact-btn > .label.mobile { display: none; }
}
@media (max-width: 1099.99px) {
    #nav > .nav-wrapper > .menu > .contact-btn { padding: 0 25px 0 50px; }
	#nav > .nav-wrapper > .menu > .contact-btn > .icon { left: 20px; }
	#nav > .nav-wrapper > .menu > .contact-btn > .label.desktop { display: none; }
}

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

#nav > .nav-wrapper > .menu-btn {
	position: absolute; top: 50%;
	display: block; height: 50px; width: 50px;
	
	opacity: 1;
	pointer-events: auto;
}
.loaded #nav > .nav-wrapper > .menu-btn {
	transform: translate(50%, -50%);
	transition:
		right	.4s ease-out,
		opacity .4s ease-out,
		color	.4s ease-out;
}
.front:not([class*='open']) #nav > .nav-wrapper > .menu-btn {
	opacity: 0;
	pointer-events: none;
}
.categories-open #nav > .nav-wrapper > .menu-btn {
	right: 25px;
	color: #FFF;
}
@media (min-width: 900px) {
	#nav > .nav-wrapper > .menu-btn { right: 50%; }
}
@media (max-width: 899.99px) {
	@media (min-width: 500px)	 { #nav > .nav-wrapper > .menu-btn { right: 50%; } }
	@media (max-width: 499.99px) {
		#nav.static > .nav-wrapper > .menu-btn { right: calc((127.5px + (100% - 65px)) / 2); }
		#nav.scroll > .nav-wrapper > .menu-btn { right: calc((127.5px + (100% - 47px)) / 2); }
	}
}
#nav > .nav-wrapper > .menu-btn > .line {
	position: absolute; transform: translate(-50%, -50%);
	display: block; height: 3px; width: 60%;
	
	background-color: currentColor;
	border-radius: 1.5px;
}
.loaded #nav > .nav-wrapper > .menu-btn > .line {
	transition:
		left	  		 .2s ease-out .5s,
		top		  		 .2s ease-out .3s,
		opacity   		 .1s ease-out .2s,
		transform 		 .2s ease-out,
		background-color .2s ease-out;
}
#nav > .nav-wrapper > .menu-btn > .line-1 { top: 30%; left: 40%; }
#nav > .nav-wrapper > .menu-btn > .line-2 { top: 50%; left: 60%; }
#nav > .nav-wrapper > .menu-btn > .line-3 { top: 70%; left: 40%; }

#nav > .nav-wrapper > .menu-btn:hover > .line {
	left: 50%;
	transition:
		left	  		 .2s ease-out,
		top		  		 .2s ease-out .4s,
		opacity   		 .1s ease-out .2s,
		transform 		 .2s ease-out,
		background-color .2s ease-out;
}

body[class*='open'] #nav > .nav-wrapper > .menu-btn > .line {
	top: 50%; left: 50%;
	transition:
		left	  		 .2s ease-out,
		top		  		 .2s ease-out .2s,
		opacity   		 .1s ease-out .4s,
		transform 		 .2s ease-out .5s,
		background-color .2s ease-out;
}
body[class*='open'] #nav > .nav-wrapper > .menu-btn > .line-1 { transform: translate(-50%, -50%) rotate(45deg); }
body[class*='open'] #nav > .nav-wrapper > .menu-btn > .line-2 { opacity: 0; }
body[class*='open'] #nav > .nav-wrapper > .menu-btn > .line-3 { transform: translate(-50%, -50%) rotate(-45deg); }