/*New Design releted changes */
@font-face {
  font-family: "Neutraface Text Book";
  src: url("//cdn.shopify.com/s/files/1/0956/1540/t/6/assets/NeutrafaceText-Book.woff2?v=13463058888418852449") format("woff2"), 
  url("//cdn.shopify.com/s/files/1/0956/1540/t/6/assets/NeutrafaceText-Book.woff?v=15242635555992611917") format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Neutra Cond";
  src: url("//cdn.shopify.com/s/files/1/0956/1540/t/6/assets/NeutrafaceCondensed-Bold.woff2?v=14506382036798540054") format("woff2"), 
  url("//cdn.shopify.com/s/files/1/0956/1540/t/6/assets/NeutrafaceCondensed-Bold.woff?v=15079719012664692063") format("woff");
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: "Neutra Cond";
  src: url("//cdn.shopify.com/s/files/1/0956/1540/t/6/assets/NeutrafaceCondensed-Medium.woff2?v=17183537595275392421") format("woff2"), url("//cdn.shopify.com/s/files/1/0956/1540/t/6/assets/NeutrafaceCondensed-Medium.woff?v=17381695225574942830") format("woff");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Neutra Cond";
  src: url("//cdn.shopify.com/s/files/1/0956/1540/files/NeutrafaceCondensed-Light.woff2?v=1593152942") format("woff2"), url("//cdn.shopify.com/s/files/1/0956/1540/files/NeutrafaceCondensed-Light.woff?v=1593152854") format("woff");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

/*-- main-background ----*/
.survey-page{background-color: #919191; overflow: inherit;}
.survey-body,.sq-atm1d-loading-cover{background-color: #919191; }


/* right-prograss-bar */
.progress-box-outer{background: #fff;border-radius: 20px;}
.progress-text{color:#fff;}

/*-- top-heading ---------------*/
.comment-text {text-align: center;}
.comment-text .top-heading,
.comment-text .top-heading-1 {
    text-align: center;
    font-family: 'Neutra Cond';
    font-size: 30px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
    margin-bottom: 75px;
    color: #d7e6ce;
    font-weight: bold;
}
.comment-text .top-heading-1{margin-bottom: 0 !important;font-weight: 300;}
/*-----------------------------

-- bottom-heading ---------------*/
.bottom-heading {
    text-align: center;
    font-family: 'Neutra Cond';
    font-size: 28px;
    color: #fff;
    line-height: 1.1;
    margin: 60px 0 50px;
    font-weight: 300;
}
.bottom-heading b {
    font-weight: 400;
}
/*-----------------------------

-- get-started-btn --------------- */
.survey-buttons{text-align:center; padding:0;}

/* section-2-heading */
/*How can Haute Custom Beauty help you today?*/

.survey-body>form, .survey-info, .survey-warning{text-align:center;}
.question-text{                                   /*    <---- aa css ne replace kari dejo*/
    font-family: "Neutraface Text Book";
    font-size: 30px;
    text-transform: inherit;
    color: #fff;
    line-height: 1;
    margin-bottom: 30px;
}
/*#question_text_G1 {
    font-size: 25px;
}*/
.comment-text{
 font-family: "Neutraface Text Book";
    text-transform: inherit;
    color: #fff;
    line-height: 1;
    font-size:1.833rem;
}
#comment_G3DSP .comment-text{font-size: 30px;}
/*#comment_G4DSP2 .comment-text{font-size: 27px;}
#question_A5 .comment-text,
#question_E1 .question-text,
#question_LS6 .question-text{font-size: 25px;}*/
/* back-next-btn */ 

.survey-buttons #btn_back {
    margin: 0 100px 0 0;
}
.survey-buttons #btn_continue {
    margin: 0 0 0 100px;
}
@media screen and (max-width: 767px){
    .survey-buttons #btn_continue{margin: 0 0 0 50px;}
    .survey-buttons #btn_back{margin: 0 50px 0 0;}
}
.footer a{color: white;}

.survey_image_common{width:212px; height: auto;}
.sq-atm1d-tiled .sq-atm1d-button {padding: 0;border: 0;}
#btn_goback{display: none;}

.comment-text .top-heading {margin-bottom: 66px;}
.comment-text .survey-image-original {max-width: 420px;width: 100%;}
.bottom-heading {max-width: 680px;width: 100%;line-height: 1.1;display: block;margin: 48px auto 42px;}
.footer a, .footer a:hover {color: #fff;}
.sq-atm1d .sq-atm1d-button, .sq-atm1d .sq-atm1d-button:hover {background: transparent;}
.sq-atm1d-tiled .sq-atm1d-button {padding: 0;border: 0;}
.progress-box-outer{border-color: #fff;overflow: hidden;}
.progress-box-outer .progress-box-completed {background: #919191;}
.sq-atm1d .sq-atm1d-button.sq-atm1d-selected {background-color: #424949;border-color: transparent;color: #fff;}
 
#question_G1  .sq-atm1d-buttons ,#question_LS6 .sq-atm1d-buttons{max-width: 905px;display: -webkit-flex;display: flex;flex-wrap: wrap;margin: auto;}

@media only screen and (max-width: 992px) {
    #question_G1  .sq-atm1d-buttons,#question_LS6  .sq-atm1d-buttons {max-width: 680px;} Â  
}

@media only screen and (max-width: 767px) {
    #question_G1  .sq-atm1d-buttons,#question_LS6  .sq-atm1d-buttons {max-width: 452px;}
    #question_A2 .sq-atm1d-block{padding-top: 0px;}
}

@media only screen and (max-width: 480px) {
    #question_G1  .sq-atm1d-buttons,#question_LS6  .sq-atm1d-buttons {max-width: 320px;justify-content: center;}
    #question_A2 .sq-atm1d-button.clickable{max-height: 260px;}
    #question_A2 .sq-atm1d-block{padding-top: 0px;}
    #question_A2 .sq-atm1d-button.clickable{margin-top: 40px;}
}

.genderFace{background-size: contain !important;display: inline-block !important;max-width: 430px;max-height: 430px;}
img.genderFace{z-index: 1;}
.genderFace.NonBinary canvas{left:-15px !important;}
@media screen and (max-width: 767px){
    .genderFace{max-width: 290px; max-height: 290px;}
    .genderFace canvas{max-width: 290px; max-height: 290px;}
}

#question_T1a .question-text,#question_T1b .question-text{text-align: left;padding-left: 50px !important;margin: 0 !important;padding-bottom: 10px !important;text-transform: uppercase; font-size: 25px;}
#question_T1a .instruction-text,#question_T1b .instruction-text{display: none;}
#question_T1a .sq-atm1d .sq-atm1d-button.sq-atm1d-selected,#question_T1b .sq-atm1d .sq-atm1d-button.sq-atm1d-selected{background: transparent;}
.NonBinary .hoverElement{left: -15px ;}
.NonBinary .hoverElement.upperLips{left: 0px ;}

.hoverElement{display: none;position: absolute;z-index: 0}
.hoverElement.hoverd{display: block;}
.hoverElement.selected{display: block;}
#question_T1a .sq-atm1d-button.clickable.sq-atm1d-selected .sub_image,
#question_T1b .sq-atm1d-button.clickable.sq-atm1d-selected .sub_image{display: none !important;}
#question_T1a .sq-atm1d-button.clickable.sq-atm1d-selected .main_image,
#question_T1b .sq-atm1d-button.clickable.sq-atm1d-selected .main_image{display: inline !important;}
#question_T1a .sq-atm1d-button.clickable .sq-atm1d-legend br,
#question_T1b .sq-atm1d-button.clickable .sq-atm1d-legend br{display: none;}
#question_T1a.sq-atm1d .sq-atm1d-button.sq-atm1d-selected,
#question_T1b.sq-atm1d .sq-atm1d-button.sq-atm1d-selected{background: transparent;}
.sub_image{display:none;}
#T1TzoneLeft,#T1CheekLeft{display: inline-block;}

#question_A2 .sq-atm1d-button.clickable .sq-atm1d-legend br{display: none;}
#question_A2 .sq-atm1d-button.clickable .sq-atm1d-legend  {position: relative; ;display: inline-block; }
#question_A2 .sq-atm1d-button.clickable .hover_image{ width: 120px;position: absolute;right:-4px;top: -110px;visibility: visible;}


#question_A2 .sq-atm1d-button.clickable.sq-atm1d-hovered .hover_image{visibility: visible;}
#question_A2 .sq-atm1d-button.clickable.sq-atm1d-selected:hover .hover_image{visibility: visible;}
#question_A2 .sq-atm1d-block{padding-top: 100px;}
#question_A2 .Man.main_image{width: 170px;}
#question_A2 .sq-atm1d-button.clickable .Man.hover_image{width: 100px;top:-98px;}
#question_A2 .dropdown-instruction{padding: 0;margin: 0;}
#question_A2 .dropdown-instruction li{list-style:none;width:25%;float:left;text-align: left;padding: 0 10px;}

#question_A2 .dropdown-instruction li em{position: relative; font-weight:400;color:white;font-size: 18px;text-transform: uppercase;font-style: normal;cursor: pointer; font-family: "Neutra Cond";}
#question_A2 .dropdown-instruction li div.hideme{color: #444;font-size: 15px;margin-top: 5px; font-family: "Neutraface Text Book"; text-align: left; line-height: 1.2;}
#question_A2 .dropdown-instruction.Man li{width:20%;padding: 0px;}
#question_A2 .dropdown-instruction.Man li em{padding-right: 5px;}
#question_A2 #divDropDown{min-height: 100px;clear: both;}
#question_A2 .dropdown-instruction li #l1 em,#question_A2 .dropdown-instruction li #d1{color:#d7fdd4;}
#question_A2 .dropdown-instruction li #l2 em,#question_A2 .dropdown-instruction li #d2{color:#a3f1f1;}
#question_A2 .dropdown-instruction li #l3 em,#question_A2 .dropdown-instruction li #d3{color:#59bcf0;}
#question_A2 .dropdown-instruction li #l4 em,#question_A2 .dropdown-instruction li #d4{color:#3564ad;}
#question_A2 .dropdown-instruction li p{display: inline-block;position: relative;padding-right: 25px;}
.plus-i-arrow{position: absolute; right: 0; top: 2px; height: 13px; width: 13px; display: block;}
#question_A2 .dropdown-instruction li .plus-i-arrow::after,
#question_A2 .dropdown-instruction li .plus-i-arrow::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #000;
    margin: auto;
}
#question_A2 .dropdown-instruction li .plus-i-arrow::after {
    width: 2px;
    height: 100%;
}
#question_A2 .dropdown-instruction li #l1 .plus-i-arrow::after,
#question_A2 .dropdown-instruction li #l1 .plus-i-arrow::before{background: #d7fdd4;}
#question_A2 .dropdown-instruction li #l2 .plus-i-arrow::after,
#question_A2 .dropdown-instruction li #l2 .plus-i-arrow::before{background: #a3f1f1;}
#question_A2 .dropdown-instruction li #l3 .plus-i-arrow::after,
#question_A2 .dropdown-instruction li #l3 .plus-i-arrow::before{background: #59bcf0;}
#question_A2 .dropdown-instruction li #l4 .plus-i-arrow::after,
#question_A2 .dropdown-instruction li #l4 .plus-i-arrow::before{background: #3564ad;}
#question_A2 .dropdown-instruction li p.toggle-dic .plus-i-arrow::after{content: initial;}




#question_S2 ul.Man .sq-atm1d-button.clickable,#question_S2 ul.NonBinary .sq-atm1d-button.clickable{float: left;}
#question_S2 .Man.survey_image_common,#question_S2 .NonBinary.survey_image_common{}
#question_LS4 .sq-atm1d-button.clickable,
#question_S2 ul.Woman .sq-atm1d-button.clickable{min-width: 230px}
#eyeLeftPart{display: inline-block;}
#eyeLeftPart img{max-width: 420px; width: 100%; object-fit: contain;}
#question_E1 ul.sq-atm1d-buttons.sq-atm1d-tiled{width: 50%}
#question_E1 .sq-atm1d-button.clickable .sq-atm1d-legend br{display: none;}
#question_E1.sq-atm1d .sq-atm1d-button.sq-atm1d-selected{background: transparent;}
#comment_G4DSP1,#comment_G4DSP3{display: none;}
#comment_G4DSP2 .leftPart,#comment_G4DSP2 .rightPart{display: inline-block;}
#comment_G4DSP2 .leftPart{width: 50%;padding-top: 50px;padding-right: 20px; vertical-align:middle;}
#comment_G4DSP2 .rightPart{width: 45%; vertical-align: middle;}
.orderNowBtn {
    background-color: #000;
    color: #fff;
    font-size: 1.367rem;
    border: 1px solid #000;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    cursor: pointer;
    padding: .7em 1em;
    margin: 0;
    text-decoration: none;
    font-family: "Neutra Cond";
    font-weight: 400;
    display: inline-block;
    max-width: 235px;
    text-align: center;
    line-height: 1.1;
    letter-spacing: 0.2px;
}
.exit-message{margin-top: -105px;}
.footer a {
    font-family: "Neutra Cond";
    text-transform: uppercase;
    font-weight: 500;
}
.orderNowBtn:hover{color: #fff;}
.orderNowBtn b{text-decoration: underline; font-weight: bold;}

.progress-bar {display: none;}
@media screen and (max-width: 1024px){

    .label_A2 .sq-atm1d-tiled .sq-atm1d-button{width: 100% !important; max-width:360px !important;}
}

@media screen and (max-width: 1024px){
    #question_E1 ul.sq-atm1d-buttons.sq-atm1d-tiled{width: 100%;}
    .label_E1 .sq-atm1d-tiled .sq-atm1d-button{width: 49% !important;}
}
@media screen and (min-width: 1024px){
    #question_S3 .sq-atm1d-button.clickable{width: 212px;}
}
@media screen and (max-width: 1023px){
    #question_S3 .sq-atm1d-button.clickable{width: 260px;}
}
@media screen and (max-width: 767px){
    
    .NonBinary .hoverElement{left: -10px ;}
    .NonBinary .hoverElement.upperLips{left: 0px ;}
    .comment-text .top-heading,
    .comment-text .top-heading-1{font-size: 25px;}
    .comment-text .top-heading{margin-bottom: 45px;}
    .bottom-heading{margin: 42px auto;}
    .logo-left{text-align: center;}
    .question-text,
    #comment_G3DSP .comment-text{font-size: 25px;}
    .label_INTRO1 .sq-atm1d-tiled .sq-atm1d-button,
    .label_INTRO2 .sq-atm1d-tiled .sq-atm1d-button{height: 200px !important;}
    .survey_image_common{width: 180px; object-fit: contain;}
    .hoverElement{max-height: 290px; max-width: 290px;}
    #comment_G4DSP2 .leftPart{width: 100%; padding: 0 0 30px;}
    #comment_G4DSP2 .comment-text{font-size: 25px;}
    #comment_G4DSP2 .rightPart{width: 100%;}
    .comment-text{font-size: 25px;}
    #question_T1a .question-text, #question_T1b .question-text{padding-left: 0 !important; text-align: center; margin-bottom: 10px !important;}
    #question_A2 .sq-atm1d-block{padding-top: 20px;}
    #question_A2 .dropdown-instruction li{width: 100% !important; padding: 10px !important;}
    #question_A2 #divDropDown{display: inline-block; width: 100%;}
    .label_A2 .sq-atm1d-tiled .sq-atm1d-button{margin-left: 0; margin-right: 0;}
    .label_E1 .sq-atm1d-tiled .sq-atm1d-button{width: 100% !important;}
    .sq-atm1d .sq-atm1d-buttons{text-align: center;}
    .exit-message{margin-top: -25px;}
    .exit-message .exit-message-text + div{text-align: center;}
    .orderNowBtn{font-size: 17.49px;}
    #question_S2 ul.Man .sq-atm1d-button.clickable,#question_S2 ul.NonBinary .sq-atm1d-button.clickable{float: none}
}

.survey_image_common {min-height: 160px;}
@media screen and (max-width: 767px) {
    .survey_image_common {min-height: 135px;}
}