:root {
    --cream: #fffadc;
}
.country-select-page .formContainer {
    text-align: center;
}

.country-select-page .formContainer .mandatory {
    display: none;
}

.country-select-page .formContainer .field_country .radioContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
}
.country-select-page .formContainer .radioContainer .radio {
    width: 160px;
    height: 100px;
    display: inline-block;
    padding: 0;
    margin: 0 10px;
}
@media screen and (max-width: 400px) {
    .country-select-page .formContainer .radioContainer .radio {
        height: 26vw;
    }
}
.country-select-page .formContainer .radioContainer .radio > a {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}
.country-select-page .formContainer .radioContainer .radio[data-value='UK'] > a {
    background: url(../img/flag_uk.svg) no-repeat center;
    background-size: auto 100%;
}
.country-select-page .formContainer .radioContainer .radio[data-value='EN'] > a {
    background: url(../img/flag_uk.svg) no-repeat center;
    background-size: auto 100%;
}
.country-select-page .formContainer .radioContainer .radio[data-value='ROI'] > a {
    background: url(../img/flag_roi.svg) no-repeat center;
    background-size: 100% 100%;
}
.country-select-page .formContainer .radioContainer .radio[data-value='FR'] > a {
    background: url(../img/flag_fr.svg) no-repeat center;
    background-size: 100% 100%;
}
.country-select-page .formContainer .radioContainer .radio.checked > a:after {
    display: none;
}
.country-select-page .formContainer .radioContainer .radio.checked > a {
    border: 2px solid green;
    transform: scale(1.15);
}
.country-select-page .formContainer .focused {
    box-shadow: 0 0 2px 2px #fff;
}
.formContainer .field_language .inputContainer {
    max-width: max-content;
    margin: 0 auto;
}
.formContainer .field_language .radioContainer .radio {
    padding: 0 0 0 30px;
    line-height: 1;
    margin: 10px auto;
}
.formContainer .field_language .radioContainer .radio > a {
    margin-top: 3px;
}

.hero-bg {
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
}

.hero-bg i {
    display: block;
    background: url(../img/heroBg.png) no-repeat center;
    background-size: auto 100%;
    height: 47vw;
    max-height: 600px;
}
.lockup {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.lockup i {
    display: block;
    padding-bottom: 86%;
    background: url(../img/lockup.png) no-repeat center;
    background-size: contain;
}
.claim-your-prize {
    width: 100%;
    max-width: 600px;
    margin: 2rem auto;
    position: relative;
}

.claim-your-prize > i {
    display: block;
    padding-bottom: 33%;
    background: url(../img/claimYourPrize.svg) no-repeat center;
    background-size: contain;
}
.claim-your-prize .character {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    position: absolute;
    left: -60%;
    bottom: 100%;
}

.claim-your-prize .character i {
    display: block;
    background: url(../img/character.png) no-repeat bottom right;
    background-size: contain;
    height: 30vw;
}

.weekly-prizes {
    width: 100%;
    max-width: 430px;
    margin: 4rem auto 2rem auto;
}

.weekly-prizes i {
    display: block;
    padding-bottom: 55%;
    background: url(../img/weeklyPrizes.svg) no-repeat center;
    background-size: contain;
}
.form-bg {
    margin-top: 80px;
}
.formContainer {
    background: url(/img/formBg.svg) no-repeat top left;
    background-size: 100% 100%;
    padding: 60px 150px;
    box-sizing: border-box;
    max-width: 980px;
}

.narrow {
    max-width: 700px;
    margin: 0 auto;
}
.formContainer .buttonContainer {
    text-align: center;
}
.formContainer .buttonContainer button {
    background: url(/img/buttonBg.jpg) no-repeat center;
    background-size: contain;
    font-size: 2.7rem;
    font-family: 'rooney black', sans-serif;
    color: var(--cream);
    padding: 12px 60px;
}
.formContainer label a {
    color: #1d1d1b;
}
.formContainer label,
.formContainer .label {
    color: #1d1d1b;
    font-size: 1.8rem;
}
.formContainer input[type='text'],
.formContainer select {
    background: var(--cream);
    border-radius: 15px;
    font-size: 1.8rem;
}
.formContainer .selectContainer i.arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 2rem;
}
.formContainer .checkboxContainer label {
    font-size: 1.3rem;
}
.formContainer .checkboxContainer {
    padding-top: 0;
}
.formContainer .checkboxContainer > a {
    margin-top: 3px;
}
.formContainer .postcodeLookupContainer .pclButton {
    background: #fe7503;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 15px 15px 0;
    padding: 0 15px;
}
.prizes {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    gap: 0 20px;
}

.prize {
    flex: 1 1 calc(25% - 20px);
}
.prize img {
    user-select: none;
    pointer-events: none;
}

#modal .inner #content,
#modal .inner #content a {
    color: black;
    font-family: sans-serif;
}

footer ul li a {
    color: var(--cream);
}
@media screen and (max-width: 800px) {
    .claim-your-prize .character {
        display: none;
    }
    .formContainer {
        padding: 60px 9vw;
    }
    .formContainer label {
        color: #1d1d1b;
        font-size: 1.3rem;
    }
    .formContainer input[type='text'],
    .formContainer select {
        background: var(--cream);
        border-radius: 15px;
        font-size: 1.3rem;
    }
}

@media screen and (max-width: 500px) {
    .title_M {
        font-size: 20px;
    }
    .form-bg {
        margin-top: 40px;
    }
    .formContainer .buttonContainer button {
        font-size: 2rem;
    }
}

.mandatoryFields {
    color: #1d1d1b;
}

.prize-img {
    background: url(/img/prize-bg.svg) no-repeat center;
    background-size: 100% 100%;
    padding: 50px 20px;
}
.tier1 {
    width: 70%;
    max-width: 350px;
    margin: 2rem auto;
    position: relative;
}
.tier1 > i {
    display: block;
    padding-bottom: 66%;
    background: url(../img/prizes/tier1.png) no-repeat center;
    background-size: contain;
}

.tier2 {
    width: 70%;
    max-width: 300px;
    margin: 2rem auto;
    position: relative;
}
.tier2 > i {
    display: block;
    padding-bottom: 83%;
    background: url(../img/prizes/tier2.png) no-repeat center;
    background-size: contain;
}

.tier3 {
    width: 70%;
    max-width: 300px;
    margin: 2rem auto;
    position: relative;
}
.tier3 > i {
    display: block;
    padding-bottom: 83%;
    background: url(../img/prizes/tier3.png) no-repeat center;
    background-size: contain;
}

.tier4 {
    width: 70%;
    max-width: 300px;
    margin: 2rem auto;
    position: relative;
}
.tier4 > i {
    display: block;
    padding-bottom: 59%;
    background: url(../img/prizes/tier4.png) no-repeat center;
    background-size: contain;
}

.tier5 {
    width: 70%;
    max-width: 300px;
    margin: 2rem auto;
    position: relative;
}
.tier5 > i {
    display: block;
    padding-bottom: 95%;
    background: url(../img/prizes/tier5.png) no-repeat center;
    background-size: contain;
}

.tier6 {
    width: 70%;
    max-width: 300px;
    margin: 2rem auto;
    position: relative;
}
.tier6 > i {
    display: block;
    padding-bottom: 77%;
    background: url(../img/prizes/tier6.png) no-repeat center;
    background-size: contain;
}

.tier7 {
    width: 70%;
    max-width: 300px;
    margin: 2rem auto;
    position: relative;
}
.tier7 > i {
    display: block;
    padding-bottom: 83%;
    background: url(../img/prizes/tier7.png) no-repeat center;
    background-size: contain;
}

.tier8 {
    width: 70%;
    max-width: 300px;
    margin: 2rem auto;
    position: relative;
}
.tier8 > i {
    display: block;
    padding-bottom: 73%;
    background: url(../img/prizes/tier8.png) no-repeat center;
    background-size: contain;
    transform: rotate(270deg);
}