
body, html{
    overflow-x:hidden;
    margin:0;
    padding:0;
}
#wrapper{
    max-width:100%;
}
.breadcrumb{
    display:none;
}
#main:not(.main-homepage) {
    padding-top: 0px;
}
.MyContent {
    display: block;
    position: relative;
    margin: 0 auto;
    /*max-width:1250px;*/
    font-family: "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, sans-serif;
    font-size:14px;
   line-height:1.4em;
   background-color: #f3f1f0;
 
}
@media (max-width:1023px) and  (min-width:762px){
    .MyContent .MainWrapper {
        transform:scale(0.75);
        width:1024px;
        transform-origin: top left;
        overflow:hidden;
        margin:0 auto;
    }

}
.MyContent .isMobile{
    display:none;
}
@media (max-width:761px){
    .MyContent .isMobile{
        display:block;
    }
    .MyContent .isDesktop{
        display:none;
    }
}

.MyContent * {
    margin: 0;
    box-sizing: border-box;
}
.MyContent img {
     max-width:100%;
     display:block;
}
.MyContent .QuickShopLinkContainer{
    display: none!important;
}

.MyContent .MainTitle {
    font-family: 'ClarinsRegular', 'Clarins';
    font-size:44px;
    line-height: 1em;
    font-weight: normal;
    margin:20px auto;
}

.MyContent .Title {
    font-family: 'ClarinsRegular', 'Clarins';
    font-size:35px;
    line-height: 1em;
    font-weight: normal;
    margin:0px auto;
    padding:20px;
}
.MyContent .Text{
    margin:0;
}

.MyContent .WhiteBtnLink a,
.MyContent .WhiteBtnLink span {
    background-color: #fff;
    display: inline-block;
    color: #000;
    padding: 14px 30px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 11px;
    line-height: 14px;
    font-family: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
    cursor:pointer;
    border:2px solid #e5e5e5;
    min-width:176px;
    box-sizing: border-box;
    text-align: center; font-weight:bold;
}
.MyContent .BtnLink a,
.MyContent .BtnLink span {
    background-color: #000;
    display: inline-block;
    color: #fff;
    padding: 11px 11px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 11px;
    line-height: 18px;
    font-family: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
    cursor:pointer;
    min-width:140px;
    text-align: center;
}
.MyContent .HollowLink a,
.MyContent .HollowLink span {
    background-color: transparent;
    display: inline-block;
    color: #000;
    padding: 14px 30px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 11px;
    line-height: 18px;
    font-family: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
    cursor:pointer;
    border: 2px solid #fff;
    min-width:155px;
    text-align: center;
}
.MyContent .QuickShopLink a,
.MyContent .QuickShopLink span {
    background-color: #000;
    display: inline-block;
    color: #fff;
    padding: 16px 30px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 11px;
    line-height: 18px;
    font-family: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
    cursor:pointer;
}
.MyContent .slick-dots  button{
   min-width:unset;
   border:0px!important;
   outline:0!important;
   padding:0!important;
   height:auto!important;
   font-size:0px;
}
/*---------------------------------------------------------------------------*/
.MyContent #GLOBAL-BODY-HEADER{
    position:relative;
}

.MyContent #GLOBAL-BODY-HEADER .Box {

   padding:30px;
   background-color: #fff;
    width:100%;
    max-width:525px;
}
.MyContent #GLOBAL-BODY-HEADER .Box .MainTitle{
   color:#be0f34;
   margin-top:0;
}
.MyContent #GLOBAL-BODY-HEADER .Box .Text{
  font-size:16px;
  line-height: 1.4em;
  padding-bottom:20px;
 }
 .MyContent #GLOBAL-BODY-HEADER .Box .BoldText{
    font-size:16px;
    line-height: 1.4em;
    font-family: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
    padding-bottom:10px;
   }
   .MyContent #GLOBAL-BODY-HEADER .Photo {
    position:relative;
    max-width: 100%;
    z-index:1;
}
@media (min-width:762px){
    .MyContent #GLOBAL-BODY-HEADER .Box {
        position:absolute;
       z-index:2;
        right:calc(50% - 60px);
        top:50%;
        transform: translateY(-50%);
    }
    .MyContent #GLOBAL-BODY-HEADER .Photo img{
        max-width: 1600px;
        width:1600px;
        margin:0;
        margin-left:calc(50% - 800px);
        margin-right:calc(50% - 800px);
    }
}

