/*
Theme Name: Machu Picchu Foods Tema
Theme URI: https://mcp.com
Description: Tema para Machu Picchu Foods
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/

html * {    
  font-family: Montserrat, sans-serif;
  zoom: 100%;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*main{
  overflow: hidden;
}*/

h1{
  font-size:1.875rem;
  color:#353535;
}

body{
  -ms-overflow-style: none;
}

.f300{
  font-weight: 300;
}


.f400{
  font-weight: 400;
}

#video{
  background: rgba(250, 243, 238, 1)!important;
}


.title-section{
  font-size:2.93vw;
  color:#353535;
  overflow: hidden;
  font-weight: 500;
  line-height: 3.22vw;
  
}

.text-left{
text-align: left;
}
.title-section b{
  font-size:2.93vw;
  color:#353535;
  font-weight: 700; 
  color:#353535;
}

.title-section4{
  font-size:2.93vw;
  color:#353535;
  overflow: hidden;
  font-weight: 600;
  line-height: 3.22vw;
}

.title-section5,.gsection_title{
  font-size:2.08vw;
  color:#353535!important;
  overflow: hidden;
  font-weight: 600;
  line-height: 2.75rem;
}

.navbar-brown{
  width:45%!important; 
}
 

.title-section-noticia{
  font-style: normal;
font-weight: 700;
font-size: 2.34vw;
line-height: 3.22vw;
text-transform: uppercase;

/* Primary/gris oscuro */

color: #353535;
}

#wwlestandares{
  padding-top:15px;
  padding-bottom: 15px;
}

.top-0{
top:0px!important;

}

.gform_heading{
display:none!important;
}

.form-products input{
    background-color: transparent;
    border: 2px solid #B9967FCC;
    color: #676164;
    font-size: 16px;
    background-position: right 1.75rem center;
    background-size: 19px 19px;
    text-transform: uppercase!important;
    border-radius:2rem;
    padding: .5rem!important;
        padding-left: 1rem!important;
        margin-right: 0.2rem!important;
}
.form-products textarea{
    background-color: transparent;
    border: 2px solid #B9967FCC;
    color: #676164;
    font-size: 16px;
    background-position: right 1.75rem center;
    background-size: 19px 19px;
    text-transform: uppercase!important;
    border-radius:1rem;
    padding: .5rem!important;
        padding-left: 1rem!important;
        margin-right: 0.2rem!important;
}

.form-products select{
background-color: transparent;
    border: 2px solid #B9967FCC;
    color: #676164;
    font-size: 16px;
    background-position: right 1.75rem center;
    background-size: 19px 19px;
    text-transform: uppercase!important;
    border-radius:2rem;
    padding: .5rem!important;
        padding-left: 1rem!important;
        margin-right: 0.2rem!important;
         appearance:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    font-weight: 400;
    line-height: 1.5;
}

.form-products input:focus, .form-products select:focus,.form-products textarea {

    box-shadow: 0 0 0 0.25rem rgba(185, 150, 127,.25);
    border-color:#B9967F;
}

.form-products select option{
  color:#353535;
  background: white;
  text-transform: uppercase;
}

.form-products select option:hover{
  background: #FAF3EE;
}

.form-products .gform_button{
text-decoration: none;
    background: transparent;
    width: 12.23vw;
    height: 3.06rem;
    border: 2px solid #AFAA4C;
    border-radius: 25px;
    color: #AFAA4C;
    font-weight: 700;
    padding: 12px 1rem!important;
    text-shadow: 0px 3px 10px rgba(83, 83, 83, 0.05);
	text-transform: none!important;
}

.form-products .gform_button:hover {
    background: #AFAA4C;
    color: white;
}

.form-products .gform_footer{
	float:right;
}


/*contacto wp*/

.form-contacto input{
    background-color: transparent;
    border: 2px solid #B9967FCC;
    color: #676164;
    font-size: 16px;
    background-position: right 1.75rem center;
    background-size: 19px 19px;
    text-transform: uppercase!important;
    border-radius:2rem;
    padding: 1rem!important;
        padding-left: 2rem!important;
        margin-right: 0.25rem!important;
}

.form-contacto textarea{
    background-color: transparent;
    border: 2px solid #B9967FCC;
    color: #676164;
    font-size: 16px;
    background-position: right 1.75rem center;
    background-size: 19px 19px;
    text-transform: uppercase!important;
    border-radius:1rem;
    padding: 1rem!important;
        padding-left: 2rem!important;
        margin-right: 0.25rem!important;
}

.form-contacto select{
background-color: transparent;
    border: 2px solid #B9967FCC;
    color: #676164;
    font-size: 16px;
    background-position: right 1.75rem center;
    background-size: 19px 19px;
    text-transform: uppercase!important;
    border-radius:2rem;
    padding: 1rem!important;
        padding-left: 2rem!important;
        margin-right: 0.25rem!important;
    appearance:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    font-weight: 400;
    line-height: 1.5;
}

.form-contacto input:focus, .form-contacto select:focus,.form-contacto textarea {

    box-shadow: 0 0 0 0.25rem rgba(185, 150, 127,.25);
    border-color:#B9967F;
}

.form-contacto select option{
  color:#353535;
  background: white;
  text-transform: uppercase;
}

.form-contacto select option:hover{
  background: #FAF3EE;
}

.form-contacto .gform_button{
text-decoration: none;
    background: transparent;
    width: 12.23vw;
    height: 3.06rem;
    border: 2px solid #AFAA4C;
    border-radius: 25px;
    color: #AFAA4C;
    font-weight: 700;
    padding: 12px 1rem!important;
    text-shadow: 0px 3px 10px rgba(83, 83, 83, 0.05);
}

.form-contacto .gform_button:hover {
    background: #AFAA4C;
    color: white;
}

/*fin contacto wp*/


 


/* slider */

  .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align:center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
.swiper-button-next, .swiper-button-prev{
width:50px!important;
height:50px!important;
color:#ff7a46!important;
border-radius:50%;
border:3px solid #ff7a46;
}
.swiper-button-next:hover, .swiper-button-prev:hover{
background-color:#ff7a46;
border:3px solid white;
color:white!important;
}



.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
font-size:25px!important;
stroke:#ff7a46!important;
stroke-width:3;
-webkit-text-stroke:medium;
}


/* */
.share-btn:hover{
	cursor: pointer;
}
.animateb {
  opacity: 0;
  transition: all 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animateb.active {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%);
  z-index:9999;
}
.notification-button {
  position: fixed;
  top: 250px;
  left: 50%;
  padding: 10px 20px;
  background: #343a40;
  color: #eeeeee;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.05);
}
.slide-in-down {
  transform: translateY(-100%) translateX(-50%);
}

/*suscripcion wp*/

.form-suscripcion input,.hs-input{
    background-color: transparent;
    border: 2px solid #B9967FCC;
    color: #676164;
    font-size: 16px;
    background-position: right 1.75rem center;
    background-size: 19px 19px;
    text-transform: uppercase!important;
    border-radius:2rem;
    padding: 1rem!important;
        padding-left: 2rem!important;
        margin-right: 0.25rem!important;
}

.form-suscripcion textarea{
    background-color: transparent;
    border: 2px solid #B9967FCC;
    color: #676164;
    font-size: 16px;
    background-position: right 1.75rem center;
    background-size: 19px 19px;
    text-transform: uppercase!important;
    border-radius:1rem;
    padding: 1rem!important;
        padding-left: 2rem!important;
        margin-right: 0.25rem!important;
}

.form-suscripcion select{
background-color: transparent;
    border: 2px solid #B9967FCC;
    color: #676164;
    font-size: 16px;
    background-position: right 1.75rem center;
    background-size: 19px 19px;
    text-transform: uppercase!important;
    border-radius:2rem;
    padding: 1rem!important;
        padding-left: 2rem!important;
        margin-right: 0.25rem!important;
    appearance:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    font-weight: 400;
    line-height: 1.5;
}

.form-suscripcion input:focus, .form-suscripcion select:focus,.form-suscripcion textarea {

    box-shadow: 0 0 0 0.25rem rgba(185, 150, 127,.25);
    border-color:#B9967F;
}

.form-suscripcion select option{
  color:#353535;
  background: white;
  text-transform: uppercase;
}

.form-suscripcion select option:hover{
  background: #FAF3EE;
}

.form-suscripcion .gform_button,.hs-button{
background: #EB8050;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* width: 12vw; */
    padding: 11px 44px!important;
    /* height: 3.37vw; */
    text-decoration: none;
    border: 2px solid #EB8050;
    border-radius: 30px;
    /* font-size: 1.17vw; */
    font-weight: 700;
    text-transformarion:none!important;
}

.form-suscripcion .gform_button:hover {
    background-color: transparent;
    border: 2px solid #EB8050;
    color: #EB8050;
}

.form-suscripcion .gform_footer{
float:right;
}

/*fin sus wp*/
.gform_confirmation_message{
color: #353535;
    border: 2px solid #AFAA4C;
    padding: 5px;
}


.title-section-brown{
font-style: normal;
font-weight: 500;
font-size: 2.93vw;
line-height: 3.58vw;
/* identical to box height */

text-transform: uppercase;
color: #B9967F;
}

.subtitle-section{
  font-size:2.5rem;
  line-height: 2.75rem;
  font-weight: 500;
  text-transform: uppercase;
  color: #353535;
}

.subtitle-section b{
  font-weight: 700;
  font-size:2.5rem;
  color: #353535;
}

.date p{
  font-style: normal;
font-weight: 400;
font-size: 0.875rem;
line-height: 20px;
/* identical to box height, or 143% */
position: relative;
/* Primary/gris claro */

color: #676164;
}

.date p b{
  font-style: normal;
font-weight: 700;
font-size: 0.875rem;
line-height: 20px;
/* identical to box height, or 143% */
position: relative;
/* Primary/gris claro */

color: #676164;
}

.date:before{
  content:'\f214';
  position: absolute;
  font-family: 'bootstrap-icons';
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 20px;
  margin-top:4px;
/* identical to box height, or 143% */
  
  width: 25px;
/* Secondary/verde claro */

color: #AFAA4C;

}

.contacto2 .title-section{
   font-size:2rem;
   font-weight: 700;
   line-height: 2.2.75rem;
}
.gfield_description{
font-size:14px;
font-weight:400;
color:#676164;
}
.contacto2 .p-section{
  font-size: 1.17vw;
  font-weight: 300;
  line-height: 24px;
  text-align: left;
}

.contacto2 .p-section p{
  font-size: 1.17vw;
  font-weight: 300;
  line-height: 24px;
  text-align: left;
}



.contacto2 .form-control,.contacto2 .form-select{
  width: 324px;
}

.sticky_top{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
    height:90px!important;
}

.contacto2 #areatext{
  width: 100%;
}

.subtitle-noticia{
  font-size:1.76vw;
  color:#353535;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.76vw;
  font-weight:  700;
}
.nav-up {
    top: -40px;
}

.nav-down{
  top:0px;
}

.title-cocoa{
  font-size:1.76vw;
  color:#353535;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.76vw;
  text-transform: uppercase;
  top:5%; left:10%;
  color:white;
    text-align: left;
}

.title-cocoa b{
  font-weight: 700;
  font-size:1.76vw;
  top:5%; left:10%;

}

#estandares{
  height: 34.69rem;
}



#estandareslqh{
  height: 40.69rem;
}

.aliado .nav-link img{
  width: 20.9vw;
   min-height: 24.81vw;
   
}


.aliado .nav-link img{
  transition: all 0.8s ease;
  filter: brightness(60%);
}

.aliado .nav-link img:hover, .aliado .active img{
  transition: all 0.6s ease ;
  filter: brightness(100%);
}

.aliado .active:after{
  content:'';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -1.875rem;
    width: 0;
    height: 0;
    border-bottom: solid 1.875rem #FAF3EE;
    border-left: solid 1.875rem transparent;
    border-right: solid 1.875rem transparent;
    padding-top: 10px;  
}

.size-icon{
  width: 6.5vw;
  height: 6.5vw;
  transition: .5s ease;
}



.pcert .nav-link{
  height: 150px;
}

.pcertsvg .nav-link{
padding-left:2.5rem;
padding-right:2.5rem;
}

.pcert .nav-link img{
  min-width: 80px;
  height: 80px;
  transition: all 0.6s ease;
  filter: brightness(60%);
}

.pcert .nav-link img:hover, .pcert .active img{
  transition: all 0.6s ease ;
  filter: brightness(100%);
}
.certs .carousel-item .active img{
  border-right: 2px solid #B9967F!important;
  border-left: 2px solid #B9967F!important;
  padding-left: 15px!important;
  padding-right: 15px!important;
}

.certs .carousel-item .active{
  border-right: 2px solid #FAF3EE!important;
  border-left: 2px solid #FAF3EE!important;
  padding-left: 15px!important;
  padding-right: 15px!important;
}

.pcert .carousel-item .active img{
  border-right: 2px solid #B9967F;
  border-left: 2px solid #B9967F;
  padding-left: 15px;
  padding-right: 15px;
}


.pcert img{
  padding-left: 15px;
  padding-right: 15px;
}

.certs .carousel-inner .nav-item{
  height: 10.3vw!important;
}

.certs .carousel-control-prev-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%25353535'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E")!important;
}

.certs .carousel-control-next-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='53535'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.certs button{
  border:0px!important;
  background: transparent!important;
}

.pcert .nav-item .active:after{
  content:'';
    position: absolute;
    top: 85%;
    left: 50%;

    margin-left: -1.875rem;
    width: 0;
    height: 0;
    border-bottom: solid 1.875rem white;
    border-left: solid 1.875rem transparent;
    border-right: solid 1.875rem transparent;
    padding-top: 10px;  
    transition: all 0.1s ease ;

}

.pcert .carousel-item .active:after{
  content:'';
    position: absolute;
    top: 75%;
    left: 50%;

    margin-left: -1.875rem;
    width: 0;
    height: 0;
    border-bottom: solid 1.875rem white;
    border-left: solid 1.875rem transparent;
    border-right: solid 1.875rem transparent;
    padding-top: 10px;  
    transition: all 0.1s ease ;

}

.cocoa{
  text-align: left;

}

.cocoa .nav-link{
   background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("images/cocoa-fondo.png");
   background-size: cover;
   min-width: 18.43rem;
   min-height: 370px;
}

.form-control{
  text-transform: uppercase!important;
}

.form-control:focus, .form-select:focus {

    box-shadow: 0 0 0 0.25rem rgba(185, 150, 127,.25);
    border-color:#B9967F;
}

.form-select option{
  color:#353535;
  background: white;
  text-transform: uppercase;
}

.form-select option:hover{
  background: #FAF3EE;
}



.dropdown-item:focus, .dropdown-item:hover {
    color: #ffffff!important;
    background-color: #dc3545!important;
    padding: 12px;
}


.cocoa .active:after{
  content:'';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -1.875rem;
    width: 0;
    height: 0;
    border-bottom: solid 1.875rem #fff;
    border-left: solid 1.875rem transparent;
    border-right: solid 1.875rem transparent;
    padding-top: 20px;
}

.w49{
  width: 49%;
}

.w50{
  width: 50%!important;
}
.flickity-prev-next-button .arrow {
    fill: orange!important;
}
.flickity-prev-next-button:hover .arrow {
    fill: white!important;
}
.flickity-prev-next-button {
    background: transparent!important;
    border: 2px solid rgba(235, 128, 80, 1)!important;
}
.flickity-prev-next-button .flickity-button-icon {
    position: absolute;
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
    /* font-size: 12px; */
}

.flickity-prev-next-button.next {
    right: 20px!important;
}
.flickity-prev-next-button:hover {
    background: rgba(235, 128, 80, 1)!important;
}

