FMD Financial view live demo

FMD's website was a tough nut. The pixel-perfect layout had to be fully responsive and fast loading. The best approach was to build on Foundation Framework and the wonderful Scss language.

HTML Code

						
<!DOCTYPE html>
<html class="no-js" lang="en" >
	<head>
		<!-- ============== Basic Page Needs ============== -->
		<meta charset="utf-8" />
		<title>FMD Financial | Welcome to our website!</title>
		<meta name="viewport" content="width=device-width" />
		
		<!-- ================= Stylesheets ================ -->
		<link rel="stylesheet" href="css/foundation.css"/>
		<link rel="stylesheet" href="css/styles.css.css"/>
		
		<!-- ================= Scripts ================ -->
		<script src="js/modernizr.js"></script>
	</head>
	
	<body>
		<!-- ================= Page Header ================ -->
		<header class="page-header show-for-medium-up">
			<div class="row collapse">
				<!-- Logo -->
				<figure class="logo large-5 columns">
					<a href="index.html"><img src="images/logo.png" alt="FMD Financial"/></a>
				</figure>
				
				<!-- Widgets -->
				<div class="widgets large-7 columns text-right">
					<p class="contact"><strong>Toll Free: 1300 134 187</strong> connect you to the nearest FMD financial office.</p>
					<form class="search" action="#">
						<p>
							<label>Search</label>
							<input type="text" placeholder="enter search terms"/>
							<input type="submit" value=""/>
						</p>
					</form>
					<ul class="icon-list">
						<li>User log-in</li>
						<li><a href="#" class="icon login"></a></li>
						<li class="divider"></li>
						<li><a href="#" class="icon facebook"></a></li>
						<li><a href="#" class="icon twitter"></a></li>
						<li><a href="#" class="icon linkedin"></a></li>
						<li><a href="#" class="icon email"></a></li>
					</ul>
				</div>
			</div>
		</header>
		
		
		<!-- ================= Page Navigation ================ -->
		<div class="page-nav row">
			<div class="large-12 columns">
				<nav class="top-bar">
					<ul class="title-area">
			            <!-- Title Area -->
			            <li class="name">
			            	<a href="index.html" class="show-for-small">
			            		<img src="images/logo-small.png" alt="FMD Financial"/></a>
			            </li>
			            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
			       	</ul>

					<section class="top-bar-section">
						<ul class="left nav-primary">
							<li class="has-dropdown">
								<a href="#">Fast Facts</a>
								<ul class="dropdown">
									<li><a href="#">Our Guarantee - putting your needs first</a></li>
									<li><a href="#">Financial Advice Model</a></li>
									<li><a href="#">How We Can Help - services</a></li>
									<li><a href="#">Review Schedule</a></li>									
								</ul>
							</li>							
							<li class="has-dropdown">
								<a href="#">Financial Fundamentals</a>
								<ul class="dropdown">
									<li><a href="#">Investment</a></li>
									<li><a href="#">Budgeting</a></li>
									<li><a href="#">Saving</a></li>
									<li><a href="#">Goal-setting</a></li>
									<li><a href="#">Personal balance sheet</a></li>
									<li><a href="#">Superannuation</a></li>
									<li class="has-dropdown">
										<a href="#">Financial Strategies</a>
										<ul class="dropdown">
											<li><a href="#">Boost your savings</a></li>
											<li><a href="#">Protect income &amp; assets</a></li>
											<li><a href="#">Fast track your mortgage</a></li>
											<li><a href="#">Utilising gearing strategies</a></li>
											<li><a href="#">Set up a Self-Managed Super Fund</a></li>
											<li><a href="#">Fund aged care</a></li>
											<li><a href="#">Establish a will</a></li>
											<li><a href="#">Maximise retirement income</a></li>
											<li><a href="#">Plan your financial legacy</a></li>
											<li><a href="#">Transfer wealth after you die</a></li>
											<li><a href="#">Make redundancy work for you</a></li>
										</ul>										
									</li>
								</ul>
							</li>							
							<li class="has-dropdown">
								<a href="#">Getting Started</a>
								<ul class="dropdown">
									<li><a href="#">Getting started – what to expect</a></li>
									<li><a href="#">How do I choose a financial advisor?</a></li>
									<li><a href="#">Understanding fees and charges</a></li>
									<li><a href="#">Do I need financial advice?</a></li>
									<li><a href="#">Reviewing your financial position</a></li>
									<li><a href="#">Documenting income and expenses</a></li>
									<li><a href="#">Assessing you risk profile – quiz</a></li>
								</ul>
							</li>
							<li class="has-dropdown">
								<a href="#">Services</a>
								<ul class="dropdown">
									<li><a href="#">Financial planning</a></li>
									<li><a href="#">Investment services</a></li>
									<li><a href="#">Active management services</a></li>
									<li><a href="#">FMD Shares</a></li>
									<li><a href="#">Employer Services </a></li>
								</ul>
							</li>
							<li><a href="#">Insight</a></li>
							<li><a href="#">Contact</a></li>
						</ul>
					</section>
				</nav>
				
				<div class="nav-contact-area row show-for-small">
					<div class="large-12 columns">
						<div class="row">
							<div class="small-4 columns">
								<dl>
									<dt>Melbourne</dt>
									<dd>(03) 9620 4633</dd>
								</dl>
							</div>
							<div class="small-4 columns">
								<dl>
									<dt>Adelaide</dt>
									<dd>(08) 8110 488</dd>
								</dl>
							</div>
							<div class="small-4 columns">
								<dl>
									<dt>Brisbane</dt>
									<dd>(07) 3852 1966</dd>
								</dl>
							</div>
						</div><hr/>
					</div>
					
					<div class="large-12 columns">
						<aside class="call-to-action show-for-small">
							<p>
								Call Toll Free: 1300 134 187
								<small>connect you to the nearest FMD Financial office</small>
							</p>
						</aside>
					</div>
				</div>
			</div>
		</div>


		<!-- ================= Page Content / Tile Grid #1 ================ -->
		<div class="page-content margin-bottom-half">
			<!-- Tile Row #1 -->
			<div class="tile-row row collapse">				
				<!-- Tile - Embrace a change of pace -->
				<div class="tile brown-light small-12 large-6 columns">
					<div class="row collapse">
						<div class="small-6 push-6 columns">
							<div class="tile-content small-arrow-right large-arrow-left">
								<div class="tile-content-inner">
									<h4 class="tile-title"><a href="#">Embrace a change of pace.</a></h4>
									<p><a href="#" class="read-more">Consider the optimal route &amp; discover the best short-cuts.</a></p>
								</div>
							</div>
						</div>
						<div class="small-6 pull-6 columns">
							<img src="images/img2.jpg" alt="Your wealth is in good hands" class="fullwidth"/>
						</div>
					</div>
				</div>
				
				<!-- Tile - Your wealth is in good hands -->
				<div class="tile brown-dark small-12 large-6 columns">
					<div class="row collapse">
						<div class="small-6 columns">
							<img src="images/img1.jpg" alt="Embrace a change of pace" class="fullwidth"/>
						</div>
						<div class="small-6 columns">
							<div class="tile-content small-arrow-left">
								<div class="tile-content-inner">
									<h4 class="tile-title"><a href="#">Your wealth is in good hands.</a></h4>
									<p><a href="#" class="read-more">Enjoy the ride &amp; keep the end in mind.</a></p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- Tile Row #2 -->
			<div class="tile-row row collapse">
				<!-- Tile - What you do today matters -->
				<div class="tile brown-dark small-12 large-3 columns">					
					<div class="row collapse">
						<div class="small-6 large-12 columns">
							<div class="tile-content small-arrow-right large-arrow-bottom">
								<img src="images/spacer-250x162.png" class="spacer" alt=""/>
								<div class="tile-content-inner">
									<h4 class="tile-title"><a href="#">What you do today matters.</a></h4>
									<p><a href="#" class="read-more">Find a trusted navigator.</a></p>
								</div>
							</div>
						</div>
						<div class="small-6 large-12 columns">
							<img src="images/img6.jpg" alt="What you do today matters" class="fullwidth"/>
						</div>
					</div>
				</div>
				
				<!-- Tile - Time to get a plan -->
				<div class="tile orange-highlight small-12 large-9 columns">
					<div class="row collapse">
						<div class="small-6 large-8 columns">
							<img src="images/img21.jpg" data-interchange="[images/img21.jpg, (default)], [images/img5.jpg, (small)]" alt="Time to get a plan" class="fullwidth"/>
						</div>
						<div class="small-6 large-4 columns">
							<div class="tile-content small-arrow-left">
								<div class="tile-content-inner">
									<h4 class="tile-title"><a href="#">Time to get a plan.</a></h4>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiussmod temp dvor.</p>
									<p>Lorem ipsum dolor sit amet, consectetur.</p>
									<p><a href="#" class="read-more">Consider the optimal route &amp; discover the best short-cuts.</a></p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- Tile Row #3 -->
			<div class="tile-row row collapse">
				<!-- Tile - Health, Wealth & Happiness -->
				<div class="tile orange-highlight small-12 large-6 columns">
					<div class="row collapse">
						<div class="small-6 columns">
							<div class="tile-content small-arrow-right">
								<div class="tile-content-inner">
									<h4 class="tile-title"><a href="#">Health, Wealth &amp; Happiness.</a></h4>
									<p><a href="#" class="read-more">Find out how we can help.</a></p>
								</div>
							</div>
						</div>						
						<div class="small-6 columns">
							<img src="images/img3.jpg" alt="Health, Wealth &amp; Happiness" class="fullwidth"/>	
						</div>
					</div>
				</div>
				
				<!-- Tile - Nothing like a head start -->
				<div class="tile brown-dark small-12 large-6 columns">
					<div class="row collapse">
						<div class="small-6 push-6 columns">
							<img src="images/img4.jpg" alt="Nothing like a head start" class="fullwidth"/>
						</div>						
						<div class="small-6 pull-6 columns">
							<div class="tile-content small-arrow-left large-arrow-right">
								<div class="tile-content-inner">
									<h4 class="tile-title"><a href="#">Nothing like a head start.</a></h4>
									<p><a href="#" class="read-more">Get in the driver's seat.</a></p>
								</div>
							</div>			
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		<!-- ================= Page Content / Slider Navigation ================ -->
		<div class="page-content">
			<div class="row collapse">
				<div class="small-12 columns">
					<a href="#">
						<img src="images/slider.png" alt=""/>
					</a>
				</div>
			</div>
		</div>

		
		<!-- ================= Page Content / Tile Grid #2 ================ -->
		<div class="page-content">
			
			<!-- Tile Row #1 -->
			<div class="tile-row row collapse">
				<!-- Tile - Invest in the community -->
				<div class="tile brown-dark small-12 large-6 columns">
					<div class="row collapse">
						<div class="small-6 push-6 columns">
							<div class="tile-content small-arrow-right large-arrow-left">
								<div class="tile-content-inner">
									<h4 class="tile-title"><a href="#">Invest in the community:</a></h4>
									<p>Lorem ipsum dolor  sit amet, consectetur adipisicing.</p>
									<p><a href="#">read more</a></p>
								</div>
							</div>
						</div>
						<div class="small-6 pull-6 columns">
							<img src="images/img7.jpg" alt="Invest in the community" class="fullwidth"/>
						</div>
					</div>
				</div>
				
				<!-- Tile - Investor online -->
				<div class="tile brown-light small-12 large-6 columns">
					<div class="row collapse">
						<div class="small-6 columns">
							<img src="images/img8.jpg" alt="Investor Online" class="fullwidth"/>
						</div>
						<div class="small-6 columns">
							<div class="tile-content small-arrow-left">
								<div class="tile-content-inner">
									<h4 class="tile-title"><a href="#">Investor <br/>online:</a></h4>
									<p>Lorem ipsum dolor  sit amet, consectetur adipisicing.</p>
									<p><a href="#">read more</a></p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- Tile Row #2 and #3-->
			<div class="tile-row row collapse">
				
				<!-- Tiles - Testimonial and Newsletter -->
				<div class="small-12 large-6 push-3 columns">
					<div class="row collapse">
						<!-- Tile - Testimonial -->
						<div class="tile white small-12 columns">
							<div class="row collapse">
								<div class="small-12 large-12 columns">
									<div class="tile-content blockquote-featured">
										<img src="images/spacer-500x270.png" class="spacer" alt=""/>
										<div class="tile-content-inner">
											<blockquote>
												Client's testimonial starts here lorem ipsum dolor sit amet elit, sed do 
												eiusmod	tempor incididunt ut labore et dolore.
												<cite>~ J. R. Johnson ~</cite>
											</blockquote>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="row collapse">
						<!-- Tile - Newsletter -->
						<div class="tile orange-highlight small-12 columns">
							<div class="row collapse">
								<div class="small-6 push-6 columns">
									<div class="tile-content small-arrow-right large-arrow-left">
										<div class="tile-content-inner">
											<h4 class="tile-title"><a href="#">Newsletter:</a></h4>
											<br/><br/>
											<p>Lorem ipsum dolor  sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
											<p><a href="#">read more</a></p>
										</div>
									</div>
								</div>						
								<div class="small-6 pull-6 columns">
									<img src="images/img9.jpg" alt="Newsletter" class="fullwidth"/>	
								</div>						
							</div>
						</div>
					</div>
				</div>
				
				<!-- Tile - Market watch and update -->
				<div class="tile brown-light small-12 large-3 pull-6 columns">
					<div class="row collapse">
						<div class="small-12 columns">
							<div class="tile-content">
								<img src="images/spacer-250x540.png" class="spacer" alt=""/>
								<div class="tile-content-inner">
									<h4 class="tile-title"><a href="#">Market watch and update:</a></h4>
									<ol class="feed-list">
										<li>
											<time datetime="2013-07-09" class="light"><span>Jul. 09, 2013</span></time>
											<p><a href="#">US stocks up on earnings season kickoff.</a></p>
										</li>
									</ol>
									<p><img src="images/img10.jpg" alt="Market watch and update" class="fullwidth"/></p>
									<p class="no-margin-bottom"><a href="#">read more</a></p>
								</div>
							</div>
						</div>						
					</div>
				</div>
				
				<!-- Tile - Latest news -->
				<div class="tile brown-dark small-12 large-3 columns">
					<div class="row collapse">
						<div class="small-12 columns">
							<div class="tile-content">
								<img src="images/spacer-250x540.png" class="spacer" alt=""/>
								<div class="tile-content-inner">
									<h4 class="tile-title"><a href="#">Latest news:</a></h4>
									<ol class="feed-list">
										<li>
											<time datetime="2013-07-09"><span>Jul. 09, 2013</span></time>
											<p><a href="#">US stocks up on earnings season kickoff.</a></p>
										</li>
										<li>
											<time datetime="2013-07-09"><span>Jul. 09, 2013</span></time>
											<p><a href="#">US stocks up on earnings season kickoff.</a></p>
										</li>
										<li>
											<time datetime="2013-07-09"><span>Jul. 09, 2013</span></time>
											<p><a href="#">US stocks up on earnings season kickoff.</a></p>
										</li>
										<li>
											<time datetime="2013-07-09"><span>Jul. 09, 2013</span></time>
											<p><a href="#">US stocks up on earnings season kickoff.</a></p>
										</li>
										<li class="show-for-medium-up">
											<time datetime="2013-07-09"><span>Jul. 09, 2013</span></time>
											<p><a href="#">US stocks up on earnings season kickoff.</a></p>
										</li>
									</ol>							
									<p class="no-margin-bottom"><a href="#">read more</a></p>
								</div>
							</div>
						</div>						
					</div>
				</div>
			</div>
		</div>
		
		
		<!-- ================= Contact Details ================ -->
		<aside class="page-contact-area show-for-medium-up">
			<div class="row collapse">
				<div class="large-4 columns">
					<dl>
						<dt>Melbourne</dt>
						<dd><span>P</span> (03) 9620 4633</dd>
						<dd><span>F</span> (03) 9620 4688</dd>
						<dd><span>E</span> <a href="mailto:melbourne@fmd.com.au">melbourne@fmd.com.au</a></dd>
					</dl>
					<a href="#" class="more">more</a>
				</div>
				<div class="large-4 columns">
					<dl>
						<dt>Adelaide</dt>
						<dd><span>P</span> (08) 8110 4888</dd>
						<dd><span>F</span> (03) 8110 4800</dd>
						<dd><span>E</span> <a href="mailto:adelaide@fmd.com.au">adelaide@fmd.com.au</a></dd>
					</dl>
					<a href="#" class="more">more</a>
				</div>
				<div class="large-4 columns">
					<dl>
						<dt>Brisbane</dt>
						<dd><span>P</span> (07) 3852 1966</dd>
						<dd><span>F</span> (07) 3852 1588</dd>
						<dd><span>E</span> <a href="mailto:brisbane@fmd.com.au">brisbane@fmd.com.au</a></dd>
					</dl>
					<a href="#" class="more">more</a>
				</div>
			</div>
		</aside>
		
		
		<!-- ================= Page Footer ================ -->
		<footer class="page-footer">
			<hr/>
			<div class="footer-block row">
				<div class="footer-logo large-12 columns">
					<a href="index.html"><img src="images/logo.png" alt="FMD Financial" width="135"/></a>
				</div>
	
				<div class="footer-columns large-12 columns">
					<div class="row">
						<!-- Footer Column #1 -->
						<div class="footer-column small-4 large-3 columns">
							<h6><a href="#">Newspaper+</a></h6>
							<ul class="pretty-list show-for-medium-up">
								<li><a href="#">Melbourne Herald Sun</a></li>
								<li><a href="#">Sydney Morning Herald</a></li>
								<li><a href="#">Adelaide Now (The Advertiser)</a></li>
							</ul>
							
							<h6><a href="#">Travel+</a></h6>
							<ul class="pretty-list show-for-medium-up">
								<li><a href="#">Where is?</a></li>
								<li><a href="#">WebJet</a></li>
								<li><a href="#">Rates to go</a></li>
							</ul>
						</div>
						
						<!-- Footer Column #2 -->
						<div class="footer-column small-4 large-3 columns">
							<h6><a href="#">Latest News+</a></h6>
							<ul class="pretty-list show-for-medium-up">
								<li><a href="#">Ninemsn</a></li>
								<li><a href="#">Fairfax Digital Network</a></li>
								<li><a href="#">BBC News</a></li>
								<li><a href="#">REUTERS</a></li>
								<li><a href="#">News Limited</a></li>
								<li><a href="#">CNN</a></li>
								<li><a href="#">National Nine News/Business</a></li>
								<li><a href="#">Business weekly</a></li>
							</ul>
							<h6 class="show-for-small"><a href="#">Tourism+</a></h6>
						</div>
						
						<!-- Footer Column #3 -->
						<div class="footer-column small-4 large-3 columns">
							<h6><a href="#">Financial+</a></h6>
							<ul class="pretty-list show-for-medium-up">
								<li><a href="#">Australian Stock Exchange</a></li>
								<li><a href="#">Unclaimed Super Funds</a></li>
								<li><a href="#">ASIC</a></li>
							</ul>
							
							<h6><a href="#">Government+</a></h6>
							<ul class="pretty-list show-for-medium-up">
								<li><a href="#">Centrelink</a></li>
								<li><a href="#">Australian Taxation Office</a></li>
								<li><a href="#">Bureau of Meteorology</a></li>
							</ul>
						</div>
						
						<!-- Footer Column #4 -->
						<div class="footer-column small-4 large-3 columns show-for-medium-up">
							<h6><a href="#">Tourism+</a></h6>
							<ul class="pretty-list">
								<li><a href="#">SmartTraveller</a></li>
								<li><a href="#">Tourism Queensland</a></li>
								<li><a href="#">Tourism Victoria</a></li>
								<li><a href="#">Tourism New South Wales</a></li>
								<li><a href="#">Tourism South Australia</a></li>
								<li><a href="#">Tourism Northern Territory</a></li>
								<li><a href="#">Tourism Canberra</a></li>
								<li><a href="#">Tourism Western Australia</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<hr/>
			
			<div class="footer-block row">
				<!-- Search Bar -->
				<div class="small-12 columns show-for-small">
					<form class="search" action="#">
						<div class="row collapse">
							<div class="small-3 columns">
								<h6 class="inline">Search+</h6>
							</div>
							<div class="small-8 columns">
								<input type="text" placeholder="enter search terms"/>
							</div>
							<div class="small-1 columns">
								<input type="submit" class="prefix" value=""/>
							</div>
						</div>
					</form>
				</div>
				
				<!-- Social Icons -->
				<div class="small-12 large-6 columns">
					<h6 class="inline">Connect With FMD+</h6>
					<ul class="icon-list">
						<li><a href="#" class="icon facebook"></a></li>
						<li><a href="#" class="icon twitter"></a></li>
						<li><a href="#" class="icon linkedin"></a></li>
						<li><a href="#" class="icon email"></a></li>
						<li><a href="#" class="icon search"></a></li>
					</ul>
				</div>
				
				<!-- Newsletter Subscription -->
				<div class="small-12 large-6 columns">
					<form action="#" class="newsletter">
						<h6 class="inline">Newsletter Subscription+</h6>
						<p>
							<input type="text" placeholder="enter your email"/>
							<input type="submit" class="button-fmd prefix" value="Enter"/>
						</p>
					</form>
				</div>
			</div>
			<hr/>
			
			<!-- Copyright Info -->
			<div class="footer-block row">
				<div class="copyright small-12 columns">
					<p>These links are provided by FMD for your convenience only. FMD and their partners are not responsible for and make no 
					representations concerning the condition, content or accuracy of these sites.</p>
					<p>Copyright &copy; 2013 <strong>FMD Group Pty Ltd.</strong> ACN 103 115 591. All rights reserved.Corporate Authorised 
						Representative of Paragem Pty Ltd AFSL 297276</p>
				</div>
			</div>
		</footer>
		
		
		<!-- ================= Scripts ================ -->
		<script src="js/jquery-1.8.3.min.js"></script>
		<script src="js/foundation.js"></script>
		<script src="js/foundation.topbar.js"></script>
		<script src="js/foundation.interchange.js"></script>
		<script src="js/scripts.js"></script>
		
		<script>
			$(document).foundation('interchange');
		</script>
	</body>
