/*=========================================
 ILNPP Custom Animation Styles
 File: assets/css/animate.css
=========================================*/

/* Fade In */
.fade-in{
    animation:fadeIn 1s ease forwards;
}

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

/* Fade Up */
.fade-up{
    opacity:0;
    animation:fadeUp 1s ease forwards;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Fade Down */
.fade-down{
    opacity:0;
    animation:fadeDown 1s ease forwards;
}

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

/* Fade Left */
.fade-left{
    opacity:0;
    animation:fadeLeft 1s ease forwards;
}

@keyframes fadeLeft{
    from{
        opacity:0;
        transform:translateX(-60px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

/* Fade Right */
.fade-right{
    opacity:0;
    animation:fadeRight 1s ease forwards;
}

@keyframes fadeRight{
    from{
        opacity:0;
        transform:translateX(60px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

/* Zoom In */
.zoom-in{
    opacity:0;
    animation:zoomIn .8s ease forwards;
}

@keyframes zoomIn{
    from{
        opacity:0;
        transform:scale(.5);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

/* Zoom Out */
.zoom-out{
    animation:zoomOut .8s ease;
}

@keyframes zoomOut{
    from{
        transform:scale(1.1);
    }
    to{
        transform:scale(1);
    }
}

/* Bounce */
.bounce{
    animation:bounce 1.2s infinite;
}

@keyframes bounce{
    0%,20%,50%,80%,100%{
        transform:translateY(0);
    }
    40%{
        transform:translateY(-18px);
    }
    60%{
        transform:translateY(-10px);
    }
}

/* Pulse */
.pulse{
    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.05);
    }
    100%{
        transform:scale(1);
    }
}

/* Rotate */
.rotate{
    animation:rotate 2s linear infinite;
}

@keyframes rotate{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* Floating */
.float{
    animation:float 3s ease-in-out infinite;
}

@keyframes float{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
    100%{
        transform:translateY(0);
    }
}

/* Shake */
.shake:hover{
    animation:shake .5s;
}

@keyframes shake{
    0%{transform:translateX(0);}
    25%{transform:translateX(-8px);}
    50%{transform:translateX(8px);}
    75%{transform:translateX(-8px);}
    100%{transform:translateX(0);}
}

/* Flip */
.flip{
    animation:flip 1s;
    transform-style:preserve-3d;
}

@keyframes flip{
    from{
        transform:rotateY(0deg);
    }
    to{
        transform:rotateY(360deg);
    }
}

/* Slide In Left */
.slide-left{
    animation:slideLeft .8s ease forwards;
}

@keyframes slideLeft{
    from{
        transform:translateX(-100%);
        opacity:0;
    }
    to{
        transform:translateX(0);
        opacity:1;
    }
}

/* Slide In Right */
.slide-right{
    animation:slideRight .8s ease forwards;
}

@keyframes slideRight{
    from{
        transform:translateX(100%);
        opacity:0;
    }
    to{
        transform:translateX(0);
        opacity:1;
    }
}

/* Slide In Up */
.slide-up{
    animation:slideUp .8s ease forwards;
}

@keyframes slideUp{
    from{
        transform:translateY(100%);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

/* Slide In Down */
.slide-down{
    animation:slideDown .8s ease forwards;
}

@keyframes slideDown{
    from{
        transform:translateY(-100%);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

/* Delay Classes */
.delay-1{
    animation-delay:.2s;
}

.delay-2{
    animation-delay:.4s;
}

.delay-3{
    animation-delay:.6s;
}

.delay-4{
    animation-delay:.8s;
}

.delay-5{
    animation-delay:1s;
}