/* ############################################################
	MOBILE-NAVIGATION
############################################################ */

/* Navigation Aktiv */
html.open,
body.open {
	overflow: hidden;
}


/* Hamburger */
.nav-button {
	position: relative;
	display: inline-block;
	margin-top: 51px;
	width: 52px;
	height: 26px;
}
.nav-button:hover {
	cursor: pointer;
}
	.nav-button .nav-lines {
		position: absolute;
		display: inline-block;
		top: 0;
		left: 0;
		width: 52px;
		height: 26px;
	}
		.nav-button .nav-lines span {
			display: block;
			position: absolute;
			width: 100%;
			height: 2px;
			background-color: var(--main-color-4);
			transform-origin: center left;
			-o-transition: all 0.3s ease;
			-ms-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-webkit-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}
		.nav-button.open .nav-lines span {
			background-color: var(--main-color-3);
		}
		.nav-button .nav-lines span:nth-child(1) {
			top: 0;
		}
		.nav-button .nav-lines span:nth-child(2) {
			top: 8px;
		}
		.nav-button .nav-lines span:nth-child(3) {
			top: 16px;
		}
		.nav-button .nav-lines span:nth-child(4) {
			top: auto;
			bottom: 0;
		}
		
		/* Schliessen */
		.nav-button.open .nav-lines span:nth-child(1) {
			width: 58px;
			-o-transform: rotate(25.67682deg);
			-ms-transform: rotate(25.67682deg);
			-moz-transform: rotate(25.67682deg);
			-webkit-transform: rotate(25.67682deg);
			transform: rotate(25.67682deg);
		}
		.nav-button.open .nav-lines span:nth-child(4) {
			width: 58px;
			-o-transform: rotate(-25.67682deg);
			-ms-transform: rotate(-25.67682deg);
			-moz-transform: rotate(-25.67682deg);
			-webkit-transform: rotate(-25.67682deg);
			transform: rotate(-25.67682deg);
		}
		.nav-button.open .nav-lines span:nth-child(2),
		.nav-button.open .nav-lines span:nth-child(3) {
			width: 0;
			opacity: 0;
		}
@media (min-width: 1020px) {
	.nav-button {
		margin-top: 129px;
		width: 50px;
		height: 34px;
	}
		.nav-button .nav-lines {
			width: 50px;
			height: 34px;
		}
			.nav-button:hover .nav-lines span,
			.nav-button.open:hover .nav-lines span {
				background-color: var(--main-color-1);
			}
			.nav-button .nav-lines span:nth-child(2) {
				top: 11px;
			}
			.nav-button .nav-lines span:nth-child(3) {
				top: 22px;
			}

			/* Schliessen */
			.nav-button.open .nav-lines span:nth-child(1) {
				width: 58px;
				-o-transform: rotate(34.2157deg);
				-ms-transform: rotate(34.2157deg);
				-moz-transform: rotate(34.2157deg);
				-webkit-transform: rotate(34.2157deg);
				transform: rotate(34.2157deg);
			}
			.nav-button.open .nav-lines span:nth-child(4) {
				width: 58px;
				-o-transform: rotate(-34.2157deg);
				-ms-transform: rotate(-34.2157deg);
				-moz-transform: rotate(-34.2157deg);
				-webkit-transform: rotate(-34.2157deg);
				transform: rotate(-34.2157deg);
			}
}