@media (max-width:761px){
    .MyContent #GLOBAL-BODY-HEADER .Box {
     text-align: center;
     padding-bottom:70px;
    }
    .MyContent #GLOBAL-BODY-HEADER .Box .MainTitle {
       font-size:35px;
     }
}
/*---------------------------------------------------------------------------*/
.MyContent #GLOBAL-BODY-NAV{
    position: relative;
    background-color: #fff;
    margin:0 auto;
}
.MyContent #GLOBAL-BODY-NAV::before{
    content:" ";
    background-color: #f2f2f1;
    width:100%;
    height:8px;
    top:0;
    left:0;
    position: absolute;
   
}
.MyContent #GLOBAL-BODY-NAV .TitleNav{
   color:#fff;
   font-size: 14px;
   font-family: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
   text-transform: uppercase;
   z-index:1;
   width:180px;
   height:200px;
   display:flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   flex-direction: column;
   position:absolute;
   left:calc(50% - 90px);
   top:calc(50% - 100px);
   z-index: 5;
}



.MyContent #GLOBAL-BODY-NAV .TitleNav::before{
    content:" ";
    position:absolute;
    background-color:#be0f34;
    transform:scaleY(1.2) rotate(45deg);
    width:120px;
    height:120px;
    z-index:-1;
    top:calc(50% - 60px);
    left:calc(50% - 60px);
}
.MyContent #GLOBAL-BODY-NAV ul{
    position: relative;
    height:63px;
    display:flex;
    justify-content: center;
    list-style: none;
    padding:0;
    margin:0;
    width:100%;
}
.MyContent #GLOBAL-BODY-NAV ul li{
    display:block;
    flex-basis:25%;
    max-width:220px;
    text-align: center;
    position: relative;
}

.MyContent #GLOBAL-BODY-NAV li[data-num="1"]{
    border-left:1px solid #d4d4d4;
}
.MyContent #GLOBAL-BODY-NAV li[data-num="2"]{
    border-left:1px solid #d4d4d4;
}
.MyContent #GLOBAL-BODY-NAV li[data-num="3"]{
    border-right:1px solid #d4d4d4;
}
.MyContent #GLOBAL-BODY-NAV li[data-num="4"]{
    border-right:1px solid #d4d4d4;
}

.MyContent #GLOBAL-BODY-NAV ul li::before{
    content: " ";
    width:100%;
    height:8px;
    display:block;
    position:absolute;
    z-index:1;
    transition: height ease-in-out 0.5s;

}

@media (min-width:1025px){
.MyContent #GLOBAL-BODY-NAV ul li:hover::before{
    height:100%;
  }
}
.MyContent #GLOBAL-BODY-NAV ul li[data-num="1"]::before{
    background: linear-gradient(to right,#f7ab96,#f5e3bd);
}
.MyContent #GLOBAL-BODY-NAV ul li[data-num="2"]::before{
    background: linear-gradient(to right,#6ebc82,#c8d770);
}
.MyContent #GLOBAL-BODY-NAV ul li[data-num="3"]::before{
    background: linear-gradient(to right,#4284bb,#c0d5db);
}
.MyContent #GLOBAL-BODY-NAV ul li[data-num="4"]::before{
    background: linear-gradient(to right,#f17326,#fed255);
}
.MyContent #GLOBAL-BODY-NAV ul li a{
    display:flex;
    margin-top:8px;
    height:55px;
    width:100%;
    position: relative;
    z-index:2;
    text-align: center;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 18px;
    font-family: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
    /*transform: scale(1);
    transition: transform ease-in-out 0.5s;*/
}

@media (min-width:1025px){
    .MyContent #GLOBAL-BODY-NAV ul li:hover a{
        color:#fff!important;
      }
    }
.MyContent #GLOBAL-BODY-NAV li[data-num="2"]{
    margin-right:60px;
}
.MyContent #GLOBAL-BODY-NAV li[data-num="3"]{
    margin-left:60px;
}



/*--01-----*/
.MyContent #GLOBAL-BODY-NAV li[data-num="1"] a{
    color: #eb947d;
}

/*--02-----*/
.MyContent #GLOBAL-BODY-NAV li[data-num="2"] a{
    color: #0d882a;
}

/*--03-----*/
.MyContent #GLOBAL-BODY-NAV li[data-num="3"] a{
    color: #4385bb;
}
/*--04-----*/
.MyContent #GLOBAL-BODY-NAV li[data-num="4"] a{
    color: #f17930;
}

