/*
	Theme Name: Coalition for Sound Schools
	Theme URI: https://www.coalitionforsoundschools.org
	Description: Custom Wordpress theme for Coaltion for Sound Schools
	Version: 2.0
	Author: Eric Richards
	Author URI: http://4-mile.com
	Tags: HTML5, CSS3, jQuery, custom, mobile, responsive

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

html,body {
	width: 100%;
   }
body {
	padding: 0;
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 42px;
	color: #475664;
 	background: #ffffff;
 	-webkit-font-smoothing: antialiased;
	}
img {
	padding: 0; 
	margin: 0;
	border: 0;
	}
a,
a:active {
	color: #f4be18;
	text-decoration: none;
	outline: none;
    transition: all 0.2s linear;
    }
a:visited {
	color: #8cc63f;
	text-decoration: none;
	outline: none;
    transition: all 0.2s linear;
   	}
a:hover {
	color: #f4be18;
	text-decoration: none;
	outline: none;
    transition: all 0.2s linear;
   	}
ul {
	padding: 0 0 30px 15px;
	margin: 0;
	list-style: url(images/bullet.png);
	}
ul li {
	padding: 0 0 10px 0;
	margin: 0;
	float: none;
	}
ol {
	padding: 0 0 30px 15px;
	margin: 0;
	}
ol li {
	padding: 0 0 10px 0;
	margin: 0;
	float: none;
	}
p {
	padding: 0 0 30px 0;
	margin: 0;
	}
b,
strong {
	font-weight: 700;
	}
hr {
	margin: 60px 0 30px 0;
	border: none;
	border-top: 1px solid #8b999a;
	text-align: left;
	}
	hr.line-short {
		margin: 20px 0 40px 0;
		}
h1 {
 	padding: 0 0 20px 0;
	margin: 0;
	font-weight: 400;
	font-size: 45px;
	line-height: 45px;
	color: #475664;
	text-transform: uppercase;
	}
h2 {
 	padding: 0 0 20px 0;
	margin: 0;
	font-weight: 400;
	font-size: 40px;
	line-height: 40px;
	color: #475664;
	text-transform: uppercase;
	}
h3 {
 	padding: 0 0 20px 0;
	margin: 0;
	font-weight: 400;
	font-size: 31px;
	line-height: 33px;
	color: #475664;
	text-transform: uppercase;
	}
h4 {
 	padding: 0 0 20px 0;
	margin: 0;
	font-weight: 400;
	font-size: 28px;
	line-height: 38px;
	color: #475664;
	text-transform: uppercase;
	}
	h4.subhead {
		margin-top: 40px;
		}
.learn-more {
	display: inline-block;
	margin: 10px 30px 40px 0;
	padding: 19px 30px 19px 30px;
	border-radius: 10px;
	font-size: 22px;
	line-height: 22px;
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
    transition: all 0.4s linear;
	}
	.learn-more:hover {
		color: #aaa;
		transition: all 0.4s linear;
		}	


/* -------------------------------------------------------------------------------------------------------------- */
/* css for site structure ----------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------------- */

.container {
	position: relative;
	padding: 100px 5% 58px 5%;
	margin: 0 auto 0 auto;
	width: 90%; 
	max-width: 1170px;
  	}
.desktop {
	display: inherit;
	}
.mobile {
	display: none;
	}


/* -------------------------------------------------------------------------------------------------------------- */
/* css for header ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

#header {
	position: relative;
	top: 0;
	width: 100%;
	height: 215px;
	z-index: 1;
	}
	#logo {
		position: absolute;
		top: 0; 
		left: 20px;
		padding: 25px 0 0 0;
		width: 380px;
		transition: all 0.2s linear;
		}
		#logo img {
			width: 100%;
			height: auto;
			}
			
			
/* -------------------------------------------------------------------------------------------------------------- */
/* css for nav -------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

#mainnav { 
	position: absolute;
	top: 35px; 
	right: 10px;
	display: inherit;
	width: 80%;
	height: 46px;
	font-size: 20px;
	line-height: 24px;
	}
	#mainnav ul {
		padding: 0 0 0 0;
		margin: 0;
		list-style: none;
		float: right;
		}
	#mainnav ul li {
		position:relative;
		padding: 0 10px 0 10px;
		margin: 0;
		height: 30px;
		float: left;
		}
	#mainnav ul li a {
		display: block;
		text-decoration: none;
		color: #fff;
		font-weight: 700;
		text-align: center;
		text-transform: uppercase;
		transition: all 0.3s linear;
		}
		#mainnav ul li:nth-of-type(1) a {
			color: #f58220;
			}
		#mainnav ul li:nth-of-type(2) a {
			color: #8cc63f;
			}
		#mainnav ul li:nth-of-type(3) a {
			color: #f4be18;
			}
		#mainnav ul li:nth-of-type(4) a {
			color: #00b5e1;
			}
		#mainnav ul li:nth-of-type(5) a {
			color: #df1b50;
			}
		#mainnav ul li:nth-of-type(6) a {
			color: #614fa1;
			}
		#mainnav ul li:nth-of-type(1) a:hover,
		#mainnav ul li:nth-of-type(2) a:hover,
		#mainnav ul li:nth-of-type(3) a:hover,
		#mainnav ul li:nth-of-type(4) a:hover,
		#mainnav ul li:nth-of-type(6) a:hover,
		#mainnav a:hover {
			color: #df1b50;
			text-decoration: none;
			transition: all 0.3s linear;
			}
		#mainnav ul li:nth-of-type(5) a:hover {
			color: #8cc63f;
			text-decoration: none;
			transition: all 0.3s linear;
			}
		

/* -------------------------------------------------------------------------------------------------------------- */
/* css for hero ------------------------------------------------------------------------------------------------ */
/* -------------------------------------------------------------------------------------------------------------- */

.slides {
	position: relative;
	margin: -215px 0 0 0;
	padding: 0;
	z-index: 0;
	}
.slide {
	position: relative;
	font-size: 0;
	line-height: 0;
	}
	.slide img {
		width: 100%;
		height: auto;
		}
.slide-text {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 80%;
	max-width: 1170px;
	padding: 30px 35px 30px 35px;
	-webkit-transform: translate(-50%, -35%);
	transform: translate(-50%, -35%);
	z-index: 9;
	background: #000;
	border-radius: 10px;
	}	
	.slide-text h1 {
		padding: 0;
		color: #fff;
		text-transform: uppercase;
		}

.banner {
	position: relative;
	margin: -215px 0 0 0;
	background-repeat: none;
	background-size: cover;
	background-position: center top;
	height: 815px;
	}
	.banner-news {
		height: 640px;
		}
	.banner .container {
		height: 815px;
		}
		.banner-news .container {
			height: 640px;
			}
	.banner .banner-text {
		position: absolute;
		bottom: 200px;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		padding: 30px 35px 30px 35px;
		background: #000;
		border-radius: 10px;
		}	
	.banner-text h1 {
		padding: 0;
		color: #fff;
		text-transform: uppercase;
		}

.photo-carousel {
	font-size: 0px;
	line-height: 0px;
	}

.photo-credit {
	display: none;
	position: absolute;
	padding: 10px 30px 10px 10px;
	bottom: 40px;
	left: 15px;
	max-width: 200px;
	font-size: 14px;
	line-height: 16px;
	color: #00b5e1;
	font-weight: 700;
	background: #fff;
	z-index: 10;
	}

.caption-btn {
	position: absolute;
	bottom: 15px;
	left: 15px;
	color: #fff;
	font-size: 14px;
	line-height: 16px;
	font-weight: 600;
	font-style: italic;
	cursor: pointer;
	}	



