/* All screen sizes */

/****************************************
* Root variables
****************************************/

:root {
  --fni-font-1: 'Red Hat Text';
  --fni-font-2: 'DM Serif Text';

  --fni-color-1: #1ca86e;
  --fni-color-2: #086840;
  --fni-color-3: #8e8e8e;
  --fni-color-4: #8ea7e8;
  --fni-color-5: #152b51;
  --fni-color-6: #14459a;
  --fni-color-7: #be9545;

  --fni-nav-toggle-color: #ffffff;
}

/****************************************
* Typography
****************************************/

main {
  position: relative;
}

h1 {
  font: normal 300 36px/1em var(--fni-font-2);
  color: var(--fni-color-2);
}

h2 {
  font: normal 300 24px/1.2em var(--fni-font-2);
  color: var(--fni-color-6);
}

h3 {
  font: normal 300 13px/1em var(--fni-font-1);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fni-color-4);
}

p span,
h2 span {
  font: normal 400 10px/1em var(--fni-font-1);
  color: var(--fni-color-3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

h3 span {
  font: italic 300 16px/1em var(--fni-font-2);
  color: var(--fni-color-3);
  text-transform: none;
  letter-spacing: 0px;
}

p,
li,
label,
legend {
  font: normal 300 16px/1.5em var(--fni-font-1);
  color: #000000;
}

.property-info p span {
  font: normal 400 10px/1em var(--fni-font-1);
  color: var(--fni-color-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

button.inline-text,
a {
  color: var(--fni-color-1);
  text-decoration: none;
}

button.inline-text:focus,
button.inline-text:hover,
a:focus,
a:hover {
  color: var(--fni-color-2);
}

hr {
  border-top: 1px solid #dfdfdf;
}

hr.short {
  width: 50px;
  margin-top: 3rem;
}

.icon svg {
  margin-right: .5rem;
  width: 30px;
  height: 30px;
  fill: var(--fni-color-1);
}

.icon:focus svg,
.icon:hover svg {
  fill: var(--fni-color-2);
}

blockquote {
  max-width: 350px;
  padding: 0 0 0 2rem;
}

blockquote + .image-container,
.button + .image-container {
  margin-top: 3rem;
}

h1 + p,
h1 + ul,
h1 + ol,
h3 + h3,
h3 + .button,
p + h2,
p + h3,
p + form,
p + .button,
ul + h2,
ul + h3,
ul + .button,
ol + h2,
ol + h3,
img + h1,
img + h2,
img + h3,
blockquote + h2,
blockquote + h3,
blockquote + p,
blockquote + ul,
blockquote + ol,
blockquote + img,
details + h2,
details + h3,
details + p,
details + ul,
details + ol,
details + img,
.grid + h2,
.directions + .grid,
.button + h2,
.button + h3,
.video + h2,
.video + h3,
.video + .video,
.accent + #calculator {
  margin-top: 2rem;
}

h1 + h2,
h1 + form,
h2 + ul,
h2 + ol,
h2 + img,
h2 + form,
h2 + blockquote,
h2 + details,
h2 + p,
h2 + .grid,
h2 + .button,
h2 + .video,
h3 + p,
h3 + ul,
h3 + ol,
h3 + img,
h3 + form,
h3 + blockquote,
h3 + details,
h3 + .video,
h3 + .cities,
h3 + .thank-you,
p + p,
p + ul,
p + ol,
p + img,
p + blockquote,
p + details,
p + .video,
img + p,
img + img,
.button + .button,
.grid + label,
.grid + .grid,
.grid + .button,
.flex + p,
.flex + .flex,
.save-share + .button,
.honey-wrapper + .button {
  margin-top: 1rem;
}

h2 + h3,
.details h2 + p,
li + li {
  margin-top: .5rem;
}

.photo-gallery .button + .button {
  margin-top: 0;
}

a[href]:focus,
input:focus,
textarea:focus,
select:focus,
button:focus,
input[type="submit"]:focus,
[type="file"]:focus + label,
[type="file"]:focus + button,
[type="radio"]:focus + label::before,
[type="checkbox"]:focus + label::before {
  outline: 1px solid var(--fni-color-1);
}

[type="radio"]:checked + label::before,
[type="checkbox"]:checked + label::before {
  background-color: var(--fni-color-2);
}

.skip:focus {
  color: #ffffff;
}

.grid.row-2 {
  grid-template-rows: 1fr 1fr;
}

@media (hover: hover) {
  .hidden--notouch {
    display: none !important;
  }
}

@media (hover: none) {
  .hidden--touch {
    display: none !important;
  }
}

/****************************************
* Padding
****************************************/

.padding-sm {
  padding: 2rem;
}

/****************************************
* Invisible
****************************************/

.invisible {
  opacity: 0;
}

/****************************************
* Buttons
****************************************/

.button {
  background-color: var(--fni-color-1);
  padding: 1rem 1.5rem;
  font: normal bold 14px/1.5em var(--fni-font-1);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #FFFFFF;
  border: 1px solid transparent;
}

.button:focus,
.button:hover,
.button:disabled {
  background-color: #FFFFFF;
  color: var(--fni-color-1);
  border: 1px solid var(--fni-color-1);
}

.button.borderless {
  border: none;
  outline: none;
  padding: 5px;
}

.button.borderless:focus,
.button.borderless:active,
.button.borderless:hover {
  background-color: transparent;
  color: var(--fni-color-1);
  border: none;
}

.button.small {
  padding: .5rem;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .5px;
}

.button.small::after {
  margin-left: .25rem;
  font-size: 14px;
}

.button.small:focus::after,
.button.small:hover::after {
  left: .25rem;
}

.inline-text {
  display: inline-block;
  width: auto;
  padding: 0;
  background-color: transparent;
}

.no-arrow::after {
  display: none;
}

[type="submit"].button {
  height: unset;
}

.bookmark {
  position: relative;
}

.bookmark i {
  font-size: 25px;
}

.bookmark span {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000000;
  font-size: 12px;
  line-height: 1em;
  text-align: center;
}

.billboard form .button {
  padding: .5rem;
}

/****************************************
* Forms
****************************************/

input,
select,
textarea {
  border-radius: 0;
  outline: none;
  font: normal 300 14px/1.2em var(--fni-font-1);
  color: #000000;
  border: 1px solid #dedede;
}

input:focus,
input:active {
  border: 1px solid #000000;
}

input.invalid {
  outline: none;
  border: none;
  border-bottom: 1px solid #dd0000;
}

input[type="checkbox"].hidden + label,
input[type="radio"].hidden + label {
  display: none;
}

textarea {
  margin-top: 1rem;
  min-height: 300px;
  line-height: 1.5em;
}

textarea:focus,
textarea:active {
  border: 1px solid var(--fni-color-1);
}

textarea.invalid {
  border: 1px solid #dd0000;
}

textarea.invalid::placeholder,
input.invalid::placeholder {
  opacity: 1;
  color:#dd0000;
}

.styled-select {
  padding: 0px;
}

.styled-select select {
  padding-right: 30px;
}

.arrow-down {
  top: 8px;
  right: 10px;
  border-width: 0 1px 1px 0;
  border-color: #000000;
  padding: 5px;
}

select option,
select[data-placeholder],
textarea::placeholder,
input::placeholder {
  font: normal 300 14px/1em var(--fni-font-1);
  color: #848484;
  opacity: 1;
}

/****************************************
* Search bar style
****************************************/

.search-bar {
  position: relative;
  /* background-color: #ffffff; */
  min-width: 265px;
}

.search-bar i {
  pointer-events: none;
}

.search-bar i {
  position: absolute;
  top: 9px;
  left: 6px;
  width: 20px;
  height: 20px;
}

.search-bar input {
  margin-bottom: 0;
  padding-left: 30px;
}

/****************************************
* Accents & Parallax
****************************************/

.accent {
  padding: 1rem;
  background-image: linear-gradient(-5deg, #8f6713, #ebb83d, #986c0d);
  border-top: 1px solid #fde7b1;
  border-bottom: 1px solid #c8920d;
  box-shadow: 0 0 4px rgb(160 132 38);
}

.accent h2,
.accent p {
  color: #ffffff;
}

.accent-2 {
  padding: 1rem;
  background-color: var(--fni-color-5);
}

.accent-3 {
  padding: 1rem 1.5rem;
  background-color: #f8f6f2;
}

.accent h2,
.accent-2 h2 {
  font: normal 300 16px/1em var(--fni-font-1);
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
}

.accent-4 {
  background-color: #ffffff;
  border-bottom: 1px solid #efefef;
}

.accent-5 {
  background-color: var(--fni-color-7);
  padding: 2rem;
}

.accent-5 h2,
.accent-5 p {
  color: #ffffff;
}

.bg-body {
  background-color: #fefbf4;
}

.bg-body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: url('/images/layout/background-body.png');
  background-size: 300px;
  background-position: bottom;
  background-repeat: repeat-x;
}

.bg-main {
  background-color: #fefbf4;
  background-image: url('/images/layout/background-body.png');
  background-size: 300px;
  background-position: bottom;
  background-repeat: repeat-x;
}

/****************************************
* Header
****************************************/

header {
  position: relative;
  background-color: var(--fni-color-5);
}

header .flex {
  flex-direction: column;
}

header .logo {
  margin: 0 0 0 1rem;
  padding: 1rem 0;
}

header .logo img {
  max-width: 250px;
}

header .mobile-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 2rem auto;
  max-width: 300px;
}

header .mobile-icons a,
header .mobile-icons button {
  background-color: transparent;
  padding: 0;
  width: 100%;
}

header .icons i,
header .mobile-icons i {
  font-size: 20px;
  color: #ffffff;
}

@media(min-width: 460px) {
  header .mobile-icons {
    position: absolute;
    top: 34px;
    right: 4.5rem;
    margin: 0;
  }
}

/****************************************
* Navigation
****************************************/

.nav-toggle {
  top: 20px;
  right: 1rem;
}

.nav-toggle svg path {
  stroke-width: 3;
}

nav.on {
  max-height: 100vh;
}

nav {
  width: 100%;
  max-height: 0;
  padding: 0 1rem;
  overflow: hidden;
  transition: max-height .4s ease-in;
}

nav ul {
  margin: 0 0 2rem 0;
}

nav li {
  display: flex;
  justify-content: center;
  position: relative;
  margin: 0;
}

nav a {
  width: 100%;
  padding: 2rem 0;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  font-size: 14px;
  color: #FFFFFF;
}

nav a:hover,
nav a:focus,
nav a:not(.button).active {
  color: #b4b2b2;
}

nav li + li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, .2);
  width: 100%;
  height: 1px;
}

