.references-slider
  position: relative
  z-index: 2
  height: 725px
  background-color: $green

  // Colleague styling
  [class^="vso"] &
    background-color: $turquoise

  .reference-nav
    position: absolute
    bottom: 260px
    right: 12%
    margin: 0
    padding: 0
    +flex(flex-start, center)
    width: 67px
    height: 13px
    z-index: 3
    list-style: none

    li
      +sprite(-135px -88px, 14px, 13px)
      cursor: pointer
      margin-right: 5px

      &:last-of-type
        margin-right: 0

      &.active
        +sprite(-120px -88px, 14px, 13px)


  .reference
    position: absolute
    left: 0
    top: 0
    padding-bottom: 60px
    height: 100%
    width: 100%


    &.active
      z-index: 2
      figure, span, p
        opacity: 1

    figure
      width: 100%
      height: 420px
      background-size: cover
      background-position: 50% 25%
      opacity: 0
      transition: opacity 0.5s 

    span
      display: block
      padding: 30px 12%
      color: white
      font-size: 0.8rem
      font-weight: bold()
      opacity: 0
      transition: opacity 0.5s

      strong
        font-size: 1.2rem
        line-height: 1.1
        //&:after
        //  content: '.'
        //  font-size: 1.6rem
        //  line-height: 0

    p
      +flex(center,center)
      padding: 0 12%
      margin: 0
      font-size: 1.1rem
      line-height: 1.2
      font-style: italic
      text-align: center
      color: white
      opacity: 0
      transition: opacity 0.5s

    a
      position: absolute
      bottom: 0
      left: 0
      +flex(center, center)
      height: 60px
      width: 100%
      font-weight: bold()
      color: white
      background-color: $darkGreen
      text-decoration: none
      transition: background-color 0.3s

      &:after
        content: ''
        display: inline-block
        position: relative
        top: 2px
        +arrowWhite
        margin-left: 15px
        +translate3d(0,0,0)
        transition: transform 0.3s

      &:hover
        background-color: darken($darkGreen, 5%)
        &:after
          +translate3d(5px,0,0)

      // Colleague styling
      [class^="vso"] &
        background-color: lighten($turquoise, 17.5%)
        &:hover
          background-color: lighten($turquoise, 10%)

  // Media queries for height of images
  //+respond-to-width(1550)
  //  height: 600px
  //  .reference-nav
  //    bottom: 230px
  //  .reference
  //    figure
  //      height: 320px