.site-width-slot{
	max-width: initial !important;
}

@media only screen and (min-device-width: 1024px){
	#EcoBarClarins .TopBanner,#EcoBarClarins .ThanksTo,#EcoBarClarins .NewConcept,#EcoBarClarins .HowItWorks,#EcoBarClarins .RendezVous{
	max-width: 1250px;
	margin: 0 auto;
}
}

.TopBanner{
    width: 100%;
    position: relative;
    margin-bottom: 60px !important;
}

.TopBanner .TextWrapper{
    position: absolute;
    padding: 20px;
    background-color: white;
    top: 100px;
    right: 150px;
    width: 400px;
}

#EcoBarClarins h1, #EcoBarClarins h2{
	font-family: ClarinsRegular;
	font-weight: normal;
}

#EcoBarClarins h1{
	font-size: 40px;
	margin: 0;
}

#EcoBarClarins h2{
	font-size: 20px;
}

#EcoBarClarins p{
	font-size: 14px;
}

.TopBanner .TextWrapper .Subtitle{
	color:#BE0F34;
}

#EcoBarClarins img{
	width: 100%;
}

.ThanksTo{
	display: flex;
	flex-direction: row;
  justify-content: center;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 60px;
}

/*.ThanksTo img{
	width: 60% !important;
}*/

.ThanksTo .Visual{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: initial !important;
}

.ThanksTo .TextWrapper{
	display: flex;
	flex-direction: column;
	justify-content: center;
  width: 34% !important;
  margin-left: 30px;
}

.ThanksTo .Visual,.ThanksTo .TextWrapper{
	width: 50%;
}

.NewConcept{
	text-align: center;
	margin-bottom: 60px;
}

.NewConcept .TextWrapper,.NewConcept .QuoteWrapper{
	width: 70%;
	margin: 0 auto;
	margin-bottom: 60px;
  position: relative;
}

.QuoteWrapper p{
	text-transform:uppercase;
}

.HowItWorks{
	position: relative;
	margin-bottom: 60px;
	max-width: initial !important;
}

.HowItWorks .ProductVisual img{
  width: initial !important;
}

.HowItWorks .ProductVisual{
  position: absolute;
}

.HowItWorks .ProductLeft{
  bottom: -220px;
  left: 150px;
}

.HowItWorks .ProductRight{
  top: -220px;
  right: 150px;
}

.HowItWorks .Step{
	position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: white;
}

.HowItWorks .Step .Bottom{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 238px;
}

.HowItWorks .Step .Bottom p{
	width: 250px;
	margin: 40px;
}

.HowItWorks .Step .Bottom p:nth-child(2){
	padding-top: 60px;
}

.HowItWorks .Step .Bottom p span{
	display: block;
	font-size: 40px;
	margin-bottom: 20px;
}

.RendezVous{
	text-align: center;
}

.RendezVous .ShopWrapper{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
  position: relative;
}

.RendezVous .ShopWrapper .Visual img{
  width: 80%;
}

.RendezVous .separateur{
  margin: 130px;
  padding: 20px;
  background-color: white;
}

.RendezVous .separateur:before{
  content: " ";
  border: 1px solid black;
  padding: 100px 0;
  position: absolute;
  top: 60px;
  left: 632px;
}

.RendezVous .Shop{
	text-transform: uppercase;
}


.picto-quote{
    width: 34px;
    height: 28px;
    display: inline-block;
    fill: #afb534 !important;
    position: absolute;
}

.picto-quote *{
	fill:#afb534 !important;
}

.open-quote{
  top: -4px;
  left: -20px;
}

