/************************************************************************************
RESET
*************************************************************************************/

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/************************************************************************************
GRID
*************************************************************************************/

.container {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 5%;
  box-sizing: border-box;
}

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

@media (min-width: 800px) {

  .column,
  .columns {
    margin-left: 4%;
    padding: 0;
  }

  .column:first-of-type,
  .columns:first-of-type {
    margin-left: 0;
  }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%;           }

  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
}

.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}

/************************************************************************************
GENERAL STYLING
*************************************************************************************/

@-webkit-keyframes fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadein {
  from {opacity: 0;}
  to {opacity: 1;}
}

:root {
  --blue: #559bcc;
  --blue-light: #89c8e2;
  --yellow: #f5e843;
  --red: #d12f26;
  --red-dark: #ae2b2a;
  --orange: #e89e33;
}

body {
  background-color: #fff;
  font-family: "Overpass", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
	font-size: 22px;
  letter-spacing: .5px;
	color: #555;
	animation: fadein .3s ease-in .1s both;
}

a:link, a:visited {
	transition: transform .4s;
	outline: none;
	color: var(--red-dark);
}

a:active {
	outline: none;
}


a.button {
  text-decoration: none;
  font-family: "Jockey One", sans-serif;
  font-style: normal;
  font-weight: 400;
  display: inline-block;
  color: #333;
  border-radius: 25px;
  box-shadow: #333 0 4px 0 0;
  border: 2px solid #333;
  padding: 10px 25px;
  background-color: var(--yellow);
  transition:  .4s;
}

a.button:hover {
  box-shadow: #333 0 0 0 0;
  transform: translate(0px, 4px);
}

p {
  margin: 0 0 20px;
}

h1, .h1 {
  font-family: "Jockey One", sans-serif;
  font-style: normal;
  font-size: 45px;
  font-weight: 400;
  color: var(--blue);
  letter-spacing: 2px;
  margin: 40px 0 30px;
	line-height: 1.3;
  text-transform: uppercase;
}

h1 {
  margin: 100px 0;
}

h2 {
  font-family: "Jockey One", sans-serif;
  font-style: normal;
  font-size: 28px;
  font-weight: 400;
  color: var(--blue);
  letter-spacing: 1px;
  margin: 40px 0;
	line-height: 1.3;
}

h3, h4, h5 {
  font-family: "Jockey One", sans-serif;
  font-style: normal;
	font-size: 20px;
  font-weight: 400;
  color: var(--blue);
	letter-spacing: 1px;
	margin: 0 0 20px;
}

em {
  font-style: italic;
}

b, strong {
	font-weight: 800;
}

hr {
  border-width: 0;
  border-top: 2px solid var(--blue);
  margin: 30px 0;
}

ul {
  margin: 0 0 20px 0;
}



@media (max-width: 500px) {
  body {
    font-size: 18px;
  }

  h1 {
    font-size: 40px;
    letter-spacing: 3px;
  }

  h2 {
    font-size: 28px;
    letter-spacing: 1px;
    margin: 30px 0;
  }

  h3, h4, h5 {
  	font-size: 20px;
  	letter-spacing: 1px;
  	margin: 0 0 20px;
  }

}

/************************************************************************************
HEADER
*************************************************************************************/

.logo img {
  margin: 15px 0;
  width: 200px;
}

.menu {
  width: 100%;
  background-color: var(--blue);
  padding: 5px 0;
  font-family: "Jockey One", sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #fff;
}

.menu #open {
  display: block;
  padding: 0 15px;
  font-size: 20px;
  line-height: 50px;
}

.menu #close {
  display: none;
  padding: 0 15px;
  font-size: 20px;
  line-height: 50px;
  border-bottom: 1px solid #fff;
}

.menu nav {
  height: 0;
  overflow: hidden;
}

nav ul {
	padding: 0;
  margin: 0;
	list-style: none;
	position: relative;
}

nav ul li {
	display: block;
	background-color: var(--blue);
  border-top: 1px solid #fff;
}

nav ul li:first-of-type {
  border: none;
}

nav ul ul li {
  border: none;
}

