@charset "UTF-8";
#header {
    position: relative;
    z-index: 700
}
#header.open {
    z-index: 701
}
#header .header-inner {
    height: 100%
}
@media (max-width: 1024px) {
    #header {
        background: url(../media/global/header-bg.jpg) no-repeat center bottom;
        background-size: auto 100%;
        height: 106px;
        padding-bottom: 8px;
        background-color: #000;
        width: 100%;
        -webkit-transform: none!important;
        -ms-transform: none!important;
        transform: none!important
    }
}
@media (max-width: 659px) {
    #header {
        background: url(../media/global/header-bg-mobile.jpg) no-repeat center bottom;
        background-size: auto 100%
    }
}
#header .logo p {
    color: #f5f19a;
    font-family: ministry, sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    margin: .5em 0 0 0
}
#header .logo img {
    margin: 0 auto;
    display: block
}
@media (max-width: 1024px) {
    #header .logo {
        display: table;
        width: 100%;
        height: 100%
    }
    #header .logo .inner {
        display: table-cell;
        vertical-align: middle
    }
    #header .logo img {
        width: 225px
    }
}
@media (max-width: 659px) {
    #header .logo p {
        font-size: 10px;
        margin-top: .75em
    }
}
@media (max-width: 400px) {
    #header .logo img {
        width: 180px
    }
}
@media (min-width: 1025px) {
    #header .logo {
        display: table-row
    }
    #header .logo .inner {
        display: table-cell;
        padding: 25px 15px 22px 15px
    }
    #header .logo img {
        width: 220px
    }
    #header .logo p {
        margin-top: .75em
    }
}
#header .menu-toggle {
    display: none;
    position: absolute;
    width: 30px;
    height: 30px;
    top: 34px;
    left: 23px;
    z-index: 701
}
#header .menu-toggle .bg {
    width: 44px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}
#header .menu-toggle .bg:after,
#header .menu-toggle .bg:before {
    content: "";
    background-image: url(../media/global/primary-hexagon.png);
    background-size: contain;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}
#header .menu-toggle .bg:after {
    opacity: 0;
    z-index: 1
}
.no-touchevents #header .menu-toggle:hover .bg:after,
.touchevents #header .menu-toggle:active .bg:after {
    -webkit-animation: pulse .5s cubic-bezier(.25, .46, .45, .94);
    animation: pulse .5s cubic-bezier(.25, .46, .45, .94)
}
#header .menu-toggle:after,
#header .menu-toggle:before {
    content: "";
    display: block;
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: #f6e1bc;
    transition: width .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
    transition: transform .5s cubic-bezier(.19, 1, .22, 1), width .5s cubic-bezier(.19, 1, .22, 1);
    transition: transform .5s cubic-bezier(.19, 1, .22, 1), width .5s cubic-bezier(.19, 1, .22, 1), -webkit-transform .5s cubic-bezier(.19, 1, .22, 1);
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}
#header .menu-toggle:before {
    top: 9px;
    left: 5px;
    z-index: 3
}
#header .menu-toggle:after {
    bottom: 10px;
    left: 5px;
    z-index: 3
}
#header .menu-toggle.open {
    position: fixed
}
#header .menu-toggle.open:before {
    -webkit-transform: translate(0, 4px) rotate(45deg);
    -ms-transform: translate(0, 4px) rotate(45deg);
    transform: translate(0, 4px) rotate(45deg);
    width: 24px
}
#header .menu-toggle.open:after {
    -webkit-transform: translate(0, -5px) rotate(-45deg);
    -ms-transform: translate(0, -5px) rotate(-45deg);
    transform: translate(0, -5px) rotate(-45deg);
    width: 24px
}
@media (max-width: 1024px) {
    #header .menu-toggle {
        display: block
    }
}
#header .extras {
    display: none;
    color: #fff;
    background-color: #002213
}
#header .extras .center {
    padding-top: 20px;
    padding-left: 0;
    position: relative
}
#header .extras .center:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 8px;
    width: 100%;
    background-color: #00321c
}
#header .extras .tickets {
    margin: 0 auto 16px auto;
    width: 229px;
    height: 88px;
    display: table;
    position: relative;
    font-size: 20px;
    font-family: ministry, sans-serif;
    font-weight: 500
}
#header .extras .tickets:after,
#header .extras .tickets:before {
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(../media/global/menu/tickets-bg.png);
    background-size: cover;
    top: 0;
    left: 0;
    position: absolute
}
#header .extras .tickets:after {
    background-position: top right;
    opacity: 0;
    transition: opacity 250ms cubic-bezier(.19, 1, .22, 1)
}
.no-touchevents #header .extras .tickets:hover:after,
.touchevents #header .extras .tickets:active:after {
    opacity: 1
}
#header .extras .tickets a {
    color: #f5f19a;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 20px 25px 5px 25px;
    position: relative;
    z-index: 2
}
#header .extras .tickets a:hover {
    color: #f5f19a
}
@media (min-width: 1025px) {
    #header .extras {
        display: table-row
    }
}
#header .header-inner>.tickets {
    display: none;
    width: 52px;
    height: 38px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -60%);
    -ms-transform: translate(0, -60%);
    transform: translate(0, -60%);
    right: 10px;
    background: url(../media/global/menu/tickets-mobile.png) top left no-repeat;
    background-size: contain
}
@media (max-width: 659px) {
    #header .header-inner>.tickets {
        display: block
    }
}
@media (min-width: 1025px) {
    #header {
        width: 250px;
        height: 100%;
        position: fixed;
        top: 0;
        background: #016235 url(../media/global/menu/bg-desktop.jpg) top left no-repeat
    }
    #header .header-inner {
        display: table;
        z-index: 2
    }
    #header a {
        color: #f5f19a;
        transition: color 250ms cubic-bezier(.19, 1, .22, 1)
    }
    .no-touchevents #header a:hover,
    .touchevents #header a:active {
        color: #fff
    }
    #header .legal {
        font-family: alternate-gothic-no-1-d, sans-serif;
        padding: 0 16px;
        margin-bottom: 16px;
        text-align: center
    }
    #header .legal li {
        margin: 0 6px
    }
    #header .legal a {
        color: #a09c51
    }
    #header .legal a:hover {
        color: #f5f19a
    }
    #header .site-buttons {
        padding: 0 16px;
        margin-bottom: 16px;
        font-size: 0;
        text-align: center;
        display: none
    }
    #header .site-buttons:after {
        content: "";
        display: table;
        clear: both
    }
    #header .site-buttons.has-social.has-music {
        text-align: left
    }
    #header .site-buttons.has-music,
    #header .site-buttons.has-social {
        display: block
    }
    #header .site-buttons .social {
        float: left
    }
    #header .site-buttons .social .social-facebook:before {
        background-size: 175% 1247.61904762%;
        background-image: url(../media/global/social-sprites.png);
        background-position: 0 27.1784232365%;
        background-repeat: no-repeat;
        width: 12px;
        height: 21px
    }
    #header .site-buttons .social .social-facebook:after {
        background-size: 175% 1247.61904762%;
        background-image: url(../media/global/social-sprites.png);
        background-position: 0 18.0497925311%;
        background-repeat: no-repeat;
        width: 12px;
        height: 21px
    }
    #header .site-buttons .social .social-instagram:before {
        background-size: 95.4545454545% 1247.61904762%;
        background-image: url(../media/global/social-sprites.png);
        background-position: 0 63.6929460581%;
        background-repeat: no-repeat;
        width: 22px;
        height: 21px
    }
    #header .site-buttons .social .social-instagram:after {
        background-size: 95.4545454545% 1247.61904762%;
        background-image: url(../media/global/social-sprites.png);
        background-position: 0 0;
        background-repeat: no-repeat;
        width: 22px;
        height: 21px
    }
    #header .site-buttons .social .social-twitter:before {
        background-size: 95.4545454545% 1247.61904762%;
        background-image: url(../media/global/social-sprites.png);
        background-position: 0 100.20746888%;
        background-repeat: no-repeat;
        width: 22px;
        height: 21px
    }
    #header .site-buttons .social .social-twitter:after {
        background-size: 95.4545454545% 1247.61904762%;
        background-image: url(../media/global/social-sprites.png);
        background-position: 0 91.0788381743%;
        background-repeat: no-repeat;
        width: 22px;
        height: 21px
    }
    #header .site-buttons .social a:hover:before {
        transition-delay: 50ms;
        opacity: .5
    }
    #header .site-buttons .site-music {
        float: right
    }
    #header .site-buttons .site-music span {
        background-color: #a09c51
    }
    #header .site-buttons .site-music:hover span {
        background-color: #f5f19a
    }
    #header .site-buttons.has-social .music {
        float: right
    }
}
#menu {
    position: relative;
    font-family: alternate-gothic-no-1-d, sans-serif;
    z-index: 700
}
#menu .inner {
    position: relative;
    height: 100%;
    top: 0;
    left: -100%;
    z-index: 1
}
#menu .inner:before {
    position: absolute;
    top: 0;
    width: 100%;
    height: 120%;
    display: block;
    content: "";
    background-color: #ff000b;
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0
}
#menu.open .inner:before {
    -webkit-animation: menuAngle 650ms cubic-bezier(.19, 1, .22, 1);
    animation: menuAngle 650ms cubic-bezier(.19, 1, .22, 1);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}
