/* CSS Document */

header {
width: 100%;
background:#CC3300;
}

#btn-menu {
display:none;
}

header label {
display: none;
width: 30px;
height: 30px;
padding: 10px;
border-right: 1px solid #fff;

}

header label:hover {
cursor: pointer;
background: rgba(0,0,0,0.3);
}
.menu ul {
margin: 0;
list-style: none;
padding: 0;
display: flex;
}
.menu li {
border-right: 1px solid #fff;
}
.menu li:hover {
background: rgba(0,0,0,0.3);
}
.menu li a {
display:block;
padding: 15px 20px;
color: #fff;
text-decoration: none;

}

@media (max-width:768px) {
header label {
display: block;

}
.menu {
position:absolute;
background: #CC3300; 
width: 70%;
margin-left: -70%;
transition: all 0.5s;
}
.menu ul {
flex-direction: column;
	}
.menu li {
border-top: 1px solid #fff;
}
#btn-menu:checked ~ .menu {
margin: 0;
 }
}