.loading {
  display: none;
}

#loading-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("../assets/common/loading_and_splash/background_landscape.png");
  background-size: cover;
  background-position: 50% 80%;

  z-index: -2;

  @media @portrait {
    background-image: url("../assets/common/loading_and_splash/background_portrait.png");
    background-position: 50% 60%;
  }

  img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-48%);

    @media @landscape {
      top: 10%;
      max-height: 16vh;
      max-width: 50vw;
    }

    @media @portrait {
      top: 20%;
      max-width: 80vw;
      transform: translate(-48%, -70%);
    }
  }

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

    @media @landscape {
      bottom: 8%;
    }

    @media @portrait {
      bottom: 15%;
    }

    .loading-bar-background {
      @media @landscape {
        height: 12vh;
      }

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

    .loading-bar-fill-mask {
      background-image: url("../assets/common/loading_and_splash/loading.png");
      position: absolute;
      overflow: hidden;
      background-repeat: repeat-x;
      background-size: auto 100%;
      
      @media @landscape {
        top: 3.5vh;
        left: 3.2vh;
        height: 4.96vh;
        width: 80vh; 
      }

      @media @portrait {
        top: 4.55vw;
        left: 4vw;
        height: 6.44vw;
        width: 80vw;
      }
    }
  }
}