@charset "utf-8";
/* CSS Document */

#menu-bar {
	display:none;
}
header label {
	float:right;
	font-size:28px;
	margin:6px 0;
	cursor: pointer;
}
.menu {
	position:absolute;
	width:100%;
	height:100vh;
	background:rgba(255,0,0,0.8);
	top:50px;
	left:0;
	transition: all 0.5s;
	transform: translateX(-100%);
}
.menu a{
	display:block;
	color:#fff;
	height:50px;
	text-decoration:none;
	padding:15px;
	border-bottom:1px solid rgba(255,255,255,0.5);
}
.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;  
  }
}