/******************* Customize responsive behaviors for phone browsers*************************/
@media(max-width: 480px) {
	h1 {
		font-size: 20px;
	}
 	.searchbox {
		clear: both;
	}
	.list-inline .important_icons {
		display: block;
	}
	.green-date {
		width: 12%;
		font-size: 12px;
	}
	.green-date span {
		font-size: 14px;
	}
	.district-status span {
		padding: 0 5px;
		display: inline-block;
		justify-content: center;
		-webkit-justify-content: center;/* Safari 8 */
	}
	.district-status span span {
		padding: 0;
	}
	.district {
		padding: 10px;
		margin: 0;
		font-size: 12px;
		width: 70%;
	}
	.calendars {
		padding: 10px 0 60px 0;
	}
	.icon-menu {
		padding: 2px;
		min-height: 400px;
		margin-top: 20px;
	}
	.instagram-slideshow {
		width:280px;
		height:200px;
	}
	.app-footer ul {
		text-align: center;
	}
	.app-footer li {
		font-size: 40px;
		margin: 0;
	}
	.social-media {
		height: 250px;
	}
	div.fwcs-app,  div.app-banner,  div.apple,  div.android {
		padding: 0;
	}
	div.fwcs-app {
		width: 100%;
	}
	div.app-banner {
		padding-top: 50px;
	}
	.poly-app {
		-webkit-clip-path: polygon(100% 0, 94% 50%, 100% 100%, 0 100%, 7% 50%, 0 0);
		clip-path: polygon(100% 0, 94% 50%, 100% 100%, 0 100%, 7% 50%, 0 0);
		padding: 8px 20px;
		height: 35px;
	}
	.social-media-banner:before, .social-media-banner:after {
		margin-top: -5px;
	}
	.app-banner {
		display: flex;
		display: -webkit-flex; /* Safari 8 */
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap; /* Safari 8 */
		justify-content: center;
		-webkit-justify-content: center;/* Safari 8 */
		padding-top: 20px;
		font-size: 30px;
	}
	.app-banner:before {
		content: '----';
		letter-spacing: .15rem;
		color: #9C8679;
		margin-top: -5px;
	}
	.app-banner:after {
		content: '----';
		letter-spacing: .15rem;
		color: #9C8679;
		margin-top: -5px;
	}
	.staff-lookup {
		padding: 5px 10px;
	}
	.app-footer {
		height: 250px;
	}
	.app-footer div a {
		display: inline-block;
		margin: 0 20px;
	}
	.calendars {
		padding: 5px;
	}
	.icon-bar a {
		color: #b0b2b4;
	}
	.normal {
		color: #b0b2b4;
	}
	.navbar-nav:after.searchbox, .navbar-nav:before.searchbox {
		top: 71px;
		margin-bottom: -2px;
		right: 10px;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	.navbar-nav:after.searchbox {
		border-bottom-color: #F3F3F4;
		border-width: 15px;
		margin-left: -15px;
		z-index: 1;
	}
	.school-details div {
		border: none;
		width: 100%;
		border-bottom: 3px dashed #F3F3F4;
		margin: 0 50px;
		padding: 20px 10px;
	}
	.school-details {
		
		width: 100%;
		height: 100%;
		text-align: center;
		margin: 0;
		padding: 0 10px;
		line-height: 20px;
	}
	.school-map-details {
		height: 100%;
	}
	.school-map {
		width: 100%;
		display: flex;
		display: -webkit-flex; /*Safari*/
	}
	#body {
		padding: 0 0 10px 0;
	}
	.embed-pdf iframe {
		width: 400px;
		height: 630px;
	}
}
/******************* Customize responsive behaviors for ipad portrait browsers*************************/
@media(max-width: 768px) {
	#body {
		padding: 0 0 0 0;
	}
	h1 {
		display: flex;
		display: -webkit-flex; /*Safari*/
		flex-direction: column;
		-webkit-flex-direction: column; /*Safari*/
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap; /* Safari 8 */
		justify-content: center;
		-webkit-justify-content: center;/* Safari 8 */
		text-align: center;
		padding: 10px;
		font-size: 18px;
	}
	.page-title {
		display: flex;
		display: -webkit-flex; /*Safari*/
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap; /* Safari 8 */
	}
	a img.main_logo {
		display: inline;
	}
	img.bgimage {
		height: 200px;
	}
	.bus-status, .our-staff, .upcoming-events {
		margin: 0;
		line-height: 25px;
	}
	h1 {
		border: 0;
	}
	h1 span.welcome-banner {
		-webkit-clip-path: polygon(100% 0, 95% 54%, 100% 100%, 0 100%, 6% 53%, 0 0);
		clip-path: polygon(100% 0, 95% 54%, 100% 100%, 0 100%, 6% 53%, 0 0);
		width: 140px;
		text-align: center;
		display: inline-flex;
		display: -webkit-flex-inline; /*Safari*/
		flex-direction: row;
		-webkit-flex-direction: row; /*Safari*/
		justify-content: center;
		-webkit-justify-content: center;/* Safari 8 */
		margin:0 0 10px 0;
		float: none;
	}
	h1 span.welcome-dash:before {
		margin:0;
		content: '----';
		letter-spacing: .15rem;
		color: white;
	}
	h1 span.welcome-dash:after {
		margin:0;
		content: '----';
		letter-spacing: .15rem;
		color: white;
	}
	.school-information .school-map-details, .school-information .school-map, .school-information .school-building, .school-information .school-building img  {
		width: 100%;
		text-align: center;
	}
	.school-building img {
		height: 200px;
	}
	.school-logo {
		height: 30px;
		margin-top: 15px;
	}
	.staff-lookup {
		width: 100%;
	}
	.float-nav ul {
		line-height: 10px;
		margin: 0;
		padding: 0;
	}
	.navbar-header {
		margin: 0;
		border: none;
		display: inline-flex;
		display: -webkit-inline-flex; /*Safari*/
		justify-content: space-between;
		-webkit-justify-content: space-between; /*Safari*/
		flex-flow: wrap;
		-webkit-flex-wrap: wrap; /*Safari*/
		width: 100%;
	}
	.navbar-header div button span {
		position: relative;
		text-align: right;
		font-size: 25px;
		color: #B0B2B4;
		margin: 0;
		border: none;
	}
	/* centered navigation */
 	.navbar-header span.hidden-sm.hidden-md.hidden-lg {
		float: left;
		display: inline-block;
		margin-top: -15px;
	}
	.navbar-default {
		height: 65px;
	}
	.navbar-toggle {
		border: none;
		height: 50px;
		float: none;
		margin: 0;
		font-size: 25px;
		color: #888;
	}
	.darkest-grey-background, .light-grey-background, .blue-background, .green-background, .light-grey-background, .grey-background, .brown-background, .orange-background,
	.main-padding {
		padding: 10px 20px;
	}
	.darkest-grey-background iframe {
		width: 100%;
	}
	.navbar-header span a img.main_logo{
		clear: both;
		padding: 0;
		height: 50px;
		margin: 5px 0;
	}
	.navbar-header div a img.second_logo {
		padding: 0 0 0 10px;
		height: 50px;
	}
	.highlight-search {
	  background: #B0D67A;
	  color: white;
	}
	.highlight-language {
	  background: #F7941E;
	  color: white;
	}
	.highlight-font-setting-buttons {
	  background: #9C8679;
	  color: white;
	}
	.highlight-hamburger {
	  background: #57B7DF;
	  color: white;
	}
	div.language, div.search, div.hamburger, div.font-setting-buttons {
		height: 100%;
		width: 15%;
		position: relative;
		text-align: center;
		display: block;
		margin-top: -20px;
		padding: 10.5px 0 5px 0;
		color: #888;
	}
