.modal-overlay {
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.modal-overlay.active{
  z-index: 100;
  opacity: .5;
  display: block;
  @include fastTransition-all;
}

.modal {
  width: auto;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  max-width: 850px;
  min-width: 450px;
  padding: .8em 1.5em;
  border: thin #000 solid;
  background-color :#fff;
  z-index: 101;
  position: fixed;
  overflow: hidden;
  @include fastTransition-all;
  @include mediaQuery(medium) {
    padding: 2.5em;
  }
}

.modal.active{
  @include fastTransition-all;
  display: block;
}

.modal .page-header {
  padding-bottom: .7em;
}

.screen-reader-offscreen {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  top: auto;
}
.modal__content {
  border-bottom: 1px solid $lightbg__grey;
  padding-bottom: 1em;
  margin-bottom: 2em;
}
.modal__link {
  display: block;
  margin: .8em 0 1em;
  @include mediaQuery(medium) {
    display: inline-block;
    margin: .6em 0;
  }
}
.modal__button-wrapper {
  float: right;
  button {
    margin-bottom: .8em;
    margin-right: .8em;
    display: inline-block;
    @include mediaQuery(medium) {
      margin-left: .8em;
      margin-right: 0;
    }
  }
}