@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:300,400,700|Roboto:300,400,700,900&display=swap');

.os-animation{opacity:0;}
.os-animation.animated{opacity:1;}


html,body{width:100%;height:100%;}
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#ffffff;z-index:9999;}
#loader2{width:217px;height:62px;position:absolute;left:50%;top:50%;background:url(../imagenes/logo.png) no-repeat center 0;margin-left:-85px;margin-top:-20px;}
*{
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
iframe{display:block;border:none;}


#slide1{text-align:center;width:100%; height:100%;min-height:700px;}
#slide1a{display:none;}

#clientes{ width:100%; text-align:center; background-color:#ffffff;  }
#pieses, #conocenosinfo, #productos, #promociones{ width:100%; text-align:center; background-color:#000000;  }
#piesesabajo{background:url(../imagenes/pie.jpg) repeat 50% 50% ;background-size:cover; text-align:center; width:100%; height:34px; }
#conocenos{background:url(../imagenes/conocenos.jpg) repeat 50% 50% fixed;background-size:cover; text-align:center; width:100%; height:500px; }
#mapa{text-align:center;width:100%; height:100%;min-height:500px;}

#elheader{ width:100%; height:80px; background-color: #000000; z-index:4; position:absolute; top:0px;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;}


#logo{POSITION:absolute;z-index:999;left:5%; margin-left:0px;top:17px;width:199px;height:46px;}
#logomovil{display: none;}

#flechon{ width:90%; max-width:1200px; text-align:center;bottom:50px;POSITION:relative;}


/* Overline Reveal */
.smooth {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden; line-height:80px; color:#ffffff; font-size:20px; font-weight:600;font-family: 'Roboto', sans-serif;
}
.smooth:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  height: 4px;
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.smooth:hover:before{
  -webkit-transform: translateY(0);
  transform: translateY(0);
}


.texto1{color:#ffffff;font-size:30px;line-height:140%;font-weight:700;font-family: 'Libre Baskerville', serif;}
.texto2{color:#ffffff;font-size:35px;line-height:140%; font-weight:700;font-family: 'Roboto', sans-serif;}
.texto3{color:#ffffff;font-size:15px; font-weight:600;font-family: 'Roboto', sans-serif; text-decoration:none;}
.texto4{color:#727275;font-size:22px; font-weight:600;font-family: 'Roboto', sans-serif; text-decoration:none;}
.texto5{color:#ffffff;font-size:34px; font-weight:600;font-family: 'Libre Baskerville', serif; line-height:140%;}
.texto6{color:#ffffff;font-size:18px; font-weight:600;font-family: 'Roboto', sans-serif;line-height:180%;}
.texto7{color:#ffffff;font-size:20px; font-weight:600;font-family: 'Roboto', sans-serif;line-height:15px; background-color:#000000; padding-left:10px; padding-right:10px;}
.texto7a{color:#727275;font-size:17px; font-weight:600;font-family: 'Roboto', sans-serif;line-height:140%;}
.texto8{color:#000000;font-size:17px; font-weight:600;font-family: 'Roboto', sans-serif;}
.texto9{color:#000000;font-size:13px; font-weight:600;font-family: 'Roboto', sans-serif; text-decoration:none;}
.texto10{color:#ffffff;font-size:40px; font-weight:600;font-family: 'Roboto', sans-serif; text-decoration:none;}


#subtitulo{ width:90%; max-width:1200px; height:15px; background:url(../productos/lali.png);}

#arriba, #arriba1,#arriba2{display:inline-block;vertical-align:top;}
#arriba{width:90%; vertical-align:middle; text-align:right; }
#arriba1{width:700px;margin-right:0px; text-align:left;}

#pies, #pies1,#pies2,#pies3,#pies4,#pies5{display:inline-block;vertical-align:top;}
#pies{width:1200px;vertical-align:middle; text-align:left; }
#pies1{width:350px;margin-right:-4px; text-align:left;}
#pies2{width:200px;margin-right:-4px; text-align:left;}
#pies3{width:25px;margin-right:-4px; text-align:left;}
#pies4{width:400px;margin-right:-4px; text-align:left;}
#pies5{width:225px;margin-right:-4px; text-align:left;}


.forma{background-color:#171717; border:1; border-color:#171717;text-align:left;HEIGHT:50px;width:100%; font-size:17PX;color:#ffffff;font-weight:400;font-family: 'Roboto', sans-serif; padding-left:20px;}

.boton1{background-color:#ffffff;text-align:center;HEIGHT:47px;width:152px;border:0;font-size:17PX;color:#000000;cursor:pointer; text-transform:uppercase; }

#conos{ width:90%; max-width:1200px; text-align:left;}
#conos2{ width:100%; max-width:660px; text-align:justify;}

#loscuadros{ width:187px; height:187px; position:absolute; left:0; top:244px; background:url(../imagenes/cuadrito.png); opacity:1;}

#conoce, #conoce1,#conoce2,#conoce3{display:inline-block;vertical-align:top;}
#conoce{width:1200px;vertical-align:middle; text-align:left; }
#conoce1{width:600px;margin-right:-4px; text-align:left;}
#conoce2{width:80px;margin-right:-4px; text-align:left;}
#conoce3{width:520px;margin-right:-4px; text-align:left;}


#contacta, #contacta1,#contacta2{display:inline-block;vertical-align:top;}
#contacta{width:100%;vertical-align:middle; text-align:left;background-color:#000000 }
#contacta1{width:50%;margin-right:-4px; text-align:left; ;}
#contacta2{width:50%;margin-right:-4px; text-align:left;background:url(../imagenes/contacto.jpg) repeat 50% 50% ;background-size:cover; min-height:900px; }

#contactame{ width:80%; max-width:580px; text-align:left; text-align:justify;}


#cuadro, #cuadro1,#cuadro2,#cuadro3,#cuadro4,#cuadro0{display:inline-block;vertical-align:top;}
#cuadro{width:100%;vertical-align:middle; text-align:left; }
#cuadro1{width:100%;margin-right:0px; text-align:left;}
#cuadro2{width:55%;margin-right:-4px; text-align:left;}
#cuadro3{width:37%;margin-right:-4px; text-align:left;}
#cuadro4{width:28%;margin-right:-4px; text-align:left;}
#cuadro0{width:8%;margin-right:-4px; text-align:left;}


#direccion, #direccion1, #direccion2{display:inline-block;vertical-align:top;}
#direccion{width:100%;vertical-align:middle; text-align:left; }
#direccion1{width:50%;margin-right:-4px; text-align:left;}
#direccion2{width:50%;margin-right:-4px; text-align:right;}

#menuprodos, #menuprodos1, #menuprodos1a, #menuprodos1b, #menuprodos1c, #menuprodos1d,#menuprodos2{display:inline-block;vertical-align:top;}
#menuprodos{width:1200px;vertical-align:middle; text-align:left; }
#menuprodos1{width:200px;margin-right:-4px; text-align:left; height:60px;}
#menuprodos1a{width:200px;margin-right:-4px; text-align:center; height:60px;}
#menuprodos1b{width:200px;margin-right:-4px; text-align:center; height:60px;}
#menuprodos1c{width:200px;margin-right:-4px; text-align:center; height:60px;}
#menuprodos1d{width:200px;margin-right:-4px; text-align:right; height:60px;}
#menuprodos2{width:50px;margin-right:-4px; text-align:center;}

#losprodos, #losprodos1{display:inline-block;vertical-align:top;}
#losprodos{width:1200px; vertical-align:middle; text-align:LEFT; }
#losprodos1{width:300px;margin-right:-4px; text-align:left; height:445px;}

#redes{ position:fixed; top:50%; margin-top:-117px; left:0; width:45px; height:235px; z-index:99;}

.promos{ width:1144px; height:1000px; text-align:left; text-align:justify;}

#inspi, #inspi1{display:inline-block;vertical-align:top;}
#inspi{width:1200px;vertical-align:middle; text-align:left; }
#inspi1{width:400px;margin-right:-4px; text-align:center;}

.limas{ width:95%;}

@media screen and (max-width:1400px){
#loscuadros{ opacity:.2;}
}



@media screen and (max-width:1220px){
#menuprodos{width:1000px;vertical-align:middle; text-align:left; }
#menuprodos1{width:180px;margin-right:-4px; text-align:left; height:60px;}
#menuprodos1a{width:180px;margin-right:-4px; text-align:center; height:60px;}
#menuprodos1b{width:180px;margin-right:-4px; text-align:center; height:60px;}
#menuprodos1c{width:180px;margin-right:-4px; text-align:center; height:60px;}
#menuprodos1d{width:180px;margin-right:-4px; text-align:right; height:60px;}
#menuprodos2{width:20px;margin-right:-4px; text-align:center;}
}

@media screen and (max-width:1210px){
#inspi{width:800px;vertical-align:middle; text-align:left; }

.promos{ width:800px; height:699px; text-align:left; text-align:justify;}

#losprodos{width:900px; vertical-align:middle; text-align:LEFT; }

#pies{width:725px;vertical-align:middle; text-align:left; }
#pies1{width:200px;margin-right:-4px; text-align:left;}
#pies2{width:200px;margin-right:-4px; text-align:left;}
#pies3{width:25px;margin-right:-4px; text-align:left;}
#pies4{width:300px;margin-right:-4px; text-align:left;}
#pies5{width:100%;margin-right:0px; text-align:center;}

#conoce{width:90%;vertical-align:middle; text-align:left; }
#conoce1{width:100%;margin-right:0px; text-align:left;}
#conoce2{ display:none;}
#conoce3{width:100%;margin-right:0px; text-align:left;}#direccion1{width:100%;margin-right:0px; text-align:left;}
#direccion2{width:100%;margin-right:0px; text-align:left;}
}

@media screen and (max-width:1020px){
	#menuprodos{width:90%;vertical-align:middle; text-align:left; }
#menuprodos1{width:33%;margin-right:-4px; text-align:center; height:80px;}
#menuprodos1a{width:33%;margin-right:-4px; text-align:center; height:80px;}
#menuprodos1b{width:33%;margin-right:-4px; text-align:center; height:80px;}
#menuprodos1c{width:33%;margin-right:-4px; text-align:center; height:80px;}
#menuprodos1d{width:33%;margin-right:-4px; text-align:center; height:80px;}
#menuprodos2{ display:none;}

}

@media screen and (max-width:900px){
#cuadro2{width:100%;margin-right:0px; text-align:left;}
#cuadro3{width:100%;margin-right:0px; text-align:left;}
#cuadro4{width:100%;margin-right:0px; text-align:left;}
#cuadro0{width:100%;margin-right:0px; text-align:left;}

#contacta1{width:100%;margin-right:0px; text-align:left;}
#contacta2{ display:none;}



#losprodos{width:600px;vertical-align:middle; text-align:CENTER; }

#slide1{ display:none;}
#slide1a{text-align:center;width:100%;height:600px; display:block;}

}


@media screen and (max-width:800px){
#inspi{width:404px;vertical-align:middle; text-align:left; }
}

@media screen and (max-width:800px){
.promos{ width:660px; height:577px; text-align:left; text-align:justify;}
}

@media screen and (max-width:740px){
#pies{width:90%;vertical-align:middle; text-align:center; }
#pies1{width:100%;margin-right:0px; text-align:center;}
#pies2{width:100%;margin-right:0px; text-align:center;height:50px;}
#pies3{ display:none;}
#pies4{width:200px;margin-right:0px; text-align:center; height:50px;}
#pies5{width:100%;margin-right:0px; text-align:center;}

#conocenos{background:url(../imagenes/conocenos.jpg) repeat 50% 50% ;background-size:cover; text-align:center; width:100%; height:610px; }

#menuprodos{width:90%;vertical-align:middle; text-align:left; }
#menuprodos1{width:100%;margin-right:0px; text-align:center; height:80px;}
#menuprodos1a{width:100%;margin-right:0px; text-align:center; height:80px;}
#menuprodos1b{width:100%;margin-right:0px; text-align:center; height:80px;}
#menuprodos1c{width:100%;margin-right:0px; text-align:center; height:80px;}
#menuprodos1d{width:100%;margin-right:0px; text-align:center; height:80px;}

}

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

#losprodos{width:300px; vertical-align:middle; text-align:CENTER; }

.promos{ width:450px; height:393px; text-align:left; text-align:justify;}

}

@-moz-keyframes spin {
    0% {
opacity: 1;   -moz-transform: translateY(-5px); }

    100% {
opacity: 1;  -moz-transform: translateY(5px);   }
}



@-webkit-keyframes spin {
    0% {
opacity: 1; -webkit-transform: translateY(-5px); }

    100% {
opacity: 1; -webkit-transform: translateY(5px); }  
}

.ball{-moz-animation:spin 1.5s infinite linear;-webkit-animation:spin 1.5s infinite linear;-0-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear;}
.ball2{-moz-animation:spin2 1.5s infinite linear;-webkit-animation:spin2 1.5s infinite linear;-0-animation:spin2 1.5s infinite linear;animation:spin2 1.5s infinite linear;}
@-moz-keyframes spin2{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(-6px);}
}
@-webkit-keyframes spin2{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(-6px);}
}
@-o-keyframes spin2{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(-6px);}
}
@-moz-keyframes spin2{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(6px);}
}
@-webkit-keyframes spin{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(6px);}
}
@-o-keyframes spin{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(6px);}
}
.flecha3{-moz-animation:spin3 1.5s infinite linear;-webkit-animation:spin3 1.5s infinite linear;-0-animation:spin3 1.5s infinite linear;animation:spin3 1.5s infinite linear;}
@-moz-keyframes spin3{0%{opacity:01;}
100%{opacity:1;-moz-transform:translateY(6px);}
}
@-webkit-keyframes spin3{0%{opacity:1;}
100%{opacity:1;-webkit-transform:translateY(6px);}
}
@-o-keyframes spin3{0%{opacity:1;}
100%{opacity:1;-0-transform:translateY(6px);}
}


#menumovil{ display:none;}
.button_container {
  position: absolute;
  top: 0px;;
  right: 0px;
  height: 0px;
  width: 35px;
  cursor: pointer;
  z-index: 9999;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  transition: opacity .25s ease;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
  -moz-transform: translateY(11px) translateX(0) rotate(45deg);
          transform: translateY(11px) translateX(0) rotate(45deg);
  background: #FFF;
}
.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-11px) translateX(0) rotate(-45deg);
          transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #FFF;
}
.button_container span {
  background: #ffffff;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;z-index: 9999;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay {
  position: fixed;
  background-color:#000000;
    top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  -moz-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
  -moz-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
  -moz-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
  -moz-animation-delay: .4s;
          animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
  -moz-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
  -moz-animation-delay: .50s;
          animation-delay: .50s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  -webkit-transform: translateY(-35%);
  -moz-transform: translateY(-35%);
          transform: translateY(-35%);
  
  font-weight: 900;
  text-align: right;
  margin-right:52px;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  min-height: 70px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
  font-size: 40px;font-family: 'Roboto', sans-serif;
  opacity:1; text-transform:uppercase; line-height:100%;
}
.overlay ul li a:hover,a:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;font-size: 45px;
  opacity:1;-webkit-transition: .25s;
  transition: .25s;color:# 9F9F9F;
}
.overlay ul li a:after {
  font-size: 55px;
  opacity:.9;-webkit-transition: .25s;
  transition: .25s;
  
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}


@media screen and (max-width:1040px){
#logo{POSITION:absolute;z-index:999;left:5%; margin-left:0px;top:17px;width:199px;height:46px;}

#arriba{width:90%;vertical-align:middle; text-align:left; }
#arriba1{display:none;}

#menumovil{ z-index:9999;position: absolute;top: 30px;
  right: 30px;
  height: 27px;
  width: 35px; display:block;}
}






@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 7));
            transform: translateX(calc(-250px * 7));
  }
}

@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 7));
            transform: translateX(calc(-250px * 7));
  }
}
.slider {
  background: white;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width:1200px;
}
.slider::before, .slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 100px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 18);
}
.slider .slide {
  width: 250px;
}