nav li:last-child::before {
  background-color: transparent;
}

nav .button {
  display: inline-block;
  width: auto;
  margin-top: 2rem;
}

nav .button:hover {
  background-color: var(--fni-color-3);
}

/****************************************
* Phone dropdown
****************************************/

.phone,
.phone-menu {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 350px;
}

.phone-menu button {
  background-color: transparent;
  width: 100%;
  padding: 0;
}

.phone-menu .dropdown {
  display: block;
  position: relative;
  top: -2rem;
  z-index: 10;
  height: auto;
  max-height: 0;
  overflow: hidden;
  transition: all .6s ease;
}

.phone.on::before {
  content: '';
  position: absolute;
  bottom: -19px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
}

.phone-menu.on .dropdown {
  margin-bottom: -.75rem;
  max-height: 1000px;
}

.phone-menu .content {
  margin: 1rem 0 .5rem 0;
  border-top: 1px solid #ffffff;
  background-color: #ffffff;
  min-width: 250px;
  max-height: 100%;
}

.phone-menu .content a {
  display: block;
  text-align: center;
}

.phone-menu .content a,
.phone-menu .content a:hover {
  border-radius: 0;
  padding: .75rem 1rem;
  font-size: 14px;
  color: var(--fni-color-1);
}

.phone-menu .content a span {
  color: #000000;
}

