/*ball movement*/

@-webkit-keyframes catchEmAll {
    0%  {transform:rotate(-30deg);}
     10%  {transform:rotate(-30deg);}
     16%  {transform:rotate(-50deg);}
      22%  {transform:rotate(-30deg);}
      40%  {transform:rotate(-30deg);}
     46%  {transform:rotate(-50deg);}
      53%  {transform:rotate(-30deg);}
	85% {transform:rotate(-30deg);}
    100% {transform:rotate(0deg);}
}

@keyframes catchEmAll {
    0%  {transform:rotate(-30deg);}
    10%  {transform:rotate(-30deg);}
     16%  {transform:rotate(-50deg);}
      22%  {transform:rotate(-30deg);}
     40%  {transform:rotate(-30deg);}
     46%  {transform:rotate(-50deg);}
      53%  {transform:rotate(-30deg);}
	85% {transform:rotate(-30deg);}
    100% {transform:rotate(0deg);}
}

body {
	background:-webkit-radial-gradient(#59ABE3,#1E8AC2);
	background:radial-gradient(#59ABE3,#1E8AC2);
}



/*flat design pokeball*/

.wrapper2 {
	width:300px;
	height:300px;
	/*border:1px solid red;*/
	margin-left: 10%;
	margin-top:5%;
	float:left;
}

.ball2 {
	position: relative;
	width:300px;
	height:300px;
	border-radius: 50%;
	background:-webkit-radial-gradient(#CF000F,#D91E18);
	background:radial-gradient(#CF000F,#D91E18);
	
	overflow: hidden;
}

.ball2::before {
	content: "";
	position: absolute;
	width: 400px;
	height:120px;
	background:-webkit-radial-gradient(#ECECEC,#BDC3C7);
	background:radial-gradient(#ECECEC,#BDC3C7);
	bottom:0;
	left:0;
	box-shadow: 0 -50px 0 0 #2C3E50;
}

.ball2::after {
	content: "";
	position: absolute;
	width: 50px;
	height:50px;
	border-radius: 50%;
	background-color: #ECECEC;
	top:130px;
	left:125px;
	box-shadow: 0 0 0 5px #2C3E50, 0 0 0 15px #ECECEC, 0 0 0 30px #2C3E50;
}

.topHalf2 {
	border-bottom: 300px solid rgba(0,0,0,0.3);;
	border-left: 150px solid transparent;
	border-right: 150px solid transparent;
	height: 0;
	width: 300px;
	/*background-color: rgba(0,0,0,0.3);*/
	position: absolute;
	left:51px;
	top:70px;
	z-index: 5;
	transform:-webkit-rotate(-27deg);
	transform:rotate(-27deg);
}


/*normal pokeball*/

.wrapper {
	width:400px;
	height:400px;
	margin-left:10%;
	margin-top:0;
	/*border:1px solid #CF000F;*/
	transform:-webkit-rotate(-30deg);
	transform:rotate(-30deg);
	float:left;
	/*-webkit-animation: catchEmAll 4s linear;
	animation: catchEmAll 4s linear;
	-webkit-animation-fill-mode: forwards; 
    animation-fill-mode: forwards;*/
}

.ball {
	width:300px;
	height:300px;
	border-radius: 50%;
	background-color: #ECECEC;
	z-index: 2;
	overflow: hidden;
	position: relative;
	margin-left:50%;
	margin-top:50%;
	transform:translate(-50%,-50%);
}

.ball::before {
	content:"";
	width:400px;
	height:400px;
	border-radius: 50%;
	background-color:black;
	position: absolute;
	bottom:10%;
	left:10%;
}

.ball::after {
	content: "";
	position: absolute;
	width:50px;
	height:50px;
	border-radius: 50%;
	background-color: #ECECEC;
	box-shadow: 0 0 0 5px black, 0 0 0 15px #ECECEC, 0 0 0 40px black;
	left:25%;
	bottom:32%;

}

.topHalf {
	width:400px;
	height:400px;
	border-radius: 50%;
	background-color: #CF000F;
	left:23%;
	bottom:23%;
	position: absolute;
}

.topHalf::before {
	content:"";
	position: absolute;
	width: 100px;
	height: 60px;
	background-color: #ECECEC;
	border-radius: 50%;
	/*box-shadow: 1px 1px 10px rgba(255,255,255,0.7);*/
	top:200px;
	left:40px;
	transform:-webkit-rotate(10deg);
	transform:rotate(10deg);
}

.topHalf::after{
	content:"";
	position: absolute;
	width:310px;
	height:310px;
	border-radius: 50%;
	top:130px;
	left:-100px;
	background-color: transparent;
	box-shadow: 50px 70px 0 20px rgba(0,0,0,0.5);
}