@charset "utf-8";
/*Reset*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline;}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:400;vertical-align:middle}
q,blockquote{quotes:none}
q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}
a img{border:none;outline:none}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
*,:before,:after{box-sizing:border-box}
html,body{width:100%;height:100%;min-height:100%;position:relative;overflow-x: hidden;}
html{line-height:1;}

body{-webkit-backface-visibility:hidden;backface-visibility:hidden; font-family: "mr-eaves-modern", serif; font-weight: 400;font-size:17px;line-height:1.5;background-color: #f4b61a;color: #fff; }
a{outline:none;text-decoration:none; color: #fff}
img{vertical-align:middle}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
/*did this body auto height to make fancy box work properly */
body {height: auto;}
.container {width: 100%;height: auto;color: white;position: relative;}
.innerContainer {
	max-width: 1980px;
	margin: 0 auto;
	position: relative;
/*	z-index: 1;*/
}
.isHover{
	transition:opacity .3s ease-in-out;
	-webkit-transition:opacity .3s ease-in-out;
	-moz-transition:opacity .3s ease-in-out;
	-ms-transition:opacity .3s ease-in-out;
}
.isHover:hover {
	opacity:.8;
	cursor:pointer;
}
h4 {
	text-transform: uppercase;
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 1.85px;
}
h3 {
	text-transform: uppercase;
	font-weight: 500;
	font-size: 4.5vw;
	letter-spacing: 1.85px;
}
h2 {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 5vw;
	letter-spacing: 1.85px;
}
h1 {
	text-transform: uppercase;
	line-height: 1.4;
	font-weight: 800;
	font-size: 6vw;
	letter-spacing: 1.85px;
}
.numberText {
    font-family: "arial", san-serif;
    font-size: 4.3vw;
}
.italic {
	font-style: italic;
}
@media screen and (min-width: 640px) {
	body {
		background-color: #000;
	}
	body#purchasePage {
		background-color: #f4b61a;
	}
	h3 {
		font-size: 3vw;
	}
	h2 {
		font-size: 3.15vw;
	}
	h1 {
		font-size: 40px;
	}
	p {
		font-size: 20px;
	}
	.numberText {
		font-size: 30px;
	}
}
@media screen and (min-width: 1250px) {
	h4 {
		font-size: 25.25px;
	}
	h3 {
		font-size: 37.25px;
	}
	h2 {
		font-size: 39.25px;
	}
}
/*loader*/
#loader-bg{display:none;position:fixed;width:100%;height:100%;top:0;left:0;background-color:#f4b61a;z-index:20000}
.loaderGrid {
	display: inline-block;
	position: absolute;
    width: 125.5px;
    height: 125.5px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}
.loaderGrid div {
	position: absolute;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #b20a0a;
	animation: loaderGrid 1.3s linear infinite;
}
.loaderGrid div:nth-child(1) {
	top: 12px;
	left: 12px;
	animation-delay: 0s;
}
.loaderGrid div:nth-child(2) {
	top: 12px;
	left: 52px;
	animation-delay: -0.3s;
}
.loaderGrid div:nth-child(3) {
	top: 12px;
	left: 90px;
	animation-delay: -0.7s;
}
.loaderGrid div:nth-child(4) {
	top: 52px;
	left: 12px;
	animation-delay: -0.3s;
}
.loaderGrid div:nth-child(5) {
	top: 52px;
	left: 52px;
	animation-delay: -0.7s;
}
.loaderGrid div:nth-child(6) {
	top: 52px;
	left: 90px;
	animation-delay: -1.1s;
}
.loaderGrid div:nth-child(7) {
	top: 90px;
	left: 12px;
	animation-delay: -0.7s;
}
.loaderGrid div:nth-child(8) {
	top: 90px;
	left: 52px;
	animation-delay: -1.1s;
}
.loaderGrid div:nth-child(9) {
	top: 90px;
	left: 90px;
	animation-delay: -1.5s;
}
@keyframes loaderGrid {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/*Flags*/
.noFlag {display:none;}
#selected-country{margin-bottom:15px;cursor:pointer}
#country-navigation-wrapper{width:50px;position:absolute;top:1px;right:1px;vertical-align:top;z-index:103}
#country-navigation-wrapper img{border:#000 1px solid;width:calc(100% - 2px)}
#country-nav{position:relative;overflow:hidden}
#country-nav div{position:relative;width:100%;margin-left:100%;margin-bottom:15px}
.privacyCertified {cursor: pointer;}

@media screen and (min-width: 1600px) {
	#country-navigation-wrapper {
		position:fixed;
	}
}

