@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Lora:ital,wght@1,400;1,500;1,600;1,700&display=swap');
@font-face{
    font-family: 'TuscanModular-Regular';
    src: url("../fonts/TuscanModular-Regular.otf");
}
/*****GENERALES*****/
:root {
  --naranja: #C08D53;
  --rojo: #CC2928;
  --gris: #bcbcbc;
  --negro: #000;
  --blanco: #fff;
  --cafe: #402413;
  --negrillo: #15181D;
  --carne: #dda179;
  --grisillo: #e3e3e3;

  --magenta: #FE2C55;
  --cian: #25F4EE;
  --amarillo: #fbb03b;
  --naranjaDos: #DE3E17;
  --azul: #135182;
  --azulDos: #0F507C;
  --azulTres: #0e4868;
  --rojo: #E7312A;
  --texto: #333333;
  --morado: #58306f;
  --rosa: #e44463;
  --rosa2: #ff859a;
  --rojo2: #dc0932;
  --azulin: #6cc4c8;
  --azulinDos: #8bc6c6;
  --amarilloDos: #f8cb10;
  --verde: #497D44;

  
  --green: #54c761;
  --all: all 0.3s ease-in-out;

  --titulos: 'Abril Fatface', cursive;
  --general: 'Lora', serif;
  --identidad: 'TuscanModular-Regular', sans-serif;
}
*, html{
  margin: 0px;
  padding: 0px;
  box-sizing:border-box;
}
html{
  overflow-x:hidden;
}
body{
  font-family: var(--general);
  font-size:20px;
  color: var(--negro);
  font-weight: 400;

  overflow-x: hidden;
  overflow-y: auto;

  min-height: 100%;
  width: 100%;
}

/*****H'S******/
h7{
  font-size: 60px;
  font-family: var(--titulos);
  color: var(--cafe);
  line-height: 50px;
}
h77{
  font-size: 60px;
  font-family: var(--titulos);
  color: var(--cafe);
  line-height: 50px;
}
h8{
  font-size: 35px;
  font-family: var(--titulos);
  color: var(--negrillo);
}
h9{
  font-size: 28px;
  font-family: var(--titulos);
  color: var(--negrillo);
}
h10{
  font-size: 35px;
  font-weight: 700;
  color: var(--carne);
  transition: var(--all);
}
h11{
  font-size: 20px;
  font-weight: 400;
}
h12{
  font-size: 65px;
  font-weight: 700;
  line-height: 100px;
  font-family: var(--identidad);
  color: var(--carne);
}
h122{
  font-size: 40px;
  font-weight: 700;
  font-family: var(--identidad);
  color: var(--blanco);
}
h13{
  font-size: 32px;
  font-weight: 500;
  font-family: var(--titulos);
  color: var(--cafe);
}
h14{
  font-size: 25px;
  font-family: var(--titulos);
  color: var(--cafe);
}
h15{
  background-color: var(--blanco);
  padding: 2px;
}
/*****FIN H'S******/

.fondo_inicial{
  background-image:url('../img/carne_4.jpg');
  background-size:cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 100%;
  height: 100vh;
}

.cien{width: 100%;}
.light{color: var(--blanco);}
.dark{color: var(--negro);}
#cl{clear: both;}
#cs{height: 10px;}
.max_width{
  margin: 0 auto;
  max-width: 1500px;
  width: 100%;
}
.width_menu{
  margin: 0 auto;
  max-width: 1500px;
  width: 100%;
}
.padding_width_grande{
  padding: 170px 2% 170px 2%;
}
.padding_width{
  padding: 100px 2% 100px 2%;
}
.padding_width_dos{
  padding: 100px 5% 100px 5%;
}
.padding_width_2{
  padding: 50px 2% 50px 2%;
}
.padding_width_chico{
  padding: 100px 0.5% 100px 0.5%;
}
.padding_width_bajo{
  padding: 10px 1% 0px 1%;
}
.padding_historia{
  padding: 200px 2% 50px 2%;
}
.padding_centrado{
  padding: calc(50vh - 22px) 2%;
}
.derecha{float:right;}
.sin_submit{background:none;border:none;cursor:pointer;}
.italic{font-style: italic;}
.grises{transition: var(--all);}
.grises:hover{opacity: 0.6;}
.at_c{text-align: center;}
.at_r{text-align: right;}
.at_l{text-align: left;}
.at_j{text-align: justify;}
.ln_h{line-height: 30px;}
.puntero{cursor: pointer;}
.minHeight{
  min-height: 100vh;
}
.linea{height: 1px;width: 100%;margin-top: 15px;background-color: var(--azulin);}
a{text-decoration: none;}

