.reveal{ position: relative; transition: 1s all; opacity: 0; }
.reveal.active{ opacity: 1; }
@media screen and (min-width: 1024px){ .reveal.reveal-right{ transform: translateX(100px); }
.reveal.reveal-right.active{ transform: translateX(0); } .reveal.reveal-left{ transform: translateX(-100px); }
.reveal.reveal-left.active{ transform: translateX(0); } .reveal.reveal-bottom{ transform: translateY(100px); }
.reveal.reveal-bottom.active{ transform: translateY(0); } .reveal.reveal-top{ transform: translateY(-100px); }
.reveal.reveal-top.active{ transform: translateY(0); } .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; }
}
@media screen and (max-width: 1023px){ .reveal.mobile-reveal-right{ transform: translateX(100px); }
.reveal.mobile-reveal-right.active{ transform: translateX(0); } .reveal.mobile-reveal-left{ transform: translateX(-100px); }
.reveal.mobile-reveal-left.active{ transform: translateX(0); } .reveal.mobile-reveal-bottom{ transform: translateY(100px); }
.reveal.mobile-reveal-bottom.active{ transform: translateY(0); } .reveal.mobile-reveal-top{ transform: translateY(-100px); }
.reveal.mobile-reveal-top.active{ transform: translateY(0); } .reveal.mobile-duration-100{ transition: .3s all; }
.reveal.mobile-duration-200{ transition: .5s all; }
.reveal.mobile-duration-300{ transition: .7s all; }
.reveal.mobile-duration-400{ transition: .9s all; }
.reveal.mobile-duration-500{ transition: 1.1s all; }
.reveal.mobile-duration-600{ transition: 1.3s all; }
.reveal.mobile-duration-700{ transition: 1.5s all; }
.reveal.mobile-duration-800{ transition: 1.8s all; }
.reveal.mobile-duration-900{ transition: 2s all; }
}