/*==========================================================================
  Calender block - Home
  ========================================================================== */

.calender
  background-color: white
  position: relative
  top: -60px
  overflow: visible

  a
    text-decoration: none

  /* Header
    ========================================================================== */

  h3
    position: relative
    +flex(flex-start, center)
    height: 60px
    width: 100%
    background-color: $pink
    padding: 0 30px

    font-size: 1.05rem
    line-height: 1
    font-weight: bold()

    color: white

    span
      position: absolute
      top: 0
      left: -60px
      +flex(center, center)
      height: 60px
      width: 60px
      background-color: $darkPink
      &:before
        content: ''
        display: block
        +sprite(-141px -102px, 25px, 25px)

    // College styling
    [class^="vso"] &
      background-color: $blue
      span
        background-color: $lightBlue

  /* Calender items
    ========================================================================== */

  ul
    list-style: none
    padding: 0
    margin: 0

    li
      +flex(flex-start, center)
      min-height: 100px
      border-bottom: 1px solid $lightGray

      .date
        position: relative
        width: 115px
        padding-right: 30px
        margin-left: 10px
        font-size: 3rem
        line-height: 1
        text-align: right 
        color: $darkBlue
        font-weight: bold()
        font-family: 'Dubai', 'Arial', monospace

        sub
          position: absolute
          top: 4px
          right: 0
          color: $pink
          font-size: 1rem
          line-height: 1
          vertical-align: top

      p
        margin-left: 10%
        width: calc(100% - 100px - 25px - 10%)
        padding-right: 5px
        font-size: 0.8rem
        line-height: 1.3
        color: $darkBlue
        font-weight: bold()

        span
          display: block
          color: $pink
          font-size: 0.9rem

      // College styling
      [class^="vso"] &
        .date
          color: $darkTurquoise
          sub
            color: $brightTurquoise
        p
          color: $turquoise
          span
            color: $darkTurquoise

      +respond-to-width($xlGridBreakpoint)
        .date
          width: 80px
          font-size: 2.1rem
          margin-left: 15px

          sub
            font-size: 0.8rem

        p
          margin-left: 7.5%
          width: calc(100% - 80px - 15px - 7.5%)

      +respond-to-width(840)
        &:nth-child(n+4)
          display: none

  /* Footer link
    ========================================================================== */

  .link-block
    height: 140px
    +flex(center, center)

    span
      background-color: $pink
      border-radius: 20px
      padding: 10px 20px
      font-size: 1rem
      font-weight: bold()
      line-height: 1
      text-decoration: none
      color: white
      transition: background-color 0.3s

      &:after
        content: ''
        +arrowWhite
        margin-left: 10px
        +translate3d(0,0,0)
        transition: transform 0.3s

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

      [class^="vso"] &
        background-color: $blue
        &:hover
          background-color: $bluer