/* FONTS
----------------------------------------------- */
/* 
font-family: 'Alata', sans-serif;
font-family: 'Halant', 'Raleway', serif; 
font-family: 'Halant Semi-Bold', 'Raleway', serif; 
------------------------------------------------*/
h1 { font-size: 4rem; }

h2 { font-size: 3.5rem; }

h3 { font-size: 3rem; }

h4 { font-size: 2.5rem; }

h5 { font-size: 2rem; }

h6 { font-size: 1.25rem; }

a, p { font-size: 1.5rem;
       text-decoration: none; }



h1, h2, h3 {
   font-family: 'Halant Semi-Bold', 'Raleway', serif;
   text-align: center;
   line-height: 1.2;
}

h4 {
   font-family: 'Halant', 'Raleway', serif;
   text-align: center;
   line-height: 1.2;
}

h5, h6, p, a {
   font-family: 'Alata', sans-serif;
   text-align: center;
   line-height: 1.2;
}

html {
   font-size: 10px;
   height: auto;
}

body {
   background-color: var(--pale);
   margin: 0;
   padding: 0;
}


/* NAV
----------------------------------------------- */
#nav-grid {
   width: 100%;
   margin: 0 auto;
   /* justify-self: center; */
   display: grid;
   grid-template-rows: repeat(5, 40px);
   align-items: center;
   grid-gap: 30px;
   justify-content: center;
   background-color: var(--dg);
   padding: 20px 0;
   z-index: 5;
}

#nav-grid a {
   font-size: 2.5rem;
   text-transform: uppercase;
   color: white;
   padding: 10px 20px;
   margin: 0;
   letter-spacing: 0.15rem;
   border-bottom: 2px solid var(-dg);
   border-top: 2px solid var(-dg);
   border-radius: 10px;
}

#nav-grid a:hover {
   color: var(--pale);
   border-bottom: var(--lg) 2px solid;
   border-top: var(--lg) 2px solid;
   transition: color ease-in 1s, 
               border-bottom ease 0.1s 0.25s,
               border-top ease 0.1s 0.5s;
}

#nav-grid a:nth-child(1) {
   border: solid 2px var(--lg);
   border-radius: 5px;
   padding: 10px 20px;
   justify-self: center;
   animation: phone-border ease-in-out 2s infinite alternate;
}

nav a:nth-child(1):hover {
   background-color: var(--lg);
   color: var(--dg);
   transition: background-color ease-out 0.5s, color ease-in 1s 0.25s;
   animation: none;
}

@keyframes phone-border {
   from {
      border: solid 2px var(--lg);
      box-shadow: 0 0 10px var(--lg), 0 0 20px var(--lg);
   }
   to {
      border: solid 2px white;
      box-shadow: 0 0 5px var(--lg), 0 0 10px var(--lg);
   }
}

#nav-grid a:nth-child(5) {
   color: white;
   background-color: var(--red);
   border-radius: 5px;
   border: solid 2px var(--red);
   padding: 10px 20px;
   margin-right: 0;
   justify-self: center;
   animation: order-online ease-in 2s infinite alternate;
}

#nav-grid a:nth-child(5):hover {
   background-color: var(--lg);
   color: var(--dg);
   border: solid 2px var(--lg);
   transition: background-color ease-out 0.5s, 
               color ease-in 1s 0.25s,
               border ease-out 0.5s;
   animation: none;
}

@keyframes order-online {
   from {
      background-color: var(--or);
      border: solid 2px var(--or);
      box-shadow: 0 0 10px var(--or), 0 0 20px var(--or);
   }
   to {
      background-color: var(--red);
      border: solid 2px var(--red);
      box-shadow: 0 0 0px var(--or), 0 0 5px var(--or);
   }
}


/* MEDIA QUERY ----------------------------------------------- */
@media (min-width: 576px) {
   #nav-grid {
      width: 100%;
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(3, 200px);
      grid-gap: 0;
      justify-content: center;
      align-content: center;
      padding: 10px 0;
   }

   #nav-grid .nav-phone {
      grid-area: 1 / 1 / 1 / 4;
   }

   #nav-grid .nav-order-online {
      grid-area: 3 / 1 / 3 / 4;
   }

   #nav-grid a {
      font-size: 1.75rem;
      padding: 10px 30px;
      margin: 10px 0;
      justify-self: center;
      border-top: 2px solid var(--dg);
      border-bottom: 2px solid var(--dg);
   }
}

