Untitled

/* Animation style start */
.wopb-modal-wrap.wopb-compare-modal-wrap {
  &.unfold {
    transform: scaleY(0.01) scaleX(0);
    animation: wopbUnfold 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    .wopb-modal-body-wrap {
      .wopb-modal-body {
        transform: scale(0);
        animation: wopbZoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      }
    }
  }
  &.fold {
    transform: scale(1);
    animation: wopbFold 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    .wopb-modal-body-wrap {
      .wopb-modal-body {
        animation: wopbZoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      }
    }
  }
  &.zoom_in {
    .wopb-modal-body-wrap {
      transform: scale(0);
      animation: wopbZoomIn 0.8s 0.15s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
  }
  &.zoom_out {
    transform: scale(1);
    animation: wopbZoomOut 0.01s 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    .wopb-modal-body-wrap {
      animation: wopbZoomOut 0.8s 0.15s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
  }
  &.fade_in {
    .wopb-modal-body-wrap {
      animation: wopbFadeIn 1.6s forwards;
    }
  }
  &.fade_out {
    animation: wopbZoomOut 0s 1s forwards;
    .wopb-modal-body-wrap {
      animation: wopbFadeOut 1.6s forwards;
    }
  }
  &.shrink_in {
    .wopb-modal-body-wrap {
      animation: wopbShrinkIn 1s forwards;
    }
  }
  &.shrink_out {
    animation: wopbZoomOut 0s 1s forwards;
    .wopb-modal-body-wrap {
      animation: wopbShrinkOut 1s forwards;
    }
  }
  &.flip_in {
    .wopb-modal-body-wrap {
      animation: wopbFlipIn 0.8s forwards;
    }
  }
  &.flip_out {
    animation: wopbZoomOut 0s 0.8s forwards;
    .wopb-modal-body-wrap {
      animation: wopbFlipOut 0.8s forwards;
    }
  }
  &.slide_up_in {
    .wopb-modal-body-wrap {
      animation: wopbSlideUpIn 0.8s forwards;
    }
  }
  &.slide_down_in {
    .wopb-modal-body-wrap {
      animation: wopbSlideDownIn 0.8s forwards;
    }
  }
  &.slide_up_out {
    animation: wopbZoomOut 0s 0.8s forwards;
    .wopb-modal-body-wrap {
      animation: wopbSlideUpOut 0.8s forwards;
    }
  }
  &.slide_down_out {
    animation: wopbZoomOut 0s 0.8s forwards;
    .wopb-modal-body-wrap {
      animation: wopbSlideDownOut 0.8s forwards;
    }
  }
  &.slide_left_in {
    .wopb-modal-body-wrap {
      animation: wopbSlideLeftIn 0.8s forwards;
    }
  }
  &.slide_right_in {
    .wopb-modal-body-wrap {
      animation: wopbSlideRightIn 0.8s forwards;
    }
  }
  &.slide_left_out {
    animation: wopbZoomOut 0s 0.8s forwards;
    .wopb-modal-body-wrap {
      animation: wopbSlideLeftOut 0.8s forwards;
    }
  }
  &.slide_right_out {
    animation: wopbZoomOut 0s 0.8s forwards;
    .wopb-modal-body-wrap {
      animation: wopbSlideRightOut 0.8s forwards;
    }
  }
  &.blow_up {
    transform: scale(1);
    .wopb-modal-body {
      animation: wopbBlowUpTable 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
  }
  &.blow_down {
    animation: wopbBlowDownTable 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  }
}
// this part is for scale up/down the content of the page when blow up/down animation applied to the modal.
body {
  &:has(.blow_up) {
    #main-container,
    .site-content {
      animation: wopbBlowUpContent 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
  }
  &:has(.blow_down) {
    #main-container,
    .site-content {
      animation: wopbBlowDownContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
      forwards;
    }
  }
}
/* Animation style end */




/* Animation Keyframe Start */
@keyframes wopbFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes wopbFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes wopbShrinkIn {
    0% {
        transform: scale(2);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes wopbShrinkOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
@keyframes wopbFlipIn {
    0% {
        transform: perspective(400px) rotateY(-90deg);
        opacity: 0;
    }
    100% {
        transform: perspective(400px) rotateY(0);
        opacity: 1;
    }
}
@keyframes wopbFlipOut {
    0% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
    100% {
        transform: perspective(400px) rotateY(-90deg);
        opacity: 0;
    }
}
@keyframes wopbSlideUpIn {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes wopbSlideUpOut {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}
@keyframes wopbSlideDownIn {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes wopbSlideDownOut {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}
@keyframes wopbSlideLeftOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}
@keyframes wopbSlideLeftIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes wopbSlideRightIn {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes wopbSlideRightOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}
@keyframes wopbZoomIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes wopbZoomOut {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}
@keyframes wopbUnfold {
    0% {
        transform: scaleY(0.005) scaleX(0);
    }
    50% {
        transform: scaleY(0.005) scaleX(1);
    }
    100% {
        transform: scaleY(1) scaleX(1);
    }
}
@keyframes wopbFold {
    0% {
        transform: scaleY(1) scaleX(1);
    }
    50% {
        transform: scaleY(0.005) scaleX(1);
    }
    100% {
        transform: scaleY(0.005) scaleX(0);
    }
}
@keyframes wopbBlowUpContent {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(2);
    }
}
@keyframes wopbBlowDownContent {
    0% {
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes wopbBlowUpTable {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes wopbBlowDownTable {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}
@keyframes demoLoading {
    100% {
        transform: translateX(100%);
    }
}
@keyframes wopbRotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes wopbRotationBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
@keyframes wopbScaleTo1 {
    0% {
        transform: scale(0.3);
    }
    100% {
        transform: scale(2);
    }
}
@keyframes wopbFillUp {
    0%,
    20% {
        width: 101%;
    }
    80%,
    100% {
        width: 0%;
    }
}
@keyframes wopbUpDownPendulum {
    10%,
    90% {
        width: 100%;
        transform: translateY(80px);
    }
    20%,
    80% {
        width: 8%;
    }
    45%,
    65% {
        width: 100%;
        transform: translateY(32px);
    }
}
@keyframes wopbSpin360 {
    0%,
    25% {
        transform: rotate(0deg);
    }
    50%,
    75% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* Animation Keyframe End */