@charset "UTF-8";

.hudanalyse {
    margin-top: 0;
    text-align: center;
    height: 100%;
    position: relative;
    font-family: 'VisbyCF-Regular';
    letter-spacing: .25px;
}

.hudanalyse fieldset {
    border: 0;
    border: 0;
    padding: 1.875rem;
    color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
}
.hudanalyse button:hover {
    cursor: pointer;
}

.hudanalyse .btnWrapper {
    margin-top: 38px !important;
    display: flex !important;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.kodeks_bg {
    width: 50%;
    background: rgba(25, 25, 25, 0.85) !important;
    padding: 40px 20px;
    margin: 0 auto;
}

@media screen and (max-width:768px) { 
    .kodeks_bg {
        width: 100%;
    }
}

.qpage-margins.bottom {
    margin-bottom: -190px;
}

@media screen and (max-width:480px) {
    .qpage-margins.bottom {
        margin-bottom: -75px;
    }
}

#qpage-container .errorLabel {
    color: #e30b5c;
}

#qpage-container .qpage-wrapper.active {
    display: block;
}

.qpage-steps {
    max-width: 1140px;
    margin: 0 auto 70px;
    padding: 70px 20px 0;
}

@media screen and (max-width:480px) {
    .qpage-steps {
        margin-bottom: 20px;
    }
}

.qpage-steps .qpage-step {
    box-sizing: border-box;
    height: 5px;
    width: 19%;
    float: left;
    border-bottom: solid 1px #7d8992;
}

.qpage-steps .qpage-step.gap {
    width: 9px;
}

@media screen and (max-width:480px) {
    .qpage-steps .qpage-step.gap {
        width: 5px;
    }
}

.qpage-steps .qpage-step.active {
    border-bottom: solid 5px #fff;
}

@media screen and (max-width:480px) {
    .qpage-steps .qpage-step {
        width: 18%;
    }
}

.qpage-wrapper {
    font-family: "adobe-garamond-pro",serif;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.39;
    letter-spacing: .5px;
    height: auto;
    padding: 137px 0 17%;
    text-align: center;
    color: #fff;
    display: none;
}

@media screen and (max-width:480px) {
    .qpage-wrapper {
        padding-bottom: 60px;
        padding-top: 130px;
    }
}

.qpage-wrapper.active {
    display: block;
}

.qpage-wrapper .btnWrapper {
    font-family: VisbyCF-Bold;
    display: inline-block;
    text-transform: uppercase;
    font-size: 14px;
    width: 100%;
}

@media screen and (max-width:480px) {
    .qpage-wrapper .btnWrapper {
        font-size: 13px;
    }
}

.qpage-wrapper .btnWrapper .questionBtn {
    width: 140px;
    color: #fff;
    display: inline-block;
    background-color: #222;
    padding: 0;
    font-family: VisbyCF-Bold;
    height: 45px;
    font-size: 14px;
}

@media screen and (max-width:480px) {
    .qpage-wrapper .btnWrapper .questionBtn {
        font-size: 13px;
        line-height: normal;
        letter-spacing: 1.3px;
    }
}

.qpage-wrapper .btnWrapper .questionBtn.next.disabled {
    background-color: #cdd6dd;
}

.qpage-wrapper .emptyImg {
    width: auto;
    height: auto;
    display: inline-block;
}

@media screen and (max-width:480px) {
    .qpage-wrapper .emptyImg {
        font-size: 13px;
        width: 39%;
        padding-right: 5px;
    }
}

.qpage-wrapper .emptyImg .qpageImg-wrapper {
    max-width: 200px;
    height: auto;
    float: left;
}

@media screen and (max-width:480px) {
    .qpage-wrapper .emptyImg .qpageImg-wrapper {
        width: 100%;
        margin-left: 0;
    }
}

.qpage-wrapper .emptyImg .qpageImg-wrapper img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

@media screen and (max-width:480px) {
    .qpage-wrapper .emptyImg .qpageImg-wrapper img {
        min-width: 0;
    }
}

.counter {
    font-family: VisbyCF;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1.3px;
}

.qpage-wrapper {
    /*
    background-image: url(images/EIR_Hudanalyse_1500x10021500x1002.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-bottom: 23%;
    */
    position: relative;
    min-height: calc(calc(var(--vh, 1vh) * 100) - 120px);
    overflow: hidden;
    padding: 0 0 50px;
}

.qpage-wrapper .img-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;';
}

.qpage-wrapper .img-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 61.9375em){
    .qpage-wrapper{
        min-height: calc(calc(var(--vh, 1vh) * 80) - 120px);
    }
}

/*
@media screen and (max-width:768px) {
.qpage-wrapper.step-0 {
padding-bottom: 32%;
}
}

@media screen and (max-width:480px) {
.qpage-wrapper.step-0 {
padding-bottom: 60px;
}
}
*/

.qpage-wrapper.step-0 .opacity-loader, .qpage-wrapper.step-1 .opacityLoader-wrapper {
    display: block;
}

.qpage-wrapper.step-0.review {
    display: none;
}

