/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* END OF RESET ======== */


/*
=======================
BASIC STRUCTURE
=======================
*/
html { font-size:62.5%; line-height:1.25em; } /* sets defualt font size to 10px */

body {
	background:#f1f0f0;
	color:#666;
	font-family:'Lato', sans-serif;
	text-align:center;
}

strong, b { font-weight:bold; }
em, i { font-style:italic; }

p, table  { margin:1em 0; }
img { border:0; }
.access, hr { display:none; }

a { text-decoration:none; color:#55c8e6; font-weight:bold; }
a:hover { text-decoration:underline; }

h1, h2, h3, h4, h5, h6 { font-weight:normal; font-family:'Lato', sans-serif; }



/* ==================== */

#wrap { width:100%; position:relative; overflow:auto; text-align:left; }



/*
========================
LEFT SIDE - NAVIGATION 
========================
*/
#left-pane { background-color:#55c8e6; width:300px; position:fixed; left:0; top:0; height:100%; color:#fff; }
#left-pane a { color:#fff; }
#left-pane a:hover { text-decoration:none; color:#111; }

#left-pane .spacing { letter-spacing:1px; }

#left-pane h1 a {
	background:url(../images/logo-hover.png) no-repeat top left;
	width:50px;
	height:0;
	padding:48px 0 0;
	margin:0 10px 0 0;
	font-size:0;
	line-height:0;
	display:block;
	overflow:hidden;
	float:left;
}
#left-pane h1 a:hover { background:url(../images/logo.png) no-repeat top left; }

#left-pane h2 {
	font-size:2.2em;
	line-height:1em;
	text-transform:uppercase;
	padding:0.3em 0 2em;
}
#left-pane h2 strong { display:block; }

#left-pane h3 { font-size:3em; padding:1em 0 0; color:#fff; }
#left-pane p { font-size:1.3em; margin:0; }


.nav { padding:2em; }

.nav ul {  }

.nav ul li { padding:0; }
.nav ul .spacer { padding:2em 0 0; }

.nav ul li a {
	font-size:1.6em;
	line-height:1.25em;
	font-weight:normal;
	text-transform:uppercase;
}
.nav ul li a span { font-weight:bold; }

.hamburger {display: none!important; }
.cross {display: none!important; }


/*
========================
RIGHT SIDE - NAVIGATION 
========================
*/
#right-pane { position:relative; left:300px; width:75%; }

.block { background-color:#f1f0f0; border-bottom:6px solid #fff; width:95%; padding:4em 0 4em 2em; text-align:left; }
.secondary .block { width:90%; padding:4em 2em; border-bottom:none; }


.block h2 { color:#666; text-transform:uppercase; font-size:3em; padding:0; }
.block h2 strong { font-weight:800; }
.block h4 { font-size:2em; text-transform:uppercase; border-bottom:2px solid #fff; padding:0 0 0.4em; }

.examples { width:100%; overflow:auto; margin:0; padding:0; }
.examples .work { width:350px; min-height:250px; display:block; float:left; margin:1em 2em 1em 0; box-shadow:1px 0 5px #bbb; }
.examples .work a { display:block; width:100%; min-height:250px; }


/* WEBDESIGN BLOCK
======================== */
.webdesign { }

/* LOGODESIGN BLOCK
======================== */
.logodesign { }

/* PRINTDESIGN BLOCK
======================== */
.printdesign { }

/* PHOTOGRAPHY BLOCK
========================  */
.photography { border-bottom:none; }


/*
========================
SECONDARY CONTENT
========================
*/
.content { margin:4em 0 0; padding:0 0 0 2em; width:90%; }

.content h2 { font-size:4.5em; text-transform:uppercase; color:#333; font-weight:bold; letter-spacing:-2px; }
.content h3 { font-size:2.5em; color:#333; text-transform:uppercase; }
.content h4 { font-size:1.6em; font-weight:bold; padding:1em 0 0; color:#FF921C; }
.content h5 { font-size:1.6em; text-transform:uppercase; }

.content p { font-size:1.4em; color:#666; line-height:1.25em; width:90%; }

.content ul li { list-style-type:none; padding:0.5em 0; }
.content ul li a { font-size:1.4em; }

.photo .content img { box-shadow:1px 0 5px #bbb; border:1px solid #f8f8f8; }

.content .example,
.content .notxt { margin:6em 0 0 2em; text-align:left; }

.content .example h3 { padding:0; font-weight:bold; }

.content .example img,
.content .notxt img { margin:0 3em 3em 0; }

.content .example .caption,
.content .notxt .caption { font-size:1.2em; color:#999; margin:1em 0 0; }

.content .notxt h3 { padding:0 0 1em; font-weight:bold; }

.shadow,
.shadow-sm-img { margin:1em 0; }

.shadow img,
.shadow-sm-img img { box-shadow:1px 0 5px #bbb; margin:0 2em 0 0; }

.content .example a img { box-shadow:1px 0 5px #bbb; margin:0 3em 0 0; }

.content .logo { margin:6em 0 4em 2em; text-align:center; width:50%; }

.header-break { text-align:center; width:58%; text-transform:uppercase; color:#333; padding:1em 0!important; border-bottom:2px dotted #666; }



/*
========================
FOOTER
========================
*/
.footer { width:100%; position:relative; background-color:#333; padding:1em 0; z-index:300; }
.footer .credits { color:#fff; font-size:1.4em; padding:0 0 0 2em; }