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

	/* Colours used: */
	/* background-color: rgb(22, 22, 22);  BLACK. */
	/* background-color: rgb(181, 68, 16);  ORANGE. */
	/* background-color: rgb(130, 130, 130);  GREY. */
	/* background-color: rgb(74, 133, 201);  BLUE. */
	/* background-color: rgb(157, 157, 157);  LIGHT GREY. */
	/* background-color: rgb(224, 202, 60);  YELLOW. */
	/* background-color: rgb(255, 225, 40);  BRIGHT YELLOW. */
	
	/* background-color: rgb(235, 235, 235);  LIGHT GREY - 20%. */
	/* background-color: rgb(55, 93, 137);  DARK BLUE. */


/* ===================================================================================================================
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.lmgspl.com.au/js/vendor/boxsizing.htc);
}



/* Base
====================================================================================================================== */
/* General horizontal rule. Change border colour and/or width and/or margin, if required. */
hr
{ 
	/* Not required. */
}



/* 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;
}
@font-face 
{
    font-family: 'RobotoItalic';
    src: url('../fonts/Roboto-Italic-webfont.eot'); /* IE6–8 */
    src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Italic-webfont.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Safari5.1+ */
         url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'), /* Safari3—5, Chrome4+, FF3.5, Opera 10+ */
         url('../fonts/Roboto-Italic-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. */
p, ul, .top-bar-section ul li > a, form
{
	font-family: 'RobotoRegular', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: normal;
}

h1, h2, h3, h4, h5, h6, p.salesMessage, a#scrollup, .sendEnquiry, .button, .mix .projectDesc h4, .mix p.detailedDesc, .mix projectDetails li, .pMedium
{
	font-family: 'RobotoMedium', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: normal;
}
.mix p.countryItalic
{
	font-family: 'RobotoItalic', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: normal;
}


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

/* Standard paragraph to be black. */
p 
{
		/* Not required. */
}

/* Headings all to be blue - changed to other colours if required per section later. */
h1, h2, h3, h4, h5, h6
{
		/* Not required. */
}

/* 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 
{ font-size: 0.9375em; font-size: 0.9375rem; } /* 1rem = 15px. */
h1
{ font-size: 1.875em; font-size: 1.875rem; text-transform: uppercase; } /* equals 30px */
.zero h1
{ font-size: 1.375em; font-size: 1.375rem; text-transform: none; line-height: normal; margin: 0;} /* equals 22px */
h2 
{ font-size: 1em; font-size: 1rem; text-transform: uppercase; } /* equals 16px */
.zero h2
{ font-size: 1.25em; font-size: 1.25rem; text-transform: none; } /* equals 20px */
h3 
{ font-size: 1em; font-size: 1rem; } /* equals 16px */
.zero h3
{ font-size: 1em; font-size: 1rem; } /* equals 16px */

h4 
{ font-size: 1em; font-size: 1rem; } /* 1rem = 16px. */
h5 
{ font-size: 1em; font-size: 1rem; } /* 1rem = 16px. */
h6 
{ font-size: 1em; font-size: 1rem; } /* 1rem = 16px. */

/* Mobile first: For most fonts there are different sizes declared for larger screen with media queries later. */
/* Links inside mobile navigation. */
.top-bar-section ul li > a
{ font-size: 1.25em; font-size: 1.25rem; } /* equals 20px */

/* Scroll down text. */
a#scrollDown
{ font-size: 1.25em; font-size: 1.25rem; text-transform: uppercase; } /* equals 20px */

/* Sales messages in orange boxes. */
p.salesMessage
{ font-size: 1.125em; font-size: 1.125rem; } /* equals 18px */

/* Message next to email form. */
.sendEnquiry
{ font-size: 1.25em; font-size: 1.25rem; } /* equals 20px */

/* Copyright line inside footer. */
p.copyright
{ font-size: 0.8125em; font-size: 0.8125rem; } /* equals 13px */

/* Scroll to top. */
a#scrollup
{ font-size: 1em; font-size: 1rem; text-transform: uppercase; } /* equals 16px */

/* Fonts inside project boxes. */
.mix .projectDesc h4
{ font-size: 0.8125em; font-size: 0.8125rem; } /* equals 13px */
.mix p.countryItalic, .mix p.detailedDesc, .mix .projectDetails li
{ font-size: 0.6875em; font-size: 0.6875rem; } /* equals 11px */

/* Required text in form. */
.reqText
{ font-size: 0.8125em; font-size: 0.8125rem; } /* equals 13px */




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

/* LVHA. Link text colour black. Bg colour to be bright yellow and text to be underlined. */
a 
{ 
	color: rgb(22, 22, 22); /* BLACK. */
	background-color: rgb(255, 225, 40); /* BRIGHT YELLOW. */
	text-decoration: underline; 
}

/* Visited links to be the same as standard link. */
a:visited 
{ 
	color: rgb(22, 22, 22); /* BLACK. */
	background-color: rgb(255, 225, 40); /* BRIGHT YELLOW. */
	text-decoration: underline; 
}

/* Hover and active links to change from bright yellow to yellow. Ensure text stays black. */
a:hover, a:active, a:focus
{ 
	color: rgb(22, 22, 22); /* BLACK. */
	background-color: rgb(224, 202, 60); /* YELLOW. */
}



/* 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: 10px;
	color: red;
	background-color: white;
	text-align: center;
	margin-bottom: 0;
	opacity: 0.8;
	border: 1px solid red;
}


/* Navigation
====================================================================================================================== */
/* MAIN NAV = TOP BAR. */
/* GENERAL. */
/* Remove underlining for links inside top bar. */
.top-bar li a
{
	text-decoration: none;
}

/* HEIGHT. */
/* Change height of top bar from 45px to 120px for all screen sizes. */
.top-bar
{
	height: 160px;
}
/* Also change the height of the name inside the top bar for smaller screens (pushes the navigation down where it should be). */
.top-bar .name
{
	height: 160px;
}

/* LOGO LEFT INSIDE TOP-BAR. */
/* Remove margins and padding for logo h1. Then add appropriate padding left and top. */
.top-bar .name h1
{
	margin: 0;
	padding: 0;
	padding-top: 17px;
	padding-left: 30px;
}
/* First declarations are defined as if text was used. Then text moved outside viewport and logo positioned with set width height. */
.top-bar .name h1 a
{
	display: block;
	text-indent: -999999px;
	background-image: url(../img/l&mgspl-logo.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	width: 126px;
	height: 126px;
	background-color: transparent; /* Remove bg colour. */
}

/* Mobile first: No top padding for navigation ul -> later media query to move it down above breakpoint. */
ul.right 
{
	padding-top: 0px;
}

/* Make link text in top-bar blue. */
.top-bar-section ul li > a
{
	color: rgb(74, 133, 201); /* BLUE. */
}

/* Change bg colour to white for full width bar and expanded top bar (2x). Transition into fixed only applied into next =declaration otherwise jump on mobiles. */
.contain-to-grid, .top-bar.expanded .title-area, .top-bar.expanded 
{ 
	background: rgba(255, 255, 255, 1); /* WHITE. */
}
/* Top-bar itself with white bg (transparent not required due to no fixed top-bar). */
.top-bar
{
	background: rgba(255, 255, 255, 1); /* WHITE. */
}

/* Change bg for menu buttons also to be white (transparent not required due to no fixed top-bar). */
.top-bar-section ul, .top-bar-section ul li, .top-bar-section ul li>a, .top-bar-section li:not(.has-form) a:not(.button)
{
	background: rgba(255, 255, 255, 1); /* WHITE. */
}

/* ------------ Colours and hover styles for main menu and dropdown items. ------------ */
/* Change bg colour for hover buttons to be 70% red (none active buttons). Also white text.  */
.top-bar-section li:not(.has-form) a:not(.button):hover
{
	background: rgb(255, 225, 40); /*  BRIGHT YELLOW. */
	color: rgb(74, 133, 201); /* BLUE. */
}
/* Also declare the active and focus state with the same bg colour but with transparency. */
.top-bar-section li:not(.has-form) a:not(.button):active, .top-bar-section li:not(.has-form) a:not(.button):focus
{
	background: rgba(255, 225, 40,0.3); /*  BRIGHT YELLOW - transparency. */
	color: rgb(74, 133, 201); /* BLUE. */
}
/* ------------ End colours and hover styles. ------------ */

/* Divider colour change. */
.top-bar-section .divider, .top-bar-section [role="separator"]
{
	border-top: 1px solid rgb(74, 133, 201); /* BLUE. */
}

/* Make the word "Menu" in blue. */
.top-bar .toggle-topbar.menu-icon a
{
	color: rgb(22, 22, 22); /* BLACK. */
}
/* Font not in bold. */
.top-bar .toggle-topbar a
{
	font-weight: normal;
}
/* Hamburger lines in blacke. */
.top-bar .toggle-topbar.menu-icon a span::after
{
	box-shadow: 0 0 0 1px rgb(22, 22, 22), 0 7px 0 1px rgb(22, 22, 22), 0 14px 0 1px rgb(22, 22, 22);
}



/* Page Header
====================================================================================================================== */
#header 
{
	/* Not required. */
}


/* PrimaryContent (left column) as section
====================================================================================================================== */
/* Mobile first: All sections to have top and bottom padding. -> later media query with larger padding. */
section
{
	padding-top: 20px;
	padding-bottom: 20px;
}
/* Then remove it from navigation section. */
section.top-bar-section
{
	padding-top: 0px;
	padding-bottom: 0px;
}
/* Less padding for sales messages (orange sections). No media query -> for all devices the same. */
section.third, section.fifth
{
	padding-top: 25px;
	padding-bottom: 25px;
}

/* Mobile first: Main image container on top with fixed height. -> later media query for different heights and also smaller (responsive) images. 
Background-size: cover and centering gets the desired effect. */
section.zero
{
	height: 180px;
	background-color: rgba(157, 157, 157, 0.5); /* LIGHT GREY - transparency as fallback. */
	background-image: url(../img/l&lmgspl-home-72-640.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	
	position: relative;
	
	padding-top: 15px;
	padding-bottom: 0;
}

/* SCROLL DOWN BUTTON ON HOME SECTION. */
/* z-index to have it sitting higher then bg slider. Position absolute inside relative container. set width and height.
To have it horizontally centered margin-left of half of the width. Then also text centered inside the fixed width div. */
a#scrollDown
{
	z-index: 2;
	position: absolute;
	left: 50%;
	width: 260px;
	height: 50px;
	margin-left: -130px;
	bottom: 3%;
	text-align: center;
	background-color: transparent;
	text-decoration: none;
	
}
/* Remove the bottom margin for this p. */
a#scrollDown p
{
	margin-bottom: 0;
}
/* The link itself consists of the text in html and the arrow graphic here (full width of link). Also apply hover state. */
a#scrollDown p#downArrow, a:visited#scrollDown p#downArrow
{
	width: 320px;
	height: 23px;
	background-image: url(../img/down-wider.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
a:hover#scrollDown p#downArrow, a:active#scrollDown p#downArrow, a:focus#scrollDown p#downArrow
{
	background-position: 0 -25px;
}
a:hover#scrollDown p, a:active#scrollDown p, a:focus#scrollDown p
{
	color: rgb(255, 225, 40); /* BRIGHT YELLOW. */
}


/* Section containers for sales messages with orange background. */
.third, .fifth
{
	background-color: rgb(181, 68, 16); /* ORANGE. */
}
.seventh
{
	background-color: rgb(130, 130, 130); /* GREY. */
}

/* Text and heading colours different in various sections. */
.zero h1, .zero h2, .zero h3, .zero p, .third p, .fifth p, .fifth ul, .seventh h1, .seventh p, footer p
{
	color: rgb(255, 255, 255); /* WHITE. */
}



/* Buttons. 
====================================================================================================================== */

/* Overwrite foundation button styles to suit. Remove padding top and bottom and set height instead. Also line-height to center. 
Bright yellow background colour and black text as standard link. Transition. */
.button 
{
	padding-top: 0;
	padding-bottom: 0;
	height: 44px;
	line-height: 44px;
	background-color: rgb(255, 225, 40); /* BRIGHT YELLOW. */
	color: rgb(22, 22, 22); /* BLACK. */
	
	
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

/* Larger Button to send enquiry (contact form). */
.sendEnquiry
{
	height: 64px;
	line-height: 64px;
}

/* Specific class additionally added to the download button to differentiate to other buttons. */
.btn-download
{
	background-image: url(../img/button-download.png);
	background-repeat: no-repeat;
	background-position: right top;
	padding-left: 32px; /* 32px + 20px. */
	padding-right: 76px; /* 32px + 44px + 20px. */
	width: 225px;
}
/* Mobile first: Longer text requires longer button but carefull to avoid to much width on mobiles. -> later more padding left and right. */
.btn-download-long
{
	padding-left: 42px; /* 32px + 10px. */
	padding-right: 86px; /* 32px + 44px + 10px. */
	width: 280px;
}
/* Remove margin bottom of second button row. */
p .btn-download-long
{
	margin-bottom: 0;
}

/* Visited button same as normal button. */
.button:visited
{
	background-color: rgb(255, 225, 40); /* BRIGHT YELLOW. */
	color: rgb(22, 22, 22); /* BLACK. */
}
/* Hovered, in focus and active buttons with yellow bg. */
.button:hover, .button:focus, .button:active 
{
	color: rgb(22, 22, 22); /* BLACK. */
	background-color: rgb(224, 202, 60); /* YELLOW. */
}

/* Remove too much space below buttons. */
[class*="block-grid-"]
{
	margin-bottom: 0;
}
[class*="block-grid-"] > li
{	
	padding-bottom: 0;
}
[class*="block-grid-"] > li > p
{
	margin-bottom: 0;
}


/* MIXITUP FILTER. */
/* Filedset for controls. */
#Filters fieldset 
{
	vertical-align: top;
	margin: 0;
	padding: 0;
	border-width: 0px;
}
/* Label: Overwrite what'sin foundation. */
label
{
	color: rgb(22, 22, 22); /* BLACK. */
	text-align: left;
}
/* Distance above controls. */
#Filters
{
	margin-top: 10px;
}

/* Hide all projects first. */
#filterProjects .mix
{
	display: none;
}

/* All text inside projects boxes in white. Zero down margin and padding for all content first. */
#filterProjects h4, #filterProjects p, .projectDetails li
{
	color: rgb(255, 255, 255); /* WHITE. */
	padding: 0;
	margin: 0;
}

/* Distance between project boxes vertically. */
.mix
{
	/* margin-bottom: 10px; */
}

/* Top of project box to contain the title, country (italics) and description. */
.projectDesc
{
	background-color: rgb(74, 133, 201); /* BLUE. */
	padding: 7px;
	border-bottom: 1px solid rgb(255, 255, 255); /* WHITE. */
}

/* Italic text with margin again after. */
.mix p.countryItalic
{
	margin-bottom: 3px;
}

/* Bottom of project box contains the short project details. */
.projectDetails
{
	background-color: rgb(55, 93, 137); /* DARK BLUE. */
	padding: 7px;
	margin-left: 0;
	margin-right: 0;
}

/* Another block-grid contains the short project details. */
.projectDetails .firstDet, .projectDetails .secondDet, .projectDetails .thirdDet
{
	width: 33%;
	padding: 0;
}

ul.container
{
	margin-left: 0;
	display: block;
}
ul.container li
{
	/* display: inline-block; */
}

/* Copied from examples and edited - especially media queries. */
.container
{
	padding: 0;
	text-align: justify;
	/* background: #68b8c4; */
}
.container:after
{
	content: '';
	display: inline-block;
}
.container .mix, .container .gap
{
	display: inline-block;
	width: 49%;
}
.container .mix
{
	text-align: left;
	background-color: transparent;
	display: none;
}
.container .mix:after
{
	content: ''; /* This is the crucial part! */
	display: inline-block;
	vertical-align: top;
	padding: 0;
}
.container .mix:before
{
	/* content: ''; */
	display: inline-block;
}
.container .mix, .container .gap
{
	width: 100%;
	vertical-align: top;
}

@media all and (min-width: 641px){
  .container .mix,
  .container .gap{
    width: 49%;
    vertical-align: top;
  }
}

@media all and (min-width: 1025px){
  .container .mix,
  .container .gap{
    width: 32.5%;
    vertical-align: top;
  }
}



/* Footer
====================================================================================================================== */
/* Footer. Padding top and bottom. */
footer
{
	background-color: rgb(22, 22, 22); /* BLACK. */
	padding-top: 30px;
	padding-bottom: 30px;
}

/* Footer links with transparent bg and white text first. */
footer a, footer a:visited
{
	background-color: transparent;
	color: rgb(255, 255, 255); /* WHITE. */
}
/* On hover yellow bg and black text. */
footer a:hover, footer a:active, footer a:focus
{
	background-color: rgb(224, 202, 60); /* YELLOW. */
	color: rgb(22, 22, 22); /* BLACK. */
}

/* Bold text inside reveal popups. */
.pMedium
{
	color: rgb(74, 133, 201); /* BLUE. */
	margin-bottom: 4px;
}



/* SCROLL TO TOP. */
/* Scroll to top with its states. */
a#scrollup, a:visited#scrollup
{
	background-color: rgb(255, 225, 40); /* BRIGHT YELLOW. */
	width: 80px;
	height: 80px;
	bottom: 2em;
	color: rgb(22, 22, 22); /* BLACK. */
	display: none;
	text-align: center;
	line-height: 80px;
	position: fixed;
	right: 2em;
	transition: background 0.3s linear;
	z-index: 200; /* Leave below reveal, which is 1004; */
	
	-moz-box-shadow: 0 0 4px rgb(130, 130, 130); /* GREY. */ /* Safari3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-webkit-box-shadow: 0 0 4px rgb(130, 130, 130); /* GREY. */ /* FF3.5 - 3.6 */
	box-shadow: 0 0 4px rgb(130, 130, 130); /* GREY. */ /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
	
	-webkit-border-radius: 17px; /* Safari3-4, iOS 1-3.2, Android ≤1.6 */
	-moz-border-radius: 17px; /* FF1-3.6 */
	-khtml-border-radius: 17px; /* Linux */
	border-radius: 17px; /* Standard CSS3 syntax for Opera 10.5, IE9, Safari5, Chrome, FF4, iOS 4, Android 2.1+ */
}


a:hover#scrollup, a:focus#scrollup, a:active#scrollup
{
	background-color: rgb(224, 202, 60); /* YELLOW. */
}


/* Forms input override (small devices and orientation change)
====================================================================================================================== */
/* Portrait is offset when changed from landscape if input fields are set to 100% width. 
Override foundation.css and set width to auto instead of 100% for portrait and landscape in that size. 
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 {
  width: 100%;
}
*/


/* Form - Register your interest
====================================================================================================================== */
/* Larger button defined in button area as .sendEnquiry. */
/* Heading above form in Modal window in blue and indented from left for line-up. */
#contact_form2 h3
{
	color: rgb(74, 133, 201); /* BLUE. */
	padding-left: 30px;
}

/* Labels above input fields in black text. */
#contact_form2 label
{
	color: rgb(22, 22, 22); /* BLACK. */
	margin-top: 1em;
    margin-bottom: 0;
}

/* Remove blue border around modal window. */
.reveal-modal:focus
{
	outline: 0;
}
a.close-reveal-modal
{
	background-color: transparent;
	text-decoration: none;
}

/* Remove border and box shadow from input fields (normal and focus). allow for bg colour transition on focus. 
Set colour to black and margin top for all states. */
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 
{
    font-family: 'RobotoRegular', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: normal;
    
    border: 1px solid rgb(130, 130, 130); /* GREY. */
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    
    margin-top: 0em;
    margin-bottom: 0;
    color: rgb(22, 22, 22); /* BLACK. */
    
    -webkit-transition: background-color 150ms ease-out;
	-moz-transition: background-color 150ms ease-out;
	transition: background-color 150ms ease-out;
}
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 
{
   	border: 1px solid #0C0; /* GREEN. */
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    
    margin-top: 0em;
    margin-bottom: 0;
    color: rgb(22, 22, 22); /* BLACK. */
    
    background: rgb(255, 255, 255);
}
/* Creates anchor for user in field (Standard Browsers). Also remove blue border around (FF etc). */
input:focus
{
	outline: none;
	border-width: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Distance above required text and button. */
.submission
{
	margin-top: 1em;
	margin-bottom: 1em;
}

::-webkit-input-placeholder {
   color: rgb(22, 22, 22); /* BLACK. */ /* overwrite browser. */
}
:-moz-placeholder { /* Firefox 18- */
   color: rgb(22, 22, 22); /* BLACK. */ /* overwrite browser. */
}
::-moz-placeholder {  /* Firefox 19+ */
   color: rgb(22, 22, 22); /* BLACK. */ /* overwrite browser. */
}
:-ms-input-placeholder {  
   color: rgb(22, 22, 22); /* BLACK. */ /* overwrite browser. */
}

/* General defined with generic button. Set width to 100%. Here more details and changes. */
#contact_form2 .button
{
	width: 100%;
	margin-top: 0;
	float: right;
}

/* Mobile first: Align required text to the left and colour red -> later align to right for larger screens. */
.reqText
{
	text-align: left;
	color: rgb(255, 0, 0); /* RED. */
}

.form-style .success
{
	background: #D8FFC0;
	padding: 5px 10px 5px 10px;
	margin: 5px 30px 20px 30px;
	border: none;
	color: #2E6800;
	border-left: 2px solid #2E6800;
}
.form-style .error
{
	background: #FFE8E8;
	padding: 5px 10px 5px 10px;
	margin: 5px 30px 20px 30px;
	border: none;
	color: #FF0000;
	border-left: 2px solid #FF0000;
}




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



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



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

/* Small screens: 321px - 480px (20.0625em - 30em) */
@media only screen and (min-width: 20.0625em) { 

}

/* XSmall screens: 481px - 640px (30.0625em - 40em) */
@media only screen and (min-width: 30.0625em) { 
	/* ------------ MAIN CONTENT ------------ */
	/* Main image container on top with more height. */
	.home section.zero
	{
		height: 229px;
	}
	/* ------------ END MAIN CONTENT ------------ */
}

/* Medium screens: 641px - 768px (40.063em - 48em) */
@media only screen and (min-width: 40.063em) { 
	/* ------------ MAIN CONTENT ------------ */
	/* All sections with more top and bottom padding. */
	section, section.zero {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	/* Main image container on top with more height. */
	.home section.zero
	{
		height: 336px;
		background-image: url(../img/l&lmgspl-home-72-940.jpg);
	}
	
	/* Longer text requires longer button but carefull to avoid to much width on mobiles (earlier above). */
	.btn-download-long {
		padding-left: 62px; /* 32px + 30px. */
		padding-right: 106px; /* 32px + 44px + 30px. */
		width: 350px;
	}
	
	/* Reset button to have margin top to level with select menus for medium sizes only. */
	a#Reset.button.left {
		margin-top: 1.3rem;
	}
	/* ------------ END MAIN CONTENT ------------ */
}

/* XMedium screens: 769px - 940px (48.0625em - 58.75em) */
@media only screen and (min-width: 48.0625em) { 
	/* ------------ FONTS & HEADINGS BIGGER ON LARGER SCREENs. ------------ */
	p { 
		font-size: 1em; font-size: 1rem; 
	} /* 1rem = 16px. */
	h1 { 
		font-size: 2.125em; font-size: 2.125rem;
	} /* equals 34px */
	.zero h1 { 
		font-size: 1.625em; font-size: 1.625rem; 
	} /* equals 26px */
	h2 { 
		font-size: 1.125em; font-size: 1.125rem;
	} /* equals 18px */
	.zero h2 { 
		font-size: 1.5em; font-size: 1.5rem;
	} /* equals 24px */
	h3 { 
		font-size: 1.125em; font-size: 1.125rem; 
	} /* equals 18px */
	.zero h3 {
		font-size: 1.125em; font-size: 1.125rem; 
	} /* equals 18px */
	
	.top-bar-section ul li > a { 
		font-size: 1.5em; font-size: 1.5rem; 
	} /* equals 22px */
	
	/* Sales messages in orange boxes. */
	p.salesMessage { 
		font-size: 1.375em; font-size: 1.375rem; 
	} /* equals 24px */
	
	/* Message next to email form. */
	.sendEnquiry { 
		font-size: 1.5em; font-size: 1.5rem; 
	} /* equals 24px */
	/* ------------ END FONTS & HEADINGS BIGGER ON LARGER SCREENs. ------------ */
	
	/* ------------ MAIN CONTENT ------------ */
	/* All sections with more top and bottom padding. */
	section {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	/* ------------ END MAIN CONTENT ------------ */
}

/* XXMedium screens: 941px - 1024px (58.8124em - 64em)*/
@media only screen and (min-width: 58.8125em) { 
	/* ------------ FONTS & HEADINGS BIGGER ON LARGER SCREENs. ------------ */
	.zero h1 { 
		font-size: 2.5em; font-size: 2.5rem;
	} /* equals 40px */
	/* ------------ END FONTS & HEADINGS BIGGER ON LARGER SCREENs. ------------ */
	
	/* ------------ TOP BAR ------------ */
	/* Move navigation ul down above breakpoint. */
	ul.right {
		padding-top: 55px;
	}
	
	/* Hide divider line in navigation above 940 - when menu is nor collapsed. */
	.hide-above-940 {
		display: none;
	}
	
	/* ------------ Colours and hover styles for main menu and dropdown items. ------------ */
	/* Change bg colour for hover buttons to have white bg (none active buttons) and blue text.  */
	.top-bar-section li:not(.has-form) a:not(.button):hover {
		background: rgb(255, 225, 40); /* BRIGHT YELLOW. */
		color: rgb(74, 133, 201); /* BLUE. */
	}
	/* Also declare the active/focus state with transparent yellow background. */
	.top-bar-section li:not(.has-form) a:not(.button):active, .top-bar-section li:not(.has-form) a:not(.button):focus {
		background: rgba(255, 225, 40,0.3); /* BRIGHT YELLOW - transparency. */
		color: rgb(74, 133, 201); /* BLUE. */
	}
	/* ------------ End colours and hover styles. ------------ */
	
	/* ------------ END TOP BAR ------------ */
	
	/* ------------ MAIN CONTENT ------------ */
	/* All sections with more top and bottom padding. */
	section {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	/* Main image container on top with more height. */
	.home section.zero
	{
		height: 400px;
		background-image: url(../img/l&lmgspl-home-72-1400.jpg);
	}
	/* ------------ END MAIN CONTENT ------------ */
}

/* Large screens: 1025px - 1440px (64.0625em - 90em)*/
@media only screen and (min-width: 64.0625em) { 
	/* ------------ FONTS & HEADINGS BIGGER ON LARGER SCREENs. ------------ */
	p { 
		font-size: 1em; font-size: 1rem; 
	} /* 1rem = 16px. */
	h1 { 
		font-size: 2.5em; font-size: 2.5rem;
	} /* equals 40px */
	.zero h1 { 
		font-size: 3.125em; font-size: 3.125rem;
	} /* equals 50px */
	h2 { 
		font-size: 1.25em; font-size: 1.25rem;
	} /* equals 20px */
	.zero h2 { 
		font-size: 1.875em; font-size: 1.875rem;
	} /* equals 30px */
	h3 { 
		font-size: 1.125em; font-size: 1.125rem; 
	} /* equals 18px */
	.zero h3 { 
		font-size: 1.25em; font-size: 1.25rem; 
	} /* equals 20px */
	
	.top-bar-section ul li > a { 
		font-size: 1.5em; font-size: 1.5rem; 
	} /* equals 24px */
	
	/* Sales messages in orange boxes. */
	p.salesMessage { 
		font-size: 1.5em; font-size: 1.5rem; 
	} /* equals 24px */
	/* ------------ END FONTS & HEADINGS BIGGER ON LARGER SCREENs. ------------ */
	
	/* ------------ MAIN CONTENT ------------ */
	/* All sections with more top and bottom padding. */
	section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	/* Main image container on top with more height. */
	.home section.zero
	{
		height: 500px;
	}
	
	/* Reset button again no margin top for large sizes. */
	a#Reset.button.left {
		margin-top: 0;
	}
	/* ------------ END MAIN CONTENT ------------ */

}

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