.modal.fade.modal-animate {
  z-index:1072!important;
  /* Effect 1: Fade in and scale up */
  /* Effect 2: Slide from the right */
  /* Effect 3: Slide from the bottom */
  /* Effect 4: Newspaper */
  /* Effect 5: fall */
  /* Effect 6: side fall */
  /* Effect 7:  slide and stick to top */
  /* Effect 8: 3D flip horizontal */
  /* Effect 9: 3D flip vertical */
  /* Effect 10: 3D sign */
  /* Effect 11: Super scaled */
  /* Effect 12:  Just me */
  /* Effect 13: 3D slit */
  /* Effect 14:  3D Rotate from bottom */
  /* Effect 15:  3D Rotate in from left */
  /* Effect 16:  Blur */
  /* Effect 17:  Slide in from bottom with perspective on container */
  /* Effect 18:  Slide from right with perspective on container */
  /* Effect 19:  Slip in from the top with perspective on container */
}

.modal.fade.modal-animate .modal-dialog {
    display: flex;
    align-items: center;
    height: calc(100% - 3.5rem);
}
.modal.fade.modal-animate.anim-fade-in-scale .modal-dialog {
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.3s;
}

.modal.fade.modal-animate.anim-fade-in-scale.show .modal-dialog {
    transform: none;
    opacity: 1;
}

.modal.fade.modal-animate.anim-slide-in-right .modal-dialog {
    transform: translateX(20%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.modal.fade.modal-animate.anim-slide-in-right.show .modal-dialog {
    transform: translateX(0);
    opacity: 1;
}

.modal.fade.modal-animate.anim-slide-in-bottom .modal-dialog {
    transform: translateY(20%);
    opacity: 0;
    transition: all 0.3s;
}

.modal.fade.modal-animate.anim-slide-in-bottom.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}

.modal.fade.modal-animate.anim-newspaper .modal-dialog {
    transform: scale(0) rotate(720deg);
    opacity: 0;
    transition: all 0.5s;
}

.modal.fade.modal-animate.anim-newspaper.show .modal-dialog {
    transform: none;
    opacity: 1;
}

.modal.fade.modal-animate.anim-fall {
    perspective: 1300px;
}

.modal.fade.modal-animate.anim-fall .modal-dialog {
    transform-style: preserve-3d;
    transform: translateZ(600px) rotateX(20deg);
    opacity: 0;
    transition: all 0.5s;
}

.modal.fade.modal-animate.anim-fall.show .modal-dialog {
    transition: all 0.3s ease-in;
    transform: translateZ(0px) rotateX(0deg);
    opacity: 1;
}

.modal.fade.modal-animate.anim-side-fall {
    perspective: 1300px;
}

.modal.fade.modal-animate.anim-side-fall .modal-dialog {
    transform-style: preserve-3d;
    transform: translate(30%) translateZ(600px) rotate(10deg);
    opacity: 0;
    transition: all 0.3s ease-in;
}

.modal.fade.modal-animate.anim-side-fall.show .modal-dialog {
    transform: translate(0%) translateZ(0) rotate(0deg);
    opacity: 1;
}

.modal.fade.modal-animate.anim-sticky-up .modal-dialog {
    align-items: flex-start;
    margin-top: 0;
    transform: translateY(-200%);
    transition: all .3s;
    opacity: 0;
}

.modal.fade.modal-animate.anim-sticky-up.show .modal-dialog {
    transform: translateY(0%);
    border-radius: 0 0 3px 3px;
    opacity: 1;
}

.modal.fade.modal-animate.anim-3d-flip-horizontal {
    perspective: 1300px;
}

.modal.fade.modal-animate.anim-3d-flip-horizontal .modal-dialog {
    transform-style: preserve-3d;
    transform: rotateY(-70deg);
    transition: all 0.3s;
    opacity: 0;
}

.modal.fade.modal-animate.anim-3d-flip-horizontal.show .modal-dialog {
    transform: rotateY(0deg);
    opacity: 1;
}

.modal.fade.modal-animate.anim-3d-flip-vertical {
    perspective: 1300px;
}

.modal.fade.modal-animate.anim-3d-flip-vertical .modal-dialog {
    transform-style: preserve-3d;
    transform: rotateX(-70deg);
    transition: all 0.3s;
    opacity: 0;
}

.modal.fade.modal-animate.anim-3d-flip-vertical.show .modal-dialog {
    transform: rotateX(0deg);
    opacity: 1;
}

.modal.fade.modal-animate.anim-3d-sign {
    perspective: 1300px;
}

.modal.fade.modal-animate.anim-3d-sign .modal-dialog {
    transform-style: preserve-3d;
    transform: rotateX(-60deg);
    transform-origin: 50% 0;
    opacity: 0;
    transition: all 0.3s;
}

.modal.fade.modal-animate.anim-3d-sign.show .modal-dialog {
    transform: rotateX(0deg);
    opacity: 1;
}

.modal.fade.modal-animate.anim-super-scaled .modal-dialog {
    transform: scale(2);
    opacity: 0;
    transition: all 0.3s;
}

.modal.fade.modal-animate.anim-super-scaled.show .modal-dialog {
    transform: scale(1);
    opacity: 1;
}

.modal.fade.modal-animate.anim-just-me {
    background: #fff;
}

.modal.fade.modal-animate.anim-just-me .modal-dialog {
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.3s;
    background: transparent;
}

.modal.fade.modal-animate.anim-just-me .modal-dialog .modal-content {
    border: none;
}

.modal.fade.modal-animate.anim-just-me .modal-dialog .modal-content .modal-header {
    background: transparent !important;
}

.modal.fade.modal-animate.anim-just-me .modal-dialog .modal-content .modal-header .btn-close.btn-close-white {
    filter: none;
}

.modal.fade.modal-animate.anim-just-me .modal-dialog .modal-content .modal-header .text-white.modal-title {
    color: #222 !important;
}

.modal.fade.modal-animate.anim-just-me.show .modal-dialog {
    transform: scale(1);
    opacity: 1;
}

.modal.fade.modal-animate.anim-3d-slit {
    perspective: 1300px;
}

.modal.fade.modal-animate.anim-3d-slit .modal-dialog {
    transform-style: preserve-3d;
    transform: translateZ(-3000px) rotateY(90deg);
    opacity: 0;
}

.modal.fade.modal-animate.anim-3d-slit.show .modal-dialog {
    -webkit-animation: slit .7s forwards ease-out;
    animation: slit .7s forwards ease-out;
}

.modal.fade.modal-animate.anim-3d-rotate-bottom {
    perspective: 1300px;
}

.modal.fade.modal-animate.anim-3d-rotate-bottom .modal-dialog {
    transform-style: preserve-3d;
    transform: translateY(100%) rotateX(90deg);
    transform-origin: 0 100%;
    opacity: 0;
    transition: all 0.3s ease-out;
}

.modal.fade.modal-animate.anim-3d-rotate-bottom.show .modal-dialog {
    transform: translateY(0%) rotateX(0deg);
    opacity: 1;
}

.modal.fade.modal-animate.anim-3d-rotate-InLeft {
    perspective: 1300px;
}

.modal.fade.modal-animate.anim-3d-rotate-InLeft .modal-dialog {
    transform-style: preserve-3d;
    transform: translateZ(100px) translateX(-30%) rotateY(90deg);
    transform-origin: 0 100%;
    opacity: 0;
    transition: all 0.3s;
}

.modal.fade.modal-animate.anim-3d-rotate-InLeft.show .modal-dialog {
    transform: translateZ(0px) translateX(0%) rotateY(0deg);
    opacity: 1;
}

.modal.fade.modal-animate.anim-blur {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.modal.fade.modal-animate.anim-blur .modal-dialog {
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.3s;
}

.modal.fade.modal-animate.anim-blur.show .modal-dialog {
    transform: none;
    opacity: 1;
}

.modal.fade.modal-animate.anim-let-me-in .modal-dialog {
    opacity: 0;
    transform: translateY(200%);
    transition: all 0.3s 0.2s;
}

.modal.fade.modal-animate.anim-let-me-in.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}

.modal.fade.modal-animate.anim-make-way .modal-dialog {
    opacity: 0;
    transform: translateX(200%);
    transition: all 0.3s 0.2s;
}

.modal.fade.modal-animate.anim-make-way.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}

