<section class="faq-accordian">
	<div class="container">
		<h2 class="center">FAQs and Legal</h2>
		<div id="accordion" class="accordian-comp accordian-viewer">
			<div class="accordian-view">
				<div class="collapsed title icon-angle-down nav" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
					<div class="" id="headingOne">
						<p>Frequently Asked Questions</p>
					</div>
				</div>

				<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
					<div class="accordian-body">
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar malesuada risus nec venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris accumsan mollis blandit.
					</div>
				</div>
			</div>


			<div class="accordian-view">
				<div class="collapsed title icon-angle-down nav" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
					<div class="" id="headingTwo">
						<p>Terms and Conditions</p>
					</div>
				</div>

				<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
					<div class="accordian-body">
						<p><br />
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar malesuada risus nec venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris accumsan mollis blandit.
						</p>
					</div>
				</div>
			</div>


			<div class="accordian-view">
				<div class="collapsed title icon-angle-down nav" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
					<div class="" id="headingThree">
						<p>Frequently Asked Questions</p>
					</div>
				</div>

				<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
					<div class="accordian-body">
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar malesuada risus nec venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris accumsan mollis blandit.
					</div>
				</div>
			</div>

		</div>
	</div>

</section>

</section>

<div class="advantage-flyout-container">
	<img src="../../assets/toolkit/images/advantagepay-logo.svg" alt="Advantage Pay Logo">
	<p class="text">Save 5¢ – 30¢ per gallon instantly</p>
	<a href="" class="button-medium button-text" data-content="click-advantagekpay-enroll">Enroll Now</a>
</div>

<section class="app-footer">
	<div class="app-image">
		<img src="/assets/toolkit/images/app-footer.png" alt="Get our moblie app">
	</div>
	<div class="badge-container">
		<h3 class="flexFont-heading-2">Get the app</h3>
		<p class="app-text">Track your perks, clip coupons, and get exclusive deals and bonus perks with the Giant Eagle app.</p>
		<a class="appstore-badge" href="https://apps.apple.com/us/app/giant-eagle-mobile-shopper/id1342791159" target="_blank"><img src="/assets/toolkit/images/app-store.svg" alt="App Store"></a>
		<a class="googleplay-badge" href="https://play.google.com/store/apps/details?id=com.gianteagle.apps.mobileshopper" target="_blank"><img src="/assets/toolkit/images/google-play-badge.png" alt="Google Play Store"></a>
	</div>
</section>

<!-- <div class="banner-small no-padding-parent " style="background: "> -->
<div class="banner-small no-padding-parent " style="background: ">
	<div class="banner-container ">

		<div class="text-container">
			<!-- <div> -->
			<h3 class="banner-heading" style="color:">Now Hiring! Positions available at all locations.</h3>
			<p class="banner-subtext " style="color:;border-color:"><span>Positions available at all Giant Eagle, Market District and GetGo. <i class="far fa-arrow-right"></i></span></p>
			<!-- </div> -->
		</div>
	</div>
</div>

<div class="no-padding-parent billboard-v2  mobile-left desktop-left" style="background:;">
	<img class="billboard-desktop-image" src="/assets/toolkit/images/billboard/billboard_full_1.png" alt="">
	<img class="billboard-mobile-image" src="/assets/toolkit/images/billboard/billboard_small_1.png" alt="">

	<div class="billboard-content">
		<h2 style="color: black;">Lorem ipsum dolor sit amet, consectetur.</h2>

		<p style="color: black;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tortor lobortis proin.</p>
		<a class="" href="#0" data-content="click-billboard-btn">
			Button
		</a>
	</div>
</div>

<a href="#0" class="btn btn-primary btn-small" data-content="click-btn" aria-label="Giant Eagle Button">.btn-small</a>

<br><br>

<a href="#0" class="btn btn-primary btn-medium" data-content="click-btn" aria-label="Giant Eagle Button">.btn-medium</a>

<br><br>

<a href="#0" class="btn btn-primary btn-large" data-content="click-btn" aria-label="Giant Eagle Button">.btn-large</a>

<br><br>

<a href="#0" class="btn btn-primary" data-content="click-btn" aria-label="Giant Eagle Button">.btn .btn-primary</a>

<br /><br />

<a href="#0" class="btn btn-primary full-width-btn" data-content="click-btn" aria-label="Giant Eagle Button">.btn .btn-primary full-width</a>

<br /><br />

<a href="#0" class="btn btn-secondary" data-content="click-btn" aria-label="Giant Eagle Button">.btn .btn-secondary</a>

<br /><br />

<a href="#0" id="" class="btn btn-secondary full-width-btn" data-content="click-btn" aria-label="Giant Eagle Button">.btn .btn-secondary full-width</a>

<br /><br />

<a href="#0" class="btn btn-secondary btn-small" data-content="click-btn" aria-label="Giant Eagle Button">.btn-small</a>

<br><br>

<a href="#0" class="btn btn-secondary btn-medium" data-content="click-btn" aria-label="Giant Eagle Button">.btn-medium</a>

<br><br>

<a href="#0" class="btn btn-secondary btn-large" data-content="click-btn" aria-label="Giant Eagle Button">.btn-large</a>

<br><br>

<p style="margin: 10px 0 0 0">button-large button-primary</p>
<button class="button-large button-primary" data-content="click-btn" aria-label="Giant Eagle Button">Button</button>

<p style="margin: 10px 0 0 0">Button with icon: button-large button-primary</p>
<button class="button-large button-primary" data-content="click-btn" aria-label="Giant Eagle Button"><span class="icon-left icon-Cart"></span>Button</button>

<p style="margin: 10px 0 0 0">Button with icon: button-large button-primary</p>
<button class="button-large button-primary" data-content="click-btn" aria-label="Giant Eagle Button">Button<span class="icon-right icon-Cart"></span></button>

<p style="margin: 10px 0 0 0">button-large button-secondary</p>
<button class="button-large button-secondary" data-content="click-btn" aria-label="Giant Eagle Button">Button</button>

<p style="margin: 10px 0 0 0">button-large button-white</p>
<button class="button-large button-white" data-content="click-btn" aria-label="Giant Eagle Button">Button</button>

<p style="margin: 10px 0 0 0">button-large button-text</p>
<button class="button-large button-text" data-content="click-btn" aria-label="Giant Eagle Button">Button</button>

<p style="margin: 10px 0 0 0">button-medium button-primary</p>
<button class="button-medium button-primary" data-content="click-btn" aria-label="Giant Eagle Button">Button</button>

<p style="margin: 10px 0 0 0">button-medium button-secondary</p>
<button class="button-medium button-secondary" data-content="click-btn" aria-label="Giant Eagle Button"> Button</button>

<p style="margin: 10px 0 0 0">button-medium button-text</p>
<button class="button-medium button-text" data-content="click-btn" aria-label="Giant Eagle Button">Button</button>



<p style="margin: 10px 0 0 0">button-small button-primary</p>
<button class="button-small button-primary">Button</button>

<p style="margin: 10px 0 0 0">button-small button-secondary</p>
<button class="button-small button-secondary">Button</button>

<p style="margin: 10px 0 0 0">button-small button-text</p>
<button class="button-small button-text">Button</button>

<p style="margin: 10px 0 0 0">button-large button-primary button-full-width</p>
<button class="button-large button-primary button-full-width">Button</button>

<p style="margin: 10px 0 0 0">button-medium button-primary button-full-width</p>
<button class="button-medium button-primary button-full-width">Button</button>

<p style="margin: 10px 0 0 0">button-small button-primary button-full-width</p>
<button class="button-small button-primary button-full-width">Button</button>

<p style="margin: 10px 0 0 0">button-large button-secondary button-full-width</p>
<button class="button-large button-secondary button-full-width">Button</button>

<p style="margin: 10px 0 0 0">button-medium button-secondary button-full-width</p>
<button class="button-medium button-secondary button-full-width">Button</button>

<p style="margin: 10px 0 0 0">button-small button-secondary button-full-width</p>
<button class="button-small button-secondary button-full-width">Button</button>

<p style="margin: 10px 0 0 0">button-large button-text button-full-width</p>
<button class="button-large button-text button-full-width">Button</button>

<p style="margin: 10px 0 0 0">button-medium button-text button-full-width</p>
<button class="button-medium button-text button-full-width">Button</button>

<p style="margin: 10px 0 0 0">button-small button-text button-full-width</p>
<button class="button-small button-text button-full-width">Button</button>

<p style="margin: 10px 0 0 0">Add disabled to any button</p>
<button class="button-large button-primary disabled">Button</button>
<button class="button-large button-secondary disabled">Button</button>
<button class="button-large button-text disabled">Button</button>

<section class="call-to-action">
	<div class="image col-xs-12" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');"></div>

	<div class="container">

		<div class="text-box col-xs-12">
			<!--<div class="label">
              <span class="copy">Bakery</span>
            </div>-->
			<div class="text">
				<h1>Irresistable Chocolate Pecan Pie</h1>
				<p>Make your holidays a little sweeter with our traditional holiday pie recipes.</p>
				<a href="#0" class="btn btn-primary" data-content="click-cta" aria-label="Giant Eagle Button">View Recipe</a>
			</div>
		</div>

	</div>

</section>

<div class="category-feature no-padding-parent" style="background:;">
	<div class="left-image-container">
		<img class="left-image" src="/assets/toolkit/images/category-feature/left-image.png" alt="">
	</div>
	<div class="right-image-container">
		<img class="right-image" src="/assets/toolkit/images/category-feature/right-image.png" alt="">
	</div>

	<div class="heading-container ">
		<h1 class="header-sm">Lorem ipsum</h1>
		<p class="paragraph-lg">At sit bibendum eget elit elementum.</p>
	</div>

	<div class="category-container">
		<div class="category">
			<div class="category-img-container">
				<img class="category-img" src="/assets/toolkit/images/category-feature/soup3.png"></img>
			</div>
			<a href="#0" class="paragraph-lg center">Category 1</a>
		</div>
		<div class="category">
			<div class="category-img-container">
				<img class="category-img" src="/assets/toolkit/images/category-feature/kale.png"></img>
			</div>
			<a href="#0" class="paragraph-lg center">Category 2</a>
		</div>
		<div class="category">
			<div class="category-img-container">
				<img class="category-img" src="/assets/toolkit/images/category-feature/potatoes.png"></img>
			</div>
			<a href="#0" class="paragraph-lg center">Category 3</a>
		</div>

		<div class="category">
			<div class="category-img-container">
				<img class="category-img" src="/assets/toolkit/images/category-feature/soup2.png"></img>
			</div>
			<a href="#0" class="paragraph-lg center">Category 4</a>
		</div>

	</div>


</div>

<div class="location icon icon-location change-store-section"><a href="#0" tab-index="0" class="location-name">Shaler Giant Eagle</a>
	<a href="#0" tab-index="0" class="change-store btn-change" data-content="click-btn" aria-label="Giant Eagle Change Store Button">Change Store</a>
</div>

<div class="center small">*Disclaimer - This is html/css styles only, does not function yet</div>
<!--Dont include this, for styleguide purposes only-->

<section>
	<div class="circle-image-links">
		<h3 class="center">Categories</h3>
		<!--Should be able to set name in CMS-->
		<a href="#0" class="center shop-link">Shop All<i class="icono-arrow1-right"></i></a>
		<div class="row justify-content-center">
			<!--Start row of Circle Inmages-->
			<!--Start one circle image Nav-->
			<div class="col-md-ci col-xs-ci">
				<div class="one-circle-image">
					<a href="www.google.com" data-content="click-circleimage" tabindex="0">
						<div class="circleimg"><img src="/assets/toolkit/images/halloweenhouse.jpeg" alt="Circle Image Category" class="img" /></div>
						<div class="circleimagetext">Halloween Category of DOOOOOM of Doom</div>
					</a>
				</div>
			</div>
			<!--END one circle image Nav-->
			<div class="col-md-ci col-xs-ci">
				<div class="one-circle-image">
					<a href="www.google.com" data-content="click-circleimage" tabindex="0">
						<div class="circleimg"><img src="/assets/toolkit/images/pumpkin-circle-2.jpeg" alt="Circle Image Category" class="img" /></div>
						<div class="circleimagetext">Pumpkin Mischeif and Mayhem</div>
					</a>
				</div>
			</div>
			<div class="col-md-ci col-xs-ci">
				<div class="one-circle-image">
					<a href="#" data-content="click-circleimage" tabindex="0">
						<div class="circleimg"><img src="/assets/toolkit/images/cupcake.jpeg" alt="Circle Image Category" class="img" /></div>
						<div class="circleimagetext">Cupcakes</div>
					</a>
				</div>
			</div>
			<div class="col-md-ci col-xs-ci">
				<div class="one-circle-image">
					<a href="#" data-content="click-circleimage" tabindex="0">
						<div class="circleimg"><img src="/assets/toolkit/images/halloweenhouse.jpeg" alt="Circle Image Category" class="img" /></div>
						<div class="circleimagetext">Halloween Category of DOOOOOM Three</div>
					</a>
				</div>
			</div>
			<div class="col-md-ci col-xs-ci">
				<div class="one-circle-image">
					<a href="#" data-content="click-circleimage" tabindex="0">
						<div class="circleimg"><img src="/assets/toolkit/images/pumpkin-circle-2.jpeg" alt="Circle Image Category" class="img" /></div>
						<div class="circleimagetext">Pumpkin</div>
					</a>
				</div>
			</div>
			<div class="col-md-ci col-xs-ci">
				<div class="one-circle-image">
					<a href="#" data-content="click-circleimage" tabindex="0">
						<div class="circleimg"><img src="/assets/toolkit/images/cupcake.jpeg" alt="Circle Image Category" class="img" /></div>
						<div class="circleimagetext">Cupcakes</div>
					</a>
				</div>
			</div>
			<div class="col-md-ci col-xs-ci">
				<div class="one-circle-image">
					<a href="#" data-content="click-circleimage" tabindex="0">
						<div class="circleimg"><img src="/assets/toolkit/images/halloweenhouse.jpeg" alt="Circle Image Category" class="img" /></div>
						<div class="circleimagetext">Halloween Category of DOOOOOM</div>
					</a>
				</div>
			</div>



			<!--Start View All -->

			<div class="col-md-ci col-xs-ci inline">
				<div class="one-circle-image">
					<a href="#" data-content="click-circleimage" tabindex="0">
						<div class="circleimg viewall"><img src="/assets/toolkit/images/view-all-circle.png" alt="Circle Image Category" class="img" /></div>
						<div class="circleimagetext">View All</div>
					</a>
				</div>
			</div>

			<!--End View All-->

		</div>
	</div>
