.faq
  @extend .page

  .page-impression
    .faq-not-found
      background-color: $pink
      margin-top: 28px
      padding: 40px 10%
      font-size: 1.2rem
      color: $lightGray2

      h3
        font-weight: bold()
        margin: 0 0 25px

      p
        font-size: 0.9rem

      a
        color: white
        text-decoration: none
        &:before
          content: ''
          display: inline-block
          margin-right: 15px
          +sprite(-167px -102px, 17px, 16px)

  .main.faq-items
    .content
      padding: 60px 0

      h1
        margin-bottom: 120px

      .faq-item
        font-size: 0.9rem
        color: $darkGray
        background-color: white
        transition: background-color 0.3s

        .name
          position: relative
          margin: 0
          +flex(space-between, center)
          padding: 11px 32px 11px 22px
          cursor: pointer
          background-color: transparent

          &:after
            content: '+'
            position: absolute
            top: 8px
            right: 10px
            display: block
            color: $darkBlue
            font-size: 1.6rem
            line-height: 1
            font-weight: regular() !important

        .answer
          color: $darkGray
          padding: 0 22px
          overflow: hidden
          transition: height 0.5s

          h2
            font-size: 1.2rem
            margin-top: 26px
            margin-bottom: 5px

          p
            margin: 0

          strong
            color: black
            font-weight: semi-bold()

        &.hide
          .answer
            height: 0 !important

        &.active
          .name
            background-color: $darkBlue
            color: white
            font-weight: bold()

            &:after
              content: '-'
              color: white
              right: 12px

          .answer
            display: block

        &:hover
          background-color: darken(white, 2.5%)

        &:nth-child(even)
          background-color: darken(white, 5%)

          &:hover
            background-color: darken(white, 7.5%)

  &[class^="vso"]
    .page-impression
      .faq-not-found
        background-color: $turquoise
    .main.faq-items
      .content
        .faq-item
          .name
            &:after
              color: $darkTurquoise

          &.active
            .name
              background-color: $darkTurquoise
              &:after
                color: white


  +respond-to-width(840)
    .page-impression
      .faq-not-found
        display: none

    .main
      min-height: 0 !important
      &.faq-items
        .content
          padding: 0
          h1
            margin-bottom: 50px