@keyframes wave {
    0% {
        /* width: 0%; */
        opacity: 0;
    }
    50% {
        /* width: 100%; */
        opacity: 1;
    }
    100% {
        /* width: 100%; */
        opacity: 0;
    }
}


/* @-webkit-keyframes wave {
    0% {
        width: 0%;
        opacity: .0;
    }

    50% {
        width: 50%;
        opacity: .5;
    }

    75% {
        width: 75%;
        opacity: .8;
    }

    100% {
        width: 100%;
        opacity: 1;
    }
} */

@-webkit-keyframes moveBounce {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes moveBounce {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@-webkit-keyframes ripple {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    75% {
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes ripple {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    75% {
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}

@-webkit-keyframes rotateMe {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotateMe {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes animationFramesOne {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg);
    }
    20% {
        -webkit-transform: translate(73px, -1px) rotate(36deg);
        transform: translate(73px, -1px) rotate(36deg);
    }
    40% {
        -webkit-transform: translate(141px, 72px) rotate(72deg);
        transform: translate(141px, 72px) rotate(72deg);
    }
    60% {
        -webkit-transform: translate(83px, 122px) rotate(108deg);
        transform: translate(83px, 122px) rotate(108deg);
    }
    80% {
        -webkit-transform: translate(-40px, 72px) rotate(144deg);
        transform: translate(-40px, 72px) rotate(144deg);
    }
    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg);
    }
}

@-webkit-keyframes jello {
    0% {
        -webkit-transform: skew(0deg 0deg);
        transform: skew(0deg 0deg);
    }
    30% {
        -webkit-transform: skew(25deg 25deg);
        transform: skew(25deg 25deg);
    }
    40% {
        -webkit-transform: skew(-15deg, -15deg);
        transform: skew(-15deg, -15deg);
    }
    50% {
        -webkit-transform: skew(15deg, 15deg);
        transform: skew(15deg, 15deg);
    }
    65% {
        -webkit-transform: skew(-5deg, -5deg);
        transform: skew(-5deg, -5deg);
    }
    75% {
        -webkit-transform: skew(5deg, 5deg);
        transform: skew(5deg, 5deg);
    }
    100% {
        -webkit-transform: skew(0deg 0deg);
        transform: skew(0deg 0deg);
    }
}

@keyframes jello {
    0% {
        -webkit-transform: skew(0deg 0deg);
        transform: skew(0deg 0deg);
    }
    30% {
        -webkit-transform: skew(25deg 25deg);
        transform: skew(25deg 25deg);
    }
    40% {
        -webkit-transform: skew(-15deg, -15deg);
        transform: skew(-15deg, -15deg);
    }
    50% {
        -webkit-transform: skew(15deg, 15deg);
        transform: skew(15deg, 15deg);
    }
    65% {
        -webkit-transform: skew(-5deg, -5deg);
        transform: skew(-5deg, -5deg);
    }
    75% {
        -webkit-transform: skew(5deg, 5deg);
        transform: skew(5deg, 5deg);
    }
    100% {
        -webkit-transform: skew(0deg 0deg);
        transform: skew(0deg 0deg);
    }
}

@-webkit-keyframes blur-out {
    0% {
        -webkit-filter: blur(0.01);
        filter: blur(0.01);
    }
    100% {
        -webkit-filter: blur(12px) opacity(0%);
        filter: blur(12px) opacity(0%);
    }
}

@keyframes blur-out {
    0% {
        -webkit-filter: blur(0.01);
        filter: blur(0.01);
    }
    100% {
        -webkit-filter: blur(12px) opacity(0%);
        filter: blur(12px) opacity(0%);
    }
}

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

@keyframes simple {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}



@-webkit-keyframes rotate-clock {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(45deg);
    }
}






@keyframes floating {
    from {
        transform: translate(0, 0px);
    }
    65% {
        transform: translate(0, 15px);
    }
    to {
        transform: translate(0, -0px);
    }
}




.floating2 {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}


@keyframes floatingx {
    from {
        transform: translate(0, 0px);
    }
    65% {
        transform: translate(15px, 0);
    }
    to {
        transform: translate(0, -0px);
    }
}


.floating1 {
    animation-name: floatingx;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    
   
}