/*	-------------------------------------------------------------------------------------------------------
		BNL ANIMATION EFFECTS (TRIGGERED WHEN THE in-view CLASS IS ADDED TO AN ELEMENT WITH JAVASCRIPT)
	-------------------------------------------------------------------------------------------------------	*/
	
	
/* ----- FADE IN EFFECTS ----- */


	.bnl-animate.fade-in-1s,
	.bnl-animate.fade-in-2s,
	.bnl-animate.fade-in-3s,
	.bnl-animate.fade-in-4s,
	.bnl-animate.fade-in-5s { opacity: 0; }
	
	.bnl-animate.fade-in-1s.in-view {
	    -webkit-animation-name:		fadeIn;
	    -webkit-animation-duration:	1s;
	    animation-name:				fadeIn;
	    animation-duration:			1s;
	    animation-fill-mode:		forwards;
	}

	.bnl-animate.fade-in-2s.in-view {
	    -webkit-animation-name:		fadeIn;
	    -webkit-animation-duration:	2s;
	    animation-name:				fadeIn;
	    animation-duration:			2s;
	    animation-fill-mode:		forwards;
	}

	.bnl-animate.fade-in-3s.in-view {
	    -webkit-animation-name:		fadeIn;
	    -webkit-animation-duration:	3s;
	    animation-name:				fadeIn;
	    animation-duration:			3s;
	    animation-fill-mode:		forwards;
	}

	.bnl-animate.fade-in-4s.in-view {
	    -webkit-animation-name:		fadeIn;
	    -webkit-animation-duration:	4s;
	    animation-name:				fadeIn;
	    animation-duration:			4s;
	    animation-fill-mode:		forwards;
	}

	.bnl-animate.fade-in-5s.in-view {
	    -webkit-animation-name:		fadeIn;
	    -webkit-animation-duration:	5s;
	    animation-name:				fadeIn;
	    animation-duration:			5s;
	    animation-fill-mode:		forwards;
	}
	
		
	
	@-webkit-keyframes fadeIn {
	    0%   {opacity: 0}
	    100% {opacity: 1}
	}
	
	@keyframes fadeIn {
	    0%   {opacity: 0}
	    100% {opacity: 1}
	}









/* ----- FADE IN AND SLIDE UP EFFECTS ----- */

	.bnl-animate.fade-in-slide-up-1s-5em,
	.bnl-animate.fade-in-slide-up-1p5s-5em,
	.bnl-animate.fade-in-slide-up-2s-5em,
	.bnl-animate.fade-in-slide-up-2p5s-5em,
	.bnl-animate.fade-in-slide-up-3s-5em {
		position: relative;
		opacity: 0;
	}

	.bnl-animate.fade-in-slide-up-1s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideUp5em;
	    -webkit-animation-duration:	1s;
	    animation-name:				fadeInSlideUp5em;
	    animation-duration:			1s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}
	
	.bnl-animate.fade-in-slide-up-1p5s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideUp5em;
	    -webkit-animation-duration:	1.5s;
	    animation-name:				fadeInSlideUp5em;
	    animation-duration:			1.5s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}
	
	.bnl-animate.fade-in-slide-up-2s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideUp5em;
	    -webkit-animation-duration:	2s;
	    animation-name:				fadeInSlideUp5em;
	    animation-duration:			2s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}

	.bnl-animate.fade-in-slide-up-2p5s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideUp5em;
	    -webkit-animation-duration:	2.5s;
	    animation-name:				fadeInSlideUp5em;
	    animation-duration:			2.5s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}

	.bnl-animate.fade-in-slide-up-3s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideUp5em;
	    -webkit-animation-duration:	3s;
	    animation-name:				fadeInSlideUp5em;
	    animation-duration:			3s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}
	
	@-webkit-keyframes fadeInSlideUp5em {
	    0%   {opacity: 0; top:5em;}
	    100% {opacity: 1; top:0px}
	}
	
	@keyframes fadeInSlideUp5em {
	    0%   {opacity: 0; top:5em;}
	    100% {opacity: 1; top:0px}
	}
	
	
/* ----- FADE IN AND SLIDE UP (WITH DELAY) EFFECTS ----- */
	
	.bnl-animate.fade-in-slide-up-3s-5em-delay {
		position: relative;
		opacity: 0;
	}

	.bnl-animate.fade-in-slide-up-3s-5em-delay.in-view {
	    -webkit-animation-name:		fadeInSlideUp5emDelay;
	    -webkit-animation-duration:	3s;
	    animation-name:				fadeInSlideUp5emDelay;
	    animation-duration:			3s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}
	
	@-webkit-keyframes fadeInSlideUp5emDelay {
	    0%   {opacity: 0; top:5em;}
	    50%  {opacity: 0; top:5em;}
	    100% {opacity: 1; top:0px}
	}
	
	@keyframes fadeInSlideUp5emDelay {
	    0%   {opacity: 0; top:5em;}
	    50%  {opacity: 0; top:5em;}
	    100% {opacity: 1; top:0px}
	}



