@font-face { font-family: 'DIN Alternate Bold'; font-style: normal; font-weight: normal; src: local('DIN Alternate Bold'), url('DINAlternate-Bold.woff') format('woff'); }
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
html, body { width: 100%; height: auto; margin: 0; overflow-x: hidden !important; font-family: 'Roboto', sans-serif; font-weight: 400; overflow-x: hidden !important; background: #f1f2f4; }
section { width: 100%; height: auto; position: relative; padding: 75px 0; } 
header { width: 100%; height: 90px; position: fixed; z-index: 20; padding-top: 10px; text-align: left; background: none ; }
footer { width: 100%; min-height: 800px; background:#000 url(img/footer.jpg) no-repeat left top; background-size: auto 100%; position: relative; color:#fff; padding: 75px 0;  }
footer a { display: block; margin-bottom: 10px; color: #fff;  }
a { color: #fff !important;  }
body {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

@keyframes fadein { from { opacity:0; } to { opacity:1;} }
@-moz-keyframes fadein { /* Firefox */ from { opacity:0; } to { opacity:1;} }
@-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1;} }
@-o-keyframes fadein { /* Opera */ from { opacity:0; } to { opacity:1;} }

h1, h2, h3 {  /*font-size: 6.5vw;*/ font-family: 'DIN Alternate Bold', sans-serif; }
.header-alt { transition: all 0.5s;  width: 100%; height: 90px; position: fixed; z-index: 20; padding-top: 10px; text-align: left; background: rgba(0,0,0,0.7); }
.head { width: 100%; height: auto; padding:75px 0 50px 0; font-family: 'DIN Alternate Bold', sans-serif; background: url(img/header.jpg) no-repeat center;  background-size: cover; color: #fff; font-size: 7.7vh; line-height: 7.7vh;  }
.btnn { opacity: 0; position: absolute; top: 35px; right: 1%; color: #c2832b; transition: all 0.5s; }
.activve { opacity: 1 !important; right: 98px;}
.rs { position: fixed; right: 50px; bottom: 20px; text-align: center; width: 30px; height: auto; z-index: 99; }
.rs a img{ margin: 5px 0;  }
.logo { position: absolute; left:5%; top: 20px; filter: grayscale(100%); opacity:.25 !important; transition: all 0.5s; }
.logo_ {position: absolute; left:5%; top: 20px;  filter: grayscale(0%); opacity:1 !important; }
.btn_ { position: absolute; right:20px; top: 7px; z-index: 999; cursor: pointer; }
.gira { transform: rotate(180deg); }
ul.menu { width: 100px; padding:0; height: auto; position: absolute; right:10px; top: -290px; text-align: center; transition:all 400ms ease; z-index: 99; }
ul.menu img { width: 100%; }
ul.menu li { padding:0; margin:0; list-style: none; }
ul.menu li a { width: 100%; height: auto; padding:5px 10px; transition: all 0.5s; margin:0; display: block; color: #868686 !important; font-family: 'DIN Alternate Bold', sans-serif }
ul.menu li a:hover { color:#fff; background: #000; text-decoration: none; }
.main { margin-top: 380px; } 

.dorado { color:#c2832b !important; }

.inicio { padding-top: 110px !important; }
.inicio p { text-align: left; font-size: 16px; }
.logo-intro { margin-left: -105px; }

.calidad { background: url(img/vaca.jpg) no-repeat; background-position: -200px 0;  background-size: cover; color: #fff;  }
.calidad h2 { text-transform: uppercase; color: #c2832b; font-size: 30px; margin-top: 120px; }
.flecha-cow { margin-left: -180px; }
p.big { font-size: 16.5px; margin:25px 0; line-height:28px ;  }

.productos { background:#010102 url(img/tarima.jpg) no-repeat center bottom; position: relative;  background-size: 100% auto; color: #fff;  }
.box { border:rgba(193, 129, 30,.2) solid 1px; position: relative; border-radius: 25px; text-align: center; width: 286px; height: 343px; display: inline-block; margin:37px 25px ; background: url(img/star.png) no-repeat right bottom;   } 
.box h3 { color: #c2832b; font-size:20px; }
a.mas { background: rgba(193, 129, 30,1); border-radius: 30px; color: #fff; padding:5px 20px; position: absolute; bottom:-15px; left: 50%; margin-left: -55px; transition: all 0.5s;  }
a.mas:hover { color: #c2832b !important; text-decoration: none;  border-radius: 0px; background: #fff !important; padding:5px 30px; position: absolute; bottom:-15px; left: 50%; margin-left: -65px; }

.q { margin:-40px auto 20px auto;  }
.remate { padding-left:35px; margin:80px 0 40px 0; }
.txt1 { font-size: 22px; margin-bottom: 35px;  }
.txt2 { font-size: 16.6px; margin-bottom: 35px;  }
.lechera { position: absolute; bottom: -150px; right: 75px; max-width: 50%; }

.muestra { padding: 25px; background: url(img/sombra.png) no-repeat center bottom; background-size: 80% auto;  }
.muestra img { margin-bottom: 30px; }

.enchilado { padding: 90px 0 0 90px; background: url(img/enchilado.jpg) no-repeat center; background-size:cover;  }
.panela { padding: 90px 0 0 90px; background: url(img/panela.jpg) no-repeat center; background-size:cover;  }
.asadero { padding: 90px 0 0 90px; background: url(img/asadero.jpg) no-repeat center; background-size:cover;  }
.chihuahua { padding: 90px 0 0 90px; background: url(img/chihuahua.jpg) no-repeat center; background-size:cover;  }
.fresco { padding: 90px 0 0 90px; background: url(img/fresco.jpg) no-repeat center; background-size:cover;  }
.descriptivo p { max-width:380px; margin-bottom: 30px; font-size: 14px; color: #fff; }
.descriptivo h3 { font-size: 18px; color:#c2832b; font-family: 'DIN Alternate Bold', sans-serif; text-transform: uppercase; margin:30px 0; }
.descriptivo a { font-size: 18px; color:#c2832b; position: relative; transition: all 0.05s; font-family: 'DIN Alternate Bold', sans-serif; text-transform: uppercase; margin:30px 0; line-height: 50px;  }
.descriptivo a:hover { color: #fff; text-decoration: none; }
.descriptivo a:hover > img { margin-right: -5px !important; }
.descriptivo .pres { font-weight: 100; color:#fff; }
.descriptivo .pres b { font-weight: 800; color:#fff; }

.newsletter { width: 100%; height: auto; padding:60px 0 30px 0;  }
.newsletter .email { border: #000 solid 1px; background: none; width: 60%; height: 55px; line-height: 55px; margin-right: -10px;  }
.newsletter .submit1 { border: #000 solid 1px; background: #000; width: 35%; color:#c2832b; font-size: 15px; padding:0 10px;  line-height: 55px; height: 55px; font-family: 'DIN Alternate Bold', sans-serif;  }
.licencia { width: 100%; height: auto; background: url(img/licencia.jpg) no-repeat center; background-size: cover; position: relative; color:#fff; padding: 15px 0;  }

.logo-foo { margin-top: -130px; }
input:focus, textarea:focus, select:focus{ outline: none; }
.form { width: 100%; height: auto; padding:50px; border-top:#c2832b solid 1px ; border-bottom:#c2832b solid 1px ; backdrop-filter: blur(10px);  
  -webkit-backdrop-filter: blur(10px); border-left:#c2832b solid 1px ; margin-right: -50px; background-color: rgba(0,0,0,.7);   }
  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff; opacity: .4;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff; opacity: .4;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff; opacity: .4;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff; opacity: .4;
}
form.form h2 { font-size: 7.7vh; line-height: 7.7vh; }
form.form h2 { font-size: 7.7vh; line-height: 7.7vh; }
form.form > input { border-radius: 25px; border:#c2832b solid 1px; color: #fff; background: none; margin-bottom: 10px; width: 50%; font-weight: 100; height:36px ; margin-left: 20px; padding: 0 10px; } 
form.form > input[type="submit"] { border-radius: 25px; border:#c2832b solid 1px; background: #c2832b  !important; font-weight: 500 !important; letter-spacing: 1px; width: 20%; height:36px ; margin-left: 20px; padding: 0 10px; display: block; } 

.tel {  background: url(img/q1.png) no-repeat ; }
.mail {  background: url(img/q2.png) no-repeat ; }
.tel, .mail {  display: inline-block; margin-right: 25px; height: 45px; line-height: 45px; background-size: auto 100%;  background-position: center left; font-weight: 100 !important; font-size: 20px; padding-left: 65px; }
.loca { width: 100%; padding-left: 50px; }
.loca h3 { font-size:18px; font-family: 'DIN Alternate Bold', sans-serif; margin: 40px 0 10px 0; color: #c1811e; }
.loca a {  display: inline-block; float: right; transition: all 0.05s;  }
.loca a:hover {  margin-right: -5px !important; }
.loca p { position: relative; max-width: 330px; }
.mark { position: absolute; margin-left: -35px; margin-top: -5px; background: none; }

h4.entregas { text-align: left; position: relative; width: 100px; font-family: 'Roboto', sans-serif; font-size: 23.5px; margin: 440px auto 0 175px;  }
.flecha { position: absolute; z-index: 10; margin-top:-180px; margin-left:50px; }

.video-ver { cursor:pointer; }
.video1 { position: absolute; top: 0; left: 0;  opacity: 1; z-index: -5;  }
.ver { opacity: 1; z-index: 999; }
.ver-cerrar-video { position: absolute; top: 0; right: 0;  opacity: 0;  z-index: -5;  }
.ver-cerrar-video_ { z-index: 9999;  opacity: 1; }
.icon-vid { width: 45%; margin-top: 15px; }
.san { display: block; font-weight: 800; font-size: 55px; text-align: center; }


.popup { width: 95%; height: auto; padding: 10%; border:none; background: #282727; position: absolute; top:0; z-index: 999999; color: #fff;  }
.popup input { width: 80%; height: 30px; line-height: 30px; padding: 0 10px; text-align: left; border: #fff solid 1px;  }
.popup p { font-weight: 600; margin-bottom: 15px; font-size: 18px; }

.modal-dialog { padding-top: 13vh !important;  }


.gallery {
  width: 100%;
  margin: auto;
  overflow: hidden;
  margin-bottom: -100px; 
}

.img-c {
  width: 100px;
  height: 100px;
  float: left;
  position: relative;
  overflow: hidden;
  margin:2px; 
}

.img-w {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform ease-in-out 300ms;
  cursor: url('img/cerrar.png'), auto !important;  
}

.img-w img {
  display: none;
}

.img-c {
  transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}

.img-c:hover .img-w {
  transform: scale(1.08);
  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
  cursor: url('img/cerrar.png'), auto !important;  
}

.img-c.active {
  width: 90% !important;
  height: 90% !important;
  margin:3% 5%;
  position: fixed;
  z-index: 2;
  
}

.img-c.postactive {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.img-c.active.positioned {
  left: 0 !important;
  top: 0 !important;
  transition-delay: 20ms;
}


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

}



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


  }



@media only screen and (max-width: 580px) {
    .box { border:rgba(193, 129, 30,.2) solid 1px; position: relative; border-radius: 25px; text-align: center; width: 286px; height: 343px; display: inline-block; margin:37px 25px ; background: url(img/star.png) no-repeat right bottom; margin: 55px auto;  } 

.calidad br { display: none; }
.calidad img { margin-bottom: 15px;}
.calidad .text-right, .calidad .text-center { text-align: left !important; }
.rs { position: fixed; right: 20px; bottom: 20px; text-align: center; width: 30px; height: auto; z-index: 99; }
.quita, .logo-foo, .flecha, .flecha-cow { display: none; }
h4.entregas { text-align: left; position: relative; width: 100px; font-family: 'Roboto', sans-serif; font-size: 33.5px; margin: 0px auto 80px 0;  }
h4.entregas > br { display: none !important; } 
form.form > input { border-radius: 25px; border:#c2832b solid 1px; color: #fff; background: none; margin-bottom: 10px; width: 90%; font-weight: 100; height:36px ; margin-left: 0px; padding: 0 10px; } 
form.form > input[type="submit"] { border-radius: 25px; border:#c2832b solid 1px; background: #c2832b  !important; font-weight: 500 !important; letter-spacing: 1px; width: 90%; height:36px ; margin-left: 0px; padding: 0 10px; display: block; } 
.tel, .mail { margin-bottom: 35px; }
.head { width: 100%; height: auto; padding:125px 0 50px 0; font-family: 'DIN Alternate Bold', sans-serif; background: url(img/header.jpg) no-repeat center;  background-size: cover; color: #fff; font-size: 7.7vh; line-height: 7.7vh;  }
.form {  padding:3% ; border:#c2832b solid 1px ;  }

.enchilado { padding: 90px 0 0 3%; background: url(img/enchilado.jpg) no-repeat center; background-size:cover;  }
.panela { padding: 90px 0 0 3%; background: url(img/panela.jpg) no-repeat center; background-size:cover;  }
.asadero { padding: 90px 0 0 3%; background: url(img/asadero.jpg) no-repeat center; background-size:cover;  }
.chihuahua { padding: 90px 0 0 3%; background: url(img/chihuahua.jpg) no-repeat center; background-size:cover;  }
.fresco { padding: 90px 0 0 3%; background: url(img/fresco.jpg) no-repeat center; background-size:cover;  }
.descriptivo p { max-width:85%; margin-bottom: 30px; font-size: 14px; color: #fff; }
.loca p { position: relative; max-width: 250px; position: relative; }
.loca a >  img { position: absolute; right: -20px; top: 0px;   }
.newsletter { width: 100%; height: auto; padding:20px 0 30px 5%;  }
.newsletter .email { border: #000 solid 1px; background: none; width: 50%; height: 55px; line-height: 55px; margin-right: -10px;  }
.newsletter .submit1 { border: #000 solid 1px; background: #000; width: 50%; color:#c2832b; font-size: 12px; padding:0 10px;  line-height: 55px; height: 55px; font-family: 'DIN Alternate Bold', sans-serif;  }
.licencia { width: 100%; height: auto; background: url(img/licencia.jpg) no-repeat left center; background-size: cover; position: relative; color:#fff; padding: 15px 0;  }
.licencia { padding-left: 5%; }
.licencia img { width: 100px; }
.lechera { position: absolute; bottom: -150px; right: 75px; max-width: 35%; }
}

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

  }