table {
      width: 100%;
      margin: 0 auto;
      padding: 0;
      border-collapse: collapse;
      table-layout: auto;
    }

    th {
      height: 4rem;
      color: #fff;
      text-align: center;
      background-color: #5c068c;
    }
    
    tr:nth-last-of-type(odd) {
      background-color: #ded0e9;
    }

    td {
      height: 3rem;
      padding: 0 20px;
      /* text-align: left; */
      text-align: center;
      border: 1px solid #b089c6;
    }

    /* td:nth-child(3), td:nth-child(4) {
      text-align: center;
    } */

    td:nth-child(1) {
      text-align: left;
    }

    small {
      font-size: 0.75rem;
    }

    hr {
      height: 1px;
      margin: 30px auto;
      border: 0;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    }

    .intro {
      color: #004990;
      font-size: 1.25rem;
      font-weight: bold;
    }

    .note {
      font-style: italic;
    }

    .gunMoneyTable {
      margin: 0 0 30px 0;
    }

    .middleHeading {
      border-left: 1px solid #ded0e9;
      border-right: 1px solid #ded0e9;
    }

    .tweetHeading {
      border-left: 1px solid #ded0e9;
    }

    .tweetBtn {
      margin: 0;
      padding: 0;
    }

    .tweetBtn a {
      margin: 0;
      padding: 7px 15px;
      color: #fff;
      font-size: 0.8rem;
      font-weight: bold;
      text-decoration: none;
      /* background: #1ea1f2; */
      background: #5c068c;
      border-radius: 7px;
      transition: background 600ms ease-out;
    }

    .tweetBtn a:hover {
      background: #e4002b;
    }

  /*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
  only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    /* table, thead, tbody, th, td, tr {
      display: block;
    } */
    table, thead, tbody {
      display: block;
    }

    tr {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: flex-end;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td, td.paid {
      height: auto;
      margin: 10px 0;
      padding: 0 10px;
      text-align: right;
      border: none;
      border-collapse: collapse;
    }

    td::before {
      content: '';
      margin-bottom: 10px;
    }

    td.memberName { width: 100%; }

    td.memberName::before {
      width: 100%;
      display: block;
      border-bottom: 1px solid #ccc;
    }

    /* td.paid { text-align: left;} */

    td.tweetBtn {
      /* align-self: center; */
      margin: 20px 10px;
    }

    td.tweetBtn::before {
      border-bottom: 0px;
    }

    td.tweetBtn a { padding: 10px 20px; }

    /*
    Label the data
    */
    .memberName::before {
      content: "Senator: ";
    }
    .district::before {
      content: "Avg. Guns Deaths in State (per year): ";
    }
    .paid::before {
      content: "NRA Donations: ";
    }

  }

/* Attempting to override some styles on the Twitter buttons */
.btn-o a.btn {
  background-color: rgba(92, 6, 140, 1.00);
}

.btn-o a.btn:hover {
  background-color: rgba(92, 6, 140, 0.8);
}