@charset "utf-8";
/* CSS Document */
/* 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-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* Common Page Styles */
*{position:relative}
html{font-family:"wigwag-bold",sans-serif;font-size:18px; letter-spacing:1px;min-width:100%;width:100%;height:100%}
body{ background-color:#000;min-width:100%;width:100%;height:100%;position:relative;color:#FFF;line-height:normal;overflow:hidden}
body .pre-load{width:100%;height:100%;background:#d6001c;z-index:99999;position:fixed;}
body .pre-load .i1{position:absolute;top:50%;left:50%;text-align:center;margin-left:-122px;margin-top:-63px}
body .pre-load .i1 img{margin:0 auto;}
ul,li,img,a{text-decoration:none;outline:none;border:none;line-height:normal}
span{text-indent: 100%;white-space: nowrap;overflow: hidden;}
.desktop{display:block}
.tablet{display:none}
.info-desk{display:block}
.info-tab{display:none}
#page-top{position:absolute;z-index:9999;width:100%}
#page-top img{width:100%;height:auto}
.container{width:100%;height:auto;overflow:hidden}
#header-console{position:absolute;top:5px;left:5%;z-index:10000}
div.nav #nav-bg-top{position:absolute;width:100%;z-index:999}
div.nav #nav-bg-top img{width:100%;height:auto}
div.nav{position:fixed;width:35%;z-index:99995;left:2%;top:5%;padding-bottom:1.4%}
div.nav #menu-btn-container{background:url(../img/common/menu_exit.png) left top no-repeat;background-size:30% auto;display:block;width:100%;z-index:99999;opacity:0}
div.nav #menu-btn{width:30%;height:auto;cursor:pointer}
div.nav #home-btn{width:20%;height:auto;cursor:pointer}
div.nav.active ul{display:block;height:auto;width:85%;margin:0 auto;text-align:center;z-index:99995}
div.nav.hidden-menu ul.hide{height:0;-moz-transition:opacity 0.75s,z-index 0s 1s;-o-transition:opacity 0.75s,z-index 0s 1s;-webkit-transition:opacity 0.75s,z-index 0s 1s;transition:opacity 0.75s,z-index 0s 1s;z-index:-1;opacity:0;margin-left:-9999px}
div.nav ul.hide li{opacity:0;}
div.nav ul li{list-style-type:none;display:list-item;background:center top no-repeat;background-size:100% auto;opacity:1;line-height:normal}
div.nav ul li.menu-character{background-image:url(../img/common/nav_bg_chara.png)}
div.nav ul li.menu-school{background-image:url(../img/common/nav_bg_school.png)}
div.nav ul li.menu-phantom{background-image:url(../img/common/nav_bg_phantom.png)}
div.nav ul li.menu-media{background-image:url(../img/common/nav_bg_media.png)}
div.nav ul li.menu-dlc{background-image:url(../img/common/nav_bg_dlc.png)}
div.nav ul li.menu-purchase{background-image:url(../img/common/nav_bg_purchase.png)}
div.nav ul li img{height:auto;width:100%;display:block;vertical-align:bottom;border:none;outline:none;line-height:normal}
div.nav ul li img.coming-soon{opacity:0.5}
div.active-menu ul,div.active-menu #menu-bg{display:block}
div.nav-bg-overlay{width:100%;height:100%;position:fixed;background:#000;opacity:.5;z-index:99990}
div.nav-bg-overlay.hidden{width:0;height:0;opacity:0;z-index:-1}
div.scrolling-bg{position:fixed;top:0;left:0;width:100%;height:100%}
#footer{display:block;width:100%;background:#000;padding:40px 0;position:relative;z-index:9999}
#footer #legals{width:80%;display:table;text-align:center;margin:0 auto}
#footer #legals .table-cell{display:table-cell;vertical-align:middle;padding:0 10px}
#footer #legals #esrb{vertical-align:middle}
#footer #legals #esrb img{max-height:72px;min-height:72px;width:auto}
#footer #legals #esrbPolicy{vertical-align:middle}
#footer #legals #esrbPolicy img{max-height:72px;min-height:72px;width:auto}
#footer #legals #console{}
#footer #legals #p-studio{padding-left:1%}
#footer #legals #atlus{padding-left:1%}
#footer #legals #legal-text{font-size:10px;text-align:left;padding-left:1%;font-family:Helvetica,Arial,sans-serif;}

/* Home Page Style */
body#home{background:url(../img/home/01-Home.jpg) center top no-repeat;background-size:100% auto;position:relative}
#header #title{float:left;width:50%;text-align:center;opacity:1}
body#home #header #main-visual{float:left;width:60%;text-align:center;z-index:50;margin-left:7%;opacity:0;-o-animation-delay:0.1s;-moz-animation-delay:1s;-webkit-animation-delay:0.1s;animation-delay:0.1s;}
body#home #header #main-visual img{width:100%;height:auto}
body#home #header #logo{position:absolute;top:18.25%;left:63%;width:25%;opacity:0;-o-animation-delay:.12s;-moz-animation-delay:.12s;-webkit-animation-delay:1.2s;animation-delay:.12s;}
body#home #header #logo img{width:100%;height:auto}
body#home #header #purchase{position:absolute;top:47%;left:64%;width:23%;z-index:1000;opacity:0;-o-animation-delay:.13s;-moz-animation-delay:.13s;-webkit-animation-delay:.13s;animation-delay:.13s;}
body#home #header #purchase img{width:100%;height:auto}
body#home #header #release-date{width:90%;position:absolute;right:0;bottom:-14%;z-index:99;text-align:center;opacity:0;-o-animation-delay:.14s;-moz-animation-delay:.14s;-webkit-animation-delay:.14s;animation-delay:.14s;}
body#home #header #release-date img{width:100%;height:auto}
body#home #section-2{margin-top:-13%}
body#home #section-2 #section-2-title{position:absolute;z-index:160;left:13%;top:18%;width:44%;opacity:0}
body#home #section-2 img{width:100%;height:auto}
body#home #section-2 #about-background{width:79%;position:absolute;top:17%;left:16.5%;z-index:155;opacity:0}
body#home #section-2 #about-background #about-text{position:absolute;top:40%;left:17.5%;width:35%;z-index:160}
body#home #section-2 #about-trailer{width:31.35%;height:auto;position:absolute;top:35%;right:5%;z-index:165;opacity:0}
body#home #section-2 #character-link{position:absolute;top:61%;left:44.5%;z-index:175;width:12.4%;opacity:0}
body#home #section-2 #section-2-bg img{margin-top:-13%;z-index:100}
body#home #section-3{background:#000 url(../img/common/tarot_card_bg.jpg) center bottom no-repeat;margin-top:-25%;padding-bottom:10%;background-size:110% auto}
body#home #section-3 #section-3-title{position:absolute;width:70%;height:auto;display:block;left:15%;top:25%;z-index:30;opacity:0}
body#home #section-3 #section-3-title img{width:100%;height:auto}
body#home #section-3 #school-life{width:89%;height:auto;padding-top:33%;margin-left:10%}
body#home #section-3 #school-life img{width:100%;height:auto}
body#home #section-3 #school-life #school-life-info{position:absolute;width:55%;top:49%;z-index:25;opacity:0}
body#home #section-3 #school-life #school-life-img{z-index:75}
body#home #section-3 #school-life #school-life-img-stroke{position:absolute;top:44%;width:100%}
body#home #section-3 #school-life-text{position:absolute;width:70%;top:35%;left:15%;z-index:40}
body#home #section-4{margin-top:-25%;z-index:100}
body#home #section-4 img{width:100%;height:auto}
body#home #section-4 #phantom-title{position:absolute;width:85%;top:12%;left:7.5%;z-index:175;opacity:0}
body#home #section-4 #phantom-title img{width:100%;height:auto}
body#home #section-4 #phantom-img{position:absolute;width:37%;top:34%;left:5%;z-index:125}
body#home #section-4 #phantom-img img{width:100%;height:auto}
body#home #section-4 #phantom-info{position:absolute;width:49%;top:37%;left:38%;z-index:150;opacity:0}
body#home #section-4 #phantom-info img{width:100%;height:auto}
body#home #section-4 #phantom-info #phantom-info-text{position:absolute;width:65%;left:17.5%;top:38%}
body#home #section-4 #phantom-phrase{position:absolute;width:73%;top:62%;left:12%;z-index:150;opacity:0}
body#home #section-4 #phantom-phrase img{width:100%;height:auto}
body#home #section-5{margin-top:-25%;background:#000 url(../img/common/tarot_card_bg.jpg) center center no-repeat;background-size:110% auto}
body#home #section-5 img{width:100%;height:auto}
body#home #section-5 .chain-img{position:absolute;top:15%;left:0;width:102%}
body#home #section-5 .chain-img#chains1{left:1%;top:8%}
body#home #section-5 .chain-img#chains2{left:-2%;top:10%}
body#home #section-5 .chain-img#chains3{left:-2%;top:16%}
body#home #section-5 #staff-title{position:absolute;width:26%;top:5%;left:20%}
body#home #section-5 #director{position:absolute;width:19.5%;top:25%;left:65%}
body#home #section-5 #chara-design{position:absolute;width:25%;top:35%;left:11%}
body#home #section-5 #composer{position:absolute;width:21%;top:45%;left:41.5%}
body#home #section-5 #animators{position:absolute;width:24%;top:55%;left:65.5%}
body#home #section-5 #sec5-sp{width:100%;height:auto;padding-bottom:20%}
body#home #section-6{width:100%;az-index:100;margin-top:-25%} 
body#home #section-6 img{width:100%;height:auto;display:block}
body#home #section-6 #glamshot{width:86%;height:auto;position:absolute;top:21%;left:7%;z-index:150}
body#home #section-6 #collectors-box {position:absolute;width:18%;top:41%;left:16%;z-index:155;opacity:0;-o-animation-delay:0;-moz-animation-delay:0;-webkit-animation-delay:0;animation-delay:0}
body#home #section-6 #art-book {position:absolute;width:21%;top:54%;left:8%;z-index:155;opacity:0;-o-animation-delay:0.125s;-moz-animation-delay:0.125s;-webkit-animation-delay:0.125s;animation-delay:0.125s}
body#home #section-6 #soundtrack {position:absolute;width:25%;top:67.5%;left:11%;z-index:155;opacity:0;-o-animation-delay:0.25s;-moz-animation-delay:0.25s;-webkit-animation-delay:0.25s;animation-delay:0.25s}
body#home #section-6 #morgana-plush {position:absolute;width:21%;top:35.5%;left:58%;z-index:155;opacity:0}
body#home #section-6 #school-bag {position:absolute;width:20%;top:46%;left:65%;z-index:155;opacity:0;-o-animation-delay:0.125s;-moz-animation-delay:0.125s;-webkit-animation-delay:0.125s;animation-delay:0.125s}
body#home #section-6 #steelbook {position:absolute;width:23.5%;top:69%;left:55%;z-index:155;opacity:0;-o-animation-delay:0.25s;-moz-animation-delay:0.25s;-webkit-animation-delay:0.25s;animation-delay:0.25s}
body#home #section-6 #purchase-link {position:absolute;width:17%;top:74%;left:35%;z-index:155;}
body#home #footer{position:relative}
#section-1{background:#000;height:200px}

/* Character Page */
body#characters #header{margin-bottom:-10%}
body#characters #header #title{float:left;width:100%;text-align:center;margin:0 auto;opacity:1;position:relative}
body#characters #header #title img{width:80%;height:auto;padding:0;margin:9% auto 0;z-index:5}
body#characters #header .chara,body#characters #section-2 .chara,body#characters #section-3 .chara{position:absolute;top:0;left:0}
body#characters #header .chara,body#characters #section-2 .chara,body#characters #section-3 .chara{width:17%;cursor:pointer}
body#characters #header .chara img,body#characters #section-3 .chara img{width:100%;height:auto;position:absolute;z-index:15}
body#characters #section-2 .chara img{width:100%;height:auto;position:absolute;z-index:30}
body#characters #header .chara img.stroke,body#characters #section-3 .chara img.stroke{z-index:5}
body#characters #section-2 .chara img.stroke{z-index:25}
body#characters #header .chara div.card,body#characters #section-3 .chara div.card{width:50%;height:auto;position:absolute;z-index:10;}
body#characters #header .chara div.card img,body#characters #section-3 .chara div.card img{width:100%;height:auto;border:5px solid #F00;}
body#characters #header .chara img.shadow,body#characters #section-3 .chara img.shadow{z-index:0;margin-top:6%;left:-3.75%}
body#characters #section-2 .chara img.shadow{z-index:20;margin-top:6%;left:-3.75%}
body#characters #header .chara#protag{top:5%;left:47%;width:17%}
body#characters #header .chara#ryuji{top:20%;left:71%;width:18%}
body#characters #header .chara#ryuji .card{margin-top:-15%;margin-left:-18%;-moz-transform-style:preserve-3d;-moz-transform-origin:center top;-moz-transform:rotate3d(-1,-1,.25,-45deg);-webkit-transform-style: preserve-3d;-webkit-transform-origin:center top;-webkit-transform:rotate3d(-1,-1,.25,-45deg);transform-style:preserve-3d;transform-origin:center top;transform:rotate3d(-1,-1,.25,-45deg)}
body#characters #header .chara#ann{top:23%;left:38%;width:17%}
body#characters #header .chara#ann .card{margin-top:7%;margin-right:-15%;transform-style: preserve-3d;transform-origin:center top;transform:rotate3d(1,-1,.45,35deg);right:0}
body#characters #header .chara#morgana{top:25%;left:12%;width:17%}
body#characters #header .chara#morgana .card{margin-top:1%;margin-right:-10%;transform-style:preserve-3d;transform-origin:center top;transform:rotate3d(-30,25,-20,-35deg)}
body#characters #header .chara#yusuke{top:43%;left:37%;width:18%}
body#characters #header .chara#yusuke .card{margin-top:-5%;margin-left:-18%;transform-style: preserve-3d;transform-origin:center top;transform:rotate3d(-1,-1,.25,-45deg)}
body#characters #header .chara#makoto{top:42%;left:73%;width:17%}
body#characters #header .chara#makoto .card{margin-top:-15%;margin-left:-18%;-moz-transform-style:preserve-3d;-moz-transform-origin:center top;-moz-transform:rotate3d(-1,-1,.25,-45deg);-webkit-transform-style: preserve-3d;-webkit-transform-origin:center top;-webkit-transform:rotate3d(-1,-1,.25,-45deg);transform-style:preserve-3d;transform-origin:center top;transform:rotate3d(-1,-1,.25,-45deg)}
body#characters #header .chara#futaba{top:60%;left:12%;width:19%}
body#characters #header .chara#futaba .card{margin-top:0%;right:-17%;transform-style: preserve-3d;transform-origin:center top;transform:rotate3d(1,-1,.45,35deg);}
body#characters #header .chara#haru{top:64%;left:45%;width:17%}
body#characters #header .chara#haru .card{margin-top:0%;margin-left:-18%;-moz-transform-style:preserve-3d;-moz-transform-origin:center top;-moz-transform:rotate3d(-1,-1,.25,-45deg);-webkit-transform-style: preserve-3d;-webkit-transform-origin:center top;-webkit-transform:rotate3d(-1,-1,.25,-45deg);transform-style:preserve-3d;transform-origin:center top;transform:rotate3d(-1,-1,.25,-45deg)}
body#characters #header .chara#velvet-room{top:79%;left:24%;width:25%}
body#characters #header .chara#goro{top:65%;left:70%;width:16%}
#characters .container{width:100%;height:auto;background:url(../img/characters/character-bg.jpg) center top no-repeat fixed;background-size:100% auto}
#characters #section-2{background:transparent}
#cahracters #section-2 #sec2-bg{width:100%;height:auto}
#characters #section-2 #sec2-bg img{width:100%;height:auto;margin-top:-25%;z-index:10}
body#characters #section-3{margin-bottom:-10%}
body#characters #section-3 #title-confidant{position:absolute;width:53%;top:9%;left:31%}
body#characters #section-3 #title-confidant img{display:block;}
body#characters #section-3 #title-confidant img#confidant-title-shadow{position:absolute;top:0;left:0;z-index:1}
body#characters #section-3 #confidant-line{z-index:4;width:100%}
body#characters #section-3 #confidant-line img{width:100%;height:auto}
body#characters #section-3 .chara#sojiro{top:15%;left:15%;width:19%}
body#characters #section-3 .chara#sojiro .card{margin-top:0%;margin-left:-18%;-moz-transform-style:preserve-3d;-moz-transform-origin:center top;-moz-transform:rotate3d(-1,-1,.25,-45deg);-webkit-transform-style: preserve-3d;-webkit-transform-origin:center top;-webkit-transform:rotate3d(-1,-1,.25,-45deg);transform-style:preserve-3d;transform-origin:center top;transform:rotate3d(-1,-1,.25,-45deg)}
#characters #section-3{background:url(../img/characters/confidant_bg.png) center top no-repeat;background-size:100% auto;width:100%}
body#characters #section-3 .chara#chihaya{top:27%;left:33%;width:20%}
body#characters #section-3 .chara#chihaya .card{margin-top:10%;right:-10%;transform-style: preserve-3d;transform-origin:center top;transform:rotate3d(1,-1,.45,35deg);}
body#characters #section-3 .chara#munehisa{top:30%;left:70%;width:19%}
body#characters #section-3 .chara#munehisa .card{margin-top:5%;margin-left:-18%;-moz-transform-style:preserve-3d;-moz-transform-origin:center top;-moz-transform:rotate3d(-1,-1,.25,-45deg);-webkit-transform-style: preserve-3d;-webkit-transform-origin:center top;-webkit-transform:rotate3d(-1,-1,.25,-45deg);transform-style:preserve-3d;transform-origin:center top;transform:rotate3d(-1,-1,.25,-45deg)}
body#characters #section-3 .chara#tae{top:41%;left:55%;width:19%}
body#characters #section-3 .chara#tae .card{margin-top:0%;margin-left:-18%;-moz-transform-style:preserve-3d;-moz-transform-origin:center top;-moz-transform:rotate3d(-1,-1,.25,-45deg);-webkit-transform-style: preserve-3d;-webkit-transform-origin:center top;-webkit-transform:rotate3d(-1,-1,.25,-45deg);transform-style:preserve-3d;transform-origin:center top;transform:rotate3d(-1,-1,.25,-45deg)}
body#characters #section-3 .chara#sadayo{top:40%;left:16%;width:22%}
body#characters #section-3 .chara#sadayo .card{margin-top:0%;width:45%;margin-left:5%;-moz-transform-style:preserve-3d;-moz-transform-origin:center top;-moz-transform:rotate3d(-1,-1,.25,-45deg);-webkit-transform-style: preserve-3d;-webkit-transform-origin:center top;-webkit-transform:rotate3d(-1,-1,.25,-45deg);transform-style:preserve-3d;transform-origin:center top;transform:rotate3d(-1,-1,.25,-45deg)}
body#characters #section-3 .chara#ichiko{top:53%;left:8%;width:19%}
body#characters #section-3 .chara#ichiko .card{margin-top:0%;margin-left:-12%;-moz-transform-style:preserve-3d;-moz-transform-origin:center top;-moz-transform:rotate3d(-1,-1,.25,-45deg);-webkit-transform-style: preserve-3d;-webkit-transform-origin:center top;-webkit-transform:rotate3d(-1,-1,.25,-45deg);transform-style:preserve-3d;transform-origin:center top;transform:rotate3d(-1,-1,.25,-45deg)}
body#characters #section-3 .chara#hifumi{top:55%;left:40%;width:16.5%}
body#characters #section-3 .chara#hifumi .card{margin-top:9%;margin-left:-17%;width:57%;-moz-transform-style:preserve-3d;-moz-transform-origin:center top;-moz-transform:rotate3d(-1,-1,.25,-45deg);-webkit-transform-style: preserve-3d;-webkit-transform-origin:center top;-webkit-transform:rotate3d(-1,-1,.25,-45deg);transform-style:preserve-3d;transform-origin:center top;transform:rotate3d(-1,-1,.25,-45deg)}
body#characters #section-3 .chara#shinya{top:60%;left:75%;width:16%}
body#characters #section-3 .chara#shinya .card{margin-top:10%;left:65%;width:55%;transform-style: preserve-3d;transform-origin:center top;transform:rotate3d(1,-1,.45,35deg);}
body#characters #section-3 .chara#yuuki{top:75%;left:55%;width:19%}
body#characters #section-3 .chara#yuuki .card{margin-top:17%;left:60%;width:45%;transform-style: preserve-3d;transform-origin:center top;transform:rotate3d(1,-1,.45,35deg);}
body#characters #section-3 .chara#toranosuke{top:72%;left:10%;width:25%}
body#characters #section-3 .chara#toranosuke .card{margin-top:0%;right:-60%;width:35%;transform-style: preserve-3d;transform-origin:center top;transform:rotate3d(1,-1,.45,35deg);}
#characters #section-3 #title-confidant img{width:100%;height:auto;z-index:5}
#characters-detail .container{width:100%;height:auto;background:url(../img/characters/chara_detail_bg.jpg) center top no-repeat fixed;background-size:100% auto}
body#characters-detail #header{margin-bottom:-25%;}
body#characters-detail #chara-title{position:absolute;width:36%;height:auto;top:10%;left:10%;z-index:9999}
body#characters-detail #chara-title img{width:100%;height:auto}
body#characters-detail #persona-bg{width:100%;height:auto;z-index:40}
body#characters-detail #persona-bg img{width:100%;height:auto;display:block}
body#characters-detail .persona{position:absolute;top:20%;left:15%;width:70%;z-index:50}
body#characters-detail .persona img{width:100%;height:auto}
body#characters-detail .persona-name{position:absolute;top:50%;left:50%;z-index:60}
body#characters-detail .persona-name img{width:100%;height:auto}
body#characters-detail .persona-info{position:absolute;height:auto;top:50%;left:50%;z-index:55;width:38.5%}
body#characters-detail .persona-info img{width:100%;height:auto}
body#characters-detail .persona-info p#persona-text{position:absolute;width:80%;top:30%;left:9%}
body#characters-detail .character-name{position:absolute;top:40%;left:10%;width:35%;z-index:90}
body#characters-detail .character-name img{width:100%;height:auto}
body#characters-detail .character-info{position:absolute;width:44%;height:auto;top:55%;left:20%;z-index:75}
body#characters-detail .character-info img{width:100%;height:auto}
body#characters-detail .character-info p.chara-info-text{position:absolute;width:55%;top:20%;left:22%}
body#characters-detail .chara-img{width:100%;height:auto;z-index:15}
body#characters-detail .chara-img img{width:100%;height:auto;overflow-x:hidden}
body#characters-detail .chara-img .phantom-thief{position:absolute;top:0;left:-20%;opacity:0}
body#characters-detail .chara-arcana{position:absolute;width:20%;top:65%;left:9%;z-index:75}
body#characters-detail .chara-arcana img{width:100%;height:auto}
body#characters-detail .change{position:absolute;top:47%;left:45%;width:20%;z-index:100;cursor:pointer}
body#characters-detail .change img{width:100%;height:auto}
body#characters-detail .chara-bg{position:absolute;width:100%;height:auto;top:0;left:0;z-index:10}
body#characters-detail .chara-bg img{width:100%;height:auto;overflow-x:hidden}
body#characters-detail .chara-bg .phantom-thief-bg{position:absolute;top:0;left:20%;opacity:0}
body#characters-detail .code-name{position:absolute;width:31%;top:55%;left:25%;z-index:90;opacity:0}
body#characters-detail .code-name img{width:100%;height:auto}
body#characters-detail .code-name img.name-img{position:absolute;top:0;left:0}
body#characters-detail .video-thumb{position:absolute;top:76%;left:59%;z-index:75;width:16%}
body#characters-detail .video-thumb img{width:100%;height:auto}
body#characters-detail #back{position:absolute;width:20.5%;bottom:10%;left:39.75%;z-index:75}
body#characters-detail #back img{width:100%;heigth:auto}
body#characters-detail .container #footer{position:relative}
body.protagonist .character-name{max-width:644px;}
body#characters-detail .persona-name#title-arsene{top:40.5%;left:56%;width:27%}
body#characters-detail .persona-info#info-arsene{top:46%;left:44.5%}
body.ryuji .character-name#chara-ryuji{top:34%}
body.ryuji .persona-name#title-kidd{top:43%;left:56%;width:33%}
body.ann .character-name#chara-ann{top:32%;}
body.ann .persona-name#title-carmen{top:43%;left:58%;width:30%}
body.morgana .character-name#chara-morgana{top:45%}
body#characters-detail.morgana .code-name{position:absolute;width:31%;top:55%;left:65%;z-index:90;opacity:1}
body.morgana .persona-name#title-zorro{top:40%;left:59%;width:29.75%}
body.yusuke .character-name#chara-yusuke{top:30%}
body.yusuke .persona-name#title-goemon{top:42%;left:58%;width:31%}
body#characters-detail .persona#goemon{top:25%;left:5%}
body.makoto .character-name#chara-makoto{top:31%}
body#characters-detail.makoto .persona-info#info-johanna{top:60%;left:25%}
body.makoto .persona-name#title-johanna{top:53%;left:14%;width:30%}
body.futaba .character-name#chara-futaba{top:30%}
body#characters-detail.futaba .persona-info#info-necronomicon{top:60%}
body.futaba .persona-name#title-necronomicon{top:50%;left:55%;width:32.6%}
body.haru .character-name#chara-haru{top:30%}
body#characters-detail.haru .persona-info#info-milady{top:55%}
body.haru .persona-name#title-milady{top:46%;width:33%}
body#characters-detail.goro .chara-bg,body#characters-detail.confidant .chara-bg{position:relative}
body#characters-detail.goro .chara-bg img,body#characters-detail.confidant .chara-bg img{display:block}
body#characters-detail.goro #header,body#characters-detail.confidant #header{margin-bottom:0}
body#characters-detail.goro .chara-img,body#characters-detail.confidant .chara-img{width:25%;position:absolute;top:5%;left:50%;z-index:50}
body#characters-detail.goro .chara-img img#main-img,body#characters-detail.confidant .chara-img img#main-img{position:absolute;top:0;left:0;z-index:100}
body#characters-detail.goro .chara-img img#stroke-img,body#characters-detail.confidant .chara-img img#stroke-img{position:absolute;top:0;left:0;z-index:75}
body#characters-detail.goro .chara-img img#shadow-img,body#characters-detail.confidant .chara-img img#shadow-img{position:absolute;top:0;left:0;z-index:50}
body#characters-detail.goro #back,body#characters-detail.confidant #back{bottom:2%}
body#characters-detail .character-name#chara-goro{top:33%;left:21%}
body#characters-detail.wardens .velvet{position:absolute;top:0;left:0}
body#characters-detail.wardens .character-info{position:absolute;width:58%;height:auto;top:55%;left:20%;z-index:75}
body#characters-detail.wardens .character-info p.chara-info-text{position:absolute;width:65%;top:20%;left:20%}
body#characters-detail.wardens .character-name#justine{width:35%;top:45%;left:60%}
body#characters-detail.wardens .character-name#caroline{top:85%;left:5%;width:40%}
body#characters-detail.wardens .persona#igor {top:20%;width:85%;left:7.5%}
body#characters-detail.wardens .persona-info#info-igor {top:60%;width:50%;left:5%}
body#characters-detail.wardens .persona-name{width:25%}
body#characters-detail.sojiro .chara-img{width:32.5%}
body#characters-detail.chihaya .chara-img{width:27%}
body#characters-detail.munehisa .chara-img{width:42.5%;left:35%}
body#characters-detail.ichiko .chara-img{width:30%}
body#characters-detail.tae .chara-img{width:36.5%}
body#characters-detail.tae .character-name{top:37%}
body#characters-detail.sadayo .chara-img{width:29.5%}
body#characters-detail.sadayo .character-name{top:43%}
body#characters-detail.ichiko .chara-img{width:32%}
body#characters-detail.ichiko .character-name{width:30%}
body#characters-detail.shinya .chara-img{width:28.25%}
body#characters-detail.shinya .character-name{width:30%}
body#characters-detail.hifumi .chara-img{width:22%}
body#characters-detail.hifumi .character-name{width:25%}
body#characters-detail.toranosuke .chara-img{width:39%;left:40%}
body#characters-detail.toranosuke .character-name{top:43%}
body#characters-detail.yuuki .chara-img{width:20%;left:54%}
body#characters-detail.yuuki .character-name{width:30%}
body#characters-detail.confidant .chara-arcana{top:58%;left:8%}
body.confidant div.chara-video{width:16%;position:absolute;top:45%;left:63%;z-index:100}
body.confidant div.chara-video img{width:100%;height:auto}

/* School Life */
#school img{width:100%;height:auto}
#school-subnav{width:48%;float:left;margin-left:5%;z-index:5}
#school-subnav img{width:100%;height:auto}
#school-subnav img#ie-subnav{position:absolute;top:-171%;left:-4.75%;z-index:10;width:143.75%}
#subnav{position:absolute;top:56.5%;width:69.5%;left:3.4%;-webkit-mask:url(../img/school-life/menu_bg.svg) center / cover;mask:url(../img/school-life/menu_bg.svg) center / cover;}
#subnav ul{z-index:15;text-align:center;margin:0 auto;width:54%}
#subnav ul li{width:100%}
#subnav ul li a{display:block}
#subnav ul li img{width:100%;height:auto;display:block;vertical-align:bottom}
#subnav-bar{width:80%;position:absolute;top:0%;left:10%;z-index:0}
#subnav-bar img{width:100%;height:auto;animation-direction:normal}
#school #shujin{position:absolute;z-index:1}
#school #content{z-index:10}
#school #section-2{margin-bottom:-20%;z-index:100}
#school #section-2 #section-2-title{position:absolute;z-index:160;left:13%;top:20%;width:65%;opacity:0;}
#school #section-2 #section-2-info{position:absolute;z-index:155;width:73%;top:22%;left:22%}
#school #section-2 #section-2-img{position:absolute;z-index:155;width:100%}
#school #section-2 #school-sec2-text{position:absolute;width:55%;left:23%;top:38%;z-index:160}
#school #section-3{background:#000 url(../img/school-life/section-3-bg.png) left top no-repeat;padding-top:5%;padding-bottom:10%}
#school #section-3 #section-3-title{width:56.25%;position:absolute;top:27.5%;left:1%;z-index:30;opacity:0}
#school #section-3 #section-3-info{width:80%;position:absolute;top:26%;z-index:25;opacity:0}
#school #section-3 #school-sec3-text{position:absolute;top:38%;left:22%;width:57%}
#school #section-3 #section-3-img{width:30%;float:right;margin-right:5%;padding-top:10%;z-index:35;opacity:0}
#school #section-3 #section-3-img img{display:block}
#school #section-4{display:block;z-index:175;margin-top:-10%;margin-bottom:-15%}
#school #section-4 #section-4-title{position:absolute;top:11%;left:16.5%;width:70%;z-index:185;opacity:0}
#school #section-4 #section-4-info{position:absolute;z-index:180;width:80%;left:10%;top:10%;opacity:0}
#school #section-4 #section-4-info img#school-sec3-text{position:absolute;width:55%;top:25%;left:26%}
#school #section-4 #section-4-bg img{margin-top:-15%}
#school #section-5{background:#000 url(../img/school-life/section_5_bg.jpg) left top no-repeat;background-size:100% auto;padding-bottom:20%;margin-bottom:-25%}
#school #section-5 #section-5-title{width:65%;top:7%;position:absolute;z-index:25;opacity:0}
#school #section-5 #section-5-info{width:95%;margin:0 auto;padding-top:5%;opacity:0}
#school #section-5 #section-5-bg{}
#school #section-6{z-index:100;margin-bottom:-20%}
#school #section-6 #section-6-title{position:absolute;z-index:125;width:45%;top:20%;left:30%;opacity:0}
#school #section-6 #section-6-info{position:absolute;z-index:120;width:93%;left:3.5%;top:25%;opacity:0}
#school #section-6 #section-6-bg{}
#school #section-7{background:url(../img/school-life/section-7-bg.jpg) center top no-repeat;}
#school #section-7 #section-7-title1{position:absolute;top:20%;left:1%;width:74%;z-index:25;opacity:0}
#school #section-7 #section-7-title2{position:absolute;top:27%;left:48%;width:51%;z-index:20;opacity:0}
#school #section-7 #section-7-info{position:absolute;top:18%;z-index:15}
#school #section-7 #section-7-bg{width:100%;heigth:auto}

/* Phantom Life */
#phantom img{width:100%;height:auto;}
#phantom-subnav{width:55%;float:left;margin-left:5%;margin-bottom:5%;z-index:5;background:url(../img/phantom-life/phantom_life_subnav_bg.png) left bottom no-repeat;background-size:100% auto}
#phantom #subnav{position:absolute;top:40.5%;width:68%;left:5%;-webkit-mask:url(../img/phantom-life/menu_bg.svg) center / cover;mask:url(../img/phantom-life/menu_bg.svg) center / cover;}
#phantom-subnav img#ie-subnav{position:absolute;top:-171%;left:-4.75%;z-index:10;width:143.75%}
#phantom #subnav ul{z-index:15;text-align:center;margin:0 auto;width:85%}
#phantom-subnav img{width:100%;height:auto}
#phantom #subnav-bar{width:80%;position:absolute;top:1%;left:10%;z-index:0}
#phantom #city{position:absolute;z-index:1;padding-top:7%}
#phantom #content{z-index:10}
#phantom #section-2{text-align:center;position:relative;display:block;margin-bottom:-17%;z-index:15}
#phantom #section-2 #section-2-title{position:absolute;z-index:175;left:5%;top:0;opacity:0;width:90%;}
#phantom #section-2 #section-2-img{position:absolute;z-index:150;top:0;left:5%;width:90%;margin:0 auto}
#phantom #section-2 #section-2-info{position:absolute;z-index:160;top:0;left:5%;width:90%;margin:0 auto}
#phantom #section-2 #section-2-info img{position:absolute;top:0;left:0;width:100%}
#phantom #section-3{margin-bottom:-25%;background:url(../img/phantom-life/section_3_background.jpg) center bottom;background-size:100% auto}
#phantom #section-3 #section-3-title,#phantom #section-3 #section-3-img,#phantom #section-3 #section-3-info,#phantom #section-3 #section-3-info img{position:absolute;top:0;left:0;width:100%;opacity:0}
#phantom #section-3 #section-3-title{z-index:10}
#phantom #section-3 #section-3-img{z-index:2;}
#phantom #section-3 #section-3-info{z-index:3}
#phantom #section-3 #section-3-bg{z-index:1}
#phantom #section-3 #section-3-info img{opacity:1}
#phantom #section-4{z-index:50;margin-bottom:-19%}
#phantom #section-4 #section-4-title,#phantom #section-4 #section-4-img,#phantom #section-4 #section-4-info,#phantom #section-4 #section-4-info img{position:absolute;top:0;left:0;width:100%;z-index:150;opacity:0}
#phantom #section-4 #section-4-title{z-index:155}
#phantom #section-4 #section-4-info img{opacity:1}
#phantom #section-5{position:relative;display:block;background:url(../img/phantom-life/section_5_bg.jpg) center bottom no-repeat;background-size:100% auto;margin-bottom:-30%}
#phantom #section-5 #section-5-title{position:absolute;top:0;left:0;z-index:10;opacity:0}
#phantom #section-5 #section-5-info{z-index:5;opacity:0}
#phantom #section-6{z-index:100;margin-bottom:-15%}
#phantom #section-6 #section-6-title,#phantom #section-6 #section-6-info{position:absolute;top:0;left:0;z-index:110;opacity:0}
#phantom #section-6 #section-6-title{z-index:115}
#phantom #section-7{margin-bottom:-35%}
#phantom #section-7 #section-7-title,#phantom #section-7 #section-7-info{position:absolute;top:0;left:0;z-index:1}
#phantom #section-7 #section-7-title{z-index:5;opacity:0}
#phantom #section-8{z-index:150;margin-bottom:-25%}
#phantom #section-8 #section-8-title,#phantom #section-8 #section-8-info{position:absolute;top:0;left:0;opacity:0}
#phantom #section-8 #section-8-title{z-index:160}
#phantom #section-8 #section-8-info{z-index:155}
#phantom #section-9{}
#phantom #section-9 #section-9-title,#phantom #section-9 #section-9-info{position:absolute;top:0;left:0;z-index:5}
#phantom #section-9 #section-9-title{z-index:10;opacity:0}
#phantom #section-9 #section-9-bg img{display:block;}

/* Media Page */
body#media{}
body#media .container{background:rgba(40,0,0,0.45);}
#title-media{width:35%;padding-top:10%;margin-left:10%}
body#media img{width:100%;height:auto}
body#media #content div#content-top{width:90%;overflow:hidden;margin:0 auto;display:block}
body#media #content div#content-top img{display:block;}
body#media #content div#video-bg{background:url(../img/media/media_bg.png) center top repeat-y;background-size:100% auto}
body#media #videos{display:table;width:70%;text-align:center;margin:0 auto;}
body#media #videos .table-row{display:table-row;margin:0 auto}
body#media #videos .table-row .table-cell{display:table-cell;vertical-align:middle}
body#media #videos .table-row .table-cell a{position:absolute;top:15%;left:17%;width:65%;z-index:100}

/* DLC */
body#dlc{background:#000 url(../img/dlc/dlc_bg.jpg) center top no-repeat;background-size:100% auto;}
#dlc #content img{width:100%;height:auto;display:block;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-o-user-select: none;user-select: none;text-decoration:none;border:none;outline:none}
#dlc .container{background:url(../img/dlc/dlc_bg_repeating.png) left top repeat;}
#dlc .spacer{width:100%;z-index:1}
#dlc #dlc-info{position:absolute;width:35%;top:62%;left:62%;z-index:25}
#dlc #content .info-text{position:absolute;z-index:30;width:100%;top:0;left:0}
#dlc #dlc-price{position:absolute;width:35%;top:31%;left:0%;z-index:25}
#dlc #dlc-img{width:35%;position:absolute;right:6%;top:8%;background:#F00;}
#dlc #dlc-img div{position:absolute;}
#dlc #tag-chain{position:absolute;width:100%;height:auto;z-index:25;top:0;left:1%}
#dlc #prev-dlc{position:absolute;width:8.5%;top:25%;left:33%;z-index:200;cursor:pointer;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-o-user-select: none;user-select: none;text-decoration:none;border:none;outline:none}
#dlc #next-dlc{position:absolute;width:8.5%;top:65%;left:22%;z-index:200;cursor:pointer;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-o-user-select: none;user-select: none;text-decoration:none;border:none;outline:none}
#dlc #next-dlc img#text-next,#dlc #prev-dlc img#text-prev{position:absolute;top:0;left:0}
#dlc #dlc-carousel{width:100%;height:100%;position:absolute;overflow:hidden;top:0;left:0;z-index:30}
#dlc .dlc-title{width:100%;height:100%}
#dlc .dlc-name{z-index:100}
#dlc .price{position:absolute;width:75%!important;top:10%;left:19%;z-index:100}
#dlc .dlc-title div img.new{width:25%!important;height:auto;position: absolute;top:0;left:0;z-index:150}
#dlc .dlc-title div{width:17.5%;position:absolute;left:-9999px;top:0;background:url(../img/dlc/dlc_title_bg_green.png) left top no-repeat;background-size:100% auto;cursor:pointer;-ms-transform-origin:0% 50%;-moz-transform-origin:0% 50%;-webkit-transform-origin:0% 50%;transform-origin:0% 50%;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-o-user-select: none;user-select: none;text-decoration:none;border:none;outline:none}
#dlc .dlc-title div.center{left:40%;top:35%;z-index:75}
#dlc .dlc-title div img.visited-dlc{position:absolute;top:0;right:0;width:37%!important;opacity:0}
#dlc .dlc-title div#focus{width:22%;z-index:75;cursor:default;background:url(../img/dlc/dlc_title_bg_white.png) left top no-repeat;background-size:100% auto;}
#dlc .dlc-title div#focus img.dlc-title-bg{opacity:0}
#dlc .dlc-title div.prev{left:35%}
#dlc .dlc-title div.dlc_1{left:45%;top:-18%;-o-transform:rotate(-30deg);-moz-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg)}
#dlc .dlc-title div.dlc_2{left:46%;top:4%;-o-transform:rotate(-20deg);-moz-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);transform:rotate(-20deg);cursor:default}
#dlc .dlc-title div.dlc_3{left:44%;top:20%;-o-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}
#dlc .dlc-title div.dlc_4{left:40%;top:35%;-o-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}
#dlc .dlc-title div.dlc_5{left:37%;top:50%;-o-transform:rotate(10deg);-moz-transform:rotate(10deg);-webkit-transform:rotate(10deg);transform:rotate(10deg)}
#dlc .dlc-title div.dlc_6{left:32%;top:64%;-o-transform:rotate(20deg);-moz-transform:rotate(20deg);-webkit-transform:rotate(20deg);transform:rotate(20deg)}
#dlc .dlc-title div.dlc_7{left:27%;top:78%;-o-transform:rotate(30deg);-moz-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);cursor:default;}
#dlc .dlc-title div.dlc_8{left:21%;top:90%;-o-transform:rotate(40deg);-moz-transform:rotate(40deg);-webkit-transform:rotate(40deg);transform:rotate(40deg);cursor:default}
#dlc .dlc-title div.dlc_9{left:17%;top:100%;-o-transform:rotate(40deg);-moz-transform:rotate(40deg);-webkit-transform:rotate(40deg);transform:rotate(40deg);cursor:default}
#dlc #image-preload img{height:0;width:0}

/* Footer Styles */
#console img{max-width:192px;height:auto}
#p-studio img{max-width:30px;height:auto}
#atlus img{max-width:89px;height:auto}
/* Misc Classes */
.clearfix{content:" ";width:100%;height:0px;font-size:0;display:table;clear:both}

/* Animations */
div.hidden-menu #menu-bg img{opacity:0;-moz-transition:-moz-transform .25s ease-in,opacity .5s;-o-transition:-o-transform .25s ease-in,opacity .5s;-webkit-transition:-webkit-transform .25s ease-in,opacity .5s;transition:transform .25s ease-in,opacity .5s;-moz-transform:translateY(100%);-ms-transform:translateY(100%);-webkit-transform:translateY(100%);transform:translateY(100%)}
div.active-menu #menu-bg img#menu-background{-o-animation-delay:.2s;-moz-animation-delay:.2s;-webkit-animation-delay:.2s;animation-delay:.2s;-moz-animation-duration:.151s;-o-animation-duration:.151s;-webkit-animation-duration:.151s;animation-duration:.151s}
div.active-menu ul li.menu-character,div.hidden-menu ul li.menu-purchase,div.active-menu ul li.menu-top,div.hidden-menu ul li.menu-bottom{-o-animation-delay:.012s;-moz-animation-delay:.012s;-webkit-animation-delay:.012s;animation-delay:.012s;-moz-animation-duration:.151s;-o-animation-duration:.151s;-webkit-animation-duration:.151s;animation-duration:.151s}
div.active-menu #menu-bg img#school-bg,div.active-menu ul li.menu-school,div.hidden-menu ul li.menu-dlc{-o-animation-delay:.024s;-moz-animation-delay:.024s;-webkit-animation-delay:.024s;animation-delay:.024s;-moz-animation-duration:.152s;-o-animation-duration:.152s;-webkit-animation-duration:.152s;animation-duration:.152s}
div.active-menu #menu-bg img#phantom-bg,div.active-menu ul li.menu-phantom,div.hidden-menu ul li.menu-media{-o-animation-delay:.036s;-moz-animation-delay:.036s;-webkit-animation-delay:.036s;animation-delay:.036s;-moz-animation-duration:.153s;-o-animation-duration:.153s;-webkit-animation-duration:.153s;animation-duration:.153s}
div.active-menu #menu-bg img#media-bg,div.active-menu ul li.menu-media,div.hidden-menu ul li.menu-phantom{-o-animation-delay:.048s;-moz-animation-delay:.048s;-webkit-animation-delay:.048s;animation-delay:.048s;-moz-animation-duration:.154s;-o-animation-duration:.154s;-webkit-animation-duration:.154s;animation-duration:.154s}
div.active-menu #menu-bg img#dlc-bg,div.active-menu ul li.menu-dlc,div.hidden-menu ul li.menu-school{-o-animation-delay:.06s;-moz-animation-delay:.06s;-webkit-animation-delay:.06s;animation-delay:.06s;-moz-animation-duration:.155s;-o-animation-duration:.155s;-webkit-animation-duration:.155s;animation-duration:.155s}
div.active-menu #menu-bg img#purchase-bg,div.active-menu ul li.menu-purchase,div.hidden-menu ul li.menu-character,div.hidden-menu ul li.menu-top,div.active-menu ul li.menu-bottom{-o-animation-delay:.072s;-moz-animation-delay:.072s;-webkit-animation-delay:.072s;animation-delay:.072s;-moz-animation-duration:.156s;-o-animation-duration:.156s;-webkit-animation-duration:.156s;animation-duration:.156s}
div.chara img.stroke{-o-animation-delay:.024s;-moz-animation-delay:.024s;-webkit-animation-delay:.024s;animation-delay:.024s;}
div.chara img.shadow{-o-animation-delay:.048s;-moz-animation-delay:.048s;-webkit-animation-delay:.048s;animation-delay:.048s;}


/* Responsive Breakpoints */
@media (max-width: 1600px){
	html{font-size:16px}
	body#characters-detail .persona#goemon{top:30%;left:-10%}
	body#characters-detail .character-info p.chara-info-text{top:15%}
	body#characters-detail .character-info{width:50%}
	body#characters-detail .video-thumb{top:82%;left:63%}
	body#home #section-3 #school-life-text{top:25%}
	#footer #legals{width:90%}
}
@media (max-width:1500px){
	body#home #section-4 #phantom-info{width:60%;top:35%}
	body#home #section-2 #about-background #about-text{font-size:14px;}
}
@media (max-width: 1280px){
	html{font-size:14px}
	div.nav{width:50%}
	body#home #section-2 #about-background{top:11%;left:12%}
	body#home #section-2 #about-background{width:90%;}
	body#characters-detail .persona-info#info-arsene{width:47%}
	body#characters-detail .persona-name#title-arsene{left:65%}
	#footer #legals{width:100%}
}
@media (max-width: 1068px){
	html{font-size:16px}
	body#home #section-2 #about-background{width:90%;top:13%;left:11.5%;font-size:14px}
	body#home #section-2 #about-background #about-text{top:37%;font-size:13px}
	body#home #section-2 #character-link{top:63%;width:13.4%;left:43.5%}
	body#home #section-3 #school-life #school-life-info{width:60%}
	body#home #section-3 #school-life-text{font-size:14px}
	body#home #section-4 #phantom-info{width:62%;top:33%}
	body#home #section-4 #phantom-info #phantom-info-text{width:70%;top:35%;font-size:14px}
	body#characters-detail #header{margin-bottom:-20%}
	body#characters-detail #persona-bg{width:125%}
	body#characters-detail .character-info p.chara-info-text{top:15%}
	body#characters-detail .character-info{width:60%}
	body#characters-detail .code-name,body#characters-detail.morgana .code-name{top:38%}
	body#characters-detail .video-thumb{top:56%;left:77%}
	body#characters-detail .persona-info{left:43%;width:48%}
	body#characters-detail #back{bottom:5%}
	body#characters-detail.wardens .character-info{position:absolute;width:70%;height:auto;top:55%;left:15%;z-index:75}
	body#characters-detail.wardens .character-name#caroline{top:95%}
	body#characters-detail .persona-name#title-arsene{top:40%;left:44%;width:40%}
	body#characters-detail .persona-info#info-arsene{width:58%}
	body#characters-detail .character-name#chara-goro{top:31%;left:17%}
	body#characters-detail.goro .character-info{width:70%;top:49%}
	#footer #legals{display:block;width:100%}
	#footer #legals .table-cell{display:block;margin:20px;width:80%}
	#footer #legals #legal-text{text-align:center}
}
@media (max-width:960px){
	
	.desktop{display:none}
	.tablet{display:block}
	.info-desk{display:none}
	.info-tab{display:block}
	
	body#home {overflow-x:hidden}
	body#home #header{background:#000 url(../img/home/01-Home.jpg) center top no-repeat;background-size:cover;}
	body#home #header #main-visual{width:80%;margin-left:0;margin-top:-3%}
	body#home #header #logo {top:13%;left:60%;width:35%;z-index:175}
	body#home #header #purchase{width:35%;top:40%;left:62%;z-index:110}
	body#home #header #release-date{bottom:-4%}
	body#home #section-2 #section-2-bg{width:150%}
	body#home #section-2 #section-2-title{width:69%;left:13%;top:5%}
	body#home #section-2 #about-trailer{width:40%;top:55%;right:55%;-moz-transform: rotate(35deg);-webkit-transform:rotate(35deg);transform:rotate(35deg)}
	body#home #section-2 #about-background{width:100%;top:25%;left:13.5%}
	body#home #section-2 #about-background img.tablet{}
	body#home #section-2 #about-background p#about-text{width:65%;top:20%;left:15%}
	body#home #section-2 #character-link{top:58%;width:25%;left:55.5%}
	body#home #section-3 div#section-3-title{z-index:80;top:37%;width:90%;left:5%;display:block;-o-transform:rotate(30deg);-moz-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg)}
	body#home #section-3 #school-life{padding-top:65%;z-index:77;width:90%;margin-left:5%}
	body#home #section-3 #school-life #school-life-info{padding-bottom:20%;position:relative;width:100%;z-index:80}
	body#home #section-3 #school-life-text{width:70%;top:20%;left:15%}
	body#home #section-3 #school-life #school-life-img{position:absolute;top:15%;margin-left:0}
	body#home #section-3 #school-life #school-life-img img{width:100%;height:auto}
	body#home #section-3 #school-life #school-life-img-stroke{display:none}
	body#home #section-4 #phantom-bg{width:125%}
	body#home #section-4 #phantom-info{width:100%;top:22%;left:0}
	body#home #section-4 #phantom-info #phantom-info-text{top:33%}
	body#home #section-4 #phantom-img{top:51%;width:40%;left:-10%}
	body#home #section-4 #phantom-phrase{width:73%;left:24%;top:58%}
	body#home #section-5 .chain-img{position:absolute;top:15%;left:0;width:102%}
	body#home #section-5 .chain-img#chains1{top:0}
	body#home #section-5 .chain-img#chains2{top:5%}
	body#home #section-5 .chain-img#chains3{top:10%}
	body#home #section-5 #staff-title{top:-8%}
	body#home #section-5 #director{top:12%}
	body#home #section-5 #chara-design{top:24%}
	body#home #section-5 #composer{top:33%}
	body#home #section-5 #animators{top:42%}
	body#characters-detail .character-info{width:90%;left:0;top:60%}
	body#characters-detail .character-name{left:0;top:45%}
	body#characters-detail.confidant .character-name{top:25%;width:50%}
	body#characters-detail.chihaya .character-name{top:30%}
	body#characters-detail.munehisa .character-name{top:33%}
	body#characters-detail.sadayo .character-name{top:35%}
	body#characters-detail.ichiko .character-name{width:45%;top:27%}
	body#characters-detail.shinya .character-name{width:40%;top:30%}
	body#characters-detail.hifumi .character-name{width:40%;top:28%}
	body#characters-detail.toranosuke .character-name{top:34%}
	body#characters-detail.yuuki .character-name{width:45%;top:30%}
	body#characters-detail .change{top:53%;left:40%}
	body#characters-detail .code-name, body#characters-detail.morgana .code-name{top:45%}
	body#characters-detail .video-thumb{top:64%;left:80%}
	body#characters-detail .character-info p.chara-info-text{width:65%;left:19%}
	body#characters-detail .chara-arcana{top:82%;left:78%}
	body#characters-detail.confidant .chara-arcana{top:50%;left:75%;width:25%}
	body#characters-detail .persona#arsene{left:-8%}
	body#characters-detail .persona#kidd,body#characters-detail .persona#milady,body#characters-detail .persona#carmen{left:-10%}
	body#characters-detail .persona#zorro{left:-10%;top:28%}
	body#characters-detail .persona#johanna{left:0}
	body#characters-detail .persona-name#title-arsene{top:42%;left:30%}
	body#characters-detail .persona-info#info-arsene,body#characters-detail .persona-info#info-kidd,body#characters-detail .persona-info#info-zorro,body#characters-detail .persona-info#info-milady,body#characters-detail .persona-info#info-necronomicon,body#characters-detail .persona-info#info-carmen{width:80%;left:30%}
	body#characters-detail.futaba .persona-info#info-necronomicon{top:50%}
	body#characters-detail .persona-info#info-arsene p#persona-text,body#characters-detail .persona-info#info-kidd p#persona-text,body#characters-detail .persona-info#info-zorro p#persona-text,body#characters-detail .persona-info#info-milady p#persona-text,body#characters-detail .persona-info#info-necronomicon p#persona-text,body#characters-detail .persona-info#info-carmen p#persona-text{width:75%}
	body#characters-detail .persona{top:25%;width:100%;left:-25%}
	body#characters-detail .persona-info{width:60%;left:39%}
	body.ann .character-name#chara-ann{top:38%}
	body.ann .persona-name#title-carmen{top:45%;left:60%;width:40%}
	body.ryuji .character-name#chara-ryuji{top:39%}
	body.ryuji .persona-name#title-kidd{top:46%;left:63%;width:35%}
	body.morgana .character-name#chara-morgana{top:55%}
	body.morgana .persona-name#title-zorro{top:42%;left:68%}
	body.makoto .character-name#chara-makoto{top:37%}
	body#characters-detail.makoto .persona-info#info-johanna{left:0}
	body.makoto .persona-name#title-johanna{left:30%}
	body.yusuke .character-name#chara-yusuke{top:38%}
	body.yusuke .persona-name#title-goemon{top:44%;left:67%}
	body.futaba .character-name#chara-futaba{top:37%}
	body.futaba .persona-name#title-necronomicon{width:53%;left:45%;top:40%}
	body.haru .character-name#chara-haru{top:38%}
	body.haru .persona-name#title-milady{top:48%;left:65%}
	body#characters-detail .character-name#chara-goro{top:26%;left:7%;width:45%}
	body#characters-detail.goro .character-info,body#characters-detail.confidant .character-info{width:85%;left:7.5%}
	body#characters-detail.confidant .character-info{top:50%}
	body#characters-detail.goro .character-info p.chara-info-text{width:65%;left:19%;top:17%}
	body#characters-detail.wardens .character-info{position:absolute;width:80%;height:auto;top:65%;left:10%;z-index:75}
	body#characters-detail.wardens .character-name#justine{top:55%;width:45%;left:54%}
	body#characters-detail.wardens .character-name#caroline{top:55%;width:47%;left:1%}
	body#characters-detail.wardens .persona-name{width:35%;top:50%;z-index:10010}
	body#characters-detail.wardens .persona#igor{top:15%;width:100%;left:0;z-index:9999}
	body#characters-detail.wardens .persona-info#info-igor{width:70%;left:15%;z-index:10000}
	body#characters-detail.confidant #back{margin-bottom:-5%;z-index:99985}
	body.confidant div.chara-video{width:25%;top:35%;left:63%}
	body#media #videos{width:90%}
}
@media (max-width:875px){
	body#characters-detail .persona-info p#persona-text{width:76%}
	body#characters-detail .persona#goemon{width:125%;left:-35%}
	body#characters-detail .persona-info#info-goemon{width:70%}
}
@media (max-width:720px){
	p.chara-info-text{font-size:14px}
	p#persona-text{font-size:14px}
}
@media (max-width:690px){
	#header-console{display:none}
	body#characters-detail .character-info{width:90%;left:0}
	body#characters-detail #persona-bg{width:150%}
	body#characters-detail.wardens #persona-bg{width:200%}
	body#characters-detail .persona-name#title-arsene{top:52.5%;left:39%}
	body#characters-detail .persona-info#info-arsene{width:80%;top:57%;left:29%}
	body#characters-detail .persona-info#info-arsene p#persona-text{width:50%}
	body#characters-detail.wardens .character-name#justine{top:65%}
	body#characters-detail.wardens .character-info{position:absolute;width:125%;height:auto;top:75%;left:-12.5%;z-index:75}
	body#characters-detail.wardens .character-info p.chara-info-text{position:absolute;width:60%;top:17%;left:20%}
	body#characters-detail.wardens .character-name#caroline{top:67%;width:50%}
	body#characters-detail.wardens .persona#igor{top:30%}
	body#characters-detail.wardens .persona-name{top:55%}
	body#characters-detail.wardens .persona-info#info-igor{width:105%;left:-2.5%}
	#school #section-5{background-size:120% auto}
	div.nav{top:5px;}
}
/*footer addition*/
.fade-border{display: block;border: 0;height: 1px;width: 100%;margin: 0;background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));}
#footer-2{color:#FFF;text-align:center;width:90%;margin: 1% auto 0;}
#footer-2 a{color:#FFF;text-decoration:none;font-size:15px;display:inline-block;padding:20px}