html {
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  font-size: 10px;
  font-display: swap;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 2360px) {
  html {
    font-size: 0.41949153vw;
  }
}
@-ms-viewport {
  width: device-width;
}
a {
  color: inherit;
}
body {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 4.7rem;
  font-feature-settings: "locl" 1;
  line-height: 1;
  color: #fff;
  position: relative;
  flex-grow: 1;
  padding: 0;
  margin: 0;
  background: #7e0219;
  background: #fff;
}
html {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
body {
  flex-grow: 1;
}
.font-playfair {
  font-family: 'Playfair Display';
}
/* Wrappers */
.mobile-format {
  display: none;
}
@media (max-width: 480px) {
  .mobile-format {
    display: block;
  }
}
.desktop-format {
  display: block;
}
@media (max-width: 480px) {
  .desktop-format {
    display: none;
  }
}
.header {
  position: absolute;
  width: 41rem;
  padding-top: 4rem;
  left: 50%;
  transform: translateX(-50%);
}
.header img {
  display: block;
  margin: 0 auto;
}
.wrapper {
  width: 236rem;
  width: 100vw;
  height: 164rem;
  margin: 0 auto;
  position: relative;
  position: fixed;
  top: 0;
  background: url(https://santashotline.eu/assets/images/backgr.png) top center no-repeat;
  background-size: 100%;
  background-color: #7e0219;
}
.screens {
  width: 100%;
  height: 100%;
  position: relative;
}
.screens .screen {
  width: inherit;
  height: inherit;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s linear;
}
.screens .screen-1 .text {
  position: absolute;
  top: 37rem;
  width: 100%;
  text-align: center;
  line-height: 1.2;
}
.screens .screen-1 .next {
  position: absolute;
  width: 49.8rem;
  height: 11.1rem;
  top: 72.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}
.screens .screen-1 .next img {
  display: block;
  width: 100%;
}
.screens .screen-1 .text-2 {
  position: absolute;
  top: 91rem;
  width: 100%;
  text-align: center;
  line-height: 1.2;
}
.screens .screen-1 .qr {
  position: absolute;
  width: 30rem;
  top: 114.5rem;
  left: 50%;
}
.screens .screen-1 .qr-ios {
  transform: translateX(calc(-100% - 6rem));
}
.screens .screen-1 .qr-android {
  transform: translateX(6rem);
}
.screens .screen-1 .label {
  position: absolute;
  width: 30rem;
  top: 108.3rem;
  left: 50%;
  text-align: center;
  font-size: 5rem;
}
.screens .screen-1 .label-ios {
  transform: translateX(calc(-100% - 6rem));
}
.screens .screen-1 .label-android {
  transform: translateX(6rem);
}
.screens .screen-2 .headline {
  position: absolute;
  top: 39rem;
  width: 134.6rem;
  left: 50%;
  transform: translateX(-50%);
}
.screens .screen-2 .text {
  position: absolute;
  top: 90rem;
  width: 100%;
  text-align: center;
  line-height: 1.2;
}
.screens .screen-2 .next {
  position: absolute;
  width: 49.8rem;
  height: 11.1rem;
  top: 130rem;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}
.screens .screen-2 .next img {
  display: block;
  width: 100%;
}
.screens .screen-3 .text {
  position: absolute;
  top: 29.5rem;
  width: 100%;
  text-align: center;
  line-height: 1.2;
}
.screens .screen-3 .categories {
  position: absolute;
  top: 41rem;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 5.5rem;
  row-gap: 4rem;
}
.screens .screen-3 .categories a {
  display: block;
  width: 35.1rem;
}
.screens .screen-3 .categories a img {
  display: block;
  width: 100%;
}
.screens .screen-4 .category {
  position: absolute;
  font-family: 'Playfair Display';
  font-size: 13.5rem;
  font-weight: bold;
  font-style: italic;
  top: 22rem;
  width: 100%;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}
.screens .screen-4 .text {
  position: absolute;
  top: 36rem;
  width: 100%;
  text-align: center;
  line-height: 1.2;
}
.screens .screen-4 .gifts {
  position: absolute;
  top: 49.5rem;
  width: fit-content;
  height: calc(164rem - 49.5rem);
  overflow: scroll;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 4.5rem;
  row-gap: 4rem;
  padding-bottom: 10rem;
}
.screens .screen-4 .gifts .gift {
  display: block;
  width: 30rem;
  text-align: center;
  cursor: pointer;
}
.screens .screen-4 .gifts .gift img {
  display: block;
  width: 30rem;
  height: 30rem;
}
.screens .screen-4 .gifts .gift__text {
  font-weight: 500;
  font-size: 2.4rem;
  padding-top: 0.5em;
}
.screens .screen-4 .gifts .gift__shop {
  font-size: 2.4rem;
  font-weight: 300;
  padding-top: 0.5em;
}
.screens .screen-4 .back {
  position: absolute;
  width: 23.6rem;
  height: 5.5rem;
  top: 7.2rem;
  left: 53rem;
  display: block;
}
.screens .screen-4 .back img {
  display: block;
  width: 100%;
}
.screens .screen-5 .text {
  position: absolute;
  top: 25rem;
  width: 100%;
  text-align: center;
  line-height: 1.2;
}
.screens .screen-5 .text-2 {
  position: absolute;
  top: 74.5rem;
  width: 100%;
  text-align: center;
  line-height: 1.2;
}
.screens .screen-5 .checkboxes {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 94rem;
  top: 119rem;
}
.screens .screen-5 .fields {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 94rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
.screens .screen-5 .fields input.field-text::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1;
  /* Firefox */
}
.screens .screen-5 .fields input.field-text:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #fff;
}
.screens .screen-5 .fields input.field-text::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #fff;
}
.screens .screen-5 .fields-1 {
  top: 35rem;
}
.screens .screen-5 .fields-2 {
  top: 84rem;
}
.screens .screen-5 .fields input.field-text {
  width: 100%;
  height: 7.5rem;
  border-style: none;
  border-radius: 0;
  color: #ffffff;
  background: transparent;
  border-bottom: 0.4rem solid #fff;
  font-size: 3.76rem;
  padding: 1rem 3.5rem;
  text-align: center;
}
.screens .screen-5 .fields input.field-text.error {
  border: 0.3rem solid #da232a;
}
.screens .screen-5 .fields input.field-button {
  width: 100%;
  height: 7.5rem;
  border-style: none;
  border-radius: 100px;
  font-size: 3rem;
  padding: 1rem 3.5rem;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}