.modal.fade.modal-animate.anim-slip-from-top .modal-dialog {
    opacity: 0;
    transform: translateY(-200%);
    transition: all 0.5s 0.1s;
}

.modal.fade.modal-animate.anim-slip-from-top.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}
body.anim-let-me-in {
    perspective: 600px;
    overflow: hidden;
    height: 100vh;
}
body.anim-let-me-in .pgheader {display: none;}
body.anim-let-me-in .pgheader, body.anim-let-me-in .modal-backdrop {transition: transform 0.3s;}
body.anim-let-me-in.modal-open .pgheader, body.anim-let-me-in.modal-open .modal-backdrop {
    transform: rotateX(-3deg);
    transform-origin: 50% 0%;
    transform-style: preserve-3d;
}
body.anim-make-way {
    perspective: 600px;
    overflow: hidden;
    height: 100vh;
}
body.anim-make-way .pgheader{display: none;}
body.anim-make-way .pgheader, body.anim-make-way .modal-backdrop {   transition: all 0.5s;}
body.anim-make-way.modal-open .pgheader, body.anim-make-way.modal-open .modal-backdrop {
    transform-style: preserve-3d;
    transform-origin: 0% 50%;
    -webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
    animation: rotateRightSideFirst 0.5s forwards ease-in;
}
body.anim-slip-from-top {
    perspective: 600px;
    overflow: hidden;
    height: 100vh;
}
body.anim-slip-from-top .pgheader {display: none;}
body.anim-slip-from-top .pgheader, body.anim-slip-from-top .modal-backdrop {
    transition: all 0.5s;
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    -webkit-animation: OpenTop 1.5s forwards ease-in;
    animation: OpenTop 1.5s forwards ease-in;
}
body.anim-slip-from-top.modal-open .pgheader {opacity: 0;}
@-webkit-keyframes slit {
    50% {transform: translateZ(-250px) rotateY(89deg);opacity: 1;-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}
    100% {transform: translateZ(0) rotateY(0deg);opacity: 1;}
}

@keyframes slit {
    50% {transform: translateZ(-250px) rotateY(89deg);opacity: 1;-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}
    100% {transform: translateZ(0) rotateY(0deg);opacity: 1;}
}
@-webkit-keyframes rotateRightSideFirst {
    50% {transform: translateZ(-50px) rotateY(5deg);-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;}
    100% {transform: translateZ(-200px);}
}
@keyframes rotateRightSideFirst {
    50% {transform: translateZ(-50px) rotateY(5deg);-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;}
    100% {transform: translateZ(-200px);}
}
@-webkit-keyframes OpenTop {
    50% {transform: rotateX(10deg);-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;}
}
@keyframes OpenTop {
	50% {transform: rotateX(10deg);-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;}
}
@media screen and (max-width: 640px) {
	.modal.fade.modal-animate .modal-dialog {height:100%;}
}