@keyframes rotateme {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.rotate-me {
    animation: rotateme 24s linear infinite;
}

@keyframes float-bob {
    0% { transform: translateX(-100px); }
    50% { transform: translateX(-10px); }
    100% { transform: translateX(-100px); }
}
.float-bob {
    animation: float-bob 7s linear infinite;
}

@keyframes float-bob-y {
    0% { transform: translateY(-20px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(-20px); }
}
.float-bob-y {
    animation: float-bob-y 2s linear infinite;
}

@keyframes float-bob-x {
    0% { transform: translateX(-30px); }
    50% { transform: translateX(-10px); }
    100% { transform: translateX(-30px); }
}
.float-bob-x {
    animation: float-bob-x 2s linear infinite;
}

@keyframes float-bob-x-2 {
    0% { transform: translateX(-30px) translateY(-50%); }
    50% { transform: translateX(-10px) translateY(-50%); }
    100% { transform: translateX(-30px) translateY(-50%); }
}
.float-bob-x-2 {
    animation: float-bob-x-2 2s linear infinite;
}

@keyframes shine {
    100% { left: 125%; }
}

@keyframes circle {
    0% { opacity: 1; }
    40% { opacity: 1; }
    100% { width: 200%; height: 200%; opacity: 0; }
}

@keyframes zoomInOut {
    0% { transform: rotate(0deg) scale(0.7); opacity: 0; }
    50% { transform: rotate(180deg) scale(1); opacity: 1; }
    100% { transform: rotate(360deg) scale(0.7); opacity: 0; }
}
.zoominout {
    animation: zoomInOut 3s ease-in-out infinite;
}

@keyframes zoomInOut2 {
    0% { transform: rotate(0deg) scale(0.7); opacity: 0; }
    50% { transform: rotate(0deg) scale(1); opacity: 1; }
    100% { transform: rotate(0deg) scale(0.7); opacity: 0; }
}

@keyframes ripple {
    70% { box-shadow: 0 0 0 40px rgba(10, 165, 205, 0); }
    100% { box-shadow: 0 0 0 0 rgba(10, 165, 205, 0); }
}

@keyframes animation1 {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25%, 75% { transform: rotate(5deg) translateX(15px); }
    50% { transform: rotate(10deg) translateX(30px); }
}

@keyframes rotateScale {
    from { transform: rotate(0deg) scale(1); }
    to { transform: rotate(360deg); }
}
.rotatescale {
    animation: rotateScale 20s linear infinite;
}

@keyframes bubbleMover {
    0% { transform: translateY(0px) translateX(0) rotate(0); }
    30% { transform: translateY(30px) translateX(50px) rotate(15deg); }
    50% { transform: translateY(50px) translateX(100px) rotate(45deg); }
    80% { transform: translateY(30px) translateX(50px) rotate(15deg); }
    100% { transform: translateY(0px) translateX(0) rotate(0); }
}

@keyframes shapeMover {
    0%, 100% { transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0); }
    50% { transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px); }
}

@keyframes zoom-fade {
    0% { transform: scale(0.9) translateX(-50%); }
    50% { transform: scale(1) translateX(-50%); }
    100% { transform: scale(0.9) translateX(-50%); }
}
.zoom-fade {
    animation: zoom-fade 5s linear infinite;
}

@keyframes zoom-fade-2 {
    0% { transform: scale(0.9) translateX(-50%) translateY(-50%); }
    50% { transform: scale(1) translateX(-50%) translateY(-50%); }
    100% { transform: scale(0.9) translateX(-50%) translateY(-50%); }
}
.zoom-fade-2 {
    animation: zoom-fade-2 5s linear infinite;
}

@keyframes banner-animate {
    0% { transform: translateX(-1000px); }
    50% { transform: translateX(-10px); }
    100% { transform: translateX(-1000px); }
}
.banner-animate {
    animation: banner-animate 70s linear infinite;
}

@keyframes footerTree {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25%, 75% { transform: rotate(5deg) translateX(15px); }
    50% { transform: rotate(10deg) translateX(30px); }
}
.footertree {
    animation: footerTree 5s ease-in infinite;
}

@keyframes bgSlide {
    0% { background-position: 0 0; }
    20% { background-position: -100px 0; }
    40% { background-position: -200px 0; }
    60% { background-position: -150px 0; }
    80% { background-position: -100px 0; }
    100% { background-position: 0px 0; }
}

@keyframes bgSlideReverse {
    0% { background-position: 0 0; }
    20% { background-position: 100px 0; }
    40% { background-position: 200px 0; }
    60% { background-position: 150px 0; }
    80% { background-position: 100px 0; }
    100% { background-position: 0px 0; }
}

@keyframes ribbonRotate {
    0%, 100% { transform: rotate(0); }
    25%, 75% { transform: rotate(15deg); }
    50% { transform: rotate(30deg); }
}

@keyframes treeMove {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25%, 75% { transform: rotate(5deg) translateX(15px); }
    50% { transform: rotate(10deg) translateX(30px); }
}

@keyframes btnIconMove {
    0% { transform: rotate(0deg) translate(0px, 0px); }
    50% { transform: rotate(20deg) translate(10px, 0px); }
    100% { transform: rotate(0deg) translate(0px, 0px); }
}

@keyframes ImgBounce {
    0% { transform: translateY(0); }
    25% { transform: translateY(5px); }
    50% { transform: translateY(10px); }
    75% { transform: translateY(5px); }
    100% { transform: translateY(0px); }
}

@keyframes squareMover {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    20%, 60% { transform: translate(20px, 40px) rotate(180deg); }
    30%, 80% { transform: translate(40px, 60px) rotate(0deg); }
}

@keyframes squares {
    0% { transform: scale(1); opacity: 0; }
    20% { transform: scale(1.24); opacity: 1; }
    100% { transform: scale(2.1); opacity: 0; }
}