.prod-cacao-p1 {
    left: 0;
    z-index: 99;
    top: 550px!important;
    left: -270px!important;
}
.prod-cacao-p3 {
    left: 60%;
    z-index: 99;
    top: 450px!important;
    /* bottom: 120px!important; */
    left: 550px!important;
}
.prod-cacao-p2 {
    left: -8%;
    z-index: 99;
    /* bottom: 260px!important; */
    top: 400px!important;
}


/* tabs terminos */

.sectioncacao .p-section{

}


.mensaje{
  background: url(images/mensaje1.png);
  background-size: contain;
  background-repeat: no-repeat;
  width:500px;height: 200px;
}
.mensaje:hover{
  background:url(images/mensaje2.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.serviciosta{
  background: url(images/servicios.png);
  background-size: contain;
  background-repeat: no-repeat;
  width:609px;height: 93px;
}

.redesta{
  width:80px;
  height: 80px;
  border-radius: 50%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.redesta i{
color:gray;
font-size:2.5rem;
top:-5px;
position: relative;
transition: all .5s ease;
}
.redesta:hover{
  background: skyblue;
  transition: all .5s ease;
}

.redesta:hover i{
  color:white;
  transition: all .5s ease;
}



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

 .vector-map{
  overflow-x: hidden;
  overflow-y:hidden;
} 
 .mensaje{
  background: url(images/mensaje1.png);
  background-size: contain;
  background-repeat: no-repeat;
  width:320px;height: 100%  ;
}
.serviciosta{
  background: url(images/mservicios.png);
  background-size: contain;
  background-repeat: no-repeat;
  width:322px;height: 168px;
}
main{
  overflow: hidden;
  background:white;
}
#banner{
  top:80px!important;
}
}


.mega-menu{
  z-index: 104!important;
}
.cocoa button{
  /*background:url(images/cocoa-fondo.png); background-size:cover; min-width: 250px;min-height: 350px;*/
}

.cocoa img{
  width: 250px!important;
}

.cita{
  font-size: 2rem;
  line-height: 38px;
  font-style: normal;
  font-weight: 500;
  max-width: 500px;
  color:rgba(103, 97, 100, 1);
  z-index: 100;
  position: relative;
}

.cita:before{
  content: '“';
  position: absolute;
  width: 3.66vw;
  font-weight: 500;
  font-size: 8.78vw;
  line-height: 4.1vw;
  color: #E9C3AA;
  left:-25px;
  z-index: -1;
}

.sub-cita{
  font-weight: 500;
  font-size: 1.46vw;
  line-height: 1.76vw;
  text-align: justify;
  color:#676164;
}

.label-imagen {
    width: 21.96vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #676164;
    font-size: 1.46vw;
    font-weight: 600;
    text-align: right;
}
.det-imagen{
  display: flex;
  flex-direction: row;

  width: 100%;
  text-align: center;
}

.label-descarga{
  width: 25.76vw;
  margin-top:2vw;
  height: 3.4vw;
  border-radius: 20px 20px 0px 0px;
  padding: 0px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #AFAA4C;
  color:white;
  font-size: 1.17vw;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.17vw;
}

.link-detalle{
  font-size: 1.46vw;
  font-weight: 600;
  color:#353535;
  height: 5.4vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-bottom: 1px solid #AFAA4C;
}

.link-detalle li img{
  max-width: 4.17vw;

}

.flickity-prev-next-button svg {
    position: absolute;
    left: 30%!important;
    top: 30%!important;
    width: 40%!important;
    height: 40%!important;
    stroke: #ff7a46;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flickity-prev-next-button:hover svg {
    position: absolute;
    left: 30%;
    top: 30%;
    width: 40%;
    height: 40%;
    stroke: white;
    stroke-width: 5px;
}

.mapaperu .det-imagen{
  width: auto!important;
  padding-left: 15px;
  padding-right: 15px;
}

.mapaperu .label-imagen{
  width: 14.2vw!important;
}

.float-right{
  float: right!important;
}


/*pginacion*/

.pagination{
    border:1px solid white;
    display: flex;
    padding-left: 0;
    list-style: none;
}

.disabled>.page-link, .page-link.disabled{
  background: white;
  text-decoration: underline;
  color:rgba(103, 97, 100, 0.8);
  border:0px;
}

.page-link{
  border:0px;
  color: #676164!important;

}

.next{
  color: #EB8050;
  text-decoration: underline;
}

.active>.page-link, .page-link.active{
  background: #EB8050;
  border:1px solid #EB8050;
}

.pagination .page-link{
  border:0px;
  color: #676164!important;
  font-size:1.125rem!important;
  font-weight: 500!important;
}

.pagination .active>.page-link, .pagination .page-link.active{
  background: #EB8050;
  border:1px solid #EB8050;
  color:white!important;
  border-radius: 5px;
}

.pagination .next{
  color:#eb8050!important;
}

.pagination .disabled .page-link{
  color:#6761644d!important;
}


/* paginacion*/


.link-detalle li{
  flex-direction:column; text-align: center;
  align-items: center;
  justify-content: center!important;
    vertical-align: middle;
    align-content: center;
    align-items: center!important;
}

.link-detalle li .texto{
  font-weight: 500;
font-size: 1.03vw;
line-height: 20px;
  color: #676164; 
}

.products-info {
  text-align: justify;
  line-height: 26px!important;
}

.link-detalle img{
  /*width:57px!important;*/
  height: 60px!important;
}
.peru{
  fill: rgba(235, 128, 80, 1)!important;
}

.bannerpane{
  margin-top:50px;
}
.pcert .pcertsvg img{
  filter: grayscale(1);
}

.grayscale{
  filter: grayscale(1);
}

.pcert .pcertsvg .active img{
  filter:none;
}

.p-section-sub{
  font-size: 1.02vw!important;color:#676164;
  line-height:18px;
}

.link-descarga{
  font-size: 1.46vw;
  font-weight: 600;
  color:#353535;
  height: 5.4vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top:2vw;
}
/*
.link-descarga:after{
  content: '\e094';
  font-family: 'Font Awesome 6 Free';
  font-size: 1.46vw;
  font-weight: 600;
  padding-left: 5px;
  color:#353535;
  padding-left: 15px;
}*/

.download{
  text-decoration: none;
  color:#353535;
  font-size: 1.17vw!important;
  font-weight: 600!important;
}

.terminos-descarga .link-descarga{
    height:3.51vw!important;
    width:100%!important;
    font-size:1.17vw!important;
}

.terminos-descarga .label-descarga{
    height:3.51vw!important;
    width:85vw!important;
    border-radius: 20px 20px 0px 0px;
    font-size:1.17vw!important;
}


.sostenibilidad-descarga .link-descarga{
    height:3.51vw!important;
    width:100%!important;
    margin-top: 2vw;
}
.scroll-images{
   width: 100%;
  height: auto;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; 
}
.scroll-images::-webkit-scrollbar {
   -webkit-appearance: none;
}

.child {
  width: 120px;
  height: 100px;
  margin: 1px 10px;
  overflow: hidden;
}

.cover {
  padding: 0px 30px;
  position: relative;
}

.bc-mb-rosado{
  background: #FAF3EE!important;
}

.cover .pcert .nav-item .active:after{
  top:80%!important;
}
.left {
  position: absolute;
  left: 0;
  top: 45%!important;
  transform: translateY(-50%);
  z-index: 446;
}
.right {
  position: absolute;
  right: 0;
  top: 45%!important;
  transform: translateY(-50%);
  z-index: 446;
}
.flickity-prev-next-button:focus {
    outline: none;
    box-shadow: 0 0 0 5px #FAF3EE!important;
}

.cover-tab{
  top:-20px;
  position: relative;
}
.sostenibilidad-descarga .label-descarga{
    height:3.51vw!important;
    width:100%!important;
    border-radius: 20px 20px 0px 0px;
}


.title-section-brown b{
  font-size:2.93vw;
  color: #B9967F;
  font-weight: 700; 
}

.title-section-product{
font-style: normal;
font-weight: 700;
font-size: 4.39vw;
line-height: 5.34vw;
color: #6E4C1E;
/* identical to box height */
}

.title-section-formulario{
  font-style: normal;
font-weight: 600;
font-size: 2.19vw;
line-height: 3.22vw;
/* identical to box height, or 147% */


/* Primary/gris oscuro */

color: #353535;
}

.subtitle-section-product{
  font-style: normal;
font-weight: 600;
font-size: 2.2vw;
line-height: 1.76vw;
/* identical to box height, or 80% */


/* Primary/gris oscuro */

color: #353535;
}

.z-index100{
  z-index: 100;
}

.z-index101{
  z-index: 101;
}

.z-index446{
z-index:446;
}

.z-index999{
  z-index: 999;
}

.controles a{
  background: transparent;
    border: 2px solid rgba(235, 128, 80, 1);
    /* position: absolute; */
    /* top: 50%; */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: .5 ease-out;
}

.controles a:hover, .controles a:focus, .controles a:active{
  background: rgba(235, 128, 80, 1);
    border: 2px solid white;
    }

.controles a svg {
    position: absolute;
    left: 30%;
    top: 30%;
    width: 40%;
    height: 40%;
    fill:rgba(235, 128, 80, 1);
}

.controles a:hover svg{
  fill:white;
}

.abs-center {
  display: flex;
  align-items: center;
  min-height: 100vh;
}

.abs-center-down {
  display: flex;
  align-items: end;
  min-height: 100vh;
}

.abs-center-80{
  display: flex;
  align-items: center;
  min-height: 80vh;
}

.abs-center-60{
  display: flex;
  align-items: center;
  min-height: 60vh;
}

.title-section2{
  font-size:2.78vw;
  color:#353535;
  overflow: hidden;
  font-weight: 500;
  line-height: 3.22vw;
  text-transform: uppercase;
}

hr{
  color:black!important;
}

/*
.ul-footer li a{
  font-size: ;
}*/

.title-section2 b{
  font-size:2.71vw;
  color:#353535;
  font-weight: 700; 
}

#video iframe{
width:45vw;
height:26vw;
}

.align-circle-4{
  text-align: right!important;
}

.title-section3{
font-size: 1.76vw;
    font-weight: 700;
    line-height: 2.12vw;
    color: #353535;
}
/*
.title-section3 b{

}*/

@keyframes animtext { 
  from {
      width: 0;
     transition: all 1s ease-in-out;
  } 
}

.topnav{
  background:#B9967F !important;
  color:white !important;
  position:relative;
  padding-left:4%;
  height: 2.93vw;
}

.topnav::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  border-bottom:2.93vw solid white;
  border-right:1.875rem solid #B9967F;
}

#proudly{
  background:white;
}


.mision{
  margin-top:150px;
}
#proudly .diagonalp{
  background: #FAF3EE;
  clip-path: polygon(0 23%, 100% 13%, 100% 100%, 0% 100%);
  width: 100%;
  height: 100%;
  z-index: 99;
}

#productbanner .diagonalpb{
  background: #FAF3EE;
  clip-path: polygon(0 99%, 100% 78%, 100% 100%, 0 100%);
  width: 100%;
  height: 100%;
  z-index: 99;
  bottom:-3px;
}


.vertical-line{
  right:0px;z-index: 98;
}

#whoweare .cacao2{
  width: 28px;
  height: 23px;
  position: absolute;
  left:25%;
  top:75%;
  animation: fadeInFromTop .3s linear forwards, floating ease 6s infinite;
}

#whoweare .lineas{
  position: absolute;
  left:0%;
  top:60%;
  z-index: 99;
  width: 37rem;
}

.gallery, .carousel1 {
  background: transparent;
  z-index: 100;
}

.galleryleft .gallery-cell {
  width: 21.82vw;
  height: 34vw;
  margin-right: 10px;
  background: #8C8;
  counter-increment: gallery-cell;
}

.certificados img{
  width:5.42vw;
}


.galleryright .gallery-cell , .galleryright .carousel1-cell{
  width: 21.74vw;
  height: 27.8vw;
  margin-right: 10px;
  background: transparent;
  counter-increment: gallery-cell;
}

.flickity-slider{
transform: translateX(40.71%);
}

.flickity-page-dots{
  display: none;
}

.flickity-prev-next-button{
  background: transparent;
  border:2px solid rgba(235, 128, 80, 1);
}

.flickity-prev-next-button:hover{
  border:2px solid white;
  background: rgba(235, 128, 80, 1);
}

.flickity-prev-next-button:hover .arrow{
  fill:white;
}

.flickity-prev-next-button .arrow{
  fill:rgba(235, 128, 80, 1);
}

.galleryleft .flickity-prev-next-button.next{
  right:-4vw;
}

.galleryright .flickity-prev-next-button.previous{
  left:-4vw;
}

.roasted-img{
 width:100%!important ; 
}




@media (min-width: 1530px) {

.diagonal-box4{
  padding-top:2rem;
}
.prod-cacao-p1 {
    left: 0;
    z-index: 99;
    top: 650px!important;
    left: -270px!important;
}
.prod-cacao-p3 {
    left: 60%;
    z-index: 99;
    top: 500px!important;
    /* bottom: 120px!important; */
    left: 650px!important;
}
.prod-cacao-p2 {
    left: -8%;
    z-index: 99;
    /* bottom: 260px!important; */
    top: 400px!important;
}
  .front-grano2-sust{
      left: 40%;
  z-index: 99;
  bottom: 28vw!important;
}

.front-dotted-sust{
      bottom:11vw!important;
}
  .front-cbserv {
    left: 27%;
    top: 160px!important;
    z-index: 100;
}


  #search button[type="submit"] {

  width: 30px!important;
  height: 30px!important;

}
  .prod-cacao2 {
    left: 15%;
    z-index: 99;
    bottom: 210px!important;
}

.prod-cacao3 {
    left: 60%;
    z-index: 99;
    bottom: 120px!important;
}

.carouselwwl .flickity-viewport{

  }

.prod-cacao1 {
    left: 0;
    z-index: 99;
    bottom: 30px!important;
}

  .prod-dotted {
    left: 0;
    z-index: 99;
    bottom: 70px!important;
}
  
  .front-cb1 {
    left: 24%!important;
    top: 215px!important;
    z-index: 100;
}

  .cocoa .active:after{
    top:101%!important;
  }
  .nosotros-dotted-line{
    left: 0;
    z-index: 98;
    bottom: -195px!important;
  }

  .front-grano-nosotros {
    left: 15%;
    z-index: 98;
    bottom: -196px!important;
}
  .diagonal-box3:before {
    content: '';
    position: absolute;
    top: 0px;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #FAF3EE;
    clip-path: polygon(100% 60%, 0 100%, 100% 100%)!important;
    height: 182px!important;
    padding: 0 0 0 0;
  }

  .mision {
    margin-top: 180px!important;
  }

  #estandares{
    height: 37.5rem!important ;
  }

  .roasted-img{
      width: 780px!important   ;
    }

  .slider1{
  width:  384px!important ;
}

  #estandareslqh{
    height: 44.5rem!important ;
  }

  #banner{
    background-repeat: no-repeat; background-size:cover ; background-position: center; height:78vh!important;
    z-index: 1000;
  }

.wwaline{
  width: 41rem!important;
}

.idioma .nav-link{
  font-size: 15px;
  background-color:#AA8771;height: 95%!important;
}


.front-choc2{
  left:0%;
  top:-400px!important;
  z-index: 99;
}

.front-cacao1{
  left:15%;
  top:108%!important;
  z-index: 99;
}

.front-cacao2{
  left:25%;
  top:93%!important;
  z-index: 99;
}

  .topnav::before{
  border-bottom:2.93vw solid white;
}

