/* ============================================================
 FONTS
============================================================ */
@import url('https://fonts.googleapis.com/css?family=Ropa+Sans|Open+Sans:300,400,600');

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

/* ============================================================
UNIVERSAL TEXT STYLES
============================================================ */
a {
  -webkit-transition: background .5s, color .5s ease-out;
  -moz-transition: background, color .5s .5s ease-out;
  transition: background .5s, color .5s ease-out;
}

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

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

.align-right {
  text-align: right;
}

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

img.align-right {
  float: right;
}

img.align-left {
  float: left;
}

.alt-text {
  font-family: 'Ropa Sans', sans-serif;
}

.large-text-2 {
  font-size: 2rem;
}

.shadow {
  text-shadow: 0px 0px 20px #FFFFFE;
}

.shadow-blue {
  text-shadow: 0px 0px 20px #0093d0;
}

.vertical-spacer {
  margin-top: 1.5rem;
}

.font-weight-light {
  font-weight: 300;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.pad-left {
  margin-left: .5rem;
}

/* ============================================================
NAVIGATION
============================================================ */
#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;
  font-size: 1.2rem;
}

#navigation li a {
  font-family: 'Ropa Sans', serif;
  text-transform: uppercase;
  color: #FFFFFE;
  opacity: 0.85;
}

#navigation li a:hover {
  opacity: 0.95;
  text-shadow: 0px 0px 20px #FFFFFE;
  -webkit-transition: background .5s, color .5s ease-out;
  -moz-transition: background, color .5s .5s ease-out;
  transition: background .5s, color .5s ease-out;
}

.icon-list {
  color: #FFFFFE;
}


/* ============================================================
PAGE & SECTION 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;
  margin:0;
  padding:5em 0 0 0;
}

.pageslide {
   padding:5em 0 3em 0;
   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;
   margin:0;
}

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

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

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

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

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

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

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

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

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

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

/* ============================================================
HOMEPAGE
============================================================ */

.homepage-producers {
  width:100%;
  position:absolute;
  top: 6rem;
  padding: 0;
  margin: 0;
  text-align:right;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.75rem;
  text-transform: uppercase;
  opacity: 0.95;
}

.homepage-quotes {
  width: 100%;
  position:absolute;
  top: 4rem;
  padding: 0;
  margin: 0;
  text-align:right;
  opacity: 0.9;
  font-size: 3rem;
  line-height: 3rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}

.quote-credit {
  display: block;
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 300;
  padding: 0;
  margin: 0;
  font-style: normal;
}

.award-detail {
  display: block;
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 300;
  padding: 0;
  margin: 0;
  font-style: normal;
}

.homepage-moviecopy {
  width:100%;
  position:absolute;
  bottom: 3.5rem;
  padding: 0;
  margin: 0;
}

.row-getTickets {
  width: 100%;
  position: absolute;
  top: 10rem;
  text-align: right;
}

.link-button {
  padding: .25rem .5rem;
  font-size: 2rem;
  line-height: 2rem;
  font-family: 'Ropa Sans', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  opacity: 0.95;
  color: #4b7ab3:
  letter-spacing: 1px;
  background-color: #FFFFFF;
  border-radius: 4px;
}

a.link-button:hover {
  box-shadow:  -2px 2px 20px #4b7ab3;
  -webkit-box-shadow:  -2px 2px 20px #4b7ab3
  -webkit-transition: background .5s, color .5s ease-out;
  -moz-transition: background, color .5s .5s ease-out;
  transition: background .5s, color .5s ease-out;
}

.homepage-director {
  width: 100%;
  text-align: right;
  padding: 0 2rem;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.4rem;
  text-transform: uppercase;
  opacity: 0.95;
}

img.graphic-title {
  margin: 0 auto;
}

.opening-dates {
  width: 100%;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.2rem;
  text-transform: uppercase;
  opacity: 0.95;
}

.opening-dates a {
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.2rem;
  text-transform: uppercase;
  color: #FFF;
  -webkit-transition: background .5s, color .5s ease-out;
  -moz-transition: background, color .5s .5s ease-out;
  transition: background .5s, color .5s ease-out;
}

.opening-dates a:hover {
  color: #FFF;
   text-shadow: 0px 0px 20px #0093d0;
}

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

img.graphic-statue {
  max-height: 80px;
}





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

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

.footer a {
  font-family: 'Ropa Sans', serif;
  text-transform: uppercase;
  font-size: .8rem;
  line-height: .9rem;
  color: #FFFFFE;
  letter-spacing: 1px;
  opacity: 0.85;
}

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

.footer a.social {
  color: #FFFFFE;
  font-size: .8rem;
  line-height: .9rem;
  opacity: 0.85;
}

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

.copyright {
  font-family: 'Ropa Sans', serif;
  text-transform: uppercase;
  font-size: .8rem;
  line-height: .9rem;
  opacity: 0.85;
  text-align:center;
  padding-top: .25rem;
}

