/********************************************************************************************* 

x. Smaller than 1400px

*********************************************************************************************/
@media only screen and (max-width:1400px) {
	
	#container {
		padding: 50px 0;
	}
	
	.wrapper {
		width: auto;
		margin: 0 50px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 1200px

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	
	#calendar,
	.hero {
		margin: 0 0 30px 0;
	}
	
	#container {
		padding: 30px 0;
	}
	
	.navigation.bottom ul, 
	.navigation.top ul {
		text-align: right;
	}
	
	.navigation.drop-down {
		text-align: right;
	}
	
	.navigation.drop-down span.label {
		white-space: normal;
	}
	
	.navigation.drop-down ul.sub-menu li {
		min-width: 0;
	}
	
	.navigation.bottom ul li:last-child,
	.navigation.top ul li:last-child {
		margin-right: 0 !important;
		padding-right: 0 !important;
	}
	
	.navigation.bottom ul li {
		margin: 0 10px;
	}
	
	.navigation.top ul li {
		padding: 0 10px;
	}
	
	.wrapper {
		margin: 0 30px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 1024px

*********************************************************************************************/
@media only screen and (max-width:1024px) {
	
	#footer .logo,
	#header .logo {
		width: 150px;
	}
	
	html, body {
		font-size: 14px;
	}
	
	input, 
	textarea {
	  -webkit-appearance: none;
	  -webkit-border-radius: 0;
	}
	
}

/********************************************************************************************* 

x. Smaller than 900px

*********************************************************************************************/
@media only screen and (max-width:900px) {
	
	.accordion .content {
		padding-left: 0;
	}
	
	.column .inside.extra,
	h2.ribbon,
	.navigation.bottom .wrapper  {
		padding: 0;
	}
	
	#container {
		padding: 20px 0;
	}
	
	#container .column.width-30,
	#container .column.width-70,
	.page-template-home .column.width-30,
	.page-template-home .column.width-40 {
		width: 100%;
	}
	
	#container .column.width-70 {
		margin: 0 0 20px 0;
	}
	
	#footer {
		padding: 20px 0;
	}
	
	h2 span.ribbon,
	.navigation.bottom ul,
	.navigation.top {
		display: none;
	}
	
	#header .hamburger {
		display: block;
	}
	
	#header .logo {
		width: 125px;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		top: 50%; bottom: auto;
	}
	
	#header .tagline { 
		margin: 0;
		padding: 0 0 5px 0;
	}
	
	#header .wrapper.top {
		z-index: 10;
	}
	
	.hero {
		margin: 0 -20px 20px -20px;
	}
	
	.hero .inside {
		padding: 20px 20px 5px 20px;
	}
	
	.navigation.bottom {
		background: none;
		position: absolute;
		top: 0; bottom: 0;
		left: 0; right: 0;
		overflow: hidden;
	}
	
	.navigation.bottom .wrapper {
		width: 100%; height: 100%;
		position: relative;
	}
	
	.navigation.mobile {
		display: block;
		width: 260px; height: auto !important;
		position: fixed;
		top: 0; bottom: 0;
		right: -260px;
		overflow: auto;
	}
	
	#search {
		padding: 30px;
	}
	
	.utility {
		margin: 0 0 120px 0;
	}
	
	.wrapper {
		margin: 0 20px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 700px

*********************************************************************************************/
@media only screen and (max-width:700px) {
	
	.carousel-wrapper .bx-viewport {
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0);
		-o-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		position: relative;
		top: 0;
	}
	
	.carousel-wrapper .caption {
		display: none;
	}
	
	.carousel-wrapper li {
		height: auto;
	}
	
	.carousel-wrapper .image img,
	.hero .image img, 
	.hero .images img {
		width: 100%; height: auto;
		min-width: 0;
		min-height: 0;
		-moz-transform: translateX(0) translateY(0);
		-webkit-transform: translateX(0) translateY(0);
		-o-transform: translateX(0) translateY(0);
		-ms-transform: translateX(0) translateY(0);
		transform: translateX(0) translateY(0);
		position: relative;
		top: 0; left: 0;
	}
	
	.carousel-wrapper .image img {
		width: 200%;
	}
	
	.coaches {
		width: auto;
	}
	
	#footer .column.count-1,
	#footer .column.count-3 {
		width: 40%;
	}
	
	#footer .column.count-2 {
		width: 20%;
	}
	
	#footer .logo {
		width: 100px;
	}
	
	.hero {
		min-height: 0;
		overflow: hidden;
	}
	
	.hero .carousel-wrapper,
	.carousel-wrapper .image {
		position: relative;
	}
	
	.hero .carousel-wrapper li,
	.hero .image {
		max-height: 400px;
	}
	
	.hero .column.left {
		display: none;
	}
	
	.hero .column.right {
		width: 100%;
		position: relative;
	}
	
	.hero .image, 
	.hero .images {
		border-left: 0;
		position: relative;
	}

}

/********************************************************************************************* 

x. Smaller than 600px

*********************************************************************************************/
@media only screen and (max-width:600px) {
	
	.accordion .content {
		padding: 20px 0 0 0;
	}
	
	#footer .column.count-1,
	#footer .column.count-3 {
		width: 50%;
	}
	
	#footer .column.count-2,
	.schedule table td:nth-child(4),
	.schedule table th:nth-child(4),
	#table-staff-directory td.department,
	#table-staff-directory th.department,
	.utility li:nth-last-child(1),
	.utility li:nth-last-child(2) {
		display: none;
	}
	
	#header .logo {
		width: 100px;
	}
	
	table.table tbody td {
		padding: 10px;
	}
	
	.utility {
		margin: 0 0 100px 0;
	}
	
}

/********************************************************************************************* 

x. Smaller than 500px

*********************************************************************************************/
@media only screen and (max-width:500px) {
	
	.accordion table.condensed {
		width: 100%;
	}
	
	.accordion table.condensed td {
		display: block;
	}
	
	#footer .column.count-1,
	#footer .column.count-3 {
		width: 100%;
	}
	
	#footer .small {
		display: none;
	}
	
	#header {
		border-top: none;
	}	
	
	h2 span.label {
		padding: 14px 10px 10px 10px;
	}
	
	.utility a {
		padding: 5px 10px;
	}
	
}

/********************************************************************************************* 

x. Smaller than 400px

*********************************************************************************************/
@media only screen and (max-width:400px) {
	
	.alignleft,
	.alignright,
	.aligncenter {
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		display: block;
	}
	
	.carousel-wrapper .play,
	.hero .image .play,
	.hero .images .play {
		font-size: 60px;
	}
	
	.carousel-wrapper .play span.title,
	.hero .image .play span.title,
	.hero .images .play span.title {
		display: none;
	}
	
	.coaches .column.width-50 {
		width: 100%;
	}
	
	.fc-toolbar h2 span.label {
		min-width: 0;
	}
	
	#header .wrapper.bottom {
		position: absolute;
		bottom: 0; 
		left: 0; right: 0;
	}
	
	.navigation.bottom {
		width: 100%; height: 130px;
		position: relative;
	}
	
	.schedule table td:nth-child(1),
	.schedule table th:nth-child(1),
	#table-staff-directory td.extension,
	#table-staff-directory th.extension,
	#table-staff-directory thead tr:first-child {
		display: none;
	}
	
	.utility {
		text-align: center;
		background: #F5B324;
		margin: 0 -20px;
		float: none;
	}
	
	.utility a {
		padding: 10px 5px;
	}
	
	.utility li {
		margin: 0;
		display: inline-block;
		zoom: 1; 
		*display: inline;
		float: none;
	}
	
}