@import url(https://fonts.googleapis.com/icon?family=Raleway:300,400,600);
/* CSS Document */

body {
	font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: #d5dddf;
	background-image: url(/images2012/background_top.png);
	background-size: 100%;
	background-repeat: no-repeat;
	font-weight: 300;
}


/*medium+ screen sizes*/
@media (min-width:750px) {
    .desktop-only {
        display: block !important;
    }
    .mobile-only {
        display: none;
    }
}

/*small screen sizes*/
@media (max-width: 750px) {
    .mobile-only {
        display: block;
    }
    .desktop-only {
        display:none !important;
    }
}

/*medium+ screen sizes*/
@media (min-width:1000px) {
    .landscape-only {
        display: block !important;
    }
    .portrait-only {
        display: none;
    }
}

/*small screen sizes*/
@media (max-width: 999px) {
    .portrait-only {
        display: block;
    }
    .landscape-only {
        display:none !important;
    }
}
a {
	color: #2bc3e2;
    transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
}
a:hover { color: #002c61; }

textarea {
	min-width: 400px;
}

.transition {
    transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
}

.fast-transition {
    transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -webkit-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
}

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.relative { position: relative; }

i.fa {
	position: relative;
}

a {
	text-decoration: none;
}

@media (min-width: 750px) {
	.container {
		width: 100%;
		max-width: 1366px;
	}
}
.container img {
	border: 0px;
}

.alert	{
	background-color: #c00000; 
	padding: 9px 2.25em; 
	font-size: 100%; 
	text-align: center; 
	font-weight: bold; 
	color: white;
}
@media (min-width: 750px) {
	.alert {
		padding: 9px 3em;
		font-size: 130%; 
	}
}
.alert a {
	color: white; 
	text-decoration: underline;
}
.alert a:hover {
	color: yellow;
}
.alert i.fa {
	top: 1px;
	left: -2px;
}


.header	{
	border-top: solid 50px #32c1de;
	overflow: hidden;
	background-color: rgb(255,255,255);
	position: relative;
	text-align: center;
}
@media (min-width: 750px) {
	.header {
		border-top: solid 9px #32c1de;
		text-align: right;
	}
}
.header ul {
	margin-bottom: 0;
}
.header ul li {
	display: inline-block;
	margin: 4px 3px;
	width: 42%;
	list-style: none;
}
@media (min-width: 750px) {
	.header ul li {
		margin: 12px 6px 0 0;
		width: auto;
	}
}
@media (min-width: 750px) {
	.header ul li:last-child {
		margin: 12px 12px 0 0;
	}
}
.header ul li a {
	display: inline-block;
	width: 100%;
	padding: 3px 0;
	border: dotted 1px #000;
	color: #011b78;
	text-transform: lowercase;
}
@media (min-width: 750px) {
	.header ul li a {
		margin: 0 6px 0 0;
		width: auto;
		padding: 0;
		border: 0;
	}
}
.header ul li a:hover {
	color: #5bb1e4;
}
.header ul li i.fa {
	left: -1px;
	top: 1px;
	color: #5bb1e4;
}
@media (min-width: 750px) {
	.header ul li i.fa {
		left: 0;
		top: 2px;
	}
	.header ul li i.fa {
		font-size: 15pt;
	}
}
	.header ul li i.fa-drivers-license-o {
		left: -3px;
	}
	.header ul li i.fa-commenting-o {
		top: 1px;
		left: -1px;
	}
a.logo img {
	width: 85%;
	margin: 6px auto;
	max-width: 250px;
}
@media (min-width: 750px) {
	a.logo img {
		width: 100%;
		margin: 12px 0 3px 12px;
	}
}

.social {
	margin: 24px 0;
}
@media (min-width: 750px) {
	.social {
		position: absolute;
		right: 18px;
		bottom: 12px;
		margin: 0;
	}
}
.social i.fa {
	display: inline-block;
	background: #000;
	color: white;
	border-radius: 4px;
	padding: 10px 8px;
}
@media (min-width: 750px) {
.social i.fa {
	padding: 6px 4px;
}
}
.social i.fa-yelp {
	background: #ea3636;
}
.social i.fa-facebook {
	background: #4b67a1;
}
.social i.fa-youtube {
	background: #ec1a23;
}
.social i.fa-twitter {
	background: #27a9e0;
}


.mob-nav {
	z-index: 9999;
	position: absolute;
	top: 3px;
	right: 6px;
	color: #fff;
	font-size: 21pt;
}
ul.mob-dd {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9998;
}
ul.mob-dd li {
	list-style: none;
	border-bottom: solid 1px #000;
}
ul.mob-dd li a {
	color: #fff;
	display: inline-block;
	width: 100%;
	padding: 15px 30px;
	background: rgba(0, 45, 98, 0.9);
	text-transform: none;
}
ul.mob-dd li a:hover {
	background: #5bb1e4;
}
.white-text {
	color: #fff;
}
.expand {
	display: inline-block !important; 
	-moz-animation: bounceInDown;
	-webkit-animation: bounceInDown;
	animation: bounceInDown;
}


.row.navcont {
	padding: 0;
	margin: 0;
	background-color: #011b78;
}

ul.nav {
	margin: 0 auto;
	display: table;
}
@media (min-width: 750px) {
	ul.nav {
		max-width: 97%;
	}
}
@media (min-width: 1200px) {
	ul.nav {
		max-width: 100%;
	}
}

ul.nav li {
	list-style-type: none;
	display: table-cell;
}

ul.nav li a {
	display: inline-block;
	color: #32c1de;
	padding: 9px 20px;
	font-weight: 600;
	text-transform: uppercase;
}
ul.nav li a.selected {
	color: #32c1de;
}

@media (min-width: 750px) {
	ul.nav li a {
		font-size: 11pt;
	}
}

@media (min-width: 1024px) {
	ul.nav li a {
		font-size: 14pt;
	}
}

ul.nav li a:hover {
	background: rgba(255, 255, 255, 0.25);
}
ul.nav li a i.fa {
	color: #fff;
	top: -4px;
	left: 4px;
	font-size: 10pt;
}
ul.nav li a:hover i.fa {
	color: #fff;
}


ul.nav li ul.dd {
	position: absolute;
	margin-left: -75px;
	display: none;
	z-index: 9999;
	box-shadow: 0 -5px 5px -5px #333;
}

ul.nav li ul.dd li {
	display: block;
	background: #32c1de;
	text-align: center;
	border-bottom: dotted 1px #011b78;
}
ul.nav li ul.dd li:last-child {
	border-bottom: 0;
}

ul.nav li ul.dd li a {
	color: #fff;
	display: inline-block;
	width: 100%;
	padding: 6px 0;
	background: #32c1de;
	text-transform: none;
	font-weight: normal;
}
@media (min-width: 750px) {
	ul.nav li ul.dd li a {
		font-size: 11pt;
	}
}
@media (min-width: 1024px) {
	ul.nav li ul.dd li a {
		font-size: 14pt;
	}
}

ul.nav li ul.dd li a:hover {
	color: #000;
	background: rgba(255, 255, 255, 1.0);
}

li.navhovered a {
	background: rgba(255, 255, 255, 0.25);
}

.content,
.content-int {
	overflow:hidden;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center; 
	background-size: cover;
	box-shadow: inset 0 0 45px #000;
}
@media (min-width: 750px) {
	.content {
		min-height: 685px;
	}
}
.content .slogan h1 {
	text-align: center;
	color: #fff;
	font-size: 23em;
	font-weight: 600;
	text-transform: uppercase;
	padding: 0;
	margin: 1.8% 0 0 0;
	line-height: 180px;
	text-shadow: 0 0 10px #000;
	opacity: 0.9;
}
.content .slogan h1 span.nowrap {
	margin-left: -30px;
	white-space: no-wrap;
	display: block;
	font-size: 83pt; 
}

.content-int {
	position: relative;
	min-height: 195px;
}
@media (min-width: 750px) {
	.content-int {
		min-height: 365px;
	}
}
.content-int h1 {
	position: absolute;
	left: 0;
	bottom: 0;
	margin-bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	font-size: 17pt;
	color: #fff;
	padding: 12px 36px;
	font-weight: 400;
	width: 100%;
	/*display: inline-block;
	border-top-right-radius: 27px;*/
}
@media (min-width: 750px) {
	.content-int h1 {
		font-size: 33pt;
	}
}

@media (min-width: 750px) {
	.columns.callout {
		margin: 0 !important;
		width: 33.33333333333%;
	}
}
.calloutbox {
	background-color: #fff;
	border-top: dotted 1px #000;
	width: 100%;
}
@media (min-width: 750px) {
	.calloutbox {
		position: absolute;
		bottom: 0;
		box-shadow: 0 -5px 10em #000;
	}
}
a.callout1,
a.callout2,
a.callout3 {
	display: block;
	height: 158px;
	margin: 0 auto;
	background-color: #32c1de;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 19px;
	border-left: dotted 1px #fff;
	
}
a.callout1 {
	border-left: 0;
}
@media (min-width: 750px) {
	a.callout1,
	a.callout2,
	a.callout3 {
		width: 100%;
		box-shadow: inset 0 0 0 #000;
	}
}
@media (min-width: 750px) {
	a.callout1:hover,
	a.callout2:hover,
	a.callout3:hover {
	box-shadow: inset 0 0 60px #000;
	}
}

a.callout1 {
	background-image: url(/images2017/complete_fitness.jpg);
}
a.callout2 {
	background-image: url(/images2017/aquatics_center.jpg);
}
a.callout3 {
	background-image: url(/images2017/physical_therapy.jpg);
}
a.callout1 h2,
a.callout2 h2,
a.callout3 h2 {
	background-color: #32c1de;
	font-size: 18pt;
	color: white;
	text-align: center;
	height: 38px;
	line-height: 38px;
	font-weight: 600;
}
a.callout1:hover h2,
a.callout2:hover h2,
a.callout3:hover h2 {
	background-color: #011b78;
}

.homelinks {
	background: #fff;
	padding: 2%;
}
.homelinks a {
	display: inline-block;
	width: 39%;
	padding: 12px 0;
	font-size: 10pt;
	border-radius: 4px;
	color: #011b78;
	margin: 0 13px;
}
@media (min-width: 750px) {
	.homelinks a {
		width: auto;
		padding: 12px 24px;
	}
}
.homelinks a:hover {
	color: #fff;
	background: #011b78;
}
.homelinks a i.fa {
	font-size: 40pt;
	top: 1px;
	left: -4px;
	display: block;
	margin: 0 auto;
}

.copy {
	background-color: #fff;
	padding: 18px 6px;
	font-size: 1.5rem;
}
@media (min-width: 750px) {
	.copy {
		background-color: #fff;
		padding: 18px 36px;
		font-size: 1.8rem;
	}
}
.copy h1,
.copy h2,
.copy h3,
.copy h4,
.copy h5,
.copy h6 {
	margin: 18px 0;
}
.copy h1,
.copy h2 {
	font-size: 23pt;
}
@media (min-width: 750px) {
	.copy h1,
	.copy h2 {
		font-size: 27pt;
	}
}
.copy h3 {
	font-size: 21pt;
}
@media (min-width: 750px) {
	.copy h3 {
		font-size: 25pt;
	}
}
.copy h4 {
	font-size: 19pt;
}
@media (min-width: 750px) {
	.copy h4 {
		font-size: 23pt;
		line-height: 37px;
	}
}
.copy h5 {
	font-size: 16pt;
}
@media (min-width: 750px) {
	.copy h5 {
		font-size: 20pt;
	}
}
.copy h6 {
	font-size: 13pt;
}
@media (min-width: 750px) {
	.copy h6 {
		font-size: 17pt;
	}
}
.copy a {
	color: #002c61;
}
.copy a:hover {
	color: #2bc3e2;
	border-bottom: solid 1px #2bc3e2;
}
.copy img {
	max-width: 94%;
	border-radius: 8px;
	
}
@media (min-width: 400px) {
	.copy img {
		margin: 6px 24px;
	}
}
.copy iframe {
	width: 100%;
	min-height: 360px;
}
.copy-column .answer h4,
.copy-column .announcement h4,
.copy-column .staff h4,
.copy-column .class-desc h4 {
	position: relative;
	font-size: 23pt;
	color: #222;
	line-height: 37px;
	padding-left: 36px;
}
.copy-column ul {
}
.copy-column ul li {
	list-style-type: none;
	position: relative;
	margin-top: 12px;
	padding-left: 24px;
}
.copy-column ul li:before,
.copy-column ul li.question:before,
.copy-column .announcement h4:before,
.copy-column .staff h4:before,
.copy-column .answer h4:before,
.copy-column .class-desc h4:before  {  
	position: absolute;
	top: 1px;
	left: 0;
	font-family: 'FontAwesome';
	content: '\f192';
	color: #5bb1e4;
}
.copy-column .answer h4:before,
.copy-column .announcement h4:before,
.copy-column .class-desc h4:before {  
	top: -1px;
}
.copy-column .staff h4:before {  
	top: 0;
}
.copy-column ul li.question {  
	font-size: 15pt;
}
.copy-column ul li.question:before,
.copy-column ul li.announcement:before,
.copy-column .answer h4:before {  
	content: '\f059';
}
.copy-column .staff h4:before {  
	content: '\f005';
}
.copy-column .answer {
	border-top: dotted 1px #ccc;
	padding-bottom: 18px;
}
.copy-column .staff img {
	float: right;
	max-width: 150px;
	margin: 6px 0 0 12px;
}
@media (min-width: 750px) {
	.copy-column .staff img {
		max-width: 200px;
		margin: 6px 0 0 24px;
	}
}
ul.sidenav {
	margin-top: 24px;
}
@media (min-width: 750px) {
	ul.sidenav {
		margin-top: 0;
	}
}
ul.sidenav li {
}
ul.sidenav.fa-ul {
	margin-left: -12px !important;
}
ul.sidenav.fa-ul li i.fa-li {
	left: 3px;
	top: 0;
}
ul.sidenav.fa-ul li a {
	font-size: 13pt;
	display: block;
	color: #222;
	padding: 12px 24px;
	border-bottom: dotted 1px #ccc;
}
@media (min-width: 750px) {
	ul.sidenav.fa-ul li a {
		padding: 12px 0;
	}
}
ul.sidenav.fa-ul li a:hover {
	background-color: #222;
	color: #fff;
}
ul.sidenav a.selected {
	background: rgba(0, 0, 0, 0.05);
}
ul.sidenav.fa-ul li a.selected i.fa {
	color: #aaa;
}

.foot {
	background-image: linear-gradient(#ccc, #fff);
	padding: 2%
}
.footnav h6 {
	color: #222;
	font-weight: 600;
	margin-bottom: 0;
	margin-top: 0;
	padding-top: 0;
}
.footnav ul {
	margin-bottom: 9px;
}
.footnav ul li {
	margin-top: 3px;
}
.footnav ul li a {
	color: #222;
	border-bottom: transparent 1px #000;
}
.footnav ul li a:hover {
	color: #000;
	border-bottom: dotted 1px #000;
}
.footnav ul.fa-ul {
	margin-left: -12px !important;
}
.footnav ul.fa-ul i.fa-li {
	left: 3px;
	top: 0;
	color: #8a8a8a;
}
.copyright {
	padding: 24px 0;
	background-color: #fff;
	font-size: 10pt;
	text-align: center;
}
@media (min-width: 750px) {
	.copyright {
		padding: 0 0;
		background-color: transparent;
		text-align: left;
	}
}
.website-byline {
	margin-top: 12px;
}
.website-byline a {
	color: #8a8a8a;
}


.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: url(/images2012/sb_bg.png) repeat-y;
}
.jScrollPaneDrag {
	position: absolute;
	background: url(/images2012/sb_mid.png) repeat-y;
	cursor: pointer;
	overflow: hidden;
	height: 20px;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	background: url(/images2012/sb_top.png) no-repeat;
	height: 6px;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
	background: url(/images2012/sb_bot.png) no-repeat;
	height: 6px;

}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	background: url(/images2012/sb_up.png) no-repeat;
	height: 30px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	background: url(/images2012/sb_down.png) no-repeat;
	height: 30px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}

#subPageSchedule
{
	min-height: 330px;
	padding: 10px 0px 30px 10px;
	font-size: 12px;
	color: #000;
	line-height: 14px;
}
#subPageSchedule font
{
	color: #474747;
	font-size: 12px;
}
#subPageSchedule b, strong
{
	color: #002085;
}

#schedPDF {
	margin-right: 35px;
	width: 98px;
	float: right;
}
#schedPDF img {
	width: 98px;
	border: 0px;
}
#schedPDF img:hover {
    -moz-opacity: 0.8; /* makes the div transparent, so you have a cool overlay effect */
    opacity: .80;
    filter: alpha(opacity=80);
}

#schedNavigate {
	margin-right: 35px;
	width: 98px;
	float: right;
}
#schedNavigate img:hover {
    -moz-opacity: 0.7; /* makes the div transparent, so you have a cool overlay effect */
    opacity: .70;
    filter: alpha(opacity=70);
}
#schedNavigate img {
	height: 28px;
	border: 0px;
	margin: 0px 6px;
}

#Sunday,
#Monday,
#Tuesday,
#Wednesday,
#Thursday,
#Friday,
#Saturday {
	width: 300px;
	height: 1050px;
	padding: 0;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	position: relative;
	background-image: url(/images2012/sched_bg.png);
	background-repeat: repeat;
}
@media (min-width:900px) {
	#Sunday,
	#Monday,
	#Tuesday,
	#Wednesday,
	#Thursday,
	#Friday,
	#Saturday {
		float: left;
		border-right: 0;
	}
}

.classDayName {
	background-color: #084898;
	color: #b8edf7;
	padding: 0;
	text-align: center;
	font-size: 12pt;
}
.classTime {
	font-size: 10px;
	color: #333333;
}
.classInstructor {
	font-size: 11px;
	font-style: italic;
}
.className {
	font-size: 11px;
	margin: 1px 0px;
}
.classType-1,
.classType-2,
.classType-3,
.classType-4 {
	text-align: center;
	cursor: pointer;
	_cursor: hand;
	width: 32%;
	font-size: 10pt;
	overflow:hidden;
	line-height: 12px;
}
.classType-1 {
	background-color: #f2ee7a;
}
.classType-1:hover {
	background-color: #fff00f;
}
.classType-2 {
	background-color: #badccc;
}
.classType-2:hover {
	background-color: #0fff8f;
}
.classType-3 {
	background-color: #ddccaa;
}
.classType-3:hover {
	background-color: #ffab0b;
}
.classType-4 {
	background-color: #c1cfff;
}
.classType-4:hover {
	background-color: #a1b7ff;
}
.key {
	display: inline-block;
	width: auto !important;
	margin: 0 3px;
	padding: 3px 9px;
}
.overlay {
    display: none;
    position: fixed;
	left: 5%;
	top: 5%;
	width: 70%;
    padding: 25px; 
    border: 1px solid black;
    background-color: #ffffff;
    z-index: 100;

}
@media (min-width:900px) {
	.overlay {
		left: 17.5%;
		top: 20%;
		width: 40%;
		min-height: 40%;
	}
}
.overlayClose {
	position: absolute;
	top: 9px;
	right: 9px;
}
.overlayClose a {
	font-size: 21pt;
	color: #ccc;
}
.overlayClose a:hover {
	border-bottom: 0;
}
.overlayClassName {
	font-size: 15pt;
	line-height: 20px;
	color: #2ac0dd;
	margin-bottom: 18px;
}
@media (min-width:900px) {
	.overlayClassName {
		font-size: 32pt;
		line-height: 40px;
	}
}
.overlayClassDesc {
	font-size: 12pt;
	line-height: 15px;
}
@media (min-width:900px) {
	.overlayClassDesc {
		line-height: 23px;
	}
.overlayClassInstructor {
	font-size: 25pt;
	color: #2ac0dd;
	margin: 24px 0px 12px 0px;
	font-style: italic;
}
.overlayClassBio {
	font-size: 13px;
	line-height: 19px;
}
.overlayClassBio img {
	max-width: 180px;
	float: right;
	margin: 0 0 18px 18px;
}
#fade {
    display: none;  /* ensures it’s invisible until it’s called */
    position: absolute;  /* makes the div go into a position that’s absolute to the browser viewing area */
    left: 0; /* makes the div span all the way across the viewing area */
    top: 0; /* makes the div span all the way across the viewing area */
    background-color: black;
    -moz-opacity: 0.7; /* makes the div transparent, so you have a cool overlay effect */
    opacity: .70;
    filter: alpha(opacity=70);
    width: 100%;
    height: 2000px;
    z-index: 99; /* makes the div the second most top layer, so it’ll lay on top of everything else EXCEPT for divs with a higher z-index (meaning the #overlay ruleset) */
}

.contact {
	max-width: 500px;
}
.contact input,
.contact textarea {
	width: 100%;
}