/* ===================================================================================================================
   * Responsive styles in addition to base foundation.css (v.5.0.2)
   * Author: otti@ottimoto.com.au
   * Autor URL: http://www.ottimoto.com.au
   =================================================================================================================== */
   
   
	/* Colours used: */
	/* background-color: rgb(45, 151, 116);  GREEN. */
	/* background-color: rgb(43, 46, 38);  DARK GREY. */
	/* background-color: rgb(189, 123, 62);  LIGHT BROWN. */
	/* background-color: rgb(241, 228, 216);  LIGHT BROWN 20%. */
	/* background-color: rgb(245, 235, 226); LIGHT BROWN 15%. */
	/* background-color: rgb(248, 241, 235); LIGHT BROWN 10%. */
	/* background-color: rgb(251, 248, 245); LIGHT BROWN 5%. */
	/* background-color: rgb(92, 80, 57);  BROWN. */
	/* background-color: rgb(53, 105, 82);  DARK GREEN. */
	/* background-color: rgb(214, 197, 0);  YELLOW. */
	/* background-color: rgb(187, 182, 0);  DARK YELLOW. */
	
	/* background-color: rgb(143, 138, 90);  OTHER BROWN. */
	/* background-color: rgb(232, 231, 221);  OTHER BROWN 20%. */
	
	/* MAIN BREAKPOINT CHANGED TO 58.8125em = 941px in foundation.css */
	

/* ===================================================================================================================
Title: HTML5 Responsive Master styles - design dependent
   =================================================================================================================== */

/* Make Foundation wortk in IE7 as well with different box-sizing and .htc file. Change path for each website. */
* 
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(http://www.e-mulch.com.au/js/vendor/boxsizing.htc);
}



/* Sticky Footer
====================================================================================================================== */
html, body 
{
	height: 100%;
}


/* Base
====================================================================================================================== */
/* General horizontal rule. */
hr 
{ 
	border: dashed rgb(255, 255, 255); /* WHITE & DASHED */
	border-width: 1px 0 0;
	margin: 1.25em 0 1.1875em;
}
/* Mobile first: Green horizontal rule inside content i.e. under h2 heading in primary section. Appropriate margin top and bottom. 
-> later media query for larger margins. */
hr.green
{
	border-top: 1px dashed rgb(53, 105, 82); /* DARK GREEN. */
	margin: 0.5em 0 0.9375em 0;
}
hr.noMargTop
{
	border: dashed rgb(255, 255, 255); /* WHITE & DASHED */
	border-width: 1px 0 0;
	margin: 0em 0 1.1875em;
}


/* Fonts
====================================================================================================================== */
/* Default fonts set in foundation.css as "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
Override fonts here and test with Courier first. */
/* TTF = Screen, EOT = IE5-8, WOFF = IE9, FF3.6, Chrome 5, SVG = IOS. */
/* Create font-face declarations that defines the embedded font name and source file. 
Creates arbitrary name for the font and associates it with the a direct link to the font itself. */
@font-face 
{
    font-family: 'RobotoRegular';
    src: url('../fonts/Roboto-Regular-webfont.eot'); /* IE6–8 */
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */
         url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg'); /* iOS devices */
    font-weight: normal;
    font-style: normal;
}
@font-face 
{
    font-family: 'RobotoMedium';
    src: url('../fonts/Roboto-Medium-webfont.eot'); /* IE6–8 */
    src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Medium-webfont.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */
         url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'), /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */
         url('../fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg'); /* iOS devices */
    font-weight: normal;
    font-style: normal;
}


/* Apply new font to certain definitions: 
All headings h1, h2, etc, standard paragraphs p, all lists (including navigation) ul, text inside buttons. 
Fallback to font declarations made in foundation.css. Font weight not bold for bold font. */
h1, h2, h3, h4, h5, h6, p, ul, .button, .top-bar-section ul li > a, .side-nav li, .side-nav li.active > a:first-child:not(.button), form
{
	font-family: 'RobotoRegular', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: normal;
}

p.call, .hoverText
{
	font-family: 'RobotoMedium', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: normal;
}




/* Typography
====================================================================================================================== */
/* Default browser font-size is 16px -> html & body font-size in foundation.css is set to 100%. Therefore 1em equals 16px.
Then foundation sets all font sizes to rem's (not em's anymore!).
rem (relative to root to overcome the compounding problem for nested items). 
Fallback would only be relevant for not compatible browsers IE8 and down. Modern browsers are perfectly resizable now with rem's. 
Line-height as per foundation.css. 
Calculation: 34px : 16px = 2.125rem or 2.125rem*16px = 34px */
p, ul
{ font-size: 0.875em; font-size: 0.875rem; margin-bottom: 15px; } /* 0.875rem = 14px. */
h1 
{ font-size: 2.125rem; } /* equals 34px -> not actually used on page. */
h2 
{ font-size: 1.5em; font-size: 1.5rem; margin-top: 20px; margin-bottom: 0; } /* equals 24px */
/* Sales heading on top. */
.sales h2
{ margin-top: 20px; margin-bottom: 20px; }
/* Headings defined as h2 but in darker areas i.e. before & after and quick links to be h3 size. */
.beforeafter h2, .dark h2, .quicklinks h2
{ font-size: 1.125em; font-size: 1.125rem; } /* equals 18px */
h3 
{ font-size: 1.125em; font-size: 1.125rem; } /* equals 18px */
h3#servicesh3
{ margin-top: 0; }
h4 
{ font-size: 1.125em; font-size: 1.125rem; } /* equals 18px */
h5
{ font-size: 1em; font-size: 1rem; } /* equals 16px */

