/*
 ****************
 * NUMBERS STYLES
 ****************
 */

#numbers {
	padding: 4.5rem 0 0;
	width: 100%;
	max-width: 1920px;
	overflow:hidden;
}
#numbers .banner {
	background-color: #53bb50;
	height: 600px;
}
	#numbers .banner h2 {
		width: 100%;
		margin: 0;
		text-align: left;
	}
	
	
	.major-row {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: space-around;
		width: 100%;
	}
		.two-column {
			width: 50%;
		}
			.two-row-cell {
				height: 49%;
			}
			.two-column-cell {
				display: flex;
				flex-direction: row;
			}
	.data-number {
		font-family: 'Amatic SC', cursive;
		font-size: 5rem;
		font-weight: bold;
	}
	.three-column-data,
	.four-column-data {
		width: 100%;
	}
		.three-column-data p,
		.four-column-data p {
			margin: 0rem 0.75rem;
			text-align: center;
		}
		.three-column-data p {
			width: 25%;
		}
		.four-column-data p {
			width: 20%;
		}


/****** ARTICLES - shared styles ******/

	#who-we-serve header h2,
	#who-we-are header h2,
	#impact-goes-here header h2 {
		margin: 1rem 0 0;
		padding: 4rem;
		font-size: 8rem;
		text-align: center;
	}
		#total-clients,
		#diagnoses-total,
		#common-diagnoses,
		#length-of-stay,
		#three-or-more-diag,
		#complexity-of-clients,
		#where-patients-come-from,
		#ages-of-clients,
		#ages-of-clients-data,
		#family-income,
		#staff-count,
		#volunteer-count,
		#student-count,
		#top-40-research,
		#family-leaders,
		#scientist-count,
		#research-student-count,
		#flu-vaccination-rate,
		#presentations,
		#satisfaction-rate,
		#bloom-readership,
		#family-support-fund,
		#family-resource-centre,
		#parent-education-workshops {
			position: relative;
			padding: 1rem;
			margin: 0.25rem;
			animation-duration: 2s;
			opacity: 1;
		}
		#total-clients,
		#diagnoses-total,
		#length-of-stay,
		#three-or-more-diag,
		#complexity-of-clients,
		#where-patients-come-from,
		#ages-of-clients,
		#family-income,
		#student-count,
		#scientist-count,
		#parent-education-workshops {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
			#total-clients p,
			#diagnoses-total p,
			#lenth-of-stay p,
			#three-or-more-diag p,
			#total-clients h3,
			#diagnoses-total h3,
			#common-diagnoses h3,
			#length-of-stay h3,
			#three-or-more-diag h3,
			#complexity-of-clients h3 {
				color: #fff;
			}
		
		#common-diagnoses,
		#complexity-of-clients,
		#ages-of-clients-data,
		#family-income-data,
		#top-40-research,
		#family-leaders,
		#research-student-count,
		#flu-vaccination-rate,
		#presentations,
		#satisfaction-rate,
		#bloom-readership {
			display: flex;
			flex-direction: column;
			align-items: center;
			
		}
			#common-diagnoses div,
			#complexity-of-clients div,
			#student-breakdown div {
				display: flex;
				flex-direction: row;
				justify-content: center;
				flex-wrap: wrap;
			}


/*
 **********************
 * WHO WE SERVE Article
 **********************
 */

#who-we-serve header {
	background-color: #007CC2;
}

	#total-clients,
	#diagnoses-total,
	#common-diagnoses,
	#length-of-stay,
	#three-or-more-diag,
	#complexity-of-clients,
	#where-patients-come-from,
	#ages-of-clients,
	#ages-of-clients-data,
	#family-income {
		border: 4px solid #007CC2;
	}

/****** WHO WE SERVE - Total Clients unique styles ******/
			
		#total-clients {
			background-color: #53bb50;
		}
			#total-clients div {
				text-align: center;
				margin: 0 1rem;
			}
			#total-clients div:nth-of-type(1) {
				border-right: 2px solid #fff;
				padding-right: 2rem;
			}
			#total-clients img {
				margin: 0 1rem 0 2rem;
				width: 150px;
				max-width: 30%;
				max-height: 80%;
			}

/****** WHO WE SERVE - Diagnoses Total unique styles ******/

		#diagnoses-total {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #41C3DC;
		}
			#diagnoses-total div {
				text-align: center;
				margin: 0 1rem;
			}
			#diagnoses-total div:nth-of-type(1) {
				border-right: 2px solid #fff;
				padding-right: 2rem;
			}
			#diagnoses-total img {
				margin: 0 0 0 2rem;
				max-width: 30%;
				transform: scale(1) rotate(20deg);
			}

/****** WHO WE SERVE - Common Diagnoses unique styles ******/
		
				#common-diagnoses h2 {
					color: #53bb50;
					margin: 1rem 0;
					text-align: center;
					width: 100%;
				}
					#common-diagnoses h3 {
						width: 100%;
						text-align: center;
						color: #53bb50;
						background: url("../assets/doodles/numbers-03.svg") no-repeat center;
					}
				#common-diagnoses .data-number {
					color: #53bb50;
				}

/****** WHO WE SERVE - Length of Stay unique styles ******/

		#length-of-stay {
			background-color: #B2BC00;
		}
			#length-of-stay h2 {
				font-size: 8rem;
				margin: 0 6rem 0 0;
			}
			#length-of-stay h3 {
				font-size: 3rem;
				transform: translate(0, 25px);
				text-align: center;
			}
			#length-of-stay figure {
				transform: translate(-135px, 0) scale(1.5);
				color: #fff;
			}


/****** WHO WE SERVE - Three or More & Complexity unique styles ******/

		#three-or-more-diag,
		#complexity-of-clients h3 {
			background-color: #00C2E2;
		}
			#three-or-more-diag img {
				margin: 0 4rem;
				transform: scale(1.5);
			}
			#complexity-of-clients h3 {
				width: 100%;
				margin: 0;
				padding: 1rem;
				text-align: center;
			}
			#complexity-of-clients .data-number {
				color: #00C2E2;
			}

/****** WHO WE SERVE - Where They Come From unique styles ******/

		#where-patients-come-from {
			overflow: hidden;

		}
			#where-patients-come-from h2 {
				transform: translate(0,70px);
				font-size: 5rem;
				width: 40rem;
				color: #007CC2;
			}
			#where-patients-come-from img {
				transform: scale(1.5);
				margin: 0;
				padding: 0;
				height: 110%;
				width: 110%;
			}
			#where-patients-come-from ul {
				position: absolute;
				bottom: 13%;
				left: 41%;
				width: 20em;
				list-style-type: none;
				font-family: 'Karla', sans-serif;
			}
				#where-patients-come-from .counter {
					font-weight: bold;
					font-size: 115%;
					margin-left: 0.5rem;
				}
				.central-east .fa {
					color: #FFB60F;
				}
				.central .fa {
					color: #00C2E2;
				}
				.toronto-central .fa {
					color: #007DC2;
				}
				.central-west .fa {
					color: #FF5F00;
				}
				.mississauga-halton .fa {
					color: #962399;
				}
				.other-lhin .fa {
					color: #B2BC00;
				}

/****** WHO WE SERVE - Ages of Clients unique styles ******/

		#ages-of-clients {
			background-color: #007DC2; 
		}
			#ages-of-clients h2 {
				font-size: 8rem;
				text-align: center;
			}
		#ages-of-clients-data {
			align-items: flex-start;
		}
			#ages-of-clients-data div {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 0 2rem;
				margin: 0.2rem 0;
				border-radius: 15%;
				color: #fff;
			}
			#ages-of-clients-data h3 {
				margin: 1rem;
			}		
			#ages-of-clients-data .data-number {
				font-size: 4rem;
			}
				#fifteen-more-yrs {
					width:100%;
					background-color: #962399; 
				}
				#ten-fourteen-yrs {
					width:81%;
					background-color: #53bb50;
				}
				#six-nine-yrs {
					width:77%;
					background-color: #FF5F00;
				}
				#three-five-yrs {
					width:85%;
					background-color: #007DC2;
				}
				#zero-two-yrs {
					width:42%;
					background-color: #00C2E2;
				}


/****** WHO WE SERVE - Family Income unique styles ******/

		#family-income {
			justify-content: space-between;
		}
			div.two-column {
				text-align: center;
			}
			#family-income h2{
				color: #53bb50;
				font-size: 5rem;
				margin: 1rem 0;
			}
			#family-income img {
				width: 60%;
			}
			#family-income-data h3 {
				color: #636466;
				font-weight: 400;
				margin: 0 1rem;
				text-align: left;
			}		
				#family-income-data h3#low {
					width: 60%;
					padding: 1rem 0.5rem;
					background-color: #962399;
					color: #fff;
				}
				#family-income-data h3#low-mid {
					
					width: 40%;
					padding: 1rem 0.5rem;
					background-color: #53bb50;
					color: #fff;
				}
				#family-income-data h3#mid {
					width: 30%;
					padding: 1rem 0.5rem;
					background-color: #FF5F00;
					color: #fff;
				}
				#family-income-data h3#mid-high {
					width: 34%;
					padding: 1rem 0.5rem;
					background-color: #007DC2;
					color: #fff;
				}
				#family-income-data h3#high {
					width: 38%;
					padding: 1rem 0.5rem;
					background-color: #00C2E2;
					color: #fff;
				}
			#family-income-data div {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 0;
				margin: 0;
				width: 90%;
			}
				#family-income-data .data-number {
					font-size: 3.5rem;
					color: #53bb50;
				}

/*
 ********************
 * WHO WE ARE Article
 ********************
 */

#who-we-are header {
	background-color: #FF5F00;
}
	#staff-count,
	#volunteer-count,
	#student-count,
	#top-40-research,
	#family-leaders,
	#scientist-count,
	#research-student-count,
	#flu-vaccination-rate,
	#presentations {
		border: 4px solid #FF5F00;
	}
	#top-40-research,
	#family-leaders,
	#flu-vaccination-rate,
	#presentations {
		background-color: #FF5F00;
	}
		#staff-count h2,
		#volunteer-count h2,
		#student-count h2,
		#student-breakdown .data-number,
		#scientist-count h2,
		#research-student-count h2,
		#scientist-count h3,
		#research-student-count h3 {
			color: #FF5F00;
			margin: 0;
		}
		
		#staff-count h3,
		#volunteer-count h3,
		#student-count h3 {
			margin: 0;
			color: #636466;
		}
		#family-leaders h3,
		#top-40-research h3,
		#flu-vaccination-rate h3,
		#presentations h3 {
			color: #fff;
		}



/****** WHO WE ARE - Staff and Volunteer Count unique styles ******/
		
		#staff-count,
		#volunteer-count {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

/****** WHO WE ARE - Student Count unique styles ******/
		
		#total-students {
			border-right: 2px solid #FF5F00;
			padding-right: 2rem;
		}
		#student-breakdown {
			margin-left: 1rem;
		}

/****** WHO WE ARE - Top 40 Research and Family Leaders unique styles ******/
		
		#family-leaders h2,
		#top-40-research h2 {
			font-size: 8rem;
			margin: 2rem 0 0;
		}
		#top-40-research img {
			margin: 2rem;
		}

