/*
Theme Name: Chromatix Timplate
Author: Tim Malone, tim.malone@chromatix.com.au
Author URI: http://www.chromatix.com.au
Description: Chromatix theme
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chromatix.com.au
*/

/* **************************** INIT **************************** */

/* Reset code */
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, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline;
}

/* css to skip for search engines */
.assistive-text {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}

#access a.assistive-text:active, #access a.assistive-text:focus {
	background: #eee; border-bottom: 1px solid #ddd; color: #809a04; clip: auto !important;
	font-size: 12px; position: absolute; text-decoration: underline; top: 0; left: 7.6%;
}

a img { border: 0; } /* IE fix. Make images that are links not have obnoxious blue borders */
li { list-style-type: none; } /* We'll turn 'em on if we need 'em */
div { border: 0px green solid; } /* For development */
div.clear { clear: both; }
.disable > a, a.disable, .disabled > a, a.disabled { cursor: default !important; text-decoration: none !important; }
.nomargin { margin: 0 !important; }
.nocaps { text-transform: none !important; }
.clickable { cursor: pointer; }
.close { position: absolute; top: 10px; right: 10px; z-index: 1100; width: 32px; height: 32px; 	background-image: url("images/close.png"); background-size: 32px; background-repeat: no-repeat; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; cursor: pointer; }
	.close:hover { opacity: .6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

div.loading {
	background-image: url("images/loading.gif");
	background-size: 60px;
	background-repeat: no-repeat;
	min-width: 60px;
	min-height: 60px;
}

.pdf_icon, .word_icon, .email_icon, .phone_icon, .fax_icon {
	background-repeat: no-repeat;
	padding-left: 25px;
	background-size: 20px;
	min-height: 25px;
	display: inline-block; /* so min-height actually takes effect */
}

	li.pdf_icon, li.word_icon, li.email_icon, li.phone_icon, li.fax_icon {
		list-style-type: none !important; margin-left: -15px; }
	.pdf_icon { background-image: url("images/pdf.png"); }
	.word_icon { background-image: url("images/word.png"); }
	.email_icon { background-image: url("images/email.png"); }
	.phone_icon { background-image: url("images/phone.png"); }
	.fax_icon { background-image: url("images/fax.png"); }

.lb-next, .lb-prev { background-color: rgba(255,255,255,0); } /* gallery lightbox fix for next/prev buttons in IE */

.noselect {
	/* stops user from selecting text, for example when clicks are handled in a web app */
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
	-moz-user-select: none; /* mozilla browsers */
	-khtml-user-select: none; /* webkit (konqueror) browsers */
	-ms-user-select: none; /* IE10+ */
}

/* **************************** FONTS **************************** */

@font-face {
    font-family: "Raleway Semi Bold";
    src: url("fonts/raleway-semibold-webfont.eot");
    src: url("fonts/raleway-semibold-webfont.eot?#iefix") format("embedded-opentype"),
         url("fonts/raleway-semibold-webfont.woff") format("woff"),
         url("fonts/raleway-semibold-webfont.ttf") format("truetype"),
         url("fonts/raleway-semibold-webfont.svg#ralewaysemibold") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Raleway Bold";
    src: url("fonts/raleway-bold-webfont.eot");
    src: url("fonts/raleway-bold-webfont.eot?#iefix") format("embedded-opentype"),
         url("fonts/raleway-bold-webfont.woff") format("woff"),
         url("fonts/raleway-bold-webfont.ttf") format("truetype"),
         url("fonts/raleway-bold-webfont.svg#ralewaybold") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: "Open Sans Bold Italic";
	src: url("fonts/opensansbolditalic.eot");
	src: url("fonts/opensansbolditalic.eot?#iefix") format("embedded-opentype"),
		 url("fonts/opensansbolditalic.woff") format("woff"),
		 url("fonts/opensansbolditalic.ttf") format("truetype"),
		 url("fonts/opensansbolditalic.svg#opensansbolditalic") format("svg");
	font-weight: normal;
	font-style: normal;
}

/* ************************** STRUCTURE ************************** */

html, body, #page {
	width: 100%;
	font-family: Arial, sans-serif;
	font-size: 12px;
	-webkit-text-size-adjust: none; /* to stop iPhone Safari from changing text sizes on us */
}

	body { overflow-y: scroll; } /* force scrollbars so we don't get width adjustment when the mega menu comes down */
	#page { overflow-x: hidden; /* needs to be hidden if page_containers are used */ position: relative; }

.content_container { width: 960px; margin: 0 auto; position: relative; }
.page_container { width: 1400px; margin: 0 auto; position: relative; left: -220px; /* half of the difference between this width and page_container's width */; }
.fullwidth_container { width: 100%; position: relative; }

/* ********************** MASTHEAD (HEADER) ********************** */

#masthead_wrapper { z-index: 10; position: relative; }

#masthead {
	background-color: #0B682E;
	border-bottom: 7px solid #005B27;
	line-height: 6.7em; /* 80px */ /* limit menu items to one line and center everything in the middle */
}

