@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}
a {outline: none;text-decoration: 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: acumin-pro-condensed, sans-serif; font-weight: 400;font-size:13px;line-height:1.5;background-color: #000;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;
	width: 95%;
/*	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 {
	cursor:pointer;
	opacity:.8;
}
h5 {
	font-size: 16px;
}
h4 {
	font-family: acumin-pro, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
}
h3 {
	font-size: 20px;
	line-height: 1.25;
	text-transform: uppercase;
}
h2 {
	font-family: garamond-premier-pro, sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: 8vw;
	letter-spacing: 1.85px;
	line-height: 1;
	margin-bottom: 10px;
	position: relative;
	text-shadow: -2px 2px rgba(0,0,0,.65);
	text-transform: uppercase;
	z-index: 1;
}
h1 {
	line-height: 1.4;
	font-family: garamond-premier-pro, sans-serif;
	font-size: 6vw;
	font-weight: 400;
	letter-spacing: 1.85px;
	text-transform: uppercase;
	text-shadow: -11px 7px rgba(0,0,0,.55);
}
p {
	font-size: 14px;
}
.font-bold {
	font-weight: 700;
}
.font-black {
	font-weight: 800;
}
.italic {
	font-style: italic;
}
@media screen and (min-width: 640px) {
	body {
		font-size: 16px;
	}
	h3 {
		font-size: 24px;
	}
	h2 {
		font-size: 60px;
	}
	h1 {
		font-size: 40px;
	}
	p {
		font-size: 16px;
	}
}
@media screen and (min-width: 1400px) {
	h3 {
		font-size: 26px;
	}
	h2 {
		font-size: 80px;
	}
	h1 {
		font-size: 80px;
		text-transform: uppercase
	}
	p {
		font-size: 18px;
	}
}
.gold{background: rgb(201,154,22);background: linear-gradient(45deg, rgba(201,154,22,1) 0%, rgba(154,106,4,1) 13%, rgba(230,189,83,1) 20%, rgba(237,195,93,1) 30%, rgba(252,227,124,1) 40%, rgba(255,255,198,1) 50%, rgba(252,227,124,1) 70%, rgba(237,195,93,1) 75%, rgba(230,189,83,1) 80%, rgba(154,106,4,1) 90%, rgba(201,154,22,1) 100%);}
.silver{background: rgb(231,234,237);background: linear-gradient(45deg, rgba(231,234,237,1) 0%, rgba(174,179,188,1) 30%, rgba(194,198,209,1) 40%, rgba(253,255,254,1) 61%, rgba(162,169,178,1) 70%, rgba(158,165,175,1) 80%, rgba(84,91,107,1) 90%, rgba(204,208,217,1) 100%);}
.bronze{background: rgb(217,152,124);background: linear-gradient(45deg, rgba(217,152,124,1) 0%, rgba(238,173,143,1) 20%, rgba(255,229,193,1) 30%, rgba(255,229,193,1) 50%, rgba(255,229,193,1) 70%, rgba(239,174,133,1) 85%, rgba(159,75,54,1) 100%);}

.bronze2{background: rgb(217,152,124);background: linear-gradient(125deg, rgba(217,152,124,1) 0%, rgba(238,173,143,1) 20%, rgba(255,229,193,1) 30%, rgba(255,229,193,1) 50%, rgba(255,229,193,1) 70%, rgba(239,174,133,1) 85%, rgba(159,75,54,1) 100%);}
/*Nav*/
.navArea {
	position: relative;
	transition: top 0.3s;
}
.navContainer {
	margin: 0 auto;
	max-width: 1024px;
	position: relative;
}
nav {
	width: 100%;
}
button.hamburger {
	border: none;
	display: block;
	position: absolute;
	top: 8px;
	z-index: 30;}
nav {
	background-color: #000;
	background-size: auto 75px; 
    font-size: 0;
    height: 60px;
    list-style: none;    
	position: absolute;
	width: 100%;
	z-index: 1;
}
.navBtn h5 {
	text-shadow: 0 0 5px #000;
}
.logo {
	display: none;
	height: 35px;
	margin: 3px 0 0 10px;
}
.hamMenuTitle {
	color: #FFF;	
	display: block;
	font-size: 26px;
	font-style: italic;
	position: absolute;
	right: 65px;
	text-transform: uppercase;
	top: 50%;
	transform: translate(0, -50%);	
	z-index: 20;	
}
/*See app.js for transitions and changes to hamUL in the navigation portion of the file*/
.hamUL {    
    background-color: rgba(23,26,24,.85);
	display: none;
	height: 100vh!important;
	position: absolute;
	text-align: center;
	transition: transform .3s ease;
    width: 100%;
	z-index: 10;
}
.hamUL .container {    
    color: #FFF;
	margin: 60px auto 25px;
    position: relative;
	width: 100%;
}
.hamUL li {
	background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .75);
	display: block;
	text-align: center;
    text-transform: uppercase;
}
.hamUL li a {
    outline: none;
    text-decoration: none;
}
.hamUL li a h5 {
    padding: 2%;
}
.noFlag {
	display: none!important;
}
.purchaseNavBtn {
    background-color: #ffcd0d;
	border: 2px solid #000;
	color: #000;
	cursor: pointer;
    display: inline-block;
	margin: 0 2.5px;
	padding: 4px 10px;	
	text-transform: uppercase;
	white-space: nowrap;
}
.navSm {
	display: inline-block;
}
.navLg {
	position: absolute;
    right: 7px;
    top: 15px;
}
/*combined with app.js this allows you to create sticky nav*/
.navStick{
	background-color: rgb(0, 0, 0);
	height: 60px;
  	position: fixed;
	top: -80px;	
    width: 100%;
    z-index: 2;
}
@media screen and (min-width: 400px) {
	.purchaseNavBtn {
		padding: 4px 15px;	
	}
}
@media screen and (min-width: 810px) {
	.purchaseNavBtn {
		padding: 4px 30px;	
	}
}
@media screen and (min-width: 1000px) {
	button.hamburger, .hamMenuTitle, .ps4MenuLogo, .hamUL > a .social_icon, .navSm {
		display: none;
	}
/*
	.navContainer {
		margin: 10px auto;
	}
*/
	.logo {
		display: inline-block;
	}
	.hamUL {
		background-color: transparent;		
		display: inline-block!important;
		height: 60px!important;	
		position: initial;	
		text-align: inherit;
		vertical-align: middle;
		width: 500px;	
		z-index: 10;
	}
	.hamUL .container {
		margin: 0 auto;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);		
		vertical-align: middle;
		width: 500px;
	}
	.hamUL li {
		border-bottom: none;
		display: inline-block;
		margin-right: 25px;
		max-width: 120px;
		padding: 1%;
		width: 25%;		
	}
}
/*END NAV*/
/*Flags*/
.noFlag {display:none;}
#selected-country{margin-bottom:15px;cursor:pointer}
#country-navigation-wrapper{width:50px;position:absolute;top:15px;right:5px;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;}
.efigs img, .currentFlag {border-radius: 50%;width: 35px;}

