html { font-size: 62.5%; height: 100%; width: 100%; } 

body {
	background: url(/i/beta_body_bg.png) #fff repeat left top;
	color: #333;
	font-size: 16px; font-size: 1.6rem; /* =15px */
	font-weight: 400;
height: 100%; width: 100%;	
}	

p {
	padding-bottom: 1em;
	line-height: 1.6;
}	

.sub-h3 {
	margin-top: -.75em;
	margin-bottom: 1em;
}

h2 { 
	color: #999;
	font-size: 34px; 
	font-size: 3.4rem;  /* =24px */
	padding: 0 0 1em 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
}	


h3 { 
	color: #333;
	font-size: 20px; 
	font-size: 2.0rem;  /* =24px */
	padding: 1.25em 0 .75em 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
}	

h4 { 
	color: #333;
	font-size: 16px; 
	font-size: 1.6rem;  /* =16px */
	padding: 0 0 .5em 0;
	font-weight: 400;
}	

a {
	color: #0a98b1;
	text-decoration: none;
}

a:hover, .color {
	color: #0a98b1;
}		

#container {
}	

header {
	height: 550px;
	background: url(/i/beta_header.jpg) #000 no-repeat bottom center;
	clear: both;
	position: relative;
}

header.video {
	background: url(/i/beta_header_03.jpg) #000 no-repeat bottom center;
}

#masthead {
	height: 80px;
	width: 1000px;
	margin: 0 auto;
}	

#masthead img {
	margin: 13px 0 0 1px;
}

#masthead span {
	display: inline-block;
	float: right;
	height: 80px;
	line-height: 80px;
	padding-right: 1px;
}	

#main-nav {
	width: 1000px;
	height: 55px;
	margin: 0 auto;
	background: url(/i/beta_nav_bg.png) #fff no-repeat center center;
}

#main-nav ul {
	padding-left: 9px;
}	

#main-nav ul li {
	list-style-type: none;
	float: left;
	display: inline-block;
}	

#main-nav ul li a {
	height: 37px;
	line-height: 37px;
	display: block;
	background-color: #fff;
	color: #000;
	margin: 9px;
	padding: 0 18px;
	text-transform: uppercase;
	font-size: 12px;
	font-size: 1.2rem; /* =12px */
	letter-spacing: 1px;
}

#main-nav ul li a.active {
	background-color: #000;
	color: #fff;
}

#header-video-wrapper {
	width: 1000px;
	height: 415px;
	margin: 0 auto;
/* 	display: none; */
}	

#header-video {
	position: relative;
	width: 738px;
	height: 415px;
	float: right;
	z-index: 101;
	
  -moz-box-shadow:    0 20px 0px -20px #ccc;
  -webkit-box-shadow:  0 20px 0px -20px #ccc;
  box-shadow:          0 20px 0px -20px #ccc;
}
	
.video-dimmer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  background-color: #000;
  display: none;
  opacity: .8; /* Will need to use a filter rule to make this work in IE */	
  
}
	
#main {
	width: 1000px;
	margin: 0 auto;
/* 	background-color: rgba(255,255,255,0.5); */
}	

#lead {
	padding: 17px 34px;
	margin-bottom: 17px;
	background-color: #0a98b1;
	color: #fff;
	-webkit-border-bottom-right-radius: 12px;
	-webkit-border-bottom-left-radius: 12px;
	-moz-border-radius-bottomright: 12px;
	-moz-border-radius-bottomleft: 12px;
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
}

#lead h1 {
	font-size: 3.1rem; font-size: 31px; 
	padding: .5em 0 1em 0;
	font-weight: 500;
}

#lead h2 {
	font-size: 20px; font-size: 2.0rem;
	line-height: 1.5;
	font-weight: 400;
	padding-bottom: .25em;
	color: #fff;
	text-transform: none;
}

#lead ul {
	font-size: 20px; font-size: 2.0rem;
	line-height: 1.5;
	font-weight: 400;
	padding-bottom: .25em;
	color: #fff;
	text-transform: none;

	list-style-type: none;
	list-style-image: url(/i/beta_li_spark-white.png);
	padding: 0 1em 0 2rem;
}

#lead li {
		list-style-type: none;
	list-style-image: url(/i/beta_li_spark-white.png);
}
	


#main ul {
	list-style-type: none;
	list-style-image: url(/i/beta_li_spark.png);
	padding-left: 2rem;
}
	
#main ul li {
	padding-bottom: 1.5rem;
}		
	
#about { }

.panel {
	padding: 0 102px 34px 34px;
	margin-bottom: 34px;
	border-bottom: 1px solid  #0a98b1;
	overflow: auto;
}	

.panel:last-of-type {
	border-bottom: none;
}

#founding-filmmakers {}

.projects {
	width: 940px;
	min-height: 600px;
	background-color: none;
}	

