/* rotate the selected group linearly
for the seconds dial the duration is toned down to 1s
*/
.rotate {
    animation: rotate 60s linear infinite;
}

@keyframes rotate {
    to {
        transform: rotate(1turn);
    }
}

/* animate the mark to temporarily show the circle
! this is experimental and should otherwise occur following a click on the lap button
*/
.mark {
    animation: mark 0.75s 7.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes mark {
    0% {
        opacity: 0;
    }

    30%,
    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(2px);
    }
}

.cronotxt,
.cronop {
    color: whitesmoke
}

.rueda {
    color: whitesmoke;
}

.rotate {
    color: whitesmoke;
}

.ruedita {
    color: whitesmoke;
}

#clock2 {
    position: absolute;
    top: 50px;
    text-align: center;
    width: 100%;
    height: 100%;
    transition: all ease-in-out 0.5s;
}

/* botones */
.l_power1c {
    position: absolute;
    left: -0.6em;
    top: -1.1em;
    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_power2c {
    position: absolute;
    right: -0.9em;
    top: -1.1em;
    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_power3c {
    position: absolute;
    right: -0.9em;
    top: 11.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;
}

.l_power4c {
    position: relative;
    left: -0.6em;
    top: 11.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;
    opacity: 100px;
}