/* Menu items. */
.top-bar-section ul li > a
{ font-size: 1.125em; font-size: 1.125rem; } /* equals 18px */

/* Mobile first: Font size for dropdown links inside mobile navigation. -> later media query for larger fonts on larger screens (above breakpoint) -> Later media query for larger fonts. */
.top-bar-section ul li ul > a
{ font-size: 0.9375em; font-size: 0.9375rem; } /* equals 15px */

/* Footer text smaller. Also the text for modals inside footer which are not wrapper inside a paragraph. */
footer p, footer a[data-reveal-id]
{ font-size: 0.75em; font-size: 0.75rem; } /* 0.75rem = 12px. */

/* Call text mobile no. */
p.call
{ font-size: 1.5em; font-size: 1.5rem; } /* equals 24px */

/* Image hover text. */
.hoverText
{ font-size: 0.75em; font-size: 0.75rem; } /* 0.75rem = 12px. */




/* Links
====================================================================================================================== */

/* LVHA. Change, if required from default in foundation.css. */
a 
{ 
	color: rgb(189, 123, 62); /* LIGHT BROWN. */
	text-decoration: underline;
}

/* Visited links to be light brown. */
a:visited 
{ 
	color: rgb(189, 123, 62); /* LIGHT BROWN. */
}

/* Hover links to be light brown. */
a:hover, a:active
{ 
	color: rgb(189, 123, 62); /* LIGHT BROWN. */
	background-color: rgb(241, 228, 216); /* LIGHT BROWN 20%. */	
}



/* Boxes (Round Corners etc)
====================================================================================================================== */

/* Standard definition for rounded corners. Class panel to be applied in HTML. */
.roundedCorners
{
	-webkit-border-radius: 3px; /* Safari3-4, iOS 1-3.2, Android ≤1.6 */
	-moz-border-radius: 3px; /* FF1-3.6 */
	-khtml-border-radius: 3px; /* Linux */
	border-radius: 3px; /* Standard CSS3 syntax for Opera 10.5, IE9, Safari5, Chrome, FF4, iOS 4, Android 2.1+ */
	/* useful if you don't want a bg color from leaking outside the border: */
	-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;	
}

/* Standard definition for text shadow. Horizontal distance, vertical distance and blur, Followed by color. */
.boxTextshadow 
{
     text-shadow: 1px 1px 2px rgb(43, 46, 38); /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}

