@media screen and ( max-width: 900px )
{
    #phit-bar
    {
        background: #555;
        color: #fff;
        border-bottom: 1px solid #111;
    }

    *[x-phit-focussed]
    {
        background: #fff;
    }

    #phit-bar-back
    {
        border-right: 1px solid #fff;
        font-size: 1.5em;
        line-height: 50px;
        text-align: center;
        vertical-align: middle;
        z-index: 1301;
    }

        #phit-bar-back::before
        {
            content: "\025c2";
        }


    #phit-bar
    {
        box-sizing: border-box;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        padding: 5px;
    }

        #phit-bar span
        {
            display: inline-block;
        }

        #phit-bar-title
        {
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            width: 100%;
            line-height: 62px;
            vertical-align: middle;
            z-index: 1300;
        }

        #phit-bar-back
        {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 50px;
        }



    *[x-phit-focussed]
    {
        position: fixed !important;
        top: 62px !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        padding: 5px !important;
        width: auto  !important;
        height: auto !important;
    }
    
    .phit-only
    {
        
    }
}

@media screen and ( min-width: 901px )
{
    #phit-bar
    {
        display: none !important;
    }
    
    .phit-only
    {
        display: none !important;
    }
}