.factBoxes a[id] {
  position: absolute;
}
.factBoxes li::before {
  color: #fff !important;
}
.factBoxes > div > div {
  --switch: 0;
  color: #fff;
  font-size: 0.9em;
  position: relative;
}
.factBoxes > div > div > div {
  background-color: var(--color-primary);
  padding: 2em;
  overflow: hidden;
  max-height: 19em;
  transition: max-height 800ms;
}
.factBoxes > div > div.small > div {
  padding-bottom: 2em;
  overflow: hidden;
  max-height: inherit;
}
@media screen and (min-width: 640px) {
  .factBoxes > div > div.small > div {
    height: 350px;
  }
}
.factBoxes > div > div .toggle {
  display: block;
  width: 100%;
  height: 4em;
  padding: 0.4em 2em;
  color: #fff;
  text-decoration: none;
  position: relative;
  background: var(--color-primary);
}
.factBoxes > div > div .toggle::before {
  content: "plus";
  position: absolute;
  font-family: deister-icons;
  font-size: 1.8em;
  right: 4%;
  transition: transform 500ms 750ms;
}
.factBoxes > div > div header :nth-child(1)::after {
  content: "";
  display: block;
  width: 40%;
  height: 4px;
  background-color: #fff;
}
.factBoxes a:target + div > div {
  max-height: 200vh;
}
.factBoxes a:target + div .toggle::before {
  transform: rotate(45deg);
}

/*# sourceMappingURL=factBoxes.css.map */