/* Standard definition for text shadow. */
.textShadow 
{
     text-shadow: 1px 1px 1px #FFFFFF; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}


/* Wrapper
====================================================================================================================== */
/*  Mobile first: Wrapper wraps around whole content except sticky footer. Sticky footer items. Bottom negative margin same height as footer. 
Later media query for shorter footer. */
#wrapper 
{
	min-height: 100%;	/* required for sticky footer */
	height: auto !important; /* required for sticky footer -> hack for IE6. */
	height: 100%; /* required for sticky footer -> hack for IE6 */
	margin: 0 auto -450px; /* required for sticky footer. */
}


/* Page Header
====================================================================================================================== */
/* Background image behind navigation etc. User background-size. */
.home #headbg
{
	background: url(../img/header-images/01_1600_72.jpg) no-repeat center top; /* not fixed and set to top to show sky. */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.profile #headbg, .missing #headbg
{
	background: url(../img/header-images/05_1600_72.jpg) no-repeat center top; /* not fixed and set to top to show sky. */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.services #headbg, .land-clearing #headbg, .powerline-mulching #headbg, .forestry-mulching #headbg, 
.mining #headbg, .strategic-firebreaks #headbg, .orchard-removal #headbg
{
	background: url(../img/header-images/02_1600_72.jpg) no-repeat center top; /* not fixed and set to top to show sky. */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.safety-training #headbg
{
	background: url(../img/header-images/03_1600_72.jpg) no-repeat center top; /* not fixed and set to top to show sky. */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.contact #headbg
{
	background: url(../img/header-images/04_1600_72.jpg) no-repeat center top; /* not fixed and set to top to show sky. */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


/* Notice when JavaScript is off
====================================================================================================================== */
/* Paragraph with id in HTML. If JS is on -> do not display. If JS is off -> Modernizr adds .no-js class to html tag -> display text. */
.js #jsnotice 
{ 
	display: none; 
}
.no-js #jsnotice 
{
	display: block;
	color: red;
	background-color: white;
	padding: 5px;
	border: 1px solid red;
	margin-top: 5px;
	text-align: center;
}



/* Navigation
====================================================================================================================== */
/* MAIN NAV = TOP BAR. */
/* GENERAL. */
/* Remove bg colour for top bar outside of content width and from the top bar itself. */
.contain-to-grid, .top-bar, .top-bar.expanded .title-area
{ 
	background: transparent;
}

/* Remove underlining for links inside top bar. */
.top-bar li a
{
	text-decoration: none;
}

/* Change height of top bar from 45px to 120px. Leave height throughout all devices. */
.top-bar
{
	height: 120px;
}

/* Also change the list holding the name/logo to 120px. This will push dropd own items down so they do not appear on larger devices above breakpoint.
Manu ia set to 50% so will move down to middle of that height. */
.top-bar .name
{
	height: 120px;
}

/* LOGO LEFT. */
/* Remove margins for h2 inside top bar name to avoid height jump of top bar. */
.top-bar .name h2
{
	margin-top: 0;
	margin-bottom: 0;
}

/* First declarations were copied and edited to suit if text was used. Then text moved outside viewport and logo positioned. */
.top-bar .name h2 a
{
	display: block;
	text-indent: -999999px;
	background-image: url(../img/E-Mulch_Logo.png);
	background-repeat: no-repeat;
	background-position: 0px 17px;
	width: 237px; /* Full width of logo incl white space left as part of the logo. */
	height: 103px; /* Height of logo plus the position from top. */
}
/* No hover bg colour for logo. */
.top-bar .name h2 a:hover, .top-bar .name h2 a:active
{
	background-color: transparent;
}

/* POSITION. */
/* Mobile first: The navigation to be aligned on top (no margin top) for mobile devices (after breakpoint) -> later media query to move the navigation (right) down appropriately. */
.top-bar-section ul
{
	margin-top: 0px;
	background: rgba(255, 255, 255, 0.5); /* WHITE 50% transparent below breakpoint. */
}

/* ARROWS. */
/* Side arrows on mobiles, normal and hover-> later media query for larger screens with down arrow. */
.top-bar-section .has-dropdown > a::after, .top-bar-section .has-dropdown > a:hover::after
{
	border-color: transparent transparent transparent rgb(189, 123, 62); /* LIGHT BROWN. */
}

/* LINKS. */
/* Navigation links bg colour to be removed. Next on hover change the bg colour to 20% light brown and leave colour as light brown. */
.top-bar-section ul li
{
	background: transparent;
}
.top-bar-section ul li:hover:not(.has-form) > a
{
	background-color: rgb(241, 228, 216); /* LIGHT BROWN 20%. */
	color: rgb(189, 123, 62); /* LIGHT BROWN. */
}
/* Also text link colour to be light brown. */
.top-bar-section ul li > a, .top-bar-section li:not(.has-form) a:not(.button)
{
	color: rgb(189, 123, 62); /* LIGHT BROWN. */
}

/* "MENU" LINK STUFF. */
/* Mobile first: Menu text itself to be light brown. Hover state without bg colour as site-wide links. Followed by the "hamburger" lines also in light brown. */
.top-bar .toggle-topbar.menu-icon a
{
	color: rgb(189, 123, 62); /* LIGHT BROWN. */
}
.top-bar .toggle-topbar.menu-icon a:hover
{
	background-color: transparent;
}
.top-bar .toggle-topbar.menu-icon a span::after
{
	box-shadow: 0 0px 0 1px rgb(189, 123, 62), 0 7px 0 1px rgb(189, 123, 62), 0 14px 0 1px rgb(189, 123, 62);
}
/* Word "Back" once submenu is reached in mobile navigation. */
.top-bar-section .dropdown li.title h5 a, .top-bar-section .dropdown li.parent-link a
{
	color: rgb(189, 123, 62); /* LIGHT BROWN. */
}

/* DIVIDERS. */
/* Dividers in brown - same as nav colour. */
.top-bar-section .divider, .top-bar-section [role="separator"]
{
	border-top: solid 1px rgb(189, 123, 62); /* LIGHT BROWN. */
}



/* PrimaryContent (left column) as section
====================================================================================================================== */
/* Row with columns - might vary page or device dependant. */
section#primaryContent 
{

}

/* Heading colours. */
.sales h2
{
	color: rgb(255, 255, 255); /* WHITE. */
}
/* Text inside sales message to have top border as dashed line. White text. */
.sales p
{
	border-top: 1px dashed rgb(255, 255, 255); /* WHITE & DASHED */
	padding-top: 10px;
	color: rgb(255, 255, 255); /* WHITE. */
}

/* Mobile first: Margin top and bottom zero for mobiles. Alos not yet dashed border dashed border.
-> later media query for more margin top and bottom on larger screens. Also border top and bottom from medium upwards. */
.primary, .complementary
{
	margin-top: 0px;
	margin-bottom: 0px;
}

/* Remove margin bottom for unordered lists inside primary content. */
.primary ul
{
	margin-bottom: 0;
}

/* Mobile first: Darker areas i.e. before & after etc to have dark bg colour as fallback and a background image. -> later more padding bottom. */
.dark, .quicklinks
{
	background-color: rgb(43, 46, 38); /* DARK GREY. */
	background-image: url(../img/woodchips-pattern.jpg);
	background-repeat: repeat;
	padding-bottom: 20px;
}
/* Heading and text inside darker areas to be white. */
.dark h2, .dark p, .quicklinks h2, .quicklinks p
{
	color: rgb(255, 255, 255); /* WHITE. */
}


/* Side navigation on Services pages. */
/* Remove the padding. */
.side-nav
{
	padding: 0;
	padding-bottom: 0px;
}

/* Remove margin bottom on list items. Less line-height then standard. */
.side-nav li 
{ 
	margin: 0; 
	line-height: 1.3;
}

/* Side navigation link. */
.side-nav li a:not(.button)
{
	color: rgb(189, 123, 62); /* LIGHT BROWN. */
}
/* Active link. */
.side-nav li.active > a:first-child:not(.button)
{
	color: rgb(189, 123, 62); /* LIGHT BROWN. */
	background-color: rgb(241, 228, 216); /* LIGHT BROWN 20%. */	
}
/* Hovered link. */
.side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus
{
	color: rgb(189, 123, 62); /* LIGHT BROWN. */
	background-color: rgb(241, 228, 216); /* LIGHT BROWN 20%. */	
}

/* Mobile first: Borders etc. Smaller for small devices -> later media query for medium upwards larger. */
/* Video. */
img.videoImg
{
	border: 4px solid rgb(214, 197, 0); /* YELLOW. */
	margin-bottom: 12px;
}
#primaryContent img.videoImg, .services #primaryContent p.enquire, .missing #primaryContent p.enquire
{
	margin-top: 0px;
}
/* Quick Link images. */
.quicklinks img
{
	border: 4px solid rgb(214, 197, 0); /* YELLOW. */
}
/* Quick Link images. */
.slider-all img
{
	border: 4px solid rgb(214, 197, 0); /* YELLOW. */
}

/* Mobile first: Smaller video section on Home page without padding left for text. Also for video thumbnail itself -> later media query for vid to add it again. */
.noPadLeft, .noPadLeftVid
{
	padding-left: 0 !important;
}

/* Buttons. */
.button, .button:visited
{
	background-color: rgb(214, 197, 0); /* YELLOW. */
	border: 1px solid rgb(187, 182, 0); /* DARK YELLOW. */
	color: rgb(255, 255, 255); /* WHITE. */
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 20px;
}
.button:hover, .button:active
{
	background-color: rgb(187, 182, 0); /* DARK YELLOW. */
}

/* Enquire and call stuff. */
a .enquire
{
	height: 27px;
	padding-left: 50px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
}
a .enquire
{
	background-image: url(../img/contact-icon.png);
}
/* Mobile first: later more margin bottom for larger screens. */
p.call
{
	height: 40px;
	background-image: url(../img/call-icon.png);
	background-position: 0px 5px;
	padding-left: 50px;
	background-repeat: no-repeat;
	margin-bottom: 10px;
}
a:hover .enquire, a:active .enquire
{
	background-position: 0px -28px;
}


/* Image hover effects animated
====================================================================================================================== */
/* Outer container relative, so inside can be absolute. */
.container 
{
	position:relative;
}

/* Hover effect for textbox (which includes the "overlay") without any transparency. */
.imageTextbox:hover 
{
	opacity:1;
}
/* Mobile first: Image hover text. Move text down from top. -> later media queries for all other breakpoints. */
.hoverText
{
	padding-top: 10%;	
}

/* The textbox is the "overlay". Same border as normal image link. Full width and height and positioned absolute inside relative container. 
Not visible first (full opacity on hover). Overlat transparent colour and transition. */
.imageTextbox 
{
	border: 6px solid rgb(214, 197, 0); /* YELLOW. */
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	background-color: rgba(0, 0, 0, 0.6);
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	transition: all 0.7s ease;
}



/* Forms input override (small devices and orientation change)
====================================================================================================================== */
form
{
	background-color: rgb(255, 255, 255); /* WHITE. */
}

/* No override for small devices and orientation change required. */
/* Remove border, remove box shadow, Change bg colour.  */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea 
{
	border: 0px solid #FFFFFF;
	-webkit-box-shadow: none;
	box-shadow: none;
	background-color: rgb(248, 241, 235); /* LIGHT BROWN 10%. */
	color: rgb(40, 40, 40); /* CHARCOAL. */
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
textarea:focus 
{
    background: rgb(245, 235, 226); /* LIGHT BROWN 15%. */
}

/* Change Placeholder color. */
::-webkit-input-placeholder 
{ /* WebKit browsers */
	color: rgb(40, 40, 40); /* CHARCOAL. */
}
:-moz-placeholder 
{ /* Mozilla Firefox 4 to 18 */
    color: rgb(40, 40, 40); /* CHARCOAL. */
}
::-moz-placeholder 
{ /* Mozilla Firefox 19+ */
    color: rgb(40, 40, 40); /* CHARCOAL. */
}
:-ms-input-placeholder 
{ /* Internet Explorer 10+ */
    color: rgb(40, 40, 40); /* CHARCOAL. */
}

/* Red colour for error message. */
.pRed
{
	color: rgb(210, 0, 0);
}

textarea
{
	min-height: 100px;
}

form .button
{
	margin-bottom: 0;
}
form p#formButton
{
	margin-bottom: 0;
}


/* Footer
====================================================================================================================== */
/* Footer. Brown bg. Padding top and bottom. Place transparent bg graphic. */
footer
{
	background-color: rgb(92, 80, 57); /* BROWN. */
	padding-top: 30px;
	padding-bottom: 30px;
	background-image: url(../img/Vegetation_Management.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 70%;
}

/* Set footer height (same height as margin for wrapper). -> Later media query for shorter footer on larger devices. */
footer, .push
{
	clear: both;
	height: 450px;
}

/* Text inside footer in white. */
footer p
{
	color: rgb(255, 255, 255); /* WHITE. */
}

/* Social network logos. */
footer a.socials
{
	float: left;
	width: 42px;
	height: 42px;
	background-image: url(../img/social-logos-emulch.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	text-indent: -99999px;
	margin-right: 5px;
	margin-bottom: 20px; /* Just for distance to next items on small screens. */
}
footer a:hover.socials.linkedin, footer a:focus.socials.linkedin
{ 
	background-position: 0px -45px; 
	background-color: transparent;
}

footer a.socials.googleplus
{ 
	background-position: -45px 0px; 
}
footer a:hover.socials.googleplus, footer a:focus.socials.googleplus
{ 
	background-position: -45px -45px; 
	background-color: transparent;
}
footer a.socials.youtube
{ 
	background-position: -90px 0px; 
}
footer a:hover.socials.youtube, footer a:focus.socials.youtube
{ 
	background-position: -90px -45px; 
	background-color: transparent;
}


/* Back to top button
====================================================================================================================== */
#scrollup
{
    background: url('../img/back-to-top.png') no-repeat;
    width: 40px;
    height: 40px;
    position:fixed;
    bottom:30px;
    right:30px;
    display:none;
    text-indent:-9999px;
}



/* Helper classes
====================================================================================================================== */

/* Add the .visuallyhidden class to hide text from browsers but make it available for screen readers. Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden 
{ 
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; 
	margin: -1px; 
	overflow: hidden; 
	padding: 0; 
	position: absolute; 
	width: 1px; 
}

.clearBoth
{ 
	clear: both; 
}


/* Google Map
====================================================================================================================== */

/* Use CSS to Specify the Aspect Ratio of a Fluid Element: Aspect ratio to be specified for #map-canvas. 
Element #map-canvas is wrapped by container #map-container to specify thew width (here 100%). 
Also, the element #map-canvas has a dummy element as a previous sibling which will express the height as a function of the width. 
Overflow hidden to avoid text in map showing up left of map. Margin top, if required. */
#map-container 
{
    display: inline-block;
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
}
#dummy 
{
    padding-top: 75%; /* 4:3 aspect ratio */
}
#map-canvas
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #F20;
}
/* Fix display error of map controls and info boxes, due to (re)sizing the images for responsiveness. */
#map-canvas img
{
	max-width: none;
}
/* Class for info window inside Google Maps. */
.infoWind p
{
	margin: 0px;
	padding: 0px;
}
/* If JavaScript is off -> Modernizr adds .no-js class to html tag -> show static image of Google Map. */
.no-js #map-canvas 
{
	background-image: url(../img/google_map_image.jpg);
	background-repeat: no-repeat;
}



/* Video 
====================================================================================================================== */
/* In order to avoid not validating frame border for iframes, set them to zero here. */
.flex-video iframe 
{ 
	border: none; 
}



/* Custom Checkbox and Radio Inputs - Override/Fix
====================================================================================================================== */
/* Override foundation.css, where checkbox was set to negative z-index. */
form.custom .custom.checkbox 
{
    z-index: 0;
}



/* Skiplinks 508 Requirements - Accessibility
====================================================================================================================== */

.skiplist 
{
	margin: 0; 
	padding: 0
} 
.skip 
{
	display: none; 
	text-align: left; 
	margin: 0; 
	padding: 0; 
	position: absolute
} /*All incl Opera*/

/* * html */ .skip {display: block} /*Seen by IE*/

.skip 
{
	display: block
} /*Seen by Moz, FF and Safari*/
	
.skip a 
{
	padding: 0 0.5em; 
	display: inline; 
	z-index: 2; 
	text-decoration:none; 
	position: absolute; 
	width: 14em; left: -200em;
}

.skip a:focus, .skip a:active 
{
	position: absolute; 
	left: 0.5em; 
}
	
.skip a:hover 
{
	cursor: default
}

/* IE8 Gist - if required. 
====================================================================================================================== */
/* The Grid ---------------------- */
.lt-ie9 .row { width: 75em; max-width: 100%; min-width: 768px; margin: 0 auto; } /* Change to 75em. */
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column, 
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }
 
.lt-ie9 .column, .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }
 
.lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }
.lt-ie9 [class*="column"] + [class*="column"].end { float: left; }
 
.lt-ie9 .large-1, 
.lt-ie9 .row .large-1 { width: 8.33333%; }
 
.lt-ie9 .large-2, 
.lt-ie9 .row .large-2 { width: 16.66667%; }
 
.lt-ie9 .large-3, 
.lt-ie9 .row .large-3 { width: 25%; }
 
.lt-ie9 .large-4, 
.lt-ie9 .row .large-4 { width: 33.33333%; }
 
.lt-ie9 .large-5, 
.lt-ie9 .row .large-5 { width: 41.66667%; }
 
.lt-ie9 .large-6, 
.lt-ie9 .row .large-6 { width: 50%; }
 
.lt-ie9 .large-7, 
.lt-ie9 .row .large-7 { width: 58.33333%; }
 
.lt-ie9 .large-8, 
.lt-ie9 .row .large-8 { width: 66.66667%; }
 
.lt-ie9 .large-9, 
.lt-ie9 .row .large-9 { width: 75%; }
 
.lt-ie9 .large-10, 
.lt-ie9 .row .large-10 { width: 83.33333%; }
 
.lt-ie9 .large-11, 
.lt-ie9 .row .large-11 { width: 91.66667%; }
 
.lt-ie9 .large-12,
.lt-ie9 .row .large-12 { width: 100%; }
 
.lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; }
.lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; }
.lt-ie9 .row .large-offset-3 { margin-left: 25%; }
.lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; }
.lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; }
.lt-ie9 .row .large-offset-6 { margin-left: 50%; }
.lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; }
.lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; }
.lt-ie9 .row .large-offset-9 { margin-left: 75%; }
.lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; }
 