</html>
						
					

SCSS Code

						
@import "setup/mixins";

/* Variables
 ========================================================================== */
$color-brown-darkest: #503d2f;
$color-brown-dark: #5d4f4b;
$color-brown-light: #8d8381;
$color-orange-dark: #b95915;
$color-orange-light: #f68a33;

$sansFontFamily: 'Helvetica Neue',Helvetica,Arial,sans-serif;
$serifFontFamily: 'Times New Roman',Times,serif;

/* 
 * Media Queries 
 * * * * * * * */
$small-screen: 768px;
$medium-screen: 1280px;
$large-screen: 1440px;
$topbarbreak: 730px;

$screen: "only screen" !default;
$small: "only screen and (min-width: #{$small-screen})" !default;
$medium: "only screen and (min-width:#{$medium-screen})" !default;
$large: "only screen and (min-width:#{$large-screen})" !default;
$landscape: "only screen and (orientation: landscape)" !default;
$portrait: "only screen and (orientation: portrait)" !default;
$topbarbreakmedia: "only screen and (min-width: 730px)" !default;


/* Fonts Used
 ========================================================================== */
@font-face {
	font-family: 'HelveticaNeueLT-Bold';
	src: url('fonts/helvetica-neue/HelveticaNeueLT-Bold.eot');
	src: url('fonts/helvetica-neue/HelveticaNeueLT-Bold.eot?#iefix') format('embedded-opentype'),
		 url('fonts/helvetica-neue/HelveticaNeueLT-Bold.woff') format('woff'),
		 url('fonts/helvetica-neue/HelveticaNeueLT-Bold.ttf') format('truetype'),
		 url('fonts/helvetica-neue/HelveticaNeueLT-Bold.svg#HelveticaNeueLT-Bold') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'HelveticaNeueLT-Medium';
	src: url('fonts/helvetica-neue/HelveticaNeueLT-Medium.eot');
	src: url('fonts/helvetica-neue/HelveticaNeueLT-Medium.eot?#iefix') format('embedded-opentype'),
		 url('fonts/helvetica-neue/HelveticaNeueLT-Medium.woff') format('woff'),
		 url('fonts/helvetica-neue/HelveticaNeueLT-Medium.ttf') format('truetype'),
		 url('fonts/helvetica-neue/HelveticaNeueLT-Medium.svg#HelveticaNeueLT-Medium') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'HelveticaNeueLT-Light';
	src: url('fonts/helvetica-neue/HelveticaNeueLT-Light.eot');
	src: url('fonts/helvetica-neue/HelveticaNeueLT-Light.eot?#iefix') format('embedded-opentype'),
		 url('fonts/helvetica-neue/HelveticaNeueLT-Light.woff') format('woff'),
		 url('fonts/helvetica-neue/HelveticaNeueLT-Light.ttf') format('truetype'),
		 url('fonts/helvetica-neue/HelveticaNeueLT-Light.svg#HelveticaNeueLT-Light') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'HelveticaNeueLT-Roman';
	src: url('fonts/helvetica-neue/HelveticaNeueLT-Roman.eot');
	src: url('fonts/helvetica-neue/HelveticaNeueLT-Roman.eot?#iefix') format('embedded-opentype'),
		 url('fonts/helvetica-neue/HelveticaNeueLT-Roman.woff') format('woff'),
		 url('fonts/helvetica-neue/HelveticaNeueLT-Roman.ttf') format('truetype'),
		 url('fonts/helvetica-neue/HelveticaNeueLT-Roman.svg#HelveticaNeueLT-Roman') format('svg');
	font-weight: normal;
	font-style: normal;
}
 
  
/* General Rules
 ========================================================================== */
