@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');

@font-face {
  font-family:'Editorial';
  src:url('/temp.woff') format('woff');
}

:root {
  --brown:#583319;
  --brown-rgb:88, 51, 25;
  --green:#223c31;
  --green-rgb:34, 60, 49;
  --light-green:#576f3f;
  --linen:#f6f6f1;
  --linen-rgb:246, 246, 241;
  --sand:#e3e2d7;
  --blue:#1c3b4f;
  --black:#000000;
  --white:#FFFFFF;
  --primary-font:'Host Grotesk', Arial, Helvetica, sans-serif;
  --script-font:'Editorial', 'Cookie', 'Times New Roman', Times, serif;
}

body,
html {
  background-color:var(--linen);
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}

body {
  padding-top:105px;
}

header {
  width:100%;
  background-color:var(--sand);
  background-image:url(/images/bg-header.png);
  background-attachment:fixed;
  padding:20px 0 20px 0;
  z-index:200;
  position:fixed;
  top:0;
  box-shadow:0 0 6px rgba(0, 0, 0, 0.2);
}

header div.logo img {
  height:70px;
  width:auto;
}

header div + div.col.text-right {
  padding-top:20px;
}

header div + div.col.text-right a {
  text-transform:uppercase;
  color:var(--black);
}

header div + div.col.text-right a svg {
  vertical-align:top;
  margin-left:10px;
}

header div + div.col.text-right a:hover,
header div + div.col.text-right a:hover svg path {
  fill:var(--green);
}

header nav {
  position:fixed;
  top:0;
  right:-500px;
  transition:all 1s;
  background:var(--white);
  padding:20px 60px 30px 60px;
  z-index:100;
  max-height:100%;
  height:100%;
  overflow-y:auto;
}

header nav.on {
  right:0;
  transition:all 1s;
}

header nav a {
  color:var(--brown);
  text-transform:uppercase;
  font-size:16px;
  line-height:1em;
  text-decoration:none;
  display:block;
}

header nav a:hover {
  color:var(--black);
}

header nav a:hover svg path {
  fill:var(--black);
  transition:all 0.5s;
}

header nav > a + a {
  font-family:var(--primary-font);
  font-size:22px;
  color:var(--black);
  margin-top:28px;
}

@media(max-width:450px) {
  header nav {
    padding-left:5%;
    padding-right:5%;
    width:100%;
  }

  header nav > a + a {
    font-size:20px;
  }
}

header nav > a + a:hover {
  color:var(--brown);
}

header nav > span {
  display:block;
  margin:45px 0 45px 0;
}

header nav > span a {
  font-size:12px;
  color:var(--black);
  display:inline-block;
}

header nav > span a + a {
  margin-left:15px;
}

div.page-title {
  background-color:var(--brown);
  background-image:linear-gradient(rgba(var(--brown-rgb), 0.9), rgba(var(--brown-rgb), 0.75)), url(/images/bg-forest.jpg);
  background-size:cover;
  background-position:center;
  text-align:center;
  padding-bottom:100px;
  text-wrap:pretty;
}

@media(min-width:768px) {
  div.page-title {
    padding-bottom:200px;
  }

  body.home div.page-title {
    background-attachment:fixed;
    height:100vh;
    min-height:400px;
  }
}

body.home div.page-title {
  padding:0;
}

body.home div.page-title > div {
  height:100vh;
  width:100%;
  background-color:rgba(var(--brown-rgb), 0.35);
}

@media(max-width:768px) {
  body.home div.page-title {
    height:auto !important;
  }

  body.home div.page-title > div {
    height:auto !important;
    padding-top:65px;
    padding-bottom:65px;
  }
}

div.page-title h1 {
  padding-top:100px;
  font-size:80px;
  line-height:1.25em;
  color:var(--white);
  text-align:center;
  font-family:var(--script-font);
  margin:0 auto;
  text-shadow:1px 1px 4px rgba(--brown-rgb, 0.6);
  letter-spacing:2px;
}

body.home div.page-title h1 {
  padding:0 0 40px !important;
}

