/* Quitamos estilos por defecto de el tag UL */
#menu ul{width: 100%;
        height: 90px;
        list-style: none;
        z-index: 900 !important;
        }
        
#menu li{
   text-transform: uppercase;
   text-align: left;
   display: block;
   width: 11%;}
            
/* Damos estilo a nuestros enlaces */
#menu li a{
        display: inline-block;
        width: 120px;
        text-decoration: none;
        /*padding: 24px 7px;*/}

#menu #long a{display: inline-block; width: 220px !important; text-decoration: none;}

#menu li a:hover{color: red; background:#cccccb; height:53px;}
.ramales li a{font-size: 13px;padding:0; background: #e2e2e1; padding-left: 10px;}

    
/* Estilos #nav-mobile y lo ocultamos */
#nav-mobile{
        display: none;
        background: url(../img/nav2.png) black no-repeat center center;
        float: right;
        width: 130px;
        height: 50px;
        position: absolute;
        right: 0;
        top:0;
        opacity: 0.9;}   
       

/* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
        #nav-mobile.nav-active{}

/* Estileo Menu responsive */



/*MEDIA QUERIES*/
/* Estileo responsive #nav-mobile aparece en 1205px*/
@media only screen and (max-width: 1205px) {
/* Estileo Menu responsive */
#menu{width:40%;
position:absolute;
top:0;
right:10px;
z-index:100;
display:inline;
background:none;}  

#menu ul{-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
         -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
        box-shadow: 0 1px 2px rgba(0,0,0,.5);
        max-height: 0;
        overflow: hidden;
        margin-top:70px;
        margin-right:40px;}

.openul {background: #e2e2e1;}
.openul img{ display: none;}




           
 /* estilos para los LI del menu */
  #menu li{  float: right;
            background: none;
            border-bottom: 3px solid rgba(250,250,250,.4);
            width:100%;
            text-align:left;
            /*float: none;*/}

/* Quitamos el borde del ultimo item del menú */
/* #menu li:last-child{ border-bottom: 0;}*/
 #menu li a{padding: 10px;
            min-height: 14px;
            line-height: 10px;
            padding-right: 2em;
            font-size:18px;}
  #menu li #prensa {line-height: 20px;}
  #menu li a:hover {
            height: auto;
            font-size:18px;
            background:black;
            color:white;
            opacity:0.9;
            width:100%;}

#menu #long a:hover{width: 100% !important;}

 /* Agregamos una animación al despligue del menú */
   #menu ul.open-menu{ min-height: 250px;
            -webkit-transition: max-height .4s;
            -moz-transition: max-height .4s;
            -ms-transition: max-height .4s;
            -o-transition: max-height .4s;
            transition: max-height .4s;
            margin-top: 50px;}

             #menu ul{
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            box-shadow: 0 1px 2px rgba(0,0,0,.5);
            max-height: 0;
            overflow: hidden;
            margin-top:70px;
            margin-right:0px;
        }

  nav a {margin-right: -10px;}

/** mostramos #nav-mobile */
    #nav-mobile{ display: block; }

    .redes {margin-top:0PX;}


}

@media only screen and (max-width: 800px) {
/* Estileo Menu responsive */
#menu{position:relative; width:103%;}
#menu li {text-align: center;}
#menu li a {font-size: 16px;}
#menu ul {margin-right:-10px;}
#nav-mobile{background: url(../img/nav2.png) black no-repeat center center;
        width: 100%;
        height: 50px;} 
}  

@media only screen and (max-width: 670px) {
  .redes {position: absolute;left: 60%;margin-right: 2px;}
/* Estileo Menu responsive */

}

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

}