/*Reveal animations*/
.reveal{ position: relative; transition: 1s all; opacity: 0; }
.reveal.active{ opacity: 1; }

/*Reveal from Right*/
.reveal.reveal-right{ transform: translateX(100px); }
.reveal.reveal-right.active{ transform: translateX(0); }

/*Reveal from Left*/
.reveal.reveal-left{ transform: translateX(-100px); }
.reveal.reveal-left.active{ transform: translateX(0); }

/*Reveal from Bottom*/
.reveal.reveal-bottom{ transform: translateY(100px); }
.reveal.reveal-bottom.active{ transform: translateY(0); }

/*Reveal from Top*/
.reveal.reveal-top{ transform: translateY(-100px); }
.reveal.reveal-top.active{ transform: translateY(0); }

/*Animation duration framework*/
.reveal.duration-100{ transition: .3s all; }
.reveal.duration-200{ transition: .5s all; }
.reveal.duration-300{ transition: .7s all; }
.reveal.duration-400{ transition: .9s all; }
.reveal.duration-500{ transition: 1.1s all; }
.reveal.duration-600{ transition: 1.3s all; }
.reveal.duration-700{ transition: 1.5s all; }
.reveal.duration-800{ transition: 1.8s all; }
.reveal.duration-900{ transition: 2s all; }