:root {
    --menu-scaler: 1.0;
}


@media (min-aspect-ratio : 65/100) and (orientation : portrait) {
    :root {
        --menu-scaler: 0.7;
    }
}


#loadingContainer * {
  font-family: inherit;
  box-sizing: inherit;
}

#loadingContainer {
  z-index: 800;
  font-family: 'Varela-Round', sans-serif;
  background-color: #f8eecc;
}

.absolute-fill {
  position: absolute;
  height: 100%;
    width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.hidden {
  display: none !important;
}

#loadBackground {
    z-index: 10;
    position: absolute;
    pointer-events: auto;
    width: 100%;
    height: 80%;
    top: 17%;
    background: url('../images/desktop_background.png') center center no-repeat;
    background-color: #f8eecc;
    background-size: contain;
}

@media (min-aspect-ratio : 75/100) and (orientation : portrait) {
    #loadBackground {
        background-size: contain;
    }
}

#rotateBackground {
    z-index: 10;
    position: absolute;
    pointer-events: auto;
    width: 100%;
    height: 100%;
    background: url('../images/rotate_background.jpg') center center no-repeat;
    background-size: cover;
}



#loadIcon, #loadIcon2 {
    z-index: 10000;
    position: absolute;
    margin-left: -12.5vh;
    bottom: 12vh;
    left: 50%;
    width: 25vh;
    height: 25vh;
    transform: translate(-50%, -50%);
    background: url('../images/load_icon256.png') center center no-repeat;
    background-size: contain;
}



#eighthWallLogo {
    z-index: 11;
    position: absolute;
    width: 28vw;
    height: 6vw;
    right: 2%;
    top: 8vw;
    /*transform: translateX(-50%);*/
    background-repeat: no-repeat;
    background-position: center center;
    background: url('../images/powered_8th_wall.png') center center no-repeat;
    background-size: contain;
}

/*@media (min-aspect-ratio : 65/100) and (orientation : portrait) {
    #eighthWallLogo {
        top: 8.5vw;
    }
}*/

/*@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    #loadHeader {
        bottom: -10vh !important;
    }
}*/

#requestingCameraPermissions {
    z-index: 11;
    position: absolute;
    /*top: 17vh;*/
    width: 100vw;
}

#promptAllowCamera {
    display: block;
    position: absolute;
    bottom: calc( 29vh * var(--menu-scaler) );
    width: 100vw;
    height: calc( 64vw * var(--menu-scaler) );
    background: url('../images/prompt_allow.png') center center no-repeat;
    background-size: contain;
}

#promptRefresh {
    z-index: 11;
    position: absolute;
    bottom: calc( 29vh * var(--menu-scaler) );
    width: 100vw;
    height: calc( 64vw * var(--menu-scaler) );
    background: url('../images/prompt_refresh.png') center center no-repeat;
    background-size: contain;
}


#promptEnableCameraAndroid {
    z-index: 11;
    position: absolute;
    bottom: calc( 29vh * var(--menu-scaler) );
    width: 100vw;
    height: calc( 64vw * var(--menu-scaler) );
    background: url('../images/prompt_android_camera_access.png') center center no-repeat;
    background-size: contain;
}


#promptEnableMotionIOS {
    z-index: 11;
    position: absolute;
    bottom: calc( 29vh * var(--menu-scaler) );
    width: 100vw;
    height: calc( 64vw * var(--menu-scaler) );
    background: url('../images/prompt_orientation_access.png') center center no-repeat;
    background-size: contain;
}


#promptAcceptPermissions, #promptAcceptMotionsIOS {
    z-index: 11;
    position: absolute;
    bottom: calc( 29vh * var(--menu-scaler) );
    width: 100vw;
    height: calc( 64vw * var(--menu-scaler) );
    background: url('../images/prompt_accept_permissions.png') center center no-repeat;
    background-size: contain;
}


#promptAcceptMotionsIOS {
    position: absolute;
    bottom: calc( 29vh * var(--menu-scaler) );
    width: 100vw;
    height: calc( 64vw * var(--menu-scaler) );
    background: url('../images/prompt_permissions_denied.png') center center no-repeat;
    background-size: contain;
}



#cameraSelectionWorldTrackingError {
    z-index: 999;
    position: absolute;
    top: 28vh;
    width: 100vw;
    text-align: center;
    font-size: 3.7vh;
    /* background-color: white; */
}



.prompt-box-8w
{
    background-color:#ffffff;
}


.button-primary-8w
{
    background-color:#eb1f20;
}


.rotate-center {animation: rotate-center 1.1s cubic-bezier(0.785, 0.135, 0.150, 0.860) infinite both;}
@keyframes rotate-center {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}

.fade-out { animation: fade-out 0.3s linear forwards; }
@keyframes fade-out {
  0% {opacity: 1;}
  100% {opacity: 0;}
}