footer
  background: $darkGray url('/img/noise.png')
  position: relative
  z-index: 20
  margin-top: 20px

  .main-footer
    position: relative
    margin-top: -200px
    .content-container
      +flex(center, flex-start)
    .contact-form
      width: $contentGrid*5
      display: inline-block

    .content
      width: $contentGrid*5
      display: inline-block
      padding-left: 30px
      h4
        +header-font2(82px)
        text-transform: uppercase
        text-shadow: 2px 2px 0 rgba(29, 29, 27, 0.72)
        color: $lightGray
      p, p a
        color: $lightGray
        +font-default(19px)

      .email a
        +flex(flex-start, center)
        +font-default(24px)
        +transition(all 0.3s)
        &:before
          +sprite(-330px 0, 38px, 30px)
          content: ''
          margin-right: 10px
          display: inline-block
        &:hover
          color: $blue
  .sub-footer
    position: absolute
    bottom: 40px
    left: 0
    width: 100%
    .content-container
      +flex(space-between, center)
    p, p a
      color: $lightGray
      +font-default(17px)
      font-size: 17px !important
      +transition(all 0.3s)
    a:hover
      color: $blue
    .komma
      a
        +flex(flex-start, center)
      span
        +sprite(-330px -65px, 32px, 32px)
        display: block
        margin-right: 15px

  &.no-form
    .styling-block.bottom-block
      margin-top: -55px
+media-query(1920px)
  footer
    margin-top: 38px
    &.no-form
      margin-top: -95px
      .styling-block
        .left, .right
          top: -125px
        &.bottom-block
          margin-top: -155px
          .left, .right
            top: 50%
+media-query(1800px)
  footer
    .main-footer
      margin-top: -300px
    &.no-form
      .main-footer
        margin-top: -200px
+media-query(1680px)
  footer
    margin-top: 55px

+media-query(1450px)
  footer
    margin-top: 70px
    &.no-form
      margin-top: -95px
      .main-footer
        margin-top: -70px
      .styling-block
        height: 225px
        .left, .right
          top: -100px
        &.bottom-block
          margin-top: -155px
          .left, .right
            top: 50%
+media-query(1200px)
  footer
    margin-top: 87px
    .main-footer
      margin-top: -350px
    &.no-form
      .styling-block
        height: 200px
        &.bottom-block
          height: 275px
      .main-footer
        margin-top: -120px
+media-query(1100px)
  footer
    margin-top: 94px

+media-query(850px)
  footer
    margin-top: 110px

+media-query(800px)
  footer
    .main-footer
      .content
        p, p a
          +font-default(24px)
        .email
          text-align: center
          +flex(center, center)
+media-query(720px)
  footer
    margin-top: 119px
    .content-container
      +flex-rows
    .main-footer
      .contact-form
        +order(2)
        width: 80%
        max-width: 450px
        .form .submit
          margin-right: auto
          max-width: 250px
      .content
        margin-bottom: 50px
        padding-left: 0
        width: 80%
        max-width: 450px
        +order(1)

+media-query(600px)
  footer
    margin-top: 127px
    .sub-footer
      bottom: 20px
      .content-container
        >p
          width: 100%
          text-align: center
          margin: 10px 0
          &.komma
            a
              +flex(center, center)
    &.no-form
      margin-top: -95px
      .styling-block
        .left, .right
          top: -40px
        &.bottom-block
          .left, .right
            top: 50%
+media-query(450px)
  footer
    margin-top: 137px

+media-query(360px)
  footer
    margin-top: 143px