<div class="accordion" data-accordion>
  
  	<div class="accordion__item" id="accordion0" data-accordion-item>
  		<a href="#accordion0" class="accordion__item__trigger" data-accordion-nav-item>Accordion 0</a>
  		<div class="accordion__item__content">
  
  			<p><strong>ACCORDION 0</strong></p>
  			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  				dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  		</div>
  		<!--/accordion__item__content-->
  	</div>
  	<!--/accordion__item-->
  	<div class="accordion__item" id="accordion1" data-accordion-item>
  		<a href="#accordion1" class="accordion__item__trigger" data-accordion-nav-item>Accordion 1</a>
  		<div class="accordion__item__content">
  
  			<p><strong>ACCORDION 1</strong></p>
  			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  				dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  		</div>
  		<!--/accordion__item__content-->
  	</div>
  	<!--/accordion__item-->
  	<div class="accordion__item" id="accordion2" data-accordion-item>
  		<a href="#accordion2" class="accordion__item__trigger" data-accordion-nav-item>Accordion 2</a>
  		<div class="accordion__item__content">
  
  			<p><strong>ACCORDION 2</strong></p>
  			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  				dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  		</div>
  		<!--/accordion__item__content-->
  	</div>
  	<!--/accordion__item-->
  	<div class="accordion__item" id="accordion3" data-accordion-item>
  		<a href="#accordion3" class="accordion__item__trigger" data-accordion-nav-item>Accordion 3</a>
  		<div class="accordion__item__content">
  
  			<p><strong>ACCORDION 3</strong></p>
  			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  				dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  		</div>
  		<!--/accordion__item__content-->
  	</div>
  	<!--/accordion__item-->
  	<div class="accordion__item" id="accordion4" data-accordion-item>
  		<a href="#accordion4" class="accordion__item__trigger" data-accordion-nav-item>Accordion 4</a>
  		<div class="accordion__item__content">
  
  			<p><strong>ACCORDION 4</strong></p>
  			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  				dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  		</div>
  		<!--/accordion__item__content-->
  	</div>
  	<!--/accordion__item-->
  	<div class="accordion__item" id="accordion5" data-accordion-item>
  		<a href="#accordion5" class="accordion__item__trigger" data-accordion-nav-item>Accordion 5</a>
  		<div class="accordion__item__content">
  
  			<p><strong>ACCORDION 5</strong></p>
  			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  				dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  		</div>
  		<!--/accordion__item__content-->
  	</div>
  	<!--/accordion__item-->
  
  </div>
  <!--/accordion-->

<div class="demo-load-more" style="text-align: center;" aria-live="polite" data-load-more>
  
  	<div class="demo-load-more__item">Item 1</div>
  	<div class="demo-load-more__item">Item 2</div>
  	<div class="demo-load-more__item">Item 3</div>
  
  	<div class="demo-load-more__trigger" data-load-more-trigger-wrap>
  		<a href="/assets/toolkit/ajaxhtml/demo-load-more--set-1.html" class="btn" data-load-more-trigger aria-label="Load next 3 items"><span>Load more</span></a>
  	</div>
  	<!--/load__more-->
  
  	<div class="demo-load-more__load load">
  		<div data-load-more-loader class="load__loader is-hidden">Loading...</div>
  		<div data-load-more-error class="load__error is-hidden">Oops, there was a problem retrieving more items - please try again</div>
  	</div>
  	<!--/load-->
  
  </div>
  <!--/demo-load-more-->

<div class="clr-grey-light" style="padding: 25px 20px">
  
  	<div class="article clr-white">
  		<div class="article__timestamp"><time datetime="2016-08-06">6 August, 2016</time></div>
  		<h2 class="article__title h4 h-secondary"><a href="#">Formally homeless Londoner opens his first art collection at Turner House</a></h2>
  		<div class="article__summary">
  			<div class="article__media">
  				<a href="#">
          <img src="http://placehold.it/170x110" alt="" />
        </a>
  			</div>
  			<!--/article__summary__media-->
  			<div class="article__copy">
  				<p>We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.</p>
  				<p class="article__action"><a href="#" aria-label="Read more: Formally homeless Londoner opens his first art collection at Turner House">Read more</a></p>
  			</div>
  			<!--/article__copy-->
  		</div>
  		<!--/article__summary-->
  	</div>
  	<!--/article-->
  
  </div>

<div class="basket">
  	<div class="basket__inner">
  
  		<h2 class="accessible-hide">Your basket</h2>
  
  		<div class="basket__overview">
  			<div class="basket__overview__inner">
  
  				<div class="basket__overview__total">
  					<div class="basket__overview__item"><span class="basket__overview__label">Sub total</span> <span class="basket__overview__value">£55</span></div>
  					<div class="basket__overview__item"><span class="basket__overview__label">VAT @ 20%</span> <span class="basket__overview__value">£11</span></div>
  					<div class="basket__overview__item basket__overview__item--total"><span class="basket__overview__label">Order total</span> <span class="basket__overview__value">£55</span></div>
  				</div>
  				<!--/basket__overview__total-->
  
  				<div class="basket__overview__actions">
  					<a href="#" class="basket__checkout btn btn--wide"><span>Proceed to checkout</span></a><br />
  					<a href="#" class="basket__paypal">Pay with PayPal</a>
  				</div>
  				<!--/basket__overview__actions-->
  
  			</div>
  			<!--/basket__total__inner-->
  		</div>
  		<!--/basket__overview-->
  
  		<div class="basket__summary">
  
  			<div class="basket__list">
  				<div class="basket__item">
  					<div class="basket__item__inner">
  
  						<div class="basket__item__media">
  							<a href="#"><img src="http://placehold.it/200x140" alt="" /></a>
  						</div>
  						<!--/basket__item__media-->
  
  						<div class="basket__item__info">
  
  							<h3 class="basket__item__title h3 h-secondary"><a href="#">More than a room</a></h3>
  							<p class="basket__item__price h3">£35.99</p>
  							<p class="basket__item__message"><em>Optional personalised gift message</em></p>
  							<p class="basket__item__copy">Help a homeless young person escape homelessness forever.</p>
  
  							<div class="basket__item__meta">
  								<p class="basket__item__qty">Quantity: <b>1</b></p>
  								<p class="basket__item__actions"><a href="#" class="basket__edit">Edit</a> <a href="#" class="basket__delete">Delete</a></p>
  							</div>
  							<!--/basket__item__meta-->
  
  						</div>
  						<!--/basket__item__info-->
  
  					</div>
  					<!--/basket__item__inner-->
  				</div>
  				<!--/basket__item-->
  				<div class="basket__item">
  					<div class="basket__item__inner">
  
  						<div class="basket__item__media">
  							<a href="#"><img src="http://placehold.it/200x140" alt="" /></a>
  						</div>
  						<!--/basket__item__media-->
  
  						<div class="basket__item__info">
  
  							<h3 class="basket__item__title h3 h-secondary"><a href="#">More than a room</a></h3>
  							<p class="basket__item__price h3">£35.99</p>
  							<p class="basket__item__message"><em>Optional personalised gift message</em></p>
  							<p class="basket__item__copy">Help a homeless young person escape homelessness forever.</p>
  
  							<div class="basket__item__meta">
  								<p class="basket__item__qty">Quantity: <b>1</b></p>
  								<p class="basket__item__actions"><a href="#" class="basket__edit">Edit</a> <a href="#" class="basket__delete">Delete</a></p>
  							</div>
  							<!--/basket__item__meta-->
  
  						</div>
  						<!--/basket__item__info-->
  
  					</div>
  					<!--/basket__item__inner-->
  				</div>
  				<!--/basket__item-->
  				<div class="basket__item">
  					<div class="basket__item__inner">
  
  						<div class="basket__item__media">
  							<a href="#"><img src="http://placehold.it/200x140" alt="" /></a>
  						</div>
  						<!--/basket__item__media-->
  
  						<div class="basket__item__info">
  
  							<h3 class="basket__item__title h3 h-secondary"><a href="#">More than a room</a></h3>
  							<p class="basket__item__price h3">£35.99</p>
  							<p class="basket__item__message"><em>Optional personalised gift message</em></p>
  							<p class="basket__item__copy">Help a homeless young person escape homelessness forever.</p>
  
  							<div class="basket__item__meta">
  								<p class="basket__item__qty">Quantity: <b>1</b></p>
  								<p class="basket__item__actions"><a href="#" class="basket__edit">Edit</a> <a href="#" class="basket__delete">Delete</a></p>
  							</div>
  							<!--/basket__item__meta-->
  
  						</div>
  						<!--/basket__item__info-->
  
  					</div>
  					<!--/basket__item__inner-->
  				</div>
  				<!--/basket__item-->
  			</div>
  			<!--/basket__list-->
  
  			<div class="basket__list__actions">
  				<a href="#" class="btn btn--white basket__add"><span>Add more gifts</span></a><br />
  				<a href="#" class="basket__clear">Clear basket</a>
  			</div>
  			<!--/basket__list__actions-->
  
  			<div class="basket__info">
  				<h3 class="h4 h-secondary">Postal delivery times:</h3>
  				<p>All Postcards are sent 2nd class and should arrive within 5 working days.</p>
  				<h3 class="h4 h-secondary">eCard delivery times:</h3>
  				<p>All eCards are emailed to recipients immediately.</p>
  			</div>
  			<!--/basket__info-->
  
  		</div>
  		<!--/basket__summary-->
  
  	</div>
  	<!--/basket__inner-->
  </div>
  <!--/basket-->

<nav class="breadcrumbs" role="navigation" aria-label="You are here:">
  	<div class="breadcrumbs__inner">
  		<ol class="breadcrumbs__list">
  			<li><a href="#" aria-level="1">Home</a></li>
  			<li><a href="#" aria-level="2">What we do</a></li>
  			<li><span aria-level="3" aria-label="Current page: Housing">Housing</span></li>
  		</ol>
  	</div>
  	<!--/breadcrumbs__inner-->
  </nav>

<div class="copy">
  
  	<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  		in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  		in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  	<p class="copy__action">
  		<a href="#" class="btn"><span>Get help now</span></a>
  	</p>
  
  </div>

<div class="clr-yellow">
  	<div class="cta-inline">
  		<h2 class="cta-inline__title">Are you homeless, sofa surfing or feel you're maybe at risk?</h2>
  		<div class="cta-inline__action"><a href="#" class="btn"><span>Get help now</span></a></div>
  	</div>
  	<!--/cta-inline-->
  </div>

<div class="donate">
  
  	<h2 class="donate__title h4">Surprise us</h2>
  
  	<form class="donate__form form form--validate" action="#" method="" id="form-donate" data-validate>
  
  		<div class="field">
  			<label for="form-donate__ff-amount" class="field__label">Donation amount <span class="field__required">* <i>(required)</i></span></label>
  			<div class="field__prefixed field__suffixed">
  				<span class="field__prefixed__prefix">£</span>
  				<input type="text" id="form-donate__ff-amount" name="form-donate__ff-amount" aria-label="Donation amount (required)" required data-msg-required="Please provide a donation amount" min="1" step="any" data-msg-min="Please enter a valid amount of £1 or more"
  				/>
  				<div class="field__suffixed__suffix">Monthly</div>
  			</div>
  		</div>
  
  		<div class="form__action form__action--small">
  			<button type="submit" class="btn"><span>Donate</span></button>
  		</div>
  		<!--/form__action-->
  
  	</form>
  
  	<p class="donate__or">Or</p>
  
  	<ul class="donate__alt">
  		<li><a href="#">Give by card</a></li>
  		<li><a href="#">Give by PayPal</a></li>
  	</ul>
  
  </div>
  <!--/donate-->

