*{
    transition: all .5 easy;
}





#exp1,#exp2,#exp3,#exp4,#expb1,#expb2,#expb3,#expb4,#expc1,#expc2,#expc3,#expc4,
#expd1,#expd2,#expd3,#expd4, #expe1,#expe2,#expe3,#expe4, #expf1,#expf2,#expf3,#expf4,
#expg1,#expg2,#expg3,#expg4,#exph1,#exph2,#exph3,#exph4{
    display: none;
}
#exp1,#exp2,#exp3,#exp4{
    color: #fff;
}
#expb1,#expb2,#expb3,#expb4{
    filter: hue-rotate(-40deg);
    height: 300px;
    margin: auto;
}
@media screen and (max-width:1000px) {
    
}
#expc1,#expc2,#expc3,#expc4{

}
#expd1,#expd2,#expd3,#expd4{

}
#expe1,#expe2,#expe3,#expe4{

}
#expf1,#expf2,#expf3,#expf4{

}
#expg1,#expg2,#expg3,#expg4{

}
#exph1,#exph2,#exph3,#exph4{

}

a.exp-box-1 img {
    transform: scale(1.2,1.2);
}

.show-exp {
display: flex !important;
transition: all 0.5s ease-out;
filter: brightness(.8);
height: 350px;
}
.show-exp img:hover {
    transform: scale(1.5,1.5);
    transition: all 0.2s ease-out;
    filter: brightness(1.4);
}
.exp-contents-hide{
    display: none !important;
}
.contents-all{
    display: flex;
    flex-direction: column;
}
.exp-fila{
display: flex !important;
width: 80%;
position: relative;
margin: auto;
left: -25px;
}

.checkpoint{
    display: none !important; 
 }

 a.exp-box-1 img {
    width: 60px;
    margin-top: 10px;
    margin: auto;

}

a.exp-box-1 {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    margin: auto;
    font-size: 15px;
    color: #fff;
}

.atom {
    position:relative;
    height: 150px;
    transform: translateX(-60px);
}
.orbital {
    -moz-transform: rotate(-55deg) scale(1, 1) skewX(12deg) skewY(40deg) translate(0, 0);
    -webkit-transform: rotate(-55deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -o-transform: rotate(-55deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -ms-transform: rotate(-55deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    transform: rotate(-55deg) 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: 2px solid #999;
}
.orbital.e3 {
    -moz-transform: rotate(70deg) scale(1, 1) skewX(12deg) skewY(40deg) translate(0, 0);
    -webkit-transform: rotate(70deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -o-transform: rotate(70deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -ms-transform: rotate(70deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    transform: rotate(70deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
}
.orbital.e2 {
    -moz-transform: rotate(240deg) scale(1, 1) skewX(12deg) skewY(40deg) translate(0, 0);
    -webkit-transform: rotate(0deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -o-transform: rotate(0deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -ms-transform: rotate(0deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    transform: rotate(0deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
}
.ruta {
    width: 70px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -5px;
}
.electron {
    background-color: #00C4C9;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width:9px;
    height:9px;
    margin-left:-6px;
}
.ruta {
    -webkit-animation: spin 2.5s infinite linear;
    -o-animation: spin 2.5s infinite linear;
    animation: spin 2.5s infinite linear;
}
.orbital.e2 .ruta {
    -webkit-animation: spin 2.5s infinite -1.25s linear;
    -o-animation: spin 2.5s infinite -1.25s linear;
    animation: spin 2.5s infinite -1.25s linear;
}
.orbital.e3 .ruta {
    -webkit-animation: spin 2.5s infinite 0s linear;
    -o-animation: spin 2.5s infinite 0s linear;
    animation: spin 2.5s infinite 0s linear;
}
/*-- Animación Spin --*/
 @-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);
    }
}