:root {
    --reeses-orange: #E9521D;
    --reeses-cream: #FCBA7B;
    --reeses-brown: #592E2C;
    --reeses-yellow: #FCDC00;
    --white: #FFFFFF;
}

@font-face {
    font-family: "riffle-sans";
    src: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/RiffleSans-Regular.otf");
    font-weight: 400;
}

@font-face {
    font-family: "riffle-sans";
    src: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/RiffleSans-Bold.otf");
    font-weight: 600;
}

@font-face {
    font-family: "riffle-sans";
    src: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/RiffleSans-Headline.otf");
    font-weight: 800;
}

body {
    background-color: var(--reeses-orange);
    padding: 0;
    margin: 0;
    font-family: riffle-sans, sans-serif;
    font-weight: bold;
    overflow-x: hidden;
    box-sizing: border-box;
    /* max-width: 1200px; */
    margin: 0 auto;

}

h1 {
    font-size: 11vw;
    line-height: 8vw;
}

h2 {
    font-size: 5vw;
    line-height: 1;
}

h3 {
    font-size: 4vw;
    line-height: 4vw;
}

h4 {
    font-size: 5vw;
    line-height: 1;
}

h5 {
    font-size: 4vw;
    line-height: 1;
}



header {
    background-color: var(--reeses-orange);
}

.yellow-text {
    color: var(--reeses-yellow);
}

.container {
    width: 100%;
}

.header-image {
    width: 100%;
    position: relative;
}

.header-image span {
    /* padding-bottom: 42%; */
    padding-bottom: 41.6%;

    display: block;
    background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/navbar-header_MOBILE.png") no-repeat center;
    background-size: cover;
    /* new */
    position: relative;
    z-index: 2;
}

.uk-enter-section>div {
    padding-left: 5%;
    padding-right: 30%;
}

.uk-enter-section>h3 {
    color: white;
    text-align: center;
    margin-bottom: 5vw;
}

.uk-enter-section>div>h1 {
    color: var(--reeses-yellow);
    margin: 0;
}

.uk-enter-section>div>h1>span {
    font-size: 9.6vw;
}

.uk-enter-section>div>h2 {
    color: white;
    margin: 1vw 0 1vw 0;
}

.uploading-files li {
    border: 2px solid var(--reeses-brown) !important;
    width: calc(100% - .5rem) !important;
}

.uk-enter-button {
    margin-bottom: 4vw;
    width: fit-content;
}

.uk-enter-button button {
    border: solid 0.75vw var(--reeses-brown);
    background-color: var(--reeses-yellow);
    display: flex;
    align-items: center;
    border-radius: 9vw;
    font-size: 6vw;
    font-weight: 700;
    padding-block: 0vw;
    padding-inline: 3vw;
    box-shadow: 0 1vw 1vw rgba(0, 0, 0, 0.25);
    color: var(--reeses-brown);
    font-family: riffle-sans, sans-serif;

}

.uk-enter-button button span {
    display: flex;
    margin-right: 1vw;
}

.uk-enter-button button span img {
    width: 6vw;
    height: 6vw;
}

.uk-enter-section>.palm-tree-bunnies {
    width: 38vw;
    position: absolute;
    right: -30vw;
    top: 51vw;
    z-index: 1;
}

.uk-enter-section>.palm-tree-bunnies>span {
    display: block;
    padding-bottom: 167%;
    background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/palm-tree-bunnies_MOBILE.png") no-repeat center;
    background-size: contain;
}

.page-heading>.palm-tree-bunnies-orange {
    width: 39vw;
    position: absolute;
    right: 0;
    top: 30vw;
    z-index: 1;
}

.page-heading>.palm-tree-bunnies-orange>span {
    display: block;
    padding-bottom: 167%;
    background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/palm-tree-bunnies-orange_MOBILE.png") no-repeat center;
    background-size: contain;
}

.golden-egg {
    width: 25vw;
    position: absolute;
    right: 0;
    top: 45vw;
    z-index: 1;
    pointer-events: none;
}

.golden-egg>span {
    display: block;
    padding-bottom: 184%;
    background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/golden-egg_MOBILE.png") no-repeat center;
    background-size: contain;
}


.roi-enter-section {
    background-color: var(--reeses-brown);
    padding: 19vw 0;

    clip-path: polygon(0 0, 100% 11vw, 100% 100%, 0 100%);
}

.roi-enter-section div {}

.roi-enter-section div>h1 {
    color: var(--reeses-cream);
    font-size: 10vw;
    margin: 0;
}

.roi-enter-section div>h1>span {
    font-size: 7.6vw;
}


.roi-enter-button {
    width: fit-content;
}

.roi-enter-button a {
    text-decoration: none;
    cursor: pointer;
}

.uk-enter-button a {
    text-decoration: none;
    cursor: pointer;
}

.roi-enter-button button {
    border: solid 0.75vw var(--reeses-yellow);
    background-color: var(--reeses-orange);
    display: flex;
    align-items: center;
    border-radius: 9vw;
    font-size: 5.5vw;
    font-weight: 700;
    padding-block: 0vw;
    padding-inline: 5vw;
    box-shadow: 0 1vw 1vw rgba(0, 0, 0, 0.25);
    color: white;
    font-family: riffle-sans, sans-serif;
    margin-top: 2vw;
    cursor: pointer;
}

.roi-enter-button button span img {
    width: 6vw;
    height: 6vw;
}

.roi-enter-button button span {
    display: flex;
    margin-right: 1vw;
}

.roi-enter-text-container {
    padding-left: 37%;
    padding-right: 5%;
}


.reeses-egg {
    width: 32vw;
    position: absolute;
    top: 109vw;
    left: 3vw;
}

.reeses-egg span {
    padding-bottom: 100%;
    display: block;
    background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/reeses-egg_MOBILE.png") no-repeat center;
    background-size: contain;
}

.packshots-section {
    height: 57vw;
    position: relative;
    z-index: 2;
    pointer-events: none !important;
}

.reeses-easter-eggs {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;
}

.reeses-easter-eggs span {
    padding-bottom: 84%;
    display: block;
    background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/pack-shots-section_MOBILE.png") no-repeat center;
    background-size: contain;
}

.wrapped-egg {
    width: 22vw;
    position: absolute;
    left: 2vw;
    bottom: 62vw;
}

.wrapped-egg span {
    padding-bottom: 130%;
    display: block;
    background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/wrapped-egg_MOBILE.png") no-repeat center;
    background-size: contain;
}

.button-container button {
    background-color: var(--reeses-brown);
    border: none;
    border-radius: 10vw;
    font-size: 4.5vw;
    font-weight: 800;
    padding-block: 2vw;
    padding-inline: 3vw;
    box-shadow: 0 1vw 1vw rgba(0, 0, 0, 0.25);
    color: white;
    text-align: center;
    margin-top: 5vw;
    font-family: riffle-sans, sans-serif;
}

.button-container a {
    text-decoration: none;
    cursor: pointer !important;
}

button {
    cursor: pointer !important;
    z-index: 10000 !important;
}

