/*for All*/
* {
		margin: 0;
		padding: 0;
}
header, nav, section, article, footer, fieldset {
		display : block;
}
body {
		background : #003333;
		color : #FFCC66;
		font-family : 'Times New Roman';
		text-align : center;
}
.hed {
		background-image : url(../images/fieldset_02.jpg);
		background-repeat: repeat-y;
		background-size: 100%;
}
.hed h1 {
		font-size : 1.3em;
		margin: 0px;
		padding-top : 10px;
}
.mhed {
		background : url(../images/gradient_01.jpg);
		font-size : 0.6em;
		padding : 5px;
}
#show-menu button{
		background: url(../images/gradient_01.jpg);
		border: none;
		color: #FFCC66;
		font-size : 1.1em;
		text-align : center;
		width: 50%;
		height : 38px;
		padding : 5px;
		margin : 10px;
		box-shadow: 0 2px 5px #000;
		cursor: pointer;
}
#show-menu button img {
		width: 50px;
		height : 25px;
}
nav {
		background : #FFCC66;
		margin : 0px;
}
.clearfix ul {
		display:none;
		list-style-type : none;
		padding: 5px;
}
.clearfix ul li {
		background: url(../images/gradient_01.jpg);
		font-size : 1em;
		text-align : center;
		width: 45%;
		height : 28px;
		padding : 5px;
		margin : 0px 0px 5px 5px;
		box-shadow: 0 2px 5px #000;
		float: left;
}
.clearfix ul li a {
		text-decoration : none;
		color : #FFCC66;
}
.clearfix ul li:hover {
		font-size : 1.1em;
}
#m {
		font-size : 1.1em;
}
#m a {
		color : #280A00;
}
fieldset {
		border : 1px solid #003333;
		background : #003333;
		margin : 0px;
}
#text-other {
		margin-top: 10px;
}
#text-other ul {
		list-style-type : none;
}
#text-other ul li{
		font-size: 0.6em;
		width : 35%;
		min-width: 110px;
		height : 170px;
		background : url(../images/gradient_02.jpg);
		box-shadow: 0 2px 5px #000;
		margin: 0px 10px 20px 10px;
		padding : 10px;
		float : left;
}
#text-other ul li p{
		padding: 2px 5px;
}
strong {
		font-size: 1.2em;
}
#text-other img {
		width : 75px;
		height : 56px;
		box-shadow: 0 2px 5px #000;
		margin : 10px 10px 0 0;
}
#text-other ul li:hover {
		background : #6e4d0f;
}
#text-other ul li div {
		width : 100%;
		height : 100%;
		background-image : url(../images/fieldset_01.jpg);
}
#text-other ul li a {
		text-decoration : none;
		color : #FFCC66;
		cursor : pointer;
}
#text-other ul li a:hover {
		color : #FFCC66;
}
.clearfix:after, .mhed:after, .shed:after, #info:after {
		content :"";
		display : block;
		clear : both;
		height : 0;
}
.footer {
		text-align : center;
		margin : 10px 20px;
		float:right;
}







/*for mobile S-320px*/
@media only screen and (min-width: 320px) {
#text-other ul li{
		width : 37%;
		min-width: 115px;
}
}


/*for mobile M-375px*/
@media only screen and (min-width: 375px) {
#text-other ul li{
		width : 39%;
		min-width: 140px;
}
}


/*for mobile M-425px*/
@media only screen and (min-width: 425px) {
#text-other ul li{
		width : 40%;
		min-width: 160px;
}
}


/*for tablet 600px-768px*/
@media only screen and (min-width: 600px) {
    .hed h1 {
		font-size : 2.2em;
            }
.mhed {
		font-size : 85%;
}
nav {
		width : 12%;
		min-width : 150px;
		margin : 0px 20px 0px 0px;
		float:left;
}
.clearfix ul {
		padding: 0px 0px;
}
.clearfix ul li {
		text-align : left;
		font-size : 1.1em;
		width : 90%;
		height : 32px;
		padding : 5px 0px;
		margin : 5px 0px 7px 0px;
}
.clearfix ul li a p {
		padding : 0px 10px 5px 10px;
}
.clearfix ul li:hover {
		width : 100%;
		text-align : right;
		font-size : 1.3em;
}
#m {
		font-size : 1.3em;
		width : 100%;
		text-align : right;
}
#text-other ul li{
		font-size: 0.8em;
		width : 40%;
		min-width: 190px;
		height : 250px;
		background : url(../images/gradient_02.jpg);
		box-shadow: 0 2px 5px #000;
		margin: 0px 20px 20px 0px;
		padding : 10px;
		text-align: center;
		float : left;
}
strong {
		font-size: 1.3em;
}
#text-other img {
		width : 150px;
		height : 112px;
		box-shadow: 0 2px 5px #000;
		margin : 10px 10px 0 0;
}
}



/*for desktop 768px-1024px*/
@media only screen and (min-width: 768px) {
    .hed h1 {
		font-size : 3em;
            }
.mhed {
		font-size : 100%;
}
#show-menu button{
		display : none;
}
nav {
		width : 15%;
		min-width : 200px;
		margin : 0px 20px 0px 0px;
		float:left;
}
.clearfix ul {
		display: block;
		padding: 5px 0px;
}
.clearfix ul li {
		text-align : left;
		font-size : 1.3em;
		width : 90%;
		height : 35px;
		padding : 5px 0px;
		margin : 5px 0px 10px 0px;
}
.clearfix ul li a p {
		padding : 0px 10px 5px 10px;
}
.clearfix ul li:hover {
		width : 100%;
		text-align : right;
		font-size : 1.5em;
}
#m {
		font-size : 1.5em;
		width : 100%;
		text-align : right;
}
#text-other ul li{
		font-size: 1em;
		width : 28%;
		min-width: 220px;
		height : 250px;
}
}


/*for desktop 1024px*/
@media only screen and (min-width: 1024px) {
#text-other ul li{
		width : 28%;
		min-width: 227px;
}
}