@import url('https://fonts.googleapis.com/css?family=Ropa+Sans|EB+Garamond|Source+Sans+Pro:300,400,600,700');

/* ============================================================
  HTML & BODY
============================================================ */
html, body {
  height: 100%;
  width:100%;
  margin:0;
  padding:0;
  background-color: #ee697e;
  font-family: 'Source Sans Pro', 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;
}

/* ============================================================
NAVIGATION
============================================================ */
#navigation {
  width:100%;
  padding-top: .25rem;
  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 {
  color: #e7dfb8;
  text-transform: uppercase;
  font-family: 'chicagoflfregular', 'Source Sans Pro', sans-serif;
  font-size: 1.3rem;
  line-height: 1.3rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: -2px 2px 3px #0a0d2c;
}

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

.icon-list {
  color:#fff;
}


/* ============================================================
HOMEPAGE STYLES & STRUCTURE
============================================================ */

#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:#290815;
  margin:0;
  padding: 5rem 0 0 0;
}

.row-gowatchit {
  width: 100%;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 4rem;
  text-align: right;
}

.homepage-production {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: absolute;
  bottom: 4rem;
  text-align: right;
}

.row-bluray-digital {
  width: 100%;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 20%;
  text-align: right;
}

.homepage-content {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: absolute;
  bottom: 5rem;
}

img.homepage-title {
  width: 100%;
  max-width: 800px;
}

.openingdates {
  width:100%;
  position:absolute;
  bottom: 6rem;
  text-align:center;
  font-family: 'chicagoflfregular', sans-serif;
  color: #d2cec5;
  font-size: 1.5rem;
  line-height: 1.5rem;
  padding: 0;
  margin: 0 auto;
  text-shadow: -2px 2px 3px red;
  letter-spacing: 1px;
}

.openingdates a {
  color:#5ad7e5;
}

.openingdates a:hover {
  color: #e1b0a1;
}
/* ============================================================
PAGE STRUCTURE
============================================================ */

.pageslide {
   min-height:600px;
   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:#290815;
   margin:0;
}

.centered {
  margin: 0 auto;
  text-align: center;
}

.spacer {
  height: .1rem;
  display: block;
  clear: both;
}

.buffer {
  padding: 1rem 0;
}

/* ============================================================
BACKGROUND IMAGES
============================================================ */

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

#pageslide1 {
   padding: 5rem 0 3em 0;
  background-image: url("../img/backgrounds/synopsis.jpg");
  }

#pageslide2 {
   padding: 5rem 0 3em 0;
  background-image: url("../img/backgrounds/cast.jpg");
  }

#pageslide3 {
   padding: 6rem 0 3em 0;
  background-image: url("../img/backgrounds/filmmakers.jpg");
  }

#pageslide4 {
   padding: 8rem 0 3em 0;
  background-image: url("../img/backgrounds/gallery.jpg");
  }

#pageslide5 {
   padding: 3rem 0 0 0;
  background-image: url("../img/backgrounds/social.jpg");
  }

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

#inter-2 {
   padding: 3rem 0 0 0;
  background-image: url("../img/backgrounds/inter-2.jpg");
  }

#inter-final {
  background-image: url("../img/backgrounds/inter-final.jpg");
  }

#inter-final-quotes {
  background-image: url("../img/backgrounds/inter-final-quotes.jpg");
  /* background: #ee697e; */
}

.pageslide {
  background-image: url("../img/backgrounds/pageslide-bg-gradient.jpg");
  }

/* ============================================================
TYPOGRAPHY
============================================================ */

.pageslide h2 {
  font-family: 'chicagoflfregular', sans-serif;
  color: #dad1a8;
  font-size: 2rem;
  text-transform: uppercase;
  text-shadow: -2px 2px 3px red;
}

.scrolltext p {
  font-family: 'Source Sans Pro', sans-serif;
  color: #d2cec5;
  font-size: 1.2rem;
  font-weight: 300;
  text-shadow: -2px 2px 3px #0a0d2c;
}

.scrolltext ul li {
  font-family: 'Source Sans Pro', sans-serif;
  color: #d2cec5;
  font-size: 1.1rem;
  font-weight: 300;
  text-shadow: -2px 2px 3px #0a0d2c;
}

