/* 
     RRRRRR    EEEEEEE  BBBBBB   EEEEEEE   CCCCCC,       AA                    CCCCCC,
     RR   RR   EE       BB   BB  EE       CCC   C       AAAA                  CCC   C
     RR  RR    EE       BB  BB   EE      CC            AA  AA       WITH     CC
     RRRRRR    EEEE     BBBBBB   EEEE    CC           AAAAAAAA               CC
     RR  RR    EE       BB  BB   EE      CC          AA      AA      ONE     CC
     RR   RR   EE       BB   BB  EE       CCC   C,  AA        AA              CCC   C,
     RR    RR  EEEEEEE  BBBBB    EEEEEEE   CCCCCC  AA          AA              CCCCCC

      ^'^
                    ^'^                                        ^'^
                                                 ^'^                                      ^'^
      //`                                                                    /          
     ///``      /      //`         /                    ``                 ///```         
    //////``   //``  /////``      ///`    //`        ////```     //`     /////```    /`  
 ///////////`/////``///////``   //////`` ///``    //////////```  ////`   ///////```` //``  /
////////////``/////``///////``/////////`///////``///////////````//////``/////////````///````/
/////////////````///////////```/////////`////````////////////````////````/////////````///````
////////////////``````////`````````/////`////`````/////````````````/``````/////////````////``
=============================================================================================
~~~~~~~~~~~~~~ * ~~~~~~~~~~~~~~~~~ * ***** *** ~~~~~~~~ * ~~~~~~~~~~~~~~~~ *** ~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~ * ~~~~~ ********** ~~~~ * ~~ * ~~~~~~~~~~~ * ~~~ WEB ~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~***************** ~~~~~~~~~~~~~~~~~~~~~~~~ PAGE ~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~************ **** ~~~~~~~~~~~~~~~~~~~~~ & ~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~ * ~~~~~~ ** **************** ** ~~~~~ * * ~~~~~~~~~ SEA ~~ * ~~~~~~~
~~~~~~~~~~~~~~~~~~~ * ~~~~~~~~ *************************** ~~~~~~~~~~ * * ~~~~~~~ CREATED ~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~ ************************ ** * ~~~~~~~~~~~~~~~~ BY ~~~~~~~~
~~~~~~~~~~~~~~ * ~~~~~~~ ************************************** ~~~~~~~~~~~~~~~~~ REBECA ~~~~
~~~~~~~~~~~~~~~~~~~********** ******************** ******************** ~~~~~~~~~~~~~~~~~~~~~
*/
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
}

body#canvas {
  width: 100vw;
  height: auto;
}
  body {
    width: 100%;
    height: 100%;
  }
  .backgroundimg {
    position: fixed;
    top: 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.2;
  }

header {
  position: fixed;
  width: 100vw;
  height: 10%;
}

button#hamburger-button {
  position: fixed;
  z-index: 1;
  font-size: 2.75em;
  line-height: 1em;
  padding:  0.1em 0.2em 0.2em 0.2em;
  border: none;
  background-color: #ffffff00;
  color: #F4BA40;
  filter: drop-shadow(-1px 2px 1px #000000BF);
}
  button#hamburger-button:hover {
    color: #EA3323;
  }

