/*

▗▖▗▞▀▜▌█  ▄ ▗▞▀▚▖    ▗▖ ▗▖▗▞▀▜▌▄▄▄▄  ▄ █    ■   ▄▄▄  ▄▄▄▄      ▗▄▄▄▖ ▄▄▄ ▗▞▀▘▗▞▀▜▌▄▄▄▄  ▗▞▀▚▖
▐▌▝▚▄▟▌█▄▀  ▐▛▀▀▘    ▐▌ ▐▌▝▚▄▟▌█ █ █ ▄ █ ▗▄▟▙▄▖█   █ █   █     ▐▌   ▀▄▄  ▝▚▄▖▝▚▄▟▌█   █ ▐▛▀▀▘
▐▌     █ ▀▄ ▝▚▄▄▖    ▐▛▀▜▌     █   █ █ █   ▐▌  ▀▄▄▄▀ █   █     ▐▛▀▀▘▄▄▄▀          █▄▄▄▀ ▝▚▄▄▖
▐▙▄▄▖  █  █          ▐▌ ▐▌           █ █   ▐▌                  ▐▙▄▄▖              █          
                                           ▐▌                                     ▀                                                                                                      
*/

html {font-size: 12px; scroll-behavior: smooth;}
html, body {margin: 0; padding: 0; height: 100%; background-color: #212121; 
	 -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	         font-smoothing: antialiased;}

