/*!
* Theme Name: HackerYou Starter Theme
* Theme URI: http://hackeryou.com;
* Description: Starter theme for building any website. Created by HackerYou. * Rename this to your own theme page.
* Version: 1.0
* Author: HackerYou
* Author URI: http://hackeryou.com
*/

/*
 ******************************
 ****** NORMALIZE AND CLEARFIX
 ******************************
 */


article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button],/* 1 */
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

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


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


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

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

@font-face{
    font-family: 'CFCrayons-Regular';
    src: url('assets/CFCrayons-Regular.ttf'),
/*    url('Thonburi-Bold.eot'); /* IE */*/
}

h1 {
	font-family: 'Amatic SC', cursive;
	font-size:8.5em;
	font-weight:800;
	color:#fff;
	padding-left:0.2em;
	margin: 0;
	padding: 0 0.1em;
	line-height: 1.1em;
/*	border: 1px solid red;*/
}
h2 {
	font-family: 'Amatic SC', cursive;
	font-size: 4.5em;
	font-weight:800;
	color:#fff;
}
h3 {
	font-family:'Montserrat', sans-serif;
	font-size: 1.5em;
	font-weight: 800;
}
h4 {
	font-family:'Montserrat', sans-serif;
	font-size: 1.25em;
	font-weight: 800;
}

section {
	padding: 4em 2em;

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

.modal {
	display: none;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	max-height: 1000px;
	overflow: auto;
	background-color: rgba(0,0,0,0.5);
	/*animation: slideInRight 1.5s ease-out;*/
}
	.modal:target,
	.modal.selected {
		display: flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;
		position: absolute;
	}
	.modal img {
		width: 80%;
		height: auto;
		/* height: 600px; */
	}
	.close-modal {
		text-decoration: none;
		display: inline-block;
		position: absolute;
		text-align: center;
		top: 10px;
		right: 10px;
		vertical-align: center;
		font-size: 2em;
		font-weight: bold;
		color: #fff;
		margin: 1em;
		padding: 0.3em 0 0;
		height: 2em;
		width: 2em;
		border: 5px solid #fff;
		border-radius: 50%;
	}
	.close-modal:hover {
		transform: scale(1.5);
		/*animation: bounce 1.5s infinite;*/
	}

.revealOnScroll {
	opacity: 0;
}

.hide {
	display:none;
}

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

#main-header {
	z-index: 9998;
	position: fixed;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
 	top: 0;
 	left: 0;
 	width: 100%;
	max-width: 1920px;
	/* overflow: hidden; */
 	background: #fff;
/* 	box-shadow: 2px 2px 5px #555;*/
	font-family: Open Sans;

}

	#wordmark { /*>>>>> HBKRH Logo <<<<<*/
			display: flex;
			align-items: center;
			margin: 0.25rem;
			width: 11em;
/*			border: 1px solid red;*/
		}
			#wordmark img {
				width: 100%;
			}
	#nav-bars {
		width: 70%;
		display: none;
		justify-content: flex-end;
		margin: 0.5em 0.75em;
	}
		.fa-bars {
			display: none;
			color:  #53bb50;
			cursor: pointer;
		}



/*
 *************
 * NAV STYLES
 *************
 */

nav#main-navigation-menu {
	width: 70%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	height: auto;
/*	border: 1px solid red;*/
}
	#main-navigation-menu ul {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		margin: 0;
		height: 100%;