body {
	color: $color-brown-dark;
}


/* Page Header
 ========================================================================== */
.page-header {
	background: $color-brown-dark;
	margin: 0.9375em 0.9375em 0;
	padding: 15px 0 0;
	
	@media #{$small} {
		background: transparent;
	}
	
	.logo {
		margin-top: 33px;
		
		a {
			border-bottom: 1px solid $color-orange-dark;
			display: block;
			padding-bottom: 10px;
			
			@media #{$topbarbreakmedia} {
				border-bottom: 0;
				padding-bottom: 0;
			}
		}
	}
	
	.search input[type="text"] {
		margin-bottom: 0;
		width: 280px;
	}
}

.contact {
	background: $color-brown-dark;
	color: #fff;
	display: inline-block;
	font-size: 13px;
	margin-bottom: 1em;
	padding: 5px 10px;
	
	strong {
		font: normal 13px/1em 'HelveticaNeueLT-Bold',$sansFontFamily;
	}
}


/* Page Navigation
 ========================================================================== */
.has-arrow {
	background: url("images/arrow-white-left.png") no-repeat scroll left top transparent;
    content: "";
    display: block;
    position: absolute;
    right: 13px;
    top: 50%;
    margin-top: -3px;
    height: 8px;
    width: 5px;
}

.has-arrow-down { @extend .has-arrow;
	background: url("images/arrow-white-down.png") no-repeat scroll left top transparent;
	margin-top: -3px;
    height: 6px;
    width: 11px;
}

