/*
Plugin: jQuery Parallax
Version 1.1
Author: Ian Lunn
Author URL: http://www.ianlunn.co.uk/
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/

License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/.
*/

@charset "utf-8";
/* CSS Document */

body{
	margin: 0;
	min-width: 980px;
	padding: 0;
}

p{
	margin: 0 0 20px 0;	
}

p, ul{
	font-family: 'Rokkitt', serif;
	font-size:1.6em;
	font-weight:200;
	font-style:normal;
}

img{
	border: 0;
}




h1 {
	font-family:"TrendSansOne";
	font-size-adjust:0.40;
	font-weight:700;
	color:#747e3b;
	margin:0;
	font-size: 4em;
	font-style:normal;
}

h2{
	font-family:"Beau Sans Pro Book", Verdana, sans-serif;
	font-size-adjust:0.531;
	font-weight:500;
	font-style:normal;
}

#loader{
	text-align:center;
	width:100%;
	height:100%;
	position:fixed;
	background-color:#f5f5f5;
	z-index:100;
}

#loader img{
	width:5%;
	margin-top: 50px;
	margin:0px auto;
}

h5{
	margin-top: 20%;
	font-size: 2em;
	color:#747e3b;
	font-family: 'TrendSansOne';
}

#header h1, #pixels{
	color: #48941A;
}

.float-left{
	float: left;	
	margin: 0 0 0 20px;
}

.float-right{
	float: right;
	margin: 0 20px 0 0;
}

.center{
	font-size: 2.5em;
	padding: 80px 0 0 0;
	text-align: center;
}
/*

#nav{
	list-style: none;
	position: fixed;
	right: 20px;
	z-index: 999;
}

#nav a{
margin-bottom: 100px;
}
*/


#header, #intro, #second{
	width: 100%;
}

#intro{
/* 	background:url(../img/moonzoom.jpg) 50% -75px no-repeat fixed; */
	background-color: #B0BF5A;
	color: white;
	height: 400px;
	margin: 0 auto;
}

#second{
	background-color: #f5f5f5;
	color: #E5DBA0;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;	
	padding: 0;
/* 	box-shadow: 3px 0px 50px black; */
}

/*
#second .bg{
	background: url(images/trainers.png) 50% 0 no-repeat fixed;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 900px;
	z-index: 200;
}
*/

#third{
/* 	background:url(../img/RoboSmoke.jpg) 100% -75px no-repeat fixed; */
	background-color:#B0BF5A;
	background-size: cover;
	color: white;
	height: 1030px;
	padding-top: 3%;
	
		
}



#coverletter{
	width:30%;
	float:left;
	margin-right: 3%;
	margin-left: 3%;
	margin-bottom: 4%;
	font-weight:600;


}

#spotlight {
	height:42%;
	overflow: hidden;
	float:left;
		margin-right: 2%;
		margin-left: 5%;
}

#box{
	width:30%;
	height:400px;
	float:left;
	margin-left: 2%;
	margin-top:3%;
	position: relative;
}

#graphs{
	width:100%;
	height:250px;
	position: absolute;
	visibility:hidden;
	margin-top: 10%;
}

#graphframes{
	width:100%;
	height:70%;
	position: absolute;


}

.graphframe{
	width:25px;
	position: absolute;
	height:100%;
	background-color:#869244;
	margin-right: 12%;
	float:left;
	z-index: 0;
	
}

.graphframe2{
	width:25px;
	position: absolute;
	height:100%;
	background-color:#869244;
	margin-right: 12%;
	left:25%;
	z-index: 0;
	
}

.graphframe3{
	width:25px;
	position: absolute;
	height:100%;
	background-color:#869244;
	margin-right: 12%;
	left:50%;
	z-index: 0;
	
}

.graphframe4{
	width:25px;
	position: absolute;
	height:100%;
	background-color:#869244;
	margin-right: 12%;
	left:75%;
	z-index: 0;
	
}

.graph{
	width:25px;
	position: absolute;
	height:210px;
	background-color:#F4F4F4;
	float:left;
	z-index: 0;
	bottom:8px;

}

.graph2{
	width:25px;
	position: absolute;
	left:25%;
	height:150px;
	float:left;
	background-color: #F4F4F4;
	z-index: 5;
	bottom:8px;
}

.graph3{
	width:25px;
	position: absolute;
	left:50%;
	height:220px;
	float:left;
	background-color: #F4F4F4;
	z-index: 5;
	bottom:8px;
}

.graph4{
	width:25px;
	position: absolute;
	left:75%;
	height:180px;
	float:left;
	background-color: #F4F4F4;
	z-index: 5;
	bottom:8px;
}

#graphnames{
left:-30px;
	bottom:-50px;
	height:40px;
	position:absolute;
	width:100%;
	font-size: .8em;
	color:#747e3b;
	
}

#graphnames h3{
	font-family: trendsansone;
	width:10%;
	position:relative;
	float:left;
}

#workexp{
	height:40%;
	width:32%;
	position: relative;
	float: right;
	margin-top:1%;
	margin-right: 2%;
}

#workexp h2{
	font-family: TrendSansOne;
	color:#272727;
	font-size: 1.2em;
	margin-top:5%;
	margin-bottom: 1%;
	}

#workexp h3{
	font-family: TrendSansOne;
	color:#747e3b;
	font-size: .9em;
	margin: 0 0 1% 0;
}

#workexp p{
	font-family: Rokkitt;
	font-size:1.3em;
}



#school{
	height:40%;
	width:25%;
	position: relative;
	float: left;
	margin-left: 5%;
	margin-top: 1.35%;
}