/*Main Content*/
body#home {
	background-color:#f4b61a;
	position:relative;
	opacity: 0;
}
.socialIcons {
    position: relative;
    text-align: center;
}
.socialIcons img:first-child {
    margin-right: 10px;
}
.socialIcons img {
    height: 50px;
}
/*Hero Area*/
.heroArea {
	text-align: center;
/*	margin-bottom: -20px;*/
	position: relative;
	z-index: 1;
}
.heroContainer {
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
}
.heroImg {
	width: 100%;
}
.heroGroup h2 {
	margin: 3% auto;
}
.heroLogo {
	width: 95%;
	max-width: 700px;
}
.purchaseBtn, .purchaseBtn2 {
	background-color: #b20a0a;
    border: 1px solid #FFF;
    box-shadow: 4px 4px 0 #FFF;
    display: inline-block;
    cursor: pointer;
	padding: 0 5px;
	position: absolute;
    bottom: 42%;
	left: 50%;
	transform: translate(-50%, 0);
	white-space: nowrap;
}
.purchaseBtn > p, .purchaseBtn2 > p {
    font-size: 18px;
	text-transform: uppercase;
}
.purchaseBtn > *, .purchaseBtn2 > * {
    display: inline-block;
    padding: 4px 8px;
}
.purchaseBtn2 {
	bottom: 26%;
}
.trailerGroup {
	width: 100%;	
	background-color: #000;
}
.trailerInnerGroup {
	width: 100%;
	padding: 6px;
	max-width: 425px;
	position: relative;
	margin: 0 auto;
	font-size: 0;
}
.newTrailerText {
	display: inline-block;
	width: 10%;
	margin-right: 2%;
}
.playTrailer {
	width: 88%;
	max-width: 425px;
}
/*
.newTrailerText {
    position: absolute;
    top: 50%;
    left: 0;
    transform: rotate(270deg)translate(12%, -230%);
}
*/
.heroBtn {
    border: 1px solid #000;
    background-image: url(../img/hero/btn_bg.jpg);
    background-size: cover;
    background-position: 50% 50%;
    width: 130px;
	position: absolute;
	z-index: 25;
	top: 0;
}
.heroBtnRed {
    border: 1px solid #000;
    background-image: url(../img/hero/btn_bg_red.jpg);
    background-size: cover;
    background-position: 50% 50%;
    width: 130px;
	position: absolute;
	z-index: 25;
	top: 0;
}
.joinNewsletterBtn {
	top: 1px;
	right: 50px;
}
.buyBtn {
	top: 1px;
	right: 180px;
}
.btnText {
	color: #FFF;
    text-transform: uppercase;
/*    padding: 6px;*/
    font-size: 12px;
    text-shadow: none;
}
.heroLine {
	width: 100%;
	position: relative;
    bottom: 10px;
	max-height: 35px; 
	display:none;
}
.calloutGroup {
	background-color: #000;
	width: 100%;
	position: relative;
	padding: 20px 0;
}
.callout {
	width: 90%;
}
@media screen and (min-width: 460px) {
	.purchaseBtn {
		bottom: 40%;
	}
	.purchaseBtn2 {
		bottom: 25%;
	}
}
@media screen and (min-width: 520px) {
	.purchaseBtn {
		bottom: 38%;
	}
}
@media screen and (min-width: 600px) {
	.purchaseBtn {
		bottom: 37%;
	}
	.purchaseBtn2 {
		bottom: 25%;
	}
}
@media screen and (min-width: 640px) {
	.heroArea {
		margin-bottom: -23px;
	}
	.numberText {
		font-size: 3.0vw;
	}
	.trailerGroup {
		width: 25%;
		position: absolute;
		bottom: 0;
		right: 0;
		max-width: 425px;
	}
	.purchaseBtn, .purchaseBtn2 {
		bottom: 25px;
		width: inherit;
    	max-width: inherit;
	}
	.purchaseBtn > p, .purchaseBtn2 > p {
		font-size: 13px;
	}
	.heroLine {
		display: block;
	}
	.calloutGroup {
		background-color: transparent;
		width: 35%;
		position: absolute;
		padding: 0;
		left: 50%;
		bottom: 60px;
		transform: translate(-50%, 0);
	}
}
@media screen and (min-width: 1024px) {
	.purchaseBtn, .purchaseBtn2 {
		display:block;
	}
	.purchaseBtn > p, .purchaseBtn2 > p {
		font-size: 24px;
	}
	.calloutGroup {
		width: 40%;
		bottom: 80px;
	}
}
@media screen and (min-width: 1250px) {
	.numberText {
		font-size: 38px;
	}
}
@media screen and (min-width: 1600px) {
	.newTrailerText {
		font-size: 22px;
	}
}
/*Trailer*/
#trailer {
	background-image: linear-gradient(
		125deg, 
		rgba(244, 182, 26, .1) 0, 
		rgba(0, 0, 0, .4) 15%, 
		rgba(0, 0, 0, .7) 30%,
		rgba(0, 0, 0, .98) 50%,
		rgba(0, 0, 0, .98) 90%,
		rgba(0, 0, 0, .9) 100%
		),
		url('../img/character/yazawa_triangle_pattern.png');
	background-size: 100%, 20px;
	background-position: top left;
	background-repeat: no-repeat, repeat;
	position: relative;
}
.trailerContainer {
    width: 95%;
    margin: 0 auto;
    max-width: 1200px;
    text-align: center;
    padding: 20px 0 40px;
    position: relative;
}
.trailerNext, .trailerPrev {
	width: 30px;
    position: absolute;
	top: 50%;
	transform: translate(0, 50%);
/*	z-index: 1;*/
}
.trailerNext {
	right: 0;
}
.trailerPrev {
	left: 0;
	z-index: 1;
}
.trailerTitle {
	width: auto;
    max-width: 100%;
    max-height: 50px;
    display: block;
    margin: 0 auto 25px;
}
.storyLineTop {
	width: 100%;
	position: absolute;
    bottom: -16px;
	max-height: 35px; 
	display:none;
}
@media screen and (min-width: 640px) {
	#trailer {
		background-image: linear-gradient(
		135deg, 
		rgba(244, 182, 26, .1) 0, 
		rgba(0, 0, 0, .4) 15%, 
		rgba(0, 0, 0, .7) 30%,
		rgba(0, 0, 0, .98) 50%,
		rgba(0, 0, 0, .98) 90%,
		rgba(0, 0, 0, .9) 100%
		),
		url('../img/character/yazawa_triangle_pattern.png');
	}	
	.trailerPrev, .trailerNext {
		bottom: 30px;
	}
	.storyLineTop {
		display: block;
	}
}
@media screen and (min-width: 900px) {
	.trailerPrev, .trailerNext {
		height: 50px;
	}
	.trailerPrev {
		left: -10px;
	}
	.trailerNext {
		right: -12px;
	}
	.siema {
		padding-top: 100px;
    	margin-top: -100px;
	}
}	
@media screen and (min-width: 1024px) {
	#trailer {
		background-image: linear-gradient(
		140deg, 
		rgba(244, 182, 26, .1) 0, 
		rgba(0, 0, 0, .4) 15%, 
		rgba(0, 0, 0, .7) 30%,
		rgba(0, 0, 0, .98) 50%,
		rgba(0, 0, 0, .98) 90%,
		rgba(0, 0, 0, .9) 100%
		),
		url('../img/character/yazawa_triangle_pattern.png')
	}
}
/*Story*/
.storyArea {
	position: relative;
	overflow: hidden;
}
.storyContainer {	
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
.storyInnerContainer, .purchaseInnerContainer {
	max-width: 950px;
    text-align: center;
    width: 90%;
    padding: 10% 0;
	margin: 0 auto;
/*	z-index: 1;*/
	position: relative;
}
.purchaseInnerContainer {
    padding: 0 0 2%;
	text-transform: uppercase;
}
.storyInnerContainer p, .purchaseInnerContainer p {
	position: relative;
    padding: 5px 0;
    color: white;
    background: #000;
 	box-shadow: 10px 0 0 #000, -10px 0 0 #000;
	display: inline;
	line-height: 2em;
}
.riseTitle {
    width: auto;
    max-width: 100%;
    max-height: 140px;
/*    z-index: 1;*/
    position: relative;
    margin-top: 60px;
}
.storyTattoo {
    display: block;
    z-index: -1;
    position: absolute;
    width: 100%;
    top: -6%;
    left: 0;
	opacity: .3;
}
.storyImageGroup {
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    max-width: 1350px;
    text-align: center;
	padding-bottom: 60px;
}
.imgGroup {
	position: relative;
	width: 47%;
    margin: 1% 1% 2%;
	max-width: 250px;
	display: inline-block;
}
.storyImgBW {	
	filter: grayscale(1);	
	position: absolute;
	opacity: 1;
	transition: opacity .5s linear;
	z-index: 1;
	width: 100%;
	border: 2px solid #000;
	box-shadow: 4px 4px 0 #000;
}
.storyImgBW:hover {
	opacity: 0;
}
.storyImg {
	position: relative;
	width: 100%;
	border: 2px solid #000;	
	box-shadow: 4px 4px 0 #000;
}
.storyLine {
	width: 100%;
	position: absolute;
	bottom: 0;
}
@media screen and (min-width: 640px) {
	.storyTattoo {
		top: -12%;
	}
}
@media screen and (min-width: 768px) {
	.storyInnerContainer {
		padding: 7% 0;
	}
/*
	.storyImageGroup {
		padding-bottom: 7%;
	}
*/
}
@media screen and (min-width: 894px) {
	.storyImageGroup img {
		margin: 1% 1% 1.5%;
	}
}
@media screen and (min-width: 1219px) {
/*
	.storyImageGroup {
		padding-bottom: 85px;
	}
*/
	.storyTattoo {
		top: -30%;
	}
}
@media screen and (min-width: 1920px) {
	.storyTattoo {
		top: -45%;
	}
}
/*Character*/
#character {
	background-image: linear-gradient(
		125deg, 
		rgba(244, 182, 26, .1) 0, 
		rgba(0, 0, 0, .4) 15%, 
		rgba(0, 0, 0, .7) 30%,
		rgba(0, 0, 0, .98) 50%,
		rgba(0, 0, 0, .98) 90%,
		rgba(0, 0, 0, .9) 100%
		),
		url('../img/character/yazawa_triangle_pattern.png');
	background-size: 100%, 20px;
	background-position: top left;
	background-repeat: no-repeat, repeat;
	height: 830px;
	position: relative;
}
.characterLineTop {
	width: 100%;
	position: absolute;
    top: -13px;
	max-height: 35px; 
	display:none;
}
.characterContainer {
    width: 95%;
    margin: 0 auto;
    height: 800px;
    max-width: 900px;
    text-align: left;
    padding: 50px 0;
    position: relative;
}
.characterInfoGroup {
	width: 70%;
	max-width: 550px;
	z-index: 1;
    position: relative;
}
.characterInfoGroup > p {
	text-shadow: 2px 2px 0 #000;
	margin-top: 10px;
}
.name {
	line-height: .75;
	text-shadow: 4px 4px 0 #000;
}
.characterFirstName {
	font-size: 24vw;
}
.characterLastName {
	font-size: 16vw;
	margin-bottom: 10px;
}
.characterButton {
	background-color: #b20a0a;
	border: 1px solid #FFF;
	box-shadow: 4px 4px 0 #FFF;
	display: inline-block;
	cursor: pointer;
}
.characterButton > * {
	display: inline-block;
	padding: 6px;
}
.characterButton > p {
	font-size: 18px;
}
.characterButton > img {
	height: 35px;
	padding: 6px 6px 6px 0;
}
.characterButton .numberText {
	font-size: 15px;
}
.imgGroupCharacter {
	position: relative;
	width: 90%;
    margin: 20px 0;
	max-width: 400px;
	display: inline-block;
}
.characterScreenShotBW {	
	filter: grayscale(1);	
	position: absolute;
	opacity: 1;
	transition: opacity .5s linear;
	z-index: 1;
	width: 100%;
	box-shadow: 4px 4px 0 #FFF;
}
.characterScreenShotBW:hover {
	opacity: 0;
}
.characterScreenShot {
	position: relative;
    width: 100%;
    box-shadow: 4px 4px 0 #FFF;
}
.characterImage {
	position: absolute;
	opacity: 0;
	z-index: 0;
}
.charActive {
	opacity: 1;
}
.ichiban {
	top: 90px;
    right: -58px;
    width: 250px;
}
.adachi {
	top: 90px;
    right: -100px;
    width: 250px;
}
.arakawa {
    top: 110px;
    right: -85px;
    width: 250px;
}
.nanba {
	top: 160px;
    right: 0;
    width: 250px;
    transform: translate(23%);
}
.mukouda {
    top: 90px;
    right: 0;
    width: 150px;
    transform: translate(23%);
}
.charPrev, .charNext {
	width: 30px;
    position: absolute;
    top: 10px;
/*	z-index: 1;*/
}
.charNext {
	right: 0;
}
.charPrev {
	z-index: 1;
}
.makeRelative {
	position: relative;
	overflow: hidden;
	height: 800px;
}
@media screen and (min-width: 500px) {
	.characterFirstName {
		font-size: 125px;
	}
	.characterLastName {
		font-size: 80px;
	}
}
@media screen and (min-width: 640px) {
	#character {
		background-image: linear-gradient(
		135deg, 
		rgba(244, 182, 26, .1) 0, 
		rgba(0, 0, 0, .4) 15%, 
		rgba(0, 0, 0, .7) 30%,
		rgba(0, 0, 0, .98) 50%,
		rgba(0, 0, 0, .98) 90%,
		rgba(0, 0, 0, .9) 100%
		),
		url('../img/character/yazawa_triangle_pattern.png');
		height: 810px;	
	}	
	.characterLineTop {
		display: block;
	}
	.ichiban {
		top: 0;
		right: -30px;
		width: 250px;
	}	
	.adachi {
		top: 0;
		right: -60px;
		width: 250px;
	}
	.arakawa {
		top: 0;
		right: -63px;
		width: 250px;
	}
	.nanba {
		top: 60px;
		width: 300px;
	}	
	.mukouda {
		top: 0;
		width: 155px;
		transform: translate(-15%);
	}
	.charPrev, .charNext {
		bottom: 30px;
	}
	.characterContainer {
		height: 870px;
	}
}
@media screen and (min-width: 900px) {
	#character {
		height: 780px;
	}
	.characterInfoGroup, .characterImage {
		display: inline-block;
		position: relative;
		vertical-align: top;
	}
	.characterInfoGroup {
		left: 40px;
	}
	.ichiban {
		position: absolute;
		top: -100px;
		right: 0;
		width: 300px;
	}
	.adachi {
		position: absolute;
		top: -100px;
		right: 0;
		width: 300px;
	}
	.arakawa {
		position: absolute;
		top: -100px;
		right: 0;
		width: 300px;
	}
	.nanba {
		top: 0;
   		right: 67px;
	}		
	.mukouda {
		top: -60px;
		width: 160px;
		transform: translate(35%);
	}
	.characterContainer {
		margin: 0 auto;
		padding: 50px 0 0;
		height: 790px;
	}
	.charPrev, .charNext {
		bottom: 0;
		height: 50px;
		top: 300px;
	}
	.charPrev {
		left: -10px;
	}
	.charNext {
		right: -10px;
	}
	.siema {
		padding-top: 100px;
    	margin-top: -100px;
	}	
	.makeRelative {
		overflow: initial;
	}
}	
@media screen and (min-width: 1024px) {
	#character {
		background-image: linear-gradient(
		140deg, 
		rgba(244, 182, 26, .1) 0, 
		rgba(0, 0, 0, .4) 15%, 
		rgba(0, 0, 0, .7) 30%,
		rgba(0, 0, 0, .98) 50%,
		rgba(0, 0, 0, .98) 90%,
		rgba(0, 0, 0, .9) 100%
		),
		url('../img/character/yazawa_triangle_pattern.png')
	}
}
/*Purchase*/
#purchase {
	position: relative;
	overflow: hidden;
}
#purchase h4 {
	margin-bottom: 15px;
}
.purchaseLineTop {
	width: 100%;
    position: absolute;
    top: -8px;
    max-height: 35px;
    display: none;
/*    z-index: 1;	*/
}
.purchaseContainer {
	width: 95%;
	margin: 0 auto;
	max-width: 1600px;
	text-align: center;
	padding: 10% 0;
	position: relative;
/*	z-index: 1;*/
}
.purchaseTattoo {
    display: block;
    z-index: -1;
    position: absolute;
    width: 100%;
    top: -6%;
    left: 0;
	opacity: .3;
}
.purchaseTitle {
	width: auto;
	max-width: 100%;
	max-height: 95px;
	display: block;
	margin: 0 auto 50px;
}
#purchase h5 {
	margin-bottom: 10px;
}
.purchaseTextGroup {
	width: 90%;
	vertical-align: top;
	margin: 0 auto;
}
.comboGlam {
	width: 100%;
    margin: 0 auto 25px;
    max-width: 1020px;
}
.selectPlatform, .selectVersion {
	width: 100%;
	max-width: 340px;	
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
}
.selectPlatform h4, .selectVersion h4 {	
	color: white;
    background: #b20a0a;
    box-shadow: 10px 0 0 #b20a0a, -10px 0 0 #b20a0a;
}
.redBack {
	text-shadow: 2px 2px 0 #000;
}
.selectPlatform ul {
	width: 100%;
	max-width: 640px;
	margin: 10px auto 0;
}
.selectPlatform ul li {
    width: 22.25%;
    max-width: 80px;
    margin-right: 1%;
    display: inline-block;
    margin-top: 3%;
}
.selectPlatform ul li:last-child {
    margin-right: 0;
}
.selectPlatform ul li img {
	width: 100%;
	opacity: .65;
	cursor: pointer;
	-webkit-transition: opacity .32s;
	-o-transition: opacity .32s;
	transition: opacity .32s;
	-webkit-transition-timing-function: ease;
	-o-transition-timing-function: ease;
	   transition-timing-function: ease;
}
.selectPlatform ul li img:hover {
	opacity: 1;
}
.selectPlatform {
	margin-bottom: 25px;
}
.versionButton {
	background-color: #000;
    border: 1px solid #FFF;
    box-shadow: 4px 4px 0 #FFF;
    display: inline-block;
    cursor: pointer;
	margin-top: 20px;
	margin-bottom: 10px;	
}
.canHover {
	opacity: .65;	
    -webkit-transition: opacity .32s;
    -o-transition: opacity .32s;
    transition: opacity .32s;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
}
.canHover:hover {
	opacity: 1;
}
.makeOpaque {
	opacity: 0;
	cursor: inherit;
}
.versionButton > p {
    font-size: 18px;
	padding: 2px 30px;
	text-transform: uppercase;
}
.selectVersion .versionButton:first-child {
	margin-right: 25px;
}
#active, .active {
	opacity: 1;
}
.retailLinks {
	width: 100%;
	max-width: 768px; 
	margin: 0 auto;
}
.retailButton {
	display: inline-block;
	padding-bottom: 10px;
}
.retailButton a {
	letter-spacing: 1px;
	margin: 0 10px 15px 0;
	opacity: 1;
	padding: 5px 9px;	
	text-align: center;
	text-transform: uppercase;		
	background-color: #b20a0a;
    border: 1px solid #FFF;
    box-shadow: 4px 4px 0 #FFF;    
    cursor: pointer;
}
.retailLinks aside a div:hover, .retailLinks a div:hover {
	background-image: linear-gradient(to left, #956415, #ecc42e);
    border: 2px solid #956415;
    text-shadow: none;
    box-shadow: inset 0px 0px 8px #ecc42e, inset 0px 0px 11px #FFF, inset 0px 0px 14px #ecc42e;
}
.retailButton div span {
	display: inline-block
}
@media screen and (min-width: 640px) {
	.purchaseTattoo {
		top: -12%;
	}
	.purchaseLineTop {
		display: block;
	}
}
@media screen and (min-width: 768px) {
	.purchaseContainer {
		padding: 5% 0;
	}
	.selectPlatform {
		margin-right: 46px;
	}
	.purchaseTextGroup {		
    	width: 100%;
	}
}
@media screen and (min-width: 1024px) {
	#purchase {
		height: 1200px;
	}
	.purchaseContainer {
		padding: 80px 0;
	}
}
@media screen and (min-width: 1080px) {
	.selectPlatform ul {
		margin: inherit;
	}
}
@media screen and (min-width: 1219px) {
	.purchaseTattoo {
		top: -30%;
	}
}
@media screen and (min-width: 1920px) {
	.purchaseTattoo {
		top: -45%;
	}
}
/*Link Section*/
.linkSmallScreenGroup {
	position: relative;
	max-width: 740px;
    margin: 0 auto;
	display: block;
}
.linkLargeScreenGroup {
	display: none;
}
.linksContainerDigital, .linksContainerRetail {
	width: 100%;
	max-width: 1200px;
	margin: 50px auto 0;
}
.linksContainerRetail {
	display: none;
}
.smallScreenIndividual {
	width: 90%;
	margin: 0 auto;
}
.titleGame {
	width: 100%;
	max-height: 200px;
}
.titleGroup {
	width: 47%;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    max-width: 215px;
    margin-right: 25px;
}
.titleGame h1 {
    position: relative;
    padding: 3px 0;
    color: #FFF;
    background: #000;
    box-shadow: 5px 0 0 #000, -5px 0 0 #000;
    display: inline;
    line-height: 1.65em;	
	font-size: 5.7vw;
}
.gameCoverDigital, .purchaseLinkDigital {
	display: inline-block;
	width: 40%;
	vertical-align: top;
	max-height: 200px;
}
.gameCoverDigital img {
	width: 100%;
    max-width: 127px;	
	margin-bottom: 5px;
}
.gameCoverDigital p {
	color: #000;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1.0;
}
.tableGroup {
	border: 3px solid #c5ae6c;
	width: 100%;
	margin: 20px auto 20px;
}
.row {
	margin: 0;
	text-align: center;
}
.tableGroup .row:not(:last-child) {
	border-bottom: 2px solid #c5ae6c;
}
.row h1 {
	font-size: 16px;
}
.row h2 {
	font-size: 13px;
}
.redBackCell {
    background-color: #b20a0a;
    opacity: .9;
}
.darkBackCell {
	position: relative;
}
.darkBackCell:before {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: #221803;
    opacity: .75;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.lightBackCell {
	position: relative;
}
.lightBackCell:before {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: #4e4122;
    opacity: .75;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.cellLarge {
	width: 85%;
	display: inline-block;
	vertical-align: middle;
	border-right: 2px solid #c5ae6c;
	padding: 11px 5px;
}
.cellSmall {
	width: 13%;
	display: inline-block;
	vertical-align: middle;
}
.checkmark {
	width: 20px;
	padding: 3px;
}
.noCheck {
	opacity: 0;
}
.purchasePrev, .purchaseNext {
	width: 30px;
    position: absolute;
    top: 50%;
/*    z-index: 1;*/
    transform: translate(0, -50%);
}
.purchaseNext {
	right: -20px;
}
.purchasePrev {
	left: -20px;
}

@media screen and (min-width: 500px) {
	.row h1 {
		font-size: 17px;
	}
	.row h2 {
		font-size: 12px;
	}
}
@media screen and (min-width: 640px) {
	.cellLarge, .titleGroup {
		width: 73%;
	}
	.cellSmall, .gameCoverDigital, .purchaseLinkDigital {
		width: 25%;
	}
	.tableGroup, .titleGame {
		max-width: 640px;		
	}
	.titleGroup {
		width: 73%;
		margin-right: 0;
		max-width: initial;		
	}
	.titleGame {
		margin: 0 auto 25px;
	}
	.titleGame h1 {
		font-size: 40px;
	}
}
@media screen and (min-width: 768px) {
	.cellLarge {
		width: 63%;
	}
	.cellSmall, .gameCoverDigital, .purchaseLinkDigital {
		width: 35%;
	}	
	.titleGroup {
		width: 63%;
	}
}
@media screen and (min-width: 1024px) {
	.linkSmallScreenGroup {
		display:none;
	}
	.linkLargeScreenGroup {
		position: relative;
		width: 95%;
		max-width: 1200px;
		margin: 0 auto;
		display: block;
	}
	.largeScreenDigital {
		width: 90%;
		margin: 0 auto;
	}
	.tableGroup, .titleGame {
		max-width: 1200px;
	}
	.cellLarge, .titleGroup {
		width: 32%;
	}
	.cellSmall, .gameCoverDigital, .purchaseLinkDigital {
		width: 22%;
	}
	.cellSmall {
		display: inline-block;
		vertical-align: middle;
		padding: 7.5px;
	}
	.row .cellSmall:not(:last-child) {
		border-right: 2px solid #c5ae6c;
	}
	.redBackCell .cellSmall:not(:last-child) {
		border-right: 2px solid #c5ae6c;
		padding: 19.5px;
	}
}
/*Signup*/
#signup {
/*
	background-image: linear-gradient(
		125deg, 
		rgba(244, 182, 26, .1) 0, 
		rgba(0, 0, 0, .4) 15%, 
		rgba(0, 0, 0, .7) 30%,
		rgba(0, 0, 0, .98) 50%,
		rgba(0, 0, 0, .98) 90%,
		rgba(0, 0, 0, .9) 100%
		),
		url('../img/signup/yazawa_triangle_pattern.png');
	background-size: 100%, 20px;
	background-position: top left;
	background-repeat: no-repeat, repeat;
*/
	overflow: hidden;
	position: relative;
}
.signupLineTop {
	width: 100%;
    position: absolute;
    top: -12px;
    max-height: 35px;
    display: none;
/*    z-index: 1;	*/
}
.signupContainer {
	width: 95%;
	margin: 0 auto;
	max-width: 1600px;
	text-align: center;
	padding: 10% 0;
}
.signupTitle {
	width: auto;
    max-width: 100%;
    max-height: 65px;
    display: block;
    margin: 0 auto 25px;
}
.signupContainer h3 {
	position: relative;
    padding: 5px 0;
    color: white;
    background: #000;
 	box-shadow: 10px 0 0 #000, -10px 0 0 #000;
	display: inline;
	line-height: 2em;
}
.signupTattoo {
    display: block;
    z-index: -1;
    position: absolute;
    width: 100%;
    top: -6%;
    left: 0;
	opacity: .3;
}
@media screen and (min-width: 640px) {
	.signupLineTop {
		display: block;
	}
	.signupTattoo {
		top: -12%;
	}
}
@media screen and (min-width: 768px) {
	.signupContainer {
		padding: 5% 0;
	}
}
@media screen and (min-width: 880px) {
	.signupContainer h3 {
		font-size: 2.5vw;
	}
}
@media screen and (min-width: 1219px) {
	.signupTattoo {
		top: -30%;
	}
}
@media screen and (min-width: 1250px) {
	.signupContainer h3 {
		font-size: 32.25px;
	}
}
@media screen and (min-width: 1920px) {
	.signupTattoo {
		top: -45%;
	}
}
/*footer*/
footer {
	width: 100%;
	background-color: #000;	
	padding: 25px 0;
	color: #fff;
}
footer h2 {
	font-size: 18px;
}
footer h3 {
	font-size: 16px;
}
hr {
	border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}
footer ul {
	text-align: center;
}
footer ul li {
	display: inline-block;
	list-style: none;
	color: #fff;
	margin: 0 1%;
}
.logos {
	width: 95%;
	display: block;
	margin: 0 auto;
	text-align: center;
}
.logos img {
	display: inline-block;
	margin: 15px;
}
.esrb {
	height: 72px;
}
.esrbPriv, .ryuGaGotoku {
	height: 78px;
}
.copy {
	margin: 20px auto 0;
	display: block;
	width: 95%;
	max-width: 900px;
	font-size: 13px;
}
.pslegalLogo {
	height: 17px;
}
.ps4legalLogo {
	height: 12px;
}
.psLogo {
	height: 50px;
}
.steamLogo {
	height: 45px;
}
.xboxLogo {
	height: 34px;
}
.xboxOneLogo {
	height: 35px;
}
.windows10Logo {
	height: 38px;
}
.smartDelivery {
	height: 30px;
}

/*ANIMATION*/
.animated-slow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated-half{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-timing-function:linear}
.animated-quarter{-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-timing-function:linear}
.animated-fast{-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation-timing-function:linear}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
/*_signup is the form itself, the .newsletter class above refers to the section that sits above the actual form*/
#mc_embed_signup {
	background: transparent;
	margin-top: 30px;
}
/*This controls the little mail icon and input for email address, allows them to sit next to eachother and fill the gap caused by inline-block*/
.mc-field-group .fa.fa-envelope, #mc_embed_signup .mc-field-group input {
	display: inline-block;
	margin-right: -5px;
}
/*This controls the mail icon*/
.mc-field-group .fa.fa-envelope {
    font-size: 25px;
    padding: 15px;
    background-color: #b20a0a;
    width: 55px;
    height: 55px;
	position: relative;
}
.mailWhite {
	width: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*This controls the input field where you type in the email address*/
#mc_embed_signup .mc-field-group input {
    background: #FFF;
    height: 55px;
    width: 80%;
    max-width: 425px;
    vertical-align: top;
    font-size: 20px;
    border: none;
    border-radius: initial;
    font-weight: 500;
    font-family: "mr-eaves-modern", serif;
    text-transform: uppercase;
    padding-left: 10px;
}
/*This controls the label elements, this is the area that has the check boxes and small text about what they are checking for. The class .privacyNewsletter refers to the span around privacy policy text which gets linked to the privacy policy*/
#mc_embed_signup .mc-field-group label, .privacyNewsletter {
    display: block!important;
    margin-bottom: 3px;
    font-size: 15px;
	text-align: left;
	color: #000;
}
/*style the privacy Policy text*/
a.privacyNewsletter {
	color: #000!important;
	display: inline!important;
	font-weight: 500;
	text-decoration: underline;
}
/*controls the sign button. In this case I have the hover state being the same. */
#mc_embed_signup .button, #mc_embed_signup .button:hover {
	background-color: #b20a0a!important;
    border-radius: initial;
    margin: 10px auto 0;
    height: auto;
    padding: 12px 24px;
    color: #FFF;
    font-size: 5vw;
    font-weight: 500;
    font-family: "mr-eaves-modern", serif;
    text-transform: uppercase;
    box-shadow: 5px 5px 0 rgba(255,255,255,.8);
	border: 1px solid #fff;
}
#mc_embed_signup .button:disabled {
	opacity: .7
}
#mc_embed_signup .clear {
    clear: both;
    text-align: center;
}
/*Controls the error message that comes up if you don't fill in the email address after clicking into it.*/
#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
    margin: 4px 0 1em 0;
    padding: 5px 10px;
    background-color: transparent;
	color: #ecce33;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1.85px;
	font-family: "mr-eaves-modern", serif;
}
#mc_embed_signup input.mce_inline_error {
    border: none!important;
	padding-left: 10px;
}
/*Controls the positioning and width of the email address input box and the text next to the checkboxes*/
#mc_embed_signup .mc-field-group.input-group ul li {
    width: 75%;
    margin-left: 17%;
	margin-top: 15px;
	padding-bottom: 15px;
	position: relative;
}
/* removes the base check box */
.myCheckbox input {
	display:none!important;
}
.checkboxContainer {
	max-width: 700px;
	margin: 0 auto;
}
/* This is for the custom checkbox itself. */
.myCheckbox span {	
    background-color: #FFF;
    display: inline-block;
    font-size: 25px;
    height: 30px;
    width: 30px;
    padding: 0;
    float: left;
    vertical-align: middle;
    position: relative;
    top: -4px;
    margin: 4px 13px 0 -45px;
    cursor: pointer;
    z-index: 1;
}
.whiteBehind {
    background-color: #FFF;
    height: 30px;
    width: 30px;
    position: absolute;
    top: 1px;
    left: -44px;
    z-index: 0;
}
/* This is the check mark within the custom checkbox */
.myCheckbox input:checked + span {		
	left: 10.75px;
    top: 0;
    width: 10px;
    height: 19px;
    border: solid #b20a0a;
    border-width: 0 4px 4px 0;
    transform: rotate(45deg);	
}
/* This is the box around the checkmark when checked. The original empty checkbox gets replaced by just the checkmark so we need to add this in to make
the box still exists. This is why it is a pseudo class */
.myCheckbox input:checked + span:before {	
    content: "";
    position: absolute;
    z-index: -1;
    width: 30px;
    height: 30px;
    top: -4px;
    left: -9px;
    transform: rotate(-45deg);
}
/*controls the success message */
#mc_embed_signup div.response {
    margin: 0 auto;
    padding: 1em 0 .5em 0;
    top: -1.5em;
    z-index: 1;
    width: 95%;
    font-size: 15px;
    color: #ecce33!important;
	letter-spacing: 1.85px;
	text-transform: uppercase;
	font-weight: 500;
	font-family: "mr-eaves-modern", serif;
	display:none!important;
}
.responseText {
	margin: 0 auto;
    padding: 1em 0 .5em 0;
    top: -1.5em;
    z-index: 1;
    width: 95%;
    font-size: 15px;
    color: #ecce33!important;
	letter-spacing: 1.85px;
	text-transform: uppercase;
	font-weight: 500;
	font-family: "mr-eaves-modern", serif;
}
.responseText ~ .responseText, #language {
	display: none;
}
/*controls the success message (specifically the color) */
@media screen and (min-width: 400px) {
/*	controls where the checkbox/small text sits */
	#mc_embed_signup .mc-field-group.input-group ul li {
		margin-left: 14%;
	}
