/* GLOBAL */

@-ms-viewport{
  width: device-width;
}

.selected {
	color: #cc3333;
}

#nav li {
	display: inline;
}

h1, h2, h3, h4, h5, h6, p {
	/*font-family: 'museo-sans', sans-serif;*/
	/*font-family: loos-normal, sans-serif;*/
	font-family: rig-sans, sans-serif;
}

h1 {
	font-weight: 800;
	letter-spacing: .08rem;
	color: #010B13;
}

h2 {
	font-weight: 800;
	letter-spacing: .07rem;
	color: #010B13;
}

h3 {
	font-weight: 800;
	letter-spacing: .03rem;
	color: #666;
}

h4 {
	font-weight: 400;
	color: #464647;
}

h6 {
	font-weight: 400;
	font-size: 1rem;
	color: #666;
}

p {
	font-weight: 400;
	letter-spacing: .01rem;
	font-size: 1.1rem;
	line-height: 1.9rem;
	color: #666;
}

p a {
	color: #cc3333;
}

sub {
	font-size:small;
	vertical-align:sub;
}

.full {
	width: 80%;
}

.separator {
    background-color: #010B13;
    float: left;
    height: .4rem;
	width: 68px;
	margin: 26px 0 34px 0;
}

#ls_foot {
	float: left;
	padding: 2rem 0;
}

.photo {
	width: 100%;
}

.clearfix {
    content: "";
    clear: both;
    display: table;
}

.inactiveLink {
   pointer-events: none;
   cursor: default;
}


/* MEDIA QUERIES */

/* DESKTOP ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */

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

	#header {
		height: 64px;
		padding: 20px 2%;
		float: left;
		width: 96%;
		z-index: 10;
		position: fixed;
		background: white;
		/*border-bottom: 3px solid #010B13;*/
		-webkit-transition: all ease-out .3s;
		-moz-transition: all ease-out .3s;
		-o-transition: all ease-out .3s;
		transition: all ease-out .3s;
	}

	#header.active {
		height: 48px;
		padding: 6px 2%;
		background: #010B13;
		border-bottom: 0 solid black;
	}

	#nav {
		float: right;
		margin-right: 80px;
	}

	.featured {
		margin-top: -10%;
	}


	.cats {
		float: left;
		margin-left: 40px;
		padding-top: 20px;
	}

	#home_container {
		padding-top: 120px;
		margin: 0 80px;
	}

	#ls_foot {
		margin-left: 80px;
		padding-left: 2%;
	}

	h1 {
		float: left;
		padding-top: 16px;
		margin-left: 80px;
		font-size: 1.9rem;
	}

	h1:hover {
		color: #666;
	}

	.active h1 {
		font-size: 1.2rem;
		color: #eee;
		padding-top: 13px;
	}

	.active h1:hover {
		color: white;
		letter-spacing: .03rem;
		padding-top: 13px;
		font-family: 'museo-slab', sans-serif;
		font-weight: 900;
	}

	h2 {
		font-size: 3.5rem;
		line-height: 4rem;
	}

	h3 {
		font-size: 1.5rem;
	}

	h3:hover {
		color: #010B13;
	}

	.active h3 {
		font-size: 1.2rem;
		color: #eee;
		margin-top: -6px;
	}

	.active h3:hover {
		color: white;
		font-family: 'museo-slab', sans-serif;
		font-weight: 700;
		letter-spacing: 0rem;
	}

	h5 {font-family: 'museo-sans', sans-serif;
		font-weight: 700;
		font-size: 1.3rem;
		line-height: 1.5rem;
		color: #010B13;
	}

	/* MASONRY */

	.grid {
		width: 100%;
		margin: 0 auto;
	}

	.grid-item {
		width: 22.5%;
		margin: 0 0 1.5% 2%;
	}

	.caption {
		display:block;
		padding:0 30px;
		box-sizing:border-box;
		position:absolute;
		left:0;
		width:100%;
		text-align:center;
		top:45%;
		opacity:0;
		filter:alpha(opacity=0);/*For older IE*/
		transform:translateY(-20px);
		transition:all .3s;
	}

	.grid .grid-item:hover .caption {
		transform:translateY(0px);
		opacity:0.9;
	}

	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		background: #fff;
		opacity:0;
		filter:alpha(opacity=0);/*For IE6 - IE8*/
		transition:all 0.6s;
	}

	.grid .grid-item:hover .overlay {
		opacity:0.8;
	}

	/* About Page */

	#content {
		width: 96%;
		max-width: 960px;
		margin: 0 0 0 80px;
		padding-top: 140px;
	}

	#me img {
		margin: 11px 10px 40px 2%;
		float: left;
		width: 440px;
	}

	#blurb {
		float: left;
		width: 440px;
		margin-left: 20px;
	}

	#bio {
		width: 420px;
		float: left;
		margin: 28px 0 0 20px;
	}

	/* PROJECT PAGES */

	#content_wide {
		margin-left: 80px;
		padding-left: 2%;
		padding-top: 140px;
		max-width: 1400px;
	}

	#brief {
		width: 872px;
		float: left;
		margin-bottom: 30px;
	}

	.header_image {
		margin: 0px 0 40px 0;
		float: left;
		width: 900px;
		height: 240px;
		overflow: hidden;
		filter: drop-shadow(0px 10px 4px #eeeeee)
	}

	.header_image img {
		max-width:100%;
	}

	.proj_images {
		margin: 0 0 40px 0;
		float: left;
		width: 800px;
	}

	.proj_images_portrait {
		margin: 0 40px 40px 0;
		float: left;
		width: 540px;
	}

	.proj_images_small {
		margin: 0 0 40px 0;
		float: left;
		width: 320px;
	}

	.video {
		width: 800px;
		height: 450px;
	}

	.project_header {
		width: 900px;
		float: left;
		font-size: 3.5rem;
	}

}

