#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: 42%;
    }
    @media @portrait {
      background-position: center;
      width: 70%;
      height: 50%;
    }
  }

  .loading-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    @media @landscape {
      bottom: 10%;
      width: 40vw;
      height: 8vw;
    }
    @media @portrait {
      bottom: 20%;
      width: 85vw;
    }
    .loading-bar-back {
      width: 100%;
      @media @landscape {
        height: 100%;
      }
    }
    .loading-bar-fill,
    .loading-bar-front {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .loading-bar-fill {
      background-position: 20%;
    }
  }
}

.loading {
  visibility: hidden !important;
}