@charset "UTF-8";
/* CSS Document */




html {
	scroll-behavior: smooth;
}




nav#main-navigation1,
nav#main-navigation2 {
	display: none;
}




#subpage-mainlogo {
	width: 190px;
	margin: 2% 0 0 2%;
	padding: 0;
	float: left;
	display: none;
}

#subpage-mainlogo img {
	width: 100%;
}

#subpage-maintitle-mob {
	width: 60%;
	margin: 2% 0 0 2%;
	padding: 0;
	float: left;
	background-image: url(../images/maintitlebg.png);
	background-size: 100%;
}

#subpage-maintitle-mob img {
	width: 100%;
}

#subpage-title-container {
	display: none;
}



.triangles1,
.triangles2 {
	display: none;
}




#tx-container {
	color: #fff;
	text-shadow:
		#00afff 1px 1px 2px, #00afff -1px 1px 2px,
		#00afff 1px -1px 2px, #00afff -1px -1px 2px;
	text-align: center;
	z-index: 1;
	position: fixed;
	top: 0;
	line-height: 1.5em;
}

#tx-container #content01,
#tx-container #content03 {
	width: 100%;
	background-image: url(../images/subpages/bg-sq.jpg);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: 50% 50%;
	margin: 0;
	padding: 30% 10% 10% 10%;
}

.welcome-container #content02,
.story-container #content02 {
	width: 100%;
	background-image: url(../welcome/images/keyvisual-mob.jpg);
	background-size: 100%;
	background-position: 75% 0;
	background-repeat: no-repeat;
	height: 55vw;
	padding: 10%;
}

.story-container #content02 {
	background-image: url(../story/images/characters-mob.jpg);
	background-position: 0 0;
	height: 63vw;
}

#tx-container #content03 {
	padding-top: 10%;
}

#tx-container .catch {
	/*font-size: 1.4em;*/
}

#tx-container .copy1,
#tx-container .copy2 {
	margin-top: 4%;
}

#tx-container #content02 .catch,
#tx-container #content02 .copy1,
#tx-container #content02 .copy2,
.story-container #content02 img {
	display: none;
}

footer.welcome-footer,
footer.story-footer {
	z-index: 9998;
	position: relative;
	top: 0;
	margin-top: 2000px;
}

footer.story-footer {
	/*margin-top: 2100px;*/
	margin-top: 0;
}




#story-container-noimg {
	width: 100%;
	margin: 0;
	padding: 30% 0 120px 0;
	background-image: url(../images/subpages/bg-mob.jpg);
	background-repeat: repeat-y;
	background-size: 150%;
	background-position: center top;
	
	color: #fff;
	text-shadow:
		#00afff 1px 1px 2px, #00afff -1px 1px 2px,
		#00afff 1px -1px 2px, #00afff -1px -1px 2px;
	text-align: center;
	line-height: 1.5em;
}

#story-container-noimg .inner {
	width: 80%;
	margin: 0 10%;
}




main#characters {
	background-color: #000;
	background-image: url(../characters/images/index/charactersbg1.jpg);
	background-repeat: repeat-y;
	background-size: 100%;
	background-position: 50% 0;
	min-height: 1000px;
	padding-top: 30%;
}

#servants-list,
#master-list {
	width: 94%;
	margin: 0 3%;
	padding: 50px 0 0 0;
}

#master-list {
	padding-bottom: 50px;
}
#servants-list .inner {
	width: 103%;
	margin: 0 0 0 -3%;
	padding: 0;
}

#master-list .inner {
	width: 100%;
	margin: 0;
	padding: 0;
}

#servants-list .charbtn {
	width: 47%;
	margin: 3% 0 0 3%;
	padding: 0;
	float: left;
	display: inline;
	background-repeat: no-repeat;
	background-size: 100%;
}

#master-list .charbtn {
	width: 60%;
	margin: 3% 20%;
	padding: 0;
	background-repeat: no-repeat;
	background-size: 100%;
}

#servants-list .charbtn img,
#master-list .charbtn img {
	width: 100%;
}

#servants-list .charbtn img:hover,
#master-list .charbtn img:hover {
	opacity: 0;
}

#character-top {
	width: 100%;
	background-color: #000;
	background-image: url(../characters/images/charbg.jpg);
	background-size: 200%;
	background-repeat: no-repeat;
	background-position: 50% 0;
	overflow: hidden;
}

#character-top .character-container-l,
#character-top .character-container-m,
#character-top .character-container-s {
	width: 100%;
	height: 1100px;
	overflow: hidden;
}

#character-top .master {
	height: 900px !important;
}

#character-top .character-container-l img.character-img,
#character-top .character-container-m img.character-img,
#character-top .character-container-s img.character-img {
	/*width: 170%;
	margin: 0 0 0 -38%;*/
	display: none;
}

#character-imgbg {
	width: 100%;
	height: 1100px;
	background-size: 170%;
	background-position: 55% top;
	background-repeat: no-repeat;
	z-index: 50;
}

/*#character-top .master img.character-img {
	width: 150% !important;
	margin: 0 0 0 -28% !important;
}

#character-top .lancelot img.character-img {
	width: 200% !important;
	margin: 10% 0 0 -70%;
}

#character-top .altera img.character-img {
	width: 200% !important;
	margin-left: -30%;
}

#character-top .lishuwen img.character-img {
	margin-left: -6%;
}*/

#character-top .astolfo #character-imgbg {
	background-position: 65% 10%;
}

#character-top .lancelot #character-imgbg {
	background-size: 200%;
	background-position: 75% 5%;
}

