/* Navigation menu */
nav {
	position: fixed;
	top: 0;
	z-index: 2;
	width: 100%;
	height: var(--lay-nvh);
	min-height: var(--lay-nvh);
	background-color: var(--col-drk);
	border-bottom-width: 1pt;
	border-bottom-style: solid;
	border-image: linear-gradient(to right, var(--col-mna), var(--col-mnb)) 1;
	text-align: right;
	color: var(--col-brt);
	transition: height var(--tsn-dur) var(--tsn-eas);
}

ul#topmenu {
	display: block;
	position: absolute;
	right: 0;
	bottom: 50%;
	transform: translate(0, 50%);
	margin: 0 calc(var(--lay-nvh) * 0.15) 0 0;
}

ul#topmenu li {
	display: inline-block;
	text-align: center;
	margin: 0 5pt 0 5pt;
}

a.language::before {
	display: inline-block;
	width: calc(var(--fnt-siz) * 0.75);
	margin-right: calc(var(--fnt-siz) * 0.25);
	content:url('/common/images/ui/language-globe.svg');
}

/* Logo & title */
#navlogo, #navtitle {
	position: absolute;
	transition: top var(--tsn-dur) var(--tsn-eas), left var(--tsn-dur) var(--tsn-eas), transform var(--tsn-dur) var(--tsn-eas);
}

#navlogo {
	left: calc(var(--lay-nvh) * 0.225);
	top: calc(var(--lay-nvh) * 0.225);
	height: calc(var(--lay-nvh) * 0.575);
}

#navtitle {
	left: calc((var(--lay-nvh) * 0.225) + (var(--lay-nvh) * 0.85));
	top: calc(var(--lay-nvh) * 0.25);
}

#navmask {
	transition: height var(--tsn-dur) var(--tsn-eas);
}

ul#topmenu a {
	padding: 0 var(--fnt-siz) 0 var(--fnt-siz);
}

.smallButton {
	padding: 0 !important;
}

/* Burger */
#burger {
	display: none;
}

@media only screen and (max-width: 800px) {
	nav {
		height: auto;
		min-height: var(--lay-nvh);
		overflow: hidden;
	}

	nav.active {
		height: auto;
		min-height: var(--lay-nvh);
	}

	.collapsMenuWrapp {
		max-height: calc(100vh - (var(--lay-nvh) * 3.5));
		padding: 0 0 0 0;
		overflow-x: hidden;
		overflow-y: scroll;
		opacity: 0;
		transition: all var(--tsn-dur) var(--tsn-eas);
	}

	nav.active .collapsMenuWrapp {
		padding: calc(var(--lay-nvh) * 2.5) 0 calc(var(--lay-nvh) * 1) 0;
		opacity: 1;
	}

	/* Top menu */
	ul#topmenu {
		display: block;
		position: relative;
		right: 0;
		bottom: 0;
		transform: none;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		transition: all var(--tsn-dur) var(--tsn-eas);
	}

	ul#topmenu li {
		display: block;
		height: 0em;
		margin: -1em 0 0 0;
		transition: all var(--tsn-dur) var(--tsn-eas);
	}

	nav.active ul#topmenu li {
		height: 1.325em;
		margin: calc(var(--lay-nvh) * 0.4825) 0 calc(var(--lay-nvh) * 0.4825) 0;
	}

	/* Logo & title */
	#navlogo {
		left:50%;
		transform: translate(-50%, 0%);
	}

	#navtitle {
		left: calc(var(--lay-nvh) * 0.225);
	}

	nav.active #navlogo, nav.active #navtitle {
		opacity: 1;
	}

	nav.active #navlogo {
		top: calc(var(--lay-nvh) * 1.6);
	}

	nav.active #navtitle {
		left:50%;
		transform: translate(-50%, 0%);
	}

	/* Mask */
	#navmask {
		display: block;
		position: fixed;
		top: 0;
		width: 100%;
		height: calc(var(--lay-nvh) * 0.9);
		background-color: var(--col-drk);
	}
	
	nav.active #navmask {
		height: calc(var(--lay-nvh) * 2.2);
	}

	/* Burger */
	#burger {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		width: var(--lay-nvh);
		height: var(--lay-nvh);
		cursor: pointer;
	}
	
	#burger span {
		display: block;
		position: absolute;
		left: 50%;
		transform-origin: center left;
		transform: translate(-50%, -50%) rotate(0deg);
		transition: all var(--tsn-dur) var(--tsn-eas);
		width: calc(100% / 7 * 5);
		height: calc(100% / 27);
		background-color: var(--col-brt);
		background-image: linear-gradient(to right, var(--col-mna) , var(--col-mnb));
		border-radius: 1pt;
	}
	
	#burger span:nth-of-type(1) {
		top: 25%;
	}
	
	#burger span:nth-of-type(2) {
		top: 50%;
	}
	
	#burger span:nth-of-type(3) {
		top: 75%;
	}
	
	nav.active #burger span:nth-of-type(1) {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	
	nav.active #burger span:nth-of-type(2) {
		opacity: 0;
	}
	
	nav.active #burger span:nth-of-type(3) {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
}