/*.vector-map{
  height: 62rem!important;
  margin-top:1.25rem!important;
}*/
  .vertical-line{
    left:39.5%!important;z-index: 98;
    top:-36px!important;
  }

  .vertical-line img{
  height: 98.4vw!important;
}
  .products .title-bottom2{
    top:92%!important;
    text-align:left;
  }
    .align-circle-4{
    text-align: left!important;
  }

  .cocoa .nav-link{
   background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("images/cocoa-fondo.png");
   background-size: cover;
   min-width: 21.43rem;
   min-height: 400px;
}

.tooltip { 
  pointer-events:none; /*let mouse events pass through*/  opacity:0; 
  transition: 
    opacity 0.3s; 
  fill: black; }

.tooltip text { 
  font-size: 58.5vw; 
  font-weight: bold; 
  text-align: center; 
}

/*  .izquierdo{
  clip-path: polygon(0% 0%, 98% 0, 92% 100%, 0% 100%)!important;
}

.derecho{
clip-path: polygon(8% 0, 100% 0%, 100% 100%, 2% 100%)!important;
}*/


  }

.topnav .nav-link{
  color:white!important;
}

.subnav {
  float: left;
  overflow: hidden;
}

/* Style the subnav content - positioned absolute */
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: red;
  width: 100%;
  z-index: 1;
}

.subnav:hover .subnav-content {
  display: block;
}

#video:after{
  content: '';
  background: url(images/recursocacao1.png);
  position: absolute;
  bottom: 0%;
  left:3%;
}

.white{
  color:white!important;
}

.vh-90{
  height: 90vh!important;
}

.vh-80{
  height: 80vh!important;
}

.fixed-top{
  height: 90px!important;
  padding-top:0;
  padding-bottom: 0;
  transition: .5s ease;
  z-index: 999;
  padding-top:0px!important;
}

#navbar_top{
  padding-top: 2.78vw;
  background: white;
  height: 128px;
}



.hscroll{
    /*top: -2.928vw;*/
    position: relative;
}

.h-90px{
  height: 87px!important;
}

@media (min-width: 1530px) {

.boton-orange{
  padding:10px 44px!important;
}
   .h-90px{
  height: 83px!important;
}
  }

.imagen-logo{
  width:100px;
}

.h1-interno{
  font-size:7.32vw!important;
  font-weight: 700!important;
  line-height: 7.32vw!important;
}

.ultel li{
  /*border-right: 1px solid #fff;*/
  float: left;
    list-style: none outside none;
    padding-left: 5px;
    padding-right: 5px;
    width: auto;
}

.ultel li:first-child{
  /*border-right: 2px solid white;*/
  top:6px;
  bottom:6px;
  height: 95%;
  position: static;
}

.ultel li:last-child{
  border-right: 0px;
}

.ultop .idioma{
  /*border-right: 1px solid #fff;*/
  float: left;
    list-style: none outside none;
    padding-left: 15px;
    padding-right: 15px;
    width: auto;
}

.snack{
  display: block;
}

.snack19{
  display: none;
}

.idioma .nav-link{
  font-size: 12px;
  background-color:#AA8771;
  /*height: 94%;*/
  padding: 6px 15px!important;
}

.ultop .nav-link img{
  width:1.48vw;
}

.ultop .nav-item.active::after{
  content: '';
  position: absolute;
  border-bottom: 2px solid white;
}


#banner{
  padding-top:0px!important;
  background-repeat: no-repeat; background-size:cover!important ; background-position: center; height:79vh;
}

#banner h1{
  color:#6E4C1E;
   font-size: 4.39vw;
  font-weight: 700;
  line-height: 4.76vw;
  animation-duration: 1s;
    animation-delay: .7s;
}

.cacao11{
  width:41vw;
}

.boton-green, .boton-green p{
  background: #AFAA4C;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 11.5vw;
    height: 3.58vw;
    text-decoration: none;
    border-radius: 30px;
    font-size: 1.17vw;
    font-weight: 700;
    padding: 13px 1rem;
}

.descripcion-icono{
  font-size: 1.02vw;
  font-weight: 500;
  line-height: 1.46vw;
  color: #676164;
  text-transform: uppercase;

}

/* sticky sidebar social */

.social-bar{
    padding:0px;
    margin:0px;
    position:relative;
    z-index: 99;
}

.social-bar li{
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-bar i{
  background: #AFAA4C;
  width: 2.34vw!important;
height: 2.34vw!important;
border-radius: 50%;
 display: flex;
  justify-content: center;
  align-items: center;
}

.social-bar .li a{
  text-decoration: none;
}

.hashtag{
  font-weight: 500;
font-size: 1.17vw;
line-height: 1.46vw;
/* identical to box height, or 125% */

text-align: center;

/* Primary/marron claro */

color: #B9967F;
display: flex;
justify-content: ccenter;
text-align: center;
  text-decoration: none;

padding: 10px 1.875rem;
border:2px solid #B9967F;
border-radius: 1.875rem;
background: transparent;
}

.sticky li{
    list-style-type:none;
    background-color:#fff;
    color:#efefef;
    height:43px;
    padding:0px;
    margin:0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor:pointer;
}
.sticky li:hover{
    margin-left:-115px;
}
.sticky li img{
    float:left;
    margin:5px 4px;
    margin-right:5px;
}
.sticky li p{
    padding-top:5px;
    margin:0px;
    line-height:16px;
    font-size:11px;
}
.sticky li p a{
    text-decoration:none;
    color:#2C3539;
}
.sticky li p a:hover{
    text-decoration:underline;
}
/* fin sidebar */

.callao-slider .carousel-indicators{
  bottom:-50px!important;
}

.callao-slider .carousel-indicators [data-bs-target]{
  width: 7.4px!important;
  height: 7.4px!important;
  border-radius: 7.4px;
  border:2px solid #6E4C1E;
  background: transparent!important;
  margin-left:8px;
  margin-right: 8px;
}

.callao-slider .carousel-indicators .active{
  
  background: #6E4C1E!important;
}

.callao-slider .carousel-control-next
{
  color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: 1;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    top: 48%;
    right: 2%;
    border: 2px solid white;
}

.callao-slider .carousel-control-prev{
 color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: 1;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    top: 48%;
    left: 2%;
    border: 2px solid white;   
}

/*contacto*/
.descripcion-contacto{
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: #676164;
}

.icon-sales{
  width: 3.51vw;
  height: 3.51vw;
  
  position: relative;
}

.icon-sales:after{
  content: '\f3f2';
  display: flex;
  width: 3.51vw;
  height: 3.51vw;
  font-family: 'bootstrap-icons';
  color:#AFAA4C;
  font-size: 1.46vw;
  font-weight: 900;
  text-align: center;
    justify-content: center;
    align-items: center;
}
.descripcion-icon{
  font-size: 0.95vw;
  font-weight: 500;
  color: #353535;
  text-align: center;
  line-height: 20px;
  padding-top: 0px;
}

.contacto .sales .nav-link{ 
    border: 1px solid white;
    border-radius: 8px;
    padding:11px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    width: 93px;
}

 .contacto .suppliers .nav-link, .contacto .rrhh .nav-link{
    border: 1px solid white;
    border-radius: 8px;
    padding:11px 11px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    width: 6.8vw;
  }

.contacto .sales .active{
   background: #AFAA4C;
    color:white;
    border-radius: 8px;
    padding:11px 11px;
}

.contacto .sales .active .icon-sales:after,.contacto .sales .active .descripcion-icon, .contacto .suppliers .active .icon-suppliers:after{
  color:white;
}

.contacto .suppliers .active{
    background: #EB8050;
    color:white;
    border-radius: 8px;
    padding:11px 11px;
}

.contacto .rrhh .active{
    border: 1px solid #40A5A0;
    border-radius: 8px;
    padding:20px 11px;
}

.contacto .active .descripcion-icon{
  font-weight: 700;
  color:#fff!important;
  }

.icon-suppliers{
  width: 3.51vw;
  height: 3.51vw;
  position: relative;
}

.icon-suppliers:after{
  content: '\f1cb';
  display: flex;
  width: 3.51vw;
  height: 3.51vw;
  font-family: 'bootstrap-icons';
  color:#EB8050;
  
  font-size: 1.83vw;
  line-height: 20px;
  font-weight: 900;
  text-align: center;
    justify-content: center;
    align-items: center;
}

.icon-rrhh{
  width: 3.51vw;
  height: 3.51vw;
  border-radius: 50%;
  background: #40A5A0;
  position: relative;
  color:white;
}

.icon-rrhh:after{
  content: '\f4a8';
  display: flex;
  width: 3.51vw;
  height: 3.51vw;
  font-family: 'bootstrap-icons';
  color:white;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
    justify-content: center;
    align-items: center;
}

.page-item:last-child .page-link, .page-item:first-child .page-link{
   text-underline-offset: 0.5em;
}

/*.title-sales:after{
  content: '\f3d2';
  width: 20px;
  height: 20px;
  font-family: 'bootstrap-icons';
  color: #AFAA4C;
  font-size: 20px;
  line-height: 20px;
  font-weight: 900;
  padding-left: 15px;
}*/

/*fin contacto*/

#search{
  border:1px solid #67616440;
  border-radius: 25px;
}

#search input[type="search"] {
  border: none;
  background: transparent;
  margin: 0;
  padding: 7px 15px;
  font-size: 0.875rem;
  color: inherit;
  border: 1px solid transparent;
  border-radius: inherit;
  color:#343434;
  width: 12rem;
}

input[type="search"]::placeholder {
  color: #bbb;
}

#search button[type="submit"] {
  text-indent: -999px;
  overflow: hidden;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 3px solid transparent;
  border-radius: inherit;
  background: transparent url("images/search.png") no-repeat center;
  cursor: pointer;
  opacity: 0.7;
  background-color: #E9C3AA4D;
  margin-right:5px;
}

#search button[type="submit"]:hover {
  opacity: 1;
}

#search button[type="submit"]:focus,
#search input[type="search"]:focus {
  box-shadow: 0 0 3px 0 #E9C3AA4D;
  border-color: white;
  outline: none;
}

#search form.nosubmit {
 border: none;
 padding: 0;
}

#search input.nosubmit {
  border: 2px solid #555;
  width: 100%;
  padding: 9px 4px 9px 2.5rem;
   background: transparent url("images/search.png") no-repeat 13px center;
}

.searchbox{
  border-radius: 25px;
  border: 2px solid #67616440;
  font-weight: 300;
  line-height: 20px;
}


.nav-pills .nav-item:nth-child(1) .nav-link{
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color:#6E4C1E;
    font-size: 1.46vw;
    width: 19.03vw;
    font-weight: 600;
}

.nav-pills .nav-item:nth-child(2) .nav-link{
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    color:#6E4C1E;
    font-size: 1.46vw;
    width: 19.03vw;
    font-weight: 600;
}

.nav-pills .nav-item .nav-link{
  font-weight: 600;
}

.nav-pills .nav-link{
  background: #F6E7DD;
  border:5px solid #F6E7DD;
}
.nav-pills .nav-link.active{
  background: #6E4C1E;
  color:white!important;
  border:5px solid #F6E7DD;
}

.product-single .nav-pills .nav-item:nth-child(1) .nav-link{
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color:#6E4C1E;
    font-size: 1.46vw;
    width: 19.03vw;
    font-weight: 600;
}

.product-single .nav-pills .nav-item:nth-child(2) .nav-link{
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    color:#6E4C1E;
    font-size: 1.46vw;
    width: 19.03vw;
    font-weight: 600;
}
.product-single .nav-pills .nav-item:nth-child(3) .nav-link{
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    color:#6E4C1E;
    font-size: 1.46vw;
    width: 19.03vw;
    font-weight: 600;
}
.product-single .nav-pills .nav-item:nth-child(4) .nav-link{
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    color:#6E4C1E;
    font-size: 1.46vw;
    width: 19.03vw;
    font-weight: 600;
}

.product-single .nav-pills .nav-item .nav-link{
  font-weight: 600;
}

.product-single .nav-pills .nav-link{
  background: transparent;
  color:#6E4C1E!important;
  border:0px solid #6E4C1E;
}
.product-single .nav-pills .nav-link.active{
  background: transparent;
  color:#6E4C1E!important;
  text-decoration: underline;
    text-underline-offset: 0.5em;
}

#productbanner .nav-pills .nav-item .nav-link{
  font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 24px;
color: #6E4C1E;
}

#productbanner .nav-pills .nav-item:nth-child(1) .nav-link{
    font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 24px;
color: #6E4C1E;
border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#productbanner .nav-pills .nav-item:nth-child(2) .nav-link{
  font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 24px;
color: #6E4C1E;
border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background: transparent;
    border:0px;
}

#productbanner .nav-pills .nav-link.active{
  background: transparent;
  color:#6E4C1E!important;
  
  border: 0px;
  border-bottom: 2px solid;
  padding-left:15px;
  padding-right: 15px;
  width: 14.64vw;
}


.factory .nav-item .nav-link{
  color:rgba(53, 53, 53, 1)!important;
  font-size:1.46vw;
  font-weight: 600;
  line-height: 1.46vw;
  border-radius:0px;
   border-bottom-left-radius: 0px!important;
    border-top-left-radius: 0px!important;
    border-top-right-radius: 0px!important;
    border-bottom-right-radius: 0px!important;
  border:0px;
}

.factory .nav-link{
  background: transparent!important;
}

.factory .nav-link.active{
  color: rgba(53, 53, 53, 1);
  background: transparent!important;
  border-bottom-left-radius: 0px!important;
    border-top-left-radius: 0px!important;
    border-top-right-radius: 0px!important;
    border-bottom-right-radius: 0px!important;
  border-bottom: 3px solid #6E4C1E;
}


#tipos-productos .nav-item .nav-link{
background: white!important;
border:1px solid rgba(64, 165, 160, 1);
  color:rgba(64, 165, 160, 1);
  width: 12.52vw;
  height: 3.58vw;
  border-bottom-left-radius: 40px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    font-size: 1.17vw;
}

#tipos-productos .nav-link.active{
  background: rgba(64, 165, 160, 1)!important;
  color:white;
  width: 12.52vw;
  height: 3.58vw;
  border-bottom-left-radius: 40px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    font-size: 1.17vw;
}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 2.2vw;
    height: 3px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    margin-top: 4px;
    margin-bottom: 4px;
    text-indent: -999px;
    cursor: pointer;
    background-color: transparent;
    background-clip: padding-box;
    border: 0;
    /* border-top: 10px solid transparent; */
    /* border-bottom: 10px solid transparent; */
    opacity: 1;
    transition: opacity .6s ease;
    
}

.selector-news{
  position: relative;
}

.selector-news:after{
  content: '\F128';
  position: absolute;
  right: 5px;
  color: #676164;
  font-size: 0.875rem;
  font-family: 'boostrap-icons';
  line-height: 0.875rem;
}

.estandar-imagen{
  background: url(images/design.jpg);
  background-size: cover;
  background-position: center center;
}

.estandar-imagen-serv{
  background: url(images/servicios-foto.jpg);
  background-size: cover;
  background-position: center center;
}

.daza{
  width: 46vw!important;
}

.vector-map {
    width: 100%;
    height: 45vw;
    margin: auto;
    overflow-x: hidden;
    overflow-y: hidden;
}

.vector-map path{
  fill: #E8E7E8;
  stroke: white;
  stroke-width: 1px;
  cursor: pointer;
}

.vector-map .map-active{
  fill:rgba(235, 128, 80, 0.7);
  stroke:white;
}

.vector-map .map-active:hover{
  fill:rgba(235, 128, 80, 1);
}

