* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
 /* 	font-smooth: never;
	-moz-font-smoothing:none;
	font-smoothing:none;
	-webkit-font-smoothing:none;
	-moz-font-smoothing:none;
	-moz-osx-font-smoothing: grayscale;*/
}

body {
	background-color: #F5F5F5;
	font-size:12px;
	padding: 10px 5% 10px 5%;
	min-width:500px;



}

p a { 
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	color: #111111;
	text-decoration: none;
	background-color: #FFF4E3;
	font-weight: 400;
}
p a:hover { 
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	color: #111111;
	text-decoration: none;
	background-color: #FFE45C;
	font-weight: 400;
}

li a { 
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	color: #111111;
	text-decoration: none;
	background-color: #FFF4E3;
	font-weight: 400;
}

li a:hover { 
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	color: #111111;
	text-decoration: none;
	background-color: #FFE45C;
	font-weight: 400;
}

h3 { 
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	color: #111111;
	text-transform: uppercase;
	font-weight: normal;
	margin-bottom: 10px;
	font-size:12px;
}

h4 { 
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	color: #111111;
	margin-bottom: 5px;
	font-weight: 400;
}

h4 a {
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	color: #111111;
	text-decoration: none;
	background-color: #FFF4E3;
	font-weight: 400;
}

h4 a:hover {
	background-color: #FFE45C;
}

h5 {
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	color: #111111;
	font-weight: 400;
	font-size: 1em;
	margin: 0;
	padding: 0 0 10px 0;
}

ul {
	margin:0;
	padding:0;
	list-style-type: none;
}

#content {
	top:10px;
	bottom:10px;
	right:10px;
	left:10px;
}

#title {
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	font-size: 1.0em;
	margin: 0px 0;
	font-weight: bold;
	position:fixed;
	z-index: 1;
	line-height: 4.0em;
	display: inline-block;
	width: 100px;

	-webkit-animation: fade-in 0s ease;
  	-moz-animation: fade-in ease-in-out 0s both;
  	-ms-animation: fade-in ease-in-out 0s both;
  	-o-animation: fade-in ease-in-out 0s both;
  	animation: fade-in 0s ease;
  	  	visibility: visible;
  	-webkit-backface-visibility: hidden;
}

#title a {
	text-decoration: none;
	line-height: 2em;
	text-align: center;
	margin: 0;
	padding:10px 15px; 
	color: #FFFFFF;
	background-color: #000000;
	-webkit-animation: fade-in 0s ease;
  	-moz-animation: fade-in ease-in-out 0s both;
  	-ms-animation: fade-in ease-in-out 0s both;
  	-o-animation: fade-in ease-in-out 0s both;
  	animation: fade-in 0s ease;
  	  	visibility: visible;
  	-webkit-backface-visibility: hidden;
}

#title a:hover {
	color: #111111;
	background-color: #FFFFFF;
}

#tetris {
	position: fixed;
	top: 40px;
	width: 87px;
	height: 582px;
	z-index: -1;
}

.subheader {
	max-width:820px;
	margin: 10px 0;
	padding: 0 0 0 120px;
	clear: both;

	-webkit-animation: fade-in 2s ease;
  	-moz-animation: fade-in ease-in-out 2s both;
  	-ms-animation: fade-in ease-in-out 2s both;
  	-o-animation: fade-in ease-in-out 2s both;
  	animation: fade-in 2s ease;
  	  	visibility: visible;
  	-webkit-backface-visibility: hidden;
}

.subheader p {
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	line-height: 1.5em;
	font-size: 1.0em;
	color: #111111;
}

.subheader p a {
		font-weight: bold;
	}

.subheader h1 {
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	line-height: 1.5em;
	font-size: 1.0em;
	color: #111111;
	font-weight: bold;
	margin: 10px 0 0 0;
}

.subheader h1 a {
	text-decoration: none;
	background-color: #FFF4E3;
	color: #111111;
}

.subheader h1 a:hover {
	text-decoration: none;
	background-color: #FFE45C;
	color: #111111;
}

.subheader h2 {
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	line-height: 1.5em;
	font-size: 1.0em;
	color: #111111;
	font-style: italic;
	font-weight: normal;
	margin: 0px 0 0 0;
}

.subheader h3 {
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	line-height: 1.5em;
	font-size: 1.5em;
	color: #111111;
	font-weight: bold;
	margin: 10px 0 0 0;
}

.subheader ul {
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	line-height: 1.7em;
	font-size: 1.0em;
	color: #111111;
	padding: 5px 0 5px 0;
}

.subheader ul ul {
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	line-height: 1.7em;
	font-size: 1.0em;
	letter-spacing: 0.0em;
	color: #111111;
	padding: 0 0 0 45px;
	list-style-type: square;
}

/*.subheader img {
	max-width: 700px;
	margin: 6px 0 0 0;
}*/

#img-load {
	cursor: pointer;
}

#desc-load {
	text-align: right;
}

