:root {
  --gold: #caa36c;
  --off-white: #edddad;
  --black: #1a1911;
  --white: #fff;
}

html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 1rem;
}
/* --- Global Styles --- */
/* --- Fonts --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  &::before,
  &::after {
    box-sizing: border-box;
  }
}
body {
  font-family: OPTILatin, serif;
  font-size: 10px;
  background: var(--white);
}
.wrapper {
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
}
img {
  max-width: 100%;
}
.flex {
  display: flex;
}
.menu-h2 {
  font-family: OPTILatin, serif;
  text-transform: uppercase;
  position: relative;
  color: var(--off-white);
  font-size: 1.25rem;
  overflow: hidden;
  @media (min-width: 320px) {
    font-size: 2rem;
  }
  @media (min-width: 576px) {
    font-size: 3rem;
  }
  @media (min-width: 768px) {
    font-size: 3.5rem;
  }
  @media (min-width: 1200px) {
    font-size: 4rem;
  }
  &:after,
  &:before {
    position: absolute;
    top: 40%;
    overflow: hidden;
    width: 30%;
    height: 1px;
    content: '\a0';
    background-color: var(--off-white);
  }
  &:after {
    margin-left: 2%;
    text-align: right;
  }
  &:before {
    margin-left: -33%;
    text-align: right;
  }
}
.substitutes {
  text-align: center;
  margin-top: 4rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--black);
  font-weight: bold;
  text-shadow: -1px 1px var(--gold);
  word-spacing: 0.1em;
  padding: 0 0.5rem;
  @media (min-width: 320px) {
    font-size: 1.125rem;
  }
  @media (min-width: 768px) {
    padding: 0 2rem;
    font-size: 1.125rem;
  }
}
.btn {
  border: 3px solid var(--gold);
  white-space: nowrap;
  padding: 1rem 1.5rem 0.5rem;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  outline: none;
  cursor: pointer;
  border-radius: 50px;
  transition: all 0.3s;
  font-size: 0.9rem;
  @media (min-width: 320px) {
    padding: 1.5rem 3rem 1rem;
    font-size: 1.25rem;
  }
  &:hover,
  &:focus {
    background: var(--black);
    color: var(--white);
  }
}
.menu-item {
  &.vegan,
  &.veggie,
  &.gluten-free {
    &:before {
      display: inline-block;
      position: absolute;
      left: -2.25rem;
      top: -0.25rem;
      width: 2.25rem;
      height: 2.25rem;
      color: var(--gold);
      background: var(--black);
      border: 2px solid var(--gold);
      text-align: center;
      letter-spacing: -0.1em;
      padding-top: 0.25rem;
      font-size: 1.125rem;
    }
  }
  &.vegan {
    &:before {
      content: 'V';
      border: none;
    }
  }
  &.veggie {
    &:before {
      content: '';
      display: inline-block;
      position: absolute;
      left: -2.5rem;
      top: -1rem;
      width: 2.25rem;
      height: 2.25rem;
      color: green;
      background: var(--white);
      border: 2px solid green;
      text-align: center;
      font-size: 1rem;
      padding-right: 2rem;
    }
  }
  &.gluten-free {
    &:before {
      content: 'GF';
      left: -2.3rem;
      border-radius: 50%;
    }
  }
}
.description {
  &.gluten-free {
    &:before {
      content: 'GF';
      display: inline-block;
      position: absolute;
      left: -2.5rem;
      width: 2.25rem;
      height: 2.25rem;
      color: var(--gold);
      background: var(--black);
      border: 2px solid var(--gold);
      border-radius: 50%;
      text-align: center;
      letter-spacing: -0.1em;
      padding-top: 0.25rem;
      font-style: normal;
      font-size: 1.125rem;
    }
  }
}

@font-face {
  font-family: 'OPTILatin';
  src: local('OPTILatin'), url('fonts/OPTILatin.otf') format('truetype');
}
@font-face {
  font-family: 'Hoodson';
  src: local('Hoodson'), url('fonts/Hoodson.otf') format('truetype');
}
.scroll-to-top-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(var(--white), var(--gold));
  border: 3px solid var(--gold);
  position: fixed;
  right: 1%;
  bottom: 1%;
  z-index: 500;
  opacity: 0.7;
  outline: none;
  cursor: pointer;
  @media (min-width: 768px) {
    width: 75px;
    height: 75px;
  }
  .angle-double-up-icon {
    font-size: 2rem;
    color: var(--gold);
    @media (min-width: 768px) {
      font-size: 3rem;
    }
  }
}


.menu {
  header {
    @media (min-width: 992px) {
      margin-top: 0.5rem;
    }
    .mobile-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      margin-top: 0.5rem;
      @media (min-width: 450px) {
        flex-wrap: nowrap;
      }
      a {
        color: var(--gold);
        text-shadow: -1px 1px var(--black);
        font-size: 1.75rem;
        text-decoration: none;
        text-align: center;
        text-decoration: underline;
        flex: 1 0 50%;
        &.phone-number-top {
          order: 3;
          text-decoration: none;
        }
        @media (min-width: 450px) {
          flex: 0 1 auto;
          &:nth-child(3) {
            order: 3;
          }
          &.phone-number-top {
            order: 2;
          }
        }
      }
      @media (min-width: 992px) {
        display: none;
      }
    }
    .desktop-header {
      display: grid;
      grid-template: repeat(4, 25px) / repeat(3, 1fr);
      @media (min-width: 320px) {
        grid-template: repeat(4, 50px) / repeat(3, 1fr);
      }
      @media (min-width: 1200px) {
        grid-template: repeat(4, 75px) / repeat(3, 1fr);
        margin-top: 1rem;
      }
      .logo-bg-top {
        background: var(--white);
        display: flex;
        grid-area: 1 / 1 / span 2 / 4;
        > .wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
          @media (min-width: 768px) {
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 2rem;
          }
          @media (min-width: 992px) {
            padding: 0 1rem;
          }
          @media (min-width: 1200px) {
            padding: 0;
          }
          &.mobile-nav-hide {
            display: none;
          }
          &.desktop-nav {
            display: none;
            @media (min-width: 992px) {
              display: flex;
            }
          }
          a {
            order: 2;
            color: var(--gold);
            text-shadow: -1px 1px var(--black);
            font-size: 1.25rem;
            padding: 0;
            margin-top: -0.75rem;
            text-decoration: none;
            @media (min-width: 320px) {
              margin-top: -1rem;
              font-size: 2.15rem;
            }
            @media (min-width: 768px) {
              order: 1;
              margin-top: 0;
            }
          }
          .takeout-delivery {
            order: 1;
            @media (min-width: 1200px) {
              order: 2;
              margin-top: 0;
            }
            a {
              margin: 0 0.25rem;
              text-decoration: underline;
              @media (min-width: 320px) {
                margin: 0 0.5rem;
              }
            }
          }
        }
      }
      .rb-logo-container {
        grid-area: 2 / 2 / span 2 / span 1;
        z-index: 5;
        justify-self: center;
        align-self: center;
        .rb-logo {
          width: auto;
          height: 200px;
          @media (min-width: 1200px) {
            height: 300px;
          }
        }
      }
      .logo-bg-bottom {
        grid-area: 3 / 1 / span 2 / span 3;
        background: linear-gradient(
            rgba(26, 25, 17, 0.8),
            rgba(26, 25, 17, 0.8)
          ),
          url('assets/table-top.jpg');
      }
    }
  }
  .menu-header {
    text-transform: uppercase;
    background: linear-gradient(
        rgba(26, 25, 17, 0.8),
        rgba(26, 25, 17, 0.8)
      ),
      url('assets/table-top.jpg');
    color: var(--gold);
    text-align: center;
    padding-bottom: 2rem;
    h1 {
      padding-top: 1rem;
      font-size: 1.25rem;
      @media (min-width: 320px) {
        font-size: 1.4rem;
      }
      @media (min-width: 576px) {
        font-size: 2rem;
      }
      @media (min-width: 1200px) {
        padding-top: 1.5rem;
        font-size: 2.5rem;
      }
    }
    h2 {
      text-shadow: -2px 2px 2px var(--gold);
      font-size: 2rem;
      @media (min-width: 320px) {
        font-size: 3rem;
      }
      @media (min-width: 576px) {
        font-size: 3.5rem;
      }
      @media (min-width: 1200px) {
        font-size: 5rem;
      }
    }
    .menu-categories {
      display: flex;
      flex-direction: column;
      list-style: none;
      @media (min-width: 576px) {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
      }
      @media (min-width: 1200px) {
        justify-content: space-between;
        flex-wrap: nowrap;
      }
      li {
        font-size: 1rem;
        margin-bottom: 0.75rem;
        white-space: nowrap;
        @media (min-width: 320px) {
          font-size: 1.75rem;
        }
        @media (min-width: 576px) {
          width: 33%;
          font-size: 1.35rem;
        }
        @media (min-width: 768px) {
          font-size: 1.5rem;
        }
        @media (min-width: 1200px) {
          font-size: 1.25rem;
          margin-bottom: 0.25rem;
          width: auto;
        }
        a {
          text-decoration: none;
          transition: color 0.3s;
          color: var(--gold);
          &:hover {
            color: var(--off-white);
          }
        }
      }
    }
  }
  .bg-parallax {
    padding: 25vh 0;
    position: relative;
    overflow: hidden;
    .bg-rb-sign {
      background: url('assets/rb-sign-parallax--mobile.jpg');
      background-repeat: no-repeat;
      background-position: center 30%;
      background-size: 135% 100%;
      height: 50vh;
      position: absolute;
      width: 100%;
      height: 225%;
      top: -100%;
      z-index: 1;
      filter: grayscale(100%);
      @media (min-width: 992px) {
        background: url('assets/rb-sign-parallax.jpg');
        background-repeat: no-repeat;
        background-position: center 30%;
        background-size: cover;
        height: 50vh;
        height: 225%;
      }
    }
  }
  .soups-and-salads,
  .starters,
  .burgers,
  .sandwiches,
  .wings,
  .classics,
  .specials,
  .contact {
    padding: 3rem 0 6rem;
    background: linear-gradient(
        rgba(237, 221, 173, 0.4),
        rgba(237, 221, 173, 0.4)
      ),
      url('assets/textured_paper.png');
    @media (min-width: 1200px) {
      padding: 3rem 0 10rem;
    }
    > .wrapper {
      .menu-h2 {
        color: var(--gold);
        text-align: center;
        margin-bottom: 1rem;
        text-shadow: -1px 1px 1px var(--black);
        &:after,
        &:before {
          background-color: var(--black);
        }
        @media (min-width: 1200px) {
          text-shadow: -2px 2px 2px var(--black);
        }
      }
      .container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 3.5rem;
        padding: 0 2rem 0 2.5rem;
        @media (min-width: 576px) {
          padding: 0 5rem;
        }
        @media (min-width: 992px) {
          grid-template-columns: repeat(2, 1fr);
          grid-gap: 4rem 6rem;
          padding: 0 3rem;
        }
        @media (min-width: 1200px) {
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 5rem 5rem;
          padding: 0 0 0 2rem;
        }
        @media (min-width: 1400px) {
          padding: 0;
        }
        article {
          .menu-item-group {
            min-width: 5em;
            clear: both;
            &:after {
              content: '';
              padding-top: 1.125em;
              border-bottom: 2px dotted var(--gold);
              display: block;
              overflow: hidden;
              height: 0.8em;
              @media (min-width: 576px) {
                padding-top: 1.5em;
              }
              @media (min-width: 1200px) {
                padding-top: 1.125em;
              }
            }
            .menu-item {
              float: left;
              margin-right: 0.5rem;
              font-size: 0.8rem;
              text-transform: uppercase;
              position: relative;
              max-width: 70%;
              @media (min-width: 320px) {
                font-size: 1.115rem;
                max-width: 80%;
              }
              @media (min-width: 576px) {
                font-size: 1.5rem;
                max-width: 100%;
              }
              @media (min-width: 1200px) {
                font-size: 1.25rem;
              }
              &.vegan {
                &:before {
                  content: '';
                  background: url('assets/vegan-mark.png');
                  background-size: cover;
                }
              }
              &.veggie {
                &:before {
                  content: 'VEG';
                  padding-top: 2rem;
                  background: url('assets/vegetarian-mark.jpg');
                  background-size: cover;
                }
              }
            }
            .price {
              float: right;
              margin-left: 0.5rem;
              width: 1rem;
              text-align: right;
              font-size: 0.9rem;
              @media (min-width: 320px) {
                font-size: 1.25rem;
              }
              @media (min-width: 576px) {
                font-size: 1.5rem;
              }
              @media (min-width: 1200px) {
                font-size: 1.25rem;
                margin-right: 1rem;
              }
              @media (min-width: 1400px) {
                margin-right: 0;
              }
            }
            .extras {
              float: left;
              font-size: 0.8rem;
              @media (min-width: 320px) {
                font-size: 0.9rem;
                margin-left: 0.5rem;
                margin-right: 0.5rem;
              }
              @media (min-width: 576px) {
                font-size: 1.15rem;
              }
              @media (min-width: 1200px) {
                margin-left: 1rem;
                font-size: 1rem;
              }
            }
            .extras-price {
              float: right;
              margin: 0 3rem 0 0.5rem;
              width: 1rem;
              text-align: right;
              font-size: 1rem;
              @media (min-width: 576px) {
                font-size: 1.15rem;
              }
              @media (min-width: 1200px) {
                font-size: 1rem;
              }
            }
          }
          .description {
            font-size: 0.85rem;
            clear: both;
            font-style: italic;
            position: relative;
            @media (min-width: 320px) {
              font-size: 1.125rem;
            }
            @media (min-width: 576px) {
              font-size: 1.25rem;
            }
            @media (min-width: 576px) {
              font-size: 1.125rem;
            }
          }
        }
      }
    }
  }
  .soups-and-salads {
    article {
      &:nth-child(7) .menu-item,
      &:last-child .menu-item {
        font-size: 0.9rem !important;
        @media (min-width: 320px) {
          max-width: 80% !important;
          font-size: 1.15rem !important;
        }
        @media (min-width: 360px) {
          max-width: 90% !important;
        }
        @media (min-width: 576px) {
          font-size: 1.5rem !important;
        }
        @media (min-width: 1200px) {
          font-size: 1.25rem !important;
        }
      }
    }
  }
  .starters {
    background: linear-gradient(
        rgba(26, 25, 17, 0.8),
        rgba(26, 25, 17, 0.8)
      ),
      url('assets/table-top.jpg');
    > .wrapper {
      .menu-h2 {
        color: var(--off-white);
        text-shadow: -1px 1px 1px var(--gold);
        &:after,
        &:before {
          background-color: var(--gold);
        }
        @media (min-width: 1200px) {
          text-shadow: -2px 2px 2px var(--black);
        }
      }
      .container {
        color: var(--off-white);
        article {
          .menu-item-group {
            &:after {
              border-bottom: 2px dotted var(--gold);
            }
          }
          &:nth-child(4) .menu-item {
            font-size: 0.8rem;
            @media (min-width: 320px) {
              font-size: 1.1rem;
            }
            @media (min-width: 360px) {
              max-width: 90%;
            }
            @media (min-width: 576px) {
              font-size: 1.5rem;
            }
            @media (min-width: 1200px) {
              font-size: 1.25rem;
            }
          }
        }
      }
    }
  }
  .fries-hero,
  .burgers-hero,
  .wings-hero {
    display: none;
    @media (min-width: 320px) {
      display: grid;
      overflow: hidden;
      grid-template: 1fr auto / repeat(2, 1fr);
      align-items: start;
      height: auto;
      grid-template-areas:
        'heart fries'
        'content content';
    }
    @media (min-width: 1200px) {
      grid-template: 1fr / repeat(3, 1fr);
      grid-template-areas: 'heart content fries';
      align-items: center;
      height: 70vh;
    }
    @media (min-width: 1200px) and (max-height: 600px) {
      height: auto;
    }
    .fries-heart {
      justify-self: start;
      align-self: center;
      grid-area: heart;
      width: 100%;
      img {
        @media (min-width: 768px) {
          transform: scale(1.5);
        }
      }
    }
    article,
    .fries-content {
      grid-area: content;
      padding: 0 1rem;
      margin: 0 0 2rem;
      @media (min-width: 576px) {
        margin: 0 auto 3rem;
        width: 80%;
      }
      @media (min-width: 1200px) {
        margin: 0 3rem;
        padding: 0 2rem;
        margin-left: 4rem;
        width: 100%;
      }
      h4 {
        font-family: Hoodson, cursive;
        text-shadow: -1px 1px 1px var(--black);
        font-size: 2rem;
        text-transform: capitalize;
        word-spacing: 0.1em;
        font-style: italic;
        letter-spacing: 0.05em;
        color: var(--gold);
        text-align: center;
        @media (min-width: 576px) {
          text-align: center;
          font-size: 3rem;
        }
        @media (min-width: 1200px) {
          font-size: 3.5rem;
          text-align: center;
          text-shadow: -2px 2px 2px var(--black);
          margin: 1rem 0;
          white-space: nowrap;
        }
      }
      h5 {
        text-align: center;
        font-size: 1.5rem;
        text-transform: uppercase;
        @media (min-width: 768px) {
          font-size: 1.75rem;
        }
        @media (min-width: 1200px) {
          font-size: 2rem;
        }
      }
      p {
        font-size: 1rem;
        text-align: center;
        @media (min-width: 320px) {
          font-size: 1.125rem;
        }
        @media (min-width: 768px) {
          font-size: 1.5rem;
        }
      }
    }
    .fries {
      justify-self: end;
      grid-area: fries;
      img {
        width: 250px;
        height: 225px;
        @media (min-width: 768px) {
          width: auto;
          height: auto;
        }
      }
    }
  }
  .burgers-hero {
    background: linear-gradient(
        rgba(26, 25, 17, 0.7),
        rgba(26, 25, 17, 0.7)
      ),
      url('assets/table-top.jpg');
    grid-template-areas:
      'topLeft topRight'
      'content content';
    @media (min-width: 1200px) {
      grid-template: repeat(2, 1fr) / repeat(2, 2fr) 3fr;
      grid-template-areas:
        'topLeft topRight content'
        'bottom bottom content';
      height: 70vh;
    }
    @media (min-width: 1200px) and (max-height: 600px) {
      height: auto;
    }
    .rb-burger-top {
      width: 100%;
      height: 100%;
      grid-area: topLeft;
      img {
        width: 200px;
        height: 200px;
        @media (min-width: 768px) {
          transform: scale(1.55);
        }
        @media (min-width: 1200px) {
          transform: scale(1);
          width: 300px;
          height: 300px;
        }
      }
    }
    .burger-top {
      width: 100%;
      height: 100%;
      grid-area: topRight;
      img {
        transform: translate(20%, -30%) scale(1.55) rotate(-35deg);
        @media (min-width: 576px) {
          transform: translate(20%, -30%) scale(1) rotate(-35deg);
        }
        @media (min-width: 768px) {
          transform: translate(20%, -30%) scale(1.55) rotate(-35deg);
        }
        @media (min-width: 1200px) {
          transform: translate(0%, -30%) scale(1.55) rotate(-35deg);
        }
        @media (min-width: 1400px) {
          transform: translate(-15%, -30%) scale(1.55) rotate(-35deg);
        }
      }
    }
    .burger-bottom {
      width: 100%;
      height: 100%;
      grid-area: bottom;
      display: none;
      @media (min-width: 1200px) {
        display: block;
        img {
          transform: translate(-5%, 10%) scale(1.55) rotate(-90deg);
        }
      }
    }
    .burger-content {
      grid-area: content;
      padding: 1rem 1rem 2rem;
      @media (min-width: 1200px) {
        padding: 0 5rem 0 2rem;
        justify-self: end;
      }
      h4 {
        color: var(--off-white);
        text-shadow: -2px 2px 2px var(--gold);
      }
      h5,
      p {
        color: var(--white);
      }
    }
  }
  .burgers {
    background: linear-gradient(
        rgba(237, 221, 173, 0.4),
        rgba(237, 221, 173, 0.4)
      ),
      url('assets/textured_paper.png');
    > .wrapper {
      .menu-h2 {
        color: var(--gold);
        text-shadow: -2px 2px 2px var(--black);
        &:after,
        &:before {
          background-color: var(--black);
        }
      }
      .container {
        color: var(--black);
        article {
          &:last-child {
            .menu-item {
              @media (min-width: 992px) {
                max-width: 80%;
              }
            }
          }
        }
      }
    }
  }
  .sandwiches {
    background: linear-gradient(
        rgba(26, 25, 17, 0.6),
        rgba(26, 25, 17, 0.6)
      ),
      url('assets/table-top.jpg');
    > .wrapper {
      .menu-h2 {
        color: var(--off-white);
        text-shadow: -2px 2px 2px var(--gold);
        &:after,
        &:before {
          background-color: var(--gold);
        }
      }
      .container {
        color: var(--off-white);
        article {
          &:last-child {
            .menu-item {
              @media (min-width: 992px) {
                max-width: 70%;
              }
            }
          }
        }
      }
      .substitutes {
        color: var(--off-white);
      }
    }
  }
  .wings-hero {
    display: none;
    @media (min-width: 320px) {
      display: grid;
      grid-template: auto 1fr / repeat(1, 1fr);
      grid-template-areas:
        'topMid'
        'content';
    }
    @media (min-width: 1200px) {
      height: auto;
      grid-template: repeat(2, 35vh) / 1fr 2fr 1fr;
      grid-template-areas:
        'topLeft topMid topRight'
        'botLeft content botRight';
    }
    @media (min-width: 1200px) and (max-height: 700px) {
      height: 80vh;
    }
    .wings-img {
      grid-area: topMid;
      justify-self: center;
      align-self: start;
      @media (min-width: 1200px) {
        display: block;
        transform: scale(1.5) translate(10%, -5%);
      }
    }
    .wings-left {
      display: none;
      @media (min-width: 1200px) {
        display: block;
        grid-area: botLeft;
        justify-self: start;
        align-self: end;
        transform: scale(1.5);
      }
    }
    .wings-right {
      display: none;
      @media (min-width: 1200px) {
        display: block;
        grid-area: botRight;
        justify-self: end;
        align-self: end;
        transform: scale(1.5);
      }
    }
    .wings-content {
      padding: 2rem 1rem;
      grid-area: content;
      width: 100%;
      height: 100%;
      @media (min-width: 576px) {
        padding: 2rem 3rem;
      }
      @media (min-width: 1200px) {
        margin-left: 3rem;
        padding: 2rem 4rem;
        width: 90%;
        justify-self: center;
        transform: translateY(-20%);
      }
      @media (min-width: 1400px) {
        width: 80%;
      }
      h5 {
        @media (min-width: 1200px) {
          margin: 0;
        }
      }
      h4 {
        @media (min-width: 1200px) {
          margin-top: -1rem;
        }
      }
      p {
        @media (min-width: 576px) {
          padding: 0 5rem;
        }
        @media (min-width: 992px) {
          padding: 0 3rem;
        }
        @media (min-width: 1200px) {
          padding: 0 1rem;
        }
      }
    }
  }
  .wings {
    background: linear-gradient(
        rgba(237, 221, 173, 0.4),
        rgba(237, 221, 173, 0.4)
      ),
      url('assets/textured_paper.png');
    > .wrapper {
      .menu-h2 {
        color: var(--gold);
        text-shadow: -2px 2px 2px var(--black);
        &:after,
        &:before {
          background-color: var(--black);
        }
      }
      .wings-heading-group {
        padding: 0 2rem;
        &:after {
          content: '';
          padding-top: 2em;
          border-bottom: 2px dotted var(--gold);
          display: block;
          overflow: hidden;
          height: 0.8em;
        }
        @media (min-width: 1200px) {
          margin: 0 auto;
          width: 80%;
        }
        .wings-heading {
          text-transform: capitalize;
          font-size: 1.25rem;
          text-align: center;
          @media (min-width: 992px) {
            float: left;
            font-size: 1.5rem;
            margin-right: 0.5rem;
          }
          @media (min-width: 1200px) {
            font-size: 1.75rem;
          }
        }
        .wings-price {
          float: right;
          margin: 0 1rem 0 0.5rem;
          width: 1rem;
          font-size: 1.75rem;
          @media (min-width: 1200px) {
            margin: 0 0 0 0.5rem;
          }
        }
      }
      h5 {
        clear: both;
        text-align: center;
        font-size: 1rem;
        margin: 1rem 0 2rem;
        word-spacing: 0.1em;
        @media (min-width: 320px) {
          padding: 0 1.5rem;
          margin: 3rem 0;
        }
        @media (min-width: 576px) {
          padding: 0 2rem;
        }
        @media (min-width: 1200px) {
          margin-top: 0;
        }
      }
      .gluten-free-wings {
        text-align: center;
        margin: 1rem 2rem 3rem;
        font-size: 1rem;
        font-style: italic;
        color: var(--gold);
        background: var(--black);
        border: 2px solid var(--gold);
        border-radius: 10px;
        padding: 2rem 2rem 1rem;
        @media (min-width: 576px) {
          font-size: 1.25rem;
        }
        @media (min-width: 768px) {
          font-size: 1.5rem;
        }
      }
      .container {
        color: var(--black);
        clear: both;
        width: 95%;
        margin: 0 auto;
        grid-gap: 2rem;
        @media (min-width: 320px) {
          width: 80%;
        }
        @media (min-width: 576px) {
          grid-template-columns: repeat(2, 1fr);
          padding: 0 2rem;
        }
        @media (min-width: 768px) {
          width: 90%;
        }
        @media (min-width: 992px) {
          width: 80%;
        }
        @media (min-width: 1200px) {
          width: 100%;
          grid-template-columns: repeat(3, 1fr);
        }
        article {
          .menu-item-group {
            &:after {
              border: none;
            }
            .menu-item {
              font-size: 0.8rem;
              max-width: 100%;
              @media (min-width: 320px) {
                font-size: 1rem;
              }
              @media (min-width: 768px) {
                font-size: 1.25rem;
              }
              @media (min-width: 1200px) {
                font-size: 1.5rem;
              }
            }
          }
        }
      }
    }
  }
  .classics {
    background: linear-gradient(
        rgba(26, 25, 17, 1),
        rgba(26, 25, 17, 1)
      ),
      url('assets/textured_paper.png');
    > .wrapper {
      .menu-h2 {
        color: var(--off-white);
        text-shadow: -2px 2px 2px var(--gold);
        &:after,
        &:before {
          background-color: var(--gold);
        }
      }
      .container {
        color: var(--off-white);
        article {
          position: relative;
          .classics-heading {
            background: linear-gradient(
              rgba(237, 221, 173, 0.3),
              rgba(237, 221, 173, 0.3)
            );
            padding: 1rem 0 0.5rem;
            color: var(--gold);
            text-shadow: -2px 2px 2px var(--black);
            font-size: 1.25rem;
            text-transform: uppercase;
            text-align: center;
            border-radius: 5px;
            margin-bottom: 1rem;
            @media (min-width: 320px) {
              font-size: 2rem;
            }
            &.veggie {
              &:before {
                content: 'VEG';
                display: inline-block;
                position: absolute;
                left: -2.5rem;
                top: 1.25rem;
                width: 2.25rem;
                height: 2.25rem;
                color: green;
                border: 2px solid green;
                text-align: center;
                padding-top: 2rem;
                font-size: 1rem;
                background: url('assets/vegetarian-mark.jpg');
                background-size: cover;
              }
            }
          }
          .ribs {
            display: grid;
            @media (min-width: 1200px) {
              min-height: 80%;
            }
            .rw-combo {
              margin-top: 3rem;
            }
          }
        }
      }
    }
  }
  .specials {
    background: linear-gradient(
        rgba(255, 255, 255, 0.4),
        rgba(255, 255, 255, 0.4)
      ),
      url('assets/textured_paper.png');
    > .wrapper {
      .menu-h2 {
        color: var(--gold);
        text-shadow: -2px 2px 2px var(--black);
        margin-bottom: 3rem;
        &:after,
        &:before {
          background-color: var(--black);
        }
      }
      .special-cards {
        display: flex;
        flex-direction: column;
        padding: 0 1rem;
        @media (min-width: 576px) {
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          padding: 0;
        }
        @media (min-width: 1200px) {
          justify-content: space-between;
          flex-wrap: nowrap;
        }
        .special-card {
          opacity: 0.5;
          margin: 1rem 0.5rem;
          border: 2px solid black;
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
          @media (min-width: 576px) {
            width: 30%;
          }
          .special-day,
          .special {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
          .special-day {
            height: 50px;
            border-bottom: 2px solid black;
            background: var(--white);
            h5 {
              text-transform: uppercase;
              font-size: 1.5rem;
              padding-top: 0.5rem;
            }
          }
          .special {
            height: 100px;
            background: gray;
            p {
              color: var(--white);
              font-size: 1.5rem;
              @media (min-width: 576px) {
                font-size: 1.25rem;
              }
              @media (min-width: 768px) {
                font-size: 1.5rem;
              }
            }
          }
          &.today {
            opacity: 1;
            position: relative;
            z-index: 50;
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.8);
            transform: scale(1.05, 1.25);
            @media (min-width: 1200px) {
              transform: scale(1.25, 1.5);
            }
            .special {
              background: var(--gold);
            }
          }
        }
      }
      .facebook-container {
        display: none;
        @media (min-width: 320px) {
          display: flex;
          margin: 5rem 0 2rem;
          width: 100%;
          display: flex;
          justify-content: center;
        }
        .rb-facebook-feed {
          width: 300px;
          height: 500px;
          border: 5px solid var(--gold);
          box-shadow: 0 10px 15px rgba(0, 0, 0, 0.8);
          @media (min-width: 576px) {
            width: 400px;
          }
          @media (min-width: 768px) {
            height: 700px;
          }
          @media (min-width: 1200px) {
            width: 33.9%;
          }
        }
      }
    }
  }
  .fresh-ingredients {
    background: url('assets/fresh-ingredients.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 50vh;
    margin-bottom: 1rem;
    @media (min-width: 1200px) {
      margin-bottom: 5rem;
    }
    .fi-overlay {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: rgba(26, 25, 17, 0.7);
      h2,
      h3 {
        color: var(--white);
        word-spacing: 0.125em;
      }
      h2 {
        font-size: 1rem;
        text-align: center;
        @media (min-width: 576px) {
          font-size: 1.5rem;
        }
        @media (min-width: 768px) {
          font-size: 2rem;
        }
        @media (min-width: 1200px) {
          font-size: 3rem;
        }
      }
      h3 {
        font-size: 0.9rem;
        text-transform: capitalize;
        text-align: center;
        @media (min-width: 576px) {
          font-size: 1.25rem;
        }
        @media (min-width: 768px) {
          font-size: 1.5rem;
        }
        @media (min-width: 1200px) {
          font-size: 2rem;
        }
      }
    }
  }
  .contact {
    background: var(--white);
    padding-bottom: 0;
    > .wrapper {
      .menu-h2 {
        color: var(--gold);
        text-shadow: -2px 2px 2px var(--black);
        margin-bottom: 3rem;
        &:after,
        &:before {
          background-color: var(--black);
        }
      }
    }
    .contact-container {
      display: block;
      @media (min-width: 320px) {
        display: grid;
        grid-template: repeat(3, 1fr) auto / 1fr;
      }
      @media (min-width: 768px) {
        grid-template: repeat(2, 1fr) / repeat(2, 1fr);
      }
      .contact-details {
        background: rgba(237, 221, 173, 0.4);
        padding: 1rem;
        @media (min-width: 1200px) {
          padding: 3rem;
        }
        h2,
        h3 {
          text-transform: uppercase;
          color: var(--gold);
          text-shadow: -1px 1px 1px var(--black);
          @media (min-width: 1200px) {
            text-shadow: -2px 2px 2px var(--black);
          }
        }
        h2 {
          font-size: 1.25rem;
          @media (min-width: 320px) {
            font-size: 1.25rem;
          }
          @media (min-width: 355px) {
            font-size: 1.45rem;
          }
          @media (min-width: 576px) {
            font-size: 1.75rem;
          }
          @media (min-width: 768px) {
            font-size: 1.5rem;
          }
          @media (min-width: 992px) {
            font-size: 2rem;
          }
          @media (min-width: 1200px) {
            font-size: 2.5rem;
          }
        }
        address {
          font-size: 1rem;
          margin-bottom: 2rem;
          width: 75%;
          @media (min-width: 320px) {
            font-size: 1.125rem;
            margin-bottom: 3rem;
            width: 100%;
          }
          @media (min-width: 992px) {
            font-size: 1.5rem;
          }
        }
        .btn {
          display: inline-block;
          margin-bottom: 3rem;
          &:hover,
          &:focus {
            color: var(--gold);
          }
          @media (min-width: 992px) {
            font-size: 1.25rem;
          }
        }
        .email-icon,
        .phone-icon {
          margin-right: 0.5rem;
          font-size: 1.5rem;
          @media (min-width: 992px) {
            font-size: 2rem;
          }
        }
        a {
          display: block;
          font-size: 1rem;
          color: var(--black);
          @media (min-width: 320px) {
            font-size: 1.25rem;
          }
          @media (min-width: 992px) {
            font-size: 1.5rem;
          }
        }
        h3 {
          margin-top: 2rem;
          font-size: 1.25rem;
          @media (min-width: 320px) {
            font-size: 1.75rem;
          }
        }
        p {
          font-size: 0.9rem;
          @media (min-width: 320px) {
            font-size: 1.25rem;
          }
          @media (min-width: 992px) {
            word-spacing: 0.03em;
            font-size: 1.5rem;
          }
          a {
            display: inline-block;
          }
        }
        .kitchen-close {
          font-size: 1rem;
          margin-bottom: 2rem;
          background: rgba(255, 255, 0, 0.5);
          display: inline-block;
        }
        .sm-icon {
          display: inline;
          margin-right: 1.5rem;
          font-size: 2rem;
          @media (min-width: 320px) {
            margin-right: 2rem;
            font-size: 3rem;
          }
          &:hover {
            color: var(--gold);
          }
        }
      }
      .google-map {
        iframe {
          height: 100%;
          width: 100%;
          margin-bottom: -0.4rem;
        }
      }
      .old-sandwich-town {
        background: url('assets/old-sandwich-town.jpg');
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
        min-height: 200px;
      }
      .thank-you {
        display: grid;
        justify-items: center;
        align-items: center;
        height: 100%;
        background: var(--black);
        h3 {
          font-size: 2rem;
          font-family: Hoodson, cursive;
          color: var(--off-white);
          text-align: center;
          letter-spacing: 0.05em;
          padding: 3rem 0;
          @media (min-width: 320px) {
            font-size: 3rem;
          }
          @media (min-width: 1200px) {
            font-size: 5rem;
          }
        }
      }
    }
  }
  footer {
    text-align: center;
    padding: 1rem 0;
    font-size: 1rem;
    background: rgba(237, 221, 173, 0.4);
    @media (min-width: 768px) {
      padding: 2rem 0;
      font-size: 1.5rem;
    }
  }
}