/*! 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;
    padding: 40px;
    text-align: center;
    font-size: 1.2em;
    top: 50%;
    position: relative;
    margin-top: -80px;
}

div#browserupgrade-holder {
    height: 100%;
    position: fixed;
    background: transparent;
    z-index: 999;
    width: 100%;
}

/* ==========================================================================
   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=351e0106-23ac-41ee-b89a-9a2747ec165e");
@font-face {
    font-family: "AvenirNextLTW01-Regular";
    src: url("../fonts/avenir-next/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix");
    src: url("../fonts/avenir-next/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix") format("eot"), url("../fonts/avenir-next/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2") format("woff2"), url("../fonts/avenir-next/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff"), url("../fonts/avenir-next/46cf1067-688d-4aab-b0f7-bd942af6efd8.ttf") format("truetype"), url("../fonts/avenir-next/52a192b1-bea5-4b48-879f-107f009b666f.svg#52a192b1-bea5-4b48-879f-107f009b666f") format("svg");
}

@font-face {
    font-family: "AvenirNextLTW01-Italic";
    src: url("../fonts/avenir-next/d1fddef1-d940-4904-8f6c-17e809462301.eot?#iefix");
    src: url("../fonts/avenir-next/d1fddef1-d940-4904-8f6c-17e809462301.eot?#iefix") format("eot"), url("../fonts/avenir-next/7377dbe6-f11a-4a05-b33c-bc8ce1f60f84.woff2") format("woff2"), url("../fonts/avenir-next/92b66dbd-4201-4ac2-a605-4d4ffc8705cc.woff") format("woff"), url("../fonts/avenir-next/18839597-afa8-4f0b-9abb-4a30262d0da8.ttf") format("truetype"), url("../fonts/avenir-next/1de7e6f4-9d4d-47e7-ab23-7d5cf10ab585.svg#1de7e6f4-9d4d-47e7-ab23-7d5cf10ab585") format("svg");
}

@font-face {
    font-family: "AvenirNextLTW01-Medium";
    src: url("../fonts/avenir-next/1a7c9181-cd24-4943-a9d9-d033189524e0.eot?#iefix");
    src: url("../fonts/avenir-next/1a7c9181-cd24-4943-a9d9-d033189524e0.eot?#iefix") format("eot"), url("../fonts/avenir-next/627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2") format("woff2"), url("../fonts/avenir-next/f26faddb-86cc-4477-a253-1e1287684336.woff") format("woff"), url("../fonts/avenir-next/63a74598-733c-4d0c-bd91-b01bffcd6e69.ttf") format("truetype"), url("../fonts/avenir-next/a89d6ad1-a04f-4a8f-b140-e55478dbea80.svg#a89d6ad1-a04f-4a8f-b140-e55478dbea80") format("svg");
}

@font-face {
    font-family: "AvenirNextLTW01-MediumI_721278";
    src: url("../fonts/avenir-next/77a9cdce-ea6a-4f94-95df-e6a54555545e.eot?#iefix");
    src: url("../fonts/avenir-next/77a9cdce-ea6a-4f94-95df-e6a54555545e.eot?#iefix") format("eot"), url("../fonts/avenir-next/3f380a53-50ea-4a62-95c5-d5d8dba03ab8.woff2") format("woff2"), url("../fonts/avenir-next/8344e877-560d-44d4-82eb-9822766676f9.woff") format("woff"), url("../fonts/avenir-next/b28b01d9-78c5-46c6-a30d-9a62c8f407c5.ttf") format("truetype"), url("../fonts/avenir-next/ed4d3c45-af64-4992-974b-c37cd12a9570.svg#ed4d3c45-af64-4992-974b-c37cd12a9570") format("svg");
}

@font-face {
    font-family: "Avenir Next LT W01 Bold";
    src: url("../fonts/avenir-next/dccb10af-07a2-404c-bfc7-7750e2716bc1.eot?#iefix");
    src: url("../fonts/avenir-next/dccb10af-07a2-404c-bfc7-7750e2716bc1.eot?#iefix") format("eot"), url("../fonts/avenir-next/14c73713-e4df-4dba-933b-057feeac8dd1.woff2") format("woff2"), url("../fonts/avenir-next/b8e906a1-f5e8-4bf1-8e80-82c646ca4d5f.woff") format("woff"), url("../fonts/avenir-next/890bd988-5306-43ff-bd4b-922bc5ebdeb4.ttf") format("truetype"), url("../fonts/avenir-next/ed104d8c-7f39-4e8b-90a9-4076be06b857.svg#ed104d8c-7f39-4e8b-90a9-4076be06b857") format("svg");
}

@font-face {
    font-family: "AvenirNextLTW01-BoldIta";
    src: url("../fonts/avenir-next/ac2d4349-4327-448f-9887-083a6a227a52.eot?#iefix");
    src: url("../fonts/avenir-next/ac2d4349-4327-448f-9887-083a6a227a52.eot?#iefix") format("eot"), url("../fonts/avenir-next/eaafcb26-9296-4a57-83e4-4243abc03db7.woff2") format("woff2"), url("../fonts/avenir-next/25e83bf5-47e3-4da7-98b1-755efffb0089.woff") format("woff"), url("../fonts/avenir-next/4112ec87-6ded-438b-83cf-aaff98f7e987.ttf") format("truetype"), url("../fonts/avenir-next/ab1835cb-df6f-4d8d-b8ee-3075f5ba758d.svg#ab1835cb-df6f-4d8d-b8ee-3075f5ba758d") format("svg");
}

* /
/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype Imaging and/or its suppliers. You may not attempt to copy, install,
redistribute, convert, modify or reverse engineer this font software. Please contact Monotype
Imaging with any questions regarding Web Fonts:  http://www.fonts.com
*/



/*--- New Baskerville -- */

@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=b260729b-7711-441f-8e53-c4dee8ef0a2d");
@font-face {
    font-family: "NewBaskervilleW01-SemiB_693026";
    src: url("../fonts/baskerville/1ab418e8-cd3d-454c-be22-85aa5cc90d74.eot?#iefix");
    src: url("../fonts/baskerville/1ab418e8-cd3d-454c-be22-85aa5cc90d74.eot?#iefix") format("eot"), url("../fonts/baskerville/d59e61da-5297-41e4-b67d-0a3e77500489.woff2") format("woff2"), url("../fonts/baskerville/f22486fb-f356-4eb0-bcbf-d0f46722f978.woff") format("woff"), url("../fonts/baskerville/309f3a7b-3fe2-4d8c-bfea-14a166fe35b8.ttf") format("truetype"), url("../fonts/baskerville/cd26ee46-92e6-4868-8d3f-28f84154d75c.svg#cd26ee46-92e6-4868-8d3f-28f84154d75c") format("svg");
}

@font-face {
    font-family: "NewBaskervilleW01-Bold";
    src: url("../fonts/baskerville/f90b1c79-b9a4-4a45-a4f6-f877c52ebcba.eot?#iefix");
    src: url("../fonts/baskerville/f90b1c79-b9a4-4a45-a4f6-f877c52ebcba.eot?#iefix") format("eot"), url("../fonts/baskerville/c0b7456d-2d10-4e8c-aeb4-7677db32b306.woff2") format("woff2"), url("../fonts/baskerville/2dbec691-8b23-42b6-8747-e63a64eaeda9.woff") format("woff"), url("../fonts/baskerville/16abdd47-d250-484d-b2b5-a7df18fb3709.ttf") format("truetype"), url("../fonts/baskerville/a97e3443-0e7f-4117-bf3f-f7c33cebcff7.svg#a97e3443-0e7f-4117-bf3f-f7c33cebcff7") format("svg");
}

@font-face {
    font-family: "NewBaskervilleW01-BoldI";
    src: url("../fonts/baskerville/e395168c-39bc-412b-9bf2-d30303020d01.eot?#iefix");
    src: url("../fonts/baskerville/e395168c-39bc-412b-9bf2-d30303020d01.eot?#iefix") format("eot"), url("../fonts/baskerville/f4a63053-f15c-4a82-abb9-81663c0e013c.woff2") format("woff2"), url("../fonts/baskerville/6ba2a901-c880-4703-b92b-361feffa5d8a.woff") format("woff"), url("../fonts/baskerville/0baeddeb-d1b2-4b3c-85e3-b3cee515f868.ttf") format("truetype"), url("../fonts/baskerville/abc10828-3eec-4e82-9ec4-be57bc4b5cea.svg#abc10828-3eec-4e82-9ec4-be57bc4b5cea") format("svg");
}

