html {
	font-family: Bahnschrift, Arial, sans-serif;
	font-size: 14pt;
	height: auto;
	margin: 0px;
	border: none;
	padding: 0px;
	color: black;
}

header {
	background-color: #ffffff; /*white*/
	margin: inherit;
	border: inherit;
	padding: inherit;
}

a {
	font-family: inherit;
	font-size: inherit;
	text-align: inherit;
	color: inherit;
	background-color: inherit;
	text-indent: inherit;
	text-decoration: underline;
}

a:hover {color: #3388ff;}

.navBar {
  overflow: hidden;
  background-color: #f7e224;
  width: 100%;
  padding: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
}

.navBar a {
  float: left;
  color: #f7e224;
  background-color: #3388ff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 10px;
  margin: 1.5px;
}

.navDropdown {
  	float: right;
  	overflow: hidden;
  	display: none;
}

.navDropdown .btnNavDrop {
	font-size: 16px;
	border: none;
	outline: none;
	color: #f7e224;
	background-color: #3388ff;
	font-family: inherit;
	font-weight: bold;
}

.btnNavDrop {
	padding: 14px;
	border-radius: 10px;
	margin-right: 7px;
	float: right;
}

.navBar a:hover, .navDropdown:hover .btnNavDrop {
  background-color: #f7e224;
  color: #3388ff;
}

#navBarCurrent {
  background-color: #f7e224;
  color: #3388ff;
}

#navBarCurrent:hover {
  background-color: #f7e224;
  color: #3388ff;
}

.navDropContent {
  display: none;
  position: absolute;
  background-color: #f7e224;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  right: 0;
  z-index: 200;
  margin-top: 50px;
}

.navDropContent a {
  float: none;
  color: #f7e224;
  background-color: #3388ff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-radius: 10px;
  margin: 2px;
	min-width: 160px;
}

.navDropContent a:hover {
  background-color: #f7e224;
  color: #3388ff;
}

#navDropContentCurrent {
  background-color: #f7e224;
  color: #3388ff;
}

#navDropContentCurrent:hover {
  color: #f7e224;
  background-color: #3388ff;
}

.navDropdown:hover .navDropContent {
  display: block;
}

body {
	margin: 0;
}

.banner {
	font-family: inherit;
	display: block;
}

#logo {
	max-width: 200px;
	width: 30%;
	padding-left: 10px;
}

figure {
	display: inline-block;
	padding-left: 1.5%;
	padding-top: 1.5%;
	/* float: left; */
	margin: inherit;
}

figcaption {
	float: right;
	padding-left: 1%;
	padding-top: 3%;
}

#logoF {width: 100%; float: top; padding-left: 0px;}
#title {width: 80%; float: right;}

#twitter {
	float: right;
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 2px;
	max-width: 60px;
	width: 12%;
}

#instagram {
	float: right;
	padding-top: 5px;
	padding-right: 2px;
	padding-left: 2px;
	max-width: 60px;
	width: 12%;
}

#facebook {
	float: right;
	padding-top: 5px;
	padding-right: 2px;
	max-width: 60px;
	width: 12%;
}

h1 {
  color: inherit;
	font-family: inherit;
  font-size: 350%;
	display: inline;
	align-content: center;
	justify-content: center;
	overflow: hidden;
}

h2 {
  font-family: inherit;
	padding-top: 0px;
	margin: 0px;
	font-size: 175%;
}

#sidebar {
	background-color: #3388ff;
	float: right;
	width: 30%;
	padding-top: 5px;
	overflow: hidden;
	z-index: 100;
	position: relative;
	min-height: 1220px;
}

#sidebarContainer {
	padding-left: 25px;
	padding-right: 25px;
	min-height: inherit;
	overflow: hidden;
	z-index: 110;
}

.border {
	display: block;
	border: 6px solid #ffffff;
	padding: 10px;
	border-radius: 25px;
}

.btnSidebar {
	color: #3388ff;
	background-color: #ffffff;
	font-family: inherit;
	font-size: 120%;
	font-weight: bold;
  	border: solid #ffffff 4px;
  	outline: none;
  	cursor: pointer;
	text-align: center;
  	transition: 0.3s;
	border-radius: 10px;
	margin-left: 1px;
	margin-right: 1px;
	margin-top: 5px;
	margin-bottom: 5px;
	width: 100%;
	text-decoration: none;
	padding-left: 30%;
	padding-right: 30%;
}

