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


footer
  //background: linear-gradient(0deg, $darkGreenGradient)
  background: $lighterGray

  >.grid-row
    padding: 70px 0 90px

  .grid-col
    vertical-align: top

    .header
      font-size: 0.7rem
      text-transform: uppercase
      color: $orange
      font-weight: semi-bold()
      margin: 0 0 40px

    li a, p
      font-size: 0.9rem
      color: $semiBlack


  .contact
    width: column(4, 12)
    margin-left: column(1, 12)

    figure
      width: 100%
      max-width: 150px
      margin-bottom: 40px

      img
        width: 100%

    a
      color: $orange
      font-weight: semi-bold()
      font-size: 0.9rem
      text-decoration: none
      transition: color 0.2s

      &:hover
        color: $orangeRed


  .links
    width: column(6, 12)
    margin-left: column(1, 24)

    >.grid-row
      width: 100%

    .menu, .sub-links
      width: column(3, 6)
      vertical-align: top

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

      li
        margin-bottom: 5px

        a
          text-decoration: none
          opacity: 0.6
          transition: opacity 0.3s

          &:hover
            opacity: 0.9

        &.active
          a
            opacity: 1
            font-weight: semi-bold()


      &.socials
        li
          a
            +flex(space-between, center)
            margin-top: 5px

            .text
              display: block
              width: calc(100% - 40px)

            .icon
              +flex(center, center)
              width: 30px
              height: 30px

              &:before
                content: ''


            &.facebook
              span
                &:before
                  +facebook

            &.twitter
              span
                &:before
                  +twitter


  +respond-to-width(950)
    .contact, .links
      width: column(10, 12)
      margin-left: column(1, 12)

    .links
      margin-top: 60px

      +respond-to-width(550)
        .menu, .sub-links
          width: 100%

  +respond-to-width(550)
    >.grid-row
      padding-bottom: 0




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

  .sub-footer
    background: linear-gradient(90deg, $orangeGradient)
    padding: 15px 0

    .grid-row
      .placeholder
        width: column(10, 12)
        margin: auto
        +flex(space-between, center)

    p, a
      font-size: 0.7rem
      line-height: 1
      color: white

    a
      font-weight: semi-bold()
      text-decoration: none

    .komma
      position: relative
      display: inline-block
      font-size: 0.6rem
      line-height: 1.2
      text-transform: uppercase
      width: column(3, 12)
      opacity: 0.4
      transition: opacity 0.2s

      &:hover
        opacity: 0.7

      &:before
        content: ''
        position: absolute
        left: -35px
        top: 0
        display: block
        width: 25px
        height: 25px
        background:
          image: url("/img/basic_logo.svg")
          position: center
          size: contain
          repeat: no-repeat

    +respond-to-width(600)
      padding-bottom: 30px 
      .grid-row
        .placeholder
          display: block
          text-align: center

      p
        margin-bottom: 1.4rem

      .komma
        width: 100%
        &:before
          position: relative
          top: 0
          left: 0
          margin: 0 auto 1rem

  +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

    .sub-footer
      .grid-row
        .placeholder
          width: 100%