/* Borrar después de ver DEMO */
article.center {
  text-align: center;
}

header.center {
  text-align: center;
}

[class^="example-"],
[class*=" example-"] {
  margin: 0 0 6rem;
}

h1 {
  font-size: 4em;
  margin: 5rem 0;
}

h2 {
  font-size: 3em;
  margin: 0 0 2rem;
}

p {
  font-size: 1.5em;
  line-height: 1.4em;
  margin: 0 0;
}

/* --- */

/* FONTS
Listas fuentes para uso
--- */

/* @group SHARED STRUCTURES AND STYLES
------------------------------------ */
html,
body {
  overscroll-behavior: unset;
}

#wrapper {
  width: 100%;
}

a,
button {
  cursor: pointer;
  -webkit-transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, -webkit-transform 0.3s linear;
  -moz-transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, -moz-transform 0.3s linear;
  -ms-transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, transform 0.3s linear;
  -o-transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, transform 0.3s linear;
  transition: color 0.27s linear, background 0.27s linear, border-color 0.27s linear, opacity 0.3s linear, visibility 0.3s linear, box-shadow 0.3s linear, transform 0.3s linear;
}

.video-box,
.img-box {
  overflow: hidden;
  position: relative;
}

.img-box>img {
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100% !important;
}

.img-box video {
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100% !important;
}

@supports(object-fit: cover) {
  .img-box>img {
    height: 100% !important;
  }
}

.outerAbsolute {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 3;
}

.outerAbsolute .row {
  height: 100%;
}

.outerAbsolute a,
.outerAbsolute .box {
  pointer-events: all;
}

.splide.is-focus-in .splide__arrow:focus,
.splide__arrows button:focus-visible {
  outline: none !important;
}

.splide__arrows button:hover {
  border-color: var(--olive) !important;
}

.splide__arrows button:hover i {
  color: var(--olive);
}

@media only screen and (min-width : 0) and (max-width : 960px) {
  .page-header {
    margin-top: 6.5rem;
    padding-top: 4rem !important;
  }

  .home .page-header {
    padding-top: 0 !important;
  }
}

/* Overlay popup
----------------------*/
@media only screen and (min-width : 961px) {
  .home #wrapper {
    position: relative;
  }

  .home #wrapper::before {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--black);
    opacity: 0;
    transition: opacity .3s linear;
  }

  .home.open-floorplan #wrapper::before,
  .home.popup-active #wrapper::before {
    opacity: .45;
    z-index: 1;
  }

  [data-page] {
    min-height: 100%;
    position: relative;
  }
}

/* General Text
----------------------*/
li,
p {
  font: var(--body-copy-mobile);
  letter-spacing: var(--body-copy-mobile-letterspacing);
}

@media only screen and (min-width : 961px) {

  li,
  p {
    font: var(--body-copy);
    letter-spacing: var(--body-copy-letterspacing);
  }
}

@media only screen and (min-width : 961px) and (max-width : 1440px) {}

@media only screen and (min-width : 0) and (max-width : 960px) {}

/* Animations
----------------------*/
@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes grow {
  0% {
    heigth: 0;
  }

  100% {
    height: 100%;
  }
}

