@charset "utf-8";


* {margin: 0; padding: 0;}

body {background: #fefefe; font-family: 'Source Sans Pro', sans-serif;}

.hrSmall {max-width: 100px;}

.clear {clear: both;}

p a {color: #3e5b75;}
p a:hover {color: #fc0;}


/* ========================================== */
/* ========================================== */
/* ========================================== */
/* ====  MODAL & FORM  ==== */


#modalBground {
	
	width: 100%;
	height: 100%;
	background: black;
	opacity: .7;
	cursor: default;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9000;
	
	}



#modal {
	
	width: 74%;
	max-width: 400px;
	background: #fefefe;
	margin: 100px auto;
	padding: 30px 24px 24px 24px;
	position: fixed;
	z-index: 9001;
	left: 0;
	right: 0;
	border-radius: 6px;
	
	}

#close {
	
	width: 30px;
	height: 30px;
	border-radius: 50%;
	

	border: 2px solid white;
	color: white;
	background: #555;
	box-shadow: -1px 1px 3px #333;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	float: right;
	margin: -40px -30px 0 0;
	cursor: pointer;
	
	}
	
#modalBground, #modal {display: none;}	


#close:hover {background: #333;}

.status:hover {cursor: pointer;}



#statusForm {margin-top: 40px;}

#statusForm label {
	
	font: bold .9em Verdana;
	text-transform: uppercase;
	color: rgba(70,70,70,.9);
	
	}


#statusForm input#username,
#statusForm input#password {

	width: 98%;
	height: 2.2em;
	box-shadow: 0px 2px 2px -2px #999 inset;
	border: 1px solid rgb(220,220,220);
	padding: 0 0 0 1%;
	color: rgba(19,33,36,.9);
	background-color: rgb(244,244,244);

	}


#statusForm #formButton {
	
	color: white;
	background: #555;
	font-weight: bold;
	text-align: center;
	width: 120px;
	cursor: pointer;
	float: right;
	padding: 4px;
	border-radius: 4px;
	letter-spacing: 1px;
	
	}


#statusForm #formButton:hover,
#statusForm #formButton:active {

	cursor: pointer; 
	background: #333;

	
	}




/* ========================================== */
/* ========================================== */
/* ========================================== */
/* ====  HEADER / NAV  ==== */


#header {
	/* background: #30475B;  */
	background-color: ;
	background-size: ;
	position: fixed;
	top: 0;
	z-index:500;
	width: 100%;
	border-top: 6px solid #1C2935;
	height: 60px;
	}


#header .wrapHead {
	width: 94%; 
	margin: auto; 
	}


#header a.headerLogo {
	/*  color: #FC0;  */
	color: #fefefe; 
	text-decoration: none; 
	font-size: 1.5em;
	font-family: Oswald, sans-serif;
	letter-spacing: 1px;
	line-height: 60px;
	}

#header a.headerLogo:hover {color: #FC0;}

/* ========================================== */
/* ====  MEDIA QUERIES  ==== */

@media screen and (max-width: 950px) {
	
	#header {height: auto; background: #30475B;}
	
	}

@media screen and (max-width: 500px) {
	
	#header a.headerLogo span {
		display: none;
		}
	
	}




/* ========================================== */
/* ========================================== */
/* ========================================== */
/* ====  NAVIGATION  ==== */

.navigation {
	float: right;
	position: fixed; 
	z-index: 600;
	margin-top: 6px;
	right: 2%;
	}

.navigation ul {}

.navigation ul li {
	list-style-type: none; 
	display: inline-block;
	height: 60px;
	}

.navigation ul li a {
	color: #fefefe;
	text-decoration: none;
	display: block;
	line-height: 60px;
	padding: 0 24px;
	letter-spacing: 1px;
	font-family: Oswald, sans-serif;
	font-weight: 100;
	}