@media(min-width:1200px) {
  body.home div.page-title h1 {
    font-size:120px;
    padding:0 100px;
    text-shadow:5px 5px 8px rgba(0, 0, 0, 0.35);
    line-height:1.1em;
    padding:0 0 60px !important;
  }
}

div.page-title h1 > span {
  font-size:22px;
  line-height:1em;
  margin-bottom:20px;
  display:block;
  text-transform:uppercase;
  font-family:var(--primary-font);
  text-shadow:0 0 4px rgba(0, 0, 0, 0.15);
  letter-spacing:3px;
  color:var(--linen);
}

@media(max-width:568px) {
  div.page-title h1 {
    padding-top:60px;
    font-size:36px;
    margin-left:8%;
    margin-right:8%;
  }
}

body.home h2 {
  font-size:60px;
  line-height:1.45em;
  margin:25px 0 30px 0;
}

div.bg-green h2,
div.bg-green a {
  color:var(--linen);
}

div.bg-green a {
  text-decoration:underline !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:4px !important;
  text-decoration-color:rgba(var(--linen-rgb), 0.5) !important;
}

div.bg-green a:hover {
  text-underline-offset:10px !important;
  text-decoration-color:rgba(var(--linen-rgb), 0.01) !important;
}

main {
  background-image:url(/images/bg-main.png);
  background-position:top;
  background-repeat:repeat;
  background-attachment:fixed;
}

main > div {
  padding-top:80px;
  padding-bottom:80px;
}

div.intro-content {
  background-image:linear-gradient(-60deg, rgba(255, 255, 255, 0) 0, rgba(0, 0, 0, 0.2) 50%, rgba(255, 255, 255, 0) 50%);
  position:relative;
  padding:70px 75px 70px 75px;
  margin:-220px 0 100px 0 !important;
  text-align:center;
  text-wrap:pretty;
}

@media(max-width:768px) {
  div.intro-content {
    padding:30px;
    margin-bottom:60px;
  }
}

div.intro-content p:has(+ h2) {
  font-size:18px;
  letter-spacing:6px;
  margin-bottom:0;
}

div.intro-content h2 {
  margin-top:0.125em;
  margin-bottom:0.5em;
}

div.intro-content p {
  font-size:22px;
  line-height:1.7em;
  margin-bottom:0.65em;
}

div.intro-content * {
  color:var(--white);
}

div.intro-content > *:last-child {
  margin-bottom:0;
}

div.listings > div.col-12 > a:first-child {
  display:block;
  height:295px;
  background-color:var(--linen);
  background-size:cover;
  background-position:center;
}

div.listings > div.col-12:hover > a:first-child {
  opacity:0.9;
}

div.listings > div.col-12 > h3 {
  display:block;
  color:var(--white);
  margin:0;
  padding:15px 30px 15px 30px;
}

div.listings > div.col-12 > p {
  display:block;
  background:var(--white);
  padding:24px 30px 24px 30px;
  margin:0;
}

div.listings > div.col-12 > p + a {
  display:block;
  background-color:var(--white);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='53' height='15'><path fill-rule='evenodd' fill='%234A8985' d='M52.437 6.927v.558l.02.019-.02.019v.54h-.539l-6.011 6.01-1.459-1.46 4.55-4.55H.437V6.062h49.095l-4.479-4.478L46.467.17l5.893 5.892h.077v.078l.394.394-.394.393z'/></svg>");
  background-position:left 160px top 4px;
  background-repeat:no-repeat;
  font-family:var(--primary-font);
  font-size:16px;
  color:var(--black);
  text-decoration:none;
  text-transform:uppercase;
  padding:0 30px 24px 30px;
  margin-bottom:55px;
  transition:1s all;
}

div.listings > div.col-12:hover > p + a {
  color:var(--green);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='53' height='15'><path fill-rule='evenodd' fill='%23aba635' d='M52.437 6.927v.558l.02.019-.02.019v.54h-.539l-6.011 6.01-1.459-1.46 4.55-4.55H.437V6.062h49.095l-4.479-4.478L46.467.17l5.893 5.892h.077v.078l.394.394-.394.393z'/></svg>");
  background-position:left 175px top 4px !important;
  transition:1s all;
}

