body{

	font-family: Futura, Sans-Serif;
    margin: 0;
    padding: 0;
}
p{
    font-family: Avenir, Sans-Serif;
}
button{
    background: #fff;
}
@font-face {
    font-family: Futura;
    src: url("Futura.ttc");

  }
  @font-face {
    font-family: Avenir;
    src: url("Avenir.otf");

  }
  @font-face {
    font-family: DmsRegular;
    src: url("DMSerifDisplay-Regular.ttf");
  }
  @font-face {
    font-family: DmsItalic;
    src: url("DMSerifDisplay-Italic.ttf");
  }
  /* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
h1, h2, h3, h4,h5,h6{
    margin: 0;
    padding: 0;
    font-family: 'Futura';
    font-weight: 100;
    color:#858463;
}
.mainContainer{
    display: flex;
}
.mainContainerResult{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px auto;
    max-width: 1200px;
}
.questionBox{
	display: none;
    max-width: 600px;
    margin: 0 auto;
    padding: 4px 20px 17px;
    border-radius: 10px;
    text-align: left;

}
.logoMobileInicio {
    display: none;
    width: 176px;
    margin: 12px auto 0;
}
.flex-box-form{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.questionBox h3{
    font-size: 24px;
    text-transform: uppercase;
    text-align: left;
    color: black;
    margin-bottom:60px;
}
.helloQ0{
    margin-top: 25px;
    padding-bottom: 10px;

}
.nameQ0{
    margin-bottom: 10px;

}
.imgBack{
    position: absolute;
    width: 300px;
    z-index: -10;
    right: 0px;
    bottom: 0;
}
#enterName{
    display: inline;
    background: #7b7b5b;
    color: #fff;
    margin: 30px 0 0;
    text-align: center;
    cursor: pointer;
    padding: 15px 22px;
    font-size: 14px;
    font-weight: bold;
    transition: all .2s ease-in-out;

}
#enterName:hover{
    transform: scale(1.1); 
}
.splitDiv{
    display:flex;
}
.boxSplit{
    width: 50%;
}
.getBig{
    width: 700px;
    max-width: 700px;
}
.botNextt{
    display: inline;
    background: #7b7b5b;
    color: #fff;
    text-align: center;
    cursor: pointer;
    padding: 15px 21px;
    font-size: 14px;
    border: none;
    border: 2px solid #7b7b5b;
   
    font-size:14px;
    font-weight: 900;
    transition: all .2s ease-in-out;
}
.botNextt:hover{
    transform: scale(1.1);  
}
    
.answers{
	display: flex;
    flex-direction: column;
}

.answers button{
    margin: 5px 0;
    padding: 15px;
    background: #fff;
    font-family: 'Futura';
    border: 2px solid #bdbcaa;
    color: #7b7b5b;
    font-size: 16px;
    cursor: pointer;
}
.backkk{
    background: #fff;
    border: 2px solid #bdbcaa;
    padding: 15px 25px;
    position: relative;
    font-family: 'Futura';
    font-weight: 600;
    color: #8b8a7d; 
    font-size: 14px;
    font-weight: 900;
    margin-right: 25px;
    cursor:pointer;
    transition: all .2s ease-in-out;

}
.backkk:hover{
    transform: scale(1.1); 
}

.gapRight{
    margin-right: 25px;
}
.answers button:hover{
background:#e7eef2;
border: 2px solid #e7eef2;
}
.selectTag{
    color: #9fabb2;
    margin-bottom: 60px;
    margin-top: 13px;
}
.sideA{
    width:66%;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
    transition:0.5s;
}

.sideB{
    width:50%;
    height: 100vh;
    background: #e7eef2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    overflow: auto;
    transition:0.2s;
    
}
.imgSideB{
    width: 120px;
    margin-bottom: 20px;
    display: none;
}

#myProgress {
  display:none;
  position: relative;
  width: 80%;
  height: 20px;
  background-color: #ddd;
  border-radius: 30px;
}

#myBar {
  position: absolute;
  width: 0;
  height: 100%;
  background-color: #4CAF50;
  border-radius: 30px;
}

#ingredients{
  
   
    flex-wrap: wrap;
    overflow-y: auto;
    height: 38vh;
    margin-top: 30px;
   
}
#q0 input{
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #c6c6b6;
    margin-right: 9px;
    width: 350px;
    height: 30px;
}
#emailciton{
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #c6c6b6;
    margin-right: 9px;
    width: 350px;
    height: 30px;
    margin-top:60px;
    
}
.buttonGo{
    display: inline;
    background: #7b7b5b;
    color: #fff;
    margin: 50px 0 0;
    text-align: center;
    cursor: pointer;
    padding: 15px 22px;
    font-size: 14px;
    font-weight: bold;
    transition: all .2s ease-in-out;
    border: none;
}
.containerZip{
    display:flex;
    margin-bottom: 55px;
}

.containerZip div{
    width: 50%;
}
.containerZip div h5{
    margin-bottom: 8px;
}
#q1_28 input{
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #c6c6b6;
    height: 30px;
    width: 250px;
}
#q1_29 input{
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #c6c6b6;
    height: 30px;
    width: 250px;
    margin-bottom: 5px;
    display: block;
    margin-top: 5px;
}
#q1_24 textarea{
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #c6c6b6;
    height: 156px;
    width: 380px;
    margin-bottom: 50px;
    display: block;
}
#q1_26 textarea{
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #c6c6b6;
    height: 156px;
    width: 380px;
    margin-bottom: 50px;
    display: block;
}
#q8_1textarea{
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #c6c6b6;
    height: 156px;
    width: 380px;
    margin-bottom: 50px;
    display: block;
    
    margin-left: 0;

}

#areaName h2{
    position: relative;
    top: -20px;
}
.progress{
    display: none;
    padding-bottom: 15px;
    color: #818181;
    font-size: 14px;
}
textarea{
    width: 90%;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
    height: 83px;
    margin-bottom: 20px;
}

.quest{
        background: #c1fdfd;
    padding: 0px 28px;
    margin: 10px 0;
}

.info{
    display: none;
    width: 360px;
    text-align: center;
    position: relative;
    margin-bottom: 50px;
    background: #e8e6ff;
    padding: 20px;
}
.infoQuiz{
    display:none;
    width: 360px;
    position: relative;
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 15px;
    text-align: left;
    font-family: 'Futura';
    color: #686868;
    font-weight: bold;
}
.facts-icon{
    display: none;
    width: 30px;
}
.seccion1, .seccion2, .seccion3, .seccion4, .seccion5{
    display:flex;
        justify-content: center;
    margin: 30px auto;
}
.sec1part1{
    width: 50%;
}

.sec1part2{
    width: 50%;
}
.titleName{
  font-size: 40px;
  text-transform: uppercase;
}
.titleName2{
    font-size: 18px;
    text-transform: uppercase;
    margin-top: 10px;
    margin-left: 2px;
  }
.imageResult{
  width: 100%;
}


.productosRecomendados{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
.itemProdRec{
    width: 33%;
    background: #fff59c;
    padding: 20px 20px;
    margin: 5px;
}
.itemProdRec p{
        margin: 0;
        text-align: left;
        font-size: 12px;
}
.itemProdRec h4{
    margin-top: 10px;
    margin-bottom: 8px;
    text-align: left;
}
.masque{
    font-weight: bold;
    background: #dfc548;
    padding: 22px;
    margin: 5px;
}
.descriptionIngredient{
    text-align: center;
    background: pink;
    padding: 5px;
    margin-bottom: 0;
}
.emailRegistrado{
    background:rgb(189, 160, 42);
    display:none;
}
.sendpa{
    display:none;

}
#recoverPass{
    cursor:pointer;
}



  .slidercito {
    color: #000;
    margin: 0;
    padding: 0;
    max-width: 613px;
  }


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

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 50%;

  }
  .swiper-slide{
    display: flex;
    flex-direction: column;
  }
  .swiper-wrapper{
      margin-bottom: 30px!important;
  }
  #imgFirst{
    height: 100vh;
    width: 100%;
    object-fit: cover;
    display:block;
  }
  #imgSecond{
    height: 100vh;
    width: 100%;
    object-fit: cover;
    display:none;
  }
  #imgThird{
    height: 100vh;
    width: 100%;
    object-fit: cover;
    display:none;
  }
  #ingredients{
    margin-top: 20px;
  }
  .logo{
    display: block;
    width: 160px;
    margin-bottom: 60px;
  }
  .sConcerns{
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    height: 28px;
}
  
  .sConcerns h3{
    font-size: 17px;
    color:#7c7b57;
  }
  .sConcerns div {
    width: 35px;
    position: relative;
    top: 5px;
    margin-right: 5px;
  }
  .sConcerns div img{
    width: 100%;
  }
  .thanksCity{
    margin-bottom: 60px;
  }

  .logoMobile{
    display: none;
  }
  #ingredientMobile{
    display: none;
  }
  .less button{
   
    padding: 8px;
    
    font-size: 15px;
   
  }
 header{
    background-image: url('../assets/images/backnew.webp');
    background-repeat: no-repeat;
    background-position-y: top;  
    background-size: cover;
    width: 100%;
    height: 90vh;
 }

 .newHeader{
    display: flex;
    height: 1000px;
 }
 .imgBackker{
    width: 100%;
    height: 100%;
    object-fit: cover;
 }
 .blk1{
    width: 40%;
    display: flex;
    align-items: center;
 }
 .blk2{
    width: 70%;
    background-image: url("../assets/images/backnew.webp"); /* The image used */
    height: 100%; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    display: flex;
    align-items: flex-end;

 }
 .navStyle{
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
   
 
 

 }
 .navStyleContainer{
    width: 100%;
    background: #edf2f3;
    padding: 20px 0px 25px;
   
 }
 .menuResult{
    display: flex;
    align-items: center;
   
 }
