@charset "UTF-8";
/* CSS 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}
html{line-height:1}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
q,blockquote{quotes:none}
q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}
a img{border:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}

/* Common Styles */
html{position:relative;min-height:100%;height:auto;width:100%;}
body{position:relative;min-height:100%;height:auto;width:100%;overflow:hidden;font-family:"Helvetica Neue",Helvetica,Arial;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}
.container{position:relative;max-width:1900px;margin:0 auto}
.wrapper{width:1024px;position:relative;margin:auto}
.disp-none{display:none}
.clearfix:after{content:".";width:100%;display:block;height:0;font-size:0;clear:both;visibility:hidden}
main{display:block}
a{cursor:pointer;outline:0;color:inherit;text-decoration:none;text-transform: uppercase;font-family:futura-pt,system-ui,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;}
a:hover,a:focus{color:#FF0!important}
button:hover,button:focus{color:#FF0!important}
.font-futura {font-family: futura-pt,system-ui,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;}
.textStrokeDropShadow{text-shadow:0px -2px 0 #000,0px -2px 0 #000,0px  2px 0 #000,0px  2px 0 #000,-2px  0px 0 #000,2px  0px 0 #000,-2px  0px 0 #000,2px  0px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px  2px 0 #000,2px  2px 0 #000,-2px  3px 0 #000,2px  3px 0 #000,-1px  4px 0 #000,1px  4px 0 #000,0px  5px 0 #000,2px  5px 0 #000,1px  6px 0 #000,3px  6px 0 #000,0px 0px 15px rgba(255,255,255,0.5)}
.opacity-0{display:none;}
.hidden{display:none}
.inline-block{display:inline-block}
.noWrap{white-space:nowrap;}
.justify-center{text-align:center}
.fixed{position:fixed}
.h100{height:100%}
.w100{width:100%}
.w-11{width:2.75rem;}
.flex-col{flex-direction: column;}

/* Preloader */
#loader-bg{top:0;left:0;z-index:99999;color:#FFF;text-align:center}
#loader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#loader img{margin-bottom: 1rem;}
.curtain{background-color:#1c1c1c;position:fixed;height:100%;width:100%;top:0}
#curtain-left{right:50%}
#curtain-right{left:50%}

/* Header Styles */
header{height:110px;width:100%;background:#f64413;padding-top:10px;border-bottom:#fe7516 10px solid;position:relative;display:block;color:#FFF}
#home{height:100px;vertical-align:middle;position:relative;margin-left:20px;display:block}
#home:before{content: "";display: inline-block;vertical-align: middle;height: 100%;}
#home img{height:100%;width:auto}
#home #backToHome,#home #stickyNav{display:inline-block;vertical-align:middle}
header #stickyNav{z-index:9999;color:#FFF;font-family: futura-pt,system-ui,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:600;font-size:18px}
header #stickyNav a{text-decoration:none;color:#FFF;margin-left:3rem;}
.button-dropdown_container{position:relative;display:inline-block;padding-top:.75rem;padding-bottom:.75rem;}
.button-dropdown{display:inline-block;color:#FFF;background:transparent;padding:0;font-weight:600;box-shadow:none;cursor:pointer;text-transform:uppercase;text-decoration:none;-webkit-appearance:none;-moz-appearance:none;border:0;margin-left:3rem;outline:none;font-family:futura-pt,system-ui,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:18px}
.button-dropdown_chevron{pointer-events:none;height:1rem;fill:currentColor;vertical-align:middle;width:1rem;transition:all .1s linear;}
#DLC{margin-left:3rem;}
.button-dropdown--active .button-dropdown_chevron {transform: rotate(180deg);}
.button-dropdown_inner{position:absolute;-webkit-border-radius:.25rem;-moz-border-radius:.25rem;border-radius:.25rem;top:100%;background-color:rgba(15,15,15,.97);padding:1.5rem 3rem 2rem;display:none;z-index:9999}
.button-dropdown_inner--active{margin-top: 1rem;}
header #stickyNav .button-dropdown_inner a{color:#FFF;margin:0 0 1.5rem 0;text-transform: uppercase;font-weight:400;display:block;font-size:.875rem;}
header #stickyNav .button-dropdown_inner a:last-child{margin-bottom:0}
#preOrder-btn{border:#c03e21 solid 2px;border-radius:.125rem;font-size:16px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;padding:1rem 1.5rem;display:block;position:absolute;right:3rem;top:50%;transform:translateY(-50%);background-color:#fe7516;color:#FFF;font-family:futura-pt,system-ui,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;}
#preOrder-btn:hover{border-color:#FF0;background-color:#f64413;color:#FF0}
#home .mobile-menu_btn{height:2rem;width:2rem;fill:currentColor;position:absolute;top:50%;right:10%;display:none;transform:translateY(-50%);cursor:pointer}
#mobileNav{z-index:99999;position:fixed;width:100%;height:100%;top:-100vh;left:0;background-color:#1c1c1c;color: #fff;font-family: futura-pt,system-ui,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;}
#mobileNav .container{color:#FFF;max-width:600px;display:flex;align-items:center;margin:0 auto;padding:.75rem 1.5rem}
#mobileNav #closeMobile{cursor:pointer;margin-left:auto;}
.mobile-menu_btn{fill:currentColor;margin-left:auto;width:2rem;height:2rem;cursor:pointer;}
.nav-accordion_container{border-bottom:1px solid #3d4852;width:100%;color:#FFF}
.nav-accordion_dropdown{width:100%;color:#FFF;text-decoration:none;text-align:left;padding:1.5rem 0;font-weight:600;cursor:pointer;background:transparent;text-transform:uppercase;font-family:futura-pt,system-ui,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;outline:none;border:0;font-size:16px}
.nav-accordion_dropdown:hover,.nav-accordion_dropdown:focus{color:#f04e29}
.nav-accordion_dropdown--active .nav-accordion_chevron {transform: rotate(180deg);}
.nav-accordion_chevron{transition:all .1s linear;height:1rem;width:1rem;vertical-align:middle;fill:currentColor;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;border:0}
.nav-accordion_inner{padding:0 1.5rem 1.5rem;overflow:hidden;text-transform:uppercase;font-size:14px;display:none}
.nav-accordion_inner a{display:block;margin-bottom:1.5rem}
.nav-accordion_item:hover,.nav-accordion_item:focus{color:#f04e29}
#mobileDLC{padding:1.5rem 0;font-weight:600;border-bottom:#3d4852 1px solid;display:block;width:100%;outline:none}
#mobileDLC:hover,#mobileDLC:focus{color:#f04e29}
#mobilePreorder{background-color:#f04e29;margin-top: 1.5rem;border:#e44a27 2px solid;border-radius:.125rem;font-size:.75rem;font-weight:500;letter-spacing:.05em;padding:.75rem 0;text-align:center;width:100%}
#mobilePreorder:hover{background-color:#c03e21;}

/* Section Styles */
#main-content{width:100%;overflow-x:hidden}
#hero{width:100%;position:relative;display:block}
#game-logo{position:absolute;width:20%;top:1%;left:50%;transform:translateX(-50%);z-index:99}
#game-logo img{width:100%;height:auto}
#aoa-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-85%);z-index:100;width:30%}
#aoa-logo img{width:100%;height:auto}
#select-team{position:absolute;top:60%;left:50%;transform:translateX(-50%);z-index:1001;-webkit-border-radius:50px;border-radius:50px;padding:20px 2.5vw;font-family:ccbiffbamboom,sans-serif;font-weight:400;font-style:normal;font-size:2.5vw;background:#FF0;border:#000 3px solid;box-shadow:0 0 0 3px #ff7d00 inset, 3px 3px 0px #000;cursor:pointer}
#counter{position:absolute;bottom:-15%;left:50%;transform:translateX(-50%) rotate(-3deg);z-index:999;width:200%;height:19vw;background:url(../img/bg/filmstrip.jpg) center top repeat-x;background-size:auto 100%}
#counter-wrapper{max-width:1920px;width:80vw;position:absolute;top:0;left:50%;transform:translateX(-50%)}
#card-count{width:45.5%;max-width:871px;min-width:750px;position:absolute;top:0;left:50%;transform:translateX(-50%) rotate(3deg)}
/*NOTE THESE  STYLES CAN BE REMOVED IF TRAILER IS REMOVED THROUGH THE MEDIA QUERY*/
/*#card-count{width: 25.5%;  max-width: 871px; min-width: 650px; position: absolute;  top: 50%; left: 50%; transform: translate(-50%, 8%) rotate(3deg);}*/
#card-count a:before, #card-count a:after {content: "";
    display: block;
    height: 1.25rem;
    background-image: url("../img/trailer/film_perf-5ea3b2592e.png");
    background-repeat: space;
	background-color: #000;
}
.trailer img:hover {box-shadow: 0px 0px 35px white;}
/*@media screen and (min-width: 1650px) {
	#card-count{transform: translate(-50%, 35%) rotate(3deg);}
}*/


#card-count img{width:100%;height:auto}
#count{position:absolute;top:0;left:0;width:100%;height:100%;font-family:"peachy-keen-jf",sans-serif;color:#f64413;font-size:5vw}
#chara-chie{position:absolute;display:block;left:0;top:40px;transform:rotate(3deg);width:17%}
#chara-chie img{width:100%;height:auto}
#chara-ryuji{position:absolute;right:0;top:40px;transform:rotate(3deg);width:19%}
#chara-ryuji img{width:100%;height:auto}
#hero-bg{width:100%;position:relative;display:block}
#hero-bg img{width:100%;height:auto}
#information{width:100%;position:relative;background:url("../img/bg/section01.jpg") no-repeat center top;background-size:cover;padding:25vw 0 7vw}
#instructions{width:80%;position:relative;padding-bottom:60px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;margin:0 auto;background:#FFF;box-shadow:0 0 0 6px #f6490c inset, 0 0 0 7px #ff7d00;border: #ffff57 6px solid;background-color:#000;background-image:url("../img/bg/dot-pattern.png"),radial-gradient(circle at 10% 90%,#0a1dab,rgba(0,0,0,1) 35%,transparent 80%),radial-gradient(circle at 90% 10%,#0a1dab,rgba(0,0,0,1) 35%,transparent 80%)}
#instructions h2{width:100%;position:relative;text-align:center;font-family: peachy-keen-jf, sans-serif;color:#FFF;font-size:60px;padding:40px 0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
#instructionsList{position:relative;z-index:1}
#instructionsList ol{width:65%;margin:0 auto;font-family:ccbiffbamboom,sans-serif;color:#FFF;font-size:24px;line-height:normal;counter-reset:li;list-style-type:none}
#instructionsList li{position:relative;}
#instructionsList li:before{content:counter(li)'.';counter-increment:li;position:absolute;right:100%;margin-right:0.5em}
#chara-p3p{position:absolute;top:50%;right:0;width:25%;max-width:200px;transform:translateY(-50%);z-index:0}
#chara-p3p img{width:100%;height:auto}
footer{background:#000;padding:20px auto;color:#FFF}

.howToText {margin: 0 auto;display: block;padding: 10% 0;width: 90%;max-width: 1000px;position:relative;z-index:1}

@media screen and (min-width: 1000px) {
	.howToText {
		padding: 3% 0;
	}
}

/* Footer Styles */
.bg-grey-darkest{background-color:#3d4852;}
.footer-container{padding:4rem 1.5rem 1.5rem;width:100%;max-width:1280px;margin:0 auto;color:#8795a1;;line-height:1.15;font-family:futura-pt,system-ui,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}
.social-icons{margin-bottom:40px}
.social-icons li{display:inline-block;margin:0 0.5rem}
.corp-logos{vertical-align:middle;margin-bottom:1rem}
.corp-logos .icons{margin:0 1.25rem 1.5rem;display:inline-block;vertical-align:middle}
#esrb-rating{max-height:79px;width:auto}
#logo-atlus{max-height:62px;width:auto}
.legal{font-size:1rem;font-family:futura-pt,system-ui,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.25}

/* top button */
.top-btn{position:fixed;bottom:100px;right:0;z-index:9999;display:none}
#back-to-top{max-width:7vw;min-width:50px;height:auto}

/* Loading Modal */
.loading-modal{width:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;padding:40px}
.loading-bg{-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;margin:0 auto;box-shadow:0 0 0 6px #f6490c inset, 0 0 0 7px #ff7d00, 0 0 0 12px #000, 10px 10px 0 8px #000;border: #ffff57 6px solid;position:relative;max-width:1200px;width:80%;overflow:hidden;background:url("../img/common/loading_frame_bg.png") top left no-repeat;background-size:auto}
.loading-bg img{position:absolute;top:0;left:0;width:100%;height:auto;display:none}
.loading-bg img.loading-result-frame{display:block;position:relative;z-index:2;opacity:0}
.loading-pre-frame1{z-index:16}
.loading-pre-frame2{z-index:15}
.loading-pre-frame3{z-index:14}
.loading-frame1{z-index:13}
.loading-frame2{z-index:12}
.loading-frame3{z-index:11}
.loading-frame4{z-index:10}
.loading-frame5{z-index:9}
.loading-frame6{z-index:8}
.loading-frame7{z-index:7}
.loading-frame8{z-index:6}
.loading-frame9{z-index:5}
.loading-frame10{z-index:4}
.loading-frame11{z-index:3}
.btn-wrapper{position:relative;text-align:center;}
.btn-modal{font-family:ccbiffbamboom,sans-serif;color:#000;font-size:20px;-webkit-border-radius:50px;border-radius:50px;padding:20px 2.5vw;background:#FF0;border:#000 3px solid;box-shadow:0 0 0 3px #ff7d00 inset, 3px 3px 0px #000;text-decoration:none;display:inline-block;margin-top:20px}
.btn-wrapper a:hover,.btn-wrapper a:focus{color:#000!important}

/* Character Modal */
.selection-modal{position:relative;width:80%;max-height:none;height:auto;margin:0 auto;z-index:1;padding:40px}
.selection-modal h1{padding:20px 0 40px;text-align:center;font-family:"peachy-keen-jf",sans-serif;font-size:2.25vw;line-height:normal;color:#FFF;transform:rotate(-3deg) skewX(-4deg)}
.button-mix{font-family:ccbiffbamboom,sans-serif;color:#FFF;font-size:18px;padding:10px 20px;min-width:150px;-webkit-border-radius:50px;border-radius:50px;margin:10px;box-shadow:0 0 0 2px #f6490c inset, 0 0 20px rgba(0,0,0,0.5) inset, 0 0 0 3px #ff7d00;border: #ffff57 2px solid;outline:none;cursor:pointer}
.selection-modal .button-mix:hover,.selection-modal .button-mix:focus{color:#FFF!important}
.button-mix#p5-characters{background:#FF0000;}
.button-mix:disabled{opacity:.7;}
.button-mix#p4-characters{background:#eeee00;}
.button-mix#p3-characters{background:#0097ff;}
.button-mix#p3p-characters{background:#ff45f1;}
.button-mix#selected-characters{background:#00ff00;}
.button-mix#reset{background:#FF6347;}
.button-mix#all-characters{background:#000;color:#000;text-shadow:0px -2px 0 #FFF,0px -2px 0 #FFF,0px  2px 0 #FFF,0px  2px 0 #FFF,-2px  0px 0 #FFF,2px  0px 0 #FFF,-2px  0px 0 #FFF,2px  0px 0 #FFF,-2px -2px 0 #FFF,2px -2px 0 #FFF,-2px  2px 0 #FFF,2px  2px 0 #FFF,-2px  3px 0 #FFF,2px  3px 0 #FFF,-1px  4px 0 #FFF,1px  4px 0 #FFF,0px  5px 0 #FFF,2px  5px 0 #FFF,1px  6px 0 #FFF,3px  6px 0 #FFF,0px 0px 15px rgba(255,255,255,0.5)}
#character-mix{text-align:center;width:100%;padding:0 0 40px}
#character-mix button{display:inline-block;}
.character-container{-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;box-shadow:0 0 0 6px #f6490c inset, 0 0 0 7px #ff7d00;border: #ffff57 6px solid;background:#000 url("../img/bg/dot-pattern.png") center top repeat;position:relative;display:block;width:90%;height:80%;overflow-x:hidden;overflow-y:auto;margin:0 auto 60px;}
.character-container::-webkit-scrollbar{width:0!important}
.character-select{display:block;text-align:center;width:100%;padding:5vw 0}
.character-select div.mix{display:inline-block;position:relative;}
.character-select div.mix img{z-index:20;position:relative;cursor:pointer}
.character-select div.mix img.chara-thumb{position:absolute;top:-31.5px;left:-17px;z-index:20}
.character-select div.mix img.light-frame{position:relative;display:block;z-index:10;opacity:0;}
.character-select div.selected:before{content:" ";width:100%;height:100%;background:url("../img/characters/alt/chara_frame_selected.png") left top no-repeat;background-size:100% 100%;position:absolute;top:0;left:0;opacity: 0;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name:fadeIn;animation-name:fadeIn}
.character-select div.p5:after{content:" ";width:100%;height:100%;background:url("../img/characters/alt/chara_frame_p5.png") left top no-repeat;background-size:100% 100%;position:absolute;top:0;left:0;}
.character-select div.p4:after{content:" ";width:100%;height:100%;background:url("../img/characters/alt/chara_frame_p4.png") left top no-repeat;background-size:100% 100%;position:absolute;top:0;left:0;}
.character-select div.p3p:after{content:" ";width:100%;height:100%;background:url("../img/characters/alt/chara_frame_p3p.png") left top no-repeat;background-size:100% 100%;position:absolute;top:0;left:0;}
.character-select div.p3:after{content:" ";width:100%;height:100%;background:url("../img/characters/alt/chara_frame_p3.png") left top no-repeat;background-size:100% 100%;position:absolute;top:0;left:0;}
#generate{font-family:ccbiffbamboom,sans-serif;color:#FFF;text-align:center;width:400px;padding:10px 10px 14px;font-size:36px;-webkit-border-radius:50px;border-radius:50px;position:relative;margin:0 auto;background:#FFF;box-shadow:0 0 0 4px #f6490c inset, 0 0 20px rgba(0,0,0,0.5) inset, 0 0 0 6px #ff7d00;border: #ffff57 4px solid;display:none;cursor:pointer}

/* Modal Background */
#modal-wrapper{position:absolute;z-index:9999;background-color:#000;background-image:url("../img/bg/dot-pattern.png"),url("../img/bg/modal.jpg");background-size:auto,cover;background-position:top left,center;min-height:100vh;width:100%;top:0;left:0}
.exit{position:absolute;top:10px;right:10px;cursor:pointer;max-width:75px;width:5vw;min-width:50px;z-index:10}
.exit img{width:100%;height:auto;display:block;position:relative}

/* Canvas */
#preloadImages{}

/* animations */
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
 }
         
 @keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
 }
         
 .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
 }

/* Responsive */
@media screen and (max-width:1550px){
    #chara-p3p{right:-10%;width:20%}
}

@media screen and (max-width:1280px){
    #hero-bg{width:120%;margin-left:-10%}
    #game-logo{width:25%}
    #aoa-logo{width:40%}
    #information{padding-top:40vw}
    #counter-wrapper{width:90vw}
    .selection-modal h1{font-size:48px}
    #card-count{width:75%;min-width:auto;}
    #chara-chie{width:24%}
    #chara-ryuji{width:28%}
}

@media screen and (max-width:850px){
    #hero-bg{width:160%;margin-left:-30%}
    #game-logo{width:30%}
    #aoa-logo{width:55%}
    #counter-wrapper{width:100vw}
    #information{padding-top:50vw}
    .selection-modal h1{font-size:36px}
    #chara-p3p{right:-5%;width:25%}
}
@media screen and (max-width:800px){
    #home #stickyNav,#preOrder-btn{display:none}
    #home .mobile-menu_btn{display:block}
}