div.listings > div.col-12 > p + a svg {
  width:53px;
  height:15px;
  margin-left:10px;
  margin-top:-7px;
}

div.listings > div.col-12 > p + a svg path {
  transition:0.5s all;
}

div.listings > div.col-12:hover > p + a svg path {
  fill:var(--green);
}

@media(max-width:568px) {
  div.listings > div.col-12 > a:first-child {
    height:200px;
  }

  div.listings > div.col-12 > h3,
  div.listings > div.col-12 > p,
  div.listings > div.col-12 > p + a {
    padding-left:20px;
    padding-right:20px;
  }

  div.listings > div.col-12 > p + a {
    margin-bottom:40px;
  }
}

@media(min-width:568px) {
  div#pixlee_container {
    max-height:540px;
    overflow:hidden;
  }
}

div.col.line:before {
  content:'';
  display:block;
  width:100%;
  height:2px;
  background:#4a8a87;
  margin:30px 0 50px 0;
}

@media(min-width:768px) {
  div.col.line:before {
    width:3px;
    height:320px;
    margin:40px 0 0 -50px;
    position:absolute;
  }
}

div.reservations {
  background-color:var(--green);
  background-image:linear-gradient(rgba(var(--green-rgb), 0.9), rgba(var(--green-rgb), 0.7)), url(/images/bg-trees.jpg);
  background-repeat:repeat-x;
  background-position:bottom;
  background-size:auto 100%;
  padding-bottom:40px;
}

div.reservations h2,
div.reservations p {
  color:var(--linen);
  line-height:1.75em;
}

div.reservations h2 ~ p,
div.bg-green p {
  color:var(--white);
}

div.reservations div.row > div.col-12:first-child {
  padding-top:75px;
  padding-bottom:60px;
}

@media(min-width:768px) {
  div.reservations div + div.col {
    min-height:445px;
  }

  div.reservations div + div.col > img {
    position:absolute;
    bottom:0;
  }
}

footer {
  background:var(--brown) linear-gradient(-60deg, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0.15) 58%, transparent 58%);
  padding-top:40px;
  padding-bottom:60px;
}

footer + p {
  background-color:var(--blue);
  color:rgba(var(--linen-rgb), 0.6);
  font-size:14px;
  line-height:1em;
  margin:0;
  letter-spacing:1px;
  padding:12px 5% 12px 5%;
}

footer + p a {
  color:rgba(var(--linen-rgb), 0.6);
}

footer + p a:hover {
  color:rgba(var(--linen-rgb), 0.95);
}

footer div.logo img {
  max-width:300px;
  height:auto;
}

@media(max-width:768px) {
  footer {
    padding-top:50px;
    padding-bottom:50px;
  }

  footer div.col {
    padding-top:30px;
  }

  footer + p {
    line-height:1.6em;
  }
}

@media(min-width:1200px) {
  footer div.col {
    padding:40px 0 0 120px;
  }
}

footer div.col a {
  font-size:18px;
  line-height:1.6em;
  color:var(--white);
  font-family:var(--primary-font);
  text-transform:uppercase;
}

footer div.col > a + a:before {
  display:inline;
  content:'•';
  padding:0 10px 0 10px;
  color:var(--sand);
}

@media(min-width:768px) {
  footer div.col > a:first-child + a + a + a + a:before {
    display:block;
    content:'';
  }
}

footer div.col > a + span {
  display:block;
  padding-top:25px;
}

@media(max-width:768px) {
  footer div.col > a:nth-child(odd):before {
    display:block;
    content:'';
    height:6px;
  }

  footer div.col > a + span {
    padding-top:15px;
  }
}

footer div.col > a + span a {
  color:var(--sand);
  font-size:16px;
  display:inline-block;
}

footer div.col > a + span a + a {
  margin-left:15px;
}

form input.text {
  padding:8px 0 2px 0;
  color:var(--white);
  font:16px/16px var(--script-font);
  -webkit-appearance:none;
  width:100%;
  border:none;
  border-bottom:1px solid var(--black);
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:#F00;
}

::-moz-placeholder { /* Firefox 19+ */
  color:#F00;
}

:-ms-input-placeholder { /* IE 10+ */
  color:#F00;
}

