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

/* all smartphones */
@media only screen
and (max-width : 767px) {
body {background:#292929 !important}
nav {display:block; position:relative; width:100%}
nav ul {width:90%; position:relative; margin:15px auto; }
nav li {width:43%; float:left; color:#fff; font-family:'PT Sans Narrow',Arial, Helvetica, sans-serif; border:solid; border-width:1px; border-color:#666; margin:0 5px 4px 0; padding:10px 6px 6px; text-align:center; background:#232323}
nav li a {color:#fff; font-family:'PT Sans Narrow',Arial, Helvetica, sans-serif; text-decoration:none;padding:6px 6.5px 14px; font-weight:normal; font-size:15px }
nav li:hover  {background:#f9b845;  }
nav a:hover {color:#000}
.guarantee {display:none}
.dropdown {display:none}
header {position:absolute; background:#292929}
.in-header {width:100%}	
.in-header img {float:none;margin:15px auto;position: relative;}
#supersized {display:none !important}
#prevslide,#nextslide {display:none !important}
.reservation {display:none}
.con-promotion {display:none}
.mobile-slide {display:block; position:relative; top:385px; z-index:200}
.flexslider {width:100% !important}
.flexslider .slides img {width: 100% !important}
.content-r {display:none}
.content {width:100%}
.content-l {width:100%; position:static; height:auto}
#slideshow-content-left { display:none}
.main-content {  float: left; margin: 255px 4% 40px; position: static; top: 260px !important; width: 92.5%;}
.for-mobile {display:block; position:relative; width:100%} 
.content-l img {margin:20px 0 0 15px}
.p-right {margin-top:10px !important; float:left !important; margin-bottom:15px !important}
.main-box {width:100%}
.box1,.box2 {width:100%; height:auto}
.box1 span img, .box2 span img {width:inherit}
.box1 p, .box2 p {padding:0 10px 50px}
.in-footer {display:none}
.btn-mobile {display:block; bottom:-3px; position:absolute; right:0}
.flex-direction-nav a {background: url(../images/bg_direction_nav.png) !important  no-repeat 0 0 ;}
footer {background:none}
.tag-name {display:none}
.menu-toggle {display:none}
.in-main-content-other {width:100%}
.menu-room-acc {width:90%; margin:280px 0 0 5%; background:#353535}	
.menu-room2 {width:90%; margin:20px 0 0 5%; background:url(../images/bg-other.png)}	
.menu-room-list {  float: none;    margin: 15px auto 5px;  width: 90%;}
.menu-room2 img {width:90%}
.menu-room3 {width:90%; margin:20px 0 0 5%; background:#353535}	
#thumb-tray {display:none}	
.menu-room-acc p {width:90%}
.menu-room3 p {width:90%}
.thumb-slide {width:90%}
#ui-carousel-prev {}
.flexslider:hover .flex-next {opacity: 1; right: 5px !important;}
.menu-room-promotion { margin:385px 0 0 5%; width:90%; float:none; background:#353535}
.for-pic-room2 {width:90% !important}
.promo-detail {width:90%}
.promo-detail ul { margin:5px 10px 10px 40px}
.promo-detail h2 { padding:10px 15px 0 20px}
.promotion-price {width:90%; margin:10px}
.btn-book2 {margin:10px 10px 5px 10px}
.thumb-slide {display:none}
.menu-room-wedding {margin:390px 0 0 5%; width:90%; float:none; background:#353535}
.menu-room-wedding p {width:90% !important; color:#ccc}
/*.table {display:none}*/
.menu-room-gallery {margin:385px 0 0 5%; width:90%; float:none; background:#353535}
.menu-room-gallery img { margin: 0.5% 0 0.5% 2%;  width: 30%;}
.bkk-guide {width:100%; margin:10px auto 10px 0}
.bkk-map li {width:60%; display:inline}
.bkk-pic {width:90%; margin:15px 0 10px 5%}
.bkk-pic2 {width:90%; margin:15px 0 10px 5%}
.bkk-detail {width:95%}
.bkk-detail2 {width:95%}
.bkk-detail p {width:95%}
.bkk-map {height:auto}
iframe {display:none}
.bkk-detail3 {width:90%}
.bkk-pic3 {width:95%}
.contact-l {width:95%}
.contact-address {width:100%}
.contact {width:90%; margin:0 5%}
.contact-field input[type="text"], .contact-field select, .contact-field2 input[type="text"], .contact-field input[type="email"] { width:99%}
.contact-field label {width:60%}
.contact-field textarea {width:99%}
.contact-l img {width:95%; margin:0 0 0 5%}
.flexslider .slides img {border:none !important}
.box-partner {width:90%}
.box-partner img {width:25%}
.flex-direction-nav .flex-next {right:5px !important}
.pic-panorama {width:95% !important}
.in-social { width:93%; margin:3% 2% 45px;}
.promo-mobile {margin-top:20px !important}
.pop-up {display:none}	
.benefits {margin: 390px 0 0 5%; width: 90%; float: none;  background: #353535; padding-top:20px}
.guarantee-group { width:90%; margin:20px; }
	

}

/*  ipad portrait,tablet and small screen*/
@media only screen
and (min-width : 768px)
and (max-width : 1023px) {
.reservation { position:fixed;top:20px; right:20px }
.con-promotion { margin:-260px auto 170px 20px; width:730px}
.content { width:730px; margin:70px auto 10px }
.content-l {width:100%}
.content-r {display:none}
#slideshow-content-left {width:100%}
.main-box {width:730px}
.box1, .box2 {width:31.5%}
.code img {display:none}
.in-footer {width:730px}
.box1 h2, .box2 h2 { font-size:16px}
.in-footer p {width:72%}
.in-footer img {margin:-39px 0 10px}

.guarantee {display:none}
.box1 span img, .box2 span img {width:94px}
.in-main-content-other {width:100%}
.menu-room-wedding { width:90%; margin:110px 5% 0 0; background:url(../images/bg-other.png); float:right}
.menu-room-wedding p {width:95%}
.for-ipad {margin:20px 5% 0 0; background:url(../images/bg-other.png); float:right}
.menu-room-acc { width:90%; margin:110px 5% 0 0; background:url(../images/bg-other.png); float:right}
.menu-room { width:90%; margin:110px 5% 0 0; background:url(../images/bg-other.png); float:right}
.menu-room p {width:95%}
.menu-room-acc p {width:95%}
.menu-room-gallery {width:90%; margin:20px 5% 0 0; float:right}
.menu-room-gallery img {}
.menu-room2 {width:90%; margin:20px 5% 0 0; background:url(../images/bg-other.png); float:right}
.menu-room3 { width:90%; margin:20px 5% 0 0; background:url(../images/bg-other.png); float:right}
.menu-room3 p {width:95%}
.tag-name {width:auto; height:100px}
.menu-toggle {top:180px}
.tag-name h1 {font-size:30px !important}
.list-room { width:100%;position:static; right: 0; height:auto; margin:15px}
.list-room li {background: rgba(0, 0, 0, 0.4)}
.list-room li a {color:#656565}
.list-room li a:hover {color:#000}
.bkk-map {float:none}
.in-footer img {  margin: -46px 0 30px 5px;}
.menu-room-promotion {width:95%; margin:20px 2.5% 0}
.for-pic-room2 {width:25% !important}
.bkk-map li {width:60%}
.bkk-pic3 {width:35%}
.bkk-map2 li {width:70%}




}

/* ipad landscape, 1024-1100 screen */
@media only screen
and (min-width : 1024px)
and (max-width : 1279px) {
.menu-room-gallery { width:90%; margin:20px 5% 0 0; float:right}
.menu-room-gallery img {}





}

/* 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) {

}