/* -------------------------------------------------------------------------------------------------------------- */
/* css for blocks ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.photo {
	margin: 0;
	padding: 0;
	}
.photo li {
	position: relative;
	display: block;
	width: 49%;
	padding: 0;
	margin: 0;
	list-style: none;
	float: left;
	font-size: 18px;
	line-height: 18px;
	}
	.photo li:nth-of-type(1) {
		margin: 35px 1% 80px 0;
		}
	.photo li:nth-of-type(2) {
		margin: 35px 0 80px 1%;
		}
	.photo li img {
		width: 100%;
		margin-bottom: 5px;
		height: auto;
		border-radius: 10px;
		}

.tiles {
	display: inline-block;
	margin: 20px 0 20px 0;
	padding: 0;
	}
.tiles li {
	position: relative;
	display: block;
	border-radius: 10px;
	padding: 20px 2%;
	width: 45%;
	height: 330px;
	list-style: none;
	float: left;
	line-height: 26px;
	}
	.tiles li:nth-of-type(odd) {
		margin: 0 1% 25px 0;
		}
	.tiles li:nth-of-type(even) {
		margin: 0 0 25px 1%;
		}
	.tiles li:nth-of-type(4n + 1) {
		background: #f4be18;
		color: #000;
		}	
	.tiles li:nth-of-type(4n + 2) {
		background: #8cc63f;
		color: #000;
		}	
	.tiles li:nth-of-type(4n + 3) {
		background: #00b5e1;
		color: #000;
		}	
	.tiles li:nth-of-type(4n) {
		background: #f58220;
		color: #000;
		}	
	.tiles li h3 {
		padding: 0 0 10px 0;
		color: #000;
		font-weight: 700;
		}
	.tiles li .date {
		position: absolute;
		bottom: 20px;
		left: 4%;
		color: #fff;
		font-weight: 700;
		}
	.tiles li a {
		position: absolute;
		bottom: 20px;
		right: 4%;
		color: #fff;
		font-weight: 700;
		}

.bio-section {
	background: #475664;
	color: #fff;
	}
	.bio-section .container {
		padding: 30px 5% 90px 5%;
		}
	.bio {
		position: relative;
		padding: 65px 0 25px 0;
		width: 100%;
		border-bottom: 1px solid #8cc63f;
		}
	.bio-line { 
		margin: 0 0 70px 0;
		border-top: 1px solid #8cc63f;
		}	
	.bio:nth-of-type(4n + 1) h3 {
		color: #f4be18;
		}	
	.bio:nth-of-type(4n + 2) h3 {
		color: #8cc63f;
		}	
	.bio:nth-of-type(4n + 3) h3 {
		color: #00b5e1;
		}	
	.bio:nth-of-type(4n) h3 {
		color: #f58220;
		}	

	
.approach {
	position: relative;
	padding: 25px 0 15px 0;
	width: 100%;
	border-bottom: 1px solid #00b5e1;
	}
	.approach-line { 
		margin: 50px 0 10px 0;
		border-top: 1px solid #00b5e1;
		}	
	.approach-icon {
		display: inline-block;
		vertical-align: middle;
		width: 15%;
		}
		.approach-icon img {
			width: 100%;
			height: auto;
			max-width: 150px;
			}
	.approach-text {
		display: inline-block;
		vertical-align: middle;
		width: 84%;
		}
		.approach-text h4 {
			padding; 0;
			color: #fff;
			}
	.approach-clear { 
		margin: 100px 0 0 0;
		clear: both;
		font-size: 0;
		line-height: 0;
		}	
	
	
/* -------------------------------------------------------------------------------------------------------------- */
/* css for numbered list ---------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.list-item {
	display: block;
	padding: 40px 0 30px 0;
	border-bottom: 1px solid #00b5e1;
	}
	.list-container .list-item:last-of-type {
		margin-bottom: 50px;
		}
	.left-list {
		display: inline-block;
		width: 10%;
		vertical-align: top;
		padding: 20px 0 20px 0;
		border-radius: 10px;
		font-size: 140px;
		line-height: 120px;
		font-weight: 500;
		text-align: center;
		color: #fff !important;
		}
	.right-list {
		display: inline-block;
		width: 85%;
		padding-left: 2%;
		}
		.right-list h4 {
			color: #fff;
			}
	hr.line-list {
		margin: 0px 0 0px 0;
		}
	
	
/* -------------------------------------------------------------------------------------------------------------- */
/* css for windowshade ------------------------------------------------------------------------------------------ */
/* -------------------------------------------------------------------------------------------------------------- */

.winshade {
	position: relative;
	margin: 0 0 0 0;
	background: #666;
	}
	.winshade .container {
		padding: 100px 5% 100px 5%;
		}
	.winshade hr {
		margin: 0px 0 10px 0;
		}	
	.winshade-question {
		position: relative;
		padding: 70px 0 70px 0;
		width: 100%;
		border-bottom: 1px solid #8cc63f;
		}
		.winshade-question h3 {
			padding: 0 0 5px 0;
			margin: 0;
			font-weight: 700;
			}
	.winshade-answer {
		margin: 0 auto;
		padding: 25px 0 0 0;
		display: none;
		}
	.winshade-answer p {
		padding: 0 0 30px 0;
		}
	.plus {
		position: absolute;
		right: 0;
		top: 68px;
		cursor: pointer;
		text-transform: uppercase;
		}
	.minus {
		display: none;
		position: absolute;
		right: 0;
		top: 68px;
		cursor: pointer;
		text-transform: uppercase;
		}


/* -------------------------------------------------------------------------------------------------------------- */
/* css for news ------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.news-intro h2 {
	padding-bottom: 50px;
	}
.news-post .container {
	padding: 85px 5% 68px 5%;
	}	
.news-post h2 {
	padding: 0 0 40px 0;
	}	
.news-post .date {
	padding: 0 0 40px 0;
	font-weight: 700;
	}	
.news-post .author {
	padding: 0 0 75px 0;
	font-weight: 700;
	}	
.news-post p {
	padding: 0 0 40px 0;
	}	
.news-post hr {
	margin: 50px 0 85px 0;
	border-top: 1px solid #fff;
	}	
.news-post-in-house hr {
	margin: 50px 0 45px 0;
	}	
.news-post-in-house a:visited,
.news-post-in-house a {
	color: #f4be18;
	}	
.news-post-in-house .back-to-news {
	margin-top: 63px;
	}
.about-author {
	margin: 0 0 60px 0;
	line-height: 32px;
	}		

/* -------------------------------------------------------------------------------------------------------------- */
/* css for photo background ------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.photo-background {
	position: relative;
	margin: 0 0 0 0;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 800px;
	color: #fff;
	}
.photo-background-contain {
	position: relative;
	margin: 0 0 0 0;
	background-repeat: no-repeat; 
	background-size: contain; 
	background-position: center bottom; 
	width: 100%; 
	min-height: 1470px;
	}
	.photo-background h2 {
		padding: 0 0 40px 0;
		color: #fff;
		}
	.photo-text {
		position: absolute;
		right: 5%;
		width: 40%;
		}


/* -------------------------------------------------------------------------------------------------------------- */
/* css for photo numbers ---------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.numbers {
	line-height: 29px;
	text-align: center;
	}
	.numbers h2 {
		font-size: 120px;
		line-height: 115px;
		padding: 0 0 30px 0;
		font-weight: 300;
		}
	.numbers .superintendent {
		font-size: 18px;
		line-height: 21px;	
		padding: 0 0 20px 0;	
		}
	.col5 {
		float: left;
		padding: 0 1% 20px 1%;
		width: 18%;
		}
	.col4 {
		float: left;
		padding: 0 1% 20px 1%;
		width: 23%;
		}
		.numbers .col4 h2 {
			font-size: 150px;
			line-height: 122px;
			padding: 0 0 15px 0;
			}
	.col3 {
		float: left;
		padding: 0 1% 20px 1%;
		width: 31%;
		}
	
		
/* -------------------------------------------------------------------------------------------------------------- */
/* css for contact with WP Forms overrides ---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.contact-form .container {
	padding-top: 75px;
	}
input[type='tel'],
input[type='email'],
input[type='text'] {
	padding: 0 0 0 3% !important;
	margin: 0 3% 15px 0 !important;
	width: 94% !important;
	height: 48px !important;
	border: 1px solid #475664 !important;
	border-radius: 5px !important;
	background: #fff !important;
	outline: none !important;
	font-size: 18px !important;
	line-height: 20px !important;
	color: #475664 !important;
	}
::placeholder { 
	color: #475664 !important;
	opacity: .5 !important; 
	}
#wpadminbar	input[type='text'] {
	display: none !important;
	}
	
input[type='submit'],	
.wpforms-submit {	
	padding: 19px 30px 19px 30px !important;
	margin: 30px 30px 20px 0 !important;
	width: auto !important;
	height: auto !important;
	border: 1px solid #fff !important;
	border-radius: 10px !important;
	text-align: center !important;
	text-transform: uppercase;
	font-size: 22px !important;
	line-height: 22px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	background: #df1b50 !important;
	color: #fff !important;
	transition: all 0.4s linear !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	}
	input[type='submit']:hover,	
	.wpforms-submit:hover {
		background: #fff !important;
		color: #df1b50 !important;
		border: 1px solid #df1b50 !important;
		}
textarea {
	vertical-align: top !important;
	padding: 10px 0 3px 3% !important;
	margin: 0 0 11px 0 !important;
	height: 120px !important;
	width: 94% !important;
	border-radius: 5px !important;
	border: 1px solid #475664 !important;
	outline: none !important;
	background: #fff !important;
	font-size: 20px !important;
	line-height: 24px !important;
	color: #475664 !important;
	transition: all 0.2s linear !important;
	}		
select {
	padding: 0 60px 0 10px !important;
	margin: 0 1% 25px 0 !important;
	width: auto !important;
	height: 45px !important;
	border-radius: 0 !important;
	border: 1px solid #000 !important;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url('images/arrow-down.png') !important;
	background-position: right 10px center !important;
	background-repeat: no-repeat !important;
	background-size: 17px 15px !important;
	cursor: pointer;
	font-family: 'Poppins', sans-serif !important;
	font-size: 18px !important;
	line-height: 22px !important;
	font-weight: 400 !important;
	color: #8b8b8b !important;
	transition: all 0.2s linear !important;
	}
	
.small-font {
	padding: 0 0 40px 0 !important;
	font-size: 16px !important;
	line-height: 20px !important;
	}
	
input[type=checkbox] + label {
	display: block !important;
	margin: 0 0 5px 0 !important;
	cursor: pointer !important;
	font-size: 22px !important;
	line-height: 32px !important;
	color: #fff !important;
	}
input[type=checkbox] {
	display: none !important;
	}
input[type=checkbox] + label:before {
	content: " " !important;
	background: transparent !important;
	border: 1px solid #fff !important;
	display: inline-block !important;
	font-size: 24px !important; 
	line-height: 24px !important;
	width: 22px !important;
	height: 23px !important;
	padding: 2px 0 0 3px !important;
	margin-right: 10px !important;
	margin-left: 0 !important;
	margin-bottom: 3px !important;
	vertical-align: middle !important;
	color: transparent !important;
	transition: .2s !important;
	color: #fff !important;
	}
input[type=checkbox] + label:active:before {
	transform: scale(0) !important;
	}
input[type=checkbox]:checked + label:before {
	content: "\2713" !important;
	color: #fff !important;
	}
	
#prefooter input[type=checkbox] + label {
	color: #475664 !important;
	}
#prefooter input[type=checkbox] + label:before {
	border: 1px solid #000 !important;
	}
#prefooter input[type=checkbox]:checked + label:before {
	color: #475664 !important;
	}

.wpforms-field-select {
	clear: both !important;
	float: none !important;
	display: block !important;
	width: 100% !important;
	}
.wpforms-field-label {
	padding-bottom: 0 !important;
	margin-bottom: 2px !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 700 !important;
	font-size: 22px !important;
	line-height: 42px !important;
	color: #fff !important;
	}
.wpforms-container {
	margin-top: 0 !important;
	}
.wpforms-field-text,
.wpforms-field {
	display: inline-block !important;
	width: 24% !important;
	margin: 0 !important;
	padding: 0 !important;
	}
.wpforms-field-textarea {
	display: block !important;
	width: 100% !important;
	}	
.wpforms-field-checkbox ul,
.wpforms-field-checkbox ul li,
.wpforms-field-checkbox checkbox,
.wpforms-field-checkbox {
	width: 100% !important;
	float: none !important;
	display: block !important;
	padding: 0 !important;
	margin-left: 0 !important;
	}	
.wpforms-field-label-inline {
	color: #475664 !important;
	}
#wpforms-76-field_12-container {
	margin-top: 30px !important; /* add space between checkboxes and textarea */
	}
#wpforms-58-field_4-container,
#wpforms-76-field_4-container {	
	width: 50% !important;
	margin: 0 0 30px 0 !important;
	padding: 0 !important;
	}
#wpforms-58-field_6-container {
	display: none !important
	}	
.wpforms-one-half {
	width: 52% !important;
	margin: -30px 0 0 0 !important;
	padding: 0 !important;
	}
.wpforms-first {
	width: 48% !important;
	margin: -30px 0 0 0 !important;
	padding: 0 !important;
	}
.wpforms-one-half input {
	padding: 0 0 0 3% !important;
	margin: 0 3% 15px 0 !important;
	width: 88% !important;
	max-width: 264px !important;
	}	
.wpforms-first input {
	padding: 0 0 0 3% !important;
	margin: 0 3% 15px 0 !important;
	width: 94% !important;
	}	
.grecaptcha-badge { visibility: hidden; }
	
		
/* -------------------------------------------------------------------------------------------------------------- */
/* css for footer ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

#footer {
	position: relative;
	width: 100%;
	margin: 0 0 0 0;
	min-height: 800px;
	font-size: 22px;
	line-height: 42px;
	font-size: 12px;
	line-height: 16px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
	background-image: url(images/footer.jpg);
	}
	.contact-footer {
		min-height: 1200px !important;
		}
	#footer .container {
		padding: 0 5% 100px 5%;
		}
	#footer .contact-container {
		padding: 50px 5% 100px 5%;
		}
	#footer .contact-container hr {
		margin-bottom: 100px;
		}
	#footer .footer-logo {
		float: left;
		width: 40%;
		max-width: 320px;
		}
	.contact-form a:visited,
	.contact-form a,
	#prefooter a:visited,
	#prefooter a,
	#footer a:visited,
	#footer a {
		color: #f58220;
		font-weight: 700;
		}	
	#footer .menu-main-container {
		float: right;
		width: 40%;
		}		
	#footer ul {
		padding: 0;
		margin: 0 0 30px 0;
		list-style: none;
		}
	#footer ul li {
		display: block;
		padding: 0 0 2px 0;
		margin: 0;
		font-size: 20px;
		line-height: 24px;
		text-align: right;
		}
		#footer ul li:nth-of-type(1) a {
			color: #f58220;
			}
		#footer ul li:nth-of-type(2) a {
			color: #8cc63f;
			}
		#footer ul li:nth-of-type(3) a {
			color: #f4be18;
			}
		#footer ul li:nth-of-type(4) a {
			color: #00b5e1;
			}
		#footer ul li:nth-of-type(5) a {
			color: #df1b50;
			}
		#footer ul li:nth-of-type(6) a {
			color: #614fa1;
			}
		#footer ul li:nth-of-type(1) a:hover,
		#footer ul li:nth-of-type(2) a:hover,
		#footer ul li:nth-of-type(3) a:hover,
		#footer ul li:nth-of-type(4) a:hover,
		#footer ul li:nth-of-type(6) a:hover,
		#footer a:hover {
			color: #df1b50;
			text-decoration: none;
			transition: all 0.3s linear;
			}
		#footer ul li:nth-of-type(5) a:hover {
			color: #8cc63f;
			text-decoration: none;
			transition: all 0.3s linear;
			}
	#footer ul li a {
		color: #f58220;
		font-weight: 700;
		text-transform: uppercase;
		transition: all 0.3s linear;
		}
	#footer ul li a:hover {
    	transition: all 0.3s linear;
		color: #ccc;
		}
	#footer .copyright {
		margin: 0;
		float: right;
		text-align: right;
		width: 200px;
		}

		
/* -------------------------------------------------------------------------------------------------------------- */
/* css for colors ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.bg-green {
	background: #8cc63f;
	color: #000;
	}	
	.bg-green h2,
	.bg-green h3 {
		color: #000;
		}
.bg-orange {
	background: #f58220;
	color: #fff;
	}
	.bg-orange h2,
	.bg-orange h3 {
		color: #fff;
		}
.bg-blue {
	background: #00b5e1;
	color: #fff;
	}
	.bg-blue h2,
	.bg-blue h3 {
		color: #fff;
		}
.bg-yellow {
	background: #f4be18;
	color: #000;
	}
	.bg-yellow h2,
	.bg-yellow h3 {
		color: #000;
		}
.bg-black {
	background: #000;
	color: #fff;
	}
	.bg-black h2,
	.bg-black h3 {
		color: #fff;
		}	
.bg-red {
	background: #df1b50;
	color: #fff;
	}
	.bg-red h2,
	.bg-red h3 {
		color: #fff;
		}
.bg-purple {
	background: #614fa1;
	color: #fff;
	}
	.bg-purple h2,
	.bg-purple h3,
	.bg-purple h4 {
		color: #fff;
		}
.bg-gray {
	background: #475664;
	color: #fff;
	}
	.bg-gray h2,
	.bg-gray h3 {
		color: #fff;
		}
.bg-white {
	background: #fff;
	color: #000;
	}
	.bg-white h2,
	.bg-white h3 {
		color: #000;
		}
h2.text-green,
h3.text-green,
.text-green {
	color: #8cc63f;
	}
h2.text-blue,
h3.text-blue,
.text-blue {
	color: #00b5e1;
	}
h2.text-orange,
h3.text-orange,
.text-orange {
	color: #f58220;
	}
h2.text-yellow,
h3.text-yellow,
.text-yellow {
	color: #f4be18;
	}
h2.text-red,
h3.text-red,
.text-red {
	color: #df1b50;
	}
h2.text-purple,
h3.text-purple,
.text-purple {
	color: #614fa1;
	}
h2.text-gray,
h3.text-gray,
.text-gray {
	color: #475664;
	}
h2.text-black,
h3.text-black,
.text-black {
	color: #000;
	}
a.btn-red {
	background: #df1b50;
	color: #fff;
	}
	a.btn-red:visited {
		color: #fff;
		}
	a.btn-red:hover {
		background: #fff;
		color: #df1b50;
		}
a.btn-yellow {
	border: 1px solid #f4be18;
	background: #f4be18;
	color: #fff;
	}
	a.btn-yellow:visited {
		color: #fff;
		}
	a.btn-yellow:hover {
		background: #fff;
		color: #f4be18;
		}
a.btn-orange {
	background: #f58220;
	color: #fff;
	}
	a.btn-orange:visited {
		color: #fff;
		}
	a.btn-orange:hover {
		background: #fff;
		color: #f58220;
		}
a.btn-blue {
	background: #00b5e1;
	color: #fff;
	}
	a.btn-blue:visited {
		color: #fff;
		}
	a.btn-blue:hover {
		background: #fff;
		color: #00b5e1;
		}
a.btn-purple {
	background: #614fa1;
	color: #fff;
	}
	a.btn-purple:visited {
		color: #fff;
		}
	a.btn-purple:hover {
		background: #fff;
		color: #614fa1;
		}
a.btn-green {
	background: #8cc63f;
	color: #fff;
	}
	a.btn-green:visited {
		color: #fff;
		}
	a.btn-green:hover {
		background: #fff;
		color: #8cc63f;
		}
a.btn-white-red {
	background: #fff;
	color: #df1b50;
	}
	a.btn-white-red:visited {
		color: #df1b50;
		}
	a.btn-white-red:hover {
		background: #df1b50;
		color: #fff;
		}
a.btn-white-yellow {
	background: #fff;
	color: #f4be18;
	}
	a.btn-white-yellow:visited {
		color: #f4be18;
		}
	a.btn-white-yellow:hover {
		background: #f4be18;
		color: #fff;
		}
a.btn-white-blue {
	background: #fff;
	color: #00b5e1;
	}
	a.btn-white-blue:visited {
		color: #00b5e1;
		}
	a.btn-white-blue:hover {
		background: #00b5e1;
		color: #fff;
		}
a.btn-white-purple {
	background: #fff;
	color: #614fa1;
	}
	a.btn-white-purple:visited {
		color: #614fa1;
		}
	a.btn-white-purple:hover {
		background: #614fa1;
		color: #fff;
		}
hr.line-green {
	border-top: 1px solid #8cc63f;
	}
hr.line-blue {
	border-top: 1px solid #00b5e1;
	}
.circle-red {
	margin: -3px 5px 0 0;
	display: inline-block;
	vertical-align: middle;
	background: #df1b50;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	}
.circle-yellow {
	margin: -3px 5px 0 0;
	display: inline-block;
	vertical-align: middle;
	background: #f4be18;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	}
.circle-orange {
	margin: -3px 5px 0 0;
	display: inline-block;
	vertical-align: middle;
	background: #f58220;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	}
.circle-blue {
	margin: 0 5px 0 0;
	display: inline-block;
	background: #00b5e1;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	}
.circle-purple {
	margin: -3px 5px 0 0;
	display: inline-block;
	vertical-align: middle;
	background: #614fa1;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	}
.circle-green {
	margin: -3px 5px 0 0;
	display: inline-block;
	vertical-align: middle;
	background: #8cc63f;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	}
.circle-teal {
	margin: -3px 5px 0 0;
	display: inline-block;
	vertical-align: middle;
	background: #0cc58e;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	}
.circle-aqua {
	margin: -3px 5px 0 0;
	display: inline-block;
	vertical-align: middle;
	background: #58fffd;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	}


/* -------------------------------------------------------------------------------------------------------------- */
/* css for misc items --------------------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------------------------------------------- */

.clear {
	clear: both;
	font-size: 0px;
	line-height: 0px;
	}
.alignright {
	margin: 10px 0 10px 20px;
	float: right;
	}
.alignleft {
	margin: 10px 20px 10px 0;
	float: left;
	}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
.mobile {
	display: none;
	}
.text-center {
	text-align: center;
	}
.spacer {
	margin-bottom: 40px;
	}
.basic-page h4 {
	margin-top: 20px;
	}
		

/* -------------------------------------------------------------------------------------------------------------- */
/* css for animations ------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.animation-element {
	position: relative;
	transition: .6s all ease;
	}
.slow {
	transition: 1.2s all ease;
	}
.delay1 {
	-webkit-transition-delay: .1s; 
    transition-delay: .1s;
	}
.delay2 {
	-webkit-transition-delay: .2s; 
    transition-delay: .2s;
	}
.delay3 {
	-webkit-transition-delay: .3s; 
    transition-delay: .3s;
	}
.delay4 {
	-webkit-transition-delay: .4s; 
    transition-delay: .4s;
	}
.delay5 {
	-webkit-transition-delay: .5s; 
    transition-delay: .5s;
	}
.delay6 {
	-webkit-transition-delay: .6s; 
    transition-delay: .6s;
	}
.delay7 {
	-webkit-transition-delay: .7s; 
    transition-delay: .7s;
	}
.delay8 {
	-webkit-transition-delay: .8s; 
    transition-delay: .8s;
	}
.delay9 {
	-webkit-transition-delay: .9s; 
    transition-delay: .9s;
	}
.delay10 {
	-webkit-transition-delay: 1.0s; 
    transition-delay: 1.0s;
	}
.delay11 {
	-webkit-transition-delay: 1.1s; 
    transition-delay: 1.1s;
	}
.delay12 {
	-webkit-transition-delay: 1.2s; 
    transition-delay: 1.2s;
	}
.delay13 {
	-webkit-transition-delay: 1.3s; 
    transition-delay: 1.3s;
	}
.fade-in {
	opacity: 0;
	}
.fade-in.in-view {
	opacity: 1;
	}
.slide-left {
	opacity: 0;
	-webkit-transform: translateX(120px);
	-ms-transform: translateX(120px);
	transform: translateX(120px);
	}
.slide-right {
	opacity: 0;
	-webkit-transform: translateX(-120px);
	-ms-transform: translateX(-120px);
	transform: translateX(-120px);
	}
.slide-up {
	opacity: 0;
	-webkit-transform: translateY(120px);
	-ms-transform: translateY(120px);
	transform: translateY(120px);
	}
.slide-left.in-view,
.slide-right.in-view,
.slide-up.in-view {
	opacity: 1;
	-webkit-transform: translate3d(0, 0 , 0);
	-ms-transform: translate3d(0, 0 , 0);
	transform: translate3d(0, 0 , 0);
	}
.grow {
	opacity: 0;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);
	}
.grow.in-view {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	}
.text-highlight {
	color: inherit;
	}
.text-highlight.in-view {
	color: #34a31f;
	}
.rotate {
	opacity: 0;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);   
	transform: rotateY(180deg);
	display: inline-block;
	}
	
	

/* Bar Graph Horizontal */
.demo-graph {
	float: left;
	width: 45%;
	}
	.demo-left {
		float: left;
		width: 50%;
		}
	.demo-right {
		float: left;
		width: 50%;
		font-size: 18px;
		line-height: 30px;
		}
		.stat7 {
			margin-top: 25px;
			}
.circle-graph {
	float: left;
	width: 55%;
	}
	.circle-text {
		position: absolute; 
		top: 19%; 
		right: 6%; 
		z-index: 9; 
		font-weight: 900; 
		font-size: 28px;
		}
	.mypiechart {
		margin-right: 10px;
		position: relative;
		display: inline-block;
		line-height: 30px;
		text-align: center;
		}
	.circle-graph .mypiechart #myCanvas1 {
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);   
		transform: rotate(-90deg);
		}
	.circle-graph .mypiechart #myCanvas2 {
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);   
		transform: rotate(-90deg);
		}
	.circle-graph .mypiechart #myCanvas3 {
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);   
		transform: rotate(-90deg);
		}

.bar-graph-horizontal > div {
	float: left;
	margin-bottom: 20px;
	width: 100%;
	}
.bar-graph-horizontal .bar {
	border-radius: 2px;
	padding: 10px 0 10px 0;
	height: 30px;
	float: left;
	overflow: hidden;
	position: relative;
	width: 0;
	font-size: 28px;
	line-height: 50px;
	}
.bar-graph-horizontal .bar-one .bar {
	height: 140px;
	}

.bar-graph-one {
	width: 250px;
	height: 240px;
	padding-top: 10px;
	background-image: url(images/bg-graph1.png);
	}	
	.bar-graph-one .bar::after {
		animation: fade-in-text 2.2s 0.1s forwards;
		content: attr(data-percentage);
		font-weight: 700;
		position: absolute;
		right: 20px;
		top: 15px;
		}
	.bar-graph-one .bar-one .bar {
		color: #fff;
		background-color: #00b5e1;
		background: url(images/graph-rainbow.png) repeat-y;
		animation: show-bar-one 1.2s 0.1s forwards;
		}
		.bar-graph-one .bar-one .bar::after {
			top: 55px;
			}

.bar-graph-one .bar-two .bar {
	color: #fff;
	background-color: #00b5e1;
	background-repeat: no-repeat;
	animation: show-bar-two 1.2s 0.2s forwards;
	}

.bar-graph-two {
	width: 100%;
	height: 210px;
	padding-top: 10px;
	margin: 15px 0 10px 0;
	background-image: url(images/bg-graph2.png);
	}	
	.bar-graph-two .bar::after {
		animation: fade-in-text 2.2s 0.1s forwards;
		content: attr(data-percentage);
		font-weight: 700;
		position: absolute;
		right: 8px;
		top: 17px;
		color: #fff;
		}
	.bar-graph-two .bar-three .bar {
		height: 83px;
		margin: 0;
		padding: 0;
		background-image: url(images/bar-graph-blue.png);
		background-repeat: no-repeat;
		background-position: right center;
		animation: show-bar-three 1.2s 0.3s forwards;
		}
	.bar-graph-two .bar-four .bar {
		height: 83px;
		margin: 0;
		padding: 0;
		background-image: url(images/bar-graph-orange.png);
		background-repeat: no-repeat;
		background-position: right center;
		animation: show-bar-four 1.2s 0.4s forwards;
		}

.bar-graph-three {
	width: 100%;
	height: 280px;
	}	
	.bar-graph-three .bar::after {
		animation: fade-in-text 2.2s 0.1s forwards;
		content: attr(data-percentage);
		font-weight: 700;
		position: absolute;
		right: 8px;
		top: 17px;
		}
	.bar-graph-three .bar-five .bar {
		height: 118px;
		margin: 0;
		padding: 0;
		background-image: url(images/figures-row1.png);
		background-repeat: no-repeat;
		background-position: left center;
		background-size: contain;
		animation: show-bar-five 1.2s 0.3s forwards;
		}
	.bar-graph-three .bar-six .bar {
		height: 118px;
		margin: 0;
		padding: 0;
		background-image: url(images/figures-row2.png);
		background-repeat: no-repeat;
		background-position: left center;
		background-size: contain;
		animation: show-bar-six 1.2s 0.4s forwards;
		}

.bar-graph-four {
	position: relative;
	margin: 0 0 40px 4%;
	width: 96%;
	height: 350px;
	background-image: url(images/bg-graph4.png);
	background-repeat: repeat-x;
	}	
	.bar-graph-four .bar-seven .bar {
		height: 77px;
		max-width: 904px;
		margin: 105px 0 0 120px;
		padding: 0;
		background-image: url(images/bar-graph-enrollment.png);
		background-repeat: no-repeat;
		background-position: right center;
		animation: show-bar-seven 1.2s 0.4s forwards;
		}



.graph-goal {
	display: inline-block;
	font-weight: 700;
	font-size: 28px;
	line-height: 28px;
	padding: 28px 0 0 0;
	margin-left: 10px;
	}
.line-graph {
	margin: 20px 0 55px 0;
	}
.line-graph-bottom {
	margin: 25px 0 25px 0;
	}
.figure-stats {
	float: left;
	width: 33%;
	margin: 10px 0 30px 0;
	font-size: 22px;
	line-height: 22px;
	font-weight: 700;
	}	
.figure-stats .stat-box {
	width: 25px;
	height: 25px;
	margin-right: 8px;
	display: inline-block;
	vertical-align: middle;
	background-size: 25px 25px;
	background-position: left center;
	}
.data-num {
	position: absolute;
	font-size: 28px;
	line-height: 28px; 
	font-weight: 700;
	}	
	.data-num1 {
		opacity: 0;
		animation: fade-in-text .5s 1.1s forwards;
		top: 35px; 
		left: 95px;
		}
	.data-num2 {
		opacity: 0;
		animation: fade-in-text .5s 1.3s forwards;
		top: 65px; 
		left: 315px;
		}
	.data-num3 {
		opacity: 0;
		animation: fade-in-text .5s 1.5s forwards;
		top: 70px; 
		left: 530px;
		}
	.data-num4 {
		opacity: 0;
		animation: fade-in-text .5s 1.7s forwards;
		top: 100px; 
		left: 750px;
		}
	.data-num5 {
		opacity: 0;
		animation: fade-in-text .5s 1.9s forwards;
		top: 220px; 
		left: 975px;
		}
.data-circle {
	position: absolute; 
	padding: 30px 0 0 15px;
	width: 83px;
	height: 114px;
	background-repeat: no-repeat;
	background-size: 83px 114px;
	background-image: url(images/circle-down.png);
	font-size: 24px;
	line-height: 24px;
	font-weight: 700;
	}	
	.data-circle1 {
		opacity: 0;
		animation: fade-in-text .5s 1.0s forwards;
		top: 70px; 
		left: 100px;
		}
	.data-circle2 {
		opacity: 0;
		animation: fade-in-text .5s 1.2s forwards;
		top: 100px; 
		left: 320px;
		}
	.data-circle3 {
		opacity: 0;
		animation: fade-in-text .5s 1.4s forwards;
		top: 105px; 
		left: 540px;
		}
	.data-circle4 {
		opacity: 0;
		animation: fade-in-text .5s 1.6s forwards;
		top: 135px; 
		left: 760px;
		padding: 30px 0 0 21px;
		}
	.data-circle5 {
		opacity: 0;
		animation: fade-in-text .5s 1.8s forwards;
		top: 100px; 
		left: 980px;
		padding: 60px 0 0 15px;
		background-image: url(images/circle-up.png);
		}
.data-axis {
	position: absolute; 
	left: -40px;
	font-size: 24px;
	line-height: 24px;
	font-weight: 700;
	}
	.data-axis1 {
		top: -20px;
		}
	.data-axis2 {
		top: 57px;
		}
	.data-axis3 {
		top: 135px;
		}
	.data-axis4 {
		top: 212px;
		}
	.data-axis5 {
		top: 290px;
		}
.data-year {
	position: absolute; 
	top: 330px;
	width: 150px !important;
	font-size: 24px;
	line-height: 24px;
	font-weight: 700;
	}
	.data-year1 {
		left: 77px;
		}	
	.data-year2 {
		left: 305px;
		}	
	.data-year3 {
		left: 520px;
		}	
	.data-year4 {
		left: 737px;
		}	
	.data-year5 {
		left: 955px;
		}	

/* Bar Graph Horizontal Animations */
@-webkit-keyframes show-bar-one {
  0% {
    width: 0;
  }
  100% {
    width: 54%;
  }
}

@-webkit-keyframes show-bar-two {
  0% {
    width: 0;
  }
  100% {
    width: 44%;
  }
}

@-webkit-keyframes show-bar-three {
  0% {
    width: 0;
  }
  100% {
    width: 73.5%;
  }
}

@-webkit-keyframes show-bar-four {
  0% {
    width: 0;
  }
  100% {
    width: 43.5%;
  }
}

@-webkit-keyframes show-bar-five {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@-webkit-keyframes show-bar-six {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@-webkit-keyframes show-bar-seven {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@-webkit-keyframes fade-in-text {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}








/* Mobile portrait and landscape ----------- */
@media only screen and (max-width : 1480px) {


	.contact-footer {
		min-height: 900px !important;
		}

}






/* Mobile portrait and landscape ----------- */
@media only screen and (max-width : 1300px) {


/* -------------------------------------------------------------------------------------------------------------- */
/* css for animations ------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.demo-left {
	float: none;
	width: 100%;
	clear: both;
	}
.demo-right {
	float: none;
	width: 100%;
	clear: both;
	}

.bar-graph-four .bar-seven .bar {
	height: 77px;
	max-width: 740px;
	margin: 105px 0 0 70px;
	}
	.data-num1 {
		top: 55px; 
		left: 45px;
		}
	.data-num2 {
		top: 65px; 
		left: 215px;
		}
	.data-num3 {
		top: 70px; 
		left: 380px;
		}
	.data-num4 {
		top: 100px; 
		left: 550px;
		}
	.data-num5 {
		top: 220px; 
		left: 725px;
		}
	.data-circle1 {
		top: 90px; 
		left: 50px;
		}
	.data-circle2 {
		top: 100px; 
		left: 220px;
		}
	.data-circle3 {
		top: 105px; 
		left: 390px;
		}
	.data-circle4 {
		top: 135px; 
		left: 560px;
		padding: 30px 0 0 21px;
		}
	.data-circle5 {
		top: 100px; 
		left: 730px;
		padding: 60px 0 0 15px;
		}
	.data-year1 {
		left: 27px;
		}	
	.data-year2 {
		left: 195px;
		}	
	.data-year3 {
		left: 360px;
		}	
	.data-year4 {
		left: 537px;
		}	
	.data-year5 {
		left: 710px;
		}	


}





/* Mobile portrait and landscape ----------- */
@media only screen and (max-width : 1240px) {


	#logo {
		width: 280px !important;
		}
	#mainnav { 
		font-size: 17px;
		transition: all 0.2s linear;
		}
	#mainnav ul li {
		padding: 0 7px 0 7px;
		}


}





/* Mobile portrait and landscape ----------- */
@media only screen and (max-width : 1140px) {

body {
	font-size: 20px;
	line-height: 26px;
	}

/* -------------------------------------------------------------------------------------------------------------- */
/* css for hero ------------------------------------------------------------------------------------------------ */
/* -------------------------------------------------------------------------------------------------------------- */

.slides {
	margin: -98px 0 0 0;
	}
.slide-text {
	bottom: 10px;
	padding: 20px 25px 20px 25px;
	}	
	.slide-text h1 {
		font-size: 30px;
		line-height: 34px;
		}

/* -------------------------------------------------------------------------------------------------------------- */
/* css for blocks ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.tiles li h3 {
	font-size: 28px;
	line-height: 30px;
	}
	.tiles li .date,
	.tiles li a {
		font-size: 18px;
		}

.approach-line { 
	margin: 40px 0 0 0;
	}	
.approach-icon {
	width: 20%;
	}
.approach-text {
	width: 79%;
	}
.approach-clear { 
	margin: 60px 0 0 0;
	}	

/* -------------------------------------------------------------------------------------------------------------- */
/* css for photo background ------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.photo-background {
	min-height: 900px;
	}
.photo-background-contain {
	min-height: 1140px;
	}

/* -------------------------------------------------------------------------------------------------------------- */
/* css for photo numbers ---------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.numbers h2 {
	font-size: 90px;
	line-height: 90px;
	padding: 0 0 20px 0;
	}
	.numbers .col4 h2 {
		font-size: 90px;
		line-height: 90px;
		}
			
/* -------------------------------------------------------------------------------------------------------------- */
/* css for contact with WP Forms overrides ---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

input[type=checkbox] + label {
	margin-top: 20px !important;
	font-size: 20px !important;
	line-height: 26px !important;
	}

/* -------------------------------------------------------------------------------------------------------------- */
/* css for footer ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

#footer {
	min-height: 600px;
	}
	.contact-footer {
		min-height: 800px !important;
		}

}








/* Mobile portrait and landscape ----------- */
@media only screen and (max-width : 1000px) {

img {
	width: 100%;
	height: auto;
	}
hr {
	margin: 30px 0 30px 0;
	}
h1 {
	font-size: 45px;
	line-height: 45px;
	}
h2 {
	font-size: 36px;
	line-height: 38px;
	}
h3 {
	font-size: 30px;
	line-height: 34px;
	}
h4 {
	font-size: 23px;
	line-height: 29px;
	}
.container {
	padding: 50px 5% 50px 5%;
  	}

/* -------------------------------------------------------------------------------------------------------------- */
/* css for nav -------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

#logo {
	padding: 20px 0 0 0;
	width: 250px !important;
	}
#navbar {
	display: inherit;
	position: absolute;
	top: 30px;
	right: 30px;
	width: 63px;
	height: 32px;
	background: url(images/nav-menu.png) no-repeat right top;
	cursor: pointer;
	z-index: 9998;
	transition: all 0.3s linear;
	text-transform: capitalize;
	text-align: right;
	}
	#navbar-on {
		display: none;
		position: fixed;
		top: 30px;
		right: 30px;
		width: 33px;
		height: 33px;
		background: url(images/nav-close.png) no-repeat right top;
		cursor: pointer;
		z-index: 9998;
		transition: all 0.3s linear;
		text-transform: capitalize;
		text-align: right;
		}
#mainnav {
	display: none;
	position: fixed;
	top: 10px;
	right: 10px;
	width: 225px;
	height: 225px;
	border-radius: 10px;
	font-size: 20px;
	line-height: 24px;
	text-align: right;
	z-index: 9997;
	transition: right 0.3s linear;
	background: #000;
	}
	#mainnav ul {
		float: right;
		padding: 70px 20px 0 0;
		list-style: none;
		transition: padding 0.3s linear;
		}
	#mainnav ul li {
		float: none;
		display: block;
		height: auto;
		padding: 0 0 0 0;
		}
	#mainnav ul li a {
		font-weight: 400;
		text-align: right;
		}
		#mainnav ul li:nth-of-type(1) a:hover,
		#mainnav ul li:nth-of-type(2) a:hover,
		#mainnav ul li:nth-of-type(3) a:hover,
		#mainnav ul li:nth-of-type(4) a:hover,
		#mainnav ul li:nth-of-type(5) a:hover,
		#mainnav a:hover {
			color: #fff;
			}

/* -------------------------------------------------------------------------------------------------------------- */
/* css for hero ------------------------------------------------------------------------------------------------ */
/* -------------------------------------------------------------------------------------------------------------- */

.slides {
	margin: -98px 0 0 0;
	}
.slide {
	}	
.slide-text {
	bottom: 20px;
	width: 90%;
	padding: 10px 15px 10px 15px;
	}	
	.slide-text h1 {
		font-size: 22px;
		line-height: 28px;
		}

.banner-news,
.banner {
	margin: -215px 0 0 0;
	height: 400px;
	}
	.banner-news .container,
	.banner .container {
		height: 400px;
		}
	.banner .banner-text {
		bottom: 125px;
		padding: 10px 15px 10px 15px;
		}	
	.banner-text h1 {
		font-size: 22px;
		line-height: 28px;
		}

/* ----------------------------g---------------------------------------------------------------------------------- */
/* css for blocks ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.approach-icon {
	width: 25%;
	}
.approach-text {
	width: 74%;
	}

.bar-graph-three {
	height: 140px;
	}	
	.bar-graph-three .bar-five .bar {
		height: 70px;
		}
	.bar-graph-three .bar-six .bar {
		height: 70px;
		margin-bottom: 20px;
		}
.figure-stats {
	float: none;
	width: 100%;
	margin: 20px 0 10px 0;
	font-size: 18px;
	}	
.figure-stats .stat-box {
	width: 20px;
	height: 20px;
	background-size: 20px 20px;
	}
	
/* -------------------------------------------------------------------------------------------------------------- */
/* css for animations ------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.demo-graph {
	float: none;
	width: 100%;
	}
.circle-graph {
	margin-top: 50px;
	float: none;
	width: 100%;
	}
.graph-goal {
	font-size: 22px;
	line-height: 22px;
	}
	
.bar-graph-four .bar-seven .bar {
	height: 77px;
	max-width: 630px;
	margin: 105px 0 0 40px;
	}
.data-num {
	font-size: 22px;
	line-height: 22px; 
	}	
	.data-num1 {
		top: 75px; 
		left: 15px;
		}
	.data-num2 {
		top: 75px; 
		left: 160px;
		}
	.data-num3 {
		top: 90px; 
		left: 305px;
		}
	.data-num4 {
		top: 110px; 
		left: 445px;
		}
	.data-num5 {
		top: 220px; 
		left: 590px;
		}
.data-circle {
	font-size: 20px;
	line-height: 20px;
	padding: 30px 0 0 20px;
	}	
	.data-circle1 {
		top: 100px; 
		left: 10px;
		}
	.data-circle2 {
		top: 100px; 
		left: 155px;
		}
	.data-circle3 {
		top: 115px; 
		left: 300px;
		}
	.data-circle4 {
		top: 135px; 
		left: 445px;
		padding: 30px 0 0 24px;
		}
	.data-circle5 {
		top: 100px; 
		left: 590px;
		padding: 60px 0 0 21px;
		}
.data-year {
	font-size: 20px;
	line-height: 20px;
	}
	.data-year1 {
		left: 0px;
		}	
	.data-year2 {
		left: 145px;
		}	
	.data-year3 {
		left: 290px;
		}	
	.data-year4 {
		left: 435px;
		}	
	.data-year5 {
		left: 580px;
		}	


/* -------------------------------------------------------------------------------------------------------------- */
/* css for photo numbers ---------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.numbers {
	line-height: 24px;
	}
	.numbers h2 {
		font-size: 70px;
		line-height: 70px;
		padding: 0px 0px 20px 0px;
		}
	.numbers .col4 h2 {
		font-size: 70px;
		line-height: 70px;
		}

/* -------------------------------------------------------------------------------------------------------------- */
/* css for contact with WP Forms overrides ---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

input[type='tel'],
input[type='email'],
input[type='text'] {
	margin: 0 3% 0 0 !important;
	}
.wpforms-field {
	display: block !important;
	width: 100% !important;
	margin-bottom: -15px !important;
	}
input[type='submit'],	
.wpforms-submit {	
	margin: 20px 20px 20px 0 !important;
	}
#wpforms-76-field_7-container {
	margin-top: inherit !important; /* move telephone field up */
	}
.wpforms-field-text,
.wpforms-field {
	margin: 0 0 15px 0 !important;
	}
#wpforms-58-field_4-container,
#wpforms-76-field_4-container {	
	margin: 15px 0 30px 0 !important; 
	width: 100% !important;
	}
.wpforms-one-half {
	margin: 0 !important;
	width: 100% !important;
	}
.wpforms-first {
	margin: 0 !important;
	width: 100% !important;
	}
.wpforms-one-half input {
	margin: 0 3% 0 0 !important;
	width: 94% !important;
	max-width: 94% !important;
	}	
.wpforms-first input {
	margin: 0 3% 15px 0 !important;
	width: 94% !important;
	max-width: 94% !important;
	}	


}








/* Mobile portrait and landscape ----------- */
@media only screen and (max-width : 767px) {


body {
	font-size: 18px;
	line-height: 28px;
	}
ul {
	padding: 0 0 30px 15px;
	}
ol {
	padding: 0 0 30px 15px;
	}
p {
	padding: 0 0 30px 0;
	}
hr {
	margin: 20px 0 20px 0;
	}
h1 {
	font-size: 35px;
	line-height: 40px;
	}
h2 {
	font-size: 26px;
	line-height: 34px;
	}
h3 {
	font-size: 26px;
	line-height: 34px;
	}
h4 {
	font-size: 20px;
	line-height: 26px;
	}

.container {
	padding: 40px 5% 10px 5%;
  	}
.desktop {
	display: none;
	}
.mobile {
	display: inherit;
	}

.learn-more {
	display: inline-block;
	margin: 0 20px 30px 0;
	padding: 12px 20px 12px 20px;
	font-size: 18px;
	line-height: 18px;
	}

/* -------------------------------------------------------------------------------------------------------------- */
/* css for hero ------------------------------------------------------------------------------------------------ */
/* -------------------------------------------------------------------------------------------------------------- */

.banner .banner-text {
	bottom: 75px;
	}	
.slides .photo-credit {
	bottom: 200px;
	}
.slides .caption-btn {
	bottom: 175px;
	}	
.slide-text {
	position: relative;
	left: inherit;
	bottom: inherit;
	width:  90%;
	max-width: 1170px;
	margin-top: -1px;
	padding: 30px 5% 0px 5%;
	-webkit-transform: translate(0,0);
	transform: translate(0,0);
	border-radius: 0px;
	clear: both;
	}	
	.slide-text h1 {
		font-size: 28px;
		line-height: 34px;
		}


/* -------------------------------------------------------------------------------------------------------------- */
/* css for blocks ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.photo li {
	width: 100%;
	}
	.photo li:nth-of-type(1) {
		margin: 10px 0 30px 0;
		}
	.photo li:nth-of-type(2) {
		margin: 0 0 40px 0;
		}
.tiles li {
	padding: 25px 4% 100px 4%;
	width: 92%;
	height: auto;
	}
	.tiles li:nth-of-type(odd) {
		margin: 0 0 25px 0;
		}
	.tiles li:nth-of-type(even) {
		margin: 0 0 25px 0;
		}
	.tiles li .date {
		position: absolute;
		left: 4%;
		}
	.tiles li a {
		right: 4%;
		}

.approach-line { 
	margin: 40px 0 0 0;
	}	
.approach-icon {
	width: 20%;
	padding-right: 2%;
	}
.approach-text {
	width: 77%;
	}
.approach-clear { 
	margin: 60px 0 0 0;
	}	

.bio-section .container {
	padding: 20px 5% 60px 5%;
	}
.bio {
	position: relative;
	padding: 35px 0 5px 0;
	width: 100%;
	border-bottom: 1px solid #8cc63f;
	}
.bio-line { 
	margin: 0 0 40px 0;
	border-top: 1px solid #8cc63f;
	}	

/* -------------------------------------------------------------------------------------------------------------- */
/* css for news ------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.news-post .container {
	padding: 40px 5% 10px 5%;
  	}
.news-post h2 {
	padding: 0 0 20px 0;
	}	
.news-post .date {
	padding: 0 0 30px 0;
	}	
.news-post .author {
	padding: 0 0 30px 0;
	}	
.news-post p {
	padding: 0 0 30px 0;
	}	
.news-post hr {
	margin: 10px 0 45px 0;
	border-top: 1px solid #fff;
	}	

/* -------------------------------------------------------------------------------------------------------------- */
/* css for photo background ------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.photo-background {
	min-height: 500px;
	}
.photo-background-contain {
	min-height: 800px;
	}

/* -------------------------------------------------------------------------------------------------------------- */
/* css for photo numbers ---------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.numbers {
	line-height: 24px;
	}
	.numbers h2 {
		padding: 0px 0px 0px 0px;
		}
	.col5 {
		float: none;
		padding: 0 0 10px 0;
		width: 100%;
		}
	.col4 {
		float: none;
		padding: 0 0 10px 0;
		width: 100%;
		}
	.col3 {
		float: none;
		padding: 0 0 10px 0;
		width: 100%;
		}

.bar-graph-three {
	height: 100px;
	}	
	.bar-graph-three .bar-five .bar {
		height: 50px;
		}
	.bar-graph-three .bar-six .bar {
		height: 50px;
		}
.figure-stats .stat-box {
	width: 15px;
	height: 15px;
	background-size: 15px 15px;
	}

.bar-graph-horizontal .bar {
	font-size: 24px;
	line-height: 45px;
	}
	.bar-graph-two .bar::after {
		right: 12px;
		top: 17px;
		}
.graph-goal {
	font-size: 20px;
	line-height: 20px;
	}

.bar-graph-four {
	width: 100%; 
	height: 200px;
	margin: 0 0 40px 0;
	background: none;
	}	
	.bar-graph-four .bar-seven .bar {
		display: none;
		}
.data-num {
	font-size: 20px;
	line-height: 20px; 
	}	
	.data-num1 {
		top: 0; 
		left: 12px;
		}
	.data-num2 {
		top: 0px; 
		left: 112px;
		}
	.data-num3 {
		top: 0px; 
		left: 212px;
		}
	.data-num4 {
		top: 0px; 
		left: 312px;
		}
	.data-num5 {
		top: 130px; 
		left: 412px;
		}
.data-circle {
	font-size: 20px;
	line-height: 20px;
	}	
	.data-circle1 {
		top: 30px; 
		left: 5px;
		}
	.data-circle2 {
		top: 30px; 
		left: 105px;
		}
	.data-circle3 {
		top: 30px; 
		left: 205px;
		}
	.data-circle4 {
		top: 30px; 
		left: 305px;
		padding: 30px 0 0 21px;
		}
	.data-circle5 {
		top: 0px; 
		left: 405px;
		padding: 60px 0 0 15px;
		}
.data-axis {
	display: none;
	}
.data-year {
	top: 180px;
	width: 100px !important;
	font-size: 16px;
	line-height: 18px;
	}
	.data-year1 {
		left: 0px;
		}	
	.data-year2 {
		left: 110px;
		}	
	.data-year3 {
		left: 210px;
		}	
	.data-year4 {
		left: 310px;
		}	
	.data-year5 {
		left: 410px;
		}	



/* -------------------------------------------------------------------------------------------------------------- */
/* css for contact with WP Forms overrides ---------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

input[type=checkbox] + label {
	font-size: 18px !important;
	line-height: 28px !important;
	}
input[type='submit'],	
.wpforms-submit {	
	padding: 12px 20px 12px 20px !important;
	margin: 20px 20px 20px 0 !important;
	font-size: 18px !important;
	line-height: 18px !important;
	}
.small-font {
	font-size: 14px !important;
	line-height: 17px !important;
	}

/* -------------------------------------------------------------------------------------------------------------- */
/* css for footer ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

#footer {
	min-height: 500px;
	}
	.contact-footer {
		min-height: 600px !important;
		}
	#footer ul li {
		font-size: 16px;
		line-height: 20px;
		}

/* -------------------------------------------------------------------------------------------------------------- */
/* css for animations ------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.slide-left {
	opacity: 0;
	-webkit-transform: translateY(120px);
	-ms-transform: translateY(120px);
	transform: translateY(120px);
	}
.slide-right {
	opacity: 0;
	-webkit-transform: translateY(120px);
	-ms-transform: translateY(120px);
	transform: translateY(120px);
	}

}








/* Mobile portrait and landscape ----------- */
@media only screen and (max-width : 550px) {

.bar-graph-four {
	height: 1450px;
	}	
.data-num {
	font-size: 24px;
	line-height: 24px; 
	}	
	.data-num1 {
		top: 0; 
		left: 38%;
		animation: fade-in-text .5s .2s forwards;
		}
	.data-num2 {
		top: 300px; 
		left: 38%;
		animation: fade-in-text .5s .2s forwards;
		}
	.data-num3 {
		top: 600px; 
		left: 38%;
		animation: fade-in-text .5s .2s forwards;
		}
	.data-num4 {
		top: 900px; 
		left: 38%;
		animation: fade-in-text .5s .2s forwards;
		}
	.data-num5 {
		top: 1200px; 
		left: 38%;
		animation: fade-in-text .5s .2s forwards;
		}
.data-circle {
	font-size: 30px;
	line-height: 30px;
	padding: 48px 0 0 30px;
	width: 124px;
	height: 171px;
	background-size: 124px 171px;
	}	
	.data-circle1 {
		top: 30px; 
		left: 32%;
		animation: fade-in-text .5s .2s forwards;
		}
	.data-circle2 {
		top: 330px; 
		left: 32%;
		animation: fade-in-text .5s .2s forwards;
		}
	.data-circle3 {
		top: 630px; 
		left: 32%;
		animation: fade-in-text .5s .2s forwards;
		}
	.data-circle4 {
		top: 930px; 
		left: 32%;
		padding: 48px 0 0 38px;
		animation: fade-in-text .5s .2s forwards;
		}
	.data-circle5 {
		top: 1230px; 
		left: 32%;
		padding: 98px 0 0 30px;
		animation: fade-in-text .5s .2s forwards;
		}
.data-year {
	top: 160px;
	width: 150px !important;
	font-size: 20px;
	line-height: 20px;
	}
	.data-year1 {
		top: 210px;
		left: 35%;
		}	
	.data-year2 {
		top: 510px;
		left: 35%;
		}	
	.data-year3 {
		top: 810px;
		left: 35%;
		}	
	.data-year4 {
		top: 1110px;
		left: 35%;
		}	
	.data-year5 {
		top: 1410px;
		left: 35%;
		}	

.data-line {
	position: absolute;
	border-top: 1px solid #8b999a;
	}
	.data-line1 {
		top: 260px;
		left: 0;
		}	
	.data-line2 {
		top: 565px;
		left: 0;
		}	
	.data-line3 {
		top: 865px;
		left: 0;
		}	
	.data-line4 {
		top: 1165px;
		left: 0;
		}	

}







/* Mobile portrait and landscape ----------- */
@media only screen and (max-width : 500px) {

body {
	font-size: 16px;
	line-height: 24px;
	}
hr {
	margin: 20px 0 20px 0;
	}
h1 {
	font-size: 32px;
	line-height:37px;
	}
h2 {
	font-size: 23px;
	line-height: 31px;
	}
h3 {
	font-size: 23px;
	line-height: 31px;
	}
h4 {
	font-size: 18px;
	line-height: 24px;
	}

#logo {
	width: 200px !important;
	}

.slides {
	font-size: 0;
	line-height: 0;
	}
.slides .photo-credit {
	bottom: 300px;
	}
.slides .caption-btn {
	bottom: 275px;
	}	


/* -------------------------------------------------------------------------------------------------------------- */
/* css for blocks ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.approach-line { 
	margin: 20px 0 0 0;
	}	
.approach-icon {
	width: 20%;
	padding-right: 2%;
	}
.approach-text {
	width: 77%;
	}
.approach-clear { 
	margin: 40px 0 0 0;
	}	
		
/* -------------------------------------------------------------------------------------------------------------- */
/* css for photo background ------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.photo-background {
	min-height: 500px;
	}
.photo-background-contain {
	min-height: 650px;
	}

/* -------------------------------------------------------------------------------------------------------------- */
/* css for footer ----------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

#footer {
	min-height: 400px;
	}
	.contact-footer {
		min-height: 500px !important;
		}



@-webkit-keyframes show-bar-three {
  0% {
    width: 0;
  }
  100% {
    width: 62%;
  }
}

@-webkit-keyframes show-bar-four {
  0% {
    width: 0;
  }
  100% {
    width: 37%;
  }
}



}