$transition: .7s;

.modal-close-button {
  z-index: 10;
}

.takeover {
  position: relative;
  height: 600px;
  overflow: hidden;

  &:after {
    @include clearfix;
  }

  @include media($medium) {
    height: 500px;
  }

  .heading.-emphasized {
    margin: 0px 0px 10px 0px;
    z-index: -10;
  }

  .takeover__screen {
    position: absolute;
    left: -1400px;
    transition: $transition;
    max-width: 1350px;

    &.is-active {
      left: 0px;
      transition: $transition;
    }

    form {
      max-width: 500px;
    }
  }

  .takeover__buttons {
    position: absolute;
    bottom: 0px;
    padding-top: $base-spacing;
  }

  .button {
    &.-muted {
      background: none;
      color: $med-gray;
      font-size: $font-small;
      font-weight: $weight-normal;
      text-transform: none;
      border: 0 none;
      padding: 0px;

      &:hover {
        color: $off-black;
        background-color: none;
        text-decoration: underline;
      }

      &:focus {
        box-shadow: none;
      }
    }
  }
}
