@charset "UTF-8";
/* CSS Document */


/*body{background-color:#4C92E0; overflow:hidden;}*/




#TotalAnimationPacman {margin:0 auto; width:100%;}
#TotalAnimationPacman img { max-width:none !important; width:auto !important; height:auto !important; }


#sky{
	background-color:#4C92E0;
	width:100%; height:950px;
	position:relative;
	left:0;
}

#CloudsBackground{
	transform: translateZ(0);
	animation: clouds 7s infinite;
	
	-webkit-transform: translateZ(0);
	-webkit-animation: clouds 7s infinite;
	
	z-index:99;

	margin-left:-960px;
	left:50%
}

#CloudsFront{
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: clouds 6s infinite;
	animation: clouds 6s infinite;
	z-index:99;
	
	margin-left:-960px;
	left:50%
}

.cloud {position:absolute}

#ipad{
	transform: translateZ(0);
	animation: clouds 4s infinite;
	-webkit-transform: translateZ(0);
	-webkit-animation: clouds 4s infinite;
	z-index:98;
	position:absolute;
	margin-left:-960px;
	left:50%;
	
	}


#wings {
	-webkit-transform: translateZ(0);
	-webkit-animation: clouds 4s infinite;
	transform: translateZ(0);
	animation: clouds 4s infinite;
	z-index:97;
	position:absolute;
	margin-left:-325px;
	left:50%;
}


.wing-right {margin-left: 390px; animation: movewings2 1.3s ease-in-out infinite alternate; -webkit-animation: movewings2 1.3s ease-in-out infinite alternate;} 
.wing-left {margin-left: -180px; animation: movewings2 1.3s ease-in-out infinite alternate; -webkit-animation: movewings2 1.3s ease-in-out infinite alternate;}


@media only screen and (min-width: 0px) and (max-width: 679px) {
	#wings{ diplay:none !important}
}

#ipadcontent {
	width:359px;
	height:222px;
	position:absolute;
	top:210px;
	left:50%;
	margin-left:-160px;
	z-index:99;
	transform: translateZ(0);
	transform: rotate(-5deg);
	clip: rect(30px, 380px, 340px, 5px); /*MASK*/
	-webkit-transform: translateZ(0);
	-webkit-transform: rotate(-5deg);
	-webkit-clip: rect(30px, 380px, 340px, 5px); /*MASK*/
}


#glow { /* glow on ipad */
	animation: clouds 4s infinite;
	-webkit-animation: clouds 4s infinite;
	z-index:999;
	position:absolute;
	margin-left:-960px;
	left:50%;
}

#logo {animation: clouds 4s infinite; -webkit-animation: clouds 4s infinite;} 

#animationpacman {
	
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
			
	animation:
		clouds 4s infinite,
		pacmanmove 6s infinite;
		
	-webkit-animation:
		clouds 4s infinite,
		pacmanmove 6s infinite;
	
	width:359px;
	heigh:50px;
	position:absolute;
	top:180px;
	left:50%;
	margin-left:-180px
}

#pacman {
	
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	
	width: 0; height: 0;

  	border-right: 12px solid transparent;
  	border-top:12px solid #F2EF00;
  	border-left: 12px solid #F2EF00;
  	border-bottom: 12px solid #F2EF00;
 	border-radius: 12px;
	
	animation:
		pacmaneating 0.4s infinite,
		pacmangoback 6s 2.5s infinite;
	
	-webkit-animation:
		pacmaneating 0.4s infinite,
		pacmangoback 6s 2.5s infinite;
		
	float:left;
	margin-left: 70px;
}

#ghosts {
	
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	
	position:relative;
	float:left;
	animation: ghostsscared 6s 2.5s infinite;
	-webkit-animation: ghostsscared 6s 2.5s infinite;
}

#ghosts-blue {
	
	transform: translateZ(0);	
	-webkit-transform: translateZ(0);	
	
	position:absolute;
	top:0; left:0;
	float:left;
	
}

#ball {
	
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	
	width: 0; height: 0;
	margin-top: 34px;
	margin-left: 295px;	

  	border-right: 5px solid #FFF;
  	border-top: 5px solid #FFF;
  	border-left: 5px solid #FFF;
  	border-bottom: 5px solid #FFF;
 	border-radius: 5px;
	
	animation:
		clouds 4s infinite,
		ballhide 6s 2.5s infinite;
	-webkit-animation:
		clouds 4s infinite,
		ballhide 6s 2.5s infinite;
		
	float:left;
}

#beready {	
transform: translateZ(0);
animation:
	clouds 4s infinite,
	bereadyflashing 1.5s infinite;
-webkit-transform: translateZ(0);
-webkit-animation:
	clouds 4s infinite,
	bereadyflashing 1.5s infinite;
margin-top:35px; /*margin-left:125px;*/
}


/* ANIMATIONS */

@keyframes clouds {
	
	0% {
		transform: translate3d(0px, 40px, 0px);
        animation-timing-function: ease-in;	
		-webkit-transform: translate3d(0px, 40px, 0px);
        -webkit-animation-timing-function: ease-in;	
	}
	
	50% {
		transform: translate3d(0px, 50px, 0px);
        animation-timing-function: ease-out;
		-webkit-transform: translate3d(0px, 50px, 0px);
        -webkit-animation-timing-function: ease-out;
	}
	
	100% {
		transform: translate3d(0px, 40px, 0px);
		-webkit-transform: translate3d(0px, 40px, 0px);
	}
	
}

