@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;
}


.promotion-period-bg {     background-image: linear-gradient(123deg, #faf6e0 25%, #cde9e1 25%, #cde9e1 50%, #faf6e0 50%, #faf6e0 75%, #cde9e1 75%, #cde9e1 100%);
    background-size: 23.85px 36.72px; width:100%; padding-top:20px; padding-bottom:20px; text-align:center;}
    
.section-title-text { font-family: 'Apercu Pro', sans-serif; font-style: bold; font-weight:bold; font-size:26px; line-height:30px; position:relative; -webkit-text-stroke: 4px #fff;
    color: #000;
    paint-order: stroke fill; }

.lucky-draw-bg {     background-image: linear-gradient(123deg, #ffeded 25%, #ffded0 25%, #ffded0 50%, #ffeded 50%, #ffeded 75%, #ffded0 75%, #ffded0 100%);
    background-size: 23.85px 36.72px; width:100%; padding-top:20px; padding-bottom:20px; text-align:center;}
    
.sub-title { font-family: 'Apercu Pro', sans-serif; font-weight:bold; font-size:24px; line-height:30px; margin:20px auto 40px auto; position:relative;  }
.sub-title::after { position:absolute; bottom:-10px; width: 200px;
  height: 3px; 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;  }

.terms { font-family: 'Apercu Pro', sans-serif; font-size:14px; line-height:18px; padding-top:10px; border-top:1px solid #ccc; margin-bottom:20px;} 

.hellodiane-participate-container { background:#fffef7; width:100%; border-top:1px solid #ddd; }
.hellodiane-participate-content-container { width:600px; margin:0 auto;  padding-bottom:30px;}


@media only screen and (max-width: 950px) {
    .hellodiane-participate-content-container { width:90%; margin:0 auto;  padding-bottom:30px;}
}


.point-text { padding-top:17px; padding-right:30px; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:16px; overflow:hidden; }
.point-text-2-lines { padding-top:8px; 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;
}

.giveaway-text-link { color:#0070c0; text-decoration:underline; transition:0.3s;}
.giveaway-text-link:hover { color:#0070c0; text-decoration:none; opacity:0.8;}

.pink-button { background:#EB5394; padding:12px 22px 13px 22px; 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:20px; border-radius:20px; transition: box-shadow 0.3s ease-in-out;}
.pink-button:hover { box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);  }
.join-info { font-family: 'Apercu Pro', sans-serif; font-size:14px; line-height:18px; margin:20px auto;  }

.orangetxt { color:#ff8400; }
.hellodiane-lucky-draw-container { background:#fff7fd; width:100%; border-top:1px solid #ddd; }
.hellodiane-lucky-draw-content-container { width:1000px; margin:0 auto; }

.address-title { font-family: 'Apercu Pro', sans-serif; font-size:16px; font-weight:bold; line-height:20px; margin-bottom:10px; border-bottom:1px solid #ccc; padding-bottom:10px; }

.submissionFormBox { position:relative; width:900px; height:auto; padding-top:40px; padding-bottom:40px; border:1px solid #ccc; margin:60px auto; }

#closeButton { position:absolute; top:30px; right:30px; color: #EB5394;
  font-size: 40px;
  font-weight: bold;
  transition:0.3s; cursor:pointer;}
  
#closeButton:hover { opacity:0.6; }

.lucky-draw-container { width:1000px; margin:20px auto 0 auto; padding-bottom:100px; }
.lucky-draw-col { margin-left:25px; margin-right:25px; width:450px; float:left; text-align:center}
.lucky-draw-col span { position:relative; font-family: 'Apercu Pro', sans-serif; font-style: bold; font-size:20px; line-height:24px; padding:10px; background:#fff; border:1px solid #ccc; display:block; margin-bottom:20px;}
.lucky-draw-col p { padding-left:10px; padding-right:10px; }
.lucky-draw-col img { margin:0 auto 20px auto }

.tumbler {  margin:0 auto 20px auto; position:relative; }
.foldable-bag {  margin:0 auto 20px auto; position:relative; }

.tumbler-stock {border-radius:35px; position:absolute; top:200px; right:40px; content:'Stocks Available'; padding:20px 10px;background:#c64950; color:#fff; font-family: 'Apercu Pro', sans-serif; font-size:14px;}
.foldable-bag-stock {border-radius:35px;  position:absolute; top:200px; right:25px; content:'Stocks Available'; padding:20px 10px;background:#c64950; color:#fff; font-family: 'Apercu Pro', sans-serif; font-size:14px;}

.lucky-draw-title { width:auto; height:40px; }

.spenders-prize-title { width:auto; height:40px; }

@media only screen and (max-width: 1200px) {
    
.hellodiane-lucky-draw-content-container { width:90%; margin:0 auto; }

.lucky-draw-container { width:90%; margin:20px auto 0 auto; padding-bottom:100px; }
.lucky-draw-col { margin:10px auto; width:100%; float:none; text-align:center}

.tumbler {  margin:0 auto 20px auto; position:relative; }
.foldable-bag { margin:0 auto 20px auto; position:relative; }

.tumbler-stock {border-radius:35px; position:absolute; top:200px; right:-40px; content:'Stocks Available'; padding:20px 10px;background:#c64950; color:#fff; font-family: 'Apercu Pro', sans-serif; font-size:14px;}
.foldable-bag-stock {border-radius:35px;  position:absolute; top:200px; right:-35px; content:'Stocks Available'; padding:20px 10px;background:#c64950; color:#fff; font-family: 'Apercu Pro', sans-serif; font-size:14px;}

.submissionFormBox { position:relative; width:90%; height:auto; padding-top:20px; padding-bottom:20px; border:1px solid #ccc; margin:40px auto; }

#closeButton { position:absolute; top:10px; right:10px; }
  
}

.hellodiane-spenders-prizes-container { background:#f1fffe; width:100%; border-top:1px solid #ddd; }
.hellodiane-spenders-prizes-content-container { width:1000px; margin:0 auto; }

.spenders-prizes-bg {     background-image: linear-gradient(123deg, #b9fef0 25%, #88ecd8 25%, #88ecd8 50%, #b9fef0 50%, #b9fef0 75%, #88ecd8 75%, #88ecd8 100%);
    background-size: 23.85px 36.72px; width:100%; padding-top:20px; padding-bottom:20px; text-align:center;}
    
.spenders-prizes-container { width:1000px; margin:0 auto; padding-bottom:20px;}
.spenders-prizes-col { margin-left:25px; margin-right:25px; width:450px; float:left; text-align:center; position:relative;}
.spenders-prizes-col span { font-family: 'Apercu Pro', sans-serif; font-style: bold; font-size:20px; line-height:24px; padding:10px; background:#fff; border:1px solid #ccc; display:block; margin-bottom:20px;}
.spenders-prizes-col p { padding-left:10px; padding-right:10px; }    
    

@media only screen and (max-width: 1200px) {
 
 .hellodiane-spenders-prizes-content-container { width:90%; margin:0 auto; }

.spenders-prizes-bg {     background-image: linear-gradient(123deg, #b9fef0 25%, #88ecd8 25%, #88ecd8 50%, #b9fef0 50%, #b9fef0 75%, #88ecd8 75%, #88ecd8 100%);
    background-size: 23.85px 36.72px; width:100%; padding-top:20px; padding-bottom:20px; text-align:center;}
    
.spenders-prizes-container { width:90%; }
.spenders-prizes-col { margin:0 auto; width:100%; float:none; text-align:center; position:relative;}
.spenders-prizes-col span { font-family: 'Apercu Pro', sans-serif; font-style: bold; font-size:20px; line-height:24px; padding:10px; background:#fff; border:1px solid #ccc; display:block; margin-bottom:20px;}
.spenders-prizes-col p { padding-left:10px; padding-right:10px; }    
    
}
    
.prize-and-brand-detail-container { width:500px; margin:40px auto 20px auto; }    
.prize-and-brand-detail-col { position:relative; float:left; margin-left:10px; margin-right:10px; width:107px; height:90px;border-radius:35px; background:#fff; border:1px solid #ccc; padding:10px 10px 40px 10px;  text-align:center;}    
.prize-and-brand-detail-col img { display:block; margin:0 auto;}
.prize-and-brand-detail-col p { position:absolute; padding:10px 0; bottom:-35px; width:120px; margin-left:-60px; left:50%; font-family: 'Apercu Pro', sans-serif; font-size:16px; font-weight:bold;  border-radius:20px; }    

.green-shade-1 { background:#34c2a5;  color:#fff;}
.green-shade-2 { background:#19a834;  color:#fff;}
.green-shade-3 { background:#0e8324;  color:#fff;}

.shopee-resize { width:80%; padding-top:30px;}
.tiktok-resize { width:95%; padding-top:31px;}

@media only screen and (max-width: 1200px) {
 
.prize-and-brand-detail-container { width:90%; margin:40px auto 20px auto; }    
.prize-and-brand-detail-col { position:relative; float:none; margin:10px auto 60px auto; width:320px; height:auto;border-radius:35px; background:#fff; border:1px solid #ccc; padding:10px 10px 20px 10px;  text-align:center;}    
.shopee-resize { width:auto; padding-top:0;}
.tiktok-resize { width:auto; padding-top:0;}
.prize-and-brand-detail-col p { position:absolute; padding:10px auto; bottom:-35px; width:320px; margin-left:-160px; left:50%; font-family: 'Apercu Pro', sans-serif; font-size:16px; font-weight:bold;  border-radius:20px; }    

}


.smaller-txt { font-family: 'Apercu Pro', sans-serif; font-style: bold; font-size:14px; line-height:18px; margin-top:10px; padding-left:10px; padding-right:10px;}
h1 { text-align:center; font-family: 'Apercu Pro', sans-serif; font-style: bold; font-size:40px; line-height:46px; position:relative; 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-guaranteed { padding-top:40px; padding-left:40px; padding-right:40px; padding-bottom:10px; }

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

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

.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; }

@media only screen and (max-width: 1200px) {
    .hellodiane-content-container { width:90%; margin:0 auto; position:relative;}
}


.hellodiane-about-col-right { margin-top:50px; }

.promotion-period-section-title-container { position:relative; width:580px; margin:0 auto; }

.lucky-draw-section-title-container { position:relative; width:220px; margin:0 auto; }

.spenders-prizes-section-title-container { position:relative; width:300px; margin:0 auto; }

.calendar-icon { position:absolute; top:-10px; left:-60px; width:100px; height:100px;}

.lucky-draw-icon { position:absolute; top:-40px; left:-120px; }

.spenders-prizes-icon { position:absolute; top:-60px; left:-100px; width:100px; height:100px; }

.delivered-to-doorstep { position:absolute; bottom:-60px; right:-80px; width:90px; height:71px;  }

.qna-icon { position:absolute; top:-50px; left:-60px; width:100px; height:100px; }

.retailers-icon { position:absolute; bottom:-40px; left:-80px;  }

.products-icon { position:absolute; top:-40px; left:-80px;  }

.sub-title-additional-line { display:block; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-size:16px }

.same-line { display:inline-block; }

.pinktxt { color:#EB5394 ; }

.hellodiane-giveaway-container { padding-top:20px; padding-bottom:60px; }


.participating-retailers-bg {     background-image: linear-gradient(123deg, #ffe3fd 25%, #ffc3fb 25%, #ffc3fb 50%, #ffe3fd 50%, #ffe3fd 75%, #ffc3fb 75%, #ffc3fb 100%);
    background-size: 23.85px 36.72px; width:100%; padding-top:20px; padding-bottom:20px; text-align:center;}
    
.participating-retailers-section-title-container { position:relative; width:400px; margin:0 auto; }
.hellodiane-participating-retailers-container { background:#fff; width:100%; border-top:1px solid #ddd;  padding-top:20px; padding-bottom:60px;  }
.hellodiane-participating-retailers-content-container { width:1000px; margin:0 auto; }
.participating-retailers-bg-container { width:700px; margin:20px auto 0 auto; padding-bottom:20px; }


.participating-retailers-container { width:750px; margin:20px auto; text-align:center; }
.participating-retailers-col { width:200px; margin:0 25px; float:left;}
.participating-retailers-col img {display:block; margin:0 auto;}
.participating-retailers-col span { background:#000; color:#fff; padding:10px 20px; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-size:16px; display:block; margin-top:20px; margin-bottom:10px; text-align:center;}

.schedule-table { width:1000px; margin:40px auto; }

#participating-retailers { height:60px; display:block; background:#f1fffe; }

@media only screen and (max-width: 1200px) {
    #participating-retailers { height:50px;}
    .delivered-to-doorstep { position:absolute; bottom:-60px; right:-60px; width:70px; height:55px;  }
    .participating-retailers-section-title-container { position:relative; width:80%; margin:0 auto; }
.hellodiane-participating-retailers-container { background:#fff; width:100%; border-top:1px solid #ddd;  padding-top:20px; padding-bottom:60px;  }
.hellodiane-participating-retailers-content-container { width:90%; margin:0 auto; }
.participating-retailers-bg-container { width:90%; margin:20px auto 0 auto; padding-bottom:20px; }


.participating-retailers-container { width:90%; margin:20px auto; text-align:center; }
.participating-retailers-col { width:90%; margin:0 25px; float:none;}

.schedule-table { width:90%; margin:40px auto; }

.calendar-icon {  top:auto; bottom:-75px; left:-30px; width:70px; height:70px;}

.lucky-draw-icon {  top:-40px; left:-70px;  width:80px; height:80px;}

.lucky-draw-title, .spenders-prize-title { padding-left:10px;}

.spenders-prizes-icon {  top:-60px; left:-80px; width:80px; height:80px; }



.qna-icon { top:-50px; left:0;  width:80px; height:80px; }

.retailers-icon { bottom:-40px; left:-30px;  width:80px; height:80px; }

.products-icon {  top:-40px; left:-30px;  width:80px; height:80px;}

}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
  font-family: 'Apercu Pro', sans-serif;
  border: 1px solid #ddd;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
  background:#1db1d3;
  color:#fff;
}

@media screen and (max-width: 1100px) {
.schedule-table { width:100%; }
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-top:none;border-left:none;border-right:none;
    border-bottom: 1px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
      border-top:none;border-left:none;border-right:none;
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}


.participating-products-bg {     background-image: linear-gradient(123deg, #ffeabf 25%, #ffd888 25%, #ffd888 50%, #ffeabf 50%, #ffeabf 75%, #ffd888 75%, #ffd888 100%);
    background-size: 23.85px 36.72px; width:100%; padding-top:20px; padding-bottom:20px; text-align:center;}
    
.participating-products-section-title-container { position:relative; width:400px; margin:0 auto; }
.hellodiane-participating-products-container { background:#fff; width:100%; border-top:1px solid #ddd;  padding-top:20px; padding-bottom:60px;  }
.hellodiane-participating-products-content-container { width:1200px; margin:0 auto; }
.participating-products-bg-container { width:1200px; margin:20px auto 0 auto; padding-bottom:20px; }


.participating-products-container { width:1200px; margin:20px auto; text-align:center; }
.participating-products-col { width:200px; margin:0 25px; float:left;}
.participating-products-col img {display:block; margin:0 auto;}
.participating-products-col span { background:#000; color:#fff; padding:10px 20px; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-size:16px; display:block; margin-top:20px; margin-bottom:10px; text-align:center;}


.hellodiane-qna-container { background:#f3faff; width:100%; border-top:1px solid #ddd; }
.hellodiane-qna-content-container { width:1000px; margin:0 auto; }

.qna-container { width:700px; margin:20px auto 0 auto; padding-bottom:20px; }

.qna-bg {     background-image: linear-gradient(123deg, #e8f6ff 25%, #c6e9ff 25%, #c6e9ff 50%, #e8f6ff 50%, #e8f6ff 75%, #c6e9ff 75%, #c6e9ff 100%);
    background-size: 23.85px 36.72px; width:100%; padding-top:20px; padding-bottom:20px; text-align:center;}
    
    
.qna-box { background:#fff; width:660px; padding:20px; margin-bottom:20px; border-top-left-radius:20px; border-bottom-right-radius:20px;}

.question { width:580px; padding-left:20px; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:16px;   position:relative; margin:20px auto 30px auto;color:#EB5394; }
.question::before { position:absolute; top:-15px; left:-30px; content:''; width:50px; height:51px; background:url('../img/perfectbeauty/dry-shampoo/q.webp'); background-repeat:no-repeat; background-size:contain; }

.answer { width:580px; padding-left:20px;  font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:16px; position:relative; margin:20px auto 30px auto;}
.answer::before { position:absolute; top:-10px; left:-30px; content:''; width:50px; height:51px; background:url('../img/perfectbeauty/dry-shampoo/a.webp'); background-repeat:no-repeat; background-size:contain; }

.qna-bg-container { width:100%; padding-top:60px; padding-bottom:60px; background:#ecf8ff; border-top:1px solid #ddd;}
.qna-container img { padding-top:60px; margin-bottom:10px; }

.answer ul li { margin-left:-20px; }

.qna-section-title-container { position:relative; width:200px; margin:0 auto; }


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 600px; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.closeButton {
  color: #EB5394;
  float: right;
  font-size: 40px;
  font-weight: bold;
  transition:0.3s;
}

.closeButton:hover,
.closeButton:focus {
  opacity:0.6;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 1200px) {
.promotion-period-section-title-container { position:relative; width:90%; margin:0 auto; }

.lucky-draw-section-title-container { position:relative; margin:0 auto; }

.spenders-prizes-section-title-container { position:relative;  margin:0 auto; }

.qna-section-title-container { position:relative; width:90%; margin:0 auto; }
}

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

.hellodiane-ingredients-container { width:1200px; margin:0 auto; }
.hellodiane-ingredients-col-left { float:left; width:350px; margin-right:75px; text-align:center;  }
.hellodiane-ingredients-col-mid { float:left; width:350px; margin-right:75px; text-align:center;  }
.hellodiane-ingredients-col-right { float:left; width:350px; text-align:center;  }

.hellodiane-ingredients-col-left span { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:24px; line-height:30px; background:#ffbd33; color:#fff; border-top-left-radius:20px; border-bottom-right-radius:20px; padding:15px; margin:0 auto 20px auto; display:block}
.hellodiane-ingredients-col-mid span { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:24px; line-height:30px; background:#33d9ff; color:#fff; border-top-left-radius:20px; border-bottom-right-radius:20px; padding:15px; margin:0 auto 20px auto; display:block}
.hellodiane-ingredients-col-right span { font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:24px; line-height:30px; background:#f8998d; color:#fff; border-top-left-radius:20px; border-bottom-right-radius:20px; padding:15px; margin:0 auto 20px auto; display:block; }

.ingredients-img { margin:20px auto; width:300px; height:auto; }

.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-product-section-bg-container { background-color:#fffdf3; background:url('../img/hellodiane/product-bg.gif'); width:100%; padding:80px 0 100px 0; }

.hellodiane-product-section-container { width:1200px; margin:0 auto; }
.hellodiane-product-section-col { float:left; width:500px; margin:0 50px; position:relative; }

.hellodiane-goodbye-flat-title-backbox { background:#fff; border:1px solid #eee; width:500px; height:40px; position:absolute; left:-20px; top:20px;  transform: rotate(-1.5deg)}

.hellodiane-goodbye-flat-title { 
    background: #FFC548;
    background: linear-gradient(135deg,rgba(255, 197, 72, 1) 0%, rgba(176, 220, 197, 1) 50%, rgba(134, 212, 237, 1) 100%);
    font-family: 'Apercu Pro', sans-serif; font-size:30px; color:#fff; text-align:center; line-height:34px; width:500px; padding:10px 0; margin:0 auto 20px auto;
    position:relative; font-weight:600;
}

.hellodiane-goodbye-flat-scent { position:absolute; top:-30px; left:0; width:110px; transform: rotate(-4deg); }

.hellodiane-goodbye-flat-title::after { position:absolute; content:''; background:url('../img/hellodiane/goodbye-flat-icon.webp'); width:60px; height:60px; right:20px; top:-25px; z-index:3;}

.hellodiane-goodbye-flat-product1 { position:absolute; bottom:-66px; left:30px; font-family: 'Apercu Pro', sans-serif; font-size:15px; font-weight:600; text-align:center;}
.hellodiane-goodbye-flat-product2 { position:absolute; bottom:-66px; left:190px; font-family: 'Apercu Pro', sans-serif;font-size:15px; font-weight:600; text-align:center;}
.hellodiane-goodbye-flat-product3 { position:absolute; bottom:-47px; left:396px; font-family: 'Apercu Pro', sans-serif;font-size:15px; font-weight:600; text-align:center;}

.ml { font-family: 'Apercu Pro', sans-serif; font-size:13px; display:block;margin-top:3px; font-weight:400; }

.hellodiane-goodbye-damage-title-backbox { background:#fff; border:1px solid #eee; width:500px; height:50px; position:absolute; left:20px; top:-15px;  transform: rotate(2deg)}

.hellodiane-goodbye-damage-title { 
   background: #FBCCC2;
    background: linear-gradient(54deg,rgba(251, 204, 194, 1) 0%, rgba(247, 159, 147, 1) 37%, rgba(143, 212, 210, 1) 74%);
    font-family: 'Apercu Pro', sans-serif; font-size:30px; color:#fff; text-align:center; line-height:34px; width:500px; padding:10px 0; margin:0 auto 20px auto;
    position:relative;font-weight:600;
}

.hellodiane-goodbye-damage-scent { position:absolute; top:-30px; left:0; width:110px; transform: rotate(-4deg); }

.hellodiane-goodbye-damage-title::after { position:absolute; content:''; background:url('../img/hellodiane/goodbye-damage-icon.webp'); width:60px; height:60px; right:20px; top:-25px; }

.hellodiane-goodbye-damage-product1 { position:absolute; bottom:-47px; left:83px; font-family: 'Apercu Pro', sans-serif; font-size:15px; font-weight:600; text-align:center;}
.hellodiane-goodbye-damage-product2 { position:absolute; bottom:-47px; left:241px; font-family: 'Apercu Pro', sans-serif;font-size:15px; font-weight:600; text-align:center;}
.hellodiane-goodbye-damage-product3 { position:absolute; bottom:-47px; left:386px; font-family: 'Apercu Pro', sans-serif;font-size:15px; font-weight:600; text-align:center;}

.hellodiane-goodbye-flat-feature1 { position:absolute; bottom:-115px; width:490px; background:#cfecdc; border:2px dashed #62be8a; padding:5px; font-family: 'Apercu Pro', sans-serif; font-size:15px; text-align:center; }
.hellodiane-goodbye-flat-feature2 { position:absolute; bottom:-163px; width:115px; background:#cfecdc; border:2px dashed #62be8a; padding:5px; font-family: 'Apercu Pro', sans-serif; font-size:15px; text-align:center; }
.hellodiane-goodbye-flat-feature3 { position:absolute; bottom:-180px; left:175px; width:115px; background:#cfecdc; border:2px dashed #62be8a; padding:5px; font-family: 'Apercu Pro', sans-serif; font-size:15px; text-align:center; }
.hellodiane-goodbye-flat-cta-button { position:absolute; bottom:-260px; width:200px; left:50%; margin-left:-100px; height:auto; padding:8px; color:#fff; background:#00b050; border-radius:20px; font-family: 'Apercu Pro', sans-serif;font-size:18px; text-align:center; font-weight:600;  border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;}
    
.hellodiane-goodbye-damage-feature1 { position:absolute; bottom:-115px; width:490px; background:#c9e5ff; border:2px dashed #8ab6df; padding:5px; font-family: 'Apercu Pro', sans-serif; font-size:15px; text-align:center; }
.hellodiane-goodbye-damage-cta-button { position:absolute; bottom:-195px; width:200px; left:50%; margin-left:-100px; height:auto; padding:8px; color:#fff; background:#0070c0; border-radius:20px; font-family: 'Apercu Pro', sans-serif;font-size:18px; text-align:center; font-weight:600;  border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !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; }

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

.hellodiane-content-container { width:100%; margin:0 auto; position:relative;}
.hellodiane-yellow-bg-container { background:#fffcdc;  width:100%;}
.hellodiane-about-col-left { float:none; width:80%; padding:40px; margin:0 auto; }

.bubble-container { width:320px; position:relative; margin:30px auto; }
.bubble { float:left; width:160px; 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:10px; width:140px; height:auto; background-size:cover; }
.bubble-design-2 { background:url('../img/hellodiane/bubble2.gif'); margin:10px; width:140px; height:auto; background-size:cover; }
.bubble-design-3 { background:url('../img/hellodiane/bubble3.gif'); margin:10px; width:140px; height:auto; background-size:cover; }
.bubble-design-4 { background:url('../img/hellodiane/bubble4.gif'); margin:10px; width:140px; height:auto; background-size:cover; }

.hellodiane-about-col-right { float:none; width:100%; padding:0; margin-top:0; background:#ffeec2;}

.hellodiane-about-col-right-inner { width:80%; margin:0 auto; padding:40px; }

.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;
}

.acid-heat-care-container { width:100%; margin:40px 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-green-bg-container { padding:50px 0;}

.hellodiane-ingredients-container { width:100%; margin:0 auto; }
.hellodiane-ingredients-col-left { float:none; width:80%; margin:0 auto 40px auto; text-align:center;  }
.hellodiane-ingredients-col-mid { float:none; width:80%; margin:0 auto 40px auto; text-align:center;  }
.hellodiane-ingredients-col-right { float:none; width:80%; margin:0 auto; text-align:center;  }

.ingredients-img { margin:20px auto; width:300px; height:auto; }

.hellodiane-product-section-bg-container { background-color:#fffdf3; background:url('../img/hellodiane/product-bg.gif'); width:100%; padding:60px 0; }

.hellodiane-product-section-container { width:100%; margin:0 auto; }
.hellodiane-product-section-col { float:none; width:100%; margin:0 auto; position:relative; }
.hellodiane-product-section-col img { width:320px; margin:20px auto; }

.hellodiane-goodbye-flat-title-backbox { background:#fff; border:1px solid #eee; width:90%; height:40px; position:absolute; left:-20px; top:20px;  transform: rotate(-1.5deg)}

.hellodiane-goodbye-flat-title { 
    background: #FFC548;
    background: linear-gradient(135deg,rgba(255, 197, 72, 1) 0%, rgba(176, 220, 197, 1) 50%, rgba(134, 212, 237, 1) 100%);
    font-family: 'Apercu Pro', sans-serif; font-size:30px; color:#fff; text-align:center; line-height:34px; width:90%; padding:10px 0; margin:0 auto 20px auto;
    position:relative; font-weight:600;
}

.hellodiane-goodbye-flat-scent { position:absolute; padding:0; width:80px; height:auto; top:-45px; left:15px; transform: rotate(3deg); }

.hellodiane-goodbye-flat-title::after { position:absolute; content:''; background:url('../img/hellodiane/goodbye-flat-icon.webp'); width:60px; height:60px; right:10px; top:-25px; z-index:3;}

.hellodiane-goodbye-series-spacing-container { width:320px; margin:0 auto; position:relative; }

.hellodiane-goodbye-flat-product1 { bottom:-46px; left:6px; font-family: 'Apercu Pro', sans-serif; font-size:15px; font-weight:600; text-align:center;}
.hellodiane-goodbye-flat-product2 { bottom:-46px; left:106px; font-family: 'Apercu Pro', sans-serif;font-size:15px; font-weight:600; text-align:center;}
.hellodiane-goodbye-flat-product3 { bottom:-27px; left:242px; font-family: 'Apercu Pro', sans-serif;font-size:15px; font-weight:600; text-align:center;}

.ml { font-family: 'Apercu Pro', sans-serif; font-size:13px; display:block;margin-top:3px; font-weight:400; }

.hellodiane-goodbye-damage-title-backbox { background:#fff; border:1px solid #eee; width:90%; height:50px; position:absolute; left:20px; top:-15px;  transform: rotate(2deg)}

.hellodiane-goodbye-damage-title { 
   background: #FBCCC2;
    background: linear-gradient(54deg,rgba(251, 204, 194, 1) 0%, rgba(247, 159, 147, 1) 37%, rgba(143, 212, 210, 1) 74%);
    font-family: 'Apercu Pro', sans-serif; font-size:30px; color:#fff; text-align:center; line-height:34px; width:90%; padding:10px 0; margin:0 auto 20px auto;
    position:relative;font-weight:600;
}

.hellodiane-goodbye-damage-scent { position:absolute; padding:0; width:80px; top:-55px; left:0; transform: rotate(-4deg); }

.hellodiane-goodbye-damage-title::after { position:absolute; content:''; background:url('../img/hellodiane/goodbye-damage-icon.webp'); width:60px; height:60px; right:-10px; top:-30px; }

.hellodiane-goodbye-damage-product1 { position:absolute; bottom:-27px; left:40px; font-family: 'Apercu Pro', sans-serif; font-size:15px; font-weight:600; text-align:center;}
.hellodiane-goodbye-damage-product2 { position:absolute; bottom:-27px; left:141px; font-family: 'Apercu Pro', sans-serif;font-size:15px; font-weight:600; text-align:center;}
.hellodiane-goodbye-damage-product3 { position:absolute; bottom:-27px; left:237px; font-family: 'Apercu Pro', sans-serif;font-size:15px; font-weight:600; text-align:center;}

.hellodiane-goodbye-flat-feature1 { position:absolute; bottom:-100px; left:0; width:100%; background:#cfecdc; border:2px dashed #62be8a; padding:5px; font-family: 'Apercu Pro', sans-serif; font-size:14px; text-align:center; }
.hellodiane-goodbye-flat-feature2 { position:absolute; bottom:-163px; left:0; width:70px; background:#cfecdc; border:2px dashed #62be8a; padding:5px; font-family: 'Apercu Pro', sans-serif; font-size:14px; text-align:center; }
.hellodiane-goodbye-flat-feature3 { position:absolute; bottom:-196px; left:111px; width:70px; background:#cfecdc; border:2px dashed #62be8a; padding:5px; font-family: 'Apercu Pro', sans-serif; font-size:14px; text-align:center; }
.hellodiane-goodbye-flat-cta-button { position:absolute; bottom:-260px; width:200px; left:50%; margin-left:-100px; height:auto; padding:8px; color:#fff; background:#00b050; border-radius:20px; font-family: 'Apercu Pro', sans-serif;font-size:18px; text-align:center; font-weight:600;  border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;}
    
.hellodiane-goodbye-damage-feature1 { position:absolute; bottom:-84px; width:100%; background:#c9e5ff; border:2px dashed #8ab6df; padding:5px; font-family: 'Apercu Pro', sans-serif; font-size:14px; text-align:center; }
.hellodiane-goodbye-damage-cta-button { position:absolute; bottom:-149px; width:200px; left:50%; margin-left:-100px; height:auto; padding:8px; color:#fff; background:#0070c0; border-radius:20px; font-family: 'Apercu Pro', sans-serif;font-size:18px; text-align:center; font-weight:600;  border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;} 
    
    .hellodiane-product-section-title-container { width:100%; margin:40px auto 20px auto; }
}

/* Form */

.join-form-field-container { width:500px; margin:40px auto; position:relative;}

.join-form-field-col-left { float:left; width:150px; font-family: 'Apercu Pro', sans-serif; font-size:16px; padding:14px 0; margin-bottom:10px;}

.join-form-field-col-right { float:left; width:350px; font-family: 'Apercu Pro', sans-serif; font-size:16px; margin-bottom:10px;}

.text-field { font-family: 'Apercu Pro', sans-serif; background:#fff; border:1px solid #ccc; box-shadow:0 0 10px rgba(0, 0, 0, 0.1)!important; padding:14px; width:100%; border-radius:10px;}

.form-text { font-family: 'Apercu Pro', sans-serif; font-size:16px; margin:20px 0; display:block;}

/* Customize the label (the container) */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-family: 'Apercu Pro', sans-serif;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border:1px solid #aaa;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: #EB5394;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.announce-text { font-family: 'Apercu Pro', sans-serif; font-size:14px; display:block; margin-top:20px;}

@media only screen and (max-width: 950px) {
    .join-form-field-container { width:90%; margin:20px auto;}
    .join-form-field-col-left { float:none; width:100%; font-family: 'Apercu Pro', sans-serif; font-size:16px; padding:5px 0; margin-bottom:0;}
    .join-form-field-col-right { float:none; width:100%; font-family: 'Apercu Pro', sans-serif; font-size:16px; margin-bottom:10px;}
    .modal-content {width: 90%; }
    .qna-container {  width:100%; margin:0 auto 20px auto; padding-bottom:20px; }
    .qna-bg-container { padding-top:40px; padding-bottom:20px;}
.qna-box { background:#fff; width:80%; padding:20px; margin:20px auto; }

.question, .answer { width:85%; }
.qna-box-left::before, .qna-box-right::before { display:none; }

.qna-img-resize-on-mobile { width:80%; }
}


/* Buy Button */

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

.yellow-button-buy .yellow-button-buy-text {
  visibility: hidden;
  width: 200px;
  background-color: #fef762;
  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;
}

.yellow-button-buy .yellow-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 #fef762 transparent;
}

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

.yellow-buy-button { background:#ff8400; padding:12px 22px 13px 22px; opacity:1; transition: 0.6s; color:#fff; margin-top:20px; display:inline-block; cursor:pointer; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:20px; border-radius:20px; transition: box-shadow 0.3s ease-in-out;}
.yellow-buy-button:hover { box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);  }