/* Layout */

html, body { width:100%; height:100%; margin:0px; padding:0px; }

* {
  box-sizing: border-box;
}

p, span, div, ul, ol, li, h1, a { font-family: 'Noto Sans', sans-serif; }

h1 { font-weight:normal; margin:0; padding:0; font-size:26px;}

p, ul, ol, li { font-size:15px; }


.top-container, .container { width:1200px; margin:0 auto; }

.quiz-container, .browse-all-container, .privacy-policy-container, .terms-of-use-container { width:1200px; margin:0 auto; padding-top:120px; }

.special-care-container { width:530px; margin:0 auto; }

.nav {
    position: fixed;
    z-index: 99;
    width:100%;
    height:80px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1)!important;
}

.mobile { display:none; }

.mobile-only { display:none; }

.desktop { display:block; }

.desktop-tablet { display:block; }

.top { padding-top:80px; }

/* Nav and Logo */

.nav .container { width:1200px; margin:0 auto; position:relative;}

.logo { position:absolute; top:10px; left:30px; }

.nav-links { position:absolute; top:30px; right:330px;}

.active-link {  font-size:16px; color:#000; text-decoration:none; margin-right:30px; padding-bottom:5px; border-bottom:3px solid #e4007f;}

.link {  font-size:16px; color:#000; text-decoration:none; margin-right:30px; transition:0.3s;}

.link:hover {  opacity:0.6;}

.product-link {  font-size:14px; color:#000; text-decoration:none; display:block; margin-bottom:10px; width:160px; padding:10px;}

.product-link:hover {  background-color:#eee; }

.active { color:#e4007f; }

.social-links { position:absolute; top:30px; right:30px;}

.social-icon { display:inline-block; margin:0 3px; transition:0.3s; }

.social-icon:hover { opacity:0.6; }

.title { color:#e4007f; font-size:26px; position:relative; display:inline-block;  margin-bottom:20px;}

.title::before { background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(243,208,241,1) 50%, rgba(255,255,255,1) 100%); height:2px; bottom:-10px; left:-20%; width:140%; content:''; position:absolute;
}

.margin-top-20px { margin-top:20px; display:block; }
.margin-top-30px { margin-top:30px; display:block; }
.margin-top-60px { margin-top:60px; display:block; }
.margin-top-40px-bottom-20px { margin-top:40px; margin-bottom:20px; display:block; }
.margin-top-60px-bottom-20px { margin-top:60px; margin-bottom:20px; display:block; }

.margin-bottom-20px { margin-bottom:20px; display:block; }
.margin-bottom-30px { margin-bottom:30px; display:block; }
.margin-bottom-60px { margin-bottom:60px; display:block; }

.margin-top-60px-bottom-60px {  margin-top:60px; margin-bottom:60px; display:block;  }

.margin-top-60px-bottom-30px {  margin-top:60px; margin-bottom:30px; display:block;  }

.product-and-features-spacing { margin-top:60px; margin-bottom:30px; }

.content-img { margin:40px 20px; display:block; }

.photo-img { margin:40px 20px 15px 20px; display:block; }

.top-text-container { width:1000px; margin:60px auto 30px auto; }

.container-1000px { width:1000px; margin:0 auto; }

.container-800px { width:800px; margin:0 auto; }

.container-600px { width:600px; margin:0 auto; }

.container-agerange { width:600px; margin:0 auto; }

.container-consent { width:800px; margin:0 auto; padding:10px 50px; }

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

.container-520px { width:520px; margin:0 auto; }

.text-field { width:100%; padding:10px; border:1px solid #eee; font-size:14px;}

.form-text { font-size:15px; margin-top:20px; margin-bottom:5px; display:block; text-align:left;}

.consent-checkbox { float:left; }
.consent-text { float:left; margin-left:5px; text-align:left; font-size:12px; }
.consent-text-info { float:left; margin-left:-15px; margin-bottom:10px; text-align:left; font-size:12px; }

.container-subscribe { width:800px; margin:0 auto; padding:10px 50px; }
.subscribe-text { float:left; margin-left:5px; text-align:left; font-size:12px; }



/* Lineup Menu */

.nav-product-menu {
  position: relative;
  display: inline-block;
}

.nav-product-menu .nav-product-menu-text {
  visibility: hidden;
  position: absolute;
  z-index: 99;
  top: 100%;
  left: 0px;
  opacity: 0;
  transition: opacity 1s;
  
}

.nav-product-menu .nav-product-menu-background { 
 background-color: #fff;
 color:#000;
 text-align: left;
 padding: 10px;
 margin-top:24px;
 text-transform:none;
 z-index: 99;
 display:block;
 width:auto;
}

.nav-product-menu:hover .nav-product-menu-text {
  visibility: visible;
  opacity: 1;
}

/* Home */

.splide__arrow { margin-top:30px; }

/* Lineup */

.lineup { padding:10px; border:1px solid #eee; border-radius:10px; display:inline-block; margin:10px; transition:0.3s;}

.lineup:hover { opacity:0.6; }

.lineup img { width:180px; height:181px; }

.lineup span { display:block; margin-top:10px; color:#000; font-size:15px;}

/* Footer */

.footer { width:100%; background-color:#eee; margin-top:60px;}

.footer .container { padding:60px 0; }

.connect { width:500px; float:left; margin-right:60px;}

.social-link { float:left; margin-right:20px; trnasition:0.3s }

.social-link:hover { opacity:0.6; }

.social-link img { margin-top:-2px; margin-right:3px; }

.social-link span { color:#555; font-size:14px; }

.social-link a { text-decoration:none; }

.discover { width:600px; float:left;}

.footer-title { font-size:22px; display:block; margin-bottom:30px;}


.footer-link { text-decoration:none; display:block; margin-left:15px; margin-bottom:15px; color:#555; transition:0.3s; font-size:14px; position:relative;}

.footer-link::before { position:absolute; content:' '; height:3px; width:3px; background-color:#555; top:9px; left:-10px; border-radius:50%;}

.footer-lineup-link { margin-left:35px; text-decoration:none; display:block; margin-bottom:15px; color:#555; transition:0.3s; font-size:14px; position:relative;}

.footer-lineup-link::before { position:absolute; content:' '; height:3px; width:3px; background-color:#555; top:9px; left:-10px; border-radius:50%;}

.footer-link:hover, .footer-lineup-link:hover { opacity:0.6; }

.copyright { font-size:12px; }

.footer-brand-story { width:100px; margin-right:40px; float:left }

.footer-lineup { width:190px; margin-right:30px; float:left }

.footer-quiz { width:100px; float:left }

.footer-notice { width:100%; background-color:#111; padding:20px; text-align:center; transition:0.3s; font-size:13px; cursor:pointer; }

.footer-notice a {color:#fff!important; text-decoration:none!important; display:block; }
.footer-notice a:hover { opacity:1!important; }

.footer-notice:hover { opacity:0.7;}

/* Lineup pages */

.further-discovery-content-img { margin:20px; display:block } 

.top-text { font-size:24px; }

.functions-of-beauty-microbiome-title { color:#009cac; font-weight:bold; font-size:16px; display:block; margin-bottom:20px;}

.new-findings-title { background:#499dd7; border:1px solid #499dd7; width:500px; padding:20px; font-size:18px; color:#fff; margin:0 auto;}

.new-findings-content { border:1px solid #499dd7; width:500px; padding:20px; font-size:15px; margin:0 auto; position:relative;}

.beauty-microbiome-img { position:absolute; top:120px; right:-60px; }

.further-discovery-content-box { float:left; width:45%; border:1px solid #eee; padding:20px 20px 0 20px; margin:20px;  }

.program-container { margin-left:160px; }

.program { width:560px; float:left; margin:20px 10px; }

.balance-care-title, .acne-care-title, .moist-care-title, .vital-care-title, .brightening-care-title { width:515px; padding:20px; font-size:22px; color:#fff; text-align:center; }

.balance-care-title span, .acne-care-title span, .moist-care-title span, .vital-care-title span, .brightening-care-title span { display:block; font-size:15px; margin-top:5px;}

.balance-care-content { width:515px; padding:20px 20px 40px 20px; font-size:15px; }

.acne-care-content { width:515px; padding:20px; font-size:15px; }

.vital-care-content { width:515px; padding:20px; font-size:15px; }

.moist-care-content { width:515px; padding:20px 20px 39px 20px; font-size:15px; }

.brightening-care-content { width:515px; padding:20px; font-size:15px; }

.balance-care-content img, .acne-care-content img, .moist-care-content img, .vital-care-content img, .brightening-care-content img { float:left; margin-right:20px; }

.balance-care-title { background:#3fc1de; border:1px solid #3fc1de; }
.balance-care-content { border:1px solid #3fc1de; }

.acne-care-title { background:#fac03d; border:1px solid #fac03d; }
.acne-care-content { border:1px solid #fac03d; }

.moist-care-title { background:#ea9ca9; border:1px solid #ea9ca9; }
.moist-care-content { border:1px solid #ea9ca9; }

.vital-care-title { background:#c4aad5; border:1px solid #c4aad5; }
.vital-care-content { border:1px solid #c4aad5; }

.brightening-care-title { background:#c1c5cd; border:1px solid #c1c5cd; }
.brightening-care-content { border:1px solid #c1c5cd; }

.formulation { background:#eee; padding:10px; font-size:15px; border-radius:20px; display:block; margin:20px 0; text-align:center;}

.program-buy-button { background-color:#6e6e6e; color:#fff; text-decoration:none; border-radius:15px; padding:10px 50px 10px 40px; font-size:18px; text-transform:uppercase; transition:0.3s; margin:20px; display:inline-block; position:relative; cursor:pointer;}

.program-buy-button:hover, .quiz-button:hover, .home-quiz-button:hover { opacity:0.6; }

.program-buy-button::after {
    
  font-family: 'Material Icons';
  content: "\e5e1";
  position:absolute;
  top:12px;
  right:15px;
  font-size:20px;
  z-index:10;
  transition:0.3s;
  
}

.program-buy-button:hover::after {
    
  right:5;
  
}

.quiz-button { background-color:#6e6e6e; color:#fff; text-decoration:none; border-radius:15px; padding:10px 30px; font-size:16px; text-transform:uppercase; transition:0.3s; margin:20px; display:inline-block; position:relative; cursor:pointer; border:none;}

.home-quiz-button { background-color:#fff; color:#555; border:1px solid #555; text-decoration:none; border-radius:15px; padding:10px 30px; font-size:16px; text-transform:uppercase; transition:0.3s; margin:20px; display:inline-block; position:relative; cursor:pointer; }

.lineup-top-content-container { width:1160px; margin:30px auto; padding:40px 20px 20px 20px;
background: rgb(241,241,241);
background: linear-gradient(180deg, rgba(241,241,241,1) 0%, rgba(255,255,255,1) 60%);
}

.lineup-title { 
color:#e4007f; 
font-size:26px;
}

.lineup-headline { color:#000; font-size:16px; margin-top:10px; margin-bottom:30px; }

.cleansing-type { color:#000; border-radius:15px; padding:10px 20px; border:1px solid #e4007f; font-size:22px; display:inline-block; margin:30px auto; }

.product { width:30%; }

.product-overnight-refining-gel-mask { width:32%; } 

.product-allerdefense-bb { width:60%; }

.product-whitening-clear-jelly-essence {width:50%; }

.product-power-vital-solution, .product-vitalizing-cream {width:43%; }

.product-quiz { height:25%; width:auto; }

.product-title { color:#000; font-size:26px; }

.product-headline { color:#ea6484; font-size:16px; font-style: italic; margin:10px auto 20px auto;}

.product-description-list li { margin-bottom:20px; }

.disclaimer { font-size:12px; }

.allerdefense-bb-buy {
  position: relative;
  display: inline-block;
}

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

.allerdefense-bb-buy .allerdefense-bb-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 #ccc transparent;
}

.allerdefense-bb-buy:hover .allerdefense-bb-buy-text {
  visibility: visible;
  opacity: 1;
}

.allerdefense-bb-buy-link { background:#fafafa; border:1px solid #555; padding:10px 30px; font-size:16px; display:block; margin:15px 20px 0 20px; text-decoration:none; color:#555; }

.allerdefense-bb-buy-link:hover { opacity:0.6; }

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

/* Quiz */

.quiz-top-content-container { width:1160px; height:350px; margin:30px auto 20px auto;
background-color:#eff4f5;
}

.quiz-title { 
color:#e4007f; 
font-size:30px;
padding:80px 70px 20px 0;
}

.thank-you-title { 
color:#e4007f; 
font-size:30px;
padding:90px 90px 20px 0;
}

.quiz-headline { color:#000; font-size:16px; padding:0 70px 0 0; }

.thank-you-headline { color:#000; font-size:16px; padding:0 90px 0 0; }


.quiz-question-headline { color:#000; font-size:18px; margin-top:30px; padding:0; }

.track { width:560px; padding:20px; }

.step-1, .step-2, .step-3, .step-4 { color:#fff; border-radius:50%; width:40px; line-height:40px; font-size:26px; display:inline-block; position:relative; margin-right:45px; }

.step-1-active, .step-2-active, .step-3-active, .step-4-active { color:#fff; border-radius:50%; width:60px; line-height:60px; font-size:30px; display:inline-block; position:relative; margin-right:45px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3)!important;}

.step-1::after, .step-2::after, .step-3::after, .step-4::after { content:' '; width:50px; height:2px; background-color:#ccc; position:absolute; top:20px; left:40px; }

.step-1-active::after, .step-2-active::after, .step-3-active::after, .step-4-active::after { content:' '; width:50px; height:2px; background-color:#ccc; position:absolute; top:30px; left:60px;  }

.step-1, .step-1-active { background-color:#3fc1de }
.step-2, .step-2-active { background-color:#fac03d }
.step-3, .step-3-active { background-color:#ea9ca9 }
.step-4, .step-4-active { background-color:#c4aad5 }

.step-5 { color:#fff; border-radius:50%; width:40px; line-height:40px; font-size:26px; display:inline-block; position:relative;  background-color:#c1c5cd }

.step-5-active { color:#fff; border-radius:50%; width:60px; line-height:60px; font-size:30px; display:inline-block; position:relative;  background-color:#c1c5cd; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3)!important; }

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #555;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #555;
  cursor: pointer;
}

.slider-age-range { width:600px; margin-top:10px; padding:0; position:relative; font-size:16px; display:block;}

.age-range-option-1 { position:absolute; left:-10px; }
.age-range-option-2 { position:absolute; left:70px; }
.age-range-option-3 { position:absolute; left:180px; }
.age-range-option-4 { position:absolute; left:275px; }
.age-range-option-5 { position:absolute; left:375px; }
.age-range-option-6 { position:absolute; right:83px; }
.age-range-option-7 { position:absolute; right:-6px; }

.quiz-option { border:1px solid #555; text-align:center; display:inline-block; width:205px; margin:20px 10px; padding:10px 10px 20px 10px; transition:0.3s; cursor:pointer;}

.quiz-option:hover { border:1px solid #e4007f; }

.quiz-option img { margin:20px 60px 10px 60px; display:block; text-align:center;}

.quiz-option span { margin-bottom:10px; display:block;}


.radio-container {
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left:-25px;
  margin-bottom:20px;
}


.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}


.radio-container:hover input ~ .checkmark {
  background-color: #ccc;
}


.radio-container input:checked ~ .checkmark {
  background-color: #e4007f;
}


.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


.radio-container input:checked ~ .checkmark:after {
  display: block;
}

.radio-container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
    
.checkbox-container {
  position: relative;
  cursor: pointer;
  font-size: 16px;
  font-weight:normal;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
    margin-left:-25px;
  margin-bottom:20px;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

.checkbox-container:hover input ~ .checkbox-checkmark {
  background-color: #ccc;
}


.checkbox-container input:checked ~ .checkbox-checkmark {
  background-color: #e4007f;
}

.checkbox-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkbox-checkmark:after {
  display: block;
}


.checkbox-container .checkbox-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);
}  

.next-button { background-color:#6e6e6e; color:#fff; text-decoration:none; border-radius:15px; padding:10px 40px 10px 30px; font-size:18px; text-transform:uppercase; transition:0.3s; margin:10px; display:inline-block; position:relative; cursor:pointer; }

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

.next-button::after {
    
  font-family: 'Material Icons';
  content: "\e5e1";
  position:absolute;
  top:10px;
  right:10px;
  font-size:24px;
  z-index:10;
  transition:0.3s;
  
}

.next-button:hover::after {
    
  right:5px;
  
}

.prev-button { background-color:#6e6e6e; color:#fff; text-decoration:none; border-radius:15px; padding:10px 30px 10px 40px; font-size:18px; text-transform:uppercase; transition:0.3s; margin:10px; display:inline-block; position:relative; cursor:pointer; }

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

.prev-button::after {
    
  font-family: 'Material Icons';
  content: "\e5e0";
  position:absolute;
  top:10px;
  left:15px;
  font-size:24px;
  z-index:10;
  transition:0.3s;
  
}

.prev-button:hover::after {
    
  left:10px;
  
}

.step { color:#000; border-radius:15px; padding:10px; border:1px solid #ccc; font-size:18px; display:inline-block; margin:30px auto; text-transform:uppercase;}

.quiz-product { display:inline-block;  padding:10px; vertical-align: top; font-size:15px; }
.quiz-product img { margin-bottom:10px; transition:0.3s; cursor:pointer; }

.quiz-product span { font-size:15px; font-weight:bold; display:block; margin-bottom:10px; transition:0.3s; cursor:pointer; }

.quiz-product a { text-decoration:none; color:#555; transition:0.3s; }

.quiz-product a:hover, .quiz-product img:hover, .quiz-product span:hover { opacity:0.6; }

.step-column-1, .step-column-2, .step-column-3, .step-column-4, .step-column-5, .step-column-6, .step-column-7  {
    
    display:inline-block; width:300px; margin:0 20px; 
}

.step-column-2-and-3, .step-column-3-and-4, .step-column-4-and-5 {
    
    display:inline-block; width:360px; margin:0 20px; 
}

.step-column-essence{
    
    display:inline-block; width:640px; margin:0 20px; vertical-align: top;
}

.or { display:block; font-size:30px; padding-top:150px;}


.essence-cream-list ul {
  list-style: none; 
  margin-left:0;
}
.essence-cream-list ul li { position:relative; }

.essence-cream-list ul li::before {
  content: "\2022";  
  color: #848e96; 
  font-weight: bold; 
  font-size:24px;
  display: inline-block; 
  left:-15px;
  top:-6px;
  position:absolute;
}

.essence-bb-list ul {
  list-style: none; 
  margin-left:0;
}
.essence-bb-list ul li { position:relative; }

.essence-bb-list ul li::before {
  content: "\2022";  
  color: #caae9c; 
  font-weight: bold; 
  font-size:24px;
  display: inline-block; 
  left:-15px;
  top:-6px;
  position:absolute;
}


/* Browse all */

.txt-basic { color:#e6116f; }
.txt-combination { color:#2fafe8; }
.txt-acne { color:#f28e00; }
.txt-dry { color:#f3c4ce; }
.txt-aging { color:#a58fc0; }
.txt-dull { color:#a1a1a1; }
.txt-red { color:#cecece; }

.browse-all-container th, .browse-all-container td { font-size:15px; padding-bottom:10px; }

.browse-all-table { overflow-x:auto; position:relative; width:100%;}

.browse-all-table table { table-layout: fixed; }

.browse-all-table a { transition:0.3s; color:inherit;}
.browse-all-table a:hover { opacity:0.6; }

.down { font-size:60px!important; color:#f9cfe7; margin-bottom:-10px;}
.product-category { background-color:#f9cfe7; border-radius:20px; padding:10px 20px; max-width:160px; color:#e4007f; font-size:15px;}
.product-category-40px { background-color:#f9cfe7; border-radius:20px; padding:20.5px 20px; max-width:160px;  color:#e4007f; font-size:15px;}


.cleansing-water-and-cleansing-oil-product-img { position:absolute; margin-top:-100px; margin-left:-50px;}
.cleansing-water-and-cleansing-oil-product-txt { position:absolute; margin-top:-46px; margin-left:115px; font-size:12px; color:#8a8a8a; }

.cleansing-water-and-cleansing-foam-product-img { position:absolute; margin-top:-100px; margin-left:-50px;}
.cleansing-water-and-cleansing-foam-product-txt { position:absolute; margin-top:-46px; margin-left:115px; font-size:12px; color:#8a8a8a; }

.urban-damage-care-foaming-wash-product-img { position:absolute; margin-top:-100px; margin-left:-94px;}
.urban-damage-care-foaming-wash-product-txt { position:absolute; margin-top:-46px; margin-left:50px; font-size:12px; color:#8a8a8a; }

.urban-damage-care-concentrate-product-img { position:absolute; margin-top:-100px; margin-left:-100px;}
.urban-damage-care-concentrate-product-txt { position:absolute; margin-top:-46px; margin-left:43px; font-size:12px; color:#8a8a8a; }

.thermo-defense-serum-product-img { position:absolute; margin-top:-100px; margin-left:-50px;}
.thermo-defense-serum-product-txt { position:absolute; margin-top:-46px; margin-left:100px; font-size:12px; color:#8a8a8a; }

.intense-enriching-serum-product-img { position:absolute; margin-top:-100px; margin-left:-40px;}
.intense-enriching-serum-product-txt { position:absolute; margin-top:-46px; margin-left:100px; font-size:12px; color:#8a8a8a; }

.care-product-img { position:absolute; margin-top:-100px; margin-left:-80px;}
.care-product-txt { position:absolute; margin-top:-40px; margin-left:65px; font-size:12px; }
.care-whitening-product-txt { position:absolute; margin-top:-40px; margin-left:60px; font-size:12px; }

.balance { color:#15a6e4!important; }
.acne { color:#f48c00; }
.moist { color:#c96373; }
.vital { color:#a37fcf }
.whitening { color:#8a8a8a; }

.power-vital-product-img { position:absolute; margin-top:-90px; margin-left:-70px;}
.power-vital-product-txt { position:absolute; margin-top:-40px; margin-left:84px; font-size:12px; color:#8a8a8a; }

.vitalizing-cream-product-img { position:absolute; margin-top:30px; margin-left:-70px;}
.vitalizing-cream-product-txt { position:absolute; margin-top:50px; margin-left:84px; font-size:12px; color:#8a8a8a; }

.allerdefense-essence-product-img { position:absolute; margin-top:-100px; margin-left:-145px;}
.allerdefense-essence-product-txt { position:absolute; margin-top:-40px; margin-left:-5px; font-size:12px; color:#8a8a8a; }

.allerdefense-cream-product-img { position:absolute; margin-top:-100px; margin-left:-190px;}
.allerdefense-cream-product-txt { position:absolute; margin-top:-40px; margin-left:-50px; font-size:12px; color:#8a8a8a; }

.allerdefense-bb-light-product-img { position:absolute; margin-top:-100px; margin-left:-245px;}
.allerdefense-bb-light-product-txt { position:absolute; margin-top:-40px; margin-left:-105px; font-size:12px; color:#8a8a8a; }

.allerdefense-bb-natural-product-img { position:absolute; margin-top:-100px; margin-left:-120px;}
.allerdefense-bb-natural-product-txt { position:absolute; margin-top:-40px; margin-left:20px; font-size:12px; color:#8a8a8a;}

.allerdefense-bb-medium-product-img { position:absolute; margin-top:-100px; margin-left:-120px;}
.allerdefense-bb-medium-product-txt { position:absolute; margin-top:-40px; margin-left:20px; font-size:12px; color:#8a8a8a;}

.left-td-background { background-color:#f6f6f6; border-top-left-radius:20px; border-bottom-left-radius:20px; height:60px; width:97%; margin-left:5px; margin-top:50px; } 

.right-td-background { background-color:#f6f6f6; border-top-right-radius:20px; border-bottom-right-radius:20px; height:60px; width:100%; margin-top:50px; } 
.td-background { background-color:#f6f6f6; height:60px; width:100%; margin-top:50px; }

.allerdefense-left-td-background { background-color:#fcf7f1; border-top-left-radius:20px; border-bottom-left-radius:20px; height:60px; width:97%; margin-left:5px; margin-top:50px; } 

.allerdefense-right-td-background { background-color:#fcf7f1; border-top-right-radius:20px; border-bottom-right-radius:20px; height:60px; width:100%; margin-top:50px; } 
.allerdefense-td-background { background-color:#fcf7f1; height:60px; width:100%; margin-top:50px; }

.grey-td-background-right { background-color:#f6f6f6; border-radius:20px; height:60px; width:94%; margin-left:10px; margin-top:50px; }

.balance-care-background { background-color:#cfe7ef; border-radius:20px; height:60px; width:94%; margin-left:5px; margin-right:5px; margin-top:50px; }

.acne-care-background { background-color:#ffe5c4; border-radius:20px; height:60px; width:94%; margin-left:5px; margin-right:5px; margin-top:50px; }

.moist-care-background { background-color:#fae1e6; border-radius:20px; height:60px; width:94%; margin-left:5px; margin-right:5px; margin-top:50px; }

.vital-care-background { background-color:#e7e3f0; border-radius:20px; height:60px; width:94%; margin-left:5px; margin-right:5px; margin-top:50px; }

.whitening-care-background { background-color:#f6f6f6; border-radius:20px; height:60px; width:94%; margin-left:5px; margin-right:5px; margin-top:50px; }

.whitening-jelly-essence-background-left { background-color:#f6f6f6; border-top-left-radius:20px; border-bottom-left-radius:20px; height:60px; width:97%; margin-left:5px; margin-top:50px; }

.whitening-jelly-essence-background-right { background-color:#f6f6f6; border-top-right-radius:20px; border-bottom-right-radius:20px; height:60px; width:100%;  margin-top:50px; }

/* Whitening Jelly Essence & Skin Repair Cream */

.whitening-jelly-essence-background { background-color:#f6f6f6; border-radius:20px; height:60px; width:94%; margin-left:5px; margin-right:5px; margin-top:50px; }

.skin-repair-cream-background { background-color:#f6f6f6; border-radius:20px; height:60px; width:94%; margin-left:5px; margin-right:5px; margin-top:50px; }

.whitening-jelly-essence-product-img { position:absolute; margin-top:-80px; margin-left:-80px;}
.whitening-jelly-essence-product-txt { position:absolute; margin-top:-46px; margin-left:75px; font-size:12px; color:#8a8a8a; }

.skin-repair-cream-product-img { position:absolute; margin-top:-90px; margin-left:-70px;}
.skin-repair-cream-product-txt { position:absolute; margin-top:-46px; margin-left:90px; font-size:12px; color:#8a8a8a; }


.td-margin-left-10px { margin-left:10px; }

.privacy-policy-title, .terms-of-use-title { display:block; font-size:20px; font-weight:bold; margin:20px auto;}

.grey-link { color:#555; }




/* Tablet & Mobile */

@media only screen and (max-width : 1199px) {
    .desktop-tablet { display:block; }
    .mobile { display:block; }
    .desktop { display:none; }
    .top { padding-top:60px; }
    .nav { height:60px; }
    .nav .container { width:100%; }
    .top-container { width:100%; }
    .container { width:100%; margin:0 auto; }
    .container-1000px, .container-800px, .container-consent, .container-subscribe, .container-700px, .container-600px, .container-520px { width:100%; margin:0 auto; }
    
    .quiz-container, .browse-all-container, .privacy-policy-container, .terms-of-use-container { width:95%; margin:0 auto; padding-top:80px; }
    
    .top-text-container { width:95%; margin:30px auto; }

.mobile-bottom-20px { margin-bottom:20px; display:block; }

.mobile-top-20px { margin-top:20px; display:block; }

.logo { left:10px; top:12px; }

.logo-img { width:60%; }


.mobile-menu-button { font-size:30px!important; position:absolute; top:15px; right:10px; transition:0.3s; cursor:pointer; }

.mobile-menu-button:hover { opacity:0.6;}

.nav-links-mobile { background: rgba(255,255,255,1); position:fixed; z-index:99!important; top:60px; width:100%; padding:20px;}

.nav-product-menu .nav-product-menu-text {
  visibility: hidden;
  position: absolute;
  z-index: 99;
  top: 100%;
  left: 0px;
  opacity: 0;
  transition: opacity 1s;
  
}

.nav-product-menu .nav-product-menu-background { 
 background-color: #fff;
 color:#000;
 text-align: left;
 padding: 10px;
 margin-top:0;
 text-transform:none;
 z-index: 99;
 display:block;
 width:auto;
}

.social-links { top:15px; }

.active-link {  font-size:14px; color:#000; text-decoration:none; display:inline-block; padding-bottom:5px; border-bottom:3px solid #e4007f; margin-right:0; margin-bottom:20px;}

.link {  font-size:14px; color:#000; text-decoration:none; display:inline-block; transition:0.3s; margin-right:0;  margin-bottom:20px;}

.title::before { left:-5%; width:110%; }

.close-link { position:relative; }
.close-link::after { font-family: 'Material Icons';
  content: "\e931";
  position:absolute;
  top:-3px;
  right:-25px;
  font-size:15px;
  
}

.footer .container { padding:0; }

.connect { width:100%; float:none; margin:0 auto; padding:30px 15%;}

.discover { width:100%; float:none; margin:0 auto; padding:40px 15% 0 15%;}

.copyright { padding:30px 15% 30px 15%; }


.new-findings-title { width:100%; margin:0; }

.new-findings-content { width:100%; margin:20px 0; }

.beauty-microbiome-img { right:0; top:0; position:relative; margin:20px auto; }

.further-discovery-content-box { float:none; width:100%; margin:20px 0; }

.program-container { margin-left:0; }

.program { width:100%; margin:20px 0; }

.balance-care-title, .acne-care-title, .moist-care-title, .vital-care-title, .brightening-care-title { width:100%; margin:0; }

.balance-care-content, .acne-care-content, .moist-care-content, .vital-care-content, .brightening-care-content { width:100%; margin:0; padding:20px; }

.content-img { margin:20px 0; display:block; }
.photo-img { margin:20px 0; display:block; }

.lineup-top-content-container { width:100%; margin:30px auto; padding:20px 20px 0 20px;
background: rgb(241,241,241);
background: linear-gradient(180deg, rgba(241,241,241,1) 0%, rgba(255,255,255,1) 10%);
}

.quiz-top-content-container { width:100%; }

.quiz-title { 
font-size:24px;
padding:80px 30px 20px 0;
}

.quiz-headline { color:#000; font-size:18px; padding:0 30px 0 0; }

.step-column-essence { display:block; margin:0 auto; }

.track { width:100%; padding:0;}

.step-1, .step-2, .step-3, .step-4 { color:#fff; border-radius:50%; width:30px; line-height:30px; font-size:20px; display:inline-block; position:relative; margin-right:25px; }

.step-1-active, .step-2-active, .step-3-active, .step-4-active { color:#fff; border-radius:50%; width:40px; line-height:40px; font-size:24px; display:inline-block; position:relative; margin-right:20px; }

.step-1::after, .step-2::after, .step-3::after, .step-4::after { top:12px; left:30px; }

.step-1-active::after, .step-2-active::after, .step-3-active::after, .step-4-active::after { content:' '; width:25px; height:2px; top:20px; left:40px;  }


.step-5 { color:#fff; border-radius:50%; width:30px; line-height:30px; font-size:20px; }

.step-5-active { color:#fff; border-radius:50%; width:40px; line-height:40px; font-size:24px;  }

.urban-damage-care-foaming-wash-product-txt { width:100px; margin-top:-55px; margin-left:50px;  }

.urban-damage-care-concentrate-product-txt { width:100px; margin-top:-47px; margin-left:50px;  }

.care-product-txt, .care-whitening-product-txt { width:100px; margin-top:-40px; margin-left:auto; }
.balance { margin-left:50px; }
.acne { margin-left:43px; }
.moist { margin-left:45px; }
.vital { margin-left:40px; }
.whitening { margin-left:60px; }

.cleansing-water-and-cleansing-oil-product-txt { width:100px; margin-top:-46px; margin-left:115px;  }

.cleansing-water-and-cleansing-foam-product-txt { width:100px;  margin-top:-46px; margin-left:115px;  }

.thermo-defense-serum-product-txt, .intense-enriching-serum-product-txt { width:100px;  margin-top:-46px; margin-left:100px; }

.power-vital-product-txt { width:100px;  margin-top:-40px; margin-left:70px;  }

.allerdefense-bb-light-product-txt, .allerdefense-bb-natural-product-txt { margin-top:-46px;}

.allerdefense-bb-medium-product-txt {  margin-top:-46px; }

.whitening-jelly-essence-product-txt { margin-top:-56px; margin-left:85px; }

.skin-repair-cream-product-txt {  margin-top:-56px; margin-left:95px;  }

}


/* Responsive For Essence (Quiz) */

@media only screen and (max-width : 990px) {
    
.or { padding:30px 0; }

}

/* Mobile only */

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

.mobile-only { display:block; }

.lineup-title { margin:20px 0; }

.margin-top-60px { margin-top:30px; }

.margin-top-60px-bottom-60px, .product-and-features-spacing {  margin-top:30px; margin-bottom:30px; }


.social-links { display:none;}

.social-link { float:none; margin-right:0;}

.social-link img { margin-top:-2px; margin-right:0; }

.special-care-container { width:100%; margin:0 auto; }

.new-findings-title { margin-top:20px; }

.quiz-top-content-container { width:100%; height:auto; margin:30px auto 0 auto; padding:20px;}

.quiz-title, .thank-you-title { 
font-size:24px;
padding:30px;
}

.quiz-headline, .thank-you-headline { color:#000; font-size:18px; padding:0 30px; }



.container-agerange { width:320px; }

.slider-age-range { width:320px; margin-top:10px; padding:0; position:relative; font-size:16px; display:block;}

.age-range-option-1 { position:absolute; left:-10px; font-size:14px; }
.age-range-option-2 { position:absolute; left:40px; font-size:14px; text-align:center;}
.age-range-option-3 { position:absolute; left:93px; font-size:14px; }
.age-range-option-4 { position:absolute; left:143px; font-size:14px; }
.age-range-option-5 { position:absolute; left:193px; font-size:14px; }
.age-range-option-6 { position:absolute; right:43px; font-size:14px; }
.age-range-option-7 { position:absolute; right:-5px; font-size:14px; }

.step-column-essence { width:95%; margin:0 auto; }

.footer-brand-story { width:100%; margin-right:0; float:none }

.footer-lineup { width:100%; margin-right:0; float:none }

.footer-quiz { width:100%; float:none }

}