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

.modal {position:absolute;display:none;overflow:hidden;width:95%;max-width:700px;background:#000;opacity:0;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:50px 20px}
.modal--no-padding .modal__content {padding:0;}
.modal__button-close {display:block;position:absolute;top:15px;right:15px;width:17px;height:17px;z-index:9;cursor:pointer}
.modal__button-close::before, .modal__button-close::after {position:absolute;width:1px;height:17px;left:8px;background-color:#ccc;content:'';}
.modal__button-close::before {transform: rotate(45deg);}
.modal__button-close::after {transform: rotate(-45deg);}
.modal__spinner {display:block;position:fixed;top:50%;left:50%;z-index:99;}
.modal__spinner--default {width:30px;height:30px;margin:-15px -15px 0 0;background:#000;animation: spinner-rotating-plane 1.2s infinite ease-in-out;}
 

@media screen and (max-width:864px) {
.modal {width:100%;max-width:100% !important;}
}


@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%; } }