html, body, div, span, applet, object, iframe,
	h1, h1, 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;
	}
	
	em {
		font-style: italic;
	}

	body {
		line-height: 1.2;
	}
	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;
	}

	body {
		font-family: /*ff-tisa-web-pro-1, ff-tisa-web-pro-2,*/ "source-sans-pro", "Helvetica Neue",Helvetica,Arial,sans-serif;
		color: #444;
		font-size: 17px;
		line-height: 24px;
		font-weight: 500;
		background: #fefefe;
	}
	
	p.download a {
		border-bottom: 1px dotted #ccc;
		text-decoration: none;
		color: #3A5962;
	}
	
	p.download a:hover {
		border-bottom: 1px solid #3A5962;
	}
	
	nav #logo {
		display: block;
		padding: 5px;
		margin: 15px 23px 10px;
		text-decoration: none;
		line-height: 1em;
			font-size: 30px;
			
	}
	
	nav #helloList {
		border-top: none;
		margin-top: 0;
	}
	
	nav #logo img, 
	nav #logo span {
	
		width: 150px;
		height: 50px;
		/*text-transform: uppercase;*/
		font-weight: 600;
		color: /*#35d016;*/ #7DB9B8;
	}
	
	
	
	nav {
		width: 340px;
		position: fixed;
		background: rgb(255,255,255);
		/*-webkit-box-shadow: 0px -20px 20px rgb(200,200,200);
		-moz-box-shadow: 0px -20px 20px rgb(200,200,200);
		box-shadow: 0px -20px 20px rgb(200,200,200);*/
		border-right: 1px solid rgb(230,230,230);
		height: 100%;
		z-index: 920;
		overflow: auto;
		display: block;
	}
	

	
	nav > dl,
	nav > ul {
		margin: 15px 25px;
	}	
	
	nav > dl dt {
		margin: 0 0 3px 0;
	}
	
	nav > dl dd,
	nav > ul li {
		margin: 0 0 1px 0;
	}
	
	nav > dl dt,
	nav > ul {
		margin-top: 15px;
	}
	
	nav > dl dt {
		font-style: normal;
		font-weight: 400;
 		padding: 5px 5px 0 5px;
		color: rgb(180,180,170);		
	}
	
	nav > dl dt a {
		text-decoration: none;
		color: rgb(180,180,170);
	}
	
	nav > dl dt,
	nav > ul {
		border-top: 1px solid rgb(230,230,230);
	}
	
	nav > dl dd a,
	nav > ul a,
	nav > ul p,
	#mobileNav > a,
	body.mobile nav > dl a:hover,
	body.tablet nav > dl a:hover,
	body.mobile nav > ul a:hover,
	body.tablet nav > ul a:hover {
		color: #444;		
		text-decoration: none;
		padding: 5px;
		display: block;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		background: inherit;
		font-size: 17px;
		line-height: 22px;
				margin: 5px 0;
	}
	
	nav > dl dd a:hover,
	nav > ul a:hover,
	nav > ul.contact a:hover,
	nav > dl dd a.selected,
	nav > ul a.selected,
	nav > dl dd a.selected:hover,
	nav > ul a.selected:hover,
	#mobileNav > a:hover {
		/*color: rgb(255,255,255);*/
		background: #3A5962;
		color: rgb(247,247,246);
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}
	
	#mobileNav > a:hover {
		background: rgba(58, 89, 98,.9);
	}
	
	nav > ul.contact li,
	nav > ul.contact a,
	nav > ul.contact li p {
		font-size: 15px;
		  color: rgb(80, 80, 70);
	}
	
	/*nav > dl dd a:hover,
	nav > ul a:hover {
		color: #3A5962;
		background: #f1f1ef;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;		
	}	*/	
	
	#allProjects,
	#background {
		position: absolute;
		height: 100%;
		width: 100%;
	}
	
	#allProjects {
		position: absolute;
		/*overflow: hidden;*/
	}
	
	section.project {
		clear: both;
		display: block;
		width: 560px;
		padding: 0 auto 24px;
	}
	
	#hello {
		/*width:auto;*/
	}
	
	body.skinny section.project {
		width: 380px;
	}
	
	/*section.project.absolute,
	section.projectGroup.absolute {
		/*position: absolute;*/
