.reference-intro-text
  color: $black
  margin-bottom: 40px

  p
    margin: 14px 0 0
    +font-default(25px, 34px)

.references-block
  +flex(space-between, flex-start)
  +flex-rows()
  //background:
  //  color: rgba(255, 255, 255, 0.88)

  +respond-to(small)
    +flex-direction(column)

  +respond-to-width(900)

  margin-bottom: 100px

  +respond-to-width(900)
    margin-bottom: 50px

  //box-shadow: 0 14px 28px rgba(0,0,0,0.04), 0 10px 10px rgba(0,0,0,0.05)

  .reference
    background-color: $white
    margin: 20px 0
    padding: 50px
    height: 100%

    .reference-body, .reference-header
      width: 100%

    .reference-title
      flex: 1

    box-shadow: 0 14px 28px rgba(0,0,0,0.03), 0 10px 10px rgba(0,0,0,0.04)

    //&:nth-child(odd)
    //  background-color: rgba(65, 85, 165, 0.05)

    +respond-to(mobile)
      padding: 30px

    width: 46%
    +flex(flex-start, flex-start)
    +flex-direction(column)
    text-align: left

    color: $black

    a
      color: $blue
      transition: color 0.4s ease

      &:hover
        color: $black

    +respond-to(small)
      width: 96%

    +respond-to-width(600)
      flex-direction: column
      -webkit-flex-direction: column

    .reference-header
      +flex(flex-start, center)
      +respond-to-width(480)
        +flex-direction(column)

    .reference-image
      margin-bottom: 25px
      margin-right: 25px
      +respond-to-width(480)
        margin-right: 0

      .image
        height: 150px
        width: 150px
        border-radius: 999px
        background-size: cover
        background-position: center

      .image-with-link
        @extend .image
        opacity: 0.8
        transition: opacity 0.4s ease

        &:hover
          opacity: 1