@import url("fonts/fonts.css");

/******GENERAL STYLES******/

body{
	position: relative;
	width: 70%;
	margin: 0px 15%;
	font-size: 1.25em;
    font-family: 'SourceSansProRegular', sans-serif;
	color: #444;
	background-color: #F5F5F5;
}
a{
	text-decoration: none;
	color: #ff5656;
	border-bottom: 1px solid #ff5656;
	font-family: 'MerriweatherLight', serif;
}
a:hover{
	color: #ff7d7d;
	border-bottom: 1px solid #ff7d7d;
}
p{
	line-height: 1.5em;
}

/******HEADER STYLES******/

#main_header{
	width: 100%;
	float: left;
	padding: 1.75em 0 .75em;
}
#main_header h1#header_name{ 
	width: 100%;
	float: left;
    font-family: 'SourceSansProLight', sans-serif;
	text-align: center;
	color: #aaa;
}
h1#header_name a{
    font-family: 'SourceSansProRegular', sans-serif;
	color: #6d6d6d;
	display: block;
	border: none;
}
h1#header_name a:hover{
	color: #aaa;
}
#main_header #main_menu{
	width: 100%;
	float: right;
	text-align: center;
}
#main_menu ul{
	text-align: center;
	margin: 0;
	padding-top: 1em;
}
#main_menu li{
	display: inline;
}
#main_menu li:after{
	content: " /";
	color: #888;
}
#main_menu li:last-child:after{
	content: "";
	color: #888;
}

/******MAIN BODY******/

#main_body{
	width: 100%;
	position: relative;
	float: left;
	display: block;
	padding: 0;
}
section#personal_branding{
	font-family: 'SourceSansProLight', sans-serif;
	color: #FFF;
	font-size: 2em;
	padding: 1em 3% 1em;
	background-color: rgb(0, 197, 174);
	width: 94%;
}
strong.highlight{
	font-weight: 100;
	font-family: 'MerriweatherLight', serif;
	font-size: .85em;
}
strong.highlight.darken{
	font-family: 'MerriweatherRegular', serif;
}
a.top_link{
	float: right;
	font-size: .75em;
	padding: 0;
	margin: 0;
}
section#work{
	padding-bottom: 1em;
	width: 100%;
	float: left;
}
section h1{
	width: 100%;
	float: left;
    font-family: 'KarlaBold', sans-serif;
	font-size: 3em;
	padding: .5em 0;
	text-align: right;
}
article.past_project{
	width: 100%;
	float: left;
	padding: 0 0 2em;
}
.past_project:last-of-type{
	border: none;
}
.past_project h2{
    font-family: 'SourceSansProSemibold', sans-serif;
	font-size: 2em;
	width: 100%;
	float: left;
	line-height: 1em;
}
img.project_preview{
	float: right;
	padding: 0 0 1em;
	max-width: 98%;
	min-width: 200px;
	display: inline;
}
.project_summary{
	width: 100%;
	float: left;
}
.project_summary h3{
    font-family: 'SourceSansProLight', sans-serif;
	font-size: 1em;
	font-weight: normal;
	width: 100%;
	float: left;
	display: inline;
	padding: .5em 0 1em;
}
.project_summary h3#deleted a{
	border: none;
}
.project_summary h3#deleted a:hover{
	color: #ff5656;
}
.project_summary h4{
    font-family: 'SourceSansProSemibold', sans-serif;
	font-weight: normal;
	font-size: 1em;
	width: 100%;
	float: left;
	line-height: 1.5em;
}
.project_summary p{
	width: 100%;
	float: left;
	padding-top: 1em;
}

section#about{
	width: 100%;
	float: left;
}
#about img{
	width: 90%;
	max-width: 300px;
	margin: 0 5%;
	display: block;
	padding: 1em 0;
}
#about p{
	width: 100%;
	display: block;
	padding: 1em 0 0;
}
#about p a{
	font-size: 0.9em;
}
#about p#about_selling_point{
	font-size: 1.5em;
	width: 100%;
	float: left;
}
#about strong{
	color: #ff5656;
	font-size: 0.9em;
}
section#contact{
	width: 100%;
	float: left;
}
#contact p{
	text-align: left;
	padding: 1em 0;
	float: left;
	max-width: 600px;
	line-height: 1.5em;
}
#contact ul{
	width: 100%;
	display: block;
	padding: .25em 0;
	float: left;
}
#contact li{
	font-family: 'MerriweatherLight', serif;
	list-style-type: none;
	padding: 0.5em 0;
}


/*******FOOTER STYLES******/

footer#main_footer{
	width: 100%;
	float: left;
	padding-bottom: 0.75em;
}
#footer_bio{
	width: 100%;
	float: left; 
	padding: 1em 0;
}
#footer_bio img{
	width: 100px;
	height: 100px;
	display: block;
	margin: 0 auto;
	padding-bottom: .75em;
}
#footer_bio p{
	width: 100%;
	float: left;
}
#footer_menu{
	width: 100%;
	float: left;
	padding-bottom: 1em;
}
#footer_menu small#copyright{
	width: 100%;
	display: block;
	padding-bottom: 0.25em;
}
#footer_menu ul{
	width: 100%;
	display: block;
	padding: .25em 0;
	float: right;
}
#footer_menu li{
	list-style-type: none;
	float: right;
}
#footer_menu li a{
	border: none;
}

/******MEDIA QUERIES******/
@media only screen and (max-device-width: 640px){
	body{
		width: 90%;
		margin: 0px 5%;
		font-size: 3em;
	}
	p{
		line-height: 1.25em;
	}
	article p{
		font-size: 1em;
	}
	.project_preview img{
		width: 90%;
		max-width: 90%;
		margin: 0 5%; 
	}
	.project_summary h3{
		font-size: 1.5em;
	}
	.project_summary h4{
		font-size: 1.25em;
	}
	#footer_bio img{
		width: 30%;
		height: auto;
		display: block; 
		margin: 0 35%;
		padding-bottom: .75em;
	}
	#about img{
	width: 50%;
	max-width: 50%;
	margin: 0 25%;
	}
}