.img_libro{
  width: 48%;
  float: left;
  margin: 0 25px 20px 0;
}

.tabla_responsiva{
  width: 100%;
}
.tabla_responsiva table{
  width: 100%;
}
#tama_tabla, #tama_tabla table{
  width: 100% !important; 
}
.box_shadow{
  box-shadow: black 0em 0em 0.3em;
  width: 100%;
}
.back_shadow{
  background-color: rgb(0,0,0,0.4);
  width: 100%;
}
/*****FIN GENERALES*****/
/*****INICIO******/
.imas_flex{width: 60%;}
.img{width: 100%;}
.bg_blanco{background-color: var(--blanco);color: var(--texto);}
.bg_gris{background-color: var(--grisillo);color: var(--texto);}
.bg_rojo{background-color: var(--rojo2);}
.bg_azul{background-color: var(--azul);}
.bg_amarillo{background-color: var(--amarillo);color: var(--texto);}
.bg_morado{background-color: var(--morado);}

.pa_flex_2{display:flex;justify-content:space-around;}
.de_flex_2{width:45%;}
.pa_flex_4{display:flex;justify-content:space-around;}
.de_flex_4{width:23%;}
.pa_flex_3{display:flex;justify-content:space-around;}
.de_flex_3{width:33%;}

.alinear{align-items: center;}
.red{color: red;}
.auto{color: auto;}
.espacio{margin: 0px 10px;}
.borede_imagen{
  width: 100%;
  padding: 5%;
  border-radius: 10px;
  border: red 5px dotted;
}
.borede_imagen img{
  width: 100%;
}


.bg_negro{background-color: var(--carne);position: relative;z-index: 1;}
.max_mitad{
  max-width: 750px;
  width: 100%;
}
.padding_width_doble{
  padding: 100px 8% 100px 8%;
}
.texto_mitad{
  width: 50%;
}
.fondo_mitad{
  background-image:url('../img/carne_2.jpg');
  background-size:cover;
  background-repeat: no-repeat;
  /*background-size: 100%;*/
  /*background-attachment: fixed;*/
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}
.mapa{
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  border: none;
}
.img_left{
  background-position: left center;
  right: 0px;
}
.img_right{
  background-position: right center;
  left: 0px;
}
.de_left{float: left;}
.de_right{float: right;}

.lista{
  padding-left: 25px;
  list-style: none;
}
.lista li {
  list-style: none;
  margin-top: 10px;
  /*text-indent: -.7em;*/
}
.lista li::before {
  content: "• ";
  color: var(--cafe); /* or whatever color you prefer */
}


.el_vh{
  height: 80vh;
}
.seccion{
  background-size:cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  width: 100%;
  color: var(--blanco);
  font-size: 25px;
  font-weight: 500;
  text-align: center;
}
.sec_1{
  background-image:url('../img/para_1.jpg');
}
.sec_2{
  background-image:url('../img/para_2.jpg');
}
.sombra_sec{
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
}
.flex_seccion{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
}

.flex_barra{display:flex;justify-content:space-between;}
.texto_barra{width:50%;}
.img_barra{width:45%;}
.barra{
  background-color: var(--cafe);
  height: 50px;
  width: 100%;
  margin: 25px 0px;
}

