/** Import CSS **/

@import url("reset.css");
@import url("buttons.css");
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i');
@import url("https://fonts.googleapis.com/css?family=Galdeano");

/** Global Styles **/

*, *:after, *:before
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

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

body
{
	font-family: "Source Sans Pro", Arial, Verdana, Helvetica, sans-serif;
	font-size: 17px;
	color: #444;
	padding: 0 0 20px 0;
	background: #8cc540;
	line-height: 24px;
}

::selection { background: #222; color: #FFF; }
::-moz-selection { background: #222; color: #FFF; }

a { color: #3ab34a; text-decoration: underline; }
a:hover { color: #3ab34a; text-decoration: none; }

strong { font-weight: 700; }

/** Layout Styles **/

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

	.bluebg
	{
		background: #FFF;
	}
	
	.lightbluebg
	{
		background: #3ab34a;
	}
	
	/** Header **/

	.container #headercont
	{
		width: 80%;
		max-width: 980px;
		padding: 25px 0;
		margin: 0 auto;
	}
	
		.container #headercont #headerlogo
		{
			float: left;
			width: 40%;
			padding: 5px 0 0 0;
			text-align: left;
		}
			
			.container #headercont #headerlogo a
			{
				display: block;
				width: 100%;
				max-width: 400px;
			}
			
    			.container #headercont #headerlogo a img
    			{
    				display: block;
    				width: 100%;
    			}
				
		.container #headercont #headerright
		{
			float: left;
			width: 60%;
			padding-top: 34px;
			text-align: right;
		}
		
			.container #headercont #headerright p
			{
				font-weight: 400;
				font-size: 26px;
				line-height: 26px;
				color: #333;
				margin: 0 0 2px 0;
				letter-spacing: -0.3px;
				font-family: "Galdeano", Arial, Helvetica, sans-serif;
			}
			
			.container #headercont #headerright p.toptelno
			{
				font-size: 30px;
				line-height: 30px;
			}
			
				.container #headercont #headerright p span
				{
					color: #8cc540;
				}
		
	/** Menu **/
				
	.container #menucont
	{
		width: 80%;
		max-width: 980px;
		padding: 6px 0;
		margin: 0 auto;
	}
	
		.container #menucont .menu select
		{
			display: none;
			font-family: inherit;
		}
		
			@media (max-width: 768px)
			{
				.container #menucont .menu ul
				{
					display: none;
				}
				
				.container #menucont .menu select
				{
					display: inline-block;
					width: 100%;
					text-transform: none;
					font-family: inherit;
				}
			}
			
		.container #menucont ul
		{
			float: left;
		}
	
			.container #menucont ul li
			{
				display: inline;
			}
			
				.container #menucont ul li a
				{
					float: left;
					line-height: 40px;
					padding: 0 15px;
					font-weight: 400;
					font-size: 18px;
					text-decoration: none;
					color: #FFF;
					font-family: "Galdeano", Arial, Helvetica, sans-serif;
					
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
				}
				
					.container #menucont ul li a:hover
					{
						color: #FFF;
					}
					
					.container #menucont ul li.active a
					{
						color: #FFF;
						background: #8cc540;
					}
					
	/** Gallery **/
	
	.bggallery
	{
	    background: #222;
	}
	
    #gallerycont
    {
        
    }
    
    	.flickity-viewport
    	{
    		transition: height 0.2s;
    	}
    	
    	.carousel-cell
    	{
    		position: relative;
    		width: 100%;
    	}
    	
    	.slide1
    	{
    		background: url("../images/gallery-1.jpg") 50% 50%;
    		background-size: cover;
    	}
    	
    	.slide2
    	{
    		background: url("../images/gallery-2.jpg") 50% 50%;
    		background-size: cover;
    	}
    	
    	.slide3
    	{
    		background: url("../images/gallery-3.jpg") 50% 50%;
    		background-size: cover;
    	}
    	
    	.slide4
    	{
    		background: url("../images/gallery-4.jpg") 50% 50%;
    		background-size: cover;
    	}
    	
		#gallerycont .carousel-cell
		{
			height: 360px;
		}
	
	/** Main **/
						
	.container #maincont
	{
		width: 80%;
		max-width: 980px;
		margin: 0 auto;
		padding: 10px 0;
		background: url("../images/bg-maincont.png") repeat-y 72% 0;
	}
	
		.container #maincont p { margin: 0 0 20px 0; 
		}
		.container #maincont h1, .container #maincont h2, .container #maincont h3, .container #maincont h4, .container #maincont h5 { margin: 0 0 20px 0; color: #222; font-weight: normal; letter-spacing: -0.3px; font-family: "Galdeano", Arial, Helvetica, sans-serif; }
		.container #maincont h1 { font-size: 30px; line-height: 30px; }
		.container #maincont h2 { font-size: 28px; line-height: 28px; }
		.container #maincont h3 { font-size: 26px; line-height: 26px; }
		.container #maincont h4 { font-size: 22px; line-height: 22px; }
		.container #maincont h5 { font-size: 20px; line-height: 20px; }
		
		.container #maincont ul { margin: 0 0 20px 35px; list-style-type: square; }
		.container #maincont ul li { padding: 0 0 0 2px; }
		.container #maincont ol { margin: 0 0 20px 35px; list-style-type: decimal; }
		.container #maincont ol li { padding: 0 0 0 2px; }
		
		.container #maincont hr { clear: both; border: 0; height: 0; margin: 0 0 20px 0; border-top: 1px dashed #CCC; }
		
		.container #maincont blockquote { background: #151515; border-left: 3px solid #E2761C; padding: 15px; margin: 0 0 20px 0; }
	
			.container #maincont #mainleft
			{
				float: left;
				width: 72%;
				padding: 20px 30px 0 0;
				
				min-height: 400px;
				height: auto !important;
				height: 400px;
			}
			
				.container #maincont #mainleft img.imgleft
				{
					float: left;
					width: 34%;
					margin: 0 20px 20px 0;
				}
				
				.container #maincont #mainleft img.imgright
				{
					float: right;
					width: 34%;
					margin: 0 0 20px 20px;
				}
				
				.container #maincont .twocolcont
				{
					width: 100%;
					margin: 0 0 15px 0;
				}
				
					.container #maincont .twocol
					{
						float: left;
						width: 50%;
					}
					
						.container #maincont .twocol ul
						{
							margin-bottom: 0;
						}
						
				.container #maincont .contdetails
				{
					width: 100%;
					margin: 0 0 15px 0;
				}
				
					.container #maincont .contdetails .contcol
					{
						float: left;
						width: 50%;
					}
			
			.container #maincont #mainright
			{
				float: left;
				width: 28%;
				padding: 20px 0 0 30px;
			}
			
				.container #maincont #mainright ul.otherlinks
				{
					margin: 0 0 15px 0;
					padding: 0;
					border-top: 1px dashed #CCC;
				}
				
					.container #maincont #mainright ul.otherlinks li
					{
						list-style-type: none;
					}
					
						.container #maincont #mainright ul.otherlinks li a
						{
							float: left;
							width: 90%;
							padding: 10px 0 10px 10%;
							border-bottom: 1px dashed #CCC;
							line-height: 16px;
							font-size: 12px;
							background: url("../images/ul-icon.png") no-repeat 0 10px;
						}
			
				.container #maincont #mainright .sidesection
				{
					margin: 0 0 15px 0;
					padding: 0;
				}
				
					.container #maincont #mainright .sidesection h3
					{
						margin: 0 0 10px 0;
						font-size: 24px;
					}
				
					.container #maincont #mainright .sidesection .sidetop
					{
						margin: 0 0 5px 0;
					}
					
						.container #maincont #mainright .sidesection .sidetop a img
						{
							width: 100%;
						}
		
					.container #maincont #mainright .sidesection .sidebottom p
					{
						margin: 0 0 5px 0;
						line-height: 17px;
						font-size: 14px;
					}

				.container #maincont #mainright a.hoverlink
				{
					float: left;
					position: relative;
					width: 100%;
					margin: 0 0 10px 0;
				}
				
					.container #maincont #mainright a.hoverlink img
					{
						display: block;
						width: 100%;
					}
					
						.container #maincont #mainright .overlay
						{
							-moz-transition: opacity 120ms ease-in-out 0s;
							-webkit-transition: opacity 120ms ease-in-out 0s;
							-o-transition: opacity 120ms ease-in-out 0s;

							height: 100%;
							left: 0;
							opacity: 0;
							position: absolute;
							top: 0;
							width: 100%;
							z-index: 40;
						}
						
							.container #maincont #mainright .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;
							}
							
								.container #maincont #mainright .overlay:hover
								{
									opacity: 1;
								}
								
				.infocont
				{
					float: left;
					width: 100%;
					margin: 0 0 20px 0;
				}
				
					.infocont .infoimg
					{
						width: 200px;
						float: left;
						padding-right: 20px;
					}
					
						.infocont .infoimg img
						{
							display: block;
							width: 100%;
							max-width: 200px;
						}
					
					.infocont .infodeets
					{
						float: none;
						width: auto;
						overflow: hidden;
					}
	
	/** Footer **/
			
	.container #footercont
	{
		width: 80%;
		max-width: 980px;
		margin: 0 auto;
		font-size: 16px;
		text-align: center;
		padding: 30px 0 15px 0;
		line-height: 24px;
		border-top: 1px dashed #CCC;
		color: #FFF;
		color: rgba(255,255,255,0.7);
	}

    	.container #footercont a
    	{
    		color: #FFF;
    		text-decoration: underline;
    	}

/** Responsive Magic **/

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

	.container #headercont #headerlogo, .container #headercont #headerright
	{
		float: none;
		width: 100%;
		text-align: center;
	}
	
		.container #headercont #headerlogo a
		{
			margin: 0 auto;
		}
		
	.container #maincont
	{
		background: none;
	}
	
	.container #maincont #mainleft, .container #maincont #mainright
	{
		float: none;
		width: 100%;
		text-align: center;
		padding: 20px 0 0 0;
	}
	
		.container #maincont ul { margin: 0 0 15px 0; list-style-type: none; }
		.container #maincont ul li { padding: 0; }
		.container #maincont ol { margin: 0 0 15px 0; list-style-type: none; }
		.container #maincont ol li { padding: 0; }
	
		.container #maincont #mainleft img.imgleft
		{
			float: none;
			width: 70%;
			margin: 0 0 15px 0;
		}
		
		.container #maincont .twocol
		{
			float: none;
			width: 100%;
		}
		
		.container #maincont .contdetails .contcol
		{
			float: none;
			width: 100%;
		}
	
		.container #maincont #mainright ul.otherlinks
		{
			border: 0;
		}
	
			.container #maincont #mainright ul.otherlinks li a
			{
				border: 0;
				padding: 5px 0;
				width: 100%;
				background-image: none;
			}
			
	.infocont
	{
		
	}
	
		.infocont .infoimg
		{
			width: 100%;
			float: left;
			padding-right: 0;
		}
		
			.infocont .infoimg img
			{
				display: inline-block;
				width: 100%;
				max-width: 200px;
				margin: 0 0 15px 0;
			}
		
		.infocont .infodeets
		{
			float: left;
			width: 100%;
		}
	
	.container #maincont #mainright .sidecont
	{
		border-top: 1px dashed #CCC;
		padding: 20px 0 10px 0;
	}
	
		.container #maincont #mainright .sidesection h3
		{
			margin: 0 0 10px 0;
			font-size: 20px;
		}
	
		.container #maincont #mainright .sidesection
		{
			float: left;
			width: 31%;
			padding: 0 1%;
			margin: 0 0 15px 0;
		}
		
}

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

	.container #headercont #headerlogo h1
	{
		font-size: 30px;
	}
	
	.container #headercont #headerright p
	{
		font-size: 22px;
	}

	.container #maincont #mainleft img.imgleft
	{
		width: 90%;
	}

	.container #maincont #mainright .sidecont
	{
		border-top: 1px dashed #CCC;
	}
	
		.container #maincont #mainright .sidesection h3
		{
			margin: 0 0 10px 0;
			font-size: 24px;
		}

		.container #maincont #mainright .sidesection
		{
			clear: both;
			float: left;
			width: 100%;
			padding: 0%;
			margin: 0 0 15px 0;
		}
	
}