@font-face {
    font-family: "ITNBaskervilleW01-BdSCO";
    src: url("../fonts/baskerville/f635ccfc-9e4f-4b1e-af5d-68be16f5b91a.eot?#iefix");
    src: url("../fonts/baskerville/f635ccfc-9e4f-4b1e-af5d-68be16f5b91a.eot?#iefix") format("eot"), url("../fonts/baskerville/2c367279-8412-4ca4-824c-c73f1d08644a.woff2") format("woff2"), url("../fonts/baskerville/116c3c19-f200-40b7-945e-ab602aa822eb.woff") format("woff"), url("../fonts/baskerville/f41ef0c2-2713-459c-b740-edf819994bbb.ttf") format("truetype"), url("../fonts/baskerville/63bc6dff-e852-4cff-861b-41766a41cbb3.svg#63bc6dff-e852-4cff-861b-41766a41cbb3") format("svg");
}

html, body, p, b, strong {

    font-family: 'Arial', serif;

}

.character-quote {
    font-family: "NewBaskervilleW01-Bold", sans-serif;
}

h1, h2, h3, h2 b, h2 strong {
    font-family: 'ITNBaskervilleW01-BdSCO', serif;
}

div#characterNavigation a > div {
    font-family: "NewBaskervilleW01-SemiB_693026", sans-serif;
}

#watch #mainvideoLink > div:not(.playbtn), #extras #extrasLink > div:not(.playbtn),
#additionalinfoLink h1, #watchtrailer, #navigation a:not(.visuallyhidden) {

    font-family: 'Avenir Next LT W01 Bold', sans-serif;

}

#navigation a:not(.visuallyhidden) {

    font-family: 'Avenir Next LT W01 Bold', sans-serif;

}

.gallery-download {
    font-family: 'AvenirNextLTW01-Regular', 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/
---------------------------------*/

#characters .grid-container {
    position: relative;
    width: 100%;
    /* max-width: 1070px; */
    /* margin: 0 auto; */
    /* padding: 0 20px; */
    box-sizing: border-box;
    /* left: 50%; */
    /* margin-left: -35%; */
    /* top: 50%; */
    /* margin-top: calc(-3vh + -180px); */
    height: calc(90vh - 100px);
    margin: 5vh auto;
}

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

#characters .grid-container {
    width: 70%;
}

#characters .row {
    /* padding: 1.8vh 0px; */
    height: 13vh;
}

#characters .row:last-child {
    /* padding: 30px 0px 20px; */
}

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

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

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

#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: 100%;
        padding: 0;
    }
}

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

    .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: 101;
    height: 100%;
    width: 100%;
    background-color: rgb(0, 0, 0);
    opacity: 1;
    top: 0;
}

div#loader > div {
    position: absolute;
    top: 50%;
    margin-top: -100px;
    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: #FF001C solid 1px;
    margin: 50px auto 0px;
    max-width: 500px;
    opacity: 1;
    display: none;
}

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

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

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

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

/* ------------------------------
            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% {}
  }
    
}

*/

.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 {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

#logoHolder {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;

}

#logoHolder #logos {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;

    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

#homepageVideo-holder {
    -webkit-animation-delay: 6.5s;
    animation-delay: 6.5s;

    -webkit-animation-duration: 1.75s;
    animation-duration: 1.75s;
}

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

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

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

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

/* ------------------------------
        Diamond holder
---------------------------------*/


/* ---- Triangles */
body {
    position: relative;
}

.background-rhombus {
    height: 100vh;
    width: 100vw;
    margin: 0px auto;
    position: absolute;
    top: -50px;
    z-index: 0;
    opacity: 0.85;
}

.rhombus-content {
    position: absolute;
}

div[class^="box-"] {
    height: 49.8%;
    width: 99.8%;
    position: relative;
}

div[class^="box-"]:before,
div[class^="box-"]:after {
    content: '';
    display: black;
    position: absolute;
    top: 0;
}

div[class^="box-"]:before {
    left: 0;
}

div[class^="box-"]:after {
    right: 0;
}

div.box-1:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 50vh 50vw;
    border-color: transparent transparent #FFF3DE transparent;
}

div.box-1:after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50vh 0 0 50vw;
    border-color: transparent transparent transparent #FFF3DE;
}

div.box-2:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50vw 50vh 0;
    border-color: transparent #FFF3DE transparent transparent;
}

div.box-2:after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50vh 50vw 0 0;
    border-color: #FFF3DE transparent transparent transparent;
}

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


#panels-container {
    top: 100px;
    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%;
}

.skrollr-mobile .panel > .bgimage > .content {
    background-size: cover;
    transform-origin: top left;
}

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

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

.fallback .panel {
    height: calc(100vh - 100px)
}

#production.panel {
    height: auto;
}

.panel {
    overflow: hidden;
}

.characterslide .content {
    height: calc(100vh - 100px);
}

#home.panel {
    height: 100vh;
    margin-top: -100px;
}

.tablet #home.panel {
    height: (100vh - 20px);
    margin-top: -100px;
}

.characterslide .content {
    position: absolute;
    width: 100%;
    background-color: red;
}

.panel:not(#additional-info):not(#extras) .content:first-child {
    position: relative;
    width: 100%;
    height: calc(100vh - 100px);
}

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

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

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

#watch .content:after {
    content: '';
    display: block;
    height: 0px;
    box-shadow: 0px 0px 76px 31px rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 0;
    width: 100%;
}

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


.staticBackground {
    height: calc(100vh);
    width: 100%;
    position: absolute;
    background-position: center;
    background-size: cover;
    top: -100px;
}

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

#home .bgimage,
#characters .bgimage,
div#loader,
.fallback #home .bgimage .content,
.fallback #characters .bgimage .content,
.tablet #home .bgimage .content,
.tablet #characters .bgimage .content 
{
    background-image: url('../img/bg-home.jpg');
    background-position: center;
    background-size: cover;
}

.loaded div#loader, #home .bgimage {
    background-position: center;
}

.bgimage {}

#watch > .bgimage,
.fallback #watch .bgimage .content,
.tablet #watch .bgimage .content {
    background-image: url('../img/bg-watch.jpg');
    background-position: left center;
}

#synopsis .bgimage,
.fallback #synopsis .bgimage .content,
.tablet #synopsis .bgimage .content {
    background-image: url('../img/bg-synopsis.jpg');
}

.fallback #synopsis .bgimage .content,
.tablet #synopsis .bgimage .content {
    background-position: top center;
}

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

#production .bgimage,
#production .backgroundScrollHolder > div[class^="bgimage-"] {
    /*background-image: url('../img/bg-production-01.jpg');*/
    background-position: 20% 50%;
    z-index: 0;
}

#extras .bgimage,
#extras .staticBackground
{
    background-image: url('../img/bg-extras.jpg');
}

#extras .bgimage,
.skrollr-mobile #extras .bgimage .content {
    background-position: 20% 30%;
    height: auto;
}

#additional-info .bgimage,
#additional-info .staticBackground {
    background-image: url('../img/bg-additional-info.jpg');

}

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

.fallback #home .bgimage,
.fallback #watch .bgimage,
.fallback #synopsis .bgimage,
.fallback #characters .bgimage,
.tablet #home .bgimage,
.tablet #watch .bgimage,
.tablet #synopsis .bgimage,
.tablet #characters .bgimage {
    background-image: none;
}

.fallback #home .bgimage .content,
.tablet #home .bgimage .content,
.tablet.loaded #home .bgimage .content {
    background-position: bottom center;
}

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


/*   AbrahamWoodhull   */

#AbrahamWoodhull .character .bgimage {
    background-image: url('../img/bg-character-abraham.jpg');
    /* background-position: top center; */
}

#AbrahamWoodhull .actor .bgimage {
    background-image: url('../img/bg-character-abraham-actor.jpg');
}

/*   RichardWoodhull   */

#RichardWoodhull .character .bgimage {
    background-image: url('../img/bg-character-richard.jpg');
    /* background-position: top right; */
}

#RichardWoodhull .actor .bgimage {
    background-image: url('../img/bg-character-richard-actor.jpg');
}

/*   BenedictArnold   */

#BenedictArnold .character .bgimage {
    background-image: url('../img/bg-character-benedict.jpg');
    background-position: top left;
}

#BenedictArnold .actor .bgimage {
    background-image: url('../img/bg-character-benedict-actor.jpg');
}

/*   GeorgeWashington   */

#GeorgeWashington .character .bgimage {
    background-image: url('../img/bg-character-washington.jpg');
    /* background-position: top right; */
}

#GeorgeWashington .actor .bgimage {
    background-image: url('../img/bg-character-washington-actor.jpg');
}

/*   MajorHewlett   */

#MajorHewlett .character .bgimage {
    background-image: url('../img/bg-character-hewlett.jpg');
    background-position: top center;
}

