Jump to content

Code/plugin for checkbox chart pricing table?

Recommended Posts

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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 9 months later...
On 7/27/2021 at 4:39 AM, tuanphan said:

Add a Code Block > Paste this code

@tuanphan This is excellent! Thank you for sharing! Any chance you know how to augment the code so the buttons for each plan link to different products/plans when the monthly/yearly toggle is flipped? i.e. when Monthly is toggled, the button goes to /product-1-monthly and when Yearly is toggled, the button goes to /product-1-yearly

Link to comment
  • 2 weeks later...
On 7/15/2022 at 10:35 AM, bullydefender said:

@tuanphan This is excellent! Thank you for sharing! Any chance you know how to augment the code so the buttons for each plan link to different products/plans when the monthly/yearly toggle is flipped? i.e. when Monthly is toggled, the button goes to /product-1-monthly and when Yearly is toggled, the button goes to /product-1-yearly

Solved this. If any one has same problem, just comment below

18 hours ago, Lalat said:

Sorry link is this https://www.lifeevo.eu/en/programs Thank you 

 

 

Can you describe the desired layout? I see 3 tables now.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 7/28/2022 at 9:44 PM, Lalat said:

Hi thanks for your response  @tuanphan   i want to look like the screenshot when clicked button monthly billing current 3 tables will show and clicked yearly billing show different 3 tables like the checkbox functionality 

Thank you

AC2727A9-BC3D-4083-93F8-F2F129A8AD4D.png

If you use code I posted above, will easier to achieve.

With your markdown, you can add 3 more Markdown Blocks for Yearly.

Next add 2 buttons above Markdown with name: Monthly, Yearly

Then we will check & give the code to achieve your request.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 8/1/2022 at 5:17 PM, Lalat said:

Hi @tuanphan  i have added them please see it now thank you

I still see 3 markdowns only.

If your site is live & you can't add it, you can duplicate page & add there. I think we can also check from there

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
14 hours ago, Lalat said:

First, add # in 2 buttons url.

Next, try Add a Code Block under last 3 Markdown Blocks.

Paste this code

<script>
  // monthly
$("div#block-yui_3_17_2_1_1659598446675_16536 a").click(function(){
  $("div#page-section-62ea589af5d7363474f691dd>.row:nth-child(2)").toggleClass('montly');
});
  // yearly
  $("div#block-yui_3_17_2_1_1659598446675_18470 a").click(function(){
  $('[data-section-id="62eb7da007dec228df318aee"]').toggleClass('yearly');
     $("div#page-section-62ea589af5d7363474f691dd>.row:nth-child(2)").toggleClass('montly');
});
</script>
<style>
  /* initial: hide yearly */
  [data-section-id="62eb7da007dec228df318aee"] {
    display: none;
}
  /* show yearly */
  .yearly {
  	display: block !important;
  }
  /* hide montly */
  .montly {
  display: none;
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.