/*
Theme Name: L4Designs based on HTML5 Boilerplate
Original Theme URI: http://github.com/zencoder/html5-boilerplate-for-wordpress
Description: Based on the <a href="http://html5boilerplate.com">HTML5 Boilerplate</a> and Bruce Lawson's <a href="http://html5doctor.com/designing-a-blog-with-html5/">Designing a Blog with HTML5</a>. The sole purpose of this theme is to save developers the time it takes to apply the HTML5 Boilerplate to WordPress. See the README for instructions. The "HTML5 Boilerplate" name is used with permission from Paul Irish.
Version: 1.0
Author: Lawrence Altaffer
Author URI: http://L4designs.com/
*/

/*
HTML Boilerplate styles can be found in the html5-boilerplate/css directory.
*/
html,body{font-family: Georgia, serif;color: #263745;}

/* WordPress Required Styles */
.aligncenter{display:block;margin-left:auto;margin-right:auto}.alignleft{float:left}.alignright{float:right}.wp-caption{border:1px solid #ddd;text-align:center;background-color:#f3f3f3;padding-top:4px;margin:10px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}.wp-caption img{margin:0;padding:0;border:0 none}.wp-caption-dd{font-size:11px;line-height:17px;padding:0 4px 5px;margin:0}.sticky{background:#f7f7f7;padding:0 10px 10px}.sticky h2{padding-top:10px}


/* ==========================================================================
   Normalize Styles
   ========================================================================== */
/*   article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:0;text-decoration:none}a:active,a:hover{outline:0;text-decoration:none}a{color:#263745;text-decoration:none}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
*/
/* ==========================================================================
   1108_16_20.css
   ========================================================================== */

.main{margin: 7em auto 0;width: 1108px;overflow: hidden;}.g68, .g136, .g204, .g272, .g340, .g408, .g476, .g544, .g612, .g680, .g748, .g816, .g884, .g952, .g1020, .g1088 {display: inline;float: left;margin-left: 20px;}.g68{width:48px;}.g136{width:116px;}.g204{width:184px;}.g272{width:252px;}.g340{width:320px;}.g408{width:388px;}.g476{width:456px;}.g544{width:524px;}.g612{width:592px;}.g680{width:660px;}.g748{width:728px;}.g816{width:796px;}.g884{width:864px;}.g952{width:932px;}.g1020{width:1000px;}.g1088{width:1068px;}.ml68{margin-left:88px;}.ml136{margin-left:156px;}.ml204{margin-left:224px;}.ml272{margin-left:292px;}.ml340{margin-left:360px;}.ml408{margin-left:428px;}.ml476{margin-left:496px;}.ml544{margin-left:564px;}.ml612{margin-left:632px;}.ml680{margin-left:700px;}.ml748{margin-left:768px;}.ml816{margin-left:836px;}.ml884{margin-left:904px;}.ml952{margin-left:972px;}.ml1020{margin-left:1040px;}.ml1088{margin-left:1108px;}.inside{margin-left:0;}.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}.clearfix:after {clear: both;content:' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}.clearfix {display: inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ===============
    Fonts
   =============== */
@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'ArvilReg';
    src: url('fonts/arvil_sans-webfont.eot');
    src: url('fonts/arvil_sans-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/arvil_sans-webfont.woff') format('woff'),
         url('fonts/arvil_sans-webfont.ttf') format('truetype'),
         url('fonts/arvil_sans-webfont.svg#ArvilRegular') format('svg');

}
/* ===== Reusable Objects Styles ========================================================
 //////////////////////////////////////////////////////////////////////////////
   ========================================================================== */
.container{
	overflow:hidden;
}
.inner{
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	max-width: 69.25em;
	width: 100%;
}
.sorryMessage{font-family: 'Georgia',serif;font-style: italic;text-align: center;margin: 6em;}
/* ===== Global Styles ========================================================
 //////////////////////////////////////////////////////////////////////////////
   ========================================================================== */
.stickyNav{
	position: fixed;
	z-index: 1000; /*Level 10*/
	height: 98px;
	width: 100%;
	overflow:hidden;
	background: #fff;
	top: 0;
}
.fullWidth{
	width: 100%;
}
.date{
	font-size: 0.875em;
	font-weight: bold;
	font-style: italic;
	margin: 0;
}
.workTitle{
	font-size: 1.25em;
}
.client{
	font-size: 1em;
	font-style: italic;
}
.role {
	font-size: 0.875em;
	font-style: italic;
}
.blogPostTitle{
	font-size: 1.5em;
}
 .pageTitle{
 	font-family: "ArvilReg";
	font-size: 2.2em;
	font-weight: normal;
	text-align: center;
	margin: 0 0 1em 0;
 }
 .post{width: 75%;margin: 0 auto;}

/* ===== Global Header Styles ========================================================
 //////////////////////////////////////////////////////////////////////////////
   ========================================================================== */
.stickyNav header{
	position:relative;
	overflow:hidden;
	margin: 57px auto 0;
	height: 40px;
	border-bottom: 1px solid #263745;
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	-o-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
}

.stickyNav .siteTitle{
	position: absolute;
	top:0;
	left:0;
	margin: 0;
	padding: 7px 18px 9px 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight:normal;
	font-family: "ArvilReg";
	font-size: 1.5em;
}
.stickyNav header .siteTitle, nav a{
	color: #263745;
}
.stickyNav nav{
	overflow:hidden;
	margin: 0 auto;
	width: 447px;
}
.stickyNav nav ul{margin:0;padding:0;}
.stickyNav nav a{
	float:left;
	padding: 9px 17px;
	text-decoration: none;
	font: italic  bold 20px Georgia, serif;
	cursor: pointer;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
}
.stickyNav nav a:hover,.stickyNav  nav .active{
	background-color: #263745;
	color: #fff;
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	-o-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
}
.stickyNav header img{
	position: absolute;
	top:10px;
	right:0;
}

/* ===== Home Page Styles ========================================================
 //////////////////////////////////////////////////////////////////////////////
   ========================================================================== */
.textPic{
	/*background: url('img/bg-farm.jpg') #fff no-repeat center 358px fixed;
	background-size: 100% auto;*/
	height: 51.6875em;
	overflow: hidden;
}
.textPic p{
	position: fixed;
	top: 25%;
	margin-top: 0;
	width: 100%;
	color: #263745;
	text-transform: uppercase;
	font-size: 6.25em;
	font-family: "ArvilReg";
	text-align: center;
}
.newest{
	background-color: #fff;
	overflow: hidden;
	width: 1108px;
	margin: 0 auto;
}
.latestTitle{
	font-size: 1.3125em;
	font-style: italic;
	font-weight: bold;
	margin-top: 1.5625em;
}
.blogPostTitle{
	margin-bottom: 0;
}
.newest .type-blog, .newest .type-work, .newest .type-fun{
	margin-bottom: 3.125em;	
}
.latestTitle, .newest .workTitle, .newest .client, .newest .role, .newest .blogPostTitle, .newest .type-blog .date, .newest .type-fun .date{
	text-align: center;
}
.workTitle, .blogPostTitle{
	font-style: italic;
	font-weight: bold;
}
.type-work .workTitle{
	margin-top: 0.9375em;
	margin-bottom: 0;
}
.type-work .client,.type-work .role{
	margin: 0.125em 0;
}
.type-work .client span, .type-work .role span{
	font-weight: bold;
}
.type-blog .date, .type-fun .date{
	margin-bottom: 0.625em;
}
.newest .type-work img{
	width: 100%;
	height: auto;
	border: 1px solid #ccc;
}
/* ===== About Page Styles ========================================================
 //////////////////////////////////////////////////////////////////////////////
   ========================================================================== */
.about-me p{
	line-height: 1.6em;
}
.about-me article a{
	padding: 6px 10px;
	color: #263745;
	text-decoration: none;
	font: italic  bold 1em Georgia, serif;
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-ms-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}
.about-me article a:hover{
	background-color: #263745;
	color: #fff;
}

/* ===== Work Page Styles ========================================================
 //////////////////////////////////////////////////////////////////////////////
   ========================================================================== */
.gridArchive{
	overflow: hidden;
}
.grid{
	margin: 0;
	padding: 0;
	overflow: hidden;

}
.grid li{
	display:block;
	float: left;
	overflow: hidden;
	width: 250px;
	height: 152px;
	padding: 25px 13px;
	background-color: #fff;
	list-style:none;
}
.grid li:nth-child(4n+4){
	margin-right: 0; 
}
.workThumb img{
	width: 100%;
	height: auto;
}
.flipContainer{
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
	position: relative;
}
.flipper{
	position: absolute;
	width: 250px;
	height: 152px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
  	transform-style: preserve-3d;

  	-webkit-transition: -webkit-transform .2s ease-out;  
  	-moz-transition: -moz-transform .2s ease-out;
  	-ms-transition: -ms-transform .2s ease-out;
  	-o-transition: -o-transform .2s ease-out;
  	transition: transform .2s ease-out;

  	-webkit-transform: rotateX(0deg) translateZ(-75px);
  	-moz-transform: rotateX(0deg) translateZ(-75px);
  	-ms-transform: rotateX(0deg) translateZ(-75px);
  	-o-transform: rotateX(0deg) translateZ(-75px);
	transform: rotateX(0deg) translateZ(-75px);
}
.flipper:hover{
	-webkit-transform-style: preserve-3d;
  	-moz-transform-style: preserve-3d;
 	transform-style: preserve-3d;
  	-webkit-transition: -webkit-transform .5s ease-out;
  	-moz-transition: -moz-transform .5s ease-out;
  	-ms-transition: -ms-transform .5s ease-out;
  	-o-transition: -o-transform .5s ease-out;
  	transition: transform .5s ease-out;

	-webkit-transform: rotateX(90deg) translateY(-75px);
	-moz-transform: rotateX(90deg) translateY(-75px);
	-ms-transform: rotateX(90deg) translateY(-75px);
	-o-transform: rotateX(90deg) translateY(-75px);
	transform: rotateX(90deg) translateY(-75px);
}
.flip-front, .flip-back{
	display: block;
	position: absolute;
	width: 248px;
	height: 150px;
	border: 1px #eee solid;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
}
.flip-front{
	-webkit-transform: rotateX(0deg) translateZ(75px);
	-moz-transform: rotateX(0deg) translateZ(75px);
	-ms-transform: rotateX(0deg) translateZ(75px);
	-o-transform: rotateX(0deg) translateZ(75px);
	transform: rotateX(0deg) translateZ(75px);
}
.flip-back{
	display: block;
	margin:0 auto;
	text-align: center;
	-webkit-transform: rotateX(-90deg) translateZ(75px);
	-moz-transform: rotateX(-90deg) translateZ(75px);
	-ms-transform: rotateX(-90deg) translateZ(75px);
	-o-transform: rotateX(-90deg) translateZ(75px);
	transform: rotateX(-90deg) translateZ(75px);
	background: #ddd;
	-webkit-transition: background .5s ease-out;
	   -moz-transition: background .5s ease-out;
	    -ms-transition: background .5s ease-out;
	     -o-transition: background .5s ease-out;
	        transition: background .5s ease-out;
}
.flipper:hover .flip-back{
	background: #fff;
	-webkit-transition: background .3s ease-out;
	   -moz-transition: background .3s ease-out;
	    -ms-transition: background .3s ease-out;
	     -o-transition: background .3s ease-out;
	        transition: background .3s ease-out;
}
.flipWorkInfo{
	margin-top: 4em; /*70px desktop*/
}


/* ===== Single Post Styles
 //////////////////////////////////////////////////////////////////////////////
   ========================================================================== */
.single-post{
	margin-bottom: 1.25em;
}
.workExample{
	float: left;
	width: 44em;
}
.workExample p{
	margin: 0;
}
.workExample img, .workExample iframe{
	margin-bottom: 3em;
	border: 1px solid #ccc;
}
.workDetail-Text{
	float: right;
	width: 24.5em;
}
.workDetail-Text p{
	margin-top: 0;
	margin-bottom: 0.5em;
}
.workDetail-Title{
	font-style: italic;
	margin-top: 0;
}
.workDetail-Client span, .workDetail-Role span{
	font-style: italic;
	font-weight: bold;
}


/* ===== Contact Page Styles ========================================================
 //////////////////////////////////////////////////////////////////////////////
   ========================================================================== */
/*#contact-me{
	z-index: 0;
	display: block;
	width: 100%;
	height: 750px;
	background: #fff;
	-webkit-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
	transition: opacity 0.2s ease-out;
}
#contact-me article{
	position: absolute;
	top: 150px;
	left: 50%;
	margin: 0 0 0 -250px;
	width: 500px;	
}
#contact-me.hide{
	z-index: -100;
	opacity: 0;
}*/

/* ===== Main Footer Styles ========================================================
 //////////////////////////////////////////////////////////////////////////////
   ========================================================================== */
footer{
	font: italic normal normal 1em Georgia, serif;
	text-align: center;
	border-top: 1px solid #263745;
	margin: 2em auto 0;
	width: 80%;

}
@media only screen and (min-width: 480px) {

/* ===============
    Maximal Width
   =============== */

    .textPic{
		height: 51.6875em;
		overflow: hidden;
	}
}
@media only screen and (min-width: 481px) {

/* ===============
    Maximal Width
   =============== */

    .textPic{
		background: url('img/bg-farm.jpg') #fff no-repeat center 358px fixed;
		background-size: 100% auto;
		height: 51.6875em;
		overflow: hidden;
	}
}