/* @group Single floorplan
------------------------------------ */


/* @group Header */
.single-fp-header { padding-bottom: 8rem; }
.single-fp-header .textlink { font-size: 1.6em; line-height: 1.5em; letter-spacing: .0125em; text-transform: uppercase; color: var(--olive); margin: 0 0 3.5rem; position: relative; }
.single-fp-header .textlink::after { content: ''; width: 11.6rem; height: 1rem; background-image: url('../../img/layout/globals/arrow.svg'); background-repeat: no-repeat; background-position: right; background-size: contain; margin-top: 0.5rem; position: absolute; top: 100%; left: 0; scale: -1; }
.single-fp-header .textlink:hover { color: var(--gilded-age); }
.single-fp-header h1 { font-family: var(--brolimo-font); font-weight: 400; text-transform: uppercase; font-size: 6.6em; line-height: 1em; color: var(--forest); margin: 0 0 6rem; font-variant-ligatures: discretionary-ligatures; }
.single-fp-header .details { color: var(--spanish-moss); margin: 0 0 3rem; }
.single-fp-header .details li { font: var(--subheader-mobile); letter-spacing: var(--subheader-mobile-letterspacing);  display: inline-block; }
.single-fp-header .details li:not(:last-of-type)::after { content: '|'; display: inline-block; margin: 0 1rem; }
@media only screen
and (min-width : 961px) {
    .single-fp-header { padding: 6.5rem 0 8rem; }
    .single-fp-header .textlink { padding-left: 3rem; }
    .single-fp-header h1 { font-size: 15em; line-height: 1em; margin: 0 0 4rem; }
    .single-fp-header .details { padding-left: 8.33%; padding-right: 20.833%; }
    .single-fp-header .details li { font: var(--subheader); letter-spacing: var(--subheader-letterspacing); }
    .single-fp-header .details li:not(:last-of-type)::after { margin: 0 3rem;  }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* @end Header */


/* @group Floorplan image and links */
.single-fp-floorplan { padding: 3rem 0 6rem; overflow: hidden;  }
.single-fp-floorplan article { padding: 0; }
.single-fp-floorplan .image { position: relative; margin-bottom: 6.5rem; }
.single-fp-floorplan .image::before,
.single-fp-floorplan .image::after { content: ''; position: absolute; pointer-events: none; top: -3rem; bottom: -3rem; }
.single-fp-floorplan .image::before { background: url('../../img/layout/textures/limestone.jpeg') no-repeat; background-size: cover; width: 100vw; right: 50%; z-index: 2; }
.single-fp-floorplan .image::after { background: url('../../img/layout/textures/seawater.jpg') no-repeat; background-size: cover; width: 100vw; right: 0; z-index: 1; }
.single-fp-floorplan .image figure { background-color: var(--white); margin: var(--general-padding-mobile-ltr); height: 44.2rem; z-index: 3; }
.single-fp-floorplan .image figure img { object-fit: contain!important; }
.single-fp-floorplan .links ul { margin: var(--general-padding-mobile-ltr); text-align: center; }
.single-fp-floorplan .links li { font: unset; margin-bottom: 1.5rem; }
.single-fp-floorplan .links li .bttn { color: var(--limestone); background-color: var(--forest); border: .1rem solid var(--forest); padding: 1rem 2rem; text-transform: uppercase; font: 400 1.5em / 1.5em var(--gotham-book); letter-spacing: .013em; }
.single-fp-floorplan .links li .bttn:hover { background-color: var(--limestone); color: var(--forest); }
@media only screen
and (min-width : 961px) {
    .single-fp-floorplan { padding: 0 0 12rem; }
    .single-fp-floorplan .image { margin-bottom: 8.5rem; }
    .single-fp-floorplan .image::before,
    .single-fp-floorplan .image::after { bottom: -3.5rem; }
    .single-fp-floorplan .image::after { right: -3.5rem; }
    .single-fp-floorplan .image figure { height: 70rem; margin: 0; cursor: zoom-in; }
    .single-fp-floorplan .links ul { margin: 0; }
    .single-fp-floorplan .links li { display: inline-block; }
    .single-fp-floorplan .links li:first-child { margin-left: 0; }
    .single-fp-floorplan .links li:last-child { margin-right: 0; }
    .single-fp-floorplan .links li { margin: 0 .8rem 1.5rem; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* @end Floorplan image and links */


/* @group Availability */
.single-fp-availability { background-color: var(--spanish-moss); padding: 6rem 0;  }
.single-fp-availability header h2 { font-family: var(--brolimo-font); font-variant-ligatures: discretionary-ligatures; font-weight: 400; font-size: 5.4em; line-height: 1em; color: var(--bath-salts); text-transform: uppercase; margin: 0 0 6rem; }
.single-fp-availability .list-boxes article { display: flex; align-items: center; flex-wrap: wrap; padding: 0 0 5rem; margin: 0 0 3rem; }
.single-fp-availability .list-boxes article:not(:last-of-type) { border-bottom: .1rem solid var(--sandstone); }
.single-fp-availability .list-boxes article * { display: inline-block; }
.single-fp-availability .list-boxes article h2 { font: 400 5em / 1.1em var(--blackdelights-font); letter-spacing: .004em; text-transform: uppercase; color: var(--bath-salts); margin-bottom: 0; flex: 0 1 50%; max-width: 50%; padding-right: 2rem; }
.single-fp-availability .list-boxes article h3 { font: var(--subheader-mobile); letter-spacing: var(--subheader-mobile-letterspacing); color: var(--limestone); flex: 0 1 50%; max-width: 50%; text-align: right; }
.single-fp-availability .list-boxes article ul { flex: 0 1 100%; max-width: 100%; margin-top: 3rem; }
.single-fp-availability .list-boxes article ul li { font: var(--body-copy-mobile); letter-spacing: var(--body-copy-mobile-letterspacing); color: var(--limestone); }
.single-fp-availability .list-boxes article ul li:not(:first-of-type)::before { content: '|'; margin: 0 2rem; }
.single-fp-availability .list-boxes article a { display: inline-flex; align-items: center; justify-content: center; border: .1rem solid var(--gilded-age); text-transform: uppercase; color: var(--limestone); font-size: 1.5em; line-height: 1.5em; letter-spacing: .0133em; height: 5.3rem; flex: 0 1 100%; max-width: 100%; margin-top: 3rem; }
@media only screen
and (min-width : 961px){
    .single-fp-availability { padding: 12rem 0; }
    .single-fp-availability header h2  { font-size: 7.5em; margin: 0 0 7rem; }
    .single-fp-availability .list-boxes article:last-of-type { border-bottom: .1rem solid var(--sandstone); }
    .single-fp-availability .list-boxes article h2 { flex: 0 1 25%; max-width: 25%; margin-right: 6%; padding-right: 0; }
    .single-fp-availability .list-boxes article h3 { font: var(--subheader); letter-spacing: var(--subheader-letterspacing); text-align: left; flex: 0 1 12%; max-width: 12%; margin-right: 4%; }
    .single-fp-availability .list-boxes article ul { flex: 0 1 32%; max-width: 32%; margin-right: 4%; margin-top: 0; }
    .single-fp-availability .list-boxes article ul li { font: var(--body-copy); letter-spacing: var(--body-copy-letterspacing); }
    .single-fp-availability .list-boxes article ul li:not(:first-of-type)::before { margin: 0 2.8rem; }
    .single-fp-availability .list-boxes article a { flex: 0 1 17%; max-width: 17%; margin-top: 0; }
    .single-fp-availability .list-boxes article a:hover { background-color: var(--forest); color: var(--limestone); border-color: var(--limestone); }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* @end Availability */

/* @end */


/* Popup floorplans */
.popup-floorplans {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    max-width: 130rem;
    height: 100vh;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
    pointer-events: none;
    transition: all .7s;
}
.popup-floorplans::-webkit-scrollbar {
    width: 1rem;
}
.popup-floorplans::-webkit-scrollbar-track {
    background: var(--background-popup);
    width: 1rem;
}
.popup-floorplans::-webkit-scrollbar-thumb {
    border-radius: 2rem;
    background: var(--sandstone);
}
.popup-floorplans.active-popup {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    pointer-events: all;
    transition: transform .7s;
}
.popup-floorplans > .icon-close {
    display: inline-block;
    position: absolute;
    width: 3.1rem;
    height: 3.1rem;
    background-image: url('../../img/layout/globals/close.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    top: 3rem;
    right: 3rem;
    cursor: pointer;
}
.popup-floorplans__box {
    background-color: var(--limestone);
    width: 100%;
    min-height: 100%;
    position: relative;
}
.popup-floorplans__box.loader::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 40px;
    height: 40px;
    margin: 20px;
    border-radius: 50%;
    border: 4px solid var(--forest);
    border-color: var(--forest) transparent var(--forest) transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

.active-single-floorplans {
    display: none;
}
@media only screen
and (min-width : 961px){

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

/* Lightbox Gallery 
------------------------------------ */
.floorplan-lightbox { width: 100%; height: 100%; position: fixed; inset: 0; background-color: var(--forest-background-o-95); z-index: 99; opacity: 0; pointer-events: none; transition: opacity .4s linear;  }
.floorplan-lightbox .row { height: 100%; max-height: 100vh; }
.floorplan-lightbox .splide {
    padding-block: 5rem;
    padding-block: 2.5rem;
    background: var(--white);
}
.floorplan-lightbox .splide .splide__slide { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: relative; }
.floorplan-lightbox .splide .splide__slide figure { height: 80vh; flex: 0 1 100%; }
.floorplan-lightbox .splide .splide__slide figure iframe{ width: 100%; height: 100%; }
.floorplan-lightbox .splide .splide__slide p { flex: 0 1 100%; font: 500 1.5em / 1.5em var(--gotham-medium); letter-spacing: .0133em; color: var(--limestone); text-align: center; margin: 4rem 0; padding: 0 7rem; }
.floorplan-lightbox .splide .splide__arrows button { display: inline-block; width: 5.45rem; height: 5.45rem; border: .1rem solid var(--limestone); border-radius: 100%; transform: unset; top: unset; bottom: 3.5rem; opacity: 1; pointer-events: all; }
.floorplan-lightbox .splide .splide__arrows button.splide__arrow--prev { left: 0; }
.floorplan-lightbox .splide .splide__arrows button.splide__arrow--next { right: 0; }

.floorplan-lightbox .splide .splide__arrows button[disabled] { opacity: 0; pointer-events: none; }
.floorplan-lightbox .splide .splide__arrows button i { 
    pointer-events: none;
    display: inline-block; 
    width: 2.9rem; 
    height: 1rem; 
}

.floorplan-lightbox .splide .splide__arrows button i::before,
.floorplan-lightbox .splide .splide__arrows button i::after{ 
    content: ''; 
    display: inline-block; 
    width: 2.9rem; 
    height: 1rem; 
}

.floorplan-lightbox .splide .splide__arrows button .icon-arrow-right::before { 
    background: url('../../img/layout/globals/splide-arrow-right-white.svg') no-repeat center; 
    background-size: 100% auto; 
}
.floorplan-lightbox .splide .splide__arrows button .icon-arrow-left::before { background: url('../../img/layout/globals/splide-arrow-left-white.svg') no-repeat center; background-size: 100% auto; }

.floorplan-lightbox .splide .splide__arrows button .icon-arrow-right::after { 
    background: url('../../img/layout/globals/splide-arrow-right-olive.svg') no-repeat center; 
    background-size: 100% auto; 
    opacity: 0; 
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
.floorplan-lightbox .splide .splide__arrows button .icon-arrow-left::after { 
    background: url('../../img/layout/globals/splide-arrow-left-olive.svg') no-repeat center; 
    background-size: 100% auto; 
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.floorplan-lightbox .img-scroll {
    width: 100%;
    overflow-y: scroll;
}
.floorplan-lightbox .img-scroll img {
    width: 100%;
    height: auto;
}

.floorplan-lightbox .splide .splide__arrows button,
.floorplan-lightbox .splide .splide__arrows button i::after,
.floorplan-lightbox .splide .splide__arrows button i::before{
    transition: 0.5s;
}
.floorplan-lightbox .splide .splide__arrows button:hover {
    border-color: var(--limestone) !important;
    background-color: var(--limestone);
}
.floorplan-lightbox .splide .splide__arrows button:hover i::before { 
    opacity: 0 !important;
}
.floorplan-lightbox .splide .splide__arrows button:hover i::after { 
    opacity: 1 !important;
}

.floorplan-lightbox .close {
    display: inline-block;
    position: absolute;
    width: 3.1rem;
    height: 3.1rem;
    background-image: url('../../img/layout/globals/close.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    top: 2.5rem;
    right: 2.5rem;
    cursor: pointer;
    pointer-events: all;
}

.floorplan-lightbox.show { opacity: 1; pointer-events: all;}

@media only screen
and (min-width : 961px) {
    .floorplan-lightbox .splide .splide__slide p { padding: 0 15rem; }
    .floorplan-lightbox .splide .splide__arrows button { bottom: 1.5rem; width: 6rem; height: 6rem; }
    .floorplan-lightbox .splide .splide__arrows button.splide__arrow--prev { left: 7rem; }
    .floorplan-lightbox .splide .splide__arrows button.splide__arrow--next { right: 7rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .floorplan-lightbox {
        padding-top: 6rem;
    }
    .floorplan-lightbox .splide .splide__arrows button {
        top: calc(50vh + 2rem);
    }
    .floorplan-lightbox .splide .splide__slide {
        flex-wrap: nowrap;
        flex-direction: column;
    }
    .floorplan-lightbox .splide .splide__slide figure {
        height: 70vh;
        width: 100%;
        flex: none;
    }
    .floorplan-lightbox .close {
        right: 2rem;
    }

    .floorplan-lightbox.show {
        pointer-events: all; 
    }
}


/* @end */