#MajorHewlett .actor .bgimage {
    background-image: url('../img/bg-character-hewlett-actor.jpg');
}

/*   JohnAndre   */

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

#JohnAndre .actor .bgimage {
    background-image: url('../img/bg-character-andre-actor.jpg');
}

/*   BenTallmadge   */

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

#BenTallmadge .actor .bgimage {
    background-image: url('../img/bg-character-tallmadge-actor.jpg');
}

/*   AnnaStrong   */


#AnnaStrong .character .bgimage {
    background-image: url('../img/bg-character-anna.jpg');
    /* background-position: top center; */
}

#AnnaStrong .actor .bgimage {
    background-image: url('../img/bg-character-anna-actress.jpg');
}

/*   JohnSimcoe   */


#JohnSimcoe .character .bgimage {
    background-image: url('../img/bg-character-simcoe.jpg');
    background-position: top left;
}

#JohnSimcoe .actor .bgimage {
    background-image: url('../img/bg-character-simcoe-actor.jpg');
}

/*   PeggyShippen   */

#PeggyShippen .character .bgimage {
    background-image: url('../img/bg-character-peggy.jpg');
    /* background-position: top center; */
}

#PeggyShippen .actor .bgimage {
    background-image: url('../img/bg-character-peggy-actress.jpg');
}

/*   CalebBrewster   */

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

#CalebBrewster .actor .bgimage {
    background-image: url('../img/bg-character-caleb-actor.jpg');
}

/*   RobertTownsend   */

#RobertTownsend .character .bgimage {
    background-image: url('../img/bg-character-townsend.jpg');
    /* background-position: top center; */
}

#RobertTownsend .actor .bgimage {
    background-image: url('../img/bg-character-townsend-actor.jpg');
}

/*   JamesRivington   */

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

#JamesRivington .actor .bgimage {
    background-image: url('../img/bg-character-rivington-actor.jpg');
}

/*   RobertRogers   */

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

#RobertRogers .actor .bgimage {
    background-image: url('../img/bg-character-rogers-actor.jpg');
}

/*   MaryWoodhull   */

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

#MaryWoodhull .actor .bgimage {
    background-image: url('../img/bg-character-mary-actress.jpg');
}

/*   Abigail   */

#Abigail .character .bgimage {
    background-image: url('../img/bg-character-abigail.jpg');
    background-position: 30% 0%;
}

#Abigail .actor .bgimage {
    background-image: url('../img/bg-character-abigail-actress.jpg');
}

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




div#logoHolder {
    position: fixed;
    bottom: 20px;
    width: 30%;
    z-index: 4;
    right: 20px;
    max-width: 240px;
}

#home div#logoHolder {
    position: relative;
    bottom: auto;
    right: auto;
    max-width: none;
    width: 41%;
    margin: 2vh auto 0px;
    max-width: 380px;
    /* display: none; */
}

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

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

#home #secondaryLogo {
    width: 70%;
    margin-top: 0px;
    max-width: 300px;
}

#mainLogo {
    margin: 0px auto;
}

#home #mainLogo {
    width: 77%;
}

div#titleLogo {
    width: 80%;
    margin: 0px auto;
    /* background-image: url(../img/logo-america.png); */
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    max-width: 750px;
    min-width: 460px;
}

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

#home #watchtrailer {
    font-size: 1.1em;
    margin: 1.7vh auto;
    width: 12em;
    top: 0px;
    display: none;
}

.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: 0;
    -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;
    z-index: 1;
}

#home #watchtrailer p {
    padding: 6px 0px;
}

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

#watchtrailer:hover p span {
    color: #283a56;
    z-index: 3;
    position: relative;
}

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

#synopsis {
    /* -ms-transform: translateY(100%); */
    /* IE 9 */
    /*-webkit-transform: translateY(100%); */
    /* Chrome, Safari, Opera */
    /* transform: translateY(100%); */
    /* margin-top: 100%; */
}

#photos > .bgimage > .content {
    height: calc(100vh - 100px);
    width: 100%;
    background: red;
}

#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%;
    height: calc(275vh - 100px);
}

.characterslide .bgimage {
    height: 100%;
}

.characterslide .actor .bgimage {
    background-position: top right;
}

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

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

.characterslide .bgimage:before {
    width: 39.604%;
    left: 0;
}

.characterslide .bgimage:after,
.characterslide .character .right-bgimage {
    right: 0;
}

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

.panel .bgimage {}

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

.character .bgimage {
    background-position: top left;
    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;
}

/*#watch .content, */
#synopsis .content, #extras .content-wall, #additional-info .content {
    /* width: 80%; */
    /* position: absolute; */
    /* margin: 0px auto; */
    top: 7%;
    /* left: 10%; */
    /* text-align: center; */
    padding: 20px 0px;
    font-size: 1.1em;
}

#extras .content-wall {
    height: auto;
    padding: 80px 20px;
    position: relative;
    width: 85%;
    margin: 0px auto;
}

#extras .grid-container {
    margin: 0 auto;
}

#extras .extra, #extras .extra-window {
    padding: 10px 0px;
}

#extras .extra {
    display: table;
}

#extras .extra .columns {
    display: table-cell;
    float: none;
    vertical-align: top;
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#extras .extra .columns:not(.text) > div:first-child {
    padding-right: 20px;
}

#extras .extra .columns.text:last-child {
    padding-left: 20px;
}

#extras .extra .columns > div:last-child {
    /* padding-left:20px; */
}

#extras .extra .textholder,
#extras .extra-window .text {
    font-size: .8em;
    background-color: #7a97a9;
}

#extras .extra .textholder,
#extras .extra-window .text {
    padding: 20px;
}

#extras .extra-window .textholder,
#extras .extra .textholder {
    display: table;
    width: 100%;
}

#extras .extra-window .textholder > .arrow,
#extras .extra-window .textholder > p,
#extras .extra .up.textholder > .arrow,
#extras .extra .up.textholder > p,
#extras .extra .down.textholder > .arrow,
#extras .extra .down.textholder > p {
    display: table-cell;
}

.up.textholder > * {
    vertical-align: top;
}

.down.textholder > * {
    vertical-align: bottom;
}

.up.textholder > .arrow {
    text-align: center;
    top: 0%;
    position: relative;
    transform: translateY(25%);
}

.down.textholder > .arrow {
    text-align: center;
    bottom: 0%;
    position: relative;
    transform: translateY(-25%);
}

#extras .extra-window .text > .arrow:before {
    margin: 0px auto;
}

#extras .extra-window .text > p,
#extras .extra up.textholder > p {
    width: 80%;
}

#extras .row:not(.doubletext) .additionalImage {
    padding-top: 20px;
}

#extras .extra .columns.text:last-child .additionalImage:first-child {

    padding-bottom: 20px;
}

#extras .extra:not(.doubletext) .columns.text:first-child .additionalImage:last-child {
    padding-top: 20px;
}

#extras .extra.doubletext .columns.text > div:first-child {
    padding-bottom: 40px;
}

#extras .extra.doubletext .columns.text > .additionalImage:last-child {
    padding-top: 20px;
    position: relative;
}

#extras .extra.doubletext .columns.text .additionalImage:first-child {
    /* margin-bottom: 10px; */
}

#extras .extra.doubletext .columns.text .textholder:last-child {
    /* margin-top: 10px; */
}

#extras .extra .image {
    padding: 0;
}

#extras .extra .image .padding {
    background-size: cover;
    padding: 0px;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    position: absolute;
    /* left: -20px; */
}

#extras .extra .columns:first-child.image .padding {
    /* left: -20px; */
}

#extras .extra .columns:last-child.image .padding {
    left: 20px;
}

#extras .extra .arrow {
    text-align: center;
}

.arrow:before {
    content: '';
    display: inline-block;
    width: 104px;
    height: 30px;
    background-image: url(../img/arrow.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    transform-origin: center;
}

.up .arrow:before {
    /* border-style: solid;
            border-width: 0 10px 17.3px 10px;
            border-color: transparent transparent #ffffff transparent;*/
    transform: rotate(-90deg);
}

.left .arrow:before {
    /* border-style: solid;
            border-width: 10px 17.3px 10px 0;
            border-color: transparent #ffffff transparent transparent;*/
    transform: rotate(180deg);
}

.right .arrow:before {
    /*border-style: solid;
            border-width: 10px 0 10px 17.3px;
            border-color: transparent transparent transparent #ffffff;*/
    transform: rotate(0deg);
}

.down .arrow:before {
    /*border-style: solid;
            border-width: 17.3px 10px 0 10px;
            border-color: #ffffff transparent transparent transparent;*/
    transform: rotate(90deg);
}

.down .arrow {}

#extras .extra .imageholder {
    height: 100%;
    width: auto;
}

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

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

