/**CSS by NormanDev.com**/
/**--------------------**/
/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* STRUCTURE / BASE COLORS */
html {
	background: #f7f2e8;
	min-height:100%;
	height:100%;
}

body {
	background:url('../img/noise.png') repeat;
	height:100%;
	min-height:100%;
	color:#797670;
	font-size:16px;
	font-family:'Noto Sans',Arial,sans-serif;
}

.main {
	padding:30px 0;
	width:100%;
	max-width:100%;
}

header {padding-bottom:40px;}

section {
	background:rgba(0,0,0,.03);
	padding:0 0 20px;
	box-shadow:inset 0 1px 2px rgba(0,0,0,.1),inset 0 -1px 2px rgba(0,0,0,.1);
/* 	border-top:1px solid rgba(0,0,0,.1); */
}

section > div {margin-top:20px;overflow:hidden;}
section > p {text-align:center;}

section,footer {
	position:relative;
	max-width:100%;
	margin:0 auto;
	z-index:200;
}

footer {
	padding:30px 0 0;
	text-align:center;
}

/* HEADINGS */
hgroup {text-align:center;}
h1 {
	background:url('../img/logo.png') no-repeat right center;
	margin:0 auto;
	text-indent:-999em;
	overflow:hidden;
	font-size:0;
	font-weight:400;
	width:92px; height:100px;
	max-width:100%;
}
h2,p.phone {
	font-size:17px;
/* 	font-family: 'Josefin Slab', serif; */
	font-family: 'Quando', serif;
	font-weight:400;
	margin:11px 0 8px;
}
h3 {
	padding:15px 0 15px;
	text-align:left;margin:0 auto;
	font-size:16px;font-weight:400;
	width:160px;
	max-width:100%;
}
h4 {text-align:center;margin:0 0 5px;font-size:14px;font-weight:400;}

/* LINKS */
a {
	color:#797670;
	text-decoration:none;
	-webkit-transition:all 150ms ease-in-out;
	-moz-transition:all 150ms ease-in-out;
	-o-transition:all 150ms ease-in-out;
	transition:all 150ms ease-in-out;
	opacity:.5;
}
a:hover,a.active {opacity:1;}

/* NAVIGATION */
nav {
	text-align:right;
	margin:0 auto;
	position:relative;
	width:160px;
	max-width:100%;
}
nav ul {list-style-type:none;padding:0;margin:0;}
nav a {
	font-size:24px;
	position:absolute;
	right:0; top:0;
	z-index:100;
	outline:none !important;
}
nav i.icon-envelope {position:relative;top:-1px;}
nav li:nth-child(2) a {right:30px;}
nav li:nth-child(3) a {right:49px;}
nav li a.active {
	color:#1F6B9B;
	cursor:default;
	z-index:95;
	font-size:28px;
	-webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    transform: rotate(6deg);
    
    top:47px;
	right:-8px;
}
.nav-close {
	display:none;
	font-size:20px;
}

/* REUSABLE CLASSES */
.folded.content {display:none;}

.panel {
	background:rgba(255,255,255,.6);
	border:1px solid rgba(0,0,0,.03);
	border-top:1px solid rgba(255,255,255,.8);
	border-bottom:1px solid rgba(0,0,0,.08);
	box-shadow:inset 0 -2px 0 rgba(59,59,59,.8);
	padding:14px 15px 8px;
	margin:0 1% 15px;
	min-height:80px;
	width:30%;
	max-width:100%;
	position:relative;
	float:left;
}

.panel:nth-child(3n+1) {margin-left:3%;clear: both;}
.panel:nth-child(3n+3) {margin-right:3%;}

.panel:hover {
	background:rgba(255,255,255,.9);
	box-shadow:inset 0 -2px 0 rgba(31,107,155,.8);
}
.panel > a {display:block;}
.panel > a:after {
	content:"\f08e";
	color:#fff;
	font-family:'FontAwesome';
	display:block;
	position:absolute;
	top:41px;
	right:15px;
	font-size:22px;
	padding:11px 10px 8px 12px;
	background:rgba(0,0,0,.5);
	opacity:0;
}
.panel:hover > a:after {opacity:.2;}
.panel.nolink:hover > a:after {opacity:0;}

.panel.nolink > a {cursor:default;}

.panel img {
	display:block;
	max-width:100%;
}

