html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-weight: normal;
}

body {
	line-height: 1;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block;
}

nav ul {
	list-style: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

.hidden {
	display: none;
}

input,select {
	vertical-align: middle;
}

::selection {
	background: #B98BB6;
}

::-moz-selection {
	background: #B98BB6;
}

#ie-message {
	font-family: sans-serif;
	background-color: #9F77B4;
	text-align: center;
	top: 0;
	padding: 40px;
	line-height: 25px;
	font-size: 18px;
	color: #271638;
	height: 100%;
}

#ie-message h2 {
	font-size: 130%;
	margin-bottom: 30px;
}

#ie-message ul {
	margin: 0;
	padding-left: 0 0 0 20px;
}

#ie-message a {
	color: #426f50;
}

body,html {
	-webkit-text-size-adjust: none;
	margin: 0;
	padding: 0;
}

body {
	font-family: "QlassikBold","Helvetica Neue",Helvetica,sans-serif;
	background-color: #271638;
}

a {
	color: #9F77B4;
	text-decoration: none;
}

small {
	font-size: 70%;
}

h4 {
	margin-bottom: 1.5em;
}

img#thumb {
	display: none;
}

ul.store_links {
	align-items: center;
	justify-content: center;
	margin: -10px 0 10px 0;
	list-style: none;
	padding: 0;
}

#title_text {
	display: block;
	font-size: 20px;
	color: #9cf3b7;
}

#horizontal_bar {
	height: 2px;
	width: 200px;
	background: #9cf3b7;
	margin: 0 auto;
	margin-bottom: 10px;
}


ul.store_links li {
	display: inline-block;
	margin: 5px;
	margin-top: 0;
}

ul.store_links li a {
	position: relative;
	display: block;
	transition:all 0.2s;
}

ul.store_links li a:hover {
	top:-2px;
}
ul.store_links li a:active {
	-webkit-transition:all 0.1s;
	-moz-transition:all 0.1s;
	-o-transition:all 0.1s;
	transition:all 0.1s;
	top:1px;
}

ul.store_links li img {
	border: 1px solid #505a53;
	border-radius: 6px;
}

.trailer_thumb {
	display: block;
	width: 600px;
	margin: 0 auto;
}
.trailer_thumb img {
	width: 100%;
}

/*
    ARTWORK / PARALLAX
*/