<div class="download">
  	<div class="download__icon"><a href="#"><i class="icon-download" aria-label="Download the latest Room Sponsor updates"></i></a></div>
  	<p class="download__copy"><a href="#">Download the latest Room Sponsor updates</a> (968kb pdf)</p>
  </div>
  <!--/download-->

<div class="filter" data-filter>
  	<div class="filter__toolbar">
  
  		<div class="filter__inner">
  
  			<nav class="filter__group filter__group--types">
  				<p class="filter__title">Stories:</p>
  				<ul class="filter__links">
  					<li class="filter__links__item">
  						<a href="/assets/toolkit/ajaxhtml/demo-filter-content--1.html" data-filter-ajax-trigger class="is-active"><span>Young people</span></a>
  					</li>
  					<li class="filter__links__item">
  						<a href="/assets/toolkit/ajaxhtml/demo-filter-content--2.html" data-filter-ajax-trigger><span>Supporters</span></a>
  					</li>
  					<li class="filter__links__item">
  						<a href="[[FAIL]]" data-filter-ajax-trigger><span>FAIL</span></a>
  					</li>
  				</ul>
  			</nav>
  			<!--/filter__group-->
  
  			<nav class="filter__group filter__group--sort">
  				<p class="filter__title">Sort:</p>
  				<ul class="filter__links">
  					<li class="filter__links__item">
  						<a href="#" data-filter-sort-trigger="data-filter-sort-time"><span>Latest</span></a>
  					</li>
  					<li class="filter__links__item">
  						<a href="#" data-filter-sort-trigger="data-filter-sort-alpha" class="is-active"><span>A-Z</span></a>
  					</li>
  				</ul>
  			</nav>
  			<!--/filter__group-->
  
  			<nav class="filter__group filter__group--price">
  				<p class="filter__title">Price:</p>
  				<ul class="filter__links">
  					<li class="filter__links__item">
  						<a href="#" data-filter-limit-trigger="reset" class="is-active"><span>All</span></a>
  					</li>
  					<li class="filter__links__item">
  						<a href="#" data-filter-limit-trigger="£0-29"><span>£0-29</span></a>
  					</li>
  					<li class="filter__links__item">
  						<a href="#" data-filter-limit-trigger="£30-99"><span>£30-99</span></a>
  					</li>
  					<li class="filter__links__item">
  						<a href="#" data-filter-limit-trigger="£100-499"><span>£100-499</span></a>
  					</li>
  					<li class="filter__links__item">
  						<a href="#" data-filter-limit-trigger="£500+"><span>£500+</span></a>
  					</li>
  				</ul>
  			</nav>
  			<!--/filter__group-->
  
  		</div>
  		<!--/filter-->
  	</div>
  	<!--/filter__toolbar-->
  
  	<div class="filter__canvas" data-filter-ajax-canvas aria-live="polite">
  
  		<!--DEMO-->
  		<div style="text-align: center">
  			YOUNG PEOPLE CONTENT (ON LOAD)
  
  			<div data-filter-list>
  				<div data-filter-item data-filter-sort-time="1" data-filter-sort-alpha="4" data-filter-limit="£0-29">ITEM: Time 1, Alpha 4</div>
  				<div data-filter-item data-filter-sort-time="2" data-filter-sort-alpha="1" data-filter-limit="£0-29">ITEM: Time 2, Alpha 1</div>
  				<div data-filter-item data-filter-sort-time="3" data-filter-sort-alpha="5" data-filter-limit="£0-29">ITEM: Time 3, Alpha 5</div>
  				<div data-filter-item data-filter-sort-time="4" data-filter-sort-alpha="2" data-filter-limit="£500+">ITEM: Time 4, Alpha 2</div>
  				<div data-filter-item data-filter-sort-time="5" data-filter-sort-alpha="3" data-filter-limit="£100-499">ITEM: Time 5, Alpha 3</div>
  			</div>
  		</div>
  		<!--/DEMO-->
  
  	</div>
  	<!--/filter__canvas-->
  
  	<div class="filter__load load">
  		<div data-filter-loader class="load__loader is-hidden">Loading...</div>
  		<div data-filter-error class="load__error is-hidden">Oops, there was a problem retrieving more items - please try again</div>
  	</div>
  	<!--/load-->
  
  </div>
  <!--/filter-->

<div class="clr-grey-dark" style="padding: 30px 20px">
  
  	<div class="footer">
  		<div class="footer__sitemap">
  
  			<div class="footer__sitemap__group">
  				<h2 class="footer__sitemap__group__title h4">Keep in touch</h2>
  				<nav class="footer__sitemap__group__nav">
  					<ul>
  						<li><a href="#">Our news</a></li>
  						<li><a href="#">Facebook</a></li>
  						<li><a href="#">Twitter</a></li>
  						<li><a href="#">Google+</a></li>
  						<li><a href="#">YouTube</a></li>
  					</ul>
  				</nav>
  			</div>
  			<!--/footer__sitemap__group-->
  
  			<div class="footer__sitemap__group">
  				<h2 class="footer__sitemap__group__title h4">About us</h2>
  				<nav class="footer__sitemap__group__nav">
  					<ul>
  						<li><a href="#">Who we are</a></li>
  						<li><a href="#">Our finances</a></li>
  						<li><a href="#">Resources</a></li>
  						<li><a href="#">Privacy Policy & Cookies</a></li>
  						<li><a href="#">Accessibility</a></li>
  						<li><a href="#">Jobs</a></li>
  					</ul>
  				</nav>
  			</div>
  			<!--/footer__sitemap__group-->
  
  			<div class="footer__sitemap__group">
  				<h2 class="footer__sitemap__group__title h4">Get involved</h2>
  				<nav class="footer__sitemap__group__nav">
  					<ul>
  						<li><a href="#">Fundraising</a></li>
  						<li><a href="#">Volunteering</a></li>
  						<li><a href="#">Sponsor a room</a></li>
  						<li><a href="#">Donate</a></li>
  						<li><a href="#">Campaigning</a></li>
  					</ul>
  				</nav>
  			</div>
  			<!--/footer__sitemap__group-->
  
  			<div class="footer__sitemap__group">
  				<h2 class="footer__sitemap__group__title h4">Contact us</h2>
  				<nav class="footer__sitemap__group__nav">
  					<ul>
  						<li><a href="#">Our office</a></li>
  						<li>T: <a href="tel:+4484545663400">0845 4566 3400</a></li>
  						<li>E: <a href="mailto:hello@centrepoint.org.uk">hello@centrepoint.org.uk</a></li>
  					</ul>
  				</nav>
  			</div>
  			<!--/footer__sitemap__group-->
  
  		</div>
  		<!--/footer__sitemap-->
  
  		<div class="footer__legal">
  			<p>&copy; Centrepoint 2016. Centrepoint is a registered charity in England & Wales, No. 297411</p>
  		</div>
  		<!--/footer__legal-->
  
  	</div>
  	<!--/footer-->
  
  </div>

