.references-row
  padding-top: 80px

  .content-container
    >h2
      margin-left: $contentGrid
      width: $contentGrid*10
      padding-left: 10px

  .references
    position: relative
    margin-top: 50px
    overflow: hidden

    .controllers
      position: absolute
      top: 0
      height: 100%
      width: 100%
      +flex(space-between, center)

      .left,.right
        cursor: pointer
        position: relative
        z-index: 5
        +flex(center, center)
        width: 50px
        height: 50px
        border: 2px solid $lightBlue
        border-radius: 9999px
        span
          +sprite(0 0 , 15px ,28px)
          display: inline-block
          margin-left: 5px

      .left
        +transform(rotate(180deg))

    .reference
      width: $contentGrid*3
      position: absolute
      top: 0
      +transition(all 0.3s)
      h4
        text-transform: uppercase
        border-bottom: 2px solid $navyBlue

      .person
        margin-top: 30px
        +flex(flex-start, center)
        .circle
          width: 100px
          height: 100px
          background-size: cover
          background-position: 50% 50%
          border-radius: 9999px
          margin-right: 20px

        .name
          width: calc(100% - 120px)
          height: 100px
          +flex(flex-start, center)

          p
            +font-bold(18px, 18px)
            font-size: 18px !important
            line-height: 18px !important
            em
              display: block
              +font-default(18px, 28px)
              font-size: 18px !important
              line-height: 28px !important
      .content
        margin-top: 40px
        *
          +font-default(16px, 22px)
          font-size: 16px !important
          line-height: 22px !important
          &:first-child:before
            content: open-quote
          &:last-child:after
            content: close-quote

      &.previous, &.active, &.next
        z-index: 2
        pointer-events: all
      &.active
        left: $contentGrid*4.5

      &.next, &.next-location
        left: $contentGrid*8

      &.previous, &.previous-location
        left: $contentGrid

      &.previous-location, &.next-location
        opacity: 0
        z-index: 1
        pointer-events: none


+media-query(1000px)
  .references-row
    .references
      .reference
        width: $contentGrid*4.5
        .person
          .circle
            width: 70px
            height: 70px
            margin-right: 10px

          .name
            width: calc(100% - 80px)

        &.active
          left: $contentGrid*6.5
        &.next
          opacity: 0

+media-query(650px)
  .references-row
    .content-container
      >h2
        padding-left: 0
    .references
      height: auto !important
      .controllers
        display: none
      .reference
        display: none
        opacity: 1 !important
        position: relative
        left: 0 !important
        right: 0 !important
        width: $contentGrid*10
        margin-left: $contentGrid

        .person
          .circle
            width: 100px
            height: 100px
            margin-right: 40px

          .name
            width: calc(100% - 140px)


        &.previous, &.active, &.next
          display: block
          margin-bottom: 80px

+media-query(400px)
  .references-row
    .references
      .reference
        .person
          .circle
            width: 80px
            height: 80px
            margin-right: 20px

          .name
            width: calc(100% - 100px)