@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: interstate, 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;
	font-weight: 700;
}
h4 {
	font-family: interstate, sans-serif;
	font-weight: 700;
	font-size: 25px;
	letter-spacing: 2.5px;
}
h3 {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.25;
	text-transform: uppercase;
}
h2 {
	font-family: interstate, sans-serif;
	font-weight: 800;
	font-style: italic;
	font-size: 9vw;
	letter-spacing: 1.85px;
	line-height: 1;
	margin-bottom: 10px;
	position: relative;
/*	text-shadow: -5px 5px rgba(0,0,0,.35);*/
	text-transform: uppercase;
	z-index: 1;
}
h1 {
	line-height: 1.4;
	font-family: interstate, 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: 13px;
}
.font-bold {
	font-weight: 700;
}
.font-black {
	font-weight: 800;
}
.italic {
	font-style: italic;
}
.removeItalic {
	color: #FFF;
	font-style: normal;
}
@media screen and (min-width: 640px) {
	body {
		font-size: 16px;
	}
	h3 {
		font-size: 24px;
	}
	h2 {
		font-size: 50px;
	}
	h1 {
		font-size: 40px;
	}
	p {
		font-size: 15px;
	}
}
@media screen and (min-width: 1400px) {
	h4 {
		font-size: 25.25px;
	}
	h3 {
		font-size: 26px;
	}
	.smallFeatureGroup h3 {
		font-size: 24px;
	}
	h2 {
		font-size: 60px;
	}
	h1 {
		font-size: 80px;
		text-transform: uppercase
	}
	p {
		font-size: 16px;
	}
	.smallFeatureGroup p {
		font-size: 15px;
	}
}
/*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-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: 55px;
	margin: 3px 0 0 3px;
}
.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: #ffd000;
	border: 2px solid #002393;
	color: #000;
	cursor: pointer;
    display: inline-block;
	margin: 0 2.5px;
	padding: 4px 10px;	
	text-transform: uppercase;
	white-space: nowrap;
}
.hideSmallNewsletter, .hideSmall {
	display: none;
}
.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: 768px) {
	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: 540px;
	}
	.hamUL li {
		border-bottom: none;
		display: inline-block;
		margin-right: -1px;
		max-width: 180px;
		padding: 1%;
		width: 33%;	
	}
}
@media screen and (min-width: 810px) {
	.purchaseNavBtn {
		padding: 4px 30px;	
	}
}
@media screen and (min-width: 860px) {
	.hideSmall {
		display: inline-block;
	}
}
@media screen and (min-width: 1024px) {
	.hideSmallNewsletter {
		display: inline-block;	
	}
}
/*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 {
	align-items: center;
	background: #9846ff;
	display: flex;
	height: 100%;
	justify-content: center;
	position: fixed;
    top: 0;
	width: 100%;  
    z-index: 200;
}
.characterLoader {
	-webkit-animation: loadingAnim2 1s linear;
    animation: loadingAnim2 1s linear;
	animation-iteration-count: infinite;
	display: inline-block;
	margin-left: -18px;
	width: 90px;
}
.loadingGroup h2 {
	-webkit-animation: loadingAnim2 1s linear;
    animation: loadingAnim2 1s linear;
	animation-iteration-count: infinite;
	display: inline-block;
	font-size: 4em;
    text-transform: uppercase;
}
.loadingGroup h2:nth-child(2) {
    animation-delay: .125s;
}
.loadingGroup h2:nth-child(3) {
    animation-delay: .25s;
}
.loadingGroup h2:nth-child(4) {
    animation-delay: .375s;
}
.loadingGroup h2:nth-child(5) {
    animation-delay: .5s;
}
.loadingGroup h2:nth-child(6) {
    animation-delay: .625s;
}
.loadingGroup h2:nth-child(7) {
    animation-delay: .75s;
}
@keyframes loadingAnim {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	15% {
		-webkit-transform: rotate(2deg);
		transform: rotate(2deg);
	}
	30% {
		-webkit-transform: translateY(4px);
		transform: translateY(4px);
	}
	45% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	60% {
		-webkit-transform: rotate(-2deg);
		transform: rotate(-2deg);
	}
	75% {
		-webkit-transform: translateY(-4px);
		transform: translateY(-4px);
	}
	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}
@keyframes loadingAnim2 {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(15px);
		transform: translateY(15px);
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
/*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;
}
#hero:before {
    background-image: url(../img/hero/overlay.png);
    background-repeat: repeat;
    content: '';
    height: 100%;
	opacity: 0.5;
    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%;
	left: -15%;
	 -o-object-fit: cover;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 170%;
	z-index: -1;
}
.heroGroup {
	left: 50%;
	padding: 100px 0;
	position: relative;
	text-align: center;
	transform: translate(-50%, 0);
	width: 95%;
	max-width: 700px;
}
.heroGroup img {
	width: 100%;
    max-width: 600px;
}
.heroGroup h4 {
	margin: 8px auto;
	text-shadow: 0 0 10px #000;
	text-transform: uppercase;
}
.heroBtn, .heroBtnOutline {
    background-color: #ffd000;
	border: 2px solid #002393;
	color: #000;
	cursor: pointer;
    display: inline-block;
	margin: 5px;
	padding: 4px 10px;
	text-transform: uppercase;
	white-space: nowrap;
	width: 300px;
}
.heroBtnOutline  {
	background-color: transparent;	
	color: #FFF;	
	text-shadow: 0 0 5px #000;
}
.esrbHero {
	display: block;
    position: absolute;
    bottom: 2%;
    right: 50%;
    transform: translate(50%, 0);
    max-height: 72px;
}
@media screen and (min-width: 450px) {
	.hideBreak {
		display: none;
	}
}
@media screen and (min-width: 500px) {
	.esrbHero {
		bottom: 2%;
		right: 2%;
		transform: translate(0, 0);
	}
}
/*media*/
#media {
	position: relative;
}
.media {
	background-image: url("../img/media/BG03.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
.mediaGroup {
	max-width: 1200px;
	padding: 50px 0;
}
.mediaHeader {
    display: block;
    margin: 0 auto;
    max-width: 350px;
    width: 80%;
}
.mediaMainText {
	display: block;
	margin: 0 auto;
	max-width: 800px;
	text-align: center;
	text-transform: uppercase;
}
.trailerContainer {
    margin: 0 auto;
    max-width: 1200px;
	position: relative;
    text-align: center;
}
.curvedFrameBehindImage {
	max-width: 600px;
	width: 100%;
}
.trailerNext, .trailerPrev {
	cursor: pointer;
    position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	width: 30px;
}

.playTrailer {
	border-radius: 15px;
	height: auto;
	left: 50%;
    max-width: 500px;
	-o-object-fit: cover;
    object-fit: cover;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 87%;
	z-index: 1;
}
.trailerNext {
	right: 0;
}
.trailerPrev {
	left: 0;
	z-index: 1;
}
.mediaImg {
	width: 100%;
}
/*
.carouselVideo {
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    width: 87%;
}
*/
.trailerCarousel {
	position: relative;
    width: 83%;
    margin: 0 auto;
}
.playButton {
	left: 50%;
	opacity: .75;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	z-index: 2;
}
.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 {
	background-image: url("../img/features/features_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
.featuresGroup {
	padding: 60px 0;
	text-align: left;
}
.mainFeaturesGroup {
	max-width: 1200px;
    margin: 0 auto;
}
.mainFeaturesGroup img {
    box-shadow: 15px 15px #9846ff;
	margin: 15px auto 40px;
	vertical-align: top;
	width: 100%;
}
.mainFeaturesText {
	display: inline-block;
	vertical-align: top;
}
.showSmallFeature {
	display: block
}
.showLargeFeature {
	display: none;
}
.smallFeatureGroup {
display: inline-block;
    height: 370px;
    position: relative;
    text-align: left;
    width: 100%;
}
.smallFeatureGroup div {
    margin: 0 auto;
    padding: 7px 0;
    width: 250px;
}
.smallFeatureGroup img {
    border-radius: 10px;
	margin: 10px 0;
    width: 100%;
}
#bg1 {
	background-image: url(../img/features/curveyback1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;	
    overflow: hidden;	
}
#bg2 {
	background-image: url(../img/features/curveyback2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;	
    overflow: hidden;	
}
#bg3 {
	background-image: url(../img/features/curveyback3.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;	
    overflow: hidden;	
}
#bg4 {
	background-image: url(../img/features/curveyback4.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;	
    overflow: hidden;	
}
#bg5 {
	background-image: url(../img/features/curveyback5.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;	
    overflow: hidden;	
}
.smallFeaturesContainer {
	display: block;
    margin: 50px auto 0;
    max-width: 800px;
	position: relative;
	text-align: center;
}
.largeFeaturesContainer {
	display: none;
}
.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) {
	.smallFeatureGroup {
		height: 450px;
/*		height: 420px;*/
/*    	width: 350px;*/
	}
	.smallFeatureGroup div {
		width: 310px;
	}
}
@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: 70%;
	}
	.mainFeaturesText {
		margin-right: 3%;
		width: 25%;
	}
}
@media screen and (min-width: 1300px) {
	.smallFeaturesContainer {
		display:none;
	}
	.largeFeaturesContainer {
		display: block;
		margin: 50px auto 0;
		max-width: 1230px;
	}
	.smallFeatureGroup {
		margin: 13px;
		width: 380px;
	}
}
@media screen and (min-width: 1400px) {
/*
	.smallFeatureGroup {
		height: 450px;
		width: 370px;
	}
	.largeFeaturesContainer {
		max-width: 1210px;
	}
*/
/*
	.smallFeatureGroup div {
		width: 300px;
	}
*/
	.smallFeatureGroup {
		height: 460px;
	}
}
/*characters*/
#characters {
	position: relative;
}
.characters {
	background-image: url("../img/characters/characters_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
.charactersGroup {
	padding: 60px 0 10px;
	text-align: center;
}
.mainCharactersGroup {
	display: inline-block;
	max-width: 650px;
    margin: 0 auto;
	text-align: left;
	vertical-align: top;
}
.characterSelector, .characterText {
	margin: 15px auto 0;
	max-width: 600px;
    width: 100%;
}
.characterText {
	margin: 0 auto;
	text-shadow: 0px 0px 5px rgb(152 70 255), 0px 0px 5px rgb(152 70 255), 0px 0px 5px rgb(152 70 255), 0px 0px 10px rgb(152 70 255), 0px 0px 18px rgb(152 70 255), 0px 0px 25px rgb(152 70 255);
}
.characterSelector li {
	display: inline-block;
    margin: 0 10px 10px 0;
    width: 15.8%;
}
.characterSelector li img {
	width: 100%;
}
.characterSelector li:hover {
	cursor: pointer;
	filter: drop-shadow(5px 5px 5px #222);
}
.characterActive {
	filter: drop-shadow(5px 5px 5px #222);
}
.characterImageGroup {
	display: inline-block;
    margin: 30px auto 0;
	max-width: 550px;
    position: relative;
	vertical-align: top;
    width: 100%;
}
.characterImageGroup img {
	width: 100%;
}
.characterImageGroup img:first-child {
	position: absolute;	
    filter: drop-shadow(5px 5px 5px #222);
}
@media screen and (min-width: 640px) {
	.characterSelector li {
		width: 17%;
	}
}
@media screen and (min-width: 900px) {
	.mainCharactersGroup {
		width: 56%;
	}
	.characterSelector, .characterText {
		margin: 0;
	}
	.characterImageGroup {
		margin: 0 0 0 3%;
		width: 40%;
	}
	.characterImageGroup img {
		max-width: 900px;
		width: 100%;
	}
	.charactersGroup {
		padding: 60px 0;
	}
}
/*purchase*/
#purchase {
	position: relative;
}
.purchase {
	background-image: url("../img/purchase/purchase_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
.purchaseGroup {
	max-width: 1200px;
	padding: 60px 0;
	text-align: center;
    width: 95%;
}
.glamShot {
	width: 100%;
}

/*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;
	font-size: 13px;
	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: 17%;
} 
.socialIcons li:last-child {
	margin-right: 0;
}
.socialIcons li img {
	width: 100%;
}
.newsletterButton {
	background-color: #FFF;
    display: inline-block;
    color: #262626;
	cursor: pointer;
	font-size: 13px;
    margin: 20px auto 0;
    max-width: 275px;
    padding: 15px 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
.logosGroup {
	margin: 0 auto;
    max-width: 1200px;
    padding: 25px 0;
    position: relative;
    text-align: center;
}
.logosGroup img {
	margin: 10px;
}
.logosGroup .atlusLogo {
	height: 50px;
}
.logosGroup .pStudio {
	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 {
	height: 40px;
}
.epicgamesLogo {
	height: 52px;
}
@media screen and (min-width: 500px) {
	.logosGroup {
		padding: 15px 0;
	}
/*
	.logosGroup .atlusLogo {
		left: 0;
		margin: 0 10px;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
	}
	.logosGroup .ratingsIcon {
		height: 72px;
		margin: 0 10px;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(0, -50%);
	}
*/
}
@media screen and (min-width: 640px) {
	.whiteBoxBG, .whiteBoxBGNonContainer {
		display: inline-block;
		height: 75px;
		right: 60%;
	}
	.whiteBoxBG p {
		left: auto;
		right: 0;
		transform: translate(-40%, -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: 12.5px 0;
		width: 100%;
	}
}
/*NEWSLETTER*/
.newsletterModal {
	background-color: rgba(0,0,0,.85);
	display: none;
	height: 100vh;
	left: 0;
	overflow: scroll;
	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: 44px;
}
.newsletterHeaderText h4 {
	font-size: 27px;
	line-height: 30px;
}
.close {
	cursor: pointer;
	height: 32px;
	opacity: 0.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);
}
.dobContainer {
	margin-top: 10px;
}
.datefield .subfield:not(:last-child) {
	margin-right: 10px;
}
.datepart  {
	width: 25%!important;
	text-align: center;
	padding: 0!important;
}
.yearfield .datepart {
	width: 44.2%!important;
}
.platformUL {
	width: 100%;
	text-align: center;
}
.platformUL li {
	width: 18.55%;
	max-width: 80px;
    display: inline-block!important;
    margin-right: 2.5%!important;
    margin-left: 0!important;
}
.platformUL li:last-child {
    margin-right: 0!important;
}
.platformUL li input {
	position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
	width: 0!important;
	height: 0!important;
}
.platformIcon {
	opacity: .45;
	width: 100%;
	cursor: pointer;
}
.platformCheckbox {
	position: absolute;
	opacity: 0;
}
.platformGroup {
	padding-top: 5px!important;
	width: 97%!important;
}
/*_signup is the form itself, the .newsletter class above refers to the section that sits above the actual form*/
#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%;
}
/*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: #13181c!important;
    border: none;
    color: #FFF!important;
    height: 45px;
    padding-left: 10px;
    text-transform: uppercase;
    width: 100%;
}
/* Change Autocomplete styles in Chrome*/
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;;
}
/*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: 10px;
	text-align: left;
}
.email label {
	text-transform: uppercase;
}
/*hide the site visiting. Just make sure to use "checked" in html portion to show the site*/
.siteVisiting {
	display: none;
}
/*style the privacy Policy text*/
a.privacyNewsletter {
	color: #FFF!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: #ffd000!important;
    margin: 10px auto 0;
    height: auto;
    padding: 12px 24px;
    color: #000;
    text-transform: uppercase;
    border: 2px solid #000;
    width: 100%;
}
#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: 0;
    padding: 0 10px;
    background-color: transparent;
	color: #ecce33;
	text-transform: uppercase;
	letter-spacing: .85px;
	font-size: 12px;
}
#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 {
    margin-left: 17%;
	margin-top: 15px;
	padding-bottom: 15px;
	position: relative;
}
/* removes the base check box */
.myCheckbox input {
	display:none!important;
}
.checkboxContainer {
	max-width: 830px;
	margin: 0 auto;
}
/* This is for the custom checkbox itself. */
.myCheckbox span {	
	background-color: #13181c;
    display: inline-block;
    font-size: 25px;
    height: 30px;
    width: 30px;
    padding: 0;
    float: left;
    vertical-align: middle;
    position: relative;
    top: -3px;
    margin: 4px 13px 0 -45px;
    cursor: pointer;
    z-index: 1;
}
.whiteBehind {
    background-color: #13181c;
    height: 30px;
    width: 30px;
    position: absolute;
    top: 1px;
    left: -45px;
    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 #FFF;
    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;
	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-align: center;
	text-transform: uppercase;
}
.responseText ~ .responseText, #language {
	display: none;
}
.nopass {
	display: none;
	text-align: center;
}
/*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%;
	}
}
@media screen and (max-height: 450px) and (orientation:landscape) {
	#mc_embed_signup {
		height: 90%;
		overflow-y: scroll;
	}
}
@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%;
	}
}
@media screen and (min-width: 640px) {	
	.newsletterHeader {
		display: block;
	}
	#mc_embed_signup .mc-field-group label, .privacyNewsletter {
		font-size: 12px;
	}
	.datepart {
		width: 26.2%!important;
	}
}
/* 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: #ffd000;
}
/*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: #ffd000;
	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: #ffd000!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
}

/*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 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;
}
*/