.screens .screen-5 .field-button {
  position: absolute;
  width: 49.8rem;
  height: 11.1rem;
  top: 141rem;
  left: 50%;
  transform: translateX(-50%);
  border-style: none;
  border-radius: 0;
  display: block;
  background: url(https://santashotline.eu/assets/images/screen-5/button.png) center center no-repeat;
  background-size: contain;
  color: transparent;
  cursor: pointer;
}
.screens .screen-5 .field-button:focus {
  outline: none;
}
.screens .screen-6 .text {
  position: absolute;
  top: 21rem;
  width: 100%;
  text-align: center;
  line-height: 1.2;
}
.screens .screen-6 .messages {
  width: 148rem;
  position: absolute;
  top: 32rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3.4rem;
  font-size: 3rem;
  font-size: 3.2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
}
.screens .screen-6 .messages .message {
  border-radius: 3rem;
  border: 0.2rem solid #fff;
  text-align: center;
  padding: 2rem;
  line-height: normal;
}
.screens .screen-6 .messages .message.active,
.screens .screen-6 .messages .message:hover {
  background: #fff;
  color: #7e0219;
}
.screens .screen-6 .next {
  position: absolute;
  width: 49.8rem;
  height: 11.1rem;
  top: 147.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  display: none;
}
.screens .screen-6 .next img {
  display: block;
  width: 100%;
}
.screens .screen-7 .text {
  position: absolute;
  top: 62rem;
  width: 100%;
  text-align: center;
  line-height: 1.2;
  font-family: 'Playfair Display';
  font-size: 6.5rem;
  font-weight: bold;
  font-style: italic;
}
.screens .screen-7 .text-2 {
  position: absolute;
  top: 107rem;
  width: 100%;
  text-align: center;
  line-height: 1.2;
}
.screens .screen-8 .text {
  position: absolute;
  top: 30rem;
  width: 100%;
  text-align: center;
  line-height: 1.2;
}
.screens .screen-8 .prizes {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 60rem;
  width: 143.5rem;
}
.screens .screen-8 .text-2 {
  position: absolute;
  top: 140rem;
  width: 150rem;
  text-align: center;
  line-height: 1.2;
  font-size: 0.5em;
  left: 50%;
  transform: translateX(-50%);
}
.screens .screen-8 .next {
  position: absolute;
  width: 49.8rem;
  height: 11.1rem;
  top: 135rem;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}
.screens .screen-8 .next img {
  display: block;
  width: 100%;
}
.screens .screen.active {
  opacity: 1;
  pointer-events: all;
}
#msg-dialog {
  border: none;
  border-radius: 2rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  padding: 4rem;
  background: #7e0219;
}
#msg-dialog::backdrop {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
}
#msg-dialog .dialog-content {
  font-size: inherit;
  text-align: center;
  color: #fff;
  padding-bottom: 5rem;
}
#msg-dialog .dialog-buttons {
  margin-top: 15px;
  text-align: center;
}
#msg-dialog .button {
  color: #fff;
  border-radius: 2rem;
  border: 0.2rem solid #fff;
  font-family: 'Playfair Display';
  font-weight: bold;
  font-style: italic;
  font-size: 6.8rem;
  background: transparent;
  width: 49.8rem;
  height: 11.1rem;
  text-transform: lowercase;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  cursor: pointer;
}
.checkbox {
  text-align: left;
  padding-bottom: 3rem;
}
.checkbox input {
  display: none;
}
.checkbox label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.65em;
  color: #fff;
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}
.checkbox label div {
  flex: 0 0 4rem;
  display: block;
  height: 4rem;
  width: 4rem;
  border: 2px solid #fff;
  margin-right: 2rem;
}
.checkbox label a {
  color: inherit;
}
.checkbox.field-error label {
  color: #B70000;
}
.checkbox.field-error label div {
  border-color: #fff;
}
.checkbox input:checked ~ label div {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNCAyNCIgaGVpZ2h0PSIyNHB4IiBpZD0iTGF5ZXJfMSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNHB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMS42NTIsMy4yMTFjLTAuMjkzLTAuMjk1LTAuNzctMC4yOTUtMS4wNjEsMEw5LjQxLDE0LjM0ICBjLTAuMjkzLDAuMjk3LTAuNzcxLDAuMjk3LTEuMDYyLDBMMy40NDksOS4zNTFDMy4zMDQsOS4yMDMsMy4xMTQsOS4xMywyLjkyMyw5LjEyOUMyLjczLDkuMTI4LDIuNTM0LDkuMjAxLDIuMzg3LDkuMzUxICBsLTIuMTY1LDEuOTQ2QzAuMDc4LDExLjQ0NSwwLDExLjYzLDAsMTEuODIzYzAsMC4xOTQsMC4wNzgsMC4zOTcsMC4yMjMsMC41NDRsNC45NCw1LjE4NGMwLjI5MiwwLjI5NiwwLjc3MSwwLjc3NiwxLjA2MiwxLjA3ICBsMi4xMjQsMi4xNDFjMC4yOTIsMC4yOTMsMC43NjksMC4yOTMsMS4wNjIsMGwxNC4zNjYtMTQuMzRjMC4yOTMtMC4yOTQsMC4yOTMtMC43NzcsMC0xLjA3MUwyMS42NTIsMy4yMTF6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMyMzFmMjAiLz48L3N2Zz4=");
  background-color: #fff;
  background-size: contain;
}