/* Reset
-------------------------------------------------------------------------------*/
html, body, body div, header, footer, main, 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, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
	list-style-type: none;
}

.tmblr-iframe { display: none; }

ol li { list-style: decimal outside; margin-left: 1.3em }

	footer { /* background:rgb(241, 218, 74); */ padding: 88px 0 44px; }
	body, .caption { font-size: 15px; line-height: 22px; letter-spacing: .02em;
					font-family: 'Basis Grotesque Pro Black'; -webkit-font-smoothing: antialiased; color: #3F3F3F;
}



	img {
				height: auto;
				width: 100%;
				/*Because images don't have line-height, they are missing the little gap between the height of the font and the leading. Add this space where it would be as text. Because the letter is centered on the lineheight, it will be .5((line-height)-(font-size));*/

				/*Extra space aligns the the x-height, and not full height,the caps to descencers.*/
		}
		img, iframe {
			padding-top: 5.5px;
			padding-bottom: 5.5px;
		}


		/* Structure
		-------------------------------------------------------------------------------*/

		header .parent{
				padding-bottom:0px;  margin-top: 0;   padding-top:0;
				/* Lineheight centers the text on leading, so the cap height does not hit the top of a 20 point line. This adds a little space to the top. Most fonts dont use the full height of their glyph space either, so there might even be some additional gap in the header that is usually a pixel or two.*/

				/*gap = (line-height) - (font-size)-(extra slug room);*/
				/*padding-top = (line-height)-(gap);*/
		}
		.parent {
			display: -webkit-flex;
	    display: -webkit-box;
	    display: -moz-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: box;
	    display: flex;

				-webkit-flex-direction: row; flex-direction: row;
				-webkit-flex-wrap: wrap; flex-wrap: wrap;
				padding: 0 22px 0 22px;
		}

		.child { margin:22px; }
		.child.nomargin { margin: 0 22px; }
		.child.nomargintop { margin: 0 22px 22px 22px; }
		.child.nomarginbottom { margin: 22px 22px 0 22px; }

		.fixed { width: 100%; height: 100%; position: fixed; top: 0; left: 0;
			display: -webkit-flex;
	    display: -webkit-box;
	    display: -moz-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: box;
	    display: flex;

			-webkit-align-items: center;	align-items: center;
			-webkit-justify-content: center;	justify-content: center;
			z-index: -1;
		}
		.event .fixed {  position: absolute;  }
		img.back { position: fixed; z-index: -2; width: 100%; height: 100%; }
/*
		.child.wrap {
			background: red; */
				/*border: 4px solid pink;*/
				/*height: 10px;*/
				/*width: 10px;*/
				/*flex-grow: 1;*/
				/*width: 25%;*/
