/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

#header-wrapper {

	width: 100%;
	height: 110px;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	
}

#header-content {

	background: rgba(17, 17, 17, 0.95); 
	height: 75px;
	text-align: center;
	position: relative;

}

#header-content h1 {


	width: 173px;
	height: 44px;
	margin: 0 auto;
	text-indent: -9999px;
	padding: 0;
	background: url(../images/logo-1.png) no-repeat;
	position: relative;
	top: 30px;
	cursor: pointer;
	display: none;
	-webkit-backface-visibility: hidden;

}

#header-base {

	background: url(../images/header-base.png) 50% 0% no-repeat;
	height: 35px;

}

#menu, #menu-content { display: none; }

/* MPU */

#mpu {

	background: url(../images/mpu.jpg) #191a1a 50% 0 no-repeat;
	background-size: cover;	
	height: 466px;
	position: fixed;
	top: 0;
	z-index: 0;
	width: 100%;
	left: 0;
	text-align: center;
	
}

#mpu #mpu-content {

	position: relative;
	top: 50%;
	text-align: center;
	margin: 0 auto;
	
}

#mpu-content { z-index: 0; }

#mpu h2 {

	color: #fff;
	width: 100%;
	font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B',helvetica,arial,sans-serif;
	font-weight: 500;
	font-style: normal;	
	letter-spacing: -2px;
	display: inline-block;
	text-align: center;
	margin-bottom: 35px;
	
}

#mpu #contact-button {

	margin: 0 auto;
	display: inline-block;
	width: auto;
	padding: 12px 30px 9px;
	background-color: #488e65;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border-bottom: 3px solid #40815b;
	font-family: 'knockout_htf31-juniormiddleRg',helvetica,arial,sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
	color: #fff;
	text-decoration: none;
	-moz-transition: all 1s; 
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;		

}

#mpu #contact-button:hover { background-color: #111; border-bottom: 3px solid #030303; }


/* Content */

#main-wrapper {

	margin: 0 auto;
	width: 100%;
	position: relative;
	z-index: 600;
	background-color: #fff;
	top: 466px;
	-webkit-transform: translate3d(0,0,0);
}

#content-wrapper, #contact-wrapper, #footer-wrapper {

	margin: 0 auto;
	width: 100%;
	position: relative;
	z-index: 600;
	background-color: #fff;
	
}

#contact-wrapper { background-color: #f4f3f3; }
#footer-wrapper { background-color: #181919; }


#content, #contact, footer {

	margin: 0 auto;

}

/* 3x Column */

.information, .contact {

	padding: 40px 0 30px;

}

.information h4 {

	font-family: 'knockout_htf31-juniormiddleRg',helvetica,arial,sans-serif;
	text-transform: uppercase;
	color: #488e65;
	margin: 0 0 20px 0;
	font-size: 14px;
	letter-spacing: 3px;
	font-weight: normal;
	background: url(../images/icon.gif) no-repeat;
	padding-left: 50px;
	height: 32px;

}

.information p {

	font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B',helvetica,arial,sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 13px;
	line-height: 22px;

}

.information img {

	display: block;
	width: 100%;
	margin: 5px 0 20px;

}


/* Contact */

.contact h5 {

	font-family: 'knockout_htf31-juniormiddleRg',helvetica,arial,sans-serif;
	text-transform: uppercase;
	color: #488e65;
	margin: 0 0 20px 0;
	font-size: 17px;
	letter-spacing: 3px;
	font-weight: normal;

}

.contact input[type="text"], .contact input[type="email"], .contact textarea, .contact button {

	display: block;
	width: 100%;
	-moz-box-sizing:    border-box;
	-webkit-box-sizing: border-box;
	box-sizing:        border-box;		
	padding: 12px 12px;
	margin-bottom: 20px;
	border-radius: 0;
	border: 0;
	border-bottom: 2px solid #e6e6e6; 
	
}

.contact textarea { height: 106px; }