</section>

<section class="dashboard">

	<div class="dashboard-card">
		<div class="dashboard-card-left">
			<div class="dashboard-text">
				<h4 class="title">Weekly Ad</h4>
				<p class="subtitle">
				<p class="js-date subtitle" data-start="thursday"></p>
				</p>
			</div>
		</div>
		<div class="dashboard-card-right">
			<div class="dashboard-icon">
				<span class="icon icon-Weekly-Ad"></span>
			</div>
		</div>
		<div class="bottom-border"></div>
		<a href="#0" class="dashboard-link" data-content="click-dashboard"><span class="sr-only">link</span></a>
	</div>

	<!-- <div class="dashboard-card">
        <div class="dashboard-card-left">
            <div class="dashboard-text">
                <h4 class="title">Shop Groceries</h4>
                <p class="subtitle">Shop groceries...</p>
            </div>
        </div>
        <div class="dashboard-card-right">
            <div class="dashboard-icon">
                <span class="icon icon-Curbside-G"></span>
                
            </div>
        </div>
        <div class="bottom-border"></div>
        <a href="#0" class="dashboard-link" data-content="click-dashboard"><span class="sr-only">link</span></a>
    </div> -->

	<div class="dashboard-card">
		<div class="dashboard-card-left">
			<div class="dashboard-text">
				<h4 class="title">Digital Coupons</h4>
				<p class="subtitle">Clip the latest deals.</p>
			</div>
		</div>
		<div class="dashboard-card-right">
			<div class="dashboard-icon">
				<span class="icon icon-eCoupons"></span>

			</div>
		</div>
		<div class="bottom-border"></div>
		<a href="#0" class="dashboard-link" data-content="click-dashboard"><span class="sr-only">link</span></a>
	</div>

	<div class="dashboard-card perks">
		<div class="dashboard-card-left">
			<div class="dashboard-text">
				<h4 class="title">myPerks</h4>
				<!-- <h4 class="title">fuelperks+</h4> -->
				<p class="subtitle">View your perks info.</p>
			</div>
		</div>
		<div class="dashboard-card-right perks">
			<div class="dashboard-icon">
				<!-- <span class="icon icon-eCoupons"></span> -->
				<span class="number avant-garde">1000</span>
				<span class="perks">perks</span>
				<hr>
				<span class="perks-reward">$2 reward</span>
				<!-- <span class="perks-reward">$0.20 or 4% reward</span> -->
			</div>
		</div>
		<div class="bottom-border"></div>
		<a href="#0" class="dashboard-link" data-content="click-dashboard"><span class="sr-only">link</span></a>
	</div>

</section>


<section class="dashboard four-up">

	<div class="dashboard-card">
		<div class="dashboard-card-left">
			<div class="dashboard-text">
				<h4 class="title">Pharmacy</h4>
				<!-- <p class="subtitle">View your perks info.</p> -->
			</div>
		</div>
		<div class="dashboard-card-right">
			<div class="dashboard-icon">
				<span class="icon icon-pharmacy2"></span>
			</div>
		</div>
		<div class="bottom-border"></div>
		<a href="#0" class="dashboard-link" data-content="click-dashboard"><span class="sr-only">link</span></a>
	</div>

	<div class="dashboard-card">
		<div class="dashboard-card-left">
			<div class="dashboard-text">
				<h4 class="title">Gift Cards</h4>
				<!-- <p class="subtitle">View your perks info.</p> -->
			</div>
		</div>
		<div class="dashboard-card-right">
			<div class="dashboard-icon">
				<i class="far fa-gift-card"></i>
			</div>
		</div>
		<div class="bottom-border"></div>
		<a href="#0" class="dashboard-link" data-content="click-dashboard"><span class="sr-only">link</span></a>
	</div>

	<div class="dashboard-card">
		<div class="dashboard-card-left">
			<div class="dashboard-text">
				<h4 class="title">Cakes</h4>
				<!-- <p class="subtitle">View your perks info.</p> -->
			</div>
		</div>
		<div class="dashboard-card-right">
			<div class="dashboard-icon">
				<i class="far fa-birthday-cake"></i>
			</div>
		</div>
		<div class="bottom-border"></div>
		<a href="#0" class="dashboard-link" data-content="click-dashboard"><span class="sr-only">link</span></a>
	</div>

	<div class="dashboard-card">
		<div class="dashboard-card-left">
			<div class="dashboard-text">
				<h4 class="title">Catering</h4>
				<!-- <p class="subtitle">View your perks info.</p> -->
			</div>
		</div>
		<div class="dashboard-card-right">
			<div class="dashboard-icon">
				<i class="fas fa-utensils"></i>
			</div>
		</div>
		<div class="bottom-border"></div>
		<a href="#0" class="dashboard-link" data-content="click-dashboard"><span class="sr-only">link</span></a>
	</div>

</section>

<section class="dashboard four-up">
	<div class="dashboard-card">
		<div class="dashboard-card-left">
			<div class="dashboard-text">
				<h4 class="title">Shop Groceries</h4>
				<p class="subtitle">Shop groceries...</p>
			</div>
		</div>
		<div class="dashboard-card-right">
			<div class="dashboard-icon">
				<span class="icon icon-Curbside-G"></span>

			</div>
		</div>
		<div class="bottom-border"></div>
		<a href="#0" class="dashboard-link" data-content="click-dashboard"><span class="sr-only">link</span></a>
	</div>

	<div class="dashboard-card">
		<div class="dashboard-card-left">
			<div class="dashboard-text">
				<!-- <h4 class="title">Catering</h4> -->
				<p class="subtitle"><strong>Link your Advantage Card </strong>to view your perks info.</p>
			</div>
		</div>
		<div class="dashboard-card-right">
			<div class="dashboard-icon">
				<span class="icon icon-myPerks-filled"></span>
			</div>
		</div>
		<div class="bottom-border"></div>
		<a href="#0" class="dashboard-link" data-content="click-dashboard"><span class="sr-only">link</span></a>
	</div>

	<div class="dashboard-card">
		<div class="dashboard-card-left">
			<div class="dashboard-text">
				<!-- <h4 class="title">Catering</h4> -->
				<p class="subtitle"><strong>Sign in to your Giant Eagle account </strong>to view your perks info.</p>
				<a href="#0" class="dashboard-link" data-content="click-dashboard"><span class="sr-only">link</span></a>

			</div>
		</div>
		<div class="dashboard-card-right">
			<div class="dashboard-icon">
				<span class="icon icon-myPerks-filled"></span>
			</div>
		</div>
		<div class="bottom-border"></div>
		<!-- <a href="#0" class="dashboard-link" data-content="click-dashboard"><span class="sr-only">link</span></a> -->
	</div>

	<div class="dashboard-card perks">
		<div class="dashboard-card-left">
			<div class="dashboard-text">
				<!-- <h4 class="title">myPerks</h4> -->
				<h4 class="title">fuelperks+</h4>
				<p class="subtitle">View your perks info.</p>
			</div>
		</div>
		<div class="dashboard-card-right perks">
			<div class="dashboard-icon">
				<!-- <span class="icon icon-eCoupons"></span> -->
				<span class="number avant-garde">100</span>
				<span class="perks">perks</span>
				<hr>
				<!-- <span class="perks-reward">$2 reward</span> -->
				<span class="perks-reward">.20¢ or 4% off</span>
			</div>
		</div>
		<div class="bottom-border"></div>
		<a href="#0" class="dashboard-link" data-content="click-dashboard"><span class="sr-only">link</span></a>
	</div>

</section>

<!-- ********* Below is for styleguide display only  ********** -->
<span style="display:">
	<button id="eAdvantageBtn" class="button-primary button-large">Change Layout Class</button>

	<script>
		document.querySelector('#eAdvantageBtn').addEventListener('click', function() {
			var eAdvantage = document.querySelector('.eadvantage');
			var button = document.querySelector('[data-content="click-create-account"]');
			if (eAdvantage.classList.contains('page-layout')) {
				eAdvantage.classList.remove('page-layout');
				eAdvantage.classList.add('card-layout');
				button.classList.remove('button-secondary');
				button.classList.add('button-text');
			} else {
				eAdvantage.classList.add('page-layout');
				eAdvantage.classList.remove('card-layout');
				button.classList.remove('button-text');
				button.classList.add('button-secondary');
			}
		})
	</script>
	<hr>
</span>
<!-- ********* Above is for styleguide display only  ********** -->


<div class="eadvantage page-layout">

	<div class="image-container">
		<header>
			<span class="pointer">
				<h2 class="title">eadvantage</h2>
			</span>

			<span class="subtitle">Offer of the Week</span>
		</header>
		<div class="image">
			<img class="img-responsive" src="../../assets/toolkit/images/eadvantage-sample.png" alt="OatMilk">
		</div>
	</div>
	<div class="eadvantage-body">
		<h3 class="title">FREE</h3>
		<p class="text-1">52oz, Original or Vanilla. Select varieties.</p>
		<p class="text-2">Redeem online or in-store with your Giant Eagle Advantage Card. Limit 1.</p>
		<div class="tag gray-tag inline">Expires 2/20</div>
		<div class="create-account-btn">
			<!-- Logged out user  -->
			<a href="#0" class="button-large button-secondary " data-content="click-create-account">Create an Account</a>
			<!-- Logged in user -->
			<!-- <span class="green clipped">
                <i class="far fa-check"></i> Clipped
            </span> -->
		</div>

	</div>


</div>

