/*
#304430 dark green
#617261 lighter green
#E4EFE4 light green
#333 dark grey
#F4F2EF light grey
*/

* { -webkit-box-sizing: border-box; box-sizing: border-box; }
html { font-size: 1rem; letter-spacing: 0.04rem!important; }
body { font-family: 'Open Sans', sans-serif; color: #333; background-color: #FFF; line-height: 1.66; }
h1, h2 { font-family: 'Times New Roman', serif; font-size: 2rem; color: #304430; text-align: center; margin-bottom: 0; padding: 0.7rem 0 1.5rem; }
h3 { font-family: 'Times New Roman', serif; font-size: 1.5rem; text-transform: uppercase; padding-bottom: 1rem; }
h4 { padding-bottom: 0.5rem; }
a { color: #304430; transition: 0.3s; text-decoration: none; }
a:hover { color: #617261; }
.bigger-h2 { font-size: 2.5rem; }
.container-fluid { padding: 0; }

nav, .dropdown-menu { background-color: #FFF; z-index: 100; }
.navbar-light .navbar-nav .nav-link, .dropdown-item, nav .navbar-toggler { color: #304430; border: 0; }
.navbar-light .navbar-nav .nav-link:hover, .dropdown-item:hover, nav .navbar-toggler:hover { color: #617261; }
.dropdown-item.active, .dropdown-item:active { background-color: #304430; color: #FFF; }

.book-button-full { display: none; }
.nav-book-button { background-color: #304430; color: #FFF; padding: 6px 20px; border: none; text-transform: uppercase; transition: 0.3s; }
.nav-book-button:hover { background-color: #000; }

.menu-margin { margin-top: 5rem; margin-bottom: 5rem; }

.hero { text-align: center; }
.hero img { width: 100%; height: 80vh; object-fit: cover; }

.book-banner-container { position: relative; background-color: #FFF; z-index: 55; }
.book-banner { text-align: center; padding: 1.5rem; }
.book-banner-icon { padding: 6px 12px; color: #304430; background-color: #EEE; border: 1px solid #CCC; border-radius: 4px; }

.home-content-container { background-color: #F4F2EF; padding: .5rem 0 1rem; margin-bottom: 3rem; }
.card-content { max-width: 1320px; }
.home-content { text-align: center; }

.banner-container { text-align: center; margin-top: -3rem; margin-bottom: 4rem; }
.banner-container img { width: 100%; }
.desktop-banner { display: none; }
.mobile-banner-for-desktop { max-width: 576px; }

.home-card { max-width: 410px; background-color: #FFF; margin: 1rem .5rem; }
.image-card { position: relative; text-align: center; }
.image-card img { width: 100%; height: 250px; padding-bottom: 1.5rem; object-fit: cover; border-top-left-radius: var(--bs-card-inner-border-radius); border-top-right-radius: var(--bs-card-inner-border-radius); }
.book-button, .room-button { display: block; font-weight: bold; text-transform: uppercase; border: 2px solid #304430; margin: 1rem; padding: .8rem 2rem; }

/* Reviews */
.reviews-container { position: relative; max-width: 900px; padding: .5rem 0 1rem; margin-top: -4rem; margin-bottom: 3rem; }
.myReviews { display: none; padding: 0 30px; text-align: center; }
.myReviews .card { background-color: #617261; color: #FFF; }
.myReviews .card a { color: #FFF; }
.myReviews .card a:hover { color: #E4EFE4; }
.review-name { color: #E4EFE4; }
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -30px; padding: 8px; color: #333; font-weight: bold; font-size: 20px; border-radius: 3px 0 0 3px; user-select: none; }
.next { position: absolute; right: 0; border-radius: 0 3px 3px 0; }
.prev:hover, .next:hover { background-color: #617261; color: #FFF; }
.dot-container { height: 60px; text-align: center; padding: 20px; }
.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #CCD2CC; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
.active-review, .dot:hover { background-color: #333; }

.home-explore { position: relative; text-align: center; margin: 3rem 0; }
.home-explore img { width: 100%; height: 250px; object-fit: cover; }
.home-explore h3 { position: absolute; bottom: 15px; left: 50%; transform: translate(-50%, 0); background-color: #FFF9; padding: .8rem 2rem; }

.rooms { margin-bottom: 2rem; }
.room-amenities ul { list-style-type: none; margin: 0; padding: 0; }
.room-amenities li { padding-bottom: .75rem; }
.room-amenities li .fas, .contact-txt .fas { width: 1.5rem; text-align: center; }
.fas { color: #617261; }
.other-rooms { margin-bottom: 2rem; }
.other-rooms a { max-width: 250px; width: 40vw; display: inline-block; text-align: center; margin: 0 .4rem; padding-left: 0; padding-right: 0; }

.facility { margin-bottom: 2rem; margin-top: -6rem; padding-top: 6rem; }
.facility-image { position: relative; text-align: center; padding: 0; }
.facility-image img { width: 100%; height: 100%; object-fit: cover; }
.facility-content { padding: 1rem 2rem; }
.facility-colour { background-color: #F4F2EF; }

.explore-content { text-align: left; margin-top: 1.5rem; margin-bottom: 2rem; }
.explore-container { max-width: 960px; }
.blog .image-card img { height: 400px; }
.blog-content h2 { font-family: 'Times New Roman', serif; font-size: 2rem; color: #304430; text-align: left; margin-bottom: 0; padding: .5rem 0 .5rem; }
.blog-content h3 { font-family: 'Times New Roman', serif; font-size: 1.5rem; text-transform: none; padding-bottom: .3rem; }
.blog-content h4 { padding-bottom: 0.5rem; }
.blog-content { text-align: left; }
.blog-content a { color: #617261; border-bottom: 2px solid #617261; }
.blog-content a:hover { border-bottom-color: rgba( 255, 255, 255, 0 ); color: #304430; }
.read-more { background-color: #333; }

/* Gallery */
.slick-prev, .slick-next { position: absolute; top: 135%; font-size: 1.8rem; z-index: 10; cursor: pointer; }
.slick-prev { left: 0; }
.slick-next { right: 0; }
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; display: block; overflow: hidden; margin: 0 .7rem; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track { position: relative; top: 0; left: 0; display: block; }
.slick-track:before, .slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
[dir='rtl'] .slick-slide { float: right; }
.slick-slide img { display: block; width: 100%; height: 170px; border-bottom: #304430 solid 4px; cursor: pointer; object-fit: cover; opacity: 1; transition: .5s; }
.slick-slide img:hover { opacity: .7; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }
.slide { transition: filter .4s; margin: 0px .5rem; }
.slick-prev { left: 0; }
.slick-prev, .slick-next { position: absolute; top: 35%; font-size: 1.8rem; }

/* 360 fallback */
.viewer-360 { position: relative; width: 100%; height: 50vh; overflow: hidden; }
.viewer-360-fallback { width: 100%; height: 100%; object-fit: cover; }
.viewer-360-launch { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0.75rem 1.5rem; border: none; border-radius: 999px background: rgba(0, 0, 0, 0.6); color: #333; cursor: pointer; }

.contact-form { width: 100%; max-width: 500px; margin-bottom: 2rem; }
.form-control:focus { border-color: #617261; box-shadow: none; }
.btn-primary { background-color: #304430; border: 0; }
.btn-primary:hover { background-color: #617261; }
.captcha { padding: 1rem 0 0.5rem; text-align: center; }
.g-recaptcha { display: inline-block; }

footer { background-image: url("/assets/img/footer-bg.png"); background-repeat: no-repeat; background-size: cover; }
.footer-container { width: 100%; max-width: 600px; margin: 0 auto; }
.left-footer { margin-top: -3rem; }
.footer-header, .footer-details { width: calc(100% - 3rem); background-color: #FFF; padding: 1rem 1rem; margin: 0 1.5rem; box-shadow: 9px 11px 21px 0 #00000044; -webkit-box-shadow: 9px 11px 21px 0 #00000044; }
.footer-header { z-index: 10; }
.footer-logo img { width: 164px; }
.soc-med { padding-top: 1rem; }
.soc-med-link img { width: 1.4rem; margin: 1rem .75rem; }
.footer-details { }
.right-footer img { max-width: 360px; width: 100%; }
.copy { width: 100%; font-size: .7rem; padding: .3rem; background-color: #333; color: #888; }
.copy a { color: #888; }
.viewer-360 { width: 100%; height: 350px; border-radius: 16px; overflow: hidden; }

@media ( min-width: 576px ) {
	html { font-size: 1.1rem; }
	.home-content-container { margin-bottom: 7.5rem; }
	.home-content { margin-top: -2rem; }
	.book-banner { margin-top: -2.5rem; margin-bottom: 4.5rem; }
	.banner-container { margin-top: -7.5rem; margin-bottom: 7rem; }
	.mobile-banner { display: none; }
	.desktop-banner { display: inherit; }
	.home-explore { margin-top: -3rem; margin-bottom: 7.5rem; }
	.slick-list { margin: 0 1rem; }
	.slick-slide img { height: 220px; }
	.footer-header, .footer-details { position: relative; padding: 1rem 2rem; margin: 0; }
	.footer-header { width: 40%; }
	.footer-details { width: 60%; }
	.footer-logo { margin-top: 4.5rem; }
	.soc-med { position: absolute; bottom: 2.5rem; left: 50%; transform: translate(-50%, 0); }
}

@media ( min-width: 768px ) {
	html{ letter-spacing: 0.08rem!important; }
	h1, h2 { font-size: 2.35rem; }
	.menu-margin { margin-top: 6rem; }
	.book-button-mobile { display: none; }
	.book-button-full { display: inherit; }
	.banner-container { padding: 0.5rem 0 2rem; }
	.home-content-container { margin-top: 0; padding: 0rem 0 2rem; }
	.home-card { margin: 0; }
	.reviews-container { padding: 0.5rem 0 2rem; }
	.home-explore img { height: 400px; }
	.home-explore h3 { bottom: 30px; padding: 1rem 3rem; }
	.footer-container { margin: 0; }
	.viewer-360 { height: 50vh }
}

@media ( min-width: 992px ) {
	.slick-slide img { height: 250px; }
	.right-footer img { max-width: inherit; width: inherit; height: 100%; margin-top: -3rem; }
    .navbar .dropdown:hover .dropdown-menu { display: block; }
	.viewer-360 { height: 70vh }
}