/*
Theme Name: 	The Hand That Feeds
Version: 		1.0
Author: 		Partner & Partners (Elliot Jay Stocks & Keir Whitaker)
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";

div,
article,
section,
header,
footer,
nav,
li { position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body { background:#fff;/* Don't forget to style your body to avoid user overrides */ }
::-moz-selection { background:#ff0; color:#333; }
::selection { background:rgba(246, 210, 162, 0.25); color:rgba(246, 210, 162, 0.95); }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea { -webkit-font-smoothing: antialiased; /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

body{
	background: url("images/grunge_wall_@2X.jpg") repeat;
	background-size: 500px 375px;
}

div#page-wrap {
	background: url("images/white_wall_hash_@2X.png") repeat;
	background-size: 380px 380px;
	padding-top: 35px;
}

div.container-fluid{
	max-width: 1170px;
	padding-left: 30px;
	padding-right: 30px;
}

div.hostScreening .col-sm-12{
	padding-left: 0px;
}

div.hostScreening .col-sm-6{
	padding-left: 0px;
}


h1, 
h2, 
h3, 
h4, 
h5, 
h6 	{ font-weight: normal; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }


.center {
	text-align: center;
}

.top-space {
	margin-top: 40px;
}

div#page-top {padding-top: 4%;}

div#trailer {
z-index: 9999;
position: absolute;
top: 0;
width: 100%;
display: none;
padding: 54px 2%;
opacity: 0;
}

#background-trailer {
	top: -185px;
opacity: 0.85;
z-index: 0;

}

div#header-content {
	max-width: 460px;
position: absolute;
top: 260px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 70px;
text-align: center;
z-index: 999;
}

div.outreach p{
padding-bottom: 10px;
}



.trailer-toggle-open {

z-index: 999;
font-size: 12px;
text-align: center;
width: 100px;
height: 100px;
padding-top: 90px;
text-transform: lowercase;
font-family: "bell-centennial-std-bold-lis", verdana, sans-serif;
background: url("images/watch-trailer-btn.png") 48.5% 0 no-repeat;
background-size: 80px 80px;
opacity: 0.75;

}

.trailer-toggle-open:hover {
opacity: 0.99;
text-decoration: underline;

}

.trailer-toggle-close {
	z-index: 99999;
	text-indent: -9999px;
position: absolute;
right: 11.5%;
top: 12%;
width: 44px;
height: 44px;
background: url("images/watch-trailer-close.png") 48.5% 0 no-repeat;
background-size: 40px 40px;
}



p.body-text {
	/*
font-family: "bell-centennial-std-address", verdana, sans-serif;
	font-size: 18px;
*/
line-height: 1.3;
}

p a {
	text-decoration: underline;
}

div.col-sm-7 iframe{padding: 3px 3px 4px 3px;
border: 1px solid rgb(246, 210, 162) !important;}

blockquote {
padding: 11px 22px;
margin: 0 0 22px;
font-size: 18px !important;
font-family: 'Pantograph', Verdana, sans-serif;
border-left: 0px solid rgb(246, 210, 162) !important;
}

a.press-quote-link:hover {
	text-decoration: none;
}

p.press-credits {
	margin: 0px;
	padding: 0px;
}

p.press-credits a:hover {
	text-decoration: none;
}

.small-text {
	font-family: "bell-centennial-std-address", verdana, sans-serif;
	font-size: 12px;
	line-height: 1.3;
}


a {
	-webkit-transition: color ease 0.3s, opacity ease 0.3s;
	-moz-transition: color ease 0.3s, opacity ease 0.3s;
	-o-transition: color ease 0.3s, opacity ease 0.3s;
	transition: color ease 0.3s, opacity ease 0.3s;
}

#trailer {
	-webkit-transition: color ease 0.3s, opacity ease 0.3s;
	-moz-transition: color ease 0.3s, opacity ease 0.3s;
	-o-transition: color ease 0.3s, opacity ease 0.3s;
	transition: color ease 0.3s, opacity ease 0.3s;
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dppx) { 
		a {
			-webkit-transform: translate3d(0,0,0);
		    transform: translate3d(0,0,0);
		}
		
		
		img {
			-webkit-transition: opacity ease 0.5s;
			-moz-transition: opacity ease 0.5s;
			-o-transition: opacity ease 0.5s;
			transition: opacity ease 0.5s;
			 -webkit-transform: translate3d(0,0,0);
		        transform: translate3d(0,0,0);
		}

}

.subnav ul.nav .current-menu-item a {
color: rgba(246, 210, 162, 1);
}

.subnav .nav .menu-item a {
color: rgba(246, 210, 162, 0.55);
}

.navbar ul.navbar-right a {
		font-family: "bell-centennial-std-bold-lis", verdana, sans-serif;
		text-transform: lowercase;
		font-size: 13px;
		
}

.nav li {
display: inline;
padding: 0 10px;
}

.nav li a{
padding: 10px 10px !important;
}

.nav li:first {
padding: 0 20px 0 0;
}

.nav li:last {
padding: 0 0 0 20px;
}

.nav a {
text-decoration:none;

}

.navbar-right li, .navbar-left li, .navbar-right li a, .navbar-left li a{
	padding:0;
	font-size: 12px;
	font-family: "bell-centennial-std-bold-lis", verdana, sans-serif;
}

 .nav .navbar-left > li > a {
position: relative;
display: block;
padding: 0px 0px;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
	text-align: center;
}

@media (min-width: 768px) {
	ul.navbar-nav  {
		font-family: 'Pantograph', Verdana, sans-serif;
		float: none;
		margin: 0 auto;
		text-align: center;
		display: inline-block;
		text-transform: uppercase;
		font-size: 20px;
		margin-left: -18px;
	}
}