<div class="ecoupon-feed ecoupon-feed-v4 container">
	<!--Start Row with title and view all-->
	<div class="row">
		<div class="category-header">eCoupons Single Row</div>


		<div class="right-link">
			<a href="#" data-content="click-allrecipes" aria-label="Giant Eagle Button" class="red">View All&nbsp;&nbsp;<i class="fal fa-angle-right"></i></a>
		</div>


	</div>


	<div class="center">

		<div class="ecoupon-feed">
			<div class="row">
				<!--Rakesh had to wrap row around all the ecoupon cards and bookend-->
				<!-- Begin One eCoupon-->
				<div class="col-lg-20 col-sm-4 col-xs-6">
					<section class="ecoupon-card inline drop-shadow">

						<div class="ecoupon-img">
							<img src="/assets/toolkit/images/3-pt-Hershey-Reeses.jpg" alt="ecoupon Image" class="image">
						</div>

						<div class="copy">
							<div class="ecoupon-price">Save $5.00</div>
							<div class="ecoupon-description">Huggies® Snug & Dry 48 to 180 ct., Little Movers 42 to 68 ct. or OverNites 42 to 50 ct.</div>
							<div class="tag blue-tag"><i class="fas fa-clone"></i>&nbsp;Redeem 5x</div>
							<div class="expires">Expires 4/2</div>
						</div>
						<!--Begin Clip Coupon Button-->
						<a href="#" tab-index="0" data-content="click-clip" aria-label="Coupon Clip">
							<div class="ecoupon-button clip" style="display:block">
								<span class="button-copy">
									<i class="fas fa-cut"></i>&nbsp;Clip Coupon
								</span>
							</div>
						</a>
						<!--END Clip Coupon Button-->

					</section>
				</div>
				<!-- END One eCoupon-->
				<div class="col-lg-20 col-sm-4 col-xs-6">

					<section class="ecoupon-card inline">
						<div class="ecoupon-img">
							<img src="/assets/toolkit/images/1-pt-jimmy-dean.jpg" alt="ecoupon Image" class="image">
						</div>
						<div class="copy">
							<div class="ecoupon-price">Save $5.00</div>
							<div class="ecoupon-description">Description of said ecoupon shenanigans</div>
							<div class="tag orange-tag">2 days left</div>
							<div class="tag blue-tag">Must buy 2</div>
						</div>
						<!--Begin Clipping Button-->
						<a href="#" tab-index="0" data-content="click-clipping" aria-label="Coupon Clipping">
							<div class="ecoupon-button clipping" style="display:block">
								<span class="button-copy">
									<i class="far fa-spinner fa-pulse"></i> Clipping...
								</span>
							</div>
						</a>
						<!--END Clipping Button-->
					</section>
				</div>
				<div class="col-lg-20 col-sm-4 col-xs-6">
					<section class="ecoupon-card inline">
						<!--On Sale Tag-->
						<div class="label center display-none">
							<span class="copy">ON SALE</span>
						</div>
						<!--END on sale tag-->
						<div class="ecoupon-img">
							<img src="/assets/toolkit/images/3-pt-Heinz-Mayo.jpg" alt="ecoupon Image" class="image">
						</div>
						<div class="copy">
							<div class="ecoupon-price">Save $5.00</div>
							<div class="ecoupon-description">any ONE (1) Giant Eagle or Market District salad or chopped salad kit</div>
							<div class="tag blue-tag"><i class="fas fa-clone"></i>&nbsp;Redeem 5x</div>
							<div class="expires">Expires 4/2</div>
						</div>
						<!--Begin ClippedButton-->
						<div class="ecoupon-button clipped" aria-label="Coupon Clipped">
							<span class="button-copy" style="display:block">
								<span class="green">
									<i class="far fa-check"></i> Clipped
								</span>
							</span>
						</div>
						<!--END Clipped Button-->

					</section>
				</div>
				<div class="col-lg-20 col-sm-4 col-xs-6">
					<section class="ecoupon-card inline expired-opacity">
						<div class="ecoupon-img">
							<img src="/assets/toolkit/images/3-pt-Hershey-Reeses.jpg" alt="ecoupon Image" class="image">
						</div>
						<div class="copy">
							<div class="ecoupon-price">Save $5.00</div>
							<div class="ecoupon-description">Description of said ecoupon shenanigans</div>
							<div class="tag orange-tag">0 days left</div>
							<div class="tag blue-tag">Must buy 2</div>
						</div>
						<!--Begin Expired Button-->
						<div class="ecoupon-button expired" style="display:block" aria-label="Coupon Expired">
							<span class="button-copy">
								<i class="far fa-stopwatch"></i> Expired
							</span>
						</div>
						<!--END Expired Button-->
					</section>

				</div>


				<!--Begin Error Message eCoupon-->
				<div class="col-lg-20 col-sm-4 col-xs-6">
					<section class="ecoupon-card inline error drop-shadow">
						<!-- Begin Error Message-->
						<div class="error-message">
							<i class="fas fa-exclamation-triangle"></i> Error clipping coupon please try again.
						</div>
						<!-- END Error MEssage-->
						<div class="ecoupon-img">
							<img src="/assets/toolkit/images/1-pt-jimmy-dean.jpg" alt="ecoupon Image" class="image">
						</div>
						<div class="copy">
							<div class="ecoupon-price">Save $5.00</div>
							<div class="ecoupon-description">Description of said ecoupon shenanigans</div>
							<div class="tag orange-tag">2 days left</div>
							<div class="tag blue-tag">Must buy 2</div>
						</div>
						<a href="#" tab-index="0" data-content="click-clipping" aria-label="Clip Coupon">
							<div class="ecoupon-button clip">
								<span class="button-copy">
									<i class="fas fa-cut"></i>&nbsp;Clip Coupon
								</span>
							</div>
						</a>
					</section>

				</div>
				<!--END Error Message eCoupon-->




			</div>
			<!--End Row-->
		</div>
	</div>

</div>

<div id="GCBalance1" class="gc-balance-container">
	<div class="visible-area">
		<p class="center">Accepted gift cards:</p>
		<div class="logo-container">
			<img class="ge-logo" src="../../assets/toolkit/images/GE_Stacked_Red_PMS.svg" alt="Giant Eagle">
			<img class="md-logo" src="../../assets/toolkit/images/MD-logo.svg" alt="Market District">
			<img class="gg-logo" src="../../assets/toolkit/images/gg-cafe.svg" alt="GetGo">
			<img class="wetgo-logo" src="../../assets/toolkit/images/WetGo.svg" alt="WetGo">
		</div>
		<!-- <p class="card-error"><i class="icon fas fa-times-circle"></i>Card could not be found. Check information and try again.</p> -->

		<div class="form-container">
			<p class="card-error"><i class="icon fas fa-times-circle"></i>Card could not be found. Check information and try again.</p>
			<div class="animated-input-container">
				<input class="animated-input with-mask" type="tel" name="CardNumber" value="" autocomplete="card-number" id="CardNumber" maxlength="23">
				<div class="animated-label">
					<label for="CardNumber">Card Number</label>
				</div>
				<span class="input-mask hidden"><span class="mask-space"></span><span class="mask-text">XXXX XXXX XXXX XXXX XXX</span></span>

				<p id="cardHelper" class="input-helper-text margin-right">Find the card number on the back of your gift card.</p>
				<p id="cardError" class="input-helper-text margin-right error">Card number must be 19 digits. Check and try again.</p>
				<span class="num-indicator">0/19</span>

			</div>

			<div class="animated-input-container">
				<input class="animated-input with-mask" type="password" name="pin" value="" id="PIN" autocomplete="gc-pin" required maxlength="8" />
				<span class="hide-reveal-icon">
					<i class="far fa-eye"></i>
					<i class="far fa-eye-slash hidden"></i>
				</span>
				<div class="animated-label">
					<label for="PIN">8-digit PIN</label>
				</div>
				<span class="input-mask hidden"><span class="mask-space"></span><span class="mask-text">XXXXXXXX</span></span>

				<p id="pinHelper" class="input-helper-text">Scratch and reveal your PIN on the back of the card. </p>
				<p id="pinError" class="input-helper-text error">PIN must be 8 digits. Check and try again.</p>

			</div>
		</div>

		<button type="submit" id="checkBalance" class="button-large button-primary" data-content=”click-check-balance” data-bind="click: getBalance">Check Balance</button>

		<div class="balance-footer center">
			<hr class="footer-hr">
			<a class="red-link center" href="https://giftcards.gianteagle.com/" data-content="click-giftcard-link"> <span class="icon icon-Gift-Cards"></span>Shop Gift Cards</a>
		</div>
	</div>
</div>

<div id="GCBalance2" class="gc-balance-container hidden">
	<div class="visible-area fade">
		<div class="load-balance">
			<span class="spinner"></span>
			<p class="loading-text">One moment while we retrieve your balance...</p>
		</div>
	</div>
</div>

<div id="GCBalance3" class="gc-balance-container hidden">
	<div class="visible-area fade">
		<div class="retrieved-balance">
			<p class="green"><i class="icon fas fa-check-circle"></i>Balance retrieved</p>
			<p class="loading-text">Remaining balance</p>
			<h2 class="balance">$<span data-bind="text: Balance"></span></h2>
			<p class="last-four">Card# <span>&#9679;&#9679;&#9679;&#9679;</span><span data-bind="text: LastFour"></span></p>
			<button type="submit" id="checkBalance" class="button-large button-secondary" data-content=”click-new-balance” data-bind="click: reset">Check another card</button>

			<div class="balance-footer">
				<hr class="footer-hr">
				<a class="red-link center" href="https://giftcards.gianteagle.com/" data-content="click-giftcard-link"> <span class="icon icon-Gift-Cards"></span>Shop Gift Cards</a>
			</div>
		</div>
	</div>
</div>

<div class="gc-offer-card">
	<!-- Add aria-label="Open gift card offer" -->
	<div role="button" onclick="slideModalOnClick(this)" class="gc-offer-card-container" tabindex="0" data-content="click-giftcard-offer" data-trigger="modal-slide" data-target="" aria-label="Open gift card offer">
		<!-- Configurable id - should match modal id and aria-controls -->
		<div class="gc-offer-image-container">
			<img class="block-img" src="/assets/toolkit/images/gc-placeholder.jpg" alt="Gift card image"> <!-- Configurable image and alt text - same as modal image -->
		</div>
		<div class="gc-offer-text-container">
			<h1 class="gc-red-heading">Happy & Choice Gift Cards</h1> <!-- Configurable heading -->
			<h2 class="gc-main-text">Earn bonus perks for every $50 you spend on Happy & Choice Gift Cards.</h2> <!-- Configurable text -->
			<p class="valid-dates">
				Valid <span class="startingDate">10/31/2022</span>-<span class="endingDate">11/25/2022</span> <!-- Configurable starting and ending date - match modal -->
			</p>
			<div class="tag pink-tag inline">Valid In-Store Only</div> <!-- Configurable text - match modal -->
		</div>
	</div>

	<!-- Move button inside gc-offer-card-container -->
	<div class="gc-offer-button-container">
		<button class="button-primary button-large button-full-width" data-content="click-activate-offer">Activate Offer</button> <!-- add or remove hidden class -->
		<button class="button-primary button-large button-full-width disabled" data-content="click-activate-offer"><i class="far fa-spinner fa-pulse"></i> Activating Offer</button> <!-- add or remove hidden class -->
		<span class="offer-activated hidden"><i class="icon fas fa-check-circle"></i>Offer Activated</span> <!-- add or remove hidden class -->
	</div>

	<!-- Start Modal  -->
	<div class="slide-modal gc-offer-modal hidden" role="dialog" id="" tabindex="0" style="z-index:10000">
		<!-- Configurable Unique ID - match data-targe from card-->
		<!-- Add onclick="closeSlideModal(this)" to the close button -->
		<button class="close-button close-modal" tabindex="0" onclick="closeSlideModal(this)" aria-controls="" aria-label="Close Popup"></button> aria-controls should match ID

		<div class="top-section">
			<div class="image-container">
				<img src="/assets/toolkit/images/gc-placeholder.jpg" alt="Gift card image"> <!-- Configurable image and alt text -->
			</div>
			<div class="text-container">
				<h1 class="gc-modal-heading">Happy & Choice Gift Cards</h1> <!-- Configurable text -->
				<h2 class="gc-modal-main-text">Earn bonus perks for every $50 you spend on Happy & Choice Gift Cards. The rest of this space can be used up. Ideally stay within 4 lines of content.</h2> <!-- Configurable text -->
				<p class="valid-dates">
					Promotion Valid: <span class="startingDate">10/31/2022</span>-<span class="endingDate">11/25/2022</span> <!-- Configurable starting and ending date - match card-->
				</p>
				<div class="tag pink-tag inline">Valid In-Store Only</div> <!-- Configurable text - match card-->
			</div>
		</div>
		<div class="bottom-section">
			<div class="bottom-text">
				<h2 class="offer-body-heading">How to Redeem</h4> <!-- Configurable heading -->
					<p class="offer-body-text">Happy & Choice Gift Card must be activated online and purchased in store. This offer does not apply to online Happy & Choice Gift Card purchases.</p> <!-- Configurable text -->
			</div>
			<div class="bottom-text">
				<h2 class="offer-body-heading">Disclaimer</h4> <!-- Configurable heading -->
					<p class="offer-body-text">Exludes Giving and One4All Gift Cards. Happy and Choice Gift Cards are issued by Pathward, N.A., fka MetaBank, Member FDIC. No Cash or ATM access.</p> <!-- Configurable text -->
			</div>
			<div class="bottom-text">
				<h2 class="offer-body-heading">Terms and Conditions</h4> <!-- Configurable heading -->
					<p class="offer-body-text">Exludes Giving and One4All Gift Cards.</p> <!-- Configurable text -->
			</div>
		</div>
		<div class="footer-section">
			<button class="button-primary button-large button-full-width " data-content="click-activate-offer">Activate Offer</button> <!-- add or remove hidden class -->
			<span class="offer-activated hidden"><i class="icon fas fa-check-circle"></i>Offer Activated</span> <!-- add or remove hidden class -->
		</div>
	</div>
	<!-- End Modal -->
</div>

<div class="image-blocks no-padding-parent " style="background: ">
	<div class="block-wrapper">
		<div class="block-container two-up">
			<div class="image-container">
				<img class="block-img" src="/assets/toolkit/images/recipes/Balsamic-Glazed-Chicken-Breast.jpg"></img>
			</div>
			<div class="text-container">
				<h3 class="header-xs">Lorem ipsum dolar</h3>
				<p class="paragraph-lg">Tellus molestie nunc non blandit massa enim nec dui nunc.</p>
			</div>

			<div class="button-container">
				<a class="button-medium button-secondary" href="#0" data-content="click-image-block">Button</a>
			</div>
		</div>

		<div class="block-container two-up">
			<div class="image-container">
				<img class="block-img" src="/assets/toolkit/images/recipes/Portabella-Risotto.jpg"></img>
			</div>

			<div class="text-container">
				<h3 class="header-xs">Lorem ipsum dolar</h3>
				<p class="paragraph-lg">Tellus molestie nunc non blandit massa enim nec dui nunc. Tellus molestie nunc non blandit massa enim nec dui nunc.</p>
			</div>

			<div class="button-container">
				<a class="button-medium button-primary" href="#0" data-content="click-image-block">Button</a>
			</div>
		</div>
	</div>

