footer
  padding: 120px 0
  background: #2B2927
  color: white

  h3
    +font-header(36px)
    color: $beige
    margin: 0 0 50px
  .content-container
    position: relative


  .contact
    float: left
    h3
      margin-left: calc( 100% / 6 * 2)
      width: calc( 100% / 6 * 4)

    .image-column
      width: calc( 100% / 6 * 2)
      float: left

      .image.image
        width: 85%
        max-width: 130px
        border-radius: 9999px
        overflow: hidden
        margin: 0 auto 10px
        img
          width: 100%

    .info-column
      width: calc( 100% / 6 * 4)
      float: left

      p
        +font-default(18px, 22px)
        color: $beige

        a
          +font-default(18px, 22px)
          color: $beige

        .link
          text-decoration: underline

      .company
        margin-top: 0
        +font-bold(18px, 22px)
        letter-spacing: 1.8px
        color: $beige
        text-transform: uppercase

      .streamer
        margin: 60px 0 100px
        position: relative

        .logo
          position: absolute
          width: 100%
          max-width: 130px
          left: -180px
          img
            width: 100%

        strong
          +font-header(36px, 44px)
          color: $beige
          display: block
          margin-bottom: 10px

        a
          +font-bold(22px)

      .overlay-map
        height: 255px
        margin-bottom: 100px
        width: 90%
        overflow: hidden

  .komma
    position: absolute
    bottom: 0
    left: calc( 100% / 2 / 6 * 2)
    margin: 0
    a
      +flex(flex-start, center)
      color: $beige

    span
      +sprite(-190px 0, 40px, 40px)
      display: inline-block
      margin-right: 15px
      +transform(rotate(0deg))
      +transition(all 0.4s)
    &:hover
      span
        +transform(rotate(360deg))

  .form
    float: right
    padding-left: 20px
    .hide
      display: none

    .check-alert
      +font-bold(18px)
      color: $beige
      letter-spacing: 1.8px

    .thanks
      display: none
      h3
        +font-header(28px, 32px)
        margin-bottom: 15px

      p
        color: $beige
        +font-default(18px, 22px)
    form
      margin-top: -24px
    .input-rows
      label
        +font-bold(16px, 22px)
        letter-spacing: 1.8px
        text-transform: uppercase
        color: $beige
        display: block
        margin: 0 auto 5px

        text-align: left

      input, textarea
        background: rgba(255,255,255,0.2)
        border: none
        outline: none
        +font-default(16px, 22px)
        color: white
        width: 100%
        max-width: 460px
        height: 40px
        padding-left: 20px
        padding-right: 20px
        margin-bottom: 15px
        &.alert
          border: 1px solid $beige

      textarea
        height: 152px
        padding-top: 10px
        padding-bottom: 10px
    .holder
      width: 100%
      max-width: 460px
      margin: 0

    #sendButton
      width: 100%
      max-width: 280px
      background: $beige
      height: 50px
      padding: 0 8%
      cursor: pointer
      +flex(space-between, center)
      +transition(all 0.3s)

      p
        +font-bold(16px, 22px)
        color: $gray2
        text-transform: uppercase

      &:after
        content: ""
        +arrowRightBlack
        +translate3d(0,0,0)
        +transition(all 0.3s)



      &:hover
        background: darken($beige, 8%)
        &:after
          +translate3d(4px, 0,0)
+media-query(1250px)
  footer .contact .info-column .streamer .logo
    left: -150px
+media-query(850px)
  footer
    padding-bottom: 50px

    .komma
      position: relative
      clear: both
      margin: auto
      left: 0
      a
        +flex(center, center)


    .grid6
      width: 100%

    .contact
      float: right

      h3
        width: 100%
        margin-left: 0
        text-align: center

      .info-column
        width: 87%
        float: none
        text-align: center
        margin: auto
        .overlay-map
          margin-left: auto
          margin-right: auto  
        .streamer
          .logo
            left: 0
      .image-column
        position: absolute

    .form
      padding-left: 0
      text-align: center
      padding-bottom: 75px
      margin-bottom: 75px
      margin-left: auto
      margin-right: auto
      max-width: 600px
      float: none
      border-bottom: 2px solid rgba(202, 163, 88, 0.3)
      .input-rows
        label
          +font-bold(20px, 26px)
          max-width: 460px

        input, textarea
          +font-default(20px, 26px)
      .holder
        margin: auto


+media-query(650px)
  footer
    .contact
      h3
        width: 100%
        margin-left: 0
        text-align: center
      .info-column
        width: 100%
        text-align: center

        .streamer
          .logo
            display: inline-block
            position: relative
            margin-bottom: 50px
        .komma a
          +flex(center, center)

      .image-column .image.image
        display: none