@import url('https://fonts.googleapis.com/css2?family=Goldman&family=Play&family=Saira+Semi+Condensed:wght@300&display=swap');


:root{
    --main-body-font:  'Saira Semi Condensed', Verdana, Tahoma, Helvetica, sans-serif;
    --main-header-font: 'Goldman', Verdana, Tahoma, Helvetica, sans-serif;
    --nav-font: 'Play','Trebuchet MS', Tahoma, verdana,  sans-serif;	
    --main-text-color: #666666;
    --green: #ee8124;
	--light-orange: #f2aa6d;
    --offwhite: #f6f5f6;
    --zebra-even: #f4e1d1;
    --zebra-odd: #d2d9d9;
    --zebra-odd-lite: #e5e8ea;
    --blue: #5c8c8c;
    --dark-blue: #0c4342;
    --dark-green: #006645;
    --border-color: #8f9fa1;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,	del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body *{
  font-family: var(--main-body-font);
  color: var(--main-text-color);
  /* line-height: 2; */

}
body{
	background-color: var(--offwhite);
}
header{
  margin: auto;
  position: sticky;
  top: 0;
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  flex-flow: wrap;
  z-index: 100;
}
/*navigation menu */
nav *{
    font-family: var(--nav-font);
    background-color: #FFF;
}
nav{
    display: flex;
    flex-direction: row;
    z-index: 20;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
nav ul>li {
   display: inline-block;
}
.contacts{
	text-align: right;
	padding-right: 2em;
}
.fa {
  padding: 8px;
  font-size: 14pt;
  width: 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}
.fa:hover {
  opacity: 0.7;
}
a.fa-facebook, a.fa-instagram, a.fa-twitter, a.fa-envelope{
	background: var(--dark-blue);
	color: white !important
}
nav span a, nav span button{
   display:block;
   padding:1em;
   border: none;
   font-size: 14pt;
}
nav li *{
	color: var(--blue);
}
nav span:hover a , nav span:hover button{
	color: var(--green);
}
.current a, .current button{
	color: var(--green);
}

/*Dropdown menu*/
.dropdown, .dropdown-ext{
  position: relative;
  display: inline-block;
  cursor: pointer
}
.dropdown:hover .drop-content, .dropdown-ext:hover .drop-content-ext {
	display: block;
}
.dropdown-ext:hover ul.two-cols{
	display: grid;
	grid-template-columns: auto auto;
}
.drop-content{
    display: none;
    position: absolute;
    z-index: 1;
    font-size: 10pt;
    background-color: white;
    text-align: left;
    width: max-content;
}
.drop-content-ext:hover{
	display: block;
}
 .drop-content-ext{
 	display: none;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 1;
    font-size: 10pt;
    background-color: white;
    text-align: left;
    width: max-content;
 }
.drop-content li, .drop-content-ext li{
	display:block;
	padding: 0.25em 1em 0.25em 1em;
	border-left: 1px solid whitesmoke;
	border-bottom: 1px solid whitesmoke;
}
.drop-content a , .drop-content span, .drop-content-ext a{
  text-decoration: none;
  display: block;
  background-color: white;
  line-height: 2em;
  font-size: larger;
}

@media all and (min-width: 801px){
    #btnOpenSideMenu{
        display:none !important;
    }
    #btnCloseSideMenu{
        display: none !important;
    }
    #sideMenu{
        display: none !important;
    }
}


.contacts-foot{
    display: none; 
}
/*CSS for logo*/
header #logo{
	padding: .5em;
	width: 90%;
	flex-basis: 30%;
	margin: 0;
}
/* Home page style */
main {
  margin: auto;
  min-height: 300px;
  width: 75%;
  font-size: 13pt;
  line-height: 1.5;
}
#home-main{
    width: 100%;
    /* padding: 3em; */
}
#announcement{
	margin: auto;
	text-align: center;
	width: 100%;
	background-color: var(--zebra-odd);
	border-bottom: 3px solid var(--dark-blue)
}
#announcement *{
	color: var(--dark-blue);
}
#announcement div{
	margin: auto;
	padding: 1em;
	width: 70%
}
#more-btn-announce, #more-info-announce button{
	color: var(--green)
}
#more-btn-announce:hover, #more-info-announce button:hover{
	color: var(--dark-green)
}
button:hover{
	cursor: pointer
}
.center{
    text-align: center;
}
.infoBtn{
	border: none;
	background-color: inherit;
	font-size: 13pt;
	font-weight: bolder;
}
#forms-section{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
    padding-top: 1em;
    border-top: 3px solid var(--blue);
}
#forms-section div{
	flex-basis: 25%;
	margin: 0 0 1em 0;
	padding: 0 1em 1em 1em;
	border-top: 2px solid var(--green);
}
#forms-section h1 *{
	width: max-content;
	margin-bottom: 0.5em;
	font-family: var(--main-header-font);
}