<div class="hero">
  
  	<div class="hero__media" data-image-cover>
  		<picture>
  			<!--[if IE 9]><video style="display: none;"><![endif]-->
  			<source srcset="/assets/toolkit/images/content/hero-girl-and-graff-sml.png" media="(min-width: 768px)" />
  			<source srcset="http://placehold.it/768x300" media="(min-width: 640px)" />
  			<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
  			<!--[if IE 9]></video><![endif]-->
  			<img src="http://placehold.it/520x200" alt="" />
  		</picture>
  		<!-- MASKING: Specify top, left, and width via inline style to adjust via CMS. Height should always be the same as width -->
  		<div class="hero__media__mask"><span class="hero__media__mask__overlay"></span></div>
  	</div>
  	<!--/hero__media-->
  
  	<div class="hero__content">
  		<div class="hero__content__inner">
  
  			<div class="hero__copy">
  				<h2 class="hero__copy__title h-primary">Youth homelessness</h2>
  				<p class="lead">Our research shows that nearly 80,000 young people experience homelessness in the UK each year.</p>
  			</div>
  			<!--/hero__copy-->
  
  		</div>
  		<!--/hero__content__inner-->
  	</div>
  	<!--/hero__content-->
  
  </div>
  <!--/hero-->
  
  <hr />
  
  <div class="hero">
  
  	<div class="hero__media" data-image-cover>
  		<picture>
  			<!--[if IE 9]><video style="display: none;"><![endif]-->
  			<source srcset="/assets/toolkit/images/content/hero-girl-and-graff-sml.png" media="(min-width: 768px)" />
  			<source srcset="http://placehold.it/768x300" media="(min-width: 640px)" />
  			<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
  			<!--[if IE 9]></video><![endif]-->
  			<img src="http://placehold.it/520x200" alt="" />
  		</picture>
  		<!-- MASKING: Specify top, left, and width via inline style to adjust via CMS. Height should always be the same as width -->
  		<div class="hero__media__mask"><span class="hero__media__mask__overlay"></span></div>
  	</div>
  	<!--/hero__media-->
  
  	<div class="hero__content">
  		<div class="hero__content__inner">
  
  			<div class="hero__copy">
  				<h2 class="hero__copy__title h-primary">Youth homelessness</h2>
  				<p class="lead">Our research shows that nearly 80,000 young people experience homelessness in the UK each year.</p>
  			</div>
  			<!--/hero__copy-->
  
  		</div>
  		<!--/hero__content__inner-->
  	</div>
  	<!--/hero__content-->
  
  </div>
  <!--/hero-->
  
  <hr />
  
  <div class="hero hero--invert hero--content-right">
  
  	<div class="hero__media" data-image-cover>
  		<picture>
  			<!--[if IE 9]><video style="display: none;"><![endif]-->
  			<source srcset="/assets/toolkit/images/content/hero-girl-and-graff-sml.png" media="(min-width: 768px)" />
  			<source srcset="http://placehold.it/768x300" media="(min-width: 640px)" />
  			<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
  			<!--[if IE 9]></video><![endif]-->
  			<img src="http://placehold.it/520x200" alt="" />
  		</picture>
  		<!-- MASKING: Specify top, left, and width via inline style to adjust via CMS. Height should always be the same as width -->
  		<div class="hero__media__mask"><span class="hero__media__mask__overlay"></span></div>
  	</div>
  	<!--/hero__media-->
  
  	<div class="hero__content">
  		<div class="hero__content__inner">
  
  			<div class="hero__copy">
  				<h2 class="hero__copy__title h-primary h-parliament">Youth homelessness</h2>
  				<p class="lead">Our research shows that nearly 80,000 young people experience homelessness in the UK each year.</p>
  			</div>
  			<!--/hero__copy-->
  
  		</div>
  		<!--/hero__content__inner-->
  	</div>
  	<!--/hero__content-->
  
  </div>
  <!--/hero-->
  
  <hr />
  
  <div class="hero hero--xtall">
  
  	<div class="hero__media" data-image-cover>
  		<picture>
  			<!--[if IE 9]><video style="display: none;"><![endif]-->
  			<source srcset="/assets/toolkit/images/content/hero-girl-and-graff.png" media="(min-width: 768px)" />
  			<source srcset="http://placehold.it/768x300" media="(min-width: 640px)" />
  			<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
  			<!--[if IE 9]></video><![endif]-->
  			<img src="http://placehold.it/520x200" alt="" />
  		</picture>
  	</div>
  	<!--/hero__media-->
  
  	<div class="hero__content">
  		<div class="hero__content__inner">
  
  			<div class="hero__copy">
  				<h2 class="hero__copy__title h3">Featured event</h2>
  				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit magna tellus, vitae ultricies erat mollis ac. In sodales ipsum a dui rhoncus vestibulum. Ut et felis ac lectus ultricies malesuada. Etiam est dolor, maximus eget nisl sit amet,
  					pharetra condimentum nulla. Integer lacinia risus sed eros tristique, vitae posuere justo pharetra. Mauris lobortis sapien eu imperdiet blandit.</p>
  				<p class="hero__copy__action"><a href="#" class="btn"><span>Donate to this appeal</span></a></p>
  			</div>
  			<!--/hero__copy-->
  
  		</div>
  		<!--/hero__content__inner-->
  	</div>
  	<!--/hero__content-->
  
  </div>
  <!--/hero-->
  
  <hr />
  
  <div class="hero hero--xxtall hero--content-right">
  
  	<div class="hero__media" data-image-cover>
  		<picture>
  			<!--[if IE 9]><video style="display: none;"><![endif]-->
  			<source srcset="/assets/toolkit/images/content/hero-girl-and-bench.png" media="(min-width: 768px)" />
  			<source srcset="http://placehold.it/768x300" media="(min-width: 640px)" />
  			<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
  			<!--[if IE 9]></video><![endif]-->
  			<img src="http://placehold.it/520x200" alt="" />
  		</picture>
  		<!-- MASKING: Specify top, left, and width via inline style to adjust via CMS. Height should always be the same as width -->
  		<div class="hero__media__mask"><span class="hero__media__mask__overlay"></span></div>
  	</div>
  	<!--/hero__media-->
  
  	<div class="hero__content">
  		<div class="hero__content__inner">
  
  			<div class="hero__copy">
  				<h1 class="hero__copy__title h-primary">Welcome to Centrepoint</h1>
  				<p class="lead">Centrepoint provides a safe place to live for more than 7,800 young people, aged 16-25 every year and are commited to helping each one have a better future.</p>
  				<p class="lead"><a href="#">Read more about us</a></p>
  			</div>
  			<!--/hero__copy-->
  
  		</div>
  		<!--/hero__content__inner-->
  	</div>
  	<!--/hero__content-->
  
  </div>
  <!--/hero-->
  
  <hr />
  
  <div class="hero hero--tall hero--invert hero--half">
  
  	<div class="hero__media" data-image-cover>
  		<picture>
  			<!--[if IE 9]><video style="display: none;"><![endif]-->
  			<source srcset="/assets/toolkit/images/content/hero-boy-back-and-park-half.png" media="(min-width: 768px)" />
  			<source srcset="http://placehold.it/768x300" media="(min-width: 640px)" />
  			<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
  			<!--[if IE 9]></video><![endif]-->
  			<img src="http://placehold.it/520x200" alt="" />
  		</picture>
  		<!-- MASKING: Specify top, left, and width via inline style to adjust via CMS. Height should always be the same as width -->
  		<div class="hero__media__mask"><span class="hero__media__mask__overlay"></span></div>
  	</div>
  	<!--/hero__media-->
  
  	<div class="hero__content">
  		<div class="hero__content__inner">
  
  			<div class="hero__copy">
  				<h2 class="hero__copy__title h3">John's story</h2>
  				<blockquote class="quote quote--pull-left quote--grey-light">
  					<p>John is the eldest of three children. He had a troubled and unstable childhood, with his schizophrenic father leaving the family when John was just four years old. John's mother would often take her frustrations out on her children and as the only
  						boy, John often bore the brunt of her attacks. John's earliest memory is being kicked hard in the stomach by his mother. He was just five at the time.</p>
  				</blockquote>
  				<p class="hero__copy__action hero__copy__indent"><a href="#" class="btn"><span>Read John's full story</span></a></p>
  			</div>
  			<!--/hero__copy-->
  
  		</div>
  		<!--/hero__content__inner-->
  	</div>
  	<!--/hero__content-->
  
  </div>
  <!--/hero-->
  
  <hr />
  
  <div class="hero hero--tall hero--invert hero--half hero--content-right">
  
  	<div class="hero__media" data-image-cover>
  		<picture>
  			<!--[if IE 9]><video style="display: none;"><![endif]-->
  			<source srcset="/assets/toolkit/images/content/hero-boy-back-and-park-half.png" media="(min-width: 768px)" />
  			<source srcset="http://placehold.it/768x300" media="(min-width: 640px)" />
  			<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
  			<!--[if IE 9]></video><![endif]-->
  			<img src="http://placehold.it/520x200" alt="" />
  		</picture>
  		<!-- MASKING: Specify top, left, and width via inline style to adjust via CMS. Height should always be the same as width -->
  		<div class="hero__media__mask"><span class="hero__media__mask__overlay" style="top: 2%; left: 28%; width: 580px; height: 580px;"></span></div>
  	</div>
  	<!--/hero__media-->
  
  	<div class="hero__content">
  		<div class="hero__content__inner">
  
  			<div class="hero__copy">
  				<h2 class="hero__copy__title h3">John's story</h2>
  				<blockquote class="quote quote--pull-left quote--grey-light">
  					<p>John is the eldest of three children. He had a troubled and unstable childhood, with his schizophrenic father leaving the family when John was just four years old. John's mother would often take her frustrations out on her children and as the only
  						boy, John often bore the brunt of her attacks. John's earliest memory is being kicked hard in the stomach by his mother. He was just five at the time.</p>
  				</blockquote>
  				<p class="hero__copy__action hero__copy__indent"><a href="#" class="btn"><span>Read John's full story</span></a></p>
  			</div>
  			<!--/hero__copy-->
  
  		</div>
  		<!--/hero__content__inner-->
  	</div>
  	<!--/hero__content-->
  
  </div>
  <!--/hero-->

<div class="image">
  	<picture>
  		<!--[if IE 9]><video style="display: none;"><![endif]-->
  		<source srcset="http://placehold.it/1400x440" media="(min-width: 768px)" />
  		<source srcset="http://placehold.it/768x240" media="(min-width: 640px)" />
  		<source srcset="http://placehold.it/640x200" media="(min-width: 480px)" />
  		<!--[if IE 9]></video><![endif]-->
  		<img src="http://placehold.it/480x150" alt="" />
  	</picture>
  </div>
  <!--/image-->

<div class="imageset">
  	<div class="imageset__inner">
  		<div class="imageset__main">
  
  			<picture>
  				<!--[if IE 9]><video style="display: none;"><![endif]-->
  				<source srcset="http://placehold.it/700x440" media="(min-width: 640px)" />
  				<source srcset="http://placehold.it/640x400" media="(min-width: 480px)" />
  				<!--[if IE 9]></video><![endif]-->
  				<img src="http://placehold.it/480x300" alt="" />
  			</picture>
  
  		</div>
  		<!--/imageset__main-->
  		<div class="imageset__sub">
  
  			<picture>
  				<!--[if IE 9]><video style="display: none;"><![endif]-->
  				<source srcset="http://placehold.it/700x220/aaaaaa" media="(min-width: 640px)" />
  				<source srcset="http://placehold.it/640x200/aaaaaa" media="(min-width: 480px)" />
  				<!--[if IE 9]></video><![endif]-->
  				<img src="http://placehold.it/480x150/aaaaaa" alt="" />
  			</picture>
  
  			<picture>
  				<!--[if IE 9]><video style="display: none;"><![endif]-->
  				<source srcset="http://placehold.it/700x220/999999" media="(min-width: 640px)" />
  				<source srcset="http://placehold.it/640x200/999999" media="(min-width: 480px)" />
  				<!--[if IE 9]></video><![endif]-->
  				<img src="http://placehold.it/480x150/999999" alt="" />
  			</picture>
  
  		</div>
  		<!--/imageset__sub-->
  	</div>
  	<!--/imageset__inner-->
  </div>
  <!--/imageset-->

<div class="clr-grey-light" style="padding: 20px;">
  
  	<div class="info-set info-set--bgfill clr-white">
  		<div class="info-set__inner">
  
  			<div class="info-set__panel info-set__panel--quarter">
  				<div class="info-set__panel__inner">
  
  					<div class="stat">
  						<em class="stat__label">Date</em>
  						<strong class="stat__value stat__value--border h3">24 April, 2016</strong>
  					</div>
  					<!--/stat-->
  
  				</div>
  				<!--/info-set__panel__inner-->
  			</div>
  			<!--/info-set__inner-->
  
  			<div class="info-set__panel info-set__panel--quarter">
  				<div class="info-set__panel__inner">
  
  					<div class="stat stat--full">
  						<em class="stat__label">Registration fee</em>
  						<strong class="stat__value stat__value--border h3">£35</strong>
  					</div>
  					<!--/stat-->
  
  				</div>
  				<!--/info-set__panel__inner-->
  			</div>
  			<!--/info-set__inner-->
  
  			<div class="info-set__panel info-set__panel--quarter">
  				<div class="info-set__panel__inner">
  
  					<div class="stat stat--full">
  						<em class="stat__label">Sponsorship target</em>
  						<strong class="stat__value stat__value--border h3">£150</strong>
  					</div>
  					<!--/stat-->
  
  				</div>
  				<!--/info-set__panel__inner-->
  			</div>
  			<!--/info-set__inner-->
  
  			<div class="info-set__panel info-set__panel--quarter">
  				<div class="info-set__panel__inner">
  
  					<div class="info-set__panel__action">
  						<a href="#" class="btn"><span>Register now</span></a>
  					</div>
  					<!--/info-set__panel__action-->
  
  				</div>
  				<!--/info-set__panel__inner-->
  			</div>
  			<!--/info-set__inner-->
  
  		</div>
  		<!--/info-set__inner-->
  	</div>
  	<!--/info-set-->
  
  </div>
  
  <br />
  
  <div class="clr-grey-light" style="padding: 20px;">
  
  	<div class="info-set">
  		<div class="info-set__inner">
  
  			<div class="info-set__panel info-set__panel--half">
  				<div class="info-set__panel__inner clr-white">
  
  					<div class="stat">
  						<div class="stat__label stat__label--split">
  							<em class="stat__label__start">Start</em>
  							<em class="stat__label__end">Finish</em>
  						</div>
  						<!--/stat__label-->
  						<div class="stat__value stat__value--progress">
  							<div class="stat__value__line" style="width:80%">
  								<strong class="stat__value__roundal" aria-label="80% towards target">8.0</strong>
  							</div>
  							<!--/stat__value__line-->
  						</div>
  						<!--/stat__value-->
  					</div>
  					<!--/stat-->
  
  				</div>
  				<!--/info-set__panel__inner-->
  			</div>
  			<!--/info-set__panel-->
  
  			<div class="info-set__panel info-set__panel--quarter">
  				<div class="info-set__panel__inner clr-white">
  
  					<div class="stat stat--full">
  						<em class="stat__label">Supporters</em>
  						<strong class="stat__value h1">843</strong>
  					</div>
  					<!--/stat-->
  
  				</div>
  				<!--/info-set__panel__inner-->
  			</div>
  			<!--/info-set__panel-->
  
  			<div class="info-set__panel info-set__panel--quarter">
  				<div class="info-set__panel__inner clr-white">
  
  					<div class="stat stat--full">
  						<em class="stat__label">Target</em>
  						<strong class="stat__value h1">£20,000</strong>
  					</div>
  					<!--/stat-->
  
  				</div>
  				<!--/info-set__panel__inner-->
  			</div>
  			<!--/info-set__panel-->
  
  		</div>
  		<!--/info-set__inner-->
  	</div>
  	<!--/info-set-->
  
  </div>
  
  <br />
  
  <div class="clr-grey-light" style="padding: 20px;">
  
  	<div class="info-set clr-white">
  		<div class="info-set__inner">
  
  			<div class="info-set__panel info-set__panel--quarter">
  				<div class="info-set__panel__inner">
  
  					<div class="stat stat--full">
  						<em class="stat__label">Price</em>
  						<strong class="stat__value stat__value--border h2">£144</strong>
  					</div>
  					<!--/stat-->
  
  				</div>
  				<!--/info-set__panel__inner-->
  			</div>
  			<!--/info-set__panel-->
  
  			<div class="info-set__panel info-set__panel--half">
  				<div class="info-set__panel__inner clr-white">
  
  					<div class="stat stat--full">
  						<em class="stat__label">What we provide</em>
  						<div class="stat__value stat__value--border">
  							<ul class="ul-mini">
  								<li>Gives a safe place to sleep</li>
  								<li>Provides access to health check-ups</li>
  								<li>Gives a young person nutritious meals</li>
  							</ul>
  						</div>
  						<!--/stat__value-->
  					</div>
  					<!--/stat-->
  
  				</div>
  				<!--/info-set__panel__inner-->
  			</div>
  			<!--/info-set__panel-->
  
  			<div class="info-set__panel info-set__panel--quarter">
  				<div class="info-set__panel__inner clr-white">
  
  					<div class="info-set__panel__action info-set__panel__action--top-pad">
  						<a href="#" class="btn"><span>Buy now</span></a>
  					</div>
  					<!--/info-set__panel__action-->
  
  				</div>
  				<!--/info-set__panel__inner-->
  			</div>
  			<!--/info-set__panel-->
  
  		</div>
  		<!--/info-set__inner-->
  	</div>
  	<!--/info-set-->
  
  </div>

