html, body {
     height: 100%;
}
body{
	background: #ffffff;
	position: relative;
}

/*Shell color and size*/
#cl-blank.atom-shell7 {
	display: inline-block;
	width: 360px;
	height: 360px;
	border-radius: 50%;	
	box-shadow: inset 0 0 60px rgba(255,255,255, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);	
}

#cl-noble.atom-shell7 {
	display: inline-block;
	width: 360px;
	height: 360px;
	border-radius: 50%;	
	box-shadow: inset 0 0 60px rgba(175,1,92, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);	
}

#cl-metal.atom-shell7 {
	display: inline-block;
	width: 360px;
	height: 360px;
	border-radius: 50%;	
	box-shadow: inset 0 0 60px rgba(39,146,255, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);	
}

#cl-nonmetal.atom-shell7 {
	display: inline-block;
	width: 360px;
	height: 360px;
	border-radius: 50%;	
	box-shadow: inset 0 0 60px rgba(255,148,39, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);	
}

#cl-seminmetal.atom-shell7 {
	display: inline-block;
	width: 360px;
	height: 360px;
	border-radius: 50%;	
	box-shadow: inset 0 0 60px rgba(255,39,146, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);	
}

#cl-trans.atom-shell7 {
	display: inline-block;
	width: 360px;
	height: 360px;
	border-radius: 50%;	
	box-shadow: inset 0 0 60px rgba(92,175,1, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);	
}