.tablet #home .content {

    top: 0;
    height: 100% !important;

}

.tablet #home .content .inner-content {
    padding-top: 100px;
    top: 8vh;
}

#production .content-wall {
    width: 60%;
    padding-top: 100px;
    max-width: 480px;
    margin: 0px auto;
    right: -14%;
    text-shadow: 0px 2px 9px rgba(0, 0, 0, 0.9);
    left: auto;
}

#extras .content {
    /* top: 41%; */
}

#additional-info .content-wall {
    padding-top: 40px;
    /* position: absolute; */
    /* height: auto; */
    /* max-height: 77%; */
    /* width: 60%; */
    /* min-width: 580px; */
    /* max-width: 500px; */
}

#synopsis .content {
    top: 0%;
}

/*#watch .content,*/
#watch .content-wall {
    width: 100%;
    position: absolute;
    margin: 0px auto;
    bottom: 2%;
    left: 0%;
    text-align: center;
    padding: 10px 0px;
    font-size: 1.2em;
    top: auto;
    height: auto;
}

#synopsis .content-wall {
    width: 46%;
    left: -4%;
    top: 6%;
    margin: 0px auto;
    text-shadow: 0px 2px 9px rgba(0, 0, 0, 0.9);
    min-width: 405px;
}

.content-wall {}

#synopsis .candleFlickers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-width: 1000px;
}


@media screen and (orientation:portrait) {
.tablet #synopsis .candleFlickers {
    width: 165%;
    left: -13.125%;
    /* height: 100%; */
    /* width: auto; */
    /* min-width: 20px; */
}
}
 @media screen and (orientation:landscape) {
 }



#synopsis div[class^='flicker'] .candle {

    border-radius: 50%;
    background-color: #FBE2D9;
    box-shadow: 0 0 0px 0px #FBE2D9;

    -webkit-animation: 8s flicker;
    animation: 8s flicker;

    -webkit-animation-iteration-count: 50;
    animation-iteration-count: 50;

    -o-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;

}

#synopsis .candleFlickers[playpause="play"] .candle {
    -o-animation-play-state: running;
    -ms-animation-play-state: running;
    -moz-animation-play-state: running;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

#synopsis .candleFlickers[playpause="pause"] .candle {
    -o-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

div[class^='flicker'] {
    position: absolute;
    /* margin-top: 100px; */
}

div[class^='flicker'] .candle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

.flickerOne {
    width: 2.1122%;
    height: 51px;
    top: 43.424%;
    left: 13.0693%;
}

.flickerTwo {
    width: 30px;
    height: 36px;
    top: 54.8611%;
    left: 11.4191%;
}

.flickerThree {
    width: 1.980%;
    height: 36px;
    top: 53.2675%;
    left: 13.0693%;
}

.flickerFour, .flickerFive, .flickerSix {
    width: 0.33%;
    height: 25px;
    top: 29.8611%;
}

.flickerFour {
    left: 67.1287%;
}

.flickerFive {
    left: 70.297%;
}

.flickerSix {
    left: 73.333%;
}

