/* -------------------------------------------------------------------
				Norgren Designs v2.0
   -------------------------------------------------------------------  */

/* Title: Norgren Designs */
/* Author: Brian Wynn */
/* URL: www.norgrendesigns.com */


/* Author's Note:
Norgren Designs was built as a mobile-first website. All styles are oriented based off of a
mobile oriented design in a portrait layout. Media queries are added as the viewport size
increases. */


/* ------------------  Global Elements   -----------------------------  */
* {
	margin: 0;
	padding: 0;
}

html, body, #nd {
	min-height: 1050px;
}

html, body, footer {
	width: 100%;
}

body, input, textarea, button {
	font-family: "Lato", Helvetica, sans-serif;
	font-weight: 300;
}

body {
	font-size: 18px;
	color: #222;
	max-width: 1440px;
	margin: 0 auto;
	overflow-x: hidden;
	background-color: #222;
}

footer {
	background-color: #222;
}

h2, h3 {
	text-align: center;
	padding: 1em;
}

p {
	padding: .2em 2em;
	font-size: 1em;
	line-height: 1.4;
	letter-spacing: .05em;
	font-weight: 300;
}

header{
	background-color: #FCFCF8;
}

header,
a {
	color: #222;
}

a {
	text-decoration: none;
	-webkit-transition: .3s ease;
	-ms-transition: .3s ease;
	transition: .3s ease;
}

a:hover {
	text-decoration: underline;
}

.nav-line,
#logo-wrap {
	margin: 0 auto;
	}

button:active,
button:focus {
	outline: none;
}

label {
	display: block;
	margin: .5em 0;
}

form {
	width: 60%;
	margin: 0 auto;
}

.active {
	color: #999;
}

/* ------------------  Header Elements -------------------------------  */
header#globalHeader {
	height: 4em;
	position: relative;
	z-index: 5;
}

header#globalHeader a.homeBtn {
	position: relative;
	z-index: 11;
}

div#logo-wrap, header#globalHeader #desk-nav {
	height: inherit;
	position: relative;
	z-index: 10;
	background-color: #FCFCF8;
}

div#logo-wrap, header#globalHeader #desk-nav > nav, figure#headerIcon, div#logo-wrap h1, header#globalHeader > nav > ul > li {
	display: inline-block;
}

div#logo-wrap {
	width: 60%;
}

header#globalHeader #desk-nav > nav {
	width: 39%;
	float: right;
}

header#globalHeader #desk-nav > nav > ul {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-top: 2.5em;
}

header#globalHeader #desk-nav > nav > ul > li {
	-webkit-flex-grow: 1;
	flex-grow: 1;
	border-right: 1px solid #222;
	list-style-type: none;
}

header#globalHeader #desk-nav > nav > ul > li:last-child {
	border: none;
}

header#globalHeader #desk-nav > nav > ul > li > a {
	display: block;
	text-align: center;
	font-weight: 300;
}

div#logo-wrap, figure#headerIcon, div#logo-wrap h1 {
	float: left;
}

div#logo-wrap h1 {
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 1.2em;
	font-weight: 300;
	font-size: 1.6em;
}

figure#headerIcon {
	background-image: url("../img/logo_grey.png");
	background-repeat: no-repeat;
	background-size: contain;
}

.logo {
	height: 100%;
	width: 4em;
	margin: 0 .5em;
}

	#mobileNav {
		display: none;
	}

	button#mobileNavBtn {
		display: none;
	}

/* ------------------  Content Elements ------------------------------  */
#contentSection {
	position: absolute;
	top: 4em;
	width: 100%;
	overflow: hidden;
	max-width: 1440px;
}

div.row,
article.client-design-services {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: wrap;
	-webkit-align-content: flex-start;
	align-content: flex-start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}


div#contentSection > section {
	display: none;
	position: relative;
	z-index: 3;
	top: 1em;
	left: 0;
	width: 70%;
	border-radius: 2px;
	margin: 3em auto 6em;
	background-color: rgba(252, 252, 248, 0.96);
	box-shadow: 2px 2px 10px rgba(0, 0, 0, .5);
}

