/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
nav {
	height: 40px;
	width: 100%;
	font-size:100%;
	font-family: Arial,Helvetica,sans-serif;
	font-size:12px;
	position: relative;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	width: 600px;
	height: 40px;
}
nav li {
	display: inline;
	float: left;
}
nav a {
	color: #F5F5F5;
	display: inline-block;
	width: 100px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
}
nav li a {
	border-right: 1px solid #2E3F7D;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}
nav a:hover, nav a:active {
	background-color: #909090;
	color: #FFFFFF;
}
nav a#pull {
	display: none;
}
#navi{/*display:none;*/}
/*Styles for screen 600px and lower*/
@media screen and (max-width: 768px) {
	nav { 
  		height: auto;
		background:none;
		position: inherit;
  	}
  	nav ul {
  		width: 100%;
  		/*height: auto;
		display: none;*/
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #717171;
		border-right: 1px solid #717171;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	padding: 10px 8px;
	  	line-height: 1.5;
  	}
  	.accordion-section-title, .accordion-page {padding: 10px 20px;}
	nav a#pull {
		display: inline-block;
		background-color: #232429;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	#navi{display:none;}
	#blinker{width:50% !important; left:4% !important; top:180px !important;}
	#main nav {display: block;}
}
@media screen and (max-width: 640px) {
	nav { 
		border-bottom: 0;
  	}
  	nav ul {
  		width: 100%;
  		/*display: none;
  		height: auto;*/
  	}
  	nav a#pull {
		display: block;
		background-color: #232429;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	#navi{display:none;}
	#blinker{width:50% !important; left:4% !important; top:150px !important;}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		/*display: none;
		height: auto;*/
	}
	nav a#pull {
		display: block;
		background-color: #232429;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	#navi{display:none;}
	#blinker{width:50% !important; left:4% !important; top:150px !important;}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
	nav li {
		/*display: block;
		float: none;*/
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #2E3F7D;
	}
	#navi{display:none;}
}



@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
#wraper, #contentin, .mid, .topnav, header, .heads{
	width:100%;
	margin:auto;
	float:none;
	}.heads {height: 190px; margin: 0% 0% 18% 0%;}
	.fl
	{
		display: inline-flex;	
		width: -webkit-fill-available;
		justify-content: space-between;
		text-transform: none;
	}
	
	.heads .pdpuGrade.intrBtn {
		padding: 2.3% 5px;
	}
	.logo img {
		padding: 5px;
	}
	.heads .pdpuGrade {
	/*	position: relative;*/
		top: 10px;
		width: 155px;
		height: 104px;
		margin-right: 10px;
		padding: 11px 0px 0px;
		line-height: 20px;
		font-size: 15px;
		margin-left: 10px;

	}
 #content{width: 96%; margin:2%;}
table tr td strong{ font-family:'Source Sans Pro',sans-serif; line-height:17px;}

.schools + .col-md8 .postcard { width: 63vw !important; }
.contleftin p{ width:94vw; }



.container-fix {
	width: 94%;
	text-align: left;
	float: none;
	margin-left: 12px;
}
.col-md8 {
	width: 56%;
	float: left;
	margin:1%;
}
.schools{
	width:22%;
	float:left;
	height:auto;
	margin-top:22%;
	margin-left:2%;
	padding-left: 5px;
}
.schools h5{
	font-size:80%;
}

.col-md, .contact {
	width: 87%;
	float: none;
	margin:5%;
}
.postcard-image{width:92%;}
.two-column{-moz-column-count:1; column-count:1;}
#contact img {
    width: 4%;
}
#contact {
    margin-left: -180px;
    margin-top: -60px;
	background-size: 45% auto;
}
.close {
    margin-right: 470px;
    margin-top: -110px;
}
.imgpopup { margin-left: 0vw !important; }
.popupclose{  margin-left: 91vw; margin-top: 13vh !important; font-size: 30px !important;  }
 .imgpopup img{ width: 100vw; }
 #img01 {
    margin: 90px 0px;
}
.contact .res img{width: 20%;}
.clogo img{width:20%;}
.colright{
	width:92%;
	float:none;
	margin:3%;}

