@keyframes rotateme {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

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

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

.rotate-me {
    animation-name: rotateme;
    animation-duration: 24s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: rotateme;
    -webkit-animation-duration: 24s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotateme;
    -moz-animation-duration: 24s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: rotateme;
    -ms-animation-duration: 24s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: rotateme;
    -o-animation-duration: 24s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

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

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

/*** 
=============================================
    circle Css
=============================================
***/

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

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

@-webkit-keyframes float-bob {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    50% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }
    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}

@keyframes float-bob {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    50% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }
    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}

.float-bob {
    animation-name: float-bob;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: float-bob;
    -webkit-animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: float-bob;
    -moz-animation-duration: 7s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob;
    -ms-animation-duration: 7s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob;
    -o-animation-duration: 7s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

/*** 
=============================================
    Zoom In Out Css
=============================================
***/

.zoominout {
    animation-name: zoomInOut;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: zoomInOut;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: zoomInOut;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-name: zoomInOut;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease-in-out;
    -o-animation-name: zoomInOut;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: ease-in-out;
}

@-webkit-keyframes zoomInOut {
    0% {
        -webkit-transform: rotate(0deg) scale(0.7);
        transform: rotate(0deg) scale(0.7);
        opacity: 0;
    }
    50% {
        -webkit-transform: rotate(180deg) scale(1);
        transform: rotate(180deg) scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(360deg) scale(0.7);
        transform: rotate(360deg) scale(0.7);
        opacity: 0;
    }
}

@-webkit-keyframes banner-animate {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
    }
    50% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }
    100% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
    }
}

@keyframes banner-animate {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
    }
    50% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }
    100% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
    }
}

.banner-animate {
    animation-name: banner-animate;
    animation-duration: 70s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: banner-animate;
    -webkit-animation-duration: 70s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: banner-animate;
    -moz-animation-duration: 70s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: banner-animate;
    -ms-animation-duration: 70s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: banner-animate;
    -o-animation-duration: 70s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

/*** 
=============================================
    Ripple Animation
=============================================
***/

@-webkit-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 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);
    }
}

/*** 
=============================================
    Float Bob Y Animation Css
=============================================
***/

@-webkit-keyframes float-bob-y {
    0% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(-20px);
    }
}

@keyframes float-bob-y {
    0% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(-20px);
    }
}

.float-bob-y {
    -webkit-animation-name: float-bob-y;
    animation-name: float-bob-y;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

/*** 
=============================================
    Footer Tree Animation 
=============================================
***/

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

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

.footertree {
    -webkit-animation: footerTree 5s ease-in infinite;
    animation: footerTree 5s ease-in infinite;
}

@keyframes rotateScale {
    from {
        transform: rotate(0deg) scale(1);
    }
    to {
        transform: rotate(360deg);
    }
}

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

@-moz-keyframes rotateScale {
    from {
        transform: rotate(0deg) scale(1);
    }
    to {
        transform: rotate(360deg);
    }
}

@-o-keyframes rotateScale {
    from {
        transform: rotate(0deg) scale(1);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotatescale {
    -webkit-animation-name: rotateScale;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotateScale;
    -moz-animation-duration: 20s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: rotateScale;
    -ms-animation-duration: 20s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: rotateScale;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/*--------------------------------------------------------------
# Animations Shape Mover
--------------------------------------------------------------*/

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

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

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

.shape-mover {
    -webkit-animation-name: shapeMover;
    animation-name: shapeMover;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-perspective: 100px;
    perspective: 100px;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

/*--------------------------------------------------------------
#     Zoom Fade Css
--------------------------------------------------------------*/

.zoom-fade {
    animation-name: zoom-fade;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: zoom-fade;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: zoom-fade;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: zoom-fade;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: zoom-fade;
    -o-animation-duration: 5s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@-webkit-keyframes zoom-fade {
    0% {
        transform: scale(0.9) translateX(-50%);
    }
    50% {
        transform: scale(1) translateX(-50%);
    }
    100% {
        transform: scale(0.9) translateX(-50%);
    }
}

@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 2 Css
--------------------------------------------------------------*/

.zoom-fade-2 {
    animation-name: zoom-fade-2;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: zoom-fade-2;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: zoom-fade-2;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: zoom-fade-2;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: zoom-fade-2;
    -o-animation-duration: 5s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

@-webkit-keyframes zoom-fade-2 {
    0% {
        transform: scale(0.9) translateX(0%) translateY(0%);
    }
    50% {
        transform: scale(1) translateX(0%) translateY(0%);
    }
    100% {
        transform: scale(0.9) translateX(0%) translateY(0%);
    }
}

@keyframes zoom-fade-2 {
    0% {
        transform: scale(0.9) translateX(0%) translateY(0%);
    }
    50% {
        transform: scale(1) translateX(0%) translateY(0%);
    }
    100% {
        transform: scale(0.9) translateX(0%) translateY(0%);
    }
}

/* Image Bounce */

@-webkit-keyframes ImgBounce {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
}

@keyframes ImgBounce {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
}

.img-bounce {
    -webkit-animation: ImgBounce 5s ease-in-out 0s infinite alternate;
    animation: ImgBounce 5s ease-in-out 0s infinite alternate;
}

/***
=============================================
    Float Bob X Animation Css
=============================================
***/

@-webkit-keyframes float-bob-x {
    0% {
        transform: translateX(-30px);
    }
    50% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(-30px);
    }
}

@keyframes float-bob-x {
    0% {
        transform: translateX(-30px);
    }
    50% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(-30px);
    }
}

.float-bob-x {
    -webkit-animation-name: float-bob-x;
    animation-name: float-bob-x;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

/***
=============================================
    Float Bob X 2 Animation Css
=============================================
***/

@-webkit-keyframes float-bob-x-2 {
    0% {
        transform: translateX(-30px) translateY(-50%);
    }
    50% {
        transform: translateX(-10px) translateY(-50%);
    }
    100% {
        transform: translateX(-30px) translateY(-50%);
    }
}

@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 {
    -webkit-animation-name: float-bob-x-2;
    animation-name: float-bob-x-2;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

/*** 
=============================================
    Float Bob Y Animation Css
=============================================
***/

@-webkit-keyframes float-bob-y-2 {
    0% {
        transform: translateY(-20px) rotate(90deg);
        ;
    }
    50% {
        transform: translateY(-10px) rotate(90deg);
        ;
    }
    100% {
        transform: translateY(-20px) rotate(90deg);
        ;
    }
}

@keyframes float-bob-y-2 {
    0% {
        transform: translateY(-20px) rotate(90deg);
        ;
    }
    50% {
        transform: translateY(-10px) rotate(90deg);
        ;
    }
    100% {
        transform: translateY(-20px) rotate(90deg);
        ;
    }
}

.float-bob-y-2 {
    -webkit-animation-name: float-bob-y-2;
    animation-name: float-bob-y-2;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes leftRight {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0px);
    }
}

@keyframes topBottom {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Shape Top Bottom animation */

@keyframes shapeTopBottom {
    0% {
        transform: rotate(45deg) translateY(-0px);
    }
    25% {
        transform: rotate(43deg) translateY(-20px);
    }
    50% {
        transform: rotate(45deg) translateY(-40px);
    }
    75% {
        transform: rotate(43deg) translateY(-20px);
    }
    100% {
        transform: rotate(45deg) translateY(-0px);
    }
}