<?php require (PAGE_CONTENT.$PageContent);?>
<div class="page-wrapper row">
	<div class="mobile-img-main hide-on-med-and-up col s12">
		<img src="<?php echo TEMPLATES_ASSETS?>/img/about/sab_about_story_splash.jpg" alt="SA Bullion | Invest in yourself. Invest in gold" />
	</div>
	<div class="mobile-txt-main hide-on-med-and-up col s12">
		<h1 class="center-align alrightsansmedium home-hero-head-txt hero-head-type"><?php echo $abs_headHero; ?></h1>
		<p class="center-align alrightsansregular hero-txt-type"><?php echo $abs_txtHero; ?></p>
	</div>
	<div class="hero-img col s12 hide-on-small-only">
		<div class="hero-txt-container">
			<div class="row">
			<section class="col l5">
			<h1 class="alrightsansmedium hero-head-type about-hero-head"><?php echo $abs_headHero; ?></h1>
			<p class="alrightsansregular hero-txt-type" style="width: 60%;"><?php echo $abs_txtHero; ?></p>
			</section>
			</div>
		</div><!-- hero-txt-container -->
	</div><!-- hero image -->

	<div class="col s12 story-intro">
		<div class="content-wrap">
		<div class="col l6 offset-l3 offset-m5 m9 s12">
		<h2 class="center-align alrightsansmedium intro-head-type"><?php echo $abs_headIntro; ?></h2>
		<p class="center-align alrightsansregular intro-txt-type"><?php echo $abs_txtIntro; ?></p>
		</div>
		</div><!-- content-wrap -->
	</div><!-- story-intro -->

	<div class="col s12 brand-story">
		<div class="content-wrap">

		<div class="col s12 brand-story-sec-1">
			<section class="col s12 l6 brand-story-sec-1-txt">
				<h3 class="alrightsansmedium body-head-type"><?php echo $abs_headBrandStory1; ?></h3>
				<p class="alrightsansregular body-txt-type"><?php echo $abs_txtBrandStory1; ?></p>
				<ul class="alrightsansregular body-txt-type">
					<li><?php echo $abs_txtBrandStory1_1;?></li>
					<li><?php echo $abs_txtBrandStory1_2;?></li>
					<li><?php echo $abs_txtBrandStory1_3;?></li>
					<li><?php echo $abs_txtBrandStory1_4;?></li>
				</ul>
			</section>
			<section class="col s12 l6 temp-img-holder hide-on-med-and-down">
				<div class="ba-overview-img">
					<video id="story-vid" class="ab_ani" muted>
						 <source src="<?php echo $abs_brandStoryAniMp4;?>" type="video/mp4">
					</video>
				</div>
			</section>
		</div>

		<div class="col s12 brand-story-sec-2">
			<section class="col s12 l6 ownership-illustration">
				<img src="<?php echo $abs_100Ownership;?>" alt="" />
			</section>

			<section class="col s12 l6">
				<h3 class="alrightsansmedium body-head-type"><?php echo $abs_headBrandStory2; ?></h3>
				<p class="alrightsansregular body-txt-type"><?php echo $abs_txtBrandStory2; ?></p>
			</section>
		</div>

		<div class="col s12 brand-story-sec-3">
			<div class="col s12 l6">
				<span class="cta-quote">&#8220;</span>
				<h4 class="center-align alrightsansmedium body-head-type"><?php echo $abs_headBrandStoryHero; ?></h4>
				<span class="cta-quote">&#8221;</span>
			</div>
			<section class="col s12 l6">
				<div class="krugerrand-img-story">
					<img src="<?php echo TEMPLATES_ASSETS.'/img/about/sab_about_story_coin.png' ?>" alt="" />
				</div>
			</section>
		</div>
		</div><!-- content-wrap -->
	</div><!-- brand-story -->

	<div class="col s12 founders">
		<div class="content-wrap">
		<h5 class="center-align alrightsansmedium body-head-type"><?php echo $abs_headFounders; ?></h5>
		<p class="col l6 s8 center-align alrightsansregular body-txt-type txt-founders"><?php echo $abs_txtFounders1; ?></p>
		

		<div class="col s12 founders-bio cd-slider-wrapper">
			<ul class="cd-slider">
				<li class="is-visible">
					<div class="cd-half-block image"></div>
					<div class="cd-half-block content">
						<div class="col s12">
							<div class="content-bio">
							<h6 class="center-align alrightsansmedium body-head-type">
								<?php echo $abs_headBioFounders1; ?>
								<span>
									<p class="center-align alrightsansregular body-txt-type"><?php echo $abs_subHeadBioFounders1; ?></p>
								</span>
							</h6>
							<p class="center-align alrightsansregular body-txt-type"><?php echo $abs_txtBioFounders1; ?></p>
							</div>
						</div>
					</div>
				</li> <!-- .cd-half-block.content -->
				<li>
					<div class="cd-half-block image"></div>
					<div class="cd-half-block content">
						<div class="col s12">
							<div class="content-bio">
							<h6 class="center-align alrightsansmedium body-head-type"><?php echo $abs_headBioFounders2; ?></h6>
							<p class="center-align alrightsansregular body-txt-type"><?php echo $abs_subHeadBioFounders2; ?></p>
							<p class="center-align alrightsansregular body-txt-type"><?php echo $abs_txtBioFounders2; ?></p>
							</div>
						</div>
					</div>
				</li> <!-- .cd-half-block.content -->
				<li>
					<div class="cd-half-block image"></div>
					<div class="cd-half-block content">
						<div class="col s12">
							<div class="content-bio">
							<h6 class="center-align alrightsansmedium body-head-type"><?php echo $abs_headBioFounders3; ?></h6>
							<p class="center-align alrightsansregular body-txt-type"><?php echo $abs_subHeadBioFounders3; ?></p>
							<p class="center-align alrightsansregular body-txt-type"><?php echo $abs_txtBioFounders3; ?></p>
							</div>
						</div>
					</div>
				</li> <!-- .cd-half-block.content -->
				<li>
					<div class="cd-half-block image"></div>
					<div class="cd-half-block content">
						<div class="col s12">
							<div class="content-bio">
							<h6 class="center-align alrightsansmedium body-head-type"><?php echo $abs_headBioFounders4; ?></h6>
							<p class="center-align alrightsansregular body-txt-type"><?php echo $abs_subHeadBioFounders4; ?></p>
							<p class="center-align alrightsansregular body-txt-type"><?php echo $abs_txtBioFounders4; ?></p>
							</div>
						</div>
					</div>
				</li> <!-- .cd-half-block.content -->
			</ul>
			<div class="mobile-nav  hide-on-med-and-up">
					<a href="#" class="go-left"><?php echo file_get_contents(TEMPLATES_ASSETS."/svgs/left-arrow-founders.svg"); ?></a>
					<a href="#" class="go-right"><?php echo file_get_contents(TEMPLATES_ASSETS."/svgs/right-arrow-founders.svg"); ?></a>
			</div>
		</div><!-- founders-bio -->


		</div><!-- content wrap -->
	</div><!-- founders -->
</div><!-- page-wrapper -->
