html { overflow-x: hidden !important; }

.ff-libre{ font-family: 'Libre Baskerville', serif; }
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: normal !important; }
.fw-bold { font-weight: bold !important; }
.text-dark-gray { color: #3d3a35; }
.text-gray { color: #636363; }
.text-small { font-size: 0.9em;}
.bigger-110 { font-size: 1.1em; }
.text-brown { color: #977045; }
.border-gray {border-color: #c9c9c9; }
.lh-2 { line-height: 1.5; }
.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.mr-25 { margin-right: 25px; }
.mr-30 { margin-right: 30px; }
.mb-0 { margin-bottom: 0px; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mt-0 { margin-top: 0px; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mt-2 { margin-top: 1rem; }
.ml-2 { margin-left: 1rem;}
.ml-3 { margin-left: 2rem;}

.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }
.pb-25 { padding-bottom: 25px; }
.pb-30 { padding-bottom: 30px; }
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-25 { padding-top: 25px; }
.pt-30 { padding-top: 30px; }

input[type="radio"],
input[type="checkbox"] {
  margin: 2px 0 0;
}

a { color: #91703b; }
a:hover, a:focus {
    color: #91703b;
    text-decoration: underline;
}

.text-red { color: red; }

.btn {
    border-radius: 0px;
    min-width: 160px;
    padding: 10px 24px;
    font-weight: 300;
    text-transform: uppercase;
    outline: none;
    position: relative;
	-webkit-transition: all ease 0.8s;
	-moz-transition: all ease 0.8s;
	transition: all ease 0.8s;
}

.btn-brown {
    color: #fff;
    background-color: #816333;
    border-color: #816333;
}
.btn-brown:hover, .btn-brown:focus {
    border-color: #96743d;
    box-shadow: inset 300px 0 0 0 #96743d;
}
.btn-light-brown {
    color: #fff;
    background-color: #977045;
    border-color: #977045;
}
.btn-light-brown:hover, .btn-light-brown:focus {
    border-color: #af8250;
    box-shadow: inset 300px 0 0 0 #af8250;
}
.btn-brown.btn-line,
.btn-light-brown.btn-line {
    color: #91703b;
    background-color: transparent;
    border-color: #d3c7b1;
    box-shadow: inset 0 0 0 0 #d3c7b1;
}
.btn-brown.btn-line:hover, .btn-brown.btn-line:focus,
.btn-light-brown.btn-line:hover, .btn-light-brown.btn-line:focus {
    color: #fff;
    border-color: #977045;
    background-color: #977045;
    box-shadow: inset 300px 0 0 0 #977045;
}
.btn-dark-brown {
    color: #fff;
    background-color: #3d3a35;
    border-color: #3d3a35;
    box-shadow: inset 0 0 0 0 #3d3a35;
}
.btn-dark-brown:hover, .btn-dark-brown:focus {
    /* border-color: #5f5b56; */
    /* box-shadow: inset 300px 0 0 0 #5f5b56; */
    border-color: #1d1c1a;
    box-shadow: inset 300px 0 0 0 #1d1c1a;
}

.btn:hover, .btn:focus, .btn.focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    color: #fff;
    text-decoration: none;
    outline: none;
}

.btn-white {
    background-color: transparent;
    text-align: center;
    border: 1px #fdfdfd solid;
    color: #fdfdfd;
}
.btn-white:hover, .btn-white:focus {
	color: #816333;
    border-color: #fdfdfd;
    box-shadow: inset 300px 0 0 0 rgba(255, 255, 255, 0.95);
}

/* navbar */
#mainNav {
    border-color: rgba(34, 34, 34, 0.05);
    background-color: white;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
#mainNav .navbar-brand {
    font-weight: 700;
    text-transform: uppercase;
    color: #91703b;
}
#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover { color: #91703b; }
#mainNav .navbar-nav > li#nav-reserve > a {
	color: #f0b962;
    font-weight: 500;
}
.navbar-custom .navbar-nav > li > a {
	color: #c9c9c9;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
	color: #fff;
}
#mainNav .navbar-toggle {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #222222;
}
.navbar-custom .navbar-nav > .active > a, .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: transparent;
}

.navbar-nav > li > a {
    padding-top: 20px;
    padding-bottom: 20px;
}

.navbar-brand {
  padding: 10px 15px;
}
.navbar-brand img {
	width: 180px;
}

/* for brand logo */
#brand-after { display: none; }
.navbar-shrink #brand-after { display: block; }
.navbar-shrink #brand-before { display: none; }
.navbar-shrink .navbar-brand { padding: 12px 15px; }
.navbar-shrink .navbar-brand img#brand-after { width: 100px; }

/*@media (min-width: 992px) {*/
@media (min-width: 768px) {
    #mainNav {
        border-color: transparent;
        background-color: transparent;
    }
    #mainNav .navbar-brand { color: rgba(255, 255, 255, 0.7); }
    #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover { color: white; }
    #mainNav.navbar-shrink {
        border-color: rgba(34, 34, 34, 0.05);
        /*background-color: white;*/
        background-color: #3d3a35;
    }
    #mainNav.navbar-shrink .navbar-brand {
        font-size: 16px;
        color: #91703b;
    }
    #mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover { color: #91703b; }
    #mainNav.navbar-shrink .navbar-nav > li#nav-reserve > a {
		color: #91703b;
		font-weight: normal;
	}
	.navbar-custom.navbar-shrink .navbar-nav > li > a {
      /*color: #3d3a35;*/
    	color: rgba(255, 255, 255, 0.7);
	}
	.navbar-custom.navbar-shrink .navbar-nav > li > a:hover, .navbar-custom.navbar-shrink .navbar-nav > li > a:focus {
      /*color: #333;*/
    	color: rgba(255, 255, 255, 1);
    	background-color: transparent;
	}
  .navbar-custom.navbar-shrink .navbar-nav > .active > a, .navbar-custom.navbar-shrink .navbar-nav > .active > a:hover, .navbar-custom.navbar-shrink .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: transparent;
  }
}
/* end media min-w 768*/
.navbar-custom .navbar-collapse {
    border-color: rgba(34, 34, 34, 0.05);
}
.navbar-custom .navbar-toggle {
    border-color: rgb(136, 136, 136);
}
.navbar-custom .navbar-toggle:hover, .navbar-custom .navbar-toggle:focus {
    background-color: #3d3a35;
    border-color: #91703b;
}

