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


footer
  background-color: $footerBlack

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

  .grid-col
    vertical-align: top

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

    li a, p
      font-size: 0.8rem
      color: white


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

    +respond-to-width(850)
      margin-left: 0
      padding-left: column(1, 12)
      width: 100%

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

      img
        width: 100%

    a
      color: $redTheme2
      font-weight: semibold()
      font-size: 0.9rem
      text-decoration: none
      transition: color 0.2s

      &:hover
        color: $redTheme


  .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

  +respond-to-width(850)
    .links
      display: none

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

  .sub-footer
    background-color: #0D1019
    padding: 15px 0

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

    p, a
      font-size: 0.7rem
      color: $lightGray

    p
      margin-bottom: 0.5rem

    a
      //font-weight: semibold()
      text-decoration: none

    .komma
      position: relative
      +flex(space-between, center)
      font-size: 0.7rem
      line-height: 1
      width: 247px
      opacity: 0.4
      color: $lightGray
      transition: opacity 0.2s

      span
        svg
          *
            fill: $lightGray


      +respond-to-width(1080)
        font-size: 0.75rem
        width: 240px

        span
          top: -2px

      &:hover
        opacity: 0.7
        color: white

      span
        position: relative
        top: -1px
        display: inline-block
        width: 78px
        height: 25px

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

      p
        margin-bottom: 1.4rem

      .komma
        margin: auto


  +respond-to-width(850)
    padding-top: 35px
    >.grid-row
      width: 100%
      padding: 0 0 30px 0

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