/* tf Animation
-------------------------------------------------------------- */
.tf-pulse-infinite {
    transform: scale(1);
    animation: tf-pulse 2s infinite;
}

.tf-pulse-infinite-3s {
    transform: scale(1);
    animation: tf-pulse 3s infinite;
}

.tf-pulse-infinite-4s {
    transform: scale(1);
    animation: tf-pulse 4s infinite;
}

.tf-pulse-infinite-5s {
    transform: scale(1);
    animation: tf-pulse 5s infinite;
}

@keyframes tf-pulse {
    0% {
        transform: scale(0.95);
    }
    
    70% {
        transform: scale(1);
    }
    
    100% {
        transform: scale(0.95);
    }
}

.tf-bob-infinite {
    transform: translateY(0px);
    animation: tf-bob 2s infinite;
}

.tf-bob-infinite-3s {
    transform: translateY(0px);
    animation: tf-bob 3s infinite;
}

.tf-bob-infinite-4s {
    transform: translateY(0px);
    animation: tf-bob 4s infinite;
}

.tf-bob-infinite-5s {
    transform: translateY(0px);
    animation: tf-bob 5s infinite;
}

@keyframes tf-bob {
    0% {
        transform: translateY(-8px);
    }
    50% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-8px);
    }
}

/* Animation Image
-------------------------------------------------------------- */
.deeper-fancy-image,
.deeper-fancy-img {
    position: relative;
}

.deeper-fancy-image .url-wrap,
.deeper-fancy-img .url-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all ease 1.3s;
}

.deeper-fancy-image.simple .url-wrap {
    opacity: 1;
    margin: 0;
}

.deeper-fancy-image.animated .url-wrap,
.deeper-fancy-image.is-in-view .url-wrap {
    opacity: 1;
    margin-left: 0;
}

@media screen and (max-width: 991px) {
    .deeper-fancy-image.stretch-on-mobile img {
        width: 100%;
        height: auto;
    }
}

.deeper-fancy-img-holder,
.deeper-fancy-img-bg {
    -webkit-transition: opacity 1s 0s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1.5s 0.25s cubic-bezier(0.23, 1, 0.32, 1);
    transition: opacity 1s 0s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1.5s 0.25s cubic-bezier(0.23, 1, 0.32, 1);
    transition: opacity 1s 0s cubic-bezier(0.23, 1, 0.32, 1), transform 1.5s 0.25s cubic-bezier(0.23, 1, 0.32, 1);
    transition: opacity 1s 0s cubic-bezier(0.23, 1, 0.32, 1), transform 1.5s 0.25s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1.5s 0.25s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 0;
}

.deeper-fancy-img-bg {
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 0;
    background-color: #4582ff;
}

.deeper-fancy-img-holder {
    opacity: 0;
}

.deeper-fancy-img-holder img {
    width: 100%;
}

.deeper-fancy-img-holder,
.deeper-fancy-img {
    position: relative;
}

.deeper-fancy-img.is-in-view .deeper-fancy-img-bg,
.deeper-fancy-img.is-in-view .deeper-fancy-img-holder {
    opacity: 1;
}

.deeper-fancy-img.is-in-view .deeper-video-icon {
    opacity: 1;
    margin-left: 0;
}

.deeper-fancy-img.is-in-view.bg-top .deeper-fancy-img-bg {
    -webkit-transform: translate(-20px, -20px);
    transform: translate(-20px, -20px);
}

.deeper-fancy-img.is-in-view.bg-top .deeper-fancy-img-holder {
    -webkit-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
}

.deeper-fancy-img.is-in-view.bg-right .deeper-fancy-img-bg {
    -webkit-transform: translate(20px, -20px);
    transform: translate(20px, -20px);
}

.deeper-fancy-img.is-in-view.bg-right .deeper-fancy-img-holder {
    -webkit-transform: translate(-15px, 15px);
    transform: translate(-15px, 15px);
}

.deeper-fancy-img.is-in-view.bg-bottom .deeper-fancy-img-bg {
    -webkit-transform: translate(20px, 20px);
    transform: translate(20px, 20px);
}