.qpage-wrapper.step-1 {
    /*background-image: url(images/EIR-skinanalysis-step1.jpg);*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-bottom: 23%;
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-1 {
        padding-bottom: 32%;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 {
        padding-bottom: 60px;
    }
}

.qpage-wrapper.step-1 .opacity-loader, .qpage-wrapper.step-1 .opacityLoader-wrapper {
    display: block;
}

.qpage-wrapper.step-1.review {
    display: none;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1.review .selfieTime-wrapper .photoGuide-wrapper .emptyImg {
        width: 100%;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1.review .photoGuide {
        display: none;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1.review .btnWrapper {
        margin-top: 13px;
    }
}

.qpage-wrapper.step-1.review .btnWrapper .questionBtn.next {
    width: 180px;
    margin: 0 0 0 15px;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1.review .btnWrapper .questionBtn.next {
        width: 70%;
        float: none;
        margin: 0;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper {
    background-color: transparent;
    width: 50%;
    text-align: center;
    height: auto;
    margin: 0 auto;
}

@media screen and (max-width:800px) and (min-width:768px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper {
        width: 80%;
    }
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper {
        width: 80%;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper {
        width: 90%;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .3px;
    text-align: center;
    color: #fff;
    margin-top: 30px;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .part-1 {
    width: 100%;
    margin: 0 auto;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .3px;
    text-align: center;
    color: #fff;
    max-width: 610px;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .part-1 p {
    display: inline-block;
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .part-1 p {
        margin-right: 20px;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .part-1 p {
        width: 90%;
        margin: auto;
        font-size: 11px;
        line-height: 18px;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .part-1 .checkbox-replacement {
    left: -25px;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .part-1 .checkbox-replacement {
        height: 13px;
        width: 13px;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .part-2.show-less {
    display: none;
    margin: 0 auto;
    width: 90%;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .part-2.show-more {
    display: block;
    margin: 0 auto;
    width: 90%;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .part-2.show-more {
        font-size: 11px;
        line-height: 18px;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .analysis-checkbox {
    margin: 0;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .analysis-expanded {
    display: none;
    margin-top: 10px;
    cursor: pointer;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .analysis-expanded {
        font-size: 11px;
        line-height: 18px;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .analysis-expanded:hover {
    text-decoration: underline;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .analysis-expand {
    margin-top: 10px;
    cursor: pointer;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .analysis-expand {
        font-size: 11px;
        line-height: 18px;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .analysis-agree .analysis-expand:hover {
    text-decoration: underline;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .privacy-agree {
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: .3px;
    text-align: center;
    color: #fff;
    margin-top: 30px;
    margin-left: 15px;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .privacy-agree .underlined-privat {
    text-decoration: underline;
    color: #fff;
    margin-left: 4px;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .privacy-agree p {
    margin: 0;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .privacy-agree {
        font-size: 11px;
        line-height: 18px;
        width: 240px;
        margin: 30px auto 0;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .qpage-text {
    color: #fff;
    margin: 20px 0 35px;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .qpage-text {
        font-size: 15px;
        line-height: 1.33;
        letter-spacing: .3px;
        margin: 0;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .selfieTime {
    font-family: "adobe-garamond-pro",serif;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: .2px;
    text-align: center;
    color: #fff;
    text-transform: none;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper {
    margin-bottom: 30px;
    display: inline-block;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper {
        margin-bottom: 0;
        margin-top: 30px;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg {
    width: 46%;
    height: auto;
    float: left;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg.orientation-eight {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg.orientation-six {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg.orientation-three {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg {
        font-size: 13px;
        width: 40%;
        padding-right: 5px;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg .qpageImg-wrapper {
    width: 200px;
    overflow: hidden;
    height: 200px;
    border-radius: 50%;
    justify-content: center;
    -ms-flex-pack: center;
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    -ms-flex-align: center;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg .qpageImg-wrapper.vertical {
    transform: scale(1,-1);
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg .qpageImg-wrapper.ieFix {
    -ms-flex-direction: column;
    flex-direction: column;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg .qpageImg-wrapper {
        max-width: 17vh;
        max-height: 17vh;
        margin-left: 0;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg .qpageImg-wrapper.template {
    background-color: #D8D8D8;
    display: block;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg .qpageImg-wrapper.template {
        height: 14vh;
        width: 14vh;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg .qpageImg-wrapper .tall {
    height: auto;
    width: 100%;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg .qpageImg-wrapper .wide {
    height: 100%;
    width: auto;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg .qpageImg-wrapper .uploadTemplate {
    min-width: 0;
    width: auto;
    position: relative;
    top: 40%;
    right: -2px;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg .qpageImg-wrapper .uploadTemplate {
        max-width: 26%;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .emptyImg .qpageImg-wrapper img {
    vertical-align: middle;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .photoGuide {
    float: right;
    width: 37%;
    color: #fff;
    text-align: left;
    line-height: 2.11;
    max-width: 250px;
    margin: 20px 0 0;
}

@media screen and (min-width:900px) and (max-height:789px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .photoGuide {
        width: 44%;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .photoGuide {
        font-size: 13px;
        width: 49%;
        line-height: 19px;
        margin: 0;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .photoGuide div {
    display: inline-block;
    padding-bottom: 4px;
    position: relative;
    min-width: 200px;
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .photoGuide div:last-child {
    min-width: 250px;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .photoGuide div:last-child {
        padding-bottom: 4px;
        min-width: 0;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .photoGuide div {
        padding-bottom: 4px;
        min-width: 0;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .photoGuide span.photoGuide-icon {
    width: 19px;
    height: auto;
    left: -40px;
    position: absolute;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .photoGuide span.photoGuide-icon {
        width: 18px;
        height: auto;
        left: -26px;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .photoGuide span.photoGuide-icon img {
    vertical-align: middle;
    height: auto;
    width: 100%;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .photoGuide-wrapper .photoGuide .photoGuide-description {
        margin: 0;
        float: left;
        min-width: 150px;
    }
}

.qpage-wrapper.step-1 .selfieTime-wrapper .photoReview {
    margin-bottom: 18px;
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .photoReview {
        margin-bottom: 15px;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .selfieTime-wrapper .photoReview {
        margin: 5px 0 0;
        font-size: 13px;
        line-height: 1.92;
        letter-spacing: .3px;
    }
}

.qpage-wrapper.step-1 .btnWrapper {
    width: 100%;
}

.qpage-wrapper.step-1 .btnWrapper .questionBtn {
    padding-top: 2px;
    color: #fff;
    display: inline-block;
    background-color: #222;
}

.qpage-wrapper.step-1 .btnWrapper .questionBtn.upload {
    width: 180px;
    margin-right: 15px;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .btnWrapper .questionBtn.upload {
        width: 70%;
        margin: 15px 0 0;
        float: none;
    }
}

.qpage-wrapper.step-1 .btnWrapper .questionBtn.retake {
    width: 180px;
    margin-right: 15px;
    padding-left: 6px;
}

.qpage-wrapper.step-1 .btnWrapper .questionBtn.retake img {
    width: 25px;
    height: 20px;
    vertical-align: top;
    margin: -1px 0 0 5px;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .btnWrapper .questionBtn.retake {
        width: 70%;
        margin: 0 0 15px;
        float: none;
    }
}

.qpage-wrapper.step-1 .btnWrapper .questionBtn.photo {
    width: 200px;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-1 .btnWrapper .questionBtn.photo {
        width: 70%;
        margin: 15px 0 0;
        float: none;
    }
}
.qpage-wrapper.step-0 {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
} 
.qpage-wrapper.step-2 {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
} 

.qpage-wrapper.step-2 .howOld-wrapper .ui-selectmenu-icon.ui-icon.ui-icon-triangle-1-s {
    background-image: url(images/arrowDown.png);
    background-position: center;
    margin-top: 2px;
}

/*
.qpage-wrapper.step-2 .howOld-wrapper .ui-selectmenu-button.ui-button {
background-color: #fff;
border-radius: 0;
padding: 19px 23px;
border: 1px solid #000;
min-width: 412px;
font-size: 16px;
letter-spacing: .4px;
font-family: "adobe-garamond-pro",serif;
}

@media screen and (max-width:480px) {
.qpage-wrapper.step-2 .howOld-wrapper .ui-selectmenu-button.ui-button {
min-width: 260px;
margin: 0;
}
}
*/

.qpage-wrapper.step-2 .howOld-wrapper .whatAge-picker {
    display: inline-block;
    text-align: left;
    margin-left: 15px;
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-2 .howOld-wrapper .whatAge-picker {

    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-2 .howOld-wrapper .whatAge-picker {
        text-align: center;

        margin: 0;
    }
}

.qpage-wrapper.step-2 .howOld-wrapper .whatAge-picker .ageBox {
    border: 1px solid #000;
    margin: 8px;
    background-color: #fff;
    color: #000;
    text-align: center;
    padding: 10.5px 0;
    width: calc(33% - 16px);
    float: left;
    box-sizing: border-box;
    cursor: pointer;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-2 .howOld-wrapper .whatAge-picker .ageBox {
        padding: 1px 0;
        width: calc(50% - 16px);
    }
}

.qpage-wrapper.step-2 .howOld-wrapper .whatAge-picker .ageBox.active {
    background-color: #f3e7d3;
}

.qpage-wrapper.step-2 .howOld-wrapper .whatAge-picker .ageBox input[type=radio] {
    display: none;
}

.qpage-wrapper.step-2 .howOld-wrapper .whatAge-picker .ageBox div {
    line-height: 2.11;
    letter-spacing: .5px;
    color: #000;
    font-size: 18px;
    font-family: "adobe-garamond-pro",serif;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-2 .howOld-wrapper .whatAge-picker .ageBox div {
        font-size: 15px;
        line-height: 2.53;
        letter-spacing: .4px;
    }
}

.qpage-wrapper.step-2 .howOld-wrapper .howOld-header {
    font-family: "adobe-garamond-pro",serif;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.6;
    letter-spacing: .2px;
    text-align: center;
    color: #fff;
    text-transform: none;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-2 .howOld-wrapper .howOld-header {
        font-size: 26px;
        line-height: 1.15;
    }
}

.qpage-wrapper.step-2 .howOld-wrapper .climate-region {
    margin-bottom: 20px;
    width: 460px;
    height: 60px;
    background: #fff;
    color: #000;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-2 .howOld-wrapper .climate-region {
        height: 60px;
        width: 260px;
    }
}

.qpage-wrapper.step-2 .btnWrapper {
    margin-top: 38px;
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-2 .btnWrapper {
        width: 73%;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-2 .btnWrapper {
        width: 100%;
        margin-top: 20px;
    }
}

.qpage-wrapper.step-2 .btnWrapper .questionBtn {
    color: #fff;
    display: inline-block;
    background-color: #222;
}

.qpage-wrapper.step-2 .btnWrapper .questionBtn.next, .qpage-wrapper.step-2 .btnWrapper .questionBtn.previous {
    margin: 0 15px;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-2 .btnWrapper .questionBtn.previous {
        width: 42%;
        margin: 0 5px;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-2 .btnWrapper .questionBtn.next {
        width: 42%;
        margin: 0 5px;
    }
}

.qpage-wrapper.step-3 {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-3 .skinGoal-wrapper {
        width: 87%;
        margin: auto;
    }
}

.qpage-wrapper.step-3 .skinGoal-header {
    font-family: "adobe-garamond-pro",serif;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.6;
    letter-spacing: .2px;
    text-align: center;
    color: #fff;
    text-transform: none;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-3 .skinGoal-header {
        font-size: 26px;
        line-height: 1.15;
        width: 70%;
        margin: auto;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-3 .qpage-text {
        font-size: 15px;
        line-height: 1.33;
        letter-spacing: .3px;
        display: inline-block;
        width: 75%;
    }
}

.qpage-wrapper.step-3 .skinGoal-picker {
    width: 70%;
    display: inline-block;
    text-align: left;
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-3 .skinGoal-picker {
        font-size: 16px;
        width: 63%;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-3 .skinGoal-picker {
        font-size: 13px;
        width: 100%;
        margin: 0;
    }
}

.qpage-wrapper.step-3 .skinGoal-picker .skinGoal {
    color: #000;
    background: #fff;
    margin: 10px;
    width: 100%;
    display: inline-block;
    border: 1px solid #000;
    box-sizing: border-box;
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-3 .skinGoal-picker .skinGoal {
        letter-spacing: .4px;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-3 .skinGoal-picker .skinGoal {
        font-size: 13px;
        width: 100%;
        margin: 8px 0;
        position: relative;
        padding: 12px 0;
    }
}

.qpage-wrapper.step-3 .skinGoal-picker .skinGoal .checkbox {
    float: left;
    margin: 5px 18px 5px 26px;
    vertical-align: top;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-3 .skinGoal-picker .skinGoal .checkbox {
        position: absolute;
        left: -12px;
        top: 8px;
    }
}

.qpage-wrapper.step-3 .skinGoal-picker .skinGoal .skinGoal-text {
    margin: 0;
    padding: 18px 34px;
    font-family: "adobe-garamond-pro",serif;
    font-size: 18px;
    line-height: 1.39;
    letter-spacing: .5px;
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-3 .skinGoal-picker .skinGoal .skinGoal-text {
        padding: 10px 0;
        font-size: 16px;
        margin: 0 0 0 26px;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-3 .skinGoal-picker .skinGoal .skinGoal-text {
        padding: 0;
        font-size: 13px;
        margin: 0 0 0 15px;
        line-height: 1.46;
        letter-spacing: .5px;
    }
}

.qpage-wrapper.step-3 .skinGoal-picker .skinGoal input[type=checkbox]:checked+.checkbox-replacement {
    background-size: 11px;
}

.qpage-wrapper.step-3 .skinGoal-picker .skinGoal label.styled-checkbox {
    margin: 0;
}

.qpage-wrapper.step-3 .skinGoal-picker .skinGoal label.styled-checkbox .checkbox-replacement {
    left: 24px;
    top: calc(50% - 1px);
    border: 1px solid #222;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-3 .skinGoal-picker .skinGoal label.styled-checkbox .checkbox-replacement {
        width: 13px;
        height: 13px;
        top: 10px;
        left: 13px;
    }
}

.qpage-wrapper.step-3 .btnWrapper {
    margin-top: 38px;
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-3 .btnWrapper {
        width: 73%;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-3 .btnWrapper {
        width: 100%;
        margin-top: 5px;
    }
}

.qpage-wrapper.step-3 .btnWrapper .questionBtn {
    color: #fff;
    display: inline-block;
    background-color: #222;
}

.qpage-wrapper.step-3 .btnWrapper .questionBtn.next, .qpage-wrapper.step-3 .btnWrapper .questionBtn.previous {
    margin: 0 15px;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-3 .btnWrapper .questionBtn.previous {
        width: 42%;
        margin: 0 5px;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-3 .btnWrapper .questionBtn.next {
        width: 42%;
        margin: 0 5px;
    }
}

.qpage-wrapper.step-4 {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.qpage-wrapper.step-4 .skinType-header {
    font-family: "adobe-garamond-pro",serif;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.6;
    letter-spacing: .2px;
    text-align: center;
    color: #fff;
    text-transform: none;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-4 .skinType-header {
        font-size: 26px;
        line-height: 1.15;
    }
}

.qpage-wrapper.step-4 .skinType-wrapper {
    max-width: 780px;
    margin: auto;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-4 .skinType-wrapper {
        width: 85%;
    }
}

.qpage-wrapper.step-4 .skinType-wrapper .skinType-picker {
    width: 100%;
}

@media screen and (max-width:550px) and (min-width:475px) {
    .qpage-wrapper.step-4 .skinType-wrapper .skinType-picker {
        width: 75%!important;
    }
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-4 .skinType-wrapper .skinType-picker {
        width: 62%;
        display: inline-block;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-4 .skinType-wrapper .skinType-picker {
        width: 100%;
    }
}

.qpage-wrapper.step-4 .skinType-wrapper .skinType-picker .skinType {
    color: #000;
    background: #fff;
    margin: 25px 16px;
    width: 35%;
    padding: 30px 40px;
    border: 1px solid #000;
    box-sizing: border-box;
    line-height: 1.58;
    display: inline-block;
    font-size: 12px;
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-4 .skinType-wrapper .skinType-picker .skinType {
        width: 100%;
        margin: 10px 0;
        font-size: 13px;
        padding: 21px 35px 25px;
    }
}

.qpage-wrapper.step-4 .skinType-wrapper .skinType-picker .skinType .skin-header {
    font-size: 18px;
    line-height: 2.11;
    display: inline-block;
    margin-bottom: 9px;
    position: relative;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-4 .skinType-wrapper .skinType-picker .skinType .skin-header {
        font-size: 15px;
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
        line-height: 2.53;
        letter-spacing: .5px;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-4 .skinType-wrapper .skinType-picker .skinType {
        font-size: 13px;
        width: 100%;
        line-height: 1.46;
        letter-spacing: .3px;
        margin: 10px 0;
        position: relative;
        min-height: 120px;
        padding: 20px 19px;
    }
}

.qpage-wrapper.step-4 .btnWrapper {
    margin-top: 40px;
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-4 .btnWrapper {
        width: 73%;
        margin-top: 30px;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-4 .btnWrapper {
        width: 100%;
        margin-top: 0;
    }
}

.qpage-wrapper.step-4 .btnWrapper .questionBtn {
    color: #fff;
    display: inline-block;
    background-color: #222;
}

.qpage-wrapper.step-4 .btnWrapper .questionBtn.next, .qpage-wrapper.step-4 .btnWrapper .questionBtn.previous {
    margin: 0 15px;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-4 .btnWrapper .questionBtn.previous {
        width: 42%;
        margin: 0 5px;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-4 .btnWrapper .questionBtn.next {
        width: 42%;
        margin: 0 5px;
    }
}

.qpage-wrapper.step-4 .btnWrapper .questionBtn.last {
    margin-left: 15px;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-4 .btnWrapper .questionBtn.last {
        width: 42%;
        margin: 0 5px;
    }
}

/* .qpage-wrapper.step-4 input[type=radio] {
    height: 18px;
    border: 1px solid #222;
    -webkit-appearance: unset;
    -moz-appearance: unset;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    margin-left: 0;
    box-sizing: content-box;
    padding: 0 9px;
    left: -35px;
    top: -10px;
} */

/* @media screen and (max-width:480px) {
    .qpage-wrapper.step-4 input[type=radio] {
        left: -29px;
        top: -10px;
        width: 0;
    }
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-4 input[type=radio] {
        width: 0;
    }
} */

.qpage-wrapper.step-4 input[type=radio]:hover {
    cursor: pointer;
}

.qpage-wrapper.step-4 input[type=radio]:focus {
    outline: 0;
}

/* .qpage-wrapper.step-4 input[type=radio]:checked::after {
    background-color: #222;
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    top: 50%;
    border-radius: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
} */

.opacityLoader-wrapper {
    display: none;
    z-index: 10001222;
}

.opacityLoader-wrapper .loader-img {
    position: fixed;
    right: 40%;
    bottom: 53%;
    z-index: 100012222;
    display: block;
   
}


@media screen and (max-width:768px) {
    .opacityLoader-wrapper .loader-img {
        right: 44.6%;
        top: 41.8%;
    }
}

@media screen and (max-width:480px) {
    .opacityLoader-wrapper .loader-img {
        /* right: 41%;
        top: 32.8%; */
        right: 10%;
        top: 62%;
    }
}

.opacityLoader-wrapper .loader-img img {
    height: 100px;
    width: auto;
}

@media screen and (max-width:768px) {
    .opacityLoader-wrapper .loader-img img {
        height: 90px;
        width: auto;
    }
}

@media screen and (max-width:480px) {
    .opacityLoader-wrapper .loader-img img {
        height: 65px;
        width: auto;
    }
}

.opacity-loader {
    opacity: .4;
    border: 1px solid #979797;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: grey;
    z-index: 1001;
    display: none;
}

.qpage-wrapper.step-4.second {
    background-image: url(images/background-image-4.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-4.second .skinType-wrapper {
        width: 95%;
    }
}

.qpage-wrapper.step-4.second .allergies-header.top {
    line-height: 1.2;
    letter-spacing: .2px;
    color: #fff;
    text-transform: none;
    font-family: "adobe-garamond-pro",serif;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    width: 99%;
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-4.second .allergies-header.top {
        width: 70%;
        display: inline-block;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-4.second .allergies-header.top {
        width: 100%;
        display: inline-block;
        padding: 0;
        font-size: 26px;
        line-height: 1.15;
        letter-spacing: normal;
        margin: auto;
    }
}

.qpage-wrapper.step-4.second .allergies-picker {
    width: 100%;
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-4.second .allergies-picker {
        width: 63%;
        display: inline-block;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-4.second .allergies-picker {
        width: 90%;
        margin: 20px 0;
    }
}

.qpage-wrapper.step-4.second .allergies-picker .allergies {
    color: #000;
    background: #fff;
    margin: 25px;
    width: calc(50% - 54px);
    display: inline-block;
    padding: 25px 40px 13px;
    border: 1px solid #000;
    box-sizing: border-box;
    line-height: 1.58;
    font-size: 12px;
}

@media screen and (max-width:768px) {
    .qpage-wrapper.step-4.second .allergies-picker .allergies {
        width: 100%;
        margin: 10px 0;
        font-size: 13px;
    }
}

@media screen and (max-width:480px) {
    .qpage-wrapper.step-4.second .allergies-picker .allergies {
        font-size: 13px;
        width: 100%;
        margin: 10px 0;
        position: relative;
        padding: 25px 20px 13px;
    }
}

.qpage-wrapper.step-4.second .allergies-picker .allergies .allergies-header {
    font-size: 18px;
    line-height: 2.11;
    display: inline-block;
    margin-bottom: 9px;
    position: relative;
}

.qpage-wrapper.step-4.second .allergies-picker .allergies .checkbox {
    margin: 0 15px 0 0;
    display: inline-block;
    vertical-align: middle;
}

{
    display: none;
    padding-bottom: 120px;
    padding-top: 70px;
}

@media screen and (max-width:480px) {
    {
        padding-bottom: 0;
    }
}

.yourResult-header {
    background-image: url(images/ResultBackground.jpg);
    min-height: 370px;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (max-width:480px) {
    .yourResult-header {
        min-height: 235px;

    }
}

.yourResult-header .yourResult-text {
    padding-top: 40px;
}

.yourResult-header .yourResult-text h1 {
    font-family: "adobe-garamond-pro",serif;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: .2px;
    text-align: center;
    color: #fff;
    text-transform: none;
}

@media screen and (max-width:480px) {
    .yourResult-header .yourResult-text h1 {
        font-size: 26px;
        line-height: 1.15;
        text-align: center;
        width: 73%;
        margin: auto;
    }
}

.yourResult-header .yourResult-text p {
    line-height: normal;
    letter-spacing: 1.3px;
    font-family: VisbyCF-Bold;
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
}

.recommendation.hide-on-desktop {
    display: none;
}

@media screen and (max-width:480px) {
    .recommendation.hide-on-desktop {
        display: block;
        margin: 0 auto 40px;
        width: 100%;
    }
}

.recommendation {
    margin: 50px 0 50px;
    width: 78%;
    display: inline-block;
}

@media screen and (max-width:768px) {
    .recommendation {
        width: 92%;
        margin: 20px 0 40px;
    }
}

@media screen and (max-width:480px) {
    .recommendation {
        margin: 30px 0 50px;
        display: none;
    }
}

.recommendation h1 {
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: .2px;
    text-align: center;
    text-transform: none;
}

@media screen and (max-width:480px) {
    .recommendation h1 {
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: normal;
        width: 70%;
        text-align: center;
        margin: 15px auto 10px;
    }
}

.recommendation .recommendation-text {
    width: 100%;
    margin: auto;
    text-align: left;
    line-height: 1.5;
    letter-spacing: .3px;
    column-count: 2;
    column-gap: 30px;
    display: inline-block;
    max-width: 843px;
    padding: 0px 20px;
}

.recommendation .recommendation-text p:first-child {
    margin-top: 0;
}

@media screen and (max-width:768px) {
    .recommendation .recommendation-text {
        font-size: 14px;
        letter-spacing: .4px;
        column-count: 1;
        text-align: center;
        padding: 0px 20px;
    }
}

@media screen and (max-width:480px) {
    .recommendation .recommendation-text {
        font-size: 13px;
        line-height: 1.46;
        max-height: 218px;
        overflow: hidden;
        column-count: 1;
        width: 88%;
    }

    .recommendation .recommendation-text.show-more {
        max-height: none;
    }
}

.emailUs-wrapper {
    background-color: #f8f8f8;
    color: #222;
    padding: 10px 0 50px;
}

.emailUs-wrapper .emailUs-text {
    width: 44%;
    font-family: IvarText;
    font-size: 30px;
    line-height: 1.27;
    text-align: center;
    margin: auto;
    padding: 40px 0 15px;
}

@media screen and (max-width:768px) {
    .emailUs-wrapper .emailUs-text {
        width: 75%;
    }
}

@media screen and (max-width:480px) {
    .emailUs-wrapper .emailUs-text {
        width: 79%;
        font-size: 18px;
        line-height: 1.33;
        padding: 50px 0 20px;
    }
}

.emailUs-wrapper .contactUs {
    width: 77%;
    margin: auto;
    background-color: #f8f8f8;
}

@media screen and (max-width:768px) {
    .emailUs-wrapper .contactUs {
        width: 100%;
    }
}

@media screen and (max-width:480px) {
    .emailUs-wrapper .contactUs {
        font-size: 13px;
        line-height: 1.92;
        letter-spacing: .3px;
    }
}

.emailUs-wrapper .contactUs .contactUs-image {
    max-width: 70px;
    max-height: 70px;
    margin-left: 35%;
}

@media screen and (max-width:768px) {
    .emailUs-wrapper .contactUs .contactUs-image {
        margin-left: 25%;
    }
}

@media screen and (max-width:480px) {
    .emailUs-wrapper .contactUs .contactUs-image {
        margin: 0;
    }
}

.emailUs-wrapper .contactUs .contactUs-image img {
    width: 100%;
    height: auto;
    float: left;
    margin-right: 20px;
}

@media screen and (max-width:480px) {
    .emailUs-wrapper .contactUs .contactUs-image img {
        display: none;
    }
}

.emailUs-wrapper .contactUs .email-text {
    text-align: center;
    margin: 7px auto auto;
}

@media screen and (max-width:480px) {
    .emailUs-wrapper .contactUs .email-text {
        text-align: center;
        margin-top: 0;
    }
}

.emailUs-wrapper .contactUs .email-text a {
    text-decoration: underline;
}

.emailUs-wrapper .contactUs .facebook-text {
    text-align: left;
    margin: auto;
    display: none;
}

.emailUs-wrapper .contactUs .facebook-text a {
    text-decoration: underline;
}

.emailUs-wrapper .contactUs .logosIcons {
    width: 100%;
}

@media screen and (max-width:768px) {
    .emailUs-wrapper .contactUs .logosIcons {
        width: auto;
    }
}

@media screen and (max-width:480px) {
    .emailUs-wrapper .contactUs .logosIcons {
        margin-top: 20px;
    }
}

.emailUs-wrapper .contactUs .iconlogo {
    display: inline-block;
    margin: 10px 2px;
}

.resultPage-image {
    height: 200px;
    width: 200px;
    margin: auto;
}

@media screen and (max-width:480px) {
    .resultPage-image {
        height: auto;
        width: auto;
    }
}

.resultPage-image.orientation-eight {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}

.resultPage-image.orientation-six {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

.resultPage-image.orientation-three {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

.resultPage-image .resultPageImg-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    margin-top: -135px;
    justify-content: center;
    -ms-flex-pack: center;
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    -ms-flex-align: center;
}

.resultPage-image .resultPageImg-wrapper.vertical {
    transform: scale(1,-1);
}

.resultPage-image .resultPageImg-wrapper.ieFix {
    -ms-flex-direction: column;
    flex-direction: column;
}

@media screen and (max-width:480px) {
    .resultPage-image .resultPageImg-wrapper {
        height: 102px;
        width: 102px;
        margin: -55px auto auto;
    }
}

.resultPage-image img {
    width: auto;
    height: 100%;
}

.resultPage-image img.tall {
    height: auto;
    width: 100%;
}

.resultPage-image img.wide {
    width: auto;
    height: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
}

.teaser {
    text-align: left;
    padding: 100px 0 0;
    max-width: 1083px;
    margin: auto;
}

@media screen and (max-width:768px) {
    .teaser {
        max-width: 706px;
    }
}

@media screen and (max-width:480px) {
    .teaser {
        width: calc(100% - 29px);
        margin: auto;
        padding: 50px 0 70px;
    }
}

.teaser:after {
    content: "";
    display: table;
    clear: both;
}

.teaser .teaser-image {
    max-height: 475px;
    max-width: 700px;
    float: left;
    width: 65%;
}

@media screen and (max-width:768px) {
    .teaser .teaser-image {
        max-height: 260px;
        max-width: 384px;
        float: left;
        width: 55%;
    }
}

@media screen and (max-width:480px) {
    .teaser .teaser-image {
        width: 100%;
    }
}

.teaser .teaser-image img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

.teaser .teaser-wrapper {
    float: right;
    box-sizing: border-box;
    width: 33%;
    padding-top: 13%;
    padding-right: 10px;
}

@media screen and (max-width:768px) {
    .teaser .teaser-wrapper {
        float: right;
        box-sizing: border-box;
        width: 42%;
        padding: 0;
    }
}

@media screen and (max-width:480px) {
    .teaser .teaser-wrapper {
        width: 100%;
    }
}

.teaser .teaser-wrapper .teaser-header {
    font-family: "adobe-garamond-pro",serif;
    font-size: 38px;
    line-height: 1.11;
    color: #222;
    padding-bottom: 20px;
    padding-right: 20px;
}

@media screen and (max-width:768px) {
    .teaser .teaser-wrapper .teaser-header {
        font-family: "adobe-garamond-pro",serif;
        font-size: 28px;
        line-height: 1.14;
        letter-spacing: normal;
        padding: 0 20px 16px 0;
    }
}

@media screen and (max-width:480px) {
    .teaser .teaser-wrapper .teaser-header {
        padding: 10px 20px 15px 0;
        max-width: 275px;
    }
}

.teaser .teaser-wrapper .teaser-text {
    font-family: IvarText;
    font-size: 16px;
    line-height: 1.44;
    letter-spacing: .3px;
    color: #222;
}

@media screen and (max-width:768px) {
    .teaser .teaser-wrapper .teaser-text {
        padding-right: 10px;
    }
}

@media screen and (max-width:480px) {
    .teaser .teaser-wrapper .teaser-text {
        padding: 0;
    }
}

.teaser .teaser-wrapper .teaserBtn {
    font-family: VisbyCF-Bold;
    border: 1px solid #222;
    width: 136px;
    background-color: #fff;
    color: #222;
    vertical-align: middle;
    padding: 0;
    margin-top: 30px;
    font-size: 13px;
    letter-spacing: 1.3px;
}

@media screen and (max-width:768px) {
    .teaser .teaser-wrapper .teaserBtn {
        margin-top: 24px;
    }
}

@media screen and (max-width:480px) {
    .teaser .teaser-wrapper .teaserBtn {
        margin-top: 15px;
    }
}

{
    box-sizing: border-box;
    position: relative;
    padding-bottom: 47px;
    max-width: 843px;
    margin: auto;
    min-height: 350px;
}

.tile-wrapper:last-of-type {
    border-bottom: 2px solid #222;
}

@media screen and (max-width:768px) {
    {
        padding-bottom: 70px;
        max-width: 668px;
    }
}

@media screen and (max-width:480px) {
    {
        max-width: 88%;
        padding-bottom: 33px;
        min-height: 200px;
    }
}

.tile-image.product-image {
    max-height: 283px;
}

@media screen and (max-width:480px) {
    .tile-image.product-image {
        max-height: 116px;
    }
}

.scaled.product-image {
    min-width: 283px;
}

@media screen and (max-width:768px) {
    .scaled.product-image {
        min-width: 240px;
    }
}

@media screen and (max-width:480px) {
    .scaled.product-image {
        min-width: 0;
    }
}

.resultProduct-wrapper {
    text-align: left;
    /*    width: 63%;*/
    display: inline-block;

}

@media screen and (max-width:768px) {
    .resultProduct-wrapper {
        padding: 0 20px;
        /*
        margin: 20px 0 0 33px;
        width: 57%;
        */
    }
}

@media screen and (max-width:480px) {
    .resultProduct-wrapper {
        width: 100%;
        margin: auto;
    }
}

.resultProduct-wrapper .productInfo-wrapper {
    float: right;
    box-sizing: border-box;
}

@media screen and (max-width:480px) {
    .resultProduct-wrapper .productInfo-wrapper {
        float: none;
    }
}

.resultProduct-wrapper .productInfo-wrapper .productInfo-header {
    font-family: "adobe-garamond-pro",serif;
    font-size: 30px;
    letter-spacing: .2px;
    color: #222;
}

@media screen and (max-width:768px) {
    .resultProduct-wrapper .productInfo-wrapper .productInfo-header {
        font-size: 22px;
        line-height: 1.27;
        letter-spacing: .3px;
    }
}

@media screen and (max-width:480px) {
    .resultProduct-wrapper .productInfo-wrapper .productInfo-header {
        text-align: center;
    }
}

.resultProduct-wrapper .productInfo-wrapper .productInfo-text {
    font-family: "adobe-garamond-pro",serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .3px;
    color: #222;

}

@media screen and (max-width:768px) {
    .resultProduct-wrapper .productInfo-wrapper .productInfo-text {
        font-size: 14px;

    }
}

@media screen and (max-width:480px) {
    .resultProduct-wrapper .productInfo-wrapper .productInfo-text {

    }
}

.resultProduct-wrapper .overlay {
    display: inline-block;
}

@media screen and (max-width:768px) {
    .resultProduct-wrapper .overlay {

    }
}

@media screen and (max-width:480px) {
    .resultProduct-wrapper .overlay {
        position: relative;

    }
}

.resultProduct-wrapper .overlay .title {
    font-family: VisbyCF-Bold;
    font-size: 16px;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.13;
    letter-spacing: 1.3px;
    color: #222;
    padding-bottom: 8px;
}

@media screen and (max-width:480px) {
    .resultProduct-wrapper .overlay .title {
        font-size: 13px;
        line-height: 1.31;
        letter-spacing: 1.2px;
        padding-bottom: 10px;
    }
}

.resultProduct-wrapper .overlay .overlay-product-data {
    font-family: VisbyCF-Bold;
    font-size: 13px;
    line-height: normal;
    letter-spacing: 1.5px;
    color: #222;
}

@media screen and (max-width:480px) {
    .resultProduct-wrapper .overlay .overlay-product-data {
        font-size: 11px;
        font-weight: 700;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: 1.2px;
        margin-top: 10px;
    }
}

/*
button#add-to-cart {
font-family: VisbyCF-Bold;
font-size: 13px;
letter-spacing: 1.5px;
text-align: center;
color: #222;
width: 56%;
height: 40px;
border: 1px solid #222;
background-color: #fff;
padding: 0;
margin: 0 204px 0 0;
position: relative;
}

@media screen and (max-width:768px) {
button#add-to-cart {
width: 80%;
margin: 0 40px 0 0;
}
}

@media screen and (max-width:480px) {
button#add-to-cart {
width: 100%;
margin: 0;
}
}

button#add-to-cart .shopBtn {
margin: 0 0 0 52px;
float: left;
}

button#add-to-cart .divider {
border-right: 2px solid #000;
height: 17px;
margin: 0;
opacity: .4;
position: absolute;
right: 44%;
top: 50%;
transform: translateY(-50%);
}

button#add-to-cart .product-price {
width: 44%;
margin: auto;
float: right;
}
*/

/* .productWrapper {
    padding: 30px 0 47px;
} */

@media screen and (max-width:480px) {
    .productWrapper {
        padding: 0px 0 30px;
    }
}

@media screen and (max-width:767px) {
    .productWrapper .img-container {
        width: 90%;
        margin: 0 auto;
    }
}

.productWrapper .stepsHeader {
    font-family: 'VisbyCF-Bold';
    font-size: 30px;
    letter-spacing: .2px;
    color: #222;
    margin-top: 50px;
}

@media screen and (max-width:768px) {
    .productWrapper .stepsHeader {
        font-size: 22px;
        line-height: 1.27;
        letter-spacing: .3px;
    }
}

@media screen and (max-width:480px) {
    .productWrapper .stepsHeader {
        margin-top: 30px;
    }
}

.productWrapper .stepsDescription {
    text-align: center;
    margin: 10px auto 0px;
    font-size: 18px;
    max-width: 1000px;
    line-height: 1.3;
    color: #707b82;
}

@media screen and (max-width:768px) {
    .productWrapper .stepsDescription {
        font-size: 15px;
    }
}

@media screen and (max-width:480px) {
    .productWrapper .stepsDescription {
        font-size: 13px;
        margin: 30px auto;
    }
}

.hideOnDesktop,.productWrapper .description {
    display: none;
}

@media screen and (max-width:480px) {
    .productWrapper .description {
        font-size: 11px;
        line-height: 1.82;
        letter-spacing: .3px;
        display: block;
        font-family: "adobe-garamond-pro",serif;
    }
}

@media screen and (max-width:480px) {
    .productWrapper .cart-wrapper {
        margin-top: 62px;
    }
}

@media screen and (max-width:480px) {
    .hideOnDesktop {
        display: block;
    }
}

.hideOnDesktop .tile-wrapper {
    padding-bottom: 30px;
    max-width: 87%;
}

.hideOnDesktop .productInfo-wrapper {
    font-family: "adobe-garamond-pro",serif;
    color: #222;
    width: 100%;
    margin: auto;
}

.hideOnDesktop .productInfo-wrapper .productInfo-header {
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
    width: 90%;
    padding-bottom: 14px;
    margin: auto;
}

.hideOnDesktop .productInfo-wrapper .productInfo-text {
    font-size: 13px;
    line-height: 1.46;
    letter-spacing: .2px;
    text-align: left;
    padding-bottom: 20px;
    padding-left: 2px;
}

.hideOnDesktop button#add-to-cart {
    font-family: VisbyCF-Bold;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-align: center;
    color: #222;
    width: 100%;
    height: 40px;
    border: 1px solid #222;
    background-color: #fff;
    padding: 0;
    margin: 20px 0 0;
    position: relative;
}

.hideOnDesktop button#add-to-cart .shopBtn {
    margin: 0 0 0 44px;
    float: left;
}

.hideOnDesktop button#add-to-cart .divider {
    border-right: 1px solid #000;
    height: 24px;
    margin: 0;
    position: absolute;
    right: 45%;
    top: 50%;
    transform: translateY(-50%);
}

.hideOnDesktop button#add-to-cart .product-price {
    width: 44%;
    margin: auto;
    float: right;
}

.expand-text {
    font-family: VisbyCF-Bold;
    float: left;
    border-bottom: 2px solid #909090;
    font-size: 11px;
    line-height: normal;
    letter-spacing: 1.2px;
    color: #222;
    margin: 0 0 0 6%;
    padding: 10px 0 0;
    display: none;
}

@media screen and (max-width:480px) {
    .expand-text {
        display: block;
    }
}

.expand-text-expanded {
    display: none;
    font-family: VisbyCF-Bold;
    float: left;
    border-bottom: 2px solid #909090;
    font-size: 11px;
    line-height: normal;
    letter-spacing: 1.2px;
    color: #222;
    margin: 0 0 0 6%;
    padding: 10px 0 0;
}

.resultPage-border {
    border: 1px solid #222;
    display: inline-block;
    width: 99%;
    margin-bottom: 20px;
}

@media screen and (max-width:480px) {
    .resultPage-border {
        border: .5px solid #222;
        display: inline-block;
        width: 100%;
        margin-bottom: 66px;
    }
}

.priceBtn-wrapper {
    max-width: 843px;
    margin: auto;
    padding: 20px 0 100px;
}

@media screen and (max-width:768px) {
    .priceBtn-wrapper {
        max-width: 668px;
        padding: 20px 0 70px;
    }
}

@media screen and (max-width:480px) {
    .priceBtn-wrapper {
        max-width: 87%;
        padding: 20px 0 50px;
    }
}

.priceBtn-wrapper .questionBtn.addAll {
    float: right;
    width: 26.5%;
    margin: auto;
    padding: 10px 0;
    font-family: VisbyCF-Bold;
}

@media screen and (max-width:768px) {
    .priceBtn-wrapper .questionBtn.addAll {
        width: 33.5%;
        height: 45px;
        font-size: 14px;
        letter-spacing: .8px;
        line-height: normal;
    }
}

@media screen and (max-width:480px) {
    .priceBtn-wrapper .questionBtn.addAll {
        font-size: 14px;
        line-height: normal;
        letter-spacing: .8px;
        width: 100%;
        margin: auto;
        float: none;
    }
}

.priceBtn-wrapper .totalPrice {
    font-family: VisbyCF-Bold;
    font-size: 28px;
    line-height: .71;
    letter-spacing: 1.3px;
    color: #222;
    float: left;
    margin: 10px auto auto;
}

@media screen and (max-width:480px) {
    .priceBtn-wrapper .totalPrice {
        font-size: 22px;
        line-height: .91;
        padding-bottom: 20px;
        float: none;
    }
}


.slotBannerCaption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

@media screen and (max-width:375px) {
    .slotBannerCaption {
        padding: 0 25px;
        text-align: center;
    }
}

.slotBannerCaption .slotBannerHeader {
    font-family: VisbyCF-Bold;
    font-size: 48px;
    line-height: 1.08;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

@media screen and (max-width:983px) {
    .slotBannerCaption .slotBannerHeader {
        font-size: 30px;
        letter-spacing: 2.5px;
        line-height: 1.2;
    }
}

@media screen and (max-width:375px) {
    .slotBannerCaption .slotBannerHeader {
        max-width: 100%;
    }
}

.slotBannerCaption .slotBannerText {
    font-size: 16px;
    line-height: 1.38;
    letter-spacing: .3px;
    margin-bottom: 25px;
    display: block;
}

@media screen and (max-width:983px) {
    .slotBannerCaption .slotBannerText {
        display: none;
    }
}

.slotBannerCaption .slotBannerBtn {
    border: 1px solid;
    height: 40px;
    font-size: 13px;
    font-family: VisbyCF-Bold;
    letter-spacing: 1.1px;
    line-height: normal;
    padding: 10px 27px 11px;
    margin: 0;
    box-sizing: border-box;
    display: inline-block;
}

.slotBannerCaption .slotBannerBtn:hover {
    background-color: #50252d;
    border-color: #50252d;
    color: #fff;
    cursor: pointer;
}

.slotBannerCaption.white {
    color: #fff;
}

.slotBannerCaption.white .slotBannerBtn {
    border-color: #fff;
}

.slotBannerCaption.white .slotBannerBtn:hover {
    background-color: #fff;
    color: #222;
}

.slotBannerCaption.black {
    color: #222;
}

.slotBannerCaption.black .slotBannerBtn {
    border-color: #222;
}

.slotBannerCaption.black .slotBannerBtn:hover {
    background-color: #222;
    color: #fff;
}

.slotBannerCaption.right {
    top: 34%;
    right: 10%;
    text-align: right;
}

@media screen and (max-width:983px) {
    .slotBannerCaption.right {
        right: 7.8%;
    }
}

@media screen and (max-width:375px) {
    .slotBannerCaption.right {
        top: auto;
        right: 0;
        text-align: center;
    }
}

.slotBannerCaption.right .slotBannerText {
    margin-left: auto;
}

.slotBannerCaption.left {
    top: 26%;
    right: auto;
    left: 10%;
    text-align: left;
}

@media screen and (max-width:983px) {
    .slotBannerCaption.left {
        left: 7.8%;
    }
}

@media screen and (max-width:375px) {
    .slotBannerCaption.left {
        top: auto;
        left: 0;
        right: 0;
        text-align: center;
    }
}

.slotBannerCaption.left .slotBannerText {
    margin-left: 0;
}

/*
.slotBannerCaption.inMeta {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
width: 100%;
max-width: 660px;
}

.button,.buttonstyle,button,input[type=button] {
font-family: "adobe-garamond-pro",serif;
text-decoration: none;
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
border: none;
background-color: #000;
color: #fff;
display: inline-block;
transition: all .3s ease;
padding: 11px 32px 10px;
height: 45px;
margin-right: -10px;
}

@media screen and (max-width:984px) {
.button,.buttonstyle,button,input[type=button] {
font-size: 12px;
}
}

.button.disabled,.button.disabled:hover,.button[disabled],.button[disabled]:hover,.buttonstyle.disabled,.buttonstyle.disabled:hover,.buttonstyle[disabled],.buttonstyle[disabled]:hover,button.disabled,button.disabled:hover,button[disabled],button[disabled]:hover,input[type=button].disabled,input[type=button].disabled:hover,input[type=button][disabled],input[type=button][disabled]:hover {
background-color: #e5e5e5;
color: #fff;
}

@media screen and (max-width:984px) {
.button,.buttonstyle,button,input[type=button] {
height: 35px;
padding: 3px 30px;
}
}

.button:hover,.buttonstyle:hover,button:hover,input[type=button]:hover {
background-color: #444;
}

@media screen and (max-width:984px) {
.button,.buttonstyle,button,input[type=button] {
padding: 2px 15px 1px;
height: 35px;
}
}

.button i.left,.buttonstyle i.left,button i.left,input[type=button] i.left {
margin-right: .6em;
}

.button i.right,.buttonstyle i.right,button i.right,input[type=button] i.right {
margin-left: .6em;
}

div.button {
height: auto;
padding-top: 16px;
padding-bottom: 15px;
}

@media screen and (max-width:984px) {
div.button {
padding-top: 11px;
padding-bottom: 12px;
}
}

.button.newsletter-signup-btn {
height: auto;
padding-top: 12px;
padding-bottom: 11px;
}

@media screen and (max-width:984px) {
.button.newsletter-signup-btn {
height: auto;
padding-top: 12px;
padding-bottom: 11px;
}
}
*/

input[type=date],input[type=email],input[type=number],input[type=password],input[type=text] {
    width: 100%;
    height: 42px;
}

@media screen and (max-width:984px) {
    input[type=date],input[type=email],input[type=number],input[type=password],input[type=text] {
        height: 35px;
    }
}

input[type=date],input[type=email],input[type=number],input[type=password],input[type=text],textarea {
    font-family: "adobe-garamond-pro",serif;
    color: #222;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #e8e8e8;
    box-sizing: border-box;
    padding: 5px 15px;
    text-indent: 0;
}

@media screen and (max-width:984px) {
    input[type=date],input[type=email],input[type=number],input[type=password],input[type=text],textarea {
        font-size: 12px;
    }
}

@media screen and (max-width:984px) {
    input[type=date],input[type=email],input[type=number],input[type=password],input[type=text],textarea {
        padding: 8px 15px 7px;
        font-size: 16px;
        -webkit-appearance: none;
        -webkit-border-radius: 0;
    }
}

input[type=date].error,input[type=email].error,input[type=number].error,input[type=password].error,input[type=text].error,textarea.error {
    border-color: #e30b5c;
}

textarea {
    width: 99%;
}

select {
    height: 42px;
}

@media screen and (max-width:984px) {
    select {
        height: 35px;
        font-size: 16px;
        -webkit-appearance: menulist-button;
        -webkit-border-radius: 0;
    }

    select:focus {
        font-size: 16px;
    }
}

.select {
    width: 167px;
    position: relative;
    background-color: #fff;
}
/*
.select:after {
content: "";
position: absolute;
right: 15px;
top: calc(50% + 3px);
width: 10px;
height: 10px;
background-image: url(images/arrow-dropdown.png);
background-repeat: no-repeat;
background-size: contain;
z-index: 3;
transform: translateY(-50%);
}
*/
.select select {
    font-family: "adobe-garamond-pro",serif;
    color: #222;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    z-index: 4;
    background-color: transparent;
    -ms-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    height: 42px;
    border: 1px solid #e8e8e8;
    line-height: 22px;
    letter-spacing: .7px;
    padding: 10px 19px;
}

@media screen and (max-width:984px) {
    .select select {
        font-size: 12px;
    }
}

@media screen and (max-width:720px) {
    .select select {
        padding: 10px 19px;
    }
}

.select select:hover {
    box-shadow: 0 0 3px 1px #e8e8e8;
}

.select select.disabled {
    background-color: #e8e8e8;
}

.select select option {
    padding: inherit;
    height: inherit;
}

.select select option.selected {
    color: #0091cc;
}

.select select option.disabled {
    color: #666;
    text-decoration: line-through;
}

.input-styled-checkbox,input[type=radio] {
    /* margin: 1em 8px 1em 0; */
    margin: 10px;
}

.label-inline .input-styled-checkbox,.label-inline input[type=radio] {
    margin: 0 1.5em 0 0;
}

.clickable {
    position: relative;
}

.clickable input[type=checkbox] {
    position: absolute;
    top: -10px;
    left: 3px;
}

input[type=checkbox] {
    border-radius: 0;
    z-index: 1;
}


@media screen and (max-width:984px) {
    legend {
        font-size: 11px;
        line-height: 15px;
    }
}

.ie7 legend {
    width: 94%;
}

legend span {
    font-size: 12px;
    font-weight: 400;
    position: relative;
    text-transform: none;
    padding: 0 .5em;
}

label {
    font-family: "adobe-garamond-pro",serif;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: block;
    color: #444;
    margin-bottom: 11px;
}

@media screen and (max-width:984px) {
    label {
        font-size: 14px;
    }
}

label.styled-checkbox {
    position: relative;
    padding-left: 25px;
    z-index: 1;
    cursor: pointer;
}

/* label.styled-checkbox .input-styled-checkbox {
    position: absolute;
    margin: 0;
    opacity: 0;
    clip: rect(0,0,0,0);
} */

label.styled-checkbox input[type=checkbox]:checked+.checkbox-replacement {
    background-image: url(images/check.png);
}

label.styled-checkbox .checkbox-replacement {
    display: inline-block;
    position: absolute;
    left: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #e8e8e8;
    z-index: 5;
    top: calc(50% - 2px);
    transform: translateY(-50%);
    background-position: center;
    background-size: 15px;
    background-repeat: no-repeat;
}

label.styled-checkbox span {
    font-size: 14px;
    line-height: 1.57;
    letter-spacing: .3px;
}

.resultPage-wrapper {
    display: none;
    padding-bottom: 120px;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper {
        padding-bottom: 0;
    }
}

.resultPage-wrapper .yourResult-header {
    background-image: url(images/ResultBackground.jpg);
    min-height: 370px;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .yourResult-header {
        min-height: 235px;
    }
}

.resultPage-wrapper .yourResult-header .yourResult-text {
    padding-top: 40px;
}

.resultPage-wrapper .yourResult-header .yourResult-text h1 {
    font-family: "adobe-garamond-pro",serif;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: .2px;
    text-align: center;
    color: #fff;
    text-transform: none;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .yourResult-header .yourResult-text h1 {
        font-size: 26px;
        line-height: 1.15;
        text-align: center;
        width: 73%;
        margin: auto;
    }
}

.resultPage-wrapper .yourResult-header .yourResult-text p {
    line-height: normal;
    letter-spacing: 1.3px;
    font-family: VisbyCF-Bold;
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
}

.resultPage-wrapper .recommendation.hide-on-desktop {
    display: none;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .recommendation.hide-on-desktop {
        display: block;
        margin: 0 auto 40px;
        width: 100%;
    }
}

.resultPage-wrapper .recommendation {
    margin: 15px 0 15px;
    width: 78%;
    display: inline-block;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .recommendation {
        width: 100%;
        /* margin: 20px 0 40px; */
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .recommendation {
        /* margin: 30px 0 50px; */
        margin: unset;

    }
}

.resultPage-wrapper .recommendation h1 {
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: .2px;
    text-align: center;
    text-transform: none;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .recommendation h1 {
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: normal;
        width: 70%;
        text-align: center;
        margin: 15px auto 10px;
    }
}

.resultPage-wrapper .recommendation .recommendation-text {
    width: 100%;
    margin: auto;
    text-align: left;
    line-height: 1.5;
    letter-spacing: .3px;
    column-count: 2;
    column-gap: 30px;
    display: inline-block;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .recommendation .recommendation-text {
        font-size: 15px;
        letter-spacing: .4px;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .recommendation .recommendation-text {
        font-size: 15px;
        line-height: 1.46;
        max-height: none;
        overflow: hidden;
        column-count: 1;
        width: 100%;
    }

    .resultPage-wrapper .recommendation .recommendation-text.show-more {
        max-height: none;
    }
}

.resultPage-wrapper .emailUs-wrapper {
    background-color: #f8f8f8;
    color: #222;
    padding: 10px 0 50px;
}

.resultPage-wrapper .emailUs-wrapper .emailUs-text {
    width: 44%;
    font-family: IvarText;
    font-size: 30px;
    line-height: 1.27;
    text-align: center;
    margin: auto;
    padding: 40px 0 15px;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .emailUs-wrapper .emailUs-text {
        width: 75%;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .emailUs-wrapper .emailUs-text {
        width: 79%;
        font-size: 18px;
        line-height: 1.33;
        padding: 50px 0 20px;
    }
}

.resultPage-wrapper .emailUs-wrapper .contactUs {
    width: 77%;
    margin: auto;
    background-color: #f8f8f8;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .emailUs-wrapper .contactUs {
        width: 100%;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .emailUs-wrapper .contactUs {
        font-size: 13px;
        line-height: 1.92;
        letter-spacing: .3px;
    }
}

.resultPage-wrapper .emailUs-wrapper .contactUs .contactUs-image {
    max-width: 70px;
    max-height: 70px;
    margin-left: 35%;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .emailUs-wrapper .contactUs .contactUs-image {
        margin-left: 25%;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .emailUs-wrapper .contactUs .contactUs-image {
        margin: 0;
    }
}

.resultPage-wrapper .emailUs-wrapper .contactUs .contactUs-image img {
    width: 100%;
    height: auto;
    float: left;
    margin-right: 20px;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .emailUs-wrapper .contactUs .contactUs-image img {
        display: none;
    }
}

.resultPage-wrapper .emailUs-wrapper .contactUs .email-text {
    text-align: center;
    margin: 7px auto auto;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .emailUs-wrapper .contactUs .email-text {
        text-align: center;
        margin-top: 0;
    }
}

.resultPage-wrapper .emailUs-wrapper .contactUs .email-text a {
    text-decoration: underline;
}

.resultPage-wrapper .emailUs-wrapper .contactUs .facebook-text {
    text-align: left;
    margin: auto;
    display: none;
}

.resultPage-wrapper .emailUs-wrapper .contactUs .facebook-text a {
    text-decoration: underline;
}

.resultPage-wrapper .emailUs-wrapper .contactUs .logosIcons {
    width: 100%;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .emailUs-wrapper .contactUs .logosIcons {
        width: auto;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .emailUs-wrapper .contactUs .logosIcons {
        margin-top: 20px;
    }
}

.resultPage-wrapper .emailUs-wrapper .contactUs .iconlogo {
    display: inline-block;
    margin: 10px 2px;
}

.resultPage-wrapper .resultPage-image {
    height: 200px;
    width: 200px;
    margin: auto;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .resultPage-image {
        height: auto;
        width: auto;
    }
}

.resultPage-wrapper .resultPage-image.orientation-eight {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}

.resultPage-wrapper .resultPage-image.orientation-six {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

.resultPage-wrapper .resultPage-image.orientation-three {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

.resultPage-wrapper .resultPage-image .resultPageImg-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    margin-top: -135px;
    justify-content: center;
    -ms-flex-pack: center;
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    -ms-flex-align: center;
}

.resultPage-wrapper .resultPage-image .resultPageImg-wrapper.vertical {
    transform: scale(1,-1);
}

.resultPage-wrapper .resultPage-image .resultPageImg-wrapper.ieFix {
    -ms-flex-direction: column;
    flex-direction: column;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .resultPage-image .resultPageImg-wrapper {
        height: 102px;
        width: 102px;
        margin: -55px auto auto;
    }
}

.resultPage-wrapper .resultPage-image img {
    width: auto;
    height: 100%;
}

.resultPage-wrapper .resultPage-image img.tall {
    height: auto;
    width: 100%;
}

.resultPage-wrapper .resultPage-image img.wide {
    width: auto;
    height: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
}

.resultPage-wrapper .teaser {
    text-align: left;
    padding: 100px 0 0;
    max-width: 1083px;
    margin: auto;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .teaser {
        max-width: 706px;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .teaser {
        width: calc(100% - 29px);
        margin: auto;
        padding: 50px 0 70px;
    }
}

.resultPage-wrapper .teaser:after {
    content: "";
    display: table;
    clear: both;
}

.resultPage-wrapper .teaser .teaser-image {
    max-height: 475px;
    max-width: 700px;
    float: left;
    width: 65%;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .teaser .teaser-image {
        max-height: 260px;
        max-width: 384px;
        float: left;
        width: 55%;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .teaser .teaser-image {
        width: 100%;
    }
}

.resultPage-wrapper .teaser .teaser-image img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

.resultPage-wrapper .teaser .teaser-wrapper {
    float: right;
    box-sizing: border-box;
    width: 33%;
    padding-top: 13%;
    padding-right: 10px;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .teaser .teaser-wrapper {
        float: right;
        box-sizing: border-box;
        width: 42%;
        padding: 0;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .teaser .teaser-wrapper {
        width: 100%;
    }
}

.resultPage-wrapper .teaser .teaser-wrapper .teaser-header {
    font-family: "adobe-garamond-pro",serif;
    font-size: 38px;
    line-height: 1.11;
    color: #222;
    padding-bottom: 20px;
    padding-right: 20px;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .teaser .teaser-wrapper .teaser-header {
        font-family: "adobe-garamond-pro",serif;
        font-size: 28px;
        line-height: 1.14;
        letter-spacing: normal;
        padding: 0 20px 16px 0;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .teaser .teaser-wrapper .teaser-header {
        padding: 10px 20px 15px 0;
        max-width: 275px;
    }
}

.resultPage-wrapper .teaser .teaser-wrapper .teaser-text {
    font-family: IvarText;
    font-size: 16px;
    line-height: 1.44;
    letter-spacing: .3px;
    color: #222;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .teaser .teaser-wrapper .teaser-text {
        padding-right: 10px;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .teaser .teaser-wrapper .teaser-text {
        padding: 0;
    }
}

.resultPage-wrapper .teaser .teaser-wrapper .teaserBtn {
    font-family: VisbyCF-Bold;
    border: 1px solid #222;
    width: 136px;
    background-color: #fff;
    color: #222;
    vertical-align: middle;
    padding: 0;
    margin-top: 30px;
    font-size: 13px;
    letter-spacing: 1.3px;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .teaser .teaser-wrapper .teaserBtn {
        margin-top: 24px;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .teaser .teaser-wrapper .teaserBtn {
        margin-top: 15px;
    }
}

.resultPage-wrapper .tile .content-scaler {
    float: left;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .tile .content-scaler {

    }
}

.resultPage-wrapper .tile-wrapper {
    box-sizing: border-box;
    position: relative;
    padding-bottom: 47px;
    max-width: 843px;
    margin: auto;
    min-height: 350px;
    display: flex;
    align-items: center;
}

.resultPage-wrapper .tile-wrapper:last-of-type {
    border-bottom: 2px solid #222;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .tile-wrapper {
        padding-bottom: 70px;
        flex-wrap: wrap;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .tile-wrapper {
        /*        max-width: 88%;*/
        padding-bottom: 33px;
    }
}

.resultPage-wrapper .tile-wrapper .tile-image.product-image {
    max-height: 283px;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .tile-wrapper .tile-image.product-image {
        max-height: 116px;
    }
}

.resultPage-wrapper .tile-wrapper .scaled.product-image {
    /*    min-width: 283px;*/
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .tile-wrapper .scaled.product-image {
        /*        min-width: 240px;*/
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .tile-wrapper .scaled.product-image {
        /*        min-width: 0;*/
    }
}

.resultPage-wrapper .tile-wrapper .resultProduct-wrapper {
    text-align: left;
    /*    width: 63%;*/
    margin-left: 40px;
    margin-right: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .tile-wrapper .resultProduct-wrapper {
        margin: 20px 0;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .tile-wrapper .resultProduct-wrapper {
        /*
        width: 100%;
        margin: auto;
        */
    }
}

.resultPage-wrapper .tile-wrapper .resultProduct-wrapper .productInfo-wrapper {
    box-sizing: border-box;
    padding: 0;
    text-align: center;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .tile-wrapper .resultProduct-wrapper .productInfo-wrapper {
        float: none;
    }
}

.resultPage-wrapper .tile-wrapper .resultProduct-wrapper .productInfo-wrapper .productInfo-header {
    font-family: "adobe-garamond-pro",serif;
    font-size: 30px;
    letter-spacing: .2px;
    color: #222;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .tile-wrapper .resultProduct-wrapper .productInfo-wrapper .productInfo-header {
        font-size: 22px;
        line-height: 1.27;
        letter-spacing: .3px;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .tile-wrapper .resultProduct-wrapper .productInfo-wrapper .productInfo-header {
        text-align: center;
    }
}

.resultPage-wrapper .tile-wrapper .resultProduct-wrapper .productInfo-wrapper .productInfo-text {
    font-family: "adobe-garamond-pro",serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .3px;
    color: #222;
    /*    min-width: 530px;*/
    margin: 10px 0 30px;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .tile-wrapper .resultProduct-wrapper .productInfo-wrapper .productInfo-text {
        font-size: 14px;
        /*        min-width: 382px;*/
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .tile-wrapper .resultProduct-wrapper .productInfo-wrapper .productInfo-text {

    }
}

.resultPage-wrapper .tile-wrapper .resultProduct-wrapper .overlay {
    display: block;
    width: 100%;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .tile-wrapper .resultProduct-wrapper .overlay {
        /*        width: 79%;*/
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .tile-wrapper .resultProduct-wrapper .overlay {


        position: relative;

    }
}

.resultPage-wrapper .tile-wrapper .resultProduct-wrapper .overlay .title {
    font-family: VisbyCF-Bold;
    font-size: 16px;
    font-style: normal;
    font-stretch: normal;
    line-height: 2.13;
    letter-spacing: 1.3px;
    color: #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-transform: uppercase;

}

.resultPage-wrapper .tile-wrapper .resultProduct-wrapper .overlay .title a{
    color: #222;
    text-decoration: none;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .tile-wrapper .resultProduct-wrapper .overlay .title {

        line-height: 1.31;
        letter-spacing: 1.2px;

    }
}

.resultPage-wrapper .tile-wrapper .resultProduct-wrapper .overlay .overlay-product-data {
    font-family: VisbyCF-Bold;
    font-size: 13px;
    line-height: normal;
    letter-spacing: 1.5px;
    color: #222;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .tile-wrapper .resultProduct-wrapper .overlay .overlay-product-data {
        font-size: 11px;
        font-weight: 700;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: 1.2px;
        margin-top: 10px;
    }
}

/*
.resultPage-wrapper .tile-wrapper button#add-to-cart {
font-family: VisbyCF-Bold;
font-size: 13px;
letter-spacing: 1.5px;
text-align: center;
color: #222;
width: 56%;
height: 40px;
border: 1px solid #222;
background-color: #fff;
padding: 0;
margin: 0 204px 0 0;
position: relative;
}

@media screen and (max-width:768px) {
.resultPage-wrapper .tile-wrapper button#add-to-cart {
width: 80%;
margin: 0 40px 0 0;
}
}

@media screen and (max-width:480px) {
.resultPage-wrapper .tile-wrapper button#add-to-cart {
width: 100%;
margin: 0;
}
}

.resultPage-wrapper .tile-wrapper button#add-to-cart .shopBtn {
margin: 0 0 0 52px;
float: left;
}

.resultPage-wrapper .tile-wrapper button#add-to-cart .divider {
border-right: 2px solid #000;
height: 17px;
margin: 0;
opacity: .4;
position: absolute;
right: 44%;
top: 50%;
transform: translateY(-50%);
}

.resultPage-wrapper .tile-wrapper button#add-to-cart .product-price {
width: 44%;
margin: auto;
float: right;
}
*/
/*
.resultPage-wrapper .productWrapper {
    padding: 30px 0 47px;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .productWrapper {
        padding: 20px 0 47px;
    }
}
*/

@media screen and (max-width:480px) {
    .resultPage-wrapper .productWrapper .img-container {
    }
}

.resultPage-wrapper .productWrapper .stepsDescription {
    text-align: center;
    font-size: 18px;
    padding: 0 20px;
    font-family: "Neutraface Text-Book", Sans-serif;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .productWrapper .stepsDescription {
        font-size: 18px;

    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .productWrapper .stepsDescription {
        margin: 10px 0px;
    }
}

.resultPage-wrapper .hideOnDesktop,.resultPage-wrapper .productWrapper .description {
    display: none;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .productWrapper .description {
        font-size: 11px;
        line-height: 1.82;
        letter-spacing: .3px;
        display: block;
        font-family: "adobe-garamond-pro",serif;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .productWrapper .cart-wrapper {
        margin-top: 62px;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .hideOnDesktop {
        display: block;
    }
}

.resultPage-wrapper .hideOnDesktop .tile-wrapper {
    padding-bottom: 30px;
    max-width: 87%;
}

.resultPage-wrapper .hideOnDesktop .productInfo-wrapper {
    font-family: "adobe-garamond-pro",serif;
    color: #222;
    width: 100%;
    margin: auto;
}

.resultPage-wrapper .hideOnDesktop .productInfo-wrapper .productInfo-header {
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
    width: 90%;
    padding-bottom: 14px;
    margin: auto;
}

.resultPage-wrapper .hideOnDesktop .productInfo-wrapper .productInfo-text {
    font-size: 13px;
    line-height: 1.46;
    letter-spacing: .2px;
    text-align: center
        padding-bottom: 20px;
    padding-left: 2px;
}

/*
.resultPage-wrapper .hideOnDesktop button#add-to-cart {
font-family: VisbyCF-Bold;
font-size: 13px;
letter-spacing: 1.5px;
text-align: center;
color: #222;
width: 100%;
height: 40px;
border: 1px solid #222;
background-color: #fff;
padding: 0;
margin: 20px 0 0;
position: relative;
}

.resultPage-wrapper .hideOnDesktop button#add-to-cart .shopBtn {
margin: 0 0 0 44px;
float: left;
}

.resultPage-wrapper .hideOnDesktop button#add-to-cart .divider {
border-right: 1px solid #000;
height: 24px;
margin: 0;
position: absolute;
right: 45%;
top: 50%;
transform: translateY(-50%);
}

.resultPage-wrapper .hideOnDesktop button#add-to-cart .product-price {
width: 44%;
margin: auto;
float: right;
}
*/

.resultPage-wrapper .expand-text {
    font-family: VisbyCF-Bold;
    float: left;
    border-bottom: 2px solid #909090;
    font-size: 11px;
    line-height: normal;
    letter-spacing: 1.2px;
    color: #222;
    margin: 0 0 0 6%;
    padding: 10px 0 0;
    display: none;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .expand-text {
        display: block;
    }
}

.resultPage-wrapper .expand-text-expanded {
    display: none;
    font-family: VisbyCF-Bold;
    float: left;
    border-bottom: 2px solid #909090;
    font-size: 11px;
    line-height: normal;
    letter-spacing: 1.2px;
    color: #222;
    margin: 0 0 0 6%;
    padding: 10px 0 0;
}

.resultPage-wrapper .resultPage-border {
    border: 1px solid #222;
    display: inline-block;
    width: 99%;
    margin-bottom: 20px;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .resultPage-border {
        border: .5px solid #222;
        display: inline-block;
        width: 100%;
        margin-bottom: 66px;
    }
}

.resultPage-wrapper .priceBtn-wrapper {
    max-width: 843px;
    margin: auto;
    padding: 20px 0 100px;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .priceBtn-wrapper {
        max-width: 668px;
        padding: 20px 0 70px;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .priceBtn-wrapper {
        max-width: 87%;
        padding: 20px 0 50px;
    }
}

.resultPage-wrapper .priceBtn-wrapper .questionBtn.addAll {
    float: right;
    width: 26.5%;
    margin: auto;
    padding: 10px 0;
    font-family: VisbyCF-Bold;
}

@media screen and (max-width:768px) {
    .resultPage-wrapper .priceBtn-wrapper .questionBtn.addAll {
        width: 33.5%;
        height: 45px;
        font-size: 14px;
        letter-spacing: .8px;
        line-height: normal;
    }
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .priceBtn-wrapper .questionBtn.addAll {
        font-size: 14px;
        line-height: normal;
        letter-spacing: .8px;
        width: 100%;
        margin: auto;
        float: none;
    }
}

.resultPage-wrapper .priceBtn-wrapper .totalPrice {
    font-family: VisbyCF-Bold;
    font-size: 28px;
    line-height: .71;
    letter-spacing: 1.3px;
    color: #222;
    float: left;
    margin: 10px auto auto;
}

@media screen and (max-width:480px) {
    .resultPage-wrapper .priceBtn-wrapper .totalPrice {
        font-size: 22px;
        line-height: .91;
        padding-bottom: 20px;
        float: none;
    }
}

button:disabled {
    opacity: .5;
}

/* label[for="hudgdpr"]{
    color: #fff;
    margin-left: 10px;
} */


/* new styles */

.hudanalyse .qpage-wrapper.active {
    display: flex;
    /* margin-top:15px; */
}
.hudanalyse .qpage-wrapper {
    display: none;
}
.hero, .product-header {
    position: relative;
    z-index: 1;
    transition: margin .5s ease;
    /* margin-top: 2.5rem; */
}
.align-justify {
    justify-content: space-between;
}
.grid-x {
    display: flex;
    flex-flow: row wrap;
}
.grid-container {
    padding-right: 0;
    padding-left: 0;
    /* max-width: 112.5rem;
    margin: 0 auto; */
}
.hudanalyse .hero .content-wrapper {
    border: 0;
    flex-direction: column;
    align-items: start;
}
.hero .content-wrapper, .product-header .content-wrapper {
    border-right: 1px solid;
    padding: calc(var(--column) * 1);
    position: relative;
    z-index: 1;
    margin-top: 84px;
    transition: margin-top .2s ease, padding-top .2s ease;
}
@media print, screen and (min-width: 87.5em){
.grid-x>.large-8 {
    width: 40%;
}
}
/* Additional CSS */

* {
    box-sizing: border-box;
    font-family: "Neutraface Text-Book", Sans-serif;
}

.left {
    float: left;
    width: 50%;
    padding: 0 20px;
    text-align: center;
}
.default-margin{
    margin: auto;
}
.custom-margin-left{
    margin-top:30px !important;
}
.custom-margin-right{
    margin-top:30px !important;
}
.left-custom {
    float: left;
    width: 27%;
    padding: 0 20px;
    text-align: left;
}
.left h1{
    margin: 10px 0px;
}
.right {
    float: left;
    width: 50%;
    padding: 15px;
    margin-top: 7px;
    text-align: center;
}
.lead {
    color: #707b82;
    margin-left: 5px;
}
.uploadTemplate {
    width: 50%;
    height: 50%;
    object-fit: contain;
    margin: 12% 0px;
}
label {
    font-family: "Neutraface Text-Book", Sans-serif;
}

.hudgdpr-wrapper {
    display: block;
    /* max-width: 400px; */
    line-height: 1.3;
    margin-top: 15px;
}
.hudgdpr-wrapper label {
    padding-left: 20px;
    display: block;
    margin-top: -22px;
}

.hudanalyse fieldset label{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.skinType{
    display: unset !important;
    padding: 10px;
    /* border: 2px solid black; */
    text-align: left;
    margin-bottom: 0px;
    /* min-height: 106px; */
}
.step-left {
    float: left;
    /* width: 60%; */
    width: 50%;
    padding: 0 20px;
    text-align: center;
}
.step-left h1{
    margin: 10px 0px;
}
.step-right {
    float: left;
    /* width: 40%; */
    width: 50%;
    padding: 15px;
    /* margin-top: 7px; */
    text-align: center;
}
.whatAge-picker, .skinGoal-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.category{
    color: #707b82;
}
.skinGoal-picker label {
    justify-content: unset !important;
    flex-wrap: unset !important;
}
.hudanalyse fieldset>div {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    /* width: 100%; */
    width: 30%;
}
.skin-header span{
    font-size: 1.1rem;
    font-weight: 500;
}
#resultSnapshotImg{
    width: 400px;
    height: 400px;
    object-fit: cover;
    border-radius: 50%;
}
/* .coupon-code{
    padding: 5px;
    border: 4px dotted blue;
} */
.product-layer{
    width: 33%;
    list-style: none;
    padding: 0px 15px;
}
.product-steps{
    width: 100%;
}
.stage-title{
    font-family: "Neutraface Text-Bold", Sans-serif;
    font-size: 35px;
    color: #707b82;
}
.result-stage-title{
    font-family: "Neutraface Text-Bold", Sans-serif;
    font-size: 35px;
    color: #707b82 !important;
    font-weight: 600;
    /* padding-bottom: 15px; */
    text-align: center;
}
.recommendation-title{
    font-family: "Neutraface Text-Bold", Sans-serif;
    font-size: 35px;
    color: #707b82 !important;
    font-weight: 600 !important;
    padding-bottom: 15px;
    text-align: center;
}
.prod-title{
    font-family: "Neutraface Text-Bold", Sans-serif;
    font-size: 30px;
    color: #707b82;
    font-weight: 600;
    text-align: center;
}
#stageButton{
    background-color: #d883ff;
    border: none;
    color: white;
    transition: background-color 0.5s;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: unset;
}
#stageButton:hover{
    background-color: #d883ff95;
    transition: background-color 0.5s;
}
#snapshotImg{
    width: 400px;
    height: 400px;
    object-fit: cover;
    border-radius: 50%;
}
#agePicker{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
}
.custom-label-age{
    justify-content: unset !important;
    width: 100px;
}
.custom-allergies{
    justify-content: unset !important;
    width: 150px;
}
.custom-div-age{
    margin: 13px 0px;
}
#ageFieldset{
    padding: unset !important;
}
.custom-radio-btn{
    border: 0px;
    width: 15%;
    height: 2em;
}
.custom-radio-step5{
    border: 0px;
    width: 11%;
    height: 2em;
}
.custom-skin-goal{
    border: 0px;
    width: 6%;
    height: 1.5em;
}
.fieldset-step3, .fieldset-step5{
    padding: unset !important;
}
#skinTypePicker{
    display: grid;
    /* grid-template-columns: repeat(2, 1fr);
    gap: 5px; */
    width: 50%;
}
.yourResult-text{
    text-align: right;
}
.resultPageImg-wrapper{
    text-align: center;
}
.coupon-code-layout{
    border: solid 1px black;
    font-weight: bold;
}
.img-wrapper img{
    height: 300px;
    width: 200px;
    text-align: center;
}
.tag{
    font-family: "Neutraface Text-Book", Sans-serif;
    font-size: 18px;
    color: #707B82;
    font-weight : 400;
    text-align: justify !important;
}
.short{
    font-family: "Neutraface Text-Book", Sans-serif;
    font-size: 15px;
    font-weight : 400;
    text-align: justify !important;
}
.stepsDescription{
    font-family: "Neutraface Text-Book", Sans-serif;
    font-size: 18px;
    color: #707B82;
    font-weight : 400;
    text-align: justify !important;
    line-height: inherit !important;
}
.spinner-text{
    color: #000;
}
.icons{
    text-align: left;
    width: 50%;
    margin: auto;
    margin-bottom: 1.5em;
}
#hudgdpr{
    display: block;
}
.ast-container{
    display: block;
}
.step4-input{
    margin:unset;
}
.step4-input{
    margin: unset !important;
}
.result-pre-text{
    padding-top: 40px;
    text-align: center;
    color: #707B82;
}
.coupon-layout{
    padding: 15px 0px;
    color: #707B82;
    text-align: center;
    font-size: 18px;
}
.coupon-code-layout b{
    color: #707B82;
    font-size: 15px;
}
.bg-image{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.coupon-container{
    max-width: 843px;
    margin: 0px auto;
    padding: 0px 20px;
}
.processing{
    background-color: rgba(255,255,255,0.5);
}
.recommendation-text p{
    color: #707B82;
    font-size: 18px;
    font-family: "Neutraface Text-Book", Sans-serif;
    margin-bottom: 1em;
}
.short a{
    color: #707B82;
    font-size: 18px;
}
.img-wrapper{
    text-align: center;
}
.tags{
    text-align: center;
}
.step-margin-left, .step-margin-right{
    margin:auto;
}
.coupon-text{
    margin-bottom: 10px;
}
.coupon-code-link{
    margin: 5px 0px;
}
.coupon-code-link-text{
    color: #707B82;
    font-family: "Neutraface Text-Book", Sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
}
.coupon-code-link-text:hover{
    color: #d883ff;
}
.coupon-code{
    background-color: #d883ff;
    border: none;
    color: white;
    transition: background-color 0.5s;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: unset;
    padding: 8px;
    border: 2px dotted;
}
.error-message{
    color: #707B82;
    font-size: 18px;
    font-family: "Neutraface Text-Book", Sans-serif;
    margin-top: 10px;
    text-align: center;
}
/* .coupon-code-link, .coupon-code-link:hover, .coupon-code-link:visited{
    color: white;
} */
/* Media Queries */
@media screen and (max-width:480px) {
    #hudgdpr-wrapper * {
        font-size: 14px;
    }
    .btn {
        margin-bottom: 5px;
    }
    .resultSnapshotImg{
        width: 200px;
        border-radius: 50%;
    }
    .product-layer{
        width: 100%;
        list-style: none;
        padding: 0px 15px;
    }
    .products ul {
        margin: unset !important;
    }
    .img-wrapper img{
        height: 300px;
        width: 200px;
    }
     .icons{
        text-align: left;
        width: 85%;
        margin: 1em auto;
    }
    .skinType{
        text-align: left;
        /* min-height: 130px;
        min-width: 140px; */
        min-height: 60px !important;
        /* min-width: 300px !important; */
        padding: unset !important;
        border: unset !important;
        margin-bottom: unset !important;
        justify-content: left !important;
        display: flex !important;
    }
    .buttons{
        margin-top: 25px;
        text-align: left;
    }
    .lead{
        margin-bottom: unset !important;
        margin-left: unset !important;
    }
    .lead-text{
        margin-bottom: 1.75em !important;
        text-align: center;
    }
    .yourResult-text{
        text-align: center;
    }
    .icons{
        text-align: left;
        width: 85%;
        margin: 1em 0px;
    }
    .left{
        text-align: left !important;
    }
    #snapshotImg {
        width: 400px;
        height: 400px;
        object-fit: cover;
        border-radius: 50%;
    }
    .step-left{
        text-align: left !important;
    }
    #resultSnapshotImg{
        width: 350px;
        height: 350px;
        object-fit: cover;
        border-radius: 50%;
    }
    .default-margin h1{
        text-align: center;
    }
    .default-margin button{
        width: 100%;
    }
    label.styled-checkbox{
        padding-left: 0px;
    }
    #skinTypePicker{
        display: unset !important;
        grid-template-columns: unset !important;
        gap: unset !important;
        width: 100%;
    }
    .skin-description{
        width: 100%;
    }
    #skinType-picker{
        padding: 10px;
    }
    .custom-margin-right{
        margin-top:unset !important;
    }
    .step-margin-left{
        margin-top:30px;
    }
    .step-margin-right{
        margin-top: unset !important;
    }
    .short{
        text-align: unset !important;
    }
    .custom-spacer{
        padding-left:5px;
    }
    .result-stage-title{
        font-size: 20px;
    }
    .recommendation-title{
        font-size: 20px;
    }
    .prod-title{
        font-size: 20px;
    }
    .header-container{
        padding: 0px 20px;
    }
}
@media only screen and (max-width: 620px) {
    .left, .right, .step-left,.step-right, .left-custom {
        width: 100%;
    }
    .left{
        text-align: left !important;
    }
    .step-left{
        text-align: left !important;
    }
    .lead{
        margin-left: unset !important;
    }
    .icons{
        text-align: left;
        width: 85%;
        margin: 1em 0px;
    }
    .hudanalyse{
        text-align: left;
    }
    #snapshotImg {
        width: 400px;
        height: 400px;
        object-fit: cover;
        border-radius: 50%;
    }
    #resultSnapshotImg{
        width: 350px;
        height: 350px;
        object-fit: cover;
        border-radius: 50%;
    }
    .step-margin-left{
        margin-top:30px;
    }
    .step-margin-right{
        margin-top: unset !important;
    }
    .header-container{
        padding: 0px 20px;
    }
}
@media (min-width: 922px){
    .ast-container {
        display: unset !important;
    }
}