/** Shopify CDN: Minification failed

Line 1622:0 Unexpected "}"

**/
.gredient_new{
background: linear-gradient(90deg, #FFDD9D 58.72%, #7E5B33 61.15%, #A37E56 62.1%, #FFF2CD 68.56%, #E7BF88 74.78%, #FFDD9D 78.46%, #E7BF88 81.3%, #7E5B33 84.08%, #A37E56 87.09%, #E7BF88 92.76%, #FFF2CD 92.76%, #FFF2CD 93.77%, #A37E56 100.98%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  padding: 0 5px;
}
#shopify-section-announcement ,#shopify-section-header, #section-new_footer, #section-announcement, .Whtspa_icon,#ssw-fave-list-widget,#ssw-widget-review-bar,#krng,#onetrust-consent-sdk,#moe-push-div,.WhatsAppButton__root,#YMK-video-input{
display:none !important;
}
.header_new{
margin-top: 10px;
margin-left: 15px;
width: 70px;
height: 40px;
}
 .coupon_btns .btn_start {
      width: 50%;
      padding: 16px 34px;
}

/* body.page-temp-multislayer-page{
background:#000;
} */
.YMK_Wrapper{
min-height:400px;
min-width:400px;
width: 75%;  
position:relative;
display:flex;
justify-content:center;
}
  
  .ymkMain.width60{
    width:30% !important;
    margin-top: unset;
  }
  .ymkMain.widthUnset{
    width:30% !important;
  }
   .ymkMain{
    display: flex;
    width: 73% !important;
    justify-content: space-between;
    align-items: center;
    margin-top: 22px;
    }
.ymkMain.noMargin{
  margin-top:unset;
}
    .product_wrapper{
          width: 50%;
      transform: translateY(20px);
    }
