body > .canvas > header {
	display:  block;
	width:    100%;
	position: absolute;
	top:      0;
	margin:   0 auto;
	padding:  0;
	z-index:  999;
}

header .header-inner {
	position:           absolute;
	width:              100%;
	margin:             0 auto;
	padding:            0;

	left:               50%;
	-webkit-transform:  translateY(100%) translateX(-50%);
	-moz-transform:     translateY(100%) translateX(-50%);
	-ms-transform:      translateY(100%) translateX(-50%);
	-o-transform:       translateY(100%) translateX(-50%);
	transform:          translateY(100%) translateX(-50%);

	-webkit-transition: top 0.5s ease;
	-moz-transition:    top 0.5s ease;
	-o-transition:      top 0.5s ease;
	transition:         top 0.5s ease;

	z-index:            11;
}

header .header-inner::before {
	content:           '';
	position:          absolute;
	top:               0;
	height:            100%;
	width:             100vw;

	left:              50%;
	-webkit-transform: translateX(-50%);
	-moz-transform:    translateX(-50%);
	-ms-transform:     translateX(-50%);
	-o-transform:      translateX(-50%);
	transform:         translateX(-50%);
}

header .header-inner.affix {
	position: fixed;
	top:      0;
}

header .header-inner > a#logo {
	position: absolute;
}

header .header-inner > a#logo::before {
	content:         '';
	position:        absolute;
	background-size: cover;
	display:         block;
	z-index:         9;
}

header input#hamburgerToggle {
	position:  absolute;
	top:       -1rem;
	margin:    0;
	padding:   0;
	font-size: 0;
}

header .header-grid {
	position:           absolute;
	top:                -100vh;
	display:            block;
	width:              100%;
	z-index:            -1;

	-webkit-transition: 600ms ease-out;
	-moz-transition:    600ms ease-out;
	-o-transition:      600ms ease-out;
	transition:         600ms ease-out;
}

header .header-grid > nav {
	position: relative;
	display:  block;
}

header nav > ul {
	position:        relative;
	display:         block;
	list-style-type: none;
	width:           auto;
	margin:          0;
	padding:         0;
	font-size:       0;
}

header nav > ul > li {
	display:   block;
	margin:    0;
	padding:   0;
	font-size: 1rem;
}

header nav > ul > li > ul.sub-menu {
	display:         block;
	list-style-type: none;
	margin:          12px 0 7px 24px;
	padding:         0;
}

/**
 * ===== MD =====
 */

@media screen and (min-width: 800px) {

	header .header-grid {
		position: relative;
		display:  block;
		top:      0;
		height:   100%;
		z-index:  1;
	}

	header .header-grid > nav {
		position:   absolute;
		text-align: right;
	}

	header .header-nav nav.topmenue-container {
		top: 0;
	}

	header .header-nav nav.hauptmenue-container {
		bottom: 0;
	}

	header nav > ul {
		display:         inline-block;
		list-style-type: none;
		width:           auto;
		margin:          0 24px 0 0;
		padding:         0;
		right:           0;
	}

	header nav > ul > li {
		display: inline-block;
		margin:  0;
		padding: 0;
	}

	header nav > ul > li > ul.sub-menu {
		position:        absolute;
		display:         none;
		width:           auto;
		text-align:      left;
		background-clip: padding-box;

		white-space:     nowrap;
		-ms-hyphens:     manual;
		-moz-hyphens:    manual;
		-webkit-hyphens: manual;
		hyphens:         manual;
		z-index:         99;
	}

	header nav > ul > li:hover > ul.sub-menu {
		display: block;
	}

}

/**
 * ===== LG =====
 */

@media screen and (min-width: 1100px) {

	header nav > ul {
		margin: 0;
	}

}