/*	controls width of both the email input box and the text next to checkbox*/
	#mc_embed_signup .mc-field-group input, #mc_embed_signup .mc-field-group.input-group ul li {
		width: 85%;
	}
}
@media screen and (min-width: 500px) {
	/*	controls where the checkbox/small text sits */
	#mc_embed_signup .mc-field-group.input-group ul li {
		margin-left: 11%;
	}
	/*	controls width of both the email input box and the text next to checkbox*/
	#mc_embed_signup .mc-field-group input, #mc_embed_signup .mc-field-group.input-group ul li {
		width: 87%;
	}
}
@media screen and (min-width: 640px) {	
	#mc_embed_signup .button, #mc_embed_signup .button:hover {
		font-size: 3vw;
	}
}
@media screen and (min-width: 1024px) {
	#mc_embed_signup .button, #mc_embed_signup .button:hover {
		font-size: 26.25px
	}
}
/* Newsletter section end */
/*THEME SONG*/
#themeSong {
	background-image: linear-gradient(
	125deg, 
	rgba(244, 182, 26, .1) 0, 
	rgba(0, 0, 0, .4) 15%, 
	rgba(0, 0, 0, .7) 30%,
	rgba(0, 0, 0, .98) 50%,
	rgba(0, 0, 0, .98) 90%,
	rgba(0, 0, 0, .9) 100%
	),
	url('../img/signup/yazawa_triangle_pattern.png');
	background-size: 100%, 20px;
	background-position: top left;
	background-repeat: no-repeat, repeat;
	position: relative;
}
.themeContainer {
	width: 95%;
	margin: 0 auto;
	max-width: 1600px;
	text-align: center;
	padding: 10% 0;
}
.themeTextGroup {
	display: inline-block;
	vertical-align: middle;
	margin: 0 20px;
}
.themeTextGroup p {
	position: relative;
    padding: 5px 0;
    color: white;
    background: #000;
    box-shadow: 10px 0 0 #000, -10px 0 0 #000;
    display: inline;
    line-height: 2em;
}
.themeImg {
	display: inline-block;
	margin: 20px 0;
	max-width: 500px;
	width: 95%;
	vertical-align: middle;
}
@media screen and (min-width: 640px) {
	#themeSong {
		background-image: linear-gradient(
		135deg, 
		rgba(244, 182, 26, .1) 0, 
		rgba(0, 0, 0, .4) 15%, 
		rgba(0, 0, 0, .7) 30%,
		rgba(0, 0, 0, .98) 50%,
		rgba(0, 0, 0, .98) 90%,
		rgba(0, 0, 0, .9) 100%
		),
		url('../img/signup/yazawa_triangle_pattern.png')
	}
}	
@media screen and (min-width: 768px) {	
	.themeImg {
		width: 60%;
	}
	.themeContainer {
		padding: 5% 0;
	}
}
@media screen and (min-width: 1024px) {
	#themeSong {
		background-image: linear-gradient(
		140deg, 
		rgba(244, 182, 26, .1) 0, 
		rgba(0, 0, 0, .4) 15%, 
		rgba(0, 0, 0, .7) 30%,
		rgba(0, 0, 0, .98) 50%,
		rgba(0, 0, 0, .98) 90%,
		rgba(0, 0, 0, .9) 100%
		),
		url('../img/signup/yazawa_triangle_pattern.png')
	}
	.themeTextGroup {
		margin: 0 40px;
	}
}