#character-top .lishuwen #character-imgbg {
	background-size: 200%;
	background-position: 25% 5%;
}

#character-top .altera #character-imgbg {
	background-size: 200%;
	background-position: 30% 5%;
}

#character-top .medusa #character-imgbg {
	background-position: 45% 5%;
}




#character-top .character-info {
	width: 94%;
	margin: 400px 3% 0 3%;
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
}

#character-top .character-info img.character-class {
	width: 50%;
}

#character-top .character-info img.character-name {
	width: 100%;
}

#character-top .character-gallery {
	width: 100%;
	height: 72vw;
	margin: 0;
	background-image: url(../characters/images/character-gallery800.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

#character-top .character-gallery img {
	width: 100%;
	margin: 0;
}

#other-characters {
	width: 100%;
	height: 100px;
	margin: 0;
	padding: 0;
	background: rgba(0, 255, 255, .3);
}




.character-profile {
	width: 100%;
}

.character-profile-top {
	width: 100%;
	margin: 0;
	padding: 0;
}

.character-profile-bottom {
	width: 100%;
	margin: -1px 0 0 0;
	padding: 0;
}

.character-profile-top img {
	width: 100%;
	vertical-align: bottom;
}

.character-profile-bottom img {
	width: 100%;
}

.character-profile-body {
	width: 100%;
	margin: -1px 0 0 0;
	padding: 20px 20px 5px 20px;
	background-image: url(../characters/images/character-profile-bg.png);
	background-size: 100%;
	background-position: 0 0;
	background-repeat: repeat-y;
	color: #fff;
	font-family: 'Ubuntu', 'Sanchez', serif;
	font-weight: 300;
	font-size: 0.9em;
}

.character-container-l .character-profile-body {
}

.character-container-m .character-profile-body {
	line-height: 1.55em;
}

.character-container-s .character-profile-body {
	font-size: 1em;
	line-height: 1.9em;
}

.character-profile-body .inner {
	width: 100%;
	background-image: url(../characters/images/character-profile-grid.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: left top;
}

.char-noblephantasm span {
	font-weight: bold;
}




#le-container {
	width: 100%;
	margin: 0;
	padding: 30% 0 10% 0;
	background-color: #000;
	background-image: url(../images/subpages/bg-mob.jpg);
	background-repeat: repeat-y;
	background-size: 100%;
}

#le-container .inner{
	max-width: 1200px;
	margin: 0 auto;
}

#le-container #le-ps4,
#le-container #le-nsw {
	width: 46%;
	margin: 0 0 0 3%;
	padding: 0;
	float: left;
	display: inline;
}

#le-container #le-nsw {
	margin: 0 3% 0 2%;
}

#le-container .box-top img {
	width: 100%;
	vertical-align: bottom;
}

#le-container .box-bottom img {
	width: 100%;
	vertical-align: top;
}

#le-container .box-body {
	width: 100%;
	margin: 0;
	padding: 0;
	background-image: url(../fleetinggloryedition/images/box-body.png);
	background-size: 100%;
	background-repeat: repeat-y;
}

#le-container .box-body img {
	width: 90%;
	margin: 5%;
	padding: 0;
}

#le-container .contents-list {
	width: 90%;
	margin: 5%;
	padding: 5%;
	font-size: 0.9em;
	background: rgba(255, 255, 255, .2);
	color: #fff;
	box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.3);
}

#le-container .contents-list ul li {
	padding: 5px 0 5px 26px;
	background-image: url(../characters/images/arrow.png);
	background-size: 22px 22px;
	background-position: 0 50%;
	background-repeat: no-repeat;
}

#le-purchase {
	width: 94%;
	max-width: 1000px;
	margin: 3% auto;
	padding: 0;
	text-align: center;
}

#le-purchase h2 {
	color: #fff;
	margin-top: 10%;
	font-size: 1.8em;
	text-shadow:
		#00afff 1px 1px 2px, #00afff -1px 1px 2px,
		#00afff 1px -1px 2px, #00afff -1px -1px 2px;
}

.le-purchase-ps4,
.le-purchase-nsw {
	width: 49%;
	margin: 0;
	color: #fff;
	float: left;
	display: inline;
	border: 3px solid #fff;
	
	border-radius: 10px 10px 0 0;
	background: rgba(0, 51, 255, .2);
}

.le-purchase-nsw {
	margin-left: 2%;
	background: rgba(255, 0, 0, .2);
}

.le-purchase-ps4 a,
.le-purchase-nsw a {
	padding-left: 26px;
	color: #fff;
	text-decoration: none;
	-webkit-transition: all ease .3;
	-moz-transition: all ease .3;
	transition: all ease .3;
	
	background-image: url(../characters/images/arrow.png);
	background-size: 22px 22px;
	background-position: 0 50%;
	background-repeat: no-repeat;
}

.le-purchase-ps4 a:hover,
.le-purchase-nsw a:hover {
	color: #a5daef;
	text-shadow: 0 0 6px #7ac9e9;
}

#container img.console {
	width: 60%;
	max-width: 200px;
	margin: 0 10%;
}

.retailer-container {
	font-family: 'Ubuntu', arial;
	font-weight: 300;
	font-size: 0.9em;
}

.retailer-logo {
	width: 100%;
	height: 40px;
	background: #fff;
}

.retailer-container img {
	height: 40px;
}

#le-purchase ul li {
	border-top: 1px solid #fff;
	padding: 20px 0;
}








