@-webkit-keyframes bus-scale {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
  }
  25% {
    -webkit-transform: scale(1.15) rotate(1deg);	
  }
  50% {
    -webkit-transform: scale(0.9) rotate(-1deg);
  }
  75% {
    -webkit-transform: scale(1.15) rotate(1deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0deg);
  }
}

@keyframes bus-scale {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.15) rotate(1deg);
  }
  50% {
    transform: scale(0.95) rotate(-1deg);
  }
  75% {
    transform: scale(1.15) rotate(1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@-webkit-keyframes move-cloud-left {
  0% {
    margin-left: 0%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    margin-left: 40%;
    opacity: 0;
  }
}

@keyframes move-cloud-left {
  0% {
    margin-left: 0%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    margin-left: 40%;
    opacity: 0;
  }
}

@-webkit-keyframes move-cloud-right {
  0% {
    margin-left: 0%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    margin-left: 20%;
    opacity: 0;
  }
}

@keyframes move-cloud-right {
  0% {
    margin-left: 0%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    margin-left: 20%;
    opacity: 0;
  }
}

@-webkit-keyframes water-wave{
  0% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
  }

  33% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
  }

  66% {
    -webkit-transform: translate(-2px, 0px) rotate(-1deg);
  }

  100% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
  }
}

@keyframes water-wave {
  0% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  33% {
    transform: translate(2px, 1px) rotate(0deg);
  }

  66% {
    transform: translate(-2px, 0px) rotate(-1deg);
  }

  100% {
    transform: translate(1px, -1px) rotate(1deg);
  }
}

