@font-face {
  font-family: "Graphik-Semibold";
  src: url("api/css/Graphik-Semibold.woff") format("woff"),
       url("api/css/Graphik-Semibold.ttf") format("truetype"),
       url("api/css/Graphik-Semibold.eot") format("opentype");
}
@font-face {
  font-family: "Graphik-Regular";
  src: url("api/css/Graphik-Regular.woff") format("woff"),
       url("api/css/Graphik-Regular.ttf") format("truetype"),
       url("api/css/Graphik-Regular.eot") format("opentype");
}
@font-face {
  font-family: "Graphik-Medium";
  src: url("api/css/Graphik-Medium.woff") format("woff"),
       url("api/css/Graphik-Medium.ttf") format("truetype"),
       url("api/css/Graphik-Medium.eot") format("opentype");
}
html, body {
  overflow: hidden !important;
  background-color: black;
}
body {
  background: url("https://cdn.8thwall.com/web/img/almostthere/v2/poweredby-horiz-white-2.svg") scroll no-repeat -4000px -4000px black;
  background-size: 40%;
}
body.models-loading {
  background-position: 50% 75%;
}
body, iframe#api {
  position: fixed !important;
  width: 100%;
  height: 100%;
  height: calc( 100% + 1px ) !important;
  /*height: calc( ( var(--vh, 1vh) * 100 ) + 1px ) !important;*/
  margin: 0px;
  padding: 0px;
  border: 0px;
  top: -1px;
  left: 0;
}
canvas#camerafeed,
#loadingContainer {
  opacity: 0.0;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
}
#loadingContainer {
  z-index: 800;
  font-family: 'Graphik-Regular', sans-serif !important;
}
.permission-error,
#deviceMotionErrorApple,
#copyLinkViewAndroid,
#linkOutViewAndroid,
#microphonePermissionsErrorAndroid,
#cameraPermissionsErrorApple,
#microphonePermissionsErrorApple,
#requestingCameraPermissions,
#cameraPermissionsErrorAppleMessage,
#microphonePermissionsErrorAppleMessage {
  color: black !important;
  background-color: white !important;
  font-family: 'Graphik-Regular', sans-serif !important;
}
.permission-error *:not(a),
#deviceMotionErrorApple *:not(a),
#copyLinkViewAndroid *:not(a),
#linkOutViewAndroid *:not(a),
#microphonePermissionsErrorAndroid *:not(a),
#cameraPermissionsErrorApple *:not(a),
#microphonePermissionsErrorApple *:not(a),
#requestingCameraPermissions *:not(a),
#cameraPermissionsErrorAppleMessage *:not(a),
#microphonePermissionsErrorAppleMessage *:not(a) {
  color: black !important;
  text-align: center;
}
#loadingContainer > * h1,
#loadingContainer > * h2,
#loadingContainer > * h3 {
  font-family: 'Graphik-Semibold', sans-serif !important;
}
.error-page-logo {
  background: url("https://053c2894479228e9668c-9c0ff5e0b4532ac219680d81892f6a64.ssl.cf5.rackcdn.com/error-logo-2.jpg") scroll no-repeat center center;
  background-size: cover;
  display: block;
  transform: translateX(-50%);
  width: calc(496px * 0.8);
  height: calc(116px * 0.8);
  position: absolute;
  top: 3%;
  left: 50%;
}
.play-2d-game {
  color: #000AD2 !important;
  padding: 15px 30px;
  text-decoration: none;
  display: block;
  margin: 30px 0 0 0;
  font-family: 'Graphik-SemiBold', sans-serif !important;
  font-size: 1.75rem;
}
.permission-error > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}
#cameraPermissionsErrorApple .refresh-link {
  display: block;
  color: white !important;
  background-color: #000AD2;
  text-decoration: none;
  padding: 15px 30px;
  margin: 15px 0 0 0;
  font-family: 'Graphik-SemiBold', sans-serif !important;
}