#contentSection > section#homePageContent.show,
#contentSection > section#aboutPageContent.show,
#contentSection > section#companyPageContent.show,
#contentSection > section#contactPageContent.show {
	top: 1em;
}

#homePageContent,
#aboutPageContent,
#companyPageContent {
	min-height: 450px;
}

#contactPageContent {
	min-height: 550px;
	padding-bottom: 1em;
}

#homePageContent h2:last-child {
	font-weight: 300;
	font-size: 1.1em;
	padding-bottom: 2em;
}

article.in-house-projects h2 {
	padding-top: 1em;
}

/* -------------------- ABOUT PAGE ------------------------------------------ */

section#aboutPageContent .profileBox {
    width: 23%;
    max-height: 14em;
    max-width: 27%;
    color: #fff;
    margin: 2em;
    overflow: hidden;
    position: relative;
    z-index: 3;
		float: left;
}

section#aboutPageContent .profileBox div.employeeDetails {
	position: relative;
	top: -1.7em;
	padding: .3em;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, .5);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}

section#aboutPageContent .profileBox:hover div.employeeDetails {
	top: -2.8em;
}

section#aboutPageContent .profileBox div.employeeDetails p {
	padding: 0;
}

section#aboutPageContent figure.portrait {
	background-color: #98BDA0;
	background-size: cover;
	background-position: center;
	height: 14em;
	width: 100%;
}

section#aboutPageContent figure.portrait.erik {
	background-image: url("../img/erik.jpg");
}

section#aboutPageContent figure.portrait.default {
	background-image: url("../img/default-user.png");
}

section#aboutPageContent > .page-wrap > div.row > p {
	width: 60%;
	padding: 2em .2em;
}

section#aboutPageContent > .page-wrap > div.row > span.row-separator {
	width: 92%;
	border: 1px solid #999;
	display: block;
	margin: 0 auto;
}

section#aboutPageContent > .page-wrap > div.row:last-child span.row-separator {
	border: none;
}

section#aboutPageContent > .page-wrap > div.row:last-child > p > a.contact-form-button {
	background-color: #98BDA0;
	border-radius: 2px;
	display: block;
	text-align: center;
	padding: 1.5em;
	width: 6em;
	margin: 3em auto 0;
}

section#aboutPageContent > .page-wrap > div.row:last-child > p > a:hover {
	background: #377F5E;
}

/* ------------------  Company Page ----------------------------------- */
section#companyProfile > article ul {
	padding-left: 3em;
}

section#companyProfile > article p:last-child {
	padding: .2em 2em 2em;
}

section#companyProfile > article h3 {
	text-align: left;
}

section#companyProfile > article ul {
	width: 100%;
}

section#companyProfile > article li {
	padding-right: 1em;
}

section#companyProfile article.client-design-services > h2 {
	width: 100%;
}

section#companyProfile article.client-design-services > div.row {
	width: 50%;
}

/* ------------------  Contact Container ---------------------------------- */
#contactContainer {
	width: 100%;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
}

#contactContainer h3 {
	padding: 2em 1em 1em;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
	width: 100%;
	border-radius: 3px;
	font-size: 1em;
	border: 1px solid #999;
	padding: .1em;
}

#contact-form textarea {
	min-height: 5em;
}

#contact-form input[type="text"]:focus,
#contact-form input[type="text"]:active,
#contact-form input[type="email"]:focus,
#contact-form input[type="email"]:active,
#contact-form textarea:focus,
#contact-form textarea:active {
	outline: none;
}

#contact-form input.ng-invalid-required.ng-dirty { background-color: lightpink; }
#contact-form input.ng-invalid-email.ng-dirty { background-color: #F3F0BF; }
#contact-form input.ng-valid.ng-dirty { background-color: #C1F0BF; }

