#contact

.contact-wrapper
  +flex(flex-start, space-between)
  margin: 0 auto
  width: 100%
  position: relative
  padding: $paddingSmall
  flex-direction: column

  .contact-logo
    width: 250px
    margin-bottom: 25px

  .contact-block-outer
    margin: 100px auto
    +flex(space-between, flex-start)
    width: 100%
    max-width: 1100px

    //.contact-form-block
    //  .icon
    //    width: 50px
    //    height: 50px
    //    margin-right: $iconSpace
    //    img
    //      width: 100%
    //    .sub-title
    //      margin-bottom: 0

    +respond-to(small)
      flex-direction: column
      width: 100%

    .contact-information-block
      +flex(flex-start, flex-start)
      flex-direction: column
      margin-bottom: $paddingSmall
      +respond-to(small)
        flex-direction: row
        justify-content: space-between
        align-items: baseline
        width: 100%

      +respond-to-width(700)
        flex-direction: column
        justify-content: flex-start
        align-items: center
        text-align: center
        margin-bottom: 50px
        margin-top: -50px

    .contact-form-block

      +respond-to(small)
        width: 100%

.horizontal-seperator
  padding: 25px 0

  .horizontal-curly-separator
    width: 175px
    +respond-to(small)
      transform: rotate(90deg)
    +respond-to-width(700)
      transform: rotate(0deg)


.contact-footer-outer
  +flex(space-between, flex-end)
  width: 100%
  margin-top: 50px
  //max-width: $maxWidth

  +respond-to(small-mobile)
    justify-content: flex-start
    align-items: center
    flex-direction: column

    .disclaimer
      margin-top: 25px

  .komma-credits
    +flex(flex-start, center)
    width: 200px
    .by-komma
      width: 50px
      margin-right: 15px
      img
        width: 100%
        height: 100%
    .by-komma-text
      +font-default(16px, 22px)