/**
    Slide an element open downwards using the .visible class. Provide the
    animation duration in ms as the parameter (default 300ms).
    You can provide additional visible styles as content.
 */
.gh-ct2--flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.gh-ct2--flex .gh-ct2__trigger,
.gh-ct2--flex .gh-ct2 [aria-controls] {
  display: flex;
  flex: 0 0 100%;
  transition: filter 200ms ease;
}
@media screen and (min-width: 786px) {
  .gh-ct2--flex .gh-ct2__trigger,
.gh-ct2--flex .gh-ct2 [aria-controls] {
    flex-basis: 33.3333%;
  }
}
@media screen and (min-width: 1024px) {
  .gh-ct2--flex .gh-ct2__trigger,
.gh-ct2--flex .gh-ct2 [aria-controls] {
    flex-basis: 20%;
  }
}
.gh-ct2--flex .gh-ct2__trigger.gh-saturation-filter,
.gh-ct2--flex .gh-ct2 [aria-controls].gh-saturation-filter {
  filter: saturate(50%);
}
.gh-ct2--flex .gh-ct2__trigger.gh-saturation-filter.active,
.gh-ct2--flex .gh-ct2 [aria-controls].gh-saturation-filter.active {
  filter: saturate(100%);
}
.gh-ct2--flex .gh-ct2__trigger.gh-saturation-filter.inactive,
.gh-ct2--flex .gh-ct2 [aria-controls].gh-saturation-filter.inactive {
  filter: saturate(0%);
}
.gh-ct2--flex .gh-ct2__target {
  margin-bottom: 0;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  visibility: hidden;
  transition: max-height 300ms ease 0s, margin-bottom 300ms ease 0s, margin-top 300ms ease 0s, padding-bottom 300ms ease 0s, padding-top 300ms ease 0s, opacity 300ms, visibility 300ms;
  flex-basis: 100%;
  position: relative;
}
.gh-ct2--flex .gh-ct2__target.active {
  max-height: 200vh;
  opacity: 1;
  visibility: visible;
}

.gh-ct2--grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: row dense;
}
.gh-ct2--grid .gh-ct2__trigger {
  grid-column-start: span 12;
}
@media screen and (min-width: 786px) {
  .gh-ct2--grid .gh-ct2__trigger {
    grid-column-start: span 6;
  }
}
@media screen and (min-width: 1024px) {
  .gh-ct2--grid .gh-ct2__trigger {
    grid-column-start: span 3;
  }
}
.gh-ct2--grid .gh-ct2__target {
  margin-bottom: 0;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  visibility: hidden;
  transition: max-height 300ms ease 0s, margin-bottom 300ms ease 0s, margin-top 300ms ease 0s, padding-bottom 300ms ease 0s, padding-top 300ms ease 0s, opacity 300ms, visibility 300ms;
  grid-column: span 12;
}
.gh-ct2--grid .gh-ct2__target.gh-ct-visible {
  max-height: 200vh;
  opacity: 1;
  visibility: visible;
}
@media screen and (min-width: 786px) {
  .gh-ct2--grid .gh-ct2__target {
    grid-column-start: span 12;
  }
}

.gh-ct2__close {
  background: transparent;
  background-clip: padding-box;
  border: 0;
  border-radius: 0;
  color: inherit;
  display: inline-block;
  line-height: normal;
  padding: 0;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  width: auto;
  padding: 0.5rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.gh-ct2__close:active, .gh-ct2__close:hover, .gh-ct2__close:focus {
  background: transparent;
  color: inherit;
  text-decoration: underline;
}
.gh-ct2__close:focus {
  box-shadow: none;
  z-index: auto;
}
.gh-ct2__close .gh-ct2__close-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234a4d4a' viewBox='0 0 16 16'%3E%3Cpath d='M2.697.657l12.728 12.728-2.122 2.121L.575 2.778z'/%3E%3Cpath d='M15.425 2.778L2.697 15.506.575 13.385 13.303.657z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 1.2rem;
  transition: transform 200ms ease;
  width: 1.2rem;
}
.gh-ct2__close:hover .gh-ct2__close-icon {
  transform: scale(1.2);
}