/*! faq.css
 *
 *  Styles specific to FAQ 
 *
 */

.faq__header {
  margin-bottom: 1rem
}
.faq__group {
  border-radius: .8rem;
  margin-bottom: 2.75rem;
  overflow: hidden;
}
.faq__item.accordion__item {
  margin-top: 1rem;
}
.faq__title {
  margin-bottom: 0;
  padding: .5rem 1.5rem;
  background-color: #3d3d46;
  color: #eeeff0;
  font-size: 1.66666667rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-align: left;
  text-transform: uppercase;
}
.page__img .st0 {
  fill: var(--primary-II-light-60)
}
.page__img .st1 {
  fill: #b3c8ef
}
.page__img .st2 {
  fill: #f76b1c
}
.page__img .st3 {
  fill: #564cde
}
.page__img .st4 {
  fill: #fbd51c
}
.page__img .st5 {
  fill: #f9b234
}
.page__img .st6 {
  fill: #353582
}
.page__img .st7 {
  fill: none;
  stroke: #564cde
}
.page__img .st8 {
  fill: #e2e9fa
}
.faq__link,
.faq__copy {
  padding: .75rem 3.5% .75rem;
  text-align: left;
}
.faq__link {
  position: relative;
  margin: 0;
  padding-right: 2rem;
  border-radius: 0;
  background-color: var(--primary-II-light-100);
  color: var(--primary-color);
  font-size: 1.1666667rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  white-space: normal;
  border-bottom: 0;
  border-radius: .625em;
  -webkit-user-select: unset;
  user-select: unset;
  -webkit-transition: padding .4s ease-in-out, background-color .3s ease-out;
  transition: padding .4s ease-in-out, background-color .3s ease-out;
}
.faq__link:hover,
.faq__link:focus {
  background-color: #fff;
  text-decoration: none;
}
.faq__link:active {
  color: #fff;
  background-color: hsl(254, 82%, 52%);
}
.faq__link .btn__append {
  position: absolute;
  right: 1em;
  color: #92969b;
  font-size: .6em;
  top: 1rem;
  line-height: 1;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.open .faq__link .btn__append {
  -webkit-transform: rotate(180deg) translateY(-50%);
  transform: rotate(180deg) translateY(-50%);
}
.open .faq__link .icon::before {
  display: block;
  height: .5em;
}
.open .faq__link {
  padding-top: 2rem;
  padding-bottom: .5rem
}
.open .faq__link,
.open .faq__link:focus {
  background-color: #fff;
  border-top: 1px solid #e3e4e4;
}
.open .faq__link:focus:active {
  color: #fff;
  background-color: hsl(254, 82%, 52%);
}
.faq__copy {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom-left-radius: .625em;
  border-bottom-right-radius: .625em;
  display: none;
  background-color: var(--primary-II-light-50);
}
.faq__copy p,
.faq__copy li {
  color: var(--primary-light-900);
}
.faq dd,
.faq dt {
  margin: 0;
  padding: 0;
}
.faq dd {
  /*max-height: 0*/
}
.faq p {
  margin-bottom: 1rem
}
.faq__figure {
  float: right;
  margin-left: 1.25rem;
}
.faq__figure.author__img {
  width: 6.6666667rem;
  height: 6.6666667rem;
}
.audio-preview {
  padding: .35rem .75rem .25rem .35rem;
  width: 100%;
  max-width: 8rem;
  margin-bottom: 1.5rem;
}
.faq__link.btn--append--m,
.faq__link.btn--append:not(.btn--append-hidden) {
  padding-right: 1.75em;
}
@media screen and (max-width: 47.935em) {
  .page__col--txt .faq__intro {
    margin-bottom: 2rem;
  }
}
@media screen and (max-width: 44.5em) {
  .page__title {
    font-size: 2rem;
  }
}
@media screen and (max-width: 37em) {
  .page__title {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 36.5em) {
  .page__col--intro {
    width: 100%;
    float: none;
    margin-right: 0;
  }
}
@media screen and (max-width: 36em) {
  .faq__link,
  .faq__copy {
    padding-left: 1rem;
  }
  .faq__link {
    padding-right: 2.5rem;
  }
}
@media screen and (max-width: 33em) {
  .open .faq__link {
    padding-top: 1.5rem;
  }
}
@media screen and (max-width: 30em) {
  .faq__title {
    text-align: center;
  }
}
@media screen and (max-width: 25em) {
  .page__title {
    font-size: 1.35rem;
  }
  .faq__link {
    font-size: 1.0625rem;
  }
  /*.faq__copy {
    font-size: 0.938rem;
  }*/
  .contact-link .line-block--m {
    display: block;
  }
}
@media screen and (max-width: 24em) {
  .faq__header .line-block--m {
    display: block;
  }
  .faq__link,
  .faq__copy {
    padding-left: 1rem;
    padding-bottom: 1rem;
  }
  .open .faq__link {
    padding-top: 1.125rem;
  }
  .faq__copy {
    padding-top: .5rem;
  }
}
@media screen and (max-width: 22.5em) {
  .faq__figure.author__img {
    width: 5.5rem;
    height: 5.5rem;
    margin-left: 1rem;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 22em) {
  .faq__header .line-block {
    display: inline;
  }
  .faq__link {
    font-size: 1rem;
    padding-left: .75rem;
  }
  .faq__copy {
    padding-left: .75rem
  }
  .faq__link .btn__append {
    right: .75em;
  }
}
@media screen and (max-width: 21em) {
  .page__title {
    font-size: 1.35rem;
  }
}
@media (prefers-color-scheme: dark) {
  .page__img .st0 {
    fill: var(--complementary-light-900);
  }
  .page__img .st6 {
    fill: var(--complementary-light-500)
  }
  .faq__link {
    font-weight: 500;
    color: var(--primary-II-light-100);
    background-color: var(--primary-light-700);
  }
  .faq__link:hover,
  .faq__link:focus {
    background: var(--primary-II-light-600);
  }
  .faq__copy {
    background-color: var(--primary-light-800);
  }
  .faq__copy strong {
    font-weight: 600;
  }
  .faq__copy p,
  .faq__copy li {
    color: var(--primary-II-light-300);
  }
  .faq__link .pointer {
    color: var(--primary-light-600);
  }
  .faq__link:hover .pointer,
  .faq__link:focus .pointer {
    color: var(--primary-light-500);
  }
}