.phone-menu .content a + a {
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.phone-menu .content .button {
  margin: 0;
  border: none;
  color: #ffffff;
}

@media(min-width: 460px) {
  .phone.on::before {
    bottom: -17px;
  }

  .phone-menu {
    position: absolute;
    top: 90px;
    right: 2rem;
  }
}

/****************************************
* Billboard
****************************************/

.billboard {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: calc(400px + (300 - 400) * (100vw - 320px) / (576 - 320));
}

.billboard video {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.billboard .content {
  position: relative;
  z-index: 2;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  max-width: calc(100% - 2rem);
  background-color: rgba(255, 255, 255, .8);
}

@media (min-width: 350px) {
  .billboard .content {
    max-width: calc(100% - 4rem);
  }
}

.home.billboard video {
  object-position: top;
}

.billboard p {
  color: #ffffff;
}

.billboard a {
  display: inline-block;
}

.billboard-inside {
  background-color: #ffffff;
  border-bottom: 1px solid #efefef;
}
.billboard-inside p {
  max-width: 1000px;
  margin: 1rem auto 0;
  text-align: center;
}

/****************************************
* Banner
****************************************/

.banner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
  margin: 1rem auto;
  border: 1px solid var(--fni-color-3);
  padding: 2rem;
  text-align: center;
}

.banner h2 {
  font: normal 700 50px/1.5em var(--fni-font-1);
}

.banner p {
  font-weight: 700;
  margin-bottom: 1rem;
}

/****************************************
* Cards
****************************************/

.card {
  box-shadow: 1px 1px 6px rgba(0, 0, 0, .1);
  border: none;
  border-radius: 0;
  max-width: 350px;
}

.cards {
  margin: auto;
}

.card .image-wrapper img {
  object-position: top;
}

.agents {
  max-width: fit-content;
}

.agents .image-wrapper {
  position: relative;
  margin: 1.5rem auto 0 auto;
  border-radius: 50%;
  max-width: 200px;
}

.property .save {
  position: absolute;
  top: .75rem;
  right: .75rem;
  padding: 0;
  background-color: transparent;
  color: #d6d6d6;
  font-size: 20px;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));
}