#cl-blank.atom-shell6 {
	display: inline-block;
	width: 284px;
	height: 284px;
	margin: 38px;		
	border-radius: 50%;
	box-shadow: inset 0 0 40px rgba(255,255,255, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-noble.atom-shell6 {
	display: inline-block;
	width: 284px;
	height: 284px;
	margin: 38px;		
	border-radius: 50%;
	box-shadow: inset 0 0 40px rgba(175,1,92, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-metal.atom-shell6 {
	display: inline-block;
	width: 284px;
	height: 284px;
	margin: 38px;		
	border-radius: 50%;
	box-shadow: inset 0 0 40px rgba(39,146,255, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-nonmetal.atom-shell6 {
	display: inline-block;
	width: 284px;
	height: 284px;
	margin: 38px;		
	border-radius: 50%;
	box-shadow: inset 0 0 40px rgba(255,148,39, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-semimetal.atom-shell6 {
	display: inline-block;
	width: 284px;
	height: 284px;
	margin: 38px;		
	border-radius: 50%;
	box-shadow: inset 0 0 40px rgba(255,39,146, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-trans.atom-shell6 {
	display: inline-block;
	width: 284px;
	height: 284px;
	margin: 38px;		
	border-radius: 50%;
	box-shadow: inset 0 0 40px rgba(92,175,1, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-blank.atom-shell5 {
	display: inline-block;
	width: 210px;
	height: 210px;
	margin: 37px;	
	border-radius: 50%;
	box-shadow: inset 0 0 30px rgba(255,255,255, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-noble.atom-shell5 {
	display: inline-block;
	width: 210px;
	height: 210px;
	margin: 37px;	
	border-radius: 50%;
	box-shadow: inset 0 0 30px rgba(175,1,92, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-metal.atom-shell5 {
	display: inline-block;
	width: 210px;
	height: 210px;
	margin: 37px;	
	border-radius: 50%;
	box-shadow: inset 0 0 30px rgba(39,146,255, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-nonmetal.atom-shell5 {
	display: inline-block;
	width: 210px;
	height: 210px;
	margin: 37px;	
	border-radius: 50%;
	box-shadow: inset 0 0 30px rgba(255,148,39, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-semimetal.atom-shell5 {
	display: inline-block;
	width: 210px;
	height: 210px;
	margin: 37px;	
	border-radius: 50%;
	box-shadow: inset 0 0 30px rgba(255,39,146, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-trans.atom-shell5 {
	display: inline-block;
	width: 210px;
	height: 210px;
	margin: 37px;	
	border-radius: 50%;
	box-shadow: inset 0 0 30px rgba(92,175,1, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-blank.atom-shell4 {
	display: inline-block;
	width: 150px;
	height: 150px;
	margin: 30px;	
	border-radius: 50%;
	box-shadow: inset 0 0 20px rgba(255,255,255, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-noble.atom-shell4 {
	display: inline-block;
	width: 150px;
	height: 150px;
	margin: 30px;	
	border-radius: 50%;
	box-shadow: inset 0 0 20px rgba(175,1,92, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-metal.atom-shell4 {
	display: inline-block;
	width: 150px;
	height: 150px;
	margin: 30px;	
	border-radius: 50%;
	box-shadow: inset 0 0 20px rgba(39,146,255, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-nonmetal.atom-shell4 {
	display: inline-block;
	width: 150px;
	height: 150px;
	margin: 30px;	
	border-radius: 50%;
	box-shadow: inset 0 0 20px rgba(255,148,39, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-semimetal.atom-shell4 {
	display: inline-block;
	width: 150px;
	height: 150px;
	margin: 30px;	
	border-radius: 50%;
	box-shadow: inset 0 0 20px rgba(255,39,146, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-trans.atom-shell4 {
	display: inline-block;
	width: 150px;
	height: 150px;
	margin: 30px;	
	border-radius: 50%;
	box-shadow: inset 0 0 20px rgba(92,175,1, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-blank.atom-shell3 {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 25px;	
	border-radius: 50%;
	box-shadow: inset 0 0 15px rgba(255,255,255, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-noble.atom-shell3 {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 25px;	
	border-radius: 50%;
	box-shadow: inset 0 0 15px rgba(175,1,92, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-metal.atom-shell3 {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 25px;	
	border-radius: 50%;
	box-shadow: inset 0 0 15px rgba(39,146,255, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-nonmetal.atom-shell3 {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 25px;	
	border-radius: 50%;
	box-shadow: inset 0 0 15px rgba(255,148,39, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-semimetal.atom-shell3 {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 25px;	
	border-radius: 50%;
	box-shadow: inset 0 0 15px rgba(255,39,146, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-trans.atom-shell3 {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 25px;	
	border-radius: 50%;
	box-shadow: inset 0 0 15px rgba(92,175,1, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-blank.atom-shell2 {
	display: inline-block;
	width: 60px;
	height: 60px;
	margin: 20px;	
	border-radius: 50%;
	box-shadow: inset 0 0 10px rgba(255,255,255, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-noble.atom-shell2 {
	display: inline-block;
	width: 60px;
	height: 60px;
	margin: 20px;	
	border-radius: 50%;
	box-shadow: inset 0 0 10px rgba(175,1,92, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-metal.atom-shell2 {
	display: inline-block;
	width: 60px;
	height: 60px;
	margin: 20px;	
	border-radius: 50%;
	box-shadow: inset 0 0 10px rgba(39,146,255, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-nonmetal.atom-shell2 {
	display: inline-block;
	width: 60px;
	height: 60px;
	margin: 20px;	
	border-radius: 50%;
	box-shadow: inset 0 0 10px rgba(255,148,39, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-semimetal.atom-shell2 {
	display: inline-block;
	width: 60px;
	height: 60px;
	margin: 20px;	
	border-radius: 50%;
	box-shadow: inset 0 0 10px rgba(255,39,146, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-trans.atom-shell2 {
	display: inline-block;
	width: 60px;
	height: 60px;
	margin: 20px;	
	border-radius: 50%;
	box-shadow: inset 0 0 10px rgba(92,175,1, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-noble.atom-shell1 {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 15px;	
	border-radius: 50%;
	box-shadow: inset 0 0 6px rgba(175,1,92, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-metal.atom-shell1 {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 15px;	
	border-radius: 50%;
	box-shadow: inset 0 0 6px rgba(39,146,255, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-nonmetal.atom-shell1 {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 15px;	
	border-radius: 50%;
	box-shadow: inset 0 0 6px rgba(255,148,39, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-semimetal.atom-shell1 {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 15px;	
	border-radius: 50%;
	box-shadow: inset 0 0 6px rgba(255,39,146, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-trans.atom-shell1 {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 15px;	
	border-radius: 50%;
	box-shadow: inset 0 0 6px rgba(92,175,1, 0.26), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-noble.atom-nucleus {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 9px;	
	border-radius: 50%;
	box-shadow: inset 0 0 6px rgba(175,1,92, 0.9), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-metal.atom-nucleus {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 9px;	
	border-radius: 50%;
	box-shadow: inset 0 0 6px rgba(39,146,255, 0.9), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-nonmetal.atom-nucleus {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 9px;	
	border-radius: 50%;
	box-shadow: inset 0 0 6px rgba(255,148,39, 0.9), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-semimetal.atom-nucleus {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 9px;	
	border-radius: 50%;
	box-shadow: inset 0 0 6px rgba(255,39,146, 0.9), 0 0 80px rgba(255, 255, 255, 0.2);
}

#cl-trans.atom-nucleus {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 9px;	
	border-radius: 50%;
	box-shadow: inset 0 0 6px rgba(92,175,1, 0.9), 0 0 80px rgba(255, 255, 255, 0.2);
}
/*--------------------------------------------------------------------------------*/


/*---Electrons for Period Seven Elements-------*/

.atomp7 {
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
}

.atomp7 > div {
  /* Electron trail */
	position: absolute;
	display: inline-block;
	width: 360px;
	height: 360px;
	top: 0%;
	left: 0%;
	margin: 6px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid rgba(204,204,204, 0.4); /*thickness/colour of orbit*/
	transform-style: preserve-3d;

}
.atomp7 > div:before {
  /* Electron */
  position: relative;
	display: inherit;
  content: "";
  width: 7px;
  height: 7px;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #e3e3e3;
  z-index: 10;
}

/*Electron orbits*/
.atomp7 > div:nth-child(1) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(-18deg);
}
.atomp7 > div:nth-child(1):before {
	-webkit-animation: electronp7 1.76s infinite linear;
        animation: electronp7 1.76s infinite linear;
	-webkit-animation-delay: -0.77s;
         animation-delay: -0.77s;
}
.atom7 > div:nth-child(2) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(36deg);
}
.atomp7 > div:nth-child(2):before {
	-webkit-animation: electronp7 1.82s infinite linear;
        animation: electronp7 1.82s infinite linear;
	-webkit-animation-delay: -1.91s;
        animation-delay: -1.91s;
}
.atomp7 > div:nth-child(3) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(-54deg);
}
.atomp7 > div:nth-child(3):before {
	-webkit-animation: electronp7 1.88s infinite linear;
        animation: electronp7 1.88s infinite linear;	
	-webkit-animation-delay: -2.19s;
         animation-delay: -2.19s;
}
.atomp7 > div:nth-child(4) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(72deg);
}
.atomp7 > div:nth-child(4):before {
	-webkit-animation: electronp7 1.94s infinite linear;
        animation: electronp7 1.94s infinite linear;		
	-webkit-animation-delay: -3.33s;
         animation-delay: -3.33s;
}
.atomp7 > div:nth-child(5) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(-90deg);
}
.atomp7 > div:nth-child(5):before {
	-webkit-animation: electronp7 2.00s infinite linear;
        animation: electronp7 2.00s infinite linear;
	-webkit-animation-delay: -4.61s;
          animation-delay: -4.61s;
}
.atomp7 > div:nth-child(6) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(108deg);
}
.atomp7 > div:nth-child(6):before {
	-webkit-animation: electronp7 2.06s infinite linear;
        animation: electronp7 2.06s infinite linear;
	-webkit-animation-delay: -6.03s;
         animation-delay: -6.03s;
}
.atomp7 > div:nth-child(7) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(-126deg);
}
.atomp7 > div:nth-child(7):before {
	-webkit-animation: electronp7 2.12s infinite linear;
        animation: electronp7 2.12s infinite linear;	
	-webkit-animation-delay: -7.17s;
         animation-delay: -7.17s;
}
.atomp7 > div:nth-child(8) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(144deg);
}
.atomp7 > div:nth-child(8):before {
	-webkit-animation: electronp7 2.18s infinite linear;
        animation: electronp7 2.18s infinite linear;		
	-webkit-animation-delay: -2.38s;
         animation-delay: -8.838s;
}

.atomp7 > div:nth-child(9) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(-162deg);
}
.atomp7 > div:nth-child(9):before {
	-webkit-animation: electronp7 2.24s infinite linear;
        animation: electronp7 2.24s infinite linear;
	-webkit-animation-delay: -9.59s;
         animation-delay: -9.59s;
}

.atomp7 > div:nth-child(10) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(180deg);
}
.atomp7 > div:nth-child(10):before {
	-webkit-animation: electronp7 2.30s infinite linear;
        animation: electronp7 2.30s infinite linear;		
	-webkit-animation-delay: -10.87s;
         animation-delay: -10.87s;
}


/* Hide some electrons*/
/*Show electron (1), hide rest*/
#one.atomp7 > div:nth-child(n+2){
	display: none;
}

/*Show electron (1,3), hide rest*/
#two.atomp7 > div:nth-child(even),
#two.atomp7 > div:nth-child(2n+5){
	display: none;
}

	display: none;
}
/*Show electron (2,4), hide rest*/
#three.atomp7 > div:nth-child(odd),
#three.atomp7 > div:nth-child(2n+6){
	
}

/*Show electron (1,3,5), hide rest*/
#three.atomp7 > div:nth-child(even),
#three.atomp7 > div:nth-child(2n+7){
	display: none;
}

/*Show electron (1,3,5,7), hide rest*/
#four.atomp7 > divnth-child(even),
#four.atomp7 > div:nth-child(9){
	display: none;
}

/*Show electron (1,3,5,7,9), hide rest*/
#five.atomp7 > div:nth-child(even){
	display: none;
}

/*Show electron (1,3,5,7,9,2), hide rest*/	
#six.atomp7 > div:nth-child(2n+4){	
	display: none;
}

/*Show electron (1,3,5,7,9,2,4), hide rest*/
#seven.atomp7 > div:nth-child(2n+6){
	display: none;
}

/*Show electron (1,3,5,7,9,2,4,6), hide rest*/	
#eight.atomp7 > div:nth-child(2n+8){
	display: none;
}

/*Show electron (1,3,5,7,9,2,4,6,8), hide rest*/
#nine.atomp7 > div:nth-child(10){
	display: none;
}


/* Orbit size, electron color change through orbit*/
@-webkit-keyframes electronp7 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-178px, 0) rotatex(-80deg) rotatey(0deg);
  }
  25% {
    background-color: #666666;
  }
  75% {
    background-color: #e7e7e7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(-178px, 0) rotatex(-80deg) rotatey(360deg);
  }
}

@keyframes electronp7 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-178px, 0) rotatex(-80deg) rotatey(0deg);
  }
  25% {
    background-color: #666666;
  }
  75% {
    background-color: #e7e7e7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(-178px, 0) rotatex(-80deg) rotatey(360deg);
  }
}

/*---eof Electrons for Period Seven Elements-------*/

/*---Electrons for Period Six Elements-------*/

.atomp6 {
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
}

.atomp6 > div {
  /* Electron trail */
	position: absolute;
	display: inline-block;
	width: 284px;
	height: 284px;
	top: 0%;
	left: 0%;
	margin: 6px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid rgba(204,204,204, 0.4); /*thickness/colour of orbit*/
	transform-style: preserve-3d;
}
.atomp6 > div:before {
  /* Electron */
  position: relative;
	display: inherit;
  content: "";
  width: 7px; /*electron size*/
  height: 7px; /*electron size*/
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #e3e3e3;
  z-index: 10;
}

/*Electron orbits*/
.atomp6 > div:nth-child(1) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(18deg);
}
.atomp6 > div:nth-child(1):before {
	-webkit-animation: electronp6 1.94s infinite linear;
        animation: electronp6 1.94s infinite linear;
	-webkit-animation-delay: -0.66s;
         animation-delay: -0.66s;
}
.atom6 > div:nth-child(2) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(36deg);
}
.atomp6 > div:nth-child(2):before {
	-webkit-animation: electronp6 2.00s infinite linear;
        animation: electronp6 2.00s infinite linear;
	-webkit-animation-delay: -1.78s;
        animation-delay: -1.78s;
}
.atomp6 > div:nth-child(3) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(54deg);
}
.atomp6 > div:nth-child(3):before {
	-webkit-animation: electronp6 2.06s infinite linear;
        animation: electronp6 2.06s infinite linear;	
	-webkit-animation-delay: -2.02s;
         animation-delay: -2.02s;
}
.atomp6 > div:nth-child(4) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(72deg);
}
.atomp6 > div:nth-child(4):before {
	-webkit-animation: electronp6 2.12s infinite linear;
        animation: electronp6 2.12s infinite linear;		
	-webkit-animation-delay: -3.14s;
         animation-delay: -3.14s;
}
.atomp6 > div:nth-child(5) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(90deg);
}
.atomp6 > div:nth-child(5):before {
	-webkit-animation: electronp6 2.18s infinite linear;
        animation: electronp6 2.18s infinite linear;
	-webkit-animation-delay: -4.38s;
          animation-delay: -4.38s;
}
.atomp6 > div:nth-child(6) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(108deg);
}
.atomp6 > div:nth-child(6):before {
	-webkit-animation: electronp6 2.24s infinite linear;
        animation: electronp6 2.24s infinite linear;
	-webkit-animation-delay: -5.74s;
         animation-delay: -5.74s;
}
.atomp6 > div:nth-child(7) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(126deg);
}
.atomp6 > div:nth-child(7):before {
	-webkit-animation: electronp6 2.30s infinite linear;
        animation: electronp6 2.30s infinite linear;	
	-webkit-animation-delay: -6.86s;
         animation-delay: -6.86s;
}
.atomp6 > div:nth-child(8) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(144deg);
}
.atomp6 > div:nth-child(8):before {
	-webkit-animation: electronp6 2.36s infinite linear;
        animation: electronp6 2.36s infinite linear;		
	-webkit-animation-delay: -8.04s;
         animation-delay: -8.04s;
}

.atomp6 > div:nth-child(9) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(162deg);
}
.atomp6 > div:nth-child(9):before {
	-webkit-animation: electronp6 2.42s infinite linear;
        animation: electronp6 2.42s infinite linear;
	-webkit-animation-delay: -9.22s;
         animation-delay: -9.22s;
}

.atomp6 > div:nth-child(10) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(180deg);
}
.atomp6 > div:nth-child(10):before {
	-webkit-animation: electronp6 2.48s infinite linear;
        animation: electronp6 2.48s infinite linear;		
	-webkit-animation-delay: -10.46s;
         animation-delay: -10.46s;
}


/* Hide some electrons*/
/*Show electron (1), hide rest*/
#one.atomp6 > div:nth-child(n+2){
	display: none;
}

/*Show electron (1,3), hide rest*/
#two.atomp6 > div:nth-child(even),
#two.atomp6 > div:nth-child(2n+5){
	display: none;
}

	display: none;
}
/*Show electron (2,4), hide rest*/
#three.atomp6 > div:nth-child(odd),
#three.atomp6 > div:nth-child(2n+6){
	
}

/*Show electron (1,3,5), hide rest*/
#three.atomp6 > div:nth-child(even),
#three.atomp6 > div:nth-child(2n+7){
	display: none;
}

/*Show electron (1,3,5,7), hide rest*/
#four.atomp6 > divnth-child(even),
#four.atomp6 > div:nth-child(9){
	display: none;
}

/*Show electron (1,3,5,7,9), hide rest*/
#five.atomp6 > div:nth-child(even){
	display: none;
}

/*Show electron (1,3,5,7,9,2), hide rest*/	
#six.atomp6 > div:nth-child(2n+4){	
	display: none;
}

/*Show electron (1,3,5,7,9,2,4), hide rest*/
#seven.atomp6 > div:nth-child(2n+6){
	display: none;
}

/*Show electron (1,3,5,7,9,2,4,6), hide rest*/	
#eight.atomp6 > div:nth-child(2n+8){
	display: none;
}

/*Show electron (1,3,5,7,9,2,4,6,8), hide rest*/
#nine.atomp6 > div:nth-child(10){
	display: none;
}

/* Orbit size, electron color change through orbit*/
@-webkit-keyframes electronp6 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-142px, 0) rotatex(-80deg) rotatey(0deg);
  }
  25% {
    background-color: #666666;
  }
  75% {
    background-color: #e7e7e7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(-142px, 0) rotatex(-80deg) rotatey(360deg);
  }
}

@keyframes electronp6 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-142px, 0) rotatex(-80deg) rotatey(0deg);
  }
  25% {
    background-color: #666666;
  }
  75% {
    background-color: #e7e7e7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(-142px, 0) rotatex(-80deg) rotatey(360deg);
  }
}

/*---eof Electrons for Period Six Elements-------*/

/*---Electrons for Period Five Elements-------*/

.atomp5 {
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
}

.atomp5 > div {
  /* Electron trail */
	position: absolute;
	display: inline-block;
	width: 210px;
	height: 210px;
	top: 0%;
	left: 0%;
	margin: 6px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid rgba(204,204,204, 0.4); /*thickness/colour of orbit*/
	transform-style: preserve-3d;
	transform: translate(-50%, -50%) rotateX(80deg) rotateY(20deg);
}
.atomp5 > div:before {
  /* Electron */
  position: relative;
	display: inherit;
  content: "";
  width: 7px; /*electron size*/
  height: 7px; /*electron size*/
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #e3e3e3;
  z-index: 10;
}

/*Electron orbits*/
.atomp5 > div:nth-child(1) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(18deg);
}
.atomp5 > div:nth-child(1):before {
	-webkit-animation: electronp5 1.62s infinite linear;
        animation: electronp5 1.62s infinite linear;
	-webkit-animation-delay: -0.55s;
         animation-delay: -0.55s;
}
.atomp5 > div:nth-child(2) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(36deg);
}
.atomp5 > div:nth-child(2):before {
	-webkit-animation: electronp5 1.66s infinite linear;
        animation: electronp5 1.66s infinite linear;
	-webkit-animation-delay: -1.65s;
        animation-delay: -1.65s;
}
.atomp5 > div:nth-child(3) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(54deg);
}
.atomp5 > div:nth-child(3):before {
	-webkit-animation: electronp5 1.70s infinite linear;
        animation: electronp5 1.70s infinite linear;	
	-webkit-animation-delay: -2.85s;
         animation-delay: -2.85s;
}
.atomp5 > div:nth-child(4) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(72deg);
}
.atomp5 > div:nth-child(4):before {
	-webkit-animation: electronp5 1.74s infinite linear;
        animation: electronp5 1.74s infinite linear;		
	-webkit-animation-delay: -3.95s;
         animation-delay: -3.95s;
}
.atomp5 > div:nth-child(5) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(90deg);
}
.atomp5 > div:nth-child(5):before {
	-webkit-animation: electronp5 1.78s infinite linear;
        animation: electronp5 1.78s infinite linear;
	-webkit-animation-delay: -5.15s;
          animation-delay: -5.15s;
}
.atomp5 > div:nth-child(6) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(108deg);
}
.atomp5 > div:nth-child(6):before {
	-webkit-animation: electronp5 1.82s infinite linear;
        animation: electronp5 1.82s infinite linear;
	-webkit-animation-delay: -6.45s;
         animation-delay: -6.45s;
}
.atomp5 > div:nth-child(7) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(126deg);
}
.atomp5 > div:nth-child(7):before {
	-webkit-animation: electronp5 1.86s infinite linear;
        animation: electronp5 1.86s infinite linear;	
	-webkit-animation-delay: -7.55s;
         animation-delay: -7.55s;
}
.atomp5 > div:nth-child(8) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(144deg);
}
.atomp5 > div:nth-child(8):before {
	-webkit-animation: electronp5 1.90s infinite linear;
        animation: electronp5 1.90s infinite linear;		
	-webkit-animation-delay: -8.7s;
         animation-delay: -8.7;
}

.atomp5 > div:nth-child(9) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(162deg);
}
.atomp5 > div:nth-child(9):before {
	-webkit-animation: electronp5 1.94s infinite linear;
        animation: electronp5 1.94s infinite linear;
	-webkit-animation-delay: -9.85s;
         animation-delay: -9.85s;
}

.atomp5 > div:nth-child(10) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(180deg);
}
.atomp5 > div:nth-child(10):before {
	-webkit-animation: electronp5 1.98s infinite linear;
        animation: electronp5 1.98s infinite linear;		
	-webkit-animation-delay: -11.05s;
         animation-delay: -11.05s;
}


/* Hide some electrons*/
/*Show electron (1), hide rest*/
#one.atomp5 > div:nth-child(n+2){
	display: none;
}

/*Show electron (1,3), hide rest*/
#two.atomp5 > div:nth-child(even),
#two.atomp5 > div:nth-child(2n+5){
	display: none;
}

	display: none;
}
/*Show electron (2,4), hide rest*/
#three.atomp5 > div:nth-child(odd),
#three.atomp5 > div:nth-child(2n+6){
	
}

/*Show electron (1,3,5), hide rest*/
#three.atomp5 > div:nth-child(even),
#three.atomp5 > div:nth-child(2n+7){
	display: none;
}

/*Show electron (1,3,5,7), hide rest*/
#four.atomp5 > divnth-child(even),
#four.atomp5 > div:nth-child(9){
	display: none;
}