#menu a {
    transition: color 250ms cubic-bezier(.19, 1, .22, 1);
    position: relative;
    z-index: 2
}
#menu span.outside {
    display: table;
    min-height: 50px
}
#menu span.inside {
    display: table-cell;
    padding: 0;
    vertical-align: middle
}
.fancy-fonts #menu span.offset {
    margin-top: .2em;
    display: inline-block
}
#menu .scroll {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    left: 0
}
#menu li {
    display: block;
    margin: 6px 0;
    position: relative;
    letter-spacing: .03em
}
#menu li:first-child {
    margin-top: 0
}
#menu li .icon:after,
#menu li .icon:before {
    position: absolute;
    top: 50%;
    left: 0;
    content: "";
    display: block;
    transition: opacity 250ms cubic-bezier(.19, 1, .22, 1);
    -webkit-transform: translateZ(0);
    margin-left: 0!important
}
#menu li[data-id=home] .icon:before {
    background-size: 100% 3495.65217391%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 39.7567221511%;
    background-repeat: no-repeat;
    width: 29px;
    height: 23px;
    margin-left: -14.5px;
    margin-top: -11.5px
}
#menu li[data-id=home] .icon:after {
    background-size: 100% 3495.65217391%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 36.6837387964%;
    background-repeat: no-repeat;
    width: 29px;
    height: 23px;
    margin-left: -14.5px;
    margin-top: -11.5px
}
#menu li[data-id=videos] .icon:before {
    background-size: 100% 3495.65217391%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 61.2676056338%;
    background-repeat: no-repeat;
    width: 29px;
    height: 23px;
    margin-left: -14.5px;
    margin-top: -11.5px
}
#menu li[data-id=videos] .icon:after {
    background-size: 100% 3495.65217391%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 64.3405889885%;
    background-repeat: no-repeat;
    width: 29px;
    height: 23px;
    margin-left: -14.5px;
    margin-top: -11.5px
}
#menu li[data-id=games] .icon:before {
    background-size: 96.6666666667% 3495.65217391%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 30.5377720871%;
    background-repeat: no-repeat;
    width: 30px;
    height: 23px;
    margin-left: -15px;
    margin-top: -11.5px
}
#menu li[data-id=games] .icon:after {
    background-size: 96.6666666667% 3495.65217391%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 27.4647887324%;
    background-repeat: no-repeat;
    width: 30px;
    height: 23px;
    margin-left: -15px;
    margin-top: -11.5px
}
#menu li[data-id=characters] .icon:before {
    background-size: 120.833333333% 3495.65217391%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 15.1728553137%;
    background-repeat: no-repeat;
    width: 24px;
    height: 23px;
    margin-left: -12px;
    margin-top: -11.5px;
    left: 3px
}
#menu li[data-id=characters] .icon:after {
    background-size: 120.833333333% 3495.65217391%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 42.8297055058%;
    background-repeat: no-repeat;
    width: 24px;
    height: 23px;
    margin-left: -12px;
    margin-top: -11.5px;
    left: 3px
}
#menu li[data-id=story] .icon:before {
    background-size: 100% 3495.65217391%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 76.6325224072%;
    background-repeat: no-repeat;
    width: 29px;
    height: 23px;
    margin-left: -14.5px;
    margin-top: -11.5px
}
#menu li[data-id=story] .icon:after {
    background-size: 100% 3495.65217391%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 73.5595390525%;
    background-repeat: no-repeat;
    width: 29px;
    height: 23px;
    margin-left: -14.5px;
    margin-top: -11.5px
}
#menu li[data-id=gallery] .icon:before {
    background-size: 96.6666666667% 3495.65217391%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 21.318822023%;
    background-repeat: no-repeat;
    width: 30px;
    height: 23px;
    margin-left: -15px;
    margin-top: -11.5px
}
#menu li[data-id=gallery] .icon:after {
    background-size: 96.6666666667% 3495.65217391%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 18.2458386684%;
    background-repeat: no-repeat;
    width: 30px;
    height: 23px;
    margin-left: -15px;
    margin-top: -11.5px
}
#menu li[data-id=partners] .icon:before {
    background-size: 100% 3654.54545455%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 3.2608695652%;
    background-repeat: no-repeat;
    width: 29px;
    height: 22px;
    margin-left: -14.5px;
    margin-top: -11px
}
#menu li[data-id=partners] .icon:after {
    background-size: 100% 3654.54545455%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 6.2020460358%;
    background-repeat: no-repeat;
    width: 29px;
    height: 22px;
    margin-left: -14.5px;
    margin-top: -11px
}
#menu li[data-id=products] .icon:before {
    background-size: 96.6666666667% 3495.65217391%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 58.1946222791%;
    background-repeat: no-repeat;
    width: 30px;
    height: 23px;
    margin-left: -15px;
    margin-top: -11.5px
}
#menu li[data-id=products] .icon:after {
    background-size: 96.6666666667% 3495.65217391%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 12.099871959%;
    background-repeat: no-repeat;
    width: 30px;
    height: 23px;
    margin-left: -15px;
    margin-top: -11.5px
}
#menu li[data-id=soundtrack] .icon:before {
    background-size: 96.6666666667% 2680%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 92.0542635659%;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    margin-top: -15px
}
#menu li[data-id=soundtrack] .icon:after {
    background-size: 96.6666666667% 2680%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 96.0594315245%;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    margin-top: -15px
}
#menu li[data-id=world] .icon:before {
    background-size: 100% 2772.4137931%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 88.064516129%;
    background-repeat: no-repeat;
    width: 29px;
    height: 29px;
    margin-left: -14.5px;
    margin-top: -14.5px
}
#menu li[data-id=world] .icon:after {
    background-size: 100% 2772.4137931%;
    background-image: url(../media/global/menu/menu-sprites.png);
    background-position: 0 84.1935483871%;
    background-repeat: no-repeat;
    width: 29px;
    height: 29px;
    margin-left: -14.5px;
    margin-top: -14.5px
}
#menu li[data-id=tickets] .icon:before {
    width: 34px;
    height: 19px;
    background-image: url(../media/global/menu/tickets-white.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 50%;
    left: -2px;
    margin-top: -9px
}
#menu li[data-id=tickets] .icon:after {
    width: 34px;
    height: 19px;
    background-image: url(../media/global/menu/tickets-lime.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 50%;
    left: -2px;
    margin-top: -9px
}
#menu li[data-id=soundtrack] .icon {
    top: 1px
}
#menu li[data-id=world] .icon {
    top: -1px
}
#menu .icon {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 100%
}
@media (max-width: 1024px) {
    #menu {
        display: none;
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0
    }
    #menu a {
        color: #f6e1bc;
        display: inline-block;
        padding-left: 44px
    }
    #menu li {
        font-size: 32px
    }
    #menu li:last-child {
        margin-bottom: 48px
    }
    #menu li[data-id=home] .icon:before {
        background-size: 100% 3495.65217391%;
        background-image: url(../media/global/menu/menu-sprites.png);
        background-position: 0 33.6107554417%;
        background-repeat: no-repeat;
        width: 29px;
        height: 23px;
        margin-left: -14.5px;
        margin-top: -11.5px
    }
    #menu li[data-id=videos] .icon:before {
        background-size: 100% 3495.65217391%;
        background-image: url(../media/global/menu/menu-sprites.png);
        background-position: 0 67.4135723431%;
        background-repeat: no-repeat;
        width: 29px;
        height: 23px;
        margin-left: -14.5px;
        margin-top: -11.5px
    }
    #menu li[data-id=games] .icon:before {
        background-size: 96.6666666667% 3495.65217391%;
        background-image: url(../media/global/menu/menu-sprites.png);
        background-position: 0 24.3918053777%;
        background-repeat: no-repeat;
        width: 30px;
        height: 23px;
        margin-left: -15px;
        margin-top: -11.5px
    }
    #menu li[data-id=characters] .icon:before {
        background-size: 120.833333333% 3495.65217391%;
        background-image: url(../media/global/menu/menu-sprites.png);
        background-position: 0 48.9756722151%;
        background-repeat: no-repeat;
        width: 24px;
        height: 23px;
        margin-left: -12px;
        margin-top: -11.5px
    }
    #menu li[data-id=story] .icon:before {
        background-size: 100% 3495.65217391%;
        background-image: url(../media/global/menu/menu-sprites.png);
        background-position: 0 70.4865556978%;
        background-repeat: no-repeat;
        width: 29px;
        height: 23px;
        margin-left: -14.5px;
        margin-top: -11.5px
    }
    #menu li[data-id=gallery] .icon:before {
        background-size: 96.6666666667% 3495.65217391%;
        background-image: url(../media/global/menu/menu-sprites.png);
        background-position: 0 55.1216389245%;
        background-repeat: no-repeat;
        width: 30px;
        height: 23px;
        margin-left: -15px;
        margin-top: -11.5px
    }
    #menu li[data-id=partners] .icon:before {
        background-size: 100% 3654.54545455%;
        background-image: url(../media/global/menu/menu-sprites.png);
        background-position: 0 9.1432225064%;
        background-repeat: no-repeat;
        width: 29px;
        height: 22px;
        margin-left: -14.5px;
        margin-top: -11px
    }
    #menu li[data-id=products] .icon:before {
        background-size: 96.6666666667% 3495.65217391%;
        background-image: url(../media/global/menu/menu-sprites.png);
        background-position: 0 52.0486555698%;
        background-repeat: no-repeat;
        width: 30px;
        height: 23px;
        margin-left: -15px;
        margin-top: -11.5px
    }
    #menu li[data-id=soundtrack] .icon:before {
        background-size: 96.6666666667% 2680%;
        background-image: url(../media/global/menu/menu-sprites.png);
        background-position: 0 100.064599483%;
        background-repeat: no-repeat;
        width: 30px;
        height: 30px;
        margin-left: -15px;
        margin-top: -15px
    }
    #menu li[data-id=world] .icon:before {
        background-size: 100% 2772.4137931%;
        background-image: url(../media/global/menu/menu-sprites.png);
        background-position: 0 80.3225806452%;
        background-repeat: no-repeat;
        width: 29px;
        height: 29px;
        margin-left: -14.5px;
        margin-top: -14.5px
    }
    #menu li[data-id=tickets] .icon:before {
        width: 34px;
        height: 19px;
        background-image: url(../media/global/menu/tickets-cream.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: 50%;
        margin-top: -9px
    }
    #menu ul {
        padding-bottom: 1px
    }
    #menu .scroll {
        padding: 0 26px;
        top: 100px;
        height: calc(100% - 100px)!important
    }
    #menu .icon:before {
        opacity: 1;
        z-index: 10
    }
}
@media (min-width: 660px) and (max-width: 1024px) {
    #menu {
        width: 50%
    }
}
@media (max-width: 659px) {
    #menu .inner {
        width: 100%
    }
}
@media (max-width: 1024px) and (max-height: 400px) {
    #menu .scroll {
        top: 80px;
        height: calc(100% - 80px)!important
    }
    #menu li {
        margin: 8px 0
    }
}
@media (min-width: 1025px) {
    #menu {
        display: table-row!important;
        width: 250px
    }
    #menu .inner {
        position: relative;
        display: table-cell;
        height: 100%;
        padding: 0 25px;
        left: auto!important
    }
    #menu .inner:before {
        display: none!important
    }
    #menu .arrow {
        display: block;
        position: absolute;
        width: 13px;
        height: 12px;
        bottom: 20px;
        right: 20px;
        transition: opacity 350ms cubic-bezier(.19, 1, .22, 1), -webkit-transform 350ms cubic-bezier(.19, 1, .22, 1);
        transition: opacity 350ms cubic-bezier(.19, 1, .22, 1), transform 350ms cubic-bezier(.19, 1, .22, 1);
        transition: opacity 350ms cubic-bezier(.19, 1, .22, 1), transform 350ms cubic-bezier(.19, 1, .22, 1), -webkit-transform 350ms cubic-bezier(.19, 1, .22, 1);
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        opacity: 0;
        z-index: 10
    }
    #menu .arrow:before {
        content: "";
        display: block;
        top: 0;
        left: 0;
        position: absolute;
        background-size: 223.076923077% 6700%;
        background-image: url(../media/global/menu/menu-sprites.png);
        background-position: 0 0;
        background-repeat: no-repeat;
        width: 13px;
        height: 12px
    }
    #menu.has-scroll .arrow {
        opacity: 1
    }
    #menu.flip-scroll .arrow {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    #menu .scroll {
        padding: 0
    }
    #menu .scroll ul {
        padding-bottom: 20px
    }
    #menu .icon {
        left: 24px
    }
    #menu .icon:before {
        opacity: 0;
        z-index: 10
    }
    #menu li {
        margin-right: 18px;
        min-height: 50px;
        position: relative;
        font-size: 0
    }
    #menu li a {
        display: inline-block;
        width: 100%;
        position: relative;
        font-size: 32px;
        padding-left: 68px
    }
    .no-touchevents #menu li a:hover .icon:before,
    .touchevents #menu li a:active .icon:before {
        opacity: 1
    }
    .no-touchevents #menu li a:hover .icon:after,
    .touchevents #menu li a:active .icon:after {
        opacity: 1
    }
    #menu li:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: url(../media/global/menu/active.png) no-repeat center center;
        background-size: 100% 100%;
        -webkit-transform: translate(-100%, 0);
        -ms-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
        transition: -webkit-transform 250ms cubic-bezier(.19, 1, .22, 1);
        transition: transform 250ms cubic-bezier(.19, 1, .22, 1);
        transition: transform 250ms cubic-bezier(.19, 1, .22, 1), -webkit-transform 250ms cubic-bezier(.19, 1, .22, 1)
    }
    #menu li.active:before,
    .no-touchevents #menu li:hover:before {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: .5
    }
}
#footer .mini-drawer,
#header .mini-drawer {
    position: absolute;
    bottom: 0;
    height: 0;
    width: 100%;
    font-size: 18px;
    z-index: 999;
    color: #f5f19a;
    font-family: alternate-gothic-no-1-d, sans-serif
}
#footer .mini-drawer .inner,
#header .mini-drawer .inner {
    padding: 24px 24px 1px 24px;
    background-color: #000;
    width: 100%;
    min-height: 100px;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}
#footer .mini-drawer li,
#header .mini-drawer li {
    display: block;
    margin: 6px 0
}
#footer .mini-drawer a,
#header .mini-drawer a {
    color: #a58442
}
.no-touchevents #footer .mini-drawer a:hover,
.no-touchevents #header .mini-drawer a:hover,
.touchevents #footer .mini-drawer a:active,
.touchevents #header .mini-drawer a:active {
    color: #f6e1bc
}
#footer .mini-drawer img,
#header .mini-drawer img {
    max-width: 100%;
    margin-bottom: 24px;
    display: block
}
#header .cover {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    z-index: 699;
    top: 0;
    left: 0
}
@media (min-width: 1025px) {
    #header .cover {
        display: none!important
    }
}
@-webkit-keyframes menuAngle {
    0% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg)
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}
@keyframes menuAngle {
    0% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg)
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}
#footer {
    position: fixed;
    bottom: 0;
    height: 0;
    width: 100%;
    z-index: 700;
    text-align: center;
    color: #f4ead3
}
@media (min-width: 1025px) {
    #footer {
        width: calc(100% - 250px);
        left: 250px
    }
}
#footer .drawer {
    font-size: 12px;
    width: 100%;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-backface-visibility: hidden;
    background-color: #000;
    padding: 1px 72px;
    position: relative;
    z-index: 1
}
#footer .drawer .billing {
    margin: 24px auto 24px auto;
    display: block;
    max-width: 100%
}
#footer .drawer ul {
    margin: 16px 0 8px 0;
    font-family: alternate-gothic-no-1-d, sans-serif
}
#footer .drawer li {
    margin: 0 12px
}
#footer .drawer li:first-child {
    margin-left: 0
}
#footer .drawer li:last-child {
    margin-left: 0
}
#footer .drawer a {
    color: #a58442;
    transition: color 250ms cubic-bezier(.19, 1, .22, 1)
}
.no-touchevents #footer .drawer a:hover,
.touchevents #footer .drawer a:active {
    color: #f6e1bc
}
#footer .drawer small {
    font-size: 11px;
    margin: 8px 0 16px 0;
    display: block;
    font-family: ministry, sans-serif;
    color: #a58442
}
#footer .drawer .close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 20px;
    right: 20px
}
#footer .drawer .close:after,
#footer .drawer .close:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: url(../media/global/x.png) no-repeat;
    background-size: 200% auto;
    transition: opacity 250ms
}
#footer .drawer .close:before {
    opacity: 0;
    background-position: top right
}
.no-touchevents #footer .drawer .close:hover,
.touchevents #footer .drawer .close:active {
    -webkit-animation: spin360 1s cubic-bezier(.19, 1, .22, 1);
    animation: spin360 1s cubic-bezier(.19, 1, .22, 1)
}
.no-touchevents #footer .drawer .close:hover:before,
.touchevents #footer .drawer .close:active:before {
    opacity: 1
}
.no-touchevents #footer .drawer .close:hover:after,
.touchevents #footer .drawer .close:active:after {
    opacity: 0
}
@media (min-width: 660px) {
    #footer .drawer {
        font-size: 24px;
        padding-top: 45px
    }
    #footer .drawer .billing {
        margin-bottom: 60px
    }
    #footer .drawer ul {
        margin-bottom: 16px
    }
    #footer .drawer small {
        margin-bottom: 50px
    }
}
@media (max-width: 659px) {
    #footer .drawer {
        padding: 32px 16px 1px 16px
    }
    #footer .drawer .close {
        right: 16px
    }
}
@media (max-width: 1024px) and (max-height: 400px) {
    #footer .drawer .billing {
        margin: 8px auto
    }
    #footer .drawer .close {
        top: 12px
    }
    #footer .drawer ul {
        margin: 8px 0
    }
    #footer .drawer small {
        margin: 8px 0
    }
}
#footer .extras {
    display: table;
    padding: 0 16px;
    line-height: 60px;
    height: 60px;
    position: absolute;
    background-color: #002213;
    bottom: 0;
    width: 100%;
    text-align: right
}
#footer .extras:after {
    content: "";
    display: table;
    clear: both
}
#footer .extras .tickets {
    float: left;
    font-family: ministry, sans-serif;
    font-weight: 500;
    color: #f6e1bc;
    font-size: 18px
}
#footer .extras .tickets a {
    color: #f5f19a
}
.no-touchevents #footer .extras .tickets a:hover span:after,
.touchevents #footer .extras .tickets a:active span:after {
    opacity: 1
}
#footer .extras .tickets span {
    width: 33px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-top: -.1em;
    margin-right: 8px
}
#footer .extras .tickets span:after,
#footer .extras .tickets span:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(../media/global/tickets-icon.png);
    background-size: 200% auto
}
#footer .extras .tickets span:after {
    background-position: right top;
    opacity: 0;
    transition: opacity 250ms cubic-bezier(.19, 1, .22, 1)
}
#footer .extras .site-buttons {
    display: inline-block
}
#footer .extras .site-buttons .social {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px
}
#footer .extras .site-buttons .social a {
    padding: 0 6px;
    margin: 0 2px
}
#footer .extras .site-buttons .social .social-facebook:before {
    background-size: 175% 1247.61904762%;
    background-image: url(../media/global/social-sprites.png);
    background-position: 0 27.1784232365%;
    background-repeat: no-repeat;
    width: 12px;
    height: 21px
}
#footer .extras .site-buttons .social .social-facebook:after {
    background-size: 175% 1247.61904762%;
    background-image: url(../media/global/social-sprites.png);
    background-position: 0 18.0497925311%;
    background-repeat: no-repeat;
    width: 12px;
    height: 21px
}
#footer .extras .site-buttons .social .social-instagram:before {
    background-size: 95.4545454545% 1247.61904762%;
    background-image: url(../media/global/social-sprites.png);
    background-position: 0 63.6929460581%;
    background-repeat: no-repeat;
    width: 22px;
    height: 21px
}
#footer .extras .site-buttons .social .social-instagram:after {
    background-size: 95.4545454545% 1247.61904762%;
    background-image: url(../media/global/social-sprites.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 22px;
    height: 21px
}
#footer .extras .site-buttons .social .social-twitter:before {
    background-size: 95.4545454545% 1247.61904762%;
    background-image: url(../media/global/social-sprites.png);
    background-position: 0 100.20746888%;
    background-repeat: no-repeat;
    width: 22px;
    height: 21px
}
#footer .extras .site-buttons .social .social-twitter:after {
    background-size: 95.4545454545% 1247.61904762%;
    background-image: url(../media/global/social-sprites.png);
    background-position: 0 91.0788381743%;
    background-repeat: no-repeat;
    width: 22px;
    height: 21px
}
#footer .extras .site-buttons .site-music {
    margin-right: 4px
}
#footer .extras .site-buttons .site-music span {
    background-color: #a09c51
}
#footer .extras .site-buttons .site-music:hover span {
    background-color: #f5f19a
}
#footer .extras .legal {
    display: inline-block;
    font-family: alternate-gothic-no-1-d, sans-serif;
    vertical-align: middle;
    margin-right: 4px
}
#footer .extras .legal li {
    margin: 0 8px
}
#footer .extras .legal li:first-child {
    margin-left: 0
}
#footer .extras .legal li:last-child {
    margin-right: 0
}
#footer .extras .legal,
#footer .extras .legal a {
    color: #a09c51;
    transition: color 250ms cubic-bezier(.19, 1, .22, 1)
}
.no-touchevents #footer .extras .legal a:hover,
.no-touchevents #footer .extras .legal:hover,
.touchevents #footer .extras .legal a:active,
.touchevents #footer .extras .legal:active {
    color: #f5f19a
}
@media (min-width: 1025px) {
    #footer .extras {
        display: none
    }
}
@media (max-width: 659px) {
    #footer .extras {
        display: none
    }
}
#footer .mobile {
    width: 100%;
    position: absolute;
    bottom: 0;
    display: none;
    font-family: alternate-gothic-no-1-d, sans-serif;
    background-color: #002213
}
#footer .mobile a {
    color: #a09c51
}
.no-touchevents #footer .mobile a:hover,
.touchevents #footer .mobile a:active {
    color: #f5f19a
}
#footer .mobile li {
    margin: 6px 8px
}
@media (max-width: 659px) {
    #footer .mobile {
        display: block
    }
}
#footer .mini-drawer {
    height: auto;
    max-width: 250px;
    text-align: left;
    left: auto;
    right: 0;
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    transform: translate(0, 100%)
}
#footer .mini-drawer .inner {
    padding-left: 24px
}
#characters .page-inner {
    vertical-align: top
}
@media (max-width: 659px) {
    #characters .page-inner {
        background: url(../media/characters/bg-mobile-top.jpg) no-repeat center top, url(../media/characters/bg-mobile-tile.jpg) repeat-y center top;
        background-size: 100% auto
    }
}
@media (min-width: 660px) {
    #characters {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }
}
#characters .icons {
    display: none;
    font-size: 16px;
    position: absolute;
    top: 30px;
    right: 28px;
    width: 21.25em
}
#characters .icons li {
    width: 3.75em;
    height: 3.75em;
    margin: 0 .25em 2px .25em;
    position: relative;
    display: block;
    float: left
}
#characters .icons li:first-child {
    margin-left: 2em
}
#characters .icons li:last-child,
#characters .icons li:nth-child(4) {
    margin-right: 0
}
#characters .icons a {
    display: block
}
#characters .icons a span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3
}
#characters .icons a:after,
#characters .icons a:before {
    opacity: 0;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%
}
#characters .icons a:before {
    opacity: 1;
    z-index: 3;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    transition: -webkit-transform 250ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 250ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 250ms cubic-bezier(.19, 1, .22, 1), -webkit-transform 250ms cubic-bezier(.19, 1, .22, 1)
}
#characters .icons a:after {
    border: solid 2px #f6e1bc;
    border-radius: 50%;
    z-index: 2;
    -webkit-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5);
    transition: opacity 250ms cubic-bezier(.19, 1, .22, 1), -webkit-transform 250ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 250ms cubic-bezier(.19, 1, .22, 1), opacity 250ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 250ms cubic-bezier(.19, 1, .22, 1), opacity 250ms cubic-bezier(.19, 1, .22, 1), -webkit-transform 250ms cubic-bezier(.19, 1, .22, 1)
}
.no-touchevents #characters .icons a:hover:after {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}
#characters .icons li.active a:before {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}
#characters .icons li.active a:after {
    opacity: 0!important;
    transition-delay: .2s
}
#characters .icons li[data-id=lloyd] a span {
    background-size: 133.333333333% 1091.78082192%;
    background-image: url(../media/characters/icons.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 2.625em;
    height: 2.28125em;
    top: .625em;
    left: .5625em
}
#characters .icons li[data-id=lloyd] a:before {
    background-color: #33b924
}
#characters .icons li[data-id=kai] a span {
    background-size: 140% 838.947368421%;
    background-image: url(../media/characters/icons.png);
    background-position: 0 83.9031339031%;
    background-repeat: no-repeat;
    width: 2.5em;
    height: 2.96875em;
    top: 0;
    left: .625em
}
#characters .icons li[data-id=kai] a:before {
    background-color: #bf0807
}
#characters .icons li[data-id=jay] a span {
    background-size: 127.272727273% 1021.79487179%;
    background-image: url(../media/characters/icons.png);
    background-position: 0 10.2920723227%;
    background-repeat: no-repeat;
    width: 2.75em;
    height: 2.4375em;
    top: .5625em;
    left: .5625em
}
#characters .icons li[data-id=jay] a:before {
    background-color: #034cce
}
#characters .icons li[data-id=cole] a span {
    background-size: 130.23255814% 905.681818182%;
    background-image: url(../media/characters/icons.png);
    background-position: 0 56.6995768688%;
    background-repeat: no-repeat;
    width: 2.6875em;
    height: 2.75em;
    top: .3125em;
    left: .4375em
}
#characters .icons li[data-id=cole] a:before {
    background-color: #e55808
}
#characters .icons li[data-id=zane] a span {
    background-size: 169.696969697% 1021.79487179%;
    background-image: url(../media/characters/icons.png);
    background-position: 0 21.4186369958%;
    background-repeat: no-repeat;
    width: 2.0625em;
    height: 2.4375em;
    top: .5625em;
    left: .875em
}
#characters .icons li[data-id=zane] a:before {
    background-color: #55d4ea
}
#characters .icons li[data-id=nya] a span {
    background-size: 125.842696629% 948.80952381%;
    background-image: url(../media/characters/icons.png);
    background-position: 0 44.3197755961%;
    background-repeat: no-repeat;
    width: 2.78125em;
    height: 2.625em;
    top: .4375em;
    left: .5em
}
#characters .icons li[data-id=nya] a:before {
    background-color: #06c1ff
}
#characters .icons li[data-id=wu] a span {
    background-size: 98.2456140351% 711.607142857%;
    background-image: url(../media/characters/icons.png);
    background-position: 0 100.145985401%;
    background-repeat: no-repeat;
    width: 3.5625em;
    height: 3.5em;
    top: .5625em;
    left: .125em
}
#characters .icons li[data-id=wu] a:before {
    background-color: #d9b145
}
#characters .icons li[data-id=garmadon] a span {
    background-size: 103.703703704% 838.947368421%;
    background-image: url(../media/characters/icons.png);
    background-position: 0 70.0854700855%;
    background-repeat: no-repeat;
    width: 3.375em;
    height: 2.96875em;
    top: .0625em;
    left: .25em
}
#characters .icons li[data-id=garmadon] a:before {
    background-color: #485cad
}
#characters .icons li[data-id=koko] a span {
    background-size: 116.666666667% 996.25%;
    background-image: url(../media/characters/icons.png);
    background-position: 0 32.6359832636%;
    background-repeat: no-repeat;
    width: 3em;
    height: 2.5em;
    top: .5em;
    left: .375em
}
#characters .icons li[data-id=koko] a:before {
    background-color: #a164cb
}
@media (min-width: 660px) {
    #characters .icons {
        display: block
    }
}
@media (min-width: 660px) and (max-width: 1024px) {
    #characters .icons {
        top: 20px;
        right: 20px;
        font-size: 12px
    }
}
@media (min-width: 660px) and (max-width: 1024px) and (max-height: 720px) and (max-width: 999px) {
    #characters .icons {
        display: none
    }
}
@media (min-width: 1025px) and (max-height: 740px) {
    #characters .icons {
        top: 20px;
        right: 20px;
        font-size: 13px
    }
}
#characters .background {
    display: none
}
@media (min-width: 660px) {
    #characters .background {
        width: 100%;
        height: 100%;
        display: block
    }
}
#characters .background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}
#characters .buttons {
    font-size: 1em;
    width: 8.0625em;
    height: 6em;
    position: absolute;
    z-index: 5;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}