/* footer */
.footer {
    background-color: #3d3a35;
    color: #fefefe;
    padding-top: 50px;
    line-height: 1.3;
}
.footer .footer-title {
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 400;
}
.footer #brand-footer { width: 200px; }
.footer #subscribe { margin-bottom: 20px; }
.footer #subscribe input:focus,
.footer #subscribe input:active,
.form-custom:focus,
.form-custom:active {
    box-shadow: none;
    outline: none;
}
.footer #subscribe input {
    color: #fefefe;
    border: 1px solid #c9c9c9;
    background-color: transparent;
    height: 42px;
    padding: 10px 20px 10px 20px;
    font-weight: 300;
    border-radius: 0;
}
.footer #subscribe .btn {
    min-width: 40px;
    padding: 10px 17px;
}
.footer #subscribe input::-webkit-input-placeholder,
.form-custom input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #898989;
}
.footer #subscribe input:-moz-placeholder,
.form-custom input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #898989;
   opacity:  1;
}
.footer #subscribe input::-moz-placeholder,
.form-custom input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #898989;
   opacity:  1;
}
.footer #subscribe input:-ms-input-placeholder,
.form-custom input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #898989;
}
.footer #subscribe input::-ms-input-placeholder,
.form-custom input::-ms-input-placeholder { /* Microsoft Edge */
    color: #898989;
}
.input-group .form-control:focus { z-index: 0; }
.footer #social {
    display: block;
    padding-bottom: 20px;
    margin-bottom: 40px;
    font-size: 18px;
}
.footer #footer-bottom {
    border-top: 1px solid #91703b;
    padding-top: 26px;
    padding-bottom: 26px;
    color: #c9c9c9;
    font-size: 12px
}
#footer-nav {
    text-transform: uppercase;
}
.footer ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.footer ul li {
    float: left;
    padding: 0px 9px;
}
.footer ul li a { color: rgba(232, 232, 232, 0.8); }
.footer ul li a:hover,
.footer ul li a:active,
.footer ul li a:focus {
	color: rgba(232, 232, 232, 1);
    text-decoration: none;
}

/* carousel */
.carousel-inner { height: auto; min-height: 500px; }
#myCarousel .carousel-inner { height: auto; min-height: auto; }
.carousel-inner .item:before {
    -webkit-box-shadow: inset 0 0 20rem rgba(0, 0, 0, 1);
    box-shadow: inset 0 0 20rem rgba(0, 0, 0, 1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
	width: 100%;
	    /*width: fit-content;*/
}
.carousel-control .icon-prev, .carousel-control .icon-next { font-size: 3em; }
/* phase 4 */
/*.carousel-caption { top: 12rem; bottom: 10rem; }*/
.carousel-caption { top: 9rem; bottom: 10rem; }
.carousel-caption .title { font-size: 52px; }
.box-now-open {
  margin: 0 auto;
  margin-top: 1rem;
  padding: 1rem;
  text-align: center;
  max-width: 440px;
  background-color: rgba(255, 255, 255, 0.4);
}
.now-open { font-size: 2rem; margin-bottom: 0; margin-top: 0; }
.now-open:hover { color: #543d07!important; }
.text-warning {
  color: rgb(255, 200, 43);
  font-style: italic;
}
.carousel-caption .detail { font-size: 24px; text-transform: uppercase; line-height: 1.5; }
.carousel-caption .detail span.circle:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background-color: #fff;
	margin: 0px 20px 5px 20px;
}
.carousel-caption .button-link { margin-top: 25px; }

/* phase 4 */
.carousel-reserve {
	position: absolute;
  right: 7%;
  left: 7%;
	bottom: 0px;
	z-index: 20;
  padding: 50px 20px; 
  padding-top: 20px;
	color: #fff;
	text-align: center;
	height: 160px;
  background-color: rgba(129, 99, 51, 0.8);
}

.carousel-reserve input[type="text"] {
  background-color: #ffffff;
  border: 1px solid rgb(129, 99, 51) !important;
  color: #222;
  text-align: center;
  padding: 8px 4px;
  font-weight: 200;
  width: 100%;
  height: 80px;
  margin-top: 0.5rem;
}

/* phase 3 */
#link-to-content {
    position: absolute;
    left: 49%;
    right: 50%;
    bottom: 5rem;
}
#link-to-content a {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.6);
}
#link-to-content a:hover, #link-to-content a:active, #link-to-content a:focus {
    color: rgba(255, 255, 255, 0.8);
}

/* hone main overview */
.hover-box#homestay {
  background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.1), 
      rgba(0, 0, 0, 0.1)
    ),
    url(../images/the-home-stay-1-edit.jpg);
  background-position: right top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.hover-box#cafe {
  background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.1), 
      rgba(0, 0, 0, 0.1)
    ),url(../images/overview-cafe-edit4.jpg);
  background-position: right !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.hover-box#restaurant {
  background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.1), 
      rgba(0, 0, 0, 0.1)
    ),url(../images/overview-restaurant-edit3.jpg);
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.black-section {
  background-color: #111118;
  color: #ffffff;
  border-color: #111118;
}
.wrap-content {
  margin-bottom: 24px;
  margin-top: 24px;
}

.transparent,
.transparent-film {
  background-color: transparent !important;
}
.transparent-film > * {
  position: relative;
}
.transparent-film:before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: #f4f4f4;
  background-color: rgba(244, 244, 244, 0.5);
}
.black-section.transparent-film:before {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
}

