/* ===== Keyframe Animation ===== */
.dl-animation {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

/* Fade Effect */
.dl-fadeIn {
    animation-name: dlFadeIn
}

@keyframes dlFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.dl-fadeInLeft {
    animation-name: dlFadeInLeft
}

@keyframes dlFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1
    }
}

.dl-fadeInRight {
    animation-name: dlFadeInRight
}

@keyframes dlFadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1
    }
}

.dl-fadeInTop {
    animation-name: dlFadeInTop
}

@keyframes dlFadeInTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1
    }
}

.dl-fadeInBottom {
    animation-name: dlFadeInBottom
}

@keyframes dlFadeInBottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1
    }
}

/* Blur Effect */

.dl-blurIn {
    animation-name: dlBlurIn
}

@keyframes dlBlurIn {
    from {
        filter: blur(20px);
        opacity: 0;
    }
}

.dl-blurInLeft {
    animation-name: dlBlurInLeft
}

@keyframes dlBlurInLeft {
    from {
        transform: translateX(50px);
        filter: blur(20px);
        opacity: 0;
    }
}

.dl-blurInRight {
    animation-name: dlBlurInRight
}

@keyframes dlBlurInRight {
    from {
        transform: translateX(-50px);
        filter: blur(20px);
        opacity: 0;
    }
}

.blurInTop {
    animation-name: dlBlurInTop
}

@keyframes dlBlurInTop {
    from {
        transform: translateY(50px);
        filter: blur(20px);
        opacity: 0;
    }
}

.dl-blurInBottom {
    animation-name: dlBlurInBottom
}

@keyframes dlBlurInBottom {
    from {
        transform: translateY(-50px);
        filter: blur(20px);
        opacity: 0;
    }
}