html {
min-height: 100%;
background:black;
background-image: -moz-radial-gradient(top, #dce3f4, #e5eef7);
background-image: -webkit-gradient(radial, left top, left bottom, from(#dce3f4), to(#e5eef7));
background-image: -webkit-radial-gradient(center, #dce3f4, #e5eef7);
filter: progid:DXImageTransform.Microsoft.Gradient(
gradientType=0,startColorStr=#dce3f4,
endColorStr=#e5eef7);
}

		
		#logo{
  background-color: transparent;
    background-image: url('mymap.png');
    background-repeat: no-repeat;
  background-position: relative;
    background-size: 100%;
    width: 150px;
    height:300px;
     margin-top: -420px;
      margin-left: 80px;
    
}

		#m{
  background-color: transparent;
    background-image: url('m.png');
    background-repeat: no-repeat;
  background-position: relative;
    background-size: 100%;
    width: 150px;
    height:155px;
     margin-top: -117px;
      margin-left: 80px;
    z-index: 4;
}
		
		#stage {
			width: 300px;
			height: 460px;
			margin-left: 0px ;
			position: relative;
			overflow: hidden;
			
		}
		
		.running .ball, .running .shadow {
			width: 150px;
			height: 155px;
			background-image: url("balle.png");
			background-size: 100%;
			position: absolute;
			bottom: 80px;
			left: 80px;
			border-radius: 50px;
			z-index:3;
			;
			
			-webkit-animation: ball-y 4s;
			-webkit-transform-origin: 50% 50%;
			
			-moz-animation: ball-y 2s;
			-moz-transform-origin: 50% 50%;
		}
		
		.running .ball-arc {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index:2;
			-webkit-animation: ball-x 4.5s cubic-bezier(0, 0, 0.35, 1);
			-moz-animation: ball-x 4.5s cubic-bezier(0, 0, 0.35, 1);
		}
		
		.running .shadow {
		
			background-image: url("ombre.png");
			background-size: 99%;
			margin-left: 2px;
			margin-bottom: 2px;
			bottom: 0;
			z-index:1;
			
			-webkit-animation: none;
			-webkit-transform: scaleY(0.25);
			
			-moz-animation: none;
			-moz-transform: scaleY(0.25);
		}
		
		@-webkit-keyframes ball-x {
			0% { -webkit-transform: translateX(-200px) scale(0.1,0.1); }
			100% { -webkit-transform: translateX(0px) scale(1.0,1.0); }
		}
		
		@-webkit-keyframes ball-y {
			0% { -webkit-transform: translateY(-655px) ; -webkit-animation-timing-function: ease-in; }
			25% { -webkit-transform: translateY(-0px) ; -webkit-animation-timing-function: ease-out; }
			40% { -webkit-transform: translateY(-250px) ; -webkit-animation-timing-function: ease-in; }
			55% { -webkit-transform: translateY(-0px) ; -webkit-animation-timing-function: ease-out; }
			65% { -webkit-transform: translateY(-140px) ; -webkit-animation-timing-function: ease-in; }
			75% { -webkit-transform: translateY(-0px) ; -webkit-animation-timing-function: ease-out; }
			82% { -webkit-transform: translateY(-50px) ; -webkit-animation-timing-function: ease-in; }
			87% { -webkit-transform: translateY(-0px) ; -webkit-animation-timing-function: ease-out; }
			92% { -webkit-transform: translateY(-10px) ; -webkit-animation-timing-function: ease-in; }		
			
			100% { -webkit-transform: translateY(0px) scale(1.0,1.0); -webkit-animation-timing-function: ease-out; }
		
		}