.centerText {text-align: center;}

.bold {font-weight: bold;}
.font120 {font-size: 120%;}

.btnSidebar:hover {
	background-color: #3388ff;
	color: #ffffff;
}

/* Main section*/
#main {
	float: left;
  position: relative;
	width: 70%;
	background-color: #ffffff;
	overflow: hidden;
	z-index: 120;
}

#mainContainer {
	padding: 25px;
	margin: auto;
	z-index: 130;
}

/* Footer */
footer {
	clear: both;
	display: block;
	background-color: black;
	color: white;
	text-align: left;
	font-family: inherit;
	width: 100%;
	z-index: 150;
	position: relative;
	height: 69px;
}

#footerContainer {
	padding-left: 20px;
	z-index: 160;
	background-color: inherit;
}

#footerRight{
	float: right;
	display:block;
	background-color: inherit;
	color: inherit;
	margin-right: 20px;
}

footer a, a:hover{color: #ffffff;}

#designedBy {width: auto;}

#mobileFooter {
	display: none;
	font-size: 80%;
	margin-top: -10px;
	margin-bottom: -10px;
	overflow: hidden;
}

/* Tabs */
.tab {
  overflow: hidden;
  background-color: inherit;
	display: block;
	white-space: nowrap;
	min-width: 100%;
}

.tab a {
	/* Style the buttons that are used to open the tab content */
  color: #3388ff;
	background-color: #f7e224;
	font-family: inherit;
	font-size: 100%;
	font-weight: bold;
	text-align: center;
  float: left;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
	border-radius: 10px;
	border: none;
	margin-left: 1px;
	margin-right: 1px;
	text-decoration: none;
}

.tab a:hover {
	/* Change background and text colour of buttons on hover */
	background-color: #3388ff;
	color: #f7e224;
}

.tab a.active {
	/* Create an active/current tabLink class */
	background-color: #3388ff;
	color: #f7e224;
}

.tabContent {
	/* Style the tab content */
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    /* border-top: none; */
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-right: 0px;
	overflow: hidden;
}

.btnTabDrop {
	font-size: 16px;
	border: none;
	outline: none;
	color: #f7e224;
	background-color: #3388ff;
	font-family: inherit;
	font-weight: bold;
	padding: 14px;
	border-radius: 10px;
	margin-right: 7px;
	float: right;
}

.tabDropdown {
	display: none;
}

.tabDropContent {
  display: none;
  position: absolute;
  background-color: #f7e224;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  left: 0;
	float: left;
  z-index: 200;
  margin-top: 50px;
}

.tabDropContent a {
	/* Style the buttons that are used to open the tab content */
  color: #3388ff;
	background-color: #f7e224;
	font-family: inherit;
	font-size: 100%;
	font-weight: bold;
	/* text-align: center; */
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
	border-radius: 10px;
	margin-left: 1px;
	margin-right: 1px;
	text-decoration: none;
	min-width: 160px;
	width: 160px;
}

.tabDropContent a:hover {
	/* Change background and text colour of buttons on hover */
	background-color: #3388ff;
	color: #f7e224;
}

.tabDropContent a.active {
	/* Create an active/current tabLink class */
	background-color: #3388ff;
	color: #f7e224;
}

.tabDropdown:hover .tabDropContent {
  display: block;
}

.vAlignMiddle {vertical-align: middle;}

/* Index*/

#courtTimes {
	background-color: #3388ff;
	border: 6px solid #000000;
	border-radius: 25px;
	padding: 20px;
	font-size: 120%;
	margin-left: 18%;
	width: 60%;
	display: block;
}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}

/* Hide the images by default */
.slides {
    display: none;
    box-sizing: border-box;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  text-decoration: none;
  box-sizing: border-box;
}

/* Position the "next button" to the right */
.next {
	margin-right: 5px;
  right: 0;
  border-radius: 3px 0 0 3px;
  box-sizing: border-box;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.8);
  box-sizing: border-box;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  box-sizing: border-box;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  box-sizing: border-box;
}

.active, .dot:hover {
  background-color: #717171;
  box-sizing: border-box;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
  box-sizing: border-box;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* About */

#ltaLogo img {
	float: none;
	max-width: 200px;
	max-height: 50px;
	padding-left: 10px;
}