/* ==================================================
   Custom Gallery
================================================== */

#maincont #mainleft #imggallery *,
#maincont #mainleft #imggallery *:after,
#maincont #mainleft #imggallery *:before
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#maincont #mainleft #imggallery
{
	float: left;
	width: 100%;
	
	margin: 0 -10px 30px -10px;
	
	width: -moz-calc(100% + 20px);
	width: -webkit-calc(100% + 20px);
	width: -o-calc(100% + 20px);
	width: calc(100% + 20px);
}

	#maincont #mainleft #imggallery ul
	{
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	
		#maincont #mainleft #imggallery ul li
		{
			float: left;
			width: 25%;
			margin: 0;
			padding: 10px;
		}
		
			#maincont #mainleft #imggallery ul li a
			{
				float: left;
				background: #333;
			}
			
				#maincont #mainleft #imggallery ul li a img
				{
					display: block;
					width: 100%;
					max-width: 400px;
				}
				
				#maincont #mainleft #imggallery ul li a:hover img
				{
					opacity: 0.7;
				}

@media only screen and (max-width: 768px)
{
	
	#maincont #mainleft #imggallery ul li
	{
		width: 33.33%;
	}

}

@media only screen and (max-width: 480px)
{		
	
	#maincont #mainleft #imggallery ul li
	{
		width: 50%;
	}
	
}