@charset "UTF-8";
/* CSS Document */
html {
height: 100%;
}
body {
height: 100%;
margin:0;
overflow: hidden;
background: #CCC;
font-family: 'josefin_sansregular', sans-serif;
}
header{
position:fixed;
bottom:0;
z-index:1;
background:rgba(0, 0, 0, 0.6);
width:100%;
text-align:center;
padding-top: 5px;
}
header h1{
color: #999;
font-size: 24px;
padding:0;
margin:0
}
header h2{
color: #999;
font-size: 16px;
padding:10px;
margin:0
}
.su{
height:40%;
}
.close{
background: url(../img/1_b.jpg) no-repeat bottom center #ccc;
background-size: auto 100%;
height:60%;
}
.open{
background: url(../img/2_b.jpg) no-repeat bottom center #ccc;
background-size: auto 100%;
height:60%;
}
.welcome{
position:absolute;
left:0;
top:12%;
width:100%;
text-align: center;
font-size:48px;
color: #A58C27;
font-family: 'josefin_sanslight', sans-serif;
}
.close{
	display: none
}
.fader{
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	z-index: 999;
}
.fade{
	position:absolute;
	display:block;
	width:100%;
	height:38%;
	z-index: 999;
	background:#ccc;
	padding-bottom:10px;
}
ul#menu {
	list-style: none;
	margin:0;
	padding:0;
	text-align:center;
	font-size:27px;
	position:absolute;
	width: 100%;
	z-index:9999;
	bottom: -40%;
	display:none;
}
#menu span {
	font-size: 20px;
    font-family: sans-serif;
    font-weight: 100;
}	 
#menu li {
	display:inline;
} 
#menu li a {
	color: #A58C27;
	display:inline-block;
	padding: 0 20px;
	text-decoration: none;
} 
#menu li a:hover, #menu li a.active {
	color: #999;
}

/*media query*/

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  .welcome{
	  font-size: 24px;
  }
  ul#menu {
	  font-size:21px;
  }
  #menu span {
	  font-size: 16px;
  }
  header h1{
	  font-size: 24px;
  }
  header h2{
	  font-size: 16px;
	  color: #eaeaea;
  }
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  .welcome{
	  font-size: 14px;
  }
  ul#menu {
	  font-size:21px;
  }
  #menu span {
	  font-size: 16px;
  }
  header h1{
	  font-size: 12px;
  }
  header h2{
	  font-size: 10px;
	  color: #eaeaea;
  }
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}