@import url(http://fonts.googleapis.com/css?family=Special+Elite|Cutive+Mono);

/* ============================================================
  HTML & BODY
============================================================ */
html, body {
  height: 100%;
  width:100%;
  margin:0;
  padding:0;
  font-family:'Cutive Mono', Helvetica, Arial, sans-serif;
}

a {
  -webkit-transition: background .5s, color .5s ease-out;
  -moz-transition:
   background, color .5s .5s ease-out;
  transition: background .5s, color .5s ease-out;
}

/* ============================================================
 main sections
============================================================ */
#navigation {
  width:100%;
  padding:.5rem 0 0 0;
  position:fixed;
  _position:absolute;
  top:0;
  _top:expression(eval(document.body.scrollTop));
  z-index:50;
}

#navigation li {
  margin:0;
  padding:0;
  text-align:center;
}

#navigation li a {
  font-family: 'Special Elite';
  color:#fff;
  font-size: 1.25rem;
  line-height: 1.1rem;
  letter-spacing: 1px;
  text-shadow: -1px 0px #751315;
}

#navigation li a:hover {
  color:#fffbd1;
}

.icon-list {
  color:#fff;
}

#homepage {
  height: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color:#555; /***  only needed if you're not using a background image ****/
  margin:0;
  padding:2.5rem 0 0 0;
  text-align: center;
}

.pageslide {
   padding:5em 0 3em 0;
   min-height:600px;
}

.parallax {
  height: 600px;
  margin:0;
  padding:0;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.openingdates {
  width:100%;
  position:absolute;
  bottom:4rem;
  /*******/
  text-align:center;
  font-family: 'Special Elite';
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #FFF;
  text-shadow: -2px 1px 3px #751315;
}

h1 {
  margin: 0;
  padding: 0;
  font-family: 'Special Elite';
  font-size: 4rem;
  line-height: 4rem;
  color: #751315;
  text-shadow: -1px 0px #fffbd1;
  }

h2 {
  margin: 0;
  padding: 0;
  font-family: 'Special Elite';
  font-size: 3rem;
  line-height: 3rem;
  color: #e9e6e1;
  }

h6 {
  margin: .5rem 0 .5rem 0;
  padding: 0;
  font-family: 'Special Elite';
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #FFF;
  letter-spacing: 2px;
  text-shadow: -1px 0px #751315;
  }

h7 {
  margin: 0;
  padding: 0;
  font-family: 'Cutive Mono';
  font-size: 1rem;
  line-height: 1rem;
  color: #F3F3F3;
  text-shadow: 1px 1px #666;
  }




/**********************
MMW Adds
*********************/


.link {
  font-family: 'Cutive Mono', sans-serif;
  color: #000;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

#homepage p {
  font-family: 'Special Elite';
  color: #FFF;
  font: 1.5rem;
  line-height: 1.5rem;
  text-shadow: -1px 0px #751315;
}

#homepage p a {
  font-family: 'Special Elite';
  color: #751315;
  text-shadow: -1px 0px #fffbd1;
  font-size: 1.5rem;
  line-height: 2rem;
  border-bottom: 1px dotted #333;
  text-transform: uppercase;
}

#homepage p a:hover {
  border-bottom: 1px solid #751315;
}


.scrolltext p {
  font-family: 'Cutive Mono', sans-serif;
}

.scrolltext a {
  font-family: 'Cutive Mono', sans-serif;
  color: #000;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.scrolltext a:hover {
  border-bottom: 1px solid #e9e6e1;
}

.scrolltext li {
  font-family: 'Special Elite';
}

.scrollmodal p {
  color: #000;
  font-family: 'Cutive Mono', sans-serif;
}

.scrolltext-dark p {
  font-family: 'Cutive Mono', sans-serif;
  color: #e9e6e1;
}

.scrolltext-dark a {
  font-family: 'Cutive Mono', sans-serif;
  color: #e9e6e1;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.scrolltext-dark a:hover {
  border-bottom: 1px solid #e9e6e1;
}

.scrolltext-dark li {
  font-family: 'Special Elite';
  color: #e9e6e1;
}

img.content-header {
  max-width: 75%;
  margin-bottom: 1rem;
}

#gallery-box {
  padding: 1rem .5rem;
  background-color: rgba(117,19,21,0.2);
}

.photogallery img {
  padding: 1px;
  background: #751315;
}

.photogallery img:hover {
  padding: 1px;
  background: #fffbd1;
}

p.bolder {
  padding-left: 10px;
  border-left: 3px solid #fffbd1;
}

.actor-bio-image {
  max-height: 300px;
  margin: 0 1rem .5rem 0;
}

.small-text {font-size: 3rem; line-height: 0rem; margin: 0; padding: 0;}

.openingdates a {
  text-align:center;
  font-family: 'Special Elite';
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #FFF;
  text-shadow: -2px 1px 3px #751315;
  border-bottom: 1px dotted #FFF;
}

.openingdates a:hover {
  text-align:center;
  font-family: 'Special Elite';
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #FFF;
  text-shadow: -2px 1px 10px #751315;
  text-style: italic;
  border-bottom: 1px dotted #FFF;
}

.soundtrack {
  width:100%;
  position:absolute;
  bottom:4rem;
  /*******/
  padding:.25em;
  text-transform:uppercase;
  color: #FFF;
  text-shadow: -2px 1px 3px #751315;
}

a.soundtrack-button {
  color: #FFF;
  border-bottom: 1px dotted #FFF;
}

a.soundtrack-button:hover {
  border-bottom: 1px solid #FFF;
}

.cover-art {
  max-height: 150px;
  max-width: 125px;
}

.align-left {
  float: left;
  padding-right: 3rem;
}

.align-right {
  float: right;
}

.cta-box {
  text-align: center;
  margin: .2rem 0;
}

img.cta {
  max-width: 125px;
}

.clear {
  clear: both;
}

.align-low {
  margin-top: 10%;
}

.padded {
  padding: 1rem;
  background-color: #320f00;
  background: rgba(50,15,0,0.25);
  border-radius: 20px;
}

/*** Background images for homepage & interstitial pages ****/
/****************
For the following, do not edit the background size css. 
Change the path of the background image to change it, 
or just name your background images the same as what's already here.
The background image paths had to come before the background size css in order to work properly.
For best results, use a size of around 1920x1080. Ratio should be similar to 16:9, or standard TV ratio.
****************/

#homepage {
  background-image: url("../img/home.jpg");
  }

#pageslide1 {
  background-image: url("../img/bg-1.jpg");
  }

#parallax-1 {
  background-image: url("../img/bg-2.jpg");
  }

#pageslide2 {
  background-image: url("../img/bg-3.jpg");
  }

#pageslide3 {
  background-image: url("../img/bg-4.jpg");
  }

#parallax-2 {
  background-image: url("../img/bg-5.jpg");
  }

#pageslide4 {
  background-image: url("../img/bg-6.jpg");
  }

#parallax-3 {
  background-image: url("../img/bg-inter-2.jpg");
  }

#pageslide5 {
  background-image: url("../img/bg-social.jpg");
  }

#pageslide6 {
  background-image: url("../img/bg-gallery.jpg");
  }

#parallax-4 {
  background-image: url("../img/bg-parallax-4.jpg");
  }


/**********************
Accordion - everything in this section is editable
**********************/
.accordion dd > a {
  font-family:'be_marker_serif_sw', serif;
  font-size: 1.5rem;
  line-height: 1.5rem;
  padding: 0;
  margin: 0;
  color:#000;
  background: rgba(255,255,255,0.0);
}

.accordion dd > a:hover {
  background:rgba(255,255,255,0.0);
}

.accordion dd > a img.active {
  opacity: 1.0;
}

.accordion dd > a img:hover {
  opacity: 0.8;
}

.accordion dd > a img {
  opacity: 0.5;
}

.accordion dd.active > a {
  background:rgba(255,255,255,0.0);
}


.accordion dd > .content.active {
  color: #e9e6e1;
  font-family: 'Cutive Mono', sans-serif;
  background:rgba(0,0,0,0.2);
  overflow-y: scroll;
  max-height: 400px;
}

/**********************
footer
*********************/
.footer {
  width:100%;
   position:fixed;
  _position:absolute;
  bottom:0;
  _top:expression(eval(document.body.scrollBottom));
  /*******/
  padding:.25em;
  text-transform:uppercase;
}

.footer a{
  /*******/
  font-family: 'Cutive Mono';
  color: #fffbd1;
  text-shadow: 1px 1px 3px #4a5164;
  font-size:.8rem;
  line-height: .8rem;
}

.footer li {
  text-align:center;
  margin: 0;
  padding: 0;
}

.footer a.social {
  /*******/
  color: #fffbd1;
  text-shadow: 1px 1px 3px #4a5164;
  font-size:.8em;
}
.copyright {
  /*****/
  font-family: 'Cutive Mono', serif;
  font-size:.8em;
  color: #fffbd1;
  text-shadow: 1px 1px 3px #4a5164;
  text-align:center;
  text-transform:none;
  padding-top:1em;
}

/**********************
back to top button
*********************/
.back-to-top {
  position:fixed;
  _position:absolute;
  bottom:2rem;
  _top:expression(eval(document.body.scrollBottom));
  left: 50%;
  text-align: center;
  right: 0px;
  display: none;
  z-index: 200;
  padding:1em;
  /******/
  margin-left:-30px;
  width: 60px;
  height:50px;
  border-radius:3px 3px 0 0;
  -webkit-border-radius:3px 3px 0 0;
}