.scrolltext a {
  font-family: 'Ropa Sans', sans-serif;
  color: #D2cec5;
  font-size: 1.5rem;
  line-height: 1.75rem;
  text-shadow: -2px 2px 3px #0a0d2c;
}

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

.link {
  font-family: 'Ropa Sans', sans-serif;
  color: #D2cec5;
  font-size: 1.5rem;
  line-height: 1.75rem;
  clear: both;
  display: block;
  text-shadow: -2px 2px 3px #0a0d2c;
}

.reveal-modal h1,.reveal-modal h2,.reveal-modal h3,.reveal-modal h4,.reveal-modal h5 {
  margin: 0;
  padding: 0;
  font-family: 'chicagoflfregular','EB Garamond', 'Ropa Sans', sans-serif;
  color: #dad1a8;
  font-size: 2rem;
  line-height: 2rem;
  text-transform: uppercase;
  text-shadow: -2px 2px 3px red;
}

.reveal-modal p {
  font-family: 'Source Sans Pro', sans-serif;
  color: #d2cec5;
  font-size: 1.2rem;
  font-weight: 300;
  text-shadow: 0px 0px 1px #dad1a8;
}

p.lead {
  margin: 0;
  padding: .25rem 0 1.5rem 0;
  font-family: 'Source Sans Pro', sans-serif;
  color: #d2cec5;
  font-size: 1.75rem;
  line-height: 1.75rem;
  font-weight: 300;
  text-shadow: -2px 2px 3px #0a0d2c;
}

.alt-color {
  color:#d2cec5;
}

.align-left {
  float: left;
}

.align-right {
  float: right;
}

/* ============================================================
BUTTONS
============================================================ */

.button {
  margin-right: -1.5rem;
  padding: .5rem 1rem;
  border: 0;
  border-radius: 10px 0 0 10px;
  background-color: #e7dfb8;
  -webkit-border-radius: 10px 0 0 10px;
  box-shadow:  -2px 2px 5px red;
  -webkit-box-shadow:  -2px 2px 5px red;
  text-transform: uppercase;
  font-family: 'chicagoflfregular', sans-serif;
  color: #000;
  font-size: 1.5rem;
  line-height: 1.5rem;
  z-index: 1000;
}

.button:hover {
  color: #FFF;
  background-color: #e7dfb8;
}

#link-button {
  z-index: 1000;
}


/* ============================================================
FOOTER
============================================================ */

.footer {
  width:100%;
   position:fixed;
  _position:absolute;
  bottom:0;
  _top:expression(eval(document.body.scrollBottom));
  padding: 0;
  margin: 0;
  font-size:.8em;
  text-transform:uppercase;
  color:#d2cec5;
  text-transform: uppercase;
  font-family: 'Ropa Sans', sans-serif;
}

.footer a{
  font-family: 'Source Sans Pro', sans-serif;
  color:#ffd4bc;
  opacity: 0.75;
  font-size: .8rem;
  line-height: .9rem;
  text-shadow: -2px 2px 3px #000;
}

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

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

.footer a.social {
  color:#ffd4bc;
  opacity: 0.75;
  font-size: 1rem;
   line-height: 1rem;
  text-shadow: -2px 2px 3px #0000;
}

.footer a:hover {
  opacity: 1.0;
}

.copyright {
  font-family: 'EB Garamond', sans-serif;
  color:#ffd4bc;
  opacity: 0.75;
  font-size:.8em;
  text-align:center;
  text-transform:none;
  padding-top: .25rem;
  text-shadow: 0px 0px 2px #dad1a8;
}

img.productionbar {
  max-width: 100px;
}

/**********************
back to top button
*********************/
.back-to-top {
  position:fixed;
  _position:absolute;
  bottom: 5rem;
  _top:expression(eval(document.body.scrollBottom));
  right: 1.5rem;
  text-align: center;
  left: 50%;
  display: none;
  z-index: 200;
  padding: 1rem 1rem 1rem 1rem;
  background-color: rgba(41,8,21,0.5);
  margin-left:-30px;
  width:  50px;
  height: 50px;
  border-radius: 25px;
  -webkit-border-radius: 25px;
}

a .back-to-top {
  color: #d2cec5;
  font-size: 1rem;
}