/*Show electron (1,3,5,7,9), hide rest*/
#five.atomp5 > div:nth-child(even){
	display: none;
}

/*Show electron (1,3,5,7,9,2), hide rest*/	
#six.atomp5 > div:nth-child(2n+4){	
	display: none;
}

/*Show electron (1,3,5,7,9,2,4), hide rest*/
#seven.atomp5 > div:nth-child(2n+6){
	display: none;
}

/*Show electron (1,3,5,7,9,2,4,6), hide rest*/	
#eight.atomp5 > div:nth-child(2n+8){
	display: none;
}

/*Show electron (1,3,5,7,9,2,4,6,8), hide rest*/
#nine.atomp5 > div:nth-child(10){
	display: none;
}


/* Orbit size, electron color change through orbit*/
@-webkit-keyframes electronp5 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-105px, 0) rotatex(-80deg) rotatey(0deg);
  }
  25% {
    background-color: #666666;
  }
  75% {
    background-color: #e7e7e7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(-105px, 0) rotatex(-80deg) rotatey(360deg);
  }
}

@keyframes electronp5 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-105px, 0) rotatex(-80deg) rotatey(0deg);
  }
  25% {
    background-color: #666666;
  }
  75% {
    background-color: #e7e7e7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(-105px, 0) rotatex(-80deg) rotatey(360deg);
  }
}

