/* Site Styles */

/* colour palette
#3b3d40		gray
#83D5FB		blue
#FCB548		yellow
#203E93		blue
#cccccc		footer
#9A9DA2		grey
*/

/* fluid column layout */
.fluid1col, .fluid2col, .fluid3col, .fluid23col, .fluid4col, .fluid5col, .fluid6col, .fluid34col {
	padding:  10px 10px;
	position: relative;
	display: inline-block;
	width: 100%;
	float: left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;	
	text-align: left;
}
img.interests {
	position: relative;
	display: inline-block;
	padding:  5px;
	border-radius: 0.3em;
	border:  1px solid #ccc;
	transition: all 0.5s ease;
}
img.interests:hover {
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

@media screen and (min-width: 601px) {
	body {
		height: 100%;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		/*font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;*/
		font-family: 'Roboto', sans-serif;
		color: #555;
		font-weight: 300;
	}
	.mainCallOut {
		position: relative; display: inline-block; background: #fff; width: 100%; max-width: 900px; text-align: center; left: 50%; transform: translateX(-50%); margin-top: -30%; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); border-radius: 0.2em; z-index: 10px;
	}
	.imgRight {
		position: relative;
		display: inline-block;
		width:  50%;
		float: right;
		padding: 10px 0 10px 10px;
	}
	#logoSection {
		padding:  20px;
	}
	.speech-bubble {
	  filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.15));
	  margin: 1rem 1rem 1rem -1rem;
	  margin-bottom: 40px;
	  padding: 20px 5px -5px 5px;
	  position: relative;
	  font-family: "Source Sans Pro", sans-serif;
	  font-size: 1.2em;
	  font-weight: 400;
	  background: #83D5FB;
	  color: white;
	  width:  80px;
	  text-align: center;
	  line-height: 50px;
	}
	.speech-bubble::before {
	  border: 12.5px solid transparent;
	  border-top: 12.5px solid #83D5FB;
	  border-bottom: 0;
	  height: 0;
	  width: 0;
	  border-top-width: 25px;
	  content: "";
	  display: block;
	  position: absolute;
	  left: 3rem;
	  bottom: -25px;
	  transform-origin: center;
	  transform: rotate(90deg) skew(-25deg) translateY(16.6666666667px);
	}	
	#pre-footer {
		font-size:  0.95em;
	}
	.space {
		padding-top: 50px;
	}
	#covid-ticker {
		padding: 10px 50px;
	}	
	#blog-section {
		padding: 50px 100px;	
	}
	#pre-footer {
		padding: 0;
	}
	.homepageBanner {
		position: relative;
		display: inline-block;
		background: url("images/banner-home-1.jpg");
		background-size: 100%;
	}
	#bannerTagline {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
		display: inline-block;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		color: #fff;
		padding: 0;
		margin: 0;
		background: rgba(0,0,0,0.7);
		/*text-align: center;*/
	}
	.taglineTitle {
		color: #fff;
		width: 100%;
		font-weight: 600;
		font-size: 6.0em !important;
		padding-top: 300px;
		padding-left: 55%;
		line-height: 100px;
		font-family: 'Allura', cursive;
	}

	#page-container {
		position: relative;
		height: 100%;
		width: 100%;
		padding: 0;
		margin-right: auto;
		margin-left: auto;
		top: 0;	
		overflow: hidden;
	}	
	
	/* header */
	#header {
		position: relative;
		display: inline-block;
		padding: 0;
		width: 100%;
		height: 200px;
		float: left;		
		z-index: 30;
		background: rgba(255,255,255,1.0);	
	}			
	
	/* banner */
	#banner {
		position: relative;
		display: inline-block;
		width: 100%;
		overflow: hidden;
		float: left;
	}
	#banner-inside {
		position: relative;
		display: inline-block;
		width: 100%;
		overflow: hidden;
		float: left;
	}
	#banner-inside img {
		position: relative;
		float: left;
		width: 100%;
	}
	
	/* content */
	#content {
		position: relative;
		display: inline-block;
		width: 100%;
		color: #555;
		z-index: 20;	
		background: #efefef;	
	}
	#content-inside {
		position: relative;
		display: inline-block;
		text-align: left;
		width: 100%;
		padding: 2% 5%;
		font-size: 1.0em;
		font-weight: 300;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-animation: fadi 2s 1;		
	}
	
	/* fluid columns */
	.fluid1col {
		width: 100%;
	}
	.fluid2col {
		width: 50%;
	}
	.fluid23col {
		width: 66.666666666666666%;
	}	
	.fluid3col {
		width: 33.33333333333%;		
	}
	.fluid34col {
		width: 75%;	
	}	
	.fluid4col {
		width: 25%;	
	}	
	.fluid5col {
		width: 20%;
	}
	.fluid6col {
		width:  16.6666666666%;
	}
	
	/* mabile connect buttons */
	#call-now, #map-it {
		display: none;
	}
	
	/* footer */
	#footer-container {
		position: relative;
		display: inline-block;
		width: 100%;
		background: #83D5FB; 
		color: #fff;
		font-size: 14pt;
		float: left;
		font-weight: 100;
		padding: 0 0 100px 0;
	}
	#footer-center {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		padding: 2%;
		box-sizing: border-box;
	}
	#footer-container a {
		text-decoration: none;	
	}	
	
	/* contact form */
	#contactInlineFrm {
		position: relative;
		display: inline-block;
		text-align: center;
		background: #ebe8e5;
		width: 100%;
		padding: 5px 0;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	#contactFrm {
		position: absolute;
		right: 0;
		left: 0;
		margin-left: auto;
		margin-right: auto;
		top: 3%;
		display: inline-block;
		width: 300px;
		padding: 10px;
		z-index: 1000;
		background: #ffffff;
		border-radius: 0.5em;
		-webkit-border-radius: 0.5em;
		-moz-border-radius: 0.5em;
		border: 1px solid #cccccc;
		box-shadow: 0 0 10px #83D5FB;
	}
	input.contact-form, select.contact-form {
		position: relative;
		width: 95%;
		border: none;
		padding:10px;
		margin: 1% 0 1% 0;
		background: #fff;
		font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
		color: #333333;
		outline: none;
		font-size: 1.1em;
		/*border: 1px solid #83D5FB;*/
		border-radius: 0.5em;
		-webkit-border-radius: 0.5em;
		-moz-border-radius: 0.5em;	
		box-sizing: border-box;
		height: 50px;
	}
	input.contact-form:hover, select.contact-form:hover {
		background: #fafafa;
		/*border: 1px solid #808080;*/
	}	
	textarea.contact-form  {
		position: relative;
		width: 95%;
		height: 50px;
		border: none;
		padding: 10px;
		margin-top: 0;
		background: #fff;	
		font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
		font-size: 1.1em;
		color: #333333;
		/*border: 1px solid #83D5FB;*/
		border-radius: 0.5em;
		-webkit-border-radius: 0.5em;
		-moz-border-radius: 0.5em;		
		outline: none;
	}
	textarea.contact-form:hover {
		background: #fafafa;
		border: 1px solid #808080;
	}		
	.contact-form-button {
		position: relative;
		display: inline-block;
		box-sizing: border-box;
		width: 95%;
		margin: 1% 0;
		cursor: pointer;
		font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
		color: #fff;
		padding: 14px 5% 13px 5%;
		background: #83D5FB; 
		border-radius: 0.5em;
		-webkit-border-radius: 0.5em;
		-moz-border-radius: 0.5em;		
		outline: none;
		border: none;
		font-size: 1.1em;
		text-align: center;
		-webkit-transition: all 0.4s ease;  
		-moz-transition: all 0.4s ease;  
		-o-transition: all 0.4s ease;  
		-ms-transition: all 0.4s ease;  
		transition: all 0.4s ease;		
	}	
	.contact-form-button:hover {
		color: #ffffff; 
		background: #808080; 
	}
}
@media screen and (max-width: 600px) {
	body {
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		font-family: 'Roboto', sans-serif;
		color: #555;
		height: 100%;
		background: #fff;		
	}
	.mainCallOut {
		position: relative; display: inline-block; background: #fff; width: 100%; max-width: 900px; text-align: center; left: 50%; transform: translateX(-50%); margin-top: -20%; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); border-radius: 0.2em; z-index: 10px;
	}	
	#logoSection {
		padding:  2px 20px;
		width: 100%;
		text-align: center;
	}
	#logoSection > h2 {
		font-size: 1.8em;
		width:  100%;
		text-align: center;
	}
	.speech-bubble {
	  filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.15));
	  margin: 1rem 1rem 1rem 1rem;
	  margin-bottom: 40px;
	  padding: 20px 5px -5px 5px;
	  position: relative;
	  font-family: "Source Sans Pro", sans-serif;
	  font-size: 1.2em;
	  font-weight: 400;
	  background: #83D5FB;
	  color: white;
	  width:  80px;
	  text-align: center;
	  line-height: 50px;
	}
	.speech-bubble::before {
	  border: 12.5px solid transparent;
	  border-top: 12.5px solid #83D5FB;
	  border-bottom: 0;
	  height: 0;
	  width: 0;
	  border-top-width: 25px;
	  content: "";
	  display: block;
	  position: absolute;
	  left: 3rem;
	  bottom: -25px;
	  transform-origin: center;
	  transform: rotate(90deg) skew(-25deg) translateY(16.6666666667px);
	}	
	.imgRight {
		position: relative;
		display: inline-block;
		width:  100%;
		padding: 10px;
	}	
	.space {
		padding-top: 10px;
	}
	#pre-footer {
		padding: 0;	
	}

	.hideMobile {
		display: none !important;
	}

	#bannerTagline {
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		color: #fff;
		padding: 0;
		margin: 0;
		background: rgba(0,0,0,0.7);
		/*text-align: center;*/
	}
	.taglineTitle {
		color: #fff;
		width: 100%;
		text-align: center;
		font-family: 'Allura', cursive;
		font-weight: 400;
		font-size: 1.0em;
		line-height: 25px;
		margin-top: 5px;
	}	

	#page-container {
		position: relative;
		width: 100%;
		padding: 0;
		margin-right: auto;
		margin-left: auto;
		top: 0;
		background: #fff;
	}
	
	/* information panels */
	#infoPanelContainer {
		position: relative;
		display: inline-block;
		bottom: 0;
		text-align: center;
		width: 100%;
		z-index: 20;
		float: left;
	}	
	a.infoPanel:link, a.infoPanel:active, a.infoPanel:visited {
		position: relative;
		display: inline-block;
		width: 100%;
		height:  220px;
		float: left;
		color: #ffffff;
		text-align: center;
		padding: 5px;
	}	
	
	/* main page links */
	a.mainLinks:link, a.mainLinks:active, a.mainLinks:visited {
		display: block;
		padding: 0 0 1% 2%;
		text-transform: uppercase;
		color: #83D5FB;
		font-size: 0.7em;
		text-decoration: none;
	}
	a.mainLinks:hover {
		color: #3b3d40;
	}	
	
	
	/* welcome banner */
	#welcome-banner {
		display: none;
	}	
	
	#mobileQRpanel {	
		display: none;
	}	
	
	/* ticker */
	#ticker {
		position: relative;
		display: inline-block;
		width: 100%;
		float: left;		
		text-align: right;
		padding: 15px 5px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		color: #83D5FB;
	}
		
	/* header */
	#header {
		position: relative;
		display: inline-block;
		padding: 0;
		margin: 0;
		width: 100%;
		float: left;
		text-align: center;
		z-index: 30;	
		background: rgba(255,255,255,1.0);		
	}
	
	/* content */
	#content {
		position: relative;
		display: inline-block;
		margin: 0;
		width: 100%;
		padding: 2%;
		color: #555;
		/*overflow: hidden;*/
		float: left;
		background: #efefef;
		/*border-top: 1px solid #83D5FB;*/
	}
	#content-inside {
		text-align: left;
		width: 100%;
		float: left;
		font-weight: 300;
	}
	
	/* fluid columns */
	.fluid1col, .fluid2col, .fluid3col, .fluid23col, .fluid4col, .fluid5col, .fluid6col, .fluid34col {
		width:  100%
	}	

	/* footer */
	#footer-container {
		position: relative;
		display: inline-block;
		width: 100%;
		box-sizing: border-box;
		padding: 2%;
		background: #83D5FB; 
		color: #fff;
		font-size: 0.95em;
		float: left;
		font-family: 'Roboto Slab', sans-serif;
		font-weight: 300;
	}		
	
	/* adjust banner for mobile view*/
	#banner {
		position: relative;
		display: inline-block;
		width: 100%;
		overflow: hidden;
		margin-left: auto;
		margin-right: auto;	
		text-align: center;
		float: left;
	}
	#banner-inside {
		position: relative;
		display: inline-block;
		width: 100%;
		overflow: hidden;
		margin-left: auto;
		margin-right: auto;	
		/*border-bottom: 2px solid #83D5FB;*/
	}
	#banner-inside img {
		width: 100%;
	}
	
	/* contact form */
	#contactInlineFrm {
		position: relative;
		background: #ebe8e5;		
		width: 100%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;	
		float: left;
	}
	
	#contactFrm {
		position: relative;
		display: inline-block;
		margin: 0;
		padding: 0;
		width: 100%;
		border-radius: 0.5em;
		-webkit-border-radius: 0.5em;
		-moz-border-radius: 0.5em;
		background: rgba(255,255,255,1.0);
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		text-align: center;
		float: left;
	}
	#contactFrm h3 {
		padding: 0;
		margin: 0;
		color: #fff;
	}
	input.contact-form, select.contact-form {
		position: relative;
		width: 95%;
		border: none;
		padding: 10px;
		margin: 1% 0 1% 0;
		background: #fff;
		font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
		color: #333333;
		outline: none;
		font-size: 1.1em;
		/*border: 1px solid #83D5FB;*/
		box-sizing: border-box;
		border-radius: 0.5em;		
		-webkit-border-radius: 0.5em;	
		-moz-border-radius: 0.5em;	
		height: 50px;	
	}
	input.contact-form:hover,  select.contact-form:hover {
		background: #ececec;
		/*border: 1px solid #808080;*/
	}	
	textarea.contact-form  {
		position: relative;	
		width: 95%;
		height: 50px;
		border: none;
		padding: 10px;
		margin-top: 0;
		background: #fff;	
		font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
		font-size: 1.1em;
		color: #333333;
		/*border: 1px solid #83D5FB;*/
		border-radius: 0.5em;	
		-webkit-border-radius: 0.5em;	
		-moz-border-radius: 0.5em;	
		box-sizing: border-box;		
		outline: none;
	}
	textarea.contact-form:hover {
		background: #ececec;
		/*border: 1px solid #808080;*/
	}	
	.contact-form-button {
		position: relative;
		display: inline-block;
		box-sizing: border-box;
		width: 95%;		
		margin: 2% 0;
		cursor: pointer;
		font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
		color: #fff;
		padding: 2% 10% 2% 10%;
		background: #83D5FB; 
		border-radius: 0.5em;
		-webkit-border-radius: 0.5em;
		-moz-border-radius: 0.5em;		
		outline: none;
		border: none;
		font-size: 1.4em;
		text-align: center;
		-webkit-transition: all 0.4s ease;  
		-moz-transition: all 0.4s ease;  
		-o-transition: all 0.4s ease;  
		-ms-transition: all 0.4s ease;  
		transition: all 0.4s ease;
		box-sizing: border-box;
	}
	.contact-form-button:hover {
		color: #ffffff; 
		background: #808080; 
	}
}