.page-nav {
	background: $color-brown-dark;
	color: #fff;
	margin-bottom: 0.9375em;
	padding: 10px 0;
	
	@media #{$topbarbreakmedia} {
		background: transparent;
		color: $color-brown-dark;
		padding-bottom: 0;
	}

	> .columns {
		@media #{$topbarbreakmedia} {
			padding: 0;
		}
	}
}

.top-bar {
	margin: 0;
	
	.name {
	  @media only screen and (min-width: #{$topbarbreak}) and (max-width: #{$small-screen}) {
	    height: auto;
	    margin-bottom: 5px;
	  }
	  
	  a {
      @media only screen and (min-width: #{$topbarbreak}) and (max-width: #{$small-screen}) {
        background: $color-brown-dark;
        padding: 10px 0.9375em 13px;
      }
    }
	}
	
	.nav-primary li {
		&:after {
			border-top: 1px dotted $color-brown-light;
			content: '';
			display: block;
			width: 100%; 
			position: relative;
			top: 0;
			
			@media #{$topbarbreakmedia} {
				border-top: 0;
			}
		}
		
		&:first-child {
			border-top: 1px solid $color-orange-dark;
			margin-top: 15px;
			
			@media #{$topbarbreakmedia} {
				border-top: 0;
				margin-top: 0;
			}
		}
	}
}

.top-bar-section {
	> ul {
		@media #{$topbarbreakmedia} {
		  background: transparent;
			font-size: 0.1px;
		 	line-height: 0.1px;
			text-align: justify;
			width: 100%;
		} 
		
		&:after {
			@media #{$topbarbreakmedia} {
				content: '';
				width: 100%;
				display: inline-block;
				font-size: 0.1px;
				line-height: 0.1px;
			}
		}
	}
	
	& > ul > li {
		@media #{$topbarbreakmedia} {
			float: none;
			display: inline-block;
		}
		
		&.has-dropdown > a {
			position: relative;
			
			&:after {
				@extend .has-arrow;
				    
				@media #{$topbarbreakmedia} {
				    background: url("images/arrow-brown-down.png") no-repeat scroll left top transparent;
				    margin-top: -1px;
				    height: 6px;
				    width: 11px;
				}
			}
		}
		
		&.hover > a {
			@media #{$topbarbreakmedia} {
				background: transparent;
				color: $color-orange-dark;
			}
			
			&:after {
				@media #{$topbarbreakmedia} {
					background-image: url('images/arrow-orange-up.png');
					margin-top: -2px;
				}
			}
		}
		
		> ul {
			@media #{$topbarbreakmedia} {
				border-top: 2px solid $color-orange-dark;
			}
		}
	}
	
	a {
		font-family: 'HelveticaNeueLT-Medium',$sansFontFamily;
	}
	
	ul ul {
		a {	@media #{$topbarbreakmedia} { font-family: 'HelveticaNeueLT-Light',$sansFontFamily; }	}
		.has-dropdown > a:after { @extend .has-arrow; }
	}
	
	.dropdown {
		@media #{$topbarbreakmedia} {
			@include box-shadow(3px 3px 3px 0 rgba(0,0,0,0.3));
		}
	}
}

.nav-contact-area {
	font: 12px/1.4em 'HelveticaNeueLT-Light',$sansFontFamily;
	padding-bottom: 10px;
	padding-top: 3em;
	display: none!important;

	@media #{$small} {
		&.show-for-small.active {
			display: block!important;
		}
	}
	
	.row {
		margin-bottom: 2em;	
	}
	
	dt {
		background: url('images/arrow-white-down.png') no-repeat right 8px;
		display: inline-block;
		padding-right: 1.2em;
	}
	
	dd {
		font-size: 11px;
		display: block;
		white-space: nowrap;
		
		a {
			color: #fff;
		}
		
		&:hover,
		&:active {
			color: $color-orange-light;
			cursor: pointer;
			text-decoration: underline;
		}
	}
	
	hr {
		border-color: $color-orange-dark;
		margin-bottom: 1.5em;
	}
}


/* Page Content Area
 ========================================================================== */
.page-content {
	margin: 0 0.9375em 2.1em;
	
	&.margin-bottom-half {
		margin-bottom: 0.6em;
	}
}

.page-main-content {
	background: #fff;
	color: $color-brown-dark;
	overflow: hidden;
	padding: 1.5em 0 0.9375em;
	
	@media #{$small} {
		padding: 1.5em 1.5em 1.5em 3.5em;
	}
}	

.page-main-sidebar {
	padding: 1.5em 1em;
}


/* Page Contact Area
 ========================================================================== */
