.btn-spc1 {
    position: absolute;
    left: -0.6em;
    top: 3.5em;
    height: 4.5em;
    width: 0.6em;
    background: #e4e4e4;
    border-radius: -0.1em -0.2em -0.5em 0.5em/0.9em 0.1em 0.1em 0.9em;
    ;
    box-shadow: inset 0.1em 0.05em 0 #AFAFAF, inset -0.2em 0.5em 0.2em -0.2em #FFF, inset -0.25em 0.8em 0.2em -0.2em #000, inset 0.1em -0.6em 0.2em -0.2em #000;

}

.r_power2h {
    position: absolute;
    right: -1em;
    top: 3.5em;
    height: 4.5em;
    width: 0.6em;
    background: #e4e4e4;
    /* border-radius: 0.5em 0.5em 0.5em 0.5em ; */
    border-radius: -0.1em -0.2em -0.5em 0.5em/0.9em 0.1em 0.1em 0.9em;
    box-shadow: inset 0.1em 0.05em 0 #AFAFAF, inset -0.2em 0.5em 0.2em -0.2em #FFF, inset -0.25em 0.8em 0.2em -0.2em #000, inset 0.1em -0.6em 0.2em -0.2em #000;
}

.r_power3h {
    position: absolute;
    right: -1em;
    top: 16em;
    height: 4.5em;
    width: 0.6em;
    background: #e4e4e4;
    /* border-radius: 0.3em 0.1em 0.1em 0.3em / 0.9em 0.1em 0.1em 0.9em; */
    border-radius: -0.1em -0.2em -0.5em 0.5em/0.9em 0.1em 0.1em 0.9em;
    box-shadow: inset 0.1em 0.05em 0 #AFAFAF, inset -0.2em 0.5em 0.2em -0.2em #FFF, inset -0.25em 0.8em 0.2em -0.2em #000, inset 0.1em -0.6em 0.2em -0.2em #000;
}

.l_power4h {
    position: absolute;
    left: -0.6em;
    top: 16em;
    height: 4.5em;
    width: 0.6em;
    background: #e4e4e4;
    border-radius: -0.1em -0.2em -0.5em 0.5em/0.9em 0.1em 0.1em 0.9em;
    box-shadow: inset 0.1em 0.05em 0 #AFAFAF, inset -0.2em 0.5em 0.2em -0.2em #FFF, inset -0.25em 0.8em 0.2em -0.2em #000, inset 0.1em -0.6em 0.2em -0.2em #000;
}

.btn-spc2 {
    position: absolute;
    left: -0.6em;
    top: 16em;
    height: 4.5em;
    width: 0.6em;
    background: #e4e4e4;
    border-radius: -0.1em -0.2em -0.5em 0.5em/0.9em 0.1em 0.1em 0.9em;
    box-shadow: inset 0.1em 0.05em 0 #AFAFAF, inset -0.2em 0.5em 0.2em -0.2em #FFF, inset -0.25em 0.8em 0.2em -0.2em #000, inset 0.1em -0.6em 0.2em -0.2em #000;
}

/* parte interna del circulo  y tamaño de los numeros*/
#horax {
    display: flex;
    top: 20px;
    text-align: center;
    flex-direction: row-reverse;
    font-size: 20px;
}

#minutosx{
    display: flex;
    top: 20px;
    text-align: center;
    flex-direction: row-reverse;
    font-size: 20px;
}

#segundosx{
    display: flex;
    top: 20px;
    text-align: center;
    flex-direction: row-reverse;
    font-size: 20px;
}

/* parte que centra las ruedas */
.container-flex {
    display: flex;
    float: left;
    margin-top: -180px;
    height: 100px;
    width: 233px;
    justify-content: center;
    align-items: center;
}
/* el div que contiene todo sobre la hora */
.camhora {
    display: flex;
    justify-content: center;
    align-items: center;
    color: whitesmoke;
}

.container-flex div {
    opacity: 0.25;
    height: 65px;
    width: 65px;
    justify-content: center;
    align-items: center;
    
}

.container-flex div.active {
    opacity: 1;
}

.container-flex div:nth-child(1) {
/*     text-align: center;
    justify-content: center; */
}

.container-flex div:nth-child(2) {
/*     text-align: center;
    flex-direction: row; */
}

.container-flex div:nth-child(3) {
/*     text-align: center;
    top: 20px;*/
} 
/* las letras de modo hora */
.arriba{
    position: absolute;
    top: 30px;
    margin-top: 30px;
    left: 60px;
    
}

.lhora{
    position: absolute;
    top: 170px;
    margin-top: -20px;
    left: 38px;
}
.lminutos{
    position: absolute;
    top: 170px;
    margin-top: -20px;
    left: 100px;
}

.lsegundos{
    position: absolute;
    top: 170px;
    margin-top: -20px;
    left: 164px;
}