/* BLACK BAR */

#simplemodal-container{
	width:50% !important;
	height:auto !important;
}

#google_translate_element{
	width:114px;
	overflow:hidden !Important;
}

#webbar .privacy-policy {
    padding: 1px 5px;
    border: 1px solid #999;
	height: 20px;
	margin: 3px 5px 0px 0px;
	float: right;
	cursor: pointer;
	color: #FFF !important;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    font-family: 'Arial', sans-serif;
}
#webbar .policy-list {
	position: relative;
	color: #fff;
	background: #000;
	border: 1px solid #999;
	display: none;
	text-align: center;
	margin: 0px -6px;
}
#webbar .policy-list a{
	display: block;
	margin: 5px 0px;
}
#webbar .privacy-policy:hover .policy-list{
	display: block;
}

#webbar_container_res{
	display:none;
}

#webbar #blogs_menu_list{
	z-index:999999;
}


#webbar_1{
	width:100%;
	background:black;
}

#webbar{
	background:black !important;
	height:auto;
	padding-left:0px;
	padding-right:0px;
}

#webbar #container{
	/*width:auto !important;*/
	border:none;
	height:auto;
	padding-bottom:3px;
}

#webbar #container{
	width:1170px;
}

#google_translate_element{
	height:inherit;
}

#webbar .cookies{
	height:20px !Important;
}

#webbar .left{
	height:20px;
}

#webbar #search{
	height:20px;
}

#google_translate_element{
	height:20px !important;
	padding:0px 5px !important;
}

/* LOGIN */

#login{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	padding-top:20px;
}

#login .textfield{
	width:100%;
	margin-bottom:3px;
	border-radius:4px;
}

#login h2{
	color:white;
	font-size:20px;
	font-weight:100;
	margin-bottom:0px;
	text-align:center;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform:uppercase;
}

#login .gobutton{
	background:#000096;
	border-radius:2px;
	width:100%;
	text-align:center;
	text-transform:uppercase;
}

#login .go{
	float:right;
	width:100%;
	background:#009fd6;
	border-radius:2px;
}

#login .username{
	float:none;
	margin-right:0;
}

#login .password{
	float:none;
	margin-right:0;
}
/* MMMENU */

.navbar-toggle .icon-bar{
	background:#FFF;
}

.nav_handle{
	display:none;
}

/* OTHER STYLING */


h1, h2, h3{
	color:#3399cc;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

#left_content p, #left_content span{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
	
ul#class_menu{
	padding-left:0;
	margin-top:10px;
}

#teacher_image{
	width:142px;
	height:112px;
}

.staff_slideshow{
	width:120px;
	height:90px;
}

.staff_slideshow .slider-item{
	width:120px;
	height:90px;
}

.staff_slideshow .slider-item img{
	width:120px;
	height:90px;
}

#left_content{
	padding-bottom:30%;
}

.file_gallery .file{
	border:1px solid #000096;
}

.standard_box{
	border:1px solid #000096;
}

/* NON JSCRIPT STYLING */

ul#menu ul li{
	float:none;
}

#logo{
	max-width:780px;
}

#home-video video {
    object-fit: fill;
}

/* ************* NO JSCRIPT *************** */

/* ************* SLIDERS *************** */
#slider_mask{
	margin-top:-20px;
	position:relative;
	z-index:100;
}
#slider, #grade_slider, #banner_slider{
	margin:0px;
	padding:0px;
	border:none;
}
#banner_slider{
	margin-top:15px;
	border:4px solid #000096;
}
#slideshow div, #grade_slideshow div, #banner_slideshow div{
	width:auto;
	height:auto;
	z-index:0 !important;
}
.slider-item, .slider-item img{
	width:100% !important;
	height: 100% !important;
}
@media only screen and (min-width:1200px){
#slider, #grade_slider{
	
	margin:0px;
	padding:0px;
	border:none;
}
.slider-item, .slider-item img{
	width:100% !important;
	height:auto;
}
}
/********** MOBILE MENU ********/

