@charset "UTF-8";

html{
	background: #f2f0ed;
}

*{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
img{
	margin: 0;
	display: block;
}
address{
	font-style: normal;
}
a{
	color: inherit;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
	color: inherit;
}
a.underline{
	text-decoration: underline;
}

/* -----  1.1 Font Definitions  --------------------------------------------- */


@font-face {
	font-family: 'Walsheim';
	src: url(../fonts/GT-Walsheim-Regular.woff) format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Walsheim';
	src: url(../fonts/GT-Walsheim-Bold.woff) format("woff");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Walsheim';
	src: url(../fonts/GT-Walsheim-Regular-Oblique.woff) format("woff");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Walsheim';
	src: url(../fonts/GT-Walsheim-Bold-Oblique.woff) format("woff");
	font-weight: bold;
	font-style: italic;
}


h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote,figcaption{
	margin-top: 0;
}



@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1;}
}
body{
    animation-name: fadeIn;
    animation-duration: 1s;}
}



.landing{
	color: #eee;
	position: fixed;
	top:0px;
	bottom: 0px;
	left:0px;
	right: 0px;
	background-color: rgba(0,0,0,.1);
	cursor: pointer;
}




.landing .rotate-wrap{
	z-index: 110;
}
.landing h1{
	padding: 30px;
	/*position: absolute;*/
	z-index: 110;
	color: #fff;
}
.landing ul,
.landing li{
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index: 90;
	list-style-type: none;
	margin: 0;
	cursor: pointer;
}
.landing ul:after{
	content: '';
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	opacity: .1;
	background-color: #000;
	z-index: 95;
	background-blend-mode: multiply;
}
.landing li{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-transition: opacity 1s; /* Safari */
	transition: opacity 1s;
	opacity: 0;
}
.landing li.active{
	opacity: 1;
}

/*#projects-link{
	padding-top: 0;
	position: relative;
	top:-5rem;
}
#projects-link a{
	text-decoration: none;
	color: inherit;
	opacity: .01;
}*/
/*#projects-link a:hover{
	opacity: .5;
}*/

.main{
	width: 100%;
}


.left {
	width: 20%;
	float: left;
	display: inline-block;
	padding: 30px;
	position: relative;
}


.rotate-wrap{
	position:fixed;
	overflow:visible;
	width:1px;
	height: 1px;
}
.left h1{
	margin-bottom: 0;
}


.ninety-ccw{
	/* Safari */
	-webkit-transform: rotate(-90deg);
	/* Firefox */
	-moz-transform: rotate(-90deg);
	/* IE */
	-ms-transform: rotate(-90deg);
	/* Opera */
	-o-transform: rotate(-90deg);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

	transform-origin: top left;

}
.ninety-cw{
	/* Safari */
	-webkit-transform: rotate(90deg);
	/* Firefox */
	-moz-transform: rotate(90deg);
	/* IE */
	-ms-transform: rotate(90deg);
	/* Opera */
	-o-transform: rotate(90deg);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

	transform-origin: top right;
}


.ninety-ccw{
	white-space: nowrap;
	text-align: right;
	width:2000px;
	position:absolute;
	top:2000px;
}



.right {
	width: 80%;
	float: right;
	display: inline-block;
	padding: 30px;
}



#lucky-stairs{
	color: #333;
	-webkit-transition: opacity .25s; /* Safari */
	transition: opacity .25s;
}
#home #lucky-stairs{
	color: #fff;
}
#lucky-stairs i{
	opacity: 1;
}


#lucky-stairs:hover{
	opacity: 1!important;
}

#projects-link a{
	opacity:.5;
}
#projects-link a:hover {
	opacity:1;
}


.project-page #lucky-stairs a{
	text-decoration: underline;
	color: inherit;
	position: relative;
	z-index: 300;
}
.project-page #lucky-stairs span{
	opacity: .25;
}
.project-page #lucky-stairs a:hover,
.project-page #lucky-stairs a:hover span{
	opacity: 1;
}
/*.project-page #lucky-stairs:hover + #project-title{
	opacity: .25!important;
}*/

#project-title{
	-webkit-transition: opacity .25s, color .25s; /* Safari */
	transition: opacity .25s, color .25s;
	opacity: 0;
	color: #333;
}
#project-title.hovered{
	opacity: .25;
	text-decoration: underline;
}


.cell{
	padding: 20px;
	width: 33.33%;
	display: inline-block;
	float: left
}
.cell img,
.item img
{ width: 100%;}


.masonry { /* Masonry container */
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	column-gap: 2em;
}