/*Loader*/
.loader{display:flex;position:fixed;width:100vw;height:100vh;background:#000;align-items:center;justify-content:center;z-index:99999}
.loader div{text-align:center}
.loader p{display:inline-block;text-transform:uppercase;text-align:center;font-size:4em;font-family:garamond-premier-pro,serif;font-weight:600;transform:scale(.5);color:#121212;-webkit-text-stroke:2px gray;width:1em}
.loader p:nth-child(1){animation:textGlow 1s linear;animation-iteration-count:infinite}
.loader p:nth-child(2){animation:textGlow 1s linear;animation-delay:.125s;animation-iteration-count:infinite}
.loader p:nth-child(3){animation:textGlow 1s linear;animation-delay:.25s;animation-iteration-count:infinite}
.loader p:nth-child(4){animation:textGlow 1s linear;animation-delay:.375s;animation-iteration-count:infinite}
.loader p:nth-child(5){animation:textGlow 1s linear;animation-delay:.5s;animation-iteration-count:infinite}
.loader p:nth-child(6){animation:textGlow 1s linear;animation-delay:.675s;animation-iteration-count:infinite}
.loader p:nth-child(7){animation:textGlow 1s linear;animation-delay:.75s;animation-iteration-count:infinite}

@keyframes textGlow {
	0%{transform:scale(.5);color:#121212;-webkit-text-stroke:2px gray}
	20%{transform:scale(1);color:#ffc0cb;-webkit-text-stroke:3px #ffffff;filter:drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 3px #ffffff)drop-shadow(0 0 5px #ffffff)}
	50%{transform:scale(.5);color:#121212;-webkit-text-stroke:2px gray}
}
/*Hero*/
#hero {
	position: relative;
}
.heroImg {
	height: 100%;
	left: 0;
	-o-object-fit: cover;
	object-fit: cover;
    position: absolute;
    top: 0;
	width: 100%;
    z-index: -1;
}
.esrbContainer {
    bottom: 10px;
	height: 65px;
	left: 10px;
	margin: 0 auto;
    position: absolute;
}
.esrbHero {
	height: 100%;
}
#hero:before {
    background-image: url(../img/hero/overlay.png);
    background-repeat: repeat;
    content: '';
    height: 100%;
    position: absolute;
    width: 100%;
}
.heroVideo {
/*
	height: 100%;
	left: 0;
	 -o-object-fit: cover;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
*/
	height: 150%;
	 -o-object-fit: cover;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}
.heroGroup {
	left: 50%;
	padding: 100px 0;
	position: relative;
	text-align: center;
	transform: translate(-50%, 0);
	width: 95%;
	max-width: 900px;
}
.heroGroup img {
	width: 100%;
	margin: 60px auto 250px;
}
.heroGroup h4 {
	margin: 8px auto;
	text-shadow: 0 0 10px #000;
	text-transform: uppercase;
	font-size: 3em;
}
.heroBtn, .heroBtnOutline {
    background-color: #ffcd0d;
	border: 2px solid #000;
	color: #000;
	cursor: pointer;
    display: inline-block;
	margin: 5px;
	padding: 4px 30px;
	text-transform: uppercase;
	white-space: nowrap;
	width: 250px;
}
.heroBtnOutline  {
	background-color: transparent;	
	color: #FFF;	
	text-shadow: 0 0 5px #000;
}
@media screen and (min-width: 450px) {
	.hideBreak {
		display: none;
	}
}
@media screen and (min-width: 540px) {
	.esrbContainer {
		height: 72px;
		left: auto;
		right: 10px
	}
}
@media screen and (min-width: 1400px) {
	.heroGroup h4 {
		font-size: 48px;
	}
}
/*media*/
#media {
	position: relative;
}
.media {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
.no-webp .media,
.no-js .media {
  background-image: url("../img/media/media_bg.png");
}

.webp .media {
  background-image: url("../img/media/media_bg.webp");
}

.mediaGroup {
	padding: 50px 0;
	text-align: center;
}
.mediaHeader {
    display: block;
    margin: 0 auto;
    max-width: 350px;
    width: 80%;
}
.mediaMainText {
	display: block;
	font-size: 22px;
	margin: 0 auto 25px;
	text-align: center;
	text-transform: uppercase;
}
.trailerContainer {
    margin: 0 auto;
    max-width: 1200px;
	position: relative;
    text-align: center;
}
.trailerNext, .trailerPrev {
	cursor: pointer;
    position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	width: 30px;
}

.playTrailer {
	border: 3px solid #FFF;
	box-shadow: 4px 4px #000;
    max-width: 600px;
	width: 100%;
}
.trailerNext {
	right: 0;
}
.trailerPrev {
	left: 0;
	z-index: 1;
}
.mediaImg {
	width: 100%;
}
.carouselVideo {
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
}
.trailerCarousel {
	position: relative;
    width: 83%;
    margin: 0 auto;
}
.playButton {
	left: 50%;
	opacity: .75;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
}
.esrbTrailer {
    height: 72px;
    position: absolute;
    bottom: 15px;
    right: 15px;
}
@media screen and (min-width: 640px) {
	.mediaGroup {
		padding: 75px 0;
	}
	.trailerCarousel {
		width: 95%;
	}
	.trailerNext {
		right: -15px;
	}
	.trailerPrev {
		left: -15px;
	}
}
@media screen and (min-width: 1024px) {
	.trailerNext {
		right: -23px;
	}
	.trailerPrev {
		left: -23px;
	}
}
/*features*/
#features {
	position: relative;
}
.features, .kaito {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
.no-webp .features,
.no-js .features {
  background-image: url("../img/features/features_bg.jpg");
}
.webp .features {
  background-image: url("../img/features/features_bg.webp");
}
.no-webp .kaito,
.no-js .kaito {
  background-image: url("../img/features/kaito_bg.jpg");
}

.webp .kaito {
  background-image: url("../img/features/kaito_bg.webp");
}
.featuresGroup {
	padding: 60px 0;
	text-align: left;
}
.mainFeaturesGroup {
	max-width: 1200px;
    margin: 0 auto;
}
.mainFeaturesGroup img {
	border: 3px solid #FFF;
    box-shadow: 4px 4px #000;
	margin: 15px auto;
	vertical-align: top;
	width: 100%;
}
.mainFeaturesText {
	display: inline-block;
	vertical-align: top;
}
.showSmallFeature {
	display: block
}
.showLargeFeature {
	display: none;
}
.smallFeatureGroup {
	display: inline-block;
	height: 410px;
	position: relative;
	max-width: 400px;
	text-align: left;
	width: 300px;
}
.smallFeatureGroup div {
	margin: 0 auto;
    padding: 10px 0;
    width: 90%;
}
.smallFeatureGroup img {
    border: 3px solid #FFF;
	bottom: 20px;
    box-shadow: 4px 4px #000;
	left: 5%;
	position: absolute;
    width: 90%;
}
.smallFeaturesContainer {
    margin: 50px auto 0;
    max-width: 750px;
	position: relative;
	text-align: center;
}
.featuresNext, .featuresPrev {
	display: block;
    position: absolute;
	bottom: -55px;
	width: 30px;
}
.featuresNext {
	right: 0;
}
.featuresPrev {
	left: 0;
	z-index: 1;
}
@media screen and (min-width: 400px) {
	.featuresNext, .featuresPrev {
		top: 50%;
		transform: translate(0, -50%);
	}
}
@media screen and (min-width: 640px) {
/*
	.featuresNext, .featuresPrev {
		bottom: -55px;
		top: inherit;
		transform: translate(0, 0);
	}
*/
	.smallFeatureGroup {
		height: 480px;
		width: 350px;
	}
}
@media screen and (min-width: 700px) {
	.featuresNext, .featuresPrev {
		top: 50%;
		transform: translate(0, -50%);
	}
}
@media screen and (min-width: 768px) {
	.featuresNext {
		right: -15px;
	}
	.featuresPrev {
		left: -15px
	}
}
@media screen and (min-width: 800px) {
	.featuresNext {
		right: -25px;
	}
	.featuresPrev {
		left: -25px
	}
}
@media screen and (min-width: 900px) {
	.showLargeFeature {
		display: inline-block;
	}
	.showSmallFeature {
		display: none;
	}
	.mainFeaturesGroup img {
		margin: 0 auto;
		width: 60%;
	}
	.mainFeaturesText {
		margin-right: 3%;
		width: 35%;
	}
}
@media screen and (min-width: 1200px) {
/*
	.smallFeatureGroup {
		height: 450px;
		width: 340px;
	}
*/
	.smallFeaturesContainer {
		max-width: 1400px;
	}
/*	NOTE THIS NEEDS TO BE REMOVED IF MORE THAN THREE FEATURES UNDER MAIN FEATURE*/
	.featuresNext, .featuresPrev {
		display: none;
	}
}
@media screen and (min-width: 1400px) {
	.smallFeatureGroup {
		height: 540px;
		width: 400px;
	}
}
/*School Stories*/
#schoolStories {
	position: relative;
}
.schoolStories {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
.no-webp .schoolStories,
.no-js .schoolStories {
  background-image: url("../img/schoolstories/schoolstories_bg.jpg");
}

.webp .schoolStories {
  background-image: url("../img/schoolstories/schoolstories_bg.webp");
}
	
.schoolStoriesGroup {
	padding: 60px 0;
	text-align: left;
}
.mainSchoolStoriesGroup {
	max-width: 1200px;
    margin: 0 auto;
	text-align: center;
}
.mainSchoolStoriesGroup h2, .mainSchoolStoriesGroup p, .mainSchoolStoriesGroup h3 {
	text-align: left;
}
.schoolStoriesActivity {
	width: 100%;
	border-bottom: 1px solid white;
	margin-top: 15px;
	padding-bottom: 15px;
	text-align: left;
}
.schoolStoriesActivity:last-child  {
	border-bottom: none;
}
.schoolStoriesActivity img {
	width: 100%;
    max-width: 400px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    position: relative;
    left: 50%;
    transform: translate(-50%);
}
.activityText {
	display: inline-block;
	margin-top: 10px;
	vertical-align: middle;
}
.smallScreenActivities {
	display: block;
}
.largeScreenActivities {
	display: none;
}
@media screen and (min-width: 768px) {
	.activityText {
		margin-top: 0;
		width: 50%;
	}
	.schoolStoriesActivity img {
		width: 30%;
		margin-right: 25px;
		left: 0;
		transform: translate(0);
	}
	.smallScreenActivities {
		display: none;
	}
	.largeScreenActivities {
		display: block;
	}
	.schoolStoriesActivity {
		text-align: center;
	}
	.largeScreenActivities .activityText {
		margin-right: 25px;
	}
}
/*Combat*/
#combat {
	position: relative;
}
.combat {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
.no-webp .combat,
.no-js .combat {
  background-image: url("../img/combat/combat_bg.png");
}

.webp .combat {
  background-image: url("../img/combat/combat_bg.webp");
}
.combatGroup {
	padding: 60px 0;
	text-align: left;
}
.mainCombatGroup {
	max-width: 1200px;
    margin: 0 auto;
	text-align: center;
}
.mainCombatGroup h2, .mainCombatGroup p, .mainCombatGroup h3 {
	text-align: left;
}
.smallCombatGroup {
    width: 100%;
    max-width: 400px;
    height: 350px;
    border: 1px solid white;
    padding: 10px;
    display: inline-block;
    margin: 25px auto 0;
    vertical-align: top;
}
.smallCombatGroup:last-child {
	margin-right: 0;
}
.smallCombatGroup img {
	width: 100%;
	margin-bottom: 15px;
}
@media screen and (min-width: 400px) {
	.smallCombatGroup {
		height: 375px;
	}
}
@media screen and (min-width: 640px) {
	.smallCombatGroup {
		height: 400px;
	}
}
@media screen and (min-width: 867px) {
	.smallCombatGroup {
		margin: 25px 10px 0 0;
	}
}
@media screen and (min-width: 1080px) {
	.smallCombatGroup {
		width: 32.5%;
	}
}
@media screen and (min-width: 1400px) {
	.smallCombatGroup {		
		height: 430px;
	}
}
/*Investigation*/
#investigation {
	position: relative;
}
.investigation {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
.no-webp .investigation,
.no-js .investigation {
  background-image: url("../img/investigation/investigation_bg.jpg");
}

.webp .investigation {
  background-image: url("../img/investigation/investigation_bg.webp");
}
.investigationGroup {
	padding: 60px 0;
	text-align: left;
}
.mainInvestigationGroup {
	max-width: 1200px;
    margin: 0 auto;
	text-align: center;
}
.mainInvestigationGroup h2, .mainInvestigationGroup p, .mainInvestigationGroup h3 {
	text-align: left;
}
.investigationSmallScreen {
	display: block;
}
.investigationLargeScreen {
	display: none;
}
.investigationSmallScreen, 
.investigationLargeScreen {
	max-width: 590px;
	margin: 0 auto;
}
.actionsTextGroup {
	margin: 15px auto;
}
.investigationImg {
	width: 47%;
    max-width: 290px;
    margin: 10px 10px 0 0;
}
.investigationSmallScreen .checkAgeGate:nth-child(even) .investigationImg, 
.investigationLargeScreen .checkAgeGate:nth-child(even) .investigationImg, 
.colLeft .checkAgeGate:nth-child(even) .investigationImg {
	margin-right: 0;
}
@media screen and (min-width: 768px) {
	.investigationSmallScreen {
		display: none;
	}
	.investigationLargeScreen {
		display: block;
	}
	.colLeft, .colRight {
		display: inline-block;
		width: 49%;
		vertical-align: middle;
	}
}
@media screen and (min-width: 1024px) {
	.actionsTextGroup p {
		line-height: 1.75;
	}
}
@media screen and (min-width: 1400px) {
}

/*Playspot*/
#playspot {
	position: relative;
}
.playspot {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
.no-webp .playspot,
.no-js .playspot {
  background-image: url("../img/playspots/playspot_bg.png");
}

.webp .playspot {
  background-image: url("../img/playspots/playspot_bg.webp");
}
.playspotGroup {
	padding: 60px 0;
	text-align: left;
}
.mainPlayspotGroup {
	max-width: 1200px;
    margin: 0 auto;
	text-align: center;
}
.mainPlayspotGroup h2, .mainPlayspotGroup p, .mainPlayspotGroup h3 {
	text-align: left;
}
.smallPlayspotGroup {
    width: 100%;
    max-width: 400px;
    height: 350px;
    border: 1px solid white;
    padding: 10px;
    display: inline-block;
    margin: 25px auto 0;
    vertical-align: top;
}
.removeMarginRight {
	margin-right: 0!important;
}
.smallPlayspotGroup img {
	width: 100%;
	margin-bottom: 15px;
}
.playspotImg {
    width: 47%;
    max-width: 290px;
    margin: 10px 10px 0 0;
}
.playspotOther {
	margin: 25px auto;
}
.mainPlayspotGroup .checkAgeGate:nth-child(odd) .playspotImg {
	margin-right: 0;
}
@media screen and (min-width: 400px) {
	.smallPlayspotGroup {
		height: 375px;
	}
}
@media screen and (min-width: 640px) {
	.smallPlayspotGroup {
		height: 400px;
	}
}
@media screen and (min-width: 867px) {
	.smallPlayspotGroup {
		margin: 25px 10px 0 0;
	}
	.playspotImg {
		width: 23.75%;
	}
	.mainPlayspotGroup .checkAgeGate:nth-child(odd) .playspotImg {
		margin-right: 10px;
	}
	.mainPlayspotGroup .checkAgeGate:last-child .playspotImg {
		margin-right: inherit;
	}
}
@media screen and (min-width: 1080px) {
	.smallPlayspotGroup {
		width: 32.5%;
	}
	.playspotImg {
		width: 24%;
	}
}
@media screen and (min-width: 1400px) {
	.smallPlayspotGroup {		
		height: 430px;
	}
}
/*characters*/
#characters {
	position: relative;
	overflow: visible;
    z-index: 1;
}
.characters {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
.no-webp .characters,
.no-js .characters {
  background-image: url("../img/characters/characters_bg.jpg");
}

.webp .characters {
  background-image: url("../img/characters/characters_bg.webp");
}
	
.charactersGroup {
	padding: 60px 0;
	text-align: center;
	max-width: 1200px;
}
.mainCharactersGroup {
	display: inline-block;
	max-width: 600px;
    margin: 0 auto;
	text-align: center;
	vertical-align: top;
	z-index: 2;
    position: relative;
}
.characterSelector, .characterText {
	margin: 15px auto 0;
/*	max-width: 500px;*/
    width: 100%;	
}
.characterText {
	margin: 20px auto;
	text-align: left;
	z-index: 2;
    position: relative;
	text-shadow: 1px 1px 5px #000, 1px 1px 10px #000;
}
.characterText h5 {
	font-size: 12px;
}
.characterSelector li {
	display: inline-block;
    margin: 0 10px 10px 0;
    width: 16%;
}
.characterSelector li img {
	width: 100%;
}
.characterSelector li:hover {
	box-shadow: -5px -5px 0 #000;
	cursor: pointer;
}
.characterActive {
	box-shadow: -5px -5px 0 #000;
}
.characterImageGroup {
	display: none;
    margin: 30px auto 0;
/*    position: relative;*/
	vertical-align: top;
    width: 100%;
}
.characterImageGroup img {
	height: 800px;
	display: block;
}
.characterImageGroup img:first-child {
	position: absolute;	
}
.characterContainer {
    margin: 20px auto 0;
    max-width: 430px;
	position: relative;
    text-align: center;
}
.characterCarousel {
	position: relative;
    width: 83%;
    margin: 0 auto;
}
.characterNext, .characterPrev {
	cursor: pointer;
    position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	width: 30px;
}
.characterNext {
	right: 0;
}
.characterPrev {
	left: 0;
	z-index: 1;
}
.carouselImg {
	border: 3px solid #FFF;
	box-shadow: 4px 4px #000;
    max-width: 600px;
	width: 100%;
}
.quote {
	display: none;
	font-style: italic;
	position: absolute;
	top: 55%;
	right: 15%;
	width: 200px;
	text-shadow: 1px 1px 5px #000, 1px 1px 10px #000, 1px 1px 15px #000;
}
#showYagami {
	display: none;
	position: absolute;
	bottom: 5%;
	right: 0;
	width: 100%;
	height: auto;
}
#hideYagami {
	display: block;
}
@media screen and (min-width: 640px) {
	.characterImageGroup {
		display: inline-block;
		width: 25%;
		margin: 0 auto;
	}
	.characterImageGroup img {
/*		height: 600px;*/
	}
	.characterText {
		margin: 20px auto;
		width: 71%;
    	display: inline-block;
	}
	.characterText h5 {
		font-size: 14px;
	}
	.characterSelector li {
		width: 17%;
	}
	.characterImageGroup img:first-child {
/*		left: -80%;*/
		right: -160px;
		bottom: 0;
	}
	.charactersGroup {
		text-align: left;
	}
	.mainCharactersGroup {
		text-align: left;
	}
}
@media screen and (min-width: 768px) {
	.characterText {
		max-width: 510px;
	}
	.characterImageGroup {
		width: 29%;
	}
	.characterImageGroup img:first-child {
/*
		left: auto;
		right: 0;		
*/
	}
}
@media screen and (min-width: 901px) {
	.characterImageGroup {
		width: 39%;
	}
	.quote  {
		display: block;
	}
	.characterImageGroup img:first-child {
/*		right: -15%;*/
		right: -90px;
	}
}
@media screen and (min-width: 1024px) {
	.characterImageGroup img:first-child {
		right: -50px;
	}
}
@media screen and (min-width: 1200px) {
	.characterText {
		max-width: 675px;
	}
}
/*purchase*/
#purchase {
	position: relative;
}
.soldOut::before {
    color: red;
    content: 'sold out';
    position: absolute;
    left: 50%;
    font-size: 35px;
    top: 50%;
    transform: translate(-50%, -50%);
}
.purchase {
	background-image: url("../img/purchase/purchase_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
/*	height: 935px;*/
    overflow: hidden;
}
.no-webp .purchase,
.no-js .purchase {
  background-image: url("../img/purchase/purchase_bg.jpg");
}

.webp .purchase {
  background-image: url("../img/purchase/purchase_bg.webp");
}
.purchaseGroup {
	max-width: 1600px;
	padding: 60px 2%;
	text-align: left;
    width: 100%;
}
.showEU {
	text-align: center;
    position: relative;
    top: 100px;
}
.purchaseButtonsGroup, .versionButtonsGroupSmall {
	width: 100%;
}
.versionButtonsGroupSmall {
	display: block;
}
.versionButtonsGroupLarge {
	display: none;
}
.purchase h2 {
	color: #000;
	font-size: 10vw;
	position: relative;
	text-align: left;
}
.purchase .purchaseTitle {
	color: #FFF;
    font-style: normal;
    text-align: left;
    top: 0;
}
.preorderDateText {
	font-size: 18px;
	position: relative;
	left: 32%;
	top: 32px;
}
.preorderBreak {
	display: block;
}
.consoleButtonsContainer, .editionsButtonsContainer, .versionButtonsContainer {
	width: 100%;
}
.consoleButton, .editionButton, .versionButton {
    background-color: #000;
    border: 2px solid #ffcd0d;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    margin: 5px 10px 5px 0;
    max-width: 190px;
    padding: 8px;
    width: 46%;
    text-align: center;
	vertical-align: top;
}
.consoleButton:hover, .editionButton:hover, .versionButton:hover {
	background: #ffcd0d;
	border: none;
	color: #000;
	padding: 10px 8px;
}
.consoleActive, .editionActive, .versionActive {
	background: #ffcd0d;
	color: #000;
}
.versionActive {
	border: none;
	color: #000;
	padding: 10px 8px;
}
.retailGroup {
	margin-top: 30px;
}
.retailButtons {
	width: 100%;
	border: 2px solid #ffcd0d;
	border-radius: 5px;
	margin: 25px auto 0;
	position: relative;
}
.retailerText {
	background: transparent;
	background: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 10%,rgba(0,0,0,1) 15%,rgba(0,0,0,1) 85%,rgba(255,255,255,0) 90%,rgba(255,255,255,0) 100%);
	position: relative;
    top: -18px;
    text-align: center;
}