.close-quote{
    bottom: 30px;
    right: 90px;
    transform: rotate(180deg);
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    #EcoBarClarins{
      text-align: center;
    }
    .TopBanner, .ThanksTo, .NewConcept .TextWrapper, .NewConcept .QuoteWrapper{
      margin-bottom: initial !important;
    }
    .RendezVous{
      padding-top: 20px;
    }
    .TopBanner .TextWrapper{
      position: initial;
      width: 90%;
      margin: 0 auto;
    }
    .ThanksTo .TextWrapper{
      width: 80% !important;
      margin: 0 auto;
    }
    .ThanksTo{
      flex-direction: column;
      width: 90%;
      padding: 0;
    }
    .ThanksTo img{
      float: initial;
      width: 100%;
    }
    .ThanksTo .Visual{
      width: 100%;
    }
    .HowItWorks img{
      width: initial !important;
    }
    .HowItWorks .Step .Bottom{
      flex-direction: column;
      margin-top: 20px;
      transform: scale(0.8);
    }
    .HowItWorks .Step .Bottom p{
      padding: 0 !important;
      margin: 0;
      margin-bottom: 10px;
    }
    .open-quote{
      left: -40px;
    }
    .close-quote{
      bottom: 60px;
      right: -30px;
    }
    .HowItWorks .ProductRight{
      bottom: -190px !important;
      right: -80px !important;
      top: initial;
    }
    .HowItWorks .ProductLeft{
      bottom: -220px;
      top: initial !important;
      left: -80px !important;
    }
    .ProductVisual img{
      transform: scale(0.34);
    }
    .RendezVous .separateur{
      display: none;
    }
    .RendezVous .ShopWrapper{
      flex-direction: column;
    }
    #EcoBarClarins h2{
      font-size: 20px;
    }
    #EcoBarClarins h1{
      font-size: 36px;
    }
}

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) {
    #EcoBarClarins{
      text-align: center;
    }
    .TopBanner, .ThanksTo, .NewConcept .TextWrapper, .NewConcept .QuoteWrapper{
      margin-bottom: initial !important;
    }
    .RendezVous{
      padding-top: 20px;
    }
    .TopBanner .TextWrapper{
      position: initial;
      width: 90%;
      margin: 0 auto;
    }
    .ThanksTo .TextWrapper{
      width: 80% !important;
      margin: 0 auto;
    }
    .ThanksTo{
      flex-direction: column;
      width: 90%;
      padding: 0;
    }
    .ThanksTo img{
      float: initial;
      width: 100%;
    }
    .ThanksTo .Visual{
      width: 100%;
    }
    .HowItWorks img{
      width: initial !important;
    }
    .HowItWorks .Step .Bottom{
      flex-direction: column;
      margin-top: 20px;
      transform: scale(0.8);
    }
    .HowItWorks .Step .Bottom p{
      padding: 0 !important;
      margin: 0;
      margin-bottom: 10px;
    }
    .open-quote{
      left: -40px;
    }
    .close-quote{
      bottom: 60px;
      right: -30px;
    }
    .HowItWorks .ProductRight{
      bottom: -190px !important;
      right: -80px !important;
      top: initial;
    }
    .HowItWorks .ProductLeft{
      bottom: -220px;
      top: initial !important;
      left: -80px !important;
    }
    .ProductVisual img{
      transform: scale(0.34);
    }
    .RendezVous .separateur{
      display: none;
    }
    .RendezVous .ShopWrapper{
      flex-direction: column;
    }
    #EcoBarClarins h2{
      font-size: 26px;
    }
    #EcoBarClarins h1{
      font-size: 36px;
    }
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
    #EcoBarClarins{
      text-align: center;
    }
    .TopBanner, .ThanksTo, .NewConcept .TextWrapper, .NewConcept .QuoteWrapper{
      margin-bottom: initial !important;
    }
    .RendezVous{
      padding-top: 20px;
    }
    .TopBanner .TextWrapper{
      position: initial;
      width: 90%;
      margin: 0 auto;
    }
    .ThanksTo .TextWrapper{
      width: 80% !important;
      margin: 0 auto;
    }
    .ThanksTo{
      flex-direction: column;
      width: 90%;
      padding: 0;
    }
    .ThanksTo img{
      float: initial;
      width: 100%;
    }
    .ThanksTo .Visual{
      width: 100%;
    }
    .HowItWorks img{
      width: initial !important;
    }
    .HowItWorks .Step .Bottom{
      flex-direction: column;
      margin-top: 20px;
      transform: scale(0.8);
    }
    .HowItWorks .Step .Bottom p{
      padding: 0 !important;
      margin: 0;
      margin-bottom: 10px;
    }
    .open-quote{
      left: -40px;
    }
    .close-quote{
      bottom: 60px;
      right: -30px;
    }
    .HowItWorks .ProductRight{
      bottom: -190px !important;
      right: -80px !important;
      top: initial;
    }
    .HowItWorks .ProductLeft{
      bottom: -220px;
      top: initial !important;
      left: -80px !important;
    }
    .ProductVisual img{
      transform: scale(0.34);
    }
    .RendezVous .separateur{
      display: none;
    }
    .RendezVous .ShopWrapper{
      flex-direction: column;
    }
    #EcoBarClarins h2{
      font-size: 26px;
    }
    #EcoBarClarins h1{
      font-size: 36px;
    }
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .TopBanner .TextWrapper{
      transform: scale(0.8);
      top: 0;
      right: 0;
    }
    .ThanksTo{
      transform: scale(0.9);
    }
    .HowItWorks .Visual img{
      width: initial !important;
    }
    .Visual.ProductVisual img{
      width: 100% !important;
    }
    .ProductVisual{
      transform: scale(0.5);
    }
    .ProductLeft{
      left: -60px !important;
    }
    .ProductRight{
      right: -50px !important;
      top: -190px !important;
    }
    .RendezVous .separateur{
      margin: 100px !important;
    }
    .RendezVous .separateur:before{
      left: 392px;
    }
    .open-quote{
      left: -40px
    }
    .close-quote {
      bottom: 50px;
      right: -20px;
    }
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .RendezVous .separateur:before{
      left: 518px;
    }
}

/*DTW Edits*/