#ltaLogo figcaption {
	float: none;
}

.landscapeFigure {
	float: none;
	border: 1px solid #ccc;
	padding: 10px;
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
}

.landscapeFigure img {width: 100%;}

.portraitFigure {
	float: none;
	border: 1px solid #ccc;
	padding: 10px;
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
}

.portraitFigure img {width: 100%;}

#sitaTrust, #inspiredFacilities, #mayorOfLondon {
	float: none;
	padding: 10px;
	width: 100%;
	margin-left: inherit;
}

#sitaTrust img {width: 40%;}
#inspiredFacilities img {width: 50%;}
#mayorOfLondon img {width: 40%;}

#sitaTrust, #inspiredFacilities, #mayorOfLondon figcaption{float: none;}

#floodlitHardCourts {float: none; width: 80%;}

#googleMaps {
	border: solid 1px #ccc;
	width: 80%;
	height: 500px;
}

#clayCourtOpening {
	float: none;
	border: 1px solid #ccc;
	padding: 10px;
	width: 80%;
}

#clayCourtOpening img {width: 100%;}

#clayCourtOpening figcaption {
	float: none;
	max-width: 500px;
	padding: 10px;
}

#committeeContainer {
	display: block;
	width: 100%;
	text-align: center;
}

#committeeContainer img {
	max-width: 200px;
	max-height: 300px;
}

#committeeContainer figure {
	display: inline-block;
	float: none;
}

#committeeContainer figcaption {
	float: none;
	text-align: center;
}

.imageBlock {
	display: block;
	width: 100%;
	text-align: center;
	overflow: hidden;
}

#coachesContainer {
	display: block;
	width: 100%;
	text-align: center;
}

#coachesContainer img {
	max-width: 200px;
	max-height: 300px;
	float: left;
}

#coachesContainer figure {
	/* float: left;
	overflow: auto; */
	
	display: flex;
	align-items: center;
}

#coachesContainer figcaption {
	float: right;
	text-align: left;
	/* display: inline; */
}

.committeeCoachPhoto {
	width: 200px;
	height: 300px;
}

.imgBorder {
	border: 1px solid #ccc;
	padding: 10px;
}

/* Adults */
#newMemberOffer {
	background-color: #3388ff;
	border: none;
	border-radius: 10px;
	padding: 20px;
	font-size: 120%;
	margin-left: 18%;
	width:60%;
}

#newMemberPoster {
	width: 95%;
	margin-left: 2.5%;
}

.font80 {font-size: 80%;}

#teaRota, #bestTea {
	width: 40%;
	margin: 1%;
}

#teaRota {float: left;}
#bestTea {float: right;}

#teaRota img {
	width: 100%;
	border: none;
}

#bestTea img {
	width: 100%;
	border: none;
}

#teaRota figcaption {float: none;}

#bestTea figcaption {float: none;}

/* Juniors */
.characters {
	width: 95%;
	float: left;
	padding: 2.5%;
}

.children {
	width: 95%;
	float: right;
	padding: 2.5%;
}

.miniTennisColumn1 {
	width: 35%;
	/* display: none; */
}

.miniTennisColumn2 {
	width: 30%;
}

.miniTennisColumn3 {
	width: 35%;
}

#juniorsWatching {
	width: auto;
	float: top;
	margin: 1%;
}

#juniorsWatching img {
	width: 100%;
	border: none;
}

#juniorsWatching figcaption {float: none; text-align: center;}

#juniorsFinalsDay {
	width: 60%;
	float: none;
	margin: 1%;
}

#juniorsFinalsDay img {
	width: 100%;
	border: none;
}

#juniorsFinalsDay figcaption {float: none; text-align: center;}

#summerHolidayFlyer {
	width: 98%;
	padding-left: 1%;
	padding-right: 1%;
}

/* Competitions */
#winnersContainer {
	display: block;
	width: 100%;
	text-align: center;
}

#winnersContainer img {
	width: 250px;
	height: 375px;
}

#winnersContainer figure {
	display: inline-block;
	float: none;
}

#winnersContainer figcaption {
	float: none;
	text-align: center;
}