:-moz-placeholder { /* Firefox 18- */
  color:#F00;
}

/********************
  Text Styles
********************/

p,
li {
  font:20px/1.4em var(--primary-font);
  color:var(--black);
  margin:0 0 0.85em 0;
}

@media(max-width:568px) {
  p, li {
    font-size:18px;
  }
}

li {
  margin:0 0 0.33em 0;
}

p.large {
  font-size:24px;
}

header > table p + p {
  margin-top:48px;
}

hr.divider {
  background-image:linear-gradient(to right, transparent 0%, var(--blue) 30%, var(--blue) 60%, transparent 100%);
  height:1px;
  width:140px;
  margin:40px auto;
}

h2 {
  font:normal 48px/1.25em var(--script-font);
  color:var(--brown);
  margin:0.8em 0 0.15em 0;
  letter-spacing:0.25px;
}

h2 a {
  color:var(--blue);
}

@media(max-width:768px) {
  h2 {
    font-size:32px;
  }
}

h3 {
  font:bold 30px/1.3em var(--primary-font);
  color:var(--green);
  margin:25px 0 10px 0;
}

h4 {
  font:40px/1.3em var(--script-font);
  color:var(--brown);
  margin:25px 0 0 0;
}

.green {
  color:var(--green);
}

.blue {
  color:var(--green);
}

.bg-brown {
  background-color:var(--brown);
}

.bg-blue {
  background-color:var(--blue);
}

.bg-green {
  background-color:var(--green);
}

div.col-12 > *:first-child,
div.col-12 > a[name]:first-child + *,
div.col > *:first-child,
div.col > a[name]:first-child + * {
  margin-top:0;
}

div.col-12 > *:last-child,
div.col > *:last-child {
  margin-bottom:0;
}

/********************
  Link Styles
********************/

a {
  color:var(--green);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color:rgba(var(--brown-rgb), 0.5);
  transition:all 0.5s;
}

a:hover,
header a {
  text-decoration:none;
}

a.btn {
  display:inline-block;
  font-size:16px;
  line-height:1em;
  font-family:var(--primary-font);
  color:var(--green);
  border:2px solid var(--green);
  padding:15px 20px 15px 20px;
  margin-top:10px;
  text-transform:uppercase;
  font-weight:bold;
  text-decoration:none !important;
}

@media(min-width:768px) {
  a.btn + a.btn {
    margin-left:20px;
  }
}

@media(max-width:768px) {
  a.btn + a.btn {
    margin-top:20px;
  }
}

a.btn:hover {
  background-color:var(--green);
  color:var(--linen);
}

div.reservations a.btn {
  border-color:rgba(var(--linen-rgb), 0.8);
  background-color:rgba(var(--linen-rgb), 0.8);
}

div.reservations a.btn:hover {
  background:transparent !important;
}

div.bg-green a.btn,
div.bg-blue a.btn,
div.bg-blue a.btn:hover,
div.reservations a.btn:hover {
  border-color:var(--linen);
  color:var(--linen);
  text-decoration:none !important;
}

div.bg-green a.btn:hover,
div.bg-blue a.btn:hover,
div.bg-brown a.btn:hover,
div.reservations a.btn:hover {
  background-color:rgba(var(--linen-rgb), 0.1);
}

a.btn.arrow {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='53' height='15'><path fill-rule='evenodd' fill='%23223c31' d='M52.437 6.927v.558l.02.019-.02.019v.54h-.539l-6.011 6.01-1.459-1.46 4.55-4.55H.437V6.062h49.095l-4.479-4.478L46.467.17l5.893 5.892h.077v.078l.394.394-.394.393z'/></svg>");
  background-position:right 20px center;
  background-repeat:no-repeat;
  padding-right:90px;
}

a.btn.arrow.lg {
  font-size:20px;
  padding:20px 110px 20px 30px;
}