</div>

<strong> Image Size: </strong>
2400px x 1264px
<br /><br />

<section id="main-content" class="interior-hero container">
	<div class="interior-hero-image" style="background-image: url('/assets/toolkit/images/interior-hero.png');">
	</div>

	<div class="text-box">
		<span class="sub-title">Our Brands</span>
		<h1>Quality Brands From a Name You Trust.</h1>
		<p>At Giant Eagle, we believe customers deserve the best. That’s why we put the best into our family of brands. With over 10,000 Giant Eagle products, you’ll get brand name quality at prices you can afford.</p>
	</div>
</section>

<!--Begin Weekly Meal Plan Section -->
<section class="meal-plan recipe-search">
	<div class="category-header"><i class="far fa-calendar-alt"></i>Weekly Meal Plan - Apr 2</div>
	<div class="filter-options-recipe center">
		<div class="scroll-recipe">
			<div class="row ml0">
				<div class="col-lg-20 col-sm-20 col-xs-20">
					<!--Begin one card -->
					<div class="card card-component featured-recipe">
						<a href="https://www.google.com" tabindex="0" class="focus-ada" data-content="click-recipecard" aria-label="Recipe H3 Name needs pulled in here">
							<div class="image card-img-top" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');">
							</div>
							<div class="card-body text-box">
								<h3 class="card-title">Marinated Barbeque Pork Ribs with extra BBQ sauce and yummy yummy yummy yumyy</h3>
							</div>
						</a>
					</div>
					<!--END one card -->
				</div>
				<div class="col-lg-20 col-sm-20 col-xs-20">
					<div class="card card-component featured-recipe">
						<a href="https://sitecoregeuat.gianteagle.com/" tabindex="0" class="focus-ada" data-content="click-recipecard" aria-label="Recipe H3 Name needs pulled in here">
							<div class="image card-img-top" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');">
							</div>
							<div class="card-body text-box">
								<h3 class="card-title">Barbeque Pork Ribs with extra BBQ sauce and yummy yummy yummy yumyy</h3>
							</div>
						</a>
					</div>
				</div>
				<div class="col-lg-20 col-sm-20 col-xs-20">
					<div class="card card-component featured-recipe">
						<a href="https://www.google.com" tabindex="0" class="focus-ada" data-content="click-recipecard" aria-label="Recipe H3 Name needs pulled in here">
							<div class="image card-img-top" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');">
							</div>
							<div class="card-body text-box">
								<h3 class="card-title">Pie with more Pie</h3>
							</div>
						</a>
					</div>
				</div>
				<div class="col-lg-20 col-sm-20 col-xs-20">
					<div class="card card-component featured-recipe">
						<a href="https://sitecoregeuat.gianteagle.com/" tabindex="0" class="focus-ada" data-content="click-recipecard" aria-label="Recipe H3 Name needs pulled in here">
							<div class="image card-img-top" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');">
							</div>
							<div class="card-body text-box">
								<h3 class="card-title">Mac N Cheese</h3>
							</div>
						</a>
					</div>
				</div>
				<div class="col-lg-20 col-sm-20 col-xs-20">
					<div class="card card-component featured-recipe">
						<a href="https://www.google.com" tabindex="0" class="focus-ada" data-content="click-recipecard" aria-label="Recipe H3 Name needs pulled in here">
							<div class="image card-img-top" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');">
							</div>
							<div class="card-body text-box">
								<h3 class="card-title">Salads and salads</h3>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="print-shop-btns">
		<a href="https://www.gianteagle.com/-/media/Files/Weekly-Meal-Plan/Giant-Eagle-Weekly-Meal-Plan-2-21-19" class="underline" data-content="click-printrecipe" aria-label="Print Recipe">Print Meal Plan</a>&nbsp;&nbsp;<br class="hide-desktop" />
		<a href="https://bit.ly/2Q3jnGX" class="btn btn-primary" data-content="click-btnshopwmp" aria-label="Shop Meal Plan"><span class="icon icon-cart"></span>Shop Meal Plan</a>
	</div>
</section>
<!--END Weekly Meal Plan Section -->

<div class="my-perks-banner white">
	<div class="container">

		<!--<div class="row pad30 toprow">
            <div class="col-xs-12 col-sm-5">

                  <img class="img image my-perks-logo" src="/assets/toolkit/images/my-perks/myPerks-00-Logo.png" alt="my perks logo">

                /assets/toolkit/images/my-perks/myPerks-00-Logo.png , ~/media/629687F85DDF463B9C84B9212EE6E0CE.ashx

            </div>
            <div class="col-xs-12 col-sm-7">

                <div class="large-text white paddd">Join myPerks and get exclusive pricing, offers and rewards on gas and groceries.</div>
                <a href="https://www.gianteagle.deals/myperks/switch" class="button-large button-primary" data-content="click-btn" aria-label="Giant Eagle Button">Enroll Now</a>

            </div>
          </div>-->
		<!--End row-->


		<div class="pad30 toprow toprowcenter">
			<div class="col-xs-12 col-sm-12">

				<div class="logo-container">
					<img class="img image my-perks-logo" src="/assets/toolkit/images/my-perks/myPerks-00-Logo.png" alt="my perks logo">
				</div>

				<!--/assets/toolkit/images/my-perks/myPerks-00-Logo.png , ~/media/629687F85DDF463B9C84B9212EE6E0CE.ashx-->
			</div>
			<div class="col-xs-12 col-sm-12">

				<div class="large-text white">Join myPerks and get exclusive pricing, for groceries and meats. Max 3 Lines Copy Here</div>
				<a href="https://www.gianteagle.deals/myperks/switch" class="button-large button-primary" data-content="click-btn" aria-label="Giant Eagle Button">Enroll myPerks Now</a>

			</div>
		</div>
		<!--End row-->



		<div class="row cta center d-flex justify-content-around pad30  feature-row">
			<div class="col-xs-12 col-sm-4">
				<div class="img image">
					<img class="img image ctaimg" src="/assets/toolkit/images/my-perks/myPerks-01-Icon.png" alt="Everyday Savings">

					<!--/assets/toolkit/images/my-perks/myPerks-01-Icon.png , ~/media/C6BB421CF1E742E895198DA6A806F121.ashx-->
				</div>
				<div class="medium-text white">Everyday Savings</div>
				<div class="copy white">Log in online or scan your Advantage Card in-store to enjoy new lower prices.</div>
			</div>
			<div class="col-xs-12 col-sm-4">
				<div class="img image">
					<img class="img image ctaimg" src="/assets/toolkit/images/my-perks/myPerks-02-Icon.png" alt="10&cents; Off Per Gallon">

					<!--  /assets/toolkit/images/my-perks/myPerks-02-Icon.png , ~/media/4374055890BA4A52907C18470B365A0D.ashx -->
				</div>
				<div class="medium-text white">10&cent Off Per Gallon</div>
				<div class="copy white">Switch and save 10 cents off for 30 days and Pro for 60 days.*<br /><strong class="small">*Offer valid through 7/31/22, view full <a href="https://www.gianteagle.deals/myperks/switch" class="underline white">promo details.</a></strong></div>
			</div>
			<div class="col-xs-12 col-sm-4">
				<div class="img image">
					<img class="img image ctaimg" src="/assets/toolkit/images/my-perks/myPerks-03-Icon.png" alt="Get Rewarded">

					<!-- /assets/toolkit/images/my-perks/myPerks-03-Icon.png , ~/media/E4C0CDC1FD92431F83A25B52FE74B70B.ashx-->
				</div>
				<div class="medium-text white">Get Rewarded</div>
				<div class="copy white">More perks means more dollars off groceries & gas.</div>
			</div>
		</div>
		<!--End row-->

		<div class="row justify-content-center">
			<div class="col-xs-12 col-sm-12">
				<img class="img image" src="/assets/toolkit/images/my-perks/myPerks-04-Image.png" alt="Grocery Cart Grocery Bag Gift Card Getgo Food Car Fuel Pumps">


				<!-- /assets/toolkit/images/my-perks/myPerks-04-Image.png , ~/media/542801B5B82A4DDE830BD5AC3FAF9CD5.ashx -->
			</div>
		</div>
		<!--End row-->



	</div>
	<!--End container-->
</div>
<!--End Banner-->

<div class="dropdown-input">

	<div class="dropdown-btn-container" role="button" tabindex="0" aria-dropdown="true" aria-controls="searchDropdown">
		<span class="icon icon-caret-down"></span> <span data-dropdown-label="true">Products</span>
	</div>

	<div id="searchDropdown" class="dropdown-container hidden" data-collapsed="true">
		<div class="dropdown-content">
			<span class="bold">
				Search...
			</span>
			<label for="ProductsRadio" class="checked" tabindex="0" data-content="click-search-products">
				<input type="radio" id="ProductsRadio" value="Products" name="search-radio" checked>
				Products
			</label>
			<label for="RecipesRadio" tabindex="0" data-content="click-search-recipes">
				<input type="radio" id="RecipesRadio" value="Recipes" name="search-radio">
				Recipes
			</label>
			<label for="GiftCardsRadio" tabindex="0" data-content="click-search-giftcards">
				<input type="radio" id="GiftCardsRadio" value="Gift Cards" name="search-radio">
				Gift Cards
			</label>
			<label for="ArticlesRadio" tabindex="0" data-content="click-search-articles">
				<input type="radio" id="ArticlesRadio" value="Articles" name="search-radio">
				Articles
			</label>
		</div>
	</div>

	<div class="animated-input-container">
		<input class="animated-input" type="text" name="search" value="" placeholder="Search Products" autocomplete="search" id="search">
		<div class="input-button">
			<a aria-label="Search Button" href="#0" data-content="click-search"><span class="icon-search"></span></a>
		</div>
		<div class="animated-label sr-only">
			<label for="search">Search <span data-dropdown-label="true">Products</span></label>
		</div>
		<div id="deleteSearch" class="close-button close-button-search hidden" role="button" aria-label="Delete Text">
		</div>
	</div>

</div>

