// Vertically centers the popups
.mfp-container
  display: table

  .mfp-content
    display: table-cell
    vertical-align: middle
    position: relative

// TODO: Adds fake transparent blocker behind popup. Should be removed once JS is active
.ae-popup
  width: 60%
  background: #fff
  margin: 2em auto
  padding: 1em
  position: relative
  @include border-radius(6px)
  @include animate(1s)

  .ae-popup-header
    padding:
      right: 1em
      left: 1em
      bottom: 1em
    position: relative
    border-bottom: 1px solid $border-light
    @include border-radius(6px 6px 0 0)

  .ae-popup-title
    padding-right: 1em

  .ae-popup-close
    position: absolute
    right: 1em
    top: 1em
    text-decoration: none

  .ae-popup-content
    padding: 1em
    max-height: 500px
    overflow: scroll

  .ae-popup-footer
    padding: 0 1em
    overflow: hidden

    .mfp-close
      position: relative
      width: auto
      height: auto
      line-height: 100%
      font-size: inherit
      @include body-font

  @include tablet-max
    width: 90% !important

.mfp-fade
  transition: all 0.55s ease-out

.mfp-fade.mfp-bg.mfp-ready
  opacity: 0.8

.mfp-fade.mfp-bg.mfp-removing
  opacity: 0

.mfp-fade.mfp-wrap .mfp-content
  opacity: 0
  transition: all 0.55s ease-out

.mfp-fade.mfp-wrap.mfp-ready .mfp-content
  opacity: 1

.mfp-fade.mfp-wrap.mfp-removing .mfp-content
  opacity: 0

.ae-popup-sm
  width: 40%

.ae-popup-md
  width: 60%

.ae-popup-lg
  width: 80%