@media (max-width:761px){
    .MyContent #GLOBAL-BODY-NAV{
        height:auto;
       
      }
    .MyContent #GLOBAL-BODY-NAV .TitleNav{
        transform: scale(0.66);
        z-index:2;
        top: calc(50% - 155px);
    }
    .MyContent #GLOBAL-BODY-NAV ul{
      flex-wrap: wrap;
      height:auto;
      position: relative;
      z-index:1;
    }
    .MyContent #GLOBAL-BODY-NAV ul li{
      margin:0!important;
        flex-basis:50%;
        max-width:220px;
    
    }
    .MyContent #GLOBAL-BODY-NAV ul li::before{
        height:100%;
        z-index:1;
        position: absolute;
    }
    .MyContent #GLOBAL-BODY-NAV ul li a{
        position: relative;
        z-index:2;
        color:#fff!important;
        font-size: 16px;
    }
    
}
/*---------------------------------------------------------------------------*/
.MyContent .MyBlockContent  {
  display:flex;
  position: relative;
  flex-wrap: wrap;
}
.MyContent .MyBlockContent .Num {
    font-size: 190px;
    margin-bottom:-0.35em;
    margin-top:-0.75em;
    line-height: 1em;
    opacity:0.45;
    z-index:1;
}
.MyContent .MyBlockContent .Box  {
    padding:40px;
}
.MyContent .MyBlockContent .Box .Content {
   
}
.MyContent .MyBlockContent .Mentions{
    font-size:11px;
    padding-top:10px;
    margin-bottom:-20px;
}
.MyContent .MyBlockContent .Box .Title  {
    font-family: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-size:40px;
    font-weight: bold;
    padding:20px 0;
    z-index:2;
    position: relative;
}
.MyContent .MyBlockContent .Book  {
    margin-top:15px;
    display:flex;
    align-items:flex-start; 
    justify-content: flex-end;
    text-align: left;
    flex-direction: column;
    height:100px;
    position: relative;
    padding-left: 90px;
}
.MyContent .MyBlockContent .Book  .Visual{
   width:75px;
   position: absolute;
   bottom:0;
   left:0;
}
.MyContent .MyBlockContent .Book  img{
   max-width:100%;
}
.MyContent .MyBlockContent .BookTitle {
    font-family: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, sans-serif;  
}
.MyContent .MyBlockContent .BookDescription {
   padding-bottom:10px;
}
@media (min-width:762px){
    .MyContent .MyBlockContent .Ingredient{
        position: absolute;
    } 
}


.MyContent .MyBlockContent .IngredientName{
    position: absolute;
    color:#8d8c8c;
    font-size:11px;
    text-align: left;
    line-height:12px;
}
.MyContent .MyBlockContent .Ingredient[data-ingredient="marronnier"]{
    right:calc(50% + 437px);
    top:55px;
    width:275px;
}
.MyContent .MyBlockContent .Ingredient[data-ingredient="marronnier"] .IngredientName{
    top: 92%;
    left: 50%;
    width: 100px;
}
.MyContent .MyBlockContent .Ingredient[data-ingredient="cognassier"]{
    left:calc(50% + 462px);
    top:0;
    width:259px;
}
.MyContent .MyBlockContent .Ingredient[data-ingredient="cognassier"] .IngredientName{
    top: 92%;
    left: 50%;
    width: 100px;
}
.MyContent .MyBlockContent .Ingredient[data-ingredient="menthe"]{
    left:calc(50% + 374px);
    top:237px;
    width:259px;
}
.MyContent .MyBlockContent .Ingredient[data-ingredient="menthe"] .IngredientName{
    top: 88%;
    right: 90%;
    width: 100px;
    text-align: right;
}
.MyContent .MyBlockContent .Ingredient[data-ingredient="karite"]{
    right:calc(50% + 30px);
    top:108px;
    width:235px;
}
.MyContent .MyBlockContent .Ingredient[data-ingredient="karite"] .IngredientName{
    top: 100%;
    left: 60%;
    width: 100px;
    color:#fff;
}
.MyContent .MyBlockContent .Ingredient[data-ingredient="camomille"]{
    right:calc(50% + 90px);
    top:-348px;
    width:306px;
}
.MyContent .MyBlockContent .Ingredient[data-ingredient="camomille"] .IngredientName{
    top: 37%;
    right: 95%;
    width: 100px;
    text-align: right;

} 
.MyContent  .Product{
    text-align: center;
    display: inline-block;
}


.MyContent .Product .BtnLink{
    margin-top:10px;
}
.MyContent  .Product .Packshot{
    margin:0 auto;
}
.MyContent  .Product .ProductName{
    margin-top:10px;
    white-space: nowrap;
}