.logo {
  display: block;
  padding: 2.5%;
  width: 25%;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(-1px 2px 1px #000000BF);
}

nav {
  position: fixed;
  top: 0;
  padding: 20vh 5vw 0 5vw;
  font-size: 3em;
  background-color: white;
  left: -79vw;
  height: 100vh;
}

nav a {
  font-family: semplicitapro, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #F4BA40;
}
  nav a:hover {
    width: 100%;
    color: #419340;
    background-color: #41934080;
  }
    nav a:active {
      color: #EA3323;
    }
main {
  position: absolute;
  height: 80vh;
  width: 100%;
  top: 10%;
  z-index: -1;
}
  section {
    display: block;
    position: relative;
    width: 100%;
    height: 7vh;  
  }

  .button {
    text-align: center;
    margin-top: 1%;
  }
  .topimg {
    display: inline-block;
    height: 28.33%;
    overflow: hidden;
  }

    .typeimg {
        width: 136%;
        margin-top: -22%;
        margin-left: -24%;
        height: 8%;
        
    }
      h1 {
        float: left;
        width: 100vw;
        position: absolute;
        margin-top: -36%;
        margin-left: 30%;
        font-size: 36pt;
        color: #F4BA40;

        font-family: kansasnew, serif;
        font-weight: 900;
        font-style: normal;
        text-shadow: -1px 1px 5px #000000;
      }
  .vegan {
    display: none;
    
    height: 85%;
    margin-top: 0vh;
    z-index: -2;
  }
    .leaves {
      position: absolute;
      width: 80vw;
      opacity: 30%;
      align-items: center;
      padding: 8%;
      z-index: inherit;
    }
  .non-vegan {
    display: none;
    position: static;
    
    height: 111%;
    margin-top: 0vh;
    z-index: -2;
  }
    .meat {
      position: absolute;
      width: 70vw;
      opacity: 30%;
      margin-left: 20%;
      margin-top: 20%;
      z-index: inherit;
    }
  .drinks {
    display: none;
    position: static;
    
    height: 35%;
    margin-top: 0vh;
    z-index: -2;

  }
    .drink {
      position: absolute;
      width: 37vw;
      opacity: 60%;
      margin-left: 39%;
      margin-top: -4%;
      z-index: inherit;
    }
  .ordernow {
    display: none;
    position: static;
    
    height: 21%;
    margin-top: 0vh;
    z-index: -2;
  }
    .car {
      position: absolute;
      width: 78vw;
      opacity: 40%;
      margin-left: 13%;
      margin-top: 3%;
      z-index: inherit;
    }
  .cater {
    display: none;
    padding-bottom: 5%;
    height: 282%;
    margin-top: 0vh;
    z-index: -2;

  }

  .chefhat {
      position: absolute;
      width: 50vw;
      opacity: 40%;
      margin-left: 23%;
      margin-top: 172%;
      z-index: inherit;
    }
      .spatula {
      position: absolute;
      width: 93vw;
      opacity: 40%;
      margin-left: 3%;
      margin-top: 225.9%;
      z-index: inherit;
    }
      .fork {
      position: absolute;
      width: 10vw;
      opacity: 40%;
      margin-left: 76%;
      margin-top: 265%;
      z-index: inherit;
      }

      button#arrow-button1, button#arrow-button2, button#arrow-button3, button#arrow-button4, button#arrow-button5 {
        border: none;
        background-color: #ffffff00;
      }
        button#arrow-button5 {
          padding-bottom: 19%;
        }

      h2 {
        display: inline-block;
       
        padding-top: 2%;
        font-size: 24pt;
        text-align: center;
        font-family: kansasnew, serif;
        font-weight: 500;
        font-style: normal;
        color: #419340;
      }  
          p { 
            display: inline-block;
            width: 90%;
            margin-left: 4%;
            margin-top: 2%;
            text-align: center;
            font-size: 6pt;
            font-family: semplicitapro, sans-serif;
            font-weight: 400;
            font-style: normal;
          }

.articlevegan, .articlenon-vegan, .articledrinks, .articleordernow {
  margin-top: 2%;
  margin-left: 2.5%;
  width: 95%;

}
  h3, h4, aside {
    font-family: semplicitapro, sans-serif;
    font-weight: 400;
    font-style: normal;
  }
    h3 {
      float: left;
      font-size: 10pt;
    }
      h4 {
        font-size: 10pt;
        text-align: right;
      }
        aside {
          font-size: 6pt;
        }
section.ordericon {
  float: left;
}
  .doordash {
    width: 45%;
    margin-bottom: 1%;
    margin-left: 5%;
  }
    .grubhub {
      width: 35%;
      margin-left: 5%;
    }
      .postmates {
        width: 45%;
        margin-top: 5%;
        margin-left: 5%;
      }
        .curbside {
          width: 35%;
          margin-bottom: 3.5%;
          margin-left: 5%;
        }
.cateringimg {
  width: 100vw;
}
  .cateringtitle {
    display: block;
    text-align: center;
      font-family: semplicitapro, sans-serif;
      font-weight: 400;
      font-style: normal;
      color: #419340;
  }
    .cateringtext {
          width: 90%;
          margin-left: 4%;
          margin-top: 2%;
          font-size: 10pt;
          font-family: semplicitapro, sans-serif;
          font-weight: 300;
          font-style: normal;
    }
      .cateringfilltext {
        width: 90%;
          margin-left: 4%;
          margin-top: 10%;
          margin-bottom: 5%;
          font-size: 16pt;
          font-family: semplicitapro, sans-serif;
          font-weight: 500;
          font-style: normal; 
      }   
        .asterisk {
          color: #EA3323;
        }

.box {
      margin-bottom: 2vh;
      margin-left: 5%;
      font-family: semplicitapro, sans-serif;
      font-weight: 400;
      font-style: normal;
      color: #419340;
}
input {
          font-family: semplicitapro, sans-serif;
          font-weight: 400;
          font-style: normal;
          color: #419340;
          background-size: contain;
          border-radius: 5px;
          padding: 1.5vh 1.5vw;
          margin: auto;
          box-shadow: inset -1px 1px 5px #000000;
          border: none;
          background-color: #ffffff66;
    }
    input:hover {
      color: #EA3323;
    }
      input:focus {
        background-color: #F4BA4080;
      }
    input#message {
          padding: 2vh 2vw;
          width: 85%;
          height: 17vw;
    }