.grey {
	color: #9A9DA2;
}
.blue {
	color: #83D5FB;
}

/* repsonsive videos */
.videoSection { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.videoSection iframe, .videoSection object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#pre-footer {
	position: relative;
	display: inline-block;
	float: left;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
}

p {
	padding: 0;
	margin: 0 0 20px 0;
}

.pageTitle {
	position: relative;
	display: inline-block;
	padding: 25px 0;
	width: 100%; text-align: center;
	line-height: 30px;
	font-size: 3.0em;
	color: #203E93;
	font-family: 'Roboto Slab', sans-serif;
}

/* set a size for map container, the Google Map will take up 100% of this container */
#map {
	position: relative;
	display: inline-block;
	background: rgba(255,255,255,0.8);
	float: left;
	width: 100%;
	min-height: 300px;
}

#contactSection {
	position: relative;
	display: inline-block;
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
	background: #ebe8e5;	
	border-top: 2px solid #83D5FB;	
	text-align: center;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	overflow: hidden;
}

#mapSection {
	position: relative;
	display: inline-block;
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	overflow: hidden;
}

.center {
	text-align: center;
}

/* default title styles */
h1, {
	font-family: 'Roboto', cursive;
	font-weight: 300;
}
h2, h3, h4, h5 {
	font-weight: 400;
	text-align: left;
}
h4 {
	color: #333;
	font-size: 1.5em;
	padding: 40px 0 0 0;
	margin: 0;
}
h5 {
	font-size: 0.9em;
	border-bottom:  1px solid #ccc;
}
h3 {
	color: #555;
	font-size: 1.1em;
	line-height: 20px !important;
	font-weight: 400;
}
h2 {	
	font-weight: 300;
	color: #333;	
	font-size: 2.0em;
	margin: 15px 0;
	line-height: 40px;
}
h1 {	
	text-transform: uppercase;
	color: #333;
	-webkit-font-smoothing: antialiased;
	width: 100%;
	text-align: center;
}
h2.logo {
	font-family: 'Great Vibes', cursive;
	color: #83D5FB;
	font-size: 3.0em;
	line-height: 25px;
}

