@keyframes leftCoins {
    0% {
        transform: translate(-50%, -50%);
        /* Centered */
    }

    5% {
        transform: translate(-120%, 120%);
        /* Move left-down */
    }

    40% {
        transform: translate(60%, 120%);
        /* Move right-down */
    }

    80% {
        transform: translate(50%, -150%);
        /* Move right-up */
    }

    100% {
        transform: translate(-50%, -50%);
        /* Back to center */
    }
}

@keyframes rightCoins {
    0% {
        transform: translate(-50%, -50%);
        /* Centered */
    }

    5% {
        transform: translate(50%, -150%);
        /* Move right-up */
    }

    40% {
        transform: translate(-120%, -150%);
        /* Move left-up */
    }

    80% {
        transform: translate(-120%, 120%);
        /* Move left-down */
    }

    100% {
        transform: translate(-50%, -50%);
        /* Back to center */
    }
}

@keyframes machineCoins {
    0% {
        height: 0;
        width: 0;
    }

    100% {
        height: 110%;
        width: auto;
    }
}

@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes servicesP {
    from {
        transform: translateX(50%);
        opacity: 0;
        display: none;
    }

    to {
        transform: translateX(0);
        opacity: 1;
        display: block;
    }
}

.left-animation,
.right-animation,
.bottom-animation,
.top-animation {
    opacity: 0;
    transition: all 1s ease-in-out;
}

.left-animation.show,
.right-animation.show,
.bottom-animation.show,
.top-animation.show {
    opacity: 1;
    transform: translate(0, 0);
}

.right-animation {
    transform: translateX(20%);
}

.left-animation {
    transform: translateX(-20%);
}

.bottom-animation {
    transform: translateY(20%);
}

.top-animation {
    transform: translateY(-20%);
}

section#client .left-animation {
    transform: translateX(-50%);
    opacity: 0;
}

section#client .left-animation.show {
    transform: translateX(0);
    opacity: 1;
}

section#client .right-animation {
    transform: translateX(50%);
    opacity: 0;
}

section#client .right-animation.show {
    transform: translateX(0%);
    opacity: 1;
}

section#strategic .right-animation {
    transform: translate(20%, -50%);
}

section#strategic .right-animation.show {
    transform: translate(0, -50%);
}