<header class="header-v3">
	<!-- <section class="nav-row" style="background: url('../../assets/toolkit/images/nav-1700w@2x.jpg') 20% 50% / cover rgb(255, 255, 255);"> -->
	<section class="nav-row" style="background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(251, 251, 251, 0.932) 320px, rgba(251, 251, 251, 0.671) 360px, rgba(255, 255, 255, 0) 400px),url('../../assets/toolkit/images/nav-1700w@2x.jpg') 20% 50% / cover rgb(255, 255, 255);">

		<div class="nav-logo">
			<a href="#0" tabindex="0" aria-label="Giant Eagle Home">
				<img class="main-logo" src="../../assets/toolkit/images/GE_Stacked_Red_PMS.svg" alt="Giant Eagel">
			</a>
		</div>

		<div class="nav-store">
			<p class="store-title">West Patrick Streetlksjdflksjdflkjsd</p>
			<button id="store-menu" class="button-small button-text store-menu slide-control" role="button" tabindex="0" aria-label="Find A Store" aria-expanded="false" aria-controls="storeMenu" data-slide="slide-right" data-origin="left-primary-menu-drawer">View Store</button>
		</div>

		<!-- Logged In -->
		<div id="account" class="nav-user slide-control" role="button" tabindex="0" aria-label="User Menu" aria-expanded="false" aria-controls="userInfo" data-slide="slide-left" data-origin="right-primary-menu-drawer">
			<span class="icon icon-user-circle"></span>
			<div class="nav-user-info">
				<span id="userName" class="nav-name">Shawn</span>

			</div>
		</div>

		<!-- Logged Out -->
		<!-- <div id="account" class="nav-user slide-control nav-icon-container" role="button" tabindex="0"
            aria-label="User Menu" aria-expanded="false" aria-controls="loggedOut" data-slide="slide-left"
            data-origin="right-primary-menu-drawer">
            <i class="icon far fa-user-circle"></i>
            <div class="nav-user-info">
                <span id="userName" class="nav-name">Sign In</span>
            </div>
        </div> -->

	</section>

	<section class="nav-row">
		<!-- Hamburger Menu -->
		<div id="hamburger-menu" class="header-hamburger-menu slide-control" role="button" tabindex="0" aria-label="Main Menu" aria-expanded="false" aria-controls="mainMenu" data-slide="slide-right" data-origin="left-primary-menu-drawer">
			<span class="icon icon-bars"></span>
			<div class="nav-label-container">
				<p class="nav-label">Menu</p>
			</div>
		</div>

		<!-- Search Input -->
		<!-- <div class="animated-input-container">
            <input class="animated-input" type="text" name="search" value="" autocomplete="search" id="search" />
            <div class="input-button">
                <a href="#0" role="button" aria-label="Search Button"><span class="icon-search"></span></a>
            </div>

            <div class="animated-label">
                <label for="search">Search</label>
            </div>

            <div id="deleteSearch" class="close-button close-button-search hidden" role="button"
                aria-label="Delete Text">
            </div>
        </div> -->

		<div class="dropdown-input">

			<div class="dropdown-btn-container" role="button" tabindex="0" aria-dropdown="true" aria-controls="searchDropdown">
				<span class="icon icon-caret-down"></span> <span data-dropdown-label="true">Products</span>
			</div>

			<div id="searchDropdown" class="dropdown-container hidden" data-collapsed="true">
				<div class="dropdown-content">
					<span class="bold">
						Search...
					</span>
					<label for="ProductsRadio" class="checked" tabindex="0" data-content="click-search-products">
						<input type="radio" id="ProductsRadio" value="Products" name="search-radio" checked>
						Products
					</label>
					<label for="RecipesRadio" tabindex="0" data-content="click-search-recipes">
						<input type="radio" id="RecipesRadio" value="Recipes" name="search-radio">
						Recipes
					</label>
					<label for="GiftCardsRadio" tabindex="0" data-content="click-search-giftcards">
						<input type="radio" id="GiftCardsRadio" value="Gift Cards" name="search-radio">
						Gift Cards
					</label>
					<label for="ArticlesRadio" tabindex="0" data-content="click-search-articles">
						<input type="radio" id="ArticlesRadio" value="Articles" name="search-radio">
						Articles
					</label>
				</div>
			</div>

			<div class="animated-input-container">
				<input class="animated-input" type="text" name="search" value="" placeholder="Search Products" autocomplete="search" id="search">
				<div class="input-button">
					<a aria-label="Search Button" href="#0" data-content="click-search"><span class="icon-search"></span></a>
				</div>
				<div class="animated-label sr-only">
					<label for="search">Search <span data-dropdown-label="true">Products</span></label>
				</div>
				<div id="deleteSearch" class="close-button close-button-search hidden" role="button" aria-label="Delete Text">
				</div>
			</div>

		</div>
		<!-- Secondary Nav -->
		<nav class="flex-container">
			<ul class="secondary-nav">
				<li class="nav-item">
					<a href="#0" data-content="click-nav">Pickup/Delivery</a>
				</li>
				<li class="nav-item">
					<a href="#0" data-content="click-nav">Pharmacy</a>
				</li>
				<li class="nav-item">
					<a href="#0" data-content="click-nav">Gift Cards</a>
				</li>
				<li class="nav-item">
					<a href="#0" data-content="click-nav">Weekly Ad</a>
				</li>
				<li class="nav-item">
					<a href="#0" data-content="click-nav">eCoupons</a>
				</li>
				<li class="nav-item">
					<a href="#0" data-content="click-nav">Shopping History</a>
				</li>
			</ul>
		</nav>

	</section>

	<div class="drawer-overlay"></div>
	<div class="slide-overlay"></div>

	<section>
		<!-- *** All Sliding Menus Inside menu-container*** -->
		<div class="menu-container">

			<!-- ** Main Menu ** -->
			<div id="mainMenu" class="sliding-menu hidden" aria-hidden="true">
				<button class="slide-menu-close-button close-button" tabindex="0" aria-controls="mainMenu" aria-expanded="true" aria-label="Close Menu">
				</button>

				<div class="drawer-container margin-top">
					<div class="drawer-section">
						<div class="drawer-link">
							<span class="icon icon-Groceries"></span>
							<a id="groceryLink" href="#0" class="secondary-slide-control link-text" data-content="click-nav" tabindex="0" aria-controls="groceryMenu" data-slide="slide-left" data-origin="secondary-menu">Grocery
							</a>
							<span class="icon icon-angle-right"></span>
						</div>
						<div class="drawer-link">
							<span class="icon icon-Pharmacy"></span>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">Pharmacy</a>
						</div>
						<div class="drawer-link">
							<span class="icon icon-Gift-Cards"></span>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">Gift Cards</a>
						</div>
						<div class="drawer-link">
							<span class="icon icon-Cakes"></span>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">Cake Ordering</a>
						</div>
						<div class="drawer-link">
							<span class="icon icon-Catering"></span>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">Catering</a>
						</div>
					</div>

					<div class="drawer-section">
						<div class="drawer-link">
							<span class="icon icon-Weekly-Ad"></span>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">Weekly Ad</a>
						</div>
						<div class="drawer-link">
							<span class="icon icon-eCoupons"></span>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">eCoupons</a>
						</div>
						<div class="drawer-link">
							<span class="icon icon-Sale"></span>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">Deals</a>
						</div>
						<div class="drawer-link">
							<span class="icon icon-Recipes"></span>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">Recipes</a>
						</div>
					</div>

					<div class="drawer-section">
						<div class="drawer-link">
							<span class="icon icon-Store-copy"></span>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">Find a store</a>
						</div>
						<div class="drawer-link">
							<i class="fal fa-question-circle"></i>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">Contact Us</a>
						</div>
					</div>

					<div class="drawer-section no-underline">
						<div class="drawer-link">
							<img class="icon-img" src="../../assets/toolkit/images/icons/get-go.svg" alt="Get Go Logo">
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">GetGo Cafe + Market</a>
						</div>
						<div class="drawer-link">
							<img class="icon-img" src="../../assets/toolkit/images/icons/market-district.svg" alt="Market District Logo">
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">Market District</a>
						</div>
						<div class="drawer-link">
							<img class="icon-img" src="../../assets/toolkit/images/icons/GE_Stacked_Grey_PMS.svg" alt="Giant Eagle Logo">
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">Giant Eagle</a>
						</div>
					</div>
				</div>
			</div>

			<!-- *** Grocery Menu *** -->
			<div id="groceryMenu" class="sliding-menu hidden" aria-hidden="true">

				<button class="slide-menu-close-button close-button" tabindex="0" aria-controls="groceryMenu" aria-expanded="true" aria-label="Close Menu">
				</button>

				<div class="menu-header">
					<button class="back-button" tabindex="0" data-content="click-nav" tabindex="0" aria-controls="mainMenu" data-slide="slide-right" data-origin="secondary-menu">
						<span class="icon icon-angle-left"></span>Menu
					</button>
					<div class="menu-heading">
						<p class="menu-title">Grocery</p>
					</div>
				</div>

				<div class="drawer-container no-margin-top">
					<div class="drawer-section padding-sm red-underline">
						<div class="drawer-item">
							<span class="icon icon-Curbside"></span>
							<a href="/in-store-services/curbside-express" class="item-text">Free Grocery Pickup!</a>
						</div>
					</div>
					<ul class="drawer-list">
						<li class="drawer-section padding-sm">
							<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
								Pantry
							</a>
						</li>
						<li class="drawer-section padding-sm">
							<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
								Produce
							</a>
						</li>
						<li class="drawer-section padding-sm">
							<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
								Meat & Seafood
							</a>
						</li>
						<li class="drawer-section padding-sm">
							<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
								Deli & Cheese
							</a>
						</li>
						<li class="drawer-section padding-sm">
							<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
								Bakery & Bread
							</a>
						</li>
						<li class="drawer-section padding-sm">
							<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
								Prepared Foods
							</a>
						</li>
						<li class="drawer-section padding-sm">
							<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
								Dairy & Eggs
							</a>
						</li>
						<li class="drawer-section padding-sm">
							<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
								Frozen
							</a>
						</li>
						<li class="drawer-section padding-sm">
							<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
								Beverages
							</a>
						</li>
						<li class="drawer-section padding-sm">
							<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
								Household
							</a>
						</li>
						<li class="drawer-section padding-sm">
							<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
								Health & Beauty
							</a>
						</li>
						<li class="drawer-section padding-sm">
							<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
								Floral
							</a>
						</li>
						<li class="drawer-section padding-sm">
							<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
								Pet
							</a>
						</li>
						<li class="drawer-section padding-sm">
							<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
								Baby
							</a>
						</li>
					</ul>
				</div>
			</div>

			<!-- **** Store Menu **** -->
			<div id="storeMenu" class="sliding-menu hidden" aria-hidden="true">
				<button class="slide-menu-close-button close-button" tabindex="0" aria-controls="storeMenu" aria-expanded="true" aria-label="Close Menu">
				</button>
				<div class="drawer-container no-margin-top">
					<div class="drawer-section">
						<!-- <p> -->
						<span class="tag gray-tag">My Store</span>
						<span class="tag curbside-tag">Curbside Express</span>
						<!-- </p> -->
						<div class="store-info">
							<p class="selected-store">Allegheny Towne Center Giant Eagle</p>
							<p class="store-address">1200 Center Ave</p>
							<p class="store-address">Pittsburgh, PA 15206</p>
							<p class="hours">Open 24 hours</p>
						</div>

						<div class="drawer-link">
							<span class="icon icon-Store-copy"></span>
							<a href="#0" id="changeStoreLink" class="secondary-slide-control link-text" data-content="click-nav" tabindex="0" aria-controls="changeStore" data-slide="slide-left" data-origin="secondary-menu">
								Change my store
							</a>
							<span class="icon icon-angle-right"></span>
						</div>
					</div>

					<div class="drawer-section">
						<div class="drawer-link">
							<i class="icon icon-directions-light"></i>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">
								Directions
							</a>
						</div>
						<a href="tel:412-437-7272" class="drawer-link" data-content="click-nav" tabindex="0">
							<i class="icon icon-Call"></i>
							<span class="link-text">412-437-7272<span class="link-subtext">Store</span></span>
						</a>

						<div class="drawer-link">
							<i class="icon icon-Curbside"></i>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">
								Curbside Pickup / Delivery
							</a>
						</div>
					</div>
					<!-- If curbside not available -->
					<div class="drawer-section">
						<p class="section-title">Curbside not available</p>
						<a href="#0" class="store-link" data-content="click-nav" tabindex="0">
							Find a Curbside store
						</a>
					</div>

					<div class="drawer-section">
						<a href="#0" class="drawer-link" data-content="click-nav" tabindex="0">
							<i class="icon icon-Pharmacy"></i>
							<span class="link-text">Pharmacy<span class="link-subtext hours">Open 24
									Hours</span></span>
						</a>
						<a href="tel:412-437-7272" class="drawer-link" data-content="click-nav" tabindex="0">
							<i class="icon icon-Call"></i>
							<span class="link-text">412-437-7272<span class="link-subtext">Pharmacy</span></span>
						</a>
					</div>

					<div class="drawer-section no-underline">
						<a href="#0" class="store-link" tabindex="0">Browse weekly ad</a>
						<a href="#0" class="store-link" tabindex="0">View store details</a>
						<!-- <a href="#0"  id="changeStore" class="store-link" tabindex="0">Change my store</a> -->
						<a href="#0" class="store-link" tabindex="0">Find a store</a>
					</div>
				</div>
			</div>

			<!-- **** Change Store Menu **** -->
			<div id="changeStore" class="sliding-menu hidden" aria-hidden="true">
				<button class="slide-menu-close-button close-button" tabindex="0" aria-controls="changeStore" aria-expanded="true" aria-label="Close Menu">
				</button>
				<div class="menu-header">
					<button class="back-button" tabindex="0" data-content="click-nav" tabindex="0" aria-controls="storeMenu" data-slide="slide-right" data-origin="secondary-menu">
						<span class="icon icon-angle-left"></span>Back
					</button>
					<div class="menu-heading">
						<p class="menu-title">Change store</p>
					</div>
				</div>

				<div class="drawer-container no-margin-top">

					<div class="drawer-section no-underline">
						<div class="store-search">
							<label for="storeSearch" class="visually-hidden">Search</label>
							<input id="storeSearch" type="text" name="search" placeholder="City, State, or Zip" aria-label="Search Input" tabindex="0">
							<a href="#0" role="button">
								<span class="icon icon-search nav-search-icon" aria-label="Search Button"></span>
							</a>
							<!-- <div id="deleteSearch" class="close-button close-button-search hidden" role="button" aria-label="Delete Text">
                                                                                                    <span class="sr-only">Delete</span>
                                                                                                </div> -->
							<div class="curbside-checkbox">
								<p>Show Only Curbside Stores</p>
								<input class="toggle-input" type="checkbox" role="button" id="switch" name="show-curbside" aria-pressed="false" />
								<label class="toggle-label" for="switch" tabindex="0">Toggle</label>
							</div>

						</div>
					</div>

					<div class="drawer-section">
						<div class="store-info">
							<p class="store-name">Verona Giant Eagle</p>
							<p class="distance">9.5 miles away</p>
							<p class="store-address no-margin-bottom dark-font">200 Allegheny River Blvd</p>
							<span class="tag gray-tag">My Store</span>
							<span class="tag curbside-tag">Curbside Express</span>
						</div>
					</div>

					<div class="drawer-section">
						<div class="store-info">
							<p class="store-name">Shadyside Giant Eagle</p>
							<p class="distance">2.7 miles away</p>
							<p class="store-address no-margin-bottom dark-font">200 Allegheny River Blvd</p>
							<span class="tag gray-tag">Curbside Not Available</span>
						</div>
						<button class="btn btn-secondary-gray" tabindex="0" aria-label="Set Shadyside Giant Eagle as my Store">Set as My Store</button>
					</div>
					<div class="drawer-section">
						<div class="store-info">
							<p class="store-name">Pen Hills Giant Eagle</p>
							<p class="distance">4.9 miles away</p>
							<p class="store-address no-margin-bottom dark-font">200 Allegheny River Blvd</p>
							<span class="tag gray-tag">Curbside Not Available</span>
						</div>
						<button class="btn btn-secondary-gray" tabindex="0" aria-label="Set Pen Hills Giant Eagle as my Store">Set as My Store</button>
					</div>
					<div class="drawer-section">
						<div class="store-info">
							<p class="store-name">Pen Hills Giant Eagle</p>
							<p class="distance">4.9 miles away</p>
							<p class="store-address no-margin-bottom dark-font">200 Allegheny River Blvd</p>
							<span class="tag curbside-tag">Curbside Express</span>
						</div>
						<button class="btn btn-secondary-gray" tabindex="0" aria-label="Set Pen Hills Giant Eagle as my Store">Set as My Store</button>
					</div>

					<div class="drawer-section no-underline">
						<a href="#0" class="load-more" tabindex="0">Show More</a>
					</div>
				</div>
			</div>

			<!-- *** User Info Menu *** -->
			<div id="userInfo" class="sliding-menu hidden" aria-hidden="true">
				<button class="slide-menu-close-button close-button" tabindex="0" aria-controls="userInfo" aria-expanded="true" aria-label="Close Menu">
				</button>
				<div class="drawer-container">
					<div class="margin-top">
						<div class="drawer-section">
							<div id="userCard" class="perks-container">
								<p class="greeting">Hi <span class="user-name">shawn</span></p>
								<p class="fuel-perks">600<span class="icon-myPerks-text"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span></p>
								<p class="points">Redeemable Perks</p>
							</div>
						</div>

						<div class="drawer-section">
							<div class="drawer-link">
								<span class="icon icon-user"></span>
								<a href="#0" class="link-text user-name" data-content="click-nav" tabindex="0">
									<span>shawn's</span> <span>Account</span>
								</a>
							</div>
							<div class="drawer-link">
								<i class="fal fa-barcode-read"></i>
								<a href="#0" id="advantage-card" class="link-text secondary-slide-control" data-content="click-nav" tabindex="0" aria-controls="advantageCard" data-slide="slide-left" data-origin="secondary-menu">
									My Advantage Card
								</a>
								<span class="icon icon-angle-right"></span>
							</div>
						</div>

						<div class="drawer-section">
							<div class="drawer-link">
								<span class="icon icon-myPerks-gray"></span>
								<a href="https://www.gianteagle.com/fuelperks-plus" class="link-text" data-content="click-nav" tabindex="0">
									My Fuelperks+
								</a>
							</div>
							<div class="drawer-link">
								<i class="fal fa-history"></i>
								<a href="#0" class="link-text" data-content="click-nav" tabindex="0">
									Shopping History
								</a>
							</div>
							<div class="drawer-link">
								<span class="icon icon-eCoupons"></span>
								<a href="#0" class="link-text" data-content="click-nav" tabindex="0">
									14 Clipped eCoupons
								</a>
							</div>
							<div class="drawer-link">
								<span class="icon icon-List"></span>
								<a href="#0" class="link-text" data-content="click-nav" tabindex="0">
									Shopping List
								</a>
							</div>
							<div class="drawer-link">
								<span class="icon icon-Pharmacy"></span>
								<a href="https://gianteagle.medrefill.com/geweb/#/refill" class="link-text" data-content="click-nav" tabindex="0">
									My Prescriptions
								</a>
							</div>
						</div>

						<a href="#0" class="sign-out" tabindex="0">Sign out</a>
					</div>
				</div>
			</div>

			<!-- *** User Info Logged Out *** -->

			<div id="loggedOut" class="sliding-menu hidden" aria-hidden="true">
				<button class="slide-menu-close-button close-button" tabindex="0" aria-controls="loggedOut" aria-expanded="true" aria-label="Close Menu">
				</button>

				<div class="drawer-container">
					<div class="drawer-section">
						<div class="drawer-link">
							<span class="icon icon-user"></span>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">
								Sign in
							</a>
						</div>
						<div class="drawer-link">
							<span class="icon icon-user"></span>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">
								Create an Account
							</a>
							<i class="fas fa-plus-circle"></i>
						</div>
					</div>

					<div class="drawer-section">
						<div class="drawer-link">
							<span class="icon icon-perks"></span>
							<a href="https://www.gianteagle.com/fuelperks-plus" class="link-text" data-content="click-nav" tabindex="0">
								My Fuelperks+
							</a>
						</div>
						<div class="drawer-link">
							<i class="fal fa-history"></i>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">
								Shopping History
							</a>
						</div>
						<div class="drawer-link">
							<span class="icon icon-eCoupons"></span>
							<a href="https://www.gianteagle.com/fuelperks-plus" class="link-text" data-content="click-nav" tabindex="0">
								Clip eCoupons
							</a>
						</div>
						<div class="drawer-link">
							<span class="icon icon-List"></span>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">
								Shopping List
							</a>
						</div>
						<div class="drawer-link">
							<span class="icon icon-Pharmacy"></span>
							<a href="https://gianteagle.medrefill.com/geweb/#/refill" class="link-text" data-content="click-nav" tabindex="0">
								My Prescriptions
							</a>
						</div>
					</div>

					<div class="center">
						<img class="register-image" src="../../assets/toolkit/images/new-account-ge.png" alt="Register Now">
						<p class="register-message">Order online, track your perks, clip eCoupons, and save more with a
							Giant Eagle
							account!</p>
						<a href="0#" class="register-link" data-content="click-nav">Register Now</a>
					</div>

				</div>
			</div>

			<!-- *** Advantage Card Menu *** -->
			<div id="advantageCard" class="sliding-menu hidden" aria-hidden="true">

				<button class="slide-menu-close-button close-button" tabindex="0" aria-controls="advantageCard" aria-expanded="true" aria-label="Close Menu">
				</button>

				<div class="menu-header no-underline">
					<button class="back-button" tabindex="0"><span class="icon icon-angle-left"></span>Back</button>
				</div>

				<div class="drawer-container no-margin-top">
					<div class="drawer-section no-underline">
						<!--Begin New No Advantage Card Section-->
						<div class="center">
							<img src="/assets/toolkit/images/no-card-img.jpg" alt="No Card Image" class="img image no-geac">
							<p class="m30 para">Connect an Advantage Card to start saving and to get access to all of the features your account has to offer!</p>
							<a href="#" class="button-large button-primary button-full-width" data-content="click-btn" aria-label="Giant Eagle Button">Link Your Card</a>
							<hr class="m30" />
							<p>Don’t have a card?</p>
							<a href="#" class="button-large button-secondary button-full-width" data-content="click-btn" aria-label="Giant Eagle Button">Get a New Advantage Card</a>
						</div>
						<!--END New No Advantage Card Section-->

						<!--commented out barcode temporarily so I can add in no card state -cp -->
						<!--<div class="center">
                            <img class="barcode" src="../../assets/toolkit/images/barcode.png" alt="Barcode">
                            <p class="account-number">4-32123-32123-6</p>
                            <p class="user-name">Shawn Williams</p>
                            <div role="button" class="exclusions-btn" tabindex="0" aria-expanded="false">
                                <span>Redemption Exlcusions</span>
                                <span class="caret icon-caret-down"></span>
                            </div>
                            <p id="exclusions" class="exclusions-text hidden" aria-hidden="true">
                                Discounts cannot be applied toward the purchases of any type of gift cards, telecom products, alcohol or tobacco
                                products (except where permitted by law), price-controlled milk products (PA only), kerosene, Visa prepaid
                                reloadable cards, any prescriptions including third party insurance or government programs such as Medicare,
                                Tricare, Medicaid or PACE, lottery tickets, postage stamps, money orders, MoneyGram®, money transfer transactions,
                                Redbox, amusement or entertainment tickets, Market District restaurant purchases, Market District Cooking School
                                classes and wine dinner tickets, copy or fax machine service, delivery charges, fundraising activities, donations,
                                returned check service fees, and other items prohibited by law. You are limited to a maximum of five redemption per
                                day and 30 redemption per calendar month.
                            </p>
                        </div>-->
					</div>
				</div>

			</div>

			<!-- *** Cart Menu *** -->
			<div id="cartInfo" class="sliding-menu hidden" aria-hidden="true">
				<button class="slide-menu-close-button close-button" tabindex="0" aria-controls="cartInfo" aria-expanded="true" aria-label="Close Menu">
				</button>

				<div class="drawer-container">
					<div class="drawer-section no-underline">

						<!-- Without Link -->
						<!-- <div class="drawer-link cart">
                            <span class="icon icon-Cart"></span>
                            <span class="link-text">Cart(0)</span>
                            <span class="cart-price">$0.00</span>
                        </div> -->

						<!-- With Link -->
						<div class="drawer-link cart">
							<span class="icon icon-Cart"></span>
							<a href="#0" class="link-text" data-content="click-nav" tabindex="0">
								Cart(0)
							</a>
							<span class="cart-price">$0.00</span>
						</div>

						<p class="cart-title">Curbside Express</p>
						<p class="cart-message">Pickup and Delivery not available at
							<strong>Allegheny Towne Center Giant Eagle</strong>
						</p>
						<!-- <a href="#0" class="cart-link slide-control" tabindex="0" aria-controls="storeMenu" aria-controls="storeMenu" data-slide="slide-down" data-origin="left-primary-menu-slide">Find a Curbside store</a> -->
						<a href="#0" class="cart-link" tabindex="0">Find a Curbside store</a>
					</div>
				</div>
			</div>

		</div>
	</section>
