@charset "UTF-8";
/* CSS Document */
/* CSS Reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,menu,time,mark,audio,video,a { 
	margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; position:relative; font-weight:normal;
} 
blockquote,q { quotes:none; 
}
blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; 
}
a,ins { text-decoration:none; 
}
del { text-decoration:line-through; 
}
table { border-collapse:collapse;border-spacing:0; 
}
li {list-style:none;
}
article,aside,figure,footer,header,hgroup,nav,section { display:block; 
}
/*-----------------------------------------------------------------------------*\
    							Typography
\*-----------------------------------------------------------------------------*/
@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('fonts/League_Gothic-webfont.eot');
    src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/League_Gothic-webfont.woff') format('woff'),
         url('fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'JournalRegular';
    src: url('fonts/journal-webfont.eot');
    src: url('fonts/journal-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/journal-webfont.woff') format('woff'),
         url('fonts/journal-webfont.ttf') format('truetype'),
         url('fonts/journal-webfont.svg#JournalRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body{
	font-family:Georgia, "Times New Roman", Times, serif;
}
h1{	
	color:white;
	font-family:'LeagueGothicRegular', Impact, sans-serif;
	font-size:60px;	
	padding-left:10px;
	text-align:left;
}
h2{
	font-family:'LeagueGothicRegular', Impact, sans-serif;
	font-size:40px;
	text-align:center;
}
h3{
	color:rgb(255, 204, 0);	
	font-family:'LeagueGothicRegular', Impact, sans-serif;
	font-size:36px;
}
h4{
	font-family:'LeagueGothicRegular', Impact, sans-serif;
	font-size:28px;
}
p{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
}
a{
	color:#FF8000;
}
a:hover{
	color:rgb(255, 204, 0);	
}
.script{
	font-family: "JournalRegular", script;
	font-size:28px;
}
@media screen and (min-width:600px){
h1{	
	font-size:80px;	
	padding-left:10px;
	text-align:left;
}
}

/*-----------------------------------------------------------------------------*\
    							General Layout
\*-----------------------------------------------------------------------------*/
body{
	background-image:url(images/dark_wall.png);
	color:white;
}
footer{	
	background: rgba(0,0,0,0.2); 
	font-size:32px;
	line-height:50px;
	margin:50px auto 0 auto;
	min-height:50px;
	text-align:center;
	width:100%;
}
footer h4{
	display:inline;
	margin:0 0 0 80px;
}
footer .byline{
	color:#aaa;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	float:right;
}
footer .byline a{
	color:#aaa;
}

.fade:hover{
	opacity:.7;
}
.clr{clear:both;}

#container{
	margin:30px auto;
	width:70%;
}


@media screen and (min-width: 800px) {

}

/*-----------------------------------------------------------------------------*\
    							Home Page
\*-----------------------------------------------------------------------------*/
.wrap{
	width:100%;
	margin:0 auto;
}
.big-square{
	width:310px;
	height:310px;
}
.big-rect{
	width:310px;
	height:620px;
}

.small{
	width:150px;
	height:150px;
}
.long{
	width:310px;
	height:150px;
}
.x-long{
	width:470px;
	height:150px;
}
.xx-long{
	max-width:630px;
	max-height:150px;
}

.big-tall{
	width:310px;
	height:470px;
}
.tall{
	width:150px;
	height:310px;
}
.item{
	margin:5px;
	text-align:center;
}

.trailer-button{
	background-image:url(images/FilmStrip2.png);
	clear:both;
	color:#000;
	height:75px;
	margin-top:22px;
	width:310px;
}
.trailer-button a{
	text-decoration:none;
}
.trailer-button a h2{
	color:rgb(255, 204, 0);	
	font-size:32px;
	padding:15px 0 0 0;	
	transition: all .25s ease-in;
	-moz-transition: all .25s ease-in; /* Firefox 4 */
	-webkit-transition: all .25s ease-in; /* Safari and Chrome */
	-o-transition: all .25s ease-in; /* Opera */ 
	-webkit-backface-visibility: hidden;	

}
.trailer-button:hover > a h2{
	color:#fff;
} 
.quote{	
	color:white;
	font-family:'LeagueGothicRegular', Impact, sans-serif;
	font-size:28px;	
	height:150px;
	padding:0 0 0 25px;
	text-align:left;
	-webkit-transition: all 0.5s ease;
	-moz-transition:    all 0.5s ease;
	-o-transition:      all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-backface-visibility:hidden;
}
.quote:hover{
	color:rgb(255, 204, 0);
}