.page-contact-area {
	color: #fff;
	margin: 0 0.9375em 3em 0.9375em;
	
	.columns+.columns dl,
	.columns+.columns a.more {
		border-left: 1px dotted $color-orange-dark;
	}
	
	> .row {
		background: $color-brown-dark;
	}

	dl {
		padding: 10% 4.6% 10%;
		margin: 0;
		
		dt {
			font: 16px/3em 'HelveticaNeueLT-Light',$sansFontFamily;
			float: left;
			width: 40%;
			
			@media #{$medium} {
				font: 22px/2.8em 'HelveticaNeueLT-Light',$sansFontFamily;
			}
		}
		
		dd {
			font: 11px/1.2em 'HelveticaNeueLT-Roman',$sansFontFamily;
			padding-left: 40%;
			
			@media #{$medium} {
				font: 13px/1.2em 'HelveticaNeueLT-Roman',$sansFontFamily;
			}
			
			&:last-child {
				margin-bottom: 0;
			}
			
			span {
				font-family: 'HelveticaNeueLT-Bold',$sansFontFamily;
				color: $color-orange-light;
			}
		}
	}
	
	a {
		color: #fff;
		&:hover {
			text-decoration: underline;
		}
		
		&.more {
			font: 13px/1.6em 'HelveticaNeueLT-Roman',$sansFontFamily;
			background: $color-brown-light;
			display: block;
			padding: 3px 17% 3px;
			text-align: right;
			
			&:hover {
				background: url('images/highlight-bar.jpg') no-repeat center top ;
			}
		}
	}
}


/* Page Footer
 ========================================================================== */
.page-footer {
	margin-bottom: 20px;
	
	hr {
		border-color: $color-brown-dark;
		margin: 0 0.9375em;
		max-width: 62.5em;
		
		@media only screen and (min-width: 1000px) {
			margin: 0 auto;
		}
	}
	
	.footer-block { @extend .row; 
		padding-top: 1.875em;
		padding-bottom: 1.875em;
		
		&:last-child {
			padding-top: 0.5em;
			padding-bottom: 0.5em;
		}
	}
	
	.footer-logo {
		margin-bottom: 1.875em;
	}
	
	h6 {
		font-size: 11px;
		line-height: 1.4em;
		text-transform: uppercase;
		margin-bottom: 0.8em;
		white-space: nowrap;
		
		@media #{$small} {
			font-size: 14px;
			margin-top: 0;
		}
		
		&.inline {
			@media #{$medium} {
				line-height: 2em;
				float: left;
				padding-right: 10px;
			}
		}

		a {
			color: $color-brown-dark;
			
			&:hover {
				text-decoration: underline;
			}
		}
	}
	
	.pretty-list {
		margin-bottom: 0;
		
		@media #{$small} {
			& + h6 {
				margin-top: 35px;
			}
		}
	}
	
	.icon-list {
		@media #{$small} {
			margin-bottom: 0;
		}
	}
	
	.newsletter {
		margin: 0;
		
		p {
			overflow: hidden;
			
			&,
			& input {
				margin-bottom: 0;
			}
			
			& input {
				float: left;
				margin: 0;
				
				&[type="text"] { width: 80%; }
				&[type="submit"] { width: 20%; }
			}
		}
	}
	
	.copyright {
		font: 11px/1.4em 'HelveticaNeueLT-Roman',$sansFontFamily;
		text-align: center;
		
		p {
			margin-bottom: 0.3em;
		}
	}
}


/* Tiles
 ========================================================================== */
.tile-row {
  background-color: $color-brown-dark;
	
	.tile {
		background-color: $color-brown-light;
		color: #fff;
		
		&.brown-light { background-color: $color-brown-light; }
		&.brown-dark { background-color: $color-brown-dark; }
		&.white { background-color: #fff; }
		&.orange-highlight {
			background: #f68a33;
			background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZjY4YTMzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I5NTkxNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=');
			background: -moz-linear-gradient(-45deg, #f68a33 0%, #b95915 100%);
			background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f68a33), color-stop(100%,#b95915));
			background: -webkit-linear-gradient(-45deg, #f68a33 0%,#b95915 100%);
			background: -o-linear-gradient(-45deg, #f68a33 0%,#b95915 100%);
			background: -ms-linear-gradient(-45deg, #f68a33 0%,#b95915 100%);
			background: linear-gradient(135deg, #f68a33 0%,#b95915 100%);
		}
	}
	
	.tile-title {
		color: #fff;
		font-weight: normal;
		margin-top: 0;
	}
	
	img {
		&.fullwidth {
			width: 100%;
		}		
		
		&.spacer {
			float: left;
			margin-left: -100%;
			opacity: 0;
			position: relative;
			z-index: -1000;
		}
	}
	
	@media only screen and (max-width: ($small-screen - 1)) {
		.small-12 > .tile-content > .spacer {
			display: none;
			
			&.keepheight {
				display: block;
			}
		}
		
		.small-12 > .tile-content > .tile-content-inner {
			padding-top: 20px;
			padding-bottom: 20px;
		}
	}
}

.tile-row .tile-content {
	float: left;
	position: relative;
	width: 100%;
	
	.tile-content-inner {
		padding: 0.3em 0.5em 0;
		
		&.one-half,
		&.two-third {
			width: 80%;
		}
			
		@media #{$small} {
			padding: 0.9em 1.2em 0;
			
			&.one-half {
				width: 65%;
			}
			
			&.two-third {
				width: 80%;
			}
		}
	}
	
	.tile-title {
		font-family: 'HelveticaNeueLT-Light',$sansFontFamily;
		color: #fff;
		margin: 0 0 0.3em;
		
		@media #{$medium} {
			margin: 0 0 0.7em;
		}
	}
	
	h4.tile-title {
		font: 16px/18px 'HelveticaNeueLT-Light',$sansFontFamily;
		
		
		@media #{$small} {
			font: 18px/20px 'HelveticaNeueLT-Light',$sansFontFamily;
		}
		
		@media #{$medium} {
			font: 26px/34px 'HelveticaNeueLT-Light',$sansFontFamily;
		}
		
		a {
			color: #fff;
			text-decoration: underline;
		}
	}
	
	p { 
		font: 10px/12px 'HelveticaNeueLT-Light',$sansFontFamily;
		
		@media #{$small} {
			font: 12px/14px 'HelveticaNeueLT-Light',$sansFontFamily;
		}
		
		@media #{$medium} {
			font: 14px/18px 'HelveticaNeueLT-Light',$sansFontFamily;
		}
	}
	
	a {
		color: #fff;
		
		&:hover {
			text-decoration: underline;
		}
	}
	
	.read-more {
		background: url('images/arrow-orange-left-circle-small.png') no-repeat right bottom;
		display: block;
		min-height: 11px;
		padding-right: 13px;
		
		@media #{$small} {
			background: url('images/arrow-orange-left-circle.png') no-repeat right bottom;
			min-height: 16px;
			padding-right: 23px;
		}
		
		&.inline {
			display: inline-block;
		}
	}
}

.tile-row .orange-highlight .tile-content .read-more {
	background: url('images/arrow-brown-left-circle-small.png') no-repeat right bottom;
	
	@media #{$small} {
		background: url('images/arrow-brown-left-circle.png') no-repeat right bottom;
	}
}

