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


footer
  background-color: $blue
  padding-top: 90px

  .grid-col
    vertical-align: top

  .main-footer

    .footer-placeholder
      position: relative
      width: column(22, 24)
      margin-left: column(1, 24)
      +flex(space-between, flex-start)

    .logo
      width: 250px
      overflow: visible

      figure
        position: relative
        left: -11px
      a
        display: inline-block
        width: 100%
        img
          width: 100%

    .footer-contact-info

      .logo
        display: none

      h5
        +phenomena
        font-size: 1.2rem
        line-height: 1
        color: white

      p
        color: $lightGray
        font-size: 0.9rem

      a
        text-decoration: none
        color: white
        font-size: 0.9rem
        +flex(flex-start, center)

        &:first-of-type
          margin-bottom: 12px

        .icon
          +flex(center, center)
          width: 32px
          height: 32px
          border: 2px solid rgba($brown, 0.8)
          border-radius: 100%
          margin-right: 12px
          background-color: transparent
          transition: all 0.3s

          span
            position: relative
            //right: -1px
            +phenomena
            font-size: 0.9rem

        &:hover
          .icon
            background-color: $brown
            border-color: $brown

    .part-off
      a
        text-decoration: none
        text-align: right
        p
          margin: 0 0 7px
          font-size: 0.8rem
          color: $lightGray
          opacity: 0.75

        .logo
          display: inline-block
          +sprite(0 -45px, 130px, 61px)

      .komma
        display: none

      .return-top
        position: relative
        display: none

    .return-top
      position: absolute
      left: 0
      bottom: 0
      +flex(flex-start, center)
      text-decoration: none

      p
        color: $lightGray
        opacity: 0.75
        transition: opacity 0.3s
        font-size: 0.8rem
        line-height: 1
        margin: 0

      span
        +flex(center, center)
        width: 32px
        height: 32px
        border: 2px solid rgba($brown, 0.8)
        border-radius: 100%
        margin-right: 12px
        background-color: transparent
        transition: all 0.3s

        &:before
          content: ''
          +arrowWhite
          +translate3dRotate(0,0,0,-90deg)
          transition: transform 0.3s

      &:hover
        p
          opacity: 1
        span
          &:before
            +translate3dRotate(0,-2px,0, -90deg)

    .komma
      position: absolute
      right: 0
      bottom: 0
      text-decoration: none
      visibility: hidden

      span
        position: relative
        top: 1px
        display: inline-block
        +sprite(0 -107px, 32px, 32px)
        margin-right: 10px

      p
        display: inline-block
        +metropolisLight
        color: $lightGray
        font-size: 0.8rem
        line-height: 1.1

        strong
          +metropolisSemiBold

    +respond-to-width(1000)

      .footer-placeholder
        padding-bottom: 75px
        +flex-rows

        .grid-col.logo
          display: none

        .grid-col
          width: 50%

        .footer-contact-info
          width: calc(100% - 300px)

          .logo
            display: block
            margin-bottom: 40px

        .part-off
          width: 285px
          a
            text-align: left

          .komma
            position: relative
            margin-top: 30px

          .return-top
            margin-top: 30px
            +flex(flex-start, center)
            p
              margin-bottom: 0

        .komma-block, .return-top-block
          display: none

  +respond-to-width(680)
    padding-top: 50px

    .main-footer
      margin-bottom: 0 !important

      .footer-placeholder
        padding-bottom: 0

        .footer-contact-info
          width: 100%
          text-align: center

          .logo
            margin-left: auto
            margin-right: auto

            +respond-to-width(500)
              width: 200px

          a
            +flex(center, center)

        .part-off
          margin-top: 50px
          width: 100%
          text-align: center
          a
            text-align: center

          .return-top
            margin-left: auto
            margin-right: auto
            +flex(center, center)




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

  .sub-footer
    margin-top: 90px
    background-color: $darkBlue
    padding: 20px 0

    .grid-row
      +flex(space-between, center)

    .grid-col
      font-size: 0.8rem

    // copyright text
    p
      margin: 0
      color: $lightGray
      opacity: 0.4

    // Our branding logo
    a
      position: relative
      color: white
      text-align: right
      text-decoration: none
      opacity: 0.4
      transition: opacity 0.2s

      &:before
        content: '|'
        display: inline-block
        margin: 0 12px

      &:first-of-type
        &:before
          display: none

      &:hover
        opacity: 0.6

    +respond-to-width(680)
      margin-top: 50px

    +respond-to-width(600)
      padding: 40px 0

      .grid-row
        +flex-rows

      .grid-col
        +order(2)
        width: 100%
        text-align: center

      .footer-links
        +order(1)
        margin-bottom: 20px

        a
          display: block
          text-align: center
          margin-bottom: 10px

          &:before
            display: none




  +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