input[type=submit] {
              margin: 5%;
              width: 27vw;
              height: 7.38vh;
              border: none;
              background-color: transparent;

                background: #00000000 no-repeat;
                cursor: pointer;
                background-size: contain;
                filter: drop-shadow(-1px 2px 1px #000000BF);
                box-shadow: none;
            }
button {
  background-color: transparent;
  border: none;
  margin-left: 5%;
}
footer {
  position: fixed;
  bottom: 0;
  height: 10%;
  width: 100%;
}
figure {
  float: left;
  margin-top: 3.7%;
  margin-left: 3%;
}
figure.location {
  text-align: center;
}
figure.hours {
  text-align: center;
  margin-right: 2%;
  margin-top: 0%;
}


 h5{
  margin-bottom: 1%;
  font-family: semplicitapro, sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #F4BA40;
  font-size: 7pt;
  text-shadow: -1px 2px 1px #0000007A;
 }
  h6 {
    font-family: semplicitapro, sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #ffffff;
    font-size: 6pt;
  }
  ul.icons {
    margin-top: 3.7%;
  }

  .yelp {
    width: 5vw;
    margin-left: 1.5%;
    filter: drop-shadow(-1px 2px 1px #000000BF);
  }
  .face {
    width: 5vw;
    margin-left: -.5%;
    filter: drop-shadow(-1px 2px 1px #000000BF);
  }
  .youtube {
    width: 5vw;
    margin-left: 1%;
    filter: drop-shadow(-1px 2px 1px #000000BF);
  }
  .twitter {
    width: 5vw;
    margin-left: 2%;
    filter: drop-shadow(-1px 2px 1px #000000BF);
  }
  .insta {
    width: 5vw;
    margin-left: .5%;
    filter: drop-shadow(-1px 2px 1px #000000BF);
  }




                            /* @media Breakpoints */

/* mobile */
@media screen and (max-width: 479px) {
  body {
    width: 375px;
    height: 627px;
  }
}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 1365px) {
  body {
    width: 768px;
    height: 1024px;
  }
    button#hamburger-button {
    display: none;
  }
  header {
    height: 14.5%;
    width: 100vw;
  }
  a.home {
    display: inline-block;
    position: fixed;
    float: left;
      top: 0;
      padding-top: 6vh;
      margin-left: 40vw;

      font-size: 16pt;
      left: 0;
      background-color: none;
  }
  a.about {
    display: inline-block;
    position: fixed;
    
      top: 0;
      padding-top: 6vh;
      margin-left: 49vw;

      font-size: 16pt;
      left: 0;
      background-color: none;
  }
  a.community {
    display: inline-block;
    position: fixed;

      top: 0;
      padding-top: 6vh;
      margin-left: 58.5vw;

      font-size: 16pt;
      left: 0;
      background-color: none;
  }
  a.merch {
    display: inline-block;
    position: fixed;
      top: 0;
      padding-top: 6vh;
      margin-left: 75vw;


      font-size: 16pt;
      left: 0;
      background-color: none;
  }
  a.contactus {
    display: inline-block;
    position: fixed;
      top: 0;
      padding-top: 6vh;
      margin-left:85vw;
      width: 30%;

      font-size: 16pt;
      left: 0;
      background-color: none;
  }
  nav a:hover {
    width: 0vw;
    color: #EA3323;
    background-color: none;
  }

  .logo {
    float: left;
    width: 25%;
    margin-left: 2%;
    padding-left: 0%;
    margin-top: 2%;
    filter drop-shadow: 0px 3px 10px;
  }
  .topimg {
    height: 22.33%;
    margin-top: 6%;
    margin-bottom: 1%;
  }

    .typeimg {
        width: 136%;
        margin-top: -22%;
        margin-left: -24%;
        height: 8%;
        
    }
.button {
  margin-top: 4%;
}
#arrow {
    float: left;
    margin-top: -10%;
    width: 20%;
    z-index: 2;
    margin-left: 2%;
    padding-right: 0;
  }

button#arrow-button1, button#arrow-button2, button#arrow-button3, button#arrow-button4, button#arrow-button5 {
        width: 30em;
        padding: 2.5em 0 1.5em 0;
        filter: drop-shadow(-1px 2px 1px #000000BF);
        }
        button#arrow-button5 {
          padding-bottom: 19%;
        }
.vegan {
    display: none;
    
    height: 32%;
    margin-top: 0;
    z-index: -2;
  }
  .non-vegan {
    display: none;
    position: static;
    
    height: 38%;
    margin-top: 0;
    z-index: -2;
  }
  .drinks {
    display: none;
    position: static;
    
    height: 14%;
    margin-top: 0;
    z-index: -2;

  }
  .ordernow {
    display: none;
    position: static;
    
    height: 24%;
    margin-top: 0;
    z-index: -2;
  }
  .cater {
    display: none;
    padding-bottom: 5%;
    
    
    height: 272%;
    margin-top: 0;
    z-index: -2;

  }
.cateringtitle {
      float: none;
      font-size: 3.6em;
      margin-top: 0%;
  }
    .cateringtext {
          font-size: 1.4em;
    }
      .cateringfilltext {
          font-size: 1.7em;
          margin-bottom: 10%; 
      }
      h1 {
        margin-top: -42%;
        margin-left: 30%;
        font-size: 6.5em;
      }
h2 {
        float: left;
        margin-left: 4%;
        font-size: 3.6em;
        margin-top: -15%;
      }   
          p { 
            display: inline-block;
            width: 90%;
            margin-left: 4%;
            margin-top: 0%;
            text-align: center;
            font-size: 6pt;
            font-family: semplicitapro, sans-serif;
            font-weight: 400;
            font-style: normal;
          }
.leaves {
    position: absolute;
    width: 38vw;
    opacity: 30%;
    margin-left: 6%;
    margin-top: -2%;
    padding: 0%;
}
  .meat {
    position: absolute;
    width: 23vw;
    opacity: 30%;
    margin-left: 66%;
    margin-top: 3%;
    z-index: inherit;
  }
    .drink {
      position: absolute;
      width: 12vw;
      opacity: 60%;
      margin-left: 26%;
      margin-top: -2%;
      z-index: inherit;
    }
      .car {
        position: absolute;
        width: 63vw;
        opacity: 40%;
        margin-left: 17%;
        margin-top: 3%;
        z-index: inherit;
      }
        .chefhat {
          position: absolute;
          width: 33vw;
          opacity: 40%;
          margin-left: 59%;
          margin-top: 165%;
          z-index: inherit;
        }
          .spatula {
            position: absolute;
            width: 93vw;
            opacity: 40%;
            margin-left: 3%;
            margin-top: 196.9%;
            z-index: inherit;
          }
            .fork {
              position: absolute;
              width: 10vw;
              opacity: 40%;
              margin-left: 56%;
              margin-top: 222%;
              z-index: inherit;
            }

.articlevegan, .articlenon-vegan, .articledrinks {
  float: left;
  width: 45%;

}
  h3, h4, h5 {
    font-family: semplicitapro, sans-serif;
    font-weight: 400;
    font-style: normal;
  }
    h3 {
      float: left;
      font-size: 10pt;
    }
      h4 {
        font-size: 10pt;
        text-align: right;
      }
        h5 {
          font-size: 1.5em;
        }
        h6 {
          font-size: 1em;
        }

        form {
          padding-bottom: 20%;
        }

    footer {
    height: 14%;
  }
  figure {
    margin-top: 3.7%;
    margin-left: 4.5%%;
  }
    figure.location {
      font-size: 0.8em;
    }
      figure.hours {
        font-size: 0.8em;
        margin-top: 2.1%;
      }
  ul.icons {
        margin-top: 1.4%;
    margin-left: -71.5%;
  }
}

/* laptop */
@media screen and (min-width: 1366px) and (max-width: 1919px) {
  body {
    width: 1366px;
    height: 768px;
  }

button#hamburger-button {
    display: none;
  }
  header {
    height: 19.5%;
    width: 100vw;
  }

  a.home {
    display: inline-block;
    position: fixed;
    float: left;
      top: 0;
      padding-top: 7vh;
      margin-left: 40vw;

      font-size: 21pt;
      left: 0;
      background-color: none;
  }
  a.about {
    display: inline-block;
    position: fixed;
    
      top: 0;
      padding-top: 7vh;
      margin-left: 50vw;

      font-size: 21pt;
      left: 0;
      background-color: none;
  }
  a.community {
    display: inline-block;
    position: fixed;

      top: 0;
      padding-top: 7vh;
      margin-left: 60vw;

      font-size: 21pt;
      left: 0;
      background-color: none;
  }
  a.merch {
    display: inline-block;
    position: fixed;
      top: 0;
      padding-top: 7vh;
      margin-left: 75vw;


      font-size: 21pt;
      left: 0;
      background-color: none;
  }
  a.contactus {
    display: inline-block;
    position: fixed;
      top: 0;
      padding-top: 7vh;
      margin-left:85vw;
      width: 30%;

      font-size: 21pt;
      left: 0;
      background-color: none;
  }
  nav a:hover {
    width: 0vw;
    color: #EA3323;
    background-color: none;
  }

  .logo {
    float: left;
    width: 17%;
    margin-left: 2%;
    padding-left: 0%;
    padding-top: 1.5%;
    filter drop-shadow: 0px 3px 10px;
  }
  .topimg {
    height: 22.33%;
    margin-top: 5.3%;
    margin-bottom: -1%;
  }

    .typeimg {
        width: 136%;
        margin-top: -22%;
        margin-left: -24%;
        height: 8%;
        
    }
section {
    display: block;
    position: relative;
    width: 100vw;
    height: 5vh;  
  }
.button {
  height: 6.5vh;
}
button#arrow-button1, button#arrow-button2, button#arrow-button3, button#arrow-button4, button#arrow-button5 {
    float: left;
    position: fixed;
    left: 0;
    filter: drop-shadow(-1px 2px 1px #000000BF);
    margin-left: 0%;
    margin-top: 1%;
      }
      button#arrow-button5 {
        height: 0%;
      }
.vegan {
    display: none;
    
    height: 48%;
    margin-top: 0;
    z-index: -2;
  }
  .non-vegan {
    display: none;
    position: static;
    
    height: 56%;
    margin-top: 0;
    z-index: -2;
  }
  .drinks {
    display: none;
    position: static;
    
    height: 20%;
    margin-top: 0;
    z-index: -2;

  }
  .ordernow {
    display: none;
    position: static;
    
    height: 55%;
    margin-top: 0;
    z-index: -2;
  }
  .cater {
    float: left;
    display: none;
    padding-bottom: 5%;
    
    
    height: 0%;
    margin-top: 0;
    z-index: -2;

  }
.cateringtitle {
    float: none;
    width: 75vw;
    text-align: center;
      font-family: semplicitapro, sans-serif;
      font-weight: 400;
      font-size: 3em;
      font-style: normal;
      color: #419340;
      margin-top: -41%;
      margin-left: -15%;
  }
    .cateringtext {
      width: 25vw;
      margin-left: 32%;
      margin-top: -30%;
      font-size: 0.9em;
      font-family: semplicitapro, sans-serif;
      font-weight: 400;
      font-style: normal;
      text-align: justify;
      position: absolute;
    }
      .cateringfilltext {
        width: 23vw;
        margin-left: 82.8%;
        margin-top: -37%;
        margin-bottom: 35%;
        font-size: 0.8em;
        font-family: semplicitapro, sans-serif;
        font-weight: 500;
        font-style: normal;
        display: block;
        float: left;
      }
h1 {
        margin-top: -48.6%;
        margin-left: 35%;
        font-size: 8.5em;
      }
h2 {
  float: left;
  position: absolute;
  margin-left: 0%;
  padding-top: 0%;
  font-size: 3em;
  width: 400%;
  text-align: left;
      }   
          p.options { 
                width: 60vw;
                margin-left: 27%;
                margin-top: -2%;
             font-size: 9pt;
   }
.leaves {
      position: absolute;
      width: 22.7vw;
      opacity: 30%;
      z-index: inherit;
      margin-left: 23.5%;
      margin-top: -9.6%;
    }

    .meat {
      position: absolute;
      width: 12vw;
      opacity: 30%;
      margin-left: 72%;
      margin-top: -5%;
      z-index: inherit;
    }

    .drink {
      position: absolute;
      width: 8vw;
      opacity: 60%;
      margin-left: 38%;
      margin-top: -14%;
      z-index: inherit;
    }

    .car {
      position: absolute;
      width: 50vw;
      opacity: 40%;
      margin-left: 49%;
      margin-top: -10.3%;
      z-index: inherit;
    }

  .chefhat {
      position: absolute;
      width: 18vw;
      opacity: 40%;
      margin-left: 45%;
      margin-top: -17%;
      z-index: inherit;
    }
      .spatula {
      position: absolute;
      width: 22.9vw;
      opacity: 40%;
      margin-left: 70.7%;
      margin-top: -22.2%;
      z-index: inherit;
      }   
      .fork {
        position: absolute;
        width: 2.5vw;
        opacity: 40%;
        margin-left: 83%;
        margin-top: -18%;
        z-index: inherit;
      }

article.articlevegan {
    width: 30%;
}
.articlevegan {
    float: left;
    margin-left: 5%;
}
#list1 {
  margin-left: 25%;
}
  article.articlenon-vegan {
    width: 30%;
  }
  .articlenon-vegan {
    float: left;
    position: absolute;
    margin: -7%;
  }
#list3, #list4 {
  margin-top: -4%;
}
#list3 {
  margin-left: 25%;
}
#list4 {
  margin-left: 60%;
}
  p#placetop2.options {
    position: absolute;
    margin-top: -7%;
  } 
  #list3 {
    margin-left: 25%;
  }
    article.articledrinks {
      width: 30%;
    }
    .articledrinks {
      float: left;
      position: absolute;
      margin: -7%;
    }  
    #list5, #list6 {
      margin-top: -11%;
    }
      #list5 {
        margin-left: 25%;
      }
       #list6 {
        margin-left: 60%;
       }
article.articledrinks {
      width: 30%;
      margin-top: -13%;
    }
    .articledrinks {
      float: left;
      position: absolute;
      margin: -7%;
    }
      article.articleordernow {
      width: 60vw;
      height: 0%;
      }
        .articleordernow {
         float: left;
         margin-top: -14%;
         margin-left: 25%;
        }
.cateringimg {
        width: 13vw;
        float: left;
        position: absolute;
        display: inline-block;
        margin-top: -37%;
}
  article.articlecater {
      width: 55%;
      }
        .articlecater {
         float: left;
         position: absolute;
         margin-left: 25%;
        }
.postmates {
    width: 28vw;
    margin-left: 3%; 
} 
.doordash {
  margin-bottom: 0;
  float: left; 
}
.curbside {
  margin-top: 15%; 
} 
.grubhub {
}   

  h3, h4, h5 {
    font-family: semplicitapro, sans-serif;
    font-weight: 400;
    font-style: normal;
  }
    h3 {
      float: left;
      font-size: 9pt;
    }
      h4 {
        font-size: 10pt;
        text-align: right;
      }
        h5 {
          font-size: 1em;
        }
        h6 {
          font-size: 1em;
        }

.box {
      margin-bottom: -0.2vh;
      margin-left: 0%;
      font-family: semplicitapro, sans-serif;
      font-weight: 400;
      font-style: normal;
      color: #419340;
      width: 26vw;
      font-size: 0.9em;
}

form {
    padding-bottom: 16%;
    width: 1vw;
    margin-top: -34.9%;
    margin-left: 82%;
    float: left;
}
input {
    font-family: semplicitapro, sans-serif;
    border-radius: 5px;
    padding: 0.2vh 0.2vw;
    box-shadow: inset -1px 1px 5px #000000;
    border: none;
    background-color: #ffffff66;
}
    input:hover {
      color: #EA3323;
    }
      input:focus {
        background-color: #F4BA4080;
      }
    input#message {
          padding: 2vh 2vw;
          height: 0vw;
    }
input[type=submit] {
              margin: 10%;
              width: 6vw;
              height: 7.38vh;
              border: none;
              background-color: transparent;
              background: #00000000 no-repeat;
              cursor: pointer;
              background-size: contain;
              filter: drop-shadow(-1px 2px 1px #000000BF);
              box-shadow: none;
              margin-left: 0%;
            }
button {
  background-color: transparent;
  border: none;
  margin-left: 5%;
}
section.button {
  width: 1%;
}
    footer {
    height: 21%;
    padding: 0;
  }
  figure {
      float: left;
      margin-top: 0.7%;
      margin-left: 2.95%;
      margin-right: 5.75%;
  }
    figure.location {
      margin-top: 3%;
    }
      figure.hours {
        text-align: center;
        margin-right: 2%;
        margin-top: -1%;
      }
  .yelp {
    width: 3vw;
  }
  .face {
    width: 3vw;
  }
  .youtube {
    width: 3vw;
  }
  .twitter {
    width: 3vw;
  }
  .insta {
    width: 3vw;
  }
  img#sociamedia {
    margin: 9.5vh;
    margin-top: -2%;

  }
}

