@font-face {
     font-family: 'Cabin';
     src: url('/assets/fonts/Cabin-Medium.woff2') format('woff2'), url('/assets/fonts/Cabin-Medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
}
 @font-face {
     font-family: 'Cabin';
     src: url('/assets/fonts/Cabin-Bold.woff2') format('woff2'), url('/assets/fonts/Cabin-Bold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
}
 @font-face {
     font-family: 'Cabin';
     src: url('/assets/fonts/Cabin-Italic.woff2') format('woff2'), url('/assets/fonts/Cabin-Italic.woff') format('woff');
     font-weight: normal;
     font-style: italic;
     font-display: swap;
}
 @font-face {
     font-family: 'DK';
     src: url('/assets/fonts/DKLemonYellowSun.woff2') format('woff2'), url('/assets/fonts/DKLemonYellowSun.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}
 @font-face {
     font-family: 'Olivier';
     src: url('/assets/fonts/olivier.woff2') format('woff2'), url('/assets/fonts/olivier.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}
 ::-webkit-scrollbar {
     width: 13px;
     height: 13px;
}
 ::-webkit-scrollbar-thumb {
     background: linear-gradient(13deg, #338720 14%, #48C22D 64%);
     border-radius: 10px;
}
 ::-webkit-scrollbar-thumb:hover {
     background: radial-gradient(circle, #6B6B6B 14%, #4D4D4D 64%);
}
 ::-webkit-scrollbar-track {
     background: #FFFFFF;
     border-radius: 10px;
     box-shadow: inset 7px 10px 12px 0px #F0F0F0;
}
 body {
     font-family: 'Cabin';
     font-weight: 500;
}
 body.no-overflow {
     overflow: hidden;
}
 a, a:visited, a:active {
     color: #339933;
}
 a:hover {
     color: #339933;
     text-decoration: underline;
}
/* Preload */
 #preload {
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 99999;
     text-align: center;
     background-color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
}
 #preload .content img {
     margin: auto auto;
     width: 60%;
     max-width: 320px;
     display: block;
     padding-bottom: 2vw;
}
 #preload .content .loader-dots {
     display: block;
     position: relative;
     width: 80px;
     height: 80px;
     margin: auto;
}
 #preload .circles {
     display: inline-block;
     position: relative;
     width: 80px;
     height: 80px;
}
 #preload .circles div {
     position: absolute;
     border: 4px solid #339933;
     opacity: 1;
     border-radius: 50%;
     animation: circles 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
 #preload .circles div:nth-child(2) {
     animation-delay: -0.5s;
}
 @keyframes circles {
     0% {
         top: 36px;
         left: 36px;
         width: 0;
         height: 0;
         opacity: 1;
    }
     100% {
         top: 0px;
         left: 0px;
         width: 72px;
         height: 72px;
         opacity: 0;
    }
}
/* Head */
 .no-webp #head {
     background-color: #fff;
     background-image: url('/assets/images/head_texture.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
}
 .webp #head {
     background-color: #fff;
     background-image: url('/assets/images/head_texture.webp');
     background-size: 100% 100%;
     background-repeat: no-repeat;
}
 #head .title {
     padding-top: 10vh;
     padding-bottom: 3rem;
}
 #head .title h1 {
     font-family: 'Olivier';
     font-weight: normal;
     text-align: center;
     font-size: 3.5rem;
     color: #fff;
     width: 80%;
     max-width: 750px;
     margin: auto auto;
     line-height: .9;
}
 #head .intro p:nth-child(1), #head .intro p:nth-child(3) {
     font-family: 'Cabin';
     font-weight: 500;
     font-size: 1.6rem;
     color: #fff;
     padding: 0 1rem;
     line-height: 1;
     margin-bottom: .2rem;
}
 #head .intro p:nth-child(2) {
     font-family: "DK";
     font-size: 2rem;
     color: #ffeb4e;
     padding: 0 1rem;
     margin-bottom: .2rem;
	 line-height: .8;
}
 @media (max-width: 768px) {
     #head .title {
         padding-bottom: 1.4vh;
    }
     #head .title h1 {
		 font-size: 3rem;
         line-height: .9;
    }
     #head #head-eggs {
         max-width: 80%;
         display: block;
         margin: auto auto;
         padding-bottom: 1.4vh;
         transition: 2s;
    }
     #head #head-content {
         padding-bottom: 12vh;
    }
}
 @media (max-width: 1200px) {
     #head #head-content {
         padding-bottom: 10vh;
    }
}
/* Responsability */
 #responsability {
     background: #fff;
}
 #responsability .intro {
     padding: 2rem 0;
}
 #responsability .intro h2 {
     font-family: "Cabin";
     font-weight: 500;
     font-size: 1.5rem;
     color: #333333;
     text-align: center;
     margin-top: 5vh;
}
 #responsability .points .point {
     width: 250px;
     height: 250px;
     margin: auto auto;
     text-align: center;
}
 #responsability .points .check {
     width: 60px;
     margin-top: -10px;
}
 #responsability .points .point.point-1 {
     background-image: url('/assets/images/responsability_circle_1.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
}
 #responsability .points .point.point-2 {
     background-image: url('/assets/images/responsability_circle_2.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
}
 #responsability .points .point.point-3 {
     background-image: url('/assets/images/responsability_circle_3.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
}
 #responsability .points .point .content {
     padding: 2rem;
     margin: auto auto;
}
 #responsability .points .point .content p {
     font-family: "DK";
     font-size: 1.5rem;
     text-align: center;
     ;
}
/* Impact */
 #impact {
     background: #fff;
}
 #impact .intro {
     padding: 4rem 0 2rem 0;
     width: 80%;
     max-width: 700px;
     margin: auto auto;
}
 #impact .intro p {
     font-family: "DK";
     font-size: 1.8rem;
     color: #333333;
     text-align: center;
     text-transform: uppercase;
}

 #impact .intro p span {
     background-color: #fff;
     background-image: url('/assets/images/impact_textbackground.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
}

