@import url('https://fonts.googleapis.com/css?family=Exo+2:100,200,300,400,500,600,700,800,900&display=swap');

html, body { width: 100%; height: auto; background: ; margin: 0; background: #020717; font-family: 'Exo 2' ; font-weight: lighter; font-size: 16px !important; color: #aeaeae; letter-spacing: 1px; font-weight: lighter; padding-top: 90px; text-align: justify; }
header { width: 100%; height: 100px; position: relative; z-index: 100; border-bottom:#d82038 solid 5px; background: #000; position: fixed; top: 0; z-index: 999999999999; }
header ul { width: 100%; text-align: left; padding-left:25%; position: relative; padding-top: 35px; }
header ul li { color: #ffc20e; text-decoration: none; display: inline-block; vertical-align: top; list-style: none; margin: 0 8px;  }
header ul li a { color: #fff;  font-size: 13px; line-height: 5px; text-transform: uppercase; font-weight: 400; }
header ul li a:hover { color: #d82038; text-decoration: none; }
header ul li .sub_ { color: #fff;  font-size: 14px; line-height: 15px; text-transform: uppercase; font-weight: 400; padding-top: 5px; cursor: pointer !important; }
.submenu { width: 100%; height: 50px; background: #d82038; position: fixed; z-index: 9999999999; top: 100px; line-height: 50px; text-align: center; transition:all 400ms ease; }
.submenu a { color: #fff; font-size: 16px; margin: 0 30px ; font-weight: 600; }
.visible_ { margin-top: 100px; }

#menu_ .sub { display: none; }

h1, h2, h3, h4 { font-weight: 100; }
h1 > span, h2 > span, h3 > span, h4 > span { font-weight: 600; }

footer { background:#fff url(img/footer.jpg) no-repeat; background-size: 70% 100% ; background-position: top right;  width: 100%; height: auto; padding: 75px 0 ; color: #fff; border-top:#000 slid 3px; font-size: 14px !important; position: relative; z-index: 10; }
footer h3 { color: #fff; }
footer a { color: #f0e8e9;  }
footer a:hover { color: #22a9e6; text-decoration: none;  }
footer ul.menu-foo { margin: 0; padding: 0; }
footer ul.menu-foo li { display: block; margin: 5px 0; }
footer ul.menu-foo li a { color: #fff !important; font-weight: 600; }
footer .ubicacion { padding-left: 50px; background: url(img/tack.png) no-repeat top left; padding-bottom: 15px; font-weight: 400; }
footer .whats { padding-left: 50px; background: url(img/whats.png) no-repeat top left;  padding-bottom: 15px; font-weight: 400; padding-top: 7px; margin-bottom: 10px;}
footer .mail { padding-left: 50px; background: url(img/mail.png) no-repeat top left; padding-bottom: 15px; font-weight: 400; }

.burger { display:none ; position: absolute; top: 25px; right: 20px; color: #fff; cursor: pointer; }
.remate { color: #fff; background:#020717; width: 100%; height: auto; padding: 15px 0;   border-top:#d82038 solid 5px; }
.remate_ { color: #fff; background:#da1e36; max-width: 80%; margin: 35px auto; height: auto; padding: 15px 25px; font-weight: 400; border-radius: 50px;  }
.up {  position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: .2; transition:all 200ms ease; }
.up:hover { opacity: 1; }
.links {  position: fixed; top: 45%; right: -15px; width: 50px; padding:15px 5px 10px 5px;   height: auto; border-radius: 15px; z-index: 9999; background: #db0e3a;   }
.links a { margin: 0; margin-left: -7px; }
.rs { position: absolute; top: 10px; right: 20px; }
.rs img { width: 22px; height: 22px; margin: 0 2px; }

/* colores */
.active { color: #d82038; }
.rojo { color: #d82038; }
.blanco { color: #fff; }
.logo { position: absolute; top:15px; left: 15px; }


/* BOTONES */
.boton1 { padding: 10px 15px; background: #fff; color:#c1152c; font-weight: 800; font-size: 18px; border-radius: 50px; margin-top: 15px; }
.boton2 { padding: 10px 15px; background: #c1152c; color:#fff; font-weight: 800; font-size: 18px; border-radius: 50px; margin-top: 15px; }
.boton1:hover { padding: 10px 35px 10px 15px; }
.boton2:hover { padding: 10px 35px 10px 15px;  }

/* INDEX */
.logo > img { width: 220px; }
.fondo1 { position: absolute; right: 100px; top:0px; } 
.listo { margin-left: 0; }

#iml {  width: 100%; height: auto; padding: 75px 0 ; color: #fff; background: url(img/iml.jpg) no-repeat center; background-size: cover;  font-size: 14px !important; position: relative; z-index: 10; }
#iml h2 { color: #fff; font-size:  24px; font-weight: 600; margin-top: 20px;  }
#iml p { color: #fff; font-weight: 200; }
#iml hr { color: #fff; width: 200px; height: 2px; background-color: #bc3c4c; margin: 25px 0; }

#diseno {  width: 100%; height: auto; padding: 150px 0 ; position: relative; color: #fff; background: url(img/diseno.jpg) no-repeat center; background-size: cover;  font-size: 14px !important; position: relative; z-index: 10; }
#diseno .container { position: relative; z-index: 10; }
#diseno h2 { color: #fff; font-size:  70px; line-height: 60px; font-weight: 600; margin-top: 20px;  }
#diseno h2 > span {font-size:  57px; display: block;}
#diseno p { color: #fff; font-weight: 400; font-size: 16px; margin-top: 15px; }
#diseno .copy { color: #fff; width: auto; height: auto; margin: 25px 0; padding: 21px 0 18px 180px; line-height: 25px; font-size: 24px; background: url(img/prod.png) no-repeat center left; background-size: auto 90%; font-weight: 700; }
#diseno .color {  width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0 !important;  background: url(img/color.png) no-repeat center left; background-size: auto 100%; mix-blend-mode: multiply;  }

#eco {  width: 100%; height: auto; padding: 110px 0; color: #fff;  font-size: 14px !important; position: relative; z-index: 10;  background: url(img/eco_.jpg) no-repeat center; background-size: cover;  }
#eco h2 { color: #fff; font-size:  35px; line-height: 50px; font-weight: 800; margin-top: 40px;  }
#eco h2 > span {font-size:  40px; display: block; font-weight: 800;}
#eco p { color: #fff; font-weight: 400; font-size: 16px; margin-top: 15px; }
#eco .copy { color: #fff; width: auto; height: auto; margin: 25px 0;  line-height: 25px; font-size: 24px; font-weight: 700; }
#eco hr { color: #fff; width: 200px; height: 2px; background-color: #bc3c4c; margin: 25px 0; }

#envase-personalizado { background:#fff;   width: 100%; height: 100vh; padding: 75px 0 ; color: #fff;  font-size: 14px !important; position: relative; z-index: 10; color: #d72138; border-bottom:#d72138 solid 2px;}
#envase-personalizado p { font-weight: 400; font-size: 18px; margin: 20px 0; }
#envase-personalizado a { color: #c8c8c8; font-weight: 600; }
#envase-personalizado a > img { }
#envase-personalizado h3 { color: #a3a3a4; font-size:  69px; line-height: 66px; margin-top: 90px; }

#seleccion { background:#fff url(img/seleccion.jpg) no-repeat top center; background-size: cover ;   width: 100%; height: auto; padding: 145px 0 ; color: #fff;  font-size: 14px !important; position: relative; z-index: 10; }

#bio { background:#000 url(img/bio.jpg) no-repeat top center fixed; background-size: cover ; padding: 75px 0;   width: 100%; height: auto; padding: 75px 0 ; color: #fff;  font-size: 14px !important; position: relative; z-index: 10; }
#bio h2 { color: #fff; font-size:75px; text-align: center; margin: 25px auto 55px auto; text-transform: uppercase; font-weight: 600; }
#bio h3 { font-weight: 800; margin-bottom: 20px; font-size: 38px; }
.info-bio { background: rgba(207, 198, 181, .9); border-radius: 25px; height: 300px !important;  color: #c8341a; border: #40523a solid 2px;  font-weight: 400; padding: 30px 3%; font-weight: 600; }
.agave { opacity: .2; width: 150px; display: block; }
.info-bio p { color: #46142f; }
.img-a { margin-left: -65px; }
.img-b { margin-left: -175px; }

.carousel {  background: ; height: 100vh; }
.carousel-cell {  width: 100%;  height:100vh;  margin-right: 10px;  /* center images in cells with flexbox */  display: flex;  align-items: center;  justify-content: center; }
.carousel.is-fullscreen .carousel-cell {   height: 100vh; }
.carousel-cell-image {  display: block;  max-height: 100%; }
.carousel-cell h1 { font-size: 32px; margin-bottom: 25px; margin-left: 45px;  }
.carousel-cell p { font-size: 14px;  margin-left: 75px;  }

.vaso-slide {background: url(img/vaso-gen.png) no-repeat center; height: 100vh;}
.vaso-slide2 {background: url(img/vaso1.png) no-repeat center; height: 100vh;}
.vaso-slide3 {background: url(img/vaso-maiz.png) no-repeat center; height: 100vh;}

.intro h2 { color: #d82038; font-weight: 600; margin-top: 160px; font-size: 30px; text-transform: uppercase; }
.intro h2 > span { color: #d82038; font-size: 24px; display: block; }
.intro p {  font-weight: 200; font-size: 14px; margin: 15px 0; max-width: 380px;   }
.intro a { color: #d82038; font-weight: 600; margin-top: 130px; font-size: 25px; text-transform: uppercase; }

/* PRODUCTOS  */
#productos { width: 100%; height: auto; padding: 75px 0 ; color: #fff; position: relative; z-index: 10;  background: url(img/productos.jpg) no-repeat center bottom ; margin-top: -90px; background-size: cover; border-bottom: #fff solid 3px;  }
#productos h3 { color: #fff; font-size:  30px; line-height: 40px; font-weight: 600;  }
#productos h3 > span { color: #fff; font-size:  16px; line-height: 24px;  font-weight: 200; display: block; padding-left: 0%; }

.header-pro { width: 100%; height: auto; padding: 75px 0; background:#000 url(img/header-pro.jpg) no-repeat center left; background-size: cover; }
.header-pro h2 { font-size: 4em; font-weight: 800; color: #fff; margin: 0 0 -20px 0; }
.header-pro .remate { background: none;  font-weight: 400; color: #fff; text-transform: uppercase;  font-size: 2em; border: none;  margin: 0; }
.header-pro p { font-weight: 300; color: #fff; max-width: 650px; padding-left: 75px; background: url(img/icon-mol.png) no-repeat top left; }

#vasos { background:#efefef ; padding-top: 190px 0 10px 0; }
#porta { background:#efefef ;  padding-top: 190px 0 10px 0; color:#373434;  font-weight: 300; }
#porta .img-fluid { margin: 5px; }
#porta h4 { color:#373434; font-weight: 300;}

.vaso { height: auto; padding: 20px 0; overflow: hidden; text-align: center; position: relative; margin: 75px 0;  }
video {  width: 410px; height: 410px; margin: 0 auto !important;  z-index: 9; opacity:0; transition:all 200ms ease; border-radius: 150%; border:#8dc63f solid 2px; }
.boton { width:60px; height: 60px; background: #fff ; color:#b44637; line-height: 60px; font-weight: 300; border:#b44637 solid 2px; position: absolute; bottom: 45px; left: 45%; border-radius: 50px; z-index: 9999; cursor: pointer;  }
.boton:hover { color:#8dc63f;  border:#8dc63f solid 2px;   }

#mosaico { width: 100%; height: auto; }
.visible { opacity: 1; }

/* NOSOTROS  */
#nosotros { width: 100%; height: auto; padding: 75px 0 ; color: #fff;  font-size: 14px !important; position: relative; z-index: 10;  background: url(img/nosotros.jpg) no-repeat; background-size: cover; margin-top: -100px;  }
#nosotros h3 { color: #fff; font-weight: 800; font-size:  70px; line-height: 140px;  margin: 110px 0 -10px 0; text-transform: uppercase; }
#nosotros p { font-weight: 200; font-size: 15.5px; line-height: 26px; text-transform: none; }
#hacemos { width: 100%; height: auto; padding: 75px 0 ; color: #fff;  font-size: 14px !important; position: relative; z-index: 10; margin-bottom: -75px !important; }
#hacemos h3 { color: #fff; font-weight: 600; font-size:  60px; line-height: 65px;  margin: 110px 0 30px 0; }

.ra { overflow: hidden; text-align: center; padding: 230px 0; background: url(https://media.giphy.com/media/qYXPEKwfA3Zfy/giphy.gif) no-repeat; background-size: cover; position: relative; }
.ra .container { position: relative; z-index: 50; color: #fff; }
.ra .pattern { background:rgba(0,0,0,.6) url(img/pattern1.png) repeat; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5;  }
.ra h3 { font-size: 55px; }
.ra h3 > span { font-size: 25px; display: block; }
.ra b { font-size: 25px; }
.ra p { font-weight: 300;  }

.ra_ { overflow: hidden; text-align: center; padding: 230px 0; background: url(img/ra.jpg) no-repeat center right; background-size: cover; position: relative; }
.ra_ .container { position: relative; z-index: 50; color: #fff; }
.ra_ h3 { font-size: 55px; }
.ra_ b { font-size: 25px; font-weight: 500; }
.ra_ p { font-weight: 300;  }

#materia { width: 100%; height: auto; padding: 75px 0 ; color: #fff; background: url(https://media.giphy.com/media/f4OLUExdCOo0gt1YDy/giphy.gif) no-repeat; background-size: cover; font-size: 14px !important; position: relative; z-index: 15; padding: 90px 0 190px 0; }
#materia h3 { color: #fff; font-weight: 600; font-size:  60px; line-height: 65px;  margin: 110px 0 30px 0; }
.mano { border-bottom: #a51916 solid 4px; }
#materia p { font-size: 16px; max-width: 650px; margin: 0 auto; }
#materia .container { position: relative; z-index: 10; }
#materia .patt {  width: 100%; height: 100%; position: absolute; z-index: 9; top: 0; left: 0 !important; opacity: 1; background: rgba(0,0,0,.6) url(img/pattern1.png) repeat;  }

.biode { width: 100%; height: auto; padding:220px 0; background: url(img/biode.jpg) no-repeat; background-size: cover; position: relative; text-align: center; color: #fff; }
.biode .container { position: relative; z-index: 10; }
.biode h2 { color: #fff; font-size:  63px; letter-spacing: 2px; font-weight: 600; }
.biode h2 > span { color: #fff; font-size:  59px; letter-spacing: 2px; font-weight: 200; display: block; }
.biode p { color: #fff; font-size:  40px; letter-spacing: 2px; font-weight: 200; font-size: 14px;  }
.biode hr { width: 60%; height: 1px; background: #69d337; margin: 25px 0;  }
.biode .copy { font-weight: 700; font-size: 18px; margin:50px 0 15px 0;  }
.biode .color2 {  width: 50%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0 !important;  background: #61892c;  mix-blend-mode: multiply;  }
.biode .pattern2 {  width: 100%; height: 100%; position: absolute; z-index: 2; top: 0; left: 0 !important; opacity: .6;  background: url(img/pattern.png) no-repeat center left; background-size:cover;  }

.nav-tabs { background:#d82038 ; color: #fff; font-size: 20px; font-weight: 300; border: none; width: 390px; padding: 10px; border-radius: 50px; }
.nav-tabs li.nav-item { width: auto !important; margin: 0; color: #fff; }
.nav-tabs li.nav-item a.nav-link{ width: auto !important; margin: 0; color: #fff; }
.nav-tabs li.nav-item a.nav-link:hover { border:#d82038  solid 1px !important; color:#020717;  }
.tab-pane { position: relative; min-height: 450px; width: 100%; text-align: center;  }
.tab-pane .vazzz { margin-left: -165px; }
.nav-tabs li.nav-item .active { width: auto !important; margin: 0; background: none; border: none; color:#020717 !important; font-weight: 600;  }

.txt1 { position: absolute; left: 0; bottom: 0; max-width: 280px; height: auto; font-size: 14px !important; line-height: 16px; font-weight: 400 !important; }
.txt2 { position: absolute; right: 0; bottom: 0; max-width: 280px; height: auto; font-weight: 400 !important; color: #fff !important; text-transform: uppercase; }
.txt2 > b { font-weight: 800; color:#fff; } 
.nombre { font-weight: 800; font-size: 34px; display: block; margin-bottom: 20px; text-transform: uppercase; color: #fff;  } 

.materiales { width: 100%; height: auto; padding:220px 0; background: url(img/materiales.jpg) no-repeat center; background-size: cover; margin-top: -80px; position: relative; text-align: center; color: #fff; }
.materiales .container { position: relative; z-index: 10; }
.materiales h3 { color: #fff; font-size:  5.9em; letter-spacing: 2px; font-weight: 200; }
.materiales p { color: #fff; font-size:  90px; letter-spacing: 2px; font-weight: 200; font-size: 18px;  }
.materiales hr { width: 60%; height: 1px; background: #69d337; margin: 25px 0;  }
.materiales .copy { font-weight: 700; font-size: 18px; margin:50px 0 15px 0;  }
.materiales .color2 {  width: 50%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0 !important;  background: #61892c;  mix-blend-mode: multiply;  }
.materiales .pattern2 {  width: 100%; height: 100%; position: absolute; z-index: 2; top: 0; left: 0 !important; opacity: .2;  background: url(img/pattern.png) no-repeat center left; background-size:cover;  }
.lista { display: inline-block; background: pink; margin-bottom: 10px;padding-left: 25px; background: url(img/bullet.png) no-repeat left top; } 

ul.men-vas { background:rgba(0,0,0,0.5); padding: 7px 0; width: 100%; text-align: center;  }
ul.men-vas li {padding: 0; display:block !important; text-align: left;   margin: 10px 0; padding: 0 7px;   }
ul.men-vas li a { font-size: 16px !important; line-height: 10px !important; color: #fff; text-align: center; margin: 5px 0;  }
ul.men-vas li a:hover { color: red; }
ul.men-vas li a > span { font-size: 90px; line-height: 10px !important; float: left; margin-top: -5px; }
.col-glass { width: 30%; display: inline-block; vertical-align: top; margin-right: 10px; }

/* PRODUCTOS  */
#proceso2 { width: 100%; height: auto; padding: 90px 0 ; color: #fff; position: relative; z-index: 10;  background: url(img/proceso2.jpg) no-repeat center bottom ;  background-size: cover;   }
#proceso2 h3 { color: #34a02b; font-size:  45px; line-height: 44px; font-weight: 800; margin: 0 0 90px 0; }
#proceso2 h3 > span { color: #0d3b09; font-size:  18px; line-height: 24px;  font-weight: 500; display: block; }
#proceso2 h3 > img { display: block; margin: 10px 0; }

.esquema { width: 100%; height: auto; overflow-x: auto; padding: 50px 3%; position: relative; z-index: 99999; }

.wrapper { margin: 0 auto; width: 100%;padding: 0px; }
.square { width: 180px;height: 180px;position: relative;float: left; border-radius: 50%; margin-right: -35px !important; }

.square:nth-child(2n) {background-color: #d80f36; }
.square:nth-child(2n+1) { background-color: #d83958; }
.square:first-child { box-shadow: none; }

.square p.text {
font-size: 13px !important;
font-weight: 600;
padding: 0 20px;
color: #fff;
text-align: left;
margin-top: 60px;
}

/*.square:nth-child(2n+1) p.text {
color: #fff;
margin-top: 80px;
} */



.circle {
border-radius: 100px;
height: 50px;
width: 50px;
position: absolute;
top: 0px;
left: 0px;
 }


 
  .circle p span {
color: #fff;
margin: 100px 0 0 90px;
font-weight: 800; font-size: 40px;
  }


/* Hide Play button + controls on iOS */
video::-webkit-media-controls {
display:none !important;
}

.limpia { clear: both; }


#videosList {
 max-width: 600px; 
  overflow: hidden;
}

.video {
  background-image: url('https://img.youtube.com/vi/nZcejtAwxz4/maxresdefault.jpg');
  height: 330px;
  width: 600px;
  margin-bottom: 50px;
}

/* Hide Play button + controls on iOS */
video::-webkit-media-controls {
display:none !important;
}




#contacto {  width: 100%; height: 100vh; padding: 75px 0 ; color: #fff;  font-size: 14px !important; position: relative; z-index: 10; }
#contacto a { color: #fff; font-weight: 600; }
#contacto p { font-size: 18px;}
#contacto a > img { margin-left: -90px; }
#contacto h3 { color: #a3a3a4; font-size:  99px; line-height: 66px; margin: 50px 0px 50px -30px !important; }

#contacto .ubicacion { padding-right: 60px; background: url(img/tack.png) no-repeat top right; padding-bottom: 15px; font-weight: 400; }
#contacto .whats { padding-right: 60px; background: url(img/whats.png) no-repeat top right;  padding-bottom: 15px; font-weight: 400; padding-top: 7px; margin-bottom: 10px;}
#contacto .mail { padding-right: 60px; background: url(img/mail.png) no-repeat top right; padding-bottom: 15px; font-weight: 400; }

form { margin-top: 120px; }
input { width: 100%; height: 40px; line-height: 40px; color:#fff; border: #d82038 solid 2px; background: none; padding-left: 10px;text-align: left; margin-bottom: 10px; }
input[type="submit"] { width: 100%; height: 40px; line-height: 4px; color:#fff; border: #d82038 solid 2px; background: #d82038; }

#proceso { width: 100%; height: auto; padding: 75px; position: relative; background: url(img/proceso.jpg) no-repeat ; background-size: cover; }
#proceso .container { position: relative; z-index: 99; }
#proceso .pattern { background:rgba(0,0,0,.6) url(img/pattern1.png) repeat; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5;  }

#proceso h2 { font-size: 34px; text-align: center; text-transform: uppercase; margin: 50px auto; font-weight: 600; }
#proceso h3 { color: #da1e36; font-weight: 500; }
#proceso p { font-size: 18px; color: #fff; font-weight: 200; }

#proceso3 { width: 100%; height: auto; padding: 75px; position: relative; background: url(img/proceso.jpg) no-repeat ; background-size: cover; color: #fff; font-weight: 400; }
#proceso3 h2 { font-size: 6.2vh; text-align: center; text-transform: uppercase; margin: 50px auto; font-weight: 800; color:#5fd356 ; }
#proceso3 h3 { color: #dee4de; font-weight: 700; font-size: 28px; border: #d52238 solid 2px; background: #d52238; border-radius: 45px; width: 300px; height: auto; padding: 10px 15px; margin: 0 auto; }
#proceso3 b { color: #e5f9cb; font-weight: 700; font-size: 22px; border-radius: 45px; padding: 5px 15px 8px 15px; display: block;  }
#proceso3 hr { width: 100%; margin: 85px auto; height: 1px; background: #bedfbc; }

.flecha_ { margin: 90px auto; display: block; }
.rojo {  color: #da1e36; }

.temperatura { padding-left: 90px;  height: 90px; position: relative; color: #c8c8c8; font-size: 28px; text-align: center; font-weight: 600; color: #fff;  }
.termo {  }
#proceso { }

.vaso1 { background-image: url(img/vaso1.jpg); background-repeat: no-repeat; background-position: center; background-color: #efefef; background-blend-mode: multiply; }
.vaso2 { background-image: url(img/vaso2.jpg); background-repeat: no-repeat; background-position: center; background-color: #efefef; background-blend-mode: multiply; }
.vaso3 { background-image: url(img/vaso3.jpg); background-repeat: no-repeat; background-position: center; background-color: #efefef; background-blend-mode: multiply; }
.vaso4 { background-image: url(img/vaso4.jpg); background-repeat: no-repeat; background-position: center; background-color: #efefef; background-blend-mode: multiply; }
.vaso5 { background-image: url(img/vaso5.jpg); background-repeat: no-repeat; background-position: center; background-color: #efefef; background-blend-mode: multiply; }
.vaso6 { background-image: url(img/vaso6.jpg); background-repeat: no-repeat; background-position: center; background-color: #efefef; background-blend-mode: multiply; }
.vaso7 { background-image: url(img/vaso7.jpg); background-repeat: no-repeat; background-position: center; background-color: #efefef; background-blend-mode: multiply; }
.vaso8 { background-image: url(img/vaso8.jpg); background-repeat: no-repeat; background-position: center; background-color: #efefef; background-blend-mode: multiply; }
.vaso9 { background-image: url(img/vaso9.jpg); background-repeat: no-repeat; background-position: center; background-color: #efefef; background-blend-mode: multiply; background-size: auto 100%; }


#vasos h4 { color: #365079 !important; font-size:  35px; line-height:  32px; font-weight: 200; position: relative; z-index: 10; margin-top: -65px;  margin-left: 10%; }
#vasos h4 > span {  font-size:  38px; display: block; font-weight: 800;  }
#vasos p { color: #073468 !important; font-size:  14px; line-height: 17px; text-transform: uppercase; font-weight: 400; width: 80%; margin-left: 10%;}
#vasos p > b { color: #9da7ba; font-size:  14px; line-height: 17px; text-transform: uppercase; font-weight: 800;}
#vasos hr {  margin: 20px 0; height: 3px;  width: 200px; background: #f39094; border-radius: 15%;   margin-left: 10%; }



.flickity-button {
position: absolute;
background: url('img/arrow.png') left center no-repeat !important;  background-size: 20px !important; transition:all 200ms ease !important; 
border: none;
color: #333;
}

.flickity-button:hover {
position: absolute;
background: url('img/arrow_.png') left center no-repeat  !important; background-size: 20px !important; transition:all 200ms ease !important; 
border: none;
color: #333;

}

.flickity-prev-next-button {
top: 50%;
width: 121px !important;
height: 86px  !important;
border-radius: 0%  !important;
transform: translateY(-50%);
}

.previous { transform: scaleX(-1) !important; margin-top: -43px; }
.arrow { opacity: 0; }
#clientes { width: 100%; height: auto; padding: 90px 0; background: pink;  background: url(img/clientes.jpg) no-repeat top center; background-size: cover;   }
.cliente { width: 15%; height: auto;  margin: 10px; padding: 5px; display: inline-block; vertical-align:  top; }
.active { color: #d82038; font-weight: 400; }
.carrillera .carousel-cell { width: auto; height: auto;  }
.carrillera .carousel-cell img {  mix-blend-mode: darken; opacity: .9; margin: 0 -5.5px; }
.esq1 { display: inline; }
.esq2 { display: none; }


.tresd { width: 100%; height: auto; padding: 70px 0  90px 0; margin-top: -40px; position: relative; color:#fff; background: url(img/fondotres.jpg) no-repeat top center; background-size: cover;   }
.tresd h2 { font-size: 46px; font-weight: 700; margin-top: !important; padding-top: 100px; }
.tresd p { font-size: 22px; font-weight: 300; }
.tresd .container { position: relative; z-index: 10; }
.tresd .pattern-b { width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: 1; background: url(img/botellas.png) ; opacity: .2; }

p { font-size: 16px !important; }
body { overflow-x: hidden; font-size: 16px !important; }







/* MEDIA QUERIES */ 

@media only screen and (max-width: 1024px) {
  .wrapper {margin: 0 auto;width: 1450px !important;padding: 0px; }
  #contacto h3 { font-size: 79px; }
  #productos h3 { font-size: 79px; }
  .rs { position: absolute; top: 35px; right: 20px; }
  footer { background:#fff url(img/footer.jpg) no-repeat; background-size: 70% auto ; background-position: top right;  width: 100%; height: auto; padding: 25px 0 ; color: #fff; border-top:#000 slid 3px; font-size: 14px !important; position: relative; z-index: 10; }
  ul li a { color: #fff;  font-size: 13px; line-height: 15px; text-transform: uppercase; font-weight: 400; }
}

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

ul.men-vas { background:rgba(0,0,0,0.5); padding: 7px 0 !important; width: 100%; text-align: left;   }
ul.men-vas li {padding: 0; display: inline-block; text-align: left;  margin: 0; padding: 0 7px; width: 290px;  margin-bottom: 10px;   }
ul.men-vas li a { font-size: 12px !important; line-height: 10px !important; color: #fff; text-align: center; margin: 5px 0;  }
ul.men-vas li a:hover { color: red; }
.col-glass { width: 45%; }
#contacto h3 { font-size: 60px; }
#productos h3 { font-size: 60px; }
.rs { position: absolute; top: 30px; right: 80px; }
ul li a { color: #fff;  font-size: 12px; line-height: 15px; text-transform: uppercase; font-weight: 400; }
.carousel {  background: ; height: 600px;  }
.carousel-cell {  width: 100%;  height: 600px;   margin-right: 10px;  /* center images in cells with flexbox */  display: flex;  align-items: center;  justify-content: center; padding-top: 90px; }
.carousel.is-fullscreen .carousel-cell {height: 600px;  }
.carousel br {  display: none; }
ul#menu_ { width: 100%; height: auto; padding-left: 19%; left: -100%; background: rgba(216,32,56, 0.9);
box-sizing: border-box; margin-top: 95px; position: absolute;  padding: 5%; text-align: center;  
transition:all 600ms ease !important; }
ul#menu_ li { display: block; list-style: none; margin:10px 9px;  }
ul#menu_ li a { color: #fff;  transition:all 150ms ease; font-size: 16px; font-weight: 600; }
ul#menu_ li a:hover { text-decoration: none; color: #3ea8a3; }
.submenu { display: none; }
#menu_ .sub { display: inline; width: 100%; height: auto; display: block; list-style: none; margin:10px 9px; background: #fff; color: rgba(216,32,56, 1); font-weight: 600; }
.listo { margin-left: 100%; }
.burger { display: ; position: absolute; top: 25px; right: 20px; color: #fff; cursor: pointer; display: inline; }
footer { background:#fff url(img/footer.jpg) no-repeat; background-size: auto 100% ; background-position: top right;  width: 100%; height: auto; padding: 75px 0 ; color: #fff; border-top:#000 slid 3px; font-size: 14px !important; position: relative; z-index: 10; }
#productos { width: 100%; height: auto; padding: 75px 0 ; color: #fff;  font-size: 14px !important; position: relative; z-index: 10; }
#productos h3 { color: #a3a3a4; font-size:  50px; line-height: 70px;  margin: 70px 0 30px 0; }
footer .logo-foo { background: #fff; width: 90%; margin-bottom: 50px; border-radius: 25px;  }
.txt1 { position: relative; margin-top: 50px; max-width: 320px; height: auto; font-size: 14px !important; line-height: 16px; font-weight: 400 !important; }
.txt2 { position: relative; right: 0; bottom: 0; max-width: 320px; height: auto; font-weight: 800 !important; color: #6be734 !important; text-transform: uppercase; }
.txt2 > b { font-weight: 800; color:#fff; } 
.nombre { font-weight: 800; font-size: 34px; display: block; margin-bottom: 20px; text-transform: uppercase; color: #fff;  } 
.vazzz { width: 70%; margin: 25px auto; }

}

@media only screen and (max-width: 780px) {
#productos { width: 100%; height: auto; padding: 75px 0 0 0; }
#productos h3 { color: #fff; font-size:  13px; line-height: 14px; font-weight: 600; text-align: left; padding: 10px; margin-top: -75px; background: rgba(0,0,0,0.7); position: relative; z-index: 25; }
#productos h3 > span { color: #fff; font-size:  13px;  font-weight: 200; display: block; padding-left: 10%; }
.col-xs-4 {  width: 33%; }

#nosotros h3 {
color: #fff;
font-weight: 600;
font-size: 80px;
line-height: 140px;
margin: 110px 0 30px 0;
}

.biode h2 {
color: #fff;
font-size: 33px;
letter-spacing: 2px;
font-weight: 600;
}

.biode h2 > span {
color: #fff;
font-size: 23px;
}

#proceso .col-sm-3 > img  { width: 70% !important ; padding-top: 50px; }
.bazo { width: 100%; }
#seleccion { overflow-x: hidden !important; }
#seleccion .carousel-nav {
height: 90% !important;
width: 60px;
margin-left: 90px !important;
margin-top: 10px; position: relative; 
}

.vaso-slide {background: url(img/vaso-gen.png) no-repeat center; height: 100vh;}
.vaso-slide2 {background: url(img/vaso1.png) no-repeat right center; height: 100vh;}
.vaso-slide3 {background: url(img/vaso-maiz.png) no-repeat left center; height: 100vh;}

  }

@media only screen and (max-width: 690px) {
footer .logo-foo { background: #fff; width: 50%; margin-bottom: 50px; border-radius: 25px;  }


.esq2 { display: inline; }
.esq1 { display: none; }

}

@media only screen and (max-width: 580px) {
video {   width: 320px; height: 320px; margin: 0 auto !important;  z-index: 9; opacity:0; transition:all 200ms ease; border-radius: 150%; border:#8dc63f solid 2px; }

a.logo > img { width: 150px; margin-top: 10px; }
footer ul  { margin-bottom: 50px !important; }
.carrillera { padding: 0 !important; }
.carrillera .carousel { margin-top: -50px !important;  }
.carrillera .carousel .carousel-cell {  margin-top: -90px !important; }
.carrillera .carousel .carousel-cell > img {  width: auto; }
.carousel-nav { display: none; }
#contacto { height: auto; padding: 90px 0;  }
#contacto h3 { font-size: 60px; margin: 50px 0px 50px 0px !important; }
.text-right { text-align: left !important; }
.materiales { width: 100%; height: auto; padding:70px 0; background: url(img/materiales.jpg) no-repeat center; background-size: cover; margin-top: -80px; position: relative; text-align: center; color: #fff; }
.remate_ { color: #fff; background: #da1e36; width: 95% !important; margin: 35px auto; height: auto;padding: 15px 25px;font-weight: 400;
border-radius: 50px; }
#materiales h3 {  color: #a3a3a4;
  font-size: 59px;  line-height: 66px;
  margin: 0px auto; font-weight: 600 !important;
}
.banca { width: 100%; }

#proceso .col-sm-4 { margin: 50px 0; }
#vasos h4 > span {
    font-size: 24px;
    display: block;
    font-weight: 800;
}

.vaso p br { display: inline !important; margin-bottom: 15px; }

#bio img {  }
.agave { display: none; }
#bio h2 {
color: #fff;
font-size: 40px;
text-align: center;
margin: 25px auto 55px auto;
text-transform: uppercase;
font-weight: 600;
}

#productos {
width: 100%;
height: auto;
padding: 75px 0;
color: #fff;
font-size: 14px !important;
position: relative;
z-index: 10;
background-image: none;
background-size: 65% auto;
background-position: 98% center;
}

#bio h2 > img {
   display: none;
}

.vazo { width: 60% !important; }
img.img-b { width: 60% !important; }

.ra h3 { font-size: 49px; text-align: center; margin-bottom: 50px;  }
.ra h3 span { margin-top: 10px; }

.materiales h3 { font-size: 49px; text-align: center;  }

/* .box:hover video { opacity: 1; } */
.logo-slide { opacity: 0; }
.img-a { margin-left:0px; }
.img-b { margin-left: 5px; }

.vazo { width: 100px; margin-left: 30px; }
.flickity-prev-next-button.previous {
display: none;
}

flickity-prev-next-button.next {
   margin-right: -30px;
}

#envase-personalizado {
background: #fff ;
width: 100%;
height: auto;
padding: 75px 0;
font-size: 14px !important;
position: relative;
z-index: 10;
}

#envase-personalizado h3 {
font-size: 50px; line-height: 55px;
}

#envase-personalizado a {
color: #c8c8c8 !important;
font-weight: 600;
margin-left: 100px;
}

.intro img { display: none; }
#seleccion .col-sm-6 { margin-top: -90px !important; }

#diseno h3 {
color: #a3a3a4;
font-size: 49px;
line-height: 46px;
margin: 210px 0 30px 0;
}

#realidad h3 {
color: #a3a3a4;
font-size: 49px;
line-height: 46px;
}

#seleccion h2 {
color: #b3b3b4;
font-size: 30px;
margin-top: 360px;
line-height: 60px;
}

.vaso-slide {background: none; height: 100vh;}
.vaso-slide2 {background:none; height: 100vh;}

#hacemos h3 br { display: none; }
#materia h3 { font-size: 50px; }

#proceso h2 {
font-size: 29px;
text-align: center;
text-transform: uppercase;
margin:50px 0 50px -50px;
font-weight: 600;
display: block;
width: 300px;
}

.quit { display: none; }

#proceso .col-sm-1 > img { -ms-transform: rotate(90deg); /* IE 9 */ 
  transform: rotate(90deg); margin: 0 auto; display: block;  } 
#proceso h1 { font-size: 30px !important; text-align: center;  width: 300px; margin:0 0 0 -30px !important;   }
.carousel-cell p {
font-size: 14px;
margin-left: 5px;
padding-left: 0px;
background: none;
}
#remate { height: auto; }
.links { display: none; }
.carousel-cell h1 {
font-size: 32px;
margin-bottom: 25px;
margin-left: 0px;
}

.flickity-prev-next-button.next {
right: -10px !important; margin-top: 100px;
}

#proceso h1 { margin:50px 0 50px -50px !important; }

.cliente { width: 25%; height: auto;  margin: 10px; padding: 5px; display: inline-block; vertical-align:  top; }


/* PRODUCTOS  */
#productos { width: 100%; height: auto; padding: 75px 0  25px 0 ; color: #fff; position: relative; z-index: 10;  background: url(img/productos.jpg) no-repeat center bottom ; margin-top: -90px; background-size: cover; border-bottom: #fff solid 3px;  }
#productos h3 { color: #fff; font-size:  13px; line-height: 14px; font-weight: 600; text-align: left; padding: 10px; margin-top: -75px; background: rgba(0,0,0,0.7); position: relative; z-index: 25; }
#productos h3 > span { color: #fff; font-size:  13px;  font-weight: 200; display: block; padding-left: 10%; }
.col-xs-4 {  width: 33%; }

.header-pro { width: 100%; height: auto; padding: 75px 0; background: #000 ; background-size: cover; }
.header-pro h2 { font-size: 4em; font-weight: 800; color: #fff; margin: 0 0 -20px 0; }
.header-pro .remate { background: none;  font-weight: 400; color: #fff; text-transform: uppercase;  font-size: 2em; border: none;  margin: 0; }
.header-pro p { font-weight: 300; color: #fff; max-width: 650px; padding-left: 0px; background: none; }
.header-pro { }
#proceso3 br { display: inline; } 
#proceso3 .text-center { margin-bottom: 50px; } 

.tu { margin-top: 350px !important; }
.carousel, .carousel-cell { height: 750px; }
ul.men-vas { margin: 0 0 0 -50px; padding: 0; }
ul.men-vas li {padding: 0; margin: 10px; display:block !important; text-align: left; width: 100%; }
ul.men-vas li a { font-size: 14px; line-height: 11px !important; color: #fff;  }
}


@media only screen and (max-width: 480px) {
ul.men-vas { background:rgba(0,0,0,0.5); padding: 7px 0; width: 100%; text-align: center;  }
ul.men-vas li {padding: 0; display:block !important; text-align: left; padding-left: 50px !important;  margin: 10px 0; padding: 0 7px;   }
ul.men-vas li a { font-size: 16px !important; line-height: 10px !important; color: #fff; text-align: center; margin: 5px 0;  }
ul.men-vas li a:hover { color: red; }
ul.men-vas li a > span { font-size: 90px; line-height: 10px !important; float: left; margin-top: -5px; }
.col-glass { width: 100%; display: inline-block; vertical-align: top; margin-right: 10px; }
#diseno h2 {
    color: #fff;
    font-size: 50px;
}
#nosotros h3 { font-size: 3.7em; text-align: center; }
}