body, html {
	background-color: #000;
	height: 100%
}
#site, body, html {
	height: 100%
}
#header #mast, #header nav, h1 {
	font-weight: 800
}
#header .logo, #header nav, h1 {
	text-align: center
}
#header .banner .left, #header .batman .content {
	float: left
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
	font-family: Kanit, sans-serif
}
h1 {
	color: #f7ca2c;
	font-size: 2.375em;
	margin: 1.5em 0
}
.page-fg {
	padding-top: 1px;
	position: relative;
	min-height: 100%;
	z-index: 10
}
.page-bg {
	display: none
}
#site {
	width: 100%
}

@media (min-width:660px) {
.page-bg {
	display: block;
	overflow: hidden;
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%
}
.page-bg .bg {
	left: -20px;
	top: -20px;
	bottom: -20px;
	right: -20px;
	position: absolute
}
#site {
	min-height: 620px
}
}
.page-outer {
	display: table;
	width: 100%;
	height: inherit;
	position: relative;
	z-index: 1
}
.page-inner {
	display: table-cell;
	height: 100%
}
main>div {
	height: 100%;
	min-height: 100%;
	width: 100%
}

@media (max-width:659px) {
h1 {
	font-size: 1.875em;
	margin: .75em 0
}
.page-fg, main>div {
	padding-bottom: 30px
}
#header nav, main {
	height: 100%;
	padding-top: 85px
}
#header {
	height: 85px;
	position: fixed;
	z-index: 101;
	width: 100%
}
html #header #mast {
	height: 85px;
	padding: 0 16px
}
html #header nav ul {
	height: calc(100% - 60px - 30px)
}
}

@media (min-width:660px) and (max-width:899px) {
#header, #mast {
	height: 130px
}
main {
	height: calc(100% - 130px)
}
#header nav {
	height: 100%;
	padding-top: 130px
}
#header nav ul {
	padding-bottom: 90px
}
}

@media (min-width:900px) {
#header {
	height: 200px
}
#mast {
	height: 130px
}
main {
	height: calc(100% - 200px)
}
}

@media (min-width:900px) and (max-height:679px) {
#header {
	height: 190px
}
html #header nav {
	height: 60px
}
html #header nav li a {
	font-size: 12px
}
html #header nav .icon {
	height: 36px
}
main {
	height: calc(100% - 190px)
}
}
#header #mast {
	background: url(../media/global/header/bg.jpg) center top no-repeat, url(../media/global/header/bg-repeat.jpg) center top repeat-x #fbd80a;
	background-size: auto 100%, auto 100%;
	padding: 0 20px;
	z-index: 400;
	position: relative
}
#header .inner {
	position: relative;
	width: 100%;
	height: 100%
}
#header .batman {
	height: 100%
}
#header .batman img {
	display: block;
	height: 100%;
	width: auto;
	float: left;
	margin-right: -24px;
	margin-left: -16px
}
#header .batman .instagram:after, #header .batman .instagram:before {
	background-size: 190.909090909% 4090.90909091%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 33px;
	height: 33px
}
#header .batman .instagram {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	color: #282828;
	margin: 16px 0 .15em
}
#header .batman .instagram:after, #header .batman .instagram:before {
	content: "";
	display: inline-block;
	margin-right: 8px;
	vertical-align: -60%;
	vertical-align: middle;
	background-position: -1.6666666667% 75.4365983295%
}
#header .batman .instagram:after {
	background-position: -1.6666666667% 80.5998481397%;
	left: 0;
	position: absolute;
	top: 0;
	opacity: 0
}
.no-touchevents #header .batman .instagram:hover:before, .touchevents #header .batman .instagram:active:active {
	opacity: 0
}
.no-touchevents #header .batman .instagram:hover:after, .touchevents #header .batman .instagram:active:after {
	opacity: 1
}
#header .batman .quote .animate {
	font-size: 1.125em;
	overflow: hidden;
	display: inline-block;
	white-space: nowrap;
	width: 0;
	transition: width 1.1s cubic-bezier(.165, .84, .44, 1), -webkit-transform .5s cubic-bezier(.165, .84, .44, 1);
	transition: width 1.1s cubic-bezier(.165, .84, .44, 1), transform .5s cubic-bezier(.165, .84, .44, 1);
	transition: width 1.1s cubic-bezier(.165, .84, .44, 1), transform .5s cubic-bezier(.165, .84, .44, 1), -webkit-transform .5s cubic-bezier(.165, .84, .44, 1);
	-webkit-transform: translateX(-10px);
	-ms-transform: translateX(-10px);
	transform: translateX(-10px)
}
#header .batman .quote .animate span {
	padding: 5px 17px;
	color: #f7ca2c;
	display: inline-block;
	background-color: #282828;
	margin: .1em 0
}
#header .batman .quote .animate:nth-child(1) {
	margin-left: 18px
}
#header .batman .quote .animate:nth-child(3) {
	transition-delay: 250ms;
	margin-left: 45px
}
#header .logo {
	position: absolute;
	height: 100%;
	left: 50%;
	top: 0;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	color: #282828;
	line-height: 0
}
#header .logo span {
	/*font-size: 1.5em*/
	font-size: 1em
}
#header .logo img {
	height: auto;
	display: block;
	margin: 10px auto 7px;
	width: 245px
}
#header .logo .three-d {
	display: block;
	margin: 15px auto
}
#header.has-3d .logo img {
	width: 200px
}
#header .links .instagram:after, #header .links .instagram:before {
	background-size: 300% 6428.57142857%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 21px
}
#header .links {
	right: 0;
	top: 20px;
	font-size: 0;
	position: absolute
}
#header .links a {
	vertical-align: middle;
	display: inline-block;
	margin: 0 7px;
	position: relative
}
#header .links a:last-child {
	margin-right: 0
}
#header .links a:first-child {
	margin-left: 0
}
#header .links .facebook:after, #header .links .facebook:before, #header .links .youtube:after, #header .links .youtube:before, #header .links .instagram:after, #header .links .instagram:before, #header .links .twitter:after, #header .links .twitter:before {
	content: "";
	display: block
}
#header .links .facebook:after, #header .links .youtube:after,#header .links .instagram:after, #header .links .twitter:after {
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0
}
.no-touchevents #header .links .facebook:hover:before, .no-touchevents #header .links .youtube:hover:before, .no-touchevents #header .links .instagram:hover:before, .no-touchevents #header .links .twitter:hover:before, .touchevents #header .links .facebook:active:active, .touchevents #header .links .instagram:active:active, .touchevents #header .links .twitter:active:active {
	opacity: 0
}
.no-touchevents #header .links .facebook:hover:after, .no-touchevents #header .links .youtube:hover:after, .no-touchevents #header .links .instagram:hover:after, .no-touchevents #header .links .twitter:hover:after, .touchevents #header .links .facebook:active:after, .touchevents #header .links .instagram:active:after, .touchevents #header .links .twitter:active:after {
	opacity: 1
}
#header .menu-toggle.active span:nth-child(2), .no-touchevents #header .tickets:hover:before, .touchevents #header .tickets:active:active {
	opacity: 0
}
#header .links .instagram:before {
	background-position: -1.1904761905% 10.647103085%;
	height: 21px
}
#header .links .instagram:after {
	background-position: -1.1904761905% 13.9578630549%;
	height: 21px
}
#header .links .facebook:after, #header .links .facebook:before {
	background-size: 572.727272727% 6428.57142857%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 11px;
	height: 21px
}
#header .links .facebook:before {
	background-position: -.9615384615% 17.2686230248%
}
#header .links .facebook:after {
	background-position: -.9615384615% 15.6132430399%
}
#header .links .twitter:after, #header .links .twitter:before {
	background-size: 300% 7941.17647059%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 21px;
	height: 17px
}

