/** Import external CSS **/

@import url("reset.css");
@import url("miscstyles.css");
@import url("buttons.css");
@import url("fancy-box.css");
@import url("https://fonts.googleapis.com/css?family=Oxygen");
@import url("https://fonts.googleapis.com/css?family=Arimo");

/** Global Styles **/

#map {
	height: 420px;
	/* The height is 400 pixels */
	width: 100%;
	/* The width is the width of the web page */
}

html
{
	height: 100%;
	overflow: auto;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body
{
	background: #EEE url("../images/bg-gallerycont.png") repeat;
	color: #444;
	font-family: "Oxygen", Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
}

a
{
	color: #4891dc;
	text-decoration: none;
	
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

	a:hover
	{
		color: #333;
	}
	
.displayshow
{
	display: none;
}

::selection { background: #999; color: #FFF; }
::-moz-selection { background: #999; color: #FFF; }
	
/** Layout Styles **/

.container
{
	width: 100%;
	min-width: 280px;
	
}

.fullwidthblack
{
	width: 100%;
	background: url("../images/bg-headercont.png") repeat;
}

.fullwidthblue
{
	width: 100%;
	background: #4891dc url("../images/bg-menu.png") repeat-x;
}

/** Header **/

.container #headercont
{
	width: 80%;
	max-width: 980px;
	padding: 10px 0;
	margin: 0 auto;
	text-shadow: 1px 1px 1px #000;
}

	#headercont #header
	{
		width: 100%;
	}
	
		#headercont #header a
		{
			color: #FFF;
		}
		
			#headercont #header a:hover
			{
				color: #4891dc;
			}
	
		#headercont #header #logocont
		{
			float: left;
			width: 50%;
			padding: 34px 0;
		}
		
			#headercont #header #logocont h1, #headercont #header #logocont h3
			{
				margin: 0;
				font-weight: 400;
				color: #FFF;
				font-size: 30px;
				line-height: 30px;
				font-family: "Arimo", Arial, Helvetica, sans-serif;
			}
			
				#headercont #header #logocont h3
				{
					color: #CCC;
					text-transform: none;
					font-size: 22px;
				}
		
		#headercont #header #headerright
		{
			float: left;
			width: 50%;
			padding: 42px 0 0 0;
			text-align: right;
		}
		
			#headercont #header #headerright p
			{
				font-size: 21px;
				margin: 0 0 6px 0;
				color: #4891dc;
				font-family: "Arimo", Arial, Helvetica, sans-serif;
			}
			
				#headercont #header #headerright p span
				{
					color: #FFF;
				}
				
/** Menu **/

#menucont
{
	width: 100%;
	z-index: 1000;
	background: #4891dc url("../images/bg-menu.png") repeat-x;
}

	#menucont .menu
	{
		width: 80%;
		max-width: 980px;
		margin: 0 auto;
		height: 44px;
		text-transform: uppercase;
	}
	
	.sticky
	{
		width: 100%;
		height: 44px;
	}
	
		#menucont .menu select
		{
			display: none;
			font-family: inherit;
		}
		
			@media (max-width: 879px)
			{
				#menucont .menu ul
				{
					display: none;
				}
				
				#menucont .menu select
				{
					display: inline-block;
					width: 100%;
					text-transform: none;
					font-family: inherit;
					margin: 13px 0 0 0;
				}
			}
			
		#menucont .menu ul li
		{
			display: inline;
		}
		
			#menucont .menu ul li a
			{
				float: left;
				line-height: 44px;
				padding: 0 0.8%;
				color: #FFF;
				font-weight: 400;
				font-size: 12px;
				text-shadow: 1px 1px 1px #386593;
			}
			
				#menucont .menu ul li a:hover
				{
					background: #4891dc url("../images/bg-menu.png") repeat-x center;
				}
			
				#menucont .menu ul li.active a
				{
					background: #4891dc url("../images/bg-menu.png") repeat-x bottom;
				}
				
/** Gallery **/
	
#gallerycont
{
	width: 100%;
	background: #FFF;
	padding: 20px 0;
}

	#gallerycont #gallery
	{
		width: 80%;
		max-width: 980px;
		margin: 0 auto;
	}
	
		#gallerycont #gallery #galleryleft
		{
			float: left;
			width: 70%;
			
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			border-radius: 6px;
		}
		
			#gallerycont #gallery #galleryleft img
			{
				-webkit-border-radius: 6px;
				-moz-border-radius: 6px;
				border-radius: 6px;
			}
		
		#gallerycont #gallery #galleryright
		{
			position: relative;
			float: right;
			width: 27%;
			margin: 0 0 0 3%;
			
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			border-radius: 6px;
		}

			#gallerycont #gallery #galleryright img
			{
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
			}
					
#maincont
{
	width: 100%;
	padding: 20px 0;
	text-shadow: 1px 1px 1px #FFF;
}

	#maincont #main
	{
		width: 80%;
		max-width: 980px;
		margin: 0 auto;
		line-height: 22px;
		background: url("../images/bg-maincont.png") repeat-y 71% 0%;
	}
	
		#maincont #main p { margin: 0 0 15px 0; }
		
		#maincont #main p.quote
		{
			font-size: 15px;
			font-weight: 600;
			color: #555;
		}
		
		#maincont #main h1, #maincont #main h2, #maincont #main h3, #maincont #main h4, #maincont #main h5 { margin: 0 0 20px 0; font-weight: 400; color: #333; font-family: "Arimo", Arial, Helvetica, sans-serif; }
		#maincont #main #mainright h1, #maincont #main #mainright h2, #maincont #main #mainright h3, #maincont #main #mainright h4, #maincont #main #mainright h5 { color: #444; }
			
		#maincont #main h1 { font-size: 25px; line-height: 25px; }
		#maincont #main h2 { font-size: 23px; line-height: 23px; }
		#maincont #main h3 { font-size: 22px; line-height: 22px; }
		#maincont #main h4 { font-size: 21px; line-height: 21px; }
		#maincont #main h5 { font-size: 20px; line-height: 20px; }
		
		#maincont #main ul { margin: 0 0 15px 25px; list-style-type: square; }
		#maincont #main ul li { padding: 0 0 0 2px; }
		#maincont #main ol { margin: 0 0 15px 35px; list-style-type: decimal; }
		#maincont #main ol li { padding: 0 0 0 2px; }
		
		#maincont #main #mainright ul { margin: 0 0 15px 0; list-style-type: none; }
		#maincont #main #mainright ul li { padding: 0; }
		#maincont #main #mainright ol { margin: 0 0 15px 0; list-style-type: none; }
		#maincont #main #mainright ol li { padding: 0; }
		
		#maincont #main hr { clear: both; border: 0; height: 0; margin: 0 0 20px 0; border-bottom: 1px dashed #BBB; }
	
		#maincont #main #mainleft
		{
			float: left;
			width: 68%;
			margin: 0;
			padding: 10px 5% 10px 0;
			
			min-height: 350px;
			height: auto !important;
			height: 350px;
		}
		
			#maincont #main #mainleft #halfcolcont
			{
				clear: both;
				width: 100%;
			}
			
				#maincont #main #mainleft #halfcolcont .halfcol
				{
					float: left;
					width: 50%;
				}
		
			#maincont #main #mainleft .gmap3
			{
				width: 100%;
				height: 300px;
				margin: 0 0 15px 0;
				font-size: 12px;
				line-height: 16px;
				
				-webkit-border-radius: 6px;
				-moz-border-radius: 6px;
				border-radius: 6px;
			}
			
			#maincont #main #mainleft .gmap4
			{
				width: 100%;
				height: 350px;
				margin: 0 0 15px 0;
				font-size: 12px;
				line-height: 16px;
				
				-webkit-border-radius: 6px;
				-moz-border-radius: 6px;
				border-radius: 6px;
			}

				#maincont #main #mainleft a.hoverlink
				{
					float: right;
					position: relative;
					width: 40%;
					margin: 0 0 15px 15px;
					
					-webkit-border-radius: 4px;
					-moz-border-radius: 4px;
					border-radius: 4px;
					
					-moz-box-shadow: 0 0 6px #FFF;
					-webkit-box-shadow: 0 0 6px #FFF;
					box-shadow: 0px 0px 6px #FFF;
				}
				
					#maincont #main #mainleft a.hoverlink img
					{
						display: block;
						width: 100%;
						height: auto;
						
						-webkit-border-radius: 4px;
						-moz-border-radius: 4px;
						border-radius: 4px;
					}
					
						#maincont #main #mainleft .overlay
						{
							
							height: 100%;
							left: 0;
							opacity: 0;
							position: absolute;
							top: 0;
							width: 100%;
							z-index: 40;
							
							-webkit-transition: all 0.2s linear;
							-moz-transition: all 0.2s linear;
							-o-transition: all 0.2s linear;
							transition: all 0.2s linear;
													
							-webkit-border-radius: 4px;
							-moz-border-radius: 4px;
							border-radius: 4px;
						}
						
							#maincont #main #mainleft .overlay.link
							{
								background: url("../images/overlay_link.png") no-repeat scroll center center, url("../images/overlay_bg.png") repeat scroll center center transparent;
								display: inline-block;
							}
							
								#maincont #main #mainleft .overlay:hover
								{
									opacity: 1;
								}
								
				#maincont #main #mainleft ul.threegallery
				{
					margin: 0 0 15px 0;
				}
				
					#maincont #main #mainleft ul.threegallery li
					{
						display: block;
						list-style-type: none;
					}
					
						#maincont #main #mainleft ul.threegallery li a
						{
							width: 31%;
							float: left;
							margin: 0 1%;
						}
						
				/** Responsive YouTube **/
				
				#maincont #main #mainleft .youtubevid
				{
					float: right;
					width: 50%;
					margin: 0 0 20px 20px;
				}
				
				#maincont #main #mainleft .embed-container
				{
					position: relative;
					padding-bottom: 56.25%; /* 16/9 ratio */
					padding-top: 30px; /* IE6 workaround*/
					height: 0;
					overflow: hidden;
				}
				
				#maincont #main #mainleft .embed-container iframe, #maincont #main #mainleft .embed-container object, #maincont #main #mainleft .embed-container embed
				{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

		#maincont #main #mainright
		{
			float: left;
			width: 27%;
			padding: 10px 0;
			color: #333;
			text-align: center;
		}
		
			#maincont #main #mainright #enqstartform
			{
				margin: 0 0 15px 0;
			}
			
				#maincont #main #mainright ul#telnoul
				{
					font-size: 20px;
					font-weight: 400;
					color: #555;
					letter-spacing: 0.5px;
				}
			
				#maincont #main #mainright #enqstartform form ul
				{
					list-style-type: none;
					margin: 0;
				}
				
					#maincont #main #mainright #enqstartform form ul li input
					{
						-moz-border-bottom-colors: none;
						-moz-border-left-colors: none;
						-moz-border-right-colors: none;
						-moz-border-top-colors: none;
						-moz-transition: color 0.15s ease-in-out 0s;
						background: none repeat scroll 0 0 #F8F8F8;
						border-color: #D3D3D3 #FFFFFF #FFFFFF #DDDDDD;
						border-image: none;
						border-radius: 5px 5px 5px 5px;
						border-style: solid;
						border-width: 1px;
						color: #555;
						padding: 8px 2%;
						margin: 0 0 10px 0;
						width: 95%;
						font-family: inherit;
						font-size: inherit;
						text-align: center;
						
						-webkit-border-radius: 5px;
						-moz-border-radius: 5px;
						border-radius: 5px;
					}
					
						#maincont #main #mainright #enqstartform form p
						{
							text-align: center;
							margin: 0;
						}
						
						#maincont #main #mainright #enqstartform form ul li input.button
						{
							float: none;
							
						}

				#maincont #main #mainright #socmedia ul
				{
					margin-bottom: 15px;
				}
			
					#maincont #main #mainright #socmedia ul li
					{
						display: inline;
					}
					
						#maincont #main #mainright #socmedia ul li a
						{
							display: inline-block;
							width: 32px;
							height: 32px;
							text-indent: -9999px;
							background: url("../images/icon-sharethis.png") no-repeat;
							
							-webkit-border-radius: 4px;
							-moz-border-radius: 4px;
							border-radius: 4px;
						}
						
#backtopcont
{
	width: 80%;
	max-width: 980px;
	margin: 0 auto;
	padding: 0 10px 15px 10px;
	text-shadow: 1px 1px 1px #FFF;
	text-transform: uppercase;
	font-size: 11px;
	line-height: 22px;
}

	#backtopcont a#backtotop
	{
		background: url("../images/backtotop.png") no-repeat left center;
		padding: 0 0 0 20px;
		color: #999;
	}
	
	#backtopcont a:hover#backtotop
	{
		color: #222;
	}
						
#footercont
{
	width: 80%;
	max-width: 980px;
	margin: 0 auto;
	padding: 20px 0;
	font-size: 12px;
	line-height: 16px;
	color: #777;
	text-align: center;
	letter-spacing: 0.3px;
	border-top: 1px dashed #AAA;
	text-shadow: 1px 1px 1px #FFF;
}

	#footercont p
	{
		clear: both;
		margin: 0 0 5px 0;
	}


/** Responsive Magic **/

@media screen and (max-width: 940px)
{
	#menucont .menu ul li a
	{
		font-size: 12px;
		padding: 0 0.6%;
	}
}

@media screen and (max-width: 879px)
{

	.container #headercont
	{
		padding: 30px 0;
	}

	#headercont #header #logocont
	{
		float: none;
		width: 100%;
		padding: 0 0 20px 0;
		text-align: center;
	}
	
		#headercont #header #logocont h1, #headercont #header #logocont h3
		{
			font-size: 26px;
			line-height: 26px;
		}
		
			#headercont #header #logocont h3
			{
				font-size: 18px;
			}
	
	#headercont #header #headerright
	{
		float: none;
		width: 100%;
		padding: 0;
		text-align: center;
	}
	
		#headercont #header #headerright p
		{
			font-size: 18px;
		}
	
	#gallerycont #gallery #galleryleft
	{
		float: none;
		width: 100%;
	}
	
	#gallerycont #gallery #galleryright
	{
		display: none;
	}
	
	#maincont #main
	{
		background: none;
	}
	
	#maincont #main ul { margin: 0 0 15px 0; list-style-type: none; }
	#maincont #main ul li { padding: 0; }
	#maincont #main ol { margin: 0 0 15px 0; list-style-type: none; }
	#maincont #main ol li { padding: 0; }
	
		#maincont #main #mainleft
		{
			float: none;
			width: 100%;
			text-align: center;
		}
		
			#maincont #main #mainleft a.hoverlink
			{
				display: block;
				float: none;
				width: 60%;
				margin: 0 auto 15px auto;
				max-width: 350px;
			}
		
		#maincont #main #mainright
		{
			clear: both;
			float: none;
			width: 100%;
			text-align: center;
			padding: 15px 0 0 0;
			border-top: 1px dashed #BBB;
		}
		
	#backtopcont
	{
		text-align: center;
	}
		
	#footercont
	{
		font-size: 12px;
		line-height: 16px;
	}
	
}

@media screen and (max-width: 768px)
{
	#maincont #main #mainleft .youtubevid
	{
		float: right;
		width: 100%;
		margin: 0 0 20px 0;
	}
}

@media screen and (max-width: 480px)
{	
	
	#gallerycont
	{
		display: none;
	}
	
	#maincont #main #mainleft a.hoverlink
	{
		float: none;
		width: 80%;
		margin: 0 10% 15px 10%;
	}
	
	#maincont #main #mainleft #halfcolcont .halfcol
	{
		float: none;
		width: 100%;
	}
	
}