<p class="labelled-images">
  	<span class="labelled-images__label">Cards accepted:</span>
  	<img src="http://placehold.it/50x50" alt="" />
  	<img src="http://placehold.it/50x50" alt="" />
  	<img src="http://placehold.it/50x50" alt="" />
  	<img src="http://placehold.it/50x50" alt="" />
  </p>

<div class="load">
  	<div class="load__loader">Loading...</div>
  	<div class="load__error">Oops, there was a problem retrieving more items - please try again</div>
  </div>
  <!--/load-->

<div style="max-width: 720px; margin: 0 auto;">
  
  	<div class="map">
  		<iframe class="map__embed" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.9573650505386!2d-0.0736466842297635!3d51.51399817963621!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876034abe110b8d%3A0x9848ab1be2552a52!2sCentrepoint%2C+Central+House%2C+25+Camperdown+St%2C+London+E1+8DZ%2C+UK!5e0!3m2!1sen!2sus!4v1463673294975"
  		 width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  		<a class="map__fallback" href="https://www.google.com/maps/place/Centrepoint+Central+House+25+Camperdown+St+London+E1+8DZ/">
      <img alt="Centrepoint, Central House, 25 Camperdown St, London E1 8DZ" src="http://maps.googleapis.com/maps/api/staticmap?center=Centrepoint+Central+House+25+Camperdown+St+London+E1+8DZ&zoom=16&scale=false&size=640x450&maptype=roadmap&format=png&visual_refresh=true&markers=size:mid%7Ccolor:0xff0000%7Clabel:1%7CCentrepoint+Central+House+25+Camperdown+St+London+E1+8DZ" />
    </a>
  	</div>
  	<!--/map-->
  
  </div>

<div class="clr-grey-light" style="padding: 30px 20px">
  
  	<div class="masonry">
  		<h2 class="masonry__title title">Bricks</h2>
  		<div class="masonry__list">
  
  			<div class="masonry__item">
  				<div class="clr-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  			</div>
  			<!--/masonry__item-->
  
  			<div class="masonry__item">
  				<div class="clr-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  			</div>
  			<!--/masonry__item-->
  
  			<div class="masonry__item">
  				<div class="clr-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  				</div>
  			</div>
  			<!--/masonry__item-->
  
  			<div class="masonry__item">
  				<div class="clr-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  				</div>
  			</div>
  			<!--/masonry__item-->
  
  			<div class="masonry__item">
  				<div class="clr-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  			</div>
  			<!--/masonry__item-->
  
  			<div class="masonry__item">
  				<div class="clr-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  			</div>
  			<!--/masonry__item-->
  
  		</div>
  		<!--/masonry__list-->
  
  		<div class="masonry__more">
  			<a href="#" class="btn"><span>See more</span></a>
  		</div>
  		<!--/masonry__more-->
  
  	</div>
  	<!--/masonry-->
  
  </div>

<div class="clr-grey-light" style="padding: 30px 20px">
  
  	<div class="masonry masonry--articles">
  		<h2 class="masonry__title title">Latest news</h2>
  		<div class="masonry__list">
  
  			<div class="masonry__item">
  
  				<div class="article clr-white">
  					<div class="article__timestamp"><time datetime="2016-08-06">6 August, 2016</time></div>
  					<h2 class="article__title h4 h-secondary"><a href="#">Formally homeless Londoner opens his first art collection at Turner House</a></h2>
  					<div class="article__summary">
  						<div class="article__media">
  							<a href="#">
                <img src="http://placehold.it/170x110" alt="" />
              </a>
  						</div>
  						<!--/article__summary__media-->
  						<div class="article__copy">
  							<p>We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.</p>
  							<p class="article__action"><a href="#" aria-label="Read more: Formally homeless Londoner opens his first art collection at Turner House">Read more</a></p>
  						</div>
  						<!--/article__copy-->
  					</div>
  					<!--/article__summary-->
  				</div>
  				<!--/article-->
  
  			</div>
  			<!--/masonry__item-->
  
  			<div class="masonry__item">
  
  				<div class="article clr-white">
  					<div class="article__timestamp"><time datetime="2016-08-06">6 August, 2016</time></div>
  					<h2 class="article__title h4 h-secondary"><a href="#">Homelessness needs long-term solutions, not sticking plaster</a></h2>
  					<div class="article__summary">
  						<div class="article__copy">
  							<p>We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.</p>
  							<p class="article__action"><a href="#" aria-label="Read more: Formally homeless Londoner opens his first art collection at Turner House">Read more</a></p>
  						</div>
  						<!--/article__copy-->
  					</div>
  					<!--/article__summary-->
  				</div>
  				<!--/article-->
  
  			</div>
  			<!--/masonry__item-->
  
  			<div class="masonry__item">
  
  				<div class="article clr-white">
  					<div class="article__timestamp"><time datetime="2016-08-06">6 August, 2016</time></div>
  					<h2 class="article__title h4 h-secondary"><a href="#">Formally homeless Londoner opens his first art collection at Turner House</a></h2>
  				</div>
  				<!--/article-->
  
  			</div>
  			<!--/masonry__item-->
  
  			<div class="masonry__item">
  
  				<div class="article clr-white">
  					<div class="article__timestamp"><time datetime="2016-08-06">6 August, 2016</time></div>
  					<h2 class="article__title h4 h-secondary"><a href="#">Homelessness needs long-term solutions, not sticking plaster</a></h2>
  					<div class="article__summary">
  						<div class="article__copy">
  							<p>We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.</p>
  							<p class="article__action"><a href="#" aria-label="Read more: Formally homeless Londoner opens his first art collection at Turner House">Read more</a></p>
  						</div>
  						<!--/article__copy-->
  					</div>
  					<!--/article__summary-->
  				</div>
  				<!--/article-->
  
  			</div>
  			<!--/masonry__item-->
  
  			<div class="masonry__item">
  
  				<div class="article clr-white">
  					<div class="article__timestamp"><time datetime="2016-08-06">6 August, 2016</time></div>
  					<h2 class="article__title h4 h-secondary"><a href="#">Homelessness needs long-term solutions, not sticking plaster</a></h2>
  				</div>
  				<!--/article-->
  
  			</div>
  			<!--/masonry__item-->
  
  			<div class="masonry__item">
  
  				<div class="article clr-white">
  					<div class="article__timestamp"><time datetime="2016-08-06">6 August, 2016</time></div>
  					<h2 class="article__title h4 h-secondary"><a href="#">Homelessness needs long-term solutions, not sticking plaster</a></h2>
  					<div class="article__summary">
  						<div class="article__copy">
  							<p>We believe in being responsible and transparent with our finances. We treat every donation with respect and do our best to ensure that as much of it as possible is spent on delivering care to young people in need.</p>
  							<p class="article__action"><a href="#" aria-label="Read more: Formally homeless Londoner opens his first art collection at Turner House">Read more</a></p>
  						</div>
  						<!--/article__copy-->
  					</div>
  					<!--/article__summary-->
  				</div>
  				<!--/article-->
  
  			</div>
  			<!--/masonry__item-->
  
  			<div class="masonry__more" data-load-more>
  				<a href="/assets/toolkit/ajaxhtml/masonry--articles--set-1.html" class="btn" data-load-more-trigger><span>See more news</span></a>
  			</div>
  			<!--/media-block-list__more-->
  
  		</div>
  		<!--/masonry__list-->
  
  	</div>
  	<!--/masonry-->
  
  </div>

<div class="masthead">
  	<div class="masthead__inner">
  
  		<div class="masthead__logo">
  			<a href="#"><img src="/assets/toolkit/images/logo-centrepoint.png" alt="Centrepoint: Give homeless young people a future" /></a>
  		</div>
  		<!--/masthead__logo-->
  
  		<nav class="masthead__nav">
  			<ul class="masthead__nav__list">
  				<li class="masthead__nav__item"><a href="#">Contact us</a></li>
  				<li class="masthead__nav__item"><a href="#">For professionals</a></li>
  				<li class="masthead__nav__item masthead__nav__item--basket"><a href="#"><i class="icon-basket"><span class="icon-hide-text">Basket</span></i> (2 items)</a></li>
  				<li class="masthead__nav__item masthead__nav__item--search" data-search-toggle>
  
  					<a href="#form-search" class="masthead__nav__search__toggle masthead__nav__search__toggle--show" data-search-trigger-show aria-label="Show search form"><i class="icon-search"><span class="icon-hide-text">Show search</span></i></a>
  
  					<a href="#form-search" class="masthead__nav__search__toggle masthead__nav__search__toggle--hide" data-search-trigger-hide aria-label="Hide search form"><i class="icon-cross"><span class="icon-hide-text">Hide search</span></i></a>
  
  					<form role="search" class="form--singlet masthead__nav__search__form" method="post" action="#" id="form-search" data-search-toggle-form data-fuzzy-search="/assets/toolkit/json/countries.json" aria-hidden="true">
  						<div class="form--singlet__field">
  							<input class="form--singlet__input" type="text" id="form-search__ff-search" name="form-search__ff-search" placeholder="Search" aria-label="Search" data-search-toggle-field data-fuzzy-search-field />
  						</div>
  						<div class="form--singlet__action">
  							<button class="form--singlet__button" type="submit" data-search-toggle-submit><i class="icon-search"><span class="icon-hide-text">Go</span></i></button>
  						</div>
  					</form>
  
  				</li>
  			</ul>
  		</nav>
  		<!--/masthead__nav-->
  
  		<div class="masthead__donate">
  			<a href="#" class="btn btn--primary"><span>Donate</span></a>
  		</div>
  		<!--/masthead__donate-->
  
  	</div>
  	<!--/masthead-->
  </div>
  <!--/masthead-->

