.faq-home
  position: relative
  z-index: 2
  top: -59px
  background-color: $darkBlue
  width: column(4, 5)
  margin-left: column(1, 10)

  .header
    position: relative
    border-bottom: 1px solid $lightPurple


    .selected
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      padding: 0 30px
      opacity: 0
      cursor: pointer
      z-index: -1
      transition: opacity 0.4s
      +flex(flex-start, center)

      &:hover
        h3
          color: lighten($lightPurple, 15%)

    .selection
      padding: 0 40px 0 30px
      min-height: 50px
      +flex(flex-start, center)
      opacity: 1
      transition: opacity 0.4s

    h3
      font-size: 0.85rem
      line-height: 1.2
      color: $lightPurple
      font-weight: semi-bold()
      transition: color 0.3s

    span
      display: inline-block
      +sprite(-174px -128px, 12px, 24px)
      margin-right: 23px

    &.item-header
      .selected
        opacity: 1
        z-index: 2
      .selection
        opacity: 0

  .content
    position: relative
    min-height: 250px
    transition: min-height 0.5s

    >ul
      position: relative
      background-color: $darkBlue
      list-style: none
      padding: 0 0 50px
      margin: 0
      opacity: 1
      z-index: 1
      transition: opacity 0.4s

      li
        position: relative
        padding: 20px 30px 20px 65px
        border-bottom: 1px solid rgba($lightPurple, 0.2)
        background-color: transparent
        cursor: pointer
        opacity: 1
        transition: background-color 0.3s, opacity 0.3s

        span
          position: absolute
          left: 30px
          top: 23px
          +flex(center, center)
          width: 15px
          height: 15px
          border-radius: 100%
          background-color: $pink
          &:after
            content: '+'
            position: relative
            top: -1px
            color: white

        p
          margin: 0
          color: white
          font-size: 0.9rem
          line-height: 1.2
          font-weight: bold()

        &:hover
          background-color: darken($darkBlue, 5%)
      &.hide
        li
          opacity: 0
    .faq-item
      position: absolute
      top: 0
      left: 0
      padding: 30px
      font-size: 0.9rem
      color: $lightPurple
      opacity: 0
      z-index: -1
      background-color: $darkBlue
      transition: opacity 0.3s

      h2
        font-size: 1.3rem
        font-weight: bold()
        color: white
        margin: 0

      &.active
        opacity: 1
        z-index: 2



    .return
      position: absolute
      z-index: -2
      background-color: $darkerBlue
      +flex(center, center)
      width: column(1, 8)
      left: column(-1, 8)
      top: -1px
      height: 70px
      cursor: pointer
      +translate3d(100%, 0, 0)
      opacity: 0
      transition: background-color 0.4s, opacity 0.4s, transform 0.4s
      &:before
        content: ''
        display: inline-block
        +arrowWhite
        +translate3dRotate(0,0,0,180deg)
        transition: transform 0.3s

      &.active
        opacity: 1
        +translate3d(0, 0, 0)

      &:hover
        background-color: darken($darkerBlue, 5%)
        &:before
          +translate3dRotate(-5px,0,0,180deg)