.logoResult{
    max-width: 175px;
    position: relative;
    top: 2px;
    margin-right: 90px;
}
.infoBanner{
    width: 80%;
    margin: 10px auto;
    
}
.menuTabs{
    margin:0 10px;
    font-size: 14px;
    color: black;
}
.menuTabs a{
    text-decoration:none;
    color:black;
}
.bookMenu{
    border: 2px solid #906e6a;
    padding: 8px 16px 8px 19px;
    color: #906e6a;
    transition:0.5s;
 
}
.bookMenu:hover{
       background: #d3f1d5;
       transform: scale(1.1); 

}
.barResult{
    background:#b1b2a4;
    padding: 15px 0 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;

}
.barResult div{
    text-align: center;
    margin: 5px 25px 0;
    width: 150px;
    padding: 7px 0;
}
.barResult img{
    width:65px;
    margin-bottom: 15px;
    height: 63px;
}
.barResult h4{
 color:#fff;
 font-size: 13px;
}
.tachado{
    text-decoration:line-through;
    font-size: 17px;
    font-weight: normal;
}
.setNow{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    box-shadow: 0px 3px 15px -4px rgba(0,0,0,0.55);
    -webkit-box-shadow: 0px 3px 15px -4px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 3px 15px -4px rgba(0,0,0,0.55);
    position: sticky;
    top: 0;
    z-index: 111;
    background: #fff;
}
.setNow1{
    width: 110px;
    margin: 0 25px;
}
.setNow1 img{
    width: 100%;
   
}
.setNow2{
    margin: 0 25px;
}

