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

/* all smartphones */
@media only screen
and (max-width : 767px) {
body {background:#fff !important;}
#header {background:#ff6002; height:330px}
.in-header {width:auto}
#header img {float:none; margin-top:0px; padding-top:10px;}
nav { margin:10px auto; width:97%}
.menu-pc {display:none}
#main-content {width:auto; margin-top:-180px !important}
#con-promotion {display:none}
.reservation {display:none}
.bg-over {display:none}
.logo { display:block; float:none; margin:0 auto}

.menu-mobile {width:90%; margin:0 auto; margin-top:15px; display:inline !important}
.mobile-list {width:48%; height:40px; font-size:12px;background:url(../images/bg-li-menu.jpg); float:left;  margin:2px; padding:4px 0 0 0; text-align:center; font-size:11px; font-weight:bold; border-radius:3px }
.mobile-list:hover {}
.menu-mobile a {font-family:'BankGothicMdBTMedium',Arial, Helvetica, sans-serif; font-size:15px; color:#000; line-height:40px; font-weight:normal }
.menu-mobile a:hover {font-size:14px; color:#f4c400}

.mobile-list2 {width:48%; height:40px; font-size:12px; background:url(../images/bg-booking.jpg); float:left; margin:2px; padding:4px 0 0 0; text-align:center; font-size:11px; font-weight:bold; border-radius:3px; }
.mobile-list2:hover {background:#fad12a}
.mobile-list2 a {font-family:'PT Sans Narrow',Arial, Helvetica, sans-serif; font-size:22px; text-shadow:#000 1px 1px; color:#fff; line-height:40px; font-weight:bold }
.mobile-list2 a:hover {font-size:22px; text-shadow:#000 2px; color:#f4c400}

.main-box {background:#fff; margin: 20px auto;}
.box1 {width:95%; margin: 10px 0 5px 2.5%; height:auto; float:left}
#con-hello {margin:190px 3% 0 0; height:100px; width:95%}
#con-hello h1 {font-size:24px; text-align:center}
#con-hello h2 {font-size:20px; text-align:center}
#con-hello p {font-size:16px; text-align:center}

.box1 p {padding: 0 10px 50px 15px;}

footer {background:none}
.footer-in { display:none}
.btn-mobile { display:block; float:right}
.content-all-text {width:95%; margin: -130px 10px 20px;}
.content-all-list {width:90%}
.content-all-list li a {width:90%}
.map-pic {display:block !important}

.map-small {display:none !important}
.content-all-text ul {width:96%}
.content-all-list img {
    left: 10%;
    margin: 0 auto;
    position: relative;
    width: 90%;}
.gallery li img {width:30%;}	
.main-gallery { margin:0 auto 400px auto;}
.icon-head {display:none}
.content-slide { display:none}

.booking {display:none}
.for-mobile { display: block !important;margin: 190px 0 0;   position: relative; width: 100%;}
.for-mobile h2 {font-size:20px;margin: 0 0 4px 0;	height: 20px;line-height: 22px; color:#ff6002; 	font-family:'BankGothicMdBTMedium',Arial, Helvetica, sans-serif; text-transform:uppercase; text-align:center}
.for-mobile p {	text-overflow: ellipsis;color: #fff;font-size: 14px;	margin: 0 auto;width: 90%;line-height: 18px; color:#000; font-family:'PT Sans',Arial, Helvetica, sans-serif	}
.for-h {    margin: 200px auto 30px;    width: 95%;}
.for-h h1 {margin:0 0 0 2%; font-size:20px}	
.for-h ul {width:45%}
.for-h p {width:96%}
.bangkok-landmark2 {width:95%; margin-left:2.5%}
.bangkok-landmark {width:95% !important; margin:2% 0 0 2.5%; float:left !important; }
.landmark {   font-size: 14px;   margin-left: 2.5%;}
.gallery-mobile {display:none !important}	
.main-box-gallery img {margin: 2% 0 0 2%;  width: 29%;}
	
	
#contact-left {width:95%; position:relative; height:auto}
#contact-right {width:80%; float:left}
.content-contact {margin: 0 0 20px 20px;}
.contactform {border:none}
#contact-all {width:100%;  margin: -100px auto 0;}
.contactform-field {width:99%}
.content-all-text2 {width:97%; height:100%; float:left; margin:10px; }
.content-service {width:90%; height:auto; float:left; margin:10px;}
.for-h2 {    margin: 200px 30px;}
.for-h2 h1 {left:2%}
	
	

}

/*  ipad portrait,tablet and small screen*/
@media only screen
and (min-width : 768px)
and (max-width : 1023px) {
.in-header {width:95%}
#main-content {width:730px}
nav {  margin: 0;position: absolute;right: 0 !important;top: 85px;}
nav li {padding:0px 8px}
.reservation {width:730px; background: rgba(37,63,58,.8); padding:0 !important}
.check-in { margin:10px 5px 22px 20px}
.check-out { margin:10px 5px 22px 10px}
.reservation input[type="image"]{ width:120px; height:32px; margin: 10px 0 0 30px;}
.footer-in {width:95%}
.box1 {margin:200px 9px 5px 0; width:32%}
#con-promotion {display:none}
.reservation img.tcalIcon {margin:0 0 0 3px}
.bg-over {height:100px; background:url(../images/bg-overs.png) repeat-x}
footer {position:fixed; bottom:50px}
.footer-text {width:90%;} 
.footer-img {width:10%}
.footer-img img {width:40%}
.content-all-text {width:95%; padding-right:2%;}
.content-all-list {width:90%}
.content-all-list li a {width:45%}
.content-all-list img {
    left: 10%;
    margin: 0 auto;
    position: relative;
    width: 90%;}

.main-gallery { margin:25% auto 400px auto;}
.content-slide {display:none}
.con-promotion {display:none}
.booking {width:730px}
.searchbox2 {top:0 !important}
.main-box {margin:0 auto}
.for-h {margin: 200px 0 30px;}
.ipad {margin:30px 9px 150px 0}
.bookroom {bottom: 7px; right: 7px;width: 50%;}
.menu-toggle-off { top: 280px;}
.bangkok-landmark2 { margin-bottom:90px}
.main-box-gallery { margin-bottom:100px }
.main-box-gallery img {width:18.5%}
.for-h2{margin: 200px 0 0 0}
#contact-all { width:730px; margin:-10px auto 0}







}

/* ipad landscape, 1024-1100 screen */
@media only screen
and (min-width : 1024px)
and (max-width : 1279px) {

.content-slide {    margin: 200px auto 0;}
.bg-over { background:url(../images/over-mobile.png) repeat-x; height:70px}
.for-h {margin: 200px 0 30px;}
.for-h2{margin: 200px 0 0 0}
.main-box-gallery { margin: -55% auto 20px;}
#slideshow-content-right-inner a, a.more-link {left:10px}
.main-box-gallery ul {}
.main-box-gallery img { }
#contact-all {margin: -40px auto 0;}



}
/* desktop over 1600 */
@media only screen
and (min-width : 1601px) {
	
}

/* short screen */
@media only screen
and (min-width : 768px) 
and (max-width : 1023px)
and (max-height : 770px) {
	
	

}

/* short screen */
@media only screen
and (min-width : 1024px)
and (max-height : 599px) {

}

@media only screen
and (min-width : 1440px)
and (min-height : 600px) {

}

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

}

@media only screen
and (min-width : 1024px)
and (max-height : 670px) {

}