html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html, body {
  height: 100%;
}
canvas {
  display: block;
}
body {
  margin: 0;
}
#unity-container {
  width: 100%;
  height: 100%;
}
#unity-canvas {
  width: 100%;
  height: 100%;
  background: url('background.jpg') no-repeat center center fixed;
  background-size: cover;
  
}

#loading-logo {  /* logo*/  
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#loading-cover {  /* .loader Lo ponemos asi para que este en el centro de la pantalla*/  
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#unity-loading-bar {  /* .test   Modificar para poder centrarlo abajo y asi el logo centrarlo bien*/
  position: absolute;
  text-align: center;
  vertical-align: top;
  transform: translate(50%,-100%);
  /*top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
  width: 50px;
  height: 50px;
  /*display: flex;
  justify-content: center;
  align-items: center;*/
  animation: loader-animation 2s infinite ease-in-out;
}
#unity-logo {
  /*position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;*/

  text-align: center;
  vertical-align: top;
  transform: translate(5%,-70%);
}
#unity-logo img {
  max-width: 70%;
}
#unity-progress-bar-empty { /* .loader--inner*/
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid rgba(0, 0, 0, 0);
  border-top-color: rgb(52, 152, 219);
  animation: loader-spin 1.5s linear infinite;
}

#unity-fullscreen-button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 38px;
  height: 38px;
  background: url('fullscreen-button.png') no-repeat center;
  background-size: contain;
}

.spinner,
.spinner:after {
border-radius: 50%;
width: 5em;
height: 5em;
}
.spinner {
margin: 10px;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0);
border-right: 1.1em solid rgba(255, 255, 255, 0);
border-bottom: 1.1em solid rgba(255, 255, 255, 0);
border-left: 1.1em solid #ffffff;
transform: translateZ(0);
animation: spinner-spin 1.1s infinite linear;
}
@keyframes spinner-spin {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
}

@keyframes loader-animation {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg);
  }
}

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