app/common/styles/elements/modals.scss

.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:50%;
  max-width: 850px;
  margin: .5em auto;
  padding: .8em 1.5em;
  border: thin #000 solid;
  background-color:#fff;
  z-index:101;
  position:fixed;
  top:-100%;
  left:25%;
  overflow: hidden;
  @include fastTransition-all;
  @include mediaQuery(medium) {
    padding: 2.5em;
  }
}

.modal.active{
  top: 25%;
  @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;
    }
  }
}