/* _________________________________________
CONTENT:	The most kick ass portfolio site of all time
AUTHOR:		Chris McMahon
____________________________________________

TABLE OF CONTENTS:

1. html root
2. typograpy
3. content


========================================================== */

/* 2. HTML ROOT  ========================================= */
@import url('reset.css?v=2');
html, body { margin: 0; padding: 0; background: transparent;}
#main {margin: 0; padding: 0; width: 100%; height: auto;}


/* 3. TYPOGRAPHY  ======================================== */

body {
	*font-size: 1em; font-weight: 200; line-height: 1.5625em; text-align: justify;
	font-family: 'futura-pt', 'futurastd', 'Futura', 'Avenir', 'Century Gothic', 'Lato', 'HelveticaNeue', Helvetica, Arial, sans-serif; color: #2e3233;
	-webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility;
	/*background-color: #F6F0E2;*/
	background-color: white;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'futura-pt', 'futurastd ', 'Futura', 'Avenir', 'Century Gothic', 'Lato', 'HelveticaNeue', Helvetica, Arial, sans-serif; 
	color:#003732; 
	font-weight: 500; 
	text-align: left;
	font-size: 3.5em; 
	line-height: 3.5em; 
	margin: 0; 
	padding: 0;
	float: left;}

a {
	text-decoration: none;
	position: relative;
	font-weight: bold;
	color: #E5794A;
	/*text-transform: uppercase;
	
	opacity: 1;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-ms-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
	/*Greyscale application
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");  Firefox 10+, Firefox on Android 
    filter: gray; /* IE6-9 
   /* -webkit-filter: grayscale(100%);*/ /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

li{
	list-style: none;
	list-style-type: none;
}








/*  CONTENT  =============================================== */


/*  IMAGES  ================================================ */

/*All thumbnail sources defined here*/
	.hcom figure {background-image: url("../img/hcom_thumb.png");}
	.hcom-social figure {background-image: url("../img/hcom-social_thumb.png");}
	.hcom-silent figure {background-image: url("../img/hcom-silent_thumb.png");}
	.bby figure {background-image: url("../img/bby_thumb.png");}
	.snicksites figure {background-image: url("../img/snicksites_thumb.png");}
	.snicksnap figure {background-image: url("../img/snicksnap_thumb.png");}
	.mm figure {background-image: url("../img/mm_thumb.png");}
	.rrc figure {background-image: url("../img/rrc_thumb.png");}
	.misc figure {background-image: url("../img/misc_thumb.png");}



	.kiwi figure {background-image: url("../img/kiwi_thumb.png");}
	.liberty figure {background-image: url("../img/liberty_thumb.png");}
	.spam figure {background-image: url("../img/spam_thumb.png");}
	.laughtrack figure {background-image: url("../img/laughtrack_thumb.png");}
	.fotl figure {background-image: url("../img/fotl_thumb.png");}
	.clue figure {background-image: url("../img/clue_thumb.png");}
	.ferrero figure {background-image: url("../img/ferrero_thumb.png");}
	.reach figure {background-image: url("../img/reach_thumb.png");}
	.ricky figure {background-image: url("../img/ricky_thumb.png");}
	.afterwords figure {background-image: url("../img/afterwords_thumb.png");}
	.metal figure {background-image: url("../img/metal_thumb.png");}	
	


/*Sets up Contact icons*/
	.contact_buttons li.mail {
		float: left;
		background: url("../img/icon/mail.png") no-repeat left;
		background-size: 25px 25px;
		background-color: #0A3B34;
		border-radius: 3px;
	}
	.contact_buttons li.twitter {
		float: left;
		background: url("../img/icon/twitter.png") no-repeat left;
		background-size: 25px 25px;
		background-color: #0A3B34;
		border-radius: 3px;
	}
	.contact_buttons li.facebook {
		float: left;
		background: url("../img/icon/facebook.png") no-repeat left;
		background-size: 25px 25px;
		background-color: #0A3B34;
		border-radius: 3px;
	}
	.contact_buttons li.linkedin {
		float: left;
		background: url("../img/icon/linkedin.png") no-repeat left;
		background-size: 25px 25px;
		background-color: #0A3B34;
		border-radius: 3px;
	}

	.contact_buttons li.mail:hover {
		background-color: #E5794A;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
	}
	.contact_buttons li.twitter:hover {
		background-color: #E5794A;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
	}
	.contact_buttons li.facebook:hover {
		background-color: #E5794A;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
	}
	.contact_buttons li.linkedin:hover {
		background-color: #E5794A;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-ms-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
	}




/* 0px      ================================================ */
@media only screen and (min-width: 0px) {

	.page-wrap{
		float: center;
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		padding-top: 10px;
	}

	/*Setups up top area and navigation*/
	.header{
		float: left;
		margin: 20px 0 25px 0;
		width: 100%;
	}

	.identity{
	
		width: 290px;
		float: center;
		margin-left: auto;
		margin-right: auto;

		/*height: 220px;*/
	}

	.logo{
		background-image: url("../img/face.png");
		background-repeat: no-repeat;
		background-size: contain;
		width: 150px;
		height: 212px;
		float: center;
		margin-left:auto;
		margin-right:auto;
	}



	.nav{
		float: center;
		width: 190px;
		/*height: 100px;*/
		/*margin-bottom: 70px;*/
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0px;
		
	}
	.nav a{
		float: left;
		text-align: center;

		color: #003732;
		font-weight: 300; 
		font-size: 2.2em; 
		line-height: 1em;
		margin: 10px 40px;
	}
	
	/*Puts underline under current page*/
	.current{
		text-decoration: none; 
		color: #E5794A !important;
		padding-bottom: 4px;
		border-bottom: 2px solid #E5794A; 
		white-space: nowrap;
	}

	.first{
		margin-top: 130px;

	}
	.blog{
		margin-top: 0;
	}

	/*Makes text grey and adds underline*/
	.nav a:hover {
	/*	opacity: .4;*/
		color: #E5794A;
		padding-bottom: 4px;
		border-bottom: 2px solid #E5794A;
		white-space: nowrap;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		-ms-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
	}


	/*Controls for moving the logo between mobile and full layouts*/
	.mobile-logo{display: block;}
	.full-logo{display: none;}
	
	h3{
		font-size: 2.3em;
		line-height: 1.6em;
		border-bottom: 2px solid #E5794A;
		text-align: center;
		float: center;
		margin-left:auto;
		margin-right:auto;

	}
	h4{
		letter-spacing: 10px;
		font-weight: 300;
		font-size: 2.0em;
		line-height: 1.4em;
		text-align: center;
		float: center;
		margin-left:auto;
		margin-right:auto;
	}

	a h2 {
		float: left;
		width: 100%;
		/*border-top: 1px solid #222;*/
		font-size: 1.2em;
		font-weight: normal;
		color: #003732;
		padding: 0 0 10px 0;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 15px;
	}

	.allwork{
		float: left;
		width: 100%;
	}

	/*Base setup for each caption/image object*/
	.work{
		float: left;
		width: 100%;
	}

	.work:hover h2{
		color: #E5794A;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		-ms-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
	}

	.work figure {
		float: left;
		width: 86%;
		min-height: 250px;
		padding: 0;
		margin: 10px 7% 0px 7%;
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.display_area{
		float: left;
		width: 100%;
	}

	.display{
		float: center;
		margin-left: auto;
		margin-right: auto;
		/*border: solid;
		border-color: #000000;
		border-width: 2px;*/
		padding: 30px;
	}

	.display img{
		width: 100%;
	}

	/*Rules for just text thrown on pages*/
	.blocktext{
		float: center;
		color: #003732;
		margin-left: auto;
		margin-right: auto;
		/*margin-top: 20px;*/
		width: 50%;
	}
	.center{
		text-align: center;
		margin-bottom: 15px;
	}

	/*CSS for managing scalable video embeds */
	.video {
		position: relative;
		margin-top: 30px;
		margin-bottom: 30px;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
	}
	.video iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* Making the resume part size properly */
	.resume{
		background-image: url("../img/McMahon-Copywriter-Resume.png");
		max-width: 450px;
	}


	/* Tumblr type and layout configs */

	.tumblr_post{
		float: center;
		max-width: 200px;
		/*max-height: 2000px;*/
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 40px;

	}

	.tumblr_title{
		font-size: 1.7em;

	}

	.footer{
		float: left;
		width: 100%;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.footer .blocktext{
		float: center;
		width: 280px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-size: 1em;
		line-height: 1.75em;
	}

	.contact_buttons{
		width:200px;
		height: 45px;
		margin-left: auto;
		margin-right: auto;
		float: center;
	}
	.contact_buttons li{
		width: 25px;
		height: 25px;
		margin: 10px;
		float: left;
	}



}



/* 480px     ===========Tablet Vertical==================== */

@media only screen and (min-width: 480px) {
	.page-wrap{
		/*width:480px;*/
	}


	.work{
		width: 50%;
	}

	.tumblr_post{
		max-width: 300px;
	}


}


/* 800px     ===========Tablet Horizontal================== */

@media only screen and (min-width: 800px) {
	.page-wrap{
		/*width:800px;*/
	}

	.identity{
		float:center;
		margin-left: auto;
		margin-right: auto;
		width: 685px;
		height: 212px;
	}

	.nav{
		/*padding-top: 120px;*/
		height: 50px;
		/*width: 540px;*/
		width: 417px;
		float: center;
		margin-top: 30px;
		margin-bottom: 30px;
		margin-left: auto;
		margin-right: auto;
		
	}

	.nav a{
		margin: 15px 26px 0 26px;
		text-align: left;

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

	}

	h3, h4{
		font-size: 2.3em;
		line-height: 3.5em;
		border-bottom:0px;
		text-align: left;
		float: left;
		margin-left:0px;
		margin-right:0px;
	}

	/*Same controls, this time reversing to hide/show appropriately*/
	.mobile-logo{display: none;}
	.full-logo{display: block;}

	.work{
		float: left;
		width: 33.3333333333%;
	}

	.lastwork{
		margin-left: 33.3333333333%;
	}

	.display{
		width: 75%;
	}

	.footer .blocktext{
		width: 600px;
	}

	.tumblr_post{
		max-width: 600px;
	}


}


/* 1080px     ================================================ */
@media only screen and (min-width: 1080px) {


	h3, h4{
		font-size: 3em;
		line-height: 3em;
		border-bottom:0px;
	}

	.identity{
		width: 900px;
	}

	.nav{
		/*width: 790px;*/
		width: 603px;
	
	}
	.nav a{
		margin: 15px 57px 0 57px;
	}

	.logo{
		float: left;
		margin: 0 67px 0 67px;

	}

	
	.page-wrap{
		width: 1080px;
	}



}