.tile-row .tile-background img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.tile-row .tile-label {
	font: 72px/72px 'HelveticaNeueLT-Bold',$sansFontFamily;
	color: #fff;
	position: absolute;
	bottom: 0.4em;
	right: 0.4em;
	text-decoration: underline;
}


/* 
 * Content Arrows 
 * * * * * * * */
$triangle-size: 13px;
$color-orange-triangle: #dc7526;

.content-arrow {
	position: absolute;
	z-index: 10;
}

.small-arrow-left:before { @extend .content-arrow;
	left: -1 * ($triangle-size * 2);
	top: 30px;
	@include css-triangle($triangle-size, rgba(141, 131, 129,1), right);
	
	.brown-light & { @include css-triangle($triangle-size, $color-brown-light, right); }
	.brown-dark & {	@include css-triangle($triangle-size, $color-brown-dark, right); }
	.orange-highlight & { @include css-triangle($triangle-size, $color-orange-triangle, right); }
}

.small-arrow-right:before { @extend .content-arrow;
	right: -1 * ($triangle-size * 2);
	top: 30px;
	@include css-triangle($triangle-size, rgba(141, 131, 129,1), left);
	
	.brown-light & { @include css-triangle($triangle-size, $color-brown-light, left); }
	.brown-dark & {	@include css-triangle($triangle-size, $color-brown-dark, left); }
	.orange-highlight & { @include css-triangle($triangle-size, $color-orange-triangle, left); }
}

.small-arrow-top:before { @extend .content-arrow;
	left: 25px;
	top: -1 * ($triangle-size * 2);
	@include css-triangle($triangle-size, rgba(141, 131, 129,1), bottom);
	
	.brown-light & { @include css-triangle($triangle-size, $color-brown-light, bottom); }
	.brown-dark & {	@include css-triangle($triangle-size, $color-brown-dark, bottom); }
	.orange-highlight & { @include css-triangle($triangle-size, $color-orange-triangle, bottom); }
}

.small-arrow-bottom:before { @extend .content-arrow;
	left: 25px;
	bottom: -1 * ($triangle-size * 2);
	@include css-triangle($triangle-size, rgba(141, 131, 129,1), top);
	
	.brown-light & { @include css-triangle($triangle-size, $color-brown-light, top); }
	.brown-dark & {	@include css-triangle($triangle-size, $color-brown-dark, top); }
	.orange-highlight & { @include css-triangle($triangle-size, $color-orange-triangle, top); }
}

.large-arrow-left:before { @extend .content-arrow;
	@media #{$small} {
		left: (-1 * ($triangle-size * 2)) + 1;
		right: auto;
		top: 30px;
		bottom: auto;
		@include css-triangle($triangle-size, rgba(141, 131, 129,1), right);
		
		.brown-light & { @include css-triangle($triangle-size, $color-brown-light, right); }
		.brown-dark & {	@include css-triangle($triangle-size, $color-brown-dark, right); }
		.orange-highlight & { @include css-triangle($triangle-size, $color-orange-triangle, right); }
	}
}
	
.large-arrow-right:before { @extend .content-arrow;
	@media #{$small} {
		left: auto;
		right: (-1 * ($triangle-size * 2)) + 1;
		top: 30px;
		bottom: auto;
		@include css-triangle($triangle-size, rgba(141, 131, 129,1), left);
		
		.brown-light & { @include css-triangle($triangle-size, $color-brown-light, left); }
		.brown-dark & {	@include css-triangle($triangle-size, $color-brown-dark, left); }
		.orange-highlight & { @include css-triangle($triangle-size, $color-orange-triangle, left); }
	}
}
	
.large-arrow-top:before { @extend .content-arrow;
	@media #{$small} {
		left: 25px;
		right: auto;
		top: -1 * ($triangle-size * 2);
		bottom: auto;
		@include css-triangle($triangle-size, rgba(141, 131, 129,1), bottom);
		
		.brown-light & { @include css-triangle($triangle-size, $color-brown-light, bottom); }
		.brown-dark & {	@include css-triangle($triangle-size, $color-brown-dark, bottom); }
		.orange-highlight & { @include css-triangle($triangle-size, $color-orange-triangle, bottom); }
	}
}
	
.large-arrow-bottom:before { @extend .content-arrow;
	@media #{$small} {
		left: 25px;
		right: auto;
		bottom: -1 * ($triangle-size * 2);
		top: auto;
		@include css-triangle($triangle-size, rgba(141, 131, 129,1), top);
		
		.brown-light & { @include css-triangle($triangle-size, $color-brown-light, top); }
		.brown-dark & {	@include css-triangle($triangle-size, $color-brown-dark, top); }
		.orange-highlight & { @include css-triangle($triangle-size, $color-orange-triangle, top); }
	}
}


/* Logo Background Tiles
 ========================================================================== */
.logobg-middleleft,
.logobg-middleright, {
	@media #{$small} {
		.motion-image {
			@include transition(opacity 300ms ease 0s);
			opacity: 0;
		}
		
		&:hover {
			.motion-image {
				opacity: 1;
			}
		}
	}
}

.logobg-topcenter,
.logobg-topleft,
.logobg-topright,
.logobg-middleleft,
.logobg-middleright,
.logobg-bottomcenter,
.logobg-bottomleft,
.logobg-bottomright {
	background-repeat: no-repeat;
}

.logobg-topcenter {
	background-image: url('images/logobg-topcenter.jpg');
	background-position: center bottom; 
}

.logobg-topleft {
	background-image: url('images/logobg-topleft.jpg');
	background-position: right bottom; 
}

.logobg-topright {
	background-image: url('images/logobg-topright.jpg');
	background-position: left bottom; 
}

.logobg-middleleft {
	background-image: url('images/logobg-middleleft.jpg');
	background-position: right center;
}

.logobg-middleright {
	background-image: url('images/logobg-middleright.jpg');
	background-position: left center;
}

.logobg-bottomcenter {
	background-image: url('images/logobg-bottomcenter.jpg');
	background-position: center top; 
}

.logobg-bottomleft {
	background-image: url('images/logobg-bottomleft.jpg');
	background-position: right top; 
}

.logobg-bottomright {
	background-image: url('images/logobg-bottomright.jpg');
	background-position: left top; 
}



/* Reusable Elements
 ========================================================================== */
.search {
	margin-bottom: 0.8em;
	
	p {
		margin-bottom: 0; 
	}
	
	label {
		font: normal 14px/1em 'HelveticaNeueLT-Bold',$sansFontFamily;
		color: $color-brown-dark;
	}
	
	label,
	input[type="text"] {
		display: inline-block;
		padding: 2px 7px;
	}
	
	input[type="text"] {
		border: 1px solid $color-brown-dark;
		height: 23px;
		line-height: 23px;
		@include border-radius(10px);
	}
	
	input[type="submit"] {
		background: url('images/icon-search.png') no-repeat center center;
		border: 0;
		cursor: pointer;
		height: 25px;
	}
}
	
