/*====================================================
                BASE CSS
====================================================*/

*, :after, :before {
    box-sizing: border-box;
}
html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
}

img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.port{
    display: none;
}

.mob_ls,.tab_ls{
    transform:rotate(90deg);
}
.phone_image{
    top: 7%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    width: 320px;
    height: 500px;
    display:none;
    
}
.tablet_image{
    top: 7%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    width: 768px;
    height: 500px;
    display:none;
    
}
.phone_image img{
    width:100%;
}
.tablet_image img {
    width: 60%;
}
 


.banner{
    width: 1280px;
    height: 90px;
    position: absolute;
    display:none;
}


/*====================================================
                COMMON CSS
====================================================*/
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
.hide {
    display: none;
}
.mobliemain{position:absolute; z-index:99; width:100%;}
.wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}
.wrapper-tab{
    width:768px; 
    height:598px;
}
.desktopicon{
    width:100px; 
    height:auto;
    display:inline-block;
    }
.mobileicon{
    position:relative;
    z-index:999;
    border:solid 10px red;
    margin:0px auto;
    width:50%;
    }
.mobileland{ 
    width:100px; 
    height:auto; 
    display:inline-block;
}
.mobileport{
    width:auto;
    height:70px;
    max-width:70px;
    display:inline-block;
}
.mobileport img{
    height:auto;
    width:100%;
}
p {
    color:#fff;
    position: absolute;
    top: 10px;

}
.close{
    position: absolute;
    z-index: 999;
    width: 3%;
    right: 0;
    cursor: pointer;
}
.closevideo {
    position: absolute;
    z-index: 9999;
    width: 3%;
    right: 0;
    display: none;
    cursor: pointer;
}
.video-link img{
    margin:0px;
    width:100%;
}
.video_div{
    margin: 0px auto;
    max-width: 70%;
    margin-top: 4%;
    height: auto;
    position: relative;
    z-index: 9999;
    display:none;
}
.desktop{
    display:block;
}
.tab{
    display:none;
}
.mobliemain, .tablet, .tabletland{
    display:none;
}
.tabletland-show{
    display: block;
    position: absolute;
    top: 11%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 55%;
    margin: 0px auto;
}


/*====================================================
                ANIMATION SECTION CSS
====================================================*/


.bg1{
    position: absolute; 
    width:100%;
    height:100%;
    background:url('../images/background.jpg');
    background-position: center;
    background-size: cover;   
}

.logo {
    width: 100%;
    bottom: 7%;
    position: absolute;
}

.logo>img{
  width:10%;   
}

.Ques1,.Ques2,.Ques3,.Ques4,.Ques5 {
    width: 100%;
    height: 100%;
    position: absolute;
}

.Ques1 {
   opacity:1;
}

.Ques2,.Ques3,.Ques4,.Ques5  {
   opacity:0;
}

.Ques{
position: absolute;
    width: 100%;
    top: 4%;
}

.Ques>img{
    width:38%;
}

.line{
    position: absolute;
    width: 40%;
    left: 30%;
    height: 1.5px;
    top: 35%;
    background-color: #e4bf6e;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.choice1 {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #e4bf6e;
    background-color: #000;
}

.choice2 {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #e4bf6e;
    background-color: #e4bf6e;
}

.choice3 {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #e4bf6e;
    background-color: #e4bf6e;
}

.choice4 {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #e4bf6e;
    background-color: #e4bf6e;
}

.choice5 {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #e4bf6e;
    background-color: #e4bf6e;
}