#masthead_content {
	background-image: url("images/menu_background.png");
	background-repeat: no-repeat;
	background-position: -220px 0; /* background image is 1400px wide, this space is 960px, so lets push it back a bit */
	position: relative;
	height: 80px; /* can't use a clearfix here because the :after is purposed for the background */
}

	.home.page #masthead_content { background-position: -52px 0; } /* adjust background so it meets the home page swirl */

	#masthead_content:before,
	#masthead_content:after {
		/* background extensions out past the sides of the screen */
		content: "";
		position: absolute;
		top: 0;
		background-repeat: repeat;
		height: 100%;
		width: 2000px;
	}

		#masthead_content:before { left: -2000px; background-image: url("images/menu_background_left.png"); }
		#masthead_content:after { right: -2000px; background-image: url("images/menu_background_right.png"); }

#header_logo { float: left; }
	#header_logo img { width: 160px; vertical-align: middle; }
	.home.page #header_logo { display: none; } /* the logo is in the page content for the home page */

#search {
	float: right;
	background-color: #005B27;
	width: 50px;
	height: 100%;
	background-image: url("images/search.png"), url("images/search_hover.png");
	background-position: center center, -100px -100px;
	background-repeat: no-repeat;
	position: absolute;
	right: 0;
	border-bottom: 7px solid #005B27; /* mimic masthead border, so we can change the colour on hover */
}

	.mod-no-multiplebgs #search { background-image: url("images/search.png"); background-position: center center; }
	.mod-no-rgba #search { width: 75px; } /* widen this so it fits next to the no-rgba hover state on main menu items */

	#search:after {
		/* triangle */
		content: "";
		display: none;
		visibility: hidden;
		position: absolute;
		bottom: 0;
		left: 42%; /* no-csscalc support */
		left: calc(50% - 6px);
		border-bottom: 6px solid #B8C0BB;
		border-left: 6.5px solid transparent;
		border-right: 6.5px solid transparent;
	}

	#search_form {
		box-sizing: border-box;
		padding: 0 15px 0 25px;
		position: absolute;
		width: 290px;
		right: 0;
		top: 0%; /* hidden until animated */
		line-height: 6.5em; /* one line, centered 78px */
		z-index: -1;
		background-color: #fff;
		-webkit-transition: .2s top;
		-moz-transition: .2s top;
		transition: .2s top;
	}

		#search_form .search_heading {
			position: absolute;
			left: -100px;
			background-color: #0F803E;
			color: #fff;
			font-family: "Raleway Bold";
			text-transform: uppercase;
			width: 100px;
			text-align: center;
			font-size: 14px;
			top: 0;
		}

		#search_form input[type="text"]{
			width: 208px;
			border: 1px solid #2b2b2b;
			outline: 0;
			font-size: 1em;
			padding: 6px;
			box-sizing: border-box;
			margin-right: 5px;
		}

		#search_form input[type="submit"]{
			background-image: url("images/search_arrow.png");
			background-position: center center;
			background-color: #fff;
			background-repeat: no-repeat;
			height: 30px;
			width: 30px;
			color: transparent; /* hide label */
			border: 0;
			cursor: pointer;
			text-indent: -999px;
		}

			#search_form input[type="submit"]:hover{ opacity: .8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

	#search:hover {
		background-color: #fff;
		background-position: -100px -100px, center center;
		border-bottom-color: #B8C0BB;
	}

		.mod-no-multiplebgs #search:hover { background-image: url("images/search_hover.png"); background-position: center center; }

		#search:hover #search_form {
			top: 100%; /* right at the bottom, no matter the height of either this or its parent :) */
			border-top: 7px solid #005B27; /* mimic masthead border, have to do it on hover so it's not visible */
		}

		#search:hover:after { display: block; visibility: visible; } /* show triangle */

/* **************************** MENU **************************** */

#megamenu_background { background-color: #fff; height: 228px; display: none; z-index: 5; }