.contright  {
	width: 94% !important;
	float:left;
	/*margin:3%;*/
}
.high{
	width:81%;
	float: none;
	margin:5% 3%;
}
.contleftin  {
	width:70%;
	float:none;
	margin:3%;
	padding-left: 0px;
}
#Students p{ width: 92vw; }
.nws {
	width: 99%;
	float:none;
	padding:0%;
}
.gws {
	width: 99%;
	float:none;
	padding:4%;
}
.n1 {
	width:80%;
	float:none;
	margin:4% auto;
}
.updateBox marquee {position: relative;}
.g1, .ctext {
	width:85%;
	float:none;
	margin: 0 0 5% 3%;
}
.contright1 {
	width:50%;
	float:none;
	margin: 0 auto;
}
#contentin .contright1 img {width: 146px;}

.up {
	width:100%;
	margin:0 auto;
}
.date {
	width: 100%;
	padding-bottom: 30px;
}


.image {height:90px;}

.pic{display:none;}
.visit1, .visit{ float:none; width:75%;}
.visitor{padding:0px 8%;}

.logos{display:none;}
.col-2{clear:both; width:90%; margin-bottom:2%;}

.board {
	width: 90%;
	margin:20px auto;
	float: none;
	text-align:left;
}
.board1 {
	width:75%;
	float: none;
	margin:auto;
	box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
.logo img{width:100%;}
#nav li.active > a {
	display:none;
}
#blinker
{
	display:none !important;
}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
#wraper, #contentin, .mid, .topnav, header, .heads{
	width:99%;
	margin:0;
	float:left;
}
.topnav {display: block;}
.heads {height: 120px;}
.heads .pdpuGrade {top: 15px; width: 90px; height: 80px; margin-right: 15px; padding: 2px 0px 0; line-height: 13px; font-size: 11px;}
#content {
    width: 96%;
    margin: 2%;}
.col-md8 {
	width: 67%;
	float: left;
	margin:3%;
}
#blinker
{
	display:none !important;
}
.schools{
	width:12%;
	height:auto;
	margin-left:2%;
}
.container-fix {
	width:85%;
	text-align:center;
	float:none;
}
.col-md, .contact {
	width: 55%;
	float: left;
	margin:2%;
}
#contact {
    margin-left: -180px;
    margin-top: -140px;
    background-size: 70% auto;
}
#contact img {
    width: 4%;
}
.close {
    margin-right: 217px;
	margin-top: -102px;
	width: 25%;
}
.two-column{-moz-column-count:1; column-count:1;}
.col-md img{
	width:90%;
	height:auto;
}
.colright{
	width:35%; 
	float:left;
	margin:3%;}

.contleftin {
	width:55%;
	margin:2%;
	float:left;
}
.contright {
	width:22%;
	margin:2%;
}
.high{
	width:23%;
	float: right;
	margin-right:15px;
	padding: 15px;
	border-radius: 3px;
}
.nws {
	width: 99%;
	margin: 10px;
	height:auto;
}
.gws {
	width: 99%;
	margin: 10px;
	height:auto;
}
.n1 {
	width:22%;
}
.g1{
	width:22%;
}
.contright1 {
	width:20%;
	float:left;
}

.up {
	width:90%;
	margin:2% 4%;
}
.date {
	width:18%;
	padding-top:0;
}
.ctext {
	width:31%;
}



.image{height:110px;}
.clogo img{width:20%;}

.visit1, .visit{ float:left; width:42%;}
.visitor{padding:0px 4%;}

.logo img{width:90%;}
.col-2{width:20%; margin-bottom:2%;}

.board {
	width: 48%;
	float: left;
	margin:2% 5%;
	
}
.board1 {
	width:30%;
	float: left;
	margin:auto;
	box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

/* MENU CSS*/
.cbp-hrmenu > ul > li > a {
	padding: 0.6em 1em;
}
}

@media only screen 
and (min-device-width : 800px) 
and (max-device-width : 1024px) {
	nav{display:none;}
	#navi{display:block;}
	.ppd_wrap img {
	max-width: none!important;
	width:60%;
}


}
@media only screen 
and (min-device-width : 1024px) 
and (max-device-width : 1920px) {
	nav{display:none;}
	#navi{/*display:block;*/}
}