/* CSS Document */

@font-face {
	font-family: 'Hermes-Regular';
	src: url('../fonts/Hermes-Reg.eot'); /* IE9 Compat Modes */
	src: url('../fonts/Hermes-Reg.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('../fonts/Hermes-Reg.woff') format('woff'), /* Modern Browsers */
	     url('../fonts/Hermes-Reg.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('../fonts/Hermes-Reg.svg#svgHermes-Reg') format('svg'); /* Legacy iOS */
	}
	
@font-face {
	font-family: 'Hermes-Bold';
	src: url('../fonts/hermes-webfont/hermes-bold-webfont.eot'); /* IE9 Compatibility Modes */
	src: url('../fonts/hermes-webfont/hermes-bold-webfont.eot?') format('eot'),  /* IE6-IE8 */
	url('../fonts/hermes-webfont/hermes-bold-webfont.woff') format('woff'), /* Modern Browsers */
	url('../fonts/hermes-webfont/hermes-bold-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('../fonts/hermes-webfont/hermes-bold-webfont.svg#svghermes-bold-webfont') format('svg'); /* Legacy iOS */
}

@font-face {
	font-family: 'Hermes-Light';
	src: url('../fonts/hermes-webfont/hermes-light-webfont.eot'); /* IE9 Compatibility Modes */
	src: url('../fonts/hermes-webfont/hermes-light-webfont.eot?') format('eot'),  /* IE6-IE8 */
	url('../fonts/hermes-webfont/hermes-light-webfont.woff') format('woff'), /* Modern Browsers */
	url('../fonts/hermes-webfont/hermes-light-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('../fonts/hermes-webfont/hermes-light-webfont.svg#svghermes-light-webfont') format('svg'); /* Legacy iOS */
}

html, body {font-family: "Hermes-Light", "Courier New", Courier, monospace; font-size:14px; line-height:1; text-align: left; padding: 0; margin: 0; margin-bottom:100px; text-height:auto; text-transform:none;}

.title {font-family: "Hermes-Bold", "Courier New", Courier, monospace; font-size:18px; letter-spacing:1px; margin:0; padding:0; border-bottom: 2px solid #222; margin-top:50px; padding-bottom:4px; display:inline-block; width:auto;}

.strong {font-family:"Hermes-Bold"; display:inline; clear:both;}
		
.recordings {font-family: "Hermes-Light", "Courier New", Courier, monospace; font-size:9px; letter-spacing:1px; margin:0; padding:0; border-bottom: 1px solid #222;}
.recordings a {padding-bottom:3px; border-bottom: 1px solid #333; }
.recordings p {padding-bottom:3px;}

.project a, .recordings a, .notes a, .screenings a {text-decoration:none; font-weight:normal;}

a {color:#000000; text-decoration:none;}
a:hover {text-decoration:none; color:#FF2427; }

.content {position:relative; width:auto; max-width:1600px; margin:auto; padding: 0 100px; display:block; min-width:600px;}
.content a {border-bottom:solid 1px black; padding-bottom:2px;}

.content-q p {line-height:2;}
.content-q a {font-family: "Hermes-Regular", "Courier New", Courier, monospace; text-decoration:none;}

.media {margin:25px 0 15px 0; position:relative;}
.media a {text-decoration:underline;}
.media img {width:100%; height:100%;}

.project {position:relative; width:auto; margin:75px 0 0; border-top:none; border-bottom:none;
			display:block;}
.project a {text-transform:lowercase;}
.project p {font-family: "Hermes-Bold", "Courier New", Courier, monospace; font-size:13px; text-transform:uppercase;
			border-bottom: solid 4px; line-height:2; width:auto; display:inline-block; margin-right:15px;
			-ms-transform: rotate(-7deg); /* IE 9 */
    		-webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
   			transform: rotate(-7deg);}

.recordings {position:relative; width:auto; margin:100px 20px 0; padding-bottom:40px; text-decoration:none; text-transform:none;
	-ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);}
.recordings p {font-family: "Hermes-Regular", "Courier New", Courier, monospace; font-size:12px;
}

.screenings {position:relative; width:950px; margin: 50px 0; padding:25px 0; border-top:dotted; border-bottom:dotted; border-width:0; text-align:left;}

.laurels {text-align:center; margin:25px 0 100px;}

.notes {position:relative; width:100%; min-width:600px; margin: 50px 0; text-align:left; padding:25px 0; border-bottom:none; border-top:dotted; border-width:thin; line-height:1.5;}

.data {position:relative; width:100%; min-width:600px; margin: 50px 0 0 0; text-align:left; padding:25px 0; border-bottom:dotted; border-top:dotted; border-width:thin; line-height:1.5;}

.credits {position:relative; width:100%; min-width:600px; margin: 50px 0 -50px 0; text-align:left; padding:25px 0; border-bottom:none; border-top:dotted; border-width:thin; line-height:1.5;}

.caption {position:relative; width:100%; min-width:600px; margin: -50px 0 50px 0; text-align:left; padding:25px 0; border-bottom:dotted; border-top:none; border-width:thin; line-height:1.5;}

.question {position: relative; text-align:right; font-size:12px; font-family:"Hermes-Bold", "Courier New", Courier, monospace; }
.question a {background:#FFC;}

.notecard {position:relative; width:auto; float:left; margin-top:45px;}

.addendum {font-family: Hermes-Bold, "Courier New", Courier, monospace; font-size:12px;}


img.bg {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;
	
	/* Set up proportionate scaling */
	width: 100%;
	height: auto;
	
	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
	img.bg {
		left: 50%;
		margin-left: -512px;   /* 50% */
	}
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
	z-index:99;
	
}

.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} 

.video-padding {max-width:100%; min-width:600px; margin:50px auto;}

/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

	
	.container p {
		
	}
	

/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

	body {
		
	}

}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}