.options{
position: absolute;
    top: 50%;
    width: 75%;
    left: 12.5%;
    height: 32%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.option1,.option2,.option3,.option4,.option5{
     width: 20%;
}

/*.cta {
    width: 12%;
    position: absolute;
    bottom: 4%;
    right: 32%;
    opacity:0;
}
*/
.desktop{display:block; width:100%;position:absolute;}
.mobiles{display:none; width:100%;position:absolute;}

.swiperWrapper{position: absolute; width:100% !important; height:100% !important; background:#fff;opacity:0}
.swiper-container{position: absolute; width:100% !important; height:100% !important;}
.leftPanel{ width:43%; float:left; position:static;}
.rightPanel{ width:50%; float:left; position:static;}

.endlogo , .vidoPoster, .lorealLogo, .Bottle, .txt, .cta{ position:static;}

.endlogo img, .vidoPoster img, .lorealLogo img, .Bottle img, .txt img, .cta img{ width:100%;}

.endlogo{ width:25%; margin:2% auto; display:block;}
.vidoPoster{ width:90%; margin:0 auto; display:block; cursor:pointer;}
.lorealLogo{display: block;     width: 30%;
    margin: 6% auto;}
.cta{    width: 40%;
    display: block;
  float: left; cursor:pointer;}
.txt{   width: 70%;
    margin-top: 25%;  display: block;
  float: left;}
.Bottle{    width: 30%;
    margin-top: 5%;   float: left;}
.swiperWrapper, .swiper-container{pointer-events:auto !important;}
.mobile{ width:100%;}
.leftPanelPort{ position:relative; width:42%; float: left;}
.rightPanelPort{ position:relative; width:58%; float: left;}


.swiper-pagination-bullet{width: 13px !important; height: 13px !important;}
.swiper-button-prev{left: 41.3% !important; top: 94.5% !important; background:url('../images/LeftArrow.png') !important;     background-size: 27px 27px !important;     background-repeat: no-repeat !important;     background-position: center !important;}
.swiper-button-next{right: 40% !important;  top: 94.5% !important; background:url('../images/RightArrow.png') !important;     background-size: 27px 27px !important;     background-repeat: no-repeat !important;     background-position: center !important;}

.swiper-pagination-bullet{background:none!important; border:1px solid #000 !important; box-sizing:border-box !imprtant; opacity:1 !important;}
.swiper-container-horizontal>.swiper-pagination-bullets{     top: 93.7%!important; bottom:auto !important; left:14px !important;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0px 10px !important;}
.swiper-pagination-bullet-active{background: #000 !important;}

.swiper-slide {
  background-color: #fff !important;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
    background-color: rgba(0,0,0,0.7);
    opacity:0;
}

video {
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60% !important;
    height: auto !important;
    outline:0;
}

@media only screen and (max-width: 350px) and (orientation: portrait){
  .Bottle img{
     
    width: 100%;
}
  .desktop{display:none;}
.mobiles{display:block;}
  .vidoPoster, .lorealLogo, .Bottle, .txt, .cta, .leftPanel, .rightPanel{ position:relative;}
  .logo{     width: 100%;
    text-align: center; margin:1% auto;}
  .logo img{width:30%;}
  .Bottle{width:100%;}
  .lorealLogo{    position: absolute;
    bottom: 16%;
    width: 60%;
    left: 20%;}
  
  .txt{ width:100%; margin-top: 4%; margin-bottom:10%;}

.vidoPoster {
    width: 90%;
    margin: 0% auto;
    left: 1%;}

.cta {
    width: 80%;
    left: -1%;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: 5.2% !important;
    width: 45% !important;
    left:0px !important;
   top:auto !important;
}
.swiper-button-next, .swiper-button-prev{    background-size: 20px 20px !important;   top:auto !important; bottom:4.6% !important;  width: 20px !important; height: 20px !important;}
  .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0px 3px !important;}
  .swiper-pagination-bullet{width: 8px !important; height: 8px !important;}
.swiper-button-next{ right: 55% !important;}
  .swiper-button-prev{ left:2px !important;}
    
      .options {
    position: absolute;
    top: 45%;
    width: 75%;
    left: 12.5%;
    height: 40%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}
    
    .option1, .option2, .option3, .option4, .option5 {
    width: 38%;
}
    .swiperWrapper {
        top:0;
    }
    
    .Ques1,.Ques2,.Ques3,.Ques4,.Ques5 {
      top: 0;    
    }  
  
    
    .close, .closevideo {
     width: 5%;
    }
    
    .choice4,.choice1,.choice2,.choice3,.choice5 {
    width: 10px;
    height: 10px;
    }
    
     .options {
    position: absolute;
    top: 32.5%;
    width: 75%;
    left: 12.5%;
    height: 52%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
    
    .option5 {
    position: absolute;
    left: 30%;
}
    
    .Ques>img {
    width: 90%;
}
    
    .line {
     top: 30%;
    }
    
    .close, .closevideo  {
    width: 8%;
}
    
    video {
    width: 100% !important;
    }
}


@media only screen and (min-width: 350px) and (max-width: 500px) and (orientation: portrait){
.leftPanelPort {
    position: relative;
    width: 30%;
  }
    
    video {
    width: 100% !important;
    }

   .Ques1,.Ques2,.Ques3,.Ques4,.Ques5 {
      top: 0;    
    }  
  
  .rightPanelPort {
     width: 70%;
    padding: 0% 10% 0% 1.5%;
  }
  
  .logo {
    width: 100%;
    text-align: center;
    margin: 1% auto;
    left: 0%;
    
  }
    .swiperWrapper{
    top: 0;
    }
    
    .swiper-container {
     top: 5%;
    }
  
  .Bottle img{
     
    width: 100%;
}
  .desktop{display:none;}
.mobiles{display:block;}
 .vidoPoster, .lorealLogo, .Bottle, .txt, .cta, .leftPanel, .rightPanel{ position:relative;}
  
  .logo img{width:30%;}
  .Bottle{width:100%;margin-top:-12%;}
  .lorealLogo{    position: absolute;
    bottom: 18%;
    width: 60%;
    left: 20%;}
  
  .txt{ width:100%; margin-top: 2%; margin-bottom:5%;}

.vidoPoster {
    width: 90%;
    margin: 0% auto;
    left: 1%;}

.cta {
    width: 80%;
    left: -1%;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: 10% !important;
    width: 45% !important;
  left:-1% !important;
  top:auto !important;
}
.swiper-button-next, .swiper-button-prev{    background-size: 20px 20px !important;   top:auto !important; bottom:9.8% !important;  width: 20px !important; height: 20px !important;}
  .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0px 4px !important;     }
  .swiper-container-horizontal>.swiper-pagination-bullets{left: -6% !important;}
  .swiper-pagination-bullet{    width: 10px!important;
    height: 10px!important;
}
.swiper-button-next{ right: 67% !important;}
  .swiper-button-prev{ left:-0.5% !important;}
  

 .swiper-pagination-bullet {
    width: 10px!important;
    height: 10px!important;
}
    
    .option1, .option2, .option3, .option4, .option5 {
    width: 38%;
}
    
    .close, .closevideo  {
     width: 5%;
    }
    
    .line {
     top: 25%;
    }
    
    .Ques>img {
    width: 60%;
}
    
  .choice4,.choice1,.choice2,.choice3,.choice5 {
    width: 12px;
    height: 12px;
    }
    
   .options {
    position: absolute;
    top: 32.5%;
    width: 75%;
    left: 12.5%;
    height: 52%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
    
    .option5 {
    position: absolute;
    left: 30%;
}
}


@media only screen and (max-width: 620px) and (orientation: landscape){
.swiper-button-next {
    right: 26% !important;
    top: 95.5% !important;
    background-size: 25px 25px !important;
    }
    
    .swiper-button-prev {
    left: 32.3% !important;
    top: 95.5% !important;
    background-size: 25px 25px !important;
    }
    
     .desktop {
    top: 20%;
    }
    .close, .closevideo  {
     width: 5%;
    }
}

@media only screen and (max-width: 700px) and (max-height:300px) and (orientation: landscape) {
.swiper-container-horizontal>.swiper-pagination-bullets {
    top: 91%!important;
    }
    
    .swiper-button-next {
    right: 32% !important;
     top: 95% !important;
    background-size: 20px 20px !important;
}
    .swiper-button-prev {
    left: 35% !important;
    top: 95% !important;
    background-size: 20px 20px !important;
}
    
    .desktop {
    top: 8%;
    }
    
    
.close {
    position: absolute;
    z-index: 9999;
    width: 5%;
    }
    
    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0px 5px !important;
}
    .swiper-container-horizontal>.swiper-pagination-bullets {
       left: 6px !important;
}
    
 .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
}
    
    .choice4,.choice1,.choice2,.choice3,.choice5 {
    width: 12px;
    height: 12px;
    }
    
}