/* FONTS
--------------------------------------------------------- */

@font-face {
    font-family: 'proxima_nova_rgregular';
    src: url('../fonts/proximanova-regular-webfont.eot');
    src: url('../fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova-regular-webfont.woff') format('woff'),
         url('../fonts/proximanova-regular-webfont.ttf') format('truetype'),
         url('../fonts/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}




/* INITIAL SETUP
--------------------------------------------------------- */

	html { 
		width: 100%; 
		height: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
		font-size: 62.5%; 
	}

	body {
		font-family: arial, sans-serif;
		font-size: 1.3rem;
		line-height: 1.3;
		color: #000;
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0;
	}

	h1, h2, h3, h4, h5, h6, ul { 
		margin: 0; 
		padding: 0; 
	}

	h1, h2, h3, h4, h5, h6 { 
		font-weight: normal; 
	}

	a { 
		text-decoration: none; 
	}

	input[type=button], input[type=submit], button[type=button], button[type=submit] {
		border: none;
	}
	
	.container {
		width: 960px;
		margin: 0 auto;
		overflow: auto;
	}

	.hidden { display: none !important; }

	.col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9 {
		float: left;
		margin-right: 3.3%;
	}

	.col2 { width: 13.9%; }
	.col3 { width: 22.5%; }
	.col4 { width: 31.1%; }
	.col5 { width: 39.8%; }
	.col6 { width: 48.3%; }
	.col7 { width: 56.9%; }
	.col8 { width: 65.5%; }
	.col9 { width: 74.2%; }
	.col12 { width: 100%; }

	.left { float: left; }
	.right { float: right; }
	.last { margin-right: 0 !important; }

	body > section {
		padding-top: 1em;
		padding-bottom: 1em;
	}

	body > section header {
		b/order: 1px solid red;
	}

	body > section .container {
		b/order: 1px solid blue;
	}




/* DESKTOP CSS
--------------------------------------------------------- */

	body {
		background-color: #ffffff; 
	}

	#header {
		height: 60px;
		margin-top: 2em;
	}

	#header #logo {
		float: left;
		background-image: url('../images/logo.png');
		background-position: top left;
		background-repeat: no-repeat;

		width: 390px;
		height: 60px;
	}

	#header #logo a {
		display: block;

		width: 390px;
		height: 60px;
	}

	#header #logo span {
		display: none;
	}

	#header nav {
		float: right;
	}

	#header nav li {
		float: left;
		list-style: none;
	}

	#header nav li a {
		display: block;
		font-family: 'proxima_nova_rgregular', arial;
		font-size: 14px;
		font-weight: 100;
		line-height: 60px;
		color: #ccc;

		text-transform: uppercase;
		text-align: center;

		cursor: pointer;
		padding-left: 1em;
		padding-right: 1em;
	}

	#header nav li a:hover, #header nav li.active a {
		color: #000;
	}





	#body {
	}	

	#body .container {
	}

	#body .container h1 {
		font-family: 'proxima_nova_rgregular', arial;
		font-size: 34px;
		line-height: 44px;
		font-weight: 100;
		letter-spacing: -0.05em;
		color: #000;
		text-align: left;
	}

	#body .container h2 {
		font-family: 'proxima_nova_rgregular', arial;
		font-size: 24px;
		line-height: 30px;
		font-weight: 100;
		letter-spacing: -0.01em;
		color: #000;
		text-align: left;
	}

	#body .container p {
		font-family: 'proxima_nova_rgregular', arial;
		font-size: 14px;
		line-height: 22px;
		color: #000;
	}

	#body .container ul {
		list-style-type: disc;
		padding-left: 20px;
		margin-left: 10px;
	}

	#body .container li {
		font-family: 'proxima_nova_rgregular', arial;
		font-size: 14px;
		line-height: 22px;
		color: #000;
	}

	#body .container form .row {
		margin-bottom: 1em;
	}

	#body .container form label {
		width: 100%; 
		box-sizing: border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing: border-box;

		font-family: 'Conv_DINPro-Medium', arial;
		font-size: 16px;
		font-weight: 100;
		color: #fff;
		line-height: 30px;
	}

	#body .container form input[type=text] {
		width: 100%; 
		box-sizing: border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing: border-box;

		font-family: 'proxima_nova_rgregular', arial;
		font-size: 15px;
		font-weight: 100;
		color: #fff;
		line-height: 24px;

		padding: 10px;
		border: 2px solid #323231;

		background-color: #323231;
	}

	#body .container form textarea {
		width: 100%; 
		box-sizing: border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing: border-box;
		height: 100px;

		font-family: 'proxima_nova_rgregular', arial;
		font-size: 15px;
		font-weight: 100;
		color: #fff;
		line-height: 24px;

		padding: 10px;
		border: 2px solid #323231;

		background-color: #323231;
	}

	#body .container form input[type=submit] {
		font-family: 'Conv_DINPro-Medium', arial;
		font-size: 18px;
		font-weight: 100;
		color: #000;
		line-height: 40px;

		background-color: #bbb;

		text-align: center;
		text-transform: uppercase;

		border: none;

		padding: 0px;
		padding-left: 1em;
		padding-right: 1em;

		margin-top: 10px;
		margin-right: 1em;

		cursor: pointer;
	}

	#body .container form input[type=submit]:hover {
		background-color: #fff;
	}

	#body .container form .error-message {
		display: inline-block;
		font-family: 'proxima_nova_rgregular', arial;
		font-size: 18px;
		font-weight: 100;
		line-height: 40px;
		color: #fff;

		text-align: center;
	}

	#body .container form input[type=text].error-field, #body .container form textarea.error-field {
		border: 2px solid red;
	}




	#footer {
		height: 50px;
		margin-top: 2em;
	}

	#footer .container {
		border: 1px solid #ccc;
		-webkit-border-radius: 8px;
		border-radius: 8px;
	}

	#footer p {
		float: left;
		font-family: 'proxima_nova_rgregular', arial;
		font-size: 14px;
		font-weight: 100;
		line-height: 50px;
		color: #999;

		margin: 0;
		padding: 0;
		padding-left: 1em;
	}

	#footer nav {
		float: right;
	}

	#footer nav li {
		float: left;
		list-style: none;
	}

	#footer nav li a {
		display: block;
		font-family: 'proxima_nova_rgregular', arial;
		font-size: 14px;
		font-weight: 100;
		line-height: 50px;
		color: #999;

		text-align: center;

		cursor: pointer;
		padding-right: 1em;
	}

	#footer nav li a:hover, #footer nav li.active a {
		color: #000;
	}




/* SMALLER SCREENS
--------------------------------------------------------- */

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

	body {
		background-color: #ffffff; 
		background-repeat: no-repeat;
		background-position: top center;
	}


	body > section {
		padding-left: 1em;
		padding-right: 1em;
		b/ackground-color: red;
	}

	.container {
		width: 900px;
		margin: 0 auto;
		overflow: auto;
	}

	#header .container, #intro .container, #about .container, #work .container, #contact .container {
		width: auto;
	}

}



/* GENERAL MOBILE CSS
--------------------------------------------------------- */


@media handheld, only screen and (max-width: 767px) {

	body {
		font-size: 200%;
		-webkit-text-size-adjust: none;
	}

	body > section {
		padding-top: 2em;
		padding-bottom: 2em;
		padding-left: 0px;
		padding-right: 0px;
	}
	
	body, .container {
		width: 100%;
		min-width: 0;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}

	section .container {
		width: auto;
		padding-left: 1em;
		padding-right: 1em;
	}
	
	.col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9 {
		width: auto;
		float: none;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}

	#header nav ul {
		width: 100%;
		padding: 0;
	}

}