a.btn.arrow:hover,
nav a.btn.arrow,
div.bg-green a.btn.arrow,
div.bg-blue a.btn.arrow,
div.reservations a.btn.arrow:hover {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='53' height='15'><path fill-rule='evenodd' fill='%23f6f6f1' d='M52.437 6.927v.558l.02.019-.02.019v.54h-.539l-6.011 6.01-1.459-1.46 4.55-4.55H.437V6.062h49.095l-4.479-4.478L46.467.17l5.893 5.892h.077v.078l.394.394-.394.393z'/></svg>") !important;
  background-position:right 20px center !important;
  background-repeat:no-repeat !important;
}

div.bg-blue a.btn.arrow:hover {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='53' height='15'><path fill-rule='evenodd' fill='%23223c31' d='M52.437 6.927v.558l.02.019-.02.019v.54h-.539l-6.011 6.01-1.459-1.46 4.55-4.55H.437V6.062h49.095l-4.479-4.478L46.467.17l5.893 5.892h.077v.078l.394.394-.394.393z'/></svg>");
  background-position:right 20px center;
  background-repeat:no-repeat;
}

nav a.btn {
  background-color:var(--brown);
  border-color:var(--brown) !important;
  color:var(--linen);
}

nav a.btn.arrow:hover {
  color:var(--brown);
  background-color:transparent !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='53' height='15'><path fill-rule='evenodd' fill='%23223c31' d='M52.437 6.927v.558l.02.019-.02.019v.54h-.539l-6.011 6.01-1.459-1.46 4.55-4.55H.437V6.062h49.095l-4.479-4.478L46.467.17l5.893 5.892h.077v.078l.394.394-.394.393z'/></svg>") !important;
}

footer a:hover {
  color:var(--white);
  transition:all 0.5s;
}

/********************
  Bootstrap Override Styles
********************/

.row {
  margin-left:-30px;
  margin-right:-30px;
}

.container, .col, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 {
  padding-left:30px;
  padding-right:30px;
}

.row-thin-padding {
  margin-left:-15px;
  margin-right:-15px;
}

.row-thin-padding .col-lg-1, .row-thin-padding .col-lg-10, .row-thin-padding .col-lg-11, .row-thin-padding .col-lg-12, .row-thin-padding .col-lg-2, .row-thin-padding .col-lg-3, .row-thin-padding .col-lg-4, .row-thin-padding .col-lg-5, .row-thin-padding .col-lg-6, .row-thin-padding .col-lg-7, .row-thin-padding .col-lg-8, .row-thin-padding .col-lg-9, .row-thin-padding .col-md-1, .row-thin-padding .col-md-10, .row-thin-padding .col-md-11, .row-thin-padding .col-md-12, .row-thin-padding .col-md-2, .row-thin-padding .col-md-3, .row-thin-padding .col-md-4, .row-thin-padding .col-md-5, .row-thin-padding .col-md-6, .row-thin-padding .col-md-7, .row-thin-padding .col-md-8, .row-thin-padding .col-md-9, .row-thin-padding .col-sm-1, .row-thin-padding .col-sm-10, .row-thin-padding .col-sm-11, .row-thin-padding .col-sm-12, .row-thin-padding .col-sm-2, .row-thin-padding .col-sm-3, .row-thin-padding .col-sm-4, .row-thin-padding .col-sm-5, .row-thin-padding .col-sm-6, .row-thin-padding .col-sm-7, .row-thin-padding .col-sm-8, .row-thin-padding .col-sm-9, .row-thin-padding .col-1, .row-thin-padding .col-10, .row-thin-padding .col-11, .row-thin-padding .col-12, .row-thin-padding .col-2, .row-thin-padding .col-3, .row-thin-padding .col-4, .row-thin-padding .col-5, .row-thin-padding .col-6, .row-thin-padding .col-7, .row-thin-padding .col-8, .row-thin-padding .col-9 {
  padding-left:15px;
  padding-right:15px;
}

.container.full-no-padding {
  max-width:100%;
  padding:0;
}

.container.full-no-padding div.row {
  margin:0;
}

.container.full-no-padding div.row > div {
  padding:0;
}

/********************
  Responsive Styles
********************/

@media (max-width:576px) {
  h1 {
    font-size:30px;
  }

  nav {
    top:18px;
    right:18px;
  }
}

@media(min-width:1200px) {
  div.container {
    max-width:1340px;
  }
}