/*=========================================================
    KKF ANIMATION SYSTEM v2.0
=========================================================*/

/*=========================================================
    Fade Up
=========================================================*/

.kk-fade-up{

    opacity:0;

    transform:translateY(30px);

    animation:kkFadeUp .7s ease forwards;

}

@keyframes kkFadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================================
    Fade Down
=========================================================*/

.kk-fade-down{

    opacity:0;

    transform:translateY(-30px);

    animation:kkFadeDown .7s ease forwards;

}

@keyframes kkFadeDown{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=========================================================
    Fade Left
=========================================================*/

.kk-fade-left{

    opacity:0;

    transform:translateX(40px);

    animation:kkFadeLeft .7s ease forwards;

}

@keyframes kkFadeLeft{

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================================================
    Fade Right
=========================================================*/

.kk-fade-right{

    opacity:0;

    transform:translateX(-40px);

    animation:kkFadeRight .7s ease forwards;

}

@keyframes kkFadeRight{

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=========================================================
    Zoom In
=========================================================*/

.kk-zoom-in{

    opacity:0;

    transform:scale(.90);

    animation:kkZoomIn .5s ease forwards;

}

@keyframes kkZoomIn{

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*=========================================================
    Floating
=========================================================*/

.kk-floating{

    animation:kkFloating 6s ease-in-out infinite;

}

@keyframes kkFloating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================================================
    Pulse
=========================================================*/

.kk-pulse{

    animation:kkPulse 2s infinite;

}

@keyframes kkPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

/*=========================================================
    Rotate
=========================================================*/

.kk-rotate{

    animation:kkRotate 10s linear infinite;

}

@keyframes kkRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================================================
    Hover Lift
=========================================================*/

.kk-hover-lift{

    transition:transform var(--kk-transition),
               box-shadow var(--kk-transition);

}

.kk-hover-lift:hover{

    transform:translateY(-8px);

    box-shadow:var(--kk-shadow-xl);

}

/*=========================================================
    Hover Zoom
=========================================================*/

.kk-hover-zoom{

    overflow:hidden;

}

.kk-hover-zoom img{

    transition:transform .45s ease;

}

.kk-hover-zoom:hover img{

    transform:scale(1.08);

}

/*=========================================================
    Scroll Reveal
=========================================================*/

.kk-reveal{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .7s ease,

        transform .7s ease;

}

.kk-reveal-left{

    opacity:0;

    transform:translateX(-50px);

    transition:.7s ease;

}

.kk-reveal-right{

    opacity:0;

    transform:translateX(50px);

    transition:.7s ease;

}

.kk-reveal-scale{

    opacity:0;

    transform:scale(.9);

    transition:.7s ease;

}

.kk-reveal.active,

.kk-reveal-left.active,

.kk-reveal-right.active,

.kk-reveal-scale.active{

    opacity:1;

    transform:none;

}