.feature-customers
  display: flex
  flex-direction: column
  justify-content: center
  padding: 30px 150px

.customers-top-flex
  display: flex
  flex-direction: column
  align-items: center

  h3
    margin-top: 0
    font-family: $raleway
    font-size: 1.8em
    font-weight: 500
    text-transform: uppercase
    text-align: center

  p
    padding-top: 10px
    color: $darkslate
    font-family: $raleway
    font-weight: 300
    font-size: 1.3em
    text-align: center

  .feature-divider
    display: inline-block
    width: 64px
    height: 2px
    background: $orange

.customers-bottom-flex
  margin-top: 50px

.customers-column
  display: flex
  justify-content: space-between

.customers-column-flex
  display: flex
  flex-direction: column

  .customers-testimonial
    position: relative
    width: 273px
    height: auto
    padding: 25px 12px
    margin-bottom: 25px
    background: $testimonial
    border: 1px dashed $orange
    color: $myGrey
    font-family: $opensans
    font-style: italic

    &:before
      content: ""
      position: absolute
      margin-top: 135px
      margin-left: 7px
      border-top: 16px solid $orange
      border-left: 10px solid transparent
      border-right: 10px solid transparent

  .customers-info

    &:after
      content: ""
      display: block
      clear: both

    .author-pic
      float: left
      margin-right: 18px

    p:first-of-type
      margin: 7px 0 0
      font-family: $opensans
      font-weight: 700
      font-size: 1.2em

    p:last-of-type
      margin-top: 5px
      color: $myGrey
      font-family: $opensans

//  --------------------------------------------

@media (min-width: 1036px) and (max-width: 1600px)

  .feature-customers
    padding: 30px 50px

//  --------------------------------------------

@media (min-width: 721px) and (max-width: 1035px)

  .feature-customers
    padding: 30px 50px

  .customers-column-flex

    &:last-child
      display: none

    .customers-testimonial
      width: 353px
      padding: 10px 12px

      &:before
        margin-top: 98px
//  --------------------------------------------


@media (min-width: 721px) and (max-width: 900px)

  .feature-customers
    padding: 30px 50px

  .customers-column-flex

    &:last-child
      display: none

    .customers-testimonial
      width: 270px

      &:before
        margin-top: 120px

//  --------------------------------------------

@media (max-width: 720px)

  .feature-customers
    padding: 30px


  .customers-bottom-flex
    margin-top: 20px

  .customers-column
    flex-direction: column

  .customers-column-flex
    flex-direction: row-reverse
    justify-content: space-around

    .customers-testimonial
      height: auto

    &:last-child
      display: none

    .customers-testimonial
      width: 270px

      &:before
        margin-top: -3px
        margin-left: -38px
        border-right: 16px solid #a53d49
        border-top: 10px solid transparent
        border-bottom: 10px solid transparent

//  --------------------------------------------

@media (max-width: 440px)

  .custom-p
    display: none
