/* ==========================================
   REVEAL SYSTEM
========================================== */

[data-reveal]{

    opacity:0;

    transform:translateY(50px);

    transition:

    opacity .8s ease,

    transform .8s ease;
}

[data-reveal].is-visible{

    opacity:1;

    transform:none;
}

/* ==========================================
   STAGGER
========================================== */

[data-delay="100"]{

    transition-delay:.1s;
}

[data-delay="200"]{

    transition-delay:.2s;
}

[data-delay="300"]{

    transition-delay:.3s;
}

[data-delay="400"]{

    transition-delay:.4s;
}

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

@keyframes djFloat{

    0%{

        transform:
        translateY(0px);
    }

    50%{

        transform:
        translateY(-12px);
    }

    100%{

        transform:
        translateY(0px);
    }

}

.dj-float{

    animation:
    djFloat
    6s
    ease-in-out
    infinite;
}

/* ==========================================
   PAPER HOVER
========================================== */

.dj-paper-hover{

    transition:
    all .4s ease;
}

.dj-paper-hover:hover{

    transform:

    translateY(-10px)

    rotate(-1deg);

}

/* ==========================================
   FADE SCALE
========================================== */

@keyframes djScale{

    from{

        opacity:0;

        transform:
        scale(.95);
    }

    to{

        opacity:1;

        transform:
        scale(1);
    }

}

.dj-scale{

    animation:
    djScale .8s ease;
}