#menu {
	font-family: "Raleway Semi Bold";
	text-transform: uppercase;
	font-size: 1.08em;
	text-align: right;
	float: right;
	padding-right: 75px; /* room for search */
	z-index: 1;
}

	#menu ul.menu { list-style-type: none; }

		#menu ul.menu > li {
			display: inline-block;
			margin: 0 -1.5px;
			/*margin: 0 -3px; /* no hover gap between items when html is minified */
		}

			#menu ul.menu > li > a {
				text-decoration: none;
				color: #fff;
				display: block; /* make entire area clickable */
				position: relative; /* positioning parent for :after arrow */
				padding: 0;
				margin: 0 25px;
				font-weight: normal;
			}

				#menu ul.menu > li > a > img { display: none; } /* hide images, because we'll echo them out ourselves in the mega menu */
				#menu ul.menu > li > a:before { content: ""; display: none; visibility: hidden; }
				#menu ul.menu > li > a:after { content: ""; display: none; visibility: hidden; }

				/* menu hovers for rgba-equipped browsers */

					.mod-rgba #menu ul.menu > li > a { padding-right: 5px; }

					.mod-rgba #menu ul.menu > li:hover > a,
					.mod-rgba #menu ul.menu > li[class*="current-"] > a {
						background-color: rgba(255,255,255,.15);
					}

						.mod-rgba #menu ul.menu > li:hover > a:before,
						.mod-rgba #menu ul.menu > li:hover > a:after,
						.mod-rgba #menu ul.menu > li[class*="current-"] > a:before,
						.mod-rgba #menu ul.menu > li[class*="current-"] > a:after {
							/* fancy hover state on the left & right side of links */
							/* this also becomes a 'hover-trigger-area' to avoid accidentally moving off the active element */
							background-repeat: no-repeat;
							width: 40px; /* width of the entire hover-trigger-area */
							height: 80px;
							position: absolute;
							top: 0;
							display: block;
							visibility: visible;
						}

							.mod-rgba #menu ul.menu > li:hover > a:before,
							.mod-rgba #menu ul.menu > li[class*="current-"] > a:before {
								background-image: url("images/menu_hover_left.png");
								background-position: top right;
								left: -40px;
							}

							.mod-rgba #menu ul.menu > li:hover > a:after,
							.mod-rgba #menu ul.menu > li[class*="current-"] > a:after {
								background-image: url("images/menu_hover_right.png");
								background-position: top left;
								right: -40px;
							}

				/* menu hovers for older browsers */

					.mod-no-rgba #menu ul.menu > li:hover > a,
					.mod-no-rgba #menu ul.menu > li[class*="current-"] > a {
						background-color: #005B27;
					}

						.mod-no-rgba #menu ul.menu > li:hover > a:before,
						.mod-no-rgba #menu ul.menu > li:hover > a:after,
						.mod-no-rgba #menu ul.menu > li[class*="current-"] > a:before,
						.mod-no-rgba #menu ul.menu > li[class*="current-"] > a:after {
							background-color: #005B27;
							width: 25px;
							height: 80px;
							position: absolute;
							top: 0;
							display: block;
							visibility: visible;
						}

							.mod-no-rgba #menu ul.menu > li:hover > a:before,
							.mod-no-rgba #menu ul.menu > li[class*="current-"] > a:before {
								left: -25px;
							}

							.mod-no-rgba #menu ul.menu > li:hover > a:after,
							.mod-no-rgba #menu ul.menu > li[class*="current-"] > a:after {
								right: -25px;
							}

			#menu ul.menu > li.menu-item-has-children > a > .megamenu_arrow {
				/* mega menu arrow */
				display: none; /* to be displayed on hover */
				position: absolute;
				bottom: -7px;
				left: 40%;
				left: calc(50% - 11px);
				border-bottom: 12px solid #fff;
				border-left: 11px solid transparent;
				border-right: 11px solid transparent;
				z-index: 11;
			}

	/* ----- MEGA MENUS ----- */

	#menu .sub-menu-wrapper {
		font-family: "Raleway Bold";
		visibility: hidden;
		position: absolute;
		left: 0;
		top: 100%;
		width: 100%;
		z-index: 10;
		/*background-color: #fff;*/
		border-top: 7px solid #005B27; /* mimic masthead border, so we can change the colour on hover */
		max-height: 0;
		/* height is set in the max-height of parent hover */
		overflow: hidden;
		-webkit-transition: .45s max-height;
		-moz-transition: .45s max-height;
		transition: .45s max-height;
		font-size: 1.15em;
		line-height: 2em;
		text-align: left;
	}

		#menu .sub-menu-wrapper .content { float: left; width: 330px; }

			#menu .sub-menu-wrapper .title {
				color: #10803f;
				font-family: "Raleway Bold";
				font-size: 1.3em;
				line-height: 3em;
				padding-top: 1em;
			}

			#menu .sub-menu-wrapper .description { color: #7e7e7e; font-size: 1em; line-height: 1.5em; text-transform: none; }
		#menu .sub-menu-wrapper .image { float: right; }
			#menu .sub-menu-wrapper .image img { max-height: 229px; max-width: 279px; width: auto; height: 229px; }

		#menu ul.sub-menu { float: left; padding: 35px; }

			#menu ul.sub-menu > li {
				float: left;
				clear: left;
				display: block;
				position: relative;
				padding-left: 20px; /* room for triangle */
			}

				#menu ul.sub-menu li:nth-child(n+7) { display: none; } /* hide all menu items after the sixth one */

				#menu ul.sub-menu > li:before {
					/* triangle */
					content: "";
					display: block;
					position: absolute;
					left: 0;
					top: 6.5px;
					border-left: 12px solid #005B27;
					border-top: 6.5px solid transparent;
					border-bottom: 6.5px solid transparent;
				}

				#menu ul.sub-menu > li > a { text-decoration: none; color: #005b27; }

					#menu ul.sub-menu > li:hover > a,
					#menu ul.sub-menu > li[class*="current-"] > a { color: #10803f; }

						#menu ul.sub-menu > li:hover:before,
						#menu ul.sub-menu > li[class*="current-"]:before { border-left-color: #10803f; }

	#menu ul.menu > li.menu-item-has-children:hover .sub-menu-wrapper { visibility: visible; max-height: 228px; }

	#menu ul.menu > li.menu-item-has-children:hover > a > .megamenu_arrow {
		/* mega menu arrow */
		display: block;
	}

/* ************************** HOME PAGE CONTENT ************************** */