/* MEDIUM WIDTH SCREENS ———————————————————————————————————————————————————————————————————————————————————————————————————————————————— */

@media screen and (min-width: 650px) and (max-width:959px) {

	#header {
		height: 60px;
		padding-top: 10px;
		width: 100%;
		background: white;
		/*border-bottom: 3px solid #010B13;*/
		z-index: 10;
		position: fixed;
		-webkit-transition: all ease-out .3s;
		-moz-transition: all ease-out .3s;
		-o-transition: all ease-out .3s;
		transition: all ease-out .3s;
	}

	#header.active {
		height: 36px;
		background: black;
		border-bottom: 0 solid black;
	}

	#nav {
		float: right;
		margin-right: 30px;
		padding-top: 15px;
	}

	.cats {
		float: left;
		margin-left: 35px;
	}

	#ls_foot {
		margin-left: 30px;
	}

	h1 {
		font-size: 1.8rem;
		float: left;
		padding-top: 10px;
		margin-left: 30px;
		-webkit-transition: all ease-out .3s;
		-moz-transition: all ease-out .3s;
		-o-transition: all ease-out .3s;
		transition: all ease-out .3s;
	}

	.active h1 {
		font-size: 1.2rem;
		color: #eee;
		padding-top: 4px;
	}

	h2 {
		font-size: 3rem;
		line-height: 4.25rem;
	}

	h3 {
		font-size: 1.25rem;
		-webkit-transition: all ease-out .3s;
		-moz-transition: all ease-out .3s;
		-o-transition: all ease-out .3s;
		transition: all ease-out .3s;
	}

	.active h3 {
		font-size: 1rem;
		color: #eee;
		margin-top: -10px;
	}

	/* MASONRY */

	.grid {
		width: 100%;
		/*padding-top: 88px;*/
	}

	.featured {
		padding-top: 60px;
	}

	.grid-item {
		width: 30%;
		padding: 0 0 2% 2.5%
	}

	.caption {
		display: none;
	}

	/* About Page */

	body {
		background-color: #fff;
	}

	#content {
		width: 590px;
		margin: 0 30px;
		padding-top: 100px;
	}

	#me {
		width: 100%;
		margin: 6px 30px 30px 0;
		overflow: hidden;
		float: left;
	}

	#me img {
		float: left;
		width: 100%;
	}

	#blurb {
		width: 590px;
		margin-bottom: 39px;
	}

	#bio {
		width: 590px;
	}

	/* PROJECT PAGES */

	#content_wide {
		width: 100%;
		padding-top: 70px;
	}

	#brief {
		margin: 0 30px;
	}

	.header_image {
		float: left;
		width: 100%;
		height: 200px;
		overflow: hidden;
		margin-bottom: 40px;
	}

	.header_image img{
		max-width:100%;
	}

	.proj_images, .proj_images_portrait {
		float: left;
		width: 100%;
		margin-bottom: 30px;
	}

	.proj_images_small {
		margin: 0 0 40px 0;
		float: left;
		width: 320px;
	}

	.video {
		width: 100%;
		height: 500px;
	}

	.project_header {
		float: left;
		margin: 0 30px;
	}

}