.vector-map .label{
  fill:#353535!important;
  stroke-width: 0px!important;
}

.heyo:hover{
  fill: #CC2929
  +transition(0.3s)
}

.description {
  pointer-events: none;
  position: absolute;
  font-size: 1.32vw;
  text-align: center;
  background: white;
  padding: 10px 15px;
  z-index: 999;
  height: 2.2vw;
  line-height: 2.2vw;
  margin: 0 auto;
  color: #21669e;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #eee;
  transform: translateX(-50%);
  display: none; }
.description.active {
    display: block; }
.description:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 0;
    height: 0;
    margin-left: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white; }


.banner-morado{
  /*height: 10.9vw;*/
  color:white;
  background: #B486A3;
    min-width: 100%;
    padding-top:2rem!important;
    padding-bottom:2rem!important;
}

.banner-verde{
  height: 9.9vw;
  color: white;
  background: #AFAA4C;
  min-width: 100%;
}

.banner-turquesa{
    height: 11.35vw;
  color:white;
  background: #40A5A0;
    min-width: 100%;
}

.banner-rosado{
  background: #FAF3EE;
  height: 11.35vw;
  color: #353535;
  min-width: 100%;
}

.banner-turquesa .col-morado,.banner-verde .col-morado, .banner-rosado .col-rosado{
  height: 11vw;
}

.banner-morado h1, .banner-turquesa h1, .banner-verde h1, .banner-verde h1{
  color:white;
  font-size:2.9vw;
  line-height: 3vw;
  font-weight: 700;

}

.banner-rosado h1{
  color: #AFAA4C;
  font-size:3vw;
  line-height: 3vw;
  font-weight: 700;
}

.vertical.carousel .carousel-indicators [data-bs-target] {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #6E4C1E;
    margin-top:1.46vw;
}

.carousel-indicators .active{
  background-color: #6E4C1E!important;
}

.searchbox::focus{
  border: 1px solid #67616440;
}



.boton-green:hover{
  background-color:transparent;
  border:2px solid white;
}

#banner .boton-green:hover{
  border-color: #AFAA4C!important;
  color:#AFAA4C!important;
}

.boton-orange{
background: transparent;
    color: #EB8050;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* width: 12vw; */
    padding: 11px 44px;
    /* height: 3.37vw; */
    text-decoration: none;
    border: 2px solid #EB8050;
    border-radius: 30px;
    /* font-size: 1.17vw; */
    font-weight: 700;
}

.boton-orange:hover{
  background-color: #EB8050;
  border:2px solid #EB8050;
  color:white;
}

.max-w90{
  max-width: 90%;
}

.max-w80{
  max-width: 80%;
}

/**
 * User: Alessandro Battaglia
 * Date: 17/05/2022
 * Time: 15:24
 */

.vertical .p-section{
  width:38.07vw;
  animation-duration: 1s;
    animation-delay: .7s;
}

.vertical .p-section p{
  width:38.07vw;
  animation-duration: 1s;
    animation-delay: .7s;
}

.duration-animate{
    animation-duration: 1s;
    animation-delay: .7s;
}

.fade-in{

}

.vertical .boton-green{
  animation-duration: 1s;
    animation-delay: 1s;
    width:11.5rem!important;
}

.vertical.carousel .carousel-item {
    overflow: hidden;
     /* This timing applies on the way OUT */
  transition-timing-function: ease-out;

  /* Quick on the way out */
  transition: 2s;


}

.vertical.carousel .carousel-item-next:not(.carousel-item-start),
.vertical.carousel .active.carousel-item-end {
    transform: translateY(100%); 
    
}

.vertical.carousel .carousel-item-prev:not(.carousel-item-end),
.vertical.carousel .active.carousel-item-start {
    transform: translateY(-100%);
    
}


.vertical .carousel-indicators {
    top: 0;
    right: unset;

    margin-right: unset !important;
    margin-left: 4.5%;

    flex-direction: column;
}



.vertical.carousel .carousel-control-prev,
.vertical.carousel .carousel-control-next {
    width: 100%;
    height: 4.4vw;
}

.vertical.carousel .carousel-control-prev-icon,
.vertical.carousel .carousel-control-next-icon {
    transform: rotateZ(90deg);
}

.vertical.carousel .carousel-control-next {
    top: unset;
    bottom: 0;
}

.carousel-caption {
    position: absolute;
    right: unset;
    bottom: 22%;
    left: 10%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
    width: 40%;
}

.carousel-caption h1{
  color:#6E4C1E;
  font-size:4.4vw;
  font-weight: bolder;
  text-align: left;
}

.carousel-caption p{
  text-align: left;
  width: 70%;
  color:#676164;
}

.p-section, .p-section p, .p-section ul li{
  color:#676164;  
  font-size:20px;
  font-weight: 500;  
}

.p-section-middle, .p-section-middle p, .p-section-middle ul li{
  color:#676164;  
  font-size:18px;
  font-weight: 500;  
}

.subtitle-marron{
  color:#353535;
  /*font-size:1.46vw;*/
  font-size:1.32vw;
  font-weight: 700;
  line-height: 1.76vw;
  
}

.label-imagen .p-section, .label-imagen .p-section p{
  font-size:1.4vw!important;
}

.p-section-pills, .p-section-pills p{
  font-style: normal;
font-weight: 500;
font-size: 1.17vw;
line-height: 1.61vw;
/* or 138% */


/* Primary/gris claro */

color: #676164;
}

.logo{
  position: absolute;
    top: 15px;
}

.p-section b{
  color:#676164;
  font-size:1.46vw;
  font-weight: 700;
  line-height: 24px;
  text-align: justify;
}

.p-section span{
  color:rgba(235, 128, 80, 1);
  font-size:1.46vw;
  font-weight: 700;
  line-height: 24px;
  text-align: justify;
  /*text-decoration: underline;*/
}

#whoweare{
  background:#FAF3EE;
  position: relative;
}

#whoweare h1{
  line-height: 2.2vw;
}

.down-boton{
      color: #EB8050;
    float: right;
    /*margin-right: 1.1vw;*/
    padding: 0.44vw;
    border: 2px solid #EB8050;
    border-radius: 1.875rem;
    width: 3.2vw;
    text-align: center;
    height: 3.2vw;
    text-align: center;
    vertical-align: middle;
    font-size: 1.46vw;
    font-weight: 900;
}

.flickity-prev-next-button {

    width: 3.2vw!important;
    height: 3.2vw!important;
  }
.search-prev-next-button {
    width: 3.2vw!important;
    height: 3.2vw!important;
    background: transparent;
    border: 2px solid rgba(235, 128, 80, 1);
    border-radius:50%;
}

.search-prev-next-button svg{
fill:rgba(235, 128, 80, 1);

    stroke: rgba(235, 128, 80, 1);
    stroke-width: 5px;
        left: 30%;
    top: 30%;
    width: 40%;
    height: 40%;
}

.search-prev-next-button:hover{
    background-color:rgba(235, 128, 80, 1)!important;
    stroke-width: 5px;
    stroke:white;
    fill:white;

}

.form-check-input:checked {
    background-color: #B9967F;
    border-color: #B9967F;
}

.form-check-label{
	color:#676164;
}

.search-prev-next-button:hover svg{
stroke:white;
fill:white!important;
}


.cover .flickity-prev-next-button {

    width:2.7vw!important;
    height: 2.7vw!important;
  }
 

.down-boton:hover{
  background: #EB8050;
  color:white;
  font-weight: 900;
}

.down-boton:before{
  font-weight: 900!important;
  vertical-align: -0.23em!important;
}

.boton-verde{
  text-decoration: none;
  background: transparent;
width: 15.23vw;
height: 3.06rem;
border: 2px solid #AFAA4C;
border-radius: 25px;
color:#AFAA4C;
font-weight: 700;
padding: 12px 40px;
text-shadow: 0px 3px 10px rgba(83, 83, 83, 0.05);
}

.boton-verde:hover{
  background: #AFAA4C;
  color:white;
}

.boton-verde2{
  text-decoration: none;
  background: #AFAA4C;
  
width: 15.23vw;
height: 3.06rem;
border: 2px solid #AFAA4C;
border-radius: 25px;

background: #AFAA4C;
  color:white;
font-weight: 700;
padding: 12px 40px;
text-shadow: 0px 3px 10px rgba(83, 83, 83, 0.05);
}

.boton-verde2:hover {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.boton-blanco{
  text-decoration: none;
width: 15.23vw;
height: 3.06rem;
border: 2px solid white;
border-radius: 25px;
color:white;
font-weight: 700;
padding: 12px 40px;
text-shadow: 0px 3px 10px rgba(83, 83, 83, 0.05);
background: transparent;
text-transform: initial;
}

.boton-blanco:hover{
  background: white;
  color:#353535;
}

.terminos .nav-link{
  text-decoration: none;
border: 2px solid white;
border-radius: 25px;
color:#B9967F;
font-weight: 700;
padding: 14.5px 56px;
text-shadow: 0px 3px 10px rgba(83, 83, 83, 0.05);
border:2px solid #B9967F;
background: transparent;
font-size: 1.024vw;
line-height: 20px;
min-width: 246px;
}

.terminos .nav-link:hover, .terminos .active{
  background: #B9967F;
  color:white;
  border:2px solid #B9967F;
}

.text-right{
  text-align: right !important;
}


@media (min-width: 768px) {
  .diagonal-box {
  position:relative;
}
.diagonal-box:before{
  content:'';
  position: absolute;
  top:-3px;
  right: 0;
  left:0;
  bottom: 0;
  background-color:#FAF3EE;
  clip-path: polygon(0 0%, 100% 0, 100% 30%, 0 0%);
  padding: 4rem 20%;
}

.plform{
  padding-left:5rem!important;
}

.vertical-line{
  left:40%;
  z-index: 90;
  top:-33px;
}

.vertical-line img{
  height: 104.4vw;
}

}

.content{
  max-width: 50em;
  margin:0 auto;
  position: relative;
}

.title-bottom{
  position: absolute;
    top: 87%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.875rem;
    line-height: 1.875rem;
    letter-spacing: 0.5px;
    width: 100%;
    text-transform: uppercase;
    text-align: center;
    font-weight: bolder;
    -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.title-bottom2{
  position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    letter-spacing: 0.5px;
    width: 100%;
    text-transform: uppercase;
    text-align: center;
    font-weight: bolder;
    opacity: 0;
    -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.latest .title-bottom{
  font-size:15px;
}

.izquierdo{
  clip-path: polygon(0% 0%, 100% 0, 93% 100%, 0% 100%);
  /*padding:1rem 20%;*/
  margin: 0 auto;
  align-self: center;
  overflow: hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index: 100;
  
}

.derecho{
clip-path: polygon(7% 0, 100% 0%, 100% 100%, 0% 100%);
  /*padding:4rem 20%;*/
  margin: 0 auto;
  align-self: center;
  overflow: hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  
}

.latest{
  width: 100%;
  overflow: hidden;
}

.latest img,.izquierdo img,.derecho img{

  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.latest:hover img,.izquierdo:hover img,.derecho:hover img{
   -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
  -o-filter: blur(3px);
  filter: brightness(80%) blur(1px);
  overflor:hidden;
}

.latest:hover .title-bottom,.izquierdo:hover .title-bottom,.derecho:hover .title-bottom{
  top:70%;
  }

.latest:hover .title-bottom2,.izquierdo:hover .title-bottom2,.derecho:hover .title-bottom2{
  -webkit-opacity: 1;
  opacity: 1;
  }



  .latest-news, .products{
	  position:relative;
  width: 100%;
  overflow: hidden;
  z-index: 100;
}

.latest-news img, .products img{
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.latest-news:hover img, .products:hover img{
   -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
  -o-filter: blur(3px);
  filter: blur(1px);
  /*transform: scale(1.03);*/
  filter:brightness(80%) blur(2px);
}


.latest-news:hover .title-bottom{
  top:60%;
  }

.latest-news:hover .title-bottom2, .products:hover .title-bottom2,.products:hover .title-bottom2 p, .products .title-bottom2{
  -webkit-opacity: 1;
  opacity: 1;
  }

  .latest-news:hover .title-top{
  -webkit-opacity: 1;
  opacity: 1;
  }

 .latest-news .title-bottom{
  position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.32vw;
    line-height: 1.32vw;
    letter-spacing: 0.5px;
    width: 92%;
    text-transform: uppercase;
    text-align: left;
    font-weight: bolder;
    padding:1.1vw;
    -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
	 z-index:1;
}

.latest-news .title-bottom2{
  position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.1vw;
    line-height: 1.1vw;
    letter-spacing: 0.5px;
    width: 92%;
    text-transform: inherit;
    font-weight: unset;
    text-align: left;
    opacity: 0;
    padding:15px;
    -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
	z-index:1;
} 

.products .title-bottom2{
  position: absolute;
  top:91.5%;
  width: 101%;
  transform:translate(-50%, -50%);
    color: #fff;
  font-size: 1.76vw;
  line-height: 1.76vw;
  font-weight: 600;
  background: rgba(160, 153, 71, 0.8);
  height: 3.9vw;
  display: flex;
  align-items: center;
  justify-content: left;
  padding-left: 10px;
  text-align:left;
}

.latest-news .title-top{
  position: absolute;
    top: 7%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.32vw;
    letter-spacing: 0.5px;
    width: 92%;
    text-transform: uppercase;
    
    font-weight: 700;
    text-align: left;
    opacity: 0;
    padding:15px;
    -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
	z-index:1;
} 

.latest-news .title-top:hover{
  
    text-decoration: underline;
    text-underline-offset: 0.5em;
  
    -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
} 

.background-rosado{
  background: #FAF3EE!important;
}

.background-white{
  background: white!important;
}

.background-amarillo{
  background: rgba(229, 178, 16, 1)!important;
}

.background-verde{
  background: rgba(175, 170, 76, 0.9); 
}

.background-palo-rosa{
  background:#E9C3AA!important;
}

.justify-content-space-between{
  justify-content: space-between!important;
}

.top--50{
  top:-50px;
}


#sostenibilidad{
  background: #FAF3EE;
}

#carouselwwl{
  background: #FAF3EE;
}

.diagonal-box2 {
  position:relative;
}


@media (min-width: 768px) {
.diagonal-box2:before{
  content:'';
  position: absolute;
  top:0px;
  right: 0;
  left:0;
  bottom: -3px;
  background-color:#FAF3EE;
  clip-path: polygon(0 80%, 100% 92%, 100% 100%, 0% 100%);
  padding: 4rem 20%;
}

.diagonal-box3:before{
  content:'';
  position: absolute;
  top:0px;
  right: 0;
  left:0;
  bottom: 0;
  background-color:#FAF3EE;
  clip-path: polygon(100% 60%, 0 100%, 100% 100%);
  height: 151px;
  padding: 0 0 0 0;
  margin-bottom: 20px;
}


.diagonalderecha{

}
.diagonalderecha:before{
  content:'';
  position: absolute;
  right: 0;
  left:0;
  bottom: 0;
  background-color:#FAF3EE;
-webkit-clip-path: polygon(0 27%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 27%, 100% 0, 100% 100%, 0% 100%);
  height: 14.63vw;
  padding: 0 0 0 0;
  z-index: 99;
}

.diagonal-box-hcacao:before{
  content:'';
  position: absolute;
  right: 0;
  left:0;
  bottom: 0;
  background-color:#FAF3EE;
  clip-path: polygon(0 60%, 100% 18%, 100% 100%, 0% 100%);
  height: 18.3vw;
  padding: 0 0 0 0;
  
}


.diagonal-box-product:before{
  content:'';
  position: absolute;
  right: 0;
  left:0;
  bottom: 100%;
  background-color:#FAF3EE;
  clip-path: polygon(0 60%, 100% 18%, 100% 100%, 0% 100%);
  height: 18.3vw;
  padding: 0 0 0 0;
  
}



.diagonal-box5:before{
  content:'';
  position: absolute;
  right: 0;
  left:0;
  bottom: -2px;
  background-color:#FAF3EE;
  clip-path: polygon(0 1%, 100% 25%, 100% 100%, 0% 100%);
  height: 200px;
  padding: 0 0 0 0;
}

.diagonal-box-callao:before{
  content:'';
  position: absolute;
  right: 0;
  left:0;
  bottom: 0;
  background-color:#FAF3EE;
  clip-path: polygon(0 1%, 100% 25%, 100% 100%, 0% 100%);
  height: 11.4vw;
  padding: 0 0 0 0;
}


.diagonal-box4:before{
  content:'';
  position: absolute;
  right: 0;
  left:0;
  bottom: -3px;
  background-color:#FAF3EE;
  clip-path: polygon(100% 10%, -2% 100%, 100% 100%);
  height: 160px;
  padding: 0 0 0 0;
}
}
#keepup{
  background: #FAF3EE;
}

.form-control, .form-select{
  background-color: transparent;
  border:2px solid #B9967FCC;
  color:#676164;
  font-size:16px;
  background-position: right 1.75rem center;
    background-size: 19px 19px;
}



footer{
  background: #B9967F;  
  position: relative;
}

footer h2{
  font-size: 1.17vw;
  color: white;
  font-weight: 700!important;
  text-transform: uppercase;
  line-height: 6px;
  line-height: 20px;
}

footer .termsh1{
 font-size: 1.17vw;
  color: white;
  font-weight: 500!important;
  text-transform: uppercase;
  line-height: 7px;  
}

footer h3{
  font-size: 1.17vw;
  color: white;
  font-weight: 500;
  line-height: 20px;
}

footer ul{
  padding-left: 0px;
}

footer ul li{
  list-style: none;
}

footer ul li a{
  text-decoration: none;
  font-size:1.02vw;
  font-weight: 400;
  line-height: 20px;
}
footer ul li a b{
  font-weight: 700;
  font-size:1.17vw;
  line-height: 20px;
}

footer img{
  width: 180px;
}

footer .c1{
  /*border-bottom: 1px solid white;
  margin-left: 3rem!important;
  margin-right: 3rem!important;*/

}


.ul-footer li{
display:inline;
     
     padding-right:3px;
}

.ul-footer li a{
  font-size: 1.0248vw;
}

#whoweare .chocolate{
  width: 74px;
  height: 117px;
  position: absolute;
  left:0;
  top:70%;
  z-index: 99;
  animation: fadeInFromTop .5s linear forwards, floating ease 4s infinite;
}

#whoweare .cacao{
  width: 28px;
  height: 23px;
  position: absolute;
  left:15%;
  top:65%;
  animation: fadeInFromTop .5s linear forwards, floating ease 4s infinite;
}