#multiplayer-container,
#gameplay-container,
#features-container,
#multimedia-container {
	width: 100%;
	margin: 0;
	padding: 30% 0 0 0;
	background-image: url(../images/subpages/bg-mob.jpg);
	background-size: 150%;
	background-repeat: repeat-y;
	background-position: center top;
}

#multimedia-container {
	padding-bottom: 20%;
}

#multiplayer-container h2,
#gameplay-container h2,
#multimedia-container h2,
#characters h2 {
	color: #fff;
	text-shadow:
		#00afff 1px 1px 2px, #00afff -1px 1px 2px,
		#00afff 1px -1px 2px, #00afff -1px -1px 2px;
	padding: 0 5% 5% 5%;
	margin: 0;
	text-align: center;
}

.tx-only-container {
	padding-bottom: 7%;
}




h2.sectitle {
	width: 100%;
	margin: 0 !important;
	padding: 2% 0 7% 0 !important;
	z-index: 10;
	position: relative;
}

h2.sectitle img {
	width: 240px;
	margin: 0 auto;
	padding: 0;
}


.slider-tx-container .slider-tx-top,
.slider-tx-container .slider-tx-bottom {
	display: none;
}

.slider-tx-container .slider-tx-body,
.tx-only .slider-tx-body {
	color: #fff;
	text-shadow:
		#00afff 1px 1px 2px, #00afff -1px 1px 2px,
		#00afff 1px -1px 2px, #00afff -1px -1px 2px;
	padding: 0 10% 10% 10%;
	margin-top: -1px;
	text-align: center;
	font-size: 1em;
	line-height: 1.5em;
}

.slider-tx-container .slider-tx-body h3,
.slider-tx-container .slider-tx-body span,
.tx-only .slider-tx-body h3 {
	font-size: 1.3em;
}

.slider-tx-container .slider-tx-body h3,
.tx-only .slider-tx-body h3 {
	text-transform: uppercase;
	margin: 30px 0 0 0;
}


.slider-tx-container .slider-container {
	width: 100%;
	margin: 0;
	border: 0;
	overflow: hidden;
}

.slider-tx-container .slider-container .flexslider {
	width: 88%;
	margin: 0 6%;
	padding-bottom: 40px;
}

.slider-tx-container .slider-container .flexslider img {
	padding: 0;
}

.slider-tx-container .img-container .inner {
	width: 88%;
	margin: 0 6%;
}

.slider-tx-container .img-container img {
	width: 100%;
}

.slider-tx-body ul li {
	padding: 10px 0;
}

.slider-tx-body ul li span {
	text-shadow: none;
}

.slider-tx-body ul li.red span {
	color: red;
}

.slider-tx-body ul li.blue span {
	color: #00a7ff;
}

.slider-tx-body ul li.yellow span {
	color: yellow;
}

.lity-opened img {
	border: 4px solid #589ef4 !important;
}

#lightcase-content img {
	border: 4px solid #589ef4 !important;
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	box-sizing: border-box !important;
}




#multimedia-container a {
	color: #fff;
}

#multimedia-container a:hover {
	color: #ffff00;
}




#anchors {
	width: 90%;
	max-width: 700px;
	margin: 0 auto;
	padding: 0;
}

#anchors .inner {
	width: 103%;
	margin: 0 0 0 -3%;
}

#anchors img {
	width: 30.3%;
	margin: 0 0 0 3%;
	float: left;
	display: inline;
}

#anchors a img:hover {
	background-image: url(../multimedia/images/anchors_ov.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
}

main#characters #anchors {
	max-width: 400px;
}

main#characters #anchors img {
	width: 47%;
	margin: 0 0 0 3%;
	float: left;
	display: inline;
}




#trailers-container {
	margin: 12% 0 20% 0;
}

.resvid {
	width: 94%;
	margin: 0 3% 5% 3%;
	border: 3px solid #fff;
	padding: 10px;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.border {
	border: 1px solid #ffff00;
}

.resvid .video {
	position: relative;
	height: 0;
	padding: 0 0 56.25%;
	overflow: hidden;
}

.resvid .video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}




#wallpapers-container,
#twitterbanner-container {
	text-align: center;
	margin-bottom: 20%;
	color: #fff;
}

#twitterbanner-container {
	margin-bottom: 0;
}


#wallpapers-container .item,
#twitterbanner-container .item  {
	width: 94%;
	margin: 0 3% 5% 3%;
	border: 3px solid #fff;
	padding: 10px 10px 0 10px;
	
	background: rgba(0, 51, 255, 0.2);
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#wallpapers-container .item img,
#twitterbanner-container .item img {
	width: 100%;
	vertical-align: bottom;
}




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

	footer.welcome-footer {
		margin-top: 1900px;
	}
	
	footer.story-footer {
		/*margin-top: 2000px;*/
		margin-top: 0;
	}
	
	#character-top .character-container-l,
	#character-top .character-container-m,
	#character-top .character-container-s {
		height: 1130px;
	}
	
	#character-imgbg {
		height: 1130px;
	}

}




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

	footer.welcome-footer {
		margin-top: 1800px;
	}
	
	footer.story-footer {
		/*margin-top: 1900px;*/
		margin-top: 0;
	}

	#servants-list,
	#master-list {
	width: 94%;
	margin: 0 3%;
	padding: 80px 0 0 0;
	}
	
	#character-top .character-container-l,
	#character-top .character-container-m,
	#character-top .character-container-s {
		height: 1180px;
	}
	
	#character-imgbg {
		height: 1180px;
	}
	
	#character-top .character-container-master {
		height: 1000px !important;
	}
	
	#character-top .character-container-l img.character-img,
	#character-top .character-container-m img.character-img,
	#character-top .character-container-s img.character-img {
		width: 180%;
		margin: 0 0 0 -40%;
	}
	
	/*#character-top .lancelot img.character-img {
		margin: 0 0 0 -80%;
	}
	
	#character-top .altera img.character-img {
		margin-left: -30%;
	}
	
	#character-top .lishuwen img.character-img {
		margin-left: -6%;
	}*/
	
	#character-top .lancelot #character-imgbg {
		background-position: 80% 0;
	}
	
	#character-top .lishuwen #character-imgbg {
		background-position: 20% 5%;
	}

}




