.main-nav {
	text-transform: uppercase;
}

.main-nav a:not(.active,:hover),
.werk-nav a:not(.active, :hover) {
	text-decoration: none;
}

.atelierhaus-nav {
	letter-spacing: 0.012em;
}


/* mobile only */
@media only screen and (max-width: 800px) {
	.main-nav {
		position: fixed;
		z-index: 2;
		bottom: 0;
		width: 80%;
		left: 0;
		right: 0;
		margin: 0 auto;
		background-color: white;
		pointer-events:none;
		transform: translate(0, 100vw);
		transition: transform 0.3s var(--ease);
		font-size: 9.2vw;
		text-align: center;
		line-height: 1;
	}
	
	.main-nav li {
		display:block;
	}
	
	.main-nav a {
		display:inline-block;
		text-decoration: none;
		text-underline-offset: 0.18em;
		border-bottom: 0.1em solid transparent;
		padding: 0.04em 0;
		margin-bottom: 0.14em;
	}
	
	.main-nav a:hover,
	.main-nav a.active {
		border-bottom: 0.1em solid var(--textcol);
	}

	.main-nav.open {
		pointer-events: auto;
		transform: translate(0,-14.8vw);
	}
	
	.main-nav ul {
		margin-bottom: 0.4em;
	}
	
	.main-nav-title {
		padding: 0.8em 0 0.18em 0;
	}


	.main-nav-button {
		position: fixed;
		z-index: 3;
		bottom: 0;
		left:0;
		width: 100%;
		height: 15vw;
		background-color: white;
		text-align: center;
		-webkit-tap-highlight-color: transparent;
	}
	
	.main-nav-button-mobile,
	.main-nav-button-mobile:hover,
	.main-nav-button-mobile:active {
		background-color: transparent;
		border:none;
		padding: 4vw;
	}
	
	.main-nav-button-desktop {
		display:none;
	}
	
	.werk-nav {
		display:none;
	}

}


/* tablet + desktop */
@media only screen and (min-width: 800px) {
	
	
	.main-nav-button {
		position: absolute;
		z-index: 4;
		top: 4vw;
		right: 0;
	}
	
	.main-nav-button button,
	.main-nav-button button:hover,
	.main-nav-button button:active {
		color: inherit;
		background-color: transparent;
		border:none;
		text-transform: uppercase;
		font-size: 1.6rem;
		padding: 0.2em;
		margin-right: -0.2em;
	}
	
	.main-nav {
		font-size: 1.6rem;
		line-height: 1;
		position: absolute;
		z-index: 3;
		top: 3.7rem;
		right: -1.5rem;
		text-align: right;
		background-color: white;
		padding: 1.5rem;
		transform: translate(30vw,0);
		transition: transform 0.3s var(--ease);
	}
	
	.main-nav.open {
		transform: translate(0,0);
	}
	
	.main-nav a {
		display:inline-block;
		text-decoration: none;
		border-bottom: 0.09em solid transparent;
		padding: 0.03em 0;
		margin-bottom: 0.2em;
	}
	
	.main-nav a:hover,
	.main-nav a.active {
		border-bottom: 0.09em solid var(--textcol);
	}
	/*
	.main-nav a {
		display:block;
		margin-top: 0.3em;
		text-decoration-thickness: 0.08em;
		text-underline-offset: 0.13em;
	}
	*/
	.main-nav ul {
		margin: 0;
	}
	
	.main-nav-button-mobile,
	.main-nav-title {
		display:none;
	}

	.werk-nav {
		margin-top: 3rem;
		line-height: 1.4;
	}
	
	.werk-nav a {
		text-decoration-thickness: 0.11em;
		text-underline-offset: 0.24em;
	}

	
}

/* desktop + */
@media only screen and (min-width: 1300px) {
	
	.main-nav {
		top: 4.1rem;
	}
	
}