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

.modal {
  position: absolute;
  display: none;
  overflow: hidden;
  max-width: 90%;
  opacity: 0;
  background-color: #fff;
  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;
    z-index: 1;
    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% {
    opacity: 0;
    transform: scale(1); } }

/* Vertical alignment classes */
.modal--active.modal--vertical-align-top {
  top: 50px;
  left: 50%;
  margin-bottom: 50px;
  transform: translateX(-50%); }

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

/* Compound effect/alignment classes */
.modal--active.modal--effect-scale.modal--vertical-align-center {
  animation-name: modal--effect-scale-center;
  animation-duration: 0.25s; }

.modal--active.modal--effect-scale.modal--vertical-align-top {
  animation-name: modal--effect-scale-top;
  animation-duration: 0.25s; }

.modal--active.modal--effect-slideinbottom.modal--vertical-align-top {
  animation-name: modal--effect-slideinbottom-top;
  animation-duration: 0.25s; }

.modal--active.modal--effect-slideinbottom.modal--vertical-align-center {
  animation-name: modal--effect-slideinbottom-center;
  animation-duration: 0.25s; }

.modal--active.modal--effect-slideinright.modal--vertical-align-top {
  animation-name: modal--effect-slideinright-top;
  animation-duration: 0.25s; }

.modal--active.modal--effect-slideinright.modal--vertical-align-center {
  animation-name: modal--effect-slideinright-center;
  animation-duration: 0.25s; }

@keyframes modal--effect-scale-center {
  0% {
    transform: scale(0.7) translate(-50%, -50%);
    transform-origin: 0% 0%; }
  100% {
    transform: scale(1) translate(-50%, -50%);
    transform-origin: 0% 0%; } }

@keyframes modal--effect-scale-top {
  0% {
    transform: scale(0.7) translateX(-50%);
    transform-origin: 0% 50%; }
  100% {
    transform: scale(1) translateX(-50%);
    transform-origin: 0% 50%; } }

@keyframes modal--effect-slideinbottom-top {
  0% {
    transform: translate(-50%, 20%);
    transform-origin: 0% 50%; }
  100% {
    transform: translate(-50%, 0);
    transform-origin: 0% 50%; } }

@keyframes modal--effect-slideinbottom-center {
  0% {
    transform: translate(-50%, 20%);
    transform-origin: 0% 50%; }
  100% {
    transform: translate(-50%, -50%);
    transform-origin: 0% 50%; } }

@keyframes modal--effect-slideinright-top {
  0% {
    transform: translateX(20%);
    transform-origin: 0% 0%; }
  100% {
    transform: translateX(-50%);
    transform-origin: 0% 0%; } }

@keyframes modal--effect-slideinright-center {
  0% {
    transform: translate(20%, -50%);
    transform-origin: 0% 0%; }
  100% {
    transform: translate(-50%, -50%);
    transform-origin: 0% 0%; } }