@import url(https://fonts.googleapis.com/css?family=Arvo:400,700|PT+Sans:400,700);


/* ============================================================
  HTML & BODY
============================================================ */
html, body {
  height: 100%;
  width:100%;
  margin:0;
  padding:0;
  font-family: 'PT Sans', serif;
  background-color: #F4F4F4;
}

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: 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: 'Arvo', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #001A4D;
  text-transform: uppercase;
  border-bottom: 1px solid yellow;
}

#navigation li a:hover {
  color:#001A4D;
  border-bottom: 1px solid #001A4d;
}

.icon-list {
  color:#fff;
}

#homepage {
  height: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color:#555;
  margin:0;
  padding: 0;
}

.pageslide {
   height: 100%;
   min-height: 600px;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-color:#F4F4F4;
   margin:0;
   padding:5em 0 0 0;
}

.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: 'Arvo', serif;
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #001A4d;
  text-transform: uppercase;
}

.openingdates span {
  margin: 0;
  padding: 7px 7px;
  background-color: #FFFF00;
}

.openingdates a {
  color: #001A4d;
  text-transform: uppercase;
  border-bottom: 3px solid #001A4D;
}

.openingdates a:hover {
  border-bottom: 1px solid #001A4D;
  -moz-transition: all .1s ease-in;
  -webkit-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  transition: all .1s ease-in;
}

.falling-leaf {
  position: fixed;
  top: 3rem;
  right: .25rem;
  z-index: 1000;
}

.falling-leaf img {
  max-width: 75px;
}

/* ============================================================
LADY IN THE VAN
============================================================ */

#wrapper {
  width: 100%;
  text-align: right;
}

#wrapper-home-header {
  width: 100%;
  position: absolute;
  top: 2rem;
  text-align: center;
}

.wrapper-actor {
  width: 100%;
}