a.white:link, a.white:active, a.white:visited, a.white:hover {
	color: #fff;
	text-decoration: underline;
	transition: all 0.2s ease;
}
a.white:hover {
	color: #ececec; 
	text-decoration: underline;
}

/* footer link styles */
a.footerLinks:link, a.footerLinks:active, a.footerLinks:visited, a.footerLinks:hover {
	position: relative;
	display: inline-block;
	color: #fff;
	text-decoration: none;
	-webkit-transition: all 0.4s ease;  
	-moz-transition: all 0.4s ease;  
	-o-transition: all 0.4s ease;  
	-ms-transition: all 0.4s ease;  
	transition: all 0.4s ease;			
}
a.footerLinks:hover {
	color: #83D5FB;
	background: #ececec;
	text-decoration: underline;
}	

/* default link styles */
a:link, a:active, a:visited, a:hover {
	color: #83D5FB;
	text-decoration: none;
	outline: none;
	transition: all 0.4s ease;
}
a:hover {
	color: #203E93; 
	text-decoration: underline;
	outline: none;
	/*background: #ffffff;*/
}

a.socialLink:link, a.socialLink:active, a.socialLink:visited, a.socialLink:hover {
	color: #fff;
	text-decoration: none;
	outline: none;
	transition: all 0.4s ease;
	margin: 0 5px;
}
a.socialLink:hover {
	color: #ececec; 
	text-decoration: underline;
	outline: none;
}

