/*  GRDES66 Ascii logo "A tim"
      ___                    ___                       ___     
     /\  \                  /\  \          ___        /\__\    
    /::\  \                 \:\  \        /\  \      /::|  |   
   /:/\:\  \                 \:\  \       \:\  \    /:|:|  |   
  /::\~\:\  \                /::\  \      /::\__\  /:/|:|__|__ 
 /:/\:\ \:\__\              /:/\:\__\  __/:/\/__/ /:/ |::::\__\
 \/__\:\/:/  /             /:/  \/__/ /\/:/  /    \/__/~~/:/  /
      \::/  /             /:/  /      \::/__/           /:/  / 
      /:/  /              \/__/        \:\__\          /:/  /  
     /:/  /                             \/__/         /:/  /   
     \/__/                                            \/__/    
*/

* {
     margin: 0;
     padding: 0;
     list-style-type: none;
     border: none;
}

body {
     background-color: #E5DDC5;
}

header {
     position: fixed;
     width: 100vw;
     height: 100px;
     background-color:#308383;
}

figure#logo {
     float: left;
     margin-left: 0px;
     height: 100%;
     width: 10%;
     display: inline-block;
}
     img#burger-logo {
          height: 99px;
}
     h1#title {
          float: left;
          display: inline;
          vertical-align: center;
          text-align: left;
     }

button {
     position: fixed;
     top: 20px;
     right: 20px;
     font-size: 3em;
     line-height: 0;
     padding: 28px 10px 30px 10px;
     border: 4x solid #000;
     border-radius: 20%;
     background-color: #22B573;
}

     button:hover {
          color: #000;
          background-color: #fff;
          border-radius: 4px solid #000;
     }

nav {
     position: fixed;
     top: 100px;
     right: -280px;
     font-size: 3em;
     font-family: arvo;
     text-align: right;
     transition: right 0.5s;
     background-color: #000;
     padding: 10px;
}

     .slide-the-drawer {
          right: 20px;
     }

     a:link {
          color: #22B573;
          text-decoration: none;
     }

     a:visited {
          color: #308383;
          text-decoration: none;
     }

     a:hover {
          color: #FFFFFF;
          text-decoration: underline;
     }


img#burger-header {
     margin-top: ;
     width: 100vw;
}

section {
     max-height: 25vh;
     width: 33vw;
     float: left;
     margin-top: 10px;
     background-color: #E5DDC5;
     display: inline;
}
     article#quote {
     font-size: 16pt;
     font-family: arvo;
     color: #22B573;
     text-align: center;
     padding: 10px;
     }

     article#icons {
     font-size: 16pt;
     font-family: arvo;
     color: #22B573;
     text-align: center; 
     padding: 20px;    
     }
          img#twitter {
               height: 50px;
          }

          img#instagram {
               height: 50px;
          }

          .scale-times-two:hover {
               transform: scale(2);
               -ms-transform: scale(2);
               -webkit-transform:  scale(2);
          }
          

img#diner {
     width: 99%;
}

img#pie {
     width: 99%;
}

/* CSS Media Breaks

mobile display: 375px x 627 px (portrait);
tablet display 768px x 1024px (portrait)
laptop display 1366px x 768px
desktop display 1920px x 1080px */

@media screen and (max-width: 768px) {
     section#mobile {
          width: 100vw;
          display: block;
          margin-bottom: 15vh;
     }

     article#icons {
          width: 100vw;
          display: block;
          margin-bottom: 5vh;
     }

     img#diner {
          width: 95%;
          display: block;
          margin-left: 2vw;
          margin-right: 2vh;
     }
     img#pie {
          width: 95%;
          display: block;
          margin-left: 2vw;
          margin-right: 2vh;
     }

          section#desktop {
               display: none;
          }
}

@media screen and (min-width: 769px) and (max-width:  5000px) {
     section#desktop {
          width: 33vw;
          max-height: 25vh;
     }
          section#mobile {
               display: none;
          }
}

footer {
     width: 100vw;
     padding: 2vw;
     font-size: 1em;
     display: inline-block;
     margin-top: 20vh;
}

h5 {
     font-family: arvo;
     text-align: center;
}