/* MOBILE —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */

@media screen and (max-width: 649px) {

	#header {
		height: 48px;
		padding-top: 10px;
		width: 100%;
		background: white;
		/*border-bottom: 3px solid #010B13;*/
		z-index: 10;
		position: fixed;
		-webkit-transition: all ease-out .3s;
		-moz-transition: all ease-out .3s;
		-o-transition: all ease-out .3s;
		transition: all ease-out .3s;
	}

	#header.active {
		height: 28px;
		background: black;
		border-bottom: 0 solid black;
	}

	#nav {
		color: #e6e6e6;
		float: right;
	}

	.cats {
		float: left;
		margin: 15px 24px 0 0;
	}

	#ls_foot {
		margin-left: 10px;
	}

	h1 {
		font-size: 1.25rem;
		float: left;
		margin: 10px 0 0 10px;
		-webkit-transition: all ease-out .3s;
		-moz-transition: all ease-out .3s;
		-o-transition: all ease-out .3s;
		transition: all ease-out .3s;
	}

	.active h1 {
		font-size: 1.2rem;
		color: #eee;
		margin-top: 0;
	}

	h2 {
		font-size: 2.5rem;
		line-height: 3.5rem;
	}

	h3 {
		font-size: 1rem;
		-webkit-transition: all ease-out .3s;
		-moz-transition: all ease-out .3s;
		-o-transition: all ease-out .3s;
		transition: all ease-out .3s;
	}

	.active h3 {
		font-size: 1rem;
		color: #eee;
		margin-top: -12px;
	}


	/* MASONRY */

	.grid {
		/*padding-top: 74px;*/
		width: 100%;
	}

	.featured {
		padding-top: 74px;
	}

	.grid-item {
		width: 100%;
		margin-bottom: 10px;
	}

	.caption {
		display: none;
	}

	/* About Page */

	#content {
		width: 100%;
		padding-top: 60px;
	}

	#me {
		width: 100%;
		overflow: hidden;
	}

	#me img {
		width: 100%;
	}

	#blurb {
		margin: 30px 10px;
		max-width: 480px;
	}

	#bio {
		margin: 10px;
	}

	/* PROJECT PAGES */

	#content_wide {
		width: 100%;
		padding-top: 60px;
	}

	#brief {
		margin: 0 10px;
	}

	.header_image {
		float: left;
		width: 100%;
		height: 140px;
		overflow: hidden;
		margin-bottom: 30px;
	}

	.header_image img{
		max-width:100%;
	}

	.proj_images, .proj_images_portrait {
		width: 100%;
		margin-bottom: 10px;
	}

	.proj_images_small {
		float: left;
		max-width: 320px;
	}

	.video {
		width: 100%;
		height: 350px;
	}

	.project_header {
		margin: 0 10px;
	}

}

/* SMALL MOBILE (Hide WORK Button) ————————————————————————————————————————————————————————————————————————————————————————————————————— */

@media screen and (max-width: 374px) {


	.hideonsmall {
		display: none;
	}

}