@media (max-width: 24.9375rem) and (orientation: portrait) {

    body::before {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        content: "Rotate to landscape for best viewing.";
        position: fixed;
        background: rgba(0, 0, 0, 0.85);
        color: wheat;
        z-index: 9999;
        font-size: 3rem;
        padding: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        box-sizing: border-box;
    }

    .body-home {
        display: none;
        /* Hide main content in portrait */
    }

}

@media (min-width: 25rem) and (max-width: 47.9375rem) {

    .body-ep {
        background-size: auto 5vmin, auto 5vmin, auto auto;
    }

    .topnav>ul,
    .topnav-tx>ul {
        grid-template-columns: repeat(auto-fit, minmax(25vw, 1fr));
    }

    .heel>ul,
    .heel-tx>ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer>ul,
    .footer-tx>ul {
        grid-template-columns: repeat(1, 2fr);
        justify-content: center;
        row-gap: 1.5vw;
    }

    .topnav>ul>li,
    .topnav-tx>ul>li {
        min-height: 5vh;
    }

    .heel>ul>li,
    .heel-tx>ul>li {
        min-height: fit-content;
    }

    .mid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(65vw, 1fr));
        min-height: 24vh;
    }

    .mid>.p3,
    .mid>.p4,
    .mid>.pa {
        white-space: normal;
        word-wrap: normal;
        overflow-wrap: anywhere;
        padding: 0rem 0.5rem;
        margin: 0;
    }

    .mid>.p3::after {
        content: "<hr>";
    }

    .wrap2>.logolt,
    .wrap2>.logort {
        max-width: 6vmax;
    }

    .mid>.pa>ul>li {
        line-height: 1.3;
        padding-left: 1.5vmax;
        text-indent: -1.5vmax;
        font-size: 3vmin;
        font-weight: bold;

    }

    .txt2 {
        display: flex;
        flex-direction: column;
        align-items: top;
        justify-content: left;
        padding: 0.25rem;
    }

    .txt2 fieldset {
        height: max-content;
    }



    .datetime-group {
        gap: 2.5rem;
    }

    .txt2 input[type="datetime-local"] {
        width: 100%;
        font-size: 85%;
    }

    .txt2 button {
        max-width: fit-content;
        padding: 0.125rem 0.125rem;
        margin: auto 0.125rem;
        align-self: center;
    }

    .txt3 {
        grid-template-areas:
            'cmnt'
            'leftcolumn'
            'center'
            'orgs'
            'cmnt1'
            'center1'
            'rightcolumn';
        grid-template-columns: 1fr;
    }

    .txt-tx {
        min-height: 45vh;
    }

    .txt-tx>h3 {
        padding: 1vh 0vw 6vh;
    }

    .cmnt-tx {
        margin: 0.5rem 2.5rem;
    }

    .txt>h2 {
        font-size: 3vmin;
        text-align: left;
        justify-self: left;
    }

    .associations img {
        margin: 0.5rem;
        width: auto;
        max-height: 1.75rem;
        vertical-align: middle;
    }

}

@media (min-width: 48rem) and (max-width: 66.9375rem) and (orientation: landscape) {

    .body-ep {
        background-size: auto 6vmin, auto 6vmin, auto auto;
    }


    .topnav>ul,
    .topnav-tx>ul {
        grid-template-columns: repeat(auto-fit, minmax(25vw, 1fr));
    }

    .heel>ul,
    .heel-tx>ul {
        grid-template-columns: repeat(2, 40vw);
    }

    .footer>ul,
    .footer-tx>ul {
        grid-template-columns: repeat(1, 2fr);
        justify-content: center;
        row-gap: 1.5vw;
    }

    .topnav>ul>li,
    .topnav-tx>ul>li {
        min-height: 8vh;
    }

    .heel>ul>li,
    .heel-tx>ul>li {
        min-height: fit-content;
    }

    .mid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(65vw, 1fr));
        min-height: 24vh;
        overflow-x: auto;
    }

    .mid>.p3::after {
        content: "<" hr">";
    }

    .txt3 {
        grid-template-areas:
            'cmnt'
            'leftcolumn'
            'center'
            'orgs'
            'cmnt1'
            'center1'
            'rightcolumn';
        grid-template-columns: 1fr;
    }

    .associations img {
        margin: 0.5rem;
        width: auto;
        max-height: 2.75rem;
        vertical-align: middle;
    }
}