.availabilities-background {
  background: var(--availability-background-color);
  color: var(--availability-text-color);
}

.availability-list.hidden,
.availability-table.hidden {
  display: none;
}

.availability-list,
.availability-table {
  color: black;
}

.availability-table h2 {
  font-size: 16px;
  font-weight: 400;
}

.availability-list h2 {
  font-size: 16px;
  font-weight: 600;
}

.availability-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.availability-list > li {
  width: calc((100% - 32px) / 3);
  background: #ffffff;
  border: 1px solid var(--availability-border-color);
  border-radius: 3px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: all 0.4s;

  &.enlarge-on-hover {
    &:has(.card-anchor:hover),
    &:has(a:hover) {
      transform: scale(1.02);
      box-shadow: 0 4px 30px 5px #00000014;
    }
  }
}

.listing-row {
  position: relative;
  transition: all 0.4s;

  &.enlarge-on-hover {
    &:has(.card-anchor:hover),
    &:has(a:hover) {
      transform: scale(1.02);
      box-shadow: 0 4px 30px 5px #00000014;
    }
  }

  .listing-row-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: white;
  }
}

.card-anchor {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: all 0.4s;
}

.availability-list > li .top-section {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  gap: 24px;
}

.availability-list > li .asking-rent {
  text-align: right;
  font-size: 16px;
}

.availability-list > li .photo {
  position: relative;
  height: 216px;
}

.availability-list > li .photo.bordered,
.listing-row .overview-container .bordered {
  border: 1px solid #ccc;
  border-radius: 3px;
}

.availability-list > li .photo img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 3px;
}

.availability-list > li .photo .action-buttons {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.availability-table .action-buttons {
  display: flex;
  gap: 8px;
}

.availability-table .action-buttons > a,
.availability-list > li .photo .action-buttons > a {
  height: 32px;
  width: 32px;
  border: 1px solid var(--availability-icon-and-link-color);
  background: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transition: all 0.2s ease;

  &.enlarge-on-hover {
    &:hover {
      transform: scale(1.08);
    }
  }
}

.availability-table .action-buttons > a > svg,
.availability-list > li .photo .action-buttons > a > svg {
  fill: var(--availability-icon-and-link-color);
  height: 16px;
  width: 100%;
  pointer-events: none;
}

.availability-table.hide-asking-rent .asking-rent {
  display: none;
}

.availability-list > li .attributes-list {
  display: flex;
  justify-content: space-between;
}

.availability-list > li .attributes-list .attribute-name {
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
}

.availability-list > li .attributes-list .attribute-value {
  font-size: 14px;
}

.availability-list > li .attributes-list .attribute-value:not(.no-text-transform) {
  text-transform: capitalize;
}

.availability-list > li .bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.availability-list > li .bottom-row > .facts {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.availability-list > li .bottom-row > .facts > :first-child {
  padding-right: 16px;
}

.availability-list > li .bottom-row > .facts > li,
.availability-table .facts > li {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #737373;
  font-size: 12px;
}

.availability-table a.link-out,
.availability-list > li .bottom-row > a:not(.modal-mask) {
  text-decoration: none;
  background-color: var(--availability-button-color);
  color: var(--availability-button-text-color);
  padding: 8px 16px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 14px;
  height: 32px;
  position: relative;
  z-index: 2;
  transition: all 0.2s ease;

  &.enlarge-on-hover {
    &:hover {
      transform: scale(1.04);
    }
  }
}

.availability-table a.link-out.enlarge-on-hover {
  font-weight: 600;
}

.availability-table a.link-out > svg,
.availability-list > li .bottom-row > a > svg {
  fill: var(--availability-button-text-color);
  width: 14px;
  height: 14px;
}

.availability-table {
  border-spacing: 0 8px;
  width: 100%;
}

.availability-table tr {
  background: white;
  outline: 1px solid var(--availability-border-color);
  border-radius: 3px;
}

.availability-table > thead th {
  text-align: left;
}

.availability-table > thead th:first-child {
  text-align: center;
}

.availability-table .overview-container {
  height: 96px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.availability-table td,
.availability-table th {
  padding: 8px 12px;
}

.no-listing-container {
  display: flex;
  justify-content: center;
  min-height: 350px;
  height: 60vh;
  margin-top: 114px;

  a {
    color: var(--availability-text-color);
  }
}

.no-listing-container_single-page {
  height: 0vh;
  margin-top: 0px;
  margin-bottom: 70px;
  min-height: 200px;
}

.no-listing {
  display: flex;
  text-align: center;
  align-items: center;
  flex-direction: column;
  max-width: 500px;
}

.no-listing-message {
  font-weight: 700;
  font-size: 18px;
  padding-top: 35px;
  padding-bottom: 10px;
}

.no-listing-sub-message {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.availability-table .overview-container .listing-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 155px;
}

.availability-table tbody tr td:last-child {
  padding-right: 12px;
}

.availability-table .overview-container img {
  height: 96px;
  width: 190px;
  min-width: 190px;
  object-fit: cover;
  border-radius: 3px;
}

.availability-table .space-condition,
.availability-table .lease-type {
  text-transform: capitalize;
}

.unclickable {
  pointer-events: none;
}

@media (max-width: 1150px) {
  .availability-table .lease-type {
    display: none;
  }
}

@media (max-width: 1280px) {
  .availability-list > li .bottom-row > .facts {
    flex-direction: column;
    gap: 0;
  }

  .availability-list > li .bottom-row {
    align-items: center;
    gap: 4px;
  }
}

@media (max-width: 830px) {
  .availability-table a.link-out {
    width: 90px;
  }
}

@media (max-width: 1280px) and (min-width: 850px) {
  .availability-list > li {
    width: calc((100% - 16px) / 2);
  }

  .availability-table .media-gallery {
    display: none;
  }

  .availability-table .overview-container img {
    width: 116px;
    min-width: 116px;
  }

  .availability-table td,
  .availability-table th {
    padding: 8px;
  }
}

@media (max-width: 849px) {
  .availability-list > li {
    width: 100%;
  }

  .availability-list.hidden {
    display: flex;
  }

  .availability-table {
    display: none;
  }
}
.carousel {
  height: 313px;
  position: relative;
  display: none;

  .media-container {
    height: 100%;
    width: 100%;
    background-color: black;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }

  .image-wrapper {
    width: 100%;

    img {
      height: 100%;
      width: 100%;
      object-fit: contain;
    }
  }

  .next-and-previous-buttons-container {
    gap: 20px;
    position: absolute;
    transform: translateY(50%);
    bottom: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    pointer-events: none;
  }

  .previous-button,
  .next-button {
    background-color: #fff;
    border: 1px solid #72777e;
    border-radius: 50%;
    cursor: pointer;
    height: 24px;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    pointer-events: auto;

    &:hover {
      background-color: #f2f2f2;
    }

    svg {
      height: 14px;
      width: 14px;
    }
  }

  .floor-plan-and-video-buttons-container {
    gap: 16px;
    position: absolute;
    bottom: 16px;
    right: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
  }

  .floor-plan-button,
  .video-button {
    background-color: #fff;
    border: 1px solid #0082bc;
    border-radius: 50%;
    cursor: pointer;
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    pointer-events: auto;
    transition: all 0.2s ease-in-out;

    &:hover {
      transform: scale(1.08);
    }

    svg {
      height: 14px;
      width: 14px;
      fill: #0082bc;
    }
  }

  .hidden {
    display: none !important;
  }
}

.fslightbox-container {
  .video-container {
    position: relative;
    height: 900px;
    width: 1600px;

    .video-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;

      img {
        cursor: default;
        position: absolute;
        inset: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: top;
      }

      .fake-play-button {
        position: relative;
        background-color: #00000080;
        border-radius: 50%;
        height: 80px;
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;

        &::before {
          content: '';
          position: absolute;
          box-sizing: border-box;
          border-style: solid;
          border-width: 18px 0px 18px 28px;
          border-color: transparent transparent transparent white;
          margin-left: 10px;
        }
      }

      svg {
        position: absolute;
        width: 90px;
        height: 90px;
        z-index: 1;
        animation: spin 2s infinite linear;
        fill: #0182bc;
      }

      &.hidden {
        display: none;
      }
    }
  }
}

.masonry-media {
  height: 343px;
  position: relative;

  .media-container {
    height: 343px;
    width: 100%;
    background-color: white;
    overflow: hidden;
    justify-content: center;
    gap: 12px;
    display: grid;
    grid-template-columns: calc(64% - 6px) calc(36% - 6px);
    grid-template-rows: 165px 166px;

    &.single {
      .photo-1 {
        grid-column: 1/3;
        grid-row: 1/3;
      }

      .image-wrapper:nth-child(n + 2) {
        display: none;
      }
    }

    &.double {
      grid-template-rows: 100%;

      .image-wrapper:nth-child(n + 3) {
        display: none;
      }
    }

    &.triple {
      .photo-1 {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
      }

      .photo-2 {
        grid-column: 2 / 2;
        grid-row: 1 / 2;
      }

      .photo-3 {
        grid-column: 2 / 2;
        grid-row: 2 / 2;
      }

      .image-wrapper:nth-child(n + 4) {
        display: none;
      }
    }

    @media (max-width: 1280px) {
      &.double,
      &.triple {
        .photo-1 {
          grid-column: 1 / -1;
          grid-row: 1 / -1;
        }

        .image-wrapper:nth-child(n + 2) {
          display: none;
        }
      }
    }
  }

  .image-wrapper:not(.no-hover-effect) {
    width: 100%;
    overflow: hidden;
    position: relative;

    .hover-icon {
      position: absolute;
      right: 50%;
      top: 50%;
      transform: translate(50%, -50%);
      height: 40px;
      width: 40px;
      background: rgba(0, 0, 0, 0.75);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: opacity 0.5s;
      opacity: 0;

      @media (max-width: 1280px) and (min-width: 850px) {
        transform: unset;
        right: 16px;
        bottom: 16px;
        top: unset;
        opacity: 1;
        height: 32px;
        width: 32px;

        svg {
          height: 16px;
          width: 16px;
        }
      }
    }

    &:hover {
      .hover-icon {
        opacity: 1;
      }

      img {
        transform: scale(1.1);
      }
    }

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      transition: transform 0.5s;
    }
  }

  .floor-plan-and-video-buttons-container {
    gap: 16px;
    position: absolute;
    bottom: 16px;
    right: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
  }

  .floor-plan-button,
  .video-button {
    background-color: #fff;
    border: 1px solid #0082bc;
    border-radius: 50%;
    cursor: pointer;
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    pointer-events: auto;
    transition: all 0.2s ease-in-out;

    &:hover {
      transform: scale(1.08);
    }

    svg {
      height: 14px;
      width: 14px;
      fill: #0082bc;
    }
  }
}

.fslightbox-container {
  .video-container {
    position: relative;
    height: 900px;
    width: 1600px;

    .video-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;

      img {
        cursor: default;
        position: absolute;
        inset: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: top;
      }

      .fake-play-button {
        position: relative;
        background-color: #00000080;
        border-radius: 50%;
        height: 80px;
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;

        &::before {
          content: '';
          position: absolute;
          box-sizing: border-box;
          border-style: solid;
          border-width: 18px 0px 18px 28px;
          border-color: transparent transparent transparent white;
          margin-left: 10px;
        }
      }

      svg {
        position: absolute;
        width: 90px;
        height: 90px;
        z-index: 1;
        animation: spin 2s infinite linear;
        fill: #0182bc;
      }

      &.hidden {
        display: none;
      }
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 850px) {
  .masonry-media {
    display: none;
  }

  .carousel {
    display: block;
  }
}
.generic-content-block .title-with-no-description {
  padding-bottom: 0;
}

.generic-content-block .image-and-text {
  display: flex;
  position: relative;
  flex-wrap: wrap;
}

.generic-content-block .image-and-text .text-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  padding: 56px 100px;
  max-width: 850px;
  margin-left: auto;
  overflow: hidden;
}

.generic-content-block .image-and-text .text-content.right-sided {
  margin-right: auto;
  margin-left: unset;
  padding: 56px 100px;
}

.generic-content-block .image-and-text .text-content .page-header {
  padding-top: 0;
}

.generic-content-block .image-and-text .text-content.no-title {
  padding-top: 32px;
}

.generic-content-block .image-and-text .text-content {
  min-height: 532px;
}

.generic-content-block .image-and-text .text-content .description {
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
}

.generic-content-block .description p,
.generic-content-block .page-header p {
  white-space: pre-wrap;
}

.generic-content-block .image-and-text .image-wrapper {
  width: 50%;
}

.generic-content-block .image-and-text .image-wrapper.left-sided {
  order: -1;
}

.generic-content-block .image-and-text .image-wrapper img {
  position: absolute;
  width: 50%;
  height: 100%;
  object-fit: cover;
}

.generic-content-block .image-and-text .image-wrapper.with-image-fit img {
  object-fit: contain;
}

.generic-content-block .image-only img {
  width: 100%;
  height: 532px;
  position: relative;
  object-fit: cover;
}

.generic-content-block .image-only.with-image-fit img {
  object-fit: contain;
}

.generic-content-block ul {
  list-style: inside disc;
}

.generic-content-block .description p:empty:before,
.generic-content-block .page-header p:empty:before {
  content: ' ';
  white-space: pre;
}

.generic-content-block .description ul p {
  display: inline;
}

.generic-content-block .description ul li {
  margin-left: 16px;
}

.generic-content-block .no-image {
  max-width: 1700px;
  margin: 0 auto;
  padding: 56px 100px;
}

.generic-content-block .text-and-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 200px;
}

.generic-content-block .vertical-alignment {
  align-items: center;
}

.generic-content-block .top-alignment {
  align-items: flex-start;
}

.generic-content-block .text-and-text .left-text {
  grid-column: 1 / span 1;
}

.generic-content-block .text-and-text .right-text {
  grid-column: 2 / span 1;
}

/* Mobile & tablet */
@media (max-width: 1280px) {
  .generic-content-block .image-and-text .text-content .description {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Tablet only */
@media (max-width: 1280px) and (min-width: 850px) {
  .generic-content-block .image-and-text .text-content {
    padding: 40px;
    min-height: 532px;
  }

  .generic-content-block .image-and-text .text-content.right-sided {
    padding: 32px 40px;
  }

  .generic-content-block .image-only img {
    height: 532px;
  }

  .generic-content-block .no-image {
    padding: 32px 40px;
  }

  .generic-content-block .text-and-text {
    column-gap: 80px;
  }
}

@media (max-width: 1000px) {
  .generic-content-block .image-and-text .text-content.with-image-fit {
    width: 100%;
    max-width: unset;
    min-height: unset;
    padding: 32px 40px;
  }

  .generic-content-block .image-and-text .image-wrapper.with-image-fit {
    padding-bottom: 32px;
    width: 100%;
  }

  .generic-content-block .image-and-text .image-wrapper.left-sided.with-image-fit {
    padding-top: 32px;
    padding-bottom: 0px;
    width: 100%;
  }

  .generic-content-block .image-and-text .image-wrapper.with-image-fit img {
    padding: 0px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    height: 500px;
  }

  .generic-content-block .image-only.with-image-fit img {
    height: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 600px) {
  .generic-content-block .image-and-text .image-wrapper.with-image-fit {
    height: 100%;
    padding-bottom: 0px;
  }

  .generic-content-block .image-and-text .image-wrapper.left-sided.with-image-fit {
    padding-top: 0px;
  }

  .generic-content-block .image-and-text .image-wrapper.with-image-fit img {
    height: 100%;
    width: 100%;
  }

  .generic-content-block .image-only.with-image-fit img {
    height: 100%;
    width: 100%;
  }
}

/* Mobile Only */
@media (max-width: 849px) {
  .generic-content-block .image-and-text .text-content {
    width: 100%;
    max-width: unset;
    min-height: unset;
    padding: 32px 24px !important;
  }

  .generic-content-block .image-and-text .image-wrapper {
    width: 100%;
  }

  .generic-content-block .image-and-text .image-wrapper img {
    position: relative;
    min-height: unset;
    height: 346px;
    width: 100%;
  }

  .generic-content-block .image-only img {
    height: 346px;
  }

  .generic-content-block .no-image {
    padding: 32px 24px;
  }

  .generic-content-block .text-and-text {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .generic-content-block .text-and-text .left-text {
    grid-column: 1 / span 1;
  }

  .generic-content-block .text-and-text .right-text {
    grid-column: 1 / span 1;
  }

  .generic-content-block .text-and-text-left-title-right-description {
    gap: 24px;
  }

  .generic-content-block .text-and-text-left-description-right-title {
    .right-text {
      order: 1;
    }
    .left-text {
      order: 2;
    }
    gap: 0px;
  }
}
/* Listing Details Modal */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  transition: opacity 0.5s ease;
  cursor: default;

  &.invisible {
    opacity: 0;
    pointer-events: none;
  }
}

.listing-details-modal {
  position: fixed;
  background: white;
  border-radius: 3px;
  border: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.9);
  width: calc(100vw - 48px);
  max-width: 1312px;
  height: calc(100% - 60px);
  max-height: 918px;
  z-index: -1;
  padding: 0;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  filter: blur(4px);
  .modal-body {
    transition: opacity 0.5s ease-in-out;
    opacity: 0.5;
  }

  &.no-animation {
    transition: none !important;
  }

  &[open] {
    z-index: 101;
    transform: translateX(-50%) translateY(-50%) scale(1);
    opacity: 1;
    pointer-events: all;
    filter: blur(0);

    .modal-body {
      opacity: 1;
    }
  }
}

.listing-details-modal .inquiry-button {
  display: none;
}

.listing-details-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  position: relative;
}

.listing-details-modal .modal-header .modal-title {
  margin-left: 16px;
  font-weight: 600;
  text-align: center;
  width: 100%;
}

.listing-details-modal .modal-header .modal-close {
  position: absolute;
  right: 0;
  margin-right: 16px;
  margin-bottom: 6px;
  height: 16px;
  width: 16px;
}

.listing-details-modal .modal-header .modal-close svg path {
  fill: black;
}

.listing-details-modal .modal-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.listing-details-modal .listing-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 16px 32px;
}

.listing-details-modal .listing-header .main-info {
  display: flex;
  justify-content: space-between;
}

.listing-details-modal .listing-header .listing-name-and-asking-rent {
  display: flex;
  align-items: center;

  .vertical-divider {
    margin: 0 12px;
    height: 24px;
    width: 1px;
    background: black;
  }

  .asking-rent-string {
    font-weight: 400;
  }
}

.listing-details-modal .listing-header .link-out a {
  font-size: 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  color: var(--availability-icon-and-link-color);
  gap: 5px;
  font-weight: 600;
}

.listing-details-modal .listing-header .link-out svg {
  fill: var(--availability-icon-and-link-color);
  height: 14px;
  width: 14px;
}

.listing-details-modal .facts {
  display: flex;
  gap: 56px;

  .iconable ul {
    display: flex;
    gap: 56px;

    .without-word {
      display: none;
    }
  }
}