@media (min-width: 768px) {
   #nav-grid {
      background-color: rgba(0, 96, 52, 0.9);
      width: 100%;
      grid-template-rows: 1fr;
      grid-template-columns: repeat(5, 145px);
      grid-gap: 5px;
      position: fixed;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
   }

   #nav-grid .nav-phone {
      grid-area: auto;
   }

   #nav-grid .nav-order-online {
      grid-area: auto;
   }

   #nav-grid a {
      font-size: 1.5rem;
      border-top: 0;
      border-bottom: 0;
      padding: 10px 20px;
   }
}

@media (min-width: 992px) {
   header {
      width: 100%;
      height: 82px;
      position: fixed;
      top: 0;
      left: 0;
   }
   
   #nav-grid {
      width: 95%;
      margin: 0 auto;
      grid-gap: 10px;
      grid-template-columns: repeat(5, 170px);
      justify-content: space-around;
      text-align: center;
      position: relative;
   }
   
}

@media (min-width: 1200px) {
   #nav-grid {
      width: 80%;
      grid-template-columns: repeat(5, auto);
      justify-content: space-around;
   }
}


/* FIRST PAGE
----------------------------------------------- */
.first-page {
   background-image: url(../img/iStock_000030291918_Full.jpg);
   background-color: seashell;
   background-position: center top;
   background-size: cover;
   background-repeat: no-repeat;
   display: grid;
   grid-template-rows: repeat(4, auto);
   grid-gap: 20px;
   justify-items: center;
   align-items: center;
}

.first-page img {
   width: 200px;
   padding-top: 30px;
   padding-bottom: 0px;
   animation: logo ease-in-out 3s infinite alternate;
}

@keyframes logo {
   from {
      filter: brightness(1);
   }
   to {
      filter: brightness(1.25);
   }
}

.first-page h2 {
   color: white;
   font-size: 1.75rem;
   background-color: rgba(208, 52, 39, 0.9);
   border-radius: 20px;
   padding: 10px 30px;
   margin-bottom: 10px;
}

.first-page h4 {
   font-size: 1.5rem;
   font-weight: 600;
   color: white;
   background-color: rgba(0, 96, 52, 0.9);
   border-radius: 20px;
   padding: 10px 30px;
}


/* MEDIA QUERY ----------------------------------------------- */
@media (min-width: 576px) {
   .first-page img {
      width: 300px;
   }
   
   .first-page h2 {
      font-size: 2.5rem;
   }
   
   .first-page h4 {
      font-size: 2rem;
   }
}

@media (min-width: 768px) {
   .first-page img {
      margin-top: 200px;
   }
}

@media (min-width: 992px) {
   .first-page img {
      margin-top: 150px;
   }
   
   .first-page h2 {
      margin-bottom: 50px;
   }
   
   .first-page h4 {
      margin-bottom: 50px;
   }
}


/* BYOB - NEON
----------------------------------------------- */
.byob {
   width: 100%;
   text-align: center;
   margin-top: 50px;
   margin-bottom: 50px;
   
   display: grid;
   justify-items: center;
   align-content: center;
   /* background: linear-gradient(to right,
   rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%,
   rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%); */
}

.byob #purple {
   font-family: 'Raleway', sans-serif;
   font-size: 10rem;
   letter-spacing: 1.2rem;
   color: white;
   grid-area: 1 / 1 / span 1 / span 1;
   border: white 8px solid;
   border-radius: 20px;
   padding: 40px 10px 40px 30px;
   z-index: 3;
   animation: purple-neon 1s ease-in-out infinite alternate;
}

.byob #cyan {
   font-family: 'Raleway', sans-serif;
   font-size: 10rem;
   letter-spacing: 1.2rem;
   color: cyan;
   grid-area: 1 / 1 / span 1 / span 1;
   border: white 8px solid;
   border-radius: 20px;
   padding: 40px 10px 40px 30px;
   z-index: 2;
   animation: cyan-neon-inset 1.5s ease-in-out infinite alternate;
}

