Template 2 - 4 Choices is a single-page video order form with 4 choices instead of 3.
See a live preview

Grab the code here

Included in the source code are video tutorials on how to use and update the template.
<!DOCTYPE html>
<!--
**************************************************
****************** INSTRUCTIONS ******************
**************************************************
Sources:
Color picker https://bit.ly/32Llho5
Google fonts https://fonts.google.com/
Bootstrap https://getbootstrap.com/docs/5.0/getting-started/introduction/

IMPORTANT: These videos will show you how to make
basic changes to the template. For more advanced
changes please talk to your Web Developer.

***PLEASE WATCH THE VIDEOS BEFORE EDITING THE TEMPLATE!***

Instructional videos (Average length 4min):
1. How to change choices.
Video: https://www.loom.com/share/3039bfac7ff6477f9baef25d9dbe8a37
2. How to change colors and fonts.
Video: https://www.loom.com/share/9d4d7b7b2eb940cb8ef3b95936369b7b
3. How to change images.
Video: https://www.loom.com/share/1a66c3e9377f4274b21ae1d8c328413c
4. How to change text.
Video: https://www.loom.com/share/d7284a05be5546f9b0ee23b886a3b1b5
4. How to duplicate a section.
Video: https://www.loom.com/share/8973965c0bcd47f0846a55e821b2202c

Having issues?
Email 14West support at support@14west.us

**************************************************
************ REMOVE BEFORE PUBLISHING ************
**************************************************
-->

