/* Site-specific overrides layered on top of the Charifund template's
   main.css / responsive.css. Loaded last in head.blade.php so equal-
   specificity rules here win the cascade without needing !important. */

/* Oversized "abstract" nav logo: the mark bleeds above/below the header
   bar instead of being constrained to the row's height. The 70px box
   below is the fixed slot the flex row lays out around (so header
   height never changes); the image itself is pulled out of flow and
   sized independently of that slot. */
   /* .topbar.topbar--secondary,
   .header.header-secondary {
  padding: 0px;
  background-color: green;
} */

/* .topbar--secondary,
.header-secondary {
  padding: 0px;
  background-color: green;
} */

.header .navbar-logo {
  position: relative;
  width: 150px;
  min-width: 150px;
  height: 70px;
}
.header .navbar-logo__link {
  display: block;
  height: 100%;
}
.header .navbar-logo img {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  max-width: none;
  width: auto;
  height: 150px;
  margin-top: 50px;
  /* the PNG is real alpha transparency around a round-ish mark, so
     drop-shadow (which follows the actual silhouette) gives contrast
     against both the white header and whatever sits behind it in the
     hero, instead of a fixed box-shadow rectangle. */
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85))
          drop-shadow(0 0 14px rgba(18, 47, 42, 0.5))
          drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}
.header .navbar-logo__text {
  display: inline-block;
  margin-left: 165px;
}

@media only screen and (max-width: 575px) {
  .header .navbar-logo {
    width: 90px;
    min-width: 90px;
    height: 50px;
  }
  .header .navbar-logo img {
    height: 100px;
  }
  .header .navbar-logo__text {
    margin-left: 100px;
    font-size: 16px;
  }
}

.header .navbar__item a {
  color: #fff;
}
.header-secondary .navbar__sub-menu a {
  color: #091f1b;
}