<main id="wrapper">
		<div class="container">

			<div id="row-title" class="row">

				<div data-animation="shake" class="col red">
					<h1>Scroll Down to See Animations 👇🏼</h1>
				</div>

			</div>

			<div class="gap"></div>

			<div class="row gap-40 column-1">

				<div class="col transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa.</div>

			</div>

			<div data-animation="fadeInRight" class="row section-title">

				<div class="col transparent small">
					<h3>Sequential delay</h3>
				</div>

			</div>

			<div id="row-fadeInUp" class="row gap-40 column-3">

				<div data-animation="fadeInUp" class="col blue hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat.</div>

				<div data-animation="fadeInUp" class="col blue hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat.</div>

				<div data-animation="fadeInUp" class="col blue hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat.</div>

			</div>

			<div class="gap"></div>

			<div class="row gap-40 column-1">

				<div class="col transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa.</div>

			</div>

			<div data-animation="fadeInRight" class="row section-title">

				<div class="col transparent small">
					<h3>Random delay</h3>
				</div>

			</div>

			<div id="row-bounceIn" class="row gap-40 column-4">

				<div data-animation="bounceIn" class="col hidden green">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et aute magna irure dolor.</div>

				<div data-animation="bounceIn" class="col hidden green">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et aute magna irure dolor.</div>

				<div data-animation="bounceIn" class="col hidden green">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et aute magna irure dolor.</div>

				<div data-animation="bounceIn" class="col hidden green">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et aute magna irure dolor.</div>

			</div>

			<div class="gap"></div>

			<div class="row gap-40 column-1">

				<div class="col transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa.</div>

			</div>

			<div data-animation="fadeInRight" class="row section-title">

				<div class="col transparent small">
					<h3>Sequential delay</h3>
				</div>

			</div>

			<div id="row-fadeIn" class="row gap-24 column-6">

				<div data-animation="fadeIn" class="col yellow hidden faster">Lorem ipsum dolor sit amet, consectetur.</div>
				<div data-animation="fadeIn" class="col yellow hidden faster">Lorem ipsum dolor sit amet, consectetur.</div>
				<div data-animation="fadeIn" class="col yellow hidden faster">Lorem ipsum dolor sit amet, consectetur.</div>
				<div data-animation="fadeIn" class="col yellow hidden faster">Lorem ipsum dolor sit amet, consectetur.</div>
				<div data-animation="fadeIn" class="col yellow hidden faster">Lorem ipsum dolor sit amet, consectetur.</div>
				<div data-animation="fadeIn" class="col yellow hidden faster">Lorem ipsum dolor sit amet, consectetur.</div>
				<div data-animation="fadeIn" class="col yellow hidden faster">Lorem ipsum dolor sit amet, consectetur.</div>
				<div data-animation="fadeIn" class="col yellow hidden faster">Lorem ipsum dolor sit amet, consectetur.</div>
				<div data-animation="fadeIn" class="col yellow hidden faster">Lorem ipsum dolor sit amet, consectetur.</div>
				<div data-animation="fadeIn" class="col yellow hidden faster">Lorem ipsum dolor sit amet, consectetur.</div>
				<div data-animation="fadeIn" class="col yellow hidden faster">Lorem ipsum dolor sit amet, consectetur.</div>
				<div data-animation="fadeIn" class="col yellow hidden faster">Lorem ipsum dolor sit amet, consectetur.</div>

			</div>

			<div class="gap"></div>

			<div class="row gap-40 column-1">

				<div class="col transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa.</div>

			</div>


			<div data-animation="fadeInRight" class="row section-title">

				<div class="col transparent small">
					<h3>Random delay</h3>
				</div>

			</div>

			<div id="row-flipInY" class="row gap-24 column-5">

				<div data-animation="flipInY" class="col red hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</div>
				<div data-animation="flipInY" class="col red hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</div>
				<div data-animation="flipInY" class="col red hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</div>
				<div data-animation="flipInY" class="col red hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</div>
				<div data-animation="flipInY" class="col red hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</div>
				<div data-animation="flipInY" class="col red hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</div>
				<div data-animation="flipInY" class="col red hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</div>
				<div data-animation="flipInY" class="col red hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</div>
				<div data-animation="flipInY" class="col red hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</div>
				<div data-animation="flipInY" class="col red hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</div>

			</div>

			<div class="gap"></div>

			<div class="row gap-40 column-1">

				<div class="col transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa.</div>

			</div>

			<div data-animation="fadeInRight" class="row section-title">

				<div class="col transparent small">
					<h3>Simultaneous</h3>
				</div>

			</div>

			<div id="row-LeftRight" class="row gap-40 column-2">

				<div data-animation="fadeInLeft" class="col green hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim reprehenderit in voluptate.</div>

				<div data-animation="fadeInRight" class="col green hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim reprehenderit in voluptate.</div>

			</div>

		</div>
	</main>
html{
	position:static;
	height:100%!important;
	overflow-y:scroll;
	overflow-x:hidden;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: 0.25px;
}

body{
	margin:0;
	min-height:100%;
  background: #f1f1f1;
}

h1 { font-size: 48px;line-height: 56px;}
h2 { font-size: 40px;line-height: 48px;}
h3 { font-size: 32px;line-height: 40px;}
h4 { font-size: 24px;line-height: 32px;}
h5 { font-size: 18px;line-height: 28px;}
h6 { font-size: 16px;line-height: 24px;}

*,:after,:before{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	word-wrap:break-word;
}

#wrapper {padding: 50px 0;}

