@charset "utf-8";
/* CSS Document */
html,body{margin:0;padding:0;height:100%}
ul{margin:0}
#wrapper{min-height:100%;position:relative}
.inner{max-width:1600px;margin:0 auto}
#scrollup{width:150px;height:150px;position:fixed;bottom:50px;right:20px;display:none;text-indent:-9999px;border-radius:2px;cursor:pointer;opacity:.9}
#scrollup:hover{opacity:1}
#scrollup img{display:block}
.active{color:#090!important}

/*********** Header Styles ***********/
.header{position:fixed;width:100%;z-index:3}
.header-border { background:url('../img/header_bg.png') repeat-x; width: 100%; height: 148px; }
.header .logo{display:block;float:left;font-size:2em;padding:10px 20px;text-decoration:none; z-index:3; position:absolute; max-width:90%; height:auto;}
.header ul{margin:0;padding:0;list-style:none;overflow:hidden; z-index:3; float:left;}
.header li a{ font-family: "almaq-rough", sans-serif; font-size:1.3em; color:#000; display:block;padding:20px;border-right:2px solid #DDD; text-transform:uppercase; text-decoration:none;}
.header li a:hover,.header .menu-btn:hover{color:#339900;}
.header .menu{clear:both;max-height:0;transition:max-height .2s ease-out}
.header .menu-icon{cursor:pointer;display:inline-block;float:right;padding:28px 20px;position:relative;user-select:none; z-index:4; /*margin-bottom:70px;*/}
.header .menu-icon .navicon{background:#333;display:block;height:2px;position:relative;transition:background .2s ease-out;width:18px}
.header .menu-icon .navicon:before,.header .menu-icon .navicon:after{background:#333;content:'';display:block;height:100%;position:absolute;transition:all .2s ease-out;width:100%}
.header .menu-icon .navicon:before{top:5px}
.header .menu-icon .navicon:after{top:-5px}
.header .menu-btn{display:none}
.header .menu-btn:checked ~ .menu{max-height:450px; width:100%; background:#FFF; text-align:center; }
.header .menu-btn:checked ~ .menu-icon .navicon{background:transparent}
.header .menu-btn:checked ~ .menu-icon .navicon:before{transform:rotate(-45deg)}
.header .menu-btn:checked ~ .menu-icon .navicon:after{transform:rotate(45deg)}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after{top:0}

@media (min-width: 48em) {
.header li{float:left;}
.header li a{padding: 5px 10px;margin-top: 15px; /*text-shadow: 1px 1px 10px #009900*/; }
.header .menu{clear:none;float:right;max-height:none}
.header .menu-icon{display:none}
}

/*********** Home Banner ***********/
#homebanner{width:100%;height:100%;min-width:500px;top:0;left:0}
#homebanner-bg{width:100%;height:auto}
#description img{width:40%;height:auto;position:absolute;top:3%;right:1%;z-index:1}
#trailer img{width:25%;height:auto;position:absolute;top:13%;right:10%;z-index:0}

/*********** Content Styles ***********/
#content{padding-top:80px;padding-bottom:550px}
section{text-align:center}
section#story{background:url(../img/bg/city-bg.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;margin-top:-140px}
section#story img{max-width:100%;height:auto;margin-bottom:20px;margin-top:140px}

/* Media Section */
section#media {     margin-top: -75px;}
#media .subtitle { text-align:left; margin:0px; position: absolute; margin-top: -90px; margin-left: 2%; }
#media .subtitle img { max-width:50%; height:auto; }
.media-top-border { background:url('../img/media-top_bg.png') repeat-x; width: 100%; height: 75px; margin-bottom:-5px; }
.media-bottom-border { background:url('../img/media-bottom_bg.png') repeat-x; width: 100%; height: 75px; margin-bottom:-5px; z-index: 0; position: relative; }
#screenshots{background: url(../img/index/media-bg.png) center top no-repeat;background-size:100% auto}
#screenshots #screen-table{width:75%;margin:0 auto;display:table;table-layout:fixed;border-collapse:separate;border-spacing:1%;text-align:center;top:17%;left:15%}
#screenshots #screen-table .screen-row{width:100%;display:table-row}
#screenshots #screen-table .screen-row .screen-thumb{display:table-cell;width:25%;vertical-align:middle;padding:1.5% 0}
#screenshots #screen-table .screen-row .screen-thumb img{width:90%;height:auto;border:1px #FFF solid}
section#purchase {}
section#world{}
section#characters{}
section#demons{}
section#system{}
section#system div img { margin-bottom:0px !important; margin-top:100px !important;}
section#dlc{}
#content .subtitle { text-align:left; margin:0px; float:left; width:100%; }
#content .subtitle img { max-width:40%; height:auto; margin-top:40px; margin-bottom:0px; width:auto; }
section#world div img, section#characters div img, section#demons div img, section#system div img, section#dlc div img, section#purchase div img{ /*max-width:100%;*/ height:auto; /*margin-bottom: -50px;*/ margin-bottom: -300px; /*width:700px*/ }
section#world div img { margin-bottom:-100px !important; }
section#world div.subtitle img { margin-bottom:0px !important; }

/*Character Styles*/
.nanashi { text-align: center; }
.asahi { text-align: left; }
.navarre { text-align: right; }
.navarre img { margin-top:-200px;}
.nozomi { text-align: left; }
.hallelujah { text-align: right; }
.cironnup { text-align: center; }
.cironnup img {  margin-left: -330px; margin-top: -100px; }
.gaston { text-align: left; }
.toki { text-align: right; }
.isabeau { text-align: left; }

.flynn { text-align: center; }
.jonathan { text-align: left; }
.walter { text-align: right; }
.t-and-k { text-align: left; }

.dagda { text-align: center; }
.danu { text-align: left; }
.krishna { text-align: right; }
.odin { text-align: center; }
.miroku { text-align: left; }
.merkabah { text-align: right; }
.lucifer { text-align: left; }
.adramelech { text-align: right; }
.inanna { text-align: center; }
.tenkai { text-align: left; }
.sukunahikona { text-align: center; }
.medusa { text-align: left; }
.napaeae { text-align: right; }
.kentauros { text-align: left; }

/*Purchase Page*/
section#homepurchase{background:url(../img/bg/purchase-bg.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;margin-top:-70px}
section#purchase #glamshot img { /*width: 100%; max-width: 700px;*/ margin:0px;}
#purchase-links { font-family: "almaq-rough", sans-serif; text-transform:uppercase; /*font-size:18px; width: 80%; margin: 0 auto;*/ text-align:center; }
#purchase-links ul { width:100%; list-style:none; }
#purchase-links li { display:inline-block; margin:10px 10px; width: 250px;background: url('../img/bg/texture-13.png') #339900; /*padding: 10px;*/ border: 2px solid #000000; text-align:center; box-shadow: 2px 2px 5px #000000; }
#purchase-links li:nth-child(3n) {    -ms-transform: rotate(1deg); /* IE 9 */-webkit-transform: rotate(1deg); /* Safari */transform: rotate(1deg);}
#purchase-links li:nth-child(4n) {    -ms-transform: rotate(-2deg); /* IE 9 */-webkit-transform: rotate(-2deg); /* Safari */transform: rotate(-2deg);}
#purchase-links a { font-size:20px; color:#FFF; text-decoration:none; display:block; padding: 10px; text-shadow:5px 5px 5px #000000; letter-spacing: 1px; }
#purchase-links li:hover { background: url('../img/bg/texture-13.png') #333300; border: 2px solid #000000; -moz-box-shadow: 0 0 15px #990000;
-webkit-box-shadow: 0 0 5px #00cc00;
box-shadow: 0px 0px 5px #00cc00; }
.not-active { text-decoration:line-through; color:#999 !important; pointer-events: none; cursor: default; }

.subnav-links {}

/*********** Footer Styles ***********/
#footer{width:100%;min-height:250px;position:absolute;bottom:0;left:0}
.footer-border{background:url(../img/footer_bg.png) repeat-x;width:100%;height:75px;margin-bottom:-5px}
.footer-inner{background:#FFF}
#social{text-align:center}
#social li{display:inline-block}
#social li a img{width:100px;height:auto}
#disclaimer{width:75%;max-width:1728px;margin:0 auto;text-align:center;font-family:Arial,Helvetica,Verdana,sans-serif;padding-bottom:30px}
#disclaimer li{display:inline-block;padding:5px}
#disclaimer li#esrb{min-width:157px;height:auto}
#disclaimer li#esrb img{height:72px;vertical-align:middle}
#disclaimer li#esrbPolicy img{height:72px;vertical-align:middle}
#disclaimer li#atlus img{width:100%;height:auto;max-width:100px}
#disclaimer li#nintendo3ds img{width:100%;height:auto;max-width:180px}
#disclaimer li#legal{text-align:left;font-size:10px}


/*********** Responsive Styles ***********/
@media (max-width:1068px){
}

@media (max-width:900px){
}o

@media (max-width:920px){
	.header .logo img { width:180px; }
	#scrollup { width: 60px; height: 50px;}
	#scrollup img { width:90px; }
	.subnav-links { display: none; }
	#disclaimer li#legal { text-align: center; }
	section#world div img, section#characters div img, section#demons div img, section#system div img, section#dlc div img, section#purchase div img{ width: 100%; margin-bottom:0px; }
	.navarre img { margin:0px;}
	.cironnup img { margin:0px; }
	#glamshot img { max-width:100%; }
	#description img{ top:4%; }
}

@media (max-width:480px){
	#content .subtitle img { max-width:100%; }
	#social { display:none; }
}
/*footer addition*/
.fade-border{display: block;border: 0;height: 1px;width: 90%;margin: 0 auto;background-image: linear-gradient(to right, rgba(0,153,0,0), rgba(0,153,0,1), rgba(0,153,0,0));}
#footer-2{color: #000;text-align: center;width: 100%;margin: 0 auto;background-color: white;}
#footer-2 a{color:#009900;text-decoration:none;font-size:15px;display:inline-block;padding:20px}