@keyframes rotateme {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes bounceright {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(3px);
  }
}
.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;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes float-bob {
  0% {
    transform: translateX(-100px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    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;
}

/*** 
  =============================================
      circle Css
  =============================================
  ***/
@keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}
/*** 
  =============================================
      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;
}

@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 bgSlideReverse2 {
  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 banner-animate {
  0% {
    transform: translateX(-1000px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    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;
}

@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);
  }
}
/*** 
  =============================================
      Animation1 Css
  =============================================
  ***/
@keyframes animation1 {
  0%, 100% {
    transform: rotate(0deg) translateX(0);
  }
  25%, 75% {
    transform: rotate(5deg) translateX(15px);
  }
  50% {
    transform: rotate(10deg) translateX(30px);
  }
}
/*** 
  =============================================
      Animation2 Css
  =============================================
  ***/
@keyframes animation2 {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes animation2 {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@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 footerFish {
  0%, 100% {
    transform: translateX(0) translateY(0) rotate(0);
  }
  25%, 75% {
    transform: translateX(20px) translateY(30px) rotate(25deg);
  }
  50% {
    transform: translateX(40px) translateY(60px) rotate(45deg);
  }
}
@keyframes contactSwimmer {
  0%, 100% {
    transform: translateX(0) translateY(0) rotate(0);
  }
  25%, 75% {
    transform: translateX(15px) translateY(20px) rotate(10deg);
  }
  50% {
    transform: translateX(60px) translateY(35px) rotate(15deg);
  }
}
/*** 
  =============================================
      Float Bob Y Animation Css
  =============================================
  ***/
@keyframes float-bob-y {
  0% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-20px);
  }
}
.float-bob-y {
  animation-name: float-bob-y;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@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 service_hexagon_2 {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes service_hexagon_2 {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@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 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
  --------------------------------------------------------------*/
@keyframes bubbleMover {
  0% {
    transform: translateY(0px) translateX(0) rotate(0);
  }
  30% {
    transform: translateY(30px) translateX(50px) rotate(15deg);
    transform-origin: center center;
  }
  50% {
    transform: translateY(50px) translateX(100px) rotate(45deg);
    transform-origin: right bottom;
  }
  80% {
    transform: translateY(30px) translateX(50px) rotate(15deg);
    transform-origin: left top;
  }
  100% {
    transform: translateY(0px) translateX(0) rotate(0);
    transform-origin: center center;
  }
}
.shapemover {
  animation-name: shapeMover;
  animation-duration: 9s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@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-2 {
  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 banner3Shake {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  30% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  60% {
    transform: rotate3d(1, 0, 0, 0deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
}
@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 treeMove {
  0%, 100% {
    transform: rotate(0deg) translateX(0);
  }
  25%, 75% {
    transform: rotate(5deg) translateX(15px);
  }
  50% {
    transform: rotate(10deg) translateX(30px);
  }
}
/*--------------------------------------------------------------
  #     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;
}

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

@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%);
  }
}
/* custom animations */
@keyframes btnIconMove {
  0% {
    transform: rotate(0deg) translate(0px, 0px);
  }
  50% {
    transform: rotate(20deg) translate(10px, 0px);
  }
  100% {
    transform: rotate(0deg) translate(0px, 0px);
  }
}
/* Image Bounce */
@keyframes ImgBounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
  }
}
.img-bounce {
  animation: ImgBounce 5s ease-in-out 0s infinite alternate;
}

/** squares **/
@keyframes -moz-keyframessquares {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  20% {
    transform: scale(1.24);
    opacity: 1;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}
@keyframes squares {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  20% {
    transform: scale(1.24);
    opacity: 1;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}
/***
  =============================================
      Float Bob X Animation Css
  =============================================
  ***/
@keyframes float-bob-x {
  0% {
    transform: translateX(-30px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(-30px);
  }
}
.float-bob-x {
  animation-name: float-bob-x;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/***
  =============================================
      Float Bob X 2 Animation Css
  =============================================
  ***/
@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-name: float-bob-x-2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/*** 
  =============================================
      Float Bob Y Animation Css
  =============================================
  ***/
@keyframes float-bob-y-2 {
  0% {
    transform: translateY(-20%) translateX(-50%);
  }
  50% {
    transform: translateY(-10%) translateX(-50%);
  }
  100% {
    transform: translateY(-20%) translateX(-50%);
  }
}
.float-bob-y-2 {
  animation-name: float-bob-y-2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  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);
  }
}
/*** 
  =============================================
      Slide Css
  =============================================
  ***/
@keyframes slide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 1920px 0;
  }
}
@keyframes textRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.text-rotate-box {
  animation: textRotate 10s linear 0s forwards infinite alternate;
}