.logo-cell a {
    background-image: url(logos/main-logo.svg);
    height: 180px;
}
@media (max-width: 768px){
    .logo-cell a {
        background-position: left -0px;
        height: 130PX;
        /* the shared 400px width runs 30px off a 390px screen and makes the
           whole top bar a link home; the logo itself is only ~65px wide */
        width: 110px;
    }
}
.header-wrapper--home{
    background-color: #000;
}
.footer-wrapper {
    background-color: #1d1f22;
}

/* was an inline style on the footer's inner div */
.footer-wrapper .footer-pad {
    margin: auto;
    max-width: 1280px;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* ============================================================
   Phones: line the page up on one left edge
   The shared markup indents each block differently once the
   bootstrap columns stack, so a film card started its poster at
   26px, its text at 41px and its showtimes at 61px. These rules
   give them all the same edge and take out the dead space the
   old desktop spacers leave behind.
   ============================================================ */
@media (max-width: 767px){
    /* the poster column drops its gutter when stacked, unlike the
       text and showtime columns next to it */
    #all-movies .movie .border-box > [class*="col-sm-"] {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* showtime chips: keep the vertical breathing room, drop the
       side inset so they start with the text above them (film card)
       and with the date beside them (spectacle page) */
    .time-select .items-wrap {
        padding-left: 0;
        padding-right: 0;
    }

    /* the legend has no column around it, so it needs the gutter
       itself to reach the same edge */
    .time-select .legend .items-wrap {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* two <br> spacers sized for desktop left ~60px of nothing
       between the date arrows and the first day */
    .movie-calendar .choose-container > br {
        display: none;
    }

    /* footer: ~145px of nothing sat between the last link and the
       copyright line. Trim the desktop padding and the spacer <br>,
       and line the logo up with the address underneath it. */
    .footer-wrapper .footer-pad {
        padding-top: 36px;
        padding-bottom: 16px;
    }

    .footer-wrapper .footer-info {
        padding-top: 16px;
    }

    .footer-wrapper .footer-info > br {
        display: none;
    }

    .footer-wrapper .logo-cell {
        padding-left: 15px;
    }

    /* the film card's outline crowds a phone's width; the cards already
       read as separate blocks from the spacing between them */
    .movie--test .border-box {
        border: 0;
    }
}