.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: auto; }

.modal {
  position: absolute;
  z-index: 102;
  display: none;
  max-width: 90%;
  background-color: #fff;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out; }
  .modal--active {
    display: block;
    opacity: 1; }
  .modal--transparent {
    background: transparent; }
  .modal__content {
    padding: 45px; }
  .modal--no-padding .modal__content {
    padding: 0; }
  .modal__button-close {
    position: absolute;
    top: 15px;
    right: 15px;
    display: block;
    width: 17px;
    height: 17px;
    cursor: pointer; }
    .modal__button-close:before, .modal__button-close:after {
      position: absolute;
      left: 8px;
      width: 1px;
      height: 17px;
      background-color: #000;
      content: ''; }
    .modal__button-close:before {
      transform: rotate(45deg); }
    .modal__button-close:after {
      transform: rotate(-45deg); }
  .modal__spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 101;
    display: none; }
    .modal__spinner--default {
      margin: -15px -15px 0 0;
      width: 30px;
      height: 30px;
      background-color: #000;
      animation: spinner-rotating-plane 1.2s infinite ease-in-out; }

@keyframes spinner-rotating-plane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
    .modal__spinner--pulse {
      margin: -20px -20px 0 0;
      width: 40px;
      height: 40px;
      border-radius: 100%;
      background-color: #000;
      animation: spinner-pulse 1s infinite ease-in-out; }

@keyframes spinner-pulse {
  0% {
    transform: scale(0.5); }
  100% {
    transform: scale(1);
    opacity: 0; } }

.modal--effect-scale {
  transform: scale(0.7);
  opacity: 0; }

.modal--active.modal--effect-scale {
  transform: scale(1);
  opacity: 1; }

.modal--effect-slideinright {
  transform: translateX(20%);
  opacity: 0; }

.modal--active.modal--effect-slideinright {
  transform: translateX(0);
  opacity: 1; }

.modal--effect-slideinbottom {
  transform: translateY(20%);
  opacity: 0; }

.modal--active.modal--effect-slideinbottom {
  transform: translateY(0);
  opacity: 1; }

.modal--active.modal--vertical-align-top {
  top: 50px;
  left: 50%;
  margin-bottom: 50px;
  transform: translate3d(-50%, 0, 0); }

.modal--active.modal--vertical-align-center {
  top: 50%;
  left: 50%;
  margin-bottom: 0;
  transform: translate3d(-50%, -50%, 0); }