.black-section a:link, .black-section a:visited { color: #ffffff !important; }


.stretchy-wrapper {
  width: 100% !important;
  padding-bottom: 56.25% !important;
  position: relative !important;
  overflow: hidden !important;
  height: 0px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
}
.stretchy-wrapper > * {
    display: block;
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.stretchy-wrapper.ratio-2-3 { padding-bottom: 150% !important; }
.hover-box .hover-box-paragraph p { margin-bottom: 15px; }

/*** HOVERBOX SHORTCODE ***/
.hover-box .hover-box-tran {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: red;
  bottom: 0px;
  left: 0px;
  right: 0px;
  -webkit-animation: fadeInDown .4s;
  animation: fadeInDown .4s;
  visibility: hidden;
}
.hover-box .hover-box-icon {
  position: absolute;
  top: 20px;
  left: 10px;
  padding: 0 30px;
  -webkit-animation: fadeInDown .4s;
  animation: fadeInDown .4s;
  width: 180px !important;
}
.hover-box .hover-box-title {
  position: absolute;
  bottom: 20px;
  left: 10px;
  padding: 0 30px;
  -webkit-animation: fadeInDown .4s;
  animation: fadeInDown .4s;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hover-box .hover-box-title {
    padding: 0 20px;
  }
}
.hover-box .hover-box-title h2 {
  font-family: 'Libre Baskerville', serif;
  font-size: 24px;
  text-transform: uppercase;
  text-shadow: 0px 1px 1px rgba(150, 150, 150, 1);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hover-box .hover-box-title h2 {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.hover-box .hover-box-title h2 {
    font-size: 26px;
  }
}
.hover-box .hover-box-paragraph {
  position: absolute;
  bottom: 20px;
  left: 10px;
  right: 10px;
  padding: 0 30px;
  visibility: hidden;
  font-size: 16px;
  line-height: 1.5rem;
  font-weight: 300;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hover-box .hover-box-paragraph {
    padding: 0 20px;
    font-size: 14px;
  }
}
.hover-box:hover .hover-box-tran {
  visibility: visible;
  -webkit-animation: fadeInUp .2s;
  animation: fadeInUp .2s;
}
.hover-box:hover .hover-box-title {
  visibility: hidden;
  -webkit-animation: fadeInUp .4s;
  animation: fadeInUp .4s;
}
.hover-box:hover .hover-box-paragraph {
  visibility: visible;
  -webkit-animation: fadeInUp .4s;
  animation: fadeInUp .4s;
}

@-webkit-keyframes fadeInDown{
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0,-100%,0);
      -ms-transform: translate3d(0,-100%,0);
      transform: translate3d(0,-100%,0);
  }
  100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: translate3d(0,0,0);
  }
}

@keyframes fadeInDown{
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0,-100%,0);
      -ms-transform: translate3d(0,-100%,0);
      transform: translate3d(0,-100%,0);
  }
  100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: translate3d(0,0,0);
  }
}

@-webkit-keyframes fadeInUp{
  0% {
    opacity:0;
    -webkit-transform:translate3d(0,100%,0);
    transform:translate3d(0,100%,0);
  }
  100% {
    opacity:1;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
  }
}

@keyframes fadeInUp{
  0% {
    opacity:0;
  -webkit-transform:translate3d(0,100%,0);
  -ms-transform:translate3d(0,100%,0);
  transform:translate3d(0,100%,0);
  }
  100% {
    opacity:1;
    -webkit-transform:none;
    -ms-transform:none;
    transform:translate3d(0,0,0);
    }
}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}

/* special offer */
#special-offer .subbox-wrapper > .box-empty-space:nth-child(1) { height: 290px; }
#special-offer .photo-box .photo {
    background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.2), 
      rgba(0, 0, 0, 0.2)
    ),url(../images/overview-special-offer-edit2.jpg);
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.subbox-wrapper .box-title {
    display: table;
    height: 290px;
    margin: 0 auto;
}

.subbox-wrapper .box-title h3 {
    font-family: 'Libre Baskerville', serif;
    color: #fff;
    font-size: 22px;
    text-transform: uppercase;
    text-shadow: 0px 1px 1px rgba(150, 150, 150, 1);

    display: table-cell;
    vertical-align: middle;
}

.offer-box {  height: 290px; }
#offer-1 { border-right: 1px solid #eeeeee; }
.offer-box .offer-box-inner  { padding: 40px 0px 0px 20px; }
.offer-box .offer-box-inner.two  { padding-right: 20px; }
.offer-box span.subtitle { font-weight: 400; text-transform: uppercase; margin-bottom: 10px; }
.offer-box h3.title {
	color: #91703b;
	font-size: 24px;
	margin-top: 8px;
	margin-bottom: 25px;
}
.offer-box a { margin-top: 15px; margin-bottom: 20px; }

/* room slide */
.site-index .rooms-slide { margin-top: 60px; }
.rooms-slide .box-homestay .content-box .box {
    box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);
    text-align: center;
    height: 400px;
}
.rooms-slide .detail {
  font-size: 14px;
}
.rooms-slide .wrap-price {
	color: #977045;
	margin-top: 20px;
	margin-bottom: 25px;
}
.rooms-slide .price {
	font-size: 28px;
}
.room-slide .mySlides, .room-slide .slide-content { display:none }
.rooms-slide .photo-box .subbox-wrapper {
      height: 500px;
      overflow: hidden;
}

