/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #ffffff;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   border-box
   ========================================================================== */

* ,
* :before,
* :after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* ==========================================================================
   Author fonts
   ========================================================================== */




@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=73898a79-ef56-48ad-9c52-8871a136077b");

@font-face {
    font-family: "Conduit ITC W01 Light";
    src: url("../fonts/conduit/45fa0132-0858-4e18-9594-5a070788a059.eot?#iefix");
    src: url("../fonts/conduit/45fa0132-0858-4e18-9594-5a070788a059.eot?#iefix") format("eot"), url("../fonts/conduit/0f250d3b-13fd-469c-a4ec-9f9984165dea.woff2") format("woff2"), url("../fonts/conduit/e924c59f-bc21-471f-ad1b-cefd0c1a6315.woff") format("woff"), url("../fonts/conduit/13b88c12-e5f0-46c4-932a-57fe881b7c46.ttf") format("truetype"), url("../fonts/conduit/cf39e66c-fff7-43d5-b865-0a45543d590a.svg#cf39e66c-fff7-43d5-b865-0a45543d590a") format("svg");
}

@font-face {
    font-family: "Conduit ITC W01 Regular";
    src: url("../fonts/conduit/367b2d50-c71b-4348-b8e2-d364f82386ea.eot?#iefix");
    src: url("../fonts/conduit/367b2d50-c71b-4348-b8e2-d364f82386ea.eot?#iefix") format("eot"), url("../fonts/conduit/8846bd5f-2288-474a-9e36-1f6a456687e8.woff2") format("woff2"), url("../fonts/conduit/e328f17d-e8e5-424f-92e8-31af32b2ebac.woff") format("woff"), url("../fonts/conduit/97556a76-3d0b-4ad7-ae17-02b5d97e928b.ttf") format("truetype"), url("../fonts/conduit/407529ad-dcaa-4637-ac62-6cf9265d4f52.svg#407529ad-dcaa-4637-ac62-6cf9265d4f52") format("svg");
}

@font-face {
    font-family: "Conduit ITC W01 Medium";
    src: url("../fonts/conduit/a5a0edc0-b571-4275-9c51-3dfeba35b75a.eot?#iefix");
    src: url("../fonts/conduit/a5a0edc0-b571-4275-9c51-3dfeba35b75a.eot?#iefix") format("eot"), url("../fonts/conduit/a81af59b-a5d9-4e96-a7cc-919403c0d86c.woff2") format("woff2"), url("../fonts/conduit/e93ee223-5d52-4bdf-a113-c6c4c8936824.woff") format("woff"), url("../fonts/conduit/ccdadc2e-26c9-48a5-9c52-9c3cc58e9930.ttf") format("truetype"), url("../fonts/conduit/62fbb38e-9226-47f8-90d8-3c37328ab6c9.svg#62fbb38e-9226-47f8-90d8-3c37328ab6c9") format("svg");
}

@font-face {
    font-family: "Conduit ITC W01 Bold";
    src: url("../fonts/conduit/ef1cf8c3-989e-4b7e-ad89-9e034d47686d.eot?#iefix");
    src: url("../fonts/conduit/ef1cf8c3-989e-4b7e-ad89-9e034d47686d.eot?#iefix") format("eot"), url("../fonts/conduit/4680ad80-371f-497c-8926-35654adc2249.woff2") format("woff2"), url("../fonts/conduit/fdaf48d4-c023-4a03-b948-53535ee4d571.woff") format("woff"), url("../fonts/conduit/ca6dc25e-d400-4735-9fb9-ee2d025ebb5c.ttf") format("truetype"), url("../fonts/conduit/aa206b9b-b888-4ce6-8039-669469e9b429.svg#aa206b9b-b888-4ce6-8039-669469e9b429") format("svg");
}

html, body, p {
    font-family: 'Conduit ITC W01 Regular', sans-serif;

}

h1, h2, h3 {
    font-family: 'Conduit ITC W01 Medium', sans-serif;
}

b, strong {
    font-family: 'NConduit ITC W01 Bold', sans-serif !important;
}

/*
#watch #mainvideoLink > div:not(.playbtn),
#extras #extrasLink > div:not(.playbtn),
#additionalinfoLink h1,
#watchtrailer,
#navigation a:not(.visuallyhidden),
#extras h1{
   
    font-family: 'Avenir Next LT W01 Bold', sans-serif;

}
*/

#navigation a:not(.visuallyhidden) {

    font-family: 'Conduit ITC W01 Medium', sans-serif;

}

.gallery-download {
    font-family: 'Conduit ITC W01 Medium', sans-serif;

}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


html, body {
    background-color: black;
    min-width: 600px;
}

.table {
    display: table;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
}

.half {
    width: 50%;
}

.lowercase {
    text-transform: lowercase;
}

/* ------------------------------
            Grid: From http://getskeleton.com/
---------------------------------*/

.grid-container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    padding-top: 5vh !important;
}

.column,
.columns {
    width: 100%;
    float: left;
    box-sizing: border-box;
}

#characters .grid-container {
    width: 70vw;

}

#characters .row {
    padding: 1vh 0px;
}

#characters .row.one,
#characters .row.three {
    display: block;
    margin: 0px auto;
}

#characters .row.one {
    width: 20%;
    text-align: center;
}

#characters .row.three {
    width: 60%;
}

#characters .row.four {
    width: 93%;
    margin: 0px auto;
}

#characters .row.one .column {
    float: none;
}

.grid-container:after, .row:after, .u-cf {
    content: "";
    display: table;
    clear: both;
}

/* For devices larger than 400px */
@media (min-width: 400px) {
    .grid-container {
        width: 85%;
        padding: 0;
    }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
    .grid-container {
        width: 80%;
    }

    .column,
    .columns {
        margin-left: 4%;
    }

    .column:first-child,
    .columns:first-child {
        margin-left: 0;
    }

    .one.column,
    .one.columns {
        width: 4.66666666667%;
    }

    .two.columns {
        width: 13.3333333333%;
    }

    .three.columns {
        width: 22%;
    }

    .four.columns {
        width: 30.6666666667%;
    }

    .five.columns {
        width: 39.3333333333%;
    }

    .six.columns {
        width: 48%;
    }

    .seven.columns {
        width: 56.6666666667%;
    }

    .eight.columns {
        width: 65.3333333333%;
    }

    .nine.columns {
        width: 74.0%;
    }

    .ten.columns {
        width: 82.6666666667%;
    }

    .eleven.columns {
        width: 91.3333333333%;
    }

    .twelve.columns {
        width: 100%;
        margin-left: 0;
    }

    .one-third.column {
        width: 30.6666666667%;
    }

    .two-thirds.column {
        width: 65.3333333333%;
    }

    .one-half.column {
        width: 48%;
    }

    /* Offsets */
    .offset-by-one.column,
    .offset-by-one.columns {
        margin-left: 8.66666666667%;
    }

    .offset-by-two.column,
    .offset-by-two.columns {
        margin-left: 17.3333333333%;
    }

    .offset-by-three.column,
    .offset-by-three.columns {
        margin-left: 26%;
    }

    .offset-by-four.column,
    .offset-by-four.columns {
        margin-left: 34.6666666667%;
    }

    .offset-by-five.column,
    .offset-by-five.columns {
        margin-left: 43.3333333333%;
    }

    .offset-by-six.column,
    .offset-by-six.columns {
        margin-left: 52%;
    }

    .offset-by-seven.column,
    .offset-by-seven.columns {
        margin-left: 60.6666666667%;
    }

    .offset-by-eight.column,
    .offset-by-eight.columns {
        margin-left: 69.3333333333%;
    }

    .offset-by-nine.column,
    .offset-by-nine.columns {
        margin-left: 78.0%;
    }

    .offset-by-ten.column,
    .offset-by-ten.columns {
        margin-left: 86.6666666667%;
    }

    .offset-by-eleven.column,
    .offset-by-eleven.columns {
        margin-left: 95.3333333333%;
    }

    .offset-by-one-third.column,
    .offset-by-one-third.columns {
        margin-left: 34.6666666667%;
    }

    .offset-by-two-thirds.column,
    .offset-by-two-thirds.columns {
        margin-left: 69.3333333333%;
    }

    .offset-by-one-half.column,
    .offset-by-one-half.columns {
        margin-left: 52%;
    }
}

/* ------------------------------
            Loader
---------------------------------*/



div#loader {
    position: fixed;
    z-index: 103;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 0, 0);
    opacity: 1;
}

div#loader > div {
    position: relative;
    top: 8%;
    /* margin-top: -28%; */
    width: 100%;
}

div#loader-logo {
    width: 400px;
    margin: 0px auto;
    position: relative;
}

/*div#loader-logo:before {
    content:url(../img/logo-shadow.png);
    display:block;
    height:100%;
    width:100%;
    top:0px;
    left:0px;
    position:absolute;
}*/


#loader-progressbar {
    height: 15px;
    width: 80%;
    border: #461D09 solid 1px;
    margin: 50px auto 0px;
    max-width: 500px;
    opacity: 0;
    display: none;
}

#loader-progressbar > span {
    display: block;
    background-color: #F37336;
    height: 100%;
    width: 0%;
}

.no-js #loader {
    display: none;
}

.loaded div#loader {
    z-index: 0;
    opacity: 0;
    -webkit-transition: all 1s 6s;
    transition: all 1s 6s;
}

.loaded #loader-progressbar {
    -o-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    /* opacity: 0; */
}

/* ------------------------------
            Fixed Items
---------------------------------*/


.productionScrollingBgHolder, .panelbg {
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 100%;
}

.productionScrollingBgHolder {
    top: -100%;
}

.productionScrollingBg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    height: 100%;
}

.panelbg.skrollable-before,
.panelbg.skrollable-after,
.panelbg {
    display: none;
}

.productionScrollingBg.skrollable-between,
.panelbg.skrollable-between {
    display: block;
}