.icon-list {
	@extend .inline-block-list;
	
	li, a {
		font: normal 14px/1em 'HelveticaNeueLT-Bold',$sansFontFamily;
		vertical-align: middle;
	}
	
	.icon {
		background: url('images/icon-list.png') no-repeat left top $color-brown-dark; 
		display: inline-block;
		margin: 0;
		height: 30px;
		width: 30px;
		line-height: 0;
		@include border-radius(50%);
		@include transition(background-color 300ms ease-out 0s);
		
		&:hover {
			background-color:  $color-brown-light;
		}
	}
	
	.login { background-position: 7px 8px; }
	.facebook { background-position: 7px -22px; }
	.twitter { background-position: 8px -53px; }
	.linkedin { background-position: 8px -85px; }
	.email { background-position: 8px -115px; }
	.search { background-position: 8px -146px; }
	
	.divider {
		background: url('images/divider.png') no-repeat left top;
		display: inline-block;
		height: 25px;
		width: 3px;
	}
}

.call-to-action {
	font: 17px/1.2em 'HelveticaNeueLT-Bold',$sansFontFamily;
	background: $color-orange-light;
	color: #fff;
	padding: 15px 10px 20px;
	text-align: center;
	@include border-radius(7px);
	
	a {
		color: #fff;
	}
	
	p {
		margin: 0;
	}
	
	small {
		font: 11px/1em 'HelveticaNeueLT-Roman',$sansFontFamily;
		display: block;
	}
}

.inline-block-list li {
	display: inline-block;
	
	&+li {
		margin-left: 18px;
	}
}

.pretty-list {
	list-style: none outside none;
	margin-bottom: 33px;
	
	li {
		background: url('images/arrow-brown-left.png') no-repeat left 5px;
		font: 14px/20px 'HelveticaNeueLT-Roman',$sansFontFamily;
		padding-left: 20px;
		padding-bottom: 13px;		
		
		a {
			
			color: $color-brown-dark;
			text-decoration: none;
			
			&:hover {
				text-decoration: underline;
			}
		}
	}
}

.feed-list {
	list-style: none outside none;
	
	time {
		font: 12px/18px 'HelveticaNeueLT-Bold',$sansFontFamily;
		color: $color-orange-dark;
		display: block;
		margin-bottom: 0.2em;
		overflow: hidden; 
		white-space: nowrap;
		
		&.light {
			color: $color-orange-light;
		}
		
		span {
			overflow: hidden;
			&:after {
				content: '....................................................................................................................................................................................................................................................';
			}
		}
	}
	
	p {
		a {
			background: url('images/arrow-orange-light-right.png') no-repeat right bottom;
			display: block;
			
			&:hover {
				background: url('images/arrow-white-right.png') no-repeat right bottom;
			}
		}
		
		@media #{$small} {
			margin-bottom: 0.7em;
		}
		
		@media #{$medium} {
			margin-bottom: 1.3em;
		}
	}
}

.anchor-list {
	list-style: none outside none;
	
	a {
		font: 18px/24px 'HelveticaNeueLT-Roman',$sansFontFamily;
		display: block;
		color: #fff;
		padding-bottom: 0.9em;
		text-decoration: underline;
		
		&:hover {
			color: $color-orange-light;
		}
	}
	
	.has-dropdown a {
		background: url('images/arrow-white-down.png') no-repeat right 0.5em;
		
		&:hover {
			background: url('images/arrow-orange-down.png') no-repeat right 0.5em;
		}
	}
}

.button-fmd {
	background: $color-brown-dark;
	border-color: $color-brown-dark;
	font: 14px/20px 'HelveticaNeueLT-Roman',$sansFontFamily;
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	@include box-shadow();
	@include transition(background-color 300ms ease-out 0s);
	@include border-radius(0);
	
	&:hover,
	&:active {
		background: $color-brown-light;
		border-color: $color-brown-light;
	}	
}

.blockquote-featured {
	margin: 20px 0;
	background: url('images/quote-left-small.png') no-repeat 5% 7%;
	background: 
		url('images/quote-left-small.png') no-repeat 5% 7%,
		url('images/quote-right-small.png') no-repeat 90% 90%;
	
		
	@media #{$small} {
		margin: 0;
		background: url('images/quote-left.png') no-repeat 5% 7%;
		background: 
		url('images/quote-left.png') no-repeat 5% 7%,
		url('images/quote-right.png') no-repeat 90% 90%;
	}
		
	blockquote {
		font: italic 12px/18px Georgia,$serifFontFamily;
		margin: 0;
		padding: 35px 0 30px;
		text-align: center;
		
		@media #{$small} {
			font: italic 16px/22px Georgia,$serifFontFamily; 
			padding: 20px 0 20px;
			margin: 0;
		}
		
		@media #{$medium} {
			font: italic 18px/28px Georgia,$serifFontFamily; 
			padding: 40px 0 40px;
		}
		
		cite {
			font: italic bold 14px/28px Georgia,$serifFontFamily;
			
			&:before {
				content: '';
			}
		}
	}
}


/* Individual Styles
 ========================================================================== */
strong, 
.strong { 
	font-weight: bold; 
}

.inline { display: inline-block; }
.text-uppercase { text-transform: uppercase; }
.no-margin-bottom { margin-bottom: 0; }
.margin-bottom-16 { margin-bottom: 16px; }
.brown-dark-bg { background-color: $color-brown-dark; }
p.lead { font-size: 18px; line-height: 24px; }

img.alignright,
img.alignleft {
	margin-bottom: 1em;
	width: 100%;
	
	@media #{$small} {
		width: auto;
	}
}

img.alignright {
	@media #{$small} {
		float: right;
		margin: 10px 0 1em 2em;
	}
}

img.alignleft {
	@media #{$small} {
		float: left;
		margin: 10px 2em 1em 0;
	}
}
						
					

Recent Feedback see all

Krisztina is really friendly, professional and goes beyond what is necessary to ensure the job is done perfectly. I would recommend her to anyone and hope to work with her again in future.

Daniel Keel

Amazing work completed before the dealine. The email looked stunning and was EXACTLY the type of design I imaged in my head. Communication was second to none and will absolutely use again.

Phil Wannell

I cannot speak highly enough of Krisztina. If you’re ever going to use anyone for CSS, HTML or Jquery (or all three) then this is the person. Perfect work, perfect communication a complete pleasure to deal with!

Neale