.lt-ie9 .pull-2 { right: 16.66667%; }
.lt-ie9 .pull-3 { right: 25%; }
.lt-ie9 .pull-4 { right: 33.33333%; }
.lt-ie9 .pull-5 { right: 41.66667%; }
.lt-ie9 .pull-6 { right: 50%; }
.lt-ie9 .pull-7 { right: 58.33333%; }
.lt-ie9 .pull-8 { right: 66.66667%; }
.lt-ie9 .pull-9 { right: 75%; }
.lt-ie9 .pull-10 { right: 83.33333%; }
 
.lt-ie9 .push-2 { left: 16.66667%; }
.lt-ie9 .push-3 { left: 25%; }
.lt-ie9 .push-4 { left: 33.33333%; }
.lt-ie9 .push-5 { left: 41.66667%; }
.lt-ie9 .push-6 { left: 50%; }
.lt-ie9 .push-7 { left: 58.33333%; }
.lt-ie9 .push-8 { left: 66.66667%; }
.lt-ie9 .push-9 { left: 75%; }
.lt-ie9 .push-10 { left: 83.33333%; }
 
/* Nicolas Gallagher's micro clearfix */
.lt-ie9 .row { *zoom: 1; }
.lt-ie9 .row:before, .row:after { content: " "; display: table; }
.lt-ie9 .row:after { clear: both; }



