/*
 *************************
 **** STYLES: SP 2017-2022  
 *************************
 */


/* 
 * CLEARFIX and BOX-SIZING
 */

.group:after { content: ""; display: table; clear: both; }

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* 
 * IMG Right-click
 */

img { pointer-events: none; }
img.clickable { pointer-events: auto; }


/* 
 * TESTING Classes
 */
.test-border {
	border: 3px solid red;
}


/*
 ****************
 * GLOBAL STYLES
 ****************
 */

html, body {
	height: 100%;
	margin: 0; 
	padding: 0;
}	

body {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 1.1em;
	color: #636466;
}

h1,
h2,
h3,
h4,
h5 {
	width: 100%;
	font-family: 'Roboto', Arial, sans-serif;
	font-weight: 800;
	color: #636466;
}
h1 {
	font-size: 8em;
	font-family:'Arimo', Arial, sans-serif;
	letter-spacing: 2px;
	font-weight:700;

}
h2 {
	font-size: 3em;
	font-family:'Arimo', Arial, sans-serif;
	letter-spacing:1.3px;
}
h3 {
	font-size: 2em;
	font-family: 'Amatic SC', 'Roboto', Arial, sans-serif;
}
h4 {
	font-size: 1.25em;
}
h5 {
	font-size: 1.1em;
}

section {
	padding: 4em 3em;
	max-width: 1920px;
	max-height: 1000px;
	min-height: 600px;
	overflow: hidden;
	/*border: 2px solid red;*/
}

a {
	text-decoration: none;
}

ul {
	list-style-type: none;
}

.sr-only {
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; 
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.hide {
	display: none;
}

/* 
 * COLOURS
 */
	.orange {
		color: rgba(255,95,0, 1);
	}
	.light-blue {
		color: rgba(0,194,226, 1);
	}
	.yellow-green {
		color: rgba(178,188,0, 1);
	}
	.red {
		color: rgba(208,36,51, 1); 
	}
	.purple {
		color: rgba(150,35,153, 1);
	}
	.blue {
		color: rgba(0,119,212, 1);
	}
	.green {
		color: rgba(18,173,42, 1);
	}	

	.orange-yellow {
		color: rgba(255,182,15, 1);
	}
	


/*
 ****************
 * MODAL STYLES
 ****************
 */

.modal {
	z-index: 9999;
}
	.modal:target,
	.modal.open {
		position: absolute;
	}

/* 
 * 	CONTENT MODAL Styles
 */

 .content-modal {
 	position: fixed;
 	display: flex;
 	top: 0;
 	left: -100%;
 	width: 0;
 	max-height: 1000px;
 	height: 100vh;
 	background-color: rgba(0,0,0, 0.5);
 	color: rgba(255,255,255, 1);
 	transition: width 1.5s ease-in, left 1s ease-in;
 }
 	.content-modal * {
 		width: 0;
 		overflow: hidden;
 	}
.content-modal:target,
.content-modal.open {
	left: 0;
	width: 100%;
	transition: left 1.5s ease-out, width 0.5s ease-out;
	overflow-y: none;
}
	.content-modal:target *,
	.content-modal.open * {
		width: auto;
	}


		.content-modal:target .modal-content-area,
		.content-modal.open .modal-content-area {
			position: relative;
			width: 45rem;
			height: 100vh;
			padding: 4rem;
			background-color: rgba(255,255,255, 0.95);
			color: #636466;
			overflow: auto;
		}
			.content-modal:target .modal-content-area h2,
			.content-modal:target .modal-content-area h3,
			.content-modal:target .modal-content-area h4
			.content-modal.open .modal-content-area h2,
			.content-modal.open .modal-content-area h3,
			.content-modal.open .modal-content-area h4 {
				width: 100%;
			}
				.content-modal:target .modal-content-area h2,
				.content-modal.open .modal-content-area h2 {
					margin: 0.5em 0 0.5em;
				}
				.content-modal:target .modal-content-area h3,
				.content-modal.open .modal-content-area h3 {
					margin: 0.5em 0;
				}
				.content-modal:target .modal-content-area h4,
				.content-modal.open .modal-content-area h4 {
					margin: 1em 0 0.5em 0;
				}
			.content-modal:target .modal-content-area p,
			.content-modal:target .modal-content-area ul,
			.content-modal.open .modal-content-area p,
			.content-modal.open .modal-content-area ul  {
				width: 100%;
			}
				.content-modal:target .modal-content-area p,
				.content-modal.open .modal-content-area p {
					font-weight: 400;
				}
				.content-modal:target .modal-content-area ul,
				.content-modal.open .modal-content-area ul {
					list-style-type: disc;
					margin: 1em 0 1.5em;
				}
				.content-modal:target .modal-content-area li,
				.content-modal.open .modal-content-area li {
					margin: 1em;
					overflow: visible;
				}

	.content-modal:target .close-modal,
	.content-modal.open .close-modal { 
		position: relative;
		width: 1.5em;
		height: 1.5em;
		margin: 0.5em;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		background-color: rgba(255,182,15, 1);
		color: rgba(255,255,255, 1);
		font-size: 2.5rem;
		border-radius: 30%;
		border: 3px solid rgba(255,182,15, 1);
	}
		.content-modal:target .close-modal:hover,
		.content-modal.open .close-modal:hover {
			background-color: rgba(255,255,255, 1);
			color: rgba(255,182,15, 1);
			transition: background-color 0.25s ease-out;
		}

/************* Video ****************/

	.content-modal.youtube {
		height: 100%;
	}
	.content-modal.youtube img:hover {
		cursor: pointer;
	}


/*
 ****************
 * HEADER STYLES
 ****************
 */

 #main-header {
 	position: fixed;
 	top: 0;
 	left: 0;
 	z-index: 9998;
 	width: 100%;
 	max-width: 1920px;
 	/* overflow: hidden; */
	/* overflow-y: visible; */
 	background-color: rgba(255,255,255, 1);
}
 	#header-bar {
 		width: 100%;
 		padding: 0em 0.5rem 0 0;
 	 	display: flex;
	 	flex-direction: row;
	 	align-items: center;
	 	justify-content: space-between;
 	}
	 	#wordmark { /*>>>>> HBKRH Logo <<<<<*/
	 		width: 24rem;
	 		padding: 1rem;
	 		margin: 0.5rem;
	 		display: flex;
	 		align-items: center;
	 		justify-content: space-around;
	 		background-color: rgba(255,255,255, 1);
	 	}
	 		#wordmark img {
	 			width: 90%;
	 		}
	 		/*#wordmark p {
	 			width: 10rem;
	 			font-size: 0.9rem;
	 			text-align: center;
	 			color: rgba(18,173,42, 1);
	 		}*/
	 	#nav-bars { /*>>>>> Hamburger Menu <<<<<*/
 			padding: 0.5rem 1rem;
 			background-color: rgba(0,119,212, 1);
 			font-size: 2em;
 			color: #fff;
 			border: 5px solid rgba(0,119,212, 1);
 			border-radius: 20%;
	 	}
	 		#nav-bars:hover,
	 		#nav-bars:focus {
	 			background-color: rgba(255,255,255, 1);
	 			color: rgba(0,119,212, 1);
		 	}

