section.sub-navigation-section {
  position: relative;
  margin-bottom: 20px;
}

section.sub-navigation-section .sub-navigation-tester {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
section.sub-navigation-section .sub-navigation-tester.is-hidden {
  display: none;
}

section.sub-navigation-section .sub-navigation-tester .sub-navigation-toggle,
section.sub-navigation-section.is-not-wrapped .sub-navigation-toggle {
  display: none;
}
section.sub-navigation-section .sub-navigation-tester .sub-navigation,
section.sub-navigation-section.is-not-wrapped .sub-navigation {
  display: flex;
  flex-wrap: wrap;
}
section.sub-navigation-section .sub-navigation-tester .sub-navigation-item,
section.sub-navigation-section.is-not-wrapped .sub-navigation-item {
  display: inline-block;
  padding: 12px 20px;
  color: #0091a6;
  background: #e3f5f8;
}
section.sub-navigation-section .sub-navigation-tester .sub-navigation-item.is-active,
section.sub-navigation-section.is-not-wrapped .sub-navigation-item.is-active {
  font-weight: bold;
  color: #ffffff;
  background: #0091a6;
}
section.sub-navigation-section .sub-navigation-tester .sub-navigation-item:hover, section.sub-navigation-section .sub-navigation-tester .sub-navigation-item:active,
section.sub-navigation-section.is-not-wrapped .sub-navigation-item:hover,
section.sub-navigation-section.is-not-wrapped .sub-navigation-item:active {
  text-decoration: none;
  font-weight: bold;
}

section.sub-navigation-section.is-wrapped {
  border-top: 5px solid rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
section.sub-navigation-section.is-wrapped .sub-navigation-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}
section.sub-navigation-section.is-wrapped .sub-navigation-toggle span {
  font-size: 20px;
  font-weight: 400;
}
section.sub-navigation-section.is-wrapped .sub-navigation-toggle svg {
  transform: rotate(180deg);
  transition: all 250ms ease;
}
section.sub-navigation-section.is-wrapped > .sub-navigation {
  display: none;
  flex-direction: column;
}
section.sub-navigation-section.is-wrapped > .sub-navigation .sub-navigation-item {
  position: relative;
  padding: 14px 0;
  padding-left: 28px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  font-size: 20px;
  font-weight: 400;
  color: #0091a6;
}
section.sub-navigation-section.is-wrapped > .sub-navigation .sub-navigation-item:hover, section.sub-navigation-section.is-wrapped > .sub-navigation .sub-navigation-item:active {
  text-decoration: none;
  font-weight: bold;
}
section.sub-navigation-section.is-wrapped > .sub-navigation .sub-navigation-item::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: #0091a6;
}
section.sub-navigation-section.is-wrapped > .sub-navigation .sub-navigation-item:last-child {
  border-bottom: 0;
}
section.sub-navigation-section.is-wrapped > .sub-navigation .sub-navigation-item.is-active {
  color: #000000;
  font-weight: bold;
}
section.sub-navigation-section.is-wrapped > .sub-navigation .sub-navigation-item.is-active::before {
  height: 3px;
  background: #000000;
}
section.sub-navigation-section.is-wrapped > .sub-navigation .sub-navigation-item.has-parents {
  padding-left: 48px;
}
section.sub-navigation-section.is-wrapped > .sub-navigation .sub-navigation-item.has-parents::before {
  left: 20px;
}

section.sub-navigation-section.is-wrapped.is-toggled .sub-navigation-toggle svg {
  transform: rotate(360deg);
}
section.sub-navigation-section.is-wrapped.is-toggled > .sub-navigation {
  display: flex;
}