@charset "utf-8";

.left-in {
    animation-name: leftin;
    animation-duration: 2s;
}

.slide-in {
      display: inline-block;  
}

@keyframes leftin {
    from {
        transform: translateX(-30%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }

}

.right-in {
    animation-name: rightin;
    animation-duration: 2s;
}

@keyframes rightin {
    from {
        transform: translateX(30%);
        opacity: 0;

    }
    to {
        transform: translateX(0);
        opacity: 1;
    }

}

.left-in {
    animation-delay: 1.5s;
}

.right-in {
    animation-delay: calc(1.5s + 1s);
}

.slide-in {
    opacity: 0;
    animation-fill-mode: forwards;
}