/* Syntheticpawn.css - 2012 */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/


/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/* CSS Reset																		   */
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }


/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/* Fonts. Sssshhhhh....																   */
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/



/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 5, 2013 */



@font-face {
    font-family: 'berthold_akzidenz_grotesk_lignt_cn';
    src: url('fonts/akzidenzgroteskbe-lightcn-webfont.eot');
    src: url('fonts/akzidenzgroteskbe-lightcn-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akzidenzgroteskbe-lightcn-webfont.woff') format('woff'),
         url('fonts/akzidenzgroteskbe-lightcn-webfont.ttf') format('truetype'),
         url('fonts/akzidenzgroteskbe-lightcn-webfont.svg#berthold_akzidenz_grotesk_bRg') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'berthold_akzidenz_grotesk_bMd_cn';
    src: url('fonts/akzidenzgroteskbe-mdcn-webfont.eot');
    src: url('fonts/akzidenzgroteskbe-mdcn-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akzidenzgroteskbe-mdcn-webfont.woff') format('woff'),
         url('fonts/akzidenzgroteskbe-mdcn-webfont.ttf') format('truetype'),
         url('fonts/akzidenzgroteskbe-mdcn-webfont.svg#berthold_akzidenz_grotesk_bMd') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'berthold_akzidenz_grotesk_bMd';
    src: url('fonts/akzidenzgroteskbe-md-webfont.eot');
    src: url('fonts/akzidenzgroteskbe-md-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akzidenzgroteskbe-md-webfont.woff') format('woff'),
         url('fonts/akzidenzgroteskbe-md-webfont.ttf') format('truetype'),
         url('fonts/akzidenzgroteskbe-md-webfont.svg#berthold_akzidenz_grotesk_bMd') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'berthold_akzidenz_grotesk_bRg';
    src: url('fonts/akzidenzgroteskbe-regular-webfont.eot');
    src: url('fonts/akzidenzgroteskbe-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akzidenzgroteskbe-regular-webfont.woff') format('woff'),
         url('fonts/akzidenzgroteskbe-regular-webfont.ttf') format('truetype'),
         url('fonts/akzidenzgroteskbe-regular-webfont.svg#berthold_akzidenz_grotesk_bRg') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'berthold_akzidenz_grotesk_light';
    src: url('fonts/akzidenzgroteskbe-light-webfont.eot');
    src: url('fonts/akzidenzgroteskbe-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akzidenzgroteskbe-light-webfont.woff') format('woff'),
         url('fonts/akzidenzgroteskbe-light-webfont.ttf') format('truetype'),
         url('fonts/akzidenzgroteskbe-light-webfont.svg#berthold_akzidenz_grotesk_bRg') format('svg');
    font-weight: normal;
    font-style: normal;

}



/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/* Layout																			   */
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/

html, body{
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-font-smoothing: antialiased;


}

body{
	background-color:#efefef;
	
}	

.megacontainer{
	width:100%;
	margin:0;
	padding:0;
	position: relative;
	float: left;
}	

.specifics{
	/*position:absolute;
	top: 242px;*/
	position:relative;
	margin-top:20px;
	height:490px;
}

/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/* Font Declarations																   */
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
h1, h2, h3, h4{
	font-family:'berthold_akzidenz_grotesk_bMd_cn', 'helvetica', arial, sans-serif;
	letter-spacing:0px;
}

p{
	font-family:'berthold_akzidenz_grotesk_bRg', Arial, Helvetica, Sans-serif;
	letter-spacing:.05em;
	}



/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/* HRs																				   */
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/

hr{
	position:relative;
	}

hr.thick_white{
	height:8px;
	background:#fff;
	border:0;
	margin:10px 0;
}

.header hr.thick_white{
	margin-bottom:40px;
}

hr.thick_black{
	height:8px;
	background:#000;
	margin:0;
	border:0;

}

hr.thin_black{
	height:1px;
	background:#000;
	margin:10px 0;
	border:0;
}


.footer hr{
	margin: 40px 0 10px;
}

.subjects hr{
	margin: 10px 0px;
	padding: 0 10px;
}
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/* projects*/
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
.pabst, .rev_calc, .practicevitals, .beamsite, .mini_usa, .clickcook, .tiara, .about{
	display:none;
}
	
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/* PAGE FUN																			   */
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/


.header{
	margin:0;
	background-color:#01010f;
	/*height:195px;
	padding-bottom:25px;*/
	height:222px;
}

