@charset "UTF-8";
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}
html{line-height:1}
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}
h1,h2,h3,h4,h5{font-family:"kepler-std-display",serif;width:100%;text-align:center}
h2{font-size:30px;}
h3{font-size:24px}
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%;min-height:100%;position:relative}
body{-webkit-backface-visibility:hidden;backface-visibility:hidden;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.7}
a{outline:none;text-decoration:none}
img{vertical-align:top}
.clearfloat:after{display:table;height:0;width:100%;line-height:1;content:" ";clear:both}
.col-left{width:40%;float:left;margin-left:8%;padding:30px 0;font-family: "angie-sans",sans-serif;}
.col-right{width:40%;float:right;margin-right:8%;padding:30px 0;text-align:center}
.col-right img{width:80%;max-width:364px;height:auto}
body{font-family:"kepler-std-display",serif;font-weight:200;margin:0;background:#0c276c url(../img/bg_v2.jpg) center top no-repeat;background-size:100% auto}
body#system,body#media{background-image:url(../img/common/page_bg.jpg)}
.container{width:100%;margin-left:auto;margin-right:auto;height:1000px}
header{width:100%;background-color:#FFF;position:relative;}
.logo{color:#fff;font-weight:700;text-align:undefined;width:10%;float:left;margin-top:15px;margin-left:25px;letter-spacing:4px}
nav{float:right;width:50%;text-align:right;margin-right:25px}
.hamburger{display:none}
nav{width:100%;height:100%;text-align:center;position:absolute;z-index:9999}
header nav ul{list-style:none;position:relative;-webkit-transform: translateY(40%);-moz-transform: translateY(40%);-ms-transform: translateY(40%);-o-transform: translateY(40%);-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0)'; /*IE8 */ filter: progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0); /*IE6, IE7*/ transform: translateY(40%); }
nav ul li{color:#5ea1df;font-size:18px;line-height:40px;display:inline-block;margin-right:25px;letter-spacing:2px;font-weight:700;transition:all .3s linear}
ul li a{color:#5ea1df;text-decoration:none}
ul li a.selected{color:#310fe8}
ul li a:hover{color:#FFF;text-shadow:0 0 7px #000,0 0 3px #000,0 0 2px #000}
ul li a.selected:hover{color:#310fe8;text-shadow:none}
header #console{display:block;float:left;padding:10px}
header #console img{display:inline-block;}
header #social{display:block;float:right}
header #social ul{display:table;}
header #social ul li{display:table-cell;padding:10px;}
.hero_header{color:#FFF;text-align:center;letter-spacing:4px;margin:0}
.hero{position:relative;margin-bottom:-25%;z-index:1}
.hero img{width:100%;height:auto}
.hero #game-logo{position:absolute;top:0;left:25%;width:50%;height:auto}
img.game-logo-sub{width:20%;height:auto;margin-top:30px}
.hero #release-date{width:35%;position:absolute;top:46%;left:60%}
.hero #video-trailer{position:absolute;top:45%;left:5%;width:20%;border:2px solid #FFF}
.hero #video-trailer:hover{box-shadow:0 0 20px 3px #FFF}
.hero div.header-title{position:absolute;top:65%;left:20%;font-size:72px;color:#FFF;text-shadow:0 0 5px #000,0 0 10px #000,0 0 15px #000}
.light{font-weight:700;color:#717070}
.tagline{text-align:center;color:#FFF;margin-top:4px;font-weight:lighter;text-transform:uppercase;letter-spacing:1px}
.text_column{width:29%;text-align:justify;font-weight:lighter;line-height:25px;float:left;padding-left:20px;padding-right:20px;color:#A3A3A3}
.about{width:65%;display:block;margin:0 auto 60px;position:relative;z-index:5;color:#FFF;font-size:16px;text-shadow:3px 2px 10px #000;overflow-y:hidden}
.about img{position:relative;width:100%;height:auto;display:block}
.about div{position:relative;width:100%}
.about div.text-title{position:relative}
.about div.text-body{width:80%;margin:0 auto;position:relative;font-family: "angie-sans",sans-serif;}
#intro div.text-body{width:45%;margin:0 auto;position:relative}
#intro{width:100%;background:url(../img/common/map_02_bg.jpg) center center no-repeat;background-size:100% auto;text-shadow:0 0 10px #ffae00;z-index:5;position:relative;text-align:center;padding:50px;}
#intro p{margin:20px 0;font-size:18px;font-family: "angie-sans",sans-serif;}
.text-title{text-align:center;font-size:48px;line-height:normal}
.gallery{clear:both;display:block;width:100%;background-color:#0c276c;padding-bottom:35px;padding-top:0;margin-top:-5px;margin-bottom:0}
.thumbnail{width:25%;text-align:center;float:left;margin-top:35px}
.gallery .thumbnail h4{color:#52BAD5;margin:5px}
.gallery .thumbnail p{color:#A3A3A3;margin:0}
.banner{background-color:#2D9AB7;background-image:url(../images/parallax.png);height:400px;background-attachment:fixed;background-size:cover;background-repeat:no-repeat}
.parallax{color:#FFF;text-align:right;padding-right:100px;padding-top:110px;letter-spacing:2px;margin-top:0}
.parallax_description{color:#FFF;text-align:right;padding-right:100px;width:30%;float:right;font-weight:lighter;line-height:23px;margin:0}
footer{background-color:#000;position:relative;z-index:30;font-family:Arial,Helvetica,sans-serif}
.footer_column{width:50%;text-align:center;padding-top:30px;float:left}
footer .footer_column h3{color:#B3B3B3;text-align:center}
footer .footer_column p{color:#717070;background-color:#000}
.cards{width:100%;height:auto;max-width:400px;max-height:200px}
footer .footer_column p{padding-left:30px;padding-right:30px;text-align:justify;line-height:25px;font-weight:lighter;margin-left:20px;margin-right:20px}
.button{width:200px;text-align:center;vertical-align:middle;border-radius:0;text-transform:uppercase;font-weight:700;letter-spacing:2px;border:3px solid #FFF;color:#FFF;transition:all .3s linear;margin:40px auto auto;padding:20px 10px}
.button:hover{background-color:#FEFEFE;color:#C4C4C4;cursor:pointer}
.copyright{text-align:center;padding-top:20px;padding-bottom:20px;background-color:#000;color:#FFF;font-weight:400;font-size:11px;letter-spacing:normal;border-top-width:2px}
.subsection-text{padding:30px 15%;width:95%;color:#FFF;margin:0 auto;background:rbga(255,255,255,0.5) no-repeat;background-image:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.65), rgba(0,0,0,0));text-shadow:0 0 5px #3d08c5, 0 0 10px #3d08c5, 0 0 15px #3d08c5;font-size:24px;font-family: "angie-sans",sans-serif;}
.footer_banner{width:50%;display:table;background-color:#000;padding:30px 0;margin:0 auto;text-align:center}
.footer_banner div{display:table-cell;vertical-align:middle}
.footer_banner div#esrb img{height:72px;width:auto}
.footer_banner div#esrbPrivacy img{height:72px;width:auto}
.footer_banner div#atlus img{height:50px;width:auto}
footer{display:block}
.hidden{display:none}
#scrollup {width:76px;height:76px;position: fixed;bottom:150px;right:20px;display:none;text-indent:-9999px;cursor:pointer;z-index:999;}
#scrollup img {display: block;width: 100%;}
#dungeon,#city-iorys,#battle-system,#guild-cards,#races,#skills,#creation,#legendary-names,#changing-classes,#alternate-colors{-webkit-text-shadow:0 0 10px #ffae00;-moz-text-shadow:0 0 10px #ffae00;-o-text-shadow:0 0 10px #ffae00;text-shadow:0 0 10px #ffae00;position:relative}

/* Home */
#home #about .table{background:url(../img/home/main_about_center_bg.png) center center no-repeat;display:block;background-size:100% 100%}
.super{vertical-align:super;font-size:50%}

/* Characters */
body#characters,body#character-detail{font-size:18px;background-color:#0c276c;}
#characters .hero,#character-detail .hero{margin:0;text-align:center}
#characters #system-subnav ul li a{font-size:18px}
#character-list{position:relative;margin:20px auto}
#character-list ul{text-align:center;}
#character-list ul li{text-align:center;display:inline-block}
#character-list ul li img{width:275px;height:auto}
#races{background:#d6e8bf url("../img/system/bg_texture.png") left top repeat;margin-top:50px;padding-bottom:60px}
.races-classes{font-family:"angie-sans",sans-serif;}
.races-classes .races-wrapper{width:75%;margin:20px auto 0}
.races-classes .race-image{float:left;width:20%;text-align:center}
.races-classes .col-left{text-align:left;width:45%;margin:0;padding:30px 5%}
.races-classes .col-right{text-align:left;width:30%;margin:0}
.races-classes ul{text-align:center}
.races-classes ul li{display:inline-block;margin:10px}
.race-info{width:100%;padding:0 17%;margin-top:40px;text-align:center}
#skills{background:#CCC url(../img/system/guild_bg.jpg) center center no-repeat;background-size:cover;font-family:"angie-sans",sans-serif;}
.skill-wrapper{width:65%;margin:40px auto 0;padding-bottom:60px}
.skill-wrapper #race-skill-info{width:70%;padding:0 20px;float:right}
.skill-wrapper #race-skill-img{width:30%;float:left;text-align:right}
.skill-wrapper #race-skill-img img{max-width:320px;width:100%;height:auto}
.skill-wrapper #union-skill-info{width:70%;padding:0 20px;float:left}
.skill-wrapper #union-skill-img{width:30%;float:right;text-align:left}
.skill-wrapper #union-skill-img img{max-width:320px;width:100%;height:auto}
#creation{background:#d6e8bf url("../img/characters/chara_creation_bg.png");background-size:cover;padding-bottom:60px}
#legendary-names{background:#EEE url(../img/characters/legendary_names_bg.png) center center no-repeat;background-size:cover;padding-bottom:60px}
#legendary-name-wrapper{width:65%;margin:0 auto}
#legendary-name-img{float:right;width:25%;text-align:center}
#legendary-name-img img{max-width:400px;width:100%;height:auto}
#legendary-name-info{width:75%;padding:0 30px;float:left;font-family:"angie-sans",sans-serif;}
#legendary-name-info h2{margin:30px auto;font-family:"angie-sans",sans-serif;}
#changing-classes{background:#d6e8bf url("../img/characters/changing_classes_bg.png") center center no-repeat;background-size:cover;padding-bottom:60px}
#changing-classes-wrapper{width:65%;margin:0 auto;}
#changing-classes-img{width:100%;text-align:center}
#changing-classes-img img{max-width:820px;width:100%;height:auto}
#changing-classes-info{width:100%;padding:0 30px;margin-top:30px;font-family:"angie-sans",sans-serif;}
#creation{padding-bottom:60px}
#creation #character-creation-img{width:100%;text-align:center}
#creation #character-creation-img img{width:90%;max-width:900px}
#creation #character-creation-info{width:65%;margin:0 auto;padding:0 30px;font-family:"angie-sans",sans-serif;}
#creation #character-creation-info h2{margin:20px 0;font-family:"angie-sans",sans-serif;}
#alternate-colors{background:url("../img/common/page_bg.jpg") center top no-repeat;background-size:100% auto;padding-bottom:60px}
#alternate-colors #alternate-color-img{width:100%;text-align:center}
#alternate-colors #alternate-color-img img{width:90%;max-width:1037px;height:auto}
#alternate-colors #alternate-color-info{width:65%;padding:0 30px;margin:0 auto;font-family:"angie-sans",sans-serif;color:#FFF;text-shadow:0 0 5px #3d08c5, 0 0 10px #3d08c5, 0 0 15px #3d08c5;font-size:24px}
#character-detail #hero #chara-detail-bg{background:rgba(255,255,255,0.5);padding:40px 0}
#character-detail #hero #character-detail-wrapper{width:65%;margin:0 auto}
#character-detail #hero #character-detail-wrapper .chara-left{width:50%;float:left;padding-top:60px;text-align:left;font-family:"angie-sans",sans-serif;-webkit-text-shadow:0 0 10px #f9ab02,0 0 3px #f9ab02;-moz-text-shadow:0 0 10px #f9ab02,0 0 3px #f9ab02;-o-text-shadow:0 0 10px #f9ab02,0 0 3px #f9ab02;-ms-text-shadow:0 0 10px #f9ab02,0 0 3px #f9ab02;text-shadow:0 0 10px #f9ab02,0 0 3px #f9ab02}
#character-detail #hero #character-detail-wrapper .chara-left .chara-title{font-family: "bodoni-urw",serif;font-size:48px}
#character-detail #hero #character-detail-wrapper .chara-left .alternate-color{width:100%;font-size:24px;text-align:center;background:url(../img/characters/alt_header_bg_left.png) left top no-repeat,url(../img/characters/alt_header_bg_right.png) right bottom no-repeat;background-size:contain}
#character-detail #hero #character-detail-wrapper .chara-left #chara-custom{width:100%}
#character-detail #hero #character-detail-wrapper .chara-left #chara-custom ul{width:100%;display:block;position:relative;text-align:center}
#character-detail #hero #character-detail-wrapper .chara-left #chara-custom ul li{display:inline-block;position:relative;width:24%}
#character-detail #hero #character-detail-wrapper .chara-left #chara-custom ul li img{}
#character-detail #hero #character-detail-wrapper .chara-right{width:50%;float:right}
#character-detail #hero #character-detail-wrapper .chara-right #chara-window{width:100%;position:relative}
#character-detail #hero #character-detail-wrapper .chara-right #chara-window img{width:100%;max-width:500px;height:auto;position:absolute;top:0;left:0;display:none}
#character-detail #hero #character-detail-wrapper .chara-right #chara-window img#img01{display:block}
#character-detail section#character-list{margin:0;padding:0 0 40px;background:url(../img/characters/chara_list_bg.png) left top repeat;}
#character-detail section#character-list .system-section-title{-webkit-text-shadow:0 0 5px #159e78, 0 0 10px #159e78, 0 0 15px #159e78;-o-text-shadow:0 0 5px #159e78, 0 0 10px #159e78, 0 0 15px #159e78;-moz-text-shadow:0 0 5px #159e78, 0 0 10px #159e78, 0 0 15px #159e78;text-shadow:0 0 5px #159e78, 0 0 10px #159e78, 0 0 15px #159e78}
#chara-detail-info{background:#d6e8bf url("../img/system/bg_texture.png") left top repeat;padding:40px 0;}
#chara-detail-info #chara-detail-skills{width:65%;margin:0 auto}
.chara-detail-title{background:url(../img/characters/subtitle_left.png) left center no-repeat,url(../img/characters/subtitle_right.png) right center no-repeat;background-size:15% auto;width:50%;margin:0 auto;padding:0 10%;text-align:center;font-size:36px;font-weight:800;color:#992fb4;-webkit-text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;-moz-text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;-o-text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;-ms-text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;line-height:normal;margin-bottom:40px}
#detail-skills-img{width:47%;float:left;text-align:right}
#detail-skills-img img{max-width:600px;width:100%;height:auto}
#detail-info-text{width:47%;float:right;font-family:"angie-sans",sans-serif;color:#000;font-weight:600;-webkit-text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;-moz-text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;-o-text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;-ms-text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;}
#detail-info-text h3{color:#992fb4;text-align:left;font-weight:800;}
#chara-detail-legendary{margin:40px auto 0;width:65%;}
#chara-detail-legendary .chara-detail-title{background-image:url(../img/characters/header_left.png),url(../img/characters/header_right.png);background-size:70% auto;padding:20px 0;width:100%;background-position:left top,right bottom}
#chara-detail-legendary h3.chara-detail-title{background:url(../img/characters/subtitle_left.png) left center no-repeat,url(../img/characters/subtitle_right.png) right center no-repeat;margin-bottom:0;padding:20px 60px}
.legendary-title{font-family:"kepler-std-display",serif;background:#e4842b;background:-moz-linear-gradient(top,  #e4842b 0%, #db6922 100%);background:-webkit-linear-gradient(top,  #e4842b 0%,#db6922 100%),linear-gradient(to bottom,  #e4842b 0%,#db6922 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4842b', endColorstr='#db6922',GradientType=0 );font-size:30px;font-weight:800;color:#FFF;border-radius:200px;text-align:center;box-shadow:0 0 10px 5px #FFF;margin:20px auto;-webkit-text-shadow:none;-moz-text-shadow:none;-o-text-shadow:none;-ms-text-shadow:none;text-shadow:none;}
#legendary-text-wrapper{font-family:"angie-sans",sans-serif;width:100%;-webkit-text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;-moz-text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;-o-text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;-ms-text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;text-shadow:0 0 3px #FFF,0 0 5px #FFF,0 0 10px #FFF,0 0 10px #FFF;text-align:center}
#legendary-text-wrapper p{text-align:left;margin-bottom:20px;color:#000}
#legendary-text-wrapper img{width:100%;height:auto;max-width:400px;}
#legendary-text-wrapper p.skill-example-title{font-size:24px;color:#992fb4;font-weight:900}
#legendary-img{width:47%;float:left;position:relative}
.flt-left{width:45%;float:left}
.flt-right{width:45%;float:right}

/* System */
body#system{font-size:18px;background-color:#0c276c;}
#system .hero{margin:0;text-align:center}
.system-subsection-title{font-family:"kepler-std-display",serif;font-size:36px;margin-top:40px;background:url(../img/system/system_title_bg.png) center top no-repeat;text-align:center;background-size:auto 100%;}
div.system-title{position:relative;width:100%;font-size:72px;color:#FFF;text-shadow:0 0 5px #000, 0 0 10px #000, 0 0 15px #000;text-align:center;padding:20px 0}
div.system-section-title{position:relative;width:100%;font-size:60px;color:#FFF;text-shadow:0 0 5px #3d08c5, 0 0 10px #3d08c5, 0 0 15px #3d08c5;text-align:center;padding:20px 0;z-index:5}
#system-subnav{background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.65), rgba(0,0,0,0))}
#system-subnav ul{margin:0 auto;text-align:center}
#system-subnav ul li{list-style-type:none;display:inline-block;width:235px;height:75px;font-size:24px;color:#FFF;background:url(../img/btn_purchase.png) left top no-repeat;}
#system-subnav ul li a{color:#FFF;line-height:75px;}
#dungeon{background:url(../img/common/map_01_bg.jpg) center center no-repeat;background-size:cover;margin-top:40px;overflow-y:hidden}
.system-info{width:65%;margin:0 auto 20px;background:url(../img/system/frame01_tl.png) left top no-repeat,url(../img/system/frame01_br.png) right bottom no-repeat;background-size:75% auto;padding:40px 0}
#draw-map{}
#auto-map{background:url(../img/system/frame02_tl.png) left top no-repeat,url(../img/system/frame02_br.png) right bottom no-repeat;background-size:75% auto}
#events{background:url(../img/system/frame03_tl.png) left top no-repeat,url(../img/system/frame03_br.png) right bottom no-repeat;background-size:75% auto}
#adventure{background:url(../img/system/frame01_tl.png) left top no-repeat,url(../img/system/frame01_br.png) right bottom no-repeat;background-size:75% auto;}
#two-girls{background:url(../img/system/frame02_tl.png) left top no-repeat,url(../img/system/frame02_br.png) right bottom no-repeat;background-size:75% auto}
#two-girls .col-right img{width:100%;max-width:460px}
#city-iorys div.pos-relative{position:relative;margin-bottom:40px}
#city-iorys .col-left{display:table;position:absolute;top:35%;left:8%;float:none}
#city-iorys .col-left div{padding:25px;background:rgba(0,0,0,0.4);color:#FFF;text-shadow:0 0 5px #3d08c5, 0 0 10px #3d08c5, 0 0 15px #3d08c5;}
#city-iorys .col-right img{width:75%;max-width:inherit}
.iory-overlay{height:100%;width:100%;background:url(../img/system/system_overlay.png) left top repeat;background-size:5% auto;position:absolute;top:0;left:0;z-index:2}
.iory-bg{position:fixed;height:100%;width:100%;top:0;left:0;z-index:-1}
.iory-bg div{display:none}
.iory-bg img{width:100%;height:auto}
.iory-bg div.pos-fixed{position:fixed;height:100%;width:100%;background:url(../img/system/iory_guild.jpg) center center no-repeat;background-size:cover}
.iory-bg div#iory-marketplace{background-image:url(../img/system/iory_marketplace.jpg)}
.iory-bg div#iory-tavern{background-image:url(../img/system/iory_tavern.jpg)}
.iory-bg div#iory-inn{background-image:url(../img/system/iory_inn.jpg)}
.iory-bg div#iory-council{background-image:url(../img/system/iory_council.jpg)}
#battle-system{background:#d6e8bf url("../img/system/bg_texture.png")}
#battle-system #command-battle{margin-bottom:0}
#guild-cards{background:#CCC url(../img/system/guild_bg.jpg) center center no-repeat;background-size:cover}
#guild-cards #streetpass-02{margin-bottom:0}

/* Media */
#media .hero{margin:0;text-align:center}
.video-bg{width:70%;margin:0 auto;background:rgba(0,0,0,0.5);padding-top:30px}
.video{display:block;margin:0 auto;width:90%}
.video-container {position:relative;padding-bottom:56.25%;padding-top:30px;height: 0;overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
h3.ti_c1_h3_fr{text-align:center;font-family: "garamond-premier-pro","kepler-std-display",serif;font-size:30px;color:#FFF;padding:20px 0;line-height:1;margin:0 auto 30px;width:100%;background:rgba(0,0,0,0.5);text-shadow:0 0 5px #8eb1ff}

/* Purchase - Home */
#purchase{position:relative;z-index:20;padding:50px 0;background:rgba(0,0,0,0.75);color:#FFF;text-align:center}
#purchase div.purchase-container{width:80%;margin:0 auto}
#purchase div.purchase-link{display:inline-block;width:235px;height:75px;background:url(../img/btn_purchase.png) left top no-repeat;font-size:24px;color:#FFF;position:relative;}
#purchase div.purchase-link.comingsoon:before{content:url(../img/btn_purchase_comingsoon.png);position:absolute;top:0;left:0;z-index:9999}
#purchase div.purchase-link a{color:#FFF;vertical-align:middle;line-height:75px}
#purchase h2{font-size:36px;text-align:center;font-weight:800;color:#fbb462;-moz-text-shadow:2px 2px 0 #253361,0 2px 0 #253361,2px 0 0 #253361,-2px -2px 0 #253361,-2px 0 0 #253361,0 -2px 0 #253361,2px -2px 0 #253361,-2px 2px 0 #253361;-webkit-text-shadow:2px 2px 0 #253361,0 2px 0 #253361,2px 0 0 #253361,-2px -2px 0 #253361,-2px 0 0 #253361,0 -2px 0 #253361,2px -2px 0 #253361,-2px 2px 0 #253361;text-shadow:2px 2px 0 #253361,0 2px 0 #253361,2px 0 0 #253361,-2px -2px 0 #253361,-2px 0 0 #253361,0 -2px 0 #253361,2px -2px 0 #253361,-2px 2px 0 #253361;}

/* Purchase - page */
body#purchase-page{font-size:18px;background-color:#0c276c}
#purchase-page .hero{margin:0;text-align:center}
.product-shot{text-align:center;margin-bottom:60px}
.product-shot img{width:75%;height:auto}

/* misc */
.table{display:table;width:100%}
.table-cell{display:table-cell;vertical-align:middle}
hr.fade {border: 0;height: 2px;margin:0;background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));}
hr.curl {height: 30px;border-style: solid;border-color:#FFF;border-width: 1px 0 0 0;border-radius: 20px;width:90%}
hr.curl:before {display: block;content: "";height: 30px;margin-top: -31px;border-style: solid;border-color:#FFF;border-width: 0 0 1px 0;border-radius: 20px;}
@media (max-width:1690px){
	.about{width:60%}
	.hero div.header-title{top:64%;left:22%}
	#intro div.text-body{width:60%}
	img.game-logo-sub{width:50%}
}
@media (max-width:1280px){
	.about{width:75%}
	.hero div.header-title{top:62%;left:15%}
	#intro div.text-body{width:75%}
	.about div.text-title{font-size:36px}
	#city-iorys .col-left{top:15%}
}
@media (max-width: 1096px) {
.text_column{width:100%}
.thumbnail{width:50%}
.text_column{width:100%;margin:0;padding:0}
.banner{margin-top:0;padding-top:0}
.hamburger{display:block;outline:none;border:0;z-index:99999}
header #console{float:none;text-align:center;position:absolute;width:100%}
header nav ul{list-style:none;position:relative;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0)'; /*IE8 */ filter: progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0); /*IE6, IE7*/ transform:none; }
header nav{position:relative;float:none}
nav ul li{display:block;width:100%}
ul li a{color:#000;text-decoration:none}
header #social{float:none;position:absolute;top:0;right:10px;z-index:9999}
header #console{display:none}
	img.game-logo-sub{width:70%}
	#character-detail #hero #character-detail-wrapper{width:75%}
	#character-detail #hero #character-detail-wrapper .chara-left{width:100%}
	#character-detail #hero #character-detail-wrapper .chara-left #chara-desc{width:50%}
	#character-detail #hero #character-detail-wrapper .chara-left #chara-custom{width:75%;margin:60px auto 0}
	#character-detail #hero #character-detail-wrapper .chara-right #chara-window{margin-top:-125px}
}
@media (max-width:1080px){
	.hero div.header-title{top:60%;left:7%}
	.about{width:90%}
	#intro{background-size:auto}
	#intro div.text-body{width:90%}
	.system-info{width:90%}
	#system .col-left{float:none;position:relative;margin:0 auto;width:80%;text-align:center;padding:0;left:0}
	#system .col-right{float:none;position:relative;width:90%;margin:0 auto;right:0}
	#system .col-right img{width:90%;height:auto}
	#system #city-iorys .col-left{margin-top:-10%}
	#system #city-iorys .col-right img{width:45%}
	#city-iorys{padding-bottom:60px}
	#battle-system{padding-bottom:60px}
	#guild-cards{padding-bottom:60px}
	#character-detail #detail-skills-img{float:none;width:90%}
	#character-detail #detail-info-text{width:90%;float:none}
	#chara-detail-info #chara-detail-skills{width:90%}
	#character-detail #chara-detail-legendary{width:90%}
	#character-detail #legendary-text-wrapper .flt-left,#character-detail #legendary-text-wrapper .flt-right{float:none;width:90%;margin:0 auto}
	
}
@media (max-width: 767px) {
	.hero div.header-title{top:55%}
	.logo{width:100%;text-align:center;color:#043745;margin:13px 0 0}
	.container header nav{width:100%;float:none;overflow:auto;display:inline-block;margin:0}
	header #console{width:100%;float:none;text-align:center}
	header #social{width:80%;float:none}
	header #social ul{margin:0 auto}
	header nav ul{padding:0;float:none}
	nav ul li{width:100%;text-align:center;padding-top:8px;padding-bottom:8px;margin:0}
	.hero{margin-bottom:-20%}
	.about div.text-title{padding:0 20px}
	.about{width:100%;background-size:auto;background-position:center center}
	.text_column{width:100%;text-align:left;padding:0}
	.thumbnail{width:100%}
	.footer_column{width:100%;margin-top:0}
	.parallax{text-align:center;width:100%;font-size:18px;margin:0;padding:40% 0 0}
	.parallax_description{float:none;width:100%;text-align:center;margin:30% 0 0;padding:0}
	.thumbnail{width:50%}
	.parallax{margin:0;padding:20% 0 0}
	.parallax_description{width:100%;padding-top:30px;margin:0}
	.banner{padding-left:20px;padding-right:20px}
	.footer_column{width:100%}
	.footer_banner{display:block}
	.footer_banner div{display:block;width:100%;text-align:center;padding:10px 0}
	/* characters */
	#skills .system-subsection-title{margin-top:0}
	.skill-wrapper{width:100%;margin:40px auto 0;padding-bottom:60px}
	.skill-wrapper #race-skill-info{width:100%;padding:20px 30px;float:none;margin:0}
	.skill-wrapper #race-skill-img{width:100%;float:none;text-align:center}
	.skill-wrapper #race-skill-img img{max-width:320px;width:100%;height:auto}
	.skill-wrapper #union-skill-info{width:90%;padding:20px;float:none;margin:0 auto}
	.skill-wrapper #union-skill-img{width:100%;float:none;text-align:center}
	.skill-wrapper #union-skill-img img{max-width:320px;width:100%;height:auto}
	#creation #character-creation-info{width:100%}
	#legendary-name-wrapper{width:100%}
	#legendary-name-img{float:none;width:100%}
	#legendary-name-img img{width:90%}
	#legendary-name-info{width:100%;float:none;margin-top:30px}
	#changing-classes-wrapper{width:100%}
	#changing-classes-img img{width:90%}
	#changing-classes-info{width:100%;padding:0 30px;margin-top:30px}
	#character-detail #hero #character-detail-wrapper{width:85%}
	#character-detail #hero #character-detail-wrapper .chara-left{width:100%}
	#character-detail #hero #character-detail-wrapper .chara-left #chara-desc{width:50%}
	#character-detail #hero #character-detail-wrapper .chara-right #chara-window{margin-top:-80px}
}
@media (max-width:480px){
	.hero{margin-bottom:-10%}
	.hero div.header-title{z-index:99999}
	.hero #release-date{width:50%;top:58%;left:45%}
	.hero #video-trailer{width:30%;top:42%}
}
@media (max-width: 320px) {
	.hero div.header-title{display:none}
	.logo{width:100%;text-align:center;margin:13px 0 0}
	header #social{display:none}
.container header nav{width:100%;float:none;margin:0}
nav ul li{width:100%;text-align:center;margin:0}
.text_column{width:100%;text-align:justify;padding:0}
.thumbnail{width:100%}
.footer_column{width:100%;margin-top:0}
.parallax{text-align:center;width:100%;font-size:18px;margin:0;padding:40% 0 0}
.parallax_description{width:90%;float:none;text-align:center;margin:25px 0 0 12px;padding:0}
.banner{background-color:#2D9AB7;background-image:none}
.tagline{margin-top:20px;line-height:22px}
.hero_header{padding-left:10px;padding-right:10px;line-height:22px;text-align:center}
}

.index-1{z-index:1}
.index-5{z-index:5}
.index-10{z-index:10}
.index-20{z-index:20}
.index-40{z-index:40}
.index-100{z-index:100}
.index-500{z-index:500}
.index-1000{z-index:1000}
.index-9999{z-index:9999}
.index-99999{z-index:99999}
.index-999999{z-index:999999}

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