section.current-sports{
	margin: auto;
	text-align: center;
	padding: 1em 0 2em 0;
	background-color: var(--offwhite);
}
div.current-sports{
	margin-top: 2em;
	display: grid;
	grid-template-columns: auto auto auto ;
	grid-gap: 2em;
	width: 80%;
	margin: auto;
	padding: 2em 0 1em 0;
}
.sport-bubble{
	width: 175px;
	height:175px;
	background-color: var(--dark-blue);
	border-radius: 50%;
	margin: auto;
	text-align: center;
	cursor: pointer
}
.sport-bubble span{
	color: #FFF;
	margin: auto;
	margin-top: 38%;
	width: 96%;
	font: 16pt var(--nav-font);
	font-weight: bolder;
	display: block;
	text-shadow: 2px 1px black;
}
.sport-bubble:hover span{
	color: var(--green);
}
/* End home page style */

.checkbox_head {
  width: 25%;
  text-align: center;
}

.checkbox {
  text-align: center;
}

.dayname {
  text-align: right;
}

h1 {
	font-family: var(--main-header-font), 'Trebuchet MS', Arial, Sans-serif;
	color: var(--blue);
    font-size: 28pt;
   margin-bottom: 10px;
}

h2 {
    font-family: var(--main-header-font),'Trebuchet MS', Arial, Sans-serif;
    color: var(--blue);
    font-size: 22pt;
    margin-bottom: 10px;
    padding-top: 20px;
}

h3 {
  font-family: var(--main-header-font), 'Trebuchet MS', Arial, Sans-serif;
  padding-top: 15px;
  font-size: 18pt;
}
h4{
	font-family: var(--main-header-font), 'Trebuchet MS', Arial, Sans-serif;
	font-size: 14pt;
}
h5{
	font-family: var(--main-header-font), 'Trebuchet MS', Arial, Sans-serif;
	font-size: 10pt;
	color: var(--dark-blue);
}
p {
  margin-bottom: 10px;
}
footer{
	display:flex;
	background-color: white;
  margin: 0 auto;
  padding: 0 3em 0 3em;
  justify-content: space-between;
  border-top: 2px solid var(--dark-blue);
}
footer #footer_left {
  margin: 10px;
  float: left
}

footer #footer_right {
  margin: 10px;
  margin-right: 0;
  float: right;
}

footer a {
  font-weight: bold;
  text-decoration: none;
}

a, button { 
	color: var(--blue);
	text-decoration: none;
}

a:hover, button:hover, .sessions-container a.reg-link:hover{
	color: var(--green);
}

.green {	color: var(--green); }

form#reg_form {
    padding: 0px;
    margin: 0px;
    width: 100%;
}

form#reg_form .form_label {
    font-weight: bold;
    width: 85px;
}