<div class="media-block">
  	<div class="media-block__inner">
  
  		<div class="media-block__media">
  			<div class="media-block__media__inner">
  				<a href="#"><img src="http://placehold.it/440x300" alt="" /></a>
  			</div>
  			<!--/media-block__media__inner-->
  		</div>
  		<!--/media-block__media-->
  
  		<div class="media-block__copy">
  			<div class="media-block__copy__inner">
  
  				<h2 class="media-block__title h3">Our Patron, Prince William</h2>
  				<p>This is a really short but detailed description of who Prince William is and what he does for Centrepoint. It could be that you provide a link to a separate page for more detailed blurb about him, but you may choose to keep it really simple.</p>
  
  			</div>
  			<!--/media-block__copy__inner-->
  		</div>
  		<!--/media-block__copy-->
  
  	</div>
  	<!--/media-block__inner-->
  </div>
  <!--/media-block-->
  
  <hr />
  
  <div class="media-block media-block--no-media">
  	<div class="media-block__inner">
  
  		<div class="media-block__copy">
  			<div class="media-block__copy__inner">
  
  				<h2 class="media-block__title h3">Our Patron, Prince William</h2>
  				<p>This is a really short but detailed description of who Prince William is and what he does for Centrepoint. It could be that you provide a link to a separate page for more detailed blurb about him, but you may choose to keep it really simple.</p>
  
  			</div>
  			<!--/media-block__copy__inner-->
  		</div>
  		<!--/media-block__copy-->
  
  	</div>
  	<!--/media-block__inner-->
  </div>
  <!--/media-block-->
  
  <hr />
  
  <div class="media-block">
  	<div class="media-block__inner">
  
  		<div class="media-block__media">
  			<div class="media-block__media__inner">
  				<figure class="media-block__media__figure">
  					<a href="#"><img src="http://placehold.it/440x300" alt="" /></a>
  					<figcaption>Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</figcaption>
  				</figure>
  			</div>
  			<!--/media-block__media__inner-->
  		</div>
  		<!--/media-block__media-->
  
  		<div class="media-block__copy">
  			<div class="media-block__copy__inner">
  
  				<h2 class="media-block__title h3">Our Patron, Prince William</h2>
  				<p>This is a really short but detailed description of who Prince William is and what he does for Centrepoint. It could be that you provide a link to a separate page for more detailed blurb about him, but you may choose to keep it really simple.</p>
  
  			</div>
  			<!--/media-block__copy__inner-->
  		</div>
  		<!--/media-block__copy-->
  
  	</div>
  	<!--/media-block__inner-->
  </div>
  <!--/media-block-->
  
  <hr />
  
  
  <div class="media-block">
  	<div class="media-block__inner">
  
  		<div class="media-block__media">
  			<div class="media-block__media__inner">
  				<iframe width="560" height="315" src="https://www.youtube.com/embed/JtjPWx_iqXY" frameborder="0" allowfullscreen></iframe>
  			</div>
  			<!--/media-block__media__inner-->
  		</div>
  		<!--/media-block__media-->
  
  		<div class="media-block__copy">
  			<div class="media-block__copy__inner">
  
  				<h2 class="media-block__title h3">Our Patron, Prince William</h2>
  				<p>This is a really short but detailed description of who Prince William is and what he does for Centrepoint. It could be that you provide a link to a separate page for more detailed blurb about him, but you may choose to keep it really simple.</p>
  
  			</div>
  			<!--/media-block__copy__inner-->
  		</div>
  		<!--/media-block__copy-->
  
  	</div>
  	<!--/media-block__inner-->
  </div>
  <!--/media-block-->
  
  <hr />
  
  <div class="media-block clr-grey-light">
  	<div class="media-block__inner">
  
  		<div class="media-block__media">
  			<div class="media-block__media__inner">
  				<a href="#"><img src="http://placehold.it/440x300" alt="" /></a>
  			</div>
  			<!--/media-block__media__inner-->
  		</div>
  		<!--/media-block__media-->
  
  		<div class="media-block__copy">
  			<div class="media-block__copy__inner">
  
  				<h2 class="media-block__title h3">Our Patron, Prince William</h2>
  				<p>This is a really short but detailed description of who Prince William is and what he does for Centrepoint. It could be that you provide a link to a separate page for more detailed blurb about him, but you may choose to keep it really simple.</p>
  
  			</div>
  			<!--/media-block__copy__inner-->
  		</div>
  		<!--/media-block__copy-->
  
  	</div>
  	<!--/media-block__inner-->
  </div>
  <!--/media-block-->
  
  <hr />
  
  <div class="media-block media-block--keyline">
  	<div class="media-block__inner">
  
  		<div class="media-block__media">
  			<div class="media-block__media__inner">
  				<a href="#"><img src="http://placehold.it/440x300" alt="" /></a>
  			</div>
  			<!--/media-block__media__inner-->
  		</div>
  		<!--/media-block__media-->
  
  		<div class="media-block__copy">
  			<div class="media-block__copy__inner">
  
  				<h2 class="media-block__title h3">Our Patron, Prince William</h2>
  				<p>This is a really short but detailed description of who Prince William is and what he does for Centrepoint. It could be that you provide a link to a separate page for more detailed blurb about him, but you may choose to keep it really simple.</p>
  
  			</div>
  			<!--/media-block__copy__inner-->
  		</div>
  		<!--/media-block__copy-->
  
  	</div>
  	<!--/media-block__inner-->
  </div>
  <!--/media-block-->
  
  <hr />
  
  <div class="media-block media-block--cover clr-teal">
  	<div class="media-block__inner">
  
  		<div class="media-block__media">
  			<div class="media-block__media__inner" data-image-cover>
  				<a href="#"><img src="http://placehold.it/440x300" alt="" /></a>
  			</div>
  			<!--/media-block__media__inner-->
  		</div>
  		<!--/media-block__media-->
  
  		<div class="media-block__copy">
  			<div class="media-block__copy__inner">
  
  				<h2 class="media-block__title h3">Our Patron, Prince William</h2>
  				<p>This is a really short but detailed description of who Prince William is and what he does for Centrepoint. It could be that you provide a link to a separate page for more detailed blurb about him, but you may choose to keep it really simple.</p>
  				<p>This is a really short but detailed description of who Prince William is and what he does for Centrepoint. It could be that you provide a link to a separate page for more detailed blurb about him, but you may choose to keep it really simple.</p>
  				<p>This is a really short but detailed description of who Prince William is and what he does for Centrepoint. It could be that you provide a link to a separate page for more detailed blurb about him, but you may choose to keep it really simple.</p>
  
  			</div>
  			<!--/media-block__copy__inner-->
  		</div>
  		<!--/media-block__copy-->
  
  	</div>
  	<!--/media-block__inner-->
  </div>
  <!--/media-block-->
  
  <hr />
  
  <div class="clr-grey-light" style="padding: 20px">
  
  	<div class="media-block media-block--cover media-block--lrg clr-white">
  		<div class="media-block__inner">
  
  			<div class="media-block__media">
  				<div class="media-block__media__inner">
  
  					<div class="map media-block__media__map">
  						<iframe class="map__embed media-block__media__map__embed" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.9573650505386!2d-0.0736466842297635!3d51.51399817963621!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876034abe110b8d%3A0x9848ab1be2552a52!2sCentrepoint%2C+Central+House%2C+25+Camperdown+St%2C+London+E1+8DZ%2C+UK!5e0!3m2!1sen!2sus!4v1463673294975"
  						 width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
  						<a class="map__fallback media-block__media__map__link" href="https://www.google.com/maps/place/Centrepoint+Central+House+25+Camperdown+St+London+E1+8DZ/">
              <img alt="Centrepoint, Central House, 25 Camperdown St, London E1 8DZ" src="http://maps.googleapis.com/maps/api/staticmap?center=Centrepoint+Central+House+25+Camperdown+St+London+E1+8DZ&zoom=16&scale=false&size=640x400&maptype=roadmap&format=png&visual_refresh=true&markers=size:mid%7Ccolor:0xff0000%7Clabel:1%7CCentrepoint+Central+House+25+Camperdown+St+London+E1+8DZ" />
            </a>
  					</div>
  					<!--/map-->
  
  				</div>
  				<!--/media-block__media__inner-->
  			</div>
  			<!--/media-block__media-->
  
  			<div class="media-block__copy">
  				<div class="media-block__copy__inner">
  
  					<div class="media-block__copy__nuggets">
  
  						<div class="media-block__copy__nuggets__item">
  							<h2 class="media-block__title h4">By train</h2>
  							<p>This is a simple direction for users arriving by tube. lorem</p>
  						</div>
  						<!--/media-block__copy__nuggets__item-->
  						<div class="media-block__copy__nuggets__item">
  							<h2 class="media-block__title h4">By train</h2>
  							<p>This is a simple direction for users arriving by tube. lorem</p>
  						</div>
  						<!--/media-block__copy__nuggets__item-->
  						<div class="media-block__copy__nuggets__item">
  							<h2 class="media-block__title h4">By train</h2>
  							<p>This is a simple direction for users arriving by tube. lorem</p>
  						</div>
  						<!--/media-block__copy__nuggets__item-->
  						<div class="media-block__copy__nuggets__item">
  							<h2 class="media-block__title h4">By train</h2>
  							<p>This is a simple direction for users arriving by tube. lorem</p>
  						</div>
  						<!--/media-block__copy__nuggets__item-->
  
  					</div>
  					<!--/media-block__copy__nuggets-->
  
  				</div>
  				<!--/media-block__copy__inner-->
  			</div>
  			<!--/media-block__copy-->
  
  		</div>
  		<!--/media-block__inner-->
  	</div>
  	<!--/media-block-->
  
  </div>

