.loading {
    display: none
}

.loading-screen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -2;

    @media @portrait {
      background: url('../assets/common/splashscreen/background_splashscreen_portrait.jpg') center no-repeat;
      background-size: cover;
    }

    @media @landscape {
      background: url('../assets/common/splashscreen/background_splashscreen.jpg') center no-repeat;
      background-size: cover;
      background-position-y: 75%;
    }

    .relax-logo {
        position: absolute;
        max-width: 50%;
        max-height: 12%;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .logo {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        z-index: 1;
        margin-top: -3vw;
        top: 26%;
  
        @media @landscape {
          height: 25%;
        }
  
        @media (max-aspect-ratio: 5/4) {
          width: 80vw;
          height: auto;
          margin-top: -5vw;
          top: 30%;
        }
      }

      .licence {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        z-index: 1;
        top: 78%;

        
        @media @landscape {
          height: 5%;
        }
  
        @media (max-aspect-ratio: 5/4) {
          width: 70vw;
          height: auto;
          margin-top: -5vw;
          top: 70%;
        }
      }

      .loading-bar {
        position: relative;
        margin: 0 auto;
        height: 4.5%;
        max-width: 57vh;
        top: 85%;
        background-color: gray;
        text-align: center;

        @media @portrait {
            top: 73%;
            height: 6vw;
            width: 54vw;
        }
    }

    .loading-bar-frame {
        position: absolute;
        width: 100%;
        z-index: 100;
        transform: translate(-50%, -20%);
        @media @portrait {
            max-width: 100%;
        }
    }

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

        .loading-bar-fill {
            height: 98%;
            @media @portrait {
              max-width: 75vmin;
              transform: translate(-14%);
            }
        }
    }


    .loading-bar-background {
        .loading-bar-fill-mask;
        @media @portrait {
            max-width: 100%;
        }

        transform: translateX(-50%);
    }

}