/* vayu animation */

@keyframes flash {

    0%,
    50%,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

.flash {
    animation-name: flash
}

@keyframes shake {

    0%,
    to {
        transform: translateX(0);
        opacity: 1
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-10px)
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(10px)
    }
}

.shake {
    animation-name: shake
}

@keyframes rubberBand {

    0%,
    to {
        transform: scale3d(1, 1, 1)
    }

    30% {
        transform: scale3d(1.25, 0.75, 1)
    }

    40% {
        transform: scale3d(0.75, 1.25, 1)
    }

    50% {
        transform: scale3d(1.15, 0.85, 1)
    }

    65% {
        transform: scale3d(0.95, 1.05, 1)
    }

    75% {
        transform: scale3d(1.05, 0.95, 1)
    }
}

.rubberBand {
    animation-name: rubberBand
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    to {
        transform: translateY(0);
        opacity: 1
    }

    40% {
        transform: translateY(-30px)
    }

    60% {
        transform: translateY(-15px)
    }
}

.bounce {
    animation-name: bounce
}

@keyframes bouncebtn {

    0%,
    20%,
    50%,
    80%,
    to {
        transform: translateY(0);
        opacity: 1
    }

    40% {
        transform: translateY(-5px)
    }

    60% {
        transform: translateY(-2px)
    }
}

@keyframes tada {
    0% {
        transform: scale(1)
    }

    10%,
    20% {
        transform: scale(0.9) rotate(-3deg)
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale(1.1) rotate(3deg)
    }

    40%,
    60%,
    80% {
        transform: scale(1.1) rotate(-3deg)
    }

    to {
        transform: scale(1) rotate(0);
        opacity: 1
    }
}

.tada {
    animation-name: tada
}

@keyframes swing {
    20% {
        transform: rotate(15deg)
    }

    40% {
        transform: rotate(-10deg)
    }

    60% {
        transform: rotate(5deg)
    }

    80% {
        transform: rotate(-5deg)
    }

    to {
        transform: rotate(0deg);
        opacity: 1
    }
}

.swing {
    transform-origin: top center;
    animation-name: swing
}

@keyframes wobble {
    0% {
        transform: translateX(0%)
    }

    15% {
        transform: translateX(-25%) rotate(-5deg)
    }

    30% {
        transform: translateX(20%) rotate(3deg)
    }

    45% {
        transform: translateX(-15%) rotate(-3deg)
    }

    60% {
        transform: translateX(10%) rotate(2deg)
    }

    75% {
        transform: translateX(-5%) rotate(-1deg)
    }

    to {
        transform: translateX(0%);
        opacity: 1
    }
}

.wobble {
    animation-name: wobble
}

@keyframes wiggle {
    0% {
        transform: skewX(9deg)
    }

    10% {
        transform: skewX(-8deg)
    }

    20% {
        transform: skewX(7deg)
    }

    30% {
        transform: skewX(-6deg)
    }

    40% {
        transform: skewX(5deg)
    }

    50% {
        transform: skewX(-4deg)
    }

    60% {
        transform: skewX(3deg)
    }

    70% {
        transform: skewX(-2deg)
    }

    80% {
        transform: skewX(1deg)
    }

    90% {
        transform: skewX(0deg)
    }

    to {
        transform: skewX(0deg);
        opacity: 1
    }
}

