/* RESET STYLES */
*,  ul, ol, li { margin:0; padding:0 }





nav{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
transition: all 0.2s;
width: 100%;
}

.menu {
	width: 100%;
	display: flex;
	justify-content: space-between; 
}

.menu li{display: inline-block; 
transition: all 0.3s;
position: relative;
padding: 0px 0px;
text-align: left;

z-index:100;}

.menu li:first-child{margin-left:0; }






/* botones menu */
.menu li a {
text-decoration:none;
padding: 9px 10px 9px 10px; 
display:block;
color: var(--color-primario);
transition: all 0.2s;

font-weight: 400 !important;

}

.menu li a:hover, .menu li:hover> a{color:#ffffff; 
background: rgba(0, 0, 0, .3);
color: white;}




/* DISTANCIA LISTA DESPLEGABLE */
.menu ul {display: none;
margin: 0;
padding: 0;
width: 177px;
position: absolute;
top: 40px;
left: 0px;
}

.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;

}



/* botones LISTA DESPLEGABLE menu */
.menu ul li a {
font-size:15px;
padding: 8px 14px 8px 14px;	
display:block;
color: var(--color-primario);
border-left: 3px solid rgba(0, 0, 0, .3);
background: var(--color-primario1);
}

.menu ul li a:hover, .menu ul li:hover > a{
background:var(--color-primario);
border-left: 9px solid rgba(0, 0, 0, .6);
color: white;
}

.menu li:hover > ul{ display: block;}

.menu ul ul {
	left: 149px;
	top: 0px;
}
.bl {
	font-weight: 900;
}




.mobile-menu{display:none; transition: all 0.3s;
background-color: var(--color-primario1);
font-size: 18px;
color: var(--color-primario); 
font-weight: lighter; 
text-align: center; 
text-decoration:none; 
box-sizing: border-box;
width:100%;
padding: 10px 0px 11px 0px;
text-transform: unset;
}

.mobile-menu:hover{

text-decoration: none;
}


























@media all and  (max-width: 960px) {


.menu-nav {
	width: 100%;
	margin: 20px 0px 0px 0px;
}




/* DISTANCIA LISTA DESPLEGABLE */
.menu ul {display: none;
margin: 0;
padding: 0;
width: 177px;
position: absolute;
top: 47px;
left: 0px;
}



.m-sal {
	display: inherit;
}


.menu{display:none; }

.mobile-menu{
	width: 100%;
	display:block; 
	transition: all 0.3s;
}

nav{margin: 0; 
}

.menu li{display:block;	
margin:0;}

.menu li a {
	color: white;
	font-size: 16px;
	border-top:1px solid black;
	padding: 7px 0px 7px 8px;
	background: rgba(0, 0, 0, .3);
	border-left: 7px solid rgba(0, 0, 0, .1);
}

.menu li a:hover, .menu li:hover > a{
background: rgba(0, 0, 0, .3);;
color:#797979;
border-left:19px solid rgba(0, 0, 0, .1);}

.menu ul {display:block;
position:relative;
top: 0;
left:0;
width:100%;}

.menu ul ul {left:0;}

}


















@media screen and (max-width: 460px) {




.menu ul li a {
font-size:15px;
padding: 5px 14px 5px 14px;	
display:block;
color: var(--color-primario);
border-left: 3px solid rgba(0, 0, 0, .3);
background: var(--color-primario1);
}


.mobile-menu{
	width: 100%;
	display:block; 
	transition: all 0.3s;
	padding: 5px 0px 5px 0px;
}
.menu li a {
	color: white;
	font-size: 16px;
	border-top:1px solid black;
	padding: 5px 0px 5px 8px;
	background: rgba(0, 0, 0, .3);
	border-left: 7px solid rgba(0, 0, 0, .1);
}
.menu-nav {
	width: 100%;
	margin: 10px 0px 0px 0px;
}



}