.MyContent  .Product .ProductName strong{
    display:block;
}
.MyContent  .Product[data-product="gommage-exfoliant"] .Packshot{
    max-width:137px;
}
.MyContent  .Product[data-product="masvelt"] .Packshot{
    max-width:190px;
}
.MyContent  .Product[data-product="body-fit"] .Packshot{
    max-width:102px;
}
.MyContent  .Product[data-product="huile-tonic"] .Packshot{
    max-width:123px;
}
.MyContent  .Product[data-product="creme-mains"] .Packshot{
    max-width:114px;
}
.MyContent  .Product[data-product="creme-pieds"] .Packshot{
    max-width:110px;
}
.MyContent  .Product[data-product="huile-relax"] .Packshot{
    max-width:120px;
}
.MyContent  .Product[data-product="baume"] .Packshot{
    max-width:146px;
}
@media (max-width:761px){
    .MyContent  .Product[data-product="gommage-exfoliant"] .Packshot{
        max-width:90px;
    }
    .MyContent  .Product[data-product="masvelt"] .Packshot{
        max-width:120px;
    }
    .MyContent  .Product[data-product="body-fit"] .Packshot{
        max-width:90px;
    }
    .MyContent  .Product[data-product="huile-tonic"] .Packshot{
        max-width:97px;
    }
    .MyContent  .Product[data-product="creme-mains"] .Packshot{
        max-width:90px;
    }
    .MyContent  .Product[data-product="creme-pieds"] .Packshot{
        max-width:90px;
    }
    .MyContent  .Product[data-product="huile-relax"] .Packshot{
        max-width:97px;
    }
    .MyContent  .Product[data-product="baume"] .Packshot{
        max-width:90px;
    }
  
}
@media (min-width:762px){
    .MyContent .MyBlockContent .Product{
        position: absolute;
    }

  
}




/*---------------------------------------------------------------------------*/


/*--01-----*/
.MyContent #GLOBAL-BODY-01-NUTRITION .Num {
    color: #eb947d;
}
.MyContent #GLOBAL-BODY-01-NUTRITION  .Box{
    background:linear-gradient(to right,#f5e2b8, #f8af9c);
}
.MyContent #GLOBAL-BODY-01-NUTRITION .Box strong{
    color: #eb947d;
}

/*--02-----*/
.MyContent #GLOBAL-BODY-02-SPORT .Num {
    color: #0d882a;
    text-align: right;
    margin-right: -30px;
}
.MyContent #GLOBAL-BODY-02-SPORT  .Box{
    background:linear-gradient(to right,#56b699, #c5d465);
    color:#fff;
}
.MyContent #GLOBAL-BODY-02-SPORT .Box strong{
    color: #0d882a;
}


/*--03-----*/
.MyContent #GLOBAL-BODY-03-RELAXATION .Num {
    color: #4385bb;
}
.MyContent #GLOBAL-BODY-03-RELAXATION  .Box{
    background:linear-gradient(to right,#c2d0d7, #5c88bd);
    color:#fff;
}
.MyContent #GLOBAL-BODY-03-RELAXATION .Box strong{
    color: #4385bb;
}
/*--04-----*/
.MyContent #GLOBAL-BODY-04-SOIN-TOUCHER .Num {
    color: #f17930;
}
.MyContent #GLOBAL-BODY-04-SOIN-TOUCHER  .Box{
    background:linear-gradient(to right,#fed255, #f17326);
    color:#fff;
}
.MyContent #GLOBAL-BODY-04-SOIN-TOUCHER .Box strong{
    color: #f17930;
}

