/*--------------------------------------------------------------------------------------------------
	Global Stylings
--------------------------------------------------------------------------------------------------*/

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, tt, var,
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-family: Arial, Helvetica, sans-serif;
}

.clearing {
	width: 100%;
	height: 0;
	clear: both;
	margin: 0;
}

button {
	border: 0;
	outline: 0;
	background: none;
}

h1 {
	text-transform: uppercase;
	color: #404040;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 25px;
}

h2 {
	text-transform: uppercase;
	color: #404040;
	font-size: 18px;
	font-weight: bold;
	padding-bottom: 30px;
	padding-top: 30px;
}

h3 {
	color: #404040;
	font-size: 16px;
	font-weight: bold;
	padding-top: 20px;
	padding-bottom: 20px;
}

h4 {
	font-size: 30px;
	color: #fff;
	padding-top: 25px;
}

h5 {
	font-size: 18px;
	width: 650px;
	margin-top: calc(25vh - 11vw);
	text-align: center;
	background: linear-gradient(
		60deg,
		hsl(0, 100%, 50%) 01%,
		hsl(72, 100%, 97%) 25%,
		hsl(240, 100%, 25%) 25%,
		hsl(0, 100%, 50%) 45%,
		hsl(72, 100%, 97%) 45%,
		hsl(240, 100%, 25%) 45%,
		hsl(0, 100%, 50%) 55%,
		hsl(72, 100%, 97%) 55%,
		hsl(240, 100%, 25%) 55%,
		hsl(0, 100%, 50%) 70%,
		hsl(72, 100%, 97%) 70%,
		hsl(240, 100%, 25%) 70%,
		hsl(0, 100%, 50%) 85%,
		hsl(72, 100%, 97%) 85%,
		hsl(240, 100%, 25%) 85%
);
		text-shadow: 0.5px -0.6vw #fff4;
		color: #fff;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: 25s BeProud linear infinite;
}

/*-----
	For Calendar
-----*/
/*-----h6 is for the Calendar Header
-----*/
h6 {
	text-transform: uppercase;
	color: #ff0000;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	padding-bottom: 20px;
	padding-top: 20px;
}
/*-----h7 is for the Calendar Days
-----*/
h7 {
	text-transform: uppercase;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
}
/*-----h8 is for the Calendar Numbers
-----*/
h8 {
	text-transform: uppercase;
	color: #000000;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
}
/*-----h9 is for the Event Details
-----*/
h9 {
	word-wrap: normal;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
}
/*-----h10 is for the Event Details (small text)
-----*/
h10 {
	word-wrap: normal;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
}

@keyframes BeProud {
	100% { background-position: 100vw 0px; }
}

@keyframes Always {
	100% { transform: scale(1.1);}
}

.blue-underline {
	border-top: 1px solid #2a55f7;
	width: 150px;
	margin: auto;
	margin-bottom: 5px;
}

.gray-underline {
	border-top: 1px solid #404040;
	margin: auto;
	margin-bottom: 5px;
}

a { 
	text-decoration: none;
}
a:hover { 
	text-decoration: none;
	color:#ffffff;
}

.flash {
   animation-name: flash;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

@keyframes flash {
    from {color: red;}
    to {color: blue;}
}

hr {
       display: block;
       position: relative;
       padding: 20;
       margin: 8px auto;
       height: 0;
       width: 70%;
       max-height: 0;
       font-size: 1px;
       line-height: 1;
       clear: both;
       border: none;
       border-top: 1px solid #000000;
       border-bottom: 1px solid #000000;
}

/*--------------------------------------------------------------------------------------------------
	Top Banner
--------------------------------------------------------------------------------------------------*/

#top-banner-wrap {
	width: 100%;
	min-height: 40px;
	height:auto;
	background: #e1e1e1;
	/*position: fixed;*/
	top: 0;
	border-bottom: 2px solid #adadad;
	z-index: 100;
	margin-left:0px;
}

#top-banner {
	min-height: 40px; 
	height:auto;

}

#top-banner-left {

	position: relative;
	max-width: 10%;    /* 500px */
	vertical-align: middle;
	margin-top: 2px;
	z-index:999;
}

#top-banner-left a img {
	float: left;
}

#top-banner-middle {

	position: relative;
	min-width: 80%;      /* 700px */
	text-align: center;
	/*margin-top: -34px; */
}