form#reg_form .title {
    font-weight: bold;
    font-size: 14px;
    text-decoration: underline;
    padding-bottom: 10px;
    padding-top: 10px;
}
/*programs page*/
.view-prog-head{
    display: grid;
    grid-template-rows: auto auto auto;
    margin: 1em 0;
    grid-gap: 0.5em;
}
.view-prog-head .reg-link{
    float: none;
    width: max-content;
}
section.program:nth-child(odd), section.event:nth-child(odd){
	background-color: var(--zebra-odd);
}
section.program:nth-child(even), section.event:nth-child(even){
	background-color: var(--zebra-even);
}
#filter-form div{
	display: inline-block;
	z-index: 1;
	margin-right: 1em;
}
fieldset.filterDrop{
	position: absolute;
	background-color: white;
	margin-top: 0.5em;
	padding: 1em;
	max-height: 18em;
	overflow-y: auto;
	border: 1px solid lightgray;
	box-shadow: 1px 1px 5px var(--border-color);
}
fieldset.filterDrop label{
	padding: 0.5em;
	font-size: 14pt;
	
}
fieldset.filterDrop label:hover{
	cursor: pointer;
	text-shadow: 1px 1px var(--zebra-odd)
}
fieldset.filterDrop input[type="checkbox"]:hover{
	display: border-box;
	cursor: pointer;
}
 #filter-bar button{
	border: none;
	cursor: pointer;
	background-color: var(--off-white);
	font-size: 14pt;
}
#filter-bar input[type="submit"]{
	border: 2px solid var(--zebra-odd);
	border-radius: 5px;
	cursor: pointer;
	font-size: 14pt;
	color: var(--blue);
	height: 2em;
	background-color: white;
}
#filter-bar input[type="submit"]:hover{
	border: 2px solid var(--green)
}
button#btnShowFilter, button#btnCloseFilter{
	background-color: var(--zebra-even);
	margin: 0.5em;
}
#filter-form{
	margin: auto;
	width: 100%;
	padding: 1em 0 1em 0;
	border-bottom: 1px solid var(--blue);
	flex-direction: row;
	justify-content: space-around;
}

.material-icons{
	vertical-align: middle;
}
.scroll{
	color: var(--blue);
}
.program-info-container{
	display: grid;
	grid-template-columns: 36% 32% 32%;
	grid-gap: 1em;
}
.program-info-container-2-sess{
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 1em;
}
.sessions-container{
	display: grid;
	grid-template-columns: auto auto auto;
}
.sessions-container span{
	display: grid;
	grid-template-columns: auto;
}
.other-info-container span, .ind-program-sessions-container span{
	display: grid;
	grid-template-columns: auto min-content;
}
.sessions-container a.reg-link, .sessions-container a.no-click {
	height: max-content;
	color: white;
	margin: 10px 10px;
}
a.no-click{
	pointer-events: none
}
.ind-program-sessions-container span h4{
	margin-right: 1em
}
.ind-program-sessions-container{
	display: grid;
	grid-template-columns: auto auto auto;
	grid-gap: 2em;
	margin-bottom: 1em;
	width: max-content;
}
.ind-program-sessions-container .other-info-container{
	display: flex;
}
@media all and (max-width: 1200px){
	.sessions-container span, .other-info-container span, .ind-program-sessions-container span, .program-info-container-2-sess{
		grid-template-columns: auto
	}
}
span .small{
	font-size: smaller;
	padding: 2%;
	display: inline-block;
	width: max-content
}
.other-info-container{
	display: flex;
}
.other-info-container .program-details{
	flex-basis: 25%;
}
.other-info-container div{
	margin-right: 1em;
}
.program-details, .program-contact, .program-links, .event-details, .event-contact, .event-links{
	padding-left: 0.5em
}
.program, .event{
	margin-top: 1em;
	margin-bottom: 0.5em;
	border-bottom: 4px solid var(--blue);
	padding: 1em;
}
.program-header, .event-header{
	display: grid;
	grid-template-columns: 50% 50%;
	margin-bottom: 1em;
}
.program-header h3, .event-header h3{
	padding-top: 0;
}
.program-header h3>a, .event-header h3>a{
	font-family: var(--nav-font);
}
.reg-link{
	background-color: var(--dark-blue);
	border-radius: 8px;
	color: #FFF;
	padding: 0.5em;
	font-weight: bolder;
	font-size: 14pt;
	border: 2px solid var(--dark-blue);
	float: right;
}
.reg-link i{
	color: #FFF;
}
.reg-link:hover{
	border: outset 2px var(--blue)
}
.event-buttons a{
	margin: 0.5em;
	border: 1px solid var(--zebra-odd);
	background-color: var(--zebra-odd);
	width: max-content;
	cursor: pointer;
	font-weight: bolder;
	font-size: 14pt;
	color: var(--main-text-color);
	padding: 0.1em 0.5em
}
.event-buttons a.view-event-button{
	background-color: var(--light-orange);
	color: var(--dark-blue);
}
.event-buttons a:hover{
	border: outset 1px var(--zebra-odd);
}
.corp-logo{
    width: 50px;
}
.program-links p{
	width: max-content;
}
.view-prog-head h3{
	margin: 0;
	padding: 0;
}
.view-prog-head h2{
	margin-bottom: 0;
	padding-bottom: 0;
}


