@charset "UTF-8";



@media all and (min-width: 1280px) {
	#tester { background-color:#6F0; background-color:#0ff; }
	#main 				{ width:75%; }
	#main > header.fix, #main > footer  	{ width:75%; }
	
	html 	{ font-size:17px; }
	
	aside li p:first-child 	{ width: 15%; }
	aside li p:last-child 	{ width: 85%; }
	
	section#news figure img { width:540px; }
	section#news figcaption { left:640px; width:440px; }
	
	section#about .videoWrap, section#about video { width:540px; height:312px; }
	section#about figcaption { left:640px; width:350px; }


	

}


@media all and (max-width: 1024px) {
	#tester { background-color:#660; }
	
	#main 	{ width:90%; }
	#main > header.fix, #main > footer  { width:90%; }
	html 	{ font-size:15px; }
	
	#main nav li 				{	width:105px; }
	#main nav li:first-child 	{ 	width:60px;	}
	
	#main section 	{ width:60%; }
	aside 			{ width:35%; margin-left:5%; }
	
	aside li p:first-child 	{ width: 15%; }
	aside li p:last-child 	{ width: 85%; }
	
	section#news figure img { width:420px; }
	section#news figcaption { left:500px; width:320px; }
	
	section#about .videoWrap, section#about video { width:420px; height:240px; }
	section#about video { width:420px; }
	section#about figcaption { left:500px; width:280px; }

}


@media all and (max-width: 830px) {
	#tester { background-color:#630;  }
	
	#main > header .lang { display:none; }
	html 				 { font-size:14px; }

	aside 					{ width:30%; margin-left:10%; }
	
	aside li p:first-child 	{ display:none; }
	aside li p:last-child 	{ width:100%; }
	
	section#text figure 	{ width:140px; height:156px; }
	section#text figure img { height:156px; }
	
	#main nav li 	{	width:85px; }
	#main > header 	{ 	padding-bottom:6px;  font:1.85rem/1.85rem "WSMedium"; }
	
	/* Sets images width to 100% and hides caption */
	section#news figure img { width:100%; }
	section#news figcaption { display:none; }
	section figure { padding-left:0; }
	
	section#about .videoWrap, section#about video { width:100%; }
	section#about figcaption { display:none; }

	
	section#film .runtime { display:none; }
	
	section#film h2 { font-size:1.5rem; letter-spacing:0.022rem; }
	/* Lightbox video */	
	#lightbox #canvas {
		width:640px;
		height:480px;
		margin-top:-256px;
		margin-left:-320px;
	}
	#canvas #overlay.play, #canvas #overlay.pause { background-image:url("../img/player_cover_640.png"); }
	
}

@media all and (max-width: 600px) {
	
	html 	{ font-size:13px; }
	#main 	{ width:90%; }
	#main > header.fix, #main > footer 	{ width:90%; }
	/* Switch to vertical nav */
	#main > header h1 	{ width:100%; text-align:center; margin-bottom:2rem; }
	#main nav 			{ width:100%;  }
	#main nav ul 		{ text-align: center; }
	#main nav li 		{ float:none; display:inline; padding:0 0.4rem; }	
	
	#main section 	{ width:100%; }
	aside 			{ width:100%; margin-left:0; margin-top:2rem; }
	aside li p:first-child 	{ display:block; width: 15%;   }
	aside li p:last-child 	{ width:85%; }
	aside h2 { color:#eaeff2; border-top:1px solid #bcbec0; padding-top:2rem; padding-bottom:1rem; }
	
	/* Reduce navigation type */
	#main nav li, aside h2 { font:1.4rem/1.750rem "WSMedium"; }
	
	/* Film rules */
	section#film h2 { font-size:1.4rem; letter-spacing:0.022rem; }
	#main > footer { display:none; }
	section#film .prefix { display:none; }
	section#film .shorten { display:none; }
	#fields p:first-child	{ margin-left:10%; }
	#film header 	{ width: 8.5%; }
	#film main 		{ width: 85%; }
	/* Lightbox video */	
	#lightbox #canvas {
		width:320px;
		height:256px;
		margin-top:-128px;
		margin-left:-160px;
	}
	#canvas #overlay.play, #canvas #overlay.pause { background-image:url("../img/player_cover_320.png"); }

}




@media all and (max-width: 400px) {
		
		#main nav li a 		{ border-bottom-width:1px; }	
		#main > header h1 	{ width:100%; text-align:center; margin-bottom:2rem; }
		section h2 			{ font:1.85rem/3rem "Messina Serif Regular"; }
		
		#main > header 	{ 	margin-bottom:3rem; }
		
		/* Film rules */
		section#film h2 { font-size:1.125rem; letter-spacing:0.022rem; }
		/* Take out footer (Year) and use the space left */
		#film main { width: 91.5%; }
		#film footer { display:none; }
		/* Take out field to order by */
		#fields { display:none; }
		#film li { padding:1.5rem 0;  }
		
		/* For the lightbox */
		#lightbox #canvas {
			width:240px;
			height:192px;
			margin-top:-96px;
			margin-left:-120px;
		}
		#canvas #overlay.play, #canvas #overlay.pause { background-image:url("../img/player_cover_240.png"); }
	
		/* About */
		section#about .overlay { display:none; }
		
		/* For the homepage */
		#home { display:none; }
	
}