/*  HTML5 Boilerplate  */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }  				

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

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

body { font:13px/1.231 sans-serif; *font-size:small; } 

a, a:active, a:visited {
	color: #55C1AE; 
	text-decoration: none;
	-moz-transition: color .1s linear;
	-o-transition: color .1s linear;
	-ms-transition: color .1s linear;
	-webkit-transition: color .1s linear;
	transition: color .1s linear;
}

a:hover, a:active { outline: none; color: #4D4D4D }

ul, ol { margin: 0; list-style: none; }

small { font-size: 85%; }
strong { font-weight: 700; }

/* ::-moz-selection{ background: #55C1AE; color:#fff; text-shadow: none; } */
/* ::selection { background: #55C1AE; color:#fff; text-shadow: none; } */
/* a:link { -webkit-tap-highlight-color: #55C1AE; } */


.clearfix:before, .clearfix:after, .post:before, .post:after, .content:before, .content:after, .postheader:after, .postheader:before, header:after, header:before {  content: "\0020"; display: block; height: 0; visibility: hidden;	} 
.clearfix:after, .post:after, .content:after, .postheader:after, header:after { clear: both; }
.clearfix, .post, .content, .postheader, header { zoom: 1; }


/* --------------------------------------------------------------------------------- */
/* BODY ---------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */

body {
	background: #FFF;
	font-family: "proxima-nova", sans-serif;
	font-weight: 300;
	color: #4D4D4D;
	font-size: 12px;
	line-height: 1.25em;
}



/* --------------------------------------------------------------------------------- */
/* HEADER -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */

header {
	width: 90%;
	margin: 5% 0px 0px 5%;	
}

header h1 { 
	font-size: 66px;
	line-height: 1.2em;
	font-weight: 100;	
}

/*----------------*/
.Logo, .Twitter, .LinkedIn, .Facebook, .Instagram, .Flickr, .Vimeo, .Society6, .Contact, .Resume{
	height: 66px;
}
.Twitter{
	float: left;
}
nav#Logostrip {
	text-align: right;
	width: 100%;
}
nav#Logostrip ul li {
	display: inline;
	margin: 0px 0px 0px -4px;
	font-size: 18px;
}
/*----------------*/


.Name{
	font-weight: 500;
}

.Name:link, .Name:visited{
	color: #55C1AE;
}

.Name:active, .Name:hover, .Name:active{
	color: #4D4D4D; -moz-transition: color .1s linear; -o-transition: color .1s linear;  -ms-transition: color .1s linear; -webkit-transition: color .1s linear; transition: color .1s linear;
}

#Next {
	float:right
}



/* --------------------------------------------------------------------------------- */
/* SUB NAV ------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */

nav#SubNav {
	text-align: left;
	width: 90%;
	margin: 1.5% 5% 2.75% 5%;
	font-weight: 800;
}

nav#SubNav ul li {
	display: inline;
	margin: 0px 1.25% 0px 0px;
	font-size: 18px;
}

#SubNav li:nth-child(1) a, a:active, a:visited {
	color: #91C556; text-decoration: none; -moz-transition: color .1s linear; -o-transition: color .1s linear; -ms-transition: color .1s linear; -webkit-transition: color .1s linear; transition: color .1s linear;}
#SubNav li:nth-child(2) a, a:active, a:visited {
	color: #C4D643; text-decoration: none; -moz-transition: color .1s linear; -o-transition: color .1s linear; -ms-transition: color .1s linear; -webkit-transition: color .1s linear; transition: color .1s linear;}
#SubNav li:nth-child(3) a, a:active, a:visited {
	color: #E9D957; text-decoration: none; -moz-transition: color .1s linear; -o-transition: color .1s linear; -ms-transition: color .1s linear; -webkit-transition: color .1s linear; transition: color .1s linear;}
#SubNav li:nth-child(4) a, a:active, a:visited {
	color: #F9C226; text-decoration: none; -moz-transition: color .1s linear; -o-transition: color .1s linear; -ms-transition: color .1s linear; -webkit-transition: color .1s linear; transition: color .1s linear;}