button#closeContainer {
	background-color: inherit;
	color: #999;
}

button#closeContainer,
button#send {
	font-size: 1.2em;
	margin: .5em;
}

button#closeContainer {
	cursor: pointer;
}

button#closeContainer:hover {
	color: #333;
}

button#send {
	padding: .3em .5em;
	margin-left: 0;
	background-color: #377F5E;
	color: #fff;
	border: none;
	cursor: pointer;
}

button#send[disabled="disabled"] {
	cursor: default;
	background-color: #98BDA0;
	color: #333;
}

#contactPageContent div.formError {
	color: maroon;
	font-weight: bold;
}

/* ------------------ Background Array ------------------------------- */
#nd div.background-array {
	width: 100%;
	max-width: 1440px;
	background-color: #333;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-align-items: center;
	align-items: center;
}

#nd div.background-array figure {
	min-height: 350px;
	min-width: 32%;
	width: 33%;
	display: inline-block;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	-webkit-align-self: flex-start;
	align-self: flex-start;
	background-size: cover;
	background-position: center;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 1),
only screen and (min--moz-device-pixel-ratio: 1),
only screen and (min-device-pixel-ratio: 1),
only screen and (min-resolution: 96dpi),
only screen and (min-resolution: 1dppx) {
	#nd div.background-array figure.bolt {
		background-image: url("../img/array_bolt.jpg");
	}

	#nd div.background-array figure.cable {
		background-image: url("../img/array_cable.jpg");
	}

	#nd div.background-array figure.card {
		background-image: url("../img/array_card.jpg");
	}

	#nd div.background-array figure.circuitboard {
		background-image: url("../img/array_circuitboard.jpg");
	}

	#nd div.background-array figure.coffee {
		background-image: url("../img/array_coffee.jpg");
	}

	#nd div.background-array figure.cylinder {
		background-image: url("../img/array_cylinder.jpg");
	}
	#nd div.background-array figure.hardware {
		background-image: url("../img/array_hardware.jpg");
	}

	#nd div.background-array figure.input {
		background-image: url("../img/array_input.jpg");
	}

	#nd div.background-array figure.prototypes {
		background-image: url("../img/array_prototypes.jpg");
	}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
	#nd div.background-array figure.bolt {
		background-image: url("../img/array_bolt_2x.jpg");
	}

	#nd div.background-array figure.cable {
		background-image: url("../img/array_cable_2x.jpg");
	}

	#nd div.background-array figure.card {
		background-image: url("../img/array_card_2x.jpg");
	}

	#nd div.background-array figure.circuitboard {
		background-image: url("../img/array_circuitboard_2x.jpg");
	}

	#nd div.background-array figure.coffee {
		background-image: url("../img/array_coffee_2x.jpg");
	}

	#nd div.background-array figure.cylinder {
		background-image: url("../img/array_cylinder_2x.jpg");
	}
	#nd div.background-array figure.hardware {
		background-image: url("../img/array_hardware_2x.jpg");
	}

	#nd div.background-array figure.input {
		background-image: url("../img/array_input_2x.jpg");
	}

	#nd div.background-array figure.prototypes {
		background-image: url("../img/array_prototypes_2x.jpg");
	}
}

/* ------------------  Footer Elements -------------------------------  */

footer p.copy-footer {
	text-transform: uppercase;
	text-align: center;
	padding: 1em;
	font-weight: 300;
	color: #FCFCF8;
}

/* ------------------- Media Queries --------------------------------- */
@media only screen and (max-width: 1000px) {

	div#contentSection > section {
		width: 85%;
	}

	#contentSection > section#homePageContent.show,
	#contentSection > section#aboutPageContent.show,
	#contentSection > section#companyPageContent.show,
	#contentSection > section#contactPageContent.show {
		top: 0em;
	}

	section#aboutPageContent .profileBox {
			display: block;
			max-width: 25%;
	}
}

/* ------------ 800 Pixels -------------------- */

