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;
	vertical-align: baseline;
}
html {
	overflow-y: scroll;
	font-size: 100%;
}
body { line-height: 1; font-size: 100%; text-align: left; }
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; }
h1, h2, h3, h4, h5, h6 { clear: both; }
a:focus { outline: thin dotted; }

article, details, figcaption, figure, footer, header, nav, section { display: block; }

img { border: 0; }

body { background-color: #ecece8; color: #000; } /* { background: #f0f0f0; } */



a {	
	color: red;
   -webkit-transition:color .25s ease-in;  
   -moz-transition:color .25s ease-in;  
   -o-transition:color .25s ease-in;  
   transition:color .25s ease-in; 
	text-decoration:underline;
	border: 0;  
	}

a:hover { 
	color: #000; 
   -webkit-transition:color .25s ease-out;  
   -moz-transition:color .25s ease-out;  
   -o-transition:color .25s ease-out;  
   transition:color .25s ease-out;  
	}





h1 { font-size: .8em; font-family:  'Courier', sans-serif; font-weight: 700; line-height: 1.3em; letter-spacing: .1em; margin-bottom: 15px; }

h2 { font-size: .8em; font-family:  'Courier', sans-serif; font-weight: 400; line-height: 1.4em;  }

p { font-size: .8em; font-family:  'Helvetica Neue', 'Helvetica', sans-serif; font-weight: 400; line-height: 1.7em; margin-bottom: 15px; }

.noner { margin-bottom: 0px; }


ul { margin-bottom: 15px; }

li { font-size: .8em; font-family:  'Helvetica Neue', 'Helvetica', sans-serif; font-weight: 400; line-height: 1.6em; margin-bottom: 5px; }

#macondo { 
	width: 85%;
	max-width: 900px; 
	position: relative;
	margin: 45px auto; 
	padding: 20px 3%;  
	background-color: #fff;
	border: 1px solid #e1e1e1;
	border-top: 6px solid #e1e1e1;
	}
	