/* ------------------------------
            Animations
---------------------------------*/






/*
@-webkit-keyframes animationName {
  0% {}
  50% {}
  100% {}
}

@keyframes animationName {
  0% {}
  50% {}
  100% {}
}


@media only screen 
and (min-width: 600px)
and (max-width: 800px) {
  @-webkit-keyframes animationName {
    0% {}
    50% {}
    100% {}
  }

  @keyframes animationName {
    0% {}
    50% {}
    100% {}
  }
    
}

*/



/*

@-webkit-keyframes playv {
0% { background-position:  0% 100%; }
   100% { background-position:0%  -25%; }
 
}

@-webkit-keyframes playh {
  0% { background-position:  100% 0%;}
   100% { background-position:  -5.265% 0%; }
}

@keyframes playv {
0% { background-position:  0% 100%; }
   100% { background-position:0%  -25%; }
 
}

@keyframes playh {
  0% { background-position:  100% 0%;}
   100% { background-position:  -5.265% 0%; }
}
*/


.loaded #home .bgimage {
    /* -webkit-animation-name: animationName;
                      animation-name: animationName;

              -webkit-animation-duration: 5s;
                      animation-duration: 5s;
                
              -webkit-animation-delay: .5s;
                      animation-delay: .5s;*/
}

#scrolltext, 
#home #mainLogo, 
#watchtrailer, 
#navigation, 
#logoHolder {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

#home .watchTrailer {
    z-index: 35;
}

#home .watchTrailer {
    -webkit-animation-delay: 8.2s;
    animation-delay: 8.2s;
}

#home[playpause="play"] .bgimage:before, 
#home[playpause="play"] .bgimage:after {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}

#tagline {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

#tagline.fadeOut {
    -webkit-animation-delay: 2.45s;
    animation-delay: 2.45s;
    opacity: 0;
}

#scrolltext, #navigation {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

#secondaryLogo {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

#home #mainLogo {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

#titleLogo {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

/*
#logoAnimation{
  
  width: 512px;
  height: 512px;
  background-image: url('../img/logodecay-spritesheet-512x512.jpg');
  background-position: 0% 0%;

  -webkit-animation: playv 5s steps(5), playh 1s steps(20);
  animation: playv 5s steps(5), playh 1s steps(20);


  -webkit-animation: playvh 6s steps(20);
animation: playvh 6s steps(20);

  position: relative;
  z-index: 200;
  margin: 0px auto;
  background-size: 2000% auto;
  background-repeat:no-repeat;
  

  -webkit-transform: translateZ(0);
  transform: translateZ(0);


  -webkit-animation-iteration-count: 1,5;
  animation-iteration-count: 1,5;

    -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;

  opacity:1;

}
*/


#logoAnimation {
    /* width: 200px;
              height: 256px;
              background-image: url('../img/logodecay-spritesheet.jpg');
              -webkit-animation: playv 2.5s steps(5), playh .5s steps(20);
              animation: playv 2.5s steps(5), playh .5s steps(20);
              */

    width: 512px;
    height: 512px;

    position: relative;
    z-index: 200;
    margin: 0px auto;

    opacity: 0;

    overflow: hidden;



}

#logoAnimation.play {

    opacity: 1;

    -webkit-animation: playFadeIn 2s;
    -webkit-animation-iteration-count: 1;

    animation: playFadeIn 2s;
    animation-iteration-count: 1;
}

#logoAnimation img {

    position: absolute;

    top: 0;
    left: 0;

    /*-webkit-animation: playv 5s steps(5), playh 1s steps(20);
              animation: playv 5s steps(5), playh 1s steps(20);*/
    -webkit-transform: translateX(0%) translateY(0%) translateZ(0);
    transform: translateX(0%) translateY(0%) translateZ(0);


    -webkit-animation: playh1 1s steps(19), playh2 1s 1s steps(19), playh3 1s 2s steps(19), playh4 1s 3s steps(19), playh5 1s 4s steps(19), keyartFadeinout 1.5s 5.5s, keyartFadeinout .5s 6s;
    -webkit-animation-iteration-count: 1, 1, 1, 1, 1;

    animation: playh1 1s steps(19), playh2 1s 1s steps(19), playh3 1s 2s steps(19), playh4 1s 3s steps(19), playh5 1s 4s steps(19), keyartFadeinout 1.5s 5.5s, keyartFadeinout .5s 6s;
    animation-iteration-count: 1, 1, 1, 1, 1;



}

#logoAnimation:not(.play),
#logoAnimation:not(.play) img {

    -webkit-animation-play-state: paused, paused;
    animation-play-state: paused, paused;

}

@-webkit-keyframes playFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes playFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes playh1 {
    0% {
        transform: translateX(-95%) translateY(-80%) translateZ(0);
    }

    100% {
        transform: translateX(0%) translateY(-80%) translateZ(0);
    }
}

@keyframes playh1 {
    0% {
        transform: translateX(-95%) translateY(-80%) translateZ(0);
    }

    100% {
        transform: translateX(0%) translateY(-80%) translateZ(0);
    }
}

@-webkit-keyframes playh2 {
    0% {
        transform: translateX(-95%) translateY(-60%) translateZ(0);
    }

    100% {
        transform: translateX(0%) translateY(-60%) translateZ(0);
    }
}

@keyframes playh2 {
    0% {
        transform: translateX(-95%) translateY(-60%) translateZ(0);
    }

    100% {
        transform: translateX(0%) translateY(-60%) translateZ(0);
    }
}

@-webkit-keyframes playh3 {
    0% {
        transform: translateX(-95%) translateY(-40%) translateZ(0);
    }

    100% {
        transform: translateX(0%) translateY(-40%) translateZ(0);
    }
}

@keyframes playh3 {
    0% {
        transform: translateX(-95%) translateY(-40%) translateZ(0);
    }

    100% {
        transform: translateX(0%) translateY(-40%) translateZ(0);
    }
}

@-webkit-keyframes playh4 {
    0% {
        transform: translateX(-95%) translateY(-20%) translateZ(0);
    }

    100% {
        transform: translateX(0%) translateY(-20%) translateZ(0);
    }
}

@keyframes playh4 {
    0% {
        transform: translateX(-95%) translateY(-20%) translateZ(0);
    }

    100% {
        transform: translateX(0%) translateY(-20%) translateZ(0);
    }
}

@-webkit-keyframes playh5 {
    0% {
        transform: translateX(-95%) translateY(0%) translateZ(0);
    }

    100% {
        transform: translateX(0%) translateY(0%) translateZ(0);
    }
}

@keyframes playh5 {
    0% {
        transform: translateX(-95%) translateY(0%) translateZ(0);
    }

    100% {
        transform: translateX(0%) translateY(0%) translateZ(0);
    }
}

/* ------------------------------
            Panels
---------------------------------*/


#panels-container {
    top: 0px;
    position: relative;
}

#panels-container.fixed {
    position: fixed;
    width: 100%;
}

#panels, #skrollr-body {
    position: relative;
    z-index: 3;
}

.panel > .content,
.panel > .bgimage {
    height: 100%;
}

.panel > .bgimage {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
}

.panel {
    width: 100%;
    z-index: 14;
    position: relative;
    height: 100vh;
    min-height: 400px;
}

.characterslide.panel{
      height: 225vh;
}

#production.panel {
    height: auto;
    z-index: 26;
}

.panel {
    overflow: hidden;
}

#home.panel,
.characterslide .content {
    height: 100vh;
}

.characterSlide {
    height: 275vh;
}

.characterslide .content {
    position: absolute;
    width: 100%;
}

#charactersHolder .content {
    position: relative;
    height: 100%;
    width: 100%;
}

.panel .content:first-child {
    position: relative;
    width: 100%;
}

.panel.holdonscroll:not(#production) .content:first-child {
    height: 100vh;
}

#home.panel .content:first-child {
    height: 100%;
    position: absolute;
}

.panel .bgimage,
.backgroundScrollHolder > div[id^="bgimage-"] {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    width: 100%;
}

.backgroundScrollHolder {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    height: 100vh;
    z-index: 0;
}

.backgroundScrollHolder > div[id^="bgimage-"] {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    background-position: center;
}

/* ------------------------------
            Backgrounds
---------------------------------*/

.characterslide .css-slider {
    background-color: transparent;
}

#home .bgimage {
    /* background-image: url('../img/bg-home.jpg'); */
    position: relative;
}

#characters .bgimage {
    /* background-image: url('../img/bg-characters-all.jpg'); */
    /* background-size: 100% auto; */
    /* background-position: top left; */
}

/*#watch > .bgimage,*/
#watch > .bgimage > .content, #extras > .bgimage > .content,#watch > .bgimage, #extras > .bgimage {
    background-image: url('../img/bg-coast.jpg');
    background-position: bottom left;
}

#photos > .bgimage {
    /* background-image: url('../img/bg-extras.jpg'); */
    background: #000;
}

#production .bgimage {
    /* background-image: url('../img/producers-01.jpg'); */
    z-index: 0;
}

/*#extras .bgimage,*/
#extras > .bgimage > .content {
    background-position: 30% 30%;
}

#additional-info .bgimage,
.skrollr-mobile #additional-info > .bgimage > .content {
    background-image: url('../img/bg-additional.jpg');
}

.panel > .bgimage > .content {
    background-size: cover;
    transform-origin: top left;
    height: 100%;
}

.skrollr-mobile .panel > .bgimage {
    background-size: 0;
}

/* ------------------------------
    CHARACTER - Backgrounds
---------------------------------*/

#travis .character .bgimage {
    background-image: url('../img/bg-characters-travis.jpg');
    /* background-blend-mode: multiply; */
}

#travis .actor .bgimage {
    background-image: url('../img/bg-characters-travis-actor.jpg');
}

#madison .character .bgimage {
    background-image: url('../img/bg-characters-madison.jpg');
}