#school h2{
	font-family: TrendSansOne;
	color:#272727;
	font-size: 1.2em;
	margin-top:5%;
	margin-bottom: 1%;
	}

#school h3{
	font-family: TrendSansOne;
	color:#747e3b;
	font-size: .9em;
	margin: 0 0 1% 0;
}

#school p{
	font-family: Rokkitt;
	font-size:1.3em;
}


.resumeicon{
	margin:0 35%;
/* 	width:18%; */
	width:60px;
	
	
}



#footer{
	display: none;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: -100px;
    height: 100px;
    width: 100%;
    text-align: center;
	background-color: #F4F4F4;
	padding-top: 1.7%;
}

#footer h1{
	font-size:3em;
	margin-left:5%;
	width:40%;
	float:left;
	text-align:center;
}

#footer h4{
	font-family: trendsansone;
	font-size: .8em;
	color:#5B5B5B;

}

#social{
	width:4%;
	float:left;
margin-left:5%;
z-index:10;
}

#footer a{
	z-index: 11;
}

#footer a:hover{
	filter: grayscale(50%);
}

#sublineLeft {
	position:absolute;
	left: 7.5%;
	bottom:16%;
	float:left;
	margin:0;
}

#sublineRight {
	position:absolute;
	right: 7.5%;
	bottom:16%;
	float:left;
	margin:0;
}




.story{
	margin: 0 auto;
	min-width: 980px;
	overflow: auto;
	width: 980px;
}

.story .float-left, .story .float-right{
	padding: 100px 0 0 0;
	position: relative;
	width: 350px;	
}

.slide {
	width: 100%;
}

nav {
	width:11%;
	height:50px;
	color:black;
	font-size: 1.5em;
	list-style-type: none;
}

nav a {
	margin-bottom: 80px;
	height:100%;
	text-align: center;
	display:block;
	z-index: 3;
}

nav a p{
	display: none;
}

a:link, a:visited {color:#747e3b;text-decoration: none;}
a:hover, a:active {color:#f5f5f5;text-decoration: none;}

#icon{
	width:45%;
}



	
#title {
/* 	background-color:#1D3E47; */
	width:100%;
	height:100px;
	top:0px;
	padding-top: 2%;

}

#Genre {
	font-family: TrendSansOne;
	margin:0 auto;
	width:30%;
	color:#272727;
	margin-top: 1.5%;
	font-size: 4em;
	font-weight: 700;
	display: block;
	text-align: center;
}

#Genre h1 {
	font-family: TrendSansOne;
	width:100%;
	}

#Genre img {
	display:none;
}

#Genre p{
	font-family: TrendSansOne;
	font-size: 1em;

}


/*ISOTOPE STFF*/

.item { width: 323px;margin:1%; }
	.item img {
		width:100%;
	}

.item.w2 { width: 300px;margin:1%; }
	.item img {
		width:100%;
	}
	
	.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
 
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

.portfolioFilter{
	float:left;
	margin-top:80px;
}

#container {
/* background-color: #ff0000; */
	left:5%;
	position:relative;
    width: 90%;
    min-height: 750px;
    height:100%;
    margin: 0 auto;
    padding:1%;
}

/*
.secret {
opacity: 0;
}
*/

/* Scrollblock stuff */

.poop {
	font-size: 4em;
	color:red;
	width:150px;
	margin-right:30px;
/* 	left:-8%; */
}

.name {
	font-size: 3em;
	color:red;
	width:300px;
	margin-right:30px;
	margin-left: 2.7%;
/* 	left:-10%; */
}

.occ {
	margin-bottom: 2%;
	height:105px;
/* 	left:-10%; */
}

.scrollblock {
	width:100%;
}

.scrollblockblock{
	position:relative !important;
	top:0px !important;
	z-index: 10;
	height:50%;
}

.titleblock{
	height:600px;
	top:-100px;
	margin: 0 auto;
	text-align: center;
}

/* SHADOWBOX STUFF */

#container a{
	height:90%;
}

/* SCROLL TO */

#scrollnav{
	position:relative;
	bottom:10px;
	z-index:50;
	margin:0 auto;
	width:200px;
	height:50px;
	top: 335px;
	list-style: none;
	text-decoration: none;
}

#scrollnav a{
	text-decoration: none;
	margin-right: 8%;

}

#navicon{
	width:25%;
	margin-right: 1%;
}

/* Media Queries */

@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
    #container {
        width: 1000px;
    }
}
 
 
@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
    #container {
        width: 800px;
    }
    
    #spotlight{
	    margin-left:15%;
	    height:35%;
	    margin-bottom: 3%;
    }
    
    #coverletter{
	    width:35%;
    }
    
    #box{
	    margin-left: 15%;
	    width:45%;
    }
    
    #third{
	    height:1600px;
    }
    
   .response1{
	   margin-top: 45% !important;
   }
    
   #footer{
	   height:77px;
   }
    
   #footer h1{
	   font-size: 2.5em;
   } 
    
   #footer h4{
	   font-size: .6em;
   }
    
    }
 
@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
    #container {
        width: 600px;
        margin-left: 10%;

    }
}
 
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
    #container {
        width: 100% !important;
        margin:0;
		padding-left: 5%;
        left:0px;
        text-align: center;
    }
    #second{
	    width:100%;
    }
    
    nav{
	    display: none;
    }
    
    .item {
width:80%;    }
    
    
    
    
}
 
@media only screen and (max-width : 399px),
only screen and (max-device-width : 399px){
    #container {
        width: 200px;
		margin:0;
        text-align: center;
        left:0px;    
        }
      nav{
	    display: none;
    }
}