/*<div class="displayTest">
YELLOW = Default (Resposive not detected)
RED = Large Screen desktops and laptops: RED<br>
GREEN = Landscape tablets and medium desktops (iPad mini Landscape & Kindle Fire landscape)<br>
BLUE = Portrait tablets and small desktops (iPad portrait)<br>
ORANGE = Landscape phones and portrait tablets: (iPhone landscape / Kindle Fire Portrait)<br>
GRAY = Portrait phones and smaller devices (iPhone Portrait)<br>
</div>*/

/* --------------------------------------------------
RESPONSIVE CSS
-------------------------------------------------- */

/* Large screen desktops and laptops */
@media (min-width: 1200px) {
	/*.displayTest {
		background-color:red;
		padding:20px;
		color:black
	}*/
	
	.row.display-flex {
	  display: flex;
	  flex-wrap: wrap;
	}
	.row.display-flex > [class*='col-'] {
	  display: flex;
	  flex-direction: column;
	}

}

/* Landscape tablets and medium desktops (iPad mini Landscape & Kindle Fire landscape) */
@media (min-width: 992px) and (max-width: 1199px) {
	/*.displayTest {
		background-color:green;
		padding:20px;
		color:black
	}*/
	

.outer-wrapper.sub-wrapper {
	background-size: 34%, auto auto !important;
}

.schools .listing .image {
	height: 140px;	
}

.schools .details .info {
	padding: 5px 30px 5px 0px;	
}
.schools .details .school-logo {
	padding: 0px;
}
.schools .details .school-name {
	font-size: 19px;	
}
.schools .details .address {
	font-size: 15px;	
}

.school-map {
	height: 200px;
	width: 200px;	
}

}

@media (max-width: 991px) {
	
	.sticky-header {
		display: none;
	}
	
	.schools .header-panel {
		background: none;
	}
	
	.schools .details .header {
		background: none;
	}
	.schools .details .header .image {
		display: block;
	}
	
	.schools .details .header .info-col {
		position: relative;
		margin: -75px 2em 0 2em;
		max-width: none;
	}
	.schools .details .school-logo img {
		width: auto !important;
		max-width: 100%;
	}
	
	.schools .details {
		padding: 1em;
	}
	
}

/* Portrait tablets and small desktops (iPad portrait) */
@media (min-width: 768px) and (max-width: 991px) {
	/*.displayTest {
		background-color:blue;
		padding:20px;
		color:black
	}*/

	.hpl-navbar .nav > li > a {
		padding: 14px 2px;	
	}

	.hpl-navbar, .hpl-navbar a {
		font-size: 12px;	
	}
	
	.main-header .navbar-brand > img {
		height: 75px;
	}
	
	.header-nav {
		display: none;
	}

	.marquee-content-wrapper .school-heading {
		margin-bottom: 10px;	
	}
	.marquee-title {
		font-size: 30px;	
	}
	.marquee-content {
		font-size: 14px;
		line-height: 24px;	
	}

	.rsMinW {
		height: 600px !important;	
	}

	.outer-wrapper.sub-wrapper {
		background-size: 34%, auto auto !important;
	}

	.styled-select {
		width: 325px;	
	}
	.styled-select select {
		font-size: 14px;
		width: 350px;	
	}

	.schools .listing .image {
		background-size: cover;
		height: 140px;	
	}
	.schools .listing .details {
		padding: 16px;	
	}
	
	.schools .details .header .info-col {
		margin-top: -125px;
	}

	.school-map {
		display: none;
	}	

}

/* Landscape phones and portrait tablets: (iPhone landscape / Kindle Fire Portrait) */
@media (max-width: 767px) {
	/*.displayTest {
		background-color:orange;
		padding:20px;
		color:black
	}*/
	
	header {
		background-color: #fff;	
	}

	#header .container {
		padding: 0px;	
	}

	.navbar-header {
		padding: 0px 15px;	
	}

	.navbar-nav {
		background-color: #001b49;
		margin-bottom: 0px;
		padding: 0px 15px 5px 15px;
	}

	.hpl-navbar.navbar{
		margin:0px;
	}
	.hpl-navbar .nav > li > a {
		color: #fff;
		display: block;	
	}

	.navbar-nav > li::after {
		display: none;	
	}

	.marquee-content-wrapper {
		padding: 20px 0px 35px 0px;
	}
	.marquee-content-wrapper .school-heading {
		margin-bottom: 10px;	
	}
	.marquee-title {
		font-size: 30px;
		margin-bottom: 10px;
	}
	.marquee-content {
		font-size: 13px;
		line-height: 20px;	
	}

	.rsMinW {
		height: 400px !important;	
	}

	.outer-wrapper.sub-wrapper {
		/*background-image: none, url("../img/sub-background-header.png") !important;*/
		background-image: none !important;
	}
	.outer-wrapper.sub-wrapper > .container > .row > .col-sm-12 {
		padding: 0px;
	}

	.pageHeader {
		/*background-color: #75787a;*/
		margin: 15px 15px 25px 15px;
		padding: 0px 15px;
	}
	.pageHeader h1 {
		font-size: 24px;
		margin: 0px;
		padding: 15px 0px;
	}

	.breadcrumb {
		font-size: 13px;
		padding: 0px 15px;	
		margin-bottom: 15px;
	}

	/*Mobile Nav Styles*/
	.navbar-nav>li:before{
		content:"";
		display:none;
	}
	.navbar-nav .open .dropdown-menu{
		background-color:#ffffff;
	}
	.navbar-nav>li>.dropdown-menu{
		border-radius: 0px;
		padding:10px 25px;
	}
	.navbar-nav .open .dropdown-menu>li>a{
		/*color:#ffffff;*/
		padding:0;
	}
	.dropdown-menu>li {
		display:block;
		padding: 5px 0px;
	}
	.dropdown-menu>li:after{
		content:"";
		display:none;
	}
	.nav-spacer,
	li.dropdown.open:after{
		display:none;
	}
	
	.site-nav li.mobile {
		display: block;
	}
		
	.main-header .navbar-brand > img {
		height: 60px;
	}
	
	.header-links {
		display: none;
	}
	
	.donateNow {
		margin-top: -8px;
	}
	.donateNow a {
		padding: 5px 10px;
	}
	
	a.circle-button-link {
		padding: 25px 15px;
	}
	
	.navbar-top {
		padding: 8px 0;
	}
	
.home-block {
	margin-bottom: 25px;
	min-height: auto;	
}
	
.circle-button-wrapper {
	margin: 20px 0 30px 0;	
}

.outer-wrapper.home-content {
	padding-bottom: 30px;	
}
		
.home-block-content-wrapper {
	padding: 15px;	
}

.schools .search {
	margin: 30px 0px;	
}

.styled-select {
	margin-bottom: 10px;
	width: 280px;
}
.styled-select select {
	font-size: 11px;
	width: 300px;	
}

.schools .listing {
	min-height: auto;	
}
.schools .listing .image {
	display: none;	
}
.schools .listing .details {
	font-size: 14px;
	padding: 10px;	
}

.schools .details .info {
	padding: 25px;	
}
.schools .details .school-logo {
	padding: 0px 0px 15px 0px;
}

.school-map {
	display: none;
}

.jobListings ul.listingNav {
	display: none;	
}
.jobListings .listing .title {
	font-size: 16px;	
}
.jobListings .listing .title a {
	padding: 7px 35px 7px 15px;	
}
.jobListings .listing .desc {
	padding: 15px;	
}

.footer-wrapper footer > .row > div {
	margin-bottom: 35px;
}
.footer-wrapper footer > .row > div:last-child {
	margin: 0px;	
}

.footer-map-wrapper {
	display: none;	
}

.footer-copyright {
	margin-top: 25px;	
}

.footer-nav > li {
	display: inline-block;
}
.footer-nav > li:after {
	content: "|";	
}
.footer-nav > li:last-child:after {
	content: "";	
}

}

/* Portrait phones and smaller devices (iPhone Portrait) */
@media (max-width: 480px) {
	/*.displayTest {
		background-color:gray;
		padding:20px;
		color:black
	}*/	
	
.schools .list ul > li {
	padding: 0px;	
}
	
}
/* --------------------------------------------------