#header .links .youtube:before {
       /* background-size: 300% 7941.17647059%;*/
        background-image: url(../media/global/header/youtube.png);
      
        background-repeat: no-repeat;
        width: 21px;
        height: 21px; }
		 #header .links .youtube:after {
       /* background-size: 300% 7941.17647059%;*/
        background-image: url(../media/global/header/youtube-white.png);
    
        background-repeat: no-repeat;
        width: 21px;
        height: 21px; }
#header .links .twitter:before {
	background-position: -1.1904761905% 2.9632408102%
}
#header .links .twitter:after {
	background-position: -1.1904761905% 1.6129032258%
}
#header .links .music {
	width: 26px;
	height: 12px;
	font-size: 0;
	position: relative;
	top: 3px
}
#header .links .music span {
	display: block;
	width: 2px;
	height: 2px;
	background-color: #282828;
	margin-right: 2px;
	position: absolute;
	bottom: 0
}
#header .links .music span:last-child {
	margin-right: 0
}
#header .links .music:hover span {
	background-color: #FFF
}
#header .links .music.paused span {
	-webkit-animation: none!important;
	animation: none!important;
	background-color: #bc8c0a
}
#header .links .music span:nth-child(1) {
	height: 4px;
	left: 0;
	-webkit-animation: musicBar1 1.04s infinite;
	animation: musicBar1 1.04s infinite
}
#header .links .music span:nth-child(2) {
	height: 8px;
	left: 4px;
	-webkit-animation: musicBar2 1.43s infinite;
	animation: musicBar2 1.43s infinite
}
#header .links .music span:nth-child(3) {
	height: 12px;
	left: 8px;
	-webkit-animation: musicBar3 1326ms infinite;
	animation: musicBar3 1326ms infinite
}
#header .links .music span:nth-child(4) {
	height: 8px;
	left: 12px;
	-webkit-animation: musicBar4 1456ms infinite;
	animation: musicBar4 1456ms infinite
}
#header .links .music span:nth-child(5) {
	height: 12px;
	left: 16px;
	-webkit-animation: musicBar5 1183ms infinite;
	animation: musicBar5 1183ms infinite
}
#header .links .music span:nth-child(6) {
	height: 8px;
	left: 20px;
	-webkit-animation: musicBar6 1552ms infinite;
	animation: musicBar6 1552ms infinite
}
#header .links .music span:nth-child(7) {
	height: 4px;
	left: 24px;
	-webkit-animation: musicBar7 1.05s infinite;
	animation: musicBar7 1.05s infinite
}
#header .menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	position: absolute;
	top: 67px;
	background-color: #282828
}
.no-touchevents #header .menu-toggle:hover, .touchevents #header .menu-toggle:active {
	background-color: #FFF
}
.no-touchevents #header .menu-toggle:hover span:first-child, .touchevents #header .menu-toggle:active span:first-child {
	-webkit-transform: translateY(-1px);
	-ms-transform: translateY(-1px);
	transform: translateY(-1px)
}
.no-touchevents #header .menu-toggle:hover span:last-child, .touchevents #header .menu-toggle:active span:last-child {
	-webkit-transform: translateY(1px);
	-ms-transform: translateY(1px);
	transform: translateY(1px)
}
#header .menu-toggle span {
	width: 20px;
	height: 3px;
	position: absolute;
	display: block;
	background-color: #f7ca2c;
	left: 12px;
	transition: top .2s ease-out, -webkit-transform .2s ease-out;
	transition: top .2s ease-out, transform .2s ease-out;
	transition: top .2s ease-out, transform .2s ease-out, -webkit-transform .2s ease-out;
	transition-delay: .2s, 0s
}
#header .menu-toggle.active span {
	transition: top .2s ease-out, -webkit-transform .2s ease-out;
	transition: top .2s ease-out, transform .2s ease-out;
	transition: top .2s ease-out, transform .2s ease-out, -webkit-transform .2s ease-out;
	transition-delay: 0s, .2s
}
#header .menu-toggle span:first-child {
	top: 13px
}
#header .menu-toggle span:nth-child(2) {
	top: 20px
}
#header .menu-toggle span:last-child {
	top: 27px
}
#header .menu-toggle.active span:first-child {
	top: 20px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg)
}
#header .menu-toggle.active span:last-child {
	top: 20px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg)
}
.no-touchevents #header .menu-toggle.active:hover span:first-child, .touchevents #header .menu-toggle.active:active span:first-child {
	-webkit-transform: rotate(45deg) scaleX(.9);
	-ms-transform: rotate(45deg) scaleX(.9);
	transform: rotate(45deg) scaleX(.9)
}
.no-touchevents #header .menu-toggle.active:hover span:last-child, .touchevents #header .menu-toggle.active:active span:last-child {
	-webkit-transform: rotate(-45deg) scaleX(.9);
	-ms-transform: rotate(-45deg) scaleX(.9);
	transform: rotate(-45deg) scaleX(.9)
}
#header .tickets {
	display: block;
	position: absolute;
	right: 135px;
	top: 16px;
	width: 140px;
	color: #282828
}
#header .tickets:after, #header .tickets:before {
	background-size: 190.909090909% 3648.64864865%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 33px;
	height: 37px
}
#header .tickets span {
	font-size: 1.125em;
	display: block
}
#header .tickets:after, #header .tickets:before {
	content: "";
	position: absolute;
	display: block;
	background-position: -1.6666666667% 91.2033511043%;
	left: -44px;
	top: 3px
}
#header .tickets:after {
	background-position: -1.6666666667% 94.0974866717%;
	opacity: 0
}
.no-touchevents #header .tickets:hover:after, .touchevents #header .tickets:active:after {
	opacity: 1
}
#header .soundtrack {
	display: block;
	position: absolute;
	right: 135px;
	top: 72px;
	width: 140px;
	height: 32px;
	color: #282828
}
#header .soundtrack span {
	font-size: 1.125em;
	display: block;
	position: absolute;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%)
}
#header .soundtrack:after, #header .soundtrack:before {
	content: "";
	position: absolute;
	display: block;
	background-image: url(../media/global/header/soundtrack.png);
	background-size: 200% auto;
	left: -42px;
	top: 0;
	width: 34px;
	height: 32px
}
#header .app, #header .app:before {
	display: block;
	width: 72px;
	position: absolute
}
#header .soundtrack:after {
	background-position: right top;
	opacity: 0
}
.no-touchevents #header .soundtrack:hover:before, .touchevents #header .soundtrack:active:active {
	opacity: 0
}
.no-touchevents #header .soundtrack:hover:after, .touchevents #header .soundtrack:active:after {
	opacity: 1
}
#header .app {
	height: 72px;
	top: 52px;
	right: -7px;
	cursor: hand;
	cursor: pointer
}
#header .app:before {
	content: "";
	right: 0;
	height: 100%;
	background: url(../content/global/header/app.png) center center no-repeat;
	background-size: cover;
	z-index: 1
}
#header .app.active {
	width: 140px
}
#header .app .android, #header .app .ios {
	width: 30px;
	display: block;
	position: absolute;
	opacity: 0
}
.no-touchevents #header .app:hover:before, .touchevents #header .app:active:before {
	-webkit-animation: pulse .3s ease-in-out;
	animation: pulse .3s ease-in-out
}
#header .app .ios {
	height: 35px;
	background: url(../media/global/header/apple.png) no-repeat;
	background-size: 100% auto;
	top: 15px;
	right: 78px;
	-webkit-transform: translateX(30px);
	-ms-transform: translateX(30px);
	transform: translateX(30px)
}
#header .app .android {
	height: 36px;
	background: url(../media/global/header/android.png) no-repeat;
	background-size: 100% auto;
	right: 122px;
	top: 16px;
	-webkit-transform: translateX(20px);
	-ms-transform: translateX(20px);
	transform: translateX(20px)
}
#header .app a {
	transition: opacity .3s cubic-bezier(.215, .61, .355, 1), -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
	transition: opacity .3s cubic-bezier(.215, .61, .355, 1), transform .3s cubic-bezier(.215, .61, .355, 1);
	transition: opacity .3s cubic-bezier(.215, .61, .355, 1), transform .3s cubic-bezier(.215, .61, .355, 1), -webkit-transform .3s cubic-bezier(.215, .61, .355, 1);
	pointer-events: none
}
#header .app a:hover {
	background-position: left bottom
}
#header .app.active a {
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto
}