#latest .hoja{
  width: 131px;
  height: 141px;
  position: absolute;
  left:25%;
  top:-60px;
  z-index: 99;
  animation: fadeInFromTop .1s linear forwards, floating2 ease 2s infinite;
}



#keepup .choc2{
  width: 320px;
  height: 280px;
  position: absolute;
  left:10%;
  top:-210px;
  animation: floating2 ease 3s infinite;
}

#keepup .choc3{
  width: 47px;
  height: 200px;
  position: absolute;
  left:0%;
  top:-250px;
}

.floating-rocks {
  position: absolute;
}

.front1{
  top:0%;
  z-index: 99;
}

.front-two {
  left: 20%;
  z-index: 99;
}

.front-trozos {
  left: 0%;
  top:34.16vw;
  z-index: 99;
}

.front-trozo1{
  right:15%;
  z-index: 99;
  top:38.17vw;
}

.front-trozo2{
  right:5%;
  z-index: 99;
  top:22.17vw;
}

.front-two-hoja{
  left:20%;
  z-index: 99;
  top:-60px;
}

.front-dotted {
  left: 0;
  z-index: 99;
  bottom:-80px;
}

.prod-dotted {
  left: 0;
  z-index: 99;
  bottom:24px;
}

.prod-cacao1 {
  left: 0;
  z-index: 99;
  bottom:0px;
}

.prod-cacao2 {
  left: 15%;
  z-index: 99;
  bottom:155px;
}

.prod-cacao3 {
  left: 60%;
  z-index: 99;
  bottom:95px;
}


.front-3granos {
  left: 0;
  z-index: 99;
  bottom:-470px;
}

.front-dotteds {
  left: 0;
  z-index: 98;
  bottom:-460px;
}

.front-dottedp {
  left: 0;
  z-index: 90;
  top:-30vw;
}

.front-dottedp2 {
  left: 0;
  z-index: 445;
  top:-27vw;
}

.product-card{
  z-index: 446;
}

.top28{
  top:28%!important;
}

.top34{
  top:34%!important;
}


.front-dotted-callao {
  left: 0;
  z-index: 98;
  bottom:2rem;
}

.front-dotted {
  left: 0;
  z-index: 98;
  bottom:-80px;
}

.front-dotted-contacto {
  left: 0;
  z-index: 98;
  bottom:-650px;
}

.front-dotted-home {
  left: 0;
  z-index: 98;
  bottom:-175px;
}

.front-grano-home{
  left: 15%;
  z-index: 98;
  bottom:-100px;
}

.front-grano-nosotros{
  left: 15%;
  z-index: 98;
  bottom:-167px;
}

.front-dotted2 {
  left: 0;
  z-index: 99;
  bottom:-20px;
}

.front-dotted2-sost {
  left: 0;
  z-index: 99;
  bottom:-7.2vw;
}

.sost-line{
  z-index:99; top:73%; left:0;
}

.front-dotted3{
    left: 0;
  z-index: 99;
  bottom: 70%;
}

.front-dotted-sust{
    left: 0;
  z-index: 99;
  bottom: 50px;
}

.front-grano2-sust{
      left: 40%;
  z-index: 99;
  bottom: 270px;
}

.front-grano2{
      left: 40%;
  z-index: 99;
  bottom: 80%;
}

.front-one{
  right:0%;
  z-index: 444;
  top:-3rem;
}

.front-one-hojawwl{
  right:0%;
  z-index: 444;
  top:-1.4rem;
}

.front-one-mani{
  right:0%;
  z-index: 444;
  top:-8.875rem;
}

.front-one-barra{
  top:-100px;
  left: 0%;
  z-index: 99;
}

.front-one-palo{
  left: 0%;
  z-index: 99;
}

.front-left-mani{
  left: 0%;
  z-index: 99;  
}

.front-one-gblancos{
  left: 0%;
  top:120px;
  z-index: 99;
}

.front-one-rayado{
  top:0%;
  left: 40%;
  z-index: 99;
}

.front-one-callao{
  right:0%;
  z-index: 999;
  top:-220px;
}

.front-one-callao-nos{
  right:0%;
  z-index: 444;
  top:-350px;
}

.front-one-purchase-choc1 {
    right: 13%;
    z-index: 999;
    top: -179px;
    z-index: 444;
}

.front-purchase-choc2 {
    left: 0%;
    bottom: 0px;
    z-index: 99;
}

.front-one-callao-nos{
  right:0%;
  z-index: 444;
  top:-350px;
}

.front-one-purchase-nos {
    right: 0%;
    z-index: 444;
    top: -280px;
}

.front-one-hojas-nos{
  right:0%;
  z-index: 444;
  top:-41rem;
}


.front-hojalwwl {
    left: 0%;
    top: 30px;
    z-index: 99;
}

.front-cb1 {
    left: 27%;
    top: 160px;
    z-index: 100;
}

.front-cbserv {
    left: 27%;
    top: 130px;
    z-index: 100;
}

.front-cb2 {
    left: 4.4rem;
    top: -10px;
    z-index: 99;
}

.front-one-df{
  right:0%;
  z-index: 999;
  top:-6.5rem;
}

.front-grano4{
  left:3%;
  z-index: 99;
  top:-1.875rem;
}

.front-ch2{
  left:0%;
  z-index: 99;
  top:-200px;
}

.front-ch1{
  left:5%;
  z-index: 99;
  top:-120px;
}

.front-ch3{
  left:45%;
  z-index: 99;
  top:-100px;
}

.front-pl3{
  right: 0%;
  z-index: 99;
  top:40%;
}

.front-ch5{
  left:55%;
  z-index: 99;
  top:-100px;
}

.front-bch3{
  right:5%;
  z-index: 101;
  top:-5.875rem;
}

.front-grano5{
  right:11%;
  z-index: 102;
  top:-4vw;
}

.front-grano02{
  right:2%;
  z-index: 99;
  top:-7.71vw;
}

.front-three{
  left:0;
  top:90%;
  z-index: 99;
}

.front-four{
  right:0;
  top:-100px;
  z-index: 99;
}

.front-choco-right{
  right:0;
  top:-200px;
  z-index: 99;
}

.front-five{
  top:100%;
  z-index: 999;
}

.front-cacao1{
  left:16%;
  top:100%;
  z-index: 99;
}

.front-cacao2{
  left:29%;
  top:80%;
  z-index: 99;
}


.front-choc1{
  left:10%;
  top:-250px;
  z-index: 99;
}

.front-choc2{
  left:0%;
  top:-380px;
  z-index: 99;
}

.front-choc2-callao{
  left:0%;
  bottom:-280px;
  z-index: 99;
}

.front-choc3-callao{
  right:0%;
  z-index: 99;
  top:98%;
}


@keyframes fadeInFromTop{
  from{
    opacity: 0;
    transform: translateY(-20px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floating{
  0%{
    transform: translate(0%,0%);
  }

  20%{
    transform: translate(0%,5%);
  }
  40%{
    transform: translate(0%,10%);
  }
  60%{
    transform: translate(0%,15%);
  }
  80%{
    transform: translate(0%,10%);
  }
  90%{
    transform: translate(0%,5%);
  }
  100%{
    transform: translate(0%,0%);
  }
}

@keyframes floating2{
  0%{
    transform: translate(0%,0%) rotate(360deg);
  }
  5%{
    transform: translate(0%,1%) rotate(359deg);
  }
  10%{
    transform: translate(0%,2%) rotate(358deg);
  }
  15%{
    transform: translate(0%,3%) rotate(357deg);
  }
  20%{
    transform: translate(0%,4%) rotate(356deg);
  }
  25%{
    transform: translate(0%,5%) rotate(355deg);
  }
  30%{
    transform: translate(0%,6%) rotate(354deg);
  }
  35%{
    transform: translate(0%,7%) rotate(353deg);
  }
  40%{
    transform: translate(0%,8%) rotate(352deg);
  }
  45%{
    transform: translate(0%,9%) rotate(351deg);
  }
  50%{
    transform: translate(0%,10%) rotate(350deg);
  }
  55%{
    transform: translate(0%,9%) rotate(351deg);
  }
  60%{
    transform: translate(0%,8%) rotate(352deg);
  }
  65%{
    transform: translate(0%,7%) rotate(353deg);
  }
  70%{
    transform: translate(0%,6%) rotate(354deg);
  }
  75%{
    transform: translate(0%,5%) rotate(355deg);
  }
  80%{
    transform: translate(0%,4%) rotate(356deg);
  }
  85%{
    transform: translate(0%,3%) rotate(357deg);
  }
  90%{
    transform: translate(0%,2%) rotate(358deg);
  }
  95%{
    transform: translate(0%,1%) rotate(359deg);
  }
  100%{
    transform: translate(0%,0%) rotate(360deg);
  }
}

/*carousel*/

#sostenibilidad .carousel-inner {
  padding: 1em;
}
#sostenibilidad .card {
  margin: 0 0.5em;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
  border: none;
}
#sostenibilidad .carousel-control-prev,
#sostenibilidad .carousel-control-next {
  width: 4vh;
  height: 4vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color:#fff;
  padding:5px;
  opacity: 1;
  box-shadow: 0 0 0 2px #EB8050; 
}



#sostenibilidad .carousel-control-prev i,
#sostenibilidad .carousel-control-next i{
  color:#EB8050;
  font-size: 20px;
  font-weight: 900;
}

#sostenibilidad .carousel-control-prev:hover,
#sostenibilidad .carousel-control-next:hover {
  background: #EB8050;
  box-shadow: 0 0 0 2px white;
  }

#sostenibilidad .carousel-control-prev:hover i,
#sostenibilidad .carousel-control-next:hover i {
color:white;
  }

#sostenibilidad .carousel-control-prev{
  left: -45px;
    width: 47px;
    height: 47px;
}


/* carousel whatwelove */


#carouselwwl .carousel-inner {
  padding: 1em;
}
#carouselwwl .card {
  margin: 0 0.5em;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
  border: none;
}
#carouselwwl .carousel-control-prev,
#carouselwwl .carousel-control-next {
  width: 4vh;
  height: 4vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color:#fff;
  padding:5px;
  opacity: 1;
  box-shadow: 0 0 0 2px #EB8050; 
}



#carouselwwl .carousel-control-prev i,
#carouselwwl .carousel-control-next i{
  color:#EB8050;
  font-size: 20px;
  font-weight: 900;
}

#carouselwwl .carousel-control-prev:hover,
#carouselwwl .carousel-control-next:hover {
  background: #EB8050;
  box-shadow: 0 0 0 2px white;
  }

#carouselwwl .carousel-control-prev:hover i,
#carouselwwl .carousel-control-next:hover i {
color:white;
  }

#carouselwwl .carousel-control-prev{
  left: 25px;
    width: 47px;
    height: 47px;
}

/*fin carousel */


.bi-chevron-left::before{
  font-weight: 900!important;
  top:-5px;
}

.bi-chevron-right::before{
  font-weight: 900!important;
}

#sostenibilidad .carousel-control-next{
  width: 47px;
    height: 47px;
    right:5px;
}



#carouselwwl .carousel-control-next{
  width: 47px;
    height: 47px;
    right:-60px;
}

@media (min-width: 768px) {
  #sostenibilidad .carousel-item {
    margin-right: 0;
    flex: 0 0 40%;
    display: block;
  }

  #carouselwwl .carousel-item {
    margin-right: 0;
    flex: 0 0 40%;
    display: block;
  }

  .mision .carousel-item {
    margin-right: 0;
    flex: 0 0 45%!important;
    display: block;
  }
  #sostenibilidad .carousel-inner {
    display: flex;
  }
}
#sostenibilidad .card .img-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;
}

#carouselwwl .carousel-inner {
    display: flex;
  } 
#carouselwwl .card .img-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    object-fit: cover;
}


.mision .card .img-wrapper {
    min-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sost2 .card .img-wrapper {
    max-width: 100%;
    height: 22em!important;
    display: flex;
    justify-content: center;
    align-items: center;
}
#sostenibilidad .card img {
    min-height: 100%;
}

#carouselwwl .card img {
    min-height: 100%;
}

header{
  padding-top:1rem;
  padding-bottom: 1rem;
}

.m-toggle{
  padding-left: 3rem;
  padding-right: 3rem;
  justify-content:center;
}

.d-mb-block{
  width: 49%;
}

  .derecho img{
    
    width: 28.55vw!important;
    height: 30vw!important;
    object-fit: cover;
  }  

    .izquierdo img{
    
    width: 28.55vw!important;
    height: 30vw!important;
    object-fit: cover;
  }
  .top--50{
    top:-50px; position: relative;
  }
  .pb-md-40{
    padding-bottom: 40px;
  }

@media (max-width: 767px) {

.form-contacto .gform_button{
width:160px!important;
height:auto!important;
}

.gform_footer{
justify-content:center!important;
width:100%!important;
}

.subtitle-section, .subtitle-section b{
font-size:1.875rem!important;
}

.form-products .gform_button{
    width: 140px!important;
    height: 60px!important;
    border: 2px solid #AFAA4C;
    border-radius: 30px!important;
}

.banner-rosado h1{
font-size:24px!important;
}

.pcertsvg .nav-link{
height:120px!important;
}

.positive-icons .label-imagen {
width:auto!important;
}

.banner-rosado-mb .col-rosado{
height:auto!important;
}
#wwlestandares{
  padding-top:15px;
  padding-bottom: 0px!important;
}
.banner-rosado-mb {
    background: #FAF3EE;
    height: 100%!important;
    color: #353535;
    min-width: 100%;
    padding-top:2rem!important;
    padding-bottom:2rem!important;
}
.size-icon {
    width: 80px;
    height: 80px;
    transition: .5s ease;
}
#video iframe{
    width: 95vw!important;
    height: 49vw!important;
    z-index: 9999;
    position: relative;
}
.link-detalle li img {
    
    max-height: 44px!important;
    max-width: fit-content!important;
}

#contacto form{
  text-align: center!important;
}
.subtitle-noticia {
    font-size: 16px;
    color: #353535;
    overflow: hidden;
    font-weight: 400;
    line-height: 16px!important;
    font-weight: 700;
}
.title-section-noticia {
    font-style: normal;
    font-weight: 700!important;
    font-size: 20px!important;
    line-height: 25px!important;
    text-transform: uppercase;
    color: #353535;
}

#terminos .terminos-descarga .label-descarga{
  margin-top:0!important;
  height: 17.51vw!important;
  margin-bottom:10px;
}
#terminos .card{
  border:0px!important;
  background-color: transparent;
}

#terminos .card-header {
border:0px;
background-color: white;
text-align: center;
}
#terminos .card-header a{
  text-align: center;
  
  font-size: 16px;
  font-weight: 900;
    text-align: center;
  
  border-radius: 30px;
  width:100%;
  height: 49px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #B9967F!important;
  color:white!important;
}
#terminos .card-header .collapsed{
  border:1px solid #B9967F;
  background-color: white!important;
  color:#B9967F!important;
}

#terminos .btn:after{
  content: '\F282';
  position: absolute;
  font-family: 'Bootstrap-icons';
  right:10%;
}

#terminos .collapse:after{
  
  content: '\F286'!important;
  position: absolute;
  font-family: 'Bootstrap-icons';
  right:10%;
}

.terminos-descarga .label-descarga {
    height: 5.51vw!important;
    width: 90vw!important;
    border-radius: 0 20px 0px 0px;
    font-size: 1.17vw!important;
    font-size:16px!important;
    margin-top:0!important;
}
.terminos .nav-link{
  border-radius: 40px!important;
  font-size:20px!important;
  padding: 14.5px 50px;
}

.subtitle-marron {
    color: #353535;
    /* font-size: 1.46vw; */
    font-size: 16px!important;
    font-weight: 700;
    line-height: 16px!important;
}

#pills-sales-tab{
  width: 140px!important;
  border-radius: 30px!important;
  display: inline-flex;
  flex-direction: row;
  border:2px solid #AFAA4C;
}

#pills-suppliers-tab{
  width: 175px!important;
  border-radius: 30px!important;
  display: inline-flex;
  flex-direction: row;
  border:2px solid #EB8050;
}

.icon-sales, .icon-suppliers{
  width: 25px!important;
  height: 25px!important;
}

.icon-sales:after, .icon-suppliers:after{
  width: 25px!important;
  height: 25px!important;
  font-size:20px!important;
}
.descripcion-icon{
  font-size: 20px!important;
}
.download {
    text-decoration: none;
    color: #353535;
    font-size: 16px!important;
  }
  .p-section-sub{
    font-size: 14px!important;color:#676164;
  }

.diagonal-box-mb2:before {
    content: '';
    position: absolute;
    top: 0px;
    right: 0;
    left: 0;
    top:-100px;
    height: 100px;
    background-color: #FAF3EE;
    clip-path: polygon(0 80%, 100% 92%, 100% 100%, 0% 100%);
    padding: 4rem 20%;}

.py-mb-5{
  padding-top:3rem!important;
  padding-bottom:3rem!important;
}

.py-mb-3{
  padding-top:2rem!important;
  padding-bottom:2rem!important;
}

.pb-mb-3{
  padding-bottom:1.5rem!important;
}

.pt-mb-5{
  padding-top:3rem!important;
}

.carousel.pointer-event {
    touch-action: pan-x!important;
}

.pb-mb-5{
  padding-bottom:3rem!important;
}


.mb-mb-3{
  margin-bottom: 1.5rem!important;
}

.contact-mb-title{
  font-size: 14px!important;
  line-height: 18px!important;
  font-weight: 700;
  text-decoration: none;
  color:#353535;
}

.contact-mb-tag{
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color:#353535;
  padding-top:15px;
}

.mb-rosado-carousel{
  background: #FAF3EE!important;
  margin-top:100px!important;
}

.diagonal-box3:before {
    content: '';
    position: absolute;
    top: 414px;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #FAF3EE;
    clip-path: polygon(100% 60%, 0 100%, 100% 100%);
    height: 151px;
    padding: 0 0 0 0;
    margin-bottom: 20px;
}

.gallery-cell {
  
  height: auto!important;
}


.flickity-page-dots .is-selected{
  color:rgba(235, 128, 80, 1)!important;
  background-color: rgba(235, 128, 80, 1)!important;
}

.flickity-page-dots .dot{
  background: transparent;
  border:2px solid rgba(235, 128, 80, 1);
}

  .vertical.carousel .carousel-item-next:not(.carousel-item-start),
.vertical.carousel .active.carousel-item-end {
    transform: translateX(100%)!important ; 
    
}

.vertical.carousel .carousel-item-prev:not(.carousel-item-end),
.vertical.carousel .active.carousel-item-start {
    transform: translateX(-100%)!important  ;
    
}


/*#passionate .p-section, #whoweare .p-section{
text-align:justify;
}
   */ 
.sub-cita {
    font-weight: 500;
    font-size: 16px!important;
    line-height: 20px!important;
    text-align: justify;
    color: #676164;
    padding-left: 10%;
    padding-right: 10%;
}

.cita{
   padding-left: 10%;
    padding-right: 10%;
    font-size: 20px!important;
    line-height: 24px!important;
}

.link-descarga{
  font-size: 16px!important;
  line-height: 24px!important;
  font-weight: 600!important;
  padding-bottom: 15px;
}

.link-descarga:after {
font-size: 16px!important;
  line-height: 24px!important;
  font-weight: 600!important;
  padding-bottom: 5px;
  }


.pmb10{
  padding-left: 10%;
    padding-right: 10%;
}

.cita::before {
    content: "“";
    position: absolute;
    width: 34px!important;
    font-weight: 500;
    font-size: 80px!important;
    line-height: 98px!important;
    color: rgb(233, 195, 170);
    left: 0px;
    top:-120px;
    z-index: -1;
}

.title-section-mb-25{
  font-size:25px!important;
  color:#353535!important;
  font-weight:500!important ;
}

.title-section-mb-25 b{
  font-size:25px!important;
  color:#353535!important;
  font-weight:700!important ;
}

 .pb-md-40{
    padding-bottom: 0px!important;
  }

.aliado .nav-link img {
    width: 257px;
    min-height: 306px;
}

.diagonalderecha:before {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #FAF3EE;
    -webkit-clip-path: polygon(0 27%, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 27%, 100% 0, 100% 100%, 0% 100%);
    height: 14.63vw;
    padding: 0 0 0 0;
    z-index: 99;
  }

.boton-verde{
  width: 210px!important;
  height: 49px!important;
}
.title-section-product {
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 49px;
    color: #6E4C1E;
}

.font-size-14{
  font-size: 14px!important;
  color:rgba(103, 97, 100, 1)!important;
}

.product-single .nav-pills .nav-link {
  font-size:16px!important;
  font-weight: 20px!important;
}

.product-single .nav-pills .nav-link{
  width:100px!important;
}

.subtitle-section-product {
    font-style: normal;
    font-weight: 600;
    font-size:24px;
    line-height: 24px;
    color: #353535;
}

.bannerpane{
  margin-top:0px!important;
}

.cocoa .active:after {
    content: '';
    position: absolute;
    top: 94%;
    left: 50%;
    margin-left: -25px;
    width: 0;
    height: 0;
    border-bottom: solid 25px #fff;
    border-left: solid 25px transparent;
    border-right: solid 25px transparent;
    
}
.diagonal-box-hcacao-mb:before {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    top: -50px;
    background-color: #FAF3EE;
    clip-path: polygon(0 60%, 100% 18%, 100% 100%, 0% 100%);
    height: 18.3vw;
    padding: 0 0 0 0;
}
 .top--50{
    top:0px; position: relative;
  }
.p-section-pills,.p-section-pills p{
  font-size: 16px!important;
  line-height: 20px!important;
}

.label-descarga {
  font-size: 16px!important;
  line-height: 20px!important;
  height: 40px!important;
  border-radius:15px 15px 0px 0px!important;
  }

.texto, .texto b{
  font-size: 16px!important;
  color: rgba(103, 97, 100, 1);
  line-height: 20px!important;
  text-align: center;
  text-transform:Capitalize;
}
.abs-center-mb-36{
  display: flex;
  align-items: center;
  min-height: 32vh!important;
}

.abs-center-mb-50{
  display: flex;
  align-items: center;
  min-height: 50vh!important;
}

.estproducto{
  height: 100%!important;
}
  footer ul li a b{
    font-size: 16px!important;
    font-weight: 700;
    line-height: 20px;
  }
.cocoa .nav-link {
    
    background-size: cover;
    background-position: center;
    min-width: 171px!important;
    min-height: 215px!important;
}
#tipos-productos .nav-link{
  width: 149px!important;
  height: 50px!important;
  font-size: 16px!important;
}

.w49{
  width: 100%;
}

