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




#mainnav {
	display: none;
}




#mobinav,
.overlay .closebtn {
	position: fixed;
	z-index: 9900;
	width: 100px;
	top: 70px;
	right: 0;
	background-repeat: no-repeat;
	background-size: 100px;
}

.mobinav-subpage,
.overlay .closebtn-subpage {
	top: 30px !important;
}

#mobinav img {
	width: 100%;
}

#mobinav,
#mainnav div,
.overlay .closebtn {
	cursor: pointer;
    animation-name: navcloud;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}

#mobinav {
	background-image: url(../images/common/navbtn/mobinav-ov.png);
}

.overlay .closebtn {
	background-image: url(../images/common/navbtn/mobinav-close-ov.png);
}

#mobinav:hover img,
.overlay .closebtn:hover img {
	opacity: 0;
}




@keyframes navcloud {
	
	0% {
 	   transform: translate(0,0px);
	}	
	
	100% {
     	  transform: translate(0,-7px)
    }

}




.overlay {
	height: 0;
	width: 100%;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	background: linear-gradient(#912925,#5f1a17);
	overflow-y: hidden;
	transition: none;
	transition: all .3s ease;
	opacity: 0;
}

.overlay .overlay-content {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	top: 0;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	background-image: url(../images/common/bgpattern1.png);
	background-repeat: repeat;
	background-size: 50px;
}

.overlay a {
	display: block;
	transition: 0.3s;
	color: #fff;
}

.overlay a:hover, .overlay a:focus {
	color: #000;
}

.overlay .closebtn {
	z-index: 9999;
	position: absolute;
}

.overlay .closebtn img {
	width: 100%;
}

#overlay-mobinav-container {
	width: 90%;
	max-width: 600px;
	height: 100%;
	margin: 0 auto;
	padding: 20px 0 0 0;
	background-image: url(../images/common/mobinav-bg-paper.jpg);
	background-repeat: repeat;
	background-position: 50% 50%;
	background-size: cover;
	box-shadow: 6px 0 3px rgba(0,0,0,.3), -6px 0 3px rgba(0,0,0,.3);
}

#overlay-mobinav-container #mobinav-logo {
	width: 150px;
	margin: 0 auto;
	padding: 0;
}

#overlay-mobinav-container #mobinav-logo img {
	width: 100%;
}

.overlay ul {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	padding: 10px 20px 15px 20px;
	list-style: none;
	text-align: center;
	box-sizing: border-box;
}

