@charset "UTF-8";
/* CSS Document */

html, body {padding: 0; height: 100%; width: 100%; margin: 0; font-family: 'Roboto', sans-serif;}
#main {height: 100%; width: 100%; margin: auto; padding: 0;}

.button:link {padding: 1em; box-sizing: border-box; background-color: #4C96A7; border-radius: 5px; color: #fff; text-decoration: none; display: inline-block; cursor: pointer;}
.button:visited {padding: 1em; box-sizing: border-box; background-color: #4C96A7; border-radius: 5px; color: #fff; text-decoration: none; display: inline-block;}
.button:active {padding: 1em; box-sizing: border-box; background-color: #4C96A7; border-radius: 5px; color: #fff; text-decoration: none; display: inline-block;}
.button:hover {background-color: #333;}

/*----- HEADER -----*/

header {background-color: #8B2E29; box-sizing: border-box; display: inline-block; width: 100%; text-align: center; padding: 2em; box-sizing: border-box; background-image: url("../images/DolphinWatermark.png"); background-repeat: no-repeat; background-position: right; position: relative; z-index: 100;}
#headerpages {position: relative;}
#insideheader {display: inline-block; width: 100%;}
.left {width: 50%; float: left;}
.right {width: 50%; float: left; text-align: right;}
.logo {max-width: 22em; align-content: left; float: left;}

nav {padding: 0; box-sizing: border-box; width: 100%; margin-top: 2em;}
.menulink:link {color: #fff!important; text-decoration: none;}
.menulink:hover {color: #888!important;}
.menulink:visited {color: #fff!important;}
.menulink:active {color: #fff!important;}

#freetrial {margin-left: 1em;}

#burger {height: 3em; z-index: 99999999; display: none; float: right;}
#burger:hover {opacity: .6; cursor: pointer;}

#menu {width: 300px; height: 100%; position: fixed; right: -300px; top: 0; background-color: #4C96A7; z-index: 9999;}
#menu li {list-style: none; padding: .5em; box-sizing: border-box; border-top: 1px solid #fff;}
#menu li:hover {background-color: #333;}
#menu li a:link {color: #fff; text-decoration: none; font-size: .8em!important;}
#menu li a:visited {color: #fff;}

/*----- VIDEO -----*/

.main {width: 100%; height: 100%; margin: auto;}
.intro {height: 100%; width: 100%; overflow: hidden; position: relative; overflow: hidden; z-index: 1; display: inline-block; min-height: 20em;}
.video {height: 100%; width: 100%; object-fit: cover;}
.introtext {margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; text-align: center; width: 100%;}

#welcome {font-size: 2.5em; margin-bottom: 1em; font-weight: bold; color: #fff;}
#joinnow {font-size: 1.5em;}

#arrowdown {position: absolute; bottom: 4em; left: 50%; margin-left: -1em; width: 2em; z-index: 3;}

/*----- CONTENT -----*/

.content {box-sizing: border-box; text-align: center; padding: 4em 0; display: inline-block; width: 100%;}
.container {margin: auto; max-width: 1000px; box-sizing: border-box;}
.insidecontent {text-align: left; max-width: 60%; margin: auto;}
.insidecontent img {width: 100%;}

p {color: #000; font-size: 1.5em; line-height: 1.5em;}
li {font-size: 1.5em; line-height: 1.5em;}
p#themission {font-size: 2.5em; font-weight: normal; text-align: center; margin: 0; padding: 0; color: #8B2E29;}
p#wewelcome {font-size: 1.25em; text-align: center; margin: 0; padding: 2em; color: #000;}

a:link {color: #000;}
a:visited {color: #000;}
a:hover {color: #000; text-decoration: none;}
a:active {color: #000;}

#columns {width: 100%; padding: 2em; box-sizing: border-box; display: inline-block;}
.third {width: 33.33%; float: left; padding: 1em; box-sizing: border-box; display: inline-block;}
.insidethird {border: 1px solid #cccccc; border-radius: 5px; padding: 2em; box-sizing: border-box;}
.insidethird img {width: 100%;}
.insidethird p {font-size: 1em;}

table#seasonfees td {padding: .5em; font-size: 1.5em;}

#oursponsors {padding: 4em 0; background-color: #f1f1f1; display: inline-block; width: 100vw; text-align: center; box-sizing: border-box;}

.sponsorlogo {width: 16.6666%; float: left; padding: .75em; box-sizing: border-box;}
.sponsorlogo img {width: 100%;}

/*----- FOOTER -----*/

footer {background-color: #333; padding: 3em; display: inline-block; box-sizing: border-box; width: 100%; color: #fff!important;}
footer p {color: #fff; font-size: 1em;}

footer .footerlink:link {color: #fff!important;}
footer .footerlink:hover {color: #ccc!important; text-decoration: none;}
footer .footerlink:visited {color: #fff!important;}
footer .footerlink:active {color: #ccc!important;}

/*----- MEDIA QUERY -----*/

@media only screen and (max-width: 600px) {
	
	/* HEADER */
	header {padding: 1em;}
	.logo {height: 3em;}
	#freetrial {display: none;}
	#facebook {display: none;}
	#burger {display: block;}
	nav {display: none;}
	
	/* CONTENT */
	#background-video {background: url("../images/HowWeOperate.jpg"!important) no-repeat; background-size: cover;}
	#welcome {font-size: 1.5em; padding: 0 1em;}
	#joinnow {font-size: 1em;}
	p#themission {padding: 0 1em; font-size: 1.5em;}
	p#wewelcome {font-size: 1em;}
	.third {width: 100%;}
	#oursponsors {padding: 4em;}
	.sponsorlogo {width: 50%;}
	.content {padding: 2em!important;}
	.insidecontent {max-width: 100%!important;}
	
	/* FOOTER */
	footer .container .left {width: 100%; text-align: center;}
	footer .container .left .logo {align-content: center; float: none;}
	footer .container .right {width: 100%; text-align: center;}
}

/*@media only screen and (max-width: 800px) {
    #background-video {
      	background: url("../images/HowWeOperate.jpg"!important) no-repeat;
		background-size: cover;
    }
	.logo {width: 100%;}
	footer .container .left {width: 100%; text-align: center;}
	footer .container .left .logo {width: 100%; align-content: center; float: none;}
	footer .container .right {width: 100%; text-align: center;}
	#freetrial {display: none;}
	#facebook {display: none;}
	#burger {display: block;}
	nav {display: none;}
	p#themission {padding: 1em;}
	.third {width: 100%;}
	#oursponsors {padding: 4em;}
	.sponsorlogo {width: 50%;}
}*/

/*@media only screen and (min-width: 600px) and (orientation: portrait) {
    #background-video {
      	background: url("../images/HowWeOperate.jpg"!important) no-repeat;
		background-size: cover;
    }
	header {padding: 1em; background-color: #ff0;}
	.logo {width: 100%;}
	footer .container .left {width: 100%; text-align: center;}
	footer .container .left .logo {width: 100%; align-content: center; float: none;}
	footer .container .right {width: 100%; text-align: center;}
	#freetrial {display: none;}
	#facebook {display: none;}
	#burger {display: block;}
	nav {display: none;}
	#welcome {font-size: 1em;}
	#joinnow {font-size: 1em;}
	p#themission {padding: 1em;}
	.third {width: 100%;}
	#oursponsors {padding: 4em;}
	.sponsorlogo {width: 50%;}
}*/