<hr />
  
  <div class="media-block-grid">
  	<div class="media-block-grid__inner">
  
  		<div class="media-block-grid__item">
  
  			<div class="media-block media-block--cover clr-teal">
  				<div class="media-block__inner">
  
  					<div class="media-block__media">
  						<div class="media-block__media__inner" data-image-cover>
  							<a href="#"><img src="http://placehold.it/440x240" alt="" /></a>
  						</div>
  						<!--/media-block__media__inner-->
  					</div>
  					<!--/media-block__media-->
  
  					<div class="media-block__copy">
  						<div class="media-block__copy__inner">
  
  							<h2 class="media-block__title h-secondary h4"><a href="#">Tanya</a></h2>
  							<p>Giving a young person a place to stay is the first of many steps toward overcoming their homelessness in the long term.</p>
  
  						</div>
  						<!--/media-block__copy__inner-->
  					</div>
  					<!--/media-block__copy-->
  
  				</div>
  				<!--/media-block__inner-->
  			</div>
  			<!--/media-block-->
  
  		</div>
  		<!--/media-block-grid__item-->
  		<div class="media-block-grid__item">
  
  			<div class="media-block media-block--cover clr-teal">
  				<div class="media-block__inner">
  
  					<div class="media-block__media">
  						<div class="media-block__media__inner" data-image-cover>
  							<a href="#"><img src="http://placehold.it/440x240" alt="" /></a>
  						</div>
  						<!--/media-block__media__inner-->
  					</div>
  					<!--/media-block__media-->
  
  					<div class="media-block__copy">
  						<div class="media-block__copy__inner">
  
  							<h2 class="media-block__title h-secondary h4"><a href="#">Tanya</a></h2>
  							<p>Giving a young person a place to stay is the first of many steps toward overcoming their homelessness in the long term.</p>
  
  						</div>
  						<!--/media-block__copy__inner-->
  					</div>
  					<!--/media-block__copy-->
  
  				</div>
  				<!--/media-block__inner-->
  			</div>
  			<!--/media-block-->
  
  		</div>
  		<!--/media-block-grid__item-->
  		<div class="media-block-grid__item">
  
  			<div class="media-block media-block--cover clr-teal">
  				<div class="media-block__inner">
  
  					<div class="media-block__media">
  						<div class="media-block__media__inner" data-image-cover>
  							<a href="#"><img src="http://placehold.it/440x240" alt="" /></a>
  						</div>
  						<!--/media-block__media__inner-->
  					</div>
  					<!--/media-block__media-->
  
  					<div class="media-block__copy">
  						<div class="media-block__copy__inner">
  
  							<h2 class="media-block__title h-secondary h4"><a href="#">Tanya</a></h2>
  							<p>Giving a young person a place to stay is the first of many steps toward overcoming their homelessness in the long term.</p>
  
  						</div>
  						<!--/media-block__copy__inner-->
  					</div>
  					<!--/media-block__copy-->
  
  				</div>
  				<!--/media-block__inner-->
  			</div>
  			<!--/media-block-->
  
  		</div>
  		<!--/media-block-grid__item-->
  		<div class="media-block-grid__item">
  
  			<div class="media-block media-block--cover clr-teal">
  				<div class="media-block__inner">
  
  					<div class="media-block__media">
  						<div class="media-block__media__inner" data-image-cover>
  							<a href="#"><img src="http://placehold.it/440x240" alt="" /></a>
  						</div>
  						<!--/media-block__media__inner-->
  					</div>
  					<!--/media-block__media-->
  
  					<div class="media-block__copy">
  						<div class="media-block__copy__inner">
  
  							<h2 class="media-block__title h-secondary h4"><a href="#">Tanya</a></h2>
  							<p>Giving a young person a place to stay is the first of many steps toward overcoming their homelessness in the long term.</p>
  
  						</div>
  						<!--/media-block__copy__inner-->
  					</div>
  					<!--/media-block__copy-->
  
  				</div>
  				<!--/media-block__inner-->
  			</div>
  			<!--/media-block-->
  
  		</div>
  		<!--/media-block-grid__item-->
  
  	</div>
  	<!--/media-block-grid__inner-->
  </div>
  <!--/media-block-grid-->

<div class="media-block-list">
  
  	<div class="media-block-list__item">
  
  		<div class="media-block media-block--keyline">
  			<div class="media-block__inner">
  
  				<div class="media-block__media">
  					<div class="media-block__media__inner">
  						<a href="#"><img src="http://placehold.it/440x300" alt="" /></a>
  					</div>
  					<!--/media-block__media__inner-->
  				</div>
  				<!--/media-block__media-->
  
  				<div class="media-block__copy">
  					<div class="media-block__copy__inner">
  
  						<h3 class="media-block__title h-small h-secondary"><a href="#">Tanya</a></h3>
  						<p>This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet accumsan.</p>
  						<p><a href="#">Read more</a></p>
  
  					</div>
  					<!--/media-block__copy__inner-->
  				</div>
  				<!--/media-block__copy-->
  
  			</div>
  			<!--/media-block__inner-->
  		</div>
  		<!--/media-block-->
  
  	</div>
  	<!--/media-block-list__item-->
  	<div class="media-block-list__item">
  
  		<div class="media-block media-block--keyline">
  			<div class="media-block__inner">
  
  				<div class="media-block__media">
  					<div class="media-block__media__inner">
  						<a href="#"><img src="http://placehold.it/440x300" alt="" /></a>
  					</div>
  					<!--/media-block__media__inner-->
  				</div>
  				<!--/media-block__media-->
  
  				<div class="media-block__copy">
  					<div class="media-block__copy__inner">
  
  						<h3 class="media-block__title h-small h-secondary"><a href="#">Tanya</a></h3>
  						<p>This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet accumsan.</p>
  						<p><a href="#">Read more</a></p>
  
  					</div>
  					<!--/media-block__copy__inner-->
  				</div>
  				<!--/media-block__copy-->
  
  			</div>
  			<!--/media-block__inner-->
  		</div>
  		<!--/media-block-->
  
  	</div>
  	<!--/media-block-list__item-->
  	<div class="media-block-list__item">
  
  		<div class="media-block media-block--keyline">
  			<div class="media-block__inner">
  
  				<div class="media-block__media">
  					<div class="media-block__media__inner">
  						<a href="#"><img src="http://placehold.it/440x300" alt="" /></a>
  					</div>
  					<!--/media-block__media__inner-->
  				</div>
  				<!--/media-block__media-->
  
  				<div class="media-block__copy">
  					<div class="media-block__copy__inner">
  
  						<h3 class="media-block__title h-small h-secondary"><a href="#">Tanya</a></h3>
  						<p>This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet accumsan.</p>
  						<p><a href="#">Read more</a></p>
  
  					</div>
  					<!--/media-block__copy__inner-->
  				</div>
  				<!--/media-block__copy-->
  
  			</div>
  			<!--/media-block__inner-->
  		</div>
  		<!--/media-block-->
  
  	</div>
  	<!--/media-block-list__item-->
  	<div class="media-block-list__item">
  
  		<div class="media-block media-block--keyline">
  			<div class="media-block__inner">
  
  				<div class="media-block__media">
  					<div class="media-block__media__inner">
  						<a href="#"><img src="http://placehold.it/440x300" alt="" /></a>
  					</div>
  					<!--/media-block__media__inner-->
  				</div>
  				<!--/media-block__media-->
  
  				<div class="media-block__copy">
  					<div class="media-block__copy__inner">
  
  						<h3 class="media-block__title h-small h-secondary"><a href="#">Tanya</a></h3>
  						<p>This should be the initial paragraph of a real story that goes in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc augue justo, rutrum in posuere eu, tincidunt et massa. Etiam at eros sollicitudin nisl imperdiet accumsan.</p>
  						<p><a href="#">Read more</a></p>
  
  					</div>
  					<!--/media-block__copy__inner-->
  				</div>
  				<!--/media-block__copy-->
  
  			</div>
  			<!--/media-block__inner-->
  		</div>
  		<!--/media-block-->
  
  	</div>
  	<!--/media-block-list__item-->
  
  </div>
  <!--/media-block-list-->

<nav class="nav" data-nav data-sticky>
  	<div class="nav__outer" data-sticky-item>
  		<div class="nav__inner" aria-haspopup="true">
  
  			<a href="#navigation" class="nav__toggle" data-nav-toggle>Menu</a>
  
  			<div class="nav__main" data-nav-main aria-hidden="true">
  				<ul class="nav__list" id="navigation">
  
  					<li class="nav__list__item" data-nav-has-sub aria-haspopup="true">
  						<div class="nav__list__link">
  							<a href="#" class="nav__list__anchor">Youth Homelessness</a>
  							<a href="#" class="nav__list__toggle" data-nav-sub-toggle><span class="accessible-hide">Toggle Youth Homelessness sub nav</span></a>
  						</div>
  						<div class="nav__sub" aria-hidden="true">
  							<ul class="nav__sub__list">
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">The Issue</a></li>
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">The Solution</a></li>
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Impact & Success</a></li>
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Real Stories</a></li>
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Get Help Now</a></li>
  							</ul>
  							<a href="#" class="nav__sub__close" data-nav-sub-close><span class="accessible-hide">Close Youth Homelessness sub nav</span></a>
  						</div>
  						<!--/nav__sub-->
  					</li>
  
  					<li class="nav__list__item is-current" data-nav-has-sub aria-haspopup="true">
  						<div class="nav__list__link">
  							<a href="#" class="nav__list__anchor">What We Do</a>
  							<a href="#" class="nav__list__toggle" data-nav-sub-toggle><span class="accessible-hide">Toggle What We Do sub nav</span></a>
  						</div>
  						<div class="nav__sub" aria-hidden="true">
  							<ul class="nav__sub__list">
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Housing</a></li>
  								<li class="nav__sub__list__item is-current"><a href="#" class="nav__sub__list__link">Health</a></li>
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Learning</a></li>
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Moving on</a></li>
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Influencing Policy & Campaigning</a></li>
  							</ul>
  							<a href="#" class="nav__sub__close" data-nav-sub-close><span class="accessible-hide">Close What We Do sub nav</span></a>
  						</div>
  						<!--/nav__sub-->
  					</li>
  
  					<li class="nav__list__item" data-nav-has-sub aria-haspopup="true">
  						<div class="nav__list__link">
  							<a href="#" class="nav__list__anchor">About Us</a>
  							<a href="#" class="nav__list__toggle" data-nav-sub-toggle><span class="accessible-hide">Toggle About Us sub nav</span></a>
  						</div>
  						<div class="nav__sub" aria-hidden="true">
  							<ul class="nav__sub__list">
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Who We Are</a></li>
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Our Finances</a></li>
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Our Supporters</a></li>
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Centralpoint Parliament</a></li>
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Resources</a></li>
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">News</a></li>
  							</ul>
  							<a href="#" class="nav__sub__close" data-nav-sub-close><span class="accessible-hide">Close About Us sub nav</span></a>
  						</div>
  						<!--/nav__sub-->
  					</li>
  
  					<li class="nav__list__item" data-nav-has-sub aria-haspopup="true">
  						<div class="nav__list__link">
  							<a href="#" class="nav__list__anchor">Get Involved</a>
  							<a href="#" class="nav__list__toggle" data-nav-sub-toggle><span class="accessible-hide">Toggle Get Involved sub nav</span></a>
  						</div>
  						<div class="nav__sub" aria-hidden="true">
  							<ul class="nav__sub__list">
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Fundraising & Events</a></li>
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Volunteering</a></li>
  								<li class="nav__sub__list__item"><a href="#" class="nav__sub__list__link">Campaigning</a></li>
  							</ul>
  							<a href="#" class="nav__sub__close" data-nav-sub-close><span class="accessible-hide">Close Get Involved sub nav</span></a>
  						</div>
  						<!--/nav__sub-->
  					</li>
  
  					<li class="nav__list__item">
  						<div class="nav__list__link"><a href="#" class="nav__list__anchor">Sponsor a Room</a></div>
  					</li>
  
  					<li class="nav__list__item">
  						<div class="nav__list__link"><a href="#" class="nav__list__anchor">Buy a Gift</a></div>
  					</li>
  
  					<li class="nav__list__item nav__list__item--mobile-only">
  						<div class="nav__list__link"><a href="#" class="nav__list__anchor">For professionals</a></div>
  					</li>
  
  					<li class="nav__list__item nav__list__item--mobile-only">
  						<div class="nav__list__link"><a href="#" class="nav__list__anchor">Contact us</a></div>
  					</li>
  
  					<li class="nav__list__item nav__list__item--mobile-only">
  						<div class="nav__list__link"><a href="#" class="nav__list__anchor">Basket (2 items)</a></div>
  					</li>
  
  				</ul>
  				<!--/nav__list-->
  
  				<form class="form--singlet nav__search__form" method="post" action="#" id="form-search-alt">
  					<div class="form--singlet__field">
  						<input class="form--singlet__input" type="text" id="form-search-alt__ff-search" name="form-search-alt__ff-search" placeholder="Search" aria-label="Search" />
  					</div>
  					<div class="form--singlet__action">
  						<button class="form--singlet__button" type="submit"><i class="icon-search"><span class="icon-hide-text">Go</span></i></button>
  					</div>
  				</form>
  
  			</div>
  			<!--/nav__main-->
  
  			<div class="nav__donate">
  				<a href="#" class="btn btn--primary btn--fluid"><span>Donate</span></a>
  			</div>
  			<!--/nav__donate-->
  
  		</div>
  		<!--/nav__inner-->
  	</div>
  	<!--/nav__outer-->
  </nav>