#SubNav li:nth-child(5) a, a:active, a:visited {
	color: #F68E2A; text-decoration: none; -moz-transition: color .1s linear; -o-transition: color .1s linear; -ms-transition: color .1s linear; -webkit-transition: color .1s linear; transition: color .1s linear;}
#SubNav li:nth-child(6) a, a:active, a:visited {
	color: #E46234; text-decoration: none; -moz-transition: color .1s linear; -o-transition: color .1s linear; -ms-transition: color .1s linear; -webkit-transition: color .1s linear; transition: color .1s linear;}
#SubNav li:nth-child(7) a, a:active, a:visited {
	color: #C73461; text-decoration: none; -moz-transition: color .1s linear; -o-transition: color .1s linear; -ms-transition: color .1s linear; -webkit-transition: color .1s linear; transition: color .1s linear;}
#SubNav li:nth-child(8){
	width:0px;
}

#SubNav li a:hover, a:active { outline: none; color: #4D4D4D; }

.SubActive {
}



/* --------------------------------------------------------------------------------- */
/* SCALED ARCHIVE IMAGE GRID ------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */

nav#ArchiveList {
	text-align: left;
	width: 90%; /* Establishes Outer Margins */
	margin: 2.5% 5% 0px 5%; /* Positions Grid */
}

nav#ArchiveList ul li {
	display: inline-block;
	width: 23.5%; /* Establishes 4 Columns Across */
	margin: 0px 2% 0px 0px; /* Establishes Inner Gutters */
}

nav#ArchiveList ul li:nth-child(4n+4){
	margin: 0px 0px 0px 0px; /* Removes Gutters on Every Fourth Child */
}

.Archive {
	margin: 0px 0px -6px 0px; /* Adds Space After Each Row */
}

.ArchiveImage {
	width: 100%;
	margin: 0px 0px -5px -5px; /* Adds Space After Each Image */
}

.ArchiveImage img{ 
	border: 5px solid #FFF;
	width: 100%; 
	outline: 1px solid rgba(77, 77, 77, .00);
	outline-offset: -6px;
	/* box-shadow: 0px 1px 2px #BBB; */
}

.ArchiveImage a:link img, .ArchiveImage a:visited img { 
	border: 5px solid #FFF;  
	-moz-transition: border .1s linear;
	-o-transition: border .1s linear;
	-ms-transition: border .1s linear;
	-webkit-transition: border .1s linear;
	transition: border .1s linear; 
}

.ArchiveImage a:hover img, .ArchiveImage a:active img { 
	border: 5px solid #55C1AE; /* Color of Image Border Rollover */ 
	outline: 1px solid rgba(0, 196, 174, 1.0);
}	
	
.ArchiveTitle {
	font-size: 1px;
	font-weight: 350;
	visibility:hidden;
	height: 0px;
}



/* --------------------------------------------------------------------------------- */
/* RIVER LAYOUT -------------------------------------------------------------------- *
/* --------------------------------------------------------------------------------- */

nav#Shell {
	margin: 22px 0px 0px -5px;
}

.imgRow {
  	clear: left;
  	width: 90%; /* Makes YELLOW 90% of Page */
  	margin: 2.5% 5% 0px 5%; /* Positions Grid */	
}

.imgRow img {
  	float: left;
  	margin: 0px 0px 0px 0px; /* Positions Image */
 	outline: 10px solid #FFF;
 	outline-offset: -5px; 
}



/* --------------------------------------------------------------------------------- */
/* FULL SIZE PROJECT IMAGE --------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */

nav#ProjectList {
	text-align: left;
	width: 90%; /* Establishes Outer Margins */
	margin: 2.5% 5% 0px 5%; /* Positions Grid */
}

.Project {
	margin: 0px 0px 0px 0px; /* Adds Space After Each Row */
}

.ProjectImage {
	width: 100%;
	margin: 0px 0px 0px -5px; /* Adds Space After Each Image */
}

.ProjectImage img, .ProjectImage img { 
	border: 5px solid #202020; 
	outline: 1px solid rgba(77, 77, 77, .25);
	outline-offset: -6px;
}

.ProjectImage:after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: red;
  z-index: -1;
}


/* --------------------------------------------------------------------------------- */
/* LIGHTBOX ------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------------- */	