.wrapper-actor-left {
  float: left;
  color: #001a4d;
  font-family: 'Arvo', serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

.wrapper-actor-right {
  float: right;
  color: #001a4d;
  font-family: 'Arvo', serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

.wrapper-director {
  width: 100%;
  float: right;
  color: #999;
  font-family: 'Arvo', serif;
  font-size: 1rem;
  text-transform: uppercase;
}

.small-text {
  font-size: smaller;
}

.tagline {
  width:100%;
  position:absolute;
  bottom: 7rem;
  /*******/
  text-align:center;
  font-family: 'Arvo', serif;
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #CCC;
  text-transform: capitalize;
}

.bluray-digital {
  width:100%;
  position:absolute;
  bottom: 12rem;
  /*******/
  text-align:left;
}

.wrapper-bluray-digital {
  text-align:center;
  margin: 0;
  padding: 7px 7px;
  background-color: #FFFF00;
  border: 3px solid #001A4D;
  border-radius: 7px;
  max-width: 200px;
  min-width: 140px;
}

img.box-art {
  max-width: 125px;
  clear: both;
}

.wrapper-bluray-digital p {
  margin: .5rem 0;
  font-family: 'Arvo', serif;
  font-weight: 700;
  font-size: .8rem;
  line-height: .8rem;
  color: #001A4d;
  text-transform: uppercase;
}

img.cta {
  max-width: 100px;
  margin-bottom: .5rem;
}

h2 {
  font-family: 'Arvo', serif;
  font-size: 2.5rem;
  line-height: 2.5rem;
  color: #001a4d;
  text-transform: uppercase;
  font-weight: 700;
}

.photogallery img {
  padding: 5px 3px;
  background-color: yellow;
}

.photogallery img:hover {
  padding: 5px 3px;
  background-color: #001A4D;
  opacity: 0.9;
}

.spacer {
  clear: both;
}

.spacer-2 {
  clear: both;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

img.bio-image {
  max-width: 250px;
  padding: .5rem;
  background-color: yellow;
}

img.align-right {
  margin: 0 3px 5px 7px;
}

img.align-left {
  margin: 0 7px 5px 0;
}

.menu-btn .icomoon {
  color: #001A4d;
  font-size: 1.5rem;
}

/*** 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/bg-splash.jpg');
  }

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

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

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

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

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

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

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

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


/**********************
Accordion - everything in this section is editable
**********************/
.accordion dd > a {
  font-family:Helvetica, Arial, sans-serif;
  background:rgba(0,0,0,0.5);
  color:#fff;
}

.accordion dd > a:hover {
  background:rgba(0,0,0,1);
}

.accordion dd.active > a {
  background:rgba(0,0,0,0.8);
}
.accordion dd > .content.active {
  background:rgba(0,0,0,0.2);
}

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

.footer a{
  /*******/
  font-family: 'Arvo', serif;
  color: #999;
  font-size:.75em;
}

.footer a:hover {
  border-bottom: 1px solid #CCC;
}

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

.footer a.social {
  /*******/
  color: #999;
  font-size: .75rem;
}

.footer a.social:hover {
  border-bottom: none;
}

.copyright {
  /*****/
  font-size:.9em;
  color:#999;
  text-align:center;
  text-transform:none;
  padding-top: .5rem;
  opacity: 0.8;
}

/**********************
back to top button
*********************/
.back-to-top {
  position:fixed;
  _position:absolute;
  bottom:3rem;
  _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:#333;
}

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

.scrolltext {
  /******/
  height:425px;
  padding:1rem 1rem 0 0;
}

.scrolltext p {
  font-size: 1.2rem;
  line-height: 1.6rem;
}

.scrolltext ul {
  margin: 0 0 0 .1rem;
}

.scrolltext li  {
  font-family: 'PT Sans', serif;
  font-size: 1rem;
  line-height: 2.25rem;
  color: #333;
  font-weight: 400;
  text-align: left;
  margin: .2rem 0;
  text-transform: uppercase;
}

.character-title {
  padding: 4px 5px;
  background-color: yellow;
}

.scrolltext a  {
  font-family: 'Arvo', serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.2rem;
  color: #F4F4F4;
  padding: 4px 5px;
  background-color: #001a4d;
}

.scrolltext a:hover {
  color: #F4F4F4;
  background-color: yellow;
}

.scrolltext a:hover {
  color: #000;
}

.link {
  font-family: 'Arvo', serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.2rem;
  color: #F4F4F4;
  padding: 4px 5px;
  background-color: #001a4d;
}

.scrollmodal {
  /******/
  height:300px;
  overflow-y:scroll;
}

.scrollmodal::-webkit-scrollbar{width: 3px;}
.scrollmodal::-webkit-scrollbar-thumb{background-color:rgb(0,26,77); border-radius: 0;}
.scrollmodal::-webkit-scrollbar-thumb:hover{background-color:rgb(240,232,160);}
.scrollmodal::-webkit-scrollbar-track{background-color:rgb(244,244,244);}

/**********************
Mobile Styles
*********************/

.mobileheader h1 {
  color:#fff;
  font-size:1em;
  text-align:center;
}

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

.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);
}

.yellow-text {
  padding: 4px 5px;
  background-color: yellow;
  font-family: 'PT Sans', serif;
  color: #333;
  font-weight: 400;
  margin: .2rem 0;
  text-transform: uppercase;
}

.blue-text {
  padding: 4px 5px;
  background-color: #001a4d;
  font-family: 'PT Sans', serif;
  color: #F4F4F4;
  font-weight: 400;
  margin: .2rem 0;
  text-transform: uppercase;
}

.scrollmodal {
  margin-top: 2rem;
}

.scrollmodal  p {
  font-size: 1.2rem;
  line-height: 1.6rem;
}

/**********************
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 {
border-radius:100%;
-webkit-border-radius:100%;

}

.slick-slider {
  padding:1em;
  margin-top: 3rem;
}

.slidercontent {
  text-align: center;
}

.slick-slider .blue {
  font-family: 'Arvo', serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 2.4rem;
  color: #F4F4F4;
  margin: 0;
  text-transform: uppercase;
  padding: 4px 7px;
  background-color: #001a4d;
}

.slick-slider .yellow {
  padding: 4px 7px;
  font-family: 'PT Sans', serif;
  font-size: 1rem;
  line-height: 2.25rem;
  color: #333;
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
  background-color: yellow;
}

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

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

/**********************
MMW Adds - MOBILE ONLY
*********************/
@media (max-width: 995px) {

.openingdates {
  bottom: 5.5rem;
}

}

@media (max-width: 850px) {

.wrapper-actor-left {
  font-size: 1rem;
}

.wrapper-actor-right {
  font-size: 1rem;
}

.openingdates {
  bottom: 5.5rem;
}

}

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

.reveal-modal h2 {
  font-size: 1rem;
  line-height: 2rem;
}

}

@media (max-width: 650px) {

#pageslide1 {
  background-image: none;
  background-color: #F4F4F4;
  }

#pageslide2 {
  background-image: none;
  background-color: #F2F2F2;
  }

#pageslide3 {
  background-image: none;
  background-color: #F9F9F9;
  }

#pageslide4 {
  background-image: none;
  background-color: #F2F2F2;
  }

#inter-1 {
  visibility: hidden;
  display: none;
  }

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

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

.wrapper-actor-left {
  font-size: 1rem;
}

.wrapper-actor-right {
  font-size: 1rem;
}

.wrapper-director {
  width: 100%;
  float: right;
  color: #999;
  font-family: 'Arvo', serif;
  font-size: 1rem;
  text-transform: uppercase;
}

img.laurel {
  visibility: hidden;
  display: none;
}

.openingdates {
  font-size: 1.1rem;
  line-height: 1.5rem;
  bottom: 5.5rem;
}

.falling-leaf {
  z-index: 0;
}

.slick-slider .blue {
  font-size: 1rem;
  line-height: 2rem;
  padding: 4px 7px;
}

.slick-slider .yellow {
  padding: 4px 7px;
  font-size: .8rem;
  line-height: 1.8rem;
  color: #333;
}

}

/* iPhone 5 Portrait ----------- */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 

.reveal-modal h2 {
  font-size: 1.5rem;
  line-height: 2.5rem;
}

#pageslide1 {
  background-image: none;
  background-color: #F5F5F5;
  }

#pageslide2 {
  background-image: none;
  background-color: #F2F2F2;
  }

#pageslide3 {
  background-image: none;
  background-color: #F9F9F9;
  }

#pageslide4 {
  background-image: none;
  background-color: #F2F2F2;
  }

#inter-1 {
  visibility: hidden;
  display: none;
  }

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

#inter-3 {
  background-image: none;
  background-color: #F8F8F8;
  }


#wrapper-home-header {
  position: absolute;
  top: 0;
}

.wrapper-director {
  visibility: hidden;
  display: none;
}


.wrapper-actor-left {
  font-size: 1rem;
}

.wrapper-actor-right {
  font-size: 1rem;
}

.tagline {
  font-size: 1rem;
  line-height: 1rem;
}

img.laurel {
  visibility: hidden;
  display: none;
}

.openingdates {
  font-size: 1rem;
  line-height: 1.5rem;
  bottom: 4.5rem;
}

.footer a{
  font-size:.7rem;
}

.footer a.social {
  font-size:.7rem;
}

.falling-leaf {
  z-index: 0;
}

.slick-slider .blue {
  font-size: .8rem;
  line-height: 1.5rem;
  padding: 4px 7px;
}

.slick-slider .yellow {
  padding: 4px 7px;
  font-size: .8rem;
  line-height: 1.5rem;
  color: #333;
}

}


/* iPhone 5 Landscape ----------- */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 

.reveal-modal h2 {
  font-size: 1.5rem;
  line-height: 2.5rem;
}

#homepage {
  background-image: none;
  background-color: #F1F1F1;
  }

#pageslide1 {
  background-image: none;
  background-color: #F4F4F4;
  }

#pageslide2 {
  background-image: none;
  background-color: #F2F2F2;
  }

#pageslide3 {
  background-image: none;
  background-color: #F9F9F9;
  }

#pageslide4 {
  background-image: none;
  background-color: #F2F2F2;
  }

#inter-1 {
  visibility: hidden;
  display: none;
  }

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

#inter-3 {
  background-image: none;
  background-color: #F8F8F8;
  }

#wrapper-home-header {
  position: absolute;
  top: 0;
}

.wrapper-actor-left {
  font-size: 1rem;
}

.wrapper-actor-right {
  font-size: 1rem;
}

.wrapper-director {
  visibility: hidden;
  display: none;
}

.tagline {
  font-size: 1rem;
  line-height: 1rem;
  bottom: 6.5rem;
}

.openingdates {
  font-size: 1.1rem;
  line-height: 1.5rem;
  bottom: 5rem;
  padding: 0;
  margin: 0;
}

.footer {
  padding: 0;
  margin: 0;
}

.footer a{
  font-size:.7rem;
  line-height: .7rem;
  margin: 0;
  padding: 0;
}

.footer a.social {
  font-size:.7rem;
  line-height: .7rem;
  margin: 0;
  padding: 0;
}

.slick-slider .blue {
  font-size: 1rem;
  line-height: 2rem;
  padding: 4px 7px;
}

.slick-slider .yellow {
  padding: 4px 7px;
  font-size: .8rem;
  line-height: 1.8rem;
  color: #333;
}


}