/* Custom Town Font */ 
  @font-face { 
    font-family: MajestiBanner-Heavy; 
    src: url('fonts/Majesti-Banner/Majesti-Banner-Heavy.otf'); 
  } 
  @font-face { 
    font-family: MajestiBanner-Book; 
    src: url('fonts/Majesti-Banner/Majesti-Banner-Book.otf'); 
  } 
  @import url('https://fonts.googleapis.com/css?family=Yeseva+One');
  html {
    height: 100%;
  }
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  p {
    color: #41393d; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5;
  }
  h1 {
    color: #be1e2d; font-family: 'MajestiBanner-Heavy', 'Yeseva One', Arial, sans-serif; font-size: 36px;
  }
  h2 {
    color: #41393d; font-family: 'MajestiBanner-Heavy', 'Yeseva One', Arial, sans-serif; font-size: 40px; margin-bottom: 0;
  }
  #sticky-nav{
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    box-sizing: border-box;
  }
  #contact-nav {
    width: 100%;
    max-width: 960px;
    padding: 0;
    margin: 0 auto;
    text-align: right;
    font-family:  Arial, sans-serif;
    font-size: 13px;
  }
  #contact-nav li{
    list-style-type: none;
    display: inline-block;
    padding: 8px 18px;

  }
  #contact-nav a{
    color: #fff;
    text-decoration: none;
  }
  .contact-bar {
    width: 100%;
    background:#41393d;
    padding: 0;
    margin: 0;
  }
  .contact-item {
    color:#8a8c8f;
    padding-right: 6px;
    font-weight: bold;
  }
  #main-nav-wrapper {
    width: 100%;
    background:#be1e2d;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  #main-nav {
    width: 100%;
    max-width: 960px;
    padding: 0;
    margin: 0 auto;
    text-align: right;
    font-family:  'MajestiBanner-Heavy', 'Yeseva One', Arial, sans-serif;
    font-size: 18px;
    box-sizing: border-box;
  }
  #main-nav ul{
    margin: 0 auto
  }
  #main-nav li{
    list-style-type: none;
    display: inline-block;
    padding: 16px 0px;
  }
  #main-nav a{
    color: #fff;
    text-decoration: none;
    padding: 16px 35px 17px;
  }
  #main-nav li:first-child {
    padding: 0;
  }
  #main-nav li:first-child:hover {
    padding: 0;
    background: none;
  }
  #main-nav a:hover{
    color: #fff;
    background: #9a1825;
  }
  .logo-bar {
    float: left;
    padding-left: 12px;
  }
  #logo-bar-img {
    width: 100%;
    max-width: 100px;
    padding-top: 10px;
    margin-left: 12px;
  }
  .content-wrapper {
    width: 100%; 
    max-width: 960px; 
    margin: 0 auto; 
    padding: 100px 14px 14px; 
    box-sizing: border-box;
  }
  #footer{
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 12px;
    clear: both;
  }
  #footer p{
    text-align: center;
    font-size: 15px;
  }
  hr.hr{
    border-top: 1px solid #41393d;
    width: 80%;
    max-width: 960px;
  }
  /* The hero image */
  #hero-image {
      /* The image used */
      background-image: url("http://www.geocities.ws/snhusjv/GRA310/img/town-food-hero.jpeg");

      /* Set a specific height */
      height: 100%;

      /* Position and center the image to scale nicely on all screens */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
  }

  /* Place text in the middle of the image */
  .hero-text {
      text-align: center;
      position: absolute;
      top: 35%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
  }
  #hero-logo {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 45px;
    background-color: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.9);
    box-sizing: border-box;
  }
  #menu-container {
   width:100%;
  }
  .list {
    color: #41393d; 
    font-family: Arial, sans-serif; 
    font-size: 16px; 
    line-height: 1.5;
    float:left;
    width:49.9%;
  }
  .list ul{
    list-style-type: none;
  }
  .list li{
    margin-bottom: 1.75em;
  }
  .list h2{
    color: #41393d; font-family: Arial, sans-serif; font-size: 20px;font-weight: normal; padding-top: 20px;margin-bottom:10px;padding-bottom: 1px;
  }
  .list h3{
    color: #41393d; font-family: Arial, sans-serif; font-size: 18px;font-weight: bold; margin-bottom:1px;padding-bottom: 1px;
  }
  .note {
    margin-top: 500px;
    font-size: 12px;
    clear: both;
  }
  #contact-form {
    width: 100%;
    color: #41393d; font-family: Arial, sans-serif; 
    font-size: 16px;
    padding-top: 35px;
  }
  #contact-form input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0 24px;
    box-sizing: border-box;
    border: 1px solid #ededed;
  }
  #message{
    width: 100%;
    height: 180px;
    padding: 12px 20px;
    box-sizing: border-box;
    resize: none;
    clear: both;
  }
  #contact-form textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #ededed;
  }
  .send-btn {
    width: 100%;
    text-align: center;
    font-weight: bold;
    color: #fff;
    padding: 22px 20px;
    box-sizing: border-box;
    background-color: #ef4e22;
  }
  .send-btn:hover {
    background-color: #d7461e;
    cursor: pointer;
    cursor: hand;
  }
  .menu-img {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    margin: 0 auto;
  }
  .about-img {
    float: right; width: 100%; max-width: 360px; clear: both; display: block; padding-left: 25px; box-sizing: border-box; margin: 0 auto 30px;
  }