div{
	position: relative;
}
h1 {
	letter-spacing: .12em;
	font-size: 2.5em;
}
a {
	text-decoration: none;
	color: black;
}
p a{
	text-decoration: underline;
}
p a:hover{
	color:grey;
}
body { background: white;margin: 0; padding: 10px 0px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; }

img { 
	width: 100%; 
}
 

/* ABOUT PAGE*/
.about{
	margin-left:10%;
	max-width:750px;
	width: 70%;
	padding-bottom: 200px;
}
.about h3{
	font-family:helvetica;
	font-size:15px;
	display:block;
	margin-top:30px;
}
.about p{
	font-size: 15px;
	line-height: 130%;
}
.about p span{
	display:inline-block;
	float:left;
}
.about p span.date{
	width:15%;
}
.about p span.about-text{
	width:85%;
}
.bio{
	margin-top:50px;
	/*width:81%;*/
}

/*General*/
.site-container{
	position: relative;
	overflow: hidden;
}
.clear{
	clear:both;
}

/*nav*/
.nav-bar{
	position:fixed;
	z-index:1000;
	width: 100%;
}
.center-nav{
	position: relative;
	width:100%;
	max-width: 1160px;
	margin:0 auto;
}
	.header {
		/*position: fixed;*/
		top: -.3em;
		height: 4em;
		width: 26.2em;
		font-family: verdana;
		z-index: 4;
		padding-left: .5em;
		background-color: white;
		margin-left: -1em;
		
	}
	h1.name {
		float: left;
		margin: .6em 0 0 .9em;
	}

	.info {
	  font-style: italic;
	  padding: .3em .8em;
	  opacity: 0.8;
	  color:#5f5f5f;
	  float: left;
	  font-size: 1.3em;
	  z-index: 10;
	}
	.info a{
	  color:#5f5f5f;
	}
	.info a:hover{
		color:rgb(182, 182, 182);
	}
	.info span{
		color:rgb(182, 182, 182);
	}
	.homeicon {
		height: 4em;
		width: 4em;
		margin-top: -.3em;
		z-index: 1;
		background-color: rgba(122, 122, 122, .3);
	}
	#home {
		cursor: pointer;
	}
	.spacer {
		position: relative;
		height: 3.5em;
		z-index: 0;
	}
	.smallspacer {
		position: relative;
		height: 1em;

	}
	.bar {
		width: 100%;
		margin-top: -1.2em;
		background-color: white;
		height: 1.1em;
		z-index: 5;
	}
	.whitebar {
		position: absolute;
		background-color: white;
		height: .6em;
		width: 100%;
		z-index: 6;
		bottom: 0;
	}
	.floatL {
		float: left;
	}
	.clearFloat {
		float: none;
		clear: both;
		height: 1.5em;
		width: 100%;
		/*border: solid red 1px;*/
	}
	.navigation {
	    width: 62%;
	    height: 2.6em;
	    font-size: 12px;
	    padding-top: 1.9em;
	    padding-right: 15em;
	    margin-left: 34em;
	}
	.mobile-filter{
		font-size: 13px;
	}
	.filter.mobile-filter{
		display: none;
	}
	.button {
		float: right;
		cursor: pointer;
		width: 9em;
		padding: .2em;
		padding-top: .5em;
		color: #5f5f5f;

	}
	.button:hover{
		color: rgb(182, 182, 182);
	}
	.button:hover .key{
		background: #D6D6D6;
		border: solid #D6D6D6 1px;
	} 
	.key {
		height: 1em;
		width: 1em;
		border: solid #5f5f5f 1px;
	}
	.text {
		padding: .2em;
		padding-left: .5em;
		line-height: 1em;
	}
	.current{
		color: rgb(182, 182, 182);
	}
	.current .key{
		background: #D6D6D6;
		border: solid #D6D6D6 1px;
	}

	/*main body*/

	.container {
		position: relative;
		width: 1120px;
		max-width: 98%;
		padding:1%;
		/*text-align: right;*/
		margin-right: auto;
		margin-left: auto;
	}
	.title {
		height: 1.5em;
		width: 100%;
		font-size: 1.1em;
		text-align: left;
		color: #5f5f5f;
		padding: 1em .5em .5em .5em;
		margin-left: 0em;
	}
	.content {
		font-size: .8em;
		text-align: left;
		color: black;
		margin-left: 1em;
	}
	.content.caption{
		width:100%;
		position: absolute;
		bottom:-1.5em;
		text-align: right;
		margin:0;
	}
	.video-frame .content.caption{
		bottom:-1.7em;
	}
	#thesisinteract {
		border-top: none;
	}

	/* image placement */
	.image {
		position: relative;
		float: left;
		margin: .5% .5% 1.6em .5%;
		/*width:704px;*/
	}
	.video-frame{
		width:700px;
		width:64%;
		padding-bottom: 36%;
		/*overflow: hidden;*/
	}
	.video-frame>iframe{
		position: absolute;
		top:0;
		left: 0;
	}
	.project {
		height: 100%;
		width: 98%;
		border-top: solid #EDEDED 10px;
		overflow: hidden;
		padding:0 1% 20px 1%;
		/*-webkit-transition: height 0s;*/
      	/*transition: height 0s;*/
	}
	#thesis{
		padding-bottom: 0px;
	}
	.project.stacked{
		height:5px;
		padding-bottom: 0;
	}
	#thesisinteract.project.stacked {
		height:1px;
	}
	.hidden {
		overflow: hidden;
	}
	.landscape {
		/*width: 45em;*/
		width: 57.5%;
	}
	.mid {
		/*width: 50em;*/
		width:64%;
	}
