/* Esto simplemente es para que nuestro nav (responsive-menu) aparezca a la izquierda (left) */
#responsive-menu{
width: 100%; /* Ancho */
float: right;
 /* Color de fondo del menú */
position:absolute;
top:6px;
z-index:10;

}
 
/* Quitamos estilos predeterminados de la etiqueta UL (margen, relleno, estilo de lista y tamaño de letra)  */
#responsive-menu ul{
margin: 0;
padding: 0;
list-style: none;
font-size: 14px; 
float:right;
}
 
#responsive-menu li{
display: inline;
float: left; /* Flotado a la izquierda */
text-transform: uppercase; /* Transformamos el texto a mayúsculas */
text-align: center; /* Texto centrado */
}
 
/* Añadimos estilo a los enlaces */
#responsive-menu li a{
display: block; 
color: #fff; /* Color de letra */
text-decoration: none; /* Sin subrayado */
line-height: 59px;
padding: 0 15px; /* Relleno */
font-family: 'HelveticaneueRoman', sans-serif;
font-size: 13px;
}
 
#responsive-menu li a:hover{
color: #fff; /* Color de letra al pasar el cursor */
}
 
#nav-responsive{
display: none; /* Ocultamos el enlace */
background: url(../images/desplegar.png) no-repeat 15px 17px; /* Imagen que desplegará el menú al hacer click */
text-decoration: none; /* Sin subrayado */
float: right; /* Flotado a la derecha */
width: 60px; /* Ancho */
height: 60px; /* Alto */
position: absolute;
right: 0; /* Derecha */
top: 0; /* Arriba */
margin-top: -23px;
}
 
 
/* Agregaremos la clase .nav-active al enlace #nav-responsive, cuando el menu esté desplegado */
#nav-responsive.nav-active{
opacity: 1; /* Opacidad */
}
 
/* A partir de aquí, vista móvil */
 
@media only screen and (max-width: 700px) {
 
/* Mostramos el enlace que desplegará el menú (#nav-responsive) */
#nav-responsive{
display: block;
}
 
#responsive-menu{
width: 100%; /* Ancho (vista móvil) */
float: none; /* Dejamos de flotar el menú ya que el ancho es 100% */
padding-top: 10px; /*Relleno por arriba a partir del cual se mostrarán los elementos <li> */
}
 
#responsive-menu ul{
float:none;
box-shadow: 0 1px 2px rgba(0,0,0,.5); /* Sombra al menú */
max-height: 0;
overflow: hidden;
}
/* Añadimos estilo a cada elemento <li> (Vista móvil) */
#responsive-menu li{
background-image:url(../images/fmenu2.png); /* Color de fondo */
border-bottom: 1px solid #282b30; /* Borde inferior tamaño-tipo-color */
float: none;
display: block;
}
#responsive-menu li:last-child{
border-bottom: 0; /* Quitamos el borde al útlimo elemento <li> del menú (Vista móvil) */
}
 
/* Estilos para los enlaces (Vista móvil) */
#responsive-menu li a{
padding: 15px 0;
height: auto;
line-height: normal;
}
 
#responsive-menu li a:hover{
background-image:url(../images/fmenu2.png); /* Color de fondo para cada enlace al pasar el cursor */
}
 
#responsive-menu ul.open-responsive-menu{
max-height: 400px; /* Máximo alto para el menú desplegado */
transition: max-height .5s; /* Efecto en el despliegue del menú */
}
}