@media (min-width:1250px){
    /*--------------------------------------------------------------*/
    .MyContent #GLOBAL-BODY-01-NUTRITION {
        height:685px;
    }
    .MyContent #GLOBAL-BODY-01-NUTRITION  .Box{
        position:absolute;
        right:calc(50% - 80px);
        top:120px;
        width:800px;
    }
    .MyContent #GLOBAL-BODY-01-NUTRITION  .Content{
       max-width:466px;  
       margin-right:0;
       margin-left:auto;
    }
    .MyContent #GLOBAL-BODY-01-NUTRITION .Book{
   
        margin-right:0;
        margin-left:auto;
        max-width: 466px;
     }
     
    .MyContent #GLOBAL-BODY-01-NUTRITION  .Product[data-product="masvelt"] {
        top:245px;
        left:calc(50% + 215px);
        transform: translateX(-50%);
      }
      .MyContent #GLOBAL-BODY-01-NUTRITION  .Product[data-product="body-fit"] {
          top:148px;
          left:calc(50% + 380px);
          transform: translateX(-50%);
      }
    /*--------------------------------------------------------------*/
    .MyContent #GLOBAL-BODY-02-SPORT {
        height:863px;
        background-color: #fff;
    }

    .MyContent #GLOBAL-BODY-02-SPORT .Box{
        position:absolute;
        left:calc(50% + 20px);
        top:145px;
        width:564px;
    }
    .MyContent #GLOBAL-BODY-02-SPORT .Box .Num{
    transform: translateX(150px);
    }
    .MyContent #GLOBAL-BODY-02-SPORT  .Content{
        max-width:335px;  
        margin-left:0;
        margin-right:auto;
     }
     
    .MyContent #GLOBAL-BODY-02-SPORT .Photo{
        position:absolute;
        right:calc(50% - 80px);
        top:-100px;
    }
    .MyContent #GLOBAL-BODY-02-SPORT  .Product[data-product="huile-tonic"] {
        bottom:258px;
        left:calc(50% + 40px);
        transform: translateX(-50%);
    }
    .MyContent #GLOBAL-BODY-02-SPORT .Product[data-product="body-fit"] {
        bottom:258px;
        right:calc(50% + 386px);
        transform: translateX(50%);
    }

    .MyContent #GLOBAL-BODY-02-SPORT  .Product[data-product="huile-tonic"] .Packshot{
        position:absolute;
        bottom:0;
        right:calc(50% + 88px);
        width:100%;
    }
    .MyContent #GLOBAL-BODY-02-SPORT .Product[data-product="body-fit"] .Packshot{
        position:absolute;
        bottom:0;
        left:calc(50% + 88px);
        width:100%;
    }
      /*--------------------------------------------------------------*/
      .MyContent #GLOBAL-BODY-03-RELAXATION{
        height:821px;
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Box{
        position:absolute;
        right:calc(50% + 60px);
        top:-65px;
        width:564px;
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Content{
        max-width:335px;  
        margin-left:0;
        margin-right:auto;
     }

    .MyContent #GLOBAL-BODY-03-RELAXATION .Photo{
        position:absolute;
        left:calc(50% + 20px);
        top:-150px;
        width:780px;
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION  .Product[data-product="creme-mains"] {
        bottom:156px;
        left:calc(50% + 36px);
        transform: translateX(-50%);
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Product[data-product="huile-relax"] {
        bottom:156px;
          left:calc(50% + 258px);
          transform: translateX(-50%);
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Product[data-product="baume"] {
        bottom:156px;
        left:calc(50% + 475px);
        transform: translateX(-50%);
    }
    /*--------------------------------------------------------------*/
    .MyContent #GLOBAL-BODY-04-SOIN-TOUCHER {
        height:384px;
    }
    .MyContent #GLOBAL-BODY-04-SOIN-TOUCHER .Photo{
        position:absolute;
        right:calc(50% - 82px);
        top:-90px;
        width:707px;
    }

    .MyContent #GLOBAL-BODY-04-SOIN-TOUCHER  .Box{
        position:absolute;
        left:calc(50% + 20px);
        top:0;
        width:564px;
    }
}

