
/* ############################################################
	MOBILE-NAVIGATION
############################################################ */

/* Hamburger */
.nav-button {
	cursor: pointer;
	display: block;
	position: absolute;
	top: 20px;
	left: 0;
	width: 43px;
	height: 24px;
	overflow: hidden;
}
	.nav-button svg {
		display: block;
		width: 90px;
		height: auto;
		fill: var(--main-color-1);
	}
	.nav-button.open svg.open, .nav-button svg.close {
		display: none;
	}
	.nav-button.open svg.close {
		display: block;
	}
@media screen and (min-width: 768px) {
	.nav-button {
		top: 70px;
		width: 90px;
	}
}
@media screen and (min-width: 992px) {
	.nav-button svg {
		-o-transition: fill 300ms var(--cubic-bezier);
		-ms-transition: fill 300ms var(--cubic-bezier);
		-moz-transition: fill 300ms var(--cubic-bezier);
		-webkit-transition: fill 300ms var(--cubic-bezier);
		transition: fill 300ms var(--cubic-bezier);
	}
	.nav-button:hover svg.open, .nav-button:hover svg.close {
		fill: var(--main-color-3);
	}
}
@media screen and (min-width: 1200px) {
	.nav-button {
		top: 105px;
		width: 112px;
		height: 30px;
	}
	.nav-button svg {
		width: 112px;
	}
}