@media (max-width:1023px) {
#header .soundtrack:after, #header .soundtrack:before, #header .tickets:after, #header .tickets:before {
	left: 0
}
#header .app, #header .soundtrack span, #header .tickets span {
	display: none
}
#header .tickets {
	right: 0;
	top: 67px;
	width: 33px;
	height: 37px
}
#header.has-soundtrack .tickets {
	right: 53px
}
#header .soundtrack {
	right: 0;
	width: 34px;
	height: 32px
}
}

@media (min-width:660px) and (max-width:899px) {
#header .menu-toggle {
	display: block
}
#header .batman .quote, #header .batman img {
	display: none
}
}

@media (max-width:659px) {
#header .batman, #header .links, #header .tickets span {
	display: none
}
#header .menu-toggle {
	top: 50%;
	margin-top: -23px;
	display: block
}
#header .tickets {
	top: 50%;
	margin-top: -21px
}
#header .soundtrack {
	top: 50%;
	margin-top: -17px
}
#header .logo span {
	font-size: .925em
}
#header .logo img {
	margin-top: 7px;
	width: 160px
}
#header .logo .three-d {
	height: 7px;
	width: auto!important;
	margin: 8px auto
}
#header.has-3d .logo img {
	width: 150px;
	margin-bottom: 4px
}
}