.container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto 0 auto;
	position: relative;
}

.row {
	position: relative;
	width: 100%;
	display: grid;
    grid-row-gap: 0;
    grid-column-gap: 0;
    justify-items: stretch;
}

.row.gap-24 {
	grid-row-gap: 24px;
	grid-column-gap: 24px;
}

.row.gap-40 {
	grid-row-gap: 40px;
	grid-column-gap: 40px;
}

.col {
	position: relative;
	padding: 32px;
	background-color: #f5f5f5;
	color: #424242;
}

.blue {
	background-color: #0894A1;
	color: #ffffff;
}

.green {
	background-color: #47AB6C;
	color: #ffffff;
}

.yellow {
	background-color: #F2B134;
	color: #000000;
}

.red {
	background-color: #ED553B;
	color: #ffffff;
}

.transparent {
	background-color: transparent;
	padding: 0;
}

.gap {width:100%;height:72px;}

.hidden {
	opacity: 0;
	transition: opacity 0.1s ease-out;
}

.hidden.animated {
	opacity: 1;
}

/*custom animation
---------------------*/

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

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

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

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

	.fadeInRight {
	  -webkit-animation-name: fadeInRight;
	  animation-name: fadeInRight;
	  animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
	}


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

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

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

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

	.fadeInUp {
	  -webkit-animation-name: fadeInUp;
	  animation-name: fadeInUp;
	  animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
	}

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

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

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

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

	.fadeInLeft {
	  -webkit-animation-name: fadeInLeft;
	  animation-name: fadeInLeft;
	  animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
	}

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

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

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

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

	.fadeInRight {
	  -webkit-animation-name: fadeInRight;
	  animation-name: fadeInRight;
	  animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
	}

@media only screen and (min-width: 768px)  {

	.container {
		width: 93.75%;
	}

	.row.column-1 {grid-template-columns: repeat(1, 1fr);}
	.row.column-2 {grid-template-columns: repeat(2, 2fr);}
	.row.column-3 {grid-template-columns: repeat(3, 3fr);}
	.row.column-4 {grid-template-columns: repeat(4, 4fr);}
	.row.column-5 {grid-template-columns: repeat(5, 5fr);}
	.row.column-6 {grid-template-columns: repeat(6, 6fr);}

	.col-8 {
		grid-column: 2 / span 2;
	}

}
jQuery.fn.isInViewport = function(h) {
    var elH      = jQuery(this).outerHeight(),
        scrolled = jQuery(window).scrollTop(),
        viewed   = scrolled + jQuery(window).height(),
        elTop    = jQuery(this).offset().top,
        elBottom = elTop + elH,
        h        = (typeof(h) != 'undefined' && h.length) ? h : 0.4;

    return (elTop + elH * h) <= viewed && (elBottom - elH * h) >= scrolled;
};

jQuery.fn.randomDelay = function(children,maxDelay,minDelay) {
	jQuery(this).find(children).each(function(){

	    var item = jQuery(this);
	    var randomDelay = Math.round(( Math.random() * ( maxDelay - minDelay ) + minDelay ));

	    item.css('animation-delay',randomDelay+'ms');

	});
}

jQuery.fn.sequentialDelay = function(children,delayGap) {
	jQuery(this).find(children).each(function(index){

	    var item = jQuery(this);
	    var sequentialDelay = delayGap*index;

	    item.css('animation-delay',sequentialDelay+'ms');

	});
}

jQuery.fn.animateIfInViewport = function(children) {

	var element = jQuery(this);

	if (children) {
		element.find(children).each(function(){
	        var child = jQuery(this);
	        if(child.isInViewport()){
	            child
	            .addClass(child.data('animation'))
	            .addClass('animated');
	        }
	    });
	} else {
		if(element.isInViewport()){
	        element
	        .addClass(element.data('animation'))
	        .addClass('animated');
	    }
	}
}

;(function($){

	"use strict";

	/* #row-title
	-----------------*/

		$('#row-title')
		.animateIfInViewport('.col');

	/* .section-title
	-----------------*/

		$('.section-title').each(function(){
			$(this).animateIfInViewport();
		});

	/* #row-fadeInUp
	-----------------*/

		$('#row-fadeInUp')
		.sequentialDelay('.col',100);

		$('#row-fadeInUp')
		.animateIfInViewport('.col');

	/* #row-bounceIn
	-----------------*/

		$('#row-bounceIn')
		.randomDelay('.col',500,200);

		$('#row-bounceIn')
		.animateIfInViewport('.col');

	/* #row-fadeIn
	-----------------*/

		$('#row-fadeIn')
		.sequentialDelay('.col',50);

		$('#row-fadeIn')
		.animateIfInViewport('.col');

	/* #row-flipInY
	-----------------*/

		$('#row-flipInY')
		.randomDelay('.col',500,200);

		$('#row-flipInY')
		.animateIfInViewport('.col');

	/* #row-jackInTheBox
	-----------------*/

		$('#row-LeftRight')
		.animateIfInViewport('.col');

	/* scroll
	-----------------*/

		$(window).scroll(function(){

			$('#row-title').animateIfInViewport('.col');

			$('#row-fadeInUp').animateIfInViewport('.col');

			$('#row-bounceIn').animateIfInViewport('.col');

			$('#row-fadeIn').animateIfInViewport('.col');

			$('#row-flipInY').animateIfInViewport('.col');

			$('#row-LeftRight').animateIfInViewport('.col');

			$('.section-title').each(function(){
				$(this).animateIfInViewport();
			});
		});

})(jQuery);

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js