.button.saved,
.button.save:hover,
.property.saved .save,
.property .save:hover {
  color: var(--fni-color-1);
}

.button.save:focus,
.property .save:focus,
.button.saved:focus,
.property.saved .save:focus  {
  color: var(--fni-color-1);
}

.button.save i,
.button.save span,
.property .save i {
  pointer-events: none; /* prevent clicking on icon */
}

.agents .image-wrapper img {
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
  object-position: top;
  aspect-ratio: 1/1;
}

.agents .details {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.agents .details .credentials {
  font: italic 500 16px/1em var(--fni-font-2);
  margin-top: 0.5rem;
}

.agents .details p {
  font-size: 14px;
}

.agents .details hr.short {
  margin: .5rem auto;
}

.agents .details + .flex {
  gap: 1px;
}

.agents .flex .button {
  flex-grow: 1;
}

.agents .flex .button + .button {
  margin-top: 0;
}

.property .details {
  position: relative;
  padding: 1rem;
}

.property .details h2 {
  font-size: 20px;
  line-height: 1.4rem;
}

.property .details p {
  font-size: 14px;
  color: var(--fni-color-3);
}

.property .accent {
  position: absolute;
  bottom: 0;
  background-color: var(--fni-color-2);
  width: 100%;
  max-height: 26px;
  padding: .25rem;
}

.property .accent p {
  text-align: center;
  font: normal 300 10px/1em var(--fni-font-1);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.property-placeholder {
  animation: 3s infinite linear loading;
  background: linear-gradient(to right, #efefef 10%, #dadada 40%, #efefef 80%);
  background-size: 800px;
  min-height: 300px;
}

@keyframes loading {
  from {
    background-position: -800px 0;
  }

  to {
    background-position: 800px 0;
  }
}

/****************************************
* Category cards
****************************************/

.categories.grid {
  padding: 1rem;
}

.categories .card {
  position: relative;
  aspect-ratio: 1;
  max-width: 500px;
}

.categories .card.inactive .image-wrapper img {
  filter: grayscale(100%);
}

.categories .card .details {
  position: absolute;
  bottom: 5%;
  left: 10%;
  margin: 0;
  max-width: 80%;
  padding: 0;
}

.categories .card p {
  font: normal 600 20px/1em var(--fni-font-1);
  color: #ffffff;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.categories .card span {
  font: normal 300 16px/1.5em var(--fni-font-1);
  color: var(--fni-color-7);
  text-transform: none;
  letter-spacing: 0;
}

/****************************************
* Agent details page
****************************************/

.agent-details img {
  max-width: 300px;
}

img.circle {
  border-radius: 50%;
}

/****************************************
* Property search
****************************************/

/* Search form grid */

.property-search form,
.property-search form > .flex {
  display: flex;
  flex-flow: row wrap;
  align-items: end;
  justify-content: center;
  grid-gap: 1rem .5rem;
}

.property-search form > .flex {
  grid-gap: .5rem;
}

.property-search form {
  margin: 0 auto;
  padding: 1rem;
  border-bottom: 1px solid #efefef;
}

.property-search form .grid {
  grid-gap: .5rem;
}

.property-search form .grid + .grid {
  margin-top: 0;
}

.property-search [name="xSORT_RESULTS"][disabled],
.property-search.inert {
  cursor: wait;
}

.billboard label,
.property-search label {
  color: #777777;
  text-transform: uppercase;
  font-size: 14px;
}

.property-search form > :nth-child(7) {
  grid-column: span 12;
}

.property-search form > :nth-child(1),
.property-search form > :nth-child(2),
.property-search form > :nth-child(3),
.property-search form > :nth-child(4),
.property-search form > :nth-child(5),
.property-search form > :nth-child(6){
  grid-column: span 6;
}

@media(min-width: 576px) {
  .property-search form > :nth-child(1) {
    grid-column: span 12;
  }

  .property-search form > :nth-child(2),
  .property-search form > :nth-child(3),
  .property-search form > :nth-child(4),
  .property-search form > :nth-child(5),
  .property-search form > :nth-child(6),
  .property-search form > :nth-child(7) {
    grid-column: span 4;
  }
}

@media(min-width: 768px) {
  .property-search form > :nth-child(1) {
    grid-column: span 6;
  }

  .property-search form > :nth-child(2),
  .property-search form > :nth-child(3),
  .property-search form > :nth-child(4) {
    grid-column: span 2;
  }

  .property-search form > :nth-child(5),
  .property-search form > :nth-child(6),
  .property-search form > :nth-child(7) {
    grid-column: span 4;
  }
}

@media(min-width: 950px) {
  .property-search form > :nth-child(1) {
    grid-column: span 2;
  }

  .property-search form > :nth-child(2),
  .property-search form > :nth-child(3),
  .property-search form > :nth-child(4),
  .property-search form > :nth-child(5),
  .property-search form > :nth-child(6),
  .property-search form > :nth-child(7) {
    grid-column: initial;
  }

  .property-search form {
    grid-template-columns: repeat(7, 1fr);
  }
}

/* Other search form properties */

.sort-results select,
.property-search form select {
  margin-bottom: 0;
}

.property-search form .more-options,
.property-search form .save-search {
  position: relative;
}

.property-search form .more-options,
.property-search form .submit,
.property-search form .save-search {
  display: grid;
  align-content: end;
}

#search-modal,
#save-search-modal {
  display: grid;
  grid-gap: .5rem;
  position: absolute;
  top: 3rem;
  box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  padding: 1rem;
  z-index: 100;
}

#search-modal,
#save-search-modal {
  transform: translateX(-50%);
  min-width: 340px;
}

#search-modal {
  left: calc(50% + 43px);
  grid-template-columns: 1fr 1fr;
}