.slicknav_menu {
	background: #3ca2db !important;
	display: block;
}
.slicknav_btn {
	background-color: #000096 !important;
}
.slicknav_nav .topItem a {
	color: #fff !important;
}
.slicknav_nav a:hover {
    background: #000096 !important;
    color: #fff !important;
}
.slicknav_nav .topItem.slicknav_open a, .slicknav_nav .topItem:hover a{
	color: #fff !important;
}
.slicknav_nav .slicknav_item a {
    border-bottom: 0;
}
li.topItem.slicknav_parent.slicknav_open {
    background: #3695cc !important;
}
@media screen and (min-width: 992px) {
	.slicknav_menu{display:none !important;}
}

/* ************* END SLIDERS *************** */

@media only screen and (min-width:992px){
	#content_bg{
		min-height:850px;
	}
}
@media only screen and (min-width:1200px){
	#content_bg{
		min-height:1050px;
	}
}
@media only screen and (min-width:1280px){
	#grass_bottom{
	height:1110px;
	margin-top:-1060px;

	}
}
@media only screen and (min-width:1400px){
	#content_bg{
		min-height:1150px;
	}
	
}
@media only screen and (min-width:1580px){
	#grass_bottom{
	height:1460px;
	margin-top:-1310px;

	}
	#slider_mask {
    margin-top: -30px;
	}
}

@media only screen and (min-width:1800px){
	#grass_bottom{
	height:1510px;
	margin-top:-1460px;

	}
	#content_bg{
		min-height:1550px;
	}
}
@media only screen and (min-width:2100px){
	#grass_bottom{
	height:1710px;
	margin-top:-1660px;

	}
	#content_bg{
		min-height:1750px;
	}
}
@media only screen and (min-width:2300px){
	#grass_bottom{
	height:1810px;
	margin-top:-1760px;

	}
	#content_bg{
		min-height:1850px;
	}
}

@media only screen and (max-width:1200px){
	
	#webbar #container{
		width:970px;
	}
	
	
	
	h1{
		font-size:30px;
	}
	
	h2, #login h2{
		font-size:23px;
		margin-top:10px;
	}
	
	#box_1, #box_2, #box_3{
		max-width:303px;
	}
	
	#box_1, #box_2{
		margin-right:10px;
	}
	
	#footer_top{
		margin-top:-25px;
	}
	
	#r_buttons{
		margin-top:-185px;
	}
	
	#logo img{
		max-width:646px;
	}
	
	
}

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

	#webbar .privacy-policy {
		display: none;
	}
	
	.holdevents, .holdnews, .holdclasswork{
		width:96%;
		padding:40px;
	}
	
	.holdevents h2, .holdnews h2, .holdclasswork h2{
		font-size:28px;
		margin-bottom:10px;
	}
	
	.box.news, .box.events, .box.work{
		margin-top:80px;
	}
	
	p.news a, p.event a, p.work a{
		display:block;
		padding:15px 0px;
	}
	
	p.news, p.event, p.work{
		background:none;
		padding-left:0;
		text-align:center;
		font-size:20px;
	}

	
	#webbar #container{
		width:750px;
	}
	
	#logo img{
		max-width:500px;
	}
		
	
	#left_content img{
		height:auto !important;
		float:none !important;
	}
	
	.left.alerts{
		display:none;
	}
	
	#login{
		padding-top:0;
	}
	
	h1{
		font-size:23px;
		margin-bottom:10px;
	}
	
	h2{
		font-size:18px;
		margin-bottom:5px;
	}
	
	#login h2{
		font-size:20px;
	}
	
	p{
		margin-bottom:5px;
	}
	
	ul#menu li a{
		font-size:17px;
		padding:7px 11px;
	}
	
	table{
		width:100% !important;
		table-layout:fixed !important;
	}
	
	#box_1, #box_2, #box_3{
		max-width:230px;
	}
	
	#footer_top{
		margin-top:-19px;
	}
	
	.holdevents, .holdnews, .holdclasswork{
		width:88%;
		padding:15px;
	}
	
	#r_buttons{
		margin-top:-170px;
	}
}