/* --------------------------------------------------------------------------------- */
/* FOOTER -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */

nav#Foot {
	font-size: 18px;
	text-align: left;;
	margin: 20px 5% 20px 5%;
	line-height: 25px
}

.Scroll {
	float:right;
	font-weight: 800;
}

.Scroll li:nth-child(1) a, a:active, a:visited {
	color: #55C1AE; text-decoration: none; -moz-transition: color .1s linear; -o-transition: color .1s linear; -ms-transition: color .1s linear; -webkit-transition: color .1s linear; transition: color .1s linear;}

.Scroll:hover{
	color: #4D4D4D; -moz-transition: color .1s linear; -o-transition: color .1s linear;  -ms-transition: color .1s linear; -webkit-transition: color .1s linear; transition: color .1s linear;}


/* --------------------------------------------------------------------------------- */
/* OVERRIDES ----------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */

/* MEDIA QUERY - TABLET HORIZONTAL & LAPTOP NARROW*/
@media screen and (max-width: 2000px) {
	header h1 {
		font-size: 48px;
	}
	.Logo, .Twitter, .LinkedIn, .Facebook, .Instagram, .Flickr, .Vimeo, .Society6, .Contact, .Resume{
		height: 48px;
	}	
	nav#SubNav ul li {
		font-size: 18px;
	}
  	nav#ArchiveList ul li:nth-child(4n+4){
		margin: 0px 0px 0px 0px; /* Removes Gutters on Every Fourth Child */
	}
  	nav#ArchiveList ul li {
		width: 23.5%; /* Establishes 4 columns across */ 
	}
	nav#Foot {
		font-size: 18px;
		line-height: 25px
	}
}

/* MEDIA QUERY - TABLET VERTICAL*/
@media screen and (max-width: 988px) {
	header h1 {
		font-size:34px;
	}
	.Logo, .Twitter, .LinkedIn, .Facebook, .Instagram, .Flickr, .Vimeo, .Society6, .Contact, .Resume{
		height: 34px;
	}
	nav#SubNav ul li {
		font-size: 15px;
	}
  	nav#ArchiveList ul li:nth-child(2n+2){
		margin: 0px 0px 0px 0px; /* Removes Gutters on Every Second Child */
	}
  	nav#ArchiveList ul li {
		width: 49%; /* Establishes 2 columns across */ 
	}
	nav#Foot {
		font-size: 15px;
		line-height: 19px
	}	
}

/* MEDIA QUERY - MOBILE HORIZONTAL*/
@media screen and (max-width: 627px) {
	header h1 {
		font-size: 26px;
	}
	.Logo, .Twitter, .LinkedIn, .Facebook, .Instagram, .Flickr, .Vimeo, .Society6, .Contact, .Resume{
		height: 28px;
	}
	nav#SubNav ul li {
		font-size: 11px;
	}
  	nav#ArchiveList ul li:nth-child(2n+2){
		margin: 0px 0px 0px 0px; /* Removes Gutters on Every Second Child */
	}
  	nav#ArchiveList ul li {
		width: 49%; /* Establishes 2 columns across */ 
	}
	nav#Foot {
		font-size: 11px;
		line-height: 15px
	}
	
	.imgRow img {
 	outline: 6px solid #FFF;
 	outline-offset: -3px; 
 	
}

/* MEDIA QUERY - MOBILE VERTICAL*/
@media screen and (max-width: 500px) {
	header h1 {
		font-size: 18px;
	}	
	.Logo, .Twitter, .LinkedIn, .Facebook, .Instagram, .Flickr, .Vimeo, .Society6, .Contact, .Resume{
		height:28px;
	}

	nav#SubNav ul li {
		font-size: 11px;
	}	
  	nav#ArchiveList ul li:nth-child(1n+1){
		margin: 0px 0px 0px 0px; /* Removes Gutters on All Children */
	}
  	nav#ArchiveList ul li {
		width: 100%; /* Establishes 1 column across */ 
	}
	nav#Foot {
		font-size: 11px;
		line-height: 15px
	}
	
	.imgRow img {
 	outline: 4px solid #FFF;
 	outline-offset: -2px; 
}


}



/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* END ----------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */