/*------------------ Clouds ------------- */
#clouds { position: relative; top:0; -webkit-animation: move 20s infinite linear; -moz-animation: move 20s infinite linear;  
-ms-animation: move 20s infinite linear; z-index: 1; }

.cloud1{ position: absolute; top: 0px; right: 0px; width: 100%;}
.cloud2{ position: absolute; top: 30px; left: 675px; width: 100%;}
.cloud3{ position: absolute; top: 60px; right: 220px; width: 100%;}

.cloud1 {

 -moz-transition:		opacity 0.5s ease-out; 
  -o-transition:		opacity 0.5s ease-out; 
  -webkit-transition:	opacity 0.5s ease-out; 
  -ms-transition: 		opacity 0.5s ease-out;
  
    /* -webkit-animation: cloudMove1 6s linear infinite;
    -moz-animation:    cloudMove1 6s linear infinite; */
	
	/* Ankit Code*/
	-webkit-animation: cloudMove1 30s linear infinite;
    -moz-animation:    cloudMove1 30s linear infinite;
	
}
.cloud2 {
  
  -moz-transition:  opacity 0.5s ease-out; 
  -o-transition: opacity 0.5s ease-out; 
    -webkit-transition: opacity 0.5s ease-out; 
  -ms-transition: opacity 0.5s ease-out; 

    -webkit-animation: cloudMove2 27s linear infinite;
    -moz-animation:    cloudMove2 27s linear infinite;
}

.cloud3 {
  
  -moz-transition:  opacity 0.5s ease-out; 
  -o-transition: opacity 0.5s ease-out; 
    -webkit-transition: opacity 0.5s ease-out; 
  -ms-transition: opacity 0.5s ease-out; 

    -webkit-animation: cloudMove3 35s linear infinite;
    -moz-animation:    cloudMove3 35s linear infinite;
}

@-webkit-keyframes cloudMove1 {
    100% { left: 100%; }
    0% { left: 0%; }
}
@-moz-keyframes cloudMove1 {
    100% { left: 100%; }
    0% { left: 0%; }
   
}
@-ms-keyframes cloudMove1 {
    100% { left: 100%; }
    0% { left: 0%; }
}
@-o-keyframes cloudMove1 {
    100% { left: 100%; }
    0% { left: 0%; }
}

@-webkit-keyframes cloudMove2 {
    100% { left: 120%; }
    0% { left: 0%; }
}
@-moz-keyframes cloudMove2 {
    100% { left: 120%; }
    0% { left: 0%; }
   
}
@-ms-keyframes cloudMove2 {
    100% { left: 120%; }
    0% { left: 0%; }
}
@-o-keyframes cloudMove2 {
    100% { left: 120%; }
    0% { left: 0%; }
}

@-webkit-keyframes cloudMove3 {
    100% { left: 110%; }
    0% { left: 0%; }
}
@-moz-keyframes cloudMove3 {
    100% { left: 110%; }
    0% { left: 0%; }
   
}
@-ms-keyframes cloudMove3 {
    100% { left: 110%; }
    0% { left: 0%; }
}
@-o-keyframes cloudMove3 {
    100% { left: 110%; }
    0% { left: 0%; }
}



.cartoon, #recommended-shcool {
   text-align: center;    
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    border-radius:50%;
    animation: m1 2s infinite;
    -webkit-animation: bounce 2s infinite;
    -moz-animation: bounce 2s infinite;
    -o-animation: bounce 2s infinite;
}
 
 .cartoon{  -webkit-animation-play-state: paused; 
    animation-play-state: paused;  }
 
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-10px);}
    60% {-webkit-transform: translateY(-5px);}
}
 
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-10px);}
    60% {-moz-transform: translateY(-5px);}
}
 
@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-10px);}
    60% {-o-transform: translateY(-5px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}


@-webkit-keyframes mbounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-5px);}
    60% {-webkit-transform: translateY(-2px);}
}
 
@-moz-keyframes mbounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-5px);}
    60% {-moz-transform: translateY(-2px);}
}
 
