/* Home */

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


br.sp, br.sp2{
    display:none;
}
sup {
    transform: scale(0.7);
    display: inline-block;
}
#topslider span{
    font-size:11px;
    line-height: 1.2;
    color: #000;
}
#topslider .banner-title{
    font-size: 2vw;
    line-height:1.2;
    color:#64312f;
}
#topslider p{
    font-size: 1.5vw;
    line-height:1.2;
    color:#000;
    margin-bottom: 0;
}

.slide-logo-img {
    width:346px; height:107px;
    animation-name: fade-in-effect;
    animation-duration: 1s;
    animation-fill-mode: forwards; 
    opacity:0;
    position:relative;
    z-index:10;
}

.dcr { 
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    left: 45%;
    color:#482119;
}
.dcr2 { 
    left: 50%;
}
.dcr p { 
    display:block; 
    animation-name: fade-in-and-scale-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
    line-height: .5 !important;
    color:#482119;
}
.dcr .banner-title{
    font-size: 3vw !important;
    animation-name: fade-in-and-scale-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
.dcr .banner-title div{
    font-size: 1.9vw !important;
    font-weight:600;
}
@media only screen and (max-width: 768px) {
.dcr .banner-title div{
    font-size: 3.66vw !important;
}
}
.serum { 
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    left: 20%;
}
.serum p { 
    display:block; 
    animation-name: fade-in-and-scale-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
    color:#FFF !important;
    line-height: .5 !important;
}
.serum .banner-title{
    font-size: 3vw !important;
    animation-name: fade-in-and-scale-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    color:#FFF !important
}

.design-time-serum { 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20%;
}
.design-time-serum p { 
    display:block; 
    animation-name: fade-in-and-scale-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
}
.design-time-serum .banner-title{
    font-size: 3vw !important;
    margin-left:-20px;
    animation-name: fade-in-and-scale-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}


.luminous-glow-mist {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 35%;
}
.luminous-glow-mist .banner-title { 
    font-size: 2.5vw !important;
    display:block; 
    transition:0.3s; 
    animation-name: fade-in-and-scale-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
}
.luminous-glow-mist p { 
    display:block; 
    transition:0.3s; 
    animation-name: fade-in-and-slide-up-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
}
.luminous-glow-mist span { 
    display:block; 
    animation-name: fade-in-and-slide-up-effect;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards; 
    opacity:0;
}

.lotion-and-emulsion { 
    position:absolute; 
    top:50%;
    transform: translateY(-50%);
    left:10%;
}

.lotion-and-emulsion .banner-title { 
    display:block; 
    transition:0.3s; 
    animation-name: fade-in-and-slide-up-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
}
.lotion-and-emulsion p { 
    display:block; 
    transition:0.3s; 
    animation-name: fade-in-and-slide-up-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
}

.wrinkle-cream { 
    position:absolute; 
    top:50%;
    transform: translateY(-50%);
    left:5%;
}

.wrinkle-cream .banner-title { 
    display:block; 
    transition:0.3s; 
    animation-name: fade-in-and-slide-up-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
}
.wrinkle-cream p { 
    display:block; 
    transition:0.3s; 
    animation-name: fade-in-and-slide-up-effect;
    animation-duration: 2s;
    animation-fill-mode: forwards; 
}
#topslider span { 
    display:block; 
    animation-name: fade-in-and-slide-up-effect;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    opacity:0;
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: calc(100% - 40px);
}

@keyframes fade-in-and-scale-effect {
  0%   { 
opacity:0;
-ms-transform: scale(0.5);
transform: scale(0.5);

}
  100% { 
opacity:1;
-ms-transform: scale(1);
transform: scale(1);
}
}

@keyframes fade-in-and-slide-up-effect {
  0%   { 
opacity:0;
-ms-transform: translatey(20px);
  transform: translatey(20px);

}
  100% { 
opacity:1;
-ms-transform: translatey(0px);
  transform: translatey(0px);
}
}

@keyframes fade-in-from-right {
  0%   { 
opacity:0;
-ms-transform: translatex(30px);
  transform: translatex(30px);

}
  100% { 
opacity:1;
-ms-transform: translatex(0px);
  transform: translatex(0px);
}
}

