/** Shopify CDN: Minification failed

Line 17:2 "font-height" is not a known CSS property
Line 348:2 Expected "}" to go with "{"

**/
#shopify-section-breadcrumbs{
    display:none;
}

.announcement-bar{
  background : #77BCA9 !important;
}

h1{
  font-size: 30px;
  font-height: 30px;
  margin : 0;
}

h2{
  font-family: "omnes-pro", sans-serif;
  font-weight: 500 !important;
  font-style: normal;
  text-transform: uppercase;
  font-size: 38px !important;
  line-height: 38px !important;
}

.number{
    font-family: omnes-pro;
    font-weight: 600;
    font-size: 106px;
    color: #fff;
  }

.strong-title{
    font-weight: 700;
}

p{
  font-size : 18px;
  line-height: 22px;
}


/* MOBILE */
@media screen and (max-width:640px)
{
/* TOP */

  h1 a{
      background-image:url("/cdn/shop/files/LOGO_NOS-9-ENGAGEMENTS_v2.png?v=1703072016");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100%;
      display: block;
      font-size: 0;
      height: 98px;
      left: 50%;
  }

  .main-top {
    background: #77BCA9;
    background-image: url("/cdn/shop/files/FOND_TEXTURE_PROTEGER_LA_PEAU.png?v=1701427383");
    background-size: contain;
    background-position: bottom;
    background-repeat: cover;
    overflow: visible;
  }
  
  .main-top .rectangle {
    width: 60vw;
    height: 120px;
    margin: 0px auto;
    text-align: left;
    padding: 15px 0;
  }
  
  #quote-left{
    width: 25vw;
    margin-left: -7vw;
    margin-top: 25vw;
    float: left;
    position: relative;
    z-index: 1;
    overflow: visible;
  }

  #box-right{
    overflow : hidden;
    margin-top: 30vw;
    height: 18vw;
    width: 100%;
  }
  
  #quote-right{
    width: 18vw;
    float: right;
    margin-right: -4vw;
    position: relative;
    transform: rotate(180deg);
  }
  
  .main-top img{
    width : 100%
  }
    
  .main-top #main-bottom {
    padding: 0 0px 0 10px;
  }

  .rectangle div p{
    color: white;
    text-align: left;
    font-family: "omnes-pro", sans-serif;
    font-weight: 500;
    font-style: normal;
    /*padding: 15px;*/
    margin-top: 0;
  }

/* PROTEGER LA PEAU */  
  #container {
    height: 130vh;
  }
  #container #top-img {
    height: 80vh;
    background-image: url("/cdn/shop/files/VISUEL_PROTEGER_LA_PEAU.png?v=1701428248");
    background-size: cover;
    background-position: bottom;
  }
  #container #background {
    background-color : #B4D5CC;
    height : 50vh;
  }
  
  #container #main-bottom {
    margin: calc(-60vh) auto;
    justify-content: center;
    width: 90%;
    height: 55vh;
    background: #77BCA9;
    background-image: url("/cdn/shop/files/FOND_TEXTURE_PROTEGER_LA_PEAU.png?v=1701427383");
    flex-direction: column;
    display: flex;
    color: white;
    text-align: left;
    padding: 20px;
    font-size: 18px;
    line-height: 23px;
  }

  #container #main-bottom p{
  }
  
  #container #main-bottom .number{
    margin-top: -15vh;
    position: absolute;
  }

  #container #main-bottom h2{
    text-align: left;
    margin-left: 25%;
    margin-top: 5vh;
    color : white;
    margin-bottom: 0;
  }
  
/* CHARTE */ 
#charte{
  height : 100%;
  background-color : #B4D5CC;
  padding: 20px;
  color: white;
}

#charte .number{
    margin-top: -17vh;
    position: absolute;
  } 
  
#charte h2{
    color : white;
    margin-bottom: 0;
  }
  
/* PROS DE SANTE */ 
#pro-sante{
  height : 100%;
  background-color : #B4D5CC;
  padding: 20px;
  color: white;
  text-align : right;
}

#pro-sante .number{
    margin-top: -16vh;
    position: absolute;
    right : 30px;
  } 

#pro-sante h2{
    color : white;
    margin-bottom: 0;
    text-align : right;
  }

#pro-sante p{
  margin-bottom : 0;
}
    
/* FORMULE */ 
#formule{
  height : 100%;
  background-color : #B4D5CC;
  padding: 0px 20px 20px 20px;
  color: white;
}

#formule .number{

  } 
  
#formule h2{
    margin-top : -30px;
    color : white;
    margin-bottom: 0;
  }
  
.green-bg{
  height : 100%;
  margin-top: -5px;
  background-color : #B4D5CC;
  text-align : center;
}

.green-bg img{
  width: 100%;
}


/* ACCOMPAGNER */ 
#accompagner{
  height : 100%;
  background-color : #B4D5CC;
  padding: 20px;
  color: white;
  text-align : right;
}

#accompagner .number{
    margin-top: -16vh;
    position: absolute;
    right : 30px;
  } 

#accompagner h2{
    color : white;
    margin-bottom: 0;
    text-align : right;
  }


/* FABRIQUE EN FRANCE */  
#made-in-france{
  height : 100%;
  background-color : #B4D5CC;
  padding: 20px;
  color: white;
  background-image: url("/cdn/shop/files/FOND_TEXTURE_FABRIQUER_EN_FRANCE.png?v=1701434554");
}

#made-in-france .number{
    margin-top: -17vh;
    position: absolute;
  } 
  
#made-in-france h2{
    color : white;
    margin-bottom: 0;
  }

/* PRATIQUE */ 
#pratique{
  height : 100%;
  background-color : #B4D5CC;
  padding: 20px;
  color: white;
  text-align : right;
  margin-top : -1px;
}

#pratique .number{
    margin-top: -16vh;
    position: absolute;
    right : 30px;
  } 

#pratique h2{
    color : white;
    margin-bottom: 0;
    text-align : right;
  }
  
/* REPONSABLE */ 
#responsable{
  height : 100%;
  background-color : #B4D5CC;
  padding: 20px;
  color: white;
  margin-top : -1px;
}

#responsable .number{
    margin-top: -16vh;
    position : absolute;
  } 
  
#responsable h2{
    color : white;
    margin-bottom: 0;
  }


/* SOUTENIR */ 
#soutenir{
  height : 100%;
  background-color : #B4D5CC;
  padding: 20px;
  color: white;
  text-align : right;
  margin-top : -1px;
}

#soutenir .number{
    margin-top: -16vh;
    position: absolute;
    right : 30px;
  } 

#soutenir h2{
    color : white;
    margin-bottom: 0;
    text-align : right;
  }