/* CSS Document */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }
.clearer { height:0; line-height:0; float:none; clear:both; }
#maincontainer a:link { color: inherit; }
#maincontainer a:visited { color: inherit; }
#maincontainer a:hover { color: inherit; }
#maincontainer a:active { color: inherit; }
#maincontainer { position:relative; }
#menubarcontainer { width:100%; height:160px; position:fixed;top: 0; left:0; z-index:10; 
background: -moz-linear-gradient(top,  rgba(25,36,52,1) 0%, rgba(25,36,52,1) 11%, rgba(25,36,52,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,36,52,1)), color-stop(11%,rgba(25,36,52,1)), color-stop(100%,rgba(25,36,52,0)));
background: -webkit-linear-gradient(top,  rgba(25,36,52,1) 0%,rgba(25,36,52,1) 11%,rgba(25,36,52,0) 100%);
background: -o-linear-gradient(top,  rgba(25,36,52,1) 0%,rgba(25,36,52,1) 11%,rgba(25,36,52,0) 100%);
background: -ms-linear-gradient(top,  rgba(25,36,52,1) 0%,rgba(25,36,52,1) 11%,rgba(25,36,52,0) 100%);
background: linear-gradient(to bottom,  rgba(25,36,52,1) 0%,rgba(25,36,52,1) 11%,rgba(25,36,52,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#192434', endColorstr='#19243400',GradientType=0 );
}
#tile,#footer {height:13px; width:100%; background:url(images/header_tile.png) repeat-x;}
#tile {border-bottom:4px solid #00A0C7;}
#footer {border-top:4px solid #00A0C7;}
.container { width:auto !important; max-width:940px; padding:0 10px; margin:0 auto; position:relative; box-sizing:border-box}
#menubar ul,#menubar li { margin:0; padding:0; list-style-type: none; float:left; position:relative;}
#menubar ul {left:50%;}
#menubar li {left:-50%;display:table;margin:0 0.5%; width:13%}
#menubar a { display:table-cell; height:68px; vertical-align:bottom; font-size:14px;line-height:20px;padding:0 5px 7px; background-color:#207A96; width:100%; color:#FEFEFE !important; font-family: "museo-sans",sans-serif; font-weight:600; transition:height 0.15s; -webkit-transition:height 0.15s; box-shadow:0 1px 3px rgba(0,0,0,0.65);box-sizing:border-box;}
#menubar a:hover { text-decoration:none !important; height:78px; }
#menubar li.active a { background-color:#00A1C5; color:#FFFFFF; height:88px; }

.section {background-image:url(images/bg_section.jpg);background-size:cover;background-position:top center;overflow:auto;padding:60px 0 53px;}
#home {background-image:url(images/bg_home.jpg);padding:120px 0;}
#hottubs {background-image:url(images/bg_hot-tubs.jpg);}
#commercial {background-image:url(images/bg_commercial.jpg);}
#contact {background-image:url(images/bg_contact.jpg);}
.hasbg {color:#ffffff;background:#00678C;background-position: center center;background-size:cover;background-attachment:fixed;
    box-shadow: inset 0px 35px 30px -30px rgba(0,0,0,0.4),inset 0px -35px 30px -30px rgba(0,0,0,0.4);
}
a.button {background-color:#262658; color:#ffffff !important;}
a.button:hover {background-color:#363668;text-decoration:none !important;}
.hasbg a.button {background-color:#E7F2FF; color:#197998 !important;}
.hasbg a.button:hover {background-color:#ffffff;text-decoration:none !important;}

.container ul {column-count:2;-webkit-column-count:2;width:620px;column-gap:20px;-webkit-column-gap:20px;margin:0 auto;}
.container li {text-align:left;list-style:inside;padding-left:1em;text-indent:-1em;padding-bottom:26px;break-inside:avoid-column;-webkit-column-break-inside:avoid;}
.container li p {font-weight:500;margin:0}

.container>:last-child {margin-bottom:0;}

.ccm-layout-cell {text-align:left;}
.sidebar {color:#D9E5F3;font-size:16px;}


.formblock label { font-weight:300; text-align: left; font-size:17px; line-height:30px;padding:0;margin:0; white-space:nowrap;}
.formblock input, .formblock textarea { width:99%; padding:0 6px !important; margin:0 0 15px !important; background-color:rgba(255,255,255,0.7); 	-moz-box-sizing:border-box !important; -webkit-box-sizing:border-box !important; box-sizing:border-box !important; border:0;border-radius:0;}
.formblock input { height:44px;  }
.formblock textarea { height:148px;  }
.formblock input[type=submit] {
	border:0;
	display:inline-block;
	width:140px !important;
	font-size:14px !important;
	font-weight:700;
	color:#197998;
	background-color:#E7F2FF;
	text-transform:uppercase;
}
.formblock input[type=submit]:hover {
	background-color:#FFFFFF;
}
.formblock #msg {
	background:#333;
	color:inherit;
	text-align:left;
}
.formblock #msg .error {
	color:#FF4444;
}
.formblock .success {background:none;border:none;font-size:24px;}

.formblock .errors {background:none;border:0;color:#FF9999}
.formblock .errors ul {column-count:1;-webkit-column-count:1;}
#topbtn { width:64px;height:46px;position:fixed; bottom:100px;right:-18px; background:#ffffff url(images/top_btn.gif) 5px center no-repeat; border-radius:6px 0 0 6px;box-shadow:0 1px 2px rgba(0,0,0,0.6); z-index:200; transition:right 0.15s; -webkit-transition:right 0.15s; cursor:pointer; }
#topbtn:hover { right:0; }
#topbtn.affix-top {right:-64px;}
.nav-trigger {display:none;}

@media (max-width: 660px) {
  .ccm-layout-cell {float:none !important;width:100% !important;}
  .ccm-layout-col-spacing { margin:0 !important; }
  #menubarcontainer {background:none;height:auto;}
	#menubar { max-height:0%; position:fixed; top:0; left:0; z-index:10; background:#000;overflow:hidden;z-index:1000;transition:max-height 0.5s, box-shadow 0.5s; }
	.nav-trigger {position:absolute;clip:rect(0,0,0,0)}
	label[for="nav-trigger"] {position:fixed;top:35px;right:15px;z-index:999;
    cursor: pointer;
	background-color:#EEF;
	border-radius:7px;
	box-shadow:0 1px 3px rgba(0,0,0,0.7);
	height:44px;
	width:44px;
	}
	label[for="nav-trigger"]:before {
		border-bottom: 17px double #00A0C7;
	    border-top: 6px solid #00A0C7;    
	    content:"";
	    height: 5px; 
	    position: absolute; 
	    right:7px;  
	    top: 8px; 
	    width:30px; 
	}
	.nav-trigger:checked ~ #menubar {
    max-height: 100%;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
	}
	#menubar ul,#menubar li { float:none; display:block; left: auto;}
	#menubar li { float:left;width:48%;margin:0 1%; }
	#menubar a { font-size:17px;line-height:17px !important;display:block;height:60px;}
	#menubar a { float:none; width:auto; margin:1px 0px; padding:10px 5px 0; font-weight:300 !important; line-height:32px;box-shadow:none}
	#menubar li:first-of-type {display:none}
	#menubar a:hover { height:60px; }
	#menubar li.active a { height:60px; }
	#maincontainer h2 { font-size: 20px !important; }
	#maincontainer h3 { font-size: 18px !important; }
	#topbtn { display:none;}
	.container ul {column-count:1;-webkit-column-count:1;width:auto;}
	.container li {text-align:center}
	img {max-width:90% !important}
	#home {padding:10% 0}
}