@charset "utf-8";
 @import "includes/vars.css";
 @font-face {
	 font-family: Hellowin;
	 src: url('../files/Hellowin.otf');
}
 @font-face {
	 font-family: SofiaRegular;
	 src: url('../files/SofiaProRegular.otf');
}
 @font-face {
	 font-family: SofiaLight;
	 src: url('../files/SofiaProLight.otf');
}
 @font-face {
	 font-family: SofiaSemiBold;
	 src: url('../files/SofiaProSemiBold.otf');
}
/* Geral ============================== */
 * {
	 box-sizing: border-box;
}
 button {
	 border: none;
	 outline: none;
}
 html {
	 margin: 0;
	 padding: 0;
}
 body {
	 margin: 0 auto !important;
	 max-width: 1920px;
	 padding: 0;
	 overflow-x: hidden;
}
 a {
	 text-decoration: none !important;
	 border: 0;
}
 .modal {
	 display: none;
	 flex-direction: column;
	 position: fixed;
	 left: 0;
	 right: 0;
	 top: 6% !important;
	 margin: auto;
	 width: 40% !important;
	 height: auto !important;
	 box-shadow: 0px 0px 26px 2px #000;
	 align-items: flex-end;
	 background-color: #f1f1f1;
}
 .modal .close {
	 font-size: 20px;
	 cursor: pointer;
	 width: 100%;
	 margin: 0 auto;
	 text-align: right;
	 position: absolute;
	 right: 10px;
}
 .modal img {
	 width: 40vw;
}
/* HEADER ========================== */
 .contact_header {
	 width: 100%;
	 height: 40px;
	 background-color: #1fbaba;
	 text-align: center;
	 align-content: center;
}
 .contact_header .cs {
	 cursor: pointer;
}
 .contact_header a {
	 color: white;
	 text-transform: uppercase;
	 font-size: 14px;
	 align-self: center;
	 font-family: 'Myriad', sans-serif;
}
 .contact_header a:hover {
	 color: #f2f2f2;
}
 .contact_header .social-media a {
	 padding: 10px;
}
 nav {
	 width: 100%;
	 background-color: #fff;
	 padding: 10px;
	 font-size: 1rem;
}
 nav a {
	 font-family: SofiaSemiBold;
	 text-align: center;
	 color: #b3b3b3;
	 text-transform: uppercase;
	 align-self: center;
	 font-weight: 500;
}
 nav a:hover {
	 color: #4d4d4d;
}
 nav #logo {
	 width: 40%;
}
 main {
	 text-align: center;
}
 .hero-image {
	 width: 100%;
}
 .hero-image img {
	 width: 100.3%;
}
 .contact-social {
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
}
 .contact-social img {
	 width: 50%;
}
/* UNIVERSO JAIBEL 1SECTION ===================================*/
 #universo-jaibel {
	 position: relative;
}
 .info img {
	 margin-top: 5%;
	 width: 80%;
}
 .pattern {
	 width: 130px !important;
	 height: 200px;
	 background: url('../images/pattern.png') no-repeat;
	 background-size: contain;
	 position: absolute;
	 right: 0;
	 top: 50px;
}
 .banner-info {
	 padding: 70px;
	 margin: 0 auto;
	 align-items: center;
	 background-color: #f2f2f2;
}
 .banner-info h1 {
	 font-family: Hellowin;
	 color: #00244f;
	 font-size: 5.5rem;
	 text-align: left;
}
 .banner-info p {
	 font-family: SofiaRegular;
	 color: #4d4d4d;
	 font-size: 1.5rem;
	 text-align: left;
}
 .banner-info .banner img {
	 width: 70%;
}
 .banner-info .info-buttons {
	 display: grid;
	 grid-template-columns: 1fr 1fr;
	 gap: 15px;
	 width: 98%;
}
 .banner-info .info-buttons img {
	 width: 100%;
}
 .wrapper-historia, .wrapper-esencia, .wrapper-portafolio, .wrapper-linea {
	 position: relative;
	 padding: 4% 0%;
	 display: flex;
	 background-color: #8be4ef;
	 text-align: center;
	 justify-content: center;
}
 .wrapper-historia img, .wrapper-esencia img, .wrapper-portafolio img, .wrapper-linea img {
	 width: 50%;
}
 .wrapper-historia .right-text, .wrapper-esencia .right-text, .wrapper-portafolio .right-text, .wrapper-linea .right-text {
	 width: 22%;
	 background-color: white;
	 display: flex;
}
 .wrapper-historia p, .wrapper-esencia p, .wrapper-portafolio p, .wrapper-linea p {
	 width: 50%;
	 background-color: white;
	 color: #4d4d4d;
	 text-align: left;
	 padding: 2%;
	 font-size: 0.8rem;
	 font-family: SofiaRegular;
	 margin: auto;
}
 .wrapper-esencia p, .wrapper-historia p {
	 width: 90% !important;
}
 #wrapperBig {
	 font-size: 0.7rem;
}
 .pattern-l {
	 width: 130px !important;
	 height: 200px;
	 background: url('../images/pattern-l.png') no-repeat;
	 background-size: contain;
	 position: absolute;
	 left: 0;
	 top: 70px;
}
 .wrapper-esencia {
	 background-color: #ebe4ef;
}
 .wrapper-esencia .pattern {
	 width: 10% !important;
}
 .wrapper-esencia .pattern img {
	 width: 20% !important;
}
 .wrapper-portafolio {
	 background-color: #1fbaba;
}
 .wrapper-portafolio p {
	 width: 75%;
	 font-size: 1rem;
}
 .wrapper-linea {
	 background-color: #ffeed2;
}
 .wrapper-linea p {
	 width: 65%;
	 font-size: 1rem;
}
/* FRUTAL ======================*/
 #big .right-content {
	 width: 100vw;
}
 #big .right-content h1 {
	 font-size: 1.5vw;
}
 #big .right-content p {
	 font-size: 0.8vw;
}
 .slider {
	 gap: 15px;
	 display: flex !important;
	 align-items: center;
	 width: 95%;
	 margin: auto;
}
 .slider .prev-arrow {
	 background: url('../images/prev.png') no-repeat;
	 width: 50%;
	 height: 50px;
	 background-size: contain;
}
 .slider .next-arrow {
	 background: url('../images/next.png') no-repeat;
	 width: 50%;
	 height: 50px;
	 background-size: contain;
}
 .slider h1 {
	 font-family: Hellowin;
}
 .slider p {
	 font-family: SofiaRegular;
}
 .this {
	 width: 50%;
}
 .this img {
	 width: 100%;
}
 .slider:nth-child(2) .slider-item {
	 gap: 0;
}
 .slider-item {
	 display: flex !important;
	 align-items: center !important;
	 justify-content: center !important;
	 padding: 30px;
	 gap: 50px;
}
 .slick-dots {
	 bottom: 0px;
	 list-style: none;
	 display: flex;
	 flex-direction: row;
	 position: absolute;
	 justify-content: center;
	 padding-left: 0;
	 left: 0;
	 right: 0;
}
 .slick-dots li {
	 padding: 10px;
	 border-radius: 25px;
	 height: 10px;
	 width: 10px;
	 cursor: pointer;
	 background-color: grey;
	 opacity: 0.5;
	 margin: 2px;
}
 .slick-dots li button {
	 background-color: transparent;
	 display: none;
}
 .slick-dots .slick-active {
	 opacity: 1;
	 background: white;
}
 .wrapper-frutal {
	 padding: 20px;
	 width: 100%;
}
 .wrapper-frutal .prev-arrow, .wrapper-frutal .next-arrow {
	 width: 150%;
}
 .wrapper-frutal .title {
	 width: 100%;
	 text-align: center;
}
 .wrapper-frutal .title img {
	 object-fit: contain;
	 width: 300px;
	 height: 150px;
}
 .wrapper-frutal .left-content {
	 text-align: left;
	 display: flex;
	 flex-direction: column;
	 gap: 30px;
	 min-width: 20%;
}
 .wrapper-frutal .left-content h1 {
	 font-size: 3vw;
}
 .wrapper-frutal .left-content p {
	 font-size: 1.2vw;
}
 .wrapper-frutal .left-content p:last-child {
	 display: none;
}
 .wrapper-frutal .left-content img {
	 width: 180px;
	 height: 100%;
	 cursor: pointer;
	 object-fit: contain;
}
 .wrapper-frutal .middle-content img {
	 margin: auto;
	 flex-basis: 4;
	 width: 70%;
}
 .wrapper-frutal .right-content {
	 text-align: left;
	 width: 700px;
}
 .wrapper-frutal .right-content h1 {
	 font-size: 2vw;
}
 .wrapper-frutal .right-content p {
	 font-size: 0.9vw;
}
 .wrapper-recetario {
	 background-color: #f2f2f2;
	 border-top: 1px black solid;
}
 .wrapper-recetario .slider {
	 align-items: center;
	 text-align: left;
}
 .wrapper-recetario .slider-item {
	 gap: 15px !important;
}
 .wrapper-recetario .left-content {
	 width: 70%;
}
 .wrapper-recetario .left-content h1 {
	 font-size: 3vw;
}
 .wrapper-recetario .left-content p {
	 font-size: 1.4vw;
}
 .wrapper-recetario .left-content img {
	 margin-top: 2%;
	 width: 70%;
	 cursor: pointer;
}
 .wrapper-recetario .left-content #text-big {
	 margin: 0;
	 font-size: 0.7rem;
}
 .wrapper-recetario .middle-content {
	 width: 70%;
}
 .wrapper-recetario .middle-content img {
	 width: 90%;
	 margin: 0 auto;
}
 .wrapper-recetario .right-content {
	 width: 70%;
}
 .wrapper-recetario .right-content img {
	 width: 100%;
}
/* ===============================*/
 .line {
	 width: 80%;
	 height: 2px;
}
 .wrapper-food {
	 background-color: #f2f0eb;
	 width: 100%;
	 padding: 20px;
}
 .wrapper-food h1 img {
	 width: 50%;
	 margin: 10px;
}
 .header-food {
	 width: 90%;
	 margin: 0 auto !important;
}
 .header-food img {
	 width: 10%;
	 cursor: pointer;
}
 .food {
	 display: flex;
	 width: 90%;
	 margin: 0 auto;
	 gap: 50px;
}
 .food .food-item {
	 width: 100%;
	 cursor: pointer;
}
 .food .food-item img {
	 width: 100%;
}
 .food .food-item h1 {
	 margin-top: 10px;
	 width: 100%;
	 font-size: 1rem;
	 text-align: left;
	 font-family: SofiaLight;
}
 .text {
	 color: white;
}
/* FOOTER ==============================*/
 .subscripton {
	 display: flex;
	 align-items: center;
	 width: 100%;
	 background: #1fbaba;
	 padding: 50px;
}
 .subscripton .hashtag img {
	 width: 300px;
}
 .subscripton .sub-email {
	 display: flex;
	 justify-content: center;
}
 .subscripton .sub-email input {
	 width: 250px;
	 height: 30px;
	 border: none;
	 outline: none;
	 border-top-left-radius: 20px;
	 border-bottom-left-radius: 20px;
}
 .subscripton .sub-email ::placeholder {
	 padding: 10px;
}
 .subscripton .sub-email button {
	 width: 120px;
	 height: 30px;
	 border-top-right-radius: 20px;
	 border-bottom-right-radius: 20px;
	 color: white;
	 background-color: #fbba13;
}
 .lower {
	 display: flex;
	 justify-content: center;
	 width: 100%;
	 background-color: #aa1259;
	 padding: 50px;
	 gap: 20px;
}
 .lower .logo img {
	 width: 200px;
}
 .lower .social-media {
	 display: flex;
	 flex-direction: column;
	 text-align: left;
	 font-size: 0.7rem;
	 border-right: 1px solid white;
}
 .lower .social-media a {
	 color: white !important;
	 margin-bottom: 10px;
	 margin-right: 20px;
}
 .lower .legal {
	 width: 40%;
	 text-align: left;
	 color: white;
	 border-right: 1px solid white;
}
 .lower .legal .social {
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
}
 .lower .legal .social img {
	 width: 40px;
	 padding: 5px;
	 margin-right: 20px;
}
 .lower .others {
	 display: flex;
	 flex-direction: column;
	 text-align: left;
}
 .lower .others .links {
	 margin-bottom: 10px;
	 font-size: 0.8rem;
}
 .lower .others .links img {
	 width: 40px;
	 padding: 5px;
}
 .lower .others a {
	 color: white !important;
}
/* =========================*/
 @media only screen and (max-width: 500px) {
	 .contact_header {
		 flex-direction: column !important;
		 height: auto;
		 gap: 15px;
		 padding: 15px;
	}
	 .modal {
		 width: 95% !important;
	}
	 .modal img {
		 width: 100%;
	}
	 .modal .contact-social img {
		 width: 90%;
	}
}
 @media only screen and (max-width: 600px) {
	 .wrapper-frutal .slick-slide {
		 flex-direction: column-reverse;
	}
	 .wrapper-frutal .left-content img {
		 width: 140px;
		 margin: 0 auto;
	}
	 .wrapper-frutal .left-content {
		 text-align: center;
	}
	 .wrapper-frutal .slider-item .middle-content img {
		 width: 60%;
	}
	 .wrapper-frutal .left-content p:last-child {
		 display: block;
		 font-size: 0.7rem;
	}
	 .wrapper-frutal .left-content {
		 gap: 10px;
	}
	 .wrapper-frutal .slider-item .left-content {
		 width: 100%;
	}
}
 @media only screen and (min-width: 1800px) {
	 .wrapper-frutal .right-content {
		 width: 1000px;
	}
}
/* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 1000px) {
	 nav #logo {
		 width: 15%;
	}
	 .pattern {
		 top: 40px;
		 width: 15% !important;
	}
	 nav a:first-child {
		 display: block;
	}
	 nav a {
		 display: none;
	}
	 .banner-info h1 {
		 font-size: 3.7rem;
	}
	 .wrapper-historia, .wrapper-esencia, .wrapper-linea, .wrapper-portafolio {
		 flex-direction: column;
		 align-items: center;
	}
	 .wrapper-historia img, .wrapper-esencia img, .wrapper-linea img, .wrapper-portafolio img {
		 width: 80%;
	}
	 .wrapper-historia .right-text, .wrapper-esencia .right-text, .wrapper-linea .right-text, .wrapper-portafolio .right-text {
		 width: 80%;
	}
	 .wrapper-historia .right-text p, .wrapper-esencia .right-text p, .wrapper-linea .right-text p, .wrapper-portafolio .right-text p {
		 font-size: 1rem;
	}
	 .this {
		 width: 80%;
	}
	 .pattern-l {
		 width: 9% !important;
	}
	 .wrapper-esencia .pattern {
		 width: 9% !important;
	}
	 .slider-item {
		 display: flex;
		 flex-direction: row;
		 padding: 10px;
	}
	 .slider-item .left-content {
		 width: 950px;
	}
	 .slider-item .left-content h1 {
		 font-size: 1.2rem;
	}
	 .slider-item .left-content p {
		 font-size: 1rem;
	}
	 .slider-item .middle-content img {
		 width: 90%;
	}
	 .slider-item .right-content {
		 display: none;
	}
	 .food {
		 display: none;
		 grid-template-columns: 1fr 1fr 1fr;
		 gap: 10px;
	}
	 .wrapper-food h1 img {
		 width: 100%;
	}
	 .header-food {
		 flex-direction: column;
	}
	 .header-food img {
		 width: 100%;
	}
	 .wrapper-recetario .slider-item {
		 display: flex;
		 flex-direction: column;
	}
	 .wrapper-recetario .slider-item .left-content {
		 order: 2;
		 width: 250px;
		 text-align: center;
	}
	 .wrapper-recetario .slider-item .left-content img {
		 margin: 100px auto;
	}
	 .banner-info {
		 margin: 0 !important;
		 padding: 70px 5px;
		 width: 100%;
	}
	 .banner-info h1 {
		 font-size: 2rem;
	}
	 .banner-info p {
		 font-size: 1rem;
	}
	 .lower {
		 flex-direction: column;
		 gap: 10px;
		 padding: 10px;
		 align-items: center;
	}
	 .lower .social-media {
		 flex-direction: column;
		 border: none;
		 align-items: center;
		 text-align: center;
		 width: 100%;
	}
	 .lower .social-media a {
		 margin: 10px;
	}
	 .lower .legal {
		 border: none;
		 width: 90%;
	}
	 .lower .legal p {
		 text-align: center;
	}
	 .lower .others {
		 flex-direction: row;
		 gap: 30px;
	}
	 .lower .others .links {
		 display: flex;
		 flex-direction: column;
		 align-items: center;
	}
	 .lower .logo img {
		 width: 100px;
	}
}