.contact {
  display: table;
  height: 100%;
  width: 100%;
  @media screen and (max-width: $medium_breakpoint) {
    display: block;
  }
}

.contact__frame {
  width: 100%;
  height: 100%;
  display: table-cell;
  padding-bottom: em(50px);
  text-align: right;
  vertical-align: bottom;
  position: relative;
  @media screen and (max-width: $medium_breakpoint) {
    display: block;
    padding-top: em(300px);
  }
  @media screen and (max-width: $small_breakpoint) {
    padding-top: em(200px);
  }
}

.contact__map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  background: $light_gray;
  &.reveal {
    transform: none;
  }
}

.contact__content {
  display: inline-block;
  vertical-align: bottom;
  width: em(420px);
  margin-top: em(40px);
  text-align: left;
  color: $white;
  position: relative;
  z-index: 100;
  max-width: 100%;
}

.contact__content__main {
  overflow: hidden;
  background: $green;
  padding: em(40px);
  width: 100%;
  h1 {
    text-align: left;
    color: inherit;
    font-size: em(30px);
    font-weight: 800;
    text-transform: none;
  }
  .section__text {
    color: inherit;
    margin: em(20px) 0;
    a {
      color: $white;
      border-bottom: em(1px) solid rgba($white, 0.6);
      &:hover {
        border-color: $white;
      }
    }
  }
}

.contact__content__backdrop {
  position: absolute;
  top: em(50px);
  left: em(-50px);
  right: 0;
  bottom: em(-50px);
  background: $white;
  z-index: -1;
}