#characters .buttons .next,
#characters .buttons .prev {
    position: absolute;
    width: 4.3125em;
    height: 3.75em;
    background: no-repeat center center;
    background-size: contain;
    transition: opacity 250ms cubic-bezier(.19, 1, .22, 1)
}
#characters .buttons .next .pulse,
#characters .buttons .prev .pulse {
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    background: url(../media/gallery/arrow.png) no-repeat right center;
    background-size: cover
}
#characters .buttons .next.active .pulse,
#characters .buttons .prev.active .pulse {
    -webkit-animation: pulse .5s cubic-bezier(.25, .46, .45, .94);
    animation: pulse .5s cubic-bezier(.25, .46, .45, .94)
}
#characters .buttons .next svg,
#characters .buttons .prev svg {
    opacity: 0;
    position: relative;
    z-index: 99
}
#characters .buttons .prev {
    top: 0;
    left: 0;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}
#characters .buttons .next {
    bottom: 0;
    right: 0
}
#characters .buttons .next:after,
#characters .buttons .next:before,
#characters .buttons .prev:after,
#characters .buttons .prev:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../media/gallery/arrow.png) left top no-repeat;
    background-size: auto 100%;
    -webkit-backface-visibility: hidden;
    transition: opacity 250ms cubic-bezier(.19, 1, .22, 1) 50ms;
    z-index: 1
}
.no-touchevents #characters .buttons .next:after,
.no-touchevents #characters .buttons .next:before,
.no-touchevents #characters .buttons .prev:after,
.no-touchevents #characters .buttons .prev:before {
    transition-duration: 0;
    transition-delay: 0
}
#characters .buttons .next:after,
#characters .buttons .prev:after {
    transition: opacity 250ms cubic-bezier(.19, 1, .22, 1) 50ms;
    background-position: right top;
    opacity: 0;
    z-index: 2
}
#characters .buttons .next.active:after,
#characters .buttons .prev.active:after {
    opacity: 1
}
@media (min-width: 1025px) {
    #characters .buttons {
        right: 30px
    }
}
@media (min-width: 660px) and (max-width: 1024px) {
    #characters .buttons {
        right: 20px
    }
}
@media (min-width: 660px) and (max-width: 1024px) and (max-width: 999px) {
    #characters .buttons {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        top: auto;
        bottom: 20px;
        right: 20px
    }
}
@media (min-width: 660px) and (max-width: 1024px) and (max-height: 720px) and (max-width: 999px) {
    #characters .buttons {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        top: 20px;
        right: 20px;
        font-size: 14px
    }
}
@media (min-width: 1025px) and (max-width: 1230px) {
    #characters .buttons {
        top: auto;
        bottom: 30px;
        right: 30px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}