.chunklet { margin-bottom: 35px; padding-bottom: 20px; border-bottom: 1px solid #E3E3E3; width: 100%; clear: both; }
.chunknone { margin-bottom: 35px; border-bottom: 1px solid #E3E3E3; width: 100%; clear: both; }
.chunknomarg { margin-bottom: 0px; padding-bottom: 35px; border-bottom: 1px solid #E3E3E3; width: 100%; clear: both; }

#box1 { font-size: .8em; font-family:  'Helvetica Neue', 'Helvetica', sans-serif; font-weight: 700; line-height: 1.3em; letter-spacing: .1em; margin-bottom: 25px; padding: 8px 0 20px 0; border-bottom: 1px solid #E3E3E3; width: 100%; clear: both; }

#box2 > img { width:100%; height:auto; }

.box3_col { width: 21%; float: left; margin-right: 4%; }
.box3_col img { max-width: 100%;  }


.box4_col1 { width: 20%; float: left; }
.box4_col1 img { width: 80%; }
.box4_col2 { width: 70%; float: left; }

.box5_col1 { width: 15%; float: left; }
.box5_col1 img { width: 90%; }
.box5_col2 { width: 27%; float: left; }
.box5_col3 { width: 15%; float: left; }
.box5_col3 img { width: 80%; }
.box5_col4 { width: 40%; float: left; }

.box6_col1 { width: 35%; float: left; }
.box6_col1 img { width: 85%; }
.box6_col2 { width: 45%; margin-right: 3%; float: left; }
.box6_col3 { width: 17%; float: left; }

.box7_col1 { width: 13%; float: left; }
.box7_col2 { width: 58%; float: left; }



/* PORTFOLIO MAIN */

.port_box { width: 32%; float:left; margin: 0 2% 30px 0;  font-size: .8em; font-family:  'Courier', sans-serif; font-weight: 400; line-height: 1.1em; }
.port_none { margin: 0 0 30px 0; }
.port_box img { margin-bottom: 10px;  }

.port_list1 { width: 50%; float: left; }
.port_list2 { width: 50%; float: left; }



/* PORTFOLIO PAGES */

#workstage { width: 100%; margin: 45px auto; text-align: center; }

#workstage h1 { border-bottom: 1px solid #E3E3E3; padding-bottom: 15px; text-align: left; }

.localnav { float: right; font-weight: 500; font-size: .9em; }


#workstage h3 { font-size: .9em; font-family:  'Helvetica Neue', 'Helvetica', sans-serif; font-weight: 400; line-height: 1.4em; margin: 45px 0; padding:15px 0; border-top: 1px solid #E3E3E3; text-align: left; }

#workstage h5 { font-size: .9em; font-family:  'Helvetica Neue', 'Helvetica', sans-serif; font-weight: 400; line-height: 1.4em; margin-bottom: 45px; padding-bottom:15px; border-bottom: 1px solid #E3E3E3; text-align: left; }

/* #workstage img { width: 90%; margin: 0 auto 45px auto;  } */



#scrollstage { width: 100%; margin: 45px auto; text-align: center; }

#scrollstage h1 { border-bottom: 1px solid #E3E3E3; padding-bottom: 15px; text-align: left; }

#scrollstage h3 { font-size: .9em; font-family:  'Helvetica Neue', 'Helvetica', sans-serif; font-weight: 400; line-height: 1.4em; margin: 45px 0; padding:15px 0; border-top: 1px solid #E3E3E3; text-align: left; }


.wrapper { 
margin: auto; 
text-align: center; 
position: relative;
width: 900px;
}

.scrolls { 
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
} 

.scrolls img { 
margin: 0 35px;
display:inline-block;
*display:inline;
}

.scrolls160 { height: 160px; }
.scrolls200 { height: 200px; }
.scrolls500 { height: 500px; }


#logopage { margin-bottom: 70px; }
#logopage img { margin-top: 70px; }


#footer { padding-top:15px; border-top: 1px solid #E3E3E3; font-size: .8em; font-family:  'Helvetica Neue', 'Helvetica', sans-serif; font-weight: 500; line-height: 1.5em; margin-bottom: 15px;  letter-spacing: .1em; text-align: left;  }



/* PROJECTS 2 COL */

.projects1 { width: 61%; float: left; margin-right: 4%; }
.projects2 { width: 35%; float: left; }
.projects2 img { width: 100%; margin-bottom: 60px; }






/* TWEETPHONE */

#tweetbox { width: 60%; margin: 0 auto; }

#tweetbox div { font-size: .8em; font-family:  'Helvetica Neue', 'Helvetica', sans-serif; font-weight: 400; line-height: 1.7em; margin-bottom: 15px; }

#tweetbox div p { font-size: 1em; color: #999;  }





/* PHONE */

@media all and (max-width: 504px) {

#macondo { margin: 15px auto; padding: 10px 3%; }
.chunklet { margin-bottom: 10px; padding-bottom: 10px; }
.homer img { margin-bottom: 15px; }

.box3_col { width: 100%; text-align: center; }
.box3_col img { }
.box3_col h1 { border-top: 1px solid #E3E3E3; margin-top: 5px; padding-top: 10px;  }

.box4_col1 { width: 100%; text-align: center; }
.box4_col1 img { width: 40%; }
.box4_col2 { width: 100%; }
.box4_col2 img { width: 90%;}


.box5_col1 { width: 100%; text-align: center; }
.box5_col1 img { width: 40%; }
.box5_col2 { width: 100%; }


.box6_col1 { width: 100%; text-align: center; }
.box6_col1 img { width: 40%; }
.box6_col2 { width: 100%; }
.box6_col3 { width: 100%; }


.box7_col1 { width: 100%; text-align: center; }
.box7_col2 { width: 100%; }


.projects1 { width: 100%; }
.projects2 { width: 100%; }

.port_box { font-size: .6em; line-height: 1em; }

#workstage { margin: 5px auto; }
#workstage h5 { margin-bottom: 15px; padding-bottom:15px; }
#workstage img { width: 100%; margin: 0 auto 15px auto;  }

.port_list1 { width: 100%; }
.port_list2 { width: 50%; float: left; }


#tweetbox { width: 100%; }

#tweetbox div { font-size: .8em; }

#tweetbox div p { font-size: 1em; }

}