/* desktop */
@media screen and (min-width: 1920px) {
  body {
    width: 1920px;
    height: 1080px;
  }

  button#hamburger-button {
    display: none;
    width: 20vw;
  }

  header {
    height: 19.5%;
    width: 100vw;
  }

a. {
    display: inline-block;
    position: fixed;
    float: left;
      top: 0;
      padding-top: 6vh;
      margin-left: 40vw;

      font-size: 16pt;
      left: 0;
      background-color: none;
  }
    a.home {
    display: inline-block;
    position: fixed;
    float: left;
      top: 0;
      padding-top: 6vh;
      margin-left: 50vw;

      font-size: 0.8em;
      left: 0;
      background-color: none;
  }
  a.about {
    display: inline-block;
    position: fixed;
    
      top: 0;
      padding-top: 6vh;
      margin-left: 58vw;

      font-size: 0.8em;
      left: 0;
      background-color: none;
  }
  a.community {
    display: inline-block;
    position: fixed;

      top: 0;
      padding-top: 6vh;
      margin-left: 66vw;

      font-size: 0.8em;
      left: 0;
      background-color: none;
  }
  a.merch {
    display: inline-block;
    position: fixed;
      top: 0;
      padding-top: 6vh;
      margin-left: 79vw;


      font-size: 0.8em;
      left: 0;
      background-color: none;
  }
  a.contactus {
    display: inline-block;
    position: fixed;
      top: 0;
      padding-top: 6vh;
      margin-left: 87vw;
      width: 30%;

      font-size: 0.8em;
      left: 0;
      background-color: none;
  }
  nav a:hover {
    width: 0vw;
    color: #EA3323;
    background-color: none;
  }

  .logo {
    float: left;
    width: 17%;
    margin-left: 2%;
    padding-left: 0%;
    padding-top: 1.5%;
    filter drop-shadow: 0px 3px 10px;
  }
  .topimg {
    height: 22.33%;
    margin-top: 5.3%;
    margin-bottom: -1%;
  }

    .typeimg {
        width: 136%;
        margin-top: -22%;
        margin-left: -24%;
        height: 8%;
        
    }