#top-banner-middle img {
	float: right;
}

#top-banner-right {
	
	height: 25px;
	position: relative;
	text-align: center;
	vertical-align: middle !important;
	max-width: 10%;
	margin-top: 20px;
}

#top-banner-right a {
	color: red !important;
	text-decoration: blink !important;
}

#top-banner-right img {
	float: right;
}

#top-banner p {
	font-size: 12px;
	font-weight: bold;
	color: #404040;
	line-height: 25px;
	text-align: middle;
	margin-top: 10px;
}

#top-banner a, #top-banner a:visited, #top-banner a:hover {
	font-size: 12px;
	font-weight: bold;
	color: #404040;
	text-decoration: none;
}

.social-icons {
	float: right;
	position: relative;
	margin-right: 5px;
}

img.opacity {
	opacity: 0.5;				  /* normal dim hover dark */
	filter: alpha(opacity=50);
	opacity: 1;					/* normal dark hover dim */
	filter: alpha(opacity=100);

}

img.opacity:hover {
	opacity: 1;					/* normal dim hover dark */
	filter: alpha(opacity=100);
	opacity: .5;				   /* normal dark hover dim */
	filter: alpha(opacity=50);
	
}

#address-pin {
	float: left;
	margin-right: 5px;
	margin-left: 35px;
}

/*--------------------------------------------------------------------------------------------------
	Header
--------------------------------------------------------------------------------------------------*/

#header-wrap {
	width: 100%;
	min-height: 30px;
	background: #fff;
	/*position: fixed;*/
	top: 20px;
	z-index: 100;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}

#header {

	max-width: 1000px;
	width 100%;
	height: 45px;
	margin: auto;
}

#header-left {

	margin-top: 5px;

	position: relative;
}

#header-middle {
	float: center;
	margin-top: 5px;
	position: relative;
	text-align: center;
}

#header-middle p {
	text-align: center;
	color: #404040;
	font-style: italic;
	font-size: 20px;
	margin-bottom: 5px;
}

#header-right {
	float: center;
	margin-top: 5px;
	position: relative;
	text-align: right;
}

#header-right p {
	text-align: right;
	color: #404040;
	font-style: italic;
	font-size: 18px;
	margin-bottom: 30px;
}

/*--------------------------------------------------------------------------------------------------
	Menu
--------------------------------------------------------------------------------------------------*/

.menu  {
	width: 100%;
	/*margin-top: -13px;*/
}

.menu ul {
	text-align: left;
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
	position:relative;
	z-index:999999999;
}

.menu ul li {
	display: inline-block;
	margin-right: -4px;
	position: relative;
	padding: 9px;
	cursor: pointer;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 11px !important;
	font-weight: bold;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

.menu ul li a, a:visited {
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
	color: #000;
}

.menu ul li:hover {
	background: #E1E1E1;
	text-decoration: none;
	color: #2A55F7;
}

.menu ul li ul {
	padding: 0;
	position: absolute;
	top: 34px;
	left: 0;
	width: 200px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	display: none;
	opacity: 0;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-ms-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	-transition: opacity 0.2s;
}

.menu ul li ul li { 
	background: #E1E1E1; 
	display: block; 
}

.menu ul li ul li:hover { 
	background: #2A55F7; 
}

.menu ul li ul li a:hover { 
	color: #fff !important; 
}

	
.menu ul li:hover ul {
	display: block;
	opacity: 1;
	visibility: visible;
}

/*------------Third Level----------------------*/

.menu > li > ul li > ul {
    display: none !important;
}

.menu > li > ul li:hover > ul {
    display: block !important;
    position: absolute;
    left: 100%;
    top: 0;
    width: auto;
}

.menu > li > ul > li ul > li {
    display: block;
    padding: 12px;
    white-space: nowrap;
}

/*--------------------------------------------------------------------------------------------------
	Top slider
--------------------------------------------------------------------------------------------------*/

li.t-banner {
	height: 500px !important;
	z-index: -1;
}

.t-banner ul {
	list-style: none;
	width: 100%;
	
}

.t-banner ul li {
	display: block;
	float: left;
	width: 100%;
	padding: 160px 0 110px;
	min-height: 500px;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	-ms-background-size: 100% 100%;
	box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
}

/*--------------------------------------------------------------------------------------------------
	Calendar
--------------------------------------------------------------------------------------------------*/

body{
	background:white;
}
.container{
	max-width:100%;
	margin:auto;
	font-family:sans-serif;
}
table, th, td {
	width:100%;
	table-layout:fixed;
	text-align:center;
	font-size:12px;
	border-collapse:collapse;
	border:2px solid white;
}
tr,th,td{
	padding:2px;
	vertical-align: top;
}
td a{
	text-decoration: none;
}
td a:link, a:visited{
	color:white;
}

/*--------------------------------------------------------------------------------------------------
	Main Content Pages
--------------------------------------------------------------------------------------------------*/

#main-content-wrap {
	background: url('/img/crosshatch.jpg') repeat;
	position: relative;
	z-index:0;
}