#artwork {
	position: relative;
	top: 0;
	background: url("../img/background_no_parallax.jpg");
	background: url("../img/background_no_parallax.jpg"),-moz-linear-gradient(top,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
	background: url("../img/background_no_parallax.jpg"),-webkit-gradient(linear,left top,left bottom,color-stop(20%,#564d91),color-stop(32%,#cfa6be),color-stop(55%,#ae79a4),color-stop(100%,#271638));
	background: url("../img/background_no_parallax.jpg"),-webkit-linear-gradient(top,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
	background: url("../img/background_no_parallax.jpg"),-o-linear-gradient(top,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
	background: url("../img/background_no_parallax.jpg"),-ms-linear-gradient(top,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
	background: url("../img/background_no_parallax.jpg"),linear-gradient(to bottom,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
	background-size: 1380px 620px;
	height: 620px;
	background-position: center 0;
	width: 100%;
	min-width: 720px;
}

#artwork.parallax_enabled {
	background:none;
}

.parallax {
	display: none;
	position: fixed;
	width: 100%;
	min-width: 720px;
	pointer-events: none;
	background-position: center 0;
	background-repeat: no-repeat;
}

#background {
	background: url("../img/background.jpg");
	background: url("../img/background.jpg"),-moz-linear-gradient(top,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
	background: url("../img/background.jpg"),-webkit-gradient(linear,left top,left bottom,color-stop(20%,#564d91),color-stop(32%,#cfa6be),color-stop(55%,#ae79a4),color-stop(100%,#271638));
	background: url("../img/background.jpg"),-webkit-linear-gradient(top,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
	background: url("../img/background.jpg"),-o-linear-gradient(top,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
	background: url("../img/background.jpg"),-ms-linear-gradient(top,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
	background: url("../img/background.jpg"),linear-gradient(to bottom,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
	background-size: 1380px 600px;
	background-position: center 0;
	width: 100%;
	min-width: 720px;
	height: 600px;
	background-repeat: repeat-x;
	top: 0;
}

.ie7 #background,.ie8 #background {
	background: #534b90 url("../img/background.jpg") center 0;
}

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

	#background {
		background: url("../img/background_cropped.jpg");
		background: url("../img/background_cropped.jpg"),-moz-linear-gradient(top,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
		background: url("../img/background_cropped.jpg"),-webkit-gradient(linear,left top,left bottom,color-stop(20%,#564d91),color-stop(32%,#cfa6be),color-stop(55%,#ae79a4),color-stop(100%,#271638));
		background: url("../img/background_cropped.jpg"),-webkit-linear-gradient(top,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
		background: url("../img/background_cropped.jpg"),-o-linear-gradient(top,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
		background: url("../img/background_cropped.jpg"),-ms-linear-gradient(top,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
		background: url("../img/background_cropped.jpg"),linear-gradient(to bottom,#564d91 0%,#cfa6be 32%,#ae79a4 55%,#271638 100%);
		background-size: 780px 780px;
		background-position: center 0;
	}

	.ie7 #background,.ie8 #background {
		background-color: #534b90;
		background: url("../img/background_cropped.jpg");
		background-position: center 0;
	}

}

#background .twinkle_mask {
	content: '';
	display: block;
	background-image: url("../img/background_twinkle_mask.png");
	background-size: 1380px 600px;
	height: 600px;
	animation:starMove 40s linear infinite;
	background-repeat: repeat-x;
}
@keyframes starMove {
	from {background-position:0 0;}
	to {background-position:1380px 0;}
}


#backgroundNebula {
	background-image: url("../img/backgroundNebula.png");
	/*background-size: 1380px 780px;*/
	height: 600px;
	background-repeat: repeat-x;
}

#layer04 {
	background-image: url("../img/layers/layer04.png");
	background-size: 685px 150px;
	height: 150px;
	top: 360px;
}

#layer05 {
	background-image: url("../img/layers/layer05.png");
	background-size: 540px 340px;
	height: 440px;
	top: 260px;
}

#layer05Bright {
	background-image: url("../img/layers/layer05Bright.png");
	background-size: 540px 340px;
	height: 440px;
	top: 260px;
}

#layer09 {
	background-image: url("../img/layers/layer09.png");
	background-size: 1380px 400px;
	height: 400px;
	top: 380px;
	background-repeat: no-repeat;
}

#layer09 .dark_overlay {
	position: absolute;
	top: 0;
	min-width: 400px;
	width: 100%;
	pointer-events: none;
	overflow: hidden;
	background-position: center 0;
	background-repeat: no-repeat;
	background-image: url("../img/layers/layer09_dark.png");
	background-size: 1380px 400px;
	height: 400px;
}

/*
    TITLE
*/

#title {
	display: block;
	position: relative;
	top: 40px;
	width: 100%;
	min-width: 720px;
	height: 300px;
	text-align: center;
}

.parallax_enabled #title {
	position: fixed;
}

#title h1 {
	position: relative;
	font-weight: normal;
	display: block;
	overflow: hidden;
	margin: auto;
	height: 0;
	left:3px;
	width: 480px;
	padding-top: 280px;
	/*background-size: 480px 280px;*/
	background-position: center 0;
	background-repeat: no-repeat;
}

.title_en {
	background-image: url("../img/layers/layer_title_en.png");
}

.title_es {
	background-image: url("../img/layers/layer_title_es.png");
}

.title_ja {
	background-image: url("../img/layers/layer_title_ja.png");
}

#title h1 .dark_overlay {
	position: absolute;
	top: 0;
	width: 100%;
	pointer-events: none;
	overflow: hidden;
	background-position: center 0;
	background-repeat: no-repeat;
	height: 280px;
}

.title_dark_en {
	background-image: url("../img/layers/layer_title_dark_en.png");
}

.title_dark_es {
	background-image: url("../img/layers/layer_title_dark_es.png");
}

.title_dark_ja {
	background-image: url("../img/layers/layer_title_dark_ja.png");
}

#title h1.blink:after,#title h1.blink .after {
	content: "";
	background-color: #271638;
	background-image: none;
	position: absolute;
	top: 58px;
	left: 87px;
	height: 2px;
	width: 7px;
	transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}

#title h2 {
	position: absolute;
	left:0;
	right:0;
	width: 525px;
	margin: auto;
	font-size: 23px;
	letter-spacing: 0.05em;
	color: #271638;
	display: block;
	margin-top: 20px;
}

/*
    MAIN CONTENT
*/


#characters_top {
	position: absolute;
	width: 100%;
	top: 530px;
}

#characters {
	margin:auto;
	text-align:center;
	font-size:0;
	min-width: 720px;
}
#characters div{
	display: inline-block;
	height:90px;
	width:90px;
	border: 1px solid #ddd;
	margin-left: 8px;
	margin-right: 8px;
}

#characters #inside {
	height:90px;
	width:90px;
	border: 1px solid #ddd;
	background: #eee;
	margin-left: 8px;
	margin-right: 8px;
}

#characters #insideNormal {
	display: inline-block;
	height:90px;
	width:90px;
	border: 1px solid #ddd;
	background: #eee;
	margin-left: 20px;
	margin-right: 20px;
}