.navbarWithBg {
	background-color: rgba(215, 50, 26, 0.98);
	-webkit-transition: background-color ease 0.25s;
	-moz-transition: background-color ease 0.25s;
	-o-transition: background-color ease 0.25s;
	transition: background-color ease 0.25s;
}



h1.main-logotype {

	text-align: center;
	font-size: 85px;
	line-height: 70px;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern";
	-webkit-font-feature-settings: "kern";
	-moz-font-feature-settings: "kern";
	-moz-font-feature-settings: "kern=1";	
	
}

h1.main-logotype sup {font-size: 50px;}

h1.sub-logotype {
	margin-top: -8%;
	margin-left: -5%;
	text-align: center;
	font-size: 75px;
	line-height: 60px;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern";
	-webkit-font-feature-settings: "kern";
	-moz-font-feature-settings: "kern";
	-moz-font-feature-settings: "kern=1";	
	
}

h1.sub-logotype a {
	opacity: 0.2;
	text-decoration: none;
}

h1.sub-logotype a:hover {
	opacity: 0.35;
}

.main-logotype a:hover {
	text-decoration: none;
}

div.left-laurels {
text-align: center;
position: absolute;
width: 32%;
height: 165px;
padding: 10px 0;
left: 15px;
}

div.right-laurels {
	text-align: center;
position: absolute;
width: 32%;
height:165px;
padding: 10px 0;
right: 15px;
	
}

@media (max-width: 768px) {
	div.right-laurels {
		display: none;
		}
		
		div.left-laurels {
		display: none;
		}
	
}

.background-trailer-img {
	height: 435px;
}

@media (max-width: 1170px) {

.background-trailer-img {
	height: 435px;
}

}

@media (max-width: 980px) {
	h1.main-logotype {
		font-size:70px;
	line-height: 58px;
	}
	
	h1.main-logotype sup { font-size: 40px; }
	
	.nav li { padding: 0 5px; font-size: 18px;}
	
	#background-trailer { top: -165px; }
	
	.background-trailer-img {
	height: 315px;
}

h1.sub-logotype sup { font-size: 32px; }
h1.sub-logotype {font-size: 54px;
	line-height: 44px; margin-top: -17%;}
	
	
}


@media (max-width: 480px) {
	h1.main-logotype { }
	
	h1.main-logotype sup { font-size: 40px; }
	
	div#header-content { display: none; }
	div#background-trailer {display:none;}
}



img.left-laurels {
	
	width: 33%;
	height: auto;
	padding: 5px 5px 0 0;
	opacity: 0.65;

}

img.right-laurels{
	
	width: 33%;
	height: auto;
	padding: 5px 5px 0 0;
	opacity: 0.65;

}

img.right-laurels a {
	position: relative;
}

img.right-laurels:hover, img.left-laurels:hover {
	opacity: 0.9;
}

img.social-icon {
	height: 18px;
	width: auto;
	opacity:0.45;
}

img.social-icon-footer {
	height: 25px;
	width: auto;
	opacity:0.45;
}

img.social-icon:hover {
	opacity:1;
}

img.social-icon-footer:hover {
	opacity:1;
}


span.smaller-the {
	font-size: 50px;
}

h2.intro-below-the-film {
	font-family: "bell-centennial-std-address", verdana, sans-serif;
	font-size: 26px;
	margin: 50px 0 40px 0;
	line-height: 34px;
}

.highlight-section {
	background-color: rgb(205, 42,6);
	padding: 40px 0;
	margin: 60px 0;
}

h4.section-header {
	font-family: "bell-centennial-std-bold-lis", verdana, sans-serif;
	font-size: 16px;
	text-transform: lowercase;
}

h3.mailing-list-subhead {
	font-family: "bell-centennial-std-address", verdana, sans-serif;
	font-size: 24px;
	line-height: 1.3;
}

.section-separator {
	text-align: center;
	margin: 100px 0 0 0;
}

.excerpt{
	padding: 0px 0 10px 0;
	font-size: 16px;
	line-height: 1.3;
	font-family: "bell-centennial-std-address", verdana, sans-serif;
}



/* VIMEO EMBEDDED STYLING */

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } 

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

/* Media page STYLING */


.royalSlider .rsGCaption {
font-size: 16px;
line-height: 18px;
padding: 12px 0 16px;
background: transparent;
color: #FFF;
width: 100%;
position: static;
float: left;
left: auto;
bottom: auto;
text-align: center;
}


#footer {
	padding: 50px 0;
	margin-top: 100px;
	background: rgb(27,27,74);
	
}

h5.footer-header {
	font-family: "bell-centennial-std-bold-lis", verdana, sans-serif;
	color: rgb(235,62,36);
	font-size: 14px;
	text-transform: lowercase;
	
}

ul.footer-nav li a {
	
	color: rgb(77,77,124);
	font-size: 21px;
	line-height: 1.8;
	
}

ul.footer-nav li a:hover, .footer-bottom-text a:hover{
	text-decoration: none;	
	color: rgba(255,255,255,0.8);	
}

.footer-bottom-text, .footer-bottom-text a {
	font-family: "bell-centennial-std-address", verdana, sans-serif;
	color: rgb(77,77,124);
	font-size: 12px;
	line-height: 1.3;
}



/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* 400 and up */
@media screen and (min-width:400px) {

					{ /* Place your styles here for all widths greater than 400px */ }

}

/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {

					{ /* Place your styles here for all 'Retina' screens */ }

}