#loading-screen {
    display : flex;
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;

    background     : url('@{assetPath}/textures/settings/loading_background_landscape.jpg') center no-repeat;
    background-size: cover;

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

    .logo,
    .logo-glow {
        position  : absolute;
        max-width : 100%;
        max-height: 60%;
        top       : 50%;
        left      : 50%;
        transform : translate(-50%, -50%);
    }

    .logo-glow {
        max-height: 80%;
    }

    .corner-left,
    .corner-right {
        position  : absolute;
        max-width : 30%;
        max-height: 30%;
        bottom    : 0;

        @media @portrait {
            max-width : 40%;
            max-height: 40%;
        }
    }

    .corner-left {
        left: 0;
    }

    .corner-right {
        right: 0;
    }

    .loading-bar {
        position: relative;
        width   : 100%;
        margin  : 0 auto;
        width   : 42.5vw;
        height  : 3.5vw;
        top     : 85%;

        @media @portrait {
            top   : 73%;
            width : 63.75vw;
            height: 5.25vw;
        }
    }

    .loading-bar-frame {
        position: absolute;
        top     : -1.5vw;
        left    : -2vw;
        width   : 45vw;

        @media @portrait {
            top  : -2.25vw;
            left : -3vw;
            width: 67.5vw;
        }
    }

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

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

}