@charset "utf-8";
/* Media calls to display different tables for large and small screens */

/* Use the ID's like this:

  <div id="large-screen-table" class="responsive-table">
        <table>
            TABLE CONTENTS
        </table>
  </div>

  <div id="small-screen-table" class="responsive-table">
        <table>
            TABLE CONTENTS
        </table>
  </div>
*/



/* Hide both tables by default */
.responsive-table {
    display: none;
}

/* Show the large screen table on larger screens */
@media (min-width: 768px) {
    #large-screen-table {
        display: block;
    }
}

/* Show the small screen table on smaller screens */
@media (max-width: 767px) {
    #small-screen-table {
        display: block;
    }
}