:root{
	--altoItemMenu: 35px;
	--sizeFontMenu: 15px;
}

.nav-menu{
	height: var(--altoItemMenu);
	display: flex;
	align-items: center;	
	background-color: var(--color5);
	flex-basis: 100%;
	
}

.nav-menu label{
	cursor: pointer;
	color: #fff;
	display: none;
	font-size: 22px;
	padding-left: 10px;
}

#boton-menu{
	display: none;
}

.menu ul{
	background-color: var(--color5);
	display: flex;
	list-style: none;
	
}

.menu ul li{
	/*height: var(--altoItemMenu);	*/
	
}
.menu ul ul{	
	display: none;
}

.menu a{
	
	display: block;
	text-decoration: none;
	color: var(--color1);	
	font-size: var(--sizeFontMenu);
	font-weight: bold;
}

.menu a:hover{
	background-color: rgba(0,0,0,0.1);
	color: #fff;
}

.menu a span{
	padding-left: 5px
}

.menu ul li:hover ul{
	display: block;
	position: absolute;
}

.menu-raiz ul{
	display: none;
}
.menu ul ul ul li{
	display: none;	
}

.menu ul ul li:hover ul li{
	display: block;		
	border-bottom: 1px solid #fff;	
}
.menu ul ul li:hover ul li a{
	color: #444;
}
.menu ul ul li a span{
	position: relative;
	left: 10px;
	
}
.menu ul ul li:hover ul li a:hover{
	color: #fff;
}

.menu ul ul li:hover{
	position: relative;
	border: 1px solid var(--color3);	
}
.menu ul ul li:hover ul{
	position: absolute;
	left: 100%;
	top: 0px;
	width: 100%;
	background-color: var(--color3);	
}

@media screen and (min-width:600px){
	.menu a{
		height: var(--altoItemMenu);
		padding: 10px 13px;			
	}
	/* si no entra un item en el nivel 2, agrandarlo especificando el ul2 a mano */
	.menu .menu-raiz:nth-child(3) .menu-ul2{
		width: 180%;
	}
	
}
	
@media screen and (max-width:790px){
	.menu a{
		height: var(--altoItemMenu);
		padding: 10px 5px;	
		font-size:13px; 
	}
}

@media screen and (max-width:600px){
	.nav-menu{
		position: absolute;
		top: 7px;
		left: 8px;
		width: 100%;		
		background-color: transparent; 
	}
	.nav-menu label{
		display: block;
		color: var(--color1);
		padding-top: 20px;
		padding-left: 7px;		
		position: relative;
		z-index: 15;
	}


	.menu{
		position: absolute;
		top: 58px;
		left: 0;
		width: 102%;
		transform: translateX(-130%);
		transition: all .3s;
		z-index: 5;
	}
	
	.menu ul{
		display:block;		
		
		margin: 0;
		padding: 0;
		background-color: var(--color1);
	}
	
	.menu a{
		color: #fff;		
	}		
	
	.menu ul .menu-raiz a{
			height: var(--altoItemMenu);		
	}
	
	.menu ul li a{
		font-size: var(--sizeFontMenu);		
		
	}
	
	.menu ul li{
		border-top: 1px solid #fff;					
	
	}
	
	.menu ul ul{
		background-color: var(--color3);			
	}
	
	.menu-raiz a{		
		padding: 10px 20px;;
	}

	.menu ul ul a{
		color: #444;
		padding-left: 40px;	
		
		padding-top: 10px;
		font-size: var(--sizeFontMenu);
	}
	
	.menu ul li:nth-child(1){
		margin-top: 10px;
		
	}
	
  .menu ul li:hover ul{
		display: none;
		position: static;
	}
	
	.menu a span{
		position: absolute;
		right: 10px;
	}
	.menu ul ul li:hover ul{
		display: block;
		position: static;
	}
	/*
	.menu ul ul li:hover ul li{
		display: none;				
	}
	*/

	.menu ul .menu-nivel2 a{
			height: var(--altoItemMenu);		
	}
	.menu li{		
		padding: 5px;
	}
	.menu-nivel2{
		margin-left: 25px;
		background-color: var(--color4)
		
	}
	.menu-ul2{
		
	}
	
	#boton-menu:checked ~ .menu{
		transform: translateX(-3%);
	}

}