@media screen and (min-width: 540px) {
	
	#tx-container #content01,
	#tx-container #content03 {
		background-size: 100% auto;
		background-position: bottom;
		line-height: 1.5em;
	}
	
	#tx-container #content02 {
		line-height: 1.5em;
	}

	footer.welcome-footer {
		margin-top: 1900px;
	}
	
	footer.story-footer {
		/*margin-top: 2000px;*/
		margin-top: 0;
	}
	
	
	

	#character-top .character-container-l,
	#character-top .character-container-m,
	#character-top .character-container-s {
		height: 1230px;
	}
	
	#character-top .character-container-l img.character-img,
	#character-top .character-container-m img.character-img,
	#character-top .character-container-s img.character-img {
		/*width: 160%;
		margin: 0 0 0 -35%;*/
	}
	
	#character-imgbg {
		width: 100%;
		height: 1230px;
		background-size: 160%;
		background-position: 55% top;
		background-repeat: no-repeat;
		z-index: 50;
	}
	
	/*#character-top .lancelot img.character-img {
		width: 180% !important;
		margin: 0 0 0 -60%;
	}
	
	#character-top .altera img.character-img {
		margin-left: -30%;
	}
	
	#character-top .lishuwen img.character-img {
		margin-left: -6%;
	}*/
	
	#character-top .lancelot #character-imgbg {
		background-size: 180%;
		background-position: 80% 0;
	}
	
	#character-top .lishuwen #character-imgbg {
		background-position: 20% 0%;
	}
	
	#character-top .character-info {
		margin-top: 500px;
	}
	
	#character-top .character-gallery {
		width: 75%;
		background-image: url(../characters/images/character-gallery.png);
	}
	
	.no540 {
		display: none;
	}

}




@media screen and (min-width: 640px) {
	
	#servants-list,
	#master-list {
		padding-top: 80px;
	}
	
	#master-list {
		padding-bottom: 80px;
	}
	
	#servants-list .charbtn {
		width: 30.3%;
	}
	
	#servants-list .inner {
		margin-top: -3%;
	}
	
	#master-list .inner {
		width: 240px;
		margin: 0 auto;
	}
	
	#master-list .charbtn {
		width: 100%;
		margin: 0;
	}
	
	#character-top .character-container-l,
	#character-top .character-container-m,
	#character-top .character-container-s {
		height: 1400px;
	}
	
	#character-imgbg {
		height: 1400px;
	}

}




