:root {
  /* brand colors */
  --color-primary: rgba(204,51,51,1); /* #cc3333, red */
  /* --color-secondary: rgba(48,46,47,1);  #302E2F, gray */
  --color-secondary: rgba(34,78,109,1); /* #224ebd, blue */
  --color-tertiary: rgba(251,164,30,1); /* #fba41e, dark yellow */
  --color-quaternary: rgba(122,40,0,1); /* #7a2800 , brown */
  --color-quinary: rgba(245,232,183,1); /* #f5e8b7 beige */
  --color-quinary-alpha: rgba(245,232,183,0.14); /* #f5e8b724 beige */

/* logo fonts:
  * Bebas Neue
  * Bookman Old Style
*/

  /* brand fonts */
  --font-secondary: copperplate,Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-tertiary: "P22 Mackinac Pro Medium",Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

html, body {
  min-height: 100%;
  font-family: var(--font-secondary);
  background-color: var(--color-quinary-alpha);
}

body {
  font-size:1.15rem;
  letter-spacing:0.03rem;
}

a {
  color: var(--color-secondary);
}

.btn-info, .btn-info:active, .btn-info:focus, .btn-info:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-tertiary, .btn-tertiary:active, .btn-tertiary:focus, .btn-tertiary:hover {
  background-color: var(--color-tertiary);
  border-color: var(--color-tertiary);
}

#stage {
  min-height: 100%;
  height: 100%;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
}

#main-announcement {
  color: var(--color-quinary);
  /* min-height: 84vh; */

}

  #branding {
    text-align: center;
  }

    img#logo {
      width: 100%;
      max-width: 30rem;
    }

  .coming-soon-banner, .announcement-banner, #address {
    font-family: var(--font-tertiary);
    margin-top: 3rem;
  }

  .brunch-banner {
    text-shadow:
     -1px -1px 0 var(--color-primary),
      1px -1px 0 var(--color-primary),
      -1px 1px 0 var(--color-primary),
      1px 1px 0 var(--color-primary);
  }

  .coming-soon-banner {
    font-size: 7vw;
    color: var(--color-primary);
  }


  .h-icon {
    max-height: 4vh;
  }


  .navbar {
      padding: 15px 10px;
      background: #fff;
      border: none;
      border-radius: 0;
      margin-bottom: 40px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  }

  .navbar.fixed-top.bg-light {
    background-color: #fff7f0;
  }

  .navbar-brand img {
    max-width: 4rem;
  }

  .navbar-btn {
      box-shadow: none;
      outline: none !important;
      border: none;
  }


  /* begin table styles */
table.menu {
  margin-bottom:1em;width:98%;
}
    table.menu caption {
      caption-side: top;
      font-size: 2rem;
      color: var(--color-secondary);
    }

    table.menu thead th {
      text-align: right;
      color: var(--color-secondary);
    }
    table.menu tbody {
    }

        table.menu td, table.menu th {
          padding:0.2em 0.5em 0.2em 0;
        }

        table.menu tbody th td, table.menu tbody tr th {
          padding-bottom:1rem;
        }


         table.menu tbody th {
          font-weight: normal;
        }
        table.menu tbody th {text-align:left;}
        table.menu tbody tr td:first-child, table.menu tbody tr th:first-child {
          font-size: 1.35rem;
          font-family: var(--font-tertiary);
        }
            table.menu tbody tr td span, table.menu tbody tr th span {
              display:block;
              margin-left:16px;
              font-size:1rem;
              font-family: var(--font-secondary);
            }
            table.menu tbody tr td span.addition, table.menu tbody tr th span.addition {display:block;margin-left:1em;}

            table.menu .price {
              text-align: right;
              font-size: 1rem;
            }

table.menu .note {font-size:0.95rem;}
/* end table styles */



.menu-wrapper {
    position: relative;
    padding: 1rem;
    border-top: 2px solid var(--color-primary);
    border-right: 2px solid var(--color-primary);
}

.menu-wrapper::before,
.menu-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
}


.menu-wrapper::after {
    border-width: 1.35em;
    border-right-color: var(--color-primary);
    border-top-color: var(--color-primary);
}


.service-header {
  color: var(--color-secondary);
  text-transform: uppercase;
}

.category-header {
  color: var(--color-primary);
  text-transform: uppercase;
}

.sub-category-header {
  color: var(--color-secondary);
  text-transform: uppercase;
}

