/* ==========================================================================
   GLOBAL
   ========================================================================== */

/* reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}
article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}
a img{border:0}
figure{position:relative}
figure img{width:100%}
html {font-size: 100%}
body {line-height: 1.5; color: #a9a3a3; background: #fff; text-align:center; font-size:1em; font-family: 'Source Sans Pro', arial, helvetica, verdana, sans-serif; font-weight: 300}

   
 /* ==========================================================================
   STRUCTURE
   ========================================================================== */  
   
.container {
	margin:0 auto 0 auto;
	text-align: center;
	padding: 0;
}  
	
.header {
	padding: 0 0 20px 0;
}

.header, .info {
}
	
.folio, .info {
	padding: 10px 0 10px 0;
	}

.folio article {
	margin: 0 0 50px 0;
	/* border: solid 1px #c00;	*/
	}

.footer {
	margin: 0;
	padding: 0;
	background-color: #eaeaea;
}		

header {
	margin: 0;
	padding: 6em 0;
	text-align: center;
}
	
 /* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */  	

h1, h2, h3, h4 {
	font-family: 'Open Sans Condensed', sans-serif; 
	}
	
h1 {	
	padding: 10px 0 0px 0;
	text-align: center;
	}	
	
h2 {
	margin: 0 0 5px 0;
	padding: 0 0 7px 0;
	}	
		
p {
	margin: 0 0 15px 0;
	padding: 0 20% 0 20%;
	text-align: center;
	}
	
.social {
	padding: 10px 0 10px 0;
	display: inline-block;
	text-align: center;
}	

ul {
		list-style-type: none; 
		font-size: 0.9em;
		}

ul li {
		padding: 5px 8px 5px 8px;
		margin: 0 6px 0 6px;
		float: left;
		color: #c1c1c1;
		background-color: #eaeaea;
		border-radius: 7px;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		}
		
ul li a {
		color: #a9a3a3;
		text-decoration: none;
		}		

ul li a:hover {
		color: #E24C4C;
		}
	
ul li.active {
		color: #fff;
		background-color: #a9a3a3;
		border-radius: 7px;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		}
		
.profile-pic {
		border-radius: 200px;
		-moz-border-radius: 200px;
		-webkit-border-radius: 200px;
		}
	
	
 /* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */ 	


/*media query*/
@media only screen and (min-width: 300px) {

header article {max-width: 100%;}
h1 {line-height: 1.2em; font-size: 2.2em;}
h2 {line-height: 1.2em; font-size: 1.5em;}
p {padding: 0 5% 0 5%; max-width: 100%; text-align: center;}
.profile-pic {width: 40%}	

	
}/*media query*/
@media only screen and (min-width: 700px) {

.header article {width: 90%; display: inline-block;}
h1 {font-size: 3em;}
h2 {font-size: 1.8em;}
.profile-pic {width: 30%}	

}/*media query*/
@media only screen and (min-width: 980px) {

p {margin: 0 auto; padding-bottom: 1em; max-width: 70%; text-align: center;}
.profile-pic {width: 20%}
	
}/*media query*/
	
	

 /* ==========================================================================
   MISCELLANEOUS
   ========================================================================== */ 	
	
a.bg {
	text-decoration: none;
	font-weight: normal;
	font-family: 'Shadows Into Light', cursive;
	font-size: 1.3em;
	color: #fff;
	background-color: #a9a3a3;
	padding: 4px 8px 4px 8px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	}	

a.bg:hover {
	text-decoration: none;
	background-color: #E24C4C;
	}	
	

footer p {
	padding: 12px 0 12px 0;
	font-size: 0.8em;
	text-transform: uppercase;
}	
	

.folio article img {
	border: solid 5px #fff;
	-moz-box-shadow: 1px 0px 1px 1px #ccc;
	-webkit-box-shadow: 1px 0px 1px 1px #ccc;
	box-shadow: 1px 0px 1px 1px #ccc;
	}