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





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





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







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

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




/*** 
=============================================
    zoom in out 2 css
=============================================
***/
.zoominout-2{
  animation-name: zoominout; 
  animation-duration: 3s; 
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;

-webkit-animation-name: zoominout2; 
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;

-moz-animation-name: zoominout2; 
  -moz-animation-duration: 3s; 
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;

-ms-animation-name: zoominout2; 
  -ms-animation-duration: 3s; 
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: ease-in-out;

-o-animation-name: zoominout2; 
  -o-animation-duration: 3s; 
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: ease-in-out;
}
@-webkit-keyframes zoominout2 {
0% {
  -webkit-transform: rotate(0deg) scale(0.7);
  transform: rotate(0deg) scale(0.7);
opacity:0;
}

50% {
  -webkit-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1);
opacity:1;
}

100% {
  -webkit-transform: rotate(0deg) scale(0.7);
  transform: rotate(0deg) scale(0.7);
opacity:0;
}
}



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



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






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







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


/*** 
=============================================
    animation1 css
=============================================
***/
@-webkit-keyframes animation1 {
	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 animation1 {
	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);
	}
}



/*** 
=============================================
    animation2 css
=============================================
***/
@animation2{0%{-webkit-transform:rotatey(0deg);transform:rotatey(0deg)}100%{-webkit-transform:rotatey(360deg);transform:rotatey(360deg)}}@-moz-keyframes animation2{0%{-moz-transform:rotatey(0deg);transform:rotatey(0deg)}100%{-moz-transform:rotatey(360deg);transform:rotatey(360deg)}}@-o-keyframes animation2{0%{-o-transform:rotatey(0deg);transform:rotatey(0deg)}100%{-o-transform:rotatey(360deg);transform:rotatey(360deg)}}@keyframes animation2{0%{-webkit-transform:rotatey(0deg);-moz-transform:rotatey(0deg);-o-transform:rotatey(0deg);transform:rotatey(0deg)}100%{-webkit-transform:rotatey(360deg);-moz-transform:rotatey(360deg);-o-transform:rotatey(360deg);transform:rotatey(360deg)}}









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

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

@-webkit-keyframes ribbonrotate {

	0%,
	100% {
		-webkit-transform: rotate(0);
		        transform: rotate(0);
	}

	25%,
	75% {
		-webkit-transform: rotate(15deg);
		        transform: rotate(15deg);
	}

	50% {
		-webkit-transform: rotate(30deg);
		        transform: rotate(30deg);
	}
}

@keyframes ribbonrotate {

	0%,
	100% {
		-webkit-transform: rotate(0);
		        transform: rotate(0);
	}

	25%,
	75% {
		-webkit-transform: rotate(15deg);
		        transform: rotate(15deg);
	}

	50% {
		-webkit-transform: rotate(30deg);
		        transform: rotate(30deg);
	}
}



@-webkit-keyframes footerfish {

	0%,
	100% {
		-webkit-transform: translatex(0) translatey(0) rotate(0);
		transform: translatex(0) translatey(0) rotate(0);
	}

	25%,
	75% {
		-webkit-transform: translatex(20px) translatey(30px) rotate(25deg);
		transform: translatex(20px) translatey(30px) rotate(25deg);
	}

	50% {
		-webkit-transform: translatex(40px) translatey(60px) rotate(45deg);
		transform: translatex(40px) translatey(60px) rotate(45deg);
	}
}

@keyframes footerfish {

	0%,
	100% {
		-webkit-transform: translatex(0) translatey(0) rotate(0);
		transform: translatex(0) translatey(0) rotate(0);
	}

	25%,
	75% {
		-webkit-transform: translatex(20px) translatey(30px) rotate(25deg);
		transform: translatex(20px) translatey(30px) rotate(25deg);
	}

	50% {
		-webkit-transform: translatex(40px) translatey(60px) rotate(45deg);
		transform: translatex(40px) translatey(60px) rotate(45deg);
	}
}

@-webkit-keyframes contactswimmer {

	0%,
	100% {
		-webkit-transform: translatex(0) translatey(0) rotate(0);
		transform: translatex(0) translatey(0) rotate(0);
	}

	25%,
	75% {
		-webkit-transform: translatex(15px) translatey(20px) rotate(10deg);
		transform: translatex(15px) translatey(20px) rotate(10deg);
	}

	50% {
		-webkit-transform: translatex(60px) translatey(35px) rotate(15deg);
		transform: translatex(60px) translatey(35px) rotate(15deg);
	}
}

@keyframes contactswimmer {

	0%,
	100% {
		-webkit-transform: translatex(0) translatey(0) rotate(0);
		transform: translatex(0) translatey(0) rotate(0);
	}

	25%,
	75% {
		-webkit-transform: translatex(15px) translatey(20px) rotate(10deg);
		transform: translatex(15px) translatey(20px) rotate(10deg);
	}

	50% {
		-webkit-transform: translatex(60px) translatey(35px) rotate(15deg);
		transform: translatex(60px) translatey(35px) rotate(15deg);
	}
}




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



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



@service_hexagon_2{0%{-webkit-transform:rotatey(0deg);transform:rotatey(0deg)}100%{-webkit-transform:rotatey(360deg);transform:rotatey(360deg)}}@-moz-keyframes service_hexagon_2{0%{-moz-transform:rotatey(0deg);transform:rotatey(0deg)}100%{-moz-transform:rotatey(360deg);transform:rotatey(360deg)}}@-o-keyframes service_hexagon_2{0%{-o-transform:rotatey(0deg);transform:rotatey(0deg)}100%{-o-transform:rotatey(360deg);transform:rotatey(360deg)}}@keyframes service_hexagon_2{0%{-webkit-transform:rotatey(0deg);-moz-transform:rotatey(0deg);-o-transform:rotatey(0deg);transform:rotatey(0deg)}100%{-webkit-transform:rotatey(360deg);-moz-transform:rotatey(360deg);-o-transform:rotatey(360deg);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);
    }
}
@-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
--------------------------------------------------------------*/
@-webkit-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;
  }
}

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

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


@keyframes shapemover-2 {

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



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

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

@-webkit-keyframes treemove {

  0%,
  100% {
      transform: rotate(0deg) translatex(0);
  }

  25%,
  75% {
      transform: rotate(5deg) translatex(15px);
  }

  50% {
      transform: rotate(10deg) translatex(30px);
  }
}

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

@-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(-50%) translatey(-50%);
  }

  50% {
      transform: scale(1) translatex(-50%) translatey(-50%);
  }

  100% {
      transform: scale(0.9) translatex(-50%) translatey(-50%);
  }
}

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


























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

@keyframes imgbounce {
    0% {
        transform: translatey(0);
    }

    25% {
        transform: translatey(5px);
    }

    50% {
        transform: translatey(10px);
    }

    75% {
        transform: translatey(5px);
    }

    100% {
        transform: translatey(0px);
    }
}






  /** squares **/

  @-moz-keyframessquares{0%{-webkit-transform:scale(1);transform:scale(1);opacity:0}20%{-webkit-transform:scale(1.24);transform:scale(1.24);opacity:1}100%{-webkit-transform:scale(2.1);transform:scale(2.1);opacity:0}}
  @-moz-keyframes squares{0%{-moz-transform:scale(1);transform:scale(1);opacity:0}20%{-moz-transform:scale(1.24);transform:scale(1.24);opacity:1}100%{-moz-transform:scale(2.1);transform:scale(2.1);opacity:0}}
  @-o-keyframes squares{0%{-o-transform:scale(1);transform:scale(1);opacity:0}20%{-o-transform:scale(1.24);transform:scale(1.24);opacity:1}100%{-o-transform:scale(2.1);transform:scale(2.1);opacity:0}}
  @keyframes squares{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:0}20%{-webkit-transform:scale(1.24);-moz-transform:scale(1.24);-o-transform:scale(1.24);transform:scale(1.24);opacity:1}100%{-webkit-transform:scale(2.1);-moz-transform:scale(2.1);-o-transform:scale(2.1);transform:scale(2.1);opacity:0}} 

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