/**
 * Contact page
 *
 * 1. Add some padding (right) so text will not touch contact form
 */

.contact-block
  background-color: $blueGrey
  .content-container
    +flex(space-between, flex-start)
    height: calc(100% - #{$partInViewport})

    +respond-to(small)
      +flex-direction(column)
      +flex(flex-start, flex-start)
      align-items: center

    .contact-information
      padding-right: $paddingSmallTextBlock /* 1 */
      width: 100%
      margin-top: 50px
      color: $white

      +respond-to(small)
        margin: 0
        padding: 20px

      h2
        color: $white
        margin-bottom: 50px

      a
        color: $blue
        transition: color 0.4s ease

        &:hover
          color: $white

    .contact-person-block
      margin-top: 100px
      position: relative
      top: 0
      right: 0
      left: 0
      bottom: 0
      justify-content: flex-start
      animation: none
      opacity: 1

      +respond-to(small)
        display: none

      .contact-person-information
        color: $white
        h4
          color: $white

.contact-content-container
  +flex(center, center)
  width: 100%
  top: -100px
  position: relative
  background:
    color: $contactFormBgColor
  padding: 50px
  max-width: 700px

  +respond-to(small)
    padding: 20px
    top: 0
    margin-bottom: 50px


.contact-form
  width: 100%
  +flex(center, center)
  .inner
    width: 100%
  h3
    color: $contactFormTitleColor