@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400');

BODY { 
	margin:0; 
	font-family: 'Source Sans Pro'; 
	font-size:1em; /*.95em; */
	line-height: 1.343rem; 
	background:#fff;
}

H1,H2,H3 { font-weight:400; }
H1 { font-size: 1.8rem; margin: .67rem 0; line-height: 2.6rem; }
H2 { font-size: 1.5rem; margin: .75rem 0; line-height: 2.165rem; }
H3 { font-size: 1.25rem; margin: .83rem 0; line-height: 1.812rem; }

DIV { box-sizing:border-box; } 

TABLE { margin:1em 0; border-collapse:collapse; border:1px solid #ddd; }
TH, TD { padding:3px 10px; } 
A { color:#00f; }
A:HOVER { color:#51a; }
SUP { font-size:x-small; }

.desktop { display:block; }
.mobile { display:none; }

#wrapper, .sticky { width:80%; min-width:900px; max-width:1200px; margin:0 auto; background:none; }

/* The sticky class is added to #header_wrapper with JS when window.pageYOffset reaches #header_wrapper offsetTop scroll position */
.sticky { position: fixed; top:0; background:#fff !important; }
.sticky + #top_img { margin:120px auto 0; }

.section { clear:both; padding:2em 0; border-bottom:0px solid #ccc; } 
.section .col { float:left; }

.section#header_wrapper { 
	z-index:100;
	margin:0 auto;
	padding:0; 
	background:#fff;
	}

	#header { float:left; margin:0; width:auto; padding:1em 0;  }
		
	#nav { float:right; width:auto; margin:1em 0 0 0; text-align:right; }
		#nav UL { list-style:none; margin:0; }
		#nav UL LI { list-style:none; display:inline; margin:0 0 0 20px; line-height:2em; }
		#nav UL A { text-transform:uppercase; text-decoration:none; font-weight:bold; color:#555;  }
		#nav UL A:HOVER {}


.section#top_img IMG { width:100%; height:auto; } 

.section#welcome { background:#fff; }
.section#welcome .col { width:31%; background:#fff; }
.section#welcome .col:nth-child(2) { margin:0 3.5%; }
.section#welcome .col:nth-child(2) TABLE {  }
.section#welcome .col:nth-child(3) {  }

.section#applications .col { width:48%; }
.section#applications .col:nth-child(1) { margin:0 2% 0 0;  }
.section#applications .col:nth-child(2) { float:right; }
#integration_partners { margin:2em 0 0 40px; }

#map { width:100%; height:1400px; max-height:100vh; }

#testimonials_wrapper { width:60%; max-height:80vh; overflow:auto; }
	.testimonial { font-style:italic;  }
#club_logos { float:right; width:36%; margin:0;   }
#club_logos { max-height:80vh; overflow:auto; text-align:center; }
#club_logos IMG { max-width:100px; max-height:4em; width:auto; height:auto; margin:.5em; vertical-align:baseline; }

.section#contact_wrapper .col { }
.section#contact_wrapper .col#about { float:right; width:36%; margin:0; }
.section#contact_wrapper .col#contact { float:left; width:60%; padding:0 20px; background:#f8f8f8; }
#message { height:8em; width:60%; min-width:300px; padding:1em 10px;	}

.section#subscription_payments_wrapper {}
.section#subscription_payments_wrapper #stripe_logo_wrapper { float:left; width:300px; height:100px; margin:1em 20px 1em 0; padding:2em 20px; border:1px solid #ccc; text-align:center; }

.section#subscription_payments_wrapper #gocardless_logo_wrapper { float:left; width:300px; height:100px; margin:1em 0; padding:2em 20px; border:1px solid #ccc; text-align:center; }

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

	BODY { margin:0; }

	IMG { width:100%; height:auto; }
	
	DIV { clear:both; max-width:100%; min-width:100%; width:100%; }

	.desktop { display:none; }
	.mobile { display:block; }

	#wrapper { width:100%; min-width:100%; max-width:100%; margin:0 auto; padding:0 5%; background:#fff; }

	/* The sticky class is added to #header_wrapper with JS when window.pageYOffset reaches #header_wrapper offsetTop scroll position */
	.sticky { position: fixed; top:0; background:#fff !important; }
	.sticky + #top_img { margin:120px auto 0; }
	.sticky { width:100%; min-width:100%; max-width:100%; padding:0 5%; }

	.section { clear:both; margin:0; padding:0; border-bottom:0; } 
	.section .col { float:none; clear:both; }

	.section #header { padding:.5em; }
	.section #header IMG#mycourts_logo { max-width:150px; height:auto; }
	.section #nav { display:none; padding:0; }

	#nav_mobile { padding:0 0 1em 0; background:#fff; }

	#menu_control { 
		margin:0;
		padding:.25em 0;
		font-weight:bold;
		background:#eee; 
		}
		
	#menu_control A { text-decoration:none; color:#000;	}

	#menu_wrapper {
		z-index:2;
		height:100%;
		width:0; 
		min-width:0;
		padding:1em 0;
		position: fixed;
		top: 0;
		left: 0;	
		overflow-x: hidden;
		transition: .5s;
		white-space:nowrap;
		font-size:1.4rem;
		background:#fafafa;
		line-height:2em;
	}
	
	#menu_wrapper A { text-decoration:none; color:#000;	}
	
	A SPAN.burger { font-size:1.5em; position:relative; vertical-align:text-bottom; margin-right:.2em; padding:0 5px; }
	.close_wrapper { font-size:2.5em; text-align:right; padding:2% 5% 2%; }
	#menu_links { padding:0 5%; }

	.section#welcome .col { width:100%;  }
	.section#welcome .col:nth-child(2) { margin:0; }
	#anniversary_logo { max-width: 150px; height:auto; }


	.section#applications .col { width:100%; }
	.section#applications .col:nth-child(1) { margin:0;  }
	.section#applications .col:nth-child(2) { float:none; }
	#integration_partners { max-width:161px; height:auto; }

	
	#testimonials_wrapper{ max-height:60vh; }
	.club_logos { max-height:none; overflow:visible; text-align:center; }
	.club_logos IMG { max-width:60px; max-height:3em; width:auto; height:auto; margin:.5em; }


	.section#contact_wrapper .col { }
	.section#contact_wrapper .col:nth-child(1) { float:none; width:100%; margin:0; }
	#message { width:90%; min-width:unset; }
	.section#contact_wrapper .col:nth-child(2) { float:none; width:100%;  }
	
	#map { width:100%; height:100vh; max-height:100vh; }

	.testimonial { display:block; margin:.5em 0; padding:1em 15px; border:1px solid #ccc; background:#fafafa; }

	IMG#miles_montelius { width:40%; max-width:120px; height:auto; }
	
	.section#footer { text-align:center; }

}