.animated {
    animation-duration: 1.25s;
    animation-fill-mode: both;
    animation-delay: var(--animation-delay, 0);
    opacity: 0;

    &.delay-250ms {
      --animation-delay: 250ms;
    }

    &.delay-500ms {
      --animation-delay: 500ms;
    }

    &.delay-750ms {
      --animation-delay: 750ms;
    }

    &.delay-1000ms {
      --animation-delay: 1000ms;
    }

    &.delay-1500ms {
      --animation-delay: 1500ms;
    }
}

.fadeIn {
    animation-name: fadeIn
}

.fadeInUp {
    animation-name: fadeInUp
}

.fadeInDown {
    animation-name: fadeInDown
}

.fadeInLeft {
    animation-name: fadeInLeft
}

.fadeInRight {
    animation-name: fadeInRight
}

.zoomIn {
    animation-name: zoomIn
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}


@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 1;
    }
}