@media (max-width:1249px) and (min-width:762px) {
    /*--------------------------------------------------------------*/
    .MyContent #GLOBAL-BODY-01-NUTRITION {
        height:auto;
    }
    .MyContent #GLOBAL-BODY-01-NUTRITION  .Box{
        position:relative;
  
        margin-top:120px;
        margin-bottom:160px;
        width:50%;
        flex-basis:50%;
        left:0;
    }
    .MyContent #GLOBAL-BODY-01-NUTRITION  .Content{
       max-width:calc(100% - 205px);  
       margin-right:0;
       margin-left:auto;
    }
    .MyContent .MyBlockContent .Ingredient[data-ingredient="marronnier"]{
        left:10px;
        width: 235px;
    }
    .MyContent .MyBlockContent .Ingredient[data-ingredient="cognassier"]{
        right:0;
        left:auto;
        width: 235px;
    }
    .MyContent #GLOBAL-BODY-01-NUTRITION  .Product[data-product="masvelt"] {
        top:245px;
        left:calc(50% + 115px);
        transform: translateX(-50%);
      }
      .MyContent #GLOBAL-BODY-01-NUTRITION  .Product[data-product="body-fit"] {
          top:148px;
          left:calc(50% + 280px);
          transform: translateX(-50%);
      }
    /*--------------------------------------------------------------*/
    .MyContent #GLOBAL-BODY-02-SPORT {
        height:863px;
        background-color: #fff;
    }

    .MyContent #GLOBAL-BODY-02-SPORT .Box{
        position:absolute;
        left:calc(50% + 20px);
        top:145px;
        width:564px;
    }
    .MyContent #GLOBAL-BODY-02-SPORT  .Content{
        max-width:335px;  
        margin-left:0;
        margin-right:auto;
     }
     
    .MyContent #GLOBAL-BODY-02-SPORT .Photo{
        position:absolute;
        right:calc(50% - 80px);
        top:-100px;
    }
    .MyContent #GLOBAL-BODY-02-SPORT  .Product[data-product="huile-tonic"] {
        bottom:258px;
        left:calc(50% + 40px);
        transform: translateX(-50%);
    }
    .MyContent #GLOBAL-BODY-02-SPORT .Product[data-product="body-fit"] {
        bottom:258px;
        right:calc(50% + 386px);
        transform: translateX(50%);
    }

    .MyContent #GLOBAL-BODY-02-SPORT  .Product[data-product="huile-tonic"] .Packshot{
        position:absolute;
        bottom:0;
        right:calc(50% + 88px);
        width:100%;
    }
    .MyContent #GLOBAL-BODY-02-SPORT .Product[data-product="body-fit"] .Packshot{
        position:absolute;
        bottom:0;
        left:calc(50% + 88px);
        width:100%;
    }
      /*--------------------------------------------------------------*/
      .MyContent #GLOBAL-BODY-03-RELAXATION{
        height:auto;
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Box{
        position:relative;
        right:auto;
        margin-top:-65px;
        margin-bottom:360px;
        width:50%;
        z-index:1;
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Content{
        max-width:335px;  
        margin-left:0;
        margin-right:auto;
     }
       .MyContent #GLOBAL-BODY-03-RELAXATION .Wrapper{
        position: relative;
        
        z-index: 4;
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Photo{
        position: absolute;
        left: calc(50% + 80px);
        top: -150px;
        width: 580px;
        z-index: 2;
    }
    .MyContent .MyBlockContent .Ingredient[data-ingredient="karite"]{
        left:calc(50% - 120px);
        width: 235px;z-index:3;
        top: -50px;
    }   
     .MyContent .MyBlockContent .Ingredient[data-ingredient="karite"] .IngredientName{
        left:30%;

    }
    .MyContent #GLOBAL-BODY-03-RELAXATION  .Product[data-product="creme-mains"] {
        bottom:156px;
        left:calc(50% + 106px);
        transform: translateX(-50%);
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Product[data-product="huile-relax"] {
        bottom:156px;
          left:calc(50% + 256px);
          transform: translateX(-50%);
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Product[data-product="baume"] {
        bottom:156px;
        left:calc(50% + 406px);
        transform: translateX(-50%);
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Product .ProductName{
       white-space: normal;
    }
    
    /*--------------------------------------------------------------*/
    .MyContent #GLOBAL-BODY-04-SOIN-TOUCHER {
        height:384px;    justify-content: flex-end;
    }
    .MyContent #GLOBAL-BODY-04-SOIN-TOUCHER .Photo{
        position:absolute;
        right:calc(50% - 82px);
        top:-90px;
        width:707px;
    }
    .MyContent #GLOBAL-BODY-04-SOIN-TOUCHER  .Box{
        position:relative;
        left:auto;
        margin-top:0;
        margin-bottom:360px;
        width:50%;
        z-index:1;
    }
    
}