/*	.large {
		width: 60em;
	}*/
/*	.sideHD {
		width: 20em;
	}*/
	.portrait {
		width: 25em;
		width:32%;
	}
/*	.square {
		width: 30em;
	}*/
	.thumbnail {
		width: 25em;
		width:32%;
	}
	.thumbL {
		height: 0;
	    padding-bottom: 33%;
	    width: 59%;
	    margin-top: 2%;
	}
	.thumbP {
		/*width: 15em;*/
		width: 19%;
	}

	@media screen and (max-width: 1020px) {
		.navigation{
			width: 56%;
		}
		.filter{
			font-size: 11px;
		}
		.content{
			font-size: 1.2vw;
		}
		.about{
			width:90%;
			margin-left: 5%;
		}
		.bio{
			width:100%;
		}
	}

	@media screen and (max-width: 900px) {
		.filter.desktop-filter{
			display: none;
		}
		.filter.mobile-filter{
			display: block;
		}
		.nav-bar{
			position: absolute;
		}
		body[page=home] .spacer{
			height: 6em;
		}
	}
	@media screen and (max-width: 850px) {
		.container{
			padding:4%;
			max-width: 92%
		}
		.thumbP,
		.portrait{
			width:49%;
		}
		.thumbnail,
		.mid,
		.landscape,
		.video-frame{
			width:100%;
			margin-left: 0;
			margin-right: 0;
		}
		.image{
			margin-bottom: 7vw;
		}
		.video-frame{
			padding-bottom: 56%;
		}
		.content{
			font-size: 12px;
		}
		.image.thumbs-stacked .thumbL{
			width:100%;
			padding-bottom:57%;
		}
		.image.thumbs-stacked .content{
			width:100%!important;
		}
		.image.thumbs-stacked{
			width:100%;
		}
		.smallspacer,
		.clearFloat{
			height:0px;
		}
		.content.thumbnail{
			width:100%;
			line-height: 1.5em;
		}
	}
	
	@media screen and (max-width: 600px) {
		.nav-bar{
			font-size: 2.3vw;
		}
		body[page=home] .spacer{
			height: 15vw;
		}
		.navigation{
			font-size: 2.2vw;
			padding-top: 1.5em;
			margin-left: 30.5em;
		}
		.filter{
			margin-right:-2em; 
		}
		.content{
			font-size: 2.4vw;
		}
		.content.caption {
		    bottom: -3.5vw;
		}
		.video-frame .content.caption {
		    bottom: -4vw;
		}
		.title{
			font-size: 3.5vw;
		}
	}
	
	@media screen and (max-width: 500px) {
		.nav-bar{
			margin-top: .5em;
		}
		.filter{
			font-size: 2.4vw;
		}
	}
	@media screen and (max-width: 400px) {
		.about p{
			font-size: 14px;
		}
	}