*{margin:0px;}
@font-face{font-family:RobotoL; src: url(../font/Roboto-Thin.ttf);} 
#cont{width:1100px; margin:50px auto 0px auto;}
#cont .box{width:320px; margin:20px; display:inline-block; border:1px solid silver; height:200px; overflow:hidden;}
#cont .box img{width:100%; }
#cont input,  #cont select {margin:5px 0px 40px 0px; height:40px; border-radius:5px;  border:1px solid silver; padding-left:15px;}
#cont input[type=text],#cont select{width:400px;}
#cont input[type=submit]{padding-right:15px;}
#cont textarea{height:150px; width:400px;  border-radius:5px;  border:1px solid silver; margin:5px 0px 40px 0px;}
#cont p{margin-bottom:40px;}
#pagehead{height:200px; width:100%; line-height:200px; text-align:center; font-weight:normal;} 
.contact{background:url(../img/5.jpg); background-size:100%; color:#F37F2A ;} 
.gallery{background:url(../img/1.jpg); background-size:100%; color:#F37F2A ;} 
.about{background:url(../img/4.jpg); background-size:100%; color:#EDEDED;} 
.reservation{background:url(../img/2.jpg); background-size:100%; color:#374289;} 
body{font-family:RobotoL; font-size:15px; color:black; letter-spacing:1px; line-height:24px;}#head {width:1200px; margin:0px auto;}
#head .logo{ float:left; margin:20px;} #head .logo img{width:300px; }
#head .nav{float:right;}
#head .nav a{display:inline-block; color:#374289; font-weight:bold; margin-right:40px; padding:10px 0px 10px 0px;border-bottom:3px solid #F37F2A;
 margin-top:37px; text-decoration:none;}
#head .nav a:hover{padding:10px 0px 14px 0px; border-bottom:4px solid #F37F2A ;}
.clear{clear:both;}
#btn{width:30px; height:30px; float:right; margin-top:50px; margin-right:10px; display:none;}
#btn span{width:30px; height:5px; background:#F37F2A; margin-top:5px; display:block;}


#book{width:200px; margin:0px auto; height:0px;}
#book a{position:absolute; display:block; width:200px; height:40px; line-height:40px; background:#F37F2A; color:white; text-align:center; text-decoration:none; margin-top:250px;}
#book a:hover{opacity:0.9;}
#cover{height:60px; background:url(../img/01.png); width:100%; background-size:50px;}
#welcome h1{font-weight:normal; text-align:center; margin-top:10px; display:block; margin-bottom:30px; height:70px;  background:url(../img/shape@2x.png) no-repeat; background-size:30px;  background-position:center 55px;}
#welcome p{  margin-bottom:30px; display:block;  line-height:22px; }
#welcome span{font-size:15px; display:block;  line-height:30px;  border-bottom:2px dashed #F37F2A; }
#welcome b{font-size:15px; display:block;  line-height:30px; color:#F37F2A;}
#welcome, #room{text-align:center; width:1200px; margin:0px auto 0px auto;}
 #section{width:1200px; margin:0px auto 0px auto;}

#welcome .one{width:45%; text-align:left;  display:inline-block; vertical-align:top; margin:0px 2% 50px 2%;}


.serv1, .serv2{margin-top:100px; }

.serv1 span, .serv span{padding:5px 5px 0px 5px; background:#CDC571; color:white; font-weight:bold;}
.serv1 .serv{float:right; width:48%; padding-top:60px;}
.serv1 .serv b, .serv2 .serv b{font-size:20px;}
.serv1 .serv p, .serv2 .serv p{ margin:15px 0px; }
.serv1 .serv a, .serv2 .serv a, #article .serv a, #room a{
display:block; height:40px; width:100px; text-decoration:none; line-height:40px;  background:#CDC571; color:white; text-align:center;
}
.serv1 img{float:left; width:48%;}

.serv2 img{float:right; width:48%;}
.serv2 .serv{width:48%; padding-top:60px;}



#room .two{width:19%; text-align:left;  display:inline-block; vertical-align:top; margin:80px 2% 0px 2% ;}
#room .sec{  margin-top:-42px; height:40px; position:absolute; margin-bottom:10px;}
#room .mon{ color:#F37F2A; font-size:13px;}
#room img{width:100%; }
#room  span{display:block; padding:0px 0px 0px 20px; width:208px;  line-height:40px; background:url(../img/back.png);}
#room  h2{font-weight:normal;}
#article{width:100%; margin:50px 0px 0px 0px; padding:70px 0px; background:#374289; color:#EDEDED; text-align:center;}
#article a{width:100px; display:block; height:30px; line-height:30px; background:#F37F2A; color:white; margin:10px auto; text-decoration:none;}

#footer{background:#1F254D; width:100%; opacity:0.9; padding:50px 0px;}
 
 #foot{width:80%; margin:0px auto;}

#foot .box{display:inline-block; vertical-align:top; }
#foot .boz{width:13%; margin-left:7%;}
#foot .bo{width:30%; margin-right:50px;  }
#foot .box a{display:block; text-decoration:none; color:white; line-height:30px;}
#foot .box img{width:80%;margin-bottom:20px;}
#foot .box h2{color:white; margin-top:20px;}
#foot .box p{color:white; }

#last{width:90%; padding:10px 5%; text-align:center; background:#0A0E0A; color:white; opacity:0.9;}
#last span{font-size:9px; font-weight:bold;}

#conne {margin-top:40px;}
#conne span{display:inline-block; width:35px; height:35px; border-radius:10px;}
#conne .ab{background:url(../img/instagram.png); background-size:110% ;}

#conne .cd{background:url(../img/facebook.png); background-size:100% ;}

#conne .ef{background:url(../img/link.png); background-size:100% ;}


@media (max-width:1200px){
#head, #welcome, #room,  #foot, #cont, #section{width:90%;}
}
@media (max-width:930px){
 #head .logo img{width:250px; margin-left:-50px;} #head .nav a{margin-top:25px;  margin-right:30px;}
}
@media (max-width:830px){
	 #slide img{width:300%; }
 #btn{display:block; }  #head .nav{display:none; }
#head .nav{float:none; position:absolute; z-index:1000; left:0px; background:#E6E6E6; height:100%;}
#head .nav a{display:block;  margin-right:40px; 
padding:10px 80px 10px 0px; border-bottom:0px; margin-top:10px; margin-left:20px;}
#head .nav a:hover{ border-bottom:3px solid #F37F2A ;} 
}
@media (max-width:800px){

#foot .box{display:block; margin-bottom:20px;}
#foot .boz{width:100%;}
#foot .bo{width:100%; margin-right:0px;  }

#foot .box img{width:50%;}

.serv1 .serv, .serv2 .serv{float:none; width:100%; padding-top:40px; }
.serv1, .serv2{margin-top:50px;}
.serv1 img, .serv2 img{float:none; width:100%;}


}

@media (max-width:550px){
	#welcome h1{font-size:24px;  background-position:center 70px; height:85px;}
	#welcome .one {width:98%; display:block; }
	 #room .two{width:90%; display:block; margin:40px auto 0px auto; }
	  
#book a{margin-top:200px;}


#foot .three, #foot .tre{float:none; margin:0px 0px 20px 40px;}
 }
 @media (max-width:401px){

#cont input[type=text],#cont select, #cont textarea{width:98%; padding-left:2%;}


 }