@media (max-width:659px) and (max-width:659px) {
#header .tickets {
	right: 0!important
}
#header .soundtrack {
	display: none
}
}
#header nav {
	font-size: 0;
	z-index: 101;
	background-color: #282828;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}
#header nav ul {
	height: 100%
}
#header nav li {
	vertical-align: top;
	font-size: 16px
}
#header nav li a {
	white-space: nowrap;
	height: 100%;
	line-height: .9em;
	width: 100%
}
#header nav li.active a .over, .no-touchevents #header nav li a:hover .over, .touchevents #header nav li a:active .over {
	opacity: 1
}
#header nav .up {
	color: #FFF;
	position: relative;
	display: inline-block;
	height: 100%;
	font-size: .875em
}
#header nav .over {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	color: #f7ca2c;
	opacity: 0;
	background: #282828;
	transition: opacity .3s ease-out;
	bottom: 0;
	right: 0;
	width: 100%
}
#header nav .center {
	display: table-cell;
	text-align: center;
	vertical-align: middle
}
#header nav .center-outer {
	display: table;
	width: 100%;
	height: 100%
}
#header nav .menu-home .icon:before, #header nav .menu-home .over .icon:before {
	background-size: 233.333333333% 5400%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 1.6875em;
	height: 1.5625em;
	margin-left: -.84375em;
	margin-top: -.78125em
}
#header nav .icon {
	display: block;
	position: relative;
	font-size: 16px
}
#header nav .icon:before {
	content: "";
	display: block;
	top: 50%;
	left: 50%;
	position: absolute
}
#header nav .menu-home .icon:before {
	background-position: -1.3888888889% 29.8490566038%
}
#header nav .menu-home .over .icon:before {
	background-position: -1.3888888889% 27.8867924528%
}
#header nav .menu-story .icon:before, #header nav .menu-story .over .icon:before {
	background-size: 175% 6750%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 2.25em;
	height: 1.25em;
	margin-left: -1.125em;
	margin-top: -.625em
}
#header nav .menu-story .icon:before {
	background-position: -1.8518518519% 7.4812030075%
}
#header nav .menu-story .over .icon:before {
	background-position: -1.8518518519% 4.3233082707%
}
#header nav .menu-videos .icon:before, #header nav .menu-videos .over .icon:before {
	background-size: 233.333333333% 5000%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 1.6875em;
	height: 1.6875em;
	margin-left: -.84375em;
	margin-top: -.84375em
}
#header nav .menu-videos .icon:before {
	background-position: -1.3888888889% 47.7324263039%
}
#header nav .menu-videos .over .icon:before {
	background-position: -1.3888888889% 49.8488284203%
}
#header nav .menu-games .icon:before, #header nav .menu-games .over .icon:before {
	background-size: 153.658536585% 5400%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 2.5625em;
	height: 1.5625em;
	margin-left: -1.28125em;
	margin-top: -.78125em
}
#header nav .menu-games .icon:before {
	background-position: -2.2727272727% 35.7358490566%
}
#header nav .menu-games .over .icon:before {
	background-position: -2.2727272727% 31.8113207547%
}
#header nav .menu-characters .icon:before, #header nav .menu-characters .over .icon:before {
	background-size: 252% 4218.75%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 1.5625em;
	height: 2em;
	margin-left: -.78125em;
	margin-top: -1em
}
#header nav .menu-characters .icon:before {
	background-position: -1.3157894737% 72.875569044%
}
#header nav .menu-characters .over .icon:before {
	background-position: -1.3157894737% 70.3717754173%
}
#header nav .menu-gallery .icon:before, #header nav .menu-gallery .over .icon:before {
	background-size: 185.294117647% 5400%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 2.125em;
	height: 1.5625em;
	margin-left: -1.0625em;
	margin-top: -.78125em
}
#header nav .menu-gallery .icon:before {
	background-position: -1.724137931% 39.6603773585%
}
#header nav .menu-gallery .over .icon:before {
	background-position: -1.724137931% 37.6981132075%
}
#header nav .menu-partners .icon:before, #header nav .menu-partners .over .icon:before {
	background-size: 116.666666667% 5869.56521739%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 3.375em;
	height: 1.4375em;
	margin-left: -1.6875em
}
#header nav .menu-partners .icon:before {
	background-position: -5.5555555556% 20.6103993971%;
	margin-top: -.71875em
}
#header nav .menu-partners .over .icon:before {
	background-position: -5.5555555556% 24.2275810098%;
	margin-top: -.71875em
}
#header nav .menu-products .icon:before, #header nav .menu-products .over .icon:before {
	background-size: 217.24137931% 5869.56521739%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 1.8125em;
	height: 1.4375em;
	margin-left: -.90625em;
	margin-top: -.71875em
}
#header nav .menu-products .icon:before {
	background-position: -1.4705882353% 22.4189902035%
}
#header nav .menu-products .over .icon:before {
	background-position: -1.4705882353% 26.0361718161%
}
#header nav .menu-releases .icon:before, #header nav .menu-releases .over .icon:before {
	background-size: 233.333333333% 6750%;
	width: 1.6875em;
	height: 1.25em;
	margin-left: -.84375em;
	margin-top: -.625em;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat
}
#header nav .menu-releases .icon:before {
	background-position: -1.3888888889% 5.9022556391%;
	top: auto;
	bottom: .25em;
	margin-bottom: 0
}
#header nav .menu-releases .over .icon:before {
	background-position: -1.3888888889% 9.0601503759%
}
#header nav .menu-releases .text {
	display: inline-block;
	width: 8em;
	white-space: normal
}
#header .banner {
	display: none;
	height: 60px;
	background-color: #1c1c1c;
	width: 100%;
	font-size: 0;
	line-height: 0
}
#header .banner .inner {
	display: table-cell;
	vertical-align: middle;
	padding: 0 16px;
	font-size: 16px
}
#header .banner .right {
	float: right
}
#header .banner .instagram-batman {
	color: #FFF;
	font-size: .875em;
	display: inline-block;
	vertical-align: middle;
	margin: 0 10px
}
#header .banner .instagram-batman::before {
	vertical-align: middle;
	content: "";
	margin-right: 4px;
	display: inline-block;
	background-size: 190.909090909% 4090.90909091%;
	background-image: url(../media/global/header/sprites.png);
	background-position: -1.6666666667% 75.4365983295%;
	background-repeat: no-repeat;
	width: 28px;
	height: 28px
}
#header .banner .instagram, #header .banner .instagram:before {
	background-size: 300% 6428.57142857%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 21px
}
.no-touchevents #header .banner .instagram-batman:active, .touchevents #header .banner .instagram-batman:hover {
	-webkit-animation: pulse .3s;
	animation: pulse .3s
}
#header .banner .facebook, #header .banner .youtube, #header .banner .instagram, #header .banner .twitter {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	margin: 0 10px
}
#header .banner .facebook:before, #header .banner .youtube:before, #header .banner .instagram:before, #header .banner .twitter:before {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	opacity: 0
}
.no-touchevents #header .banner .facebook:hover:before, .no-touchevents #header .banner .instagram:hover:before, .no-touchevents #header .banner .twitter:hover:before, .touchevents #header .banner .facebook:active:before, .touchevents #header .banner .instagram:active:before, .touchevents #header .banner .twitter:active:before {
	opacity: 1
}
#header .banner .instagram {
	background-position: -1.1904761905% 12.30248307%;
	height: 21px
}
#header .banner .instagram:before {
	background-position: -1.1904761905% 13.9578630549%;
	height: 21px
}
#header .banner .facebook, #header .banner .facebook:before {
	background-size: 572.727272727% 6428.57142857%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 11px;
	height: 21px
}
#header .banner .facebook {
	background-position: -.9615384615% 18.9240030098%
}
#header .banner .facebook:before {
	background-position: -.9615384615% 15.6132430399%
}
#header .banner .twitter, #header .banner .twitter:before {
	background-size: 300% 7941.17647059%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 21px;
	height: 17px
}
#header .banner .twitter {
	background-position: -1.1904761905% .2625656414%
}
#header .banner .twitter:before {
	background-position: -1.1904761905% 1.6129032258%
}
#header .banner .youtube {
     /* background-size: 300% 7941.17647059%;*/
      background-image: url(../media/global/header/youtube-yellow.png);
     
      background-repeat: no-repeat;
      width: 21px;
      height: 21px; }
      #header .banner .youtube:before {
      /*  background-size: 300% 7941.17647059%;*/
        background-image: url(../media/global/header/youtube-white.png);
    
        background-repeat: no-repeat;
        width: 21px;
        height: 21px; }
