@font-face {
    font-family: 'foxgrotesquew01-blackregular';
    src: url('/images/fox_grotesque_w01_black.woff2') format('woff2'),
         url('/images/fox_grotesque_w01_black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'lexiaregular';
    src: url('/images/lexia___-webfont.woff2') format('woff2'),
         url('/images/lexia___-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'maxs_handwritinregular';
    src: url('/images/maxs_handwritin-webfont.woff2') format('woff2'),
         url('/images/maxs_handwritin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'little_momentregular';
    src: url('/images/little_moment_demo-webfont.woff2') format('woff2'),
         url('/images/little_moment_demo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ---- Global ---- */


body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    line-height: 1.3;
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
    height: auto;
}
iframe {
    margin-left: 4%;
    width: 97%;
    height: 444px;
}
a       { color: #d1232a; }
a:hover { color: #f00; }

p { font-size: 18px; }
.mobile p { font-size: 24px; }

li { list-style: none; display: inline; height: 100%; float: left; }
li.active { opacity: 1; }

.alignleft { float: left; }
.center    { text-align: center; }
.left      { float: left;  padding: 10px; }
.right     { float: right; padding: 10px; }
.nodisplay { display: none; }

.onethird  { margin: 0; padding: 2% 0; width: 25%; }
.twothirds { margin: 0; padding: 2%;   width: 62%; }

span.dim { opacity: .3; }
span.cross-strike {
    font-family: 'little_momentregular';
    position: absolute;
    transform: rotate(11deg);
    color: #000;
    text-decoration-line: underline;
    font-weight: bold;
    font-size: 92%;
    margin-top: 4px;
    margin-left: -5px;
}

/* ---- Layout ---- */

#outerhd   { margin: 0; width: 100%; display: none; }
#container { margin: auto; padding-top: 0; border: solid 1px #fff; }
#header    { padding: 0 0 1px; }
#pagecontent { float: left; margin: 0 auto; padding: 0; width: 100%; }

#logo a {
    opacity: 1;
    background: url(/images/takeoutdm-header-hungry.png) no-repeat;
    float: left;
    width: 100%;
    height: 268px;
}

#boxholder          { margin: 0 auto; max-width: 810px; }
#boxholder div.inner { overflow: hidden; padding: 0 0 7px; }
#boxholder div p    { color: #333; padding: 0 10px 10px; margin-top: 0; }
#boxholder h4 {
    color: #1134CC;
    font-family: "maxs_handwritinregular";
    font-weight: normal;
    font-size: 22px;
    letter-spacing: 2px;
    margin: 0;
    text-align: center;
    width: 100%;
}

/* ---- Typography ---- */

h1 {
    color: #CE2200;
    font-size: 48px;
    font-weight: normal;
    line-height: 1.1;
    font-family: 'foxgrotesquew01-blackregular';
    text-align: center;
}
h2 {
    color: #333;
    font-family: 'foxgrotesquew01-blackregular';
    font-size: 3.5em;
    font-weight: bold;
    line-height: 1em;
    margin: 3em 10px 9px 0;
    text-align: center;
    float: left;
    width: 100%;
}

h2#subscribe { margin-top: 0; }
h3 {
    font-size: 3em;
    font-weight: bold;
    margin: 1em 0 0;
    padding-bottom: 2px;
    line-height: 1.2;
    width: 100%;
    float: left;
    color: #232176;
    text-align: center;
    font-family: 'foxgrotesquew01-blackregular';
}
h2 + h3 { margin-top: 0; }

.tagline {
    text-align: center;
    color: #00A;
    margin: 0;
    padding: 0;
    font-family: 'foxgrotesquew01-blackregular';
    font-size: 1.7em;
    line-height: 1.5em;
}
.tagline a { opacity: 1; }

.explainer {
    font-size: 2em;
    line-height: 1.3em;
    margin: 3em 0 1em;
    font-weight: normal;
    color: black;
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: -.8px;
}

img.google-marker { transform: rotate(55deg); }

p.contact { margin: 3px auto; font-size: small; }

/* ---- Hero ---- */

#maincarousel {
    height: auto;
    margin: 0 auto 3em;
    width: 100%;
    position: relative;
}
#maincarousel img {
    width: 100%;
    height: 100vh;
    z-index: 0;
}
#maincarousel a.go-down {
    cursor: pointer;
    position: absolute;
    z-index: 1;
    color: #fff;
    text-decoration: none;
    left: 45%;
    bottom: 30vh;
    height: 1em;
    width: 1em;
}
#maincarousel a.go-down::before {
    content: "\f431";
    font-family: "Genericons";
    visibility: visible;
    font-weight: normal;
    font-size: 8em;
    vertical-align: bottom;
}
#maincarousel a.go-down:hover,
#maincarousel a.go-down:focus,
#maincarousel a.go-down:active {
    color: #fdef27;
}

