@font-face {
  font-family: "Primary";
  font-weight: 400;
  src: url("../fonts/ApercuPro-Regular.woff2");
  font-display: swap;
}

@font-face {
  font-family: "Primary";
  font-weight: 700;
  src: url("../fonts/ApercuPro-Bold.woff2");
  font-display: swap;
}

@font-face {
  font-family: "Secondary";
  font-weight: 400;
  src: url("../fonts/Gotham-Medium.woff2");
  font-display: swap;
}

@font-face {
  font-family: "Secondary";
  font-weight: 700;
  src: url("../fonts/Gotham-Black.woff2");
  font-display: swap;
}

:root,
::before,
::after {

  --color-primary: #ed1c24;
  --color-accent: #FECA45;
  --color-green: #1da919;
  --transition-duration: 300ms;
  --grid-container-max-width: 112.5rem;

}

.font-secondary {
  font-family: "Secondary";
}

.color-accent {
  color: var(--color-accent);
}

.text-uppercase {

  text-transform: uppercase;

}

[style*="--line-height"] {
  line-height: var(--line-height);
}

.line-height-1 {

  line-height: 1;

}

.cta {

  padding: 1rem 3rem;
  transition: var(--transition);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  outline: none;
  font-weight: 700;
  font-family: "Secondary";
  cursor: pointer;
  border-radius: 3rem;

}

.cta.cta--primary {
  width: 100%;
  background: var(--color-primary);
  color: var(--color-white);
}

.cta.cta--accent {

  background: var(--color-accent);
  color: var(--color-primary);

}

body.campaign {

  color: var(--color-white);

}

body[data-market="carrefour"] [data-display-for]:not([data-display-for='carrefour']),
body[data-market="kaufland"] [data-display-for]:not([data-display-for='kaufland']),
body[data-market="mega"] [data-display-for]:not([data-display-for='mega']),
body[data-market="penny"] [data-display-for]:not([data-display-for='penny']),
body[data-market="lidl"] [data-display-for]:not([data-display-for='lidl']) {
  display: none !important;
}

.content-1 {
  padding: 10vh 0;
}

/* .content-2 .content-container {
  padding: 5vh 2rem;
} */


.content-2 .campaign__menu {
  background: var(--color-white);
  color: var(--color-primary);
  padding: .75rem 0;
  border-radius: 0 0 2rem 2rem;
  position: relative;
  z-index: 99;
  text-transform: uppercase;
}

.content-2 .campaign__menu .hover-underline::after {
  background: var(--color-primary);
}

.content-2 .campaign__menu .btn-back {
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: .25rem;
}

.content-2 .campaign__menu .btn-back svg {
  height: 1.2rem;
  width: .6rem;
  margin-top: .1rem;
}

.campaign__title {
  position: relative;
  padding-left: 3rem;
}

.campaign__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: -6rem;
  height: calc(100% + 12rem);
  width: 14rem;
  background: var(--color-primary);
  z-index: -1;
}

.content-container {
  background: rgba(0, 0, 0, .75);
  padding: 5vh 2rem;
  border-radius: 2rem;
  margin-top: -.125rem;
  position: relative;
}

.content-container.content-container--2,
.content-container.content-container--3 {
  padding: 5vh 1rem;
  border-radius: 0 0 2rem 2rem;
}

.content-container .market-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  padding: 2rem 2rem 3rem 2rem;
  border-radius: 1rem;
  position: relative;
}

.content-container .market-container::after {
  content: attr(data-period);
  position: absolute;
  left: 50%;
  bottom: 1rem;
  text-align: center;
  width: 100%;
  transform: translateX(-50%);
  color: var(--color-primary);
  font-weight: 700;
}

.content-container .market-container img {
  height: 7rem;
  transition: var(--transition);
  object-fit: contain;
}

/* .content-container .cta {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  white-space: nowrap;
  margin-top: 0;
} */

.content-container .step {
  text-align: center;
  font-size: 1.125rem;
}

.content-container .step::before {
  content: attr(data-step);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-green);
  line-height: 1;
  height: 2rem;
  width: 2rem;
  font-weight: 700;
  border-radius: 50%;
  color: var(--color-white);
  margin-bottom: 1rem;
  margin-left: calc(50% - 1rem);
}