<div class="overlays">
  	<div class="overlays__inner">
  
  		<div class="overlays__item">
  			<div class="overlays__item__inner">
  
  				<a href="#" class="overlays__item__link">
  					<div class="overlays__item__media" data-image-cover>
  						<picture>
  							<!--[if IE 9]><video style="display: none;"><![endif]-->
  							<source srcset="/assets/toolkit/images/content/overlay-girl-blonde.png" media="(min-width: 640px)" />
  							<!--[if IE 9]></video><![endif]-->
  							<img class="overlays__item__media" src="http://placehold.it/320x280" alt="" />
  						</picture>
  					</div>
  					<!--/overlays__item__media-->
  					<div class="overlays__item__content">
  						<div class="overlays__item__content__inner">
  							<h2 class="h3">Services</h2>
  							<p class="lead">We provide a safe place for young people to live and give them a better future.</p>
  						</div>
  						<!--/overlays__item__content__inner-->
  					</div>
  					<!--/overlays__item__content-->
  				</a>
  
  			</div>
  			<!--/overlays__item__inner-->
  		</div>
  		<!--/overlays__item-->
  		<div class="overlays__item">
  			<div class="overlays__item__inner">
  
  				<a href="#" class="overlays__item__link">
  					<div class="overlays__item__media" data-image-cover>
  						<picture>
  							<!--[if IE 9]><video style="display: none;"><![endif]-->
  							<source srcset="/assets/toolkit/images/content/overlay-girl-blonde.png" media="(min-width: 640px)" />
  							<!--[if IE 9]></video><![endif]-->
  							<img class="overlays__item__media" src="http://placehold.it/320x280" alt="" />
  						</picture>
  					</div>
  					<!--/overlays__item__media-->
  					<div class="overlays__item__content">
  						<div class="overlays__item__content__inner">
  							<h2 class="h3">Services</h2>
  							<p class="lead">We provide a safe place for young people to live and give them a better future.</p>
  						</div>
  						<!--/overlays__item__content__inner-->
  					</div>
  					<!--/overlays__item__content-->
  				</a>
  
  			</div>
  			<!--/overlays__item__inner-->
  		</div>
  		<!--/overlays__item-->
  
  	</div>
  	<!--/overlays__inner-->
  </div>
  <!--/overlays-->

<nav class="pager">
  	<div class="pager__inner">
  
  		<div class="pager__item pager__item--prev">
  			<a href="#" class="pager__item__link">
          <img class="pager__item__media" src="http://placehold.it/200x140" alt="" />
          <div class="pager__item__text"><span>Adam Buxton joins Laughing Point</span></div>
        </a>
  		</div>
  		<!--/pager__item-->
  
  		<div class="pager__item pager__item--next">
  			<a href="#" class="pager__item__link">
          <img class="pager__item__media" src="http://placehold.it/200x140" alt="" />
          <div class="pager__item__text"><span>The Yorkshire Three Peak Challenge</span></div>
        </a>
  		</div>
  		<!--/pager__item-->
  
  	</div>
  	<!--/pager__inner-->
  </nav>

<div class="paging">
  	<div class="paging__step paging__step--prev"><a href="#" class="paging__link">&laquo; Prev</a></div>
  	<ul class="paging__list">
  		<li><a href="#" class="paging__link"><span>Page </span>1</a></li>
  		<li><a href="#" class="paging__link"><span>Page </span>2</a></li>
  		<li><a href="#" class="paging__link paging__link--active"><span>Current page </span>3</a></li>
  		<li><a href="#" class="paging__link"><span>Page </span>4</a></li>
  	</ul>
  	<div class="paging__step paging__step--next"><a href="#" class="paging__link">Next &raquo;</a></div>
  </div>
  <!--/paging-->

<div class="panel clr-yellow">
  	<p>Hello, I am a yellow panel! :)</p>
  </div>
  
  <hr />
  
  <div class="panel clr-teal">
  	<p>Hello, I am a teal panel! :)</p>
  </div>
  
  <hr />
  
  <div class="panel panel--keyline">
  	<p>Hello, I am a keylined panel! :)</p>
  </div>
  
  <hr />
  
  <div class="panel clr-teal panel--reduced">
  	<p>Hello, I am a teal reduced panel! :)</p>
  </div>

<!-- POSTCODE ANYWHERE -->
  <!-- TEST WITH POSTCODE: WR5 3DA -->
  <script>
  	(function(a, c, b, e) {
  		a[b] = a[b] || {};
  		a[b].initial = {
  			accountCode: "CENTR11193",
  			host: "CENTR11193.pcapredict.com"
  		};
  		a[b].on = a[b].on || function() {
  			(a[b].onq = a[b].onq || []).push(arguments)
  		};
  		var d = c.createElement("script");
  		d.async = !0;
  		d.src = e;
  		c = c.getElementsByTagName("script")[0];
  		c.parentNode.insertBefore(d, c)
  	})(window, document, "pca", "//CENTR11193.pcapredict.com/js/sensor.js");
  </script>
  
  <p>Search will be activated when typing in Company name, Address line 1 or Postal code.</p>
  
  <p><strong>IMPORTANT:</strong> Use test postcode of 'WR5 3DA' whilst testing to prevent being charged for look-ups.</p>
  
  <div class="field field--lrg">
  	<label for="CompanyName" class="field__label">Company name</label>
  	<input type="text" id="CompanyName" name="CompanyName" placeholder="Company name" aria-label="Company name" />
  </div>
  
  <div class="field field--lrg">
  	<label for="AddressLine1" class="field__label">Address line 1 <span class="field__required">* <i>(required)</i></span></label>
  	<input type="text" id="AddressLine1" name="AddressLine1" placeholder="Address line 1 *" aria-label="Address line 1 (required)" required data-msg-required="Address line 1 is required" />
  </div>
  
  <div class="field field--lrg">
  	<label for="AddressLine2" class="field__label">Address line 2</label>
  	<input type="text" id="AddressLine2" name="AddressLine2" placeholder="Address line 2" aria-label="Address line 2" />
  </div>
  
  <div class="field field--med">
  	<label for="TownCity" class="field__label">Town/city <span class="field__required">* <i>(required)</i></span></label>
  	<input type="text" id="TownCity" name="TownCity" placeholder="Town/city *" aria-label="Town/city (required)" required data-msg-required="Town/city is required" />
  </div>
  
  <div class="field field--sml">
  	<label for="PostalCode" class="field__label">Postal code <span class="field__required">* <i>(required)</i></span></label>
  	<input type="text" id="PostalCode" name="PostalCode" placeholder="Postal code *" aria-label="Postal code (required)" required data-msg-required="Postal code is required" />
  </div>
  
  <div class="field">
  	<label for="ff-country" class="field__label">Country <span class="field__required">* <i>(required)</i></span></label>
  	<select id="ff-country" name="ff-country" aria-label="Country (required)" required data-msg-required="Country is required">
      <option selected disabled>Country *</option>
      <option>United Kingdom</option>
    </select>
  </div>

<div class="promos">
  	<div class="promos__inner">
  
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
  					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  
  	</div>
  	<!--/promos__inner-->
  </div>
  <!--/promos-->
  
  <hr />
  
  <div class="promos">
  	<div class="promos__inner">
  
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
  					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
  					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  
  	</div>
  	<!--/promos__inner-->
  </div>
  <!--/promos-->
  
  <hr />
  
  <div class="promos">
  	<div class="promos__inner">
  
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
  					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
  					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
  					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  
  	</div>
  	<!--/promos__inner-->
  </div>
  <!--/promos-->
  
  <hr />
  
  <div class="promos">
  	<div class="promos__inner">
  
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary">London</h2>
  					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary">London</h2>
  					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary">London</h2>
  					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/440x280" alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary">London</h2>
  					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  
  	</div>
  	<!--/promos__inner-->
  </div>
  <!--/promos-->
  
  <hr />
  
  <div class="promos promos--mini">
  	<div class="promos__inner">
  
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/200x200 " alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/200x200 " alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/200x200 " alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/200x200 " alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/200x200 " alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/200x200 " alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary"><a href="#">London</a></h2>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  
  	</div>
  	<!--/promos__inner-->
  </div>
  <!--/promos-->
  
  <hr />
  
  <div class="promos">
  	<div class="promos__inner">
  
  		<div class="promos__item promos__item--padded">
  			<div class="promos__item__inner clr-grey-light">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h1">£20 <span class="h-alt">a month</span></h2>
  					<p>This is more information to encourage the user to donate.</p>
  					<p class="promos__item__action"><a href="#" class="btn"><span>Give by Direct Debit</span></a></p>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item promos__item--padded">
  			<div class="promos__item__inner clr-grey-light">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h1">£20 <span class="h-alt">a month</span></h2>
  					<p>This is more information to encourage the user to donate.</p>
  					<p class="promos__item__action"><a href="#" class="btn"><span>Give by Direct Debit</span></a></p>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item promos__item--padded">
  			<div class="promos__item__inner clr-grey-light">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/400x245" alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h1">£20 <span class="h-alt">a month</span></h2>
  					<p>This is more information to encourage the user to donate.</p>
  					<p class="promos__item__action"><a href="#" class="btn"><span>Give by Direct Debit</span></a></p>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  
  	</div>
  	<!--/promos__inner-->
  </div>
  <!--/promos-->
  
  <hr />
  
  <div class="promos">
  	<div class="promos__inner">
  
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<figure class="promos__item__figure">
  
  					<div class="promos__item__media">
  						<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
  					</div>
  					<!--/promos__item__media-->
  
  					<div class="promos__item__copy">
  						<figcaption class="promos__item__caption">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</figcaption>
  					</div>
  					<!--/promos__item__copy-->
  
  				</figure>
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<figure class="promos__item__figure">
  
  					<div class="promos__item__media">
  						<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
  					</div>
  					<!--/promos__item__media-->
  
  					<div class="promos__item__copy">
  						<figcaption class="promos__item__caption">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</figcaption>
  					</div>
  					<!--/promos__item__copy-->
  
  				</figure>
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<figure class="promos__item__figure">
  
  					<div class="promos__item__media">
  						<a href="#"><img src="http://placehold.it/200x200" alt="" /></a>
  					</div>
  					<!--/promos__item__media-->
  
  					<div class="promos__item__copy">
  						<figcaption class="promos__item__caption">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</figcaption>
  					</div>
  					<!--/promos__item__copy-->
  
  				</figure>
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  
  	</div>
  	<!--/promos__inner-->
  </div>
  <!--/promos-->
  
  <hr />
  
  <div class="promos promos--with-lead">
  	<div class="promos__inner">
  
  		<div class="promos__item promos__item--lead">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/440x280 " alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<!-- <h2 class="promos__item__title h4 h-secondary"><a href="#">Lead item title</a></h2> -->
  					<p>This is more information to encourage the user to donate.</p>
  					<p class="promos__item__action"><a href="#" class="btn"><span>Call to action</span></a></p>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/200x200 " alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary"><a href="#">Item title</a></h2>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  		<div class="promos__item">
  			<div class="promos__item__inner">
  
  				<div class="promos__item__media">
  					<a href="#"><img src="http://placehold.it/200x200 " alt="" /></a>
  				</div>
  				<!--/promos__item__media-->
  
  				<div class="promos__item__copy">
  					<h2 class="promos__item__title h4 h-secondary"><a href="#">Item title</a></h2>
  				</div>
  				<!--/promos__item__copy-->
  
  			</div>
  			<!--/promos__item__inner-->
  		</div>
  		<!--/promos__item-->
  
  	</div>
  	<!--/promos__inner-->
  </div>
  <!--/promos-->