.setNow2 h2, .setNow2 h3{
    color:black;
    font-size: 27px;
}
.setNow2 h3{
font-weight: bold;
}
.setNow3{
    margin: 0 25px;
}
.setNow3 a{
    text-decoration: none;
    padding: 15px 25px;
    background: #7b7b57;
    color: #fff;
    display: block;
    text-align: center;
    width: 133px;
    margin:0 auto;
    transition:0.5s;
}
.setNow3 a:hover{
    transform: scale(1.1); 
}
.setNow3 h4{
    color: black;
    margin-top: 10px;
    margin: 7px auto 0;
}
.setNow4{
    width: 30%;
    font-size: 15px;
    text-align: justify;
    margin-left: 25px;
}

.painpoints{
    display: flex;
    margin: 30px;
    align-items: center;
    justify-content: space-between;
}

.painpointsText{
    width: 60%;
    text-align: left;
}
.painpointsText h2{
    color: black;
    margin-bottom: 10px;
    font-size: 36px;
}
.painpointsText h3{
    font-size: 18px;
    text-transform: uppercase;
    color: #a3a3a3;
}
.painpointsText p{
    color:#575853;
}
.painpointsImg{
    width: 30%;
}
.painpointsImg img{
    width: 90%;
}

.mySwiper2{
    max-width: 1100px;
    margin:0 auto;
}
.containerLifestyle{
    background:#e6eef2;
}
.containerLifestyle2{
    max-width: 1100px;
    margin: 0 auto;
    display:flex;
    padding: 100px 0;
    justify-content: space-between;
}
.containerLifestyle2 h1{
    color:#41423d;
    font-size: 37px;
}
.containerLifestyle2 h2{
    color:#666666;
}
.boxLife{
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.categoryLife{
    padding:10px 10px 10px 0;
}
.ingredientLife{
    padding: 0 10px;
    display: flex;
    background: #fff;
    border-radius: 60px;
    width: 70%;
    align-items: center;
    margin: 7px 0;
    height: 50px;
    width: 252px;
}
.ingredientLife2{
    padding: 0 10px;
    display: flex;
    background: #fff;
    border-radius: 60px;
    width: 70%;
    align-items: center;
    margin: 7px 0;
    height: 50px;
    width: 252px;
    flex-direction:column;
}
.ingredientLife2 h4{
    font-size:14px;
}
.ingredientLife img{
    width: 60px;
    margin-right: 15px;
    display: block;
}
.ingredientLife2 img{
    width: 60px;
    
    display: block;
}
.ls1{
    width: 50%;
}
.ls1 h1{
    margin-bottom: 50px;
}
.ls1 h4,.ls1 p{
    color:black;
}
.ls1 h4{
    font-weight:bold;
}
.ls2{
    width: 40%;
}
.ls2h4{
    margin-bottom: 35px;
}
.environmentText{
    font-size: 15px;
    font-weight: 400;

}
.e1{
    width: 60%;
}
.e2{
    width: 30%;
}
.boxEnv{
    display:flex;
    margin-top: 20px;
}
.boxEnv2{
    width: 150px;
    margin: 0 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.boxEnv2 img{
    width: 90px;   
}
.titleEnv{
    font-size:13px;
}
.containerCleanser{
    display:flex; 
    margin-top: 100px;   
}
.containerCleanser1{
    width: 10%;
}
.containerCleanser2{
    width: 20%;
    margin-right: 50px;
    text-align: center;
}
.containerCleanser2 img{
    width:260px;
}
.containerCleanser3{
    width: 40%;
 
}
.containerCleanser3 h2{
    font-size: 35px;
    color:black;
}
.containerCleanser4{
    width: 30%;
    
}
.containerCleanser4 img{
    width:100%;
    margin-top: 240px;
}
.btnGreen{
    text-decoration: none;
    padding: 15px 25px;
    background: #7b7b57;
    color: #fff;
    display: block;
    text-align: center;
    width: 220px;
    transition:0.5s;
}
.btnGreen:hover{
    transform: scale(1.1); 
}
.cleanserInside{
    display: flex;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 30px;
}
.description{
  font-size: 15px; 
  font-family: Avenir, Sans-Serif; 
  line-height: 19px;

}

.btnBorder{
    text-decoration: none;
    padding: 15px 25px;
    border:2px solid #7b7b57;
    font-weight: bold;
    display: block;
    text-align: center;
    width: 133px;
    color: black;
}
.ml{
    text-align:right;color:black;font-weight:bold;
}
.swiper-button-next:after, .swiper-button-prev:after {
    
    font-size: 20px!important;
    margin-left: 35px;
    color: #141313;
    font-weight: 800;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: 'prev';
    margin-right: 50px;
}
.reviewss img{
    width: 100px;
    margin-top: 5px;
    margin-left: 20px;
}
.containerIngredients{
    margin-top: 100px;
}
.ingredientsFinal{
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
}
.bgback{
    background-image: url('../assets/images/ingredients-banner.webp');
    background-repeat: no-repeat;
    background-position-y: bottom;  
    background-size: cover;
    height: 620px;
    z-index: -100;
    position: relative;
    margin-top: -340px;
}


.swiper-pagination-bullet-active{
background:#4d4d4d!important;
}

.containerBeforeAfter{
    background-image: url('../assets/images/bannerresult2.png');
    background-repeat: no-repeat;
    background-position-y: bottom;  
    background-size: cover;
    padding: 50px 0;
}
.lessLenght{
    max-width: 1100px;
    margin:50px auto;
    display: flex;
}

  main {
    display: grid;
    place-items: center;

  }
  
  .container {
    display: grid;
    place-content: center;
    position: relative;
    overflow: hidden;
  
    --position: 50%;
  }
  
  .image-container {
    max-width: 800px;
    height: 100%;
    aspect-ratio: 1/1;
  }
  
  .slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
  }
  
  .image-before {
    position: absolute;
    inset: 0;
    width: var(--position);
    display: block;
    max-width: 100%;
  
  }
  .image-after{
    display: block;
    max-width: 100%;
  }
  
  .slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    opacity: 0;
    /* for Firefox */
    width: 100%;
    height: 100%;
  }
  
  .slider:focus-visible ~ .slider-button {
    outline: 5px solid black;
    outline-offset: 3px;
  }
  
  .slider-line {
    position: absolute;
    inset: 0;
    width: .2rem;
    height: 100%;
    background-color: #fff;
    /* z-index: 10; */
    left: var(--position);
    transform: translateX(-50%);
    pointer-events: none;
  }
  
  .slider-button {
    position: absolute;
    background-color: #fff;
    color: black;
    padding: .5rem;
    border-radius: 100vw;
    display: grid;
    place-items: center;
    top: 50%;
    left: var(--position);
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* z-index: 100; */
    box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
  }