#content {
	position: absolute;
	width: 100%;
	min-width: 720px;
	top: 590px;
	background-color: #030a11;
	background-image: url("../img/backgroundBottom.jpg");
	background-repeat: repeat-x;
}

#content #inner_links {
	width: 720px;
	margin: auto;
	padding-top: 80px;
	color: #9F77B4;
	text-align: center;
}

#content #inner {
	width: 720px;
	margin: auto;
	/*margin-top: 70px;*/
	padding-top: 30px;
	color: #9F77B4;
	text-align: center;
}

iframe#video {
	position: relative;
	z-index: 1001;
}

#video_thumb {
	width: 560px;
	height: 315px;
	margin: auto;
	background-image: url("../img/video.jpg");
	background-size: 560px 315px;
	display: block;
	padding-top:0;
}

#video_thumb.mobile {
	width: 640px;
	height: 260px;
	background-size: 640px 360px;
	padding-top: 100px;
	margin-left: 40px;
	margin-right: 40px;
}

#video_thumb .text {
	display: block;
	color: #9cffc2;
	font-size: 25px;
	padding-top: 80px;
	margin: auto;
	margin-bottom: 30px;
}
#video_thumb .button {
	display: block;
	width: 85px;
	height: 60px;
	background-image: url("../img/icon_play.png");
	background-size: 85px 60px;
	color: #15231a;
	margin: auto;
	-webkit-transition: opacity .2s;
	-moz-transition: opacity .2s;
	-o-transition: opacity .2s;
	transition: opacity .2s;
	opacity: 1;
}
#video_thumb:hover .button {
	opacity: 0.7;
}

ul#screenshots {
	list-style: none;
	margin: auto;
	margin-top: 50px;
	padding: 0;
	width: 660px;
}

ul#screenshots li {
	padding: 0;
	margin: 10px;
	margin-top: 0;
	display: inline-block;
}

ul#screenshots li a img{
	display: block;
	height: 150px;
	padding: 0;
	margin: 0;
	-webkit-transition: opacity .2s;
	-moz-transition: opacity .2s;
	-o-transition: opacity .2s;
	transition: opacity .2s;
}

ul#screenshots li a:hover img {
	opacity: 0.5;
}

/*
    SUBSCRIBE FORM
*/

#subscribe {
	display: block;
	width: 450px;
	height: 30px;
	margin: 20px auto 110px auto;
}

#subscribe h3 {
	font-size: 18px;
	margin-bottom: 35px;
}

#subscribe .text,#subscribe .submit {
	display: inline-block;
	position: relative;
	top: 0;
	left: 0;
	display: block;
	float: left;
	height: 30px;
	border: 0;
	padding: 10px;
	margin: 0;
	font-family: "Quicksand","Helvetica Neue",Helvetica,sans-serif;
	font-size: 20px;
	outline: 0;
	font-weight: normal;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}

#subscribe .text {
	-webkit-border-top-left-radius: 3px;
	-moz-border-radius-topleft: 3px;
	border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-bottom-left-radius: 3px;
	width: 290px;
	background-color: #372448;
	color: #9F77B4;
}

#subscribe .submit {
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	border-bottom-right-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topright: 3px;
	border-top-right-radius: 3px;
	height: 50px;
	width: 140px;
	background-color: #9F77B4;
	color: #271638;
	cursor: pointer;
	-webkit-transition: background-color .1s;
	-moz-transition: background-color .1s;
	-o-transition: background-color .1s;
	transition: background-color .1s;
}

#subscribe .submit:hover {
	background-color: #B88AD1;
}

#subscribe .submit:active {
	background-color: #AA7FC1;
}

input.text::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
	color: #9F77B4;
}

input.text:-moz-placeholder,textarea:-moz-placeholder {
	color: #9F77B4;
}

input.text.placeholder,textarea.placeholder {
	color: #9F77B4!important;
}

/*
    SOCIAL LINKS
*/

#social {
	-webkit-font-smoothing: antialiased;
	list-style: none;
	margin: 0 auto 70px auto;
	padding-top: 20px;
}

#social li {
	display: inline;
}

#social li a {
	display: inline-block;
	margin: 0 15px 15px 15px;
	height: 0;
	padding-top: 40px;
	width: 40px;
	background-size: 40px 40px;
	overflow: hidden;
	-webkit-transition: opacity .1s;
	-moz-transition: opacity .1s;
	-o-transition: opacity .1s;
	transition: opacity .1s;
}

#social li a.twitter {
	background-image: url("../img/icon_twitter.png");
}
#social li a.facebook {
	background-image: url("../img/icon_fb.png");
}
#social li a.instagram {
	background-image: url("../img/icon_ig.png");
}