@media (min-width: 769px) {


	.no-webp #impact .cards-container {
		background-color: #fff;
		background-image: url('/assets/images/impact_background_paper.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		z-index: 2;
	}
	.webp #impact .cards-container {
		background-color: #fff;
		background-image: url('/assets/images/impact_background_paper.webp');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		z-index: 2;
	}

}
 #impact .cards-container .impact-card h2 {
     font-family: "olivier";
     font-size: 2rem;
     color: #47a01a;
}
 #impact .cards-container .impact-card p {
     font-family: "Cabin";
     font-size: 1.1rem;
     color: #333333;
}
/* Impact - Our Planet */
 #impact .cards-container .impact-card.impact-card-our-planet {
     margin-top: 2vh;
     background-image: url('/assets/images/impact_card_1_background.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
}
 #impact .cards-container .impact-card.impact-card-our-planet .text-wrapper {
     -ms-transform: rotate(-2deg);
     transform: rotate(-2deg);
     padding: 7rem;
}
/* Impact - Field */
 #impact .cards-container .impact-card.impact-card-field {
     margin-top: 9vh;
     background-image: url('/assets/images/impact_card_2_background.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
     z-index: 3;
}
 #impact .cards-container .impact-card.impact-card-field .text-wrapper {
     -ms-transform: rotate(8deg);
     transform: rotate(8deg);
     padding: 3rem 4.5rem;
}
/* Impact - Animal welfare */
 #impact .cards-container .impact-card.impact-card-animal-welfare {
     margin-top: -5vh;
     background-image: url('/assets/images/impact_card_3_background.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
}
 #impact .cards-container .impact-card.impact-card-animal-welfare .text-wrapper {
     -ms-transform: rotate(1deg);
     transform: rotate(1deg);
     padding: 6rem;
}
/* Impact - Social */
 #impact .cards-container .impact-card.impact-card-social {
     z-index: 1;
     margin-top: -1vh;
     background-image: url('/assets/images/impact_card_4_background.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
}
 #impact .cards-container .impact-card.impact-card-social .text-wrapper {
     -ms-transform: rotate(-3deg);
     transform: rotate(-3deg);
     padding: 5rem;
}
 #impact .hens {
     width: 100%;
     height: auto;
     margin-top: -45vh;
     z-index: 1;
}
 @media (max-width: 768px) {

 .no-webp #impact .cards-container {
     background-color: #fff;
     background-image: url('/assets/images/impact_background_paper_mobile.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
     z-index: 2;
}
 .webp #impact .cards-container {
     background-color: #fff;
     background-image: url('/assets/images/impact_background_paper_mobile.webp');
     background-repeat: no-repeat;
     background-size: 100% 100%;
     z-index: 2;
}


