*,
*::after,
*::before {
  box-sizing: border-box;
}

body > * { background: #ffffff; }
body {
    margin: 0;
    font-family: 'Roboto','Helvetica Neue', Helvetica, Arial, sans-serif;
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 80px 1fr auto;
    grid-template-areas:
    "head head head"
    "main main main"
    "main main main"
    "foot foot foot";
}
a {
  text-decoration: none;
  color: #000000;
}
/*
h2 {
    font-size: 3.5vmax;
}
h3 {
    font-size: 2vmax;
}
*/
ul{
  display: flex;      
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li{
  margin: 15px 15px 15px 0;
  padding: 5px;
  text-align: left;
}
header 	{ 
    grid-area: logo; 
    background-color: #181006;
    color: #ffda00;
    align-content: center;
}
header h1 {
  margin: 0 auto;
  padding: 0 0 0 30px;
  font-size: 3rem;
}
header h2 {
  margin: 0 auto;
  padding: 0 0 0 40px;
  font-size: 1rem;
}
.header-area {
  grid-area: head;
  display: grid;
  background-color: #181006;
  width: 100%;
  grid-template: 80px / repeat(3, 1fr);
  grid-template-areas:
    "logo navi navi";
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: grid;
  height: 50px;
  grid-template: auto / repeat(4, 1fr);
  gap: 20px;
  justify-items: center;
  align-content: center;
}
#topmenu {
    grid-area: navi;
    grid-column: 2 / span 2;
    text-transform: uppercase;
    background-color: #181006;
    height: 80px;
    align-content: center;
}
#topmenu ul {
  text-transform: uppercase;
  background-color: #181006;
  color: #ffda00;
}
#topmenu a {
  transition: all 0.3s ease-in-out;
  color: #ffffff;
}
#topmenu a:hover {
  color:#ffda00;
  border-bottom: 4px solid #ffda00;
}
.page-home #topmenu a.navhome {
  color:#ffda00;
}
.page-about #topmenu a.navabout {
  color:#ffda00;
}
.page-menu #topmenu a.navmenu {
  color:#ffda00;
}
.page-contact #topmenu a.navcontact {
  color:#ffda00;
}
nav#topmenu {
  align-self: start;
  max-width: 75%;
}
main {
  grid-area: main; 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
  "sec1 sec1 sec1"
  "sec2 sec3 sec3";
}
main#about {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;  
grid-template-areas:
"sec1 sec1"
"sec2 sec2"
"sec3 sec3";
}
main#contact {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;  
grid-template-areas:
"sec1 sec1"
"sec2 sec2"
"sec3 sec3";
}
main.home {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto; 
grid-template-areas:
"sec1"
"sec2"
"sec3";
}
#s1 { 
    grid-area: sec1; 
}
#s1.about { 
  grid-area: sec1;
  grid-column: 1 /span2;
  margin:0;
}
#s1.about h2 {
  margin:0;
  padding:30px 0 0 2%;
}
#s1.about p {
  margin:0;
  padding:20px 0 10px 2%;
}
#s2 { 
  grid-area: sec2;
}
#s3 { 
  grid-area: sec3; 
}
#s2.mission, #s3.values {
  display: grid;
  align-content: space-evenly;
  grid-template-columns: 50% 50%;
}
#s2.contact{
  grid-column: 1 / span2;
}
#s3.contact{
  display: grid;
  align-content: space-evenly;
  grid-template-columns: 50% 50%;
}
#menupage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 60px 1fr auto;
  grid-template-areas:
  "mnav mnav mnav"
  "menu menu menu"
  "gall gall gall";
  padding: 10px 15px;
}
#menu {
  grid-area: menu;
  flex-direction: column;    
  grid-column: 1 / span 3;              
}
#menunav {
  grid-area: mnav; 
}
#menunav a:hover {
  background-color:#181006;
  color:#ffda00;
  padding: 3px;
}
#gallery {
  display: grid;
  grid-area: gall;
  grid-column: 1 /span3;
  grid-template-columns: 33% 33% 33%;
  grid-template-columns: repeat(auto-fiil, minmax(14rem, 1fr)); 
  justify-content: center;
  max-width: 99%;
}
#gallery>div {
  margin: 0;
  padding: 0;
  line-height: 0;
}
#gallery img {
  max-width: 100%;
  height:auto;
}