.box-ba{
    width: 30%;
    background: #fff;
    padding: 25px;
    margin: 15px;
    border-radius: 30px;
}
.reviewCard{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.reviewCard h3, .reviewCard h4{
    color:black;
}
.reviewCard p{
    font-size: 14px;
}
.containerReviews{
    max-width: 1100px;
    margin: 100px auto;
}
.boxReview{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;

}

.moree{
    color: #fff;
    margin: 0 auto;
    display: block;
    width: 100px;
    text-align: center;
}
.qtion {
    color: black!important;
}
.ïconMenuMobile{
    display:none;
}
#navMobileList{
    display: none;
}
.navMenuMobile{
    display:flex;
    flex-direction: column;
    align-items: center;
    background: #e0e4e5;
    margin: 10px 0;
}
.menuTabsMobile{
    margin: 10px 0;
    color: black;
}
.menuTabsMobile a{
    text-decoration:none;
}
.foot{
    display: flex;
    justify-content: center;
    padding-top: 50px;
}
.flechaRight{
    margin-right: 20px!important;
}
.foot2{
    display: flex;
    justify-content: space-between;
    max-width: 1100px;
    margin: 30px auto 0px;
    font-size: 13px;
    padding-bottom: 16px;
}
.footDiv{
    width:30%;margin: 0 50px;
}
.targetStyle{
    display:flex;
    margin-top: 20px;
    flex-wrap: wrap;
    
}
.targetStyle div{
    background:#41423d;
    color:#fff;
    padding: 1px 7px 4px;
    text-transform: uppercase;
    margin-right: 10px;
    font-size: 13px;
    margin-bottom: 8px;
}
.logofooter{
    width: 200px;
    margin: 22px auto 15px;
}
.inicioText{
    margin-bottom: 0;
    line-height: 15px;
    font-size: 13px;
}
.popupStyles{
   
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    background: #00000042;
    z-index: 11111;

}
.boxPopup{
    background: #fff;
    padding: 40px;
    max-width: 400px;
    text-align: justify;
}
.boxButtonsPopup{
    
    display: flex;
    justify-content: space-around;
    margin-top: 20px;

}
.boxButtonsPopup div{
    
    cursor:pointer;

}
.imgMasquePop{
    width: 200px;
    margin: 20px auto 10px;
    display: block;
}
#kitLink{
    cursor: pointer;
}
#kitYes, #kitNo{
    transition:0.5s;
    padding: 20px
}

#kitYes:hover{
    background: #7b7b57;
    color: #fff;
    padding: 20px 40px;
}
#kitNo:hover{
    background: #7b7b57;
    color: #fff;
    padding: 20px 40px;
}

.inicioTextResponsive{
    display:none;
    font-size: 11px;
    line-height: 13px;
    margin-top: 18px;
}

#insertNameValidator{
    display:none;
    color:rgb(255, 0, 0);
    font-size: 13px;

    margin: 5px 0 0 0;
}
.validator{
    display:none;
    color:rgb(255, 0, 0);
    font-size: 13px;

    margin: 5px 0 0 0; 
}

.ingredientDesktop{
    align-items: flex-start;
    width: 23%;
    margin: 0px 5% 0;
    text-align: center;
    display: flex;
    align-items: center;
    height: 120px;
    justify-content: center;
}

.ingredientDesktop img{
    width: 60px;
}
.ingredientDesktop h4{
    font-size: 12px;
    text-align: center;
}
.bannerbutton{
    display: block;
}
.infoBannerg{
    margin-top: 25px;
 
}
.textBannerg{
    text-transform: uppercase;
    font-size: 21px;
    line-height: 28px;
}
.bulletPoints{
    position: relative;
    top: 1px;
}
.mapaInteractivo{
    margin-bottom: 25px;
}
.cursorPointer{
    cursor:pointer;
}
.mapaDesktop1{
margin-bottom:30px;
}

.mapaMobile1{
  display:none;  
  margin-bottom:30px;
}
.bannerTextLanding{
    margin-top: 50px;
    margin-bottom: 30px;
}
.barResultLanding{
    background:#ffffff;
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 70px auto 50px;

}
.barResultLanding div{
    text-align: center;
    margin: 5px 25px 0;
    width: 150px;
    padding: 7px 0;
    display: flex;
    align-items: center;
    justify-content: center;
   
  
}

