/*
     __ _      _        ___      _                 _             
  /\ \ (_) ___| | __   / _ \__ _| | ___  _ __ ___ (_)_ __   ___  
 /  \/ / |/ __| |/ /  / /_)/ _` | |/ _ \| '_ ` _ \| | '_ \ / _ \ 
/ /\  /| | (__|   <  / ___/ (_| | | (_) | | | | | | | | | | (_) |
\_\ \/ |_|\___|_|\_\ \/    \__,_|_|\___/|_| |_| |_|_|_| |_|\___/ 
                                                                 
*/

body {
     background-color: white;
     }

footer {
 position: absolute;
 bottom: 0;
 width: 100%;
}

.footer {
  position: relative;
  left: 0;
  bottom: 0;
}

h1{
     font-family: "segoe script", bold;
     color: #cd294c;
     font-size: 36pt;
     text-align: center;
}

h2{
font-family: "Constantia";
     color: black;
     font-size: 24pt;
     text-align: center;
}

h3{
     font-family: "Constantia", bold;
     color: black;
     font-size: 18pt;
     text-align: center;
}

h4{
     font-family: "Constantia", bold;
     color: black;
     font-size: 16pt;
     text-align: center;
}


ul{
     display: inline-flex;
    list-style-type: none;
    text-align: center;

}

a:link {
     font-family: Constantia;
     color: black;
     text-decoration: underline;
     margin: 40px;
}

a:active {
     color: #ededed ;
     text-decoration: underline;
}



#navbar{ 
align-content: center;
text-align: center;
 }


nav{
     position: fixed;
     top: 0;
     font-size: 4em;
     padding: 10vh 5vw 10vw 5vw;
     background-color: white;
     border-color: #cd294c;
     border-width: 1vh;
     border-style: solid;
     list-style-type: none;
          left: -200vw;
          transition: transform 1s;
}
     .slide-the-drawer {
          transform: translateX(200vw);
     }

     nav ul{
          list-style-type: none;
     }

     nav ul li a {
          text-decoration: none;
     }

button#hamburger-button{
     position: fixed;
     z-index: 1;
     font-size: 2em;
     line-height: 1em;
     padding: 0.1em 0.2em 0.2em 0.2em;
     border: 0.2em solid #cd294c;
     border-radius: 10%;
     margin: 0.2em ;
}

button#hamburger-button:hover{
     color: black;
     background-color: white;
     border-color: black;
}


section{
     float: left;
     margin-top: 1.95vw;
}

section.addy{
     width:  300px;
     height: 500px;
}

.addy{
     background-color: #ededed ;
     
     width: 300px;
     border: 5px solid black;
     padding: 50px;
     margin: 20px;
}

.main img {
  width: 1000px;
  border: 5px solid #cd294c;
}

.left{
     display: inline-flex;
     text-align: left;
}

.right{
     text-align: right;
}

section.top{
     width: 100%;
     height: .88%;
     margin: 0 auto;
     margin-left: 10 auto;
}

.top{
     background-color: #c1e096;
}

section.top{
     width: 100%;
     height: .70%;
     margin: 0 auto;
     margin-left: 10 auto;

}

.cut{
     background-color: black;
}

.item img{
      display: inline-flex;
      width: 300px;
      height: 200px;
       border: 5px solid #cd294c;
}

section.food{
     width: 86%;
     height: 40%;
}

section.cut{
     width: 100%;
     height: .88%;
     margin: 0 auto;
     margin-left: 10 auto;

}


section.form{
     border: 5px solid black;
     margin: 35px;
     margin-left: 43%;
}

.center img{
     align-content: center;
     align-items: center;
}

.center{
     align-content: center;
     align-items: center;
}

section#map {
     width: 100vw;
     height: 70vw;
}

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
}




#footer {
  position: relative;
  margin-top: -180px;
  height: 100px;
  clear: both;
  background-color: white;
}

#cen {
     text-align: center;
}

section.cen{
     text-align: center;
}


body {
  background-color: white;
}


/* BREAKPOINT FOR TABLET */

@media screen and (min-width: 480px) and (max-width: 1365px) {


}

/*BREAKPOINT FOR DESKTOP */

@media screen and (min-width: 1366px) and (max-width: 1919px) {


}


@keyframes fade-in {
          0%        {opacity: 0;}
          100% {opacity: 1;}
     }

          @-moz-keyframes fade-in {
               0%        {opacity: 0;}
               100% {opacity: 1;}
          }

          @-o-keyframes fade-in {
               0%        {opacity: 0;}
               100% {opacity: 1;}
          }
          
          @-webkit-keyframes fade-in {
               0%        {opacity: 0;}
               100% {opacity: 1;}
          }

.fade-in {
     animation-name: fade-in;
          -moz-animation-name: fade-in;
          -ms-animation-name: fade-in;
          -o-animation-name: fade-in;
          -webkit-animation-name: fade-in;
     animation-duration: 1s;
          -moz-animation-duration: 1s;
          -o-animation-duration: 1s;
          -webkit-animation-duration: 1s;
     animation-fill-mode: backwards;
          -moz-animation-fill-mode: backwards;
          -o-animation-fill-mode: backwards;
          -webkit-animation-fill-mode: backwards;
}