#cameraPermissionsErrorApple .permissionIconIos {
  
}
#cameraPermissionsErrorApple .permissionIconIos img {
  visibility: hidden;
  height: 9vw;
}
#cameraPermissionsErrorApple .bottom-message {
  bottom: 4vh;
}

#motionPermissionsErrorApple {
padding-top: calc(116px * 0.8);
}



body.show-loading-container #loadingContainer {
  opacity: 1.0;
}





body.ar-loaded canvas#camerafeed,
body.ar-loaded #loadingContainer {
  opacity: 1.0;
}
iframe#api {
  pointer-events: auto;
  z-index: 920;
  opacity: 0.0;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  background-color: transparent;
}
body.disable-api-touch iframe#api {
  pointer-events: none;
}
body.enable-api-touch iframe#api {
  pointer-events: auto;
}
.visible-on-placed {
  display: none;
}
body.placed .visible-on-placed {
  display: block;
}
.visible-on-gameplay {
  display: none;
}
body.gameplay .visible-on-gameplay {
  display: block;
}
.visible-on-video-playing {
  display: none;
}
body.video-playing .visible-on-video-playing {
  display: block;
}
#skip-video,
#mute-toggle {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 2;
  color: white;
  padding: 10px;
  width: 88px;
  height: 20px;
  line-height: 44px;
  color: white;
  padding: 10px 30px;
  text-align: center;
}
#skip-video {
  background: url("https://053c2894479228e9668c-9c0ff5e0b4532ac219680d81892f6a64.ssl.cf5.rackcdn.com/skip.png") scroll no-repeat right center transparent;
  background-size: contain;
  z-index: 9999999;
}
#mute-toggle {
  right: auto;
  left: 15px;
  width: 44px;
  height: 44px;
  background-image:
    url("https://053c2894479228e9668c-9c0ff5e0b4532ac219680d81892f6a64.ssl.cf5.rackcdn.com/sound-on.svg"),
    url("https://053c2894479228e9668c-9c0ff5e0b4532ac219680d81892f6a64.ssl.cf5.rackcdn.com/sound-off.svg");
  background-position: 0px 0px, 0px 44px;
  background-repeat: no-repeat, no-repeat;
  background-color: transparent;
  background-attachment: scroll, scroll;
  padding: 0;
  z-index: 9999999;
}
body.showing-results #mute-toggle {
  display: none !important;
}
body.mute #mute-toggle {
  background-position: 0px -44px, 0px 0px;
}
.input {
  white-space: nowrap;
}
#loading {
  position: fixed;
  width: 200px;
  height: 20px;
  top: 50%;
  left: 50%;
  border: 2px solid white;
  transform: translate( -50%, -50% );
  border-radius: 50px;
  pointer-events: none;
  z-index: 1;
}
#loading::before {
  content: "";
  width: calc(0% - 8px);
  width: calc(var(--loaded, 0%) - 8px);
  height: calc(100% - 8px);
  background-color: white;
  border-radius: 50px;
  position: absolute;
  left: 4px;
  top: 4px;
  transition: width 0.1s;
}
video {
  background-color: transparent !important;
}
.hint {
  font-family: 'Graphik-Semibold', sans-serif !important;
  opacity: 0;
  position: fixed;
  bottom: 30px;
  left: 50%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  z-index: 900;
  color: white;
  transform: translateX(-50%);
  line-height: 1em;
  font-size: 1em;
  text-align: center;
  opacity: 1.0;
  pointer-events: none;
}
.hint.red {
  color: red;
  opacity: 1.0;
}
.hint.blue {
  color: #000AD2;
  opacity: 1.0;
}
.hint.show {
  opacity: 0.0;
  color: white;
  transition: opacity 1.5s ease-out 1s, color 2.5s ease-out 1s;
  -webkit-transition: opacity 1.5s ease-out 1s, color 2.5s ease-out 1s;
}