.overlay ul li {
	width: 100%;
	background: rgba(0,0,0,.5);
	margin: 2px auto;
	padding: 12px 10px;
	color: #555;
	font-size: 1.6em;
	font-family: 'gizmo', arial;
	display: inline-block;
	box-sizing: border-box;
}




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

	#mobinav,
	.overlay .closebtn {
		top: 40px;
	}
	
	#overlay-mobinav-container #mobinav-logo {
		width: 180px;
	}

}




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

	#mobinav,
	.overlay .closebtn {
		width: 140px;
		top: 30px;
		right: 0;
		background-size: 140px;
	}
	
	.mobinav-subpage,
	.overlay .closebtn-subpage {
		top: 15px !important;
	}

}




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

	#mobinav,
	.overlay .closebtn {
		width: 160px;
		top: 10px;
		background-size: 160px;
	}

}




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

	#mobinav {
		display: none;
	}

	#mainnav {
		display: block;
	}
	
	#mainnav div {
		position: fixed;
   	 	z-index: 999;
   	 	transition: 1s;
		background-repeat: no-repeat;
		background-size: 170px;
	}
	
	#mainnav img {
		width: 170px;
		transition: none;
		transition: width ease 1s;
	}
	
	#mainnav div:hover img {
		opacity: 0;
		transition: .3s;
	}
	
	
	
	
	#nav-story {
		animation-duration: 2s !important;
		top: 130px;
		right: 50%;
		margin-right: 210px;
	}
	
	#nav-setting {
		animation-duration: 1.5s !important;
		top: 260px;
		right: 52%;
		margin-right: 240px;
	}
	
	#nav-characters {
		animation-duration: 3.2s !important;
		top: 400px;
		right: 50%;
		margin-right: 240px;
	}
	
	
	#nav-battle {
		animation-duration: 3.5s !important;
		top: 160px;
		left: 50%;
		margin-left: 220px;
	}
	
	#nav-ricecrop {
		animation-duration: 2s !important;
		top: 300px;
		left: 53%;
		margin-left: 250px;
	}
	
	#nav-thecapital {
		animation-duration: 2.3s !important;
		top: 410px;
		left: 50%;
		margin-left: 250px;
	}
	
	
	
	
	#nav-about:hover {
		background-image: url(../images/common/navbtn/about-ov.png);
	}
	
	#nav-story:hover {
		background-image: url(../images/common/navbtn/story-ov.png);
	}
	
	#nav-setting:hover {
		background-image: url(../images/common/navbtn/setting-ov.png);
	}
	
	#nav-characters:hover {
		background-image: url(../images/common/navbtn/characters-ov.png);
	}
	
	
	#nav-battle:hover {
		background-image: url(../images/common/navbtn/battle-ov.png);
	}
	
	#nav-ricecrop:hover {
		background-image: url(../images/common/navbtn/ricecrop-ov.png);
	}
	
	#nav-thecapital:hover {
		background-image: url(../images/common/navbtn/thecapital-ov.png);
	}
	
	
	
	
	.mnav_story_scrld,
	.mnav_setting_scrld,
	.mnav_characters_scrld,
	.mnav_battle_scrld,
	.mnav_ricecrop_scrld,
	.mnav_thecapital_scrld {
		top: 5px !important;
		position: fixed !important;
		margin: 0 !important;
		background-size: 140px !important;
	}
	
	.mnav_story_scrld {
		right: 50% !important;
		margin-right: 290px !important;
	}
	
	.mnav_setting_scrld {
		right: 50% !important;
		margin-right: 146px !important;
	}
	
	.mnav_characters_scrld {
		right: 50% !important;
		margin-right: 2px !important;
	}
	
	.mnav_battle_scrld {
		left: 50% !important;
		margin-left: 2px !important;
	}
	
	.mnav_ricecrop_scrld {
		left: 50% !important;
		margin-left: 146px !important;
	}
	
	.mnav_thecapital_scrld {
		left: 50% !important;
		margin-left: 290px !important;
	}
	
	.mnav_story_scrld img,
	.mnav_setting_scrld img,
	.mnav_characters_scrld img,
	.mnav_battle_scrld img,
	.mnav_ricecrop_scrld img,
	.mnav_thecapital_scrld img {
		width: 140px !important;
	}
	
	.sub-nav-story,
	.sub-nav-setting,
	.sub-nav-characters,
	.sub-nav-battle,
	.sub-nav-ricecrop,
	.sub-nav-thecapital {
		width: 110px !important;
		background-size: 110px !important;
		top: 30px !important;
	}
	
	.sub-nav-story img,
	.sub-nav-setting img,
	.sub-nav-characters img,
	.sub-nav-battle img,
	.sub-nav-ricecrop img,
	.sub-nav-thecapital img {
		width: 100% !important;
	}
	
	.sub-nav-story {
		left: auto !important;
		right: 50% !important;
		margin-right: 320px !important;
	}
	
	.sub-nav-setting {
		left: auto !important;
		right: 50% !important;
		margin-right: 200px !important;
	}
	
	.sub-nav-characters {
		left: auto !important;
		right: 50% !important;
		margin-right: 80px !important;
	}
	
	.sub-nav-battle {
		right: auto !important;
		left: 50% !important;
		margin-left: 80px !important;
	}
	
	.sub-nav-ricecrop {
		right: auto !important;
		left: 50% !important;
		margin-left: 200px !important;
	}
	
	.sub-nav-thecapital {
		right: auto !important;
		left: 50% !important;
		margin-left: 320px !important;
	}
	
	
	

}




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

	#mainnav img {
		width: 180px;
	}
	
	#mainnav div {
		background-size: 180px;
	}
	
	
	
	
	.sub-nav-story,
	.sub-nav-setting,
	.sub-nav-characters,
	.sub-nav-battle,
	.sub-nav-ricecrop,
	.sub-nav-thecapital {
		width: 120px !important;
		background-size: 120px !important;
	}
	
	.sub-nav-story {
		margin-right: 350px !important;
	}
	
	.sub-nav-setting {
		margin-right: 220px !important;
	}
	
	.sub-nav-characters {
		margin-right: 90px !important;
	}
	
	.sub-nav-battle {
		margin-left: 90px !important;
	}
	
	.sub-nav-ricecrop {
		margin-left: 220px !important;
	}
	
	.sub-nav-thecapital {
		margin-left: 350px !important;
	}

}




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

	#nav-story {
		margin-right: 290px;
	}

	#nav-setting {
		margin-right: 360px;
	}
	
	#nav-characters {
		top: 420px;
		margin-right: 330px;
	}
	
	#nav-battle {
		margin-left: 310px;
	}
	
	#nav-ricecrop {
		margin-left: 340px;
	}
	
	#nav-thecapital {
		top: 450px;
		margin-left: 300px;
	}

}