@media screen and (min-width: 700px) {
	
	#story-container-noimg,
	#tx-container #content01,
	#tx-container #content02,
	#tx-container #content03 {
		font-size: 1.2em;
	}
	
	footer.welcome-footer {
		margin-top: 2200px;
	}
	
	footer.story-footer {
		/*margin-top: 2350px;*/
		margin-top: 0;
	}
	
	
	
	
	main#characters {
		padding-top: 200px;
	}
	
	#character-top .character-container-l img.character-img,
	#character-top .character-container-m img.character-img,
	#character-top .character-container-s img.character-img {
		/*width: 130%;
		margin: 5% 0 0 -12%;*/
	}
	
	#character-imgbg {
		background-size: 130%;
		background-position: 55% top;
	}
	
	/*#character-top .lancelot img.character-img {
		width: 160% !important;
		margin: 0 0 0 -50%;
	}
	
	#character-top .altera img.character-img {
		width: 160% !important;
		margin-left: -14%;
	}
	
	#character-top .lishuwen img.character-img {
		margin-left: 10%;
	}*/
	
	#character-top .lancelot #character-imgbg {
		background-size: 160%;
	}
	
	#character-top .lishuwen #character-imgbg {
		background-size: 160%;
		background-position: 10% 0%;
	}
	
	#character-top .altera #character-imgbg {
		background-size: 180%;
		background-position: 35% 10%;
	}
	
	
	
	
	#character-top .character-info img.character-class {
		width: 33.3%;
	}
	
	#character-top .character-info img.character-name {
		width: 66.6%;
	}
	
	.character-profile {
		width: 66.6%;
	}
	
	#character-top .character-gallery {
		width: 49.95%;
		margin: 1% 0 0 0;
	}
	
	footer.character-footer {
		/*margin-top: 50px;*/
	}
	
	footer.master-footer {
		margin-top: 0 !important;
	}
	
	
	
	
	#le-container {
		background-image: url(../images/subpages/bg-sq.jpg);
		background-repeat: repeat-y;
		background-size: 100%;
	}
	
	
	
	
	#multimedia-container {
		background-image: url(../images/subpages/bg-h.jpg);
	}

}




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

	header#subpage-header {
		background: none;
	}
	
	
	
	
	#subpage-mainlogo {
		width: 100%;
		height: 97px;
		text-align: center;
		margin: 0;
		padding: 0;
		float: none;
		display: block;
		background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
		background: linear-gradient(top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
	}
	
	#subpage-mainlogo img {
		width: 200px;
		margin: 0 40%;
		padding: 24px 0 5px 0;
	}
	
	
	
	
	#nav-container {
		width: 100%;
		margin: 97px 0 0 0;
		padding: 20px 0;
		position: absolute;
		background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
		background: linear-gradient(top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
		z-index: 9999;
	}
	
	.is-fixed {
		position: fixed !important;
		margin: 0 !important;
		top: 0 !important;
		background: rgba(0, 0, 0, .7) !important;
		-webkit-transition: background ease .7s;
		-moz-transition: background ease .7s;
		transition: background ease .7s;
	}
	
	nav#main-navigation1,
	nav#main-navigation2 {
		width: 100%;
		text-align: center;
		color: #fff;
		text-transform: uppercase;
		display: block;
	}
	
	nav#main-navigation1,
	nav#main-navigation2 {
		height: 30px;
		font-size: 0.85em;
	}
	
	nav#main-navigation1 ul li,
	nav#main-navigation2 ul li {
		font-weight: bold;
		letter-spacing: 0.05em;
		display: inline-block;
		background-image: url(../images/fatearrow_next.png);
		background-size: 30px;
		background-repeat: no-repeat;
		background-position: left 50%;
		padding: 0 10px 0 30px;
		line-height: 30px;
		color: #fff;
	}
	
	nav#main-navigation1 a:hover,
	nav#main-navigation2 a:hover {
		color: #a5daef;
		text-shadow: 0 0 6px #7ac9e9;
	}
	
	
	
	
	#subpage-maintitle-mob {
		display: none;
	}
	
	#subpage-title-container {
		width: 100%;
		height: 46px;
		margin: 0;
		padding: 0;
		position: absolute;
		z-index: 10;
		top: 220px;
		display: block;
	}
	
	.subpage-title-ext-left,
	.subpage-title-ext-right {
		width: 20%;
		height: 46px;
		margin: 0;
		padding: 0;
		background-image: url(../images/subpages/pagetitle-bg.png);
		background-size: 100% 46px;
		background-repeat: repeat-x;
		float: left;
		display: inline;
	}
	
	.subpage-title-ext-right {
		float: right;
	}
	
	#subpage-main-title {
		width: 1000px;
		height: 46px;
		left: 50%;
		margin: 0;
		margin-left: -500px;
		padding: 0;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 1000px 46px;
		position: absolute;
		z-index: 10;
	}
	
	#subpage-main-title h1.cleartxt {
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}
	
	
	
	
	.triangles1,
	.triangles2 {
		width: 80px;
		padding: 0;
		position: fixed;
		z-index: 8888;
		top: 0;
		display: block;
		opacity: .5;
	}
	
	.triangles1 {
		margin: 300px 0 0 3%;
		left: 0;
	}
	
	.triangles2 {
		margin: 600px 3% 0 0;
		right: 0;
	}
	
	.triangles1 img,
	.triangles2 img {
		width: 100%;
	}
	
	
	
	
	.background-sw {
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		position: fixed;
		background-position: center center;
		opacity: 0;
		-webkit-background-size: cover;
		background-size: cover;
		-webkit-transition: all 0.5s ease 0s;
		-moz-transition: all 0.5s ease 0s;
		transition: all 0.5s ease 0s;
	}
	
	.show .background-sw { opacity: 1; }
	
	#tx-container {
		color: #fff;
		text-shadow:
			#00afff 1px 1px 2px, #00afff -1px 1px 2px,
			#00afff 1px -1px 2px, #00afff -1px -1px 2px;
		text-align: center;
		position: relative;
	}
	
	#tx-container #content01 {
		padding-top: 350px !important;
		padding-bottom: 0;
	}
	
	.tx-contents .wrap {
		position: relative;
		z-index: 2;
	}
	
	#tx-container #content01,
	#tx-container #content02,
	#tx-container #content03 {
		background: none !important;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	
	#tx-container #content02 {
		margin-top: 0;
		padding-top: 0;
	}
	
	.story-container #content02 {
		background-image: url(../story/images/characters-mob.jpg);
		background-position: 0 0;
		height: 500px;
	}
	
	#content01_bg,
	#content03_bg {
		background-image: url(../images/subpages/bg-sq.jpg);
	}
	
	.welcome-container #content02_bg {
		background-image: url(../welcome/images/keyvisual.jpg);
		background-repeat: no-repeat;
		background-size: auto 100%;
	}
	
	.story-container #content02_bg {
		background-image: url(../story/images/rome.jpg);
		background-repeat: no-repeat;
		background-size: auto 120%;
	}
	
	.story-container #content02 img {
		display: block;
		width: 140%;
		margin: 10% 0 0 -20%;
	}
	
	#tx-container #content02 .catch,
	#tx-container #content02 .copy1,
	#tx-container #content02 .copy2 {
		display: block;
	}
	
	#tx-container #content02 .catch {
		margin-top: 23%;
	}
	
	.welcome-container #content03 {
		display: none;
	}
	
	.story-container #content03 {
		margin-top: 45% !important;
	}
	
	footer.welcome-footer {
		margin-top: 100px;
	}
	
	footer.story-footer {
		/*margin-top: 100px;*/
		margin-top: 0;
	}
	
	#story-container-noimg {
		padding-top: 350px;
		background-image: url(../images/subpages/bg-h.jpg);
	}
	
	
	
	
	#gameplay-container .wrap,
	#features-container .wrap {
		position: relative;
		z-index: 2;
	}
	
	#gameplay-highspeed_bg {
		background-image: url(../gameplay/images/bg/gameplay_highspeed_1.jpg);
	}
	
	#gameplay-noblephantasm_bg {
		background-image: url(../gameplay/images/bg/gameplay_np_1.jpg);
	}
	
	#gameplay-commandseals_bg {
		background-image: url(../gameplay/images/bg/gameplay_command_seal.jpg);
	}
	
	#gameplay-moondrive_bg {
		background-image: url(../gameplay/images/bg/gameplay_moondrive.jpg);
	}
	
	#gameplay-freebattle_bg {
		background-image: url(../gameplay/images/bg/gameplay-freebattle.jpg);
	}
	
	#gameplay-extrabattle_bg {
		background-image: url(../gameplay/images/bg/gameplay-extrabattle_1.jpg);
	}
	
	#gameplay-codecast_bg {
		background-image: url(../gameplay/images/bg/gameplay_code_casts_active_skills.jpg);
	}
	
	#gameplay-mysticcodes_bg {
		background-image: url(../gameplay/images/bg/gameplay_mystic_code_creation_menu.jpg);
	}
	
	#gameplay-installskills_bg {
		background-image: url(../gameplay/images/bg/gameplay_install_skill_synthesis_menu.jpg);
	}
	
	#gameplay-levelingup_bg {
		background-image: url(../gameplay/images/bg/gameplay-levelingup.jpg);
	}
	
	#gameplay-yourhomebase_bg {
		background-image: url(../gameplay/images/bg/gameplay-yourhomebase.jpg);
	}
	
	#features-polished_bg {
		background-image: url(../features/images/bg/feature1_polished_1.jpg);
	}
	
	#features-custom_bg {
		background-image: url(../features/images/bg/feature2_custom_activeskill.jpg);
	}
	
	#features-multiplayer_bg {
		background-image: url(../features/images/bg/feature3_multiplay_1025.jpg);
	}
	
	#features-heart_bg {
		background-image: url(../features/images/bg/feature_heartfuladventure_1.jpg);
	}
	
	#gameplay-container,
	#gameplay-tx-only_bg1,
	#gameplay-tx-only_bg2,
	#features-container,
	#features-tx-only_bg,
	#multiplayer-container {
		background-image: url(../images/subpages/bg-h.jpg);
	}
	
	.features-polished {
		margin-top: 90px;
	}
	
	
	
	
	footer.gameplay-footer,
	footer.features-footer {
		position: relative;
		z-index: 9000;
		margin-top: 0;
	}
	
	
	
	
	
	
	
	
	
	main#characters {
		padding-top: 380px;
		padding-bottom: 100px;
	}
	
	#character-top .character-container-l,
	#character-top .character-container-m,
	#character-top .character-container-s {
		height: 1250px;
	}
	
	#character-imgbg {
		height: auto !important;
		background: none !important;
	}
	
	
	
	
	#servants-list {
		margin-top: -30px;
		padding: 120px 0 0 0;
	}
	
	#servants-list .charbtn {
		width: 22%;
	}
	
	
	
	
	#character-top .character-container-l img.character-img,
	#character-top .character-container-m img.character-img,
	#character-top .character-container-s img.character-img {
		display: block;
		width: 94%;
		margin: 140px 0 0 20%;
	}
	
	#character-top .lancelot img.character-img {
		width: 140% !important;
		margin: 10% 0 0 -20%;
	}
	
	#character-top .elizabethbathory img.character-img {
		margin-top: 100px;
	}
	
	#character-top .altera img.character-img {
		width: 140% !important;
		margin-left: 20%;
	}
	
	#character-top .lishuwen img.character-img {
		margin-left: 40%;
	}
	
	#character-top .master img.character-img {
		width: 120% !important;
		margin: 0 0 0 -10% !important;
	}
	
	.character-img-up {
		margin-top: 90px !important;
	}
	
	#character-top .character-info {
		margin-top: 300px;
	}
	
	#character-top .master .character-info {
		margin-top: 450px;
	}
	
	#character-top .character-info img.character-class {
		width: 30%;
	}
	
	#character-top .character-info img.character-name {
		width: 60%;
	}
	
	.character-profile {
		width: 60%;
	}
	
	
	#le-container,
	#multiplayer-container,
	#gameplay-container {
		padding-top: 340px;
	}
	
	#features-container {
		padding-top: 370px;
	}
	
	#multimedia-container {
		padding-top: 380px;
	}
	
	#trailers-container {
		margin: -80px 0 10% 0;
		padding-top: 160px;
	}
	
	#wallpapers-container,
	#twitterbanner-container {
		margin: -80px 0 10% 0;
		padding-top: 160px;
	}

}