/* 
 * NAV Styles
 */

 #main-navigation {
 	position: fixed;
 	top: 0;
 	right: -100%;
 	width: 0;
 	max-height: 1000px;
 	height: 100vh;
	z-index: 9999;
 	background-color: rgba(0,119,212, 0.9);
 	color: rgba(255,255,255, 1);
 	transition: width 3s ease-in, right 1.5s ease-in;
 		overflow-y: scroll;
}
 	#main-navigation:target,
 	#main-navigation.open {
 		right: -15px;
 		width: 26.1rem;
 		transition: right 1.5s ease-out, width 0.5s ease-out;
 	}
 		#main-navigation-header {
 			display: flex;
 			flex-direction: row;
 			align-items: stretch;
 			justify-content: flex-start;
 			
 		}
 			#main-navigation-header div {
 				display: flex;
 				flex-direction: row;
 				align-items: center;
 				justify-content: center;
 			}
 				
 			#accessible-pdf {
 				width: 20rem;
 				height: 100%;
				margin: 0;
 				background-color: rgba(150,35,153, 1);
 				border: 5px solid rgba(150,35,153, 1);
 				color: rgba(255,255,255, 1);
 			}
 				#accessible-pdf .fa {
 					margin: 0 1rem 0 0;
 					font-size: 2em;
 					color: rgba(18,173,42, 1);
 				}
 				#accessible-pdf:hover {
 					color: rgba(150,35,153, 1);
 					background-color: rgba(255,255,255, 1);
 					transition: background-color 0.25s ease-out;
 				}
 			#close-main-navigation {
 				width: 5rem;
 				background-color: rgba(0,119,212, 1);
 				color: rgba(255,255,255, 1);
 				font-weight: 800;
 				font-size: 2em;
 				padding: 1rem;
 				border: 5px solid rgba(0,119,212, 1);
 			}
 				#close-main-navigation:hover {
 					color: rgba(0,119,212, 1);
 					background-color: #fff;
 					transition: background-color 0.25s ease-out;
 				}
 				#close-main-navigation p {
	 				margin: 0;
	 				padding: 0;
	 			}
	 	#main-navigation-content {
	 		width: 100%;
	 		display: flex;
	 		flex-direction: column;
	 		align-items: center;
	 		justify-content: flex-start;
	 		padding: 0 1rem;
	 	}
	 		#main-navigation-content > ul {
	 			border-bottom: 2px solid rgba(0,194,226, 1);
	 			width: 90%;
	 			padding: 1rem 0;
	 			margin: 0;
	 		}
	 		#main-navigation-content li {
	 			padding: 0.25em 0;
				color: rgba(255,255,255, 1);
				display: flex;
				align-items: center;
	 		}
	 			#main-navigation-content li:hover {
	 				color: rgba(50,50,50, 1);
	 				transition: color 0.25s ease-out;
	 			}
	 			#main-navigation-content li .fa {
					margin: 0 1em 0 0;
	 			}
		ul#donate-social-menu {
			padding: 0;
			margin: 0 0 1rem 0;
			display: flex;
			flex-direction: row;
			align-items: stretch;
			justify-content: space-around;
		}
			#donate-menu {
				width: 40%;
				background-color: #DC0030;
				display: flex;
				align-items: center;
				justify-content: center;
			}
				
				#donate-menu a {
					width: 100%; 
					padding: 0.5rem;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
				}
				#donate-menu:hover a {
					color: rgba(0,119,212, 1);
					background-color: rgba(255,255,255, 1);
				}
				
		#social {
			padding: 0;
			margin: 0;
			width: 60%;
			display: flex;
			flex-direction: row;
			align-items: stretch;
			justify-content: center;
		}
			#social a {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0;
				padding: 0;
				width: 25%;
				font-size: 1.25rem;
				color: rgba(255,255,255, 1);
				border: 0px solid rgba(0,194,226, 1);
			}
				#social a:hover {
					color: rgba(0,119,212, 1);
					background-color: rgba(255,255,255, 1);
	 				transition: color 0.25s ease-out, background-color 0.25s ease-out;
				}
				#social a:nth-child(1) {
					border-width: 0 0 0 2px;
				}
				#social a:nth-child(2) {
					border-width: 0 2px;
				}
				#social a:nth-child(3) {
					border-width: 0 2px 0 0;
				}


/*
 ****************
 * COVER STYLES
 ****************
 */

#cover {
 	margin: 0;
 	padding: 4em 0 1em;
 	width: 100%;
 	height: 100vh;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: flex-end;
 	overflow: hidden;
 }
 #title {
 	width: 100%;
 	overflow: hidden;
 }
	#no-boundaries-title {
		display:flex;
		align-items: center;
		justify-content: center;
		margin: 1em 0;
	}
		#title-no,
		#title-boundaries {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
	#cover img.title-letter {
		height: 6em;
	}
		#cover img.title-2 {
			margin-right: 2.5em;
		}
		#cover img.title-1,
		#cover img.title-5,
		#cover img.title-6,
		#cover img.title-7,
		#cover img.title-8,
		#cover img.title-9,
		#cover img.title-10,
		#cover img.title-11{
			margin-right: 0.5em;
		}
		#cover img.title-3,
		#cover img.title-4 {
			margin-right: 0.25em;
		}
			
	#cover h1,
 	#cover p {
 		margin: 0;
 		text-align: center;
 		overflow: hidden;
 	}
 		#cover img.wave {
	 		width: 3000px;
	 		margin: 15vh 0 0;
			background: transparent;
	 		overflow: hidden;
	 	}



/*
 ********************
 * SECTION STYLES
 ********************
 */
 
 #quote,
 #no-boundary-future,
 #mission-vision-values,
 #making-no-boundaries {
	position: relative;
	height: 100vh;
	width: 100%;
	display: flex;
	padding: 0;
}

