body {
    margin: 0;
    background-color: #000;
    height: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
a:link,
img {
    border-style: none;
    outline: none;
    border: none;
    text-decoration: none
}
.TL {
    top: 0;
    left: 0;
    position: absolute
}
.T {
    top: 0;
    left: 50%;
    position: absolute
}
.TR {
    top: 0;
    right: 0;
    position: absolute
}
.L {
    top: 50%;
    left: 0;
    position: absolute
}
.C {
    top: 50%;
    left: 50%;
    position: absolute
}
.R {
    top: 50%;
    right: 0;
    position: absolute
}
.BL {
    bottom: 0;
    left: 0;
    position: absolute
}
.B {
    bottom: 0;
    left: 50%;
    position: absolute
}
.BR {
    bottom: 0;
    right: 0;
    position: absolute
}
.full {
    width: 100%;
    height: 100%;
    display: block
}
.invis {
    visibility: hidden;
    opacity: 0
}
.hList {
    list-style: none;
    white-space: nowrap
}
.hList li {
    display: inline-block;
    white-space: normal;
    vertical-align: top
}
.preloaderInner {
    height: 250px;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 500px
}
.preloaderBg {
    background: url(../images/preloader_smoke.jpg);
    width: 400px;
    height: 285px;
    opacity: 1;
    -webkit-transform: translate(-200px, -180px) scale(1.2, 1.2);
    -ms-transform: translate(-200px, -180px) scale(1.2, 1.2);
    transform: translate(-200px, -180px) scale(1.2, 1.2)
}
.preloaderLogo {
    background: url(../images/logo_loader.png) center top no-repeat;
    background-size: contain;
    display: block;
    height: 150px;
    opacity: 0;
    position: relative;
    width: 100%;
    right: 3px
}
.preloaderTitle {
    font-size: 20px;
    font-weight: 400;
    height: 30px;
    letter-spacing: .3em;
    line-height: 30px;
    opacity: 0;
    position: relative;
    text-align: center;
    width: 100%
}
.preloaderLine {
    background: rgba(160, 129, 87, .4);
    display: block;
    height: 2px;
    margin: 16px auto 8px;
    position: relative;
    width: 240px;
    -webkit-transform: scaleX(.2);
    -ms-transform: scaleX(.2);
    transform: scaleX(.2);
    opacity: 0
}
.preloaderLine2 {
    background: rgba(160, 129, 87, .4);
    display: block;
    height: 2px;
    margin: 8px auto;
    position: relative;
    width: 240px;
    -webkit-transform: scaleX(.2);
    -ms-transform: scaleX(.2);
    transform: scaleX(.2);
    opacity: 0
}
.preloaderDate {
    color: #9d9691;
    display: block;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: .3em;
    margin-top: 6px;
    opacity: 0;
    position: relative;
    text-align: center;
    width: 100%;
    right: 3px
}
.preloaderPct {
    color: #9d9691;
    display: block;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: .05em;
    margin-top: 10px;
    opacity: 0;
    position: relative;
    text-align: center;
    width: 100%
}
.absFull {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    display: block
}
.bgContainer {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden
}
.bgContainer img {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    display: block;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    max-height: none;
    max-width: none
}
.nav-container {
    text-align: center;
    margin: 0 auto;
    padding: 0;
    z-index: 9990;
    background-color: #000
}
.pottermoreText a {
    font-family: Oswald, serif;
    color: #d2cac6;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 8px;
    z-index: 100
}
#pottermoreText {
    font-family: Oswald, serif;
    color: #d2cac6;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 8px;
    z-index: 100
}
#bgShell {
    text-align: center;
    height: 100%;
    width: 100%;
    position: relative;
    opacity: 0;
    display: none;
    z-index: -2
}
#header-container {
    margin-top: -8px;
    width: 100%;
    height: 8px;
    display: block;
    background-position: center;
    top: 0
}
#rtscore {
    width: 100px;
    text-shadow: 2px 2px #000;
    font-size: 18px;
    font-family: Oswald, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    top: 35px;
    text-align: center;
    position: absolute;
    left: 25px
}
#rtdate {
    font-size: 12px;
    font-family: Oswald, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #000;
    top: 97px;
    text-align: center;
    position: absolute;
    width: 100px;
    left: 25px
}
#homeQuotes {
    font-family: rasa;
    bottom: 80px;
    position: absolute;
    width: 45%;
    left: 50px;
    color: #3e3933
}
#quoteSub1 {
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
    margin: 5px 0 -3px
}
#quoteSub2 {
    margin-left: 5px;
    font-size: 14px;
    font-weight: 700
}
#quoteMain {
    width: 100%;
    line-height: 16px;
    font-size: 17px;
    font-weight: 500
}
#creditCast {
    margin-top: 30px;
    width: 100%;
    height: 42px;
    position: absolute
}
#creditCast ul {
    padding: 5px 0 0;
    text-align: center;
    list-style: none
}
#creditCast li {
    display: inline
}
#imglogo {
    margin-top: 100px;
    opacity: 0
}
#imgline {
    margin-top: 100px;
    opacity: 0
}
#imgpottermore {
    margin-top: 100px;
    opacity: 0
}
.topCast {
    top: 30px;
    position: absolute;
    height: 42px;
    overflow: hidden
}
.credName {
    background-Position: 0 -42px
}
.buttonText1 {
    cursor: pointer;
    font-family: Roboto, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 230%;
    letter-spacing: 1px;
    color: #fff;
    width: 140px;
    height: 35px;
    background-image: url(../images/button1.jpg);
    background-repeat: no-repeat;
    background-position: 0 -45px;
    float: right;
    margin-right: 10px
}
.buttonText2 {
    cursor: pointer;
    font-family: Roboto, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 230%;
    letter-spacing: 1px;
    color: #fff;
    width: 140px;
    height: 35px;
    background-image: url(../images/button2.jpg);
    background-repeat: no-repeat;
    background-position: 0 -45px;
    float: right;
    margin-right: 10px
}
#nav-bar {
    width: 100%;
    height: 30px;
    display: block;
    background: #c2ad7f;
    top: 0
}
#header-container {
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    position: absolute;
    white-space: nowrap;
    z-index: 9990
}
#nav-wrapper {
    margin: 0 auto;
    padding: 15px 0 10px;
    z-index: 9990
}
.trailerBtn {
    font-size: 14px;
    position: relative;
    margin: 0 10px 0 25px;
    overflow: hidden;
    font-family: Halant, serif;
    font-weight: 600;
    letter-spacing: 1px;
    color: #9a918c;
    white-space: nowrap;
    line-height: 16px;
    text-align: center;
    vertical-align: bottom;
    height: 30px;
    width: 180px;
    cursor: pointer;
    display: inline;
    z-index: 9999;
    text-shadow: 2px 2px #000
}
.trailerBtnActive {
    font-size: 14px;
    position: relative;
    margin: 0 10px 0 25px;
    overflow: hidden;
    font-family: Halant, serif;
    font-weight: 600;
    letter-spacing: 1px;
    color: #e2dece;
    white-space: nowrap;
    line-height: 16px;
    text-align: center;
    vertical-align: bottom;
    height: 30px;
    width: 180px;
    display: inline;
    cursor: default;
    z-index: 9999;
    text-shadow: 2px 2px #000
}
.mainMenuTout {
    margin: 0 10px;
    font-family: Halant, serif;
    font-weight: 600;
    letter-spacing: 0;
    color: #9a918c;
    white-space: nowrap;
    line-height: 20px;
    display: inline-block;
    text-align: center;
    vertical-align: bottom;
    cursor: pointer;
    padding: 1px 3px 0 1px
}
.mainMenuBtn {
    margin: 0 10px;
    font-family: Halant, serif;
    font-weight: 600;
    letter-spacing: 0;
    color: #9a918c;
    white-space: nowrap;
    line-height: 20px;
    display: inline-block;
    text-align: center;
    vertical-align: bottom;
    cursor: pointer;
    padding: 1px 3px 0 1px
}
.mainMenuBtnActive {
    margin: 0 10px;
    font-family: Halant, serif;
    font-weight: 600;
    letter-spacing: 0;
    color: #e2dece;
    white-space: nowrap;
    line-height: 20px;
    display: inline-block;
    text-align: center;
    vertical-align: bottom;
    cursor: pointer;
    padding: 1px 3px 0 1px
}
#bgVid {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 9990;
    background-color: #000
}
#bgVid video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
@media(min-aspect-ratio:16/9) {
    #bgVid>video {
        height: 300%;
        top: -100%
    }
}
@media(max-aspect-ratio:16/9) {
    #bgVid>video {
        width: 300%;
        left: -100%
    }
}
@supports(object-fit:cover) {
    #bgVid>video {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}
#bgVidTrasition {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 500
}
#bgVidTrasition video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
@media(min-aspect-ratio:16/9) {
    #bgVidTrasition>video {
        height: 300%;
        top: -100%
    }
}
@media(max-aspect-ratio:16/9) {
    #bgVidTrasition>video {
        width: 300%;
        left: -100%
    }
}
@supports(object-fit:cover) {
    #bgVidTrasition>video {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}
#HistoryOfMagic {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}
.mag-bar {
    margin-left: -380px;
    position: relative;
    left: 50%;
    width: 740px;
    height: 30px;
    text-align: center
}
.magicTxt1 {
    text-align: center;
    font-size: 20px;
    font-family: Halant, serif;
    color: #e2e0cf
}
.magicTxt2 {
    margin-top: -5px;
    text-align: center;
    font-size: 30px;
    font-family: rasa;
    color: #e2e0cf;
    letter-spacing: .5px;
    line-height: 35px
}
.videos_playerContainer {
    padding: 1px;
    position: relative;
    left: 50%;
    margin-left: -380px;
    width: 740px;
    height: 390px;
    background-cover: #000
}
#bgVidHome,
#bgVidStory,
#bgVidBeasts,
#bgVidLoader {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}
video#videoContentHome {
    position: fixed;
    top: 52%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover
}
video#videoContentLoader {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover
}
video#videoContentStory {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover
}
video#videoContentBeasts {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover
}
#releaseDate {
    font-size: 30px;
    font-family: Halant, serif;
    color: #a0a093;
    text-align: center;
    bottom: 50px;
    width: 100%;
    left: 0;
    z-index: 9990;
    opacity: 0;
    font-weight: 400;
    letter-spacing: 7px
}
#ttTitle {
    font-size: 15px;
    font-family: Halant, serif;
    color: #d0c9b3;
    text-align: center;
    bottom: 150px;
    width: 100%;
    left: 0;
    z-index: 9990;
    opacity: 1;
    font-weight: 400;
    letter-spacing: 0
}
#jkrww {
    display: block;
    opacity: 0;
    float: right;
    padding: 17px 45px 0 0;
    z-index: 9999
}
#pottermore {
    display: block;
    opacity: 0;
    float: right;
    padding: 20px 25px 0 0;
    z-index: 999
}
.navRollOver {
    height: 56px;
    line-height: 56px;
    width: 400px;
    cursor: pointer;
    margin: 0 0 15px;
    padding-right: 15px;
    background: url(../images/nav_rollover.png) no-repeat center;
    background-position: -418px
}
.navCat {
    height: 56px;
    line-height: 56px;
    width: 400px;
    cursor: pointer;
    margin-bottom: 15px;
    margin-top: -40px;
    padding: 0;
    background: url(../images/nav_triangle.png) no-repeat left;
    background-color: rgba(238, 234, 223, .8)
}
#preloaderShell {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 500
}
#preloaderShell td {
    vertical-align: middle;
    text-align: center
}
#shell {
    position: absolute;
    min-width: 1000px;
    min-height: 730px;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: block;
    overflow: hidden;
    z-index: -2
}
#contentWrapper {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%
}
#contentShell {
    display: block;
    height: 100%;
    width: 100%;
    z-index: -2
}
#percentageLoaded {
    font-family: Halant, serif;
    z-index: 502;
    text-align: center;
    color: #000;
    font-size: 25px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
    left: 16px;
    line-height: 200px;
    margin: auto;
    margin-top: -70px;
    position: absolute;
    top: 50%;
    width: 100%
}
.closeBut {
    cursor: pointer;
    background-position: 0 -45px;
    margin-top: 5px;
    overflow: hidden;
    width: 47px;
    height: 45px;
    background-image: url(../images/close_box.jpg);
    background-repeat: no-repeat
}
.closeButGallery {
    cursor: pointer;
    margin-top: 5px;
    overflow: hidden;
    width: 31px;
    height: 29px;
    background-image: url(../images/close.jpg);
    background-repeat: no-repeat
}
#gallery {
    z-index: 9989
}
#galleryImageBar {
    height: 100%;
    width: 100%;
    cursor: -webkit-grab;
    cursor: grab
}
#galleryImageBar.grabbed {
    cursor: -webkit-grabbing;
    cursor: grabbing
}
.slide {
    background: #000 url(../images/gallery/loadLoop.gif) no-repeat;
    background-position: center center;
    .imageShell {
        background-position: center center;
        background-repeat: no-repeat;
        opacity: 0;
        @include transition(opacity 0.5s)
    }
    &.loaded {
        background: #000;
        .imageShell {
            opacity: 1
        }
    }
}
.slide .imageShell {
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    -webkit-transition: opacity 4.5s;
    -moz-transition: opacity 4.5s;
    -o-transition: opacity 4.5s;
    transition: opacity 4.5s
}
.slide.loaded {
    background: #000
}
.slide.loaded .imageShell {
    opacity: 1
}
.galleryArrow {
    opacity: 0;
    display: block;
    width: 66px;
    height: 60px;
    margin-top: -30px;
    background-image: url(../images/gallery/arrows.png);
    background-position: right top;
    cursor: pointer
}
.desktop .galleryArrow:hover {
    background-position: right bottom
}
.galleryArrow#galleryLeft {
    background-position: left top
}
.galleryArrow#galleryLeft:hover {
    background-position: left bottom
}
.galleryArrow#galleryRight:hover {
    background-position: right bottom
}
#footer {
    background-color: #000;
    padding-top: 10px;
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 35px;
    width: 100%;
    font-size: 11px;
    letter-spacing: 1px;
    z-index: 2;
    -webkit-transform: translateZ(10px);
    -moz-transform: translateZ(10px);
    -ms-transform: translateZ(10px);
    -o-transform: translateZ(10px);
    transform: translateZ(10px)
}
#footer a {
    font-weight: 400;
    text-decoration: none;
    font-family: Oswald, Helvetica Neue, Helvetica, sans-serif;
    -webkit-transition: color .5s;
    -moz-transition: color .5s;
    -o-transition: color .5s;
    transition: color .5s
}
#footer #bottomRight,
#footer #bottomLeft {
    position: relative
}
#footer #bottomRight ul,
#footer #bottomLeft ul {
    list-style: none;
    margin: 0;
    padding: 0
}
#footer #bottomRight ul li,
#footer #bottomLeft ul li {
    float: left
}
.ie #footer #bottomRight ul li a,
.ie #footer #bottomLeft ul li a {
    line-height: 44px
}
#footer #bottomRight .footer-logo {
    margin: -15px 20px 0 0
}
#footer #bottomRight ul li {
    float: right;
    margin-left: 1.5em
}
#footer #mpaa_legal {
    line-height: 1.25em;
    padding: 0;
    margin: 6px
}
#footer #mpaa_legal a {
    -webkit-transition: color .5s;
    -moz-transition: color .5s;
    -o-transition: color .5s;
    transition: color .5s
}
.no-touch #footer #mpaa_legal a:hover {
    color: #fff
}
#footer #bottomCenter {
    text-align: center;
    display: inline-block;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0
}
#footer #bottomCenter.autoCenter {
    position: static;
    width: auto;
    top: auto;
    left: auto
}
#footer #bottomLeft {
    text-align: left;
    float: left;
    padding-left: 14px
}
#footer #bottomLeft #bottom_left_links,
#footer #bottomLeft #credits-button {
    float: left
}
#footer #bottomLeft #credits-button {
    margin-left: -4px
}
.ie #footer #bottomLeft #credits-button {
    line-height: 44px
}
#footer #bottomLeft #bottom_left_links li {
    margin-right: 1.5em
}
#footer .lt-ie9 #bottomLeft {
    font-family: ff-angie-web-pro-n4, Oswald, Helvetica Neue, Helvetica, sans-serif
}
#follow {
    letter-spacing: 18px;
    width: 0
}
#follow #follow_label {
    margin-right: 6px;
    line-height: 30px;
    vertical-align: top
}
#social_icons #follow .social-icon {
    position: relative
}
#social_icons #follow .social-icon:before {
    font-size: 20px;
    color: #d2cac6;
    line-height: 35px;
    margin: 0 6px 0 0;
    -webkit-transition: color .25s ease-out;
    -moz-transition: color .25s ease-out;
    -o-transition: color .25s ease-out;
    transition: color .25s ease-out
}
#social_icons #follow .social-iconm:before {
    font-size: 30px;
    color: #d2cac6;
    line-height: 35px;
    margin: 0 10px 0 0;
    -webkit-transition: color .25s ease-out;
    -moz-transition: color .25s ease-out;
    -o-transition: color .25s ease-out;
    transition: color .25s ease-out
}
.no-touch #social_icons #follow .social-icon:hover:before {
    color: #d5cac3
}
#social_icons #followShelf {
    display: inline-block
}
#footer #share {
    float: left;
    margin: 0 0 0 25px
}
#footer #sharelabel {
    display: block;
    float: left;
    clear: none;
    text-decoration: none;
    position: relative;
    margin-right: 0
}
.ie #footer #sharelabel {
    line-height: 44px
}
#footer #share-facebook {
    position: relative;
    top: 4px
}
#footer .like-button {
    width: 90px;
    height: 21px
}
#footer .tweet-button {
    width: 60px;
    height: 21px
}
#footer #bottomRight {
    margin-top: 6px;
    float: right;
    text-align: right;
    padding-right: 1.25em
}
#footer #copyright {
    margin-top: 3px;
    font-size: 10px;
    color: #fff;
    opacity: .35;
    font-family: tablet-gothic-compressed
}
#footer #MPAA_requirements {
    position: absolute;
    bottom: -200px;
    right: 0;
    width: auto;
    background: #000;
    padding: 20px
}
#footer #MPAA_requirements img {
    display: block
}
#footer #MPAA_requirements ul {
    margin: 1em .25em 0
}
#footer #MPAA_requirements ul li {
    text-align: left;
    display: block;
    margin-top: .5em
}
#footer #MPAA_requirements ul li a {
    margin: 0;
    float: none;
    line-height: 1.25em;
    color: #f0bc28
}
#footer .no-touch #MPAA_requirements ul li a:hover {
    color: #fff
}
#footer #credits {
    margin: 0
}
#footer #creditsShelf {
    background-color: #726a5f;
    display: block;
    position: absolute;
    width: 100%;
    padding: 30px 10px 10px;
    color: #fff;
    line-height: 1em;
    bottom: 0
}
#footer #shareShelf {
    display: block;
    position: absolute;
    width: 100px;
    padding: 30px 10px 10px;
    color: #fff;
    line-height: 1em;
    bottom: 0;
    right: 0
}
#footer #legalShelf {
    right: 10px;
    background-color: #726a5f;
    display: block;
    position: absolute;
    width: 250px;
    padding: 30px 10px 10px;
    color: #fff;
    line-height: 1em;
    bottom: 0;
    z-index: 9999
}
#footer #shareShelf .footer-btn {
    margin-left: 0
}
#footer #shareShelf .facebook {
    float: none;
    margin: 0;
    display: block
}
#footer #shareShelfContents {
    position: relative;
    text-align: right
}
#footer #shareShelfContents .shareshelf-button {
    color: #f0bc28;
    display: block;
    margin: 5px 0
}
.no-touch #footer #shareShelfContents #shareshelf-button:hover {
    color: #fff
}
#footer #footer_links {
    margin: 6px 1em 0 0;
    padding: 0
}
#footer #footer_links li {
    margin: 0;
    display: inline-block
}
#footer #footer_links li a {
    border: 0;
    margin: 0 8px;
    -webkit-transition: color .5s;
    -moz-transition: color .5s;
    -o-transition: color .5s;
    transition: color .5s
}
.no-touch #footer #footer_links li a:hover {
    color: #fff
}
#footer .like-button {
    width: 90px;
    height: 21px
}
#footer .share-button {
    width: 90px;
    height: 21px
}
#footer .tweet-button {
    width: 90px;
    height: 21px
}
#footer .google-button {
    width: 90px;
    height: 21px
}
#footer .tumblr-button {
    width: 90px;
    height: 21px
}
#footer #share-facebook {
    position: relative;
    top: 4px
}
#footer .footer-btn {
    float: left;
    margin: 0 2em;
    display: block;
    color: #726a5f;
    text-decoration: none;
    font-family: Roboto, sans-serif, Helvetica Neue, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 700;
    position: relative;
    letter-spacing: .8px;
    -webkit-transition: color .5s;
    -moz-transition: color .5s;
    -o-transition: color .5s;
    transition: color .5s;
    z-index: 1
}
#footer .footer-btn.active .border-arrow {
    border-top-width: 4px;
    border-bottom-width: 0;
    border-top-color: #fff;
    border-bottom-color: #fff
}
#footer #sharelabel {
    position: relative;
    margin-left: 0
}
#footer #sharelabel.active {
    color: #fff
}
#footer #creditlabel.active {
    color: #fff
}
#footer #sharelabel.active .border-arrow {
    border-top-width: 4px;
    border-bottom-width: 0;
    border-top-color: #fff;
    border-bottom-color: #fff
}
#footer .border-arrow {
    display: inline-block;
    margin-left: 6px;
    margin-top: 0;
    margin-bottom: 2px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 0 solid #fff;
    border-bottom: 4px solid #fff;
    -webkit-transition: border .25s ease-out;
    -moz-transition: border .25s ease-out;
    -o-transition: border .25s ease-out;
    transition: border .25s ease-out;
    display: none
}
#creditsShelfContents {
    margin-top: -10px;
    color: #000;
    text-decoration: none;
    font-family: Roboto, sans-serif, Helvetica Neue, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 700;
    position: relative;
    letter-spacing: 1px
}
#creditsShelfContents a {
    outline: none;
    border: none;
    color: #000;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 0 10px;
    -webkit-transition: color .5s;
    -moz-transition: color .5s;
    -o-transition: color .5s;
    transition: color .5s
}
@font-face {
    font-family: IcoMoon-Free;
    src: url(../fonts/IcoMoon-Free.ttf) format('truetype')
}
.icon {
    font-family: IcoMoon-Free!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.icon-facebook:before {
    content: "\ea90"
}
.icon-twitter:before {
    content: "\ea96"
}
.icon-pinterest:before {
    content: "\ead1"
}
.icon-download3:before {
    content: "\e9c7"
}
.icon-instagram:before {
    content: "\ea92"
}
@font-face {
    font-family: fa-snapchat;
    src: url(../fonts/fa-snapchat.eot?-73zac);
    src: url(../fonts/fa-snapchat.eot?#iefix-73zac) format('embedded-opentype'), url(../fonts/fa-snapchat.ttf?-73zac) format('truetype'), url(../fonts/fa-snapchat.woff?-73zac) format('woff'), url(../fonts/fa-snapchat.svg?-73zac#fa-snapchat) format('svg')
}
[data-icon]:before {
    font-family: fa-snapchat!important;
    content: attr(data-icon);
    font-style: normal!important;
    font-weight: 400!important;
    font-variant: normal!important;
    text-transform: none!important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
[class^=icons-]:before,
[class*=" icons-"]:before {
    font-family: fa-snapchat!important;
    font-style: normal!important;
    font-weight: 400!important;
    font-variant: normal!important;
    text-transform: none!important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.icons-snapchat:before {
    content: "a";
    font-family: fa-snapchat;
    content: "\e600"
}
.soc {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none
}
.soc li {
    display: inline-block;
    display: inline;
    zoom: 1;
    -ms-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transform: scale(0, 0)
}
.soc li a {
    font-family: si!important;
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -o-transition: .1s;
    -ms-transition: .1s;
    -moz-transition: .1s;
    -webkit-transition: .1s;
    transition: .1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    display: block;
    position: relative;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 24px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin-right: 20px;
    color: #84e9ff
}
.soc a:hover {
    z-index: 2;
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}
.soc-icon-last {
    margin: 0!important
}
.soc-facebook:before {
    content: 'b'
}
.soc-twitter:before {
    content: 'a'
}
.soc-tumblr:before {
    content: 'z'
}
.soc-pinterest:before {
    content: 'd'
}
#gen_msg {
    background: transparent;
    display: none;
    z-index: 9999
}
#ytoverlay {
    text-align: center;
    padding-top: 10%;
    opacity: 1;
    z-index: 9995;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .8);
    opacity: 0
}
@-webkit-keyframes play1 {
    from {
        background-position: 0
    }
    to {
        background-position: -28490px
    }
}
@-moz-keyframes play1 {
    from {
        background-position: 0
    }
    to {
        background-position: -28490px
    }
}
@-ms-keyframes play1 {
    from {
        background-position: 0
    }
    to {
        background-position: -28490px
    }
}
@-o-keyframes play1 {
    from {
        background-position: 0
    }
    to {
        background-position: -28490px
    }
}
@keyframes play1 {
    from {
        background-position: 0
    }
    to {
        background-position: -28490px
    }
}
#feature_txt {
    margin-top: -900px;
    margin-left: 25px;
    letter-spacing: 2px;
    font-weight: 900;
    font-family: tablet-gothic-compressed;
    text-shadow: 1px 1px 1px #4d0002;
    text-align: left;
    padding: 283px 0 0;
    color: #fff;
    font-size: 25px
}
#contentText {
    display: block;
    margin-right: -460px
}
#contentBoxText {
    width: 423px;
    height: 278px;
    display: block;
    background: url(../images/content_box.png) no-repeat center;
    background-position: center;
    padding: 30px
}
#bodyText {
    padding: 25px 25px 20px;
    text-align: right
}
#textTitle {
    font-size: 35px;
    font-family: tablet-gothic-compressed;
    text-shadow: 1px 1px 1px #4d0002;
    color: #fff
}
#textDescription {
    font-weight: 300;
    font-size: 16px;
    font-family: tablet-gothic-compressed;
    text-shadow: 1px 1px 1px #4d0002;
    color: #fff;
    margin-top: 10px
}
#trailer {
    position: absolute;
    cursor: pointer;
    height: 40px;
    width: 200px;
    margin-left: 220px;
    top: 230px
}
@-webkit-keyframes play {
    from {
        background-position: 0
    }
    to {
        background-position: -30150px
    }
}
@-moz-keyframes play {
    from {
        background-position: 0
    }
    to {
        background-position: -30150px
    }
}
@-ms-keyframes play {
    from {
        background-position: 0
    }
    to {
        background-position: -30150px
    }
}
@-o-keyframes play {
    from {
        background-position: 0
    }
    to {
        background-position: -30150px
    }
}
@keyframes play {
    from {
        background-position: 0
    }
    to {
        background-position: -29700px
    }
}
@keyframes play {
    from {
        background-position: 0
    }
    to {
        background-position: -29700px
    }
}
p {
    margin: 0;
    padding: 0;
    text-indent: 0;
    text-align: left;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    color: #9f958a;
    letter-spacing: .03em;
    line-height: 155%
}
.fb-like {
    height: 20px;
    overflow: hidden
}
#storyScrollText {
    width: 800px;
    margin: 40px 0 10px
}
#storyScrollText .viewport {
    width: 785px;
    height: 265px;
    overflow: hidden;
    position: relative
}
#storyScrollText .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0
}
#storyScrollText .scrollbar {
    position: relative;
    background-position: 0 0;
    float: left;
    width: 15px;
    left: -10px
}
#storyScrollText .track {
    height: 100%;
    width: 13px;
    position: relative;
    padding: 0 1px;
    left: -15px
}
#storyScrollText .thumb {
    background: transparent url(../images/scroll_bar.png) no-repeat 50% 100%;
    height: 70px;
    width: 13px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0
}
#storyScrollText .thumb .end {
    background: transparent url(../images/scroll_bar.png) no-repeat 50% 0;
    overflow: hidden;
    height: 20px;
    width: 13px;
    left: 0
}
#storyScrollText .disable {
    display: none
}
#story_text_title {
    color: #e3ded1;
    letter-spacing: 4px;
    text-align: center;
    font-size: 40px;
    font-weight: 400
}
.noSelect {
    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none
}
#storyTxt {
    margin: 0;
    padding: 0;
    text-indent: 0;
    text-align: left;
    font-family: rasa;
    font-size: 17px;
    font-weight: 100;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    color: #e3ded1;
    letter-spacing: .09em;
    line-height: 175%
}
#storyTxtMobile {
    margin: 0;
    padding: 0;
    text-indent: 0;
    text-align: left;
    font-family: Halant, serif;
    font-size: 20px;
    font-weight: 100;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    color: #e3ded1;
    letter-spacing: .09em;
    line-height: 175%
}
#charScrollText {
    width: 465px;
    margin: 40px 0 10px
}
#charScrollText .viewport {
    width: 450px;
    height: 285px;
    overflow: hidden;
    position: relative
}
#charScrollText .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0
}
#charScrollText .scrollbar {
    position: relative;
    background-position: 0 0;
    float: left;
    width: 15px;
    left: -10px
}
#charScrollText .track {
    height: 100%;
    width: 13px;
    position: relative;
    padding: 0 1px;
    left: -15px
}
#charScrollText .thumb {
    background: transparent url(../images/scroll_bar.png) repeat 50% 100%;
    height: 70px;
    width: 13px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0
}
#charScrollText .thumb .end {
    background: transparent;
    overflow: hidden;
    height: 20px;
    width: 13px;
    left: 0
}
#charScrollText .disable {
    display: none
}
.charTxt {
    margin: 0;
    padding: 0;
    text-indent: 0;
    text-align: left;
    font-family: rasa;
    font-size: 16px;
    font-weight: 100;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    color: #e3ded1;
    letter-spacing: .09em;
    line-height: 175%
}
.charTxtMobile {
    margin: 0;
    padding: 0;
    text-indent: 0;
    text-align: left;
    font-family: rasa;
    font-size: 20px;
    font-weight: 100;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    color: #e3ded1;
    letter-spacing: .09em;
    line-height: 175%
}
#beasts_ind_ScrollText {
    width: 465px;
    margin: 40px 0 10px
}
#beasts_ind_ScrollText .viewport {
    width: 450px;
    height: 190px;
    overflow: hidden;
    position: relative
}
#beasts_ind_ScrollText .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0
}
#beasts_ind_ScrollText .scrollbar {
    position: relative;
    background-position: 0 0;
    float: left;
    width: 15px;
    left: -10px
}
#beasts_ind_ScrollText .track {
    height: 100%;
    width: 13px;
    position: relative;
    padding: 0 1px;
    left: -15px
}
#beasts_ind_ScrollText .thumb {
    background: transparent url(../images/scroll_bar.png) repeat 50% 100%;
    height: 70px;
    width: 13px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0
}
#beasts_ind_ScrollText .thumb .end {
    background: transparent;
    overflow: hidden;
    height: 20px;
    width: 13px;
    left: 0
}
#beasts_ind_ScrollText .disable {
    display: none
}
.charTxt {
    margin: 0;
    padding: 0;
    text-indent: 0;
    text-align: left;
    font-family: Halant, serif;
    font-size: 16px;
    font-weight: 100;
    font-style: normal;
    text-transform: none;
    text-decoration: none;
    color: #e3ded1;
    letter-spacing: .09em;
    line-height: 175%
}
.beast {
    text-align: center;
    top: 10px;
    width: 1000px;
    position: relative;
    display: none;
    bottom: 0;
    z-index: -2
}
#showcase {
    height: 768px;
    width: 1200px;
    visibility: hidden
}
.beastItem {
    cursor: auto;
    opacity: 0;
    position: relative;
    display: inline-block;
    margin: -50px -55px
}
.left {
    top: 130px;
    left: -65px;
    width: 66px;
    height: 60px;
    background: url(../images/gallery/arrows.png);
    z-index: 10;
    cursor: pointer;
    border: none;
    outline: none;
    background-position: left top;
    display: none;
    opacity: 0
}
.left:hover {
    background-position: left bottom
}
.right {
    top: 130px;
    right: -65px;
    width: 66px;
    height: 60px;
    background: url(../images/gallery/arrows.png);
    z-index: 10;
    cursor: pointer;
    border: none;
    outline: none;
    background-position: right top;
    display: none;
    opacity: 0
}
.right:hover {
    background-position: right bottom
}
.shareCarousel {
    margin-left: 155px;
    border-width: 1px;
    border-style: solid;
    border-color: #a69977;
    width: 170px;
    background-color: #28201e;
    padding: 8px 5px 5px 20px;
    opacity: .9
}
.toutLeft {
    top: 150px;
    left: 0;
    width: 66px;
    height: 60px;
    background: url(../images/gallery/arrows_dark.png);
    z-index: 10;
    cursor: pointer;
    border: none;
    outline: none;
    background-position: left top;
    display: none;
    opacity: 0
}
.toutLeft:hover {
    background-position: left bottom
}
.toutRight {
    top: 150px;
    right: 0;
    width: 66px;
    height: 60px;
    background: url(../images/gallery/arrows_dark.png);
    z-index: 10;
    cursor: pointer;
    border: none;
    outline: none;
    background-position: right top;
    display: none;
    opacity: 0
}
.toutRight:hover {
    background-position: right bottom
}
.MinaLeft {
    top: 150px;
    left: 0;
    width: 66px;
    height: 60px;
    background: url(../images/gallery/arrows.png);
    z-index: 10;
    cursor: pointer;
    border: none;
    outline: none;
    background-position: left top;
    display: none;
    opacity: 0
}
.MinaLeft:hover {
    background-position: left bottom
}
.MinaRight {
    top: 150px;
    right: 0;
    width: 66px;
    height: 60px;
    background: url(../images/gallery/arrows.png);
    z-index: 10;
    cursor: pointer;
    border: none;
    outline: none;
    background-position: right top;
    display: none;
    opacity: 0
}
.MinaRight:hover {
    background-position: right bottom
}
.charLeft {
    top: 150px;
    left: 0;
    width: 66px;
    height: 60px;
    background: url(../images/gallery/arrows.png);
    z-index: 10;
    cursor: pointer;
    border: none;
    outline: none;
    background-position: left top;
    display: none;
    opacity: 0
}
.charLeft:hover {
    background-position: left bottom
}
.charRight {
    top: 150px;
    right: 0;
    width: 66px;
    height: 60px;
    background: url(../images/gallery/arrows.png);
    z-index: 10;
    cursor: pointer;
    border: none;
    outline: none;
    background-position: right top;
    display: none;
    opacity: 0
}
.charRight:hover {
    background-position: right bottom
}
.beasts_ind_Left {
    top: 150px;
    left: 0;
    width: 66px;
    height: 60px;
    background: url(../images/gallery/arrows.png);
    z-index: 10;
    cursor: pointer;
    border: none;
    outline: none;
    background-position: left top;
    display: none;
    opacity: 0
}
.beasts_ind_Left:hover {
    background-position: left bottom
}
.beasts_ind_Right {
    top: 150px;
    right: 0;
    width: 66px;
    height: 60px;
    background: url(../images/gallery/arrows.png);
    z-index: 10;
    cursor: pointer;
    border: none;
    outline: none;
    background-position: right top;
    display: none;
    opacity: 0
}
.beasts_ind_Right:hover {
    background-position: right bottom
}
#soundButton {
    display: block;
    width: 20px;
    height: 10px;
    position: absolute;
    right: 12px;
    top: 35px;
    cursor: pointer;
    z-index: 9999
}
#soundButton div {
    position: relative;
    float: left;
    margin-right: 1px;
    width: 2px;
    height: 100%
}
#soundButton div:after {
    background: #d2cac6;
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 10%;
    -webkit-animation-name: soundBar;
    -moz-animation-name: soundBar;
    animation-name: soundBar
}
#soundButton div:nth-child(0n+1):after {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s
}
#soundButton div:nth-child(2):after {
    -webkit-animation-duration: .95s;
    -moz-animation-duration: .95s;
    animation-duration: .95s
}
#soundButton div:nth-child(3):after {
    -webkit-animation-duration: .9s;
    -moz-animation-duration: .9s;
    animation-duration: .9s
}
#soundButton div:nth-child(4):after {
    -webkit-animation-duration: .93s;
    -moz-animation-duration: .93s;
    animation-duration: .93s
}
#soundButton div:nth-child(5):after {
    -webkit-animation-duration: .97s;
    -moz-animation-duration: .97s;
    animation-duration: .97s
}
#soundButton.on div:after {
    -webkit-animation-name: soundBar;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-name: soundBar;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    animation-name: soundBar;
    animation-iteration-count: infinite;
    animation-direction: alternate
}
#soundButton.off div:after {
    -webkit-animation-name: soundBarOff;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -moz-animation-name: soundBarOff;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: alternate;
    animation-name: soundBarOff;
    animation-iteration-count: 1;
    animation-direction: alternate
}
@-webkit-keyframes soundBarOff {
    100% {
        height: 10%
    }
}
@-webkit-keyframes soundBar {
    0% {
        height: 1%
    }
    100% {
        height: 100%
    }
}
@-moz-keyframes soundBarOff {
    100% {
        height: 10%
    }
}
@-moz-keyframes soundBar {
    0% {
        height: 1%
    }
    100% {
        height: 100%
    }
}
@keyframes soundBarOff {
    100% {
        height: 10%
    }
}
@keyframes soundBar {
    0% {
        height: 1%
    }
    100% {
        height: 100%
    }
}
#suitcase_mobile {
    position: absolute;
    width: 1000px;
    height: 563px;
    background: transparent url(../images/sprite_suitcase.jpg);
    cursor: pointer
}
#loader_smoke {
    top: 30%;
    left: 45%;
    position: absolute;
    z-index: 1;
    text-align: center;
    width: 200px;
    height: 200px;
    opacity: 0
}
#loader_circle {
    margin-top: -285px;
    text-align: center;
    width: 500px;
    height: 281px;
    background: #000 url(../images/load_circle.gif) no-repeat center center
}