#save-search-modal {
  left: calc(50% - 43px);
}

#search-modal label,
#save-search-modal label {
  white-space: nowrap;
}

#search-modal.hidden,
#save-search-modal.hidden {
  display: none;
}

#search-modal .amenities {
  grid-column: 1 / span 2;
  display: grid;
}

#saved-searches .search-item {
  display: flex;
  align-items: center;
}

#saved-searches .search-item:hover button {
  color: #ff4200;
}

#saved-searches .search-item button {
  margin-left: auto;
  color: transparent;
  background-color: transparent;
  padding: 0;
}

.property-search form .clear-filters,
.property-search #search-results .clear-filters {
  background: transparent;
  color: var(--fni-color-1);
  padding: 0;
  font-weight: normal;
  text-align: left;
}

.property-search form .clear-filters:hover,
.property-search #search-results .clear-filters:hover {
  color: var(--fni-color-2);
}

.property-search .results {
  display: grid;
  position: relative;
  min-height: 500px;
}

.property-search .map-container {
  position: relative;
}

.property-search .map-results {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  padding: .5rem;
  color: #ffffff;
  z-index: 2;
}

.property-search #map {
  height: 500px;
  z-index: 1;
}

.property-search #search-results {
  position: relative;
  max-height: 85vh;
  z-index: 10;
  overflow-x: hidden;
  /* direction: rtl; */
}

/* .property-search #search-results > * {
  direction: ltr;
} */

.property-search #search-results.cover {
  position: absolute;
  width: 100%;
  min-height: 100%;
}

@media (min-width: 800px) {
  .property-search #map {
    height: 700px;
  }
}

@media (min-width: 1140px) {
  .property-search .results {
    grid-template-columns: 4fr 6fr;
  }
}

#search-results > div:first-of-type {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem 1rem 0 1rem;
}

.search-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Listing cards */
.properties {
  /* display: grid;
  grid-template-columns: 1fr; */
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  grid-gap: 1rem;
  padding: 1rem;
  /* margin-bottom: 2rem; */
}

.properties.similar .property:nth-of-type(2),
.properties.similar .property:nth-of-type(3),
.properties.similar .property:nth-of-type(4),
.properties.similar .property:nth-of-type(5),
.properties.similar .property:nth-of-type(6),
.properties.similar .property:nth-of-type(7) {
  display: none;
}

@media (min-width: 576px) {
  .properties > * {
    width: calc((100% / 2) - (1rem / 2));
  }

  .properties.similar .property:nth-of-type(2) {
    display: block;
  }
}