.w50{
  width: 100%!important;
}

  .boton-verde2{
    font-size: 16px!important;
    font-weight: 700!important;
}
  .vector-map{
    height: 490px;
  }
  
  .wwl-vector-map{
    height: 230px!important;
  }

  .morado1{
    background: #B486A3;
    height: 105px;
    width: 100%;
    text-align: center;
  }

  .morado1 h1, .morado2 h1, .morado3 h1{
    font-size: 30px;
    line-height: 37px;
    /* identical to box height */
    font-weight: 700;
    text-align: center;

    /* Primary/blanco */

    color: #FFFFFF;
  }

  .morado1 .p1, .morado2 .p1, .morado3 .p1{
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */

    text-align: center;

    /* Primary/blanco */

    color: #FFFFFF;
  }

  .morado2{
    background: rgba(180, 134, 163, .7);
    height: 105px;
    width: 100%;
  }

  .morado3{
    background: rgba(180, 134, 163, .5);
    height: 105px;
    width: 100%;
  }

  .text-mb-center{
    text-align: center!important;
  }

  .text-mb-right{
    text-align: right!important;
  }
  .background-mb-white{
  	background: white!important;
	}
   .background-mb-rosado{
   	background: #FAF3EE!important;
   }
  .text-mb-left{
  text-align: left!important;
  }

  .verde1{
    background: rgba(64, 165, 160, 1);
    height: 105px;
    width: 100%;
    text-align: center;
  }

  .verde1 h1, .verde2 h1, .verde3 h1{
    font-size: 30px;
    line-height: 37px;
    /* identical to box height */
    font-weight: 700;
    text-align: center;

    /* Primary/blanco */

    color: #FFFFFF;
  }

  .verde1 .p1, .verde2 .p1, .verde3 .p1{
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */

    text-align: center;

    /* Primary/blanco */

    color: #FFFFFF;
  }

  .verde2{
    background: rgba(64, 165, 160, .7);
    height: 105px;
    width: 100%;
  }

  .verde3{
    background: rgba(64, 165, 160, .5);
    height: 105px;
    width: 100%;
  }



  .verd1{
    background: rgba(175, 170, 76, 1);
    height: 105px;
    width: 100%;
    text-align: center;
  }

  .verd1 h1, .verd2 h1, .verd3 h1{
    font-size: 30px;
    line-height: 37px;
    /* identical to box height */
    font-weight: 700;
    text-align: center;

    /* Primary/blanco */

    color: #FFFFFF;
  }

  .verd1 .p1, .verd2 .p1, .verd3 .p1{
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */

    text-align: center;

    /* Primary/blanco */

    color: #FFFFFF;
  }

  .verd2{
    background: rgba(175, 170, 76, .7);
    height: 105px;
    width: 100%;
  }

  .verd3{
    background: rgba(175, 170, 76, .5);
    height: 105px;
    width: 100%;
  }  


  .down-boton{
    width: 46.66px;
    height: 46.66px;
    border: 2px solid #EB8050;
    border-radius: 60px;
    font-size: 20px;
    padding: 7px;
    float: none;
    display: inline-block;
  }

  .plform{
    text-align: center;
  }

  .derecho img{
    width: 100%!important;
     height: 210px!important ;
  }  
  .izquierdo-div{
    width: 100%!important;
    height: 210px!important ;
  }
    .izquierdo img{
    width: 100%!important;
     height: 210px!important ;
  }


  .title-bottom{
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0.5px;
    width: 100%;
    text-transform: uppercase;
    text-align: center;
    font-weight: bolder;
    width: 208px;
    height: 48px;
    background: #AFAA4C;
    border-radius: 25px;
    -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.latest-news .title-bottom{
top: 60%!important;
    left: 45%!important;
    background:transparent!important;
    font-size:16px!important;
    line-height:16px!important;
}

.latest-news:hover .title-bottom{
top: 50%!important;
   
}

.bc-mb-rosado{
  background: #FAF3EE!important;
}

.title-bottom2, .title-bottom2 p{
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px!important;
    height: 11.9vw!important;
    letter-spacing: 0.5px;
    line-height: 20px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bolder;
    opacity: 0;
    text-shadow: 0px 3px 10px rgba(83, 83, 83, 0.05);
    -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.latest-news .title-bottom2, .latest-news .title-bottom2 p{
	top:80%;
    font-size:16px!important;
    left:0!important;
    padding:1.1vw;
    color:#fff;
    transform:none!important;
}

.latest-news:hover .title-bottom2, .latest-news:hover .title-bottom2 p{
	top:54%;
    font-size:16px!important;
    left:0!important;
    padding:1.1vw;
    color:#fff;
    transform:none!important;
    font-weight:400;
    text-align:left;
    padding-left:1rem!important;
    width:95%;
}

.latest-news:hover .title-bottom2 p{
opacity:1!important;
}

.latest-news .title-top {
    position: absolute;
    top: 8%;
    left: 45%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
    
    }

.title-bottom-mb{
position: absolute;
    top: 94%;
    width: 100%;
    left:50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px!important;
    line-height: 32px!important;
    font-weight: 600;
    background: rgba(160, 153, 71, 0.8);
    height: 32px!important;
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 10px;
    text-align: left;
}

.title-bottom2 .boton-blanco{
  font-size: 16px;
  line-height: 20px;
  text-shadow: 0px 3px 10px rgba(83, 83, 83, 0.05);
  
}


.izquierdo img,.derecho img{

  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.izquierdo:hover img,.derecho:hover img{
   -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
  -o-filter: blur(3px);
  filter: blur(1px);
  filter:brightness(80%);
  transform: scale(1.03);
  overflor:hidden;
}

.izquierdo:hover .title-bottom,.derecho:hover .title-bottom{
    top:40%;
    border:0px;
    background:transparent;
    font-size:30px;
    width:350px;
  }

.izquierdo:hover .title-bottom2,.derecho:hover .title-bottom2{
  -webkit-opacity: 1;
  opacity: 1;
  }

  .boton-orange{
        width: 176px;
    font-size: 16px;
    font-weight: 600;
    height: 48px;
    float:none!important;
    display: inline-block;
  }

  .t-m-center{
    text-align: center;
  }

  .con-baner{
    width: 100%!important;
    height: 320px!important;
  }

  .h1-interno{
    font-size: 40px!important;
    line-height: 49px!important;
    font-weight: 700!important;
  }

  .accordianNav {
    /*  this width is arbitrary and here for display only */
    /*max-width: 300px;*/
   /* background: #222;*/
    
    padding: 1em 0;
    border-radius: 4px;
    text-align: center;
}

.accordianNav a,
.accordianNav h3 {
    display: block;
    line-height: 19.5px;
    color: white;
    letter-spacing: 2px;
    position: relative;
    z-index: 1;
    cursor: pointer;
    padding-left: 1em;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    text-align: center;

    /* Primary/blanco */

    color: #FFFFFF;
    padding-top: 2px;
}

.accordianNav .dropArrow{
          border-bottom: 1px solid #E9C3AA;
          padding-top: 15px;
    padding-bottom: 10px;
}

.accordianNav a {
    text-decoration: none;
    padding-left: 0;
}





/* Background hover animation. */

/*.accordianNav h3:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background-color: #444;
    background: rgba(244, 244, 244, .3);
    transition: all 0.3s ease-out;
}*/

.accordianNav h3:hover:before,
.accordianNav .dropArrow.active:before {
    width: 2%;
}

.accordianNav .dropArrow span {
    z-index: 2;
    position: relative;
    font-size:16px;
    line-height: 19.5px;
    font-weight: 700;
font-size: 16px;
line-height: 20px;
/* identical to box height */

text-transform: uppercase;

/* Primary/blanco */

color: #FFFFFF;
}

.accordianNav .dropArrow:after {
    content: "";
    width: 6px;
    height: 6px;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    float: right;
    position: relative;
    top: 8px;
    right: 25px;
    transform: rotate(45deg);
    transform-origin: center;
}

.accordianNav .dropArrow.active {
    color: white;
}

.accordianNav .dropArrow.active:after {
    transform: rotate(-135deg);
    border-color: #fff;
}


.derechos{
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  /* or 143% */

  text-align: center;

  /* Primary/blanco */

  color: #FFFFFF;
}


/* +Hover and Touch effect */

.accordianNav a:hover,
.accordianNav a:active,
.accordianNav h3:hover,
.accordianNav h3:active,
.accordianNav h3.dropArrow:hover:after,
.accordianNav h3.dropArrow:active:after {
    color: white;
    border-color: #fff;
    -webkit-transition: all 0.5s cubic-bezier(0.36, 1.64, 0.29, 0.88);
    transition: all 0.5s cubic-bezier(0.36, 1.64, 0.29, 0.88);
}

.accordianNav li {
    list-style-type: none;
}

.accordianNav a {
    transform: translate(0px, 0px);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}


/*Drop links*/

.accordianNav ul ul li a {
    padding: .4em;
    font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */

text-align: center;

/* Primary/blanco */

color: #FFFFFF;
}


/*hover effect on links*/

.accordianNav ul ul li a:hover {
    transform: translate(8px, 0px);
}


/*Hide and show the drops*/

.accordianNav ul ul {
    display: none;
}

.accordianNav li.active ul {
    display: block;
}

.nav-pills .nav-item:nth-child(1) .nav-link{
  font-size: 16px;
    width: 173px;
}

.nav-pills .nav-item:nth-child(2) .nav-link{
  font-size: 16px;
    width: 173px;
}

.nav-pills .nav-item:nth-child(3) .nav-link{
  font-size: 16px;
    width: 173px;
}

.mision{
  margin-top:60px
}
/* --------------------------------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;    
    height: 100vh;
    background-size: cover;
    /*Font size here sets all font-sizes and paddings */
    font-size: 16px;
}

  .gallery-cell {
    width: 70%!important;
    min-height: 337px!important;
    max-width: 400px;
  }

.z-index101{
margin-top:80px
}

  #banner {
    height: auto;
}

/* menu mobile */


 .p-section, .p-section p, .p-section ul li{
  font-size:16px;
  font-weight: 500;  
}
	
	.p-section-middle, .p-section-middle p, .p-section-middle ul li{		
	  font-size:14px;
  font-weight: 500;  	
	}

.p-section p b{
font-size:16px!important;
  font-weight: 700;
  line-height: 20px;
}


.label-imagen .p-section {
    font-size: 16px!important;
}

.vertical .carousel-indicators{
    right: unset;
    margin-right: unset !important;
    margin-left: 4.5%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    top:90%;
    left:-15px;
}

.vertical.carousel .carousel-indicators [data-bs-target] {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px white;
    margin-top: 1.46vw;
    margin-right: 10px;
    margin-left: 10px;
}

.vertical .carousel-indicators .active {
    background-color: white!important;
}

/* fin menu mobile */ 
  .vertical .p-section {
    width: 60%;
  }

  #sostenibilidad.card .img-wrapper {
    height: 17em;
  }

  #carouselwwl.card .img-wrapper {
    height: 17em;
  }

  .logo{
    position: abosulte;
    top:0px;
    left:0;
    padding:15px;
  }

  .logo img{
    width: 94px;
    height: 56px;
  }

  header{
    height: 80px!important;
    padding-top:0!important;
    padding-bottom: 0!important;
  }
  .m-toggle{
    padding-right:0!important;
    justify-content:end;
  }
  .title-section{
    font-size:30px!important;
    line-height: 34px!important;
    overflow: visible;
    text-transform: capitalize;
  }

  .title-section b{
    font-size:40px!important;
    line-height: 34px!important;
    overflow: visible;
    text-transform: capitalize;
  }

  .boton-green{
    width: 176px;
    font-size: 16px;
    font-weight: 600;
    height: 48px;
    width:176px!important;
  }

  .boton-verde{
    font-size: 16px;
    font-weight: 700;
  }

  .wwa .title-section{
    font-size: 30px!important;
    font-weight: 500;
    line-height: 34px!important;
  }

  .wwa .title-section b{
    font-size: 30px!important;
    font-weight: 700;
    line-height: 34px;
  }

  .carousel-caption{
    width: 100%;
    left:5%;
  }

  .text-right{
    text-align: center!important;
    padding-top:15px;
  }

  .p-mb-0{
    padding-left: 0!important;
    padding-right: 0!important;
  }

  .title-section-mb-30, .title-section-mb-30 b{
    font-style: normal;
    font-weight: 500;
    font-size: 1.875rem!important;
    line-height: 34px;
    /* or 113% */

    text-transform: uppercase;

    /* Primary/gris oscuro */

    color: #353535;
    /*padding-top:20px;*/
  }

  .title-section-mb-30 b{
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 34px;
    /* or 113% */

    text-transform: uppercase;

    /* Primary/gris oscuro */

    color: #353535;
  }

.title-section-mb-20{
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 29px;
    /* Primary/gris oscuro */

    color: #fff;
  }

  .title-section-mb-18{
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    /* Primary/gris oscuro */

    color: #fff;
  }

  .title-section-mb-18 b{
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    /* or 113% */

    text-transform: uppercase;
    color: #fff;
  }


.title-section-mb-24{
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 29px;
    /* Primary/gris oscuro */

    color: #353535;
  }

  .title-section-mb-30-b{
    font-style: normal;
    font-weight: 500;
    font-size: 1.875rem!important;
    line-height: 34px;
    /* or 113% */

    text-transform: uppercase;

    /* Primary/gris oscuro */
    color: #B9967F;
  }

  .title-section-mb-30-b b{
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 34px;
    /* or 113% */

    text-transform: uppercase;
    color: #B9967F;
  }

  #carouselwwl .abs-center,  #mapa .abs-center{
    min-height: auto;
  }

  hr{
    color:#B9967F!important;
    margin-right: 1.5rem!important;
  }

  .flickity-prev-next-button.previous, .flickity-prev-next-button.next{
    display: none;
  }

  .flickity-page-dots{
    display: block;
  }

  .title-section-mb-24 b{
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    /* or 113% */

    text-transform: uppercase;

    /* Primary/gris oscuro */

    color: #353535;
  }


  .izquierdo,.derecho{
  padding-top: 15px;
  padding-bottom: 15px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  /*padding:1rem 20%;*/
  margin: 0 auto;
  align-self: center;
  overflow: hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index: 100;
  }

  .d-mb-block{
    display: block!important;
    width: 100%;
    margin-top: 15px!important;
    margin-bottom:15px!important ;
  }
  .menu-bar{
    z-index: 999;
    width: 100vh!important;
    max-width: 80%!important;
  }


}





/* fin carousel*/

@media(min-width:1900px){



.vertical .boton-green {
    animation-duration: 1s;
    animation-delay: 1s;
    width: 15.5rem!important;
}

.abs-center-80-1920{
min-height: 80vh!important;
}
.label-descarga{
width:19vw!important;
}

.pcertsvg .nav-link {
    padding-left: 4.5rem!important;
    padding-right: 4.5rem!important;
}

#carouselwwl{
  background: #FAF3EE;
  padding-top:2rem!important;
}


.px-big-5{
padding-left:3rem!important;
padding-right:3rem!important;
}
.navbar-brown{
width:45%!important; 
}
.cover .pcert .nav-item .active:after {
    top: 83%!important;
}
.prod-cacao-p1 {
    left: 0;
    z-index: 99;
    top: 650px!important;
    left: -348px!important;
}
.prod-cacao-p3 {
    left: 60%;
    z-index: 99;
    top: 600px!important;
    /* bottom: 120px!important; */
    left: 800px!important;
}

  .sost-line{
  z-index:99; top:83%!important; left:0;
}
  .front-cbserv {
    left: 27%;
    top: 200px!important;
    z-index: 100;
}


  .down-boton{
    border: 3px solid #Eb8050!important;
  }

  .flickity-prev-next-button{
  border: 3px solid rgba(235, 128, 80, 1);
}
#search button[type="submit"] {

  width: 32px!important;
  height: 32px!important;

}
.prod-cacao2 {
    left: 15%;
    z-index: 99;
    bottom: 260px!important;
}

.prod-cacao-p2 {
    left: -8%;
    z-index: 99;
    /* bottom: 260px!important; */
    top: 500px!important;
}
    .prod-dotted {
    left: 0;
    z-index: 99;
    bottom: 95px!important;
}

  .front-cb1 {
    left: 25%!important;
    top: 240px!important;
    z-index: 100;
}


  .nosotros-dotted-line{
    left: 0;
    z-index: 98;
    bottom: -280px!important;
  }

  .front-grano-nosotros {
    left: 15%;
    z-index: 98;
    bottom: -184px!important;
}

  .mision{
    margin-top:181px!important;
    padding-top:50px!important;
  }

  .abs-center-19-80{
    min-height: 80vh!important;
  }

  .diagonal-box3:before{
  content:'';
  position: absolute;
  top:0px;
  right: 0;
  left:0;
  bottom: -3px;
  background-color:#FAF3EE;
  clip-path: polygon(100% 25%, 0 100%, 100% 100%)!important;
  height: 183px!important;
  padding: 0 0 0 0;
 /* margin-bottom: 20px;*/
}
  .front-dotted-home {
    left: 0;
    z-index: 98;
    bottom: -190px!important;
}
.down-boton{
      color: #EB8050;
    float: right;
    /*margin-right: 1.1vw;*/
    padding: 0.44vw;
    border: 2px solid #EB8050;
    border-radius: 64px;
    width: 64px;
    text-align: center;
    height: 64px;
    text-align: center;
    vertical-align: middle;
    font-size: 1.46vw;
    font-weight: 900;
}

  .boton-orange{
  background: transparent;
  color: #EB8050;
  
  display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

text-decoration: none;
border:2px solid #EB8050;
border-radius: 40px ;
padding:9px 45px!important;
font-weight: 700;
}

.diagonal-box2:before{
  content:'';
  position: absolute;
  top:0;
  right: 0;
  left:0;
  bottom: -3px;
  background-color:#FAF3EE;
  clip-path: polygon(0 80%, 100% 94%, 100% 100%, 0% 100%);
  padding: 4rem 20%;
}

  .nav-pills .nav-item:nth-child(1) .nav-link{
    border-bottom-left-radius: 40px;
    border-top-left-radius: 40px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color:#6E4C1E;
    font-size: 1.46vw;
    width: 19.03vw;
    font-weight: 600;
}

.nav-pills .nav-item:nth-child(2) .nav-link{
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    color:#6E4C1E;
    font-size: 1.46vw;
    width: 19.03vw;
    font-weight: 600;
}

#search button[type="submit"] {
    /* margin-right: 0px!important; */
    margin-top:5px;
}

.boton-green{
  border-radius: 40px!important;
}

  .h-90px{
    height: 75px!important;
  }

 #estandareslqh{
    height:   48.75rem!important  ;
  }
  #estandares{
    height: 46.25rem!important  ;
  }

 .roasted-img{
      width:1059px!important  ;
}
.slider1{
  width: 548px!important   ;
}

    #banner{
    background-repeat: no-repeat; background-size:cover ; background-position: center; height:75vh!important;
  }

  .form-control{
    padding:.7rem .9rem;
  }

  .snack{
    display: none!important;
  }

  .snack19{
    display: block;
  }
.vector-map{
  height: 40vw!important;
  text-align: center;
  }
  .vertical-line {
    left: 42%!important;
    z-index: 98;
  }
  .topnav::before {
    border-bottom: 56.25px solid white;
  }

  .diagonal-box4:before {
    height: 220px!important;
  }
  .wwaline{
    width: 52rem!important;
  }
  /*.izquierdo {
    clip-path: polygon(0% 0%, 97% 0%, 93% 100%, 0% 100%)!important;
  }

  .derecho {
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 3% 100%)!important;
  }*/

  .vertical-line img {
    height: 85vw!important;
}
.vertical-line {
    left: 39.5%!important;
    z-index: 98;
    top:4px;
}

.cocoa .nav-link{
  min-width: 26.88rem;
  height: 31.9rem;
}

.idioma .nav-link {
    font-size: 15px;
    background-color: #AA8771;
    height: 95%!important;
}

}

/*carousel latest news*/
#latest .img-wrapper{
    max-width: 100%;
    height: 38em;
  }
  #latest img{
    max-width: 100%;
    max-height: 100%;
  }
  
  #latest .carousel{
    display: flex;
  }
  #latest .carousel-item{
    display: block;
    margin-right: 0;
    flex: 0 0 calc(100%/2);
  }
  #latest .carousel-inner{
    padding: 1em;
  }
  #latest .card{
    margin: 0 .5em;
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
    border: none;
}
#latest .carousel-control-prev,#latest  .carousel-control-next{
    background-color: #e1e1e1;
    width: 6vh;
    height: 6vh;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}







/* carousel iconos */
/*


*/