/* Impact - Our Planet */
 #impact .cards-container .impact-card.impact-card-our-planet {
     margin-top: 2vh;
     background-image: url('/assets/images/impact_card_1_background_mobile.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
}
 #impact .cards-container .impact-card.impact-card-our-planet .text-wrapper {
     -ms-transform: rotate(-1deg);
     transform: rotate(-1deg);
     padding: 4.5rem 3rem;
}
/* Impact - Field */
 #impact .cards-container .impact-card.impact-card-field {
     margin-top: 3vh;
     background-image: url('/assets/images/impact_card_2_background_mobile.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
     z-index: 3;
}
 #impact .cards-container .impact-card.impact-card-field .text-wrapper {
     -ms-transform: rotate(5deg);
     transform: rotate(5deg);
      padding: 4rem 3.5rem 6rem 4.55rem;
}
/* Impact - Animal welfare */
 #impact .cards-container .impact-card.impact-card-animal-welfare {
     margin-top: -5vh;
     background-image: url('/assets/images/impact_card_3_background_mobile.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
}
 #impact .cards-container .impact-card.impact-card-animal-welfare .text-wrapper {
     -ms-transform: rotate(1deg);
     transform: rotate(1deg);
     padding: 5rem;
}
/* Impact - Social */
 #impact .cards-container .impact-card.impact-card-social {
     z-index: 1;
     margin-top: -1vh;
     background-image: url('/assets/images/impact_card_4_background_mobile.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
}
 #impact .cards-container .impact-card.impact-card-social .text-wrapper {
     -ms-transform: rotate(3deg);
     transform: rotate(3deg);
     padding: 4.5rem;
}



}
/* Hens */
 #hens {
     background-color: #fff;
     margin-top: -10vh;
}
 #hens .title {
     padding-top: 10vh;
     padding-bottom: 3rem;
}
 #hens .title h1 {
     font-family: 'Olivier';
     font-weight: normal;
     text-align: left;
     font-size: 3.5rem;
     color: #339933;
}
 #hens .content .side-image img {
     width: 100%;
     height: auto;
}
 #hens .content .intro {
     font-family: 'Cabin';
     font-weight: 500;
     font-size: 1.3rem;
     margin-left: -2vw;
}
 #hens .content .list {
     font-family: 'Cabin';
     font-weight: 500;
     font-size: 1.1rem;
}
 #hens .productive-chain {
     background-color: #fff;
     background-image: url('/assets/images/hens_productive-chain_background.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
}
 #hens .productive-chain .intro {
     padding-top: 3vh;
     padding-left: 4vw;
     padding-bottom: 3vh;
}
 #hens .productive-chain .intro h2 {
     font-family: 'DK';
     font-size: 2rem;
     margin-top: 5vh;
}
 #hens .productive-chain .intro p {
     font-family: 'Cabin';
     font-size: 1.2rem;
}
 #hens .productive-chain .intro p.explain {
     font-family: 'Olivier';
     font-size: 1.2rem;
}
 #hens .productive-chain .intro img {
     display: block;
     width: 80%;
     margin: auto auto;
}
 #hens .productive-chain .list {
     padding-top: 3vh;
     padding-right: 4vw;
     padding-bottom: 10vh;
     font-family: 'Cabin';
     font-size: 1.2rem;
     margin-top: 5vh;
}
 #hens .huevometro {
     margin-top: 5vh;
}
 #hens .huevometro .intro {
     padding-left: 8vw;
}
 #hens .huevometro .intro h2 {
     font-family: 'DK';
     font-size: 2rem;
     margin-top: 5vh;
}
 #hens .huevometro .intro p {
     font-family: 'Cabin';
     font-size: 1.1rem;
     padding-top: 1rem;
     padding-bottom: .5rem;
}
 #hens .huevometro .huevometro-image {
     padding-right: 2vw;
}
 @media (max-width: 768px) {
     #hens .title {
         padding-bottom: 1rem;
    }
     #hens .title h1 {
         text-align: center;
    }
     #hens .content .side-image img {
         width: 80%;
         display: block;
         height: auto;
         margin: auto auto;
    }
     #hens .content {
         padding: 2rem;
    }
     #hens .content .intro {
         margin-left: 0;
         padding-top: 1rem;
    }
     #hens .productive-chain .intro h2 {
         margin-top: 11vh;
    }
     #hens .productive-chain .list {
         padding-top: 0;
         padding-bottom: 24vh;
    }
     #hens .huevometro .intro {
         padding-left: 0;
    }
     #hens .huevometro .huevometro-image {
         padding-right: 0;
    }
}
 footer {
     margin-top: 4vh;
}
 footer .logo {
     text-align: right;
}
 footer .logo img {
     width: 100%;
     max-width: 180px;
}
 footer .info .question {
     font-family: 'Olivier';
     font-size: 2rem;
     padding-bottom: 0;
     margin-bottom: 0;
}
 footer .info .contact_us {
     font-family: 'DK';
     font-size: 2.4rem;
     margin-top: -1rem;
}
 footer .info .contact_us span {
     color: #339933;
}
 @media (max-width: 768px) {
     footer {
         text-align: center;
    }
     footer .logo {
         text-align: center;
    }
     footer .logo img {
         max-width: 120px;
         padding-bottom: 1vh;
    }
     footer .info .question {
         font-size: 1.4rem;
    }
     footer .info .contact_us {
         font-size: 1.6rem;
    }
}
/* Certifications and info */
 .no-webp #certifications-and-info {
     background-color: #fff;
     background-image: url('/assets/images/certifications_and_info_background.jpg');
     background-repeat: no-repeat;
     background-size: 100% 100%;
     z-index: 2;
}
 .webp #certifications-and-info {
     background-color: #fff;
     background-image: url('/assets/images/certifications_and_info_background.webp');
     background-repeat: no-repeat;
     background-size: 100% 100%;
     z-index: 2;
}
 #certifications-and-info .container {
     padding-top: 8vh;
}
 #certifications-and-info .certifications {
     background-image: url('/assets/images/certifications_and_info_cert_background.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
     z-index: 2;
}
 #certifications-and-info .certifications .wrapper {
     padding: 5vh 4vw 5vh 4vw;
}
 #certifications-and-info .certifications .wrapper .title h3 {
     font-family: 'DK';
     font-size: 2rem;
     margin-bottom: 2vh;
}
 #certifications-and-info .certifications .wrapper .info .logo {
     text-align: right;
}
 #certifications-and-info .certifications .wrapper .info .logo img {
     width: 100%;
     max-width: 200px;
}
 #certifications-and-info .certifications .wrapper .info h4 {
     font-family: 'Olivier';
     font-size: 1.8rem;
}
 #certifications-and-info .certifications .wrapper .info p {
     font-family: 'Cabin';
     font-size: 1.2rem;
}
 #certifications-and-info .relevant-info {
     margin-top: 5vh;
}
 #certifications-and-info .relevant-info .title h3 {
     font-family: 'Olivier';
     font-size: 3rem;
     color: #fff;
}
/* We produce */
 #certifications-and-info .we-produce {
     background-image: url('/assets/images/certifications_and_info_we_produce_background.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
}
 #certifications-and-info .we-produce .card-content {
     padding: 3rem;
     -ms-transform: rotate(-2deg);
     transform: rotate(-2deg);
}
 #certifications-and-info .we-produce .card-content p {
     font-family: 'DK';
     font-size: 1.8rem;
     line-height: .9;
}
 #certifications-and-info .we-produce .card-content p span {
     color: #339933;
}
#certifications-and-info .we-produce .card-content .icon {
     text-align: left;
}