#madison .actor .bgimage {
    background-image: url('../img/bg-characters-madison-actor.jpg');
}

#chris .character .bgimage {
    background-image: url('../img/bg-characters-chris.jpg');
}

#chris .actor .bgimage {
    background-image: url('../img/bg-characters-chris-actor.jpg');
}

#alicia .character .bgimage {
    background-image: url('../img/bg-characters-alicia.jpg');
}

#alicia .actor .bgimage {
    background-image: url('../img/bg-characters-alicia-actor.jpg');
}

#daniel .character .bgimage {
    background-image: url('../img/bg-characters-daniel.jpg');
}

#daniel .actor .bgimage {
    background-image: url('../img/bg-characters-daniel-actor.jpg');
}

#nick .character .bgimage {
    background-image: url('../img/bg-characters-nick.jpg');
}

#nick .actor .bgimage {
    background-image: url('../img/bg-characters-nick-actor.jpg');
}

#ofelia .character .bgimage {
    background-image: url('../img/bg-characters-ofelia.jpg');
}

#ofelia .actor .bgimage {
    background-image: url('../img/bg-characters-ofelia-actor.jpg');
}

#strand .character .bgimage {
    background-image: url('../img/bg-characters-strand.jpg');
}

#strand .actor .bgimage {
    background-image: url('../img/bg-characters-strand-actor.jpg');
}

/* ------------------------------
    +++++++++++++++++++++++++++++
---------------------------------*/



/* ------------------------------
          Keyart
---------------------------------*/


.keyart {
    position: absolute;
    width: 170%;
    left: -35%;
    top: calc(-12vw + 100px);
    z-index: 0;
    opacity: 1;
    -webkit-animation: keyartFadeinout 6s;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-iteration-count: 3;
    animation: keyartFadeinout 6s;
    animation-delay: 1.5s;
    animation-iteration-count: 3;
}

.keyart:not(.play) {

    -webkit-animation-play-state: paused;
    animation-play-state: paused;

}

#home .bgimage:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    box-shadow: inset -4px -3px 200px 50px rgba(0, 0, 0, .4);
    opacity: .5;
    -webkit-animation: fadeinout 3s;
    -webkit-animation-iteration-count: 5;
    animation: fadeinout 3s;
    animation-iteration-count: 5;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

@-webkit-keyframes keyartFadeinout {
    0% {
        opacity: 1;
    }

    1% {
        opacity: .1;
    }

    2% {
        opacity: .5;
    }

    4% {
        opacity: .1;
    }

    7% {
        opacity: .3;
    }

    14% {
        opacity: .1;
    }

    60% {
        opacity: 1;
    }
}

@keyframes keyartFadeinout {
    0% {
        opacity: 1;
    }

    1% {
        opacity: .1;
    }

    2% {
        opacity: .5;
    }

    4% {
        opacity: .1;
    }

    7% {
        opacity: .3;
    }

    14% {
        opacity: .1;
    }

    60% {
        opacity: 1;
    }
}

.flicker {
    opacity: 1;
    -webkit-animation: keyartFadeinout 1s;
    animation: keyartFadeinout 1s;
    animation-iteration-count: 1;
}

.mobile-container .keyart {
    top: 0px;
    position: relative;
    width: 100%;
    left: 0%;
}

@media only screen 
and (max-width : 801px) {

    .keyart {
        width: 180%;
        left: -40%;
        top: calc(-18vw + 100px);
    }
}

@media only screen 
and (min-width : 801px) 
and (max-width : 999px) {

    .keyart {
        width: 140%;
        left: -20%;
    }
}

@media only screen 
and (min-width : 1000px) 
and (max-width : 1600px) {

    .keyart {
        width: 120%;
        left: -10%;
    }
}

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

    .keyart {
        width: 100%;
        left: 0%;
    }
}

.bg-sky {}

.bg-water {
    top: -2px;
    position: relative;
}

.bg-ship {
    position: absolute;
    bottom: calc(41.1706% - 152px);
    left: 50%;
    margin-left: -152px;
    -webkit-transform: translate(0%, 0%);
    -webkit-animation-name: shipintro;
    transform: translate(0%, 0%);
    animation-name: shipintro;
    opacity: 1;
}

@-webkit-keyframes shipintro {
    0% {
        -webkit-transform: translate(-30%, 0%);
        opacity: .8
    }
}

@keyframes shipintro {
    0% {
        transform: translate(-30%, 0%);
        opacity: .8
    }
}

.bg-ship .ship:before {
    content: '';
    display: block;
    margin: 0px auto;
    width: 100%;
    background-repeat: no-repeat;
    background-image: url('../img/keyart-shipshadow.png');
    height: 100%;
    position: absolute;
    top: 33%;

    -webkit-transform: skewX(0deg) scaleY(1);
    -webkit-transform-origin: top;
    -webkit-animation-name: shadowintro;


    transform: skewX(0deg) scaleY(1);
    transform-origin: top;
    animation-name: shadowintro;


    opacity: 1;
}

@-webkit-keyframes shadowintro {
    0% {
        -webkit-transform: skewX(-60deg) scaleY(.8);
        opacity: .8;
    }
}

@keyframes shadowintro {
    0% {
        transform: skewX(-60deg) scaleY(.8);
        opacity: .8;
    }
}

.bg-ship, .ship:before {
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: ease-out;

    animation-iteration-count: 1;
    animation-delay: 1.5s;
    animation-duration: 3s;
    animation-timing-function: ease-out;

}

.bg-ship:not(.play), .bg-ship:not(.play) .ship:before {
    animation-play-state: paused;
}

div#logoHolder {
    position: fixed;
    bottom: 10px;
    width: 30%;
    z-index: 4;
    left: 10px;
    max-width: 180px;
}

#home div#logoHolder {
    position: relative;
    bottom: auto;
    right: auto;
    max-width: none;
    width: 50%;
    margin: 0px auto;
    max-width: 420px;
}

#logoHolder a {
    display: block;
    text-align: center;
}

#secondaryLogo {
    width: 80%;
    margin: 0px auto;
}

#home #secondaryLogo {
    width: 60%;
    margin-top: 50px;
    max-width: 190px;
}

#mainLogo {
    margin: 0px auto;
    opacity: 0;
}

#home #mainLogo {
    width: 95%;
}

#watchtrailer {
    background-color: #283a56;
    display: block;
    color: #FFFFFF;
    text-align: center;
    margin: 0px auto;
    text-transform: uppercase;
    position: relative;
    width: 12em;
    font-size: 1.5em;
    text-decoration: none;
    top: 10px;
    background-repeat: no-repeat;
    background-size: cover;
}

.btn {
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    cursor: pointer;
    display: inline-block;
    margin: 15px 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.btn:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

/* Button 1 */
.btn-1 {
    /* border: 3px solid #fff; */
    color: #fff;
}

/* Button 1b */
.btn-1b:after {
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: #fff;
}

.btn-1b:hover,
.btn-1b:active {
    color: #0e83cd;
}

.btn-1b:hover:after,
.btn-1b:active:after {
    height: 100%;
}

#watchtrailer p {
    padding: 8px 0px;
    margin: 0px;
}

#watchtrailer p span {
    display: inline-block;
    vertical-align: middle;
}

#watchtrailer:hover p span {
    color: #283a56;
}

#characterSection {
    height: auto;
}

.character, .actor {
    height: 100%;
    width: 100%;
    /* z-index: 14; */
    /* position: relative; */
}

.character, .actor {
    height: 100%;
    width: 100%;
}

.character {
    /*-ms-transform: translate(0%, 0%);/* IE 9 */
    /* -webkit-transform: translate(0%, 0%); */
    /* Chrome, Safari, Opera */
    /* transform: translate(0%); */
}

.actor {
    /*-ms-transform: translate(100%,0%);/* IE 9 */
    /* -webkit-transform: translate(100%,0%); */
    /* Chrome, Safari, Opera */
    /* transform: translate(100%,0%); */
}

#home {
    /* width: 100%; */
    /* height: 100%; */
    /* position: fixed; */
    z-index: 101;
    top: 0px;
    /* left: 0px; */
    box-shadow: inset 2px 2px 113px 112px rgba(0, 0, 0, 0.3);
    background-color: black;
}


#synopsis .video-cover-layer {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 3;
}

#synopsis .synopsis-video, .bc-video {
    background: #000000;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}

#synopsis .synopsis-video #bc-background-video_html5_api {
    width: 120% !important;
    margin-left: -10% !important;
    height: 130% !important;
    margin-top: -9% !important;
}

#synopsis .synopsis-video .video-js {
    width: 120% !important;
    margin-left: -10% !important;
    height: 110vh !important;
    margin-top: -10vh;
}

#slideshow-holder {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

#slideshow-holder ul,
#slideshow-holder ul li {
    margin: 0px;
    padding: 0px;
}

#slideshow-holder ul {
    padding: 1%;
    display: block;
    margin-top: 50px;
}

#slideshow-holder ul li {
    display: inline-block;
    padding: 0.5%;
    width: 23.5%; /* overflow: hidden; */
}

#slideshow-holder .slideimage {
    cursor: zoom-in;
    position: relative;
    padding: 0px;
}

#slideshow-holder .slideimage:hover {
    padding: 0px;
}

#slideshow-holder .slideimage img {
    width: 100%;
    height: auto;
    position: relative;
    opacity: 0;
}

#characters {}

.characterslide {
    overflow: hidden;
    /*height: 100vh;*/
    /* position: fixed; */
    top: 0px;
    left: 0px;
    width: 100%;
}

.characterslide .bgimage {
    height: 100%;
}

.characterslide .actor .bgimage {
    background-position: 70% 0%;
    background-size: cover;
}

.characterslide .bgimage:before, 
.characterslide .bgimage:after,
.characterslide .character .right-bgimage {
    content: '';
    display: block;
    height: 100%;
    background-size: cover;
    background-position: top left;
    position: absolute;
    top: 0;
}

