<div class="col-md-12">
	<section class="widget">
		<div class="body no-margin">
			<div class="row">
				<div class="col-sm-6 col-print-6">
					<img src="../arms/img/313_logo.png" alt="Logo" class="invoice-logo"/>
				</div>
				<div class="col-sm-6 col-print-6">
					<div style="margin-top: 60px;">
						<div class="invoice-number text-align-right">
							#4346345 - 2024/05/07
						</div>
						<div class="invoice-number-info text-align-right">
							Some Invoice number description or whatever
						</div>
					</div>
				</div>
			</div>
			<hr>
			<div class="row">
				<section class="pricing-section bg-7">
					<div class="pricing pricing--norbu">
						<div class="pricing__item">
							<h3 class="pricing__title">Beginner Savers</h3>
							<p class="pricing__sentence">For people who are starting out in the water saving business</p>
							<div class="pricing__price"><span class="pricing__currency">$</span>19<span class="pricing__period">/ month</span></div>
							<ul class="pricing__feature-list">
								<li class="pricing__feature">Free water saving e-book</li>
								<li class="pricing__feature">Free access to forums</li>
								<li class="pricing__feature">Beginners tips</li>
							</ul>
							<button class="pricing__action">Choose plan</button>
						</div>
						<div class="pricing__item pricing__item--featured">
							<h3 class="pricing__title">Advanced Savers</h3>
							<p class="pricing__sentence">For experienced water savers who'd like to push their limits</p>
							<div class="pricing__price"><span class="pricing__currency">$</span>29<span class="pricing__period">/ month</span></div>
							<ul class="pricing__feature-list">
								<li class="pricing__feature">Free water saving e-book</li>
								<li class="pricing__feature">Free access to forums</li>
								<li class="pricing__feature">Advanced saving tips</li>
							</ul>
							<button class="pricing__action">Choose plan</button>
						</div>
						<div class="pricing__item">
							<h3 class="pricing__title">Pro Savers</h3>
							<p class="pricing__sentence">For all the professionals who'd like to educate others, too</p>
							<div class="pricing__price"><span class="pricing__currency">$</span>79<span class="pricing__period">/ month</span></div>
							<ul class="pricing__feature-list">
								<li class="pricing__feature">Access to all books</li>
								<li class="pricing__feature">Unlimited board topics</li>
								<li class="pricing__feature">Beginners tips</li>
							</ul>
							<button class="pricing__action">Choose plan</button>
						</div>
					</div>
				</section>
			</div>
			<hr>
			<section class="invoice-info well">
				<div class="row">
					<div class="col-sm-6 col-print-6">
						<h4 class="details-title">Company Information</h4>
						<h3 class="company-name font14" style="font-weight: bold">
							(二�) 313DEVGRP
						</h3>
						<address>
							<strong>Dongmin.Lee</strong><br>
							313 B/D Dosan-daero, Gangnam-gu, Seoul, Republic of Korea<br>
							06021<br>
							<abbr title="Work email">e-mail:</abbr> <a href="mailto:#">313cokr@gmail.com</a><br>
							<abbr title="Work Phone">phone:</abbr> (010) 5093-7313<br>
							<abbr title="Work Web">website:</abbr> https://www.313.co.kr<br>
						</address>
					</div>
					<div class="col-sm-6 col-print-6 client-details">
						<h4 class="details-title">Client Information</h4>
						<h3 class="client-name font14" style="font-weight: bold">
							(二�) KaKao Entertainment
						</h3>
						<address>
							<strong>Gisu.Gwon</strong><br>
							231, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Republic of Korea<br>
							13494<br>
							<abbr title="Work email">e-mail:</abbr> <a href="mailto:#">finance@kakao.com</a><br>
							<abbr title="Work Phone">phone:</abbr> (010) 1234-5678<br>
							<abbr title="Work Web">website:</abbr> https://kakaoent.com
						</address>
					</div>
				</div>
			</section>
			<table class="table table-bordered table-striped">
				<thead>
				<tr>
					<th>#</th>
					<th>Item</th>
					<th class="hidden-xs">Description</th>
					<th>Quantity</th>
					<th class="hidden-xs">Price per Unit</th>
					<th>Total</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>1</td>
					<td>ARMS</td>
					<td class="hidden-xs">Docker Swarm Cluster ( Standalone ) - RMS Solution</td>
					<td>1</td>
					<td class="hidden-xs">20,000,000 �� (KRW)</td>
					<td>20,000,000.00 �� (KRW)</td>
				</tr>
				<tr>
					<td>2</td>
					<td>BackOffice</td>
					<td class="hidden-xs">DevOps Platform Solution</td>
					<td>1</td>
					<td class="hidden-xs">0�� (KRW)</td>
					<td>0.00</td>
				</tr>
				<tr>
					<td>3</td>
					<td>JSTF</td>
					<td class="hidden-xs">Java Service Framework ( MEMDB, RDB, SearchEngine )</td>
					<td>1</td>
					<td class="hidden-xs">0�� (KRW)</td>
					<td>0.00</td>
				</tr>
				</tbody>
			</table>
			<div class="row"
					 style="margin-top: 20px;">
				<div class="col-sm-6 col-print-6">
				</div>
				<div class="col-sm-6 col-print-6">
					<div class="row text-align-right">
						<div class="col-xs-2"></div> <!-- instead of offset -->
						<div class="col-xs-5">
							<p>Subtotal</p>
							<p>Tax(10%)</p>
							<p class="no-margin"><strong>Total</strong></p>
						</div>
						<div class="col-xs-5">
							<p>20,000,000.00 �� (KRW)</p>
							<p>2,000,000.00 �� (KRW)</p>
							<p class="no-margin"><strong>22,000,000.00 �� (KRW)</strong></p>
						</div>
					</div>
				</div>
			</div>
			<div    class="invoice-actions text-align-right hidden-print"
							style="margin: 20px 0;">
				<button id="print" class="btn btn-inverse">
					<i class="fa fa-print"></i>
					&nbsp;&nbsp;
					Print
				</button>
				<button class="btn btn-danger">
					<i class="fa fa-arrow-right"></i>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					Proceed with Payment
				</button>
			</div>
			<!-- compare all plans  -->
			<div class="row">
				<div class="col-md-12">
					<section class="widget" style="background: rgba(51,51,51,0.3);">
						<div style="text-align: center; margin: 10px 0; font-size:18px">Compare all plans</div>
						<div class="billing-plan-div"
								 style="display: flex;justify-content: center;
                                    background: rgba(255,255,255,0.08);
                                    border: 1px solid rgba(255,255,255,0.3);
                                    border-radius: 10px">
							<table class="billing-header-table" style="width: 100%">
								<tbody>
								<tr>
									<th style="width: 28%; padding: 10px 25px">
										<div style="text-align:center">
											<div class="btn-group" data-toggle="buttons">
												<label class="btn"
															 style="background: none;
                                                                  border: 1px solid rgba(255,255,255,0.5);
                                                                  border-right:none;
                                                                  border-radius: 6px 0 0 6px;
                                                                  font-size: 13px;
                                                                  padding: 5px 8px;">
													<input type="radio" name="options" id="option1"> Monthly
												</label>
												<label class="btn active"
															 style="background: none;
                                                                  border: 1px solid rgba(255,255,255,0.5);
                                                                  border-radius: 0 6px 6px 0;
                                                                  font-size: 13px;
                                                                  padding: 5px 8px;">
													<input type="radio" name="options" id="option2"> Yearly
												</label>
											</div>
										</div>
									</th>
									<td style="width: 24%; padding: 10px 25px">
										<div style="text-align:center">
											<div style="display: flex; flex-direction: column">
												<div style="display: flex; flex-direction: column">
													<span class="font15">Beginner</span>
													<span style="margin: 5px 0">$19/month</span>
												</div>
												<div style="margin: 5px 0">
													<button class="btn" style="background: none;border: 1px solid rgba(255,255,255,0.5);border-radius: 6px; font-size: 12px;padding: 4px 6px;">Get Beginner</button>
												</div>
											</div>
										</div>
									</td>
									<td style="width: 24%; padding: 10px 25px">
										<div style="text-align:center">
											<div style="display: flex; flex-direction: column">
												<div style="display: flex; flex-direction: column">
													<span class="font15">Advanced</span>
													<span style="margin: 5px 0">$29/month</span>
												</div>
												<div style="margin: 5px 0">
													<button class="btn" style="background: none;border: 1px solid rgba(255,255,255,0.5);border-radius: 6px; font-size: 12px;padding: 4px 6px;">Get Advanced</button>
												</div>
											</div>
										</div>
									</td>
									<td style="width: 24%; padding: 10px 25px">
										<div style="text-align:center">
											<div style="display: flex; flex-direction: column">
												<div style="display: flex; flex-direction: column">
													<span class="font15">Pro</span>
													<span style="margin: 5px 0">$79/month</span>
												</div>
												<div style="margin: 5px 0">
													<button class="btn" style="background: none;border: 1px solid rgba(255,255,255,0.5);border-radius: 6px; font-size: 12px;padding: 4px 6px;">Get Pro</button>
												</div>
											</div>
										</div>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</section>
				</div>
			</div>
			<!-- Usage limits -->
			<div class="row">
				<div class="col-md-12">
					<section class="widget" style="background: rgba(51,51,51,0.3);">
						<div style="padding: 25px;
                                    display: flex;justify-content: center;
                                    background: rgba(255,255,255,0.08);
                                    border: 1px solid rgba(255,255,255,0.4);
                                    border-bottom: none;
                                    border-radius: 10px 10px 0 0">
							<div style="width: 100%; font-size:15px; font-weight: bold;">
								Usage Limits
							</div>
						</div>
						<div style="display: flex;justify-content: center;
                                    background: rgba(255,255,255,0.08);
                                    border: 1px solid rgba(255,255,255,0.3);
                                    border-radius: 0 0 10px 10px">
							<table class="billing-plan-table" style="width: 100%;">
								<thead>
								<tr style="height: 2px; font-size: 0px;"><th></th><th>Beginner</th><th>Advanced</th><th>Pro</th></tr>
								</thead>
								<tbody>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Number of forms</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Unlimited
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Unlimited
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Unlimited
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Questions per form</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Unlimited
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Unlimited
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Unlimited
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Seats</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												1
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												3
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												5
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Monthly response base</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												100
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												1,000
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												10,000
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Maximum monthly response limit</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												750
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												2,500
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												50,000
											</div>
										</div>
									</td>
								</tr>

								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div style="display: flex; flex-direction: column">
													<span class="badge badge-success" style="width:160px; margin: 1px; border-radius: 10px; font-weight: normal;"><i class="fa fa-trophy"></i> Exclusive to growth plans</span>
													<span style="line-height: 24px">Monthly enrichment base</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Not Available
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Not Available
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Not Available
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div style="display: flex; flex-direction: column">
													<span class="badge badge-success" style="width:160px; margin: 1px; border-radius: 10px; font-weight: normal;"><i class="fa fa-trophy"></i> Exclusive to growth plans</span>
													<span style="line-height: 24px">Maximum monthly enrichment limit</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Not Available
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Not Available
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Not Available
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div style="display: flex; flex-direction: column">
													<span class="badge badge-success" style="width:160px; margin: 1px; border-radius: 10px; font-weight: normal;"><i class="fa fa-trophy"></i> Exclusive to growth plans</span>
													<span style="line-height: 24px">*Monthly video minute limits</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Not Available
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Not Available
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Not Available
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div style="display: flex; flex-direction: column">
													<span class="badge badge-success" style="width:160px; margin: 1px; border-radius: 10px; font-weight: normal;"><i class="fa fa-trophy"></i> Exclusive to growth plans</span>
													<span style="line-height: 24px">*Monthly video view limits</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Not Available
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Not Available
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												Not Available
											</div>
										</div>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</section>
				</div>
			</div>
			<!-- Be on-brand -->
			<div class="row">
				<div class="col-md-12">
					<section class="widget" style="background: rgba(51,51,51,0.3);">
						<div style="padding: 25px;
                                    display: flex;justify-content: center;
                                    background: rgba(255,255,255,0.08);
                                    border: 1px solid rgba(255,255,255,0.4);
                                    border-bottom: none;
                                    border-radius: 10px 10px 0 0">
							<div style="width: 100%; font-size:18px; font-weight: bold;">
								Be on-brand
							</div>
						</div>
						<div style="display: flex;justify-content: center;
                                    background: rgba(255,255,255,0.08);
                                    border: 1px solid rgba(255,255,255,0.3);
                                    border-radius: 0 0 10px 10px">
							<table class="billing-plan-table" style="width: 100%;">
								<thead>
								<tr style="height: 2px; font-size: 0px;"><th></th><th>Beginner</th><th>Advanced</th><th>Pro</th></tr>
								</thead>
								<tbody>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Start with a template</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Add your brand logo</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Customize your form�셲 metadata</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Apply premium themes</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<!--                                                <i class="fa fa-check"></i>-->
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Remove Typeform branding from your forms</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<!--                                                <i class="fa fa-check"></i>-->
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
								</tr>

								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Create a brand kit</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<!--                                                <i class="fa fa-check"></i>-->
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Create custom links for different forms</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<!--                                                <i class="fa fa-check"></i>-->
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Create a custom subdomain for your account</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<!--                                                <i class="fa fa-check"></i>-->
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Add custom fonts (Coming soon!)</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<!--                                                <i class="fa fa-check"></i>-->
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<!--                                                <i class="fa fa-check"></i>-->
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th style="width: 28%;">
										<div style="text-align:center">
											<div style="display: flex; justify-content: space-between;">
												<div>
													<span>Connect a custom domain to your account</span>
												</div>
												<div>
													<i class="fa fa-info-circle"></i>
												</div>
											</div>
										</div>
									</th>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<!--                                                <i class="fa fa-check"></i>-->
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<!--                                                <i class="fa fa-check"></i>-->
											</div>
										</div>
									</td>
									<td style="width: 24%;">
										<div style="text-align:center">
											<div>
												<i class="fa fa-check"></i>
											</div>
										</div>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</section>
				</div>
			</div>
		</div>
	</section>