@-webkit-keyframes clouds {
	
	0% {
		transform: translate3d(0px, 40px, 0px);
        animation-timing-function: ease-in;	
		-webkit-transform: translate3d(0px, 40px, 0px);
        -webkit-animation-timing-function: ease-in;	
	}
	
	50% {
		transform: translate3d(0px, 50px, 0px);
        animation-timing-function: ease-out;
		-webkit-transform: translate3d(0px, 50px, 0px);
        -webkit-animation-timing-function: ease-out;
	}
	
	100% {
		transform: translate3d(0px, 40px, 0px);
		-webkit-transform: translate3d(0px, 40px, 0px);
	}
	
}


@keyframes movewings{
	
	0% {
    	transform: scale(1, 1);
		animation-timing-function: ease-in;
		-webkit-transform: scale(1, 1);
		-webkit-animation-timing-function: ease-in;
	}
	
	25% {
		transform: scale(1.02, 1);
		animation-timing-function: ease-out;
		-webkit-transform: scale(1.02, 1);
		-webkit-animation-timing-function: ease-out;
	}
	
	50% {
		transform: scale(.98, 1);
		animation-timing-function: ease-in;
		-webkit-transform: scale(.98, 1);
		-webkit-animation-timing-function: ease-in;
	}
	
	75% {
		transform: scale(1.02, 1);
		animation-timing-function: ease-out;
		-webkit-transform: scale(1.02, 1);
		-webkit-animation-timing-function: ease-out;
	}
	
	100% {
		transform: scale(.99, 1);
		-webkit-transform: scale(.99, 1);
	}
	
}

@-webkit-keyframes movewings{
	
	0% {
    	transform: scale(1, 1);
		animation-timing-function: ease-in;
		-webkit-transform: scale(1, 1);
		-webkit-animation-timing-function: ease-in;
	}
	
	25% {
		transform: scale(1.02, 1);
		animation-timing-function: ease-out;
		-webkit-transform: scale(1.02, 1);
		-webkit-animation-timing-function: ease-out;
	}
	
	50% {
		transform: scale(.98, 1);
		animation-timing-function: ease-in;
		-webkit-transform: scale(.98, 1);
		-webkit-animation-timing-function: ease-in;
	}
	
	75% {
		transform: scale(1.02, 1);
		animation-timing-function: ease-out;
		-webkit-transform: scale(1.02, 1);
		-webkit-animation-timing-function: ease-out;
	}
	
	100% {
		transform: scale(.99, 1);
		-webkit-transform: scale(.99, 1);
	}
	
}


@keyframes movewings2 {
  from { transform: rotateY(-13deg); -webkit-transform: rotateY(-13deg); }
  to { transform: rotateY(13deg); -webkit-transform: rotateY(13deg); }
}

@-webkit-keyframes movewings2 {
  from { transform: rotateY(-13deg); -webkit-transform: rotateY(-13deg); }
  to { transform: rotateY(13deg); -webkit-transform: rotateY(13deg); }
}



@keyframes pacmaneating {
	50% {border-right: 12px solid #F2EF00; background-color: #F2EF00}
}

@-webkit-keyframes pacmaneating {
	
	50% {border-right: 12px solid #F2EF00; background-color: #F2EF00}
	
}

@keyframes pacmangoback {
	
	0% {transform: scalex(-1); -webkit-transform: scalex(-1) }
	50% {transform: scalex(-1); -webkit-transform: scalex(-1) }
	80% {transform: scalex(1); -webkit-transform: scalex(1) }
	100% {transform: scalex(1); -webkit-transform: scalex(1) }
	
}

@-webkit-keyframes pacmangoback {
	
	0% {transform: scalex(-1); -webkit-transform: scalex(-1) }
	50% {transform: scalex(-1); -webkit-transform: scalex(-1) }
	80% {transform: scalex(1); -webkit-transform: scalex(1) }
	100% {transform: scalex(1); -webkit-transform: scalex(1) }
	
}


@keyframes pacmanmove {
	
	0% {
		left: -130px;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;		
	}
	
	40% {
		left: 266px;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
	}
	
	50% {
		left: 266px;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
	}
	
	90% {
		left:-130px;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
	}
	
	100% {
		left:-130px;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
	}
	
}

@-webkit-keyframes pacmanmove {
	
	0% {
		left: -130px;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;		
	}
	
	40% {
		left: 266px;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
	}
	
	50% {
		left: 266px;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
	}
	
	90% {
		left:-130px;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
	}
	
	100% {
		left:-130px;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
	}
	
}

	
@keyframes ballhide{
	
	0% {opacity:0}
	60% {margin-left: 330px;	 opacity:0 }
	80% {margin-left: 295px; opacity:1 }
	100% {opacity:1}
	
}

@-webkit-keyframes ballhide{
	
	0% {opacity:0}
	60% {margin-left: 330px;	 opacity:0 }
	80% {margin-left: 295px; opacity:1 }
	100% {opacity:1}
	
}


@keyframes ghostsscared{
	
	0% {opacity:0} /*ghost color hide */
	2% {opacity:1} /*ghost flash */
	4% {opacity:0} /*ghost flash */
	6% {opacity:1} /*ghost flash */
	8% {opacity: 0} /* ghost color hide */
	59% {opacity:0} /* ghost color hide */
	99% {opacity:1;} /*ghost color reset */
	100% {opacity:1;}
	
}


@-webkit-keyframes ghostsscared{
	
	0% {opacity:0} /*ghost color hide */
	2% {opacity:1} /*ghost flash */
	4% {opacity:0} /*ghost flash */
	6% {opacity:1} /*ghost flash */
	8% {opacity: 0} /* ghost color hide */
	59% {opacity:0} /* ghost color hide */
	99% {opacity:1;} /*ghost color reset */
	100% {opacity:1;}
	
}

@keyframes bereadyflashing{
	50% {opacity:0}
}

@-webkit-keyframes bereadyflashing{
	50% {opacity:0}
}