@-o-keyframes mbounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-5px);}
    60% {-o-transform: translateY(-2px);}
}
@keyframes mbounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-5px);}
    60% {transform: translateY(-2px);}
}


 





/*------------- Separator --------*/
#separator{ background: url(../images/road-separator.jpg) 0 0 repeat-x; min-height: 68px; position: relative; overflow: hidden;} 
.car1 {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  -moz-transition:  opacity 0.5s ease-out; 
  -o-transition: opacity 0.5s ease-out; 
    -webkit-transition: opacity 0.5s ease-out; 
  -ms-transition: opacity 0.5s ease-out; 

    -webkit-animation: moveSlideshow1 10s linear infinite;
    -moz-animation:    moveSlideshow1 10s linear infinite;
}
.car2{ position: absolute; top: 20px; right: 0px; width: 100%;}
.car3{ position: absolute; top: 20px; left: 675px; width: 100%;}
.car4{ position: absolute; top: 24px; right: 220px; width: 100%;}

.car2 {
  
  -moz-transition:  opacity 0.5s ease-out; 
  -o-transition: opacity 0.5s ease-out; 
    -webkit-transition: opacity 0.5s ease-out; 
  -ms-transition: opacity 0.5s ease-out; 

    -webkit-animation: moveSlideshow2 8s linear infinite;
    -moz-animation:    moveSlideshow2 8s linear infinite;
}
.car3 {
  
  -moz-transition:  opacity 0.5s ease-out; 
  -o-transition: opacity 0.5s ease-out; 
    -webkit-transition: opacity 0.5s ease-out; 
  -ms-transition: opacity 0.5s ease-out; 

    -webkit-animation: moveSlideshow3 18s linear infinite;
    -moz-animation:    moveSlideshow3 18s linear infinite;
}

.car4 {
  
  -moz-transition:  opacity 0.5s ease-out; 
  -o-transition: opacity 0.5s ease-out; 
    -webkit-transition: opacity 0.5s ease-out; 
  -ms-transition: opacity 0.5s ease-out; 

    -webkit-animation: moveSlideshow4 13s linear infinite;
    -moz-animation:    moveSlideshow4 13s linear infinite;
}

@-webkit-keyframes moveSlideshow1 {
    100% { left: 100%; }
    0% { left: 0; }
}
@-moz-keyframes moveSlideshow1 {
    100% { left: 100%; }
    0% { left: 0px; }
}
@-ms-keyframes moveSlideshow1 {
    100% { left: 100%; }
    0% { left: 0px; }
}
@-o-keyframes moveSlideshow1 {
    100% { left: 100%; }
    0% { left: 0px; }
}
@-webkit-keyframes moveSlideshow2 {
    100% { left: -0%; }
    0% { left: 100%; }
}
@-moz-keyframes moveSlideshow2 {
    100% { left: -0%; }
    0% { left: 100%; }
   
}
@-ms-keyframes moveSlideshow2 {
    100% { right: -0%; }
    0% { right: 100; }
}
@-o-keyframes moveSlideshow2 {
    100% { right: -0%; }
    0% { right: 100%; }
}

@-webkit-keyframes moveSlideshow3 {
    100% { left: -0%; }
    0% { left: 120%; }
}
@-moz-keyframes moveSlideshow3 {
    100% { left: -0%; }
    0% { left: 120%; }
   
}
@-ms-keyframes moveSlideshow3 {
    100% { right: -0%; }
    0% { right: 120; }
}
@-o-keyframes moveSlideshow3 {
    100% { right: -0%; }
    0% { right: 120%; }
}

@-webkit-keyframes moveSlideshow4 {
    100% { left: -0%; }
    0% { left: 101%; }
}
@-moz-keyframes moveSlideshow4 {
    100% { left: -0%; }
    0% { left: 101%; }
   
}
@-ms-keyframes moveSlideshow4 {
    100% { right: -0%; }
    0% { right: 101%; }
}
@-o-keyframes moveSlideshow4 {
    100% { right: -0%; }
    0% { right: 101%; }
}


.sun-animation {
	/* Comment By Ankit*/
	
    -webkit-animation:spin 100s linear infinite;
    -moz-animation:spin 100s linear infinite;
    animation:spin 100s linear infinite; 
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


@keyframes greenPulse {
  0% {box-shadow:0 0 30px #4bbec8}
  50% {box-shadow:0 0 80px #4bbec8}
  100% {box-shadow:0 0 30px #4bbec8}
}

/*---------- Bubbles ----------*/
.bubble_wrap{
  height: 66px;
  right: 60px;
  position: absolute;
  top: 100px;
  width: 28px;
}
.bubbles{
  position: absolute;
  top: 0px;
  width: 28px;
  right: -40px;
}
.b0{
  right:  -40px;
  top: 0px;
}
.b1{
  right:  -40px;
  top: 10px;
}
.b2{
  right:  -40px;
  top: 15px;
}
.b3{
  right: -40px;
  top: 20px;
}


/*start of bubble animations*/
.b0{
  animation-name:bubbles;
  animation-delay:2s;
  animation-duration:4s;
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  
  -moz-animation-name:bubbles;
  -moz-animation-delay:2s;
  -moz-animation-duration:4s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function: linear;
  
  -webkit-animation-name:bubbles;
  -webkit-animation-delay:2s;
  -webkit-animation-duration:4s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function: linear;
}
@keyframes bubbles{
from{
    top:0px;
    right:0px;
  }
  50%{
    left:39px;
  }
  to{
    top:66px;
    right:33px;
  }
}
@-moz-keyframes bubbles{
  from{
    top:0px;
    right:0px;
  }
  50%{
    left:39px;
  }
  to{
    top:66px;
    right:33px;
  }
}
@-webkit-keyframes bubbles{
 from{
    top:0px;
    right:0px;
  }
  50%{
    left:39px;
  }
  to{
    top:66px;
    right:33px;
  }
}
.b1{
  animation-name:bubbles;
  animation-duration:4s;
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  
  -moz-animation-name:bubbles;
  -moz-animation-duration:4s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function: linear;
  
  -webkit-animation-name:bubbles;
  -webkit-animation-duration:4s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function: linear;
}
@keyframes bubbles{
  from{
    top:0px;
  }
  to{
    top:66px;
  }
}
@-moz-keyframes bubbles{
 from{
    top:0px;
  }
  to{
    top:66px;
  }
}
@-webkit-keyframes bubbles{
  from{
    top:0px;
  }
  to{
    top:66px;
  }
}
.b2{
  animation-name:bubbles;
  animation-delay:1s;
  animation-duration:6s;
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  
  -moz-animation-name:bubbles;
  -moz-animation-delay:1s;
  -moz-animation-duration:6s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function: linear;
  
  -webkit-animation-name:bubbles;
  -webkit-animation-delay:1s;
  -webkit-animation-duration:6s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function: linear;
}
@keyframes bubbles{
  from{
    top:0px;
  }
  to{
    top:66px;
  }
}
@-moz-keyframes bubbles{
  from{
    top:0px;
  }
  to{
    top:66px;
  }
}
@-webkit-keyframes bubbles{
  from{
    top:0px;
  }
  to{
    top:66px;
  }
}
.b3{
  animation-name:bubbles;
  animation-delay:500s;
  animation-duration:3s;
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  
  -moz-animation-name:bubbles;
  -moz-animation-delay:500s;
  -moz-animation-duration:3s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function: linear;
  
  -webkit-animation-name:bubbles;
  -webkit-animation-delay:500s;
  -webkit-animation-duration:3s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function: linear;
}
@keyframes bubbles{
   from{
    top:0px;
    left:60px;
  }
  
  50%{
    left:58px;
  }
  
  to{
    top:66px;
    left:60px;
  }
}
@-moz-keyframes bubbles{
   from{
    top:0px;
    left:60px;
  }
  
  50%{
    left:58px;
  }
  
  to{
    top:66px;
    left:60px;
  }
}
@-webkit-keyframes bubbles{
  from{
    top:0px;
    left:60px;
  }
  
  50%{
    left:58px;
  }
  
  to{
    top:66px;
    left:60px;
  }
}


/* .bottom-tagline {   
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    border-radius:50%;
    animation: bounceBottom 1s infinite;
    -webkit-animation: bounceBottom 1s infinite;
    -moz-animation: bounceBottom 1s infinite;
    -o-animation: bounceBottom 1s infinite;
} */
 
@-webkit-keyframes bounceBottom {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounceBottom {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-30px);}
    60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounceBottom {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-30px);}
    60% {-o-transform: translateY(-15px);}
}
@keyframes bounceBottom {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}



#sports-academy, #institute {   
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    border-radius:50%;
	
    animation: bounceTip1 2s infinite;
    -webkit-animation: bounceTip1 2s infinite;
    -moz-animation: bounceTip1 2s infinite;
    -o-animation: bounceTip1 2s infinite;
}
 
@-webkit-keyframes bounceTip1 {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounceTip1 {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-30px);}
    60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounceTip1 {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-30px);}
    60% {-o-transform: translateY(-15px);}
}
@keyframes bounceTip1 {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

#coaching-centers {   
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    border-radius:50%;
    animation: bounceTip2 3s infinite;
    -webkit-animation: bounceTip2 3s infinite;
    -moz-animation: bounceTip2 3s infinite;
    -o-animation: bounceTip2 3s infinite;
}
 