#main-content {
	padding-top: 25px;
	padding-bottom: 25px;
}

#main-content td {
	padding-top: 25px;
	padding-bottom: 25px;
	vertical-align: top;
}

#main-content-body {
	width: 700px;
	width: 600px;
	margin-right: 25px;
	float: left;
	position: relative;
}

#main-content-body p {
	font-size: 12px;
	color: #000;
	margin-bottom: 10px;
}

.content-image-left {
	float: left;
	margin-right: 15px;
	margin-bottom: 15px;
	position: relative;
}

/*--------------------------------------------------------------------------------------------------
	Sidebar
--------------------------------------------------------------------------------------------------*/

.sidebar {

	position: relative;

	background: #e1e1e1;
	padding: 15px;
	border: 1px solid #404040;
	margin-bottom: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-khtml-border-radius: 10px;
}

#sidebar2 {
	display: inline;
	margin-top: 10px;
}


.sidebar h2 {
	text-align: right;
}

.sidebar p {
	font-size: 14px;
	font-size: 12px;
}

.sidebar #awards {
	text-align: center;
}

.input {
	padding: 5px;
	margin-bottom: 10px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-khtml-border-radius: 5px;
	font-size: 12px;
	font-style: italic;
	border: none;
	width: 100% !important;  /* added to force the input to stretch sidebar */
} 

.submit {
	padding: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-khtml-border-radius: 10px;
	font-size: 14px;
	text-transform: uppercase;
	background: #2a55f7;
	color: #fff;
	cursor: pointer;
	font-weight: bold;
	border: none;
	text-align: center;
	width: 85px;
	margin: auto;
	display: block;
}

/*--------------------------------------------------------------------------------------------------
	Main Image Pages
--------------------------------------------------------------------------------------------------*/

#main-image-wrap {
	width: 100%;
	overflow: auto;	/*position: relative;
	margin-top: 120px;*/
}

#main-image {
	width: 100%;
	margin: auto;
	text-align:center;
	overflow:hidden;
} 

/*--------------------------------------------------------------------------------------------------
	Copyright
--------------------------------------------------------------------------------------------------*/

#copyright-wrap {
	background: #404040;
	position: relative;
	text-align:center;
}

#copyright {
	width:100%;
	max-width: 1000px;
	margin: auto;
	padding-top: 10px;
	padding-bottom: 10px;
}

#copyright p {
	color: #fff;
	font-size: 11px;
}

#copyright a, a:visited {
	text-decoration: underline;
	font-size: 11px;
	color: #519FE1;
	font-weight: bold;
}

#copyright a:hover {
	text-decoration: underline;
	font-size: 11px;
	color: #e1e1e1;
	font-weight: bold;
}

/*--------------------------------------------------------------------------------------------------
	Calendar
--------------------------------------------------------------------------------------------------*/

#calendar-wrap {
	background: #fff;
	position: relative;
	text-align:center;
}

.calendar {
	width:100%;
	max-width: 994px;
	margin: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align:center;
}

.img {
	text-align:center;
}

/*--------------------------------------------------------------------------------------------------
	Google Maps
--------------------------------------------------------------------------------------------------*/

html { height: 100% }
body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-X: hidden;
	background-image: url(../img/crosshatch.jpg);
	background-repeat: repeat;
}
#google-map-wrapper {
	height: 325px;

}
#map-canvas { 
	border: solid 1px #999; 
	position: relative;
	width:100%;
	max-width: 600px;
	height: 300px;
}

#map-control {
	background: #fff;
	padding: 5px;
	font-size: 14px;
	font-family: Arial;
	border: 1px solid #ccc;
	box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
}
#map-control #start {
	width: 275px;
}