/* ============================================================
CONTENT AREAS
============================================================ */

/**********************
QUOTES > SCROLLER & IMAGES
**********************/

.quote {
  display: none;
  padding: 0;
  margin: 0;
}

.quote-page-quote {
  display: none;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  font-family: 'Ropa Sans', sans-serif;
  text-transform: uppercase;
  color:#ffd4bc;
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-shadow: -2px 2px 3px red;
  letter-spacing: 1.5px;
}

.extra-large-quote {
  padding: 0;
  margin: 0;
  font-size: 2.25rem;
}

.large-quote {
  padding: 0;
  margin: 0;
  font-size: 2rem;
}

.quote-credit {
  margin: 0 auto;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
  color:#fff;
  opacity: 0.75;
  font-size: .8rem;
  font-weight: 300;
  text-transform: none;
  text-shadow: -2px 2px 3px red;
}

img.img-quote {
  width: 100%;
  margin: 0 auto;
}

.iconbar {
  width: 100%;
  margin: 0;
  padding: 0 0 1rem 0;
}

/**********************
Interstitial Area Quotes
**********************/

.quote-row-header {
  position: relative;
  top: 4rem;
  width: 100%;
}

.quote-row-mid {
  position: relative;
  top: 9rem;
  width: 100%;
}

.quote-row-footer {
  position: relative;
  top: 30%;
  width: 100%;
}

.quotes  {
  padding: 0 2rem;
  margin: 0 auto;
  text-align: center;
  font-family: 'Ropa Sans', sans-serif;
  text-transform: uppercase;
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-shadow: -2px 2px 3px red;
  letter-spacing: 1.5px;
}

.quotes-color1 {
  color:#ffd4bc;
}

.quotes-color2 {
  color:#c6d2c2;
}

.quotes-color3 {
  color:#e1b0a1;
}

.quotes-color4 {
  color: #5ad7e5;
}

/**********************
Scrolling Text Boxes
**********************/

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

.scrollmodal {
  height:425px;
  overflow-y:scroll;
  padding: 0 1rem 0 0;
}

ul li a.modal {
  display: block;
  clear: both;
}

/**********************
Modals: Reveal, etc
**********************/

.reveal-modal {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-image: url("../img/backgrounds/gallery.jpg");
  color:#d2cec5;
}

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

.reveal-modal-bg {
  background: rgba(36,34,39,0.9);
}

.close-reveal-modal {
  font-family: 'Ropa Sans', sans-serif;
  color: #dad1a8;
  text-shadow: -2px 2px 3px red;
}

img.bio-image  {
  max-width: 350px;
  padding: .15rem;
  background-color: #34152e;
  border-radius: 20px;
  -webkit-border-radius: 10px;
  box-shadow:  0px 0px 10px #34152e;
  -webkit-box-shadow:  0px 0px 10px #34152e;
}

img.align-left {
  margin: 0 1rem .25rem 0;
}

img.align-right {
  margin: 0 0 .25rem 1rem;
}

/**********************
Social Stream
**********************/

    h3 {
      text-align: center;
    }

    #wall {
      padding: 10px 0 0 0;
      min-height: 1200px;
    }

    #wrapper,
    #container {
      width: 100%;
      padding: 0;
      overflow-y: scroll;
    }

    #nav-container {
      margin-bottom: 20px;
    }

    .stream li.dcsns-twitter .section-text img {
      display: block!important;
    }


/**********************
Scrollbars
*********************/

.scrollmodal::-webkit-scrollbar{width: 3px;}
.scrollmodal::-webkit-scrollbar-thumb{background-color:rgba(75,84,67,0.5); border-radius: 0;}
.scrollmodal::-webkit-scrollbar-thumb:hover{background-color:rgba(75,84,67,0.75);}
.scrollmodal::-webkit-scrollbar-track{background-color:rgba(75,84,67,0.25);}

.scrolltext::-webkit-scrollbar{width: 2px;}
.scrolltext::-webkit-scrollbar-thumb{background-color:rgba(75,84,67,0.75); border-radius: 0;}
.scrolltext::-webkit-scrollbar-thumb:hover{background-color:rgba(75,84,67,0.95);}
.scrolltext::-webkit-scrollbar-track{background-color:rgba(275,84,67,0.75);}

/* ============================================================
GALLERY & GALLERY LIGHTBOX
============================================================ */
.photogallery img {
  opacity: 0.85;
  padding: .15rem;
  background-color: #34152e;
  border-radius: 20px;
  -webkit-border-radius: 10px;
  box-shadow:  0px 0px 10px #34152e;
  -webkit-box-shadow:  0px 0px 10px #34152e;
}

.photogallery img:hover {
  opacity: 0.95;
  box-shadow:  0px 0px 20px #34152e;
  -webkit-box-shadow:  0px 0px 20px #34152e;
  -webkit-transition: background .5s, color .5s ease-out;
  -moz-transition: background, color .5s .5s ease-out;
  transition: background .5s, color .5s ease-out;
}

.lb-outerContainer {
  background:rgba(218,209,168, 1.0)
}


/* ============================================================
Blu-ray and Digital
============================================================ */

.bluray-digital-wrapper {
  float: right;
  background-color: #e7dfb8;
  margin-right: -1.5rem;
  padding: .5rem 0 .5rem .5rem;
  border: 0;
  border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
  box-shadow:  -2px 2px 5px red;
  -webkit-box-shadow:  -2px 2px 5px red;
  text-transform: uppercase;
  font-family: 'chicagoflfregular', sans-serif;
}

.box-art {
  max-height: 175px;
  max-width: 142px;
  float: left;
}

.box-art img {
  max-height: 140px;
  max-width: 142px;
}

.cta {
  max-width: 155px;
  text-align: center;
  padding: .35rem 0 0 .35rem;
}

.cta p {
  color: #000;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  line-height: .9rem;
}

img.cta-button {
  max-width: 100px;
  padding: 0 0 .25rem 0;
}


/* ============================================================
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;
}

/* ============================================================
RESPONSIVE / MEDIA QUERIES
============================================================ */

.menu-btn {
  color: #e7dfb8;
  font-size: 2.5rem;
}

.menu-btn .icomoon {
  color: #e7dfb8;
}


/**********************
Media Queries
*********************/

@media (max-width: 1200px) {
#pageslide3 {
  background-image: url("../img/backgrounds/filmmakers-880.jpg");
  }

.homepage-production {
  bottom: 7.5rem;
}
}

@media (max-width: 1030px) {
.openingdates {
  bottom: 6rem;
  font-size: 1.25rem;
  line-height: 1.25rem;
}

.homepage-content {
  bottom: 8.5rem;
}

.homepage-production {
  bottom: 16rem;
}

.back-to-top {
  bottom: 6rem;
}


.box-art img {
  visibility: hidden;
  display: none;
}
}
 
@media (max-width: 880px) {
#pageslide2 {
  background-image: url("../img/backgrounds/cast-880.jpg");
  }

.openingdates {
  bottom: 6rem;
  font-size: 1rem;
  line-height: 1.25rem;
}
}

@media (max-width: 700px) {
#pageslide3 {
  background-image: url("../img/backgrounds/filmmakers-600.jpg");
  margin: 0 auto;
  text-align: center;
  }

}

@media (max-width: 600px) {
#inter-1 {
   padding: 4rem 0 3em 0;
  background-image: url("../img/backgrounds/inter-1-600.jpg");
  }

#inter-2 {
  padding-top: 50%;
}

.homepage-content {
  bottom: 8rem;
}
}

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

}

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

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

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

.row-gowatchit {
  top: 2rem;
  text-align: right;
  z-index: 1000;
}

.button {
  margin-right: 1rem;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  font-size: 1rem;
  line-height: 1rem;
}

.homepage-production {
  text-align: left;
}

.homepage-content {
  bottom: 9rem;
}


}

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

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
#pageslide5 {
   padding: 6rem 0 0 0;
  }

.row-gowatchit {
  bottom: 3rem;
  z-index: 1000;
}

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

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

.homepage-production {
  top: 5rem;
  text-align: left;
}

img.productionbar {
  max-width: 75px;
}

.homepage-content {
  top: 1rem;
}

img.homepage-title {
  width: 100%;
  max-width: 400px;
}


.row-bluray-digital {
  top: 30%;
}
}