</header>

<div class="perks-activity no-padding-parent">

	<div class="title">
		<h2>Perks Activity</h2>
	</div>

	<div class="activity-row heading">
		<div class="date">
			<p class="heading">Date</p>
		</div>
		<div class="transaction">
			<p class="heading">Transaction</p>
		</div>
		<div class="perks">
			<p class="heading">Perks</p>
		</div>
	</div>

	<div class="perks-activity-container">


		<div class="activity-row">
			<div class="col1">
				<span class="month">Dec</span>
				<span class="day">31</span>
			</div>
			<div class="col2">
				<span class="amount">$126.15</span>
				<span class="store">Shadyside Market District Giant Eagle</span>
			</div>
			<div class="col3">
				<span class="amount">- 200</span>
			</div>
		</div>

		<div class="activity-row">
			<div class="col1">
				<span class="month">Dec</span>
				<span class="day">29</span>
			</div>
			<div class="col2">
				<span class="amount">$156</span>
				<span class="store">Shadyside Market District Giant Eagle</span>
			</div>
			<div class="col3">
				<span class="amount green">+ 165</span>
			</div>
		</div>

		<div class="activity-row">
			<div class="col1">
				<span class="month">Dec</span>
				<span class="day">25</span>
			</div>
			<div class="col2">
				<span class="amount">Bonus Perks</span>
			</div>
			<div class="col3">
				<span class="amount green">+ 95</span>
			</div>
		</div>

		<div class="activity-row">
			<div class="col1">
				<span class="month">Dec</span>
				<span class="day">19</span>
			</div>
			<div class="col2">
				<span class="amount">Expired Perks</span>
			</div>
			<div class="col3">
				<span class="amount">- 125</span>
			</div>
		</div>

		<div class="activity-row">
			<div class="col1">
				<span class="month">Dec</span>
				<span class="day">02</span>
			</div>
			<div class="col2">
				<span class="amount">$224.01</span>
				<span class="store">Shadyside Market District Giant Eagle</span>
			</div>
			<div class="col3">
				<span class="amount">- 100</span>
			</div>
		</div>
	</div>

	<div class="button-container">
		<button class="button-secondary button-medium">View All</button>
	</div>

</div>

<div id="plasticBagCounter1" class="plastic-bag-counter lg-footprint">
	<div class="image-container">
		<img src="../../assets/toolkit/images/bag-counter-1.png" alt="">
	</div>
	<div class="flex-container">

		<p class="bag-text desktop">Together, we’ve prevented</p>
		<p class="bag-text mobile">We’ve used</p>

		<!-- <div class="number-container" data-bind="foreach: BagCount"> -->
		<!-- ko ifnot: $index() === 0 -->
		<!-- <span class="comma">,</span> -->
		<!-- /ko -->
		<!-- <div class="num-group" data-bind="foreach: $data"> -->
		<!-- ko ifnot: $data === ',' -->
		<!-- <span class="number" data-bind="text: $data"></span> -->
		<!-- /ko -->
		<!-- </div> -->
		<!-- </div> -->

		<div class="number-container">
			<div class="num-group">
				<span class="number">1</span>
				<span class="number">2</span>
			</div>

			<span class="comma">,</span>
			<div class="num-group">
				<span class="number">4</span>
				<span class="number">5</span>
				<span class="number">1</span>
			</div>

			<span class="comma">,</span>
			<div class="num-group">
				<span class="number">8</span>
				<span class="number">6</span>
				<span class="number">4</span>
			</div>
		</div>

		<p class="bag-text desktop">plastic bags from littering our communities.</p>
		<p class="bag-text mobile">fewer plastic bags thanks to your help.</p>
	</div>
</div>

