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

/* MOBILE FIRST */

/* General */

body {
	background-color:#090909;
	color: #eee;
	font-weight: 300;
}

/* Type */

h1, h2 {
	/*font-family:'Playfair Display', sans-serif;  Signika Negative*/
	letter-spacing: 0.12em;
	font-weight: 100;
}

h1 {
	font-size: 6em; /* 78px */
	line-height: 1em;
}

/* Links */

a {
	color: #eee;
	text-decoration: none;
	border-bottom: 1px dotted #eee;
}

a:hover {
	color: #ccc;
	border-bottom: 1px dotted #ccc;
}

/* Layout */

#top {
	background-color:#528489;
	padding-top:20px;
	padding-bottom:20px;
}

#bottom {
	background-color:#090909;
	padding-top:20px;
	padding-bottom:20px;
}

#top-content, #bottom-content {
	width: 85%;
	margin: 0 auto;
}


/* Top section */



#top-content #bio p {
	font-size: 15px;
}

#top-content #photo {
	margin-bottom: 10px;
}

#top-content #photo img {
	width: 100%;
}

#top-content #photo a {
	border: none;
}

/* Bottom section */



#bottom-content #projects li {
	margin-left: 0;
	list-style: none;
}

#bottom-content #projects li p {
	padding-top: 5px;
}

#bottom-content #projects li img {
	border: 3px #eee solid;
	width: 98.2%;
}

#bottom-content #projects li a {
	color: #eee;
	text-decoration: none;
	border-bottom: none;
}

#bottom-content #projects li a:hover {
	color: #528489;
	-moz-opacity:.80; 
	filter:alpha(opacity=80); 
	opacity:.80; 
}

/* Footer */

#footer {
	padding-top: 20px;
}

#footer p {
	text-align: center;
	color: #666;
}


/* Utilities */

.clear {
	clear:both;
}


@media only screen and (min-width: 480px) {
	h1 {
		font-size:4.7em;
	}

	#top-content #bio {
		margin-left: 10px;
		margin-right: 10px;
	}

	#top-content #photo {
		float:right;
		width: 36%;
		margin-left: 5%;
	}

	#bottom-content #projects h2 {
		margin-left: 2%;
		margin-right: 2%;
	}

	#bottom-content #projects li {
		float:left;
		width: 45.5%;
		margin-right: 2%;
		margin-left: 2%;
	}

}


/* portrait tablet */
@media only screen and (min-width: 768px) {

	#top-content h1 {
		float:left;
	}

	.clear-left {
		clear:left;
	}	
}

/* desktop / horizontal tablet */
@media only screen and (min-width: 1024px) {

	#top-content, #bottom-content {
		width: 960px;
		margin: 0 auto;
	}	

	#top-content h1 {
		font-size: 6em;
	}

	#top-content #bio {
		float:left;
		width:940px;
		margin-left: 10px;
		margin-right: 10px;
	}

	#top-content #photo img {
		width: 350px;
	}

	#top-content #photo {
		width: 350px;
		margin-left: 10px;
		margin-bottom: 5px;
	}

	#bottom-content #projects {
		margin-left: 10px;
		margin-right: 10px;
	}

	#bottom-content #projects h2 {
		margin-left: 0;
		margin-right: 0;
	}

	#bottom-content #projects li {
		margin-right:10px;
		margin-left:10px;
		width: 220px;
	}

	#bottom-content #projects li img {
		width: 214px;
	}


	#bottom-content #projects li:first-child {
		margin-left:0px;
	}

	#bottom-content #projects li:last-child {
		margin-right:0px;
	}


}