@keyframes fadeReverse {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeDown {
  0% {
    translate: 0 -2rem 0;
    opacity: 0;
  }

  100% {
    translate: 0 0 0;
    opacity: 1;
  }
}

@keyframes fadeUp {
  0% {
    translate: 0 5rem 0;
    opacity: 0;
  }

  100% {
    translate: 0 0 0;
    opacity: 1;
  }
}

@keyframes fadeScaleFull {
  0% {
    scale: 0;
    opacity: 0;
  }

  100% {
    scale: 1;
    opacity: 1;
  }
}

@keyframes fadeScale {
  0% {
    scale: .5;
    opacity: 0;
  }

  100% {
    scale: 1;
    opacity: 1;
  }
}

@keyframes fadeScaleReverse {
  0% {
    scale: 1.5;
    opacity: 0;
  }

  100% {
    scale: 1;
    opacity: 1;
  }
}

@keyframes fadeScaleDown {
  0% {
    scale: 1.2;
    opacity: 0;
  }

  100% {
    scale: 1;
    opacity: 1;
  }
}

@keyframes ScaleDown {
  0% {
    scale: 1.2;
  }

  100% {
    scale: 1;
  }
}

@keyframes fadeLeft {
  0% {
    translate: -5rem 0 0;
    opacity: 0;
  }

  100% {
    translate: 0 0 0;
    opacity: 1;
  }
}

@keyframes fadeRight {
  0% {
    translate: 5rem 0 0;
    opacity: 0;
  }

  100% {
    translate: 0 0 0;
    opacity: 1;
  }
}

@keyframes toLeft {
  0% {
    translate: 80% 0 0;
    rotate: -2.5deg;
  }

  100% {
    translate: 0 0 0;
    rotate: 0deg;
  }
}

@keyframes toRight {
  0% {
    translate: -80% 0 0;
    rotate: 2.5deg;
  }

  100% {
    translate: 0 0 0;
    rotate: 0deg;
  }
}

@keyframes menuDown {
  0% {
    translate: 0 -7.5rem 0;
  }

  100% {
    translate: 0 0 0;
  }
}

@keyframes textUp {
  0% {
    translate: 0 2rem 0;
    opacity: 0;
  }

  100% {
    translate: 0 0 0;
    opacity: 1;
  }
}

@keyframes navDown {
  0% {
    translate: 0 -2rem 0;
  }

  100% {
    translate: 0 0 0;
  }
}

@keyframes fullDown {
  0% {
    translate: 0 -100% 0;
  }

  100% {
    translate: 0 0 0;
  }
}

@keyframes fullUp {
  0% {
    translate: 0 100% 0;
  }

  100% {
    translate: 0 0 0;
  }
}

@keyframes fullUpOp {
  0% {
    translate: 0 100% 0;
    opacity: 0;
  }

  100% {
    translate: 0 0 0;
    opacity: 1;
  }
}

@keyframes fullLeft {
  0% {
    translate: -100% 0 0;
    opacity: 0;
  }

  100% {
    translate: 0 0 0;
    opacity: 1;
  }
}

@keyframes fullRight {
  0% {
    translate: 100% 0 0;
    opacity: 0;
  }

  100% {
    translate: 0 0 0;
    opacity: 1;
  }
}

@-webkit-keyframes hvr-icon-hang {
  0% {
    translate: 0 .6rem 0;
  }

  50% {
    translate: 0 .2rem 0;
  }

  100% {
    translate: 0 .6rem 0;
  }
}

@-webkit-keyframes hvr-icon-hang-sink {
  100% {
    translate: 0 .6rem 0;
  }
}

@keyframes toTopFromBottom {
  49% {
    translate: 0 -100% 0;
  }

  50% {
    opacity: 0;
    translate: 0 100% 0;
  }

  51% {
    opacity: 1;
  }
}

@keyframes toBottomFromTop {
  49% {
    translate: 0 100% 0;
  }

  50% {
    opacity: 0;
    translate: 0 -100% 0;
  }

  51% {
    opacity: 1;
  }
}

@keyframes toRightFromLeft {
  49% {
    translate: 100% 0 0;
  }

  50% {
    opacity: 0;
    translate: -100% 0 0;
  }

  51% {
    opacity: 1;
  }
}

@keyframes toLeftFromRight {
  49% {
    translate: -100% 0 0;
  }

  50% {
    opacity: 0;
    translate: 100% 0 0;
  }

  51% {
    opacity: 1;
  }
}

@keyframes openDraw {
  0% {
    max-height: 0;
  }

  100% {
    max-height: 999vh;
  }
}

@keyframes closeDraw {
  0% {
    max-height: 999vh;
  }

  100% {
    max-height: 0;
  }
}

@keyframes fadeRotate {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    rotate: 720deg;
  }
}

@keyframes circleSVGnoScale {
  0% {
    rotage: 360deg;
  }

  100% {
    rotage: 0deg;
  }
}

@keyframes filltext {
  0% {
    background-size: 0% 100%;
  }

  100% {
    background-size: 100% 100%;
  }
}

@keyframes emptytext {
  0% {
    background-size: 100% 100%;
  }

  100% {
    background-size: 0% 100%;
  }
}

@keyframes bannerDown {
  0% {
    translate: 0 -8rem 0;
  }

  100% {
    translate: 0 0 0;
  }
}

@keyframes upndown {
  0% {
    translate: 0 .5rem 0;
  }

  50% {
    translate: 0 0 0;
  }

  100% {
    translate: 0 .5rem 0;
  }
}