.rooms-slide .content-box .control {
    position: relative;
    margin-right: 10px;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 1;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.rooms-slide .content-box .control .btn {
  min-width: 60px;
  font-size: 24px;
  height: 195px;
}

.rooms-slide .content-box .control .btn-light-brown {
    color: #fff;
    background-color: #d3c7b1;
    border-color: #d3c7b1;
    box-shadow: none;
}
.rooms-slide .content-box .control .btn-light-brown:hover, .rooms-slide .content-box .control .btn-light-brown:focus {
    border-color: #af8250;
    box-shadow: inset 100px 0 0 0 #af8250;
}

.rooms-slide .content-box .control.horizontal {
  margin-top: 15px;
  margin-right: 0px;
  margin-left: 10px;
  text-align: center;
}

.rooms-slide .content-box .control.horizontal .btn {
  min-width: 46%;
  padding: 6px 24px;
  height: auto;
}

img.mySlides {
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
}

/* guest review */
.site-index #review {
  background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.4), 
      rgba(0, 0, 0, 0.4)
    ),url(../images/chiangmai-riverside.jpg);
  background-position: top, center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  margin-top: 80px;
}
#review .heading-group h3 { color: #fff; 
  text-shadow: 0px 1px 1px rgba(150, 150, 150, 1);
}
#guest-review {
  overflow: hidden;
  min-height: 300px;
  position: relative;
}
#guest-review .carousel-inner{
  width: 75%;
  margin: auto;
  min-height: auto;
  border-top: 10px solid rgba(145, 112, 59, 0.9);
  background-color: rgba(255, 255, 255, 0.95);
}
#review .section-wrapper {
    padding-top: 60px;
    padding-bottom: 60px;
}
/*#guest-review .carousel-inner:hover{
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
#guest-review .carousel-inner:active{
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}*/
#guest-review .carousel-inner .item { overflow: hidden; }
#guest-review .carousel-inner .item:before { position: initial; }
.review-indicators .carousel-indicators{
  /*left: 0;*/
  /*margin: 0;*/
  /*width: 100%;*/
  font-size: 0;
  /*height: 20px;*/
  bottom: 10px;
  /*padding: 0 5px;*/
  /*cursor: e-resize;*/
  /*overflow-x: auto;*/
  /*overflow-y: hidden;*/
  /*position: absolute;*/
  /*text-align: center;*/
  /*white-space: nowrap;*/
}
.review-indicators .carousel-indicators li{
  padding: 0;
  width: 10px;
  height: 10px;
  border: none;
  text-indent: 0;
  margin: 2px 5px;
  cursor: pointer;
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  -webkit-border-radius: 100%;
  border-radius: 100%;
}
.review-indicators .carousel-indicators .active{
  padding: 0;
  width: 10px;
  height: 10px;
  border: none;
  margin: 2px 5px;
  background-color: rgba(255, 255, 255, 0.6);
  -webkit-border-radius: 100%;
  border-radius: 100%;
}
.review-indicators .carousel-indicators::-webkit-scrollbar{ height: 3px; }
.review-indicators .carousel-indicators::-webkit-scrollbar-thumb{ 
  background: #eeeeee;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.review-control-button .carousel-control{
  top: 175px;
  opacity: 1;
  width: 40px;
  bottom: auto;
  height: 40px;
  font-size: 10px;
  cursor: pointer;
  font-weight: 700;
  overflow: hidden;
  line-height: 38px;
  text-shadow: none;
  text-align: center;
  position: absolute;
  background: transparent;
  border: 2px solid #ffffff;
  text-transform: uppercase;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: all 0.6s cubic-bezier(0.3,1,0,1);
  transition: all 0.6s cubic-bezier(0.3,1,0,1);
}
.review-control-button .carousel-control.left{
  left: 7%;
  right: auto;
}
.review-ontrol-button .carousel-control.right{
  right: 7%;
  left: auto;
}
.review-control-button .carousel-control.left:hover,
.review-control-button .carousel-control.right:hover{
  color: #000;
  background: #fff;
  border: 2px solid #fff;
}

.review-slide{
  width: 95%;
  margin: auto;
  padding: 40px 10px;
  padding-right: 35px;
  position: relative;
  height: 100%;
  overflow: hidden;
  /*display: table;*/
}

.review-slide .person { width: 27%; display: inline-block; position: relative; margin-right: 15px; }
.review-slide img {
  width: 100px;
  height: 100px;
  /*margin: auto;*/
  /*display: table-cell;*/
  /*position: static;*/
  vertical-align: middle;
  margin: 0 auto;
}
.review-slide h4.name {
  font-family: 'Libre Baskerville', serif;
  font-size: 16px;
  /*display: table-cell;*/
  /*position: static;*/
  vertical-align: middle;
  /*margin: 0 10px;*/
  margin-top: 20px;
  text-align: center;
}
.review-slide .country {
  font-size: 13px;
  text-align: center;
  margin-top: 5px;
}
.review-slide .slide-space {
  width: 1rem;
  /*display: table-cell;*/
  position: static;
  vertical-align: middle;
}
.review-slide p.comment {
  font-size: 14px;
  /*display: table-cell;*/
  width: 65%;
  display: inline-block;
  /*position: static;*/
  vertical-align: middle;
  margin: 0px 0px 0px 0;
  position: absolute;
}
.review-slide .fa {
  color: #d3c7b1;
  font-size: 3rem;
  position: absolute;
  font-size: 4rem;
  bottom: 20px;
  right: 0px;
}


@media only screen and (max-width: 480px){
  .review-control-button .carousel-control{
    display: none;
  }
  .review-header{
    width: 95%;
  }
  .review-header h4{
    font-size: 20px;
  }
  .review-slide{
    width: 98%;
    padding: 5px;
  }
}

@media (min-width: 481px) and (max-width: 767px){
  .review-control-button .carousel-control.left{
    left: 2%;
  }
  .review-control-button .carousel-control.right{
    right: 2%;
  }
  .review-header{
    width: 95%;
  }
  .review-slide{
    width: 98%;
    padding: 5px;
  }
}

@media (min-width: 768px) and (max-width: 991px){
  .review-control-button .carousel-control.left{
    left: 5%;
  }
  .review-control-button .carousel-control.right{
    right: 5%;
  }
}

@-webkit-keyframes psBoxShadowEffect_2{
  0% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.5;
  -webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255,255,255,0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 5px 5px #ffffff, 0 0 0 5px rgba(255,255,255,0.5);
    -webkit-transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes psBoxShadowEffect_2{
  0% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.5;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255,255,255,0.5);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 5px 5px #ffffff, 0 0 0 5px rgba(255,255,255,0.5);
    transform: scale(1.5);
    opacity: 0;
  }
}
/* end guest review */