.home.page #content_wrapper { /* backstretch slideshow is initiated here, with one fallback random image background */ }

	.home.page #content_container { }

		.home.page #content_overlay {
			background: url("images/home_overlay_left.png");
			background-repeat: no-repeat;
			background-size: auto 924px; /* 924px is height of the image. JS will replace the auto */
			mix-blend-mode: multiply;
			position: absolute;
			height: 100%;
			max-height: 924px; /* height of the background image */
			z-index: -1;
		}

		.home.page #content { margin-top: -4px; } /* fix blank space at top of home page graphic */

			.home.page #content_background {
				background: url("images/home_overlay.png");
				background-repeat: no-repeat;
				background-position: -160px top;
				mix-blend-mode: multiply;
				position: absolute;
				height: 100%;
				max-height: 924px; /* height of the background image */
				z-index: -1;
			}

		.home.page #content h1 { margin: 0; padding-top: 60px; } /* the home page logo */

		/* extend the home page background on tall screens, such as portrait mobile devices */

			@media only screen and (min-height: 1000px) {

				.home.page #content_overlay_extended,
				.home.page #content_background_extended {
					/*height: 1000px; bottom: -1000px; /* these will be set by JS */
					background-repeat: repeat-y;
					position: absolute;
					left: 0;
					width: 100%;
				}

					.home.page #content_overlay_extended {
						background-image: url("images/home_overlay_left_extended.png");
						background-size: auto 924px; /* JS will replace the auto */
					}

					.home.page #content_background_extended {
						background-image: url("images/home_overlay_extended.png");
						background-position: -160px 0;
					}

			}

#home_logo { }
#tagline { color: #fff; font-family: "Open Sans Bold Italic"; font-size: 19px; margin-top: 20px; }
#home_menu { margin-top: 57px; width: 250px; position: relative; padding-bottom: 80px; }

	.mod-opacity #home_menu_background {
		background-color: #fff;
		opacity: .15;
		position: absolute;
		z-index: -1;
		height: 286px;
		width: 2250px;
		top: -23px;
		left: -2000px;
	}

		.mod-opacity #home_menu_background:after {
			background-image: url("images/home_overlay_menu_after.png");
			background-size: cover;
			background-repeat: no-repeat;
			width: 200px;
			height: 286px;
			content: "";
			position: absolute;
			top: 0;
			right: -200px;
		}

	#home_menu ul {
		text-transform: uppercase;
		font-family: "Raleway Bold";
		font-size: 15px;
		list-style-type: none !important; /* override general #content ul settings */
		margin: 0 !important; /* override general #content ul settings */
	}

		#home_menu ul li {
			list-style-type: none !important; /* override general #content li settings */
			margin-top: 10px;
			background-color: #005B27;
			-webkit-border-radius: 60px;
			-khtml-border-radius: 60px;
			-moz-border-radius: 60px;
			border-radius: 60px;
			padding: 5px;
			-webkit-transition: all .2s ease-in-out;
			-moz-transition: all .2s ease-in-out;
			transition: all .2s ease-in-out; /* for :hover effect */
			position: relative; /* for :active effect */
		}

			#home_menu ul li:nth-child(n+5) { display: none; } /* hide everything from the 5th item on.. we can only fit 3 here */

			#home_menu ul li a {
				text-decoration: none;
				color: #0e803f;
				background-color: #fff;
				display: block;
				-webkit-border-radius: 60px;
				-khtml-border-radius: 60px;
				-moz-border-radius: 60px;
				border-radius: 60px;
				padding: 12px 15px;
				width: 70%; /* leave space for arrow */
				position: relative; /* pos parent */
			}

				#home_menu ul li:hover {
					-webkit-transform: scale(1.05,1.05);
					-moz-transform: scale(1.05,1.05);
					-ms-transform: scale(1.05,1.05);
					-o-transform: scale(1.05,1.05);
					transform: scale(1.05,1.05); /* grow hover effect, works in conjunction with the transition */
				}

					.mod-no-csstransforms #home_menu ul li:hover a { color: #005B27; }

				#home_menu ul li:active { top: 1px; } /* push button effect */
					#home_menu ul li:active a { }

				#home_menu ul li a:after {
					/* the arrow */
					background-image: url("images/arrow_white.png");
					background-repeat: no-repeat;
					background-position: center left;
					border: 2px solid #fff;
					border-radius: 40px;
					width: 25px;
					height: 25px;
					content: "";
					position: absolute;
					right: -35px;
					top: 7px;
				}

					/* the arrow doesn't look properly centered if all the borders aren't rounded */
					.mod-no-borderradius #home_menu ul li a:after { right: -38px; }

/* ************************** INNER PAGE HEADER ************************** */

.inner_header {
	height: 146px;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("images/inner_header1.jpg"); /* default only, can be replaced inline */
}

	.mod-rgba .inner_header h1:before,
	.mod-rgba .inner_header h1:after { content: ""; position: absolute; top: 0; height: 100%; background-repeat: no-repeat; }

		.mod-rgba .inner_header h1:before { right: 0; width: 2000px; }
			.mod-rgba.mod-mixblendmode .inner_header h1:before { mix-blend-mode: multiply; background-color: rgba(17,128,64,.79); }
			.mod-rgba.mod-no-mixblendmode .inner_header h1:before { background-color: rgba(17,128,64,.49); }

		.mod-rgba .inner_header h1:after { right: -111px; width: 111px; }

			.mod-rgba.mod-mixblendmode .inner_header h1:after  {
				mix-blend-mode: multiply;
				background-image: url("images/inner_header_overlay.png");
			}

			.mod-rgba.mod-no-mixblendmode .inner_header h1:after  {
				background-image: url("images/inner_header_overlay_nomix.png");
			}

	.inner_header h1 {
		font-family: "Raleway Bold";
		font-size: 30px;
		display: inline-block;
		color: #fff;
		height: 146px;
		line-height: 146px;
		text-transform: uppercase;
		position: relative;
	}

		.mod-rgba .inner_header h1 span { position: relative; z-index: 1; } /* bring the heading in front of the background */

		/* simple highlight when we can't do a nicer bg */
		.mod-no-rgba .inner_header h1 span {
			background-color: #10803F;
			padding: 5px 10px;
			/*margin-left: 15px;*/
		}

