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

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

	/* BODY { font-size:1.2rem; line-height: 1.6875rem;  } */
	BODY { font-size:1.1rem; line-height: 1.375rem;  }

	/* font-sizes already defined 
	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; }
	*/
	
	IMG { max-width:100%; height:auto; }
	IMG.icon_sendmail, IMG.icon_whatsapp { max-width:none; }

	FORM:not(#login_form):not(#booking_form):not(.my_booking_form) { display: inline-block; width:auto; margin:.5em 0;  padding: .5em 20px; background:#f8f8f8; }
	
	INPUT:not(INPUT[type=submit]), SELECT { background:#fff; }
	
	LABEL:HOVER { background:lightyellow; cursor:pointer;  }

	input#username, input#password, input[type=text], input[type=number], input[type=email], input[type=tel], select, textarea {
		width: auto;
		margin: .25em auto;
		padding: 5px 10px;
		background:#fff;
	  }
	#remember{ margin: .75em auto; }
	
	INPUT[type=submit] { padding: 5px 10px; }
	
	INPUT[type=checkbox] { 	margin: .25em auto; /* can't be styled within */ }
	
	INPUT.amount { width:20%; }


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

	#wrapper, #header, #col_wrapper, #left_col, .panel, #left_col .panel, #login_panel, #right_col, #footer, #sponsors, #hbi {
		clear:both;
		margin: 0 auto;
		padding:0;
		width:100%;
		border:none;
	}

	#wrapper { min-width:100%; max-width:100%; }

	#right_col .c1, #right_col .c2 { float:none; clear:both; margin:0; padding:0; width:100%; border:none; }


	/*************************/
	
	#header {
		height:3em;
		background-repeat:no-repeat;
		background-size:contain;
		background-position:center;
	}

	/*************************/
	
	#nav_cms { display:none; }


	#col_wrapper {  }
	
	#left_col {  }
	#left_col .panel { padding:0; border:0; }

	
	#login_form { padding:1em 5%; }

	.content { margin:0 5%; padding:0 0 2em 0;  }
	
	.news_content A {  
		/* These are technically the same, but use both 
		overflow-wrap: break-word;
		word-wrap: break-word;
		
		-ms-word-break: break-all;
		 This is the dangerous one in WebKit, as it breaks things wherever 
		 */
		/*word-break: break-all;*/
		/* Instead use this non-standard one:*/ 
		word-break: break-word;

		/*Adds a hyphen where the word breaks, if supported (No Blink) 
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		hyphens: auto;	
		*/
	}
	
	#content_anchor { padding-top:3em; }

/*	UL.tabs LI { display:inline-block; margin:1% 1% 1% 0;   }*/

	UL.tabs LI A {
		margin:0 .5% 1% 0;
		padding:2px 6px; 
		} 

	.courts_wrapper {
		display: flex;
		align-items:top;
		background-color: #fff;
		padding:0;
		overflow: scroll;
		overflow-x:scroll;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		text-align:left;
	}
