/* Reset
-------------------------------------------------- */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
  display: block;
}

/* Typography
-------------------------------------------------- */
h1 {
  font-size: 2em;
  line-height: 1.25em;
  font-weight: 400;
  margin-bottom: .5em;
  color: #f00;
}

h2 {
  font-size: 1.5em;
  line-height: 1.25em;
  font-weight: 600;
  margin-bottom: .5em;
  color: red;
}

h3 {
  font-size: 1.4em;
  line-height: 1.5em;
  font-weight: 400;
  margin-bottom: .5em;
}

h4 {
  font-size: 1em;
  margin-bottom: 2em;
  display: inline-block;
  font-weight: 600;
}

h1 a, h2 a, h3 a, h4 a {
  color: inherit;
  border: 0 !important;
}

a { color: #f00; }


/* General
-------------------------------------------------- */
html {
  height: 101%;
  font-family: "Source Sans Pro", sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  font-size: 1.25em;
  line-height: 1.5em;
  background: #242424;
  color: #fff;
}

section {
  color: #000;
  background-color: #fff;
  padding: 1em;
  overflow: visible;
}
  @media only screen and (min-width: 600px) {
    section { padding: 2em; }
  }

  @media only screen and (min-width: 1000px) {
    section { padding: 4em; }
  }

.max-width-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}

.center {
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important;
}

.center p { 
  margin-left: auto;
  margin-right: auto;
}

img {
  display: block;
  max-width: 100%;
}

a.button {
  background-color: #bf0000;
  padding: 1em 1.5em;
  font-size: 1.25em;
  font-weight: bold;
  border-radius: 0.5em;
  color: #fff;
  margin-top: 1em;
  text-decoration: none;
}

a.button:hover {
  background-color: red;
}


/* Header
-------------------------------------------------- */
header {
  position: relative;
  bottom: -6em;
  height: 20em;
  margin-bottom: 6em;
  background-image: url('/assets/images/banner.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center, center;
}

header h2 {
  font-size: 3em;
  text-align: center;
  color: #fff;
}

#header-bg {
  background-color: #bf0000;
  padding: 1em;
  position: relative;
  bottom: 6.5em;
}

@media only screen and (min-width: 600px) {
  #header-bg { padding: 2em 2em; }
}

header h1 { color: #fff; }
header h4 { margin-bottom: 0; }

  @media only screen and (min-width: 800px) {
    header h1 {
      margin: 0;
      float: left;
    }

    header h4 {
      margin: 0;
      float: right;
      line-height: 2.25em;
    }
  }

/* Section - Banner
-------------------------------------------------- */
#body-banner { 
  background-image: url("/assets/images/thaiCuisine.png");
  height: 20em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: table;
  width: 100%;
}

#body-banner .max-width-wrapper { display: table-cell; vertical-align: middle; } 

#body-banner h2 {
  color: #fff;
  font-size: 2em;
  margin-bottom: 1.5em;
}


/* Section - Contact
-------------------------------------------------- */
#contact .max-width-wrapper {
  max-width: 40em;
}

#contact h2 { margin-bottom: 0; }
#contact h4 { margin-bottom: 1em; }


#contact img { 
  margin: 0 auto;
}

  @media only screen and (min-width: 1200px) {

    #contact img { 
      float: left;
    }

    #contact .text-group {
      display: inline-block;
      float: right;
    }
  }




/* Footer
-------------------------------------------------- */
footer {
  color: #fff;
  padding: 1em;
  background-color: #990000;
  clear: both;
}

@media only screen and (min-width: 600px) {
    footer { padding: 2em; }
}

footer p { display: block; }
footer p:last-of-type {margin-bottom: 0;}


footer span {
  display: none;
  padding: 0 1em;
}

@media only screen and (min-width: 830px) { 
  footer p, 
  footer span { display: inline; }
}

/* Menu
-------------------------------------------------- */
#menu-page section {
  color: inherit;
  background: inherit;
  text-align: center;
}

.row { overflow: hidden; }

.row:nth-child(even) { background: #fff;    color: #000;}
.row:nth-child(odd)  { background: #242424; color: #fff;}

.item-group .item  { 
  display: inline-block;
  max-width: 18em;
  margin-bottom: 0;
}

.item-group .price { margin-bottom: 1.5em; }

.container { overflow: hidden; }

.price.lg { padding-right: 1em; }

#combinations .item-group:first-of-type { margin-bottom: 1em; }
#combinations h4 { margin-bottom: 1em; }


@media only screen and (min-width: 1200px) {

  p {
    max-width: 34em;
    margin-bottom: 1em;
  }

  #menu-page section {
    float: left;
    width: 33.33%;
    text-align: left;
    padding: 3em;
  }

  .item-group .item  { margin-bottom: 1em; max-width: 9em;}
  .item-group .price { float: right; margin-left: 1em; margin-bottom: 0; }

  #soups h1, #noodle-bowls h1 { margin-bottom: 0;}

  #noodle-bowls, #entrees-with-rice, #kids-menu, #beverages { clear: left; }

  #appetizers, #noodle-bowls, #entrees-with-rice, #kids-menu, #beverages { padding-right: 0; }
  #soups, #curries-with-rice, #combinations, #specials { padding-left:  0; }

}

@media only screen and (min-width: 1400px) {

  #menu-page .section { padding: 4em } 
  .item-group .item { max-width: 12em; }

}