@media screen and (min-width: 640px) {	
	.purchase h2 {
		font-size: 60px;
	}
	.purchase {
/*		height: 980px;*/
	}
}
@media screen and (min-width: 740px) {
	.preorderBreak {
		display: none;
	}
	.preorderDateText {
		font-size: 24px;
	}
}
@media screen and (min-width: 900px) {
	.smallScreenGlam {
		display: none;
	}
	.largeScreenGlam {
		display: inline-block;
	}
	.retailButtons {
		display: inline-block;
		margin: 0 2% 0 0;
		max-width: 400px;
		vertical-align: middle;
		width: 33%;
	}
	.purchaseButton {
		width: 90%;
	}
}
@media screen and (min-width: 1024px) {
	.retailButtons {
		width: 35%;
	}
	.purchase {
/*		height: 760px;*/
	}
}
@media screen and (min-width: 1400px) {
	.purchase h2 {
		font-size: 90px;
	}
}
/*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;
}
.linksContainerDigital {
	display: none;
}
.smallScreenIndividual {
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
.editionTextGroup {
	display: none;
}
.titleGroup, .titleGroupDigitalLarge {
	display: block;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}
.gameCoverDigital, .gameCoverRetail, .purchaseLinkDigital {
	display: inline-block;
	width: 60%;
	vertical-align: top;
	max-height: 400px;
}
.gameCoverDigital img, .gameCoverRetail img {
	width: 95%;
    max-width: 350px;	
	margin-bottom: 2%;
}
.gameCoverDigital p, .gameCoverRetail p {
	color: #FFF;
	text-transform: uppercase;
	font-weight: 600;
	margin: 8px auto;
}
.gameCoverDigital {
	position: relative;
	left: 0;
}
.gameCoverContainer {
	width: 55%;
	margin: 0 auto 5px;
}
.purchaseText {
	color: #000;
}

.buyNowButton, .downloadButton {
	background: #ffcd0d;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
	line-height: 1.25;
    max-width: 190px;
    padding: 8px;
    width: 46%;
    text-align: center;
	text-transform: uppercase;
    vertical-align: top;
}
.showEU .buyNowButton, .downloadButton {
	max-width: 375px;
    font-size: 16px;
}
.tableGroup {
	background: rgba(255,255,255,0.75);
    margin: 5px auto 20px;
    width: 95%;
	font-size:0;
}
.row {
	margin: 0;
	text-align: center;
}
.tableGroup .row:not(:last-child) {
	border-bottom: 2px solid #000;
}
.row h1 {
	font-size: 16px;
}
.row h2 {
	font-size: 13px;
	text-shadow: none;
}
.cellLarge, .cellLargeDigital {
	width: 85%;
	display: inline-block;
	vertical-align: middle;
	border-right: 2px solid #000;
	padding: 12.5px 5px;
}
.cellLargeDigtial, .cellLargeDigital {
	width: 50%;
	display: inline-block;
	vertical-align: middle;
	border-right: 2px solid #000;
	padding: 11.5px 5px;
}
.cellSmall, .cellSmallDigital {
	width: 13%;
	display: inline-block;
	vertical-align: middle;
}
.checkmark {
	width: 25px;
}
.noCheck {
	opacity: 0;
}
.purchasePrev, .purchaseNext, .purchasePrevDigital, .purchaseNextDigital {
	width: 25px;
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translate(0, -200%);
}
.purchaseNext, .purchaseNextDigital {
	right: -5px;
}
.purchasePrev, .purchasePrevDigital {
	left: -5px;
}

@media screen and (min-width: 500px) {
	.row h1 {
		font-size: 17px;
	}
	.row h2 {
		font-size: 12px;
	}
}
@media screen and (min-width: 640px) {
	.cellLarge, .cellLargeDigital {
		width: 73%;
	}
	.cellSmall, .purchaseLinkDigital, .cellSmallDigital {
		width: 25%;
	}
	.tableGroup, .titleGroup, .titleGroupDigitalLarge {
		max-width: 640px;		
	}
}
@media screen and (min-width: 768px) {
	.cellLarge, .cellLargeDigital {
		width: 63%;
	}
	.cellSmall, .gameCoverDigital, .gameCoverRetail, .purchaseLinkDigital, .cellSmallDigital {
		width: 35%;
	}	
}
@media screen and (min-width: 1024px) {
	.linkSmallScreenGroup {
		display:none;
	}
	.linkLargeScreenGroup {
		position: relative;
		width: 95%;
		max-width: 1200px;
		margin: 0 auto;
		display: block;
		text-align: center;
	}
	.largeScreenDigital {
		width: 90%;
		margin: 0 auto;
	}
	.tableGroup {
		max-width: 1200px;
	}
	.cellLarge, .cellLargeDigital {
		width: 29%;
	}
	.gameCoverDigital, .gameCoverRetail, .purchaseLinkDigital {
		width: 33%;
	}
	.gameCoverDigital {
		position: relative;
		left: 15%;
	}
	.gameCoverContainer {
		width: 85%;
	}
	.cellSmall, .cellSmallDigital {
		display: inline-block;
		vertical-align: middle;
		padding: 14px;
		width: 22%;
	}
	.row .cellSmall:not(:last-child), .row .cellSmallDigital:not(:last-child) {
		border-right: 2px solid #000;
	}
	.redBackCell .cellSmall:not(:last-child), .redBackCell .cellSmallDigital:not(:last-child) {
		border-right: 2px solid #000;
		padding: 19.5px;
	}
	.editionTextGroup {
		display: none;
		text-align: left;
		vertical-align: bottom;
		width: 30%;
		position: absolute;
		left: 0;
		bottom: 110px;
	}
	.titleGroup, .titleGroupDigitalLarge {
		display: inline-block;
		font-size: 0;
		max-width: 725px;
		width: 65.5%;
		vertical-align: bottom;	
		position: relative;
		left: 0;
	}
/*
	.gameCoverDigital img, .gameCoverRetail img {
		max-width: 300px;
		width: 90%;
	}
*/
	.buyNowButton, .downloadButton {
		width: 55%;
	}
	.downloadButton {
		margin-top: 15px;
	}
	.versionButtonsGroupSmall {
		display: none;
	}
	.versionButtonsGroupLarge {
		display: block;
		position: absolute;
		top: 50px;
		width: 35%;
		text-align: left;
	}
	.linksContainerDigital, .linksContainerRetail {
		margin: 0 auto;
	}
	.versionButton {
		max-width: 250px;
		width: 100%;
	}
}
/*Purchase Retail EU (glamshot only)*/
.glamShotEU {
	width: 100%;
}
.smallScreenGlam {
	display: block;
}
.largeScreenGlam {
	display: none;
}
.purchaseButtonEU {
	background: #ffcd0d;
	border: 2px solid #000;
    display: inline-block;
    color: #000;
    margin: 7px;
	max-width: 335px;
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
    width: 44%;
}
@media screen and (min-width: 900px) {
	.smallScreenGlam {
		display: none;
	}
	.largeScreenGlam {
		display: inline-block;
	}
	.glamShotEU {
		max-width: 1000px;
		vertical-align: middle;
		width: 64%;
	}
	.purchaseButtonEU {
		width: 90%;
	}
}
@media screen and (min-width: 1024px) {
	.glamShotEU {
		width: 62%;
	}
}
/*Purchase Modal for Links*/
.retailModal {
	background-color: rgba(0,0,0,.85);
	display: none;
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 30;
}
.retailModalContainer {
    background: #313c46;
    left: 50%;
    margin: 0 auto;
    max-width: 800px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
}
.retailModalInnerContainer {
	background: #273038;
}
.retailTitleGroup {
	padding: 10px;
}
.editionHeader {
	font-size: 40px;
}
.replaceRetailLinks {
	display: block;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    width: 98%;
}
.purchaseButton {
	background: #ffcd0d;
	border: 2px solid #000;
    display: inline-block;
    color: #000;
	float: left;
    margin: 7px;
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
    width: 95%;
	position: relative;
}
.glamShot {
	display: block;
	padding: 10px;
	width: 100%;
}
.hideArea {
	display: none;
}
@media screen and (min-width: 500px) {
	.purchaseButton {
		width: 46%;
	}
}
/*DLC*/
#dlc {
	position: relative;
}
.dlc {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
	margin-top: -2px;
}
.no-webp .dlc,
.no-js .dlc {
  background-image: url("../img/dlc/dlc_bg.jpg");
}

