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

.hellodiane-pink-bg-container { background:url('../img/hellodiane/pinkbg.gif');  width:100%; }
.hellodiane-pink-bg-content-container { width:800px; margin:0 auto; }

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 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: bold; 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{ text-align:center; float:left; width:520px; padding:40px 20px; }
.hellodiane-about-col-right { text-align:center; float:left; width:520px; padding:40px 60px; }
.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; }


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

.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'); padding-left:20px; margin-left:0; margin-right:20px;width:140px; height:51px; background-size:cover; }
.bubble-design-2 { background:url('../img/hellodiane/bubble2.gif'); padding-left:20px; margin-left:20px; margin-right:20px;width:150px; height:51px; background-size:cover; }
.bubble-design-3 { background:url('../img/hellodiane/bubble3.gif');padding-left:25px;  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'); padding-left:22px; margin-left:40px; margin-right:20px;width:130px; height:51px; background-size:cover; }

.tick-container { width:600px; margin:40px auto 20px 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;
}

.acid-heat-care-img { width:350px; height:auto; margin:20px auto }
.acid-heat-care-container { width:650px; margin:60px 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 #eee; }

.hellodiane-green-bg-container { background-color:#effffa; background:url('../img/hellodiane/green-bg.gif'); width:100%; padding:60px 0 80px 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: bold; 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; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}
.hellodiane-ingredients-col-mid span { font-family: 'Apercu Pro', sans-serif; font-weight: bold; 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; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}
.hellodiane-ingredients-col-right span { font-family: 'Apercu Pro', sans-serif; font-weight: bold; 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; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}

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

.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; text-align:center; }

.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; text-align:left; }

.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:10px; font-size:18px; line-height:26px;}
.bubble-design-1 { background:url('../img/hellodiane/bubble1.gif'); width:160px; height:auto; padding-left:0; padding-right:0; margin:10px 0;  background-size:cover; }
.bubble-design-2 { background:url('../img/hellodiane/bubble2.gif'); width:160px; height:auto; padding-left:0; padding-right:0; margin:10px 0;  background-size:cover; }
.bubble-design-3 { background:url('../img/hellodiane/bubble3.gif'); width:160px; height:auto; padding-left:0; padding-right:0; margin:10px 0;  background-size:cover; }
.bubble-design-4 { background:url('../img/hellodiane/bubble4.gif'); width:160px; height:auto; padding-left:0; padding-right:0; margin:10px 0;  background-size:cover; }

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

.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; top:-45px; width:80px; height:auto; 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; top:-25px; left:0; width:80px; height:auto; 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:-25px; }

.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; }
    
    .acid-heat-care-img { width:320px; margin:20px auto 40px auto; }
    
}