//----------------------------------------------
// Contact
//---------------------------------------------- 
.contact {
  @extend %flex-center;

  position: fixed;
  top: 0;
  left: 0;
  z-index: -9;

  height: 100vh;
  width: 100%;
  padding: {
    right: 1em;
    left: 1em;
  }

  visibility: hidden;
  background-color: rgba($color-white, 0.9);
  opacity: 0;
  transition: opacity 600ms ease-in-out;

  .js-popup-open & {
    z-index: 9999;

    visibility: visible;
    opacity: 1;
  }

  .js-popup-closing & {
    z-index: 9999;

    visibility: visible;
    opacity: 0;
  }

  &__container {
    @extend %box-shadow;

    width: 100%;
    max-width: $max-width--lg;

    background-color: $color-black;

    @media (min-width: $mq-small) {
      display: flex;

      & > * {

        &:first-child {
          flex-basis: 55%;
          max-width: 55%;
        }

        &:last-child {
          flex-basis: 45%;
          max-width: 45%;
        }
      }
    }

    @media (min-width: $mq-med) {
      min-height: 34em;
      width: 80%;
    }

    @media (min-width: $mq-xlarge) {
      width: 65%;
    }

    .js-popup-open & {
      animation: scale 300ms ease-in-out both;
    }
  }

  &__img {
    display: none;

    @media (min-width: $mq-small) {
      position: relative;

      display: block;

      background-color: $color-lightgrey;
    }
  }

  &__content {
    @extend %flex-center;

    flex-direction: column;

    & > * {
      width: 100%;
    }
  }

  &__mast {
    @extend %text-center;
  }
}
