@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 0.3s ease-in-out;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
}
.isHover:hover {
  cursor: pointer;
  opacity: 0.8;
}
h5 {
  font-size: 16px;
}
h4 {
  font-family: acumin-pro, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.5px;
}
h3 {
  font-size: 20px;
  line-height: 1.25;
  text-transform: uppercase;
}
.mediaTitle {
  font-family: birch, sans-serif;
  font-style: initial;
  letter-spacing: 6px;
}
h2 {
  font-family: acumin-pro-condensed, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 13vw;
  letter-spacing: 1.85px;
  line-height: 1;
  margin-bottom: 10px;
  position: relative;
  text-shadow: -5px 5px rgba(0, 0, 0, 0.35);
  text-transform: uppercase;
  z-index: 1;
}
h1 {
  line-height: 1.4;
  font-family: birch, sans-serif;
  font-size: 6vw;
  font-weight: 400;
  letter-spacing: 1.85px;
  text-transform: uppercase;
  text-shadow: -11px 7px rgba(0, 0, 0, 0.55);
}
p {
  font-size: 14px;
}
.font-bold {
  font-weight: 700;
}
.font-black {
  font-weight: 800;
}
.italic {
  font-style: italic;
}
.birch {
  font-family: birch-std, serif;
}
.giveShadow {
  text-shadow: 0 0 10px #9f8c59, 0 0 20px #9f8c59, -1px -1px 0 #9f8c59,
    1px -1px 0 #9f8c59, -1px 1px 0 #9f8c59, 1px 1px 0 #9f8c59,
    -2px -2px 0 #9f8c59, 2px -2px 0 #9f8c59, -2px 2px 0 #9f8c59,
    2px 2px 0 #9f8c59;
}
@media screen and (min-width: 640px) {
  body {
    font-size: 16px;
  }
  h3 {
    font-size: 24px;
  }
  h2,
  .mediaTitle {
    font-size: 95px;
  }
  h1 {
    font-size: 40px;
  }
  p {
    font-size: 16px;
  }
}
@media screen and (min-width: 1400px) {
  h4 {
    font-size: 25.25px;
  }
  h3 {
    font-size: 26px;
  }
  h2,
  .mediaTitle {
    font-size: 115px;
  }
  h1 {
    font-size: 80px;
    text-transform: uppercase;
  }
  p {
    font-size: 18px;
  }
}
/*Nav*/
.navArea {
  position: relative;
  transition: top 0.3s;
  z-index: 2;
}
.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, 0.85);
  display: none;
  height: 100vh !important;
  position: absolute;
  text-align: center;
  transition: transform 0.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, 0.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: rgb(207, 127, 7);
  background: linear-gradient(
    360deg,
    rgba(207, 127, 7, 1) 0%,
    rgba(253, 224, 142, 1) 30%,
    rgba(154, 97, 1, 1) 79%,
    rgba(254, 241, 204, 1) 100%
  );
  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;
}
.hamburgerButtons {
  padding-top: 100px;
}
@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;
  }
  .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%;
  }
  nav {
    background-color: rgba(0, 0, 0, 0.75);
  }
}
@media screen and (min-width: 810px) {
  .purchaseNavBtn {
    padding: 4px 30px;
  }
}
/*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(0.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: 0.125s;
  animation-iteration-count: infinite;
}
.loader p:nth-child(3) {
  animation: textGlow 1s linear;
  animation-delay: 0.25s;
  animation-iteration-count: infinite;
}
.loader p:nth-child(4) {
  animation: textGlow 1s linear;
  animation-delay: 0.375s;
  animation-iteration-count: infinite;
}
.loader p:nth-child(5) {
  animation: textGlow 1s linear;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
}
.loader p:nth-child(6) {
  animation: textGlow 1s linear;
  animation-delay: 0.675s;
  animation-iteration-count: infinite;
}
.loader p:nth-child(7) {
  animation: textGlow 1s linear;
  animation-delay: 0.75s;
  animation-iteration-count: infinite;
}

@keyframes textGlow {
  0% {
    transform: scale(0.5);
    color: #121212;
    -webkit-text-stroke: 2px gray;
  }
  20% {
    transform: scale(1);
    color: #ffc0cb;
    -webkit-text-stroke: 3px #eac56f;
    filter: drop-shadow(0 0 1px black) drop-shadow(0 0 1px black)
      drop-shadow(0 0 3px #eac56f) drop-shadow(0 0 5px #eac56f);
  }
  50% {
    transform: scale(0.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;
}
.mainHeroUptoTablet {
  display: block;
  height: 100%;
  width: 100%;
}
.mainHeroUptoTablet {
  height: 100%;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
.mainHeroDesktop {
  display: none;
}
.esrbContainer {
  bottom: 10px;
  height: 65px;
  left: 10px;
  margin: 0 auto;
  position: absolute;
  z-index: 1;
}
.esrbHero {
  height: 100%;
}
#hero:before {
  background-image: url(../img/hero/overlay.png);
  background-repeat: repeat;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}
.heroVideo {
  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 80px;
  /*	padding: 250px 0 120px;*/
  position: relative;
  text-align: center;
  transform: translate(-50%, 0);
  width: 95%;
  max-width: 560px;
  z-index: 1;
}
.heroGroup img {
  width: 100%;
}
.heroGroup h4 {
  font-size: 40px;
  letter-spacing: 5px;
  margin: 8px auto;
  text-transform: uppercase;
  text-shadow: 0 0 10px #9f8c59, -1px -1px 0 #9f8c59, 1px -1px 0 #9f8c59,
    -1px 1px 0 #9f8c59, 1px 1px 0 #9f8c59;
}
.heroLogo {
  opacity: 0;
  position: relative;
}
.heroBtn,
.heroBtnOutline {
  background: rgb(207, 127, 7);
  background: linear-gradient(
    360deg,
    rgba(207, 127, 7, 1) 0%,
    rgba(253, 224, 142, 1) 30%,
    rgba(154, 97, 1, 1) 79%,
    rgba(254, 241, 204, 1) 100%
  );
  color: #000;
  cursor: pointer;
  display: inline-block;
  margin: 5px;
  padding: 6px 30px;
  text-transform: uppercase;
  white-space: nowrap;
  width: 250px;
}
.heroBtnOutline {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #000;
  color: #fff;
  padding: 4px 30px;
  text-shadow: 0 0 5px #000;
}
@media screen and (min-width: 540px) {
  .esrbContainer {
    height: 72px;
  }
}
@media screen and (min-width: 640px) {
  .heroLogo {
    left: 50px;
  }
}
@media screen and (min-width: 700px) {
  .hideBreak {
    display: none;
  }
  .heroGroup {
    padding: 300px 0 150px;
  }
}
@media screen and (min-width: 1080px) {
  .heroLogo {
    opacity: 1;
  }
  .mainHeroUptoTablet {
    display: none;
  }
  .mainHeroDesktop {
    display: block;
    height: 100%;
    width: 100%;
  }
  .mainHeroDesktop .bgCharacters {
    height: 100%;
    left: 50%;
    max-width: 1270px;
    position: absolute;
    top: 0;
    transform: translate(-50%, 0);
    z-index: 1;
  }
  .mainHeroDesktop .bgOnly {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
  }
}
/*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/bg_media.jpg");
}

.webp .media {
  background-image: url("../img/media/bg_media.webp");
}
.mediaGroup {
  padding: 50px 0;
  text-align: center;
}
.mediaHeader {
  display: block;
  margin: 0 auto;
  max-width: 350px;
  width: 80%;
}
.mediaTitle {
  color: #000;
}
.mediaMainText {
  color: #000;
  display: block;
  font-size: 20px;
  letter-spacing: 0.5px;
  margin: 0 auto;
  max-width: 800px;
  text-align: center;
  text-shadow: 0 0 10px #eac56f, 0 0 20px #eac56f;
  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: 0.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: 768px) {
  .mediaMainText {
    font-size: 25px;
  }
}
@media screen and (min-width: 1024px) {
  .trailerNext {
    right: -23px;
  }
  .trailerPrev {
    left: -23px;
  }
}
/*features*/
#features {
  position: relative;
}
.features {
  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");
}
.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%;
}
.features h2 {
  font-size: 10.5vw;
  position: relative;
  text-align: left;
  color: #fff;
  font-style: normal;
}
.mainFeaturesText {
  display: inline-block;
  vertical-align: top;
  text-shadow: 0 0 10px #000, 0 0 20px #000;
}
.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: 640px) {
  .features h2 {
    font-size: 95px;
  }
}
@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: 1200px) {
  .smallFeaturesContainer {
    max-width: 1400px;
  }
}
/*characters*/
#characters {
  position: relative;
}
.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 0;
  text-align: center;
}
.mainCharactersGroup {
  display: inline-block;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  vertical-align: top;
  position: relative;
  z-index: 1;
}
.characterSelector,
.characterText {
  margin: 15px auto 0;
  max-width: 500px;
  width: 100%;
}
.characterText {
  margin: 0 auto;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  text-shadow: 0 0 10px #000, 0 0 20px #000;
}
.characters h2 {
  font-size: 10.5vw;
  position: relative;
  text-align: left;
  color: #fff;
  font-style: normal;
}
.characterSelector li {
  display: inline-block;
  margin: 0 10px 10px 0;
  width: 18%;
}
.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: inline-block;
  margin: 30px auto 0;
  max-width: 500px;
  position: relative;
  vertical-align: bottom;
  width: 100%;
  z-index: 0;
}
.characterImageGroup img {
  width: 100%;
}
.characterImageGroup img:first-child {
  position: absolute;
  bottom: 0;
  width: 126%;
  left: -13%;
}
@media screen and (min-width: 640px) {
  .characters h2 {
    font-size: 95px;
  }
}
@media screen and (min-width: 900px) {
  .mainCharactersGroup {
    text-align: left;
    width: 56%;
    margin-bottom: 60px;
  }
  .characterSelector,
  .characterText {
    margin: 0;
  }
  .characterText {
    height: 210px;
  }
  .characterImageGroup {
    margin: 0 0 0 3%;
    width: 40%;
  }
  .characterImageGroup img {
    max-width: 900px;
    width: 100%;
  }
  .characterImageGroup img:first-child {
    width: 226%;
    left: -63%;
  }
}
@media screen and (min-width: 1024px) {
  .characterImageGroup img:first-child {
    /* width: 170%; */
    left: -50%;
  }
}
/*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-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  height: 935px;
  overflow: hidden;
  text-shadow: 0 0 5px black;
}
.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: 10.5vw;
  position: relative;
  left: 2%;
  text-align: left;
  top: 6px;
}
.purchase .purchaseTitle {
  color: #fff;
  font-style: normal;
  text-align: left;
  top: 59px;
}
.preorderDateText {
  font-size: 18px;
  position: relative;
  left: 32%;
  top: 32px;
}
.preorderBreak {
  display: block;
}
.consoleButtonsContainer,
.editionsButtonsContainer,
.versionButtonsContainer {
  width: 100%;
}
.consoleButton,
.editionButton,
.versionButton {
  background-color: rgba(255, 255, 255, 0.75);
  border: 2px solid #af9453;
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  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: rgb(207, 127, 7);
  background: linear-gradient(
    360deg,
    rgba(207, 127, 7, 1) 0%,
    rgba(253, 224, 142, 1) 30%,
    rgba(154, 97, 1, 1) 79%,
    rgba(254, 241, 204, 1) 100%
  );
  border: none;
  padding: 10px 8px;
}
.consoleActive,
.editionActive,
.versionActive {
  background: rgb(207, 127, 7);
  background: linear-gradient(
    360deg,
    rgba(207, 127, 7, 1) 0%,
    rgba(253, 224, 142, 1) 30%,
    rgba(154, 97, 1, 1) 79%,
    rgba(254, 241, 204, 1) 100%
  );
}
.versionActive {
  border: none;
  color: #000;
  padding: 10px 8px;
}
.retailGroup {
  margin-top: 30px;
}
.retailButtons {
  width: 100%;
  border: 2px solid #be0000;
  border-radius: 5px;
  margin: 25px auto 0;
  position: relative;
}
.retailerText {
  background: transparent;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 20%,
    rgba(0, 0, 0, 1) 25%,
    rgba(0, 0, 0, 1) 75%,
    rgba(255, 255, 255, 0) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  position: relative;
  top: -18px;
  text-align: center;
  text-shadow: 2px 2px #000, -2px 2px #000, 2px -2px #000, -2px -2px #000;
}

@media screen and (min-width: 640px) {
  .purchase h2 {
    font-size: 95px;
  }
  .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: top;
    width: 33%;
  }
  .purchaseButton {
    width: 90%;
  }
}
@media screen and (min-width: 1024px) {
  .retailButtons {
    width: 35%;
  }
  .purchase {
    height: 760px;
  }
  .purchaseGroup {
    padding: 0px 2%;
  }
}
/*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 {
  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: 100%;
  max-width: 350px;
  margin-bottom: 5px;
}
.gameCoverDigital p,
.gameCoverRetail p {
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  margin: 8px auto;
}
.gameCoverDigital {
  position: relative;
  left: 0;
}
.buyNowButton {
  background: rgb(207, 127, 7);
  background: linear-gradient(
    360deg,
    rgba(207, 127, 7, 1) 0%,
    rgba(253, 224, 142, 1) 30%,
    rgba(154, 97, 1, 1) 79%,
    rgba(254, 241, 204, 1) 100%
  );
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 1.25;
  max-width: 190px;
  padding: 8px;
  width: 46%;
  text-align: center;
  text-transform: uppercase;
  vertical-align: top;
}
.showEU .buyNowButton {
  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 {
  width: 85%;
  display: inline-block;
  vertical-align: middle;
  border-right: 2px solid #000;
  padding: 11.5px 5px;
}
.cellLargeDigtial {
  width: 50%;
  display: inline-block;
  vertical-align: middle;
  border-right: 2px solid #000;
  padding: 11.5px 5px;
}
.cellSmall {
  width: 13%;
  display: inline-block;
  vertical-align: middle;
}
.checkmark {
  width: 10px;
}
.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 {
    width: 73%;
  }
  .cellSmall,
  .purchaseLinkDigital {
    width: 25%;
  }
  .tableGroup,
  .titleGroup {
    max-width: 640px;
  }
}
@media screen and (min-width: 768px) {
  .cellLarge {
    width: 63%;
  }
  .cellSmall,
  .gameCoverDigital,
  .gameCoverRetail,
  .purchaseLinkDigital {
    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 {
    width: 29%;
  }
  .gameCoverDigital,
  .gameCoverRetail,
  .purchaseLinkDigital {
    width: 33%;
  }
  .cellSmall {
    display: inline-block;
    vertical-align: middle;
    padding: 11.75px;
    width: 22%;
  }
  .row .cellSmall:not(:last-child) {
    border-right: 2px solid #000;
  }
  .redBackCell .cellSmall:not(:last-child) {
    border-right: 2px solid #000;
    padding: 19.5px;
  }
  .editionTextGroup {
    display: block;
    text-align: left;
    vertical-align: bottom;
    width: 30%;
    position: absolute;
    left: 0;
    top: 220px;
  }
  .titleGroup {
    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 {
    width: 55%;
  }
  .versionButtonsGroupSmall {
    display: none;
  }
  .versionButtonsGroupLarge {
    display: block;
    position: absolute;
    top: 50px;
    width: 35%;
    text-align: left;
  }
  .linksContainerDigital,
  .linksContainerRetail {
    margin: 0 auto;
  }
  .versionButton {
    margin: 5px auto;
    max-width: 250px;
    width: 100%;
  }
}
/*Purchase Modal for Links*/
.retailModal {
  background-color: rgba(0, 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: rgb(207, 127, 7);
  background: linear-gradient(
    360deg,
    rgba(207, 127, 7, 1) 0%,
    rgba(253, 224, 142, 1) 30%,
    rgba(154, 97, 1, 1) 79%,
    rgba(254, 241, 204, 1) 100%
  );
  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%;
  }
}
/*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: 1200px;
  padding: 25px 0;
  position: relative;
  text-align: center;
}
.logosGroup img {
  margin: 10px;
  max-height: 72px;
}
.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;
}
@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(-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, 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: 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);
}
.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: rgb(207, 127, 7);
  background: linear-gradient(
    360deg,
    rgba(207, 127, 7, 1) 0%,
    rgba(253, 224, 142, 1) 30%,
    rgba(154, 97, 1, 1) 79%,
    rgba(254, 241, 204, 1) 100%
  );
  margin: 10px auto 0;
  height: auto;
  padding: 12px 24px;
  color: #000;
  text-transform: uppercase;
  width: 100%;
}
#mc_embed_signup .button:disabled {
  opacity: 0.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 0.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 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 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 0.75%;
  position: relative;
  width: 30%;
}
/*this makes original select disappear*/
.selectContainer select {
  display: none;
}
.select-selected {
  /*	background-color: #ffcd0d;*/
  background: rgb(207, 127, 7);
  background: linear-gradient(
    360deg,
    rgba(207, 127, 7, 1) 0%,
    rgba(253, 224, 142, 1) 30%,
    rgba(154, 97, 1, 1) 79%,
    rgba(254, 241, 204, 1) 100%
  );
}
/*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 {
  background: rgb(207, 127, 7);
  background: linear-gradient(
    360deg,
    rgba(207, 127, 7, 1) 0%,
    rgba(253, 224, 142, 1) 30%,
    rgba(154, 97, 1, 1) 79%,
    rgba(254, 241, 204, 1) 100%
  );
  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: rgb(207, 127, 7);
  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: rgb(207, 127, 7) !important;
  background: linear-gradient(
    360deg,
    rgba(207, 127, 7, 1) 0%,
    rgba(253, 224, 142, 1) 30%,
    rgba(154, 97, 1, 1) 79%,
    rgba(254, 241, 204, 1) 100%
  ) !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: 0.7;
}