html, body { width: 100%; height: auto; margin: 0; overflow-x: hidden !important; overflow-x: hidden !important; font-family: 'cabinregular' !important; color: #fff; }
/* html { scroll-behavior: smooth; } */
body { animation: fadein 2s;  -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ -o-animation: fadein 2s; /* Opera */ background: #030101; overflow-x: hidden;  }
/*
@keyframes fadein { from { opacity:0; } to { opacity: 1;} } 
@-moz-keyframes fadein { from { opacity:0; } to { opacity: 1;} }
@-webkit-keyframes fadein {  from { opacity:0; } to { opacity: 1;} }
@-o-keyframes fadein { from { opacity:0; } to { opacity: 1;} }
*/

section { width: 100%; height: 100vh; position: relative; padding: 75px 0; font-family:'' } 
.receta { color: #a3810b; font-family: 'mansalvaregular', sans-serif; font-weight: 800; margin-top: 35px; display: block; font-size: 18px !important;  }
.receta:hover { color: #fff; text-decoration: none;  }
.nuestros { position: absolute; z-index: 45; top: 35px; right: 140px; cursor: pointer; width: 170px; }
.noscroll { overflow: hidden; }
header { width: 100%; height: 70px; position: fixed; z-index: 99999 !important; padding-top: 10px; text-align: left; -webkit-filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, .9)); filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, .9)); }
footer { width: 100%; height: auto;  position: relative; color:#ffbe00; font-size: 11.5px; letter-spacing: 1px; line-height: 16px; padding: 60px 0;  border-bottom:#8e700a solid 5px ; background: #000 url(img/foo_.jpg) no-repeat right bottom; background-size:auto 80%;  z-index: 999; }
footer ul { padding:0; margin:0; text-align: left !important; }
footer ul li { list-style: none; margin:0 0 8px 0; padding:0; letter-spacing: 1px; position: relative;  }
footer ul li a { list-style: none; font-size: 10px; margin:0 0 -5px 0; color: #fff; text-decoration: none !important;  }
footer ul li a.nuestros { list-style: none; font-size: 10px; margin:0 0 -5px 0 !important; color: #fff; position: relative !important; z-index: 1; top: 5px; right: 0;  }
footer ul li a:hover { color: #a3810b; text-decoration: none; }
a, button { cursor: pointer; outline: none; }
 img, p, a, h1, h2, h3 ,h4 ,h5 { transition:all 200ms ease; font-family: 'cabinregular' !important;  }
h1, h2, h3 ,h4 ,h5 { font-family: 'mansalvaregular', sans-serif !important; font-weight: 800; letter-spacing: .5px; }
p { font-family: 'cabinregular' !important; position: relative; width: auto !important; padding:0 2%; font-family: 'cabinregular' !important;   }
b { font-family: 'cabinsemibold' !important; }
.b1 { color: #a3810b; font-family: 'kaleko_105thin'; font-size: 103px; position: absolute; left: -10px; top: -50%; }
.b2 { color: #a3810b; font-family: 'kaleko_105thin'; font-size: 103px; position: absolute; right: -10px; top: -50%; }
.top { position: fixed; z-index: 99998 !important; height: 140px; top: -140px; left: 0; width: 100%;  }
.top_ { position: fixed; z-index: 99998 !important; height: 140px; top: 0; left: 0; width: 100%;  }

.romero { position: absolute; top: 50%; left: -50px; width: 27% !important; } 
.cara { position: relative; margin-left:-5% ; }
.bra { position: absolute; top:0px ; left: 0px; font-size: 16vh !important; }
.separa { background: #fff; opacity: .5; width: 50%; height: .5px !important; margin: 25px auto; }

.topp { position: absolute; z-index: 1 !important; height: 140px; top: 0; left: 0; width: 100%;  }
.btn { display: inline-block; vertical-align: bottom; width: auto; color: #fff; font-family: 'cabinmedium'; letter-spacing:.5px; }
footer a.btn { display: inline-block; vertical-align: bottom; width: auto; color: #fff;  letter-spacing:.5px;  font-size: 11.5px !important;  }
object { width: 100%; height: 500px; }
embed { width: 100%; height: 500px; }
ul.menuu { width: 100%; height: 70px !important;  line-height: 60px !important; padding:0; position: absolute; padding-left: 210px; top: 0; left:0; background:none; transition:all 400ms ease; z-index: 99; }
ul.menuu li { padding:0 0 0 10px; margin:0; list-style: none; font-size: 18px;  display: inline-block;  }
ul.menuu li a { width: 100%; height: auto; transition: all 0.3s; margin:5px 0 0 0; display: block; color: #000;  }
ul.menuu li a:hover { color:#ffbe00; text-decoration: none; }
.gold { color: #a3810b; }
.blanco { color: #fff; }
.logo { position: absolute; top: 20px; left: 3%; z-index: 200; width: 150px; z-index: 99998 !important;  }
.input { background: url(img/input.jpg) no-repeat left center; width: 205px; display: inline-block; vertical-align: top; border: none; background-size: auto 100%; height: 35px; padding: 0 10px; font-size: 12px; }
.submit { background: url(img/submit.jpg) no-repeat left center; width: 110px; display: inline-block; vertical-align: top; border: none; background-size: auto 100%; height: 35px; }
input:focus { outline:none;  }
.invi { opacity: 0; }

.sfds { background:#030101 url(img/index.png) no-repeat center top; background-size:100% auto ;  }
.rs { width: 50px; height: 400px; position: fixed; right: 0; top: 150px; background: url(img/rs.png) no-repeat center right; background-size: 100% auto; padding-top: 95px; z-index: 11; }
.rs a { display: block; text-align: center; margin: 5px 0 5px 10px;  }
.rs a img { width: 25px; height: auto; }
.rs a:hover { opacity: .6;  }
.tif { position: fixed; bottom: 25px; left: 3%; width: 70px; z-index: 99999; }

#inicio { background: url(img/inicio.jpg) no-repeat center; background-size: 100%; height: 150vh; padding: 150px 0 0 0; position: relative !important; z-index: 10 !important; }
#inicio h1 { font-size: 11.7vw; line-height: 13vh; margin-bottom: 10px; color: #a3810b; }
#inicio h1 span {display: block; font-size: 6.6vw; color: #fff; margin: 25px 0; }
#inicio a { width: 105px; height: 30px; line-height: 30px; color:#fff; background: #000; padding: 5px 10px; transition:all 400ms ease; }
#inicio a:hover { width: 105px; height: 30px; line-height: 30px; color:#000; background: #ffbe00; padding: 5px 20px; border-radius: 5px; text-decoration: none; }
#inicio p { margin-left: 20%; font-size: 26px; position: relative; max-width: 480px; font-family: 'cabinregular' !important; }

#recetas { position: relative; padding: 225px 0; background:#f6f6f6 url(img/recetas_.png) no-repeat top center; background-size: cover; height: auto; margin-top: -50px; position: relative; z-index: 60;  }
#recetas h2 { font-size: 9.7vw; line-height: 7.7vw; margin-bottom: 10px; color: #fff; margin: 25px 0 45px 0; color: #a3810b;  }
#recetas .container { position: relative; z-index: 20; }
#recetas img { display: block; margin:45px 0;  }
#recetas a { display: block; }

#empaque { height: auto !important; padding-bottom: 15px; position: relative; }
#empaque h3 {  } 
#empaque h2 { color: #fff; position: relative;  font-size: 6.2vw; text-transform: lowercase; margin: 75px auto -100px auto;   }
#empaque h2 > span{ color: #fff;  -webkit-text-stroke: .5px #a3810b !important; font-size: 4.2vw; display: block; text-align: center; display: none; }
#empaque h4 { color: #fff; position: absolute; z-index: 10; top: 70%; left: 47% !important; -webkit-text-stroke: .5px #a3810b !important; font-size: 6.9vw;  }
#empaque h4 > span{ color: #fff;  -webkit-text-stroke: .5px #a3810b !important; font-size: 2.2vw; display: block; text-align: center; display: none; }
.sube { margin-top: -100px; }

#empaque h3 { color: #fff; position: absolute; z-index: 10; top: 10%; left: 0%; font-size: 6.6vw;  }
#empaque .container { position: relative; }
#remate { height: auto !important; padding: 25px 0; margin-bottom: -10px; }
#remate h3 { font-size: 2.8vw; margin:5px auto 35px auto; }
#remate h4 { font-size: 4.2vw; margin:75px auto; color: #a3810b; }
.peso { font-size: 18px;  font-family: 'mansalvaregular';  }
.peso h3 { margin-bottom: 10px !important; }
.peso span { font-family: 'cabinmedium';  }
.peso img { width: 55px; height: auto; }
.remate_ { position: absolute; right: -270px; bottom: -370px; opacity: .15; }
.ficha-t { position: relative; margin-top: 25px; margin-top: -45px;  font-family: 'cabinregular' !important;  }
.ficha-t p { font-size: 15px; padding:5% 13%; font-weight: 300;  }
.lb { position: absolute; z-index: 10; top: 0%; left: 2%; display: none; }
.rb { position: absolute; z-index: 10; top: 0%; right:2%; display: none; }

#valores { position: relative; height: auto; z-index: 30 !important; margin-top:-140px;  }
#valores h2 { font-size: 6.5vw; line-height: 10vh; margin-bottom: 10px; color: #fff; margin-bottom: 75px; font-family: 'cabinmedium' !important; }
#valores h2 span {display: block; font-size: 2.4vw; color: #a3810b; margin:0 0 5px 0; font-family: 'cabinmedium';}
#valores h3 { font-size: 3.2vw; line-height: 3vw; color: #fff; margin-bottom: 35px; color: #a3810b;  font-family: 'cabinregular' !important; }
#valores p { margin-bottom: 45px; padding:0 30px;  }
#valores .container { position: relative; z-index: 20; }
#valores .fondo { position: absolute; z-index: 5; }
.fondov { bottom:-380px; position: absolute; z-index: 1; width: 100%; }

#empresa { position: relative; height: auto; background: #f6f6f6; z-index: 1; position: relative; padding: 150px 0; }
.caja { border:#d2bf7f solid 2px ; width: 325px; min-height: 450px; position: relative; display: inline-block; border-radius: 50px; padding: 50px 0;  vertical-align: top; margin:15px;  }
.caja h2 { color: #246047; font-size: 40px; margin-bottom: -25px; }
.caja p  { color: #000; line-height: 33px; font-size:18px; text-align: left; padding: 0 35px; }
.hoja1 { position: absolute; bottom: -70px; right: -70px; }
.hoja2 { position: absolute; top: -70px; left: -70px; }

#servicios { background: url(img/servicios.png) no-repeat center top; background-size: cover; height: 130vh; padding: 150px 0 0 0; position: relative !important; z-index: 3 !important; margin-bottom: -290px; }
#servicios h1 { font-size: 9.3vw; line-height: 13vh; margin-bottom: 10px; color: #a3810b; }
#servicios h1 span {display: block; font-size: 6.6vw; color: #fff; margin: 25px 0 -25px 0; }
#servicios a { width: 105px; height: 30px; line-height: 30px; color:#fff; background: #000; padding: 5px 10px; transition:all 400ms ease; }
#servicios a:hover { width: 105px; height: 30px; line-height: 30px; color:#000; background: #ffbe00; padding: 5px 20px; border-radius: 5px; text-decoration: none; }
#servicios p { margin-left: 20%; font-size: 26px; position: relative; max-width: 480px; font-family: 'cabinregular' !important; }

#descriptivo { background: url(img/descriptivo.jpg) no-repeat center; background-size: cover; height: auto; padding: 357px 0 0 0; position: relative !important; z-index: 1 !important; }
#descriptivo h3 { font-family: 'mansalvaregular', sans-serif; color: #a3810b; font-size:6vh; }
#descriptivo h3 > span { color: #fff; display: block; font-size: 7vh; margin-bottom: -20px; }
#descriptivo p { margin-left: 50px; }
#descriptivo .col-sm-5 { margin-bottom: 50px; }
.remate { display: block; margin: 0 auto; text-align: center;  }
.pierna_ { display: block; margin: 0 auto; text-align: right; }
.ajuste { width: 100%; min-height: 100px; max-height: 250px; }

.bp { background: url(img/batalla.jpg) no-repeat center; background-size: cover; height: auto; padding: 70px 0;  position: relative !important; z-index: 1 !important; }
.bp_ { filter: blur(4px); background-size: cover; height: 120%; top:-50px; left: 5%;  position: absolute !important; z-index: 2 !important; }
.bp .container { position: relative; z-index: 5; }
.maaz { width: 130px; height: 30px; display: block; background: #a48100; color:#fff; border-radius: 25px; line-height: 30px; }
.maaz:hover { text-decoration: none;  background: #fff; color:#a48100;}
.big { font-size: 20px; color:#a38200; }
.log-bat img { display: inline-block; width: 140px; vertical-align: middle; margin: 10px; }
.bp h3 { font-size: 3.4vw; }
.bp h3 > span { color:#d2bf7f; }

.bullet { width: 250px; height: 250px; position: absolute; right: 50px; bottom: -100px; border-radius: 50%; box-shadow:1px 10px 10px rgba(0, 0, 0, .6);  }
.bullet iframe { width: 350px !important; height: 350px !important;  }
#contacto { background: url(img/contacto.png) no-repeat center top; background-size: 100% auto; height: auto; padding: 85vh 0 0 0; position: relative !important; z-index: 1 !important; }
#contacto h1 { font-size: 7.3vw; line-height: 6vh; margin-bottom: 10px; color: #a3810b; }
#contacto h1 span {display: block; font-size: 3.6vw; color: #fff; margin: 25px 0; }
#contacto a { width: 105px; height: 30px; line-height: 30px; color:#fff; background: #000; padding: 5px 10px; transition:all 400ms ease; }
#contacto a:hover { width: 105px; height: 30px; line-height: 30px; color:#000; background: #ffbe00; padding: 5px 20px; border-radius: 5px; text-decoration: none; }
#contacto p { margin:45px 0  45px 20%; font-size: 26px; position: relative; max-width: 480px; font-family: 'cabinregular' !important; }
input { border: #fff solid 1px; border-radius: 25px; height: 50px; width: 85%; background: none; padding: 0 10px; margin-bottom: 10px; }
input[type="submit"] { border: #a3810b solid 1px; border-radius: 25px; height: 50px; width: 50%; background: #a3810b; color: #fff; font-family: 'mansalvaregular', sans-serif; font-size:25px ; text-align: left; padding: 0 10px; }


#producto { background: url(img/productos.png) no-repeat center bottom; background-size: cover; height: 90vh; padding: 160px 0 0 0; position: relative !important; z-index: 1 !important; }
#producto h1 { font-size: 9.3vw; line-height: 13vh; margin-bottom: 10px; color: #a3810b; }
#producto h1 span {display: block; font-size: 6.6vw; color: #fff; margin: 25px 0; }
#producto p { font-size: 10px !important; color: #f9f2d7; opacity: .7;  }

#formulario h2 { font-size:5.4vw ; color: #a3810b; }

#mapa { width: 100%; min-height: auto; }
.mapa_ { background: #fff; background-size: cover; color: #000; padding:7% 100px 1% 100px !important; box-sizing: border-box; height: 595px; }
.mapa_ h3 { display: block; margin-bottom: 10px; color: #246047; }
.mapa_ b  { display: block; font-size: 18px; }
.mapa_ a  { display: block; letter-spacing: .5px; margin:-2px 0; color: #000; }
.yframe { padding: 0;  }
.fs { font-size: 18px !important; color: #246047 !important; }
.logo-s { display: inline-block; vertical-align: middle; width: 22%; margin: 25px;  }

#eventos { background: url(img/parrilla.jpg) no-repeat center; background-size: 100% auto; height: auto; position: relative !important; padding: 110px 0 ;    }
#eventos a { color: #fff; }
.ajuste { width: 100%; height: 80px; }
.mas {font-family: 'cabinregular' !important; margin-right: 15px; font-size: 14px; padding: 5px; border-radius: 10px;  }
.mas:hover { text-decoration: none; color: #a3810b !important; background-color: #fff;  }
.tel {font-family: 'cabinregular' !important; margin:15px 0;  }

.socios { height: auto;  position: relative; background: #f6f6f6; }
.socios .container { position: relative; z-index: 20; }
.socios h2 { font-size: 12vh; color: #a3810b;  font-family: 'cabinregular' !important; margin: 55px auto 25px auto;  }
.socios h2 span { color: #246047; font-size: 5vh; margin-bottom: -25px; font-family: 'mansalvaregular', sans-serif !important; display: block; }
.socios img { width: 250px; margin:25px;  }

.borde { border-top:#8e700a solid 1px ; padding-top: 20px; }
.borde a { font-size: 12px !important; letter-spacing: 1px !important; font-family: 'kaleko_105thin' !important; }
.pleca-foo { margin: 50px auto 90px auto;  }

.producto { width: 100%; height: 100%; background: #000; padding-top: 0px; border-bottom: #fff solid 2px;  }
.producto .container .row { /* padding: 0 0 140px 0; */   }
.producto .col-sm-4 { height: auto; padding-bottom: 75px;   line-height: auto; cursor: pointer; margin-bottom: 50px; border-bottom:rgba(255,255,255, .1 ) solid 1px; border-right:#000 solid 10px;   }
.producto .col-sm-4:hover { background: rgba(255, 255, 255, .1);   }
/*.producto .col-sm-2:hover h4 { font-size: 18px; color:#fff; position: relative; z-index: 3; margin-top: 45px; opacity: .5;  }
.producto .col-sm-2:hover img { opacity: 1;  } */
.producto a { width: auto; height: 100%; display: block; padding: 0;  margin: 0; }
.producto a:hover { text-decoration: none; }
.producto h4 { font-size: 18px; color:#fff; position: block; z-index: 3; margin-top: 45px;  opacity: 1; font-family: 'cabinregular' !important; }
.producto img { color:#fff; position: block; z-index: 1; opacity: 1; top: 0;  width: 60%; height: auto; }
.producto_ { width: 100%; height: 100%; position: fixed; z-index: 20; background: #000;  left: 0%; top: 0% !important; }
p.tipo { position: absolute; bottom: -8px; font-size: 12px; padding-top: 5px; width: 100% !important; text-align: center ; display: block; opacity: .6; }

.frituras { border-left:#1f497d solid 6px ; margin-bottom: 50px; }
.embutidos { border-left:#4f6228 solid 6px ; margin-bottom: 50px;  }
.marinados { border-left:#632523 solid 6px ; margin-bottom: 50px;  }
.ahumados { border-left:#974706 solid 6px ; margin-bottom: 50px;  }

.frituras h2, .embutidos h2, .marinados h2, .ahumados h2 { display: block; text-align:  center; width: 100%; padding: 15px 0; font-size: 48px;   }

.bor { border:rgba(210, 191, 127, .5) solid 2px ; box-shadow:1px 10px 10px rgba(0, 0, 0, .3); background-color:#f1f1f1; min-height: 150px; width: 17.2%; position: relative;  border-radius: 20px; padding: 10px 0; line-height: 150px;  vertical-align: top; margin:15px; display: inline-block;  }
.bor img { width: 75% !important; display: inline-block; vertical-align: middle; }

.bor_ { border:rgba(163, 128, 18, .5) solid 2px ; box-shadow:1px 10px 10px rgba(0, 0, 0, .3); background-color:#f1f1f1; min-height: 150px; width: 17.2%; position: relative;  border-radius: 20px; padding: 10px 0; line-height: 150px;  vertical-align: top; margin:15px; display: inline-block;  }
.bor_ img { width: 75% !important; display: inline-block; vertical-align: middle; }

object { width: 100%; height: 350px; overflow: hidden !important; margin-top: -35px; }
embed { width: 100%; height: 350px; overflow: hidden !important;  margin-top: -35px; }

.ajuste_c { position: fixed; top: 110px; right: -250px; font-size: 20px; transition:all 400ms ease; }
.fix {  font-size: 20px; right: -100px; }

.lin1 { background: #1f497d; border:#1f497d solid 1px; width: 150px; margin: 25px 5px; border-radius: 25px; } 
.lin2 { background: #4f6228; border:#4f6228 solid 1px; width: 150px; margin: 25px 5px; border-radius: 25px;} 
.lin3 { background: #632523; border:#632523 solid 1px; width: 150px; margin: 25px 5px; border-radius: 25px;} 
.lin4 { background: #974706; border:#974706 solid 1px; width: 150px; margin: 25px 5px; border-radius: 25px;} 


/*
.dropdown-menu {
	 
    position: absolute;
    top: 140px;
    left: -3px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 50% !important;
    box-sizing: border-box;
    width: 110px !important; font-size: 12px; 
    transition:all 200ms ease; 
    opacity: 0;
}

.dropdown-menu.show {
    display: block;
    position: absolute;
     opacity: 1;
}


.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 10px;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}
*/

.lin1:hover { background: #1f497d; border:#1f497d solid 1px;} 
.lin2:hover { background: #4f6228; border:#4f6228 solid 1px; } 
.lin3:hover { background: #632523; border:#632523 solid 1px;} 
.lin4:hover { background: #974706; border:#974706 solid 1px;} 


/* CHISPAS */
.spark {
    background-color: #DE4A00;
    font-family: 'Helvetica', sans-serif;
    visibility: hidden;
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 30%;
    box-shadow: 0 0 5px #AB000B;
    z-index: 10;
}



/* MOUSE */
.scroll-downs {
    position: fixed;
    bottom: 60px;
    left: 49.5%;
    width: 10px;
    height: 31px;
    margin-left: -5px;
    z-index: 99;
}

.mousey {
    width: 4px;
    padding: 4px 10px;
    height: 30px;
    border:rgba(255,255,255,1) 1px solid ;
    border-radius: 25px;
    opacity: 1;
    box-sizing: content-box;
}

.scroller {
    width: 5px;
    height: 5px;
    border-radius: 25px;
    background-color: #fff;
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(.15,.41,.69,.94);
    animation-iteration-count: infinite;
}

@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}

/* MENU */
.menu-toggle {
  width: 100px;
  height: 90px;
  position: absolute;
  top: 5px;
  right: 25px;
  cursor: pointer;
 /* transform: rotate(90deg); */
 text-align: center; 
 color: #a3810b; 
}

.menu-toggle p { margin-top: -15px;}

.menu-toggle.on .one {
  -moz-transform: rotate(45deg) translate(7px, 7px);
  -ms-transform: rotate(45deg) translate(7px, 7px);
  -webkit-transform: rotate(45deg) translate(7px, 7px);
  transform: rotate(45deg) translate(7px, 7px);
  margin-right: -10px; transition:all 400ms ease;
  margin-top: -10px;
}
.menu-toggle.on .two {
  opacity: 0; transition:all 400ms ease; position: absolute; top: -100px; 
}
.menu-toggle.on .three {
  -moz-transform: rotate(-45deg) translate(8px, -10px);
  -ms-transform: rotate(-45deg) translate(8px, -10px);
  -webkit-transform: rotate(-45deg) translate(8px, -10px);
  transform: rotate(-45deg) translate(8px, -10px);
  margin-left: 10px; transition:all 400ms ease;
  margin-top: 30px;
}

.one img, .three img {  transform: rotate(0deg); transition:all 400ms ease; height: 60px; margin-bottom: 10px; }
.two img  {  transform: rotate(0deg); transition:all 400ms ease; width: 40px;  }

.one,
.two,
.three {
  width: auto;
  height: auto;
  margin: 6px auto;
  backface-visibility: hidden;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  display: inline-block; 
  vertical-align: middle;
  transition:all 400ms ease;
}

nav ul {
  margin: 0;
  padding: 10% 12% 0% 12%;
  list-style: none;
  margin: 4em auto;
  text-align: center; transition:all 200ms ease;
  position: fixed;
  z-index: 10;
  left: -50%;
}
nav ul.hidden {
  margin-left: 50%;
}

nav ul li  { width: 26%; min-height: 200px; vertical-align: top ; display: inline-block; margin:10px; text-align: left;  }

nav ul a {
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  text-decoration: none;
  color: white;
  font-size: 3em;
  line-height: 1.5;
  width: 100%;
  display: block;
  transition:all 400ms ease;
  color: #a3810b;
}
nav ul a:hover {
  transition:all 400ms ease; text-decoration: none; color:#d6be89; cursor:pointer !important;
}

/*
.menu-section.on {
  z-index: 10;
  width: 100%;
  height: 100vh;
  display: block;
  background-color: rgba(0, 0, 0, 0.9);
  position: absolute; transition:all 400ms ease;
  top:0;
}

*/

.m-slide { width: 100%; height: 100vh; border-right:#a3810b solid 3px; text-align: center; position: fixed; z-index: 100; top: 0px; padding-top: 150px; left: -100%; background: rgba(0, 0, 0, .9); transition:all 500ms ease;  }
.m-slide p { padding-left: 20px; }
.m-slide ul { }
.m-slide ul li { width: 25%; min-height: 150px; text-align: left; display: inline-block; vertical-align:top; margin-bottom: 5px; }
.m-slide ul li a { color:#a3810b; text-decoration: none; text-transform: ; font-weight: 900; font-size: 28px; letter-spacing: 1px; font-family: 'mansalvaregular', sans-serif !important; }
.m-slide ul li a:hover { letter-spacing: 3px; margin-bottom: 15px; }
.full_ { margin-left: 100%; transition:all 200ms ease; }

 @media only screen and (max-width: 960px) {
    .tif { width: 75px; }
    .producto .col-sm-2 { width: 40% !important;  display: inline-block; }
    .logo { position: absolute; top: 20px; left: 3%; z-index: 200; width: 100px; }
    .nuestros { position: absolute; z-index: 45; top: 35px; right: 140px; cursor: pointer; width: 150px; }
    .ajuste_c { position: absolute; top: 110px; right: -190px; }
    #empaque img { width: 100%; }
    #valores h3 {
    font-size: 3.2vw;
    line-height: 3vw;
    color: #fff;
    margin-bottom: 35px;
    color: #a3810b;
}

  }

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

#producto h1 {
    font-size: 54px;
    line-height: 20px;
    margin-bottom: 10px;
    color: #a3810b;
}

#empaque img {
    width: 70%;
}

#empaque h2 {
    color: #fff;
    position: relative;
    font-size: 6.2vw;
    text-transform: lowercase;
    margin: 75px auto -10px auto;
}

#remate img {
    width: 70%;
}

p.tipo {
    position: absolute;
    bottom: -8px;
    font-size: 12px;
    padding-top: 5px;
    width: 100% !important;
    text-align: center;
    display: block;
    opacity: .6;
    padding: 0 15% !important; 

}

#inicio { height: 700px; } 
#inicio h1 { font-size: 11.7vw; line-height: 5vh; margin-bottom: 10px; color: #a3810b; }
#inicio h1 span {display: block; font-size: 6.6vw; color: #fff; margin: 25px 0; }

#valores h2 { font-size: 8.5vw; line-height: 5vh; margin-bottom: 10px; color: #fff; margin-bottom: 75px; font-family: 'cabinmedium' !important; }
#valores h2 span {display: block; font-size: 4.4vw; color: #a3810b; margin:0 0 5px 0; font-family: 'cabinmedium';}

.bor { border:rgba(210, 191, 127, .5) solid 2px ; box-shadow:1px 10px 10px rgba(0, 0, 0, .3); background-color:#f1f1f1; min-height: 150px; width: 33.3%; position: relative;  border-radius: 20px; padding: 10px 0; line-height: 150px;  vertical-align: top; margin:15px; display: inline-block;  }
.bor img { width: 75% !important; display: inline-block; vertical-align: middle;  margin-left: 15px; }

.bor_ { border:rgba(163, 128, 18, .5) solid 2px ; box-shadow:1px 10px 10px rgba(0, 0, 0, .3); background-color:#f1f1f1; min-height: 150px; width: 33.3%; position: relative;  border-radius: 20px; padding: 10px 0; line-height: 150px;  vertical-align: top; margin:15px; display: inline-block;  }
.bor_ img { width: 90% !important; display: inline-block; vertical-align: middle; margin-left: 5px; }


.tif { position: fixed; bottom: 25px; left: 84%; width: 70px; z-index: 99999; }

nav ul li {
    width: 26%;
    min-height: 120px;
    vertical-align: top;
    display: inline-block;
    margin: 10px;
    text-align: left;
}

nav ul a {
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    text-decoration: none;
    color: white;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    display: block;
    transition: all 400ms ease;
    color: #a3810b;
}

nav ul p { font-size: 14px; }

.bullet { width: 230px; height: 230px; position: absolute; right: 90px; bottom: -100px; border-radius: 50%; box-shadow:1px 10px 10px rgba(0, 0, 0, .6);  }
.bullet iframe { width: 350px !important; height: 350px !important;  }


}

 @media only screen and (max-width: 720px) {
    footer { background: #000 url(img/foo_.jpg) no-repeat right bottom; background-size:100% auto; padding-bottom: 550px; }
    #valores h3 {
    font-size: 32px;
    line-height: 36px;
    color: #fff;
    margin-bottom: 35px;
    color: #a3810b;
}

.socios h2 span {
    color: #246047;
    font-size: 25px;
    margin-bottom: -5px;
    font-family: 'mansalvaregular', sans-serif !important;
    display: block;
}
  }



 @media only screen and (max-width: 550px) {
    footer { background: #000 url(img/foo_.jpg) no-repeat right bottom; background-size:100% auto; padding-bottom: 350px; }
    .cara { position: relative; margin-left:0% ; }
    .bra { position: absolute; top:0px ; left: 0px; font-size: 16vh !important; display: none; }
    .text-right { text-align: left !important; }
   #contacto { background: url(img/contacto.png) no-repeat center top; background-size:auto 100% ; height: auto; padding: 85vh 0 0 0; position: relative !important; z-index: 1 !important; }
 
 .m-slide ul li { width: 45%; min-height: 150px; display: inline-block; vertical-align:top; margin-bottom: 5px; }
.m-slide p { max-width: 150px; }
  }
}


@media only screen and (max-width: 480px) {
    .lin1 { background: #1f497d; border:#1f497d solid 1px; width: 350px; margin: 25px 5px; display: block !important; } 
	.lin2 { background: #4f6228; border:#4f6228 solid 1px; width: 350px; margin: 25px 5px; display: block !important; } 
	.lin3 { background: #632523; border:#632523 solid 1px; width: 350px; margin: 25px 5px; display: block !important; } 
	.lin4 { background: #974706; border:#974706 solid 1px; width: 350px; margin: 25px 5px; display: block !important; } 

	.dropdown-menu { width: 350px; }
}

   @media only screen and (max-width: 440px) {
    .producto .col-sm-2 { width: 80% !important; background: yellow; display: inline-block; }
        footer { background: #000 url(img/foo_.jpg) no-repeat right bottom; background-size:100% auto; padding-bottom: 250px; }

  }