div.mission div, div.values div {
  align-content: center;
  margin:10%;
}
#s2.mission img, #s3.values img {
  display: grid;
  align-content: end;
  object-fit: cover;
  padding: 0;
  height: 100%;
  width: 100%
}
ul.bizinfo {
  display: flex;      
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li.bizinfo {
  margin: 0;
  padding: .33em;
  font-size: 1rem;
  text-align: left;
}
.contact {
  margin: 10px 30px;
}
.google-maps {
  grid-column: 1 /span2;
  position: relative;
  padding-bottom: 25%;
  margin-top: 2em;
  height: 0;
  overflow: hidden;    
}
.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100%  !important;
}
footer {
    grid-area: foot;
    background-color: #c0c0c0;
    position: sticky;
    bottom: 0;
    display: grid;
    background-color:#181006;
    color: #ffda00;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
    "address hours"
    ". copy";
    align-content:center;
    border-top: 10px solid #ffffff; 
}
#copy {
  grid-area: copy;
}
footer section {
  text-align: center;
  align-content: center;
}
footer div#copy {
  text-align: right;
  align-content: end;
  margin: 0 3em 1em 0;
}
#address { 
    grid-area: address;    
    padding: 15px;
    text-align: center;
    justify-content: center;
}
#address h2{ 
  display:block;
  clear: both;
}
#logo { 
    grid-area: logo; 
}
#hours { 
    grid-area: hours;
    padding: 15px;
}
#directions { 
    grid-area: directions; 
}
time {
  padding: .25em;
  line-height: 1.5em;
}
.street {
  line-height: 1.5em;
  text-align: left;
}
section {
    margin: 0;
}
ul.drinklist {
  display: flex;      
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li.drinklist {
  margin: 0;
  padding: .33em;
  font-size: 1rem;
  text-align: left;
}
nav#menunav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: grid;
    height: 50px;
    grid-template: auto / repeat(8, 1fr);
    gap: 15px;
    justify-items: center;
    align-content: center;
}
.menulist p {
  font-size: 1rem;
  margin-bottom: .75rem;
}
.menutitle {
  text-align: center;
  background-color: #181006;
}
.menutitle h2 {
color: #ffda00;
font-size: 2rem;
padding: 0;
margin: .25em 0;
}
.menusub {
  flex-basis: 100%;
  text-align: center;
  text-decoration-line: underline;
  text-transform: uppercase;
}
.menulist {
    grid-column: 2 / 4;
    grid-row: 4 / 5;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
}
.menulist h3 {
    font-size: 1.8rem;
    font-weight:600;
    margin-bottom: .5rem;
    flex: 1 0 auto;
}
.menuitem {
  flex: 0 1 calc(33% - .5rem);
  justify-content: space-between;
  align-content: normal;
  margin: 0 .25rem;
}
.menusub h3 {
  font-size: 2.5rem;
}
.price {
  font-weight:600;
  }