#header .banner a:first-child {
	margin-left: 0
}
#header .banner a:last-child {
	margin-right: 0
}

@media (max-width:899px) {
#header nav {
	display: none;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	text-align: left
}
#header nav li {
	width: 33.3333%;
	height: 33.3333%
}
#header nav.two-rows li {
	height: 50%
}
#header nav .menu-home .icon:before, #header nav .menu-home .over .icon:before {
	background-size: 190.909090909% 4354.83870968%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 2.0625em;
	height: 1.9375em;
	margin-left: -1.03125em;
	margin-top: -.96875em
}
#header nav .menu-home .icon:before {
	background-position: -1.6666666667% 67.8923426839%
}
#header nav .menu-home .over .icon:before {
	background-position: -1.6666666667% 65.4662623199%
}
#header nav .menu-story .icon:before, #header nav .menu-story .over .icon:before {
	background-size: 143.181818182% 5400%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 2.75em;
	height: 1.5625em;
	margin-left: -1.375em;
	margin-top: -.78125em
}
#header nav .menu-story .icon:before {
	background-position: -2.6315789474% 41.6226415094%
}
#header nav .menu-story .over .icon:before {
	background-position: -2.6315789474% 33.7735849057%
}
#header nav .menu-videos .icon:before, #header nav .menu-videos .over .icon:before {
	background-size: 190.909090909% 4090.90909091%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 2.0625em;
	height: 2.0625em;
	margin-left: -1.03125em;
	margin-top: -1.03125em
}
#header nav .menu-videos .icon:before {
	background-position: -1.6666666667% 88.344722855%
}
#header nav .menu-videos .over .icon:before {
	background-position: -1.6666666667% 85.7630979499%
}
#header nav .menu-games .icon:before, #header nav .menu-games .over .icon:before {
	background-size: 123.529411765% 4655.17241379%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 3.1875em;
	height: 1.8125em;
	margin-left: -1.59375em;
	margin-top: -.90625em
}
#header nav .menu-games .icon:before {
	background-position: -4.1666666667% 56.2831188494%
}
#header nav .menu-games .over .icon:before {
	background-position: -4.1666666667% 60.8251324754%
}
#header nav .menu-characters .icon:before, #header nav .menu-characters .over .icon:before {
	background-size: 233.333333333% 3552.63157895%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 1.6875em;
	height: 2.375em;
	margin-left: -.84375em;
	margin-top: -1.1875em
}
#header nav .menu-characters .icon:before {
	background-position: -1.3888888889% 100.038109756%
}
#header nav .menu-characters .over .icon:before {
	background-position: -1.3888888889% 97.0655487805%
}
#header nav .menu-gallery .icon:before, #header nav .menu-gallery .over .icon:before {
	background-size: 153.658536585% 4655.17241379%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 2.5625em;
	height: 1.8125em;
	margin-left: -1.28125em;
	margin-top: -.90625em
}
#header nav .menu-gallery .icon:before {
	background-position: -2.2727272727% 58.5541256624%
}
#header nav .menu-gallery .over .icon:before {
	background-position: -2.2727272727% 63.0961392884%
}
#header nav .menu-partners .icon:before, #header nav .menu-partners .over .icon:before {
	background-size: 98.4375% 5192.30769231%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 4em;
	height: 1.625em;
	margin-left: -2em;
	margin-top: -.8125em
}
#header nav .menu-partners .icon:before {
	background-position: 50% 43.6178247734%
}
#header nav .menu-partners .over .icon:before {
	background-position: 50% 45.6570996979%
}
#header nav .menu-products .icon:before, #header nav .menu-products .over .icon:before {
	background-size: 180% 5000%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 2.1875em;
	height: 1.6875em;
	margin-left: -1.09375em;
	margin-top: -.84375em
}
#header nav .menu-products .icon:before {
	background-position: -1.7857142857% 51.9652305367%
}
#header nav .menu-products .over .icon:before {
	background-position: -1.7857142857% 54.0816326531%
}
#header nav .menu-releases .icon:before, #header nav .menu-releases .over .icon:before {
	background-size: 190.909090909% 4090.90909091%;
	background-image: url(../media/global/header/sprites.png);
	background-repeat: no-repeat;
	width: 2.0625em;
	height: 2.0625em;
	margin-left: -1.03125em;
	margin-top: -1.03125em
}
#header nav .menu-releases .icon:before {
	background-position: -1.6666666667% 78.0182232346%
}
#header nav .menu-releases .over .icon:before {
	background-position: -1.6666666667% 83.1814730448%
}
#header nav .center {
	width: 100%
}
#header nav a {
	display: block
}
#header nav .icon {
	height: 60px
}
#header nav li .up {
	width: 100%;
	background-color: #282828;
	padding: 0;
	margin: 0
}
#header nav li .over {
	width: 100%;
	padding: 0;
	background-color: #383838
}
.no-touchevents #header nav a:hover .over, .touchevents #header nav a:active .over {
	opacity: 1
}
}
#compatibility, #footer .drawer, #rotate p, #tickets {
	text-align: center
}

