@import url('https://fonts.googleapis.com/css2?family=Ribeye+Marrow&display=swap');

/* =========================
   GLOBAL
========================= */
body {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: #2a8795;
  text-align: var(--body-text-align);
  -webkit-text-size-adjust: 100%;
}

body.site {
  background: #dfe2d6;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(
    --cassiopeia-font-family-headings,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji"
  );
  font-weight: 400;
  color: #2a8795;
}

/* =========================
   FULL WIDTH HEADER / LOGO BAR
========================= */
.container-header {
  background: #fff;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.container-header .grid-child,
.container-header .mod-custom,
.container-header .navbar-brand,
.container-header .navbar,
.container-topbar {
  margin: 0;
  padding: 0;
}

.container-header img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Hide Cassiopeia default logo if using custom logo module */
.container-header .navbar-brand {
  display: none;
}

/* =========================
   FULL WIDTH MENU BAR
========================= */
.container-nav {
  background: #dfe2d6;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center !important;
}

.container-nav .navbar {
  margin: 0;
  padding: 0;
  background: transparent;
  display: flex;
  justify-content: center;
  width: 100%;
}

.container-nav .navbar-collapse {
  justify-content: center;
}

.container-nav .navbar-nav,
.container-nav .mod-menu {
  margin: 0 auto;
  justify-content: center;
}

/* =========================
   MAIN CONTENT WIDTH
========================= */
.site-grid {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
}

.container-component,
.container-sidebar-right,
.container-sidebar-left {
  box-sizing: border-box;
}

/* =========================
   ARTICLE BACKGROUND
========================= */
.container-component > * {
  background: #fbfcfa;
  padding: 20px;
}

/* =========================
   SIDEBARS
========================= */
.container-sidebar-right > *,
.container-sidebar-left > * {
  padding: 0;
  background: transparent;
}

/* =========================
   MENU FONT
========================= */
.container-nav .mod-menu a,
.container-nav .navbar-nav .nav-link,
.container-nav .navbar-nav > li > a {
  font-family: "Ribeye Marrow", serif;
  font-weight: 400;
  font-style: normal;
}

/* =========================
   DESKTOP MENU CENTRING
========================= */
@media (min-width: 768px) {
  .container-nav {
    display: flex;
    justify-content: center !important;
  }

  .container-nav .navbar {
    justify-content: center !important;
  }

  .container-nav .navbar-collapse {
    display: flex !important;
    flex-grow: 0 !important;
    justify-content: center !important;
  }

  .container-nav .navbar-nav,
  .container-nav .mod-menu {
    display: flex;
    justify-content: center !important;
    margin: 0 auto !important;
    width: auto;
  }

  .container-nav .navbar-nav > li,
  .container-nav .mod-menu > li {
    float: none;
  }

  .container-nav .navbar-toggler {
    display: none;
  }
}

/* =========================
   MENU SPACING
========================= */
.container-nav .navbar-nav,
.container-nav .mod-menu {
  padding-top: 20px;
  padding-bottom: 20px;
}

.container-nav .navbar-nav > li > a,
.container-nav .mod-menu > li > a,
.container-nav .navbar-nav .nav-link {
  padding-left: 18px;
  padding-right: 18px;
}

/* =========================
   ACTIVE MENU ITEM
========================= */
.container-nav .mod-menu .active > a,
.container-nav .navbar-nav .active > a,
.container-nav .navbar-nav .nav-link.active {
  text-decoration: none;
  background: #f6f6f6;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 767.98px) {
  .container-nav {
    display: block;
  }

  .container-nav .navbar {
    width: 100%;
    justify-content: center;
  }

  .container-nav .navbar-toggler {
    margin: 12px auto;
    display: block;
  }

  .container-nav .navbar-collapse {
    text-align: center;
  }

  .container-nav .navbar-nav,
  .container-nav .mod-menu {
    display: block;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}