#certifications-and-info .we-produce .card-content .icon img {
	 margin-top: 3vh;
	 height: 50%;
	 width: auto;
}

/* We have */
 #certifications-and-info .we-have {
     background-image: url('/assets/images/certifications_and_info_we_have_background.png');
     background-repeat: no-repeat;
     background-size: 100% 110%;
	 margin-left: -5vw;
}
 #certifications-and-info .we-have .card-content {
     padding: 3rem;
     -ms-transform: rotate(-2deg);
     transform: rotate(-2deg);
}
 #certifications-and-info .we-have .card-content p {
     font-family: 'DK';
     font-size: 1.9rem;
     line-height: .9;
}
 #certifications-and-info .we-have .card-content p span {
     color: #339933;
}

#certifications-and-info .we-have .card-content .icon {
     text-align: left;
}

#certifications-and-info .we-have .card-content .icon img {
	 margin-top: 2vh;
	 height: 50%;
	 width: auto;
}

/* We are */
 #certifications-and-info .we-are {
     background-image: url('/assets/images/certifications_and_info_we_are_background.png');
     background-repeat: no-repeat;
     background-size: 100% 110%;
	 margin-left: 5vw;
}
 #certifications-and-info .we-are .card-content {
     padding: 3rem;
     -ms-transform: rotate(-2deg);
     transform: rotate(-2deg);
}
 #certifications-and-info .we-are .card-content p {
     font-family: 'DK';
     font-size: 1.8rem;
     line-height: .9;
}
 #certifications-and-info .we-are .card-content p span {
     color: #339933;
}
#certifications-and-info .we-are .card-content .icon {
     text-align: left;
}


  #certifications-and-info #map-container .dots {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
	margin-left: -6vw;
	margin-top: -3vh;
    animation: map-dots-animation 4s infinite;
 }

 
