/* ==========================================
   OmniTools Animations
========================================== */

/* ===============================
   Fade In
================================ */

@keyframes fadeIn{

from{

    opacity:0;

}

to{

    opacity:1;

}

}

.fade-in{

    animation:fadeIn .8s ease forwards;

}

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

@keyframes fadeUp{

from{

    opacity:0;

    transform:translateY(50px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}

.fade-up{

    animation:fadeUp .8s ease forwards;

}

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

@keyframes fadeDown{

from{

    opacity:0;

    transform:translateY(-50px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}

.fade-down{

    animation:fadeDown .8s ease forwards;

}

/* ===============================
   Slide Left
================================ */

@keyframes slideLeft{

from{

    opacity:0;

    transform:translateX(80px);

}

to{

    opacity:1;

    transform:translateX(0);

}

}

.slide-left{

    animation:slideLeft .8s ease forwards;

}

/* ===============================
   Slide Right
================================ */

@keyframes slideRight{

from{

    opacity:0;

    transform:translateX(-80px);

}

to{

    opacity:1;

    transform:translateX(0);

}

}

.slide-right{

    animation:slideRight .8s ease forwards;

}



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

@keyframes zoomIn{

from{

    opacity:0;

    transform:scale(.8);

}

to{

    opacity:1;

    transform:scale(1);

}

}

.zoom-in{

    animation:zoomIn .7s ease forwards;

}

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

@keyframes pulse{

0%{

    transform:scale(1);

}

50%{

    transform:scale(1.05);

}

100%{

    transform:scale(1);

}

}

.pulse{

    animation:pulse 2s infinite;

}

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

@keyframes floating{

0%{

    transform:translateY(0);

}

50%{

    transform:translateY(-12px);

}

100%{

    transform:translateY(0);

}

}

.floating{

    animation:floating 3s ease-in-out infinite;

}

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

@keyframes rotate{

from{

    transform:rotate(0deg);

}

to{

    transform:rotate(360deg);

}

}

.rotate{

    animation:rotate 10s linear infinite;

}

/* ===============================
   Bounce
================================ */

@keyframes bounce{

0%,20%,50%,80%,100%{

    transform:translateY(0);

}

40%{

    transform:translateY(-15px);

}

60%{

    transform:translateY(-8px);

}

}

.bounce{

    animation:bounce 2s infinite;

}

/* ===============================
   Hover Animations
================================ */

.feature-card,
.image-box,
.drop-area,
.settings{

    transition:all .35s ease;

}

.feature-card:hover,

.image-box:hover,

.drop-area:hover,

.settings:hover{

    transform:translateY(-8px);

}

/* ===============================
   Button Hover
================================ */

.hero-btn,
.compress-btn,
.download-btn,
.browse-btn{

    transition:all .3s ease;

}

.hero-btn:hover,
.compress-btn:hover,
.download-btn:hover,
.browse-btn:hover{

    transform:translateY(-3px) scale(1.02);

}

/* ===============================
   Page Load Animation
================================ */

body{

    animation:fadeIn .5s ease;

}

/* ===============================
   End
================================ */