/* button style link */
a.button:link, a.button:active, a.button:visited, a.button:hover {
	position: relative;
	display: inline-block;
	padding: 2% 4%;
	margin: 2% 2% 2% 0;
	color: #555;
	background: none;
	border: 1px solid #ccc;
	text-decoration: none;
	font-size: 1.0em;
	font-weight: 500;
	-webkit-transition: all 0.4s ease;  
	-moz-transition: all 0.4s ease;  
	-o-transition: all 0.4s ease;  
	-ms-transition: all 0.4s ease;  
	transition: all 0.4s ease;
	border-radius: 0.1em;	
	text-transform: uppercase;
}
a.button:hover {
	color: #555;
	/*background: #3b3d40;*/
	padding: 2% 4%;
	 box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

/* jquery shake effects */	
.ui-effects-wrapper {
	display:inline;
}

/* back to top floating button */
.back-to-top {
    position: fixed;
    display: inline-block;
    bottom: 0;
    right: 50%;
    text-decoration: none;
    color: #000000;
    background: rgba(131,213,251,0.50);
    font-size: 12px;
    padding: 10px 15px 10px 15px;
    display: none;
	z-index: 100;
	width: 80px;
	text-align: center;
	margin-right: -40px;
}
.back-to-top:hover {    
	bottom: 0;
    background: rgba(135,135,135,0.50);
}

#message_post {
	position: relative;
	display: inline-block;
	padding: 10px 0 10px 0;
	display: none;
	text-align: center;
	background: rgba(255,255,255,0.5);
	color: #83D5FB;
	z-index: 20;
	font-size: 1.1em;
}
.error {
	color: #ff0000;
}
.success {
	color: #576B12;
}
img.loading-icon {
	/*float: left;*/
}

/* fancy checkbox styles */
input[type=checkbox].checkBox:hover {
	cursor: pointer;
}
input[type=checkbox].checkBox:before { 
	content:""; 
	position: relative;
	display: inline-block; 
	float: left;
	margin: -2px 0 0 0;
	width: 17px; 
	height: 17px; 
	background: url("images/checkbox-images/checkbox.jpg");
	background-repeat: no-repeat;
	background-size: 100%;
}
input[type=checkbox].checkBox:checked:before { 
	background: url("images/checkbox-images/checkbox-checked.jpg");
	background-repeat: no-repeat;
	background-size: 100%;	
}

* { box-sizing: border-box; }

/* clear both */
.clear {
	clear:both
}
/* end of site css */