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


footer
  background-color: $darkGrayBlue
  padding-top: 80px

  .grid-col
    vertical-align: top

  .main-item
    width: column(5, 24)
    padding-bottom: 80px

    &.schools
      padding-right: 25px

    ul
      margin-bottom: 35px
      &.extra-margin-bellow
        margin-bottom: 100px

    >a
      padding: 10px 20px
      border: 1px solid $purple
      border-radius: 20px
      color: $purple
      font-size: 0.8rem
      font-weight: bold()
      text-decoration: none
      span
        +arrowPurple
        margin-left: 3px
        +translate3d(0,0,0)
        transition: transform 0.3s
      &:hover
        color: white
        span
          +translate3d(5px,0,0)

    +respond-to-width(1300)
      width: column(6)

      &.schools
        margin-left: column(1, 12)



  // Header of list
  h5
    font-size: 0.9rem
    color: $pink

  ul
    list-style: none
    padding: 0
    margin: 30px 0 0
    font-size: 0.9rem

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

    li
      color: $purple

      a
        color: $purple
        text-decoration: none

        &:hover
          color: white

      &.active, &.active a
        color: $lightPurple
        font-weight: bold()

  .cta
    width: column(5, 24)
    padding-bottom: 40px

    +respond-to-width(1300)
      width: column(6)

    .logo
      span
        display: inline-block
        +sprite(-95px 0, 100px, 77px)

        +respond-to-width(1750)
          margin-left: auto

    .text
      margin: 30px 0 25px
      +flex(space-between, flex-start)

      figure
        height: 100px
        width: 100px
        background-image: url("/img/cta-footer.jpg")
        background-position: center
        background-size: cover
        border-radius: 100%

        [class^="vso"] &
          background-image: url("/img/cta-footer-2.jpg")

      .placeholder
        width: calc(100% - 120px)

      p
        font-size: 0.9rem
        line-height: 1.2
        color: $purple
        margin: 0 0 10px

      a
        color: white
        font-size: 1.1rem
        text-decoration: none
        span
          +sprite(-167px -102px, 17px, 16px)
          display: inline-block
          margin-right: 5px

      +respond-to-width(1750)
        display: block
        figure
          margin: 0 0 10px 40px

        .placeholder
          width: 100%
          p
            max-width: 200px

  // College pages
  [class^="vso"] &
    background-color: $grayDarkerBlue

    h5
      color: $blue

    .cta
      .logo
        span
          +sprite(-95px -205px, 100px, 77px)

  [class^="services"] &,
  [class^="jobs"] &
    background-color: $grayDarkerBlue

    h5
      color: $globalBlue

    .cta
      .logo
        span
          +sprite(-305px -225px, 100px, 77px)

  // Global pages
  .global &
    background-color: $grayDarkerBlue

    .main-item
      >a
        border: 1px solid $gray
        color: $gray
        span
          +arrowWhite
          opacity: 0.5

        &:hover
          color: white

    h5
      color: $globalBlue
    ul
      li
        color: $gray
        a
          color: $gray

          &:hover
            color: white

        &.active
          color: $globalHighlight
          font-weight: regular()
          a
            color: $globalHighlight
            font-weight: regular()

    .cta
      .logo
        span
          +sprite(-95px -285px, 100px, 77px)

      .text
        p
          color: $gray

  .global.home &
    .cta
      .logo
        span
          +sprite(-305px -225px, 100px, 77px)

  /* Sub footer for pay off and our branding
   ========================================================================== */

  .sub-footer
    background-color: $grayBlue
    height: 55px
    padding: 15px 0

    .grid-col
      font-size: 0.9rem

    // Pay off slogan
    .pay-off
      margin-top: 0
      margin-bottom: 0
      color: $brightPurple

    // Our branding logo
    a
      position: relative
      top: -1px
      color: $brightPurple
      text-align: right
      text-decoration: none

      &:hover
        color: lighten($brightPurple, 8%)
        &:before
          transform: rotate(360deg)

      &:before
        content: ''
        position: absolute
        top: 1px
        right: 180px
        display: inline-block
        +sprite(-95px -78px, 24px, 24px)
        transform: rotate(0deg)
        transition: all 0.5s

      +respond-to-width(1080)
        top: 0
        &:before
          top: 0
          right: 158px


    +respond-to-width(840)
      .grid-row
        +flex(space-between, center)
        .grid-col
          margin-left: 0

    +respond-to-width(600)
      height: auto
      padding: 0

      .grid-row
        display: block
        width: 100%

      .pay-off, .komma
        padding: 15px column(1, 14)
        width: 100%
        text-align: center

      .komma
        +flex(center, center)
        line-height: 1

        &:before
          position: relative
          right: 0
          margin-left: -18px
          left:  -10px
          top: 0

        background-color: rgba(255,255,255,0.05)


    // Styling colors for college pages
    [class^="vso"] &
      background-color: $grayBlue

      .pay-off
        color: $darkerPurple

      a
        color: $darkerPurple

        &:hover
          color: white

        &:before
          +sprite(-95px -103px, 24px, 24px)

    // Global pages
    .global &
      .pay-off
        color: $gray
      a
        color: $gray

        &:hover
          color: white

        &:before
          +sprite(-149px -128px, 24px, 24px)


  +respond-to-width(840)
    padding-top: 35px

    >.grid-row
      +flex(flex-start, flex-start)
      +flex-rows
      margin-bottom: 100px
      width: 100%

    .main-item
      width: 100%
      padding: 0 column(1, 14)
      margin-left: auto
      margin-right: auto

      .logo
        display: none


      &.location
        +order(2)
        border-top: 2px solid rgba($gray, 0.2)
        padding-top: 40px

      &.schools, &.menu
        display: none

      >a
        display: inline-block

      ul.extra-margin-bellow
        margin-bottom: 35px

    .cta
      width: column(12,14)
      margin-left: auto
      margin-right: auto
      padding-bottom: 0
      +order(1)

      .text
        +flex(space-between, center)
        a
          font-size: 1rem

        figure
          margin: 0

        .placeholder
          width: calc(100% - 118px)

      .logo
        display: none