.characterslide .bgimage:after,
.characterslide .inner-content {
    width: 60.4%;
}

/*
.characterslide .character .bgimage:before{
 -webkit-transform: translate(-50%, -25%) rotate(30deg);
transform: translate(-50%, -25%) rotate(30deg);
} 

.characterslide .character .bgimage:after{

  -webkit-transform: translate(-50%, -25%) rotate(60deg);
  transform: translate(-50%, -25%) rotate(60deg);

}


.characterslide .character .bgimage:before,
.characterslide .character .bgimage:after{
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  width: 60%;
  background-color: rgba(0,0,0,0.2);
  border-right: #000 solid 1px;
  height: 250%;
  background-blend-mode: multiply;
}


#travis.characterslide .character .bgimage:before{
  -webkit-animation: travisbefore 30s infinite reverse linear;
  animation: travisbefore 30s infinite reverse linear;

}

#travis.characterslide .character .bgimage:after{
  -webkit-animation: travisafter 30s infinite reverse linear;
  animation: travisafter 30s infinite reverse linear;
}

@keyframes travisbefore{
  0%{
    transform: translate(-50%, -25%) rotate(30deg);
  }

  50%{

    transform: translate(-52%, -26%) rotate(32deg);
  }

  100%{
    transform: translate(-50%, -25%) rotate(30deg);
  }

}

@-webkit-keyframes travisbefore{
  0%{
    -webkit-transform: translate(-50%, -25%) rotate(30deg);
  }

  50%{
    -webkit-transform: translate(-52%, -26%) rotate(32deg);
  }

  100%{
    -webkit-transform: translate(-50%, -25%) rotate(30deg);
  }

}

@-webkit-keyframes travisafter{
  0%{
    -webkit-transform: translate(-50%, -25%) rotate(60deg);
  }

  50%{
    -webkit-transform: translate(-52%, -26%) rotate(58deg);
  }

  100%{
    -webkit-transform: translate(-50%, -25%) rotate(60deg);
  }

}

@keyframes travisafter{
  0%{
    -webkit-transform: translate(-50%, -25%) rotate(60deg);
  }

  50%{
    -webkit-transform: translate(-52%, -26%) rotate(58deg);
  }

  100%{
    -webkit-transform: translate(-50%, -25%) rotate(60deg);
  }

}




#madison.characterslide .character .bgimage:before{transform: translate(-40%, -35%) rotate(-10deg);background-color: rgba(0,0,0,0.7);} 

#madison.characterslide .character .bgimage:after{
  transform: translate(-65%, -29%) rotate(50deg);
  opacity: 1;
  background-color: rgba(0,0,0,0.42);
}

*/

.characterslide .character .right-bgimage {
    /* background-color: rgba(0, 0, 0, 0.7); */
    /* width:100%; */
    /* height: 120%; */
    /* top: -20%; */
}

.panel .bgimage {}

#home .bgimage {
    background-position: 50% 50%;
}

@-webkit-keyframes grain {

    0% {
        -webkit-transform: translateX(0%) translateY(0%) translateZ(0);
    }

    20% {
        -webkit-transform: translateX(-20%) translateY(5%) translateZ(0);
    }

    40% {
        -webkit-transform: translateX(-40%) translateY(-10%) translateZ(0);
    }

    60% {
        -webkit-transform: translateX(5%) translateY(6%) translateZ(0);
    }

    80% {
        -webkit-transform: translateX(-1.5%) translateY(-26.5%) translateZ(0);
    }

    100% {
        -webkit-transform: translateX(7.5%) translateY(2.5%) translateZ(0);
    }
}

@keyframes grain {

    0% {
        transform: translateX(0%) translateY(0%) translateZ(0);
    }

    20% {
        transform: translateX(-20%) translateY(5%) translateZ(0);
    }

    40% {
        transform: translateX(-40%) translateY(-10%) translateZ(0);
    }

    60% {
        transform: translateX(5%) translateY(6%) translateZ(0);
    }

    80% {
        transform: translateX(-1.5%) translateY(-26.5%) translateZ(0);
    }

    100% {
        transform: translateX(7.5%) translateY(2.5%) translateZ(0);
    }
}

@-webkit-keyframes fadeinout {

    0% {
        opacity: .2;
    }

    1% {
        opacity: .1;
    }

    2% {
        opacity: .7;
    }

    7% {
        opacity: .3;
    }

    10% {
        opacity: .4;
    }

    13% {
        opacity: .5;
    }

    60% {
        opacity: .1;
    }

    100% {
        opacity: .2;
    }
}

@keyframes fadeinout {

    0% {
        opacity: .2;
    }

    1% {
        opacity: .1;
    }

    2% {
        opacity: .7;
    }

    7% {
        opacity: .3;
    }

    10% {
        opacity: .4;
    }

    13% {
        opacity: .5;
    }

    60% {
        opacity: .1;
    }

    100% {
        opacity: .2;
    }
}

#home .bgimage:before {
    background: url('../img/512x512-noise.png');
    content: "";
    display: block;
    height: 200%;
    width: 200%;
    z-index: 5;
    opacity: 0.2;
    left: -50%;
    top: -50%;
    margin-left: 30%;
    margin-top: 0%;
    position: absolute;

}

.no-touch #home .bgimage:before {
    -webkit-animation: grain .15s linear, fadeinout 3s linear;
    -webkit-animation-iteration-count: 500, 7; /*infinite, infinite; 1000, 15;*/

    animation: grain .15s linear, fadeinout 3s linear;
    animation-iteration-count: 500, 7; /*infinite, infinite; 1000, 15;*/

    -webkit-transform: translateX(0) translateY(0) translateZ(0);
    transform: translateX(0) translateY(0) translateZ(0);

    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

#home[playpause="pause"] .bgimage:before,
#home[playpause="play"] .bgimage:after {

    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

#home[playpause="play"] .bgimage:before,
#home[playpause="play"] .bgimage:after {

    -webkit-animation-play-state: running;
    animation-play-state: running;
}

#slideshow-holder .slideimage .bgimage {
    background-position: center center;
}

.character .bgimage {
    background-position: 30% 0%;
    background-size: cover;
}

.panel .copyright {
    position: relative;
    top: 20px;
    width: 100%;
    text-align: left;
}

.socialmedia {
    position: relative;
    /* left: 50px; */
    /* top: -20px; */
    display: inline-block;
}

.socialmedia a {
    display: inline-block;
    margin: 0px 3px;
    width: 30px;
}

.panel .copyright p {
    padding: 15px 0px 20px;
    display: block;
    margin: 0px;
    text-align: center;
    font-size: 0.6em;
    opacity: .6;
}

#additional-info .content {
    top: 0;
    left: 10%;
    padding: 40px 0px 20px;
    font-size: 1.1em;
}

#extras .content-wall {
    left: 0;
    /* top:50%; */
    /* position:absolute; */
    /* margin-top: -10vh; */
    /* height: calc(100vh - 0px); */
}

#additional-info.panel {
    height: auto;
}

#additional-info .content {
    left: 0;
}

#home .content {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#production .content-wall {
    margin: 0px auto;
}

#extras .content {}

#additional-info .content-wall {
    padding-top: 30vh;
}



#watch .content-wall {
    width: 75%;
    position: relative;
    margin: 0px auto;
    top: 7%;
    text-align: center;
    padding: 20px 0px;
    font-size: 1.1em;
    max-width: 800px;
}

#synopsis .content-wall {
    width: 50%;
    right: auto;
    bottom: 20vh;
    margin: 0px auto;
    z-index: 102;
    /* padding: 40px; */
    height: auto;
    position: absolute;
    left: 0%;
    -webkit-animation: slideIn .5s ease;
    animation: slideIn .5s ease;
    opacity: 1;
    max-width: 445px;
    min-width: 400px;
}

@-webkit-keyframes slideOut {
    0% {
        -webkit-transform: translateX(0%);
    }

    100% {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes slideOut {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@-webkit-keyframes slideIn {
    0% {
        -webkit-transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(0%);
    }
}

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}

#synopsis .content-wall label {
    position: absolute;
    background-color: rgba(255, 255, 255, .2);
    height: 50px;
    width: 50px;
    z-index: 3;
    left: auto;
    top: 0%;
    padding: 12px;
    opacity: 1;
    transition: opacity .5s;
    cursor: pointer;
    overflow: hidden;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    right: -50px;
    z-index: 200;
}

#synopsis input:checked ~ .content-wall > label.synopsis-toggle-label .close {
    display: none;
}

#synopsis .content-wall label .close:before,
#synopsis .content-wall label .close:after {
    background-color: #D6AE43;
}

#synopsis .content-wall > label:before {
    content: "";
    display: none;
    color: #D6AE43;
    border: transparent solid 2px;
    height: 60%;
    width: 60%;
    box-sizing: border-box;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    border-top-color: #D6AE43;
    border-right-color: #D6AE43;
    left: 0%;
    position: relative;
    top: 15%;
}

#synopsis input:checked ~ .content-wall > label.synopsis-toggle-label:before {
    display: block;
}

#synopsis .content-wall > label:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    padding-top: 0;
    border-radius: 100%;
    background-color: rgba(240, 250, 240, .2);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 1;
}

#synopsis .content-wall > label:active:after {
    width: 120%;
    padding: 420%;
    -webkit-transition: width .5s ease-out, padding .5s ease-out, opacity .5s ease-out;
    transition: width .5s ease-out, padding .5s ease-out, opacity .5s ease-out;
    pointer-events: none;
    opacity: 0;
}

#synopsis .content-wall > label:before,
#synopsis input:checked ~ .content-wall > label.synopsis-toggle-label:before {
    /* -webkit-transition: all .25s .35s ease; */
    /* transition: all .25s .35s ease; */
}

#synopsis input:checked ~ .content-wall > label.synopsis-toggle-label:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    /* left: -20%; */
}

