﻿
    @media screen and (max-width: 767px) {
        thead {
            display: none;
        }

        tr {
            display: block;
            position: relative;
            padding: 1.2em 0;
        }

            tr:first-of-type {
                border-top: 1px solid #ccc;
            }
        th  {
            display: none;
        }
        td {
            display: table-row;
        }

            td:before {
                content: attr(data-label);
                display: table-cell;
                font-weight: bold;
                padding: 0.2em 0.6em 0.2em 0;
                text-align: right;
            }

            td:last-child:after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                border-bottom: 1px solid #ccc;
            }
    }

    /*body {
    padding: 5%;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    line-height: 1.35;
}

h1 {
    font-size: 1.8em;
    margin-bottom: 0.8em;
}*/

    table {
        margin-bottom: 2em;
        text-align: left;
        width: 100%;
    }

    @media screen and (min-width: 768px) {
        body {
            padding: 2.5em;
        }

        td, th {
            padding: 0.4em 0.6em;
            vertical-align: top;
            /*border: 1px solid #ccc;*/
        }

        th {
            /*background: #e1e1e1;*/
            font-weight: bold;
        }
    }
