@-ms-viewport{ /*microsoft prefix*/
    width: extend-to-zoom;
    zoom: 1.0;
}

/*STYLES*/

.pics {
	margin-top: 10px;
	background: #FFF;
	opacity: 0.8;
	padding-top: 10px;	
}
.pics img {
	border: 3px solid #000;	
	opacity: 1;
	width: 100px;
	height: 100px;	
}

* {
	-moz-box-sizing: border-box;/*padding and borders added to inside of element*/
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
	margin: 0;
	padding: 0;
	-webkit-font-smooting: antialiased;
}

html {
	font: 100%/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;
	min-height: 100%;
	position: relative; /*relative to the html element*/
	padding-bottom: 32em; /*em instead of % because if font size changes, it will change according to that*/
}

body {
	font-size: .95em;
	font-weight: bold;
	line-height: 1.5em;
	color: #030303; /*black*/
	background-image: url(../images/background.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;	
}

img {
	max-width: 100%; /*image is 100% of the parent container*/	
	height: auto;
}

.row {
	float: left;
	clear: both;
	width: 100%;	
}

h3 {
	color: #DD0;
	padding: 0 0 1em;
	font-weight: bold;
}

p {
	color: #FFF;	
}

.container .columns {
	float: left;
	padding-right: 1em;	
	padding-left: 1em;	
}

.container .columns.one,
.container .columns.two,
.container .columns.three,
.container .columns.four,
.container .columns.five,
.container .columns.six,
.container .columns.seven,
.container .columns.eight,
.container .columns.nine,
.container .columns.ten,
.container .columns.eleven,
.container .columns.twelve,
.container .columns.thirteen,
.container .columns.fourteen,
.container .columns.fifteen,
.container .columns.sixteen 	{		width:	100% 			}

.container {
	width: 100%;
}

.clearfix:after,
.container:after { /*'after' is a pseudo element. Pseudo element is used to style specfic parts of an elements*/
	content: " ";
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
	clear: both;
}

.clearfix,
.container {
	zoom: 1; /*allows you to scale content*/
}


/*LOGO*/
h1.logo {
	margin: 0;
}

h1.logo a {
	width: 100%;
	height: auto;
	display: block;	
	border: 0;
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
	background-color: transparent;
}


/*FOOTER*/
footer {
	text-align: center;
	padding: 5em 0 2.5em 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #FFF;	
}


/*HEADER*/
header.row {
	padding: 2em 0;	
}


/*NAVIGATION*/
a.nav-link {
	position: absolute;
	top: 0;
	right: 1em;
	float: right;
	background: #D26900;
	text-decoration: none;
	color: #FFF;
	padding: 0.5em;
	font-weight: bold;
	border-radius: 0 0 0.2em 0.2em;	
}

nav[role="primary"] ul { /*using attribute selectors. moves the top nav around in mobile view*/
	list-style: none;
	position: absolute;	
	bottom: 15em;
	left: 0;
	width: 100%;
}

nav[role="primary"] ul li a {
	text-decoration: none;
	font-weight: bold;
	font-size: 1em;
	display: block;
	padding: 0.75em 2em;
	background: #D26900;
	color: #FFF;
	border: 1px solid #FFF;
}

nav[role="primary"] ul li a:hover {
	background: #FFF; /*white*/
	color: #D26900; /*orange*/
}


nav[role="secondary"] ul { /*using attribute selectors. this moves the bottom nav around in mobile view*/
	list-style: none;
	position: absolute;	
	bottom: 0;
	left: 0;
	width: 100%;
	float: left;
	margin: 0 0 0 0em; 
}

nav[role="secondary"] ul li a { 
	text-decoration: none;
	font-weight: bold;
	font-size: 1em;
	display: block;
	padding: 0.75em 2em;
	background: #D26900;
	color: #FFF;
	border: 1px solid #FFF; 
}

nav[role="secondary"] ul li a:hover {
	background: #FFF;
	color: #D26900;	
}


nav[role="secondary"] ul li:last-child a {
	border: none;	
}

nav[role="secondaryContact"] ul { /*using attribute selectors. this moves the bottom nav around in mobile view*/
	list-style: none;
	position: absolute;	
	bottom: 0;
	left: 0;
	width: 100%;
	float: left;
	margin: 0 0 0 0em; 
}

nav[role="secondaryContact"] ul li a { 
	text-decoration: none;
	font-weight: bold;
	font-size: 1em;
	display: block;
	padding: 0.75em 2em;
	background: #D26900;
	color: #FFF;
	border: 1px solid #FFF; 
}

nav[role="secondaryContact"] ul li a:hover {
	background: #FFF;
	color: #D26900;	
}


nav[role="secondaryContact"] ul li:last-child a {
	border: none;	
}

nav[role="secondaryLogin"] ul { /*using attribute selectors. this moves the bottom nav around in mobile view*/
	list-style: none;
	position: absolute;	
	bottom: 0;
	left: 0;
	width: 100%;
	float: left;
	margin: 0 0 0 0em; 
}

nav[role="secondaryLogin"] ul li a { 
	text-decoration: none;
	font-weight: bold;
	font-size: 1em;
	display: block;
	padding: 0.75em 2em;
	background: #D26900;
	color: #FFF;
	border: 1px solid #FFF; 
}

nav[role="secondaryLogin"] ul li a:hover {
	background: #FFF;
	color: #D26900;	
}


nav[role="secondaryLogin"] ul li:last-child a {
	border: none;	
}


/*STYLING SPECIFIC PAGE STYLES*/
.main .four { /*targets the rows of text*/
	margin: 1em 0;	
}

/*CONTACT FORM*/
p.info {
	font-size: 1.2em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	padding-bottom: 10px;
	padding-top: 10px;
}

/*CLIENTS PAGE*/
.clients .sixteen {
	margin: 2em 4em;
}

ul li {
	color: #FFF;	
}

p.muted {
	font-size: .8em;	
	color: #DD0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

label, input, textarea {
	padding: 5px;	
	clear: both;
}

textarea {
	padding: 20px;
	width: 60%;
}

label textarea {
	margin-top: 10px;		
}

label {
	margin-bottom: 20px;
	font-size: 1.1em;
}

input [type="submit"], button {
	width: 100%;
	height: auto;
	font-size: 30em;
}


/***********************MEDIA QUERIES****************/
@media only screen and (min-width: 835px) { /*applies to screens above this size, not below this size*/
.pics {
	margin-top: 10px;
	background: #FFF;
	opacity: 0.8;
	padding-top: 10px;	
}
.pics img {
	border: 3px solid #000;	
	opacity: 1;
	width: 100px;
	height: 100px;	
}

body {
	font-size: 1em;
	line-height: 1.5em;
}

html {
	padding-bottom: .5em;
}

.main .four { /*targets the rows of text*/
	margin: 1.5em 0;	
}

.container .columns.one 		{		width:	6.25% 			}
.container .columns.two	 		{		width:	12.5% 			}
.container .columns.three 		{		width:	18.75% 			}
.container .columns.four		{		width:	25% 			}
.container .columns.five 		{		width:	31.25% 			}
.container .columns.six 		{		width:	37.5% 			}
.container .columns.seven 		{		width:	43.75% 			}
.container .columns.eight 		{		width:	50% 			}
.container .columns.nine 		{		width:	56.25% 			}
.container .columns.ten 		{		width:	62.5% 			}
.container .columns.eleven 		{		width:	68.75% 			}
.container .columns.twelve 		{		width:	75% 			}
.container .columns.thirteen 	{		width:	81.25% 			}
.container .columns.fourteen 	{		width:	87.5% 			}
.container .columns.fifteen 	{		width:	93.75% 			}
.container .columns.sixteen 	{		width:	100% 			}

.container {
	width: 90%;
	margin: 0 auto;	
}

.columns.banner {
	padding-bottom: 30%;
	background: url(../images/banner3.png);
	background-size: cover;
}

.container .main .four {
	width: 50%;
}

.container .contact .eight {
	width: 50%;	
}


/*NAVIGATION*/
a.nav-link {
	display: none;	
}

nav[role="primary"] ul {
	position: relative;	
	top: 0em;
}

nav[role="primary"] ul li a {
	float: left;
	background: none;
	color: #FFF;
	border: none;
	border-radius: .2em;	
}


nav[role="secondary"] ul {
	position: relative;
	top: 3em;
}

nav[role="secondary"] ul li a { /*controls the bottom nav in full screen view*/
	float: left;
	background: none;
	color: #FFF;
	border: none;
	border-radius: .2em;
	right: 0em;	
}

nav[role="secondaryContact"] ul {
	position: relative;
	top: 3em;
	margin: -4em;	
}

nav[role="secondaryContact"] ul li a { /*controls the bottom nav in full screen view*/
	float: left;
	background: none;
	color: #FFF;
	border: none;
	border-radius: .2em;
	right: 0em;	
}

nav[role="secondaryLogin"] ul {
	position: relative;
	top: 9em;
	margin: -4em;	
}

nav[role="secondaryLogin"] ul li a { /*controls the bottom nav in full screen view*/
	float: left;
	background: none;
	color: #FFF;
	border: none;
	border-radius: .2em;
	right: 0em;	
}


.second .sixteen {
	right: 0;
	margin: 0 0 0 -2em;
}


/*ABOUT PAGE*/
.about .sixteen {
	margin: 2em 0;
}


/*GALLERY PAGE*/
.gallery .sixteen {
	margin: 2em 0;
}


/*CLIENTS PAGE*/
.clients .sixteen {
	margin: 2em 0;
}

ul li {
	color: #FFF;	
}


/*SERVICES PAGE*/
.services .sixteen {
	margin: 2em 0;
}


/*LINKS PAGE*/
.links .sixteen {
	margin: 2em 0;
}


/*HEALTH & SAFETY PAGE*/
.hs .sixteen {
	margin: 2em 0;	
}


/*NEWS PAGE*/
.news .sixteen {
	margin: 2em 0;	
}


/*CONTACT PAGE*/
.contact .sixteen {
	margin: 2em 0;	
}


/*CONTACT FORM*/
p.info {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #000;
}

p.muted {
	color: #DD0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: .8em;	
}

label, input, textarea {
	display: block;
	padding: 5px;	
	clear: both;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

textarea {
	padding: 20px;
	width: 60%;
	box-sizing: border-box;	
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	
}

label textarea {
	margin-top: 10px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;		
}

label {
	margin-bottom: 20px;
	font-size: 1.2em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

input [type="submit"], button {
	width: 100%;
	height: auto;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 25em;
}

.muted {
	color: #DD0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.contact {
	width: 100%;
	padding: 30px 20px;
	box-sizing: border-box;
}

.panel {
	border: 1px solid #000;
	background: #000;
	margin-bottom: 20px;
	padding: 20px;	
}

/*MAP*/
iframe {
	clear: both;
	width: 100%;
}

/*LOGIN FORM*/


@media only screen and (min-width: 1350px){
.container .main .four {
	width: 25%;
}

.main .four { /*targets the rows of text*/
	margin: 2em 0;	
}
	
}

.lte9 .container{ /*overrides the container class above. As long as its in the html element of lte9, do what is below */
	max-width: 600px;
}