/* 	div.font-setting-buttons {
		margin-top: -14px;
		padding: 20px 0;
	} */
	.navbar-header .search:hover, .navbar-header .search:focus {
		display: block;
		background: #B0D67A;
	}
	.navbar-header .language:hover, .navbar-header .language:focus {
		display: block;
		background: #F7941E;
	}
	div.font-setting-buttons:hover, div.font-setting-buttons:focus  {
		display: block;
		background: #9C8679;
		color: white;
	}
	button.contrast:hover, button.contrast:focus, button.contrast_back:hover, button.contrast_back:focus {
		background: none;
		padding: 0;
	}
	.navbar-header .hamburger:hover, .navbar-header .hamburger:focus {
		display: block;
		background: #57B7DF;
	}
	button.contrast, button.contrast_back {
		padding: 0 5px 0 5px;
		font-size: 35px;
	}
	.navbar-header .search button:hover span, .navbar-header .search button:focus span, .navbar-header .language button:hover span, .navbar-header .language button:focus span, .navbar-header .font-setting-buttons button:hover span, .navbar-header .font-setting-buttons button:focus span, :hover.span.icon-bar, :focus.span.icon-bar {
		color: white;
	}
	.navbar-header .search:hover span.pointer, .navbar-header .search:focus span.pointer, .navbar-header .language:hover span.pointer, .navbar-header .language:focus span.pointer,.navbar-header .hamburger:hover span.pointer, .navbar-header .hamburger:focus span.pointer {
		right: 15px;
		top: 37px;
		height: 0;
		width: 0;
		border: 10px solid transparent;
		content: "";
		position: absolute;
	}
	.navbar-header .search:hover span.pointer, .navbar-header .search:focus span.pointer {
		border-bottom-color: #E5E6E7;
	}
	.navbar-header .language:hover span.pointer, .navbar-header .language:focus span.pointer {
		border-bottom-color: #4D4D4F;
	}
	.navbar-header .hamburger:hover span.pointer, .navbar-header .hamburger:focus span.pointer {
		border-bottom-color: #333333;
		position: absolute;
		right: 40px;
		top: 47px;
	}
	.navbar-default > div > .green-logo:hover, .navbar-default > div > .green-logo:focus, .navbar-default > div > .orange-logo:hover, .navbar-default > div > .orange-logo:focus, .navbar-default > div > .brown-logo:hover, .navbar-default > div > .brown-logo:focus, .navbar-default > div > .blue-logo:hover, .navbar-default > div > .blue-logo:focus {
		box-shadow: 0 -50px 0 0 #414142 inset;
	}
	.navbar-default > div > a {
		display: block;
		width: 100%;
		color: white;
	}
	div.nav.navbar-nav {
		margin: 0;
		padding: 0;
		text-align: center;
		float: none;
		width: 100%;
		display: flex;
		display: -webkit-flex;
		height: 100%;
		flex-flow: wrap;
	}
	.navbar, #body {
		top: 0;
	}
	.nav div {
		display: flex;
		width: 100%;
		height: 100%;
	}
	.nav div.searchbox {
		height: 50px;
		display: block;
	}
	.school-first-color {
		min-width: 90%;
	}
	.important-nav {
		background: #333333;
		display: inline-flex;
		display: -webkit-inline-flex; /*Safari*/	
		width: 100%;
	}
	.important-nav a {
		justify-content: space-between;
		-webkit-justify-content: space-between; /*Safari*/
		color: white;
		flex-grow: 2;
	}
	.important-nav a:hover, .important-nav a:focus {
		background: #414142;
		display: block;
	}
	.important-nav a:link:after, .important-nav a:visited:after {
		border-right: 1px solid white;
	}
	.important-nav a.green-font, .important-nav a.orange-font, .important-nav a.light-brown-font {
		padding: 10px;
		text-align: center;
		margin: 5px 0;
	}
	.important-nav a.green-font {
		color: #B0D67A;
		border-right: 1px solid #4d4d4f;
	}
	.important-nav a.orange-font {
		color: #F7941E;
		border-right: 1px solid #4d4d4f;
		border-left: 1px solid #6e6e6f;
	}
	.important-nav a.light-brown-font {
		color: #9C8679;
		border-left: 1px solid #6e6e6f;
	}
	.green-logo, .blue-logo, .brown-logo, .orange-logo, .school-first-color {
		width: 100%;
		text-align: left;
		padding-bottom: 1px;
		background: #4D4D4F;
		justify-content: flex-start;
		-webkit-justify-content: flex-start;
		border-bottom: 1px solid #282525;
		padding-left: 10px;
	}
	.dropdown-menu {
		min-width: 100%;
		padding-top: 0;
	}
	li a:link.lang-select, li a:visited.lang-select {
		border-bottom: 1px solid #282525;
		color: white;
	}
	li a:hover.lang-select, li a:focus.lang-select {
		background: #282525 !important;
		color: white !important;
	}
 	.orange-logo button:focus, .brown-logo button:focus, .blue-logo button:focus, .green-logo button:focus, .school-first-color button:focus {
		background: #414142;
	}
	.orange-logo button:after, .brown-logo button:after, .blue-logo button:after, .green-logo button:after, .school-first-color button:after {
		border-bottom: none;
		color: #555;
	}
	button .icon-bar:hover, button .icon-bar:focus {
		color: white;
	}
	.school-first-color {
		width: 100%;
	}
	.dropdown form button {
		color: white;
		padding-left: 20px;
	}
	.dropdown button span {
		font-size: 20px;
		font-weight: bold;
	}
	div.dropdown-menu {
		min-width: 300px;
		background: #333333;
		width: 100%;
	}
	.nav .open > a {
		border: none;
	}
	.navbar-default .navbar-nav > div > a:hover, .navbar-default .navbar-nav > div > a:focus {
		color: white;
	}
	.navbar-default > div > :hover, .navbar-default > div > :focus {
		box-shadow: none;
	}
	.navbar-default, .navbar-default > button:hover, .navbar-default > button:focus {
		box-shadow: none;
	}
 	.navbar-default > .open > button, .navbar-default > .open > button:focus, .navbar-default > .open > button:hover,.navbar-default > .open > button:visited {
		font-family: 'Teko-SemiBold';
		color: white;
		background: #414142;
		border-bottom: 3px dashed #9C8679;
	}
	.dropdown.orange-logo form button, .dropdown.brown-logo form button, .dropdown.blue-logo form button, .dropdown.green-logo form button {
		width: 100%;
		display: block;
		text-align: left;
		padding-left: 20px;
	}
	.btn-group.open .dropdown-toggle {
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.btn-group .dropdown-toggle {
		position: absolute;
		right: 0;
		height: 50px;
		width: 10%;
		color: white;
	}
		/*Dropdown Menu starts*/
	.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
		background: none;
	}
