/*
 ****************
 * FINANCIALS STYLES
 ****************
 */
#financials {
	padding: 4.5rem 0 0;
	width: 100%;
	max-width: 1920px;
	overflow:hidden;
}
#financials header {
	background-color: #53bb50;
	height: 600px;
}
	#financials .banner h2 {
		width: 100%;
		text-align: left;
	}
	#financials h3 {
		font-family: 'Karla', sans-serif;
	}
	

/*
 **********************
 * FINANCIAL STATEMENTS
 **********************
 */
	
#financial-statements {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	margin: 1rem 0;
	padding: 2rem 6rem 0 6rem;
}
	#financial-statements .fin-statement-button {
		padding: 1rem;
		color: #fff;
		margin: 1rem 2rem;
		text-decoration: none;
		background-color: #007CC2;
		border: 2px solid #007CC2;
		text-align: center;
	}
		#financial-statements .fin-statement-button:hover {
			color: #007CC2;
			background-color: #FFF;
		}
	#financial-statements a {
		
		font-weight: bold;
		text-decoration: none;
		
	}
	#financial-statements h3 {
		padding: 0;
	}
	
	
/*
 ****************
 * FINANCIAL DATA
 ****************
 */

	#financial-data {
		display: flex;
		flex-direction: row;
		align-items: top;
		justify-content: space-around;
		width: 100%;
		padding: 0 4rem;
		margin: 0;
	}
		
		#hospital-funds,
		#foundation-funds {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			padding: 1rem 2rem 2rem;
			width: 50%;
			overflow: hidden;
		}
		#hospital-funds div,
		#foundation-funds div {
			width: 100%;
		}
		#hospital-funds h3,
		#foundation-funds h3 {
			color: #333;
			width: 100%;
			margin: 4rem 0;
			font-family: 'Amatic SC', cursive;
			font-size: 3em;
		}
		#hospital-funds h4,
		#foundation-funds h4 {
			margin-top: 0;
		}
			#hospital-funds-spend {
				margin: 2rem 0 0;
			}
				#hospital-funds-source-content, 
				#hospital-funds-spend-content,
				#foundation-funds-source-content,
				#foundation-funds-grant-content {
					position: relative;
					display: flex;
					flex-direction: row;
					align-items: center;
					flex-wrap: wrap;
					animation-duration: 2s;
					opacity: 1;
				}
	.legend {
		list-style-type: none;
		max-width: 60%;
		font-family: 'Karla', sans-serif;
		padding: 0;
	}
		.legend li {
			margin: 0.5em 0;
		}
		.legend li .fa {
			margin-right: 1em;
		}
			.legend li:nth-of-type(1) .fa {
				color: #53bb50;
			}
			.legend li:nth-of-type(2) .fa {
				color: #007CC2;
			}
			.legend li:nth-of-type(3) .fa {
				color: #F58326;
			}
			.legend li:nth-of-type(4) .fa {
				color: #91268F;
			}
			.legend li:nth-of-type(5) .fa {
				color: #41C3DC;
			}
			.legend li:nth-of-type(6) .fa {
				color: #FCB21E;
			}

	.pie-chart {
		position: relative;
		height: 190px;
		max-width: 40%;
		margin-bottom: 1rem;
		/*border: 1px solid green;*/
	}
		.pie-chart svg {
			position: absolute;
			top:0;
			left:0;
			width: 190px;
			height: 190px;
			border-radius: 50%;
		}
			circle {
				fill: #fff;
				fill-opacity: 0;
				stroke-width: 31.7;
			}
			text {
				font-size: 13%; 
				fill: #fff;
			}
				.pie-chart svg:nth-of-type(1) circle {
					stroke: #53bb50;
				}
				.pie-chart svg:nth-of-type(2) circle {
					stroke: #007CC2;
				}
				.pie-chart svg:nth-of-type(3) circle {
					stroke: #F58326;
				}
				.pie-chart svg:nth-of-type(4) circle {
					stroke: #91268F;
				}
				.pie-chart svg:nth-of-type(5) circle {
					stroke: #41C3DC;
				}
				.pie-chart svg:nth-of-type(6) circle {
					stroke: #FCB21E;
				}

/****** PIE - Where do hospital funds come from? ******/

					.government.hosp-source circle {
						stroke-dasharray: 67 100;
					}
					svg.government.hosp-source {
						transform: rotate(0deg);
					}
					.donor.hosp-source circle {
						stroke-dasharray: 9 100;
					}
					svg.donor.hosp-source {
						transform: rotate(240deg) translate(10px, 2px);
					}
					.client.hosp-source circle {
						stroke-dasharray: 9 100;
					}
					svg.client.hosp-source {
						transform: rotate(273deg) translate(25px, -1px);
					}
					.other.hosp-source circle {
						stroke-dasharray: 8 100;
					}
					svg.other.hosp-source {
						transform: rotate(307deg) translate(15px, -10px);
					}
					.grants.hosp-source circle {
						stroke-dasharray: 5 100;
					}
					svg.grants.hosp-source {
						transform: rotate(336deg) translate(5px, -10px);
					}
					.invest.hosp-source circle {
						stroke-dasharray: 2 100;
					}
					svg.invest.hosp-source {
						transform: rotate(355deg) translate(2px, -6px);
					}

