@charset "UTF-8";
/* CSS Document */
html{-webkit-text-size-adjust: none;}
body{font-family: 'Kanit', sans-serif; font-weight:300; font-size:18px; color:#000; line-height:27pt; background:#FFF; margin:0;}

img{vertical-align:middle;}
h1, h2, h3, h4, strong{font-weight:700;}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }
  
a{text-decoration:none; color:#666;}
a:hover{text-decoration:underline;}

.top-menu{background:#0271C0; overflow:hidden; padding:5px 0; font-size:22px; display:none; position:fixed; top:0; z-index:9999; width:100%;}

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.warpper{position:relative; width:1000px; margin:0 auto;}
.warpper-head{background:url(../images/bg-head.jpg) top center no-repeat #168ed4; border-top:5px solid #f09828; min-width:1000px;}

.menu{padding:0 20px; text-align:center; margin:0 0 50px;}
.menu a{display:inline-block; color:#FFF; font-size:14px; vertical-align:middle; padding:30px 10px 0;}
.menu a:nth-child(1){background:url(../images/icon-m-1.png) 50% 0 no-repeat;}
.menu span a:nth-child(1){background:url(../images/icon-m-2.png) 50% 0 no-repeat;}
.menu a:nth-child(3){background:url(../images/icon-m-3.png) 50% 0 no-repeat;}
.menu a:nth-child(4){padding:10px 0 0;;}
.menu a:nth-child(5){background:url(../images/icon-m-4.png) 50% 0 no-repeat;}
.menu a:nth-child(6){background:url(../images/icon-m-5.png) 50% 0 no-repeat;}
.menu a:nth-child(7){background:url(../images/icon-m-6.png) 50% 0 no-repeat;}
.menu a:hover{color:#f09828; text-decoration:none;}



/*--------------------Sub-Menu--------------------*/
.sub-menu {display:none; position:absolute; left:80px; top:90px; padding:0; z-index:99999; border-bottom:1px solid #FFF; border-top:1px solid #FFF;}
.sub-menu li{border-bottom:1px solid #FFF; padding:0; background:#DE9829; border-left:1px solid #FFF;  border-right:1px solid #FFF; cursor:pointer;}
.sub-menu li a{display:block; background-image:none !important; width:180px; color:#000; font-size:14px; text-decoration:none; border:0; padding:10px 10px; text-transform:uppercase;}
.sub-menu li a:hover{color:#FFF; border:0;}
.sub-menu li:hover{background:#168ED4;}
.sub-menu li:last-child{border-bottom:0;}
.ratesub{top:40px; left:-60px;}

.warpper-title{background:url(../images/bg-title.jpg) repeat-x; min-width:1000px;}
.header{background:url(../images/bg-content.png) no-repeat 0 83px;}
.header h1{display:block; background:url(../images/bg-welcome.png) center no-repeat; text-align:center; font-size:35px; font-weight:700; color:#df9735; padding:80px 0;}

.highlightpic{text-align:center; padding:0 0 20px;}
.highlightpic img{width:100%;}

.home-content{padding:0 0 20px;}
.home-content p{text-align:justify; margin:0 0 10px;}
.home-content p span{color:#168ed4;}
.home-content p >img{display:block; float:left; margin:0 15px 0 0; padding:10px; width:440px; -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);}

.home-content div{padding:10px; -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);}

.home-content div img{width:315px; margin:0 10px 0 0;}
.home-content div img:nth-child(3){margin:0;}

.warpper-coffee{background:url(../images/bg-coffee.jpg) #008CD7 no-repeat top center; min-width:1000px;}
.warpper-coffee h2{color:#FFF; text-align:center; padding:20px 0; font-size:35px;}
.warpper-coffee p{color:#FFF; line-height:20pt; padding:20px 0; text-align:justify;}
.warpper-coffee img{margin:0 10px 0 0; width:322px;}
.warpper-coffee img:nth-of-type(3){margin:0 auto;}

.nearplace h3{font-size:30px; color:#df9735; padding:20px 0;}
.nearplace iframe{display:inline-block; margin:0 10px 0 0; border:1px solid #df9735;}
.nearplace div{display:inline-block; vertical-align:top;}
.nearplace ul{overflow:hidden; width:480px;}
.nearplace div li{width:235px; margin:0 0 20px; display:inline-block;  font-size:14px; line-height:17px;}
.nearplace div li img{border:1px solid #df9735; display:inline-block; vertical-align:middle; margin:0 10px 0 0;}
.nearplace div li span{display:inline-block; vertical-align:middle;}
.nearplace iframe{width:460px; height:300px;}

/*--------------------------Footer--------------------------*/

.warpper-footer{min-width:1000px; padding:55px 0 20px; background:url(../images/bg-footer.jpg) top repeat-x #168ed4;}

.footer{overflow:hidden;}
.footer img{width:120px; display:block; float:left; margin:0 20px 0 0;}
.footer div{float:left; color:#FFF; font-size:14px; line-height:20px;}
.footer div:nth-of-type(1){width:420px;}
.footer a{color:#FFF;}

/*--------------------------Facilities--------------------------*/
.faci-content h2{padding:0 0 0 50px; background:url(../images/icon-title.png) no-repeat 0 0; margin:0 0 10px;}
.faci-content h2 span{display:block; font-size:24px; color:#168ED4; width:100%; border-bottom:3px solid #168ED4;}

.faci-content ul {overflow:hidden; padding:0 0 0 50px; margin:0 0 20px;}
.faci-content ul li{width:44%; padding:0 3%; margin:0 0 10px; float:left; background:url(../images/bullet-list.png) no-repeat 0 8px;}

.faci-gallery a{width:313px;  border:5px solid #168ED4; margin:0 15px 15px 0; display:block; float:left;}
.faci-gallery a:nth-child(3n){margin:0 0 15px;}
.faci-gallery a img{width:100%;}
.faci-gallery a:hover{border:5px solid #E59921;}

#ratelist li{width:96%; padding:0 0 0 4%; margin:0 0 10px; background:url(../images/bullet-rate.jpg) no-repeat 0 8px;}

/*--------------------------Rate--------------------------*/
.rateroom{padding:20px; margin:0 0 20px; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 8px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 8px 0px rgba(50, 50, 50, 0.75);}
.rateroom figure{width:465px; float:left; margin:0 20px 0 0;}
.rateroom figure img{width:100%; border:1px solid #FFF;}
.rateroom div{float:left; width:475px;}
.rateroom div h3{background:#168ED4; padding:5px 0; color:#FFF; text-align:center; font-size:25px;}
.rateroom div strong, .rateroom div span{display:block; font-size:22px; padding:5px 0;}
.rateroom div strong{border-bottom:5px solid #168ED4; color:#168ED4;}
.rateroom div strong img{margin:0 10px 0 0; position:relative; top:-3px;}
.rateroom div span{font-weight:bold;}
.rateroom figure img:hover{border:1px solid #168ED4;}

/*--------------------------Room--------------------------*/
.roomhighlight{overflow:hidden; margin:0 0 20px;}
.roomhighlight div{width:475px; text-align:justify;}
.roomhighlight img, .roomhighlight div{display:block; float:left; color:#168ED4;}
.roomhighlight img{border:5px solid #168ED4; width:495px; margin:0 20px 0 0;}

.room-gallery a{width:178px; margin:0 24px 15px 0; display:block; float:left;}
.room-gallery a:nth-child(5n){margin:0 0 15px;}
.room-gallery a img{width:100%; border:5px solid #168ED4;}
.room-gallery a:hover img{border:5px solid #E59921;}

/*--------------------------Form--------------------------*/
.thankyou{text-align:center; padding:0 0 20px;}
.thankyou h2{text-align:center; font-size:22px; color:#000; padding:15px 0;}
.thankyou a{width:250px; display:block; margin:0 auto; padding:15px 0; text-align:center; background:#008CD7; color:#FFF; border-radius:10px;}

.c131, .c120{background:#008CD7; color:#FFF;}
.datepicker{padding:0 !important;}
.container{width:100% !important; padding:0 !important;}
.touchspin{height:auto !important; padding:6px 5px !important;}
.select2-container .select2-selection--single{height:40px !important;}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:35px !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow{top:6px !important;}
.input-group .form-control{z-index:0 !important;}
.jf-copyright{display:none !important;}

.jf-form{
  margin-top: 28px;
}

.jf-option-box{
  display: none;
  margin-left: 8px;
}

.jf-hide{
  display: none;
}

.jf-disabled {
    background-color: #eeeeee;
    opacity: 0.6;
    pointer-events: none;
}

.f6, .f7, .f9, .f8{display:inline-block; width:35%; margin: 0 20px 0 0;}
.f11, .f10{display:inline-block; width:24%;}
.c72, .c77{display:inline-block; width:40%; margin:0 20px 0 0;}

/* 
overwrite bootstrap default margin-left, because the <label> doesn't contain the <input> element.
*/
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
  position: absolute;
  margin-top: 4px \9;
  margin-left: 0px;
}

div.form-group{
  padding: 8px 8px 4px 8px;
}

.mainDescription{
  margin-bottom: 10px;
}
.responsive img{
  width: 100%;
}

p.error, p.validation-error{
  padding: 5px;
}

p.error{
  margin-top: 10px;
  color:#a94442;
}

p.server-error{
  font-weight: bold;
}

div.thumbnail{
  position: relative;
  text-align: center;
}

div.thumbnail.selected p{
  color: #ffffff;
}

div.thumbnail .glyphicon-ok-circle{
  position: absolute;
  top: 16px;
  left: 16px;
  color: #ffffff;
  font-size: 32px;
}

.jf-copyright{color: #888888; display: inline-block; margin: 16px;display:none;}

.form-group.required .control-label:after {
    color: #dd0000;
    content: "*";
    margin-left: 6px;
}

.submit .btn.disabled, .submit .btn[disabled]{
  background: transparent;
  opacity: 0.75;
}

/* for image option with span text */
.checkbox label > span, .radio label > span{
  display: block;
}

.form-group.inline .control-label,
.form-group.col-1 .control-label,
.form-group.col-2 .control-label,
.form-group.col-3 .control-label
{
  display: block;
}

.form-group.inline div.radio,
.form-group.inline div.checkbox{
  display: inline-block;
}

.form-group.col-1 div.radio,
.form-group.col-1 div.checkbox{
  display: block;
}

.form-group.col-2 div.radio,
.form-group.col-2 div.checkbox{
  display: inline-block;
  width: 48%;
}

.form-group.col-3 div.radio,
.form-group.col-3 div.checkbox{
  display: inline-block;
  width: 30%;
}

/*--------------------------Contact--------------------------*/
.contact-content{overflow:hidden;}
.contact-content h2{font-size:30px; color:#168ED4;}
.contact-content span:nth-of-type(1){width:100%;}
.contact-content span{display:block; float:left; width:50%;}
.contact-content span a{color:#000;}
.contact-content iframe{width:100%; height:500px;}


@media screen and (min-width:320px) and (max-width:480px) {
.top-menu{display:block;}
.warpper{width:90%; padding:0 5%;}
.warpper-head{min-width:100%; background-image:none;}
.menu{padding:50px 0 0; margin:0 0 10px;}
.menu a{display:none;}
.menu a:nth-child(4){display:block !important;}
.menu a img{width:200px;}
.slider{width:100% !important; border:0 !important; }

.rateroom div{float:none; width:100%;}
.rateroom figure{width:100%; float:none;}
.rateroom{padding:10px;}
.rateroom figure img{border:0;}

.warpper-title{min-width:100%; background-size:100%;}
.header{background:url(../images/bg-content.png) no-repeat; background-size:100%}
.header h1{background-size:100%; text-align:center; font-size:20px; font-weight:700; color:#df9735; padding:50px 0;}

.nearplace iframe{width:100%; margin:0;}
.nearplace div ul{padding:0 2%; width:96%; overflow:hidden;}
.nearplace div li{width:50%; float:left; font-size:12px; vertical-align:top;}
.nearplace div li img{width:50px;}

.roomhighlight img, .roomhighlight div{width:100%;}
.roomhighlight img{border:0;}

#ratelist{padding:0;}
#ratelist li{width:88%; padding: 0 0 0 12%;}

.home-content div{margin:0 5%;}
.home-content div img{width:100%; margin:0 0 10px;}
.home-content p{font-size:16px; padding:0 20px; line-height:20pt;}
.home-content p img{width:96%; padding:2%; margin:0 0 10px;}

.faci-content h2 span{font-size:18px;}
.faci-content ul li{width:90%; padding:0 0 0 10%; font-size:16px;}
.faci-gallery a{width:100%; margin:0 0 10px; border:1px solid #168ED4;}
.faci-gallery a:hover{border:1px solid #168ED4;}

.room-gallery a{width:46%; margin:0 6% 10px 0;}
.room-gallery a:nth-child(2n){margin:0 0 10px;}
.room-gallery a:nth-child(5n){margin:0 6% 10px 0;}
.room-gallery a:nth-child(10n){margin:0 0 10px;}

.contact-content span img{width:30px; margin:0 10px 0 0;}
.contact-content span{float:none; width:100%; font-size:14px;}

.c45, .c50, .c33, .c38{width:auto;}
.c57, .c65{width:auto;}
.c72, .c77{width:auto; margin:0;}

.warpper-coffee{min-width:100%;}
.warpper-coffee img{width:90%; margin:0 auto 10px; display:block;}
.warpper-coffee h2{font-size:30px;}
.warpper-coffee p{margin:0 20px; font-size:16px;}
.warpper-footer{min-width:100%; padding:55px 0 10px;}
.footer img{width:150px; margin:0 auto 20px; float:none;}
.footer div{width:96%; float:none; padding:0 2% 10px;}
.footer div:nth-of-type(1){width:auto;}

}