/*		top: 0;
		left: 0;
		z-index: 800;*/
	/* }*/
	
	section > .description > h1 {
		font-size: 60px;
		line-height: 100%;
		font-weight: 200;
		margin-bottom: 14px;
		padding-bottom: 12px;
		padding-top: 20px;
	}
	
	section > .description > * {
		padding: 0 5px;
			/*clear: both;	*/
	}
	
	section > .description > h4 {
		clear: both;
	}
	
	section > .description > ul {
		padding: 0;
	}
	
	
	section > .description p,
	section > .description blockquote,
	section > .description h4,
	section > .description h5 {
		font-size: 17px;
		line-height: 170%;
		margin-bottom: 22px;
		/*padding: 10px;*/
	}
	
	section > .description p.intro {
		font-size: 22px;
		font-weight: 400;
		border: 1px solid rgb(230,230,230);
		border-width: 1px 0;
		padding-top: 14px; 
		padding-bottom: 22px;
		
	}
	
	section > .description > h5 {
		margin-bottom: 5px;
/*font-style: italic;*/
font-weight: bold;

	}
	
	section > .description > p.title {
		font-size: 20px;
	}
	
	section > .description > h4 {
		/*font-weight: bold;*/
		font-size: 20px;
		margin-bottom: 2px;
	}
	
	h4.contrib {
		border-top: 1px solid rgb(230,230,230);
		margin-top: 30px;
	}
	
	#Resume > .description > h4 {
			margin-top: 30px;
	}
	
	#Resume .description ul li,
	section > .description ul li {
		font-size: 15px;
		margin-bottom: 10px;
		list-style-type: disc;
		
	}
	
	section > .description ul {
		margin-bottom: 22px;
		margin-left: 5px; 
	}
	
	section > .description a {
		color: rgb(58, 89, 98);
		/*background: rgba(255,255,255,1);*/
		text-decoration: none;
		display: inline;
		border-bottom: 1px solid rgba(58, 89, 98,.3);
	}
	
	section > .description a:hover {
		background: rgba(255,255,255,1);
		border-bottom: 1px solid rgba(58, 89, 98,1);
	}
	
	section > .description a.image {
		border: none;
	}

	section > .description > h3,
    #hello h4 {
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		line-height: 24px;
		margin-top: 60px;
		padding-top: 5px;
		border-top: 1px solid rgb(230,230,230);
		margin-bottom: 15px;
	}	
	
	section > .description p strong {
		font-weight: bold;
	}
	
	section > .description p strong > em {
		font-weight: 400;

		/*float: right;*/
		/*clear: both;*/
		/*font-size: 15px;*/
		color: rgb(150,150,150);
		white-space: nowrap;
	}
	
	section > .description p.title strong > em {
		margin-left: 15px;
		white-space: normal;
	}
	
	section.project .description blockquote {
		font-style: italic;
		font-size: 200%;
		line-height: 120%;
		color: rgb(200,200,200);
	}
	
	section > .description > p > a.image {
		float: right;
		margin-left: 15px;
		margin-bottom: 15px;
		text-decoration: none;
		clear: right;
		color: #666;		
	}
	
	section > .description > p > a.image img {
		width: auto;
		padding: 0;
		border: 1px solid rgb(220,220,220);
		line-height: 0;		
		vertical-align:bottom;
	}	
	
	section > .description > p > a.image:hover img {
		border: 1px solid #3A5962;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;		
	}

	section > .description > p > a.image:hover span.caption {
		color: #3A5962;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;		
	}
	

	
	section video,
	section object {
		width: 100%;
		height: auto;
	}
	
	section > .description > p.image > img {
		width: 100%;
		display: block;
		border: none;
		float: none;
		margin: 0 auto;
		padding: 0;
		line-height: 0;
		max-width: 950px;
		/*border: 1px solid rgba(0,0,0,.25);*/
		vertical-align:bottom;
		
	}
	
		
	p.image > span.caption,
	a.image > span.caption {
		display: block;
		clear: both;
		text-align: center;
		font-style: italic;
		font-size: 14px;
		padding: 2px 6px 4px;
		background: rgb(255,255,255);
		margin-top:  1px;
		color: #666;
	}
	
	
	#hello h1,
	#hello h3 {
		/*padding: 0 5px;*/
		margin: 0 0 20px;
		background: none;
		margin-left: 0px;
		font-size: 30px;
		line-height: 35px;
		
		text-shadow: white 0 1px 0;	
	}
	
	#hello h1, #logo {
		font-family: "source-sans-pro",sans-serif;
		font-weight: 200;
		/*text-transform: uppercase;	*/
		margin-left: -6px;
		font-size: 100px;
		line-height: 90px;
		margin-bottom: 20px;
		padding-top: 14px;		
	}
	
	#hello h4 {
		padding: 0 5px;
		font-size: 20px;
		margin-bottom: 20px;
		line-height: 28px;
	}
	
	#hello ul > li {
		float: left;
		overflow: hidden;
		width: 100%;
		overflow: hidden;
	}
	/*
	#hello ul > li:hover {
		box-shadow: 0px 0px 15px rgba(150,150,150,.4);
		background: rgb(255,255,255);
	}*/
	
	#hello ul > li:nth-child(3n) {
		/*margin-right: 0 !important;*/
	}
	
	#hello ul li.third {
		/*margin-right: 0 !important;	*/
	}
	
	#hello ul > li img {
		float: left;
		-webkit-clip-path: circle(40px at center);
		clip-path: circle(40px at center);
	}
	
	#hello .selfportrait {
		margin-top: 0;
		-webkit-clip-path: circle(90px at center);
		clip-path: circle(90px at center);
		width: 180px;
		height: 180px;
		float: right;
		margin-left: 50px;
		margin-right: 50px;
	}
	
	#hello p {
		margin-bottom: 15px;
		max-width: 650px;
	}
	
	#hello ul > li a {
		text-decoration: none;
		background: rgba(157,232,231,.15); /*#7DB9B8;*/
		color: rgba(58, 89, 98, 1);
		padding: 5px;
/*		display: block;*/
		font-weight: 400;
		font-size: 1.2em;
		overflow: hidden;
		-webkit-transition: background 0.2s ease-in-out;
		-moz-transition: background 0.2s ease-in-out;
		-o-transition: background 0.2s ease-in-out;
		transition: background 0.2s ease-in-out;
	}
	
	#hello ul > li a:hover {
		background: #3A5962;
		color: rgb(247,247,246);
	}
	
	#hello ul > li a span {
		color: rgb(25,25,25);
		padding: 4px 15px;
		float: left;
	}
	
	#mobileNav {
		display: none;
		position: fixed;
		background: rgba(255,255,255,.9);
		top: 0;
		left: 0;
		/*box-shadow: 0px 0px 10px rgba(0,0,0.2);*/
		/*border-bottom: 1px solid rgb(200,200,200);*/
		z-index: 900;
		width: 100%;
		font-size: 20px;
		line-height: 18px;
		overflow: hidden;
	}
	
	@supports((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
		#mobileNav {
			background: rgba(255,255,255,.6);
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
		}
	}
	
	#menuIcon {
		pointer-events: none; 
		display: block; 
		margin-right: 10px; 
		float: left; 
		margin-top: 2px;
	}
	
	#mobileNav a {
		color: #444;
		padding: 10px 5% 10px;
		margin: 0;
		width: 100%;
		border: 1px solid rgb(200,200,200);
		border-width: 0 0 1px;
		overflow: hidden;
		/*background: url('images/mobile-back.png') rgb(255,255,255) left center no-repeat;		*/
	}
	
	#mobileNav a span {
		display: block;
		float: left;
		padding: 3px 5px;
	}
	
	#mobileNav a:hover {
		fill: #ffffff;
	}
	
	body section.project iframe {
		width: 100%;
		height: 380px;
	}
	

	
	/*@media (max-width: 960px) {
	
		section > .description > h1 {
			font-size: 34px;
			padding-top: 30px;
			padding-bottom: 12px;
			font-weight: 300px;
		}	
	
		body section > .description > p {
			clear: both;
		}
	
		body section video {
			width: 100%;
			height: auto;
		}
		
		body section.project {
			padding: 0 25px 24px 305px;
		}
	
		body nav {
			width: 280px;
		}
		
	
		#hello ul > li:nth-child(3),
		#hello ul li.third {
			margin-right: 25px;
		}
		
		body section.project iframe {
			height: 300px;
		}
	
		body section > .description > p > a.image {
			display: block;
			clear: both;
			overflow: hidden;
			margin: 10px 25% 10px;
			width: 50%;
			
		}
		
		section > .description > p.image {
			width: auto;
			max-width: 950px;
			margin-left: auto;
			margin-right: auto;
			height: auto;
		}
	}*/

	
	
	@media (max-width: 960px) {
		body nav {
			width: 100%;
			background: rgb(255,255,255);
			height: 700px;
			position: absolute;
			top: 0;
			left: 0;
		}
		
		#mobileNav {
			display: block;
		}
		
		
		body section.project,
		body section.projectGroup {
			min-width: 100px;
			width: 90%;
			max-width: 750px;
			padding: 10px 5% 24px;
			margin: 0 auto 24px;
		}
		
		#hello h1 {
			font-size: 70px;
			margin-top: 0;
			padding-top: 0;
		}

	
	}
	
	
	
	@media (min-width: 960px) {
		body section.project {
			width: auto;
			max-width: 750px;
			margin: 0 auto 24px;
			padding-bottom: 48px;
		}
		
		body nav {
			display: block;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			padding-bottom: 100px;
		}
	
		body section > .description > p > a.image {
			display: block;
			float: right;
			clear: both;
			overflow: hidden;
			margin: 10px 0 10px;
			margin-right: -60%;
		}	
		
		body section > .description > p.intro,
		body section > .description h1 {
			width: 750px;
			padding-top: 50px;
			padding-bottom: 50px;
		}
		
		body section video {
			width: 750px;
			height: auto;
		}
		
		section > .description > p.image {
			width: auto;
			max-width: 750px;
			margin-left: auto;
			margin-right: auto;
			height: auto;
			margin-top: 50px;
			margin-bottom: 50px;
		}

		section > .description > p.image.multi {
			width: 950px;
			margin-left: auto;
			margin-right: auto;
			height: auto;
			margin-left: -100px;
			padding: 0;
			margin-right: -100px;
		}
		
		section > .description > p.image img {
			width: auto;
			max-width: 750px;
			
			height: auto;
		}
		
		body section.project iframe {
			width: 950px;
			height: 534px;
		}
		#hello h1 {
			margin-top: 40px;
		}
		#hello h3 {
			max-width: 650px;
		}
	}
	
	body.login {
		max-height: 600px;
	}
	
	#login {
		padding: 5vh 0;
		margin: 0 auto;
		width: 300px;
		font-family: /*ff-tisa-web-pro-1, ff-tisa-web-pro-2,*/ "source-sans-pro", "Helvetica Neue",Helvetica,Arial,sans-serif;
	}
	
	#login h2 {
		padding: 0 16px;
		margin-bottom: 0;
	}
	
	#login p {
		padding: 16px;
	}
	
	#login p.error {
		color: #900000;
		background: rgba(250,200,218,.5);
		border: 1px solid rgba(144,0,0,.05);
		border-radius: 8px;
		margin-bottom: 16px;

	}
	
	#login input {
		margin: 0 16px 8px;
		width: 240px;
		border: 1px solid #ddd;
		padding: 10px;
		font-size: 16pt;
		font-family: /*ff-tisa-web-pro-1, ff-tisa-web-pro-2,*/ "source-sans-pro", "Helvetica Neue",Helvetica,Arial,sans-serif;
	}
	
	#login button {
		font-family: /*ff-tisa-web-pro-1, ff-tisa-web-pro-2,*/ "source-sans-pro", "Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 16pt;
		border: none;
		border-radius: 30px;
		padding: 8px 20px;
		color: rgb(255,255,255);
		background: rgb(58, 89, 98);
		margin: 10px 16px;
		width: calc(100% - 40px);
		
		box-shadow:
		  0 1px 1px hsl(0deg 0% 0% / 0.075),
		  0 2px 2px hsl(0deg 0% 0% / 0.075),
		  0 3px 3px hsl(0deg 0% 0% / 0.075),
		  0 3px 3px hsl(0deg 0% 0% / 0.075);
		
	}
	#login button:hover {
		background: rgb(38, 69, 78);
	}
	
	#login button:active {
		color: rgb(250,250,250);
		background: rgb(38, 69, 78);
		
		box-shadow:
		  0 1px 1px hsl(0deg 0% 0% / 0.075),
		  0 2px 2px hsl(0deg 0% 0% / 0.075),
		  0 2px 2px hsl(0deg 0% 0% / 0.075);
	}
	
	section > .description > p.image.lifeline img {
		max-width: 220px;
		float: left;
		margin-right: 20px;
		margin-bottom: 20px;
	}
	section > .description > p.image.lifeline img:nth-child(4) {
		margin-right: 0;
	}
	
	section > .description > p.image.lifeline {
		overflow: hidden;
	}
	
	@media (prefers-color-scheme: dark) {
  		body {
	    	background: #111A1C;
    		color: #F3FDFF;
  		}
  		a {
  		    	color: #F3FDFF !important;
  		}
	}