/*
	DIV.nested_column {
		flex: none;
		width:75% !important;
		min-width:75% !important;
		max-width:75% !important;
		margin:0 2% 0 0 !important;
		padding:0 2% 0 0 !important;
		border-right: 1px dotted #ccc;
		white-space:pre-wrap !important;
	}
*/
	DIV.nested_column {
		flex: none;
		width:65% !important;
		min-width:65% !important;
		max-width:75% !important;
		margin:0 2% 0 0 !important;
		padding:0 2% 0 0 !important;
		border-right: 1px dotted #ccc;
		white-space:pre-wrap !important;
	}


	DIV.nested_column:last-child { /* this doesn't work */
		margin:0 !important;
		padding:0 !important;
		border-right:0 !important;
	}
	
	.courtname { margin: 0 0 1em 0; padding: 0 2%; font-weight:bold; }
	.courtdescr { padding: 0 2%; }
	.court_available, .court_booked, .slot {    }
	
	.starttime { width:50px;  }
	.by { display:inline-block; width:calc(100% - 50px);  }
	.showcost, .opponent, .showcancellation, .cost { margin-left:50px; }

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

	FORM#booking_form { display:inline; width:100%; margin:0; padding:0; background:none; }
	FORM#booking_form DIV.booknow_wrapper { display:block; margin:1em 0; padding:10px; border:1px solid #ccc; text-align:center; background:lightyellow; }
	FORM#booking_form DIV.booknow_wrapper INPUT[type=submit] { display:block; clear:both; margin:1em auto; }
	
	FORM#score_form { max-width:90%; }

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

	#map { width:100%; height:85vh; }

	
	#ico_box { clear:both; float:none; display:block; width:auto; margin:1em 0;    }

	#footer { 
		clear:both;
		margin:0 auto;
		width:90%;
		padding:5% 5%;
		line-height:1em;
	}

	#footer_club { clear:both; }
	
	/********************/

	#nav_cms, #desktop_member_login_menu  { display:none; }

	/********************/
	
	.table_wrapper {
		display: block; /* fixes iOS table overlapping sticky menu */
		width:100%;
		overflow: scroll;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		/*white-space: nowrap; if necsessary, add this property on the web page */
	}
	
	TD.mobile_nowrap { white-space:nowrap; }
	
	.table_wrapper TABLE.league TR TD:first-child { white-space: nowrap; } 
	
	

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

	#menu_control { z-index:2; width:100%; padding:.75em 0; line-height:1.25em; }

	#menu_control DIV { z-index:100; padding:0 5%; }
	
	#menu_control A { text-decoration:none; text-transform:uppercase; }
	#menu_control A SPAN.burger { font-size:2em; position:relative; vertical-align:text-bottom; margin-right:.2em; }
	
	#menu_control_show_member { display:inline-block; float:right; max-width:70%; color:white; text-transform:none !important; text-align:right; }
	
	#menu_wrapper {
		z-index:2;
		height:100%;
		width:0; 
		padding:1em 0;
		position: fixed;
		top: 0;
		left: 0;	
		overflow-x: hidden;
		transition: .5s;
		white-space:nowrap;
		font-size:1.4rem;
	}

	.close_wrapper {   margin-right:1.5em; text-align:right; }
	.close_wrapper A { text-decoration:none; font-size:3em; }

	#menu_show_member { margin:.5em 10%; }
	
	#menu_links { padding:0 0 5em 0; }

	#menu_links UL {
		list-style-type: none;
		padding: 0;
		margin:0 10%;
		}

	#menu_links UL LI {
		margin:0; padding:0;
		}
	/*#menu_links UL LI:first-child A:nth-child(1) { border-top:1px solid yellow; }*/

	#menu_links UL LI A {
		display:block;
		padding: .5em 0;
		text-decoration:none;
		border-bottom:1px solid #ccc;
		}
		
	#menu_links UL LI UL { display:none; margin:0 10%; }

	#menu_links UL LI UL {
		list-style-type: none;
		}

	/*#menu_links A.na { color:#ccc; } don't define colours here */


	/********************/
	
	.panel DIV.index_nav { padding:1em 5%; }
	.index_nav UL LI A { background:none; }
	.index_nav UL LI UL LI { }
	.index_nav UL LI UL LI A { display:inline-block; margin:0 10px .25em 15px; font-weight:normal; background:none; }
	.index_nav A:HOVER { background:lightyellow; }
	
	#index_nav_footer { border-top:1px solid #ccc; margin:2em 0 0 0; padding:2em 0 0 0; }

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

	#payplay_bookingsheets_wrapper { 
		clear:both;
		margin:0 auto; 
		padding:1em 5%;
		width:auto; 
		background:#f8f8f8;
	 }
	#payplay_bookingsheets_wrapper DIV.panel { width:auto; margin:0; padding:0; background:none; }
	#payplay_bookingsheets_wrapper DIV.panel DIV#select_date { margin:0; padding:0; background:none; }
	
	/********************/

	.overlay { padding:0; }
	.overlay_close A { font-size:3em; }
	.overlay_content {
		margin:0;
		padding:5%;
	}
	
	/*************************/


	#sponsors { clear:both; width:100%; margin:0; padding:0; background:#fff; text-align:center; }
	.sponsor {
		clear:both;
		width: 100%;
		height:auto;
		margin:0;
		padding:2em 0;
		border-bottom:1px solid #ccc;
		white-space: nowrap;
		text-align: center; 
	}
	#sponsor_us {
		clear:both;
		width: 100%;
		height:auto;
		margin:0;
		padding:2em 0;
		border-bottom:1px solid #ccc;
		white-space: nowrap;
		text-align: center; 
	}
	.sponsor SPAN { /*https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div*/
		display:none;
	}
	.sponsor IMG {
		vertical-align: middle;
		max-width: 80%;
		height:auto;
		border:0;
	}
	
	DIV#mycourts_wrapper { padding:2em 0; text-align:center;  }
	DIV#mycourts_wrapper.content A { white-space:nowrap !important;  }

	#overlay { padding:0; }
	#overlay_close A { font-size:3em; }
	#overlay_content_wrapper {
		margin:0;
		padding:5%;
	}


}