/* =========================
   FADE IN
========================= */

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

/* =========================
   FADE UP
========================= */

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* =========================
   ZOOM IN
========================= */

@keyframes zoomIn{

    from{
        opacity:0;
        transform:scale(0.9);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

/* =========================
   FLOAT
========================= */

@keyframes float{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* =========================
   PULSE
========================= */

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}

/* =========================
   CLASSES
========================= */

.fade-in{

    animation:fadeIn 1s ease forwards;

}

.fade-up{

    animation:fadeUp 1s ease forwards;

}

.zoom-in{

    animation:zoomIn 1s ease forwards;

}

.float{

    animation:float 4s ease-in-out infinite;

}

.pulse{

    animation:pulse 2s infinite;

}

/* =========================
   SCROLL REVEAL
========================= */

.hidden{

    opacity:0;

    transform:translateY(40px);

    transition:all 1s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}