/* New */

.desktop { display:block; }

.mobile { display:none; }

.clearfix { clear:both; }

.margin-top-20px { margin-top:20px; }
.margin-top-40px { margin-top:40px; }

.theme-light_btn { color:#fff; }

.btn-margin-bottom-10px { display:block; margin-bottom:10px; }

/* New - Index */

.index-slide-container { height:100%; }

.white-img-background { background:#fff; border-radius:10px; padding:20px; text-align:center!important; }

.img-responsive { max-width:100%; }

.social-media-index-icon { width:60px; height:60px; margin:20px auto;}

.social-media-text { font-size:20px; display:inline-block; margin-top:15px;}

.news-carousel a { transition:0.3s; }
.news-carousel a:hover { opacity:0.6; }

.carousel-slide-pic img, .carousel-descripation { max-width:100%; padding-left:15px; padding-right:15px; }


#article-slider { padding-left:60px; padding-right:60px; }



/* Resize Images on Index */

.resize-sheet { height:200px; width:auto; }
.resize-water { height:230px; width:auto; }
.resize-makeup-remover { height:225px; width:auto; }
.resize-foaming-whip { height:225px; width:auto; }

.max-width-sheet { width:615px; margin:0 auto; }
.max-width-water { width:410px; margin:0 auto; }


.width-2-products { width:700px; margin:0 auto; }


@media only screen and (min-width: 769px) and (max-width: 1200px) {
    .margin-top-20px { margin-top:40px; }
}


@media only screen and (max-width: 850px) {
    .max-width-sheet, .max-width-water { width:100%;  }
    .resize-sheet{ height:auto; width:90%; max-width:90%; margin-left:5%; }
    .resize-water { height:auto; width:75%; max-width:75%; margin-left:12.5%; }
    .resize-makeup-remover, .resize-facial-wash, .resize-foaming-whip { height:auto; width:auto; }
    .width-2-products { width:100%; }
    
}

@media only screen and (max-width: 768px) {
    
.desktop { display:none; }


}


/* Footer */

.resize-footer-drop { width:200px; height:auto; max-width:200px;  margin-top:-30px; margin-bottom:20px; display:block;}

@media only screen and (max-width: 1000px) {
    
.resize-footer-drop { width:300px; position:relative; margin:0 auto 60px auto; display:block;}  

}

@media only screen and (max-width: 768px) {
    
.footer-margin-bottomn-spacing { margin-bottom:1rem !important; }
.reduce-mobile-spacing { margin-top:-18px; }

}

/* New Responsive */

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

.desktop { display:none; }

.mobile { display:block; }
    
}

/* Concept */

.concept__logo {
  margin-top: 1.4rem;
  width: 18rem;
  padding:30px;
}

.concept-contents {  margin-left:25%; margin-right:25%; }

.desktop-line-spacing-for-brand-description { display:block; }

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

    .desktop-line-spacing-for-brand-description { display:none; }

}


@media only screen and (min-width: 769px) and (max-width: 1400px) {

  .concept-contents { margin-left:18%; margin-right:18%;}
}


@media only screen and (max-width: 768px) {
    .concept__logo {
    order: 2;
    margin:0 auto 20px auto;
    width: 100%;
  }
  .concept-contents { width:90%; margin-left:5%; margin-right:5%; margin-top:-30px;}
}

.droplogo {
  width: 100%;
  position: relative;
  left: -0.7rem;

}
.droplogo__img img {
  width: 100%;
  max-width:100%;
}

.droplogo__txt img {
  width: 70%;
  margin-top:-30px;
  margin-left:-10px;
}

.droplogo__txtwrap {
  margin-top: 1.1rem;
}
@media only screen and (max-width: 768px) {
  .droplogo__txtwrap {
    margin-top: 2.4rem;
  }
}

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

.droplogo__txt:nth-child(1) {
  width: 72.8%;
  margin-left: 1.8rem;
}
}

@media only screen and (max-width: 768px) {
  .droplogo__txt:nth-child(1) {
    margin-left: 8.9%;
  }
}


@media only screen and (max-width: 768px) {
  .droplogo__img img {
  width: 80%;
  margin-left:15%; 
  margin-right:5%;
  margin-top:40px;
}

.droplogo__txt img {
   width: 70%;
  margin-left:20%; 
  margin-top:-40px;
}
}