@-webkit-keyframes bounceTip2 {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounceTip2 {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-30px);}
    60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounceTip2 {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-30px);}
    60% {-o-transform: translateY(-15px);}
}
@keyframes bounceTip2 {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

#hobby-classes, #school {   
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    border-radius:50%;
    animation: bounceTip3 4s infinite;
    -webkit-animation: bounceTip3 4s infinite;
    -moz-animation: bounceTip3 4s infinite;
    -o-animation: bounceTip3 4s infinite;
}
 
@-webkit-keyframes bounceTip3 {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounceTip3 {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-30px);}
    60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounceTip3 {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-30px);}
    60% {-o-transform: translateY(-15px);}
}
@keyframes bounceTip3 {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

#university, .baloon1, .baloon2 {   
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    border-radius:50%;
    animation: bounceTip4 5s infinite;
    -webkit-animation: bounceTip4 5s infinite;
    -moz-animation: bounceTip4 5s infinite;
    -o-animation: bounceTip4 5s infinite;
}
 
@-webkit-keyframes bounceTip4 {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounceTip4 {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-30px);}
    60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounceTip4 {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-30px);}
    60% {-o-transform: translateY(-15px);}
}
@keyframes bounceTip4 {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

/*-------------- Content Clouds -------------*/
#content-clouds{  position: absolute; top: -10px; height:396px; width:1210px;  }
#content-clouds .cloud{  position: absolute; z-index: 21; background:url(../images/content-cloud.png) 0 0 no-repeat;     width: 194px;    height: 122px;    background-size: 194px 122px; transition: transform 0.2s ; }
/*#content-clouds .cloud:hover{ background: #fff; width: 200px; height: 200px; border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -webkit-border-radius: 100%; -o-border-radius: 100%; }*/
#content-clouds .cloud:hover{ transform:scale(2);  }
#content-clouds .cloud:hover p{ font-size:7px !important; line-height:10px; text-transform:initial; }
#content-clouds .cloud:hover img{   }


#content-clouds .cloud img{     /*margin: auto;   margin-top: 24px;*/   margin-top: 11px;
    margin-left: -48px; width:48px; }
#content-clouds .cloud p{ text-align: center; font-family: 'open_sanslight'; font-size: 12px; margin-bottom: 0px; line-height: 18px; text-transform:uppercase;}
#content-clouds .cloud:hover{ text-align: center; }
#content-clouds .cloud a{ text-decoration: none; color:#000; }

#content-clouds .x1{ left: 76px; top: 0px; text-align: center; }
#content-clouds .x2{ left:235px; top:122px; text-align: center; z-index:99999; }
#content-clouds .x3{ left:53px; top:246px; text-align: center; }
#content-clouds .x4{ left:770px; top:126px; text-align: center; }
#content-clouds .x5{ left:990px; top:0px; text-align: center; }
#content-clouds .x6{ left:1010px; top:256px; text-align: center; }