/*				min-width: 150px;
				background: green;
		}*/

		 .child {
			/*	min-width: 266px; */
				max-width: 360px;
				-webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-shrink: 0; flex-shrink: 0;
				 -moz-flex-basis: 220px; -webkit-flex-basis: 220px; flex-basis: 220px;
				/*	-webkit-flex: 1 0 1; flex: 1 0 0;
			 380px is ideal measure for 1440 and above .. type is 19 on 28... below 15 on 21 */
		}
		.flex {
			display: -webkit-flex;
	    display: -webkit-box;
	    display: -moz-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: box;
	    display: flex;
			-webkit-flex-direction: column; flex-direction: column;
		}
		.child.grow { flex-grow: 2; }
		.child.shrink { flex-shrink: 2; }

		.child.double {
			/*	min-width: 532px; */ -webkit-flex-grow: 2; flex-grow: 2; -webkit-flex-shrink: 0; flex-shrink: 0;
				max-width: 676px;
				 -moz-flex-basis: 440px; -webkit-flex-basis: 440px; flex-basis: 440px;
				/* 			-webkit-flex: 2 0 1; flex: 2 0 0;
 align-self:flex-end;*/
			}
		.child.triple  {
		/*		min-width: 676px;  */-webkit-flex-grow: 3; flex-grow: 3;
				max-width: 100%;
				 -moz-flex-basis: 660px; -webkit-flex-basis: 660px; flex-basis: 660px;
				/* 			-webkit-flex: 3 0 1; flex: 3 0 0;

align-self:flex-end;*/
			}




		.child.center {
			display: -webkit-flex;
	    display: -webkit-box;
	    display: -moz-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: box;
	    display: flex;
			-webkit-flex-direction: column; flex-direction: column;
		-webkit-justify-content: space-around; justify-content: space-around;
		-webkit-align-items: center; align-items: center;}
		.child.centerleft {
			display: -webkit-flex;
	    display: -webkit-box;
	    display: -moz-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: box;
	    display: flex;
			-webkit-flex-direction: column; flex-direction: column;
	-webkit-justify-content: space-around; justify-content: space-around; }

		.right { text-align: right; }
		.end { align-self: flex-end; }

		.child.setheight { min-height: 440px; }

		.contact-info {
				padding-left:22px;
		}

		.tile {
			float: left;
			margin: 22px;
			width: 20%;
			min-width: 190px;
			max-width: 300px;
		}
		@media only screen and (max-width : 768px) {
			.tile { 	margin-left: 0; width: 100%; max-width: 100%; min-width: 100%; }
		}
		@media only screen and (min-width : 1160px) {
			.tile { 	width: 21%;  }
		}
		@media only screen and (min-width : 1462px) {
			.tile { 	width: 16%;  }
		}
		@media only screen and (min-width : 1627px) {
			.tile { 	width: 17%;  }
		}
		@media only screen and (min-width : 1833px) {
			.tile { 	width: 14%;  }
		}
		@media only screen and (min-width : 2100px) {
			.tile { 	width: 10%;  }
		}


		/* Type / Sizes
		-------------------------------------------------------------------------------*/

		.micro { font-size: 13px;}

		h1 {
			margin-bottom: 2vw;
			padding: 0 50px;
			font-family: "Archive Mono";
			font-size: 110px;
			text-align: center;
			color: rgb(241, 218, 74);
			text-transform: uppercase;
			word-spacing: -22px;
			line-height: 122px;
			/*	letter-spacing: 2px;

			-webkit-text-stroke-width: 2px;
		-webkit-text-stroke-color: #ddd;
		*/
		}
		@media only print {
			h1 { 	color: gold;  }
		}

		.project h1, .event h1, .post h1 { font-size: 100px; line-height: 110%; padding: 0 10vw;
			text-rendering: optimizeLegibility; text-transform: none; word-spacing: 0; letter-spacing: 0; font-family: "Archive Roman"; }
		.event h1, .post h1 { font-size: 80px; text-align: left; }
		.post h1 { font-size: 77px; line-height: 100%; }
		h2 {
			font-family: "Basis Grotesque Pro Black";
			padding-top: 22px;
			font-size: 30px;
			line-height: 44px;
		}

		.title-face {
			font-family: 'Archive Roman', serif;
			font-size: 30px;
			line-height: 44px;
		}

		.event .child p:hover { background: rgba(255,255,255,.8);  }

		.small { font-size: 20px;  line-height: 100%;  }
		.medium { font-size: 52px;  line-height: 100%;  }
		.large { font-size: 110px; line-height: 100%; }
		.huge { font-size: 220px; line-height: 100%; }

		.custom-caption { font-family: "Archive Mono"; font-size: 19px;  text-transform: uppercase; }
		.mono { font-family: "Archive Mono"; text-transform: uppercase; }
		.serif, .text-setting {
				font-family: 'Archive Roman', serif;
				font-size: 18px;
				-webkit-font-smoothing: antialiased;
				/* Measure */
				margin: auto;
				color: #2f2f2f;
				text-rendering: optimizeLegibility;
		}
		.text-setting {
				text-align: justify;
		}

		.indent { padding-left: 22px; }

		.orderlink { margin-top: 22px;}

		.chart td { padding: 22px; border: 1px solid #6f6f6f; padding-right: 44px;}
/*		.chart table { width: 100%; } */
		th { padding-left: 22px; padding-bottom: 11px; color: red; text-align: left; }

		p.para, .para p { margin-bottom: 22px; }

		em { border-bottom: 1px solid #3f3f3f; padding-bottom: 2px; font-style: normal; }

		/* Color
		-------------------------------------------------------------------------------*/
		.black, a.black:link, a.black:visited { color: #3f3f3f; }
		.lime, a.lime, a.lime:visited { color: #96e722; transition: all .5s; }
		footer, footer a:link, footer a:visited, a.red:link, a.red:visited, .red, a.lime:visited:hover, a.lime:hover { color: red; }
		.white { color: white; }
		.yellow { color: #f4e34f; }

		a:link { color:  #3f3f3f; text-decoration: none; }
		a:after { padding-left: .28em; content: '↗'; }
		p.noarrow a:after, a.noarrow:after { padding-left: 0; content: ''}
		a:hover img {  }
		a:hover, a:visited:hover, header a:link, header a:visited, a.black:hover, a.black:visited:hover { color: red; }
		a:visited { color:  #3f3f3f; text-decoration: none; }
		header a:hover, header a:visited:hover, footer a:hover, footer a:visited:hover { color: #3f3f3f; }



		/* Some children have special needs
		-------------------------------------------------------------------------------*/

		.doodad p { visibility: hidden;  }
		.doodad img:hover + p { visibility: visible; color: #3f3f3f;  }
		.multiply, .doodad { 	mix-blend-mode:multiply; }
		@-moz-document url-prefix() {
			.multiply, .doodad { 	mix-blend-mode:normal; }
		}
		.doodad img { height: auto; width: 50%;  }
		/* 	.research img { height: 242px; } */

		.child.event, .child.center { text-align: center; }
		.child.event img { border-radius: 110px; width: 220px; height: 220px; }
		.child.event h4 { margin-bottom: 22px; }

		.instagallery img { max-width: 572px }
		.eventsgallery img { width: 90%; }
		.members img { width: 70%; }
		.event .fixed img { width: 38%; max-width: 800px;  }
		.instagallery img:hover, .cycle-slideshow img:hover, .cycle-slide div:hover, .gallery li:hover  {     cursor:e-resize; }

		/* Tumblr
		-------------------------------------------------------------------------------*/
		.tumblr_post { margin-top: 66px;}
		/*
		ol.tumblr_posts li img {
			-moz-box-shadow: 0px 0px 5px #666;
			-webkit-box-shadow: 0px 0px 5px #666;
			box-shadow: 0px 0px 5px #666;
		}
		*/
		.tumblr_caption { display: none; }
		li.tumblr_photo_post  img { width: auto; height: 176px;  }
		.tumblr_posts h1 { display: none; }
		.tumblr_posts h2 { display: none; }


		/* Instagram
		-------------------------------------------------------------------------------*/
		.instafeed img { width: 100%; max-width: 460px; min-width: 250px; }
		.instafeed li { counter-increment: myIndex; }
		.instafeed li:before { display: inline; content:counter(myIndex); }
	/*		#instafeed img { opacity: 0; } */


		/* Fonts
		-------------------------------------------------------------------------------*/
		@font-face {
				font-family: 'modern_pictograms_proregular';
				src: url('/fonts/pro/modernpictogramspro_2-webfont.eot');
				src: url('/fonts/pro/modernpictogramspro_2-webfont.eot?#iefix') format('embedded-opentype'),
						 url('/fonts/pro/modernpictogramspro_2-webfont.woff') format('woff'),
						 url('/fonts/pro/modernpictogramspro_2-webfont.ttf') format('truetype');
				font-weight: normal; font-style: normal;
		}
		.pictograms, a.pictograms, a:link span.pictograms, a:visited span.pictograms {
			font-family: 'modern_pictograms_proregular';
			border-bottom: 0;
		}

		@font-face {
				font-family: 'Basis Grotesque Pro Black';
				src: url('/wp-content/themes/dev/lib/fonts/basis_grotesque_pro_black-web.eot');
				src: url('/wp-content/themes/dev/lib/fonts/basis_grotesque_pro_black-web.eot?#iefix') format('embedded-opentype'),
						 url('/wp-content/themes/dev/lib/fonts/basis_grotesque_pro_black-web.woff2') format('woff2'),
						 url('/wp-content/themes/dev/lib/fonts/basis_grotesque_pro_black-web.woff') format('woff'),
						 url('/wp-content/themes/dev/lib/fonts/basis_grotesque_pro_black-web.ttf') format('truetype'),
						 url('/wp-content/themes/dev/lib/fonts/basis_grotesque_pro_black-web.svg#svgFontName') format('svg'); /* Legacy iOS */
						 font-weight: normal; font-style: normal;
		}
		@font-face {
				font-family: 'Archive Mono';
				src: url('/wp-content/themes/dev/lib/fonts/archive_mono.eot');
				src: url('/wp-content/themes/dev/lib/fonts/archive_mono.eot?#iefix') format('embedded-opentype'),
						 url('/wp-content/themes/dev/lib/fonts/archive_mono.woff2') format('woff2'),
						 url('/wp-content/themes/dev/lib/fonts/archive_mono.woff') format('woff'),
						 url('/wp-content/themes/dev/lib/fonts/archive_mono.ttf') format('truetype'),
						 url('/wp-content/themes/dev/lib/fonts/archive_mono.svg#svgFontName') format('svg'); /* Legacy iOS */
						 font-weight: normal; font-style: normal;
		}
		@font-face {
				font-family: 'Archive Roman';
				src: url('/wp-content/themes/dev/lib/fonts/archive_roman-web.eot');
				src: url('/wp-content/themes/dev/lib/fonts/archive_roman-web.eot?#iefix') format('embedded-opentype'),
						 url('/wp-content/themes/dev/lib/fonts/archive_roman-web.woff2') format('woff2'),
						 url('/wp-content/themes/dev/lib/fonts/archive_roman-web.woff') format('woff'),
						 url('/wp-content/themes/dev/lib/fonts/archive_roman-web.ttf') format('truetype'),
						 url('/wp-content/themes/dev/lib/fonts/archive_roman-web.svg#svgFontName') format('svg'); /* Legacy iOS */
						 font-weight: normal; font-style: normal;
		}


		/* Screen big ----------- */
		@media only screen and (min-width: 1450px)  {
			/*
			.title-face, h2 { font-size: 34px; line-height: 48px; }
			body { font-size: 17px; line-height: 26px; }
			.parent { 	padding: 0 26px 0 26px; }
			.child { margin: 26px; max-width: 338px;  }
			.child.nomargin { margin: 0 26px; }
			.child.nomargintop { margin: 0 26px 26px 26px; }
			.child.nomarginbottom { margin: 26px 26px 0 26px; }
			.child.double { max-width: 676px;  padding-right: 52px;  }
			.child.triple { max-width: 100%;  padding-right: 52px;  }
			.project h1 { font-size: 110px; padding: 0 20vw; }
			.event h1 { font-size: 80px; }
			h2 { padding-top: 26px; }
			.staysmall { font-size: 15px;}
			.child.setheight { min-height: 468px; }
			.contact-info { padding-left: 26px; font-size: 15px; }
			.double p.staysmall { padding-right: 52px; }
			.indent { padding-left: 26px; }
			footer { padding: 104px 0 26px; }
	*/
		h3 { font-size: 15px; }  /* no change from smaller */
		}
		/* Screen tabletish ----------- */
		@media only screen and (max-device-width: 1024px)  {
			.child, .child.double, .child.triple { -moz-flex-basis: auto; -webkit-flex-basis: auto; flex-basis: auto; }
		}
		/* Screen tabletish ----------- */
		@media only screen and (max-width : 768px) {
			.child.blank  { display: none; }
			.child.setheight { height: auto; }
			.child { max-width: 318px; }
			.event .fixed img { width: 50%; }
			h1 { font-size: 100px; line-height: 111px; }
			.largeonly { display: none; }

			}
		/* Screen small ----------- */
		@media only screen and (max-width : 650px) {
			.child.blank, .excess { display: none; }
			.fixed, .event .fixed { display: block; position: static; width: auto; margin: 22px; }
			.project h1, .event h1, .post h1, h1 { padding: 22px 0 11px 22px; text-align: left; letter-spacing: 0;
				font-size: 55px; line-height: 110%; }
			.project h1  { padding-left: 22px;}
			 .event h1, .post h1 { padding-left: 0;}
			 .fixed h1 { font-size: 72px; line-height: 77px;  text-transform: none; letter-spacing: 0; font-family: "Archive Roman" ; word-spacing: 0; }
			.chart td { padding: 11px 5px;}
			iframe, img, .child, .child.double, .child.triple {/* min-width: 100%; */ width: 100%;  }
			.child,  .child.double, .child.triple {   padding-right: 0; margin: 22px 0 22px 0;  }
			.child.nomargin, .child.nomarginbottom, .child.nomargintop { margin-left: 0; margin-right: 0; }
			h2, .title-face { font-size: 22px; line-height: 33px; }
			.bottom { align-self: flex-end; }
			.child.setheight { min-height: 0; height: auto; }
			.eventlisting div:nth-child(n+4) img { display: none; }
			}
			/* Screen small ----------- */
			@media only print {
				.noprint { display: none; }
}
