@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');

@font-face{
    font-family: "Cardinal Fruit Medium";
    src: url("fonts/Cardinal Fruit/Cardinal Fruit Medium/Web Fonts/2bfe809f5a433474ec388de3ccb69e73.eot");
    src: url("fonts/Cardinal Fruit/Cardinal Fruit Medium/Web Fonts/2bfe809f5a433474ec388de3ccb69e73.eot?#iefix")format("embedded-opentype"),
        url("fonts/Cardinal Fruit/Cardinal Fruit Medium/Web Fonts/2bfe809f5a433474ec388de3ccb69e73.woff")format("woff"),
        url("fonts/Cardinal Fruit/Cardinal Fruit Medium/Web Fonts/2bfe809f5a433474ec388de3ccb69e73.woff2")format("woff2"),
        url("fonts/Cardinal Fruit/Cardinal Fruit Medium/Web Fonts/2bfe809f5a433474ec388de3ccb69e73.ttf")format("truetype"),
        url("fonts/Cardinal Fruit/Cardinal Fruit Medium/Web Fonts/2bfe809f5a433474ec388de3ccb69e73.svg#Cardinal Fruit Medium")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family: "Cardinal Fruit Italic";
    src: url("fonts/Cardinal Fruit/Cardinal Fruit Italic/Web Fonts/742dcddc06afc2dfc1ecedd0a42adca0.eot");
    src: url("fonts/Cardinal Fruit/Cardinal Fruit Italic/Web Fonts/742dcddc06afc2dfc1ecedd0a42adca0.eot?#iefix")format("embedded-opentype"),
        url("fonts/Cardinal Fruit/Cardinal Fruit Italic/Web Fonts/742dcddc06afc2dfc1ecedd0a42adca0.woff")format("woff"),
        url("fonts/Cardinal Fruit/Cardinal Fruit Italic/Web Fonts/742dcddc06afc2dfc1ecedd0a42adca0.woff2")format("woff2"),
        url("fonts/Cardinal Fruit/Cardinal Fruit Italic/Web Fonts/742dcddc06afc2dfc1ecedd0a42adca0.ttf")format("truetype"),
        url("fonts/Cardinal Fruit/Cardinal Fruit Italic/Web Fonts/742dcddc06afc2dfc1ecedd0a42adca0.svg#Cardinal Fruit Italic")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}


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

body.display-iframe {
    background: #FEF3EA !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;
}

@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;
    }
}

@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;
    }
}

.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-match ul li { display: none; }

.smt-q-group-match ul li.smt-q-match-id-skintone-match {
    padding-left: 5rem; 
    min-height: 5rem;
    display: flex;
    align-items: center;
}

.smt-q-group-match ul li.smt-q-match-id-skintone-match::before { 
    top: 50% !important; 
    background-image: none !important;
    transform: translateY(-50%) rotate(-10deg) !important;
    width: 4rem !important;
    height: 4rem !important;
    border-radius: 100% !important;
    background: #c79388 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0em !important;
    font-size: 0.7rem !important;
    line-height: 120% !important;
    text-align: center !important; 
}

.smt-q-group-match ul li.smt-q-match-id-skintone-match.smt-q-reason-type-super::before { content: "Ideal Match" }

.smt-q-group-match ul li.smt-q-match-id-skintone-match.smt-q-reason-type-good::before { content: "Good Match" }

.smt-q-group-match ul li.smt-q-match-id-skintone-match.smt-q-reason-type-bad::before, .smt-q-group-match ul li.smt-q-match-id-skintone-match.smt-q-reason-type-dealbreaker::before { content: "Poor Match"; } 


/*
html, body {
    background: #f3f3f3 !important;
    font-size: 20px;
    line-height: 1.2;
    --color-bg: transparent;
    --color-text: #5B6870;
    --color-headline: #FFFFFF;
    --color-highlight: #C79388;
    --color-text_on_highlight: #FFFFFF;
    --color-highlight_form_element: #333232;
    --color-icon_line: #C79388;
    --color-icon_fill: #666;
    --color-progressbar_bg: #E3C9C3;
    --color-progressbar_filled: #fefbf4;
    --color-progressbar_empty: #fefbf4;
    --color-grid_lines: #E3C9C3;
    --color-ai_highlight: #FFFFFF;
    --button-border-radius: 999px;
    --button-text-transform: uppercase;
    --border-width: 2px;
    --body-font-family: "Bricolage Grotesque", sans-serif;
    --headings-font-family: "the-seasons", sans-serif;
    --subheadings-font-family: "Bricolage Grotesque", sans-serif;
    --body-font-weight: 400;
    --headings-font-weight: 400;
    --subheadings-font-weight: 700;
}


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

@property --a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.smt-q-slide .smt-q-start,
.smt-q-slide #smt-q-facescan-start-btn {
    position: relative;
    border-width: 0 !important;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background: conic-gradient(from var(--a) at 17% 50%, #e3b5c6, #E0A349, #4EA3D3, #E2B4E1) !important;
    background: conic-gradient(from var(--a) at 17% 50%, #f3f3f3, #f3f3f3, #1A6752) !important;
	animation: spin-gradient 2s linear infinite !important;
    padding: calc(1rem + 2px) calc(2rem + 2px);
}

.smt-q-slide #smt-q-facescan-skip {
    color: var(--color-text) !important;
    background-color: #d9d9d9 !important;
    border-color: #d9d9d9 !important;
}

.smt-q-slide #smt-q-facescan-start-btn::before {
    content: '' !important;
    background: #ade798 !important;
    color: #1A6752 !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: calc(100% - 4px) !important;
    height: calc(100% - 4px) !important;
    border-radius: 999px !important;
    z-index: 0 !important;
}

.smt-q-slide #smt-q-facescan-start-btn .inner {
    position: relative;
    z-index: 1;
    color: #1A6752 !important
}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes spin-gradient {
    0% {
        --a:0deg;
    }
   
    
    100% {
        --a:360deg;
    }
}


.smt-q-answer.smt-q-selected::before {
    background-color: var(--color-progressbar_bg) !important;
    opacity: 0.1 !important;
}


*/