/* Table of Contents
––––––––––––––––––––––––––––––––––––––––––––––
- General Content
- Typography
- Header & Navigation
- Images & Media
- Footer
- Media Queries
–––––––––––––––––––––––––––––––––––––––––––––– */

/* General Content
–––––––––––––––––––––––––––––––––––––––––––––– */
.main {padding-top:20px;}
.row {padding: 2% 0;}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––– */
body{
	font-family: 'Abel',sans-serif;
	font-size: 1.5em;
	color: #000;
}
h2 {
	font-family: 'Satisfy', cursive;
	font-size: 3em;
	margin: 0.67em;
}

p.bio{color: #fff;}

/* Header & Navigation
–––––––––––––––––––––––––––––––––––––––––––––– */
header.main_nav{
	padding: 1% 0;
	display: block;
}
.logo{
	margin: 5% auto;
	text-align: center;
}
.logo a{
	font-size: 3em;
	color: #fff;
	text-decoration: none;
	border: 3px solid #fff;
	text-transform: uppercase;
	padding: 2px 10px 0 10px;
	margin: 0;
}
.logo a:hover{
	background-color: #fff;
	color: #7accc8;
}
/* Images & Media
–––––––––––––––––––––––––––––––––––––––––––––– */
img{max-width: 100%;}
img.avatar{
	border-radius: 400px;
	border: 5px solid #fff;
}
img:hover{opacity:0.8;}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––– */
ul.social{
	display: block;
	margin: 5% 0;
	list-style-type: none;
	text-align: center;
}
ul.social li{
	font-size: 3em;
	display: inline;
	padding: 0 2%;
}
ul.social li a{
	color: #666;
}
ul.social li.facebook a:hover{color: rgb(59,89,152);}
ul.social li.twitter a:hover{color: rgb(0,172,237);}
ul.social li.instagram a:hover{color: rgb(81,127,237);}
ul.social li.youtube a:hover{color: rgb(187,0,0);}
ul.social li.flickr a:hover{color: rgb(255,0, 132);}
ul.social li.linkedin a:hover{color: rgb(0, 123,182);}

p.copyright{
	text-align: center;
	color: #666;
	font-size: 1em;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––– */
p {
	margin-bottom:12px;
}

.header-container {
	width:100%;
	height:160px;
	background:#7accc8;
}

.header-container.science {
	background: #393abd;
}
.header-container.internship {
	background: #a00547;
}

.header-container.art {
	background: #8ebe4f;
}


.header-content {
	position:relative;
	max-width: 960px;
	margin:0 auto;
}

.avatar {
	width:160px;
	height:160px;
	float:left;
	margin: 20px 40px 0 0;
}

.intro {
	padding:40px 0 0 0;
	font-size: 16px;
	color: #fff;
	line-height: 24px;
}
.signature {
	position: absolute;
	top: 100px;
	right: 0;
	color:#3f7f7c;
}
.highlight {
	padding: 40px 0;
}
.highlight p {
	font-size:20px;
	width:80%;
	margin: 0 auto 0 auto;
}
.portfolio {
	padding-top:20px;
	position:relative;
}

.focus img {
	border: solid 5px #faed7d;
}

.focus h3 {
	width:100%;
	text-align: center;
	font-size:20px;
	position:absolute;
	top:-24px;
	font-weight:bold;
	color:#a00547;
	right:0;
}

.focus a {
	color:#545454;
	text-decoration: none;
}