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

x. larger than 2500px

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

@media (min-width: 2500px) { 
	.wrapper { 
		width: 1800px;
	}
}


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

x. larger than 3500px

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

@media (min-width: 2500px) { 
	.wrapper { 
		width: 2400px;
	}

	p {
		font-size: 35px;
	}

	h1 {
		font-size: 40px;
	}

	h3 {
		font-size: 2.375em;
	}

	.navigation.bottom ul a, .navigation.top ul a {
		line-height: 1.5em;
		font-size: 35px;
	}

	.utility a {
		font-size: 1.5em;
		line-height: 1.2em;
	}

	.navigation.drop-down ul.sub-menu a, .navigation.drop-down span.label { 
		font-size: 1.2rem;
		line-height: 1.2em;
	}

	.navigation.secondary ul.sub-menu ul.sub-menu a { 
		font-size: 1.2rem;
	}

	.navigation.secondary span.label { 
		font-size: 1.5rem;
	}

	.accordion .title {
		line-height: 50px;
		height: 50px;
		font-size: 1.5rem;
	}

	table.table {
		font-size: 1.2em;
	}

	#header .logo {
		width: 250px;
	}

	.hero { 
		min-height: 700px;
	}
}

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

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. Larger 900px

*********************************************************************************************/
@media (min-width: 901px){ 
.microsfot-container.mobile { 
        display: none;
        
        }  

}

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

x. Smaller than 900px

*********************************************************************************************/
@media only screen and (max-width:900px) {
	
        .microsfot-container.desktop { 
        display: none;
        
        }  
        
        .microsfot-container.mobile img {
    margin-top: 40px;
} 

        
	.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%;
	}
        
        .width-42, .width-57, .width-50, .two-columns.width-70{ 
        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;
	}

	.flex-columns { 

		gap: 20px;
	}

	.social-wall, .title-row, .image-row, .button-row, .intro-row { 
		padding-block-end: 40px;
	}
}

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

x. Smaller than 768px

*********************************************************************************************/
@media only screen and (max-width:767px) {

.flex-columns { 
	flex-wrap: wrap;
}
.width-33 { 
	width: 100%;
}
.title-row h1 { 
	text-align: left;
	font-size: 2.5rem;
}
}




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

x. Smaller than 700px

*********************************************************************************************/
@media only screen and (max-width:700px) {
	
	.carousel-wrapper li, .carousel-wrapper .image img {

		aspect-ratio: 1.43 / 1;
	
	}	
	
	.carousel-wrapper .caption {
		display: none;
	}
	
	
	.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 .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;
	}
	
}