.market-footer {
  font-size: .875rem;
  margin-top: 1rem;
  line-height: 1rem;
}

.market-footer .market-footer__img {
  min-height: 4rem;
  height: 4rem;
}

.campaign__background {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  object-fit: cover;
  z-index: 1;
  object-position: bottom;
  pointer-events: none;
}

.campaign__container,
.footer,
.footer * {
  position: relative;
  z-index: 3;
}

.campaign__container {
  position: relative;
}

.campaign__container form input,
.campaign__container form select {
  font-size: 1rem;
  border: none;
  outline: none;
  font-weight: 400;
  font-family: "Primary";
  font-size: 1.25rem;
  border-radius: 1rem;
  appearance: none;
  line-height: 1;
  padding: 1rem;
  height: 4rem;
  -webkit-appearance: none;
  border: solid .0625rem var(--color-white);
  color: var(--color-black);
}

.campaign__container form .file-label input {
  display: none;
}

.campaign__container form .file-label {
  cursor: pointer;
  display: flex;
  background: var(--color-white);
  color: var(--color-black);
  align-items: center;
  padding: 1rem;
  border-radius: 1rem;
  font-size: 1.25rem;
  border: solid .0625rem var(--color-white);
  height: 4rem;
}

.file-label:has(input[data-field-invalid]) {
  border-color: var(--color-error) !important;
  animation: shake 500ms linear;
}

.datepicker-cell {
  transition: var(--transition);
  color: var(--color-black);
}

.datepicker-cell.focused:not(.selected) {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

body .on-time-before,
body .on-time-after,
body[data-interval='before'] .campaign-form,
body[data-interval='after'] .campaign-form {
  display: none;
}

body[data-interval='before'] .on-time-before,
body[data-interval='after'] .on-time-after {
  display: block;
}

body .on-time-before,
body .on-time-after {
  background: var(--color-accent);
  color: var(--color-primary);
  padding: 1.5rem 0;
}

[data-interval-show-for='before'],
[data-interval-show-for='after'] {
  padding: 20vh 1rem !important;
}

body[data-interval='before'] [data-interval-show-for]:not([data-interval-show-for="before"]),
body[data-interval='on-time'] [data-interval-show-for]:not([data-interval-show-for="on-time"]),
body[data-interval='after'] [data-interval-show-for]:not([data-interval-show-for="after"]) {
  display: none;
}

.form .checkbox-virtual .checkbox-virtual__checkbox {
  border-color: var(--color-white);
}

.form-age-validation input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: center;
  padding: 0 !important;
  height: 3rem !important;
  display: block;
}

.form-age-validation button {
  height: 3rem;
  display: block;
  min-height: 3rem;
  padding: 0;
  width: 100%;
  min-width: unset !important;
}

ul {
  list-style-type: none;
}

.footer {
  background: rgba(0, 0, 0, .25);
  padding: .5rem 0;
  margin-top: 2rem;
}

.custom-modal-content,
.modal-response {
  color: var(--color-black);
}

.custom-modal-content .modal__wrapper,
.modal-response .modal__wrapper {
  padding: 0;
}

.custom-modal-content .modal__content,
.modal-response .modal__content {
  padding: 2rem;
}

.modal-response div[data-code] {
  display: none;
}

#teconsent,
#teconsent * {
  position: relative;
  z-index: 3;
}

#teconsent {
  padding: 1rem 0;
  display: flex;
  justify-content: center;
}

.img-bottle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width: 1023px) {

  .content-1-cnt {
    height: 100vh;
    position: sticky;
    top: 0;
  }

  .content-container .market-container:hover img {
    transform: scale(1.1);
  }

  .becks-logo {
    padding-left: 3rem;
  }

  .disclaimer {
    position: absolute;
    left: 0;
    bottom: 10vh;
  }

  #teconsent {
    margin-top: 1rem;
  }

  .modal-response div[data-code] {
    font-size: 1.25rem;
  }

  .hover-underline {
    position: relative;
    cursor: pointer;
  }

  .hover-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: .0625rem;
    width: 100%;
    background: var(--color-white);
    transition: var(--transition);
    transform: scaleX(0);
    transform-origin: left;
  }

  .hover-underline:hover::after {
    transform: none;
  }

  .datepicker-cell:not(.disabled):hover {
    background: var(--color-accent) !important;
    color: var(--color-primary) !important;
  }

  .large-font-64 {

    font-size: 3.75rem;

  }

  .cta {

    font-size: 1.5rem;

  }

  .cta:hover {

    border-radius: 1rem;

  }

  .swiper-container img {

    transition: var(--transition);

  }

  .swiper-container img:hover {

    transform: scale(1.05);

  }

  #teconsent {
    position: fixed !important;
    right: 1rem;
    bottom: 1rem;
  }

  .market-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .market-footer img {
    order: 2
  }

}

