@charset "UTF-8";


* { margin: 0; padding: 0; box-sizing: border-box; }

body {
	font-family: Helvetica, Verdana, sans-serif;
}

header {
	display: flex;
	justify-content: space-between;
	/*align-items: center;*/
	background-color: #333;
	color: #FFF;
	padding: 10px 20px;
}

header .logo img {
	height: 50px;
	margin-top: 10px;
}

header label.hamburg {
	display: block;
	background: #333;
	width: 42px;
	height: 50px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	border-radius: 4px;
}

header input#hamburg {
	display: none;

}

header .line{
	position: absolute;
	left: 10px;
	height: 4px;
	width: 36px;
	background: #999;
	border-radius: 2px;
	display: block;
	transition: 0.5s;
	transform-origin: center;
}

header .line:nth-child(1) {
	top: 12px;
	
}

header .line:nth-child(2) {
	top: 24px;
	
}

header .line:nth-child(3) {
	top: 36px;
	
}

header #hamburg:checked + .hamburg .line:nth-child(1) {
	transform: translateY(12px) rotate(-45deg);
	
}

header #hamburg:checked + .hamburg .line:nth-child(2) {
	opacity: 0;
	
}

header #hamburg:checked + .hamburg .line:nth-child(3) {
	transform: translateY(-12px) rotate(45deg);
	
}

header #hamburg:checked + .hamburg  + nav.menu { 
	height: auto; 
	max-height: 310px; 
	background: #333; 
	
}

header nav.menu { 
	height: auto;
	max-height: 0;
	overflow: hidden;
	transition: all 0.5sec; 
	
}

header nav.menu ul { 
	padding-right: 0.3em;
	
}

header nav.menu ul li { 
	list-style-type: none; 
	color: #FFF; 
	border-bottom: 0.7px solid white; 
	padding-top: 1ex; 
	padding-bottom: 1ex;  
	
}
	
header nav.menu ul li a { 
	padding-top: 0.2em;
	color: #FFF; 
	text-decoration: none; 
	display: inline-block; 
	
}