footer, .footer
  width: calc(100% - 250px)
  background: url('/images/structure/backgroundBlue.jpg')
  background-size: cover
  min-height: 300px
  position: relative
  padding: 40px 0 40px 250px!important
  z-index: 1

  .footer-wrapper
    max-width: calc(1125px + 16.66666666666%)
    margin: auto


  *
    z-index: 1
    position: relative

  .pattern-overlay
    background: url('/images/structure/block_pattern2.png')
    +position(absolute, 0 null null 0)
    width: 100%
    height: 100%
    z-index: 0

  .header-row, .stores
    >p
      font-size: 21px
      text-transform: uppercase
      +audiBold
      float: left

      .icon
        +arrowBottomWhite
        margin-bottom: 2px
        zoom: 1.3
        display: inline-block
        margin-left: 15px

    .newsletter-button
      width: calc((86%/8 * 2) + 2%)
      min-width: 225px
      float: right
      a
        +button(15px)
        font-size: 16px
        text-transform: uppercase
        display: block

        span
          margin-top: 6px

    .subscribe-sportivo-button
      width: calc((86%/8 * 2) + 2%)
      min-width: 225px
      margin-left: 2%
      float: right
      a
        +button(15px)
        display: block
        font-size: 16px
        text-transform: uppercase
        p
          +audiBold()

        span
          margin-top: 6px

  .stores
    .subscribe-sportivo-button
      a
        span
          margin-top: -11px

  .navigation-row
    margin-top: 40px
    ul
      border-top: 1px solid rgba(255,255,255,0.4)
      li
        float: left
        width: calc(86% / 8)
        margin: 0 1%

        border-bottom: 1px solid rgba(255,255,255,0.4)

        &:hover
          border-bottom: 3px solid rgba(255,255,255,0.4)
          a
            padding-bottom: 7px

        &:first-child
          margin-left: 0
        &:last-child
          margin-right: 0

        a
          text-transform: uppercase
          padding-top: 15px
          padding-bottom: 10px
          display: block

  .content-row
    margin-top: 40px
    >div
      width: 23.5%
      height: 200px
      float: left
      margin-left: 2%
      border-bottom: 1px solid rgba(255,255,255,0.4)

      &:first-child
        margin-left: 0

      h3
        text-transform: uppercase
        padding-bottom: 10px
        font-size: 20px
      p
        font-size: 18px
        line-height: 21px
        margin-bottom: 20px

      a
        +audi
        line-height: 21px
      &.blog-item
        a
          +audiItalic
          display: block
          margin-bottom: 10px
          span
            +arrowRightWhite
            display: inline-block

      &.search-block
        .search-bar
          margin-left: 0

          input[type=text]
            color: $blue
            +placeholder
              color: $blue

          input[type=submit]
            z-index: 2
            +sprite(-15px -30px,  12px, 16px)

  .copyright
    margin-top: 20px
    +flex()
    &:after
      display: none
    a, p
      font-size: 18px
      text-transform: uppercase
      display: inline-block

    .first-block
      +flex(center, center)

    .komma
      +flex(space-between, center)
      span
        +sprite(-220px 0px, 25px, 25px)
        display: inline-block
        margin-right: 10px
      b
        margin-left: 5px

      em
        font-style: normal

.social-media
  display: inline-block
  margin-left: 40px
  a
    float: left
    margin-right: 20px

  .facebook
    +sprite(-255px 0, 20px, 20px)
  .youtube
    +sprite(-285px 0, 29px, 20px)
  .google-plus
    +sprite(-340px 0, 23px, 19px)

.stores
  margin: 20px 0
  a
    text-align: left
    &.google-store .google
      +sprite(-375px 0px, 20px, 20px)
      display: inline-block
      +position(relative, 3px null null 5px)

    &.app-store .app
      +sprite(-400px 0px, 20px, 20px)
      display: inline-block
      +position(relative, 3px null null 5px)


    &:hover
      color: $blue





+media-query(1750px)
  footer, .footer
    .footer-wrapper
      margin: 0 40px

+media-query(1450px)
  footer
    .header-row, .stores
      .newsletter-button, .subscribe-sportivo-button
        width: calc((86%/8 * 2.5) + 3%)




+media-query(1270px)
  footer, .footer
    .header-row, .stores
      .newsletter-button, .subscribe-sportivo-button
        width: calc((94%/8 * 4) + 2%)
      .newsletter-button
        clear: right
        margin-top: 10px

    .stores
      .subscribe-sportivo-button
        margin-top: 10px


    .navigation-row
      ul
        li
          width: calc(94% / 8 * 2)
          &:nth-child(4)
            margin-right: 0
          &:nth-child(5)
            margin-left: 0
            clear: both

          a
            font-size: 14px
  .content-row
    >div
      width: 32%
      &.blog-item
        a:last-child
          display: none

+media-query(1000px)
  footer
    .copyright
      .first-block
        display: block

  .social-media
    display: block
    margin-top: 20px
    margin-left: 0

+media-query(900px)
  footer,.footer
    width: 90%
    padding: 40px 5%!important

    .content-row
      >div
        width: 32%
        &.blog-item
          a
            margin-right: 10px
        &.search-block
          display: none

+media-query(730px)
  footer, .footer
    .header-row, .stores
      >p
        margin-bottom: 10px

      .subscribe-sportivo-button
        float: none
        clear: both
        margin: 20px 0 0 0

      .newsletter-button
        clear: both
        margin-top: 10px
        float: none

      .newsletter-button
        clear: both
        margin-top: 10px

    .navigation-row
      ul
        li
          width: calc(96% / 8 * 4)
          margin: 0 2%
          &:nth-child(even)
            margin-right: 0
          &:nth-child(odd)
            margin-left: 0
            clear: both

          a
            font-size: 14px

+media-query(730px)
  footer
    .header-row, .stores
      .newsletter-button, .subscribe-sportivo-button
        width: 100%

    .content-row
      >div
        width: 49%
        &.blog-item
          display: none

    .copyright a
      em, b
        display: none


+media-query(500px)
  footer,.footer
    width: 90%
    padding: 40px 5%!important

    .content-row
      >div
        width: 49%

+media-query(465px)
  footer,.footer
    .stores
      a
        margin-left: 0
        clear: both
+media-query(400px)
  footer,.footer
    .content-row
      >div
        width: 100%
        &.remaining
          margin-top: 40px