/* The hero image */
.hero-image {
    background-image: url("../images/btu-hero-01.png");
    height: 350px;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.hero-text .title {
	font-size: 48px;
	margin: 40px 0 0 0;
}
/* end hero image */
.heading-group h4.title { font-size: 22px; font-weight: 300; }
.heading-group h3.title { margin-bottom: 15px; }
.heading-group h2.title {
	font-family: 'Libre Baskerville', serif;
	margin-bottom: 15px;
}
.heading-group span.subtitle {
    font-size: 16px;
    margin-bottom: 3px;
}
.ls-2 { letter-spacing: 2px; }

.section-title { margin: 0 0 20px 0; }
.section-title-lg { margin: 0 0 40px 0; }
.main-subtitle { font-size: 16px; line-height: 1.4; }

.section-wrapper { padding-top: 80px; padding-bottom: 80px; }
.site-contact .section-wrapper { padding-bottom: 50px; }
.col-container {
    padding-left: 0;
    padding-right: 0;
}

#contact-detail { margin-top: 40px; line-height: 1.4; }
#contact-detail .title { font-size: 18px; margin: 15px 0px; }
.box-contact { padding: 25px 35px; }
#contact-detail .col-md-4:not(:last-child) .box-contact { border-right: 1px solid #c9c9c9; }

.bg-white { background-color: #fff; }
#wrap-getintouch {
    /*max-height: 517px;*/
    /*overflow-y: hidden;*/
}
#get-in-touch {
    padding: 40px 0px 20px 0px;
    /*width: 50%;*/
    /*display: inline-block;*/
}

.form-group { margin-bottom: 20px; }
.form-custom {
    height: 42px;
    padding: 15px 10px;
    border-radius: 0px;
}
.form-custom:focus {
    border-color: #816333;
}
#contact-form { margin-top: 30px; }
#btu-map {
    /*width: 50%;*/
    /*min-height: 480px;*/
    /*display: inline-block;*/
    /*float: right;*/
}

/* homestay */
.box-homestay,
.box-header.cafe {
	position: relative;

    background-color: #f8f8f8;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    box-sizing: border-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-transition: opacity .5s ease;
    -o-transition: opacity .5s ease;
    transition: opacity .5s ease;
    overflow: hidden;

}

.box-homestay .photo-box,
.box-homestay .content-box,
.box-header.cafe .photo-box,
.box-header.cafe .content-box {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.box-homestay .photo-box .photo,
.box-homestay .content-box .box,
.box-header.cafe .photo-box #bg-full-1,
.box-header.cafe .photo-box #bg-full-2,
.box-header.cafe .photo-box #bg-full-3,
.box-header.cafe .photo-box #bg-full-4,
.box-header.cafe .content-box .box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;

    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 1;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    width: 100%;
}

.box-homestay .photo-box #the-homestay {
    background-image: url(../images/the-home-stay-1.jpg) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.box-homestay .photo-box #cafe {
    /*background-image: url(../images/coffee-main.jpg) !important;*/
    background-image: url(../images/the-home-stay-2.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.box-homestay .photo-box #restaurant {
    /*background-image: url(../images/chiangmai-riverside.jpg) !important;*/
    background-image: url(../images/the-home-stay-3.jpg) !important;
    background-position: top left !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.subbox-wrapper > .box-empty-space:nth-child(1) { height: 300px; }
.subbox-wrapper > .box-empty-space:nth-child(2) { height: 200px; }
.subbox-wrapper > .box-empty-space:nth-child(3),
.subbox-wrapper > .box-empty-space:nth-child(4) { height: 100px; }

.subbox-wrapper > .box-empty-space > .box-empty-space-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
}

.box-homestay .content-box .box {
	padding: 30px 40px;
	background-color: #ffffff;
    border-color: #ffffff;
    border-top: 3px solid #91703b;
}
.box-heading-group {
	margin: 20px 0px;
}
.box-heading-group span.subtitle {
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 3px;
    margin-bottom: 3px;
}
.box-heading-group .title {
	font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    line-height: 1.1;
    font-size: 30px;
}
.box-heading-group h3.title {
	margin-top: 6px;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.box-heading-group h4.title {
	margin-top: 0px;
	margin-bottom: 10px;
}

.box-inner-content { margin: 20px 0px; }

.box-inner-content p {
	font-size: 15px;
	line-height: 1.4;
}

#img-location { margin-top: 30px; }
/* cafe */

#bg-full-3 {
    height: 390px;
    background-image: url(../images/Dash-Cafe-1-edit.jpg) !important;
    background-position: center left !important;
    background-repeat: no-repeat !important;
    /*background-size: cover !important;*/
}
#bg-full-4 {
    height: 390px;
    background-image: url(../images/Dash-Cafe-1-edit.jpg) !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
    /*background-size: cover !important;*/
}

/* restaurant */
#bg-full-1 {
	height: 390px;
    background-image: url(../images/Dash-Restaurant-2-edit.jpg) !important;
    background-position: center left !important;
    background-repeat: no-repeat !important;
    /*background-size: cover !important;*/
}
#bg-full-2 {
	height: 390px;
    background-image: url(../images/Dash-Restaurant-2-edit.jpg) !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
    /*background-size: cover !important;*/
}

.box-header.cafe .content-box {
	min-height: 480px;
    max-height: 500px;
	background-color: #fff;
	padding: 20px;
}

.box-header.cafe .content-box .box {
	border: 1px solid #91703b;
	height: 100%;
	height: -webkit-fill-available;
	height: -moz-available; 
	padding: 40px 45px 60px 45px; 
}

.box-header hr {
	width: 3rem;
	border-top: 3px solid #91703b;
}

.box-header .content-box .opening-hours {
	margin: 40px 20px 0px 20px;
}
.box-header .content-box .opening-hours .date {
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 400;
	color: #91703b;
	margin-bottom: 8px;
}