.deeper-fancy-img.is-in-view.bg-bottom .deeper-fancy-img-holder {
    -webkit-transform: translate(-15px, -15px);
    transform: translate(-15px, -15px);
}

.deeper-fancy-img.is-in-view.bg-left .deeper-fancy-img-bg {
    -webkit-transform: translate(-20px, 20px);
    transform: translate(-20px, 20px);
}

.deeper-fancy-img.is-in-view.bg-left .deeper-fancy-img-holder {
    -webkit-transform: translate(15px, -15px);
    transform: translate(15px, -15px);
}

.deeper-fancy-image.reveal {
    display: inline-block;
}

.deeper-fancy-image.reveal > * {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

.deeper-fancy-image.reveal.animated {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.deeper-fancy-image.reveal> figure {
    opacity: 0;
}

.deeper-fancy-image.reveal.animated > figure {
    -webkit-animation-name: hide-show;
    animation-name: hide-show;
    
}

.deeper-fancy-image.reveal {
    position: relative;
}

.deeper-fancy-image.reveal:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

.deeper-fancy-image.reveal.lr.animated:after {
    -webkit-animation-name: reveal-from-left;
    animation-name: reveal-from-left;
}

.deeper-fancy-image.reveal.rl.animated:after {
    -webkit-animation-name: reveal-from-right;
    animation-name: reveal-from-right;
}

/* Animation Button
-------------------------------------------------------------- */
.deeper-button .elementor-button-link,
.deeper-button .metform-btn,
.deeper-button .metform-submit-btn,
.themesflat-button {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.deeper-button .hover-effect,
.themesflat-button .hover-effect {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    transition: 0.5s ease-in-out;
    background-color: #222222;
    z-index: -1;
    border-radius: 100%;
    opacity: 0.5;
}

.deeper-button .elementor-button-link:hover .hover-effect,
.deeper-button .metform-btn:hover .hover-effect,
.themesflat-button:hover .hover-effect {
    width: calc(100% * 2.25);
    padding-top: calc(100% * 2.25);
    opacity: 1;
}

.deeper-button .elementor-button-link:hover,
.deeper-button .metform-btn:hover,
.themesflat-button:hover {
    background-color: transparent !important;
    background: transparent !important;
}

.deeper-button.button-dark:before {
    background-color: #4a44f2;
}

/* Animation 
----------------------------------------------*/
@keyframes popup {
    0% {
        opacity: 0;
    }
    66.67% {
        opacity: 0;
        transform: scale(0.95) translateX(-0.05%);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

@keyframes zoomeffect {
    0% {
        background-position: center;
        transform: scale(1);
    }
    50% {
        background-position: center;
        transform: scale(1.3);
    }
    100% {
        background-position: center;
        transform: scale(1);
    }
}

@keyframes zoomeffect2 {
    0% {
        background-position: center;
        transform: scale(1);
    }
    50% {
        background-position: center;
        transform: scale(0.7);
    }
    100% {
        background-position: center;
        transform: scale(1);
    }
}

@keyframes smallzoom {
    0% {
        background-position: center;
        transform: scale(1);
    }
    50% {
        background-position: center;
        transform: scale(0.95);
    }
    100% {
        background-position: center;
        transform: scale(1);
    }
}

@keyframes movingeffect {
    0%,
    100% {
        transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
    }

    50% {
        transform: perspective(400px) rotate(-45deg) translateZ(40px) translateY(-50px) translateX(200px);
    }
}

@keyframes shakeeffect {
    0% {
        -webkit-transform: rotate3d(0, 1, 0, 0deg);
        transform: rotate3d(0, 1, 0, 0deg);
    }

    30% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    60% {
        -webkit-transform: rotate3d(1, 0, 0, 0deg);
        transform: rotate3d(1, 0, 0, 0deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    100% {
        -webkit-transform: rotate3d(0, 1, 0, 0deg);
        transform: rotate3d(0, 1, 0, 0deg);
    }
}

@keyframes bounceeffect {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
}

@keyframes c1 {
    0% {
        bottom: 20px;
    }
    30% {
        bottom: -200px;
    }
    70% {
        bottom: 100px;
    }
    100% {
        bottom: 20px;
    }
}

@keyframes c2 {
    0% {
        top: 20px;
    }
    20% {
        top: -130px;
    }
    70% {
        top: 200px;
    }
    100% {
        top: 20px;
    }
}

@keyframes animatedBubble1 {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    80% {
        opacity: 1;
        transform: translateY(-80px) rotate(288deg) scale(1.1);
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}
@keyframes animatedBubble4 {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    80% {
        opacity: 1;
        transform: translateY(-90px) rotate(288deg) scale(1.12);
    }
    100% {
        transform: translateY(-120px) rotate(-360deg);
        opacity: 0;
    }
}
@keyframes animatedBubble2 {
    0% {
        margin-left: 0;
    }
    25% {
        margin-left: -10px;
    }
    50% {
        margin-left: 0;
    }
    70% {
        margin-left: 10px;
    }
    100% {
        margin-left: 0;
    }
}
@keyframes animatedBubble3 {
    0% {
        margin-right: 0;
    }
    25% {
        margin-right: -10px;
    }
    50% {
        margin-right: 0;
    }
    70% {
        margin-right: 10px;
    }
    100% {
        margin-right: 0;
    }
}

@keyframes hide-show {
    0% {
        opacity: 0;
    }
    66.6% {
        opacity: 0;
    }
    66.7% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes reveal-from-left {
    0% {
        -webkit-transform-origin: left top;
        transform-origin: left top;
        -webkit-transform: scale(0, 1);
        transform: scale(0, 1);
    }
    66.6% {
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    66.7% {
        -webkit-transform-origin: right center;
        transform-origin: right center;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: right center;
        transform-origin: right center;
        -webkit-transform: scale(0, 1);
        transform: scale(0, 1);
    }
}

@keyframes reveal-from-right {
    0% {
        -webkit-transform-origin: right top;
        transform-origin: right top;
        -webkit-transform: scale(0, 1);
        transform: scale(0, 1);
    }

    66.6% {
        -webkit-transform-origin: right center;
        transform-origin: right center;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    66.7% {
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }

    100% {
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: scale(0, 1);
        transform: scale(0, 1);
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes arrowMoving {
    49% {
        right: -20px;
        opacity: 0;
    }
    50% {
        right: 20px;
        opacity: 0;
    }
    100% {
        right: 3px;
        opacity: 1;
    }
}

@keyframes hidden {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hide-show1 {
    0% {
        opacity: 0;
    }
    79.99% {
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes hide-show2 {
    0% {
        opacity: 0;
    }
    84.99% {
        opacity: 0;
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes hide-show3 {
    0% {
        opacity: 0;
    }
    87.99% {
        opacity: 0;
    }
    88% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes hide-show4 {
    0% {
        opacity: 0;
    }
    89.99% {
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes hide-show5 {
    0% {
        opacity: 0;
    }
    91.42% {
        opacity: 0;
    }
    91.43% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes hide-show6 {
    0% {
        opacity: 0;
    }
    92.49% {
        opacity: 0;
    }
    92.5% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes progress {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@keyframes bg-moving-1 {
    0% {
        background-position-x: -130px;
        background-position-y: -70px;
        background-size: 250%;
    }
    50% {
        background-position-x: 0px;
        background-position-y: 65px;
        background-size: 450%;
    }
    100% {
        background-position-x: -130px;
        background-position-y: -70px;
        background-size: 250%;
    }
}

@keyframes video-pulse {
    to {
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }
}

@keyframes s1-a1 {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    50% {
        opacity: 0;
        transform: scale(0.7);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes ripple {
    0% {
        width: 150px;
        height: 150px;
        opacity: 0;
    }
    10% {
        width: 170px;
        height: 170px;
        opacity: 1;
    }
    25% {
        width: 200px;
        height: 200px;
        top: -5px;
        left: -5px;
    }
    50% {
        width: 240px;
        height: 240px;
        top: -10px;
        left: -10px;
    }
    75% {
        width: 270px;
        height: 270px;
        top: -15px;
        left: -15px;
    }
    100% {
        width: 300px;
        height: 300px;
        top: -20px;
        left: -20px;
        opacity: 0;
    }
}

@keyframes rtd {
    from,
    to {
        -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    20% {
        -moz-transform: rotateY(-90deg) rotateZ(90deg);
        -ms-transform: rotateY(-90deg) rotateZ(90deg);
        transform: rotateY(-90deg) rotateZ(90deg);
    }
    40% {
        -moz-transform: rotateY(-180deg) rotateZ(90deg);
        -ms-transform: rotateY(-180deg) rotateZ(90deg);
        transform: rotateY(-180deg) rotateZ(90deg);
    }
    60% {
        -moz-transform: rotateY(-270deg) rotateX(90deg);
        -ms-transform: rotateY(-270deg) rotateX(90deg);
        transform: rotateY(-270deg) rotateX(90deg);
    }
    80% {
        -moz-transform: rotateX(90deg);
        -ms-transform: rotateX(90deg);
        transform: rotateX(90deg);
    }
}

@keyframes tilt {
    0% {
        -webkit-transform: rotateX(-30deg);
        -moz-transform: rotateX(-30deg);
        transform: rotateX(-30deg);
    }
    25% {
        -webkit-transform: rotateX(30deg);
        -moz-transform: rotateX(30deg);
        transform: rotateX(30deg);
    }
    50% {
        -webkit-transform: rotateY(-30deg);
        -moz-transform: rotateY(-30deg);
        transform: rotateY(-30deg);
    }
    75% {
        -webkit-transform: rotateY(30deg);
        -moz-transform: rotateY(30deg);
        transform: rotateY(30deg);
    }
    100% {
        -webkit-transform: rotateZ(20deg);
        -moz-transform: rotateZ(20deg);
        transform: rotateZ(20deg);
    }
}

@keyframes hvr-buzz-out {
    10% {
        transform: translateX(3%) rotate(2deg);
    }
    20% {
        transform: translateX(-3%) rotate(-2deg);
    }
    30% {
        transform: translateX(3%) rotate(2deg);
    }
    40% {
        transform: translateX(-3%) rotate(-2deg);
    }
    50% {
        transform: translateX(2%) rotate(1deg);
    }
    60% {
        transform: translateX(-2%) rotate(-1deg);
    }
    70% {
        transform: translateX(2%) rotate(1deg);
    }
    80% {
        transform: translateX(-2%) rotate(-1deg);
    }
    90% {
        transform: translateX(1%) rotate(0);
    }
    to {
        transform: translateX(-1%) rotate(0);
    }
}

@keyframes flyout {
    20% {
        transform: scale(1);
        opacity: 1;
    }
    40% {
        transform: scale(1.1) translate(-5px, 5px);
    }
    70% {
        transform: scale(0.9) translate(30px, -30px);
    }
    100% {
        transform: scale(0.7) translate(75px, -75px);
        opacity: 0;
    }
}

.moveBounceY {
    animation: 3s moveBounceY linear infinite;
}
@keyframes moveBounceY {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
    to {
        transform: translateY(0);
    }
}

.moveBounceX {
    animation: 3s moveBounceX linear infinite;
}
@keyframes moveBounceX {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-20px);
    }
    to {
        transform: translateX(0);
    }
}

/* Animation Image
-------------------------------------------------------------- */    
.tf-animation-img figure:hover img {
    -webkit-animation: tfBottomToTop 0.5s forwards;
    -moz-animation: tfBottomToTop 0.5s forwards;
    animation: tfBottomToTop 0.5s forwards;
}

@-webkit-keyframes tfBottomToTop {
    49% {
        -webkit-transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}

@keyframes tfBottomToTop {
    49% {
        transform: translateY(-100%);
    }
    50% {
        opacity: 0;
        transform: translateY(100%);
    }
    51% {
        opacity: 1;
    }
}