/*---eof Electrons for Period Five Elements-------*/

/*---Electrons for Period Four Elements-------*/

.atomp4 {
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
}

.atomp4 > div {
  /* Electron trail */
	position: absolute;
	display: inline-block;
	width: 150px;
	height: 150px;
	top: 0%;
	left: 0%;
	margin: 6px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid rgba(204,204,204, 0.4); /*thickness/colour of orbit*/
	transform-style: preserve-3d;
	transform: translate(-50%, -50%) rotateX(80deg) rotateY(20deg);
}
.atomp4 > div:before {
  /* Electron */
  position: relative;
	display: inherit;
  content: "";
  width: 7px; /*electron size*/
  height: 7px; /*electron size*/
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #e3e3e3;
  z-index: 10;
}

/*Electron orbits*/
.atomp4 > div:nth-child(1) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(18deg);
}
.atomp4 > div:nth-child(1):before {
	-webkit-animation: electronp4 1.30s infinite linear;
        animation: electronp4 1.30s infinite linear;
	-webkit-animation-delay: -0.44s;
         animation-delay: -0.44s;
}
.atomp4 > div:nth-child(2) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(36deg);
}
.atomp4 > div:nth-child(2):before {
	-webkit-animation: electronp4 1.34s infinite linear;
        animation: electronp4 1.34s infinite linear;
	-webkit-animation-delay: -1.52s;
        animation-delay: -1.52s;
}
.atomp4 > div:nth-child(3) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(54deg);
}
.atomp4 > div:nth-child(3):before {
	-webkit-animation: electronp4 1.38s infinite linear;
        animation: electronp4 1.38s infinite linear;	
	-webkit-animation-delay: -2.68s;
         animation-delay: -2.68s;
}
.atomp4 > div:nth-child(4) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(72deg);
}
.atomp4 > div:nth-child(4):before {
	-webkit-animation: electronp4 1.42s infinite linear;
        animation: electronp4 1.42s infinite linear;		
	-webkit-animation-delay: -3.76s;
         animation-delay: -3.76s;
}
.atomp4 > div:nth-child(5) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(90deg);
}
.atomp4 > div:nth-child(5):before {
	-webkit-animation: electronp4 1.46s infinite linear;
        animation: electronp4 1.46s infinite linear;
	-webkit-animation-delay: -4.92s;
          animation-delay: -4.92s;
}
.atomp4 > div:nth-child(6) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(108deg);
}
.atomp4 > div:nth-child(6):before {
	-webkit-animation: electronp4 1.50s infinite linear;
        animation: electronp4 1.50s infinite linear;
	-webkit-animation-delay: -6.16s;
         animation-delay: -6.16s;
}
.atomp4 > div:nth-child(7) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(126deg);
}
.atomp4 > div:nth-child(7):before {
	-webkit-animation: electronp4 1.54s infinite linear;
        animation: electronp4 1.54s infinite linear;	
	-webkit-animation-delay: -7.24s;
         animation-delay: -7.24s;
}
.atomp4 > div:nth-child(8) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(144deg);
}
.atomp4 > div:nth-child(8):before {
	-webkit-animation: electronp4 1.58s infinite linear;
        animation: electronp4 1.58s infinite linear;		
	-webkit-animation-delay: -8.36s;
         animation-delay: -8.36s;
}

