/*
 ****************
 * ANIMATIONS
 ****************
 */


 /*
 ********
 * COVER 
 ********
 */


@keyframes delay {
	from {
		opacity: 0;
	}
	to {
		opacity: 0;
	}
}

@keyframes title-entrance {
	from {
		opacity: 0;
		transform: translate(0,0);
	}
	75% {
		transform: translate(0,-10px);
	}
	to {
		opacity: 1;
		transform: translate(0,0px);
	}
}


.title-1,
.title-2,
.title-3,
.title-4,
.title-5,
.title-6,
.title-7,
.title-8,
.title-9,
.title-10,
.title-11,
.title-12 {
	animation-timing-function: ease-out;
}

.title-1 {
	animation-name: delay, title-entrance; 
	animation-duration: 1s, 0.5s;
	animation-delay: 0s, 1s;
}
.title-2 {
	animation-name: delay, title-entrance; 
	animation-duration: 1.2s, 0.5s;
	animation-delay: 0s, 1.2s;
}
.title-3 {
	animation-name: delay, title-entrance; 
	animation-duration: 1.4s, 0.5s;
	animation-delay: 0s, 1.4s;
}
.title-4 {
	animation-name: delay, title-entrance; 
	animation-duration: 1.6s, 0.5s;
	animation-delay: 0s, 1.6s;
}
.title-5 {
	animation-name: delay, title-entrance; 
	animation-duration: 1.8s, 0.5s;
	animation-delay: 0s, 1.8s;
}
.title-6 {
	animation-name: delay, title-entrance; 
	animation-duration: 2s, 0.5s;
	animation-delay: 0s, 2s;
}
.title-7 {
	animation-name: delay, title-entrance; 
	animation-duration: 2.2s, 0.5s;
	animation-delay: 0s, 2.2s;
}
.title-8 {
	animation-name: delay, title-entrance; 
	animation-duration: 2.4s, 0.5s;
	animation-delay: 0s, 2.4s;
}
.title-9 {
	animation-name: delay, title-entrance; 
	animation-duration: 2.6s, 0.5s;
	animation-delay: 0s, 2.6s;
}
.title-10 {
	animation-name: delay, title-entrance; 
	animation-duration: 2.8s, 0.5s;
	animation-delay: 0s, 2.8s;
}
.title-11 {
	animation-name: delay, title-entrance; 
	animation-duration: 3s, 0.5s;
	animation-delay: 0s, 3s;
}
.title-12 {
	animation-name: delay, title-entrance; 
	animation-duration: 3.2s, 0.5s;
	animation-delay: 0s, 3.2s;
}


@keyframes wave-lr {

 	from {
 		transform: translate(0px, 0);
 	}
 	25% {
 		transform: translate(500px, 0);
 	}
 	50% {
 		transform: translate(0px, 0);
 	}
 	75% {
 		transform: translate(500px, 0);
 	}
 	to {
 		transform: translate(0px, 0);
 	}

}

#cover img.wave {
	animation-name: delay, fadeIn, wave-lr; 
	animation-duration: 2s, 3s, 125s;
	animation-delay: 0s, 2s, 0s;
	animation-timing-function: linear;
	animation-iteration-count: 1, 1, infinite;
}

#cover p {
	animation-name: delay, fadeIn; 
	animation-duration: 2s, 3s;
	animation-delay: 0s, 2s;
	animation-timing-function: ease-out;
}

 /*
 ***************************
 * QUOTE, NO BOUNDARY FUTURE 
 ***************************
 */

#quote,
#no-boundary-future,
#mission-vision-values,
#making-no-boundaries {
	animation-duration: 4s;
}
	#quote .headline,
	#no-boundary-future .headline,
	#mission-vision-values-content,
	#making-no-boundaries .headline {
		animation-duration: 3s;
	}

/*
***********
* FRAMEWORK
***********
*/

#framework video {
 	animation-duration: 0s;
}
#framework img {
 	animation-duration: 0s;
}


/*
************************
* EMPOWERING IMPACT AREA 
************************
*/

.empowering-impact-area-content div {
	animation-duration: 2s;
}
	.empowering-impact-area .icon {
		animation-duration: 4s;
	}

/*
************************
* FIVE YEAR PLAN
************************
*/

#five-year-plan ol > li:nth-child(1) {
	animation-duration: 3s;
}

#five-year-plan ol > li:nth-child(2) {
	animation-duration: 4s;
}

#five-year-plan ol > li:nth-child(3) {
	animation-duration: 5s;
}

#five-year-plan ol > li:nth-child(4) {
	animation-duration: 6s;
}

#five-year-plan ol > li:nth-child(5) {
	animation-duration: 7s;
}

#five-year-plan ol > li:nth-child(6) {
	animation-duration: 8s;
}

#five-year-plan ol > li:nth-child(7) {
	animation-duration: 9s;
}

#five-year-plan ol > li:nth-child(8) {
	animation-duration: 10s;
}

#five-year-plan ol > li:nth-child(9) {
	animation-duration: 11s;
}