/*Hide dropdown hover effect on mobile so Steve doesn't freak out each time he tests it*/
 	#navbar-collapse-2 div {
		background: #4D4D4F;
		padding: 0;
	}
	#navbar-collapse-2 div.dropdown {
		color: white;
		padding: 5px 20px;
	}
	.navbar-default .navbar-collapse {
		border: none;
		margin: 0;
		padding: 0;
	}
	.navbar-collapse.in {
		overflow-y: visible;
	}
	#navbar-collapse-2 div.dropdown:after {
		border-width: 15px;
		margin-left: -15px;
		z-index: 1000;
	}	
	.open.dropdown-menu:hover {
		display: block !important;
		display: none !important;
	}
	.dropdown div p a:link, .dropdown div p a:visited, .dropdown div a:link, .dropdown div a:visited {
		font-size: 10px;
		padding-left: 20px;
		line-height: 30px;
	}
	.dropdown-menu.multi-column {
		width: 100% !important;
		overflow-x: hidden;
		margin: 0;
		padding: 0;
	}
	.dropdown-menu.columns-2 {
		width: 100%;
	}
	div.multi-column-dropdown {
		margin: 0;
	}
	.dropdown-menu .multi-column .columns-2.multi-column-dropdown div a {
		padding: 0;
		margin: 0;
	} 
	.dropdown-menu div a {
		padding: 0 15px;
	}
	.school-first-color {
		width: 100% !important;
	}
	.multi-column-dropdown div {
		padding: 0;
	}

	.multi-column-dropdown {
		list-style: none;
		margin: 0;
		padding: 0;
		line-height: 0;
		white-space: wrap;
		color: white;
		font-size: 16px;
	}
	.multi-column-dropdown div a {
		line-height: 0;
		white-space: wrap;
	}
	/*search box*/
	.search-nav {
		height: 100%;
	}
	.float-nav {
		position: relative;
	}
	.searchbox {
		margin: 0; padding: 0;
		font-family: 'Montserrat-Regular', 'Teko-SemiBold', arial;
		width: 100% !important;
	}
	.searchbox input {
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		padding: 30px;
		margin: 0;
		width: 100%;
		background: #E5E6E7;
	}
	.navbar-nav {
		margin: 0 !important;
	}
	.container-fluid > .navbar-header {
		margin: 0;
	}
	li.dropdown.searchbox {
		background: #F0F1F1;
	}
	li.dropdown.normal a, li.dropdown button {
		color: #B0D67A;
		display: block;
		position: absolute;
		font-size: 14px;
		top: 17px;
		right: 20px;
	}
	#navbar-collapse-3, #navbar-collapse-2, #navbar-collapse-1 {
		position: relative;
		width: 100%;
		float: left;
		background: #4D4D4F;
		color: white;
	}
	.carousel {
		min-height: 380px;
	}
	.carousel-caption {
		position: absolute;
		max-width: 400px;
		height: 200px;
		top: 0;
		left: 0;
	}
	.carousel-indicators {
		left: 20px;
		bottom: 10px;
	}
	.item img {
		min-width: 100%;
		overflow: hidden;
		height: 400px;
		position: relative;
		background-size:cover;
		background-position:50% 50%;
	}
	.item .carousel-caption {
		position: relative;
		min-width: 100%;
		height: 100px;
	}
	a:link.btn-primary, a:visited.btn-primary {
		font-size: 12px;
	}
	.main-padding {
		padding-left: 20px;
		padding-right: 20px;
	}
	.slider {
		position: absolute;
		max-width: 100%;
		min-width: 100%;
		left: 0;
		top: 0;
		text-align: center;
		font-size: 16px;
		color: #F7941E;
		font-family: 'Teko-SemiBold';
		z-index: 200;
		max-height: 70px;
		text-transform: uppercase;
	}
	.slider a {
		color: #f7941e;
		display: block;
		background: #F3F3F4;
		padding: 10px;
		text-decoration: none;
	}
	.slider a:hover, .slider a:focus {
		color: #4D4D4F;
		background: none;
	}
	.slider a span, .slider span {
		color: #f7941e;
		font-size: 16px;
		opacity: 0.5;
		filter: alpha(opacity=5);
	}
	.slider-white {
		position: absolute;
		display: block;
		margin-top: 0;
		text-align: center;
		padding-top: 0;
		max-width: 100%;
		min-width: 100%;
		height: 100%;
		top: 50px;
		left: 0;
		z-index: 200;
		background: #F3F3F4;
	}
	.carousel-inner {
		background: #F3F3F4;
	}
	.carousel-indicators {
		top: 220px;
	}
	.carousel-indicators li.active {
		background: #9C8679;
		width: 18px;
		height: 18px;
	}
	.greensheets, .deadlines, .news-events{
		padding: 10px 20px;
	}
	.green-date {
		padding: 5px;
		width: 20%;
	}
	.district {
		width: 80%;
	}
	.calendars {
		padding: 0 20px;
	}
	.searchbox form {
		width: calc(100%);
	}
	.district_status {
		font-size: 10px;
	}
	.main-blocks {
		width: 50%;
	}
	div.bottom-footer {
		text-align: center;
		padding-bottom: 40px;
	}
	.bottom-footer .legal-content li:first-child:after {
		content: "";
		padding-left: 0;
	}
	div.col-lg-4.dot-four {
		width: 100%;
	}
	.calendar-days {
		height: 100%;
	}
	.nutrients-hack table > tbody > tr > td {
		margin: 0;
		padding: 0;
		font-size: 6px;
		font-weight: normal;
	}
	.app-footer {
		padding-top: 30px;
	}
	/*Custom fonts*/
	.small-font {
		font-size: 12px;
	}
	.medium-font {
		font-size: 30px;
	}
	.large-font {
		font-size: 70px;
	}
	.vertical-font {
		transform: rotate(-90deg);
		float: right;
		margin: 0 auto;
		position: relative;
		top: 40px;
		right: 180px;
	}
	/*custom fonts end*/
	select.custom-select {
		margin: 5px;
		font-size: 14px;
		padding: 5px;
		width: 250px;
	}
	.custom-select {
		padding: 5px;
		font-size: 14px;
		width: 300px;
	}
	.custom-submit {
		padding: 5px;
		font-size: 14px;
	}
	.row.staff-hack {
		margin-right: 0;
		margin-left: 0;
	}
	.bus-status div {
		border: none;
		padding: 0 20px;
	}
	.bus-status {
		border: 1px solid #F0F1F1;
	}
	.nav-tabs a {
		height: 55px;
		width: 100%;
	}
	.athletics .nav-tabs {
		padding: 0;
	}
	.nav-tabs li {
		padding: 10px 0 0 0;
		width: 25%;
	}
	.nav > li > a {
		padding: 10px 5px;
	}
}
/******************* Collapse medium screens*************************/
@media(min-width: 767px) and (max-width: 1000px) {
	a img.main_logo {
		padding-top: 15px;
	}
	.main-buttons a:link, .main-buttons a:visited {
		padding: 5px;
		margin: 0 10px;
		max-width: 120px;
	}
	.district-status span {
		font-size: 16px;
	}
	button.contrast, button.contrast_back {
		padding: 0 22px 0 22px;
		font-size: 12px;
	}
	.slider {
		bottom: 250px;
	}
	.social-media {
		padding: 30px 20px 0 20px;
	}
	.green-date {
		width: 20%;
	}
	.district, .school {
		width: 75%;
	}
	.main-blocks {
		width: 25%;
	}
	.staff-lookup {
		padding: 10px 10px;
	}
	.top-nav div {
		font-size: 12px;
		padding: 0 10px;
	}
	div.ct-language {
		padding-top: 6px;
	}
}
@media(min-width: 1001px) and (max-width: 1200px) {
	div.dropdown.ct-language:hover, div.dropdown.ct-language:focus {
		width: 10%;
	}
	.school-logo a img {
		height: 50px;
	}
	.district-status span {
		font-size: 18px;
	}
	.green-date {
		width: 15%;
	}
	.district {
		width: 80%;
	}
	.calendars {
		padding: 0 20px;
	}
	.deadlines {
		min-height: 240px;
	}
	.main-blocks {
		width: 25%;
	}
	.top-nav div {
		font-size: 14px;
		padding: 0 10px;
	}
	div.ct-language {
		padding-top: 6px;
	}
	.school-information .school-map-details, .school-information .school-map  {
		width: 50%;
	}
	.school-information .school-building, .school-information .school-building img {
		width: 100%;
		text-align: center;
	}
}

@media (min-width: 1201px) and (max-width: 1600px) {
	.searchbox form {
		width: calc(100% - 60px);
	}
	.searchbox {
		width: 45%;
	}
	.district-status span {
		font-size: 22px;
	}
	.news-events ul, .deadlines ul {
		padding-left: 15px;
		padding-right: 0;
	}
	.news-events li, .deadlines li {
		padding-left: 0;
		padding-right: 0;
	}
	.custom-select {
		padding: 5px;
		font-size: 14px;
		width: 250px;
	}
	div.ct-language {
		padding-top: 3px;
	}
	.custom-select select {
		font-size: 14px;
		padding: 2px 10px;
		width: 378px;
		*width: 250px;
	}
	select.custom-select {
		margin: 20px;
		font-size: 16px;
		height: 50px;
	}
	.custom-submit {
		padding: 10px;
		font-size: 20px;
	}
}