@charset "utf-8";
/* CSS Document */
.partytime #container #mainContent #balloon1, #balloon2, #balloon3, #balloon4, #balloon5, #balloon6 {
	margin: 0px;
	padding: 0px;
	position: fixed;
	float: left;
	height: 300px;
	width: 150px;
}
.partytime #container #mainContent #balloon1 {
	background-image: url(assets/balloons/balloon_text/balloonY.png);
	background-repeat: no-repeat;
	margin-top: 17px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: -150px;
}
.partytime #container #mainContent #balloon2 {
	background-image: url(assets/balloons/balloon_text/balloonB.png);
	background-repeat: no-repeat;
	padding: 0px;
	margin-top: -161px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: -150px;
}
.partytime #container #mainContent #balloon3 {
	background-image: url(assets/balloons/balloon_text/balloonG.png);
	background-repeat: no-repeat;
	margin-top: 35px;
	margin-left: 600px;
}

.partytime #container #mainContent #balloon4 {
	background-image: url(assets/balloons/balloon_text/balloonR.png);
	background-repeat: no-repeat;
	margin-top: -161px;
	margin-left: 600px;
	
}
.partytime #container #mainContent #balloon5 {
	background-image: url(assets/balloons/balloon_text/balloonO.png);
	background-repeat: no-repeat;
	margin-top: 230px;
	margin-left: 600px;
}
.partytime #container #mainContent #balloon6 {
	background-image: url(assets/balloons/balloon_text/balloonP.png);
	background-repeat: no-repeat;
	margin-top: 200px;
	margin-left: -140px;
}


    #balloon1 {
		animation-duration: 7s;
      -webkit-animation-duration: 7s;
      animation-name: balloon1_move;
      -webkit-animation-name: balloon1_move;
    }
    
    @keyframes balloon1_move {
         from {
        margin-top: 1000px;
		margin-left: 80px;
        width:300%
      }
      65% {
		  margin-top: 200px;
		  margin-left: 80px;
}
83% {
		  margin-top: 17px;
		  margin-left: -150px;
}
88% {
		  margin-top: 22px;
		  margin-left: -150px;
}	  
	   to {
        margin-top: 17px;
		margin-left: -150px;
        width:100%;
      }
    }
    
   @-webkit-keyframes balloon1_move {
      from {
        margin-top: 1000px;
		margin-left: 80px;
        width:300%
      }
      65% {
		  margin-top: 130px;
		  margin-left: 80px;
}
83% {
		  margin-top: 17px;
		  margin-left: -150px;
}
88% {
		  margin-top: 22px;
		  margin-left: -150px;
}	  
	   to {
        margin-top: 17px;
		margin-left: -150px;
        width:100%;
      }
    }

    #balloon2 {
      animation-duration: 6s;
      -webkit-animation-duration: 6s;
      animation-name: balloon2_move;
      -webkit-animation-name: balloon2_move;
    }
    
    @keyframes balloon2_move {
      from {
        margin-top: 1000px;
		margin-left: -50px;
        width:300%
      }
 55% {
		  margin-top: 200px;
		  margin-left: -50px;
}
80% {
		  margin-top: -161px;
		  margin-left: -150px;
}
88% {
		  margin-top: -155px;
		  margin-left: -150px;
}	      
      to {
        margin-top: -161px;
		margin-left: -150px;
        width:100%;
      }
    }
    
    @-webkit-keyframes balloon2_move {
           from {
        margin-top: 1000px;
		margin-left: -50px;
        width:300%
      }
 55% {
		  margin-top: 200px;
		  margin-left: -50px;
}
80% {
		  margin-top: -161px;
		  margin-left: -150px;
}
88% {
		  margin-top: -155px;
		  margin-left: -150px;
}	      
      to {
        margin-top:-161px;
		margin-left: -150px;
        width:100%;
      }
    }
	
	    #balloon3 {
	animation-duration: 7s;
	-webkit-animation-duration: 7s;
	animation-name: balloon3_move;
	-webkit-animation-name: balloon3_move;
	z-index: 2;
    }
    
    @keyframes balloon3_move {
     from {
        margin-top: 1000px;
		margin-left: 400px;
        width:300%
      }
      67% {
		  margin-top: 200px;
		  margin-left: 400px;
}
83% {
		  margin-top: 35px;
		  margin-left: 600px;
}
88% {
		  margin-top: 38px;
		  margin-left: 600px;
}	  
	  
      to {
        margin-top: 35px;
		margin-left: 600px;
        width:100%;
      }
    }
   
    @-webkit-keyframes balloon3_move {
     from {
        margin-top: 1000px;
		margin-left: 400px;
        width:300%
      }
      67% {
		  margin-top: 200px;
		  margin-left: 400px;
}
83% {
		  margin-top: 35px;
		  margin-left: 600px;
}
88% {
		  margin-top: 38px;
		  margin-left: 600px;
}	  
	  
      to {
        margin-top: 35px;
		margin-left: 600px;
        width:100%;
      }
    }
   
	
	    #balloon4 {
	animation-duration: 6.5s;
	-webkit-animation-duration: 6.5s;
	animation-name: balloon4_move;
	-webkit-animation-name: balloon4_move;
	z-index: 1;
    }
    
    @keyframes balloon4_move {
      from {
        margin-top: 1000px;
		margin-left: 500px;
        width: 300%;
      }
 	57% {
		  margin-top: 90px;
		  margin-left: 500px;
	}
	80% {
		  margin-top: -161px;
		  margin-left: 600px;
	}
	88% {
		  margin-top: -157px;
		  margin-left: 600px;
	}	  
	   to {
        margin-top:-160px;
		margin-left: 600px;
        width:100%;
      }
    }
    
    @-webkit-keyframes balloon4_move {
      from {
        margin-top:1000px;
		margin-left: 500px;
        width: 300%;
   }
      55% {
		  margin-top: 90px;
		  margin-left: 500px;
	}
	80% {
		  margin-top: -161px;
		  margin-left: 600px;
	}
	88% {
		  margin-top: -157px;
		  margin-left: 600px;
	}	  
	to {
        margin-top: -160px;
		margin-left: 600px;
        width: 100%;
      }
    }
	
    #balloon5 {
	animation-duration: 10s;
	-webkit-animation-duration: 10s;
	animation-name: balloon5_move;
	-webkit-animation-name: balloon5_move;
	z-index: 3;
    }
    
    @keyframes balloon5_move {
      from {
        margin-top: 1000px;
		margin-left: 280px;
        width:300%
      }
      55% {
		  margin-top: 94px;
		  margin-left: 280px;
	}
	85% {
		  margin-top: 230px;
		  margin-left: 600px;
	}
	95% {
		  margin-top: 232px;
		  margin-left: 600px;
	}	  
	  to {
        margin-top: 230px;
		margin-left: 600px;
        width:100%;
      }
    }
    
    @-webkit-keyframes balloon5_move {
      from {
        margin-top: 1000px;
		margin-left: 280px;
        width:300%
      }
      55% {
		  margin-top: 94px;
		  margin-left: 280px;
	}
	85% {
		  margin-top: 230px;
		  margin-left: 600px;
	}
	95% {
		  margin-top: 232px;
		  margin-left: 600px;
	}	  
	  to {
        margin-top: 230px;
		margin-left: 600px;
        width:100%;
      }
    }
	
		
    #balloon6 {
      animation-duration: 11s;
      -webkit-animation-duration: 11s;
      animation-name: balloon6_move;
      -webkit-animation-name: balloon6_move;
    }
	
	    @keyframes balloon6_move {
      from {
        margin-top: 1000px;
		margin-left: 170px;
        width:300%
      }
      55% {
		  margin-top: 164px;
		  margin-left: 170px;
	}
	85% {
		  margin-top: 200px;
		  margin-left: -140px;
	}
	95% {
		  margin-top: 202px;
		  margin-left: -140px;
	}	  
	  to {
        margin-top: 200px;
		margin-left: -140px;
        width:100%;
      }
    }
    
    @-webkit-keyframes balloon6_move {
      from {
        margin-top: 1000px;
		margin-left: 170px;
        width:300%
      }
      55% {
		  margin-top: 164px;
		  margin-left: 170px;
	}
	85% {
		  margin-top: 200px;
		  margin-left: -140px;
	}
	95% {
		  margin-top: 202px;
		  margin-left: -140px;
	}	  
	  to {
        margin-top: 200px;
		margin-left: -140px;
        width:100%;
      }
    }