.trueBadges1{
    width: 60%;

}

.trueBadges2{
    width: 50%;

}
.trueBadges3{
    width: 48%;

}
.trueBadges4{
    width: 82%;

}
.trueBadges5{
    width: 64%;

}
.tituloTrust{
    width: 100%;
    margin-bottom: 30px;
    color: black;
    text-align: center;
}


.newBannerLanding{

   background-image: url("../assets/images/banner2.webp"); /* The image used */
    height: 100%; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */

  
    margin: 0 auto;
}

.containerLand{
    display: flex;
    margin: 0 auto;
    max-width: 1100px;
}

.contLand{
    width: 40%;
    margin: 120px 0;
}
.titleLandH2{
    font-size: 32px;
    margin-bottom: 35px;
    color: black;
    letter-spacing: 1px;
}

.strongH2{
    margin-top: 50px;
    font-weight: 700;
    font-size: 21px;
    margin-bottom: 30px;
    color: black;
}
.parrafoLand{
    
    text-align: justify;
    margin-bottom: 30px;
}
.boxBottomLand{
    display: flex;
    justify-content: center;
}
.parrLan{
    text-align: center;
    font-size: 15px;
    text-align: center;
    font-size: 15px;
   
    max-width: 1100px;
    margin: 0px auto;
}
.imageSystem{
    box-shadow: 0px 0px 29px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 29px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 29px 3px rgba(0,0,0,0.2);
    width: 200px;
    border-radius: 8px;
    margin-bottom: 30px;
}
.boxSystem{
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.boxSystem p{
    text-align: center;
    font-size: 14px;
    margin: 16px 30px;
}
.centercito{
    justify-content: center;
}
.anchoTable{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #ccc;
    padding: 6px 20px 0 0;
   
}
    
.anchoMedioTable{
    width: 23%;
    justify-content: center;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 6px 0;
 }
.imgOk{
    width: 40px;
}

.negativ{
    font-size: 30px;
    text-align: center;
    font-weight: 700;
    color: #aba7a7;
    font-family: monospace;
}
.fontSmall{
    font-size: 14px;
}
.backGreen{
    font-size: 12px;
    text-align: center;
    background: #7b7b57;
    border-radius: 15px 15px 0 0;
    padding: 15px 0;
    color: #fff;
    border: 1px solid #7b7b57;
}
.okGreenOk{
    border-left: 1px solid #7b7b57;
    border-right: 1px solid #7b7b57;
}
.newBoxLan{
    width: 20%;
}
.widthLarg{
    max-width: 90%;
}
.leftMarginLand{
    margin-left:40px;
    margin-top: 40px;
}
.leftMarginLand h2{
    color: #fff;
    font-size: 2em;
    font-weight: 900;
}
.leftMarginLand p{
    color:#fff
}
.textLandd{
    text-align: center;
    margin: 80px auto;
    color: black;
}
.textLandd h3{

    color: black;
}
.footerLand{
    background:#ebf0f2;
    padding: 20px 0;
    display: flex;
    justify-content: space-around;
    margin-top: 80px;
}
.bannerLandMobile{
    display: none;
}

.nourish{
    width: 30%;
}
.bookMenu2{
    margin-right: 30px;
    display: flex;
    align-items: center;
}
.upperLandDesk{
    text-transform: uppercase;
    font-weight: 800;
    font-size: 19px;
}
.titLandDeskProd{
    color: black;
    text-align: center;
    font-size: 20px;
    margin: 0 40px;
}
.titleLandIngredientDesk{
    text-align: center;
    color: black;
    padding: 80px 0 50px;
}
.titlandNew2{
    line-height: 40px;
    margin-bottom: 20px;
    font-size: 35px;
}
.backLand{
    margin: 100px auto 20px;
    width: 100%;
    background-image: url(assets/images/backland.webp);
    height: 500px;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;

}
.loginReorder{
    display: inline;
    border: 2px solid #7b7b5b;
    color: #7b7b5b;
    margin: 15px 0 10px;
    text-align: center;
    cursor: pointer;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: bold;
    transition: all .2s ease-in-out;
}
.anchoBig{
    width: 255px;
}
.bannerNewFlex{
    display: flex;
    flex-wrap: wrap;
}
.bannerNewFlex div{
   width: 30%;
   margin: 10px 5px;
   flex-direction: column;
   align-items: center;
   display: flex;
}
.bannerNewFlex div h3{
font-size: 13px;
text-align: center;

}

.menuNew{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.menuNew a{
    text-decoration: none;
    padding: 10px;
}
.menuNewTitle{
    text-align: center;
    margin: 40px auto 40px;
    font-size: 25px;
    color: black;
    
}

.iconNewBanner{
    width: 80px;
    margin-bottom: 10px;
    
}
.concernGoalsImg{
    width: 105px;
    display: block;

}

.goalsBox{
    display: flex;
    margin-bottom: 20px;
    align-items: center;

}

.lifestyleNewSection{

        display: flex;
        flex-direction: column;

}
.lifestyleNewSection div{
    width: 100%;
    margin: 10px 5px;
    flex-direction: row;
    align-items: center;
    display: flex;
 }
 .lifestyleNewSection div h3{
 font-size: 13px;
 text-align: center;
 
 }

 .containerSectionResults{
    max-width:1200px;
    margin:50px auto;
    padding-top:35px;
    width:85%;
 }
 .h4Goals{
    width: 16%;
    font-size: 22px;
    color: black;
    font-weight: 700;
 }
 .goalsBox div:nth-child(1){
    width:16%;
 }
 .goalsBox div:nth-child(2){
    width:14%;
    display: flex;
    justify-content: center;
 }
 .goalsBox div:nth-child(3){
    width:70%;
 }

.imgGoalsOne{
    width:14%;
    display: flex;
    justify-content: center;
}
.firstBox{
    display:flex;
    justify-content: space-between;
    margin-bottom: 50px;
    align-items: center;
}
.containerMapAndEnvi{
    display:flex;
    justify-content: space-between;
    margin-top: 50px;
}
.e2b{
    width:48%
}

.goalsTitleStyle{
    text-align: center;
    margin-bottom: 50px;
    font-size: 30px;
}
.goalsTitleNewResult{
    font-weight: 700;
    font-size: 19px;
    color: black;
}
.lifestyleNewChallenges{
    display:flex;
}

.lifestylePchallenges{
    width: 50%;
    font-size: 20px;
    color: black;
    font-weight: 600;
}
.newHeader3{
    width: 100%;
    background-image: url("../assets/images/Banner_Holistic_SkinCare_2.webp"); /* The image used */
    height: 90vh; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    display: flex;
    
  
}
.newHeader2{
    width: 100%;
    background-image: url("../assets/images/Banner_Holistic_SkinCare.webp"); /* The image used */
    height: 90vh; /* You must set a specified height */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    display: flex;
    
  
}
.blockNewHeader2{
    width: 50%;
    margin: 0px 0;
    text-align: center;

}
.blockNewHeader3MobileB, .blockNewHeader2MobileB{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.blockNewHeader2 h2{
    font-size: 3em;
    color: white;
    font-weight: 400;
    width: 318px;
    font-family: DmsRegular;
}
.blockNewHeader2 h3{
    font-size: 2em;
    color: white;
    font-family: DmsRegular;
    width: 318px;
}
.blockNewHeader2 p{
    font-size: 1.3em;
    color: white;
    width: 318px;
    font-family: DmsRegular;
}
.bannerButtonLandingNew{
    background: white;
    color: black;
    padding: 20px;
    width: 225px;
    font-size: 19px;
    margin-top: 20px;
    text-align: center;
    cursor:pointer;
    transition:0.5s;
}

.bannerButtonLandingNew:hover {
    transform: scale(1.1);
}

.titleBeautyNewLanding{
    text-align: center;
    font-weight: 600;
    color: black;
    font-size: 30px;
    margin-bottom: 50px;
    margin-top: 90px;
}
.containerBeautyLandingBackground{
    background-color:#B1B2A4;
    padding: 5em 0;

}
.containerBeautyLandingWhithAge{
    max-width: 1000px;
    line-height: 30px;
    margin: 0 auto 100px;
    text-align: justify;
    text-align: center;
    font-size: 18px;
}
.containerBeautyLandingWhithAge h2{
    font-family: DmsRegular;
}

.containerBeautyLanding{
    max-width: 1000px;
    line-height: 30px;
    margin: 0 auto;
    text-align: justify;
    font-size: 18px;
}
.containerBeautyLanding h2{
    text-align: center;
    font-weight: 400;
    color: white;
    font-size: 30px;
    font-family: DmsRegular;
}
.containerBeautyLanding p{
    text-align: center;
    font-weight: 400;
    color: white;
    font-size: 1em;
}




























@media (max-width: 1126px) {
    .setNow {
        flex-direction: column;
        position: static;
    }
    .setNow2 {
        margin: 10px auto 20px;
    }
    .setNow2 h3{
        text-align: center;
    }
    .setNow4 {
        width: 80%;
        font-size: 15px;
        text-align: center;
        margin-left: 0;
        margin-top: 15px;
    }
}


@media (max-width: 1100px) {
    .titleName {
        font-size: 30px;
    }
    .containerBeautyLanding{
        width: 85%;
    }
}

@media (max-width: 995px) {

    .menuTabs,.bookMenu {   
        display: none;
    }
    .ïconMenuMobile{
        display:block;
        transform: scale(1.5);
        display: block;
    }
   
    .barResult {
        flex-wrap: wrap;
    }
    .containerLifestyle2 {
        flex-direction: column;
    }
    .infoBanner {
        max-width: 450px;
    }
    .containerCleanser {
        flex-direction: column;
    }
    .lessLenght {
        max-width: 1100px;
        margin: 50px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .foot{
        flex-direction: column;
        align-items: center;
    }
    .ls1 {
        width: 90%;
        margin: 0 auto;
    }
    .ls2 {
        width: 90%;
        margin: 0 auto;
    }
    .e1 {
        width: 90%;
        margin: 0 auto;
    }
    .containerCleanser2 {
        width: 100%;
        margin: 10px auto;
    }
    .containerCleanser {
        margin-top: 10px;
    }
    .e2 {
        width: 100%;
    }
    .containerCleanser3 {
        width: 90%;
        margin: 10px auto;
    }
    .mySwiper2 {
        width: 90%;
        margin: 0 auto;
    }
    .box-ba {
        width: 44%;
    }
    .footDiv {
        width: 88%;
        margin: 0 50px 40px;
    }
    .blk1 {
        width: 70%;
    }
    .containerCleanser4 {
      
        display: none;
    }
  

}
@media (max-width: 940px) {

    .blockNewHeader2 {
        margin-left: 60px;
    }
    

  }
@media (max-width: 920px) {
    .firstBox {
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .h4Goals{
        width: 100%;
        margin: 0px 0 20px;
        text-align: center;
    }
    .goalsBox {
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .goalsBox div:nth-child(1) {
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }
    .goalsBox div:nth-child(2) {
        width: 14%;
    }
    .titleGoalsBox{
        display:none!important;
    }
    .containerMapAndEnvi {
      
        flex-direction: column;
    }
    .e2b {
        width: 100%;
        margin-top: 25px;
    }
    .goalsBox div:nth-child(3) {
        text-align: center;
    }
}

@media (max-width: 750px) {
.newHeader {

    height: 750px;
}
}


@media (max-width: 860px) {
    .barResultLandMobile{
        padding: 15px 35px 10px;
    }
    .botGLand{
        margin: 0 auto;
        margin-top: -70px;
        width: 70%!important;
    }
    .titleName {
        font-size: 23px;
    }
    .iconNewBanner {
        width: 60px;
        margin-bottom: 10px;
    }
   

.infoBannerg{
    margin-bottom: 40px;
    }
}

@media (max-width: 726px) {
    .bannerNewFlex div {
        width: 29%;
    }

}

  @media (max-width: 700px) {
    .infoBanner {
        max-width: 80%;
        margin: 30px auto 0;
    }
    .titlandNew2{
        font-size: 28px;
        line-height: 33px;
    }
    .bookMenu2{
       display: none;
    }
    .widthSetNow{
        width: 85%;
    }
    .textLandd {
  
    width: 80%;
    }
    .mobileLandReg{
    font-size: 13px;
    margin-top: 15px;
    }
    .footerLand {
       
        flex-direction: column;
        align-content: center;
        align-items: center;
    }
    .bLandFinal{
        width: 60% !important;
    }
    .nourish{
        width: 80%;
    }
    .leftMarginLand {
        margin-left: 0;
        margin-top: 40px;
        text-align: center;
    }
    .contLand {
        width: 80%;
        margin: 40px auto;
    }
    .anchoTable {
        width: 35%;
    }
    .fontSmall {
        font-size: 11px;
    }
    .parrLan {
      
            width: 90%;
        margin: 0 auto;
    }
    .fontTitleLand{
        font-size: 17px!important;
    }
 .bannerLandMobile{
    display: block;
    width: 100%;
 }
 .boxSystem {
    width: 80%;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 50px;
}
 .containerLand {
       flex-direction: column;
}
    .mapaMobile1{
        display:block;  
      }
      .mapaDesktop1{
        display:none;  
      }
    .ingredientDesktop {
        width: 38%;
    }
   
    .newHeader {
        justify-content: flex-end;
        flex-direction: column-reverse;
        height: auto;
    }
    .blk1 {
        width: 100%;
    }
    .blk2 {
        width: 100%;
        height: 230px;
    }
    .headerMobile{
        background-position-x: center;
    }
    .logoMobile{
        display: block;
        width: 176px;
        margin-top: 15px;
        margin-bottom: 15px;
      }
    .mainContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 837px;
    }
    .sideB, .imgBack {
        display:none;
    }
    .logo{
        display:none;
    }
    .mobileBg{
        background:#fff;
        padding: 25px;
        box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.62);
        -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.62);
        -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.62);
    }
    .flex-box-form{
        width: 220px;  
    }
    #q0 input {
        width: 197px;
    }
    .questionBox {
        display: none;
        width: 83%;
    }
    .sideA{
        background-image: url('../assets/images/mobile/img1.webp');
        background-repeat: no-repeat;
        background-position-y: bottom;  
        background-size: cover;
        width: 100%;
        height: 80vh;
    }
    .questionBox h3 {
        font-size: 17px;
    }
    .helloQ0 {
        margin-top: 30px;
    }
    .containerZip {
        flex-direction: column;
        margin-bottom: 30px;
    }
    .containerZip div:nth-child(2) h5{
        padding-top:20px;
    }
    .thanksCity{
        margin-bottom: 30px;
        font-size: 13px;
    }
    .sConcerns{
        display:none;
        align-items: flex-end;

    }
    .sConcerns  h3{
     
        font-size: 13px!important;
        margin-bottom: 0!important;
    }
    .sConcerns div {
        width: 27px;
        position: relative;
        top: 2px;
        margin-right: 5px;
    }
    .imgSideB {
        width: 65px;
        margin-bottom: 3px;
    }
     
    #myProgress{
        display: block;
        width: 100%;
        height: 10px;
    }
    .progressMobile{
        margin-left: 25px;
        margin-top: 25px;
        width: 40%;
        margin-right: 10px;
    }
    #ingredients {
        overflow: none;
        width: 60%;
        height: 100%;
    }
    .infoQuiz, .facts-icon{
        display:none!important;
    }
    #ingredientDesktop{
    display: flex;
    justify-content: space-between;
    height: 100%;
    }
    .selectTag{
        margin-bottom: 15px;
    }
    .answers button {
        padding: 9px;
        font-size: 12px;
    }
    .splitDiv{
        flex-direction: column;  
    }
    .boxSplit {
        width: 100%;
    }

    .backkk {
        padding: 10px 20px;
        font-size: 13px;
    }
    .botNextt{
        margin-left: 3px;
        padding: 10px 16px;
        font-size: 13px;
    }
    #ingredients h4{
        font-size: 11px;
    }
    .imgIngredient {
        width: 27px;
        top: 7px;
    }
    #q1_26 textarea {
      
        width: 241px;
    }
    #q1_24 textarea {
  
        width: 232px;
    }
    .questionBox h3 {
  
        margin-bottom: 15px;
    }
    #enterName {
        margin: 30px 0 0;
    }

