@charset "utf-8";
/* CSS Document */
body {
  margin: 0; 
  font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
header {
  width: 100%;
  background: #062d43;
}
#btn_menu {
  display: none;
}
header label {
  display: none;
  width: 30px;
  height: 30px;
  padding: 10 px; 
}
header label:hover {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.3);
  border-right: 1px solid #92abe4;
}
.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;
	
}


.submenu{
	display: none;
	position: absolute;
}

.menu ul submenu:hover{
	display: block;
}




@media (max-width:768px) { /*768 es el tamaño de una tablet*/
  header label {
    display: block;
  }
  .menu {
    position: absolute;
    background: rgba(62, 95, 204, 0.5);
    width: 30%; /*ancho del menu */
      margin-left:-70%;
	  transition: all 1s; /*demora en aparecer el menu */
  }
  .menu ul { /*por defecto la propiedad del felx es row, fila, se cambia a columna*/
    flex-direction: column;
  }
  .menu li {
    border-top: 1px solid #fff;
  }
	#btn_menu:checked ~ .menu{/*la virulilla ~ alt + 126 sirve para que busque lo que está a su derecha, en este caso el .menu*/
		
		margin: 0;
		
		
	}
}