Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Code/plugin for checkbox chart pricing table?


ampddesigns

Question

9 answers to this question

Recommended Posts

  • 0

You can search some code on CodePen. I think you will find it.

Then share link here, we can convert it into Squarespace

eg.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/26/2021 at 7:21 AM, camsims13 said:

Hi Can you best help how to install this code onto my squarespace

https://codepen.io/jkesler-va/pen/ypGNeo

Add a Code Block > Paste this code

<section id="pricing-container">

	<div id="pricing-switch">

		<span class="switch-label switch-label-monthly">Monthly</span>
		<label class="switch" id="">
            <input type="checkbox" checked="checked">
            <span class="slider"></span>
        </label>
		<span class="switch-label switch-label-yearly active">Yearly <span class="save-money">Save 10%</span></span>
		<!-- 
      Use https://codepen.io/raubaca/pen/VejpQP for styled dropdown 
      and https://lipis.github.io/flag-icon-css/flags/4x3/us.svg for flags
    -->
		<div class="save-money--mobile">Save 10% on Yearly Plans</div>

	</div>
	<!-- end of pricing-switch -->

	<div id="pricing-cards">

		<!-- ============================= -->
		<!-- = Premium Subscription Card = -->
		<!-- ============================= -->
		<div class="price-card">

			<div class="price-card--header">
				<h4>Premium</h4>
				<!-- <p>for growing your business</p> -->
			</div>

			<div class="price-card--price">
				<div class="price-card--price-text">
					<div class="price-card--price-number toggle-price-content odometer" data-price-monthly="2,499" data-price-yearly="2,250">2,250</div>
				</div>
				<div class="price-card--price-conditions">
					<div class="toggle-price-content" data-price-monthly="Billed Monthly" data-price-yearly="Billed Annually">Billed Annually</div>
					<div class="price-card--onboarding-fee toggle-price-content" data-price-monthly="+ $7,500 Onboarding Fee" data-price-yearly="No Onboarding Fee">No Onboarding Fee</div>
				</div>
			</div>

			<div class="price-card--cta">
				<a class="price-card--cta--button btn" href="/get-started-today">Get Started</a>
			</div>

			<div class="price-card--features">

				<ul class="price-card--features--list">
					<li class="price-card--features--item has-tooltip">Sales & Marketing Platform
						<div class="tooltip-container"><strong>Sales & Marketing Platform</strong>
							<p>Vendasta's end-to-end sales solution for companies that serve local businesses, and want to grow digital revenue.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Snapshot & Campaigns
						<div class="tooltip-container"><strong>Snapshot & Campaigns</strong>
							<p>Access to award-winning automated needs-assessment and email marketing automation. Unlimited emails sent to unlimited accounts.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Marketplace
						<div class="tooltip-container"><strong>Marketplace</strong>
							<p>Access to world-class resellable products & services, aimed to fulfilling the digital marketing needs of your small & medium sized business clients.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Business Center & Store
						<div class="tooltip-container"><strong>Business Center & Store</strong>
							<p>Portal for your local business clients, featuring your agency’s branding. They can access the products purchased from your Marketplace.</p>
						</div>
					</li>

					<li class="price-card--features--item has-tooltip">Tech support
						<div class="tooltip-container"><strong>Tech support</strong>
							<p>Phone, Email and Web Chat support, <br/>9am-9pm EST Mon-Fri, <br/>2pm-7pm EST Sat-Sun</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Partner Success Manager
						<div class="tooltip-container"><strong>Partner Success Manager</strong>
							<p>One-on-one with a Vendasta Success Manager, who will provide sales training so you reach your goals quickly.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Custom domains
						<div class="tooltip-container"><strong>Custom domains</strong>
							<p>Fully white-label the platform on your agency's own domains.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Concierge
						<div class="tooltip-container"><strong>Concierge</strong>
							<p>Multi-client agency fulfillment & task management app for teams.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Brand Analytics
						<div class="tooltip-container"><strong>Brand Analytics</strong>
							<p>Access to multi-location brand management app.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Managed Digital Ads
						<div class="tooltip-container"><strong>Managed Digital Ads</strong>
							<p>Access to our managed advertising service. Drive store visits, calls, texts & form fills for your clients.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Access to in-market seminars
						<div class="tooltip-container"><strong>Access to in-market seminars</strong>
							<p>Face to face training from our experts to yours.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">APIs & SSO
						<div class="tooltip-container"><strong>APIs & SSO</strong>
							<p>APIs to use our products in your dashboards.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Digital Agency
						<div class="tooltip-container"><strong>Digital Agency</strong>
							<p>Outsource your work to our fulfillment team.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">100% white-label
						<div class="tooltip-container"><strong>100% white-label</strong>
							<p>Digital Agency Email and phone communication under your brand. Customized workflows and toll-free numbers.</p>
						</div>
					</li>

				</ul>
			</div>

			<div class="price-card--mobile-features-toggle"></div>

		</div>
		<!-- End of Card -->

		<!-- ================================ -->
		<!-- = Enterprise Subscription Card = -->
		<!-- ================================ -->
		<div class="price-card price-card--hero">

			<div class="price-card--header">
				<h4>Enterprise</h4>
				<!--                <p>for growing your business</p> -->
			</div>
			<div class="price-card--hero-text">
				Most Popular Plan
			</div>

			<div class="price-card--price">
				<div class="price-card--price-text">
					<div class="price-card--price-number toggle-price-content odometer" data-price-monthly="999" data-price-yearly="900">900</div>
				</div>
				<div class="price-card--price-conditions">
					<div class="toggle-price-content" data-price-monthly="Billed Monthly" data-price-yearly="Billed Annually">Billed Annually</div>
					<div class="price-card--onboarding-fee toggle-price-content" data-price-monthly="+ $2,500 Onboarding Fee" data-price-yearly="No Onboarding Fee">No Onboarding Fee</div>
				</div>
			</div>

			<div class="price-card--cta">
				<a class="price-card--cta--button btn" href="/get-started-today">Get Started</a>
			</div>

			<div class="price-card--features">
				<ul class="price-card--features--list">

					<li class="price-card--features--item has-tooltip">Sales & Marketing Platform
						<div class="tooltip-container"><strong>Sales & Marketing Platform</strong>
							<p>Vendasta's end-to-end sales solution for companies that serve local businesses, and want to grow digital revenue.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Snapshot & Campaigns
						<div class="tooltip-container"><strong>Snapshot & Campaigns</strong>
							<p>Access to award-winning automated needs-assessment and email marketing automation. Unlimited emails sent to unlimited accounts.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Marketplace
						<div class="tooltip-container"><strong>Marketplace</strong>
							<p>Access to world-class resellable products & services, aimed to fulfilling the digital marketing needs of your small & medium sized business clients.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Business Center & Store
						<div class="tooltip-container"><strong>Business Center & Store</strong>
							<p>Portal for your local business clients, featuring your agency’s branding. They can access the products purchased from your Marketplace.</p>
						</div>
					</li>

					<li class="price-card--features--item has-tooltip">Tech support
						<div class="tooltip-container"><strong>Tech support</strong>
							<p>Phone, Email and Web Chat support, <br/>9am-9pm EST Mon-Fri, <br/>2pm-7pm EST Sat-Sun</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Partner Success Manager
						<div class="tooltip-container"><strong>Partner Success Manager</strong>
							<p>One-on-one with a Vendasta Success Manager, who will provide sales training so you reach your goals quickly.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Custom domains
						<div class="tooltip-container"><strong>Custom domains</strong>
							<p>Fully white-label the platform on your agency's own domains.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Concierge
						<div class="tooltip-container"><strong>Concierge</strong>
							<p>Multi-client agency fulfillment & task management app for teams.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Brand Analytics
						<div class="tooltip-container"><strong>Brand Analytics</strong>
							<p>Access to multi-location brand management app.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Managed Digital Ads
						<div class="tooltip-container"><strong>Managed Digital Ads</strong>
							<p>Access to our managed advertising service. Drive store visits, calls, texts & form fills for your clients.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Access to in-market seminars
						<div class="tooltip-container"><strong>Access to in-market seminars</strong>
							<p>Face to face training from our experts to yours.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">APIs & SSO
						<div class="tooltip-container"><strong>APIs & SSO</strong>
							<p>APIs to use our products in your dashboards.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Digital Agency
						<div class="tooltip-container"><strong>Digital Agency</strong>
							<p>Outsource your work to our fulfillment team.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">100% white-label
						<div class="tooltip-container"><strong>100% white-label</strong>
							<p>Digital Agency Email and phone communication under your brand. Customized workflows and toll-free numbers.</p>
						</div>
					</li>

				</ul>
			</div>

			<div class="price-card--mobile-features-toggle"></div>

		</div>
		<!-- End of Card -->

		<!-- ========================= -->
		<!-- = Pro Subscription Card = -->
		<!-- ========================= -->
		<div class="price-card">

			<div class="price-card--header">
				<h4>Pro</h4>
				<!--                <p>growing your business</p> -->
			</div>

			<div class="price-card--price">
				<div class="price-card--price-text">
					<div class="price-card--price-number toggle-price-content odometer" data-price-monthly="499" data-price-yearly="450">450</div>
				</div>
				<div class="price-card--price-conditions">
					<div class="toggle-price-content" data-price-monthly="Billed Monthly" data-price-yearly="Billed Annually">Billed Annually</div>
					<div class="price-card--onboarding-fee toggle-price-content" data-price-monthly="+ $1,500 Onboarding Fee" data-price-yearly="No Onboarding Fee">No Onboarding Fee</div>
				</div>
			</div>

			<div class="price-card--cta">
				<a class="price-card--cta--button btn" href="/get-started-today">Get Started</a>
			</div>

			<div class="price-card--features">
				<ul class="price-card--features--list">

					<li class="price-card--features--item has-tooltip">Sales & Marketing Platform
						<div class="tooltip-container"><strong>Sales & Marketing Platform</strong>
							<p>Vendasta's end-to-end sales solution for companies that serve local businesses, and want to grow digital revenue.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Snapshot & Campaigns
						<div class="tooltip-container"><strong>Snapshot & Campaigns</strong>
							<p>Access to award-winning automated needs-assessment and email marketing automation. Unlimited emails sent to unlimited accounts.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Marketplace
						<div class="tooltip-container"><strong>Marketplace</strong>
							<p>Access to world-class resellable products & services, aimed to fulfilling the digital marketing needs of your small & medium sized business clients.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Business Center & Store
						<div class="tooltip-container"><strong>Business Center & Store</strong>
							<p>Portal for your local business clients, featuring your agency’s branding. They can access the products purchased from your Marketplace.</p>
						</div>
					</li>

					<li class="price-card--features--item has-tooltip">Tech support
						<div class="tooltip-container"><strong>Tech support</strong>
							<p>Phone, Email and Web Chat support, <br/>9am-9pm EST Mon-Fri, <br/>2pm-7pm EST Sat-Sun</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Partner Success Manager
						<div class="tooltip-container"><strong>Partner Success Manager</strong>
							<p>One-on-one with a Vendasta Success Manager, who will provide sales training so you reach your goals quickly.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Custom domains
						<div class="tooltip-container"><strong>Custom domains</strong>
							<p>Fully white-label the platform on your agency's own domains.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Concierge
						<div class="tooltip-container"><strong>Concierge</strong>
							<p>Multi-client agency fulfillment & task management app for teams.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Brand Analytics
						<div class="tooltip-container"><strong>Brand Analytics</strong>
							<p>Access to multi-location brand management app.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Managed Digital Ads
						<div class="tooltip-container"><strong>Managed Digital Ads</strong>
							<p>Access to our managed advertising service. Drive store visits, calls, texts & form fills for your clients.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Access to in-market seminars
						<div class="tooltip-container"><strong>Access to in-market seminars</strong>
							<p>Face to face training from our experts to yours.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">APIs & SSO
						<div class="tooltip-container"><strong>APIs & SSO</strong>
							<p>APIs to use our products in your dashboards.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Digital Agency
						<div class="tooltip-container"><strong>Digital Agency</strong>
							<p>Outsource your work to our fulfillment team.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">100% white-label
						<div class="tooltip-container"><strong>100% white-label</strong>
							<p>Digital Agency Email and phone communication under your brand. Customized workflows and toll-free numbers.</p>
						</div>
					</li>

				</ul>
			</div>

			<div class="price-card--mobile-features-toggle"></div>

		</div>
		<!-- End of Card -->

		<!-- =========================== -->
		<!-- = Basic Subscription Card = -->
		<!-- =========================== -->
		<div class="price-card">

			<div class="price-card--header">
				<h4>Basic</h4>
				<!--                <p>getting started</p> -->
			</div>

			<div class="price-card--price">
				<div class="price-card--price-text only-yearly">
					<div class="price-card--price-number odometer">249</div>
					<div class="only-yearly--text"><span>Only Available Yearly</span></div>
				</div>
				<div class="price-card--price-conditions">
					<div>Billed Annually</div>
					<div class="price-card--onboarding-fee">No Onboarding Fee</div>
				</div>
			</div>

			<div class="price-card--cta">
				<a class="price-card--cta--button btn" href="/get-started-today">Get Started</a>
			</div>

			<div class="price-card--features">
				<ul class="price-card--features--list">

					<li class="price-card--features--item has-tooltip">Sales & Marketing Platform
						<div class="tooltip-container"><strong>Sales & Marketing Platform</strong>
							<p>Vendasta's end-to-end sales solution for companies that serve local businesses, and want to grow digital revenue.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Snapshot & Campaigns
						<div class="tooltip-container"><strong>Snapshot & Campaigns</strong>
							<p>Access to award-winning automated needs-assessment and email marketing automation. Unlimited emails sent to unlimited accounts.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Marketplace
						<div class="tooltip-container"><strong>Marketplace</strong>
							<p>Access to world-class resellable products & services, aimed to fulfilling the digital marketing needs of your small & medium sized business clients.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Business Center & Store
						<div class="tooltip-container"><strong>Business Center & Store</strong>
							<p>Portal for your local business clients, featuring your agency’s branding. They can access the products purchased from your Marketplace.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip">Tech support (limited)
						<div class="tooltip-container"><strong>Tech support (limited)</strong>
							<p>Email and Web Chat support, <br/>9am-9pm EST Mon-Fri, <br/>2pm-7pm EST Sat-Sun</p>
						</div>
					</li>

					<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Partner Success Manager
						<div class="tooltip-container"><strong>Partner Success Manager</strong>
							<p>One-on-one with a Vendasta Success Manager, who will provide sales training so you reach your goals quickly.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Custom domains
						<div class="tooltip-container"><strong>Custom domains</strong>
							<p>Fully white-label the platform on your agency's own domains.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Concierge
						<div class="tooltip-container"><strong>Concierge</strong>
							<p>Multi-client agency fulfillment & task management app for teams.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Brand Analytics
						<div class="tooltip-container"><strong>Brand Analytics</strong>
							<p>Access to multi-location brand management app.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Managed Digital Ads
						<div class="tooltip-container"><strong>Managed Digital Ads</strong>
							<p>Access to our managed advertising service. Drive store visits, calls, texts & form fills for your clients.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Access to in-market seminars
						<div class="tooltip-container"><strong>Access to in-market seminars</strong>
							<p>Face to face training from our experts to yours.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">APIs & SSO
						<div class="tooltip-container"><strong>APIs & SSO</strong>
							<p>APIs to use our products in your dashboards.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">Digital Agency
						<div class="tooltip-container"><strong>Digital Agency</strong>
							<p>Outsource your work to our fulfillment team.</p>
						</div>
					</li>
					<li class="price-card--features--item has-tooltip tooltip-disabled features-disabled">100% white-label
						<div class="tooltip-container"><strong>100% white-label</strong>
							<p>Digital Agency Email and phone communication under your brand. Customized workflows and toll-free numbers.</p>
						</div>
					</li>

				</ul>
			</div>

			<div class="price-card--mobile-features-toggle"></div>

		</div>
		<!-- End of Card -->

	</div>
	<!--    end of pricing-cards -->

	<div id="elite-pricing-container">

		<div id="elite-pricing-sales-text">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris enim?
		</div>

		<!-- =========================== -->
		<!-- = Elite Subscription Card = -->
		<!-- =========================== -->
		<div id="elite-pricing-card" class="price-card">

			<div class="price-card--header">
				<h4>Elite</h4>
			</div>

			<div id="elite-pricing-card--desc">
				Praesent semper ac mi eu hendrerit. Sed sit amet lectus libero. Maecenas mattis porttitor ullamcorper.
			</div>

			<div class="price-card--cta">
				<a class="price-card--cta--button btn" href="/get-started-today">Contact Sales</a>
			</div>

			<div class="price-card--features">

				
				<ul class="price-card--features--list">

					<li class="price-card--features--item">
						<strong>Unlimited 1-on-1 support</strong>
						<div class="executive-feature-desc">
							Praesent semper ac mi eu hendrerit. Sed sit amet lectus.
						</div>
					</li>

					<li class="price-card--features--item">
						<strong>Premium, tailor-made marketing</strong>
						<div class="executive-feature-desc">
							Pad sit amet lectus libero. Maecenas mattis porttitor.
						</div>
					</li>

					<li class="price-card--features--item">
						<strong>Executive Sponsorship</strong>
						<div class="executive-feature-desc">
							Semper ac mi eu hendrerit. Sed sit amet lectus libero.
						</div>
					</li>

				</ul>
			</div>

			<div class="price-card--mobile-features-toggle"></div>

		</div>
		<!-- End of Card -->

	</div>

