/***************************************************************************************************************************************************************************************/

/*QUIZ STYLES*/

/***************************************************************************************************************************************************************************************/

.sparkle {
	position: absolute;
}

/***Header***/

.quiz-header {
	align-self: center;
	background: var(--light-gray);
	height: 80px;
	padding: 12px 50px;
}

.quiz-header .logo {
	left: 50%;
	margin: 0;
	padding: 11px var(--container-outer-padding) 10px;
	position: absolute;
    transform: translateX(-50%);
}

.back-quiz,
.exit-btn {
	background: transparent;
	border: none;
	font-size: calc(13rem / 16);
	font-weight: 700;
	letter-spacing: 2.5px;
	line-height: calc(20 / 13);
	padding: 0;
	position: relative;
	text-transform: uppercase;
	transition: opacity .3s;
}

.back-quiz:hover,
.exit-btn:hover {
	opacity: .6;
}

.back-quiz {
	padding: 0 0 0 22px;
}

.back-quiz::before {
	background-image: url(arrow-left.0fc3b5604c.svg);
	background-position: center;
	background-size: cover;
	content: '';
	height: 13px;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
}

.exit-btn {
	margin-left: auto;
}

/***Footer***/

footer {
	display: none !important;
}

footer.show-footer {
	display: block !important;
}

/***All Screens***/

.quiz-screen,
.loading-screen {
	display: flex;
	min-height: calc(100vh - 239px);
/*	opacity: 0;*/
	transition: opacity .3s;
	width: 100%;
}

.quiz-screen {
    padding: 40px 0;
}

.loading-screen {
	opacity: 0;
	z-index: 3;
}

.quiz-screen > .flex-container,
.loading-screen > .flex-container {
	align-items: center;
}

.opaque {
	opacity: 1;
}

.fading {
	position: absolute;
}

.screen-in {
/*	animation: screenIn 1s ease-out;*/
}

.screen-out {
/*	animation: screenOut 1s ease-out;*/
	position: absolute;
}

@keyframes screenIn {
    0% {
      opacity: 0;
      transform: translateX(100vw);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
}

@keyframes screenOut {
    0% {
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      transform: translateX(-100vw);
    }
}

.mid-only {
	display: none !important;
}

/***Intro Screen***/

.quiz-screen.begin-quiz {
	display: block;
	min-height: calc(100vh - 80px);
    padding: 0 0 80px;
}

.begin-quiz .img-hero {
	background: var(--light-blue);
	margin-bottom: 40px;
	padding: 149px 20px 0;
	position: relative;
}

.begin-quiz h1 {
	margin: 0 auto 44px;
	text-align: center;
}

.products-img {
	display: block;
	margin: 0 auto;
}

.begin-quiz p {
	margin: 0 auto 40px;
	max-width: 578px;
	padding: 0 20px;
	text-align: center;
}

.begin-quiz .btn {
	display: block;
	margin: 0 auto;
}

.begin-quiz .sparkle-1 {
	right: 97px;
	top: 91px;
}

.begin-quiz .sparkle-2 {
	bottom: -28px;
	left: 71px;
}

.begin-quiz .sparkle-2-alt {
	bottom: -105px;
	right: 91px;
}


.begin-quiz .sparkle-3 {
	left: 185px;
	top: 65px;
}

/***Question Screens***/

.quiz-screen article {
	width: calc(475 / 1196 * 100%);
}

.quiz-screen .heading-4 {
	margin-bottom: 30px;
}

.quiz-screen .heading-4 span {
	font-style: italic;
}

.quiz-screen fieldset {
	display: grid;
	gap: 15px;
	position: relative;
	width: calc(577 / 1196 * 100%);
}

.quiz-screen label {
	align-items: center;
	background: var(--light-gray);
	border-radius: 10px;
	display: flex;
	justify-content: center;
	padding: 10px;
	position: relative;
	text-align: center;
	transition: background .3s;
}

.quiz-screen label:not(.no-hover):hover {
	background: var(--white);
	outline: 1px solid var(--bright-blue);
}

.quiz-screen input:checked + label,
.quiz-screen input:checked + label:not(.no-hover) {
	background: var(--light-blue);
}

.quiz-screen input:checked + label:hover,
.quiz-screen input:checked + label:not(.no-hover):hover {
	outline: none;
}

.quiz-screen input + label::after {
	background-image: url(input-check.3a35dc70c2.svg);
	content: '';
	height: 34px;
	opacity: 0;
	position: absolute;
	right: -10px;
	top: -10px;
	transition: opacity .3s;
	width: 34px;
}

.quiz-screen input:checked + label::after {
	opacity: 1;
}

/*Age Screen*/

.age-screen fieldset {
	grid-template: 1fr 1fr / 1fr 1fr;
}

.age-screen label {
	height: 206px;
}

.age-screen .sparkle-2 {
	left: -53px;
	top: 86px;
}

.age-screen .sparkle-3 {
	bottom: -60px;
	right: -20px;
}

/*Pregnant Screen*/

.pregnant-screen fieldset {
	grid-template: 1fr / 1fr 1fr;
}

.pregnant-screen label {
	display: flex;
	flex-direction: column;
	height: 281px;
}

.pregnant-screen label svg {
	margin-bottom: 32px;
	max-height: 60px;
}

.pregnant-screen .sparkle-2 {
	bottom: -60px;
	right: -20px;
}

.pregnant-screen .sparkle-3 {
	left: -50px;
	top: -36px;
}

/*Fitzpatrick Screen*/

.fitzpatrick-screen fieldset {
	width: calc((577 / 1196 * 100%) - 63px);
}

.fitzpatrick-screen fieldset .flex-container {
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.fitzpatrick-screen label:first-of-type {
	font-size: calc(14rem / 16);
	height: 60px;
	margin-right: 27px;
	min-width: 206px;
	position: relative;
	width: 206px;
}

.fitzpatrick-screen label:first-of-type::before {
	background-color: #E3C4AC;
	border-radius: 100%;
	content: '';
	height: 24px;
	left: -63px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
}

.fitzpatrick-screen label[for="2"]:first-of-type::before {
	background-color: #D1AB8E;
}

.fitzpatrick-screen label[for="3"]:first-of-type::before {
	background-color: #CD936A;
}

.fitzpatrick-screen label[for="4"]:first-of-type::before {
	background-color: #A6775A;
}

.fitzpatrick-screen label[for="5"]:first-of-type::before {
	background-color: #8C5C44;
}

.fitzpatrick-screen label[for="6"]:first-of-type::before {
	background-color: #5D3B30;
}

.fitzpatrick-screen label:nth-of-type(2) {
	background: transparent;
	text-align: left;
}

/*Face Screen*/

.face-sliders {
	width: calc(372 / 1196 * 100%);
}

.face-sliders fieldset {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 40px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.face-sliders fieldset:last-of-type {
	margin-bottom: 0;
}

.face-sliders fieldset::before {
	background: var(--light-blue);
	border-radius: 2px;
	content: '';
	height: 2px;
	left: 0;
	position: absolute;
	top: 20px;
	width: 100%;
}

.face-sliders legend {
	margin-bottom: 25px;
	width: 100%;
}

.face-sliders fieldset > div {
	max-width: calc((100% - 162px) / 4);
}

.face-sliders input {
	cursor: pointer;
	opacity: 0;
	position: relative;
	top: -12px;
	width: 100%;
}

.face-sliders label,
.face-sliders input:checked + label {
	background: none;
	font: 700 calc(10rem/16)/calc(13/10) var(--body-font);
	letter-spacing: 2px;
	padding-top: 16px;
	text-transform: uppercase;
}

.face-sliders input + label::after {
	content: '';
	height: 16px;
	left: 50%;
	opacity: 1;
	position: absolute;
	top: -7px;
	transform: translateX(-50%);
	transition: all .3s;
	width: 16px;
	z-index: 1;
}

.face-sliders input + label::after {
	background-image: url(unchecked.ac701c318d.svg);
}

.face-sliders input:checked + label::after {
	background-image: url(face-slider.40aa70e2e7.svg);
}

.face-sliders input:checked + label::before {
    background: var(--bright-blue);
    border-radius: 2px;
    content: '';
    height: 3px;
    left: calc(50% - 230px);
    position: absolute;
    top: -1px;
    transform: translateX(-50%);
    width: 466px;
}

.face-zone {
	transition: all .3s;
}

.dormant {
	fill: var(--light-gray);
	stroke: var(--light-gray);
}

.blue-section {
	fill: var(--light-blue);
	stroke: var(--light-blue);
}

/*Reaction Screen*/

.reaction-screen fieldset {
	grid-template: repeat(4, 1fr) / repeat(3, 1fr);
}

.reaction-screen fieldset label {
	font-size: calc(14rem / 16);
	font-weight: 600;
	height: 80px;
}

.reaction-screen legend,
.concerns-screen legend,
.prescrip-screen legend,
.products-screen legend {
	grid-column: 1 / span 3;
	margin-bottom: 20px;
	opacity: .5;
	text-align: center;
	width: 100%;
}

.reaction-screen fieldset > div:last-of-type {
	grid-column: 1 / span 3;
}

/*Breakout Screen*/

.breakout-screen label {
	font-weight: 600;
	height: 92px;
	justify-content: flex-start;
	padding-left: 90px;
	text-align: left;
}

.breakout-screen label::before {
	background-image: url(breakout-rare.0cea755636.svg);
	content: '';
	height: 30px;
	left: 30px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
}

.breakout-screen label[for="sometimes"]::before {
	background-image: url(breakout-sometimes.8767c1a2d2.svg);
}

.breakout-screen label[for="hormonally"]::before {
	background-image: url(breakout-hormonal.29cbea488f.svg);
}

.breakout-screen label[for="frequently"]::before {
	background-image: url(breakout-frequent.a70856dc92.svg);
}

.breakout-screen .sparkle-2 {
	bottom: -60px;
	right: -20px;
}

.breakout-screen .sparkle-3 {
	left: -50px;
	top: -36px;
}

/*Concerns Screen*/

.concerns-screen fieldset {
	grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.concerns-screen fieldset label {
	font-size: calc(14rem / 16);
	font-weight: 600;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	padding: 20px 20px;
}

.concerns-screen label::before {
	background-image: url(rough.d798d0cf72.svg);
	content: '';
	height: 30px;
	margin-bottom: 10px;
	width: 30px;
}

.concerns-screen label[for="irritation"]::before {
	background-image: url(irritation.71adc6f465.svg);
}

.concerns-screen label[for="dehydration"]::before {
	background-image: url(dehydration.c18030ea0e.svg);
}

.concerns-screen label[for="breakouts"]::before {
	background-image: url(breakouts.cc861671e4.svg);
}

.concerns-screen label[for="rosacea"]::before {
	background-image: url(rosacea.d8e16def9b.svg);
}

.concerns-screen label[for="dryness"]::before {
	background-image: url(dryness.15a7dbe244.svg);
}

.concerns-screen label[for="hyperpigmentation"]::before {
	background-image: url(hyperpigmentation.2494e37a1c.svg);
}

.concerns-screen label[for="wrinkles"]::before {
	background-image: url(wrinkles.3fc75ac23d.svg);
}

.concerns-screen label[for="tightness"]::before {
	background-image: url(eczema.9731b1b86a.svg);
}

/*Prescription Screen*/

.prescrip-screen fieldset {
	grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.prescrip-screen label {
	font-size: calc(14rem / 16);
	font-weight: 600;
	height: 100px;
}

.prescrip-screen fieldset > div:last-of-type {
	grid-column: 1 / span 3;
	width: 100%;
}

/*Products Screen*/

.products-screen fieldset {
	grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.products-screen label {
	flex-direction: column;
	font-size: calc(14rem / 16);
	font-weight: 600;
	height: 120px;
	justify-content: space-between;
	padding: 20px 10px;
}

.products-screen label::before {
	background-image: url(prod-cleanser.7e38821e8a.svg);
	content: '';
	height: 30px;
	width: 30px;
}

.products-screen label[for="corrective_serum"]::before {
	background-image: url(prod-cserum.6a5750b8d2.svg);
}

.products-screen label[for="preventative_serum"]::before {
	background-image: url(prod-pserum.008e2b7c72.svg);
}

.products-screen label[for="exfoliant"]::before {
	background-image: url(prod-exfoliant.85ecddb358.svg);
}

.products-screen label[for="toner"]::before {
	background-image: url(prod-toner.efe7c7add6.svg);
}

.products-screen label[for="sunscreen"]::before {
	background-image: url(prod-sunscreen.c3fe6bcf6f.svg);
}

.products-screen label[for="moisturizer"]::before {
	background-image: url(prod-moisturizer.15d1713dbc.svg);
}

.products-screen label[for="masks"]::before {
	background-image: url(prod-mask.a2e2d1e3ea.svg);
}

.products-screen label[for="devices"]::before {
	background-image: url(prod-devices.dcbac65c77.svg);
}

/*Goals Screen*/

.goals-screen fieldset {
	grid-template: 1fr / repeat(3, 1fr);
}

.goals-screen label {
	display: flex;
	flex-direction: column;
	font-size: calc(14rem / 16);
	font-weight: 600;
	height: 196px;
	justify-content: flex-end;
	padding: 26px 10px 30px;
}

.goals-screen label span {
	font-family: var(--heading-font);
	margin-bottom: auto;
}

.goals-screen label svg {
	margin-bottom: 16px;
}

.goals-screen .sparkle-1 {
	bottom: -60px;
	right: -20px;
}

.goals-screen .sparkle-2 {
	left: -50px;
	top: -36px;
}

/***Progress Meter***/

.progress-meter {
	align-items: center;
	background: var(--light-blue);
}

.progress-meter .container {
	padding-bottom: 64px;
	padding-top: 65px;
}

.progress-meter ul {
	align-items: flex-end;
	flex-wrap: nowrap;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 347px;
}

.progress-meter .section-name {
	display: none;
}

.progress-meter .step-mark {
	background: var(--white);
	border-radius: 100%;
	display: block;
	height: 8px;
	width: 8px;
}

.progress-meter .complete .step-mark {
	background: var(--bright-blue);
}

.progress-meter .current .section-name {
	display: block;
	font-size: calc(11rem / 16);
	font-weight: 600;
	letter-spacing: 2px;
	line-height: calc(14 / 11);
	margin-bottom: 8px;
	text-align: center;
	text-transform: uppercase;
}

.progress-meter .current .step-mark {
	background: var(--bright-blue);
	border-radius: 5px;
	width: 140px;
}

.progress-meter .shelf-svgs {
	align-self: flex-end;
	bottom: 0;
	position: absolute;
	right: 47px;
	width: calc(859 / 1440 * 100%);
}

.progress-meter .shelf-svgs svg {
	display: block;
	margin-bottom: -1px;
}

/***Loading Screens***/

.loading-screen {
	min-height: calc(100vh - 80px);
}

.loading-screen .flex-container {
	flex-direction: column;
	justify-content: center;
}

.load-gif-container {
	margin-bottom: 40px;
	max-height: 106px;
	max-width: 148px;
}

.loading-gif {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

/***Gate Screen***/

.gate-screen {
	align-items: center;
	background: var(--light-gray);
	flex-direction: column;
	justify-content: space-between;
	min-height: calc(100vh - 80px);
	padding-bottom: 120px;
}

.quiz-form-container {
	align-items: center;
	background: var(--white);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	margin-top: 67px;
	max-width: 784px;
	padding: 65px 103px 30px;
	position: relative;
	width: 100%;
}

.quiz-gate-img {
	margin-bottom: 10px;
}

.quiz-form-container h2 {
	margin-bottom: 15px;
}

.quiz-form-container p {
	margin-bottom: 30px;
	text-align: center;
}

.quiz-form-container form {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}

.quiz-form-container label.accessibility {
	position: absolute;
}

.quiz-form-container input {
	background: var(--off-white);
	border: 1px solid rgba(167, 137, 137, .15);
	border-radius: 0;
	margin: 0 0 30px;
	padding: 15px 20px;
}

.quiz-form-container input:first-of-type,
.quiz-form-container input:nth-of-type(2) {
	width: calc(50% - 15px);
}

.quiz-form-container form .black-btn {
	margin: 0 auto;
}

.gate-products-img {
	bottom: 0;
	position: fixed;
	width: 100%;
}

.quiz-form-container svg:nth-of-type(3) {
	height: 18px;
	left: 297px;
	position: absolute;
	top: 94px;
	width: 20px;
}

.quiz-form-container .sparkle-1 {
	left: 348px;
	top: 42px;
}

.quiz-form-container .sparkle-3 {
	right: 321px;
	top: 30px;
}

/***Products Results***/

.prod-results-screen {
	display: flex;
	flex-direction: column;
}

article.results-hero {
	background: var(--bright-yellow);
	border-bottom-right-radius: 120px;
	border-top-left-radius: 120px;
	margin: 20px;
	padding: 86px 20px 62px;
	position: relative;
	width: calc(100% - 40px);
}

.results-hero h2 {
	margin: 0 auto 20px;
	text-align: center;
}

.results-hero p {
	margin: 0 auto;
	max-width: 578px;
	text-align: center;
}

.results-hero p button {
	background: none;
	border: none;
	border-bottom: 2px solid var(--bright-blue);
	font-weight: 700;
	margin: 0;
	padding: 0;
	vertical-align: unset;
}

.prod-results-screen .results-hero .sparkle-1 {
	left: 196px;
	top: 147px;
	width: 9px;
}

.prod-results-screen .results-hero .sparkle-3 {
	right: 165px;
	top: 49px;
}

.res-container {
	flex-wrap: nowrap;
	gap: 60px;
	position: relative;
}

.res-container::after {
	background-color: var(--cream);
	content: '';
	height: 100%;
	position: absolute;
	right: calc(-1 * var(--container-outer-padding));
	top: 0;
	width: var(--container-outer-padding);
}

.sticky-routine {
	align-self: flex-start;
	height: 100%;
	margin: 66px 0 20px -42px;
	position: sticky;
	top: 20px;
	width: 208px;
}

.sticky-routine h3.eyebrow {
	letter-spacing: 1.4px;
	margin-bottom: 30px;
}

.prod-list {
	list-style-type: none;
	margin-bottom: 99px;
	padding: 0;
}

.regimen-step {
	margin-bottom: 30px;
	opacity: .5;
	position: relative;
	transition: opacity .3s;
}

.regimen-step:last-of-type {
	margin-bottom: 0;
}

.regimen-step::after {
	background-color: rgba(64, 64, 64, .2);
	bottom: -17px;
	content: '';
	height: 1px;
	left: 0;
	position: absolute;
	width: 100%;
}

.regimen-step:last-of-type::after {
	content: none;
}

.regimen-step span {
	display: block;
	transition: transform .3s;
}

.regimen-step.active-step {
	opacity: 1;
}

.regimen-step.active-step span {
	transform: translateX(40px);
}

.regimen-step.active-step::before {
    align-items: center;
    background-color: var(--light-blue);
    background-image: url(arrow-right.69a439badd.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px;
    border-radius: 100%;
    color: var(--black);
    content: '';
    display: flex;
    font-size: 1rem;
    height: 25px;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
}

.sticky-routine h3.eyebrow:nth-of-type(2) {
	margin-bottom: 15px;
}

.sticky-routine .social {
    display: flex;
    gap: 15px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.sticky-routine .social a {
	align-items: center;
    background: var(--light-blue);
    border-radius: 100%;
    color: var(--black);
    display: flex;
    font-size: 1rem;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.prod-results {
	background-color: var(--cream);
	border-top-left-radius: 40px;
	list-style-type: none;
	margin: 0;
	padding: 60px 0 60px 103px;
}

.prod-results > li {
	margin-bottom: 60px;
}

.prod-results > li:last-of-type {
	margin-bottom: 0;
}

.tails-heading {
	position: relative;
	text-align: center;
}

.tails-heading::before {
	background: var(--black);
	content: '';
	height: 1px;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}

.tails-heading span {
	position: relative;
	z-index: 1;
}

.tails-heading span::before {
	background: var(--cream);
	content: '';
	height: 100%;
	left: -20px;
	position: absolute;
	top: 0;
	width: calc(100% + 40px);
	z-index: -1;
}

.prod-results li > p {
	margin: 10px auto 40px;
	text-align: center;
}

.prod-results li > .flex-container {
	flex-wrap: nowrap;
	gap: 40px;
}

.prod-img {
	width: calc(270 / 888 * 100%);
}

.prod-img-container {
	border-radius: 15px;
	display: flex;
	justify-content: center;
	margin-bottom: 25px;
	overflow: hidden;
}

.product-image {
	object-fit: contain;
	width: 100%;
}

.price-size {
	margin-bottom: 25px;
	text-align: center;
}

.prod-img .black-btn {
	display: block;
	padding-left: 20px;
	padding-right: 20px;
	position: relative;
	text-align: center;
	width: 100%;
}

.prod-img .black-btn span {
	position: relative;
}

.prod-img .black-btn span::before {
	background-image: url(cart-plus.a857590c97.svg);
	content: '';
	height: 9px;
	left: -14px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 9px;
}

.prod-info {
	width: calc(578 / 888 * 100%);
}

.prod-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.prod-tags span,
.time-tag {
	background: var(--white);
	border: 1px solid var(--bright-blue);
	border-radius: 15px;
	color: var(--black);
	font-size: calc(10rem / 16);
	font-weight: 700;
	letter-spacing: 2px;
	line-height: calc(13 / 10);
	padding: 8px 15px 8px 35px;
	position: relative;
}

.prod-tags span {
	text-transform: uppercase;
}

.prod-tags span::before,
.prod-tags .top-rated::before,
.time-tag::before {
	background-image: url(stars.3a3cfd8962.svg);
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	height: 13px;
	left: 15px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
}

.prod-tags .estheticians-favorite::before {
	background-image: url(heart.b5780c9d77.svg);
}

.prod-tags .pregnancy-safe::before {
	background-image: url(shield-check.e711dc3934.svg);
}

.prod-tags .best-seller::before {
	background-image: url(thumbs-up.dcad4310f5.svg);
}

.prod-tags .vegan::before {
	background-image: url(leaf.3bc1451a5f.svg);
}

.prod-info h3 {
	margin-bottom: 15px;
}

.prod-desc {
	margin-bottom: 30px;
}

.instr-container {
	gap: 25px 40px;
	justify-content: flex-start;
}

.use-container,
.when-container {
	width: calc(50% - 20px);
}

.instr-container h5 {
	margin-bottom: 10px;
}

.instr-container p {
	margin: 0;
}

.when-container .flex-container {
	gap: 8px;
	justify-content: flex-start;
}

.am-use,
.pm-use {
	background-color: var(--bright-yellow);
	border-radius: 10px;
	color: var(--black);
	font-size: calc(8rem / 16);
	font-weight: 700;
	letter-spacing: 1.6px;
	line-height: calc(10 / 8);
	padding: 4px 10px 4px 23px;
	position: relative;
}

.pm-use {
	background-color: var(--dark-gray);
	color: var(--white);
}

.am-use::before,
.pm-use::before {
	background-image: url(sun-bright.a1bd3b1adb.svg);
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	height: 9px;
	left: 7px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 11px;
}

.pm-use::before {
	background-image: url(moon-stars-white.280506d798.svg);
}

.why-container {
	background-color: var(--light-blue);
	border-radius: 15px;
	padding: 25px 40px;
	width: 100%;
}

.why-container h5 {
	margin-bottom: 15px;
	padding-left: 35px;
	position: relative;
}

.why-container h5::before {
	background-color: #92caf8;
	background-image: url(lightbulb.473b4dfa2c.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 14px 14px;
	border-radius: 100%;
	content: '';
	left: -5px;
	height: 30px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
}

/***Facials Result Screen***/

.service-results-screen {
	flex-direction: column;
}

.service-results-screen article.results-hero {
	padding-bottom: 53px;
	padding-top: 60px;
}

.facial-res-svg {
	display: block;
	margin: 0 auto 15px;
}

.service-results-screen .results-hero .sparkle-1:first-of-type {
	left: 344px;
	top: 118px;
	width: 9px;
}

.service-results-screen .results-hero .sparkle-1:nth-of-type(2) {
	bottom: 83px;
	right: 293px;
	width: 9px;
}

.service-results-screen .results-hero .sparkle-3:nth-of-type(3) {
	bottom: 64px;
	left: 205px;
}

.service-results-screen .results-hero .sparkle-3:nth-of-type(4) {
	right: 329px;
	top: 56px;
}

.service-results-screen .tails-heading {
	font-size: 1rem;
	line-height: calc(25 / 16);
	margin-bottom: 60px;
	width: 100%;
}

.service-results-screen .tails-heading span::before {
	background: var(--white);
}

.facial-container {
	align-items: flex-start;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 80px;
	margin-bottom: 60px;
}

.facial-img-container {
	border-radius: 238px;
	overflow: hidden;
	width: calc(435 / 1196 * 100%);
}

.facial-img-container img {
	width: 100%;
}

.quiz-screen .facial-info {
	max-width: 578px;
	width: calc(681 / 1196 * 100%);
}

.facial-info h2 {
	margin-bottom: 20px;
}

.time-tag {
	display: inline-block;
	margin-bottom: 25px;
}

.time-tag::before {
	background-image: url(clock.aa38a8b42d.svg);
}

.facial-container .why-container {
	margin-bottom: 25px;
	margin-top: 25px;
}

.facial-container .why-container p {
	margin: 0;
}

.facial-container .black-btn {
	display: block;
	padding: 12px 0;
	width: 100%;
}

.add-ons {
	flex-wrap: nowrap;
	gap: 40px;
	list-style-type: none;
	padding: 0;
}

.add-ons > li {
	display: flex;
	flex-direction: column;
	padding: 0 60px 40px;
	position: relative;
	width: calc(50% - 20px);
}

.add-ons > li::before {
	background-color: var(--cream);
	bottom: 0;
	content: '';
	border-radius: 40px;
	height: calc(100% - 72px);
	left: 0;
	position: absolute;
	width: 100%;
	z-index: -1;
}

.add-on-img-container {
	border-radius: 20px;
	margin-bottom: 20px;
	overflow: hidden;
}

img.add-on-img,
.add-on-img img {
	aspect-ratio: 1024 / 819;
	object-fit: cover;
	width: 100%;
}

.add-ons .tags {
	display: flex;
	gap: 8px;
	list-style-type: none;
	margin-bottom: 10px;
	padding: 0;
}

.add-ons .tags li {
    background-color: var(--bright-yellow);
    border-radius: 10px;
    color: var(--black);
    font-size: calc(8rem / 16);
    font-weight: 700;
    letter-spacing: 1.6px;
    line-height: calc(10 / 8);
    padding: 4px 9px 4px 20px;
    position: relative;
    text-transform: uppercase;
}

.add-ons .tags li::before {
	background-color: transparent;
    background-image: url(star.1c34254b86.svg);
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    height: 6px;
    left: 7px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    z-index: 1;
}

.add-ons h2 {
	margin-bottom: 10px;
}

.add-ons p:first-of-type {
	margin-bottom: 40px;
}

.add-ons .eyebrow {
	margin-bottom: 15px;
	padding-left: 40px;
	position: relative;
}

.add-ons .eyebrow::before {
	background-color: rgba(64, 64, 64, .15);
	background-image: url(lightbulb.473b4dfa2c.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 13px 13px;
	border-radius: 100%;
	content: '';
	left: 0;
	height: 30px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
}

.add-ons .xx-small {
	margin-bottom: 30px;
}

.add-ons .black-btn {
	margin-top: auto;
	padding: 12px 0;
}

.facial-cta {
	align-items: center;
	background-color: var(--light-blue);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	margin: 0 20px 20px;
	overflow: hidden;
	padding: 106px 20px 80px;
	position: relative;
	width: calc(100% - 40px);
}

.facial-cta::before {
    background: url(watermark-blue.40a0ea85f4.svg);
    bottom: -123px;
    content: '';
    height: 400px;
    position: absolute;
    right: -123px;
    width: 400px;
}

.facial-cta h2 {
	margin-bottom: 34px;
	max-width: 990px;
	text-align: center;
}

.facial-cta .black-btn {
	max-width: 335px;
	padding: 14px 0;
	width: 100%;
}

/***************************************************************************************************************************************************************************************/

/*MQ MAX-HEIGHT 800 - Smaller Vertical Sizes*/

/***************************************************************************************************************************************************************************************/

@media only screen and (max-height: calc(800rem/16)) {
	.gate-products-img {
		display: none;
	}
}

/***************************************************************************************************************************************************************************************/

/*MQ MAX-WIDTH 1400 - Smaller Desktop Sizes*/

/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1400rem/16)) {
	.sticky-routine {
		margin-left: 0;
	}
}

/***************************************************************************************************************************************************************************************/

/*MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes*/

/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1200rem/16)) {
	.progress-meter .shelf-svgs {
		display: none;
	}

	.quiz-header .logo {
		padding: 14px var(--container-outer-padding) 10px;
	}

	.fitzpatrick-screen fieldset {
		gap: 24px;
		width: calc(577 / 1196 * 100%);
	}

	.fitzpatrick-screen label:first-of-type::before {
		left: 50%;
		top: -12px;
		transform: translateX(-50%);
	}
}

/***************************************************************************************************************************************************************************************/

/*MQ MAX-WIDTH 950 - Tablet Sizes*/

/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem/16)) {
	.mid-only {
		display: block !important;
	}

	.big-mid-only {
		display: none !important;
	}

	.sparkle,
	.quiz-form-container svg:nth-of-type(3) {
		display: none;
	}

	.quiz-screen,
	.loading-screen {
		height: auto;
	}

	.quiz-screen:not(.gate-screen, .service-results-screen) {
		padding-bottom: 140px;
	}

	.progress-meter {
		bottom: 0;
		position: fixed;
	}

	.progress-meter .container {
		padding-bottom: 30px;
		padding-top: 24px;
	}

	.progress-meter ul {
		margin: 0 auto;
		width: 302px;
	}

	.quiz-screen > .flex-container {
		flex-direction: column;
		justify-content: flex-start;
	}

	.quiz-screen article {
		align-items: center;
		display: flex;
		flex-direction: column;
		margin-bottom: 30px;
		margin-top: 60px;
		width: 100%;
	}

	.quiz-screen h2.heading-4 {
		text-align: center;
	}

	.black-btn.mid-only,
	.black-btn.big-only {
		margin-top: 30px;
	}

	.age-screen fieldset {
		grid-template: repeat(4, 1fr) / 1fr;
		width: 100%;
	}

	.age-screen label {
		height: 100px;
	}

	.pregnant-screen fieldset {
		grid-template: 1fr 1fr / 1fr;
		width: 100%;
	}

	.pregnant-screen label {
		height: auto;
		padding: 20px 10px;
	}

	.pregnant-screen label svg {
		margin-bottom: 20px;
	}

	.fitzpatrick-screen fieldset {
		align-items: center;
		display: flex;
		gap: 42px;
		flex-direction: column;
		width: 100%;
	}

	.fitzpatrick-screen fieldset .flex-container {
		max-width: 520px;
		width: 100%;
	}

	.fitzpatrick-screen label:first-of-type {
		align-items: center;
		display: flex;
		flex-direction: column;
		height: auto;
		margin: 0;
		max-width: 520px;
		padding: 17px 42px 15px;
		width: 100%;
	}

	.fitzpatrick-screen label p.x-small {
		margin: 4px 0 0;
		text-transform: none;
	}

	.face-svg {
		margin-bottom: 20px;
		max-width: 125px;
	}

	.face-sliders {
		max-width: 520px;
		width: 100%;
	}

	.reaction-screen fieldset,
	.concerns-screen fieldset,
	.products-screen fieldset {
		grid-template: repeat(5, 1fr) / repeat(2, 1fr);
		width: 100%;
	}

	.prescrip-screen fieldset {
		grid-template: repeat(4, 1fr) / repeat(2, 1fr);
		width: 100%;
	}

	.reaction-screen fieldset > div:last-of-type {
		grid-column: 2;
	}

	.prescrip-screen fieldset > div:last-of-type {
		grid-column: 1 / span 2;
	}

	.breakout-screen fieldset,
	.goals-screen fieldset {
		display: flex;
		flex-direction: column;
		max-width: 400px;
		width: 100%;
	}

	.breakout-screen fieldset {
		max-width: 520px;
	}

	.reaction-screen fieldset label {
		height: 60px;
	}

	.concerns-screen fieldset label {
		padding: 12px 10px;
	}

	.concerns-screen label::before {
		margin-bottom: 5px;
	}

	.prescrip-screen label {
		height: 60px;
	}

	.products-screen label {
		height: auto;
		padding: 12px 10px;
	}

	.concerns-screen label::before {
		margin-bottom: 5px;
	}

	.goals-screen label {
		height: auto;
		padding: 20px 10px;
	}

	.goals-screen label span {
		margin-bottom: 20px;
	}

	.gate-screen .products-img {
		display: none;
	}

	.quiz-form-container {
		margin-top: 36px;
		max-width: calc(100% - 40px);
		padding: 40px 20px;
	}

	.quiz-screen h2.heading-4 {
		margin-bottom: 20px;
	}

	.gate-screen.quiz-screen h2.heading-4 {
		margin-bottom: 6px;
	}

	.quiz-form-container input {
		margin-bottom: 20px;
	}

	/*Product Results*/

	.quiz-screen.prod-results-screen {
		padding-bottom: 0;
	}

	article.results-hero {
		border-radius: 0;
		padding: 30px 22px;
		margin: 0;
		width: 100%;
	}

	.results-hero h2 {
		font-size: calc(38rem / 16);
		letter-spacing: 0.1px;
		line-height: calc(45 / 38);
		margin-bottom: 15px;
	}

	.res-container {
		flex-direction: column-reverse;
	}

	.sticky-routine {
		align-items: center;
		display: flex;
		justify-content: center;
		margin-bottom: 80px;
		position: relative;
		top: unset;
		width: 100%;
	}

	.sticky-routine::before {
		background-color: rgba(64, 64, 64, .15);
		content: '';
		height: 1px;
		left: 0;
		position: absolute;
		top: -21px;
		width: 100%;
	}

	.sticky-routine h3:first-of-type,
	.prod-list {
		display: none;
	}

	.sticky-routine h3.eyebrow:nth-of-type(2) {
		margin: 0 45px 0 0;
	}

	.prod-results-screen .container {
		background: var(--cream);
	}

	.prod-results {
		padding: 40px 0 0;
		width: 100%;
	}

	.prod-results li > .flex-container {
		flex-direction: column;
		gap: 30px;
	}

	.prod-img,
	.prod-info {
		width: 100%;
	}

	.prod-img-container {
		margin: 0 auto 18px;
		width: fit-content;
	}

	.product-image {
		max-width: 338px;
	}

	.prod-tags.mid-only {
		display: flex !important;
		justify-content: center;
		margin-bottom: 20px;
	}

	.prod-img h3 {
		font-size: calc(26rem / 16);
		letter-spacing: 0.4px;
		line-height: calc(36 / 26);
		margin-bottom: 15px;
		text-align: center;
	}

	.prod-img p {
		margin-bottom: 15px;
		text-align: center;
	}

	.price-size {
		margin-bottom: 20px;
	}

	.instr-container {
		flex-direction: column;
		gap: 0;
	}

	.use-container,
	.when-container {
		width: 100%;
	}

	.instr-container h5 {
		text-align: center;
	}

	.instr-container p {
		text-align: center;
	}

	.use-container {
		margin-bottom: 20px;
	}

	.when-container {
		margin-bottom: 30px;
	}

	.when-container .flex-container {
		justify-content: center;
	}

	.why-container {
		margin: 0;
		padding: 25px 20px 20px;
	}

	.instr-container .why-container h5 {
		margin: 0 auto 15px;
		padding: 0;
		width: fit-content;
	}

	/*Facial Results*/

	.service-results-screen article.results-hero {
		margin-bottom: 33px;
		padding: 30px 22px;
	}

	.facial-res-svg {
		display: none;
	}

	.results-hero p {
		font-size: 1rem;
		line-height: calc(26 / 16);
	}

	.service-results-screen .tails-heading {
		margin-bottom: 30px;
	}

	.facial-container {
		flex-direction: column;
		gap: 26px;
	}

	.facial-img-container {
		margin: 0 auto;
		max-width: 435px;
		width: 100%;
	}

	.quiz-screen .facial-info {
		margin: 0;
		width: 100%;
	}

	.facial-info h2 {
		margin-bottom: 24px;
	}

	.time-tag {
		margin-bottom: 20px;
	}

	.facial-info p {
		margin-bottom: 20px;
		text-align: center;
	}

	.facial-info .why-container h5 {
		margin: 0 auto 10px;
		padding: 0;
		text-align: center;
		width: fit-content;
	}

	.why-container h5::before {
		left: -40px;
	}

	.facial-container .why-container p {
		text-align: center;
	}

	.add-ons {
		flex-direction: column;
	}

	.add-ons > li {
		width: 100%;
	}

}

/***************************************************************************************************************************************************************************************/

/*MQ MAX-WIDTH 650 - Mobile Sizes*/

/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {
	.quiz-header.flex-container {
		flex-wrap: nowrap;
		height: 60px;
		padding: 9px 20px 10px;
	}

	.quiz-header .logo {
		left: 50%;
		padding: 0;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.back-quiz,
	.exit-btn {
		font-size: calc(11rem / 16);
		letter-spacing: 2px;
		line-height: calc(20 / 11);
	}

	.mobile-click + .mid-only.black-btn {
		display: none !important;
	}

	.progress-meter .container {
		padding-bottom: 17px;
		padding-top: 18px;
	}

	.progress-meter ul {
		width: 280px;
	}

	.loading-screen h2 {
		text-align: center;
	}

	.tails-heading::before {
		content: none;
	}

	.begin-quiz .img-hero {
		margin-bottom: 30px;
		padding-top: 80px;
	}

	.begin-quiz h1 {
		margin-bottom: 86px;
	}

	.reaction-screen fieldset,
	.concerns-screen fieldset,
	.prescrip-screen fieldset,
	.products-screen fieldset {
	    display: flex;
	    flex-direction: column;
	    max-width: 400px;
	    width: 100%;
	}

	.reaction-screen .black-btn,
	.concerns-screen .black-btn,
	.prescrip-screen .black-btn,
	.products-screen .black-btn {
		max-width: 400px;
	}

	.quiz-form-container form {
		flex-direction: column;
	}

	.quiz-form-container input:first-of-type,
	.quiz-form-container input:nth-of-type(2) {
		width: 100%;
	}

	.gate-products-img {
		display: none;
	}

	.sticky-routine {
		margin-bottom: 20px;
	}

	.facial-img-container {
		width: calc(210 / 335 * 100%);
	}

	.add-ons {
		margin-bottom: 20px;
	}

	.add-ons > li {
		padding: 0 0 40px;
	}

	.add-ons > li::before {
		border-radius: 0;
		height: calc(100% - 73px);
		left: -20px;
		width: calc(100% + 40px);
	}

	.add-ons .tags {
		justify-content: center;
	}

	.add-ons h2,
	.add-ons p {
		text-align: center;
	}

	.add-ons p:first-of-type {
		font-size: 1rem;
		line-height: calc(26 / 16);
		margin-bottom: 36px;
	}

	.add-ons .eyebrow {
		margin: 0 auto 15px;
		padding: 0;
		width: fit-content;
	}

	.add-ons .eyebrow::before {
		left: -40px;
	}

	.add-ons .xx-small {
		margin-bottom: 20px;
	}

	.facial-cta {
		border-radius: 0;
		margin: 0;
		padding: 60px 20px 40px;
		width: 100%;
	}

	.facial-cta::before {
		bottom: -63px;
		height: 280px;
		right: -44px;
		width: 280px;
	}
}

/***************************************************************************************************************************************************************************************/

/*ACCESSIBILITY REDUCE MOTIONS*/

/***************************************************************************************************************************************************************************************/

@media (prefers-reduced-motion: no-preference) {
	.sparkle-1,
	.sparkle:not(.sparkle-1) path {
		animation: 1s infinite alternate shimmer;
		animation-timing-function: linear;
		position: absolute;
	}

	.sparkle-2 path:nth-of-type(2) {
		animation-delay: .2s;
	}

	.sparkle-2-alt path:nth-of-type(2) {
		animation-delay: .4s;
	}

	.sparkle-3 path:nth-of-type(2) {
		animation-delay: 2s;
	}

	.sparkle-3 path:nth-of-type(3) {
		animation-delay: 6s;
	}

	@keyframes shimmer {
		from {
			opacity: 1;
			transform: scale(1.0);
		}

		to {
			opacity: .5;
			transform: scale(.98);
		}
	}
}