/* Makeup Remover & Micellar Cleansing Water & Eye Makeup Remover & Cleansing Oils */

.wipes-parallax-banner-container { width:100%; 
  background-image: url("../images/product/makeup_remover_cleansing_sheets_banner_desktop.webp");
  min-height: 600px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.water-parallax-banner-container { width:100%; 
  background-image: url("../images/product/micellar_cleansing_water_banner_desktop.webp");
  min-height: 600px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.eye-makeup-remover-parallax-banner-container { width:100%; 
  background-image: url("../images/product/eye_makeup_remover_banner_desktop.webp");
  min-height: 600px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.foaming-whip-parallax-banner-container { width:100%; 
  background-image: url("../images/product/foaming_whip_banner_desktop.webp");
  min-height: 600px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cleansing-oils-parallax-banner-container { width:100%; 
  background-image: url("../images/product/cleansing-oils/cleansing_oils_banner_desktop.jpg");
  min-height: 600px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.add-new-pink { position:relative; }
.add-new-pink::before { position:absolute; content:'NEW'; background:#ec578f; color:#fff; padding:5px 8px; font-size:13px; left:-54px; top:-3px; border-radius:20px; }

.add-new-yellow { position:relative; }
.add-new-yellow::before { position:absolute; content:'NEW'; background:#f6b72a; color:#fff; padding:5px 8px; font-size:13px; left:-54px; top:-4px; border-radius:20px; }


@media only screen and (max-width: 768px) {
    .add-new-pink { display:inline-block; width:auto;}
    .add-new-pink::before {  right:-54px; left:auto; top:-4px; }
    .add-new-yellow { display:inline-block; width:auto;}
    .add-new-yellow::before {  right:-54px; left:auto; top:-4px; }
}


.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.product-video-container { width:1000px; max-width:100%; margin:40px auto 180px auto;}

.cleansing-water-blue-background-container {
    margin-top:-40px; margin-bottom:60px; background: rgba(236, 244, 247, 1); 
    width:100%; padding-top:40px; padding-bottom:40px; padding-left:40px; padding-right:40px;
    display:block;
}

@media only screen and (max-width: 768px) {
    
    .cleansing-water-blue-background-container {
    margin-top:40px;
}

    .product-video-container { width:100%; margin:10px auto 110px auto;}
}

/* Cleansing Oils */

.clearfix-cleansing-oil { clear:both; margin-bottom:30px; }

.cleansing-oil-feature-container { width:800px; margin:30px auto; }
.cleansing-oil-feature-left-img { float:left; width:350px; margin-right:100px; }
.cleansing-oil-feature-right-img { float:left; width:350px; }

.cleansing-oil-feature-left-img img, .cleansing-oil-feature-right-img img { width:100%; max-width:100%; }

.superior-cleansing-ability-bottom-info { padding:20px 30px; }

.cleansing-oil-illustration-img { width:600px; margin:20px auto; }

.serum-tag { background-color:#c9b79e; }
.serum-txt { color:#af997b; }

.deep-clear-tag { background-color:#cf8f67; }

.samples-oil-cleanser-container { width:600px; margin:60px auto 20px auto; }
.samples-oil-cleanser-info-title { text-align:center; background-color:#c9b79e; color:#fff; padding:10px; font-weight:bold; font-size:20px; display:block; margin:20px auto; }

.product-video-2-column-container { width:1000px; margin:60px auto; }
.product-video-2-column { float:left; width:450px; margin-left:25px; margin-right:25px;}

.sub-title-description { background:#f9f3e9; color:#000; padding:10px; text-align:center; margin-top:-30px; display:block; width:70%; margin-bottom:50px; }

.cleansing-oil-product-title { font-size:26px; font-weight:bold; display:block; margin-bottom:30px; }



@media only screen and (max-width: 1200px) {
.sub-title-description { margin-top:-15px; width:90%; margin-bottom:30px; }
}

@media only screen and (max-width: 900px) {
.cleansing-oil-feature-container { width:100%; margin:30px auto; }
.cleansing-oil-feature-left-img { float:none; width:90%; margin:20px auto; }
.cleansing-oil-feature-right-img { float:none; width:90%; margin:20px auto;  }
.cleansing-oil-illustration-img { width:90%; }
.samples-oil-cleanser-container { width:90%; margin:20px auto; }

}

@media only screen and (max-width: 500px) {
.video-container video {
    width:320px;
    height:320px;
}
}