@-webkit-keyframes cycle-move-step2 {
  0% {    
	right: 43%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {    
	right: 52%;
    opacity: 0;
  }
}

@keyframes cycle-move-step2 {
  0% {
    right: 43%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    right: 52%;
    opacity: 0;
  }
}
@-webkit-keyframes cycle-move-step3 {
  0% {    
	margin-left: 56%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {    
	margin-left: 70%;
    opacity: 0;
  }
}

@keyframes cycle-move-step3 {
  0% {
    margin-left: 56%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1; 
  }

  100% {
    margin-left: 70%;
    opacity: 0;
  }
}

@-webkit-keyframes bike-move {
  0% {    
	left: 26.5%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {    
	 left: 60%;
    opacity: 0;
  }
}

@keyframes bike-move {
  0% {
    left: 26.5%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    left: 60%;
    opacity: 0;
  }
}
@-webkit-keyframes bike-move-step2 {
  0% {    
	left: 30%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {    
	left: 55%;
    opacity: 0;
  }
}

@keyframes bike-move-step2 {
  0% {
    left: 30%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    left: 55%;
    opacity: 0;
  }
}

@-webkit-keyframes car-move {
  0% {    
	left: 33.5%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {    
	left: 53%;
    opacity: 0;
  }
}

@keyframes car-move {
  0% {
    left: 33.5%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    left: 53%;
    opacity: 0;
  }
}

@-webkit-keyframes car-move-step2 {
  0% {    
	left: 52%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {    
	left: 68%;
    opacity: 0;
  }
}

@keyframes car-move-step2 {
  0% {
    left: 52%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    left: 68%;
    opacity: 0;
  }
}

@-webkit-keyframes section-5-hand {
  0% {
    -webkit-transform: rotate(0deg);
  }

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

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

@keyframes section-5-hand {
  0% {
    transform: rotate(0deg);
  }

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

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




@-webkit-keyframes monitor {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(0.5deg);
  }

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

  75% {
    -webkit-transform: rotate(0.5deg);
  }

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

@keyframes monitor {
  0% {
   transform: rotate(0deg);
  }

  25% {
    transform: rotate(0.5deg);
  }

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

  75% {
    transform: rotate(0.5deg);
  }

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


.waveicons{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
	background-size: contain !important;
	z-index: 0;
}
.waveicons > div{ 
	position: absolute;
	background-size: contain !important;
}
.waveimg1{
	background: url(../images/animation/cloud1.png) no-repeat;	
	width: 6.1%;
	height: 1.8%;	
	left: 15%;
	top: 4%;	
}
.waveimg2{
	background: url(../images/animation/cloud2.png) no-repeat;
	width: 7.1%;
	height: 1.4%;	
	left: 1.5%;
	top: 6%
}
.waveimg3{
	background: url(../images/animation/cloud3.png) no-repeat;
	width: 9.5%;
	height: 2.4%;	
	left: 78%;
	top: 1.5%
}
.waveimg4{
	background: url(../images/animation/cloud4.png) no-repeat;
	width: 9.5%;
	height: 2%;	
	left: 9%;
	top: 12%
}
.waveimg5{
	background: url(../images/animation/cloud5.png) no-repeat;
	width: 9%;
	height: 2.4%;
	left: 69%;
	top: 23%
}
.waveimg6{
	background: url(../images/animation/cloud6.png) no-repeat;
	width: 8%;
	height: 1.8%;
	left: 78%;
	top: 15%
}
.waveimg7{
	background: url(../images/animation/cloud7.png) no-repeat;
	width: 9%;
	height: 2.4%;
	left: 90%;
	top: 7%;	
}
.waveimg8{
	background: url(../images/animation/cloud8.png) no-repeat;
	width: 9%;
	height: 2.4%;
	left: 20%;
	top: 21.5%
}

.waveimg1,.waveimg2,.waveimg4,.waveimg8{
	animation-name: move-cloud-left;
	-webkit-animation-name: move-cloud-left;
	-moz-animation-name: move-cloud-left;
	-o-animation-name: move-cloud-left;
}
.waveimg3,.waveimg5,.waveimg6,.waveimg7{
	animation-name: move-cloud-right;
	-webkit-animation-name: move-cloud-right;
	-moz-animation-name: move-cloud-right;
	-o-animation-name: move-cloud-right;
}
.waveimg1,.waveimg2,.waveimg3,.waveimg4,.waveimg5,.waveimg6,.waveimg7,.waveimg8{
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	z-index: 1;
}
.waveimg1 {
	animation-duration: 64s;
	-webkit-animation-duration: 64s;
	-moz-animation-duration: 64s;
	-o-animation-duration: 64s;
}
.waveimg2 {
	animation-duration: 60s;
	-webkit-animation-duration: 60s;
	-moz-animation-duration: 60s;
	-o-animation-duration: 60s;
}
.waveimg3 {
	animation-duration: 62s;
	-webkit-animation-duration: 62s;
	-moz-animation-duration: 62s;
	-o-animation-duration: 62s;
}
.waveimg4 {
	animation-duration: 57s;
	-webkit-animation-duration: 57s;
	-moz-animation-duration: 57s;
	-o-animation-duration: 57s;
}
.waveimg5 {
	animation-duration: 62s;
	-webkit-animation-duration: 62s;
	-moz-animation-duration: 62s;
	-o-animation-duration: 62s;
}
.waveimg6 {
	animation-duration: 64s;
	-webkit-animation-duration: 64s;
	-moz-animation-duration: 64s;
	-o-animation-duration: 64s;
}
.waveimg7{
	animation-duration: 57s;
	-webkit-animation-duration: 57s;
	-moz-animation-duration: 57s;
	-o-animation-duration: 57s;
}
.waveimg8 {
	animation-duration: 62s;
	-webkit-animation-duration: 62s;
	-moz-animation-duration: 62s;
	-o-animation-duration: 62s;
}
/****/
.step1{
	width: 100%;
	height: 34%;
	margin: auto;
	position: relative;
}
.step2{
	width: 100%;
	height: 40%;
	border: 0px solid green;
	margin: auto;
	position: relative;
}
.step3{
	width: 100%;
	height: 26%;
	border: 0px solid brown;
	margin: auto;
	position: relative;
}
.no-csstransitions .step1 .cycle-move{ opacity: 1; }
.step1 .cycle-icon{
	background: url("../images/animation/step1-cycle.png") no-repeat 0 0;	
	background-size: contain;
	bottom: 72.45%;
    height: 3.5%;
    left: 26.5%;
    position: absolute;
    width: 3.75%;
}
.step2 .cycle-icon{
	background: url("../images/animation/step2-left.png") no-repeat 0 0;
	background-size: contain;
	bottom: 72.6%;
	height: 2.5%;
	position: absolute;
	right: 43%;
	width: 3.75%
	
}
.step3 .cycle-icon{
	background: url("../images/animation/step1-cycle.png") no-repeat 0 bottom;
	background-size: contain;
	/**bottom: 30.5%;*/
	bottom: 30.5%;
    height: 4.2%;
    margin-left: 56%;
    position: absolute;
    width: 3.73%;
	
}
.step2 .bike-icon{
	background: url("../images/animation/step2-cycle.png") no-repeat 0 0;
	background-size: contain;
	bottom: 44.2%;
	height: 2.9%;
	left: 30%;
	position: absolute;
	width : 3.8%
}
.step2 .car-icon{
	background: url("../images/animation/car.png") no-repeat 0 bottom;		
	background-size: contain;
	bottom: 8.6%;
    height: 3.7%;
    left: 52%;
    position: absolute;
    width: 5%;
}
.step1 .cycle-icon,.step2 .cycle-icon,.step2 .bike-icon,.step2 .car-icon,.step3 .cycle-icon{
	 animation-duration: 15s;
	-webkit-animation-duration: 15s;
	-moz-animation-duration: 15s;
	-o-animation-duration: 15s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
}
.step1 .cycle-icon{
	 animation-duration: 20s;
	-webkit-animation-duration: 20s;
	-moz-animation-duration: 20s;
	-o-animation-duration: 20s;
}
.step2 .cycle-icon{
	 animation-duration: 10s;
	-webkit-animation-duration: 10s;
	-moz-animation-duration: 10s;
	-o-animation-duration: 10s;
}
.step3 .cycle-icon{
	 animation-duration: 10s;
	-webkit-animation-duration: 10s;
	-moz-animation-duration: 10s;
	-o-animation-duration: 10s;
}
.step1 .cycle-icon.animate-active{
	animation-name: bike-move;
	-webkit-animation-name: bike-move;
	-moz-animation-name: bike-move;
	-o-animation-name: bike-move;
}
.step2 .cycle-icon.animate-active{
	animation-name: cycle-move-step2;
	-webkit-animation-name: cycle-move-step2;
	-moz-animation-name: cycle-move-step2;
	-o-animation-name: cycle-move-step2;
}
.step3 .cycle-icon.animate-active{
	animation-name: cycle-move-step3;
	-webkit-animation-name: cycle-move-step3;
	-moz-animation-name: cycle-move-step3;
	-o-animation-name: cycle-move-step3;
}
.step2 .bike-icon.animate-active{
	animation-name: bike-move-step2;
	-webkit-animation-name: bike-move-step2;
	-moz-animation-name: bike-move-step2;
	-o-animation-name: bike-move-step2;
}
.step2 .car-icon.animate-active{
	animation-name: car-move-step2;
	-webkit-animation-name: car-move-step2;
	-moz-animation-name: car-move-step2;
	-o-animation-name: car-move-step2;
}
.step1 .car-icon{
	background: url("../images/animation/car.png") no-repeat 0 0;	
	background-size: contain;
	bottom: 30.9%;
    height: 3.7%;
    left: 34%;
    position: absolute;
    width: 5%;
	
}
.step1 .car-icon.animate-active{
	animation-name: car-move;
	-webkit-animation-name: car-move;
	-moz-animation-name: car-move;
	-o-animation-name: car-move;
	 animation-duration: 15s;
	-webkit-animation-duration: 15s;
	-moz-animation-duration: 15s;
	-o-animation-duration: 15s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
}
.waterwave-left{	
	width: 30%;
	height: 15%;
	left: 0;
	top: 37%;
	position: absolute;	
	background-size: contain;	
}
.waterwave-right{
    height: 15%;
    position: absolute;
    right: 0;
    top: 30%;
    width: 29%;
	background-size: contain;
}
.waterwave-mid{
	width: 35%;
	height: 13%;
	right: 0;
	top: 27%;
	position: absolute;	
	background-size: contain;
}
.waterwave-bot{
	width: 28%;
	height: 13%;
	left: 0;
	bottom: -6%;
	position: absolute;	
	background-size: contain;
}
.waterwave-left .water1,.waterwave-left .water2,.waterwave-left .water3,
.waterwave-right .water1,.waterwave-right .water2,.waterwave-right .water3,
.waterwave-mid .water1,.waterwave-mid .water2,
.waterwave-bot .water1,.waterwave-bot .water2{
	background: url(../images/animation/water-icon.png) no-repeat;
	width: 13%;
	height: 11%;
	background-size: contain;
	float: left;
	position: absolute;
}
.waterwave-left .water1{ left: 25%; bottom: 76%}
.waterwave-left .water2{ left: 60%; bottom: 43%}
.waterwave-left .water3{left: 40%; bottom: 10%}
.waterwave-right .water1{ left: 10%; bottom: 78%}
.waterwave-right .water2{ left: 58%; bottom: 45%}
.waterwave-right .water3{ left: 36%; bottom: 10%}
.waterwave-mid .water1{ bottom: 75%; left: 13%;}
.waterwave-mid .water2{/* bottom: 43%;*/ left: 29%;bottom: 12% }
.waterwave-bot .water1{ bottom: 72%; left: 13%;}
.waterwave-bot .water2{ bottom: 9%;left: 33%}

.waterwave-left .water1,.waterwave-left .water2 ,.waterwave-left .water3,
.waterwave-right .water1,.waterwave-right .water2 ,.waterwave-right .water3,
.waterwave-mid .water1,.waterwave-mid .water2,.waterwave-bot .water1,.waterwave-bot .water2,
.help-newbies1,.help-newbies2{
	animation-name: water-wave;
	-webkit-animation-name: water-wave;
	-moz-animation-name: water-wave;
	-o-animation-name: water-wave;
	animation-duration: 3s;
	-webkit-animation-duration: 3s;
	-moz-animation-duration: 3s;
	-o-animation-duration: 3s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-o-animation-timing-function: linear;
}
.step3 .bus-icon{
	background: url("../images/animation/bus.png") no-repeat 0 0;
	position: absolute;
	left: 31%;
	bottom: 39%;
	background-size: contain !important;
	width: 7.95%;
	height: 14.8%;
}
.bus-icon > span {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain !important;
  opacity: 0;
}
.step3 .bus-icon.animate-active {
  animation-name: bus-scale;
  -webkit-animation-name: bus-scale;
  -moz-animation-name: bus-scale;
  -o-animation-name: bus-scale;
  animation-duration: 5s;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  -o-animation-duration: 5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

/********************STEPS PAGE ANIMATIONS***************************/
.learnup-outer{
	width: 408px;
	height: 215px;
	margin: 5px auto;
}
.learn-up-bg{
	background: url(../images/animation/learn-up-bg.png) no-repeat left bottom;
	width: 100%;
	height: 100%;
	position: relative;
	background-size: contain
}
.learn-up{
	background: url("../images/animation/learn-up.png") no-repeat 0 0;
	top: 2px;
	position: absolute;
	width: 43%;
	height: 80%;
	left: 29%;
	background-size: contain
}
.learn-up,.monitor {
  animation-name: monitor;
  -webkit-animation-name: monitor;
  -moz-animation-name: monitor;
  -o-animation-name: monitor;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -o-animation-duration: 1.5s;
  -webkit-transform-origin: 50% 50% 50%;
  -moz-transform-origin: 50% 50% 50%;
  -ms-transform-origin: 50% 50% 50%;
  -o-transform-origin: 50% 50% 50%;
  transform-origin: 50% 50% 50%;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
}

.monitor-outer{
	width: 374px;
	height: 177px;
	margin: 30px auto 20px;
}
.monitor-bg{
	background: url(../images/animation/monitor-bg.png) no-repeat left bottom;
	position: relative;
	background-size: contain;
	width: 100%;
	height: 100%;
}
.monitor {
	background: url("../images/animation/monitor.png") no-repeat scroll 0 0;
	background-size: contain;
	height: 72%;
    left: 31%;
    position: absolute;
   /* top: 9px;*/
   top: 5%;
    width: 49%;
	
}


@-webkit-keyframes small-heart-shake {
  0% {
    -webkit-transform: translate(5px, 6px) rotate(2deg);
  }

  10% {
    -webkit-transform: translate(4px, 8px) rotate(-4deg);
  }

  20% {
    -webkit-transform: translate(-6px, 4px) rotate(0deg);
  }

  30% {
    -webkit-transform: translate(-5px, -3px) rotate(0deg);
  }

  40% {
    -webkit-transform: translate(8px, 0px) rotate(2deg);
  }

  50% {
    -webkit-transform: translate(5px, -3px) rotate(0deg);
  }

  60% {
    -webkit-transform: translate(-8px, 6px) rotate(-2deg);
  }

  70% {
    -webkit-transform: translate(4px, -3px) rotate(0deg);
  }

  80% {
    -webkit-transform: translate(5px, -6px) rotate(3deg);
  }

  90% {
    -webkit-transform: translate(-5px, 8px) rotate(0deg);
  }

  100% {
    -webkit-transform: translate(5px, 6px) rotate(2deg);
  }
}

@keyframes small-heart-shake {
  0% {
    transform: translate(5px, 6px) rotate(2deg);
  }

  10% {
    transform: translate(4px, 8px) rotate(-4deg);
  }

  20% {
    transform: translate(-6px, 4px) rotate(0deg);
  }

  30% {
    transform: translate(-5px, -3px) rotate(0deg);
  }

  40% {
    transform: translate(8px, 0px) rotate(2deg);
  }

  50% {
    transform: translate(5px, -3px) rotate(0deg);
  }

  60% {
    transform: translate(-8px, 6px) rotate(-2deg);
  }

  70% {
    transform: translate(4px, -3px) rotate(0deg);
  }

  80% {
    transform: translate(5px, -6px) rotate(3deg);
  }

  90% {
    transform: translate(-5px, 8px) rotate(0deg);
  }

  100% {
    transform: translate(5px, 6px) rotate(2deg);
  }
}
.smoke-effect{
    height: 196px;
    margin: 65px auto 0;
    position: relative;
    width: 375px;
}
.smokebg{
	background: url("../images/animation/bottom.png") no-repeat scroll 0 0;
	background-size: contain;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 10;
}
.parashoot{
	 background: url("../images/animation/parashoot.png") no-repeat scroll 0 0;
	 background-size: contain;
    height: 32%;
    position: absolute;
    right: 13%;
    top: 43%;
    width: 20%;
    z-index: 100;
}
.parashoot {
  animation-name: small-heart-shake;
  -webkit-animation-name: small-heart-shake;
  -moz-animation-name: small-heart-shake;
  -o-animation-name: small-heart-shake;
  animation-duration: 10s;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -o-animation-duration: 10s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
}
/******/
@-webkit-keyframes section-3-wave-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
  15% {
    -webkit-transform: scale(1.2);
  }
  30% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  40% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  45% {
    -webkit-transform: scale(1.2);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  70% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  80% {
    -webkit-transform: scale(1.2);
  }
  95% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

@keyframes section-3-wave-1 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  15% {
    transform: scale(1.2);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  45% {
   transform: scale(1.2);
  }
  60% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: scale(1.2);
  }
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@-webkit-keyframes section-3-wave-2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
  30% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
  35% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  40% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  45% {
    -webkit-transform: scale(1.2);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  70% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  80% {
    -webkit-transform: scale(1.2);
  }
  95% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

@keyframes section-3-wave-2 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  30% {
    opacity: 0;
    transform: scale(1);
  }
  35% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  45% {
    transform: scale(1.2);
  }
  60% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: scale(1.2);
  }
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@-webkit-keyframes section-3-wave-3 {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
  60% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
  70% {
    opacity: 1;
    -webkit-transform: scale(1);
  }     
  80% {
    -webkit-transform: scale(1.2);
  }
  95% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

@keyframes section-3-wave-3 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  60% {
    opacity: 0;
    transform: scale(1);
  }
  70% {
    opacity: 1;
    transform: scale(1);
  }   
  80% {
    opacity: 1;
    transform: scale(1.2);
  }
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.smoke1 {
	background-size: contain;
	background: url("../images/animation/smoke1.png") no-repeat scroll 0 0;
	height: 12.5%;
	left: 57%;
	position: absolute;
	top: 21.5%;
	width: 7%;
}
.smoke2 {
    background: url("../images/animation/smoke2.png") no-repeat scroll 0 0;
	background-size: contain;
    height: 20%;
    left: 61.3%;
    position: absolute;
    top: 8%;
    width: 9.5%;
  
}
.smoke3 {	
	background: url("../images/animation/smoke3.png") no-repeat scroll 0 0;
	background-size: contain;
    height: 34%;
    left: 67%;
    position: absolute;
    top: -14%;
    width: 18%;
}
.smoke1 {
 animation-name: section-3-wave-1;
  -webkit-animation-name: section-3-wave-1;
  -moz-animation-name: section-3-wave-1;
  -o-animation-name: section-3-wave-1;
  animation-duration: 15s;
  -webkit-animation-duration: 15s;
  -moz-animation-duration: 15s;
  -o-animation-duration: 15s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
}
.smoke2 {
  animation-name: section-3-wave-2;
  -webkit-animation-name: section-3-wave-2;
  -moz-animation-name: section-3-wave-2;
  -o-animation-name: section-3-wave-2;
  animation-duration: 15s;
  -webkit-animation-duration: 15s;
  -moz-animation-duration: 15s;
  -o-animation-duration: 15s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
}
.smoke3 {
  animation-name: section-3-wave-3;
  -webkit-animation-name: section-3-wave-3;
  -moz-animation-name: section-3-wave-3;
  -o-animation-name: section-3-wave-3;
  animation-duration: 15s;
  -webkit-animation-duration: 15s;
  -moz-animation-duration: 15s;
  -o-animation-duration: 15s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
}
/*****/
@-webkit-keyframes handlemove {	
	0%{
        margin-top: 0%;
    }     
	50% {
        margin-top: 10%;
    }	
}
@keyframes handlemove {
	0%{
        margin-top: 0%;
    }	
    50% {
        margin-top: 10%;
    }   
}
.pump{
	background: url("../images/animation/pump.png") no-repeat scroll 0 0;
	background-size: contain;
    height: 35%;
    left: 29.3%;
    position: absolute;
    top: -30%;
    width: 20%;
    z-index: 0;
}
.pump {
 	animation-name: handlemove;
	-webkit-animation-name: handlemove;
	-moz-animation-name: handlemove;
	-o-animation-name: handlemove;
	animation-duration: 5s;
	-webkit-animation-duration: 5s;
	-moz-animation-duration: 5s;
	-o-animation-duration: 5s;	
	animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	-moz-animation-timing-function: ease;
	-o-animation-timing-function: ease;
}


/****SPIN****/
 
 @-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
 }
  .cycle-wheel{
	height: 233px;
	margin: auto;
	position: relative;
	width: 399px;
 }
 .cycle-bg{
	background: url(../images/animation/cycle-bg.png) no-repeat left bottom;
	height: 100%;
	width: 100%;
	z-index: 10;
	position: relative;
	background-size: contain;
}

 .wheel-front,.wheel-back {
	background: url(../images/animation/wheel.png) no-repeat left top;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	width: 107px;
	height: 107px;
	position: absolute;
	background-size: contain;
	/*top: 49px;*/
	top: 21%
}
.wheel-front{right: 18.5%;}
.wheel-back{left: 16%}
 
 
@-webkit-keyframes target {
  0% {
    -webkit-transform: translate(0, 2px) rotate(4deg);
  }

  33% {
    -webkit-transform: translate(-20px, 6px) rotate(-3deg);
  }

  66% {
    -webkit-transform: translate(20px, 4px) rotate(3deg);
  }

  100% {
    -webkit-transform: translate(0px, 2px) rotate(4deg);
  }
}

@keyframes target {
  0% {
    transform: translate(0, 2px) rotate(4deg);
  }

  33% {
    transform: translate(-20px, 6px) rotate(-3deg);
  }

  66% {
    transform: translate(20px, 4px) rotate(3deg);
  }

  100% {
    transform: translate(0px, 2px) rotate(4deg);
  }
}

.target-outer{
	height: 204px;
	margin: 12px auto 34px;
	position: relative;
	width: 403px;
}
.target-bg{
	background: url(../images/animation/target-bg.png) no-repeat left bottom;
	width: 100%;
	height: 100%;
	background-size: contain
}
 .target {
   background: url("../images/animation/target-board.png") no-repeat 0 0;
   background-size: contain;
   height: 80%;
   left: 25.5%;
   position: absolute;
   top: -8px;
   width: 41%;
	
}
.target {
  animation-name: target;
  -webkit-animation-name: target;
  -moz-animation-name: target;
  -o-animation-name: target;
  animation-duration: 5s;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  -o-animation-duration: 5s;
  -webkit-transform-origin: 50% 50% 50%;
  -moz-transform-origin: 50% 50% 50%;
  -ms-transform-origin: 50% 50% 50%;
  -o-transform-origin: 50% 50% 50%;
  transform-origin: 50% 50% 50%;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
}


/*HAND SHAKE*/
@-webkit-keyframes section-5-hand {
  0% {
    -webkit-transform: rotate(0deg);
  }

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

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

@keyframes section-5-hand {
  0% {
    transform: rotate(0deg);
  }

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

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

.rules-outer{
	height: 224px;
	margin: auto auto 35px auto;
	position: relative;
	width: 387px;
}
.rulesbg {
	background: url(../images/animation/steps-onbkie.png) no-repeat;
	width: 100%;
	height: 100%;
	background-size: contain
}
.handshake{	
	background: url("../images/animation/up-hand.png") no-repeat scroll 0 0;
    height: 15px;
    left: 152px;
    position: absolute;
    top: 37px;
    width: 20px;
	background-size: contain
}

.handshake {
  animation-name: section-5-hand;
  -webkit-animation-name: section-5-hand;
  -moz-animation-name: section-5-hand;
  -o-animation-name: section-5-hand;
  animation-duration: 4s;
  -webkit-animation-duration: 4s;
  -moz-animation-duration: 4s;
  -o-animation-duration: 4s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  -webkit-transform-origin: 80% 60% 0;
  -moz-transform-origin: 80% 60% 0;
  -ms-transform-origin: 80% 60% 0;
  -o-transform-origin: 80% 60% 0;
  transform-origin: 80% 60% 0;
}


/*HEART ANIMATION*/

.heartbg{
	background: url(../images/animation/heart-bg.png) no-repeat 0 bottom;
	width: 364px;
	height: 201px;
	position: relative;
	margin: 13px auto 35px;
	background-size: contain
}
.smallheart{
	background: url("../images/animation/small-heart.png") no-repeat scroll 0 0;
	background-size: contain;
    height: 27%;
    position: absolute;
    right: 0;
    top: -10px;
    width: 17%;
}
.smallheart {
  animation-name: small-heart-shake;
  -webkit-animation-name: small-heart-shake;
  -moz-animation-name: small-heart-shake;
  -o-animation-name: small-heart-shake;
  animation-duration: 10s;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -o-animation-duration: 10s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
}

/******/

@-webkit-keyframes section-6-fire {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
  }
  25% {
    -webkit-transform: scale(1.25) rotate(1deg);	
  }
  50% {
    -webkit-transform: scale(0.9) rotate(-1deg);
  }
  75% {
    -webkit-transform: scale(1.25) rotate(1deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0deg);
  }
}

@keyframes section-6-fire {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.15) rotate(1deg);
  }
  50% {
    transform: scale(0.95) rotate(-1deg);
  }
  75% {
    transform: scale(1.17) rotate(1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@-webkit-keyframes section-6-fire-2 {
  0% {	
    opacity: 0;
  }
  30% {	
    opacity: 0;
  }
  40% {	
    opacity: 0.4;
  } 
  50% {
    opacity: 0.8;
  }   
  60% {
    opacity: 0.8;
  }  
  70% {
    opacity: 0.8;
  }
  80% {	
    opacity: 0.4;
  } 
  90% {	
    opacity: 0;
  }   
  100% {	
    opacity: 0;
  } 
}

@keyframes section-6-fire-2 {
  0% {	
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {	
    opacity: 0.4;
  } 
  50% {
    opacity: 0.8;
  }    
  60% {
    opacity: 0.8;
  }  
  70% {
    opacity: 0.8;
  }
  80% {	
    opacity: 0.4;
  }
  90% {	
    opacity: 0;
  }    
  100% {	
    opacity: 0;
  } 
}

.dbigheart{
	background: url("../images/animation/dpink-heart.png") no-repeat scroll 0 0;
	background-size: contain;
    height: 80%;
    left: 31.5%;
    position: absolute;
    top: 8%;
    width: 50%;
	
}
.lbigheart{
	background: url(../images/animation/lpink-heart.png) no-repeat;
	width: 250px;
	height: 219px;
}
.ie7 .lbigheart,.ie8 .lbigheart{display: none}
.dbigheart .lbigheart {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain !important;
  opacity: 0;
  left: 0;
  top: 0
}
.dbigheart {
  animation-name: section-6-fire;
  -webkit-animation-name: section-6-fire;
  -moz-animation-name: section-6-fire;
  -o-animation-name: section-6-fire;
  animation-duration: 6s;
  -webkit-animation-duration: 6s;
  -moz-animation-duration: 6s;
  -o-animation-duration: 6s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  -webkit-transform-origin: 50% 50% 0;
  -moz-transform-origin: 50% 50% 0;
  -ms-transform-origin: 50% 50% 0;
  -o-transform-origin: 50% 50% 0;
  transform-origin: 50% 50% 0;
}
.dbigheart .lbigheart {
  animation-name: section-6-fire-2;
  -webkit-animation-name: section-6-fire-2;
  -moz-animation-name: section-6-fire-2;
  -o-animation-name: section-6-fire-2;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
}


.help-outer{
	width: 364px;
	height: 208px;
	position: relative;
	margin: 20px auto 23px
}
.help-newbiesbg{
	background: url(../images/animation/help-new.png) no-repeat left top;
	width: 100%;
	height: 100%;
	background-size: contain;
}
.help-newbies1{
	background: url(../images/animation/help-new1.png) no-repeat;
	background-size: contain;
	width: 27%;
	height: 21%;
	float: left;	
	position: absolute;	
	left: 3%;top: 7%
}

.help-newbies2{
	background: url(../images/animation/help-new2.png) no-repeat;
	background-size: contain ;
	width: 23%;
	height: 20%;
	float: left;	
	position: absolute;	
	right: -3px;
	top: 24.5%
}


@-webkit-keyframes section-3-wave-1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
  15% {
    -webkit-transform: scale(1.2);
  }
  30% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  40% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  45% {
    -webkit-transform: scale(1.2);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  70% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  80% {
    -webkit-transform: scale(1.2);
  }
  95% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

@keyframes section-3-wave-1 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  15% {
    transform: scale(1.2);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  45% {
   transform: scale(1.2);
  }
  60% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: scale(1.2);
  }
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@-webkit-keyframes section-3-wave-2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
  30% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
  35% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  40% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  45% {
    -webkit-transform: scale(1.2);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  70% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  80% {
    -webkit-transform: scale(1.2);
  }
  95% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

@keyframes section-3-wave-2 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  30% {
    opacity: 0;
    transform: scale(1);
  }
  35% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  45% {
    transform: scale(1.2);
  }
  60% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: scale(1.2);
  }
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@-webkit-keyframes section-3-wave-3 {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
  30% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
  60% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
  72% {
    opacity: 1;
    -webkit-transform: scale(1);
  }     
  80% {
    -webkit-transform: scale(1.2);
  }
  95% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

@keyframes section-3-wave-3 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  30% {
    opacity: 0;
    transform: scale(1);
  }
  60% {
    opacity: 0;
    transform: scale(1);
  }
  72% {
    opacity: 1;
    transform: scale(1);
  }   
  80% {
    opacity: 1;
    transform: scale(1.2);
  }
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.speakerbg{
	background: url(../images/animation/speaker-bg.png) no-repeat;
	width: 363px;
	height: 179px;
	position: relative;
	margin: 20px auto 50px;
	background-size: contain;
}
.speaker-wave1 {
    background: url("../images/animation/wave1.png") no-repeat scroll 0 0;
    background-size: contain;
    height: 32.6%;
    left: 67.5%;
    position: absolute;
    top: 12.2%;
    width: 8%;
}
.speaker-wave2 {
    background: url("../images/animation/wave2.png") no-repeat scroll 0 0;
    background-size: contain;
    height: 43%;
    left: 71%;
    position: absolute;
    top: 5.8%;
    width: 10%;
}
.speaker-wave3 {
    background: url("../images/animation/wave3.png") no-repeat scroll 0 0;
    background-size: contain;
    height: 50%;
    left: 74.5%;
    position: absolute;
    top: 2%;
    width: 10%;
}
.speaker-wave1 {
  animation-name: section-3-wave-1;
  -webkit-animation-name: section-3-wave-1;
  -moz-animation-name: section-3-wave-1;
  -o-animation-name: section-3-wave-1;
  animation-duration: 10s;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -o-animation-duration: 10s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
}
.speaker-wave2 {
  animation-name: section-3-wave-2;
  -webkit-animation-name: section-3-wave-2;
  -moz-animation-name: section-3-wave-2;
  -o-animation-name: section-3-wave-2;
  animation-duration: 10s;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -o-animation-duration: 10s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
}
.speaker-wave3 {
  animation-name: section-3-wave-3;
  -webkit-animation-name: section-3-wave-3;
  -moz-animation-name: section-3-wave-3;
  -o-animation-name: section-3-wave-3;
  animation-duration: 10s;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -o-animation-duration: 10s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
}


.step1-link{
	bottom: 40.9%;
    height: 16.6%;
    left: 59.3%;
    position: absolute;
    width: 22%;
}
.step2-link{
	height: 14.2%;
    left: 21.1%;
    position: absolute;
    top: 25.9%;
    width: 21.5%;
}
.step3-link{
	height: 21.7%;
    left: 54.9%;
    position: absolute;
    bottom: 72.5%;
    width: 21.6%;
}
.step1-link a,.step2-link a,.step3-link a{
	display: block;
	background: url(../images/step1.png) no-repeat left 0;
	width: 100%;
	height: 100%;
	background-size: 100%;
}
.step2-link a{background-image: url(../images/step2.png)}
.step3-link a{background-image: url(../images/step3.png)}/*
*/
.step1-link a:hover,.step2-link a:hover,.step3-link a:hover{background-position: 0 100%}
/*
.step1-link a:hover{background-image: url(../images/step1-linkH.png)}
.step2-link a:hover{background-image: url(../images/step2-linkH.png)}
.step3-link a:hover{background-image: url(../images/step3-linkH.png)}
*/


@media only screen and (max-width:480px){
	.learnup-outer{width: 290px;height: 150px}
	.monitor-outer{width: 290px;height: 137px}
	.cycle-wheel{width: 290px;height: 169px}
	.wheel-front, .wheel-back{width: 77px;height: 77px}
	.target-outer{width: 290px;height: 147px}
	.rules-outer{width: 290px;height: 168px}
	.handshake{ 
		background-image: url("../images/animation/up-hand-new.png");
		background-size: 13px 10px;
		height: 10px;
		left: 115.5px;
		top: 28px;
		width: 13px
	}
	.help-outer{width: 290px;height: 166px;}
	.speakerbg{width: 290px;height: 132px}
	.speaker-wave1{left: 62.5%;}
	.speaker-wave2{ left: 66%;}
	.speaker-wave3{left: 68.5%}
	.heartbg{width: 290px;height: 160px}
	.smoke-effect{width: 290px;height: 152px}
	.target{top: -6px}
}