.reveal-on-scroll {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease; 
}

.reveal-on-scroll.animated {
    opacity: 1;
    visibility: visible;
    animation-duration: 1.25s;
    animation-fill-mode: both;
}

.fadeInLeft { animation-name: fadeInLeft; }
.fadeInRight { animation-name: fadeInRight; }
.fadeInUp { animation-name: fadeInUp; }

.fadeInLeftBox {
	animation-name: fadeInLeftBox;
}

.fadeInRightBox {
	animation-name: fadeInRightBox;
}

.animation-pulse {
    animation: pulses 1s infinite alternate;
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(100%, 0, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 50px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeInRightBox {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

@keyframes fadeInLeftBox {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }
}

@keyframes pulses {
	0% {
		transform: scale(0.9);
	}

	100% {
		transform: scale(1);
	}
}