@media (max-width: 659px) {
    #characters .buttons {
        display: none
    }
}
#characters .characters-slider {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
@media (min-width: 660px) {
    #characters .characters-slider {
        top: 86%;
        left: 50%;
        position: relative;
        background: url(../media/characters/slide-rail-desktop.png) no-repeat center center;
        background-size: auto 100%;
        z-index: 100;
        height: 1%
    }
    #characters .characters-slider .trolly {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        width: 23%;
        position: absolute;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        cursor: pointer
    }
    #characters .characters-slider .trolly:before {
        content: "";
        display: block;
        padding-top: 86.9565217391%
    }
    #characters .characters-slider .trolly:after {
        z-index: 1;
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: url(../media/characters/slide-trolly-desktop.png) no-repeat center center;
        background-size: contain
    }
    #characters .characters-slider .trolly.animate {
        transition: -webkit-transform .1s ease-out;
        transition: transform .1s ease-out;
        transition: transform .1s ease-out, -webkit-transform .1s ease-out
    }
    #characters .characters-slider .trolly .pulse {
        content: "";
        z-index: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        background: url(../media/characters/slide-trolly-desktop.png) no-repeat right center;
        background-size: cover
    }
    #characters .characters-slider .trolly:hover .pulse {
        -webkit-animation: pulse .5s cubic-bezier(.25, .46, .45, .94);
        animation: pulse .5s cubic-bezier(.25, .46, .45, .94)
    }
}
@media (max-width: 659px) {
    #characters .characters li {
        display: block!important;
        opacity: 1!important
    }
    #characters .characters .content {
        padding: 0 24px
    }
    #characters .characters h2 {
        font-size: 36px;
        margin: 16px 0 0 0;
        font-weight: 400
    }
    #characters .characters h3 {
        font-size: 18px;
        text-align: center;
        margin: 0;
        min-width: 0;
        display: block;
        letter-spacing: .2em;
        font-weight: 500
    }
    #characters .characters .copy {
        color: #f6e1bc;
        font-family: ministry, sans-serif;
        font-weight: 200;
        font-size: 15px
    }
    #characters .characters .copy p:first-child {
        margin-top: 0
    }
    #characters .characters .copy p:last-child {
        margin-bottom: 0
    }
    #characters .characters .download {
        margin-top: 16px;
        position: relative;
        z-index: 1000
    }
    #characters .characters .download a {
        color: #f6e1bc;
        font-family: alternate-gothic-no-1-d, sans-serif;
        font-size: 18px;
        display: inline-block;
        line-height: 30px;
        position: relative;
        z-index: 2
    }
    #characters .characters .download a:before {
        content: "";
        width: 11px;
        height: 13px;
        background: url(../media/characters/download-arrow.png);
        background-size: contain;
        display: block;
        left: 20px;
        top: 50%;
        margin-top: -7px;
        position: absolute
    }
    #characters .characters .download a>span {
        display: inline-block;
        padding: 0 10px 0 30px;
        height: 30px;
        position: relative;
        top: 2px
    }
    #characters .characters .download svg {
        position: absolute;
        top: 0;
        left: 0
    }
    #characters .characters .header:after,
    #characters .characters .header:before {
        content: "";
        height: 4px;
        width: 100%;
        display: block
    }
    #characters .characters .header:before {
        margin-bottom: -1px
    }
    #characters .characters .header:after {
        margin-top: -1px
    }
    #characters .characters .header .prop {
        padding-top: 48.48%;
        position: relative
    }
    #characters .characters .header .inner {
        position: absolute;
        top: 0;
        width: 100%;
        left: 0;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top
    }
    #characters .characters .header .figure {
        width: 100%;
        position: absolute;
        overflow: hidden;
        bottom: 0;
        left: 0;
        -webkit-perspective: 1000;
        perspective: 1000
    }
    .csstransforms3d #characters .characters .header .figure.flip .flipper {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg)
    }
    .no-csstransforms3d #characters .characters .header .figure .front {
        opacity: 1
    }
    .no-csstransforms3d #characters .characters .header .figure .back {
        opacity: 0
    }
    .no-csstransforms3d #characters .characters .header .figure.flip .front {
        opacity: 0
    }
    .no-csstransforms3d #characters .characters .header .figure.flip .back {
        opacity: 1
    }
    #characters .characters .header .flipper {
        transition: .6s;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: relative;
        height: 100%;
        width: 100%
    }
    #characters .characters .header .front {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 110%;
        z-index: 2;
        -webkit-transform: rotateY(0);
        transform: rotateY(0)
    }
    #characters .characters .header .back {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 110%;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg)
    }
    #characters .characters .header .back img,
    #characters .characters .header .front img {
        display: block;
        width: 100%;
        height: auto;
        position: absolute;
        bottom: 0
    }
    #characters .characters .header .slide-wrap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0
    }
    #characters .characters .header .slide {
        width: 36.3636363636%;
        position: absolute;
        background: url(../media/characters/slide-rail.png) no-repeat center center;
        background-size: contain;
        right: 4.5%;
        top: 23.125%;
        z-index: 10
    }
    #characters .characters .header .slide:before {
        content: "";
        display: block;
        padding-top: 8.3333333333%
    }
    #characters .characters .header .slide .trolly {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        width: 38.333%;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer
    }
    #characters .characters .header .slide .trolly:before {
        content: "";
        display: block;
        padding-top: 86.9565217391%
    }
    #characters .characters .header .slide .trolly:before {
        position: relative;
        background: url(../media/characters/slide-trolly.png) no-repeat center center;
        background-size: contain;
        z-index: 2
    }
    #characters .characters .header .slide .trolly .pulse {
        z-index: 1;
        width: 100%;
        height: 100%;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        background: url(../media/characters/slide-trolly.png) no-repeat right center;
        background-size: cover
    }
    .no-touchevents #characters .characters .header .slide .trolly:hover .pulse {
        -webkit-animation: pulse .5s cubic-bezier(.25, .46, .45, .94);
        animation: pulse .5s cubic-bezier(.25, .46, .45, .94)
    }
    #characters .characters .header .slide .trolly.animate {
        transition: -webkit-transform .1s ease-out;
        transition: transform .1s ease-out;
        transition: transform .1s ease-out, -webkit-transform .1s ease-out
    }
    #characters .characters li[data-id=lloyd] {
        padding-top: 15%
    }
    #characters .characters li[data-id=lloyd] h2,
    #characters .characters li[data-id=lloyd] h3 {
        color: #0a7e01;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=lloyd] h2, #characters .characters li[data-id=lloyd] h3 {
            background-image: linear-gradient(to bottom, #0a7e01, #32b723)
        }
    }
}
@media screen and (max-width: 659px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=lloyd] h2,
    #characters .characters li[data-id=lloyd] h3 {
        background-image: linear-gradient(to bottom, #0a7e01, #32b723)
    }
}
@media (max-width: 659px) {
    #characters .characters li[data-id=lloyd] .download polygon {
        fill: #33b924
    }
    #characters .characters li[data-id=lloyd] .header:after,
    #characters .characters li[data-id=lloyd] .header:before {
        background-color: #33b924
    }
    #characters .characters li[data-id=lloyd] .inner {
        background-image: url(../media/characters/lloyd-bg-mobile.jpg)
    }
    #characters .characters li[data-id=lloyd] .figure {
        height: 128.75%;
        width: 70%;
        left: -2%
    }
    #characters .characters li[data-id=lloyd] .figure img {
        bottom: 2%
    }
    #characters .characters li[data-id=kai] {
        padding-top: 24%
    }
    #characters .characters li[data-id=kai] h2,
    #characters .characters li[data-id=kai] h3 {
        color: #a60000;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=kai] h2, #characters .characters li[data-id=kai] h3 {
            background-image: linear-gradient(to bottom, #a60000, #fe000a)
        }
    }
}
@media screen and (max-width: 659px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=kai] h2,
    #characters .characters li[data-id=kai] h3 {
        background-image: linear-gradient(to bottom, #a60000, #fe000a)
    }
}
@media (max-width: 659px) {
    #characters .characters li[data-id=kai] .download polygon {
        fill: #bf0807
    }
    #characters .characters li[data-id=kai] .header:after,
    #characters .characters li[data-id=kai] .header:before {
        background-color: #bf0807
    }
    #characters .characters li[data-id=kai] .inner {
        background-image: url(../media/characters/kai-bg-mobile.jpg)
    }
    #characters .characters li[data-id=kai] .figure {
        height: 169.68%;
        width: 77.57%;
        left: 2%;
        padding-right: 20px
    }
    #characters .characters li[data-id=kai] .figure img {
        bottom: 4%
    }
    #characters .characters li[data-id=jay] {
        padding-top: 22%
    }
    #characters .characters li[data-id=jay] h2,
    #characters .characters li[data-id=jay] h3 {
        color: #004890;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=jay] h2, #characters .characters li[data-id=jay] h3 {
            background-image: linear-gradient(to bottom, #004890, #0569f9)
        }
    }
}
@media screen and (max-width: 659px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=jay] h2,
    #characters .characters li[data-id=jay] h3 {
        background-image: linear-gradient(to bottom, #004890, #0569f9)
    }
}
@media (max-width: 659px) {
    #characters .characters li[data-id=jay] .download polygon {
        fill: #034cce
    }
    #characters .characters li[data-id=jay] .header:after,
    #characters .characters li[data-id=jay] .header:before {
        background-color: #034cce
    }
    #characters .characters li[data-id=jay] .inner {
        background-image: url(../media/characters/jay-bg-mobile.jpg)
    }
    #characters .characters li[data-id=jay] .figure {
        height: 170%;
        width: 70.3%;
        left: 2%
    }
    #characters .characters li[data-id=jay] .figure img {
        bottom: 4%
    }
    #characters .characters li[data-id=cole] {
        padding-top: 23%
    }
    #characters .characters li[data-id=cole] h2,
    #characters .characters li[data-id=cole] h3 {
        color: #9a3406;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=cole] h2, #characters .characters li[data-id=cole] h3 {
            background-image: linear-gradient(to bottom, #9a3406, #f56410)
        }
    }
}
@media screen and (max-width: 659px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=cole] h2,
    #characters .characters li[data-id=cole] h3 {
        background-image: linear-gradient(to bottom, #9a3406, #f56410)
    }
}
@media (max-width: 659px) {
    #characters .characters li[data-id=cole] .download polygon {
        fill: #e55808
    }
    #characters .characters li[data-id=cole] .header:after,
    #characters .characters li[data-id=cole] .header:before {
        background-color: #e55808
    }
    #characters .characters li[data-id=cole] .inner {
        background-image: url(../media/characters/cole-bg-mobile.jpg)
    }
    #characters .characters li[data-id=cole] .figure {
        height: 170%;
        width: 75.3%;
        left: -3%
    }
    #characters .characters li[data-id=cole] .figure img {
        bottom: 4%
    }
    #characters .characters li[data-id=zane] {
        padding-top: 24%
    }
    #characters .characters li[data-id=zane] h2,
    #characters .characters li[data-id=zane] h3 {
        color: #0689a3;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=zane] h2, #characters .characters li[data-id=zane] h3 {
            background-image: linear-gradient(to bottom, #0689a3, #7bf5fb)
        }
    }
}
@media screen and (max-width: 659px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=zane] h2,
    #characters .characters li[data-id=zane] h3 {
        background-image: linear-gradient(to bottom, #0689a3, #7bf5fb)
    }
}
@media (max-width: 659px) {
    #characters .characters li[data-id=zane] .download polygon {
        fill: #55d4ea
    }
    #characters .characters li[data-id=zane] .header:after,
    #characters .characters li[data-id=zane] .header:before {
        background-color: #55d4ea
    }
    #characters .characters li[data-id=zane] .inner {
        background-image: url(../media/characters/zane-bg-mobile.jpg)
    }
    #characters .characters li[data-id=zane] .figure {
        height: 170%;
        width: 75.3%;
        left: -9%
    }
    #characters .characters li[data-id=zane] .figure img {
        bottom: 4%
    }
    #characters .characters li[data-id=nya] {
        padding-top: 25%
    }
    #characters .characters li[data-id=nya] h2,
    #characters .characters li[data-id=nya] h3 {
        color: #0d6dae;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=nya] h2, #characters .characters li[data-id=nya] h3 {
            background-image: linear-gradient(to bottom, #0d6dae, #07d1ff)
        }
    }
}
@media screen and (max-width: 659px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=nya] h2,
    #characters .characters li[data-id=nya] h3 {
        background-image: linear-gradient(to bottom, #0d6dae, #07d1ff)
    }
}
@media (max-width: 659px) {
    #characters .characters li[data-id=nya] .download polygon {
        fill: #06c1ff
    }
    #characters .characters li[data-id=nya] .header:after,
    #characters .characters li[data-id=nya] .header:before {
        background-color: #06c1ff
    }
    #characters .characters li[data-id=nya] .inner {
        background-image: url(../media/characters/nya-bg-mobile.jpg)
    }
    #characters .characters li[data-id=nya] .figure {
        height: 170%;
        width: 74.69%;
        left: 7%
    }
    #characters .characters li[data-id=nya] .figure img {
        bottom: 4%
    }
    #characters .characters li[data-id=wu] {
        padding-top: 24%
    }
    #characters .characters li[data-id=wu] h2,
    #characters .characters li[data-id=wu] h3 {
        color: #90740b;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=wu] h2, #characters .characters li[data-id=wu] h3 {
            background-image: linear-gradient(to bottom, #90740b, #e8c74e)
        }
    }
}
@media screen and (max-width: 659px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=wu] h2,
    #characters .characters li[data-id=wu] h3 {
        background-image: linear-gradient(to bottom, #90740b, #e8c74e)
    }
}
@media (max-width: 659px) {
    #characters .characters li[data-id=wu] .download polygon {
        fill: #d9b145
    }
    #characters .characters li[data-id=wu] .header:after,
    #characters .characters li[data-id=wu] .header:before {
        background-color: #d9b145
    }
    #characters .characters li[data-id=wu] .inner {
        background-image: url(../media/characters/wu-bg-mobile.jpg)
    }
    #characters .characters li[data-id=wu] .figure {
        height: 170%;
        width: 78.1818181818%;
        left: -11%
    }
    #characters .characters li[data-id=wu] .figure img {
        bottom: 4%
    }
    #characters .characters li[data-id=garmadon] {
        padding-top: 24%
    }
    #characters .characters li[data-id=garmadon] h2,
    #characters .characters li[data-id=garmadon] h3 {
        color: #1d348d;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=garmadon] h2, #characters .characters li[data-id=garmadon] h3 {
            background-image: linear-gradient(to bottom, #1d348d, #3f55c6)
        }
    }
}
@media screen and (max-width: 659px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=garmadon] h2,
    #characters .characters li[data-id=garmadon] h3 {
        background-image: linear-gradient(to bottom, #1d348d, #3f55c6)
    }
}
@media (max-width: 659px) {
    #characters .characters li[data-id=garmadon] .download polygon {
        fill: #485cad
    }
    #characters .characters li[data-id=garmadon] .header:after,
    #characters .characters li[data-id=garmadon] .header:before {
        background-color: #485cad
    }
    #characters .characters li[data-id=garmadon] .inner {
        background-image: url(../media/characters/garmadon-bg-mobile.jpg)
    }
    #characters .characters li[data-id=garmadon] .figure {
        height: 160%;
        width: 90.1515151515%;
        left: -11%
    }
    #characters .characters li[data-id=garmadon] .figure img {
        bottom: 3%
    }
    #characters .characters li[data-id=koko] {
        padding-top: 24%
    }
    #characters .characters li[data-id=koko] h2,
    #characters .characters li[data-id=koko] h3 {
        color: #a164cb;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=koko] h2, #characters .characters li[data-id=koko] h3 {
            background-image: linear-gradient(to bottom, #a164cb, #582c76)
        }
    }
}
@media screen and (max-width: 659px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=koko] h2,
    #characters .characters li[data-id=koko] h3 {
        background-image: linear-gradient(to bottom, #a164cb, #582c76)
    }
}
@media (max-width: 659px) {
    #characters .characters li[data-id=koko] .download polygon {
        fill: #a164cb
    }
    #characters .characters li[data-id=koko] .header:after,
    #characters .characters li[data-id=koko] .header:before {
        background-color: #a164cb
    }
    #characters .characters li[data-id=koko] .inner {
        background-image: url(../media/characters/koko-bg-mobile.jpg)
    }
    #characters .characters li[data-id=koko] .figure {
        height: 135%;
        width: 45.9090909091%;
        left: 20%
    }
    #characters .characters li[data-id=koko] .figure img {
        bottom: 1.85%
    }
    #characters .characters li:last-child {
        margin-bottom: 3em
    }
}
@media (min-width: 660px) {
    #characters .characters {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 50%;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        z-index: 2
    }
    #characters .characters .header {
        display: none
    }
    #characters .characters li {
        display: none
    }
    #characters .characters .text-mask {
        display: block;
        overflow: hidden
    }
    #characters .characters h2 {
        text-align: left;
        margin: 0 0 -.2em -.025em;
        font-weight: 400
    }
    #characters .characters h3 {
        text-align: left;
        margin: 0;
        font-size: 36px;
        font-weight: 400;
        letter-spacing: .1em
    }
    #characters .characters .copy {
        width: 60%;
        max-width: 420px;
        min-width: 316px;
        overflow: hidden;
        font-family: ministry, sans-serif;
        font-weight: 200;
        color: #f6e1bc;
        line-height: 1.5em;
        position: relative
    }
    #characters .characters .copy p:first-child {
        margin-top: 0
    }
    #characters .characters .copy p:last-child {
        margin-bottom: 0
    }
    #characters .characters .download {
        position: relative;
        margin-top: 24px
    }
    #characters .characters .download a {
        font-size: 24px;
        font-family: alternate-gothic-no-1-d, sans-serif;
        color: #f6e1bc;
        position: relative;
        z-index: 2;
        display: inline-block;
        line-height: 1.75em;
        letter-spacing: .1em
    }
    #characters .characters .download a:before {
        content: "";
        width: .4583333333em;
        height: .5416666667em;
        background: url(../media/characters/download-arrow.png);
        background-size: contain;
        display: block;
        left: 1.1666666667em;
        top: 50%;
        margin-top: -.2916666667em;
        position: absolute
    }
    #characters .characters .download a>span {
        display: inline-block;
        padding: 0 .6666666667em 0 1.5em;
        height: 1.75em;
        position: relative;
        top: .06em
    }
    #characters .characters .download svg {
        position: absolute;
        top: 0;
        left: 0;
        opacity: .4
    }
    #characters .characters .download polygon {
        transition: all 250ms cubic-bezier(.19, 1, .22, 1)
    }
    #characters .characters .download.hover svg {
        opacity: 1
    }
    #characters .characters li[data-id=lloyd] .hover svg polygon {
        fill: #33b924
    }
    #characters .characters li[data-id=garmadon] .hover svg polygon {
        fill: #485cad
    }
    #characters .characters li[data-id=wu] .hover svg polygon {
        fill: #d9b145
    }
    #characters .characters li[data-id=nya] .hover svg polygon {
        fill: #06c1ff
    }
    #characters .characters li[data-id=cole] .hover svg polygon {
        fill: #e55808
    }
    #characters .characters li[data-id=jay] .hover svg polygon {
        fill: #034cce
    }
    #characters .characters li[data-id=kai] .hover svg polygon {
        fill: #bf0807
    }
    #characters .characters li[data-id=zane] .hover svg polygon {
        fill: #55d4ea
    }
    #characters .characters li[data-id=koko] .hover svg polygon {
        fill: #a164cb
    }
    #characters .characters .iScrollVerticalScrollbar {
        display: none!important;
        right: 5px!important;
        height: 160px!important;
        bottom: auto!important;
        overflow: visible!important
    }
    #characters .characters .iScrollVerticalScrollbar:after {
        content: "";
        width: 2px;
        left: 50%;
        position: absolute;
        top: 1px;
        bottom: 1px;
        margin-left: -1px;
        background-color: #f6e1bc
    }
    #characters .characters .iScrollVerticalScrollbar .iScrollIndicator {
        width: 15px!important;
        height: 19px!important;
        left: -4px;
        border: none!important;
        background: url(../media/characters/scroll-indicator.png) center center no-repeat!important;
        background-size: contain!important
    }
}
@media (min-width: 660px) and (min-width: 1025px) {
    #characters .characters h2 {
        font-size: 120px
    }
    #characters .characters .copy {
        height: 193px;
        margin-top: 24px
    }
    #characters .characters .scroll {
        padding-right: 40px
    }
    #characters .characters .iScrollVerticalScrollbar {
        height: 160px!important
    }
}
@media (min-width: 660px) and (min-width: 1025px) and (max-height: 740px) {
    #characters .characters h2 {
        font-size: 72px
    }
    #characters .characters .copy {
        height: 128px;
        margin-top: 10px;
        font-size: 14px
    }
    #characters .characters .download {
        margin-top: 16px
    }
    #characters .characters .iScrollVerticalScrollbar {
        height: 112px!important
    }
}
@media (min-width: 660px) and (min-width: 660px) and (max-width: 1024px) {
    #characters .characters h2 {
        font-size: 72px
    }
    #characters .characters .copy {
        height: 128px;
        margin-top: 10px;
        font-size: 14px
    }
    #characters .characters .scroll {
        padding-right: 30px
    }
}
@media (min-width: 660px) and (min-width: 660px) and (max-width: 1024px) and (max-height: 720px) {
    #characters .characters .download {
        margin-top: 12px
    }
    #characters .characters .download a {
        font-size: 18px
    }
}
@media (min-width: 660px) and (min-width: 660px) and (max-width: 1024px) {
    #characters .characters .iScrollVerticalScrollbar {
        height: 112px!important
    }
}
@media (min-width: 660px) {
    #characters .characters li[data-id=lloyd] h2,
    #characters .characters li[data-id=lloyd] h3 {
        color: #0a5103;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=lloyd] h2, #characters .characters li[data-id=lloyd] h3 {
            background-image: linear-gradient(to bottom, #093103, #0a5103)
        }
    }
}
@media screen and (min-width: 660px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=lloyd] h2,
    #characters .characters li[data-id=lloyd] h3 {
        background-image: linear-gradient(to bottom, #093103, #0a5103)
    }
}
@media (min-width: 660px) {
    #characters .characters li[data-id=kai] h2,
    #characters .characters li[data-id=kai] h3 {
        color: #230101;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=kai] h2, #characters .characters li[data-id=kai] h3 {
            background-image: linear-gradient(to bottom, #230101, #560404)
        }
    }
}
@media screen and (min-width: 660px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=kai] h2,
    #characters .characters li[data-id=kai] h3 {
        background-image: linear-gradient(to bottom, #230101, #560404)
    }
}
@media (min-width: 660px) {
    #characters .characters li[data-id=jay] h2,
    #characters .characters li[data-id=jay] h3 {
        color: #001557;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=jay] h2, #characters .characters li[data-id=jay] h3 {
            background-image: linear-gradient(to bottom, #001557, #002678)
        }
    }
}
@media screen and (min-width: 660px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=jay] h2,
    #characters .characters li[data-id=jay] h3 {
        background-image: linear-gradient(to bottom, #001557, #002678)
    }
}
@media (min-width: 660px) {
    #characters .characters li[data-id=cole] h2,
    #characters .characters li[data-id=cole] h3 {
        color: #271101;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=cole] h2, #characters .characters li[data-id=cole] h3 {
            background-image: linear-gradient(to bottom, #271101, #560404)
        }
    }
}
@media screen and (min-width: 660px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=cole] h2,
    #characters .characters li[data-id=cole] h3 {
        background-image: linear-gradient(to bottom, #271101, #560404)
    }
}
@media (min-width: 660px) {
    #characters .characters li[data-id=zane] h2,
    #characters .characters li[data-id=zane] h3 {
        color: #022936;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=zane] h2, #characters .characters li[data-id=zane] h3 {
            background-image: linear-gradient(to bottom, #022936, #005972)
        }
    }
}
@media screen and (min-width: 660px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=zane] h2,
    #characters .characters li[data-id=zane] h3 {
        background-image: linear-gradient(to bottom, #022936, #005972)
    }
}
@media (min-width: 660px) {
    #characters .characters li[data-id=nya] h2,
    #characters .characters li[data-id=nya] h3 {
        color: #012837;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=nya] h2, #characters .characters li[data-id=nya] h3 {
            background-image: linear-gradient(to bottom, #012837, #015a6f)
        }
    }
}
@media screen and (min-width: 660px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=nya] h2,
    #characters .characters li[data-id=nya] h3 {
        background-image: linear-gradient(to bottom, #012837, #015a6f)
    }
}
@media (min-width: 660px) {
    #characters .characters li[data-id=wu] h2,
    #characters .characters li[data-id=wu] h3 {
        color: #322502;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=wu] h2, #characters .characters li[data-id=wu] h3 {
            background-image: linear-gradient(to bottom, #322502, #6e4c08)
        }
    }
}
@media screen and (min-width: 660px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=wu] h2,
    #characters .characters li[data-id=wu] h3 {
        background-image: linear-gradient(to bottom, #322502, #6e4c08)
    }
}
@media (min-width: 660px) {
    #characters .characters li[data-id=garmadon] h2,
    #characters .characters li[data-id=garmadon] h3 {
        color: #080e2d;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=garmadon] h2, #characters .characters li[data-id=garmadon] h3 {
            background-image: linear-gradient(to bottom, #080e2d, #132671)
        }
    }
}
@media screen and (min-width: 660px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=garmadon] h2,
    #characters .characters li[data-id=garmadon] h3 {
        background-image: linear-gradient(to bottom, #080e2d, #132671)
    }
}
@media (min-width: 660px) {
    #characters .characters li[data-id=koko] h2,
    #characters .characters li[data-id=koko] h3 {
        color: #3e1e54;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        #characters .characters li[data-id=koko] h2, #characters .characters li[data-id=koko] h3 {
            background-image: linear-gradient(to bottom, #3e1e54, #712da0)
        }
    }
}
@media screen and (min-width: 660px) and (-webkit-min-device-pixel-ratio: 0) {
    #characters .characters li[data-id=koko] h2,
    #characters .characters li[data-id=koko] h3 {
        background-image: linear-gradient(to bottom, #3e1e54, #712da0)
    }
}
#characters.has-scroll .characters li .iScrollVerticalScrollbar {
    display: block!important
}
#downloads {
    font-family: ministry, sans-serif;
    color: #f5f19a;
    padding: 40px
}
#downloads .logo {
    font-size: 15px;
    display: inline-block;
    text-align: center
}
#downloads .logo a {
    border: none
}
#downloads .logo strong {
    display: block;
    margin-bottom: 2em;
    font-size: 15px
}
#downloads .logo img {
    width: 220px
}
#downloads #download {
    margin-top: 2em
}
#downloads #download img {
    width: 100%;
    display: block
}
#gallery .page-inner {
    position: relative
}
#gallery .wrap {
    width: 100%;
    height: 100%;
    position: relative
}
#gallery .slides {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    top: 0
}
#gallery .slides .layer {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
#gallery .slides .image {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    background-size: cover;
    left: 50%;
    position: relative
}
#gallery .slides ul {
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none
}
#gallery .slides li {
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
    float: left;
    overflow: hidden
}
#gallery .buttons {
    font-size: 1em;
    width: 8.0625em;
    height: 6em;
    position: absolute;
    z-index: 2;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}