@keyframes circleLife {
  0% {
    stroke-dashoffset: 523;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.fadeRight,
.fadeLeft,
.fadeDown,
.fadeUp,
.fadeScale,
.fade {
  position: absolute;
  left: -999vw;
  opacity: 0;
  top: -999vw;
}

/* Animations - Active
----------------------*/
.fade.active {
  animation: fade 1.2s 1 cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  left: auto;
  top: auto;
  position: relative;
}

.fade.slick-nav.active,
.fade.slick-carousel.active {
  position: relative !important;
}

.fadeUp.active {
  animation: fadeUp 1.2s 1 cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  left: auto;
  top: auto;
  position: relative;
}

.fadeDown.active {
  animation: fadeDown 1.2s 1 cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  left: auto;
  top: auto;
  position: relative;
}

.fadeScale.active {
  animation: fadeScale 1.2s 1 cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  left: auto;
  top: auto;
  position: relative;
}

.fadeLeft.active {
  animation: fadeLeft 1.2s 1 cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  left: auto;
  top: auto;
  position: relative;
}

.fadeRight.active {
  animation: fadeRight 1.2s 1 cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  left: auto;
  top: auto;
  position: relative;
}

/* @end */

/* @group RESET GENERAL DE TAMAÑO
------------------------------------ */
.no-mobile {}

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

@media only screen and (min-width : 961px) and (max-width : 1440px) {}

@media only screen and (min-width : 0) and (max-width : 960px) {
  .no-mobile {
    display: none !important;
  }

  /* html { font-size: 7px; } */
}

@media only screen and (min-width : 0) and (max-width : 600px) {
  /* html { font-size: 5px; } */
}

/* @end */

/* --- */


@media only screen and (min-width : 961px) {
  body:not(.home) [data-page] {
    display: none;
  }
}


[data-page="sightmap"] {
  background-color: var(--spanish-moss);
  min-height: 100%;
}

.sight-map-page .availability-header {
  padding-bottom: 0;
}

.sight-map-page iframe {
  height: 90vh;
  padding-bottom: 25px;
}

.sight-map-page .availability-filters .back_fp_wrap {
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
  margin-left: 10rem;
}

.sight-map-page .availability-filters .back_fp_wrap .back_btn {
  font-size: 1.5em;
  line-height: 1.5em;
  letter-spacing: .0133em;
  height: 4.3rem;
  padding: 0 1rem;
  color: var(--sandstone);
  border: 0.1rem solid var(--gilded-age);
  transition: all .3s linear;
  padding-top: 0.6em;
  text-transform: uppercase;
}

.sight-map-page .availability-filters .back_fp_wrap .back_btn:hover {
  border-color: var(--sandstone);
}

@media only screen and (max-width : 961px) {
  .sight-map-page .availability-filters .back_fp_wrap {
    margin-left: 0;
  }
}

.availability-filters a.map-btn,
.availability-filters .load-more-fp,
.availability-filters .clear-filter {
  font-size: 1.5em;
  line-height: 1.5em;
  letter-spacing: .0133em;
  height: 4.3rem;
  padding: 0 1rem;
  color: var(--sandstone);
  border: 0.1rem solid var(--gilded-age);
  transition: all .3s linear;
  padding-top: 0.6em;
  white-space: nowrap;
}

.availability-filters a.map-btn {
  text-transform: uppercase;
}

.availability-filters .clr-btn {
  margin-right: 20px;
}

@media only screen and (max-width : 961px) {
  .availability-filters .clr-btn {
    margin: 25px 0;
  }
}

.availability-filters .clear-filter:hover {
  border-color: var(--sandstone);
}

.availability-filters a.map-btn:hover,
.availability-filters .load-more-fp:hover {
  border-color: var(--sandstone);
}

.availability-filters .load-more-fp {
  margin: 0 auto;
}

@media only screen and (max-width : 961px) {
  .availability-filters .plan-boxes.units-container {
    display: flex;
    flex-direction: column;
  }
}

/* Error page Styles */
.error404 .page-container {
  width: 100%;
  height: 100vh;
}

.error404 .error-header {
  background-color: var(--sandstone);
  height: 10rem;
  width: 100%;
  border-bottom: 0.1rem solid var(--spanish-moss);
  padding: 3rem;
}

@media only screen and (max-width : 961px) {
  .error404 .error-header {
    display: none;
  }
}

.error404 .page-container article {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--limestone);
  padding: 25px;
}

.error404 .page-container article h1 {
  font-size: 12vh;
  line-height: .9em;
  margin-bottom: 8rem;
  font-family: var(--brolimo-font);
  color: var(--forest);
  text-transform: uppercase;
}

.error404 .page-container article p {
  font-size: 2em;
  line-height: 1.5em;
  letter-spacing: 0.01em;
  color: var(--spanish-moss);
  font-weight: 500;
  font-family: var(--gotham-medium);
}

@media only screen and (max-width : 961px) {
  .error404 .page-container article h1 {
    font-size: 8vh;
    text-align: center;
  }

  .error404 .page-container article p {
    text-align: center;
  }
}

.error404 .page-container article .back_to_home .back_btn {
  font-size: 1.5em;
  line-height: 1.5em;
  letter-spacing: .0133em;
  height: 4.3rem;
  padding: 0 1rem;
  color: var(--forest);
  border: 0.1rem solid var(--gilded-age);
  transition: all .3s linear;
  padding-top: 0.6em;
}

.error404 .page-container article .back_to_home .back_btn:hover {
  border-color: var(--forest);
}

.error404 .page-container article .back_to_home {
  margin: 5rem 0;
}

/* Virtual Tour Page Styles */
.virtual-tour-page {
  background-color: var(--limestone);
}

.virtual-tour-page .availability-header h2 {
  color: var(--forest);
}

.virtual-tour-page .availability-header {
  padding-bottom: 0;
}

.virtual-tour-page .availability-filters {
  padding-bottom: 25px;
}

.virtual-tour-page .availability-filters iframe {
  height: 70vh;
}

.disable-link {
  pointer-events: none;
}

.sightmap-hde-btn {
  display: none;
}

.juicer {
  padding-top: 30px;

}

.j-poster-meta {
  display: none;
}

.j-meta {
  display: none;
}

.j-text {
  display: none;
}

.home .floor-plans .availability-header .text p {
  margin-top: 20px;
}

@media only screen and (min-width: 0) and (max-width: 960px) {
  .home .page-header {
    padding-top: 0 !important;
    margin-top: 0;
  }
}