.button-container p {
    background-color: var(--reeses-brown);
    border: none;
    border-radius: 10vw;
    font-size: min(27px, 4.5vw);
    font-weight: 800;
    padding-block: min(12px, 2vw);
    padding-inline: min(20px, 3.2vw);
    /* box-shadow: 0 1vw 1vw rgba(0, 0, 0, 0.25); */
    color: white;
    text-align: center;
    margin-top: min(30px, 5vw);
    font-family: riffle-sans
}

.learn-more-section {
    display: flex;
    justify-content: center;
}

footer {
    padding-block: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    background: var(--reeses-orange);
    padding: 0 0 16px;
}

footer .footer-top-text {
    max-width: unset !important;
}

/* footer .button-container {
    margin-bottom: 6vw;
} */

footer h4 {
    color: var(--reeses-brown);
    margin-top: 0;
    margin-bottom: 4vw;

}

footer>div>div {
    display: flex;
    justify-content: center;

    gap: min(25px, 6vw);
}

footer a>img {
    height: 8vw;
    width: 8vw;
    max-height: 48px;
    max-width: 48px;
}

.page-content {
    background-color: var(--reeses-orange);
    padding: 19vw 0;
    clip-path: polygon(0 0, 150% 11vw, 100% 100%, 0 100%);
    margin-top: -13vw;
}

.hidden-desktop {
    display: block;
}

.hidden-mobile {
    display: none;
}

.page-heading {
    background-color: var(--reeses-brown);
    margin-top: -25.1vw;
    padding-bottom: 18vw;
    padding-inline: 6vw;
    padding-top: 25vw;
}

.page-heading h1 {
    margin-block: 1vw;
    color: var(--reeses-yellow);
    line-height: 9vw;
}

.page-heading h1>span {
    font-size: 9.7vw;
}

.page-heading h2 {
    margin: 0;
    color: var(--reeses-orange);
    font-size: 4.5vw;
}

.page-heading h5 {
    color: var(--reeses-orange);
    margin: 0;
}

.golden-egg-icon {
    width: 21vw;
}

.golden-egg-icon span {
    padding-bottom: 100%;
    display: block;
    background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/golden-egg-icon_MOBILE.png") no-repeat center;
    background-size: contain;
}

.doors-info {
    display: flex;
    align-items: center;
}

.doors-info h4 {
    color: white;
    font-weight: 600;
    font-size: 5vw;
    width: fit-content;
}

.page-content-container {
    padding-inline: 4vw;
}

.doors-container {
    display: flex;
    justify-content: center;
    gap: 4vw;
}

.door {
    width: 26vw;
}

.door-1 span {
    padding-bottom: 100%;
    display: block;
    background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/door-1_MOBILE.png") no-repeat center;
    background-size: contain;
}

.door-2 span {
    padding-bottom: 100%;
    display: block;
    background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/door-2_MOBILE.png") no-repeat center;
    background-size: contain;
}

.door-3 span {
    padding-bottom: 100%;
    display: block;
    background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/door-3_MOBILE.png") no-repeat center;
    background-size: contain;
}

.palm-tree-orange {
    width: 27vw;
    position: absolute;
    right: 0;
    top: 76vw;
}

.palm-tree-orange span {
    padding-bottom: 155%;
    display: block;
    background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/palm-tree-orange.svg") no-repeat center;
    background-size: contain;
}

app-page-block-form .mat-raised-button {
    border: solid 2px var(--white) !important;
}

.packshots-confetti {
    width: 89vw;
    position: relative;
}

.packshots-confetti span {
    padding-bottom: 69%;
    display: block;
    background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/pack-shots-confetti_MOBILE.png") no-repeat center;
    background-size: contain;
}

app-page-block {
    overflow-y: unset !important;
}

/* 
app-page-block mat-card {
    margin-bottom: -3vw !important;
    background: transparent !important;
} */
nav {
    z-index: 3 !important;
}

app-page-block .navButton b i {
    background: var(--reeses-yellow) !important;
}

app-page-block nav.open {
    z-index: 2000 !important;
    background: var(--reeses-brown) !important;
    width: 75vw !important;
    position: fixed !important;
    max-width: 450px !important;
}

app-page-block nav {
    max-width: 75vw !important;

}

app-page-block nav a {

    font-size: min(36px, 6vw) !important;
    padding: min(18px, 3vw) !important;

}

app-page-block nav a mat-icon {
    height: 7vw !important;
    width: 7vw !important;
    top: 0 !important;
}

app-page-block nav a .material-icons {
    font-size: min(48px, 8vw) !important;
}

app-page-block nav .links {
    border: none !important;
}

app-page-block nav .links a {
    border: none !important;
}

app-page-block nav {
    box-shadow: -1vw 0 2vw rgba(0, 0, 0, 0.4);
}

app-page-block .navButton b {
    /* width: 8vw !important;
    height: 4.8vw !important; */
    width: min(48px, 8vw) !important;
    height: min(28.8px, 4.8vw) !important;
}

app-page-block .navButton b i {
    height: min(5.4px, 0.9vw) !important;
}

app-page-block .navButton b i:nth-child(2) {
    top: min(12px, 2vw) !important;
}

app-page-block .navButton b i:nth-child(3) {
    top: min(12px, 2vw) !important;
}

/* app-page-block .controls {
    right: 2vw !important;
    top: 3vw !important;
    width: 9vw !important;
    height: 9vw !important;
    cursor: pointer !important;
} */
app-page-block .controls {
    top: min(18px, 3vw) !important;
    right: min(12px, 2vw) !important;
    width: min(54px, 9vw) !important;
    height: min(54px, 9vw) !important;
}

.best-before-date-img {
    width: 100%;
    height: 100%;
}

.best-before-date-img i {
    background: url("https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/bestBeforeImage.jpg") center no-repeat;
    width: 100%;
    background-size: contain;
    display: block;
    padding-bottom: 51%;

}

.main-nav {
    /* max-width: 600px; */
    height: auto;
    position: absolute;
    width: 100%;
    z-index: 10;
}

app-page-block .controls p {
    margin: unset !important;
}


app-page-block .mat-card {
    box-shadow: none !important;
}

.enter-here-form-text {
    color: var(--reeses-yellow);
}

.bg-orange {
    background-color: var(--reeses-orange);
}

mat-dialog-container {
    background-color: var(--reeses-orange) !important;
}

.mat-dialog-container {}

.mat-form-field-appearance-outline.mat-focused.mat-warn .mat-form-field-outline-thick,
.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
    color: var(--reeses-brown) !important;
}

.mat-form-field.mat-form-field-invalid .mat-form-field-label,
.mat-form-field.mat-form-field-invalid .mat-form-field-label.mat-accent,
.mat-form-field.mat-form-field-invalid .mat-form-field-label .mat-form-field-required-marker {
    color: var(--reeses-brown) !important;
}

.mat-error {
    color: var(--reeses-brown) !important;
}

.invalid {
    border-top: 2px solid var(--reeses-brown) !important;
    border-bottom: 2px solid var(--reeses-brown) !important;
}

.mat-flat-button.mat-primary,
.mat-raised-button.mat-primary,
.mat-fab.mat-primary,
.mat-mini-fab.mat-primary {
    background-color: var(--reeses-brown) !important;
}

.mat-raised-button {
    padding: 0px 43px !important;
    border-radius: 23px !important;
    font-weight: 800 !important;
    font-size: 1.5em !important;
    min-width: 215px !important;
    line-height: 45px !important;
    font-family: riffle-sans, sans-serif !important;
}

.mat-flat-button.mat-accent,
.mat-raised-button.mat-accent,
.mat-fab.mat-accent,
.mat-mini-fab.mat-accent {
    background: linear-gradient(to right, #C87B33 0%, #FADC6F 17%, #FFFEF9 33%, #FADC6F 49%, #C87B33 72%) !important;
}

.form-container .form-submit {
    color: #592E2C !important;
}


.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
    background-color: white !important;
}

.mat-dialog-actions {
    justify-content: center !important;
}


form .question-content {
    max-width: unset;
}



.mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: white !important;
    font-weight: 800;
    border-radius: unset !important;
    /* transition: border .3s ease; */
}

.mat-form-field-appearance-fill.mat-form-field-invalid .mat-form-field-flex {
    border: 2px solid #8f0b0b;

}

.mat-form-field-underline {
    display: none !important;
}

.mat-checkbox-layout {
    align-items: start !important;
}

.mat-checkbox-inner-container {
    margin: unset !important;
    margin-top: 0px !important;
    margin-right: 10px !important;
    /* width: 23px !important;
    height: 23px !important; */
    width: 30px !important;
    height: 30px !important;
    background: white;
    border-radius: 4px;
}

.mat-checkbox-layout .mat-checkbox-label {
    line-height: unset;
    font-weight: 400;
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: transparent !important;
}

.mat-checkbox-checkmark-path {}

.invalid {
    border: none !important;
}

.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,
.mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element {}

/* makes bg transparent on form */

.mat-card {
    background: transparent !important;
    box-shadow: none !important;
}


mat-checkbox {
    margin: unset !important;
}

app-page-block-form-question-checkbox section {
    padding: 0 !important;
}




/* // mat-icon-stepper selected color change  */
.mat-step-header .mat-step-icon-selected,
.mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {}

/* //input outline color */
.mat-form-field-appearance-outline .mat-form-field-outline {
    color: var(--reeses-orange) !important;
    background: #fff !important;
    border-radius: 5px !important;
    /* // opacity: 1!important; */
}

/* 
//mat-input focused color */
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: var(--reeses-orange) !important;
}



/* // mat-input error outline color */
.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
    color: #8f0b0b !important;
    opacity: 0.8 !important;
}

/* // mat-input carent color */
.mat-input-element,
.mat-form-field .mat-select-value {
    caret-color: var(--reeses-brown) !important;
    color: var(--reeses-brown) !important;
    font-family: riffle-sans, sans-serif !important;
    letter-spacing: 0;
}

/* // mat-input error carent color */
.mat-form-field-invalid .mat-input-element,
.mat-warn .mat-input-element {
    caret-color: var(--reeses-orange) !important;
}

/* // mat-label normal state style */
.mat-form-field-label {
    color: var(--reeses-orange) !important;
    font-family: riffle-sans, sans-serif !important;
    letter-spacing: 0;
    font-size: 18px;
}

/* // mat-label focused style */
.mat-form-field.mat-focused .mat-form-field-label {
    color: var(--reeses-brown) !important;
    font-family: riffle-sans, sans-serif !important;
    letter-spacing: 0;
}

/* // mat-label error style */
.mat-form-field.mat-form-field-invalid .mat-form-field-label {
    color: var(--reeses-brown) !important;
    font-family: riffle-sans, sans-serif !important;
    letter-spacing: 0;
}

/* 
.footer-short-terms {
    color: white;
    margin-inline: 1em;
    font-size: 3.5vw;
} */




/* checkkbox border */
.page .mat-checkbox-frame,
app-preview-entrant .mat-checkbox-frame {
    border-color: var(--reeses-orange);
}

/* astrisk color */
.mat-form-field-required-marker {
    color: var(--reeses-orange);
}

.mat-form-field.mat-focused .mat-form-field-required-marker {
    color: var(--reeses-brown);
}


/* checkbox */
mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element {
    opacity: 0.03 !important;
    background-color: transparent !important;
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: transparent !important
}

/* checkbox tick */
.mat-checkbox-checkmark-path {}

.best-before-date-modal h1 {
    line-height: 1em;
    font-size: 2.5em !important;
}

.codeBoxContainer {
    display: flex;
    justify-content: center;
}

.best-before-date-modal .example-image {
    width: 100%;
    max-width: 30em;
}

.best-before-date-modal .example-image i {
    padding-bottom: 158%;
    display: block;
    background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/best-before-example.jpg") no-repeat center;
    background-size: contain;
}

.mat-form-field-subscript-wrapper {
    margin-top: 1.8em;
}

.mat-form-field-appearance-fill .mat-form-field-subscript-wrapper {
    /* padding: 0 1em; */
    padding: 0 0 !important;
}


app-page-block .mat-form-field-wrapper {
    padding-bottom: 0.1em;
}

.too-soon-too-late {
    text-align: center;
    /* new */
    text-align: center;
    font-weight: 800;
    /* font-size: 4.1vw; */
    line-height: 1.1;
    color: var(--white);
    font-size: min(24px, 4.1vw);

}

.terms-container,
.prize-container {
    padding: 0 16px;
    color: var(--white);
    font-weight: 400;
}

.terms-container {
    margin: 1rem;
}

.terms-container a {
    text-decoration: underline;
}

.terms-container h1 {
    font-size: revert;
    line-height: normal;
}



.too-soon-too-late-padding {
    padding: min(36px, 6vw) min(10px, 2vw);
}

.mat-expansion-panel {
    background: var(--reeses-brown) !important;
    color: white !important;
}

.mat-expansion-panel-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 24px;
    border-radius: inherit;
    transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
}