#gallery .buttons .next,
#gallery .buttons .prev {
    position: absolute;
    width: 4.3125em;
    height: 3.75em;
    background: no-repeat center center;
    background-size: contain;
    transition: opacity 250ms cubic-bezier(.19, 1, .22, 1)
}
#gallery .buttons .next .pulse,
#gallery .buttons .prev .pulse {
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    background: url(../media/gallery/arrow.png) no-repeat right center;
    background-size: cover
}
#gallery .buttons .next.active .pulse,
#gallery .buttons .prev.active .pulse {
    -webkit-animation: pulse .5s cubic-bezier(.25, .46, .45, .94);
    animation: pulse .5s cubic-bezier(.25, .46, .45, .94)
}
#gallery .buttons .next svg,
#gallery .buttons .prev svg {
    opacity: 0;
    position: relative;
    z-index: 99
}
#gallery .buttons .next.disabled,
#gallery .buttons .prev.disabled {
    opacity: .15
}
#gallery .buttons .next.disabled a,
#gallery .buttons .prev.disabled a {
    pointer-events: none
}
#gallery .buttons .prev {
    top: 0;
    left: 0;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}
#gallery .buttons .next {
    bottom: 0;
    right: 0
}
#gallery .buttons .next:after,
#gallery .buttons .next:before,
#gallery .buttons .prev:after,
#gallery .buttons .prev:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../media/gallery/arrow.png) left top no-repeat;
    background-size: auto 100%;
    -webkit-backface-visibility: hidden;
    transition: opacity 250ms cubic-bezier(.19, 1, .22, 1) 50ms;
    z-index: 1
}
.touchevents #gallery .buttons .next:after,
.touchevents #gallery .buttons .next:before,
.touchevents #gallery .buttons .prev:after,
.touchevents #gallery .buttons .prev:before {
    transition-duration: 0;
    transition-delay: 0
}
#gallery .buttons .next:after,
#gallery .buttons .prev:after {
    transition: opacity 250ms cubic-bezier(.19, 1, .22, 1) 50ms;
    background-position: right top;
    opacity: 0;
    z-index: 2
}
#gallery .buttons .next.active:after,
#gallery .buttons .prev.active:after {
    opacity: 1
}
@media (min-width: 1025px) {
    #gallery .buttons {
        right: 30px
    }
}
@media (min-width: 660px) and (max-width: 1024px) {
    #gallery .buttons {
        right: 20px
    }
}
@media (max-width: 659px) {
    #gallery .buttons {
        top: auto;
        margin: 0;
        font-size: .75em;
        left: 50%;
        -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        bottom: 20px
    }
}
#funandgames {
    overflow: hidden
}
#funandgames .page-outer {
    background: url(../media/games/bg.jpg) no-repeat center center;
    background-size: cover
}
#funandgames .page-inner {
    vertical-align: top
}
#funandgames .header {
    padding: 1px 0
}
#funandgames .header .menu {
    text-align: center;
    margin: 0;
    padding: 20px 0
}
#funandgames .header .menu.small {
    padding-top: 40px
}
#funandgames .header .menu.medium {
    padding-top: 60px
}
#funandgames .header .menu.large {
    padding-top: 80px
}
#funandgames .header .menu .inner {
    position: relative;
    text-align: center;
    margin: 0 20px
}
#funandgames .header .menu ul {
    position: relative;
    z-index: 5;
    display: inline-block
}
#funandgames .header .menu li {
    position: relative
}
#funandgames .header .menu svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 3
}
#funandgames .header .menu svg polygon {
    background-color: #000
}
#funandgames .header .menu a:after {
    content: "";
    width: 0;
    height: 2px;
    background-color: #cc341f;
    position: absolute;
    display: block;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    top: auto;
    transition: width .3s cubic-bezier(.19, 1, .22, 1)
}
#funandgames .header .menu .active a {
    color: #f6e1bc
}
#funandgames .header .menu .active a:after {
    width: 30px
}
@media (min-width: 660px) {
    #funandgames .header .menu {
        font-size: 24px
    }
    #funandgames .header .menu li {
        margin: 0 20px 0 20px;
        padding-top: 8px;
        padding-bottom: 6px
    }
}
@media (max-width: 659px) {
    #funandgames .header .menu {
        font-size: 18px
    }
    #funandgames .header .menu li {
        margin: 0 12px 0 12px;
        padding-top: 6px;
        padding-bottom: 4px
    }
}
#funandgames .header .menu {
    padding-top: 0
}
#funandgames .header .menu a {
    cursor: pointer;
    cursor: hand
}
#funandgames .header h2 {
    margin: 0;
    position: relative;
    z-index: 1;
    line-height: 1em
}
@media (min-width: 660px) and (min-height: 900px) {
    #funandgames .header .menu {
        padding-bottom: 60px
    }
    #funandgames .header h2 {
        font-size: 120px;
        margin-top: 90px
    }
}
@media (min-width: 660px) and (max-height: 899px) {
    #funandgames .header .menu {
        padding-bottom: 20px
    }
    #funandgames .header h2 {
        font-size: 72px;
        margin-top: 16px
    }
    .fancy-fonts #funandgames .header h2 {
        margin-bottom: -4px
    }
}
@media (max-width: 659px) {
    #funandgames .header h2 {
        font-size: 36px;
        margin-top: 6px
    }
}
#funandgames h3 {
    font-weight: 400;
    color: #f6e1bc;
    display: inline-block;
    font-size: 4em;
    margin: 0;
    min-width: 300px;
    padding: 0 0 10px 0;
    text-align: right
}
#funandgames .hexes {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    width: 95%;
    height: 100%;
    z-index: 1
}
#funandgames .hexes ul.container {
    height: 29.6875em;
    position: relative
}
#funandgames .hexes ul.container li.column {
    height: 100%;
    width: 17.6875em;
    display: block;
    float: left;
    position: relative
}
#funandgames .hexes ul.container li.column:nth-child(odd) .hex:nth-child(1) {
    top: -10.25em;
    background-image: url(../media/games/hex-top.png)
}
#funandgames .hexes ul.container li.column:nth-child(odd) .hex:nth-child(2) {
    top: 10.375em;
    background-image: url(../media/games/hex-bottom.png)
}
#funandgames .hexes ul.container li.column:nth-child(even) .hex:nth-child(1) {
    top: 0
}
#funandgames .hexes ul.container li.column:nth-child(even) .hex:nth-child(2) {
    top: 20.6875em;
    background-image: url(../media/games/hex-bottom.png)
}
#funandgames .hexes ul.container li.column:first-child {
    width: 8.5625em
}
#funandgames .hexes ul.container li.column:first-child .hex {
    left: -9.125em
}
#funandgames .hexes ul.container li.column:last-child:nth-child(even) {
    width: 0
}
#funandgames .hexes ul.container li.column:last-child:nth-child(even) .hex:nth-child(1) {
    background-image: url(../media/games/hex-top.png)
}
#funandgames .hexes ul.container li.column:last-child:nth-child(even) .hex:nth-child(2) {
    display: none
}
#funandgames .hexes ul.container li.column:last-child:nth-child(odd) {
    width: 0
}
#funandgames .hexes ul.container li.column:last-child:nth-child(odd) .hex:nth-child(1) {
    display: none
}
#funandgames .hexes.thick .item.hex:before {
    background-image: url(../media/games/hex-outline-thick.png)
}
#funandgames .hexes.thick .item.hex .overlay:after {
    background-image: url(../media/games/hex-cream-outline-thick.png)
}
#funandgames .hexes.thick .item.hex .overlay.play:after {
    background-image: url(../media/games/play-thick.png)!important
}
#funandgames .hexes.thick .item.hex .overlay.download:after {
    background-image: url(../media/games/download-thick.png)!important
}
#funandgames .hex {
    width: 22.3125em;
    height: 19.375em;
    background-repeat: no-repeat;
    background-size: contain;
    left: 0;
    z-index: 1;
    position: absolute;
    transition: -webkit-transform .3s cubic-bezier(.19, 1, .22, 1);
    transition: transform .3s cubic-bezier(.19, 1, .22, 1);
    transition: transform .3s cubic-bezier(.19, 1, .22, 1), -webkit-transform .3s cubic-bezier(.19, 1, .22, 1)
}
.csspointerevents #funandgames .hex {
    pointer-events: none
}
#funandgames .hex.title {
    background-image: none!important;
    text-align: right
}
#funandgames .hex.title h3 {
    background-image: url(../media/games/underline.png);
    background-position: 99% 99%;
    background-repeat: no-repeat;
    background-size: 1.3000520021em .4333412779em;
    color: #000;
    min-width: 0;
    right: .625em;
    text-align: right;
    top: 3.25em;
    position: relative
}
#funandgames .hex h4 {
    bottom: 8%;
    color: #f6e1bc;
    font-family: ministry, sans-serif;
    font-size: 1.1111111111em;
    margin: 0;
    padding: 0 25%;
    position: absolute;
    text-align: center;
    width: 100%
}
#funandgames .hex .overlay {
    background-size: cover;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2
}
.csspointerevents #funandgames .hex .overlay {
    pointer-events: none
}
#funandgames .hex .overlay:after,
#funandgames .hex .overlay:before {
    transition: all .2s cubic-bezier(.25, .46, .45, .94);
    background-image: url(../media/games/bk-hex.png);
    background-size: cover;
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}
#funandgames .hex .overlay:after {
    background-image: url(../media/games/hex-cream-outline.png)
}
#funandgames .hex .overlay.download:after,
#funandgames .hex .overlay.play:after {
    transition: opacity .2s cubic-bezier(.25, .46, .45, .94);
    content: "";
    width: 2.0625em;
    height: 2em;
    display: block;
    left: 50%;
    top: 50%;
    position: absolute;
    -webkit-transform: translate(-40%, -50%);
    -ms-transform: translate(-40%, -50%);
    transform: translate(-40%, -50%);
    background-image: url(../media/games/play.png)!important;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0
}
#funandgames .hex .overlay.wallpaper:before {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0)
}
#funandgames .hex .overlay.download:after {
    background-image: url(../media/games/download.png)!important;
    width: 1.875em;
    height: 2.25em;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}