.headline {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 2em 0;
	padding: 3rem;
	width: 32rem;
	border-radius: 0 50% 50% 0;
	background-color: rgba(255,255,255, 0.8);
}

  	.headline h2,
 	.headline p {
 		width: 100%;
	}
		#quote h2,
	 	#no-boundary-future .headline h2,
	 	#making-no-boundaries .headline h2 {
	 		margin: 0;
	 		color: rgba(0,0,0, 1);
	 	}
	 	#quote p,
	 	#no-boundary-future .headline p,
	 	#making-no-boundaries .headline p {
	 		font-weight: 800;
	 	}
	 	.file-link {
	 		color: rgba(255,255,255, 1);
	 		background-color: rgba(255,182,15, 1);
	 		padding: 0.75rem;
	 		width: 4.25em;
	 		border: 3px solid rgba(255,182,15, 1);
	 		border-radius: 10%;
	 	}
			.file-link:hover {
				background-color: rgba(255,255,255, 1);
	 			color: rgba(255,182,15, 1);
	 			transition: background-color 0.25s ease-out;
			}
			.file-link .fa {
				font-size: 3em;
			}

/*
 ********************
 * QUOTE STYLES
 ********************
 */
 #quote {
 	margin: 0;
 	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
 	background-image: url("http://hbstrat17.wpengine.com/wp-content/themes/no-boundaries/images/quote-photo.jpg");
 	background-position: 0px -75px;
 	background-repeat: no-repeat;
 	color: rgba(0,0,0, 1);
 	border-radius: 15%;
 }

#quote h4 {
	font-family:'Merriweather';
	font-style: italic;
}
/*
 ********************
 * FRAMEWORK STYLES
 ********************
 */

#framework {
	position: relative;
	padding: 5rem 0;
	margin: 0rem 0 0;
	max-height: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
	#framework img {
		position: absolute;
		margin: 0;
		padding: 0;
		top: 132px;
		left: 50%;
		transform: translate(-50%,0);
		width: 4200px;
	}
	#framework video {
		position: relative;
		top: 0px;
		z-index: 99;
		width: 1400px;
		margin: 0;
		background-color: #fff;
	}
	#framework-content {
		width: 100%;
		margin: 2em;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
	}
		#framework-content p {
			width: 25%;
			margin: 1em;
		}
	#framework-links {
		display: flex;
	}		
	#download-framework {
		position: relative;
		bottom: 0;
		margin: 0.5rem;
		padding: 0.5rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 8rem;
		width: 8rem;
		border-radius: 50%;
		border: 5px solid rgba(0,194,226, 1);
		background-color: rgba(255,95,0, 1);
		color: #fff;
	}
		#download-framework p {
			text-align: center;
			width: 100%;
			font-size: 0.9rem;
		}
		#download-framework .fa {
			margin: 0.25em 0 0;
			font-size: 1.75em;
		}
		#download-framework:hover {
			background-color: #fff;
			color: #636466;
			font-weight: 800;
		}

/*
 ***************************
 * NO BOUNDARY FUTURE STYLES
 ***************************
 */


 #no-boundary-future {
 	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
 	background-image: url("http://hbstrat17.wpengine.com/wp-content/themes/no-boundaries/images/future-no-boundaries-photo.jpg");
 	background-position: center -75px;
 	color: rgba(0,0,0, 1);
 	border-radius: 15%;
 }
 	#no-boundary-future .waves-top {
 		position: absolute;
 		top: -550px;
 		left:-1000px;
 		width: 3000px;
 		padding: 0;
 		margin: 0;
 		opacity: 0.5;
 	}
 	#no-boundary-future .headline a p {
 		color: #000;
 	}
	#no-boundary-future-content .tweet-section p {
			color: rgba(255,255,255, 1);
			background-color: #636466;
			border: 3px solid #636466;
			font-size: 1.1em;
		}
		#no-boundary-future-content .tweet-section p:hover {
			color: #636466;
			background-color: #fff;
			font-weight: 800;
		}

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


.empowering-impact-area {
	position: relative;
 	display: flex;
 	flex-direction: column;
	align-items: center;
 	justify-content: center;
 	width: 100%;
 	max-height: none;
 	padding: 0;
 }
 	.empowering-impact-area .banner {
		position: relative;
 		width: 100%;
 		height: auto;
		/* border: 2px solid red; */
 	}
	 	.empowering-impact-area .banner img {
	 		width: 2000px;
	 		margin: 0;
	 		padding: 0;
	 	}
	 		.empowering-impact-area .banner img.icon {
	 			position: absolute;
	 			top: 40%;
	 			left: 10%;
	 			width: 20%;
	 		}
 	.empowering-impact-area-content {
 		display: flex;
 		flex-direction: row;
 		align-items: flex-start;
 		justify-content: space-around;
 		width: 100%;
 		padding: 0 3em 5em;
 	}
 		.empowering-impact-area-content div {
 			width: 30%;
 		}
 		.empowering-impact-area-content h2 {
		 	margin: 0 0 0.5em;
		}
		.empowering-impact-area-content h4 {
 			margin: 0 0 1.5em;
 		}
 		.empowering-impact-area-content h5 {
 			text-transform: uppercase;
 			margin: 0.75em 0;
 		}
 			.empowering-impact-area-content li {
 				margin: 1em 0;
 				list-style-type: disc;
 			}
 			.empowering-impact-area-content ul.no-bullets li {
 				list-style-type: none;
 			}
 		.empowering-impact-area-content a {
 			color: #636466;
 		}
 			.empowering-impact-area-content a:hover {
 				color: rgba(0,0,0, 1);
 			}
 			.empowering-impact-area-content a p,
			#making-no-boundaries-modal a p,
			#no-boundary-future-content a p,
			#five-year-plan a p {
 				padding: 0.5em;
 				display: flex;
 				flex-direction: row;
 				align-items: center;
 				justify-content: center;
 			}
 			.empowering-impact-area-content .fa,
			#making-no-boundaries-modal	.fa,
			#no-boundary-future-content .fa,
			#five-year-plan .fa {
 				margin: 0 0.25em;
 				font-size: 1.5em;
 			}
 	.empowering-impact-area-content .modal {
 		flex-direction: column;
 		align-items: center;
		justify-content: center;
 	}
 		.empowering-impact-area-content .modal iframe {
 			width: 80%;
 			height: 500px;
 		}
 		.empowering-impact-area-content .modal.youtube img {
 			width: 80%
 		}
	/* .tweet-section .fa { */
		/* margin: 0; */
	/* } */


/*
 ************************
 * DISCOVER FOR ACTION STYLES
 ************************
 */