#q1_28 input, #q0 input  {

    height: 20px;
}
.imgBack {

    width: 115px;
    right: 30px;
}
.sideB{
    height: 25vh;
    width: 100%;
}
.cleanserInside {
    align-items: center;
    flex-direction: column;
}
.foot2{
    display: flex;
    justify-content: space-between;
    max-width: 1100px;
    margin: 30px auto 0px;
    font-size: 13px;
    padding-bottom: 16px;
    flex-direction: column;
    align-items: center;
}
.btnGreen {

    width: 86%;
}
.btnBorder {
    width: 85%;
}
.reviewss{
    display:none;
}
.ml {
    text-align: left;
}
.containerCleanser4 {
    width: 30%;
    display: none;
}
.containerIngredients {
    margin-top: 75px;
    width: 89%;
    margin: 75px auto;
}
.boxReview {
   
    flex-direction: column;
}
.reviewMobileWrite{
    width: 100%;
}
.reviewMobileWrite a{
    width: 60%;
    margin: 0 auto;
}
.inicioText{
    display:none;
}
.inicioTextResponsive{
    display:block;
    font-size: 12px;
    line-height: 14px;
    margin-top: 18px;
}
.newBannerLanding {
    background-image:none;
}
.containerLand {
    justify-content: center;
}

