/* short screen */
@media only screen
and (max-height : 605px) {
.logo {width:100px; height: auto; bottom:5px}
header {height:80px; position:fixed; top:0; z-index:10;left: 0;}
.header-in {height:70px}
nav {bottom:10px;}
nav ul {width: auto}
nav a{font-size:13px;}
.description {display:none}
.content {width: 100%;position: static; height:100%; margin:100px 0 55px 0}
.heigher {width:745px;height: auto; padding:15px 0 15px 15px}
.full-width {width: 950px;}
.menu-toggle {top: 5px;right: 0;}
.footer-r {right: 105px;}
.content-in {border-radius:5px}
.content2 {margin: 100px auto 55px auto;}
.language {top: 5px;}
nav ul {margin-top: 0px;}
.award-all {display: none}
}


@media only screen
and (min-width : 319px) 
{	img.logo
	.award-all {display: none}
	
	
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
body {background:#5277c5 url(../images/bg-mobile.jpg) bottom no-repeat;color:#333}
.booking-box,.promotion, .footer-r,nav,.banner-offer,#fullscr-copyright,#supersized,#progress-bar,#progress-back,.load-item,#controls,.x-mobile,.topnav,.description,#canvas_holder{display:none!important;visibility:hidden}
header {width:100%; position:static; margin:0; text-align:center;border-radius:0; height:85px}
.header-in { width:100%; height:75px;}
img.logo  {width: 100px;  position:absolute; left:3%; top:10px; z-index:15}
.content,.content-full,.content-home,.content2 {width:85%; height:auto; position:static; margin:10px auto 0 auto; background:rgba(255,255,255,.9) ; padding:15px; border-radius:5px 5px 0 0}
.content-in {width:100%; margin:0; height:100%; position:relative;}
footer {text-align:center; width:100%; height:40px; position: relative; margin:15px auto; background: url(../images/bg-content-f.png)}
.footer-in {width:100%; margin:0 auto; height:40px; position:relative; padding-top:5px}
.footer-l {position: static; width:100%; margin:5px auto; text-align:center}
footer li {padding:10px 0}
.intro {position: static; width:100%;padding:0; font-size:14px;}
.intro {text-shadow:none}
.intro h1 {font-size:24px; line-height:28px; color:#582455; text-align: center}
.intro h2 {font-size:16px; line-height:20px; color:#333;}
.intro h3 {font-size:14px; line-height:16px;}
.book-mobile {top:10%; right:3%}
.book-mobile img {width:140px; height:44px}
.bg,.bg2 {background:none}
.roomtype,.box3col {width:100%; margin:0 0 10px 0; font-size:13px}
.thumb {width:100%;}
.box2col {width:100%}
.box2colthumb {width:50%}
.box2coldetail {width:45%}
.box2coldetail p {margin-bottom:25px}
.gallthumb {width:48%;margin:1% 1% 0 1%}
ul.alt-list {margin-bottom: 0}
.pc-x,.main-select-menu,.mobile-slide { display:block; }
.maincontent table {width:100%}
.maincontent {width:100%; float:left; padding:0; height:100%}
.maincontent ul {width: 100%; margin:0; padding:0}
aside {width:100%; float:right; padding-top:10px; position:relative; margin-top:20px; text-align:center;border-top:none}
aside h2 {color:#333; font-size:20px; line-height:30px; margin-bottom:5px;}
aside h3 {color:#333}
aside ul { width:95%; margin:0 auto}
aside li {padding:10px 0; border-top:1px #ccc solid;border-bottom:none}
aside a {color:#333}
aside p {color:#333}
.btn-aside {color:#333}
.reservation {width:93%; height:160px; position:absolute;}
.reservation input[type="image"]{position:absolute; top:133px; left:190px}
.roompic { display:block;width:100%;height: auto; margin-bottom:15px}
.roompic img {max-width:100%;height: auto;}
.nav {display:block;width:85%; position:static; margin:0 auto; background:rgba(255,255,255,.8); padding:15px 15px 10px 15px; border-radius:0 0 5px 5px;border-top:#3a7c22 solid 1px;}
.nav h2 {color:#02b0ae; font-size:20px; line-height:20px; margin-bottom:3px;}
.nav h3 {font-size:18px; margin-bottom:5px; font-weight:bold; color:#333}
.nav ul { width:100%; margin:0 auto; text-align:center}
.nav strong {font-weight:bold}
.nav a {font-weight:bold; text-decoration:none; color:#333}
.nav a:hover {text-decoration:none}
.nav .select a {color:#3a7c22}
.nav p { font-size:12px;color:#333; margin-bottom:10px;}
#formID {width:99%; margin-top:15px}
.contactform {width:99%; padding:0;}
.contactform-field {width:100%;}
.contactform-field input,.contactform-field select,.contactform-field textarea {width:90%;}
.contact-address {float:left; width:99%; margin-right:0;}
.contactform-field input[type="image"] {float:none}
a{ outline: none; text-decoration:none; }
.column2 {width:100%; float:left;}
.column1 {width:100%; float:left; margin-right:0}
.offerthumb {width:100%; margin-right:0}
.offerdetail {float:left; width:100%; }
.offerdetail,.offerdetail p {font-size:13px; line-height:normal}
.mobile-slide {margin-bottom:10px}
.language {top:60px}
.language-in {width:50%;margin-right:4%}
.row1, .row2 {left: 0;padding: 0;background: none;width: 100%;}
.top1,.top2,.bottom1,.bottom2 {display:none}
.row1 img,.row2 img {float:left; margin: 0 0 10px 0 ; width:100%; height:auto }
.review-comment img {width:69px; height:14px; float:left; margin-right:5px}
.review-comment {width:100%;}
.review-user {width:27%;}
.review-user img {display:none}
.review-user br {display:none}
.review-user,.user,.from {width:100%}
.trip-ad {display:none !important}
	.award-all {display: none}
	
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width : 670px)
{
body {background:#5277c5 url(../images/bg-mobile.jpg) bottom no-repeat;color:#333}
.booking-box,.promotion,.footer-r, nav,.banner-offer,#fullscr-copyright,#supersized,#progress-bar,#progress-back,.load-item,#controls,.x-mobile,.topnav,.description,#canvas_holder{display:none!important;visibility:hidden}
header {width:100%; position:static; margin:0; text-align:center;border-radius:0; height:110px}
.header-in { width:100%; height:100px;}
img.logo  {width: auto; height:80px; position:absolute; left:3%; top:10px; z-index:15}
.content,.content-full,.content-home,.content2 {width:85%; height:auto; position:static; margin:10px auto 0 auto; background:rgba(255,255,255,.9) ; padding:15px 15px 40px 15px; border-radius:5px 5px 0 0}
.tripadvisor {    left: 0 !important;}
.content-in {width:100%; margin:0; height:100%; position:relative;}
footer {text-align:center; width:100%; height:40px; position: relative; margin:15px auto 0 auto; background: url(../images/bg-content-f.png)}
.footer-in {width:100%; margin:0 auto; height:40px; position:relative; padding-top:5px}
.footer-l {position: static; width:100%; margin:5px auto; text-align:center}
footer li {padding:10px 0 0 0}
.intro {position: static; width:100%;padding:0}
.bg,.bg2 {background:none}
.roomtype,.box3col {width:100%; margin:0 0 10px 0; font-size:13px}
.thumb {width:40%;}
.box2col {width:100%}
.box2colthumb {width:40%;}
.box2coldetail {width:50%;}
.box2coldetail p {margin-bottom:25px}
.gallthumb {width:32%;margin:0.5% 0.5% 0 0.5%}
.gallthumb img {width:100%}
ul.alt-list {margin-bottom: 0}
.pc-x,.main-select-menu,.mobile-slide { display:block; }
.maincontent table {width:100%}
.maincontent {width:100%; float:left; padding:0; height:100%}
.maincontent ul {width: 100%; margin:0; padding:0}
aside {width:100%; float:right; padding-top:10px; position:relative; margin-top:20px; text-align:center;border-top:none;}
aside h2 {color:#333; font-size:20px; line-height:30px; margin-bottom:5px;}
aside h3 {color:#333}
aside ul { width:95%; margin:0 auto}
aside li {padding:10px 0; border-top:1px #ccc solid;border-bottom:none}
aside p {color:#333}
aside a {color:#333}
.btn-aside {color:#333}
.reservation {width:93%; height:160px; position:absolute;}
.reservation input[type="image"]{position:absolute; top:133px; left:190px}
.roompic { display:block;width:100%;height: auto; margin-bottom:15px}
.roompic img {max-width:100%;height: auto;}
.nav {display:block;width:85%; position:static; margin:0 auto; background:rgba(255,255,255,.8); padding:15px 15px 10px 15px; border-radius:0 0 5px 5px;border-top:#3a7c22 solid 1px;}
.nav h2 {color:#02b0ae; font-size:20px; line-height:20px; margin-bottom:3px;}
.nav h3 {font-size:18px; margin-bottom:5px; font-weight:bold; color:#333}
.nav ul { width:100%; margin:0 auto; text-align:center}
.nav strong {font-weight:bold}
.nav a {font-weight:bold; text-decoration:none; color:#333}
.nav a:hover {text-decoration:none}
.nav .select a {color:#3a7c22}
.nav p { font-size:12px;color:#333; margin-bottom:10px;}
#formID {width:99%; margin-top:15px}
.contactform {width:99%; padding:0;}
.contactform-field {width:100%;}
.contactform-field input,.contactform-field select,.contactform-field textarea {width:100%;}
.contact-address {float:left; width:99%; margin-right:0;}
.contactform-field input[type="image"] {float:none}
a{ outline: none; text-decoration:none; }
.column2 {width:100%; float:left;}
.column1 {width:100%; float:left; margin-right:15px}
.offerdetail,.offerdetail p { font-size:13px; line-height:normal}
.intro {text-shadow:none}
.intro h1 {font-size:24px; line-height:32px; text-align: center !important; color: #5d2759 !important}
.intro h2 {font-size:18px; line-height:22px; color:#333; text-align: center !important}
.intro h3 {font-size:14px; line-height:16px;}
.book-mobile {top:65px; 3%}
.book-mobile img {width:140px; height:44px}
.mobile-slide {margin-bottom:10px}
.language {top:60px}
.language-in {width:50%;margin-right:4%}
.row1, .row2 {left: 0;padding: 0;background: none;width: 100%;}
.top1,.top2,.bottom1,.bottom2 {display:none}
.row1 img,.row2 img {float:left; margin: 0 10px 0 0; width:40%; height:auto }
.review-comment img {width:69px; height:14px; float:left; margin-right:5px}
.review-comment {width:70%;}
.review-user {width:30%;}
.trip-ad {display:none !important}
	.award-all {display: none}
	.social {display: none}
}

/* small screen and tablet */
@media only screen
and (min-width : 671px)
and (max-width : 1000px) {
header {height:110px}
.header-in { width:650px; height:100px; background:#3a7c22 url(../images/bg-header2.jpg) bottom center no-repeat}
.logo {width: auto; height:60px; position:absolute; left:0; bottom:30px}
nav { position:absolute; right:0; bottom:10px}
.content-in {width:650px; min-height:700px;}
.footer-in { width:650px; margin:0 auto; height:75px; position:relative; background:#3a7c22 url(../images/bg-header2.jpg) bottom center no-repeat}
.footer-r {position:absolute; right:20px}
#controls { width:290px;text-align:right; position:absolute; right: 80px;top: -10px;}
.intro {width:330px;}
.menu-toggle {bottom:-29px;}
.maincontent {width:410px; float:left; padding:15px 0 15px 15px; min-height:270px}
.roomtype {margin:1%; font-size:11px}
.thumb {width:32%;}
.box2col {width:380px; margin:1% 0}
.box2colthumb {width:40%}
.box2coldetail {width:50%}
.maincontent table {width:100%}
#play-button;.roompic {display:none!important;visibility:hidden}
.content-full {width:690px; background: url(../images/bg-content-f.png); left:20px; bottom:50px}
.full-width {width:620px;}
.gallthumb {width:19%; height:auto; float:left;margin:0.5% 0.5% 0 0.5%}
.logo {padding:5px}
nav div {height:87px}
nav div a {font-size:12px;padding:25px 10px 26px 10px;}
nav div h2 {font-size:15px; margin:0;}
ul#slide-list {left:51px}
.detail {width:72%;}
#formID {width:99%; margin-top:15px}
.contactform {width:99%; padding:0;}
.contactform-field {width:100%;}
.contactform-field input,.contactform-field select,.contactform-field textarea {width:100%;}
.contact-address {float:left; width:99%; margin-right:0;}
.contactform-field input[type="image"] {float:none}
a{ outline: none; text-decoration:none; }
.column2 {width:33%; float:left;}
.column1 {width:63%; float:left; margin-right:15px}
.offer {background:none; border-bottom: 1px dotted #1a1515}
.offerthumb {width:100%; margin-right:0}
.offerdetail {float:left; width:100%; font-size:13px; line-height:normal}
.heigher {height:500px}
.heigher ul {width:22%; padding-right:10px}
.btn-loc {width:100%;}
.reservation {width:476px; bottom:0; left:80px;height:32px;padding:4px}
.reservation input[type="text"] {width:70px; border:1px solid #ccc; text-align:center}
.reservation input[type="text"],.reservation select {line-height:18px; font-size:11px; height:18px; border:none}
.reservation label,.reservation form {margin-right:8px; font-size:11px}
.check-in,.check-out,.ddroom,.ddadult,.ddchild {height:50px; line-height:14px; float:left; margin-right:0}
.check-in,.check-out {width:110px;}
.ddroom,.ddadult,.ddchild {width:50px;}
.reservation input[type="image"]{bottom:4px; right:4px;}
.reservation img.tcalIcon {margin: 0 0 0 2px;}
ul.alt-list { width:100%; margin:0}
.language-in {width:650px}
.content2 {width: 640px;}
.row1 {width:580px;}
.row2 {width:580px;}
.top1 {width:610px;}
.top2 {width:610px;}
.bottom1 {width:610px;}
.bottom2 {width:610px;}
.row1 h2,.row2 h2 {font-size:18px; color:#060; margin:0 0 5px 0; font-style:normal; text-transform:uppercase}
.row1 img,.row2 img {float:left; margin: 0 10px 0 0; width:40%; height:auto }
.review-comment img {width:69px; height:14px; float:left; margin-right:5px}
.trip-ad {bottom:280px; left:0px; }
	.award-all {display: none}
	.social {display: none}
}

@media only screen
and (min-width : 671px)
and (max-width : 1000px)
and (max-height : 605px)
{
.logo {width:100px; height: auto; bottom:0px}
header {height:80px; position:fixed; top:0; z-index:10;left: 0;}
.header-in {height:75px}
nav {bottom:10px;}
nav ul {width: auto}
nav a{font-size:13px;}
.description,.footer-r {display:none}
.content {margin: 100px 0 55px 0;}
nav li {margin-left:5px;}
	.social {display: none}
}


@media only screen
and (max-width : 1000px) {.btn-loc {width:100%;}
.promotion{bottom: 350px;}
.intro{bottom: 300px;}
.rwd-break{display: block; }
}

@media only screen and (max-width: 240px) {
img.logo  {width: auto; height:70px; position:absolute; left:3%; top:10px; z-index:15}
.book-mobile {top:85px}
.book-mobile img {width:120px;height: auto;}
header {height:100px}
.header-in {height:90px;}
.intro h1 {font-size:18px; line-height:20px; color:#582455;}
.award-all {display: none}	
	.social {display: none}
}