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


footer
  position: absolute
  bottom: 0
  left: 0
  width: 100%
  height: 80px

  .grid-row
    max-width: calc(100% - 120px)
    +respond-to-width(740)
      max-width: none

  .placeholder
    +flex(space-between, center)

  a.phone
    font-weight: bold
    font-size: 0.8rem
    line-height: 1
    color: $gray
    text-decoration: none
    transition: color 0.3s, background 0.3s

    +respond-to-width(740)
      display: none

    &:hover
      color: $darkGray

  ul.grid-col
    height: 80px
    +flex(flex-start, center)
    margin-top: 0
    margin-bottom: 0
    padding: 0
    list-style: none

    li
      font-family: din()
      text-transform: uppercase

      &:before
        content: '•'
        padding: 0 8px
        color: $red


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

      a
        font-size: 0.8rem
        text-decoration: none
        color: $gray
        transition: color 0.3s

        &:hover
          color: $darkGray

      &.active
        a
          color: $red

  +respond-to-width(1370)
    height: 60px
    ul.grid-col
      height: 60px

  +respond-to-width-or-height(500, 600)
    position: relative
    height: auto
    padding: 25px 0 0

    .grid-row
      width: 100%

    .placeholder
      display: block

    a.phone
      background-color: $red
      +flex(center, center)
      color: white
      height: 60px
      font-size: 0.85rem
      &:hover
        color: white
        background-color: $darkRed


    ul.grid-col
      height: auto
      +flex-rows
      padding-bottom: 25px

      li
        width: 100%
        text-align: center
        margin-bottom: 10px

        &:before
          display: none

        &:last-of-type
          margin-bottom: 0