*:focus {
  outline: none;
}

* {
  font-family: "LotteryBold" !important;
}

@font-face {
  font-family: Metropolis;
  src: url("../../media/fonts/Metropolis-Bold.otf") format("opentype");
}

@font-face {
  font-family: SourceSansPro;
  src: url("../../media/fonts/SourceSansPro-Regular.ttf") format("truetype");
}

@font-face {
  font-family: OpenSans;
  src: url("../../media/fonts/OpenSans-Bold.ttf") format("truetype");
}

@font-face {
  font-family: LotteryBold;
  src: url("../../media/fonts/Lottery-Bold.ttf") format("truetype");
}

body {
  background: url("../../media/images/mobile-background.png") no-repeat center
    center fixed !important;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: 100% 100% !important;
  margin: 0;
  overflow: hidden;
}
.hidden {
  display: none;
}

.internetexplorer #entryCode,
.msedge #entryCode {
  top: 350px;
}

.clickable_button {
  background: transparent;
  border: 0;
  padding: 10px;
  z-index: 20;
  width: 50vw;
}
.clickable_button img {
  height: 100%;
  width: 100%;
}

textarea:focus,
input:focus {
  outline: none;
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

#loader {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
}
.loader::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: prixClipFix 2s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

canvas {
  margin: 0 auto !important;
  max-height: -webkit-fill-available;
}

/* TICKET ENTRY FORM */

#message {
  background-image: none !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: fit-content !important;
  width: -moz-max-content !important;
  margin: auto !important;
  z-index: 25 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  height: fit-content !important;
  height: -moz-max-content !important;
  max-width: 100vh;
  zoom: document;
}
#message img {
  width: 88%;
  height: 45vw;
}



#message div #accept {
  height: 12vw;
  position: absolute;
  bottom: 6%;
  width: 12%;
  max-height: 100%;
  padding: 0;
  right: 4%;
  top: -25%;
}

#loader {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#loader i {
  color: white !important;
  position: initial !important;
}

#backDrop {
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  display: flex;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

#ticketEntry {
  position: relative !important;
  margin: auto;
  height: 100%;
  aspect-ratio: 9/16;
  background-color: transparent !important;
  background-image: url("../images/borderVar1.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#ticketEntry #eighteen-container {
  position: absolute;
  width: 100%;
  text-align: right;
  height: fit-content;
  margin-top: 13%;
}

#ticketEntry #logo {
  width: 100%;
  margin-top: 10%;
}

#ticketEntry #eighteen-container #eighteen {
  width: 18%;
  margin-right: 10%;
}

#ticketEntry #message-container {
  position: absolute;
  width: 100%;
  top: 70%;
}

#ticketEntry #disclaimer {
  width: 68%;
}

#ticketEntry #flare {
  width: 100%;
  display: flex;
  position: absolute;
  z-index: -1;
  top: -6%;
  z-index: -1;
}

#ticketEntry #ticket-entry-container {
  height: fit-content;
  width: 100%;
  margin-top: 10%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5%;
}

#ticketEntry #ticket-entry-container div {
  width: 100%;
  max-width: 100%;
  max-height: 30%;
}
#ticketEntry #ticket-entry-container div img {
  width: 100%;
  height: 100%;
}

#ticketEntry #ticket-entry-container #entry-code-input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 5%;
  position: relative;
  margin-top: 8%;
  padding-left: 10%;
  padding-right: 10%;
}

#ticketEntry #ticket-entry-container #entry-code-input-container #entryCode {
  position: absolute;
  width: 95%;
  max-width: 100%;
  height: auto !important;
  font-size: calc(4px + 3vh);
  background: none !important;
  font-family: "Metropolis";
  color: #fff !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0;
  top: 45%;
}
#ticketEntry #ticket-entry-container #submit-entry-container {
  width: 100% !important;
}
#ticketEntry #ticket-entry-container #submit-entry-container img {
  width: 100% !important;
  max-width: 50%;
}

#g-recaptcha {
  position: absolute;
  top: -45%;
  left: 10%;
}

#sparkle {
  width: 30%;
  position: absolute;
  left: -3%;
  margin-top: 40%;
  position: fixed;
  display: flex;
}

#sparkle2 {
  width: 30%;
  position: absolute;
  margin-top: 45%;
  right: -5%;
  rotate: 44deg;
  position: fixed;
  display: flex;
}

#sparkle3 {
  width: 30%;
  position: absolute;
  right: -8vw;
  bottom: -5vw;
  margin-top: 100px;
  position: fixed;
  display: flex;
}

#sparkle4 {
  width: 30%;
  position: absolute;
  left: 4vw;
  bottom: 10%;
  margin-top: 10%;
  rotate: 44deg;
  position: fixed;
  display: flex;
  z-index: -1;
}