<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Live Preview</title>
	<link rel="stylesheet" type="text/css" href="live-preview.css">

	<meta name="viewport" content="width=device-width,initial-scale=1">

	<!-- This should be in a header Snippet -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

	<!-- END - This should be in a header Snippet -->
	<!-- STYLE -->
	<style>
		body {
			font-family: 'Roboto', sans-serif;
		}

		/* Vars */
		:root {
			--main-color: #535678;
			--main-d-color: #2B2D42;
			--main-width: 1050px;
			--standard-bg: #f8f9fa;
			--headline-color: #262626;
			--headline-color-alt: #373737;
			--content-color-standard: #656970;
			--content-color-d-standard: #2B2B2B;
			--content-color-l-standard: #7C8087;
			--content-black: #000;
			--headline-size: 48px;
			--subline-size: 20px;
			--content-size: 16px;
			--content-lineheight: 24px;
			--headline-height: 56px;
			--content-narrow: 650px;
			--alt-content-color: #fff;
			--content-letter-space: 0.3px;
			--btn-width: 262px;
			--h2-font-size: 40px;
			--h2-lineheight: 48px;
			--choice-title: 32px;
			--choice-price-size: 24px;
			--form-font-size: 14px;
			--form-line-height: 18px;
			--form-letter-spacing: 1.4px;
			--form-text-transform: uppercase;
			--form-field-font-size: 16px;
			--form-field-line-height: 24px;
			--field-height: 48px;

			--main-mobile-width: 90%;
			--mobile-headline-size: 40px;
			--mobile-headline-height: 48px;
			--mobile-subline-size: 16px;
			--mobile-h2-font-size: 32px;
			--mobile-h2-lineheight: 40px;
		}

		/* Main */
		.mainContainer {
			width: 100%;
		}

		/* Header */
		.headerContainer {
			width: 100%;
			margin: auto;
			height: 620px;

			background-image: linear-gradient(213.87deg, rgba(64, 67, 93, 0.669198) 10.41%, var(--main-color) 83.95%), url('https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/skyscrapers3.jpg');
			background-size: cover;

			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.headline {
			width: var(--main-width);
			max-width: 100%;
			margin: auto;
			padding-left: 15px;
			color: #fff;

		}

		.headline h1 {
			font-size: var(--headline-size);
		}

		.subline {
			width: var(--main-width);
			max-width: 100%;
			margin: auto;
			padding-left: 15px;
			color: #fff;
			font-size: var(--subline-size);
		}

		.videoHead {
			margin: auto;
			width: var(--main-width);
			max-width: 100%;
			display: block;
			margin-top: -210px;
		}

		/* Footer */
		.footerContainer {
			width: 100%;
			margin: auto;
			padding: 60px 20px;
			color: var(--headline-color-alt);
		}

		.legalLinks {
			padding: 0 20px;
			font-weight: 600;
			color: var(--main-color);
		}

		.promoInfo {
			padding: 0 0 20px 0;
			display: block;
			text-transform: uppercase;
			letter-spacing: 1.4px;
			font-style: normal;
			font-weight: normal;
		}

		/* Content */
		.contentContainer {
			width: var(--main-width);
			max-width: 100%;
			margin: auto;
			padding: 80px 0;
		}

		.contentStandard p {
			font-size: var(--content-size);
			line-height: var(--content-lineheight);
			letter-spacing: var(--content-letter-space);
		}

		.barContainer {
			width: 100%;
			margin: auto;
		}

		.contentHeadline {
			font-size: var(--headline-size);
			font-weight: bold;
			line-height: var(--headline-height);
			padding-bottom: 20px;
		}

		.contentCentered {
			text-align: center;
		}

		.contentNarrow {
			width: var(--content-narrow);
			max-width: 100%;
			margin: auto;
		}

		.barBackground {
			background-image: linear-gradient(90deg, rgba(66, 98, 166, 0.0001) 10%, rgba(83, 86, 120, 0.8) 15%, var(--main-color) 30%), url('https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/wallst.png');
			background-size: auto 100%;
			background-repeat: no-repeat;
		}

		.btn {
			padding: 10px 10px;
			width: var(--btn-width);
			max-width: 100%;
			border-width: 2px;
			border-radius: 3px;
			text-transform: uppercase;
			margin-top: 15px;
		}

		.whiteBorder {
			border-color: #fff;
		}

		.altContentColor {
			color: var(--alt-content-color);
		}

		.bgColor {
			background-color: var(--alt-content-color);
		}

		.contentColor {
			color: var(--content-color-standard);
		}

		.btnColored {
			background-color: var(--main-color);
		}

		.imageFull {
			width: 100%;
			height: auto;
			object-fit: cover;
		}

		.columnAltColor {
			background-color: var(--standard-bg);
			mix-blend-mode: normal;
		}

		h2 {
			color: var(--headline-color);
			font-size: var(--h2-font-size);
			line-height: var(--h2-lineheight);
			font-weight: bold;
		}

		.blurb-title {
			padding-top: 15px;
			margin-bottom: 0;
			line-height: var(--content-lineheight);
		}

		.quotedText {
			position: relative;
			font-style: italic;
			font-weight: bold;
			font-size: 32px;
			line-height: 40px;
			letter-spacing: var(--content-letter-space);

			padding: 40px 0 20px 0;
		}

		.quotedText:before {
			content: '';
			position: absolute;
			background-image: url('https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/quote2.png');
			background-repeat: no-repeat;
			top: 0;
			left: 0;
			width: 93px;
			height: 71px;
		}

		.quotedText:after {
			content: '';
			position: absolute;
			background-image: url('https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/quote1.png');
			bottom: 0;
			right: 0;
			width: 93px;
			height: 71px;
			background-repeat: no-repeat;
		}

		/* Payment Section */
		#orderForm .contentContainer {
			padding: 90px 70px 20px;
		}
		#orderForm .contentContainer > h2,
		#orderForm .contentContainer > p
		 {
			padding: 0 40px;
		}
		#yourDetails .contentContainer,
		#yourBilling .contentContainer,
		#yourPayment .contentContainer {
			padding: 90px 110px 10px;
		}

		#yourSummary .contentContainer {
			padding: 90px 110px;
		}

		h2.choice__name {
			font-size: 32px;
			font-weight: 700;
			line-height: 40px;
			letter-spacing: 0.2px;

		}

		.choicesBlock {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 40px;
		}

		#choice__1,
		#choice__2,
		#choice__3,
		#choice__4 {
			width: 24%;
			border-radius: 0;
			padding-bottom: 20px;
			cursor: pointer;
			position: relative;
			box-shadow: rgb(155 163 173) 0px 0px 1px 1px;
		}

		#choice__1 .activeChoice,
		#choice__2 .activeChoice,
		#choice__3 .activeChoice,
		#choice__4 .activeChoice {
			position: absolute;
			font-size: 20px;
			width: 40px;
			height: 40px;
			color: #fff;
			background-color: var(--main-color);
			border-radius: 50%;
			text-align: center;
			padding-top: 5px;
			bottom: -20px;
			left: 50%;
			transform: translateX(-50%);
			display: none;
		}

		#choice__1 .activeChoice:after,
		#choice__2 .activeChoice:after,
		#choice__3 .activeChoice:after,
		#choice__4 .activeChoice:after {
			content: '\f00c';
			font-family: "FontAwesome";
		}

		#choice__1,
		#choice__3 {
			
		}

		.best-value {
			text-align: center;
			margin-bottom: 0;
			padding: 10px 10px;
			background-color: var(--main-d-color);
			border-radius: 4px 4px 0 0;
			margin-top: -1;
			color: #fff;
			font-weight: 600;
			/*font-family: PingFang SC;*/
			font-size: 18px;
			line-height: 26px;
			letter-spacing: 0.17px;
		}

		#choice__1 h2,
		#choice__2 h2,
		#choice__3 h2,
		#choice__4 h2,
		#choice__1 div,
		#choice__2 div,
		#choice__3 div,
		#choice__4 div {
			text-align: center;
			cursor: pointer;
		}

		#choice__1 h2,
		#choice__2 h2,
		#choice__3 h2,
		#choice__4 h2 {
			font-weight: bold;
			font-size: var(--choice-title);
			padding: 10px 0 6px;
			margin-bottom: 0;
		}

		#choice__1 div,
		#choice__2 div,
		#choice__3 div,
		#choice__4 div {
			font-size: var(--choice-price-size);
			color: var(--main-color);
			font-weight: 600;
		}

		#choice__1 input,
		#choice__2 input,
		#choice__3 input,
		#choice__4 input {
			display: none;
		}

		#choice__2 div span {
			font-size: 14px;
			color: var(--content-color-standard);
		}

		#choice__1 .choice__cost,
		#choice__2 .choice__cost,
		#choice__3 .choice__cost,
		#choice__4 .choice__cost {
			border-bottom: 1px solid #9BA3AD;
			padding-bottom: 10px;
		}

		#choice__1 ul,
		#choice__2 ul,
		#choice__3 ul,
		#choice__4 ul {
			padding: 0 20px 0 30px;
			list-style: none;
			cursor: pointer;
		}

		#choice__1 li,
		#choice__2 li,
		#choice__3 li,
		#choice__4 li {
			position: relative;
			font-size: 14px;
			color: var(--content-color-standard);
			padding-bottom: 6px;
		}

		#choice__1 li:before,
		#choice__2 li:before,
		#choice__3 li:before,
		#choice__4 li:before {
			content: '\f00c';
			color: var(--main-color);
			font-family: "FontAwesome";
			font-size: 16px;
			position: absolute;
			left: -20px;
			top: 0px;
			width: 14px;
			height: 14px;
		}
		.choice__1,
		.choice__2,
		.choice__3,
		.choice__4 {
			width: 100%;
		}

		.detailsDesc {
			color: var(--content-color-standard);
		}

		#billing_form>div {
			width: 100%;
		}

		#billing_form .labelForm,
		#yourPayment .labelForm {
			font-size: var(--form-font-size);
			line-height: var(--form-line-height);
			letter-spacing: var(--form-letter-spacing);
			text-transform: var(--form-text-transform);
			color: var(--headline-color);
			padding: 6px 0;
		}

		#billing_form .labelForm p,
		#yourPayment .labelForm p {
			margin-bottom: 0;
		}

		#billing_form .fieldForm.form-input,
		#yourPayment .fieldForm.form-input,
		.accepted-credit-cards {
			padding-bottom: 20px;
			width: 100%;
		}

		#billing_form .fieldForm.form-input input,
		#billing_form .fieldForm.form-input select,
		#yourPayment .fieldForm.form-input input,
		#yourPayment .fieldForm.form-input select,
		#spreedly-number,
		#spreedly-cvv {
			font-size: var(--form-field-font-size);
			line-height: var(--form-field-line-height);
			letter-spacing: 0.3px;
			color: var(--headline-color);
			height: var(--field-height);
			width: 100%;
			padding: 0 12px;
		}
		.orderSummary {
			padding: 30px 12px 80px;
		}
		#contact-agreement {
			display: flex;
			align-items: center;
			padding: 20px 5px 0;
		}
		#contact-agreement label {
			padding-left: 15px;
		}
		#contact-agreement-checkbox {
			box-shadow: 0px 0px 7px 1px red;
		}

		.col-md-8-PaddingRight .col-md-8 {
			padding-right: 20px;
		}

		.displayMiddle {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.what_cvv_popup h3 {
			text-align: center;
			font-size: var(--content-size);
			line-height: var(--content-lineheight);
			color: var(--headline-color);
			font-weight: 600;
		}
		#what_cvv_btn {
			color: var(--main-color);
			font-size: var(--form-field-font-size);
			text-decoration-line: underline;
			letter-spacing: 0.1px;
			line-height: var(--form-line-height);
			font-weight: 600;
			cursor: pointer;
			position: relative;
		}
		.what_cvv_popup:before {
			content: '';
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 5px 8.7px 5px 0;
			border-color: transparent #9BA3AD transparent transparent;
			position: absolute;
			left: -9px;
			top: 50%;
			transform: translateY(-50%);
		}
		.what_cvv_popup:after {
			content: '';
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 5px 8.7px 5px 0;
			border-color: transparent #fff transparent transparent;
			position: absolute;
			left: -7px;
			top: 50%;
			transform: translateY(-50%);
		}
		.what_cvv_popup {
			position: absolute;
			display: none;
			justify-content: space-evenly;
			border: 1px solid #9BA3AD;
			border-radius: 4px;
			padding: 20px;
			left: calc(100% + 15px);
			top: calc(100% - 102px);
			background-color: #fff;
			width: 430px;
			max-width: 100vw;
			z-index: 99;
			transition: 0.3s;
		}
		.cvv_active {
			display: flex;
		}
		.what_cvv_popup > div {
			width: 40%;
		}
		.what_cvv_popup > div img {
			width: 100%;
		}

		.dateSlash {
			font-size: 26px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 48px;
		}

		.orderSummaryBox {
			background-color: var(--standard-bg);
			padding: 38px 52px;
		}

		.orderSummaryBox h2 {
			font-size: 32px;
			line-height: 40px;
			font-weight: bold;
		}

		#order_summary_subtotal_value,
		#order_summary_order_total_value,
		.orderTotal {
			text-align: right;
			width: 100%;
			display: block;
		}

		#yourSummary .row>div {
			padding: 10px 0;
		}

		#yourSummary hr {
			margin-top: 10px;
		}

		.orderTotal,
		.orderTotalTitle {
			color: var(--headline-color);
			font-weight: 600;
			font-size: 20px;
			line-height: 28px;
		}

		#yourSummary .row {
			--bs-gutter-x: 0;
		}

		input#submit-button {
			background: var(--main-color);
			background-blend-mode: lighten;
			border-radius: 4px;
			font-size: 16px;
			line-height: 23px;
			letter-spacing: 0.8px;
			text-transform: uppercase;
			color: #FFFFFF;
			width: 260px;
			height: 48px;
			margin-top: 48px;
		}

		#cof-agreement {
			display: flex;
			align-items: center;
			margin-top: 48px;
		}

		#cof-agreement label {
			padding-left: 20px;
			font-size: 16px;
			line-height: 24px;
			letter-spacing: 0.3px;
			color: var(--content-color-d-standard);
		}

		input#cof-agreement-checkbox {
			box-shadow: 0 0 6px 0px red;
		}
		.rowPadding {
			padding: 0 0 35px 0;
		}
		


		/**
		  	* Responsive
		   	*/
		@media only screen and (max-width: 1050px) {
			.videoHead,
			.subline,
			.headline,
			.contentContainer
			 {
				max-width: var(--main-mobile-width);
			}
		}
		@media only screen and (max-width: 1024px) {
			.what_cvv_popup {
				left: calc(100% - 262px);
    			top: calc(100% + 12px);
			}
			.what_cvv_popup:before {
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0 5px 8.7px 5px;
				border-color: transparent transparent #9BA3AD transparent;
				top: -9px;
				left: 50%;
				transform: translateX(-50%);
			}
			.what_cvv_popup:after {
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0 5px 8.7px 5px;
				border-color: transparent transparent #fff transparent;
				top: -7px;
				left: 50%;
				transform: translateX(-50%);
			}
			
		}
		@media only screen and (max-width: 768px) {
			.videoHead {
				height: 65%;
				margin-top: -150px;
			}
			.reverseColumn {
				flex-direction: column-reverse;
			}
			.reverseColumn img {
				padding-bottom: 30px;
			}
			.btn {
				width: 100%;
			}
			.contentContainer {
				padding: 30px 0;
				text-align: left;
			}
			.barContainer .contentContainer, 
			.barContainer .contentContainer p,
			p.choice__cost,
			p.best-value,
			.quotedText,
			.barContainer.columnAltColor h2 {
				text-align: center;
			}
			.rowPadding {
				padding: 0;
			}
			.rowPadding > div {
				padding: 0 35px 15px 35px;
			}
			.choicesBlock {
				display: block;
			}
			#choice__1,
			#choice__2,
			#choice__3,
			#choice__4 {
				width: 100%;
				height: auto;
				margin-bottom: 50px;
			}
			#choice__1 ul,
			#choice__2 ul,
			#choice__3 ul,
			#choice__4 ul {
				text-align: left;
			}
			#choice__1 li,
			#choice__2 li,
			#choice__3 li,
			#choice__4 li {
				padding-left: 10px;
			}
			#billing_form .labelForm,
			#yourPayment .labelForm,
			#orderForm h2:not(h2.choice__name),
			#orderForm p:not(p.choice__cost):not(p.best-value),
			#yourDetails h2,
			#yourDetails p,
			#yourPayment h2,
			#yourSummary h2
			 {
				text-align: left;
			}
			#orderForm .contentContainer, #yourDetails .contentContainer, #yourBilling .contentContainer, #yourPayment .contentContainer {
				padding: 60px 50px 10px;
			}
			.contentContainer h2,
			.contentContainer p
			 {
				text-align: left;
			}
			.footerContainer.contentCentered p a {
				display: block;
				padding-bottom: 10px;
			}
			#yourSummary .contentContainer {
				padding: 0 20px;
			}
			.orderSummaryBox {
				padding: 30px 32px;
			}
			.orderSummaryBox {
				text-align: left;
			}
			div#cof-agreement {
				text-align: left;
				align-items: baseline;
			}
			input#submit-button {
				width: 100%;
			}
			.headerContainer {
				height: 300px;
			}
			.headline,
			.contentHeadline {
				font-size: var(--mobile-headline-size);
				line-height: var(--mobile-headline-height);
				text-align: left;
			}
			.subline {
				font-size: var(--mobile-subline-size);
			}
			.row.col-md-8-PaddingRight {
				padding-right: 0;
			}
			.footerContainer.contentCentered {
				text-align: center;
			}
		}

		@media only screen and (max-width: 650px) {
			.what_cvv_popup {
				left: calc(100% - 166px);
				top: calc(100% + 12px);
				width: auto;
				flex-wrap: wrap;
			}
			.what_cvv_popup > div {
				width: 100%;
			}
		}

		@media only screen and (max-width: 480px) {
			.videoHead {
				height: 50%;
				margin-top: -210px;
			}
			#orderForm .contentContainer > h2, #orderForm .contentContainer > p {
				padding: 0;
			}
		}
		.aaa {
		--mobile-headline-size: 40px;
		--mobile-headline-height: 48px;
		--mobile-subline-size: 16px;
		--mobile-h2-font-size: 32px;
		--mobile-h2-lineheight: 40px;
		}
	</style>
	<!-- END - STYLE -->