#pam{
	color:white;
	font-size:26px;	
	padding:0 0 0 35px;
	text-align:left;
}
#wallace{
	float:right;
	margin:0 0 5px 5px;
	max-height:150px;
	max-width:150px;
}
#home-logo{
	max-height:320px;
}
.fig {   
	font-family:'LeagueGothicRegular', Impact, sans-serif;
	overflow: hidden; 
	position: relative; 
}

.fig-cap {  
	background:rgb(0,0,0); 
	background: rgba(0,0,0,0.7); 
    bottom: 4px; 
	color: rgb(255, 204, 0); 
	font-size:32px;
	padding: 10px 20px; 
	position: absolute; 
	opacity: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition:    all 0.5s ease;
	-o-transition:      all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-backface-visibility:hidden;
	visibility:hidden;
}

.small .fig-cap{
	font-size:36px;
	height:130px;
	padding:10px 5px;
	top:0;
    -webkit-transition: all 0.5s ease;
    -moz-transition:    all 0.5s ease;
    -o-transition:      all 0.5s ease;
    transition: all 0.5s ease;
  	width:140px;
}

.fig:hover .fig-cap {
	opacity: 1;
	visibility:visible;
}

@media screen and (min-width: 800px) {
.wrap{
	width:85%;
	margin:0 auto;
}
}

/*-----------------------------------------------------------------------------*\
    							The Film
\*-----------------------------------------------------------------------------*/
.teaser {
	position:relative;
	text-align:center;
}
.teaser:before {
	content: '';
  	display: inline-block;
  	height: 100%;
  	margin-right: -0.25em; 
	max-height:500px;
  	vertical-align: middle;
}
.teaser img{
	display:none;
}
.teaser-video{
	background-color:rgba(255, 204, 0,.5);
    max-height: 300px;
	margin:0 auto;
	padding:15px;
	text-align:center;
	max-width:400px;
	z-index:20;
}
.interview-video{
	background-color:rgba(255, 204, 0,.5);
    max-height: 300px;
	margin:0 auto;
	padding:15px;
	text-align:center;
	max-width:400px;
	width:100%;
}

.film p{
	font-size:18px;
	margin:0 0 15px 0;
	text-align:left;
}
.film .script{
	font-size:32px;
}
.film h2{
	color:rgb(255, 204, 0);
}
.film h3{
	padding:20px 0;	
}
.film h4{
	text-align:center;
}
.film h4 a{
	text-decoration:underline;
}
.left-col{
	width:100%;
	float:none;
}
.right-col{
	width:95%;
	margin:0 auto;
}
	
@media screen and (min-width: 700px) {
.teaser img{
	display:inline;
}
.teaser{
	margin: 0 20px 0 0;
}
.teaser-video{
	background-color:rgba(255, 204, 0,.5);
    height: 300px;
	left: 50%;
    margin-top: -165px; 
    margin-left: -215px;
	padding:15px;
	position: absolute;
    top: 50%;
    width: 400px;
}
.interview-video{
	background-color:rgba(255, 204, 0,.5);
    max-height: 300px;
	padding:15px;
	margin:0 auto;
	width:100%; max-width: 400px;
}
.interview h3{
	text-align:center;
}
.left-col{
	float:left;
	width:65%;
}
.right-col{
	width:auto;
}
}
/*-----------------------------------------------------------------------------*\
    							The Awards
\*-----------------------------------------------------------------------------*/
.honolulu a img{
	margin:0;
}
.vegas a img{
	margin:0 0 40px 0;
}
.awards-page{
	text-align:center;
}
.awards-row img{
	text-align:center;
	max-height:250px;
	max-width:250px;
	width:100%;
}
.award-small{
	margin:10px auto;
	text-align:center;
	width:100%; max-width:250px;
	max-height:250px;
}
hr{
	margin:50px 0 30px 0;
}
/*-----------------------------------------------------------------------------*\
    							Cast and Crew
\*-----------------------------------------------------------------------------*/
.crew h3{
	text-align:left;
}
.crew p{
	margin:0 0 25px 0;
}
.name{
	font-size:18px;
	padding:2px 0;
}
.names-list{
	text-align:left;
}
.photo-row img{
	max-height:200px;
	max-width:200px;
	width:100%;
}
.spacer{
	height:0px;
}
@media screen and (min-width: 600px) {
.spacer{
	min-height:33px;
}
}
/*-----------------------------------------------------------------------------*\
    							News and Events
\*-----------------------------------------------------------------------------*/
.news h3{
	margin:20px 0 0 0;
}
.news a{
	text-decoration:underline;
}
.news a:hover{
	text-decoration:none;
}
.rss-box a{
	color:rgb(255, 204, 0);
}
.rss-box img{
	text-align:center;
	width:auto;
}
.rss-item a{
	color:#FF8000;
}
.rss-item a:first-child{
	color:rgb(255, 204, 0);
	font-family:'LeagueGothicRegular', Impact, sans-serif;
	font-size:32px;	
	text-decoration:none;
}
.rss-item{
	margin-bottom:20px;
}
/*-----------------------------------------------------------------------------*\
    							The Road
\*-----------------------------------------------------------------------------*/
.road-item{
	margin:5px;
	max-height:200px;
}
.road-tall{
	min-height:410px;
	width:200px;
}