.specs {text-align:left;display:block;margin:10px 0 0;visibility:hidden;}
.specs i {
	font-size:22px;margin-right:4px;
	-moz-transition:color 200ms ease-in-out;
	-webkit-transition:color 200ms ease-in-out;
	-o-transition:color 200ms ease-in-out;		
	transition:color 200ms ease-in-out;
}
.specs i:hover {color:#222;}

.panel > .content p {
	font-size:14px;
	text-align:left;
	padding:0;
}

p .icon-external-link {font-size:12px;margin-left:3px;}

p strong {font-weight:700;}

.info {
	float:right;
	margin-top:10px;
	background:rgba(0,0,0,.5);
	color:#fff;
	padding:1px 8px 0px;
	border-radius:50px;
	box-shadow:1px 1px 0 rgba(0,0,0,.3);
	cursor:pointer;
}
.project:hover .info {background:#1F6B9B;}
.info i {font-size:18px;}

.info.active,
.info.active:hover,
.project:hover .info.active {
	background:#1F6B9B;
	color:#fff;
	box-shadow:inset 0 2px 2px rgba(0,0,0,.3);
	cursor:pointer;
}
.project:hover .info:hover {
	background:#1b5d87;
	cursor:pointer;
}

/* CONTENT */
.content > div,
.content > form {
	text-align:center;
	margin:0 auto;
	padding:0;
	max-width:100%;
	min-height:120px;
}

p {
	padding:0 15px;
	text-align:center;
}

p.success {
	font-size:14px;
}

.project > a > img {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);
}
.project:hover > a > img {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}
.project > a {opacity:1;}
.project h4 {text-align:left;text-transform:uppercase; font-family:'trebuchet ms','arial';font-size:12px;
	border-bottom:1px solid rgba(0,0,0,.1);
	padding-bottom:5px;
	margin-bottom:7px;
}

button.hire {margin-top:20px;}

/* FORMS */
input,textarea {
	background:rgba(255,255,255,.3);
	border:0;
	border-radius:3px;
	box-shadow:inset 0 0 2px rgba(121,118,112,.3);
	padding:8px 15px;
	font-size:13px;
	margin:0 auto 10px;
	
	-webkit-transition:all 200ms ease-in-out;
	-moz-transition:all 200ms ease-in-out;
	-o-transition:all 200ms ease-in-out;
	transition:all 200ms ease-in-out;
	
	width:190px;
	max-width:100%;
}
input.error,
textarea.error {
	background:rgba(230,0,0,.08);
	box-shadow:inset 0 0 2px rgba(255,0,0,.3);
}
input:focus,textarea:focus {
	outline:0;
	background:#fff;
	box-shadow:inset 1px 1px 1px rgba(100,95,90,.25);
}

p.error {
	color:#800;padding:0;margin:0 auto;
	font-size:12px;
	position:relative;top:-8px;
	text-align:right;
	width:190px;
	max-width:100%;
}
p.error:after {
	content:" \f06a";
	font-family:'FontAwesome';
}

textarea {height:55px;}
textarea:focus {
	border-bottom:1px solid rgba(0,0,0,.08);
}
::-webkit-input-placeholder {color: #797670;}
:-moz-placeholder {color: #797670;}
::-moz-placeholder {color: #797670;}
:-ms-input-placeholder {color: #797670;}

/* BUTTONS */
button {
	background-color: #1F6B9B;
	color:#fff;
	border-top: 1px solid #1b5d87;
	border-left: 1px solid #1b5d87;
	border-bottom: 1px solid #1b5d87;
	border-right: 1px solid #1b5d87;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 0 rgba(0,0,0,.5);
	font: normal 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
	padding: 8px 14px 9px;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0,0,0,.5);
	width: auto;
	cursor: pointer;
}
button:hover,
button:active {
	background:#1b5d87;
	outline:none !important;
}

button:active {
	position:relative;
	top:2px;
}

@media only screen and (min-width: 769px) {
	textarea:focus {
		width:320px;
	}	
}

/* Mobile / Small Tablet */
@media only screen and (max-width: 768px) {

	html,body {background:#f7f2e8;}

	header {padding-bottom:50px;}

	/* NAVIGATION */
	nav a {
		font-size:32px;
	}
	nav li:nth-child(2) a {right:34px;}
	nav li:nth-child(3) a {right:80px;}
	nav li a.active {
		top:55px;
		right:-5px;
	}
	
	.panel {width:320px;float:none;margin:0 auto 15px;}
	.panel:nth-child(3n+1),.panel:nth-child(3n+3) {margin:0 auto 15px;}
	
	button {
		padding: 11px 25px 12px;
	}
}