#discover-for-action {
}
	/* #discover-for-action .tweet-section p { */
		/* color: rgba(255,95,0, 1); */
		/* width: 2.5em; */
	/* } */
		/* #discover-for-action .tweet-section p:hover { */
			/* color: rgba(255,255,255, 1); */
			/* background-color: rgba(255,95,0, 1); */
			/* border-radius: 15%; */
		/* } */
	#discover-for-action-content a p {
		background-color: rgba(255,95,0, 1);
		border: 3px solid rgba(255,95,0, 1);
		color: #fff;
		font-size: 1.1em;
	}
		#discover-for-action-content a p:hover {
			background-color: #fff;
			color: rgba(255,95,0, 1);
			font-weight: 800;
		}

/*
 ************************
 * PERSONALIZED PATHWAYS STYLES
 ************************
 */

#personalize-pathways {
}
	/* #personalize-pathways  p { */
		/* color: rgba(0,194,226, 1); */
		/* width: 2.5em; */
	/* } */
		/* #personalize-pathways .tweet-section p:hover { */
			/* color: rgba(255,255,255, 1); */
			/* background-color: rgba(0,194,226, 1); */
			/* border-radius: 15%; */
		/* } */
	#personalize-pathways-content a p {
		background-color: rgba(0,194,226, 1);
		border: 3px solid rgba(0,194,226, 1);
		color: #fff;
		font-size: 1.1em;
	}
		#personalize-pathways-content a p:hover {
			background-color: #fff;
			color: rgba(0,194,226, 1);
			font-weight: 800;
		}

/*
 ************************
 * CONNECT THE SYSTEM STYLES
 ************************
 */

 #connect-the-system {
}
	/* #connect-the-system .tweet-section p { */
		/* color: rgba(178,188,0, 1); */
		/* width: 2.5em; */
	/* } */
		/* #connect-the-system .tweet-section p:hover { */
			/* color: rgba(255,255,255, 1); */
			/* background-color: rgba(178,188,0, 1); */
			/* border-radius: 15%; */
		/* } */
	 #connect-the-system-content a p {
		background-color: rgba(178,188,0, 1);
		border: 3px solid rgba(178,188,0, 1);
		color: #fff;
		font-size: 1.1em;
	}
		 #connect-the-system-content a p:hover {
			background-color: #fff;
			color: rgba(178,188,0, 1);
			font-weight: 800;
		}

/*
 ************************
 * SOCIAL CHANGE STYLES
 ************************
 */

#social-change {
}
	/* #social-change .tweet-section p { */
		/* color: rgba(208,36,51, 1);  */
		/* width: 2.5em; */
	/* } */
		/* #social-change .tweet-section p:hover { */
			/* color: rgba(255,255,255, 1); */
			/* background-color: rgba(208,36,51, 1);  */
			/* border-radius: 15%; */
		/* } */
	#social-change-content a p {
		color: rgba(255,255,255, 1);
		background-color: rgba(208,36,51, 1); 
		border: 3px solid rgba(208,36,51, 1); 
		font-size: 1.1em;
	}
		#social-change-content a p:hover {
			color: rgba(208,36,51, 1);
			background-color: #fff;
			font-weight: 800;
		}
/*
 ************************
 * MOBILIZED PEOPLE-TEAMS STYLES
 ************************
 */

#mobilize-people-teams {
}
	/* #mobilize-people-teams .tweet-section p { */
		/* color: rgba(150,35,153, 1); */
		/* width: 2.5em; */
	/* } */
		/* #mobilize-people-teams .tweet-section p:hover { */
			/* color: rgba(255,255,255, 1); */
			/* background-color: rgba(150,35,153, 1); */
			/* border-radius: 15%; */
		/* } */
	#mobilize-people-teams-content a p {
		color: rgba(255,255,255, 1);
		background-color: rgba(150,35,153, 1);
		border: 3px solid rgba(150,35,153, 1);
		font-size: 1.1em;
	}
		#mobilize-people-teams-content a p:hover {
			color: rgba(150,35,153, 1);
			background-color: #fff;
			font-weight: 800;
		}

/*
 ************************
 * CO-CREATE STYLES
 ************************
 */

#co-create {
}
	/* #co-create .tweet-section p { */
		/* color: rgba(0,119,212, 1); */
		/* width: 2.5em; */
	/* } */
		/* #co-create .tweet-section p:hover { */
			/* color: rgba(255,255,255, 1); */
			/* background-color: rgba(0,119,212, 1); */
			/* border-radius: 15%; */
		/* } */
	#co-create-content a p {
		color: rgba(255,255,255, 1);
		background-color: rgba(0,119,212, 1);
		border: 3px solid rgba(0,119,212, 1);
		font-size: 1.1em;
	}
		#co-create-content a p:hover {
			color: rgba(0,119,212, 1);
			background-color: #fff;
			font-weight: 800;
		}

/*
 ************************
 * EVOLVE STYLES
 ************************
 */

#evolve {
}
	/* #evolve .tweet-section p { */
		/* color: rgba(18,173,42, 1); */
		/* width: 2.5em; */
	/* } */
		/* #evolve .tweet-section p:hover { */
			/* color: rgba(255,255,255, 1); */
			/* background-color: rgba(18,173,42, 1); */
			/* border-radius: 15%; */
		/* } */
	#evolve-content a p {
		color: rgba(255,255,255, 1);
		background-color: rgba(18,173,42, 1);
		border: 3px solid rgba(18,173,42, 1);
		font-size: 1.1em;
	}
		#evolve-content a p:hover {
			color: rgba(18,173,42, 1);
			background-color: #fff;
			font-weight: 800;
		}


/*
 ************************
 * FIVE-YEAR PLAN STYLES
 ************************
 */