.front-img {
	max-width: 100%;/*700px;*/
	margin: 6px 0 0 0;

	-webkit-animation: fade-in 4s ease;
  	-moz-animation: fade-in ease-in-out 4s both;
  	-ms-animation: fade-in ease-in-out 4s both;
  	-o-animation: fade-in ease-in-out 4s both;
  	animation: fade-in 4s ease;

  	visibility: visible;
  	-webkit-backface-visibility: hidden;
}

@-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}}
@-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@keyframes fade-in{0%{opacity:0} 100%{opacity:1}}

#front-img-desc {
	color: #AAA;

	-webkit-animation: fade-in 2s ease;
  	-moz-animation: fade-in ease-in-out 2s both;
  	-ms-animation: fade-in ease-in-out 2s both;
  	-o-animation: fade-in ease-in-out 2s both;
  	animation: fade-in 2s ease;
  	  	visibility: visible;
  	-webkit-backface-visibility: hidden;
}

.wrapper {
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	line-height: 1.5em;
	letter-spacing: 0.0em;
	color: #333;
	max-width: 1100px;
	margin: 0 0 50px 0;
	padding: 0 10px 0 120px;
	text-indent: 0px;
}

.wrapper p {
	max-width: 1100px;
	font-size:1.1em;
	line-height: 1.5em;
	text-indent: 0px;
	margin: 15px 0;
}

.wrapper h1 {
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	padding: 10px 0;
	font-size: 1.0em;
	font-weight: bold;
	text-decoration: none;
	padding-left: 10px;
	color: #FFFFFF;
	background-color: #010101;
}

.wrapper h2 {
	max-width: 800px;
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	padding: 10px 0;
	font-size: 1.9em;
	line-height: 1.4em;
	font-weight: normal;
	text-decoration: px;
	color: #333;
	/*background-color: #FFFFFF;*/
}

.wrapper a { 
	color: #000000;
	text-decoration: none;
	background-color: #FFF4E3;
}

.wrapper a:hover{
	background-color: #FFE45C;
}

.wrapper img {
	clear: both;
	padding: 0;
	margin: 15px 0px;
	max-width:1000px;
	width: 100%;
	height: auto;
}

.wrapper .more { 
	display: none;
}

.wrapper .columns {
	height: 1%;
}

.wrapper .left-col {
	float: left;
	max-width: 48%;
	height: auto;
}

.wrapper .right-col {
	float: right;
	max-width: 48%;
	height: auto;
}

.wrapper .columns p {
	text-align: center;
	line-height: 1.5em;
	font-size: 1.0em;
	margin:0 0 10px 0;
	padding:0;
}

.columns:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#workList ul {
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	list-style-type: none;
	padding: 0;
    margin-left: 115px;
    margin-right: 25px;
    margin-bottom: 100px;
    margin-top: 20px;
    text-align: left;

}

#workList h4 {
	position: absolute;
	margin:0;
	padding:10px 10px 10px 10px;
	bottom: 0px;
	color: #FFFFFF;
	background-color: #000000;
	text-decoration: none;
	font-weight: bold;
}

.work {
	position: relative;
	display: inline-block;
	vertical-align: top;
	/*width: 270px;
	height: 189px;*/
	/*width: 250px;
	height: 175px;*/
	width: 200px;
	height: 140px;
	margin: 8px 5px;
	padding: 0;
	background-color: #000000;
	text-align: left;
}

.workDesc {
	color: #FFFFFF;
	background-color: #444444;
	padding: 3px 8px;
	position: absolute;
	display:none;
	top:140px;
	z-index: 1;
	min-width: 200px;
	max-width: 200px;
/*	min-height: 150px;*/
}

#workList img {
	position:absolute;
	margin:0;
	padding:0;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index: 0;
}

.video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0;
	height: 0;
	margin: 0;
}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 15px 0 15px 0;
}

#top-nav {

}

#bottom-nav {
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	font-size: 1.0em;
	margin: 0px 0;
	font-weight: bold;
	z-index: 1;
	line-height: 4.0em;
	display: inline-block;
	width: 100px;
}

#bottom-nav a {
	text-decoration: none;
	line-height: 2em;
	text-align: center;
	margin: 0;
	padding:10px 15px; 
	color: #FFFFFF;
	background-color: #000000;
}

#bottom-nav a:hover {
	color: #111111;
	background-color: #FFFFFF;
}

#footer {
	color: #8F8F8F;
	text-align: right;
	font-family: 'Roboto Mono', 'Helvetica', sans-serif;
	margin-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
	clear:both;
	-webkit-animation: fade-in 1s ease;
  	-moz-animation: fade-in ease-in-out 1s both;
  	-ms-animation: fade-in ease-in-out 1s both;
  	-o-animation: fade-in ease-in-out 1s both;
  	animation: fade-in 1s ease;
}

#mobile-indicator {
    display: none;
}