/*-----------------------------------------------------------------------------*\
    							Contact Us
\*-----------------------------------------------------------------------------*/
.contact a{
	text-decoration:underline;
}
.contact a:hover{
	text-decoration:none;
}
.contact h3{
	margin:0 0 20px 0;
}
.social-contact img{
	float:left;
	margin:0 10px 0 0;
	max-width:100px;
	max-height:100px;
}
.social-contact li{
	margin:30px 0 0 0;
}
.social-contact{
	font-size:20px;
}

/*------------------------------------------------------------------------*\
    Responsive Navigation Menu v4.0
	author: Omar Jesus Bravo
	@OmarJesusBravo, www.bravodms.com
\*-------------------------------------------------------------------------*/

#sideNav, #mainPage { /* adds sliding functionality of mobile menu */
	min-height:100%; height: auto !important; height:100%;
  -webkit-transition: all 0.3s ease-in-out; 
	 -moz-transition: all 0.3s ease-in-out; 
	   -o-transition: all 0.3s ease-in-out; 
		  transition: all 0.3s ease-in-out;
}

#mainPage {  /* page wrapper for main content */
	float:left;
	width:100%;
}
.mobile-menubar { /* menu button container */
	clear:both; 
	text-align:left;
	width:100%; 
} 
.menu-icon-img {max-width:45px; max-height:45px; margin:.25em}

	/* menu for mobile */
#sideNav {	
	background-color:#0CF;
	float:left;
	width:80%; max-width:80%;
}
	/* mainNav background-color = Dark Gray */
body, #sideNav, #sideNav a {background-color:#333;}
#sideNav a {
	border: solid 0 #666666; 
	border-width:0 0 1px 0;
	clear:both;
	color:rgb(255, 204, 0);
	display:block;
	font-size:36px;
	font-family: "JournalRegular", script;
	line-height:45px; /* height for menu items */
	padding:0 10%;
	text-align:left;
	width:80%;  
}
#sideNav a:hover {background-color:#666666;} /* sideNav hover styles :: light gray */
#sideNav .subMenu a {padding:0 10% 0 20%; width:70%;}

/* Open & Close sideNav */
.side-nav-closed {margin-left:-100%;} .main-page-open {margin-left:0%;}
.side-nav-open {margin-left:0%; width:80%;} .main-page-closed {margin-right:-100%;}

#mainNav {display:none; }




@media screen and (min-width: 600px) {
		/* Hides Mobile button, sideNav, & subMenu */
	#open-menu, #close-menu,.mobile-menubar, #sideNav {display:none;}
	.subMenu {height:0; overflow:hidden; position:relative; z-index:10}
	
		/* Display mainNav */
	#mainNav {display:block; height:60px; margin:0 auto; overflow:visible; width:100%; }
		/* mainNav background-color = transparent */
	#mainNav, #mainNav a {background-color:transparent;} 	
		/* mainNav button width  ::  100% / 6-buttons = 16.66666666667%*/
	#mainNav li {float:left; width:16.6666666667%; padding:15px 0 0 0;} 
	#mainNav #home{width:10%;}
	#mainNav #about-mgo{width:11%;}
	#mainNav #awards{width:10%;}
	#mainNav #about-jw{width:12%;}
	#mainNav #the-road{width:11%;}
	#mainNav #news{width:13%;}
	#mainNav #contact{width:13%;}
	#mainNav #social{width:20%; max-width:285px;}
	


		/* mainNav button styles */
	#mainNav a {
		clear:both;
		color:rgb(255, 204, 0);
		display:block;
		font-family: "JournalRegular", script;
		font-size:28px;
		line-height:26px; /* height for submenu items */
		padding:0 2%;
		text-align:center;
		text-decoration:none;
		-webkit-transition: all 0.3s ease-in-out; 
	    -moz-transition: all 0.3s ease-in-out; 
	    -o-transition: all 0.3s ease-in-out; 
		transition: all 0.3s ease-in-out;
		width:96%;  
	}
	#social a {

	clear:none;
	float:right;
	max-height:45px;
	padding:0px;
	width:25%; max-width:45px;
}

	
	#mainNav a:hover {color:#fff;} /* mainNav hover styles :: Orange */
	
		/* Display subMenu */
	#mainNav li:hover .subMenu {overflow:visible;} /* Make subMenu appear */
		/* background-color for subMenu :: Dark Gray */
	#mainNav .subMenu li {background-color:#333; float:none; width:100%;} 
	#mainNav .subMenu a:hover {background-color:#FC0;} /* Hover style for subMenu :: Yellow */
	
	
	/* Setting Active State for Menu Items */
	#home a,
	#about-mgo a,
	#about-jw a,
	#news a,
	#contact a {}
}

