/* PAGE  */

body {
	margin: 0;
	padding: 0;
	background-color: #FFF;
	font-family: "Lato", arial, sans-serif;
	font-size: 0.8em;
	color: #7d8386;
	line-height: 1.5em;
	width: 100%;
	height: 100%;
	text-align: center;
}






/* MAIN BOXES  */



#top {
	display: block;
	width: 90%;
	height: 40px;
	padding: 15px 5%;
	background-color: #b4b6b9;
	border-bottom: 1px solid #666;
	z-index: 10;
}



#main {
	display: block;
	position: relative;
	z-index: 1;
	min-height: calc(100vh - 40px - 5%);
	background-color: #333;
}


#main.about,
#main.portfolio {
	max-width: 90%;
	margin: 0 auto;
	padding: 5% 5% 100px 5%;
	font-size: 1.1em;
	min-height: auto;
	background-color: transparent;
}


#main.about {
	width: 600px;
}

div.portfolio_copy {
	padding-bottom: 50px;
	width: 25%;
	float: left;
}

div.portfolio_images {
	width: 70%;
	float: right;
	text-align: left;
}


@media screen and (max-width: 1200px) {
	
	div.portfolio_copy,
	div.portfolio_images {
		float: none;
		width: 100%;
	}
}




div.portfolio_images figure {
	width: 20%;
	display: inline-block;
	margin: 0 3% 3% 0;
}

div.portfolio_images figure:hover {
	opacity: 0.5;
	transition: 0.5s ease-out;
} 

@media screen and (max-width: 736px) {
	div.portfolio_images figure {
		width: 45%;
	}
}

#container {
	display: block;
	width: 100%;
	text-align: left;
}

#container img {
	max-width: 100%;
	height: auto;
}

#slide_holder {
	text-align: center;
}

#slide_holder img {
	width: 100%;
}


#footer {
	display: block;
	position: fixed;
	bottom: 0;
	padding: 15px 5%;
	color: #AAA;
	text-align: center;
	width: 90%;
	background: #FFF;
	border-top: 1px solid #CCC;
	z-index: 7;
}


h1 {
	padding: 0;
	margin: 0 0 0.5em 0;
	font-family: "Abril Fatface";
	font-weight: normal;
	line-height: 1.1em;
}

#work_subnav {
	z-index: 30;
}



/* CONTACT FORM  */


form.contact_form div {
	clear: both;
	padding: 1em 0;
}

form.contact_form div label {
	display: block;
	float: left;
	width: 8em;
}

form.contact_form input,
form.contact_form textarea,
form.contact_form button {
	padding: 1em;
	background: #CCC;
	color: #666;
	border: 0;
	width: 100%;
	text-align: center;
}


form.contact_form textarea {
	height: 10em;
}


form.contact_form input[type="submit"] {
	font-family: "Abril Fatface";
	font-size: 1.5em;
	letter-spacing: 0.05em;
	padding: 0.3em;
	color: #FFF;
	transition: 0.3s ease-out;
}

form.contact_form input[type="submit"]:hover {
	background: #000;
	border-radius: 15px;
}


#footer object {
	position: relative; 
	top: -2px;
}


/* SPECIFICS  */

#logo {
	display: block;
	float: left;
}

#top_nav {
	display: block;
	float: right;
	font-size: 1.3em;
	text-transform: uppercase;
	font-weight: bold;
	color: #bcc1c3;
	padding-top: 5px;
}


#content {
	display: block;
	text-align: left;
}


div.nav_item {
	float: left;
	position: relative;
	padding-right: 2em;
}

div.nav_item a.selected {
	color: #FFF;
}


#top_nav div:last-of-type {
	padding-right: 0;
}

div.nav_item ul {
	display: none;
	position: absolute;
	list-style: none;
	text-transform: none;
	font-weight: normal;
	top: 5px;
	left: 0;
	padding: 0;
}

div.nav_item ul li.subNavItem {
	width: 150%;
}

div.nav_item ul li.subNavItem a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 10px;
	line-height: 1em;
	background: #FFF;
	font-size: 0.8em;
	border-bottom: 1px solid #CCC;
}


div.nav_item ul li.subNavItem a:hover {
	background: #f3e8c0;
}

div.nav_item ul li.selected a {
	color: #334;
}


.portfolio_images {
	display: block;
}

div#about_graphic {
	float: left;
}


/* STRIPE PAYMENT PAGE  */

span.payment-errors,
span.payment-declined,
span.payment-success {
	color: #C00;
	font-weight: 800;
}


div.pay_invoice .header {
	font-family: Times, serif;
	font-size: 2.5em;
	line-height: 1.3em;
	margin: 0;
	padding: 0;
}
div.pay_invoice .hours_amount {
	float: left;
	width: 4em;
}
div.pay_invoice .subtotal {
	font-weight: bold;
}
div.pay_invoice .total {
	font-weight: bold;
	color: #333;
}
div.pay_invoice .paid {
	font-weight: bold;
}
div.pay_invoice ul {
	padding: 1em 0 0 2em;
}
div.pay_invoice label {
	display: block;
	float: left;
	width: 8em;
}
div.pay_invoice form div {
	clear; both;
	float: none;
	margin: 0.5em 0 0 0;
}


/* LINKS  */

a:link {
	color: #333;
	text-decoration: none;
}

a:hover {
	color: #666;
	text-decoration: none;
}

a:active {
	color: #ff8212;
	text-decoration: none;
}

a:visited {
	color: #333;
	text-decoration: none;
}



a.navLink,
a.navLink:link {
	color: #7d8386;
	text-decoration: none;
}

a.navLink:hover {
	color: #223;
	text-decoration: none;
}

a.navLink:active {
	color: #ff8212;
	text-decoration: none;
}



a.subNavLink,
a.subNavLink:link {
	color: #888;
	text-decoration: none;
}

a.subNavLink:hover {
	color: #334;
	text-decoration: none;
}

a.subNavLink:active {
	color: #ff8212;
	text-decoration: none;
}


/* MEDIA QUERIES */

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

	#logo {
		margin-right: -20px;
	}
	
	#left_nav.no-mobile,
	.no-mobile {
		display: none;
	}
			
	object {
		position: relative; 
		top: -2px;
		padding: 0 1px 0 0;
	}

	div.nav_item {
		padding-right: 1em;
		font-size: 0.9rem;
	}

}