/**** Back to Top Button ****/

.back-to-top {
  position:fixed;
  _position:absolute;
  bottom: 3rem;
  _top:expression(eval(document.body.scrollBottom));
  right: 1rem;
  text-align: center;
  right: .5rem;
  display: none;
  z-index: 200;
  padding: .85rem 1rem 1rem 1rem;
  background:#FFFFFE;
  opacity: 0.75;
  margin-left:-30px;
  width: 50px;
  height:50px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

a .back-to-top {
  color:#743552;
}

/* ============================================================
SECTION SPECIFIC COPY & SCROLLTEXT STYLES
============================================================ */

#section-synopsis .scrolltext {
  border-radius: 10px 0 0 10px;
  padding: .5rem 1rem .25rem .5rem;
  background-image: url('../img/backgrounds/scrolltext.png');
  background-repeat: repeat;
}

#section-synopsis h2 {
  margin-left: .5rem;
}

#section-synopsis p {
  text-shadow: 0px 0px 12px #5d2935;
}

#section-cast .scrolltext {
  border-radius: 10px 0 0 10px;
  padding: .5rem 1rem .25rem .5rem;
  background-image: url('../img/backgrounds/scrolltext-cast.png');
  background-repeat: repeat;
}

#section-filmmakers .scrolltext {
  border-radius: 10px 0 0 10px;
  padding: .5rem 1rem .25rem .5rem;
  background-image: url('../img/backgrounds/scrolltext-filmmakers.png');
  background-repeat: repeat;
}

.yellow-text {
  text-shadow: 0px 0px 12px #c16967;
}

.blue-text {
  text-shadow: 0px 0px 12px #489686;
}


/* ============================================================
SCROLLING TEXT STRUCTURE & COPY STYLES
============================================================ */

.pageslide h2 {
  padding: 0;
  margin: 0;
  font-family: 'Ropa Sans', serif;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 3rem;
  color: #FFFFFE;
  opacity: 0.95;
  text-shadow: 0px 0px 20px #FFFFFE;
}

.pageslide p {
  padding: 0;
  margin: 0;
}

.scrolltext {
  height:450px;
  padding: 0 1rem 0 0;
  margin-top: 1rem;
  overflow: hidden;
  outline: none;
}

.scrolltext p {
  font-family: 'Open Sans', serif;
  font-weight: 300;
  font-size: 1.2rem;
  margin-bottom: .75rem;
}

.scrolltext ul li {
  font-family: 'Ropa Sans', serif;
  font-size: 1.2rem;
  line-height: 1.2rem;
}

.scrolltext ul li a {
  clear: both;
  display: block;
  font-family: 'Open Sans', serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.2rem;
  color: #FFFFFE;
}

.link {
  clear: both;
  display: block;
  font-family: 'Open Sans', serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.5rem;
}

.dates-content .scroll-text {
  height: 200px;
}

/* ============================================================
QUOTE STYLES
============================================================ */

.quotes {
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-style: italic;
  opacity: 0.95;
}


.quotes-gallery {
  width: 100%;
  margin: 0 auto;
 padding-top: 3rem;
  text-align: center;
} 


/* ============================================================
MODAL STRUCTURE & BASE STYLING
============================================================ */

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

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

.reveal-modal {
  background-image: url('../img/backgrounds/bg-modal.jpg');
  background-repeat: repeat;
}

.reveal-modal-bg {
  background:rgba(208,95,141,0.9);
}

.close-reveal-modal {
  font-family: 'Ropa Sans', serif;
  font-size: 8rem;
  line-height: 6rem;
  color: #FFFFFE;
  opacity: 0.85;
  text-shadow: 0px 0px 20px #2F2E87;
}

/* ============================================================
MODAL COPY STYLES
============================================================ */

.reveal-modal {
  color: #FFFFFE;
}

.reveal-modal h2 {
  font-family: 'Ropa Sans', serif;
  color: #FFFFFE;
  font-size: 2rem;
  line-height: 2rem;
  text-transform: uppercase;
  opacity: 0.95;
  text-shadow: 0px 0px 20px #FFFFFE;
}

.reveal-modal p {
  font-family: 'Open Sans', serif;
  font-weight: 300;
  font-size: 1.2rem;
  color: #FFFFFE;
  text-shadow: 0 0 7px #2F2E87;
}


/* ============================================================
MODAL IMAGE STYLES
============================================================ */

.bio-image {
  max-width: 350px;
  border-radius: 20px;
  box-shadow:  0 0 20px #2F2E87;
  -webkit-box-shadow:  0 0 20px #2F2E87;
  float: right;
  margin: 20px 20px 20px 10px;
  opacity: 0.75;
}

/* ============================================================
GALLERY STYLES
============================================================ */

.photogallery ul li {
}

.photogallery ul li a img {
  border-radius: 10px;
  opacity: 0.5;
  box-shadow:  0 0 20px #2F2E87;
  -webkit-box-shadow:  0 0 20px #2F2E87;
}

