.popup-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,0.65);
  z-index: 999;
  display: none;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 102;
  background-color: transparent;
  overflow: auto;
  margin: auto;
}

.popup .popup-body {
  max-height: calc(80vh);
  overflow-y: auto;
}

.popup-veil {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 100;
  background-color: #000;
  opacity: 0.65;
}

/************** SMALL **************/

@media only screen and (max-width: 600px) {
  .popup-xl {
    width: 90%!important;
  }
  .popup-l {
    width: 90%!important;
  }
  .popup-m {
    width: 90%!important;
  }
  .popup-s {
    width: 90%!important;
  }
}

/************** MEDIUM *************/

@media only screen and (min-width: 601px) and (max-width: 992px) {
  .popup-xl {
    width: 90%!important;
  }
  .popup-l {
    width: 70%!important;
  }
  .popup-m {
    width: 70%!important;
  }
  .popup-s {
    width: 70%!important;
  }
}

/************** LARGE **************/

@media only screen and (min-width: 993px) and (max-width: 1200px) {
  .popup-xl {
    width: 90%!important;
  }
  .popup-l {
    width: 70%!important;
  }
  .popup-m {
    width: 50%!important;
  }
  .popup-s {
    width: 50%!important;
  }
}

/************** XLARGE *************/

@media only screen and (min-width: 1201px) {
  .popup-xl {
    width: 90%!important;
  }
  .popup-l {
    width: 70%!important;
  }
  .popup-m {
    width: 50%!important;
  }
  .popup-s {
    width: 30%!important;
  }
}