<div id="plasticBagCounter2" class="plastic-bag-counter sm-footprint">
	<div class="image-container">
		<img src="../../assets/toolkit/images/bag-counter-1.png" alt="">
	</div>
	<div class="flex-wrap">
		<div class="flex-no-wrap">
			<span class="bag-text mobile">We've used</span>
			<span class="bag-text desktop">Together, we’ve prevented</span>

			<div class="number-container" data-bind="foreach: BagCount">
				<!-- ko ifnot: $index() === 0 -->
				<span class="comma">,</span>
				<!-- /ko -->
				<div class="num-group" data-bind="foreach: $data">
					<!-- ko ifnot: $data === ',' -->
					<span class="number" data-bind="text: $data"></span>
					<!-- /ko -->
				</div>
			</div>

			<!-- <div class="number-container">
                <div class="num-group">
                    <span class="number">1</span>
                    <span class="number">2</span>
                </div>
            
                <span class="comma">,</span>
                <div class="num-group">
                    <span class="number">4</span>
                    <span class="number">5</span>
                    <span class="number">1</span>
                </div>
            
                <span class="comma">,</span>
                <div class="num-group">
                    <span class="number">8</span>
                    <span class="number">6</span>
                    <span class="number">4</span>
                </div>
            </div> -->

			<!-- <span class="bag-text mobile">plastic bags</span> -->
			<span class="bag-text desktop">plastic bags from littering our communities.</span>
			<span class="bag-text mobile">fewer plastic bags</span>
		</div>


		<span class="bag-text mobile">thanks to your help.</span>
		<a class="bag-link desktop" href="#">Read about our initiatives</a>
	</div>
</div>

<div class="row product-feed">
	<div class="col-lg-20 col-md-3 col-sm-4 col-xs-6">
		<section class="product-card inline">
			<div class="label center">
				<span class="copy">ON SALE</span>
			</div>
			<div class="product-img">
				<img src="/assets/toolkit/images/apple.jpg" alt="Product Image" class="image">
			</div>
			<div class="copy">
				<div class="product-price red">$99.99</div>
				<div class="product-sale red"><i class="fal fa-tag"></i> On Sale</div>
				<div class="product-brand display-none">Brand Name</div>
				<div class="product-name">Product Name which is two lines maximum.</div>
				<div class="product-oz inline">4oz avg&nbsp;</div>|
				<div class="product-lb inline">$0.00/lb</div>
			</div>
			<a href="#" tab-index="0">
				<div class="product-button">
					<span class="button-copy">
						<span class="icon icon-cart"></span>
						View Product
					</span>
				</div>
			</a>
		</section>
	</div>
	<div class="col-lg-20 col-md-3 col-sm-4 col-xs-6">

		<section class="product-card inline">
			<div class="label center display-none">
				<span class="copy">ON SALE</span>
			</div>
			<div class="product-img">
				<img src="/assets/toolkit/images/apple.jpg" alt="Product Image" class="image">
			</div>
			<div class="copy">
				<div class="product-price">$99.99</div>
				<div class="product-sale red display-none"><i class="fal fa-tag"></i> On Sale</div>
				<div class="product-brand display-none">Brand Name</div>
				<div class="product-name">Product Name which is two lines maximum.</div>
				<div class="product-oz inline">4oz avg&nbsp;</div>|
				<div class="product-lb inline">$0.00/lb</div>
			</div>
			<a href="#" tab-index="0">
				<div class="product-button">
					<span class="button-copy">
						<span class="icon icon-cart"></span>
						View Product
					</span>
				</div>
			</a>
		</section>
	</div>
	<div class="col-lg-20 col-md-3 col-sm-4 col-xs-6">

		<section class="product-card inline">
			<div class="label center">
				<span class="copy">ON SALE</span>
			</div>
			<div class="product-img">
				<img src="/assets/toolkit/images/apple.jpg" alt="Product Image" class="image">
			</div>
			<div class="copy">
				<div class="product-price  red">$99.99</div>
				<div class="product-sale red"><i class="fal fa-tag"></i> On Sale</div>
				<div class="product-brand display-none">Brand Name</div>
				<div class="product-name">Product Name which is two lines maximum.</div>
				<div class="product-oz inline">4oz avg&nbsp;</div>|
				<div class="product-lb inline">$0.00/lb</div>
			</div>
			<a href="#" tab-index="0">
				<div class="product-button">
					<span class="button-copy">
						<span class="icon icon-cart"></span>
						View Product
					</span>
				</div>
			</a>
		</section>

	</div>

	<div class="col-lg-20 col-md-3 col-sm-4 col-xs-6">

		<section class="product-card inline">
			<div class="label center display-none">
				<span class="copy">ON SALE</span>
			</div>
			<div class="product-img">
				<img src="/assets/toolkit/images/apple.jpg" alt="Product Image" class="image">
			</div>
			<div class="copy">
				<div class="product-price">$99.99</div>
				<div class="product-sale red display-none"><i class="fal fa-tag"></i> On Sale</div>
				<div class="product-brand display-none">Brand Name</div>
				<div class="product-name">Product Name which is two lines maximum.</div>
				<div class="product-oz inline">4oz avg&nbsp;</div>|
				<div class="product-lb inline">$0.00/lb</div>
			</div>
			<a href="#" tab-index="0">
				<div class="product-button">
					<span class="button-copy">
						<span class="icon icon-cart"></span>
						View Product
					</span>
				</div>
			</a>
		</section>

	</div>

	<div class="col-lg-20 col-md-3 col-sm-4 col-xs-6">

		<section class="product-card inline">
			<div class="label center display-none">
				<span class="copy">ON SALE</span>
			</div>
			<div class="product-img">
				<img src="/assets/toolkit/images/apple.jpg" alt="Product Image" class="image">
			</div>
			<div class="copy">
				<div class="product-price">$99.99</div>
				<div class="product-sale red display-none"><i class="fal fa-tag"></i> On Sale</div>
				<div class="product-brand display-none">Brand Name</div>
				<div class="product-name">Product Name which is two lines maximum.</div>
				<div class="product-oz inline">4oz avg&nbsp;</div>|
				<div class="product-lb inline">$0.00/lb</div>
			</div>
			<a href="#" tab-index="0">
				<div class="product-button">
					<span class="button-copy">
						<span class="icon icon-cart"></span>
						View Product
					</span>
				</div>
			</a>
		</section>

	</div>

</div>

<section class="recipe-hero">
	<div class="image col-xs-12" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');"></div>

	<div class="container">
		<div class="recipe-content">
			<h1 class="recipe-name">Pecan Pie filled with delicious pie filling</h1>

			<div class="recipe-info inline"><i class="fal fa-utensils-alt"></i>Entree American </div>
			<div class="recipe-info inline"><i class="fal fa-chart-pie"></i>4 Servings </div>
			<div class="recipe-info inline"><i class="far fa-stopwatch"></i>1 hour 40 Minutes</div>

			<div class="recipe-info inline black underline"><i class="fal fa-print"></i>Print this Recipe </div>
			<div class="recipe-info inline red underline"><i class="far fa-shopping-cart"></i>Shop the Recipe</div>

			<div class="recipe-description">Soufflé gummies icing soufflé candy jelly-o chocolate bar jelly toffee. Sweet croissant oat cake caramels apple pie cheesecake soufflé. Toffee lollipop oat cake. Jelly beans macaroon cheesecake jelly beans caramels icing oat.</div>
		</div>
	</div>
</section>

<section class="recipe-landing-hero">
	<div class="container">
		<div class="row">

			<!--Starts Left Side -->
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
				<section class="paragraph featured-recipe">
					<h2>Recipes & Meal Plans from Our Kitchen</h2>
					<p>Discover recipes for any occasion, whether cooking a quick dinner tonight or prepping for the week with a five-day meal plan.</p>
					<p><a href="#meal-plan" class="red bold" style="text-decoration:none;">View This Week’s Featured Recipe&nbsp;&nbsp;<i class="fas fa-angle-right"></i></a></p>
				</section>
			</div>
			<!--Ends Left Side -->

			<!--Starts Right Side -->
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
				<!--Starts One Card -->
				<a href="#0" data-content="click-cardbtn" aria-label="Recipe">
					<section class="card card-component featured-recipe big-recipe-card" tabindex="0">
						<div>
							<!--src=“~/media/{9DDDCCC0-7027-4F82-9A4C-472D7AE000D8}.ashx”-->
							<div class="image card-img-top" style="background-image: url('/assets/toolkit/images/recipe-pie.jpg');">
							</div>
							<div class="card-body text-box">
								<h3 class="card-title" tabindex="0">Pecan Pie</h3>
								<p class="category" tabindex="0">Breakfast and Brunch</p>
							</div>
						</div>
					</section>
				</a>
			</div>

			<!--End Right Side -->

		</div>
	</div>
</section>

<!--Start SEO Hideaway Component-->
<section>
	<div class="hideaway-text-container">
		<div class="hideaway-text">
			<strong>Header</strong>
			<br />
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id dignissim risus, scelerisque eleifend erat. Sed in nunc in quam lacinia sollicitudin. Suspendisse ullamcorper dolor id ante euismod, nec porta justo ornare. Ut consequat urna non urna hendrerit rhoncus. Mauris dictum justo a lacus ultrices consequat. Nullam elementum mattis eros, id euismod est dictum ac. Suspendisse ante nisl, aliquet eu euismod quis, vulputate eget quam. Maecenas ornare lectus non molestie luctus. Nulla sagittis nisl in augue egestas, et ornare justo molestie. Duis vel placerat nisl. Vivamus vel lacinia lorem. Ut at leo eget ipsum varius rutrum.
			<br />
		</div>
		<a id="more" class="hideaway-btn underline" href="javascript:void(0);">Read more <i class="far fa-angle-down"></i></a>

	</div>
</section>
<!--END SEO Hideaway Component-->

<section class="sg-video">
	<!--this div dynamic classes -->
	<div class="sgg-video">
		<img src="/assets/toolkit/images/meats-grilling.jpg" class="img image" alt="video still">
		<div id="myBtnVideo" class="play-btn"><i class="far fa-play-circle"></i></div>
	</div>
	<div class="card-body text-box">
		<div class="tag">28 Perks</div>
		<div class="row">
			<div class="video-title col-sm-6 col-xs-6" tabindex="0">Steak Grilling</div>
			<div class="col-sm-6 col-xs-6 transcript-link"><a href="" data-content="click-video-transcript" class="sg-red-link" tabindex="0">Transcript</a>
			</div>
		</div>
	</div>
</section>


<!--Start Pop Up Window 1 -->
<!--
<div id="myModalVideo" class="modalvideo">
  <div class="modal-content video-modal">
      <span class="close right">&times;</span>
      <div class="actual-video">
        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/VpGz2zvN1Es" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="row">
          <div class="video-pop-text col-sm-6 col-xs-8" tabindex="0">Watch video until end to claim your perks!!!</div>
          <div class="col-sm-6 col-xs-3 transcript-link"><a href="" data-content="click-video-transcript" class="sg-red-link" tabindex="0">Transcript</a>
          </div>
     </div>
  </div>

</div>
-->
<!--Start Pop Up Window 2 -->
<!--
<div id="myModalVideo" class="modalvideo">
  <div class="modal-content video-modal screen-2">
      <span class="close right">&times;</span>
      <div class="perksadded">Claim your Perks!</div>

      <div class="input-box input-search">
        <div class="input-container">
            <div class="input-background-grilling">
              <label class="input-label" for="Recipe Search">Advantage Card Number</label>
            </div>
            <input id="grillingadvantage" type="text" name="otherAmount" class="perks-quiz-input" data-content="input-recipe-search">
        </div>
      </div>

      <a href="#0" class="btn btn-primary" data-content="click-btn-summergrilling" aria-label="Giant Eagle Submit Button">Submit</a>

      <a href="#0" class="red-link" data-content="click-btn-sg-claimperks" aria-label="Giant Eagle Link">Don't have an Advantage Card?</a>
  </div>

</div>
-->
<!--Start Pop Up Window 3 -->

<div id="myModalVideo" class="modalvideo">
	<div class="modal-content video-modal screen-3">
		<span class="close right">&times;</span>
		<img src="/assets/toolkit/images/fp-ding.png" alt="fuelperks-plus-logo" class="img image perks-plus-logo">
		<div class="perksadded">25 Perks have been added to your account!</div>
		<a href="#0" class="btn btn-secondary" data-content="click-btn-sg-claimperks" aria-label="Giant Eagle Submit Button">Close</a>
	</div>
</div>

<section class="simple-text-section">
	<div class="container">
		<div class="row">
			<div class="col-sm-6 left-side">
				<span>THE GIANT EAGLE</span>
				<div class="big-text">ADVANTAGE</div>
			</div>

			<div class="col-sm-6 right-side">
				<p>Great selection, great savings and a commitment to making grocery shopping more convenient. That’s the Giant Eagle Advantage, and that’s why our shoppers have trusted us for over 80 years.</p>
			</div>
		</div>
	</div>
</section>

