/*
 * ----- HEADER
 */
.container-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2.5em;
}
	.container-root[ data-state-menu = "open" ] .container-header {
		z-index: 999;
	}
.header {
	display: flex;
	justify-content: flex-end;
}
	.container-root[ data-state-menu = "open" ] .header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
.menu-toggle {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 55px;
	height: 55px;
	cursor: pointer;
}
	.menu-toggle:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: scale( 1.5 );
	}
	.menu-toggle:active {
		outline: 1px dotted rgba( 0, 0, 0, 0.5 );
	}
	.menu-toggle .menu-open {
		position: relative;
		font-weight: 900;
		transform: scale( 1.5, 1 );
	}
	.menu-toggle .menu-open:before,
	.menu-toggle .menu-open:after {
		content: "—";
		position: absolute;
	}
	.menu-toggle .menu-open:before {
		top: -0.5em;
		left: 0;
	}
	.menu-toggle .menu-open:after {
		bottom: -0.5em;
		left: 0;
	}
	.menu-toggle .menu-close {
		font-size: 3em;
	}
	.container-root[ data-state-menu = "closed" ] .menu-toggle .menu-close {
		display: none;
		opacity: 0;
	}
	.container-root[ data-state-menu = "closed" ] .menu-toggle .menu-open {
		opacity: 1;
	}
	.container-root[ data-state-menu = "open" ] .menu-toggle .menu-open {
		display: none;
		opacity: 0;
	}
	.container-root[ data-state-menu = "open" ] .menu-toggle .menu-close {
		opacity: 1;
	}

@media ( min-width: 641px ) {
	.menu-toggle {
		display: none;
		width: 75px;
		height: 65px;
	}
}