#wrapper > nav > .menu-btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 15px;
	padding: 20px;

	background-color: #E45C4A;
}
#wrapper > nav > .menu-btn:before {
	content: "";
	flex: 1; width: 100%;
	
	background-image: url("../../images/menu.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	
	transition: transform .2s ease-out;
}
#wrapper > nav > .menu-btn:hover:before { transform: rotate(180deg); }
#wrapper > nav > .menu-btn:after {
	content: attr(data-label-closed);
	
	text-align: center;
	text-transform: uppercase;
	line-height: 10px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2px;
	color: #FFF;
}
body[class*="open"] #wrapper > nav > .menu-btn:after { content: attr(data-label-open); }

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

#wrapper > nav > .linkedin-btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#nav > .linkedin-btn { background-color: transparent; }
#side-nav > .linkedin-btn { background-color: #FFF; }
#wrapper > nav > .linkedin-btn:after {
	content: "";
	display: block; height: 25px; width: 25px;
	
	background-color: #136064;
	-webkit-mask: url("../../images/social/linkedin.svg") no-repeat 50% 50%;
	mask: url("../../images/social/linkedin.svg") no-repeat 50% 50%;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.loaded #wrapper > nav > .linkedin-btn,
.loaded #wrapper > nav > .linkedin-btn:after { transition: background-color .2s ease-out; }
#wrapper > nav > .linkedin-btn:hover { background-color: #136064; }
#wrapper > nav > .linkedin-btn:hover:after { background-color: #FFF; }
@media (max-width: 599.99px) {
	#nav.front.static > .linkedin-btn:after { background-color: #FFF; }
}

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

#nav { left: 0; right: 0; z-index: 100; }
#nav > .home-btn {
	display: block;
	
	-webkit-mask: url("../../images/logo.dark.svg") no-repeat 0% 0%;
	mask: url("../../images/logo.dark.svg") no-repeat 0% 0%;
	-webkit-mask-size: contain;
	mask-size: contain;
	
	cursor: pointer;
}
body.loaded #nav > .home-btn { transition: opacity .8s ease-out; }
@media (min-width: 1200px) {
	#nav {
		position: absolute; 
		padding: 30px 70px;
		pointer-events: none;
	}
	#nav > .home-btn { pointer-events: auto; }
	#nav > .home-btn:not(.large) { height: 115px; width: 150px; }
	#nav > .home-btn.large { height: 150px; width: 195px; }
	#nav > .home-btn:not(.light) { background-color: #000; }
	#nav > .home-btn.light { background-color: #FFF; }
	body.loaded.contact-open #nav > .home-btn,
	body.loaded.recruitment-open #nav > .home-btn { opacity: 0; pointer-events: none; }
	#nav > .lang,
	#nav > .linkedin-btn,
	#nav > .menu-btn { display: none !important; }
}
@media (max-width: 1199.99px) {
	#nav {
		position: fixed;
		height: 100px;
		
		background-color: #FFF;
	}
	#nav > .home-btn {
		position: absolute; top: 10px; left: 20px; bottom: 10px;
		width: 105px;
		
		background-color: #000;
	}
	#nav > .lang {
		position: absolute; right: 100px; top: 0;
	}
	#nav > .lang > div { display: contents; }
	#nav > .lang > div > ul {
		display: flex;
		flex-direction: row;
	}
	#nav > .lang > div > ul > li {
		display: flex; width: 50px; height: 50px;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
		text-align: center;
		text-transform: uppercase;
		line-height: 14px;
		font-size: 18px;
		font-weight: 300;
	}
	#nav > .lang > div > ul > li.wpml-ls-current-language { font-weight: 700; }
	#nav > .lang > div > ul > li > a {
		display: contents;
		color: inherit;
	}
	#nav > .lang > div > ul > li > a > span { display: contents; }
	
	#nav > .linkedin-btn {
		position: absolute; right: 100px; bottom: 0;
		display: block; height: 50px; width: 50px;
	}
	#nav > .menu-btn {
		position: absolute; top: 0; right: 0; bottom: 0;
		display: block; height: 100px; width: 100px;
	}
}
@media (max-width: 599.99px) {
	#nav.front.static { background-color: transparent; }
	.loaded #nav.front { transition: background-color .2s ease-out; }
	
	#nav.front.static > .home-btn {
		bottom: -10px;
		width: 130px;
		
		background-color: #FFF;
	}
	.loaded #nav.front > .home-btn {
		transition:
			bottom			 .2s ease-out,
			width			 .2s ease-out,
			background-color .2s ease-out;
	}
	
	#nav.front.static > .lang { color: #FFF; }
	.loaded #nav.front > .lang { transition: color .2s ease-out; }
}

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

@media (min-width: 1200px) {
	#side-nav {
		position: fixed; top: 0; bottom: 0; right: 0; z-index: 100;
		display: flex; width: 100px;
		flex-direction: column;
		align-items: stretch;

		background-color: #FFF;
	}
	.customize-support #side-nav { top: 32px; }
	
	#side-nav > .lang { margin-bottom: 60px; }
	#side-nav > .lang > div { display: contents; }
	#side-nav > .lang > div > ul {
		display: flex;
		flex-direction: row;
		padding: 30px 20px 20px;
	}
	#side-nav > .lang > div > ul > li {
		flex: 1;
		
		text-align: center;
		text-transform: uppercase;
		line-height: 14px;
		font-size: 18px;
		font-weight: 300;
	}
	#side-nav > .lang > div > ul > li.wpml-ls-current-language { font-weight: 700; }
	#side-nav > .lang > div > ul > li > a {
		display: contents;
		color: inherit;
	}
	#side-nav > .lang > div > ul > li > a > span { display: contents; }
	
	#side-nav > .contact-btn {
		flex: 1;
		
		writing-mode: vertical-rl;
		text-orientation: mixed;
		text-transform: uppercase;
		text-align: center;
		
		line-height: 100px;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 2px;
		color: #064044;
	}
	#side-nav > .menu-btn,
	#side-nav > .linkedin-btn { flex: 0 0 100px; }
}
@media (max-width: 1199.99px) {
	#side-nav { display: none; }
}