<blockquote class="quote">
  	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
  		quis, sem. Nulla consequat massa quis enim.</p>
  	<cite>John - real story</cite>
  </blockquote>
  
  <blockquote class="quote quote--pull-left quote--grey-light">
  	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
  		quis, sem. Nulla consequat massa quis enim.</p>
  	<cite>John - real story</cite>
  </blockquote>

<div class="receipt">
  
  	<div class="receipt__content">
  
  		<h2 class="title h3">Thank you!</h2>
  
  		<div class="copy">
  			<p class="lead">Confirmation of your order</p>
  		</div>
  		<!--/copy-->
  
  	</div>
  	<!--/receipt__content-->
  
  	<ul class="receipt__summary">
  		<li>
  			<strong>Order ID</strong>
  			<span>#123456789</span>
  		</li>
  		<li>
  			<strong>Order total</strong>
  			<span>£9999</span>
  		</li>
  		<li>
  			<strong>Date</strong>
  			<span>1st June 2016</span>
  		</li>
  		<li>
  			<strong>Payment</strong>
  			<span>Debit card</span>
  		</li>
  	</ul>
  
  	<table class="receipt__items">
  		<thead>
  			<tr>
  				<th class="receipt__items__item-col">Item</th>
  				<th>Price</th>
  				<th>Qty</th>
  				<th>Total</th>
  			</tr>
  		</thead>
  		<tbody>
  			<tr>
  				<td data-table-label="Item">Title of item</td>
  				<td data-table-label="Price">£35</td>
  				<td data-table-label="Qty">3</td>
  				<td data-table-label="Total">£105</td>
  			</tr>
  			<tr>
  				<td data-table-label="Item">Title of item</td>
  				<td data-table-label="Price">£35</td>
  				<td data-table-label="Qty">3</td>
  				<td data-table-label="Total">£105</td>
  			</tr>
  		</tbody>
  	</table>
  
  </div>
  <!--/receipt-->

<p>The <code>.row</code> helper provides the standardised padding and layout for modules. You can also hang <code>.clr-</code> helper styles on this element</p>
  
  <hr />
  
  <div class="row">
  	<p>Hello, I am a white row! :)</p>
  </div>
  <!--/row-->
  
  <hr />
  
  <div class="row clr-yellow">
  	<p>Hello, I am a yellow row! :)</p>
  </div>
  <!--/row-->
  
  <hr />
  
  <div class="row row--keyline">
  	<p>Hello, I am a row with a keyline! :)</p>
  </div>
  <!--/row-->

<div class="share">
  
  	<ul class="share__nav">
  		<li><a href="https://www.facebook.com/sharer/sharer.php?u=http://my.link.com"><i class="icon-facebook"></i></a></li>
  		<li><a href="https://twitter.com/intent/tweet?text=tweeeeet&url=http://my.link.com&hashtags=my,hash,tags&via=siftdigital"><i class="icon-twitter"></i></a></li>
  		<li><a href="https://plus.google.com/share?url=http://my.link.com"><i class="icon-google"></i></a></li>
  		<li><a href="http://pinterest.com/pin/create/button/?url=http://my.link.com&media=http://placehold.it/100x100&description=piiiiiiin"><i class="icon-pintrest"></i></a></li>
  		<li><a href="mailto:someone@somewhere.com?&subject=Subject&body=Hello"><i class="icon-mail"></i></a></li>
  	</ul>
  
  </div>
  <!--/share-->

<div class="stat">
  	<em class="stat__label">Raised</em>
  	<strong class="stat__value h1">£25,000</strong>
  </div>
  <!--/stat-->
  
  <hr />
  
  <div class="stat">
  	<em class="stat__label">Raised</em>
  	<strong class="stat__value stat__value--border h3">£25,000</strong>
  </div>
  <!--/stat-->
  
  <hr />
  
  <div class="stat">
  	<div class="stat__label stat__label--split">
  		<em class="stat__label__start">Start</em>
  		<em class="stat__label__end">Finish</em>
  	</div>
  	<!--/stat__label-->
  	<div class="stat__value stat__value--progress">
  		<div class="stat__value__line" style="width:80%">
  			<strong class="stat__value__roundal" aria-label="80% towards target">8.0</strong>
  		</div>
  		<!--  -->
  	</div>
  	<!--/stat__value-->
  </div>
  <!--/stat-->
  
  <hr />
  
  <div class="clr-teal" style="padding: 25px">
  
  	<div class="stat stat--invert">
  		<em class="stat__label">Raised</em>
  		<strong class="stat__value stat__value--border h3">£25,000</strong>
  	</div>
  	<!--/stat-->
  
  </div>

<div class="stat-set">
  	<div class="stat-set__item">
  		<div class="stat">
  			<em class="stat__label">Raised</em>
  			<strong class="stat__value h1">£25,000</strong>
  		</div>
  		<!--/stat-->
  	</div>
  	<!--/stat-set__item-->
  	<div class="stat-set__item">
  		<div class="stat">
  			<em class="stat__label">Raised</em>
  			<strong class="stat__value h1">£25,000</strong>
  		</div>
  		<!--/stat-->
  	</div>
  	<!--/stat-set__item-->
  	<div class="stat-set__item">
  		<div class="stat">
  			<em class="stat__label">Raised</em>
  			<strong class="stat__value h1">£25,000</strong>
  		</div>
  		<!--/stat-->
  	</div>
  	<!--/stat-set__item-->
  </div>
  <!--/stat-set-->
  
  <hr />
  
  <div class="clr-grey-dark" style="padding: 20px">
  	<div class="stat-set stat-set--invert">
  		<div class="stat-set__item">
  			<div class="stat stat--invert">
  				<em class="stat__label">Raised</em>
  				<strong class="stat__value h1">£25,000</strong>
  			</div>
  			<!--/stat-->
  		</div>
  		<!--/stat-set__item-->
  		<div class="stat-set__item">
  			<div class="stat stat--invert">
  				<em class="stat__label">Raised</em>
  				<strong class="stat__value h1">£25,000</strong>
  			</div>
  			<!--/stat-->
  		</div>
  		<!--/stat-set__item-->
  		<div class="stat-set__item">
  			<div class="stat stat--invert">
  				<em class="stat__label">Raised</em>
  				<strong class="stat__value h1">£25,000</strong>
  			</div>
  			<!--/stat-->
  		</div>
  		<!--/stat-set__item-->
  		<div class="stat-set__item">
  			<div class="stat stat--invert">
  				<em class="stat__label">Raised</em>
  				<strong class="stat__value h1">£25,000</strong>
  			</div>
  			<!--/stat-->
  		</div>
  		<!--/stat-set__item-->
  		<div class="stat-set__item">
  			<div class="stat stat--invert">
  				<em class="stat__label">Raised</em>
  				<strong class="stat__value h1">£25,000</strong>
  			</div>
  			<!--/stat-->
  		</div>
  		<!--/stat-set__item-->
  		<div class="stat-set__item">
  			<div class="stat stat--invert">
  				<em class="stat__label">Raised</em>
  				<strong class="stat__value h1">£25,000</strong>
  			</div>
  			<!--/stat-->
  		</div>
  		<!--/stat-set__item-->
  	</div>
  	<!--/stat-set-->
  </div>

<div class="steps">
  	<p class="steps__label">Step 1 of 6</p>
  	<ol class="steps__list">
  		<li class="steps__item steps__item--current"><span>Current step: </span>Donation details</li>
  		<li class="steps__item">Billing details</li>
  		<li class="steps__item">Gift aid</li>
  		<li class="steps__item">Stay in touch</li>
  		<li class="steps__item">Another step</li>
  		<li class="steps__item">Yet another step</li>
  	</ol>
  </div>
  <!--/steps-->

<div class="tabs" data-tabs>
  
  	<select class="tabs__dropdown" data-tabs-dropdown>
        <option value="#tabs0">Tab 0</option>
        <option value="#tabs1">Tab 1</option>
        <option value="#tabs2">Tab 2</option>
        <option value="#tabs3">Tab 3</option>
        <option value="#tabs4">Tab 4</option>
        <option value="#tabs5">Tab 5</option>
    </select>
  
  	<div class="tabs__nav">
  		<a href="#tabs0" class="tabs__nav__trigger" data-tabs-nav-item><span>Tab 0</span></a>
  		<a href="#tabs1" class="tabs__nav__trigger" data-tabs-nav-item><span>Tab 1</span></a>
  		<a href="#tabs2" class="tabs__nav__trigger" data-tabs-nav-item><span>Tab 2</span></a>
  		<a href="#tabs3" class="tabs__nav__trigger" data-tabs-nav-item><span>Tab 3</span></a>
  		<a href="#tabs4" class="tabs__nav__trigger" data-tabs-nav-item><span>Tab 4</span></a>
  		<a href="#tabs5" class="tabs__nav__trigger" data-tabs-nav-item><span>Tab 5</span></a>
  	</div>
  	<!--/tabs__nav-->
  
  	<div class="tabs__item" id="tabs0" data-tabs-item>
  
  		<p><strong>TAB 0</strong></p>
  		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  			dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  	</div>
  	<!--/tabs__item__content-->
  	<div class="tabs__item" id="tabs1" data-tabs-item>
  
  		<p><strong>TAB 1</strong></p>
  		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  			dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  	</div>
  	<!--/tabs__item__content-->
  	<div class="tabs__item" id="tabs2" data-tabs-item>
  
  		<p><strong>TAB 2</strong></p>
  		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  			dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  	</div>
  	<!--/tabs__item__content-->
  	<div class="tabs__item" id="tabs3" data-tabs-item>
  
  		<p><strong>TAB 3</strong></p>
  		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  			dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  	</div>
  	<!--/tabs__item__content-->
  	<div class="tabs__item" id="tabs4" data-tabs-item>
  
  		<p><strong>TAB 4</strong></p>
  		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  			dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  	</div>
  	<!--/tabs__item__content-->
  	<div class="tabs__item" id="tabs5" data-tabs-item>
  
  		<p><strong>TAB 5</strong></p>
  		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  			dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  
  	</div>
  	<!--/tabs__item__content-->
  
  </div>
  <!--/tabs-->

<h2 class="title">Title</h2>
  
  <hr />
  
  <h2 class="title h-parliament">Parliament Title</h2>
  
  <hr />
  
  <h2 class="title title--dot">Title with dot</h2>
  
  <hr />
  
  <h2 class="title"><span class="title__sub"><a href="#">Section</a></span> Title</h2>
  
  <hr />
  
  <h2 class="title"><span class="h-alt">Title with</span> two tones</h2>
  
  <hr />
  
  <h1 class="title h-primary">Primary title</h1>
  
  <hr />
  
  <div class="clr-teal" style="padding: 10px 0;">
  	<h2 class="title">Inverted title</h2>
  </div>
  
  <hr />
  
  <div class="clr-grey-light" style="padding: 10px 0;">
  	<h2 class="title title--dot">Title with inverted dot</h2>
  </div>