/* Narrow screens only. main.css lays the site out at a fixed 1000px; below that width,
   these rules make the shell fluid and stack layout tables into one column.
   Desktop (>= 1020px) never matches, so its rendering is unchanged.
   Tables holding real tabular data carry class="data-table" and scroll sideways instead. */
@media (max-width: 1019px) {
    body { align-items: stretch; -webkit-align-items: stretch; }

    /* the fixed-width shell */
    #content, #mainContent, #widerContent, #pricingHeader, .top_table {
        width: auto; left: 0; margin-left: 0; margin-right: 0;
    }
    #content { padding: 0 12px; min-width: 0; box-sizing: border-box; }
    body > * { min-width: 0; max-width: 100%; }
    #content * { max-width: 100%; box-sizing: border-box; }

    /* header: logo above a wrapping nav */
    .banner_bg { min-height: 90px; }
    #logo { position: relative; margin: -60px auto 0; max-width: 100%; background-size: contain; background-repeat: no-repeat; }
    #links { margin: 8px 0 0; text-align: center; font-size: 14px; line-height: 2em; }
    .links_pipe { margin: 0 6px; }
    #slogan { font-size: 17px; }

    /* media */
    img { height: auto; }
    #content video { height: auto !important; }  /* beats inline pixel heights in the templates */
    iframe, embed, object, textarea, input, select { max-width: 100%; }

    /* layout tables: one cell per row */
    #content table:not(.data-table), #content table:not(.data-table) > tbody,
    #content table:not(.data-table) > tbody > tr, #content table:not(.data-table) > tbody > tr > td,
    #content table:not(.data-table) > tbody > tr > th {
        display: block; width: auto !important; height: auto !important;
    }

    /* data tables: keep the grid, scroll within the page */
    #content table.data-table { display: block; overflow-x: auto; width: auto !important; }

    /* fixed-width pieces from main.css */
    .video_logo, .yellowBox4, #yellowBox, #yellowBox2, #sharing_links { width: auto; float: none; left: 0; margin-top: 12px; }
    .video_text { padding: 12px 0 0; height: auto; }
    #video_container { float: none; }
    .video_caption { top: 0; }
    .optic_3d_wrap { float: none; text-align: center; }
    #content iframe { width: 100%; height: auto; aspect-ratio: 5 / 4; }
    #video_embed { width: 100%; height: auto; aspect-ratio: 4 / 3; }

    footer img { display: none; }
    footer, .bottomText { padding: 0 12px; }
}