#map-panel {
	position: relative;
	height: 290px;
	/*top: -302px;*/
	/*left: 601px;*/
	z-index: 5;
	background-color: #fff;
	padding: 5px;
	border: 1px solid #999;
	width: 390px;
	width: 590px;
	overflow: auto;
	display: none;
}


@media print {
#map-canvas {
  height: 500px;
  margin: 0;
}

#map-panel {
  float: none;
  width: auto;
}
}

/*--------------------------------------------------------------------------------------------------
	About
--------------------------------------------------------------------------------------------------*/

.about {
	background: #E1E1E1;
	border: 1px solid #404040;

	min-height: 185px;
	margin-bottom: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-khtml-border-radius: 10px;
}
		
.about img {
    padding: 5px;
    background: none repeat scroll 0% 0% #FFF;
    border: 1px solid #CCC;
	width: 210px;
	height: 173px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-khtml-border-radius: 10px;
}
.about img.left { float: left; }
.about img.right { float: right; }

.about div {
	display: inline;
	padding: 0px;
    width: 100%;
}
.about div.left { text-align: left; }
.about div.right { text-align: right; }

.about div h3,
.about div p  { 
	padding: 5px !important;
}

img.cert {
	background: none;
	border: none;
	height: 65px;
	width: 75px;
}

/*--------------------------------------------------------------------------------------------------
	Mobile
--------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 1200px) {
    /* tablets and desktop */
	
	#main-content-home p {
	font-size: 15px;
	color: #000;
	padding-left:0%;
	padding-right:0%;
}
}

 
@media only screen and (min-width: 768px) {
    /* tablets and desktop */
	.navigation{'width' : '600px', 'height' : '500px', 'float' : 'none' }
	 p {
	font-size: 15px;
	color: #000;
	padding-left:2%;
	padding-right:2%;
}
}

@media only screen and (max-width: 767px) {
    /* phones */
	.navigation{'width' : '350px', 'height' : '600px', 'float' : 'none' }
	 p {
	font-size: 18px;
	color: #000;
	padding-left:4%;
	padding-right:4%;
}
#home-highlight p {
	font-size:15px;
	line-height:1.3em;
}
.about div.right{
	text-align:left;
}
.about div.left{
	text-align:left;
}
.about img.left{
float:none;	
text-align:left;
margin-left:auto;
margin-right:auto;
}
.about img.right{
float:none;	
text-align:left;
}
.btn {
margin:15px;
}
.window-wrap div.desc-right, div.desc-left, div.desc-right{
text-align:left;
padding-bottom:25px;	
}
.window-wrap div.img-right, .window-wrap div.desc-right{
	float:left;
}
.lanai-wrap div.img-left{
	padding-bottom:15px;
}
.lanai-wrap div.img-right{
	padding-bottom:15px;
}
.lanai-wrap div.desc-right{
	text-align:left;
}
.titletagtop {
    white-space: nowrap;
}
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}	

.mobile-menu { 
	display:none; 
}

@media only screen and (max-width: 767px) {
	.banner {
		height:300px;
	}

	#home-highlight-wrap{
		padding-top:25px;
	}
/* Square Box to open menu */
	.mobile-menu { 
		display:inline-block; 
		padding-left:15px;
		padding-right:15px;  
		background:#2a55f7; 
		border:1px solid #000;
		z-index:99999;
		position:relative;
		font-size:27px;
		color:#fff;
		float:left;
	}

	.menu { 
		display:none; 
	}

	.menu ul { 
		height:auto;
		background-color:#ffffff;
		padding-top:0px;
		position:relative;
		z-index:999999999;
	}
		
	.menu ul li{
		height:auto;
		background: #ccc;
		width: 100%;
		position:relative;
		z-index:900000000;
	}

	.menu ul li ul{
		height:auto;
		background: #ccc;
		width: 100%;
		position:relative;
		z-index:999999998;
	}
	
	.menu ul li ul li{
		height:auto;
		background: #ccc;
		padding-bottom:50px;
		width: 100%;
		position:center;
		z-index:999999999;
	}

	.menu ul li ul li a{
		height:auto;
		background: #ccc;
		width: 100%;
		position:center;
		z-index:999999999;
	}
	.logo{
		padding-left:20px;		
	}
}