@font-face {
    font-family: 'UNBlockNormal';
    src: url('../fonts/UNBlockNormal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
  --white: #f7f4e8;
  --red: #ee3124;
  --yellow: #f9a020;
  --blue: #2261ae;
  --black: #000000;
}


html,
body { padding: 0; margin: 0; }
body { background:  var(--white) url(../images/bg.svg) repeat; background-size: 18vw auto; color: var(--white); font-family: 'UNBlockNormal', Arial, Sans-serif; font-size: 1.35vw; }
a { transition: color 0.4s; border: none; outline: 0; text-decoration: none; color: var(--white); }
p { line-height: 1.6em; margin: 0; }
h1,h2 { margin: 0 0 1em; font-size: 2.5em; }
h3 { font-size: 1.6em; }
img { width: auto; height: auto; max-width: 100%; }

header { display: flex; justify-content: space-around; align-items: center; padding: 2em; }
header img { width: 30%; }

.mainWrapper { background: url(../images/bg2.svg) no-repeat top center; background-size: 100% auto; padding-top: 20vw; text-align: center; }
.zone { margin-bottom: 4em; }
.contentWrapper { display: flex; align-items: stretch; width: 100%; position: relative; }
.gifts { margin-bottom: -18vw; width: 35%; }

.stepsZone { padding: 2em; }
.steps { padding: 1em; border: 1px solid var(--white); max-width: 1400px; margin: 0 auto; }
.steps h3 { margin-top: 0; }
.steps  ul { display: flex; align-items: flex-start; justify-content: center; list-style: none; padding: 0; }
.steps li { position: relative; flex: 1; }
.steps li:after { content: ''; position: absolute; width: 1px; height: 100%; background: var(--white); top: 0; right: 0; }
.steps li:last-child:after { display: none; }
.steps img { height: 6em; }

.formZone { display: none; }
.formWrapper { width: 100%; max-width: 550px; margin: 0 auto; box-sizing: border-box; padding: 0 2em; }
.formActive .formWrapper { display: block; }

.formWrapper > * { width: 100%; }
.seperator { display: block; width: 100%; height: 0.1em; background: var(--green); }
.inputWrapper { margin-bottom: 1em; text-align: left; }
.inputWrapper label { font-size: 0.6em; }
input { background: var(--white); color: var(--black); width: 100%; font-size: 0.8em; border: none; border-radius: 0.5em; padding: 0.4em 0.5em; display: block; margin: 0 auto; text-align: left; outline: 0; box-sizing: border-box; transition: 0.4s; font-family: 'UNBlockNormal', Arial, Sans-serif; }

.buttonWrapper { margin: 1em auto; }
input[type="submit"],
.cta{ background: var(--yellow); font-size: 1em; cursor: pointer; color: var(--white); margin-bottom: 0.5em; font-family: 'UNBlockNormal', Arial, Sans-serif; transition: 0.4s ease-out; border-radius: 0.5em; width: auto; padding: 0.3em 1.2em; }
input[type="submit"]:hover,
.cta:hover { background: var(--blue); }
.formWrapper .buttonWrapper { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
#submit { width: auto; display: inline-block; margin: 0 0 0 1em; }
.formWrapper .buttonWrapper svg { fill: var(--white); opacity: 0; visibility: hidden; }
.loading .formWrapper .buttonWrapper svg { opacity: 1; visibility: visible; }
.loading #submit { opacity: 0.5; pointer-events: none; cursor: default; }

.formWrapper span.error { color: #c30000; text-align: center; display: block; margin: 3px 0; font-size: 12px; background: white; display: inline-block; padding: 0.2em 0.5em; }
.inputWrapper p { font-family: Arial, Helvetica, sans-serif; font-size: 0.65em; line-height: 1; margin-bottom: 0.5em; }

.checkboxWrapper { position: relative; display: flex; flex-direction: column; padding: 10px 0; align-items: center; overflow: hidden; color: var(--green); min-height: 2em; }
.checkboxWrapper .error { order: 2; }
.checkboxWrapper input { visibility: hidden; opacity: 0; width: 0; height: 0; top: -100px; left: -100px; position: absolute; }
.checkboxWrapper label { display: inline-block; padding-left: 4em; position: relative; cursor: pointer; font-family: 'UNBlockNormal', Arial, Sans-serif; font-size: 12px; line-height: 1.8em; text-align: left; }
.checkboxWrapper label::before { content: ''; position: absolute; top: 0; left: 0; width: 3em; height: 3em; background: var(--white); box-sizing: border-box; border-radius: 0.5em; }
.checkboxWrapper a { text-decoration: underline; color: var(--green); }
.checkboxWrapper a:hover { color: var(--green); }
.checkboxWrapper label .close { position: absolute;transform: scale(0);left: 0;top: 0;margin: 0; fill: var(--red);transition: 0.2s;backface-visibility: hidden;display: block;width: 3em;height: 3em;}
.checkboxWrapper label .close svg { width: 76%; height: auto; margin: 0 auto; display: block; }
.checkboxWrapper input:checked~label .close { transform: scale(1); }

::placeholder { color: rgba(239, 49, 36, 1); opacity: 0.7; }
.successMsg { display: none; width: 100%; height: 100%; flex-wrap: wrap; align-items: center; justify-content: center; box-sizing: border-box; }
.successMsg h2 { margin: 10vh 0; font-weight: bold; line-height: 1; }
.successMsg h2 span { font-size: .75em; }

.successMsg p { align-self: flex-end; line-height: 1.4em; }
.successMsg p span { font-weight: bold; }
.successActive .successMsg { display: block; }
.successActive .formWrapper { display: none; }

.termsWrapper,
.winnersWrapper { overflow: hidden; overflow-y: auto; height: 100%; }
.winnersWrapper { text-align: center; }
.termsWrapper p { font-family: Arial, Helvetica, sans-serif; }
.termsWrapper p a { color: var(--yellow); }
.termsWrapper p,
.termsWrapper ul { line-height: 1.5em; }
.termsWrapper li { margin-bottom: 1.2em; text-align: left; }
.winners { display: inline-block; text-align: center; text-transform: uppercase; padding-bottom: 4em; }
.winner { margin-bottom: 2em; text-align: center; }
.winners table { width: 100%; table-layout: auto; font-size: 0.7em; }
.winners td,
.winners th { padding: 0.5em 0.2em; text-align: left; }
.winnersWrapper .cookie { display: none; }

.productsZone { padding: 0 2em; }
.products { display: flex; align-items: flex-start; justify-content: space-around; padding: 0; margin: 0 auto; list-style: none; max-width: 1200px; }
.products li { flex: 1; margin: 0 0.5em; }
.products img { width: 100%; }
.products h4 { margin-top: 0.2em; }

.bottom { padding: 4em; display: flex; align-items: center; justify-content: center; }
.bottom a { display: inline-block; padding: 0 2em; color: var(--white); }
.bottom a:hover { color: var(--blue); }


.page { display: none; }
.termsContent a { text-decoration: underline; }

.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--white) url(../images/bg.svg) repeat; background-size: 18vw auto; color: var(--red); box-sizing: border-box; padding: 1em; }
.winnersActive .winnersWrapper,
.termspageActive .termsWrapper { display: block; }
.closeModal { display: block;
    width: 3em;
    height: 3em;
    background:  var(--red);
    fill: var(--white);
    position: fixed;
    top: 0;
    right: 0; }
.closeModal svg { width: 76%; height: auto; margin: 0 auto; display: block; }

.ageNotice { background: rgba(0, 0, 0, 0.7); align-items: center; justify-content: center; }
.ageNotice .modalWrapper { background: var(--red); width: auto; display: block; padding: 1em; text-align: center; color: var(--white); }
.ageNotice .buttonWrapper { display: flex; margin-top: 1em; align-items: center; justify-content: space-between; }
.ageNotice .buttonWrapper span { padding: 0.2em 1em; display: inline-block; background: var(--yellow); border-radius: 0.5em; cursor: pointer; transition: 0.4s ease-out; }
.ageNotice .buttonWrapper span.confirmNotice { background: var(--blue); }
.ageNotice .buttonWrapper span:hover,
.ageNotice .buttonWrapper span.confirmNotice:hover { background: var(--black); }
.ageNoticeActive .ageNotice { display: flex; }


@media screen and (max-width: 1600px) {
	body { font-size: 1.2vw; }
}

@media(orientation:portrait){
	body { font-size: 2vh; }
	.mainWrapper { position: relative; overflow: hidden; }
	.mainWrapper:before { content: ''; position: absolute; top: 20em; left: 0; width: 100%; height: 150%; background: var(--red); z-index: -1; }
	input,
    .inputWrapper label { font-size: 1em; }
    header { display: block; }
    .title { width: 55%; }
    .gifts { width: 65%; display: block; margin: -2em 0 -5em auto; }

    
}

@media only screen and (max-width: 600px) {
    .steps { display: inline-block; }
    .steps ul { display: block; padding: 4em; }
    .steps li { text-align: left; margin-bottom: 8em; }
    .steps li:last-child { margin-bottom: 0; }
    .steps img { height: 12em; }
    .steps li:after {  width: 100%; height: 1px; top: auto; bottom: -4em; }
    .products { display: block; }
    .products li { margin: 0 0 2em; }

    
}

@media screen and (max-width: 700px) {

}