@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wdth,wght@0,75..125,200..900;1,75..125,200..900&display=swap');
@import url("https://use.typekit.net/zwr0dkl.css");



html, body {
    --body-font-family: "Mona Sans", sans-serif;
    --headings-font-family: "amandine", sans-serif;
    --subheadings-font-family: "Mona Sans", sans-serif;
    background-color: transparent !important;
}

body.display-iframe {
    background: #111 !important;
}

h2 {
    font-family: "Mona Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    transition: none !important;
}

h2.intro-headline {
    font-size: 2.5em !important;
    margin-bottom: 0.5em !important;
    line-height: 1 !important;
}

.smt-q-slide h2 .smt-q-small {
    text-transform: unset !important;
    font-variation-settings: "wdth" 100 !important;
    font-weight: 300 !important;
}


@media (min-width: 700px) {
    h2.intro-headline {
        font-size: 4em !important;
    }

    h2 {
        font-size: 3em !important;
        line-height: 1.2em !important;
    }

    .smt-q-slide h2 .smt-q-small {
        font-size: 30px !important;
        line-height: 1.2em !important;
    }
}

.smt-q-progressbar {
    background-color: rgba(0,0,0,0.8) !important;
}

@media (min-width: 700px) {
    .smt-q-progressbar {
        width: calc(100% - 3rem) !important;
        margin: 1em auto 2em auto !important;
        border-radius: 999px !important;
        box-shadow: 0 0 1em rgba(0,0,0,0.1) !important;
        background-color: rgba(0,0,0,0.7) !important;
    }
}

.smt-q-step-label {
    background: #fff !important;
    color: #333 !important;
}

.smt-q-answer.smt-q-checkbox-answer .smt-q-answer-inner::before {
    border-color: #000 !important;
    border-radius: 999px !important;
}

.smt-q-answer.smt-q-checkbox-answer.smt-q-selected .smt-q-answer-inner::before {
    background: #000;
    background: radial-gradient(circle, rgba(0,0,0, 1) 0%, rgba(0,0,0, 1) 50%, rgba(0,0,0, 0) 50%, rgba(0,0,0, 0) 100%) !important;
}


.smt-q-skintone-image::before, .smt-q-coverage-image::before, .smt-q-answer-image::before {
    padding-bottom: 120% !important;
}

.smt-q-skintone-image::before, .smt-q-coverage-image::before, .smt-q-answer-image::before {

}

.smt-q-product-data .smt-q-buttons * {
    pointer-events: none !important;
}
/* 
@media (min-width: 500px) {
    .smt-q-product-data {
        min-height: 8em !important;
        padding-bottom: 0 !important;
    }
} */



.smt-q-group.is-highlighted::before, .smt-q-results-holder.is-highlighted .smt-q-result-item::before {
    background: #000 !important;
    opacity: 0.8 !important;
}

.smt-q-fragrance-note-info {
    color: #000 !important;
}

.smt-q-product-brand {
    font-size: 0.75em !important;
}

.smt-q-open-overlay, .smt-q-start, .smt-q-button-highlight, .smt-q-get-results,
.smt-q-product-actions a {
    border: 2px solid #fff !important;
}

.select2-results__option {
    color: #111 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: #fff !important;
}


@media (min-width: 500px) {
    .smt-q-group.is-highlighted .smt-q-group-product .smt-q-product-data, .smt-q-results-holder.is-highlighted .smt-q-group-product .smt-q-product-data {
        padding-bottom: 5.5rem !important;
    }
}


.smt-q-slide[data-question-id="brand-preference-options"] .smt-q-image {
    background: #fff !important;
}