.boxLeagueBox {
	background-color: #3388ff;
	border-radius: 10px;
	width: 80%;
	margin-left: 10%;
	padding: 10px;
}

.boxLeagueGroup {width:100%;}
.boxLeagueLeaderboard {width: 48%;}

.leagueTeamImage {
	border: solid 1px #ccc;
	padding: 5px;
	vertical-align: top;
}

.leagueTeamImage img {
	max-width: 350px;
	width: 100%;
}

.leagueTeamImage figcaption {
	float: none;
	padding-top: 5px;
	max-width: 300px;
	text-align: center;
}

/* Socials*/
.socialPhoto {
	border: solid 1px #ccc;
	padding: 5px;
	margin: 5px;
}

.socialPhoto img {
	max-width: 350px;
	width: 100%;
}

/* Membership */
.membershipTable {
	width: 100%;
	border: solid 1px #ccc;
	border-collapse: collapse;
}

.membershipTable th {
	text-align: left;
	border: solid 1px #ccc;
	padding: 3px;
}

.membershipTable tr {
	border: solid 1px #ccc;
}

.membershipTable td {
	border: solid 1px #ccc;
	padding: 3px;
}

.description {font-size: 85%;}

.joinNow {
	border: 6px solid #000000;
	font-size: 200%;
	background-color: #ffffff;
	color: #000000;
	border-radius: 10px;
	font-weight: bold;
	font-family: inherit;
	padding: 3px;
	text-decoration: none;
}

.joinNow:hover {
	color: #ffffff;
	background-color: #000000;
}

.hoverBlue:hover {color: #3388ff;}

/* Fundraising */

#giftAid {
	display: block;
	/* float: right; */
	padding-left: 10px;
	width: 30%;
	/* width: 232px; */
	/* height: 130px; */
}

#easyFundraising {
	height: 1701px;
	scroll-behavior: none;
	width:90%;
}

.easyFundraisingBtn {
	border: 6px solid #000000;
	font-size: 200%;
	background-color: #3388ff;
	color: #ffffff;
	border-radius: 10px;
	font-weight: bold;
	font-family: inherit;
	padding: 8px;
	text-decoration: none;
}

.easyFundraisingBtn:hover {
	color: #3388ff;
	background-color: #ffffff;
}

/* Stringing */

.stringingTable {width:60%;}
#stringingArrow {width: 90%; padding-left: 5%; padding-right: 5%;}

#gripTable {width:60%;}

/*If on a mobile or tablet, these changes are applied*/
@media (max-width: 1061px) {
  .buttons {display: none;}
  .navDropdown {display: inline-block;}
	#logoF figcaption {display: none;}
	#logo {width:40%}
	#sidebar {
		float: left;
		width: 100%;
	}
	#designedBy {width: 30%;}
	#mobileFooter {
		display: inline-block;
	}
	#desktopFooter {display: none;}

	#main {width: 100%;}

	#sitaTrust img {width: 70%;}
	#inspiredFacilities img {width: 90%;}
	#mayorOfLondon img {width: 70%;}

	#coachesContainer .committeeCoachPhoto {
		width: 100px;
		height: 150px;
	}
	
	#coachesContainer figure {
		float: left;
		overflow: auto;
	}
	
	#coachesContainer figcaption {
		text-align: left;
		display: inline;
	}

	.tab {display: none;}
	.tabDropdown {display: inline-block;}

	#newMemberOffer {
		width: auto;
		margin: 0px;
	}
	#joinNowAdults {margin-left: 2%;}
	#teaRota, #bestTea {width: 90%;}

	.miniTennisColumn1 {display: none;}
	.miniTennisColumn2 {width: 50%;}
	.miniTennisColumn3 {width: 50%;}
	#juniorsFinalsDay {width: 90%;}

	.boxLeagueLeaderboard {width: 100%;}

	#giftAid {width: 50%;}
	#easyFundraising {height: 1965px;}

	.stringingTable {width:100%; border: 1px solid #ccc; border-spacing: 0px;}
	.stringingTable td {border: 1px solid #ccc;}
	#gripTable {width:100%; border: 1px solid #ccc; border-spacing: 0px;}
	#gripTable td {border: 1px solid #ccc;}
}

@media (min-width: 1062px) and (max-width: 1250px) {
	html {font-size: 12pt;}
	#easyFundraising {height: 1540px;}
}