#synopsis input:checked ~ .content-wall {
    -webkit-animation: slideOut .5s ease;
    animation: slideOut .5s ease;
    transform: translateX(-100%);
    /* opacity:0; */
}

#synopsis .content-wall > input:checked ~ .content-wall-area label.synopsis-toggle-label,
#synopsis .content-wall label:hover {
    background-color: rgba(255, 255, 255, .5);
}

#synopsis .content-wall-area {
    padding: 2vw 2vw 2vw 4vw;
    background-color: rgba(255, 255, 255, 0.2);
}

#extras .content {
    height: 100%;
}

#synopsis .content .scrollwithmovement {
    height: auto;
    max-height: 76%;
}

#synopsis .content .scrollwithmovement > span {
    padding-bottom: 30px;
}

#synopsis .content p {
    margin: 12px 0px;
    text-align: left;
    width: 90%;
    max-width: 510px;
}

#synopsis .content p:nth-of-type(1) {
    /* margin-top:30px; */
}

#synopsis .scrollingarrow {
    position: absolute;
    bottom: 18%;
    width: 100%;
    display: block;
    z-index: 2;
}

#watch #mainvideoLink, .panel h1, #extras #extrasLink, #additionalinfoLink {
    color: #D6AE43;
    text-decoration: none;
    font-size: 1.7em;
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.1em;
    display: block;
    width: 527px;
    margin: 0px auto;
    /* max-width: 510px; */
    cursor: pointer;
    position: relative;
}

#watch #mainvideoLink {
    color: #d6dad9;
    width: 100%;
}

#extras {
}

#extras #extrasLink h1 {
    border-bottom: none;
    width: 100%;
    max-width: 700px;
}

#extras #extrasLink {
    border-bottom: none;
    width: 100%;
    max-width: initial;
    font-size: 0.9em;
}

#watch #mainvideoLink {}

#mainvideoLink, 
#additionalinfoLink {
    padding: 20px 0px 0px;
    width: 100%;
    font-size: 1em;
}

#mainvideoLink:hover, 
#additionalinfoLink:hover {
    /* border: solid 2px #ffffff; */
}

#mainvideoLink img, 
#additionalinfoLink img {
    /* opacity:0; */
}

.panel h1 {
    /* padding:10px 0px; */
    max-width: 510px;
    width: auto;
    text-align: left;
}

a {
    text-decoration: none;
}

.watchTrailer h1 {
    text-align: center;
    padding: 20px 0px;
    color: #ffffff;
    text-shadow: 1px 1px 2px #462110;
    font-size: 3em;
}

#production h1,
#extras h1 {
    max-width: 100%;
    text-align: center;
}

#production h1 {
    display: none;
}

#extras h1 {
    color: #fff;
    text-shadow: 3px 2px 2px rgba(0, 0, 0, 0.4);
    padding-bottom: 10px;
}

#additional-info h1, #watch h1, .watchTrailer h1 {
    border-bottom: none;
    color: #FFFFFF;
    display: inline-block;
    vertical-align: middle;
    font-size: 2.8em;
}

#watch #mainvideoLink > div:not(.playbtn),
#extras #extrasLink > div:not(.playbtn),
#additionalinfoLink > div:not(.playbtn) {
    padding: 6px 0px;
    font-weight: bold;
}

#watch #videoSelection,
.innercontent {
    /* padding-top: 20px; */
    /* margin-top: 15px; */
}

#production .innercontent {
    border-top: 0px;
    padding-bottom: 20px;
    padding-top: 20px;
}

#production .producer {
    padding: 40px 0px;
    margin: 0px auto;
    background-color: #2d0a02;
    color: #e6bb4a;
}

#production .producer-window {
    padding: 28vh 0px;
    background-position: center;
    background-size: cover;
    background-attachment: scroll;
}

#production #producer-window-0 {
    padding: 43vh 0px;
}

#production .producer > span {
    display: block;
    width: 70%;
    margin: 0px auto;
    min-width: 520px;
    max-width: 900px;
}

#production .producer:nth-of-type(1) {
    /* padding-top: 40px; */
}

#production .producer h2 {
    /* color: #333; */
    /* font-size: 1.9em; */
}

#production .producer h2 span {
    display: block;
}

#production .producer p {
    /* font-size: .9em; */
    /* color: #333; */
}

#production .producer h2 span:nth-child(1) {}

#production .producer h2 span.red {
    /* color: #333; */
    font-size: 0.8em;
}

#additionalinfoLink,
.watchTrailer {
    padding: 0px 0px 0px 0px;
    width: 540px;
    font-size: 0.9em;
}

#additional-info #additionalinfoLink {
    width: auto;
    text-align: center;
}

#additional-info #additionalinfoLink .playbtn, .watchTrailer .playbtn {
    /* border: none; */
    padding: 45px;
}

.watchTrailer {
    margin: 0px auto;
    text-align: center;
    display: block;
    padding-top: 2vh !important;
}

#extras .watchTrailer {
    padding-top: 10px !important;
}

#additional-info .innercontent {
    padding-top: 10px;
    padding-bottom: 50px;
    width: 90%;
    margin: 0px auto;
    max-width: 800px;
    text-shadow: 1px 1px 1px black;
}

#additional-info .innercontent .grid-container {
    /* text-transform: capitalize; */
}

#additional-info h4 {
    /* font-size: 0.95em; */
    color: #F9C032;
}

#additional-info .innercontent .grid-container {
    margin: 0px auto;
}

#additional-info .innercontent p {
    /* font-size: 0.85em; */
    text-align: left;
}

#additional-info .innercontent .table p {
    text-transform: uppercase;
    text-align: center;
}

#watch #videoSelection a .bgimage,
.video-item .bgimage,
.video-item .bgimage:after,
#mainvideoLink .bgimage,
#additionalinfoLink .bgimage,
#slideshow-holder .slideimage .bgimage,
#slideshow-holder .slideimage .bgimage:after {
    display: block;
    /* background-size: 110%; */
    background-position: center center;
    /* position:absolute; */
    z-index: 1;
}

#watch #videoSelection a .bgimage, 
#watch #videoSelection > div .bgimage,
#watch #videoSelection > div .bgimage:after, 
#mainvideoLink .bgimage,
#additionalinfoLink .bgimage, 
#mainvideoLink, 
#additionalinfoLink,
#slideshow-holder .slideimage .bgimage, 
#slideshow-holder .slideimage .bgimage:after,
#slideshow-holder .slideimage, .watchTrailer,
#watch #watchFullEpisode .bgimage {
    -webkit-transition: all 0.125s ease;
    -moz-transition: all 0.125s ease;
    -o-transition: all 0.125s ease;
    transition: all 0.125s ease;
}

#slideshow-holder .slideimage .bgimage:after {
    content: '';
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    opacity: 1;
}

#slideshow-holder .slideimage .bgimage:after {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

/*#watch #videoSelection > div:hover .bgimage:after,
#slideshow-holder .slideimage:hover .bgimage:after{
    opacity:0;
}


#watch #videoSelection a:hover .bgimage,
#watch #videoSelection > div:hover .bgimage,
#slideshow-holder .slideimage:hover .bgimage,
#mainvideoLink:hover .bgimage,
#additionalinfoLink:hover .bgimage{
    background-size: 115%;
}
*/
#slideshow-holder .slideimage:hover .bgimage {
    margin: 0px;
    top: 0px;
    position: relative;
}

#mainvideoLink .bgimage, #additionalinfoLink .bgimage {
    background-image: url('../img/watch-episodes.jpg');
}

#watch #videoSelection div#video-1 .bgimage {
    background-image: url('../img/watch-462.jpg');
}

#extras #videoSelection div#video-3 .bgimage {
    background-image: url('../img/extras-greetings.jpg');
}

#extras #videoSelection #video-4 .bgimage {
    background-image: url('../img/extras-360.jpg');
}

#watchFullEpisode .bgimage {
    background-image: url('../img/watch-episodes.jpg');
    background-size: cover;
    background-position: bottom center;
}

#watch #watchFullEpisode a:hover .bgimage {
    background-size: cover;
}

#watch #videoSelection div#video-2 .bgimage {
    background-image: url('../img/watch02.jpg');
}

#watch #videoSelection div#video-3 .bgimage {
    background-image: url('../img/watch-banner.jpg');
}

#watch #videoSelection div#video-4 .bgimage {
    background-image: url('../img/watch-thumb-4.jpg');
}

.panel .slide .inner-content,
.content-wall {
    position: relative;
    height: 100%;
    z-index: 145;
}

.panel:not(.characterslide) .slide .inner-content,
.content-wall {
    width: 100%;
}

.characterslide .content {}

.slideshow .downloadlink a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

.slideshow .downloadlink {
    position: absolute;
    top: 24px;
    z-index: 14;
    width: 100%;
    text-align: center;
}

.characterslide .actor .inner-content {
    left: auto;
    right: 0px;
    position: absolute;
}

#home .inner-content {
    top: 40vh;
    width: 95%;
    min-width: 275px;
    position: relative;
    margin: 0% auto;
}

#production .inner-content {
    /* width:80%; */
    /* margin:0px auto; */
}

.inner-content {}

#home #scrolltext {
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    font-size: .85em;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    width: 100%;
    padding: 50px 0px 20px;
    z-index: 200;
}

#home #scrolltext:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    box-shadow: 0px 0px 58px 59px rgba(0, 0, 0, 0.7);
    z-index: -1;
}

#home #tagline {
    width: 560px;
    left: 50%;
    /* max-width: 680px; */
    /* min-width: 500px; */
    position: absolute;
    margin-left: -280px;
    top: 24px;
}

.characterslide .inner-content > div:not(.right-bgimage) {
    width: 68%;
    top: 90px;
    /* font-size: 1em; */
    line-height: 1.4em;
    padding-right: 10px;
    height: 100%;
    max-height: 77%;
    position: absolute;
    min-width: 300px;
    max-width: 400px;
}