/*Event Calendar*/
#calendar{
	width: 90%;
	margin: auto;
	border-collapse: collapse;
	margin-bottom: 2em;
}
#calendar td{
	border: 1px solid var(--border-color);
	height: 7em;
	width: 5em;
}
#calendar td ul{
	width: 90%;
	margin: auto;
	margin-left: 5%;
	margin-right: 5%;
}
#calendar td a{
	color: var(--dark-green);
	margin-left: 0.5em;
}
#calendar td ul li{
	list-style-type: '-';
	line-height: 1;
}
#calendar td li a{
	font-size: 10.5pt;
	color: var(--green);
	font-weight: bold;
}
li.event-bub{
    display:none;
}
#calendar td li a:hover{
	color: var(--blue);
}
#calendar th{
	font-size: 13pt;
	font-weight: bolder;
}
#monthName{
	width: max-content;
	text-decoration: underline;
    margin:auto;
}
.month-arrows{
	margin: 1em;
}
.month-arrows i{
	color: var(--blue);
}

/*corporate page*/
@keyframes smoothCorpOpen{
	from {display:none;} to {display: flex;}
}
@keyframes smoothCorpClose{
	from {display:flex;} to {display:none;}
}

.corp-container{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 95%;
	margin: auto;
	background-color: var(--zebra-odd-lite);
}
.corp-desc{
	flex-basis: 60%;
	padding: 1em;
}
.corp-info{
	flex-basis: 74%;
	padding: 1em 0.5em;
}
.corp-contct{
	flex-basis: 13%;
	display: flex;
	background-color: var(--dark-blue);
	align-items: center;
}
.corp-contct a{
	color: white;
	margin: auto;
}
.corp-contct:hover *, .corp-less-desktop:hover *, .corp-more:hover *{
	color: orange;
}
#corporate-main div.event-buttons *{
	background-color: var(--green) ;
	color: white
}
.corp-more, .corp-less-mobile, .corp-less-desktop{
	flex-basis: 13%;
	background-color: var(--blue);
	display: flex;
}
.corp-img{
	flex-basis: 27%;
	background-color: var(--dark-blue);
    display: flex;
    align-items: center
}
.corp-img img{
	width: 100%;
	height: max-content;
}
.corp-more button, .corp-less-mobile button, .corp-less-desktop button{
		margin: auto;
		color: #FFF;
}
.corp-more i, .corp-less-mobile i, .corp-less-desktop i{
	color: #FFF
}
.corp-info ul{
    display: flex;
    justify-content: space-around;
    font-size: 11pt;
}
.corp-info li{
	list-style-type: none;
	display: inline-block;
	text-align: center;
	padding: 0.5em
}
.corp-info ul li:nth-child(even) p , .corp-info ul li:nth-child(even) i{
	color: var(--blue);
}
@media all and (min-width:800px){
.corp-less-mobile{
	display: none !important;
}
}
@media all and (max-width:1000px){
	section.highlight-slide{
		height: 30vw;
	}
	 div.hl-desc>h2{
		font-size: 20pt
	}
}
/*Player survey*/
#player-survey{
	width: 80%;
	margin: auto;
}
#player-survey .text-inputs label, #contact-form label{
	padding: 0.5em;
	display: inline-block;
	width: 6%;
	margin-right: 0.5em;
}
#player-survey span{
	padding: 0.5em;
}
#player-survey td{
	padding-left: 0.5em;
}
#player-survey textarea{
	margin-left: 2em;
	height: 3em;
}
#sports-inputs{
	width: 90%;
	margin: 0;
	padding: 0;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 0.5em;
}
#sport-inputs p{
	padding: 0;
	margin: 0;
}
 #add-program-form label{
	padding: 1em 0.5em;
	display: inline-block;
	width: 18%;
 }
 .box-input{
 	display: inline-block;
 	width: 20%;
 	height: 2em;
 }
 #add-event-form label{
	padding: 0.5em;
	display: inline-block;
	width: 13%;
 }
 #add-event-form span{
 	padding:0.5em
 }
 #add-event-form{
 	margin-bottom: 2em;
 }
 #add-event-form input[type=radio]{
 	margin-left: 5%
 }