@media (min-width: 768px) {
  .properties > * {
    width: calc((100% / 3) - ((1rem / 3) * 2));
  }

  .properties.similar .property:nth-of-type(3) {
    display: block;
  }
}

@media (min-width: 1140px) {
  #search-results .properties > * {
    width: calc((100% / 2) - (1rem / 2));
  }

  .properties > * {
    width: calc((100% / 4) - ((1rem / 4) * 3));
  }

  .properties.similar .property:nth-of-type(4) {
    display: block;
  }
}

@media (min-width: 1400px) {
  #search-results .properties > * {
    width: calc((100% / 3) - ((1rem / 3) * 2));
  }
}

@media (min-width: 1600px) {
  #search-results .properties > * {
    width: calc((100% / 3) - ((1rem / 3) * 2));
  }

  .properties > * {
    width: calc((100% / 5) - ((1rem / 5) * 4));
  }

  .properties.similar .property:nth-of-type(5) {
    display: block;
  }
}

@media (min-width: 1800px) {
  #search-results .properties > * {
    width: calc((100% / 4) - ((1rem / 4) * 3));
  }

  .properties > * {
    width: calc((100% / 6) - ((1rem / 6) * 5));
  }

  .properties.similar .property:nth-of-type(6) {
    display: block;
  }
}

@media (min-width: 2000px) {
  .properties > * {
    width: calc((100% / 7) - ((1rem / 7) * 6));
  }

  .properties.similar .property:nth-of-type(7) {
    display: block;
  }
}

.property {
  position: relative;
  background-color: #ffffff;
}

.property .image-wrapper {
  aspect-ratio: 16 / 9;
}

.property .image-wrapper img {
  max-height: 180px;
}

.property:hover {
  box-shadow: 2px 3px 10px rgba(0, 0, 0, .2);
}

/****************************************
* Open houses
****************************************/

.accent.open-house {
  padding: 2rem;
}

.open-houses .property .accent {
  position: unset;
  max-height: unset;
  padding: .5rem;
}

.open-houses .property .accent p {
  font-size: 12px;
  line-height: 1.1em;
}

/****************************************
* Coming Soon
****************************************/

.coming-soon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all .25s ease;
  background-color: #666666;
}

.coming-soon svg {
  width: 110px;
  height: 98px;
  fill: rgba(255,255,255,.3);
}

.coming-soon p {
  position: relative;
  bottom: unset;
  left: unset;
  font: normal normal 9px/1em var(--fni-font-1);
  color: rgba(255,255,255,.4);
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.property:hover .coming-soon {
  transform: scale(1.05);
}

/****************************************
* Property Page
****************************************/

.property-photos {
  position: relative;
  padding: 1rem;
}

.property-photos img {
  margin: 0;
  width: 100%;
  height: 100%;
}

.property-photos .coming-soon {
  background-color: var(--fni-color-3);
}

.property-photos .coming-soon svg {
  width: 70px;
  height: auto;
}

.property-photos .coming-soon p {
  font-size: 10px;
}

.property-photos .image-wrapper {
  position: relative;
}

.property-photos .button-wrapper {
  z-index: 99;
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
}

.property-photos .button-wrapper .button + .button {
  margin-top: 0;
}

.save-share {
  width: 100%;
}

.primary-details {
  gap: 1rem;
}

.primary-details h2 {
  border-radius: 4px;
  padding: .5rem 1rem;
  font-size: 18px;
  background-color: #efefef;
}

.primary-details h2 i {
  color: #acacac;
}

.property-details .padding {
  width: 100%;
}

.property-details > .grid > div:last-child {
  padding-top: 0;
  padding-bottom: 250px; /* half the height of the map */
}

.property-map {
  margin-top: 1rem;
  position: relative;
  pointer-events: none;
  min-height: 300px;
}

.map-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 300px;
}

.property-map #map {
  pointer-events: auto;
}

#map + .directions {
  padding-top: 202px; /* half the height of the map */
}

.grouped-sections > div + div {
  margin-top: 1rem;
}

.grouped-sections .grid p + p {
  margin: 0;
}

/****************************************
* Google Map popup
****************************************/

.gm-style-iw,
.gm-style-iw-ch {
  padding: 0 !important;
}

.gm-ui-hover-effect {
  position: absolute !important;
  top: .5rem !important;
  right: .5rem !important;
  width: 24px !important;
  height: 24px !important;
  opacity: 1 !important;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 1));
}

.gm-ui-hover-effect span {
  margin: 0 !important;
  background-color: #d6d6d6;
}

