/* --- filter-bar.css --- */
/* --- Website Nina Hitz --- */



div.filter-bar {
  display: block;
  position: sticky;
  width: 100%;
  top: 3.5rem;
  z-index: 12;
}

div.filter-bar > div.project-grid-container {
  padding: 0.15rem var(--page-side-margin) 0.2rem var(--page-side-margin);
  /* background-color: var(--color-lightgrey-tp); */
  background-color: var(--color-matblack);
  margin: 0;
}

/* Disabled Filter Color (Default) */
div.filter-bar > div.project-grid-container {
  color: grey;
}

/* Active Filter Color */
div.filter-bar > * > * > div.filter-active {
  color: white;
}

/* Filter Bar Grid Settings */
div.filter-bar > * > div.filter-show-all {
  grid-area: 1 / 1 / 1 / 1;
}

div.filter-bar > * > div.filter-print {
  grid-area: 1 / 3 / 1 / 3;
}

div.filter-bar > * > div.filter-type {
  grid-area: 1 / 4 / 1 / 4;
}

div.filter-bar > * > div.filter-digital {
  grid-area: 1 / 5 / 1 / 5;
}

div.showall-title {
  grid-area: 1 / 1 / 1 / 1;
}

div.filter-spacer-top{  
  /* height: calc(100vh - 18.3rem); */
  height: 30rem;
}




@media (max-width: 600px) {
div.filter-bar > div.project-grid-container {
  background-color: var(--color-matblack);
  color: var(--color-white);
  margin: 0rem;
}

div.filter-bar > * > div.filter-show-all {
  grid-area: 1 / 1 / 1 / 4;
  margin-bottom: 0.4rem;
}

div.filter-bar > * > div.filter-print {
  grid-area: 2 / 1 / 2 / 3;
}

div.filter-bar > * > div.filter-type {
  grid-area: 2 / 3 / 2 / 4;
}

div.filter-bar > * > div.filter-digital {
  grid-area: 2 / 6 / 2 / 5;
}

div.showall-title {
  grid-area: 2 / 1 / 2 / 1;
}

div.filter-spacer-top{
  /* height: calc(100vh - 18.3rem); */
  height: 10rem;
}
}   /* End of Media Breakpoint */