/* https: //umb-4553t5.s3.eu-west-1.amazonaws.com/xxx/media/social.webp */
@import url("https://use.typekit.net/niq5vjf.css");

/* font-family: "franklin-gothic-std",
sans-serif;
font-weight: 400;
font-style: normal; */


/* Bebas */
@font-face {
  font-family: 'Budweiser-Hero';
  src: url('https://umb-4553t5.s3.eu-west-1.amazonaws.com/8862/fonts/BudweiserHero-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --max-w: 1600px;
  --bud: 'Budweiser-Hero',sans-serif;
  --franklin: 'franklin-gothic-std', sans-serif;
  --white: #ffffff;
  --red:#D90D1D;
  --grey: #6F6F6F;
}



body {
  font-family: var(--franklin);
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  color: var(--white);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background-color: var(--red);
  color: #FFF;
}



h1, h2, h3, .main-title,
.lg-title{
  font-family: var(--bud);
  line-height: normal;
}

h1 .main-title {
font-size: 35px;
}
.short-terms{
  text-align: center;
  font-family: var(--franklin);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 12px;
}

.copyright {
  font-family: var(--franklin);
  font-size: 13px;
}

.form-text{
  color: var(--grey);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}



.btn.btn-light {
  height: 48px;
  border-radius: 10px;
  background: var(--white);
  color: var(--red);
  font-size: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: all 0.2s ease;
  font-family: var(--bud);
}

.btn.btn-light:hover,
.btn.btn-light:focus,
.btn.btn-light:active,
.btn.btn-light:focus-visible,
.btn.btn-light:first-child:active,
:not(.btn-check)+.btn.btn-light:active {
  background: var(--white);
  color: var(--red);
  filter: brightness(1.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  border: none;
  outline: none;
}

.btn.btn-secondary {
  height: 37px;
  border-radius: 10px;
  background: var(--white);
  color: var(--red);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: all 0.2s ease;
  font-family: var(--bud);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active,
.btn.btn-secondary:focus-visible,
.btn.btn-secondary:first-child:active,
:not(.btn-check)+.btn.btn-secondary:active {
  background: var(--white);
  filter: brightness(1.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  border: none;
  outline: none;
  color: var(--red);
}



.form-text{
  color: #383837;
  font-size: 15px;
}

.form-control {

  color: #383837;
  background-color: #fff;
  border: none;
  border-radius: 8px;
  height: 40px;
}


 /* FORM */
  
    .form-control,
    .form-select {
      border-radius: 8px;
    }
  
    .form-floating>.form-control,
    .form-floating>.form-control-plaintext,
    .form-floating>.form-select {
      height: 40px !important;
      padding-bottom: 5px !important;
      text-align: start;
    }
  
    .form-floating>.form-control,
    .form-floating>.form-control-plaintext,
    .form-floating>.form-select {
      line-height: 1.25;
    }
  
    .form-floating>.form-select {
      /* padding-top: 12px !important; */
      padding-top: 6px !important;

    }
    .form-floating>.form-control-plaintext:focus,
    .form-floating>.form-control-plaintext:not(:placeholder-shown),
    .form-floating>.form-control:focus,
    .form-floating>.form-control:not(:placeholder-shown) {
      padding-top: 1.1rem;
      text-align: start;
    }
    .main-date {
      text-align: left !important;
    }

    .main-date::-webkit-date-and-time-value {
      text-align: left !important;
    }

    .main-date::-webkit-datetime-edit {
      text-align: left !important;
    }
  
    .form-floating>label {
      top: -8px;
    }
  
    .form-check-input {
      border-radius: 5px !important;
      width: 22px;
      height: 22px;
      border: none;
    }
  
    .form-check .form-check-input {
      margin-left: -23px;
      margin-top: 4px;
    }
  
    .form-check-label {
      padding-top: 3px !important;
      padding-left: 9px;
    }
  

.form-check-input.is-valid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
  color: inherit;
}

.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked {
  background-color: #0d6efd;
}

.form-check-input.is-valid,
.was-validated .form-check-input:valid {
  border-color: #0d6efd;
}

.age-form-select .form-select {
  height: 55px !important;
  border: 1px solid #fff;
  border-radius: 0;
  /* background-color: rgb(255 255 255 / 0%); */
  background: none;
  color: #fff;
  text-align: center;
  text-align-last: center;
  -webkit-text-align-last: center;
  padding: 0;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.16);
  background-image: none;
}
.age-form-select .form-select option {
  background-color: #fff !important;
  color: #000 !important;
}

.invalid-feedback {
  color: #ffd161;
}
.form-check-input.is-invalid~.form-check-label,
.was-validated .form-check-input:invalid~.form-check-label {
  color: #ffd161;
}

.hero-banner {
  max-width: 1300px;
}

.hero-bg {
  min-height: 170px;
  object-fit: cover;
  object-position: center;
}

.hero-content {
  width: 100%;
  top: clamp(30px, 8vw, 60px);
  z-index: 1;
}

.hero-logo {
  width: clamp(230px, 40vw, 290px);
  height: auto;
  margin-bottom: 4px;
}

.hero-headline {
  width: clamp(268px, 40vw, 320px);
  height: auto;
}

.fifa-logos{
  width: 100%;
  max-width: 200px ;
}

.tm {
  font-size: 0.55em;
  vertical-align: baseline;
  position: relative;
}

.drinkaware {
  width: clamp(160px, 20vw, 182px);
  margin: 0 auto;
}

/* Tablet */
@media (min-width: 768px) {

.fifa-logos {
    width: 100%;
    max-width: 260px;
  }

  .hero-bg {
    min-height: auto;
  }

    .hero-content {
      width: 100%;
      top: 40px;
      z-index: 1;
    }


  .hero-logo {
   width: 257px;
    margin-bottom: 8px;
  }

  .hero-headline {
    width: 268px;
  }

}

@media (min-width: 992px) {
.hero-content {
  top: clamp(35px, 25vw, 87px);
  }

  .hero-logo {
    width: 308px;
    margin-bottom: 8px;
  }

  .hero-headline {
    width: 308px;
  }
}

@media (min-width: 1200px) {

  .hero-logo {
    width: clamp(308px, 25vw, 400px);
    margin-bottom: 8px;
  }

  .hero-headline {
    width: clamp(308px, 27vw, 435px);
  }

}


.terms-buttons{
  display: none;
}
.terms .legal-buttons {
  display: none;
}
.terms .terms-buttons {
  display: block;
}


.modal-content{
  background-color: var(--red);
}

.btn-close {
  filter: invert(1);
}