.customers
  .references
    width: $contentGrid*10
    margin: auto
    +flex(space-between, flex-start)
    .reference
      width: calc(100% / 10 * 3)

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

      .name
        p
          +font-light()
          font-size: 14px !important
          line-height: 18px !important
          margin: 0
          color: white
          &.business
            +font-semi-bold()
            color: white
      .description
        .name
          display: none
          p
            font-size: 16px !important
            line-height: 24px !important
            color: white
        p
          +font-light(18px, 24px)
          font-size: 16px
          line-height: 22px
          color: $gray

  .rentman-any-size
    width: $contentGrid*10
    margin: auto
    +flex(space-between, flex-start)
    margin-top: 80px
    border-top: 2px solid $lightestGray
    padding-top: 50px
    .content
      width: calc(100% - 260px)
      max-width: 570px
      h3
        +font-light(36px, 46px)
        font-size: 32px
        color: white
        display: inline-block

      p
        +font-light(26px, 36px)
        font-size: 24px
        line-height: 34px
        color: $gray
    .button
      width: 100%
      max-width: 240px
      margin-top: 15px
      background: $orange
      +transition(all .3s)
      border-radius: 4px
      display: inline-block
      a
        +font-semi-bold(21px, 21px)
        font-size: 18px
        color: white
        padding: 15px 25px
        +flex(space-between, center)
        &:after
          content: ''
          +arrowWhite
          +translate3d(0,0,0)
          +transition(all .3s)
      &:hover
        background-color: $fellOrange
        a:after
          +translate3d( 5px, 0, 0)

.customers-logos
  margin: 130px auto
  width: 100%
  padding: 0 $contentGrid
  max-width: 1440px
  img
    width: 100%
    &.medium
      display: none

+media-query(1350px)
  .customers
    .references
      width: 90%

+media-query(1050px)
  .customers
    .references
      +flex-wrap(wrap)
      +flex-direction(row)
      +flex-flow(row wrap)
      .reference
        width: 80%
        max-width: 550px
        margin: 0 auto 40px

        a
          +flex(space-between, flex-start)

        .person
          margin-right: 40px
          .name
            display: none

        .description
          .name
            display: block
    .rentman-any-size
      +flex(center, flex-start)
      text-align: center
      .content
        width: 100%
      p
        text-align: center
      .button
        display: none
+media-query(800px)
  .customers
    .references
      .reference
        .description
          p
            font-size: 15px !important
            line-height: 21px !important

+media-query(700px)
  .customers-logos
    margin: 80px 0
    img
      &.large
        display: none
      &.medium
        display: block

+media-query(525px)
  .customers
    .references
      .reference
        a
          +flex-wrap(wrap)
          +flex-direction(row)
          +flex-flow(row wrap)

        .description
          text-align: center
          max-width: 350px
          margin: auto
          .name
            display: none
        .person
          width: 100%
          margin-right: 0
          +flex-wrap(wrap)
          +flex-direction(row)
          +flex-flow(row wrap)
          .name
            margin-top: 25px
            width: 100%
            display: block
            text-align: center
          .image
            width: 150px
            margin: auto
            height: 150px