/* Media Queries
====================================================================================================================== */
/* All above is mobile first. */
/* 
320px = 20em
480px = 30em
640px = 40em
768px = 48em
940px = 58.75em
1024px = 64em
1440px = 90em
1920px = 120em
*/

/* max-width 320px - below iPhone width */
@media only screen and (max-width: 20em) { 
	/* ------------ FONT SIZES. ------------ */
	p.call { 
		font-size: 0.875em; font-size: 0.875rem; 
	} /* equals 14px */
	/* ------------ END FONT SIZES. ------------ */
	
	/* ------------ SLIDER BUTTONS. ------------ */
	button.slick-prev, button.slick-next {
		display: none !important;
	}
	/* ------------ END SLIDER BUTTONS. ------------ */
	
	/* ------------ IMAGE HOVER TEXT. ------------ */
	/* Image hover text. Move text down from top. */
	.hoverText {
		display: none !important;
	}
	/* ------------ END IMAGE HOVER TEXT. ------------ */
} 

/* Small screens: 321px - 480px (20.0625em - 30em) */
@media only screen and (min-width: 20.0625em) { 
	/* ------------ SLIDER BUTTONS. ------------ */
	button.slick-prev, button.slick-next {
		display: none !important;
	}
	/* ------------ END SLIDER BUTTONS. ------------ */
}