/* ******************************* SIDEBAR ****************************** */

.sidebar { margin-top: 30px; }
	.sidebar .sidebar_submenu { margin-bottom: 15px; }

		.sidebar .submenu_title,
		.sidebar .submenu_title a {
			background-color: #10803F;
			color: #fff !important;
			margin: 0 !important;
			text-decoration: none;
			display: block;
			padding: 20px;
		}

			.sidebar .submenu_title a { margin: -20px !important; }
			.sidebar .submenu_title a:hover { opacity: .8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

		.sidebar_submenu ul {
			margin: 0 !important;
			list-style-type: none !important;
			text-transform: uppercase;
			font-family: "Raleway Bold";
			font-size: 14px;
			padding: 0 20px;
			background-image: url("images/submenu_bg.png");
		}

			.sidebar_submenu ul li { list-style-type: none !important; border-top: 2px #d9d9d9 solid; }
				.sidebar_submenu ul li:first-child { border-top: 0; }

				.sidebar_submenu ul li a {
					text-decoration: none;
					padding: 12px 60px 12px 0;
					display: block;
					color: #818080;
					position: relative;
				}

					.sidebar_submenu ul li a:after {
						/* arrow */
						background-image: url("images/arrow_grey.png");
						background-repeat: no-repeat;
						background-position: center left;
						background-size: 85%;
						border: 2px solid #818181;
						border-radius: 40px;
						width: 25px;
						height: 25px;
						content: "";
						position: absolute;
						right: 16px;
						top: 7px;
					}

					.sidebar_submenu ul li[class*="current-"] > a,
					.sidebar_submenu ul li a:hover {
						color: #10803F;
					}

						.sidebar_submenu ul li[class*="current-"] > a:after,
						.sidebar_submenu ul li a:hover:after {
							/* arrow hover state */
							border-color: #10803F;
							background-image: url("images/arrow_green.png");
						}

							/* flip arrow around on current page only (not on hover) */

								.mod-csstransforms .sidebar_submenu ul li[class*="current-"] > a:after {
									-webkit-transform: rotate(180deg);
									-moz-transform: rotate(180deg);
									-ms-transform: rotate(180deg);
									-o-transform: rotate(180deg);
									transform: rotate(180deg);
								}

								/* we'll use 3D transforms if we can; this looks better in Chrome at least */
								.sidebar_submenu ul li[class*="current-"] > a:after {
									-webkit-transform: rotateY(180deg);
									-moz-transform: rotateY(180deg);
									-ms-transform: rotateY(180deg);
									-o-transform: rotateY(180deg);
									transform: rotateY(180deg);
								}

								.mod-no-csstransforms .sidebar_submenu ul li[class*="current-"] > a:after { -ms-filter: FlipH; filter: FlipH; }

			.sidebar_submenu ul ul { font-size: 13px; padding: 0 0 0 10px; }
				.sidebar_submenu ul ul li {  }
					.sidebar_submenu ul ul li a { padding: 10px 55px 10px 0; }
						.sidebar_submenu ul ul li a:after { top: 6px; }

.back_to_top { margin: 15px 0; padding: 5px; text-align: center; background: #ededed; font-size: 12px; display: none; }
	.back_to_top:hover { background: #ddd; }

/* ************************* INNER PAGE CONTENT ************************** */

#content { }
#content.stretch { } /* when there's no sidebar */

.content {
	/* this class is used for the main #content div as well as in various other places across the site */
	font-family: Arial, sans-serif;
	font-size: 13px;
	color: #6f6f6f;
	line-height: 1.6em;
}

	/* easy column support - requires content split in CMS and a clearfix afterwards */
	.content_main { float: left; width: 70%; }
		.stretch .content_main { float: none; width: 100%; margin: 0; }

		.content_main > *:first-child { margin-top: 0 !important; padding-top: 30px; }
		.content_main > *:last-child { margin-bottom: 0 !important; padding-bottom: 100px; }
			.content_main > *.last-child { margin-bottom: 0; padding-bottom: 30px; }

	.content_side { float: right; width: 28%; }
		.stretch .content_side { display: none; }

	#content p { margin: 15px 0; } /* use this, or margin: 15px 0 */
	#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { margin: 20px 0 15px 0; }

		#content h1 { font-family: "Raleway Bold"; font-size: 30px; color: #10803F; line-height: 1.2em; }
		#content h2 { font-family: Arial, sans-serif; font-size: 20px; color: #10803F; line-height: 1.3em; }
		#content h3 { font-family: "Raleway Bold"; font-size: 17px; color: #10803F; text-transform: uppercase; }
		#content h4 { font-family: "Raleway Bold"; font-size: 15px; color: #10803F; }
		#content h5 { font-family: "Raleway Bold"; font-size: 13px; color: #10803F; }
		#content h6 { font-family: "Raleway Bold"; font-size: 11px; color: #10803F; }

	.content strong { font-weight: bold; }
	.content em { font-style: italic; }

	.content strong, .content b { font-weight: bold; /*font-family: "xxxxxxx Bold"; font-weight: normal; font-style: normal;*/ }
	.content em, .content i { font-style: italic; /*font-style: "xxxxxxx Italic"; font-weight: normal; font-style: normal;*/ }
		.content strong em, .content em strong,
		.content strong i, .content i strong,
		.content b em, .content em b,
		.content b i, .content i b { /*font-family: "xxxxxxx Bold Italic"; font-weight: normal; font-style: normal;*/ }

	.content small { font-size: 12px; }

	#content ul, #content ol { margin: 15px 0 15px 30px; counter-reset: section; list-style-type: none; }
		#content ul ul, #content ol ol, #content ul ol, #content ol ul { margin: 5px 0 5px 30px; counter-reset: subsection; }

		#content ul li, #content ol li { list-style-type: none; position: relative; }

			#content ul li:before {
				/* bullet points - 1st level: green circles */
				content: "";
				position: absolute;
				top: 5px;
				left: -20px;
				background-color: #10803F;
				width: 9px;
				height: 9px;
				-webkit-border-radius: 9px;
				-khtml-border-radius: 9px;
				-moz-border-radius: 9px;
				border-radius: 9px;
			}

				.mod-no-borderradius #content ul li:before { top: 6px; }

				#content ul li ul li:before {
					/* bullet points - 2nd level: smaller green squares */
					top: 6px;
					width: 7px;
					height: 7px;
					-webkit-border-radius: 0;
					-khtml-border-radius: 0;
					-moz-border-radius: 0;
					border-radius: 0;
				}

				/* disable bullet point where its not required */
				#content ul.menu li:before, #content .jcarousel ul li:before { display: none; }

			#content ol li:before {
				content: counter(section) ".";
				counter-increment: section;
				color: #10803F;
				position: absolute;
				top: 0;
				left: -30px;
				text-align: right;
				min-width: 20px;
				font-family: Arial, sans-serif;
				font-weight: bold;
			}

				#content ol li ol li:before { content: counter(subsection,lower-alpha) "."; counter-increment: subsection; }

	.content sup, .content sub { vertical-align: baseline; position: relative; top: -0.4em; font-size: 0.8em; }
		.content sub { top: 0.4em; }
	.content blockquote { margin: 15px 30px; }
	.content hr { border-top: 0; border-bottom: 1px solid #000; margin: 30px 0; }

	.content table { margin: -20px; padding-top: 0 !important; }

		.content td {
			/* because this is reset by our CSS reset, we need table cells to vertically align ...
			   ... otherwise they will look terrible aligned to the baseline! */
			vertical-align: top;
			padding: 20px;
		}

		#content table h2,
		#content table h3,
		#content table h3 + p { margin: 10px 0; }

	.content a { color: #107E3E; font-weight: bold; }
		.content a:hover { color: #111; }

	.content .alignnone { }
	.content .alignleft { float: left; clear: left; margin: 10px; }
	.content .alignright { float: right; clear: right; margin: 10px; }
	.content .aligncenter { display: block; margin: 0 auto; }

	.content img { max-width: 100%; height: auto; }

	.content .wp-caption { }
		.content .wp-caption img { width: 100%; height: auto; }
		.content .wp-caption-text { background-color: #f9f9f9; margin: -6px 0 0 0 !important; padding: 10px; }

	#wpgmza_map { margin: 15px 0; }

	/* pagination */

		.content .pagination { text-align: center; margin: 30px 0 15px 0; font-weight: bold; }

			.content .pagination .page-numbers {
				padding: 10px 15px;
				margin: 0 5px;
				display: inline-block;
				height: 40px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				vertical-align: middle;
			}

				.content .pagination a.page-numbers { background-color: #F9F9F9; text-decoration: none; }
					.content .pagination a.page-numbers:hover { background-color: #3C9662; color: #fff; }

				.content .pagination .prev,
				.content .pagination .next {
					background-image: url("images/arrow_green.png");
					background-repeat: no-repeat;
					background-position: center;
					background-size: 40%;
					padding: 10px 20px;
				}

					.content .pagination .prev:hover,
					.content .pagination .next:hover { background-image: url("images/arrow_white.png"); }

					/* flip prev arrow around */

						.mod-csstransforms .content .pagination .prev {
							-webkit-transform: rotate(180deg);
							-moz-transform: rotate(180deg);
							-ms-transform: rotate(180deg);
							-o-transform: rotate(180deg);
							transform: rotate(180deg);
						}

						/* we'll use 3D transforms if we can; this looks better in Chrome at least */
						.mod-csstransforms3d .content .pagination .prev {
							-webkit-transform: rotateY(180deg);
							-moz-transform: rotateY(180deg);
							-ms-transform: rotateY(180deg);
							-o-transform: rotateY(180deg);
							transform: rotateY(180deg);
						}

						.mod-no-csstransforms .content .pagination .prev { -ms-filter: FlipH; filter: FlipH; }

/* *************** ADDITIONAL PAGE CONTENT - PAGE SHOWCASE **************** */

	/* this is also used for search results */

	.additional_content.page_showcase { margin: 20px -1%; }

		.page_showcase a {
			text-decoration: none;
			color: inherit;
			display: block;
			font-weight: normal;
			height: 100%;
		}

		.page_showcase .item {
			float: left;
			margin: 0 1% 2% 1%;
			background-color: rgba(248,248,248,.8);
			position: relative;
			/*-webkit-transition: all .5s;
			-moz-transition: all .5s;
			transition: all .5s;*/
		}

			.mod-no-rgba .page_showcase .item { background-color: #f9f9f9; }

		/* usually three items per line... */
		.page_showcase .item { width: 31%; }
			.page_showcase .item:nth-child(3n+1) { clear: left; }

		/* ...but when there's no sidebar, show four items per line */
		.stretch .page_showcase .item { width: 23%; }
			.stretch .page_showcase .item:nth-child(3n+1) { clear: none; }
			.stretch .page_showcase .item:nth-child(4n+1) { clear: left; }

			.page_showcase .image {
				/*-webkit-transition: all .5s;
				-moz-transition: all .5s;
				transition: all .5s;*/
			}

				.page_showcase .image.post_thumbnail { width: 100%; height: 143px; display: block; }

					.mod-bgsizecover .page_showcase .image.post_thumbnail {
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box;
						padding-top: 143px;
						background-size: cover;
						background-repeat: no-repeat;
					}

				.page_showcase .image.placeholder {
					width: 100%;
					height: 143px;
					background-image: url("images/logo_feature.png");
					background-position: center;
					background-repeat: no-repeat;
					background-color: #eee;
					background-size: 40px;
				}

			.page_showcase .title { padding: 0 20px; word-wrap: break-word; }
			.page_showcase .excerpt { padding: 0 20px; margin: 15px 0 20px 0; word-wrap: break-word; }

			.mod-rgba.mod-no-backgroundblendmode .page_showcase .more_bg {
				/* this element gives us a non-blended background behind the 'more' text on browsers that don't support background blend */
				/* if a browser doesn't even support rgba, then we're just going to have to do without the more text altogether */
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 143px;
				background-color: rgba(16,128,63,.8);
			}

			.mod-rgba .page_showcase .more {
				display: none;
				position: absolute;
				top: 113px;
				left: 15px;
				height: 25px;
				line-height: 25px;
				color: #fff;
				text-transform: uppercase;
				font-family: "Raleway Bold";
				font-size: 14px;
			}

				/* arrow after 'find out more' */
				.mod-rgba .page_showcase .more:after {
					background-image: url("images/arrow_white.png");
					background-repeat: no-repeat;
					background-position: center left;
					background-size: 85%;
					border: 2px solid #fff;
					border-radius: 40px;
					width: 15px;
					height: 15px;
					content: "";
					position: absolute;
					right: -30px;
					top: 2px;
				}

			.mod-no-touch .page_showcase .item:hover { background-color: rgba(237,237,237,.8); }
				.mod-no-touch.mod-no-rgba .page_showcase .item:hover { background-color: #f0f0f0; }
				.mod-no-touch.mod-backgroundblendmode .page_showcase .item:hover .image { background-color: rgba(16,128,63,.8); }
					.mod-no-touch.mod-backgroundblendmode .page_showcase .item:hover .image.post_thumbnail { background-blend-mode: multiply; }
					.mod-no-touch.mod-backgroundblendmode .page_showcase .item:hover .image.placeholder { background-blend-mode: soft-light; }
				.mod-no-touch.mod-rgba.mod-no-backgroundblendmode .page_showcase .item:hover .more_bg { display: block; }
				.mod-no-touch.mod-rgba .page_showcase .item:hover .more { display: inline; }

/* ***************** ADDITIONAL PAGE CONTENT - GALLERIES ****************** */

	.additional_content.gallery { }

		.jcarousel {
			overflow: hidden;
			margin: 20px 0;
			max-width: 644px; /* enough room for 3 images normally */
			padding-bottom: 1px; /* space for the :active state of the prev/next buttons, so they don't hide into overflow */
		}

			.stretch .jcarousel { max-width: 862px; } /* enough room for 4 images when there's no sidebar */
		.jcarousel ul { position: relative; width: 20000em; list-style-type: none !important; margin: 0 -5px !important; height: 170px; }
			.jcarousel li { float: left; height: 170px !important; list-style-type: none !important; margin: 0 5px; }

				.jcarousel li .link {
					background-repeat: no-repeat;
					background-image: url("images/eye.png");
					background-position: -100px -100px;
					float: left;
					position: relative;
					height: 170px;
				}

					.mod-bgsizecover .jcarousel li .image {
						width: 208px;
						height: 170px;
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box;
						padding-top: 170px;
						background-size: cover;
						background-repeat: no-repeat;
						z-index: -1;
						position: relative;
						display: block;
					}

						.mod-no-bgsizecover .jcarousel li .image { height: 170px; width: auto; }

						.jcarousel li .link:hover { background-position: center center; }

						/* http://caniuse.com/#search=background-blend-mode */
						.mod-backgroundblendmode .jcarousel li .link:hover .image {
							background-color: rgba(17,128,64,.80); background-blend-mode: multiply; }
						.mod-no-backgroundblendmode .jcarousel li .link:hover { background-color: rgba(17,128,64,.50); }

		.jcarousel .pager { margin: 20px 0 0 0; text-align: center; }

			.jcarousel .jcarousel-prev,
			.jcarousel .jcarousel-next {
				background-repeat: no-repeat;
				background-position: center left;
				width: 27px;
				height: 27px;
				cursor: pointer;
				opacity: .75;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
				background-color: transparent;
				color: transparent;
				text-indent: -999px;
				-webkit-appearance: none;
				outline: 0;
				border: 2px solid #818181;
				border-radius: 40px;
				margin: 0 8px;
				position: relative;
				background-image: url("images/arrow_grey.png");
			}

				.jcarousel .jcarousel-prev:hover,
				.jcarousel .jcarousel-next:hover { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

				/* button 'press' effect */
				.jcarousel .jcarousel-prev:active,
				.jcarousel .jcarousel-next:active { top: 1px; }

				/* flip the prev button */

					.mod-csstransforms .jcarousel .jcarousel-prev {
						-webkit-transform: rotate(180deg);
						-moz-transform: rotate(180deg);
						-ms-transform: rotate(180deg);
						-o-transform: rotate(180deg);
						transform: rotate(180deg);
					}

					/* we'll use 3D transforms if we can; this looks better in Chrome at least */
					.mod-csstransforms3d .jcarousel .jcarousel-prev {
						-webkit-transform: rotateY(180deg);
						-moz-transform: rotateY(180deg);
						-ms-transform: rotateY(180deg);
						-o-transform: rotateY(180deg);
						transform: rotateY(180deg);
					}

					.mod-no-csstransforms .jcarousel .jcarousel-prev { -ms-filter: FlipH; filter: FlipH; }

/* **************************** FORMS **************************** */

/* these classes need to be preceeded by a relevant ID to override cf7 default styling */

#content .ajax-loader { position: absolute; bottom: 5px; right: 10px; }

/* the obnoxious tips that sit on top, it's !important because the form scripting shows and hides it otherwise */
#content .wpcf7-not-valid-tip { display: none !important; }

/* fix annoying control jumping problem introduced in latest jquery/cf7/wordpress updates */
#content .wpcf7-form-control-wrap { height: auto !important; overflow: visible !important; }

/* fix for file alert */
#content .wpcf7-form-control-wrap.file-387 .wpcf7-not-valid-tip{
	display: block !important;
	margin-bottom: 15px;
}


/* form success/failure output box */
#content .wpcf7-response-output { padding: 20px; max-width: 500px; }
	#content .wpcf7-mail-sent-ok {  } /* success box only */
	#content .wpcf7-validation-errors {  } /* failure box only */

.content form { max-width: 350px; }
.content form p { margin: 0 !important; position: relative; }
.content label { display: block; font-weight: bold; cursor: pointer; }
	.content label.required {  }
		.content label.required:after { content: " *"; margin-left: 1px; color: red; }

.content input, .content textarea, .content select {
	padding: 5px;
	margin: 10px 0;
	width: 100%;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 29px;
}

	.content input:hover, .content textarea:hover { outline: 2px solid #A4C6FD; }

	.content input:active, .content textarea:active,
	.content input:focus, .content textarea:focus { cursor: text; outline: 2px solid #A4C6FD; }

	.content input[type="checkbox"],
	.content input[type="radio"] { width: auto; height: auto; padding: initial; }

	.content textarea { height: auto; }
	.content select {  }

	.content input[type="submit"] {
		width: auto;
		margin: 0 0 0 1px;
		cursor: pointer;
		display: block;
		padding: 5px 20px;
		outline: 0;
		background-color: #005B27;
		color: #fff;
		font-family: "Raleway Bold";
		font-size: 14px;
		-webkit-appearance: none;
		text-transform: uppercase;
		border: 1px solid #005B27;
		position: relative;
	}

		.content input[type="submit"]:hover { color: #005B27; background-color: #fff; }
		.content input[type="submit"]:active { top: 1px; }

/* search results search again form */

.search-results .content #searchform,
.search-no-results .content #searchform { max-width: none; }

	.search-results .content #searchform { margin: 30px 0; }

	.search-results .content #searchform input,
	.search-no-results .content #searchform input { width: 84%; float: left; margin: 0; }

		.search-results .content #searchform input[type="submit"],
		.search-no-results .content #searchform input[type="submit"] { width: 15%; padding: 5px 0; margin-left: 1%; }

/* **************************** FOOTER **************************** */

.footer_feature {
	background-image: url("images/footer_feature.jpg");
	background-repeat: no-repeat;
	background-position: bottom right;
	height: 300px;
	width: 590px;
	z-index: -2;
	position: absolute;
	bottom: 10px;
	right: 0;
}

	.footer_image {
		/* background-image is set inline, as is width & height (subject to max-*) */
		background-image: url("images/footer_feature1.png");
		width: 413px;
		height: 235px;

		background-repeat: no-repeat;
		background-position: bottom right;
		background-size: contain;
		position: absolute;
		bottom: 20px;
		right: 60px;
		max-height: 300px;
		max-width: 530px;
	}

#footer,
#footer_content { background-color: #10803F; color: #e7e7e7; font-size: 12px; }
	#footer_content { padding: 15px 0;  }

	/*.home.page #footer { min-height: 6.9em; } */ /* 83px */
	#footer a { text-decoration: none; color: #e7e7e7; font-weight: normal; }
		#footer a:hover { text-decoration: underline; color: #e7e7e7; }
	#footer .widget { display: none; width: 33%; }
		#footer .widget:first-child { display: inline-block; }
		#footer .widget:nth-child(2) { text-align: center; display: inline-block; }
			#footer .widget.nth-child-2 { text-align: center; display: inline-block; }
		#footer .widget:nth-child(3) { text-align: right; display: inline-block; }
			#footer .widget.nth-child-3 { text-align: right; display: inline-block; }
			#footer .textwidget { }
			#footer .widgettitle { display: none; }

/* ******************** The end, thanks for visiting! ******************* */