* {margin:0;padding:0;box-sizing:border-box;}

#wrapper {
	background-color: #fff;
	margin: 0 auto;
	padding: 0;
	border: 0;
}

body {
	font-family: 'Roboto', sans-serif;
	margin: 0;
	border: 0;
	font-size: 16px;
	line-height: 1.5;
}

header {
	background-color: #C1B49A;
	border: 0;
	padding: 0;
	height: 45vh;
}

header img {
	background-repeat: no-repeat;
	/*background-image: cover;*/
	height: 100vh;
	width: auto;
	float: left;
}

nav {
	background-color: #C1B49A;
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	float: right;
}

nav a {
	color: white;
	background-color: #C1B49A;
	display: block;
	font-size: 1em;
	text-decoration: none;
	text-transform: uppercase;
	list-style-position: inside;
	float: left;
	width: auto;
	padding: 20px;
	margin: 5px;
}

a:hover {
	background-color: #fff;
	color:#C1B49A; 
}

.clearfix:after{
	visibility: hidden;
	display: block;
	content: " ";
	clear: both;
	height: 0;
	font-size: 0;
}

/*<----ABOUT ME SECTION---->*/

#about {
    background-color: #666;
    padding: 6em 0;
}

#about .content{
	clear: both;
}

h1{
	font-size: 2em;
	font-weight: normal;
	background-color: #fff;
	color: #C1B49A;
	padding: 8em 1em 8em 2em;
	letter-spacing: 1px;
}

#bio img{
	width: 10em;
	z-index: 1;
	position: relative;
	top: -5em;
	left: 55%;
}

#bio h3{
	color:#C1B49A;
	font-size:2.125em;
	letter-spacing: 3px;
	font-weight: normal;
	text-transform: uppercase;	
	width: 600px;
	padding: 0;
	margin: auto;
}

#bio p{
	color: #fff;
	padding: 2em 2em 0 0;
	width: 600px;
	letter-spacing: .5px;
	margin: auto;
}

.clearfix:after{
	visibility: hidden;
	display: block;
	content: " ";
	clear: both;
	height: 0;
	font-size: 0;
}

/*<---END ABOUT ME SECTION--->*/

#work{
	background-color: #fff;
	padding: 15%;
}

.portfolio{
	list-style: none;
}

.portfolio li{
  float: left;
  padding: .15em;
}

.portfolio img{
  width: 18em;
  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
  filter: grayscale(100%);
  float: left;
  /*padding: .15em;*/
}

footer {
    padding: 6em;
	background-color: #C1B49A;
}

#contact{
	width: 600px;
	margin: auto;
}

#contact p{
	margin: 1em 0 0;
	padding: 2em 2em 0 0;
	width: 600px;
	letter-spacing: .5px;
}

#contact h3{
	font-size:2.125em;
	color:#fff;
	letter-spacing: 3px;
	font-weight: normal;
	text-transform:uppercase;
	width: 600px;
	padding: 0;
}

#contact a{
	text-decoration: none;
	color: #111;
	font-weight: bold;
}

#contact a:hover {
	background-color: #fff;
	padding: .5em;
}

/* <--MEDIA QUERIES--> */

@media only screen and (max-width: 750px) {

	#bio h3{
		font-size:1.75em;
		width: 80%;
	}

	#bio p{
		width: 80%;
	}

	#work {
		padding: 5em;
		margin: auto;
	}

	.portfolio img{
  		width: 80vw;
  	}

	footer {
    	padding: 8em 0 8em 2em;
    	width: 100%;
	}

	#contact h3{
		font-size:1.75em;
		width: 80%;
	}

	#contact p{
		width: 80%;
	}
}

@media only screen and (max-width: 580px) {
	
	nav {
		float: none;
		display: block;
	}

	nav a {
		width: 100%;
		margin: 0;
		text-align: center;
	}

	header img {
		height: auto;
		width: 100vw;
		float: left;
	}

	#about {
		display: block;
		width: 100%;
		margin: 0;
	}

/*	#bio {
		display: block;
		width: 100%;
		margin: 0;
	}*/

	#bio img{
		top: -4.5em;
		left: 30%;
	}

	.portfolio{
		float: none;
		display: block;
		width: auto;
	}

	.portfolio img{
  		width: 60vw;
  		float: left;
	}

	#contact {
		display: block;
		width: 100%;
		margin: 0;
	}
}