#q0_1{
    margin:0;
}
.blockNewHeader2MobileA{
width:20%;
margin: 0;
}
.blockNewHeader2MobileB{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto auto 2em;
    justify-content: flex-start;
    }
    .blockNewHeader3MobileB{
        justify-content: center;
        margin: 3em 1em auto;
      }
      .blockNewHeader3MobileB{ h2{
        font-size: 2em;
      }
    
}
  

@media (max-width: 600px) {
    .facet_sidebar {
        display: none;
      }
    .concernGoalsImg {
        width: 105px;
        display: block;
        margin: 0 auto;
    }
    .firstBox {
        flex-direction: column;
    }
    .imgGoalsOne {
        width: 100%;
    }
    .goalsBox {
        
        flex-direction: column;
    }
    .goalsBox div:nth-child(2) {
        width: 100%;
   
    }
    .goalsBox div:nth-child(2) img {
        margin: 0 auto 25px;
        display: block;
   
    }
    .boxLife {
       
        width: 50%;
    }
    .containerBeautyLanding h2 {
        font-size: 24px;
        line-height: 33px;
    }
    .blockNewHeader2MobileB h2 {
        font-size: 23px;
        width: 197px;
        color: black;
    }
    .blockNewHeader2MobileB h3 {
        font-size: 1.2em;
color:black;
        width: 200px;
    }
    .bannerButtonLandingNew {
        background: #7a7b55;
        color: #fff;
        padding: 9px;
        width: 153px;
        font-size: 14px;
        margin-top: 10px;
        text-align: center;
        cursor: pointer;
        transition: 0.5s;
    }
    .mobileTopBut{
        margin-top: 0px!important;
    }
    .marginLeftBut{
        margin-left: -25px;
    }
   
}