</section>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/themes/odometer-theme-minimal.css"/>
<style>
  #elite-pricing-container{
	margin-top:50px;
	position:relative;
	display: flex;
	align-items:flex-start;
	justify-content: center;
	flex-wrap:wrap;
	box-sizing:border-box;
}

#elite-pricing-sales-text{
	
	padding-right:80px;
	text-align:right;
	font-size:24px;
	font-family: 'Raleway',Helvetica,Arial,Lucida,sans-serif;
	color: #555555;
	line-height: 1.5;
	font-weight: 700;
	max-width:450px;
	padding-top:90px;
}

#elite-pricing-card.price-card{
	max-width:330px;
	color:white;
	position: relative;
	margin: 0 6px;
	padding: 30px 40px 10px 40px;
	background: url('https://images.unsplash.com/photo-1464639351491-a172c2aa2911?ixlib=rb-0.3.5&s=427721bc23b5d868669d8f0ba09c8710&auto=format&fit=crop&w=1200&q=80') left top no-repeat black;
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}


#elite-pricing-card.price-card .price-card--header{
	padding:0;
	background-color:transparent;
}

#elite-pricing-card.price-card .price-card--header h4{
	font-size: 36px;
	font-weight: 600;
	padding-bottom:16px;
	margin-bottom:16px;
	border-bottom: 1px solid #f0c328;
	
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(top left, #efd100 0, #e2a233 38%, #f0c328 60%, #fff1a3 86%, #ffe13e 100%);
  background-size: 1em 1em;
  color: #fff1a3;
}