.shortTerms {
    color: white;
    font-size: 12px !important;
    padding: 1rem;
    margin: 1rem;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* faqs */
/* app-widget-faqs>div {
    margin-inline: 4vw;
}
.mat-expansion-panel-header {
    height: 13vw !important;
}
.mat-expansion-panel-header {
    padding: 0px 5vw !important;
}
.mat-expansion-panel {
    border-radius: 5vw !important;
} */

/* Desktop */
@media only screen and (min-width: 600px) {

    /* .too-soon-too-late {
        font-size: min(24px, 2vw);
        margin-top: min(36px, -3vw);
    } */

    .hidden-desktop {
        display: none;
    }

    .hidden-mobile {
        display: block;
    }

    /* h1 {
        font-size: 5vw;
        line-height: 3.2vw;
    } */

    h2 {
        font-size: 2.45vw;
        line-height: 1;
    }

    h3 {
        font-size: 2vw;
        line-height: 1;
    }

    .header-image {
        width: 100%;
    }

    .header-image span {
        padding-bottom: 16.6%;
        display: block;
        background: url("https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/headerDesk.png") no-repeat center;

        background-size: cover;
    }

    .reeses-easter-eggs span {
        padding-bottom: 35%;
        background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/pack-shots-section_DESKTOP.png") no-repeat center;
        background-size: contain;
    }

    .container {
        display: flex;
        flex-direction: column;
    }

    .uk-enter-button button {
        border: solid 0.3vw var(--reeses-brown);
        background-color: var(--reeses-yellow);
        display: flex;
        align-items: center;
        border-radius: 10vw;
        font-size: 1.75vw;
        font-weight: 700;
        padding-block: 0vw;
        padding-inline: 0.75vw;
        box-shadow: 0 0.5vw 0.5vw rgba(0, 0, 0, 0.25);
        color: var(--reeses-brown);
        font-family: riffle-sans, sans-serif;
        cursor: pointer;
    }

    .uk-enter-button button span img {
        width: 2vw;
        height: 2vw;
    }

    .uk-enter-button button span {
        margin-right: 0.5vw;
    }

    .roi-enter-button button {
        border: solid 0.3vw var(--reeses-yellow);
        background-color: var(--reeses-orange);
        display: flex;
        align-items: center;
        border-radius: 10vw;
        font-size: 2vw;
        font-weight: 700;
        padding-block: 0;
        padding-inline: 1vw;
        box-shadow: 0 0.5vw 0.5vw rgba(0, 0, 0, 0.25);
        color: white;
        font-family: riffle-sans, sans-serif;
        margin-top: 0.5vw;
    }

    .roi-enter-button button span img {
        width: 2vw;
        height: 2vw;
    }

    .desktop-enter-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -5vw;
        margin-bottom: 29vw;
        padding-top: 10vw;
        padding-bottom: 11vw;
        background: linear-gradient(108deg, rgba(233, 82, 29, 1) 55%, rgba(89, 46, 44, 1) 45%);
    }

    .desktop-enter-section>h3 {
        text-align: center;
        color: var(--reeses-brown);
        position: absolute;
        top: 12vw;
        font-size: 1.5vw;
    }

    .desktop-enter-section>div {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 28vw;
        width: fit-content;
    }

    .roi-enter-desktop {
        height: 100%;
    }

    .uk-enter-desktop>h1 {
        color: var(--reeses-yellow);
        margin: 0;
    }

    .uk-enter-desktop>h1>span {
        font-size: 4.4vw;
        line-height: 5vw;
    }

    .uk-enter-desktop>h2 {
        color: white;
        margin: 0;
    }

    .roi-enter-desktop {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }

    .roi-enter-desktop>h1 {
        color: var(--reeses-cream);
        margin: 0;
        line-height: 3.7vw;
    }

    .roi-enter-desktop>h1>span {
        font-size: 3.8vw;
    }

    .palm-tree-desktop {
        width: 36vw;
        position: absolute;
        top: 20.7vw;
        left: 33vw;
        pointer-events: none;
    }

    .best-before-date-modal .example-image {
        width: 100%;
        max-width: 18em;
    }

    .palm-tree-desktop span {
        padding-bottom: 100%;
        display: block;
        background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/palm-tree.svg") no-repeat center;
        background-size: contain;
    }

    .chocolate-bunnies-desktop {
        width: 11vw;
        position: absolute;
        top: 25vw;
        right: 13vw;
    }

    .chocolate-bunnies-desktop span {
        padding-bottom: 100%;
        display: block;
        background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/chocolate-bunnies_DESKTOP.png") no-repeat center;
        background-size: contain;
    }

    .chocolate-egg-desktop {
        width: 16vw;
        position: absolute;
        top: 34vw;
        right: 4vw;
        z-index: 200;
    }

    /* 
    .footer-short-terms {
        font-size: 1vw;
    } */

    .chocolate-egg-desktop span {
        padding-bottom: 100%;
        display: block;
        background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/chocolate-eggs_DESKTOP.png") no-repeat center;
        background-size: contain;
    }

    .uk-enter-button {
        margin-top: 0.5vw;
        margin-bottom: 0;
    }

    .roi-enter-button button span {
        margin-right: 0.5vw;
    }

    /* footer h4 {
        font-size: 2.5vw;
        margin-bottom: 2vw;
    } */

    /* 
    footer div {
        gap: 1vw;
    } */

    /* footer a>img {
        height: 3vw;
        width: 3vw;
    } */

    /* .button-container button {
        font-size: 1.75vw;
        padding-block: 1vw;
        padding-inline: 4vw;
        margin-top: 1vw;
    }

    .button-container p {
        font-size: 1.75vw;
        padding-block: 1vw;
        padding-inline: 4vw;
        margin-top: 1vw;
    }

    footer .button-container {
        margin-bottom: 2vw;
    } */

    .packshots-section {
        height: unset;
    }

    .wrapped-egg {
        width: 15vw;
        bottom: 23vw;
    }

    .page-heading h1 {
        font-size: 5vw;
        line-height: 4vw;
        margin-top: 1vw;
        margin-bottom: 0.5vw;
    }

    .page-heading h1>span {
        font-size: 4.5vw;
    }

    .page-heading>h5 {
        font-size: 2vw;
        line-height: 1vw;
    }

    .page-heading>h2 {
        font-size: 2.5vw;
    }

    .page-heading {
        padding-top: 29vw;
        padding-inline: 11vw;
    }

    .page-content {
        clip-path: polygon(0 0, 150% 6vw, 100% 100%, 0 100%);
    }

    .page-heading>.palm-tree-bunnies-orange {
        width: 37vw;
        position: absolute;
        right: 6vw;
        top: 18vw;
        z-index: 1;
    }

    .page-heading>.palm-tree-bunnies-orange>span {
        display: block;
        padding-bottom: 104%;
        background: url("https://cdn.promo-now.com/site-files/693847e90fe8e0cbf4109444/palm-tree-bunnies-orange_DESKTOP.png") no-repeat center;
        background-size: contain;
    }



    .enter-here-form-text {
        font-size: 3vw !important;
    }
}

mat-form-field {
    color: var(--reeses-brown) !important;
}

.prizes-heading {
    background-color: var(--reeses-orange);
}

.prizes-heading h1 {
    text-align: center;
    color: var(--white);
    line-height: min(55px, 9.25vw);
    font-size: min(58px, 9.75vw);
}

.page-content {
    clip-path: unset;
    margin-top: -19vw;
    font-weight: 400;
    color: white;
}

.page-content-container {
    padding-inline: 11vw;
    font-size: 3.5vw;
}

ol {
    padding-inline-start: 0;
}

ul {
    padding-inline-start: 8vw;
}

@media only screen and (min-width: 700px) {
    .page-content-container {
        font-size: 1vw;
    }

    .page-content {
        padding-inline: 19vw;
        padding-bottom: 36vw;
        padding-top: unset;
        margin-top: unset;
    }

    ul {
        padding-inline-start: 3vw;
    }
}