#five-year-plan {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-around;
	max-height: none;
	/*border: 2px solid red;*/
}
	#five-year-plan h2 {
		margin: -10px 0 0.25em;
		/*border: 2px solid red;*/
	}
		#five-year-plan .tweet-section {
			
		}
		
		#five-year-plan .tweet-section p {
			color: rgba(255,255,255, 1);
			background-color: #636466;
			border: 3px solid #636466;
			font-size: 1.1em;
			margin: 1em 0
		}
		#five-year-plan .tweet-section p:hover {
			color: #636466;
			background-color: #fff;
			font-weight: 800;
		}
	#five-year-plan ol {
		counter-reset: li;
		margin-left: 0;
		margin-top: 0;
		padding-left: 0;
	}
	#five-year-plan ol > li {
		position: relative;
		margin: 0 0 0.75em 5em;
		padding: 1em 1.5em;
		list-style-type: none;
		border: 2px solid #636466;
	}
		#five-year-plan ol > li:before {
			content: counter(li);
			counter-increment: li;
			position: absolute;
			top: -2px;
			left: -2em;
			width: 2em;
			height: 100%;
			font-size: 2em;
			/* padding: 4px; */
			display: flex;
			align-items: center;
			justify-content: center;
			color:#fff;
			background:#666;
			font-weight:bold;
			font-family: 'Oswald', Arial, sans-serif;
			border: 2px solid #636466;
		}
		#five-year-plan ol > li:nth-child(1),
		#five-year-plan ol > li:nth-child(1):before {
			border-color: rgba(255,95,0, 1);
		}
			#five-year-plan ol > li:nth-child(1):before {
				background-color: rgba(255,95,0, 1);
			}
		#five-year-plan ol > li:nth-child(2),
		#five-year-plan ol > li:nth-child(2):before	{
			border-color: rgba(0,194,226, 1);
		}
			#five-year-plan ol > li:nth-child(2):before {
				background-color: rgba(0,194,226, 1);
				/*height: 96%;*/
			}
		#five-year-plan ol > li:nth-child(3),
		#five-year-plan ol > li:nth-child(3):before {
			border-color: rgba(178,188,0, 1);
		}
			#five-year-plan ol > li:nth-child(3):before {
				background-color: rgba(178,188,0, 1);
				/*height: 94%;*/
			}
		#five-year-plan ol > li:nth-child(4),
		#five-year-plan ol > li:nth-child(4):before	{
			border-color: rgba(208,36,51, 1); 
		}
			#five-year-plan ol > li:nth-child(4):before {
				background-color: rgba(208,36,51, 1); 
			}
		#five-year-plan ol > li:nth-child(5),
		#five-year-plan ol > li:nth-child(5):before	{
			border-color: rgba(150,35,153, 1);
		}
			#five-year-plan ol > li:nth-child(5):before {
				background-color: rgba(150,35,153, 1); 
			}
		#five-year-plan ol > li:nth-child(6),
		#five-year-plan ol > li:nth-child(6):before	{
			border-color: rgba(0,119,212, 1);
		}
			#five-year-plan ol > li:nth-child(6):before {
				background-color: rgba(0,119,212, 1);
			}
		#five-year-plan ol > li:nth-child(7),
		#five-year-plan ol > li:nth-child(7):before {
			border-color: rgba(18,173,42, 1);
		}
			#five-year-plan ol > li:nth-child(7):before {
				background-color:rgba(18,173,42, 1);
			}
		#five-year-plan ol > li:nth-child(8),
		#five-year-plan ol > li:nth-child(8):before	{
			border-color: rgba(255,95,0, 1);
		}
			#five-year-plan ol > li:nth-child(8):before {
				background-color: rgba(255,95,0, 1);
			}
		#five-year-plan ol > li:nth-child(9),
		#five-year-plan ol > li:nth-child(9):before {
			border-color: rgba(0,194,226, 1);
		}
			#five-year-plan ol > li:nth-child(9):before {
				background-color: rgba(0,194,226, 1);
			}





 /*
 *******************************
 * MISSION VISION VALUES STYLES
 *******************************
 */

 #mission-vision-values {
 	padding: 0;
 	margin: 0;
 	display: block;
 	background-image: url("http://hbstrat17.wpengine.com/wp-content/themes/no-boundaries/images/Mission-Vision-photo.jpg");
 	background-position: -350px center;
 	background-size: 75em;
 	background-repeat: no-repeat;
 	color: rgba(0,0,0, 1);
 	border-radius: 15%;
 	/*overflow: visible;*/
 }
 	#mission-vision-values .waves-top,
 	#mission-vision-values .waves-bottom {
 		position: absolute;
 		width: 2000px;
 		padding: 0;
 		margin: 0;
 		opacity: 0.95;
 	}
	 	#mission-vision-values .waves-top {
	 		top: -410px;
	 		left: 65px;
	 		z-index: 100;
	 	}
	 	#mission-vision-values .waves-bottom {
	 		bottom: -400px;
	 		left: 0px;
	 		z-index: 100;
	 	}
 	#mission-vision-values-content {
 		position: absolute;
 		right: -200px;
 		top: -10%;
 		z-index: 99;
		width: 70%;
		height: 120%;
		margin: 0;
		padding: 10rem 10rem 10rem 10rem;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		border-radius: 50%;
		background-color: rgba(255,255,255, 1);
	}
		#mission-vision-values-content div {
	 		margin: 2em;
		}
		#mission-vision-values-content div:nth-child(1) {
	 		width: 35%;
		}
		#mission-vision-values-content div:nth-child(2) {
	 		width: 35%;
		}
	 	#mission-vision-values-content h2 {
			margin: 0;
			font-size: 2.5em;
	 	}
		

 /*
 *******************************
 * MAKING NO BOUNDARIES STYLES
 *******************************
 */

#making-no-boundaries {
	position: relative;
	padding: 0;
	margin: 0;
 	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
 	background-image: url("http://hbstrat17.wpengine.com/wp-content/themes/no-boundaries/images/making-no-boundaries.jpg");
 	background-position: -225px -300px;
 	background-repeat: no-repeat;
 	color: rgba(0,0,0, 1);
 	border-radius: 15%;
}
	#making-no-boundaries-title a {
		width: 100%;
	}
	#making-no-boundaries-title a p {
		color: #000;
	}
	#making-no-boundaries-modal img {
		width: 40%;
		margin: 0;
	}
	
	#making-no-boundaries-modal .tweet-section p {
			color: rgba(255,255,255, 1);
			background-color: #636466;
			border: 3px solid #636466;
			font-size: 1.1em;
		}
		#making-no-boundaries-modal .tweet-section p:hover {
			color: #636466;
			background-color: #fff;
			font-weight: 800;
		}

	#making-no-boundaries-video {
		width: 100%;
		margin: 1em 0 2em;
	}
		#making-no-boundaries-video img {
			width: 100%;
			cursor: pointer;
		}
		#making-no-boundaries-video iframe {
			width: 100%;
			height: 275px;
		}





/*
 ****************
 * 	CONCLUSION STYLES
 ****************
 */

 #conclusion {
	position: relative;
	width: 100%;
	padding: 0;
 }
	#conclusion img {
		position: absolute;
		top: 0;
		left: 0;
	}
	


/*
 ****************
 * FOOTER STYLES
 ****************
 */

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap:wrap;
    background-color: #53bb50;
    color: #fff;
    font-weight: bold;
    padding: 2em 1em;
	width: 100%;
	max-width: 1920px;
}
	#footer-row-one {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-around;
		flex-wrap:wrap;
		margin-bottom: 1rem;
	}
	footer > p {
		font-size: 0.9rem;
	}
	footer ul {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin:0;
		padding: 0;
	}
		footer li {
			list-style-type: none;
			margin:0.25em 0.25em 0.5em;
		}
	footer a {
		color: #fff;
		text-decoration: none;
	}
	footer p {
		color: #fff;
		text-align: center;
	}
		#hb-logo {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
		}
			#hb-logo img {
				width: 18rem;
			}
			#ut-affil {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: center;
				
			}
				#ut-affil p {
					font-size: 0.7rem;
				}
				#ut-affil img {
					width: 8rem;
					transform: translate(0px,-18px);
				}
			
		footer #footer-social {
			display:flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: flex-end;
			font-size: 2em;
			margin: 0.25em 1em 1em;
		}
			
			footer #footer-social a:hover {
				transform: translate(0,5px);
			}
			footer #footer-social p {
				font-size: 0.9rem;
				margin: 0.25em;
				text-align: right;
			}


/*
 *******************
 **** MEDIA QUERIES
 *******************
 */


/* 
 * WIDTH-based Queries
 */

 
@media only screen and (max-width: 1800px) {
	.empowering-impact-area .banner img {
		width: 1850px;
	}

} 
 
@media only screen and (max-width: 1600px) {
	.empowering-impact-area .banner img {
		width: 1650px;
	}

}
 
/* 
 * MAX-WIDTH 1400PX
 */ 

@media only screen and (max-width: 1400px) {

	#cover img.title-letter {
		height: 6em;
	}
			
	#cover h1 {
		font-size: 6em;
	}
	
	#quote {
		background-position: -225px -75px;
	}
		#framework img {
			top: 125px;
			width: 3600px;
		}
		#framework video {
			width: 1200px;
		}

	.empowering-impact-area .banner img {
		width: 1450px;
	}

}


/* 
 * MAX-WIDTH 1200PX
 */ 


@media only screen and (max-width: 1200px) {
	
	#cover img.title-letter {
		height: 4em;
	}
		#cover img.title-2 {
			margin-right: 2em;
		}
		#cover img.title-1,
		#cover img.title-5,
		#cover img.title-6,
		#cover img.title-7,
		#cover img.title-8,
		#cover img.title-9,
		#cover img.title-10,
		#cover img.title-11{
			margin-right: 0.4em;
		}
		#cover img.title-3,
		#cover img.title-4 {
			margin-right: 0.2em;
		}
	#cover h1 {
		font-size: 4em;
	}
		#no-boundary-future {
			background-position: -400px -75px;
		}
		#quote {
			background-position: -600px -75px;
		}
		#making-no-boundaries .banner img {
			width: 1425px;
		}
		#no-boundary-future,
		#quote {
			justify-content: flex-end;
		}
			#no-boundary-future h2 {
				font-size: 2.5em;
			}

			.headline {
				margin: 2em 0;
				padding: 3rem;
				width: 25rem;
				border-radius: 0 50% 50% 0;
				background-color: rgba(255,255,255, 0.8);
			}
		#framework img {
			top: 117px;
			width: 3005px;
		}
		#framework video {
			width: 1000px;
		}
		
		.empowering-impact-area .banner img {
			width: 1250px;
		}

		#five-year-plan {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-around;
			max-height: none;
			padding: 1rem;
			/*border: 2px solid red;*/
		}
			#five-year-plan h2 {
				margin-left: 0.3em;
			}
			#five-year-plan div {
				width: 100%;
			}
			#five-year-plan .tweet-section p {
				color: rgba(255,255,255, 1);
				background-color: #636466;
				border: 3px solid #636466;
				font-size: 1.1em;
				margin: 1em 0 1em 1em;
			}

		#mission-vision-values {
			background-position: -400px center;
		}
		#mission-vision-values-content {
			padding: 10rem 6.5rem;
			right: -175px;
			top: -10%;
			height: 115%;
			width: 90%;
		}
			#mission-vision-values-content div {
				margin: 1.5em;
			}
			#mission-vision-values-content div:nth-child(1) {
				width: 38%;
			}
			#mission-vision-values-content div:nth-child(2) {
				width: 34%;
			}
			#mission-vision-values-content p {
				font-size: 0.95em;
			}

}


/* 
 * MAX-WIDTH 1100PX
 */ 

@media only screen and (max-width: 1100px) {
	
	.content-modal:target .modal-content-area h2,
	.empowering-impact-area h2 {
	 	font-size: 2.5em;
	}
	.content-modal:target .modal-content-area h4,
	.empowering-impact-area h4 {
	 	font-size: 1.1em;
	}
	.content-modal:target .modal-content-area h5,
	.empowering-impact-area h5 {
	 	font-size: 1em;
	}
	.content-modal:target .modal-content-area p,
	.content-modal:target .modal-content-area li,
	.empowering-impact-area-content p,
	.empowering-impact-area li {
		font-size: 0.95em;
	}
	.empowering-impact-area-content ul.no-bullets {
		/*border: 2px solid red;*/
	}
	.empowering-impact-area-content > div:nth-child(3) {
		padding-top: 0;
	}

	#hb-logo,
	div#footer-social {
/* 		width: 100%;
 */		align-items: center;
	}
		div#footer-social p {
			text-align: center;
		}
}


/* 
 * MAX-WIDTH 1000PX
 */ 

@media only screen and (max-width: 1000px) {

	#framework img {
		top: 110px;
		width: 2400px;
	}
	#framework video {
		width: 800px;
	}
		
	#mission-vision-values-content {
		top: -5%;
	}
	#making-no-boundaries-content {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
		#making-no-boundaries-content > div {
			width: 80%;
			margin: 2em 0;
		}
		#making-no-boundaries-content > div:nth-child(1) {
			width: 80%;
			align-items: flex-start;
		}
		#making-no-boundaries-content > div:nth-child(2) {
			width: 80%;
			align-items: flex-start;
		}

	.empowering-impact-area .banner img {
 		width: 1050px;
 	}

}


/* 
 * MAX-WIDTH 900PX
 */ 