/*--------------------------------------------------------------*/
@media (max-width:1024px) and (min-width:762px) {
    .MyContent #GLOBAL-BODY-01-NUTRITION .Box {
        width: 60%;
        flex-basis: 60%;
    }
    .MyContent .MyBlockContent .Ingredient[data-ingredient="cognassier"]{
        display:none!important;
    }
    .MyContent #GLOBAL-BODY-01-NUTRITION .Product[data-product="masvelt"] {
        left: calc(50% + 235px);
    }
    .MyContent #GLOBAL-BODY-01-NUTRITION .Product[data-product="body-fit"] {
        left: calc(50% + 410px);
    }
}
/*--------------------------------------------------------------*/
@media (max-width:761px){
    .MyContent{
        background-color: #fff;
    }
    .MyContent #GLOBAL-BODY-HEADER{
        max-width:375px;
        margin:0 auto;
        background-color: #fff;
    }
    .MyContent #GLOBAL-BODY-NAV{
        max-width:375px;
        margin:0 auto;
        background-color: #fff;
    }
    .MyContent .MyBlockContent .Num{
        font-size:160px;
        line-height: 1em;
    }
    .MyContent .MyBlockContent .Box .Title{
        padding:10px 0;
        font-size: 36px;
    }
    /*--------------------------------------------------------------*/
    .MyContent #GLOBAL-BODY-01-NUTRITION {
        justify-content: center;
        padding-top:30px;
        padding-bottom:30px;
    }
    .MyContent .MyBlockContent .Ingredient[data-ingredient="marronnier"]{
        left:calc(50% + 30px);
        top:195px;
        position: absolute;
    }
    .MyContent .MyBlockContent .Ingredient[data-ingredient="marronnier"] .IngredientVisual {
        width:205px;
     }
    .MyContent .MyBlockContent .Ingredient[data-ingredient="cognassier"]{
        display:none;
    }

    .MyContent #GLOBAL-BODY-01-NUTRITION .Box {
        padding:20px;
        padding-top:128px;
        padding-bottom:170px;
        flex-basis:100%;
    }

    .MyContent #GLOBAL-BODY-01-NUTRITION .Box .Content{
        max-width:335px;
        margin:0 auto;
    }
    .MyContent #GLOBAL-BODY-01-NUTRITION .Box .Text::before{
        content:" ";
        float:right;
        display:block;
  
        width: 160px;
        height: 350px;
        shape-outside:polygon(
        100px 0,
        160px 0, 
        160px 350px,
        80px 350px,
        80px 330px,
        50px 310px,
        25px 290px,
        15px 270px,
        15px 250px,
        18px 230px,
        20px 210px,
        30px 188px,
        58px 110px,
        58px 90px,
        70px 70px,
        80px 50px,
        80px 30px
        );
    }
    .MyContent #GLOBAL-BODY-01-NUTRITION .Box .Content p{
       display:inline;
    }
    .MyContent #GLOBAL-BODY-01-NUTRITION  .Product[data-product="masvelt"] {
        margin-top:-90px;
    }
    .MyContent #GLOBAL-BODY-01-NUTRITION  .Product[data-product="body-fit"] {
        margin-top:-148px;
    }
    .MyContent .MyBlockContent .Book{
        width:100%;
    }
    .MyContent .MyBlockContent .Ingredient[data-ingredient="marronnier"] .IngredientName {
        top: 102%;
        left: 20%;
        color: #fff;
        width: 100px;
    }
    .MyContent #GLOBAL-BODY-02-SPORT {
        justify-content: center;
        padding-top:30px;
        padding-bottom:30px;
    }
    .MyContent #GLOBAL-BODY-02-SPORT .Photo {
        max-width:375px;
    }
    .MyContent #GLOBAL-BODY-02-SPORT .Box {
        padding:20px;
        padding-top:48px;
        padding-bottom:120px;
        flex-basis: 100%;
    }
    
    .MyContent #GLOBAL-BODY-02-SPORT .Box .Content{
        max-width:335px;
        margin:0 auto;
    }
    .MyContent #GLOBAL-BODY-02-SPORT .Box .Text::before{
        content:" ";
        float: right;
        display: block;
        width: 100%;
        height: 300px;
        shape-outside: polygon(51% 81%, 60% 68%, 78% 56%, 95% 49%, 100% 0, 99% 99%, 46% 100%);
     
        margin-bottom: 0;
        transform: none;
    }
    .MyContent #GLOBAL-BODY-02-SPORT  .Product[data-product="huile-tonic"] {
        margin-top:70px;
        margin-left: 30px;
    }
    .MyContent #GLOBAL-BODY-02-SPORT  .Product[data-product="body-fit"] {
        margin-top:-70px;
    }

    .MyContent .MyBlockContent .Ingredient[data-ingredient="menthe"]{
        left: auto;
        top: auto;
        position: relative;
        margin-top: -230px;
        margin-bottom: -120px;
        flex-basis: 100%;
    }
    .MyContent .MyBlockContent .Ingredient[data-ingredient="menthe"] .IngredientVisual {
        width: 200px;
        margin:0 auto;
        transform:translateX(125px);
    }
    .MyContent .MyBlockContent .Ingredient[data-ingredient="menthe"] .IngredientName {
        top: 240px;
        right: 5px;
        width: 68px;
        text-align: left;
        line-height: 12px;
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION{

        justify-content: center;
        padding-top:60px;
        padding-bottom:30px;
    }

    .MyContent #GLOBAL-BODY-03-RELAXATION .Photo {
        max-width:375px;
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Box {
        padding:20px;
        padding-top:48px;
        flex-basis: 100%;
    }
    
    .MyContent #GLOBAL-BODY-03-RELAXATION .Box .Content{
        max-width:335px;
        margin:0 auto;
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION  .Box .Text::before{
        content: " ";
        float: right;
        display: block;
        width: 800px;
        height: 600px;
        shape-outside: polygon(81% 65%, 74% 50%, 81% 35%, 96% 29%, 100% 0, 99% 99%, 96% 72%);
        margin-bottom: 0;
    
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Wrapper{
        max-width:335px;
        margin:0 auto;
         margin-top: -220px;
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Product{
        height:450px;
        display:flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }
    .MyContent .MyBlockContent .Ingredient[data-ingredient="karite"]{
        right: auto;
        left: calc(50% - 5px);
        top: 300px;
        position: absolute;
        width: 205px;
    }
    .MyContent .MyBlockContent .Ingredient[data-ingredient="karite"] .IngredientName {
        top: 102%;
        right: 60px;
        left: auto;
        width: 70px;
        text-align: right;
        line-height: 12px;
    }

    .MyContent #GLOBAL-BODY-03-RELAXATION  .Product[data-product="creme-mains"] {
       
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Product[data-product="huile-relax"] {
   
    }
    .MyContent #GLOBAL-BODY-03-RELAXATION .Product[data-product="baume"] {
    }

    .MyContent #GLOBAL-BODY-04-SOIN-TOUCHER {
        justify-content: center;
        padding-top:30px;
        padding-bottom:30px;
    }
    .MyContent #GLOBAL-BODY-04-SOIN-TOUCHER  .Box {
        padding:20px;
        padding-top:48px;
        flex-basis: 100%;
    }
    .MyContent #GLOBAL-BODY-04-SOIN-TOUCHER .Box .Content{
        max-width:335px;
        margin:0 auto;
    }
    .MyContent .MyBlockContent .Ingredient[data-ingredient="camomille"]{
       display:none;
    }

 }
