footer
  background: $blackBackground
  padding: 80px 0 50px
  border-top: 4px solid $highLightRed
  .content-container
    box-sizing: border-box

  .responsive-block
    padding-bottom: 20px

  h3
    +font-semi-bold(18px, 24px)
    margin-bottom: 28px
    color: $fontColor2

    &:first-of-type
      margin-bottom: 30px


  li, a, p
    +font-default(16px, 22px)

    .data_title
      font-weight: 600
      color: $fontColor2

  p, ul
    margin-bottom: 20px

    &:last-child
      margin-bottom: 0

  .social
    a
      +flex(flex-start, center)
      margin-bottom: 10px

    .facebook
      span
        +sprite(-250px -60px, 17px, 17px)
        display: inline-block
        margin: 0 13px 0 3px
    .youtube
      span
        +sprite(-250px -100px, 23px, 17px)
        display: inline-block
        margin-right: 10px
  .site-switch
    h3
      margin-bottom: 0
    a
      display: block
      transition: color 0.4s
    p
      margin-top: 5px

    span
      +flex(flex-start, center)
      +font-default(16px)
      font-size: 15px !important
      line-height: 18px !important
      border: 2px solid $selectedGreen
      padding: 12px 20px
      border-radius: 20px
      width: 200px
      transition: color 0.4s

      &:after
        content: ''
        position: relative
        top: 2px
        display: inline-block
        +arrowRightGray
        margin-left: 10px
        +translate3d(0,0,0)
        transition: transform 0.3s
    &:hover
      span
        color: white
        &:after
          +arrowRightWhite
          +translate3d(5px,0,0)

  .end-logo
    margin-top: 60px
    +sprite(0 0, 107px, 36px)



  .end-footer
    margin-top: 38px
    border-top: 1px solid $fontColor2
    +flex(space-between, center)

    p, a
      +font-default(14px, 14px)
      +flex(center, center)
      margin: 10px 0
      color: rgba($fontColor2, 0.7)

    .komma
      position: relative
      +flex(space-between, center)
      +font-default(14px)
      line-height: 1
      width: 265px
      color: rgba($fontColor2, 0.7)
      text-decoration: none
      transition: color 0.2s

      span
        position: relative
        top: 1px
        display: inline-block
        opacity: 0.7
        transition: opacity 0.2s
        +sprite(-490px -94px, 93px, 31px)

      &:hover
        color: $fontColor2
        span
          opacity: 1

.isolation
  footer
    border-top: 4px solid $selectedGreen

    .end-logo
      +sprite(0 -57px, 107px, 36px)

    .site-switch
      span
        border-color: $defaultRed

+media-query(($maxWidth + 40px))
  footer
    .content-container
      width: calc(100% - 40px)
      padding: 0 20px

    .end-footer
      margin-top: 38px
      padding: 0

+media-query(950px)
  footer
    .openingshours
      display: none

    .grid3
      width: 33.3333333333%


+media-query(760px)
  footer
    .grid3
      width: 50%

    .social-other-site
      width: 100%
      margin-top: 40px


+media-query(550px)
  footer
    p
      display: inline-block
      width: 49%
      vertical-align: top

    .grid3
      width: 100%
      margin-top: 40px

    .end-footer
      display: block
      text-align: center
      padding-top: 10px

      p, a
        width: 100%

      .komma
        +flex(center, center)
        width: 100%
        span
          margin-left: 8px



+media-query(450px)
  footer
    padding-top: 25px
    //.content-container
    //  padding: 0 40px
    p, a
      width: 100%
      font-size: 15px
      a, span
        font-size: 15px
    h3:first-of-type
      margin-bottom: 10px
    .responsive-block
      width: 100%
    .end-footer
      display: block
      padding-top: 25px
      p
        display: block

      .komma
        display: block
        margin-top: 40px
        span
          display: block
          margin: 10px auto 0