/****** WHO WE ARE - Scientists and Research STudents unique styles ******/

		#total-scientists {
			margin: 0 2rem;
			text-align: left;
		}
		#scientist-count h2,
		#research-student-count h2 {
			font-size: 8rem;
		}
		#scientist-breakdown,
		#research-student-breakdown {
			align-items: flex-start;
			text-align: left;
			margin: 1rem 0;
		}
		#scientist-breakdown div,
		#research-student-breakdown div {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			padding: 0;
			margin: 0;
			width: 100%;
		}
		#scientist-breakdown .counter,
		#research-student-breakdown .counter {
			margin: 0 1rem 0 0;
		}
		#scientist-breakdown h3,
		#research-student-breakdown h3 {
			font-size: 1.25rem;
		}
			/*#scientist-breakdown div h3,
			#research-student-breakdown div h3 {
				align-items: flex-start;
			}*/
			
/****** WHO WE ARE - Vaccination and Presentations unique styles ******/

		#flu-vaccination-rate h2,
		#presentations h2 {
			font-size: 8rem;
			margin: 2rem 0 0;
		}

/*
 *******************************
 * FAMILY IMPACT Article
 *******************************
 */

#impact-goes-here header {
	background-color: #962399;
}
	#satisfaction-rate,
	#parent-education-workshops {
		color:#fff;
		background-color: #962399;
	}
		#parent-education-workshops h2, 
		#parent-education-workshops h3 {
			margin: 0;
			color: #fff;
		}
	#bloom-readership {
		color: #962399;
	}
	#satisfaction-rate,
	#bloom-readership,
	#family-support-fund,
	#family-resource-centre,
	#parent-education-workshops {
		border: 4px solid #962399;
	}
		#satisfaction-rate h2{
			font-size: 8rem;
			margin: 0;
		}
		#satisfaction-rate h3 {
			width: 100%;
		}
		
		#bloom-readership h2 {
			color: #962399;
			font-size: 8rem;
			margin: 0;
		}
	#family-support-fund h2,
	#family-resource-centre h2 {
		color: #962399;
		margin: 0;
	}
	#family-support-fund h3,
	#family-resource-centre h3 {
		margin: 0;
		color: #962399;
	}
		#parent-education-workshops-copy h3 {
			text-align: left;
			margin: 0 2rem;
		}



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

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

	#numbers .banner h2 {
		margin: 0;
		font-size: 4rem;
		text-align: center;
	}
	/****** WHO WE SERVE - Where They Come From unique styles ******/

			#where-patients-come-from h2 {
				font-size: 3.5rem;
				width: 25rem;
			}
	
		#scientist-breakdown h3,
		#research-student-breakdown h3 {
			font-size: 1.1rem;
		}
}

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

	/****** WHO WE SERVE - Length of Stay unique styles ******/

			#length-of-stay h2 {
				font-size: 6.5rem;
				margin: 0 4rem 0 0;
			}
			#length-of-stay h3 {
				font-size: 2rem;
				transform: translate(35px, 0px);
				text-align: center;
			}
			#length-of-stay figure {
				transform: translate(-90px, -10px) scale(1);
			}

	/****** WHO WE SERVE - Where They Come From unique styles ******/

			#where-patients-come-from h2 {
				transform: translate(0,0px);
				font-size: 4rem;
				width: 100%;
				position: absolute;
				bottom:0;
				right: 0;
				color: #fff;
				text-align: center;
				margin: 0;
				padding: 1rem;
				background-color: rgba(0,0,0,0.8);
			}
			#where-patients-come-from img {
				transform: scale(1.5);
				margin: 0;
				padding: 0;
				height: 110%;
				width: 110%;
			}
			#where-patients-come-from ul {
				bottom: 125px;
				right: 10px;
				left: initial;
				width: 20em;
				
			}

	/****** WHO WE SERVE - Family Income unique styles ******/


			#family-income h2{
				font-size: 5rem;
			}

			#family-income-data h3 {
				font-size: 1.25rem;
			}		
				#family-income-data .data-number {
					font-size: 3rem;
				}	
