/*
Theme Name: ETC-NYC
Theme URI: http://github.com/everythingtype/etc-nyc
Author: Spellerberg Associates
Author URI: http://www.spellerbergassociates.com/

Designed by Everything Type Company, http://www.etc-nyc.com/
Developed by Spellerberg Associates, http://www.spellerbergassociates.com/

*/

*:focus { outline: none; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 20px; line-height: 1.25; letter-spacing: .02em; margin: 0; padding: 0; background: #fff; }
body.black { background: #000; color: #fff; }
body.haslightbox { overflow: hidden; }

p::selection { background: #000; color: #fff; }
p::-moz-selection { background: #000; color: #fff; }
a::selection { background: #000; color: #fff; }
a::-moz-selection { background: #000; color: #fff; }

a {color: #808080; text-decoration: none;
	-webkit-transition: color 0.2s ease;
	-moz-transition: color 0.2s ease;
	-o-transition: color 0.2s ease;
	transition: color 0.2s ease;
	}
a:hover { color: #000; }
.active a { color: #000; }

.black a:hover { color: #fff; }
.black .active a { color: #fff; }

.topbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 99;  border-top: 4px solid #000; }

.searchbox { background: #000; color: #fff; }
.searchbox form { overflow: hidden; }
.searchbox #s {  display: block; background: #000; color: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 40px; padding: 5px 20px 0 14px; margin: auto; width: 100%; border: none; }

.inputmargin { margin: auto; padding: 16px 80px 20px 80px; max-width: 750px;}
.searchborder {  border-top: 1px solid #fff; margin: 0 20px; }
.closesearch {cursor: pointer; display: block; float: right; padding: 40px 30px 0 0; }

.ui-helper-hidden-accessible { display: none; }
ul.ui-autocomplete { position: absolute; list-style: none; margin: 0; padding: 10px 20px 14px 20px; background: #000; z-index: 100; font-size: 40px; }
ul.ui-autocomplete li {  margin: 0; padding: 0; color: #8f8f8a;  }
ul.ui-autocomplete li:hover { color: #fff; cursor: pointer; }

.black .searchbox { background: #fff; color: #000; }
.black .searchbox #s { background: #fff; color: #000; }
.black .searchborder {  border-top: 1px solid #000; }
.black ul.ui-autocomplete { background: #fff; }
.black ul.ui-autocomplete li a:hover { color: #000; }

.headeranchor {position: relative; }
.header { position: absolute; top: 0; left: 0; padding-top: 15px; }

.logo { float: left; width: 95px; padding: 6px 5px 0 0; }

h1 {  font-size: 40px; line-height: 40px;  font-weight: normal; margin: 0 0 0 20px; text-align: left; position: relative; z-index: 1; }
h1 .e { display: block; }
h1 .t { display: block; }
h1 .c { display: block; }
h1 span span { display: none; }

h1 a { color: #000; }
h1 a:hover span span { display: inline; }

.black h1 a { color: #fff; }

@media screen and (min-width: 700px) {
	h1 {  font-size: 82px; line-height: 82px; }
}


/* Navigation */

.menutoggle { float: right; font-size: 20px; cursor: pointer; display: block; color: #8e8e89; padding: 15px 20px 0 0; z-index: 102;  position: fixed; top: 0; right: 0; }
.menutoggle:hover { color: #000; }

.mobilenav .navigation { font-size: 20px; line-height: 1.25; padding: 15px 0 0 12px; }
.mobilenav .navigation ul { list-style: none; margin: 0; padding: 0; }
.mobilenav .navigation li { margin: 0; padding: 0;  }

.header .navigation { display: none; }

@media screen and (min-width: 700px) {

	.menutoggle { padding: 22px 20px 0; }
	.mobilenav .navigation { font-size: 40px; line-height: 1.125; padding: 22px 0 0 20px; }
	
}

@media screen and (min-width: 850px) {

	.responsivecue { float: right; }

	.menutoggle { display: none; }

	.header .navigation { display: block; float: left; width: 130px; padding: 4px 10px 0 0;}
	.header .navigation ul { list-style: none; margin: .5em 0 1.25em 0 ; padding: 0; }
	.header .navigation li { margin: 0; padding: 0;  }

	.subnav { font-size: 14px; line-height: 1.35; }
}

/* Main Column */


.layout {padding-top: 15px; }
.layout img { max-width: 100%;  max-height: 100%;  }

h2 { line-height: 1.25; font-weight: normal; margin: 0; }
h2 a { color: #000; }

#infolink { color: #8f8f8a; display: block; cursor: pointer; }

h3 { font-size: 1em; margin: .25em 0 1em 0; font-weight: normal; }

h4 { font-size: 14px; line-height: 1.35; margin: 0; font-weight: normal; }
h4 a { color: #000; }


hr { border: 0; height: 1px; background: #000; margin-top: 3em; }


.searchlist { padding-top: .5em; margin: auto; max-width: 710px; }
.searchlist h2 { font-size: 40px; margin-bottom: 2em; }
.searchlist ul { list-style: none; margin: 0; padding: 0; font-size: 40px; line-height: 1.3; letter-spacing: .02em; }
.searchlist li { margin: 0; padding: 0;  }

.biglist { padding-top: 4px; margin-left: 240px; }
.biglist ul { list-style: none; margin: 0; padding: 0; font-size: 80px; line-height: .95; letter-spacing: -.03em; }
.biglist li { margin: 0; padding: 0;  }

.home { padding-top: .5em; max-width: 970px; margin: auto; }
.home .column { float: left; }
.homecontent { font-size: 40px; line-height: 1.2; padding-bottom: 20px; overflow: hidden; }

.homebottom { font-size: 40px; line-height: 1.2; padding-bottom: 80px; overflow: hidden; }
.homebottom h2 { font-size: 40px; color: #808080; margin: 25px 0; }
.homebottom h2 a { color: #808080; }

.navbalance { margin: 0 20px 0 75px; }

.page { max-width: 670px; padding: .5em 0 100px 0;  }
.page h2 { font-size: 20px; text-align: center; padding-top: 30px; }
.page p.date { margin-top: 0; color: #808080;  text-align: center; }

.page .column, .project .column { float: left; width: 100%; }

.project { padding: .5em 20px 0 75px; margin: auto; }
.project h2 { font-size: 20px; text-align: center; padding-top: 30px; }

.page .column { float: left; padding-top: 25px; }
 

.infoslide { position: relative; top: -28px; }
.slides h3 { text-align: center; }

.projectcontent { padding-bottom: 100px; max-width: 670px; margin: auto; }

.relatedprojects { border-top: 1px solid #000; padding-bottom: 100px; overflow: hidden; max-width: 670px; margin: auto; }
.relatedprojects h3 { text-align: left; }

.pagenav { display: none; }

.postmeta { font-size: 14px; line-height: 1.35; overflow: hidden; }
.postmeta .column { float: left; width: 200px; }
.postmeta ul {list-style: none; margin: 0; padding: 0; }
.postmeta li { margin: 0; padding: 0;  }


@media screen and (min-width: 700px) {

	.page .column { padding-top: 0; }
	.page h2 { padding-top: 8px; }
	.navbalance { margin: 0 20px 0 100px; }
	.project { padding: .5em 20px 0 100px; }
	.project h2 {  padding-top: 8px; }
}

@media screen and (min-width: 850px) {
	.navbalance { margin: 0 20px 0 240px; }
	.project { padding: .5em 20px 0 240px; }
	.projectcue { float: right; }
}

@media screen and (min-width: 1150px) {
	.navbalance { margin: 0 240px; }
	.page { margin: auto; }

	.project { padding: .5em 240px 0 240px; max-width: 100%; }
	.pagenav { display: block; font-size: 20px; position: fixed; top: 0; right: 0; padding: 13px 30px 0 0; }
	.pagenav .separator { display: none; }
	.pagenav .nexttitle { display: none; }

}

/* Content Columns */

@media screen and (min-width: 750px) {

	.contentcolumns { overflow: hidden; }
	.contentcolumns .contentcolumn { float: left; width: 50%; box-sizing: border-box; }
	.contentcolumns .contentcolumn:first-child { padding-right: .5em; }
	.contentcolumns .contentcolumn:last-child { padding-left: .5em; }

}

/* Masonry */

.masonry {  padding-top: 2.5em;  overflow: hidden; }
.masonry h2 { font-size: 40px; text-align: center; }

.masonry .grid { overflow: hidden; clear: both; margin-left: 75px; }

.griditem { position: relative; width: 100%; }
.griditem img { width: 100%; }

.griditem .ratio { padding-top: 80%; }

/*
.griditem.large { width: 50%; }
.griditem.large .ratio { padding-top: 80%; }

.griditem.regular { width: 50%; }
.griditem.regular .ratio { padding-top: 80%; }

.relatedproject .griditem { width: 50%; }
.relatedproject .griditem .ratio { padding-top: 80%; }
*/
.griditem .gridinner { position: absolute; top: 0; right: 30px; bottom: 42px; left: 0; }

.thumbnail { line-height: 0; padding: 0 0 43px 0; text-align: center; height: 100%; }
.thumbnailpadding {  position: relative; height: 100%; } 
.thumbnailalign { position: absolute; left: 0; right: 0; bottom: 43px;  }
.gridcaption {border-top: 1px solid #000; background: #fff; padding: 7px 0 0 0; position: absolute; bottom: 0; left: 0; width: 100%; }

.griditem .meta {color: #808080; display: none; overflow: hidden; }

@media screen and (min-width: 700px) {
	.masonry .grid { margin-left: 100px; }
}

@media screen and (min-width: 850px) {
	.masonry {  padding-top: .5em; }
	.masonry .grid { margin-left: 240px; }
}

@media screen and (min-width: 1000px) {
	.griditem { width: 50%;  float: left; }
}

@media screen and (min-width: 2100px) {
	.griditem { width: 33.3333333333%; }
}

/* Slideshow */
.slides {  margin: auto; }
.slides .slide { width: 100%; text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.slide img { margin: auto; padding: 50px 0; box-sizing: border-box; }

.slide .slideinner { padding: 50px 0; box-sizing: border-box; }
.slide .slideinner .next-slide { height: 100%; }
.slide .slideinner img { padding: 0; }

.slidecaption {clear: both; width: 100%; text-align: left; }
.slidecaption .title { color: #808080; }
.slidecaption a { float: right;}

.nextslide {
	cursor: url('images/down-1x.png'), auto;
	cursor: -webkit-image-set(
	  url('images/down-1x.png') 1x,
	  url('images/down-2x.png') 2x
	), auto;
}

/* Footer */

.footer {display: none; }

.toplink { font-family: "Icons", sans-serif; text-align: center; font-size: 26.5px; margin: 0; }
.js .toplink { position: fixed; bottom: 30px; left: 30px;  }
.toplink a { display: none; }

#loading { position: fixed; bottom: 28px; left: 0; right: 0; text-align: center; }

@media screen and (min-width: 700px) {
	.toplink a { display: inline; }
}

/* Lightbox */

.lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;  }
.lightbox .box { height: 100%; overflow: auto; position: relative; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

#introshade .box { background: #1E1E14; color: #fff;  }
#introshade a { color: #8e8e89; }
#introshade a:hover { color: #fff; }

#navshade { z-index: 100; }
#navshade .box { background: #fff; border-top: 4px solid #000; }


/* Intro */

#introshade {  font-family: "nimbus-sans",sans-serif !important; z-index: 110; }

.intrologo {  font-size: 40px; line-height: 40px; font-weight: normal; margin: 19px 0 0 20px; text-align: left; float: left; padding: 6px 5px 0 0;}
.intrologo span { display: block; }

.intrologo .e { padding-left: 2px; }
.intrologo .t { padding-left: 3px; }
.intrologo .c { padding-left: 0px; }

.intromission { font-size: 40px; line-height: 40px;  max-width: 400px; font-weight: normal;  padding: 25px 25px 50px 25px; clear: left;}
.intromission p { margin: 0; }

.closelightbox { cursor: pointer; display: block; font-family: "Icons"; font-size: 42px; z-index: 2; margin-top: 32px; }
.closelightbox span { display: none; }


@media screen and (min-width: 700px) {

	.intrologo .e { padding-left: 4px; }
	.intrologo .t { padding-left: 7px; }
	.intrologo .c { padding-left: 0px; }

	.alltypes { display: inline-block !important; position: relative; width: 368px; vertical-align: top; }
	.alltypes em { display: none; }

	#types { display: block; width: 377px; height: 96px; background: url('images/alltypes.svg'); background-size: 377px 1836px; position: absolute; top: -7px; left: -3px; }
	#types.alltypes-01 {background-position: 0 0; }
	#types.alltypes-02 {background-position: 0 102px; }
	#types.alltypes-03 {background-position: 0 204px; }
	#types.alltypes-04 {background-position: 0 306px; }
	#types.alltypes-05 {background-position: 0 408px; }
	#types.alltypes-06 {background-position: 0 510px; }
	#types.alltypes-07 {background-position: 0 612px; }
	#types.alltypes-08 {background-position: 0 714px; }
	#types.alltypes-09 {background-position: 0 816px; }
	#types.alltypes-10 {background-position: 0 918px; }
	#types.alltypes-11 {background-position: 0 1020px; }
	#types.alltypes-12 {background-position: 0 1122px; }
	#types.alltypes-13 {background-position: 0 1224px; }
	#types.alltypes-14 {background-position: 0 1326px; }
	#types.alltypes-15 {background-position: 0 1428px; }
	#types.alltypes-16 {background-position: 0 1530px; }
	#types.alltypes-17 {background-position: 0 1632px; }
	#types.alltypes-18 {background-position: 0 1734px; }


	.intrologo {  font-size: 82px; line-height: 82px; }
	.intromission { font-size: 82px; line-height: 82px;  max-width: 640px; padding: 46px 0 25px 25px; }
	.closelightbox { font-size: 84px; margin-top: 63px; }

}

@media screen and (min-width: 850px) {
	.intromission { max-width: 950px; }
	.intromission .line { display: block; }
}

@media screen and (min-width: 1300px) {
	.intromission { float: left; padding: 25px 0 0 66px; clear: none; }
}