#loading-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: cover;
  background-position: center;

  .logo {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-size: contain;
    @media @landscape {
      background-position: center top;
      width: 60%;
      height: 45%;
      max-height: 50%;
    }
    @media @portrait {
      background-position: center;
      width: 75%;
      height: 50%;
    }
  }

  .loading-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    @media @landscape {
      bottom: 10%;
      width: 35vw;
      height: 7vw;
    }
    @media @portrait {
      bottom: 25%;
      width: 75vw;
      height: 15vw;
    }
    .loading-bar-fill,
    .loading-bar-front,
    .loading-bar-limiter,
    .loading-bar-back {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .loading-bar-fill {
      background-position: left 50%;
      width: 88%;
      left: 6%;
    }
    .loading-bar-back {
      width: 80%;
      height: 60%;
      left: 10%;
      top: 20%;
    }
    .loading-bar-limiter {
      width: auto;
      height: 55%;
      top: 24%;
    }
  }
}

.loading {
  visibility: hidden !important;
}