#faq-link
  position: relative
  top: -80px
.faq-row
  >h2
    +font-default(32px)
    font-size: 28px
    color: $darkerBlue
    text-align: center
    margin: 0
    padding: 60px 0 30px

  .header
    background: url('/img/cloud_background.jpg')
    background-size: cover
    background-position: center
    padding: 70px 0



    >h3
      text-align: center
      +font-default(32px)
      font-size: 28px
      color: white
      margin: 0

    p
      text-align: center
      margin: 0
      +font-light(18px, 24px)
      font-size: 16px
      line-height: 22px
      color: $gray

  .type-bar
    max-width: 1000px
    width: 95%
    margin: 40px auto 0
    +flex(space-between, center)
    .nav-types
      border-left: 1px solid white
      width: 25%
      height: 50px
      +flex(center, center)
      background-color: $darkBlue
      color: white
      text-align: center
      +font-light(18px, 24px)
      font-size: 16px
      line-height: 16px !important
      margin: 0
      cursor: pointer
      +transition(all 0.3s)
      &:hover
        background-color: $darkerBlue
      &.active
        background-color: $orange

      &:first-child
        border-radius: 6px 0 0 6px
        border-left: none

      &:last-child
        border-radius: 0 6px 6px 0

  .questions
    margin: 40px auto 0
    +flex(space-between, flex-start)
    width: 95%
    max-width: 1000px
    +flex-rows

    .question
      width: 100%
      background-color: $lighterGray30
      max-width: 700px
      margin: 0 auto 2px 
      cursor: pointer
      .window-bar
        background-color: $lightGray
      .content
        background-color: #f9f9f9
        padding: 35px 10%
        border-radius: 0 0 6px 6px
        .question-header
          +flex(space-between, flex-start)
          h5
            +font-semi-bold()
            font-size: 18px !important
            line-height: 18px !important
            color: $darkerBlue
            margin-bottom: 25px
            width: calc(100% - 25px)
          span
            display: block
            +arrowOrange
            +translate3dRotate(0,2px,0, -90deg)
            +transition(all 0.5s)

        p
          margin: 0 0 20px
          color: $lightBlue
          +font-light()
          font-size: 16px !important
          line-height: 24px !important
          opacity: 1
          +transition(all 0.3s)
          span, a
            color: $orange
            +font-light()
            font-size: 16px !important
            line-height: 24px !important
      &.inactive
        .content
          height: 100px
          .question-header
            span
              +translate3dRotate(0,2px,0, 90deg)
          .text
            pointer-events: none
          p
            opacity: 0
      &.hide
        display: none
+media-query(850px)
  .faq-row
    .questions
      .question
        max-width: none

+media-query(400px)
  .faq-row
    .content-container
      width: 100%
    .type-bar
      width: 100%

      .nav-types
        border-radius: 0 !important
    .questions
      .question
        .content
          padding: 35px 20px