.webp .dlc {
  background-image: url("../img/dlc/dlc_bg.webp");
}
.dlcGroup {
	padding: 60px 0;
	text-align: left;
}
.mainDLCGroup {
	max-width: 1200px;
    margin: 0 auto;
	text-align: center;
}
.mainDLCGroup h2, .mainDLCGroup p, .mainDLCGroup h3, .smallDLCGroup h4 {
	text-align: left;
}
.smallDLCGroup {
    width: 100%;
    max-width: 400px;
    height: 410px;
    border: 1px solid white;
    padding: 10px;
    display: inline-block;
    margin: 25px auto 0;
    vertical-align: top;
}
.smallDLCGroup img {
	width: 100%;
	margin-bottom: 15px;
}
.smallDLCGroup h4 {
	font-size: 12px;
}
@media screen and (min-width: 400px) {
	.smallDLCGroup {
		height: 440px;
	}
}
@media screen and (min-width: 640px) {
	.smallDLCGroup {
		height: 455px;
	}
}
@media screen and (min-width: 867px) {
	.smallDLCGroup {
		margin: 25px 10px 0 0;
	}
}
@media screen and (min-width: 1080px) {
	.smallDLCGroup {
		width: 32%;
	}
}
@media screen and (min-width: 1400px) {
	.smallDLCGroup {		
		height: 490px;
	}
}


