@media only screen and (min-width : 1024px) and (max-width : 1200px){
    #boxed-layout {
        width: 96%;
    }
}
 
@media (max-width: 768px) {
    .voicemail-columns {
        flex-direction: column;
    }

    .voicemail-columns ul {
        width: 100%;
    }
}

/* Below the fixed-layout floor, stop forcing a 1003px canvas: let the
   Bootstrap grid stack instead of making phones scroll sideways. */
@media (max-width: 1002px) {
    body {
        min-width: 0;
    }
    #main {
        width: 94%;
    }
}

/* ------------------------------------------------------------------
   Phone layout (below Bootstrap's md breakpoint).
   The desktop design is a tall sticky header, a fixed footer, and a
   dusky-rose link color tuned for a large screen. On a phone those
   become overlaps and legibility problems, so here the header and
   footer flow with the page and the links get the lighter tint
   (#DCA0BA) from the burgundy.css candidate list.
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {

    /* header scrolls away like normal content instead of pinning
       567px of photos to the top of a 844px screen */
    #header {
        position: static;
    }

    /* the JS header/mini-header swap is desktop-only (js/main.js);
       never let the fixed mini overlay cover phone content */
    #mini-header {
        display: none !important;
    }

    /* the topbar is three stacked rows on a phone; its desktop
       height is fixed at 5rem, which the stacked text overflows */
    .header-banner {
        height: auto;
        padding: 0.4rem 0;
    }

    /* one tidy row of five photos instead of two tall wrapped rows */
    #header .header-photos {
        padding: 1rem 0;
    }
    /* img... selector must outrank "#header .logo img { height: auto }" */
    #header .logo img.tt-retina-logo {
        width: 62px;
        height: 62px;
    }

    /* when the columns stack, the carousel lands directly above the
       "Love Never Fails" heading; give it some air below */
    #col-left .carousel {
        margin-bottom: 2.5rem;
    }

    /* the fixed footer overlays content on a short screen; let it
       follow the content instead */
    footer {
        position: static;
    }

    /* legibility on the dark burgundy bars */
    #topbar-menu .topbar-left a,
    #topbar-menu .topbar-right a {
        color: #DCA0BA;
    }
    #header .header-menu #menu-main-nav li a span {
        color: #DCA0BA;
    }
    #menu-main-nav li a strong {
        color: #F4E9EE;
    }

    /* less dead air above the page on a small screen */
    .main {
        margin: 1rem auto;
    }
}

@media (max-width: 767.98px) {
    /* an opened dropdown flows in place instead of overlaying the
       stacked menu items below it */
    #menu-main-nav .sub-menu,
    #menu-main-nav #submenu-1,
    #menu-main-nav #submenu-2 {
        position: static;
        left: auto;
        top: auto;
        box-shadow: none;
    }
}

/* "Voicemail 10" must never wrap into "Voicemail | 10": at iPad
   widths the two list columns get narrow enough that the number
   drops to a second line. The items are short, so let them keep
   their single line at every width. */
.voicemail-columns li a {
    white-space: nowrap;
}