section {
    display: block;
    position: relative;
    width: 100vw;
    height: 5vh;  
  }
.button {
  height: 6.5vh;
}
button#arrow-button1, button#arrow-button2, button#arrow-button3, button#arrow-button4, button#arrow-button5 {
    float: left;
    position: fixed;
    left: 0;
    filter: drop-shadow(-1px 2px 1px #000000BF);
    margin-left: 0%;
    margin-top: 1%;
      }
      button#arrow-button5 {
        height: 0%;
      }
.vegan {
    display: none;
    
    height: 48%;
    margin-top: 0;
    z-index: -2;
  }
  .non-vegan {
    display: none;
    position: static;
    
    height: 56%;
    margin-top: 0;
    z-index: -2;
  }
  .drinks {
    display: none;
    position: static;
    
    height: 20%;
    margin-top: 0;
    z-index: -2;

  }
  .ordernow {
    display: none;
    position: static;
    
    height: 55%;
    margin-top: 0;
    z-index: -2;
  }
  .cater {
    float: left;
    display: none;
    padding-bottom: 5%;
    
    
    height: 0%;
    margin-top: 0;
    z-index: -2;

  }
.cateringtitle {
    float: none;
    width: 75vw;
    text-align: center;
      font-family: semplicitapro, sans-serif;
      font-weight: 400;
      font-size: 5em;
      font-style: normal;
      color: #419340;
      margin-top: -41%;
      margin-left: -15%;
  }
    .cateringtext {
      width: 23.4vw;
      margin-left: 32%;
      margin-top: -28.5%;
      font-size: 1.2em;
      font-family: semplicitapro, sans-serif;
      font-weight: 400;
      font-style: normal;
      text-align: justify;
      position: absolute;
    }
      .cateringfilltext {
        width: 24.2vw;
        margin-left: 85%;
        margin-top: -35%;
        margin-bottom: 39%;
        font-size: 1.2em;
        font-family: semplicitapro, sans-serif;
        font-weight: 500;
        font-style: normal;
        display: block;
        float: left;
      }
      h1 {
        margin-top: -48.6%;
        margin-left: 34%;
        font-size: 12.5em;
      }
h2 {
  float: left;
  position: absolute;
  margin-left: 0%;
  padding-top: 0%;
  font-size: 4em;
  width: 400%;
  text-align: left;
      }   
          p.options { 
                width: 60vw;
                margin-left: 27%;
                margin-top: -2%;
             font-size: 1.2em;
          }
.leaves {
      position: absolute;
      width: 22.7vw;
      opacity: 30%;
      z-index: inherit;
      margin-left: 23.5%;
      margin-top: -9.6%;
    }

    .meat {
      position: absolute;
      width: 12vw;
      opacity: 30%;
      margin-left: 72%;
      margin-top: -5%;
      z-index: inherit;
    }

    .drink {
      position: absolute;
      width: 8vw;
      opacity: 60%;
      margin-left: 38%;
      margin-top: -14%;
      z-index: inherit;
    }

    .car {
      position: absolute;
      width: 50vw;
      opacity: 40%;
      margin-left: 49%;
      margin-top: -10.3%;
      z-index: inherit;
    }

  .chefhat {
      position: absolute;
      width: 18vw;
      opacity: 40%;
      margin-left: 45%;
      margin-top: -17%;
      z-index: inherit;
    }
      .spatula {
      position: absolute;
      width: 26.9vw;
      opacity: 40%;
      margin-left: 70.7%;
      margin-top: -21.7%;
      z-index: inherit;
      }   
      .fork {
        position: absolute;
        width: 2.5vw;
        opacity: 40%;
        margin-left: 83%;
        margin-top: -18%;
        z-index: inherit;
      }

