@font-face {
    font-family: 'TimesNow-Light';
    src: url('TimesNow-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BrownPro-Light';
    src: url('BrownPro-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html, body {
	background-color: #111 !important;
    --gap: 0.5rem !important;
    --border-radius: 0;
    --border-width: 1px;
    --color-progressbar_filled: #fff !important;
    --progressbar-width: 1000px !important;
    --slides-width: 1200px !important;

    --headings-font-family: 'TimesNow-Light', serif !important;
    --subheadings-font-family: 'BrownPro-Light', serif !important;
    --body-font-family: 'BrownPro-Light', sans-serif !important;

    --bg-image-opacity: 0.4;
}

.smt-q-questionnaire {
    position: relative;
    z-index: 1;
}

.smt-q-progressbar {
    background-color: transparent !important;
    border-bottom: 1px solid #fff;
}

.smt-q-steps {
    max-width: var(--progressbar-width) !important;
    width: calc(100% - 2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-right: 7rem !important;
}

@media (max-width: 1200px) {
    .smt-q-steps {
        padding-right: 3rem !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 600px) {
    .smt-q-steps {
        display: none;
    }
}

.smt-q-step {
    width: 2em !important;
    height: 2em !important;
}

.smt-q-step .smt-q-dot::before {
    width: 2rem !important;
    height: 2rem !important;
}

.smt-q-step .smt-q-dot {
    background-color: transparent !important;
    border: 1px solid #fff !important;
    width: 2em !important;
    height: 2em !important;
    border-radius: 100%;
}

.smt-q-step .smt-q-dot::before {
    background: transparent !important;
}

.smt-q-step.smt-q-js-current .smt-q-dot::before {
    background: #fff !important;
    color: #000 !important;
}

.smt-q-step.smt-q-js-past .smt-q-dot::before {
    background: rgba(255,255,255,0.15) !important;
}

.smt-q-step {
    counter-increment: smt-q-step-counter;
}
.smt-q-step .smt-q-dot::before {
    content: counter(smt-q-step-counter) !important;
    transform: translateX(-50%) translateY(-50%) scale(1);
    align-items: center;
    justify-content: center;
    display: flex;
    flex-flow: row wrap;
    font-size: 0.8rem;
    color: #fff !important;
}

.smt-q-step[data-step-id='group_results'] .smt-q-dot::before {
    content: "" !important;
}

.smt-q-progressbar {
    counter-reset: smt-q-step-counter;
}

.smt-q-step-line {
    border-color: #fff !important;
    border-bottom-style: dashed !important;
}

.smt-q-step-line::before {
    background: #fff !important;
}

.smt-q-step .smt-q-step-label {
    color: #fff !important;
    border: 1px solid #fff !important;
    backdrop-filter: blur(10px) !important;
    background: transparent !important;
    line-height: 0.9 !important;
}

.smt-q-groups-holder {
    gap: var(--gap) !important;
}

.smt-q-group {
    border: 1px solid #fff !important;
    width: 100% !important;
}

@media (min-width: 500px) {
    .smt-q-group {
        width: calc(50% - calc(var(--gap) * 0.5)) !important;
    }
}

@media (min-width: 800px) {
    .smt-q-group {
        width: calc(33.33% - calc(var(--gap) * 0.667)) !important;
    }
}

@media (min-width: 1200px) {
    .smt-q-group {
        width: calc(25% - calc(var(--gap) * 0.75)) !important;
    }
}

.smt-q-group-data:nth-child(1) .smt-q-product-image, .smt-q-result-item .smt-q-product-image {
    box-shadow: none !important;
    border-radius: 0 !important;
}

.smt-q-product-image .smt-q-image-inner {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

.smt-q-product-image-holder {
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem) !important;
}


.smt-q-inner {
    max-width: var(--slides-width) !important;
    width: calc(100% - 2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.smt-q-num-label {
    display: none !important;
}

.smt-q-save-profile-prompt {
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


.smt-q-questionnaire-nav {
    position: fixed;
    height: 2rem !important;
    width: 4.5rem !important;
    background: transparent !important;
    right: unset;
    left: 50%;
    top: 0.75rem;
    margin-left: calc((var(--progressbar-width) / 2) - 4.5rem) !important;
}

    @media (max-width: 1200px) {
        .smt-q-questionnaire-nav {
            left: unset !important;
            right: 1rem !important;
        }
    }

.smt-q-questionnaire-nav .smt-q-prev,
.smt-q-questionnaire-nav .smt-q-next {
    height: 100% !important;
    width: 2rem !important;
    border: 1px solid #fff !important;
    border-radius: 100% !important;
    transition: all 0.2s ease-in-out !important;
    position: relative !important;
    cursor: pointer !important;
    background: transparent !important;
    fill: #fff !important;
}

.smt-q-questionnaire-nav .smt-q-next.smt-q-highlight {
    background: #fff !important;
    color: #000 !important;
    transform: scale(1) !important;
}

.smt-q-questionnaire-nav .smt-q-prev {
    margin-right: auto !important;
}

.smt-q-questionnaire-nav::before {
    display: none !important;
}

.smt-q-questionnaire-nav .smt-q-next span svg path,
.smt-q-questionnaire-nav .smt-q-prev span svg path {
    fill: currentColor !important;
}

.smt-q-questionnaire-nav .smt-q-prev span, .smt-q-questionnaire-nav .smt-q-next span {
    transform: translateX(-50%) translateY(-50%) scale(0.8)
}

@media (max-width: 500px) {
    .smt-q-slide {
        padding: 0 0.5rem !important;
    }
}

h2 {
    font-size: 2.25rem !important;
}

.smt-q-slide h2, .smt-q-h2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.smt-q-small {
    font-size: 1rem !important;
}

.smt-q-big-select {
    border: 1px solid #fff !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    padding: 1rem 2rem !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px dotted #fff !important;
}

.smt-q-big-select::placeholder {
    color: #fff !important;
    font-family: var(--headings-font-family) !important;
}

.smt-q-answer.smt-q-checkbox-answer .smt-q-answer-inner::before,
.smt-q-save-profile-prompt span::before, .smt-q-login-profile-prompt span::before {
    border-color: #fff !important;
    border-width: 1px !important;
    border-radius: 0 !important;
}

.smt-q-selected {
    backdrop-filter: blur(5px) !important;
}


.smt-q-button {
    transition: all 0.2s ease-in-out !important;
    font-size: 0.75rem !important;
    padding: 0.5rem 1.5rem !important;
}

.smt-q-button:hover {
    background: #fff !important;
    color: #000 !important;
}

.smt-q-slide[data-slide='facescan'] .smt-q-button {
    margin: 0 !important;
    width: 100% !important;
}


.bg-slide {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

    .bg-slide.bg-slide-1 { background-image: url('img6.png'); }
    .bg-slide.bg-slide-2 { background-image: url('img2.jpg'); }
    .bg-slide.bg-slide-3 { background-image: url('img3.jpg'); }
    .bg-slide.bg-slide-4 { background-image: url('img4.jpg'); }
    .bg-slide.bg-slide-5 { background-image: url('img5.jpg'); }
    .bg-slide.bg-slide-6 { background-image: url('img1.png'); }
    .bg-slide.bg-slide-7 { background-image: url('img7.jpg'); }
    .bg-slide.bg-slide-8 { background-image: url('img8.jpg'); }
    .bg-slide.bg-slide-9 { background-image: url('img9.png'); }
    .bg-slide.bg-slide-10 { background-image: url('img10.jpg'); }

    body[data-current-slide-id='intro'] .bg-slide.bg-slide-1 { opacity: var(--bg-image-opacity) ; }
    body[data-current-slide-id='Name'] .bg-slide.bg-slide-2 { opacity: var(--bg-image-opacity) ; }
    body[data-current-slide-id='facescan'] .bg-slide.bg-slide-3 { opacity: var(--bg-image-opacity); }
    body[data-current-slide-id='age'] .bg-slide.bg-slide-4 { opacity: var(--bg-image-opacity); }
    body[data-current-slide-id='skintype'] .bg-slide.bg-slide-5 { opacity: var(--bg-image-opacity); }
    body[data-current-slide-id='skin-needs'] .bg-slide.bg-slide-6 { opacity: var(--bg-image-opacity) ; }
    body[data-current-slide-id='sensitive-skin'] .bg-slide.bg-slide-7 { opacity: var(--bg-image-opacity) ; }
    body[data-current-slide-id='sensitive-skin-options'] .bg-slide.bg-slide-7 { opacity: var(--bg-image-opacity) ; }
    body[data-current-slide-id='pregnancy'] .bg-slide.bg-slide-8 { opacity: var(--bg-image-opacity) ; }
    body[data-current-slide-id='AHA-BHA'] .bg-slide.bg-slide-9 { opacity: var(--bg-image-opacity) ; }
    body[data-current-slide-id='end'] .bg-slide.bg-slide-10 { opacity: var(--bg-image-opacity) ; }
    body[data-current-slide-id='group_results'] .bg-slide.bg-slide-10 { opacity: var(--bg-image-opacity) ; }


.smt-q-facescan-video-holder.camera-active #smt-q-facescan-analyze-btn {
    background: #fff !important;
    color: #000 !important;
    width: fit-content !important;
}