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





nav{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: normal;
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: white;
transition: all 0.2s;
}

.menu li a:hover, .menu li:hover> a{color:#ffffff; 
background: #003056;
color: white;}




/* DISTANCIA LISTA DESPLEGABLE */
.menu ul {display: none;
margin: 0;
padding: 0;
width: 177px;
position: absolute;
top: 37px;
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: 15px 14px 9px 14px;	
display:block;
color:white;
border-left:3px solid #034694;
background: #003056;
}

.menu ul li a:hover, .menu ul li:hover > a{
background:#034694;
border-left:9px solid black;
color: white;
}

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

.menu ul ul {
	left: 149px;
	top: 0px;
}





.mobile-menu{display:none; transition: all 0.3s;
background-color: #034694;
font-size: 18px;
color: white; 
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{

color: white;
text-decoration: none;
}
























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


/* botones menu */
.menu li a {
text-decoration:none;
padding: 9px 8px 9px 8px; 
font-size: 14px;
display:block;
color: white;
transition: all 0.2s;
}

.menu li a:hover, .menu li:hover> a{color:#ffffff; 
background: #003056;
color: white;}





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





}














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


/* botones menu */
.menu li a {
text-decoration:none;
padding: 14px 8px 14px 8px; 
font-size: 14px;
display:block;
color: white;
transition: all 0.2s;
}

.menu li a:hover, .menu li:hover> a{color:#ffffff; 
background: black;
color: white;}





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





}



.m-sal {
	display: none;
}


























@media (max-width: 650px) {


.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 {background:#ffffff;
color: white;
font-size: 16px;
border-top:1px solid black;
padding: 12px 0px 12px 8px;
background-color: black;
border-left: 7px solid #034694;}

.menu li a:hover, .menu li:hover > a{
background:#f0f0f0;
color:#797979;
border-left:19px solid black;}

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

.menu ul ul {left:0;}

}












}