@media (max-width:659px) {
#header nav li a .up {
	font-size: .75em
}
#header nav .banner {
	display: table
}
}

@media (min-width:900px) {
#header nav {
	height: 70px;
	background-color: #282828;
	position: relative;
	overflow: hidden;
	display: block!important;
	opacity: 1!important
}
#header nav li {
	height: 100%
}
#header nav li a {
	display: inline-block
}
#header nav .icon {
	height: 40px
}
#header nav .menu-releases .icon {
	height: 28px
}
#header nav .up {
	padding: 0 18px;
	font-size: .875em
}
#header nav .over {
	padding: 0 18px
}
html.preserve3d.csstransforms3d #header nav .up {
	transition: background .4s, -webkit-transform .4s;
	transition: transform .4s, background .4s;
	transition: transform .4s, background .4s, -webkit-transform .4s;
	-webkit-transform-origin: 50% 0;
	-ms-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d
}
html.preserve3d.csstransforms3d #header nav .up>.center {
	transition: opacity .4s
}
html.preserve3d.csstransforms3d #header nav .over {
	top: 100%;
	transition: background .4s;
	-webkit-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transform-origin: 50% 0;
	-ms-transform-origin: 50% 0;
	transform-origin: 50% 0;
	opacity: 1
}
html.preserve3d.csstransforms3d.no-touchevents #header nav a:hover .up>.center, html.preserve3d.csstransforms3d.no-touchevents #header nav li.active .up>.center, html.preserve3d.csstransforms3d.touchevents #header nav a:active .up>.center, html.preserve3d.csstransforms3d.touchevents #header nav li.active .up>.center {
	opacity: 0
}
html.preserve3d.csstransforms3d.no-touchevents #header nav a:hover .up, html.preserve3d.csstransforms3d.no-touchevents #header nav li.active .up {
	-webkit-transform: rotateX(90deg) translateY(-30px);
	transform: rotateX(90deg) translateY(-30px);
	background-color: #000
}
html.preserve3d.csstransforms3d.no-touchevents #header nav a:hover .over, html.preserve3d.csstransforms3d.no-touchevents #header nav li.active .over {
	background: #383838
}
html.preserve3d.csstransforms3d.touchevents #header nav a:active .up, html.preserve3d.csstransforms3d.touchevents #header nav li.active .up {
	-webkit-transform: rotateX(90deg) translateY(-30px);
	transform: rotateX(90deg) translateY(-30px);
	background-color: #000
}
html.preserve3d.csstransforms3d.touchevents #header nav a:active .over, html.preserve3d.csstransforms3d.touchevents #header nav li.active .over {
	background: #383838
}
}