.photogallery ul li a img:hover {
  opacity: 0.85;
  -webkit-transition: background .5s, color .5s ease-out;
  -moz-transition:  background, color .5s .5s ease-out;
  transition: background .5s, color .5s ease-out;
}

/* ============================================================
SOCIAL STREAM
============================================================ */

  #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;
 }

  .pageslide.socialstreamcontainer {
    height: 1200px;
    overflow: hidden;
  }

/* ============================================================
SCROLLBARS
============================================================ */

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

.scrollmodal::-webkit-scrollbar{width: 3px;}
.scrollmodal::-webkit-scrollbar-thumb{background-color:rgba(255,255,254,0.5); border-radius: 0;}
.scrollmodal::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,254,1.0);}
.scrollmodal::-webkit-scrollbar-track{background-color:rgba(255,255,254,0.75);}

/* ============================================================
FOUNDATION OVERRIDES
============================================================ */

.flex-video  {
  margin-bottom:0;
}

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

/* ============================================================
LIGHTBOX
============================================================ */
.photogallery img {
  border-radius: 10px;
  -webkit-border-radius: 10px;
}

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

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

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

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

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

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

@media (max-width: 1000px)  {
.homepage-quotes {
  top: 1rem;
}

.row-getTickets {
  width: 100%;
  position: absolute;
  top: 9rem;
  text-align: right;
}

.homepage-moviecopy {
  bottom: 4.75rem;
}
}

@media (max-width: 780px)  {


.homepage-quotes {
  font-size: 1.75rem;
  line-height: 1.75rem;
}

.homepage-producers {
  top: 5rem;
}
.row-getTickets {
  top: 10rem;
}
}

@media (max-width: 700px)  {
.row-getTickets {
  top: 14rem;
}
}


/* 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;
  background-image: url("../img/backgrounds/mobile/home.jpg");
  }

#section-synopsis {
  background-image: url("../img/backgrounds/mobile/synopsis.jpg");
}

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

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

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

#socialstreamcontainer {
  background-image: url("../img/backgrounds/mobile/social.jpg");
}

#inter-spacer {
  background-image: url("../img/backgrounds/mobile/bg-pink.jpg");
}

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

.pageslide {
   padding: 3em 0 3em 0;
}

.homepage-producers {
  top:  3.5rem;
  font-size: 1rem;
  line-height: 1rem;
}

.homepage-quotes {
  top: 1rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

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

.graphic-statue {
  visibility: hidden;
  display: none;
}

.row-getTickets {
  top: 8rem;
  text-align: left;
}

.link-button {
  opacity: 0.75;
}

.homepage-moviecopy {
  bottom: 5rem;
}

.homepage-director {
  padding: 0 1rem;
  font-size: 1rem;
  line-height: 1.2rem;
}

.large-text-2 {
  font-size: 1.25rem;
  line-height: 1.25rem;
}

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

.pageslide h2 {
  font-size: 2rem;
  line-height: 2rem;
}

.scrolltext p {
  font-size: 1rem;
}

.scrolltext ul li {
  font-size: 1rem;
  line-height: 1rem;
}

.scrolltext ul li a {
  font-size: 1rem;
  line-height: 1rem;
}

.link {
  font-size: 1rem;
}

.scrollmodal {
  height: 400px;
}

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

.reveal-modal p {
  font-size: 1rem;
}

.bio-image {
  max-width: 300px;
  float: none;
  text-align: center;
  margin: 15px 0 10px 20px;
}
}

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

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

.pageslide {
   padding: 3em 0 3em 0;
}

.homepage-producers {
  top:  3.5rem;
  font-size: 1rem;
  line-height: 1rem;
}

.link-button {
  opacity: 0.75;
}

.homepage-quotes {
  top: 1rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

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

.graphic-statue {
  visibility: hidden;
  display: none;
}

.large-text-2 {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.homepage-moviecopy {
  bottom: 4.75rem;
}

.homepage-director {
  padding: 0 1rem;
  font-size: 1.5rem;
  line-height: 1.7rem;
}

img.graphic-title {
  max-width: 70%;
  float: right;
}

.opening-dates {
  padding: 0 1rem;
  margin: 0;
  text-align: right;
  float: right;
  font-size: 1rem;
  line-height: 1rem;
}

.pageslide h2 {
  font-size: 2rem;
  line-height: 2rem;
}

.scrolltext p {
  font-size: 1rem;
}

.scrolltext ul li {
  font-size: 1rem;
  line-height: 1rem;
}

.scrolltext ul li a {
  font-size: 1rem;
  line-height: 1rem;
}

.link {
  font-size: 1rem;
}

.scrollmodal {
  height: 400px;
}

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

.reveal-modal p {
  font-size: 1rem;
}

.bio-image {
  max-width: 300px;
  float: right;
  margin: 15px 20px 10px 10px;
}
}