Rentvine Widget Styles
Modern
View ExampleList
<div id="rentvine-property-list-view" class="rentvine-widget property-list">
{% rentvine_plugin %}
<form id="rentvine-search-form" class="prop-search-form rvw-mb-3" _lpchecked="1">
<div class="rvw-container-fluid">
<div class="rvw-row">
<div class="rvw-col-md-12 rvw-col-lg-5">
<div class="rvw-form-group">
{% rentvine_searchKeyword %}
</div>
</div>
<div class="rvw-col-lg-7">
<div class="rvw-row rvw-align-items-end">
<div class="rvw-col-sm-6 rvw-col-lg-3">
<div class="rvw-form-group">
{% capture searchMinRent %}{% rentvine_searchMinRent %}{% endcapture %}
{{ searchMinRent | replace: 'Minimum Rent', 'Min Rent' }}
</div>
</div>
<div class="rvw-col-sm-6 rvw-col-lg-3">
<div class="rvw-form-group">
{% capture searchMaxRent %}{% rentvine_searchMaxRent %}{% endcapture %}
{{ searchMaxRent | replace: 'Maximum Rent', 'Max Rent' }}
</div>
</div>
<div class="rvw-col-sm-6 rvw-col-lg-3">
<div class="rvw-form-group">
{% rentvine_searchBeds %}
</div>
</div>
<div class="rvw-col-sm-6 rvw-col-lg-3">
<div class="rvw-form-group">
{% rentvine_searchBaths %}
</div>
</div>
</div>
</div>
</div>
<div class="rvw-row rvw-align-items-end">
<div class="rvw-col-sm-6 rvw-col-lg-3">
<div class="rvw-form-group">
{% rentvine_searchPropertyTypes %}
</div>
</div>
<div class="rvw-col-sm-6 rvw-col-lg-3">
<div class="rvw-form-group">
{% rentvine_searchPets %}
</div>
</div>
<div class="rvw-col-sm-6 rvw-col-lg-3">
<div class="rvw-form-group">
{% rentvine_searchSort %}
</div>
</div>
<div class="rvw-col-sm-6 rvw-col-lg-3">
<label for="rentvine-search-btn"><span class="sr-only">Submit</span></label><br/>
<button id="rentvine-search-btn" class="rvw-btn rvw-btn-primary rvw-btn-block">
Submit
</button>
</div>
</div>
</div>
</form>
{% assign listing_count = listings | size %}
{% if listing_count <= 0 %}
<div class="rvw-text-center rvw-mt-3">
<h4>No Listings Found!</h4>
</div>
{% else %}
<ul class="rvw-nav rvw-nav-pills rvw-mb-3" id="rentvine-property-list-tab-list" role="tablist">
<li class="rvw-nav-item">
<a class="rvw-nav-link rvw-show rvw-active" id="rentvine-property-list-tab" href="#rentvine-property-list" role="tab" aria-controls="rentvine-property-list" aria-selected="true">List</a>
</li>
<li class="rvw-nav-item">
<a class="rvw-nav-link" id="rentvine-property-map-tab" href="#rentvine-property-map" role="tab" aria-controls="rentvine-property-map" aria-selected="false">Map</a>
</li>
</ul>
<div class="rvw-tab-content" id="rentvine-property-list-tab-content">
<div class="rvw-tab-pane rvw-fade rvw-active" id="rentvine-property-list" role="tabpanel" aria-labelledby="rentvine-property-list-tab">
<div class="rvw-row">
{% for listing in listings %}
<div class="rvw-col-md-6 rvw-col-lg-4 rvw-mb-4">
<a href="{% rentvine_listingUrl %}" data-id="{{ listing.listing.propertyListingID }}" class="rvw-d-block rvw-h-100 rvw-property">
<div class="rvw-card rvw-h-100">
<div class="rvw-card-image-box">
<img class="rvw-card-image" src="{{ listing.image | getListingImageUrl: "small" }}" alt="{{ listing.unit.address }} {{ listing.unit.address2 }}, {{ listing.unit.city }}, {{ listing.unit.state }} {{ listing.unit.postalCode }}">
{% if listing.listing.virtualTour %}
<div class="rvw-card-video-tour"><img src="{% rentvine_videoTourIconUrl %}" alt="Virtual Tour" /></div>
{% endif %}
</div>
<div class="rvw-card-body">
<h3 class="rvw-card-title rvw-text-primary">{{ listing.unit.rent | money }} <span class="rvw-text-sm rvw-text-muted">USD / Month</span></h3>
<div class="rvw-d-flex rvw-flex-wrap rvw-icon-list">
<div class="rvw-icon-list-item">
<img class="rvw-icon" src="/_system/plugins/rentvine/images/bed-icon.svg" />
<span class="rvw-icon-text">
{% if listing.unit.beds == 0 %}
Studio
{% else %}
{{ listing.unit.beds }} bd
{% endif %}
</span>
</div>
<div class="rvw-icon-list-item">
<img class="rvw-icon" src="/_system/plugins/rentvine/images/bath-icon.svg" />
<span class="rvw-icon-text">
{% if listing.unit.fullBaths == 1 %}Full Bath{%else%}Full Baths{%endif%}: {{ listing.unit.fullBaths | replace: '.00', '' }}<br/>
{% if listing.unit.halfBaths != 0 %}
{% if listing.unit.halfBaths == 1 %}Half Bath
{%else%}Half Baths{%endif%}: {{ listing.unit.halfBaths | replace: '.00', '' }}{% endif %}
</span>
</div>
{% if listing.listing.size %}
<div class="rvw-icon-list-item">
<img class="rvw-icon" src="/_system/plugins/rentvine/images/sqft-icon.svg" />
<span class="rvw-icon-text">{{ listing.listing.size }} sqft</span>
</div>
{% endif %}
</div>
<div class="rvw-card-text">
{{ listing.unit.address }} {{ listing.unit.address2 }}<br/>
{{ listing.unit.city }}, {{ listing.unit.state }} {{ listing.unit.postalCode }}<br/>
<span class="text-muted">{{ listing.property.propertyTypeID | propertyType }}</span>
<div class="prop-availability rvw-mt-3">
Available:
{{ listing.listing.availabilityDate | availabilityDate }}
</div>
</div>
<label for="rentvine-search-view-details-btn_{{ lisitng.id }}"><span class="sr-only">Submit</span></label>
<button id="rentvine-search-view-details-btn_{{ listing.id }}" class="rvw-btn rvw-btn-block rvw-btn-primary">View Details</button>
</div>
</div>
</a>
</div>
{% endfor %}
</div>
{% rentvine_pagination %}
</div>
<div class="rvw-tab-pane rvw-fade" id="rentvine-property-map" role="tabpanel" aria-labelledby="rentvine-property-map-tab">
<div id="rentvine-property-map-panel" style="height:500px;" data-lat="{{map.latitude}}" data-lng="{{map.longitude}}"></div>
</div>
</div>
{% endif %}
</div>
Details
<div class="rentvine-widget">
{% rentvine_plugin %}
{% assign virtualTourType = listing | getVirtualTourType %}
<div id="rentvine-property-detail-view">
{% if leadSent %}
<div class="rvw-alert rvw-alert-success" role="alert">
Message has been sent!
</div>
{% endif %}
<div class="rvw-row rvw-mb-4">
<div class="rvw-col-sm-6 rvw-offset-sm-6 rvw-col-md-4 rvw-offset-md-8">
<div class="rvw-text-right">
<a href="/{{plugin.url}}" class="rvw-btn rvw-btn-primary">Back to Search</a>
</div>
</div>
</div>
<h1 class="rvw-prop-view-title rvw-my-4">{{ listing.headline }}</h1>
<div class="rvw-row">
<div class="rvw-col-lg-8 pr-lg-4">
<div class="rvw-property-view-card">
<div class="rvw-property-view-image">
{% assign imageCount = images | size %}
{% if imageCount > 0 %}
<a id="rentvine-property-view-main-image" href="{{ images[0].large }}" target="_blank" data-rvw-lightbox="property">
<img src="{{ images[0].large }}" class="img-fluid" alt="Responsive image"/>
</a>
<div class="rvw-property-view-gallery">
<ul>
{% for i in (1..imageCount) %}
{% if i < images.size %}
<li>
<a href="{{ images[i].large }}" target="_blank" data-rvw-lightbox="property">
<img src="{{ images[i].small }}" alt="View Full Image"/>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="rvw-property-view-image-count">
<label for="rentvine-property-view-gallery-btn"><span class="sr-only">View Images</span></label>
<button id="rentvine-property-view-gallery-btn" class="rvw-btn">See {{imageCount}} Photos</button>
</div>
{% else %}
<img src="{% rentvine_noImageUrl %}" class="img-fluid" alt="No Images"/>
{% endif %}
</div>
<div class="rvw-property-view-summary">
<div class="rvw-row">
<div class="rvw-col-sm-6">
<h3 class="rvw-property-view-rent">{{ unit.rent | money }} <span class="rvw-text-sm rvw-text-muted">USD / Month</span></h3>
</div>
<div class="rvw-col-sm-6 rvw-order-sm-first">
<div class="rvw-property-view-address">
<strong class="rvw-property-view-address-1">{{ unit.address }} {{ unit.address2 }}</strong><br/>
{{ unit.city }}, {{ unit.stateID }} {{ unit.postalCode }}
</div>
</div>
<div class="rvw-col-12">
<div class="rvw-d-flex rvw-flex-wrap rvw-icon-list">
<div class="rvw-icon-list-item">
<img class="rvw-icon" src="/_system/plugins/rentvine/images/property-type-icon.svg" />
<span class="rvw-icon-text">
{% if listing.isFurnished == "1" %}
Furnished<br>
{% endif %}
{{ property.propertyTypeID | propertyType }}
</span>
</div>
<div class="rvw-icon-list-item">
<img class="rvw-icon" src="/_system/plugins/rentvine/images/bed-icon.svg" />
<span class="rvw-icon-text">
{% if unit.beds == 0 %}
Studio
{% else %}
{{ unit.beds }} bd
{% endif %}
</span>
</div>
<div class="rvw-icon-list-item">
<img class="rvw-icon" src="/_system/plugins/rentvine/images/bath-icon.svg" />
<span class="rvw-icon-text">
<span class="value">{{ unit.fullBaths }}</span>
<span class="label">{% if unit.baths == 1 %}Full Bath{%else%}Full Baths{%endif%}</span>
{% if unit.halfBaths != 0 %}
{% if unit.halfBaths == 1 %}
<span class="value">{{ unit.halfBaths }}</span>
<span class="label">Half Bath{%else%}Half Baths{%endif%}</span>
{% endif %}
</span>
</div>
{% if unit.size %}
<div class="rvw-icon-list-item">
<img class="rvw-icon" src="/_system/plugins/rentvine/images/sqft-icon.svg" />
<span class="rvw-icon-text">{{ unit.size }} sqft</span>
</div>
{% endif %}
</div>
</div>
<div class="rvw-col-md-8 rvw-col-sm-6 rvw-pr-sm-0">
<div class="rvw-btn-list">
{% if listing.applicationUrl != 0 %}
<a href="{{ listing.applicationUrl }}" target="_blank" class="rvw-btn">Apply Now</a>
{% endif %}
{% if listing.showingUrl != 0 %}
<a href="{{ listing.showingUrl }}" target="_blank" class="rvw-btn">Schedule Showing</a>
{% endif %}
</div>
</div>
<div class="rvw-col-md-4 rvw-col-sm-6 rvw-align-self-end">
<div class="rvw-property-view-share">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
<a class="a2a_button_pinterest"></a>
</div>
<script async="async" src="https://static.addtoany.com/menu/page.js"></script>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="rvw-col-md-12 rvw-order-lg-2 rvw-mt-lg-4">
<ul class="rvw-nav rvw-nav-pills rvw-mb-3" id="rentvine-property-detail-tab-list" role="tablist">
<li class="rvw-nav-item">
<a class="rvw-nav-link rvw-active" id="rentvine-property-detail-tab" href="#rentvine-property-view-details" role="tab" aria-controls="rentvine-property-list" aria-selected="true">Details</a>
</li>
{% if features.size > 0 %}
<li class="rvw-nav-item">
<a class="rvw-nav-link" id="rentvine-property-features-tab" href="#rentvine-property-view-features" role="tab" aria-controls="rentvine-property-map" aria-selected="false">Amenities</a>
</li>
{% endif %}
{% if virtualTourType %}
<li class="rvw-nav-item">
<a class="rvw-nav-link" id="rentvine-property-video-tab" href="#rentvine-property-view-video" role="tab" aria-controls="rentvine-property-video" aria-selected="false">Video</a>
</li>
{% endif %}
<li class="rvw-nav-item">
<a class="rvw-nav-link" id="rentvine-property-map-tab" href="#rentvine-property-view-map" role="tab" aria-controls="rentvine-property-map" aria-selected="false">Map</a>
</li>
</ul>
<div class="rvw-tab-content" id="rentvine-property-list-tab-content">
<div class="rvw-tab-pane rvw-fade rvw-show rvw-active" id="rentvine-property-view-details" role="tabpanel" aria-labelledby="rentvine-property-detail-tab">
<hr>
<h3>Property Description</h3>
<p>
{{ listing.description }}
</p>
<dl>
{% if listing.lotSize != "" %}
<dt>Lot Size</dt>
<dd>{{ listing.lotSize }} acres</dd>
{% endif %}
{% assign includedUtilities = listing | getIncludedUtilities %}
{% if includedUtilities %}
<dt>Included Utilities</dt>
<dd>{{ includedUtilities }}</dd>
{% endif %}
{% if listing.heatType %}
<dt>Heat Type</dt>
<dd>{{ listing.heatType }}</dd>
{% endif %}
{% if property.yearBuilt %}
<dt>Year Built</dt>
<dd>{{ property.yearBuilt }}</dd>
{% endif %}
</dl>
<hr/>
{% if listing.acceptDogs != "" or listing.acceptCats != "" or listing.petDescription != "" or listing.acceptSmoking != "" %}
<h3>Restrictions</h3>
<dl>
{% if listing.acceptDogs != "" %}
<dt>Dogs Accepted</dt>
<dd>{{ listing.acceptDogs | boolean }}</dd>
{% endif %}
{% if listing.acceptCats != "" %}
<dt>Cats Accepted</dt>
<dd>{{ listing.acceptCats | boolean }}</dd>
{% endif %}
{% if listing.petDescription %}
<dt>Pet Details</dt>
<dd>{{ listing.petDescription }}</dd>
{% endif %}
{% if listing.acceptSmoking != "" %}
<dt>Smoking Allowed</dt>
<dd>{{ listing.acceptSmoking | boolean }}</dd>
{% endif %}
</dl>
<hr/>
{% endif %}
<h3>Lease Details</h3>
<dl>
<dt>Available</dt>
<dd>{{ listing.listing.availabilityDate | availabilityDate }}</dd>
{% if unit.securityDeposit %}
<dt>Security Deposit</dt>
<dd>{{ unit.securityDeposit }}</dd>
{% endif %}
{% if listing.depositDescription %}
<dt>Deposit Details</dt>
<dd>{{ listing.depositDescription }}</dd>
{% endif %}
{% if listing.leaseDescription %}
<dt>Lease Details</dt>
<dd>{{ listing.leaseDescription }}</dd>
{% endif %}
{% if listing.acceptAssistance != "" %}
<dt>Housing Assistance</dt>
<dd>{{ listing.acceptAssistance | boolean: "Available", "Not Available" }}</dd>
{% endif %}
</dl>
<hr/>
{% if listing.areaInformation or listing.schools %}
<h3>Area Information</h3>
<dl>
{% if listing.areaInformation %}
<dt>Area Information</dt>
<dd>{{ listing.areaInformation }}</dd>
{% endif %}
{% if listing.schools %}
<dt>Housing Assistance</dt>
<dd>{{ listing.schools }}</dd>
{% endif %}
</dl>
<hr/>
{% endif %}
{% if listing.parkingTypeID and listing.parkingSpaces %}
<h3>Parking</h3>
<dl>
<dt>Parking Type</dt>
<dd>{{ listing.parkingTypeID | parkingType }}</dd>
<dt>Spaces Available</dt>
<dd>{{ listing.parkingSpaces }}</dd>
</dl>
<hr/>
{% endif %}
<h3>Listing Agent</h3>
<dt>Name</dt>
<dd>{{ listing.name }}</dd>
<dt>Phone</dt>
<dd>{{ listing.phone | phone }}</dd>
<dt>Email</dt>
<dd><a href="mailto:{{ listing.email }}">{{ listing.email }}</a></dd>
</div>
{% if features.size > 0 %}
<div class="rvw-tab-pane rvw-fade" id="rentvine-property-view-features" role="tabpanel" aria-labelledby="rentvine-property-features-tab">
<hr>
{% for featureCategory in features %}
<h4>{{ featureCategory.categoryName }}</h4>
<div class="row rvw-mb-3">
{% for feature in featureCategory.features %}
<div class="col-md-4 col-sm-6">{{ feature }}</div>
{% endfor %}
</div>
<hr />
{% endfor %}
</div>
{% endif %}
{% if virtualTourType %}
<div class="rvw-tab-pane rvw-fade" id="rentvine-property-view-video" role="tabpanel" aria-labelledby="rentvine-property-video-tab">
{% if virtualTourType == "youtube" %}
<div class="rvw-embed-responsive embed-responsive-16by9">
<iframe class="rvw-embed-responsive-item" width="" height="" src="https://www.youtube.com/embed/{{ listing | getVirtualTourVideoID }}" frameborder="0" allowtransparency="allowtransparency" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowFullScreen"></iframe>
</div>
{% else if virtualTourType == "vimeo" %}
<div class="rvw-embed-responsive embed-responsive-16by9">
<iframe class="rvw-embed-responsive-item" width="" height="" src="https://player.vimeo.com/video/{{ getVirtualTourVideoID }}?title=0&byline=0&portrait=0" frameborder="0" allowtransparency="allowtransparency" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowFullScreen"></iframe>
</div>
{% endif %}
</div>
{% endif %}
<div class="rvw-tab-pane rvw-fade" id="rentvine-property-view-map" role="tabpanel" aria-labelledby="rentvine-property-map-tab">
<div id="rentvine-property-view-map-panel" style="height:500px;" data-lat="{{ unit.latitude }}" data-lng="{{ unit.longitude }}" data-title="{{ unit.address }}"></div>
</div>
</div>
</div>
<div class="rvw-col-lg-4 rvw-pt-lg-0 rvw-pt-sm-4 rvw-order-lg-1">
<div class="rvw-form-container">
<div class="rvw-form-header text-center">
<h3>Inquire Now</h3>
<div class="rvw-text-primary rvw-lead rvw-mb-3 text-center phone">
<i class="fa fa-phone"></i>
<a href="tel:{{ listing.phone | phone }}">{{ listing.phone | phone }}</a>
</div>
</div>
<form id="rentvine-property-lead-form" class="rvw-form" method="POST">
<div class="rvw-form-group">
{% rentvine_leadName %}
</div>
<div class="rvw-form-group">
{% rentvine_leadEmail %}
</div>
<div class="rvw-form-group">
{% rentvine_leadPhone %}
</div>
<div class="rvw-form-group rvw-form-group-textarea">
{% rentvine_leadMessage %}
</div>
{% rentvine_nonce %}
{% rentvine_honeypot %}
<button type="submit" class="rvw-btn rvw-btn-primary rvw-btn-block">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@graph":
[
{
"@type": "RealEstateListing",
"name": "{{ listing.headline }}",
"image": {
"@type": "ImageObject",
"url": "{{ images[0].large }}"
},
"description": "{{ listing.description | strip_html }}",
"url": "{% snippet name='website-url' %}/{{plugin.url}}"
},
{
"@type": "Place",
"address": {
"@type": "PostalAddress",
"addressLocality": "{{ unit.city }}",
"addressRegion": "{{ unit.stateID }}",
"postalCode": "{{ unit.postalCode }}",
"streetAddress": "{{ unit.address }} {{ unit.address2 }}"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": "{{ unit.latitude }}",
"longitude": "{{ unit.longitude }}"
},
"smokingAllowed": "{{ listing.acceptSmoking }}",
"description": "{{ listing.description | strip_html }}",
"url": "{% snippet name='website-url' %}/{{plugin.url}}"
},
{
"@type": "Accommodation",
"numberOfBedrooms": "{{ unit.beds }}",
"numberOfBathroomsTotal": "{{ unit.baths }}",
"leaseLength": "{{ listing.leaseDescription }}",
"accommodationCategory": "{{ property.propertyTypeID | propertyType }}"
},
{
"@type": "RentAction",
"priceSpecification":
{
"@type": "UnitPriceSpecification",
"price": "{{ unit.rent | money }}",
"priceCurrency": "USD",
"name": "Monthly Rent",
"referenceQuantity":
{
"@type": "QuantitativeValue",
"value": "1",
"unitCode": "MON"
}
},
"landlord": {
"@type": "Organization",
"name": "{% snippet name='company-name' %}"
},
"description": "{{ listing.description | strip_html }}",
"url": "{% snippet name='website-url' %}/{{plugin.url}}",
"name": "{{ listing.headline }}",
"image": {
"@type": "ImageObject",
"url": "{{ images[0].large }}"
},
"location": {
"@type": "PostalAddress",
"addressLocality": "{{ unit.city }}",
"addressRegion": "{{ unit.stateID }}",
"postalCode": "{{ unit.postalCode }}",
"streetAddress": "{{ unit.address }} {{ unit.address2 }}"
},
"startTime": "{{ listing.availabilityDate }}"
}
]
}
</script>
CSS
/* ===============================================================
Rentvine Plugin
================================================================== */
/* :root {
--primary: #007bff;
--primary-rgb: 0,123,255;
--secondary: #707070;
--dark: #243642;
--gray: #f2f2f2;
--gray-dark: #252525;
--muted: #707070;
--body-text: #212529;
--text-dark: #343a40;
--border-color: #cccccc;
--box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 2px 4px rgba(0, 0, 0, 0.23);
} */
/* ===============================================================
Modifiers
================================================================== */
/* Global */
a, button, .rvw-btn { transition: 0.5s; }
a:hover, button:hover, .rvw-btn:hover { transition: 0.5s; }
.rentvine-widget button:focus { outline: 5px auto var(--primary); }
.rvw-btn { border-radius: 0; }
.rvw-align-items-end { align-items: flex-end; }
.rvw-align-self-end { align-self: flex-end; }
.rvw-h-100 { height: 100%; }
.rvw-icon-list { margin: 10px -5px; justify-content: flex-start; }
.rvw-icon-list-item { padding: 5px; flex: 0 1 33.33%; display: flex; align-items: center; }
.rvw-icon { height: 30px; width: 30px; margin: 0 8px 0 0; text-align: center; display: block; }
.rvw-icon[src*='sqft'] { margin-right: 5px; }
.rvw-icon-text { font-size: 14px; font-weight: 500; display: inline-block; line-height: 1.2; }
#rentvine-property-list-view, #rentvine-property-detail-view { line-height: 1.45; }
@media (min-width: 992px) {
.rvw-order-lg-0 { order: 0;}
.rvw-order-lg-1 { order: 1; }
.rvw-order-lg-2 { order: 2; }
}
@media (min-width: 768px) {
.rvw-order-md-first { order: -1; }
.rvw-order-md-0 { order: 0;}
.rvw-order-md-1 { order: 1; }
.rvw-order-md-2 { order: 2; }
}
/* List Template
==================================================================== */
/* Search Form */
#rentvine-search-form { padding: 14px 30px 35px 30px; background: var(--gray); border: 1px solid var(--border-color); }
#rentvine-search-form .rvw-form-group { margin: 1em 0 0; }
#rentvine-search-form label { margin-bottom: .3em; }
.rvw-form-control, .rvw-input-group-text { border-radius: 0; }
@media (max-width: 425px) {
#rentvine-search-form { padding: 14px 15px 35px 15px; }
}
/* Property Cards */
.rvw-card { overflow: hidden; border-radius: 0; transition: 0.8s; }
.rvw-card-image-box { min-height: unset; height: 0; padding-top: 60%; overflow: hidden; }
.rvw-card-image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; transition: 0.5s; }
.rvw-card-body { color: var(--body-text); }
.rvw-card-title { font-size: 20px; font-weight: 600; }
.rvw-card-title .rvw-text-sm { font-size: 13px; font-weight: 300; }
.rvw-property:hover .rvw-card { box-shadow: var(--box-shadow); transition: 0.8s; }
.rvw-property:hover .rvw-card-image { transform: scale(1.05); transition: 0.8s; }
/* Map Popups */
#rentvine-property-map-panel .rentvine-widget { font-size: 14px; color: #000; }
.rvw-map-property-info-window-img { position: relative; width: 100%; height: 0; padding-top: 60%; margin-bottom: 5px; overflow: hidden; }
.rvw-map-property-info-window-img img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; transition: .8s ease; }
.rvw-map-property-info-window-img:hover img { transform: scale(1.05); transition: .8s ease; }
.rvw-map-property-info-window-img ~ div { display: inline-block; }
.rvw-map-property-info-window-amount ~ div::before { content: '|'; padding: 0 5px; }
.rvw-map-property-info-window-amount { margin: 10px 0 5px; }
.rvw-map-property-info-window-amount::before { content: '$'; }
.rvw-map-property-info-window-beds { margin: 5px 0; }
.rvw-map-property-info-window-beds::after { content: ' Beds'; }
.rvw-map-property-info-window-baths::after { content: ' Baths'; }
/* Details Template
==================================================================== */
.rvw-prop-view-title { text-transform: none; }
.rvw-btn-list { display: inline-flex; flex-wrap: wrap; margin: 0 -8px; }
.rvw-btn-list .rvw-btn { margin: 8px; background-color: var(--primary); border: 1px solid var(--primary); color: #fff; min-width: 170px; }
.rvw-btn-list .rvw-btn:hover { background: #fff; color: var(--primary); }
@media (max-width: 575.98px) {
.rvw-btn-list { justify-content: center; }
}
/* Property View Image */
#rentvine-property-view-main-image { display: block; max-height: 400px; overflow: hidden; height: 100%; }
#rentvine-property-view-main-image img { object-fit: cover; height: 100%!important; width: 100%!important; max-height: 100%!important; transition: 0.8s ease; }
#rentvine-property-view-main-image:hover { cursor: zoom-in; }
#rentvine-property-view-gallery-btn { background: rgba(0,0,0,.6)!important; color: #fff!important; }
.rvw-property-view-image { overflow: hidden; flex: 1 1 auto; }
.rvw-property-view-image:hover #rentvine-property-view-gallery-btn { background-color: var(--primary)!important; }
.rvw-property-view-image:hover img { transform: scale(1.05); transition: 0.8s ease; }
/* Property View Summary */
#rentvine-property-detail-view .rvw-property-view-card { box-shadow: none; border: 1px solid var(--border-color); display: flex; flex-direction: column; height: 100%; }
#rentvine-property-detail-view .rvw-property-view-summary { padding: 20px 25px 15px; }
.rvw-property-view-address { line-height: 1.2; }
.rvw-property-view-address-1 { font-size: 20px; }
.rvw-property-view-rent { text-align: right; font-weight: bold; font-size: 24px; color: var(--primary); line-height: 1.1; }
.rvw-property-view-rent .rvw-text-sm { font-size: 13px; font-weight: 400; line-height: 1; display: block; }
.rvw-property-view-summary .rvw-icon-list { justify-content: flex-start; flex-wrap: wrap; text-align: center; margin: 10px -15px 15px; }
.rvw-property-view-summary .rvw-icon-list-item { flex: 0 0 auto; display: block; padding: 20px 15px 0; }
.rvw-property-view-summary .rvw-icon { margin: 0 auto 8px; }
.rvw-property-view-share { text-align: right; }
.rvw-property-view-share .a2a_default_style { display: inline-block; }
@media (min-width: 768px) {
.rvw-property-view-summary .rvw-icon-list-item:not(:last-child) { margin-right: 35px; }
}
@media (max-width: 991px) {
#rentvine-property-detail-view .rvw-property-view-card { height: auto; margin-bottom: 30px; }
}
@media (max-width:575.98px) {
#rentvine-property-detail-view .rvw-property-view-summary { padding: 20px 15px 15px; }
.rvw-property-view-summary, .rvw-property-view-rent { text-align: center; }
.rvw-property-view-summary .rvw-icon-list { justify-content: center; margin-left: -8px; margin-right: -8px; }
.rvw-property-view-summary .rvw-icon-list-item { flex: 0 1 98px; padding-right: 8px; padding-left: 8px; }
.rvw-property-view-address, .rvw-property-view-share { margin-top: 15px; }
}
@media (max-width:475px) {
.rvw-property-view-summary .rvw-icon-list-item:first-child { flex: 1 1 100%; }
}
/* Property View Form */
.rvw-form-container { border: 1px solid var(--border-color); background: var(--gray); height: 100%; padding: 35px 30px; }
.rvw-form-container label { margin-bottom: .3em; }
.rvw-form-container textarea { min-height: 7em; }
.rvw-form-header { font-size: 20px; }
.rvw-form-header h3 { font-size: 30px; }
@media (max-width: 991px) {
.rvw-form-container { margin-top: 30px; }
}
@media (min-width:600px) and (max-width:991px) {
.rvw-form-container form { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 -10px; }
.rvw-form-container form .rvw-form-group { flex-basis: calc(50% - 20px); flex-grow: 1; margin: 0 10px 20px; }
.rvw-form-container form .rvw-form-group.rvw-form-group-textarea, .rvw-form-container form .rvw-form-group.rvw-form-group-break, .rvw-form-container form .rvw-form-group.rvw-form-group-checkbox, .rvw-form-container form .rvw-form-group.rvw-form-group-radio { flex-basis: 100%; }
.rvw-form-container form button { margin-right: 10px; margin-left: 10px; }
}
/* ================================================================
Colors
=================================================================== */
.text-primary { color: var(--primary)!important; }
.rvw-text-primary { color: var(--primary) !important; }
a.rvw-text-primary:hover, a.rvw-text-primary:focus { color: var(--primary) !important; }
.rvw-text-secondary { color: var(--secondary) !important; }
a.rvw-text-secondary:hover, a.rvw-text-secondary:focus { color: var(--secondary) !important; }
.rvw-text-info { color: var(--primary) !important; }
a.rvw-text-info:hover, a.rvw-text-info:focus { color: var(--primary) !important; }
.rvw-text-light { color: #f8f9fa !important; }
a.rvw-text-light:hover, a.rvw-text-light:focus { color: #dae0e5 !important; }
.rvw-text-dark { color: #343a40 !important; }
a.rvw-text-dark:hover, a.rvw-text-dark:focus { color: var(--text-dark) !important; }
.rvw-text-body { color: var(--body-text) !important; }
.rvw-text-muted { color: var(--muted) !important; }
.rvw-mark { background-color: #fcf8e3; }
.rvw-blockquote-footer { color: var(--secondary); }
.rvw-alert-primary { color: #004085; background-color: #cce5ff; border-color: #b8daff; }
.rvw-alert-primary hr { border-top-color: #9fcdff; }
.rvw-alert-primary .rvw-alert-link { color: #002752; }
.rvw-alert-secondary { color: #383d41; background-color: #e2e3e5; border-color: #d6d8db; }
.rvw-alert-secondary hr { border-top-color: #c8cbcf; }
.rvw-alert-secondary .rvw-alert-link { color: #202326; }
.rvw-alert-light { color: #818182; background-color: #fefefe; border-color: #fdfdfe; }
.rvw-alert-light hr { border-top-color: #ececf6; }
.rvw-alert-light .rvw-alert-link { color: #686868; }
.rvw-alert-dark { color: #1b1e21; background-color: #d6d8d9; border-color: #c6c8ca; }
.rvw-alert-dark hr { border-top-color: #b9bbbe; }
.rvw-alert-dark .rvw-alert-link { color: #040505; }
.rvw-btn:focus, .rvw-btn.focus { box-shadow: 0 0 0 0.2em rgba(var(--primary-rgb), 0.25); }
.rvw-btn-primary { color: #fff !important; background-color: var(--primary); border-color: var(--primary); }
.rvw-btn-primary:hover { color: var(--primary)!important; background-color:#fff; border-color: var(--primary); }
.rvw-btn-primary:focus, .rvw-btn-primary.focus { box-shadow: 0 0 0 0.2em rgba(var(--primary-rgb), 0.5); }
.rvw-btn-primary.rvw-disabled, .rvw-btn-primary:rvw-disabled { color: #fff; background-color: var(--primary); border-color: var(--primary); }
.rvw-btn-primary:not(:disabled):not(.rvw-disabled):active, .rvw-btn-primary:not(:disabled):not(.rvw-disabled).rvw-active, .rvw-show > .rvw-btn-primary.rvw-dropdown-toggle { color: #fff!important; background-color: var(--primary); border-color: var(--primary); }
.rvw-btn-primary:not(:disabled):not(.rvw-disabled):active:focus, .rvw-btn-primary:not(:disabled):not(.rvw-disabled).rvw-active:focus, .rvw-show > .rvw-btn-primary.rvw-dropdown-toggle:focus { box-shadow: 0 0 0 0.2em rgba(var(--primary-rgb), 0.5); }
.rvw-btn-secondary { color: #fff !important; background-color: var(--secondary); border-color: var(--secondary); }
.rvw-btn-secondary:hover { color: #fff; background-color: #5a6268; border-color: var(--secondary); }
.rvw-btn-secondary:focus, .rvw-btn-secondary.focus { box-shadow: 0 0 0 0.2em rgba(108, 117, 125, 0.5); }
.rvw-btn-secondary.rvw-disabled, .rvw-btn-secondary:rvw-disabled { color: #fff; background-color: var(--secondary); border-color: var(--secondary); }
.rvw-btn-secondary:not(:disabled):not(.rvw-disabled):active, .rvw-btn-secondary:not(:disabled):not(.rvw-disabled).rvw-active, .rvw-show > .rvw-btn-secondary.rvw-dropdown-toggle { color: #fff; background-color: var(--secondary); border-color: #4e555b; }
.rvw-btn-secondary:not(:disabled):not(.rvw-disabled):active:focus, .rvw-btn-secondary:not(:disabled):not(.rvw-disabled).rvw-active:focus, .rvw-show > .rvw-btn-secondary.rvw-dropdown-toggle:focus { box-shadow: 0 0 0 0.2em rgba(108, 117, 125, 0.5); }
.rvw-btn-info { color: #fff !important; background-color: var(--primary); border-color: var(--primary); }
.rvw-btn-info:hover { color: #fff; background-color: var(--primary); border-color: var(--primary); }
.rvw-btn-info:focus, .rvw-btn-info.focus { box-shadow: 0 0 0 0.2em rgba(var(--primary-rgb), 0.5); }
.rvw-btn-info.rvw-disabled, .rvw-btn-info:rvw-disabled { color: #fff; background-color: var(--primary); border-color: var(--primary); }
.rvw-btn-info:not(:disabled):not(.rvw-disabled):active, .rvw-btn-info:not(:disabled):not(.rvw-disabled).rvw-active, .rvw-show > .rvw-btn-info.rvw-dropdown-toggle { color: #fff; background-color: var(--primary); border-color: var(--primary); }
.rvw-btn-info:not(:disabled):not(.rvw-disabled):active:focus, .rvw-btn-info:not(:disabled):not(.rvw-disabled).rvw-active:focus, .rvw-show > .rvw-btn-info.rvw-dropdown-toggle:focus { box-shadow: 0 0 0 0.2em rgba(var(--primary-rgb), 0.5); }
.rvw-btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.rvw-btn-outline-primary:hover { color: #fff; background-color: var(--primary); border-color: var(--primary); }
.rvw-btn-outline-primary:focus, .rvw-btn-outline-primary.rvw-focus { box-shadow: 0 0 0 0.2em rgba(var(--primary-rgb), 0.5); }
.rvw-btn-outline-primary.rvw-disabled, .rvw-btn-outline-primary:disabled { color: var(--primary); background-color: transparent; }
.rvw-btn-outline-primary:not(:disabled):not(.rvw-disabled):active, .rvw-btn-outline-primary:not(:disabled):not(.rvw-disabled).rvw-active, .rvw-show > .rvw-btn-outline-primary.rvw-dropdown-toggle { color: #fff; background-color: var(--primary); border-color: var(--primary); }
.rvw-btn-outline-primary:not(:disabled):not(.rvw-disabled):active:focus, .rvw-btn-outline-primary:not(:disabled):not(.rvw-disabled).rvw-active:focus, .rvw-show > .rvw-btn-outline-primary.rvw-dropdown-toggle:focus { box-shadow: 0 0 0 0.2em rgba(var(--primary-rgb), 0.5); }
.rvw-btn-outline-secondary { color: var(--secondary); border-color: var(--secondary); }
.rvw-btn-outline-secondary:hover { color: #fff; background-color: var(--secondary); border-color: var(--secondary); }
.rvw-btn-outline-secondary:focus, .rvw-btn-outline-secondary.rvw-focus { box-shadow: 0 0 0 0.2em rgba(108, 117, 125, 0.5); }
.rvw-btn-outline-secondary.rvw-disabled, .rvw-btn-outline-secondary:disabled { color: var(--secondary); background-color: transparent; }
.rvw-btn-outline-secondary:not(:disabled):not(.rvw-disabled):active, .rvw-btn-outline-secondary:not(:disabled):not(.rvw-disabled).rvw-active, .rvw-show > .rvw-btn-outline-secondary.rvw-dropdown-toggle { color: #fff; background-color: var(--secondary); border-color: var(--secondary); }
.rvw-btn-outline-secondary:not(:disabled):not(.rvw-disabled):active:focus, .rvw-btn-outline-secondary:not(:disabled):not(.rvw-disabled).rvw-active:focus, .rvw-show > .rvw-btn-outline-secondary.rvw-dropdown-toggle:focus { box-shadow: 0 0 0 0.2em rgba(108, 117, 125, 0.5); }
.rvw-btn-outline-info { color: var(--primary); background-color: transparent; background-image: none; border-color: var(--primary); }
.rvw-btn-outline-info:hover { color: #fff; background-color: var(--primary); border-color: var(--primary); }
.rvw-btn-outline-info:focus, .rvw-btn-outline-info.rvw-focus { box-shadow: 0 0 0 0.2em rgba(var(--primary-rgb), 0.5); }
.rvw-btn-outline-info.rvw-disabled, .rvw-btn-outline-info:disabled { color: var(--primary); background-color: transparent; }
.rvw-btn-outline-info:not(:disabled):not(.rvw-disabled):active, .rvw-btn-outline-info:not(:disabled):not(.rvw-disabled).rvw-active, .rvw-show > .rvw-btn-outline-info.rvw-dropdown-toggle { color: #fff; background-color: var(--primary); border-color: var(--primary); }
.rvw-btn-outline-info:not(:disabled):not(.rvw-disabled):active:focus, .rvw-btn-outline-info:not(:disabled):not(.rvw-disabled).rvw-active:focus, .rvw-show > .rvw-btn-outline-info.rvw-dropdown-toggle:focus { box-shadow: 0 0 0 0.2em rgba(var(--primary-rgb), 0.5); }
.rvw-form-control:focus { color: #495057; background-color: #fff; border-color: var(--primary); box-shadow: 0 0 0 0.2em rgba(var(--primary-rgb), 0.25); }
.rvw-form-control::placeholder { color: var(--secondary); }
.rvw-form-control-plaintext { color: var(--body-text); }
.rvw-form-check-input:disabled ~ .form-check-label { color: var(--secondary); }
.rvw-nav-link.disabled { color: var(--secondary); }
.rvw-nav-tabs { border-bottom: 1px solid #dee2e6; }
.rvw-nav-tabs .rvw-nav-link:hover, .rvw-nav-tabs .rvw-nav-link:focus { border-color: #e9ecef #e9ecef #dee2e6; }
.rvw-nav-tabs .rvw-nav-link.rvw-disabled { color: var(--secondary); background-color: transparent; border-color: transparent; }
.rvw-nav-tabs .rvw-nav-link.rvw-active, .rvw-nav-tabs .rvw-nav-item.show .rvw-nav-link { color: #495057; background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; }
.rvw-nav-pills .rvw-nav-link.rvw-active, .rvw-nav-pills .rvw-show > .rvw-nav-link { background-color: var(--primary); color: #fff; }
.rvw-page-link { color: var(--primary); background-color: #fff; border: 1px solid #dee2e6; }
.rvw-page-link:hover { color: var(--primary); background-color: #e9ecef; border-color: #dee2e6; }
.rvw-page-link:focus { box-shadow: 0 0 0 0.2em rgba(var(--primary-rgb), 0.25); }
.rvw-page-item.rvw-active .rvw-page-link { color: #fff; background-color: var(--primary); border-color: var(--primary); }
.rvw-page-item.rvw-disabled .rvw-page-link { color: var(--secondary); background-color: #fff; border-color: #dee2e6; }
.rvw-typeahead-item-active { background-color: var(--primary); color: #fff; }
PMI Style (last updated 1/11/24)
View ExampleResources
Add the following to the Rentals Template
<!-- Add to the Head -->
<link rel="stylesheet" href="/css/rvw.css">
<link rel="stylesheet" href="https://resources.nesthub.com/css/fancybox.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.css" />
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css">
<!-- Add to the Body after the Footer -->
<script src="https://resources.nesthub.com/js/fancybox.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/carousel/carousel.umd.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
<script src="https://static.addtoany.com/menu/page.js"></script>
<!-- Swap the Font Awesome kit in the Resources Snippet -->
<script defer src="https://kit.fontawesome.com/9e4e3329f0.js" crossorigin="anonymous"></script>
List
<header class="rvw-header">
<h1 class="display-1">{% snippet name='areas' market='1' %} Homes For Rent</h1>
<div class="btn-list">
<a href="{% snippet name='portal' type='app' %}" target="_blank" title='opens in new tab' class="btn btn--accent">Apply Online</a>
<a href="/tenants" class="btn btn--primary">Rental Qualifications</a>
</div>
</header>
<p class="mw-950 text-center">
Whether you're relocating,
planning a long-term stay, or simply prefer the flexibility of renting, our extensive listings offer a diverse range of quality homes available
for extended periods. We understand that finding the right long-term rental is a significant decision, and that's why our search page provides
a user-friendly interface, advanced filtering options, and comprehensive property details to streamline your search process. Take your time,
explore our listings, and discover a place where comfort, convenience, and long-lasting memories await you. Start your journey towards finding
the ideal {% snippet name='areas' market='1' %} rental property today!
</p>
<div id="rentvine-property-list-view" class="rentvine-widget property-list">
{% rentvine_plugin %}
<form id="rentvine-search-form" class="prop-search-form" _lpchecked="1">
<div class="prop-search-form__container">
<div class="prop-search-form__item prop-search-form__item--search">
<div class="prop-search-form__icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-location"></i></div>
</div>
<div class="prop-search-form__field">
{% capture searchInput %}{% rentvine_searchKeyword %}{% endcapture %}
{{ searchInput | replace: 'Search', 'Search by Location' | replace: 'name="search"', 'name="search" placeholder="Address, city, state, or zip"' }}
</div>
</div>
<div class="prop-search-form__item">
<div class="prop-search-form__icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhw-property"></i></div>
</div>
<div class="prop-search-form__field">
{% capture propTypeInput %}{% rentvine_searchPropertyTypes %}{% endcapture %}
{{ propTypeInput | replace: 'Property Type', 'Type of Place' }}
</div>
</div>
<div class="prop-search-form__item prop-search-form__item--beds">
<div class="prop-search-form__icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhvl-king-bed"></i></div>
</div>
<div class="prop-search-form__field" data-target="dropdown">
<div class="prop-search-form__label">Beds & Baths</div>
<div class="prop-search-form__value">Choose amounts</div>
</div>
<div class="prop-search__dropdown">
{% rentvine_searchBeds %}
{% rentvine_searchBaths %}
</div>
</div>
<div class="prop-search-form__item prop-search-form__item--price">
<div class="prop-search-form__icon">
<div class="icon"><i aria-hidden="true" class="fa-kit fa-nhw-price"></i></div>
</div>
<div class="prop-search-form__field" data-target="dropdown">
<div class="prop-search-form__label">Price Range</div>
<div class="prop-search-form__value">Choose amounts</div>
</div>
<div class="prop-search__dropdown">
{% capture searchMinRent %}{% rentvine_searchMinRent %}{% endcapture %}
{{ searchMinRent | replace: 'Minimum Rent', 'Min Rent' }}
{% capture searchMaxRent %}{% rentvine_searchMaxRent %}{% endcapture %}
{{ searchMaxRent | replace: 'Maximum Rent', 'Max Rent' }}
</div>
</div>
<div class="prop-search-form__btn">
<label for="nesthub-search-btn"><span class="sr-only">Submit</span></label>
<button id="nesthub-search-btn">
<div class="icon"><span class="sr-only">Submit</span><i aria-hidden="true" class="fa-kit fa-nhvl-search"></i></div>
</button>
</div>
</div>
<div class="prop-search-options">
<div class="prop-search-options__item">
<div class="prop-search-options__icon">
<div class="icon"><i class="fa-light fa-sliders"></i></div>
</div>
<div class="prop-search-options__label" data-target="dropdown">
Optional Filters
</div>
<div class="prop-search__dropdown">
{% rentvine_searchPets %}
</div>
</div>
<div class="prop-search-options__item">
<div class="prop-search-options__icon">
<div class="icon"><i class="fa-regular fa-arrow-up-arrow-down"></i></div>
</div>
<div class="prop-search-options__label" data-target="dropdown">
Sort
</div>
<div class="prop-search__dropdown">
{% rentvine_searchSort %}
</div>
</div>
</div>
</form>
{% assign listing_count = listings | size %}
{% if listing_count <= 0 %}
<div class="rvw__no-listings">
<h4>No Listings Found!</h4>
</div>
{% else %}
<ul class="rvw-nav rvw-nav-pills rvw-mb-3" id="nesthub-property-list-tab-list" role="tablist">
<li class="rvw-nav-item">
<a class="rvw-nav-link rvw-show rvw-active" id="rentvine-property-list-tab" href="#rentvine-property-list" role="tab" aria-controls="rentvine-property-list" aria-selected="true">List</a>
</li>
<li class="rvw-nav-item">
<a class="rvw-nav-link" id="rentvine-property-map-tab" href="#rentvine-property-map" role="tab" aria-controls="rentvine-property-map" aria-selected="false">Map</a>
</li>
</ul>
<div class="rvw-tab-content" id="rentvine-property-list-tab-content">
<div class="rvw-tab-pane rvw-fade rvw-active" id="rentvine-property-list" role="tabpanel" aria-labelledby="rentvine-property-list-tab">
<div class="rvw-list">
{% for listing in listings %}
<div class="rvw-list__item">
<a href="{% rentvine_listingUrl %}" data-id="{{ listing.listing.propertyListingID }}">
<div class="rvw-list__image">
{% if listing.image != blank %}
<img data-src="{{ listing.image | getListingImageUrl: 'small' }}" alt="{{ listing.unit.address }} {{ listing.unit.address2 }}, {{ listing.unit.city }}, {{ listing.unit.state }} {{ listing.unit.postalCode }}" class="lazyload" />
{% if listing.listing.virtualTour %}
<div class="rvw-card-video-tour"><img src="{% rentvine_videoTourIconUrl %}" alt="Virtual Tour" /></div>
{% endif %}
{% else %}
<img data-src="https://pmi-resources.nesthub.com/images/photo-gallery-placeholder.jpg" alt="{{ listing.headline }}" class="lazyload" />
{% endif %}
</div>
<div class="rvw-list__price">
{{ listing.unit.rent | money | replace: '.00', '' }}/mo.
</div>
<div class="rvw-list__details">
<ul>
<li>
{% if listing.unit.beds == 0 %}
Studio
{% else %}
{% if listing.unit.beds == 1 %}Bed{%else%}Beds{%endif%}: {{ listing.unit.beds }}
{% endif %}
</li>
<li class="rvw-icon-list-item">
{% if listing.unit.baths == 1 %}Bath{%else%}Baths{%endif%}: {{ listing.unit.baths | replace: '.00', '' }}
</li>
{% if listing.listing.size %}
<li class="rvw-icon-list-item">
sqft: {{ listing.listing.size }}
</li>
{% endif %}
</ul>
</div>
<div class="rvw-list__location">
{{ listing.unit.address }}{% if listing.unit.address2 %}, {{ listing.unit.address2 }}{% endif %}, {{ listing.unit.city }}, {{ listing.unit.state }} {{ listing.unit.postalCode | split: '-' | first }}
</div>
<div class="rvw-list__prop-type">
{{ listing.property.propertyTypeID | propertyType }}
</div>
<div class="rvw-list__availability">
Available: {{ listing.listing.availabilityDate | availabilityDate }}
</div>
</a>
</div>
{% endfor %}
</div>
<div class="rvw-pagination">
{% rentvine_pagination %}
</div>
</div>
<div class="rvw-tab-pane rvw-fade" id="rentvine-property-map" role="tabpanel" aria-labelledby="rentvine-property-map-tab">
<div id="rentvine-property-map-panel" style="height:700px;" data-lat="{{map.latitude}}" data-lng="{{map.longitude}}"></div>
</div>
</div>
{% endif %}
</div>
<script type="text/javascript">
function closeDropdown(item) {
item.slideUp().removeClass('open');
}
function openDropdown(item) {
item.slideDown().addClass('open');
}
$('[data-target="dropdown"]').click(function(e) {
e.preventDefault();
var dropdown = $(this).siblings('.prop-search__dropdown');
if (dropdown.hasClass('open') == true) {
closeDropdown(dropdown)
} else {
$('.prop-search__dropdown.open').slideUp().removeClass('open');
openDropdown(dropdown)
}
});
$('.prop-search-form__item, .prop-search-option__item').mouseleave(function() {
setTimeout(() => {
closeDropdown($('.prop-search__dropdown.open'));
}, 300);
});
function updateFields() {
var bedValue = beds > 0 ? beds + ' bed, ' : '';
var bathValue = baths > 0 ? baths + ' bath' : '';
$('.prop-search-form__item--beds .prop-search-form__value').text(bedValue + bathValue)
$('.prop-search-form__item--price .prop-search-form__value').text(rentMin + ' - ' + rentMax)
}
// Update Search Placeholders on Page Load
if ( location.search.length > 0 ) {
var beds = location.search.split('&bedsMin=')[1].split('&')[0];
var baths = location.search.split('&bathsMin=')[1].split('&')[0];
var rentMin = '$' + location.search.split('&rentMin=')[1].split('&')[0];
var rentMax = '$' + location.search.split('&rentMax=')[1].split('&')[0];
updateFields();
}
// Update Search Placeholer Text on Input Change
$('.prop-search-form__item input, .prop-search-form__item select').on('change keydown paste input', function(){
beds = $('#rentvine-prop-search-beds').val();
baths = $('#rentvine-prop-search-baths').val();
rentMin = '$' + $('#rentvine-prop-search-min-rent').val();
rentMax = '$' + $('#rentvine-prop-search-max-rent').val();
updateFields(beds, baths, rentMin, rentMax);
if ($(this).parent('.prop-search-form__item').children('.prop-search-form__value').text().length == 0) {
$(this).parent('.prop-search-form__item').children('.prop-search-form__value').text('Choose amounts')
}
});
$( document ).ready(function() {
// Init Image Carousel
$('.f-carousel').each(function(){
const container = document.getElementById($(this).attr('id'));
const options = {
Navigation: {
nextTpl: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M9 3l9 9-9 9"/></svg>',
prevTpl: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M15 3l-9 9 9 9"/></svg>',
},
Dots: false,
};
new Carousel(container, options);
})
});
</script>
Details
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "RealEstateListing",
"name": "{{ listing.headline }}",
"image": {
"@type": "ImageObject",
"url": "{{ images[0].large }}"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Place",
"address": {
"@type": "PostalAddress",
"addressLocality": "{{ unit.city }}",
"addressRegion": "{{ unit.stateID }}",
"postalCode": "{{ unit.postalCode }}",
"streetAddress": "{{ unit.address }} {{ unit.address2 }}"
},
"petsAllowed":"{{ listing.petDescription }}",
"tourBookingPage": "",
"smokingAllowed": "{{ listing.acceptSmoking }}",
"description": "{{ listing.description | strip_html }}",
"url": "{{ plugin.url }}"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Accommodation",
"numberOfBedrooms": "{{ unit.beds }}",
"numberOfBathroomsTotal": "{{ unit.fullBaths }} full baths, {{ unit.halfBaths }} half baths",
"leaseLength": "{{ listing.leaseDescription }}",
"accommodationCategory": "{{ property.propertyTypeID | propertyType }}"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "RentAction",
"priceSpecification":
{
"@type": "UnitPriceSpecification",
"price": "{{ unit.rent | money }}",
"priceCurrency": "USD",
"name": "Monthly Rent",
"referenceQuantity": {
"@type": "QuantitativeValue",
"value": "1",
"unitCode": "MON"
}
}
}
</script>
<div class="rentvine-widget">
<div id="nesthub-property-detail-view" class="rvw-details">
{% rentvine_plugin %}
{% assign virtualTourType = listing | getVirtualTourType %}
{% if leadSent %}
<div class="rvw-alert rvw-alert-success" role="alert">
Message has been sent!
</div>
{% endif %}
<section class="rvw-details__header">
<header class="text-center">
<h1>{{ unit.address }}</h1>
<h2>{{ unit.city }}, {{ unit.stateID }} {{ unit.postalCode | split: '-' | first }}</h2>
</header>
<div class="rvw-back-btn">
<a href="/{{plugin.url}}"><i class="fa-regular fa-circle-chevron-left"></i> Back to search</a>
</div>
</section>
{% assign imageCount = images | size %}
{% if imageCount > 0 %}
<section class="rvw-details__gallery">
<div class="image-container image-container--primary">
{% for image in images limit: 1 %}
<div class="image-preview">
<a id="rvw-listing-detail-primary-image-link" data-fancybox="gallery" href="{{ images[0].large }}">
<img class="lazyload" data-src="{{ images[0].large }}" alt="View Full Image"/>
</a>
</div>
{% endfor %}
</div>
{% if images.size > 1 %}
<div class="image-container image-container--secondary">
{% for image in images offset: 1 limit: 4 %}
<div class="image-preview">
<a id="rvw-listing-detail-primary-image-link" data-fancybox="gallery" href="{{ image.imageUrl.large }}">
<img class="lazyload" data-src="{{ image.imageUrl.small }}" alt="View Full Image" />
</a>
</div>
{% endfor %}
</div>
{% endif %}
{% if images.size > 5 %}
<div class="rvw-listing-detail-view-gallery">
<i class="fa-regular fa-square-plus"></i> Full Gallery
</div>
{% endif %}
{% if images.size > 5 %}
<div class="additional-images">
{% assign imageCount = images.size | minus: 1 %}
{% for i in (5..imageCount) %}
<a data-fancybox="gallery" href="{{ images[i].imageUrl.large }}">
<img data-src="{{ images[i].imageUrl.large }}" alt="View Full Size" class="lazyload" />
</a>
{% endfor %}
</div>
{% endif %}
{% if listing.virtualTour %}
{% if virtualTourType == 'youtube' %}
<a class="rvw-listing-detail-view-video" data-fancybox="gallery" href="https://www.youtube.com/embed/{{ listing | getVirtualTourVideoID }}">
{% elsif virtualTourType == 'vimeo' %}
<a class="rvw-listing-detail-view-video" data-fancybox="gallery" href="https://vimeo.com/{{ listing | getVirtualTourVideoID }}?title=0&byline=0&portrait=0">
{% else %}
<a class="rvw-listing-detail-view-video" href="{{ listing.virtualTour }}" target="_blank">
{% endif %}
<i class="fa-sharp fa-regular fa-video-plus"></i> Video Tour
</a>
{% endif %}
</section>
{% endif %}
<section class="rvw-details__share">
<div class="social-icons">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a title="opens in new window" class="a2a_dd" href="https://www.addtoany.com/share"><i class="fa-regular fa-arrow-up-from-bracket"></i> Share</a>
</div>
</div>
</section>
<section class="rvw-details__content">
<div class="rvw-details__property-info">
<h3 class="rvw-details__heading mt-0">Property Details</h3>
<div class="key-details">
<div class="key-detail price">
<span class="value">{{ unit.rent | money }}</span>
<span class="label">USD / Month</span>
</div>
<div class="key-detail bedrooms">
<span class="value">
{% if unit.beds == 0 %}
Studio
{% else %}
{{ unit.beds }} {% if unit.beds == 1 %}Bed{%else%}Beds{%endif%}
{% endif %}
</span>
<span class="label">Beds</span>
</div>
<div class="key-detail bathrooms">
<span class="value">{{ unit.baths }}</span>
<span class="label">{% if unit.baths == 1 %}Bath{%else%}Baths{%endif%}</span>
</div>
{% if unit.size %}
<div class="key-detail sqft">
<span class="value">
{{ unit.size }}
</span>
<span class="label">sqft</span>
</div>
{% endif %}
<div class="key-detail rent">
<span class="value">•</span>
<span class="label">For Rent</span>
</div>
</div>
<hr/>
<div class="sub-details">
<div class="sub-detail">
<span class="sub-detail__label">Building Type:</span>
<span class="sub-detail__value">{{ property.propertyTypeID | propertyType | replace: ' Home', '' }}</span>
</div>
{% if unit.deposit %}
<div class="sub-detail">
<span class="sub-detail__label">Deposit:</span>
<span class="sub-detail__value">{{ unit.deposit | money }}</span>
</div>
{% endif %}
{% if listing.petDescription or listing.acceptDogs or listing.acceptCats %}
<div class="sub-detail">
<span class="sub-detail__label">Pets:</span>
<span class="sub-detail__value">
{% if listing.acceptDogs == 1 or listing.acceptCats == 1 %}
Yes
{% else %}
No
{% endif %}
</span>
</div>
{% endif %}
<div class="sub-detail">
<span class="sub-detail__label">Date Available:</span>
<span class="sub-detail__value">
{{ listing.availabilityDate | availabilityDate }}
</span>
</div>
{% if listing.applicationFee %}
<div class="sub-detail">
<span class="sub-detail__label">App Fee:</span>
<span class="sub-detail__value">{{ listing.applicationFee | money | replace: '.00', '' }}</span>
</div>
{% endif %}
{% if listing.acceptDogs == 1 or listing.acceptCats == 1 %}
<div class="sub-detail">
<span class="sub-detail__label">Pet Type:</span>
<span class="sub-detail__value">
{% capture petsAllowed %}
{% if listing.acceptDogs == 1 %}
Dogs
{% endif %}
{% if listing.acceptDogs == 1 and listing.acceptCats == 1 %},{% endif %}
{% if listing.acceptCats == 1 %}
Cats
{% endif %}
{% endcapture %}
{{ petsAllowed | strip_newlines | replace: ' ', '' | replace: ',', ', ' }}
</span>
</div>
{% endif %}
</div>
<div class="headline">
{{ listing.headline }}
</div>
<div class="description">
{% if virtualTourType %}
<div class="video-wrapper">
{% if virtualTourType == 'youtube' %}
<iframe src="https://www.youtube.com/embed/{{ listing | getVirtualTourVideoID }}"></iframe>
{% elsif virtualTourType == 'vimeo' %}
<iframe src="https://player.vimeo.com/video/{{ listing | getVirtualTourVideoID }}?title=0&byline=0&portrait=0"></iframe>
{% endif %}
</div>
{% endif %}
{{ listing.description | newline_to_br }}
</div>
{% if features.size > 0 %}
<h3 class="rvw-details__heading">Features and Amenities</h3>
<div class="features">
{% for featureCategory in features %}
<h5 class="mt-4 mb-3">{{ featureCategory.categoryName }}</h5>
<ul class="dots">
{% for feature in featureCategory.features %}
<li>{{ feature }}</li>
{% endfor %}
</ul>
{% endfor %}
</div>
{% endif %}
</div>
<div class="rvw-details__contact-info">
<div class="rvw-details__form-container">
<div class="rvw-details__links">
<div class="btn-list">
{% if listing.applicationUrl %}
<a href="{{ listing.applicationUrl }}" target="_blank" class="btn btn--accent">Apply Online</a>
{% endif %}
<a href="/tenants" target="_blank" class="btn btn--primary">Rental Qualifications</a>
{% if listing.showingUrl %}
<a href="{{ listing.showingUrl }}" target="_blank" class="btn btn--dark">Schedule Viewing</a>
{% endif %}
</div>
</div>
<div class="rvw-form-header text-center">
<h3>Questions? Contact Us!</h3>
<ul class="list-unstyled">
<li>phone: <a href="tel:{{ listing.phone }}">{{ listing.phone | phone }}</a></li>
</ul>
</div>
<div class="rvw-details__form">
<form id="nesthub-property-lead-form" class="rvw-form" method="POST">
<div class="rvw-form-group">
{% listing_leadName %}
</div>
<div class="rvw-form-group">
{% listing_leadEmail %}
</div>
<div class="rvw-form-group">
{% listing_leadPhone %}
</div>
<div class="rvw-form-group rvw-form-group-textarea">
{% listing_leadMessage %}
</div>
{% listing_nonce %}
{% listing_honeypot %}
<button type="submit" class="rvw-btn rvw-btn-primary rvw-btn-block">Submit</button>
</form>
</div>
</div>
<div class="rvw-details__location">
<h3 class="rvw-details__heading">Location</h3>
{% capture mapAddress %}{{ unit.address }},+{{ unit.city }},+{{ unit.stateID }}+{{ unit.postalCode | split: '-' | first }}{% endcapture %}
<div class="rvw-details__map-container">
<div data-fancybox="map" data-src="https://www.google.com/maps/search/{{ mapAddress | replace: ' ', '+' | replace: '#', '' | replace: '.', '' | urlencode }}/@{{ unit.latitude }},{{ unit.longitude }},14z" id="rvw-listing-detail-map-container" data-latitude="{{ unit.latitude }}" data-longitude="{{ unit.longitude }}"></div>
</div>
</div>
</div>
</section>
</div>
</div>
<script type="text/javascript">
// Floating Form Labels
$('.rvw-form-control').on('change keydown paste input', function(){
if ($(this).val().length > 0) {
$(this).parent('.rvw-form-group:not(.rvw-form-group-checkbox):not(.rvw-form-group-radio):not(.rvw-form-group-textarea)').children('label').addClass('float-label')
} else (
$(this).parent('.rvw-form-group:not(.rvw-form-group-checkbox):not(.rvw-form-group-radio):not(.rvw-form-group-textarea)').children('label').removeClass('float-label')
)
});
$(document).ready(function () {
mapboxgl.accessToken =
"pk.eyJ1Ijoia29odmEiLCJhIjoiY2prbDlsNXhuMXl6YzNxbnhtY2w0NzB3bSJ9.jpQllFfzX4I6lT3VF6ZByQ";
const container = $("#rvw-listing-detail-map-container");
const lat = container.data("latitude") || 0.0;
const lng = container.data("longitude") || 0.0;
const zoom = container.data("zoom") || 8;
const map = new mapboxgl.Map({
container: "rvw-listing-detail-map-container",
style: "mapbox://styles/mapbox/streets-v12", // style URL
center: [lng, lat], // starting position [lng, lat]
zoom: zoom, // starting zoom
});
const marker = new mapboxgl.Marker().setLngLat([lng, lat]).addTo(map);
Fancybox.bind('[data-fancybox="gallery"]', {});
Fancybox.bind('[data-fancybox="map"]', {});
$(".rvw-listing-detail-view-gallery").on("click", function () {
Fancybox.fromSelector('[data-fancybox="gallery"]');
});
});
</script>
CSS
/* ==========================================================================
Rentvine Properties Widget
============================================================================= */
/* Set Design Standards & Colors Here */
:root {
/* --primary: #385b7a; */
--primary-light: var(--primary)ad9;
/* --secondary: #2d4861; */
--secondary-light: var(--secondary)e8;
--accent: var(--light);
/* --dark: #1B2635; */
/* --muted: #787878; */
/* --body-text: #1b2635; */
--box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
}
#rentals { width: 2000px; max-width: 100%; padding: 120px 5.5vw; margin: 0 auto; }
@media (max-width:700px) {
#rentals { padding: 80px 5.5vw; }
}
.rvw .icon { line-height: 1; }
.rvw .icon svg > * { fill: currentColor; }
.fa-rvw-location { font-size: 30px; }
.fa-rvw-calendar { font-size: 23px; }
.fa-rvw-user { font-size: 28px; }
.fa-rvw-search { font-size: 25px; }
.rvw__no-listings { padding: 80px 0; text-align: center; }
.mapboxgl-marker svg path[fill*='#3FB1CE'] { fill: var(--dark)!important; }
select { -webkit-appearance: initial; }
.f-carousel__viewport.is-draggable { cursor: pointer!important; }
/* List
============================================================================= */
/* Header */
.rvw-header { text-align: center; position: relative; margin-bottom: 55px; }
.rvw-header .display-1 { margin-bottom: 45px!important; }
@media (min-width: 1451px) {
.rvw { padding-top: 60px!important; }
.rvw-header { padding-top: 65px; }
.rvw-header .display-1 { width: 775px; max-width: 100%; margin: 0 auto!important; }
.rvw-header .btn-list { position: absolute; right: 0; top: 0; flex-direction: column; }
}
@media (max-width: 992px) {
.rvw-header .btn-list { justify-content: center; }
}
/* Search Form */
.prop-search-form { background: none!important; padding: 0!important; }
.prop-search-form__container { display: flex; background-color: #ffffff; height:78px; border-radius: 35px; padding: 15px; cursor: pointer; max-width: 1062px; margin: 0 auto; -webkit-user-select: none; -ms-user-select: none; user-select: none; margin: 55px auto 85px; box-shadow: 0px 2px 50px 0px rgba(0, 0, 0, 0.15); }
.prop-search-form__item { position: relative; display: flex; vertical-align: middle; align-items: center; padding: 0px 24px; flex-grow: 1; }
.prop-search-form__item--search { flex-grow: 1; padding-left: 10px; }
.prop-search-form__icon { flex-grow: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 7px; }
.prop-search-form__icon .icon { min-width: 30px; height: 30px; color: var(--primary); font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; margin: auto; }
.prop-search-form__field { padding-left: 10px; position: relative; flex-grow: 1; }
.prop-search-form__field label, .prop-search-form__label, .prop-search__dropdown label { font-size: 16px; line-height: 1; color: var(--body-text); font-weight: bold; letter-spacing: .05em; margin: 0; }
.prop-search-form__field input, .prop-search-form__field select, .prop-search-form__value, .prop-search-form__placeholder { border: 0; font-size: 15px; color: var(--muted); white-space: nowrap; background: none; height: 20px!important; padding: 0; }
.prop-search-form__field select { position: relative; left: 0; top: -3px; -webkit-appearance: initial; }
.prop-search-form__field input { position: relative; top: -2px; z-index: 1; }
.prop-search-form__placeholder { position: absolute; bottom: 5px; left: 10px; z-index: 0; }
.prop-search-form__btn { display: flex; align-items: center; }
.prop-search-form__btn button { background-color: var(--accent); display: flex; align-items: center; justify-content: center; border: none; font-size: 25px; width: 49px; height: 49px; border-radius: 50%; color: #fff; line-height: 56px; text-align: center; transition: .4s; }
.prop-search-form__btn button:hover { background-color: var(--primary); }
.prop-search-form__btn .sr-only { font-size: 0; }
@media (max-width: 1200px) {
.prop-search-form__container { height: auto; flex-wrap: wrap; justify-content: center; }
.prop-search-form__item { padding: 15px; }
.prop-search-form__item--search { flex: 1 1 100%; border: 0!important; border-bottom: 3px solid #eeefef!important; }
.prop-search-form__btn { display: flex; align-items: center; justify-content: center; margin-left: auto; }
}
@media (max-width: 500px) {
.prop-search-form__container { flex-direction: column; }
.prop-search-form__icon .icon { max-width: 30px; }
.prop-search-form__icon .fa-nhvl-king-bed { font-size: 20px; }
}
/* Search Options */
.prop-search-options { display: flex; justify-content: center; margin: 30px 0; }
.prop-search-options a:not(:hover) { color: var(--body-text); }
.prop-search-options__item { padding: 0 25px; display: flex; align-items: center; position: relative; transition: .05s; }
.prop-search-options__item:hover { cursor: pointer; color: var(--primary); }
.prop-search-options__icon { color: var(--primary); font-size: 29px; }
.prop-search-options__label { font-size: 16px; letter-spacing: .025em; font-weight: bold; padding-left: 10px; }
@media (max-width: 710px) {
.prop-search-options { margin-top: 0; flex-direction: column; text-align: center; }
.prop-search-options__item { padding: 15px; }
}
/* Search Dropdown */
.prop-search__dropdown { display: none; background: #fff; text-align: left; padding: 15px; width: 100%; min-width: 280px; border-radius: 20px; position: absolute; top: 100%; left: 15px; box-shadow: 0px 2px 50px 0px rgba(0, 0, 0, 0.15); z-index: 99; }
.prop-search__dropdown label ~ label { margin-top: 15px; }
@media (max-width: 710px) {
.prop-search__dropdown { left: 0; right: 0; }
}
/** List **/
.rvw-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 420px)); justify-content: center; grid-gap: 45px 30px; overflow: hidden; }
.rvw-list:has(.rvw-list__item:nth-child(4)) { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }
.rvw-list a { color: var(--body-text); }
.rvw-list__item { text-align: center; font-size: 16px; line-height: 1.15; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.rvw-list__image { width: 100%; height: 0; padding-top: 69.35%; background-color: #efefef; border-radius: 20px; overflow: hidden; position: relative; }
.rvw-list__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; position: absolute; top: 0; left: 0; }
.rvw-list__price { letter-spacing: .025em; font-weight: bold; padding-top: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; padding-right: 15px; }
.rvw-list__location { margin: 10px 0; }
.rvw-list__details { margin: 10px 0 8px; }
.rvw-list__prop-type { font-weight: bold; }
.rvw-list__availability { margin: 10px 0 0; color: var(--muted); }
.rvw-list__item ul { list-style-type: none; margin: 0; padding: 0; }
.rvw-list__item ul li { display: inline-block; padding: 0; margin: 0; padding: 0 10px 0 5px; border-right: 1px solid #555; }
.rvw-list__item ul li:last-child { border-right: 0; padding-right: 0; }
.rvw-list__item ul li:first-child { padding-left: 0; }
#rentvine-property-map-panel { border-radius: 20px; overflow: hidden; }
/** Pagination **/
.rvw-pagination { margin-top: 50px; text-align: center; justify-content: center; }
.rvw-pagination ul { display: flex; justify-content: center; padding-left: 0; list-style: none; margin-top: 20px; }
.rvw-pagination a { position: relative; display: block; padding: 0.375rem 0.75rem; font-size: 16px; color: var(--secondary); text-decoration: none; background-color: #fff; border: 1px solid var(--gray); transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
.rvw-pagination a:hover { z-index: 2; color: var(--secondary); background-color: var(--gray); border-color: var(--gray); }
.rvw-pagination a:focus { z-index: 3; color: #fff; background-color: var(--secondary); outline: 0; box-shadow: var(--box-shadow); }
.rvw-pagination a.rvw-active, .rvw-active > a, .rvw-page-item.rvw-active .rvw-page-link { z-index: 3; color: #fff; background-color: var(--primary); border-color: var(--primary); }
.rvw-pagination a.disabled, .disabled > .rvw-pagination a { color: var(--secondary-light); pointer-events: none; background-color: var(--secondary-light); border-color: var(--secondary-light); }
.rvw-pagination li { margin: 0; }
.rvw-pagination li:not(:first-child) a { margin-left: calc(1px * -1); }
.rvw-pagination li:first-child a { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }
.rvw-pagination li:last-child a { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
@media (prefers-reduced-motion: reduce) {
.rvw-pagination a { transition: none; }
}
/* Carousel */
.rvw .f-carousel { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.rvw .f-carousel__slide { height: 100%; }
.rvw .f-carousel__nav { transition: 0.4s; }
.rvw .f-button { height: 39px; width: 39px; background: var(--dark); color: #fff; border-radius: 50%; transition: 0.3s ease-in-out; }
.rvw .f-button:hover { background: var(--accent)!important; color: var(--dark)!important; transition: 0.3s ease-in-out; }
.rvw .image:not(:hover) .f-carousel__nav { opacity: 0; transition: 0.4s; }
/* Details
============================================================================= */
.rvw-details { width: 1475px; max-width: 100%; margin: 0 auto; }
/** Header **/
.rvw-details__header { position: relative; }
.rvw-details__header h1 { }
.rvw-details__header h2 { margin-bottom: 35px; font-weight: normal; }
.rvw-back-btn { text-align: right; margin-bottom: 20px; }
.rvw-back-btn a { display: inline-flex; align-items: center; font-weight: bold; font-size: 16px; letter-spacing: .025em; color: var(--body-text); }
.rvw-back-btn a i { font-size: 34px; color: var(--primary); margin-right: 12px; transition: 0.4s; }
.rvw-back-btn a:hover, .rvw-back-btn a:hover i { color: var(--accent); }
@media (min-width: 1451px) {
.rvw-details__header { padding-top: 60px; }
}
@media (min-width: 992px) {
.rvw-back-btn { position: absolute; right: 0; bottom: -20px; }
}
@media (max-width: 500px) {
.rvw-back-btn { text-align: center; }
}
/** Primary Image **/
.rvw-details__gallery { display: flex!important; position: relative; align-items: stretch; min-height: 540px; margin: -10px; padding-bottom: 50px; }
.rvw-details__gallery .image-preview { position: relative; background-color: #efefef; border-radius: 20px; overflow: hidden; }
.rvw-details__gallery .image-container { padding: 10px; }
.rvw-details__gallery .image-container--primary { flex: 1 1 auto; }
.rvw-details__gallery .image-container--primary .image-preview { height: 100%; width: 100%; }
.rvw-details__gallery .image-container--secondary { flex: 0 1 600px; display: flex; flex-wrap: wrap; grid-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.rvw-details__gallery .image-container--secondary .image-preview { flex: 1 1 35%; }
.rvw-details__gallery img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; position: absolute; top: 0; left: 0; transition: .5s cubic-bezier(0,.49,.54,.99); }
.rvw-details__gallery .image-preview:hover img { transform: scale(1.08); transition: 1.5s cubic-bezier(0,.49,.54,.99); }
.rvw-details__gallery .rvw-listing-detail-view-gallery, .rvw-listing-detail-view-video { position: absolute; height: 44px; width: 149px; text-align: center; line-height: 44px; bottom: 70px; right: 20px; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 10px; font-size: 16px; letter-spacing: .05em; cursor: pointer; transition: .4s; color: var(--body-text)!important; }
.rvw-details__gallery .rvw-listing-detail-view-gallery i, .rvw-listing-detail-view-video i { font-size: 24px; margin-right: 10px; }
.rvw-details__gallery .rvw-listing-detail-view-gallery:hover, .rvw-listing-detail-view-video:hover { background: var(--accent); transform: scale(1.03);}
.rvw-details__gallery .rvw-listing-detail-view-gallery:active, .rvw-listing-detail-view-video:active { transform: scale(0.97);}
.rvw-listing-detail-view-video { bottom: 125px; }
.rvw-details__gallery .additional-images { display: none; }
@media (min-width: 992px) and (max-width: 1330px) {
.rvw-details__gallery .image-container--secondary { max-width: 50%; }
}
@media (max-width: 991px) {
.rvw-details__gallery { min-height: 61.1vw; }
.rvw-details__gallery .image-container--primary { flex: 1 1 100%; }
.rvw-details__gallery .image-container--secondary { display: none; }
}
/* Tabs */
.rvw-nav-pills .rvw-nav-link.rvw-active, .rvw-nav-pills .rvw-show>.rvw-nav-link { background: var(--primary); }
/** Social Sharing **/
.rvw-details__share { text-align: right; margin-bottom: 20px; font-size: 16px; letter-spacing: .05em; }
.rvw-details__share .social-icons { display: inline-block; }
.rvw-details__share a:not(:hover) { color: var(--body-text); }
/** Property Details **/
.rvw-details__content { }
.rvw-details__property-info .key-details { display: flex; flex-wrap: wrap; margin: 0 -10px 25px; line-height: 1.1; }
.rvw-details__property-info .key-detail { flex: 1 1 auto; padding: 10px; }
.rvw-details__property-info .key-detail .label { font-size: 16px; font-weight: bold; letter-spacing: .05em; padding-left: 5px; white-space: nowrap; }
.rvw-details__property-info .key-detail .value { font-weight: bold; font-size: 26px; color: var(--accent); }
.rvw-details__property-info .key-detail.rent .value { position: relative; top: 4px; }
.rvw-details__property-info hr { border-color: #f1f1f1; border-width: 4px; margin: 30px 0; }
.rvw-details__property-info .sub-detail { display: flex; align-items: center; }
.rvw-details__property-info .sub-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); grid-gap: 15px 25px; margin-bottom: 45px; line-height: 1.1; }
.rvw-details__property-info .sub-detail__label { font-weight: bold; font-size: 16px; letter-spacing: .05em; padding-right: 15px; }
.rvw-details__property-info .sub-detail__value { font-weight: bold; font-size: 20px; color: var(--primary); letter-spacing: .05em; }
.rvw-details__property-info .headline { font-weight: bold; }
/* .rvw-details__property-info .description br + br { display: none; } */
.rvw-details__property-info .features ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 5px; margin: 0; padding: 0; }
.rvw-details__property-info .features li { margin: 0; }
.rvw-details__heading { font-size: 30px; font-weight: bold; letter-spacing: .025em; margin: 40px 0 25px!important; color: var(--body-text); }
.rvw-details__map-container, #rentvine-property-view-map-panel { border-radius: 20px; overflow: hidden; margin-bottom: 20px; }
#rvw-listing-detail-map-container { height: 394px; }
@media (min-width: 992px) {
.rvw-details__content { display: flex!important; }
.rvw-details__property-info { padding-right: 5vw; flex-grow: 1; }
}
@media (max-width: 500px) {
.rvw-details__heading { font-size: 24px; }
.rvw-details__property-info .key-detail.price { flex: 1 0 100%; }
}
/** Contact Info **/
.rvw-details__contact-info { text-align: center; }
.rvw-details__form-container { padding: 70px 55px 55px; background: #fff; border-radius: 20px; box-shadow: 0px 2px 50px 0px rgba(0, 0, 0, 0.1); }
.rvw-details__form-container h3 { font-size: 22px; margin: 0 0 15px; }
.rvw-details__form-container .btn-list { margin-bottom: 50px; justify-content: center; }
.rvw-details__form-container form { text-align: left; margin-top: 40px; }
.rvw-details__form-container form br { display: none; }
.rvw-details__form-container a:not(:hover) { color: var(--body-text); }
.rvw-details__form-container input, .rvw-details__form-container textarea { border: 0; border-radius: 0; border-bottom: 1px solid #000; height: 40px; padding-left: 0!important; padding-right: 0!important; }
.rvw-details__form-container input:focus, .rvw-details__form-container textarea:focus { outline: none; box-shadow: none; }
.rvw-form-control:focus { border-color: var(--accent); }
.rvw-details__form-container .rvw-btn { position: relative; padding: 0; background: none!important; border: 0; width: auto; margin-left: auto; padding-right: 65px; font-size: 18px; color: var(--body-text)!important; display: block; line-height: 40px; white-space: nowrap; text-transform: uppercase; font-weight: 600; letter-spacing: .05em; }
.rvw-details__form-container .rvw-btn::after { content: '\e000'; color: var(--body-text); font-size: 15px; height: 40px; width: 40px; text-align: center; border-radius: 50%; border: 3px solid var(--primary-light); position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: .5s; font-family: "Font Awesome Kit"; font-style: normal; font-weight: 400; line-height: 35px; }
.rvw-details__form-container .rvw-btn:hover { color: var(--accent)!important; }
.rvw-details__form-container .rvw-btn:hover::after { border-color: var(--accent); transition: .5s; }
/* Floating Form Labels */
.rvw-details__form-container .rvw-form .rvw-form-group { position: relative; }
.rvw-details__form-container .rvw-form .rvw-form-group:not(.rvw-form-group-checkbox):not(.rvw-form-group-radio):not(.rvw-form-group-textarea) label { font-weight: 400; margin: 0; position: absolute; font-size: 16px; bottom: 10px; left: 0; z-index: 2; height: 100%; padding: 1rem 0rem 0; overflow: hidden; text-align: start; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; border: var(--bs-border-width) solid transparent; transform-origin: 0 0; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; }
.rvw-details__form-container .rvw-form-group-textarea label { font-weight: 400; margin: 0; font-size: 16px; height: 100%; padding: 0; position: relative!important; }
.rvw-details__form-container .rvw-form-group ::-webkit-input-placeholder, .rvw-details__form-container .rvw-form-group select:invalid, .rvw-details__form-container .rvw-form-group select:not(:focus) { color: transparent!important; }
.rvw-details__form-container .rvw-form .rvw-form-group:not(.rvw-form-group-checkbox):not(.rvw-form-group-radio):has(input:focus) label, .rvw-details__form-container .rvw-form .rvw-form-group:has(select:focus) label, .rvw-details__form-container .float-label { transform: translateY(-1em) scale(.8); opacity: .7; }
.rvw-details__form-container .rvw-form-group-dropdown:has(.float-label) select:not(:focus) { color: var(--body-text)!important; }
.rvw-details__form-container .rvw-form-group-dropdown label { left: -1px!important; }
@media (min-width: 992px) {
.rvw-details__contact-info { flex: 0 0 475px; }
}
@media (min-width: 992px) and (max-width: 1330px) {
.rvw-details__contact-info { max-width: 50%; }
.rvw-details__form-container { padding: 55px 35px 50px; }
}
@media (max-width: 991px) {
.rvw-details__contact-info { padding-top: 50px; }
}
@media (max-width: 550px) {
.rvw-details__contact-info .heading { flex-direction: column; justify-content: center; text-align: center; }
.rvw-details__form-container { padding: 55px 20px 50px; }
}
/* Location */
.rvw-details__location { text-align: left; margin-top: 70px; }
/* Utilities */
.mt-0 { margin-top: 0!important; }