@-webkit-keyframes flicker {
    5% {
        opacity: 0;
        box-shadow: 0 0 1.32px 0.66px #fcd4c7;
        height: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    9% {
        opacity: 0;
        box-shadow: 0 0 2.64px 1.32px #fcd4c7;
        height: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    62% {
        opacity: 0;
        box-shadow: 0 0 3.96px 1.98px #fcd0c2;
        height: 0;
        -webkit-transform: rotate(0.5deg);
        transform: rotate(0.5deg);
    }

    93% {
        opacity: 0;
        box-shadow: 0 0 5.28px 2.64px #fcd0c2;
        height: 0;
        -webkit-transform: rotate(0.5deg);
        transform: rotate(0.5deg);
    }

    57% {
        opacity: 0;
        box-shadow: 0 0 6.6px 3.3px #fbcdbd;
        height: 0;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    97% {
        opacity: 0;
        box-shadow: 0 0 7.92px 3.96px #fbcdbd;
        height: 0;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    41% {
        opacity: 0;
        box-shadow: 0 0 9.24px 4.62px #fbcdbd;
        height: 0;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    77% {
        opacity: 0;
        box-shadow: 0 0 10.56px 5.28px #fbc9b8;
        height: 0;
        -webkit-transform: rotate(1.5deg);
        transform: rotate(1.5deg);
    }

    32% {
        opacity: 0;
        box-shadow: 0 0 11.88px 5.94px #fbc9b8;
        height: 0;
        -webkit-transform: rotate(1.5deg);
        transform: rotate(1.5deg);
    }

    41% {
        opacity: 0;
        box-shadow: 0 0 13.2px 6.6px #fbc5b4;
        height: 0;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    50% {
        opacity: 0;
        box-shadow: 0 0 14.52px 7.26px #fbc5b4;
        height: 0;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    94% {
        opacity: 0;
        box-shadow: 0 0 15.84px 7.92px #fbc5b4;
        height: 0;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    36% {
        opacity: 0;
        box-shadow: 0 0 17.16px 8.58px #fbc1af;
        height: 0;
        -webkit-transform: rotate(2.5deg);
        transform: rotate(2.5deg);
    }

    43% {
        opacity: 0;
        box-shadow: 0 0 18.48px 9.24px #fbc1af;
        height: 0;
        -webkit-transform: rotate(2.5deg);
        transform: rotate(2.5deg);
    }

    91% {
        opacity: 0;
        box-shadow: 0 0 19.8px 9.9px #fabeaa;
        height: 0;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    53% {
        opacity: 0;
        box-shadow: 0 0 21.12px 10.56px #fabeaa;
        height: 0;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    61% {
        opacity: 0;
        box-shadow: 0 0 22.44px 11.22px #fabeaa;
        height: 0;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    30% {
        opacity: 0;
        box-shadow: 0 0 23.76px 11.88px #fabaa5;
        height: 0;
        -webkit-transform: rotate(3.5deg);
        transform: rotate(3.5deg);
    }

    31% {
        opacity: 0;
        box-shadow: 0 0 25.08px 12.54px #fabaa5;
        height: 0;
        -webkit-transform: rotate(3.5deg);
        transform: rotate(3.5deg);
    }

    95% {
        opacity: 0;
        box-shadow: 0 0 26.4px 13.2px #fab6a0;
        height: 0;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    56% {
        opacity: 0;
        box-shadow: 0 0 27.72px 13.86px #fab6a0;
        height: 0;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    3% {
        opacity: 0;
        box-shadow: 0 0 29.04px 14.52px #fab6a0;
        height: 0;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    8% {
        opacity: 0;
        box-shadow: 0 0 30.36px 15.18px #fab39b;
        height: 0;
        -webkit-transform: rotate(4.5deg);
        transform: rotate(4.5deg);
    }

    87% {
        opacity: 0;
        box-shadow: 0 0 31.68px 15.84px #fab39b;
        height: 0;
        -webkit-transform: rotate(4.5deg);
        transform: rotate(4.5deg);
    }

    86% {
        opacity: 0;
        box-shadow: 0 0 33px 16.5px #f9af97;
        height: 0;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    12% {
        opacity: 0.23;
        box-shadow: 0 0 3.96px 1.98px #fcd0c2;
        height: 38px;
        -webkit-transform: rotate(0.5deg);
        transform: rotate(0.5deg);
    }

    22% {
        opacity: 0.23;
        box-shadow: 0 0 7.92px 3.96px #fbcdbd;
        height: 36px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    2% {
        opacity: 0.23;
        box-shadow: 0 0 11.88px 5.94px #fbc9b8;
        height: 34px;
        -webkit-transform: rotate(1.5deg);
        transform: rotate(1.5deg);
    }

    36% {
        opacity: 0.23;
        box-shadow: 0 0 15.84px 7.92px #fbc5b4;
        height: 32px;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    23% {
        opacity: 0.23;
        box-shadow: 0 0 19.8px 9.9px #fabeaa;
        height: 28px;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    68% {
        opacity: 0.23;
        box-shadow: 0 0 23.76px 11.88px #fabaa5;
        height: 26px;
        -webkit-transform: rotate(3.5deg);
        transform: rotate(3.5deg);
    }

    63% {
        opacity: 0.23;
        box-shadow: 0 0 27.72px 13.86px #fab6a0;
        height: 24px;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    1% {
        opacity: 0.23;
        box-shadow: 0 0 31.68px 15.84px #fab39b;
        height: 22px;
        -webkit-transform: rotate(4.5deg);
        transform: rotate(4.5deg);
    }

    37% {
        opacity: 0.4;
        box-shadow: 0 0 1.32px 0.66px #fcd4c7;
        height: 40px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    29% {
        opacity: 0.4;
        box-shadow: 0 0 2.64px 1.32px #fcd4c7;
        height: 40px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    2% {
        opacity: 0.4;
        box-shadow: 0 0 3.96px 1.98px #fcd0c2;
        height: 38px;
        -webkit-transform: rotate(0.5deg);
        transform: rotate(0.5deg);
    }

    36% {
        opacity: 0.4;
        box-shadow: 0 0 5.28px 2.64px #fcd0c2;
        height: 38px;
        -webkit-transform: rotate(0.5deg);
        transform: rotate(0.5deg);
    }

    12% {
        opacity: 0.4;
        box-shadow: 0 0 6.6px 3.3px #fbcdbd;
        height: 36px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    78% {
        opacity: 0.4;
        box-shadow: 0 0 7.92px 3.96px #fbcdbd;
        height: 36px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    40% {
        opacity: 0.4;
        box-shadow: 0 0 9.24px 4.62px #fbcdbd;
        height: 36px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    19% {
        opacity: 0.4;
        box-shadow: 0 0 10.56px 5.28px #fbc9b8;
        height: 34px;
        -webkit-transform: rotate(1.5deg);
        transform: rotate(1.5deg);
    }

    32% {
        opacity: 0.4;
        box-shadow: 0 0 11.88px 5.94px #fbc9b8;
        height: 34px;
        -webkit-transform: rotate(1.5deg);
        transform: rotate(1.5deg);
    }

    71% {
        opacity: 0.4;
        box-shadow: 0 0 13.2px 6.6px #fbc5b4;
        height: 32px;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    75% {
        opacity: 0.4;
        box-shadow: 0 0 14.52px 7.26px #fbc5b4;
        height: 32px;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    99% {
        opacity: 0.4;
        box-shadow: 0 0 15.84px 7.92px #fbc5b4;
        height: 32px;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    90% {
        opacity: 0.4;
        box-shadow: 0 0 17.16px 8.58px #fbc1af;
        height: 30px;
        -webkit-transform: rotate(2.5deg);
        transform: rotate(2.5deg);
    }

    25% {
        opacity: 0.4;
        box-shadow: 0 0 18.48px 9.24px #fbc1af;
        height: 30px;
        -webkit-transform: rotate(2.5deg);
        transform: rotate(2.5deg);
    }

    91% {
        opacity: 0.4;
        box-shadow: 0 0 19.8px 9.9px #fabeaa;
        height: 28px;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    67% {
        opacity: 0.4;
        box-shadow: 0 0 21.12px 10.56px #fabeaa;
        height: 28px;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    65% {
        opacity: 0.4;
        box-shadow: 0 0 22.44px 11.22px #fabeaa;
        height: 28px;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    39% {
        opacity: 0.4;
        box-shadow: 0 0 23.76px 11.88px #fabaa5;
        height: 26px;
        -webkit-transform: rotate(3.5deg);
        transform: rotate(3.5deg);
    }

    97% {
        opacity: 0.4;
        box-shadow: 0 0 25.08px 12.54px #fabaa5;
        height: 26px;
        -webkit-transform: rotate(3.5deg);
        transform: rotate(3.5deg);
    }

    7% {
        opacity: 0.4;
        box-shadow: 0 0 26.4px 13.2px #fab6a0;
        height: 24px;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    35% {
        opacity: 0.4;
        box-shadow: 0 0 27.72px 13.86px #fab6a0;
        height: 24px;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    81% {
        opacity: 0.4;
        box-shadow: 0 0 29.04px 14.52px #fab6a0;
        height: 24px;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    60% {
        opacity: 0.4;
        box-shadow: 0 0 30.36px 15.18px #fab39b;
        height: 22px;
        -webkit-transform: rotate(4.5deg);
        transform: rotate(4.5deg);
    }

    66% {
        opacity: 0.4;
        box-shadow: 0 0 31.68px 15.84px #fab39b;
        height: 22px;
        -webkit-transform: rotate(4.5deg);
        transform: rotate(4.5deg);
    }

    69% {
        opacity: 0.4;
        box-shadow: 0 0 33px 16.5px #f9af97;
        height: 20px;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    17% {
        opacity: 0.32;
        box-shadow: 0 0 3.3px 1.65px #fcd0c2;
        height: 38px;
        -webkit-transform: rotate(0.5deg);
        transform: rotate(0.5deg);
    }

    43% {
        opacity: 0.32;
        box-shadow: 0 0 6.6px 3.3px #fbcdbd;
        height: 36px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    72% {
        opacity: 0.32;
        box-shadow: 0 0 9.9px 4.95px #fbc9b8;
        height: 34px;
        -webkit-transform: rotate(1.5deg);
        transform: rotate(1.5deg);
    }

    15% {
        opacity: 0.32;
        box-shadow: 0 0 13.2px 6.6px #fbc5b4;
        height: 32px;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    72% {
        opacity: 0.32;
        box-shadow: 0 0 16.5px 8.25px #fbc1af;
        height: 30px;
        -webkit-transform: rotate(2.5deg);
        transform: rotate(2.5deg);
    }

    40% {
        opacity: 0.32;
        box-shadow: 0 0 19.8px 9.9px #fabeaa;
        height: 28px;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    24% {
        opacity: 0.32;
        box-shadow: 0 0 23.1px 11.55px #fabaa5;
        height: 26px;
        -webkit-transform: rotate(3.5deg);
        transform: rotate(3.5deg);
    }

    33% {
        opacity: 0.32;
        box-shadow: 0 0 26.4px 13.2px #fab6a0;
        height: 24px;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    24% {
        opacity: 0.32;
        box-shadow: 0 0 29.7px 14.85px #fab39b;
        height: 22px;
        -webkit-transform: rotate(4.5deg);
        transform: rotate(4.5deg);
    }

    32% {
        opacity: 0.32;
        box-shadow: 0 0 33px 16.5px #f9af97;
        height: 20px;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
}

@keyframes flicker {
    5% {
        opacity: 0;
        box-shadow: 0 0 1.32px 0.66px #fcd4c7;
        height: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    9% {
        opacity: 0;
        box-shadow: 0 0 2.64px 1.32px #fcd4c7;
        height: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    62% {
        opacity: 0;
        box-shadow: 0 0 3.96px 1.98px #fcd0c2;
        height: 0;
        -webkit-transform: rotate(0.5deg);
        transform: rotate(0.5deg);
    }

    93% {
        opacity: 0;
        box-shadow: 0 0 5.28px 2.64px #fcd0c2;
        height: 0;
        -webkit-transform: rotate(0.5deg);
        transform: rotate(0.5deg);
    }

    57% {
        opacity: 0;
        box-shadow: 0 0 6.6px 3.3px #fbcdbd;
        height: 0;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    97% {
        opacity: 0;
        box-shadow: 0 0 7.92px 3.96px #fbcdbd;
        height: 0;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    41% {
        opacity: 0;
        box-shadow: 0 0 9.24px 4.62px #fbcdbd;
        height: 0;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    77% {
        opacity: 0;
        box-shadow: 0 0 10.56px 5.28px #fbc9b8;
        height: 0;
        -webkit-transform: rotate(1.5deg);
        transform: rotate(1.5deg);
    }

    32% {
        opacity: 0;
        box-shadow: 0 0 11.88px 5.94px #fbc9b8;
        height: 0;
        -webkit-transform: rotate(1.5deg);
        transform: rotate(1.5deg);
    }

    41% {
        opacity: 0;
        box-shadow: 0 0 13.2px 6.6px #fbc5b4;
        height: 0;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    50% {
        opacity: 0;
        box-shadow: 0 0 14.52px 7.26px #fbc5b4;
        height: 0;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    94% {
        opacity: 0;
        box-shadow: 0 0 15.84px 7.92px #fbc5b4;
        height: 0;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    36% {
        opacity: 0;
        box-shadow: 0 0 17.16px 8.58px #fbc1af;
        height: 0;
        -webkit-transform: rotate(2.5deg);
        transform: rotate(2.5deg);
    }

    43% {
        opacity: 0;
        box-shadow: 0 0 18.48px 9.24px #fbc1af;
        height: 0;
        -webkit-transform: rotate(2.5deg);
        transform: rotate(2.5deg);
    }

    91% {
        opacity: 0;
        box-shadow: 0 0 19.8px 9.9px #fabeaa;
        height: 0;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    53% {
        opacity: 0;
        box-shadow: 0 0 21.12px 10.56px #fabeaa;
        height: 0;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    61% {
        opacity: 0;
        box-shadow: 0 0 22.44px 11.22px #fabeaa;
        height: 0;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    30% {
        opacity: 0;
        box-shadow: 0 0 23.76px 11.88px #fabaa5;
        height: 0;
        -webkit-transform: rotate(3.5deg);
        transform: rotate(3.5deg);
    }

    31% {
        opacity: 0;
        box-shadow: 0 0 25.08px 12.54px #fabaa5;
        height: 0;
        -webkit-transform: rotate(3.5deg);
        transform: rotate(3.5deg);
    }

    95% {
        opacity: 0;
        box-shadow: 0 0 26.4px 13.2px #fab6a0;
        height: 0;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    56% {
        opacity: 0;
        box-shadow: 0 0 27.72px 13.86px #fab6a0;
        height: 0;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    3% {
        opacity: 0;
        box-shadow: 0 0 29.04px 14.52px #fab6a0;
        height: 0;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    8% {
        opacity: 0;
        box-shadow: 0 0 30.36px 15.18px #fab39b;
        height: 0;
        -webkit-transform: rotate(4.5deg);
        transform: rotate(4.5deg);
    }

    87% {
        opacity: 0;
        box-shadow: 0 0 31.68px 15.84px #fab39b;
        height: 0;
        -webkit-transform: rotate(4.5deg);
        transform: rotate(4.5deg);
    }

    86% {
        opacity: 0;
        box-shadow: 0 0 33px 16.5px #f9af97;
        height: 0;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    12% {
        opacity: 0.23;
        box-shadow: 0 0 3.96px 1.98px #fcd0c2;
        height: 38px;
        -webkit-transform: rotate(0.5deg);
        transform: rotate(0.5deg);
    }

    22% {
        opacity: 0.23;
        box-shadow: 0 0 7.92px 3.96px #fbcdbd;
        height: 36px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    2% {
        opacity: 0.23;
        box-shadow: 0 0 11.88px 5.94px #fbc9b8;
        height: 34px;
        -webkit-transform: rotate(1.5deg);
        transform: rotate(1.5deg);
    }

    36% {
        opacity: 0.23;
        box-shadow: 0 0 15.84px 7.92px #fbc5b4;
        height: 32px;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    23% {
        opacity: 0.23;
        box-shadow: 0 0 19.8px 9.9px #fabeaa;
        height: 28px;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    68% {
        opacity: 0.23;
        box-shadow: 0 0 23.76px 11.88px #fabaa5;
        height: 26px;
        -webkit-transform: rotate(3.5deg);
        transform: rotate(3.5deg);
    }

    63% {
        opacity: 0.23;
        box-shadow: 0 0 27.72px 13.86px #fab6a0;
        height: 24px;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    1% {
        opacity: 0.23;
        box-shadow: 0 0 31.68px 15.84px #fab39b;
        height: 22px;
        -webkit-transform: rotate(4.5deg);
        transform: rotate(4.5deg);
    }

    37% {
        opacity: 0.4;
        box-shadow: 0 0 1.32px 0.66px #fcd4c7;
        height: 40px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    29% {
        opacity: 0.4;
        box-shadow: 0 0 2.64px 1.32px #fcd4c7;
        height: 40px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    2% {
        opacity: 0.4;
        box-shadow: 0 0 3.96px 1.98px #fcd0c2;
        height: 38px;
        -webkit-transform: rotate(0.5deg);
        transform: rotate(0.5deg);
    }

    36% {
        opacity: 0.4;
        box-shadow: 0 0 5.28px 2.64px #fcd0c2;
        height: 38px;
        -webkit-transform: rotate(0.5deg);
        transform: rotate(0.5deg);
    }

    12% {
        opacity: 0.4;
        box-shadow: 0 0 6.6px 3.3px #fbcdbd;
        height: 36px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    78% {
        opacity: 0.4;
        box-shadow: 0 0 7.92px 3.96px #fbcdbd;
        height: 36px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    40% {
        opacity: 0.4;
        box-shadow: 0 0 9.24px 4.62px #fbcdbd;
        height: 36px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    19% {
        opacity: 0.4;
        box-shadow: 0 0 10.56px 5.28px #fbc9b8;
        height: 34px;
        -webkit-transform: rotate(1.5deg);
        transform: rotate(1.5deg);
    }

    32% {
        opacity: 0.4;
        box-shadow: 0 0 11.88px 5.94px #fbc9b8;
        height: 34px;
        -webkit-transform: rotate(1.5deg);
        transform: rotate(1.5deg);
    }

    71% {
        opacity: 0.4;
        box-shadow: 0 0 13.2px 6.6px #fbc5b4;
        height: 32px;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    75% {
        opacity: 0.4;
        box-shadow: 0 0 14.52px 7.26px #fbc5b4;
        height: 32px;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    99% {
        opacity: 0.4;
        box-shadow: 0 0 15.84px 7.92px #fbc5b4;
        height: 32px;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    90% {
        opacity: 0.4;
        box-shadow: 0 0 17.16px 8.58px #fbc1af;
        height: 30px;
        -webkit-transform: rotate(2.5deg);
        transform: rotate(2.5deg);
    }

    25% {
        opacity: 0.4;
        box-shadow: 0 0 18.48px 9.24px #fbc1af;
        height: 30px;
        -webkit-transform: rotate(2.5deg);
        transform: rotate(2.5deg);
    }

    91% {
        opacity: 0.4;
        box-shadow: 0 0 19.8px 9.9px #fabeaa;
        height: 28px;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    67% {
        opacity: 0.4;
        box-shadow: 0 0 21.12px 10.56px #fabeaa;
        height: 28px;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    65% {
        opacity: 0.4;
        box-shadow: 0 0 22.44px 11.22px #fabeaa;
        height: 28px;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    39% {
        opacity: 0.4;
        box-shadow: 0 0 23.76px 11.88px #fabaa5;
        height: 26px;
        -webkit-transform: rotate(3.5deg);
        transform: rotate(3.5deg);
    }

    97% {
        opacity: 0.4;
        box-shadow: 0 0 25.08px 12.54px #fabaa5;
        height: 26px;
        -webkit-transform: rotate(3.5deg);
        transform: rotate(3.5deg);
    }

    7% {
        opacity: 0.4;
        box-shadow: 0 0 26.4px 13.2px #fab6a0;
        height: 24px;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    35% {
        opacity: 0.4;
        box-shadow: 0 0 27.72px 13.86px #fab6a0;
        height: 24px;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    81% {
        opacity: 0.4;
        box-shadow: 0 0 29.04px 14.52px #fab6a0;
        height: 24px;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    60% {
        opacity: 0.4;
        box-shadow: 0 0 30.36px 15.18px #fab39b;
        height: 22px;
        -webkit-transform: rotate(4.5deg);
        transform: rotate(4.5deg);
    }

    66% {
        opacity: 0.4;
        box-shadow: 0 0 31.68px 15.84px #fab39b;
        height: 22px;
        -webkit-transform: rotate(4.5deg);
        transform: rotate(4.5deg);
    }

    69% {
        opacity: 0.4;
        box-shadow: 0 0 33px 16.5px #f9af97;
        height: 20px;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    17% {
        opacity: 0.32;
        box-shadow: 0 0 3.3px 1.65px #fcd0c2;
        height: 38px;
        -webkit-transform: rotate(0.5deg);
        transform: rotate(0.5deg);
    }

    43% {
        opacity: 0.32;
        box-shadow: 0 0 6.6px 3.3px #fbcdbd;
        height: 36px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }

    72% {
        opacity: 0.32;
        box-shadow: 0 0 9.9px 4.95px #fbc9b8;
        height: 34px;
        -webkit-transform: rotate(1.5deg);
        transform: rotate(1.5deg);
    }

    15% {
        opacity: 0.32;
        box-shadow: 0 0 13.2px 6.6px #fbc5b4;
        height: 32px;
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    72% {
        opacity: 0.32;
        box-shadow: 0 0 16.5px 8.25px #fbc1af;
        height: 30px;
        -webkit-transform: rotate(2.5deg);
        transform: rotate(2.5deg);
    }

    40% {
        opacity: 0.32;
        box-shadow: 0 0 19.8px 9.9px #fabeaa;
        height: 28px;
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg);
    }

    24% {
        opacity: 0.32;
        box-shadow: 0 0 23.1px 11.55px #fabaa5;
        height: 26px;
        -webkit-transform: rotate(3.5deg);
        transform: rotate(3.5deg);
    }

    33% {
        opacity: 0.32;
        box-shadow: 0 0 26.4px 13.2px #fab6a0;
        height: 24px;
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    24% {
        opacity: 0.32;
        box-shadow: 0 0 29.7px 14.85px #fab39b;
        height: 22px;
        -webkit-transform: rotate(4.5deg);
        transform: rotate(4.5deg);
    }

    32% {
        opacity: 0.32;
        box-shadow: 0 0 33px 16.5px #f9af97;
        height: 20px;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
}

#extras .content {
    /* width: 100%; */
}

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

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


#synopsis .content p {
    margin: 12px 0px;
    font-size: 0.93em;
    text-align: left;
    line-height: 1.6em;
    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: #c3b981;
    text-decoration: none;
    font-size: 1.3em;
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.1em;
    display: block;
    width: 500px;
    margin: 0px auto;
    /* max-width: 510px; */
    cursor: pointer;
    position: relative;
}

#synopsis h1 {
    color: #fff3df;
}

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

#extras {
    height: auto;
}

#extras #extrasLink h1 {

    border-bottom: none;

    width: 100%;

    max-width: 700px;
}

.panel h1 {
    /* text-shadow: 1px 1px 1px rgba(0,0,0,0.6); */
}

#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: 500px;
    width: auto;
    text-align: left;
}

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

#production h1 {
    display: none;
}

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

#additional-info h1,
#watch h1 {
    border-bottom: none;
    color: #d6dad9;
    display: inline-block;
    vertical-align: middle;
    width: 210px;
}

#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-bottom: 40px;
    width: 90%;
    margin: 0px auto;
}

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

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

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

#production .producer p {
    font-size: .9em;
}

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

#production .producer h2 span.red {

    color: #fff3df;

    font-size: 0.8em;

    /* padding-top: 0.5em; */
}

#additionalinfoLink {
    padding: 20px 0px 20px 0px;
    min-width: 380px;
    font-size: 0.9em;
    width: 370px;
    text-align: center;
}

#additional-info .innercontent {
    padding-top: 10px;
    padding-bottom: 50px;
    color: #d6dad9;
    width: 70%;
    margin: 0px auto;
}

#additional-info .innercontent .grid-container {
   <!-- text-transform: uppercase; -->
}

#additional-info h4 {
    font-size: 1em;
}

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

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

#additional-info .innercontent a {
    color: #fff;
}

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

#watch #videoSelection a,
#watch #videoSelection > div {
    display: inline-block;
    height: 135px;
    width: 230px;
    /* background-color:white; */
    margin: 14px 14px;
    position: relative;
    cursor: pointer;
    border: #7896A6 solid 1px;
}

#watch #videoSelection a .bgimage,
#watch #videoSelection > div .bgimage,
#watch #videoSelection > div .bgimage:after,
#mainvideoLink .bgimage,
#additionalinfoLink .bgimage,
#slideshow-holder .slideimage .bgimage,
#slideshow-holder .slideimage .bgimage:after {
    display: block;
    background-size: 113%;
    background-position: center center;
    position: absolute;
    z-index: 1;
}

#watch #videoSelection > div .bgimage {
    height: 100%;
}

#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 {
    -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: 130%;
}

#slideshow-holder .slideimage:hover .bgimage {
    margin: 0px;
    top: 0px;
    position: relative;
}

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

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

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

#watch #videoSelection div#video-3 .bgimage {
    background-image: url('../img/watch-thumb-3.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: 1;
}

.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 .character .inner-content,
#home .inner-content {
    left: auto;
    right: 0px;
    position: absolute;
}

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

.inner-content {}

#home #homepageVideo-holder {
    /*position: relative;
            width: 100%;
            height: 90%;
            top: 0;
            left: 0;
            z-index: 5;*/
}

#home #homepageVideo-holder {
    position: relative;
    width: 100%;
    height: 90%;
    top: 0;
    left: 0;
    z-index: 5;
    margin: 0px auto;
}

#homepageVideo-holder .shadow {
    width: 100%;
    height: 87%;
    position: absolute;
    top: 0;
    z-index: -1; /* background-color: rgba(0,0,0,0.8); */
    /* box-shadow: 0px 12vh 10vh 8vh rgba(0,0,0,0.8); */
}

#homepageVideo-holder #homepageVideo, #watchLink {
    height: auto;
    position: relative;
    z-index: 1;
    margin: 2vh auto;
    display: block;
    text-transform: uppercase;
}

#homepageVideo-holder #homepageVideo > * , #watchLink > * {
    display: block;
    position: relative;
}

#homepageVideo-holder #homepageVideo > p, #watchLink > p {
    width: 100%;
    text-align: center;
    font-size: 1.6em;
    margin: 0px;
    padding: 12px 0px;
}

a#watchLink {
    color: #fff;
    text-decoration: none;
    text-shadow: 3px 3px 9px rgba(0, 0, 0, 0.9);
}

#homepageVideo-holder #homepageVideo > .playbtn, #watchLink > .playbtn {
    position: relative;
    top: auto;
    left: auto;
    height: 80px;
    width: 80px;
    margin: 0 auto;
    border-color: #fff;
    cursor: pointer;
}

#homepageVideo-holder #homepageVideo > .playbtn:after, #watchLink > .playbtn:after {

    border-top: 21px solid transparent;

    border-bottom: 21px solid transparent;

    border-left: 34px solid #FFFFFF;

    margin-top: -21px;

    margin-left: -13px;
}

#home #scrolltext {
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    font-size: .85em;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    padding: 0px 0px 10px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+99&0+0,0.65+55 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 55%, rgba(0, 0, 0, 0.65) 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 55%, rgba(0, 0, 0, 0.65) 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 55%, rgba(0, 0, 0, 0.65) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0 ); /* IE6-9 */
    padding-bottom: 20px;
}

.characterslide .inner-content > div:not(.right-bgimage) {
    width: 78%;
    top: 2vh;
    margin: 0px auto;
    font-size: 0.9em;
    line-height: 1.5em;
    padding-left: 20px;
    height: 100%;
    max-height: 77%;
    position: relative;
}

.actor .inner-content > div:not(.right-bgimage) {
    top: 50px;
    top: 8vh;
}

.characterslide .inner-content div.text {
    text-align: left;
    margin: 0px 0px 20px;
    overflow: hidden;
}

div.scrollwithmovement {
    min-height: 150px;
    position: relative;
}

.fallback .characterslide .inner-content div.text > span {
    overflow: scroll !important;
    -webkit-overflow-scroll: touch;
    height: 100%;
}

.characterslide .scrollwithmovement {
    height: 36vh;
    max-height: 36vh !important;
}

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

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

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

.character-quote {
    color: #939598;
    font-size: 1.4em;
    line-height: 1.5em;
    max-width: 350px;
    margin: 0 auto;
}

.character-quote > span {
    display: block;
    margin: 20px 0px 10px;
    position: relative;
}

.character-quote > span:before,
.character-quote > span:after {
    font-size: 3em;
    position: absolute;
}

.character-quote > span:before {
    content: '“';
    top: 0px;
    margin-left: -0.55em;
}

.character-quote > span:after {
    content: '”';
    bottom: -6px;
    top: auto;
    margin-left: .125em;
}

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

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

.skrollr-mobile div.scrollwithmovement {
    overflow-y: scroll;

}

#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: #fff3df;
    line-height: 1em;
    text-transform: uppercase;
    text-align: left;
}

.characterslide .character .inner-content h3 {
    padding-top: 0.4em;
}

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

.characterslide .inner-content h3 span:not(.lowercase) {
    display: block;
    font-size: 0.6em;
}

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

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

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

/*#characters .content{
position: relative;bottom: -12%;
left: 0%;
height: 77%;width: 93%;
margin:0px auto;max-width: 850px;top: auto;}*/

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

#characters .characterlink:hover .hoverImage {
    opacity: 1;
    max-height: 100%;
}

#characters .characterlink {
    display: inline-block;
    text-decoration: none;
    position: relative;
    overflow: visible;
    z-index: 2;
    height: 90%;
    vertical-align: middle;
    text-align: center;
    padding: 1.125vh 0;
    background-position: center;
    background-size: 0% 0%;
    background-repeat: no-repeat;
}

#characters .characterlink:hover {
    z-index: 1;
    background-size: auto 100%;
}

#characters .characterlink .imageholder {
    position: absolute;
    width: 100%;
    height: 100%;
    /* margin-top: -30px; */
    top: 0;
    left: 0px;
}

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

.emptyImage > img {
    display: block;
}

.characterlink {}

#characters .characterlink h2 {
    margin: 0px auto;
    text-align: center;
    opacity: 1;
    display: inline-block;
    margin: 1.75vh auto;
    color: #4b2c19;
    font-size: 1.3em;
    vertical-align: middle;
}

#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) {
    display: block;
    font-size: 0.8em;
}

#characters .characterlink > div {
    padding: 2px;
    -moz-box-sizing: border-box;
    /* -webkit-box-sizing: border-box; */
    /* box-sizing: border-box; */
    display: table-cell;
}

/* -- 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: absolute;
    left: 50%;
    width: 25%;
    bottom: 50px;
    margin-left: -12.5%;
    height: 100px;
    z-index: 100;
    opacity: 1;
    text-align: center;
    display: none;
}

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

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

#characterNav .galleryicon {
    width: 40px;
    margin: 10px auto;
    height: 25px;
}

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

#photosicon .st1 {
    fill: white;
}

#characterNav a {
    opacity: .4;
}

#characterNav . {}

#characterNav a:hover {
    opacity: 1;
}

#navigation {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 100;
    background-color: #241f21;
    height: 100px;
    display: block;
}

#navigation .table {
    width: 100%;
}

#navigation .table nav {
    position: initial;
    margin-top: initial;
    top: initial;
    z-index: initial;
    margin: 0 auto;
    width: 87%;
    position: relative;
    /* padding: 20px 0; */
    vertical-align: middle;
}

#navigation #menuLogo > div {
    max-width: 140px;
    padding: 0px 4px;
    margin: 0 auto;
    min-width: 110px;
    position: relative;
    left: 5px;
}

#navigation .table > * {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    height: 76px;
}

#navigation .table nav,
div#characterNavigation {
    -webkit-transition: all .25s;
    transition: all .25s;
}

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;
    display: table;
    width: 100%;
}

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

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

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

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

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

}

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

#navigation[active="no"] .table {
    padding: 7px 0;
}

#navigation[active="yes"] .table {
    padding: 0px 0;
}

#navigation[active="no"] div#characterNavigation {
    opacity: 0;
    top: 120%;
    max-height: 0%;
    display: none;
}

#navigation[active="yes"] div#characterNavigation {
    opacity: 1;
    top: 0%;
    max-height: 100%;
    display: block;
}

#navigation div#characterNavigation a[active="no"]:before {
    background-color: #6d6e71;
}

#navigation div#characterNavigation a[active="yes"]:before,
#navigation div#characterNavigation a:hover:before {
    background-color: #FF001C;
}

#navigation .table nav a[active="yes"]:after,
#navigation .table nav a:hover:after,
#navigation .table nav a:active:after
{
    content: '';
    display: block;
    width: 110%;
    height: 7px;
    /* background-color: #CFD1DA; */
    position: absolute;
    top: 32px;
    top: calc(100% + 2px);
    background-image: url(../img/rollover_line.png);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center center;
    left: -5%;
    /* -webkit-transform: skew(-5deg) rotate(-2deg); */
    /* transform: skew(-5deg) rotate(-2deg); */
}

#navigation .table nav a[active="no"]:after {
    display: none;
}

div#characterNavigation {
    background-color: #333334;
    display: block;
}

div#characterNavigation nav {
    /* padding: 8px 0px; */
    width: 50%;
    margin: 0 auto;
    min-width: 510px;
    max-width: 560px;
}

div#characterNavigation a {
    display: block;
    float: left;
    width: 16.6666%;
    position: relative;
    padding: 6px 0px;
}

div#characterNavigation a:before {
    content: '';
    display: block;
    position: relative;
    height: 12px;
    width: 12px;
    background-color: #6d6e71;
    border-radius: 100%;
    margin: 0px auto;
    -webkit-transition: all .3s;
    transition: all .3s;
    cursor: pointer;
}

div#characterNavigation a:hover:before {
    cursor: pointer;
}

div#characterNavigation a > div {
    position: absolute;
    width: 100px;
    bottom: -130%;
    left: 50%;
    margin-left: -50px;
    text-align: center;
    color: #fff;
    font-size: 0.8em;
    opacity: 0;
    -webkit-transition: all .3s;
    transition: all .3s;
    max-height: 0px;
    visibility: hidden;
}

div#characterNavigation a:hover:before {
    background-color: #f6883a;
}

div#characterNavigation a:hover > div {
    display: block;
    opacity: 1;
    bottom: -120%;
    max-height: 100%;
    visibility: visible;
}

.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: #7896A6 solid 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
}

#videoSelection .playbtn {
    margin-left: -29px;
    margin-top: -29px;
    border-color: #7896A6;
}

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

#home #watchtrailer .playbtn {

    height: 40px;

    width: 40px;

    border-width: 4px;
}

#additionalinfoLink .playbtn,
#mainvideoLink .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;
}

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

.playbtn:after {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 24px solid #7896A6;
    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: #283955;
    transition: all .125s .125s;
}

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

#watchtrailer .playbtn:after {
    /* border-top: 10px solid transparent; */
    /* border-bottom: 10px solid transparent; */
    /* border-left: 15px solid #2B2613; */
    /* margin-left: -5px; */
    /* margin-top: -10px; */
}

#home #watchtrailer .playbtn:after {
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 15px;
    margin-left: -5px;
    margin-top: -10px;
}

#videoSelection .playbtn:after {
    border-left-color: #7896A6;
}

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

.characterpagearrow:hover {
    opacity: 1;
}

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

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

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

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

.leftarrow {
 float:left;   
}

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

#home .downarrow:after {
    position: relative;
    height: 40px;
    width: 40px;
    top: -10px;
    border-width: 1px;
}

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

.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: '';
    /*url('../img/fs_img_g_bg.png') url('../img/empty.gif') url('../img/bg-home.jpg') url('../img/rollover_line.png') url('../img/bg-watch.jpg') url('../img/bg-synopsis.jpg') url('../img/bg-extras.jpg') url('../img/bg-additional-info.jpg') url('../img/c-abraham-left.jpg') url('../img/c-abraham-right.jpg') url('../img/bg-character-abraham-actor.jpg') url('../img/c-anna-left.jpg') url('../img/c-anna-right.jpg') url('../img/bg-character-anna-actress.jpg') url('../img/logo-america.png') url('../img/watch-episode.jpg') url('../img/watch-thumb-1.jpg') url('../img/watch-thumb-2.jpg');*/
    display: block;
    height: 1px;
    width: 1px;
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -2;
    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;
    top: 0;
}

.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: #7896A6 solid 1px;
    display: none;
    height: 470px;
    left: 50%;
    margin-left: -425px;
    /* overflow: hidden; */
    position: fixed;
    top: 100px;
    width: 835px;
    z-index: 102;
}

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

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

/* ==========================================================================
   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: #7896A6;
}

.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: 600px)
{

    .mobile-container {
        display: block;
        position: fixed;
        z-index: 102;
        top: 0;
    }

    html, body {
        min-width: initial;
    }
}

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


    #navigation[active="no"] .table {
        padding: 35px 0;
    }

    #navigation[active="yes"] .table {
        padding: 23px 0;
    }

    #navigation .table > * {
        height: 30px;
    }

    #navigation a:not(.visuallyhidden) {
        font-size: 0.6em !important;
    }

    #navigation #menuLogo {
        /* display: none; */
    }

    #navigation .table nav {
        width: 86%;
    }

    #navigation a span {
        width: 100%;
    }

    #characters .row {
        /* padding: 2.1vh 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;
    }
}

@media only screen 
and (min-width: 600px)
and (max-width: 900px) {
    #characters .characterlink h2 {
        font-size: 1.2em;
    }
}

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


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

.audio-control.muted {
    background-image: url('../img/volume-off-blue.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;
}

#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: 'Josefin Sans Std Light', 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;

}

#bgimg[src*="TN_302_AP_1118_0238ed"] {
       position: absolute;
       top: 40%;
       margin-top:-30vw;
}



@media (max-width: 1000px){
  #bgimg[src*="TN_302_AP_1118_0238ed"] {
      position: relative;
       top:auto;
       margin-top:0vw;
        bottom: 14%;
}
}
/*
@media (min-width: 900px){
  #bgimg[src*="TN_302_AP_1118_0238ed"] {
       bottom: 16%;
}
}

@media (min-width: 1100px){
  #bgimg[src*="TN_302_AP_1118_0238ed"] {
       bottom: 20%;
}
}


@media (min-width: 1400px){
  #bgimg[src*="TN_302_AP_1118_0238ed"] {
       bottom: 33%;
}
}


@media (min-width: 1600px){
  #bgimg[src*="TN_302_AP_1118_0238ed"] {
       bottom: 47%;
}
}*/


#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;
    opacity: 0;
}

#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: 160px;
    height: auto;
}

#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: 50%;
    top: 10px;
    opacity: .6;
    margin-left: -140px;
}

.gallery-single {
    position: absolute;
    z-index: 3;
    left: 50%;
    opacity: .6;
    left: 50%;
    bottom:10px;
    margin-left: -125px;
    font-size: 12px;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
}


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

.gallery-download a {
    padding: 10px;
    color: #FFF;
    font-size: 12px;
    text-transform: uppercase;
    background: url(../img/fs_img_g_bg.png);
    font-weight: normal;
    /* opacity: .6; */
    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: 50px;
    }
}

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