@font-face {
    font-family: 'Don Jos';
    src: url('../asset/fonts/don_jose/DonJose-Black.eot');
    src: url('../asset/fonts/don_jose/DonJose-Black.eot?#iefix') format('embedded-opentype'),
        url('../asset/fonts/don_jose/DonJose-Black.woff2') format('woff2'),
        url('../asset/fonts/don_jose/DonJose-Black.woff') format('woff'),
        url('../asset/fonts/don_jose/DonJose-Black.ttf') format('truetype'),
        url('../asset/fonts/don_jose/DonJose-Black.svg#DonJose-Black') format('svg');
    font-weight: 900;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,700&display=swap');

:root{
    --blanco: #fff;
    --negro: #000;
    --rojo: #dc143c;
    --dorado: #e58e24;
    --azul: #313c92;

    --don: 'Don Jos';

    --azul1: #e3f3ff;
    --azul2: #005698;
    
}
:focus{
    outline: none !important;
}
body, html {outline: none !important;}
body {-webkit-transition: opacity 450ms ease-in;transition: opacity 450ms ease-in; font-family: 'Open Sans', sans-serif;}
body.fadeIn {opacity: 0; pointer-events: none;}
body .row{margin-left:0px; margin-right:0px}
body .np {padding: 0px;}
body .error-valid {background: rgba(220, 20, 60, 0.18) !important}
body .pdl30 {padding-left: 30px;}
body .bg {background-size: cover; background-repeat: no-repeat; background-position: center;}
body .bg.contain {background-size: contain;}
body .bg img {width: 100%; height: auto; visibility: hidden; overflow: hidden;}
body a:hover,
body a:active,
body a:focus,
body a{text-decoration: none; color: inherit}
body .container-fluid.mw {max-width: 1950px; margin-left: auto; margin-right: auto;}
body .dis--flex {display: -webkit-box;display: -ms-flexbox;display: flex;}
body .m15 {margin-bottom: 15px}
body .m20 {margin-bottom: 20px}
body .m30 {margin-bottom: 30px}
body .m40 {margin-bottom: 40px}

header .menu--desk {background-color: var(--blanco); padding: 10px 15px; -webkit-box-shadow: 1px 2px 10px 1px rgba(0,0,0,0.1); box-shadow: 1px 2px 10px 1px rgba(0,0,0,0.1); position: relative; z-index: 100;}
header .menu--desk .dis--flex {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
header .menu--desk .dis--flex .item {width: 100%;}
header .menu--desk img {max-height: 60px}
header .menu--desk ul {list-style: none; padding: 0px; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 60px;}
header .menu--desk ul li {text-transform: uppercase; font-size: 12px; font-weight: 600; -webkit-transition: color 250ms; transition: color 250ms;}
header .menu--desk ul li img {display: inline-block; margin-right: 10px; }
header .menu--desk ul li:nth-child(1) img {width: 50px;  }
header .menu--desk ul li:nth-child(2) img {width: 70px;  }
header .menu--desk ul li:nth-child(3) img {width: 70px;  }
header .menu--desk ul li:hover,
header .menu--desk ul li.active {color: var(--dorado)}
header .menu--desk ul.azul li.active {color: var(--azul)}
header .menu--desk ul.dorado li.active {color: var(--dorado)}
@media screen and (max-width: 767px){
    header .menu--desk {display: none;}
}
@media screen and (min-width: 992px){
    header .menu--desk ul {-ms-flex-pack: distribute;justify-content: space-around}
    header .menu--desk ul li {font-size: 15px}
}

#principal .item{ height: 350px; background-color: rgb(77, 77, 255); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;}
#principal .item:nth-child(1) {background-image: url(../asset/img/inicio/banner1.png); background-position: top}
#principal .item:nth-child(2) {background-image: url(../asset/img/inicio/banner2.png);  background-position: top}
#principal .item:nth-child(3) {background-image: url(../asset/img/inicio/banner3.png);  background-position: top}
#principal .item a {padding: 6px 45px; background-color: var(--dorado); color: var(--blanco); text-transform: uppercase; border-radius: 3px; font-family: var(--don); letter-spacing: 1.3px; font-size: 19px;}
#principal .bg {-ms-flex-wrap: wrap;flex-wrap: wrap;}
#principal .bg .c {width: 100%; -ms-flex-item-align: center; align-self: center; text-align: center;}
#principal .bg img {visibility: visible; overflow: auto; margin-bottom: 20px;}
#principal .bg img#cocina {width: 190px;}
#principal .bg img#mercado {width: 260px;}
#principal .bg img#granja {width: 260px;}
#principal .bg .text-center {width: 100%; padding-bottom: 100px; -ms-flex-item-align: end; align-self: flex-end;}
@media screen and (min-width: 768px){
    #principal .item{ height: 50vh;}
    #principal .bg .text-center {padding-bottom: 60px;}
}
@media screen and (min-width: 992px){
    #principal .bg img#cocina {width: 100%; max-width: 300px;}
    #principal .bg img#mercado {width: 100%; max-width: 400px}
    #principal .bg img#granja {width: 100%; max-width: 400px;}
    #principal .bg .text-center {padding-bottom: 120px;}
    #principal .item{ height: 100vh;}
}

.carta .bg {background-image: url(../asset/img/cocina/banner01.png); height: 400px;}
.carta .row {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap}
.carta .container-text {padding: 0px 15px; }
.carta .container-text div.max-c {padding: 30px 0px;}
.carta .container-text * {width: 100%}
.carta .container-text img {width: 100%; max-width: 320px;}
.carta .container-text button {width: auto; padding: 6px 45px; background-color: var(--dorado); color: var(--blanco); text-transform: uppercase; border-radius: 3px; border: none; display: block; margin-left: auto; margin-right: auto; font-family: var(--don); font-size: 19px; letter-spacing: 1.3px;}
.carta .container-text h3 {font-weight: 600; font-size: 24px; margin-bottom: 50px; color: var(--dorado); text-align: center; text-transform: uppercase; }
.carta .container-text p {font-size: 15px; line-height: 22px;}
.carta .container-text p b {font-family: var(--don); font-size: 28px; color: var(--azul1); -webkit-text-stroke: 1px var(--azul2); text-shadow: 3px 3px 0 var(--azul2), -1px -1px 0 var(--azul2), 1px -1px 0 var(--azul2), -1px 1px 0 var(--azul2), 1px 1px 0 var(--azul2); letter-spacing: 1px; line-height: 1.5;}
.carta .container-text ul { list-style: none; padding-left: 25px; margin: 0px; width: 280px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: auto; margin-right: auto; margin-bottom: 20px}
.carta .container-text ul li {width: 50%; font-size: 18px; text-align: left; font-weight: 600; margin-bottom: 10px;}
.carta .container-text ul li:last-child {width: 100%;  text-align: center; font-weight: 600;  padding-top: 20px;}
.carta .container-text ul li:not(:last-child)::before {content: ""; width: 10px; height: 10px; background-color: var(--blanco); border: 2px solid var(--dorado); display: inline-block; border-radius: 10px; margin-right: 10px;}
@media screen and (min-width: 768px){
    .carta .container-text div.max-c {max-width: 600px; margin: auto;}
}
@media screen and (min-width: 992px){
    .carta .bg {height: 700px;}
    .carta .container-text {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap;}
    .carta .container-text p {font-size: 18px;}
}

.bg-naranja {background-color: var(--dorado); padding-top: 50px}
.cocina--2 {padding-bottom: 60px}
.cocina--2 .row {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; color: var(--blanco); font-weight: 600; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.cocina--2 .row h3 {font-family: var(--don); letter-spacing: 1px; font-size: 25px; line-height: 1.6; color: var(--blanco); -webkit-text-stroke: 1px #a9681a; text-shadow: 3px 3px 0 #a9681a, -1px -1px 0 #a9681a, 1px -1px 0 #a9681a, -1px 1px 0 #a9681a, 1px 1px 0 #a9681a; margin-top: 0px;}
.cocina--2 .row p {font-size: 22px;}
.cocina--2 .row img {max-width: 300px; width: 100%; margin-top: 30px;}
@media screen and (min-width: 768px){
    .cocina--2 .row img {max-width: 220px; margin-top: 0px;}
}
@media screen and (min-width: 992px){
    .cocina--2 .row p {font-size: 30px;}
    .cocina--2 .row h3 {font-size: 28px;}
    .cocina--2 .row img {max-width: 300px;}
}

.banner {padding-bottom: 30px; }
.banner .bg {width: 100%; max-height: 400px; background-image: url(../asset/img/cocina/banner02.png);  overflow: hidden;}
@media screen and (min-width: 992px){
    .banner .bg {max-height: 600px;}
}

.galeria {padding-bottom: 30px}
.galeria .tlo {font-size: 35px; text-transform: uppercase; color: var(--azul1); -webkit-text-stroke: 1px var(--azul2); text-shadow: 3px 3px 0 var(--azul2), -1px -1px 0 var(--azul2), 1px -1px 0 var(--azul2), -1px 1px 0 var(--azul2), 1px 1px 0 var(--azul2); margin-bottom: 30px; font-weight: 600; text-align: center; font-family: var(--don); letter-spacing: 1px;}
.galeria .bg {max-height: 550px; cursor: pointer; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 350ms; transition: -webkit-transform 350ms; transition: transform 350ms; transition: transform 350ms, -webkit-transform 350ms}
.galeria .bg:hover {-webkit-transform: scale(1.1);transform: scale(1.1);}
@media screen and (min-width: 768px){
    .galeria .np {padding: 0px 15px;}
}
@media screen and (min-width: 992px){
    .galeria .tlo {font-size: 45px; }
}

.formulario {padding-bottom: 60px;}
.formulario .tlo {font-size: 35px; text-transform: uppercase; color: var(--azul1); margin-bottom: 40px; font-weight: 600; text-align: center;  font-family: var(--don); letter-spacing: 1px; -webkit-text-stroke: 1px var(--azul2); text-shadow: 3px 3px 0 var(--azul2), -1px -1px 0 var(--azul2), 1px -1px 0 var(--azul2), -1px 1px 0 var(--azul2), 1px 1px 0 var(--azul2);}
.formulario .subtlo {font-size: 16px; color: var(--dorado); font-weight: 800}
.formulario .cont-form {display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.formulario p {font-size: 12px; color: var(--negro); line-height: 20px}
.formulario label {width: 100%; color: var(--negro); font-size: 12px;}
.formulario textarea,
.formulario input {width: 100%; height: 32px; padding: 3px 15px; border:none; background-color: #e58e244a; margin-bottom: 15px; border-radius: 0px; font-size: 12px; color: var(--negro); resize: none;}
.formulario textarea {height: 100px;}
.formulario button {width: auto; padding: 6px 45px; background-color: var(--dorado); color: var(--blanco); text-transform: uppercase; border-radius: 3px; border: none; display: block; margin-left: auto; margin-right: auto; font-family: var(--don); font-size: 19px; letter-spacing: 1.3px;}
@media screen and (min-width: 768px){
    .formulario .np {padding-left: 15px; padding-right: 15px;}
}
@media screen and (min-width: 992px){
    .formulario .tlo {font-size: 45px; }
    .formulario .subtlo {font-size: 20px;}
    .formulario p {font-size: 14px; }
    .formulario p span {font-size: 16px; }
}

#mapid { height: 350px; }

#mercado .carta .bg {background-image: url(../asset/img/mercado/banner.png); max-height: 100vh; min-height: 600px;}
#mercado .banner .bg {width: 100%; max-height: 600px; background-image: url(../asset/img/mercado/banner2.png); overflow: hidden;}
#mercado .carta .container-text img {width: 100%; max-width: 400px;}
#mercado .bg-dorado-transp {background-color: #e58e244a;}
#mercado .productos {padding-top: 50px;}
#mercado .productos .m30 {margin-bottom: 130px;}
#mercado .productos .tlo {font-size: 35px; text-transform: uppercase; color: var(--azul1); font-weight: 600; text-align: center;  font-family: var(--don); letter-spacing: 1px; -webkit-text-stroke: 1px var(--azul2); text-shadow: 3px 3px 0 var(--azul2), -1px -1px 0 var(--azul2), 1px -1px 0 var(--azul2), -1px 1px 0 var(--azul2), 1px 1px 0 var(--azul2);}
#mercado .productos .subtlo {font-size: 18px; text-transform: uppercase; color: var(--blanco); margin-bottom: 5px; font-weight: 600; text-align: center; min-height: 55px}
#mercado .productos .tlo + .row {padding-top: 170px}
#mercado .productos .tlo + .row .m30 {margin-bottom: 130px}
#mercado .productos .tlo + .row .m30:last-child {margin-bottom: 30px}
#mercado .productos .bg {height: 150px; width: 150px; position: absolute; top: -100px; left:0px; right: 0px; margin: auto;}
#mercado .productos .cont-card {-webkit-box-shadow: 1px 10px 9px 0px #00000085;box-shadow: 1px 10px 9px 0px #00000085; border-radius: 5px; background-color: var(--dorado); padding-top: 95px; color: var(--blanco); max-width: 350px; margin: auto}
#mercado .productos .cont-card .card {padding: 15px; padding-top: 0;}
#mercado .productos .cont-card .tlo {font-size: 18px; margin-bottom: 15px;}
@media screen and (min-width: 992px){
    #mercado .productos .tlo {font-size: 45px; }
    #mercado .productos .bg {height: 180px; width: 180px;}
    #mercado .productos .tlo + .row .m30 {margin-bottom: 130px}
}
#mercado .banner {padding: 0px;}
#mercado .bg-naranja {background-color: var(--dorado); padding-top: 50px}
#mercado .formulario {padding-top: 40px;}

#granja .carta .bg {background-image: url(../asset/img/granja/banner.png); max-height: 100vh; min-height: 600px;}
#granja .carta .container-text img {width: 100%; max-width: 400px;}

#granja .catalogo {padding: 40px 0px;}
#granja .catalogo .tlo {font-size: 35px; text-transform: uppercase; color: var(--azul1); font-weight: 600; text-align: center;  font-family: var(--don); letter-spacing: 1px; -webkit-text-stroke: 1px var(--azul2); text-shadow: 3px 3px 0 var(--azul2), -1px -1px 0 var(--azul2), 1px -1px 0 var(--azul2), -1px 1px 0 var(--azul2), 1px 1px 0 var(--azul2);}
@media screen and (min-width: 992px){
    #granja .catalogo {padding: 60px 0px;}
    #granja .catalogo .tlo {font-size: 45px; }
}
.d-flex { display:flex; flex-wrap: wrap; }
.d-flex.justify-content-center {justify-content: center;}
.d-flex.align-items-center {align-items: center;}
#granja .bg-azul-transp {background-color: #303b914a; padding-bottom: 30px;}
#granja .bg-azul-transp h5 {color: #015598; font-weight: 800; font-size: 18px;}
#granja .bg-azul-transp ul {font-size: 14px; line-height: 2; padding-left: 18px; font-weight: 600; max-width: 250px; margin-left: auto; margin-right: auto; list-style: none;}
#granja .bg-azul-transp ul li {position: relative;}
#granja .bg-azul-transp ul li:not(:first-child)::before {content: ""; width: 10px; height: 10px; background-color: #015598; position: absolute; top: 9px; left: -18px; z-index: 1; border-radius: 50%;}
#granja .productos {padding-top: 50px;}
#granja .productos .tlo {font-size: 35px; text-transform: uppercase; color: var(--azul1); font-weight: 600; text-align: center;  font-family: var(--don); letter-spacing: 1px; -webkit-text-stroke: 1px var(--azul2); text-shadow: 3px 3px 0 var(--azul2), -1px -1px 0 var(--azul2), 1px -1px 0 var(--azul2), -1px 1px 0 var(--azul2), 1px 1px 0 var(--azul2);}
#granja .productos .subtlo {font-size: 18px; text-transform: uppercase; color: var(--blanco); margin-bottom: 5px; font-weight: 600; text-align: center; min-height: 55px}
#granja .productos .tlo + .row {padding-top: 170px}
#granja .productos .tlo + .row .m30 {margin-bottom: 130px}
#granja .productos .tlo + .row .m30:last-child {margin-bottom: 30px}
#granja .productos .bg {height: 150px; width: 150px; position: absolute; top: -100px; left:0px; right: 0px; margin: auto;}
#granja .productos .cont-card {-webkit-box-shadow: 1px 10px 9px 0px #00000085;box-shadow: 1px 10px 9px 0px #00000085; border-radius: 5px; background-color: var(--azul2); padding-top: 95px; color: var(--blanco); max-width: 350px; margin: auto}
#granja .productos .cont-card .card {padding: 15px; padding-top: 0;}
#granja .productos .cont-card .tlo {font-size: 18px; margin-bottom: 15px;}
@media screen and (min-width: 992px){
    #granja .productos .tlo {font-size: 45px; }
    #granja .productos .bg {height: 180px; width: 180px;}
    #granja .bg-azul-transp h5 {font-size: 24px;}
    #granja .bg-azul-transp ul {font-size: 16px;}
    /* #granja .productos .tlo + .row .m30 {margin-bottom: 180px} */
}
@media screen and (min-width: 1200px){
    #granja .bg-azul-transp {padding-bottom: 50px}
}
/* #granja .carta {padding-bottom: 120px}
#granja .carta p {font-size: 14px; line-height: 25px;}
#granja .carta .container-text {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; max-height: 100vh; min-height: 600px;}
#granja .carta .container-text div {width: 80%;}
#granja .carta .container-text * {width: 100%}
#granja .carta .container-text button {width: auto; padding: 6px 45px; background-color: var(--negro); color: var(--blanco); text-transform: uppercase; border-radius: 3px; border: none; display: block; margin-left: auto; margin-right: auto}
#granja .carta .container-text h3 {font-weight: 600; font-size: 24px; margin-bottom: 50px; color: var(--azul); text-align: center; text-transform: uppercase; }
#granja .carta.reverse .row {display: flex; flex-direction: row-reverse}

*/
#granja .galeria {padding-bottom: 40px; padding-top: 40px}
#granja .galeria .tlo {margin-bottom: 40px}
#granja .galeria .bg {max-height: 550px;}

#granja .formulario .subtlo {color: var(--azul);}
#granja .formulario textarea,
#granja .formulario input { background-color: #313c924a; color: var(--negro); resize: none;}

.bg-dorado footer {background-color: #f8ddc1;}
.bg-azul footer {background-color: #c5c5df;}
footer {width: 100%; padding: 30px 15px; color: var(--negro)}
footer .dis--flex {display: block; text-align: center}
footer ul {list-style: none; padding: 0px; margin: 0;}
footer ul li {display: block; text-transform: uppercase; font-size: 12px; font-weight: 400;}
footer ul li:nth-child(1) img {width: 50px;  }
footer ul li:nth-child(2) img {width: 70px;  }
footer ul li:nth-child(3) img {width: 70px;  }
footer ul li i {font-size: 18px !important}
footer ul li + li {margin-top: 15px;}
footer ul.redes {margin: 20px 0px;}
footer ul.redes li {display: inline-block}
footer ul.redes li + li{margin-top: 0px; margin-left: 20px;}
footer .text-right { text-align: center}
footer span {font-size: 11px; letter-spacing: 1.2px; }
@media screen and (min-width: 768px){
    footer ul li {display: inline-block;}
    footer ul li + li {margin-left: 25px;}
}
@media screen and (min-width: 992px){
    footer {padding: 20px 45px;}
    footer .dis--flex {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}    
    footer ul.redes {padding-right: 3px; text-align: right}
}