.characterslide .character .inner-content > div:not(.right-bgimage) {
    left: 10%;
}

.characterslide .actor .inner-content > div:not(.right-bgimage) {
    right: 10%;
}

.characterslide .inner-content div.text {
    text-align: left;
    /* font-size: 0.95em;
                max-height: 250px;
                overflow: hidden; */
    margin: 0px 0px 20px;
    /* position:relative;*/
}

div.scrollwithmovement {
    min-height: 190px;
    overflow: hidden;
    position: relative;
}

.characterslide .scrollwithmovement p:last-child {
    padding-bottom: 80px;
}

.characterslide .scrollwithmovement {
    height: 32vh;
}

.actor .scrollwithmovement {
    /* max-height: calc(62vh) !important;*/
}

.character .scrollwithmovement {
    /*max-height: calc(54vh) !important;*/
}

#slideshow-holder .scrollwithmovement {
    max-height: 90%;
}

div.scrollwithmovement > span {
    display: block;
    z-index: 1;
    position: absolute;
}

#additional-info .scrollwithmovement > span {
    padding-top: 60px;
}

.characterslide .inner-content h3 {
    padding: 4px 0px;
    /* margin:0px auto; */
    font-size: 1.8em;
    min-width: 200px;
    width: 90%;
    color: #fff;
    line-height: 1em;
    text-transform: uppercase;
    text-align: left;
}

.characterslide .inner-content h3 + p {
    min-width: 200px;
}

.characterslide .inner-content h3 span {
    display: block;
    font-size: 0.6em;
    text-transform: capitalize;
}

.characterslide .inner-content .actorbioLink {
    text-transform: uppercase;
    color: #ffffff;
    position: relative;
    padding-bottom: 50px;
}

.black .inner-content .actorbioLink {
    color: #000;
}

.white .inner-content .actorbioLink {
    color: #fff;
}

.characterslide .actor .inner-content {
    position: absolute;
}

.content h1, .inner-content > h1, .content h2, .inner-content h2, .content h3,
.inner-content h3
{
    margin: 0px;
}

.characterslide .black .inner-content h3,
.characterslide .black .inner-content p {
    color: #000;
}

.characterslide .white .inner-content h3,
.characterslide .white .inner-content p {
    color: #fff;
}

#characters .characterlink:hover h2 {
    /* opacity: 0 !important; */
}

#characters .characterlink:hover .hoverImage {
    opacity: 1;
}

a[id^="characterLink-"] {
    display: inline-block;
    text-decoration: none;
    position: absolute;
}

/*-- Character Landing page: Character positions, widths --*/

#characters .background, #charactersHolder .background {
    position: absolute;
}

#characters .background,
#charactersHolder .background,
#imageoutput,
#charactersCanvasContainer {
    height: auto;
    width: 100%;
    /*! bottom: 0px; */
    top: 0%;
    right: 0%;
    left: auto;
}

#characters .background, #charactersHolder .background {
    width: 110%;
}

@media only screen 
and (max-width : 801px) {

    #characters .background, #charactersHolder .background {
        width: 134%;
        margin-right: -8%;
    }
}

@media only screen 
and (min-width : 801px) 
and (max-width : 999px) {

    #characters .background, #charactersHolder .background {
        width: 140%;
        margin-right: -9%;
    }
}

@media only screen 
and (min-width : 1000px) 
and (max-width : 1199px) {

    #characters .background, #charactersHolder .background {
        width: 120%;
        margin-top: -2%;
    }
}

@media only screen 
and (min-width : 1200px) 
and (max-width : 1600px) {

    #characters .background, #charactersHolder .background {
        width: 100%;
        margin-top: -2%;
    }
}

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

    #characters .background, #charactersHolder .background {
        width: 100%;
        margin-top: -7%;
    }
}

#imageoutput.hide,
#charactersCanvasContainer.hide {
    height: 0%;
    overflow: hidden;
}

#imageoutput,
#charactersCanvasContainer {
    position: fixed;
    z-index: 5;
}

#imageoutput img {
    visibility: hidden;
}

.characterHoverImage,
.charactersonboat {
    position: absolute;
    z-index: 2;
    height: 100%;
    top: 0;
    left: auto;
    right: 0;
}

.characterHoverImage {
    display: none;
}

#imageoutput canvas {
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}

#characters .characterlink h2,
#charactersHolder .characterlink h2 {
    text-align: center;
    opacity: 1;
    display: block;
    margin: 0px auto;
    color: #ECC150;
    font-size: 1.3em;
    width: 100%;
    position: absolute;
    top: 30%;
    z-index: 4;
    line-height: 1.2em;
    margin-top: -.6em;
}

#characterLink-travis {
    width: 14.3234%;
    left: 29.505%;
    bottom: 2.1746%;
    z-index: 8;
}

#characterLink-travis + div {
    left: 1px;
}

#characterLink-madison {
    width: 11.41914%;
    left: 21.2541%;
    bottom: 1.9762%;
    z-index: 7;
}

#characterLink-alicia {
    width: 9.90%;
    left: 53.4653%;
    bottom: 5.944%;
    z-index: 7;
}

#characterLink-chris {
    width: 13.2013%;
    left: 39.538%;
    bottom: 10.9048%;
}

#characterLink-daniel {
    width: 10.3630%;
    left: 58.4158%;
    bottom: 37.7748%;
    z-index: 5;
}

#characterLink-nick {
    width: 14.5215%;
    left: 60.198%;
    bottom: 4.5635%;
    z-index: 8;
}

#characterLink-ofelia {
    width: 7.1287%;
    left: 65.6106%;
    bottom: 52.4484%;
    z-index: 6;
}

#characterLink-strand {
    width: 13.9274%;
    left: 80.5941%;
    bottom: 69.0056%;
}

#characters #characterLink-strand h2,
#charactersHolder #characterLink-strand h2 {
    top: 50%;
    left: 10%;
}

#characters .characterlink .hoverImage,
#charactersHolder .characterlink .hoverImage {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 0;
    overflow: hidden;
}

#characters .characterlink .imageholder,
#charactersHolder .characterlink .imageholder {
    position: relative;
    width: 100%;
    height: 100%;
}

.imageholder img, .imageholder > div:not(.playbtn), .emptyImage > span,
.emptyImage > img {
    width: 100%;
    height: auto;
}

.emptyImage > img {
    display: block;
}

#characters .imageholder img {
    position: relative;
    z-index: 0;
}

.characterlink {}

a.characterlink:hover + div.characterHoverImage {
    display: block;
}

#characters .characterlink h2 > div {
    /* border: #fff solid 2px; */
    /* border-left: none; */
    /* border-right: none; */
    /* padding: 2px 0px; */
    /* width: 83%; */
    /* margin: 0 auto; */
}

#characters .characterlink h2 > div > span:not(.lowercase),
#charactersHolder .characterlink h2 > div > span:not(.lowercase) {
    display: block;
    font-size: 0.8em;
}

#characters .characterlink .characterImage,
#charactersHolder .characterlink .characterImage {

    position: relative;

    visibility: hidden;
}

/* -- animation option 1 */
#characters .characterlink.active h2 {
    opacity: 1;
}

#characters .actorname {
    text-align: center;
    /* height: 0px; */
}

#characters .actorname:before {
    content: '';
    display: block;
    width: 40px;
    /* border-top: #4B2C19 solid 2px; */
    margin: 0px auto;
}

#characters .actorname p {
    margin: 0px;
    padding: 0px;
    height: auto;
    min-height: 0px;
    /* top: 10px; */
    position: relative;
    font-size: 0.5em;
    vertical-align: middle;
    display: inline-block;
}

#characters .active .actorname p {
    height: 100%;
    /* padding-top: 5px; */
    /* min-height: 30px; */
    top: 0px;
    opacity: 1;
}

#characters .active .actorname {
    height: 100%;
}

#characters .hoverImage {
    /*-webkit-transition: all 0.2s ease-in-out;
                -ms-transition: all 0.2s ease-in-out;
                -moz-transition: all 0.2s ease-in-out;
                -o-transition: all 0.2s ease-in-out;
                transition: all 0.2s ease-in-out;*/
}

#characters .characterlink .bgimage, #characters .characterlink .bgimage:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: top left;
}

#characters .content.activechild .characterlink:not(.active) .bgimage:after {
    content: '';
    background-color: rgba(0, 0, 0, 0.4);
}

#characters .characterlink .bgimage-2,
#characters .characterlink .bgimage-3,
#characters .characterlink.active .bgimage-1
{
    display: none;
}

#characters .characterlink.active .bgimage-2,
#characters .activechild .characterlink:not(.active) .bgimage-3
{
    display: block;
}

#characters .characterlink > div > div:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90%;
    z-index: 1;
    opacity: 0.9;
}

.characterslide label.prev, 
.characterslide label.next
{
    position: relative;
    z-index: 9999;
    opacity: 1;
}

#characterNav {
    position: relative;
    width: 190px;
    padding: 10px 0px;
    z-index: 100;
    opacity: 1;
    text-align: center;
    display: table;
}

#characterNav a {
    display: table-cell;
    font-size: 1.2em;
    color: #ffffff;
    text-decoration: none;
    vertical-align: middle;
    line-height: 1em;
    text-transform: uppercase;
    height: 50px;
}

#characterNav a,
.actorbioLink {
    transition: transform .125s;
}

#characterNav a:hover,
.actorbioLink:hover {
    transform: scale(1.1);
}

#characterNav a:not(.middle) {
    font-size: 3em;
}

#characterNav .galleryicon {
    width: 80px;
    margin: 10px auto;
    height: 37px;
}

#characterNav .galleryicon > * {
    width: 100%;
    height: 100%;
}

.white #characterNav .galleryicon .color {
    fill: #fff;
}

.black #characterNav .galleryicon .color {
    fill: #000;
}

#photosicon .st1 {
    fill: white;
}

