footer
  padding: 65px 0
  border-top: 4px solid $orange
  background: $darkBlue
  position: relative
  z-index: 5
  .logo
    a
      display: block
    span
      +sprite(0 0, 285px, 56px)
      display: inline-block
      +transform-origin(0 0)

  .menu
    p
      margin: 0
      a
        display: block
        +font-default(18px, 18px)
        margin-bottom: 15px
        opacity: 0.7

        &:hover
          opacity: 1


  .social-block
    h4
      +font-bold(21px, 21px)
      font-weight: 900

    .social
      +flex(space-between, center)
      width: 100%
      max-width: 225px
      margin-top: 25px

      a
        opacity: 0.7
        &:hover
          opacity: 1
      .facebook
        +sprite(-110px -58px, 20px, 20px)
        display: inline-block
      .twitter
        +sprite(-131px -58px, 26px, 20px)
        display: inline-block
      .insta
        +sprite(-158px -58px, 20px, 20px)
        display: inline-block
      .linkedin
        +sprite(-180px -58px, 20px, 20px)
        display: inline-block

  .komma
    a
      +flex(flex-start, center)
      font-size: 15px
      line-height: 18px
      opacity: 0.7
      +transition(all 0.2s)

      span
        +sprite(-202px -57.5px, 30px, 31px)
        display: inline-block
        margin-right: 20px
        +transition(all 1s)
        +transform(rotate(0deg))

      &:hover
        opacity: 1

        span
          +transform(rotate(360deg))

+media-query(1350px)
  footer
    .social-block
      .social
        max-width: 160px
        a
          +transform-origin(50% 50%)
          +transform(scale(0.9))

+media-query(1100px)
  footer
    .logo
      span

        +transform(scale(0.8))

+media-query(1000px)
  .grid3
    width: 50%
    padding-left: 20px

    &:nth-child(3)
      clear: both
      margin-top: 40px
    &:nth-child(4)
      margin-top: 40px


  footer
    padding: 40px 0
    .komma
      a
        font-size: 12px
        line-height: 15px


+media-query(450px)
  footer
    .grid3
      padding-left: 0
      width: 100%
      float: none
      display: block
      margin-bottom: 60px
      text-align: center

      &.menu, &.komma
        padding: 0

      &.logo
        margin-bottom: 20px
        span
          +transform-origin(50% 0)

    .social-block
      .social
        margin: 15px auto 0

    .komma
      a
        +flex(center, center)