.contact input[type="text"]:focus, .contact input[type="email"]:focus, .contact textarea:focus { border-bottom: 2px solid #488e65; }

.contact button {

	border-bottom: 0;
	background-color: #488e65;
	border-radius: 3px;
	border-bottom: 3px solid #40815b;
	font-family: 'knockout_htf31-juniormiddleRg',helvetica,arial,sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
	color: #fff;
	text-decoration: none;
	-moz-transition: all 1s; 
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;		
	cursor: pointer;
	padding: 13px 30px 10px;
	
}

.contact button:hover { background-color: #111; border-bottom: 3px solid #030303; }

.connect ul { margin: 0; padding: 0; }

.connect li {

	margin: 0 0 18px 0; 
	height: 32px;
	padding: 12px 0 0 60px;
	
}

.connect li#mail { background: url(../images/mail.gif) no-repeat; background-size: contain; }
.connect li#linkedin { background: url(../images/linkedin.gif) no-repeat; background-size: contain; }
.connect li#pdf { background: url(../images/pdf.gif) no-repeat; background-size: contain; }

.connect li:last-of-type { margin-bottom: 0; }

.connect li a { 

	text-decoration: none;

}

.contact #required { display: none; }

.contact p.success, .contact p.error {

	display: block;
	clear: both;
	margin: 10px 20px 10px 10px;
	padding: 10px 15px 10px 40px;
	border-radius: 3px;
	display: none;
	
}

.contact p.success { background: url(../images/success.png) #d6e7c4 no-repeat; background-size: contain; }
.contact p.error { background: url(../images/error.png) #e7c4d1 no-repeat; background-size: contain; }

/* Footer */

footer { 

	text-align: center;
	padding: 15px 0;
	color: #7e7e7e;
	font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B',helvetica,arial,sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size: 11px;
	letter-spacing: 1px; 
	
}




/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Medium Devices, Desktops */
	@media only screen and (min-width : 960px) {

		#content, #contact { width: 960px; }
		#mpu h2 { font-size: 48px; }
		
		.contact textarea { margin-top: 44px; }
				
		.contact form { width: 66%; display: block; float: left; }

		.contact form .one-third.column { 

			-moz-box-sizing:    border-box;
			-webkit-box-sizing: border-box;
			box-sizing:        border-box;		
			width: 50%;
			max-width: 300px;

		}

		.contact form div:last-of-type { margin-right: 0; }
		
		.contact .connect { margin-left: 15px; }
	
		.information p { max-width: 280px; }
		.information img { max-width: 280px; }
		
		.contact input[type="text"], .contact input[type="email"], .contact textarea, .contact button { max-width: 280px; }
		
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
	
		#mpu h2 {  font-size: 42px; }
		#header-base { display: none; }
		#header-wrapper, #header-content { height: 90px; }
		#header-content { background: rgba(17, 17, 17, 0.9);  }
		
		#header-content h1 {

			width: 50%;
			height: 25px;
			margin: 0 0 0 20px;
			text-indent: -9999px;
			padding: 0;
			background: url(../images/logo.png) 0 0 no-repeat;
			background-size: contain;
			position: relative;
			top: 30px;

		}
		
		.contact textarea { margin-top: 44px; }
				
		.contact form { width: 66%; display: block; float: left; }

		.contact form .one-third.column { 

			-moz-box-sizing:    border-box;
			-webkit-box-sizing: border-box;
			box-sizing:        border-box;		
			width: 50%;
			max-width: 300px;

		}

		.contact form div:last-of-type { margin-right: 0; }

	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	
		#mpu h2 { font-size: 36px; }
		
	
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	
		#mpu h2 { font-size: 32px; }
		
		/* Menu */
		
		#menu { 
		
			display: block;
			position: absolute;
			width: 81px;
			height: 81px;
			top: 1px;
			right: 0;
			background: url(../images/menu.png) no-repeat;
			background-size: contain;
			text-indent: -9999px;
			overflow: hidden;
		
		}
		
		#menu-content {
		
			width: 100%;
			position: fixed;
			z-index: 999;
			top: 90px;
			background: rgba(66,123,89,0.95);
			color: #fff;
			-moz-box-sizing:    border-box;
			-webkit-box-sizing: border-box;
			box-sizing:        border-box;		
			border-bottom: 10px solid #111;
			
		}
		
		#menu-content ul { margin: 0; padding: 0; }
		
		#menu-content li { margin: 0; padding: 0 20px 0; }
		
		#menu-content li a {
		
			text-decoration: none;
			color: #fff;
			font-family: 'knockout_htf31-juniormiddleRg',helvetica,arial,sans-serif;
			text-transform: uppercase;		
			font-size: 13px;
			display: inline-block;
			padding: 20px 0;
			border-bottom: 1px solid #396e4e;
			width: 100%;

		}
		
		#menu-content ul li:last-of-type a { border-bottom: 0; }
		
		.contact input[type="text"], .contact input[type="email"], .contact textarea, .contact button { margin-bottom: 15px; }
			
		.contact form { width: 100%; display: block; }

		.contact form .one-third.column { 

			-moz-box-sizing:    border-box;
			-webkit-box-sizing: border-box;
			box-sizing:        border-box;		
			width: 100%;
			max-width: 100%;

		}

		.contact form div:last-of-type { margin-right: 0; }
		
		.contact textarea { margin-top: 0; }
		
		.contact p.success, .contact p.error { margin: 10px 25px; }
	
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */

@font-face {
    font-family: 'knockout_htf31-juniormiddleRg';
    src: url('knockout-htf31-juniormiddlewt-webfont.eot');
    src: url('knockout-htf31-juniormiddlewt-webfont.eot?#iefix') format('embedded-opentype'),
         url('knockout-htf31-juniormiddlewt-webfont.woff') format('woff'),
         url('knockout-htf31-juniormiddlewt-webfont.ttf') format('truetype'),
         url('knockout-htf31-juniormiddlewt-webfont.svg#knockout_htf31-juniormiddleRg') format('svg');
    font-weight: normal;
    font-style: normal;

}