@media screen and (min-width: 900px)  {
	#mainNav a{font-size:35px;}
}
/*--------------------------------------------------------------------//
Masonry
//----------------------------------------------------------------------*/
.masonry,
.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.masonry .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}


/*--------------------------------------------------------------------//
	Social Media
//----------------------------------------------------------------------*/

#social{
	margin:0;
	max-height:45px;
}
#social a {

	clear:none;
	float:right;
	max-height:45px;
	padding:0px;
	width:25%; max-width:45px;
}
#social img{
max-height:45px;
max-width:45px;


}

/*  Font Awesome
    the iconic font designed for use with Twitter Bootstrap
    -------------------------------------------------------
    The full suite of pictographic icons, examples, and documentation
    can be found at: http://fortawesome.github.com/Font-Awesome/

    License
    -------------------------------------------------------
    The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
    http://creativecommons.org/licenses/by/3.0/ A mention of
    'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
    source code is considered acceptable attribution (most common on the web).
    If human readable source code is not available to the end user, a mention in
    an 'About' or 'Credits' screen is considered acceptable (most common in desktop
    or mobile software).

    Contact
    -------------------------------------------------------
    Email: dave@davegandy.com
    Twitter: http://twitter.com/fortaweso_me
    Work: http://lemonwi.se co-founder

    */
@font-face {
  font-family: "FontAwesome";
  src: url('fonts/fontawesome-webfont.eot');
  src: url('fonts/fontawesome-webfont.eot?#iefix') format('eot'), url('fonts/fontawesome-webfont.woff') format('woff'), url('fonts/fontawesome-webfont.ttf') format('truetype'), url('fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*  Font Awesome styles
    ------------------------------------------------------- */
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}
a [class^="icon-"], a [class*=" icon-"] {
  display: inline-block;
  text-decoration: inherit;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  vertical-align: top;
  font-size: 1.3333333333333333em;
}
.btn [class^="icon-"], .btn [class*=" icon-"] {
  /* keeps button heights with and without icons the same */

  line-height: .9em;
}
li [class^="icon-"], li [class*=" icon-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}
li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
  /* 1.5 increased font size for icon-large * 1.25 width */

  width: 1.875em;
}
li[class^="icon-"], li[class*=" icon-"] {
  margin-left: 0;
  list-style-type: none;
}
li[class^="icon-"]:before, li[class*=" icon-"]:before {
  text-indent: -2em;
  text-align: center;
}
li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before {
  text-indent: -1.3333333333333333em;
}
/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */

.icon-film:before                 { content: "\f008"; }

.icon-bar-chart:before            { content: "\f080"; }
.icon-twitter-sign:before         { content: "\f081"; }
.icon-facebook-sign:before        { content: "\f082"; }

.icon-linkedin-sign:before        { content: "\f08c"; }

.icon-twitter:before              { content: "\f099"; }
.icon-facebook:before             { content: "\f09a"; }



.icon-reorder:before              { content: "\f0c9"; }

.icon-pinterest:before            { content: "\f0d2"; }
.icon-pinterest-sign:before       { content: "\f0d3"; }
.icon-google-plus-sign:before     { content: "\f0d4"; }
.icon-google-plus:before          { content: "\f0d5"; }

.icon-envelope-alt:before         { content: "\f0e0"; }
.icon-linkedin:before             { content: "\f0e1"; }