.header-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: clip;
    height: 20.6vw;
    max-height: 123px;

}

.header-container.header-container-spinner {
    height: 67.6vw;
    max-height: unset;
    max-height: 405px;
}

.brown-bg {
    background: var(--reeses-brown);
}

.orange-bg {
    background: var(--reeses-orange);
}

.orange-bg h1 {
    margin: 0;
    position: relative;
    z-index: 1;
    background: var(--reeses-orange);
    color: #fff;
    text-align: center;
    padding: 0.65em 0;
    font-size: min(55px, 9.2vw);
    line-height: min(48px, 8vw);

}

.orange-bottom-cut {
    width: 100%;
    height: 100%;
    background: var(--reeses-brown);
    overflow-x: clip;
}


.orange-bottom-cut i {
    display: block;
    width: 100%;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/oragngeCutCropped.svg) center no-repeat;
    padding-bottom: 29.5%;
    background-size: cover;
    position: relative;
    z-index: 2;
    transform: scale(1.02);
    transform-origin: center;
}

.starburst {
    width: 131%;
    top: max(-181px, -30.3vw);
    position: absolute;
    left: 50%;
    rotate: -4.7deg;
    transform: translate(-50%, 0px);
    z-index: 1;
    max-width: 786px;
}

.starburst i {
    display: block;
    width: 100%;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/starburst.png) center no-repeat;
    padding-bottom: 98.4%;
    background-size: contain;
    animation: spin-starburst 300s linear infinite;
}

@keyframes spin-starburst {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.discoBall {
    width: 91.8%;
    height: 100%;
    position: absolute;
    top: max(-108px, -18vw);
    z-index: 1;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%, 0px);
}

.discoBall i {
    display: block;
    width: 100%;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/clickToSpin.png) center no-repeat;
    padding-bottom: 98.3%;
    background-size: cover;
}

.discoW i {
    display: block;
    width: 100%;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/winner.svg) center no-repeat;
    padding-bottom: 98.3%;
    background-size: contain;
}

.discoL i {
    display: block;
    width: 100%;
    background: url(imgs/sorry.png) center no-repeat;
    padding-bottom: 98.3%;
    background-size: contain;
}

.discoBallHoliday {

    top: max(-156px, -26vw);
}

.discoBallHoliday i {
    display: block;
    width: 100%;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/winHoliday.png) center no-repeat;
    padding-bottom: 130.3%;
    background-size: contain;
}

.chanceTo {

    position: absolute;


        width: 340.8%;
    height: 100%;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%, 0.3vw);
    z-index: 1;
    z-index: 5;
}

.chanceTo i {
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/chanceTo.png) no-repeat center;
    padding-bottom: 100%;
    padding-bottom: 27%;
    width: 100%;
    display: block;
    background-size: contain !important;
}

.winHolidayText {
    display: none;
    position: absolute;
    width: 68.7%;
    height: 100%;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%, 7vw);
    z-index: 1;

}

.winHolidayText>i {
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/winHolidayText.png) center no-repeat !important;
    width: 100%;
    display: block;
    padding-bottom: 124%;
    background-size: contain !important;
}

.header-product-right {
    height: 100%;
    position: absolute;
    right: 3%;
    top: max(-66px, -11vw);
    z-index: 3;
    width: 35%;
    max-width: 210px;

}

.success-text-container {
    padding: 0px min(96px, 15.9vw);
}

.header-text-left {
    width: 100%;
    text-align: center;
}

.header-text-left-m {
    width: 68%;
    padding-left: 5%;
    text-align: left;
}

.header-text-left.tooSoonTooLateTop {
    padding-top: 10%;
}

.enter-header {
    font-size: min(39px, 6.5vw);
    text-align: center;
    color: var(--white);
    padding: min(15px, 2.6vw) 0 min(8px, 1.3vw);
    margin-bottom: -10px;
    height: fit-content;
    line-height: 1;
    z-index: 3 !important;
}

.enter-header-roi {
    width: 36%;
    /* height: 100%; */
    position: absolute !important;
    left: 5%;
    top: 201.5%;
    z-index: 3 !important;
}

.enterhere-header-roi {
    display: none;
    opacity: 0;
}

.enter-header-roi i {
    width: 100%;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/enterHereROI.svg) center no-repeat;
    padding-bottom: 23%;
    background-size: contain;
    display: block;
}

.see-if-winner {
    width: 53%;
    height: 100%;
    position: absolute;
    z-index: 3;
    left: -3%;
    top: 50%;
    transform: translate(51%, 56%);
}

.see-if-winner i {
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/seeIfWinner.svg) center no-repeat;
    background-size: contain;
    padding-bottom: 28%;
    display: block;
}

.header-text-left p span.header-text-small {
    color: var(--reeses-orange);
    font-size: min(23px, 3.85vw);
    line-height: normal;
}

.header-text-left p {
    margin: 0;
}

.header-text-left p span.header-text-large,
.header-text-left p span.header-text-med {
    background: linear-gradient(90deg,
            #C87B33 0%,
            #FADC6F 17%,
            #FFFEF9 33%,
            #FADC6F 49%,
            #C87B33 72%);
    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}

a {
    text-decoration: none;
}

.enterBTN {
    background: linear-gradient(90deg,
            #C87B33 0%,
            #FADC6F 17%,
            #FFFEF9 33%,
            #FADC6F 49%,
            #C87B33 72%);
    color: var(--reeses-brown);
    border: solid 2px white;
    border-radius: 50px;
    font-size: min(37px, 6.2vw);
    text-align: center;
    display: flex;
    position: relative;
    align-items: center;
    width: min(330px, 55.1vw);
    margin: 0 auto;
    justify-content: flex-start;
}

.country-flex {
    display: flex;
    padding-top: min(23px, 3.8vw);
    /* margin-top: 10px; */
    gap: min(15px, 2.5vw);
    flex-direction: column;
}

.ukFlag i {
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/uk.svg) center no-repeat;
    display: block;
    width: 5.4vw;
    /* height: 100%; */
    padding-bottom: 10%;
    background-size: contain;
    margin-left: min(15px, 2.5vw);
    margin-right: min(12px, 2vw);
    max-width: 32px;
}

.roiFlag i {
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/roi.svg) center no-repeat;
    display: block;
    width: 5.4vw;
    /* height: 100%; */
    padding-bottom: 10%;
    background-size: contain;

    margin-left: min(15px, 2.5vw);
    margin-right: min(12px, 2vw);
    max-width: 32px;
}

.header-text-left p span.header-text-large {
    font-size: min(79px, 13.2vw);
    line-height: 0.7;
}

.header-text-left p span.header-text-med {
    font-size: min(49px, 8.2vw);
    line-height: 0.83;
}

.header-product-right i {
    display: block;
    width: 100%;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/headerProduct.png) center no-repeat;
    padding-bottom: 177%;
    background-size: contain;
}

footer .footer-image {
    width: 100%;
    height: 100%;
    position: relative;
}

footer .footer-image i {
    display: block;
    width: 100%;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/footerCropped.png) center no-repeat;
    padding-bottom: 84%;
    background-size: contain;
}