@media only screen and (max-width:870px){
	
	#header{
		padding-bottom:15px;
	}
	
	#webbar .left{
		float:none;
		margin-left:0;
		margin-top:0;
		height:inherit;
	}
	
	.webbar_button, #webbar .cookies{
		padding:15px 0px;
		border:none;
	}
	
	#webbar .cookies{
		height:inherit !important;
		background:#A3ADC2;
		display:block;
		margin-right:0;
		margin-top:0;

	}
	
	.left.alerts{
		display:none;
	}
	
	.right.cookies a{
		text-transform:uppercase !important;
	}
	
	.webbar a{
		font-size:14px !important;
		text-transform:uppercase !important;
	}
	
	.left.webbar_button.teachers{
		display:block;
		background:#3D4148;
	}
	
	.left.webbar_button.parents{
		background:#474C55;
		display:block;
	}
	
	.left.webbar_button.blogs{
		background:#272A2F;
		display:block;
	}
	
	#webbar .right{
		float:none;
		
	}
	
	.right.search{
		DISPLAY:NONE;
	}
	
	#google_translate_element{
		display:none;
	}
	
	#webbar{
		border:none !important;
		background:transparent !important;
	
	}
	
	#webbar_1{
		display:none;
	}
	
	#webbar #container{
		text-align:center;
		border:none;
		background:transparent !important;
		margin:0;
		padding:0;
	}
	
	#blogs_menu_list{
		display:none !important;
	}
	
	#webbar_container_res{
		display:block;
		text-align:center;
	}
	
	.nav_handle{
		display:block;
		font-size:30px;
		color:#FFF;
		background:#3ca2db;
		padding-left:10px;
		border-bottom:1px solid #edf8ff;
		
	}
	
	#menu_holding{
		display:none;
	}
	
	ul.mm-listview li.topItem{
		background:none !important;
	}
	
	#webbar a{
		display:block;
	}
	
	#webbar .left{
		margin:0px 0px 0px 0px;
	}
	
	#webbar .right{
		margin:0px 0px 0px 0px;
	}
	
	table{
		width:100% !important;
		table-layout:fixed !important;
	}
	
	#footer_top{
		display:none;
	}
}

@media only screen and (max-width:767px){
	#logo img{
	width: 100%;
	}
	#login{
		margin-top:10px;
	}
	
	table, td {
   		width:100% !important;
		table-layout:fixed !important;
	}
	
	#webbar a{
		display:block;
	}
	
	#menu_holding{
		display:none;
	}
	
	#logo{
		width:80%;
		margin-left:auto;
		margin-right:auto;
	}
	
	#webbar .left{
		float:none;
		margin:5px 5px 0px 5px;
	}
	
	#webbar .right{
		float:none;
		margin:5px 5px 0px 5px;
	}
	
	.right.search{
		DISPLAY:NONE;
	}
	
	#google_translate_element{
		margin-left:5px;
		float:none !important;
		padding:0px 5px;
	}
	
	#webbar{
		border:none !important;
		background:transparent !important;
		/*display:none;*/
	}
	
	#webbar #container{
		text-align:center;
		border:none;
		background:transparent !important;
	}
	
	#blogs_menu_list{
		display:none !important;
	}
	
	#webbar_container_res{
		display:block;
		text-align:center;
	}
	
	#webbar_1{
		display:none;
	}
	
	#webbar .left{
		margin:0px 0px 0px 0px;
	}
	
	#webbar .right{
		margin:0px 0px 0px 0px;
	}
	
	table{
		width:100% !important;
	}
	
	#left_content{
		padding-bottom:25px;
	}
	
	#box_1, #box_2, #box_3{
		max-width:100%;
	}
	
	
	#grass_bottom{
		display:none;
	}
	
	#box_1, #box_2{
		margin-right:0;
		margin-bottom:15px;
	}
	
	#update_section h2{
		text-align:center;
		font-size:23px;
		margin-bottom:15px;
	}
	
	#break{
		display:none;
	}
	
	#c_button, #u_button{
		width:100%;
	}
	
	
	#r_buttons{
		margin-top:0;
		padding-bottom:15px;
	}
	
	
	
}

@media only screen and (max-width:555px){
	.box.news, .box.events, .box.work{
		margin-top:40px;
	}
}

@media only screen and (max-width:400px){
	.holdevents, .holdnews, .holdclasswork{
		width:90%;
		padding:25px;
	}
	
	.box.news, .box.events, .box.work{
		margin-top:20px;
	}
	
	.holdevents h2, .holdnews h2, .holdclasswork h2{
		font-size:20px;
	}
	
	p.news, p.event, p.work{
		font-size:16px;
	}
}