.header h1{
	color:#fff;
	text-transform:uppercase;
	margin: 51px 0 19px;
	font-size:105px;
	/*font-weight:700;*/
}



h3{
	font-size:28px;
	line-height:34px;
}

p{
	font-size:14px;
	line-height:19px;
	margin:10px 0;
}


p.date{
	margin:15px 0;
	/*font-weight:700;*/
	font-family: 'berthold_akzidenz_grotesk_bMd_cn',arial, helvetica, sans-serif;
	font-size:18px;
}
.project{
	padding:10px;
	background-color:#fff;
	margin:10px 10px 10px;
	min-height: 310px;
	cursor:pointer;
}

.project h3{
	margin-bottom:-10px;
}	

.subjects{
	padding:10px 0px;
	z-index:4;
	background:#f4f4f4;
	position:relative;
	border-top:#000 dotted 1px;
}

.subjects img{
	/*padding:10px;*/
	height:140px;
	width:280px;
	margin-bottom:10px;
}


.imaged img{
	max-width:100%;
}
.subjects h3, .subjects p{
	/*padding: 0 10px;*/
	color:#000;
}	

.project:hover h3{
	color:#2f382e;
	text-decoration:underline;
}

.project:active{
	margin-top:12px;
	margin-bottom:8px;
}

.footer{
	margin:0;
	background-color:#555;
	min-height:200px;

}

.flexslider{
	position:relative;
	margin:0;
	background:none;
	border:none;
	min-height:400px;
}

.entry .container{
	padding:0 10px;
}

.diagnols{
	/*margin:0 10px;*/
	height:400px;
	width:100%;
	background:url("../_img/diagnols.gif") top left repeat;
}

.instruction p{
	height: 47px;
	color:#fff;
	background-color:#000;
	text-align:center;
	line-height:47px;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
}

.info_overlay{
	background-color:rgba(255, 255, 255, 0.6);
	padding:10px;

}

.footer p{
/*	margin: 0 0 0 10px;*/
	color:#fff;
}

.footer a{
	width:300px;
	height:47px;
	color:#fff;
	text-decoration:none;
	line-height;47px;
	}
.footer a:hover{
	border-bottom:1px dotted #2f382e;
	color:#2f382e;
	margin-top:-1px;
}

.launch_site{
	width:100%;
	height: 47px;
	color:#fff;
	background-color:#000;
	text-align:center;
	line-height:47px;
	font-size:14px;
	font-family:'berthold_akzidenz_grotesk_bRg', Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	cursor:pointer;
	margin:50px 0 0;
	font-weight:bold;
}

.launch_site:hover{
	background-color:#2f382e;
}

.launch_site:active{
	margin:52px 0 -2px;
}

.disable{
	background:#000 url("../_img/disable_brown.gif")top left repeat;
}

/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/
/* animation 																		   */
/***************************************************************************************/
/***************************************************************************************/
/***************************************************************************************/

.flicker{
	-webkit-animation-name: shudder;
	 -webkit-animation-duration: 1s;
	 }
.flicker_repeat{
	-webkit-animation-name: shudder;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count:infinite;
	}

@-webkit-keyframes shudder{
	0% {opacity:0;}
	20% {opacity:1;}
	22% {opacity:0;}
	24% {opacity:1;}	
	
	90% {opacity:1;}
	92% {opacity:.7;}
	93% {opacity:1;}
	98% {opacity:.5;}
	100% {opacity:1;}
	
}

@-webkit-keyframes infinite-spinning {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@media only screen and (max-width: 959px) and (min-width: 768px){
	.project{
		min-height:270px;
	}
	.project img{
		width:216px;
		height:112px;
	}
	
	.launch_site{
		font-size:12px;
	}
	
}


/*tablet*/

@media only screen and (min-width: 768px) and (max-width: 959px) {

	.imaged img{
		max-width:100%;
	}	
	
	.specifics{
		height:490px;
	}
}

/*phone*/

/*portrait*/

@media only screen and (max-width: 767px) {
	.header{
		height:160px;
	}
	.header h1{
		font-size:51px;
	}
	
	.project{
	margin:10px auto !important;
	}
	
	.specifics{
		height:auto;
		padding-bottom:20px;
	}
	
	.info_overlay{
		margin-top:20px!important;
	}
	
}
/*landscape*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.header{
		height:180px;
	}
	.header h1{
			font-size:73px;
		}
		
	 .project{
		width:300px!important;
		float:left!important;
		margin:10px 70px !important;
	}
}