.gm-ui-hover-effect:focus span,
.gm-ui-hover-effect:hover span {
  background-color: var(--fni-color-1);
}

.gm-style-iw-d::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 50%;
  background-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 100%);
}

.gm-style .gm-style-iw-tc::after {
  background-color: #000000;
}

.gm-style-iw-d img {
  width: 250px;
  height: 187px;

}

.gm-style-iw-d a {
  position: absolute;
  bottom: 0;
  z-index: 1;
  margin: 0;
  width: 100%;
  padding: 1rem;
  font: italic 400 18px/1.2em var(--fni-font-2);
  color: #d6d6d6;
}

.gm-style-iw-d a:focus,
.gm-style-iw-d a:hover {
  outline: none;
  color: var(--fni-color-1);
}

/****************************************
* Disclaimer
****************************************/

.disclaimer {
  margin-top: 1rem;
}

.disclaimer img {
  display: inline-block;
  width: auto;
  max-height: 20px;
}

.disclaimer p + .details,
.disclaimer img + p {
  margin-top: .25rem;
}

.disclaimer details,
.disclaimer p,
.disclaimer li {
  font: normal 300 12px / 1.7em var(--fni-font-1);
  color: var(--fni-color-3);
}

.disclaimer details {
  display: inline-block;
}

/****************************************
* Similar Properties
****************************************/

/* Hide properties based on screen size */
.similar .property:nth-child(2),
.similar .property:nth-child(3),
.similar .property:nth-child(4),
.similar .property:nth-child(5),
.similar .property:nth-child(6) {
  display: none;
}


/****************************************
* Overlay
****************************************/

.overlay {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100% !important;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999;
  overflow: auto;
}

.overlay h2 {
  margin-top: 0;
}

.overlay .close-overlay {
  color: #000000;
}

.overlay > .wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: auto;
  border-radius: 5px;
  background-color: #ffffff;
  width: calc(100% - 2rem);
  max-width: 700px;
  max-height: calc(100vh - 2rem);
  padding: 2.5rem;
  overflow: auto;
}

.overlay button.close-overlay {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background-color: transparent;
  width: 25px;
  height: 25px;
  padding: 0;
  font-size: unset;
}

.overlay button.close-overlay svg {
  margin: 0;
  width: 25px;
  height: 25px;
  fill: #000000;
}

.overlay button.close-overlay:focus svg,
.overlay button.close-overlay:hover svg {
  fill: #dd0000;
}

.overlay .close-overlay:focus,
.overlay .close-overlay:hover {
  color: #dd0000;
}

/****************************************
* Side links
****************************************/

.side-links {
  z-index: 99;
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: .5rem;
  background-color: #ffffff;
  box-shadow: 3px -4px 10px rgba(0, 0, 0, .2);
}

.side-links .button + .button {
  margin-top: 0;
}

@media (max-width: 767.98px)
{
  .side-links a,
  .side-links button {
    border: none;
    border-radius: 50%;
    font-size: 22px;
    padding: 0;
  }

  .side-links .request-showing {
    font-size: 13px;
    padding: .5rem 1rem;
    border-radius: 0;
  }

  .side-links .button:focus,
  .side-links .button:hover {
    border: none;
    outline: none;
    color: var(--fni-color-1);
  }

  .side-links .request-showing:focus,
  .side-links .request-showing:hover {
    background-color: var(--fni-color-1);
    color: #ffffff;
  }

  .side-links a span,
  .side-links button span,
  .side-links .request-showing i {
    display: none;
  }

  .side-links a:not(.request-showing),
  .side-links button:not(.request-showing) {
    background-color: transparent;
    color: var(--fni-color-1);
  }
}

/****************************************
* Share Sheet
****************************************/

#share-sheet .wrapper {
  max-width: 210px;
}

#share-sheet ul {
  margin: 1rem 0 0 0;
}

#share-sheet li {
  margin: 0;
  border-top: 1px solid #dfdfdf;
  padding: 1rem 0;
  list-style-type: none;
}

#share-sheet li a {
  font-size: 22px;
}

/****************************************
* Photo Gallery
****************************************/

#photo-gallery img {
  width: 100%;
}

#photo-gallery .grid img + img {
  margin-top: 0;
}

/****************************************
* Calculator
****************************************/

#calculator h2 + .grid {
  margin-top: 1rem;
}

#calculator .flex + .flex,
#calculator label,
#calculator input {
  margin: 0;
}

#calculator > .grid {
  border: 1px solid #dfdfdf;
  border-top: none;
}

