.loading {
    display: none
}

.loading-screen {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -2;
    background: url('../assets/splashscreen/loading_splash_screen_3.jpg') center no-repeat;
    background-size: cover;

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

    .logo {
        position: absolute;
        height: 60%;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        @media @portrait {
            height: auto;
            width: 90%;
            max-width: auto;
            max-height: 60%;
        }
    }

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

        @media @portrait {
            top: 84%;
            height: 6.6vw;
            width: 54vw;
        }
    }

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

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

        .loading-bar-fill {
            height: 100%;
        }
    }

    .loading-bar-right-end {
        position: relative;
        right: -9%;
        top: 6%;
        background-image: url('../assets/splashscreen/loading_bar_middle_fade.png');
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: right;
        height: 104%;
        overflow: visible;

        @media @portrait {
            top: 4%;
            height: 106%;
        }
    }

    .loading-bar-background {
        .loading-bar-fill-mask;

        transform: translateX(-50%);
    }

}