footer .footer-image .snowflake {
    width: 100%;
    position: absolute;
    width: min(48px, 8vw);
    left: 4.8%;
    top: 100%;
    transform: translate(0%, -995%);
    animation: float-snow 18s ease-in-out infinite;
}

@keyframes float-snow {
    0% {
        transform: translate(0%, -995%);
    }

    50% {
        transform: translate(0%, -1009%);
    }

    100% {
        transform: translate(0%, -995%);
    }
}

footer .footer-image .star {
    width: 100%;
    position: absolute;
    width: min(28.8px, 4.8vw);
    left: 82.3%;
    top: 100%;
    transform: translate(0%, -1650%);
    animation: float-star-1 18s ease-in-out 3s infinite;
}

@keyframes float-star-1 {
    0% {
        transform: translate(0%, -1650%) rotate(0deg);
    }

    50% {
        transform: translate(0%, -1664%) rotate(0deg);
    }

    100% {
        transform: translate(0%, -1650%) rotate(0deg);
    }
}

footer .footer-image .star2 {
    width: 100%;
    position: absolute;
    width: min(15.6px, 2.6vw);
    left: 20.7%;
    top: 100%;
    transform: translate(0%, -3226%);
    animation: float-star-2 18s ease-in-out 5s infinite;
}

@keyframes float-star-2 {
    0% {
        transform: translate(0%, -3226%);
    }

    50% {
        transform: translate(0%, -3240%);
    }

    100% {
        transform: translate(0%, -3226%);
    }

}

footer .footer-image .star3 {
    width: 100%;
    /* height: 100%; */

    position: absolute;
    width: min(15.6px, 2.6vw);
    left: 74.9%;
    top: 100%;
    transform: translate(0%, -2492%);
    animation: float-star-3 15s ease-in-out 1s infinite;
}

@keyframes float-star-3 {
    0% {
        transform: translate(0%, -2492%);
    }

    50% {
        transform: translate(0%, -2506%);
    }

    100% {
        transform: translate(0%, -2492%);
    }

}

footer .footer-image .music-note {
    width: min(58px, 9.7vw);
    position: absolute;
    left: 22.9%;
    top: 100%;
    transform: translate(0%, -746%);
    animation-delay: 2.5s;
    animation: float-with-bottom-delay-note 13s ease-in-out 3s infinite;

}

@keyframes float-with-bottom-delay-note {
    0% {
        transform: translate(0%, -746%);
    }

    50% {
        transform: translate(0%, -760%);
    }

    100% {
        transform: translate(0%, -746%);
    }
}

footer .footer-image .music-note2 {
    width: min(58px, 9.7vw);
    position: absolute;
    left: 31%;
    top: 100%;
    transform: translate(0%, -861%);
    rotate: 39deg;
    animation-delay: 5s;
    animation: float-with-bottom-delay-note2 16s ease-in-out 4s infinite;
}

@keyframes float-with-bottom-delay-note2 {
    0% {
        transform: translate(0%, -861%);
    }

    50% {
        transform: translate(0%, -875%);
    }

    100% {
        transform: translate(0%, -861%);
    }
}

footer .footer-image .music-note-double {
    width: min(66px, 11vw);
    position: absolute;
    left: 61%;
    top: 100%;
    transform: translate(0%, -711%);
    animation: float-with-delay 12s ease-in-out infinite;
}

@keyframes float-with-delay {
    0% {
        transform: translate(0%, -711%);
    }

    50% {
        transform: translate(0%, -725%);
    }

    100% {
        transform: translate(0%, -711%);
    }
}


footer .footer-image .snowflake i {
    width: 100%;
    display: block;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/snowFlake.svg) center no-repeat;
    padding-bottom: 100%;
    background-size: contain;
}

footer .footer-image .star i {
    width: 100%;
    display: block;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/star.svg) center no-repeat;
    padding-bottom: 100%;
    background-size: contain;
}

footer .footer-image .star i,
footer .footer-image .star2 i,
footer .footer-image .star3 i {
    width: 100%;
    display: block;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/star.svg) center no-repeat;
    padding-bottom: 100%;
    background-size: contain;
}

footer .footer-image .music-note i,
footer .footer-image .music-note2 i,
.country-flex .music-note i {
    width: 100%;
    display: block;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/musicnote-1.png) center no-repeat;
    padding-bottom: 100%;
    background-size: contain;
}

.country-flex .music-note {
    width: min(69px, 11.6vw);
    position: absolute;
    left: -9.2%;
    top: 100%;
    transform: translate(0%, -241%);
    animation-delay: 2.5s;
    rotate: 31deg;
    animation: float-note-country 13s ease-in-out infinite;
}

@keyframes float-note-country {
    0% {
        transform: translate(0%, -241%);
    }

    50% {
        transform: translate(0%, -256%);
    }

    100% {
        transform: translate(0%, -241%);
    }

}

footer .footer-image .music-note-double i {
    width: 100%;
    display: block;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/musicnote-2.png) center no-repeat;
    padding-bottom: 100%;
    background-size: contain;
}

.position-index {
    position: relative;
    z-index: 2;
}

.footer-share-text {
    color: var(--reeses-brown);
    text-align: center;
}

.footer-share-text p {
    margin: min(16px, 2.6vw) auto;
    font-size: min(28px, 4.65vw);
    line-height: 1.3;
}

.lose {
    /* width: 62%; */
    /* top: min(348px, 58vw) !important; */
    /* top: min(298px, 49.7vw) !important; */
    height: 100%;
    width: 75%;
    /* top: min(348px, 58vw) !important; */
    top: min(285px, 47.5vw) !important;
}

.lose i {
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/sorry.svg) center no-repeat;
    display: block;
    width: 100%;
    padding-bottom: 47%;
}

.win {
    width: 80%;
    /* top: min(324px, 54vw) !important; */
    top: min(284px, 47.4vw) !important;
    height: 100%;
}

.win i {
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/winner.svg) center no-repeat;
    display: block;
    width: 100%;
    padding-bottom: 44%;
}

.click-to-spin-text {
    /* width: 100%; */
    width: 60%;
    /* top: min(40px, 6.7vw) !important; */
    top: min(0px, 6.7vw) !important;
    /* padding: min(60px, 10vw) 0px 0; */
    /* top: -180px; */
    height: 100%;
    position: absolute;
    z-index: 2;
    padding: min(30px, 5vw) 0px 0;
    left: 50%;
    transform: translate(-50%, 0px);
}

.click-to-spin-text i {
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/clicktoSpin.svg) center no-repeat;
    display: block;
    width: 100%;
    /* padding-bottom: 44%; */
    padding-bottom: 100%;
}


@media screen and (min-width: 600px) {
    body {
        /* max-width: 600px; */
        margin: 0 auto !important;
    }
}

.text-small-container {
    width: min(432px, 72vw);
    margin: 0 auto;
}

.success-container-text .text-small-container,
.success-text-container .text-small-container {
    margin-bottom: min(25px, 4.1vw);
    font-weight: 600;
}