/*TUMBLR*/
/*TUMBLR*/
/*TUMBLR*/
/*TUMBLR*/
/*TUMBLR*/
.wrapper ol {
	margin: 10px 0 20px 0;
	list-style-type: none;
	padding: 0;
}

.wrapper ol li {
	margin: 10px 0 50px 0;
}

.wrapper ol img {
	margin: 0;
}

.wrapper ol ul li {
	text-align: right;
	font-size:1.0em;
	line-height: 1.0em;
	font-style: normal;
	margin: 0;
}

.wrapper .post-photo p {
	margin: 0;
	padding: 0 20%;
	text-align: center;
	font-style: italic;
	font-size:1.0em;
	line-height: 1.5em;
	max-width:100%;
}

.wrapper .post-video p{
	margin: 0;
	padding: 0 20%;
	text-align: center;
	font-style: italic;
	font-size:1.0em;
	line-height: 1.5em;
	max-width:100%;
}

.wrapper .post-quote p {
	margin: 10px 0;
	padding: 0 12%;
	text-align: center;
	font-style: italic;
	font-size:1.6em;
	line-height: 1.5em;
	max-width:100%;
}

.wrapper .post-photoset {
	margin: 10px 0 50px 0;
	padding: 0 12%;
	text-align: center;
	font-style: normal;
	font-size:1.0em;
	line-height: 1.5em;
	max-width:100%;
}

.wrapper .post-photoset .caption {
	text-align: left;
}

.wrapper .source {
	margin: 20px 0;
	padding: 0 12%;
	text-align: center;
	font-style: normal;
	font-size:1.0em;
	line-height: 1.5em;
	max-width:100%;
}

/*MOBILE*/
/*MOBILE*/
/*MOBILE*/
/*MOBILE*/
/*MOBILE*/
@media screen and (max-width: 750px) {

	#mobile-indicator {
        display: block;
    }

	* {
		-webkit-overflow-scrolling: touch;
		-moz-overflow-scrolling: touch;
		-ms-overflow-scrolling: touch;
		-o-overflow-scrolling: touch;
		overflow-scrolling: touch;
	}

	body {
		background-color: #F5F5F5;
		font-size:12px;
		padding: 10px 10px;
		min-width:90%;
	}

	#title {
		font-family: 'Roboto Mono', 'Helvetica', sans-serif;
		font-size: 1.0em;
		margin: 0;
		font-weight: bold;
		position: static;
		z-index: 0;
		line-height: 4.0em;
		display:inline-block;
		width:100%;
	}

	#tetris {
		visibility: hidden; 
		position: fixed;
		top: 40px;
		width: 87px;
		height: 700px;
		/*z-index: -1;*/
}

	.subheader {
		max-width:100%;
		font-size: 1.0em;
		margin: 10px 0 10px 0;
		padding: 0;
	}

	.subheader img{
		max-width: 100%;
		margin: 0 0 0 0;
	}

	.subheader p a {
		font-weight: bold;
	}

	.subheader ul li {
		font-family: 'Roboto Mono', 'Helvetica', sans-serif;
		line-height: 1.7em;
		font-size: 1.0em;
		color: #111111;
		padding: 0 0 4px 0;
	}

	.wrapper {
		font-family: 'Roboto Mono', 'Helvetica', sans-serif;
		line-height: 1.5em;
		letter-spacing: 0.0em;
		color: #333;
		max-width: 100%;
		margin: 0 0 50px 0;
		padding: 0 0px;
		text-indent: 0px;
	}

	.wrapper p {
		max-width: 700px;
		font-size:1.1em;
		line-height: 1.5em;
		text-indent: 0px;
		margin: 30px 0;
	}

	#workList ul {
		font-family: 'Roboto Mono', 'Helvetica', sans-serif;
		display:block;
		list-style-type: none;
		padding:0;
		margin:0;
    	text-align: left;
	}

	#workList h4 {
		position: static;
		line-height: 1.0em;
		width: 100%;
		color: #FFFFFF;
		background-color: #000000;
		text-decoration: none;
		font-weight: bold;
	}

	.work {
		position: static;
		width: 100%;
    	height: auto;     
		margin: 10px 0 10px 0;
		padding: 0;
		top:0		;
		background-color: #000000;
		text-align: left;
	}

	#workList img {
		position:static;
		display:block;
		margin:0;
		padding:0;
		top:auto;
		left:auto;
		height:auto;
		z-index: 1;
	}
	
	.workDesc {
		position:static;
		color: #FFFFFF;
		background-color: #444444;
		padding: 3px 8px;
		display:block;
		width: 100%;
		min-width:100%;
		max-width:100%;
		height:auto;
		top:auto;
		left:auto;
		bottom:auto;
		z-index: 0;
	}

	.wrapper .left-col {
		float: none;
		max-width: 100%;
		height: auto;
	}

	.wrapper .right-col {
		float: none;
		max-width: 100%;
		height: auto;
	}

}