/*		border: 1px solid blue;*/
		background-color: #fff;
	}

		#main-navigation-menu li {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin: 0;
			padding: 0 0.75em;
			height: 4.6rem;
			text-decoration: none;
			list-style-type: none;
			text-transform: uppercase;
			font-size: 0.9em;
			font-weight: bold;
			color: #333;
		}
			#main-navigation-menu .blue.sub-menu li,
			#main-navigation-menu .purple.sub-menu li {
				color: #ddd;
			}
			#main-navigation-menu li a {
				height: 100%;
			}	
			#main-navigation-menu li:hover,
			#main-navigation-menu .sub-menu li:hover			{
				color: #fff;
				transition: background-color 0.5s ease-out;
			}
				#main-navigation-menu .blue li:hover,
				#discover-menu:hover *,
				#main-navigation-menu ul.blue.sub-menu,
				#main-navigation-menu ul.blue.sub-menu li {
					background-color: #007CC2;
				}
				#main-navigation-menu .light-blue li:hover,
				#lead-menu:hover *,
				#main-navigation-menu ul.light-blue.sub-menu,
				#main-navigation-menu ul.light-blue.sub-menu li {
					background-color: #41C3DC;
				}
				#main-navigation-menu .orange li:hover,
				#reach-menu:hover *,
				#main-navigation-menu ul.orange.sub-menu,
				#main-navigation-menu ul.orange.sub-menu li  {
					background-color: #F58326;
				}
				#main-navigation-menu .purple li:hover,
				#care-menu:hover *,
				#main-navigation-menu ul.purple.sub-menu,
				#main-navigation-menu ul.purple.sub-menu li {
					background-color: #91268F;
				}
				#main-navigation-menu .green li:hover {
					background-color: #53bb50;
				}
				#donate-menu *,
				#donate-menu:hover * { /* DONATE button stays highlighted */
					background-color: #DC0030;
				}
					#donate-menu:hover li {
						color: #000;
					}
					
				#donate-menu a {
					margin: 0 20%;
					color: #fff;
				}
					#donate-menu li {
						height: 3rem;
						padding: 0 1.25rem;
						color: #fff;
					}
					
			#main-navigation-menu a {
				text-decoration: none;
				text-align: center;
			}
		#main-navigation-menu .sub-menu {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			transform: translate(0, 4.5rem);
			/*border-bottom: 1px solid #fff;*/
		}
			#main-navigation-menu .sub-menu li{
				padding: 0 1.5em;
				border: 1px solid #fff;
				border-top: 0px solid #fff;
			}
		
	#discover-menu #discover-stories,
	#lead-menu #lead-stories,
	#care-menu #care-stories,
	#reach-menu #reach-stories {
		display: none;
	}
		#discover-menu:hover #discover-stories,
		#lead-menu:hover #lead-stories,
		#care-menu:hover #care-stories,
		#reach-menu:hover #reach-stories {
			display: flex;
			border-bottom: 1px solid #fff;
		}


/*
 ****************
 * SPLASH STYLES
 ****************
 */

#splash {
  	height:100%;
  	width:100%;
  	position:relative;
  	top:0;
  	left:0;
  	background-color: #53bb50;
  	background-size: 100%;
  	background-repeat: no-repeat;
  	background-size: cover;
  	display:flex;
  	align-items:center;
  	justify-content: center;
  	overflow: hidden;
}
.title {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.rocket {
	position: absolute;
	top:50%;
	left:50%;
}
.cloud {
	position: absolute;
	top:50%;
	left:50%;
}


/*
 ****************
 * MESSAGE STYLES
 ****************
 */

 #message {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	overflow: hidden;
	width: 100%;
	max-width: 1920px;
 }
 	#message img {
 		width: 80%;
 		margin: 2em 0 0;
 	}
 	#message div {
 		width: 60%;
 		margin: 1em;
 	}
 	#signature {
 		display: flex;
 		flex-direction: row;
 		flex-wrap: wrap;
 		justify-content: space-between;
 		align-items: flex-end;
 	}
	 	#signature p {
	 		width: 48%;
	 	}
			#signature p .blue {
				color: #007CC2;
			}
	 	#signature img {
			width: 150px;
 	}
		#signature img.larger {
			transform: scale(1.4);
			transform-origin: bottom left;
	}
	 	div#employer-awards {
	 		width: 100%;
	 		margin: 0;
	 		display: flex;
	 		align-items: center;
	 		justify-content: space-between;
	 		flex-wrap: wrap;
	 		/*border: 1px solid red;*/
	 	}
	 		div#employer-awards img {
/*	 			max-width: 30%;*/
	 		}
	 		.c10ma {
	 			transform: translateX(10px) scale(1.3);
	 		}
	 		.gtatop {
	 			transform: translateX(20px) scale(0.75);
	 		}
	 		.catopyoung {
	 			transform: scale(0.75);
	 		}

/*
 ****************
 * SECTION STYLES
 ****************
 */