.navigation ul li a:hover,
.navigation ul li a:focus {background: ; color: #FC0; box-shadow: inset 0px -4px 0px orange; border: none;}

.navigation ul li a.active {background: ; color: #FC0; box-shadow: inset 0px -4px 0px orange; border: none;}

/* ========================================== */
/* ====  MEDIA QUERIES  ==== */

@media screen and (max-width: 950px) {
	
	.navigation {
		display: none; 
		width: 100%; 
		margin-top: 66px; 
		background-color: #3e5b75;
		z-index: 300;
		float: none;
		right: inherit;
		}
	
	}

@media screen and (max-width: 500px) {
	
	.navigation {
		float: none;
		}
	
	.navigation ul {}
	
	.navigation ul li {
		list-style-type: none; 
		display: block;
		height: 60px;
		border-bottom: 1px solid #456482;
		}
	
	.navigation ul li a {
		line-height: 60px;
		font-size: 1.25em;
		}

	}




/* ========================================== */
/* ========================================== */
/* ========================================== */
/* ====  HAMBURGER MENU  ==== */
	
.menuBars {
	display: none;
	position: relative;
	margin: 11px 0 0 0;
	width: 40px;
	height: 30px;
	font-size: 0;
	text-indent: -9999px;
	appearance: none;
	cursor: pointer;
	padding: 6px;
	border-radius: 2px;
		/*	
		border-right: 2px solid #1C2935;
		border-bottom: 2px solid #1C2935;
		border-left: 2px solid #456465;
		border-top: 2px solid #456582;
		*/
	float: right;
	z-index: 1000;
	}

.menuBars:focus {outline: none;}

.menuBars span {
	display: block;
	position: absolute;
	top: 9px;
	left: 8px;
	right: 8px;
	height: 3px;
	background-color: #fefefe;
	border-radius: 1px;
	}

.menuBars span::before,
.menuBars span::after {
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: 3px;
	content: "";
	border-radius: 1px;
	background-color: #fefefe;
	}

.menuBars span::before {top: 10px;}
.menuBars span::after {bottom: -20px;}



/* ========================================== */
/* ====  MEDIA QUERIES  ==== */

@media screen and (max-width: 950px) {
	
	.menuBars {
		display: block;
		}
	
	}

/* ========================================== */
/* ========================================== */
/* ========================================== */
/* ====  HERO  ==== */

#hero-main {
	background: url(../Images/Tampa%202.jpg) fixed center no-repeat;
	background-size: cover;
	min-height: 500px ;
	width: 100%;
	padding-bottom: 100px;
	font-size: 1.2em;
	}
	
	
#hero-main .hero-mainWrap {
	width: 80%;
	max-width: 900px;
	padding-top: 200px;
	margin: 0 auto;
	color: #fefefe;
	}
	
#hero-main .hero-mainWrap h1 {
	color: #fefefe;
	text-shadow: 1px 1px 1px rgba(0,0,0,.75);
	text-align: center;
	letter-spacing: 1px;
	}

#hero-main .hero-mainWrap h1 span.h1-big {font-size: 1.35em;}
#hero-main .hero-mainWrap h1 span.h1-small {font-weight: 400;}



	
#hero-main .hero-mainWrap h1 hr{
	margin: 20px auto;
	border: 1px solid white;
	}
	

/* ========================================== */
/* ====  MEDIA QUERIES  ==== */

@media screen and (max-width: 1500px) {
	
	#hero-main {
		background: url(../Images/Tampa%202.jpg) fixed center no-repeat;
		background-size: cover;
		min-height: 500px ;
		width: 100%;
		padding-bottom: 100px;
		font-size: 1em;
		}
	
	}

@media screen and (max-width: 680px) {

	#hero-main {
		min-height: 410px ;
		font-size: .85em;
		}


	#hero-main .hero-mainWrap {
		width: 90%;
		padding-top: 160px;
		}
	
	}


@media screen and (max-width: 680px) {

	#hero-main {
		font-size: .75em;
		}

	}






/* ========================================== */
/* ========================================== */
/* ========================================== */
/* ====  CONTENT  ==== */

	
#content {padding: 40px 0; font-size: 1.1em;}

#content .contentWrap {width: 90%; max-width: 1260px; margin: auto;}

#content .contentWrap .left-60 {float: left; width: 55%; margin-right: 10%;}

#content .contentWrap .left-60 p {margin-top: 14px; line-height: 1.45em; color: #333;}

#content .contentWrap .left-60 ul {list-style-position:inside;}

#content .contentWrap .left-60 ul li {margin-top: 14px; text-indent: 0px; margin-left: 1em; list-style:outside none disc; line-height:1.1em;}

#content .contentWrap .right-30 {float: left; width: 30%;}

#content .contentWrap .right-30 p {margin-top: 14px; line-height: 1.45em; color: #333;}

#content .contentWrap .right-30 img {margin-bottom: 14px;}

#content .contentWrap hr.show-800 {display: none;}
#content .contentWrap hr.vanish-800 {margin-top: 14px;}


/* ========================================== */
/* ====  MEDIA QUERIES  ==== */

@media screen and (max-width: 1260px) {

	#content {font-size: 1em;}
	
	}


@media screen and (max-width: 950px) {

	#content .contentWrap {width: 94%;}
	
	#content .contentWrap .left-60 {width: 55%; margin-right: 10%;}
	
	#content .contentWrap .right-30 {width: 35%;}
	
	}
	
	
