body {
  margin: 0;
}

.hpatombackground {
  position: relative;
  height: 300px;
  width: 300px;
  top: 7%;
  background: -webkit-linear-gradient(bottom right, rgba(0, 210, 255, 1), rgba(190, 50, 175, 1)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, rgba(0, 210, 255, 1), rgba(190, 50, 175, 1)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, rgba(0, 210, 255, 1), rgba(190, 50, 175, 1)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, rgba(0, 210, 255, 1), rgba(190, 50, 175, 1)); /* Standard syntax */
}

.example:hover .hpatombackground {
    position: absolute;
    z-index: -1;
}

/* ============================================
    True center is ~48.5 Top & ~48.5 Left
============================================ */


.electronone {
	margin: 0 auto;
	z-index: 2;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    background-color: #45ffaa;
    box-shadow: 0 0 10px #FFF;
    position: absolute;
    -webkit-animation-name: electrononeani; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1.5s; /* Safari 4.0 - 8.0 */
    animation-name: electrononeani;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: -1s;
}



/* Safari 4.0 - 8.0 */
@-webkit-keyframes electrononeani {
    0%   {left:27%; top:40%; transform:scale(.6);}
    25%  {left:48.5%; top:48.5%; transform:scale(1);}
    50%  {left:70%; top:60%; transform:scale(.6);}
    75%  {left:48.5%; top:48.5%; transform:scale(.3); z-index:1;}
    100% {left:27%; top:40%; transform:scale(.6); z-index:0;}
}

/* Standard syntax */
@keyframes electrononeani {
    0%   {left:27%; top:40%; transform:scale(.6);}
    25%  {left:48.5%; top:48.5%; transform:scale(1);}
    50%  {left:70%; top:60%; transform:scale(.6);}
    75%  {left:48.5%; top:48.5%; transform:scale(.3); z-index:1;}
    100% {left:27%; top:40%; transform:scale(.6); z-index:0;}
}




.electrontwo {
	margin: 0 auto;
	z-index: 2;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    background-color: #45ffaa;
    box-shadow: 0 0 10px #FFF;
    position: absolute;
    -webkit-animation-name: electrontwoani; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1.25s; /* Safari 4.0 - 8.0 */
    animation-name: electrontwoani;
    animation-duration: 1.25s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: -0.5;
}



/* Safari 4.0 - 8.0 */
@-webkit-keyframes electrontwoani {
    0%   {left:27%; top:60%; transform:scale(.6);}
    25%  {left:48.5%; top:48.5%; transform:scale(1);}
    50%  {left:70%; top:40%; transform:scale(.6);}
    75%  {left:48.5%; top:48.5%; transform:scale(.3); z-index:1;}
    100% {left:27%; top:60%; transform:scale(.6); z-index:0;}
}

/* Standard syntax */
@keyframes electrontwoani {
	0%   {left:27%; top:60%; transform:scale(.6);}
    25%  {left:48.5%; top:48.5%; transform:scale(1);}
    50%  {left:70%; top:40%; transform:scale(.6);}
    75%  {left:48.5%; top:48.5%; transform:scale(.3); z-index:1;}
    100% {left:27%; top:60%; transform:scale(.6); z-index:0;}
}




.electronthree {
	margin: 0 auto;
	z-index: 2;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    background-color: #45ffaa;
    box-shadow: 0 0 10px #FFF;
    position: absolute;
    -webkit-animation-name: electronthreeani; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1.75s; /* Safari 4.0 - 8.0 */
    animation-name: electronthreeani;
    animation-duration: 1.75s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: -0.25s;
}



/* Safari 4.0 - 8.0 */
@-webkit-keyframes electronthreeani {
    0%   {left:42%; top:25%; transform:scale(.6);}
    25%  {left:48.5%; top:48.5%; transform:scale(1);}
    50%  {left:55%; top:70%; transform:scale(.6);}
    75%  {left:48.5%; top:48.5%; transform:scale(.3); z-index:1;}
    100% {left:42%; top:25%; transform:scale(.6); z-index:0;}
}

/* Standard syntax */
@keyframes electronthreeani {
    0%   {left:42%; top:25%; transform:scale(.6);}
    25%  {left:48.5%; top:48.5%; transform:scale(1);}
    50%  {left:55%; top:70%; transform:scale(.6);}
    75%  {left:48.5%; top:48.5%; transform:scale(.3); z-index:1;}
    100% {left:42%; top:25%; transform:scale(.6); z-index:0;}   
}




.electronfour {
	margin: 0 auto;
	z-index: 2;
    width: 3%;
    height: 3%;
    border-radius: 50%;
    background-color: #45ffaa;
    box-shadow: 0 0 10px #FFF;
    position: absolute;
    -webkit-animation-name: electronfourani; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1.75s; /* Safari 4.0 - 8.0 */
    animation-name: electronfourani;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: -1.1s;
}



/* Safari 4.0 - 8.0 */
@-webkit-keyframes electronfourani {
    0%   {left:42%; top:72%; transform:scale(.6);}
    25%  {left:48.5%; top:48.5%; transform:scale(1);}
    50%  {left:55%; top:23%; transform:scale(.6);}
    75%  {left:48.5%; top:48.5%; transform:scale(.3); z-index:1;}
    100% {left:42%; top:72%; transform:scale(.6); z-index:0;}
}

/* Standard syntax */
@keyframes electronfourani {
	0%   {left:42%; top:72%; transform:scale(.6);}
    25%  {left:48.5%; top:48.5%; transform:scale(1);}
    50%  {left:55%; top:23%; transform:scale(.6);}
    75%  {left:48.5%; top:48.5%; transform:scale(.3); z-index:1;}
    100% {left:42%; top:72%; transform:scale(.6); z-index:0;}
    
}





.nucleus {
	margin: 40%;
	z-index: 1;
    width: 20%;
    height: 20%;
    border-radius: 50%;
    background-color: #FFF;
    box-shadow: 0 0 75px #FFF;
    position: absolute;
    -webkit-animation-name: nucleus; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 5s; /* Safari 4.0 - 8.0 */
    animation-name: nucleus;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: -0.25s;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes nucleus {
    0%   {box-shadow: 0 0 50px #FFF;}
    50%  {box-shadow: 0 0 10px #FFF;}
    100% {box-shadow: 0 0 50px #FFF;}
}

/* Standard syntax */
@keyframes nucleus {
	 0%   {box-shadow: 0 0 50px #FFF;}
    50%  {box-shadow: 0 0 10px #FFF;}
    100% {box-shadow: 0 0 50px #FFF;}
}


/* Media Queries */

@media (min-width: 430px) {
    .hpatombackground {
        height: 432px;
        width: 432px;
        top: -15%;
    }
}