/* Animation drop-in*/
.drop-in {
    animation: drop-in 1s ease 200ms backwards;
}

.drop-in-2 {
    animation: drop-in 1200ms ease 500ms backwards;
}

.drop-in-3 {
    animation: drop-in 1300ms ease 800ms backwards;
}

.drop-in-4 {
    animation: drop-in 1400ms ease 900ms backwards;
}

.drop-in-5 {
    animation: drop-in 1500ms ease 1000ms backwards;
}

.drop-in-6 {
    animation: drop-in 1600ms ease 1100ms backwards;
}

@keyframes drop-in {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translate(0px);
    }
}


/* Animation fade-in */

.fade-in {
    animation: fadeInAnimation ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.fade-in-2 {
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.fade-in-3 {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.fade-in-4 {
    animation: fadeInAnimation ease 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.fade-in-5 {
    animation: fadeInAnimation ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.fade-in-6 {
    animation: fadeInAnimation ease 6s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Animation slide in left */
.slide-in-left {
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-1000px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animation slide in right */
@media (min-width: 601px){
    .slide-in-right {
        animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
}

@keyframes slide-in-right {
    0% {
        transform: translateX(1000px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}