.ast-modal {
    visibility: hidden; /* hide the modal by default */
    position: fixed; /* keep the modal in the center of the screen */
    z-index: 100; /* ensure that the modal is on top of other elements */
    left: 0;
    top: 0;
    width: 100%; /* take up the full width and height of the screen */
    height: 100%;
    overflow: auto; /* enable scrolling if the modal's content is taller than the screen */
    background-color: rgb(0, 0, 0); /* make the background semi-transparent */
    background-color: rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    opacity : 0;
  }
  .ast-modal-panel {
    background-color: #fefefe;
    margin: 15% auto; /* center the modal in the middle of the screen */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* set the modal's width */
    position : relative;
  }
  .ast-modal-show {
    opacity: 1;
    visibility: visible;
 }
 .ast-modal-from-top{
    top : -100%;
 }

 .ast-modal-rotate{
    transform : rotate(180deg);
 }
 .ast-modal-rotate.ast-modal-show{
   transform : rotate(0deg);
  }
  .ast-modal-from-top.ast-modal-show{
    top: 0;
  }

  .ast-modal-whirlwind.ast-modal-show{
    transform : rotate3d(1,1,1,0deg) scale(1);
    left: 0;
    top: 0;
  }
  .ast-modal-whirlwind{
    transform: rotate3d(27, 17, 10, 720deg) scale(0);
    top : -100%;
    left : -100%;
  }
  .ast-modal-diagonal-flip{
    transform: rotate3d(3, 3, 3, 360deg) scale(0);
  }
  .ast-modal-diagonal-flip.ast-modal-show{
    transform : rotate3d(1,1,1,0deg) scale(1);
  }

 .ast-modal-close{
    color: #efefef;
    float: right;
    font-size: 23px;
    top: -19px;
    position: absolute;
    right: -18px;
    padding: 0px 8px;
    cursor : pointer;
 }
 .ast-modal-close>i::after{
    opacity : 0.8;
    color: #950000;
 }