#loading-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("../assets/common/loading/loading_screen_background.jpg");
  background-size: cover;
  background-position: center;
  z-index: -2;

  .logo {
    position: absolute;
    top: 42%;
    left: 50%;
    height: auto;
    max-width: 60%;
    max-height: 80%;
    transform: translate(-50%, -50%);

    @media @portrait {
      top: 37%;
      width: 100%;
      max-width: 100%;
    }
  }

  .title {
    margin-top: 25vh;
    font-family: @font-family;
    font-size: 15vmin;
    color: #ebf830;
    text-align: center;
  }

  .loading-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6vh;

    width: 50vw;
    height: 5.9vw;

    @media @portrait {
      width: 80vw;
      height: 9.5vw;
    }

    .loading-bar-fill-mask {
      position: absolute;
      overflow: hidden;
      height: 100%;
    }

    .loading-bar-frame, .loading-bar-fill,.loading-bar-background, .loading-bar-glow {
      position: absolute;
      width: 100%;
      height: 100%;
      background-position: center top;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .loading-bar-frame {
      top: -80%;
      width: 100%;
      height: 215%;

      background-image: url("../assets/common/loading/frame.png");
      background-size: 100% 100%;
    }

    .loading-bar-background {
      width: 80%;
      left: 10%;
      background-image: url("../assets/common/loading/bar_inside.png");
    }

    .loading-bar-fill {
      overflow: hidden;
      width: 80%;
      left: 10%;
      background-position: left top;
      background-image: url("../assets/common/loading/loading_line.png");
    }

    .loading-bar-glow {
      background-image: url("../assets/common/loading/glow.png");
    }
  }
}

.loading {
  visibility: hidden !important;
}