@media (min-width: 768px) and (max-width: 991px) {
  /* Show 3rd slide on md    if col-md-4*/
        .carousel-inner2 .active.col-md-4.carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2 {
        position: absolute;
        top: 0;
        right: -33.3333%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
    

}

@media (min-width: 576px) and (max-width: 768px) {
  /* Show 2 slide on md  if col-md-4*/
        .carousel-inner2 .active.col-sm-6.carousel-item2 + .carousel-item2 + .carousel-item2 {
        position: absolute;
        top: 0;
        right: -50%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }

}
@media (min-width: 576px) {
  .carousel-item2 {
  margin-right: 0;
}

    /* show 2 items */
    .carousel-inner2 .active + .carousel-item2 {
        display: block;
    }
    
    .carousel-inner2 .carousel-item2.active:not(.carousel-item2-right):not(.carousel-item2-left),
    .carousel-inner2 .carousel-item2.active:not(.carousel-item2-right):not(.carousel-item2-left) + .carousel-item2 {
        transition: none;
    }

    .carousel-inner2 .carousel-item2-next {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    /* left or forward direction */
    .active.carousel-item2-left + .carousel-item2-next.carousel-item2-left,
    .carousel-item2-next.carousel-item2-left + .carousel-item2,
    .carousel-item2-next.carousel-item2-left + .carousel-item2 + .carousel-item2 {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    } 
    
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner2 .carousel-item2-prev.carousel-item2-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .active.carousel-item2-right + .carousel-item2-prev.carousel-item2-right,
    .carousel-item2-prev.carousel-item2-right + .carousel-item2,
    .carousel-item2-prev.carousel-item2-right + .carousel-item2 + .carousel-item2 {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

/*MD*/
@media (min-width: 768px) {

    /* show 3rd of 3 item slide */
  .carousel-inner2 .active + .carousel-item2 + .carousel-item2 {
        display: block;
    }
 
    .carousel-inner2 .carousel-item2.active:not(.carousel-item2-right):not(.carousel-item2-left) + .carousel-item2 + .carousel-item2 {
        transition: none;
    }
  
    
    .carousel-inner2 .carousel-item2-next {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    
    /* left or forward direction */
    .carousel-item2-next.carousel-item2-left + .carousel-item2 + .carousel-item2 + .carousel-item2 {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* right or prev direction */
    .carousel-item2-prev.carousel-item2-right + .carousel-item2 + .carousel-item2 + .carousel-item2 {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}


/*LG 6th*/
@media (min-width: 991px) {

    /* show 4th item */
    .carousel-inner2 .active + .carousel-item2 + .carousel-item2 + .carousel-item2 {
        display: block;
    }
    
    .carousel-inner2 .carousel-item2.active:not(.carousel-item2-right):not(.carousel-item2-left) + .carousel-item2 + .carousel-item2 + .carousel-item2 {
        transition: none;
    }
    


    
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item2-prev.carousel-item2-right + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2 {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

/*LG 6th*/
@media (min-width: 991px) {

        /* show 5th and 6th item */
    .carousel-inner2 .active + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2,
  .carousel-inner2 .active + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2 {
        display: block;
    }

    
  
    .carousel-inner2 .carousel-item2.active:not(.carousel-item2-right):not(.carousel-item2-left) + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2,
  .carousel-inner2 .carousel-item2.active:not(.carousel-item2-right):not(.carousel-item2-left) + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2 {
      transition: none;
    }

    
  
  /*show 7th slide for animation when its a 6 slides carousel */
       .carousel-inner2 .active.carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2  + .carousel-item2 {
        position: absolute;
        top: 0;
        right: -16.666666666%;
        z-index: -1;
        display: block;
        visibility: visible;
  }
  
      /* forward direction > */
    .carousel-item2-next.carousel-item2-left + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2,
  .carousel-item2-next.carousel-item2-left + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2 {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
  
      /* prev direction < last item animation fix */
    .carousel-item2-prev.carousel-item2-right + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2,
    .carousel-item2-prev.carousel-item2-right + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2 + .carousel-item2 {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}
 .navbar-brown{
  width:55%!important; 
}  


.mv-phone { 
  font-size: 12px!important;  
  text-transform: capitalize!important; 
}


.svg-email {
  padding-top: 10px;
}

.whatsapp img {
  position: fixed;
  bottom: 80px;
  right: 50px;
  z-index: 9999!important;
  width: 70px;
  height: 70px; 
}
 
/* svg {
  width: 80px;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
} */

.text-dark-color{
	color:#353535
}

/*hubspot forms*/
.hs-form-private span,
.hs-form-private span strong,
.hs-richtext,
.hs-input option,
.hs-richtext strong,
.submitted-message,
.submitted-message span {
  color: #676164 !important
}

.submitted-message {
  font-weight: bold;
}

.form-columns-2,
.form-columns-1 {
  max-width: 100% !important;
  margin-bottom: 1rem !important;
}


.form-columns-2 .input,
.form-columns-1 .input {
  margin-right: 1.8rem !important;
}

.hs-error-msgs,
.inputs-list {
  list-style-type: none;
  margin-bottom: 0;
}

.hs-error-msg {
  margin-top: 0.7rem;
  color: #c02b0a !important;
}

.hs-form-booleancheckbox {
  margin-top: 1rem;
}

.hs-form-booleancheckbox-display {
  display: flex;
  align-items: center;
}

.hs-form-field>label {
  margin-bottom: 0.5rem;
}

.hs_error_rollup {
  display: none;
}

.hs-submit {
  margin-top: 1rem;

}

.hs-input {
  width: 100% !important
}

.hs-form-booleancheckbox .hs-input {
  width: auto !important
}

.hs-fieldtype-intl-phone {
  padding: 0 !important;
  display: flex !important;
}

.hs-button:hover {
  background: transparent;
  color: #EB8050;
}

select {
  appearance: none;
  background: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806 13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z' fill='%23212121'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  border-radius: 2px;
  padding: 0.25rem 2rem 0.25rem 0.75rem;
}

/*end hubspot forms*/


/* custom */

.text-dark{
	color:#353535 !important
}

.bg-light-cream {
    background-color: #FAF3EE;
}

.bg-brown,
.bg-brown-oak {
  background-color: #6E4C1E;
}

.bg-energetic-green {
  background: #40A3A0;
}

.text-energetic-green {
  color: #40A3A0;
}

.text-energetic-green:hover {
  color: #40A3A0;
}

.text-brown {
  color: #6E4C1E;
}

.text-soft-brown{
	color:rgb(185, 150, 127);
}

.boton-verde-custom {
  width: unset;
  height: unset;
  border-radius: 100px;
}

.boton-verde-custom:hover {
  color: #AFAA4C !important;
  border: 2px solid #AFAA4C !important
}

.image-container {
    position: relative;
    display: inline-block;
}

.image-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    pointer-events: none; 
}

#tipos-productos .nav-link.active {
  color: #fff;
  background: #84BD00 !important;
}

#tipos-productos .nav-item .nav-link {
  border: 2px solid #84BD00 !important;
}

#tipos-productos .nav-item .nav-link {
  border: 2px solid #84BD00 !important;
  color: #84BD00;
}

.p-section-custom {
  font-size: 20px;
}


.lnk {
  width: 138px;
  border: 2px solid #006699;
  border-radius: 100px;
  padding: 4px 11px;
}

.front-dotted-sust-custom {
  right: 50px;
  z-index: 1;
  bottom: 50px;
}

.prod-dotted-custom {
  left: 0;
  z-index: 1;
  bottom: 254px;
}

.boton-blanco-custom {
    text-decoration: none;
    width: unset;
    height: unset;
    border: 2px solid white;
    border-radius: 100px;
    background: white;
    font-weight: 700;
    padding: 10px 40px;
    text-shadow: 0px 3px 10px rgba(83, 83, 83, 0.05);
    color: #40A3A0;
    text-transform: initial;
}

.boton-blanco-custom:hover{
    text-decoration: none;
    width:unset;
    height: unset;
    border: 2px solid #84BD00;
    border-radius:  100px;
    background: #84BD00 ;
    font-weight: 700;
    padding: 10px 40px;
    text-shadow: 0px 3px 10px rgba(83, 83, 83, 0.05);
    color: white;
    text-transform: initial;
}



.background-left,
.background-right {
    position: absolute;
    top: 50%;    
    height: auto;
    transform: translateY(-50%);
}

.background-left {
    left: 0; 
}

.background-right {
    right: 0; 
}

@media screen and (max-width: 768px) {
   	.background-left,
.background-right {
		display:none
	}	
	
	.title-section5{
		font-size: calc(1.3rem + 0.6vw);
	}
	
	
}

.prod-cacao-custom{
    z-index:auto !important;
}

.btn-link-custom{
    border: 2.5px solid #EB8050;
    background: transparent;
    padding: 10px 25px;
    border-radius: 100px;
    color: #EB8050;
    font-weight: 600;
    line-height: 19px;
}

.btn-link-custom:hover{
    border: 2.5px solid #EB8050;
    background: #EB8050;
    color:white;
}

.nav-link-custom{
 border: 2px solid #84BD00 !important;
    color: #84BD00;
    background: transparent;
    border-radius: 100px;
    padding: 5px 10px;
    font-weight: 600;
}

.nav-link-custom.active{
    color: #fff;
    background: #84BD00;
}

footer *{
	color: #fff;
}

.lang a{
	color:#fff
}

.breadcrum *{
	color:#fff
}


.arrow_button button{
	border:2px solid #ed8151 !important;
}

/* The Modal */
.modals {
  display: none !important; 
  position: fixed; 
  z-index: 99999; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4);
}

/* Modal Content */
.modals-content {
  background-color: #fefefe;
  margin: auto !important;
  padding: 20px;
  border: 1px solid #888;
  width: 500px;
}

@media (max-width: 767px){
	.modals-content {
	    width: 90%;
		}
}

/* The Close Button */
.closes {
  color: #aaaaaa;
  font-size: 28px;
  font-weight: bold;
  display: block;
  text-align: right;
}

.closes:hover,
.closes:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.stk-img {
  transition: opacity 0.5s ease;
  opacity: 1;
}

/*menu new mpf*/


.mpf-navbar .navbar-toggler .hamburger-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  z-index: 11;
  float: right;
}
.mpf-navbar .navbar-toggler .hamburger-toggle .hamburger {
  position: absolute;
  transform: translate(-50%, -50%) rotate(0deg);
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  pointer-events: none;
}
.mpf-navbar .navbar-toggler .hamburger-toggle .hamburger span {
  width: 100%;
  height: 4px;
  position: absolute;
  background: #333;
  border-radius: 2px;
  z-index: 1;
  transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out;
  left: 0px;
}
.mpf-navbar .navbar-toggler .hamburger-toggle .hamburger span:first-child {
  top: 10%;
  transform-origin: 50% 50%;
  transform: translate(0% -50%) !important;
}
.mpf-navbar .navbar-toggler .hamburger-toggle .hamburger span:nth-child(2) {
  top: 50%;
  transform: translate(0, -50%);
}
.mpf-navbar .navbar-toggler .hamburger-toggle .hamburger span:last-child {
  left: 0px;
  top: auto;
  bottom: 10%;
  transform-origin: 50% 50%;
}
.mpf-navbar .navbar-toggler .hamburger-toggle .hamburger.active span {
  position: absolute;
  margin: 0;
}
.mpf-navbar .navbar-toggler .hamburger-toggle .hamburger.active span:first-child {
  top: 45%;
  transform: rotate(45deg);
}
.mpf-navbar .navbar-toggler .hamburger-toggle .hamburger.active span:nth-child(2) {
  left: 50%;
  width: 0px;
}
.mpf-navbar .navbar-toggler .hamburger-toggle .hamburger.active span:last-child {
  top: 45%;
  transform: rotate(-45deg);
}



   @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
 

	.mpf-navbar {
      position: sticky;
      top: 0;
      z-index: 1030;
    }
    
    .mpf-navbar .dropdown-menu.show {
        -webkit-animation: fadeIn 0.3s alternate;
        animation: fadeIn 0.3s alternate;
    }

    .mpf-navbar .menu-triangle {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        animation: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .mpf-navbar .nav-item.dropdown.dropdown-mega {
        position: static;
    }

    .mpf-navbar .nav-item.dropdown.dropdown-mega .dropdown-menu {
        width: 100%;
        top: auto;
        left: 0;
    }

    .mpf-navbar .nav-link {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .mpf-navbar .navbar-toggler {
        border: none;
        padding: 0;
        outline: none;
    }

    .mpf-navbar .navbar-toggler:focus {
        box-shadow: none;
    }

    .mpf-navbar .hamburger-toggle {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 50px;
        z-index: 11;
        float: right;
    }

    .mpf-navbar .hamburger {
        position: absolute;
        transform: translate(-50%, -50%) rotate(0deg);
        left: 50%;
        top: 50%;
        width: 50%;
        height: 50%;
        pointer-events: none;
    }

    .mpf-navbar .hamburger span {
        width: 100%;
        height: 4px;
        position: absolute;
        background: #333;
        border-radius: 2px;
        z-index: 1;
        transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1.0), all 0.2s ease-in-out;
        left: 0px;
    }

    .mpf-navbar .hamburger span:first-child {
        top: 10%;
        transform-origin: 50% 50%;
        transform: translate(0% -50%) !important;
    }

    .mpf-navbar .hamburger span:nth-child(2) {
        top: 50%;
        transform: translate(0, -50%);
    }

    .mpf-navbar .hamburger span:last-child {
        left: 0px;
        top: auto;
        bottom: 10%;
        transform-origin: 50% 50%;
    }

    .mpf-navbar .hamburger.active span:first-child {
        top: 45%;
        transform: rotate(45deg);
    }

    .mpf-navbar .hamburger.active span:nth-child(2) {
        left: 50%;
        width: 0px;
    }

    .mpf-navbar .hamburger.active span:last-child {
        top: 45%;
        transform: rotate(-45deg);
    }

    #triangle-topright {
        width: 0;
        height: 0;
        border-top: 45px solid #B9967F;
        border-left: 40px solid white;
    }

    .bg-light-brown { background: #B9967F; }
    .bg-linen { background: #FAF3EE; }

    .mpf-navbar .nav-item.dropdown-mega {
        position: relative;
    }

    .mpf-navbar .menu-triangle {
        display: none;
        position: absolute;
        top: calc(100% - -8px);
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #FAF3EE;
        z-index: 1050;
    }

    @media (min-width: 992px) {
        .mpf-navbar .dropdown-mega:hover .menu-triangle {
            display: block;
        }

        .mpf-navbar .dropdown-mega:hover .dropdown-menu,
        .mpf-navbar .dropdown-mega:hover .menu-triangle {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            animation: fadeIn 0.3s ease forwards;
        }
    }

    .top-bar {
        transition: transform 0.3s ease;
        z-index: 1060;
    }

    .top-bar.hide {
        transform: translateY(-100%);
    }

    .mpf-navbar .dropdown-toggle.no-caret::after {
        display: none;
    }
    
    .mpf-navbar .submenu li{
      margin-bottom: .5rem; 
    }

    .mpf-navbar .submenu li:last-child {
      margin-bottom: 0 !important;
    }
    


/* Mobile */
@media (max-width: 991.98px) {
  #main-navbar-logo {
    width: 100px !important;
  }

  #main-navbar-brand {
    margin-top: 0 !important;
  }
}

.js-mega-dropdown .dropdown-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.js-mega-dropdown .dropdown-menu.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* img-hover */

.img-hover img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    /* Transición para la opacidad */
    transition: opacity 0.2s ease-in-out; /* 0.2 segundos de duración, con un efecto suave */
    transform: scale(1); /* Asegura que no haya otro efecto de transición que interfiera */
}

/* El efecto de hover en el contenedor puede seguir añadiendo estilo sin afectar la transición de opacidad */
.img-hover:hover {
    border-color: #090909;
    box-shadow: 0 6px 12px rgba(68, 68, 68, 0.2);
    border-radius: 20px;
}

.img-hover:hover img {
    /* Puedes mantener esto si quieres un pequeño zoom junto con el fade */
    transform: scale(1.02);	    
}


/* end custom */