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


/***************************************************
  		  HMMM, THAT RESPONSIVE NAVIGATION.
 ***************************************************/
@media all and (min-width: 960px) {
	nav ul {
	  text-align: right;
  }
  
  .button {
	  visibility: hidden;
  }
}

@media screen and (max-width: 48em) {
	.wrap ul.wrap-nav > li {
		width: 100%;
		padding: 10px 0;
		margin: 30px 0;
	}
		
	.wrap ul.wrap-nav {
		padding: 20px 0px 0px;
		margin-top: 100px;
	}
		
	nav ul li {
		opacity: 0;
		visibility: hidden;
	}
		
	.button {
		top: 0;
	}
	
	.logo {
		visibility: visible;
	}
}



/***************************************************
   HERE ARE SOME MEDIA QUERIES FOR THOSE PROJECTS.
 ***************************************************/
@media screen and (max-width: 48em) {
	.module h2 {
		font-size: 170%;
	}
	
	.module p {
		font-size: 95%;
	}
	  
	.herooverlay {
		height: 350px;
	}
	  
	.module.header h1 {
		margin-top: 70px;
		font-size: 200%;
		line-height: 150%;
	}
	  
	.module.header, .module.image {
		height: 350px;
		background-position: 0 0;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: 100%;
	}
	
	#heroimage1 {
		background-image: url("../assets/images/work/beach-house_hero_mobile.jpg");
	}
	
	#heroimage2 {
		background-image: url("../assets/images/work/thirdwall_hero_mobile.jpg");
	}
		
	#heroimage3 {
		background-image: url("../assets/images/work/my-month-on-tinder_hero_mobile.jpg");
	}
	
	#heroimage4 {
		background-image: url("../assets/images/work/thank-you-cards_hero_mobile.jpg");
	}
	
	#heroimage5 {
		background-image: url("../assets/images/work/open24-website_hero_mobile.jpg");
	}
	
	.copy {
		margin: 10%;
	}	
}

@media all and (min-width: 960px) {
	.module.header h1 {
	  font-size: 320%;
	}
}




/***************************************************
   			     THIS IS ABOUT ME.
 ***************************************************/
 @media screen and (max-width: 48em) {
	 .bio h2 {
		 font-size: 170%;
	 }
	 
	 .bio p {
		 font-size: 95%;
	 }
 }
 
 @media all and (min-width: 960px) {
	 .bio h2 {
		 font-size: 200%;
	 }
 }
 
 
 
/***************************************************
   			  GOTTA GET THOSE CONTACTS.
 ***************************************************/
 @media screen and (max-width: 48em) { 
	 .contactinfo h1 {
		 margin-top: 50px;
		 font-size: 170%;
		 line-height: 150%;
	 }
	 
	 #contacticons {
		 margin-top: 30px;
		 width: 15%;
	 }
 }
 
 @media all and (min-width: 960px) {
	 .contactinfo h1 {
		 font-size: 320%;
	 }
 }