</div>

<div
	id="stickyBilling"
	class="modal fade"
	tabindex="-1"
	role="dialog"
	aria-labelledby="myModalLabel"
	style="display: none; height: 20%; margin:0 3px 0 180px">
	<div
		class="modal-dialog"
		style="width: 100%; padding:0; margin:0;">
		<div
			class="modal-content"
			style="height: 100%; background-color: rgba(51, 51, 51, 0.8);
						 padding:0;
						 margin:0;">
			<div
				class="modal-body"
				style="padding:0; margin:0;">
				<div class="row">
					<div class="col-md-12">
						<section class="widget" style="padding:0; margin:0; background: rgba(255,255,255,0.08);">
							<div style="display: flex;justify-content: center; padding: 0 33.5px">
								<table class="billing-header-table" style="width: 100%">
									<tbody>
									<tr>
										<th style="width: 28%; padding: 10px 25px">
											<div style="text-align:center">
												<div class="btn-group" data-toggle="buttons">
													<label class="btn"
																 style="background: none;
                                        border: 1px solid rgba(255,255,255,0.5);
                                        border-right:none;
                                        border-radius: 6px 0 0 6px;
                                        font-size: 13px;
                                        padding: 5px 8px;">
														<input type="radio" name="options" id="option1"> Monthly
													</label>
													<label class="btn active"
																 style="background: none;
                                 border: 1px solid rgba(255,255,255,0.5);
                                 border-radius: 0 6px 6px 0;
                                 font-size: 13px;
                                 padding: 5px 8px;">
														<input type="radio" name="options" id="option2"> Yearly
													</label>
												</div>
											</div>
										</th>
										<td style="width: 24%; padding: 10px 25px">
											<div style="text-align:center">
												<div style="display: flex; flex-direction: column">
													<div style="display: flex; flex-direction: column">
														<span class="font15">Beginner</span>
														<span style="margin: 5px 0">$19/month</span>
													</div>
													<div style="margin: 5px 0">
														<button class="btn" style="background: none;border: 1px solid rgba(255,255,255,0.5);border-radius: 6px; font-size: 12px;padding: 4px 6px;">Get Beginner</button>
													</div>
												</div>
											</div>
										</td>
										<td style="width: 24%; padding: 10px 25px">
											<div style="text-align:center">
												<div style="display: flex; flex-direction: column">
													<div style="display: flex; flex-direction: column">
														<span class="font15">Advanced</span>
														<span style="margin: 5px 0">$29/month</span>
													</div>
													<div style="margin: 5px 0">
														<button class="btn" style="background: none;border: 1px solid rgba(255,255,255,0.5);border-radius: 6px; font-size: 12px;padding: 4px 6px;">Get Advanced</button>
													</div>
												</div>
											</div>
										</td>
										<td style="width: 24%; padding: 10px 25px">
											<div style="text-align:center">
												<div style="display: flex; flex-direction: column">
													<div style="display: flex; flex-direction: column">
														<span class="font15">Pro</span>
														<span style="margin: 5px 0">$79/month</span>
													</div>
													<div style="margin: 5px 0">
														<button class="btn" style="background: none;border: 1px solid rgba(255,255,255,0.5);border-radius: 6px; font-size: 12px;padding: 4px 6px;">Get Pro</button>
													</div>
												</div>
											</div>
										</td>
									</tr>
									</tbody>
								</table>
							</div>
						</section>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<style>
    /* Common styles */

    .pricing {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: center;
        justify-content: center;
        width: 100%;
    }

    .pricing__item {
        position: relative;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: stretch;
        align-items: stretch;
        text-align: center;
        -webkit-flex: 0 1 330px;
        flex: 0 1 330px;
        /*border:1px solid rgba(255,204,0,0.3);*/
    }

    .pricing__feature-list {
        text-align: left;
    }

    .pricing__action {
        color: inherit;
        border: none;
        background: none;
    }

    .pricing__action:focus {
        outline: none;
    }

    /* Individual styles */

    /* Sonam */
    .pricing--sonam .pricing__item {
        margin: 1em;
        padding: 2em;
        cursor: default;
        border-radius: 10px;
        background: #1F1F1F;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05), 0 15px 30px -10px rgba(0,0,0,0.3);
        -webkit-transition: background 0.3s;
        transition: background 0.3s;
    }

    .pricing--sonam .pricing__item:hover {
        background: #141315;
    }

    .pricing--sonam .pricing__title {
        font-size: 2em;
        width: 100%;
        margin: 0 0 0.25em;
        padding: 0 0 0.5em;
        border-bottom: 3px solid rgb(27, 26, 28);
    }

    .pricing--sonam .pricing__price {
        color: #fc0;
        font-size: 1.75em;
        padding: 1em 0 0.75em;
    }

    .pricing--sonam .pricing__sentence {
        font-weight: bold;
    }

    .pricing--sonam .pricing__feature-list {
        margin: 0;
        padding: 1em 1.25em 2em;
    }

    .pricing--sonam .pricing__action {
        font-weight: bold;
        margin-top: auto;
        padding: 0.75em 2em;
        border-radius: 5px;
        background: #E06060;
        -webkit-transition: background 0.3s;
        transition: background 0.3s;
    }

    .pricing--sonam .pricing__action:hover,
    .pricing--sonam .pricing__action:focus {
        background: #BD3C3C;
    }

    /* Jinpa */
    .pricing--jinpa .pricing__item {
        font-family: 'Sahitya', serif;
        margin: 1.5em 0;
        padding: 2em;
        cursor: default;
        color: #fff;
        border: 1px solid #CBFFC8;
        -webkit-transition: background-color 0.6s, color 0.3s;
        transition: background-color 0.6s, color 0.3s;
    }

    .pricing--jinpa .pricing__item:nth-child(2) {
        border-right: none;
        border-left: none;
    }

    .pricing--jinpa .pricing__item:hover {
        color: #444;
        background: #CBFFC8;
    }

    .pricing--jinpa .pricing__title {
        font-size: 2em;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .pricing--jinpa .pricing__price {
        font-size: 1.45em;
        font-weight: bold;
        line-height: 95px;
        width: 100px;
        height: 100px;
        margin: 1.15em auto 1em;
        border-radius: 50%;
        background: #ea716e;
        -webkit-transition: color 0.3s, background 0.3s;
        transition: color 0.3s, background 0.3s;
    }

    .pricing--jinpa .pricing__item:first-child .pricing__price {
        background: #eac36e;
    }

    .pricing--jinpa .pricing__item:nth-child(2) .pricing__price {
        background: #eaa36e;
    }

    .pricing--jinpa .pricing__item:hover .pricing__price {
        color: #fff;
        background: #82C57E;
    }

    .pricing--jinpa .pricing__sentence {
        font-weight: bold;
    }

    .pricing--jinpa .pricing__feature-list {
        margin: 0;
        padding: 1em 1em 2em 1em;
        list-style: none;
        text-align: center;
    }

    .pricing--jinpa .pricing__action {
        font-weight: bold;
        margin-top: auto;
        padding: 0.75em 2em;
        opacity: 0;
        color: #fff;
        background: #82C57E;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    .pricing--jinpa .pricing__item:hover .pricing__action {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .pricing--jinpa .pricing__action:hover,
    .pricing--jinpa .pricing__action:focus {
        background: #6EA76B;
    }

    @media screen and (max-width: 60em) {
        .pricing--jinpa .pricing__item {
            max-width: none;
            width: 90%;
            flex: none;
        }
        .pricing--jinpa .pricing__item:nth-child(2) {
            border: 1px solid #fff;
        }
    }

    /* Tenzin */
    .pricing--tenzin .pricing__item {
        margin: 1em;
        padding: 2em 2.5em;
        text-align: left;
        color: #262b38;
        background: #EEF0F3;
        border-top: 3px solid #EEF0F3;
        -webkit-transition: border-color 0.3s;
        transition: border-color 0.3s;
    }

    .pricing--tenzin .pricing__item:hover {
        border-color: #3e62e0;
    }

    .pricing--tenzin .pricing__title {
        font-size: 1em;
        margin: 0 0 1em;
    }

    .pricing--tenzin .pricing__price {
        font-size: 2em;
        font-weight: bold;
        padding: 0.5em 0 0.75em;
        border-top: 3px solid rgba(139, 144, 157, 0.18);
    }

    .pricing--tenzin .pricing__currency {
        font-size: 0.5em;
        vertical-align: super;
    }

    .pricing--tenzin .pricing__sentence {
        font-weight: bold;
        padding: 0 0 0.5em;
        color: #9CA0A9;
        border-bottom: 3px solid rgba(139, 144, 157, 0.18);
    }

    .pricing--tenzin .pricing__feature-list {
        font-size: 0.85em;
        font-style: italic;
        margin: 0;
        padding: 0.25em 0 2.5em;
        list-style: none;
        text-align: right;
        color: #8b909d;
    }

    .pricing--tenzin .pricing__action {
        font-weight: bold;
        margin-top: auto;
        padding: 1em 2em;
        color: #fff;
        border-radius: 30px;
        background: #3e62e0;
        -webkit-transition: background-color 0.3s;
        transition: background-color 0.3s;
    }

    .pricing--tenzin .pricing__action:hover,
    .pricing--tenzin .pricing__action:focus {
        background-color: #3b5ac5;
    }

    /* Yama */
    .pricing--yama .pricing__item {
        margin: 1em;
        padding: 0 0 2em;
        color: #fff;
        background: #1e1c20;
    }

    .pricing--yama .pricing__title {
        font-family: 'Playfair Display', serif;
        font-size: 2.35em;
        font-weight: 900;
        line-height: 1;
        width: 290px;
        margin: 0 auto;
        padding: 1em 1em 0em;
    }

    .pricing__amp {
        padding: 0.15em 0 0.1em;
        color: #0f0e0f;
    }

    .pricing--yama .pricing__sentence {
        margin-bottom: 2em;
        color: #555357;
    }

    .pricing--yama .pricing__price {
        font-size: 2em;
        font-weight: bold;
        position: relative;
        z-index: 10;
        overflow: hidden;
        padding: 0.75em;
        cursor: default;
        color: #ef7d46;
        background: #1a181b;
        -webkit-transition: color 0.3s;
        transition: color 0.3s;
    }

    .pricing--yama .pricing__item:hover .pricing__price {
        color: #fff;
    }

    .pricing--yama .pricing__price::before {
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background: #141315;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transform: translate3d(-150%,0,0) skewX(40deg);
        transform: translate3d(-150%,0,0) skewX(40deg);
    }

    .pricing--yama .pricing__item:hover .pricing__price::before {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0) skewX(0deg);
        transform: translate3d(0,0,0) skewX(0deg);
    }

    .pricing--yama .pricing__period {
        font-size: 0.5em;
        font-weight: normal;
        display: block;
        color: #2a272c;
    }

    .pricing--yama .pricing__feature-list {
        margin: 0;
        padding: 2em 1em;
        list-style: none;
        text-align: center;
        color: #6a6563;
    }

    .pricing--yama .pricing__action {
        font-weight: bold;
        margin: 0 2em;
        padding: 1em 2em;
        border-radius: 4px;
        background: #ef7d46;
        -webkit-transition: background-color 0.3s, color 0.3s;
        transition: background-color 0.3s, color 0.3s;
    }

    .pricing--yama .pricing__action:hover,
    .pricing--yama .pricing__action:focus {
        color: #ef7d46;
        background: #fff;
    }

    /* Rabten */
    .pricing--rabten .pricing__item {
        font-family: 'Roboto', sans-serif;
        padding: 2em 4em;
        cursor: default;
        color: #262b38;
        max-width: 320px;
    }

    .pricing--rabten .pricing__item:nth-child(2) {
        border-right: 1px solid rgba(139, 144, 157, 0.18);
        border-left: 1px solid rgba(139, 144, 157, 0.18);
    }

    .pricing--rabten .pricing__title {
        font-size: 1em;
        margin: 1.5em 0 0;
    }

    .pricing--rabten .icon {
        font-size: 2.5em;
        color: #8b909d;
        -webkit-transition: color 0.3s;
        transition: color 0.3s;
    }

    .pricing--rabten .pricing__item:hover .icon {
        color: #E03E3E;
    }

    .pricing--rabten .pricing__price {
        font-size: 2em;
        font-weight: bold;
        margin: 0.5em 0 0.75em;
        overflow: hidden;
    }

    .pricing--rabten .pricing__currency {
        font-size: 0.5em;
        vertical-align: super;
    }

    .pricing--rabten .pricing__period {
        font-size: 0.35em;
        color: #8b909d;
    }

    .pricing--rabten .pricing__anim {
        display: inline-block;
        position: relative;
    }

    .pricing--rabten .pricing__item:hover .pricing__anim {
        -webkit-animation: moveUp 0.4s forwards;
        animation: moveUp 0.4s forwards;
        -webkit-animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
        animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    }

    .pricing--rabten .pricing__item:hover .pricing__anim--2 {
        -webkit-animation-delay: 0.05s;
        animation-delay: 0.05s;
    }

    @-webkit-keyframes moveUp {
        50% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
        51% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
        52% { opacity: 1; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); }
        100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
    }

    @keyframes moveUp {
        50% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
        51% { opacity: 0; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
        52% { opacity: 1; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); }
        100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
    }

    .pricing--rabten .pricing__sentence {
        font-weight: bold;
        margin: 0 0 1em 0;
        padding: 0 0 0.5em;
        color: #8b909d;
    }

    .pricing--rabten .pricing__feature-list {
        font-size: 0.85em;
        margin: 0;
        padding: 0.25em 0 2.5em;
        list-style: none;
        text-align: center;
        color: #8b909d;
    }

    .pricing--rabten .pricing__action {
        font-weight: bold;
        margin-top: auto;
        padding: 1em 2em;
        color: #fff;
        border-radius: 30px;
        background: #E03E3E;
        -webkit-transition: background-color 0.3s;
        transition: background-color 0.3s;
    }

    .pricing--rabten .pricing__action:hover,
    .pricing--rabten .pricing__action:focus {
        background-color: #C53737;
    }

    @media screen and (max-width: 60em) {
        .pricing--rabten .pricing__item {
            max-width: none;
            width: 90%;
            flex: none;
            border: none !important;
            opacity: 1 !important;
        }
    }

    /* Pema */
    .pricing--pema .pricing__item {
        font-family: 'Alegreya Sans', sans-serif;
        padding: 2em 3em;
        margin: 1em;
        color: #262b38;
        background: #fff;
        cursor: default;
        overflow: hidden;
        box-shadow: 0 0 15px rgba(0,0,0,0.05);
    }

    @media screen and (min-width: 66.250em) {
        .pricing--pema .pricing__item {
            margin: 1.5em 0;
        }
        .pricing--pema .pricing__item--featured {
            z-index: 10;
            margin: 0;
            font-size: 1.15em;
        }
    }

    .pricing--pema .pricing__title {
        font-size: 2em;
        margin: 0.5em 0 0;
        color: #1d211f;
    }

    .pricing--pema .icon {
        display: inline-block;
        min-width: 2em;
        color: #8A9790;
        vertical-align: middle;
    }

    .pricing--pema .pricing__price {
        font-size: 5em;
        font-weight: 800;
        color: #6ed19c;
        position: relative;
        z-index: 100;
    }

    .pricing--pema .pricing__currency {
        font-size: 0.5em;
        vertical-align: super;
    }

    .pricing--pema .pricing__period {
        font-size: 0.25em;
        display: inline-block;
        padding: 0 0 0 0.5em;
        color: #CEDED6;
    }

    .pricing--pema .pricing__sentence {
        font-weight: bold;
        margin: 0 0 1em 0;
        padding: 0 0 0.5em;
        color: #6ed19c;
    }

    .pricing--pema .pricing__feature-list {
        font-size: 0.95em;
        margin: 0;
        padding: 1.5em 0.5em 2.5em;
        list-style: none;
    }

    .pricing--pema .pricing__feature {
        padding: 0.15em 0;
    }

    .pricing--pema .pricing__action {
        font-weight: bold;
        margin-top: auto;
        padding: 1em 2em;
        color: #fff;
        border-radius: 5px;
        background: #6ed19c;
        -webkit-transition: background-color 0.3s;
        transition: background-color 0.3s;
    }

    .pricing--pema .pricing__action:hover,
    .pricing--pema .pricing__action:focus {
        background-color: #4F5F56;
    }

    /* karma */
    .pricing--karma .pricing__item {
        margin: 1em;
        color: #382628;
        background: #fff;
        cursor: default;
        text-transform: uppercase;
        letter-spacing: 4px;
        border: 2px solid #382628;
        border-radius: 5px;
    }

    .pricing--karma .pricing__title {
        font-size: 1em;
        font-weight: 700;
        margin: 0.5em 0 0;
        padding: 1em;
        border-bottom: 2px solid #382628;
    }

    .pricing--karma .icon {
        display: inline-block;
        min-width: 2em;
    }

    .pricing--karma .pricing__price {
        font-size: 3em;
        padding: 0.5em 0 0 0;
        margin: 1em;
        font-weight: bold;
        border: 2px solid #382628;
        position: relative;
        z-index: 100;
    }

    .pricing--karma .pricing__item--featured .pricing__price::after {
        background: url(../img/stamp.png);
        background-size: cover;
        content: '';
        position: absolute;
        top: -30px;
        right: -20px;
        width: 100px;
        height: 100px;
        pointer-events: none;
    }

    .pricing--karma .pricing__currency {
        font-size: 0.5em;
        vertical-align: super;
    }

    .pricing--karma .pricing__period {
        font-size: 0.25em;
        display: block;
        padding: 1em;
        margin-top: 1.25em;
        border-top: 2px solid #382628;
    }

    .pricing--karma .pricing__sentence {
        margin: 0 0 1em 0;
        padding: 1em;
        font-size: 0.85em;
        border-bottom: 2px solid #382628;
    }

    .pricing--karma .pricing__feature-list {
        font-size: 0.85em;
        margin: 0;
        letter-spacing: 0;
        padding: 0 1em 2.5em 4em;
        list-style-type: square;
    }

    .pricing--karma .pricing__action {
        font-weight: bold;
        flex: none;
        margin: auto 1em 1em;
        padding: 1.25em 2em;
        color: #fff;
        background: #382628;
        letter-spacing: 2px;
        border-radius: 5px;
        border: 2px solid #382628;
        font-size: 0.95em;
        text-transform: uppercase;
        -webkit-transition: background-color 0.3s, color 0.3s;
        transition: background-color 0.3s, color 0.3s;
    }

    .pricing--karma .pricing__action:hover,
    .pricing--karma .pricing__action:focus {
        background-color: #ffdbd5;
        color: #382628;
    }

    /* norbu */
    .pricing--norbu .pricing__item {
        margin: 1em;
        color: #fff;
        cursor: default;
        font-family: 'Myriad Pro', Arial, sans-serif;
        border: 1px solid rgba(255,255,255,0.4);
        background: rgba(255,255,255,0.08);
        border-radius: 10px;
        -webkit-transition: border-color 0.3s, background 0.3s;
        transition: border-color 0.3s, background 0.3s;
    }

    .pricing--norbu .pricing__item:hover {
        border: 1px solid rgba(255,255,255,1);
        background: rgba(255,255,255,0.18);
    }

    .pricing--norbu .pricing__title {
        font-size: 2em;
        font-weight: 400;
        margin: 0.5em 0;
        padding: 1em;
        position: relative;
    }

    .pricing--norbu .pricing__title::after {
        content: '';
        position: absolute;
        width: 20%;
        height: 1px;
        background: #fff;
        left: 40%;
        bottom: 0;
    }

    .pricing--norbu .icon {
        display: inline-block;
        min-width: 2em;
    }

    .pricing--norbu .pricing__price {
        font-size: 3.5em;
        padding: 0.5em 0 0 0;
        font-weight: 400;
        position: relative;
        z-index: 100;
    }

    .pricing--norbu .pricing__currency {
        font-size: 0.5em;
        vertical-align: super;
    }

    .pricing--norbu .pricing__period {
        font-size: 0.25em;
        display: block;
        padding: 1em;
    }

    .pricing--norbu .pricing__sentence {
        padding: 1em 2em;
        font-size: 1em;
        margin: 0 auto 1em;
    }

    .pricing--norbu .pricing__feature-list {
        font-size: 1.15em;
        margin: 0 2em;
        letter-spacing: 0;
        padding: 2em 0;
        list-style: none;
    }

    .pricing--norbu .pricing__feature {
        line-height: 1.4;
    }

    .pricing--norbu .pricing__feature::before {
        content: "\e87a";
        font-family: 'linearicons';
        display: inline-block;
        vertical-align: middle;
        padding: 0 0.75em 0 0;
    }

    .pricing--norbu .pricing__action {
        font-weight: bold;
        flex: none;
        margin: auto 1em 1em;
        padding: 1.25em 2em;
        color: #4aa8e4;
        background: rgba(255,255,255,0.7);
        border-radius: 5px;
        -webkit-transition: background 0.3s;
        transition: background 0.3s;
    }

    .pricing--norbu .pricing__action:hover,
    .pricing--norbu .pricing__action:focus {
        background: #f8f8f8
    }

    .pricing--norbu .pricing__item.active {
        border: 1px solid rgba(255,255,255,1);
        background: rgba(248,248,248,0.28);
    }
    .pricing--norbu .pricing__action.active {
        background-color: #e5603b;
        color: #f8f8f8;
    }

    /* Dawa */
    .pricing--dawa .pricing__item {
        padding: 0 2em;
    }

    .pricing--dawa .pricing__title {
        font-weight: bold;
        font-size: 1.8em;
        padding: 0 0 0.5em;
        background: url(../img/line.png) no-repeat 50% 100%;
    }

    .pricing--dawa .pricing__price {
        font-size: 3.75em;
        line-height: 1;
        margin: 1em 0 0.65em;
        font-family: 'Homemade Apple', cursive;
    }

    .pricing--dawa .pricing__period {
        font-size: 0.25em;
        display: block;
    }

    .pricing--dawa .pricing__sentence {
        font-family: 'Homemade Apple', cursive;
        margin: 0;
    }

    .pricing--dawa .pricing__feature-list {
        margin: 0 0 1.5em;
        padding: 1em;
        list-style: none;
        text-align: center;
    }

    .pricing--dawa .pricing__action {
        border-radius: 30px;
        font-size: 1.5em;
        padding: 0.5em 1.5em;
        font-family: 'Homemade Apple', cursive;
        -webkit-transition: color 0.3s;
        transition: color 0.3s;
    }

    .pricing--dawa .pricing__action:hover,
    .pricing--dawa .pricing__action:focus {
        color: #fffa5c;
    }

    @media screen and (max-width: 40em) {
        .pricing--dawa .pricing__item {
            border: 1px solid rgba(255,255,255,0.6);
            margin: 1em;
        }
    }

    /* Yonten */
    .pricing--yonten .pricing__item {
        font-family: 'PT Sans', sans-serif;
        padding: 2em 4em;
        cursor: default;
        color: #fff;
        margin: 1em;
        border: 1px solid #5c6552;
        max-width: 320px;
    }

    @media screen and (min-width: 66.250em) {
        .pricing--yonten .pricing__item {
            margin: 0;
        }
        .pricing--yonten .pricing__item:nth-child(2) {
            border-right: none;
            border-left: none;
        }
    }

    .pricing--yonten .pricing__item:hover {
        z-index: 100;
    }

    .pricing--yonten .pricing__item:hover::after {
        content: '';
        pointer-events: none;
        position: absolute;
        top: -5px;
        left: -5px;
        width: 100%;
        height: 100%;
        box-sizing: content-box;
        border: 5px solid #8bc34a;
    }

    .pricing--yonten .pricing__title {
        font-size: 1.5em;
        margin: 0 0 0.5em 0;
        padding: 0 0 0.5em;
    }

    .pricing--yonten .icon {
        font-size: 3em;
        margin: 0 0 0.5em 0;
        color: #85c34a;
    }

    .pricing--yonten .pricing__price {
        font-size: 2em;
        margin: 0 0 0.5em 0;
        font-weight: bold;
        color: #85c34a;
    }

    .pricing--yonten .pricing__currency {
        font-size: 0.5em;
        vertical-align: super;
    }

    .pricing--yonten .pricing__period {
        font-size: 0.35em;
        padding: 0 0 0 0.5em;
        color: #646D5B;
    }

    .pricing--yonten .pricing__feature-list {
        margin: 0;
        padding: 0.25em 0 8em;
        list-style: none;
        text-align: center;
        color: #81867D;
    }

    .pricing--yonten .pricing__feature {
        padding: 0.25em;
    }

    .pricing--yonten .pricing__action {
        font-weight: bold;
        margin-top: auto;
        padding: 1em 2em;
        border-radius: 40px;
        background: #85c34a;
        color: ;
        -webkit-transition: background-color 0.3s, color 0.3s;
        transition: background-color 0.3s, color 0.3s;
    }

    .pricing--yonten .pricing__action:hover,
    .pricing--yonten .pricing__action:focus {
        color: #85c34a;
        background: #fff;
    }

    /* tashi */
    .pricing--tashi .pricing__item {
        font-family: 'Roboto Condensed', sans-serif;
        margin: 0.5em;
        padding: 2em 2.5em;
        text-align: left;
        color: #fff;
        background: #262c37;
    }

    .pricing--tashi .pricing__title {
        font-size: 2em;
        font-weight: 300;
        margin: 0 0 0.15em;
        color: #E25A77;
    }

    .pricing--tashi .pricing__item:nth-child(2) .pricing__title {
        color: #E25ABC;
    }

    .pricing--tashi .pricing__item:nth-child(3) .pricing__title {
        color: #7E5AE2;
    }

    .pricing--tashi .pricing__price {
        font-size: 3em;
        font-weight: 300;
        padding: 0.85em 0;
    }

    .pricing--tashi .pricing__currency {
        font-size: 0.65em;
        vertical-align: super;
        color: #394150;
    }

    .pricing--tashi .pricing__period {
        font-size: 0.35em;
        padding: 0 0 0 0.5em;
        color: #535965;
    }

    .pricing--tashi .pricing__sentence {
        padding: 0 0 0.5em;
        margin: 0;
        color: #535965;
    }

    .pricing--tashi .pricing__feature-list {
        font-size: 0.95em;
        margin: 0;
        padding: 0 0 2.5em;
        list-style: none;
        color: #757983;
    }

    .pricing--tashi .pricing__feature {
        position: relative;
        display: block;
        padding: 0 0 0 20px;
        line-height: 1.5;
    }

    .pricing--tashi .pricing__feature::before {
        content: '';
        position: absolute;
        width: 10px;
        height: 2px;
        background: #1F242D;
        left: 0;
        top: 50%;
        margin: -2px 0 0 0;
    }

    .pricing--tashi .pricing__action {
        -webkit-align-self: flex-end;
        align-self: flex-end;
        margin-top: auto;
        font-size: 1.55em;
        width: 60px;
        height: 60px;
        line-height: 60px;
        color: #fff;
        border-radius: 30px;
        background: #E25A77;
        -webkit-transition: background-color 0.3s, color 0.3s;
        transition: background-color 0.3s, color 0.3s;
    }

    .pricing--tashi .pricing__item:nth-child(2) .pricing__action {
        background: #E25ABC;
    }

    .pricing--tashi .pricing__item:nth-child(3) .pricing__action {
        background: #7E5AE2;
    }

    .pricing--tashi .pricing__action:hover,
    .pricing--tashi .pricing__action:focus {
        background: #1A1F28 !important;
    }

    /* palden */
    .pricing--palden .pricing__item {
        font-family: "Nunito", sans-serif;
        cursor: default;
        color: #84697c;
        background: #fff;
        box-shadow: 0 0 10px rgba(46, 59, 125, 0.23);
        border-radius: 20px 20px 10px 10px;
        margin: 1em;
    }

    @media screen and (min-width: 66.250em) {
        .pricing--palden .pricing__item {
            margin: 1em -0.5em;
        }
        .pricing--palden .pricing__item--featured {
            margin: 0;
            z-index: 10;
            box-shadow: 0 0 20px rgba(46, 59, 125, 0.23);
        }
    }

    .pricing--palden .pricing__deco {
        border-radius: 10px 10px 0 0;
        background: #7a90ff;
        padding: 4em 0 9em;
        position: relative;
    }

    .pricing--palden .pricing__deco-img {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 160px;
    }

    .pricing--palden .pricing__item--featured .pricing__deco {
        padding: 5em 0 8.885em 0;
    }

    .pricing--palden .pricing__title {
        font-size: 0.75em;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 5px;
        color: #ffd5bd;
    }

    .pricing--palden .deco-layer {
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
    }

    .pricing--palden .pricing__item:hover .deco-layer--1 {
        -webkit-transform: translate3d(15px,0,0);
        transform: translate3d(15px,0,0);
    }

    .pricing--palden .pricing__item:hover .deco-layer--2 {
        -webkit-transform: translate3d(-15px,0,0);
        transform: translate3d(-15px,0,0);
    }

    .pricing--palden .icon {
        font-size: 2.5em;
    }

    .pricing--palden .pricing__price {
        font-size: 5em;
        font-weight: bold;
        padding: 0;
        color: #fff;
        margin: 0 0 0.25em 0;
        line-height: 0.75;
    }

    .pricing--palden .pricing__currency {
        font-size: 0.15em;
        vertical-align: top;
        color: rgba(0,0,0,0.4);
    }

    .pricing--palden .pricing__period {
        font-size: 0.15em;
        padding: 0 0 0 0.5em;
        color: rgba(0,0,0,0.4);
        font-style: italic;
    }

    .pricing--palden .pricing__sentence {
        font-weight: bold;
        margin: 0 0 1em 0;
        padding: 0 0 0.5em;
    }

    .pricing--palden .pricing__feature-list {
        margin: 0;
        padding: 0.25em 0 2.5em;
        list-style: none;
        text-align: center;
    }

    .pricing--palden .pricing__feature {
        padding: 1em 0;
    }

    .pricing--palden .pricing__action {
        font-weight: bold;
        margin: auto 3em 2em 3em;
        padding: 1em 2em;
        color: #fff;
        border-radius: 30px;
        background: #ffae7e;
        -webkit-transition: background-color 0.3s;
        transition: background-color 0.3s;
    }

    .pricing--palden .pricing__action:hover,
    .pricing--palden .pricing__action:focus {
        background-color: #f38747;
    }


    .billing-plan-table tbody tr th,
    .billing-plan-table tbody tr td {
        padding: 12px 24px;
        font-weight: normal;
    }
    .billing-plan-table tbody tr th>div,
    .billing-plan-table tbody tr td>div {
        line-height: 48px;
        min-height: 48px;
    }

    .billing-header-table tbody tr td,
    .billing-plan-table tbody tr td {
        border-left: 1px solid rgba(255,255,255,0.3);
        border-bottom: none;
    }
    .billing-header-table tbody tr td:last-child,
    .billing-plan-table tbody tr td:last-child {
        border-right: none;
    }
</style>