body {
	margin:0;
	padding:0;
	display: flex;
	flex-direction: column;
	font-family: 'Roboto', sans-serif;
}

.menubar {
	height: 100px;
	width: 100%;
	background-color: #202020;
	display: flex;
	justify-content:space-around;
	border-bottom: 3px solid #ffb900;
}

.logo img{
	padding-top: 15px;
	width: 250px;
}

	.menu ul {
        width: 100%;
		margin: 0;
		padding:0;
	}

.menu ul li {
	list-style-type: none;
	display: inline-block;
	padding:20px 5px 5px 5px;
	margin: 5px;
}

.menu a {
	color:#888888;
	text-decoration: none;
	padding: 10px;

	box-sizing: border-box;
	border-bottom: 2px solid #303030;
	display:block;
	text-align: center;
}

.menu a:hover {
	text-decoration: none;
	box-sizing: border-box;
	border-bottom: 2px solid #ffb900;
	transition: 0.4;
}

#kontrol {
	display: none;
}

.kontrol {
	margin: 60px 30px 0 0;
	position: relative;
	float: right;
	padding: 0;
	cursor: pointer;
    display: none;
}



/* mobile */

@media (max-width:800px) {
	.menubar {
	height: 150px;
}
	.logo img{
	padding-top: 50px;
	width: 200px;
}
	
	.kontrol {
		display: block;
	}
	
	.menu {
        position: fixed;
		margin: 0;
		padding: 0;
		width: 100%;
		
    }
	
		.menu ul {
		background-color: #202020;
		position: absolute;
		margin-top:153px;
		margin-left: 0;
		width: 100%;
		left:-100%;
transition: 0.5s ease;
	}
	
	.menu ul li {
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	
	.menu  a {
		width: 100%;
		border: 0;
		font-size: 25px;
		line-height: 50px;
		border-bottom: 2px solid #303030;
	}
	
		.menu  a:hover {
		border-bottom: 2px solid #ffb900;
			
	}
	
	
	#kontrol:checked~ul{
		left:0;
		
	}
	

}