Code/plugin for checkbox chart pricing table?

Hi! Has anyone come across any code/plugin to create a checkbox pricing table like this?

Through search I've found a handful of great list-like column tables, but none with checkboxes so far, so thought I'd double check!

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

Then share link here, we can convert it into Squarespace

eg.

• https://codepen.io/blackellis/pen/QWjmEbz
• https://codepen.io/search/pens?q=toggle+pricing

3 hours ago, tuanphan said:

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

Then share link here, we can convert it into Squarespace

eg.

• https://codepen.io/blackellis/pen/QWjmEbz
• https://codepen.io/search/pens?q=toggle+pricing

Oh wow, thanks so much! Looking forward to digging through these.

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

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

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>