@import url(http://fonts.googleapis.com/css?family=Pompiere);
@import url(http://fonts.googleapis.com/css?family=Rancho);
@import url(http://fonts.googleapis.com/css?family=Droid+Serif|Ubuntu);
@import url(http://fonts.googleapis.com/css?family=Oswald);

/* #CC6733		Menu Colour DEC807 */
/* #DEC807		Menu Hover */
/* 222,200,7 	Title Colour */
/* #000000		Button Colour */
	
	/* typography */
	body{
		background: #FFF url('images/bg03.jpg');
		color:#666;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		font-size:1em;
		line-height:1.4em; 
		font-weight:normal;
	}
	h1 {
		font-size: 1.5em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		letter-spacing: 0.3em;
		color: #CC6733;
		text-shadow: 2px 2px 1px rgba(124,124,124,0.6);
		line-height:1.5em;
		margin:.45em 0;
		padding:0;
	} 
	h2 {
		font-size: 1.4em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		letter-spacing: 0.2em;
		color: rgb(222,200,7);
		text-shadow: 2px 2px 1px rgba(124,124,124,0.6);
		line-height:1.5em;
		margin:.45em 0;
		padding:0;
	} 
	h3 {				/* Right Side Box */
		font-size: 1.2em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		color: #CC6733;
		/*text-shadow: 1px 1px 1px rgb(254,254,254);*/
		line-height:1.5em;
		margin:.45em 0;
		padding:0;
	} 
	h3  span{				/* Right Side Box */
		color: #FF0000;
	} 
	h4{
		font-size: 1.1em;
		color: #CC6733;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		line-height:1.5em;
		margin:.45em 0;
		padding:0;
	} 
	h5{
		font-size: 1em;
		color: #CC6733;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		line-height:1.5em;
		margin:.45em 0;
		padding:0;
	} 

	h6{
		display: inline-block;
		font-size: 1.2em;
	font-weight:normal;
		color: rgb(222,200,7);
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		text-shadow: 2px 2px 1px rgba(124,124,124,0.6);
		padding-right:10px;
		margin-top: -10px;
		margin-bottom: -10px;
	} 
	.title2 {
		font-size: 1.4em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		letter-spacing: 0.2em;
		color: #CC6733;
		text-shadow: 2px 2px 1px rgba(124,124,124,0.6);
		line-height:1.5em;
		margin:.45em 0;
		padding:0;
	} 
	.title2 span {
		font-size: 1.8em;
	} 
	.topsecret {
		font-size: 1.1em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		letter-spacing: 0.2em;
		color: #CC6733;		
		padding: 10px;
		border: 1px solid #CC6733;
		display: block;
		width: 500px;
	}
	/* links */
	a{color:#000; text-decoration:none;}
	a:visited{color:#000; text-decoration:none;}
	a:active{color:#000; text-decoration:none;}
	a:hover{color:#CC6733; text-decoration:none;}

	.error404{color:#000; text-decoration:none;}
	.error404 li a {color:#000; text-decoration:none;}
	.error404 li a:hover{color:#CC6733; text-decoration:none;}
	.error404 li li a {color:#000; text-decoration:none;}
	.error404 li li li a {color:#000; text-decoration:none;}

	.author {
		font-size: 1em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		display: inline-block;
		font-weight:normal;
	}
	.author a {
		font-size: 1em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		color: #829B1A !important;
		text-shadow: 2px 2px 1px rgba(124,124,124,0.6);
		line-height:1.5em;
		display: inline-block;
	}
	.author a:visited{
		font-size: 1em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		color: #829B1A !important;
		text-shadow: 2px 2px 1px rgba(124,124,124,0.6);
		line-height:1.5em;
		display: inline-block;
	}
	.author a:active {
		font-size: 1em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		color: #829B1A !important;
		text-shadow: 2px 2px 1px rgba(124,124,124,0.6);
		line-height:1.5em;
		display: inline-block;
	}
	.author a:hover {
		font-size: 1em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		color: #829B1A !important;
		text-shadow: 2px 2px 1px rgba(124,124,124,0.6);
		line-height:1.5em;
		display: inline-block;
	}

	*{	box-sizing:border-box;
		-moz-box-sizing:border-box;}

 
	/* meta lines */
	.meta-u{
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		color: rgba(69,54,37,0.6);
		font-size: 0.85em;
		font-style: italic;
		letter-spacing: 0.25em;
		border-bottom: 1px solid rgba(69,54,37,0.2);
		padding-bottom: 0.5em;
	}
	.meta-u span{
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		text-transform: capitalize;
		font-style: normal;
		color: #829B1A;
	}

	.meta-o{
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		color: rgba(69,54,37,0.6);
		font-size: 0.85em;
		font-style: italic;
		letter-spacing: 0.25em;
		border-top: 1px solid rgba(69,54,37,0.2);
		padding-top: 0.5em;
	}
	.meta-o span{
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		text-transform: capitalize;
		font-style: normal;
		color: #829B1A;
	}
	date{
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		color: rgba(69,54,37,0.6);
		font-size: 0.75em;
		font-style: italic;
		letter-spacing: 0.25em;
		border-top: 1px solid rgba(69,54,37,0.2);
		display: block;
		padding-top: 0.5em;
		margin-top: 2em;
	}
	date span{
		text-transform: capitalize;
		font-style: normal;
		color: rgba(69,54,37,0.8);
	}

	.filter-border {
		
	}
	.filter-margin-10px {
		margin: 10px;
	}
	.filter-padding-10px {
		padding: 10px;
	}
	.filter-padding-15px {
		padding: 10px;
		color: #FF0000;
		font-size: 1.25em;		
	}
	.filter-image-size-95pc {
		width: 95%;
	}
	.filter-image-size-85pc {
		width: 85%;
	}
	.filter-image-size-80pc {
		width: 80%;
	}
	.filter-image-size-75pc {
		width: 75%;
	}
	.filter-image-size-70pc {
		width: 70%;
	}
	.filter-image-size-30pc {
		width: 30%;
	}
	.filter-image-size-40pc {
		width: 40%;
	}
	.filter-image-margin-right-10px {
		margin-right: 10px;
	}
	
	.filter-image-shadow {
		-webkit-box-shadow: 10px 10px 10px 0 #666666;
		box-shadow: 10px 10px 10px 0 #666666;
	}
	.filter-border-5px-fb {
		border:	5px solid rgb(59,89,151);
	}
	.filter-border-5px-ta {
		border:	5px solid rgb(74,135,63);
	}
	.filter-corner-round-20px{
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;

	}
	#logo img{
		display: 			inline-block !important;
	}  
  
	/* structure */   
	.wrapper{
		width: 92%; 
		margin: 0 auto;
	}
	header{ 
		padding-left:	15px;
		/*background: 	#FFF;
		width: 			100%;
		z-index: 		999;
		overflow: 		hidden;
		top: 			0;
		left: 			0;
		position: 		fixed;
		height:			125px;*/
	}
    /*header img {
		padding-top:	10px;
		padding-left:	10px;
	}	*/
	#banner{ 
		float:left; 
		text-align:left;
	}
	
	#hero,
	#page-header{
		/*background:#f3f3f3;*/
		border-top:1px solid #e2e2e2;
		border-bottom:0px solid #e2e2e2;
		padding:20px 0;
}
	#hero h1{ 
		line-height:1.2em;
		margin-top:0px;
		margin-bottom:10px;}
	#right-side {
		padding: 0 !important;
	}
	.flexslider{
		display:none;
	}

	#content {  
		margin:40px 0;
	}

	aside { 
		margin:40px 0;
	}

	p{ margin:0 0 1.5em;
		text-align:justify;
	}


	/* RESPONSIVE IMAGES */
	img{
		max-width:100%;
		height:auto;
	}
	img.frame {
		background:#fff;
		padding:20px;
		border: 4px solid #CA3844;
	}
	.frame-square {
		background:#fff;
		padding:20px;
		border: 4px solid #CA3844;
	}
	.frame-round {
		width:100%;
		height:100%;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		border: 3px solid #DEC807;
		background-color:#FFF;
		padding:20px;
		color: #000;
	}

	/*MAIN MENU*/
	.menu-toggle{
		display:block;
		padding:10px;
		margin:20px 0 0;
		background:#666;
		color:#fff;
		cursor:pointer;
		text-transform:uppercase;
		font-size:20px;
	}
	.menu-toggle.toggled-on{
		background:#CC6733;
	}
	.srt-menu{
		display:none;
	}	
	.srt-menu.toggled-on{
		display:block;
		position:relative;
		z-index:10;
	}

	.srt-menu{
		clear:both;
		margin-bottom:60px;
		
	}
	.srt-menu li a {
		background:#dadada;
		display:block;
		margin:1px 0; 
		padding:10px;
		text-decoration:none;
	}
	.srt-menu li a:hover{
		background:#CC6733;
		color:#fff;
	}
	.srt-menu li li a {
		background:#e8e8e8;
		padding-left:40px;
	}
	.srt-menu li li li a {
		background:#efefef;
		padding-left:80px;
	}

	/*SECONDARY MENU*/
	#secondary-navigation{
		margin-bottom:60px;
	}
	#secondary-navigation ul{
		margin:0;
		padding:0;
	}
	#secondary-navigation ul li a{ 
		background:#E6E6E6;
		display:block;
		margin:5px 0; 
		padding:10px;
		text-decoration:none;
	}
	#secondary-navigation ul li a:hover,
	#secondary-navigation ul li.current a{
		background:#CC6733;
		color:#fff;
	}

	/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4,
	.grid_5,
	.grid_6,
	.grid_7,
	.grid_8,
	.grid_9,
	.grid_10,
	.grid_11,
	.grid_12 {
		margin-bottom:40px;
		/*positioning and padding*/
		position: relative;
		min-height: 1px;
		padding-left: 15px;
		padding-right: 15px;
	}

	footer{ 
		background:#333;
		color:#ccc;
	}

	a.buttonlink{ 
		width: 100%;
		background:#CC6733; 
		/*border-radius:7px; */
		color:#fff;
		display:block;
		text-align: center;
		float:left;
		font-size: 1.2em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		padding:30px 60px 30px 60px;
		text-decoration:none;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;		
	}
	a.buttonlink:hover{
		background:#000;
	}
	.greenelement{
		background:#CC6733;
		color:#fff;
	}
	.CC6733 {	/*Right Side Box*/
		background:	#CC6733;
	}
	.CC6733 p{	/*Right Side Box*/
		color:		#000;
	}
	.darkgreyelement{
		background:#333;
		color:#fff;
	}
	.stoneelement{
		background:#D6B56D;
		color:#fff;
	}
	.violetelement{
		background:#887dc2;
		color:#fff;
	}
    @-moz-document url-prefix() { a.red:before { margin-left: -20px; } }

	/* Contain floats*/ 
	.clearfix:before,
	.clearfix:after,
	.row:before,
	.row:after {
		content: " ";
		display: table;
	}
	.clearfix:after,
	.container:after,
	.row:after{
		clear: both;
	}


	/*
	LARGER MOBILE DEVICES
	This is for mobile devices with a bit larger screens.
	*/
	@media only screen and (min-width: 481px) {
		#banner{
			float:left;
			text-align:left;
			margin-bottom:-20px;/*this depends on the height of the logo*/
		}
		.menu-toggle{/*make menu float right, instead of sitting under the logo*/
			margin-top:10px; /*this depends on the height of the logo*/
			float:right;
		}
	} 

	/*
	TABLET & SMALLER LAPTOPS
	The average viewing window and preferred media query for those is 768px.
	But I think that some more breathing space is good:)
	*/
	@media only screen and (min-width: 920px) {
		.wrapper{
			max-width: 1200px; 
			margin: .75em auto;
		}
		#banner{ 
			float:left; 
			text-align:left;
			margin-bottom:0px;
		}
		header{
			padding:0;
		}
		#content {  
			float:left;
			width:65%;
		}
		#content.wide-content{
			float:none;
			width:100%;
		}
		.flexslider{
		display:block;
		/*demo 1 slider theme*/	
		margin: 0 0 60px; 
		background: #fff; 
		border: 4px solid #fff; 
		-webkit-border-radius: 4px; 
		-moz-border-radius: 4px; 
		-o-border-radius: 4px; 
		border-radius: 4px; 
		box-shadow: 0 1px 4px rgba(0,0,0,.2); 
		-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
		-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
		-o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
		}
		aside { 
			float:right;
			width:30%;
		}
		/*** MAIN MENU - ESSENTIAL STYLES ***/
		.menu-toggle{display:none;}
		#menu-main-navigation{display:block;}
		.srt-menu, .srt-menu * {
			margin:			0;
			padding:		0;
			list-style:		none;
		}
		.srt-menu ul {
			position:		absolute;
			display:none;
			width:			12em; /* left offset of submenus need to match (see below) */
		}
		.srt-menu ul li {
			width:			100%;
		}
		.srt-menu li:hover {
			visibility:		inherit; /* fixes IE7 'sticky bug' */
		}
		.srt-menu li {
			float:			left;
			position:		relative;
			margin-left:1px;
		}
		.srt-menu li li {
			margin-left:0px;
		}
		.srt-menu a {
			display:		block;
			position:		relative;
		}
		.srt-menu li:hover ul,
		.srt-menu li.sfHover ul {
			display:block;
			left:			0;
			top:			45px; /* match top ul list item height */
			z-index:		99;
			-webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
			box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
		}
		ul.srt-menu li:hover li ul,
		ul.srt-menu li.sfHover li ul {
			top:			-999em;
		}
		ul.srt-menu li li:hover ul,
		ul.srt-menu li li.sfHover ul {
			left:			12em; /* match ul width */
			top:			0;
		}
		ul.srt-menu li li:hover li ul,
		ul.srt-menu li li.sfHover li ul {
			top:			-999em;
		}
		ul.srt-menu li li li:hover ul,
		ul.srt-menu li li li.sfHover ul {
			left:			10em; /* match ul width */
			top:			0;
		}
		/*** DEMO1 SKIN ***/
		#topnav, .srt-menu {
			float:		right;
			/*margin: 	.35em 0 0 0;*/
			margin-top: -50px !important;
		}
		.srt-menu a {
			text-decoration:none;
		}
		.srt-menu li a {
			background:#fff;
			margin:0; 
			padding:10px 20px;
			height:45px;
		}
		.srt-menu a, .srt-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
			color:			#CC6733;	
		}
		.srt-menu li li a {
				border-top:		1px solid rgba(255,255,255,.2);
				background:		#333; /*fallback for old IE*/
				background:rgba(0,0,0,.6);
				color:	#fff;
				padding-left:20px;
				height:auto;
		}
		.srt-menu li li a:visited{color:#fff;}
		.srt-menu li li li a,
		.srt-menu li.current * li a{
			padding-left:20px;
			background:rgba(0,0,0,.6);
		}

		.srt-menu li:hover > a,
		.srt-menu li.current a{ 
			color:#fff;
			background:#CC6733;
		}
		.srt-menu li li:hover > a{
			color:#fff;
			background:#CC6733;
		}
		 .row{
			 margin-left: -15px;
			 margin-right: -15px;
		}
		.grid_1 { width: 8.33333333%; }
		.grid_2 { width: 16.66666667%; }
		.grid_3 { width: 25%; }
		.grid_4 { width: 33.33333333%; }
		.grid_5 { width: 41.66666667%; }
		.grid_6 { width: 50%; }
		.grid_7 { width: 58.33333333%; }
		.grid_8 { width: 66.66666667%; }
		.grid_9 { width: 75%; }
		.grid_10 { width: 83.33333333%; }
		.grid_11 { width: 91.66666667%; }
		.grid_12 { width: 100%; }
		.grid_1,
		.grid_2,
		.grid_3,
		.grid_4,
		.grid_5,
		.grid_6,
		.grid_7,
		.grid_8,
		.grid_9,
		.grid_10,
		.grid_11,
		.grid_12 {
			float: left;
			display: block;
		}
		.rightfloat{float:right;}
		.leftfloat{float:left;}
		#hero [class*="grid_"] { margin-bottom:-20px;}
	}

	/*
	DESKTOP
	This is the average viewing window. So Desktops, Laptops, and
	in general anyone not viewing on a mobile device. Here's where
	you can add resource intensive styles.
	*/
	@media only screen and (min-width: 1030px) {

	} 

	/*
	LARGE VIEWING SIZE
	This is for the larger monitors and possibly full screen viewers.
	*/
	@media only screen and (min-width: 1240px) {

	} 

	/*
	RETINA (2x RESOLUTION DEVICES)
	This applies to the retina iPhone (4s) and iPad (2,3) along with
	other displays with a 2x resolution.
	*/
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		   only screen and (min--moz-device-pixel-ratio: 1.5),
		   only screen and (min-device-pixel-ratio: 1.5) {


	} 

	/*
	iPHONE 5 MEDIA QUERY
	iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
	*/
	@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 

	  
	}

	/*
	PRINT STYLESHEET
	*/
	@media print {
		* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
		a, a:visited { text-decoration: underline; }
		a[href]:after { content: " (" attr(href) ")"; }
		abbr[title]:after { content: " (" attr(title) ")"; }
		.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
		pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
		thead { display: table-header-group; } /* h5bp.com/t */
		tr, img { page-break-inside: avoid; }
		img { max-width: 100% !important; }
		@page { margin: 0.5cm; }
		p, h2, h3 { orphans: 3; widows: 3; }
		h2, h3 { page-break-after: avoid; }
	}

	/*FOOTER*/
	footer{  
		clear:both;
		background:#333;
		color:#ccc;
		font-size:80%;
		padding:20px 0;
		/*height:300px;*/
	}
	footer ul{
		margin:0 0 0 8%;
		padding:0;
	}
	footer img{
		margin-left: 2px;
	}
	.footer-header {
		font-size: 2em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		color: #CC6733;
		text-shadow: 2px 2px 1px rgba(124,124,124,0.6);
		line-height:1em;
		margin:.45em 0;
		padding:0;
	}
	.footer-text {
		font-size: 1em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		color: #999;
		line-height:2em;
	}
	.text-right {
		text-align: right;
	}
	.footer-text a, .footer-text a:active, .footer-text a:hover{
		font-size: 1em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		color: #FFF;
		text-decoration:none;
		line-height:2em;
	}


	/*
	Contact Form
	*/
	fieldset {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	input, textarea{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		font-weight:200;
		color: rgb(88,68,42);
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
	}
	.contact-form-100 input{
		width: 100%;
		height: 30px;
	}
	.contact-form-100 select{
		color: rgb(88,68,42);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		font-weight:200;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		height: 30px;
		width: 100%;
	}
	.contact-form-option {
		color: rgb(88,68,42);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		font-weight:200;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		max-width: 300px;
		min-width: 300px;
		width: 300px !important;
	}
	textarea {
		width: 100%;
		height: 100px;
	}
	.contact-form-check {
		text-align: left;
		padding-right: 10px;
		display: inline-block;
		vertical-align: middle;
	}
	input[type=submit]{
		display: 			inline-block !important;
		background:#CC6733; 
		/*border-radius:7px; */
		color:#fff;
		display:block;
		float:left; 
		font-size: 1.2em;
		font-family: Ubuntu, Arial, Helvetica, sans-serif; 
		padding:	10px 30px 10px 30px;
		text-decoration:none;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;		
		}

	input[type=submit]:hover { 
		background:			#000;
		color:				#58442A;
		}


		
	.carousel {
		height: 50%;
	}

	.item,
	.active,
	.carousel-inner {
		height: 100%;
	}

	/* Background images are set within the HTML using inline CSS, not here */

	.fill {
		width: 100%;
		height: 100%;
		background-position: center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		-o-background-size: cover;
	}

	
	
	/* Ribbon Bottom of Image - Start */	
	.image-container {
	  display: inline-block;
	  position: relative;
	}
	.image-container img {
	  max-width: 100%;
	  height: auto;
	}
	.image-container::before {
	  content: attr(data-caption);
	  padding: 3px 1em;
	  background-color: #CC6733;
	  color: #fff;
	  position: absolute;
	  bottom: 20px;
	  left: -10px;
	  font-family: arial;
	}
	.image-container::after {
	  content: "";
	  border-top: 10px solid #333;
	  border-left: 10px solid transparent;
	  position: absolute;
	  bottom: 10px;
	  left: -10px;
	}
	/* Ribbon Bottom of Image - End */