#BRUME-HYDRA-ESSENTIEL-2020{
    max-width:1170px;
    margin:0 auto;
    position:relative;
    font-family: "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, Times New Roman, sans-serif;
    padding:0;
    box-sizing: border-box;
    display:flex;
    font-size:14px;
    line-height: 21px;
    flex-wrap:wrap;
    justify-content: center;
    width:100%;
    overflow: hidden;
}
#BRUME-HYDRA-ESSENTIEL-2020 p{
   margin:0;
}

#BRUME-HYDRA-ESSENTIEL-2020 .Title{
    color:#000;
    font-size:35px;
    font-family:  Times New Roman;
    margin:0;
    line-height: 1em;
    font-weight: normal;
    margin-bottom:15px;
}

#BRUME-HYDRA-ESSENTIEL-2020  .BtnLink{
    display:block;
    padding-top:20px;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BtnLink a, 
#BRUME-HYDRA-ESSENTIEL-2020 .BtnLink span  {
    background-color: #000;
    display: inline-block;
    color: #fff;
    padding: 16px 30px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 11px;
    line-height: 10px;
    font-family: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, Times New Roman, sans-serif;
    border: 2px solid #000;
    min-width:162px;
    box-sizing: border-box;
    font-weight: bold;
}
#BRUME-HYDRA-ESSENTIEL-2020 .Text strong{
    font-family: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, Times New Roman, sans-serif;
    font-weight: normal;
}
#BRUME-HYDRA-ESSENTIEL-2020 .isDesktop{
    display:block;
}
#BRUME-HYDRA-ESSENTIEL-2020 .isMobile{
    display:none;
}
@media screen and (max-width:761px){
    /* #BRUME-HYDRA-ESSENTIEL-2020 .Title{
        font-size:35px;
    }*/
    
}
/*-------------------------------------------------------------------*/
#BRUME-HYDRA-ESSENTIEL-2020 .Intro{
  flex-basis:100%;
  text-align: center;
}

#BRUME-HYDRA-ESSENTIEL-2020 .Intro .Title{
    color:#007098;
}



/*-------------------------------------------------------------------*/
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient{
    position:relative;
   
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="joubarbe"]{
    margin-top:75px;
    margin-right:18px;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="kalanchoe"]{
    margin-top:65px;
    margin-right:18px;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="bleuet"]{
    margin-top:345px;
    margin-right:36px;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="bleuet"] img{
    max-width:210px
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient .Logo{
    position:absolute;
    right:-85px;
    top:0;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient .IngredientName{
    font-size:12px;
    position:absolute;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="joubarbe"] .IngredientName{
    top:-15px;
    left:5px;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="kalanchoe"] .IngredientName{
    top:365px;
    left:165px;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="bleuet"] .IngredientName{
    top:-18px;
    left:155px;
}



#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient .Argument{
    position:absolute;
  
}

#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="joubarbe"] .Argument{
    top:257px;
    right:200px;  
    text-align:right;
    width:160px;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="kalanchoe"] .Argument{
    top: 0px;
    left: 350px;
    text-align: left;
    width: 300px;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="bleuet"] .Argument{
    top:50px;
    left:235px;  
    text-align:left;
    width:195px;
}


#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient .Argument::before{
    content:" ";
    position:absolute;
}


#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="joubarbe"] .Argument::before{
    background-color:#81a51c;
    top:-45px;
    right:-17px;
    height:176px;
    width:4px;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="kalanchoe"] .Argument::before{
    background-color:#007098;
    top:-17px;
    left:-36px;
    width:380px;
    height:4px;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="bleuet"] .Argument::before{
    background-color:#3e41b7;
    top:-45px;
    left:-17px;
    height:195px;
    width:4px;
}


#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient .FirstLine{
    text-transform: uppercase;
    font-size: 14px;
    display:block;
    line-height: 1em;
    font-family: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium", Helvetica, Arial, Times New Roman, sans-serif;
    font-weight: bold;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient .Num{
    font-size:60px;
    display:block;
    line-height: 1em;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient .Num sup{
        font-size: 30px;
        line-height: 40px;
         top: 0; 
        display: inline-block;
        height: 60px;
        position: relative;
        vertical-align: top;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="joubarbe"] .FirstLine,
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="joubarbe"] .Num{
   color:#81a51c;
}

#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="kalanchoe"] .FirstLine,
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="kalanchoe"] .Num{
   color:#007098;
}

#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="bleuet"] .FirstLine,
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="bleuet"] .Num{
   color:#3e41b7;
}
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient .Text{
    position:relative;
    display:block;
    padding-bottom:20px;
    line-height: 1.4em;
}

#BRUME-HYDRA-ESSENTIEL-2020 .Wrapper{
    flex-basis:100%;
    display:flex;
    justify-content: center;
    align-items: flex-start;
    padding:60px 40px;
    box-sizing: border-box;
}
#BRUME-HYDRA-ESSENTIEL-2020 .ColoredBox{
    position:relative;
    z-index:1;
    max-width:475px;

}

#BRUME-HYDRA-ESSENTIEL-2020 .ColoredBox .Title{
  color:#e28d32;
position:relative;
padding-right: 74px;
}

