@font-face {
  font-family: "Effra-Italic";
  font-weight: normal;
  font-style: italic;
  src: url("./fonts/NYLICEffra-Italic.woff2") format("woff2"), url("./fonts/NYLICEffra-Italic.woff") format("woff"), url("./fonts/NYLICEffra-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Effra-Bold";
  font-weight: bold;
  font-style: normal;
  src: url("./fonts/NYLICEffra-Bold.woff2") format("woff2"), url("./fonts/NYLICEffra-Bold.woff") format("woff"), url("./fonts/NYLICEffra-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Effra-Bold-Italic";
  font-weight: bold;
  font-style: italic;
  src: url("./fonts/NYLICEffra-BoldItalic.woff2") format("woff2"), url("./fonts/NYLICEffra-BoldItalic.woff") format("woff"), url("./fonts/NYLICEffra-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Open_24";
  font-weight: normal;
  font-style: normal;
  src: url("./fonts/Open_24_Display_St.ttf") format("truetype");
}
.permissionIconIos,
.permissionIcon {
  background-image: url(./img/allow_camera.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 15%;
  margin-top: 10% !important;
}
.permissionIconIos .foreground-image,
.permissionIcon .foreground-image {
  display: none !important;
}

.desktop-hint {
  display: none;
}

#loadBackground {
  display: none !important;
}

#error_msg_android_almost_there,
#error_msg_web_assembly_android,
#error_msg_web_assembly_ios,
#error_msg_open_in_safari,
#error_unknown_webview,
#error_msg_device {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #000000;
  background-size: cover;
  background-position: center top;
  background-image: url(./img/bg.png);
}

#linkOutViewAndroid,
#copyLinkViewAndroid,
#deviceMotionErrorApple,
#userPromptError,
#motionPermissionsErrorApple,
#cameraSelectionWorldTrackingError,
#microphonePermissionsErrorAndroid,
#microphonePermissionsErrorApple,
#cameraPermissionsErrorAndroid,
#cameraPermissionsErrorApple,
#requestingCameraPermissions {
  background: transparent !important;
}

body {
  background-color: #333;
  margin: 0;
  position: fixed;
  font-family: "Effra-Regular";
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  text-align: center;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.backgroundImage, .ui .finish .playAgain, .ui .allowCamera, .ui .instructions, .ui .registration, #loadingContainer {
  background-image: url(./img/bg.png);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #000000;
}
.backgroundImage .bottomBG, .ui .finish .playAgain .bottomBG, .ui .allowCamera .bottomBG, .ui .instructions .bottomBG, .ui .registration .bottomBG, #loadingContainer .bottomBG {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background-image: url(./img/bottom_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: top;
  z-index: -1000;
}

#loadingContainer {
  position: fixed;
}

#camerafeed {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed !important;
}

div {
  outline-style: none;
}

.fullScreenElement, .ui .finish .leaderboard, .ui .finish .playAgain .frameCont .frame, .ui .finish .playAgain, .ui .finish .overCont .overLabelCont, .ui .finish .overCont, .ui .finish .confetti, .ui .finish, .ui .gameUI .center, .ui .gameUI, .ui .countdown, .ui .envSetup, .ui .allowCamera, .ui .instructions, .ui .registration .frame, .ui .registration, .ui .loading, .ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: all;
}

.fullScreenSmallElement, .ui .finish .leaderboard .frame, .ui .countdown .frame, .ui .envSetup .frame, .ui .allowCamera .frame, .ui .instructions .frame, .ui .loading .frame {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
}

