@font-face {
    font-family: "Manus";
    src: url("./Fonts/Manus/manus-0.woff2") format("woff2"), url("./Fonts/Manus/manus-0.woff") format("woff"), url("./Fonts/Manus/manus-0.woff") format("woff"), url("./Fonts/Manus/manus-0.eot") format("embedded-opentype"), url("./Fonts/Manus/original-manus-0.otf") format("opentype"), url("./Fonts/Manus/manus-0.ttf") format("truetype"),url("./Fonts/Manus/manus-0.svg") format("svg");
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

.be-you-quiz-container {
    position: relative;
    min-height: 700px;
}

    .be-you-quiz-container .page-1,
    .be-you-quiz-container .page-2,
    .be-you-quiz-container .page-3-pads,
    .be-you-quiz-container .page-3-tampons,
    .be-you-quiz-container .page-3-liners,
    .be-you-quiz-container .page-4,
    .be-you-quiz-container .page-5,
    .be-you-quiz-container .page-6,
    .be-you-quiz-container .page-7,
    .be-you-quiz-container .page-results {
        position: relative;
        z-index: 10;
    }

    .be-you-quiz-container .float-none {
        float: none;
    }

    .be-you-quiz-container .banner img {
        width: 100%;
        position: relative;
        z-index: 10;
    }

    .be-you-quiz-container .heading {
        font-family: setimo, sans-serif !important;
        font-weight: bold;
        font-size: 9.5rem;
        color: #1C2E57;
        position: relative;
        margin: 0px;
        line-height: 72px;
    }

        .be-you-quiz-container .heading span {
            font-family: 'Manus';
            font-weight: normal;
            font-size: 11.5rem;
            color: #e980a8;
            position: absolute;
            top: 70%;
            left: 28.5%;
        }

    .be-you-quiz-container p {
        color: #1C2E57;
        font-size: 1.6rem;
        font-family: setimo, sans-serif;
        font-weight: normal;
        letter-spacing: 0px;
    }

    .be-you-quiz-container .terms {
        line-height: 0.9rem;
    }

    .be-you-quiz-container small {
        color: #1C2E57;
        font-size: 1rem;
        font-family: setimo, sans-serif;
        font-weight: normal;
        letter-spacing: 0px;
    }


    .be-you-quiz-container .form-group h3 {
        color: #1C2E57;
        text-transform: uppercase;
        font-family: setimo, sans-serif;
        font-size: 3rem;
        font-weight: bold;
        letter-spacing: 1px;
        position: relative;
        z-index: 10;
    }

    .be-you-quiz-container .form-group label {
        color: #1C2E57;
        text-transform: none;
        font-family: setimo, sans-serif;
        font-size: 1.8rem;
        line-height: 2.5rem;
        font-weight: normal;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .be-you-quiz-container .form-group input[type=text],
    .be-you-quiz-container .form-group select {
        border-style: solid;
        border-width: 3px;
        border-color: #6ac0cc;
        border-radius: 0;
        height: 45px !important;
        font-size: 1.6rem;
    }

        .be-you-quiz-container .form-group select + svg {
            display: none;
        }

    .be-you-quiz-container .btn-primary {
        border-style: none;
        display: block;
        width: 100%;
        border-radius: 0;
        background-color: #2cb7ce;
        box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
        font-family: setimo, sans-serif;
        font-weight: bold;
        font-size: 1.2rem;
        color: #ffffff;
        padding: 15px 40px;
        text-decoration: none;
        min-width: auto !important;
    }

    .be-you-quiz-container .btn-primary.pink {
        background-color: #e980a8;
    }

    .be-you-quiz-container .btn-primary.white {
        background-color: #ffffff;
        color: #002c5c;
    }

    .be-you-quiz-container .btn-secondary {
        border-style: none;
        display: block;
        width: 100%;
        border-radius: 0;
        background-color: #2cb7ce;
        box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
        font-family: setimo, sans-serif;
        font-weight: bold;
        font-size: 1.2rem;
        color: #ffffff;
        padding: 15px 40px;
        min-width: auto !important;
    }

    .be-you-quiz-container .purple-oval {
        width: 200px;
        height: 475px;
        position: absolute;
        right: 0px;
        top: -200px;
    }

    .be-you-quiz-container .pink-oval {
        width: 200px;
        height: 386px;
        position: absolute;
        top: 500px;
        left: 0px;
    }

    .be-you-quiz-container .box {
        background: #e980a8;
        height: 100%;
        text-align: center;
        position: relative;
        border-width: 11px;
        border-style: solid;
        border-color: #e980a8;
        position: relative;
        cursor: pointer;
    }

        .be-you-quiz-container .box.selected {
            border-color: #fbe423;
        }

            .be-you-quiz-container .box.selected::after {
                content: '';
                width: 0px;
                height: 0px;
                border-top: 0px solid transparent;
                border-bottom: 55px solid transparent;
                border-left: 55px solid #fbe423;
                position: absolute;
                left: 0px;
                top: 0px;
            }

        .be-you-quiz-container .box img {
            height: 50%;
            position: relative;
            margin-top: 20%;
        }

        .be-you-quiz-container .box p {
            color: #ffffff;
            font-family: setimo, sans-serif;
            font-weight: normal;
            font-size: 1.5rem;
        }

            .be-you-quiz-container .box p > span {
                color: #ffffff;
            }

    .be-you-quiz-container .box-small {
        border-width: 5px;
    }

        .be-you-quiz-container .box-small.selected::after {
            border-bottom: 35px solid transparent;
            border-left: 35px solid #fbe423;
        }

        .be-you-quiz-container .box-small p {
            font-size: 1.5rem;
            font-weight: normal;
            line-height: 2.5rem;
            margin-bottom: 2rem;
            margin-top: 2rem !important;
        }

    .be-you-quiz-container .radio-box {
        cursor: pointer;
    }

        .be-you-quiz-container .radio-box p {
            font-family: setimo, sans-serif;
            font-weight: bold;
            font-size: 1.4rem;
            vertical-align: middle;
            line-height: 2.8rem;
            margin-top: 0px;
        }

        .be-you-quiz-container .radio-box svg {
            width: 25px;
        }

        .be-you-quiz-container .radio-box img {
            width: 25px;
        }

    .be-you-quiz-container .radio-group p {
        font-family: setimo, sans-serif;
        font-weight: bold;
        font-size: 1.2rem;
        vertical-align: top;
        line-height: 2.4rem;
        margin-top: 0px;
    }

    .be-you-quiz-container .separator {
        height: 8px;
        width: 100%;
        background-color: #6AC0CC;
    }


    .be-you-quiz-container .light-day {
        color: #b570c7;
    }

    .be-you-quiz-container .regular-day {
        color: #6ac0cc;
    }

    .be-you-quiz-container .heavy-day {
        color: #e980a8;
    }

    .be-you-quiz-container .very-heavy-day {
        color: #f9d242;
    }

    .be-you-quiz-container .day-results {
        position: relative;
        z-index: 10;
    }

    .be-you-quiz-container .light-day-result div,
    .be-you-quiz-container .regular-day-result div,
    .be-you-quiz-container .heavy-day-result div,
    .be-you-quiz-container .very-heavy-day-result div {
        position: relative;
    }

    .be-you-quiz-container .light-day-result svg,
    .be-you-quiz-container .regular-day-result svg,
    .be-you-quiz-container .heavy-day-result svg,
    .be-you-quiz-container .very-heavy-day-result svg {
        width: 100%;
    }

        .be-you-quiz-container .light-day-result svg + p {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            text-align: center;
            color: #ffffff;
            font-family: 'setimo';
            font-weight: bold;
            font-size: 12rem;
            vertical-align: middle;
            height: 100%;
            line-height: 22rem;
            margin: 0px;
            margin-top: 10%;
            display: inline-block;
        }

        .be-you-quiz-container .regular-day-result svg + p {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            text-align: center;
            color: #ffffff;
            font-family: 'setimo';
            font-weight: bold;
            font-size: 12rem;
            vertical-align: middle;
            height: 100%;
            line-height: 22rem;
            margin: 0px;
            margin-top: 10%;
            display: inline-block;
        }

        .be-you-quiz-container .heavy-day-result svg + p {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            text-align: center;
            color: #ffffff;
            font-family: 'setimo';
            font-weight: bold;
            font-size: 12rem;
            vertical-align: middle;
            height: 100%;
            line-height: 22rem;
            margin: 0px;
            margin-top: 10%;
            display: inline-block;
        }

        .be-you-quiz-container .very-heavy-day-result svg + p {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            text-align: center;
            color: #ffffff;
            font-family: 'setimo';
            font-weight: bold;
            font-size: 12rem;
            vertical-align: middle;
            height: 100%;
            line-height: 22rem;
            margin: 0px;
            margin-top: 10%;
            display: inline-block;
        }

    .be-you-quiz-container .light-day-result .footer,
    .be-you-quiz-container .regular-day-result .footer,
    .be-you-quiz-container .heavy-day-result .footer,
    .be-you-quiz-container .very-heavy-day-result .footer {
        color: #1C2E57;
        text-transform: none;
        font-family: setimo, sans-serif;
        font-size: 2.4rem;
        font-weight: normal;
        letter-spacing: 1px;
        text-align: center;
        line-height: 2.6rem;
        margin-bottom: 0px;
    }

    .be-you-quiz-container .before-result > div {
        background-color: #a9cc00;
    }

    .be-you-quiz-container .light-result > div {
        background-color: #b570c7;
    }

    .be-you-quiz-container .regular-result > div {
        background-color: #6ac0cc;
    }

    .be-you-quiz-container .heavy-result > div {
        background-color: #e980a8;
    }

    .be-you-quiz-container .very-heavy-result > div {
        background-color: #f9d242;
    }

    .be-you-quiz-container .after-result > div {
        background-color: #a9cc00;
    }

    .be-you-quiz-container .result {
        max-height: 300px;
        overflow: hidden;
        z-index: 10;
        position: relative;
    }

    .be-you-quiz-container .recommended .text {
        padding: 2rem;
    }

        .be-you-quiz-container .recommended .text > div {
            margin-top: 15%;
        }

        .be-you-quiz-container .recommended .text p {
            text-transform: none;
            font-family: setimo, sans-serif;
            font-size: 2.4rem;
            font-weight: normal;
            letter-spacing: 1px;
            line-height: 2.4rem;
            color: #ffffff;
            margin-bottom: 1rem;
        }

            .be-you-quiz-container .recommended .text p + p {
                font-weight: bold;
                font-size: 3.2rem;
                line-height: 3.2rem;
            }

        .be-you-quiz-container .recommended .text span {
            display: block;
        }

    .be-you-quiz-container .recommended .product-1 a,
    .be-you-quiz-container .recommended .product-2 a {
        line-height: 300px;
        text-decoration: none;
    }

    .be-you-quiz-container .recommended .product-1 img,
    .be-you-quiz-container .recommended .product-2 img {
        max-width: 100%;
        padding: 2rem 0rem 0rem;
    }

    .be-you-quiz-container .recommended .product-1 a span,
    .be-you-quiz-container .recommended .product-2 a span {
        display: block;
        position: relative;
        top: -300px;
        text-align: center;
        font-family: setimo, sans-serif;
        text-decoration: none;
        color: #1d2f56;
        font-size: 1.5rem;
        font-weight: bold;
        text-transform: uppercase;
    }  

    .be-you-quiz-container div.also-try {
        background-color: transparent;
        text-align: center;
    }

    .be-you-quiz-container div.also-try a {
        text-decoration: none;
    }

        .be-you-quiz-container div.also-try div {
            height: 100%;
        }

        .be-you-quiz-container div.also-try p {
            text-transform: uppercase;
            font-family: setimo, sans-serif;
            font-size: 1.5rem;
            font-weight: bold;
            letter-spacing: 1px;
            line-height: 1.5rem;
            color: #ffffff;
            margin-bottom: 1.5rem;
            text-align: center;
            padding-top: 2rem;
            margin-top: 0px;
        }

        .be-you-quiz-container div.also-try img {
            max-width: 90%;
            padding: 0rem;
        }

        .be-you-quiz-container div.also-try span {
            display: block;
            position: relative;
            top: -30px;
            text-align: center;
            font-family: setimo, sans-serif;
            text-decoration: none;
            color: #1d2f56;
            font-size: 1.5rem;
            font-weight: bold;
            text-transform: uppercase;
        }

    .be-you-quiz-container .before-result div.also-try div {
        background-color: #a9cc00;
    }

    .be-you-quiz-container .light-result div.also-try div {
        background-color: #b570c7;
    }

    .be-you-quiz-container .regular-result div.also-try div {
        background-color: #6ac0cc;
    }

    .be-you-quiz-container .heavy-result div.also-try div {
        background-color: #e980a8;
    }

    .be-you-quiz-container .very-heavy-result div.also-try div {
        background-color: #f9d242;
    }

    .be-you-quiz-container .after-result div.also-try div {
        background-color: #a9cc00;
    }

    .be-you-quiz-container .feel-fresh {
        background-image: url('./feel-fresh-bg.jpg');
        background-size: cover;
        padding: 3rem;
    }

        .be-you-quiz-container .feel-fresh p {
            font-family: setimo, sans-serif;
            color: #ffffff;
            margin-bottom: 1rem;
            font-weight: bold;
            font-size: 3.2rem;
            line-height: 3.8rem;
            text-transform: uppercase;
        }

            .be-you-quiz-container .feel-fresh p + div + p {
                text-transform: none;
                font-size: 2rem;
                font-weight: normal;
                letter-spacing: 1px;
                line-height: 2.4rem;
                margin-top: 3rem;
                margin-bottom: 3rem;
                width: 80%;
            }

        .be-you-quiz-container .feel-fresh > div {
            margin-top: 10%;
        }

            .be-you-quiz-container .feel-fresh > div + div {
                margin-top: 0px;
            }

        .be-you-quiz-container .feel-fresh img {
            max-width: 100%;
            padding: 2rem;
        }

        .be-you-quiz-container .feel-fresh .btn-primary {
            width: 80%;
            font-size: 2rem;
            text-decoration: none;
        }

        .be-you-quiz-container .got-questions .btn-primary {
            width: 80%;
            font-size: 2rem;
            text-decoration: none;
        }

    .be-you-quiz-container .got-questions {
        background-color: #e980a8;
        position: relative;
        padding: 3rem;
        max-height: 300px;
        z-index: 10;
    }

        .be-you-quiz-container .got-questions p {
            text-transform: none;
            font-size: 2rem;
            font-weight: normal;
            letter-spacing: 1px;
            line-height: 2.4rem;
            margin-top: 3rem;
            margin-bottom: 3rem;
            color: #ffffff;
            text-transform: none;
            font-family: setimo, sans-serif;
        }

            .be-you-quiz-container .got-questions p a {
                color: #e980a8;
                font-weight: bold;
                text-decoration: none;
            }

        .be-you-quiz-container .got-questions .bubble a {
            position: relative;
            top: 0px;
        }

        .be-you-quiz-container .got-questions .bubble a img {
            max-width: 100%;
        }

    .be-you-quiz-container .pink-link {
        color: #e980a8;
    }

    .be-you-quiz-container .got-questions .btn-primary {
        margin-top: 20px;
    }

label[for=MarketingAgree] {
    font-size: 1rem !important;
    cursor: pointer;
}

.be-you-quiz-container .warning-text p {
    font-family: setimo, sans-serif;
    color: #e980a8;
    font-size: 1.4rem;
    text-align: center;
}

#MarketingAgree {
    display: inline-block;
    appearance: checkbox;
    -webkit-appearance: checkbox;
    width: 20px;
    height: 20px;
}

@media (max-width: 1199px) {
    .be-you-quiz-container .heading {
        font-size: 5.5rem;
    }

    .be-you-quiz-container .heading span {
        top: 35%;
        font-size: 7.5rem;
    }
}

    @media (max-width: 800px) {
        .be-you-quiz-container .col-md-8.mx-auto > img {
            width: 100%;
            position: relative;
            z-index: 10;
        }

        .be-you-quiz-container .purple-oval {
            width: 100px;
        }

        .be-you-quiz-container .pink-oval {
            width: 100px;
            bottom: 10px;
            top: 500px;
            left: 0px;
        }

        .be-you-quiz-container .heading {
            font-size: 4.5rem;
        }

            .be-you-quiz-container .heading span {
                top: 28%;
                font-size: 5.5rem;
            }

        .be-you-quiz-container .product-type-container-js .col-6 {
            max-height: 200px;
        }

        .be-you-quiz-container .form-group h3 {
            font-size: 2rem;
            margin-top: 0px;
            margin-bottom: 0px;
        }

        .be-you-quiz-container .saturation-container-js .col-6 {
            max-height: 200px;
        }

        label[for=MarketingAgree] {
            font-size: 1.2rem !important;
        }

        .be-you-quiz-container small {
            font-size: 1.2rem;
            line-height: 1.2rem;
        }

        .be-you-quiz-container .result {
            max-height: 200px;
        }

        .be-you-quiz-container .light-day-result svg,
        .be-you-quiz-container .regular-day-result svg,
        .be-you-quiz-container .heavy-day-result svg,
        .be-you-quiz-container .very-heavy-day-result svg {
            max-height: 100px;
        }

            .be-you-quiz-container .light-day-result svg + p,
            .be-you-quiz-container .regular-day-result svg + p,
            .be-you-quiz-container .heavy-day-result svg + p,
            .be-you-quiz-container .very-heavy-day-result svg + p {
                line-height: 9rem;
                font-size: 5rem;
            }

        .be-you-quiz-container .light-day-result .footer,
        .be-you-quiz-container .regular-day-result .footer,
        .be-you-quiz-container .heavy-day-result .footer,
        .be-you-quiz-container .very-heavy-day-result .footer {
            margin-top: 0px;
            font-size: 1.6rem;
            line-height: 2.2rem;
        }

        .be-you-quiz-container .recommended .text > div {
            margin-top: 0px;
        }

        .be-you-quiz-container .recommended .text p {
            font-size: 1.8rem;
            line-height: 2rem;
            margin: 0px;
        }

            .be-you-quiz-container .recommended .text p + p {
                margin: 0px;
                font-size: 2.4rem;
                line-height: 2.6rem;
            }

        .be-you-quiz-container .recommended .text span {
            display: inline-block;
            margin-left: 5px;
        }

        .be-you-quiz-container .recommended .product-1 img,
        .be-you-quiz-container .recommended .product-2 img {
            padding: 0rem;
        }

        .be-you-quiz-container .recommended .product-1 a,
        .be-you-quiz-container .recommended .product-2 a {
            line-height: 100px;
        }

        .be-you-quiz-container .very-heavy-result .recommended .text {
            padding-bottom: 0px;
        }

        .be-you-quiz-container div.also-try img {
            margin-top: 5rem;
        }

        .be-you-quiz-container .feel-fresh > div {
            margin-top: 0px;
            text-align: center;
        }

        .be-you-quiz-container .feel-fresh p {
            font-size: 2.4rem;
            line-height: 2.6rem;
        }

            .be-you-quiz-container .feel-fresh p + div + p {
                width: 100%;
                margin-top: 0px;
                font-size: 1.8rem;
                line-height: 2rem;
            }

        .be-you-quiz-container .feel-fresh img {
            padding: 0rem;
        }

        .be-you-quiz-container .feel-fresh .btn-primary {
            font-size: 1.6rem;
            width: 100%;
        }

        .be-you-quiz-container .got-questions p {
            margin-top: 5rem !important;
            text-align: center;
        }

        .be-you-quiz-container .got-questions .bubble a {
            display: block;
            width: 40%;
            position: absolute;
            top: -320px;
            left: 30%;
        }

            .be-you-quiz-container .got-questions .bubble a img {
                width: 100%;
            }

            .be-you-quiz-container .got-questions .btn-primary {
                width: 100%;
                margin-top: 10px;
            }
    }