@media screen and (max-width: 800px) {

	#content {padding: 40px 0; font-size: 1.1em;}

	#content .contentWrap {width: 80%;}
	
	#content .contentWrap .left-60 {float: none; width: 100%; margin-right: 0;}
	
	#content .contentWrap .right-30 {float: none; width: 100%; margin-top: 60px; padding-top: 20px; border-top: 1px solid black;}
	
	#content .contentWrap .right-30 img {display: none;}
	
	#content .contentWrap hr.show-800 {display: inherit; margin-bottom: 14px;}
	
	#content .contentWrap hr.vanish-800 {display: none;}
	}
	
@media screen and (max-width: 500px) {

	#content .contentWrap {width: 94%;}

	}
	
	
/* ========================================== */
/* ========================================== */
/* ========================================== */
/* ====  LIGHT BLUE THING  ==== */
	

#lightBlueThing {
	background: url(../Images/Bg-Trans.png) #6796C1 center right no-repeat;
	background-size: cover; 
	color: white; 
	text-align: center; 
	text-shadow: 1px 1px 1px rgba(0,0,0,.75);
	}	

#lightBlueThing .lightBlueWrap {padding: 20px 0; max-width: 960px; width: 80%; margin: auto;}

#lightBlueThing .lightBlueWrap h1 {font-size: 3.25em;}

#lightBlueThing .lightBlueWrap h2 {font-size: 1.8em;}

#lightBlueThing .lightBlueeWrap p {font-weight: 100;}

#lightBlueThing .lightBlueWrap hr {
	margin: 20px auto;
	border: 1px solid white;
	max-width: 80px;
	}


#lightBlueThing .lightBlueWrap #lbtImages {margin-top: 20px;}





.blue1 {color: #1C2935;}
.blue2 {color: #30475B;}
.blue3 {color: #3e5b75;}
.blue4 {color: #456582;}
.blue5 {color: #6796C1;}



	
/* ========================================== */
/* ====  MEDIA QUERIES  ==== */

@media screen and (max-width: 1260px) {

	#lightBlueThing {font-size: 1em;}

	}
	
@media screen and (max-width: 850px) {

	#lightBlueThing .lightBlueWrap h1 {font-size: 2.25em;}
	
	#lightBlueThing .lightBlueWrap h2 {font-size: 1.4em;}
	
	.vanish-850 {display: none;}
	
	}
	
	
	
/* ========================================== */
/* ========================================== */
/* ========================================== */
/* ====  FOOTER  ==== */
	
#footer {background-color: #30475B; height: ; color: rgba(256,256,256,.65); padding: 40px;}
	
#footer a {color: rgba(256,256,256,.65);}	
#footer a:hover {color: #FC0;}	


/* ========================================== */
/* ========================================== */
/* ========================================== */
/* ====  FOOTER  ==== */
	
#copyright {background-color: #1C2935; padding: 8px; color: #456582; font-size: .7em; text-align: center; letter-spacing: 1px;}






















/* ========================================== */
/* ========================================== */
/* ========================================== */
/* ====  FAQ MAIN HEADER  ==== */

#header-main {
	background: url(../Images/Tampa-3.jpg) #6796C1 center no-repeat;
	background-size: cover;
	width: 100%;
	padding-bottom: 60px;
	font-size: 1.2em;
	}
	
	
#header-main .header-mainWrap {
	width: 80%;
	max-width: 900px;
	padding-top: 140px;
	margin: 0 auto;
	color: #fefefe;
	}
	
#header-main .header-mainWrap h1 {
	color: #fefefe;
	text-shadow: 1px 1px 1px rgba(0,0,0,.75);
	text-align: center;
	letter-spacing: 1px;
	}

#header-main .header-mainWrap h1 span.h1-big {font-size: 1.35em;}
#header-main .header-mainWrap h1 span.h1-small {font-weight: 400;}



	
#header-main .hero-mainWrap h1 hr{
	margin: 20px auto;
	border: 1px solid white;
	}
	

/* ========================================== */
/* ====  MEDIA QUERIES  ==== */

@media screen and (max-width: 1500px) {
	
	#header-main {
		font-size: 1em;
		}
	
	}


@media screen and (max-width: 680px) {

	#header-main {
		font-size: .85em;
		background-position: top center;
	}

	#header-main .header-mainWrap {
		width: 90%;
		}
	
	}


@media screen and (max-width: 680px) {

	#header-main {
		font-size: .75em;
		}

	}






















