@font-face {
    font-family: 'Salty Cheese';
    src: url('SaltyCheese.woff2') format('woff2'),
        url('SaltyCheese.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

h1 { text-align:center; font-family: 'Apercu Pro', sans-serif; font-style: bold; font-size:40px; line-height:46px; position:relative; margin-top:60px; margin-bottom:40px;}
h1::after { position:absolute; bottom:-10px; width: 200px;
  height: 5px; content:''; left:50%; margin-left:-100px;
  background: linear-gradient(to right, #ffbd33 25%, #33d9ff 25%, #33d9ff 50%, #f8998d 50%, #f8998d 75%, #94dad7 75%); border-top-left-radius:20px; border-bottom-right-radius:20px;  }

.hellodiane-content-txt { padding:40px}

.hellodiane-content-txt p, .revives-flat-hair-content-container p { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; line-height:22px; }


.hellodiane-goodbye-damage-ingredients-bg-container { width:100%; padding-top:60px; padding-bottom:60px; background: #ffffff;
background: linear-gradient(116deg, rgba(255, 255, 255, 1) 0%, rgba(232, 232, 232, 1) 38%, rgba(255, 252, 250, 1) 63%, rgba(255, 255, 255, 1) 81%); }

.hellodiane-goodbye-damage-ingredients-container { width:900px; margin:30px auto 0 auto; position:relative; text-align:center; }

.goodbye-damage-ingredient-1 { position:absolute; left:-79px; bottom:-90px; font-family: 'Apercu Pro', sans-serif; font-size:24px; line-height:28px; width:300px; }
.goodbye-damage-ingredient-2 { position:absolute; left:191px; bottom:-60px; font-family: 'Apercu Pro', sans-serif; font-size:24px; line-height:28px; width:300px; }
.goodbye-damage-ingredient-3 { position:absolute; left:566px; bottom:-60px;  font-family: 'Apercu Pro', sans-serif; font-size:24px; line-height:28px; width:300px; }
.goodbye-damage-ingredient-sub-line { display:block; font-family: 'Apercu Pro', sans-serif; font-size:18px; line-height:24px; margin-top:5px; color:#444;}

.hellodiane-green-bg-container { background-color:#eff8ff; background:url('../img/hellodiane/goodbye-damage/blue-bg.gif'); width:100%; padding:60px 0;}


.revives-flat-hair-content-container { width:630px; margin:0 auto; }

.revives-flat-hair-list-item { float:left; width:160px; margin:25px; position:relative; }

.revives-flat-hair-list-item-1-text { position:absolute; font-weight:bold; text-align:center; bottom:40px; left:29px; font-family: 'Apercu Pro', sans-serif; font-size:16px; line-height:18px;}
.revives-flat-hair-list-item-2-text { position:absolute; font-weight:bold; text-align:center; bottom:58px; left:22px; font-family: 'Apercu Pro', sans-serif; font-size:16px; line-height:18px;}
.revives-flat-hair-list-item-3-text { position:absolute; font-weight:bold; text-align:center; bottom:58px; left:28px; font-family: 'Apercu Pro', sans-serif; font-size:16px; line-height:18px;}

.revives-flat-hair-list-item-container { width:420px; margin:0 auto; }

h2 { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:24px; line-height:30px; }

.hellodiane-product-section-title-container { width:100%; margin:60px auto 20px auto; }
.hellodiane-product-section-title-container h2 { text-align:center; font-family: 'Apercu Pro', sans-serif; font-style: bold; font-size:40px; line-height:46px; position:relative; margin-bottom:40px;}
.hellodiane-product-section-title-container h2::after { position:absolute; bottom:-10px; width: 200px;
  height: 5px; content:''; left:50%; margin-left:-100px;
  background: linear-gradient(to right, #ffbd33 25%, #33d9ff 25%, #33d9ff 50%, #f8998d 50%, #f8998d 75%, #94dad7 75%); border-top-left-radius:20px; border-bottom-right-radius:20px;  }


.hellodiane-content-container { width:1200px; margin:0 auto; position:relative;}

.hellodiane-yellow-bg-container { background-color:#fffcdc; background:url('../img/hellodiane/yellow-bg.gif'); background-size:cover; width:100%;}
.hellodiane-about-col-left, .hellodiane-about-col-right { float:left; width:520px; padding:40px; }
.hellodiane-about-col-left span, .hellodiane-about-col-right span { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:26px; line-height:30px; }


.pinktxt { color:#EB5394 ; }

.bubble-container { width:450px; position:relative; margin:30px auto; }
.bubble { float:left; width:150px; color:#000;font-family: 'Salty Cheese'; font-weight: normal; text-align:center; padding-top:20px; font-size:18px; line-height:26px;}
.bubble-design-1 { background:url('../img/hellodiane/bubble1.gif'); margin-left:0; margin-right:20px;width:150px; height:51px; background-size:cover; }
.bubble-design-2 { background:url('../img/hellodiane/bubble2.gif'); margin-left:20px; margin-right:20px;width:150px; height:51px; background-size:cover; }
.bubble-design-3 { background:url('../img/hellodiane/bubble3.gif'); margin-top:10px; margin-left:30px; margin-right:20px;width:150px; height:51px; background-size:cover; }
.bubble-design-4 { background:url('../img/hellodiane/bubble4.gif'); margin-left:40px; margin-right:20px;width:150px; height:51px; background-size:cover; }

.hellodiane-power-packed-bg-container { background:#ffeec2; width:100%; padding-top:60px; padding-bottom:60px; }

.hellodiane-power-packed-container { width:900px; margin:0 auto; }
.hellodiane-power-packed-col-left { width:300px; float:left; margin-right:50px; } 
.hellodiane-power-packed-col-right { width:550px; float:left; } 
.hellodiane-power-packed-col-left { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:26px; line-height:30px; }


.tick-container { width:510px; margin:5px auto;}

.tick-item { float:left; width:120px; margin-left:30px; padding-left:10px; margin-right:10px; margin-bottom:10px; font-family: 'Apercu Pro', sans-serif; font-weight: bold; font-style: normal; font-size:18px; line-height:24px; position:relative; } 
.tick-item::before { 
    content:' ';
    width:30px;
    height:30px;
    background-image: url("../img/hellodiane/tick.gif");
    background-size:cover;
    position:absolute;
    left:-30px;
}
.x-container { width:350px; margin:0 auto;}
.x-item { float:left; width:120px; margin-left:30px; padding-left:10px; margin-right:10px; margin-bottom:10px; font-family: 'Apercu Pro', sans-serif; font-weight: bold; font-style: normal; font-size:18px; line-height:24px; position:relative; } 
.x-item::before { 
    content:' ';
    width:30px;
    height:30px;
    background-image: url("../img/hellodiane/x.gif");
    background-size:cover;
    position:absolute;
    left:-30px;
}

.goodbye-damage-product-content-container { width:1200px; margin:60px auto; }

.goodbye-damage-product-content-col { width:570px; float:left; margin:20px 15px; }

.goodbye-damage-content-product-img { position:relative; }

.goodbye-damage-content-blue-box { border:2px solid #9dc3e6; padding:20px; }

.goodbye-damage-content-blue-box p { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; line-height:24px; }

.hellodiane-goodbye-damage-scent { position:absolute; -webkit-text-stroke: 6px #0070c0; color: #fff; paint-order: stroke fill; font-size:22px; line-height:24px; font-family: 'Salty Cheese'; font-weight: normal; text-align:center; padding:10px; top:-20px; right:-15px; transform: rotate(4deg); }

.goodbye-damage-feature-title { background:url('../img/hellodiane/goodbye-damage/goodbye-damage-feature-title.png'); background-size:contain; background-repeat:no-repeat; width:500px; height:88px; -webkit-text-stroke: 4px #fff; color: #000; paint-order: stroke fill; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:24px; line-height:30px; padding-top:20px; padding-left:10px; text-align:center;}    

.orangetxt { color:#ff8400; } 
.greentxt { color:#3b9300; } 
.bluetxt { color:#0189e9; } 

.hair-study-disclaimer { text-align:center; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-size:12px; line-height:16px; display:block; }

.blue-border { border:2px solid #33d9ff; padding:20px; border-radius:20px; }
.orange-border { border:2px solid #ffbd33; padding:20px; border-radius:20px; }

.scalp-cleansing-title { background:url('../img/hellodiane/goodbye-damage/scalp-cleansing-title.png'); background-size:contain; background-repeat:no-repeat; width:500px; height:88px; -webkit-text-stroke: 4px #fff; color: #000; paint-order: stroke fill; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:24px; line-height:30px; padding-top:20px; padding-left:10px; text-align:center;}    

.fights-dandruff-title { background:url('../img/hellodiane/goodbye-damage/fights-dandruff-title.png'); background-size:contain; background-repeat:no-repeat; width:500px; height:88px; -webkit-text-stroke: 4px #fff; color: #000; paint-order: stroke fill; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:24px; line-height:30px; padding-top:20px; padding-left:10px; text-align:center;}    

.acid-heat-care-bg-container { width:100%; background:#def5ff; padding-top:60px; padding-bottom:60px;} 
.acid-heat-care-container { width:650px; margin:0 auto; }
.acid-heat-care-container span { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:26px; line-height:30px; }
.to-repair { display:block; margin-bottom:30px; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; line-height:22px;}
.acid-heat-care-col-left { float:left; width:150px; }
.acid-heat-care-col-left img { width:100px; height:100px; margin-top:-20px;}
.acid-heat-care-col-right { float:left; width:350px; }
.heat-based-repair-illustration { width:630px; height:auto; padding:10px; border-radius:10px; border:1px solid #aaa; }

.hellodiane-how-to-use-container { width:800px; margin:20px auto; }
.hellodiane-how-to-use-bg-container { width:100%; background:#f0f0f0; padding-top:60px; padding-bottom:60px;} 

.point-text { padding-top:5px; padding-right:30px; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:16px; overflow:hidden; }

.circle {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  padding: 15px;
  background: #ffbd33;
  color: #fff;
  font-size:22px;
  text-align: center;
  float:left;
  margin-right:15px;
  margin-bottom:10px;
}

.hellodiane-lineup-container { width:900px; margin:20px auto; }
.hellodiane-product-detail-lineup-col { float:left; width:200px; margin:50px; text-align:center; position:relative;}
.hellodiane-product-detail-lineup-col img { max-width:90%; margin:0 auto;}
.hellodiane-product-detail-lineup-col p { font-family: 'Apercu Pro', sans-serif;font-size:17px; line-height:20px; font-weight:600; margin-top:15px; margin-bottom:5px; }
.ml { font-family: 'Apercu Pro', sans-serif; font-size:14px; display:block;margin-top:0; margin-bottom:15px; font-weight:400; }

.or { position:relative; }
.or::after { position:absolute; content:''; background:url('../img/hellodiane/goodbye-damage/or.png'); background-size:contain; width:80px; height:80px; right:-90px; top:180px; }

.pair-with { position:relative; }
.pair-with::after { position:absolute; content:''; background:url('../img/hellodiane/goodbye-damage/pair-with.png'); background-size:contain; background-repeat:no-repeat; width:170px; height:139px; right:-135px; top:-30px; }



/* Buy Now Buttons */

.pink-button-buy {
  position: relative;
  display: inline-block;
}

.pink-button-buy .pink-button-buy-text {
  visibility: hidden;
  width: 200px;
  background-color: #e978dd;
  text-align: center;
  border-radius: 10px;
  padding: 10px 0 0 0;
  position: absolute;
  z-index: 2;
  top: 100%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 1s;
}

.pink-button-buy .pink-button-buy-text::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #e978dd transparent;
}

.pink-button-buy:hover .pink-button-buy-text {
  visibility: visible;
  opacity: 1;
}


.pink-buy-button { background:#EB5394; padding:8px 18px 9px 18px; opacity:1; transition: 0.6s; color:#fff; margin-top:0; display:inline-block; cursor:pointer; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; border-radius:20px;}

.pink-buy-button:hover { opacity:0.6;}

.green-button-buy {
  position: relative;
  display: inline-block;
}

.green-button-buy .green-button-buy-text {
  visibility: hidden;
  width: 200px;
  background-color: #00791c;
  text-align: center;
  border-radius: 10px;
  padding: 10px 0 0 0;
  position: absolute;
  z-index: 2;
  top: 100%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 1s;
}

.green-button-buy .green-button-buy-text::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #00791c transparent;
}

.green-button-buy:hover .green-button-buy-text {
  visibility: visible;
  opacity: 1;
}


.green-buy-button { background:#00b050; padding:8px 18px 9px 18px; opacity:1; transition: 0.6s; color:#fff; margin-top:0; display:inline-block; cursor:pointer; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; border-radius:20px;}

.green-buy-button:hover { opacity:0.6;}

.blue-button-buy {
  position: relative;
  display: inline-block;
}

.blue-button-buy .blue-button-buy-text {
  visibility: hidden;
  width: 200px;
  background-color: #0068b1;
  text-align: center;
  border-radius: 10px;
  padding: 10px 0 0 0;
  position: absolute;
  z-index: 2;
  top: 100%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 1s;
}

.blue-button-buy .blue-button-buy-text::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #0068b1 transparent;
}

.blue-button-buy:hover .blue-button-buy-text {
  visibility: visible;
  opacity: 1;
}


.blue-buy-button { background:#0189e9; padding:8px 18px 9px 18px; opacity:1; transition: 0.6s; color:#fff; margin-top:0; display:inline-block; cursor:pointer; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; border-radius:20px;}

.blue-buy-button:hover { opacity:0.6;}

.orange-button { background:#ffbd33; padding:8px 18px 9px 18px; opacity:1; transition: 0.6s; color:#fff; margin-top:15px; display:inline-block; cursor:pointer; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; border-radius:20px;}

.orange-button:hover { opacity:0.6;}

.hellodiane-product-detail-lineup-others-container { width:510px; margin:60px auto 100px auto; text-align:center;}
.hellodiane-product-detail-lineup-others-container span { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:24px; line-height:30px; display:block; margin-top:20px;}

.goodbye-damage-top-title {  font-family: 'Salty Cheese'; font-weight: normal; font-size:40px; line-height:46px;  -webkit-text-stroke: 6px #fff; text-stroke: 2px black; color: #ffbd33; paint-order: stroke fill; margin:20px auto;}

.mobile-ingredient { display:none; }
.desktop-ingredient { display:block; }

.scent-info { position:absolute; top:-80px; left:-40px; width:120px; height:auto; transform: rotate(-4deg);}

/* Responsive */

@media only screen and (max-width: 950px) {

.mobile-ingredient { display:block; }
.desktop-ingredient { display:none; }

.hellodiane-goodbye-damage-ingredients-container { width:320px; margin:0 auto; position:relative; text-align:center; }

.goodbye-damage-ingredient-1 { position:absolute; left:-18px; bottom:auto; top:125px; font-family: 'Apercu Pro', sans-serif; font-size:18px; line-height:20px; width:150px; }
.goodbye-damage-ingredient-2 { position:absolute; left:185px; bottom:auto; top:125px; font-family: 'Apercu Pro', sans-serif; font-size:18px; line-height:20px; width:150px; }
.goodbye-damage-ingredient-3 { position:absolute; left:87px; bottom:-50px; top:auto; font-family: 'Apercu Pro', sans-serif; font-size:18px; line-height:20px; width:150px; }
.goodbye-damage-ingredient-sub-line { display:block; font-family: 'Apercu Pro', sans-serif; font-size:14px; line-height:18px; margin-top:5px; color:#444;}

.pink-buy-button { width:70px!important; font-size:12px!important; margin-top:-5px; padding:5px!important;}


}


/* Responsive */

@media only screen and (max-width: 1200px) {
    
.hellodiane-pink-bg-container { background:url('../img/hellodiane/pinkbg.gif');  width:100%; }
.hellodiane-pink-bg-content-container { width:100%; margin:0 auto; }

h1, h2 { padding-left:20px; padding-right:20px; }

.revives-flat-hair-content-container { width:90%; margin:0 auto; }

.revives-flat-hair-list-item-container { width:320px; margin:0 auto; }

.revives-flat-hair-list-item { float:left; width:140px; padding-left:10px; padding-right:10px; margin:20px auto; position:relative; }

.revives-flat-hair-list-item-1-text { position:absolute; font-weight:bold; text-align:center; bottom:33px; left:27px; font-family: 'Apercu Pro', sans-serif; font-size:16px; line-height:18px;}
.revives-flat-hair-list-item-2-text { position:absolute; font-weight:bold; text-align:center; bottom:45px; left:22px; font-family: 'Apercu Pro', sans-serif; font-size:16px; line-height:18px;}
.revives-flat-hair-list-item-3-text { position:absolute; font-weight:bold; text-align:center; bottom:45px; left:25px; font-family: 'Apercu Pro', sans-serif; font-size:16px; line-height:18px;}

.mobile-left-padding-for-item-3 { padding-left:80px; margin-top:-20px; }
.hellodiane-green-bg-container { background-color:#eff8ff; background:url('../img/hellodiane/goodbye-damage/blue-bg.gif'); width:100%; padding:40px 0;}

.hellodiane-power-packed-container { width:90%; margin:0 auto; }
.hellodiane-power-packed-col-left { width:90%; float:none; margin:0 auto; } 
.hellodiane-power-packed-col-right { width:90%; float:none; margin:10px auto } 
.hellodiane-power-packed-col-left { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:26px; line-height:30px; }


.tick-container { width:80%; margin:20px auto;}
.tick-item { float:none; width:100%; margin:15px auto; padding-left:10px; margin-right:0; margin-bottom:0; font-size:18px; line-height:24px; position:relative; } 
.tick-item::before { 
    content:' ';
    width:30px;
    height:30px;
    background-image: url("../img/hellodiane/tick.gif");
    background-size:cover;
    position:absolute;
    left:-30px;
}
.x-container { width:80%; margin-top:-5px; margin-left:auto; margin-right:auto; margin-bottom:10px;}
.x-item { float:none; width:100%; margin:15px auto; padding-left:10px; margin-right:0; margin-bottom:0;  font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; line-height:24px; position:relative; } 
.x-item::before { 
    content:' ';
    width:30px;
    height:30px;
    background-image: url("../img/hellodiane/x.gif");
    background-size:cover;
    position:absolute;
    left:-30px;
}
.hellodiane-power-packed-bg-container { background:#ffeec2; width:100%; padding-top:40px; padding-bottom:40px; }

.goodbye-damage-product-content-container { width:90%; margin:40px auto; }

.goodbye-damage-product-content-col { width:100%; float:none; margin:20px auto; }

.goodbye-damage-content-product-img { position:relative; }

.goodbye-damage-content-blue-box { border:2px solid #9dc3e6; padding:20px; }

.goodbye-damage-content-blue-box p { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; line-height:24px; }

.hellodiane-goodbye-damage-scent { position:absolute; -webkit-text-stroke: 6px #00b050; color: #fff; paint-order: stroke fill; font-size:22px; line-height:24px; font-family: 'Salty Cheese'; font-weight: normal; text-align:center; padding:10px; top:-25px; right:-20px; transform: rotate(4deg); }

.revives-flat-hair-title { width:320px; height:auto;  font-size:20px; line-height:24px; padding-top:0px; padding-left:10px; text-align:center; margin:0 auto 20px auto;}    

.hair-study-disclaimer { text-align:center; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-size:12px; line-height:16px; display:block; }

.goodbye-damage-feature-title {  width:320px; height:auto;  font-size:20px; line-height:24px; padding-top:0px; padding-left:10px; text-align:center; margin:0 auto 20px auto;}    

.acid-heat-care-bg-container { width:100%; background:#def5ff; padding-top:40px; padding-bottom:40px;} 
.acid-heat-care-container { width:100%; margin:0 auto; }
.to-repair { display:block; margin-bottom:30px; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; line-height:22px;}
.acid-heat-care-col-left { float:none; margin:10px auto; width:150px; }
.acid-heat-care-col-left img { width:100px; height:100px; margin-top:-20px;}
.acid-heat-care-col-right { float:none; width:320px; margin:10px auto; }
.heat-based-repair-illustration { width:90%; height:auto; padding:10px; margin-bottom:10px;  }

.hellodiane-how-to-use-container { width:90%; margin:20px auto; }
.hellodiane-how-to-use-bg-container { width:100%; background:#f0f0f0; padding-top:40px; padding-bottom:40px;} 

.point-text { padding-top:5px; padding-right:30px; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:16px; overflow:hidden; }

.circle {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  padding: 15px;
  background: #ffbd33;
  color: #fff;
  font-size:22px;
  text-align: center;
  float:left;
  margin-right:15px;
  margin-bottom:10px;
}

.hellodiane-lineup-container { width:320px; margin:20px auto; }
.hellodiane-product-detail-lineup-col { float:left; width:106.666666666666667px; margin:20px auto; text-align:center;}
.hellodiane-product-detail-lineup-col img { max-width:80%; margin:0 auto;}
.hellodiane-product-detail-lineup-col p { font-family: 'Apercu Pro', sans-serif;font-size:17px; line-height:20px; font-weight:600; margin-top:15px; margin-bottom:5px; }
.ml { font-family: 'Apercu Pro', sans-serif; font-size:14px; display:block;margin-top:0; margin-bottom:15px; font-weight:400; }

.or { position:relative; }
.or::after { position:absolute; content:''; background:url('../img/hellodiane/goodbye-damage/or.png'); background-size:contain; width:50px; height:50px; right:auto; left:137px; top:30px; }

.pair-with { position:relative; }
.pair-with::after { display:none;  }
.pair-with-mobile { width:140px; height:auto; margin:0 auto; }

.treatment-product-spacing { padding-left:80px; }

.hellodiane-product-detail-lineup-others-container { width:80%; margin:80px auto; }

 }