/* IMPORT RESET */
@import url("reset.css");

/* IMPORT 12 COLUMN RESPONSIVE GS */
@import url("responsive.gs.12col.css");


h2 {
	text-align: center;
	font-size: 2.5em;
	margin: 1em 0;
	padding: 0 1em;
}
	
	h2 span {
		font-size: 0.75em;
	}
	
	@media ( min-width : 768px ) {
		h2 {
			padding: 0 2em;
		}
	}


body {
	font-family: sans-serif;
	color: #000;
	background-color: #f8f8f8;
}

header {
	text-align: center;
	background: #222228;
}

	header h1 {
		font-size: 4em;
		text-transform: uppercase;
		color: #fafafa;
		padding: 2em 1em;
	}
	
		@media ( min-width : 768px ) {
			header h1 {
				font-size: 5em;
			}
		}



#about,
#projects,
#social,
#quote,
#contact {
	width: 100%;
	padding: 2em 0;
}
	
	.wrapper {
		max-width: 960px;
		margin: 0 auto;
		
	}
	
	@media ( min-width : 768px ) {
		.wrapper {
			padding: 0 2em;
		}
	}

#about {
	background-color: #f1f0ef;
}



#projects {
	
}
	
	#projects .col img {
		max-width: 100%;
	}
	
	.project {
		height: 217px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: top center;
	}
		
		.wearecolorblind 	{ background-image: url('../img/project_wearecolorblind.png'); }
		.observist 			{ background-image: url('../img/project_observist.png'); }
		.loopbox 			{ background-image: url('../img/project_loopbox.png'); }
		
		a.project {
			text-decoration: none;
			color: #555;
			font-size: 1em;
			font-weight: bold;
		}
		
		.project h3 {
			display: none;
		}

#social {
	padding-bottom: 5em;
}
	
	#social .wrap {
		margin: 0 auto;
	}
	
	.social {
		margin-bottom: 2%;
	}
	
	.flickr, .instagram, .lastfm, .linkedin, .soundcloud, .tumblr {
		display: block;
		background: url('../img/sprites.png') no-repeat;
		width: 128px;
		height: 128px;
		margin: 0 auto;
	}
	
	.linkedin{
		background-position: 0 0;
	}
	
	.flickr{
		background-position: 0 -150px ;
	}
	
	.instagram{
		background-position: 0 -300px ;
	}
	
	.tumblr{
		background-position: 0 -450px ;
	}
	
	.lastfm{
		background-position: 0 -600px ;
	}
	
	.soundcloud{
		background-position: 0 -750px ;
	}
	
	.social a {
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
		filter: url(grayscale.svg); /* Firefox 4+ */
		filter: gray; /* IE 6-9 */;
	}
	
	.social a:hover {
		-webkit-filter: none;
		-moz-filter: none;
		-ms-filter: none;
		-o-filter: none;
		filter: none;
		filter: none; /* IE 6-9 */;
	}


#quote {
	background-color: #30444e;
}

	#quote p {
		text-align: center;
		font-size: 2.5em;
		font-style: italic;
		color: #fafafa;
		margin: 1em 0;
		padding: 0 1.5em;
	}
	
		#quote p span {
			font-size: 0.5em;
			font-style: normal;
		}
		
		@media ( min-width : 768px ) {
			#quote p {
				padding: 0 3.5em;
			}
		}
		
	
	

#contact {
	padding-bottom: 5em;
}
	
	#contact p {
		text-align: center;
		margin: 2em 0;
		padding: 0 1em;
	}
		
	#contact a {
		text-decoration: none;
		color: #000;
		font-size: 1.5em;
		font-style: italic;
	}
	
		#contact a:hover {
			text-decoration: underline;
			color: #555;
		}
		
	#contact .email {
		margin: 0 auto;
		border-radius: 200px;
		width: 350px;
		height: 350px;
		background: #f5f5f5 url('../img/tom.jpg') no-repeat center center;
		display: table;
	}