<link media="all" rel="stylesheet" href="/assets/themes/default/css/header.css?cb=">

<header class="header" data-module="header">
    <div class="header__inner js-header-inner">
        <div class="header__mobile-navigation js-mobile-navigation">
            <div class="header__mobile-navigation-inner">
                <nav class="primary-navigation primary-navigation--mobile">
                    <ul class="primary-navigation__list">
                        <li class="primary-navigation__list-item js-nav-list-item primary-navigation--has-children ">
                            <a href="#" class="primary-navigation__link ">
                                <span>Parent</span>
                            </a>

                        </li>
                        <li class="primary-navigation__list-item js-nav-list-item  primary-navigation--is-dynamic">
                            <a href="#" class="primary-navigation__link primary-navigation__link--is-active">
                                <span>Working</span>
                            </a>

                            <div class="menu-toggle js-menu-toggle">
                                <span class="menu-toggle__horizontal-line"></span>
                                <span class="menu-toggle__vertical-line"></span>
                            </div>
                            <div class="sub-navigation js-sub-navigation">
                                <div class="sub-navigation__inner js-sub-nav-inner">
                                    <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
                                        <div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
                                        <ul class="sub-navigation__link-list">
                                            <li class="sub-navigation__link"><a href="#">link one</a></li>
                                            <li class="sub-navigation__link"><a href="#">link two</a></li>
                                            <li class="sub-navigation__link"><a href="#">link three</a></li>
                                        </ul>
                                    </div>
                                    <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
                                        <div class="sub-navigation__col-title sub-navigation__text-title"><a href="#">Text</a></div>
                                        <p class="sub-navigation__text-text"><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi.</a></p>
                                        <a href="#" data-module="cta" class="cta sub-navigation__text-cta">
                                            Primary Cta
                                        </a>
                                    </div>
                                    <div class="sub-navigation__col  sub-navigation__col--image">
                                        <div class="sub-navigation__image-wrapper">
                                            <a href="#">
                                                <div class="sub-navigation__image-container">
                                                    <img src="https://via.placeholder.com/150x150" alt="Alt Text" loading="lazy" class="sub-navigation__image">
                                                </div>
                                            </a>
                                            <a href="#" class="sub-navigation__image-link">Image Link</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="primary-navigation__list-item js-nav-list-item  primary-navigation--is-dynamic">
                            <a href="#" class="primary-navigation__link ">
                                <span>Careers</span>
                            </a>

                            <div class="menu-toggle js-menu-toggle">
                                <span class="menu-toggle__horizontal-line"></span>
                                <span class="menu-toggle__vertical-line"></span>
                            </div>
                            <div class="sub-navigation js-sub-navigation">
                                <div class="sub-navigation__inner js-sub-nav-inner">
                                    <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
                                        <div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
                                        <p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi&#x27;</p>
                                    </div>
                                    <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
                                        <div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
                                        <p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi&#x27;</p>
                                    </div>
                                    <div class="sub-navigation__col  sub-navigation__col--image">
                                        <div class="sub-navigation__image-wrapper">

                                            <div class="sub-navigation__image-container">
                                                <img src="https://via.placeholder.com/150x150" alt="Alt Text" loading="lazy" class="sub-navigation__image">
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="primary-navigation__list-item js-nav-list-item  primary-navigation--is-dynamic">
                            <a href="#" class="primary-navigation__link ">
                                <span>News &amp; Views</span>
                            </a>

                            <div class="menu-toggle js-menu-toggle">
                                <span class="menu-toggle__horizontal-line"></span>
                                <span class="menu-toggle__vertical-line"></span>
                            </div>
                            <div class="sub-navigation js-sub-navigation">
                                <div class="sub-navigation__inner js-sub-nav-inner">
                                    <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
                                        <div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
                                        <p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi&#x27;</p>
                                    </div>
                                    <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
                                        <div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
                                        <ul class="sub-navigation__link-list">
                                            <li class="sub-navigation__link"><a href="#">link one</a></li>
                                            <li class="sub-navigation__link"><a href="#">link two</a></li>
                                            <li class="sub-navigation__link"><a href="#">link three</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="primary-navigation__list-item js-nav-list-item  primary-navigation--is-dynamic">
                            <a href="#" class="primary-navigation__link ">
                                <span>Contact</span>
                            </a>

                            <div class="menu-toggle js-menu-toggle">
                                <span class="menu-toggle__horizontal-line"></span>
                                <span class="menu-toggle__vertical-line"></span>
                            </div>
                            <div class="sub-navigation js-sub-navigation">
                                <div class="sub-navigation__inner js-sub-nav-inner">
                                    <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
                                        <div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
                                        <p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi&#x27;</p>
                                    </div>
                                    <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
                                        <div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
                                        <ul class="sub-navigation__link-list">
                                            <li class="sub-navigation__link"><a href="#">link one</a></li>
                                            <li class="sub-navigation__link"><a href="#">link two</a></li>
                                            <li class="sub-navigation__link"><a href="#">link three</a></li>
                                        </ul>
                                    </div>
                                    <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
                                        <div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
                                        <p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi&#x27;</p>
                                    </div>
                                    <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
                                        <div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
                                        <ul class="sub-navigation__link-list">
                                            <li class="sub-navigation__link"><a href="#">link one</a></li>
                                            <li class="sub-navigation__link"><a href="#">link two</a></li>
                                            <li class="sub-navigation__link"><a href="#">link three</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </nav>
                <nav class="header__mobile-quick-links">
                    <a href="#" class="header__quick-link">
                        Quick Link
                    </a>
                    <a href="#" class="header__quick-link">
                        <img src="https://via.placeholder.com/100X25" alt="">
                    </a>
                </nav>
            </div>
        </div>

        <nav class="header__top-navigation js-top-navigation">
            <div class="grid-container">
                <div class="grid-x header__top-navigation-row">
                    <a href="#" class="header__quick-link">
                        Quick Link
                    </a>
                    <a href="#" class="header__quick-link">
                        <img src="https://via.placeholder.com/100X25" alt="">
                    </a>
                </div>
            </div>
        </nav>
        <div class="grid-container">
            <div class="grid-x header__navigation-row">
                <div class="header__navigation-wrapper">
                    <div class="burger">
                        <label for="burger-nav"></label>
                        <input type="checkbox" id="burger-nav" class="js-burger-nav" name="burger-nav" />
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>

                    <nav class="primary-navigation primary-navigation--desktop">
                        <ul class="primary-navigation__list">
                            <li class="primary-navigation__list-item js-nav-list-item primary-navigation--has-children ">
                                <a href="#" class="primary-navigation__link ">
                                    <span>Parent</span>
                                </a>

                            </li>
                            <li class="primary-navigation__list-item js-nav-list-item  primary-navigation--is-dynamic">
                                <a href="#" class="primary-navigation__link primary-navigation__link--is-active">
                                    <span>Working</span>
                                </a>

                                <div class="sub-navigation js-sub-navigation">
                                    <div class="sub-navigation__inner js-sub-nav-inner">
                                        <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
                                            <div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
                                            <ul class="sub-navigation__link-list">
                                                <li class="sub-navigation__link"><a href="#">link one</a></li>
                                                <li class="sub-navigation__link"><a href="#">link two</a></li>
                                                <li class="sub-navigation__link"><a href="#">link three</a></li>
                                            </ul>
                                        </div>
                                        <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
                                            <div class="sub-navigation__col-title sub-navigation__text-title"><a href="#">Text</a></div>
                                            <p class="sub-navigation__text-text"><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi.</a></p>
                                            <a href="#" data-module="cta" class="cta sub-navigation__text-cta">
                                                Primary Cta
                                            </a>
                                        </div>
                                        <div class="sub-navigation__col  sub-navigation__col--image">
                                            <div class="sub-navigation__image-wrapper">
                                                <a href="#">
                                                    <div class="sub-navigation__image-container">
                                                        <img src="https://via.placeholder.com/150x150" alt="Alt Text" loading="lazy" class="sub-navigation__image">
                                                    </div>
                                                </a>
                                                <a href="#" class="sub-navigation__image-link">Image Link</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="primary-navigation__list-item js-nav-list-item  primary-navigation--is-dynamic">
                                <a href="#" class="primary-navigation__link ">
                                    <span>Careers</span>
                                </a>

                                <div class="sub-navigation js-sub-navigation">
                                    <div class="sub-navigation__inner js-sub-nav-inner">
                                        <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
                                            <div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
                                            <p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi&#x27;</p>
                                        </div>
                                        <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
                                            <div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
                                            <p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi&#x27;</p>
                                        </div>
                                        <div class="sub-navigation__col  sub-navigation__col--image">
                                            <div class="sub-navigation__image-wrapper">

                                                <div class="sub-navigation__image-container">
                                                    <img src="https://via.placeholder.com/150x150" alt="Alt Text" loading="lazy" class="sub-navigation__image">
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="primary-navigation__list-item js-nav-list-item  primary-navigation--is-dynamic">
                                <a href="#" class="primary-navigation__link ">
                                    <span>News &amp; Views</span>
                                </a>

                                <div class="sub-navigation js-sub-navigation">
                                    <div class="sub-navigation__inner js-sub-nav-inner">
                                        <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
                                            <div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
                                            <p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi&#x27;</p>
                                        </div>
                                        <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
                                            <div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
                                            <ul class="sub-navigation__link-list">
                                                <li class="sub-navigation__link"><a href="#">link one</a></li>
                                                <li class="sub-navigation__link"><a href="#">link two</a></li>
                                                <li class="sub-navigation__link"><a href="#">link three</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="primary-navigation__list-item js-nav-list-item  primary-navigation--is-dynamic">
                                <a href="#" class="primary-navigation__link ">
                                    <span>Contact</span>
                                </a>

                                <div class="sub-navigation js-sub-navigation">
                                    <div class="sub-navigation__inner js-sub-nav-inner">
                                        <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
                                            <div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
                                            <p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi&#x27;</p>
                                        </div>
                                        <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
                                            <div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
                                            <ul class="sub-navigation__link-list">
                                                <li class="sub-navigation__link"><a href="#">link one</a></li>
                                                <li class="sub-navigation__link"><a href="#">link two</a></li>
                                                <li class="sub-navigation__link"><a href="#">link three</a></li>
                                            </ul>
                                        </div>
                                        <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
                                            <div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
                                            <p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi&#x27;</p>
                                        </div>
                                        <div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
                                            <div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
                                            <ul class="sub-navigation__link-list">
                                                <li class="sub-navigation__link"><a href="#">link one</a></li>
                                                <li class="sub-navigation__link"><a href="#">link two</a></li>
                                                <li class="sub-navigation__link"><a href="#">link three</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="cell  site-logo__wrapper">
                    <a class="site-logo" href="/">
                        <span>Default</span>
                        <img src="/media/logo.svg" class="site-logo__image" alt="Default" />
                    </a>
                </div>
            </div>
        </div>
    </div>

</header>

<div class="header__spacer js-header-spacer"></div>

<div class="property-listing" data-module="propertyListing" data-method="get" data-endpoint="/data/residential-property-data.json">
    <link media="all" rel="stylesheet" href="/assets/themes/default/css/property-listing.css?cb=">
    <link media="all" rel="stylesheet" href="/assets/themes/default/css/property-list-card.css?cb=">
    <link media="all" rel="stylesheet" href="/assets/themes/default/css/gallery.css?cb=">

    <div class="list-view js-list-view" data-page-size="5" data-paging-type="pagination">
        <template class="js-property-card-template">

            <a href="" class="property-list-card" data-module="propertyListCard" aria-label="View ">
                <div class="property-list-card__container">
                    <div class="property-list-card__gallery">
                        <div class="property-list-card__gallery-image-tag js-image-tag"> </div>
                        <div class="property-list-card__gallery-container">
                            <div class="property-list-card__main-image" data-module="imageLazyLoad">

                                <div class="gallery ">
                                    <div class="gallery__slides-container">
                                        <div class="gallery__slides js-slides">
                                        </div>
                                        <span class="gallery__arrow gallery__arrow--left js-arrow-left"><span>Previous</span> </span>
                                        <div class="gallery__selection-label">
                                            <span class="gallery__current-slide js-current-slide">1</span>
                                            <span class="gallery__total-slides js-total-slides"></span>
                                        </div>
                                        <span class="gallery__arrow gallery__arrow--right js-arrow-right"><span>Next</span> </span>
                                    </div>
                                    <div class="gallery__dots js-dots">
                                    </div>
                                </div>
                            </div>
                            <div class="property-list-card__stacked-image  js-image-1">

                                <div class="image  ">
                                    <picture>
                                        <img src="" loading="lazy" alt="">
                                    </picture>
                                </div>
                            </div>
                            <div class="property-list-card__stacked-image js-image-2">

                                <div class="image  ">
                                    <picture>
                                        <img src="" loading="lazy" alt="">
                                    </picture>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="property-list-card__content-container">
                        <div class="property-list-card__headings-container">
                            <h2 class="property-list-card__title js-title"></h2>
                        </div>
                        <div class="property-list-card__keys-cta-container">
                            <div class="property-list-card__keys-container">
                                <div class="property-list-card__property-key-type js-type"> </div>
                                <div class="property-list-card__property-key-size js-size"> </div>
                            </div>
                            <div class="property-list-card__cta js-cta">

                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </template>
        <div class="list-view__drag-handle js-drag-handle"></div>
        <div class="list-view__inner js-scrollable-container">
            <header class="list-view__header js-header">
                <a href="#" class="list-view__filter-trigger js-filter-trigger"><span>Filters</span></a>
                <div class="list-view__results-bar">
                    <span class="list-view__results-count-text js-property-count"></span>
                    <label for="sortBy">Sort By:</label>
                    <select name="sortBy" id="sortBy">
                        <option value="development">Building</option>
                        <option value="size DESC">Size: High to low</option>
                        <option value="size ASC">Size: Low to high</option>
                        <option value="price DESC">Price: High to low</option>
                        <option value="price ASC">Price: Low to high</option>
                        <option value="dateAdded DESC">Date Added</option>
                    </select>
                </div>
            </header>

            <div class="list-view__results js-results-container">
            </div>

            <link rel="stylesheet" href="/assets/themes/default/css/pagination.css?cb=" />

            <div class="pagination js-pagination">
                <a href="#top" class="pagination__previous js-previous"><span>Previous</span></a>
                <a href="#top" class="pagination__page js-page js-first selected" data-page="1">1</a>
                <span class="pagination__dots js-dots-left">&#8230;</span>
                <a href="#top" class="pagination__page js-page js-second-page" data-page="2">2</a>
                <a href="#top" class="pagination__page js-page js-third-page" data-page="3">3</a>
                <a href="#top" class="pagination__page js-page js-fourth-page" data-page="4">4</a>
                <span class="pagination__dots js-dots-right">&#8230;</span>
                <a href="#top" class="pagination__page js-page js-last-page" data-page="5">5</a>
                <a href="#top" class="pagination__next js-next"><span>Next</span></a>
            </div>

            <div class="list-view__no-results js-no-results-container">
                <div class="no-results">
                    <h2 class="no-results__title">No properties found</h2>
                    <div class="no-results__copy">Try changing or removing your filters</div>
                    <div class="no-results__buttons-container js-remove-filter-buttons"></div>
                    <div class="no-results__reset-all-button js-reset-all-filters">Reset all filters</div>
                </div>
            </div>
        </div>
    </div>
    <div class="map-view js-map-view">
        <a href="#" class="map-view__filter-trigger js-filter-trigger"><span>Filters</span></a>
        <a href="#" class="js-view-toggle property-listing__toggle-button"><span class="map-view__toggle-list">List View</span><span class="map-view__toggle-map">Map View</span></a>
        <link media="all" href='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' />
        <link media="all" rel="stylesheet" href="/assets/themes/default/css/mapbox.css?cb=">

        <div class="mapbox js-mapbox" data-longitude="-81.378112" data-latitude="19.322003" data-map-key="pk.eyJ1IjoiYmVubGVmdHdpY2hkYXJ0IiwiYSI6ImNrNmI3dmNnYjB5bWMzbGxqcWJvdHphcWUifQ.bQwqoScE2wXdFGsK3BpkRA" data-map-style="mapbox://styles/benleftwichdart/ck6b7xnox14vs1irwey7g5rdn" data-zoom="7" data-pitch="0">
            <div class="mapbox__map js-map"></div>
        </div>
        <div class="map-view__property-list-card-container js-property-list-card-container">
            <div class="map-view__property-list-card--close js-close-card"></div>
            <link media="all" rel="stylesheet" href="/assets/themes/default/css/property-list-card.css?cb=">

            <a href="" class="property-list-card" data-module="propertyListCard" aria-label="View ">
                <div class="property-list-card__container">
                    <div class="property-list-card__gallery">
                        <div class="property-list-card__gallery-image-tag js-image-tag"> </div>
                        <div class="property-list-card__gallery-container">
                            <div class="property-list-card__main-image" data-module="imageLazyLoad">

                                <div class="gallery ">
                                    <div class="gallery__slides-container">
                                        <div class="gallery__slides js-slides">
                                        </div>
                                        <span class="gallery__arrow gallery__arrow--left js-arrow-left"><span>Previous</span> </span>
                                        <div class="gallery__selection-label">
                                            <span class="gallery__current-slide js-current-slide">1</span>
                                            <span class="gallery__total-slides js-total-slides"></span>
                                        </div>
                                        <span class="gallery__arrow gallery__arrow--right js-arrow-right"><span>Next</span> </span>
                                    </div>
                                    <div class="gallery__dots js-dots">
                                    </div>
                                </div>
                            </div>
                            <div class="property-list-card__stacked-image  js-image-1">

                                <div class="image  ">
                                    <picture>
                                        <img src="" loading="lazy" alt="">
                                    </picture>
                                </div>
                            </div>
                            <div class="property-list-card__stacked-image js-image-2">

                                <div class="image  ">
                                    <picture>
                                        <img src="" loading="lazy" alt="">
                                    </picture>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="property-list-card__content-container">
                        <div class="property-list-card__headings-container">
                            <h2 class="property-list-card__title js-title"></h2>
                        </div>
                        <div class="property-list-card__keys-cta-container">
                            <div class="property-list-card__keys-container">
                                <div class="property-list-card__property-key-type js-type"> </div>
                                <div class="property-list-card__property-key-size js-size"> </div>
                            </div>
                            <div class="property-list-card__cta js-cta">

                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="map-view__multi-property-card-container js-multi-property-card-container">
            <div class="map-view__multi-property-card--close js-close-card"></div>
            <link media="all" rel="stylesheet" href="/assets/themes/default/css/multi-property-card.css?cb=">

            <div class="multi-property-card" data-module="multiPropertyCard">
                <div class="multi-property-card__outer-container">
                    <div class="multi-property-card__arrow multi-property-card__arrow--left disabled js-arrow-left"></div>
                    <div class="multi-property-card__container">
                        <div class="multi-property-card__container-left">
                            <div class="multi-property-card__location js-multi-location"></div>
                            <div class="multi-property-card__development js-multi-development"></div>
                            <div class="multi-property-card__unit-text js-multi-length"> units in this development</div>
                        </div>
                        <div class="multi-property-card__container-results js-results-container default">
                        </div>
                    </div>
                    <div class="multi-property-card__arrow multi-property-card__arrow--right js-arrow-right"></div>
                </div>
            </div>
        </div>
    </div>

    <dialog class="js-filter-dialog property-listing-filter">
        <form class="property-listing-filter__form">
            <div class="property-listing-filter__header">
                Filters <a href="#" class="js-close property-listing-filter__close-button"><span>Close</span></a>
            </div>
            <div class="property-listing-filter__form-inner">
                <fieldset class="property-listing-filter__property-types">
                    <legend class="property-listing-filter__filter-title">Property Type</legend>
                    <div class="js-property-types"></div>
                </fieldset>
                <fieldset class="property-listing-filter__size">
                    <legend class="property-listing-filter__filter-title">Square Footage</legend>
                    <div class="js-size" data-type="squareFootageValue">
                        <div class="slider__range-container slider__range-container--with-bars js-slider-container">
                            <div class="slider__range-tracker"></div>
                            <div class="slider__range-tracker-between js-tracker-between"></div>
                            <label for="range-lower-size"></label><input data-key="size" class="slider__range-lower js-range-lower js-min-size" type="range" min="0" max="20000" value="0" name="min-size" id="range-lower-size">
                            <label for="range-upper-size"></label><input class="slider__range-upper js-range-upper js-max-size" type="range" min="0" max="20000" value="20000" name="max-size" id="range-upper-size">
                        </div>
                        <div class="slider__min-max-container">
                            <div class="slider__min-text js-min">0</div>
                            <div class="slider__max-text js-max"></div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="property-listing-filter__locations">
                    <legend class="property-listing-filter__filter-title">Location</legend>
                    <div class="property-listing-filter__checkbox-container">
                        <label class="property-listing-filter__checkbox-label">
                            <input data-key="location" type="checkbox" value="West Bay" name="location"><span class="property-listing-filter__checkbox-text">West Bay</span>
                        </label>
                    </div>
                    <div class="property-listing-filter__checkbox-container">
                        <label class="property-listing-filter__checkbox-label">
                            <input type="checkbox" value="Camana Bay" name="location"><span class="property-listing-filter__checkbox-text">Camana Bay</span>
                        </label>
                    </div>
                    <div class="property-listing-filter__checkbox-container">
                        <label class="property-listing-filter__checkbox-label">
                            <input type="checkbox" value="George Town" name="location"><span class="property-listing-filter__checkbox-text">George Town</span>
                        </label>
                    </div>
                </fieldset>
                <fieldset class="property-listing-filter__building-type">
                    <legend class="property-listing-filter__filter-title">Buildings</legend>
                    <div class="js-building-type"></div>
                </fieldset>
                <fieldset class="property-listing-filter__price">
                    <legend class="property-listing-filter__filter-title">Price</legend>
                    <div class="js-price" data-type="priceValue">
                        <div class="slider__range-container slider__range-container--with-bars js-slider-container">
                            <div class="slider__range-tracker"></div>
                            <div class="slider__range-tracker-between js-tracker-between"></div>
                            <label for="range-lower-price"></label><input data-key="price" class="slider__range-lower js-range-lower js-min-price" type="range" min="0" max="5000000" value="0" name="min-price" id="range-lower-price">
                            <label for="range-upper-price"></label><input class="slider__range-upper js-range-upper js-max-price" type="range" min="0" max="5000000" value="5000000" name="max-price" id="range-upper-price">
                        </div>
                        <div class="slider__min-max-container">
                            <div class="slider__min-text"><span>&#36;</span><span class="js-min">0</span></div>
                            <div class="slider__max-text"><span>&#36;</span><span class="js-max"></span></div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="property-listing-filter__bedrooms">
                    <legend class="property-listing-filter__filter-title">Bedrooms</legend>
                    <div class="js-bedrooms">
                        <div class="slider__range-container js-slider-container">
                            <div class="slider__range-tracker"></div>
                            <div class="slider__range-tracker-between js-tracker-between"></div>
                            <label for="range-lower-bedrooms"></label><input data-key="bedrooms" class="slider__range-lower js-range-lower js-min-bedrooms" type="range" min="0" max="100000000" value="0" name="min-bedrooms" id="range-lower-bedrooms">
                            <label for="range-upper-bedrooms"></label><input class="slider__range-upper js-range-upper js-max-bedrooms" type="range" min="0" max="100000000" value="100000000" name="max-bedrooms" id="range-upper-bedrooms">
                        </div>
                        <div class="slider__min-max-container">
                            <div class="slider__min-text js-min">0</div>
                            <div class="slider__max-text js-max"></div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="property-listing-filter__bathrooms">
                    <legend class="property-listing-filter__filter-title">Bathrooms</legend>
                    <div class="js-bathrooms">
                        <div class="slider__range-container js-slider-container">
                            <div class="slider__range-tracker"></div>
                            <div class="slider__range-tracker-between js-tracker-between"></div>
                            <label for="range-lower-bathrooms"></label><input data-key="bathrooms" class="slider__range-lower js-range-lower js-min-bathrooms" type="range" min="0" max="100000000" value="0" name="min-bathrooms" id="range-lower-bathrooms">
                            <label for="range-upper-bathrooms"></label><input class="slider__range-upper js-range-upper js-max-bathrooms" type="range" min="0" max="100000000" value="100000000" name="max-bathrooms" id="range-upper-bathrooms">
                        </div>
                        <div class="slider__min-max-container">
                            <div class="slider__min-text js-min">0</div>
                            <div class="slider__max-text js-max"></div>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="property-listing-filter__amenities">
                    <legend class="property-listing-filter__filter-title">Amenities</legend>
                    <div class="js-amenities"></div>
                    <div class="js-amenities-toggle">
                        <span class="property-listing-filter__amenities-show">Show more</span>
                        <span class="property-listing-filter__amenities-hide">Show less</span>
                    </div>
                </fieldset>
            </div>
            <div class="property-listing-filter__footer">
                <input type="reset" />
                <input type="submit" value="Show Properties" />
            </div>
        </form>
    </dialog>
</div>

<link media="all" rel="stylesheet" href="/assets/themes/default/css/footer.css?cb=">

<footer class="site-footer  " data-module="footer">
    <div class="grid-container site-footer__container">
        <div class="grid-x site-footer__content">
            <div class="site-footer__nav-container">
                <div class="site-footer__nav-columns">
                    <nav class="site-footer__nav" role="navigation">
                        <h2 class="site-footer__links-title">
                            <a href="#">Component</a>
                        </h2>
                        <ul class="site-footer__list">
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    About us
                                </a>
                            </li>
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    What’s covered
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <nav class="site-footer__nav" role="navigation">
                        <h2 class="site-footer__links-title">
                            <a href="#">Here for you</a>
                        </h2>
                        <ul class="site-footer__list">
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    Support
                                </a>
                            </li>
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    Contact us
                                </a>
                            </li>
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    Submit a claim
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <nav class="site-footer__nav" role="navigation">
                        <h2 class="site-footer__links-title">
                            <a href="#">Component</a>
                        </h2>
                        <ul class="site-footer__list">
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    About us
                                </a>
                            </li>
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    What’s covered
                                </a>
                            </li>
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    Pricing
                                </a>
                            </li>
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    FAQs
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <nav class="site-footer__nav" role="navigation">
                        <h2 class="site-footer__links-title">
                            <a href="#">Here for you</a>
                        </h2>
                        <ul class="site-footer__list">
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    Support
                                </a>
                            </li>
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    Contact us
                                </a>
                            </li>
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    Submit a claim
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <nav class="site-footer__nav" role="navigation">
                        <h2 class="site-footer__links-title">
                            <a href="#">Component</a>
                        </h2>
                        <ul class="site-footer__list">
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    About us
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <nav class="site-footer__nav" role="navigation">
                        <h2 class="site-footer__links-title">
                            <a href="#">Here for you</a>
                        </h2>
                        <ul class="site-footer__list">
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    Support
                                </a>
                            </li>
                            <li class="site-footer__item">
                                <a href="#" class="site-footer__link">
                                    Contact us
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="site-footer__social-and-richtext-container">
                    <nav class="site-footer__social-links js-social-links">
                        <h2 class="site-footer__links-title">Follow us on social</h2>
                        <div class="site-footer__social-links-container">

                            <a class="social-links__link js-social-link" href="#" target="_blank" data-type="facebook" rel="noopener">
                                <span class="icon-facebook"></span> <span class="text">Facebook</span>
                            </a>
                            <a class="social-links__link js-social-link" href="#" target="_blank" data-type="twitter" rel="noopener">
                                <span class="icon-twitter"></span> <span class="text">Twitter</span>
                            </a>
                            <a class="social-links__link js-social-link" href="#" target="_blank" data-type="instagram" rel="noopener">
                                <span class="icon-instagram"></span> <span class="text">Instagram</span>
                            </a>
                            <a class="social-links__link js-social-link" href="#" target="_blank" data-type="youtube" rel="noopener">
                                <span class="icon-youtube"></span> <span class="text">YouTube</span>
                            </a>
                            <a class="social-links__link js-social-link" href="#" target="_blank" data-type="pinterest" rel="noopener">
                                <span class="icon-pinterest"></span> <span class="text">Pinterest</span>
                            </a>
                            <a class="social-links__link js-social-link" href="#" target="_blank" data-type="tripadvisor" rel="noopener">
                                <span class="icon-tripadvisor"></span> <span class="text">TripAdvisor</span>
                            </a>
                        </div>
                    </nav>
                    <div class="site-footer__rich-text" role="complementary">
                        <h2 class="site-footer__links-title">richTextBlockTitle</h2>
                        <div class="site-footer__text">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="site-footer__logo">
                <a href="/" class="site-footer__logo--link" title="Default alt">

                    <img src="/media/logo.svg" alt="Default alt" loading="lazy" />
                </a>
            </div>
        </div>
    </div>
    <div class="grid-container">
        <div class="site-footer__footer">

            <ul class="site-footer__hygiene-links">
                <li class="site-footer__hygiene-link-item">
                    <a href="#" class="site-footer__hygiene-link">
                        Privacy Statement
                    </a>
                </li>
                <li class="site-footer__hygiene-link-item">
                    <a href="#" class="site-footer__hygiene-link">
                        Disclaimer
                    </a>
                </li>
                <li class="site-footer__hygiene-link-item">
                    <a href="#" class="site-footer__hygiene-link">
                        General Terms and Condition
                    </a>
                </li>
                <li class="site-footer__hygiene-link-item">
                    <a href="#" class="site-footer__hygiene-link">
                        Sitemap
                    </a>
                </li>
            </ul>

            <div class="site-footer__copyright">
                <p class="site-footer__copyright-text">Default 2019 ©</p>
                <p class="site-footer__company-info-text">Site Name Address | Registered company No. 12345678</p>
            </div>

        </div>
    </div>
</footer>
{{ render "@header" }}

{{ render "@property-listing" }}

{{ render "@footer" }}
{
  "theme": "default",
  "firstInstance": true
}

No notes defined.