@media (max-width:1023px) {
#header nav .over, #header nav .up {
	padding: 0 14px
}
}
li, ul {
	margin: 0;
	padding: 0
}
#tickets {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	display: none;
	background-color: rgba(0,0,0,.9);
	width: 100%;
	height: 100%;
	color: #f7ca2c
}
#tickets .inner {
	top: 50%;
	position: relative;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%)
}
#tickets .close {
	position: absolute;
	display: block;
	background: url(../media/partners/close.png) 0 center no-repeat;
	background-size: 200% 100%;
	right: 20px;
	top: 20px;
	width: 20px;
	height: 20px
}
.no-touchevents #tickets .close:hover, .touchevents #tickets .close:active {
	background-position: 100% center
}
#tickets h3 {
	font-size: 1.5em;
	margin-top: 0;
	margin-bottom: .5em
}
#tickets ul {
	font-size: 0
}
#tickets img {
	margin: 0 10px;
	max-width: 180px
}
@-webkit-keyframes musicBar1 {
0%, 100% {
height:4px
}
21% {
height:6px
}
53% {
height:2px
}
85% {
height:7px
}
}
@keyframes musicBar1 {
0%, 100% {
height:4px
}
21% {
height:6px
}
53% {
height:2px
}
85% {
height:7px
}
}
@-webkit-keyframes musicBar2 {
0%, 100% {
height:8px
}
21% {
height:4px
}
53% {
height:12px
}
85% {
height:2px
}
}
@keyframes musicBar2 {
0%, 100% {
height:8px
}
21% {
height:4px
}
53% {
height:12px
}
85% {
height:2px
}
}
@-webkit-keyframes musicBar3 {
0%, 100%, 50% {
height:12px
}
25% {
height:6px
}
75% {
height:5px
}
}
@keyframes musicBar3 {
0%, 100%, 50% {
height:12px
}
25% {
height:6px
}
75% {
height:5px
}
}
@-webkit-keyframes musicBar4 {
0%, 100% {
height:8px
}
25% {
height:11px
}
50% {
height:5px
}
75% {
height:12px
}
}
@keyframes musicBar4 {
0%, 100% {
height:8px
}
25% {
height:11px
}
50% {
height:5px
}
75% {
height:12px
}
}
@-webkit-keyframes musicBar5 {
0%, 100% {
height:12px
}
25% {
height:3px
}
50% {
height:10px
}
75% {
height:4px
}
}
@keyframes musicBar5 {
0%, 100% {
height:12px
}
25% {
height:3px
}
50% {
height:10px
}
75% {
height:4px
}
}
@-webkit-keyframes musicBar6 {
0%, 100% {
height:8px
}
25% {
height:11px
}
50% {
height:5px
}
75% {
height:9px
}
}
@keyframes musicBar6 {
0%, 100% {
height:8px
}
25% {
height:11px
}
50% {
height:5px
}
75% {
height:9px
}
}
@-webkit-keyframes musicBar7 {
0%, 100% {
height:4px
}
25% {
height:7px
}
50% {
height:2px
}
75% {
height:6px
}
}
@keyframes musicBar7 {
0%, 100% {
height:4px
}
25% {
height:7px
}
50% {
height:2px
}
75% {
height:6px
}
}
*, :after, :before {
	box-sizing: inherit;
	-webkit-tap-highlight-color: transparent
}
a {
	text-decoration: none
}
ul {
	list-style-type: none
}
li {
	display: inline-block
}
:focus {
	outline: 0
}
#footer {
	color: #FFF
}
#footer a {
	color: #878787
}
#footer .primary-links {
	position: fixed;
	z-index: 900;
	right: 20px;
	bottom: 20px
}
#footer .primary-links a {
	margin: 0 .5em;
	color: #FFF;
	font-size: .6875em;
	cursor: pointer
}
.no-touchevents #footer .primary-links a:hover, .touchevents #footer .primary-links a:active {
	color: #f7ca2c
}