.wiggle {
    animation-name: wiggle;
    animation-timing-function: ease-in
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.pulse {
    animation: 1s pulse infinite
}

  
@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    animation-name: fadeIn
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadeInUp {
    animation-name: fadeInUp
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadeInDown {
    animation-name: fadeInDown
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-40px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.fadeInLeft {
    animation-name: fadeInLeft
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(40px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.fadeInRight {
    animation-name: fadeInRight
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        transform: translateY(2000px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadeInUpBig {
    animation-name: fadeInUpBig
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        transform: translateY(-2000px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadeInDownBig {
    animation-name: fadeInDownBig
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        transform: translateX(-2000px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.fadeInLeftBig {
    animation-name: fadeInLeftBig
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        transform: translateX(2000px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.fadeInRightBig {
    animation-name: fadeInRightBig
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3)
    }

    50% {
        opacity: 1;
        transform: scale(1.05)
    }

    70% {
        transform: scale(0.9)
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.bounceIn {
    animation-name: bounceIn
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(2000px)
    }

    60% {
        opacity: 1;
        transform: translateY(-30px)
    }

    80% {
        transform: translateY(10px)
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.bounceInUp {
    animation-name: bounceInUp
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-2000px)
    }

    60% {
        opacity: 1;
        transform: translateY(30px)
    }

    80% {
        transform: translateY(-10px)
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.bounceInDown {
    animation-name: bounceInDown
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translateX(-2000px)
    }

    60% {
        opacity: 1;
        transform: translateX(30px)
    }

    80% {
        transform: translateX(-10px)
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

.bounceInLeft {
    animation-name: bounceInLeft
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(2000px)
    }

    60% {
        opacity: 1;
        transform: translateX(-30px)
    }

    80% {
        transform: translateX(10px)
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

.bounceInRight {
    animation-name: bounceInRight
}

@keyframes rotateIn {
    0% {
        transform-origin: center center;
        transform: rotate(-200deg);
        opacity: 0
    }

    to {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1
    }
}

.rotateIn {
    animation-name: rotateIn
}

@keyframes rotateInUpLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0
    }

    to {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInUpLeft {
    animation-name: rotateInUpLeft
}

@keyframes rotateInDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0
    }

    to {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInDownLeft {
    animation-name: rotateInDownLeft
}

@keyframes rotateInUpRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0
    }

    to {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInUpRight {
    animation-name: rotateInUpRight
}

@keyframes rotateInDownRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0
    }

    to {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
}

.rotateInDownRight {
    animation-name: rotateInDownRight
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.3)
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.zoomIn {
    animation-name: zoomIn
}

@keyframes slideInRight {
    0% {
        opacity: 1;
        transform: translateX(2000px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.slideInRight {
    animation-name: slideInRight
}

@keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.slideInUp {
    animation-name: slideInUp
}

@keyframes slideOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0)
    }

    to {
        opacity: 1;
        transform: translateX(-2000px)
    }
}

.slideOutLeft {
    animation-name: slideOutLeft
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(359deg)
    }
}

@keyframes wave {
    0% {
        transform: rotateZ(0deg) translate3d(0, 10%, 0) rotateZ(0deg)
    }

    to {
        transform: rotateZ(360deg) translate3d(0, 10%, 0) rotateZ(-360deg)
    }
}

@keyframes navItemArrow {
    0% {
        position: relative;
        right: -1px
    }

    50% {
        position: relative;
        right: 3px
    }

    to {
        position: relative;
        right: -1px
    }
}

@keyframes arrowLeftRight {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(3px)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }

    60% {
        opacity: 1;
        transform: translateY(20%)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slide-out {
    0% {
        opacity: 1;
        transform: translateY(0)
    }

    60% {
        opacity: 0;
        transform: translateY(120%)
    }

    to {
        opacity: 0;
        transform: translateY(100%)
    }
}

@keyframes maskUp {
    0% {
        transform: translate(0, 100%)
    }

    to {
        transform: translate(0, 0)
    }
}

.maskUp {
    animation-name: maskUp
}

@keyframes sliderScrollButton {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0)
    }

    70% {
        opacity: 1;
        -webkit-transform: translate3d(-50%, 10px, 0);
        transform: translate3d(-50%, 10px, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 10px, 0);
        transform: translate3d(-50%, 10px, 0)
    }
}

@keyframes gradientTransition {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }

    to {
        background-position: 0 50%
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-101%);
        visibility: visible
    }

    to {
        transform: translateX(0)
    }
}

.slideInLeft {
    animation-name: slideInLeft
}

@keyframes topDown {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transition-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transition-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }

    to {
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: flipInX
}

@keyframes flipInY {
    0% {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transition-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transition-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
    }

    to {
        transform: perspective(400px)
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: flipInY
}

.highlight {
    position: relative;
    animation-name: highlightAnim;
    background-size: 200%;
    background-position: 0;
    transition: background-position .8s;
    background-image: linear, 90deg, rgba(255, 255, 255, 0) 50%, rgba(0, 136, 204, 0.2) 0
}

@keyframes highlightAnim {
    0% {
        background-position: 0
    }

    to {
        background-position: -100%
    }
}

@keyframes highlightProgress {
    0% {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes highlightShape {
    0% {
        stroke-dashoffset: 1500;
        opacity: 0
    }

    1% {
        opacity: 1
    }

    to {
        stroke-dashoffset: 0;
        opacity: 1
    }
}

.blinker-effect {
    animation: blinker 1s linear infinite
}

@keyframes blinker {
    50% {
        opacity: .4
    }
}

.rotate-effect {
    animation: rotate-animation 10s linear infinite
}

@keyframes rotate-animation {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(180deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes revealContent {
    0% {
        visibility: hidden
    }

    50% {
        visibility: hidden
    }

    50.1% {
        visibility: visible
    }
}

@keyframes revealSubContent {
    0% {
        opacity: 0
    }

    50% {
        opacity: 0
    }

    50.1% {
        opacity: 1
    }
}

[class*=revealDir] {
    position: relative;
    overflow: hidden !important;
    animation-duration: var(--vayu-reveal-animation-duration, 1s);
    animation-delay: var(--vayu-reveal-animation-delay, 0s);
    animation-fill-mode: both;
    animation-name: revealContent;
    animation-timing-function: linear
}

[class*=revealDir] > * {
    animation-duration: inherit;
    animation-delay: inherit;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-name: revealSubContent
}

[class*=revealDir]:after {
    display: block !important;
    content: "" !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--vayu-reveal-clr, #0155b5);
    position: absolute;
    z-index: 1000;
    animation-duration: inherit;
    animation-delay: inherit;
    animation-fill-mode: both;
    visibility: visible;
    animation-timing-function: linear
}

.revealDirTop.animated:after,
[data-appear-animation^=revealDir].revealDirTop:after {
    animation-name: blockSlideToTop
}

.revealDirLeft.animated:after,
[data-appear-animation^=revealDir].revealDirLeft:after {
    animation-name: blockSlideToLeft
}

.revealDirRight.animated:after,
[data-appear-animation^=revealDir].revealDirRight:after {
    animation-name: blockSlideToRight
}

.revealDirDown.animated:after,
[data-appear-animation^=revealDir].revealDirDown:after {
    animation-name: blockSlideToDown
}

.elementor-edit-area [class*=revealDir].animated {
    animation-fill-mode: both !important
}

@keyframes blockSlideToRight {
    0% {
        transform: translate(-110%, 0)
    }

    to {
        transform: translate(110%, 0)
    }
}

@keyframes blockSlideToLeft {
    0% {
        transform: translate(110%, 0)
    }

    to {
        transform: translate(-110%, 0)
    }
}

@keyframes blockSlideToTop {
    0% {
        transform: translate(0, 110%)
    }

    to {
        transform: translate(0, -110%)
    }
}

@keyframes blockSlideToDown {
    0% {
        transform: translate(0, -110%)
    }

    to {
        transform: translate(0, 110%)
    }
}

@keyframes showBlockSlide {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes lightSpeedInRight {
    0% {
      -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
      transform: translate3d(100%, 0, 0) skewX(-30deg);
      opacity: 0;
    }
  
    60% {
      -webkit-transform: skewX(20deg);
      transform: skewX(20deg);
      opacity: 1;
    }
  
    80% {
      -webkit-transform: skewX(-5deg);
      transform: skewX(-5deg);
    }
  
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes lightSpeedInRight {
    0% {
      -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
      transform: translate3d(100%, 0, 0) skewX(-30deg);
      opacity: 0;
    }
  
    60% {
      -webkit-transform: skewX(20deg);
      transform: skewX(20deg);
      opacity: 1;
    }
  
    80% {
      -webkit-transform: skewX(-5deg);
      transform: skewX(-5deg);
    }
  
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .lightSpeedInRight {
    -webkit-animation-name: lightSpeedInRight;
    animation-name: lightSpeedInRight;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  @-webkit-keyframes lightSpeedInLeft {
    0% {
      -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
      transform: translate3d(-100%, 0, 0) skewX(30deg);
      opacity: 0;
    }
  
    60% {
      -webkit-transform: skewX(-20deg);
      transform: skewX(-20deg);
      opacity: 1;
    }
  
    80% {
      -webkit-transform: skewX(5deg);
      transform: skewX(5deg);
    }
  
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes lightSpeedInLeft {
    0% {
      -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
      transform: translate3d(-100%, 0, 0) skewX(30deg);
      opacity: 0;
    }
  
    60% {
      -webkit-transform: skewX(-20deg);
      transform: skewX(-20deg);
      opacity: 1;
    }
  
    80% {
      -webkit-transform: skewX(5deg);
      transform: skewX(5deg);
    }
  
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .lightSpeedInLeft {
    -webkit-animation-name: lightSpeedInLeft;
    animation-name: lightSpeedInLeft;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  @-webkit-keyframes lightSpeedOutRight {
    0% {
      opacity: 1;
    }
  
    100% {
      -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
      transform: translate3d(100%, 0, 0) skewX(30deg);
      opacity: 0;
    }
  }
  @keyframes lightSpeedOutRight {
    0% {
      opacity: 1;
    } 
    100% {
      -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
      transform: translate3d(100%, 0, 0) skewX(30deg);
      opacity: 0;
    }
  }
  .lightSpeedOutRight {
    -webkit-animation-name: lightSpeedOutRight;
    animation-name: lightSpeedOutRight;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  @-webkit-keyframes lightSpeedOutLeft {
    0% {
      opacity: 1;
    }
  
    100% {
      -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
      transform: translate3d(-100%, 0, 0) skewX(-30deg);
      opacity: 0;
    }
  }
  @keyframes lightSpeedOutLeft {
    0% {
      opacity: 1;
    }
  
    100% {
      -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
      transform: translate3d(-100%, 0, 0) skewX(-30deg);
      opacity: 0;
    }
  }
  .lightSpeedOutLeft {
    -webkit-animation-name: lightSpeedOutLeft;
    animation-name: lightSpeedOutLeft;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }


  @-webkit-keyframes rotateOut {
    0% {
      opacity: 1;
    }
  
    100% {
      -webkit-transform: rotate3d(0, 0, 1, 200deg);
      transform: rotate3d(0, 0, 1, 200deg);
      opacity: 0;
    }
  }
  @keyframes rotateOut {
    0% {
      opacity: 1;
    }
  
    100% {
      -webkit-transform: rotate3d(0, 0, 1, 200deg);
      transform: rotate3d(0, 0, 1, 200deg);
      opacity: 0;
    }
  }
  .rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
    -webkit-transform-origin: center;
    transform-origin: center;
  }
  @-webkit-keyframes rotateOutDownLeft {
    0% {
      opacity: 1;
    }
  
    100% {
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;
    }
  }
  @keyframes rotateOutDownLeft {
    0% {
      opacity: 1;
    }
  
    100% {
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;
    }
  }
  .rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
  }
  @-webkit-keyframes rotateOutDownRight {
    0% {
      opacity: 1;
    }
  
    100% {
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;
    }
  }
  @keyframes rotateOutDownRight {
    0% {
      opacity: 1;
    }
  
    100% {
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;
    }
  }
  .rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
  }
  @-webkit-keyframes rotateOutUpLeft {
    0% {
      opacity: 1;
    }
  
    100% {
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;
    }
  }
  @keyframes rotateOutUpLeft {
    0% {
      opacity: 1;
    }
  
    100% {
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;
    }
  }
  .rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
  }
  @-webkit-keyframes rotateOutUpRight {
    0% {
      opacity: 1;
    }
  
    100% {
      -webkit-transform: rotate3d(0, 0, 1, 90deg);
      transform: rotate3d(0, 0, 1, 90deg);
      opacity: 0;
    }
  }
  @keyframes rotateOutUpRight {
    0% {
      opacity: 1;
    }
  
    100% {
      -webkit-transform: rotate3d(0, 0, 1, 90deg);
      transform: rotate3d(0, 0, 1, 90deg);
      opacity: 0;
    }
  }
  .rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
  }
 
  @-webkit-keyframes hinge {
    0% {
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }
  
    20%,
    60% {
      -webkit-transform: rotate3d(0, 0, 1, 80deg);
      transform: rotate3d(0, 0, 1, 80deg);
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }
  
    40%,
    80% {
      -webkit-transform: rotate3d(0, 0, 1, 60deg);
      transform: rotate3d(0, 0, 1, 60deg);
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      opacity: 1;
    }
  
    100% {
      -webkit-transform: translate3d(0, 700px, 0);
      transform: translate3d(0, 700px, 0);
      opacity: 0;
    }
  }
  @keyframes hinge {
    0% {
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }
  
    20%,
    60% {
      -webkit-transform: rotate3d(0, 0, 1, 80deg);
      transform: rotate3d(0, 0, 1, 80deg);
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }
  
    40%,
    80% {
      -webkit-transform: rotate3d(0, 0, 1, 60deg);
      transform: rotate3d(0, 0, 1, 60deg);
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      opacity: 1;
    }
  
    100% {
      -webkit-transform: translate3d(0, 700px, 0);
      transform: translate3d(0, 700px, 0);
      opacity: 0;
    }
  }
  .hinge {
    -webkit-animation-duration: calc(1s * 2);
    animation-duration: calc(1s * 2);
    -webkit-animation-duration: calc(var(--animate-duration) * 2);
    animation-duration: calc(var(--animate-duration) * 2);
    -webkit-animation-name: hinge;
    animation-name: hinge;
    -webkit-transform-origin: top left;
    transform-origin: top left;
  }
  @-webkit-keyframes jackInTheBox {
    0% {
      opacity: 0;
      -webkit-transform: scale(0.1) rotate(30deg);
      transform: scale(0.1) rotate(30deg);
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
    }
  
    50% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }
  
    70% {
      -webkit-transform: rotate(3deg);
      transform: rotate(3deg);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  @keyframes jackInTheBox {
    0% {
      opacity: 0;
      -webkit-transform: scale(0.1) rotate(30deg);
      transform: scale(0.1) rotate(30deg);
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
    }
  
    50% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }
  
    70% {
      -webkit-transform: rotate(3deg);
      transform: rotate(3deg);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  .jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox;
  }