#calculator .cell {
  border-top: 1px solid #dfdfdf;
  padding: 1rem;
}

#calculator .cell.summary,
#calculator .cell:nth-of-type(2n) {
  background-color: #efefef;
}

#calculator .cell.estimated-payment {
  background-color: var(--fni-color-2);
}

#calculator .cell.estimated-payment p {
  color: #ffffff;
}

#calculator input {
  background-color: #ffffff;
  padding-left: 4px;
}

#calculator .cell .grid {
  gap: .25rem;
}

/****************************************
* Latest Post
****************************************/

.latest-post p > a {
  word-wrap: anywhere;
}

.latest-post p + img,
.latest-post p + .fb-video,
.latest-post img + p,
.latest-post .fb-video + p {
  margin-top: 1rem;
}

.latest-post .social-buttons {
  padding: .5rem 0;
  margin-bottom: 1rem;
}

.latest-post .social-buttons > div {
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
}

.latest-post video {
  max-width: 100%;
}

.latest-post .slip-n-slide img {
  position: relative;
  top: 0;
  transform: none;
}

.latest-post [data-overlay] {
  display: inline-flex;
  justify-content: center;
  position: relative;
}

.latest-post [data-overlay] svg {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 15px;
  height: 15px;
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.7));
  opacity: 0;
  transition: all .4s ease;
}

.latest-post [data-overlay]:hover svg {
  opacity: 1;
}

/****************************************
* Magic home finder
****************************************/

.magic-home-finder {
  background-color: #fffdfb;
}

.magic-home-finder img {
  margin: 0 auto;
  width: 98%;
  max-width: 450px;
}

#locating-position {
  display: none;
  background-color: var(--fni-color-1);
  vertical-align: middle;
  padding: 20px;
}

#loading-results p,
#locating-position p {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

#loading-results {
  margin: 0px;
  background-color: var(--fni-color-1);
  padding: 1rem;
}

#loading-results img {
  margin: 0;
  width: 16px;
  height: 11px;
}

/****************************************
* PWA banner on the home screen
****************************************/

.home-screen-banner {
  position: fixed;
  bottom: -140px;
  z-index: 999;
  transition: all 0.75s;
}

.home-screen-banner-on {
  bottom: 0px;
  transition: all 1.25s;
}

.home-screen-banner img {
  margin: 0 auto;
  width: 75%;
  max-width: 450px;
}

/****************************************
* Footer
****************************************/

footer {
  background: #180906 url('/images/layout/background-footer.jpg') repeat-x;
  text-align: center;
}

footer h2 {
  color: #ffffff;
}

footer hr {
  border-top: 1px solid rgba(255, 255, 255, .2);
  margin: .6rem 0;
}

footer .icon svg {
  margin-top: .75rem;
}

footer .icon svg:hover {
  fill: #ffffff;
}

footer p {
  margin-bottom: 0;
  color: #efe6ce;
}

footer a:hover {
  color: #ffffff;
}

footer p + h2 {
  margin-top: 1rem;
}

/****************************************
* Attribution
****************************************/

.attribution {
  background-color: rgba(0, 0, 0, 0.2);
  padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
}

.attribution p,
.attribution a {
  margin: 0;
  font-size: 12px;
  color: #ffffff;
}

.attribution a {
  font-weight: normal;
  text-transform: none;
}

/****************************************
* Video
****************************************/

.videos {
  gap: 1rem;
  padding: 1rem;
}

.videos > button {
  position: relative;
  padding: 0;
  background-color: transparent;
}

.videos > button::before,
.videos > button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: #000000;
  transition: all .4s ease;
  opacity: .5;
}

.videos > button:focus::before,
.videos > button:hover::before {
  background-color: var(--fni-color-1);
  opacity: .8;
}

.videos > button img {
  width: 100%;
}

.videos > button .content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 2rem;
}

.videos > button p {
  margin: 0;
  color: #ffffff;
  text-align: center;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  font-size: calc(16px + (22 - 16) * (100vw - 320px) / (576 - 320));
}

.videos > button svg {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 3;
  width: 20px;
  height: 20px;
  fill: #ffffff;
  pointer-events: none;
}

.video .placeholder button {
  background-color: var(--fni-color-1);
}

.video .placeholder:hover button {
  background-color: #ffffff;
}

.video .placeholder:hover button svg {
  fill: var(--fni-color-1);
}

.videos .overlay .close-overlay svg {
  fill: #ffffff;
}

.videos .overlay .wrapper {
  padding: 0;
  max-width: 1140px;
}