#discover,
#lead,
#care,
#reach {
	position: relative;
	padding: 0;
	margin: 0;
	border: 0;
	width: 100%;
	max-width: 1920px;
	overflow: hidden;
}
	#treating-autism-through-tech,
 	#casebook-lightens-weight-related-convo,
 	#hb-delivers-hip-check,
 	#parents-applaud-infant-hand-prosthetic,
 	#from-client-to-career-minded,
	#hero-with-or-without-cape,
	#client-centred-care,
	#brothers-bond-over-battling-robots,
	#HB-parents-teach-inclusive-101 {
		position: relative;
		min-height: 650px;
		height: 100vh;
		max-height: 1000px;
		width: 100%;
		background-repeat: no-repeat;
		animation-duration: 3.5s;
		opacity: 1;
	}
	.story h2 {
	
		margin: 0 0 2rem;
	}
	.stats {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
		padding: 1rem;
		margin: 2rem 0;
		width: 100%;
	}
		.stats p {
			text-align: center;
			font-size: 1.5rem;
			margin: 0;
			padding: 0 1.5rem;
			width: 48%;
		}
			#discover .stats p {
				color: #007CC2;
			}
			#lead .stats p {
				color: #41C3DC;
			}
			#care .stats p {
				color: #91268F;
			}
			#reach .stats p {
				color: #F58326;
			}
		p .stats-number {
			font-family: 'Roboto', arial;
			font-size: 3rem;
			font-weight: 800;
		}
			#discover .divider {
				border-right: 2px solid #007cc2;
			}
			#lead .divider {
				border-right: 2px solid #41C3DC;
			}
			#care .divider {
				border-right: 2px solid #91268F;
			}
			#reach .divider {
				border-right: 2px solid #F58326;
			}

/*****************************
 * BANNER & ACCORDION STYLES *
 ****************************/

.banner {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 6rem 4rem;
	border-bottom: 1px solid #fff;
}

.headline {
		z-index: 999;
		width: 75%;
	}

.banner h2 {
	width: 40%;
	z-index: 998;
	margin: 0;
	padding: 0;
	line-height: 1.1em;
}

.banner p {
	width: 40%;
	z-index: 997;
	font-size:1.3em;
	color: #fff;
	font-family: 'Karla', sans-serif;
}

p.read-more {
	display: flex;
	align-items: center;
	z-index: 999;
	border: 2px solid #fff;
	padding: 0.5em 1.5rem;
	margin: 0;
	text-transform: uppercase;
	color: #fff;
}
	p.read-more:hover {
		background-color: #fff;
	}
	p.read-more .fa {
		margin: 0 0.5em;
	}
	a.open-section {
		text-decoration: none;
	}
 	.open-section,
 	.close-section {
 		cursor: pointer;
 	}
 	.close-section {
 		text-decoration: none;
 		text-align: center;
 		font-weight: 400;
 		font-size: 1.5em;
 		text-transform: uppercase;
	}
	.close-section p {
		margin: 0.5em 3em;
		padding: 0;
		color: #fff; 
	}
	.close-section .fa {
		margin: 0 0.2em;
	}
	.story {
		position: relative;
		width: 100%;
	}
	.story-content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		overflow: hidden;
		flex-wrap: wrap;
		width: 100%;
		height: 0;
		padding: 0;
		margin: 0;
	}
		.story-content * {
			height: 0;
			overflow: hidden;
		}

	.story-content.open { /* JS Open Section */
		padding: 4em 10%;
		height: auto;
	}
		.story-content.open * { /* JS Open Section */
			height: auto;
		}
	#treating-autism-through-tech-content:target,
	#casebook-lightens-weight-related-convo-content:target,
	#from-client-to-career-minded-content:target,
	#hero-with-or-without-cape-content:target,
	#client-centred-care-content:target,
	#parents-applaud-infant-hand-prosthetic-content:target,
	#hb-delivers-hip-check-content:target,
	#brothers-bond-over-battling-robots-content:target,
	#HB-parents-teach-inclusive-101-content:target {  /* CSS Open Section - if JS fails to load*/
		height: auto;
		padding: 4em 10%;
	}
		#treating-autism-through-tech-content:target *,
		#casebook-lightens-weight-related-convo-content:target *,
		#from-client-to-career-minded-content:target *,
		#hero-with-or-without-cape-content:target *,
		#client-centred-care-content:target *,
		#parents-applaud-infant-hand-prosthetic-content:target *,
		#hb-delivers-hip-check-content:target *,
		#brothers-bond-over-battling-robots-content:target *,
		#HB-parents-teach-inclusive-101-content:target *  { /* CSS Open Section - if JS fails to load */
			height: auto;
		}

		.story-content article {
			margin: 3em;
			width: 55%;
		}
			.story-content article img {
				margin: 0.75em 0;
				width: 100%;
			}
			.story-content figcaption {
				font-style: italic;
				color: #636466;
			}
		.story-content aside {
			position: relative;
			width: 22%;
			margin: 3em 2em;
		}
			.story-tweet {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 1rem;
				margin: 0 0 2rem;
				/*border: 1px solid blue;*/
			}
				div.story-tweet p {
					margin: 1rem 0;
					padding: 0;
					/*border: 1px solid red;*/
				}
				.story-tweet .fa {
					margin: 0 1rem;
				}
				#discover .story-tweet {
					color: #007cc2;
					border: 2px solid #007cc2;
				}
					#discover .story-tweet p {
						color: #007cc2;
					}
					#discover .story-tweet:hover,
					#discover .story-tweet:hover p {
						color: #fff;
						background-color: #007cc2;
					}
				
				#lead .story-tweet {
					color: #41C3DC;
					border: 2px solid #41C3DC;
				}
					#lead .story-tweet p {
						color: #41C3DC;
					}
					#lead .story-tweet:hover,
					#lead .story-tweet:hover p {
						color: #fff;
						background-color: #41C3DC;
					}
				#care .story-tweet {
					color: #91268f;
					border: 2px solid #91268f;
				}
					#care .story-tweet p {
						color: #91268f;
					}
					#care .story-tweet:hover,
					#care .story-tweet:hover p {
						color: #fff;
						background-color: #91268f;
					}
				#reach .story-tweet {
					color: #F58326;
					border: 2px solid #F58326;
				}
					#reach .story-tweet p {
						color: #F58326;
					}
					#reach .story-tweet:hover,
					#reach .story-tweet:hover p {
						color: #fff;
						background-color: #F58326;
					}
					
			.story-content aside img {
				width: 100%;
				margin: 0 0 1.5em;
				padding: 1em 0 0;
/*				border-top: 1px solid #636466;
*/			}
			.story-content aside a {
				width: 100%;
				font-family: 'Karla', sans-serif;
				font-size: 1.1em;
				color: #636466;
				text-decoration: none;
			}
			.story-content aside a:hover,
			.story-content aside a p:hover {
				color: #000;
			}
			.story-content aside a.other-links {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-between;
			}
			.story-content aside a.other-links p {
				font-size: 0.9em;
				padding: 0.5em 0;
				width: 75%;
				margin: 0;
			}
			.story-content aside .fa-arrow-circle-o-right {
				width: 20%;
				text-align: right;
				padding: 0.15em 0;
			}

	.toggle-close {
		text-decoration: none;
		display: inline-block;
		text-align: center;
		vertical-align: center;
		font-size: 2em;
		font-weight: bold;
		color: #fff;
		margin: 1em;
		height: 2em;
		width: 2em;
		border: 5px solid #fff;
		border-radius: 50%;
	}


