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

  .logo {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 65%;
    max-height: 65%;

    @media @portrait {
      top: 50%;
      transform: translate(-50%, -70%);
    }
  }

  .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%);
    top: 65%;


    .loading-bar-background {
      @media @landscape {
        height: 100vh;
        max-height: 22vh;
      }

      @media @portrait {
        width: 100vw;
        max-width: 80vw;
      }
    }

    .loading-bar-fill-mask {
      position: absolute;
      top: 0;
      overflow: hidden;
    }

    .loading-bar-fill {
      @media @landscape {
        height: 100vh;
        max-height: 22vh;
      }

      @media @portrait {
        width: 100vw;
        max-width: 80vw;
      }
    }
  }
}

.loading {
  display: none;
}