/* XSmall screens: 481px - 640px (30.0625em - 40em) */
@media only screen and (min-width: 30.0625em) { 
	/* ------------ IMAGE HOVER TEXT. ------------ */
	/* Image hover text. Move text down from top. */
	.hoverText {
		padding-top: 14%;	
	}
	/* ------------ END IMAGE HOVER TEXT. ------------ */
}

/* Medium screens: 641px - 768px (40.063em - 48em) */
@media only screen and (min-width: 40.063em) { 
	/* ------------ FONT SIZES. ------------ */
	p, ul { 
		font-size: 0.9375em; font-size: 0.9375rem; 
	} /* 0.9375rem = 15px. */
	h2 { 
		font-size: 1.6875em; font-size: 1.6875rem; margin-top: 30px; margin-bottom: 0;
		} /* equals 27px */
	/* Headings defined as h2 but in darker areas i.e. before & after and quick links to be h3 size. */
	.beforeafter h2, .dark h2, .quicklinks h2 { 
		font-size: 1.375em; font-size: 1.375rem; 
	} /* equals 22px */
	h3 { 
		font-size: 1.375em; font-size: 1.375rem; 
	} /* equals 22px */
	h3.sidebar { 
		margin-top: 30px; 
	}
	/* Call text mobile no. */
	p.call { 
		font-size: 0.875em; font-size: 0.875rem; 
	} /* equals 14px */
	/* Image hover text. */
	.hoverText { 
		font-size: 1em; font-size: 1rem; 
	} /* 1rem = 16px. */
	/* ------------ END FONT SIZES. ------------ */	
	
	/* ------------ SECTIONS ETC. ------------ */
	/* Primary section with dashed line top and bottom for medium and above. */
	.primary, .complementary
	{
		border-top: 1px dashed rgb(53, 105, 82); /* DARK GREEN & Dashed. */
		border-bottom: 1px dashed rgb(53, 105, 82); /* DARK GREEN & Dashed. */
		margin-top: 20px;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
	/* ------------ END SECTIONS ETC. ------------ */
	
	/* ------------ BORDERS LARGER. ------------ */
	/* Video. */
	img.videoImg {
		border: 6px solid rgb(214, 197, 0); /* YELLOW. */
		margin-bottom: 12px;
	}
	#primaryContent img.videoImg, .services #primaryContent p.enquire, .missing #primaryContent p.enquire {
		margin-top: 30px;
	}
	#primaryContent img.noTopMarg {
		margin-top: 0px;
	}
	/* Quick Link images. */
	.quicklinks img {
		border: 6px solid rgb(214, 197, 0); /* YELLOW. */
	}
	/* Quick Link images. */
	.slider-all img {
		border: 6px solid rgb(214, 197, 0); /* YELLOW. */
	}
	/* ------------ END BORDERS. ------------ */
	
	/* ------------ VIDEO PADDING SMALL VIDEOS. ------------ */
	.noPadLeftVid {
		padding-left: 15px !important;
	}
	/* ------------ END VIDEO PADDING SMALL VIDEOS. ------------ */
	
	/* ------------ SIDE STUFF. ------------ */
	/* Different bg position larger screens. */
	p.call {
		background-position: 0 0;
		margin-bottom: 0px;
	}
	/* ------------ END SIDE STUFF. ------------ */
	
	/* ------------ SLIDER BUTTONS. ------------ */
	button.slick-prev, button.slick-next {
		display: block !important;
	}
	/* ------------ END SLIDER BUTTONS. ------------ */
	
	/* ------------ IMAGE HOVER TEXT. ------------ */
	/* Image hover text. Move text down from top. */
	.hoverText {
		padding-top: 16%;	
	}
	/* ------------ END IMAGE HOVER TEXT. ------------ */
	
	/* ------------ Sticky footer. ------------ */
	/* Wrapper for sticky footer less height for larger devices.  */
	#wrapper  {
		margin: 0 auto -260px; /* required for sticky footer. */
	}
	/* Same for footer. */
	footer, .push {
		height: 260px;
	}
	/* ------------ End Sticky footer. ------------ */
	
}