@media only screen and (max-width: 900px) {

	#cover {
 		padding: 0 1em;
 	}
		#cover img.title-letter {
			height: 3.5em;
		}
			#cover img.wave {
				margin: 20vh 0 0;
			}	
 		#cover h1 {
			font-size: 3.5em;
 		}


 	#quote {
 		background-position: -850px -250px;
 	}
	.empowering-impact-area-content {
 		flex-direction: column;
 		align-items: flex-start;
 		justify-content: space-around;
 	}
 		.empowering-impact-area-content div {
 			width: 100%;
 		}

	#no-boundary-future {
		background-position: -550px -100px;
	}
	.headline {
		margin: 0.5em 0;
		padding: 1em 2em;
		width: 60%;
	}
		#no-boundary-future .headline h2,
		#making-no-boundaries .headline h2 {
			font-size: 2em;
			width: 100%;
		}
		#no-boundary-future .headline p,
		#making-no-boundaries .headline p {
			width: 100%;
		}
	.content-modal:target .modal-content-area {
		width: 85%;
	}
		.content-modal:target .modal-content-area h2 {
			font-size: 1.5em;
		}
	.empowering-impact-area .banner img {
 		width: 950px;
 	}


/************* Mission-Vision-Values ***********/
 #mission-vision-values {
 	background-position: -400px top;
 	background-size: 75em;
 	height: 1000px;
	max-height: none;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: flex-end;
 }
	#mission-vision-values .waves-bottom {
 		bottom: 0px;
 		left: 0px;
 		z-index: 100;
 	}
	#mission-vision-values-content {
 		position: relative;
 		right: 0;
 		top: 0;
 		z-index: 999;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0 5rem;
		align-items: flex-start;
		justify-content: flex-start;
		border-radius: 0;

	}


/******* Making No Boundaries ***************/

	#making-no-boundaries {
	 	background-position: -700px -350px;
	}

/******** Footer ****************/
		#hb-logo,
		div#footer-social {
	 		width: 100%;

		}
			div#footer-social {
				margin-top: 0.75em;
			}
}


/* 
 * MAX-WIDTH 800PX
 */ 

@media only screen and (max-width: 800px) {
	
	#framework img {
		top: 102px;
		width: 1800px;
	}
	#framework video {
		width: 600px;
	}
	#mission-vision-values {

		height: 1200px;

	}
		
}


/* 
 * MAX-WIDTH 750PX
 */ 

@media only screen and (max-width: 750px) {
	#framework-content {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
		#framework-content p {
			width: 80%;
			margin: 1.5em 0.75em 0;
		}
	#mission-vision-values {
		height: 1200px;
		background-position: -450px -50px;
	}
	#mission-vision-values-content {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 2rem 4rem;
	}
	#mission-vision-values .waves-top {
		left: 0px;
	}
		#mission-vision-values-content div:nth-child(n) {
	 		margin: 1em;
	 		width: 100%;
		}
		#mission-vision-values-content h2 {
			font-size: 2em;
		}

	.empowering-impact-area .banner img {
 		width: 800px;
 	}
	#conclusion img {
		left: -150px;
	}
	
}


/* 
 * MAX-WIDTH 600PX
 */ 

@media only screen and (max-width: 600px) {
	
	#no-boundaries-title {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
		#title-no {
			margin: 1em 0;
		}
		#cover img.title-letter {
			height: 3em;
		}
			#cover img.title-2 {
				margin-right: 0;
			}
			#cover img.wave {
				margin: 15vh 0 0;
			}
	#quote {
 		background-position: -1000px -300px;
 	}
	
	#framework img {
		top: 98px;
		width: 1500px;
	}
	#framework video {
		width: 500px;
	}

	#no-boundary-future {
		background-position: -650px -150px;
	}
	#no-boundary-future,
 	#quote,
 	#mission-vision-values,
 	#making-no-boundaries  {
 		border-radius: 0;
 	}
 	.content-modal:target .modal-content-area,	
	.content-modal.open .modal-content-area {
		width: 85%;
		padding: 1em;
	}
	.content-modal:target .close-modal,
	.content-modal.open .close-modal {
		margin: 0.75em;
		font-size: 2.5rem;
	}
	
	.empowering-impact-area .banner img {
 		width: 625px;
 	}

/*********** Making No Boundaries ************/

#making-no-boundaries {
	align-items: flex-end;
	justify-content: flex-end;
 	background-position: -1200px -650px;
 	padding: 0;
}
	#making-no-boundaries-content > div {
		padding: 1em;
		margin: 0;
		width: 100%;
	}
	#making-no-boundaries-content p,
	#making-no-boundaries-content h2 {
		text-align: left;
	}
	#making-no-boundaries-content,
	#making-no-boundaries-content .headline {
		width: 100%;
		justify-content: center;
		align-items: center;
	}
	#making-no-boundaries-content > div:nth-child(n) {
		width: 100%;
		align-items: center;
		border-radius: 0;
	}
	#making-no-boundaries h2 {
		font-size: 2em;
	}
	#making-no-boundaries .content-modal p {
		font-size: 1em;
	}



}

}

/* 
 * MAX-WIDTH 500PX
 */ 

@media only screen and (max-width: 500px) {
	
	#framework img {
		top: 95px;
		width: 1260px;
	}
	#framework video {
		width: 420px;
	}
	#mission-vision-values {
		height: 1300px;
	}
	#mission-vision-values-content {
		padding: 2rem;
	}
	#mission-vision-values-content div:nth-child(n) {
		margin: 0.5em;
	}
	.empowering-impact-area .banner img {
		position: relative;
		left: -100px;
	}
		.empowering-impact-area .banner img.icon {
			left: 3%;
		}
}

/* 
 * MAX-WIDTH 420PX
 */ 

