
@keyframes jump {
    0% { transform: translate3d(0, 0, 0) }
    40% { transform: translate3d(0, 50%, 0) }
    100% { transform: translate3d(0, 0, 0) }
}
@keyframes jumpTwo {
    0% { transform: translate3d(0, 0, 0) }
    40% { transform: translate3d(0, 20px, 0) }
    100% { transform: translate3d(0, 0, 0) }
}
@keyframes jumpThree {
    0% { transform: translate3d(0, 0, 0) }
    40% { transform: translate3d(0, -20px, 0) }
    100% { transform: translate3d(0, 0, 0) }
}
@keyframes jumpFour {
    0% { transform: translate3d(0, 0, 0) }
    50% { transform: translate3d(0, -10px, 0) }
    100% { transform: translate3d(0, 0, 0) }
}
@keyframes jumpFive {
    0% { transform: translate3d(0, 0, 0) }
    50% { transform: translate3d(0, 10px, 0) }
    100% { transform: translate3d(0, 0, 0) }
}
@keyframes prXOne {
    0% { transform: translateX(0) }
    50% { transform: translateX(-15px) }
    100% { transform: translateX(0) }
}
@keyframes prXTwo {
    0% { transform: translateX(0) }
    50% { transform: translateX(15px) }
    100% { transform: translateX(0) }
}
@keyframes rotated {
    0% { transform: rotate(0) }
    100% { transform: rotate(360deg) }
}
@keyframes rotatedTwo {
    0% { transform: rotate(0) }
    100% { transform: rotate(-360deg) }
}
@keyframes rotatedHalf {
    0% { transform: rotate(0) }
    50% { transform: rotate(90deg) }
    100% { transform: rotate(0) }
}
@keyframes rotatedHalfTwo {
    0% { transform: rotate(-90deg) }
    100% { transform: rotate(90deg) }
}
@keyframes scale-upOne {
    0% { transform: scale(1) }
    50% { transform: scale(.85) }
    100% { transform: scale(1) }
}
@keyframes scale-right {
    0% { transform: translateX(0) }
    50% { transform: translateX(20%) }
    100% { transform: translateX(0) }
}
@keyframes fade-in {
    0% { opacity: .2 }
    40% { opacity: 1 }
    100% { opacity: .2 }
}
@keyframes hvr-ripple-out {
    0% {
        top: -5px;
        right: -5px;
        bottom: -5px;
        left: -5px
    }

    50% {
        top: -15px;
        right: -15px;
        bottom: -15px;
        left: -15px;
        opacity: .8
    }

    100% {
        top: -5px;
        right: -5px;
        bottom: -5px;
        left: -5px;
        opacity: 1
    }
}
@keyframes hvr-ripple-out-two {
    0% {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }

    100% {
        top: -30px;
        right: -30px;
        bottom: -30px;
        left: -30px;
        opacity: 0
    }
}
@keyframes scale-up-one {
    0% { transform: scale(1) }
    40% { transform: scale(.5) }
    100% { transform: scale(1) }
}
@keyframes scale-up-two {
    0% { transform: scale(.5) }
    40% { transform: scale(.8) }
    100% { transform: scale(.5) }
}
@keyframes scale-up-three {
    0% { transform: scale(1) }
    40% { transform: scale(2) }
    100% { transform: scale(1) }
}
@keyframes jump5p {
    0% { transform: translate3d(0, 0, 0) }
    40% { transform: translate3d(0, 5px, 0) }
    100% { transform: translate3d(0, 0, 0) }
}
@keyframes jump5pRsv {
    0% { transform: translate3d(0, 0, 0) }
    40% { transform: translate3d(0, -5px, 0) }
    100% { transform: translate3d(0, 0, 0) }
}
@keyframes moveclouds {
    0% { margin-left: 200px }
    100% { margin-left: -200px }
}
@keyframes moveclouds2 {
    0% { margin-right: 200px }
    100% { margin-right: -200px }
}
@keyframes moveUp {
    0% { transform: translateY(0) }
    100% { transform: translateY(-70%) }
}
@keyframes tpfadeUp {
    0% { opacity: 0; transform: translateY(20px) }
    100% { opacity: 1; transform: translateY(0) }
}
.tpfadeUp {
    -webkit-animation-name: tpfadeUp;
    animation-name: tpfadeUp;
}

@keyframes tpfadeLeft {
    0% { opacity: 0; transform: translateX(-20px) }
    100% { opacity: 1; transform: translateX(0) }
}
.tpfadeLeft {
    -webkit-animation-name: tpfadeLeft;
    animation-name: tpfadeLeft;
}

@keyframes tpfadeRight {
    0% { opacity: 0; transform: translateX(20px) }
    100% { opacity: 1; transform: translateX(0) }
}
.tpfadeRight {
    -webkit-animation-name: tpfadeRight;
    animation-name: tpfadeRight;
}


