* {margin: 0; padding: 0;}



h1 {font-size: 2.3rem;}

nav, h1, h2 {font-family: 'Gabriela'; }



h3, h4, p, a {font-family: 'Glass Antiqua'; text-decoration: none;}

#hamburger-icon {display: none;}

a:hover {color:#D29E42;}
  
a:active {color:#D29E42;}

section {display: inline-block;}

  nav {height: 10vh; width: 100%; position: fixed; top:0; background-color: white;}

    nav ul { text-align: center; width: 50%; margin: auto; margin-top: 2.5%;}

    nav li { display: inline; font-size: 1.1rem; margin-right: 5%;}

    nav a {text-decoration: none; color: #24724E; }

    nav a:link {font-family: 'Gabriela'; }




    main {height: 100vh;  width: 80vw; margin: 0 auto;}

      .red {height: 20vh; margin: 0 auto; text-align: center;}

        .brown { text-align: center; margin-top: 2%; background-color: red;}

     

      .blue {height: 7vh;  }

        .menu-selection { margin-top: 1%; font-size: 1.2em; width: 100%;}

        .ind-menu-link {margin-right: 2%; color: #24724E;  }


      .lime {height: 70vh;  margin-top: 1%;
        background-image: url("../images/sausage.jpg");
        background-repeat: no-repeat; background-size: cover; background-position: center;}


      .gold {margin: 0 auto; height: 105vh;}

      .item-title {width: 100%; margin-top: 4%; color: #D29E42; }


      .item-title-color {color:#D29E42;}

      section.item-section { margin-top: 2%; margin-left: .25%;
       width: 24.7%; float: left; color: #5C4280;  height: 30%; }

        .items-ind {margin-top: 9%; margin-right:  5%; margin-left:5%; font-size: 1.2rem;}

          .item-des {margin-right:  9%; margin-left: 15%; margin-top: 3%;font-size: 0.9rem;}

          .item-des.price {background-color: transparent; color: transparent; font-size: 0.9rem;}


  
.section-8 {height: 25vh; width: 100%; background-color: #24724E; text-align: center; color: #D29E42;}
  
  .ft {background-color: #24724E; width: 100%; height: 100%; float: left;}

  .footer-text {width: 80%; margin: 0 auto;
      margin-top: 8%;}  

  .ft.social-media {width: 30%;}

    .social-media-title {width: 50%; margin: 0 auto;
      margin-top: 8%; font-size: 0.8rem;}

    .fab {font-size: 2.5rem; margin-top: 5%; margin-right: 5%;}   

  .ft.address-box {width: 40%;}

    .footer-address {width: 80%; margin: 0 auto;
      margin-top: 7%;font-size: 0.8rem;}

  .ft.phone-number-box {width: 30%;}

    .phone-number {width: 80%; margin: 0 auto;
      margin-top: 10%;font-size: 0.8rem;}
  

@media screen and (min-width: 479px) and (max-width: 768px){

 #hamburger-icon {display: block; position: fixed; line-height: 0; top: 16px; left: 25px; z-index: 100; width: 40px; float: left;
                   font-size: 2em; padding: 13px 5px 20px ; border: none; background-color: transparent; color: #24724E; cursor: pointer;}

  #hamburger-icon:hover {background-color: transparent;}

nav {height: 8vh; width: 100%; position: fixed; top:0; background-color: white;}

nav ul { display: none;}

nav li { display: block; opacity: 1; font-size: 1.3rem; margin-right: 0%; padding: 2%; text-align: center;}

nav a {text-decoration: none; color: black; }

nav a:link {font-family: 'Gabriela'; }

.active {display: block; background-color: #D29E42; width: 100%; padding-top: 55px; border-color: white; opacity: 1; position: fixed;}


  .lime {height: 50vh;  margin-top: 1%;}

  .gold {margin: 0 auto; height: 140vh;}

  .item-title {width: 100%; margin-top: 2%; color:#D29E42;  }

      .item-title-color {color:#D29E42;}


      section.item-section { width: 42.75%; padding-left: 7%; margin-left: .25%; 
      font-size: 1em; height: 35%}

      section.item-section.first { height: 19%; }

      section.item-section.second { margin-top: 2%; height: 15%; }

      section.item-section.third { height: 15%;}

      section.item-section.fourth { margin-top: 2%; height: 18%; }


      article.items-ind {margin-top: 4%; margin-right: 5%; margin-left: 5%; width: 70%;
	  font-size: 1.2rem;}
	  
	  

        .item-des {margin-right:  30%; margin-left: 25%; margin-top: 3%; width: 60%; }

        .item-des.price {color: transparent;}



  .section-8 {height: 25vh; background-color: #24724E; text-align: center; color: #D29E42;}
  
  .ft {background-color: #24724E; width: 100%; height: 100%; float: left;}

  .footer-text {width: 80%; margin: 0 auto;
      margin-top: 8%;}  

  .ft.social-media {width: 30%;}

    .social-media-title {width: 80%; margin: 0 auto;
      margin-top: 8%; font-size: 0.7rem;}

    .fab {font-size: 2.5rem; margin-top: 5%; margin-right: 5%;}   

  .ft.address-box {width: 40%;}

    .footer-address {width: 80%; margin: 0 auto;
      margin-top: 7%;font-size: 0.7rem;}

  .ft.phone-number-box {width: 30%;}

    .phone-number {width: 80%; margin: 0 auto;
      margin-top: 13%;font-size: 0.7rem;}

}
/*

@media screen and  (max-width: 479px){

#nav {height: 6vh;}

    nav ul {width: 60%; margin-top: 1%;}

    nav li { display: inline; font-size: 1em; margin-right: 3%;}

  .lime {height: 50vh;  margin-top: 1%;}

  .red {margin-top: 3%;}

  .lime {height: 40vh;  margin-top: 1%;}

  .gold {margin: 0 auto; height: 120vh; }

  .item-title {width: 100%; margin-top: 2%; font-size: 0.9em; }

      .item-title-color {color:#D29E42;}


      .item-section { width: 42.75%; padding-left: 7%; margin-left: .25%; height: 21%; 
      font-size: 0.9em;}

      .item-section.first { height: 35%;}

      section.item-section.second { margin-top: 2%; height: 20%;  }

      section.item-section.third { height: 12%;}

      section.item-section.fourth { margin-top: 0%; height: 20%; }


      article.items-ind {margin-top: 4%; margin-right: 25%; margin-left: 15%; width: 60%;}

        .item-des {margin-right:  30%; margin-left: 25%; margin-top: 3%; width: 60%; }

        .item-des.price {color: transparent;}

  

  .section-8 {height: 25vh; background-color: #24724E; text-align: center; color: #D29E42;}
  
  .ft {background-color: #24724E; width: 100%; height: 100%; float: left;}

  .footer-text {width: 80%; margin: 0 auto;
      margin-top: 8%;}  

  .ft.social-media {width: 30%;}

    .social-media-title {width: 80%; margin: 0 auto;
      margin-top: 8%; font-size: 0.7rem;}

    .fab {font-size: 2.5rem; margin-top: 5%; margin-right: 5%;}   

  .ft.address-box {width: 40%;}

    .footer-address {width: 80%; margin: 0 auto;
      margin-top: 7%;font-size: 0.7rem;}

  .ft.phone-number-box {width: 30%;}

    .phone-number {width: 80%; margin: 0 auto;
      margin-top: 13%;font-size: 0.7rem;}