/*themeSong*/
#themeSong {
	position: relative;
}
.themeSong {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
.no-webp .themeSong,
.no-js .themeSong {
  background-image: url("../img/themesong/bg_theme.jpg");
}

.webp .themeSong {
  background-image: url("../img/themesong/bg_theme.webp");
}
.themeSongBtnGroup, .kaitoFanKitGroup {
	width: 250px;
}
.themeSongBtn, .kaitoFanKitBtn {
    background-color: #ffcd0d;
    border: 2px solid #000;
    color: #000;
    cursor: pointer;
    display: block;
    margin: 10px 0;
    padding: 4px 30px;
	text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    width: 250px;
}
.themeSongGroup {
	padding: 60px 0;
	text-align: left;
}
.mainThemeSongGroup {
	max-width: 1200px;
    margin: 0 auto;
	position: relative;
}
.mainThemeSongGroup img {
    font-size: 0;
    margin: 15px auto;
    vertical-align: top;
    width: 46%;
}
.mainThemeSongGroup .marginRightOnly {
    margin: 15px 4% 15px 0;
}
.mainThemeSongText {
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    vertical-align: top;
    width: 100%;
}
.mainThemeSongText p {
    font-size: 18px;
}
.showSmallThemeSong {
	display: inline-block;
}
.showLargeThemeSong {
	display: none;
}
.firstCol, .secondCol {
	display: inline-block;
	text-align: left;
	vertical-align: top;
}
.firstCol {
	width: 155px;
}
.copyrightGroup {
	text-align: left;
    margin: 5% auto 0;
}
.mainThemeSongText .copyrightGroup p {
	font-size: 12px;
	display: inline-block;
	vertical-align: top;
    margin-right: 10px;
}
.fixSpacing {
	margin-left: -10px;
}
@media screen and (min-width: 450px) {
	.firstCol {
		width: 175px;
	}
}
@media screen and (min-width: 768px) {
	.showLargeThemeSong {
		display: inline-block;
	}
	.showSmallThemeSong {
		display: none;
	}
	.mainThemeSongGroup img {
		margin: 0 auto;
		width: 24%;
	}
	.mainThemeSongGroup .marginRightOnly {
		margin: 0 3% 0 0;
	}
	.mainThemeSongText {
		width: 46%;
	    margin-right: 10px;
	}
}
@media screen and (min-width: 900px) {
	.mainThemeSongText {
		margin-right: 3%;
		width: 40%;
		max-width: 345px;
	}
	.mainThemeSongText p {
		font-size: 20px;
	}
	.mainThemeSongGroup img {
		width: 26%;
	}
	.copyrightGroup {
		bottom: 0;
		position: absolute;
	}
}
@media screen and (min-width: 1024px) {
	.mainThemeSongGroup img {
		width: 28%;
	}
}
@media screen and (min-width: 1250px) {
	.mainThemeSongGroup img {
		width: 32%;
	}
}
/*Gallery*/

#gallery {
	position: relative;
}
.gallery {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
.no-webp .gallery,
.no-js .gallery {
  background-image: url("../img/gallery/gallery_background.png");
}

.webp .gallery {
  background-image: url("../img/gallery/gallery_background.webp");
}
.galleryNext, .galleryPrev {
	cursor: pointer;
    position: absolute;
	top: 50%;
	transform: translate(0, -65%);
	width: 30px;
}
.galleryNext {
	right: 0;
}
.galleryPrev {
	left: 0;
	z-index: 1;
}
@media screen and (min-width: 640px) {
	.galleryNext {
		right: -15px;
	}
	.galleryPrev {
		left: -15px;
	}
}
@media screen and (min-width: 1024px) {
	.galleryNext {
		right: -23px;
	}
	.galleryPrev {
		left: -23px;
	}
}
/*footer*/
footer {
	background-color: #262626;
}
.topBarFooter {	
	margin: 0 auto;
	max-width: 900px;
    position: relative;
    text-align: center;
}
.whiteBoxBG, .whiteBoxBGNonContainer {
	background-color: #fff;
	height: 60px;
	position: relative;
	width: 100%;
}
.whiteBoxBG::before {
	background-image: url(../img/purchase/triangle.png);
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    height: 75px;
    right: -22px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 22px;
}
.whiteBoxBGNonContainer {
	position: absolute;
}
.whiteBoxBG p {
	color: #262626;
	left: 50%;
	position: absolute;
	text-transform: uppercase;
	top: 50%;
	transform: translate(-50%, -50%);
} 
.socialGroup, .newsletterGroup {
	display: inline-block;
	margin: 0 auto;
	max-width: 320px;
	text-align: center;
}
.socialIcons {
	width: 100%;
}
.socialIcons li {
    display: inline-block;
    margin: 25px 1.68% 0 0;
    max-width: 57px;
    width: 18%;
} 
.socialIcons li:last-child {
	margin-right: 0;
}
.socialIcons li img {
	width: 100%;
}
.newsletterButton {
	background-color: #FFF;
    display: inline-block;
    color: #000;
	cursor: pointer;
    margin: 20px auto 0;
    max-width: 275px;
    padding: 15px 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
.logosGroup {
	margin: 0 auto;
    max-width: 1350px;
    padding: 25px 0;
    position: relative;
    text-align: center;
}
.logosGroup img {
	margin: 10px;
}
.logosGroup .segaLogo {
	height: 50px;
}
.logosGroup .rggLogo {
	height: 90px;
}
.logosGroup .ratingsIcon {
	height: 72px;
}
.logosGroup .esrbCert {
	height: 72px;
}
.copy {
	font-size: 12px;
    margin: 0 auto;
    max-width: 900px;
    padding-bottom: 15px;
    text-align: center;
	width: 95%;
}
.policyGroup, .policyGroup a {
    text-align: center;
    font-size: 10px;
    line-height: 1.85;
    padding: 15px 0;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}
.policyGroup {
	padding: 0 0 8px;
}
.policyGroup a {
	margin: 0 10px;
	padding: 0;
	text-transform: uppercase;
	font-size: 16px;
}
.ps4Logo, .xboxLogo {
	height: 40px;
}
@media screen and (min-width: 500px) {
	.logosGroup {
		padding: 15px 0;
	}
}
@media screen and (min-width: 640px) {
	.whiteBoxBG, .whiteBoxBGNonContainer {
		display: inline-block;
		height: 75px;
		right: 60%;
	}
	.whiteBoxBG p {
		left: auto;
		right: 0;
		transform: translate(-60%, -50%);
	}
	.socialGroup {
		left: 48%;
		position: absolute;
		top: 9px;
	}
	.socialIcons li {
		margin-top: 0;
	}
}
@media screen and (min-width: 768px) {
	.whiteBoxBG, .whiteBoxBGNonContainer {
		right: 70%;
	}
	.socialGroup {
		left: 33%;
		top: 15px;
	}
	.socialIcons li {
		max-width: 45px;
	}
	.newsletterGroup {
		height: 45px;
		left: 72%;
		position: absolute;
		top: 15px;
		width: 26%;
	}
	.newsletterButton {
		margin: 0 auto;
		padding: 10.5px 0;
		width: 100%;
	}
}
/*NEWSLETTER*/
.newsletterModal{background-color:rgba(0,0,0,.85);display:none;height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:30}
.newsletterHeader{display:none;}
.newsletterHeader img{display: inline-block;margin: 0 10px 0 0;vertical-align: middle;width: 35%;}
.newsletterHeaderText{display: inline-block;vertical-align: middle;width: 57%;}
.newsletterHeaderText h3{font-size:60px}
.newsletterHeaderText h4{font-size:27px}
.close{cursor:pointer;height:32px;opacity:.7;position:absolute;right:5px;top:5px;width:32px}
.close:hover{opacity:1}
.close:before,.close:after{background-color:#FFF;content:' ';height:33px;left:15px;position:absolute;width:2px}
.close:before{transform:rotate(45deg)}
.close:after{transform:rotate(-45deg)}
.asterisk{color:red;display:inline-block;position:relative}
#mc_embed_signup{background:#273038;left:50%;margin:0 auto;max-width:600px;padding:20px;position:absolute;top:50%;transform:translate(-50%,-50%);width:95%}
.mc-field-group .fa.fa-envelope,#mc_embed_signup .mc-field-group input{display:inline-block;margin-right:-5px}
.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%)}
#mc_embed_signup .mc-field-group input{background:#13181c!important;border:none;color:#FFF!important;height:45px;padding-left:10px;text-transform:uppercase;width:100%}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{-webkit-text-fill-color:#FFF!important;text-fill-color:#FFF!important;-webkit-box-shadow:0 0 0 1000px #13181c inset;box-shadow:0 0 0 1000px #13181c inset}
#mc_embed_signup .mc-field-group label,.privacyNewsletter{display:inline-block!important;margin-bottom:10px;font-size:14px;text-align:left}
.email label{text-transform:uppercase}
#mc-platform-selection #mc-platform-title {margin:10px auto}
#mc-platform-selection ul {text-align:center}
#mc-platform-selection ul li{width: 16.75%; max-width: 80px; display: inline-block!important; margin-right: 2.5%!important; margin-left: 0!important;}
#mc-platform-selection ul li:last-child{margin-right:0}
img.newsletter_platform{width:100%;height:auto;opacity:0.5;cursor: pointer;}
#mc-platform-selection input:checked ~ img.newsletter_platform{opacity:1}
a.privacyNewsletter{color:#FFF!important;display:inline!important;font-weight:500;text-decoration:underline}
#mc_embed_signup .button,#mc_embed_signup .button:hover{background: #ffcd0d;
    background: #ffcd0d;margin:10px auto 0;height:auto;padding:12px 24px;color:#000;text-transform:uppercase;width:100%}
#mc_embed_signup .button:disabled{opacity:.7}
#mc_embed_signup .clear{clear:both;text-align:center}
#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error{margin:4px 0 1em;padding:5px 10px;background-color:transparent;color:#ecce33;text-transform:uppercase;letter-spacing:1.85px}
#mc_embed_signup input.mce_inline_error{border:none!important;padding-left:10px}
#mc_embed_signup .mc-field-group.input-group div.inputContainer{margin-top:15px;padding-bottom:15px;position:relative}
#mc_embed_signup .mc-field-group.input-group div label > *{display:inline-block;vertical-align:middle}
#mc_embed_signup .mc-field-group.input-group div label div:nth-child(2){margin-right:15px}
#mc_embed_signup .mc-field-group.input-group div label div:nth-child(3){width:calc(100% - 55px)}
label.checkbox{width:100%}
.mc-field-group.input-group label input{width:0;height:0;margin:0!important;display:none!important}
.custom__checkbox{width:30px;height:30px;background-color:#13181c;position:relative;display:inline-block;vertical-align:middle}
.custom__checkbox:before{content:"";background-color:#13181c;display:inline-block;font-size:25px;height:30px;width:30px;padding:0;position:absolute;top:0;left:0;cursor:pointer;z-index:1;transition:all .3s ease-out}
.custom__checkbox:after{content:"";background-color:#13181c;height:30px;width:30px;position:absolute;top:0;left:0;z-index:0}
.checkbox input:checked~.custom__checkbox:before{left:10.75px;top:0;width:10px;height:19px;border:solid #FFF;border-width:0 4px 4px 0;transform:rotate(45deg)}
#mc_embed_signup div.response{margin:0 auto;padding:1em 0 .5em;top:-1.5em;z-index:1;width:95%;font-size:15px;color:#ecce33!important;letter-spacing:1.85px;text-transform:uppercase;display:none}
.responseText{margin:0 auto;padding:1em 0 .5em;top:-1.5em;z-index:1;width:95%;font-size:15px;color:#ecce33!important;letter-spacing:1.85px;text-align:center;text-transform:uppercase}
.responseText ~ .responseText,#language{display:none}

/*controls the success message (specifically the color) */
@media screen and (min-width: 400px) {

}
@media screen and (max-height: 450px) and (orientation:landscape) {
#mc_embed_signup{height:90%;overflow-y:scroll}
}
@media screen and (min-width: 500px) {

}
@media screen and (min-width: 640px) {
	.newsletterHeader {
		display: block;
	}
}
/* Newsletter section end */
/* Age Gate Modal - NOTE need the JS for this to work. */
.ageGateModal, .ageGateModalNoPass {
	background-color: rgba(0,0,0,1);
	display: none;
	height: 100vh;
	left: 0;
	overflow-y: scroll;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 99999;
}
.ageGateContainer {
	background-color: #262626;
	left: 50%;
	max-width: 800px;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 95%;
}
.innerAgeGateGroup {
	padding: 50px 0;
}
.fields {
	margin-top: 20px;
}
.selectContainer {
	display: inline-block;
	max-width: 200px;
	margin: 0 .75%;
	position: relative;
	width: 30%;
}
/*this makes original select disappear*/
.selectContainer select {
 	display: none; 
}
.select-selected {
	background-color: #ffcd0d;
}
/*creates arrow for custom select*/
.select-selected:after {
	position: absolute;
	content: "";
	top: 14px;
	right: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #000 transparent transparent transparent;
}
.select-selected.select-arrow-active:after {
	border-color: transparent transparent #000 transparent;
	top: 7px;
}
.select-items div,.select-selected {
	color: #000;
	padding: 5px 10px;
	border: 1px solid transparent;
	border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
	cursor: pointer;
	font-weight: 700;
	user-select: none;
}
.select-items {
	position: absolute;
	background-color: #ffcd0d;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 99;
	overflow-y: scroll;
    height: 125px;
}
.select-hide {
 	display: none;
}
.select-items div:hover, .same-as-selected {
	background-color: rgba(0, 0, 0, 0.1);
}
.buttonAgegate, .buttonAgegate:hover {
	background-color: #ffcd0d!important;
    font-weight: 700;
    margin: 40px auto 0;
    max-width: 300px;
    height: auto;
    padding: 12px 24px;
    color: #000;
    text-transform: uppercase;
    border: 2px solid #000;
    width: 100%;
}
.buttonAgegate:disabled {
	opacity: .7
}