<section class="sliding-cards-container">

	<div class="sliding-cards">

		<span class="arrow-container-right">
			<span class="scroll-arrow arrow" data-direction="right">
				<i class="far fa-arrow-right"></i>
			</span>
		</span>

		<span class="arrow-container-left hide">
			<span class="scroll-arrow arrow" data-direction="left">
				<i class="far fa-arrow-left"></i>
			</span>
		</span>

		<div class="card" style="min-width: 300px;">
			<img src="/assets/toolkit/images/recipes/Pappardelle-With-Shredded.jpg" alt="Alt text">
			<div style="height:100%;margin:10px 10px 0 0;">
				<a class="clickable-block" href="#0">Pappardelle With Shredded Beef </a>
			</div>
		</div>

		<div class="card" style="min-width: 300px;">
			<img src="/assets/toolkit/images/recipes/Balsamic-Glazed-Chicken-Breast.jpg" alt="Alt text">
			<div style="height:100%;margin:10px 10px 0 0;">
				<a class="clickable-block" href="#0">Balsamic Glazed Chicken Breast </a>
			</div>
		</div>

		<div class="card" style="min-width: 300px;">
			<img src="/assets/toolkit/images/recipes/Chorizo-Stuffed-Pepper.jpg" alt="Alt text">
			<div style="height:100%;margin:10px 10px 0 0;">
				<a class="clickable-block" href="#0">Chorizo Stuffed Peppers</a>
			</div>
		</div>

		<div class="card" style="min-width: 300px;">
			<img src="/assets/toolkit/images/recipes/Portabella-Risotto.jpg" alt="Alt text">
			<div style="height:100%;margin:10px 10px 0 0;">
				<a class="clickable-block" href="#0">Portabella Risotto</a>
			</div>
		</div>

		<div class="card" style="min-width: 300px;">
			<img src="/assets/toolkit/images/recipes/Keto-Fried-Chicken.jpg" alt="Alt text">
			<div style="height:100%;margin:10px 10px 0 0;">
				<a class="clickable-block" href="#0">Keto Fried Chicken </a>
			</div>
		</div>

		<div class="card" style="min-width: 300px;">
			<img class="img-responsive" src="/assets/toolkit/images/recipes/Pappardelle-With-Shredded.jpg" alt="Alt text">
			<div style="height:100%;margin:10px 10px 0 0;">
				<a class="clickable-block" href="#0">Pappardelle With Shredded Beef </a>
			</div>
		</div>

		<div class="card" style="min-width: 300px;">
			<img src="/assets/toolkit/images/recipes/Balsamic-Glazed-Chicken-Breast.jpg" alt="Alt text">
			<div style="height:100%;margin:10px 10px 0 0;">
				<a class="clickable-block" href="#0">Balsamic Glazed Chicken Breast </a>
			</div>
		</div>

		<div class="card" style="min-width: 300px;">
			<img src="/assets/toolkit/images/recipes/Chorizo-Stuffed-Pepper.jpg" alt="Alt text">
			<div style="height:100%;margin:10px 10px 0 0;">
				<a class="clickable-block" href="#0">Chorizo Stuffed Peppers</a>
			</div>
		</div>

		<div class="card" style="min-width: 300px;">
			<img src="/assets/toolkit/images/recipes/Portabella-Risotto.jpg" alt="Alt text">
			<div style="height:100%;margin:10px 10px 0 0;">
				<a class="clickable-block" href="#0">Portabella Risotto</a>
			</div>
		</div>

		<div class="card" style="min-width: 300px;">
			<img src="/assets/toolkit/images/recipes/Keto-Fried-Chicken.jpg" alt="Alt text">
			<div style="height:100%;margin:10px 10px 0 0;">
				<a class="clickable-block" href="#0">Keto Fried Chicken </a>
			</div>
		</div>

	</div>

</section>

<div class="menu-container">

	<!-- ** Filter Menu ** -->
	<div id="filterMenu" class="sliding-menu hidden" aria-hidden="true">

		<button class="slide-menu-close-button close-button" tabindex="0" aria-controls="mainMenu" aria-expanded="true" aria-label="Close Menu">
		</button>

		<div class="menu-header no-underline">
			<div class="menu-heading">
				<p class="menu-title filter"><span class="icon icon-filter"></span>Filter</p>
			</div>
		</div>

		<div class="drawer-container neg-margin-top">

			<div class="drawer-section no-underline">
				<div class="filters-bar">
					<button class="chip hidden reset" data-name="Reset" tabindex="0">Reset</button>
				</div>
				<span class="item-text bold">Store Type</span>

				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="radio" name="filter" data-bind="click: ShowFilterView('All')" checked data-target="all">
						<span class="radio"></span>
						All
					</label>
				</div>

				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="radio" name="filter" data-bind="click: ShowFilterView('Groceries')" data-target="Supermarket">
						<span class="radio"></span>
						Supermarket
					</label>
				</div>

				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="radio" name="filter" data-bind="click: ShowFilterView('Fuel')" data-target="GetGo">
						<span class="radio"></span>
						GetGo
					</label>
				</div>

				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="radio" name="filter" data-bind="click: ShowFilterView('Curbside')" data-target="CurbsideExpress">
						<span class="radio"></span>
						Grocery Pickup and Delivery
					</label>
				</div>
				<div data-bind="visible: IsSuperMarketFeaturesVisible()">
					<span class="item-text bold">Supermarket</span>

					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Ace Hardware" data-target="Ace Hardware" checked="true" data-content="click-filterCheckbox-Ace Hardware">
							<span class="checkmark"></span>
							Ace Hardware
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="ATM" data-target="ATM" data-content="click-filterCheckbox-ATM">
							<span class="checkmark"></span>
							ATM
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Auto Supplies" data-target="Auto Supplies" data-content="click-filterCheckbox-Auto Supplies">
							<span class="checkmark"></span>
							Auto Supplies
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Beverage Bar" data-target="Beverage Bar">
							<span class="checkmark"></span>
							Beverage Bar
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Bissell Carpet Cleaner Rental" data-target="Bissell Carpet Cleaner Rental">
							<span class="checkmark"></span>
							Bissell Carpet Cleaner Rental
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Breakfast" data-target="Breakfast">
							<span class="checkmark"></span>
							Breakfast
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Candy Shop" data-target="Candy Shop">
							<span class="checkmark"></span>
							Candy Shop
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Charcuterie" data-target="Charcuterie">
							<span class="checkmark"></span>
							Charcuterie
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Cheese Shop" data-target="Cheese Shop">
							<span class="checkmark"></span>
							Cheese Shop
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Citizens Bank" data-target="Citizens Bank">
							<span class="checkmark"></span>
							Citizens Bank
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Coinstar" data-target="Coinstar">
							<span class="checkmark"></span>
							Coinstar
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Curbside Express Pickup" data-target="Curbside Express Pickup">
							<span class="checkmark"></span>
							Curbside Express Pickup
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Dairy" data-target="Dairy">
							<span class="checkmark"></span>
							Dairy
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Drive-Thru Pharmacy" data-target="Drive-Thru Pharmacy">
							<span class="checkmark"></span>
							Drive-Thru Pharmacy
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Dry Cleaning" data-target="Dry Cleaning">
							<span class="checkmark"></span>
							Dry Cleaning
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="EZPass" data-target="EZPass">
							<span class="checkmark"></span>
							EZPass
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Free Pharmacy Home Delivery" data-target="Free Pharmacy Home Delivery">
							<span class="checkmark"></span>
							Free Pharmacy Home Delivery
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Gift Cards" data-target="Gift Cards">
							<span class="checkmark"></span>
							Gift Cards
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Great to Go Meal Kits" data-target="Great to Go Meal Kits">
							<span class="checkmark"></span>
							Great to Go Meal Kits
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Greeting Cards" data-target="Greeting Cards">
							<span class="checkmark"></span>
							Greeting Cards
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Lottery" data-target="Lottery">
							<span class="checkmark"></span>
							Lottery
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Primo Water" data-target="Primo Water">
							<span class="checkmark"></span>
							Primo Water
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Redbox DVD Rental Kiosk" data-target="Redbox DVD Rental Kiosk">
							<span class="checkmark"></span>
							Redbox DVD Rental Kiosk
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Restaurant" data-target="Restaurant">
							<span class="checkmark"></span>
							Restaurant
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Retail Clinic" data-target="Retail Clinic">
							<span class="checkmark"></span>
							Retail Clinic
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Scan Pay Go" data-target="Scan Pay Go">
							<span class="checkmark"></span>
							Scan Pay Go
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Starbucks" data-target="Starbucks">
							<span class="checkmark"></span>
							Starbucks
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Western Union" data-target="Western Union">
							<span class="checkmark"></span>
							Western Union
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="WiFi" data-target="WiFi">
							<span class="checkmark"></span>
							WiFi
						</label>
					</div>
					<div class="filter-checkbox">
						<label class="filter-checkbox-label" tabindex="0">
							<input type="checkbox" name="Wine" data-target="Wine">
							<span class="checkmark"></span>
							Wine
						</label>
					</div>
				</div>

				<!-- Start Fuel Filter  -->
				<span class="item-text bold">Fuel</span>

				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Online Ordering" data-target="Online Ordering" checked="true">
						<span class="checkmark"></span>
						Online Ordering
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Cafe" data-target="Cafe">
						<span class="checkmark"></span>
						Cafe
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Coffee" data-target="Coffee">
						<span class="checkmark"></span>
						Coffee
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Smoothies and Espresso" data-target="Smoothies and Espresso">
						<span class="checkmark"></span>
						Smoothies and Espresso
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Beer" data-target="Beer">
						<span class="checkmark"></span>
						Beer
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Great to Go" data-target="Great to Go">
						<span class="checkmark"></span>
						Great to Go
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Free Air" data-target="Free Air">
						<span class="checkmark"></span>
						Free Air
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Carwash" data-target="Carwash">
						<span class="checkmark"></span>
						Carwash
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Soft Cloth Carwash" data-target="Soft Cloth Carwash">
						<span class="checkmark"></span>
						Soft Cloth Carwash
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Touch Free Carwash" data-target="Touch Free Carwash">
						<span class="checkmark"></span>
						Touch Free Carwash
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Diesel" data-target="Diesel">
						<span class="checkmark"></span>
						Diesel
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Kerosene" data-target="Kerosene">
						<span class="checkmark"></span>
						Kerosene
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="TopTier Detergent Gasoline" data-target="TopTier Detergent Gasoline">
						<span class="checkmark"></span>
						TopTier Detergent Gasoline
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Bait" data-target="Bait">
						<span class="checkmark"></span>
						Bait
					</label>
				</div>
				<div class="filter-checkbox">
					<label class="filter-checkbox-label" tabindex="0">
						<input type="checkbox" name="Surcharge Free ATM" data-target="Surcharge Free ATM">
						<span class="checkmark"></span>
						Surcharge Free ATM
					</label>
				</div>
			</div>
		</div>
	</div>


</div>
<!--End Menu Container-->
<script>
	var filters = document.getElementsByName('filter');
	var buttons = document.querySelectorAll('.control-chip');
	var resetBtns = document.querySelectorAll("[data-name='Reset']");

	[].forEach.call(resetBtns, function(reset) {
		reset.addEventListener('click', function() {
			document.querySelector("[data-target='all']").click();
		});
	});

	[].forEach.call(filters, function(filter) {
		filter.addEventListener('change', function() {
			// [].forEach.call(buttons, function(button){
			//     button.classList.remove('active');
			// });
			var target = filter.dataset.target
			if (target === 'all') {
				[].forEach.call(resetBtns, function(reset) {
					reset.classList.add('shrink');
					setTimeout(function() {
						reset.classList.add('hidden');
						reset.classList.remove('active');
					}, 150);
				});

			} else {
				// var button = document.querySelector("[data-name='"+ target + "']");
				// button.classList.add('active');
				[].forEach.call(resetBtns, function(reset) {
					reset.classList.add('active');
					reset.classList.remove('hidden');
					setTimeout(function() {
						reset.classList.remove('shrink');
					}, 10);
				});
			}

		});
	});

	[].forEach.call(buttons, function(button) {
		button.addEventListener('click', function() {
			var target = button.dataset.name;
			var radio = document.querySelector("[data-target='" + target + "']");

			if (!button.classList.contains('active')) {
				radio.click();
				// reset.classList.add('active');
				// reset.classList.remove('hidden');
				// setTimeout(function(){
				//     reset.classList.remove('shrink');
				// },250)

			} else {
				document.querySelector("[data-target='all']").click();
			}
		});
	});
</script>

<section class="title-section">
	<div class="container">
		<h3>DISCOVER OUR</h3>
		<p>FAMILY OF BRANDS</p>
	</div>
</section>

<div class="vertical-card  ">

	<div class="image-container">
		<img class="img-responsive" src="../../assets/toolkit/images/bread.png" alt="Alt text">
	</div>

	<div class="vertical-card-body ">
		<!-- flexFont adds dynamic inline styles based on the width of the parent container. Don't hard code any inline styles -->
		<h3 class="flexFont-heading-1">Lorem ipsum dolor</h3>
		<p class="flexFont-text">Sed enim ut sem viverra aliquet eget sit. Faucibus vitae aliquet nec ullamcorper sit amet. Turpis massa sed elementum tempus egestas sed.</p>
		<div class="vertical-card-btn">
			<a href="#0" class="button-large button-secondary">Button Primary</a>
			<a href="#0" class="button-large button-primary">Button Secondary</a>
		</div>
	</div>

</div>