@charset "UTF-8";
/* CSS Document */

.navigation{display:none}
@media screen and (max-width: 1400px){
	.navigation{
		display:block;
		position:fixed;
		margin:10px;
		padding:20px;
		bottom:10px;
		left:15px;
		z-index:1000;}}
	.site-logo{
		position:fixed;
		z-index:-1;
		top:50%;
		left:50%;
		width:200px;
		height:200px;
		margin:-80px 0 0 -90px;
		opacity: 0.25;}
	.site-logo:hover{
		opacity: 1.0;
		-webkit-animation:spin 2s linear infinite;
    	-moz-animation:spin 2s linear infinite;
    	animation:spin 2s linear infinite;}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
	.site-header{
		margin-top:15px;
		margin-left:30px;
		top:0;
		position:fixed}
	.site-header a{text-decoration:none;}
	.about-overlay{
		font-family:sans-serif;
		color:#000000;
 /* Old browsers */
		margin:0px;
		padding:2% 2% 0 2%;
		line-height:1.8em;
		font-size:1.2em;
		order:2;
		-webkit-columns:2 auto;
		-moz-columns:2 auto;
		columns:2 auto;
		-webkit-column-gap:2em;
		-moz-column-gap:2em;
		column-gap:2em}
@media screen and (max-width: 955px){
	.about-overlay{
		-webkit-columns:1 auto;
		-moz-columns:1 auto;
		columns:1 auto;
		-webkit-column-gap:1em;
		-moz-column-gap:1em;
		column-gap:1em}}
	.about-overlay p{margin:0 0 25px 0}
	.about-overlay a{
		font-family:sans-serif;
		font-style:italic;
		font-size:1 em;
		padding:1px 0;
		text-decoration:none;
		color:#000000;}
	.about-overlay a:hover{
		border-bottom:1px solid #000000;}
	.about-wrapper{
		display:none;
		overflow:scroll;
		position:fixed;
		z-index:10;
		margin:0;
		top:0;
		height:100%;
		background-color:rgba(0,0,0,0.8)}
	.text{
		font-family:sans-serif;
		font-style:italic;
		font-size:1 em;
		padding:1px 0;
		text-decoration:none;
		color:#000000;
		}
	.text:hover{
		border-bottom:1px solid #000;}
		
@media screen and (max-width: 955px){
	.page-content{
		margin:0 30px;
		position:relative}}
	.site-logo{
		position:fixed;
		z-index:-1;
		top:50%;
		left:50%;
		width:200px;
		height:200px;
		margin:-80px 0 0 -90px}
@media screen and (max-width: 430px){
	.site-logo{
		width:120px;
		height:120px;
		left:57%}}
	.title{font-family:sans-serif;font-size:2em}
@media screen and (max-width: 430px){
	.title{font-size:1.5em}}
	.type{
		font-family:serif;
		font-style:italic;
		font-size:2em}
@media screen and (max-width: 430px){
	.type{font-size:1.5em}}
	.project{width:1024px;float:left;height:100vh;overflow:scroll;padding:0 25px 10px 0px;margin:0px 25px 0px 0px}
@media screen and (max-width: 1400px){
	.project{
		width:900px;
		float:left;
		height:100vh;
		overflow:scroll;
		padding:0 25px 0px 0px;
		margin:0px 25px 0px 0px}}
@media screen and (max-width: 955px){
	.project{
		float:left;
		width:100%;
		height:auto;
		border:none;
		padding:0;
		border-bottom:2px solid black}}
	.project:last-of-type{
		margin-right:0;
		border-right:none}
	.project .title{
		margin:100px 0 7px 0}
@media screen and (max-width: 1400px){
	.project .title{margin:70px 0 7px 0}}
	.project p{
		margin:20px 0;
		font-family:sans-serif;
		font-size:1.5em;
		line-height:1.4em;
		letter-spacing:.02em}
@media screen and (max-width: 1400px){
	.project p{
		font-size:1.4em;
		line-height:1.3em}}
	.project img{
		width:100%;
		margin:10px 0}
	.projects{
		z-index:-10;
		top:0;
		width:calc(1080px * 5);
		position:absolute;
		display:inline-block;
		margin-left:25px;}
@media screen and (max-width: 955px){
	.projects{width:auto}}
	.content a{
		text-decoration:none;
		font-family:sans-serif;
		font-size:1.2em;
		color:#383434;
		letter-spacing:.02em;
		float:left;
		background:#fff;
		padding-left:0px;
		padding-top:0px;
		padding-right:0px;
		padding-bottom:0px;
		-webkit-transition:.2s all;
		transition:.2s all}
	.content a:hover{
		font-style:italic;
		background:#000;
		color:#fff;
		padding-left:5px;
		padding-top:0px;
		padding-right:0px;
		padding-bottom:0px}

body{
	font-family:sans-serif;
	line-height:1.5;
	color:#000;
	background: #fff;
	-webkit-text-size-adjust:100%;
	letter-spacing:.02em}
html,body,div,span,applet,object,iframe,h1,h2,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}
h1,h2,h3,h4,h5,h6{font-weight:300}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
	display:block}
body{line-height:1}
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}
img{
	max-width:100%;
	vertical-align:middle}
li>ul,li>ol{margin-bottom:0}
.clear{clear:both}:
:selection{
	background:red;
	opacity:1;
	color:#fff}:
:-moz-selection{
	background:red;
	opacity:1;
	color:#fff}