/*
 ****************
 * DISCOVER STYLES
 ****************
 */

	#discover p.read-more:hover,
	#discover h3,
	#discover .story h2,
	#discover .story article a {
		color: #007CC2;
	}
	#treating-autism-through-tech,
	#casebook-lightens-weight-related-convo, 
	#discover .close-section {
		background-color: #007CC2;
	}



/*
 ****************
 * CARE STYLES
 ****************
 */

	#care p.read-more:hover,
	#care h3,
	#care .story h2,
	#care .story article a {
		color: #91268F;
	}
	#parents-applaud-infant-hand-prosthetic,
	#hb-delivers-hip-check,
	#care .close-section {
		background-color: #91268F;
	}



/*
 ****************
 * LEAD STYLES
 ****************
 */
	
	#lead p.read-more:hover,
	#lead h3,
	#lead .story h2,
	#lead .story article a {
		color: #41C3DC;
	}
	#from-client-to-career-minded,
	#hero-with-or-without-cape,
	#client-centred-care,
	#lead .close-section {
		background-color: #41C3DC;
	}


/*
 ****************
 * REACH STYLES
 ****************
 */

	#reach p.read-more:hover,
	#reach h3,
	#reach .story h2,
	#reach .story article a {
		color: #F58326;
	}
	#brothers-bond-over-battling-robots,
	#HB-parents-teach-inclusive-101,
	#reach .close-section {
		background-color: #F58326;
	}



/*
 ****************
 * 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);
				}
		#hbf-logo {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			margin: 0 1em 1em;
		}
			#hbf-logo img {
				width: 18rem;
			}
			#charity-reg p {
				font-size: 0.7rem;
				margin: 1em 0 0;
			}
			
		div#social {
			display:flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: flex-end;
			font-size: 2em;
			margin: 0.25em 1em 1em;
		}
			
			#social a:hover {
				transform: translate(0,5px);
			}
			#social p {
				font-size: 0.7rem;
				margin: 0.25em;
				text-align: right;
			}
/*
 **********************
 ******* MEDIA QUERIES
 **********************
 */