@media screen and (min-width: 900px) {
	
	nav#main-navigation1,
	nav#main-navigation2 {
		height: 30px;
		font-size: 1em;
		color: #ccc;
	}
	
	
	
	
	.story-container #content03 {
		margin-top: 55% !important;
	}
	
	
	
	
	#character-top .character-container-l,
	#character-top .character-container-m,
	#character-top .character-container-s {
		height: 1320px;
	}
	
	#character-top .character-container-l img.character-img,
	#character-top .character-container-m img.character-img,
	#character-top .character-container-s img.character-img {
		margin-left: 24%;
	}
	
	#character-top .lancelot img.character-img {
		margin: 0 0 0 -20%;
	}
	
	#character-top .altera img.character-img {
		margin-left: 20%;
	}
	
	#character-top .lishuwen img.character-img {
		margin-left: 40%;
	}
	
	.character-img-up {
		margin-top: 40px !important;
	}
	
	#trailers-container,
	#wallpapers-container,
	#twitterbanner-container {
		max-width: 800px;
		margin: -80px auto 10% auto;
	}

}




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

	footer.welcome-footer {
		margin-top: 0;
	}
	
	
	
	
	.story-container #content03 {
		margin-top: 550px !important;
	}
	
	footer.story-footer {
		/*margin-top: 100px;*/
		margin-top: 0;
	}
	
	
	
	
	#character-top {
		height: 1500px;
		background-position: 50% -80px;
		position: fixed;
		z-index: 10;
		overflow: hidden;
	}

	#character-top .character-container-l img.character-img,
	#character-top .character-container-m img.character-img,
	#character-top .character-container-s img.character-img {
		width: 1100px;
		margin: 120px 0 0 19%;
		position: fixed;
		z-index: 100;
		transition: none !important;
	}
	
	#character-top .astolfo img.character-img {
		margin-left: 10%;
	}
	
	#character-top .lancelot img.character-img {
		margin: 0 0 0 -20%;
	}
	
	#character-top .elizabethbathory img.character-img {
		margin-top: 50px;
		margin-left: 16%;
	}
	
	#character-top .altera img.character-img {
		margin-left: 20%;
	}
	
	#character-top .lishuwen img.character-img {
		margin-left: 36%;
	}
	
	#character-top .character-info {
		width: 94%;
		margin: 240px 3% 0 3%;
		position: fixed;
		z-index: 110;
	}
	
	#character-top .character-info img.character-class {
		width: 26%;
		margin-left: 5%;
	}
	
	#character-top .character-info img.character-name {
		width: 52%;
	}
	
	.character-profile {
		width: 52%;
		margin-left: 2%;
	}
	
	#character-top .character-gallery {
		width: 39%;
		margin-top: 1%;
		margin-left: 5%;
	}
	
	footer.character-footer {
		z-index: 9000;
		position: relative;
		margin-top: 2200px;
	}
	
	footer.master-footer {
		margin-top: 2000px !important;
	}
	
	
	
	
	#le-container {
		background-image: url(../images/subpages/bg-h.jpg);
	}
	
	
	
	
	#multiplayer-container,
	#gameplay-container,
	#features-container {
		padding-bottom: 10%;
	}
	
	
	
	
	h2.sectitle {
		width: 100%;
		margin: 0 !important;
		padding: 2% 0 7% 0 !important;
	}
	
	h2.sectitle img {
		width: 360px;
		margin: 0 auto;
		padding: 0;
	}
	
	.slider-tx-container {
		width: 100%;
		margin: 0;
		padding: 0;
		position: relative;
	}
	
	.imgprior .slider-container,
	.imgprior .img-container {
		width: 60%;
		position: relative;
		z-index: 90;
		top: 0;
		left: 0;
	}
	
	.imgprior .slider-tx {
		width: 46%;
		margin: 0 4% 0 -10%;
		position: absolute;
		z-index: 80;
		top: 0;
		right: 0;
	}
	
	.txprior .slider-container,
	.txprior .img-container {
		width: 60%;
		position: absolute;
		z-index: 90;
		top: 0;
		left: 0;
	}
	
	.txprior .slider-tx {
		width: 46%;
		margin: 0;
		position: relative;
		z-index: 80;
		top: 0;
		right: 4%;
		float: right;
	}
	
	.slider-tx-container .slider-tx-top,
	.slider-tx-container .slider-tx-bottom {
		display: block;
	}
	
	.slider-tx-container .slider-tx-bottom {
		margin-top: -1px;
	}
	
	.slider-tx-container .slider-tx-top img,
	.slider-tx-container .slider-tx-bottom img {
		width: 100%;
		vertical-align: bottom;
	}
	
	.slider-tx-container .slider-tx-body {
		width: 100%;
		padding: 3% 10% 5.5% 20%;
		font-size: 1em;
		text-align: left;
		background-image: url(../images/subpages/slider-tx-body.png);
		background-size: 100%;
		background-repeat: repeat-y;
	}
	
	
	
	
	.gameplay-highspeed,
	.gameplay-commandseals,
	.gameplay-moondrive,
	.gameplay-freebattle,
	.gameplay-codecast,
	.gameplay-mysticcodes,
	.gameplay-installskills,
	.gameplay-levelingup,
	.gameplay-yourhomebase,
	
	.features-polished,
	.features-custom,
	.features-heart {
		margin-bottom: 120px !important;
	}
	
	.gameplay-noblephantasm,
	.gameplay-extrabattle,
	
	.features-multiplayer,
	
	#multiplayer-container .multiplayer {
		margin-bottom: 110px !important;
	}
	
	.gameplay-highspeed .slider-tx,
	.gameplay-commandseals .slider-tx,
	.gameplay-moondrive .slider-tx,
	.gameplay-mysticcodes .slider-tx,
	.gameplay-yourhomebase .img-container,
	.gameplay-installskills .img-container,
	.gameplay-noblephantasm .slider-tx,
	.gameplay-freebattle .slider-tx,
	.gameplay-extrabattle .slider-tx,
	.gameplay-codecast .slider-tx,
	.gameplay-levelingup .slider-tx,
	
	.features-polished .slider-tx,
	.features-multiplayer .slider-tx,
	.features-custom .slider-tx,
	.features-heart .slider-tx,
	
	#multiplayer-container .multiplayer .slider-tx {
		margin-top: 120px;
	}

}