#funandgames .hex.hover,
#funandgames .hex.hoverForce {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05)
}
#funandgames .hex.hover .overlay a,
#funandgames .hex.hoverForce .overlay a {
    pointer-events: auto
}
#funandgames .hex.hover .overlay.download:before,
#funandgames .hex.hover .overlay.play:before,
#funandgames .hex.hoverForce .overlay.download:before,
#funandgames .hex.hoverForce .overlay.play:before {
    opacity: 1;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3)
}
#funandgames .hex.hover .overlay.wallpaper:before,
#funandgames .hex.hoverForce .overlay.wallpaper:before {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}
#funandgames .hex.hover .overlay.wallpaper:after,
#funandgames .hex.hoverForce .overlay.wallpaper:after {
    opacity: 1
}
#funandgames .hex.hover .overlay.wallpaper ul,
#funandgames .hex.hoverForce .overlay.wallpaper ul {
    opacity: 1
}
#funandgames .hex.hover .overlay.download:after,
#funandgames .hex.hover .overlay.play:after,
#funandgames .hex.hoverForce .overlay.download:after,
#funandgames .hex.hoverForce .overlay.play:after {
    opacity: 1
}
#funandgames .hex.item {
    z-index: 3
}
#funandgames .hex.item:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background: url(../media/games/hex-outline.png) center center no-repeat;
    background-size: cover
}
#funandgames .hex.item svg {
    position: relative;
    z-index: 3
}
#funandgames .hex.item svg polygon {
    fill-opacity: 0;
    pointer-events: auto
}
#funandgames .hex.item svg polygon:hover {
    fill: #369!important;
    opacity: 1!important
}
#funandgames .hex.item .overlay ul {
    height: auto;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    width: 50%;
    position: relative;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    opacity: 0;
    transition: opacity .2s cubic-bezier(.25, .46, .45, .94);
    z-index: 10
}
#funandgames .hex.item .overlay ul li {
    display: inline-block;
    float: none;
    height: 2em;
    margin: 0 .5em 0 .5em;
    padding: 0;
    width: 2em
}
@media (max-width: 659px) {
    #funandgames .hex.item .overlay ul li {
        height: 2.6em;
        width: 2.6em
    }
}
#funandgames .hex.item .overlay ul li a {
    display: block;
    position: relative;
    height: 100%!important;
    margin: 0;
    padding: 0;
    width: 100%!important
}
#funandgames .hex.item .overlay ul li a:after,
#funandgames .hex.item .overlay ul li a:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover
}
#funandgames .hex.item .overlay ul li a:after {
    opacity: 0;
    background-position: left
}
.no-touchevents #funandgames .hex.item .overlay ul li a:hover:before,
.touchevents #funandgames .hex.item .overlay ul li a:active:before {
    opacity: 0
}
.no-touchevents #funandgames .hex.item .overlay ul li a:hover:after,
.touchevents #funandgames .hex.item .overlay ul li a:active:after {
    opacity: 1
}
#funandgames .hex.item .overlay ul li:nth-child(4),
#funandgames .hex.item .overlay ul li:nth-child(5),
#funandgames .hex.item .overlay ul li:nth-child(6) {
    margin-top: 1em
}
#funandgames .hex.item .overlay ul li.desktop a:before {
    background-image: url(../media/games/icon-desktop-cream.png)
}
#funandgames .hex.item .overlay ul li.desktop a:after {
    background-image: url(../media/games/icon-desktop-white.png)
}
#funandgames .hex.item .overlay ul li.phone a:before {
    background-image: url(../media/games/icon-phone-cream.png)
}
#funandgames .hex.item .overlay ul li.phone a:after {
    background-image: url(../media/games/icon-phone-white.png)
}
#funandgames .hex.item .overlay ul li.tablet a:before {
    background-image: url(../media/games/icon-tablet-cream.png)
}
#funandgames .hex.item .overlay ul li.tablet a:after {
    background-image: url(../media/games/icon-tablet-white.png)
}
#funandgames .hex.item .overlay ul li.facebook a:before {
    background-image: url(../media/games/icon-facebook-cream.png)
}
#funandgames .hex.item .overlay ul li.facebook a:after {
    background-image: url(../media/games/icon-facebook-white.png)
}
#funandgames .hex.item .overlay ul li.twitter a:before {
    background-image: url(../media/games/icon-twitter-cream.png)
}
#funandgames .hex.item .overlay ul li.twitter a:after {
    background-image: url(../media/games/icon-twitter-white.png)
}
#funandgames .hex.item .overlay ul li.google a:before {
    background-image: url(../media/games/icon-google-cream.png)
}
#funandgames .hex.item .overlay ul li.google a:after {
    background-image: url(../media/games/icon-google-white.png)
}
#funandgames .hex.item.is-wallpaper .overlay {
    z-index: 5
}
#funandgames .hex.item.hover .overlay,
#funandgames .hex.item.hoverForce .overlay {
    display: block
}
#home .page-inner {
    vertical-align: top
}
#home .scene {
    position: relative
}
#home .scene canvas {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0
}
@media (min-width: 660px) {
    #home .scene {
        height: 100%;
        width: 100%;
        position: absolute;
        overflow: hidden
    }
}
@media (max-width: 659px) {
    #home .scene {
        width: 100%;
        height: 315px;
        overflow: hidden
    }
    #home .scene .fade {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 20%
    }
}
@media (max-width: 659px) {
    #home .wrap {
        background: url(../media/home/bg-mobile.jpg) no-repeat center 7px;
        background-size: 100%;
        padding: 0 0 1px 0
    }
    #home .wrap .bar {
        height: 8px;
        background: #00321c;
        background-size: auto 100%
    }
}
#home .promos {
    font-family: Ministry;
    z-index: 2
}
#home .promos .next,
#home .promos .prev {
    position: absolute;
    display: block;
    z-index: 2;
    top: 50%;
    left: 0;
    width: 20px;
    height: 36px;
    margin-top: -18px;
    padding: 8px
}
#home .promos .next span,
#home .promos .prev span {
    content: "";
    display: block;
    width: 8px;
    height: 20px;
    position: absolute;
    top: 8px;
    left: 8px;
    background: url(../media/home/promo-arrow.png) no-repeat left top;
    background-size: cover;
    transition: opacity 250ms cubic-bezier(.19, 1, .22, 1)
}
#home .promos .next {
    right: 0;
    left: auto;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}
