/* We use this media query to add styles to any device that supports media queries */

/* GENERAL MOBILE STYLES */

@media 
only screen and (max-width: 600px),
(min-device-width: 760px) and (max-device-width: 1024px) {
/* Some general styles if screen size less than 600px */

#myExtraContent1 h1 {
	font-size: 1.7em; 
}

#myExtraContent2 h1 {
	font-size: 1.7em; 
}

}

@media 
only screen and (max-width: 920px),
(min-device-width: 760px) and (max-device-width: 1024px) {
/* Some general styles if screen size less than 600px */

#logoTop {
	display: none;
}

#mobilelogoTop {
	display: block;
	height: 62px;
	width: 100%;
	background-color: #33aadc;
}

.mobLogo {
	float: right;
	padding: 2px 5px 0 0;
}

}

/* MOBILE NAVIGATION */

@media 
only screen and (max-width: 710px),
(min-device-width: 760px) and (max-device-width: 1024px) {
/* Hide main navigation if screen size less than 710px */
	
#navHeader {
	display: none;
}

.topLinks {
	display: none;
}
	
#mobileNavigation {
	display: block;
	font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
}
		
.mobile_navigation_toggle_active {
	display: block;
}
		
.mobile_navigation_toggle_active {
	display: block;
}

#mobileNavigation_toggle {
	display: block;
}

#mobileNavigation_toggle {
	display: block;
}

#mobileNavigation_toggle {
	padding-top: 4px;
	padding-bottom: 4px;
	margin: 0;
	width: 100%;
	line-height: 40px;
	text-align: center;
	display: block;
	text-decoration: none;
	cursor: pointer !important;
	background-color: #e6e6e6;
	color: #7a7a7a;
	z-index: 201;
}

.sticky {  
    display: none;
}

.socialIcons {
	float: none;
}

.button1 {
	font-size: 1em;
}

}

/* MOBILE SECONDARY NAVIGATION */

/* 
Media query will take effect for any screen smaller than 600px
and also iPads specifically.
*/
@media 
only screen and (max-width: 600px),
(min-device-width: 760px) and (max-device-width: 1024px) {
	/* Force table to not be like tables anymore */

	#collapse1 td { 
		display: block;
	}
	
	/* Hide table headers (but not display: none;, for accessibility)  */
	#collapse1 thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	#collapse1 tr { border: none; }
	
	#collapse1 td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eeeeee; 
		position: relative;
		padding-left: 50%; 
	}
	
	#collapse1 td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	} 

	
	#myExtraContent6 p.textOver {
	top: 20%;
	font-size: 1.3em;
	}
	
	#subjectAnchor {
	position: relative;
	top: -50px;
	}
	
	/*
	Label the data
	*/
	#collapse1 td:nth-of-type(1):before { content: "Students"; }
	#collapse1 td:nth-of-type(2):before { content: "Information"; }
	#collapse1 td:nth-of-type(3):before { content: "Parents"; }
	#collapse1 td:nth-of-type(4):before { content: "Contact"; }
	
	/*EXTRA CONTENT 10 */
	#myExtraContent10 h1 {
		font-size: 2em;
	}

	#myExtraContent10 h2 {
		font-size: 1.5em;
		padding-bottom: 30px;
	}

	#myExtraContent10 h3 {
		font-size: 1.2em;
		padding: 30px 0 30px 0;
	}

	#myExtraContent10 p {
		font-size: 1em;
	}
}
    
/* @end */

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { margin: 1% 0 1% 0%;}
	.col2 { margin: 1% 0 1% 0%;}
	.col3 { margin: 1% 0 1% 0%;}
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
	.span_2_of_2, .span_1_of_2 { width: 100%; }
	.span_2_of_3b,.span_1_of_3b { width: 100%; }
}