#social li a:hover {
	opacity: .5;
}

/*
    LINKS
*/

ul#links {
	list-style: none;
	margin: 0 auto 5px auto;
	font-size: 18px;
	padding-bottom: 50px;
}

ul#links li {
	margin-bottom: 15px;
}

ul#links li a {
	color: #a6f3d7;
	-webkit-transition: color .1s;
	-moz-transition: color .1s;
	-o-transition: color .1s;
	transition: color .1s;
}

ul#links li a:hover {
	color: #356dfc;
}

/*
    CREDIT
*/

#credit {
	display: block;
	width: 200px;
	margin: auto;
	margin-bottom: 10px;
	color: #99c487;
	font-size: 12px;
	-webkit-transition: opacity .2s;
	-moz-transition: opacity .2s;
	-o-transition: opacity .2s;
	transition: opacity .2s;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#credit:hover {
	opacity: 0.5;
}


ul#credit li a {
	color: #a6f3d7;
	-webkit-transition: color .1s;
	-moz-transition: color .1s;
	-o-transition: color .1s;
	transition: color .1s;
}

ul#credit li a:hover {
	color: #5275d2;
}

@keyframes flickerAnimation {
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
	0%   { opacity:1; }
	50%  { opacity:0; }
	100% { opacity:1; }
}
.animate-flicker {
	-webkit-animation: flickerAnimation 3s infinite;
	-moz-animation: flickerAnimation 3s infinite;
	-o-animation: flickerAnimation 3s infinite;
	animation: flickerAnimation 3s infinite;
}

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
	visibility: visible;
	width: 90px;
	font-size: 12px;
	background-color: #9ba3ff;
	color: #1a1a1a;
	text-align: center;
	border-radius: 6px;
	padding: 2px 0;
	top: 100%;
	left: 50%;
	margin-left: -45px;
	position: absolute;
	z-index: 1;
}

.tooltip .tooltiptextNormal {
	visibility: visible;
	width: 100px;
	font-size: 12px;
	background-color: #b9ff9b;
	color: #1a1a1a;
	text-align: center;
	border-radius: 6px;
	padding: 2px 0;
	top: 100%;
	left: 50%;
	margin-left: -50px;
	position: absolute;
	z-index: 1;
}

.tooltip .tooltiptextRed {
	visibility: visible;
	width: 90px;
	font-size: 12px;
	background-color: #f86767;
	color: #1a1a1a;
	text-align: center;
	border-radius: 6px;
	padding: 2px 0;
	top: 100%;
	left: 50%;
	margin-left: -45px;
	position: absolute;
	z-index: 1;
}

.language {
	display: block;
	padding: 0 12px;
	text-decoration: none;
	border-radius: .2em;
	transition: background-color .15s;
	font-size: 12px;
}

.language a {
	color: #4bb1cf;
	padding-left: 15px;
	padding-right: 15px;
}

.language a:hover, .language a:focus {
	background-color: rgba(255,255,255,.2);
	text-decoration: none;
}

@media (max-width: 720px) {
	#characters div{
		display: inline-block;
		height:70px;
		width:70px;
		border: 1px solid #ddd;
		margin-left: 6px;
		margin-right: 6px;
	}

	#characters #inside {
		height:70px;
		width:70px;
		border: 1px solid #ddd;
		background: #eee;
		margin-left: 6px;
		margin-right: 6px;
	}

	#characters #insideNormal {
		display: inline-block;
		height:70px;
		width:70px;
		border: 1px solid #ddd;
		background: #eee;
		margin-left: 18px;
		margin-right: 18px;
	}


	.tooltip .tooltiptext {
		visibility: visible;
		width: 80px;
		font-size: 10px;
		background-color: #9ba3ff;
		color: #1a1a1a;
		text-align: center;
		border-radius: 6px;
		padding: 2px 0;
		top: 100%;
		left: 50%;
		margin-left: -40px;
		position: absolute;
		z-index: 1;
	}

	.tooltip .tooltiptextNormal {
		visibility: visible;
		width: 90px;
		font-size: 10px;
		background-color: #b9ff9b;
		color: #1a1a1a;
		text-align: center;
		border-radius: 6px;
		padding: 2px 0;
		top: 100%;
		left: 50%;
		margin-left: -45px;
		position: absolute;
		z-index: 1;
	}

	.tooltip .tooltiptextRed {
		visibility: visible;
		width: 80px;
		font-size: 10px;
		background-color: #f86767;
		color: #1a1a1a;
		text-align: center;
		border-radius: 6px;
		padding: 2px 0;
		top: 100%;
		left: 50%;
		margin-left: -40px;
		position: absolute;
		z-index: 1;
	}

}