@media (max-width: 1023px) {

  .content-container .market-container::after {
    font-size: .75rem;
  }

  .campaign__container.campaign__container--2 {
    min-height: unset;
  }

  .campaign__container {
    height: auto !important;
    padding-top: 1rem;
  }

  .campaign__container.campaign__container--2,
  .campaign__container.campaign__container--3 {
    padding-top: 6rem;
  }

  .content-container {
    border-radius: 2rem;
    padding: 2rem;
  }

  .content-container .market-container {
    padding: 1rem 1rem 2rem 1rem;
  }

  .content-1 {
    padding: 1.5rem 0;
  }

  .disclaimer {
    margin-top: 1rem;
  }

  .cta {

    padding: .75rem;
    font-size: 1.25rem;

  }

  .logo-becks {
    max-width: 15rem;
  }

  body.campaign::after {

    opacity: .5;

  }

  #teconsent {
    background: var(--color-primary);
  }

  .campaign__title {
    padding-left: 1rem;
  }

  .campaign__title::before {
    height: calc(100% + 5rem);
    top: -2.5rem;
    width: 5rem;
  }

  body {
    background: #000;
  }

  .campaign__background {
    opacity: .5;
    object-position: 40%;
  }

  .campaign__menu {
    position: fixed !important;
    opacity: 1;
    width: 100%;
    left: 0;
    padding: 1rem 2rem !important;
    top: 0;
    transition: var(--transition);
    z-index: 99999;
    display: flex;
    justify-content: flex-end;
  }

  .campaign__menu .hamburger {
    height: 2rem;
    width: 2rem;
    position: relative;
  }

  .campaign__menu .hamburger::before,
  .campaign__menu .hamburger::after {
    content: "";
    position: absolute;
    height: .125rem;
    width: 100%;
    background: var(--color-primary);
    left: 50%;
    top: calc(50% - .0625rem);
    transition: var(--transition);
  }

  .campaign__menu .hamburger::before {
    transform: translate(-50%, -.25rem);
  }

  .campaign__menu .hamburger::after {
    transform: translate(-50%, .25rem);
  }


  .campaign__menu ul {
    position: absolute;
    background: var(--color-white);
    padding: 1rem 2rem 2rem 2rem;
    width: 100%;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
    transition: var(--transition);
    pointer-events: none;
    opacity: 0;
  }

  .campaign__menu ul li+li {
    margin-top: .5rem;
  }

  .campaign__menu[data-active] {
    border-radius: 0;
  }

  .campaign__menu[data-active] ul {
    opacity: 1;
    pointer-events: all;
  }

  .campaign__menu[data-active] .hamburger::before {
    transform: translate(-50%, 0rem) rotate(45deg);
  }

  .campaign__menu[data-active] .hamburger::after {
    transform: translate(-50%, 0) rotate(-45deg);
  }

  .market-footer {
    text-align: center;
  }

  .market-footer img {
    margin-bottom: 1rem;
  }

  .cta--penny {
    white-space: wrap !important;
    width: 80% !important;
    text-align: center;

  }

  .content-container .market-container img {
    height: 8rem;
  }

}

@media all and (min-width: 1023px) and (max-width: 1440px) {

  html {

    font-size: 75%;

  }

}

:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat)
}

.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2)
}

.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3)
}

.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay)
}

.animate__animated.animate__delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2)
}

.animate__animated.animate__delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3)
}

.animate__animated.animate__delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4)
}

.animate__animated.animate__delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5)
}

.animate__animated.animate__faster {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2)
}

.animate__animated.animate__fast {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8)
}

.animate__animated.animate__slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2)
}

.animate__animated.animate__slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3)
}

@media (prefers-reduced-motion:reduce),
print {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important
  }

  .animate__animated[class*="Out"] {
    opacity: 0
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn
}