.pearl-glow-skin { width:100%;background-color:#efedef; }
.pearl-glow-skin-container { width:800px; margin:0 auto;}
.pearl-glow-skin-container img { float:left; width:340px; margin-top:20px; }
.pearl-glow-skin-container p { float:left; width:400px; margin-left:60px; margin-top:90px; font-size:18px; color:#6e5a4e; }
.pearl-glow-skin-container span { ; font-style: normal; color:#d19a5f; font-size:30px; display:block; margin-bottom:30px;}

.design-time-serum-container { position:relative; width:100%; margin-top:80px; }
.design-time-serum-container > p { font-size:30px; line-height:1.2; color:#fff; position:absolute; top:50px; left:20%; width:600px; }
.design-time-serum-container > p > span {; font-style: normal; font-size:20px; color:#fff; display:block; margin-top:20px;  }
.design-time-serum-container > span {font-size: 11px; color:#FFF;display: block;
    position: absolute;
    left: 20%;
    bottom: 20px;
}
/* Responsive Slide */

/*
@media only screen and (min-width : 1601px) and (max-width : 1800px) {

.design-time-serum { top:140px; left:370px; width:490px; }
.design-time-serum-product-img { right:150px; top:70px; width:10%;}


.luminous-glow-mist { top:140px; left:650px; width:500px; }

.lotion-and-emulsion {top:110px; left:100px; width:650px; }

}

@media only screen and (min-width : 1400px) and (max-width : 1600px) {
 
.design-time-serum { top:120px; left:330px; width:490px; }
.design-time-serum-product-img { right:130px; top:60px; width:10%;}
.design-time-serum p {  font-size:26px; line-height:30px;}    
.design-time-serum span {  font-size:18px; line-height:20px;} 

.luminous-glow-mist { top:100px; left:630px; width:460px;  }
.luminous-glow-mist-product-img { right:30px; top:70px; }
.luminous-glow-mist p {  font-size:26px; line-height:30px;}
.luminous-glow-mist span {  font-size:18px; line-height:20px;}      

.lotion-and-emulsion { top:100px; left:100px; width:630px; }
.lotion-and-emulsion  p {  font-size:26px; line-height:30px;}  
.lotion-and-emulsion span {  font-size:18px; line-height:20px;}  

}

@media only screen and (min-width : 1260px) and (max-width : 1399px) {
 
.slide-logo-img { width:240px; height:74px; }
 
.design-time-serum { top:100px; left:260px; width:490px; }
.design-time-serum p {  font-size:26px; line-height:30px;}    
.design-time-serum span {  font-size:18px; line-height:20px;}    

.luminous-glow-mist { top:80px; left:550px; width:400px;  }
.luminous-glow-mist p {  font-size:26px; line-height:30px;}
.luminous-glow-mist span {  font-size:18px; line-height:20px;}  
    
.lotion-and-emulsion  { top:90px; left:90px; width:600px;  }
.lotion-and-emulsion  p {  font-size:26px; line-height:30px; }    
.lotion-and-emulsion span {  font-size:18px; line-height:20px;} 

}

@media only screen and (min-width : 1200px) and (max-width : 1259px) {
 
 .slide-logo-img { width:240px; height:74px; }
 
.design-time-serum { top:70px; left:200px; width:490px; }
.design-time-serum p {  font-size:26px; line-height:30px;}    
.design-time-serum span {  font-size:18px; line-height:20px;}   

.luminous-glow-mist { top:90px; left:500px; width:360px;  }
.luminous-glow-mist p {  font-size:26px; line-height:30px;}
.luminous-glow-mist span {  font-size:18px; line-height:20px;}  

.lotion-and-emulsion  { top:90px; left:90px; width:560px;  }
.lotion-and-emulsion  p {  font-size:26px; line-height:30px;}
.lotion-and-emulsion span { font-size:18px; line-height:20px;}  

}

@media only screen and (min-width : 1001px) and (max-width : 1199px) {
    
.slide-logo-img { width:200px; height:62px; }
 
.design-time-serum { top:70px; left:190px; width:400px; }
.design-time-serum p {  font-size:20px; line-height:22px;} 
.design-time-serum span {  font-size:16px; line-height:18px; }

.luminous-glow-mist { top:90px; left:400px; }
.luminous-glow-mist .banner-title { font-size:26px; line-height:1.2; margin-top:25px; margin-bottom:0; }
.luminous-glow-mist p {  font-size:20px; line-height:22px;}
.luminous-glow-mist span {   }

.lotion-and-emulsion  { top:80px; left:80px; width:540px;  }
.lotion-and-emulsion  .banner-title {  font-size:26px; line-height:26px; }
.lotion-and-emulsion  p {  font-size:20px; line-height:22px;}
.lotion-and-emulsion span {  font-size:16px; line-height:18px; }

}

@media only screen and (min-width : 901px) and (max-width : 1000px) {
    
.slide-logo-img { width:240px; height:74px; }
 
.design-time-serum { top:50px; left:140px; width:400px; }
.design-time-serum-product-img { right:40px; top:50px; width:9%;}
.design-time-serum p {  font-size:20px; line-height:22px;}
.design-time-serum span {  font-size:16px; line-height:18px; } 

.luminous-glow-mist { top:40px; left:320px; }
.luminous-glow-mist .banner-title { font-size:26px; line-height:26px; margin-top:20px; }
.luminous-glow-mist p {  font-size:20px; line-height:22px;}
.luminous-glow-mist span {   }

.lotion-and-emulsion  { top:80px; left:80px; width:500px;  }
.lotion-and-emulsion  .banner-title {  font-size:26px; line-height:26px; }
.lotion-and-emulsion  p {  font-size:20px; line-height:22px;}
.lotion-and-emulsion span {  font-size:16px; line-height:18px; }
    
}


@media only screen and (min-width : 769px) and (max-width : 900px) {
    
.slide-logo-img { width:160px; height:49px; }
 
.design-time-serum { top:40px; left:140px; width:300px; }
.design-time-serum-product-img { right:60px; top:50px; width:8%;}
.design-time-serum p {  font-size:20px; line-height:22px;}    
.design-time-serum span {  font-size:16px; line-height:18px; }   

.luminous-glow-mist { top:25px; left:270px; width:300px;  }
.luminous-glow-mist .banner-title { font-size:20px; line-height:20px; margin-top:20px;  }
.luminous-glow-mist p {  font-size:20px; line-height:22px;}
.luminous-glow-mist span {  }  

.lotion-and-emulsion  { top:60px; left:60px; width:500px;  }
.lotion-and-emulsion  .banner-title {  font-size:26px; line-height:26px; }
.lotion-and-emulsion  p {  font-size:20px; line-height:22px;}
.lotion-and-emulsion span {  font-size:16px; line-height:18px; }

}
*/

/* Responsive */


/* Design Time Serum Container */

@media only screen and (min-width : 1100px) and (max-width : 1550px) {
 
.design-time-serum-container > p { top:30px; left:15%; width:500px; }
.design-time-serum-container > span {left:15%; width:500px; }
}


@media only screen and (min-width : 769px) and (max-width : 1099px) {
 
.design-time-serum-container > p { top:0px; left:10%; width:430px; font-size:20px;}
.design-time-serum-container >p > span {  font-size:20px; }
.design-time-serum-container > span { left:10%; }
}


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

.pearl-glow-skin-container { width:600px; margin:0 auto;}
.pearl-glow-skin-container img { float:left; width:240px; margin-top:20px; }
.pearl-glow-skin-container p { float:left; width:300px; margin-left:60px; margin-top:60px; font-size:18px; color:#6e5a4e; }
.pearl-glow-skin-container span { ; font-style: normal; color:#d19a5f; font-size:30px; display:block; margin-bottom:30px;}

br.pc3{
    display:none;
}
}

@media only screen and (max-width : 1410px) {
.lotion-and-emulsion .banner-title { 
    font-size:22.5px!important;
}
.lotion-and-emulsion p { 
    font-size:15px!important;
}
.wrinkle-cream .banner-title{ 
    font-size:22.5px!important;
}
.wrinkle-cream p{ 
    font-size:15px!important;
}
}

@media only screen and (max-width : 1100px) {
.lotion-and-emulsion {
    left: 40px;
}
.wrinkle-cream{
    left: 40px;
}
}

@media only screen and (max-width : 1030px) {
.luminous-glow-mist br.sp{
    display:block;
}
}

@media only screen and (max-width : 768px) {
 
br.sp{
    display:block;
}
 
br.pc{
    display:none;
}
.desktop-slide { display:none; }
.mobile-slide { display:block; }

.slide-logo-img { width:160px; height:49px; }

.design-time-serum {
    top: auto;
    transform: none;
    top: 28%;
    left: 10%;}

.luminous-glow-mist { top:auto; transform: none; left: 20px; bottom:100px;}

.lotion-and-emulsion {
    top: 0;
    bottom: auto;
    text-align: center;
    width: 100%;
    left: 0;
    margin-top: 15%;
    transform: none;
}
.wrinkle-cream, .serum, .dcr, .dcr2 {
    top: 0;
    bottom: auto;
    text-align: left;
    width: 100%;
    left: 5%;
    margin-top: 5%;
    transform: none;
}


.design-time-serum-container > p { font-size:20px; line-height:20px; color:#fff; position:absolute; top:-5px; left:0; width:100%; padding:20px;}
.design-time-serum-container > p > span {; font-style: normal; font-size:16px; line-height:18px; color:#fff; display:block; margin-top:10px;  }
.design-time-serum-container > span { bottom:0; left:0; width:100%; padding:20px;}
.design-time-serum-container > span > br{ display:none;}

.pearl-glow-skin-container { width:100%; margin:0 auto;}
.pearl-glow-skin-container img { float:none; width:80%; margin-top:-20px; text-align:center;}
.pearl-glow-skin-container p { float:none; width:100%; margin-left:0; margin-top:0; font-size:18px; color:#6e5a4e; padding:20px;}
.pearl-glow-skin-container span { ; font-style: normal; color:#d19a5f; font-size:30px; display:block; margin-top:20px;margin-bottom:20px;}

sup {
    margin-left: -0.25em;
    vertical-align: top;
    line-height: 1.1;
    font-size:11px!important;
}

#topslider .banner-title{
    font-size: 5.5vw !important;
}
#topslider p{
    font-size: 3.8vw !important;
}

#topslider span{
    font-size:2vw;
}

}

/* Phones */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

br.sp2{
    display:block;
}

.design-time-serum {left: 20px;}
.design-time-serum .banner-title{margin-left: -10px;}
.luminous-glow-mist {left: 20px; bottom:100px;}

.lotion-and-emulsion {margin-top: 20px;}
.wrinkle-cream, .serum, .dcr {margin-top: 20px;}
}