@keyframes fadeInRight {
    0% { opacity: 0; transform: translateX(20px) }
    100% { opacity: 1; transform: translateX(0) }
}
.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}




@keyframes tpfadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}
.tpfadeIn {
    -webkit-animation-name: tpfadeIn;
    animation-name: tpfadeIn;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes dash {
    0% { stroke-dashoffset: 150; }
    50% { stroke-dashoffset: 35; transform: rotate(45deg); }
    100% { stroke-dashoffset: 150; transform: rotate(360deg); }
}


/* pulse effect animation */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4) }
    70% { box-shadow: 0 0 0 45px rgba(255, 255, 255, 0) }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0) }
}
@keyframes tptranslateX2 {
    0% { transform: translateX(-30px) }
    100% { transform: translateX(20px) }
}
@keyframes tpupdown-2 {
    0% { transform: translateY(20px) }
    100% { transform: translateY(-20px) }
}
@keyframes animationglob {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes tpupdown {
    0% { transform: translateY(0) }
    100% { transform: translateY(-5px) }
}
@keyframes tfLeftToRight {
    49% {
        transform: translateX(30%);
    }
    50% {
        opacity: 0;
        transform: translateX(-30%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes rotate2 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes moving {
    0% {
        transform: translatey(0px);
    }
    20% {
        transform: translateX(-50px);
    }
    50% {
        transform: translatey(-40px);
    }
    100% {
        transform: translatey(0px);
    }
}
@keyframes leftright {
    0% {
        transform: translatex(0);
    }
    50% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }}@keyframes movinglight {
          0% {
              transform: translatey(0px);
          }
          20% {
              transform: translateX(-70px);
          }
          50% {
              transform: translatey(-70px);
          }
          100% {
              transform: translatey(0px);
          }}@keyframes movinglight2 {
                0% {
                    transform: translatey(0px);
                }
                20% {
                    transform: translateX(70px);
                }
                50% {
                    transform: translatey(70px);
                }
                100% {
                    transform: translatey(0px);
                }}@keyframes movingtop {
                      0% {
                          transform: translatey(0px);
                      }
                      20% {
                          transform: translatey(70px);
                      }
                      50% {
                          transform: translatey(-70px);
                      }
                      100% {
                          transform: translatey(0px);
                      }}@keyframes zoom {
                            0% {
                                transform: scale(0.5);
                            }
                            50% {
                                transform: scale(1);
                            }
                            100% {
                                transform: scale(0.5);
                            }}@keyframes zoom2 {
                                  0% {
                                      transform: scale(0.9);
                                  }
                                  50% {
                                      transform: scale(1);
                                  }
                                  100% {
                                      transform: scale(0.9);
                                  }}@keyframes wobble-vertical {
                                        10% {
                                            transform: translateY(-10px);
                                        }
                                        50% {
                                            transform: skew(15deg);
                                        }
                                        80% {
                                            transform: rotate(10deg);
                                        }
                                        100% {
                                            transform: translate(0);
                                        } }
@keyframes section-highlight {
                                                                 0% {
                                                                     width: 0;
                                                                 }
                                                                 100% {
                                                                     width: 100%;
                                                                 }}@keyframes widthcalc {
                                                                       0% {
                                                                           width: 20%;
                                                                       }
                                                                       50% {
                                                                           width: 50%;
                                                                       }
                                                                       75% {
                                                                           width: 90%;
                                                                       }
                                                                       90% {
                                                                           opacity: 75%;
                                                                       }
                                                                       90% {
                                                                           opacity: 100%;
                                                                       }
                                                                       /* right bounce */
                                                                   }
@keyframes bounceRight {
                0%, 20%, 50%, 80%, 100% {
                    -ms-transform: translateX(0);
                    transform: translateX(0);
                }
                40% {
                    -ms-transform: translateX(-90px);
                    transform: translateX(-90px);
                }
                60% {
                    -ms-transform: translateX(-15px);
                    transform: translateX(-15px);
                }
                /* /right bounce */
            }


/* Enhanced animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes icon-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-10px) scale(1.1);
    }
    60% {
        transform: translateY(-5px) scale(1.05);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateY(-20px) scale(1);
        opacity: 1;
    }
}



@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-30px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}


.animate-element{opacity:0;transform:translateZ(0);will-change:transform,opacity;transition:none}
.animate-element.animate-active{opacity:1;animation-fill-mode:both;animation-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)}
.animate-element.tpfadeUp.animate-active{animation-name:fadeInUp}
.animate-element.tpfadeLeft.animate-active{animation-name:fadeInLeft}
.animate-element.tpfadeRight.animate-active{animation-name:fadeInRight}
.animate-element.fadeInUp.animate-active{animation-name:fadeInUp}
.animate-element.fadeIn.animate-active{animation-name:fadeIn}
.animate-element.fadeOut.animate-active{animation-name:fadeOut}
.wow,.tpfadeUp,.tpfadeLeft,.tpfadeRight{will-change:transform,opacity;transform:translateZ(0)}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}


