/* 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 
----------------------------------------------*/
    @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;
        }
    }