.menu nav a {
	display: block;
	padding: 0 15px;
	color: #fff;
	font-size: 20px;
	line-height: 50px;
	text-decoration: none;
  text-transform: uppercase;
  transition: .2s ease-in-out;
}

[aria-current]:not([aria-current="false"]) {
  background-color: var(--blue-light);
}

@media (min-width: 800px) {

  .menu {
    padding: 0;
  }

  .menu nav {
    height: auto;
    overflow: visible;
  }

  .menu #open {
    display: none;
  }

  nav ul li {
  	display: inline-block;
    border: none;
  }

  nav a:hover {
  	background-color: var(--orange);
  }

  nav > ul::before {
    display: none;
  }

  nav ul ul {
  	max-height: 0;
    transition: .6s ease-in-out;
  	position: absolute;
  	top: 40px;
    overflow-y: hidden;
  }

  nav ul li:hover > ul {
    max-height: 100vh;
  }

  nav ul ul li {
  	width: auto;
  	float: none;
  	display: block;
  	position: relative;
    z-index: 1000;
  }

}

header a.button {
 position: absolute;
 right: 5%;
 top: 16px;
}

@media (max-width: 500px) {
  header a.button {
    padding: 10px 18px 10px 18px;
    top: 18px;
  }
}

/************************************************************************************
FOOTER
*************************************************************************************/

footer {
  margin-top: 50px;
  padding: 50px 0 0;
  background-color: var(--blue);
  font-size: 16px;
  color: #fff;
  line-height: 27px;
}

footer a {
  text-decoration: none;
}