</head>

<body>
	<div class="mainContainer">

		<!-- Header -->
		<section id="topScroll">
			<div class="headerContainer">
				<div>
					<div class="headline">
						<h1>The Intelligent Investor</h1>
					</div>
					<div class="subline">
						by The Agora Companies
					</div>
				</div>

			</div>
		</section>
		<!-- Video -->
		<div class="videoHead">
			<iframe src="https://player.vimeo.com/video/225519343" title="Video Frame" width="100%" height="560" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>
		</div>
		<!-- Content -->
		<section id="contentOne">
			<div class="contentContainer">
				<div class="contentNarrow">
					<div class="contentHeadline contentCentered">
						The only guide you need to start investing now!
					</div>
					<div class="contentStandard contentCentered">
						<p>Finance volatile dividends Nikkei risk value corporate bonds.</p>
						<p>Standard & Poor's economy finance tax Dow Jones taxpayer managed. Rates strategy inverse
							treasury
							taxpayer yield. Gains Dow Jones Moody's market passively retirement credit quality improve
							downturn 401k bonds treasury.</p>
					</div>
				</div>
			</div>
		</section>

		<div class="barContainer barBackground">
			<div class="contentContainer" style="padding: 40px 0;">
				<div class="row">
					<div class="col-md-6"></div>
					<div class="col-md-6 contentStandard">
						<p class="altContentColor">Interest rate market index income established bondholders benchmark
							corporation appeal. Fluctuate index performance securities retirement term inverse issuer
							benchmark.</p>
						<a href="#contentTwo" id="learnmore" class="btn whiteBorder altContentColor">Learn More</a>
					</div>
				</div>
			</div>
		</div>

		<section id="contentTwo">
			<div class="contentContainer">
				<div class="row">
					<div class="col-md-7">
						<p>Rates value maturities expenses substantially credit corporate bonds exchange traded funds
							credit
							quality. Fitch investment improve potential <strong>Dow Jones</strong> prices exchange
							traded
							funds interest rollover corporation private funds quarterly passively.</p>
						<p>Hedge fund strategy index funds upswing NYSE exchange. Standard & Poor's investment
							performance
							growth securities bonds volatile Nikkei notes lucrative corporate bonds. </p>
						<p>Bull term federal shares Nikkei retirement <strong>junk bonds</strong> volatile comodity.
						</p>
						<p>Passively dividends growth improve. Value performance interest rate federal return potential
							term
							rise NASDAQ bear government income lucrative.</p>
						<p>Tax established gains money. <strong>Established hedge</strong> fund managed taxpayer
							dividends
							management exchange corporate bonds bills yield passively.</p>
						<p><strong>Dividends substantially</strong> downturn market index. Exchange traded funds
							industry
							downturn mutual funds. </p>
						<p><a href="#orderForm" id="ordernow" class="btn btnColored altContentColor">Order Now</a></p>
					</div>
					<div class="col-md-1"></div>
					<div class="col-md-4">
						<img alt="image" class="imageFull" src="https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/image3.png">
					</div>
				</div>
			</div>
		</section>
		<section id="contentThree">
			<div class="barContainer columnAltColor">
				<div class="contentContainer " style="padding-bottom: 40px;">
					<div class="row">
						<div class="col-md-12">
							<h2>
								Here’s Everything You
								<br> Get With Your Supscription!
							</h2>
						</div>
					</div>
				</div>

				<div class="contentContainer" style="padding-top: 0;">
					<div class="row rowPadding">
						<div class="col-md-4">
							<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Statistics%402x.png" >

							<p class="blurb-title">
								<strong>
									Performance Interest
								</strong>
							</p>

							<p class="contentColor contentStandard">
								Corporate municipal corporation return volatile managed shares IRA established. Appeal
								market index
								potential comodity investment grade bonds federal NASDAQ Moody's management value
								securities
								taxpayer. Nikkei money holder interest.
							</p>
						</div>

						<div class="col-md-4">
							<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Thumbsup%402x.png " >

							<p class="blurb-title">
								<strong>
									Financial Health Strategy
								</strong>
							</p>

							<p class="contentColor contentStandard">
								Bull exchange traded funds credit quality government corporation gains corporate
								volatile
								market
								index fluctuate. Hedge fund exchange risk bear quarterly finance volatile rates. Called
								appeal
								exchange traded funds downturn.
							</p>
						</div>

						<div class="col-md-4">
							<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Graduation%402x.png" >

							<p class="blurb-title">
								<strong>
									Market Notes
								</strong>
							</p>

							<p class="contentColor contentStandard">
								Investment called bonds management shares corporate federal funds financial health rates
								exchange
								upswing. Debt receive interest interest.
							</p>
						</div>
					</div>

					<div class="row rowPadding">
						<div class="col-md-4">
							<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Money%402x.png" >

							<p class="blurb-title">
								<strong>
									Funds Benchmark
								</strong>
							</p>

							<p class="contentColor contentStandard">
								Potential investment appeal NYSE volatile industry Moody's mutual funds. Money
								maturities
								stocks.
								Dow Jones district investment potential. Government financial health issuer mutual funds
								money
								federal inverse retirement taxpayer bondholders.
							</p>
						</div>

						<div class="col-md-4">
							<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Screen%402x.png" >

							<p class="blurb-title">
								<strong>
									Bonds Management
								</strong>
							</p>

							<p class="contentColor contentStandard">
								Interest rate corporation inverse consulting. Managed bondholders IRA securities growth.
								Prices
								funds credit quality securities market hedge fund municipal industry corporate. Prices
								debt
								index
								funds Moody's interest issuer expenses.
							</p>
						</div>

						<div class="col-md-4">
							<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Archive%402x.png" >

							<p class="blurb-title">
								<strong>
									Consulting Index Funds
								</strong>
							</p>

							<p class="contentColor contentStandard">
								Capitalization income passively Standard & Poor's substantially notes index market
								return
								treasury
								corporate maturities funds. Financial health value upswing management established market
								index debt
								fluctuate hedge fund public treasury default index funds.
							</p>
						</div>
					</div>

					<div class="row rowPadding">
						<div class="col-md-4">
							<div>
								<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Mail%402x.png" >
							</div>

							<p class="blurb-title">
								<strong>
									Private credit exchange
								</strong>
							</p>

							<p class="contentColor contentStandard">
								Funds credit quality debt appeal exchange traded funds retirement dividends exchange
								default.
								Investment mutual funds upswing stocks quarterly passively. Strategy appeal Moody's
								taxpayer
								gains
								rise expenses.
							</p>
						</div>

						<div class="col-md-4">
							<div>
								<img alt="image" class="icons" src="https://files.ecomm.pubsvs.com/TESTING2/library/aw/UX%20design%20Assets/Style%204/Archive%402x.png" >
							</div>

							<p class="blurb-title">
								<strong>
									Value maturities
								</strong>
							</p>

							<p class="contentColor contentStandard">
								Appeal index performance rollover district exchange improve. Capital fiat rates income
								fluctuate.
								Value corporate bonds capitalization rollover substantially taxpayer consulting
								retirement
								index
								funds economy Nikkei Fitch holder mutual funds.
							</p>
						</div>
					</div>
				</div>
			</div>
		</section>

		<div class="contentContainer">
			<img alt="image" class="contentCentered imageFull" style="display: block; margin: auto;" src="https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/stock.png">
		</div>
		<div class="contentContainer" style="padding-top:0;">
			<div class="row">
				<div class="col-md-5">
					<div class="quotedText">
						Access to Intelligent Advisor is normally $199 a year. For a limited time you can get it for $45
						and learn all my secrets!
					</div>
				</div>
				<div class="col-md-1"></div>
				<div class="col-md-6">
					<p>Rise capitalization performance NYSE securities bills. Mutual funds market funds market index
						bills private interest bonds junk bonds. Yield lucrative capitalization 401k Nikkei bull market
						exposure. Federal prices taxpayer dividends fiat index funds corporation credit volatile market.
					</p>
					<p>Money debt managed fluctuate. Credit expenses inverse fiat market investment capitalization
						maturities NASDAQ. </p>
					<p>Government 401k Nikkei receive corporation Standard & Poor's gains upswing bull. Investment
						volatile upswing taxpayer district expenses value bonds NYSE risk. Term market yield fall
						district government management dividends bull.</p>
					<p>Investment market index return interest volatile government. Value called exchange rates Fitch
						funds municipal. Taxpayer Fitch risk Nikkei mutual funds Dow Jones lucrative credit quality
						bear. Income gains corporate bonds interest. Bondholders rollover quarterly. </p>
					<p><a href="#orderForm" id="ordernow" class="btn btnColored altContentColor">Order Now</a></p>
				</div>
			</div>
		</div>
		<div class="contentContainer">
			<div class="row reverseColumn">
				<div class="col-md-7">
					<p>Rates value maturities expenses substantially credit corporate bonds exchange traded funds credit
						quality. Fitch investment improve potential <strong>Dow Jones</strong> prices exchange traded
						funds interest rollover corporation private funds quarterly passively.</p>
					<p>Hedge fund strategy index funds upswing NYSE exchange. Standard & Poor's investment performance
						growth securities bonds volatile Nikkei notes lucrative corporate bonds. </p>
					<p>Bull term federal shares Nikkei retirement <strong>junk bonds</strong> volatile comodity. </p>
					<p>Passively dividends growth improve. Value performance interest rate federal return potential term
						rise NASDAQ bear government income lucrative.</p>
					<p>Tax established gains money. <strong>Established hedge</strong> fund managed taxpayer dividends
						management exchange corporate bonds bills yield passively.</p>
					<p><strong>Dividends substantially</strong> downturn market index. Exchange traded funds industry
						downturn mutual funds. </p>
					<p><a href="#orderForm" id="ordernow" class="btn btnColored altContentColor">Order Now</a></p>
				</div>
				<div class="col-md-1"></div>
				<div class="col-md-4">
					<img alt="image" class="imageFull" src="https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/image1.png">
				</div>
			</div>
		</div>

		<div class="barContainer columnAltColor" style="padding: 100px 0;">
			<section id="orderForm">
				<div class="contentContainer bgColor">
					<h2>
						Your Subscription
					</h2>
					<p>
						Choose your subscription level from one of the options below.
					</p>
					
					<form id="choices-radiogroup" novalidate="">
						<div class="choicesBlock">
							<div id="choice__1">
								<label class="choice__1" for="81f70ca8-b4f2-48e0-9f4e-7523012c3a9f">
									<h2 class="choice__name">Low</h2>
									<input type="radio" id="81f70ca8-b4f2-48e0-9f4e-7523012c3a9f" name="choice-radiogroup-element">
									<div>
										<p class="choice__cost">$79</p>
									</div>
									<ul class="tick-choice">
										<li>Digital subscription to Intelligent Investor for one year.</li>
										<li>Print subscription to Intelligent Investor for one year. </li>
									</ul>
								</label>
								<div class="activeChoice"></div>
							</div>
							<div id="choice__2">
								<label class="choice__2" for="256fefee-845f-431f-b5fa-bfd005034525">
									<h2 class="choice__name">Standard</h2>
									<input type="radio" id="256fefee-845f-431f-b5fa-bfd005034525" name="choice-radiogroup-element">
									<div>
										<p class="choice__cost">$99 <span>was $119</span></p>
									</div>
									<ul class="tick-choice">
										<li>Digital subscription to Intelligent Investor for one year.</li>
										<li>Print subscription to Intelligent Investor for one year. </li>
									</ul>
								</label>
								<div class="activeChoice"></div>
							</div>
							<div id="choice__3">
								<label class="choice__3" for="a13123be-6f56-4c24-ae1e-285618e8b584">
									<h2 class="choice__name">Premium</h2>
									<input type="radio" id="a13123be-6f56-4c24-ae1e-285618e8b584" name="choice-radiogroup-element">
									<div>
										<p class="choice__cost">$129</p>
									</div>
									<ul class="tick-choice">
										<li>Digital subscription to Intelligent Investor for one year.</li>
										<li>Print subscription to Intelligent Investor for one year. </li>
									</ul>
								</label>
								<div class="activeChoice"></div>
							</div>
							<div id="choice__4">
								<label class="choice__3" for="8a5612a9-0224-480c-a26b-d6c65dc069db">
									<h2 class="choice__name">Deluxe</h2>
									<input type="radio" id="8a5612a9-0224-480c-a26b-d6c65dc069db" name="choice-radiogroup-element">
									<div>
										<p class="choice__cost">$149</p>
									</div>
									<ul class="tick-choice">
										<li>Digital subscription to Intelligent Investor for one year.</li>
										<li>Print subscription to Intelligent Investor for one year. </li>
									</ul>
								</label>
								<div class="activeChoice"></div>
							</div>
						</div>
					</form>
				</div>
			</section>
			<section id="yourDetails">
				<div class="contentContainer bgColor">
					<div class="row">
						<div class="col-md-7">
							<h2>
								Your details
							</h2>
							<p class="detailsDesc">
								Fill out our secure order form to complete your order.
							</p>
							<form id="billing_form">
								<div class="labelForm">
									<label for="email">Email</label>
								</div>
								<div class="fieldForm form-input">
									<input type="email" id="email" name="email" required placeholder="Enter your email address">
								</div>
								<div id="password">
									<div class="labelForm form-input">
										<label for="password-input">Create Your Password </label>
										<p>
											<span style="font-size: 12px; text-transform: none;">You'll use this password to
												access and manage your subscription</span>
										</p>
									</div>
									<div class="fieldForm form-input">
										<input type="password" id="password-input" name="password" required placeholder="Enter your password">
									</div>
								</div>
								<div class="labelForm">
									<label for="billing_firstname">First Name</label>
								</div>
								<div class="fieldForm form-input">
									<input type="text" id="billing_firstname" name="firstName" required placeholder="Enter your first name">
								</div>
								<div class="labelForm">
									<label for="billing_lastname">Last Name</label>
								</div>
								<div class="fieldForm form-input">
									<input type="text" id="billing_lastname" name="lastName" required placeholder="Enter your last name">
								</div>
								<hr>
								<h2 class="addheading mob-left" id="width" style="padding-top: 30px;">Your Billing Address</h2>
								<div class="labelForm">
									<label for="billing_address_1">Address</label>
								</div>
								<div class="fieldForm form-input">
									<input type="text" id="billing_address_1" name="address" required placeholder="Enter your address">
								</div>
								<div class="fieldForm form-input">
									<label for="billing_address_2" style="display: none;">Address 2</label>
									<input type="text" id="billing_address_2" name="address2" placeholder="Enter your address line 2">
								</div>
								<div class="fieldForm form-input">
									<label for="billing_address_3" style="display: none;">Address 3</label>
									<input type="text" id="billing_address_3" name="address3" placeholder="Enter your address line 3">
								</div>
								<div class="labelForm">
									<label for="billing_city">City</label>
								</div>
								<div class="fieldForm form-input">
									<input type="text" id="billing_city" name="city" required placeholder="Enter your city">
								</div>
								<div class="row col-md-8-PaddingRight" style="--bs-gutter-x: 0;">
									<div id="billing_state_block" class="col-8 col-md-8 col-sm-8">
										<div class="labelForm">
											<label for="billing_state">State/Province</label>
										</div>
										<div class="fieldForm form-input">
											<select id="billing_state" name="stateName" data-country-sourceid="billing_country" data-type="state" required>
												<option value="">Select a State</option>
												<foreach>
													<option data-country="#SELECT_BOX.stateCountryCode#" value="#SELECT_BOX.stateCode#">#SELECT_BOX.stateName#</option>
												</foreach>
											</select>
										</div>
									</div>
									<div class="col-4 col-md-4 col-sm-4">
										<div class="labelForm">
											<label for="billing_zip">Zip Code</label>
										</div>
										<div class="fieldForm form-input">
											<input type="text" id="billing_zip" name="postalCode" required placeholder="11-223">
										</div>
									</div>
								</div>

								<div class="labelForm">
									<label for="billing_country">Country</label>
								</div>
								<div class="fieldForm form-input">
									<select name="countryName" required id="billing_country">
										<foreach>
											<option value="#SELECT_BOX.countryCode#">#SELECT_BOX.countryName#</option>
										</foreach>
									</select>
								</div>
								<div class="labelForm">
									<label for="billing_phoneNumber">Phone number (Optional)</label>
								</div>
								<div class="fieldForm form-input">
									<input type="tel" id="billing_phoneNumber" name="phoneNumber">
								</div>

							</form>
							<form id="shipping_form" novalidate>

								<div id="use-billing-as-shipping-block">
									<div class="form-input">
									<input type="checkbox" id="use-billing-as-shipping" name="use-billing-as-shipping">
								</div>
									<label for="use-billing-as-shipping">Use Billing Address as Shipping Address</label>
								</div>
									<h3>Shipping Address</h3>
									<label for="shipping_prefix">Name Prefix</label>
									<div class="form-input">
									<input type="text" id="shipping_prefix" name="namePrefix">
								</div>
									<br>
									<label for="shipping_firstname">First Name</label>
									<div class="form-input">
									<input type="text" id="shipping_firstname" name="firstName" required>
								</div>
									<br>
									<label for="shipping_lastname">Last Name</label>
									<div class="form-input">
									<input type="text" id="shipping_lastname" name="lastName" required>
								</div>
									<br>
									<label for="shipping_address_1">Address</label>
									<div class="form-input">
									<input type="text" id="shipping_address_1" name="address" required>
								</div>
									<br>
									<label for="shipping_address_2">Address 2</label>
									<div class="form-input">
									<input type="text" id="shipping_address_2" name="address2">
								</div>
									<br>
									<label for="shipping_address_3">Address 3</label>
									<div class="form-input">
									<input type="text" id="shipping_address_3" name="address3">
								</div>
									<br>
									<label for="shipping_company">Company</label>
									<div class="form-input">
									<input type="text" id="shipping_company" name="company">
								</div>
									<br>
									<label for="shipping_zip">Zip</label>
									<div class="form-input">
									<input type="text" id="shipping_zip" name="postalCode" required>
								</div>
									<br>
									<label for="shipping_city">City</label>
									<div class="form-input">
									<input type="text" id="shipping_city" name="city" required>
								</div>
									<br>
									<label for="shipping_country">Country</label>
									<div class="form-input">
									<select name="countryName" required id="shipping_country">
										<foreach>
											<option value=#SELECT_BOX.countryCode#>#SELECT_BOX.countryName#</option>
										</foreach>
									</select>
								</div>
									<br>
									<div id="shipping_state_block">
										<label for="shipping_state">State</label>
										<div class="form-input">
									<select id="shipping_state" name="stateName" data-country-sourceId="shipping_country" data-type="state" required>
										<option value="">Select a State</option>
										<foreach>
											<option data-country="#SELECT_BOX.stateCountryCode#" value=#SELECT_BOX.stateCode#>#SELECT_BOX.stateName#</option>
										</foreach>
										</select>
								</div>
									</div>
									<label for="shipping_phoneNumber">Phone number</label>
									<div class="form-input">
									<input type="tel" id="shipping_phoneNumber" name="phoneNumber">
								</div>
									<br>
							</form>
							<hr>
						</div>
					</div>
				</div>
			</section>

			<section id="yourPayment">
				<div class="contentContainer bgColor" style="padding-top: 20px;">
					<div class="row">
						<form id="payment-form" onsubmit='submitPaymentForm(); return false;' novalidate="">
							<div id="сс-form">
								<div class="col-md-7">
									<h2>
										Payment Method
									</h2>
									
									<!--
									#ACCEPTED_CC.logos#
									-->
									<div class="labelForm">
										<label for="full_name">Name On Card</label>
									</div>
									<div class="fieldForm form-input">
										<input type="text" id="full_name" name="full_name" required placeholder="Enter name on card">
									</div>
									<div class="labelForm">
										<label for="card_number">Card Number</label>
									</div>
									<div class="fieldForm form-input">
										<div id="spreedly-number" class="iframe-input"></div>
										<!--<input type="text" id="card_number" name="card_number" required 
											placeholder="Card Number"> -->
									</div>
									<div class="labelForm">
										<label for="month">Expiration Date</label>
									</div>
									<div class="row col-md-8-PaddingRight" style="--bs-gutter-x: 0;">
										<div class="col-4 col-md-3">
											<div class="fieldForm form-input">
												<input type="text" id="month" name="month" required maxlength="2" placeholder="MM">
											</div>
										</div>
										<div class="col-1 col-md-1 dateSlash"><span>/</span></div>
										<div class="col-4 col-md-3">
											<div class="fieldForm form-input">
												<label for="year" style="display: none;">Year</label>
												<input type="text" id="year" name="year" required maxlength="4" placeholder="YYYY">
											</div>
										</div>
									</div>
									<div class="labelForm">
										<label class="cvv" for="cvv">CVV</label>
									</div>
									<div class="fieldForm form-input">
										<div class="row col-md-8-PaddingRight" style="--bs-gutter-x: 0;">
											<div class="col-5 col-md-5">
												<div id="spreedly-cvv" class="iframe-input"></div>
												<!--<input type="text" id="cvv" name="cvv" required maxlength="4"
													placeholder="eg. 123">-->
											</div>
											<div class="col-7 col-md-7 displayMiddle">
												<div id="what_cvv_btn" class="drop-cvv">
													What is CVV?
													<div class="what_cvv_popup">
														<div class="card_visa">
															<h3>Visa Card</h3>
															<img alt="image" src="https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/card_visa.png">
														</div>
														<div class="card_master">
															<h3>Master Card</h3>
															<img alt="image" src="https://prd.files.irisplus.14west.us/ILTEST/library/TemplatesResources/card_mastercard.png">
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>								
								</div>
								
								<div class="orderSummary order-summary">
									<div class="orderSummaryBox">
										<h2>
											Order Summary
										</h2>
										<div class="row">
											<div class="col-6 col-md-8">
												<span class="">Cart Subtotal</span>
											</div>
											<div class="col-6 col-md-4">
												<span id="order_summary_subtotal_value"></span>
											</div>
											<div class="col-6 col-md-8">
												<span>Order Total</span>
											</div>
											<div class="col-6 col-md-4">
												<span id="order_summary_order_total_value"></span>
											</div>
											<hr>
											<div class="col-6 col-md-8">
												<span class="orderTotalTitle">Order Total</span>
											</div>
											<div class="col-6 col-md-4">
												<span class="orderTotal"></span>
											</div>
										</div>
									</div>
									<div id="cof-agreement">
										<input type="checkbox" id="cof-agreement-checkbox" name="cof-agreement-checkbox">
										<label for="cof-agreement-checkbox"> I understand my credit card credentials will be stored for
											future use, and I will be charged at the rate and frequency as indicated from my selection
											above, until I cancel.</label>
									</div>
									#VALIDATION.order_submit_error#	
									<input id="submit-button" type="submit" value="Place Order" disabled>
								</div>
							</div>
						</form>
					</div>
				</div>
			</section>
		</div>

		<div class="footerContainer contentCentered">
			<p class="promoInfo">All sales are in US dollars | Promo Code 123456</p>
			<p>© 2020 Company Name All Publishing Rights Reserved</p>
			<p>Company Name | Company Address | Company Address </p>
			<p>
				<a class="legalLinks" href="">Terms and Conditions</a>
				<a class="legalLinks" href="">Privacy Policy</a>
				<a class="legalLinks" href="">Do Not Sell My Info</a>
			</p>
		</div>
	</div>
	<!-- This should be in a footer Snippet -->

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
	<script>
		jQuery(document).ready(function () {

			// Choice switcher
			$('#choice__1').on('click', function () {
				$('#choice__1').css({ 'box-shadow': '0px 0px 1px 3px var(--main-color)' });
				$('#choice__2').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$('#choice__3').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$('#choice__4').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$('#choice__1 .choice__cost').css({ 'box-shadow': 'rgb(66 98 166) 0px 2px 0px 0px' });
				$('#choice__2 .choice__cost').css({ 'box-shadow': 'none' });
				$('#choice__3 .choice__cost').css({ 'box-shadow': 'none' });
				$('#choice__4 .choice__cost').css({ 'box-shadow': 'none' });
				$('#choice__1 .activeChoice').css({ 'display': 'block' });
				$('#choice__2 .activeChoice').css({ 'display': 'none' });
				$('#choice__3 .activeChoice').css({ 'display': 'none' });
				$('#choice__4 .activeChoice').css({ 'display': 'none' });

			});
			$('#choice__2').on('click', function () {
				$('#choice__2').css({ 'box-shadow': '0px 0px 1px 3px var(--main-color)' });
				$('#choice__1').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$('#choice__3').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$('#choice__4').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$('#choice__2 .choice__cost').css({ 'box-shadow': 'rgb(66 98 166) 0px 2px 0px 0px' });
				$('#choice__1 .choice__cost').css({ 'box-shadow': 'none' });
				$('#choice__3 .choice__cost').css({ 'box-shadow': 'none' });
				$('#choice__4 .choice__cost').css({ 'box-shadow': 'none' });
				$('#choice__2 .activeChoice').show();
				$('#choice__1 .activeChoice').hide();
				$('#choice__3 .activeChoice').hide();
				$('#choice__4 .activeChoice').hide();

			});
			$('#choice__3').on('click', function () {
				$('#choice__3').css({ 'box-shadow': '0px 0px 1px 3px var(--main-color)' });
				$('#choice__1').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$('#choice__2').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$('#choice__4').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$('#choice__3 .choice__cost').css({ 'box-shadow': 'rgb(66 98 166) 0px 2px 0px 0px' });
				$('#choice__1 .choice__cost').css({ 'box-shadow': 'none' });
				$('#choice__2 .choice__cost').css({ 'box-shadow': 'none' });
				$('#choice__4 .choice__cost').css({ 'box-shadow': 'none' });
				$('#choice__3 .activeChoice').css({ 'display': 'block' });
				$('#choice__1 .activeChoice').css({ 'display': 'none' });
				$('#choice__2 .activeChoice').css({ 'display': 'none' });
				$('#choice__4 .activeChoice').css({ 'display': 'none' });

			});
			$('#choice__4').on('click', function () {
				$('#choice__4').css({ 'box-shadow': '0px 0px 1px 3px var(--main-color)' });
				$('#choice__3').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$('#choice__1').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$('#choice__2').css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$('#choice__4 .choice__cost').css({ 'box-shadow': 'rgb(66 98 166) 0px 2px 0px 0px' });
				$('#choice__3 .choice__cost').css({ 'box-shadow': 'none' });
				$('#choice__1 .choice__cost').css({ 'box-shadow': 'none' });
				$('#choice__2 .choice__cost').css({ 'box-shadow': 'none' });
				$('#choice__4 .activeChoice').css({ 'display': 'block' });
				$('#choice__3 .activeChoice').css({ 'display': 'none' });
				$('#choice__1 .activeChoice').css({ 'display': 'none' });
				$('#choice__2 .activeChoice').css({ 'display': 'none' });

			});

			// Choice switcher
			$('#choice__1').on('click', function () {
				activeChoice('#choice__1', '#choice__3', '#choice__2', '#choice__4');
			});
			$('#choice__2').on('click', function () {
				activeChoice('#choice__2', '#choice__1', '#choice__3', '#choice__4');
			});
			$('#choice__3').on('click', function () {
				activeChoice('#choice__3', '#choice__1', '#choice__2', '#choice__4');
			});
			$('#choice__4').on('click', function () {
				activeChoice('#choice__4', '#choice__1', '#choice__2', '#choice__3');
			});

			function activeChoice(activeChoice, inactiveOne, inactiveTwo, inactiveThree) {
				$(activeChoice).css({ 'box-shadow': '0px 0px 1px 3px var(--main-color)' });
				$(inactiveOne).css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$(inactiveTwo).css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$(inactiveThree).css({ 'box-shadow': 'rgb(155 163 173) 0px 0px 1px 1px' });
				$(activeChoice+' .choice__cost').css({ 'box-shadow': 'var(--main-color) 0px 2px 0px 0px' });
				$(inactiveOne+' .choice__cost').css({ 'box-shadow': 'none' });
				$(inactiveTwo+' .choice__cost').css({ 'box-shadow': 'none' });
				$(inactiveThree+' .choice__cost').css({ 'box-shadow': 'none' });
				$(activeChoice+' .activeChoice').css({ 'display': 'block' });
				$(inactiveOne+' .activeChoice').css({ 'display': 'none' });
				$(inactiveTwo+' .activeChoice').css({ 'display': 'none' });
				$(inactiveThree+' .activeChoice').css({ 'display': 'none' });
			}

			// CVV info box
			$('#what_cvv_btn').on('click', function() {
				console.log('click working');

				if($('.what_cvv_popup').hasClass('cvv_active')) {
					$('.what_cvv_popup').removeClass('cvv_active');
				} else {
					$('.what_cvv_popup').addClass('cvv_active');
				}


			});

		});
	</script>

	<!-- END - This should be in a footer Snippet -->
</body>

</html>