#footer
  position: relative
  z-index: 200

  // Benefits
  .benefits
    +grid-padding($top: 1, $bottom: 1)
    border-top: 1px solid #E7E4E1
    background: $body-background

  // Information
  .information
    +grid-padding($top: 1, $bottom: 1)
    background: #EEE
    border-top: 1px solid #E7E4E1
    color: #949494
    line-height: 1.466666667

    // Column
    .column.fluid-25
      +grid-padding($right: 1)

    .title
      display: block
      margin-bottom: 1.466666667em
      +semibold-uc
      color: $dark-grey
      font-size: 1.5em

    ul
      margin-bottom: 1.466666667em
      font-size: 1.5em

    a.logo-tops
      display: block
      position: relative
      +grid-height-s

      img
        height: 100%
        +transition(opacity 300ms ease-out)

        &.hover
          +position(absolute, 0 null null 0)
          z-index: 10
          opacity: 0

      &:hover
        .hover
          opacity: 1

    .search-bar
      position: relative
      margin-bottom: 3.4em

    // Link
    a
      color: #949494   
      +transition(color .2s ease-out)
      &:hover
        color: $grey
        text-decoration: underline

    // Social
    .social
      line-height: 2em
      margin-top: -7px
      .icon
        display: inline-block
        position: relative
        top: 7px
        left: 0
        margin-right: 8px
        @extend %icon-sprite
        &.fb
          +icon-sprite(0,3,25px,25px)
        &.tw
          +icon-sprite(2,3,25px,25px)
        &.in
          +icon-sprite(4,3,25px,25px)
        &.gp
          +icon-sprite(10,3,25px,25px)
    .komma
      display: block
      span
        display: inline-block
      .logo
        position: relative
        top: -2px
        left: 0
        margin-right: 8px
        @extend %icon-sprite
        +icon-sprite(6,3,25px,25px)
      .desc
        line-height: 1.1
        font-size: 1.5em

  .payment-methods.nl
    +icon-sprite-two(-250px -280px,180px,90px)
  .payment-methods.de
    +icon-sprite-two(-250px -170px,180px,90px)