.dotted-separator{
    margin-bottom: calc((26px - 16px) / 2);
    background-image: -webkit-radial-gradient(circle closest-side, rgba(0, 0, 0, 0.2) 99%, transparent 1%);
    background-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.2) 99%, transparent 1%);
    background-position: bottom;
    background-size: 5px 3px;
    background-repeat: repeat-x;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin-left: 3px;
    margin-right: 5px;
}
.dotted-separator a{
  background-color: var(--blanco);
  padding: 2px;
  color: var(--texto);
}
.dotted-separator a:hover{
  color: var(--rojo);
}
.flex_productos{
  display: flex;
  justify-content: space-around;
}
.lista_productos{
  width: 25%;
  background-color: var(--blanco);
  padding: 50px 2% 100px 2%;
  text-align: center;
  line-height: 50px;
}
.lista_productos div{
  cursor: pointer;
}
.lista_productos div:hover{
  color: var(--rojo);
}
.img_productos{
  width: 75%;
}
.img_productos img{
  width: calc(33.33% - 5px);
  margin: 0px 2.5px 5px 2.5px;
  float: left;
}
.activado{
  font-weight: bold;
}
.tama_cono{
  height: 150px;
  margin-top: 20px;
}
/*****FIN INICIO*****/
/*****SMENU*****/

/*****FIN SMENU*****/
/*****MENU*****/
.whatsapp{
  background-color: var(--green);
  border-radius: 50%;
  padding: 5px 5px 0px 5px;
  position: fixed;
  z-index: 5;
  right: 20px;
  bottom: 20px;
  transition: var(--all);
}
.whatsapp img{
  height: 50px;
}
.whatsapp:hover{
  background-color: var(--rojo);
}
.menu_f{
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100vw;
  font-family: var(--titulos);
}
.menu_back_f{
  
  padding: 25px;
  width: 100vw;
  box-sizing:border-box;
  /*box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  background: rgba(255,255,255,0.8);*/
}
.menu_back_f ul{
  display: flex;
  justify-content: center;
}
.menu_flex{
  display: flex;
  justify-content: space-between;
}
.menu_back_f li{
  padding: 0 10px 0 10px;
  list-style: none;
  font-size: 28px;
  cursor: pointer;
  /*text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);*/
}
.rojo{
  background-color: var(--cafe);
  border: solid 2px var(--cafe) !important;
  color: var(--blanco) !important;
}
.rojo:hover{
  background-color: var(--carne);
  border: solid 2px var(--carne) !important;
}
.menu_back_f li a{
  text-decoration: none;
  color: var(--blanco);
  transition: var(--all);
}
.menu_back_f li a:hover{
  color: var(--carne);
}
.menu_res{
  display: none;
  position: fixed;
  z-index: 12;
  cursor: pointer;
  top: 10px;
  right: 10px;
  background-color: var(--carne);
  padding: 2px;
  border-radius: 5px;
  height: 25px;
}
.menu_res:hover{
  background-color: var(--blanco);
}
.cerrar_menu{
  display: none;
  position: fixed;
  z-index: 11;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100vh;
}
.menu_r{
  position: fixed;
  z-index: 11;
  top: 0;
  padding: 20px;
  width: 80vw;
  background-color: var(--cafe);
  /*background-color: var(--azulDos);*/
  /*text-align: center;*/
  min-height: 100vh;
}
.menu_r li{
  text-decoration: none;
  list-style: none;
  font-size: 18px;
  cursor: pointer;
  margin-top: 10px;
  border-bottom: 1px solid var(--carne);
  padding-bottom: 10px;
  font-weight: bold;
}
.m_bot{
  margin-bottom: 15px;
}
.overflow{
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
}
.menu_r li a{
  text-decoration: none;
  color: var(--blanco);
}
.menu_r li:hover{
  color: var(--carne);
}
.menu_r li a:hover{
  color: var(--carne);
}

#ver_no{display: none;}
#ver_si{display: block;}

#ver_si {
  animation-duration: 1s;
  animation-name: sale_menu;
}

