#tp-block-modal-container.tp-animation-open {
  -webkit-animation-name: silde_to_middle;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes silde_to_middle {
  0% {
    top: 100%;
  }
  100% {
    top: 50%;
  }
}

#tp-block-modal-backdrop.tp-animation-open {
  background: rgba(0, 0, 0, 0);
  animation: tp-block-modal-fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
    forwards;
}

[data-block-name="acf/step-form-with-progress-bar"] [data-step] {
  animation: tp-step-form-with-progress-bar-fadeIn 0.75s;
}

.tp-step-form-with-progress-bar-fadeOut {
  animation: tp-step-form-with-progress-bar-fadeOut 0.75s;
}

@keyframes tp-step-form-with-progress-bar-fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes tp-step-form-with-progress-bar-fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes tp-block-modal-fadeIn {
  0% {
    background: rgba(0, 0, 0, 0);
  }

  100% {
    background: rgba(0, 0, 0, 0.7);
  }
}

#tp-block-modal-backdrop.tp-animation-close {
  animation: tp-block-modal-fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
    forwards;
}

@keyframes tp-block-modal-fadeOut {
  0% {
    background: rgba(0, 0, 0, 0.7);
  }

  100% {
    background: rgba(0, 0, 0, 0);
  }
}

#tp-block-modal-container.tp-animation-close {
  -webkit-animation-name: silde_to_down;
  -webkit-animation-duration: 0.2s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes silde_to_down {
  0% {
    top: 50%;
  }
  100% {
    top: 100%;
  }
}