#menu-bar {
display: none;
}

header label {
float: right;
font-size: 30 px;
margin: 6px 0;
cursor: pointer;
}

.menu{
position: absolute;
top: 50px;
left: 0;
width: 100%;
height:100vh;
background: rgba(51,51,51,0.9);
transition: all 0.5s;
transform: translatex(-100%);
}

.menu a {
display: block;
color: #fff;
height: 50 px;
text-decoration: none;
padding: 15px;
border-bottom: 1px solid rgba(255,255,255,0.3);
}

.menu a:hover {
background: rgba(255,255,255,0.3);
}

#menu-bar:checked ~ .menu{
transform: translatex(0%);
}

@media (min-width:1024px) {
	.menu{
	position: static;
	width:auto;
	height: auto;
	transform: translatex(0%);
	float: right;
	display: flex;
	}

	.menu a {
	border: none;
	}


	header label{
	display:none;
	}

}