#message #invalidCodeMsg {
  top: 48%;
  color: white;
  z-index: 1;
  position: absolute;
  font-size: 5vw;
  top: 0;
  padding: 10vw 10% 0px 10%;
  line-height: 1.25;
}



/* DOB ENTRY SCREEN */

#dobEntry #eighteen-container {
  position: absolute;
  width: 100%;
  text-align: right;
  height: fit-content;
  margin-top: 13%;
}

#dobEntry #logo {
  width: 100%;
  margin-top: 10%;
}

#dobEntry #playResponsibleLogo {
  width: 100%;
  position: absolute;
  bottom: 15%;
}

#dobEntry #playLogo {
  position: absolute;
  width: 40%;
  left: 10vw;
  top: 0;
}

#dobEntry #eighteen-container #eighteen {
  width: 18%;
  margin-right: 10%;
}

.red-text {
  background-color: #ff0505;
}
#dobEntry #flare {
  width: 140%;
  position: absolute;
  left: -21%;
  top: -16%;
  right: 0%;
  z-index: -1;
}

.internetexplorer #birthdate,
.msedge #birthdate {
  top: 350px;
}

#dobEntry {
  position: fixed !important;
  margin: auto;
  height: 100% !important;
  aspect-ratio: 9/16;
  background-color: transparent !important;
  background-image: url("../images/borderVar1.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#dobEntry #dob-entry-container #dob-background {
  position: relative;
  width: 94%;
  transform: scale(1, 0.95);
  /* height: 45%; */
  margin-top: -2%;
}

#dobEntry .validationContainer {
  bottom: 0 !important;
}

#dobEntry .validationContainer #validation-background {
  transform: scale(1, 0.6);
  width: 90%;
  position: absolute;
  display: flex;
}

#dobEntry .dob-container {
  display: flex;
  width: 95%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5%;
  position: relative;
  bottom: 10vh;
  font-size: 2.5vh;
  margin: auto;
  container-type: inline-size;
  zoom:document;
}

#dobEntry #dob-entry-container p {
  width: 100%;
  max-width: 100%;
  max-height: 30%;
  position: absolute;
  font-size: 4.5vw;
  
}
#dobEntry #dob-entry-container p img {
  max-width: 110%;
  max-height: 100%;
  transform: scale(0.8);
}

#dobEntry #dob-entry-container #birthdate-input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2%;
  padding-left: 10%;
  padding-right: 10%;
  top: 23%;
}

#dobEntry #dob-entry-container #birthdate-input-container #birthdate {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  height: 100% !important;
  top: 0;
  font-size: 3vh;
  background: none !important;
  font-family: "Metropolis", serif;
  color: #FFF !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center
}

#dobEntry #dob-entry-container .submit-entry-container {
  width: 100% !important;
  padding: 0 3%;
  top: 63%;
}
#dobEntry #dob-entry-container .submit-entry-container img {
  width: auto !important;
  max-width: 50%;
  cursor: pointer;
}

#dobEntry #dob-entry-container #privacyLink {
  font-size: 3.3vw;
  color: white;
  z-index: 1;
  bottom: 12%;
}

#dob-entry-container,
p {
  color: white;
  z-index: 1;
}

@media only screen and (max-width: 500px) {
  #ticketEntry {
    max-width: 100%;
  }

  #dobEntry {
    max-width: 100%;
  }

  #message div #accept {
    right: 4%;
  }

  #g-recaptcha {
    position: absolute;
    top: -45%;
    transform: scale(0.77);
    transform-origin: 0 0;
    left: 10%;
  }
}

@media only screen and (max-height: 400px) {
  #dobEntry #dob-entry-container #dob-background {
    height: 73%;
  }
}
@media only screen and (max-height: 680px) and (max-width: 380px ) and (-webkit-max-device-pixel-ratio: 2) {

  @supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */ 
    #dobEntry #dob-entry-container p {
      font-size: 3.5vw;
    }
  
    #dobEntry #dob-entry-container #privacyLink {
      font-size: 3vw;
    }
  
    #sparkle {
      left: 3% ;
    }
  
    #sparkle2 {
      right: 3% ;
    }
  
    #sparkle3 {
      right: 0% ;
    }
  
    #sparkle4 {
      left: 7%;
    }
  
    #message img {
      width: 74%;
      height: 45vw;
  }
  
    #message #invalidCodeMsg {
    font-size: 4.2vw;
    padding: 10% 20% 0px 20%;
  }
  
  #message div #accept {
    right: 10%;
  }

  #ticketEntry #ticket-entry-container {
    position: absolute;
    top: 30vh;
  }

  #ticketEntry #ticket-entry-container #submit-entry-container {
    width: 100% !important;
    margin-top: 7vw;
}

  
    
  }
  
 

}
/* LOADER ANIMATION */
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}