Rentvine Widget Styles

Modern

View Example

List

				



<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">{{ listing.unit.baths }} ba</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">{{ unit.baths }} ba</span>
										</div>
										{% if 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.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">
										<a href="{{ listing.applicationUrl }}" target="_blank" class="rvw-btn">Apply Now</a>
										<a href="{{ listing.showingUrl }}" target="_blank" class="rvw-btn">Schedule Showing</a>
									</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&amp;byline=0&amp;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 Example

Resources

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  %}
					<a class="rvw-listing-detail-view-video" data-fancybox="gallery" href="{% if virtualTourType == 'youtube' %}https://www.youtube.com/embed/{{ listing | getVirtualTourVideoID }}{% elsif virtualTourType == 'vimeo' and listing.virtualTour contains 'vimeo' %}https://player.vimeo.com/video/{{ listing | getVirtualTourVideoID }}?title=0&amp;byline=0&amp;portrait=0{% else %}{{ listing.virtualTour }}" data-type="iframe{% 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&amp;byline=0&amp;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; }