/***    Fonts    ***/
@font-face {
    font-family: 'FagoPro-XboldIta';
    src:  url('assets/fonts/FagoPro-XboldIta.woff2') format('woff2'),
          url('assets/fonts/FagoPro-XboldIta.woff') format('woff');
}
@font-face {
    font-family: 'FagoPro-Xbold';
    src:  url('assets/fonts/FagoPro-Xbold.woff2') format('woff2'),
          url('assets/fonts/FagoPro-Xbold.woff') format('woff');
}


/***    General Styles    ***/

body{
    background-color: rgb(93, 93, 93);
    background-image: url("assets/img/nussbaum-beton-bg02-1400.jpg");
}

#loadBackground {
    background-color: rgb(93, 93, 93);
    background-image: url("assets/img/nussbaum-beton-bg02-1400.jpg");
}

.absolute-fill {
    background-position: 0% 0%;
    background-position-x: 0%;
    background-position-y: 0%;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
}


#back-button {
    position: absolute;
    z-index: 5;
    left: 2vh;
    bottom: 2vh;
    max-width: 60px;
    pointer-events: auto;
}

#rotate-icon {
    position: absolute;
    z-index: 6;
    right: 2vh;
    top: 2vh;
    max-width: 60px;
}

.pulse-once { animation: pulse-once 0.4s cubic-bezier(0.785, 0.135, 0.150, 0.860) both; }
@keyframes pulse-once {
  0% {transform: scale(1);}
  50% {transform: scale(0.2);}
  100% {transform: scale(1);}
}


/***    Camera Permissions    ***/

#loadingContainer #loadBackground #loadImage{
    filter: invert(78%) sepia(31%) saturate(5169%) hue-rotate(345deg) brightness(101%) contrast(101%);
}

#loadingContainer #requestingCameraPermissions{
    width: 90%;
    left:50%;
    transform: translate(-50%, 15%);
    background: linear-gradient(90deg, #005ca9 10%, #408dcc 100%);
    box-shadow: 4px 5px 6px 0 rgba(0,0,0,0.5);
    text-transform: uppercase;
    font-family: "FagoPro-XboldIta",sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 20px;
}
#loadingContainer #requestingCameraPermissions #requestingCameraIcon{
    max-height: 30px;
}


/***    Permission error iOS   ***/

#loadingContainer #cameraPermissionsErrorApple div, #loadingContainer #cameraPermissionsErrorApple p,
#loadingContainer #microphonePermissionsErrorApple div, #loadingContainer #microphonePermissionsErrorApple p,
#loadingContainer #deviceMotionErrorApple .loading-error-header{
    width: 90%;
    background: linear-gradient(90deg, #005ca9 10%, #408dcc 100%);
    box-shadow: 4px 5px 6px 0 rgba(0,0,0,0.5);
    padding: 20px 0;
    text-transform: uppercase;
    font-family: "FagoPro-XboldIta",sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 20px;
}

#loadingContainer #cameraPermissionsErrorApple .permissionIconIos,
#loadingContainer #microphonePermissionsErrorApple .permissionIconIos{
    margin-bottom: -52px;
    margin-top: 20px;
}
#loadingContainer #cameraPermissionsErrorApple .permissionIconIos .foreground-image,
#loadingContainer #microphonePermissionsErrorApple .permissionIconIos .foreground-image{
    max-height: 35px;
}
#loadingContainer #cameraPermissionsErrorApple .bottom-message,
#loadingContainer #microphonePermissionsErrorApple .bottom-message{
    left: 50%;
    transform: translate(-50%, 0%);
}


/***    Permission error Android   ***/

#loadingContainer #cameraPermissionsErrorAndroid div, #loadingContainer #cameraPermissionsErrorAndroid p,
#loadingContainer #microphonePermissionsErrorAndroid div, #loadingContainer #microphonePermissionsErrorAndroid p,
#loadingContainer #copyLinkViewAndroid #error_text_header_unknown,
#loadingContainer #userPromptError h1,
#loadingContainer #motionPermissionsErrorApple h1{
    width: 90%;
    background: linear-gradient(90deg, #005ca9 10%, #408dcc 100%);
    box-shadow: 4px 5px 6px 0 rgba(0,0,0,0.5);
    padding: 12px 0;
    text-transform: uppercase;
    font-family: "FagoPro-XboldIta",sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 20px;
}

#loadingContainer #cameraPermissionsErrorAndroid .permissionIcon,
#loadingContainer #microphonePermissionsErrorAndroid .permissionIcon{
    margin-bottom: -11px;
    max-height: 50px;
}