.byob #black {
   font-family: 'Raleway', sans-serif;
   font-size: 10rem;
   letter-spacing: 1.2rem;
   color: black;
   grid-area: 1 / 1 / span 1 / span 1;
   border: white 8px solid;
   border-radius: 20px;
   padding: 40px 10px 40px 30px;
   z-index: 2;
   animation: cyan-neon-outset 1.5s ease-in-out infinite alternate;
}

@keyframes purple-neon {
   from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
   }
   to {
      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
   }
}

@keyframes cyan-neon-inset {
   from {
      box-shadow: inset 0 0 10px #fff, inset 0 0 20px #fff, inset 0 0 30px #fff, inset 0 0 40px #50BFE6, inset 0 0 70px #50BFE6;
   }
   to {
      box-shadow: inset 0 0 5px #fff, inset 0 0 10px #fff, inset 0 0 15px #fff, inset 0 0 20px #50BFE6, inset 0 0 35px #50BFE6;
   }
}

@keyframes cyan-neon-outset {
   from {
      box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #50BFE6, 0 0 70px #50BFE6, 0 0 80px #50BFE6;
   }
   to {
      box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #50BFE6, 0 0 35px #50BFE6, 0 0 40px #50BFE6;
   }
}


/* MENU
----------------------------------------------- */
#menu {
   display: none;
}

#menu-small img {
   width: 100%;
}


/* MEDIA QUERY ----------------------------------------------- */
@media (min-width: 992px) {
   #menu-small {
      display:  none;
   }
   
   #menu {
      background: linear-gradient( 0deg, black 0%, 
      var(--red) 40%, var(--or) 50%, 
      var(--red) 60%, black 100%);
      display: grid;
      grid-template-rows: repeat(2, auto);
      grid-gap: 20px;
      justify-items: center;
      padding: 20px 0;
   }
   
   #menu img {
      width: 90%;
      max-width: 1200px;
   }
}

@media (min-width: 1200px) {
   #menu-small {
      display: none;
   }
   
   #menu img {
      width: 80%;
      max-width: 1200px;
   }
}


/* ABOUT US
----------------------------------------------- */
#about-contact {
   background: repeating-linear-gradient(45deg, white 0%, white 10%, rgba(242, 228, 201, 1) 0%, rgba(242, 228, 201, 1) 50%) 0 / 15px 15px;

   display: grid;
   justify-items: center;
   align-items: center;
   padding-top: 50px;
}

#about-contact h1 {
   font-size: 3rem;
   color: var(--dg);
   border-bottom: 3px solid var(--dg);
   border-radius: 20px;
   padding: 5px 30px;
   margin-bottom: 20px;
}

#about-contact img {
   width: 80%;
   border-radius: 20px;
   border: 4px solid var(--lg);
   margin-bottom: 20px;
}

#about-contact h4 {
   font-size: 2rem;
   width: 80%;
}


/* MEDIA QUERY ----------------------------------------------- */
@media (min-width: 992px) {
   #about-contact {
      grid-template-columns: repeat(2, auto);
   }
   
   #about-contact .about-us {
      font-size: 4rem;
      grid-column: 1 / 3;
      margin-top: 40px;
      margin-bottom: 50px;
   }
   
   #about-contact h4 {
      font-size: 2.25rem;
      text-align: left;
   }
}

@media (min-width: 1200px) {
   #about-contact {
      width: 80%;
      margin: 0 auto;
   }
}


/* SLIDESHOW
----------------------------------------------- */
#about-contact .slideshow {
   background-color: var(--pale);
   width: 80%;
   margin: 30px 0;
   padding: 10px 20px;
   border-top: 2px solid var(--lg);
   border-bottom: 2px solid var(--lg);
   border-radius: 20px;
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr;
   justify-items: center;
}

#about-contact .slide,
#about-contact .no-slide {
   grid-area: 1 / 1 / 1 / 1;
}

#about-contact .slide {
   background-color: var(--pale);
   animation: opacity cubic-bezier(1, 0, 0, 1) 10s infinite alternate;
}

#about-contact .slide h6 {
padding-bottom: 10px
}

@keyframes opacity {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

#about-contact .slide i,
#about-contact .no-slide i {
   color: var(--lg);
   position: relative;
   left: -10px;
}

#about-contact .slideshow h4 {
   text-align: left;
   width: 90%;
   font-size: 2rem;
   line-height: 1.2;
   margin: 10px auto;
}