.item { /* Masonry bricks or child elements */
	position: relative;
	background-color: #eee;
	display: inline-block;
	margin: 0 0 1.5em;
	width: 100%;
}
.item:after{
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color: #333;
	content: '';
	opacity: 0;
	pointer-events:none;
}
.item:hover:after{
	opacity: .25;
}

/*@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
    }*/

    @media only screen and (max-width: 640px) {
    	.masonry {
    		-moz-column-count: 1;
    		-webkit-column-count: 1;
    		column-count: 1;
    	}
    	.item { 
			margin: 0 0 1em;
		}
    }

    @media only screen and (min-width: 1600px) {
    	.masonry {
    		-moz-column-count: 3;
    		-webkit-column-count: 3;
    		column-count: 3;
    	}
    }


    .cf::after {
    	content: "";
    	display: block;
    	height: 0;
    	overflow: hidden;
    	clear: both;
    }



.projects ul,
.projects li,
.project ul,
.project li{
	list-style: none;
	margin: 0 0 1.5em;
}
.projects li img,
.project li img,
.project img{
	width: 100%;
}


#info-text{
	bottom: 100px;
}
#info-icon{
	bottom: 80px;
}
.info{
	position: fixed;
	width: 20%;
	font-size: 1.2rem;
	line-height: 1.5;
	color: #555;
	padding-right: 8rem;
}
.info a{
	word-wrap:break-word;
}
.info > *:last-child{
	margin-bottom: 0;
}

.info blockquote{
	margin-left:0rem;
}
.info blockquote p{
		padding-left: 2rem;
		border-left: 1px solid; 
}
.info blockquote >*:last-child{
	margin-bottom: 0;
}
.info a{
	color: inherit;
}


@media screen and (max-width: 960px){
	#info-text {
		padding-right: 4rem;
	}
}
@media screen and (max-width: 800px){
	#info-text {
		font-size: 1.1rem;
		line-height: 1.2;
		padding-right: 2rem;
	}
}


#info-icon{
	color: #333;
	cursor: pointer;
}
#info-icon h1{
	font-weight: normal;
	/*font-size: 6rem;
	padding-left: .35rem;
	margin-bottom: 1rem;*/
		font-size: 5rem;
		padding-left: .1rem;
		margin-bottom: 0;
}
@media screen and (max-width: 640px){
	/*#info-icon h1{
		font-size: 5rem;
		padding-left: .1rem;
		margin-bottom: 0;
	}*/
	.right{
		padding-bottom: 25rem;
	}
}


#info-icon h1:after{
	content: '+';
}
#info-icon h1:hover:after,
#info-icon.active h1:after{
	content: '\00d7';
}

#info-icon:hover{
	opacity: .5;
}

.display-none{
	display: none;
}
.display-inherit{
	display: inherit;
}


#info-text.modal{
display:none;
bottom: 0;
width: 80%;
left: 20%;
z-index: 200;
padding:3rem 3rem 3rem 6rem;
    background-color: rgba(242, 240, 237,.93);
/*bottom: -100%;*/
}
#info-text.modal.active{
	display: inherit;
	/*bottom: 0;*/
}


#info-icon:hover + #info-text.modal{
	display: inherit;
}

#email{
	position:fixed;
	bottom:40px;
}
#email:hover{
	opacity: .5;
}
/*#email:after{
	content: '';
	opacity: 0;
	-webkit-transition: opacity .25s; 
	transition: opacity .25s;
}

@media screen and (min-width:720px){
	#email:hover:after{
		font-size: 3rem;
		position: relative;
		bottom: .25rem;
		content: ' email';
	    opacity: 1;
		-webkit-transition: opacity .25s; 
		transition: opacity .25s;
	}
}*/

.masonry{
	/*margin-bottom: 15rem;*/
}
footer{
	float: right;
	position: relative;
	/*bottom: .5rem;*/
	color: #555;
	margin-bottom: 20px;
	font-size: 1.2rem;
}
@media screen and (max-width: 640px){
	footer{
	/*bottom: 0rem;*/
	margin-bottom: 5px;
	}
}
footer.visible{
	opacity: 1;
}
footer > *:last-child{
	margin-bottom: 0rem;
}

.caption{
	font-size: 1.2rem;
	line-height: 1.2;
	padding-top: 2rem;
	padding-bottom: 0rem;
	color: #999;
}
.caption a {
	color: inherit;
}
.caption > *:last-child{
	margin-bottom: 0;
}

.image-container{
  position: relative;
  padding-bottom: 66.78082192%; 
  height: 0;
  overflow: hidden;
}



section.heading{
	margin-top: 4rem;
}
section.heading:first-child{
margin-top: 0;
}

figure.video{
	padding: 0;
	margin: 0;
	width:100%;
}
figure.video iframe{
	width: 100%;
}