@media only screen and (max-width: 420px) {
	#header-bar {
	 	justify-content: center;
 	}
	#wordmark { /*>>>>> HBKRH Logo <<<<<*/
	 		width: 80%;
	 		padding: 0.5rem 0 0.5rem 0.5rem;
	 		margin: 0;
	}
		#wordmark a {
			padding: 0;
		}
	#nav-bars { /*>>>>> Hamburger Menu <<<<<*/
 		padding: 0.25em 0.5em;
 		font-size: 1.5rem;
 	}
	#main-navigation:target, 
	#main-navigation.open {
		width: 95%;
		/*right: -10px;*/
	}
		#main-navigation-header > a:nth-child(1) {
			width: 70%;
		}
		#main-navigation-header > a:nth-child(2) {
			width: 25%;
		}
		#accessible-pdf {
			padding: 0 1em;
			width: 100%;
			flex-grow: 1;
		}
		#close-main-navigation {
			width: 100%;
			height: 100%;
		}
	#cover img.title-letter {
		height: 2.25em;
	}
		#cover img.title-1,
		#cover img.title-5,
		#cover img.title-6,
		#cover img.title-7,
		#cover img.title-8,
		#cover img.title-9,
		#cover img.title-10,
		#cover img.title-11{
			margin-right: 0.2em;
		}
		#cover img.title-3,
		#cover img.title-4 {
			margin-right: 0.15em;
		}
 	#cover h1 {
 		font-size: 2.5em; 
 	}
	
	#framework img {
		top: 92px;
		width: 960px;
	}
	#framework video {
		width: 320px;
	}
	
 	#no-boundary-future,
 	#quote {
 		align-items: center;
 		border-radius: 0;
 	}
	 	#no-boundary-future {
			background-position: -750px -200px
	 	}
	 		#no-boundary-future .waves-top {
	 			top:-600px;
	 			left: -1100px;
	 		}	
	 	#quote {
	 		background-position: -1150px -300px;
	 	}
 	.headline {
 		width: 100%;
 		margin: 0;
 		border-radius: 15% 15% 0 0;
 	}
 		.headline h4 {
 			font-size: 1.1em;
 			/*margin: 0;*/
 		}
	.content-modal:target .modal-content-area,	
	.content-modal.open .modal-content-area {
		width: 80%;
		padding: 0.75em;
	}
	.content-modal:target .close-modal,
	.content-modal.open .close-modal {
		margin: 0.5em;
		font-size: 2rem;
	}
		#no-boundary-future h2 {
		    font-size: 2em;
		}


		.empowering-impact-area .banner img {
	 		position: relative;
	 		left: -150px;
	 	}
	 		#personalize-pathways .banner img.icon {
	 			top: 30%;
	 		}
	 		#connect-the-system .banner img.icon{
	 			top: 60%;
	 		}
#mission-vision-values {
		height: 1400px;
	}

/*********** Mission Vision Values ************/

#making-no-boundaries {
	align-items: flex-end;
	justify-content: flex-end;
 	background-position: -1250px -650px;
 	padding: 0;
}
	#making-no-boundaries-content > div {
		padding: 1em;
		margin: 0;
		width: 100%;
	}
	#making-no-boundaries-content p,
	#making-no-boundaries-content h2 {
		text-align: left;
	}
	#making-no-boundaries-content,
	#making-no-boundaries-content .headline {
		width: 100%;
		justify-content: center;
		align-items: center;
	}
	#making-no-boundaries-content > div:nth-child(n) {
		width: 100%;
		align-items: center;
		border-radius: 0;
	}
	#making-no-boundaries h2 {
		font-size: 2em;
	}
	#making-no-boundaries .content-modal p {
		font-size: 1em;
	}



}


/* 
 * MAX-WIDTH 320PX
 */ 


@media only screen and (max-width: 320px) {

 	header,
	section,
	footer,
	#main-header,
	#cover,
	#framework,
	#quote,
	#no-boundary-future,
	.empowering-impact-area,
	#five-year-plan,
	#mission-vision-values,
	#making-no-boundaries {
		width: 320px;
	}

}

/* 
 * MIN-WIDTH 900PX
 */ 

@media only screen and (min-width: 900px) {
	
	#mission-vision-values {
		max-height: 750px;
	}
}

/* 
 * HEIGHT-based Queries
 */


 
@media only screen and (max-height: 700px) {
	#making-no-boundaries {
		background-position: -125px -500px;
	}

}

@media only screen and (max-height: 700px) and (max-width: 900px) {
	#making-no-boundaries {
		background-position: -200px -500px;
	}
}

@media only screen and (max-height: 700px) and (max-width: 600px) {
	#making-no-boundaries {
		background-position: -1200px -650px;
	}

}

@media only screen and (max-height: 700px) and (max-width: 420px) {
	#making-no-boundaries {
		background-position: -1250px -650px;
	}
}

 @media only screen and (max-height: 700px) and (min-width: 900px) {
 	
	#mission-vision-values-content p {
		font-size: 0.95em;
	}
	#mission-vision-values-content {
		padding-left: 7rem;	
		z-index: 101;
		height: 120%;	
	}

 }
 
 @media only screen and (min-height: 800px) and (max-width: 900px) {
 	
	#quote {
		background-position-y: -75px;
	}

 }
 
 @media only screen and (min-height: 800px) and (min-width: 1200px) {
 	
	#cover img.wave {
		margin: 20vh 0 0;
	}

 }
 
 @media only screen and (min-height: 800px) and (max-width: 1200px) {
 	
	#cover img.wave {
		margin: 30vh 0 0;
	}

 }
 
 /* 
 * IE10+ Specific Queries
 */

@media only screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 
	#framework img {
		top: 132px;
		width: 4216px;
		margin-left: -2108px;
		transform: none;
	}
	
	#making-no-boundaries-modal img {
		width: 40%;
		height: 100%;
	}
	#making-no-boundaries-video img {
		width: 100%;
		height: 100%;
	}
 }
 
@media only screen and (-ms-high-contrast: none) and (max-width: 1400px), (-ms-high-contrast: active) and (max-width:1400px) {
 
	#framework img {
		top: 125px;
		width: 3610px;
		margin-left: -1805px;
	}
 
}
 
@media only screen and (-ms-high-contrast: none) and (max-width: 1200px), (-ms-high-contrast: active) and (max-width:1200px) {
 
	#framework img {
		top: 118px;
		width: 3010px;
		margin-left: -1505px;
	}
 
}

@media only screen and (-ms-high-contrast: none) and (max-width: 1000px), (-ms-high-contrast: active) and (max-width:1000px) {
 
	#framework img {
		top: 110px;
		width: 2414px;
		margin-left: -1207px;
	}
 
}

@media only screen and (-ms-high-contrast: none) and (max-width: 800px), (-ms-high-contrast: active) and (max-width:800px) {
 
	#framework img {
		top: 103px;
		width: 1810px;
		margin-left: -905px;
	}
 
}

@media only screen and (-ms-high-contrast: none) and (max-width: 600px), (-ms-high-contrast: active) and (max-width:600px) {
 
	#framework img {
		top: 100px;
		width: 1500px;
		margin-left: -750px;
	}
 
}

@media only screen and (-ms-high-contrast: none) and (max-width: 500px), (-ms-high-contrast: active) and (max-width:500px) {
 
	#framework img {
		top: 97px;
		width: 1270px;
		margin-left: -635px;
	}
 
}

@media only screen and (-ms-high-contrast: none) and (max-width: 420px), (-ms-high-contrast: active) and (max-width:420px) {
 
	#framework img {
		top: 93px;
		width: 960px;
		margin-left: -480px;
	}
 
}