/****** PIE - Where do we spend hospital funds? ******/

					.care.hosp-spend circle {
						stroke-dasharray: 63 100;
					}
					svg.care.hosp-spend {
						transform: rotate(0deg);
					}

					.admin.hosp-spend circle {
						stroke-dasharray: 13 100;
					}
					svg.admin.hosp-spend {
						transform: rotate(226deg) translate(10px, 10px);
					}

					.clinical-client.hosp-spend circle {
						stroke-dasharray: 11 100;
					}
					svg.clinical-client.hosp-spend {
						transform: rotate(273deg) translate(25px, 7px);
					}

					.research.hosp-spend circle {
						stroke-dasharray: 11 100;
					}
					svg.research.hosp-spend {
						transform: rotate(312deg) translate(15px, 0px);
					}

					.pd.hosp-spend circle {
						stroke-dasharray: 2 100;
					}
					svg.pd.hosp-spend {
						transform: rotate(353deg) translate(4px, -4px);
					}

/****** PIE - Where do foundation funds come from? ******/

					.giving.found-source circle {
						stroke-dasharray: 20 100;
					}
					svg.giving.found-source {
						transform: rotate(2deg) translate(10px, 0px);
					}
					.events.found-source circle {
						stroke-dasharray: 20 100;
					}
					svg.events.found-source{
						transform: rotate(75deg) translate(5px, 0px);
					}
					.corporations.found-source circle {
						stroke-dasharray: 19 100;
					}
					svg.corporations.found-source {
						transform: rotate(145deg) translate(0px, 5px);
					}
					.foundations.found-source circle {
						stroke-dasharray: 18 100;
					}
					svg.foundations.found-source {
						transform: rotate(213deg) translate(10px, 15px);
					}
					.individuals.found-source circle {
						stroke-dasharray: 16 100;
					}
					svg.individuals.found-source {
						transform: rotate(278deg) translate(10px, 5px);
					}
					.bequests.found-source circle {
						stroke-dasharray: 7 100;
					}
					svg.bequests.found-source {
						transform: rotate(336deg) translate(15px, 0px);
					}

/****** PIE - How do we grant foundation funds? ******/

					.research.found-grant circle {
						stroke-dasharray: 31 100;
					}
					svg.research.found-grant {
						transform: rotate(2deg) translate(10px, 0px);
					}
					.care.found-grant circle {
						stroke-dasharray: 19 100;
					}
					svg.care.found-grant{
						transform: rotate(112deg) translate(-5px, 0px);
					}
					.institute.found-grant circle {
						stroke-dasharray: 17 100;
					}
					svg.institute.found-grant {
						transform: rotate(180deg) translate(0px, 15px);
					}
					.teaching-learning.found-grant circle {
						stroke-dasharray: 15 100;
					}
					svg.teaching-learning.found-grant {
						transform: rotate(240deg) translate(10px, 15px);
					}
					.participation.found-grant circle {
						stroke-dasharray: 10 100;
					}
					svg.participation.found-grant {
						transform: rotate(295deg) translate(15px, 8px);
					}
					.community.found-grant circle {
						stroke-dasharray: 8 100;
					}
					svg.community.found-grant {
						transform: rotate(333deg) translate(15px, 2px);
					}

/*
 ******************
 * EXTERNAL FUNDING
 ******************
 */

 	#external-research-fund,
 	#external-research-fund-data {
 		opacity: 1;
 		animation-duration: 2s;
			padding: 1rem 2rem 2rem;

 	}
	#external-funding div.major-row {
		flex-direction: column;
		text-align: center;
		align-items: center;
		justify-content: center;
	}

		#external-research-fund {
			background-color: #007DC2; 
			position: relative;
			padding: 1rem;
			margin: 0.25rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
		}
			#external-research-fund h2 {
				font-size: 6rem;
				text-align: center;
				margin: 0;
				line-height: 1em
			}
			
			#external-research-fund h2 {
				text-align: center;
			}
		
			#external-research-fund-data {
			align-items: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex-wrap: wrap;
			width: 100%;
		}
			#external-research-fund-data div {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				padding: 0 2rem;

			}
			#external-research-fund-data h3 {
				margin: 0 1rem;
				font-size: 1.3rem;
				text-align: left;
				color: #000;
				text-align: center;
			}
				#external-research-fund-data .data-number {
					font-size: 1.5rem;
				}

					
			#external-research-fund .data-number {
				font-size: 4rem;
				
			}
			#external-research-fund-data div {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: transparent;
				/* width: 20rem;
				height: 20rem; */
				
				padding: 0.5rem;
				margin: 0;
				text-align: center;
				width: 90%;
				/* background-image: url("/wp-content/themes/wordpress_starter_theme-master/assets/doodles/numbers-12.svg");
				background-repeat: no-repeat;
				background-position: center top; */
			}
			#external-research-fund-data div h3:nth-of-type(1) {
				width: 100%;
			}
			
				
				h3#federal-fund {
					width:100%;
					background-color:#007DC2;
					color: #fff;
					padding: 1em;
					margin: 0.5em 0;
				}
				h3#donations-fund{
					width:100%;
					background-color:#007DC2;
					color: #fff;
					padding: 1em;
					margin: 0.5em 0;
				}
				h3#provincial-fund {
					width:96%;
					background-color:#007DC2;
					color: #fff;
					padding: 1em;
					margin: 0.5em 0;
				}
				h3#foundation-fund {
					width:48%;
					background-color:#007DC2;
					color: #fff;
					padding: 1em;
					margin: 0.5em 0;
				}
							
				h3#subgrant-fund {
					width:43%;
					background-color:#007DC2;
					color: #fff;
					padding: 1em;
					margin: 0.5em 0;
				}
				h3#awards-fund {
					width:17%;
					background-color:#007DC2;
					color: #fff;
					padding: 1em 0;
					margin: 0.5em 0;
				}
				h3#indirect-fund {
					width:17%;
					background-color:#007DC2;
					color: #fff;
					padding: 1em 0;
					margin: 0.5em 0;
				}
				h3#studentship {
					/* width:4%;
					background-color:#007DC2;
					color: #fff; */
					padding: 1em 0;
					margin: 0.5em 0;
					color:#007DC2;
				}
				h3#royalties {
					/* width:4%;
					background-color:#007DC2;
					color: #fff; */
					padding: 1em 0;
					margin: 0.5em 0;
					color:#007DC2;
				}
				h3#other-peer-reviewed {
					/* width:4%;
					background-color:#007DC2;
					color: #fff; */
					padding: 1em 0;
					margin: 0.5em 0;
					color:#007DC2;
				}
				h3#industry-fund {
					/* width:1.3%;
					background-color:#007DC2;
					color: #fff; */
					padding: 1em 0;
					margin: 0.5em 0;
					color:#007DC2;
				}
				
				h3#international-fund {
					/* width: 0.4%; */
					/* background-color:#007DC2; */
					/* color: #fff; */
					padding: 1em 0;
					margin: 0.5em 0;
					color:#007DC2;
				} 
				
				
		


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


@media only screen and (max-width: 1300px) {
	#hospital-funds-source-content {
	}
	.legend,
	.pie-chart {
		max-width: 100%;
	}
	.pie-chart {
		height: 300px;
	}
		.pie-chart svg {
			height: 300px;
			width: 300px;
		}
	.legend {
		margin-left: 2rem;
	}
	#financials header {
		background-size: 400px;
	}
	#external-funding div.major-row {
		flex-direction: column;
		text-align: center;
		justify-content: center;
	}
		div#external-research-fund,
		div#external-research-fund-data {
			width: 100%;
			padding: 1rem 2rem 2rem;
		}
}



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

	#financials .banner h2 {
		margin: 0;
		font-size: 4rem;
		text-align: center;
	}
}	

@media only screen and (max-width: 900px) {
	#financial-statements {
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
	#financial-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 0 4rem;
		margin: 0;
	}
		#hospital-funds,
		#foundation-funds {
			align-items: center;
			width: 100%;
		}
		#hospital-funds {
			padding-bottom: 1rem;
		}
			#hospital-funds h3,
			#foundation-funds h3 {
				text-align: center;
				margin: 3rem 0 4rem;
			}
			#hospital-funds h4,
			#foundation-funds h4 {
				margin-left: 1.75rem;
			}

				#hospital-funds-spend {
					margin: 0;
				}
					#hospital-funds-source-content,
					#hospital-funds-spend-content,
					#foundation-funds-source-content,
					#foundation-funds-grant-content {
						display: flex;
						flex-direction: column;
						align-items: center;
					}
		.pie-chart {
			max-width: 325px;
		}
	#external-funding div.major-row {
		flex-direction: column;
		align: center;
		justify-content: center;
	}
		div#external-research-fund,
		div#external-research-fund-data {
			width: 100%;
			padding: 1rem 2rem 2rem;
		}
}

@media only screen and (max-width: 480px) {
	#financial-data {
		padding: 0 2rem;
	}
			#hospital-funds h3,
			#foundation-funds h3 {
				margin: 2rem 0 3rem;
			}
			#hospital-funds h4,
			#foundation-funds h4 {
				margin-left: 0;
			}

		.pie-chart {
			height: 200px;
		}
			.pie-chart svg {
				height: 200px;
				width: 200px;
			}
}

@media only screen and (max-width: 320px) {
		.pie-chart {
			height: 150px;
		}
			.pie-chart svg {
				height: 150px;
				width: 150px;
			}
	}