.listing-details-modal .facts .attribute-name {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.listing-details-modal .facts .attribute-icon {
  display: none;
}

.listing-details-modal .facts .attribute-value {
  font-size: 14px;
}

.listing-details-modal .attribute-value:not(.no-text-transform) {
  text-transform: capitalize;
}

.listing-details-modal .main-modal-content {
  padding: 0 16px;
  display: grid;
  grid-template-columns: 67% 33%;
  flex: 1;
  min-height: 0;

  &.no-inquiry {
    margin-top: 32px;
    gap: 32px;
  }
}

.listing-details-modal .main-modal-content > .listing-section {
  border-right: 1px solid #cccccc;
}

.listing-details-modal .main-modal-content > li {
  padding: 16px;
  overflow-y: auto;
}

.listing-details-modal .main-modal-content .listing-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.listing-details-modal .listing-info .brochure {
  display: flex;
  gap: 3px;
  color: var(--availability-icon-and-link-color);
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  text-decoration: none;
}

.listing-details-modal .listing-info .brochure svg {
  fill: var(--availability-icon-and-link-color);
  height: 14px;
  width: 14px;
}

.listing-details-modal .listing-info .description {
  font-size: 14px;

  h3 {
    font-size: 18px;
    margin-bottom: 16px;
  }

  p:empty:before {
    content: ' ';
    white-space: pre;
  }
}

.listing-details-modal .listing-info .below-media {
  display: grid;
  grid-template-columns: 1fr 70px;

  .text {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

.listing-details-modal .listing-info .amenities-section {
  padding: 0;
  background: unset;
  color: unset;

  h3 {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .amenities {
    font-size: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;

    li:before {
      content: '•';
      margin-right: 8px;
    }
  }
}

.listing-details-modal .listing-info .media-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;

  a {
    display: flex;
    height: 32px;
    width: 32px;
    border: 1px solid var(--availability-icon-and-link-color);
    background: white;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    z-index: 2;

    &.enlarge-on-hover {
      transition: all 0.2s ease;

      &:hover {
        transform: scale(1.08);
      }
    }
  }

  svg {
    fill: var(--availability-icon-and-link-color);
    pointer-events: none;
  }
}

.modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  min-height: 48px;
  border-top: 1px solid #cccccc;

  .navigation-controls {
    font-size: 14px;
    display: flex;
    gap: 20px;

    .listing-index {
      min-width: 90px;
      text-align: center;
    }

    .previous-button,
    .next-button {
      background-color: #fff;
      border: 1px solid #72777e;
      border-radius: 50%;
      cursor: pointer;
      height: 24px;
      width: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      pointer-events: auto;

      &:hover {
        background-color: #f2f2f2;
      }

      &.next-button {
        padding-left: 2px;
      }

      &.previous-button {
        padding-right: 2px;
      }

      svg {
        height: 14px;
        width: 14px;
      }
    }
  }
}

/* Tablet */
@media (max-width: 1280px) and (min-width: 850px) {
  .listing-details-modal .main-modal-content {
    grid-template-columns: 60% 40%;
  }

  .listing-details-modal .facts .attribute-icon {
    display: block;
  }

  .listing-details-modal .facts .iconable {
    justify-content: flex-end;
    flex-grow: 2;

    ul {
      flex-direction: column-reverse;
      gap: 0px;
    }

    .capacity,
    .size-range {
      align-items: center;
      display: flex;
      flex-direction: row;
      align-self: flex-end;
      gap: 6px;

      .with-word {
        display: none;
      }

      .without-word {
        display: inline;
      }

      .attribute-name {
        display: none;
      }

      .attribute-value {
        color: #737373;
      }
    }
  }
}

/* Mobile */
@media (max-width: 849px) {
  .listing-details-modal {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .listing-details-modal .modal-header .modal-title {
    display: flex;
    flex-direction: column;
    text-align: unset;

    .separator {
      display: none;
    }
  }

  .listing-details-modal .listing-header {
    padding: 16px;
  }

  .listing-details-modal .facts {
    flex-wrap: wrap;
    gap: 0;
    justify-content: space-between;
  }

  .listing-details-modal .facts .attribute-icon {
    display: block;
  }

  .listing-details-modal .listing-header .main-info {
    flex-direction: column;
    border-bottom: 1px solid #cccccc;
    padding: 0 16px 12px 16px;
    margin: 0 -16px;

    .listing-name-and-asking-rent .text-size-subheader-24 {
      font-size: 20px;
    }

    .listing-name-and-asking-rent .asking-rent-string {
      font-size: 16px;
    }
  }

  .listing-details-modal .facts .iconable {
    margin-top: 6px;
    flex-basis: 100%;

    ul {
      flex-direction: row-reverse;
      gap: 12px;
      justify-content: flex-end;
    }

    .capacity,
    .size-range {
      align-items: center;
      display: flex;
      flex-direction: row;
      align-self: flex-end;
      gap: 6px;
    }

    ul {
      gap: 8px;

      .with-word {
        display: none;
      }

      .without-word {
        display: inline;
      }

      .attribute-name {
        display: none;
      }

      .attribute-value {
        color: #737373;
      }
    }
  }

  .listing-details-modal .main-modal-content {
    display: flex;
    flex-direction: column;
    min-height: unset;
    padding: 0;
  }

  .listing-details-modal .main-modal-content > .listing-section {
    border: 0;
  }

  .listing-details-modal .modal-body {
    overflow: auto;
  }

  .listing-details-modal .listing-info .below-media {
    grid-template-columns: 100%;
  }

  .listing-details-modal .listing-info .below-media .text,
  .listing-details-modal .listing-info .below-media .media-buttons {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
  }

  .listing-details-modal .listing-info .below-media .media-buttons {
    justify-content: flex-end;
  }

  .listing-details-modal .inquiry {
    border-top: 1px solid #cccccc;
  }

  .listing-details-modal .inquiry-button {
    display: block;
    background: var(--availability-icon-and-link-color);
    padding: 8px 16px;
    border-radius: 3px;
    color: white !important;
  }

  .listing-details-modal .link-out {
    display: flex;
    justify-content: space-between;
  }

  .listing-details-modal .listing-info .amenities-section {
    .amenities {
      grid-template-columns: 1fr;
    }
  }
}
.listing-inquiry {
  .inquiry-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 32px;
  }

  .inquiry-form-wrapper {
    display: grid;
    grid-template-columns: calc(50% - 8px) calc(50% - 8px);
    flex-wrap: wrap;
    gap: 16px;
  }

  .inquiry-field-group {
    display: flex;
    flex-direction: column;

    input {
      padding: 4px 6px;
      border: 1px solid #cccccc;
      font-size: 14px;
    }

    textarea {
      font-size: 14px;
    }

    label {
      font-size: 12px;
    }
  }

  .full-width-field {
    grid-column: 1 / -1;
  }

  @media (max-width: 849px) {
    .submit-inquiry-button {
      grid-column: 2 / 3;
    }
  }

  .right-aligned {
    justify-self: right;
  }

  .required-label {
    &::after {
      content: '*';
      color: #0082bc;
    }
  }

  .message-inquiry-field {
    resize: none;
    padding: 4px 6px;
    border: 1px solid #cccccc;
    white-space: pre-wrap;
    height: 145px;
  }

  .field-with-error {
    border: 1px solid #c7200a !important;
  }

  .field-error {
    color: #c7200a;
    font-size: 12px;
  }

  .inquiry-error-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .hidden {
    display: none;
  }

  .error-message {
    color: #c7200a;
    font-size: 12px;
  }

  .submit-inquiry-button-wrapper {
    display: flex;
    width: 100%;
    justify-content: end;
  }

  .submit-inquiry-button {
    background: var(--availability-button-color);
    color: var(--availability-button-text-color);
    padding: 8px 16px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    transform: scale(1.01);

    &:hover {
      transform: scale(1.04);
    }

    svg {
      width: 16px;
      height: 16px;
      fill: var(--availability-button-text-color) !important;
    }
  }

  .captcha-submit {
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 49px;
    align-items: flex-end;

    @media (max-width: 1280px) and (min-width: 850px) {
      grid-column: 1 / -1;
    }
  }

  .captcha-submit .recaptcha-field {
    width: 200px;
    height: 49px;
  }

  .recaptcha-field .g-recaptcha {
    transform: scale(0.685);
    transform-origin: 0 0;
  }
}

.listing-inquiry.hidden {
  display: none;
}

.listing-inquiry-success {
  height: 468px;
  display: flex;
  height: 468px;
  align-items: center;
  justify-content: center;

  .success-wrapper {
    height: fit-content;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .checkmark {
    svg {
      width: 24px;
      height: 24px;
    }

    border: 1px solid #000000;
    border-radius: 50%;
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .success-message {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
}

.listing-inquiry-success.hidden {
  display: none;
}

.no-inquiry-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  gap: 8px;

  .title {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
  }

  .what-to-do {
    text-align: center;
    width: 70%;
    font-size: 14px;

    a {
      color: var(--availability-icon-and-link-color);
    }
  }
}
.text-size-footer-12 {
  font-size: 12px;
  line-height: 16px;
  font-weight: normal;
}

.text-size-body-14 {
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
}

.text-size-body-16 {
  font-size: 16px;
  line-height: 24px;
  font-weight: normal;
}

.text-size-body-18 {
  font-size: 18px;
  line-height: 28px;
  font-weight: normal;
}

.text-size-subheader-24 {
  font-size: 24px;
  line-height: 32px;
  font-weight: normal;
}

.text-size-header-32 {
  font-size: 32px;
  line-height: 40px;
  font-weight: normal;
}

.text-size-header-40 {
  font-size: 40px;
  line-height: 56px;
  font-weight: normal;
}

.text-size-header-48 {
  font-size: 48px;
  line-height: 56px;
  font-weight: normal;
}

.text-size-header-56 {
  font-size: 56px;
  line-height: 64px;
  font-weight: normal;
}

.text-size-title-64 {
  font-size: 64px;
  line-height: 72px;
  font-weight: normal;
}

.text-size-title-72 {
  font-size: 72px;
  line-height: 80px;
  font-weight: normal;
}

.text-size-title-80 {
  font-size: 80px;
  line-height: 88px;
  font-weight: normal;
}

@media (max-width: 1280px) and (min-width: 850px) {
  .text-size-body-18 {
    font-size: 16px;
    line-height: 24px;
    font-weight: normal;
  }

  .text-size-header-32 {
    font-size: 24px;
    line-height: 32px;
    font-weight: normal;
  }

  .text-size-header-40 {
    font-size: 32px;
    line-height: 40px;
    font-weight: normal;
  }

  .text-size-header-48 {
    font-size: 40px;
    line-height: 56px;
    font-weight: normal;
  }

  .text-size-header-56 {
    font-size: 40px;
    line-height: 56px;
    font-weight: normal;
  }

  .text-size-title-80 {
    font-size: 72px;
    line-height: 80px;
    font-weight: normal;
  }
}

@media (max-width: 849px) {
  .text-size-title-80 {
    font-size: 40px;
    line-height: 56px;
    font-weight: normal;
  }

  .text-size-title-72 {
    font-size: 40px;
    line-height: 56px;
    font-weight: normal;
  }

  .text-size-title-64 {
    font-size: 40px;
    line-height: 56px;
    font-weight: normal;
  }

  .text-size-header-56 {
    font-size: 32px;
    line-height: 40px;
    font-weight: normal;
  }

  .text-size-header-48 {
    font-size: 32px;
    line-height: 40px;
    font-weight: normal;
  }

  .text-size-header-40 {
    font-size: 32px;
    line-height: 40px;
    font-weight: normal;
  }

  .text-size-header-32 {
    font-size: 24px;
    line-height: 32px;
    font-weight: normal;
  }

  .text-size-body-18 {
    font-size: 16px;
    line-height: 24px;
    font-weight: normal;
  }
}
.floating-brochure {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 4;
}

.floating-brochure--anchored {
  position: absolute;
}

.floating-brochure--anchored--section-framing {
  position: absolute;
  bottom: -16px;
  right: -16px;
}

.brochure-link {
  text-decoration: none;
  background-color: var(--brochure-button-color);
  padding: 8px 16px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  height: 50px;
  width: 130px;
  box-shadow: 1px 1px 8px 0px rgb(0, 0, 0, 0.4);
}

.floating-brochure > a > span > svg {
  fill: var(--brochure-button-text-color) !important;
}

.floating-brochure > a > .brochure-text {
  color: var(--brochure-button-text-color);
}

.hidden-brochure {
  opacity: 0;
}

.animate-out {
  animation: fadeOut 0.5s ease-in-out;
}

.animate-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Tablet only */
@media (max-width: 1280px) and (min-width: 850px) {
  .floating-brochure--anchored--section-framing {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

/* Mobile Only */
@media (max-width: 849px) {
  .floating-brochure--anchored--section-framing {
    bottom: 8px;
    right: 16px;
  }
}

/* Small Mobile Only */
@media (max-width: 599px) {
  .brochure-link {
    border-radius: 50% !important;
    height: 45px !important;
    width: 45px !important;
  }

  .brochure-text {
    display: none;
  }

  .brochure-icon {
    transform: translateX(-2px);
    min-width: 20px;
  }
}
/* ...







*/

/*
Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html,
body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}

button {
  background: transparent;
  border: 0;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
#root,
#__next {
  isolation: isolate;
}
ul {
  padding: 0;
  list-style: none;
}

body {
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
}

b,
strong {
  font-weight: bolder;
}

body.no-scroll {
  overflow: hidden;
}

.centered {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

.non-generic-centered-content-block {
  max-width: 1700px;
  width: 100%;
  margin: 0 auto;
  padding: 56px 100px 56px 100px;
}

.non-generic-centered-content-block .page-header p {
  white-space: pre-wrap;
}

.non-generic-centered-content-block .page-header p:empty:before {
  content: ' ';
  white-space: pre;
}

.non-generic-centered-content-block .page-header ul p {
  display: inline;
}

.non-generic-centered-content-block .page-header ul li {
  margin-left: 16px;
}

.non-generic-centered-content-block.no-title {
  padding: 56px 100px;
}

.hide {
  display: none;
}

.header {
  background: var(--header-background-color);
  color: var(--header-text-color);
  border-bottom: 1px solid var(--header-border-color);
  height: 60px;
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 11;
}

.static-home-link svg,
.hamburger svg,
.close-mobile-nav svg {
  fill: var(--header-text-color);
}

.nav {
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
  width: 100%;
  font-size: 16px;
  line-height: 32px;
}

.content-block-anchor {
  scroll-margin-top: 140px;
}

.section-anchor {
  /* no longer used when market-office.flexible-layouts-on-microsite is on */
  scroll-margin-top: 80px;
}

.nav .top-nav-logo {
  height: 35px;
}

.nav .links {
  list-style: none;
  display: flex;
  gap: 40px;
  align-items: center;
}

.nav .links.features .features,
.nav .links.availability .availability,
.nav .links.gallery .gallery,
.nav .links.contact .contact,
.nav .links.home .home {
  font-weight: 700;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--header-text-color);
    z-index: 4;
  }
}

.nav .links a {
  color: var(--header-text-color);
  text-decoration: none;
}

.hamburger {
  border: 0;
  padding: 20px 24px;
  margin-right: -24px;
  display: none;
}

.nav .links .home,
.nav .links .close-mobile-nav {
  display: none;
}

.nav-mask {
  display: none;
  transition: background 0.3s ease;
  background: rgba(0, 0, 0, 0);
}

.main-content {
  position: relative;
  min-height: calc(100vh - 123px); /* fallback for browsers that do not support svh */
  min-height: calc(100svh - 123px);
  margin-top: 60px;
}

.footer {
  min-height: 75px;
  padding: 24px 0;
  background: var(--footer-background-color);
  color: var(--footer-text-color);
  border-top: 1px solid var(--footer-border-color);
  display: flex;
  z-index: 10;
  position: relative;
  font-size: 12px;
}

.footer .footer-logo {
  height: 30px;
}

.footer .inactive-link {
  pointer-events: none;
  cursor: default;
}

.footer .content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 24px;
  width: 100%;
  gap: 24px;
}

.footer .left-side,
.footer .right-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer .socials {
  list-style: none;
  display: flex;
  gap: 20px;
  height: 38px;
  align-items: center;
  justify-content: flex-end;
}

.footer .socials li {
  opacity: 50%;
}

.footer .socials svg path {
  fill: var(--footer-text-color);
}

.footer .pre-text p:empty:before {
  content: ' ';
  white-space: pre;
}

.footer .pre-text ul {
  list-style: disc;
}

.footer .right-side a,
.footer .left-side a,
.footer .left-side-only a {
  color: var(--footer-text-color);
}

.footer .full-width {
  grid-column: 1 / 3;
}

.footer .right-side .pre-text {
  text-align: right;
}

.page-header {
  font-weight: unset;
  font-size: 32px;
  padding-bottom: 32px;

  a {
    color: inherit;
  }
}

.generic-content-block .title-with-no-description {
  padding-bottom: 0;
}

.main-content.has-section-framing {
  border-color: var(--section-framing-color) !important;
  border-style: solid;
  border-width: 32px;
  border-top: none;
}

.single-page {
  scroll-margin-top: 60px;
}

.page-holder.section-framing .section-anchor {
  border-top-color: var(--section-framing-color) !important;
  border-top-style: solid;
  border-top-width: 32px;
}

.page-holder.section-framing.gallery .section-anchor {
  background: var(--gallery-background-color);
}

.page-holder.section-framing.contacts .section-anchor {
  background: var(--contacts-background-color);
}

.page-holder.section-framing.availability .section-anchor {
  background: var(--availability-background-color);
}

.standard-button {
  text-decoration: none;
  background-color: var(--home-building-info-button-color);
  color: var(--home-building-info-button-text-color);
  padding: 8px 16px;
  border-radius: 10px;
}

.dark-button-interactions:hover {
  background-image: linear-gradient(rgb(0 0 0/15%) 0 0);
}

.dark-button-interactions:focus {
  background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
}

.light-button-interactions:hover {
  background-image: linear-gradient(rgb(255 255 255/15%) 0 0);
}

.light-button-interactions:focus {
  background-image: linear-gradient(rgb(255 255 255/10%) 0 0);
}

/* Home page */

.home .main-image {
  position: relative;
  width: 100%;
  min-height: 500px;
  /* height calculation: 60px for top nav and 30px to preview next content block  */
  height: calc(100vh - 60px); /* fallback for browsers that do not support svh */
  height: calc(100svh - 60px);
}

.home.section-framing .main-image {
  height: calc(100vh - 60px - 30px); /* fallback for browsers that do not support svh */
  height: calc(100svh - 60px - 30px);
}

.home .main-image > img,
.home .main-image > video {
  object-fit: cover;
  height: 100%;
  width: 100%;
  position: absolute;
}

.home .background-overlay {
  position: absolute;
  opacity: 0.5;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.home .background-overlay.fade_left_to_right {
  background: linear-gradient(90deg, var(--home-hero-background-overlay-color), transparent);
  right: 50%;
}

.home .background-overlay.fade_right_to_left {
  background: linear-gradient(270deg, var(--home-hero-background-overlay-color), transparent);
  left: 50%;
}

.home .background-overlay.fade_bottom_to_top {
  background: linear-gradient(0deg, var(--home-hero-background-overlay-color), transparent);
  top: 50%;
}

.home .background-overlay.fade_top_to_bottom {
  background: linear-gradient(180deg, var(--home-hero-background-overlay-color), transparent);
  bottom: 50%;
}

.home .property-name-div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  padding: 32px;
  max-width: 1000px;
  max-height: 350px;
  background: var(--home-address-background-color);
  backdrop-filter: blur(var(--home-address-blur-amount));
  -webkit-backdrop-filter: blur(var(--home-address-blur-amount));
  z-index: 2;
}

.home .text-container {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 24px;
}

.home .text-container .custom-text p {
  white-space: pre-wrap;
}

.home .text-container p:empty:before {
  content: ' ';
  white-space: pre;
}

.home .text-container.x-left {
  justify-content: flex-start;
}

.home .text-container.x-right {
  justify-content: flex-end;
}

.home .text-container.x-middle {
  justify-content: center;
}

.home .text-container.y-top {
  align-items: flex-start;
}

.home .text-container.y-middle {
  align-items: center;
}

.home .text-container.y-bottom {
  align-items: flex-end;
}

.home .property-name-div.video {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: unset;
}

.home .inner-property-name-div {
  margin-left: 32px;
}

.home .overview-section {
  background: var(--home-building-info-background-color);
  color: var(--home-building-info-text-color);
}

.home .building-html-description a {
  color: var(--home-building-info-text-color);
}

.home .building-html-description p:empty:before {
  content: ' ';
  white-space: pre;
}

.home .building-html-description ul {
  list-style: disc inside;
}

.home .building-html-description ul li {
  margin-left: 16px;
}

.home .building-html-description ul p {
  display: inline;
}

.home .brochures {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.home .brochures .brochure-wrapper {
  text-align: right;
}

.home .brochures .brochure .icon {
  margin-right: 4px;
}

.home .brochures .brochure .name {
  text-decoration: underline;
}

.home .building-overview-content {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  white-space: pre-wrap;
}

.home .building-overview-wrapper {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  column-gap: 150px;
}

.home .building-overview-wrapper-description-left-facts-column-count-2 {
  grid-template-columns: 50% auto;
}

.home .building-overview-wrapper-description-right-facts-column-count-2 {
  grid-template-columns: 43% auto;
}

.home .building-overview-no-facts {
  column-gap: 0;
}

.home .building-overview-header {
  grid-column: 2 / span 3;
}

.home .building-overview-header p:empty:before {
  content: ' ';
  white-space: pre;
}

.home .building-overview-header-left {
  grid-column: 1 / span 3;
}

.home .building-description-right {
  order: 2;
  grid-column: 2 / span 3;
}

.home .building-description-left {
  grid-column: 1;
}

.home .building-facts {
  border-left: 1px solid var(--home-building-info-text-color);
  padding: 0px 0 0px 24px;
  color: var(--home-building-info-text-color);
  box-sizing: border-box;
  z-index: 2;
  position: relative;
  height: fit-content;
  grid-column: 2 / span 2; /* controls how the building facts appear within the building overview grid */
  display: grid; /* controls how the building facts themselves appear */
  grid-template-columns: auto; /* controls how the building facts themselves appear */
  gap: 32px; /* controls how the building facts themselves appear */
}

.home .building-facts-left {
  grid-column: 1;
}

.home .building-facts-small {
  gap: 24px;
}

.home .building-facts-two-columns {
  grid-template-columns: 1fr 1fr;
}

.home .building-fact-title {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home .building-fact-title-small {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home .building-fact {
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  width: fit-content;
  white-space: nowrap;
}

.home .building-fact-small {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  width: fit-content;
  white-space: nowrap;
}

.home .brochures-title {
  margin-top: 40px;
  margin-bottom: 8px;
}

.home .map-view {
  background: var(--home-google-map-section-background-color);
  width: 100%;
}

.home .map-view .page-header {
  color: var(--home-google-map-section-text-color);
}

.home .iframe-map {
  height: 511px;
  width: 100%;
  border: 1px solid #dddddd;
  border-radius: 3px;
  background-color: #e7e3e0;
}

.home .secondary-name {
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  line-height: 39px;
  color: var(--home-address-text-color);
  margin-bottom: 4px;
}

.home .primary-name {
  font-style: normal;
  font-weight: 700;
  font-size: 64px;
  line-height: 77px;
  text-transform: uppercase;
  color: var(--home-address-text-color);
  mix-blend-mode: normal;
  margin-bottom: 12px;
}

.home .address {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 19px;
  color: var(--home-address-text-color);
}

.home .custom-text {
  color: var(--home-address-text-color);
}

.home .address-line-1 {
  color: var(--home-address-text-color);
}

.home .address-line-2 {
  text-transform: uppercase;
  color: var(--home-address-text-color);
  mix-blend-mode: normal;
}

.home .address-line-3 {
  color: var(--home-address-text-color);
}

.home .copy-logo {
  width: 20px;
}

.home .brochure {
  text-decoration: none;
  color: var(--home-building-info-text-color);
  text-transform: none;
  font-size: 18px;
}

.home .brochure > .icon > svg {
  display: inline;
  fill: var(--home-building-info-text-color);
  transform: translateY(3px);
  min-width: 20px;
}

/* Availabilities page */

.main-content.availability {
  background: var(--availability-background-color);
  color: var(--availability-text-color);
}

/* Gallery page */

.main-content.gallery,
.gallery-background {
  background-color: var(--gallery-background-color);
  color: var(--gallery-text-color);
}

.main-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}

.main-gallery li:first-child {
  grid-column-start: 1;
  grid-column-end: 4;
}

.main-gallery.reveal-content-below li:first-child {
  /* max-height = screen_height - (space_above_video + space_below_video) */
  max-height: calc(100vh - (196px + 64px));
  min-height: 500px;
}

.main-gallery > li > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.main-gallery li:nth-child(n + 8) {
  display: none;
}

.main-gallery li:nth-child(7) > a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-gallery li:nth-child(7) > a:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  opacity: 35%;
}

.main-gallery li:nth-child(7):not(:last-child) > a:after {
  content: 'Show all';
  color: white;
  position: absolute;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  top: calc(50% - 12px);
  left: calc(50% - 30px);
}

.main-gallery li:nth-child(6):last-child,
.main-gallery li:nth-child(5):last-child,
.main-gallery li:nth-child(5):nth-last-child(2) {
  display: none;
}

.main-gallery li:nth-child(4) > a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-gallery li:nth-child(4) > a:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  opacity: 35%;
}

.main-gallery li:nth-child(4):not(:last-child) > a:after {
  content: 'Show all';
  color: white;
  position: absolute;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  top: calc(50% - 12px);
  left: calc(50% - 30px);
}

.main-gallery li:nth-child(4):nth-last-child(n + 4) > a:after {
  display: none;
}

.tour-embed {
  position: relative;
}

.embed-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  opacity: 35%;
}

.three-d-tour-icon {
  position: absolute;
  top: calc(50% - (58px / 2));
  left: calc(50% - (34px / 2));
}

.gallery-empty-state {
  width: 100%;
  height: auto;
}

/* Contact Page */

.main-content.contact,
.contact-content,
.contacts-background {
  background-color: var(--contacts-background-color);
  color: var(--contacts-text-color);
}

.contact-list > ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.contact-card {
  color: black;
  display: flex;
  gap: 16px;
  background: #ffffff;
  padding: 24px;
  z-index: 3;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--contacts-border-color);
}

.contact-card > .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 1;
  overflow: hidden;
}

.avatar {
  position: relative;
  display: flex;
  flex-basis: 120px;
  max-width: 100px;
  min-width: 100px;
  aspect-ratio: 1 / 1;
}

.avatar > .initials {
  position: absolute;
  background: #000000;
  color: #ffffff;
  display: flex;
  width: 100%;
  max-height: 120px;
  aspect-ratio: 1 / 1;
  align-self: center;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  border: 1px solid #ffffff;
}

.avatar > img {
  margin: 0;
  width: 100%;
  height: 100%;
  max-height: 100px;
  object-fit: cover;
  align-self: center;
  background-color: white;
  z-index: 1;
}

.avatar > img,
.avatar > .initials {
  border-radius: 50%;
}

.contact-card > .info > .name {
  font-size: 20px;
  font-weight: 700;
}

.contact-card > .info > .title,
.contact-card > .info > .employer {
  font-size: 16px;
}

.contact-card > .info > .email,
.contact-card > .info > .phone {
  display: flex;
  align-items: center;
  gap: 4px;
}

.contact-card > .info > .email {
  color: var(--home-building-info-button-color);
}

.contact-card > .info > .email > svg {
  min-width: 16px;
  margin-top: 2px;
}

.contact-card > .info > .email > span {
  overflow: hidden;
  overflow-wrap: break-word;
  line-height: 16px;
}

.contact-list {
  position: relative;
}

.contact-card > .info > .broker-license-number {
  font-size: 12px;
  line-height: 24px;
  color: #737373;
}

/* Feature page */

.amenities-background {
  background: var(--amenities-background-color);
  color: var(--amenities-text-color);
}

.section-title {
  font-style: normal;
  font-size: 32px;
  line-height: 38px;
}

.certifications-background {
  background: var(--certifications-background-color);
  color: var(--certifications-text-color);
}

.certificate-section {
  display: flex;
  gap: 24px;
  justify-content: center;
}

.certificate-wrapper {
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--certifications-border-color);
  border-radius: 3px;
  width: 424px;
}

.certificate-content {
  margin: 36px 24px 32px 24px;
}

.certificate-header-logo {
  margin: auto;
  margin-bottom: 16px;
  width: 100px;
  height: 100px;
}

.certificate-name {
  color: #000000;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 29px;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: capitalize;
  margin-bottom: 12px;
}

.certificate-footer {
  color: #000000;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
}

.amenities-section {
  background: var(--amenities-background-color);
  border-radius: 3px;
  color: var(--amenities-text-color);
  padding: 32px;
}

.amenities-section-contents {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.amenities-option {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 32px;
}

.zoomed-in {
  transform: scale(1.4);
}

.main-content.not_found,
.main-content.coming_soon {
  background: white !important;
  border-color: white !important;
}

.not-found-wrapper,
.coming-soon-wrapper {
  display: flex;
  justify-content: center;
  padding: 100px 16px;
}

.not-found-wrapper.fullscreen,
.coming-soon-wrapper.fullscreen {
  position: fixed;
  inset: 0;
  align-items: center;
}

.not-found-wrapper > img {
  width: 572px;
  height: 579px;
  object-fit: contain;
}

.coming-soon-wrapper > img {
  width: 538px;
  height: 556px;
  object-fit: contain;
}

/* Mobile & tablet */
@media (max-width: 1280px) {
  .hamburger {
    display: block;
  }

  .nav {
    font-size: 16px;
  }

  .nav .links {
    position: absolute;
    background: var(--header-background-color);
    right: 0;
    bottom: 0;
    top: 0;
    height: 100vh;
    flex-direction: column;
    align-items: flex-end;
    z-index: 4;
    left: 100px;
    /* transition: transform 0.3s ease; */
    transform: translateX(calc(100vw - 100px));
    padding-top: 20px;
    gap: 24px;
  }

  .nav .links.active {
    transform: translateX(0);
  }

  .nav .links li a,
  .nav .links li button {
    padding: 0 20px;
  }

  .nav .links .home,
  .nav .links .close-mobile-nav {
    display: block;
  }

  .nav-mask.active {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
    background: rgba(0, 0, 0, 0.5);
  }

  .static-home-link {
    display: flex;
    align-items: center;
  }

  .nav .links.features .features::after,
  .nav .links.availability .availability::after,
  .nav .links.gallery .gallery::after,
  .nav .links.contact .contact::after,
  .nav .links.home .home::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 20px;
    left: 20px;
  }

  .home .building-overview-content {
    font-size: 16px;
  }

  .home .building-overview-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .home .building-overview-header {
    /* negate the extra spacing that the grid layout adds */
    margin-bottom: -32px;
  }

  .home .building-overview-header-right {
    order: 2;
  }

  .home .building-facts {
    border-left: 0;
    border-top: 1px solid var(--home-building-info-text-color);
    padding: 32px 0 0 0;
    max-height: 241px;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 25%;
  }

  .home .building-facts-left {
    border-top: 0;
    border-bottom: 1px solid var(--home-building-info-text-color);
    padding: 0 0 32px 0;
  }

  .home .building-fact {
    font-size: 32px;
  }

  .page-header {
    padding-bottom: 24px;
    font-size: 24px;
  }

  .amenities-option {
    font-size: 16px;
  }

  .contact-list {
    background: var(--contacts-background-color);
  }

  .amenities-section-contents {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1320px) and (min-width: 600px) {
  .contact-list > ul {
    grid-template-columns: 1fr 1fr;
  }
}

/* Small tablet fixes */
@media (max-width: 830px) {
  .extraneous {
    display: none;
  }
}

@media (max-width: 1280px) and (min-width: 1174px) {
  .main-gallery.reveal-content-below li:first-child {
    /* max-height = screen_height - (space_above_video + space_below_video) */
    max-height: calc(100vh - (152px + 64px));
    min-height: 320px;
  }
}

@media (max-width: 1173px) {
  .main-gallery.reveal-content-below li:first-child {
    max-height: unset;
    min-height: unset;
  }
}

/* Tablet only */
@media (max-width: 1280px) and (min-width: 850px) {
  .nav .links {
    left: 500px;
    transform: translateX(calc(100vw - 500px));
  }

  .non-generic-centered-content-block {
    padding: 32px 40px;
  }

  .non-generic-centered-content-block.no-title {
    padding: 32px 24px;
  }

  .home .property-name-div {
    max-width: 700px;
  }

  .home .main-image {
    min-height: 500px;
    height: calc(100vh - 60px); /* fallback for browsers that do not support svh */
    height: calc(100svh - 60px);
  }

  .home.has-section-framing .main-image {
    height: calc(100vh - 60px - 16px); /* fallback for browsers that do not support svh */
    height: calc(100svh - 60px - 16px);
  }

  .home .main-div {
    gap: 80px;
  }

  .main-content.has-section-framing,
  .page-holder.section-framing .section-anchor {
    border-width: 16px;
  }
}

/* Mobile Only */
@media (max-width: 849px) {
  .page-holder.section-framing .section-anchor {
    margin: 0;
    width: 100%;
  }

  .non-generic-centered-content-block {
    padding: 32px 24px;
  }

  .non-generic-centered-content-block.no-title {
    padding: 32px 24px;
  }

  .nav {
    padding: 0 16px;
  }

  .centered {
    padding: 0 16px;
  }

  .footer {
    min-height: unset;
  }

  .footer > .content {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .footer .right-side .pre-text {
    text-align: left;
  }

  .footer .socials {
    justify-content: flex-start;
  }

  .home .main-image {
    min-height: 300px;
    height: calc(100vh - 60px); /* fallback for browsers that do not support svh */
    height: calc(100svh - 60px);
  }

  .home .property-name-div {
    max-width: 500px;
    padding: 24px;
  }

  .home .secondary-name {
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 8px;
  }

  .home .primary-name {
    font-size: 32px;
    line-height: 48px;
    margin-bottom: 8px;
  }

  .home .address {
    font-size: 16px;
  }

  .home .overview-section .main-div {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    gap: 32px;
  }

  .home > .text-container {
    position: static;
    transform: unset;
  }

  .home .building-overview-content {
    font-size: 16px;
  }

  .home .building-info-section {
    max-width: 500px;
  }

  .certificate-wrapper {
    width: 100%;
    min-height: unset;
  }

  .certificate-header-logo {
    margin-bottom: 28px;
    width: 100px;
    height: 100px;
  }

  .certificate-name {
    font-size: 20px;
    line-height: 22px;
    margin-bottom: 12px;
  }

  .certificate-footer {
    font-size: 16px;
    line-height: 28px;
  }

  .amenities-section {
    padding: 32px 0;
  }

  .section-title {
    font-size: 24px;
    line-height: 28px;
  }

  .amenities-section-contents {
    gap: 16px;
  }

  .main-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .main-gallery li:first-child {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .contact-card {
    padding: 24px 16px;
    flex-direction: column;
    gap: 8px;
  }

  .avatar {
    align-items: center;
    flex-basis: 70px;
    max-width: 70px;
    min-width: 70px;
  }

  .avatar > img,
  .avatar > .initials {
    max-height: 70px;
  }

  .avatar > .initials {
    font-size: 20px;
  }

  .certificate-section {
    flex-wrap: wrap;
  }

  .home.section-framing .main-image {
    height: calc(100vh - 60px - 8px); /* fallback for browsers that do not support svh */
    height: calc(100svh - 60px - 8px);
  }

  .main-content.has-section-framing {
    border-width: 0;
    border-bottom-width: 8px;
  }

  .page-holder.section-framing .section-anchor {
    border-width: 8px;

    &#header-section {
      border-top-width: 0;
    }
  }
}

@media (max-width: 599px) {
  .contact-list > ul {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .home .building-facts {
    grid-template-columns: unset;
    max-height: unset;
  }

  .home .building-facts-two-columns {
    grid-template-columns: none;
  }
}

@media (min-width: 1530px) {
  .home .building-facts-two-columns {
    max-width: 508px;
  }
}

/* Widescreen Only */
@media (min-width: 1919px) {
  .footer .full-width {
    width: 75%;
  }
}