@media (max-width:659px) {
#footer .primary-links {
	text-align: center;
	width: 100%;
	bottom: 0;
	right: 0;
	height: 30px;
	line-height: 30px;
	padding-bottom: 30px;
	background-color: #000
}
}
#footer .drawer {
	padding: 30px 30px 45px;
	background-color: #000;
	width: 100%;
	position: fixed;
	z-index: 899;
	top: 100%;
	-webkit-transform: translateY(500px);
	-ms-transform: translateY(500px);
	transform: translateY(500px)
}
#rotate .inner, #rotate p {
	position: absolute;
	top: 50%
}
#footer .drawer .close {
	cursor: pointer;
	background: url(../media/global/close.png) no-repeat;
	background-size: 100% auto;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 20px;
	right: 30px
}
.no-touchevents #footer .drawer .close:hover, .touchevents #footer .drawer .close:active {
	background-position: bottom left
}
#footer .drawer .rating {
	margin: 1em 0 0;
	max-width: 100%
}
#footer .drawer .secondary-links {
	font-size: .6875em;
	margin: 1em 0
}
#footer .drawer .secondary-links a {
	margin: 0 .5em
}
#footer .drawer small {
	font-family: "Open Sans", sans-serif;
	font-size: .6875em;
	color: #FFF
}

@media (max-width:659px) {
#footer .drawer {
	padding-bottom: 60px
}
}
@-webkit-keyframes pulse {
from, to {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
50% {
-webkit-transform:scale3d(1.05, 1.05, 1.05);
transform:scale3d(1.05, 1.05, 1.05)
}
}
@keyframes pulse {
from, to {
-webkit-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1)
}
50% {
-webkit-transform:scale3d(1.05, 1.05, 1.05);
transform:scale3d(1.05, 1.05, 1.05)
}
}
#transition {
	display: block;
	position: fixed;
	z-index: -100;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw
}

@media (max-width:899px) {
#transition {
	background-color: #000
}
#transition .bricks {
	top: 50%;
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 0;
	line-height: 0
}
#transition .bricks span {
	background-image: url(../media/global/transition-bricks-mobile.png);
	background-size: 100% auto;
	width: 28px;
	height: 22px;
	display: inline-block;
	margin: 0 5px
}
#transition .bricks span:first-child {
	-webkit-animation: brick-loader 1.5s infinite;
	animation: brick-loader 1.5s infinite
}
#transition .bricks span:nth-child(2) {
	-webkit-animation: brick-loader 1.5s infinite .5s;
	animation: brick-loader 1.5s infinite .5s
}
#transition .bricks span:last-child {
	-webkit-animation: brick-loader 1.5s infinite 1s;
	animation: brick-loader 1.5s infinite 1s
}
}
#rotate {
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: #000;
	display: none;
	color: #FFF;
	font-size: 12px
}
#rotate .inner {
	background: url(../media/global/rotate.png) center center no-repeat;
	background-size: contain;
	height: 150px;
	width: 150px;
	left: 50%;
	margin-left: -75px;
	margin-top: -75px
}
#rotate p {
	width: 107px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	left: 50%;
	margin: 0;
	font-weight: 700
}

@media screen and (orientation:landscape) and (max-height:600px) {
.touchevents #rotate {
	display: block
}
.touchevents #site {
	visibility: hidden
}
}
#compatibility {
	display: none;
	min-height: 100%;
	padding: 20px;
	width: 100%;
	background: url(../media/global/incompatible/bg.jpg) center top no-repeat #fddb4a
}
#compatibility .center {
	display: table-cell;
	vertical-align: middle
}
#compatibility .logo {
	max-width: 800px;
	display: block;
	margin: 0 auto
}
#compatibility .logo 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: .8em;
	font-size: 2.5em
}
#compatibility p {
	font-size: 24px;
	font-weight: 700
}
#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
}
#compatibility .browser div img {
	width: 100%;
	height: auto
}
@-webkit-keyframes brick-loader {
0%, 33% {
background-position:left top
}
33.0001%, 66% {
background-position:left bottom
}
100%, 66.0001% {
background-position:left top
}
}
@keyframes brick-loader {
0%, 33% {
background-position:left top
}
33.0001%, 66% {
background-position:left bottom
}
100%, 66.0001% {
background-position:left top
}
}