a .back-to-top {
  /******/
  color:#fffbd1;
}

/**********************
scrolling text box
*********************/

.scrolltext {
  /******/
  height:425px;
  padding:1rem;
  background:rgba(233,230,255,0.3);
}

.scrolltext-dark {
  /******/
  height:425px;
  padding:1rem;
  background:rgba(24,19,3,0.75);
}

.scrollmodal {
  /******/
  height:425px;
  overflow-y:scroll;
  background-color: #e9e6e1;
}
/**********************
Mobile Styles
*********************/

.mobileheader h1 {
  visibility: hidden;
  display: none;
}

/**********************
modal
**********************/
.reveal-modal {
  /******/
  color:#000;
  background-color: #e9e6e1;
}

.reveal-modal h1,.reveal-modal h2,.reveal-modal h3,.reveal-modal h4,.reveal-modal h5 {
  /******/
  color:#000;
}

#trailer.reveal-modal {
  background:none;
  border:none;
  box-shadow: none;

}

.reveal-modal-bg {
  background:rgba(0,0,0,0.9);
}
/**********************
Foundation overrides - DO NOT TOUCH
*********************/
.flex-video  {
  margin-bottom:0;
}

@media only screen and (max-width: 40em) {
  dialog, .reveal-modal {
    min-height:0;
  }
}


/**********************
IE8 Fix
*********************/
.ie8 {
  display:none;
}

/**********************
Slick Slider fix
*********************/
.slick-prev, .slick-next {
background: #ccc;
border-radius:100%;
-webkit-border-radius:100%;

}

.slick-slider {
  border:1px solid #ccc;
  padding:1em;
}


/**********************
Lightbox gallery 
*********************/
.photogallery img {
  border-radius:3px;
  -webkit-border-radius:3px;
}

.lb-outerContainer {
  background:rgba(255,255,255,0.4)
}


/**********************
Mobile-only styles - MMW Adds
*********************/

@media (max-width: 1000px) {

#homepage {
  padding:1rem 0 0 0;
}

.openingdates {
  bottom:5.5rem;
}

.cta-box {
  visibility: hidden;
  display: none;
}

}


@media (max-width: 850px) {

#homepage {
  padding:1rem 0 0 0;
  background-image: url("../img/bg-mobile-home.jpg");
  }

#parallax-1 {
   background-image: url("../img/bg-mobile-synopsis.jpg");
  }

#pageslide2 {
  background-image: url("../img/bg-mobile-cast.jpg");
  }

#pageslide3 {
  background-image: url("../img/bg-mobile-filmmakers.jpg");
  }

#parallax-2 {
  display: none;
  visibility: hidden;
  }

#pageslide4 {
  background-image: url("../img/bg-mobile-director.jpg");
  }

#parallax-3 {
  display: none;
  visibility: hidden;
  }

#pageslide6 {
  background-image: url("../img/bg-mobile-gallery.jpg");
  }

#parallax-4 {
  background-image: url("../img/bg-mobile-parallax.jpg");
  }

.scrolltext-dark p {
  font-family: 'Cutive Mono', sans-serif;
  color: #000;
}

.scrolltext-dark a {
  font-family: 'Cutive Mono', sans-serif;
  color: #000;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.scrolltext-dark a:hover {
  border-bottom: 1px solid #000;
}

.scrolltext-dark li {
  font-family: 'Special Elite';
  color: #000;
}

.scrolltext-dark {
  /******/
  height:425px;
  padding:1rem;
  background:rgba(233,230,255,0.3);
}

.title-large {
  font-size: 3.5rem;
  line-height: 3.5rem;
  }

.title-small {
  font-size: 2rem;
  line-height: 2rem;
  }

h2 {
  color: #000;
}

.openingdates {
  bottom:5.5rem;
}

.cta-box {
  visibility: hidden;
  display: none;
}

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {


#homepage {
  padding:1rem 0 0 0;
  background-image: url("../img/bg-mobile-home.jpg");
  }

#parallax-1 {
   background-image: url("../img/bg-mobile-synopsis.jpg");
  }

#pageslide2 {
  background-image: url("../img/bg-mobile-cast.jpg");
  }

#pageslide3 {
  background-image: url("../img/bg-mobile-filmmakers.jpg");
  }

#parallax-2 {
  display: none;
  visibility: hidden;
  }

#pageslide4 {
  background-image: url("../img/bg-mobile-director.jpg");
  }

#parallax-3 {
  display: none;
  visibility: hidden;
  }

#pageslide6 {
  background-image: url("../img/bg-mobile-gallery.jpg");
  }

#parallax-4 {
  background-image: url("../img/bg-mobile-parallax.jpg");
  }

.title-large {
  font-size: 3.5rem;
  line-height: 3.5rem;
  }

.title-small {
  font-size: 2rem;
  line-height: 2rem;
  }

h2 {
  color: #000;
}

.openingdates {
  bottom:5.5rem;
}

#homepage p {
  visibility: hidden;
  display: none;
  }

.scrolltext-dark p {
  font-family: 'Cutive Mono', sans-serif;
  color: #000;
}

.scrolltext-dark a {
  font-family: 'Cutive Mono', sans-serif;
  color: #000;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.scrolltext-dark a:hover {
  border-bottom: 1px solid #000;
}

.scrolltext-dark li {
  font-family: 'Special Elite';
  color: #000;
}

.scrolltext-dark {
  /******/
  height:425px;
  padding:1rem;
  background:rgba(233,230,255,0.3);
}

.cta-box {
  visibility: hidden;
  display: none;
}

}



@media (max-width: 550px) {


#homepage {
  padding:1rem 0 0 0;
  background-image: url("../img/bg-mobile-home.jpg");
  }

#parallax-1 {
   background-image: url("../img/bg-mobile-synopsis.jpg");
  }

#pageslide2 {
  background-image: url("../img/bg-mobile-cast.jpg");
  }

#pageslide3 {
  background-image: url("../img/bg-mobile-filmmakers.jpg");
  }

#parallax-2 {
  display: none;
  visibility: hidden;
  }

#pageslide4 {
  background-image: url("../img/bg-mobile-director.jpg");
  }

#parallax-3 {
  display: none;
  visibility: hidden;
  }

#pageslide6 {
  background-image: url("../img/bg-mobile-gallery.jpg");
  }

#parallax-4 {
  background-image: url("../img/bg-mobile-parallax.jpg");
  }


.title-large {
  font-size: 3.5rem;
  line-height: 3.5rem;
  }

.title-small {
  font-size: 2rem;
  line-height: 2rem;
  }


h1 {
  font-size: 2.75rem;
  line-height: 2.75rem;
  }

h2 {
  color: #000;
}

.openingdates {
  bottom:5.5rem;
}


#homepage p {
  visibility: hidden;
  display: none;
  }

.scrolltext-dark p {
  font-family: 'Cutive Mono', sans-serif;
  color: #000;
}


.scrolltext-dark a {
  font-family: 'Cutive Mono', sans-serif;
  color: #000;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.scrolltext-dark a:hover {
  border-bottom: 1px solid #000;
}

.scrolltext-dark li {
  font-family: 'Special Elite';
  color: #000;
}

.scrolltext-dark {
  /******/
  height:425px;
  padding:1rem;
  background:rgba(233,230,255,0.3);
}

.cta-box {
  visibility: hidden;
  display: none;
}

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {




h1 {
  font-size: 4rem;
  line-height: 3.5rem;
  }

h6  {
  color: #751315;
  text-shadow: none;
  font-size: 1rem;
  line-height: .8rem;
  }

#homepage {
  height: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin:0;
  padding:.5rem 0 0 0;
  background-image: none;
  background-color: #f2e9d4;
  text-align: center;
}

#parallax-1 {
   background-image: url("../img/bg-mobile-synopsis.jpg");
  }

#pageslide2 {
  background-image: url("../img/bg-mobile-cast.jpg");
  }

#pageslide3 {
  background-image: url("../img/bg-mobile-filmmakers.jpg");
  }

#pageslide4 {
  background-image: url("../img/bg-mobile-director.jpg");
  }

#parallax-3 {
  display: none;
  visibility: hidden;
  }

#pageslide6 {
  background-image: url("../img/bg-mobile-gallery.jpg");
  }

#parallax-4 {
  background-image: url("../img/bg-mobile-parallax.jpg");
  }

.title-large {
  font-size: 3.5rem;
  line-height: 3.5rem;
  }

.title-small {
  font-size: 2rem;
  line-height: 2rem;
  }

#homepage p {
  visibility: hidden;
  display: none;
  }

.scrolltext-dark p {
  font-family: 'Cutive Mono', sans-serif;
  color: #000;
}


.scrolltext-dark a {
  font-family: 'Cutive Mono', sans-serif;
  color: #000;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.scrolltext-dark a:hover {
  border-bottom: 1px solid #000;
}

.scrolltext-dark li {
  font-family: 'Special Elite';
  color: #000;
}

.scrolltext-dark {
  /******/
  height:425px;
  padding:1rem;
  background:rgba(233,230,255,0.3);
}

.openingdates {
  bottom:5.5rem;
  font-size: 1rem;
  line-height: .8rem;
  color: #333;
  font-family: 'Cutive Mono';
  text-shadow: none;

}

.openingdates a {
  font-size: 1rem;
  line-height: .8rem;
  color: #333;
  font-family: 'Cutive Mono';
  text-shadow: none;
}

#meta {
  visibility: hidden;
  display: none;
}
.cta-box {
  visibility: hidden;
  display: none;
}

}