a.go-up {
    display: block;
    width: 100%;
    float: left;
    text-align: center;
    color: #111;
    text-decoration: none;
    transform: rotate(180deg);
    line-height: 1;
    margin: 4em 0 0;
    cursor: pointer;
}
a.go-up::before {
    content: "\f431";
    font-family: "Genericons";
    display: block;
    font-size: 8em;
    font-weight: normal;
    visibility: visible;
}
a.go-up:hover { color: #d1232a; }

a.print-guide {
    display: block;
    text-align: center;
    color: #232176;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    margin: 1em 0 0;
}
a.print-guide::before {
    content: "\f469";
    font-family: "Genericons";
    font-size: 3em;
    font-weight: normal;
    visibility: visible;
    display: block;
}
a.print-guide:hover { color: #d1232a; }

/* ---- Footer ---- */

#footer {
    font-size: 10px !important;
    float: left;
    width: 100%;
    text-align: center;
}
#footer p      { font-size: 10px; }
#footer span   { margin-left: 10px; }
#footer ul li#editors { display: none; }

/* ---- Status messages (contact form) ---- */

.statusMessage {
    background: linear-gradient(to top, #EFF1E5, #FEF9FE);
    border: 1px solid #aaa;
    box-shadow: 0 0 1em rgba(0,0,0,.5);
    color: #666;
    display: none;
    height: 2em;
    padding: 1.5em;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -15em;
    margin-top: -1em;
    width: 30em;
    z-index: 1000;
}
.statusMessage p { margin: 0; padding: 0; text-align: center; }

/* ---- Contact / Subscribe form ---- */

#subscribeForm {
    border: solid 1px #d12121;
    max-width: 810px;
    padding: 2em 2em 3em;
    margin: 2em auto 4em;
    border-radius: 4px;
    background: #fefeff;
    display: flex;
}
#contactForm {
    margin: 0 auto;
    width: 90%;
}
#contactForm ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#contactForm ul li {
    margin: 0.9em 0 0;
    padding: 0;
    width: 100%;
}
#contactForm input,
#contactForm label   { line-height: 1em; }
#contactForm label {
    clear: left;
    color: #546D85;
    cursor: pointer;
    display: none;
    float: left;
    margin: 0.15em 0.5em 0 0;
    padding: 0.4em 0 0;
    text-align: right;
    width: 28%;
}
#contactForm input,
#contactForm textarea {
    border: 1px solid #EEDDEE;
    box-shadow: none;
    margin: 0;
    outline: medium none;
    padding: 0.5em;
    font-size: 1.5em;
    width: 100%;
}
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm textarea { font-family: monospace; text-align: center; }

#contactForm *:focus { background: #F6F6FC; }

textarea { height: 10em; line-height: 1.5em; resize: none; }

#contactForm input[type="submit"] {
    -moz-transition: opacity 0.5s ease 0s;
    background: #ee0;
    border-radius: 11px 0 14px 0;
    color: #232176;
    margin: 0 25%;
    opacity: 1;
    padding: 0.5em;
    width: 50%;
    border: solid 8px #d1232a;
    box-shadow: 6px 5px 2px #111;
    font-family: 'foxgrotesquew01-blackregular';
}
#contactForm input[type="submit"]:hover,
#contactForm input[type="submit"]:focus {
    color: #ee0;
    cursor: pointer;
    background: #232176;
}
#contactForm input[type="submit"]:active {
    background: #eee;
    box-shadow: 0 0 0.5em rgba(0,0,0,.8) inset;
    color: #333;
}

/* ---- Restaurant listing ---- */

#boxholder div.page-restaurants h3 { margin: 1em 0 0; }

#boxholder div.page-restaurants:first-of-type h3 { margin: .5em 0 0; }

