/* floating Bubbles animation */
.floating-ball-model-1 span.floating-ball-1 {
	position: absolute;
    left: 160px;
    top: 50px;
    width: 81px;
    z-index: 0;
    height: 80px;
   background: url('../img/pro/1.png')center center no-repeat;
}




.floating-ball-model-1 span.floating-ball-2 {
    position: absolute;
    right: 2%;
    top: -3%;
    z-index: 0;
    width: 157px;
    height: 178px;
      background: url('../img/pro/cloud.png')center center no-repeat;
}
.floating-ball-model-1 span.floating-ball-3 {
	position: absolute;
    left: 10%;
    top: auto;
	bottom: 0%;
    z-index: 0;
    width: 60px;
    height: 60px;
    background: url(assets/images/float-img/3.png) center center no-repeat;
}
.floating-ball-model-2 span.floating-ball-1 {
    position: absolute;
    right: 11%;
    top: 40px;
    width: 100px;
    z-index: 0;
    height: 78px;
 
    background: url('../img/pro/1.png')center center no-repeat;
}
.floating-ball-model-2 span.floating-ball-2 {
	position: absolute;
    right: 35%;
    bottom: 4%;
    z-index: 0;
    width: 60px;
    height: 37px;
         background: url('../img/welcome/3.png')center center no-repeat
}
.floating-ball-model-2 span.floating-ball-3 {
	position: absolute;
    left: 100px;
    top: 35px;
    z-index: 0;
    width: 100px;
    height: 100px;
      background: url('../img/pro/2.png')center center no-repeat
}
.floating-ball-model-3 span.floating-ball-1 {
    position: absolute;
    left: 0%;
    top: 10%;
    width: 85px;
    z-index: 0;
    height: 85px;
      background: url('../img/welcome/1.png')center center no-repeat
}
.floating-ball-model-3 span.floating-ball-2 {
    position: absolute;
    right: 10%;
    top: 2%;
    z-index: 0;
	width: 58px;
    height: 58px;
	  background: url('../img/welcome/2.png')center center no-repeat
}
.floating-ball-model-3 span.floating-ball-3 {
    position: absolute;
    right: 30%;
    top: 80%;
    width: 98px;
    height: 100px;
    background: url(assets/images/float-img/9.png) center center no-repeat;
}
.shape-before::before {
    content: "";
    background: url(assets/images/float-img/side-3.png);
    width: 100%;
    height: 263px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -20px;
    left: -155px;
}
/* Animations */
/* floating-ball-model-1 */
.floating-ball-model-1 > span {
    animation-name: floating-ball-model-1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: floating-ball-model-1;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: floating-ball-model-1;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: floating-ball-model-1;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: floating-ball-model-1;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}	
/* Bob */
@-webkit-keyframes floating-ball-model-1 {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}
@keyframes floating-ball-model-1 {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}
/* .floating-ball-model-2 */
.floating-ball-model-2 > span {
    animation-name: fadeInRight;
    animation-duration: 3000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: fadeInRight;
    -webkit-animation-duration: 3000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: fadeInRight;
    -moz-animation-duration: 3000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: fadeInRight;
    -ms-animation-duration: 3000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: fadeInRight;
    -o-animation-duration: 3000ms;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
.floating-ball-model-3 > span {
	animation-name: hvr-pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: hvr-pulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: hvr-pulse;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: hvr-pulse;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: hvr-pulse;
    -o-animation-duration: 1s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}	
@-webkit-keyframes hvr-pulse {
25%{-webkit-transform:scale(1.1);transform:scale(1.1);}
75%{-webkit-transform:scale(0.9);transform:scale(0.9);}
}
@keyframes hvr-pulse {
25%{-webkit-transform:scale(1.1);transform:scale(1.1);}
75%{-webkit-transform:scale(0.9);transform:scale(0.9);}
}





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





@keyframes move2 {
	0% {
		background-position: right 0% bottom 0;
	}
	100% {
		background-position: right 100% bottom 0;
	}
}



.aero{
    position: relative;
    height: 200px;
}

.waveHorizontalaero {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	background-repeat: repeat-x;
	-webkit-animation: move 12s linear infinite;
	animation: move2 12s linear infinite;
    background: url('../img/welcome/aero.png') no-repeat;
    top: 0px;
}













@keyframes move {
	0% {
		background-position: left 0px bottom 0;
	}
	100% {
		background-position: left 350px bottom 0;
	}
}

/* Waves animation */

.waveHorizontals {
	width: 100%;
	height: 40px;
	position: relative;
	bottom: 0;
    z-index: 6
	
}

.waveHorizontal {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	background-repeat: repeat-x;
	-webkit-animation: move 12s linear infinite;
	animation: move 12s linear infinite;
    top: -100%;
}

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

#waveHorizontal1 {
	background-size: 100px 100px;
	opacity: 0.3;
}

#waveHorizontal2 {
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
	-webkit-animation-duration: 12s;
	animation-duration: 12s;
	opacity: 0.5;
}

#waveHorizontal3 {
	-webkit-animation-delay: -4s;
	animation-delay: -4s;
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
}


#waveHorizontal1, #waveHorizontal2, #waveHorizontal3 {
    background:url('../img/feature/wave.png') repeat-x;
    -webkit-animation-delay: -4s;
}