#elite-pricing-card.price-card #elite-pricing-card--desc{
	padding-bottom:25px;
}

#elite-pricing-card.price-card .price-card--features{
	border-top: 1px solid #f0c328;
}

#elite-pricing-card.price-card ul.price-card--features--list{
	padding:0 11px;
}

#elite-pricing-card.price-card .price-card--features--item{
	padding-bottom:16px;
}

#elite-pricing-card.price-card .price-card--features--item:before{
color:#f0c328 !important;
	left:-12px !important;
}


#elite-pricing-card.price-card .price-card--cta--button.btn{
  background-color: #f0c328;
	color:black;
	margin:0 auto;
}
#elite-pricing-card.price-card .price-card--cta--button.btn:hover{
	background-color:white;
}

#elite-pricing-card--desc{
	font-size:16px;
	line-height:1.5;
	max-width:400px;
}


@media (max-width: 980px) {
	#pricing-cards{
/* 		display:none !important; */
	}
	

}











/* - - - - - - - - - Tooltips - - - */

.has-tooltip:not(.tooltip-disabled) {
	cursor: help;
	position:relative;
}

.has-tooltip:not(.tooltip-disabled):hover
	.tooltip-container {
	display: block;
}

.has-tooltip .tooltip-container {
	display: none;
	position: absolute;
	background-color: white;
	z-index: 20;
	bottom: calc(100% + 13px);
	left: -10px;
	right: -10px;
	padding: 16px 20px;
	border-radius: 8px;
	box-shadow: 0 6px 55px -10px #777;
}
.has-tooltip .tooltip-container:after {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid white;
	font-size: 0;
	line-height: 0;
	content: "";
	position: absolute;
	bottom: -10px;
}

