@keyframes jfa-bounce {

    0%,
    20%,
    53%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0)
    }

    40%,
    43% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -30px, 0) scaleY(1.1)
    }

    70% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -15px, 0) scaleY(1.05)
    }

    80% {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0) scaleY(.95)
    }

    90% {
        transform: translate3d(0, -4px, 0) scaleY(1.02)
    }
}

@keyframes jfa-bounce-in {

    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        transform: scale3d(.97, .97, .97)
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1)
    }
}

@keyframes jfa-bounce-in-down {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -150vh, 0) scaleY(3)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0) scaleY(.9)
    }

    75% {
        transform: translate3d(0, -10px, 0) scaleY(.95)
    }

    90% {
        transform: translate3d(0, 5px, 0) scaleY(.985)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes jfa-bounce-in-left {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(-150vw, 0, 0) scaleX(3)
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0) scaleX(1)
    }

    75% {
        transform: translate3d(-10px, 0, 0) scaleX(.98)
    }

    90% {
        transform: translate3d(5px, 0, 0) scaleX(.995)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes jfa-bounce-in-right {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(150vw, 0, 0) scaleX(3)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0) scaleX(1)
    }

    75% {
        transform: translate3d(10px, 0, 0) scaleX(.98)
    }

    90% {
        transform: translate3d(-5px, 0, 0) scaleX(.995)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes jfa-bounce-in-top {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0, 150vh, 0) scaleY(5)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0) scaleY(.9)
    }

    75% {
        transform: translate3d(0, 10px, 0) scaleY(.95)
    }

    90% {
        transform: translate3d(0, -5px, 0) scaleY(.985)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes jfa-bounce-out {
    20% {
        transform: scale3d(.9, .9, .9)
    }

    50%,
    55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1)
    }

    to {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
        pointer-events: none
    }
}

@keyframes jfa-bounce-out-down {
    20% {
        transform: translate3d(0, 10px, 0) scaleY(.985)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0) scaleY(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(0, 300%, 0) scaleY(3);
        pointer-events: none
    }
}

@keyframes jfa-bounce-out-left {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0) scaleX(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(-300%, 0, 0) scaleX(2);
        pointer-events: none
    }
}

@keyframes jfa-bounce-out-right {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0) scaleX(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(300%, 0, 0) scaleX(2);
        pointer-events: none
    }
}

@keyframes jfa-bounce-out-top {
    20% {
        transform: translate3d(0, -10px, 0) scaleY(.985)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0) scaleY(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(0, -300%, 0) scaleY(3);
        pointer-events: none
    }
}

@keyframes jfa-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes jfa-fade-in-down {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes jfa-fade-in-full-down {
    0% {
        opacity: 0;
        transform: translate3d(0, -200%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes jfa-fade-in-left {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes jfa-fade-in-full-left {
    0% {
        opacity: 0;
        transform: translate3d(-200%, 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes jfa-fade-in-right {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes jfa-fade-in-full-right {
    0% {
        opacity: 0;
        transform: translate3d(200%, 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes jfa-fade-in-top {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes jfa-fade-in-full-top {
    0% {
        opacity: 0;
        transform: translate3d(0, 200%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

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

    to {
        opacity: 0;
        pointer-events: none
    }
}

@keyframes jfa-fade-out-down {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
        pointer-events: none
    }
}

@keyframes jfa-fade-out-full-down {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, 200%, 0);
        pointer-events: none
    }
}

@keyframes jfa-fade-out-left {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
        pointer-events: none
    }
}

@keyframes jfa-fade-out-full-left {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-200%, 0, 0);
        pointer-events: none
    }
}

@keyframes jfa-fade-out-right {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
        pointer-events: none
    }
}

@keyframes jfa-fade-out-full-right {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(200%, 0, 0);
        pointer-events: none
    }
}

@keyframes jfa-fade-out-top {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
        pointer-events: none
    }
}

@keyframes jfa-fade-out-full-top {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, -200%, 0);
        pointer-events: none
    }
}

@keyframes jfa-flash {

    0%,
    50%,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

@keyframes jfa-pulse {

    0%,
    to {
        transform: scale3d(1, 1, 1)
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }
}

@keyframes jfa-pulse-twice {

    0%,
    to {
        transform: scale3d(1, 1, 1)
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }
}

@keyframes jfa-rotate-in {
    0% {
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes jfa-rotate-out {
    0% {
        opacity: 1
    }

    to {
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0
    }
}

@keyframes jfa-shake {

    0%,
    to {
        transform: translate3d(0, 0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes jfa-slide-in-down {
    0% {
        transform: translate(0, -100%);
        visibility: visible
    }

    to {
        transform: translate(0, 0)
    }
}

@keyframes jfa-slide-in-left {
    0% {
        transform: translate(-100%, 0);
        visibility: visible
    }

    to {
        transform: translate(0)
    }
}

@keyframes jfa-slide-in-right {
    0% {
        transform: translate(100%, 0);
        visibility: visible
    }

    to {
        transform: translate(0, 0)
    }
}

@keyframes jfa-slide-in-top {
    0% {
        transform: translate(0, 100%);
        visibility: visible
    }

    to {
        transform: translate(0)
    }
}

@keyframes jfa-slide-out-down {
    0% {
        transform: translate(0, 0)
    }

    to {
        visibility: hidden;
        transform: translate(0, 100%);
        pointer-events: none
    }
}

@keyframes jfa-slide-out-left {
    0% {
        transform: translate(0, 0)
    }

    to {
        visibility: hidden;
        transform: translate(-100%, 0);
        pointer-events: none
    }
}

@keyframes jfa-slide-out-right {
    0% {
        transform: translate(0, 0)
    }

    to {
        visibility: hidden;
        transform: translate(100%, 0);
        pointer-events: none
    }
}

@keyframes jfa-slide-out-top {
    0% {
        transform: translate(0, 0)
    }

    to {
        visibility: hidden;
        transform: translate(0, -100%);
        pointer-events: none
    }
}

@keyframes jfa-spin {
    to {
        transform: rotate(1turn)
    }
}

@keyframes jfa-spin-loader {
    to {
        transform: rotate(1turn)
    }
}

@keyframes jfa-zoom-in {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

@keyframes jfa-zoom-out {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0;
        pointer-events: none
    }
}

.anim {
    animation-duration: .5s;
    animation-fill-mode: forwards
}

.fade-in {
    animation-name: jfa-fade-in
}

.pulse-twice {
    animation-name: jfa-pulse-twice;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 2
}

.spin-loader {
    animation-name: jfa-spin-loader;
    animation-iteration-count: infinite;
    transform-origin: center
}

.anim-150 {
    animation-duration: .15s
}

.anim-700 {
    animation-duration: .7s
}

.anim-both {
    animation-fill-mode: both
}