#BRUME-HYDRA-ESSENTIEL-2020 .ColoredBox .Title::after{
    content:" ";
    width:77px;
    height:77px;
    background-image: url(img/domaine-clarins.png);
    display: inline-block;
    position:absolute;
    right:-20px;
    top:10px;
  
}
#BRUME-HYDRA-ESSENTIEL-2020 .Content{
    padding:30px;
    padding-right:140px;
    background-color: #fff;
    position:relative;
    z-index:1;  
    text-align: right;
}
#BRUME-HYDRA-ESSENTIEL-2020 .Content .Text{
    padding-bottom:20px;
}
#BRUME-HYDRA-ESSENTIEL-2020 .ColoredBox::before{
   content:" ";
   background-image: url(img/background.png);
   width:calc(100% + 40px);
   height:calc(100% + 40px);
   left:-20px;
   top:-20px;
   display:block;
   position: absolute;
   z-index:-1;
   background-size: 100% 100%;
}

#BRUME-HYDRA-ESSENTIEL-2020 .Photo{
    max-width:420px;
    z-index:2;
    margin-left:-110px;
    margin-top:140px;
}
@media screen and (max-width:1024px){
    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="joubarbe"] .Argument {
        top: 257px;
        right: 190px;
        text-align: right;
        width: 160px;
    }
}

@media screen and (max-width:1023px) and (min-width:762px){
 

    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="kalanchoe"]{
        order:1;  margin-right: 400px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="joubarbe"]{
        order: 3;
        margin-right: 250px;    margin-bottom: -100px;
        margin-top: -100px;margin-left: 0;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="bleuet"]{
        order: 2;
        margin-top: -150px;
        margin-left: 190px; margin-bottom: -100px;
    }

    #BRUME-HYDRA-ESSENTIEL-2020 .Wrapper{
        order:4; padding: 20px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .ColoredBox {
        max-width: 420px;
        margin-top: -200px;
        order: 2;
        margin-right: 20px;
    }

    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="kalanchoe"] .IngredientName {
        top: 265px;
        left: 265px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .ColoredBox .Content {
        padding:30px;
    } 
     #BRUME-HYDRA-ESSENTIEL-2020 .ColoredBox .Text:last-child {
        padding-left: 130px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .Photo {
        max-width: 420px;
        z-index: 2;
        margin-left: 0px;
        margin-top: 100px;
        margin-right: -140px;
    }
}

@media screen and (max-width:761px){
    #BRUME-HYDRA-ESSENTIEL-2020 {
      flex-direction:column;
      align-items: center;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .Intro{
      padding:20px;
      }
      #BRUME-HYDRA-ESSENTIEL-2020 .Intro .Text{
       font-size:16px;
        }
    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="joubarbe"]{
        order: 2;
        margin:0;
        margin-left:150px;
      
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="joubarbe"] img{
        max-width:119px;
     }
    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="kalanchoe"]{
        order: 1;
        margin:0;
        margin-left:90px;
        margin-bottom:270px;
        margin-top:30px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="kalanchoe"] img{
       max-width:169px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="bleuet"]{
        order: 3;
        margin:0;
        margin-right:180px;
        margin-top:-70px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="bleuet"] img{
        max-width:177px;
     }

     #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient .Logo {
        position: absolute;
        right: 175px;
        bottom: 0;
        top:auto;
        transform: scale(0.9);
     }
 
     #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="kalanchoe"] .IngredientName {
        top: 275px;
        left: 125px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="kalanchoe"] .Argument {
        top: 430px;
        left: -100px;
        text-align: left;
        width: 300px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="kalanchoe"] .Argument::before {
        background-color: #007098;
        top: -50px;
        left: -26px;
        height: 250px;
        width: 4px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="joubarbe"] .Argument {
        top: 57px;
        right: 170px;
        text-align: right;
        width: 160px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="bleuet"] .IngredientName {
        top: -18px;
        left: 85px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="bleuet"] .Argument {
        top: 150px;
        left: 195px;
        text-align: left;
        width: 165px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .Wrapper{
        order:4; padding: 20px;display:block;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .ColoredBox {
        max-width: 420px;
        margin:20px;
        order: 2;
    }

    #BRUME-HYDRA-ESSENTIEL-2020 .ColoredBox .Content {
        padding:20px;
    } 
    #BRUME-HYDRA-ESSENTIEL-2020 .Wrapper .Text{
        font-size:16px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .Photo {
        max-width: 420px;
        z-index: 2;
        margin: 0px;
        position: relative;

    }
    #BRUME-HYDRA-ESSENTIEL-2020 .Photo img {
        max-width: calc(100% - 20px);
        transform: translateX(40px) translateY(-40px);
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .ColoredBox .Title {
        color: #e28d32;
        position: relative;
        padding-right: 84px;
        font-size: 26px;
    }
    #BRUME-HYDRA-ESSENTIEL-2020 .ColoredBox .Title::after {
        right: -10px;
        top: 0px;
    }
}

/*DTW EDITS*/
/*Ipad Air 3 Portrait*/
@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { 
#BRUME-HYDRA-ESSENTIEL-2020 .Photo {
    margin-top: 204px;
}
}



/*Iphone Portrait*/
@media screen and (max-width: 761px) {
#BRUME-HYDRA-ESSENTIEL-2020 .BlockIngredient[data-ingredient="joubarbe"] .IngredientName {
    top: 5px;
    left: -28px;
}
#BRUME-HYDRA-ESSENTIEL-2020 .Photo img {
    transform: translateX(10px) translateY(25px);
}
}