/* YOUR CUSTOM STYLES */
@media(max-width:767px) {
    .banner h2 {
        margin: 0;
        text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
        font-size: 3em;
    }

    ul.banner-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

        ul.banner-social-buttons > li:last-child {
            margin-bottom: 0;
        }

    .navbar img {
        display: none;
    }

    .navbar {
        min-height: 50px;
    }

    article {
        padding-top: 50px;
    }

    /* start table */

    html:not(.table-striped) .table-striped th,
    html:not(.table-striped) .table-striped td {
        font-size: 0;
        padding: 0;
        content: "";
        height: 7px;
    }

    html:not(.table-striped) table {
        position: relative;
        overflow: hidden;
    }

        html:not(.table-striped) table:before {
            content: "Table: Tap to View";
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.6);
            color: #fff;
            font-weight: bold;
            font-size: 1.6em;
            text-align: center;
            vertical-align: middle;
            z-index: 100;
            font-family: Helvetica, sans-serif;
        }

    html.table-striped table:before {
        content: "";
        display: block;
        background: #333;
        padding: 10px;
    }

    html.table-striped table:before {
        content: "Hide Tables";
        position: absolute;
        top: 0;
        left: 15px;
        padding: .5em 1em;
        margin: 10px 0;
        font-weight: bold;
        color: #fff;
        background: #000;
        border: 1px solid #fff;
    }
    /* around here we could use the HTML class to hide all other content on the page aside from the table */
    html.table-striped p, html.table-striped h1 {
        display: none;
    }


    /* end table */

}