/*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;
}
#go-back {
		color: #FFCC66;
		width: 50%;
		height : 28px;
		margin:auto;
		padding : 10px 0px 20px 0px;
}
#go-back p{
		background: url(../images/gradient_01.jpg);
		width: 100%;
		height : 28px;
		padding : 5px 0px;
		box-shadow: 0 2px 5px #000;
}
#go-back a{
		padding: 20px 10px;
}
#show-menu button img, #go-back img{
		width: 50px;
		height : 25px;
}
#go-back img{
	margin-top: 1px;
}
nav {
		background : #FFCC66;
		margin : 0px;
}
.clearfix ul {
		display:none;
		list-style-type : none;
		padding: 5px;
}
.clearfix ul li {
		display: none;
		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 {
		background-image : url(../images/fieldset_01.jpg);
		border : 1px solid #003333;
		margin : 20px;
}
#text {
		font-size : 0.9em;
		padding : 0px 10px;
		margin : 10px;
}
#strong {
		font-size : 1.3em;
		margin : 0 0 10px 0;
}
#text .strong {
		font-size : 1.2em;
		margin : 0 0 5px 0;
}
.word{
		background : url(../images/gradient_02.jpg);
		box-shadow: 0 2px 5px #000;
		padding : 5px;
		margin-top : 10px;
}
.word a{
		text-decoration : none;
		color : #F8A73E;
		cursor : pointer;
}
.word a p {
		padding : 10px;
		background: #6e4d0f;
}
.word a p:hover {
		background : none;
		color :  #280A00;
}
#fb {
	float: left;
}
#fb iframe {
	width: 90%;
	margin: 10px;
	background: white;
	height: 300px;
}
 .container {
 width: 95%;
 padding: 10px 0px;
 margin:  auto;
 text-align: center;
 position: relative;
 }
 .container div{
 list-style-type: none;
 width: 100%;
 display: inline-block;
 display: none;
 }
 .container img{
 width: 100%;
 height: auto;
 }
.next, .prev {
  border : none;
  opacity: 1;
  width: 100px;
  height: 50px;
  cursor: pointer;
  color: #FFCC66;
  font-size : 2em;
  font-family : 'Times New Roman';
  position: relative;
}
.next {
	text-align: right;
	background: url(../images/gradient_01Lb.png);
	margin: -50px 0px 10px 0px;
	float: right;
}
.prev {
	text-align: left;
	background: url(../images/gradient_01Db.png);
	margin: -50px 0px 10px 0px;
	float: left;
}
.next:hover {
	margin: -50px -20px 10px 0px;
}
.prev:hover {
	margin: -50px 10px 10px -20px;
}
.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 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;
}
}



/* 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 {
		background-image : url(../images/fieldset_01.jpg);
		font-size : 1.1em;
		padding : 10px;
		margin : 10px;
}
#fb iframe {
	width: 45%;
}
 .container {
 max-width: 600px;
 }
}

/*for desktop 1024px*/
@media only screen and (min-width: 1024px) {
#text {
		width : 30%;
		float: right;
}
.slider {
		width : 60%;
		float: left;
}
#fb iframe {
	width: 30%;
}
}