/* Quitamos estilos por defecto de el tag UL */
    #menu ul{width: 100%;
        list-style: none;
        background: rgba(255,255,255, 0.5);
        border-bottom: 1px #A37736 solid;}
        
/* Centramos y ponemos los textos en mayuscula */
#menu li{
   text-transform: uppercase;
   line-height: 3em;
   text-align:center;
   padding: 0 14px 0 14px;}
            
/* Damos estilo a nuestros enlaces */
#menu li a{
        display: block;
        text-decoration: none;
        line-height: 3em;
        text-align:center;
        padding: 0 14px 0 14px;}

#menu li a:hover{background: rgba(163,119,54,1); color: #fff;display: block;
        text-decoration: none;
        line-height: 3em;
        text-align:center;
        padding: 0 14px 0 14px;}
    
/* Estilos #nav-mobile y lo ocultamos */
#nav-mobile{
        display: none;
        background: url(../img/treslineas.png) #fff no-repeat center center;
        /*float: right;*/
        width: 100%;
        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: 1366px) {
#menu li {padding: 0;}
}

@media only screen and (max-width: 1205px) {
/* Estileo Menu responsive */
#menu{width:100%;z-index:100;}


#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;}

/*.openul {background: rgba(185,190,16,0.95);}*/
           
 /* 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:right;
            /*float: none;*/}

/* Quitamos el borde del ultimo item del menú */
/* #menu li:last-child{ border-bottom: 0;}*/
 #menu li a{ display: block;
            padding: 10px;
            height: auto;
            line-height: 39px;
            padding-right: 2em;
            font-size:22px;}
  #menu li #turnos { display: block; padding: 10px; height: auto; line-height: 39px; background: grey; padding-right: 2em; font-size:22px;}
  #menu li #turnos:hover { display: block; padding: 10px; height: auto; line-height: 39px; background: #30cebb; padding-right: 2em; font-size:22px;}
  #menu li a:hover {display: block;
                   background:#A37736;
                   color: #fff;
                   opacity:0.9;
            padding: 10px;
            height: auto;
            line-height: 39px;
            padding-right: 2em;
            font-size:22px;}

 /* Agregamos una animación al despligue del menú */
   #menu ul.open-menu{ max-height: 500px;
            -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: 10px;}

             #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;
        }

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

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

    .redes {margin-top:17px;}


}

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

@media only screen and (max-width: 783px) {
  .redes {position: absolute;right: 5%;}
  .prod3 {display: flex; flex-wrap: nowrap; flex-direction: column; padding-left: 16%; padding-bottom: 8%;}
  #productos2 h4 {padding-left: 7%; padding-top: 5%;}
  .indice {width: 32%; padding-top: 7px;}
/* Estileo Menu responsive */

}

@media only screen and (max-width: 670px) {
#productos2 .container ul li {width: 24%;}
.prod2 {padding-left: 13%;}
}

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