/*--------------------------------------------------------------*/
.MyContent #GLOBAL-BODY-ROUTINE{
      background-color: #fff;
      text-align: center;
      padding-top:20px;
}
.MyContent #GLOBAL-BODY-ROUTINE .slick-prev {
    left: 0px;
}
.MyContent #GLOBAL-BODY-ROUTINE .slick-next {
    right: 0px;
}
.MyContent #GLOBAL-BODY-ROUTINE .slick-dots{
    bottom: 20px;
    width: 300px;
    left: calc(50% - 150px);
}
.MyContent #GLOBAL-BODY-ROUTINE .Wrapper{
    background-color: #fff;
    text-align: center;
    padding:40px;
    position: relative;
    z-index:2;
}

.MyContent #GLOBAL-BODY-ROUTINE  .Product .BtnLink span{
    border:2px solid #e5e5e5;
    background-color: #fff;
    color:#000;
}
.MyContent #GLOBAL-BODY-ROUTINE .Photo {
    position:relative;
    max-width: 100%;
    z-index:1;
    margin-top:-160px;
}

.MyContent #GLOBAL-BODY-ROUTINE .ProductWrapper {
    position:relative;
   display:flex;
   flex-direction: column;
   height:520px;
   justify-content: flex-end;
   padding-bottom:40px;
}

@media (min-width:762px){
    .MyContent #GLOBAL-BODY-ROUTINE .Photo img{
        max-width: 1600px;
        width:1600px;
        margin:0;
        margin-left:calc(50% - 800px);
        margin-right:calc(50% - 800px);
    }
}


@media (max-width:761px){
    .MyContent #GLOBAL-BODY-ROUTINE .slick-prev {
        left: -10px;
    }
    .MyContent #GLOBAL-BODY-ROUTINE .slick-next {
        right: -10px;
    }
    .MyContent #GLOBAL-BODY-ROUTINE .Wrapper{
        padding: 40px 10px;
    }
    .MyContent #GLOBAL-BODY-ROUTINE .Product .BtnLink span{
        padding:11px 0;
    }
    .MyContent .Product .ProductName{
        white-space: normal;
    }
    .MyContent #GLOBAL-BODY-ROUTINE .ProductWrapper {
        padding-bottom:20px;
       height:430px;
      
    }
    
}



@media (min-width:762px){
    .MyContent .AnchorBlock[id="NUTRITION"]{
        height: 50px;
        margin-top: -50px;
    }
    .MyContent .AnchorBlock[id="SPORT"]{
        height: 100px;
        margin-top: -100px;
    }
    .MyContent .AnchorBlock[id="RELAXATION"]{
        height: 250px;
        margin-top: -250px;
    }
    .MyContent .AnchorBlock[id="CONFIANCE-EN-SOI"]{
        height: 250px;
        margin-top: -250px;
    }
}



/*---------------------------------------------------------------*/



.MyContent #GLOBAL-BODY-04-SOIN-TOUCHER .Box{
    margin-bottom: auto;
}

.MyContent .MyBlockContent .Ingredient[data-ingredient="camomille"]{
    top: -310px;
}

@media only screen and (min-device-width : 834px) and (max-device-width : 1112px) 
and (orientation : portrait) {
    .MyContent .MainWrapper{
        width: 1114px;
    }
}