@media only screen and (max-width: 570px) {

    #lockaccess_box table,
    #lockaccess_box thead,
    #lockaccess_box tbody,
    #lockaccess_box th,
    #lockaccess_box td,
    #lockaccess_box tr {
        display: block;
    }

        #lockaccess_box tr.hide_header {
            display: none;
        }

        #lockaccess_box th.lockaccess_title{
            text-align:center;
        }

        #lockaccess_box tr {
            border-top: 1px dotted #004052;
            border-collapse: collapse;
        }

    #lockaccess_box td {
        border-top: none;
        border-bottom: none;
    }

        #lockaccess_box td.lockaccess_cell {
            position: relative;
            padding-left: 100px;
            text-align: right;
        }

    .lockaccess_rowheader {
        border: none;
        font-family: 'Akkurat-Bold', Arial, sans-serif;
        text-align: center;
    }

     #lockaccess_box td:before {
        position: absolute;
        top: 1px;
        left: 1px;
        /* TODO use accurat bold for all captions ? */
        /*font-family: 'Akkurat-Bold', Arial, sans-serif;*/
        content: attr(data-caption);
    }


.lockaccess_icons {
    display: inline;
}