.overRideText{
position: absolute;
bottom: 15%;
z-index: 9999;
font-size: 56px;
font-style: normal;
font-weight: 500;
line-height: 56px;
text-transform: uppercase;
background: linear-gradient(180deg, #FFF -162.5%, rgba(255, 255, 255, 0.00) 127.5%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* .step_4  .YMK_Wrapper .YMKMod{
position: relative;
right: 100px;
float: right;
top: -25px;
} */
@font-face {
src: url(/cdn/shop/files/Fontspring-DEMO-rocgroteskcond-medium.otf?v=1708931769);
font-family: "Fontspring-DEMO-rocgroteskcond-medium, sans-serif";
/* font-family: "Brandon Grotesque Regular"; */
font-weight: normal;
font-style: normal;
font-display: swap;

}
@font-face {
font-family: "Roc Grotesk Condensed Medium";
font-weight: normal;
font-style: normal;
font-display: swap;
src:  url('/cdn/shop/files/font.woff2') format("woff")
}

@font-face {
font-family: "Roc Grotesk Condensed Light";
font-weight: normal;
font-style: normal;
font-display: swap;
src:  url('/cdn/shop/files/font_a3907b61-5b62-42f4-8fec-e384e14130c1.woff') format("woff")
}

@font-face {
font-family: "Roc Grotesk Light";
font-weight: normal;
font-style: normal;
font-display: swap;
src:  url('/cdn/shop/files/font_ec274475-0748-4163-84fd-38fc856ba821.woff') format("woff")
}
@font-face {
font-family: "Roc Grotesk Medium";
font-weight: normal;
font-style: normal;
font-display: swap;
src:  url('/cdn/shop/files/font_3e0f36fb-2336-415d-afa2-8c5f32967cef.woff') format("woff")
}

/* Gotham font face */
@font-face {
font-family: "gotham";
font-weight: normal;
font-style: normal;
font-display: swap;
src:  url('/cdn/shop/files/Gotham-Book-new.woff?v=1727691857') format("woff")
}
/* Gotham font face */

div,span,p,a,h1,h2,h3,h4,h5,h6{
/* font-family: "Roc Grotesk Condensed Medium-Regular" !important; */
} 
/* .groteskCondensedLight{
font-family: "Roc Grotesk Condensed Light";
}
.groteskCondensedMedium{
font-family: "Roc Grotesk Condensed Medium";
}
.groteskLight{
font-family: "Roc Grotesk Light";
}
.groteskMedium{
font-family: "Roc Grotesk Medium";
} */

body{
background:url('/cdn/shop/files/bg_des.png?v=1708173540');
background-repeat: no-repeat;
background-size: cover;
font-family: "Roc_Grotesk_Condensed";
background-attachment: fixed;
/* height:100vh; */
}
/* .middle_text{
font-family: "Fontspring-DEMO-rocgroteskcond-medium";
} */
.step_1 {
position:relative;
}
.step_header{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
}
.desText{
display:block;
}
.mobText{
display:none;
}
.couponTextCode{
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 350;
line-height: 40px; 
text-transform: uppercase;
  line-height: 50px;
   display: flex;
 justify-content: center;   
  align-items: center;
}
.copiedIcon{
  margin-top: 12px;
  margin-left: 13px;
}
.ShadeText{
    font-size: 12px;
    font-style: normal;
    font-weight: 350;
    line-height: 18px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
span.separator {
width: 3px;
height: 43px;
flex-shrink: 0;
background: linear-gradient(179deg, #FFDD9D 6.51%, #7E5B33 12.51%, #A37E56 14.84%, #FFF2CD 30.76%, #E7BF88 46.1%, #FFDD9D 55.15%, #E7BF88 62.15%, #7E5B33 69.01%, #A37E56 76.41%, #E7BF88 90.38%, #FFF2CD 90.39%, #FFF2CD 92.89%, #A37E56 110.66%);
}
.ProdutcTitle{
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 30px;
max-width:350px;
}
.loadingText{
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.steps{
display:none;}
.steps.active{
display:block;
height:100%;
}
.sizeChartIcon{
padding: 29px 22px;
display: flex;
gap: 15px;
align-items:center;
}
.almostText.textCall{
margin-top:10px;
text-align: center;
font-size: 48px;
font-style: normal;
font-weight: 350;
line-height: 48px; 
text-transform: uppercase;
}
.heading_text.textCall.text3{
line-height: 50px;
    font-size: 28px;
    font-weight: 500;
    margin-top: 5px;
}
.bg_img_text{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 30px 0;
    margin: 0 auto;
}
.ymkWrapper{
width:fit-content;
height:100%;
position:relative;
margin:0 auto;
}
.messages{
position: absolute;
bottom: 0;
z-index: 999;
width: max-content;
padding: 16px 25px;
font-size: 20px;
/* text-align: center; */
/* margin: 0 auto; */
left: 50%;
transform: translate(-50%,0);
border-radius: 8px;
background: #000000;
color: #fff;
font-weight: 350;
line-height: 20px;
letter-spacing: 0.25px;
/* font-family: "Roc Grotesk W05 Wide"; */
}
/* .ymkWrapper{
width:30%;
margin:0 auto;
} */
.textSpan{
background: linear-gradient(90.46deg, #FFDD9D -2.89%, #7E5B33 3.56%, #A37E56 6.06%, #FFF2CD 23.18%, #E7BF88 39.65%, #FFDD9D 49.38%, #E7BF88 56.9%, #7E5B33 64.28%, #A37E56 72.23%, #E7BF88 87.24%, #FFF2CD 87.25%, #FFF2CD 89.94%, #A37E56 109.03%);
-webkit-background-clip: text;
color: transparent;
font-weight:600;
font-optical-sizing: auto;
/* font-family: "Roc Grotesk W05 Wide"; */
font-size:30px;
}
.bg_img{
width:40%;
}
.bg_text{
float:right;
width:32%;
}
/*size chart code  */
.step_5 {
position:relative;
}
.sizeChartImage{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
background: #1d1c1ccf;
z-index: 9999;
}
.SizeChartWrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-60%,-60%);
background: #000;
padding: 20px 40px;
width: 506px;
}
.sizechartHeading{
display: flex;
justify-content: space-between;
font-size: 32px;
font-weight: 350;
  text-align:center;
}
.ChartFlex{
display: flex;
justify-content: space-around;
width: 100%;
gap: 30px;
/* align-items: center; */
}
.skinTone>h3{
font-size: 20px;
font-weight: 350;
line-height: 24px;
letter-spacing: 0.25px;
text-align: center;
color: #fff;
padding: 0 20px;
padding-bottom:10px;
}
   .productTones>h3{
      padding-bottom:10px; 
   }
.skinTone>ul{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20px auto;
gap: 23px;
}
li.tones{
width: 200px;
height: 100px;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 12px;
text-transform: uppercase;
color: #000;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
}
.productTones > ul li{
width:200px;
height:49px;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 12px;
text-transform: uppercase;
color: #000;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
margin-bottom: 5px;
}
.productTones > ul li:nth-child(odd){
margin-top:20px;
}
.productTones h3{
font-size:20px;
line-height: 24px;
}
/* size chart code ends  */
.btn_start{
    background: linear-gradient(82.15deg, #FFDD9D -4.58%, #7E5B33 21.83%, #A37E56 24.97%, #FFF2CD 40.84%, #E7BF88 56.11%, #FFDD9D 67.22%, #A37E56 79.81%, #E7BF88 86.78%, #E7BF88 105.81%, #7E5B33 106.47%, #FFF2CD 158.31%, #FFF2CD 163.15%, #A37E56 188.07%);
    margin: 20px 0px;
    font-size: 25px;
    line-height: 25px;
    font-weight: 500;
    padding: 7px 20px 0px 20px;
    border-radius: 90px;
    color: #000;
    text-transform: uppercase;

}
.btn_start.tutorialLook{
padding: 15px 20px 10px 20px;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 32px;
}
.button_start{
text-align:center;
position:relative;
margin-top:10px;
clear: both;
}

.button_start::after{
content:"";
left: 0;
width: 100%;
height: 34px;
border-radius: 258px/17px;
background: linear-gradient(180deg, rgb(94.46, 85.64, 75.3) 0%, rgba(94.46, 85.64, 75.3, 0) 100%);
position: absolute;
}
/* .btn_start{
padding:10px;
border-radius:30px;
color:#000;
font-weight:600;
text-transform:uppercase;
} */
.header{
padding:5px 0px;
}
.textCall{
background: linear-gradient(82.15deg, #FFDD9D -4.58%, #7E5B33 21.83%, #A37E56 24.97%, #FFF2CD 40.84%, #E7BF88 56.11%, #FFDD9D 67.22%, #A37E56 79.81%, #E7BF88 86.78%, #E7BF88 105.81%, #7E5B33 106.47%, #FFF2CD 158.31%, #FFF2CD 163.15%, #A37E56 188.07%);
-webkit-background-clip: text;
color: transparent;
font-optical-sizing: auto;
}
.Guidelines li{
/* font-size:18px;
font-family: FONTSPRING DEMO - Roc Grotesk Condensed Medium; */
font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0em;
    padding-bottom: 20px;
    font-family: 'Roc Grotesk Light';
}
.Guidelines li.textCall, .Guidelines li.textCall .textSpan{
display:flex;
align-items:center;
}
.Guidelines li.textCall .textSpan .number{
margin-right:10px;
}
.textSpan{
padding:0 10px;
}

.textCall .normalText{
color: #cdcdcd !important;
font-weight: 400;
background:none;
line-height: 24px;
}
.heading_text.text2{
  font-size: 28px;
    font-weight: 350;
    line-height: 50px;
    margin-bottom: 10px;
}
.heading_text{
font-size: 30px;
text-align: center;
text-transform: uppercase;
}
.middle_text{
 color: #fff;
    text-align: center;
    font-size: 25px;
    line-height: 25px;

}
.step_wrapper{
display:flex;
flex-wrap:wrap;
align-items:center;
}
.step_wrapper > div{
width:50%;
}
  .powerDiv{
  width: 42% !important;
  }
  .powerDiv p:first-child{
    background: linear-gradient(90deg, #FFDD9D -2.89%, #7E5B33 5.36%, #A37E56 8.57%, #FFF2CD 30.47%, #E7BF88 51.57%, #FFDD9D 64.01%, #E7BF88 73.64%, #7E5B33 83.09%, #A37E56 93.27%, #E7BF88 112.48%, #FFF2CD 112.49%, #FFF2CD 115.93%, #A37E56 140.37%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  }
.step_wrapper .powerDiv .contentText2 {
color: #fff;
text-transform: uppercase;
font-weight: 500;
/*font-size:64px;*/
font-size:61px; /*09-03-2024*/  
line--height:64px;
  
}
.step_wrapper .powerDiv {
font-size: 56px;
font-weight: 500;
line-height: 56px;
letter-spacing: 0em;
text-align: center;
padding:20px 0;
}
/* .step_wrapper .powerDiv .textCall{
font-size:35px;
} */

.step_wrapper .contentText{
color: #fff;
text-transform: uppercase;
font-weight: 500;
font-size: 48px;
line-height: 50px;

}
.thinnerText{
font-weight: 350;
text-transform: uppercase;
font-size: 43px;
line-height: 50px;
}
.step_wrapper .gorgeousText{
margin-top:30px;
text-align: center;
font-size: 32px;
font-weight: 500;
line-height: 34px;
letter-spacing: 0em;
color: #fff;
}
.img_wrapper{
width:25%;
}
.img_wrapper>img{
border-radius:10px;
}
/* .info{
  padding: 25px 10px;
} */
.info>h3{
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    position: relative;
    top: -20px;

}
.width100{
width:100% !important;
}
.info>h3, .info .productType{
 text-transform: uppercase;
/* font-size: 20px;
font-weight: 500;
line-height: 16px;
letter-spacing: 0.05em; */
}
.productType{      
   color: #EDC78D;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 1px;
}
.productShadeAvl{
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 10px;
    font-size: 12px;
    font-style: normal;
    font-weight: 350;
    line-height: 15px;
}
.productShadeAvl span{
  margin-left: 10px;
}
.productShadeAvl img{
   vertical-align: middle;
}
.productShadeAvl .shadesIcon.apply{
      transform: rotate(180deg);
}
.productsContainer{
/* background: linear-gradient(0deg, #1D1D1D -3.49%, rgba(0, 0, 0, 0.512972) 63.21%, rgba(0, 0, 0, 0) 133.45%); */
border: 1px solid #444444;
padding:0 20px;
border-radius:20px 20px 0 0px;
position:relative;
  padding-bottom:40px;
}
.variantsInfo div{
    width: 25px;
    height: 25px;
    border-radius: 4px;
}
.rightArrow.desktopView{
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
}
.looksGuide{
color: #fff;
border: 1px solid #31302F;
padding: 20px 12px;
/* margin: 20px; */
margin-left:20px;
height:max-content;
background:rgba(0, 0, 0, 0.60);
border-radius:16px;
}
/* .looksGuide p, .looksGuide span, .info h3, .info .productType{
font-family: "FSP DEMO - Roc Grotesk Medium" !important;
} */
.looksGuide p:last-child{
 line-height: 20px;
    font-size: 15px;
    font-weight: 500;
    font-style: normal;
    margin-top: 7px;
}
.looksGuide p:first-child>span{
    color: #EDC78D;
    font-size: 17px;
    font-weight: 500;
  line-height:17px;
}
.looksGuide p>span:first-child{
    color: #EDC78D;
    margin-right: 10px;
    clear: both;
    display: block;
    font-size: 22px;
    font-weight: 500;
    line-height: 24px;

}
/* .product_info{
padding: 0 20px;
} */
.toolProductsWrapper > div{
width:25%;
}
.variantsCount{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    color: #fff;
    margin-bottom: 0px;
    min-height: 150px;
}
.rightArrow.mobView{
display:none;
}
.productImg p{
padding-top: 10px;
}
.variantsInfo {
width: 50%;
display: flex;
align-items: center;
padding: 10px 0;
}

.variantsInfo p{
 margin-left: 10px;
    font-size: 12px;
    font-style: normal;
    font-weight: 350;
    line-height: 15px;
    padding-right: 5px;
/* font-family: "FSP DEMO - Roc Grotesk Light" !important; */
}
.productDetails{
/* display: flex; */
position: relative;
color:#fff;
}   
.toolProductsWrapper{
display: flex;
justify-content: space-around;
align-items: center;
}


.productImg{
position: relative;
top: -30px;
z-index: 999; 
}
/* .productImg p{
font-family: "FSP DEMO - Roc Grotesk Light" !important;
} */

/* .rightArrow.mobview{
position: absolute;
right: 0;
top: -25px;
z-index:999;
} */
.product_info{
position:relative;
}
.productShadeAvl span {
display:none;
}
.sizeChartIcon p{
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 350;
line-height: 16px;
letter-spacing: 0.8px;
text-transform: capitalize;
}
.coupon_btns .tryAgain.textCall{
text-transform: uppercase;
    height: auto;
    margin: 35px 0px;
    font-size: 28px;
    border: 1px solid #E7BF88;
    line-height: 28px;
    font-weight: 500;
    padding: 7px 20px 0 20px;
    border-radius: 90px;
    margin-right: 20px;

}
.page-temp-ultimate-face-definition .coupon_btns .tryAgain.textCall {
    text-transform: uppercase;
    height: auto;
    margin: 35px 0px;
    font-size: 28px;
    border: 1px solid #E7BF88;
    line-height: 32px;
    font-weight: 500;
    padding: 11px 23px 10px 23px;
    border-radius: 90px;
    margin-right: 20px;
    width: 22%;
}
.video_display_mobile{
   display:none; 
}
.video_display_desk{
  display:block; 
}
/*** start added code on 11-03-24***/
@media (min-width:768px) and (max-width:1024px){
  .video_display_mobile{
   display:block; 
}
.video_display_desk{
  display:none; 
}
.img_wrapper{
width:100%;
}
.page_wrapper, .PageContainer{
height:unset;
}
  .mobView video{
        height: 100vh;
        width: 100%;
  }
  .skinTone>ul{
    margin: 22px auto 0;
    gap: 30px;
  }
  .coupon_btns .btn_start{
        padding: 10px 0 8px;
  } 
   .ymkMain.widthUnset{
  width:unset;
   }
  .powerDiv{
    width:100% !important;
}
  .ymkMain.width60{
    width: 100% !important;
  }
 .ymkMain{
    margin: auto;
    display: flex;
    width: 100% !important;
    justify-content: space-between;
    align-items: center;
    margin-top: 0px;
   flex-direction: column;
       position: relative;
 }
  .YMK_Wrapper{
    width: 100%;
  }
  .product_wrapper{
    position: fixed;
    bottom: 0%; 
    background: #000;
    width: 100%;
    left: 0;
    min-height:150px;
    /* transform: translate(0, -50px); */
    z-index: 999;
  }
.header_new{
/* width:25%; */
  width: 80px;
height: 40px;
}
.rightArrow.desktopView{
display:none; 
}
.powerDiv> p{
    font-size: 35px;
    line-height: 35px;
  
}
.step_wrapper .thinnerText{
line-height: 34px;
font-size: 32px;
}
.step_wrapper .contentText{
line-height: 34px;
font-size: 32px;
}
.step_wrapper .powerDiv .contentText2{
    font-size: 35px;
    line-height: 32px;
}
  .step_wrapper .powerDiv{
    padding: 10px 0;
  }
  .step_wrapper .gorgeousText{
    margin-top: 10px;
     margin-bottom: 10px !important;
  }
     .button_start{
           margin-top: 20%;
     }
    .step_4 .button_start{
           margin-top: 5%;
     }
.info>h3{
position:unset;
  font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}
.product_info.products_2 .info>h3{
   font-size: 16px;
}

.product_info.products_5 .info>h3{
   font-size: 16px;
}
  
.info .productType{
  font-size: 18px;
font-style: normal;
font-weight: 500;
letter-spacing: 0.9px;
line-height: 16px;
}
.powerDiv .contentText{
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: 48px;
}
.rightArrow.mobView{
display:block;
position: absolute;
right: 0;
top: -25px;
z-index:999;
}
.header{
/* margin-top:30px; */
}
.bg_text{
margin-top:15px;
}
.bg_img_text{
display:block;
      padding: 10% 0;
    margin: 2% auto;
}
.bg_img, .bg_text{
width:100%;
}
.step_wrapper{
display:block;
}
.toolProductsWrapper > div{
width:100%;
}
.heading_text.text2{
font-size: 35px;
font-style: normal;
font-weight: 350;
line-height: 40px;
margin-bottom: 0px;
}
.middle_text{
font-size: 20px;
    font-style: normal;
    font-weight: 350;
    line-height: 27px;

}
.heading_text.textCall.text3{
line-height: 26px;
font-size: 35px;
}
  
.Guidelines li{
font-style: normal;
    font-weight: 350;
    line-height: 18px;
    padding: 6px;
    margin-left: 25px;
    font-size: 16px;
}
  .textSpan {
    font-size:25px;
  }
.btn_start{
font-size:20px;
  margin: 25px 0px;
  /* padding: 5px; */
}
.messages{
font-size: 20px;
}
.step_wrapper > div{
width:100%;
}
  .looksGuide{
    width: 94% !important;
        left: 12px;
        z-index: 99;
        background: #000;
    position: fixed;
    top: -10px;
  }
.productDetails{
display: flex;
}
.desText{
display:none;
}
.mobText{
display:block;
margin-bottom:30px;
}
.looksGuide p>span:first-child{
clear: unset;
display: inline;
}
.info{
  padding: 25px 10px;
}
.toolProductsWrapper{
display:block;
}
.productShadeAvl{
font-size: 14px;
font-style: normal;
font-weight: 350;
line-height: 15px;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
}
.productShadeAvl span {
display:block;
}
.variantsCount{
width:100%;
display:none;
  min-height:auto;
}
.variantsCount.showShades{
display:flex;
}
.variantsInfo p{
line-height: 14px;
font-size: 14px;
}
.sizeChartIcon p{
font-size: 12px;
}
.productImg{
 position: relative;
top: -30px;
z-index: 999; 
}
.textHide{
display:none;
}
.sizeChartIcon{
position: absolute;
top: -130px;
z-index: 99;
flex-direction: column;
      left: -15px;
}
  .overRideText{
      bottom: 156px;
    z-index:99;
    font-size:45px;
  }
.SizeChartWrapper{
  top: 65%;
left: 55%;
width: 100%;
transform: translate(-54%,-60%);
}
.ChartFlex{
  width: 100%;
gap: 30px;
}
li.tones{
width: 150px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.sizechartHeading{
font-size: 24px;
font-style: normal;
font-weight: 350;
line-height: 32px;
}
.ChartFlex{
margin-top: 35px;
}
.skinTone>h3{
line-height: 14px;
font-size: 14px;
}
.skinTone>ul{
margin-top: 8px;
}
.productTones h3{
font-size: 14px;
font-style: normal;
font-weight: 350;
line-height: 14px;
}
.productTones ul{
 display: flex;
flex-direction: column;
}
.productTones > ul li{
  width: 150px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.couponCode{
font-size: 32px;
font-style: normal;
font-weight: 350;
line-height: 40px;
text-transform: uppercase;
text-align: center;
margin-top:20px;
  position:relative;
  z-index:9999;
}
.coupon_btns{
display:flex;
justify-content:space-around;
align-items:center;
}
.coupon_btns > button{
width:45%;
}
.coupon_btns .tryAgain.textCall{
text-transform: uppercase;
width: 40%;
height: auto;
margin-top: 35px;
font-size: 15px;
font-weight: 500;
border: 1px solid #E7BF88;
  padding: 9px;
border-radius: 90px;
}
.looksGuide p:first-child>span, .looksGuide p:last-child{
font-size: 13px;
}
.looksGuide p>span:first-child{
font-size: 24px;
}
.page-temp-product-look .header_new{
/* display:none; */
}
.toolProductsWrapper > div {
/* width: 90%;
margin: 20px auto; */
}
.btn_start.tutorialLook{
font-size: 20px;
      margin: 10px 0px !important;
      padding: 7px 20px 0px 20px;
}
.almostText.textCall{
line-height: 40px;
font-size: 32px;
}
.coupon_btns > button,.coupon_btns .tryAgain.textCall{
  font-size: 24px;
}
.step_4 .button_start::after {
top:0;
  height:15px;
}
.YMK_Wrapper{
display:flex;
justify-content:center;
  min-width:unset;
}
.Guidelines{
  margin-bottom: 10px;
}
.width100{
width:100% !important;
}
  .looksGuide{
    margin: 20px auto;
    width: 90%;
  }

    .couponPopup{   
position: fixed;
    top: 50%;
    /* background: #000; */
    color: #fff;
    padding: 10px 20px;
    left: 50%;
    width: 70%;
    z-index: 9999;
    text-align: center;
    transform: translate(-50%,-50%);
}
       
  .YMK_Wrapper.height400, .YMK_Wrapper.height400 #YMK-module-iframe{
    height:70vh !important;
  }
  #YMK-module-iframe{
    height:85vh !important;
  }
  .YMK_Wrapper.productYMK #YMK-module button#close{
    display:none !important;
  }
 
  }

/*** end added code  on 11-03-24 ***/
@media screen and (max-width:767px){
  .page-temp-ultimate-face-definition .coupon_btns .tryAgain.textCall {
   padding: 11px 23px 5px 23px;
    width: 70%;
    margin-top: 16px ;
}
     .button_start{
           margin-top: 50%;
     }
    .step_4 .button_start{
           margin-top: -2%;
     }
  .button_start.coupon_btns{
    margin-top:-9%;
    position:relative;
    z-index:9999;
  }
  .video_display_mobile{
   display:block; 
}
.video_display_desk{
  display:none; 
}
  .img_wrapper{
    width:100%;
  }
.page_wrapper, .PageContainer{
height:unset;
}
  .mobView video{
        height: 100%;
    width: 100%;
  }
  .skinTone>ul{
    margin: 22px auto 0;
    gap: 30px;
  }
  .coupon_btns .btn_start{
        padding: 16px 34px;
  } 
   .ymkMain.widthUnset{
  width:unset;
   }
  .powerDiv{
    width:100% !important;
}
  .ymkMain.width60{
    width: 100% !important;
  }
 .ymkMain{
    margin: auto;
    display: flex;
    width: 100% !important;
    justify-content: space-between;
    align-items: center;
    margin-top: 0px;
   flex-direction: column;
       position: relative;
 }
  .YMK_Wrapper{
    width: 100%;
  }
  .product_wrapper{
    position: fixed;
    bottom: 0%; 
    background: #000;
    width: 100%;
    left: 0;
    min-height:150px;
    /* transform: translate(0, -50px); */
    z-index: 999;
  }
.header_new{
/* width:25%; */
  width: 80px;
height: 40px;
}
.rightArrow.desktopView{
display:none; 
}
.powerDiv> p{
    font-size: 35px;
    line-height: 35px;
  
}
.step_wrapper .thinnerText{
line-height: 34px;
font-size: 32px;
}
.step_wrapper .contentText{
line-height: 34px;
font-size: 32px;
}
.step_wrapper .powerDiv .contentText2{
    font-size: 35px;
    line-height: 32px;
}
  .step_wrapper .powerDiv{
    padding: 10px 0;
  }
  .step_wrapper .gorgeousText{
    margin-top: 10px;
     margin-bottom: 10px !important;
  }
     /* .button_start{
           margin-top: 10px;
     } */
.info>h3{
position:unset;
  font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}
.product_info.products_2 .info>h3{
   font-size: 16px;
}

.product_info.products_5 .info>h3{
   font-size: 16px;
}
  
.info .productType{
  font-size: 18px;
font-style: normal;
font-weight: 500;
letter-spacing: 0.9px;
line-height: 16px;
}
.powerDiv .contentText{
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: 48px;
}
.rightArrow.mobView{
display:block;
position: absolute;
right: 0;
top: -25px;
z-index:999;
}
.header{
/* margin-top:30px; */
}
.bg_text{
margin-top:15px;
}
.bg_img_text{
    display:block;
    padding: 10% 0;
    margin: 2% auto;
}
.bg_img, .bg_text{
width:100%;
}
.step_wrapper{
display:block;
}
.toolProductsWrapper > div{
width:100%;
}
.heading_text.text2{
font-size: 35px;
font-style: normal;
font-weight: 350;
line-height: 40px;
margin-bottom: 0px;
}
.middle_text{
font-size: 20px;
    font-style: normal;
    font-weight: 350;
    line-height: 27px;

}
.heading_text.textCall.text3{
line-height: 26px;
    font-size: 35px;

}
.Guidelines li{
font-style: normal;
    font-weight: 350;
    line-height: 18px;
    padding: 6px;
    margin-left: 25px;
    font-size: 16px;
}
  .textSpan {
    font-size:25px;
  }
.btn_start{
font-size:20px;
  margin: 25px 0px;
  /* padding: 5px; */
}
.messages{
font-size: 20px;
}
.step_wrapper > div{
width:100%;
}
  .looksGuide{
    width: 94% !important;
        left: 12px;
        z-index: 99;
        background: #000;
    position: fixed;
    top: -10px;
  }
.productDetails{
display: flex;
}
.desText{
display:none;
}
.mobText{
display:block;
margin-bottom:30px;
}
.looksGuide p>span:first-child{
clear: unset;
display: inline;
}
.info{
  padding: 25px 10px;
}
.toolProductsWrapper{
display:block;
}
.productShadeAvl{
font-size: 14px;
font-style: normal;
font-weight: 350;
line-height: 15px;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
}
.productShadeAvl span {
display:block;
}
.variantsCount{
width:100%;
display:none;
  min-height:auto;
}
.variantsCount.showShades{
display:flex;
}
.variantsInfo p{
line-height: 14px;
font-size: 14px;
}
.sizeChartIcon p{
font-size: 12px;
}
.productImg{
 position: relative;
top: -30px;
z-index: 999; 
}
.textHide{
display:none;
}
.sizeChartIcon{
position: absolute;
top: -130px;
z-index: 99;
flex-direction: column;
      left: -15px;
}
  .overRideText{
      bottom: 156px;
    z-index:99;
    font-size:45px;
  }
.SizeChartWrapper{
  top: 50%;
left: 55%;
width: 100%;
transform: translate(-54%,-60%);
}
.ChartFlex{
  width: 100%;
gap: 30px;
}
li.tones{
width: 150px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.sizechartHeading{
font-size: 24px;
font-style: normal;
font-weight: 350;
line-height: 32px;
}
.ChartFlex{
margin-top: 35px;
}
.skinTone>h3{
line-height: 14px;
font-size: 14px;
}
.skinTone>ul{
margin-top: 8px;
}
.productTones h3{
font-size: 14px;
font-style: normal;
font-weight: 350;
line-height: 14px;
}
.productTones ul{
display: flex;
flex-direction: column;
}
.productTones > ul li{
  width: 150px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.couponCode{
font-size: 32px;
font-style: normal;
font-weight: 350;
line-height: 40px;
text-transform: uppercase;
text-align: center;
margin-top:20px;
  position:relative;
  z-index:99;
}
.coupon_btns{
display:flex;
justify-content:space-around;
align-items:center;
}
.coupon_btns > button{
width:45%;
}
.coupon_btns .tryAgain.textCall{
text-transform: uppercase;
width: 40%;
height: auto;
margin-top: 35px;
font-size: 15px;
font-weight: 500;
border: 1px solid #E7BF88;
  padding: 9px;
border-radius: 90px;
}
.looksGuide p:first-child>span, .looksGuide p:last-child{
font-size: 13px;
}
.looksGuide p>span:first-child{
font-size: 24px;
}
.page-temp-product-look .header_new{
/* display:none; */
}
.toolProductsWrapper > div {
/* width: 90%;
margin: 20px auto; */
}
.btn_start.tutorialLook{
font-size: 20px;
      margin: 10px 0px !important;
      padding: 7px 20px 0px 20px;
}
.almostText.textCall{
line-height: 40px;
font-size: 32px;
}
.coupon_btns > button,.coupon_btns .tryAgain.textCall{
  font-size: 24px;
}
.step_4 .button_start::after {
top:0;
  height:15px;
}
.YMK_Wrapper{
display:flex;
justify-content:center;
  min-width:unset;
}
.Guidelines{
  margin-bottom: 10px;
}
.width100{
width:100% !important;
}
  .looksGuide{
    margin: 20px auto;
    width: 90%;
  }
  /* .product_info{
    position: absolute;
    bottom: 0;
  }
  .productsContainer{
    position: absolute;
    bottom: 0;
    z-index: 999;
    background: #111;
    left: 0; 
    right:0;
} */
    .couponPopup{   
position: fixed;
    top: 50%;
    /* background: #000; */
    color: #fff;
    padding: 10px 20px;
    left: 50%;
    width: 70%;
    z-index: 9999;
    text-align: center;
    transform: translate(-50%,-50%);
}
       
   .YMK_Wrapper.height400, .YMK_Wrapper.height400 #YMK-module-iframe{
    height:60vh !important;
  } 
  .YMK_Wrapper.productYMK #YMK-module button#close{
    display:none !important;
  }
  /* .YMK_Wrapper.productYMK {
  /* height:380px !important; */
    /* min-height:0 !important; */
  }
  /* .YMK_Wrapper.productYMK #YMK-module-iframe{
    height: calc(100% - 100px) !important;
  } */

  
}
  
  @media (max-width:390px) and (max-height: 1000px) {
    .heading_text.text2, .heading_text.textCall.text3{
      font-size:30px;
    }
    .step_wrapper .powerDiv .contentText2, .powerDiv> p, .step_wrapper .contentText, .step_wrapper .thinnerText {
       font-size:28px;
       line-height: 27px;
    }
    .bg_img_text{
          margin: 0 auto;
    }
    .bg_text{
          margin-top: 10px;
    }
    .Guidelines li{
    line-height: 10px;
    padding-bottom: 6px;
    margin-left: 20px;
    font-size: 15px;
    }
     .YMK_Wrapper.height400 #YMK-module{
        height: 350px !important;
     }
    .YMK_Wrapper.height400, .YMK_Wrapper.height400 #YMK-module-iframe {
      height: 350px !important;
      min-height:unset !important;
    }
    .step_wrapper .gorgeousText {
    margin-top: 18px;
    }
    .btn_start.tutorialLook {
          margin: 25px 0px !important;
    }
    .looksGuide {
          padding: 10px;
          margin: 10px auto;
    }
    /* .product_info{
    position:relative;  
       bottom: 122px;
    left: 0;
    z-index: 9999;
    background: #000;
    } */
    /* .sizeChartIcon {
    position: relative;
    top: -262px;
    z-index: 99;
    left: 0;
    } */
  }
   @media (max-width:360px) and (max-height: 780px) {
        .heading_text.text2, .heading_text.textCall.text3{
      font-size:25px;
          line-height: 25px;
    }
     .heading_text.textCall.text3 {
       margin-top: 0;
     }
    .step_wrapper .powerDiv .contentText2, .powerDiv> p, .step_wrapper .contentText, .step_wrapper .thinnerText {
       font-size:25px;
       line-height: 25px;
    } 
     .Guidelines li {
    line-height: 5px;
    padding-bottom: 0px;
    font-size: 14px;
   }
     .btn_start.tutorialLook {
    margin: 10px 0px !important;
}
     .looksGuide p:last-child {
           margin-top: 0px;
  line-height: 20px;
  }
     
   }
@media (min-width: 769px) and (max-width: 999px){
  .ymkMain {
    width: 70% !important;
  }
}
@media (min-width: 769px){
  .header_new{
    display:block !important;  
  }
  body.page-temp-defineu{
    line-height: 4rem;
  }
}