.atom {
    position:relative;
    height: 90px;
}
.orbital {
    -moz-transform:    rotate(45deg) scale(1, 1) skewX(12deg) skewY(40deg) translate(0, 0);
    -webkit-transform: rotate(45deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -o-transform:      rotate(45deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -ms-transform:     rotate(45deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    transform:         rotate(45deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    position:absolute;
    width: 70px;
    height:70px;
    top:50%;
    left:50%;
    margin-top: -35px;
    margin-left:-35px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 4px solid #A1CCE8;
}
.orbital.e3 {
    -moz-transform:    rotate(90deg) scale(1, 1) skewX(12deg) skewY(40deg) translate(0, 0);
    -webkit-transform: rotate(90deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -o-transform:      rotate(90deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -ms-transform:     rotate(90deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    transform:         rotate(90deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
}
.orbital.e2 {
    -moz-transform:     rotate(-25deg) scale(1, 1) skewX(12deg) skewY(40deg) translate(0, 0);
    -webkit-transform:  rotate(-25deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -o-transform:       rotate(-25deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -ms-transform:      rotate(-25deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    transform:          rotate(-25deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
}








.ruta {
    width: 70px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -5px;
}
.electron {
/*    background-color: #002B5F;*/
    background-color: #2CCBF0;
    -webkit-border-radius: 300%;
    -moz-border-radius: 300%;
    border-radius: 300%;
    width:7px;
    height:9px;
    margin-left:-6px;
}
/*.electron2 {
/*    background-color: #002B5F;*/
/*    background-color: #2CCBF0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width:9px;
    height:9px;
    margin-left:-6px;
}

.electron3 {
    background-color: #2CCBF0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width:9px;
    height:9px;
    margin-left:-6px;
}*/




.proton, .neutron {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position:absolute;
    width:28px;
    height:28px;
}
.neutron {
	background: rgba(179,220,237,1);
background: -moz-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(179,220,237,1)), color-stop(50%, rgba(41,184,229,1)), color-stop(100%, rgba(188,224,238,1)));
background: -webkit-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: -o-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: -ms-linear-gradient(left, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: linear-gradient(to right, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=1 );
/*    background-color:#2CCBF0; /*#B9E9F7;*/
}
.neutron.dx {
    left:50%;
    margin-top: -9px;
	margin-left:-9px;
    top:50%;
}



.ruta {
    -webkit-animation: spin 4.2s infinite linear;
         -o-animation: spin 4.2s infinite linear;
            animation: spin 4.2s infinite linear;
}

.orbital.e2 .ruta {
    -webkit-animation: spin 3s infinite -1.25s linear;
         -o-animation: spin 3s infinite -1.95s linear;
            animation: spin 3s infinite -1.25s linear;
}
.orbital.e3 .ruta {
    -webkit-animation: spin 3.5s infinite 0s linear;
         -o-animation: spin 3.5s infinite 0s linear;
            animation: spin 3.5s infinite 0s linear;
}








/*-- Animación electron --*/

 @-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}