#tasaCafe{
    transform: translateX(30%);
    animation: moveTasa 1.8s .5s ease-in-out both
}
#planta{
    transform: translateX(-40%);
    animation: moveTasa 1.8s .5s ease-in-out both;
}
#laptop{
    transform: translateX(5%);
    animation: moveTasa 1.8s .5s ease-in-out both
}
#caraDev{
    transform-origin: 50% 100%;
    transform-box: fill-box;
    animation: moveDev 2s 1s ease-out 5 both;
}
#nubeGrande{
    transform: translateX(-60%);
    animation: moveNube 10s .5s ease-out  infinite;
}
#cuadrosCentroIzquierda{
    transform: translateY(-50%);
    animation: moveCuadros  2s .5s ease-out both;
}
#cuadrosCentroDerecha{
    transform: translateY(-50%);
    animation: moveCuadros  2s 1s ease-out both;
}
#cuadrosDerecha{
    transform: translateY(-50%);
    animation: moveCuadros  2s 1s ease-out both;
}
#server-btn-1{
    fill: white;
    animation: onbtn 2s .5s both;
}
#server-btn-2{
    fill: white;
    animation: onbtn 2s 1s both;
}
#server-btn-3{
    fill: white;
    animation: onbtn 2s 1.5s both;
}


@keyframes onbtn {
    100%{
        fill: rgb(97, 223, 97);
    }
}

@keyframes moveCuadros{
    100%{
        transform: unset;
    }
}

@keyframes moveNube {
    100%{
        transform: translateX(100%);
    }    
}

@keyframes moveDev {
    50%{
        transform: rotate(10deg);
    }
}

@keyframes moveTasa {
    100%{
        transform: unset;
    }
}