.atomp4 > div:nth-child(9) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(162deg);
}
.atomp4 > div:nth-child(9):before {
	-webkit-animation: electronp4 1.62s infinite linear;
        animation: electronp4 1.62s infinite linear;
	-webkit-animation-delay: -1.48s;
         animation-delay: -1.48s;
}

.atomp4 > div:nth-child(10) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(180deg);
}
.atomp4 > div:nth-child(10):before {
	-webkit-animation: electronp4 1.66s infinite linear;
        animation: electronp4 1.66s infinite linear;		
	-webkit-animation-delay: -1.64s;
         animation-delay: -1.64s;
}



/* Hide some electrons*/
/*Show electron (1), hide rest*/
#one.atomp4 > div:nth-child(n+2){
	display: none;
}

/*Show electron (1,3), hide rest*/
#two.atomp4 > div:nth-child(even),
#two.atomp4 > div:nth-child(2n+5){
	display: none;
}

	display: none;
}
/*Show electron (2,4), hide rest*/
#three.atomp4 > div:nth-child(odd),
#three.atomp4 > div:nth-child(2n+6){
	
}

/*Show electron (1,3,5), hide rest*/
#three.atomp4 > div:nth-child(even),
#three.atomp4 > div:nth-child(2n+7){
	display: none;
}

/*Show electron (1,3,5,7), hide rest*/
#four.atomp4 > divnth-child(even),
#four.atomp4 > div:nth-child(9){
	display: none;
}

/*Show electron (1,3,5,7,9), hide rest*/
#five.atomp4 > div:nth-child(even){
	display: none;
}

/*Show electron (1,3,5,7,9,2), hide rest*/	
#six.atomp4 > div:nth-child(2n+4){	
	display: none;
}

/*Show electron (1,3,5,7,9,2,4), hide rest*/
#seven.atomp4 > div:nth-child(2n+6){
	display: none;
}

/*Show electron (1,3,5,7,9,2,4,6), hide rest*/	
#eight.atomp4 > div:nth-child(2n+8){
	display: none;
}

/*Show electron (1,3,5,7,9,2,4,6,8), hide rest*/
#nine.atomp4 > div:nth-child(10){
	display: none;
}


/* Orbit size, electron color change through orbit*/
@-webkit-keyframes electronp4 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-75px, 0) rotatex(-80deg) rotatey(0deg);
  }
  25% {
    background-color: #666666;
  }
  75% {
    background-color: #e7e7e7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(-75px, 0) rotatex(-80deg) rotatey(360deg);
  }
}

@keyframes electronp4 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-75px, 0) rotatex(-80deg) rotatey(0deg);
  }
  25% {
    background-color: #666666;
  }
  75% {
    background-color: #e7e7e7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(-75px, 0) rotatex(-80deg) rotatey(360deg);
  }
}

/*---eof Electrons for Period Four Elements-------*/

/*---Electrons for Period Three Elements-------*/

.atomp3 {
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
}

.atomp3 > div {
  /* Electron trail */
	position: absolute;
	display: inline-block;
	width: 100px;
	height: 100px;
	top: 0%;
	left: 0%;
	margin: 6px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid rgba(204,204,204, 0.4); /*thickness/colour of orbit*/
	transform-style: preserve-3d;
	transform: translate(-50%, -50%) rotateX(80deg) rotateY(20deg);
}
.atomp3 > div:before {
  /* Electron */
  position: relative;
	display: inherit;
  content: "";
  width: 7px; /*electron size*/
  height: 7px; /*electron size*/
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #e3e3e3;
  z-index: 10;
}

/*Electron orbits*/
.atomp3 > div:nth-child(1) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(18deg);
}
.atomp3 > div:nth-child(1):before {
	-webkit-animation: electronp3 1.08s infinite linear;
        animation: electronp3 1.08s infinite linear;
	-webkit-animation-delay: -0.33s;
         animation-delay: -0.33s;
}
.atomp3 > div:nth-child(2) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(36deg);
}
.atomp3 > div:nth-child(2):before {
	-webkit-animation: electronp3 1.12s infinite linear;
        animation: electronp3 1.12s infinite linear;
	-webkit-animation-delay: -0.69s;
        animation-delay: -0.69s;
}
.atomp3 > div:nth-child(3) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(54deg);
}
.atomp3 > div:nth-child(3):before {
	-webkit-animation: electronp3 1.16s infinite linear;
        animation: electronp3 1.16s infinite linear;	
	-webkit-animation-delay: -1.51s;
         animation-delay: -1.51s;
}
.atomp3 > div:nth-child(4) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(72deg);
}
.atomp3 > div:nth-child(4):before {
	-webkit-animation: electronp3 1.20s infinite linear;
        animation: electronp3 1.20s infinite linear;		
	-webkit-animation-delay: -2.57s;
         animation-delay: -2.57s;
}
.atomp3 > div:nth-child(5) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(90deg);
}
.atomp3 > div:nth-child(5):before {
	-webkit-animation: electronp3 1.24s infinite linear;
        animation: electronp3 1.24s infinite linear;
	-webkit-animation-delay: -3.69s;
          animation-delay: -3.69s;
}
.atomp3 > div:nth-child(6) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(108deg);
}
.atomp3 > div:nth-child(6):before {
	-webkit-animation: electronp3 1.28s infinite linear;
        animation: electronp3 1.28s infinite linear;
	-webkit-animation-delay: -4.87s;
         animation-delay: -4.87s;
}
.atomp3 > div:nth-child(7) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(126deg);
}
.atomp3 > div:nth-child(7):before {
	-webkit-animation: electronp3 1.32s infinite linear;
        animation: electronp3 1.32s infinite linear;	
	-webkit-animation-delay: -5.93s;
         animation-delay: -5.93s;
}
.atomp3 > div:nth-child(8) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(144deg);
}
.atomp3 > div:nth-child(8):before {
	-webkit-animation: electronp3 1.36s infinite linear;
        animation: electronp3 1.36s infinite linear;	
	-webkit-animation-delay: -7.02s;
         animation-delay: -7.02s;
}


/* Hide some electrons*/
/*Show electron (1), hide rest*/
#one.atomp3 > div:nth-child(n+2){
	display: none;
}

/*Show electron (1,3), hide rest*/
#two.atomp3 > div:nth-child(even),
#two.atomp3 > div:nth-child(2n+5){
	display: none;
}

	display: none;
}
/*Show electron (2,4), hide rest*/
#three.atomp3 > div:nth-child(odd),
#three.atomp3 > div:nth-child(2n+6){
	
}

/*Show electron (1,3,5), hide rest*/
#three.atomp3 > div:nth-child(even),
#three.atomp3 > div:nth-child(2n+7){
	display: none;
}

/*Show electron (1,3,5,7), hide rest*/
#four.atomp3 > divnth-child(even),
#four.atomp3 > div:nth-child(9){
	display: none;
}

/*Show electron (1,3,5,7,9), hide rest*/
#five.atomp3 > div:nth-child(even){
	display: none;
}

/*Show electron (1,3,5,7,9,2), hide rest*/	
#six.atomp3 > div:nth-child(2n+4){	
	display: none;
}

/*Show electron (1,3,5,7,9,2,4), hide rest*/
#seven.atomp3 > div:nth-child(2n+6){
	display: none;
}



/* Orbit size, electron color change through orbit*/
@-webkit-keyframes electronp3 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-50px, 0) rotatex(-80deg) rotatey(0deg);
  }
  25% {
    background-color: #666666;
  }
  75% {
    background-color: #e7e7e7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(-50px, 0) rotatex(-80deg) rotatey(360deg);
  }
}

@keyframes electronp3 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-50px, 0) rotatex(-80deg) rotatey(0deg);
  }
  25% {
    background-color: #666666;
  }
  75% {
    background-color: #e7e7e7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(-50px, 0) rotatex(-80deg) rotatey(360deg);
  }
}

/*---eof Electrons for Period Three Elements-------*/

/*---Electrons for Period Two Elements-------*/

.atomp2 {
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
}

.atomp2 > div {
  /* Electron trail */
	position: absolute;
	display: inline-block;
	width: 60px;
	height: 60px;
	top: 0%;
	left: 0%;
	margin: 6px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid rgba(204,204,204, 0.4); /*thickness/colour of orbit*/
	transform-style: preserve-3d;
	transform: translate(-50%, -50%) rotateX(80deg) rotateY(20deg);
}
.atomp2 > div:before {
  /* Electron */
  position: relative;
	display: inherit;
  content: "";
  width: 7px; /*electron size*/
  height: 7px; /*electron size*/
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #e3e3e3;
  z-index: 10;
}

/*Electron orbits*/
.atomp2 > div:nth-child(1) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(22.5deg);
}
.atomp2 > div:nth-child(1):before {
	-webkit-animation: electronp2 0.84s infinite linear;
        animation: electronp2 0.84s infinite linear;
	-webkit-animation-delay: -0.22s;
         animation-delay: -0.22s;
}
.atomp2 > div:nth-child(2) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(-45deg);
}
.atomp2 > div:nth-child(2):before {
	-webkit-animation: electronp2 0.86s infinite linear;
        animation: electronp2 0.86s infinite linear;
	-webkit-animation-delay: -0.26s;
        animation-delay: -0.26s;
}
.atomp2 > div:nth-child(3) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(67.5deg);
}
.atomp2 > div:nth-child(3):before {
	-webkit-animation: electronp2 0.88s infinite linear;
        animation: electronp2 0.88s infinite linear;	
	-webkit-animation-delay: -0.34s;
         animation-delay: -0.34s;
}
.atomp2 > div:nth-child(4) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(-90deg);
}
.atomp2 > div:nth-child(4):before {
	-webkit-animation: electronp2 0.90s infinite linear;
        animation: electronp2 0.90s infinite linear;		
	-webkit-animation-delay: -0.38s;
         animation-delay: -0.38s;
}
.atomp2 > div:nth-child(5) {
  display: block;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(112.5deg);
}
.atomp2 > div:nth-child(5):before {
	-webkit-animation: electronp2 0.92s infinite linear;
        animation: electronp2 0.92s infinite linear;
	-webkit-animation-delay: -0.46s;
          animation-delay: -0.46s;
}
.atomp2 > div:nth-child(6) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(-135deg);
}
.atomp2 > div:nth-child(6):before {
	-webkit-animation: electronp2 0.94s infinite linear;
        animation: electronp2 0.94s infinite linear;
	-webkit-animation-delay: -0.58s;
         animation-delay: -0.58s;
}
.atomp2 > div:nth-child(7) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(157.5deg);
}
.atomp2 > div:nth-child(7):before {
	-webkit-animation: electronp2 0.96s infinite linear;
        animation: electronp2 0.96s infinite linear;	
	-webkit-animation-delay: -0.62s;
         animation-delay: -0.62s;
}
.atomp2 > div:nth-child(8) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(-180deg);
}
.atomp2 > div:nth-child(8):before {
	-webkit-animation: electronp2 0.98s infinite linear;
        animation: electronp2 0.98s infinite linear;		
	-webkit-animation-delay: -0.68s;
         animation-delay: -0.68s;
}



/* Hide some electrons*/
/*Show electron (1), hide rest*/
#one.atomp2 > div:nth-child(n+2){
	display: none;
}

/*Show electron (1,3), hide rest*/
#two.atomp2 > div:nth-child(even),
#two.atomp2 > div:nth-child(2n+5){
	display: none;
}

	display: none;
}
/*Show electron (2,4), hide rest*/
#three.atomp2 > div:nth-child(odd),
#three.atomp2 > div:nth-child(2n+6){
	
}

/*Show electron (1,3,5), hide rest*/
#three.atomp2 > div:nth-child(even),
#three.atomp2 > div:nth-child(2n+7){
	display: none;
}

/*Show electron (1,3,5,7), hide rest*/
#four.atomp2 > divnth-child(even),
#four.atomp2 > div:nth-child(9){
	display: none;
}

/*Show electron (1,3,5,7,9), hide rest*/
#five.atomp2 > div:nth-child(even){
	display: none;
}

/*Show electron (1,3,5,7,9,2), hide rest*/	
#six.atomp2 > div:nth-child(2n+4){	
	display: none;
}

/*Show electron (1,3,5,7,9,2,4), hide rest*/
#seven.atomp2 > div:nth-child(2n+6){
	display: none;
}



/* Orbit size, electron color change through orbit*/
@-webkit-keyframes electronp2 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-30px, 0) rotatex(-80deg) rotatey(0deg);
  }
  25% {
    background-color: #666666;
  }
  75% {
    background-color: #e7e7e7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(-30px, 0) rotatex(-80deg) rotatey(360deg);
  }
}

@keyframes electronp2 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-30px, 0) rotatex(-80deg) rotatey(0deg);
  }
  25% {
    background-color: #666666;
  }
  75% {
    background-color: #e7e7e7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(-30px, 0) rotatex(-80deg) rotatey(360deg);
  }
}

/*---eof Electrons for Period Two Elements-------*/

/*---Electrons for Period One Elements-------*/

.atomp1 {
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
}

.atomp1 > div {
  /* Electron trail */
	position: absolute;
	display: inline-block;
	width: 30px;
	height: 30px;
	top: 0%;
	left: 0%;
	margin: 6px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid rgba(204,204,204, 0.4); /*thickness/colour of orbit*/
	transform-style: preserve-3d;
	transform: translate(-50%, -50%) rotateX(80deg) rotateY(18deg);
}
.atomp1 > div:before {
  /* Electron */
  position: relative;
	display: inherit;
  content: "";
  width: 7px; /*electron size*/
  height: 7px; /*electron size*/
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #e3e3e3;
  z-index: 10;
}

/*Electron orbits*/
.atomp1 > div:nth-child(1) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(18deg);
}
.atomp1 > div:nth-child(1):before {
	-webkit-animation: electronp1 0.52s infinite linear;
        animation: electronp1 0.52s infinite linear;
	-webkit-animation-delay: -0.11s;
         animation-delay: -0.11s;
}
.atomp1 > div:nth-child(2) {
  display: block;
  transform: translate(-50%, -50%) rotateX(80deg) rotateY(-108deg);
}
.atomp1 > div:nth-child(2):before {
	-webkit-animation: electronp1 0.48s infinite linear;
        animation: electronp1 0.48s infinite linear;
	-webkit-animation-delay: -0.13s;
        animation-delay: -0.13s;
}


/* Hide some electrons*/
/*Show electron (1), hide rest*/
#one.atomp1 > div:nth-child(n+2){
	display: none;
}



/* Orbit size, electron color change through orbit*/
@-webkit-keyframes electronp1 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-15px, 0) rotatex(-80deg) rotatey(0deg);
  }
  25% {
    background-color: #666666;
  }
  75% {
    background-color: #e7e7e7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(-15px, 0) rotatex(-80deg) rotatey(360deg);
  }
}

@keyframes electronp1 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(-15px, 0) rotatex(-80deg) rotatey(0deg);
  }
  25% {
    background-color: #666666;
  }
  75% {
    background-color: #e7e7e7;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(-15px, 0) rotatex(-80deg) rotatey(360deg);
  }
}

/*---eof Electrons for Period One Elements-------*/


/*Place image in background of modal*/
.backatom {
	position:absolute;
	left: 70%;
	z-index: 1;
	top: 0;
    bottom: 0;
	margin: auto;
	vertical-align: baseline;
	display: flex;
	justify-content: center;
	align-items: center;
}