#about-contact .slideshow h6 {
   width: 90%;
   text-align: left;
   font-size: 1.5rem;
   margin: auto;
}


/* MEDIA QUERY ----------------------------------------------- */
@media (min-width: 992px) {
   #about-contact .slideshow {
      width: 50%;
      grid-column: 1 / 3;
      margin-top: 80px;
      margin-bottom: 50px;
   }
   
}


/* CONTACT US
----------------------------------------------- */
#about-contact .address,
#about-contact .hours {
   margin-top: 20px;
   margin-bottom: 50px;
}

#about-contact .address h3,
#about-contact .hours h3 {
   font-size: 2.5rem;
}

#about-contact .address h5,
#about-contact .hours h5 {
   font-size: 1.5rem;
}

#about-contact iframe {
   margin-top: 30px;
   width: 100%;
}


/* MEDIA QUERY ----------------------------------------------- */
@media (min-width: 992px) {
   #about-contact .contact-us {
      font-size: 4rem;
      grid-column: 1 / 3;
      margin-top: 40px;
      margin-bottom: 50px;
   }

   #about-contact .address,
   #about-contact .hours {
      align-self: flex-start;
   }
   
   #about-contact .address h3,
   #about-contact .hours h3 {
      font-size: 3rem;
   }
   
   #about-contact .address h5,
   #about-contact .hours h5 {
      font-size: 2rem;
   }
   
   #about-contact iframe {
      grid-column: 1 / 3;
   }   
}

@media (min-width: 1200px) {
   #about-contact iframe {
      width: 100vw;
      margin-left: -50vw;
      margin-right: -50vw;
   }
}


/* FOOTER
----------------------------------------------- */
footer {
   width: 100%;
   /* height: 15px; */
   margin-top: 30px;
   background: linear-gradient(180deg, var(--dg) 0%, black 100%);
   padding: 20px 0;
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
}

footer h6 {
   color: white;
}

footer img {
   width: 100px;
   filter: brightness(100);
}

@media (min-width: 1200px) {
   footer {
      grid-template-rows: 1fr;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-flow: column;
      justify-items: center;
      align-items: center;
   }
}


/* MEDIA QUERY ----------------------------------------------- */




/* --------------------------------------------
UTILITIES
----------------------------------------------- */
/* COLORS
----------------------------------------------- */
/* Color Theme Swatches in RGBA */
.Red-and-Green-Complimentary-1-rgba { color: rgba(0, 96, 52, 1); }
.Red-and-Green-Complimentary-2-rgba { color: rgba(101, 166, 3, 1); }
.Red-and-Green-Complimentary-3-rgba { color: rgba(242, 228, 201, 1); }
.Red-and-Green-Complimentary-4-rgba { color: rgba(248, 101, 12, 1); }
.Red-and-Green-Complimentary-5-rgba { color: rgba(208, 52, 39, 1); }

:root {
   --dg: rgba(0, 96, 52, 1);
   --lg: rgba(101, 166, 3, 1);
   --pale: rgba(242, 228, 201, 1);
   --or: rgba(248, 101, 12, 1);
   --red: rgba(208, 52, 39, 1);
}


/* FONT FACE
----------------------------------------------- */
@font-face {
   font-family: 'Alata';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src:  local('Alata Regular'), local('Alata-Regular'), 
         url(https://fonts.gstatic.com/s/alata/v1/PbytFmztEwbIoce9zqYzQ1OW.woff2) format('woff2'),
         url(/fonts/Alata/Alata-Regular.ttf);
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

 @font-face {
   font-family: 'Halant';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src:  local('Halant Regular'), local('Halant-Regular'), 
         url(https://fonts.gstatic.com/s/halant/v7/u-4-0qaujRI2Pbsn2NhnsS5mew.woff2) format('woff2'),
         url(/fonts/Halant/Halant-Regular.ttf);
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

 @font-face {
   font-family: 'Halant Semi-Bold';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src:  local('Halant SemiBold'), local('Halant-SemiBold'),
         url(https://fonts.gstatic.com/s/halant/v7/u-490qaujRI2PbsvB_xynAxrUQRBXw.woff2) format('woff2'),
         url(/fonts/Halant/Halant-SemiBold.ttf);
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
   font-family: 'Raleway';
   font-style: normal;
   font-weight: 700;
   src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPANqczVs.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }