@font-face { font-family: Volta; src: url('VoltaModernText-55Roman.otf'); } 

:root {
  --app-background-color: #fff;
}

body {
  font-family: Volta;
  padding: 0;
  margin: 0;
  background-color: var(--app-background-color);
  color: #0460a9;
}

h1 {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

.body-background {
  background-color: #ffffff;
}

#unity-container {
  display: flex;
  flex-flow: column;
}

#unity-canvas {
  background-color: var(--app-background-color);
  width: 100%;
  height: 93vh;
}

#side-pattern {
  background-image: url(pattern.png);
  background-repeat: repeat-y;
  padding-left: 60px;
  overflow: hidden;
  position: absolute;
  padding: 0 60px;
  height: 100%;
}

#side-shape {
  content: url(shape.png);
  position: absolute;
  height: 79%;
  width: auto;
  bottom: 0px;
  right: 0;
}

#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  width: 100%;
}

#sceneloading-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  width: 100%;
}

#unity-logo {
  height: 6.5vh;
  background: url(logo_client.png) no-repeat center;
  background-size: contain;
}

#unity-progress-bar-empty {
  width: 29vh;
  height: 1.25vh;
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
  background-color: #F2F2F4;
  border-radius: 8px;
}

#unity-progress-bar-full {
  content: url(slider_rect_gradient.png);
  width: 0%;
  height: 100%;
  margin-top: 10px;
  border-radius: 8px;
}

.unity-progress-bar-text {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #002068;
  margin-bottom: 0;
  margin-top: 0;
}

#unity-footer {
  position: absolute;
  height: 7vh;
  display: none;
  align-items: center;
  justify-content: flex-end;
  background-color: #002068;
  color: #fff;
  bottom: 0;
  width: 100%;
}

.unity-mobile #unity-footer {
  display: none;
}

#unity-webgl-logo {
  float: left;
  width: 204px;
  height: 38px;
  background: url("webgl-logo.png") no-repeat contain;
}

#unity-build-title {
  line-height: 40px;
  font-size: 1.5rem;
  margin-right: 16px;
  cursor: pointer;
}

#sceneloader {
  background-color: white;
  z-index: 10;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

#unity-fullscreen-button {
  cursor: pointer;
  margin-right: 0.5vw;
  width: 38px;
  height: 38px;
  background: url("fullscreen-button.png") no-repeat center;
  background-size: cover;
  justify-self: end;
}

/* .unity-fullscreen-button-clicked {
  background: url("fullscreen-button-clicked.png") no-repeat center !important;
  background-size: cover !important;
} */

#unity-mobile-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%);
  background: white;
  padding: 10px;
  display: none;
}

#incompatible-browser-de,
#incompatible-browser-en,
#incompatible-version-de,
#incompatible-version-en,
#incompatible-device-de,
#incompatible-device-en,
#incompatible-device-video-de,
#incompatible-device-video-en {
  display: none;
  color: rgb(0, 0, 0);
}

.youtube-video-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.youtube-video-size {
  height: 30vh;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1vh;
}

iframe {
  width: 100%;
  height: 100%;
  background-color: var(--app-background-color);
  color: var(--app-background-color);
}

.incompatibleWarning .logo,
.incompatibleVersionWarning .logo {
  width: 20vh;
  max-width: 100vw;
}

.incompatibleWarningC {
  display: grid;
  font-family: Arial, sans-serif;
  grid-template-columns: 100%;
  justify-content: center;
  justify-items: center;
  padding-top: 25vh;
}

.incompatibleVersionWarning.incompatibleWarningC {
  padding-top: 5vh;
}

.incompatibleWarning h1,
.incompatibleVersionWarning h1 {
  font-size: 2em;
  line-height: 36px;
  text-align: center;
  padding: 5vh 0 0;
}

.incompatibleWarning p,
.incompatibleVersionWarning p {
  font-size: 1.25em;
  line-height: 36px;
}

.incompatibleWarning p a,
.incompatibleVersionWarning p a {
  color: unset;
}

.download-container {
  padding: 5vh 0 0;
}

.download-container a:nth-child(1) {
  padding-right: 1vw;
}

.download-container a:nth-child(2) {
  padding-left: 1vw;
}

.update-container {
  width: 35vw;
  margin-left: -8vw;
}

.update-container img {
  width: 100%;
}

#loading {
  position: relative;
  top: 5.5vh;
  width: 10.75vh;
  height: 10.75vh;
  margin-left: auto;
  margin-right: auto;
  border: 2.2vh solid#002068;
  border-radius: 50%;
  border-top-color: #F2F2F4;
  border-left-color: #F2F2F4;
  border-right-color: #F2F2F4;
  animation: spin 1s linear infinite;
  -webkit-animation: spin 1s linear infinite;
  z-index: 100;
}

.logo-loading-circle-container {
  height: 32vh;
}

.progress-bar-text-container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.2vh;
}

.company-name-footer {
  font-weight: 500;
  text-transform: uppercase;
}

.fullscreen-text-footer {
  font-weight: 700;
}

.fullscreen,
.title {
  cursor: pointer;
}

.image-buttons {
  max-width: 256px;
}

.divider {
  border-top: 1px solid #d1d1d1;
  border-radius: 5px;
  width: 20vw;
  margin: 4vh 0;
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@media only screen and (max-height: 37.5rem) {
  #unity-fullscreen-button {
    width: 25px;
    height: 25px;
  }
  #unity-build-title {
    font-size: 1.25rem;
    line-height: 0;
  }
  #unity-build-title {
    margin-right: 8px;
  }
  #unity-canvas {
    height: 90vh;
  }
  #unity-footer {
    height: 10vh;
  }

  .unity-progress-bar-text {
    font-size: 1.25rem;
  }
}

@media only screen and (max-height: 47.5rem) and (min-height: 37.5rem) {
  #unity-fullscreen-button {
    width: 30px;
    height: 30px;
  }
  #unity-build-title {
    font-size: 1.25rem;
    line-height: 0;
  }
  #unity-build-title {
    margin-right: 8px;
  }

  .unity-progress-bar-text {
    font-size: 1.25rem;
  }
}