.HowItWorks .Step .Bottom p:nth-child(2) {
    padding-top: 1px;
}
.RendezVous .separateur:before {
    content: " ";
    border: 1px solid black;
    padding: 44px 0;
    position: absolute;
    top: 60px;
    left: 632px;
}
.RendezVous .separateur:after {
    content: " ";
    border: 1px solid black;
    padding: 44px 0;
    position: absolute;
    top: 180px;
    left: 631px;
}
/*Ipad Air 3 Landscape*/
@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {

#EcoBarClarins .HowItWorks .Visual:nth-child(3) img {
   height: 408px;
}

.HowItWorks .ProductVisual img {
width: 50%!important;
  }
  .HowItWorks .ProductRight {
    top: -110px;
    right: -66px;
}
.HowItWorks .ProductLeft {
    bottom: -200px;
    left: 42px;
}

.HowItWorks .ProductRight {
    top: -140px;
    right: -100px;
}



}

/*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) { 
.ProductRight {
    right: -140px !important;
    top: -169px !important;
}

.ProductLeft,
.ProductRight{
  transform: scale(1);
}

.HowItWorks .ProductLeft{
  bottom: -165px;
  left: 15px!important;
}



}

@media screen and (max-width: 1800px){
  .HowItWorks .ProductRight{
    top: -175px;
    right: -45px;
  }
  .HowItWorks .ProductLeft{
    left: 60px;
  }
  .HowItWorks .ProductVisual img{
    width: 85%!important;
  }
}

@media screen and (max-width: 1500px){
  .HowItWorks .ProductRight{
    top: -175px;
    right: -45px;
  }
  .HowItWorks .ProductLeft{
    left: 60px;
  }
  .HowItWorks .ProductVisual img{
    width: 65%!important;
  }
}

@media only screen and (max-width: 761px){
  .HowItWorks .ProductRight{
    top: -165px;
    right: -115px!important;
  }
  .HowItWorks .ProductLeft{
    bottom: -125px;
    left: -110px!important;
  }
}

/*ANDROID*/
@media screen 
and (device-width: 360px) 
and (device-height: 640px) 
and (-webkit-device-pixel-ratio: 3) 
and (orientation: portrait) {
  .TopBanner .TextWrapper{
    position: initial;
    width: auto;
    padding: 20px;
  }
  .ThanksTo{
    display: block;
  }
  .ThanksTo .Visual, .ThanksTo .TextWrapper{
    width: auto!important;
    padding: 20px;
    margin-left: unset;
  }
  .HowItWorks img{
    width: initial!important;
  }
  .HowItWorks .Step .Bottom{
    display: inline-block;
  }
  .HowItWorks .Step .Bottom p{
    width: auto;
    margin: 10px;
  }
  .HowItWorks .ProductVisual img{
    width: 30%!important;
  }
  .HowItWorks .ProductRight {
    top: -88px;
    right: -215px!important;
  }
  .HowItWorks .ProductLeft {
    bottom: -87px;
    left: -15px!important;
  }
  .HowItWorks{
    margin-bottom: 70px;
  }
  .close-quote{
    bottom: 100px;
    right: 35px;
  }
  .HowItWorks .Step .Bottom p span{
    margin-bottom: 10px;
  }
}

/*SAMSUNG GALAXY S20*/
@media only screen and (max-width: 360px) and (orientation: portrait) {
  .TopBanner .TextWrapper{
    position: initial;
    width: 320px;
  }
  .ThanksTo{
    display: initial;
  }
  .ThanksTo .TextWrapper{
    margin: 0 auto;
  }
  .ThanksTo .TextWrapper{
    width: 90%!important;
  }
  .NewConcept .TextWrapper, .NewConcept .QuoteWrapper{
    width: 90%;
  }
  #EcoBarClarins img{
    width: 100%;
  }
  .HowItWorks .Step .Bottom{
    display: initial;
  }
  .HowItWorks .Step .Bottom p{
    width: auto;
    margin: 10px 20px;
  }
  .HowItWorks .ProductRight {
    top: -90px;
    right: -200px!important;
  }
  .HowItWorks .ProductLeft {
    bottom: -80px;
    left: 0px!important;
  }
  .HowItWorks{
    margin-bottom: 105px;
  }
  .HowItWorks .ProductLeft {
    bottom: -115px;
    left: 5px!important;
  }.close-quote {
    bottom: 88px;
    right: -9px;
  }
  .HowItWorks .ProductVisual img{
    width: 30%!important;
  }
  .open-quote {
    top: -4px;
    left: -10px;
  }
  .TopBanner .TextWrapper,
  .ThanksTo .TextWrapper{
    text-align: center;
  }
  .TopBanner{
    margin-bottom: 0!important;
  }
  .ThanksTo .Visual{
    margin: 0 10px;
  }
  .HowItWorks img{
    width: initial!important;
  }
  .picto-quote{
    width: 25px;
    height: 25px;
  }
  .open-quote{
    left: 0px;
  }
  .NewConcept .QuoteWrapper{
    margin-bottom: 80px;
  }

}

@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
  .HowItWorks .ProductVisual img {
    margin-top: 40px;
  }
}

@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
  .HowItWorks .ProductVisual img {
    margin-top: 40px;
    margin-right: -40px;
  }
}