/* ----- FADE IN AND SLIDE DOWN EFFECTS ----- */

	.bnl-animate.fade-in-slide-down-1s-5em,
	.bnl-animate.fade-in-slide-down-1p5s-5em,
	.bnl-animate.fade-in-slide-down-2s-5em,
	.bnl-animate.fade-in-slide-down-2p5s-5em,
	.bnl-animate.fade-in-slide-down-3s-5em {
		position: relative;
		opacity: 0;
	}

	.bnl-animate.fade-in-slide-down-1s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideDown5em;
	    -webkit-animation-duration:	1s;
	    animation-name:				fadeInSlideDown5em;
	    animation-duration:			1s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}
	
	.bnl-animate.fade-in-slide-down-1p5s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideDown5em;
	    -webkit-animation-duration:	1.5s;
	    animation-name:				fadeInSlideDown5em;
	    animation-duration:			1.5s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}
	
	.bnl-animate.fade-in-slide-down-2s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideDown5em;
	    -webkit-animation-duration:	2s;
	    animation-name:				fadeInSlideDown5em;
	    animation-duration:			2s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}

	.bnl-animate.fade-in-slide-down-2p5s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideDown5em;
	    -webkit-animation-duration:	2.5s;
	    animation-name:				fadeInSlideDown5em;
	    animation-duration:			2.5s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}

	.bnl-animate.fade-in-slide-down-3s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideDown5em;
	    -webkit-animation-duration:	3s;
	    animation-name:				fadeInSlideDown5em;
	    animation-duration:			3s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}
	
	@-webkit-keyframes fadeInSlideDown5em {
	    0%   {opacity: 0; top:-5em;}
	    100% {opacity: 1; top:0px}
	}
	
	@keyframes fadeInSlideDown5em {
	    0%   {opacity: 0; top:-5em;}
	    100% {opacity: 1; top:0px}
	}











/* ----- FADE IN AND SLIDE RIGHT EFFECTS ----- */

	.bnl-animate.fade-in-slide-right-1s-5em,
	.bnl-animate.fade-in-slide-right-1p5s-5em,
	.bnl-animate.fade-in-slide-right-2s-5em,
	.bnl-animate.fade-in-slide-right-2p5s-5em,
	.bnl-animate.fade-in-slide-right-3s-5em {
		position: relative;
		opacity: 0;
	}

	.bnl-animate.fade-in-slide-right-1s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideRight5em;
	    -webkit-animation-duration:	1s;
	    animation-name:				fadeInSlideRight5em;
	    animation-duration:			1s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}
	
	.bnl-animate.fade-in-slide-right-1p5s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideRight5em;
	    -webkit-animation-duration:	1.5s;
	    animation-name:				fadeInSlideRight5em;
	    animation-duration:			1.5s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}
	
	.bnl-animate.fade-in-slide-right-2s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideRight5em;
	    -webkit-animation-duration:	2s;
	    animation-name:				fadeInSlideRight5em;
	    animation-duration:			2s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}

	.bnl-animate.fade-in-slide-right-2p5s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideRight5em;
	    -webkit-animation-duration:	2.5s;
	    animation-name:				fadeInSlideRight5em;
	    animation-duration:			2.5s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}

	.bnl-animate.fade-in-slide-right-3s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideRight5em;
	    -webkit-animation-duration:	3s;
	    animation-name:				fadeInSlideRight5em;
	    animation-duration:			3s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}
	
	@-webkit-keyframes fadeInSlideRight5em {
	    0%   {opacity: 0; left:-5em;}
	    100% {opacity: 1; left:0px}
	}
	
	@keyframes fadeInSlideRight5em {
	    0%   {opacity: 0; left:-5em;}
	    100% {opacity: 1; left:0px}
	}








/* ----- FADE IN AND SLIDE LEFT EFFECTS ----- */

	.bnl-animate.fade-in-slide-left-1s-5em,
	.bnl-animate.fade-in-slide-left-1p5s-5em,
	.bnl-animate.fade-in-slide-left-2s-5em,
	.bnl-animate.fade-in-slide-left-2p5s-5em,
	.bnl-animate.fade-in-slide-left-3s-5em {
		position: relative;
		opacity: 0;
	}

	.bnl-animate.fade-in-slide-left-1s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideLeft5em;
	    -webkit-animation-duration:	1s;
	    animation-name:				fadeInSlideLeft5em;
	    animation-duration:			1s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}
	
	.bnl-animate.fade-in-slide-left-1p5s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideLeft5em;
	    -webkit-animation-duration:	1.5s;
	    animation-name:				fadeInSlideLeft5em;
	    animation-duration:			1.5s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}
	
	.bnl-animate.fade-in-slide-left-2s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideLeft5em;
	    -webkit-animation-duration:	2s;
	    animation-name:				fadeInSlideLeft5em;
	    animation-duration:			2s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}

	.bnl-animate.fade-in-slide-left-2p5s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideLeft5em;
	    -webkit-animation-duration:	2.5s;
	    animation-name:				fadeInSlideLeft5em;
	    animation-duration:			2.5s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}

	.bnl-animate.fade-in-slide-left-3s-5em.in-view {
	    -webkit-animation-name:		fadeInSlideLeft5em;
	    -webkit-animation-duration:	3s;
	    animation-name:				fadeInSlideLeft5em;
	    animation-duration:			3s;
	    animation-fill-mode:		forwards;
		position: 					relative;
	}
	
	@-webkit-keyframes fadeInSlideLeft5em {
	    0%   {opacity: 0; right:-5em;}
	    100% {opacity: 1; right:0px}
	}
	
	@keyframes fadeInSlideLeft5em {
	    0%   {opacity: 0; right:-5em;}
	    100% {opacity: 1; right:0px}
	}