.faq {
  padding: 27px 0 40px 0;
  background: $color-white;
  @media screen and (min-width: 768px) {
    padding: 75px 0 52px 0;
  }
  h1 {
    // margin: 0 0 40px 0;
    margin: 0;
    color: $color-blue-dark;
    @media screen and (min-width: 768px) {
      // margin: 0px 0 75px 0;
      margin: 0;
      text-align: left;
    }
  }
  .font-controls {
    margin-top: 20px;
    margin-bottom: 20px;
    position: sticky;
    top: 65px;
    z-index: 7;
    display: inline-flex;
    margin-left: calc(100% - 87px);
    @media screen and (min-width: 768px) {
      margin-top: 0;
      margin-bottom: 30px;
      top: 120px;
    }
    @media screen and (min-width: 992px) {
      display: inline-flex;
      margin-left: calc(100% - 115px);
    }
  }
}

.accordion {
  position: relative;
  background: $color-white;
  border-bottom: 1px solid $color-black;
  padding: 19px 13px 0 32px;
  transition: all 200ms ease-in-out;
  cursor: pointer;
  @media screen and (min-width: 768px) {
    padding: 19px 20px 0 63px;
  }
  &__header {
    position: relative;
    h2 {
      text-transform: none;
      text-align: left;
      font-weight: 700;
      font-size: rem(16);
      line-height: 1.5;
      color: $color-blue-dark;
      transition: all 200ms ease-in-out;
      margin: 0 0 16px 0;
      @media screen and (min-width: 768px) {
        font-size: rem(20);
        margin: 0 0 14px 0;
      }
    }
  }
  &__icon {
    position: absolute;
    left: -19px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 200ms ease-in-out;
    width: 9px;
    height: 12px;
    @media screen and (min-width: 768px) {
      width: 16px;
      height: 20px;
      left: -35px;
    }
  }
  &__content {
    display: none;
    padding-top: 0;
    padding-bottom: 13px;
    @media screen and (min-width: 768px) {
      padding-top: 21px;
      padding-bottom: 27px;
    }
    p {
      color: $color-text-dark;
      // &:last-of-type {
      //   margin-bottom: 0;
      // }
    }
    ul {
      margin-bottom: 20px;
      li {
        color: $color-text-dark;
        font-size: rem(14);
        @media screen and (min-width: 992px) {
          font-size: rem(19);
          &:before {
            top: 7px;
          }
        }
      }
    }
    a {
      font-weight: initial;
    }
  }
  &.active {
    background: #f5f5f5;
    .accordion {
      &__header {
        h2 {
          color: #2a5f9e;
        }
      }
      // &__content {
      // }
      &__icon {
        transform: translateY(-50%) rotate(90deg);
        fill: #2a5f9e;
        path {
          fill: #2a5f9e;
        }
      }
    }
  }
}