@keyframes sale_menu {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 80%;
  }
}
@media screen and (max-width: 680px) {
  @keyframes sale_menu {
    from {
      margin-left: 100%;
      width: 150%
    }

    to {
      margin-left: 0%;
      width: 80%;
    }
  } 
}
.m_amarillo{color: #d4bb42;}
.m_azul{color: var(--naranja);}
.m_blanco{color: #fff;}
.logo_menu{height: 120px;}
.logo_menu2{height: 80px;}
.logo_leopardos{height: 105px;position: absolute; margin-top: -5px;z-index: 1;}
.logo_leo{width: 35%;}
.padding_men{height: 40px}
.rotateMe {
 transition: transform 1s ease-out;
}
.rotateMe:hover {
 transform: rotate(360deg);
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
/*.dropdown-content a:hover {background-color: #ddd;}*/

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
/*.dropdown:hover .dropbtn {background-color: #3e8e41;}*/
@media screen and (max-width: 900px) {
  .menu_back_f li {
    padding: 0 5px 0 5px;
    font-size: 22px;
  }
}
@media screen and (max-width: 750px) {
  .logo_menu{height: 70px;}
}
@media screen and (max-width: 700px) {

}
@media screen and (max-width: 680px) {
  .menu_back_f{display: none;}
  .menu_res, .cerrar_menu{display: block;}
  .padding_menu{padding-top: 15px;}
  .padding_men {
    height: auto;
  }
  .menu_back_f{
    background: rgba(255,255,255,0.5);
    padding: 10px 5px 0px 5px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  }
  .logo_menu{height: 40px;margin-top: -5px;}
}  
@media screen and (max-width: 400px) {
  .menu_back_f {
    padding: 20px 10px 20px 10px;
  }
} 
.men_activado{
  color: var(--naranja) !important;
}
.men_noctivado{
  color: var(--blanco);
}
/*****FIN MENU*****/
/*****ACORDION*****/
.dt{
  color: var(--blanco);
  font-size: 15px;
  cursor: pointer;
}
.dd{
  text-decoration: none;
  cursor: pointer;
  margin-top: 10px;
  padding-bottom: 10px;
  color: var(--blanco);
  transition: var(--all);
}
.dd:hover, .dt:hover{
  color: var(--azulin);
}
/*****FIN ACORDION*****/
/*****ANIMACIONES*****/
.rotateMe {
 transition: transform 2s ease-out;
}
.rotateMe:hover {
 transform: rotate(360deg);
}
/*****FIN ANIMACIONES*****/
/*****PIE*****/
.boton_contacto{
  border: solid 2px var(--carne);
  padding: 10px 20px;
  text-align: center;
  font-weight: 400;
  color: var(--carne);
  transition: var(--all);
  font-size: 25px;
  font-family: var(--titulos);
}
.boton_contacto:hover{
  border: solid 2px var(--blanco);
  color: var(--blanco);
}
.pie{
  font-size: 18px;
  text-align: right;
  background-color: var(--cafe);
  color: var(--carne);
}
.padding_pie{
  padding: 150px 20px;
}
.derechos{
  text-align: center;
  margin-top: 50px;
  font-size: 12px;
}
.flex_pie{
  display: flex;
  justify-content: space-around;
}
.subir{
  width: 50px;
  height: 50px;
  color: var(--negro);
  background-color: var(--carne);
  border-radius: 50%;
  padding: 4px;
  padding-top: 10px;
  font-size: 20px;
  text-align: center;
  transition: var(--all);
  cursor: pointer;
}
.subir:hover{
  background-color: var(--blanco);
}
.pie_contacto{
  width: 20%;
  text-align: center;
}
.pie_contacto a{color: var(--carne);transition: var(--all);}
.pie_contacto a:hover{color: var(--blanco);}
h10:hover{color: var(--blanco);}
h11 a{
  color: var(--carne) !important;
}
h11 a:hover{
  color: var(--blanco) !important;
}

.de_re_pie{
  width: 55%;
}
.subi_pie{
  width: 20%;
}


.redes_contacto{
  display:flex;justify-content:flex-start;
  margin-top: 25px; 
}
.flex_redes{
  display:flex;justify-content:center;
  margin-top: 25px; 
}
.de_flex_redes img, .redes_contacto img{
  margin-left: 10px;
  margin-right: 10px;
  height: 40px;
  background-color: var(--carne);
  border-radius: 50%;
  padding: 4px;
  transition: var(--all);
}
.de_flex_redes img:hover, .redes_contacto img:hover{
  background-color: var(--blanco);
}
/*****FIN PIE*****/
/*****CONTACTO*****/
.infcontacto ul {
  text-align:left;
  padding: 0;
  margin: 0;
  list-style: none;
  margin-top: 30px;
}
.infcontacto ul.list1 li{
  padding-left: 50px;
  height: 40px;
  font-size:17px;
  padding-top:9px;
}
.infcontacto ul.list1 li.telefono {
  background: url(../img/con_1.svg) 0 0px no-repeat;
}
.infcontacto ul.list1 li.correo {
  background: url(../img/con_2.svg) 0 0px no-repeat;
}
.infcontacto ul.list1 li.ubicacion {
  background: url(../img/con_3.svg) 0 0px no-repeat;
}
.infcontacto ul.list1 li {margin-top: 10px;}
.infcontacto ul.list1 li a{
  text-decoration: none;
  color: var(--negro);
}
.infcontacto ul.list1 li a:hover{
  color: var(--blanco);
}

input[type='text'], input[type='password'], input[type='number'], input[type='date'], input[type='time'], select {
  width:100%;
  height: 49px;
  color: var(--negro);
  padding: 4px 12px 5px;
  margin-bottom: 5px;
  font-size: 14px;
  font-family: var(--general);
  background-color: var(--carne);
  border: none;
}
.flex_inputs{
  display: flex;
  justify-content: space-between;
}
.flex_inputs div{
  width: 31%;
}
#area{
  width:100%;
  border: none;
  color:#000;
  padding: 4px 12px 5px;
  background-color: var(--carne);
  height: 120px;
  margin-bottom: 25px;
  font-size: 14px;
  font-family: var(--general);
}
.button{
  background-color: var(--cafe);
  padding: 10px 40px;
  text-align: center;
  font-weight: 400;
  color: var(--blanco);
  transition: var(--all);
  font-size: 25px;
  font-family: var(--titulos);
  border: none;
}
.button:hover{
  background-color: var(--rojo);
}
.links{
  color: var(--azulDos);
  font-weight: bold;
  font-size: 14px;
  transition: var(--all);
}
.links:hover{
  color: var(--azulin);
}
/*****FIN CONTACTO*****/
/*****CAROUSEL ALICE*****/
.carousel_img{
  background-image:url('../img/carne_4.jpg');
  background-size:cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 100%;
  height: 100vh;
}
.logo_car{
  width: 200px;
  max-width: 200px;
}
.sombra_car{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
}
.leyenda{
  margin-top: 100px;
  font-family: var(--titulos);
  font-size: 45px;
  background-color: rgba(64, 36, 19, 0.7);
  background-color: rgba(231, 49, 42, 0.7);
  color: var(--negro);
  padding: 20px 50px;
  border-radius: 15px;
  transition: var(--all);
}
.leyenda:hover{
  background-color: rgba(231, 49, 42, 0.7);
  background-color: rgba(64, 36, 19, 0.7);
}
.leyenda a{color: var(--blanco);}
.quita{
  display: block;
}
@media screen and (max-height: 600px) {
  .quita{
    display: none;
  }
}
@media screen and (max-width: 450px) {
  .quita{
    display: none;
  }
}
/*****FIN CAROUSEL ALICE*****/
/*****RESPONSIVOS*****/
.tabla_responsiva{
  display: block;
  overflow-x: auto;
}
@media screen and (max-width: 1300px) {

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

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

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

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

}
@media screen and (max-width: 1025px) {
  h10{
    font-size: 25px;
  }
  .pie{
    font-size: 14px;
  }
}
@media screen and (max-width: 1000px) {

}
@media screen and (max-width: 950px) {
  .seccion, .carousel_img{
    background-size: auto 100%;
  }
  .rojo{
    font-size: 18px !important;
    padding: 10px 10px;
  }
}
@media screen and (max-width: 900px) {
  .fondo_inicial{
    background-size: auto;
  }
}
@media screen and (max-width: 865px) {

}
@media screen and (max-width: 850px) {
  .de_flex_4{width:100%;margin-top: 20px;}
  .pa_flex_4{flex-flow: column;}

  .button{width: 95%;}
}
@media screen and (max-width: 780px) {
  .pa_flex_2, .pa_flex_3{flex-flow: column;}
  .de_flex_2, .de_flex_3{width:100%;margin-bottom: 20px;}
  .imas_flex{width: 40%;}
  .img_libro{width:100%;}

  .max_mitad{
    max-width: 1500px;
  }
  .padding_width_doble{
    padding: 100px 2% 100px 2%;
  }
  .texto_mitad{
    width: 100%;
  }
  .fondo_mitad{
    background-image:url('../img/carne_2.jpg');
    background-size:cover;
    background-repeat: no-repeat;
    position: relative;
    top: 0;
    width: 100%;
    height: 350px;
  }
  .mapa{
    width: 100%;
    height: 400px;
    position: relative;
    top: 0;
    border: none;
  }
  .flex_productos{
    flex-flow: column;
  }
  .lista_productos{
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 50px 2% 50px 2%;
    line-height: auto;
  }
  .img_productos{
    width: 100%;
  }

  h10{
    font-size: 35px;
  }
  .pie{
    font-size: 18px;
  }
  .flex_pie{
    flex-flow: column;
  }
  .pie_contacto{
    width: 100%;
  }
  .de_re_pie{
    width: 100%;
    margin: 50px 0px;
  }
  .subi_pie{
    width: 100%;
  }
}
@media screen and (max-width: 750px) {
  .pie_flex{
    flex-flow: column;
    text-align: center;
    width: 100%;
  }
  .rojo{
    font-size: 20px !important;
    padding: 10px 10px;
  }
}
@media screen and (max-width: 700px) {
  .flex_barra{flex-flow: column;}
  .texto_barra{width: 100%;}
  .img_barra{width: 80%;margin-bottom: 10px;}
}
@media screen and (max-width: 680px) {
  .fondo_1{height: 100vh;}
  .logo_index{
    top: 15px;
    left: 15px;
    height: 50px;
  }
  .quitar{display: none;}

  .leyenda{
    margin-top: 100px;
    font-size: 25px;
    padding: 20px 50px;
    border-radius: 15px;
  }
  .carousel_img{
    background-position: center;
    background-size: auto;
    height: 60vh;
  }
  .sombra_car{
    height: 60vh;
  }
  h12{font-size: 35px;line-height: 40px;}
  h122{font-size: 30px;font-weight: 400;}
  .logo_car{
    width: 150px;
    max-width: 150px;
  }
  .carousel_img{
    background-position: 57% 15%;
  }
}
@media screen and (max-width: 600px) {
  .tabla_responsiva table{
    width: 120%;
  }
}
@media screen and (max-width: 550px) {
  .img_barra{width: 100%;}
}
@media screen and (max-width: 510px) {

}
@media screen and (max-width: 500px) {
  .tabla_responsiva table{
    width: 150%;
  }
}
@media screen and (max-width: 450px) {
  .lista_productos{
    flex-flow: column;
  }
  .img_productos img{
    width: calc(100% - 5px);
    margin: 0px 2.5px 5px 2.5px;
  }
}
@media screen and (max-width: 435px) {

}
@media screen and (max-width: 400px) {
  .button{
    padding: 5px;
  }
  .tabla_responsiva table{
    width: 200%;
  }
} 
@media screen and (max-width: 350px) { 

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

}
/*****FIN RESPONSIVOS*****/