.has-tooltip .tooltip-container h6 {
	font-weight: 600;
	font-size: 16px;
	margin: 0px;
}

.has-tooltip .tooltip-container p {
	color: #555;
	margin-top:4px;
}
/* - - - - - - - End Tooltips - - - */





#pricing-container * {
	box-sizing:border-box;
}

#pricing-container {
	font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
	-webkit-font-smoothing: antialiased;
	max-width: 1080px;
	margin: 0 auto 50px;
	justify-content: center;
	line-height: 1;
	color: #000;
}



/* Cards */

#pricing-cards {
	display: flex;
	font-size: 14px;
}

#pricing-container .price-card {
	background-color: white;
	font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
	display: block;
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
	transition: all 0.25s;
	position: relative;
	margin: 0 6px;
	flex-grow: 1;
	flex-shrink:1;
}

#pricing-container .price-card:hover {
	transform: translateY(-5px);
		box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.14),
		0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}


/* - - - - - - - - - Header Section - - - */

#pricing-container .price-card--header {
	background-color: #daf1df;
	margin: 0;
	padding: 20px 0;
	text-align: center;
}

#pricing-container .price-card--header h4 {
	margin: 0;
	padding: 0;
	font-size: 28px;
	color: #1b5e20;
	font-family: "Raleway", Helvetica, Arial, Lucida, sans-serif;
	font-weight: 700;
}


/* - - - - - - - - - Price Section - - - */

#pricing-container .price-card--price {
	text-align: center;
	padding: 28px 0 6px 0;
}

#pricing-container .price-card--price-text {
	font-size: 48px;
}

#pricing-container .price-card--price-number {
	font-weight: 500;
	opacity: 0.89;
}

.odometer div {
	display: inline-block;
}

#pricing-container .price-card--price-number:before {
	content: "$";
	font-size: 24px;
	top: -16px;
	display: inline-block;
	position: relative;
}

#pricing-container .price-card--price-number:after {
	content: "/month";
	font-size: 12px;
	display: inline-block;
	color: grey;
}

#pricing-container .price-card--price-conditions {
	padding: 14px 0;
	color: #888;
	line-height: 1.5;
}

#pricing-container .price-card--onboarding-fee {
	color: green;
}

#pricing-container .price-card--onboarding-fee.has-fee {
	color: #888;
}


/* - - - - - - - - - CTA Button Section - - - */

#pricing-container .price-card--cta {
	padding: 0 20px 24px;
	text-align: center;
}

#pricing-container .price-card--cta--button.btn{
	min-width:20px;
	display:block;
	max-width:183px;
	margin:0 auto;
}





/* - - - - - - - - - Features Section - - - */

#pricing-container .price-card--features {
	border-top: 1px solid #ddd;
	padding: 16px 0 20px;
}

#pricing-container ul.price-card--features--list {
	padding: 0 32px;
	list-style: none;
	margin: 0;
}

#pricing-container li.price-card--features--item {
	margin: 8px 0;
	padding-left: 8px;
	line-height: 1.5;
	position: relative;
}

#pricing-container
	li.price-card--features--item:not(.features-disabled):before {
	content: "✓";
	color: green;
	display: block;
	position: absolute;
	left: -8px;
}

#pricing-container li.price-card--features--item.features-highlight {
	/* 	font-weight: 600; */
}

#pricing-container li.price-card--features--item.features-disabled {
	opacity: 0.1;
	/* 	text-decoration: line-through; */
}




/* - - - - - - - - - Mobile Features Toggle - - - */

#pricing-container .price-card--mobile-features-toggle {
	text-align: center;
	border-top: 1px solid #ddd;
	margin: 24px 0 0;
	padding: 16px 0;
	cursor: pointer;
	display: none;
	color: green;
}

#pricing-container .price-card--mobile-features-toggle:after {
	content: "Show All Features ▾";
}
#pricing-container .price-card--mobile-features-toggle.hideall:after {
	content: "Hide Features ▴";
}

/* - - - - - - - - - Hero Card Styles - - - */

#pricing-container .price-card--hero {
	margin: -38px 6px 0;
	/* 	width:31%; */
	z-index: 10;
}

#pricing-container .price-card--hero-text {
	background-color: #3f9b63;
	height: 38px;
	color: white;
	line-height: 38px;
	text-align: center;
	font-weight: 600;
}

/* - - - - - - - - - Only Yearly Basic Styles - - - */

#pricing-container .only-yearly {
	position: relative;
}

#pricing-container .only-yearly .price-card--price-number {
	transition: opacity 0.2s;
}

#pricing-container .only-yearly .only-yearly--text {
	position: absolute;
	top: -0.2em;
	left: 0;
	right: 0;
	display: none;
}
#pricing-container .only-yearly .only-yearly--text span {
	font-size: 14px;
}

#pricing-container .only-yearly.if-monthly .price-card--price-number {
	opacity: 0;
}

#pricing-container .only-yearly.if-monthly .only-yearly--text {
	display: block;
}

/* - - - - - - - - - Switch Section - - - */

#pricing-switch {
	margin: 80px auto 100px;
	text-align: center;
	line-height: 1.4;
	position: relative;
	max-width: 1080px;
}

#pricing-switch .switch-label {
	display: inline-block;
	width: 200px;
	text-align: center;
	opacity: 0.4;
	font-size: 16px;
	cursor: pointer;
	padding: 0 20px;
}

#pricing-switch .switch-label .save-money {
	color: #4caf50;
	font-style: italic;
	padding-left: 8px;
}
#pricing-switch .save-money--mobile {
	color: #4caf50;
	font-style: italic;
	padding-top: 22px;
	display: none;
}

#pricing-switch .switch-label.active {
	font-size: 18px;
	opacity: 1;
}
#pricing-switch .switch-label-monthly {
	text-align: right;
}
#pricing-switch .switch-label-yearly {
	text-align: left;
}

#pricing-switch .switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	vertical-align: -50%;
	margin: 0;
}

#pricing-switch .switch input {
	display: none;
}

#pricing-switch .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #3f9b63;
	border-radius: 34px;
	-webkit-transition: 0.1s;
	transition: 0.1s;
}

#pricing-switch .slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	border-radius: 50%;
	-webkit-transition: 0.1s;
	transition: 0.1s;
}

/* #pricing-switch input:checked + .slider {
	background-color: green;
} */

#pricing-switch input:focus + .slider {
	box-shadow: 0 0 1px #2196f3;
}

#pricing-switch input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

@media (max-width: 767px) {
}




/* - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - Media Queries - - - */
/* - - - - - - - - - - - - - - - - - - - */

@media (max-width: 1280px) {
	/* Tweak the card price font size */
	#pricing-container .price-card--price-text {
		font-size: 32px;
	}
	#pricing-container .price-card--price-number:before {
		top: -10px;
		font-size: 18px;
	}
}

@media (min-width: 981px) {
	/* 	always show features when not in mobile view */
	#pricing-container .price-card--features {
		display: block !important;
	}
}