ul.home_delivery,
ul.restaurant_listing {
    list-style: none;
    margin: 0 0 0 -4em;
}
ul.home_delivery li,
ul.restaurant_listing li {
    margin-bottom: .5em;
    float: left;
    width: 100%;
    line-height: 1.5em;
    text-align: center;
}
ul.restaurant_listing li.restaurant_name {
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 0;
}
ul.restaurant_listing li.restaurant_name a { color: #000; }
ul.restaurant_listing li.restaurant_tel,
ul.restaurant_listing li.restaurant_email { margin-bottom: 1em; }

ul.home_delivery li { margin-bottom: .5em; font-size: 1.5em; }
ul.home_delivery li a { text-decoration: none; }
ul.restaurant_listing li a { text-decoration: none; }

.mia   { display: none; }
.footnote { font-size: small; margin-top: 0; }
p + p.footnote { margin-top: -1em; }

span.closed,
ul.restaurant_listing li.closed     { color: #888; text-decoration: line-through; }
ul.restaurant_listing li.closed a   { color: #888; }
ul.restaurant_listing.closed        { display: none; }

/* Genericons link icons */
ul.home_delivery li a::before,
li.restaurant_name a.web_link::before,
ul.restaurant_listing a.address.directions::before,
ul.restaurant_listing a.tel::before,
ul.restaurant_listing a.email::before {
    content: "\f437";
    display: inline-block;
    color: #007acc;
    font-family: "Genericons";
    visibility: visible;
    font-weight: normal;
    font-size: large;
    margin-right: 6px;
    vertical-align: bottom;
}
li.restaurant_name a.web_link::before          { content: "\f475"; }
ul.restaurant_listing a.address.directions::before { content: "\f417"; }
ul.restaurant_listing li a.email::before       { content: "\f410"; }
ul.restaurant_listing li a::before             { content: "\f409"; }

/* ---- Responsive ---- */

@media screen and (max-width: 799px) {
    iframe { height: 250px; }
    #boxholder { padding: 0 2em; }
    #maincarousel img { height: auto; }
    #maincarousel a.go-down { top: 18vh; left: 44%; }
    #maincarousel a.go-down::before { font-size: 5em; }
    #subscribeForm { margin: 2em 1em 4em; }
    #contactForm input[type="submit"] { font-size: 1.3em; }
}

@media print {
    /*
    @page {
     @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
        font-family:Arial, Helvetica, sans-serif;
        font-size: .5em;
        }
    }
        */

    /* Hide non-print elements */
    a.go-down, a.go-up, a.print-guide,
    #restaurant-h2, #guide, #delivery, .home_delivery,
    #subscribe, .subscribe-tag-line, #subscribeForm,
    #footer { display: none; }

    /* Hero image — show at natural size */
    /* #maincarousel { height: auto; margin-bottom: 1em; }
    #maincarousel img { height: auto; width: 100%; }
    */
    #maincarousel { margin-bottom: 0;}
    #maincarousel img {
      height: 30vh;
      width: 100%;
      object-fit: cover;
      object-position: top;
      margin-bottom: 0;
  }

    /* Fix h3 float — base CSS floats h3 left, which collapses
       surrounding uls and causes headings to stack at the end */
    h3 {
        float: none;
        clear: both;
        column-span: all;
        font-size: 1.1em;
        margin: 0.5em 0 0.2em;
        break-after: avoid;
        page-break-before: avoid;
        page-break-after: avoid;
    }

    h3#mexican { padding-top: 2em; }

/*    #boxholder div.page-restaurants:first-of-type h3 { margin-top: 0; }

    /* Three-column restaurant listing */
    .page-restaurants {
        columns: 3;
        column-gap: 1.5em;
    }

    /* h2 still has float:left in base CSS — clear it so the columns
       container gets a proper block context */
    h2 { float: none; clear: both; }

    /* Edge/Chrome bug: column-span:all fails on the first child of a columns
       container. A non-spanning zero-height ::before bumps h3 out of
       first-child position so column-span:all renders correctly on all h3s. */
    .page-restaurants::before {
        content: '';
        display: block;
        height: 0;
    }

    /* Keep each restaurant block (name/address/phone) together */
    ul.restaurant_listing {
        break-inside: avoid;
        page-break-inside: avoid;
        margin: 0 .4em 0.2em 0;
        overflow: visible;
    }

    /* Remove li floats — required for column layout to work */
    ul.restaurant_listing li {
        float: none;
        display: block;
        width: 100%;
        line-height: 1.3em;
        margin-bottom: 0;
        text-align: left;
    }

    ul.restaurant_listing li { font-size: 0.65em; line-height: 1.2em; }
    ul.restaurant_listing li.restaurant_name { font-size: 0.85em; }

    /* Genericons won't render in print — hide the pseudo-elements */
    ul.restaurant_listing li a::before,
    ul.restaurant_listing a.address.directions::before,
    ul.restaurant_listing a.tel::before,
    ul.restaurant_listing a.email::before,
    li.restaurant_name a.web_link::before { display: none; }

    a { color: #000; text-decoration: none; }
}