#add-event-form input[type=submit], #add-program-form input[type=submit], #contact-form input[type=submit]{
	margin-left: 15%;
	cursor: pointer;
}
.google-photo{
    width: 30vw;
    z-index: 0;
}
/* Slideshow container */
#gallery-section{
	background-color: var(--zebra-odd);
	padding: 1em 0 2em 0;
	z-index: 0;
    
}
.gallery-container {
  height: 20vw;
  margin: auto;
  overflow-y: hidden;
  width: 95%;
  z-index: 0;
}

/* Hide the images by default */
.mySlides {
  display: none;
  box-sizing: border-box;
  padding: 1em;
  z-index: 0;
}

div.photo-flex-container{
    display: grid;
    grid-gap: 1em;
    grid-template-columns: auto auto auto;
    justify-content: center;
    z-index: 0;
}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

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

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
.contacts-prog ul{
	list-style-type: none;
	display: flex;
}
.contacts-prog li{
	padding-right: .5em
}

.contacts-prog img{
	width: 1.5em;
}
.highlight-slide{
	background-color: var(--blue);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 25vw;
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 25px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* fix next border */
.next {
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: var(--dark-blue);
}
.mobile-buttons{
    display: none;
}
.hl-img{
	flex-basis: 35%;
	width: 35%;
}
.hl-img img{
	max-width: 100%;
	height: 25vw;
	float:  right;
}
.hl-img iframe{
	width: 100%;
	height: 20vw;
}
.hl-img video{
	width: 100%;
}
.hl-desc{
	flex-basis: 50%;
	margin-left: 4em;
}
.hl-desc h2{
	color: var(--zebra-even);
	font-size: 26pt
}
.hl-desc *{
	color: white
}
.hl-desc p{
	font-size: 16pt;
}
.hl-desc a{
	border-bottom: 1px solid var(--dark-blue)
}
.hl-desc a:hover{
    background-color: var(--dark-blue);
    opacity: .5;
}
#staffing{
	list-style-type: none;
	margin-left: 1em
}
#open-play{
	display: grid;
	grid-template-columns: auto auto;
}
#priv-events-main ul{
	margin-left: 1em;
}
#program-info-main{
	margin: auto;
	width: 80%;
}
#description{
	display: grid;
	grid-template-columns: 50% 40%;
	margin: 1em;
	grid-gap: 10%
}
#program-img{
    width: 100%;
}
.full-info-link{
    display: none;
}
.event-date{
    display:none;
}
section.priv-event{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 3em;
	padding: 0 2em;
	align-items: center;
}
section.priv-event img{
	width: 100%;
}
section.priv-event div.pe-words{
	flex-basis: 60%;
	padding: 1em;
}
section.priv-event div.pe-img{
	flex-basis: 40%;
}
section.priv-event:nth-child(odd){
	background-color: var(--zebra-even)
}
section.priv-event:nth-child(even){
	background-color: var(--zebra-odd)
}
.view-event-button{
	margin-left: 1em
}
section.priv-event .event-buttons{
	background-color: var(--green);
	color: white;
	padding: 0.25em;
	margin: 0;
}
section.priv-event .event-buttons i{
	color: white;
}
.pe-words h3{
	margin-bottom: 0.5em;
}
.pe-words div{
	margin-bottom: 1em;
}
#pe-last{
    margin: 2em auto;
}
main.about{
	width: 65%;
}
main.about p{
	margin-left: 1em
}
div.about-contact{
	margin-left: 1em;
	clear: both
}
div.ourStaff h4{
	margin-bottom: 1em;
}
div.ourStaff img{
	width: 15%;
	float: left;
	padding: 0 2em 1em 1em;
}
.all-act-sec {
	display: flex;
	flex-direction: row;
	margin: 1em 0;
	padding-bottom: 1em;
	justify-content: space-between;
	border-bottom: 3px solid var(--zebra-odd);
}
.all-act-sec div.pe-img{
	flex-basis: 35%
}
.all-act-sec img{
	width: 100%;
	margin-top: 2em
}
.all-act-sec>div{
	flex-basis: 50%
}
.mistake {
    color: var(--green);
    font-weight: bold;
}
.form-success{
	margin: 1em 10%;
}