article.articlevegan {
    width: 30%;
}
.articlevegan {
    float: left;
    margin-left: 5%;
}
#list1 {
  margin-left: 25%;
}
  article.articlenon-vegan {
    width: 30%;
  }
  .articlenon-vegan {
    float: left;
    position: absolute;
    margin: -7%;
  }
#list3, #list4 {
  margin-top: -3%;
}
#list3 {
  margin-left: 25%;
}
#list4 {
  margin-left: 60%;
}
  p#placetop2.options {
    position: absolute;
    margin-top: -7%;
  } 
  #list3 {
    margin-left: 25%;
  }
    article.articledrinks {
      width: 30%;
      margin-top: -13%;
    }
    .articledrinks {
      float: left;
      position: absolute;
      margin: -7%;
    }  
    #list5, #list6 {
      margin-top: -11%;
    }
      #list5 {
        margin-left: 25%;
      }
       #list6 {
        margin-left: 60%;
       }
      article.articleordernow {
      width: 60vw;
      height: 0%;
      }
        .articleordernow {
         float: left;
         margin-top: -14%;
         margin-left: 25%;
        }
.cateringimg {
        width: 13vw;
        float: left;
        position: absolute;
        display: inline-block;
        margin-top: -37%;
}
  article.articlecater {
      width: 55%;
      }
        .articlecater {
         float: left;
         position: absolute;
         margin-left: 25%;
        }
.postmates {
    width: 28vw;
    margin-left: 3%; 
} 
.doordash {
  margin-bottom: 0;
  float: left; 
}
.curbside {
  margin-top: 15%; 
} 
.grubhub {
}   

  h3, h4, h5 {
    font-family: semplicitapro, sans-serif;
    font-weight: 400;
    font-style: normal;
  }
    h3 {
      float: left;
      font-size: 1.1em;
      position: absolute;
    }
      h4 {
        font-size: 1.1em;
        text-align: right;
      }
        h5 {
          font-size: 1.7em;
        }
        h6 {
          font-size: 1.5em;
        }
aside {
  font-size: 1em;
}
.box {
      margin-bottom: -0.2vh;
      margin-left: 0%;
      font-family: semplicitapro, sans-serif;
      font-weight: 400;
      font-style: normal;
      color: #419340;
      width: 26vw;
      font-size: 1em;
}

form {
    padding-bottom: 16%;
    width: 1vw;
    margin-top: -34.9%;
    margin-left: 82%;
    float: left;
}
input {
    font-family: semplicitapro, sans-serif;
    border-radius: 5px;
    padding: 0.2vh 0.2vw;
    box-shadow: inset -1px 1px 5px #000000;
    border: none;
    background-color: #ffffff66;
  }
    input:hover {
      color: #EA3323;
    }
      input:focus {
        background-color: #F4BA4080;
      }
    input#message {
          padding: 2vh 2vw;
          height: 0vw;
    }
input[type=submit] {
              margin: 10%;
              width: 6vw;
              height: 7.38vh;
              border: none;
              background-color: transparent;
              background: #00000000 no-repeat;
              cursor: pointer;
              background-size: contain;
              filter: drop-shadow(-1px 2px 1px #000000BF);
              box-shadow: none;
              margin-left: 0%;
            }
button {
  background-color: transparent;
  border: none;
  margin-left: 5%;
}
section.button {
  width: 1%;
}
    footer {
    height: 21%;
    padding: 0;
  }
  figure {
      float: left;
      margin-top: 2.6%;
      margin-left: 4.2%;
  }
    figure.hours {
    text-align: center;
    margin-right: 2%;
    margin-top: 2.7%;
  }
  ul.icons {
    margin-top: 0%;
    width: 180vw;
  }

.yelp {
    width: 3vw;
  }
  .face {
    width: 3vw;
  }
  .youtube {
    width: 3vw;
  }
  .twitter {
    width: 3vw;
  }
  .insta {
    width: 3vw;
  }
}

  

/* CSS COLOR CLASSES */

.red {
  background-color: #EA3323;
}

.yellow {
  background-color: #F4BA40;
}

.green {
  background-color: #419340;
}

.greent50 {
  background-color: #41934080;
}

.greent75 {
  background-color: #419340BF;
}

.white {
  
}

.whitet {
  background-color: #ffffffCC;
}

.black {
  background-color: black;
}