:root {
  --white: #fefefe;
  --red: #991123;
  --light-blue: #c4d4e8;
  --blue: #2e3191;
  --black: #000000;
  --purple: #6E71B3;
}


html,
body { padding: 0; margin: 0; }
body { background:  var(--blue) url(../images/red-bg.webp) no-repeat; background-size: cover; color: var(--white); font-family: 'Times New Roman', serif; font-size: 1.8vw; }
a { transition: color 0.4s; border: none; outline: 0; text-decoration: none; color: var(--blue); }
p { line-height: 1.6em; margin: 0; }
h1,h2 { margin: 0 0 0.5em; font-size: 2.5em; font-weight: bold; display: inline-block; position: relative; padding: 0.3em 0; }
h1:before,h2:before,h1:after,h2:after { content:''; display: block; position: absolute; width: 100%; height: 3px; background: var(--blue); left:0; top: 0; }
h1:after,h2:after { bottom: 0; top: auto; }
h3 { font-size: 1.6em; font-weight: bold;  }
img { width: auto; height: auto; max-width: 100%; }

.diamond-btn { display: inline-block; position: relative; }
.diamond-btn:after {content: '';position: absolute;top: 0.25em;left: 0.25em;width: 100%;height: 100%;background: var(--purple);
  clip-path: polygon(12px 0%,calc(100% - 12px) 0%,100% calc(0% + 12px),100% calc(100% - 12px), calc(100% - 12px) 100%,12px 100%,0% calc(100% - 12px),0% calc(0% + 12px) );
}
.diamond-btn a,
.diamond input,
.diamond {
    color: var(--white);
  background: var(--blue);
  padding: 0.5em 1.2em;
  border: none;
  clip-path: polygon(12px 0%,calc(100% - 12px) 0%,100% calc(0% + 12px),100% calc(100% - 12px), calc(100% - 12px) 100%,12px 100%,0% calc(100% - 12px),0% calc(0% + 12px) );
  display: block;
  position: relative;
  z-index: 2;
  margin: 0;
}
.diamond-btn a { cursor: pointer; }
.diamond-btn input[type="submit"] { margin: 0; display: inline-block; width: auto; position: relative; z-index: 2;
  clip-path: polygon(12px 0%,calc(100% - 12px) 0%,100% calc(0% + 12px),100% calc(100% - 12px), calc(100% - 12px) 100%,12px 100%,0% calc(100% - 12px),0% calc(0% + 12px) );
}


header { height: 95vh; box-sizing: border-box; display: flex; justify-content: space-around; align-items: flex-end; padding: 2em 2em 6em; background: url(../images/bg.webp) no-repeat bottom center; background-size: cover; position: relative; }
header .title { width: auto; height: 60vh; }
.logo { width: 30%; position: absolute; top: 10%; left: 35%; }
.frozen { width: auto; height: 80vh; position: absolute; bottom: 0; right: 0; }
.lvqr-logo { width: 15%; position: absolute; top: 0; left: 5%; }
.copyright { width: 0.65em; position: absolute; top: 45%; right: 0; }

.mainWrapper { text-align: center; }
.zone { margin-bottom: 4em; }
.contentWrapper { display: flex; align-items: stretch; width: 100%; position: relative; }
.gifts {  width: 50%; display: flex; align-items: flex-end; justify-content: space-around; }
.gifts img { width: 48%; }

.stepsZone { padding: 2em; color: var(--blue); }
.steps { padding: 1em; max-width: 1150px; margin: 2em auto 0; background: url(../images/steps-bg.webp) no-repeat center center; background-size: 100% 100%;  }
.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: 3px; height: 100%; background: var(--blue); top: 0; right: 0; }
.steps li:last-child:after { display: none; }
.steps img { height: 6em; }

.formZone { display: none; }
.formZone h3 { display: inline-block; margin-bottom: 1em; }
.formWrapper { width: 100%; max-width: 500px; margin: 0 auto; box-sizing: border-box; padding: 0 2em; color: var(--blue); }
.formActive .formWrapper { display: block; }
#form.formWrapper  { max-width: 850px; }

.formWrapper > * { width: 100%; }
.seperator { display: block; width: 100%; height: 0.1em; background: var(--purple); }
.inputWrapper { margin-bottom: 1em; text-align: left; }
.inputWrapper label { font-weight: normal; margin-bottom: 0.25em; display: inline-block; }
input { color: var(--white); background: var(--blue); border: 2px solid var(--blue); width: 100%; font-size: 1em; padding: 0.5em 0.8em; display: block; margin: 0 auto; text-align: left; outline: 0; box-sizing: border-box; transition: 0.4s; font-family: 'Times New Roman', serif; }

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

.cols { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.cols .inputWrapper  { width: 48%; }
.inputWrapper.hidden { display: none; }

.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: 'Times New Roman', 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(--blue); 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: 'Times New Roman', 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: url(../images/checkbox.svg) no-repeat center center; background-size: contain;  box-sizing: border-box; }
.checkboxWrapper a { text-decoration: underline; color: var(--blue); }
.checkboxWrapper a:hover { color: var(--purple); }
.checkboxWrapper label .close { position: absolute;transform: scale(0);left: 0;top: 0;margin: 0; fill: var(--blue);transition: 0.2s;backface-visibility: hidden;display: block;width: 3em;height: 3em;}
.checkboxWrapper label .close svg { width: 55%; height: auto; margin: 0 auto; display: block; }
.checkboxWrapper input:checked~label .close { transform: scale(0.6); }