::-moz-selection {background: #fcdc29; color: #114232; text-shadow: none;}
		 ::selection {background: #fcdc29; color: #114232; text-shadow: none;}

.mobile {display: inline-block !important;}
.desktop {display: none !important;}

.clear {clear:both;}
.spacer {margin-bottom: 3rem;}
.doublespacer {margin-bottom: 8rem;}
.halfspacer {margin-bottom: 1.5rem;}

img, a img {width: 100%; height: auto; margin: 0; padding: 0; display: block;}


/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6, p, ul li {margin: 0; padding: 0; text-decoration: none; cursor: default; font-style: normal; font-weight: normal; color: #114232;}
h1, h2 {font-family: 'InstrumentSerif', Times New Roman, Times, serif; text-align: center;}
h3, h4, h5, p, ul li {font-family: 'InterRegular', Helvetica, Arial, sans-serif;}
h6 {font-family: 'InterThin', Helvetica, Arial, sans-serif;}
.button {font-family: 'InterBold', Helvetica, Arial, sans-serif; font-style: normal; font-weight: normal;}
h3 em, h4 em, h5 em, p em, ul li em, h3 strong, h4 strong, h5 strong, p strong, ul li strong {font-style: normal; font-weight: normal;}
h3 em, h4 em, h5 em, p em, ul li em {font-family: 'InterRegularItalic', Helvetica, Arial, sans-serif;}
h3 strong, h4 strong, h5 strong, p strong, ul li strong {font-family: 'InterBold', Helvetica, Arial, sans-serif;}
h1 {font-size: 3.5rem; line-height: 3.7rem; margin-bottom: 1rem;}
h2 {font-size: 2.6rem; line-height: 2.7rem; margin-bottom: 0.75rem;}
h3 {font-size: 1.4rem; line-height: 1.8rem; margin-bottom: 1.75rem;}
h4 {font-size: 1rem; line-height: 1.3rem;}
h5 {font-size: 1.2rem; line-height: 2rem;}
h6 {font-size: 3rem;}
p {font-size: 1.2rem; line-height: 1.45rem; margin-bottom: 1.45rem;}
.button, .button:hover, .button:active {font-size: 1.4rem; line-height: 1.65rem; text-transform: uppercase;}
.pageheader {text-align: center; background-color: #114232;}
.pageheader h1, .pageheader h3 {color: #f7f6eb !important;}
.pageannounce {text-align: center; background-color: #87a922;}
.fivestars {text-align: center; letter-spacing: -0.2rem; color: #87a922 !important; margin: 1.5rem 1rem 0.25rem;}
#footer div h2, #footer div h3, #footer div h4, #footer div h5 {color: #fcdc29 !important;}
#footer div h2 a, #footer div h2 a:visited {text-underline-offset: 3px;}
#footer div h2 a, #footer div h2 a:visited, #footer div h3 a, #footer div h3 a:visited, #footer div h5 a, #footer div h5 a:visited {color: #fcdc29 !important; text-decoration-color: rgba(252, 220, 41, 0.4);}
#footer div h2 a:hover, #footer div h2 a:active, #footer div h3 a:hover, #footer div h3 a:active, #footer div h5 a:hover, #footer div h5 a:active {color: #f28123 !important; text-decoration-color: rgba(242, 129, 35, 0.4);}
.pageannounce h3 a:hover, .pageannounce h3 a:active {color: #fcdc29 !important; text-decoration-color: rgba(252, 220, 41, 0.4);}
.uppercase {text-transform: uppercase; text-align: center;}
.h4header, .h4iconheader {text-transform: uppercase; margin-bottom: 0.5rem; font-family: 'InterBold', Helvetica, Arial, sans-serif; font-style: normal; font-weight: normal;}
.h4iconheader, .i-container {color: #87a922; text-align: center;}
.i-container {font-size: 2.6rem;}

#navbar div div h4 {text-align: center; text-transform: uppercase; font-family: 'InterBold', Helvetica, Arial, sans-serif; font-style: normal; font-weight: normal; }
#navbar div div h4 a:hover, #navbar div div h4 a:active {color: #fcdc29 !important;}

a {cursor: pointer;}
a, a:visited, a:hover, a:active {color: #114232 !important; font-size: inherit; line-height: inherit; text-decoration: underline; text-decoration-thickness: 0.1rem;
	text-decoration-color: rgba(17, 66, 50, 0.35);}
a:hover, a:active, p a:hover, p a:active {color: #f28123 !important; text-decoration-color: rgba(242, 129, 35, 0.4);}
p a  {text-underline-offset: 0.14em;}

a, a:visited {color: #34a2e0;}
a:active, a:hover {color: #f78b16;}

.button, .button:visited {background-color: #f28123; color: #114232 !important; text-decoration: none;
	align-items: center; justify-content: center; text-align: center; vertical-align: middle;
  border: 0; border-radius: 5px;  
  cursor: pointer;
  display: inline-block;
  min-width: 0px;
  padding: 0.62rem 1.66rem 0.65rem 1.68rem; margin: 0rem 0.5rem 2.5rem;}
.button:hover, .button:focus {background-color: #87a922; color: #114232 !important; text-decoration: none;}
.button:active {background-color: #87a922;}
.button:disabled {background-color: #f5c393; cursor: not-allowed;}
.buttonwrap {text-align: center;}

.quote strong {font-family: 'InterBoldItalic' !important;}
.quote {text-indent: -0.51rem; margin-bottom: 0.6rem;}
.pageheader .button, .pageheader .button:visited, .pageannounce .button, .pageannounce .button:visited, .headbutton .button, .headbutton .button:visited {background-color: #fcdc29;}
.pageheader .button:hover, .pageheader .button:focus, .pageannounce .button:hover, .pageannounce .button:focus, .headbutton .button:hover, .headbutton .button:focus {background-color: #f28123;}
.nosplit {white-space: nowrap;}


/* LAYOUT */

#header {height: 20rem; background-image: url('img/hero/hero_index.webp');
 background-repeat: no-repeat; background-size: 100% auto; background-position: center center;}
#navbar {background-color: #87a922; height: 5.5rem; filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.5));
	display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; width: calc(100% - 4rem);
	position: relative; z-index: 100;}
.navbarbar {display: none; justify-content: space-between; align-items: center; 
	width: calc(50% - 11.75rem); height: 5.5rem; }
.navitem {margin: 0; padding: 0;}
.pageheader, .pageannounce {filter: drop-shadow(0px 6px 5px rgba(0, 0, 0, 0.45));
	display: inline-block; float: left; margin: 0; padding: 1.75rem 1.5rem 0.75rem !important; width: calc(100% - 3rem);}
.quotewrap, .quotewrapend {padding: 0rem 2rem; position: relative;}
.inlineicon {width: 2.5rem; display: inline-block; vertical-align: -0.3rem;}
.inlineiconheader {width: 2.5rem; display: inline-block; float: left; margin-top: 0.75rem; margin-right: -0.5rem;}
.pagecontent {background-color: #f7f6eb; max-width: 1400px;}
#footer {background-color: #212121; max-width: 1400px;}
.footericon {margin-right: 0.75rem;}
.pagecontentwrap {display: flex; justify-content: center; width: 100%;}
#logo {display: inline-block; width:20rem; margin-bottom: -18.5rem; z-index: 500; position: relative; margin-left: calc(50% - 10rem);
	filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.5));}
#booking {display: inline-block; float: right; margin: 1.5rem; padding: 0;}
#bookingphone, #bookingbutton {display: inline-block; float: left; margin: 0; padding: 0;}
#bookingphone {margin-right: 0.75rem !important; filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.66));}
hr {border: none;
  height: 1px;
  background-color: rgba(135, 169, 34, 0.5);
  width: 70%; margin-left: 15%; margin-top: 1.5rem; margin-bottom: -0.5rem;}
.textwrapfix {padding: 0rem 2rem; position: relative;}
.partner-wrapper {aspect-ratio: none; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;}
.partner-logo {max-width: 100%; max-height: 100%; object-fit: contain;}
.amenitiesicons {width: 33.333%;}


/* Dropdown */
.dropdown-wrapper {position: relative; display: inline-block;}
.dropdown-wrapper .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #87a922;
    min-width: 200px;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.12);
    z-index: 300;
    padding: 1rem 0 0;
}
.dropdown-wrapper:hover .dropdown-menu {display: block;}
.dropdown-menu h4 a {display: block; padding: 0.75rem 1.25rem; white-space: nowrap; transition: background-color 0.2s ease;}
.dropdown-menu h4 a:hover {background-color: #654236;}

/* Mobile nav */
.mobile-menu-toggle {position: fixed; top: 1.5rem; left: 2rem;
    width: 2.95rem; height: 2.95rem; padding: 0;
    background-color: #fcdc29;
    border: none; border-radius: 5px;
    cursor: pointer; z-index: 10000;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);}

.hamburger-line {
    display: block; width: 1.6rem; height: 3px; background-color: #114232; border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;}

.mobile-drawer {position: fixed; top: 0; left: -100%;
    width: 80%; max-width: 300px; height: 100%; padding-top: 6.5rem;
    background-color: #87a922; box-shadow: 5px 0px 15px rgba(0, 0, 0, 0.25);
    z-index: 9999; transition: left 0.3s ease-in-out; overflow-y: auto;}

.mobile-drawer.is-open {left: 0;}

.mobile-drawer-content {padding: 2rem;}
.mobile-drawer-content h4 {margin-bottom: 1.5rem; text-transform: uppercase; font-family: 'InterBold', Helvetica, Arial, sans-serif; font-weight: normal;}
.mobile-drawer-content h4 a {font-size: 1.25rem;}
.mobile-drawer-content h4 a:hover, .mobile-drawer-content h4 a:active, .mobile-sub-links h5 a:hover, .mobile-sub-links h5 a:active {color: #fcdc29 !important;}

.mobile-sub-links {margin-top: -0.75rem; margin-bottom: 1.5rem; padding-left: 1rem;}
.mobile-sub-links h5 {margin: 0.5rem 0;}
.mobile-sub-links h5 a {text-decoration: none; font-size: 1rem;}

.mobile-menu-toggle.is-open .hamburger-line:nth-child(1) {transform: translateY(7px) rotate(45deg);}
.mobile-menu-toggle.is-open .hamburger-line:nth-child(2) {opacity: 0; /* Hides middle line */}
.mobile-menu-toggle.is-open .hamburger-line:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}


/* GRID */
.column, .columns {display: inline-block; float: left; margin: 0; padding: 0;}
.column, .typecolumn, .one.columns, .two.columns, .three.columns, .four.columns, .five.columns, .six.columns, .seven.columns, .eight.columns, .nine.columns, .ten.columns, .eleven.columns, .twelve.columns {width: 100%;}
.offsetbyone, .offsetbytwo, .offsetbythree, .offsetbyfour, .offsetbyfive, .offsetbysix, .offsetbyseven, .offsetbyeight, .offsetbynine, .offsetbyten, .offsetbyeleven {margin-left: 0;}

@media screen and (min-width: 975px){
	html{font-size: 13px;}
}
@media screen and (min-width: 1280px){
	html{font-size: 15px;}
}
@media screen and (min-width: 1444px){
	#navbar div div h4 {font-size: 1.17rem;}
}
@media screen and (min-width: 1666px){
	#navbar div div h4 {font-size: 1.25rem;}
	.navbarbar {max-width: 600px; margin: 0 3%;}
}
@media screen and (min-width: 1888px){
	.navbarbar {margin: 0 8%;}
}
@media screen and (min-width: 2222px){
	.navbarbar {margin: 0 13%;}
}

@media only screen and (min-width: 975px) { 
	.mobile {display: none !important;}
	.desktop {display: inline-block !important;}

	.one.columns	{width: 8.333%}
	.two.columns	{width: 16.666%}
	.three.columns	{width: 25%}
	.four.columns	{width: 33.333%}
	.five.columns	{width: 41.666%}
	.six.columns	{width: 50%}
	.seven.columns	{width: 58.333%}
	.eight.columns	{width: 66.666%}
	.nine.columns	{width: 75%}
	.ten.columns	{width: 83.333%}
	.eleven.columns	{width: 91.666%}
	.twelve.columns	{width: 100%}

	.offsetbyone	{margin-left: 8.333%;}
	.offsetbytwo	{margin-left: 16.666%;}
	.offsetbythree	{margin-left: 25%;}
	.offsetbyfour	{margin-left: 33.333%;}
	.offsetbyfive	{margin-left: 41.666%;}
	.offsetbysix	{margin-left: 50%;}
	.offsetbyseven	{margin-left: 58.333%;}
	.offsetbyeight	{margin-left: 66.666%;}
	.offsetbynine	{margin-left: 75%;}
	.offsetbyten	{margin-left: 83.333%;}
	.offsetbyeleven	{margin-left: 91.666%;}

	.navbarbar {display: flex;}
	.mobile-nav-container {display: none !important;}
	.partner-wrapper {aspect-ratio: 4 / 3; margin-bottom: 0;}
	.amenitiesicons {width: 16.666%;}

	.quotewrap:after{
	  content: '';
	  position: absolute;
	  height: 120px;
	  width: 1px;
	  background-color: rgba(135, 169, 34, 0.5);
	  top: 10px;
	  right: 2px;
	}
	.textwrapfix {padding: 0rem 0rem;}
}




/* FONT EMBED */
@font-face {
	font-family: 'InstrumentSerif';
	src:  url('fonts/InstrumentSerif-Regular.woff2') format('woff2');
	font-weight: normal; font-style: normal; font-stretch: normal;
}
@font-face {
	font-family: 'InterRegular';
	src:  url('fonts/Inter-Regular.woff2') format('woff2');
	font-weight: normal; font-style: normal; font-stretch: normal;
}
@font-face {
	font-family: 'InterRegularItalic';
	src:  url('fonts/Inter-Italic.woff2') format('woff2');
	font-weight: normal; font-style: normal; font-stretch: normal;
}
@font-face {
	font-family: 'InterBold';
	src:  url('fonts/Inter-Bold.woff2') format('woff2');
	font-weight: normal; font-style: normal; font-stretch: normal;
}
@font-face {
	font-family: 'InterBoldItalic';
	src:  url('fonts/Inter-BoldItalic.woff2') format('woff2');
	font-weight: normal; font-style: normal; font-stretch: normal;
}
@font-face {
	font-family: 'InterThin';
	src:  url('fonts/Inter-Thin.woff2') format('woff2');
	font-weight: normal; font-style: normal; font-stretch: normal;
}