/* STYLESHEET (MOBILE FIRST) */




html, body, h1, h2, h3, h4, h5, h6, p, a, blockquote, cite, ol, ul, li, fieldset, form, label, img, div, dl, dt, dd { margin:0; padding:0; border:0; font-weight:normal; -webkit-tap-highlight-color:rgba(0,0,0,0); }

html, input, select { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

body { font-family:'Libre Baskerville', serif; font-size:62.5%; letter-spacing:0.05em; background:#f7f7f7; color:#333; padding-top:63px; }




/* GENERIC
---------------------------------------------------------------------------------------------------------------*/
a { outline:none; text-decoration:none; }
ul { list-style:none; }
.clear { width:100%; float:left; clear:both; }
.hide { display:none; }
.wrap { width:90%; padding:0 5%; }




/* PRIMARY
---------------------------------------------------------------------------------------------------------------*/
#primary { height:50px; background:#fff; border-bottom:1px solid #eaeaea; position:fixed; top:0; left:0; z-index:400; }
	.ident { float:left; margin-top:20px; }
		.ident a { display:block; text-indent:-9999px; width:194px; height:12px; background-position:center -700px; }
		
	.menu { float:right; display:block; width:32px; height:22px; text-indent:-9999px; background-position:center 0; margin:14px 0 15px 0; cursor:pointer; }
		.menu:hover { background-position:center -30px; }
	.menu.active { background-position:center -400px; }
		.menu.active:hover { background-position:center -430px; }

#menu { display:none; background:#fff; padding:10px 0 10px 0; text-align:right; border-bottom:1px solid #c5c5c5; }
	#menu h3, #menu li, #menu p { font-size:1.3em; line-height:20px; font-weight:700; letter-spacing:0.15em; color:#000; text-transform:uppercase; float:right; clear:both; }
		#menu h3 { padding-top:5px; font-size:1.1em; }
		#menu li { padding-bottom:20px; }
		#menu p { font-weight:400; letter-spacing:0.05em; text-transform:none; }
			#menu p a { color:#999; float:right; clear:both; padding:5px 0 25px 0; }
			#menu p a:last-child { padding-top:0; }
	#menu li a { float:right; clear:both; color:#999; }
	#menu a:hover { color:#000; }




/* HOME
---------------------------------------------------------------------------------------------------------------*/
#home { padding-top:40px; }
	.intro { font-size:1.5em; line-height:25px; text-align:center; max-width:500px; margin:0 auto; }

.case { padding:55px 0; text-align:center; background:url(../images/divide-mobile.png) center bottom no-repeat; }
.sample.logos { text-align:center; }
	.case div { width:100%; max-width:310px; clear:both; margin:0 auto; }
	.case img { width:100%; max-width:500px; height:auto; clear:both; margin-bottom:40px; }
		.sample.logos img { max-width:300px; display:inline; }
	.case p { font-size:1.4em; line-height:24px; padding-top:30px; }
	.logo, #portfolio h1 { display:block; width:100%; text-indent:-9999px; margin:0 auto; }
		.hn { max-width:250px; height:19px; background-position:center -90px; }
		.matches { max-width:150px; height:17px; background-position:center -120px; }
		.porter { max-width:286px; height:17px; background-position:center -150px; }
		
	.but { display:inline-block; height:38px; font-size:1.4em; font-weight:700; text-transform:uppercase; color:#666; line-height:38px; padding:0 40px 0 20px; background-color:#fff; background-position:right -286px; border:1px solid #999; margin:0 auto; margin-top:30px; }
	.but:hover { background-position:right -324px; background-color:#333; color:#fff; }




/* CASE STUDIES
---------------------------------------------------------------------------------------------------------------*/
#portfolio { padding-top:30px; }
	#portfolio h1 { margin:0; }

.title p { color:#666; font-size:1.3em; line-height:30px; margin-top:25px; text-transform:uppercase; }
	.title a, .title span { display:inline-block; }
	.title a { color:#999; }
	.title a:hover { color:#666; }
	.title .active { color:#000; }

#portfolio .case { padding-top:30px; text-align:left; }
	#portfolio .case img { margin-bottom:0; }
	#portfolio .case div { padding-top:40px; text-align:left; max-width:none; margin:0; }
		#portfolio .case h2 { text-transform:uppercase; padding-bottom:25px; font-size:1.7em; line-height:1em; }
		#portfolio .case ul { list-style-position:outside; list-style-type:disc; margin-left:20px; }
			#portfolio .case li { font-size:1.3em; line-height:23px; padding-bottom:15px; }
			#portfolio .case li:last-child { padding-bottom:0; }

.sample { padding-top:60px; }
.sample.alt, .thumbs-hn { padding-bottom:25px; background:url(../images/divide-mobile.png) center bottom no-repeat; }
	.split-one, .split-two, .split-fifty-one, .split-fifty-two { max-width:500px; margin:0 auto; padding-bottom:30px; }
	.sample header { text-align:center; padding:0 0 30px 0; }
	.sample.alt header { padding:0 0 10px 0; }
		.sample h3 { font-size:1.3em; line-height:23px; padding-bottom:12px; text-transform:uppercase; }
			.sample.alt h3 { text-transform:none; }
		.sample h4 { font-size:1.2em; line-height:1em; color:#999; }
		.sample.alt img { width:100%; height:auto; }
			.split-one img, .split-two img, .split-fifty-one img, .split-fifty-two img { width:100%; height:auto; }
	.split-text { text-align:center; max-width:660px; margin:0 auto; font-size:1.6em; line-height:28px; padding-top:25px; padding-bottom:30px; clear:both; }

.thumbs .item { width:100%; max-width:600px; margin:0 auto; text-align:center; margin-bottom:30px; }
	.thumbs .item img { width:91.390728%; /*276/302*/ padding:3.9735099%; /*12/302*/ height:auto; border:1px solid #d8d8d8; background:#fff; margin-bottom:20px; }
	.thumbs .item h5 { font-size:1.6em; line-height:28px; text-transform:uppercase; padding-bottom:17px; border-bottom:1px solid #999; margin-bottom:20px; }
	.thumbs .item p, .thumbs .item li { font-size:1.3em; line-height:1em; }
		.thumbs .item li { line-height:28px; list-style-type:disc; list-style-position:inside; }

.thumbs .item a span { display:none; }

.thumbs-but { margin-bottom:60px; text-align:center; }
	.thumbs-but .but { margin-top:0; }




/* FOOTER
---------------------------------------------------------------------------------------------------------------*/
#footer { padding:55px 0; }
	#footer .wrap { padding-top:40px; background:url(../images/divide-mobile.png) center top no-repeat; }
		#footer p { font-size:1.2em; line-height:32px; text-align:center; color:#999; }
		#footer a { color:#666; }
		#footer a:hover { color:#000; }
		.top a { display:block; width:38px; height:38px; text-indent:-9999px; background-color:#fff; background-position:center -210px; border:1px solid #999; margin:0 auto; margin-top:30px; }
		.top a:hover { background-position:center -248px; background-color:#333; }





/* SPRITE
---------------------------------------------------------------------------------------------------------------*/
.menu, 
.logo, 
.top a, 
.ident a, 
.but, 
#portfolio h1, 
.mfp-close, 
.mfp-image-holder .mfp-close, 
.mfp-iframe-holder .mfp-close { 
	background-image:url(../images/sprite.png); background-size:465px 750px; background-repeat:no-repeat;
}




/* MEDIA QUERIES 
---------------------------------------------------------------------------------------------------------------*/


/* MOBILE > iPAD */
@media only screen and (min-width:640px) {
	
	#portfolio .case { text-align:center; }
		#portfolio .case div { max-width:310px; margin:0 auto; text-align:center; }
	#portfolio h1 { margin:0 auto; }
	.title p { margin:0 auto; margin-top:25px; text-align:center; }
	
}