.radioWrapper { display: inline-flex; width: auto; }
.radioWrapper label { padding: 0 0.3em; border-right: 2px solid var(--white); cursor: pointer; }
.radioWrapper label:last-child { border: none; }
.radioWrapper input { width: 1em; height: 1em; display: none; }
.radioWrapper input:checked + label { font-weight: bold; text-decoration: underline; }
textarea { color: var(--white); background: transparent; width: 100%; height: 8em; font-size: 1em; padding: 0.5em 2em; display: block; margin: 0 auto; text-align: left; outline: 0; box-sizing: border-box; transition: 0.4s; font-family: 'Times New Roman', serif; border: none; }
.textareaWrapper.diamond { box-sizing: border-box; max-width: 700px; margin: 0 auto; }
.starWrapper { position: relative; display: inline-block; width: auto; }
.starWrapper .stars { position: absolute; top: -1.3em; right: -0.4em; width: auto; height: 1.2em; pointer-events: none; }

.fileWrapper { display: flex; align-items: flex-start; text-align: left; }
.fileWrapper input { border: none; }
.fileWrapper .wrapper { margin-left: 2em; }
.fileWrapper svg { width: 7em; height: auto; }

::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: 0; font-weight: bold; line-height: 1; font-size: 1.85em; }
.successMsg h2 span { font-size: .75em; }
.successActive .formZone h3:first-child { display: none; }

.successMsg p { align-self: flex-end; line-height: 1.4em; color: var(--blue); }
.successMsg p.date { margin: 1.5em 0; }
.successMsg .diamond p { color: var(--white); }
.successMsg p span { font-weight: bold; }
.successActive .successMsg { display: block; }
.successActive .formWrapper,
.questionSuccessMsg { display: none; }
.successActive #questions.formWrapper { display: block; }

.questionSuccess.successActive #questions.formWrapper { display: none; }
.questionSuccess .questionSuccessMsg { display: block; color: var(--blue); }
.questionSuccess .successMsg h3.diamond,
.questionSuccess .successMsg .diamond p { display: none; }
.successMsg .diamond { display: inline-block; }

.successMsg .title { padding: 1em 2rem; background: var(--blue); color: var(--light-blue); border-radius: 100rem; display: inline-block; width: auto; }

#questions { max-width: 100%; }

.iceZones { background: url(../images/ice.webp) no-repeat top center; background-size: cover; padding: 2em 0; box-sizing: border-box; }

.termsWrapper,
.winnersWrapper { overflow: hidden; overflow-y: auto; height: 100%; }
.winnersWrapper { text-align: center; }
.termsWrapper p { font-family: 'Times New Roman', serif; }
.termsWrapper p a { color: var(--blue); font-weight: bold; }
.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; background: var(--blue); color: var(--white); }
.productsZone h3 { color: var(--white); font-size: 2.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 1.5em; }
.products .imgWrapper { padding: 1em 2em; background: var(--white); width: 100%; height: 22vw; position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0.5em auto; }
.products img { height: 100%; object-fit: contain; }
.products h4 { margin-top: 0.2em; color: var(--white); font-weight: 300; font-size: 1em; }

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


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

.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--white); color: var(--blue); box-sizing: border-box; padding: 1em; z-index: 9; }
.winnersActive .winnersWrapper,
.termspageActive .termsWrapper { display: block; }
.closeModal { display: block;
    width: 3em;
    height: 3em;
    background:  var(--blue);
    fill: var(--white);
    position: fixed;
    top: 0;
    right: 0; }
.closeModal svg { width: 76%; height: auto; margin: 0 auto; display: block; }

.ageNotice { background: var(--purple); align-items: center; justify-content: center; }
.ageNotice .modalWrapper { background: var(--blue); width: auto; display: block; padding: 1em; text-align: center; color: var(--white); 
  clip-path: polygon(12px 0%,calc(100% - 12px) 0%,100% calc(0% + 12px),100% calc(100% - 12px), calc(100% - 12px) 100%,12px 100%,0% calc(100% - 12px),0% calc(0% + 12px) );
}
.ageNotice .buttonWrapper { display: flex; margin-top: 1em; align-items: center; justify-content: center; }
.ageNotice .buttonWrapper span { width: display; width: 2em; height: 2em; display: inline-block; cursor: pointer; transition: 0.4s ease-out; transform: scale(1); margin: 0 2em; }
.ageNotice .buttonWrapper span svg { width: 2em; height: 2em; }
.ageNotice .buttonWrapper span:hover { transform: scale(1.05); }
.ageNoticeActive .ageNotice { display: flex; }


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

}

@media(orientation:portrait){
	body { font-size: 2vh; }
	.mainWrapper:before { content: ''; position: absolute; top: 20em; left: 0; width: 100%; height: 150%; background: var(--blue); z-index: -1; }
	input,
    .inputWrapper label { font-size: 1em; }
    header { display: block; padding-top: 60vw; padding-bottom: 4em; height: auto; }
    .gifts { width: 100%; margin: 2em 0 0; }
    .frozen { width: 30%; height: auto; }

    .cols { display: block; }
	.cols .inputWrapper  { width: 100%; }
	
	header .title { width: auto; height: 35vh; margin: 0 auto; display: block; }

}

@media only screen and (max-width: 600px) {
    .steps { display: inline-block; border: none; background: none; }
    .steps ul { display: inline-block; padding: 4em; background: url(../images/mobile-steps-bg.webp) no-repeat center center; background-size: 100% 100%; }
    .steps li { text-align: left; margin-bottom: 3em; }
    .steps li:last-child { margin-bottom: 0; }
    .steps img { height: 18vw; width: auto; }
    .steps li:after {  width: 100%; height: 2px; top: auto; bottom: -2em; }
    .products { display: block; }
    .products li { margin: 0 0 2em; }
    .products img { width: 70%; }
    .products .imgWrapper { width: 70vw; height: 50vw; }
    
}

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

}