/* ===================================================================================================================
   * Responsive styles in addition to base foundation.css (v.4.2.3)
   * Author: otti@ottimoto.com.au
   * Autor URL: http://www.ottimoto.com.au
   =================================================================================================================== */

/* ===================================================================================================================
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. */
/* ???CHANGE PATHS. */
* 
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(http://www.greenstarhotwater.com.au/boxsizing.htc);
}


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


/* Base
====================================================================================================================== */
 
/* Body: Override bg colour and/or text colour, if required. */
body 
{
	color: rgb(60, 60, 60); /* CHARCOAL. */
}

/* General horizontal rule. Change border colour and/or width and/or margin, if required.*/
hr 
{ 
	border: solid #ddd; /* CHANGE COLOUR OR DELETE */
	border-width: 1px 0 0; /* CHANGE WIDTH OR DELETE */
	margin: 1.25em 0 1.1875em; /* CHANGE MARGINS OR DELETE */
}

/* Move in ordered and unordered lists by 30px in general -> all of them on the website. 
Also reduce margin bottom as a general setting. Also reduce leading (line-height) for all lists. */
ul, ol
{
	margin-left: 30px;
	margin-bottom: 0.8em;
	/* line-height: 1.4; */
}


/* 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: 'SourceSansProRegular';
    src: url('../fonts/SourceSansPro-Regular-webfont.eot'); /* IE6–8 */
    src: url('../fonts/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SourceSansPro-Regular-webfont.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */
         url('../fonts/SourceSansPro-Regular-webfont.ttf') format('truetype'), /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */
         url('../fonts/SourceSansPro-Regular-webfont.svg#SourceSansProRegular') format('svg'); /* iOS devices */
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'SourceSansProSemibold';
    src: url('../fonts/SourceSansPro-Semibold-webfont.eot'); /* IE6–8 */
    src: url('../fonts/SourceSansPro-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SourceSansPro-Semibold-webfont.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */
         url('../fonts/SourceSansPro-Semibold-webfont.ttf') format('truetype'), /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */
         url('../fonts/SourceSansPro-Semibold-webfont.svg#SourceSansProRegular') format('svg'); /* iOS devices */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'eurostileregular';
    src: url('../fonts/eurostile-webfont.eot');
    src: url('../fonts/eurostile-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/eurostile-webfont.woff') format('woff'),
         url('../fonts/eurostile-webfont.ttf') format('truetype'),
         url('../fonts/eurostile-webfont.svg#eurostileregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Apply new font to certain definitions. Headings h1 through to h6. */

{
	font-family: 'eurostileregular', Helvetica, Arial, sans-serif;
	font-weight: normal;
    font-style: normal;
}
/* Override body fonts with SourceSansProRegular. Also apply this font to p (still displays correctly without but inspector shows not quite clear). */
body, p
{
	font-family: 'SourceSansProRegular', Helvetica, Arial, sans-serif;
}

.p_bold
{
	font-family: 'SourceSansProSemibold', Helvetica, Arial, sans-serif;
}
.p_boldOrange
{
	font-family: 'SourceSansProSemibold', Helvetica, Arial, sans-serif;
	color: rgb(218, 124, 0); /* ORANGE. */
}


/* Typography
====================================================================================================================== */

/* Standard paragraph. Change colour, if required. Paragraphs to have slight padding bottom.*/
p 
{
	margin-bottom: 0px;
	padding-bottom: 8px;
}

/* Text inside panel (home page) to be charcoal. */
.panel p
{
	color: rgb(60, 60, 60); /* CHARCOAL. */
}

/* Change all heading colours, if required. */
h1, h2, h3, h4, h5, h6, .panel h4, .panel h5
{
	color: rgb(218, 124, 0); /* ORANGE. */
	font-weight: normal;
}

/* 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 em's. 
We now override the em's with CSS3 unit: rem (relative to root to overcome the compounding problem for nested items). 
Fallback for not compatible browsers IE8 etc is basically the em's in foundatiion.css. Line-height as per foundation.css. 
Modern browsers are perfectly resizable now with rem's.  
Calculation: 34px : 16px = 2.125rem or 2.125rem*16px = 34px */
/* If size changes then also apply fallback in em's. */
p
{ font-size: 1rem; } /* 1rem = 16px. */
h1 
{ font-size: 2.125rem; } /* equals 34px - em in foundation.css */
h2 
{ font-size: 1.6875rem; } /* equals 27px - em in foundation.css */
h3 
{ font-size: 1.25em; font-size: 1.25rem; } /* equals 20px - em and rem required since new */
h4 
{ font-size: 1.4375rem; } /* equals 23px - em in foundation.css */
h5 
{ font-size: 1.125rem; } /* equals 18px - em in foundation.css */
h6 
{ font-size: 1rem; } /* equals 16px - em in foundation.css */

/* Mobile first: Smaller font for phone numbers. Later media query. */
.headCharTop p
{ font-size: 1.25em; font-size: 1.25rem; } /* equals 20px - em and rem required since new. */

/* Text inside navigation to be larger then original -> override. */
.top-bar-section ul li > a
{ font-size: 1.25em; font-size: 1.25rem; } /* equals 20px - em and rem required since new. */

/* Mobile first: Font size for sub navigation first small. Later 2x media queries for larger screen sizes. */
.sub-nav dd, .sub-nav dt
{ font-size: 0.875em; font-size: 0.875rem; } /* equals 14px - em and rem required since new. */

/* Text and list items inside green panel to be 1px smaller then normal font size. */
.greenPanel p, .greenPanel ul
{ font-size: 0.9375em; font-size: 0.9375rem; } /* equals 15px - em and rem required since new. */

/* Mobile first: Font inside green buttons to be larger (same size as nav and sub nav). Media queries later. */
button, .button
{ font-size: 1.25em; font-size: 1.25rem; } /* equals 20px - em and rem required since new. */

/* Text and list items inside aside (blue) to be 1px smaller then normal font size. */
aside .panel p, aside .panel ul
{ font-size: 0.9375em; font-size: 0.9375rem; } /* equals 15px - em and rem required since new. */

/* Mobile first: Text inside slider. */
.nivo-caption h3
{ font-size: 0.9375em; font-size: 0.9375rem;} /* equals 15px - em and rem required since new. */

/* etc.....!!!! */



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

/* LVHA. Change, if required from default in foundation.css. */
a 
{ 
	color: rgb(70, 120, 0); /* DARK GREEN. */
	text-decoration: underline;
	
	-webkit-transition: color 300ms ease-out;
	-moz-transition: color 300ms ease-out;
	transition: color 300ms ease-out;
}

/* Visited links to be dark green. */
a:visited 
{ 
	color: rgb(70, 120, 0); /* DARK GREEN. */
}

/* Hover links to be green. */
a:hover 
{ 
	color: rgb(150, 200, 0); /* GREEN. */
}

/* Active links to be green. */
a:active
{
	color: rgb(150, 200, 0); /* GREEN. */
}

/* Changed the phone numbers inside header to links on 27.11.2017. */
.headCharTop p#freeCall a, .headCharTop p#perthCall a, .headCharTop p#freeCall a:visited, .headCharTop p#perthCall a:visited {
	color: rgb(150, 200, 0); /*GREEN. */
	text-decoration: none;
}
.headCharTop p#freeCall a:hover, .headCharTop p#perthCall a:hover, .headCharTop p#freeCall a:active, .headCharTop p#perthCall a:active, .headCharTop p#freeCall a:focus, .headCharTop p#perthCall a:focus {
	color: rgb(255, 255, 255); /* WHITE. */
}




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

/* Standard definition for rounded corners. Class applied in HTML. */
.roundedCorners
{
	-webkit-border-radius: 5px; /* Safari3-4, iOS 1-3.2, Android ≤1.6 */
	-moz-border-radius: 5px; /* FF1-3.6 */
	-khtml-border-radius: 5px; /* Linux */
	border-radius: 5px; /* 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;	
}
/* Rounded corners except left top. Class applied in HTML. */
.roundedCornersNoLeftTop
{
	-webkit-border-bottom-left-radius: 5px; /* Safari3-4, iOS 1-3.2, Android ≤1.6 */
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px; /* FF1-3.6 */
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-topright: 5px;
	-khtml-border-bottom-left-radius: 5px; /* Linux */
	-khtml-border-bottom-right-radius: 5px;
	-khtml-border-top-right-radius: 5px;
	border-bottom-left-radius: 5px; /* Standard CSS3 syntax for Opera 10.5, IE9, Safari5, Chrome, FF4, iOS 4, Android 2.1+ */
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
	/* 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;	
}
/* Mobile first: NO rounded corners top only. Class applied in HTML. Later media query for above 768 to show rounded corners. 
(Required for side border to show behind rounded Corners)*/
.roundedCornersTopOnly
{
	-webkit-border-top-left-radius: 0px; /* Safari3-4, iOS 1-3.2, Android ≤1.6 */
	-webkit-border-top-right-radius: 0px;
	-moz-border-radius-topleft: 0px; /* FF1-3.6 */
	-moz-border-radius-topright: 0px;
	-khtml-border-top-left-radius: 0px; /* Linux */
	-khtml-border-top-right-radius: 0px;
	border-top-left-radius: 0px; /* Standard CSS3 syntax for Opera 10.5, IE9, Safari5, Chrome, FF4, iOS 4, Android 2.1+ */
	border-top-right-radius: 0px;
	/* 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;	
}

/* Rounded corners right only. Class applied in HTML. */
.roundedCornersRightOnly
{
	-webkit-border-top-right-radius: 5px; /* Safari3-4, iOS 1-3.2, Android ≤1.6 */
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px; /* FF1-3.6 */
	-moz-border-radius-bottomright: 5px;
	-khtml-border-top-right-radius: 5px; /* Linux */
	-khtml-border-bottom-right-radius: 5px;
	border-top-right-radius: 5px; /* Standard CSS3 syntax for Opera 10.5, IE9, Safari5, Chrome, FF4, iOS 4, Android 2.1+ */
	border-bottom-right-radius: 5px;
	/* 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 gradients. */
.boxGradient 
{
	/* CHANGE COLOURS */
	background-color: #444444; /* Fallback */
	/* Possibly here fallback gradient image as well */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#FFFFFF)); /* Safari4+, Chrome */
	background-image: -webkit-linear-gradient(top, #444444, #FFFFFF); /* Chrome 10+, Safari5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #444444, #FFFFFF); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #444444, #FFFFFF); /* IE10 */
	background-image:      -o-linear-gradient(top, #444444, #FFFFFF); /* Opera 11.10+ */
	background-image:         linear-gradient(to bottom, #444444, #FFFFFF);
}

.boxGradient-with-full-monty-and-stop
{
	color: #FFFFFF; /* Fallback (even it is defined for the link next) if js is turned of and text needs to be visible above black bg. */
	border-bottom: 2px #FFFFFF solid;
	/* Black - 50% black - black. With stop at 71%. */
	background: #000000; /* Fallback old browsers */
	background: -moz-linear-gradient(left,  #000000 0%, #999999 71%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(71%,#999999), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #000000 0%,#999999 71%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #000000 0%,#999999 71%,#000000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #000000 0%,#999999 71%,#000000 100%); /* IE10+ */
	background: linear-gradient(to right,  #000000 0%,#999999 71%,#000000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}



/* 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;
	padding: 5px;
	color: red;
	background-color: white;
}


/* Page Header
====================================================================================================================== */
/* Additional container to hold bg colour over full width for header. Set bg colour. 
Mobile first: Small padding top and bottom. Later media query. */
.headCharTop
{
	background: rgb(60, 60, 60); /* CHARCOAL. */
	color: rgb(150, 200, 0);
	padding-top: 15px;
	padding-bottom: 5px;
}

/* Mobile first: Center the logo. No float for phone numbers. Padding on top for distance to logo above only on first number. Align text center. Later media query. */
.headCharTop img
{
	text-align: center;
}
.headCharTop p#freeCall
{
	text-align: center;
	padding-top: 10px;
}
.headCharTop p#perthCall
{
	text-align: center;
}



/* Navigation
====================================================================================================================== */
/* Override contain to grid for navigation only with green colour. Also bg for top bar itself (between the link tabs). 
Also bg for unordered lists for links inside navigation. Also link button bg. */
.contain-to-grid.greenOutside, .top-bar, .top-bar-section ul, .top-bar-section li a:not(.button)
{
	background: rgb(150, 200, 0); /* GREEN. */
}

/* Vertical Navigation dividers (large screens), if used, to have charcoal borders -> set to 0px and therefore removed. */
.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"]
{
	border-left: solid 0px rgb(60, 60, 60); /* CHARCOAL. */
	border-right: solid 0px rgb(60, 60, 60); /* CHARCOAL. */
}
/* Horizontal Navigation dividers (mobile), to have charcoal borders. */
.top-bar-section .divider, .top-bar-section [role="separator"]
{
	border-bottom: solid 1px rgb(60, 60, 60); /* CHARCOAL. */
	border-top: solid 1px rgb(60, 60, 60); /* CHARCOAL. */
}

/* Text colour for links to be charcoal. Remove bold. Font size defined earlier. Remove underline. Add transition to react on hover. */
.top-bar-section ul li > a
{
	color: rgb(60, 60, 60); /* CHARCOAL. */
	font-weight: normal;
	text-decoration: none;
	
	-webkit-transition: background-color 300ms ease-out;
	-moz-transition: background-color 300ms ease-out;
	transition: background-color 300ms ease-out;
}

/* Main list item on hover -> override from black to dark green. Later media query for border top for large screens. */
.top-bar-section ul li.hover > a 
{
	background: rgb(70, 120, 0); /* DARK GREEN. */
}

/* Mobile first: Active pages. Change bg colour to dark green, text to white. Later media query for larger screens with border bottom. */
.top-bar-section ul li a.active 
{
	background: rgb(70, 120, 0); /* DARK GREEN. */
	color: rgb(255, 255, 255); /* WHITE. */
}

/* Mobile first Dropdown item: Change arrow colour to charcoal solid. */
.top-bar-section .has-dropdown > a::after 
{
	border-color: transparent transparent transparent rgba(60, 60, 60, 1);
}
/* Mobile first Dropdown item: Change the arrow on hover to white. */
.top-bar-section ul li.has-dropdown.hover > a:after
{
	border-color: transparent transparent transparent rgba(255, 255, 255, 1);
}
/* Mobile first Dropdown item: Also change arrow to white for active pages. */
.top-bar-section ul li.has-dropdown > a.active:after
{
	border-color: transparent transparent transparent rgba(255, 255, 255, 1);
}

/* Mobile first: Here might be some different padding for the opened menu on mobile devices. Later media query. */

/* Icon text on smaller devices not be white but charcoal. Also the three lines indicating a list. Remove link underline. */
.top-bar .toggle-topbar.menu-icon a
{
	color: rgb(60, 60, 60); /* CHARCOAL. */
	text-decoration: none;
}
.top-bar .toggle-topbar.menu-icon a span
{
	-webkit-box-shadow: 0 10px 0 1px rgb(60, 60, 60), 0 16px 0 1px rgb(60, 60, 60), 0 22px 0 1px rgb(60, 60, 60); /* Safari3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow: 0 10px 0 1px rgb(60, 60, 60), 0 16px 0 1px rgb(60, 60, 60), 0 22px 0 1px rgb(60, 60, 60); /* FF3.5 - 3.6 */
	box-shadow: 0 10px 0 1px rgb(60, 60, 60), 0 16px 0 1px rgb(60, 60, 60), 0 22px 0 1px rgb(60, 60, 60); /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

/* The top bar containing the menu list item not black but green, once expanded. */
.top-bar.expanded .title-area
{
	background: rgb(150, 200, 0); /* GREEN. */
}

/* Hide the divider (horizontal) below 940px width. No reverse for larger required for larger screens, since border set to 0px there. */
.divider.hide-below-940 {
	display: none !important;
}



/* Below Navigation
====================================================================================================================== */
/* Additional container over full width underneath navigation. Place small bg image with drop shadow as repeat. Set bg colour as fallback. Set height. */
.headChar
{
	height: 45px;
	background-image: url(../img/greenstar-drop-shadow-header.png);
	background-color: rgb(60, 60, 60); /* Fallback: CHARCOAL. */
	background-repeat: repeat-x;
}

/* Link text inside dropdown menu when main is hovered over in charcoal. */
.top-bar-section .dropdown li a
{
	color: rgb(60, 60, 60); /* CHARCOAL. */
}


/* Wrapper
====================================================================================================================== */
/* Mobile first: Wrapper wraps around primary content and aside.. Class since same style might be applied again to another wrapper further down. 
Sticky footer items. Bottom negative margin same height as footer. 
Also set light yellowish bg colour - same as behind main content - just in case site does not extend down to reach sticky footer. 
Later media query for larger screens with different height. */
.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 -630px; /* required for sticky footer. */
	
	background-color: rgb(248, 246, 237); /* 50% LIGHT. */
}
.home .wrapper
{
	margin: 0 auto -260px; /* required for sticky footer. */
}



/* PrimaryContent (left column) as section
====================================================================================================================== */
/* Additional container to wrap around main content to fill browser width. Set bg colour. */
.mainLight
{
	background-color: rgb(248, 246, 237); /* 50% LIGHT. */
}
/* For home page place bg image on top, since additional div does not exist. */
.home .mainLight
{
	background-color: rgb(248, 246, 237); /* 50% LIGHT. */
	background-image: url(../img/greenstar-drop-shadow-header_long.png);
	background-repeat: repeat-x;
	background-position: top;
}

/* Row with columns - might vary page or device dependant. */
#primaryContent 
{

}

/* Mobile first: All pages except Home paghe to move  for distance to header. */
.moveinWrapper
{
	margin-top: 15px;
}
.home .moveinWrapper
{
	margin-top: 0px;
}

/* Container to hold content on single pages (no tabs). White bg. Margins left and right back to zero (eliminate .row .row). Border around. 
Add margin top and bottom (override). */
.singlePageContent
{
	background-color: rgb(255, 255, 255);
	margin-left: 0px !important;
	margin-right: 0px !important;
	border: 1px solid rgb(204, 204, 204);
	margin-bottom: 30px !important;
}
/* Adjust left and right margin to be the same as per section container. Remove padding. Add padding top. Remove panel border and bg. */
.singlePageContent .panel
{
	margin-right: 20px;
	margin-left: 20px;
	padding: 0px;
	padding-top: 20px;
	border: 0px;
	background: none;
}

/* Mobile first: Image inside content. Padding around image with border. Margin bottom Rounded corners in html applied. 
Later media query to float image right of text with auto width. */
.contentImageSingle
{
	width: 100%;
	padding: 3px;
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(60, 60, 60); /* CHARCOAL. */
	margin-bottom: 20px;
}


/* Mobile first: Wrapper around section to move whole section slightly in -> only later as media query. */

/* Section headings to be orange. Also the active tabs. Remove underline on links. */
.section-container.auto > section > .title a, .section-container.auto > .section > .title a,
.section-container.auto > section.active > .title a, .section-container.auto > .section.active > .title a
{
	color: rgb(218, 124, 0); /* ORANGE. */
	text-decoration: none;
}

/* Apply transition to section titles. Add transition to react on hover. */
.section-container.auto > section > .title, .section-container.auto > .section > .title
{
	-webkit-transition: background-color 300ms ease-out;
	-moz-transition: background-color 300ms ease-out;
	transition: background-color 300ms ease-out; 
}

/* Replace bg colours for titles in all states: First Light grey for inactive tabs, secondly slightly darker for hover. */
.section-container.auto > section > .title, .section-container.auto > .section > .title
{
	background-color: rgb(245, 245, 245);
}
.section-container.auto > section > .title:hover, .section-container.auto > .section > .title:hover
{
	background-color: rgb(235, 235, 235);
}
/* Mobile first: Thirdly for active tab but mobile only. Later media query for larger screens. */
.section-container > section.active > .title, .section-container > .section.active > .title, 
.section-container.auto > section.active > .title, .section-container.auto > .section.active > .title
{
	background: rgb(225, 225, 225);
}

/* Override padding on top and bottom of the whole content container to achieve 20px all around. */
.section-container.auto > section .content
{
	padding-top: 20px;
	padding-bottom: 20px;
}
/* Class assigned to row for main content. Add 5px padding to existing 15px from column to add up to 20px on left and right side. 
Required to adjust to the Eurostile font in the tab above. Both columns inside that row are affected of course. */
.row.padAdjust
{
	padding-left: 5px;
	padding-right: 5px;
}

/* Mobile first: Image inside content. Padding around image with border. Margin bottom Rounded corners in html applied. 
Later media query to float image righ etc. */
.contentImage
{
	width: 100%;
	padding: 3px;
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(60, 60, 60); /* CHARCOAL. */
	margin-bottom: 20px;
}

/* Div container inside right column for Systems & Models on the right. Green background and padding around. Rounded corners applied again in html. 
Blue text and smaller font defined earlier. */
.greenPanel
{
	background-color: rgb(233, 243, 203);
	padding: 10px 20px 10px 20px;
	color: rgb(50, 104, 151); /* BLUE. */
}

/* Mobile first: Padding top and bottom above group of three quick link buttons. Later media query for less padding on larger screens. */
.quickLinks
{
	padding-top: 20px;
	padding-bottom: 20px;
}

/* Override panel styles for quick link buttons only. Remove bg and padding and add padding left and right. Also remove padding p. */
.quickLinks .panel
{
	background: none;
	padding: 0px 20px 0px 20px;
	border: none;
}
.quickLinks .panel p
{
	padding-bottom: 0px;
}


/* Buttons - general
====================================================================================================================== */
/* Three buttons. Remove margin bottom. Change to green bg and dark green border. Leave transition from foundation. Remove bold. 
Place tiny bg image with repeat to fake border left and not effecting the box-shadow. */
button, .button
{
	margin-bottom: 0em;
	background-color: rgb(150, 200, 0) !important; /* GREEN. */
	border-color: rgb(70, 120, 0); /* DARK GREEN. */
	font-weight: normal;
	
	background-image: url(../img/btn-bg.gif);
	background-repeat: repeat-y;
	
	color: rgb(60, 60, 60) !important; /* CHARCOAL. */
}

/* Change bg colour on hover to dark green. Position relative required for absolute positioned triangle/arrow. */
button:hover, button:focus, .button:hover, .button:focus
{
	background-color: rgb(70, 120, 0); /* DARK GREEN. */
	position: relative;
	color: rgb(255, 255, 255) !important; /* WHITE. */
}

button .triangle, .button .triangle
{
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 7px 0 7px 7px;
	border-color: transparent transparent transparent rgb(60, 60, 60); /* CHARCOAL. */
	position: absolute;
	margin-top: 2px;
	margin-left: 10px;
}
button:hover .triangle, .button:hover .triangle
{
	border-color: transparent transparent transparent rgb(255, 255, 255); /* WHITE. */
}



/* ComplimentaryContent - (bottom) as aside
====================================================================================================================== */
/* Additional container to wrap around secondary content aside to fill browser width. Set bg colour as fallback and repeat bg image. 
Top border and bottom border. Allow for a bit of padding at the bottom. */
.asideWater
{
	background-color: rgb(235, 243, 255); /* LIGHT BLUE as fallback and for smaller devices. */
	border-top: 3px solid rgb(232, 230, 225);
	border-bottom: 3px solid rgb(232, 230, 225);
	background-image: url(../img/water-drops-pattern_small.jpg);
	background-repeat: repeat;
	padding-bottom: 15px;
}

/* Row with columns - might vary page or device dependant. */
aside 
{

}

/* Smaller font for p inside aside through foundation.css, but remove italic since font-face fonts are used. */
aside p 
{
	font-style: normal;
}

/* Heading inside secondary content centred. Padding on heading above and below. */
aside h3
{
	text-align: center;
	padding-top: 10px;
	padding-bottom: 5px;
}

/* Override panel styles for three panels inside aside only. Remove bg and padding completely. */
aside .panel
{
	background: none;
	padding: 0px 0px 0px 0px;
	border: none;
}
/* Also remove padding on para. Colour to be blue. Smaller font defined earlier. */
aside .panel p, aside .panel ul
{
	color: rgb(50, 104, 151); /* BLUE. */
	padding-bottom: 0px;
}


/* 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; 
}


/* Google Map
====================================================================================================================== */
/* Mobile first: Use container to wrap Google Map inside. -> later media query with margin left for same position as quick link above.  */
#mapContainer
{
	padding-right: 0px;
	margin-bottom: 20px;
}

/* Class inside div for google map to position map correctly. 
Overflow hidden to avoid text in map showing up left of map. */
#map-canvas
{
	margin-top: 15px;
	margin-left: 0px;
	width: 100%;
	height: 300px;
	overflow: hidden;
}
#map-canvas img
{
	max-width: none; /* Fixes wrong display of zoom control etc. */
}
/* 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;
}


/* Nivo slider - Image/Content slider
====================================================================================================================== */
.nivoSlider
{
	border: 1px solid rgb(60, 60, 60); /* CHARCOAL. */
}

.nivoSlider {
    position:relative;
    background:url(../img/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}

/* No format text inside html caption. */
.nivo-caption h3, .nivo-caption p
{
	font-family: 'SourceSansProRegular', Helvetica, Arial, sans-serif, Courier; /* DELETE COURIER AFTER TESTS!!! */
	color: rgb(255, 255, 255);
}



/* 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;
}


/* Forms
====================================================================================================================== */
/* Always id assigned in front to differentiate between dropdown form in top-bar. */
/* Label text charcoal. Use height of input box as line-height. Indent left for infield text (same as text when typed in. */
#RegisterUserForm label
{
	color: rgb(60, 60, 60); /* CHARCOAL. */
	cursor: default;
	line-height: 2.3125em;
	padding-left: 10px;
}

/* Remove boldness for fieldset legend. Also charcoal. */
#RegisterUserForm legend
{
	font-weight: normal;
	color: rgb(60, 60, 60); /* CHARCOAL. */
}

/* Background colour for input fields. */
#RegisterUserForm input, #RegisterUserForm textarea
{
	background-color: rgb(248, 246, 237); /* 50% LIGHT. */
	border: 1px solid rgb(60, 60, 60);
}

/* Textarea taller then other fields. */
#RegisterUserForm textarea
{
	height: 6em;
}

/* Make error message red. */
.pRed
{
	color: rgb(255, 0, 0); /* RED. */
}


/* Footer
====================================================================================================================== */
/* Wrapper around footer with class contain-to-grid allows for full width in viewport. 
Also contains content to grid width. Same colour as actual footer inside. */
.contain-to-grid.foot
{
	background: rgb(60, 60, 60); /* CHARCOAL. */
}
/* White text. Move content down with padding. 
Hopefully the set height for sticky footer is not required, so the three columns can wrap for smaller layouts. ?????Test?????*/
footer
{
	color: #FFFFFF;
	padding-top: 15px;
}
/* Mobile first: Later different height for larger screens. */
.contain-to-grid.foot, .push
{
	/* clear: both; not required since no multi column. */
	height: 670px;
}
.home .contain-to-grid.foot, .home .push
{
	height: 260px;
}

/* Links inside footer and visited links inside footer to be white. */
footer a, footer a:visited 
{
	/* color: rgb(255, 255, 255);  WHITE. */
}
/* Hover and active links inside footer to be orange. */
footer a:hover, footer a:active
{ 
	/* color: rgb(215, 215, 215);  INTERMEDIATE GREY. */
}

/* First all column inside footer to have more indent from left and right as well as from the top. */
footer .col1, footer .col2
{
	padding-top: 10px;
	padding-left: 45px;
	padding-right: 45px;
}


/* 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
====================================================================================================================== */
/* No Media Queries for required for screen sizes below 768px = 48em, due to mobile first. 
This means all declarations above are for screens below 768px (iPads, iPhones etc). */
/* 
480px = 30em
768px = 48em
1280px = 80em
1440px = 90em
*/

/* Small Displays: 480px - 768px. Styles for screens that are at least 480px = 30em.  */
@media only screen and (min-width: 30em) {
	/* ------------ Font sizes. ------------ */
	/* Text inside slider. */
	.nivo-caption h3 { 
		font-size: 1.0625em;
		font-size: 1.0625rem;
	} /* equals 17px - em and rem required since new. */
	.nivo-caption p { 
		font-size: 0.9375em; 
		font-size: 0.9375rem; 
		line-height: 1;
	} /* equals 15px - em and rem required since new. Also less line-height. */
	.nivo-caption p.smallCaption { 
		font-size: 0.8125em; 
		font-size: 0.8125rem; 
		padding-top: 5px;
	} /* equals 13px - em and rem required since new. Also padding top. */
	
	/* Larger font size for sub nav. */
	.sub-nav dd, .sub-nav dt { 
		font-size: 1.0625em; 
		font-size: 1.0625rem; 
	} /* equals 16px - em and rem required since new. */
	
	/* Then increase padding left and right once landscape mobiles or larger. */
	.sub-nav dt.active a, .sub-nav dd.active a, .sub-nav dt a, .sub-nav dd a {
		padding-left: 1em;
		padding-right: 1em;
	}
	/* ------------ End Font sizes. ------------ */
	
	/* ------------ Slider caption ------------ */
	.nivo-caption 
	{
		padding: 15px 5px 25px 15px; 
	}
	/* ------------ End Slider caption ------------ */
	
	/* ------------ Content images. ------------ */
	/* Set image width to auto and float it left. It will now sit on the left side and text will wrap below. 
	Add margin left for distance to text. Margin right 100% to avoid text coming up. Smaller margin bottom. */
	.contentImage {
		width: auto;
		float: left;
		margin-left: 0px;
		margin-bottom: 10px;
		margin-right: 100%;
	}
	/* ------------ End Content images. ------------ */
	
	/* ------------ Header phone numbers ------------ */
	/* Change at this size to flota them next to each other (after centered for smaller). Also require padding top on right one. */
	.headCharTop p#freeCall {
		float: left;
	}
	.headCharTop p#perthCall {
		padding-top: 10px;
		float: right;
	}
	/* ------------ End Header phone numbers ------------ */
	
}

/* Medium Displays: 768px - 1279px. Styles for screens that are at least 768px = 48em.  */
@media only screen and (min-width: 48em) {
	/* ------------ Headings bigger on larger screens above tablet/mobile size. ------------ */
	h1 {
		font-size: 2.75em;
		font-size: 2.75rem; 
	} /* equals 44px - em in foundation.css */
	h2 {
		font-size: 2.3125em;
		font-size: 2.3125rem; 
	} /* equals 37px - em in foundation.css */
	h3 {
		font-size: 1.25em;
		font-size: 1.25rem;  
	} /* equals 20px - em in foundation.css */
	h4 {
		font-size: 1.125em;
		font-size: 1.125rem; 
	} /* equals 18px - em in foundation.css */
	/* ------------ End Headings bigger on larger screens above tablet/mobile size. ------------ */	
	
	/* ------------ Font sizes. ------------ */
	/* Text inside slider. */
	.nivo-caption h3 { 
		font-size: 1.5em;
		font-size: 1.5rem;
	} /* equals 24px - em and rem required since new. */
	.nivo-caption p { 
		font-size: 1.1875em; 
		font-size: 1.1875rem; 
		line-height: 1.2;
	} /* equals 19px - em and rem required since new. Also less line-height. */
	.nivo-caption p.smallCaption { 
		font-size: 1em; 
		font-size: 1rem; 
		padding-top: 7px;
	} /* equals 16px - em and rem required since new. Also padding top. */
	
	/* Smaller font first between 768 and next size up. */
	button, .button { 
		font-size: 1em; 
		font-size: 1rem; 
	} /* equals 16px - em and rem required since new. */
	/* ------------ End Font sizes. ------------ */
	
	/* ------------ Touch devices only. .touch class added to the body element by Modernizr, if applicable ------------ */

	/* ------------ End Touch devices only. ------------ */
	
	/* ------------ Header image and phone numbers ------------ */
	/* Larger padding top and bottom for logo and phone numbers inside header. Re-align the logo left with padding. 
	Phone numbers right aligned with padding right. Larger font. Remove float for both numbers and remove padding (added for mobile earlier). */
	.headCharTop {
		padding-top: 36px;
		padding-bottom: 36px;
	}
	.headCharTop img {
		text-align: left;
		padding-left: 15px;
	}
	.headCharTop p {
		text-align: right;
		padding-right: 15px;
		font-size: 1.5625em; font-size: 1.5625rem; /* equals 25px. */
	}
	.headCharTop p#freeCall {
		float: none;
		padding-top: 0px;
	}
	.headCharTop p#perthCall {
		float: none;
		padding-top: 0px;
	}	
	/* ------------ End Header image and phone numbers ------------ */
	
	/* ------------ Slider caption ------------ */
	.nivo-caption
	{
		padding: 30px 10px 25px 50px;
	}
	/* ------------ End Slider caption ------------ */
	
	/* ------------ Main wrapper -> sticky footer ------------ */
	.wrapper {
		margin: 0 auto -380px; /* required for sticky footer. */
	}
	/* ------------ End Main wrapper ------------ */
	
	/* ------------ Wrapper to move content in ------------ */
	/* Wrapper around section to move whole section slightly in -> only larger screens. Also more margin top. */
	.moveinWrapper {
		padding-left: 25px;
		padding-right: 25px;
		margin-top: 35px;
	}
	.home .moveinWrapper {
		margin-top: 0px;
	}
	/* ------------ End Wrapper to move content in ------------ */
	
	/* ------------ Rounded corners top only ------------ */
	/* For above 768 show rounded corners on section content - assigned in HTML. (Required for side border to show behind rounded Corners) */
	.roundedCornersTopOnly {
		-webkit-border-top-left-radius: 5px; /* Safari3-4, iOS 1-3.2, Android ≤1.6 */
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius-topleft: 5px; /* FF1-3.6 */
		-moz-border-radius-topright: 5px;
		-khtml-border-top-left-radius: 5px; /* Linux */
		-khtml-border-top-right-radius: 5px;
		border-top-left-radius: 5px; /* Standard CSS3 syntax for Opera 10.5, IE9, Safari5, Chrome, FF4, iOS 4, Android 2.1+ */
		border-top-right-radius: 5px;
		/* 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;	
	}
	/* ------------ End Rounded corners top only ------------ */
	
	/* ------------ Tabs active ------------ */
	/* Change the active tabs to white bg when tabs. Earlier defined with grey bg on mobile. */
	.section-container > section.active > .title, .section-container > .section.active > .title, 
	.section-container.auto > section.active > .title, .section-container.auto > .section.active > .title {
		background: rgb(255, 255, 255);
	}
	/* ------------ End Tabs active ------------ */	
	
	/* ------------ Group of quick link buttons.  ------------ */
	/* Screens above 768 to have less padding top and bottom above group of three quick link buttons, compared to mobile. Larger screens different again. */
	.quickLinks {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	/* ------------ End Group of quick link buttons.  ------------ */
	
	/* ------------ Footer -> sticky footer  ------------ */
	.contain-to-grid.foot, .push {
		height: 420px;
	}
	/* ------------ End Footer -> sticky footer  ------------ */
	
}

/* Larger Displays: 940px - 1280px */
@media only screen and (min-width: 58.75em) {
	/* ------------ Font sizes. ------------ */
	/* Text inside slider. */
	.nivo-caption h3 { 
		font-size: 1.75em;
		font-size: 1.75rem;
	} /* equals 28px - em and rem required since new. */
	.nivo-caption p { 
		font-size: 1.4375em; 
		font-size: 1.4375rem; 
		line-height: 1.2;
	} /* equals 23px - em and rem required since new. Also less line-height. */
	.nivo-caption p.smallCaption { 
		font-size: 1em; 
		font-size: 1rem; 
		padding-top: 7px;
	} /* equals 16px - em and rem required since new. Also padding top. */
	
	/* Slightly larger font first between 940 and next size up. */
	button, .button { 
		font-size: 1.125em; 
		font-size: 1.125rem; 
	} /* equals 18px - em and rem required since new. */
	/* ------------ End Font sizes. ------------ */
	
	/* ------------ Headings bigger on larger screens above tablet/mobile size. ------------ */
	h3 {
		font-size: 1.5em;
		font-size: 1.5rem;  
	} /* equals 24px - em in foundation.css */
	h4 {
		font-size: 1.25em;
		font-size: 1.25rem;  
	} /* equals 20px - em in foundation.css */
	/* ------------ End Headings bigger on larger screens above tablet/mobile size. ------------ */	
	
	/* ------------ Navigation ------------ */
	/* Active pages. Less line height to allow for border bottom. */
	.top-bar-section ul li a.active {
		line-height: 42px;
		border-bottom: 3px solid rgb(150, 200, 0); /* GREEN. */
	}
	/* Main list item on hover -> reduce line-height to allow for border bottom. */
	.top-bar-section ul li.hover > a {
		line-height: 42px;
		border-bottom: 3px solid rgb(150, 200, 0); /* GREEN. */
	}
	/* Dropdown item (large only): Change arrow colour from 50% transparent white to charcoal solid. */
	.top-bar-section .has-dropdown > a:after {
		border-color: rgba(60, 60, 60, 1) transparent transparent transparent; /* CHARCOAL. */
	}
	/* Dropdown item (large only): Change the arrow on hover to white. */
	.top-bar-section ul li.has-dropdown.hover > a:after {
		border-color: rgba(255, 255, 255, 1) transparent transparent transparent; /* White. */
	}
	/* Dropdown item (large only): Also change arrow to white for active pages. */
	.top-bar-section ul li.has-dropdown > a.active:after {
		border-color: rgba(255, 255, 255, 1) transparent transparent transparent; /* White. */
	}
	/* Then divider lines inside the dropdown menu not visible on larger screens. */
	.top-bar-section ul li.has-dropdown ul.dropdown .divider
	{
		display: none !important;
	}
	/* Override the padding of the links inside navigation from 15px left and right to 25px. */
	.top-bar-section li a:not(.button) {
		padding: 0 25px;
	}
	/* Then adjust also padding for dropdown. */
	.top-bar-section .dropdown li a {
		padding: 10px 15px;
	}
	/* Then ensure the dropdown items (on hover of the main item) are set to the old line-height and the border on top is removed again. */
	.top-bar-section .dropdown li.hover a {
		line-height: 20px;
		border-bottom: 0px;
	}
	/* ------------ End Navigation ------------ */
	
	/* ------------ Content images. ------------ */
	/* Set image width to float it right and width to only 50%. It will now sit on the right side of the content (smaller as it is but we need it larger for smaller screens after breakpoint)
	and text will wrap left and below. Add margin left for distance to text. Smaller margin bottom. */
	.contentImage {
		width: 50%;
		float: right;
		margin-left: 30px;
		margin-bottom: 10px;
		margin-right: 0;
	}
	/* ------------ End Content images. ------------ */
	
	/* ------------Section visibility ------------ */
	/* Class to show assigned div only below 940px. */
	
	/* ------------ End Section visibility ------------ */
}

/* Large Displays: 1280px - 1440px */
@media only screen and (min-width: 80em) {
	/* ------------ Font sizes. ------------ */
	/* Text inside slider. */
	.nivo-caption h3 { 
		font-size: 2.5em;
		font-size: 2.5rem;
	} /* equals 40px - em and rem required since new. */
	.nivo-caption p { 
		font-size: 1.875em; 
		font-size: 1.875rem; 
		line-height: 1.3;
	} /* equals 30px - em and rem required since new. Also less line-height. */
	.nivo-caption p.smallCaption { 
		font-size: 1.25em; 
		font-size: 1.25rem; 
		padding-top: 10px;
	} /* equals 20px - em and rem required since new. Also padding top. */
	
	/* ------------ Headings bigger on larger screens above tablet/mobile size. ------------ */
	h3 {
		font-size: 1.625em;
		font-size: 1.625rem;  
	} /* equals 26px - em in foundation.css */
	h4 {
		font-size: 1.4375em;
		font-size: 1.4375rem;  
	} /* equals 23px - em in foundation.css */
	/* ------------ End Headings bigger on larger screens above tablet/mobile size. ------------ */	
	
	/* Larger font above 1280. */
	button, .button { 
		font-size: 1.25em; 
		font-size: 1.25rem; 
	} /* equals 20px - em and rem required since new. */
	/* ------------ End Font sizes. ------------ */
	
	/* ------------ Group of quick link buttons.  ------------ */
	/* Screens above 1280 to have same padding top and bottom above group of three quick link buttons, as mobile mobile. */
	.quickLinks {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	/* ------------ End Group of quick link buttons.  ------------ */
}

/* X-Large Displays: 1440px and up */
@media only screen and (min-width: 90em) {

}

/* 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 {
	
	}
}


/* Only for less than 480px. */
@media only screen and (max-width: 30em) {
	/* Hide part of the caption on devices smaller than 480px. */
	.hide-less-480 {
		display: none !important; 
	}
}

/* Override print style: Hack to avoid printed pages are blank. Remove printed link name in brackets behind link. */
@media print {
  div:not(.reveal-modal) {
    display: inherit !important;
  }
  a[href]:after { 
  	content: ""; 
  }
}