/* 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; margin-top: 0;  }
}
/* 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;
  }
}