#characterNav a {
    /* opacity:.4; */
}

#characterNav . {}

#characterNav a:hover {
    opacity: 1;
}

.black #characterNav .leftarrow:after,
.black #characterNav .rightarrow:after {
    border-color: #000;

}

.white #characterNav .leftarrow:after,
.white #characterNav .rightarrow:after {
    border-color: #fff;

}

#navigation {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 100;
    height: 60px;
    display: table;
    padding: 0px 14px;
}

#navigation:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    box-shadow: 0px 0px 70px 55px rgba(0, 0, 0, 0.9);
    height: 1px;
    z-index: 0;
    left: 0;
    top: -1px;
}

#navigation nav {
    position: initial;
    margin-top: initial;
    top: initial;
    z-index: initial;
    margin: 0 auto;
    /* width: 83%; */
}

#navigation #menuLogo, 
#navigation #amcLogo {padding: 4px;}

#navLogoHolder {min-width: 209px;
max-width: 450px;
width: 27%;}

.navLogo {display: table-cell;
vertical-align: middle;}

.navLogo a {
    display: block;
}

#menuLogo {
    width: 69%;
}

#amcLogo {width: 25%;}

#navigation > * {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding: 5px 0px;
}

nav#nav {}

#navigation #progressbar {
    width: 0;
    background-color: #eb3c35;
    height: 20px;
    position: absolute;
    z-index: 1;
    top: 21px;
}

#navigation #nav > div {
    position: relative;
    z-index: 4;
}

#navigation #nav > div > div {
    display: table;
    width: 100%;
}

#navigation #nav a:not(.visuallyhidden) {
    color: #f0c045;
    display: table-cell;
    width: 7%;
    text-align: center;
    font-size: .95em;
    text-decoration: none;
    position: relative;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 2;
    vertical-align: middle;
    transition: all .125s linear;
    vertical-align: middle;
}

#navigation #nav a:not(.visuallyhidden):hover,
#navigation #nav a.active
{
    color: #f0c045;

}

#navigation a span {
    display: block;
    position: relative;
    width: 96%;
    margin: 0px auto;
}

#navigation #nav a[active="no"]:after,
#navigation #nav a:after {
    content: '';
    /*display: none;*/
    width: 0%;
    opacity: 0;
    /*margin:0px auto;*/
    bottom: -5px;
    display: block;
    position: absolute;
    background-color: #f0c045;
    height: 3px;
    left: auto;
    transition: all .25s;
    right: 10%;
}

#navigation #nav a[active="yes"]:after,
#navigation #nav a:hover:after,
#navigation #nav a:active:after
{
    opacity: 1;
    width: 80%;
    left: 10%;
    right: auto;
    /* transition: all .125s; */
}

#navigation a,
#navigation a {

    opacity: .9;
}

.playbtn {
    height: 56px;
    width: 56px;
    text-align: center;
    display: block;
    line-height: 0em;
    border-radius: 50%;
    font-size: 1em;
    color: #646464;
    line-height: 1em;
    text-align: center;
    border: #fff solid 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
}

.video-item .playbtn, .video-item h2 {
    border: none;
    position: relative;
    display: block;
    left: 0;
    top: 0px;
    /* width: 13%; */
    z-index: 1;
    /* height: 100%; */
    vertical-align: bottom;
}

.video-item .table-cell {
    width: 50px;
    /* max-width: 50px; */
    height: 100%;
    vertical-align: middle;
}

.video-item .padding > div {
    vertical-align: middle;
    height: 51px;
}

.video-item .playbtn:after {
    border-left-color: #ffffff;
}

.video-item h2 {
    /* width: 76%; */
    font-size: 1.22em;
    text-align: left;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.1em;
    padding: 10px 0px;
}

.video-item:hover h2 {
    color: #ffffff;
}

#watchFullEpisode .video-item h2 {
    /* color: #000000; */
}

#watchFullEpisode .video-item .playbtn:after {
    /* border-left-color:#000000; */
}

#videoSelection {
    display: table;
}

#additional-info div#watchFullEpisode {
    float: none;
    width: 60%;
    height: 330px;
    margin: 0px auto;
}

#additional-info div#watchFullEpisode .bgimage {
    background-position: bottom left;
}

#extras #videoSelection .video-item {
    padding: 5px;
}

#videoSelection {
    width: 100%;
    max-width: 800px;
    margin: 0px auto;
}

#video-link-1 {
    width: 65.3061%;
    left: -10px;
}

#video-link-2 {
    width: 34.6938%;
    left: 10px;
}

#extras #videoSelection {
    float: none;
    width: 62vw;
    height: 40vw;
    position: relative;
    /* right: 5%; */
    z-index: 130;
    display: block;
    top: 31vh;
}

#extras #videoSelection .video-item {
    height: 46%;
    width: 49%;
    display: inline-block;
    cursor: pointer;
}

#watch .inner-content {
    height: 55%;
    margin-top: 13vh;
}

#watch div#videoSelection .video-item {
    position: relative;
    display: table-cell;
}

.video-item .bgimage {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-position: top left;
}

.video-item .padding > div {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
    display: table;
}

#watch .video-item .padding > div {
    display: table;
}

#watch .video-item h2 {
    display: table-cell;
}

#watch .video-item h2 {
    height: auto;
}

.panel:not(#extras) div#videoSelection .video-item .padding:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 0px;
    box-shadow: 0px 0px 33px 54px rgba(0, 0, 0, 0.7);
    bottom: 0px;
    z-index: 1;
}

div#watchFullEpisode {
    height: 100%;
    width: 60%;
}

div#watchFullEpisode a,
{}

#watchtrailer .playbtn, .watchTrailer .playbtn {
    position: relative;
    left: 0;
    top: 0;
    /* border-color: #2B2714; */
    /* height: 32px; */
    /* width: 32px; */
    /* border-width: 3px; */
    margin-right: 8px;
}

.watchTrailer .playbtn {
    /* width: 16vh; */
    /* height: 16vh; */
    /* margin: 0px auto !important; */
    border-color: #fff;
    border-width: 4px;
    border-style: solid;
    padding: 40px;
}

#additionalinfoLink .playbtn, #mainvideoLink .playbtn, .watchTrailer .playbtn {
    /* margin-left: -26px; */
    /* margin-top: -34px; */
    position: relative;
    display: inline-block;
    left: 0;
    top: 0;
    text-align: left;
    vertical-align: middle;
    margin-right: 20px;
}

#additionalinfoLink:hover .playbtn,
#mainvideoLink:hover .playbtn {
    border-color: #ffffff;
}

#additionalinfoLink .playbtn:after {}

#extrasLink .playbtn {
    position: relative;
    top: 0;
    left: 0;
    margin: 0px auto;
}

.playbtn:after {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 21px solid #FFFFFF;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -9px;
    margin-top: -15px;
}

#watchtrailer:hover .playbtn {
    border-color: #283a56;
    transition: all .125s .125s;
}

#watchtrailer:hover .playbtn:after {
    border-left-color: #f0c045;
    transition: all .125s .125s;
}

#additionalinfoLink:hover .playbtn:after,
#mainvideoLink:hover .playbtn:after {
    border-left-color: #ffffff;
}

.watchTrailer .playbtn:after,
#additionalinfoLink .playbtn:after {
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 40px solid #ffffff;
    margin-left: -15px;
    margin-top: -25px;
}

#videoSelection > div:hover .playbtn {
    border-color: #FFFFFF;
}

#videoSelection > div:hover .playbtn:after {
    border-left-color: #FFFFFF;
}

.downarrow, 
.rightarrow,
.leftarrow,
.uparrow {
    display: block;
    text-align: center;
    z-index: 1;
}

.characterpagearrow,
.characterpagearrow.next,
.characterpagearrow.prev {
    /* position:absolute; */
    /* top:50%; */
    /* z-index: 101; */
    /* margin: -32px 20px 0px; */
    opacity: 0.8;
    /* width: 1px; */
    /* display: none; */
    position: relative;
    right: auto;
}

.characterpagearrow:hover {
    opacity: 1;
}

.characterpagearrow .galleryicon {
    width: 40px;
    margin-top: 18px
}

.actorbioLink .rightarrow,
.actorbioLink .leftarrow,
.downloadlink .rightarrow {
    display: inline-block;
    vertical-align: middle;
}

.actorbioLink .leftarrow {
    float: left;
}

.downarrow:after,
.rightarrow:after,
.leftarrow:after,
.uparrow:after {
    content: '';
    border: #FFFFFF solid 2px;
    display: inline-block;
    width: 19px;
    height: 19px;
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    /* vertical-align: middle; */
}

.actorbioLink .uparrow:after,
.actorbioLink .downarrow:after {
    border-width: 3px;
}

.black .actorbioLink .downarrow:after {
    border-color: #000;
}

.white .actorbioLink .downarrow:after {
    border-color: #fff;
}

.actorbioLink .uparrow {
    padding-top: 10px;
}

.downarrow:after {
    border-right: none;
    border-top: none;
}

.rightarrow:after {
    border-left: none;
    border-top: none;
}

.leftarrow:after {
    border-right: none;
    border-bottom: none;
}

.uparrow:after {
    border-left: none;
    border-bottom: none;
}

.slideshow .rightarrow:after,
.slideshow .leftarrow:after {
    height: 60px;
    width: 60px;
}

.downloadlink .rightarrow:after {
    height: 10px;
    width: 10px;
}

.characterslide .next .rightarrow:after, 
.characterslide .prev .leftarrow:after {
    height: 30px;
    width: 30px;
}

.slideshow .rightarrow,
.slideshow .leftarrow {
    padding: 0px 40px;

    /*
    -ms-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
    -moz-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
    -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));*/
    /*filter: url(../img/shadow.svg#drop-shadow);*/
}

.downloadlink .rightarrow {
    padding: 0;
}

.characterslide {}

