body { width: 100%; }

textarea.input { width: 100%; height: 200px; }

#preview {background: #ffffff; width: 100%; padding: 15px; border: 1px solid #ccc; }

form { text-align: left }

table { width: 100%; }

table.kpcc-table th {
    border-top: 1px solid #f17b21;
    background: #f5f5f5;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    font-family: "proxima-nova", "Avenir Next", "Avenir", "Lucida Grande", "Corbel", "Tahoma", Arial, sans-serif;
    font-weight: 700;
    vertical-align: bottom;
    font-size: 0.6875em;
    padding: 20px 14px 9px 5px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 -4px 0 #e8e8e8;
}
table.kpcc-table td {
    font-size: 0.725em;
    line-height: 1.1;
    padding: 10px 14px 10px 5px;
    vertical-align: top;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.07);
}
table.kpcc-table td mark {
    text-transform: uppercase;
    color: orange;
    margin-bottom: 4px;
    font-family: "freight-sans-pro", "Avenir Next", "Avenir", "Lucida Grande", "Corbel", "Tahoma", Arial, sans-serif;
    font-weight: 700;
    display: none;
}
table.kpcc-table tr td:first-child {
    font-family: "merriweatherbold", "Baskerville", "Garamond", "Cambria", Georgia, serif;
}
table.kpcc-table tr td:first-child mark {
    display: none;
}
table.kpcc-table tr td:last-child {
    box-shadow: none;
}
@media screen and (max-width: 550px) {
    table.kpcc-table {
    border-top: 3px solid #f17b21;
    border-bottom: 3px solid black;
    width: 100%}
table.kpcc-table thead {
    display: none;
}
table.kpcc-table tbody, table.kpcc-table tr, table.kpcc-table td {
    width: 100%}
table.kpcc-table td {
    box-shadow: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px 7px 10px;
    font-size: 0.8125em;
    border-bottom-color: #cfcfcf;
}
table.kpcc-table td mark {
    display: block;
}
table.kpcc-table tr td:first-child {
    font-family: "freight-sans-pro", "Avenir Next", "Avenir", "Lucida Grande", "Corbel", "Tahoma", Arial, sans-serif;
    font-size: 1.25em;
    background: #f5f5f5;
    font-weight: 700;
    border-bottom-color: gray;
    padding-top: 15px;
}
table.kpcc-table tr td:nth-child(2) {
    padding-top: 12px;
}
table.kpcc-table tr td:last-child {
    padding-bottom: 20px;
    border-bottom: 1px solid black;
}