#home .promos .inner:hover .promo {
    box-shadow: inset 0 0 40px 0 rgba(2, 5, 9, .75)
}
#home .promos .promo {
    display: block;
    height: 100%;
    position: relative;
    background-size: cover;
    font-size: .8125em
}
#home .promos .promo.has-title:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../media/home/title-bg.png) repeat-x left bottom;
    background-size: auto 100%
}
#home .promos .promo .title {
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 6%;
    color: #f6e1bc
}
#home .promos .no-csspointerevents .owl-carousel {
    border: solid 2px #a58442
}
.csspointerevents #home .promos .owl-carousel:before {
    top: 0;
    left: 0;
    right: -1px;
    bottom: 0;
    position: absolute;
    content: "";
    pointer-events: none;
    border: solid 2px #a58442;
    z-index: 1
}
#home .promos .owl-item a {
    box-shadow: inset 0 0 10px 0 transparent;
    transition: box-shadow .3s ease-in-out
}
@media (min-width: 660px) {
    #home .promos {
        position: absolute;
        width: 24.25em;
        height: 15.5625em;
        background: url(../media/home/promo-bg.png) no-repeat center center;
        background-size: 100% auto
    }
    #home .promos .inner {
        width: 17.1875em;
        height: 9.25em;
        position: absolute;
        top: 50%;
        left: 19.3298969072%;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%)
    }
    #home .promos .scroll {
        width: 100%;
        height: 100%;
        position: relative
    }
    #home .promos .owl-item {
        height: 9.25em
    }
}
@media (min-width: 1025px) {
    #home .promos {
        top: 16px;
        right: 24px
    }
    #home .promos .promo {
        font-size: .875em
    }
}
@media (min-width: 660px) and (max-width: 1024px) {
    #home .promos {
        top: 12px;
        right: 12px;
        font-size: .7em
    }
}
@media (max-width: 659px) {
    #home .promos {
        position: relative;
        width: 100%;
        padding: 14.3939393939% 9.0909090909% 17.1212121212% 9.0909090909%;
        background: url(../media/home/promo-bg-mobile.png) no-repeat center center;
        background-size: contain;
        margin-top: 3.6363636364%
    }
    #home .promos .inner {
        width: 100%;
        margin: 0 auto;
        position: relative
    }
    #home .promos .inner:before {
        content: "";
        display: block;
        padding-top: 53.007518797%
    }
    #home .promos .scroll {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0
    }
    #home .promos .owl-item,
    #home .promos .owl-stage,
    #home .promos .owl-stage-outer {
        height: 100%
    }
    #home .promos .promo {
        font-size: 4vw
    }
}
#home .marketing {
    display: table;
    position: absolute
}
#home .marketing .inner {
    display: table-row
}
@media (min-width: 1025px) {
    #home .marketing {
        width: 480px;
        height: 110px;
        top: 24px;
        left: 40px
    }
}
@media (min-width: 1025px) and (max-width: 1200px) {
    #home .marketing {
        left: 24px;
        width: 440px
    }
}
@media (min-width: 660px) and (max-width: 1024px) {
    #home .marketing {
        top: 24px;
        left: 16px;
        height: 70px;
        width: 320px
    }
}
@media (max-width: 659px) {
    #home .marketing {
        top: 12px;
        left: 16px;
        height: 50px;
        width: calc(100% - 32px);
        right: 18px
    }
}
#home .quotes {
    display: table-cell;
    position: relative;
    height: 100%;
    vertical-align: middle
}
#home .quotes li {
    width: 100%;
    display: none;
    position: relative;
    opacity: 0;
    color: #fff;
    font-family: Ministry
}
#home .quotes .center {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}
#home .quotes .quote {
    font-weight: 200;
    overflow: hidden
}
#home .quotes .quote span {
    padding-left: .4em;
    text-indent: -.4em;
    margin-bottom: .75em;
    display: inline-block
}
#home .quotes .author {
    font-weight: 500;
    overflow: hidden
}
#home .quotes .author span {
    padding-left: .55em;
    display: inline-block
}
@media (min-width: 1025px) {
    #home .quotes .quote {
        font-size: 22px
    }
    #home .quotes .author {
        font-size: 14px
    }
}
@media (min-width: 1025px) and (max-width: 1200px) {
    #home .quotes .quote {
        font-size: 20px
    }
    #home .quotes .author {
        font-size: 13px
    }
}
@media (min-width: 660px) and (max-width: 1024px) {
    #home .quotes .quote {
        font-size: 14px
    }
    #home .quotes .author {
        font-size: 9px
    }
}
@media (max-width: 659px) {
    #home .quotes .quote {
        font-size: 3vw
    }
    #home .quotes .quote span {
        margin-bottom: .25em
    }
    #home .quotes .author {
        font-size: 2vw
    }
}
@media (max-width: 500px) {
    #home .quotes .quote {
        font-size: 3.5vw
    }
    #home .quotes .author {
        font-size: 2.5vw
    }
}
@media (max-width: 400px) {
    #home .quotes .quote {
        font-size: 4vw
    }
    #home .quotes .author {
        font-size: 3vw
    }
}
#home .badge {
    display: table-cell;
    position: relative;
    padding-right: 20px;
    z-index: 3
}
#home .badge.no-badge {
    width: 0!important
}
#home .badge img {
    width: 100%;
    height: auto;
    max-width: 120px
}
#home .badge span {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    height: 100%;
    max-width: 120px
}
@media (min-width: 1025px) {
    #home .badge {
        padding-right: 40px;
        width: 160px
    }
}
@media (min-width: 1025px) and (max-width: 1200px) {
    #home .badge {
        padding-right: 20px;
        width: 140px
    }
}
@media (min-width: 660px) and (max-width: 1024px) {
    #home .badge {
        width: 100px;
        padding-right: 20px
    }
}
@media (max-width: 659px) {
    #home .badge {
        width: 70px;
        padding-right: 15px
    }
}
#home .social {
    display: none;
    text-align: center
}
@media (max-width: 659px) {
    #home .social {
        display: block;
        margin-top: 5.4545454545%;
        margin-bottom: 5.4545454545%
    }
    #home .social li a {
        padding: 0 15px
    }
}
@-webkit-keyframes homeExploreStart {
    0% {
        background-position: 0 0
    }
    6.666666666666667% {
        background-position: -185px 0
    }
    13.333333333333334% {
        background-position: -370px 0
    }
    20% {
        background-position: -555px 0
    }
    26.666666666666668% {
        background-position: -740px 0
    }
    33.333333333333336% {
        background-position: 0 -67px
    }
    40% {
        background-position: -185px -67px
    }
    46.66666666666667% {
        background-position: -370px -67px
    }
    53.333333333333336% {
        background-position: -555px -67px
    }
    60% {
        background-position: -740px -67px
    }
    66.66666666666667% {
        background-position: 0 -134px
    }
    73.33333333333334% {
        background-position: -185px -134px
    }
    80% {
        background-position: -370px -134px
    }
    86.66666666666667% {
        background-position: -555px -134px
    }
    100% {
        background-position: -740px -134px
    }
}
@keyframes homeExploreStart {
    0% {
        background-position: 0 0
    }
    6.666666666666667% {
        background-position: -185px 0
    }
    13.333333333333334% {
        background-position: -370px 0
    }
    20% {
        background-position: -555px 0
    }
    26.666666666666668% {
        background-position: -740px 0
    }
    33.333333333333336% {
        background-position: 0 -67px
    }
    40% {
        background-position: -185px -67px
    }
    46.66666666666667% {
        background-position: -370px -67px
    }
    53.333333333333336% {
        background-position: -555px -67px
    }
    60% {
        background-position: -740px -67px
    }
    66.66666666666667% {
        background-position: 0 -134px
    }
    73.33333333333334% {
        background-position: -185px -134px
    }
    80% {
        background-position: -370px -134px
    }
    86.66666666666667% {
        background-position: -555px -134px
    }
    100% {
        background-position: -740px -134px
    }
}
#partners {
    background-color: red!important
	
}
#partners .page-outer {
    background: url(../media/partners/bg.jpg) no-repeat center center;
    background-size: cover
}
#partners .page-inner {
    vertical-align: top
}
#partners .content {
    padding: 0 40px;
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
	text-align: center;
}
#partners svg {
    position: relative;
    z-index: 10
}
#partners polygon {
    fill: transparent
}
@media (max-width: 659px) {
    #partners .content {
        height: calc(100% + 80px)
    }
	#partners {
    top: -30px;
	
}
}
#partners .header h2 {
    margin: 0;
    position: relative;
    z-index: 1
}
.fancy-fonts #partners .header h2 {
    margin-bottom: -.25em
}
@media (min-width: 660px) and (min-height: 900px) {
    #partners .header {
        margin-bottom: 00px
    }
    #partners .header h2 {
        font-size: 120px;
        padding-top: 00px
    }
}
@media (min-width: 660px) and (max-height: 899px) {
    #partners .header {
        margin-bottom: 00px;
		visibility:hidden;    }
	.fancy-fonts #partners .header h2 {
    margin-bottom: 1.75em;
}
    #partners .header h2 {
        font-size: 72px;
        padding-top: 00px
    }
}
@media (max-width: 659px) {
    #partners .header {
        margin-bottom: 00px
    }
    #partners .header h2 {
        font-size: 36px;
        padding-top: 0px
    }
}
#partners .partners .hex {
    background: url(../media/partners/hex.png) no-repeat center center;
    background-size: contain
}
#partners .partners .hex .logo {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    z-index: 1;
    -webkit-transform: scale(.733333);
    -ms-transform: scale(.733333);
    transform: scale(.733333);
    transition: -webkit-transform .3s cubic-bezier(.19, 1, .22, 1);
    transition: transform .3s cubic-bezier(.19, 1, .22, 1);
    transition: transform .3s cubic-bezier(.19, 1, .22, 1), -webkit-transform .3s cubic-bezier(.19, 1, .22, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
#partners .partners .hex.hover .logo {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}
#partners .partners .hex:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../media/partners/hex-border.png) no-repeat center center;
    background-size: contain
}
@media (min-width: 660px) {
    #partners .partners {
        position: relative;
        margin: 0 auto;
        height: 24.6875em
    }
    #partners .partners.total-4,
    #partners .partners.total-5 {
        height: 33.375em
    }
    #partners .partners li {
        width: 16.9375em;
        height: 18.6875em;
        position: relative;
        /*float: left*/
    }
    #partners .partners li .hex {
        width: 16.75em;
        height: 14.25em;
        position: absolute
    }
    #partners .partners li:last-child {
        width: 18.75em
    }
    #partners .partners li:nth-child(even) .hex {
        /*bottom: 0*/
    }
    #partners .partners li:nth-child(4) .hex {
        /*top: -7.625em*/
    }
    #partners .partners li:nth-child(5) {
        /*float: left*/
    }
    #partners .partners li:nth-child(5) .hex {
        /*top: -7.625em*/
    }
}
@media (max-width: 659px) {
    #partners .partners {
        width: 14.25em!important;
        margin: 0 auto;
        position: relative
    }
    #partners .partners li {
        width: 100%;
        height: 1.725em;
        position: relative;
        display: block
    }
    #partners .partners li .hex {
        width: 4.5em;
        height: 3.3375em;
        position: absolute;
        background-image: url(../media/partners/hex-mobile.png)
    }
    #partners .partners li:last-child {
        height: 6.9375em
    }
    #partners .partners li:nth-child(even) .hex {
        right: 0
    }
	 #partners .partnerblu{
		 top: -100px;
	 }
}
#partners .overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 20;
    display: none
}
#partners .overlay .scroll {
    height: 100%
}
#partners .overlay .scroller {
    padding-bottom: 1px
}
#partners .overlay .close {
    width: 24px;
    height: 24px;
    background: url(../media/partners/close.png) no-repeat center center;
    background-size: contain;
    display: block;
    top: 24px;
    right: 58px;
    position: absolute;
    z-index: 1
}
.no-touchevents #partners .overlay .close:hover,
.touchevents #partners .overlay .close:active {
    -webkit-animation: spin360 1s cubic-bezier(.19, 1, .22, 1);
    animation: spin360 1s cubic-bezier(.19, 1, .22, 1)
}
#partners .overlay .side {
    background-repeat: repeat-y;
    background-image: url(../media/story/scroll-pattern.png);
    background-position: center top;
    background-size: auto;
    display: block;
    position: absolute;
    height: calc(100% - 9px);
    top: 9px;
    right: 0
}
#partners .overlay .side:first-child {
    left: 0
}
#partners .overlay .wrapper {
    padding: 0 60px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: ministry, sans-serif;
    font-weight: 200;
    color: #000;
    line-height: 1.5em;
    text-align: center
}
#partners .overlay .wrapper img {
    max-width: 274px;
    width: 100%;
    display: block;
    margin: 0 auto
}
#partners .overlay .wrapper p {
    text-align: left
}
#partners .overlay .wrapper .visit {
    display: block;
    position: relative;
    margin: 0 auto;
    text-align: center
}
#partners .overlay .wrapper .visit .inner {
    display: inline-block;
    position: relative
}
#partners .overlay .wrapper .visit a {
    display: inline-block;
    position: relative;
    font-size: 24px;
    z-index: 11;
    min-width: 180px;
    padding: 5px 0;
    font-family: alternate-gothic-no-1-d, sans-serif;
    transition: color 250ms cubic-bezier(.19, 1, .22, 1)
}
.fancy-fonts #partners .overlay .wrapper .visit a span {
    position: relative;
    top: .06em
}
.no-touchevents #partners .overlay .wrapper .visit a:hover,
.touchevents #partners .overlay .wrapper .visit a:active {
    color: #f6e1bc
}
#partners .overlay .wrapper .visit svg {
    position: absolute;
    top: 0;
    left: 0
}
#partners .overlay .wrapper .visit svg polygon {
    fill: #000
}
@media (min-width: 660px) {
    #partners .overlay .wrapper img {
        margin-bottom: 40px
    }
    #partners .overlay .wrapper .visit {
        margin-top: 40px;
        margin-bottom: 40px
    }
}
@media (min-width: 660px) and (min-width: 901px) {
    #partners .overlay .scroller {
        padding-top: 60px
    }
    #partners .overlay .scroll {
        width: 50%;
        overflow: hidden;
        position: absolute;
        top: 0;
        background: url(../media/story/scroll.png) center top;
        background-size: cover
    }
    #partners .overlay .side {
        width: 44px
    }
    #partners .overlay .tint {
        background-color: rgba(0, 0, 0, .4);
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        opacity: 0
    }
}
@media (min-width: 660px) and (max-width: 900px) {
    #partners .overlay .scroller {
        padding-top: 40px
    }
    #partners .overlay .scroll {
        width: 100%;
        background: url(../media/story/scroll-tablet.jpg) center top;
        background-size: cover;
        overflow: hidden;
        position: absolute;
        top: 0
    }
    #partners .overlay .side {
        width: 44px
    }
}
@media (max-width: 659px) {
    #partners .overlay .scroll {
        background: url(../media/story/scroll-mobile-top.jpg) no-repeat center top, url(../media/story/scroll-mobile-tile.jpg) repeat-y center top
    }
    #partners .overlay .scroller {
        padding-top: 20px
    }
    #partners .overlay .close {
        top: 15px;
        right: 20px;
        width: 16px;
        height: 16px
    }
    #partners .overlay .wrapper img {
        margin-bottom: 20px
    }
    #partners .overlay .wrapper .visit {
        margin-top: 20px;
        margin-bottom: 20px
    }
    #partners .overlay .side {
        width: 22px;
        background-size: 10px auto;
        background-position: 9px 0;
        top: 3px;
        height: calc(100% - 3px)
    }
    #partners .overlay .side:first-child {
        background-position: 3px 0
    }
    #partners .overlay .wrapper {
        padding: 0 40px
    }
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box
}
*,
:after,
:before {
    box-sizing: inherit;
    -webkit-tap-highlight-color: transparent
}
a {
    text-decoration: none
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none
}
li {
    display: inline-block;
    margin: 0;
    padding: 0
}
:focus {
    outline: 0
}
body,
html {
    height: 100%;
    background-color: #000
}
#site {
    height: 100%
}
@media (min-width: 660px) {
    #site {
        min-height: 620px
    }
}
@media (max-width: 659px) {
    #site {
        min-height: 460px
    }
}
#preload {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000 url(../media/global/loader/bg.jpg) center 48.88% no-repeat;
    z-index: 999
}
#preload .center {
    height: 3px;
    top: 48.88%;
    left: 0;
    position: absolute;
    width: 100%
}
#preload .bar {
    height: 100%;
    background-color: #101010
}
#preload .fill {
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 0;
    background-color: #ff000b
}
#preload .top {
    position: absolute;
    width: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    top: -36px
}
#preload .top .title {
    width: 100%;
    text-align: center;
    font-family: ministry, sans-serif;
    color: #f6e1bc;
    padding: 0 2.5%;
    overflow: hidden
}
#preload .top .title span {
    -webkit-transform: translate(0, 110%);
    -ms-transform: translate(0, 110%);
    transform: translate(0, 110%);
    display: inline-block
}
#preload .top .logo {
    width: 340px;
    margin: 0 auto 30px auto;
    position: relative;
    overflow: hidden;
    font-size: 15px
}
#preload .top .logo span {
    display: inline-block;
    -webkit-transform: translate(0, 110%);
    -ms-transform: translate(0, 110%);
    transform: translate(0, 110%)
}
#preload .top .logo p {
    color: #f6e1bc;
    font-family: ministry, sans-serif;
    font-weight: 500;
    text-align: center;
    margin: 0
}
#preload .top .logo img {
    width: 100%;
    height: auto
}
#preload .percent {
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 36px;
    font-family: alternate-gothic-no-1-d, sans-serif;
    color: #a58442;
    left: 50%;
    overflow: hidden
}
#preload .percent span {
    -webkit-transform: translate(0, -110%);
    -ms-transform: translate(0, -110%);
    transform: translate(0, -110%);
    display: inline-block
}
@media (min-width: 660px) {
    #preload .title {
        font-size: 30px
    }
    #preload .percent {
        font-size: 60px
    }
}
@media (max-height: 440px),
(max-width: 659px) {
    #preload {
        background-size: 125% auto
    }
    #preload .top {
        top: -24px
    }
    #preload .top .logo {
        width: 220px;
        font-size: 11px;
        margin-bottom: 24px
    }
    #preload .top .title {
        font-size: 20px
    }
    #preload .percent {
        top: 36px;
        font-size: 40px
    }
}
@media (max-height: 440px) and (orientation: landscape),
(max-width: 659px) and (orientation: landscape) {
    #preload .top {
        top: -12px
    }
    #preload .top .logo {
        width: 220px;
        margin-bottom: 12px;
        font-size: 11px
    }
    #preload .percent {
        font-size: 30px;
        top: 12px
    }
}
.preloading body>img {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0
}
.cssanimations #preload.animate .title span {
    -webkit-animation: preloadTitle .5s cubic-bezier(.19, 1, .22, 1) .1s;
    animation: preloadTitle .5s cubic-bezier(.19, 1, .22, 1) .1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}
.cssanimations #preload.animate .logo span {
    -webkit-animation: preloadLogo .5s cubic-bezier(.19, 1, .22, 1) .1s;
    animation: preloadLogo .5s cubic-bezier(.19, 1, .22, 1) .1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}
.cssanimations #preload.animate .percent span {
    -webkit-animation: preloadPercent .5s cubic-bezier(.19, 1, .22, 1) .1s;
    animation: preloadPercent .5s cubic-bezier(.19, 1, .22, 1) .1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}