@media screen and (min-width: 1100px) {
	
	.welcome-container #content02_bg {
		background-size: auto 120%;
	}
	
	.story-container #content03 {
		margin-top: 440px !important;
	}
	
	
	
	
	#character-top .character-container-l img.character-img,
	#character-top .character-container-m img.character-img,
	#character-top .character-container-s img.character-img {
		margin-left: 25%;
	}
	
	#character-top .master img.character-img {
		width: 100% !important;
		margin: 20px 0 0 15% !important;
	}
	
	#character-top .astolfo img.character-img {
		margin-left: -12%;
	}
	
	#character-top .lancelot img.character-img {
		margin-left: -16%;
	}
	
	#character-top .altera img.character-img {
		margin-left: 20%;
	}
	
	#character-top .lishuwen img.character-img {
		margin-left: 40%;
	}
	
	.master img.character-name,
	.master .character-profile {
		width: 40% !important;
	}
	
	#character-top .master .character-info {
		margin-top: 380px;
	}
	
	footer.character-footer {
		margin-top: 2400px;
	}

}




@media screen and (min-width: 1200px) {
	
	.subpage-title-ext-left,
	.subpage-title-ext-right {
		width: 30%;
	}
	
	
	
	
	.welcome-container #content02_bg,
	.story-container #content02_bg {
		background-size: 120%;
	}
	
	#story-container-noimg {
		padding-bottom: 200px;
		background-size: 100%;
	}
	
	
	
	
	#servants-list,
	#master-list {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
	
	#servants-list .charbtn {
		width: 17%;
	}
	
	.charindex-nero,
	.charindex-artoria {
		margin-left: 13% !important;
	}
	
	.charindex-iskandar {
		margin-left: 23% !important;
	}
	
	
	
	
	#character-top .character-info {
		max-width: 1200px;
		left: 50%;
		margin-left: -600px;
	}
	
	#character-top .character-container-l img.character-img,
	#character-top .character-container-m img.character-img,
	#character-top .character-container-s img.character-img {
		margin-left: 30%;
	}
	
	#character-top .astolfo img.character-img {
		margin-left: 24%;
	}
	
	#character-top .lancelot img.character-img {
		width: 100% !important;
		max-width: 1200px;
		margin-left: 16%;
	}
	
	#character-top .master img.character-img {
		width: 100% !important;
		max-width: 1200px !important;
		margin-left: 20% !important;
	}
	
	#character-top .elizabethbathory img.character-img {
		margin-left: 35%;
	}
	
	#character-top .altera img.character-img {
		width: 100% !important;
		max-width: 1200px;
		margin-left: 35%;
	}
	
	#character-top .lishuwen img.character-img {
		margin-left: 40%;
	}
	
	#character-top .character-info img.character-class {
		width: 25%;
		margin-left: 5%;
	}
	
	#character-top .character-info img.character-name {
		width: 50%;
		margin-left: 2%;
	}
	
	.character-profile {
		width: 50%;
		margin-left: 4%;
	}
	
	#character-top .character-gallery {
		margin-left: 4%;
	}
	
	footer.character-footer {
		margin-top: 2500px;
	}

}




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

	.slider-tx-container,
	.tx-only-container {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
	}
	
	
	
	
	#multimedia-container {
		padding-bottom: 5%;
	}
	
	#trailers-container,
	#wallpapers-container {
		max-width: 1200px;
		margin-bottom: 5%;
	}
	
	#trailers-container .resvid {
		width: 29.3%;
		margin: 0 0 0 3%;
		float: left;
		display: inline;
	}
	
	#wallpapers-container .item {
		width: 45.5%;
		margin: 0 0 0 3%;
		float: left;
		display: inline;
	}
	
}




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

	#master-list {
		padding-bottom: 10%;
	}

	#tx-container #content01,
	#tx-container #content02,
	#tx-container #content03 {
		font-size: 1.6em;
		line-height: 1.6em;
		width: 1000px;
		max-width: 1000px;
		padding: 0;
	}
	
	.story-container #content02 {
		height: 700px;
	}
	
	.story-container #content02 img {
		display: block;
		width: 120%;
		margin: 0 0 0 -10%;
		padding: 0;
	}
	
	.story-container #content03 {
		margin-top: 550px !important;
	}
	
	footer.story-footer {
		/*margin-top: 200px;*/
		margin-top: 0;
	}
	
	#story-container-noimg {
		font-size: 1.6em;
		line-height: 1.6em;
	}
	
	
	
	
	
	
	
	#character-top .character-container-l img.character-img,
	#character-top .character-container-m img.character-img,
	#character-top .character-container-s img.character-img {
		margin-left: 40%;
	}
	
	#character-top .lancelot img.character-img {
		width: 100% !important;
		max-width: 1200px;
		margin-top: 100px;
		margin-left: 35%;
	}
	
	#character-top .elizabethbathory img.character-img {
		margin-left: 40%;
	}
	
	#character-top .altera img.character-img {
		width: 100% !important;
		max-width: 1200px;
		margin-left: 40%;
	}
	
	#character-top .lishuwen img.character-img {
		margin-left: 46%;
	}
	
	.character-profile-body {
		font-size: 1.1em;
	}

}




@media screen and (min-width: 2000px) {
	
	.subpage-title-ext-left,
	.subpage-title-ext-right {
		width: 40%;
	}

}








.gamecontents {
	min-height: 500px;
}