.food-suggestion .content-inner {
    padding: 30px 15px;
    text-align: center;
    height: -webkit-fill-available;
    height: -moz-available; 
    display: flex;
    flex-direction: column;
}
.food-suggestion .photo { height: 300px; overflow: hidden; }
.food-suggestion .photo.small { height: 270px; }
/* .food-suggestion .photo img { min-width: 100%; } */
.food-suggestion .photo img { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.food-suggestion .content { height: 300px; background-color: #fff; }
.food-suggestion .content.small { height: 270px; }

.food-suggestion .content.sweets-set { padding: 20px; }
.food-suggestion .content.sweets-set .content-inner { border: 1px solid #aaa; }
.food-suggestion .content .title {
    font-size: 16px;
    font-weight: bold;
    font-family: 'Libre Baskerville', serif;
    text-transform: uppercase;
    margin-top: 0px;
    margin-bottom: 6px;
    line-height: 1.5;
}
.food-suggestion .content span.subtitle {
    font-weight: 300;
    font-size: 14px;
    margin-bottom: 3px;
}
.food-suggestion .content .description { margin: 15px 0px 20px 0px; color: #3d3a35; }
.food-suggestion .price { 
    font-weight: 400;
    color: #d93a1b;
    text-transform: uppercase;
    margin-top: auto;
}
img.height-auto { height: auto; }
img.img-height-middle {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    left: 50%;
    transform: translate(-53%,0);
}

.img-4by3 {
  position: relative;
  width: 100%;
  padding-top: 75%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.img-16by9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.img-4by3-v {
  position: relative;
  width: 100%;
  padding-top: 133.33%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.img-16by9-v {
  position: relative;
  width: 100%;
  padding-top: 177.77%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.img-1by1 {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.img-4by3.holder>img,
.img-16by9.holder>img,
.img-4by3-v.holder>img,
.img-16by9-v.holder>img,
.img-1by1.holder>img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.food-menu .title-type {
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 30px;
}
.food-menu .title {
    text-transform: uppercase;
    font-family: 'Libre Baskerville', serif;
    font-weight: bold;
    line-height: 1.4;
}
.food-menu span.subtitle {
    text-transform: uppercase;
    font-style: italic;
    font-weight: 400;
    margin: 6px 0px 20px 0px;
    display: block;
}
.food-menu .price {
    color: #91703b;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 400;
}

.food-menu .box-price { position: absolute; display: inline-block; text-align: right; width: 20%; }
.food-menu .box-content { position: relative; display: inline-block; width: 80%; }

/* accommodation - toggle switch */
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 78px;
  height: 44px;
  top: 18px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #3d3a35;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 32px;
  width: 32px;
  left: 6px;
  bottom: 6px;
  background-color: #c78f35;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  /*background-color: #2196F3;*/
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(34px);
  -ms-transform: translateX(34px);
  transform: translateX(34px);
}

#switch-room-type .type {
  font-family: 'Libre Baskerville', serif;
  color: #777777;
  margin: 0px 20px;
  font-size: 16px;
}

#switch-room-type .type.active {
  color: #91703b;
}

/* Rounded sliders */
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }


/* box-room */
.box-room {
	display: -webkit-box;
  border-color: #eee;
  border-top: 3px solid #91703b;
  -webkit-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  margin-bottom: 30px;
}

.box-room .photo-box {
	min-height: 280px;
	overflow: hidden;
}

.box-room .photo-box img {
  min-width: 100%;
}

.box-room .content-box {
	padding: 30px 20px;
  background-color: #ffffff;
}

.box-room .title {
  font-family: 'Libre Baskerville', serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 15px;
  display: block;
  text-decoration: none;
  color: #333;
}

.box-room .title:hover {
	color: #91703b;
}

.box-room .room-number {
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 400;
}

.box-room .detail ul {
	margin-top: 15px;
  -moz-padding-start: 20px;
  -webkit-padding-start: 20px;
  -khtml-padding-start: 20px;
  -o-padding-start: 20px;
}

.box-room .price {
	float: left;
}

.box-room .price span {
	color: #5f4120;
	font-weight: 400;
}

.box-room .link-detail {
	float: right;
	font-weight: 400;
}




/* the story */
.text-justify-left {
    text-align: justify;
    text-align-last: left;
}
.text-justify-right {
    text-align: justify;
    text-align-last: right;
}
.site-story .section-title { font-family: 'Libre Baskerville', serif; line-height: 1.4; }
.site-story .img-overlap-top { top: -40px; }
.site-story span.subtitle { color: #91703b; }

.site-story #section-1 #two { margin-top: 50px; }
.site-story #section-2 { padding-top: 20px; }
.site-story #section-2 #one { padding-top: 50px; }
.site-story #section-2 .section-title { margin-top: 6px; }
.site-story #section-2 #photo {  
    background-image: url(../images/story-1.jpg) !important;
    background-position: top left !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.site-story #section-2 .subbox-wrapper .box-empty-space:nth-child(1) { height: 280px; }

.site-story #section-3 { padding-bottom: 20px; }
.site-story #section-3 p.title { margin-top: 20px; }
.video-wrapper {
    position: relative;
    /*padding-bottom: 56.25%; /* 16:9 */
    padding-bottom: 35.25%;
    padding-top: 25px;
    height: 0;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vw/1.77);
    max-height: 500px;
}

.site-story #section-4 .section-wrapper { padding-top: 30px; }
.site-story #section-4 .section-title,
.site-story #section-5 .section-title { margin-bottom: 10px; }
.site-story #section-4 #two { margin: 50px 0px 60px 0px;  }
.site-story #section-4 .fa { color: #eeeeee; font-size: 4rem; }
.site-story #section-4 #one #content,
.site-story #section-4 #two #content { padding-top: 20px; }
.site-story #section-4 #three #content { padding-top: 30px; }
.site-story #section-4 .photo { height: 290px; overflow: hidden; }
.site-story #section-4 #four { margin-top: 40px; margin-bottom: 40px; }

.site-story #section-5 #one { padding-top: 60px; padding-bottom: 60px; }
.site-story #section-5 #photo {
    background-image: url(../images/story-4.jpg) !important;
    background-position: center left !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.site-story #section-5 .subbox-wrapper .box-empty-space:nth-child(1) { height: 280px; }
.site-story #section-5 .subbox-wrapper .box-empty-space:nth-child(2) { height: 60px; }

.site-story #section-6 .section-wrapper { padding-top: 60px; }
.site-story #section-6 #two { padding-top: 40px; }
.site-story #section-6 .section-title { margin-top: 30px; margin-bottom: 5px; }

/* end story */

/* gallery */
.center-pills {
    display: flex;
    justify-content: center;
}
.gallery-filters li a {
  padding: 10px 0px;
  margin: 0px 15px;
  text-transform: uppercase;
  font-weight: 500;
  color: #080808;
  border-radius: 0px;
}
.gallery-filters > li > a:hover, .gallery-filters > li > a:focus {
    text-decoration: none;
    background-color: transparent;
        color: #91703b;
    background-color: transparent;
    border-bottom: 3px solid #91703b;
}
.gallery-filters > li.active > a, .gallery-filters > li.active > a:hover, .gallery-filters > li.active > a:focus {
    color: #91703b;
    background-color: transparent;
    border-bottom: 3px solid #91703b;
}

.gallery-img-holder {
	margin-bottom: 20px;
}

.gallery-images img {
	margin: 0 auto;
}

/* site gallery */
.site-gallery .row > .column { padding: 0 8px; }
.site-gallery .row:after {
  content: "";
  display: table;
  clear: both;
}

/* The Modal (background) */
.site-gallery .modal {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

/* Modal Content */
.site-gallery .modal-content {
  position: relative;
  background-color: rgba(0, 0, 0, 0.8);
  margin: auto;
  padding: 0;
  width: 80%;
  max-width: 1200px;
  text-align: center;
}

/* The Close Button */
.site-gallery .close {
  color: #fff;
  position: absolute;
  top: -40px;
  right: -15px;
  font-size: 40px;
  font-weight: normal;
  opacity: .5;
}

.site-gallery .close:hover,
.site-gallery .close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.site-gallery .img-slide { display: none; }
.site-gallery .cursor { cursor: pointer }

/* Next & previous buttons */
.site-gallery .prev,
.site-gallery .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.site-gallery .prev {
    left: 0;
}
.site-gallery .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.site-gallery .prev:hover,
.site-gallery .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.site-gallery .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.site-gallery img {
  margin-bottom: -4px;
}

.site-gallery .caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.site-gallery .demo {
  opacity: 0.6;
}

.site-gallery .active,
.site-gallery .demo:hover {
  opacity: 1;
}

.site-gallery img.hover-shadow {
  transition: 0.3s
}

.site-gallery .hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.img-slide {
  height: 73vh;
}

.img-slide img {
  height: 70vh;
  width: auto;
  object-fit: cover;
}



/* end site-gallery */

body.modal-open { overflow: visible; }
.modal-open {
  -moz-appearance: menuimage;}
.modal-open::-webkit-scrollbar { width: 0 !important; }


/* rooms detail */
.room-view .breadcrumbs a {
	color: #fff;
}

.room-view .slider{
	width: 100%;
	position: relative;
	padding-top: 320px;
	margin: auto;
	margin-bottom: 30px;
	overflow: hidden;
	background-color: transparent;
	/*box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);*/
}

.room-view .slider:before { content: none; }

/*Last thing remaining is to add transitions*/
.room-view .slider>img{
	position: absolute;
	left: 0; top: 0;
	transition: all 0.5s;
  max-height: 320px;
}

.room-view .slider input[name='slide_switch'] { display: none; }

.room-view .slider label {
	margin: 15px 15px 0 0;
	/*border: 3px solid #999;*/
	float: left;
	cursor: pointer;
	transition: all 0.5s;
	opacity: 0.6;
}

.room-view .slider label img{ display: block; }

/*Time to add the click effects*/
.room-view .slider input[name='slide_switch']:checked+label {
	/*border-color: #666;*/
	opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.room-view .slider input[name='slide_switch'] ~ img {
	opacity: 0;
	/*transform: scale(1.1);*/
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.room-view .slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	/*transform: scale(1);*/
}
/*Clicking on any thumbnail now should activate the image related to it*/

.room-view .title {
	font-family: 'Libre Baskerville';
	font-weight: 700;
	margin-bottom: 15px;
}

.room-view p.sub-title { font-size: 16px; }
.room-view hr { border-color: #b7b7b7; }
.room-view .description { line-height: 1.4; }

.room-detail .room-content-title {
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 15px;
}
.room-detail .room-service-item i.fa.fa-check-circle {
	color: #9dcd08;
	font-size: 18px;
    margin-right: 13px;
}
.room-detail .room-service-item {
	margin-bottom: 8px;
	line-height: 1.4;
}

.sidebar-reservation-form {
    margin: 0 0 20px 0;
}

.reservation-form {
	padding: 20px;
	background-color: #fff;
	width: 100%;
  box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);
  margin-bottom: 50px;
}
.reservation-form.main-content {
  padding: 30px;
}

.reservation-form label {
	font-weight: 300;
	margin-bottom: 8px;
}

.room-price-widget {
    border-left: #91703b 1px solid;
    margin: 0 0 20px 0;
    padding-left: 15px;
}

.room-price-widget .from {
	margin-top: 5px;
}

.room-price-widget .price {
    color: #5f4120;
    font-size: 26px;
    margin: 12px 0 10px 0;
}

.reservation-form .select-wrapper i {
    position: absolute;
    right: 28px;
    top: 38px;
    font-size: 18px;
    color: #666;
    z-index: 0;
    pointer-events: none;
}

form .select-wrapper select {
    width: 100%;
    height: 42px;
    border: 1px solid #c9c9c9;
    background: #fff;
    padding: 10px 15px;
    font-size: 14px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

form .select-wrapper select option { font-weight: 300; }

.reservation-form .reservation-form-date .input-group {
	width: 100%;
}

.reservation-form .input-group-addon {
	/*position: absolute;*/
    padding: 12px 15px;
    color: #3d3a35;
    /*background-color: transparent;*/
    border: none;
    border-radius: 0px;
    z-index: 10;
    right: 15px;
}

.reservation-form .form-control {
    height: 42px;
    padding: 10px 15px;
    color: #3d3a35;
    border: 1px solid #c9c9c9;
    border-radius: 0px;

    -webkit-box-shadow: none;
    box-shadow: none;
}

.img-1by1 {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.img-4by3.holder>img, .img-16by9.holder>img, .img-4by3-v.holder>img, .img-16by9-v.holder>img, .img-1by1.holder>img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.reservation-view-box {
  width: 100%;
  border: 1px solid #c9c9c9;
  border-top: 10px solid #91703b;
  padding: 25px;
  text-align: center;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.reservation-steps {
  position: relative;
  display: block;
  width: 100%;
  font-weight: 400;
}

.reservation-steps ul {
  list-style: none!important;
  padding: 0;
  margin: 0;
}

.reservation-steps > ul > li {
  float: left;
  width: 25%;
  display: block;
  padding: 0;
}

.reservation-steps a { 
  color: #171717;
  cursor: default;
}

.reservation-steps a:hover,
.reservation-steps a:focus {
  text-decoration: none;
}

.reservation-steps .current a {
  color: #977045;
}

.reservation-steps .done a {
  color: #aaa;
}

.reservation-steps .step-line {
  margin-top: 10px;
  margin-bottom: 30px;
  height: 10px;
  background-color: #d2d2d2;
}

.reservation-steps a:hover ~ .step-line,
.reservation-steps a:focus ~ .step-line {
  background-color: #c3c3c3;
}

.reservation-steps .step-line:hover {
  background-color: #c3c3c3;
}

.reservation-steps .current .step-line {
  background-color: #977045 !important;
}

.reservation-steps .done .step-line {
  background: #e9e9e9 !important;
}
.intl-tel-input{
    display:block;
}


/* site promotion */
.site-promotion {
  background: #080808;
  background-image: linear-gradient(30deg,
    hsl(31deg 50% 25%) 0%,
    hsl(31deg 48% 22%) 22%,
    hsl(31deg 45% 20%) 33%,
    hsl(31deg 43% 17%) 42%,
    hsl(30deg 39% 15%) 50%,
    hsl(30deg 35% 12%) 58%,
    hsl(30deg 31% 10%) 67%,
    hsl(30deg 27% 7%) 78%,
    hsl(0deg 0% 3%) 100%);
  color: #fff;
}

.site-promotion .link-add {
  color: rgb(255, 200, 43) !important;
  font-style: italic;
}

.site-promotion .promotion-hero {
  padding-top: 8rem;
  padding-bottom: 0rem;
}

.site-promotion .carousel {
  margin-top: 4rem;
}

.site-promotion .carousel-inner {
  /* height: 560px; */
  min-height: auto;
}

.site-promotion .promotion-hero .hero-content {
  margin-top: 0rem;
  line-height: 1.5;
  height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.site-promotion .promotion-hero .hero-content h1,
.site-promotion .promotion-hero .hero-content h2 {
  letter-spacing: 0.2rem;
}

.site-promotion .promotion-hero .hero-content h1 {
  font-size: 3rem;
}

.site-promotion .promotion-hero .hero-content h2 {
  font-size: 2.5rem;
}

.site-promotion .promotion-hero .hero-content p {
  font-size: 1.15rem
}

.site-promotion .promotion-hero .hero-content .campaign {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.site-promotion #room {
  padding-top: 40px;
}

.site-promotion .box-room .detail ul {
  color: #080808;
}

.site-promotion .promotion-price {
  border: 1px solid #AF8250;
  padding: 16px 20px;
  min-width: 50%;
}

.discount {
  color: #CC3D1D;
  text-decoration: line-through;
}

.site-promotion .promotion-price hr {
  border-top: 1px solid #AF8250;
  margin-top: 24px;
  margin-bottom: 24px;
}

.site-promotion .room-price-widget .price {
  color: #fff;
  border-bottom: 4px solid #CC3D1D;
  display: inline-block;
}

.site-promotion .promotion-wrapper {
  display: flex;
}

.site-promotion .promotion-wrapper .promotion-price:first-child {
  margin-right: 15px;
}

/* end promotion */

.site-index #myCarousel .carousel-inner .item {
  height: 60vh;
}

.site-index .card-promotion {
  margin-top: 30px;
}

@media (max-width: 992px) {
  .site-promotion .promotion-hero .hero-content {
    margin-top: 0rem;
  }
  
  .site-promotion #room {
    padding-top: 20px;
  }
}

@media (max-width: 768px) {
  .site-index #myCarousel .carousel-inner .item {
    height: 50vh;
  }

  .site-index .card-promotion {
    margin-top: 25px;
  }

  .site-promotion .promotion-hero {
    padding-top: 4rem;
  }

  .site-promotion .carousel {
    margin-top: 3rem;
  }
}

@media (max-width: 425px) {
  .site-promotion .promotion-hero {
    padding-top: 4rem;
    padding-bottom: 0rem;
  }

  .site-promotion .promotion-hero .hero-content {
    text-align: center;
    align-items: center;
  }

  .site-promotion .promotion-hero .hero-content h1 {
    font-size: 2.2rem;
    margin-bottom: 0px;
  }

  .site-promotion .promotion-hero .hero-content h2 {
    font-size: 1.6rem;
    margin-bottom: 5px;
    line-height: 1.5;
  }

  .site-promotion .promotion-hero .hero-content .campaign {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  /* .site-promotion .promotion-hero .hero-content .button-link {
    display: block;
  } */

  .site-index #myCarousel .carousel-inner .item {
    height: 40vh;
  }
}

@media (min-width: 768px) {
  .site-promotion .box-room .photo-box img {
    transform: translate(-50%, 0);
  }
}

@media (min-width: 993px) {
  .site-promotion #room .display-room > .row {
    display: flex;
  }

  /* .site-promotion .promotion-price {
    position: sticky;
    top: 80px;
  } */
}