.headerElement, .ui .finish .playAgain .header, .ui .instructions .frame .header {
  background-image: url(./img/header.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  max-width: 731px;
  max-height: 723px;
}

.centerContainer, .ui .finish .playAgain, .ui .finish .overCont .overLabelCont, .ui .finish .overCont, .ui .gameUI .bottom .bar .cont .leagueCont, .ui .gameUI .bottom .bar .cont, .ui .gameUI .bottom, .ui .gameUI .center .labelContainer, .ui .gameUI .center, .ui .countdown .frame .cont .ready, .ui .countdown .frame .cont, .ui .countdown .frame, .ui .envSetup .frame, .ui .allowCamera .frame, .ui .instructions .frame, .ui .loading .frame {
  display: flex;
  justify-content: center;
  align-items: center;
}

.close {
  width: 20px;
  height: 20px;
}

.ui {
  pointer-events: none;
  position: fixed;
  z-index: 300;
}
.ui .toggleSound, .ui .soundOff, .ui .soundOn {
  position: absolute;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  right: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  z-index: 10;
  pointer-events: all;
  cursor: pointer;
}
.ui .soundOn {
  background-image: url(./img/Mute_Icon_white.svg);
}
.ui .soundOn.ios {
  background-image: url(./img/Speaker_Icon_white.svg);
}
.ui .soundOff {
  background-image: url(./img/Speaker_Icon_white.svg);
}
.ui .soundOff.ios {
  background-image: url(./img/Mute_Icon_white.svg);
}
.ui .loading {
  background-color: #000000;
  z-index: 100;
}
.ui .loading .frame {
  flex-direction: column;
  justify-content: space-evenly;
}
.ui .loading .frame .loadingAnimation {
  width: 25%;
  height: 50%;
  margin-top: -25%;
  min-width: 200px;
}
.ui .loading .frame .loadingAnimation .ball, .ui .loading .frame .loadingAnimation .ball_mirror {
  background-image: url(./img/loading_sprite.png);
  background-repeat: no-repeat;
  background-size: 600%;
  background-position-y: 100%;
  width: 100%;
  height: 100%;
  -webkit-animation: moveX 1s steps(5) infinite;
          animation: moveX 1s steps(5) infinite;
}
.ui .loading .frame .loadingAnimation .ball_mirror {
  transform: scaleY(-1);
  filter: blur(10px);
  opacity: 0.3;
}
@-webkit-keyframes moveX {
  from {
    background-position-x: 0%;
  }
  to {
    background-position-x: 100%;
  }
}
@keyframes moveX {
  from {
    background-position-x: 0%;
  }
  to {
    background-position-x: 100%;
  }
}
.ui .loading .frame .labelCont {
  width: 100%;
  height: 25%;
  margin-top: 20%;
}
.ui .loading .frame .labelCont .loadingText {
  background-image: url(./img/loading_text.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 20px;
}
.ui .loading .frame .labelCont .loadingValue {
  margin-top: 10px;
  color: #ffffff;
  text-align: center;
  font-family: "Open_24";
  font-size: 50px;
  letter-spacing: 2px;
}
.ui .loading .frame .loadingCont {
  display: none;
  width: 30%;
  height: 20px;
  border-radius: 10px;
  border: solid 2px #ffffff;
  position: relative;
}
.ui .loading .frame .loadingCont .loadingContInner {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  left: 5px;
  top: 5px;
  border-radius: 10px;
  position: absolute;
  overflow: hidden;
}
.ui .loading .frame .loadingCont .loadingContInner .loadingBar {
  position: absolute;
  background-color: #ffffff;
  width: 0%;
  height: 100%;
  border-radius: 10px;
  transition: width 0.1s;
}
.ui .loading .logo_8th {
  background-image: url(./img/8th_wall.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 200px;
  height: 37px;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}
.ui .registration {
  display: none;
  z-index: 100;
}
.ui .instructions {
  display: none;
  z-index: 100;
}
.ui .instructions .frame {
  top: 2%;
  height: 96%;
  flex-direction: column;
  justify-content: space-between;
}
.ui .instructions .frame .header {
  height: 20%;
}
.ui .instructions .frame .instruction {
  background-image: url(./img/instructions.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 65%;
  max-width: 731px;
  max-height: 723px;
}
.ui .instructions .frame .playButton {
  background-image: url(./img/playButton.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 10%;
  max-width: 731px;
  max-height: 80px;
}
.ui .allowCamera {
  display: none;
  z-index: 100;
}
.ui .allowCamera .frame {
  flex-direction: column;
  justify-content: space-between;
}
.ui .allowCamera .frame .info {
  background-image: url(./img/allow_camera.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 20%;
  max-width: 731px;
  max-height: 200px;
}
.ui .allowCamera .frame .cont {
  width: 100%;
  height: 70%;
  position: relative;
  transform: scale(0.6);
}
.ui .allowCamera .frame .logo {
  background-image: url(./img/8th_wall.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 10%;
  max-width: 731px;
  max-height: 50px;
}
.ui .envSetup {
  display: none;
  z-index: 100;
}
.ui .envSetup .frame {
  flex-direction: column;
}
.ui .envSetup .frame .info {
  background-image: url(./img/tap_on_floor.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 20%;
  max-width: 731px;
  max-height: 200px;
  margin-top: -10%;
  margin-bottom: 20%;
}
.ui .envSetup .frame .arrowCont {
  width: 100%;
  height: 8%;
  max-width: 731px;
  max-height: 100px;
}
.ui .envSetup .frame .arrowCont .arrow {
  background-image: url(./img/arrow.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  -webkit-animation: arrowMove 2s;
          animation: arrowMove 2s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
@-webkit-keyframes arrowMove {
  0% {
    margin-top: 0px;
  }
  50% {
    margin-top: -100px;
  }
  100% {
    margin-top: 0px;
  }
}
@keyframes arrowMove {
  0% {
    margin-top: 0px;
  }
  50% {
    margin-top: -100px;
  }
  100% {
    margin-top: 0px;
  }
}
.ui .countdown {
  display: none;
  background-color: rgba(0, 0, 0, 0.3);
}
.ui .countdown .frame .cont {
  color: #ffffff;
  width: 100%;
  height: 50%;
}
.ui .countdown .frame .cont .ready {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: space-around;
  display: none;
}
.ui .countdown .frame .cont .ready .label {
  background-image: url(./img/get_ready.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 200px;
}
.ui .countdown .frame .cont .ready .value {
  margin-top: 10px;
  color: #ff0000;
  text-align: center;
  font-family: "Open_24";
  font-size: 100px;
}
.ui .countdown .frame .cont .go {
  background-image: url(./img/go.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100px;
}
.ui .gameUI {
  display: none;
  pointer-events: none;
}
.ui .gameUI .top {
  width: 100%;
  height: 100px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ui .gameUI .top .timer {
  font-family: "Open_24";
  width: 50px;
  height: 50px;
  font-size: 60px;
  line-height: 50px;
  position: relative;
  text-align: right;
  display: none !important;
}
.ui .gameUI .top .timer .inactive {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.3);
}
.ui .gameUI .top .timer .inactive .digit {
  width: 50%;
  height: 100%;
}
.ui .gameUI .top .timer .time {
  position: absolute;
  width: 100%;
  height: 100%;
  color: red;
  display: flex;
  justify-content: space-between;
}
.ui .gameUI .top .timer .time .digit {
  width: 50%;
  height: 100%;
}
.ui .gameUI .bonus {
  position: fixed;
  width: 30%;
  height: 30%;
  top: 22%;
  left: 8%;
}
.ui .gameUI .bonus .title {
  background-image: url(./img/3inarow.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 100%;
  height: 45%;
  margin-bottom: 5%;
  transition: all 0.3s;
}
.ui .gameUI .bonus .titleHidden {
  transform: translateY(-200px);
  opacity: 0;
}
.ui .gameUI .bonus .fires {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 50%;
}
.ui .gameUI .bonus .fires .fire {
  background-image: url(./img/fire_icon.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 30%;
  height: 100%;
  transition: all 0.3s;
}
.ui .gameUI .bonus .fires .fireHidden {
  transform: translateY(200px);
  opacity: 0;
}
.ui .gameUI .center {
  pointer-events: none;
}
.ui .gameUI .center .labelContainer {
  transform-origin: center center;
  position: relative;
}
.ui .gameUI .center .labelContainer .text {
  position: absolute;
  text-shadow: #e0e0e0 1px 1px 0;
  color: #ffffff;
  font-size: 60px;
  text-transform: uppercase;
  font-family: "Effra-Bold";
  transform-origin: center center;
  opacity: 0;
  transform: scale(0.1);
  transition: all 0.2s;
  width: 500px;
}
.ui .gameUI .center .labelContainer .show {
  opacity: 1;
  transform: scale(1);
}
.ui .gameUI .bottom {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 10px;
}
.ui .gameUI .bottom .bar {
  background-image: url(./img/bar.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  width: 420px;
  height: 110px;
  transform-origin: bottom center;
}
.ui .gameUI .bottom .bar .cont {
  width: calc(100% - 30px);
  height: 100px;
  margin-left: 15px;
}
.ui .gameUI .bottom .bar .cont .barTextBase, .ui .gameUI .bottom .bar .cont .scoreCont .value, .ui .gameUI .bottom .bar .cont .scoreCont .label, .ui .gameUI .bottom .bar .cont .leagueCont .label {
  text-transform: uppercase;
  font-family: "Effra-Bold";
  text-align: center;
  font-size: 16px;
  color: #fff;
}
.ui .gameUI .bottom .bar .cont .leagueCont {
  justify-content: flex-start;
  width: 70%;
  height: 50px;
}
.ui .gameUI .bottom .bar .cont .leagueCont .icon {
  background-image: url(./img/logos.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100px;
  height: 100px;
}
.ui .gameUI .bottom .bar .cont .leagueCont .icon2 {
  background-image: url(./img/pac12.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100px;
  height: 100px;
}
.ui .gameUI .bottom .bar .cont .leagueCont .label {
  width: calc(100% - 150px);
  font-size: 18px;
  text-align: left;
  margin-left: 25px;
  margin-top: 8px;
  line-height: 16px;
}
.ui .gameUI .bottom .bar .cont .scoreCont {
  width: 30%;
  height: 50px;
  margin-top: -30px;
}
.ui .gameUI .bottom .bar .cont .scoreCont .label {
  font-size: 16px;
}
.ui .gameUI .bottom .bar .cont .scoreCont .value {
  font-size: 40px;
}
.ui .finish {
  display: none;
}
.ui .finish .confetti {
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.8;
  background-color: #000000;
  -o-object-position: bottom;
     object-position: bottom;
}
.ui .finish .overCont .overLabelCont .over {
  background-image: url(./img/game_over.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100px;
}
.ui .finish .playAgain {
  flex-direction: column;
  justify-content: space-between;
}
.ui .finish .playAgain .header {
  height: 20%;
  max-width: unset;
}
.ui .finish .playAgain .frameCont {
  position: relative;
  width: 100%;
  height: calc(80% - 10px);
  margin-top: 10px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.ui .finish .leaderboard {
  position: relative;
}
.ui .finish .leaderboard .frame {
  border: solid 3px #ffffff;
  overflow-y: scroll;
  overflow-x: hidden;
}
.ui .finish .leaderboard .close {
  cursor: pointer;
  position: absolute;
  background-image: url(./img/X.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
  top: calc(10% - 30px);
  right: calc(10% - 30px);
}/*# sourceMappingURL=style.css.map */