#laptop{
    transform: translateX(15%);
    animation: moveLaptop 2s .5s ease-out both;
}
#cabeza{
    transform-origin:50% 80% ;
    transform-box: fill-box;
    animation: moveCabeza 2s 2.6s alternate 4;
}
#planta{
    transform: translateX(-30%);
    animation:movePlanta 2s .5s ease-out both
}
#calendario{
    transform-origin: 50% 0%;
    transform-box: fill-box;
    transform: rotate(45deg);
    animation: moveCalendario 3s .5s ease-out both;
}
#brazo{
    transform-origin: 20% 0%;
    transform-box: fill-box;
    animation: moveBrazo 2s 2.6s alternate 4;
}

#mensajeVentana{
    transform: translateX(50%);
    animation: moveMensajeVentana 2s .5s ease-out both;
}
#mnsj-btn-3{
    transform: translateX(-6.5%);
    animation: movebtn-3 2s 3s alternate 5 both;
}
#mensaje-btn-2{
    transform: translateX(-3%);
    animation: movebtn-2 2s 2.5s alternate 5 both;
}
#mensajeSoporte{
    transform: translateX(50%);
    animation: moveSoporte 2s 1s ease-out both;
}
@keyframes moveSoporte {
    100%{
        transform: unset;
    }
}

@keyframes movebtn-2 {
    100%{
        transform: unset;
    }
}
@keyframes movebtn-3 {
    100%{
        transform: unset;
    }
}

@keyframes moveMensajeVentana {
    100%{
        transform: unset;
    }
}
@keyframes moveBrazo {
    0%{
        transform: rotate(-2deg);
    }
    100%{
        transform: rotate(-8deg);
    }
}

@keyframes moveCalendario {
    33%{
        transform: rotate(0deg);
    }
    66%{
        transform: rotate(-45deg);
    }
    100%{
        transform:rotate(0deg)
    }
}
@keyframes movePlanta {
    100%{
        transform: unset;
    }
}
@keyframes moveCabeza {
    100%{
        transform: rotate(10deg);
    }
}

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