@media only screen and (max-width: 1200px) {
	
	.headline {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		background-color: rgba(0,0,0, 0.8);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 1rem 0;
	}
		.banner h2 {
			width: 80%;
			font-size: 3rem;

		}
		.banner p {
			width: 80%;
			font-size: 1.1em;
		}
			.story-content article,
			.story-content aside {
				width: 100%;
				margin: 2em;
			}
			.story-content aside a p {
				font-size: inherit;
			}
}

@media only screen and (max-width: 1100px) {
	#hb-logo,
	#hbf-logo,
	div#social {
/* 		width: 100%;
 */		align-items: center;
	}
		div#social p {
			text-align: center;
		}
	
}

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

	h1 {
		font-size: 6em;
	}
	h2 {
		font-size: 3.5em;
	}
	#main-header {
		flex-direction: column;
	}
		.nav-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 4.6em;
			border-bottom: 1px solid #ddd;
		}
		#nav-bars {
			display: flex;
			width: 10%;
		}
			.fa-bars {
				display: block;
			}
		nav#main-navigation-menu {
			flex-direction: column;
			width: 100%;
			height: 0;
			margin: 0;
			overflow: hidden;
			border-bottom: 1px solid #aaa;
		}
			nav#main-navigation-menu * {
				height: 0; 
			}
		nav#main-navigation-menu.open {
			height: auto;
		}
			#main-navigation-menu.open * {
				height: auto;
			}
			#main-navigation-menu.open ul {
				border-bottom: 1px solid #ddd;
				flex-direction: column;
				align-items: stretch;
				width: 100%;
				text-align: center;
			}
			#main-navigation-menu.open li {
				width: 100%;
				height: 4.5em;
			}
			
			#discover-menu:hover #discover-stories,
			#lead-menu:hover #lead-stories,
			#care-menu:hover #care-stories,
			#reach-menu:hover #reach-stories {
				display: none;
			}

 	#message > img {
 		width: 130%;
 	}
		#message div {
	 		width: 80%;
	 	}
	
	
	#treating-autism-through-tech,
 	#casebook-lightens-weight-related-convo,
 	#hb-delivers-hip-check,
 	#parents-applaud-infant-hand-prosthetic,
 	#from-client-to-career-minded,
	#hero-with-or-without-cape,
	#client-centred-care,
	#brothers-bond-over-battling-robots,
	#HB-parents-teach-inclusive-101 {
		animation-name: none;
	}
	
	#hb-logo,
	#hbf-logo,
	div#social {
 		width: 100%;

	}
	#hbf-logo {
		margin-top: 1em;
	}
		div#social {
			margin-top: 0.75em;
		}
}

@media only screen and (max-width: 680px) {
	#message p {

	}
	#signature {
		flex-direction: column;
		align-items: center;
		padding: 0;
	}
		#signature p {
			width: 100%;
			text-align: center;
			margin: 0 0.75em;
			padding: 0;
		}
		#signature img.larger {
			transform-origin: bottom;
		}
	div#employer-awards {
		flex-direction: column;
		margin: 2em 0;
	}
	 		img.c10ma {
	 			transform: translateX(0) scale(1.3);
	 		}
	 		img.gtatop {
	 			transform: translateX(0) scale(0.75);
	 		}
	 		img.catopyoung {
	 			transform: scale(0.75);
	 		}
	.stats {
		padding: 1rem 0;
	}
		.stats p {
			padding: 0 0.25rem;
			font-size: 1rem;
		}
		p .stats-number {
			font-size: 1.5rem;
		}
}
@media only screen and (max-width: 420px) {
		.banner h2 {
			font-size: 2.5rem;
		}
	}
	
@media only screen and (max-height: 600px) {
	.nav-box {
		height: 3.5em;
	}
/*  	nav#main-navigation-menu.open {
		height: auto;
		overflow-y: scroll;
		padding: 100px 0 50px; *
	} */
	#main-navigation-menu.open ul {
		min-height: 3em;
		height: 3em;
	}
	#main-navigation-menu.open li {
		min-height: 3.5em;
		height: 3em;
	}

}
@media only screen and (max-height: 460px) {
 	nav#main-navigation-menu.open {
		height: 100vh;
		overflow-y:scroll;
		padding: 50px 0 75px;
	}

}
@media only screen and (max-height: 400px) {
 	nav#main-navigation-menu.open {
		padding: 100px 0 75px;
	}

}
@media only screen and (max-height: 360px) {
 	nav#main-navigation-menu.open {
		padding: 150px 0 75px;
	}

}
@media only screen and (max-height: 300px) {
 	nav#main-navigation-menu.open {
		padding: 200px 0 75px;
	}

}