contact.scss

// Contact CTA

// Contact section, featured on Front and Our Work.

$contact-md: 560px;
$contact-mdlg: 690px;
$contact-lg: 850px;

.front-contact {
  @include clearfix;

  .container {
    padding: 0 1em;

    @include breakpoint($container-padding) {
      padding: 0;
    }
  }

  .cta-contact {
    @include grid-span(14, 2);
    clear: both;

    @include breakpoint($contact-md) {
      @include grid-span(8, 5);
    }

    h3 {
      color: $green;
      text-align: center;
    }

    .button {
      width: 100%;
      text-align: center;
      line-height: 1.4em;
      font-size: em(21);
    }
  }
}

.our-work-contact {
  @include clearfix;
  padding-top: 2.4em;
  padding-bottom: 2.4em;
  background-color: $blue;

  @include breakpoint($contact-mdlg) {
    padding-top: 3.2em;
    padding-bottom: 0;
  }

  .container {

    @include breakpoint($container-padding) {
      padding: 0;
    }

    img {
      @include grid-span(7, 2);
      display: none;
      max-width: 378px;

      @include breakpoint($contact-mdlg) {
        @include grid-span(7, 2);
        display: block;
        margin-top: -4.8em;
      }
    }
  }

  .cta-contact {
    @include grid-span(14, 2);
    margin-top: 0;
    clear: both;

    @include breakpoint($contact-mdlg) {
      @include grid-span(7, 9);
      margin-top: 0;
    }

    @include breakpoint($contact-lg) {
      @include grid-span(6, 8);
      margin-top: 1.2em;
    }

    h2 {
      color: $blue-lighter;
      text-align: center;
      margin-top: 0;
    }

    .button {
      width: 100%;
      text-align: center;
      line-height: 1.4em;
      font-size: em(21);

      @include breakpoint($contact-md) {
        font-size: em(26);
      }
    }
  }
}

.case-study-contact {
  @include clearfix;
  padding-top: 2.4em;
  padding-bottom: 2.4em;
  background: $ruffles;
  border-bottom: 5px solid $gray-light;

  @include breakpoint($contact-mdlg) {
    padding-top: 3.2em;
    padding-bottom: 0;
  }

  .container {

    @include breakpoint($container-padding) {
      padding: 0;
    }

    img {
      @include grid-span(7, 2);
      display: none;
      max-width: 291px;

      @include breakpoint($contact-mdlg) {
        @include grid-span(7, 2);
        display: block;
        margin-top: -4.8em;
      }
    }
  }

  .cta-contact {
    @include grid-span(14, 2);
    margin-top: 0;
    clear: both;

    @include breakpoint($contact-mdlg) {
      @include grid-span(7, 9);
      margin-top: 0;
    }

    @include breakpoint($contact-lg) {

      @include grid-span(6, 8);
      margin-top: 1.2em;
    }

    h2 {
      color: $gray-dark;
      text-align: center;
      margin-top: 0;
    }

    .button {
      width: 100%;
      text-align: center;
      line-height: 1.4em;
      font-size: em(21);

      @include breakpoint($contact-md) {
        font-size: em(26);
      }
    }
  }
}