/* ==========================================================================
   Background-image Preloader CSS2 Trick
   ========================================================================== */

body:after {
    content: '';
    display: block;
    height: 1px;
    width: 1px;
    opacity: 1;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -200;
    overflow: hidden;

}

/* ==========================================================================
   Video Player / Slideshow Overlay
   ========================================================================== */



.video-overlay, 
#slideshowoverlay {
    background: rgba(0, 0, 0, 0.8);
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 101;
}

.button-close {
    cursor: pointer;
    height: 40px;
    display: none;
    position: absolute;
    right: 0px;
    top: -50px;
    width: 40px;
    z-index: 25;
}

#slideshowoverlay .button-close {
    display: block;
    padding: 5px;
    background: #781D1E;
    border-radius: 50%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
}

.video-player {
    background: #000000;
    border: #e6bb4a solid 1px;
    display: none;
    height: 470px;
    left: 50%;
    margin-left: -425px;
    /* overflow: hidden; */
    position: fixed;
    top: 100px;
    width: 835px;
    z-index: 101;
}

.video-iframe, .video-container {
    height: 100%;
    position: relative;
    width: 100%;
    border: none;
    z-index: 1;
}

.video-temp-cover {
    background: #000000;
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 23;
}

@media screen and (max-width: 900px) {
    .video-player {
        height: 338px;
        margin-left: -300px;
        top: 20%;
        width: 600px;
    }

    #navigation #nav a:not(.visuallyhidden) {
        font-size: 0.8em;
    }
}

/* iPad Portrait */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    .video-player {
        height: 400px;
        left: 5%;
        margin-left: 0;
        top: 30%;
        width: 90%;
    }

    .mobile-container {
        display: block !important;
        position: fixed;
        z-index: 200;
    }
}

/* ==========================================================================
   PURE CSS Exit icon
   ========================================================================== */




.close {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.close:hover::before, .close:hover::after {
    background: #FFFFFF;
}

.close::before, .close::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: #e6bb4a;
}

.close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.close.big {
    -webkit-transform: scale(3);
    -moz-transform: scale(3);
    -ms-transform: scale(3);
    -o-transform: scale(3);
    transform: scale(3);
}

.close.hairline::before, .close.hairline::after {
    height: 1px;
}

.close.thick::before, .close.thick::after {
    height: 4px;
    margin-top: -2px;
}

.close.black::before, .close.black::after {
    height: 8px;
    margin-top: -4px;
}

.close.heavy::before, .close.heavy::after {
    height: 12px;
    margin-top: -6px;
}

.close.pointy::Before, .close.pointy::after {
    width: 200%;
    left: -50%;
}

.close.rounded::before, .close.rounded::after {
    border-radius: 5px;
}

.close.blades::before, .close.blades::after {
    border-radius: 5px 0;
}

.close.warp::before, .close.warp::after {
    border-radius: 120% 0;
}

.close.fat::before, .close.fat::after {
    border-radius: 100%;
}

.mobile-container {
    display: none;
}

@media only screen and (max-width: 750px)
{

    .mobile-container {
        display: block;
        position: fixed;
        z-index: 200;
    }

    html, body {
        min-width: initial;
    }

    #navigation #nav a:not(.visuallyhidden) {
        font-size: 0.7em;
    }
}

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


    #navigation #nav a:not(.visuallyhidden) {
        font-size: 0.7em;
    }

    #navigation a span {
        width: 89%;
    }

    #characters .characterlink h2 {
        font-size: 1.2em;
    }

    #characters .row {
        padding: 2.2vh 0px;
    }

    #characters .characterlink .hoverImage {
        /* width: 90px; */
        /* margin-left: -45px; */
        /* margin-top: -55px; */
    }

    #production .content {
        /* right: 1%; */
        /* width: 50%; */
        /* max-width: 800px; */
    }

    #production .content-wall > span {
        display: block;
        z-index: 3;
        position: relative;
    }

    div#watchFullEpisode, div#videoSelection {
        /* float: none; */
        /* width: 100%; */
    }

    div#watchFullEpisode {
        height: 80%;
    }

    #watch .content-wall {
        width: 70%;
    }

    #watch {
        /* top:5px; */
    }

    #watch #videoSelection > div {
        /* width: 50%; */
        /* float: left; */
        /* height: 25vh; */
        /* max-height: 160px; */
    }

    .video-item .playbtn {
        /* width: 15%; */
    }

    .video-item h2 {
        /* font-size: 0.65em; */
        width: 80%;
        margin-top: 10px;
    }

    .video-item .playbtn:after {
        /* border-top-width: 10px; */
        /* border-bottom-width: 10px; */
        /* border-left-width: 16px; */
        /* margin-left: -8px; */
        /* margin-top: -5px; */
    }
}

/* ==========================================================================
   Audio controller
   ========================================================================== */


.audio-control {
    width: 30px;
    height: 30px;
    background: url('../img/volume-on.png') no-repeat 0 0;
    position: fixed;
    top: 7.4vw;
    left: 10px;
    z-index: 105;
    /* background-color: #781C20; */
    cursor: pointer;
    /* display: none; */
}

.audio-control.muted {
    background-image: url('../img/volume-off.png');
}

/* ==========================================================================
   Photo Gallery
   ========================================================================== */


/* malihu-jquery-image-gallery CSS */
#toolbar {
    position: absolute;
    z-index: 3;
    right: 10px;
    top: 10px; /* padding:5px; */
    background: url('../img/fs_img_g_bg.png');
    width: 42px;
    margin-top: -10px;
}

#toolbar img {
    border: none;
    width: 100%;
    height: auto;
}

#img_title {
    position: absolute;
    z-index: 3;
    left: 10px;
    top: 10px;
    padding: 10px;
    background: url('../img/fs_img_g_bg.png');
    color: #FFF;
    font-family: arial, serif;
    font-size: 24px;
    text-transform: uppercase;
}

#img_title {
    display: none !important;
}

#bg {
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#bgimg {
    display: none;
    -ms-interpolation-mode: bicubic;
}

#preloader {
    position: relative;
    z-index: 3;
    width: 32px;
    padding: 20px;
    top: 80px;
    margin: auto;
    background: #000;
}

#thumbnails_wrapper {
    z-index: 2;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: url('../img/empty.gif'); /* stupid ie needs a background value to understand hover area */
}

#outer_container {
    position: relative;
    padding: 0;
    width: 100%;
    margin: 40px auto;
}

#outer_container .thumbScroller {
    position: relative;
    overflow: hidden;
    background: url('../img/fs_img_g_bg.png');
}

.touch #outer_container .thumbScroller {
    overflow-x: scroll;
}

#outer_container .thumbScroller, #outer_container .thumbScroller .container,
#outer_container .thumbScroller .galleryimage {
    height: 130px;
}

#outer_container .thumbScroller .container {
    position: relative;
    left: 0;
}

#outer_container .thumbScroller .galleryimage {
    float: left;
}

#outer_container .thumbScroller .galleryimage div {
    margin: 5px;
    height: 100%;
}

#outer_container .thumbScroller img {
    border: 5px solid #fff;
    width: auto;
    height: 110px;
}

#outer_container .thumbScroller .galleryimage div a {
    display: block;
    padding: 5px;
}

.nextImageBtn, .prevImageBtn {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    margin: -25px 10px 0 10px;
    z-index: 3;
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    -khtml-opacity: 0.4;
    opacity: 0.7;
}

.nextImageBtn:hover, .prevImageBtn:hover {
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

.nextImageBtn {
    right: 80px; /* background:#000 url(../img/nextImgBtn.png) center center no-repeat; */
    /* background-color: rgba(0,0,0,0.5); */
}

.prevImageBtn {
    /* background:#000 url(../img/prevImgBtn.png) center center no-repeat; */
}

.touch #photos #thumbnails_wrapper[visible="true"] {
    -webkit-animation: thumbnailflash 1s 1s;
    animation: thumbnailflash 1s 1s;
    /*display: none !important;*/
}

#thumbnails_wrapper[visible="true"] {
    opacity: 1;
}

#thumbnails_wrapper[visible="false"] {
    opacity: 1;
}

@-webkit-keyframes thumbnailflash {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }
}

@keyframes thumbnailflash {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }
}

.gallery-images {
    min-height: 100%;
    overflow: hidden;
    /* margin: 20px; */
    height: 100%;
}

.gallery-download {
    position: absolute;
    z-index: 3;
    left: 10px;
    opacity: .7;
}

.gallery-download, #toolbar {
    top: 8vw;
}

.gallery-download {

    left: 47px;
}

.gallery-download:hover {
    opacity: 1;
}

.gallery-download a {
    padding: 10px;
    color: #FFF;
    font-size: 15px;
    text-transform: uppercase;
    background: url('../img/fs_img_g_bg.png');
    font-weight: normal;
    /* opacity: .7; */
    background-color: #000000;
    text-decoration: none;
}

.touch .gallery-download a {
    opacity: .8;
}

.gallery-download a.hover {
    opacity: 1;
}

@media screen and (max-width: 700px) {
    .gallery-download, #toolbar {
        /* margin-top: 0px; */
    }
}

/* ==========================================================================
   Animation Triggers
   ========================================================================== */




.animated[myAttr="false"] {
    opacity: 0;
}

[showhide="show"] {
    display: block;

}

[showhide="hide"] {
    display: none;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers:
 */
.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before, .clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ==========================================================================@ */
@mediaonlyscreenand(min-width:35em) {
    /* Style adjustments for viewports that meet the condition */
}

@mediaprint, (
-webkit-min-device-pixel-ratio: 1.25),
(
min-resolution: 1.25dppx),
(
min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    * ,
    * :before,
    * :after {




}
}

/*--- Test position of elements ---- 
#characters .content-wall:before{
  content:'';
  display:block;
  width:100%;
  position:fixed;
  border-top:green dashed 1px;
  z-index:1000;
  top:57%;
}
*/