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

  .logo {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -60%);
    max-width: 60vw;
    max-height: 60vh;

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

  .bar-size {
    width: 42vw;
    height: 14.5vw;

    @media @portrait {
      width: 70vw;
      height: 24vw;
    }
  }

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

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

    img {
      position: absolute;
    }

    .bar-frame {
      width: 100%;
      height: 100%;
    }

    .bar-fill {
      .bar-size;
    }
  }
}