#certifications-and-info #map-container .map {
    width: 100%;
    padding: 0;
    margin-left: -6vw;
	margin-top: -3vh;
}


 @keyframes map-dots-animation {
     0% {
         filter: opacity(0);
    }
     50% {
         filter: opacity(.5);
     }
     100% {
         filter: opacity(1);
     }
}

 @media (max-width: 768px) {

 #certifications-and-info .certifications {
     background-image: url('/assets/images/certifications_and_info_cert_background_mobile.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
     z-index: 2;
}

     #certifications-and-info .certifications .wrapper .info .logo {
         text-align: center;
    }
     #certifications-and-info .certifications .wrapper .info .logo img {
         width: 80%;
         max-width: 140px;
    }

	/* We produce */
	 #certifications-and-info .we-produce .card-content {
     padding: 2rem;
	 }

	/* We have */
	#certifications-and-info .we-have {
		margin-left: 0;
	}
	#certifications-and-info .we-have .card-content {
		padding: 2rem;
	}

	/* We are */
	#certifications-and-info .we-are {
		background-size: 100% 100%;
		margin-left: 0;
	}

	#certifications-and-info .we-produce .card-content p,
	 #certifications-and-info .we-have .card-content p,
	 #certifications-and-info .we-are .card-content p {
     font-size: 1.4rem;
	}

    /* Map */
    #certifications-and-info #map-container .dots,
    #certifications-and-info #map-container .map {
        margin-top: 0;
        margin-left: 0;
    }
}