/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Add Styles Here */

body {background-color:#f0f0f0;}

header {height:100%;
		float:left;
		position: fixed;
		background:white; 
		padding-bottom:21%; 
		width:20%;
		box-shadow: 2px 2px 3px #f0f0f0; }


header h1  {font-size: 1.5em;
			color: #606366;
			font-family: 'raleway', sans-serif;
			font-weight: lighter;
			padding-bottom: 8%;
			text-transform: lowercase;
			text-align: center;
			width:50%;
			padding-left: 22%;}



#logo {padding-left:33%;
	   width: 23%;
	   padding-top:12%;
	   padding-bottom:1.25%; }

nav ul a {color:#606366; 
		  text-decoration:none; 
		  font-size: 1.8em; 
		  font-family: 'Raleway', sans-serif; 
		  padding-left:30%;
		  }

a {line-height: 1.65em;}

a.current:link, a.current:visited {  
    color:#35cfb9;  }

header a:hover {color: #b8b8b8;}


section {float:left; 
		 width:70%;
		 padding-top: 12%;
		 padding-left: 23%; }

section h1 {text-indent: -9999px;}

section h2 {font-size:1.5em;
			color:#606366;
			font-family: 'raleway', sans-serif;}

section p {width:53%;
		   font-family: 'raleway', sans-serif;
		   color:#606366;
		   font-size: 1.2em;
		   line-height: 1.2em;
		   padding-bottom:2.5%; }

section a {text-decoration: none;
		   color: #35cfb9;}

#phone {color:#35cfb9;}

.work h2 {padding-bottom: 2%;
		  clear:both;
		  font-weight:lighter;}

.contact {clear:both; float: left; width: 22px; padding-right: 5px;}

#resume-icon {padding-top: 8px;}

#email-icon {padding-top: 14px;}

#phone-icon {padding-top: 10px;}

.contact-h2 {line-height: 1.5em;}

.work img {float:left; width:130px;}

.work img {
    opacity: 0.65; 
    float:left;
    padding-left: 1.8%;
    padding-bottom: 1.8%;
}

.work img:hover {opacity: 1;}

#me {float:left;
 	 padding-right: 2%; }

#page-h1 {	 font-family: 'raleway' , sans-serif;
			 text-indent: 0px;
			 font-size: 1.6em;
			 padding-bottom: 2%;}

#about {float: left; width:35%;
		font-size: 1.1em;}

footer p {display:none;
	     padding-right: 5%; 
		 font-family:'raleway', 
		 sans-serif; 
		 padding-top:25%; 
		 float:right;
		 font-size:.7em;
		 color:#aeaeae;}


div h3 a {text-align: left;
		  color:#35cfb9;}

div p {font-size: .9em;
	   font-style: italic;
	   color:#606366;
	   font-weight: normal;
	   text-align: left;}

.link-title {font-weight: bold;
			 }

#project-nav {display:none;
			  margin-bottom: 60px;}

#project-nav ul {
				 float: left;}

#project-nav li {float: left;
				padding-right: 90px;}

#project-nav a {font-size: 1em;
			 text-decoration: none;
			 color:#35cfb9;
			 font-weight: bold;
			 }
	   
	   
.works-page {padding-top:2%;}

.fan-img img {padding-bottom:2%;
				 width:950px;}

#fandroid1 {float:left;}

.works-page img {padding-bottom:2%;}

.works-page p {font-size: 1em; line-height: 1.5em;}

.works-page a {font-family:"raleway", sans-serif; text-decoration: underline;}

.works-page h2 {font-size: 2.5em;
				color:#35cfb9;
				margin-bottom: 35px;}

.works-page h4 {font-family: 'raleway', sans-serif;
				font-size: 1.2em;
				line-height: 1.25em;
				color:#606366;
				font-weight: bold;
				margin-bottom: 15px;
				width:635px;}

.works-page h3 {font-size: 1.5em;
				font-family: 'Raleway', sans-serif;
				color:#606366;
				font-weight: bold;
				margin-bottom: 18px;}

.fokus-caps {margin-top: -16px;}

.spark-imgs img {width:900px;}



/*BEGIN MEDIA QUERIES*/


@media (max-width: 1510px) {
  nav ul a {
    font-size: 2em;}
  
#logo { width:18%;}

.work img {width: 105px; }

header {padding-bottom: 26%;}

#about {float: none; width: 60%;}

#me {float: none; padding-bottom: 1%; width: 30%;}
  }
 .work h2 {font-size:1.8em;
 		   padding-left: 16px;}
 		   

@media (max-width: 1200px) {
  nav ul a {
    font-size: 1.5em;}
  
#logo { width:15%;}

.work img {width: 37px; }

header {padding-bottom: 16%;}

section h1 {font-size: 2em;}

#about {float: none; width: 60%; font-size: 1em; }

p {font-size: 1em;}

#me {float: none; padding-bottom: 1%; width: 23%;}
  }


@media (max-width: 1051px) {
  nav ul a {
    font-size: 1.5em;}
  
#logo { width:20%;}

.work img {width: 50px;}

header {padding-bottom: 26%;}

section h1 {font-size: 1.5em;}

.work h2 {font-size: 1em;}

#about {float: none; width: 60%; font-size: .9em; }

p {font-size: .9em;}

#me {float: none; padding-bottom: 1%; width: 23%;}}



@media (max-width: 967px) {
  nav ul a {
    font-size: 1.5em;}
  
#logo { width:20%;}

.work img {width: 50px;}

header {padding-bottom: 18%;}

section h1 {font-size: 1.5em;}

.work h2 {font-size: 1em;}

#about {float: none; width: 60%; font-size: .9em; }

p {font-size: .9em;}

#me {float: none; padding-bottom: 1%; width: 23%;}
  }

@media (max-width: 650px) {
  nav ul a {
    font-size: 1.2em;}
  
#logo { width:20%;}

.work img {width: 37px;}

header {padding-bottom: 16%;}

section h1 {font-size: 1.5em;}

.work h2 {font-size: 1em;}

#about {float: none; width: 60%; font-size: 1em; }

p {font-size: .9em;}

#me {float: none; padding-bottom: 1%; width: 23%;}
  }