/* XMedium screens: 769px - 940px (48.0625em - 58.75em) */
@media only screen and (min-width: 48.0625em) { 

}

/* XXMedium screens - MAIN BREAKPOINT: 941px - 1024px (58.8124em - 64em)*/
@media only screen and (min-width: 58.8125em) { 
	/* ------------ FONT SIZES. ------------ */
	p, ul { 
		font-size: 0.9375em; font-size: 0.9375rem; 
	} /* 0.9375rem = 15px. */
	h2 { 
		font-size: 1.875em; font-size: 1.875rem; margin-top: 40px; margin-bottom: 0;
		} /* equals 30px. And set margin top and remove margin bottom. */
	/* Headings defined as h2 but in darker areas i.e. before & after and quick links to be h3 size. */
	.beforeafter h2, .dark h2, .quicklinks h2 { 
		font-size: 1.5em; font-size: 1.5rem; 
	} /* equals 24px */
	h3 { 
		font-size: 1.5em; font-size: 1.5rem; margin-top: 40px; margin-bottom: 10px;
	} /* equals 24px */
	h3.sidebar { 
		margin-top: 40px; 
	}
	.top-bar-section ul li > a { 
		font-size: 1.375em; font-size: 1.375rem; 
	} /* equals 22px */
	/* Font size dropdown items. */
	.top-bar-section .dropdown li a { 
		font-size: 1em; font-size: 1rem; 
	} /* equals 16px */
	/* Image hover text. */
	.hoverText { 
		font-size: 1.5em; font-size: 1.5rem; 
	} /* equals 24px */
	/* ------------ END FONT SIZES. ------------ */
	
	/* ------------ TOP BAR. ------------ */
	/* Move the navigation (right) down appropriately above breakpoint. Then bring it back for dropdown ul. */
	.top-bar-section ul {
		margin-top: 35px;
		background: inherit;
	}
	.top-bar-section ul ul {
		margin-top: 0;
	}
	/* Bg colour for menu buttons. */
	.top-bar-section li:not(.has-form) a:not(.button) {
		background: transparent;
	}
	/* Active link button. */
	.top-bar-section li:not(.has-form) a.active:not(.button) {
		background-color: rgba(241, 228, 216, 0.5); /* LIGHT BROWN 20% with transparency. */
	}
	/* Remove triangle for dropdown and remove extra padding right. */
	.top-bar-section .has-dropdown > a::after {
		border-left-style: none;
	}
	.top-bar-section .has-dropdown > a {
		padding-right: 15px !important;
	}
	/* BG colour and colour fo text for links. */
	.top-bar-section li:not(.has-form) a:not(.button):hover {
		background-color: rgb(241, 228, 216); /* LIGHT BROWN 20%. */
		color: rgb(189, 123, 62); /* LIGHT BROWN. */
	}
	/* Dropdown items. */
	/* Dropdown items, including their hover states. */
	.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
		background-color: rgba(241, 228, 216, 0.9); /* LIGHT BROWN 20% with transparency. */
		background: rgba(241, 228, 216, 0.9); /* Also required since set in foundation.css. */
		color: rgb(189, 123, 62); /* LIGHT BROWN. */
	}
	.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
		background-color: rgb(241, 228, 216); /* LIGHT BROWN 20%. */
		background: rgb(241, 228, 216); /* Also required since set in foundation.css. */
		color: rgb(189, 123, 62); /* LIGHT BROWN. */
	}
	
	/* Hide separators. */
	.top-bar-section > ul > .divider.hide-above-xxmedium {
		display: none !important; 
	}
	/* ------------ TOP BAR. ------------ */
	
	/* ------------ SECTIONS ETC. ------------ */
	/* Larger margins. */
	hr.green {
		margin: 0.8125em 0 1.875em 0;
	}
	/* More margin top and bottom on larger screens. */
	.primary, .complementary {
		margin-top: 40px;
		margin-bottom: 40px;
		padding-bottom: 20px;
	}
	/* More padding bottom. */
	.dark, .quicklinks {
		padding-bottom: 40px;
	}
	/* ------------ END SECTIONS ETC. ------------ */
	
	/* ------------ BORDERS LARGER. ------------ */
	/* Video. */
	#primaryContent img.videoImg, .services #primaryContent p.enquire, .missing #primaryContent p.enquire {
		margin-top: 40px;
	}
	#primaryContent img.noTopMarg {
		margin-top: 0px;
	}
	/* ------------ END BORDERS. ------------ */
	
	/* ------------ IMAGE HOVER TEXT. ------------ */
	/* Image hover text. Move text down from top. */
	.hoverText {
		padding-top: 14%;	
	}
	/* ------------ END IMAGE HOVER TEXT. ------------ */
}