footer .pages, footer .social {
  text-transform: uppercase;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

footer .pages a, footer .social a {
  color: #fff;
  transition: .3s;
}


footer a:hover {
  background-color: var(--orange);
  font-weight: 600;
  padding-left: 6px;
  padding-right: 2px;
}

footer .social li:first-of-type a:hover {
  background-color: var(--red);
}

.copyrights {
	background-color: var(--red);
  text-align: center;
	padding: 20px 0;
  margin-top: 30px;
	color: #fff;
	letter-spacing: 1px;
}

.copyrights a {
  display: inline-block;
  font-size: 14px;
  transition: .3s;
  margin-top: 5px;
  padding: 0 6px;
  color: #fff;
}

.copyrights a:hover {
  background-color: var(--blue-light)
}

@media screen and (max-width: 799px) {
  footer .topfoot {
    padding-bottom: 20px;
  }
}

/************************************************************************************
HOME PAGE
*************************************************************************************/

.back-ball {
  position: fixed;
  background-image: url(content/back-ball.svg);
  background-repeat: no-repeat;
  background-size: 95%;
  background-position: center top;
  width: 100%;
  height: 100%;
  z-index: -10;
  margin-top: -30px;
}

.home-services .container {
  margin-top: 50px;
}

.home-services h2.h1 {
  color: #fff;
}

.home-services ul li {
  color: #fff;
  font-weight: 600;
  display: block;
  list-style: none;
  position: relative;
  margin-bottom: 20px;
  margin-left: 25px;
  line-height: 1.3;
}

.home-services ul li:before {
  content: '';
  display: block;
  height: 50px;
  width: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 3px;
  left: -65px;
}

.home-services a.button {
  margin-top: 50px;
}

.sports-camp {
  background-color: var(--blue);
  padding: 10px 50px 50px;
}

.sports-camp ul li:first-of-type:before {
  background-image: url('content/ball.png');
}

.sports-camp ul li:nth-of-type(2):before {
  background-image: url('content/clock.png');
}

.sports-camp ul li:nth-of-type(3):before {
  background-image: url('content/calendar.png');
}

.sports-camp ul li:nth-of-type(4):before {
  background-image: url('content/laurel.png');
}

.sports-camp ul li:nth-of-type(5):before {
  background-image: url('content/cup.png');
}

.birthday-parties {
  background-color: var(--red);
  padding: 10px 50px 50px;
}

.birthday-parties ul li:first-of-type:before {
  background-image: url('content/timer.png');
}

.birthday-parties ul li:nth-of-type(2):before {
  background-image: url('content/hoop.png');
}

.birthday-parties ul li:nth-of-type(3):before {
  background-image: url('content/player.png');
}

.birthday-parties ul li:nth-of-type(4):before {
  background-image: url('content/medal.png');
}

.birthday-parties ul li:nth-of-type(5):before {
  background-image: url('content/cup.png');
}

.venue {
  background-color: var(--orange);
  margin-top: 50px;
}

.venue .address {
  padding: 50px 0;
}

.venue .h1 {
  color: var(--red-dark);
  margin: 0;
  text-transform: capitalize;
  line-height: 1.2;
}

.venue p {
  color: var(--red-dark);
  font-size: 26px;
  margin: 10px 0;
}

.venue p.h1 {
  font-size: 38px;
}

@media screen and (max-width: 1160px) {
  .venue img {
    padding: 50px 0;
  }
}

@media screen and (max-width: 799px) {
  .sports-camp {
    margin-bottom: 50px;
  }

  .venue img {
    padding-top: 0;
  }
}

@media screen and (min-width: 1200px) {
  .sp {
    margin-left: 8.66666666667% !important;
    width: 39.3333333333% !important;
  }

  .bp {
    width: 39.3333333333% !important;
  }
}

.testimonials {
  margin-bottom: 30px;
}

.testimonials h2 {
  background-color: var(--blue-light);
  text-align: center;
  color: #fff;
  padding: 20px 0;
  margin-top: 50px;
}

.testimonials p {
  font-style: italic;
  color: var(--red-dark);
}

.testimonials p:before {
  display: inline-block;
  content: "";
  background-image: url(content/citation.png);
  background-size: contain;
  width: 50px;
  height: 43px;
  margin-right: 10px;
  margin-top: 20px;
}

.testimonials p:after {
  display: block;
  content: "";
  background-image: url(content/stars.png);
  background-size: contain;
  width: 160px;
  height: 28px;
  margin-top: 10px;
}

.testimonials video {
  margin: 20px 0;
  border-top: 20px solid var(--orange);
  border-bottom: 20px solid var(--blue-light);
  width: 100%;
  height: auto;
}

.gallery {
  padding-top: 50px;
}

.gallery img {
  margin-bottom: 50px;
}

/************************************************************************************
CONTACT
*************************************************************************************/

.honeypot {
    position: absolute;
    left: -9999px;
}

/************************************************************************************
PAGES
*************************************************************************************/

article .text h2:first-child {
  margin-top: 0;
}

article .button {
  margin-top: 30px;
}

article img {
  margin-bottom: 30px;
}

.side-gallery {
  margin-top: 7px;
}

.side-gallery img {
  margin-bottom: 50px;
}

.bottom-gallery img {
  width: 100%;
  float: left;
  box-sizing: border-box;
  margin-top: 50px;
}

.bottom-gallery img:first-of-type {
  margin-top: 0;
}

@media (min-width: 800px) {

  .bottom-gallery img {
     width: 30.6666666667%;
     margin-left: 4%;
  }

  .bottom-gallery img:nth-of-type(3n+1) {
    margin-left: 0;
    margin-top: 50px;
  }
}


/************************************************************************************
TEAM
*************************************************************************************/

ul.team {
  padding-left: 0;
  margin-top: 50px;
  list-style: none;
}

.member {
  margin-bottom: 50px;
}

.member div {
  display: block;
}

.member:nth-of-type(odd) div {
  float: left;
}

.member:nth-of-type(odd) div:nth-of-type(2) {
  margin-left: 4%;
}

.member:nth-of-type(even) div {
  float: right;
}

.member:nth-of-type(even) div:nth-of-type(1) {
  margin-left: 4%;
}

.member .photo {
  width: 30%;
}

.member .text {
  width: 66%;
}

.member:after {
  content: "";
  display: table;
  clear: both;
}

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

  .member:nth-of-type(odd) div,
  .member:nth-of-type(even) div {
    float: none;
  }

  .member:nth-of-type(odd) div:nth-of-type(2),
  .member:nth-of-type(even) div:nth-of-type(1) {
    margin-left: 0;
    margin-left: 0;
  }

  .member .photo {
    width: 100%;
  }

  .member .text {
    width: 100%;
  }

}