@media only screen and (max-width: 800px) {

	header#globalHeader {
		height: 3em
	}

	/* Mobile Nav Elements */

	#mobileNav {
		position: relative;
		top: 0;
		right: 0;
		z-index: 3;
		width: 100%;
		display: none;
	}

	button#mobileNavBtn {
		display: block;
		float: right;
		height: 45px;
		width: 45px;
		margin: .45em;
		background-color: inherit;
		border: .2em solid #222;
		border-radius: .5em;
		cursor: pointer;
		position: relative;
		top: 0;
	}

	/* checking to see if this configuration leads to a better experience on mobile devices */
	button#mobileNavBtn.active {
		background-color: #222;
	}

	button#mobileNavBtn.active > svg > path.bar {
		fill: #ffffff;
		height: 100%;
		width: 100%;
	}

	svg#menu-bar {
		position: relative;
		height: inherit;
		width: inherit;
		top: 0;
		left: 0px;
	}

	#mobileNav > nav {
		position: relative;
		z-index: 3;
		width: 100%;
		top: -13em;
		background-color: #222;
		box-shadow: .5em .5em .5em rgba(0, 0, 0, .5);
	}

	#mobileNav > nav > ul > li {
		padding: .6em;
		list-style-type: none;
	}

	#mobileNav > nav > ul > li:first-of-type {
		padding-top: 1.2em;
	}

	#mobileNav > nav > ul > li > a {
		color: #FCFCF8;
		display: block;
		border-bottom: .1em solid #FCFCF8;
	}

	#mobileNav > nav > ul > li > a:hover {
		text-shadow: .05em .05em #224F3B;
		text-decoration: none;
		font-size: 1.1em;
	}

	div#logo-wrap h1 {
		margin-top: 1em;
		font-size: 1.3em;
		/*display: none;*/
	}

	.logo {
		width: 3em;
	}

	#nd div.background-array figure {
		min-width: 49%;
		width: 50%;
	}

	#nd div.background-array figure:last-child {
		display: none;
	}

	section#aboutPageContent .profileBox {
			display: block;
	    width: 100%;
			max-width: 35%;
			float: none;
			margin: 1em auto;
	}

	#contentSection > section#homePageContent.show,
	#contentSection > section#aboutPageContent.show,
	#contentSection > section#companyPageContent.show,
	#contentSection > section#contactPageContent.show {
		top: -2em;
	}

	section#aboutPageContent h2  {
		text-align: center;
	}

	form {
		width: 85%;
	}

	header#globalHeader #desk-nav > nav {
		display: none;
	}

	#mobileNav {
		display: block;
	}

	div#logo-wrap {
		width: 80%;
	}

	#nd > div.nav-background {
		width: 100%;
		height: 0%;
		position: absolute;
		top: 3em;
		left: 0;
		z-index: 3;
		background-color: #222;
		opacity: .8;
	}

	div#contentSection > section {
		width: 95%;
	}

	section#companyProfile .profileBox {
		width: 30%;
		max-width: 100%;
	}

	section#companyProfile > article ul {
		padding: 1em 1em 2em;
		margin-left: 1em;
	}

	section#aboutPageContent > .page-wrap > div.row > p {
		width: 100%;
		padding: 2em;
	}

	#homePageContent h1,
	#aboutPageContent h1,
	#contactPageContent h1 {
		font-size: 1.3em;
	}

	section p,
	section li {
		font-size: .8em;
	}

	button#send {
		display: block;
		margin: 1em auto;
		width: 60%;
	}

	section#companyProfile article.client-design-services > div.row {
		width: 100%;
	}

	article.in-house-projects h2 {
		padding-top: inherit;
	}

}

@media only screen and (max-width: 500px) {

	#nd div.background-array figure {
		min-height: 200px;
		min-width: 99%;
		width: 100%;
	}

	div#logo-wrap h1 {
		display: none;
	}

	section#aboutPageContent .profileBox {
		max-width: 49%;
	}
}