@media (max-width: 560px) {
    .bannerNewFlex div {
        width: 30%;
    }
    .setNow {
        flex-direction: column;
        position: static;
    }
    .setNow2 {
        margin: 10px auto 20px;
    }
    .setNow2 h3 {
        text-align: center;
    }
    .setNow3 h4 {
        color: black;
        margin-top: 10px;
        margin: 20px auto 0;
    }
    .setNow4{
        width: 80%;
    font-size: 15px;
    text-align: center;
    margin-left: 0;
    margin-top: 15px;
    }
    .painpoints{
        flex-direction: column-reverse;
    }
    .painpointsText {
        width: 100%;
    }
    .mySwiper2 {
        width: 90%;
    }
    .flechaRight{
        margin-right: 0px!important;
    }
    .painpointsImg {
        width: 100%;
    }
    .painpointsImg img {
        width: 80%;
        margin: 0 auto 36px;
    }
    .painpointsText h2 {
        font-size: 27px;
    }
    .ingredientLife img {
        width: 38px;
        margin-right: 5px;
        display: block;
    }
    .box-ba {
        width: 70%;
    }
    .barResultLanding div {
    text-align: center;
    margin: 0;
    width: 26%;
    }
    .blockNewHeader2MobileB p {
        color: black;
        font-size: .9em;
        width: 200px;
    }
  
  }

  @media (max-width: 500px) {
    .titleLandH2 {
        font-size: 25px;
    }
    .btngreenland{
        width: 70%;
    }
    .logoLand{
       margin-right: 0px; 
    }
    header{
        height: 630px;
    }
    .navLand{
       justify-content: center; 
    }
   
    .infoBannergLand {
    margin-top: 16px;
    }
    .mobileTitle{
        font-size: 28px;
    }
    .mobileLand{
        font-size:20px;
    }
    .bannerTextLanding {
    margin-top: 15px;
    margin-bottom: 24px;
    }
    .barResult div {
       
        margin: 5px 0px 0;
        width: 48%;
        padding: 7px 0;
    }
    .boxLife {
       

        margin-bottom: 20px;
    }
    .inicioText{
       font-size: 11px;
        line-height: 13px;
        margin-top: 18px;
    }
    .flex-box-form {
        width: 100%;
    }
    
    .sideA{
        padding-top: 10px;
    }
    #emailciton {
        width: 290px;
    }
  }
  @media (max-width: 560px) {
    .bannerNewFlex div {
        width: 45%;
    }
    .newHeader3 {
        align-items: flex-end;
        background-image: url("../assets/images/banner_2.webp");
    }
    .newHeader2{
        width: 100%;
        background-image: url("../assets/images/banner_1.webp"); /* The image used */
        background-position: left;
  }

  .marginLeftBut{
    margin: 0 auto;
  }
  }