/* ************************************************ */
/* ************** EVENT BARS SECTION ************** */
/* ************************************************ */
.eventBar {
  max-width: 100%;
  min-width: 0;
  height: 0.35088rem;
  padding: 0;
  margin: 0 auto;
}
.blue {
  display: inline-block;
  width: 25%;
  height: 100%;
  background-color: var(--Primary-Navy-Blue);
  padding: 0;
  margin: 0;
}
.green {
  display: inline-block;
  width: 25%;
  height: 100%;
  background-color: var(--Primary-Forest-Green);
  padding: 0;
  margin: 0;
}
.purple {
  display: inline-block;
  width: 25%;
  height: 100%;
  background-color: var(--Primary-Plum);
  padding: 0;
  margin: 0;
}
.yellow {
  display: inline-block;
  width: 25%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: var(--Primary-Cantelope);
}

/* **************************************************************************** */
/* **************************** BLACK-BLUR SECTION **************************** */
/* **************************************************************************** */
/* ***** THIS IS THE BLUR THAT MAKES THE NAVIGATION LEGIBLE ON ALL PAGES ****** */
/* **************************************************************************** */
.home-black-blur {
  position: relative;
  top: -125px;
  left: 0;
  width: 100%;
  height: 200px;
  mask-image: linear-gradient(
    to bottom,
    rgba(36, 36, 36, 0.65) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 2;
  background-color: #323752;
}
@media screen and (min-width: 1200px) {
  .home-black-blur {
    top: -80px;
  }
}