.roi-sticker {
    position: absolute;
    width: 26.5%;
        z-index: 6;
    right: 0.5%;
    top: -11%;
}

.roi-sticker i {
    width: 100%;
    display: block;
    padding-bottom: 100%;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/winROISticker.png) center no-repeat;
    background-size: contain;
}

/* form */
.mat-form-field-appearance-outline .mat-form-field-outline-start,
.mat-form-field-appearance-outline .mat-form-field-outline-end {
    border: none !important;
}

.mat-form-field-appearance-outline .mat-form-field-outline-gap {
    border-radius: .000001px;
    border: none !important;
}

.type-form {
    position: relative !important;
    z-index: 2 !important;
    background: var(--reeses-orange) !important;
}


.mat-form-field-appearance-outline .mat-form-field-outline {
    color: var(--reeses-orange) !important;
    background: #fff !important;
    border-radius: 0px !important;
    border: 2px solid var(--reeses-brown);
}

.mat-form-field-label {
    color: var(--reeses-brown) !important;
    font-family: riffle-sans, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0;
    font-size: 18px;
}

.mat-form-field-required-marker {
    color: var(--reeses-brown);
}

.mat-checkbox-background,
.mat-checkbox-frame {

    border: 2px solid var(--reeses-brown);
}

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
    transform: translateY(-0.89375em) scale(.75);
    width: 133.3333333333%;
}

.mat-form-field-appearance-outline .mat-form-field-subscript-wrapper {
    padding: 0em !important;
}

.mat-error,
.mat-hint {
    color: #fff !important;
    padding: 0.4em 0em !important;
}

form {
    width: 100% !important;
}

.key-bestBeforeDate {
    position: relative !important;
}

.key-bestBeforeDate .mat-form-field-wrapper {
    padding-bottom: 22px !important;
}

/* .key-bestBeforeDate .mat-form-field-subscript-wrapper {
    position: absolute !important;
    bottom: 0;
} */

.best-before-popup {
    position: absolute !important;
    width: 35px;
    /* height: 100%; */
    /* bottom: 145px; */
    width: 29px;
    right: 10px;
    top: 10px;
    z-index: 10;
}

.best-before-popup i {
    width: 100%;
    background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/popup.svg) center no-repeat;
    display: block;
    padding-bottom: 100%;
    background-size: contain;
}

.key-batchPopup {
    /* position: relative !important;
    width: 100%;
    top: -63px !important;
    right: auto !important;
    transform: none !important;
    z-index: 10 !important; */
}

.key-bestBeforeDate:has(.mat-form-field-invalid)+.key-batchPopup {
    top: -85px !important;
}



/* 1. Reduce the height of the input box by lowering the padding */
.game-preview-form .mat-form-field-appearance-outline .mat-form-field-infix {
    padding: 12px 0 12px 0 !important;
    /* Default is roughly 16px. Adjust the 8px to your liking */
    border-top: 12px solid transparent !important;
}

/* 2. Adjust the label so it stays centered properly when the box is smaller */
.game-preview-form .mat-form-field-appearance-outline .mat-form-field-label-wrapper {
    top: -1em !important;
}




/* new */

.question {
    margin: 0 auto 0.6rem !important;
}

.game-preview-form .mat-form-field-wrapper {
    padding-bottom: 0 !important;
}

.game-preview-form .mat-form-field {
    margin-bottom: 12px !important;
    display: block !important;
    /* transition: margin-bottom 0.2s ease-in-out; */
}

/* Add the gap back ONLY when an error appears */
.game-preview-form .mat-form-field.mat-form-field-invalid,
.game-preview-form .mat-form-field:has(mat-hint) {
    margin-bottom: 35px !important;
}

/* Position the error text safely in the new margin space we created */
.game-preview-form .mat-form-field-subscript-wrapper {
    padding: 0em !important;
    position: absolute !important;
    top: 100% !important;
    margin-top: 6px !important;
}

.game-preview-form .question-email br {
    display: none !important;
}

.game-preview-form .mat-form-field.always-hidden {
    display: none !important;
    visibility: hidden;
}



/* success styling */
.scene {
    width: 120%;
    height: 138%;
    perspective: 800px;
    position: relative;
    transform-style: preserve-3d;
    opacity: 0;
    /* Changed from 0% */
    top: max(-108px, -18vw);
    z-index: 1;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%, 0px);
    pointer-events: none;
    /* Prevents invisible scene from blocking clicks */
    transition: opacity 0.5s ease;
}

.scene2 {
    /* top: max(-20px, -18vw);
    width: min(980px, 160vw); */
    top: max(-145px, -24.2vw);
    width: min(1285px, 215vw);
    transform: translate(-48%, 0px);
    opacity: 1;


}

video {
    width: 100%;
    /* height: 100%; */
}

.scene.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.disco-ball {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
    filter: blur(0px);
    transition: filter 0.8s ease;
}

.scene.is-active .disco-ball {
    filter: blur(6px);
}

.scene.reveal-clear .disco-ball {
    filter: blur(0px);
    transition: filter 2s ease;
}

/* --- THE ORBIT ARROW --- */
.orbit-arrow {
    position: absolute;
    top: 46%;
    left: 50%;
    width: 65%;
    height: 100%;
    margin-top: -28%;
    margin-left: -32%;
    overflow: visible;
    opacity: 0;
    /* Starts hidden */
    transition: opacity 0.5s ease;
    transform-style: preserve-3d;
    z-index: 10;
}

.orbit-arrow.show {
    opacity: 1;
}

/* --- UI ELEMENTS --- */
.discoBall {
    cursor: pointer;
}

.instructions {
    margin-top: 20px;
    opacity: 1;
    transition: opacity 0.5s ease;
    position: absolute;
    bottom: 10%;
}

.winner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 10px #ff00de, 0 0 20px #ff00de, 0 0 40px #ff00de;
    pointer-events: none;
    z-index: 100;
    transition: all 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.winner-text.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}




.success-container-text {
    display: none;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}


html.cdk-global-scrollblock {
    overflow-y: unset !important;
}

@media screen and (min-width: 600px) {
    body {
        /* max-width: 600px; */
        margin: 0 auto;
    }

    footer .footer-image i {
        display: block;
        width: 100%;
        background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/FooterDeskCv2.png) center no-repeat;
        padding-bottom: 51%;
        background-size: contain;
    }

    .orange-bottom-cut i {
        display: block;
        width: 100%;
        background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/orangeCutDesk.svg) center no-repeat;
        padding-bottom: 8.35%;
        background-size: contain;
        position: relative;
        z-index: 2;
    }

    .header-container.header-container-spinner {
        max-height: 43vw;
        max-height: 41.7vw;

    }

    .roi-sticker {
        position: absolute;
        width: 11.75%;
        z-index: 2;
        right: 25%;
        top: 3%;
    }

    #video_box {

        top: -6vw;
        width: 120vw;
        transform: translate(-50%, 0px);
        opacity: 1;
        height: 138%;
        perspective: 800px;
        position: relative;
        transform-style: preserve-3d;
        z-index: 1;
        margin: 0 auto;
        left: 50%;
        transition: opacity 0.5s ease;
    }

    video {
        width: 100%;
    }

    .discoBallHoliday i {

        /* padding-bottom: 66.3%; */
        padding-bottom: 55.3%;
        background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/discoballwinHolidayDesk.png) center no-repeat;
        background-size: contain;
    }

    .discoBallHoliday {
        top: max(-12vw);
        top: max(-3vw);
    }

    .starburst {
        width: 67%;
        top: max(-14.3vw);
        max-width: unset;
    }

    .left-music {
        width: 100%;
        height: 100%;

    }

    .right-music {
        width: 33%;
        height: 100%;
        position: absolute;
        right: 0;

    }

    .right-music i {
        position: absolute;
        background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/musicNotesRight.png) center no-repeat;
        width: fit-content;
        width: 100%;
        padding-bottom: 137%;
        left: 7%;
        background-size: contain;
        display: block;
        z-index: 4;
    }

    .left-music {
        width: 33%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .left-music i {
        position: absolute;
        background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/musicNotesLeft.png) center no-repeat;
        width: fit-content;
        width: 100%;
        padding-bottom: 137%;
        left: -7%;
        background-size: contain;
        display: block;
        z-index: 4;
    }

    .snowflake,
    .star,
    .star2,
    .star3,
    .music-note,
    .music-note2,
    .music-note-double {
        display: none;
    }

    .text-small-container {
        width: min(432px, 72vw);
        margin: 0 auto;
    }

    form {
        max-width: 500px !important;

    }

    .header-text-left.tooSoonTooLateTop {
        top: 50%;
        padding-top: 5vw;
    }

    .enter-header-roi i {
        display: none;
    }




    /* roi */
    .header-container-roi-height .header-text-left p span.header-text-med {
        font-size: 5vw;
        line-height: 0.83;
    }

    .header-container-roi-height .header-text-left p span.header-text-large {
        font-size: 8vw;
        line-height: 0.7;
    }

    .header-container-roi-height .header-text-left p span.header-text-small {
        color: var(--reeses-orange);
        font-size: 2.5vw;
        line-height: normal;
    }

    .header-container-roi {
        width: 60%;
        margin: 0 auto;
    }

    .header-product-right {
        display: none;
    }

    .header-container-roi-height {
        height: 37.1vw;
        max-height: unset !important;
    }

    .right-roi-desk {
        width: 39%;
        height: 100%;
        position: absolute;
        right: 0;
        top: -19.5%;
        z-index: 5;
    }

    .left-music-roi {
        width: 30%;
    }

    .header-container-roi-height .header-text-left p {
        margin: 0;
        position: absolute;
        top: 34%;
        left: 19%;
    }


    .shortTerms {
        font-size: 16px !important;
    }



    .right-roi-desk i {
        position: absolute;
        background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/roi-right.png) center no-repeat;
        width: 100%;
        padding-bottom: 152%;
        left: -3%;
        background-size: contain;
        display: block;
        z-index: 5;
    }

    .scene2 {
        top: -6vw;
        /* width: 120vw;
            transform: translate(-49%, 0px); */
        width: 100vw;
        transform: translate(-50%, 0px);
        opacity: 1;
        height: 138%;
        perspective: 800px;
        position: relative;
        transform-style: preserve-3d;
        z-index: 1;
        margin: 0 auto;
        left: 50%;
        transition: opacity 0.5s ease;
        overflow: hidden;
        /* zoomed in ver */
        /* width: 120vw;
        height: 138%;
        left: 52.5%; */
    }

    .click-to-spin-text {
        width: 32.5%;
        height: 100%;
        position: absolute;
        z-index: 2;
        padding: min(30px, 5vw) 0px 0;
        left: 50%;
        top: 4% !important;
        transform: translate(-55%, 0px) !important;
        /* zoomed in ver */
        /* width: 37.5%;
                top: 0% !important;
        transform: translate(-48%, 0px) !important; */
    }

    .lose {
        height: unset !important;
        width: 39%;
        left: 48% !important;
        top: 19.5vw !important;
        /* zoomed in ver */
        /* width: 43%;
        left: 50% !important;
        top: 23.5vw !important; */
    }

    .win {
        width: 50%;
        top: 20vw !important;
        left: 48% !important;
        height: unset !important;
        /* zoomed in ver */
        /* width: 56%;
        top: 22vw !important;
        left: 50% !important; */
    }

    .see-if-winner {
        height: unset !important;

        top: 91%;

    }

    .see-if-winner i {
        background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/seeWinnerDesk.svg) center no-repeat;
        background-size: contain;
        padding-bottom: 11%;
        display: block;
    }

    .enterhere-header-roi {
        display: block;
        opacity: 1;
    }

    /* nav  */
    app-page-block nav a .material-icons {
        font-size: min(48px, 8vw) !important;
        height: 49px !important;
        max-width: 79px !important;
    }

    nav a {
        height: 60px;
    }

    .roiFlag i,
    .ukFlag i {
        padding-bottom: 13.1%;
        width: 2.5vw;
        max-width: unset !important;
    }

    .enterBTN {
        padding: 8px 0px 8px 0;
        width: 19vw;
        font-size: 1.7vw;
        border: solid 0.25vw white;
        border-radius: 400px;
    }


    .country-flex {
        /* gap: min(15px, 2.5vw); */
        flex-direction: row;
        width: 100vw;
        gap: 14vw;
        position: absolute;
        margin-bottom: 0vw;
        z-index: 3;
        background: none;
        justify-content: center;
    }

    .best-before-popup i {
        background: url(https://cdn.promo-now.com/site-files/6a733248f3b3bc43a4550b3c/yellowModal.svg) center no-repeat;
        background-size: contain;
    }

    .chanceTo {
        position: absolute;
        width: 168%;
        height: 100%;
        margin: 0 auto;
        left: 50%;
        transform: translate(-50%, 2.3vw);
        z-index: 5;
    }

    .winHolidayText {
        position: absolute;
        width: 33.6%;
        opacity: 1;
        height: 100%;
        margin: 0 auto;
        left: 50%;
        transform: translate(-50%, 6vw);
        z-index: 9;
    }
}

.formLink {
    text-decoration: underline;
}

.uploading-files li.placeholder {
    width: 100% !important;
    background: var(--white);
    color: var(--reeses-brown);
}

.uploading-files li .controls button {
    background-color: var(--white) !important;
    border: 2px var(--reeses-brown) solid;
}

.uploading-files li .controls {
    top: 5px !important;
    right: 5px !important;
    width: unset !important;
    height: 0 !important;
}

.mat-select-panel {
    background: var(--white);
}

.mat-option.mat-active,
.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
    color: var(--reeses-brown);
    background: #e9521d42;
}

.mat-option,
.mat-option.mat-active {
    color: var(--reeses-brown);
}

.mat-select-panel .mat-option {
    border: 1px solid;
}

mat-expansion-panel a {
    text-decoration: underline;
}