.page-title {
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 2.15rem;
}

  .line {
      width: 100%;
      height: 1px;
      border-bottom: 1px dashed #ddd;
      margin: 40px 0;
  }

  .sidemenu-divider {
    max-width: 100%;
  }

  .social-link {
    border-bottom-width:0 !important;
  }

  .social-icon {
    width: 6vh;

  }

  .asterisk {
    color: var(--color-primary);font-weight: 800;
  }

  #footer {
    /* background-color: #fff7f0; */
    color: var(--color-quinary);
    box-shadow: 0px -1px 4px 1px rgba(0, 0, 0, .5);
    background-size: 70%;
  }

    #footer.bg-primary .nav-item a {
      color: var(--color-quinary);
    }

  .footer .nav-item a {
    /*  border-bottom: solid 1px; */
  }

  .footer .nav-item a:hover {
    border-bottom: 0;
    text-decoration: none;
  }

  .copyright {
    font-size: 1.25rem;
    text-transform: uppercase;
  }


  /* -----------------
    CONTENT wrapper
  --------------------*/

  #dinner-menu {
    padding-top: 3vh;
  }

    .content-wrapper {
        display: flex;
        width: 100%;
        align-items: stretch;
        margin-top: 5rem;
        padding-top: 1rem;
    }

    /** opentable overrides */

    #ot-reservation-widget.parent-widget-type-button .ot-button {
      padding: 0.5rem !important;
    }
    .ot-powered-by {
      display:none
    }

    .home .content-wrapper  {
      /*
          background-image: url('../images/photos/lge/5.png');
          background-size:cover;
          background-position: 40% 20%;
          background-repeat:no-repeat;
      */
      }


      .home .content-wrapper::before {
      /*
        content: "";
        position: absolute;
        top: 0;
        right: 0px;
        bottom: -4rem;
        left: 0px;
        padding-bottom: 1rem;
        background-color: rgba(225,225,225,0.5);
      */
      }

  .content-cover {
    position:relative;
  }


  /* ------
    HAPPY HOUR
  --------*/

  .hh-container {
    text-align: center;
    border-width: 16px;
    border-style: solid;
    padding: 2px;
    border-image: url('/images/border-blue-red.png') 85 round;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    text-shadow:
     -1px -1px 0 var(--color-primary),
      1px -1px 0 var(--color-primary),
      -1px 1px 0 var(--color-primary),
      1px 1px 0 var(--color-primary);
  }

  .home-address span {
    text-shadow:
     -1px -1px 0 var(--color-primary),
      1px -1px 0 var(--color-primary),
      -1px 1px 0 var(--color-primary),
      1px 1px 0 var(--color-primary);
  }

  /* ---------------------------------------------------
      SIDEMENU STYLE
  ----------------------------------------------------- */

  #sideMenuCollapse span {
    margin-left: 0.5rem;
  }

  #sidemenu {
      min-width: 276px;
      max-width: 276px;
      padding: 1rem 0rem 1rem 0.5rem;
      transition: all 0.3s;
  }

  #sidemenu.active {
      margin-left: -276px;
  }

  .menu-nav {
    border-width: 32px;
    border-style: solid;
    padding: 2px;
    /*    border-image: url('/images/border-brown-gray.png') 85 round; */
    border-image: url('/images/border-red-blue.png') 85 round;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  #sidemenu .sidemenu-header {
      padding: 20px;
  }

  #sidemenu ul.components {
      padding: 20px 0;
      /* border-bottom: 1px solid #47748b; */
  }

  #sidemenu ul p {
      color: #fff;
      padding: 10px;
  }

  #sidemenu ul li a {
      padding: 10px;
      font-size: 1.1em;
      display: block;
  }

  #sidemenu ul li a:hover {
      color: #7386D5;
  }

  #sidemenu ul li.active>a,
  a[aria-expanded="true"] {
      text-decoration:underline;
  }

  a[data-toggle="collapse"] {
      position: relative;
  }

  .dropdown-toggle::after {
      display: block;
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
  }

  ul ul a {
      font-size: 0.9em !important;
      padding-left: 30px !important;
      background: #6d7fcc;
  }

  ul.CTAs {
      padding: 20px;
  }

  ul.CTAs a {
      text-align: center;
      font-size: 0.9em !important;
      display: block;
      border-radius: 5px;
      margin-bottom: 5px;
  }

  a.download {
      background: #fff;
      color: #7386D5;
  }

  a.article,
  a.article:hover {
      background: #6d7fcc !important;
      color: #fff !important;
  }

  /* --------------
    COLORS
  ----------------*/

  .nav-link {
    color: var(--color-secondary);
  }

  .navbar.fixed-top.bg-light {
    box-shadow: 0px 1px 1px 1px var(--color-quinary);
  }

  .bg-primary {
    background-color: var(--color-primary) !important;
    box-shadow: 0px 3px 6px 1px var(--color-secondary);
  }

    .bg-primary .navbar-nav .nav-link {
      color: #ffffff;
    }

  .bg-primary {
    background-color: var(--color-primary) !important;
    box-shadow: 0px 3px 6px 1px var(--color-secondary);
  }

    .bg-primary, .bg-primary .nav-item a {
      color: #ffffff;
    }

  .bg-quinary {
    background-color: var(--color-quinary) !important;
    box-shadow: 0px 3px 6px 1px var(--color-secondary);
  }

    .bg-quinary .navbar-nav .nav-link {
      color: #ffffff;
    }

  .blur {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
  }

  /* ------------------------
    TYPOGRAPHY
  --------------------------*/
  .navbar.fixed-top .navbar-nav .nav-item {
  }

  /* ---------------------------------------------------
      CONTENT STYLE
  ----------------------------------------------------- */

  #content {
      width: 100%;
      padding: 20px;
      transition: all 0.3s;
  }

  .hardwater-coffee-menu, table.menu.hardwater-coffee-menu tbody tr th:first-child {
    font-family: "Courier New", "Courier", monospace;
  }

  .hardwater-coffee-header {
    color: #090909;
  }


  /* ---------------------------------------------------
      MEDIAQUERIES
  ----------------------------------------------------- */

  @media (max-width: 768px) {
      #sidemenu {
          margin-left: -276px;
      }
      #sidemenu.active {
          margin-left: 0;
      }
      #sideMenuCollapse span {
          /* display: none; */
      }

      .home .content-wrapper::before {
          /* bottom: -11rem; */
      }
  }

  @media (min-width: 768px) {
    .coming-soon-banner {
      font-size: 3vw;
    }

  }