body{font-family:'Didact Gothic'; background-color:rgba(217, 217, 217, 1);}
#contentcontainer{padding:0px;min-height:309px;}
#gallery{display:inline-block;list-style:none;}
#gallery li{padding:1%;display:inline-block;}
.panel-default ul li a{color:#333;}
.breadcrumb{background-color:#041690;border-radius:0px;}
.breadcrumb li a{color:#333;}
.breadcrumb li a:hover{color:#333;}
.breadcrumb{padding-left:45px;}
#frontnews div ul h4 a{color:#3276b1;}
.form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
     }

.form-inline .form-control {
	width: 100%;}
	
	#gallery li{padding:1%;display:inline-flex;}
.google-maps {
	position: relative;
	padding-bottom: 50%; /*This is the aspect ratio*/
	height: 0;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;}

.searchbox{
float:right;
}

@media only screen and (max-width : 600px) {
.schooltitle {display: none;
}
}

@media only screen and (max-width : 1100px) {
            .searchbox{margin-top:0px;
            }
        }
	
	h2{margin-top:0px;padding-top:20px;}

		.nav > li > a {background-color:#20409A}
}


	/* Hover effect */

	*, *::before, *::after{
		-moz-box-sizing: border-box;
		box-sizing: border-box;

		-webkit-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}


	.container{
		width: 1024px;
		max-width: 100%;
		margin: auto;
		display: block;
		text-align: center;
	}

	.hero{
		width: 100%;
		height: 40%;
		background: #3498db;
		display: table;
	}



	figure{

		background-size:cover;
		background-position:center;
		overflow: hidden;
		position: relative;
		display: inline-block;
		vertical-align: top;
		height:200px;


	}

	figcaption{
		position: absolute;
		left: 0; right: 0;
		top: 0; bottom: 0;
		text-align: center;
		font-weight: bold;
		width: 100%;
		height: 100%;
		display: table;
	}

	figcaption div{
		display: table-cell;
		vertical-align: middle;
		position: relative;
		top: 20px;
		opacity: 0;
		color: #fff;
		text-transform: uppercase;
	}

	figcaption div:after{
		position: absolute;
		content: "";
		left: 0; right: 0;
		bottom: 40%;
		text-align: center;
		margin: auto;
		width: 0%;
		height: 2px;
		background: #fff;
	}

	figure img{
		-webkit-transition: all 0.5s linear;
		transition: all 0.5s linear;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}



	figure:
figcaption{


		background: rgba(0,0,0,0.5);


	}

	figure:hover{
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ 
		filter: gray; /* IE6-9 */ 
		-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
	}		

	figcaption:hover div{
		opacity: 1;
		top: 0;
	}

	figcaption:hover div:after{
		width: 50%;
	}

	figure:hover img{
		-webkit-transform: scale3d(1.2, 1.2, 1);
		transform: scale3d(1.2, 1.2, 1);
	}

/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */