@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;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;font-size:10px;}
/* Reset END */


/*Loader*/
.preloader{display:block;position:fixed;top:0;left:0;width:100vw; height:100vh; background:#FFF url(../img/common/preload-bg.jpg) center center no-repeat; background-size:cover; justify-content:center;z-index:99999;}
.preloader-container{display:block;position:relative;width:100%;height:100%;text-align:center;}
.preloader-logo,.preloader-logo-es{width:200px;height:auto;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:none;}
:is(body.us,body.au,body.uk,body.fr,body.it,body.de) .preloader-logo{display:block;}
body.es .preloader-logo-es{display:block;}

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;}
.body-container{margin:0 auto;position:relative;width:100%}
.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:18px}
h4{font-family:acumin-pro-condensed,sans-serif;font-weight:700;font-size:20px;letter-spacing:1.5px}
h4.mainTitle{font-family:garamond-premier-pro,serif;font-weight:700;font-size:20px;letter-spacing:1.5px}
h3{font-family:acumin-pro-condensed,sans-serif;font-size:20px;font-weight:600;font-style:italic;line-height:1.25;text-transform:uppercase;}
h3.mainTitle{font-family:garamond-premier-pro,serif;font-size:20px;font-weight:600;font-style:italic;line-height:1.25}
h2{font-family:swear-text,serif;font-weight:700;font-size:30px;color:#ffc900;text-align:center;letter-spacing:1.85px;line-height:1;margin-bottom:40px;position:relative;text-shadow:3px 3px #000;text-transform:uppercase;z-index:1}
h2.mainTitle{text-align:center;font-family:garamond-premier-pro,serif;font-weight:700;font-size:5vw;letter-spacing:1.85px;line-height:1;margin-bottom:40px;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,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:16px}
.font-bold{font-weight:700}
.font-black{font-weight:800}
.italic{font-style:italic}
.section-container{position:relative;display:block;margin:0 auto;width:90%;max-width:1280px;height:100%;}
.button-style{background-color:#ffc900;border:2px solid #000;color:#000;cursor:pointer;display:inline-block;margin:5px;padding:10px 30px;text-transform:uppercase;white-space:nowrap;width:250px}
.container-inline{position:relative;text-align:center;}
.container-inline:before{content:' ';width:0;height:100%;visibility:hidden;display:inline-block;vertical-align:middle}
/* Common Default styles */
.show-mobile{display:block}
.show-desktop{display:none}

.character-background{position:absolute;background-size:cover}
.character-background img{width:100%;height:auto;}
@media screen and (min-width: 768px) {
	body{font-size:18px}
	h3{font-size:24px}
	h2{font-size:60px}
	h1{font-size:40px}
	p{font-size:16px}
}
@media screen and (min-width: 1024px){
	h2.mainTitle{text-align:left;text-shadow:-5px 5px rgba(0,0,0,.35)}
}
@media screen and (min-width:1366px){

}
@media screen and (min-width:1440px){
	/* h4{font-size:25.25px} */
	h3{font-size:26px}
	h2{font-size:80px}
	h2.mainTitle{font-size:60px}
	h1{font-size:80px;text-transform:uppercase}
	p{font-size:18px}
}
@media screen and (min-width:1920px){

}

/*Nav*/
.navbar{position:relative;width:100%;background:#000}
.navArea{position:relative;transition:top .3s}
.navContainer{margin:0 auto;width:100%;max-width:2560px;position:relative}
nav{width:100%}
button.hamburger{border:none;display:block;position:fixed;top:8px;z-index:30}
nav{background-size:contain;padding-bottom:20px;font-size:0;list-style:none;position:relative;width:100%;z-index:1}
.navBtn h5{text-shadow:0 0 5px #000;text-transform:uppercase;text-align:center;}
.logo{display:block;height:75px;margin:10px auto;}
.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*/
nav.transition .nav-container{color:#FFF;position:relative;width:100%;max-width:250px;margin:0 auto}
.nav-container div{max-width:250px;margin:0 auto;padding:10px;background-color:transparent;border-bottom:1px solid rgba(255,255,255,.75);display:block;text-align:center;text-transform:uppercase}
.nav-container div:first-child{width:150px;border:none;display:block;margin:0 auto;}
.nav-container div:nth-child(2){border-top:1px solid rgba(255,255,255,.75);}
.nav-container div a{display:inline-block;outline:none;text-decoration:none}
.nav-container div a h5{padding:2% 0}
.noFlag{display:none!important}
.purchaseNavBtn,.newsletterNavBtn{text-align:center;width:250px;background-color:#ffc900;border:2px solid #000;color:#000;cursor:pointer;display:block;margin:10px auto;padding:10px;text-transform:uppercase;white-space:nowrap}
#purchaseTopNav{width:250px;display:block;margin:20px auto 0;}
.openNewsletter{display:block;color:#000}

.fixed-nav{position:fixed;z-index:9999;background:#000}
.view-nav{opacity:1;visibility:visible;margin-top:0;z-index:30!important}
.hide-nav{opacity:0;visibility:hidden;margin-top:-100vh;position:fixed}
.transition{transition:all 0.5s ease;}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before{box-shadow:0px 0px 3px #000;}

/*combined with app.js this allows you to create sticky nav*/
.navStick{background-color: rgb(0, 0, 0);position:fixed;top:-80px;width:100%;z-index:12;}

@media screen and (orientation:landscape){
	nav.transition .nav-container{max-width:100%;text-align:center;}
	.nav-container div{border:none;display:inline-block;margin-right:20px;}
	.nav-container div:nth-child(2){border:none;}
}

@media screen and (min-width: 940px) {
	button.hamburger,.hamMenuTitle,.ps4MenuLogo,.hamUL > a .social_icon,.navSm{display:none}
	nav{padding:0;background:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)}
	nav.transition .nav-container{margin:0 auto;width:100%;max-width:2560px;text-align:unset;}
	.nav-container div{border:none!important;display:inline-block;margin:0 10px;vertical-align:middle}
	.nav-container div:first-child{display:inline-block;}
	.logo{display:inline-block;height:65px;margin:0}
	.purchaseNavBtn,#purchaseTopNav{display:none}
	.newsletterNavBtn{position:absolute;right:70px;top:50%;transform:translateY(-50%);margin:0}
	
}
/*END NAV*/

/*Flags*/
.noFlag {display:none;}
#selected-country{margin-bottom:15px;cursor:pointer}
#country-navigation-wrapper{width:50px;position:absolute;top:10px;right:10px;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;}
@media screen and (min-width:940px){
	#country-navigation-wrapper{top:calc(50% - 17.5px);}
}
/* END Flags */


/* Hero */
.hero{position:relative;width:100%;height:80vh;min-height:800px;}
.hero:before{background:rgba(0,0,0,0.55);content:'';height:100%;position:absolute;width:100%;}
.hero-bg{height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%;z-index:-1}
.hero-img{height:100%;left:-2%;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%;z-index:-1}
.hero-esrb{bottom:10px;height:72px;left:10px;margin:0 auto;position:absolute}
.hero-esrb-img{height:100%}
.hero-content{left:50%;top:50%;position:absolute;text-align:center;transform:translate(-50%,-50%);width:100%;max-width:1280px;height:80%;}
.hero-content img{width:100%}
.hero-cta{position:absolute;bottom:40px;width:100%}
.hero-content h4{margin:8px auto;font-size:36px;text-shadow:0 0 10px #000;text-transform:uppercase;line-height:45px}
.hero-btn-container .button-style{width:275px;}
.hero-btn-outline{background-color:rgba(0,0,0,.5);color:#FFF;text-shadow:0 0 5px #000}
@media screen and (min-width:768px){
	.hero-content{width:75%;}
	.hero-content h4{font-size:48px;}
	.hero-content img{width:80%;}
	.hero-date .hidden-break{display:none;}
}
@media screen and (min-width:1024px){
	.hero-content img{width:75%;}
}
@media screen and (min-width:1280px){
	.hero-content img{width:65%}
}
@media screen and (min-width:1440px){
	.hero-content img{width:60%;}
}
/* END Hero */

/* Media */
.media{position:relative;width:100%;padding:5vw 0;background-image:url(../img/media/bg.jpg);background-repeat:no-repeat;background-size:cover;background-position:center center;overflow:hidden;border-top:solid 3px #ffc900;border-bottom: solid 3px #ffc900}
.media:before{content:" ";position:absolute;z-index:10;width:100%;height:4px;top:0;border-bottom:solid 1px #ffc900}
.media:after{content:" ";position:absolute;z-index:10;width:100%;height:4px;bottom:0;border-top:solid 1px #ffc900}
.media-title{position:relative;display:block;margin:0 auto 20px;max-width:1290px;width:100%;background:url(../img/common/brush-stroke.svg) center top no-repeat,url(../img/common/brush-stroke2.svg) center bottom no-repeat;}
.media-text{position:relative;display:block;margin:0 auto 20px;max-width:1024px;color:#000;font-weight:700;text-align:center;text-transform:uppercase;z-index:1;text-shadow:0 0 2px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 15px #FFF,0 0 20px #FFF}
.media-slider{margin:0 auto;max-width:1920px;width:100%;position:relative;text-align:center;}
.media-next,.media-prev{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%}
.media-next{right:0}
.media-prev{left:0;z-index:1}
.mediaImg{width:100%}
.carousel-video{height:auto;-o-object-fit:cover;object-fit:cover;width:100%}
.media-carousel-slides{position:relative;width:83%;margin:0 auto}
.play-button{opacity:.75;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px}
.esrbTrailer{height:72px;position:absolute;bottom:15px;right:15px}
@media screen and (min-width: 640px) {
	.trailerCarousel{width:95%}
	.trailerNext{right:-15px}
	.trailerPrev{left:-15px}
}
@media screen and (min-width:900px) {
	
	.trailerContainer{width:80%}
}
@media screen and (min-width:480px){

}
@media screen and (min-width:768px){
	.media-next{right:-20px}
	.media-prev{left:-20px}
}
@media screen and (min-width:1024px){
	.media{padding-bottom:5vw}
	.media-title .hidden-break{display:none;}
	.trailer-next{right:-23px}
	.trailer-prev{left:-23px}
}
@media screen and (min-width:1280px){
	
}
@media screen and (min-width:1366px){

}
@media screen and (min-width:1440px){

}
@media screen and (min-width:1600px){
	.media .character-background{background:url(../img/characters/full-tanjiro.png) no-repeat;background-size:cover;width:275%;top:-25%;right:-160%}
}
@media screen and (min-width:1920px){

}
/* END Media */

/* Features */
.features{position:relative;padding:5vw 0;background:url(../img/features/blue-bg.jpg) repeat center center;background-size:150px auto;overflow:hidden;}
.features-main{position:relative;width:100%;margin:0 auto;z-index:1}
.features-title{padding:0 60px;display:table;margin-left:50%;margin-bottom:40px;transform:translateX(-50%);background:url(../img/common/brush-stroke2.svg) left center no-repeat;background-size:100%}
.features-main img{border:3px solid #FFF;box-shadow:4px 4px #000;margin:0 auto;vertical-align:top;width:100%}
.features-main .show-mobile{width:100%;display:block;margin-bottom:40px;}
.features-main .show-desktop{width:calc(60% - 3px);display:none}
.features-text{display:inline-block;vertical-align:top}
.features-text p{padding:20px;background:rgba(0,0,0,.65);}
.features h3.main-title{font-size:3vw;margin-bottom:20px;text-align:center;}
#story-content div{display:inline-block;vertical-align:middle}
.features-details{position:relative;color:#FFF;text-shadow:3px 3px 0px #000;font-weight:600;margin:40px auto 0;max-width:1280px;position:relative;text-align:center;z-index:1}
.featuresSiema{display:block;}
.feature-card {position:relative;display:inline-block;width:80vw;max-width:400px;height:350px;background:url(../img/features/bg-card-01.jpg) center top;background-size:cover;background-repeat:no-repeat;background-size:cover;overflow:hidden}
.feature-card > div{margin:0 auto;padding:20px 0;width:90%;height:100%;display:table}
body.it .feature-card,body.fr .feature-card,bpdy{height:350px}
div.features-row{display:table-row;width:100%;height:50%}
div.features-row.show-desktop{display:none}
div.features-row.show-mobile{display:table-row}
div.features-cell{display:table-cell;width:100%;height:100%}
.feature-info h3{margin-bottom:10px;}
.feature-info p{line-height:18px;font-weight:400}
.feature-image img{border:3px solid #FFF;box-shadow:4px 4px #000;position:relative;width:100%}
.smallFeaturesContainer{color:#000;text-shadow:0 0 1px white,0 0 5px white,0 0 10px white,0 0 15px white,0 0 20px #fff;font-weight:600;margin:50px auto 0;max-width:750px;position:relative;text-align:center}
.features-next,.features-prev{display:block;position:absolute;top:50%;transform:translateY(-50%);width:30px;cursor:pointer;}
.features-next{right:0}
.features-prev{left:0;z-index:1}
@media screen and (min-width: 400px) {
	.featuresNext,.featuresPrev{top:50%;transform:translate(0,-50%)}
	.story h3{margin-bottom:0}
}
@media screen and (min-width: 640px) {	
	body.fr .smallFeatureGroup{height:550px;}
}
@media screen and (min-width: 768px) {
	.featuresNext{right:-15px}
	.featuresPrev{left:-15px}
	.feature-card{height:375px;width:300px;}
}
@media screen and (min-width: 800px) {
	.featuresNext{right:-25px}
	.featuresPrev{left:-25px}
}
@media screen and (min-width: 1024px) {
	.features-main{display:flex;justify-content:space-between;}
	.feature-mobile-content{width:37%}
	.features-title{margin-left:-60px;transform:none;}
	.feature-card{height:340px;width:330px}
	body.it .feature-card,body.fr .feature-card{height:365px;}
	body.de .feature-card{height:350px;}
	body.es .feature-card{height:375px;}
	.features-main .show-mobile{display:none;}
	.features-main .show-desktop{display:block;}
}
@media screen and (min-width: 1230px){
	.features-next,.features-prev{display:none;}
	.featuresSiema{display:flex;justify-content:space-between;}
}
@media screen and (min-width: 1280px) {
	.features-details{width:100%}
	#feature-2{background-image:url(../img/features/bg-card-02.jpg);}
	div.features-row.show-desktop{display:table-row;}
	div.features-row.show-mobile{display:none;}
	
}
@media screen and (min-width: 1400px) {
	.feature-card{height:375px;width:575px}
	body.es .feature-card, body.de .feature-card{height:400px;}
	body.fr .smallFeatureGroup{height:590px}
}
@media screen and (min-width:1600px){
	.character-background#background-nezuko{background:url(../img/characters/full-nezuko.png) no-repeat;width:200%;background-size:contain;top:-45%;left:-100%}
	.character-background#background-zenitsu{background:url(../img/characters/full-zenitsu.png) no-repeat;width:200%;background-size:contain;bottom:-125%;right:-113%}
}
@media screen and (min-width: 1920px) {
	body.fr .smallFeatureGroup{height:590px;}
}
/* END Features */

/* Characters */
.characters{position:relative;padding:5vw 0;background-image:url(../img/characters/bg.jpg);background-repeat:no-repeat;background-size:cover;background-position:center center;overflow:hidden;text-align:center;border-top:solid 3px #ffc900;border-bottom: solid 3px #ffc900}
.characters:before{content:" ";position:absolute;top:0;left:0;width:100%;height:4px;border-bottom: solid 1px #ffc900}
.characters:after{content:" ";position:absolute;bottom:0;left:0;width:100%;height:4px;border-top:solid 1px #ffc900;}
.characters-main{display:inline-block;width:100%;max-width:1280px;margin:0 auto;text-align:center;vertical-align:top}
.character-title{padding:0 60px;display:table;margin-left:50%;margin-bottom:40px;transform:translateX(-50%);background:url(../img/common/brush-stroke.svg) left center no-repeat;background-size:100%}
.character-thumbs{position:relative;display:inline-block;margin:0 auto 20px;text-align:center;width:100%;}
.character-thumbs li{width:100px;display:inline-block;max-width:100px;margin-right:20px;margin-bottom:20px;box-shadow: 4px 4px 0 #000;cursor:pointer;}
.character-thumbs li img{width:100%;border:solid 3px #FFF}
.character-thumbs li img.character-active,.character-thumbs li img:hover{border-color:#ffc900}
.characterSelector,.character-text{margin:15px auto 0;width:100%;color:#000;text-shadow:0 0 1px white,0 0 5px white,0 0 10px white,0 0 15px white,0 0 20px #fff;font-weight: 600;}
.character-text{margin:0 auto;max-width:1200px;}
.character-text h3{text-transform:uppercase;font-weight:800;text-align:left;margin-bottom:20px}
.character-text .character-description{text-align:left;}
.characterSelector li{display:inline-block;margin:0 10px 10px 0;width:16%}
.characterSelector li:hover{box-shadow:-5px -5px 0 #000;cursor:pointer}
.character-image{position:relative;display:inline-block;margin-bottom:40px;}
.character-image-swap{width:calc(100% - 10px);height:auto;position:absolute;top:5px;left:5px}
.character-frame-background{width:100%;height:auto;border: solid 5px #ffc900}
.character-fancybox:before{content:url(../img/common/zoom.svg);width:56px;position:absolute;bottom:-5px;right:5px;z-index:10}

@media screen and (min-width: 1024px) {
	.characters-container{display:flex;justify-content:space-between;}
	.characters-main{width:50%}
	.character-title{margin-left:-60px;transform:none;}
	.characters-info{width:50%}
	.character-thumbs{text-align:left;}
}

/* END Characters */

/* Purchase */
.comingSoon{cursor:default;position:relative;}
.comingSoon:before{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background:rgba(0,0,0,0.25)}
.comingSoon .purchaseButton{opacity:0.65}
.retailBonusTable .preorderIncentive {display: none!important;}
/* General Purchase */
.purchase{position:relative;padding:5vw 0;background:url(../img/purchase/blue-bg.jpg) left top repeat;background-size:150px auto;min-height:1075px;overflow:hidden;text-transform:uppercase;}
.purchase h2{padding:0 60px;display:table;margin-left:50%;margin-bottom:40px;transform:translateX(-50%);background:url(../img/common/brush-stroke.svg) left center no-repeat;background-size:100%;white-space:nowrap;}
.purchase h3{text-align:center;text-transform:uppercase;margin:10px auto}
body.de .purchase h3{font-size:16px;}
.purchase p{font-weight:600}
body.de .purchase p{font-size:13px;}
.digitalInfoTable,.digitalBonusTable,.retailInfoTable,.retailBonusTable{display:table;width:100%;max-width:1280px;margin:0 auto}
.digitalLarge .digitalRow,.digitalSmall .digitalRow,.retailTable .retailRow{display:table-row;width:100%}
.digitalLarge .digitalRow > div,.digitalSmall .digitalRow > div,.retailTable .retailRow > div{display:table-cell;border:1px solid #000;text-align:center;width:22%;vertical-align:middle}
.digitalRow > div:first-child,.retailRow > div:first-child{width:34%;text-align:left}
.digitalLarge #deluxeInfo .digitalVersion,#gridRetailDesktop .retailRow .retailVersion{vertical-align:bottom}
h3:is(.platformTitle,.versionTitle){text-shadow:0 0 1px #000, 0 0 5px #000, 0 0 10px #000, 0 0 15px #000}
.consoleButton,.editionButton,.versionButton{background-color:rgba(0,0,0,.65);border:2px solid #ffc900;color:#FFF;cursor:pointer;display:inline-block;font-size:18px;margin:5px 10px 5px 0;max-width:190px;padding:15px 8px;width:46%;text-align:center;vertical-align:top}
h3:is(.consoleButton,.editionButton,.versionButton){font-style:normal;margin:5px 10px 5px 0;text-align:center!important}
.consoleButton:hover,.editionButton:hover,.versionButton:hover{background-color:#ffc900;color:#000}
h3:is(.consoleActive,.editionActive,.versionActive){font-weight:800;background-color:#ffc900;color:#000}
.purchaseGroup{position:relative;max-width:1280px;padding:30px 0;text-align:left;width:100%}
.retailContainer{width:100%;display:block;text-align:center;position:relative;margin: 20px auto}
.retailContainer:before{width:0;height:100%;visibility:hidden;content:'';display:inline-block}
.retailLinks{width:100%;display:inline-block;vertical-align:middle}
.purchaseButtonsGroup,.versionButtonsGroupSmall{width:100%}
.versionButtonsGroupSmall{display:block}
.versionButtonsGroupLarge{display:none}
.retailContainer .purchaseButton,.retailFancybox.fancybox-content .purchaseButton{height:50px;display:inline-block;font-size:18px;}
.consoleButtonsContainer,.editionsButtonsContainer,.versionButtonsContainer{position:relative;width:100%;text-align:center;}
.consoleButtonContainer{text-align:center}
div:is(.retailBonusBtn,.retailStandardBtn){display:block;height:50px;position:relative;margin:15px auto;width:90%;max-width:350px;}
.purchaseButton{background-color:#ffc900;display:inline-block;color:#000;padding:0px 5px;text-align:center;text-transform:uppercase;width:100%;position:relative}
.vendors .purchaseButton{max-width:200px;}
.purchaseButton:before{content:'';display:inline-block;width:0;height:100%;vertical-align:middle;}
.purchaseButton span{display:inline-block;vertical-align:middle;line-height:16px;}
.hideArea{display:none}
.hideRow{display:none!important;}

/* Purchase Desktop Grid */
#gridRetailDesktop{display:none}
.preorderIncentive h3{font-family:swear-text,serif;font-style: normal;font-weight:700}
.retailTable .purchaseButton {background-color:#8a0303;color:#FFF;border:3px solid #FFc900;}
.retailTable .purchaseButton:hover {background-color:#FFc900;color: #000;border: 3px solid #8a0303;line-height: 34px;}
.retailBonusTable{background:#000;color:#000;border:2px solid #000}
.retailBonusTable .retailRow {background-color:#FFF;}
.retailBonusTable .preorderIncentive{background:#ffc900}
.retailBonusTable .retailRow > div{padding:10px 20px}
.digitalRow div.itemIncluded{padding:0;vertical-align:middle}
.retailInfoTable .retailRow > div{border:none;}
.imgContainerRetail{width:90%;max-width:480px;text-align:center;margin:0 auto;background:#ffc900;color:#000;border-bottom:3px solid rgba(0,0,0,0)}
.imgContainerRetail img{width:calc(100% - 6px)!important}
.imgContainerRetail h4{text-transform:uppercase;font-size:18px;font-weight:700;text-shadow:0 0 5px #FFF}
img.checkmark{width:40px;padding:3px}
.steamTable .retailRow > div{width:22%;}
.steamTable .retailRow > div:first-child{width:56%;}
.steamTable .retailRow > div:last-child,.steamTable .retailRow > div:last-child{display:none;}
.steamTable .preorderDigital p{display:none}
.switchTable .retailRow>div {
	width: 22%;
}

.switchTable .retailRow>div:first-child {
	width: 56%;
}

.switchTable .retailRow>div:nth-child(3) {
	display: none;
}

/* Purchase links Mobile */
.mobile-purchase-carousel,.mobile-steam-carousel{position:relative;}
.purchasePrev,.purchaseNext,.steamPrev,.steamNext{width:25px!important;position:absolute;top:45%;z-index:1;}
.purchaseNext,.steamNext{right:-5px}
.purchasePrev,.steamPrev{left:-5px}

/* Retail Modal Styles */
.vendors{text-align:center;border:solid 2px #ffc900;background:rgba(56, 56, 115, 0.5);position:relative;display:inline-block;width:100%;margin-bottom:40px}
.retailerText{display:table;padding:0 20px;text-align:center!important;background:transparent;background:#202073;background:linear-gradient(90deg,rgba(32,32,115,0) 0%,rgba(32,32,115,1) 10%,rgba(32,32,115,1) 50%,rgba(32,32,115,1) 90%,rgba(255,255,255,0) 100%);position:relative;top:0;transform:translateY(-50%);text-align:center;text-shadow:2px 2px #000,-2px 2px #000,2px -2px #000,-2px -2px #000;text-transform:uppercase}
.retailGlamshot{width:100%;margin:0 auto;display:inline-block;vertical-align:middle;}
.retailGlamshot img{width:100%;height:auto}
#glamshot-desktop-modal{display:none;}
#glamshot-mobile-modal{display:block;width:80%;margin-bottom:40px;position:relative}
#logo-desktop-modal{position:absolute;width:25%;top:25%;left:25%;transform:translate(-50%,-50%);}
.retailFancybox.fancybox-content{background:url(../img/fancybox/blue-bg.jpg) left top repeat;background-size:150px auto;}

@media screen and (min-width: 640px) {
	.vendors{text-align:center;padding-bottom:20px;}
	.retailFancybox.fancybox-content .purchaseButton{display:inline-block;margin:10px}
}
@media screen and (min-width: 900px) {
	.purchase h3{text-align:left;}
	.consoleButtonsContainer,.editionsButtonsContainer,.versionButtonsContainer {text-align:left;}
	#gridRetailDesktop{display:block}
	#gridRetailMobile,#gridSteamMobile{display:none}
	.consoleButtonContainer{text-align:left}
}
@media screen and (min-width: 1024px) {
	.retailButtons{width:35%}
	.purchase{min-height:1000px}
	.purchase h2{margin-left:-60px;transform:none;}
	.editionTextGroup{display:inline-block;text-align:left;vertical-align:bottom;width:30%}
	.linksContainerDigital,.linksContainerRetail{margin:0 auto}
	.versionButton{margin:5px 10px 5px 0;max-width:250px;width:100%}
}
@media screen and (min-width:1048px){
	#glamshot-mobile-modal{display:none;}
	#glamshot-desktop-modal{display:block;}
	.retailLinks{position:absolute;width:40%;top:75%;left:25%;transform:translate(-50%,-50%);}
}
@media screen and (min-width:1048px) and (max-width:1140px){
	body.uk #logo-desktop-modal{display:none}
	body.uk .fancybox-container .retailLinks{top:50%}
}
@media screen and (min-width: 1600px) {
	.purchase .character-background#inosuke{position:absolute;background:url(../img/characters/full-inosuke.png) left top no-repeat;background-size:contain;width:200%;top:0;left:-125%;transform:translateY(-10%);}
}
/* END Purchase */

/* NEWS */
.news{width:100%;position:relative;background:#262626;border-top:3px solid #ffc900;border-bottom:3px solid #ffc900;padding:5vw 0;}
.news:before{content:" ";position:absolute;top:0;left:0;width:100%;height:4px;border-bottom:1px solid #ffc900;}
.news:after{content:" ";position:absolute;bottom:0;left:0;width:100%;height:4px;border-top:1px solid #ffc900;}
.news h2{padding:0 60px;display:table;margin-left:50%;margin-bottom:40px;transform:translateX(-50%);background:url(../img/common/brush-stroke2.svg) left center no-repeat;background-size:100%;white-space:nowrap;}
.news .news-container{width:100%;position:relative;height:auto;max-height:450px;overflow-y:auto;}
.news .news-container p{padding:20px 10px;border-top:2px solid #ffc900;}
.news .news-container p:last-child{border-bottom:2px solid #ffc900;}
@media screen and (min-width:1024px){
	.news h2{margin-left:-60px;transform:none;}
}
/* End NEWS */

/* Footer */
footer{background-color:#262626}
.topBarFooter{margin:0 auto;max-width:1024px;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:block;margin:0 auto;max-width:320px;text-align:center;height:auto;}
.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{font-size:16px;background-color:#FFF;display:inline-block;color:#000;cursor:pointer;margin:20px auto 0;max-width:275px;text-align:center;text-transform:uppercase;width:100%}
.newsletterButton a{padding:10.5px 0;}
.logosGroup{margin:0 auto;max-width:1200px;padding:25px 0;position:relative;text-align:center}
.logosGroup img{margin:10px;height:50px;}
.logosGroup .rggstudioLogo{height:90px}
.logosGroup .psLogo {height:40px;}
.logosGroup .switchLogo {height:40px;}
.logosGroup .ratingsIcon,.logosGroup #usk{height:90px}
.logosGroup .esrbCert{height:90px}
body.us .logosGroup .ratingsIcon{border : 1px solid #FFF;}
.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}
@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{position:absolute;top:50%;left:50%;height:auto;transform:translate(-50%,-50%);}
	.socialIcons li{max-width:45px}
	.newsletterGroup{height:45px;left:72%;position:absolute;top:15px;width:26%}
	.newsletterButton{margin:0 auto;width:100%;font-size:16px}
}
/* END Footer */

/* Newsletter */
.newsletterModal{position:relative;display:block;background:url(../img/features/bg-card-02.jpg) center center no-repeat;background-size:cover;z-index:30;width:600px;max-width:600px;}
.newsletterHeader img{display:block;margin:0 auto;width:60%}
.newsletterHeaderText{display:block;width:90%;margin:0 auto;text-align:center}
.newsletterHeaderText h3{font-size:36px}
.newsletterHeaderText h4{font-size:16px}
.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:#000;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}
#newsletterAgeGate{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:url(../img/fancybox/blue-bg.jpg) left top repeat;background-size:150px;z-index:10}
#mc_embed_signup{background:url(../img/fancybox/blue-bg.jpg) center top repeat;background-size:125px auto;border-top:3px solid #ffc900;border-bottom:3px solid #ffc900;margin:0 auto;max-width:600px;padding:40px 20px;position:relative;width:95%;display:none;}
#mc_embed_signup:before{content:' ';width:100%;height:4px;position:absolute;left:0;top:0;border-bottom: 1px solid #ffc900;}
#mc_embed_signup:after{content:' ';width:100%;height:4px;position:absolute;left:0;bottom:0;border-top: 1px solid #ffc900;}
#mc_embed_signup .ageGateContainer{background:none;}
.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;-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{display:inline-block;vertical-align:middle;height:auto;width:calc(20% - 21px);margin-right:20px;}
#mc-platform-selection ul li:last-child{margin-right:0}
img.newsletter_platform{width:100%;height:auto;opacity:0.5}
#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-color:#ffc900!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}
#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: 768px) {
	.newsletterHeaderText h3{font-size:60px}
	.newsletterHeaderText h4{font-size:27px}
}
/* END Newsletter */

/* Age Gate Modal - NOTE need the JS for this to work. */
.ageGateModal,.ageGateModalNoPass{display:none;}
.ageGateContainer{background:url(../img/fancybox/blue-bg.jpg) center top repeat;background-size:150px auto;border-top: 3px solid #ffc900;border-bottom: 3px solid #ffc900;max-width:800px;position:relative;text-align:center;width:95%}
.ageGateContainer:before{content:' ';display:block;position:absolute;width:100%;height:4px;left:0;top:0;border-bottom:1px solid #ffc900;}
.ageGateContainer:after{content:' ';display:block;position:absolute;width:100%;height:4px;left:0;bottom:0;border-top:1px solid #ffc900;}
.innerAgeGateGroup{padding:50px 0}
/* Newsletter Age Gate */
.newsletterAgeGateModal{display:none;}
.newsletterAgeGateModal .ageGateContainer{background:url(../img/fancybox/blue-bg.jpg) center top repeat;background-size:150px auto;border-top: 3px solid #ffc900;border-bottom: 3px solid #ffc900;width:75vw;max-width:800px;position:relative;text-align:center;transform:none;left:auto}
.fields{margin-top:20px}
.selectContainer{display:block;max-width:300px;margin:10px auto;position:relative;width:80%}
/*this makes original select disappear*/
.selectContainer select{display:none}
.select-selected{background-color:#ffc900}
/*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}
.select-selected.select-arrow-active:after{border-color:transparent transparent #000;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);cursor:pointer;font-weight:700;user-select:none}
.select-items{position:absolute;background-color:#ffc900;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:#ffc900!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}
@media screen and (min-width:768px){
	.selectContainer{display:inline-block;max-width:200px;margin:0 .75%;position:relative;width:30%}
}
/* END Age Gate Modal */

/* Override Styles */
.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%);}
.opacity0{opacity:0;}
.hidden {display: none;}
.hiddenImportant{display:none!important;}

/* CSS Animations */
@keyframes fadeOutZoom {
	from {opacity: 1;}
	to {opacity: 0;transform: translate(-50%,-50%) scale(2);}
  }
  
  .fadeOutZoom {
	animation-name: fadeOutZoom;
  }
  .animate__animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
  }

/* Internet Explorer Conditionals */

/* IE10+ CSS styles go here */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* Hero Section */
	.heroVideo{height:150%;width:150%;left:-25%;position:absolute;top:0;}
}

/* IE Edge 12+ CSS styles go here */ 
@supports (-ms-accelerator:true) {
	
  }
  /* Style overrides for Firefox 2 */
  html>/**/body #ccc .ccc-notify-button, x:-moz-any-link {
	margin:4px 10px 4px 0
  }

  /* Style overrides for Firefox 3 */
  html>/**/body #ccc .ccc-notify-button, x:-moz-any-link, x:default {
	margin:4px 10px 4px 0
  }

  /* Style overrrides for any Firefox */
  @-moz-document url-prefix() { 
	#ccc .ccc-notify-button{margin:4px 10px 4px 0!important}
  }