.no-cssanimations #preload.animate .title span {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}
.no-cssanimations #preload.animate .logo span {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}
.no-cssanimations #preload.animate .percent span {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
}
@-webkit-keyframes preloadTitle {
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@keyframes preloadTitle {
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@-webkit-keyframes preloadLogo {
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@keyframes preloadLogo {
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@-webkit-keyframes preloadPercent {
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@keyframes preloadPercent {
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
.no-script {
    position: absolute;
    width: 100%;
    z-index: 9999;
    background-color: #ff000b;
    text-align: center;
    padding: 4px 8px;
    color: #fff;
    font-family: ministry, sans-serif;
    font-size: 20px
}
main {
    position: relative;
    color: #a58442;
    font-family: alternate-gothic-no-1-d, sans-serif
}
main a {
    color: #a58442
}
main>section {
    height: 100%;
    min-height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}
main .page-outer {
    display: table;
    position: relative;
    height: inherit;
    z-index: 1;
    background-color: #000;
    width: 100%
}
main .page-inner {
    display: table-cell;
    height: 100%;
    vertical-align: middle
}
main .page-inner h2 {
    line-height: 1em;
    margin: 0;
    padding: 0;
    text-align: center;
    font-weight: 400;
    color: #ff000b;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}
@-moz-document url-prefix() {
    main .page-inner h2 {
        background-image: linear-gradient(to bottom, #9e0007, #ff000b)
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    main .page-inner h2 {
        background-image: linear-gradient(to bottom, #9e0007, #ff000b)
    }
}
@media (min-width: 660px) {
    main .page-inner h2 {
        margin: .2em
    }
}
@media (min-width: 1025px) {
    main {
        position: relative;
        width: calc(100% - 250px);
        height: 100%;
        left: 250px
    }
    main .page-inner h2 {
        font-size: 120px
    }
}
@media (min-width: 660px) and (max-width: 1024px) {
    main {
        height: calc(100% - 106px - 60px)
    }
    main .page-inner h2 {
        font-size: 72px
    }
}
@media (max-width: 659px) {
    main {
        height: calc(100% - 106px)
    }
    main .page-outer {
        padding-bottom: 30px
    }
    main .page-inner {
        display: table-cell;
        height: 100%;
        vertical-align: middle
    }
    main .page-inner h2 {
        font-size: 3em;
        /*margin: .2em;
        line-height: 1em;*/
        padding: 0;
        text-align: center;
        color: #ff000b;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }
    @-moz-document url-prefix() {
        main .page-inner h2 {
            background-image: linear-gradient(to bottom, #9e0007, #ff000b)
        }
    }
}
@media screen and (max-width: 659px) and (-webkit-min-device-pixel-ratio: 0) {
    main .page-inner h2 {
        background-image: linear-gradient(to bottom, #9e0007, #ff000b)
    }
}
@media (max-width: 659px) {
    main .page-inner h3 {
        color: #f5e7cf;
        display: inline-block;
        font-size: 4em;
        margin: 0;
        min-width: 300px;
        padding: 0 0 10px 0;
        text-align: right
    }
}
.menu {
    margin-bottom: 1em;
    text-align: center
}
.menu li {
    margin: 0 20px;
    padding: 0;
    position: relative
}
.menu a {
    transition: color 250ms cubic-bezier(.19, 1, .22, 1)
}
.menu a:after {
    content: "";
    display: block;
    height: 2px;
    background-color: #ff000b;
    position: relative;
    margin: 0 auto;
    transition: width .3s cubic-bezier(.19, 1, .22, 1);
    width: 0
}
.menu .active a {
    color: #fff
}
.menu .active a:after {
    width: 30px
}
.no-touchevents .menu a:hover,
.touchevents .menu a:active {
    color: #fff
}
@media (min-width: 660px) {
    .menu {
        font-size: 24px
    }
    .menu a:after {
        top: 5px
    }
}
@media (max-width: 659px) {
    .menu {
        font-size: 20px
    }
    .menu a:after {
        top: 0
    }
}
.social {
    font-size: 0
}
.social li {
    vertical-align: middle
}
.no-touchevents .social li:hover {
    opacity: 1!important
}
.social a {
    position: relative;
    display: block;
    margin: 0 8px;
    box-sizing: content-box
}
.social a:after,
.social a:before {
    content: "";
    display: block;
    top: 0;
    left: 50%;
    position: absolute;
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    transition: opacity 250ms
}
.social a:after {
    opacity: 0
}
.no-touchevents .social a:hover:after,
.touchevents .social a:active:after {
    opacity: 1
}
ƒ .no-touchevents .social a:hover:before,
ƒ .touchevents .social a:active:before {
    opacity: 0
}
.social .social-facebook {
    width: 12px;
    height: 20px
}
.social .social-facebook:before {
    background-size: 175% 1247.61904762%;
    background-image: url(../media/global/social-sprites.png);
    background-position: 0 8.9211618257%;
    background-repeat: no-repeat;
    width: 12px;
    height: 21px
}
.social .social-facebook:after {
    background-size: 175% 1247.61904762%;
    background-image: url(../media/global/social-sprites.png);
    background-position: 0 54.5643153527%;
    background-repeat: no-repeat;
    width: 12px;
    height: 21px
}
.social .social-instagram {
    width: 22px;
    height: 20px
}
.social .social-instagram:before {
    background-size: 95.4545454545% 1247.61904762%;
    background-image: url(../media/global/social-sprites.png);
    background-position: 0 36.3070539419%;
    background-repeat: no-repeat;
    width: 22px;
    height: 21px
}
.social .social-instagram:after {
    background-size: 95.4545454545% 1247.61904762%;
    background-image: url(../media/global/social-sprites.png);
    background-position: 0 45.4356846473%;
    background-repeat: no-repeat;
    width: 22px;
    height: 21px
}
.social .social-twitter {
    width: 22px;
    height: 20px
}
.social .social-twitter:before {
    background-size: 95.4545454545% 1247.61904762%;
    background-image: url(../media/global/social-sprites.png);
    background-position: 0 72.8215767635%;
    background-repeat: no-repeat;
    width: 22px;
    height: 21px
}
.social .social-twitter:after {
    background-size: 95.4545454545% 1247.61904762%;
    background-image: url(../media/global/social-sprites.png);
    background-position: 0 81.9502074689%;
    background-repeat: no-repeat;
    width: 22px;
    height: 21px
}
.site-music {
    width: 18px;
    height: 20px;
    font-size: 0;
    display: inline-block;
    margin: 0 8px;
    vertical-align: middle;
    position: relative
}
.site-music div {
    width: 100%;
    height: 10px;
    margin-top: 10px;
    position: relative
}
.site-music div:hover span {
    background-color: #f6e1bc
}
.site-music span {
    display: block;
    width: 3px;
    background-color: #a58442;
    transition: background-color 250ms cubic-bezier(.19, 1, .22, 1);
    height: 2px;
    position: absolute;
    bottom: 0
}
.site-music span:nth-child(2) {
    left: 5px
}
.site-music span:nth-child(3) {
    left: 10px
}
.site-music span:nth-child(4) {
    left: 15px
}
.cssanimations .site-music.on span:nth-child(1) {
    -webkit-animation: musicBar1 1s infinite;
    animation: musicBar1 1s infinite
}
.cssanimations .site-music.on span:nth-child(1) {
    -webkit-animation: musicBar1 1s infinite;
    animation: musicBar1 1s infinite
}
.cssanimations .site-music.on span:nth-child(2) {
    -webkit-animation: musicBar2 1.1s infinite;
    animation: musicBar2 1.1s infinite
}
.cssanimations .site-music.on span:nth-child(3) {
    -webkit-animation: musicBar3 1.2s infinite;
    animation: musicBar3 1.2s infinite
}
.cssanimations .site-music.on span:nth-child(4) {
    -webkit-animation: musicBar4 .9s infinite;
    animation: musicBar4 .9s infinite
}
.no-cssanimations .site-music.on span:nth-child(1) {
    height: 5px
}
.no-cssanimations .site-music.on span:nth-child(2) {
    height: 10px
}
.no-cssanimations .site-music.on span:nth-child(3) {
    height: 3px
}
.no-cssanimations .site-music.on span:nth-child(4) {
    height: 8px
}
.bg-video {
    position: absolute;
    top: -1px;
    left: -1px;
    background-position: center center;
    background-size: cover
}
.bg-video video {
    display: none
}
.bg-video.autoplay video {
    width: 100%;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    display: block
}
.bg-video.no-autoplay {
    width: calc(100% + 2px)!important;
    height: calc(100% + 2px)!important;
    top: 0!important;
    left: 0!important
}
#transition {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    z-index: 500;
    top: 0;
    left: 0
}
@media (min-width: 660px) and (max-width: 1024px) {
    #transition {
        z-index: 800
    }
}
#transition .block {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #ff000b;
    top: 0;
    left: 0;
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%
}
#transition .block:before {
    width: 200%;
    height: 300%;
    bottom: 0;
    right: 0;
    position: absolute;
    display: block;
    content: "";
    background-color: #ff000b
}
#transition .block.exit {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0
}
#transition .block.exit:before {
    right: auto;
    left: 0;
    bottom: -10%
}
#transition .square-wrapper {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    width: 55px;
    height: 55px;
    opacity: 0
}
#transition .square-wrapper.spin .square-1 {
    -webkit-animation: loader-spin 1s cubic-bezier(.77, 0, .175, 1) -80ms;
    animation: loader-spin 1s cubic-bezier(.77, 0, .175, 1) -80ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}
#transition .square-wrapper.spin .square-2 {
    display: block;
    z-index: 9;
    -webkit-animation: loader-spin 1s cubic-bezier(.77, 0, .175, 1) -40ms;
    animation: loader-spin 1s cubic-bezier(.77, 0, .175, 1) -40ms
}
#transition .square-wrapper.spin .square-3 {
    display: block;
    z-index: 8;
    -webkit-animation: loader-spin 1s cubic-bezier(.77, 0, .175, 1);
    animation: loader-spin 1s cubic-bezier(.77, 0, .175, 1)
}
#transition .square-1 {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 250ms;
    z-index: 10
}
#transition .square-2,
#transition .square-3 {
    display: none
}
#transition .square {
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
@media (min-width: 1025px) {
    #transition {
        width: calc(100% - 250px);
        left: 250px
    }
}
@media (max-width: 659px) {
    #transition {
        z-index: 901
    }
}
#compatibility {
    background-color: #004023;
    color: #f5f19a;
    display: none;
    height: 100%;
    min-height: 100%;
    padding: 20px;
    text-align: center;
    width: 100%
}
#compatibility .center {
    display: table-cell;
    vertical-align: middle
}
#compatibility .browser {
    margin-top: 60px;
    font-weight: 700;
    font-size: 1.5em
}
#compatibility .browser div {
    width: 100%;
    max-width: 420px;
    display: block;
    margin: 30px auto 0 auto
}
#compatibility .browser div img {
    width: 100%;
    height: auto
}
#compatibility .date {
    text-align: center;
    font-weight: 700;
    font-size: 1.5em;
    margin-top: 30px
}
#compatibility .date span {
    display: block;
    line-height: 1.125em;
    font-size: 1.875em
}
#compatibility .logo {
    max-width: 800px;
    display: block;
    margin: 0 auto;
    padding: 0 0 1em 0
}
#compatibility .logo img {
    width: 100%;
    height: auto
}
#compatibility p {
    font-size: 24px;
    font-weight: 700
}
@-webkit-keyframes pulse {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.75);
        transform: scale(1.75)
    }
}
@keyframes pulse {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.75);
        transform: scale(1.75)
    }
}
@-webkit-keyframes loader-spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg)
    }
}
@keyframes loader-spin {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg)
    }
}
@-webkit-keyframes spin360 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
}
@keyframes spin360 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
}
@-webkit-keyframes musicBar1 {
    0% {
        height: 4px
    }
    21% {
        height: 6px
    }
    53% {
        height: 2px
    }
    85% {
        height: 7px
    }
    100% {
        height: 4px
    }
}
@keyframes musicBar1 {
    0% {
        height: 4px
    }
    21% {
        height: 6px
    }
    53% {
        height: 2px
    }
    85% {
        height: 7px
    }
    100% {
        height: 4px
    }
}
@-webkit-keyframes musicBar2 {
    0% {
        height: 8px
    }
    21% {
        height: 4px
    }
    53% {
        height: 10px
    }
    85% {
        height: 2px
    }
    100% {
        height: 8px
    }
}
@keyframes musicBar2 {
    0% {
        height: 8px
    }
    21% {
        height: 4px
    }
    53% {
        height: 10px
    }
    85% {
        height: 2px
    }
    100% {
        height: 8px
    }
}
@-webkit-keyframes musicBar3 {
    0% {
        height: 10px
    }
    25% {
        height: 6px
    }
    50% {
        height: 10px
    }
    75% {
        height: 5px
    }
    100% {
        height: 10px
    }
}
@keyframes musicBar3 {
    0% {
        height: 10px
    }
    25% {
        height: 6px
    }
    50% {
        height: 10px
    }
    75% {
        height: 5px
    }
    100% {
        height: 10px
    }
}
@-webkit-keyframes musicBar4 {
    0% {
        height: 8px
    }
    25% {
        height: 10px
    }
    50% {
        height: 5px
    }
    75% {
        height: 10px
    }
    100% {
        height: 8px
    }
}
@keyframes musicBar4 {
    0% {
        height: 8px
    }
    25% {
        height: 10px
    }
    50% {
        height: 5px
    }
    75% {
        height: 10px
    }
    100% {
        height: 8px
    }
}
@media (min-width: 660px) {
    #story {
        overflow: hidden
    }
}
@media (min-width: 660px) and (min-width: 901px) {
    #story .bg-video {
        background-image: url(../media/story/no-video-poster.jpg);
        background-position: right bottom
    }
}
@media (max-width: 900px) {
    #story .bg-video {
        width: 100%!important;
        height: 100%!important
    }
    #story .bg-video video {
        display: none!important
    }
}
#story .scroll {
    position: relative;
    min-height: 100%
}
#story .scroll .side {
    background-repeat: repeat-y;
    background-image: url(../media/story/scroll-pattern.png);
    background-position: center top;
    background-size: auto;
    display: block;
    position: absolute;
    height: calc(100% - 9px);
    top: 9px;
    right: 0
}
#story .scroll .side:first-child {
    left: 0
}
#story .scroll .scroller {
    padding: 1px 0 120px 0
}
#story .scroll h2 {
    padding: 0;
    margin: 0
}
#story .scroll p {
    color: #000;
    font-family: ministry, sans-serif;
    font-weight: lighter;
    line-height: 1.5em;
    margin: 0 0 1em 0
}
#story .scroll .wrapper {
    padding: 0 60px
}
@media (min-width: 660px) and (min-width: 901px) {
    #story .scroll {
        height: 100%;
        width: 50%;
        overflow: hidden;
        position: absolute;
        top: 0;
        background: url(../media/story/scroll.png) center top;
        background-size: cover
    }
    #story .scroll .side {
        width: 44px
    }
    #story .scroll h2 {
        margin: 85px 0 5px
    }
    #story .scroll p {
        font-size: 15px
    }
    #story .scroll .wrapper {
        height: 100%;
        width: 100%
    }
}
@media (min-width: 660px) and (max-width: 900px) {
    #story .scroll {
        width: 100%;
        height: 100%;
        background: url(../media/story/scroll-tablet.jpg) center top;
        background-size: cover;
        overflow: hidden;
        position: absolute;
        top: 0
    }
    #story .scroll h2 {
        margin: 30px 0 20px 0
    }
    #story .scroll .side {
        width: 44px
    }
    #story .scroll .wrapper {
        overflow: hidden;
        height: 100%;
        width: 100%
    }
}
@media (max-width: 659px) {
    #story .scroll {
        background: url(../media/story/scroll-mobile-top.jpg) no-repeat center top, url(../media/story/scroll-mobile-tile.jpg) repeat-y center top
    }
    #story .scroll .side {
        width: 22px;
        background-size: 10px auto;
        background-position: 9px 0;
        top: 3px;
        height: calc(100% - 3px)
    }
    #story .scroll .side:first-child {
        background-position: 3px 0
    }
    #story .scroll h2 {
        font-size: 36px;
        margin: 16px 0 10px 0
    }
    #story .scroll .wrapper {
        padding: 0 28px
    }
    #story .scroll .wrapper .scroller {
        -webkit-transform: none!important;
        -ms-transform: none!important;
        transform: none!important
    }
}
#videos {
    position: relative;
    overflow: hidden
}
#videos .page-inner {
    box-shadow: inset 0 -150px 10px 50px transparent, inset 0 -50px 100px 0 rgba(0, 0, 0, .75);
    vertical-align: top
}
#videos .page-outer {
    background: url(../content/videos/bg.jpg) center center;
    background-size: cover
}
#videos .menu {
    text-align: center;
    margin: 0;
    padding: 20px 0
}
#videos .menu.small {
    padding-top: 40px
}
#videos .menu.medium {
    padding-top: 60px
}
#videos .menu.large {
    padding-top: 80px
}
#videos .menu .inner {
    position: relative;
    text-align: center;
    margin: 0 20px
}
#videos .menu ul {
    position: relative;
    z-index: 5;
    display: inline-block
}
#videos .menu li {
    position: relative
}
#videos .menu svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 3
}
#videos .menu svg polygon {
    background-color: #000
}
#videos .menu a:after {
    content: "";
    width: 0;
    height: 2px;
    background-color: #cc341f;
    position: absolute;
    display: block;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    top: auto;
    transition: width .3s cubic-bezier(.19, 1, .22, 1)
}
#videos .menu .active a {
    color: #f6e1bc
}
#videos .menu .active a:after {
    width: 30px
}
@media (min-width: 660px) {
    #videos .menu {
        font-size: 24px
    }
    #videos .menu li {
        margin: 0 20px 0 20px;
        padding-top: 8px;
        padding-bottom: 6px
    }
}
@media (max-width: 659px) {
    #videos .menu {
        font-size: 18px
    }
    #videos .menu li {
        margin: 0 12px 0 12px;
        padding-top: 6px;
        padding-bottom: 4px
    }
}
#videos .videos {
    position: relative;
    margin: 0 auto
}
#videos .videos .owl-carousel {
    margin: 0 auto
}
#videos .videos .owl-stage-outer {
    overflow: visible
}
#videos .videos .inner {
    background-color: #333;
    box-shadow: 0 2em 4em rgba(0, 0, 0, .85);
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
    transition: -webkit-transform .3s cubic-bezier(.19, 1, .22, 1);
    transition: transform .3s cubic-bezier(.19, 1, .22, 1);
    transition: transform .3s cubic-bezier(.19, 1, .22, 1), -webkit-transform .3s cubic-bezier(.19, 1, .22, 1)
}
#videos .videos .active .inner {
    -webkit-transform: scale(1)!important;
    -ms-transform: scale(1)!important;
    transform: scale(1)!important;
    -webkit-animation: none!important;
    animation: none!important
}
#videos .videos .hover.inner {
    -webkit-animation: videosBumpLeft .5s cubic-bezier(.455, .03, .515, .955);
    animation: videosBumpLeft .5s cubic-bezier(.455, .03, .515, .955)
}
#videos .videos img {
    display: block;
    width: 100%
}
#videos .videos .embed {
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    z-index: 10;
    display: none;
    -webkit-backface-visibility: hidden
}
#videos .videos .embed iframe {
    width: 100%;
    height: 100%
}
#videos .videos .play {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 14.223%;
    height: 29.245%;
    min-width: 80px;
    min-height: 93px
}
#videos .videos .play:after,
#videos .videos .play:before,
#videos .videos .pulse {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../media/videos/play.png) no-repeat right 0;
    background-size: auto 100%;
    z-index: 1;
    transition: opacity 250ms cubic-bezier(.19, 1, .22, 1);
    -webkit-backface-visibility: hidden
}
#videos .videos.thick .play:after,
#videos .videos.thick .play:before,
#videos .videos.thick .pulse {
    background-image: url(../media/videos/play-small.png)
}
#videos .videos .pulse {
    z-index: 0;
    opacity: 0
}
#videos .videos .play:after {
    background-position: left 0;
    z-index: 2;
    opacity: 0
}
.no-touchevents #videos .videos .play:hover:after,
.touchevents #videos .videos .play:active:after {
    opacity: 1
}
.no-touchevents #videos .videos .play:hover .pulse,
.touchevents #videos .videos .play:active .pulse {
    -webkit-animation: pulse .5s cubic-bezier(.25, .46, .45, .94);
    animation: pulse .5s cubic-bezier(.25, .46, .45, .94)
}
#videos .videos.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}