/*==========================================================================
  reference page
  ========================================================================== */

.reference
  @extend .page

  .main
    a.button
      margin-top: 60px
      margin-bottom: 50px

  /* Sidebar with images and streamer
   ========================================================================== */
  .image-and-streamer
    position: relative
    z-index: 3
    right: column(-1, 24)
    width: column(9, 24)
    vertical-align: top
    padding-top: 60px
    overflow: visible

    figure
      position: relative
      width: 100%
      background-color: $darkBlue

      img
        width: 100%
        &.small
          display: none

      span
        position: absolute
        right: 0
        bottom: 0
        background-color: $green
        padding: 10px 20px
        color: white
        font-size: 1.2rem
        font-weight: bold()

    // Streamer
    .streamer
      height: 240px
      background-color: $pink
      +flex(center, center)
      margin-bottom: 30px

      p
        margin: 0
        padding: 0 10%
        width: 100%
        color: rgba(white, 0.8)
        font-size: 1.4rem
        font-style: italic
        text-align: center

  /* Other references
   ========================================================================== */
  .other-references
    margin-top: 60px
    h2
      font-size: 1.05rem
      font-weight: bold()
      color: $darkBlue
      margin: 0 0 15px

    .references-placeholder
      +flex(flex-start, flex-start)
      +flex-rows

      .other-reference
        position: relative
        width: 120px
        height: 120px
        border-radius: 100%
        background-position: 50% 25%
        background-size: cover
        margin-bottom: 30px
        margin-right: 30px

        p
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
          margin: 0
          border-radius: 100%
          text-align: center
          +flex(center, center)
          font-size: 0.8rem
          font-weight: semi-bold()
          background-color: rgba($darkBlue, 0.8)
          color: $blue
          opacity: 0.4
          text-indent: -100px
          transition: opacity 0.3s, text-indent 0.3s

        &:hover
          p
            opacity: 0
            //text-indent: 0

  // College styling
  &[class^="vso"]
    .image-and-streamer
      .streamer
        background-color: $turquoise
      figure
        background-color: $turquoise
        span
          background-color: $yellow
    .other-references
      h2
        color: $darkTurquoise

      .other-reference
        p
          background-color: rgba($darkTurquoise, 0.8)
          color: $lightTurquoise

  /* Mobile View
   ========================================================================== */
  +respond-to-width(840)

    .main
      width: column(15, 24)

      a.button
        margin-top: 15px
        margin-bottom: 0

      .content
        h1
          margin: 20px 0 50px

    .image-and-streamer
      padding-top: 50px
      +flex(flex-start, flex-start)
      +flex-rows
      right: 0
      //width: 100%

      .styling
        display: none

    .other-references
      margin-top: 50px
      .references-placeholder
        .other-reference
          width: 100px
          height: 100px

  +respond-to-width(600)
    .image-and-streamer
      width: 100%
      padding-top: 40px

      figure
        width: column(12,14)
        max-width: 330px
        margin: auto

      .streamer
        height: 175px
        +order(2)
        width: column(12,14)
        margin: 40px auto 0

        p
          font-size: 1.2rem

    .main
      width: 100%