#loadingContainer #cameraPermissionsErrorAndroid .loading-error-header,
#loadingContainer #microphonePermissionsErrorAndroid .loading-error-header{
    text-align: center;
}

#loadingContainer #cameraPermissionsErrorAndroid .loading-error-instructions,
#loadingContainer #microphonePermissionsErrorAndroid .loading-error-instructions,
#loadingContainer #microphonePermissionsErrorAndroid .loading-error-instructions .highlight{
    font-family: "FagoPro-Xbold",sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 16px;
}

#loadingContainer #cameraPermissionsErrorAndroid .loading-error-instructions > li::before,
#loadingContainer #microphonePermissionsErrorAndroid .loading-error-instructions > li::before{
    background: linear-gradient(90deg, #005ca9 10%, #408dcc 100%);
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
}

#loadingContainer #linkOutViewAndroid #open_browser_android,
#loadingContainer #copyLinkViewAndroid #copy_link_android{
    font-family: "FagoPro-Xbold",sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 20px;
    background-color: #FF9F19;
} 

#loadingContainer #copyLinkViewAndroid #app_link{
    background: linear-gradient(90deg, #005ca9 10%, #408dcc 100%);
    font-family: "FagoPro-Xbold",sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 16px;
}

#cameraPermissionsErrorAndroid.absolute-fill, #microphonePermissionsErrorAndroid.absolute-fill{     
    padding-top: 30vh !important;
    padding-bottom: 15vh !important;
}

#cameraPermissionsErrorAndroid  .loading-error-instructions > li{
    margin-bottom: 30px;
}

/* Landscape */
@media screen and (orientation:landscape) {
     #cameraPermissionsErrorAndroid .loading-error-instructions li::before, 
     #microphonePermissionsErrorAndroid .loading-error-instructions li::before {
        width: 20px !important;
        height: 20px !important;
        line-height: 20px !important;
    }
    #cameraPermissionsErrorAndroid .loading-error-instructions > li,
    #microphonePermissionsErrorAndroid .loading-error-instructions > li {
        margin-bottom: 15px;
    }
    #cameraPermissionsErrorAndroid.absolute-fill, #microphonePermissionsErrorAndroid.absolute-fill{     
        padding-top: 70vh !important;
        padding-bottom: 15vh !important;
    }
}

/***    iOS DeviceMotion senson is disabled   ***/

#loadingContainer #deviceMotionErrorApple .loading-error-header,
#loadingContainer #userPromptError,
#loadingContainer #motionPermissionsErrorApple{
    text-align: center;
}

#loadingContainer #deviceMotionErrorApple .loading-error-instructions,
#loadingContainer #deviceMotionErrorApple .loading-error-instructions .highlight,
#loadingContainer #userPromptError p,
#loadingContainer #motionPermissionsErrorApple p,
#loadingContainer #cameraSelectionWorldTrackingError .error-text-header{
    font-family: "FagoPro-Xbold",sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 16px;
}

#loadingContainer #deviceMotionErrorApple .loading-error-instructions > li::before{
    background: linear-gradient(90deg, #005ca9 10%, #408dcc 100%);
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
}

#loadingContainer #userPromptError h1,
#loadingContainer #motionPermissionsErrorApple h1{
    width: 100%;
}

#loadingContainer #userPromptError #reloadButton{
    font-family: "FagoPro-Xbold",sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 20px;
    background-color: #FF9F19;
    margin: 0 auto;
} 

/***    Language Switch ***/

#language-switch {
    position: absolute;
    right: 2%;
    bottom: 5%;
    z-index: 100;
    font-family: "FagoPro-Xbold",sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #fff;
  }

.dropbtn {
    border: none;
    background: linear-gradient(90deg, #005ca9 10%, #408dcc 100%);
    box-shadow: 4px 5px 6px 0 rgba(0,0,0,0.5);
    padding: 5px 10px;
    cursor: pointer;
    font-weight: 400;
    font-size: 20px;
    color: #fff;
  }
  
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}
.dropbtn::after{
    color: #fff;
    position: relative;
    top: -8px;
    margin-left: 5px;
    content: '\032D';
    margin-left: 21px;
    font-size: 20px;
}
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    bottom: calc( 5% + 34px );
    right: 2%;
    background: linear-gradient(90deg, #005ca9 10%, #408dcc 100%);
    box-shadow: 4px 5px 6px 0 rgba(0,0,0,0.5);
    z-index: 100;
}

.dropdown-content a {
    color: #fff;
    padding: 5px 20px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {
    background: linear-gradient(90deg, #005ca9 10%, #408dcc 100%);
}

.show {
    display: block;
}