/* } */

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

	.major-row {
		flex-direction: column;
		align-items: center;
	}
		.two-column {
			width: 100%;
		}

	/****** WHO WE SERVE - Three or More & Complexity unique styles ******/

			#three-or-more-diag img {
				transform: scale(1);
			}
  	
  	/****** WHO WE SERVE - Where They Come From unique styles ******/

			#where-patients-come-from ul {
				bottom: auto;
				top: 10px;
				right: 10px;
				color: #fff;
				padding: 1rem;
				background-color: #000;
				opacity: 0.8;
			}

	/****** WHO WE SERVE - Length of Stay unique styles ******/
		#length-of-stay {
			flex-direction: column;
			align-items: center;
		}
			#length-of-stay h2 {
				font-size: 6.5rem;
				text-align: center;
				margin:0;
			}
			#length-of-stay h3 {
				font-size: 2.5rem;
				transform: translate(-10px, 120px);
				text-align: center;
			}
			#length-of-stay figure {
				transform: translate(0, -100px) scale(1.25);
				
			}
			
			/* #length-of-stay h3 {
				font-size: 2rem;
				transform: translate(35px, 0px);
				text-align: center;
			}
			#length-of-stay figure {
				transform: translate(-90px, -10px) scale(1);
			} */

	/****** WHO WE SERVE - Family Income unique styles ******/

			#family-income {
				flex-direction: column;
			}
			#family-income img {
				margin: 2rem 1rem;
			}
			
	#scientist-breakdown h3,
		#research-student-breakdown h3 {
			font-size: 1.25rem;
		}
}

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

/****** WHO WE SERVE - Where They Come From unique styles ******/

			#where-patients-come-from h2 {
				font-size: 2.5rem;
			}
			#where-patients-come-from ul {
				top: 0px;
				right: 0px;
				width: 15rem;
			}
			#where-patients-come-from .hide {
				display: none;
			}
			
/****** WHO WE SERVE - Ages-of-Clients unique styles ******/

			#ages-of-clients-data div {
				font-size: 0.9rem;
				padding: 0 0.5rem;
			}
			#ages-of-clients-data h3 {
				margin: 1rem 0.25rem;
			}		
			#ages-of-clients-data .data-number {
				font-size: 2.5rem;
			}
			
		#scientist-breakdown h3,
		#research-student-breakdown h3 {
			font-size: 1.1rem;
		}
}
@media only screen and (max-width: 580px) {
		#total-clients,
		#diagnoses-total,
		#length-of-stay,
		#three-or-more-diag,
		#complexity-of-clients,
		#where-patients-come-from,
		#ages-of-clients,
		#family-income,
		#student-count,
		#scientist-count,
		#parent-education-workshops {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
			#total-clients div:nth-of-type(1),
			#diagnoses-total div:nth-of-type(1)	{
				border-right: 0px;
				border-bottom: 2px solid #fff;
				padding-right: 0rem;
			}
			#diagnoses-total img {
				margin: 4rem 0rem;
			}
		.three-column-data p {
			width: 100%;
		}
		.four-column-data p {
			width: 100%;
		}
		.two-column-cell {
			display: flex;
			flex-direction: column;
			width: 98%;
		}
		#where-patients-come-from ul,
		#where-patients-come-from h2 {
				position:static;
			}
		#length-of-stay h2,
		#ages-of-clients h2,
		#family-income h2 {
			width: 100%;
		}
		
		
	/****** WHO WE ARE - Student Count unique styles ******/
		#staff-count {
			width: 100%;
		}
		#total-students {
			border-right: 0px solid #FF5F00;
			border-bottom: 2px solid #FF5F00;
			padding-right: 0;
			padding-bottom: 2em;
			margin-bottom: 2em;

		}
		#student-breakdown {
			margin-left: 0rem;
		}
		#top-40-research h3,
		#flu-vaccination-rate h3,
		#family-support-fund,
		#family-resource-centre {
			width: 100%;
		}
		
}