footer
  .call-footer-bar
    +flex(flex-start, center)
    padding: 16px
    background-color: $blue
    text-decoration: none

    .person
      border: 2px solid white
      border-radius: 9999px
      height: 100px
      width: 100px
      overflow: hidden 
      background-image: url("/images/static/people/stefan_small_mobile.jpg")
      background-position: center
      background-size: cover
      margin-right: 15px
      img
        width: 100%

    .call
      color: white
      +bold
      font-size: 17px
      line-height: 22px

      span
        +regular
        font-size: 18px
        line-height: 22px
        color: $semiBlue

  .reason-list
    background-color: $blue
    border-top: 1px solid #33B8FF
    padding: 20px 16px 35px

    p
      +bold
      font-size: 16px
      line-height: 19px
      color: white
      margin: 0 0 15px

    ul
      list-style: none
      li
        +regular
        font-size: 15px
        line-height: 16px
        margin-bottom: 8px
        color: $semiBlue

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

        &:before
          content: ''
          display: inline-block
          margin-right: 10px
          +icon-sprite-mobile(-70px -70px, 16px, 16px)
          position: relative
          top: 3px

  .home-footer-reasons
    padding: 25px 16px
    h2
      +bold
      color: $blue
      font-size: 14px
      line-height: 17px
      margin: 0 0 15px
      padding: 0 20px

    p
      +regular
      font-size: 13px
      line-height: 16px
      color: $lightGreyFont
      margin: 0
      padding: 0 20px

    ol
      li
        +regular
        position: relative
        padding: 0 20px
        color: $lightGreyFont
        font-size: 13px
        line-height: 16px
        margin-bottom: 2px

        strong
          +bold
          color: $mobileBlack
        &:last-child
          margin-bottom: 0
    .main-text
      p
        margin-bottom: 20px
  .footer-menu
    padding: 10px
    background-color: $mobileGray

    .footer-item, .footer-item-list li
      border: 2px solid $mobileBorderColor
      margin-bottom: 2px
      &:last-child
        margin-bottom: 0
      a
        text-decoration: none
        +flex(flex-start, center)
        position: relative
        &:after
          content: '›'
          +semibold
          color: $light-grey
          font-size: 28px
          line-height: 28px
          position: absolute
          right: 15px
          top: 0px
          height: 100%
          +flex(center,center)

      &.benefit
        a
          padding: 15px
        .icon
          width: 45px
          height: 45px
          margin-right: 25px
          +flex(center, center)
          &:after
            content: ''
            display: block
          &.safe:after
            +icon-sprite-mobile(-50px -30px, 24px, 32px)
          &.trace:after
            +icon-sprite-mobile(-10px -33px, 33px, 26px)
          &.discount:after
            +icon-sprite-mobile(-110px -30px, 30px, 32px)
          &.reminder:after
            +icon-sprite-mobile(-80px -30px, 25px, 32px)

        .title
          +semibold
          color: $dark-grey
          font-size: 15px
          line-height: 18px
          margin: 0 0 5px
          display: block
        .desc
          +regular
          font-size: 13px
          line-height: 16px
          color: $lightGreyFont
          display: block
          width: 85%
    .footer-item-list
      li
        a
          padding: 15px 15px 15px 25px
          +semibold
          color: $dark-grey
          font-size: 15px
          line-height: 18px
          display: block

  .bottom-footer
    padding: 30px 16px
    background-color: $mobileGray
    +flex(space-between, center)

    .tops
      width: 125px
      img
        width: 100%

    .komma
      width: 30px
      height: 30px
      a
        +icon-sprite-mobile(-110px -114px, 30px, 30px)
        display: inline-block