/*sphere1 movement*/

@-webkit-keyframes sphere1Move {
    0%  {width:50px; height:50px;left:116px;top:116px;z-index: 0;}
    10% {width:40px;height:40px;}
    20% {width:30px;height:30px;}
    30% {width:40px;height:40px;}
    45%{left:15px;}
    49%{z-index: 0;}
	50% {width:50px; height:50px;left:20px;top:116px;z-index:10;}
	/*55%{left:15px;}*/
	60%{width:60px;height:60px;}
	80% {width:70px;height:70px;}
	90%{width:60px;height:60px;}
	99% {z-index: 10;}
    100% {width:50px; height:50px; left:116px;top:116px;z-index: 0;}
}

@keyframes sphere1Move {
 0%  {width:50px; height:50px;left:116px;top:116px;z-index: 0;}
    10% {width:40px;height:40px;}
    20% {width:30px;height:30px;}
    30% {width:40px;height:40px;}
    45%{left:15px;}
    49%{z-index: 0;}
	50% {width:50px; height:50px;left:20px;top:116px;z-index:10;}
/*	55%{left:15px;}*/
	60%{width:60px;height:60px;}
	80% {width:70px;height:70px;}
	90%{width:60px;height:60px;}
	99% {z-index: 10;}
    100% {width:50px; height:50px; left:116px;top:116px;z-index: 0;}
}


/*sphere2 movement*/

@-webkit-keyframes sphere2Move {
    0%  {width:50px; height:50px;left:116px;top:116px;z-index: 0;}
    10% {width:40px;height:40px;}
    20% {width:30px;height:30px;}
    30% {width:40px;height:40px;}
    45%{left:217px;}
    49%{z-index: 0;}
	50% {width:50px; height:50px;left:222px;top:116px;z-index:10;}
	/*55%{left:15px;}*/
	60%{width:60px;height:60px;}
	80% {width:70px;height:70px;}
	90%{width:60px;height:60px;}
	99% {z-index: 10;}
    100% {width:50px; height:50px; left:116px;top:116px;z-index: 0;}
}

@keyframes sphere2Move {
 0%  {width:50px; height:50px;left:116px;top:116px;z-index: 0;}
    10% {width:40px;height:40px;}
    20% {width:30px;height:30px;}
    30% {width:40px;height:40px;}
    45%{left:217px;}
    49%{z-index: 0;}
	50% {width:50px; height:50px;left:222px;top:116px;z-index:10;}
	/*55%{left:15px;}*/
	60%{width:60px;height:60px;}
	80% {width:70px;height:70px;}
	90%{width:60px;height:60px;}
	99% {z-index: 10;}
    100% {width:50px; height:50px; left:116px;top:116px;z-index: 0;}
}


body {
	background-color: #34495E;
}

.wrapper {
	width:300px;
	height:300px;
	/*border:1px solid red;*/
	margin:0 auto;
	margin-top: 5%;
	position: relative;
}

.hoop {
	width:80px;
	height:80px;
	border-radius: 50%;
	background: transparent;
	box-shadow: 0 0 0 6px #96281B, 0 0 0 26px #D64541;
	position: absolute;
	left:100px;
	top:100px;
	z-index:5;
}


.sphere1 {
	width:50px;
	height:50px;
	border-radius: 50%;
	background: #22A7F0;
	position: absolute;
	left:116px;
	top:116px;
	box-shadow:-7px -7px 0 #1E8BC3 inset;
	-webkit-animation: sphere1Move 1.2s linear infinite;
	animation: sphere1Move 1.2s linear infinite;
}

.sphere2 {
	width:50px;
	height:50px;
	border-radius: 50%;
	background: #22A7F0;
	position: absolute;
	left:116px;
	top:116px;
	box-shadow:-7px -7px 0 #1E8BC3 inset;

	-webkit-animation: sphere2Move 1.2s linear 0.6s infinite;
	animation: sphere2Move 1.2s linear 0.6s infinite;

}