.project {
	width: 298px;
	min-height: 780px;
	margin: 0 20px 20px 0;
	background-color: none;
	float: left;
	border: 1px solid #ccc;
	position: relative;
	background-color: #fff;
}	

.project:nth-child(3n+3){
	background-color: none;
	margin-right: 0;
}	


.project .still {
	width: 298px;
	height: 200px;
	background-color: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
}

.project h3 {
	padding: 1rem;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	background-color: rgba(0,0,0,.75);
	color: #0a98b1;
	text-align: center;
}	

.project p {
	padding: 0;
}

.project .info {
	margin-top: 200px;
	padding: 1.5rem;
}	

p.logline {
	padding: 1rem 0;
	font-style: italic;
}

.web {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 70px;
	background-color: #eee;
	padding: 1.5rem;
}

.web p {
	font-size: 1.5rem;
}
	
.project ul {
	padding: 1rem;
}	

.project ul li {
	list-style-image: none;
	list-style-type: disc;
	padding: 0 0 .25rem 0 !important;
}	

#sign-me-up {}

.form-left {
	width: 46%;
	float: left;
}

.form-right {
	width: 46%;
	float: right;
}	

.form-center {
	width: 100%;
	margin-left: -8px;
}	

#faq a img { 
	margin: 0 10px 2em 0;
}	

.faq-end {
	padding: 34px 0;
	margin-top: 34px;
	border-top: 1px solid #ddd;
}	

#sign-me-up h2 {
	padding-bottom: 0;
}

#audiences {
	margin: 0 0 1em 0;
}	

#audiences p {
	margin-bottom: 0;
	padding-bottom: 0;
}	

/*
Back to top button 
*/
#back-top {
	position: fixed;
	bottom: -6px;
	right: 18px;
}

#back-top a {
	width: 52px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #ddd;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #999;
}

/* arrow icon (span tag) */
#back-top span {
	width: 52px;
	height: 52px;
	display: block;
	background: #000 url(/i/beta_up_arrow.png) no-repeat center center;
	background-size: 50%;

	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #ddd;
}

div.card-set {
	width: 940px;
	clear:both;
	margin-bottom: 1em;
/* 	border: 1px solid red; */
	overflow: auto;
}

div.card {
	width: 200px;
	float: left;
	margin-right: 46px;
}	

div.card img {
	margin-top: .5rem;
	border: 1px solid #666;
}	

div.card:last-of-type {
	margin-right: 0;
}

div.ff-wrapper {
	overflow: auto;
	clear: both;
	margin-bottom: .5em;
}

div.ff {
	float: left;
	width: 428px;
	padding: 0;
	overflow: auto;
}	

.ff h4 {
	font-weight: 500;
}	

div.ff ul {
	padding: 0 2em;
	margin-left: 1em;
}	

div.ff ul li {
}


@media screen and (max-device-width: 1024px) {
	html { font-size: 100% }
	header { height: 580px }
	#main-nav { background-image: none; height: auto; overflow: auto; }
	#main-nav ul li a { font-size: 1.5rem; padding: .5em 1em; }
	#lead h1 { font-size: 2.25rem; }
	.form-left, .form-right { width: 100%; }
	
	.project h3 { font-size: 1.25rem; }	
	
	.project p, .project li { font-size: 1.25rem; }	
	.project .web p { font-size: 1rem; }	
	.project {	min-height: 1100px; }

	
}

@media screen and (max-device-width: 480px) {
		#lead h1 { font-size: 3rem; }
		#lead h2 { font-size: 2rem; }
		#lead ul { font-size: 1.5rem; }
}




/* MailChimp Form Embed Code - Slim - 08/17/2011 */
#mc_embed_signup form {display:block; position:relative; text-align:left; padding:16px 0 10px 0}
#mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
#mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;}
#mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
#mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
#mc_embed_signup input:focus {border-color:#333;}
#mc_embed_signup .button { background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto; width: 120px !important;}
#mc_embed_signup .button:hover {background-color:#777;}
#mc_embed_signup .small-meta {font-size: 11px;}
#mc_embed_signup .nowrap {white-space:nowrap;}     
#mc_embed_signup .clear {clear:none; display:inline;}

#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup input.email {display:block; padding:8px 0; margin:0 4% 10px 0; text-indent:5px; width:58%; min-width:130px;}
#mc_embed_signup input.button {display:block; width:35%; margin:0 0 10px 0; min-width:90px;}

#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}

#mc_embed_signup { background-color: none !important; padding: 0; margin: 0; }


.fb-like-box {
	border-color: transparent;
	margin: 2em 0 6em 34px;
}	


/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
#cboxLoadedContent { cursor: move; }

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{}
    #cboxContent{margin-top:32px; overflow:visible;}
        .cboxIframe{background:#000;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000; padding:0px; border: 1px solid #555; margin-top: 8px}
        #cboxLoadingGraphic{background:url(/i/beta/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#fff;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(/i/beta/controls.png?v=2) no-repeat 0 0;}
        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose:hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}