/* Large screens: 1025px - 1440px (64.0625em - 90em)*/
@media only screen and (min-width: 64.0625em) { 
	/* ------------ FONT SIZES. ------------ */
	.top-bar-section ul li > a { 
		font-size: 1.5em; font-size: 1.5rem; 
	} /* equals 24px */
	
	/* Call text mobile no. */
	p.call { 
		font-size: 1.5em; font-size: 1.5rem; 
	} /* equals 24px */
	/* ------------ END FONT SIZES. ------------ */
	
	/* ------------ SIDE STUFF. ------------ */
	/* Different bg position on larger screens. And mor margins. */
	p.call {
		background-position: 0 5px;
		margin-bottom: 15px;
	}
	/* ------------ END SIDE STUFF. ------------ */
	
	/* ------------ IMAGE HOVER TEXT. ------------ */
	/* Image hover text. Move text down from top. */
	.hoverText {
		padding-top: 17%;
	}
	/* ------------ END IMAGE HOVER TEXT. ------------ */
	
	/* ------------ Sticky footer. ------------ */
	/* Wrapper for sticky footer less height for larger devices.  */
	#wrapper  {
		margin: 0 auto -240px; /* required for sticky footer. */
	}
	/* Same for footer. */
	footer, .push {
		height: 240px;
	}
	/* ------------ End Sticky footer. ------------ */
}

/* XLarge screens: 1441px - 1920px (90.0625em - 120em) */
@media only screen and (min-width: 90.0625em) { 

}

/* XXLarge screens: 1921px (120.0625em) */
@media only screen and (min-width: 120.0625em) { 

}


/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { 

} 
/* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 64.063em) and (max-width: 90em) { 

}
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width: 90.063em) and (max-width: 120em) { 

}


/* Landscape displays. */
@media screen and (orientation: landscape) {

}

/* Portrait displays. */
@media screen and (orientation: portrait) {

}

/* Top bar: Only other em size in width for top-bar. */
@media only screen and (min-width: 58.75em) {
	.top-bar {
	
	}
}

/* Override print style: Remove printed link name in brackets behind link. */
@media print {
  a[href]:after { 
  	content: ""; 
  }
}