.references
  position: relative

  .breadcrumb, .content-container
    background-color: $lightGreyBackground

  .background-color
    position: absolute
    z-index: -15
    top: -25px
    background-color: $lightGreyBackground
    height: calc(100% + 25px)
    width: 100%

  .references-block

    .reference
      width: 33.3333333%
      float: left
      margin-bottom: 60px
      display: none

      &.active
        display: block

      >a>p
        color: $fontColor2
        +font-default(13px, 16px)
        +transform(translate3d(0,0,0))
        opacity: 1
        +transition(all 0.2s)
        strong
          color: $fontColor1
          +font-semi-bold(14px, 16px)

      .image
        height: 480px
        background-size: cover
        background-position: 50%
        position: relative

        .hover
          position: absolute
          height: 100%
          width: 100%
          +radial-gradient(center, ellipse cover, rgba(255,255,255,0.8) 0%, rgba(255,255,255,1) 100%)
          +flex(center, center)
          opacity: 0
          +transition(all 0.4s)

          h4
            +font-semi-bold(19px, 24px)
            color: $fontColor1
            margin: 0 0 4px
            text-align: center
            +transform(translate3d(0,-10px,0))
            opacity: 0
            +transition(all 0.3s)

          p
            +font-default(15px, 15px)
            color: $fontColor2
            margin: 0 0 15px
            text-align: center
            +transform(translate3d(0,-10px,0))
            opacity: 0
            +transition(all 0.3s)

          .icon
            display: block
            margin: auto
            +arrowRightRed

      &:hover
        //>a>p
        //  +transform(translate3d(0,-40px,0))
        //  opacity: 0
        .image
          .hover
            opacity: 1

            h4, p
              opacity: 1
              +transform(translate3d(0,0,0))

        .quote-holder
          .stars
            >span
              +transform(rotate(-70deg))
              opacity: 0

              &:nth-of-type(5)
                +transition-delay(0.32s)
              &:nth-of-type(4)
                +transition-delay(0.24s)
              &:nth-of-type(3)
                +transition-delay(0.16s)
              &:nth-of-type(2)
                +transition-delay(0.08s)
              &:nth-of-type(1)
                +transition-delay(0s)

            p
              left: -15px
              opacity: 1
              +transition-delay(0.3s)





      .quote-holder
        position: relative
        height: 480px
        background-size: cover
        background-position: 50%
        +flex(center, center)
        text-align: center

        .color-overlay
          +position(absolute, 0 0 0 0)
          background-color: $semiLightGrey
          opacity: 0.85

        .placeholder
          position: relative

        h4
          +font-semi-bold(19px, 34px)
          color: $fontColor1
          max-width: 57%
          text-align: center
          margin: auto

          &:before
            content: '“'

          &:after
            content: '”'

        p
          +font-default(15px, 40px)
          text-align: center

        .stars
          display: inline-block
          text-align: center
          position: relative

          >span
            +transform-origin(0 200%)
            +transform(rotate(0deg))
            +transition(all 0.12s, opacity 0.12s)

            &:nth-of-type(5)
              +transition-delay(0.65s)
            &:nth-of-type(4)
              +transition-delay(0.55s)
            &:nth-of-type(3)
              +transition-delay(0.45s)
            &:nth-of-type(2)
              +transition-delay(0.35s)
            &:nth-of-type(1)
              +transition-delay(0.25s)

          p
            position: absolute
            left: -45px
            width: 200px
            text-align: left
            color: $fontColor1
            margin: 0
            +font-default(15px, 21px)
            opacity: 0
            +transition(all 0.3s)
            +transition-delay(0s)

            span
              margin-left: 15px
              +arrowRightRed
              display: inline-block

          .full-star
            +star-full

          .empty-star
            +star-empty

  .filters-block
    background-color: white
    width: calc(95% - 65px)
    padding: 45px 25px 45px 45px
    max-width: calc(320px - 65px)
    margin-bottom: 30px

    background-position: bottom
    position: relative

    p
      +font-semi-bold(16px, 24px)
      color: $fontRed
      span
        float: right
        +font-default(14px, 24px)
        color: $fontBlue
        cursor: pointer
    .filter-button
      label
        +font-default(17px,40px)
        color: $fontColor1
        text-transform: capitalize
        cursor: pointer
      input
        cursor: pointer

    .shadow
      +position(absolute, null 0 -30px 0)
      background-image: url('/img/dropshadow_menu.png')
      background-size: contain
      background-repeat: no-repeat
      height: 30px
      width: 100%

.isolation
  .references
    .filters-block
      p
        color: $defaultGreen

    .reference
      .image
        .hover
          .icon
            +arrowRightGreen
      .quote-holder .stars p span
        +arrowRightGreen
        display: inline-block

+media-query(1300px)
  .references
    .references-block
      .reference
        width: 50%
    .filters-block
      p
        span
          display: block
          float: none

+media-query(950px)
  .references
    .filter-block
      width: 250px
    .references-block
      width: calc(100% - 275px)
      .reference
        .image, .quote-holder
          height: 400px
+media-query(700px)
  .references
    .filter-block
      float: none
      width: 100%
      +flex(flex-start, flex-start)
      .filters-block:first-of-type
        margin-right: 20px

    .references-block
      width: 100%

+media-query(650px)
  .references
    .filter-block
      .filters-block
        p
          span
            display: none

+media-query(500px)
  .references
    .filter-block
      display: block
      .filters-block
        width: 100%
        margin-left: auto !important
        margin-right: auto !important
    .references-block
      .reference
        .image, .quote-holder
          height: 325px


+media-query(450px)
  .references
    .references-block
      .reference
        width: 100%