@media (max-width: 980px) {
	#pricing-cards {
		display: block;
		padding: 0 24px;
	}
	#pricing-container .price-card {
		max-width: 360px;
		margin: 0 auto 48px;
	}
	#pricing-container .price-card:hover {
		transform: none;
	}
	#pricing-container .price-card-full-width {
		display: block;
	}
	#pricing-container .price-card-full-width .price-card--features--list {
		columns: 1;
	}
	#pricing-container .price-card--price {
		padding: 28px 0 0;
	}
	#pricing-container .price-card--features {
		display: none;
		margin: 26px 0 0 0;
		padding-bottom:0;
	}
	#pricing-container ul.price-card--features--list {
		max-width: 250px;
		margin: 0 auto;
	}
	#pricing-container li.price-card--features--item.features-disabled {
		display: none;
	}
	#pricing-container .price-card--mobile-features-toggle {
		display: block;
	}

	/* Pricing Switch */
	#pricing-switch {
		margin: 26px 0 52px;
	}
	#pricing-switch .switch-label {
		display: inline-block;
		width: auto;
		font-size:15px;
	}
	#pricing-switch .switch-label.active{
		font-size:16px;
	}
	#pricing-switch .switch-label .save-money {
		display: none;
	}
	#pricing-switch .save-money--mobile {
		display: block;
	}
	
	/* Elite Pricing */
	#elite-pricing-container{
		display:block;
		padding: 0 24px
	}
	#elite-pricing-sales-text{
		padding-right: 0;
		padding-bottom: 32px;
		padding-top:0;
		width:auto;
		max-width:360px;
		margin: 0 auto;
		text-align: left;
		font-size:18px;
		line-height:1.5;
	}
	#elite-pricing-card.price-card .price-card--mobile-features-toggle{
		border-top:none;
		color: #f0c328;
		display:none;
	}
	#elite-pricing-card.price-card .price-card--features{
		display:block;
	}
}


@media (max-width: 480px) {
	#pricing-container .price-card {
		max-width: 360px;
		margin: 0 auto 36px;
	}

	#pricing-switch {
		margin: 26px 0 36px;
	}

	#elite-pricing-card.price-card{
	padding: 30px 20px 10px 20px;
	}
}










/* ****************** */
/* Odometer Theme CSS */
/* ****************** */
/* https://raw.githubusercontent.com/HubSpot/odometer/master/themes/odometer-theme-default.css */

.odometer.odometer-auto-theme,
.odometer.odometer-theme-default {
	display: inline-block;
	vertical-align: middle;
	*vertical-align: auto;
	*zoom: 1;
	*display: inline;
	position: relative;
}
.odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-theme-default .odometer-digit {
	display: inline-block;
	vertical-align: middle;
	*vertical-align: auto;
	*zoom: 1;
	*display: inline;
	position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,
.odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
	display: inline-block;
	vertical-align: middle;
	*vertical-align: auto;
	*zoom: 1;
	*display: inline;
	visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,
.odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
	text-align: left;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
	display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
	display: block;
	-webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value,
.odometer.odometer-theme-default .odometer-digit .odometer-value {
	display: block;
	-webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme
	.odometer-digit
	.odometer-value.odometer-last-value,
.odometer.odometer-theme-default
	.odometer-digit
	.odometer-value.odometer-last-value {
	position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
	-webkit-transition: -webkit-transform 2s;
	-moz-transition: -moz-transform 2s;
	-ms-transition: -ms-transform 2s;
	-o-transition: -o-transform 2s;
	transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating
	.odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up.odometer-animating
	.odometer-ribbon-inner {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down
	.odometer-ribbon-inner {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating
	.odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down.odometer-animating
	.odometer-ribbon-inner {
	-webkit-transition: -webkit-transform 2s;
	-moz-transition: -moz-transform 2s;
	-ms-transition: -ms-transform 2s;
	-o-transition: -o-transform 2s;
	transition: transform 2s;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.odometer.odometer-auto-theme,
.odometer.odometer-theme-default {
	font-family: "Helvetica Neue", sans-serif;
	line-height: 1.1em;
}
.odometer.odometer-auto-theme .odometer-value,
.odometer.odometer-theme-default .odometer-value {
	text-align: center;
}

/* ************************** */
/* UPDATES TO CHANGE DURATION */
/* ************************** */

.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating
	.odometer-ribbon-inner,
.odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating
	.odometer-ribbon-inner {
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	-ms-transition: -ms-transform 0.4s;
	-o-transition: -o-transform 0.4s;
	transition: transform 0.4s;
	will-change: auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery.noConflict();
(function($) {
	$(function() {
		var toggleSwitch = $("#pricing-switch input");

		(function() {
			$(toggleSwitch).change(function() {
				// Change prices for plans
				togglePriceContent();

				// Toggle monthly/yearly style
				$(".switch-label-monthly, .switch-label-yearly").toggleClass("active");

				// Basic is only available yearly message
				$(".only-yearly").toggleClass("if-monthly");

				// Highlight "No Onboarding" fee
				$(".price-card--onboarding-fee").toggleClass("has-fee");
			});

			$(".switch-label-monthly, .switch-label-yearly").click(function() {
				// Toggle switch when monthly/yearly is clicked
				$(toggleSwitch).click();
			});

			$(".price-card--mobile-features-toggle").click(function() {
				// Show/Hide features while in mobile
				$(this)
					.siblings(".price-card--features")
					.slideToggle(200);
				$(this).toggleClass("hideall");
			});
		})();

		function togglePriceContent() {
			if ($(toggleSwitch).is(":checked") === true) {
				// if toggle is yearly
				$(".toggle-price-content").each(function() {
					$(this).html($(this).data("price-yearly"));
				});
			} else {
				// if toggle is monthly
				$(".toggle-price-content").each(function() {
					$(this).html($(this).data("price-monthly"));
				});
			}
		}
	});
})(jQuery);

window.odometerOptions = {
	duration: 400
};

// http://github.hubspot.com/odometer/
// https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/odometer.js
(function() {
	var COUNT_FRAMERATE,
		COUNT_MS_PER_FRAME,
		DIGIT_FORMAT,
		DIGIT_HTML,
		DIGIT_SPEEDBOOST,
		DURATION,
		FORMAT_MARK_HTML,
		FORMAT_PARSER,
		FRAMERATE,
		FRAMES_PER_VALUE,
		MS_PER_FRAME,
		MutationObserver,
		Odometer,
		RIBBON_HTML,
		TRANSITION_END_EVENTS,
		TRANSITION_SUPPORT,
		VALUE_HTML,
		addClass,
		createFromHTML,
		fractionalPart,
		now,
		removeClass,
		requestAnimationFrame,
		round,
		transitionCheckStyles,
		trigger,
		truncate,
		wrapJQuery,
		_jQueryWrapped,
		_old,
		_ref,
		_ref1,
		__slice = [].slice;

	VALUE_HTML = '<span class="odometer-value"></span>';

	RIBBON_HTML =
		'<span class="odometer-ribbon"><span class="odometer-ribbon-inner">' +
		VALUE_HTML +
		"</span></span>";

	DIGIT_HTML =
		'<span class="odometer-digit"><span class="odometer-digit-spacer">8</span><span class="odometer-digit-inner">' +
		RIBBON_HTML +
		"</span></span>";

	FORMAT_MARK_HTML = '<span class="odometer-formatting-mark"></span>';

	DIGIT_FORMAT = "(,ddd).dd";

	FORMAT_PARSER = /^\(?([^)]*)\)?(?:(.)(d+))?$/;

	FRAMERATE = 30;

	DURATION = 2000;

	COUNT_FRAMERATE = 20;

	FRAMES_PER_VALUE = 2;

	DIGIT_SPEEDBOOST = 0.5;

	MS_PER_FRAME = 1000 / FRAMERATE;

	COUNT_MS_PER_FRAME = 1000 / COUNT_FRAMERATE;

	TRANSITION_END_EVENTS =
		"transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd";

	transitionCheckStyles = document.createElement("div").style;

	TRANSITION_SUPPORT =
		transitionCheckStyles.transition != null ||
		transitionCheckStyles.webkitTransition != null ||
		transitionCheckStyles.mozTransition != null ||
		transitionCheckStyles.oTransition != null;

	requestAnimationFrame =
		window.requestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.webkitRequestAnimationFrame ||
		window.msRequestAnimationFrame;

	MutationObserver =
		window.MutationObserver ||
		window.WebKitMutationObserver ||
		window.MozMutationObserver;

	createFromHTML = function(html) {
		var el;
		el = document.createElement("div");
		el.innerHTML = html;
		return el.children[0];
	};

	removeClass = function(el, name) {
		return (el.className = el.className.replace(
			new RegExp("(^| )" + name.split(" ").join("|") + "( |$)", "gi"),
			" "
		));
	};

	addClass = function(el, name) {
		removeClass(el, name);
		return (el.className += " " + name);
	};

	trigger = function(el, name) {
		var evt;
		if (document.createEvent != null) {
			evt = document.createEvent("HTMLEvents");
			evt.initEvent(name, true, true);
			return el.dispatchEvent(evt);
		}
	};

	now = function() {
		var _ref, _ref1;
		return (_ref =
			(_ref1 = window.performance) != null
				? typeof _ref1.now === "function" ? _ref1.now() : void 0
				: void 0) != null
			? _ref
			: +new Date();
	};

	round = function(val, precision) {
		if (precision == null) {
			precision = 0;
		}
		if (!precision) {
			return Math.round(val);
		}
		val *= Math.pow(10, precision);
		val += 0.5;
		val = Math.floor(val);
		return (val /= Math.pow(10, precision));
	};

	truncate = function(val) {
		if (val < 0) {
			return Math.ceil(val);
		} else {
			return Math.floor(val);
		}
	};

	fractionalPart = function(val) {
		return val - round(val);
	};

	_jQueryWrapped = false;

	(wrapJQuery = function() {
		var property, _i, _len, _ref, _results;
		if (_jQueryWrapped) {
			return;
		}
		if (window.jQuery != null) {
			_jQueryWrapped = true;
			_ref = ["html", "text"];
			_results = [];
			for (_i = 0, _len = _ref.length; _i < _len; _i++) {
				property = _ref[_i];
				_results.push(
					(function(property) {
						var old;
						old = window.jQuery.fn[property];
						return (window.jQuery.fn[property] = function(val) {
							var _ref1;
							if (
								val == null ||
								((_ref1 = this[0]) != null ? _ref1.odometer : void 0) == null
							) {
								return old.apply(this, arguments);
							}
							return this[0].odometer.update(val);
						});
					})(property)
				);
			}
			return _results;
		}
	})();

	setTimeout(wrapJQuery, 0);

	Odometer = (function() {
		function Odometer(options) {
			var e,
				k,
				property,
				v,
				_base,
				_i,
				_len,
				_ref,
				_ref1,
				_ref2,
				_this = this;
			this.options = options;
			this.el = this.options.el;
			if (this.el.odometer != null) {
				return this.el.odometer;
			}
			this.el.odometer = this;
			_ref = Odometer.options;
			for (k in _ref) {
				v = _ref[k];
				if (this.options[k] == null) {
					this.options[k] = v;
				}
			}
			if ((_base = this.options).duration == null) {
				_base.duration = DURATION;
			}
			this.MAX_VALUES =
				(this.options.duration / MS_PER_FRAME / FRAMES_PER_VALUE) | 0;
			this.resetFormat();
			this.value = this.cleanValue(
				(_ref1 = this.options.value) != null ? _ref1 : ""
			);
			this.renderInside();
			this.render();
			try {
				_ref2 = ["innerHTML", "innerText", "textContent"];
				for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
					property = _ref2[_i];
					if (this.el[property] != null) {
						(function(property) {
							return Object.defineProperty(_this.el, property, {
								get: function() {
									var _ref3;
									if (property === "innerHTML") {
										return _this.inside.outerHTML;
									} else {
										return (_ref3 = _this.inside.innerText) != null
											? _ref3
											: _this.inside.textContent;
									}
								},
								set: function(val) {
									return _this.update(val);
								}
							});
						})(property);
					}
				}
			} catch (_error) {
				e = _error;
				this.watchForMutations();
			}
			this;
		}

		Odometer.prototype.renderInside = function() {
			this.inside = document.createElement("div");
			this.inside.className = "odometer-inside";
			this.el.innerHTML = "";
			return this.el.appendChild(this.inside);
		};

		Odometer.prototype.watchForMutations = function() {
			var e,
				_this = this;
			if (MutationObserver == null) {
				return;
			}
			try {
				if (this.observer == null) {
					this.observer = new MutationObserver(function(mutations) {
						var newVal;
						newVal = _this.el.innerText;
						_this.renderInside();
						_this.render(_this.value);
						return _this.update(newVal);
					});
				}
				this.watchMutations = true;
				return this.startWatchingMutations();
			} catch (_error) {
				e = _error;
			}
		};

		Odometer.prototype.startWatchingMutations = function() {
			if (this.watchMutations) {
				return this.observer.observe(this.el, {
					childList: true
				});
			}
		};

		Odometer.prototype.stopWatchingMutations = function() {
			var _ref;
			return (_ref = this.observer) != null ? _ref.disconnect() : void 0;
		};

		Odometer.prototype.cleanValue = function(val) {
			var _ref;
			if (typeof val === "string") {
				val = val.replace(
					(_ref = this.format.radix) != null ? _ref : ".",
					"<radix>"
				);
				val = val.replace(/[.,]/g, "");
				val = val.replace("<radix>", ".");
				val = parseFloat(val, 10) || 0;
			}
			return round(val, this.format.precision);
		};

		Odometer.prototype.bindTransitionEnd = function() {
			var event,
				renderEnqueued,
				_i,
				_len,
				_ref,
				_results,
				_this = this;
			if (this.transitionEndBound) {
				return;
			}
			this.transitionEndBound = true;
			renderEnqueued = false;
			_ref = TRANSITION_END_EVENTS.split(" ");
			_results = [];
			for (_i = 0, _len = _ref.length; _i < _len; _i++) {
				event = _ref[_i];
				_results.push(
					this.el.addEventListener(
						event,
						function() {
							if (renderEnqueued) {
								return true;
							}
							renderEnqueued = true;
							setTimeout(function() {
								_this.render();
								renderEnqueued = false;
								return trigger(_this.el, "odometerdone");
							}, 0);
							return true;
						},
						false
					)
				);
			}
			return _results;
		};

		Odometer.prototype.resetFormat = function() {
			var format, fractional, parsed, precision, radix, repeating, _ref, _ref1;
			format = (_ref = this.options.format) != null ? _ref : DIGIT_FORMAT;
			format || (format = "d");
			parsed = FORMAT_PARSER.exec(format);
			if (!parsed) {
				throw new Error("Odometer: Unparsable digit format");
			}
			(_ref1 = parsed.slice(1, 4)),
				(repeating = _ref1[0]),
				(radix = _ref1[1]),
				(fractional = _ref1[2]);
			precision = (fractional != null ? fractional.length : void 0) || 0;
			return (this.format = {
				repeating: repeating,
				radix: radix,
				precision: precision
			});
		};

		Odometer.prototype.render = function(value) {
			var classes, cls, match, newClasses, theme, _i, _len;
			if (value == null) {
				value = this.value;
			}
			this.stopWatchingMutations();
			this.resetFormat();
			this.inside.innerHTML = "";
			theme = this.options.theme;
			classes = this.el.className.split(" ");
			newClasses = [];
			for (_i = 0, _len = classes.length; _i < _len; _i++) {
				cls = classes[_i];
				if (!cls.length) {
					continue;
				}
				if ((match = /^odometer-theme-(.+)$/.exec(cls))) {
					theme = match[1];
					continue;
				}
				if (/^odometer(-|$)/.test(cls)) {
					continue;
				}
				newClasses.push(cls);
			}
			newClasses.push("odometer");
			if (!TRANSITION_SUPPORT) {
				newClasses.push("odometer-no-transitions");
			}
			if (theme) {
				newClasses.push("odometer-theme-" + theme);
			} else {
				newClasses.push("odometer-auto-theme");
			}
			this.el.className = newClasses.join(" ");
			this.ribbons = {};
			this.formatDigits(value);
			return this.startWatchingMutations();
		};

		Odometer.prototype.formatDigits = function(value) {
			var digit,
				valueDigit,
				valueString,
				wholePart,
				_i,
				_j,
				_len,
				_len1,
				_ref,
				_ref1;
			this.digits = [];
			if (this.options.formatFunction) {
				valueString = this.options.formatFunction(value);
				_ref = valueString.split("").reverse();
				for (_i = 0, _len = _ref.length; _i < _len; _i++) {
					valueDigit = _ref[_i];
					if (valueDigit.match(/0-9/)) {
						digit = this.renderDigit();
						digit.querySelector(".odometer-value").innerHTML = valueDigit;
						this.digits.push(digit);
						this.insertDigit(digit);
					} else {
						this.addSpacer(valueDigit);
					}
				}
			} else {
				wholePart = !this.format.precision || !fractionalPart(value) || false;
				_ref1 = value
					.toString()
					.split("")
					.reverse();
				for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
					digit = _ref1[_j];
					if (digit === ".") {
						wholePart = true;
					}
					this.addDigit(digit, wholePart);
				}
			}
		};

		Odometer.prototype.update = function(newValue) {
			var diff,
				_this = this;
			newValue = this.cleanValue(newValue);
			if (!(diff = newValue - this.value)) {
				return;
			}
			removeClass(
				this.el,
				"odometer-animating-up odometer-animating-down odometer-animating"
			);
			if (diff > 0) {
				addClass(this.el, "odometer-animating-up");
			} else {
				addClass(this.el, "odometer-animating-down");
			}
			this.stopWatchingMutations();
			this.animate(newValue);
			this.startWatchingMutations();
			setTimeout(function() {
				_this.el.offsetHeight;
				return addClass(_this.el, "odometer-animating");
			}, 0);
			return (this.value = newValue);
		};

		Odometer.prototype.renderDigit = function() {
			return createFromHTML(DIGIT_HTML);
		};

		Odometer.prototype.insertDigit = function(digit, before) {
			if (before != null) {
				return this.inside.insertBefore(digit, before);
			} else if (!this.inside.children.length) {
				return this.inside.appendChild(digit);
			} else {
				return this.inside.insertBefore(digit, this.inside.children[0]);
			}
		};

		Odometer.prototype.addSpacer = function(chr, before, extraClasses) {
			var spacer;
			spacer = createFromHTML(FORMAT_MARK_HTML);
			spacer.innerHTML = chr;
			if (extraClasses) {
				addClass(spacer, extraClasses);
			}
			return this.insertDigit(spacer, before);
		};

		Odometer.prototype.addDigit = function(value, repeating) {
			var chr, digit, resetted, _ref;
			if (repeating == null) {
				repeating = true;
			}
			if (value === "-") {
				return this.addSpacer(value, null, "odometer-negation-mark");
			}
			if (value === ".") {
				return this.addSpacer(
					(_ref = this.format.radix) != null ? _ref : ".",
					null,
					"odometer-radix-mark"
				);
			}
			if (repeating) {
				resetted = false;
				while (true) {
					if (!this.format.repeating.length) {
						if (resetted) {
							throw new Error("Bad odometer format without digits");
						}
						this.resetFormat();
						resetted = true;
					}
					chr = this.format.repeating[this.format.repeating.length - 1];
					this.format.repeating = this.format.repeating.substring(
						0,
						this.format.repeating.length - 1
					);
					if (chr === "d") {
						break;
					}
					this.addSpacer(chr);
				}
			}
			digit = this.renderDigit();
			digit.querySelector(".odometer-value").innerHTML = value;
			this.digits.push(digit);
			return this.insertDigit(digit);
		};

		Odometer.prototype.animate = function(newValue) {
			if (!TRANSITION_SUPPORT || this.options.animation === "count") {
				return this.animateCount(newValue);
			} else {
				return this.animateSlide(newValue);
			}
		};

		Odometer.prototype.animateCount = function(newValue) {
			var cur,
				diff,
				last,
				start,
				tick,
				_this = this;
			if (!(diff = +newValue - this.value)) {
				return;
			}
			start = last = now();
			cur = this.value;
			return (tick = function() {
				var delta, dist, fraction;
				if (now() - start > _this.options.duration) {
					_this.value = newValue;
					_this.render();
					trigger(_this.el, "odometerdone");
					return;
				}
				delta = now() - last;
				if (delta > COUNT_MS_PER_FRAME) {
					last = now();
					fraction = delta / _this.options.duration;
					dist = diff * fraction;
					cur += dist;
					_this.render(Math.round(cur));
				}
				if (requestAnimationFrame != null) {
					return requestAnimationFrame(tick);
				} else {
					return setTimeout(tick, COUNT_MS_PER_FRAME);
				}
			})();
		};

		Odometer.prototype.getDigitCount = function() {
			var i, max, value, values, _i, _len;
			values = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
			for (i = _i = 0, _len = values.length; _i < _len; i = ++_i) {
				value = values[i];
				values[i] = Math.abs(value);
			}
			max = Math.max.apply(Math, values);
			return Math.ceil(Math.log(max + 1) / Math.log(10));
		};

		Odometer.prototype.getFractionalDigitCount = function() {
			var i, parser, parts, value, values, _i, _len;
			values = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
			parser = /^\-?\d*\.(\d*?)0*$/;
			for (i = _i = 0, _len = values.length; _i < _len; i = ++_i) {
				value = values[i];
				values[i] = value.toString();
				parts = parser.exec(values[i]);
				if (parts == null) {
					values[i] = 0;
				} else {
					values[i] = parts[1].length;
				}
			}
			return Math.max.apply(Math, values);
		};

		Odometer.prototype.resetDigits = function() {
			this.digits = [];
			this.ribbons = [];
			this.inside.innerHTML = "";
			return this.resetFormat();
		};

		Odometer.prototype.animateSlide = function(newValue) {
			var boosted,
				cur,
				diff,
				digitCount,
				digits,
				dist,
				end,
				fractionalCount,
				frame,
				frames,
				i,
				incr,
				j,
				mark,
				numEl,
				oldValue,
				start,
				_base,
				_i,
				_j,
				_k,
				_l,
				_len,
				_len1,
				_len2,
				_m,
				_ref,
				_results;
			oldValue = this.value;
			fractionalCount = this.getFractionalDigitCount(oldValue, newValue);
			if (fractionalCount) {
				newValue = newValue * Math.pow(10, fractionalCount);
				oldValue = oldValue * Math.pow(10, fractionalCount);
			}
			if (!(diff = newValue - oldValue)) {
				return;
			}
			this.bindTransitionEnd();
			digitCount = this.getDigitCount(oldValue, newValue);
			digits = [];
			boosted = 0;
			for (
				i = _i = 0;
				0 <= digitCount ? _i < digitCount : _i > digitCount;
				i = 0 <= digitCount ? ++_i : --_i
			) {
				start = truncate(oldValue / Math.pow(10, digitCount - i - 1));
				end = truncate(newValue / Math.pow(10, digitCount - i - 1));
				dist = end - start;
				if (Math.abs(dist) > this.MAX_VALUES) {
					frames = [];
					incr =
						dist / (this.MAX_VALUES + this.MAX_VALUES * boosted * DIGIT_SPEEDBOOST);
					cur = start;
					while ((dist > 0 && cur < end) || (dist < 0 && cur > end)) {
						frames.push(Math.round(cur));
						cur += incr;
					}
					if (frames[frames.length - 1] !== end) {
						frames.push(end);
					}
					boosted++;
				} else {
					frames = function() {
						_results = [];
						for (
							var _j = start;
							start <= end ? _j <= end : _j >= end;
							start <= end ? _j++ : _j--
						) {
							_results.push(_j);
						}
						return _results;
					}.apply(this);
				}
				for (i = _k = 0, _len = frames.length; _k < _len; i = ++_k) {
					frame = frames[i];
					frames[i] = Math.abs(frame % 10);
				}
				digits.push(frames);
			}
			this.resetDigits();
			_ref = digits.reverse();
			for (i = _l = 0, _len1 = _ref.length; _l < _len1; i = ++_l) {
				frames = _ref[i];
				if (!this.digits[i]) {
					this.addDigit(" ", i >= fractionalCount);
				}
				if ((_base = this.ribbons)[i] == null) {
					_base[i] = this.digits[i].querySelector(".odometer-ribbon-inner");
				}
				this.ribbons[i].innerHTML = "";
				if (diff < 0) {
					frames = frames.reverse();
				}
				for (j = _m = 0, _len2 = frames.length; _m < _len2; j = ++_m) {
					frame = frames[j];
					numEl = document.createElement("div");
					numEl.className = "odometer-value";
					numEl.innerHTML = frame;
					this.ribbons[i].appendChild(numEl);
					if (j === frames.length - 1) {
						addClass(numEl, "odometer-last-value");
					}
					if (j === 0) {
						addClass(numEl, "odometer-first-value");
					}
				}
			}
			if (start < 0) {
				this.addDigit("-");
			}
			mark = this.inside.querySelector(".odometer-radix-mark");
			if (mark != null) {
				mark.parent.removeChild(mark);
			}
			if (fractionalCount) {
				return this.addSpacer(
					this.format.radix,
					this.digits[fractionalCount - 1],
					"odometer-radix-mark"
				);
			}
		};

		return Odometer;
	})();

	Odometer.options = (_ref = window.odometerOptions) != null ? _ref : {};

	setTimeout(function() {
		var k, v, _base, _ref1, _results;
		if (window.odometerOptions) {
			_ref1 = window.odometerOptions;
			_results = [];
			for (k in _ref1) {
				v = _ref1[k];
				_results.push(
					(_base = Odometer.options)[k] != null
						? (_base = Odometer.options)[k]
						: (_base[k] = v)
				);
			}
			return _results;
		}
	}, 0);

	Odometer.init = function() {
		var el, elements, _i, _len, _ref1, _results;
		if (document.querySelectorAll == null) {
			return;
		}
		elements = document.querySelectorAll(
			Odometer.options.selector || ".odometer"
		);
		_results = [];
		for (_i = 0, _len = elements.length; _i < _len; _i++) {
			el = elements[_i];
			_results.push(
				(el.odometer = new Odometer({
					el: el,
					value: (_ref1 = el.innerText) != null ? _ref1 : el.textContent
				}))
			);
		}
		return _results;
	};

	if (
		((_ref1 = document.documentElement) != null ? _ref1.doScroll : void 0) !=
			null &&
		document.createEventObject != null
	) {
		_old = document.onreadystatechange;
		document.onreadystatechange = function() {
			if (document.readyState === "complete" && Odometer.options.auto !== false) {
				Odometer.init();
			}
			return _old != null ? _old.apply(this, arguments) : void 0;
		};
	} else {
		document.addEventListener(
			"DOMContentLoaded",
			function() {
				if (Odometer.options.auto !== false) {
					return Odometer.init();
				}
			},
			false
		);
	}

	if (typeof define === "function" && define.amd) {
		define([], function() {
			return Odometer;
		});
	} else if (typeof exports !== "undefined" && exports !== null) {
		module.exports = Odometer;
	} else {
		window.Odometer = Odometer;
	}
}.call(this));

</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 9/15/2021 at 1:24 AM, gimee1 said:

Hello, the "Show all features" button doesn't seem to expand the selection.  Can you please share the code that would fix this?

 

Can you share link to page where you added the code?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
20 hours ago, gimee1 said:

Thank you. It is www.whatgodintended.org/bundle.

Can you check site url? When I click, it doesn't exist

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...