textarea {
  height: 10rem;
}
fieldset {
  margin-top: 2em;
  max-width:935px;
  background-color: #ffffff;
  border: none;
  outline: none;
}
legend {
  visibility: hidden;
}
.contact-main {
  background-color: #ffffff;
}
.contact ul {
  display: flex;      
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style-type: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
.contact li {
  background: none;
  margin: 0 0 0 1em;
  padding: 5px;
  text-align: left;
}
.formradio {
  text-align: left;
}
.socials {
  width: 1.2em;
  height: 1.2em;
  margin: 0 .5em 0 0;
  }
.bizinfo a:hover {
border-bottom:2px solid #ffda00;
}
.first-word {
font-weight:600;
}
input[type=radio] {
  border: 0px;
  width: 100%;
  height: 1em;
}
video {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* INPUT AddOn */

.InputAddOn {
    display: flex;
    margin-bottom: 1.5em;
}
.InputAddOn-field {
  flex: 1;
}
.InputAddOn-field:not(:first-child) {
  border-left: 0;
}
.InputAddOn-field:not(:last-child) {
  border-right: 0;
}
.InputAddOn-item {
  background-color: #93806c1a;
  color: #666666;
  font: inherit;
  font-weight: normal;
  width: 8rem;
}  
.InputAddOn-field,
.InputAddOn-item {
  border: 1px solid #93806c40;
  padding: 0.5em 0.75em;
  word-wrap: normal;
}
.InputAddOn-item {
  border: 1px solid #93806c40;
  padding: 0.5em 0.75em;
}
.InputAddOn-field:first-child,
.InputAddOn-item:first-child {
  border-radius: 2px 0 0 2px;
}
.InputAddOn-field:last-child,
.InputAddOn-item:last-child {
  border-radius: 0 2px 2px 0;
}

/* End INPUT AddOn */

/* Font Classes */
.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  .bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
/* End Font Classes */  

/* Hero overlay css 
// Create three grid areas (boxes) that overlap each other, essentially creating three layers.
// Grid box 1 (layer 1): Image
// Grid box 2 (layer 2): Gradient overlay
// Grid box 3 (layer 3): Call to action text/content*/
.top-banner-section {
  display: grid;
  grid-template-columns: 1fr; /* stretch to the full frame */
  grid-template-rows: .75fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  align-content: center;
  justify-content: center;
}
.banner-image-div {
  grid-area: 1 / 1 / 2 / 2;
}
.banner-overlay-div {
  grid-area: 1 / 1 / 2 / 2;
}
.banner-text-div {
  grid-area: 1 / 1 / 2 / 2;
}
.banner-image {
  display: grid;
  min-width: 350px;
  width: 100%;
  height: 100%;
  object-fit: cover;  
}
.banner-overlay-div {
  display: grid;
  max-width: 100%;
  /*
  background: black;
  background: linear-gradient(
    60deg,
    rgba(0, 0, 0, 0.7777485994397759) 30%,
    rgba(255, 255, 255, 0) 100%
  );
  */ 
}
.banner-text-div {
  display: grid;
  align-items: baseline;
  margin-left: 15px;
  margin-right: 15px;
}
.banner-h2-text {
  font-size: calc(18pt + 0.15vw);
  letter-spacing: 0.05em;
  font-weight: bolder;
  text-transform: uppercase;
  color:#181006;
  text-align: center;
}
.banner-body-text {

  font-size: calc(10pt + 0.15vw);
  margin-top: 0.5em;
  color: #ffffff;
  text-decoration: none;
}
.banner-body-text:hover {
  color: #ffffff;
}
.banner-body-text:visited {
  color: #ffffff;
}
.banner-body-text:active {
  color: #ffffff;
}
.banner-btn {
  margin-top: 1em;
}
.banner-btn-item {
  font-size: calc(8pt + 0.15vw); 
  padding-top: calc(0.5em + 0.08vw);
  padding-bottom: calc(0.5em + 0.08vw);
  padding-left: calc(0.5em + 0.08vw);
  padding-right: calc(0.5em + 0.08vw);
  color: #0000ff;
  background-color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  border: 1px solid #ffffff;
}
.banner-btn-item :link {
  text-decoration: none;
}
.banner-btn-item :visited {
  text-decoration: none;
}

/* End Hero CSS */

@media only screen and (max-width: 935px) {
  *,
  *::after,
  *::before {
  box-sizing: border-box;
  }

  body > * { background: #ffffff; }
  body {
      margin: 0;
      font-family: 'Roboto','Helvetica Neue', Helvetica, Arial, sans-serif;
      display: grid;
      width: 100%;
      height: auto;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 80px 50px 1fr auto;
      grid-template-areas:
      "head head"
      "navi navi"
      "main main"
      "foot foot";
  }
  a {
    text-decoration: none;
    color: #000000;
  }
  /*
  h2 {
      font-size: 3.5vmax;
  }
  h3 {
      font-size: 2vmax;
  }
  */
  ul{
    display: flex;      
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  li{
    margin: 15px 15px 15px 0;
    padding: 5px;
    text-align: left;
  }
  header 	{ 
      grid-area: logo; 
      background-color: #181006;
      color: #ffda00;
      align-content: center;
  }
  header h1 {
    margin: 0 auto;
    padding: 0 0 0 30px;
    font-size: 3rem;
  }
  header h2 {
    margin: 0 auto;
    padding: 0 0 0 40px;
    font-size: 1rem;
  }
  .header-area {
    grid-area: head;
    display: grid;
    background-color: #181006;
    width: 100%;
    grid-template: 80px 20px / repeat(2, 1fr);
    grid-template-areas:
      "logo logo"
       "navi navi";
  }
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: grid;
    height: 50px;
    grid-template: auto / repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
    align-content: center;
  }
  #topmenu {
      grid-area: navi;
      grid-column: 1 / span 2;
      text-transform: uppercase;
      background-color: #181006;
      height: 20px;
      align-content: center;
  }
  #topmenu ul {
    text-transform: uppercase;
    background-color: #181006;
    color: #ffda00;
  }
  #topmenu a {
    transition: all 0.3s ease-in-out;
    color: #ffffff;
  }
  #topmenu a:hover {
    color:#ffda00;
    border-bottom: 4px solid #ffda00;
  }
  .page-home #topmenu a.navhome {
    color:#ffda00;
  }
  .page-about #topmenu a.navabout {
    color:#ffda00;
  }
  .page-menu #topmenu a.navmenu {
    color:#ffda00;
  }
  .page-contact #topmenu a.navcontact {
    color:#ffda00;
  }
  nav#topmenu {
    align-self: start;
    max-width: 100%;
  }
  main {
    grid-area: main; 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "sec1 sec1 sec1"
    "sec2 sec3 sec3";
  }
  main#about {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;  
  grid-template-areas:
  "sec1 sec1"
  "sec2 sec2"
  "sec3 sec3";
  }
  main#contact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;  
  grid-template-areas:
  "sec1 sec1"
  "sec2 sec2"
  "sec3 sec3";
  }
  main.home {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto; 
  grid-template-areas:
  "sec1"
  "sec2"
  "sec3";
  }
  #s1 { 
      grid-area: sec1; 
  }
  #s1.about { 
    grid-area: sec1;
    grid-column: 1 /span2;
    margin:0;
  }
  #s1.about h2 {
    margin:0;
    padding:30px 0 0 2%;
  }
  #s1.about p {
    margin:0;
    padding:20px 0 10px 2%;
  }
  #s2 { 
    grid-area: sec2;
  }
  #s3 { 
    grid-area: sec3; 
  }
  #s2.mission, #s3.values {
    display: grid;
    align-content: space-evenly;
    grid-template-columns: 50% 50%;
  }
  #s2.contact{
    grid-column: 1 / span2;
  }
  #s3.contact{
    display: grid;
    align-content: space-evenly;
    grid-template-columns: 50% 50%;
  }
  #menupage {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 30px 1fr auto;
    grid-template-areas:
    "mnav mnav"
    "menu menu"
    "gall gall";
    padding: 10px 15px;
  }
  #menu {
    grid-area: menu;
    flex-direction: column;    
    grid-column: 1 / span 3;              
  }
  #menunav {
    grid-area: mnav; 
  }
  #menunav a:hover {
    background-color:#181006;
    color:#ffda00;
    padding: 3px;
  }
  div.mission div, div.values div {
    align-content: center;
    margin:10%;
  }
  #s2.mission img, #s3.values img {
    display: grid;
    align-content: end;
    object-fit: cover;
    padding: 0;
    height: 100%;
    width: 100%
  }
  ul.bizinfo {
    display: flex;      
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  li.bizinfo {
    margin: 0;
    padding: .33em;
    font-size: 1rem;
    text-align: left;
  }
  .contact {
    margin: 10px 30px;
  }
  .google-maps {
    grid-column: 1 /span2;
    position: relative;
    padding-bottom: 25%;
    margin-top: 2em;
    height: 0;
    overflow: hidden;    
  }
  .google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%  !important;
  }
  footer {
      grid-area: foot;
      background-color: #c0c0c0;
      position: sticky;
      bottom: 0;
      display: grid;
      background-color:#181006;
      color: #ffda00;
      width: 100%;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr auto;
      grid-template-areas:
      "address hours"
      ". copy";
      align-content:center;
      border-top: 10px solid #ffffff; 
  }
  #copy {
    grid-area: copy;
  }
  footer section {
    text-align: center;
    align-content: center;
  }
  footer div#copy {
    text-align: right;
    align-content: end;
    margin: 0 3em 1em 0;
  }
  #address { 
      grid-area: address;    
      padding: 15px;
      text-align: center;
      justify-content: center;
  }
  #address h2{ 
    display:block;
    clear: both;
  }
  #logo { 
      grid-area: logo; 
  }
  #hours { 
      grid-area: hours;
      padding: 15px;
  }
  #directions { 
      grid-area: directions; 
  }
  time {
    padding: .25em;
    line-height: 1.5em;
  }
  .street {
    line-height: 1.5em;
    text-align: left;
  }
  section {
      margin: 0;
  }
  ul.drinklist {
    display: flex;      
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  li.drinklist {
    margin: 0;
    padding: .33em;
    font-size: 1rem;
    text-align: left;
  }
  nav#menunav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: grid;
      height: 20px;
      grid-template: auto / repeat(7, 1fr);
      justify-items: center;
  }
  nav#menunav li{
    font-size:small;
  }
  .menulist p {
    font-size: 1rem;
    margin-bottom: .75rem;
  }
  .menutitle {
    text-align: center;
    background-color: #181006;
  }
  .menutitle h2 {
  color: #ffda00;
  font-size: 2rem;
  padding: 0;
  margin: .25em 0;
  }
  .menusub {
    flex-basis: 100%;
    text-align: center;
    text-decoration-line: underline;
    text-transform: uppercase;
  }
  .menulist {
      grid-column: 2 / 4;
      grid-row: 4 / 5;
      padding: 1rem;
      display: flex;
      flex-wrap: wrap;
      justify-content:flex-start;
  }
  .menulist h3 {
      font-size: 1.8rem;
      font-weight:600;
      margin-bottom: .5rem;
      flex: 1 0 auto;
  }
  .menuitem {
    flex: 0 1 calc(50% - .5rem);
    justify-content: space-between;
    align-content: normal;
    margin: 0 .25rem;
  }
  .menusub h3 {
    font-size: 2.5rem;
  }
  .price {
    font-weight:600;
    }
  textarea {
    height: 10rem;
  }
  fieldset {
    margin-top: 2em;
    max-width:100%;
    background-color: #ffffff;
    border: none;
    outline: none;
  }
  legend {
    visibility: hidden;
  }
  .contact-main {
    background-color: #ffffff;
  }
  .contact ul {
    display: flex;      
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .contact li {
    background: none;
    margin: 0 0 0 1em;
    padding: 5px;
    text-align: left;
  }
  .socials {
    width: 1.2em;
    height: 1.2em;
    margin: 0 .5em 0 0;
    }
  .bizinfo a:hover {
  border-bottom:2px solid #ffda00;
  }
  .first-word {
  font-weight:600;
  }
  input[type=radio] {
    border: 0px;
    width: 100%;
    height: 1em;
  }
  video {
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media only screen and (max-width: 600px) {
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }
  
  body > * { background: #ffffff; }
  body {
      margin: 0;
      font-family: 'Roboto','Helvetica Neue', Helvetica, Arial, sans-serif;
      display: grid;
      width: 100%;
      height: auto;
      grid-template-columns: 1fr;
      grid-template-rows: 80px 40px 1fr auto;
      grid-template-areas:
      "head"
      "navi"
      "main"
      "foot";
  }
  a {
    text-decoration: none;
    color: #000000;
  }
  /*
  h2 {
      font-size: 3.5vmax;
  }
  h3 {
      font-size: 2vmax;
  }
  */
  ul{
    display: flex;      
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  li{
    margin: 15px 15px 15px 0;
    padding: 5px;
    text-align: left;
  }
  header 	{ 
      grid-area: logo; 
      background-color: #181006;
      color: #ffda00;
      align-content: center;
  }
  header h1 {
    margin: 0 auto;
    padding: 0 0 0 30px;
    font-size: 3rem;
  }
  header h2 {
    margin: 0 auto;
    padding: 0 0 0 40px;
    font-size: 1rem;
  }
  .header-area {
    grid-area: head;
    display: grid;
    background-color: #181006;
    width: 100%;
    grid-template: 80px 20px / 1fr;
    grid-template-areas:
      "logo"
      "navi";
  }
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: grid;
    height: 50px;
    grid-template: auto / repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
    align-content: center;
  }
  #topmenu {
      grid-area: navi;
      grid-column: 1;
      text-transform: uppercase;
      background-color: #181006;
      height: 20px;
      align-content: center;
  }
  #topmenu ul {
    text-transform: uppercase;
    background-color: #181006;
    color: #ffda00;
  }
  #topmenu a {
    transition: all 0.3s ease-in-out;
    color: #ffffff;
  }
  #topmenu a:hover {
    color:#ffda00;
    border-bottom: 4px solid #ffda00;
  }
  .page-home #topmenu a.navhome {
    color:#ffda00;
  }
  .page-about #topmenu a.navabout {
    color:#ffda00;
  }
  .page-menu #topmenu a.navmenu {
    color:#ffda00;
  }
  .page-contact #topmenu a.navcontact {
    color:#ffda00;
  }
  nav#topmenu {
    align-self: start;
    max-width: 100%;
  }
  main {
    grid-area: main; 
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "sec1"
    "sec2"
    "sec3";
  }
  main#about {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;  
  grid-template-areas:
  "sec1"
  "sec2"
  "sec3";
  }
  main#contact {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;  
  grid-template-areas:
  "sec1"
  "sec2"
  "sec3";
  }
  main.home {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto; 
  grid-template-areas:
  "sec1"
  "sec2"
  "sec3";
  }
  #s1 { 
      grid-area: sec1; 
  }
  #s1.about { 
    grid-area: sec1;
    grid-column: 1 /span2;
    margin:0;
  }
  #s1.about h2 {
    margin:0;
    padding:30px 0 0 2%;
  }
  #s1.about p {
    margin:0;
    padding:20px 0 10px 2%;
  }
  #s2 { 
    grid-area: sec2;
  }
  #s3 { 
    grid-area: sec3; 
  }
  #s2.mission, #s3.values {
    display: grid;
    align-content: space-evenly;
    grid-template-columns: 1fr;
  }
  #s2.contact{
    grid-column: 1;
  }
  #s3.contact{
    display: grid;
    align-content: space-evenly;
    grid-template-columns: 1fr;
  }
  #menupage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 60px 1fr auto;
    grid-template-areas:
    "mnav"
    "menu"
    "gall";
    padding: 10px 15px;
  }
  #menu {
    grid-area: menu;
    flex-direction: column;    
    grid-column: 1;              
  }
  #menunav {
    grid-area: mnav;
    display:flex; 
  }
  #menunav a:hover {
    background-color:#181006;
    color:#ffda00;
    padding: 3px;
  }
  nav#menunav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    height: 50px;
    grid-template: auto / 1fr;
  }
  nav#menunav li {
    margin: 0;
    padding: 0;
    display: flex;
    height: 20px;
    width: 20%;
  }
  nav#menunav li{
    font-size:medium;
  }
  div.mission div, div.values div {
    align-content: center;
    margin:0;
    padding: 30px 0 0 2%
  }
  #s2.mission img, #s3.values img {
    display: grid;
    align-content: end;
    object-fit: cover;
    padding: 0;
    height: 100%;
    width: 100%
  }
  ul.bizinfo {
    display: flex;      
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  li.bizinfo {
    margin: 0;
    padding: .33em;
    font-size: 1rem;
    text-align: left;
  }
  .contact {
    margin: 10px 10px;
  }
  .google-maps {
    grid-column: 1;
    position: relative;
    padding-bottom: 25%;
    margin-top: 2em;
    height: 0;
    overflow: hidden;    
  }
  .google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%  !important;
  }
  footer {
      grid-area: foot;
      background-color: #c0c0c0;
      position: sticky;
      bottom: 0;
      display: grid;
      background-color:#181006;
      color: #ffda00;
      width: 100%;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas:
      "address"
      "hours"
      "copy";
      align-content:center;
      border-top: 10px solid #ffffff; 
  }
  #copy {
    grid-area: copy;
  }
  footer section {
    text-align: center;
    align-content: center;
  }
  footer div#copy {
    text-align: right;
    align-content: end;
    margin: 0 3em 1em 0;
  }
  #address { 
      grid-area: address;    
      padding: 15px;
      text-align: center;
      justify-content: center;
  }
  #address h2{ 
    display:block;
    clear: both;
  }
  #logo { 
      grid-area: logo; 
  }
  #hours { 
      grid-area: hours;
      padding: 15px;
  }
  #directions { 
      grid-area: directions; 
  }
  time {
    padding: .25em;
    line-height: 1.5em;
  }
  .street {
    line-height: 1.5em;
    text-align: left;
  }
  section {
      margin: 0;
  }
  ul.drinklist {
    display: flex;      
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  li.drinklist {
    margin: 0;
    padding: .33em;
    font-size: 1rem;
    text-align: left;
  }  
  .menulist p {
    font-size: 1rem;
    margin-bottom: .75rem;
  }
  .menutitle {
    text-align: center;
    background-color: #181006;
  }
  .menutitle h2 {
  color: #ffda00;
  font-size: 2rem;
  padding: 0;
  margin: .25em 0;
  }
  .menusub {
    flex-basis: 100%;
    text-align: center;
    text-decoration-line: underline;
    text-transform: uppercase;
  }
  .menulist {
      grid-column: 1/2;
      grid-row: 4/5;
      padding: 1rem;
      display: flex;
      flex-wrap: wrap;
      justify-content:flex-start;
  }
  .menulist h3 {
      font-size: 1.8rem;
      font-weight:600;
      margin-bottom: .5rem;
      flex: 1 0 auto;
  }
  .menuitem {
    flex: 0 1 calc(100% - .5rem);
    justify-content: space-between;
    align-content: normal;
    margin: 0 .25rem;
  }
  .menusub h3 {
    font-size: 2.5rem;
  }
  .price {
    font-weight:600;
    }
  textarea {
    height: 10rem;
  }
  fieldset {
    margin-top: 2em;
    max-width:100%;
    background-color: #ffffff;
    border: none;
    outline: none;
    padding: 0.35em 0.25em 0.25em;
  }
  legend {
    visibility: hidden;
  }
  .contact-main {
    background-color: #ffffff;
  }
  .contact ul {
    display: flex;      
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
  }
}