.animate .slide-in-left {
    animation-name: slide-in-left;
    animation-duration: 3s;
    animation-delay: 0;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: forwards;
}

.animate .slide-in-right {
    animation-name: slide-in-right;
    animation-duration: 3s;
    animation-delay: 0;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: forwards;
}

.animate .remove-animation {
    animation-name: remove;
    animation-duration: 3s;
    animation-delay: 2.8s;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: forwards;
}
@media (max-width: 600px) {
    .animate .remove-animation {
        animation-name: remove-mobile;
    }
}

.animate .fade-out-animation {
    animation-name: fade-out;
    animation-duration: 2s;
    animation-delay: 4s;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: forwards;
}
.animate .fade-in-animation {
    animation-name: fade-in;
    animation-duration: 2s;
    animation-delay: 4s;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: forwards;
}

.animate .fade-out-late-animation {
    animation-name: fade-out;
    animation-duration: 2s;
    animation-delay: 6s;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: forwards;
}
.animate .fade-in-late-animation {
    animation-name: fade-in;
    animation-duration: 2s;
    animation-delay: 7s;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: forwards;
}

.animate .plop-1 {
    animation-name: fade-in;
    animation-duration: 1s;
    animation-delay: 7s;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: forwards;
}
.animate .plop-2 {
    animation-name: fade-in;
    animation-duration: 1s;
    animation-delay: 7.2s;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: forwards;
}
.animate .plop-3 {
    animation-name: fade-in;
    animation-duration: 1s;
    animation-delay: 7.4s;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: forwards;
}
.animate .plop-4 {
    animation-name: fade-in;
    animation-duration: 1s;
    animation-delay: 7.6s;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: forwards;
}
.animate .plop-5 {
    animation-name: fade-in;
    animation-duration: 1s;
    animation-delay: 7.8s;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: forwards;
}
.animate .plop-6 {
    animation-name: fade-in;
    animation-duration: 1s;
    animation-delay: 8s;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: forwards;
}
.animate .plop-7 {
    animation-name: fade-in;
    animation-duration: 1s;
    animation-delay: 8.2s;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: forwards;
}



/*
 * Keyframes
 */

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes remove-mobile {
    0% {
        height: 14px;
        opacity: 1;
    }
    20% {
        height: 8px;
        opacity: 1;
    }
    90% {
        height: 1px;
        opacity: 0;
    }
    100% {
        height: 0;
    }
}

@-webkit-keyframes remove {
    0% {
        width: 14px;
        opacity: 1;
    }
    90% {
        width: 1px;
        opacity: 0;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

@keyframes remove {
    0% {
        width: 14px;
        opacity: 1;
    }
    90% {
        width: 1px;
        opacity: 0;
    }
    100% {
        width: 0;
        opacity: 0;
    }
}

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

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