Hum Consulting view live demo

Hum Consulting combines 20 years experience in marketing communications and information technology in a personalised consulting service. They’re all about solving problems and making an impact, moving quickly and creatively to generate impressive results that don’t cost the earth. A very exciting project with great looking, clean design. For this conversion the client opted for Twitter Bootstrap and the LESS stylesheet language. The outcome is a gorgeous looking, fully responsive website, which takes advantage of Bootstrap's built-in elements but also brings it's own personal components.

HTML Code

						
<!DOCTYPE html>
<html>
	<head>
		<!-- =============== Basic Page Needs =============== -->
		<meta charset="utf-8"/>
		<title>Home Page Template - HUM Consulting</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<!-- ================== Stylesheets ================= -->
		<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
		<link href="assets/flexslider/flexslider.css" rel="stylesheet" media="screen">
		<link href="assets/font-awesome/font-awesome.min.css" rel="stylesheet" media="screen">
		<link href="assets/css/screen.css" rel="stylesheet" media="screen">
		
		<!-- ==================== Scripts =================== -->
		<script src="assets/js/modernizr.js"></script>
		<!--[if lt IE 9]>
			<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>
	
	<body>
		<!-- === Top Bar === -->
		<div class="top-bar hidden-phone">
			<div class="container">
				<ul class="inline pull-right social-list">
					<li><a href="#" class="facebook"></a></li>
					<li><a href="#" class="twitter"></a></li>
					<li><a href="#" class="dribble"></a></li>
					<li><a href="#" class="mail"></a></li>
					<li><a href="#" class="youtube"></a></li>
					<li><a href="#" class="linkedin"></a></li>
					<li><a href="#" class="pinterest"></a></li>
					<li><a href="#" class="vimeo"></a></li>
				</ul>
			</div>
		</div>
		
		<!-- === Page Header === -->
		<header class="page-header">
			<div class="container">
				<!-- Logo -->
				<figure id="logo">
					<a href="index.html">Hum Consulting</a>	
				</figure>
				
				<!-- Page Navigation -->
				<div class="navbar page-nav">
					<!-- Collapsed Nav Button -->
					<a data-target=".page-navigation" data-toggle="collapse" class="btn btn-navbar"> 
						<span class="icon-bar"></span> 
						<span class="icon-bar"></span> 
						<span class="icon-bar"></span>
					</a>
					
					<!-- Navigation -->					
					<nav class="nav-collapse collapse page-navigation">
						<ul class="nav">
							<li><a href="#">About Us</a></li>
							<li class="dropdown">
								<a data-toggle="dropdown" class="dropdown-toggle" href="#">
									Services</a>
								<ul class="dropdown-menu">
									<li><a href="#">Strategic Marketing</a></li>
									<li><a href="#">PR & Communications </a></li>
									<li><a href="#">Website Solutions</a></li>
								</ul>
							</li>
							<li class="dropdown">
								<a data-toggle="dropdown" class="dropdown-toggle" href="#">
									Portfolio</a>
								<ul class="dropdown-menu">
									<li><a href="#">Project Title</a></li>
									<li><a href="#">Project Title</a></li>
									<li><a href="#">White Paper</a></li>
									<li><a href="#">Strive Magazine</a></li>
								</ul>
							</li>
							<li><a href="bloglist.html">Blog</a></li>
							<li><a href="#">Clients</a></li>
							<li><a href="#">Contact Us</a></li>
							<li>
								<a href="#" class="search">
									<i class="icon-search"></i>
								</a>
							</li>
						</ul>
						
						<!-- Search Box -->
						<div class="search-box">
							<form class="form-h row-fluid">
								<div class="controls controls-row">
									<input class="span8" type="text" placeholder="enter keywords here">
									<button class="btn-h fluid span4" type="submit">Enter</button>
								</div>
							</form>
						</div>
					</nav>
				</div>
			</div>
		</header>
		
		<!-- Full Width Page Slider -->
		<div class="page-slider flexslider">
			<article class="slides">
				<section>
					<div class="info">
						<div class="content">
							<h2>Get your business <em>HUM</em>ing.</h2>
							<p>Solutions you can AFFORD & ideas that WORK</p>
							<a href="#" class="more">
								<span>learn more</span>
							</a>
						</div>
					</div>
					<img src="assets/images/slider1.jpg" alt=""/>
				</section>
				
				<!-- More code following the same markup as the previous <SECTION> element -->
			</article>
		</div>
		
		<!-- === Page Content === -->
		<div class="page-content">
			<!-- Blurbs -->
			<div class="blurbs container text-center">
				<div class="row">
					<ul class="unstyled">
						<li class="span3 blurb">
							<a href="#" class="clickable">
								<figure>
									<img src="assets/images/icon-strategy.png" alt="Strategic Marketing"/>
								</figure>
								<h3 class="blurb-title">Strategic Marketing</h3>
								<p>The right strategy can deliver tangible results you can measure.</p>
							</a>
						</li>
						
						<!-- More code following the same markup as the previous <LI> element -->
					</ul>
				</div>
			</div>
			
			<!-- Dynamic Slider -->
			<div class="container">
				<div class="dynamic">
					<ul class="slides">
						<!-- First Slide -->
						<li>
							<div class="row-fluid">
								<blockquote class="span10 offset1 blockquote-h">
									<p>"Hum's in-depth understanding of all aspects of website development, from hosting, design and architecture, <br/>
										to copy writing, search engine optimisation and content management gave us the confidence to use them as a one-stop 
										web services provider. Six months later we have an effective, easy-to-update website that didn't cost the earth!"</p>
									<small>Steve Roberts, Chairman, Veritas Recruitment</small>
								</blockquote>
							</div>
						</li>
						
						<!-- More code similar in markup as the previous <LI> element -->
					</ul>
				</div>
			</div>
			
			<!-- Recent Works -->
			<div class="recent-works container">
				<h3 class="text-center">Our Recent Works</h3>
				<div class="fancynav navbar clearfix">
					<button class="fancynav-trigger hidden-desktop" data-toggle="collapse" data-target=".recent-works-categories"> 
						please select 
					</button>
					<div class="recent-works-categories categories nav-collapse">
						<ul class="nav">
							<li class="wide"><a href="#">all</a></li>
							<li class="wider"><a href="#">corporate identity development</a></li>
							<li class="wider"><a href="#">digital publishing design</a></li>
							<li class="wide"><a href="#">print</a></li>
							<li><a href="#">content writing</a></li>
							<li class="last"><a href="#">web</a></li>
						</ul>
					</div>
				</div>
				
				<div class="recent-works-images row-fluid">
					<ul class="unstyled inline">
						<li class="span3">
							<a href="#">
								<figure>
									<img src="assets/images/recent-works1.jpg" alt=""/>
									<figcaption>
										<h5>Our Special Project</h5>
										<span class="btn-more light">											
											more
										</span>
									</figcaption>
								</figure>
							</a>
						</li>
						
						<!-- More code following the same markup as the previous <LI> element -->
					</ul>
				</div>
			</div>
		</div>
		
		<!-- === Page Footer === -->
		<footer class="page-footer">
			<div class="container">
				<div class="row">
					<!-- Left Column -->
					<div class="span3">
						<section>
							<h5 class="light">HUM Consulting+</h5>
							<p>Hum Consulting specialises in creating powerful and effective marketing communications for services firms. We 
								help professional experts tell a compelling story about their service offering and make brands sing.</p>
						</section>
						
						<section>
							<h5 class="light">Get in touch+</h5>
							<address class="contact">
								<i class="icon-home"></i> PO 534. Prahran Melbourne Victoria 3181<br/>
								<i class="icon-phone"></i> 1300 695405<br/>
								<i class="icon-globe"></i> ABN: 90 771 753 563<br/>
								<i class="icon-envelope-alt"></i> <a href="mailto:info@humconsulting.com.au">info@humconsulting.com.au</a>
							</address>
						</section>
						
						<section>
							<h5 class="light">Stay Connected With Us+</h5>
							<ul class="inline social-list basic">
								<li><a href="#" class="facebook"></a></li>
								<li><a href="#" class="twitter"></a></li>
								<li><a href="#" class="dribble"></a></li>
								<li><a href="#" class="mail"></a></li>
								<li><a href="#" class="youtube"></a></li>
								<li><a href="#" class="linkedin"></a></li>
								<li><a href="#" class="pinterest"></a></li>
								<li><a href="#" class="vimeo"></a></li>
							</ul>
						</section>
					</div>
					
					<!-- Middle Column -->
					<div class="span6">
						<div class="middle-column">
							<section>
								<h5 class="light">Latest Tweets+</h5>
								<ul class="recent-tweets unstyled">
									<li>
										<img src="assets/images/twitt-pic.png" alt="" class="tweet-image"/>
										<p class="tweet-desc">
											<span class="time">About 13 hours ago</span>
											Now that we've introduced ourselves, we hope you'll think of us next time you need an extra pair of 
											hands to get things done. <a href="#">@Karina Ward</a> See what our customers say and view our portfolio. 
											<a href="#">@hum</a>
										</p> 
									</li>
									
									<!-- More code following the same markup as the previous <LI> element -->
								</ul>
							</section>
							
							<section>
								<h5 class="light">Newsletter Subscription+</h5>
								<form class="form-h dark row-fluid">
									<div class="controls controls-row">
										<input class="span8" type="text" placeholder="enter your email here">
										<button class="btn-h fluid span4" type="submit">Enter</button>
									</div>
								</form>
							</section>
						</div>
					</div>
					
					<!-- Right Column -->
					<div class="span3">
						<section>
							<h5 class="light">Latest News & Blogs+</h5>
							<ul class="recent-posts unstyled">
								<li>
									<a href="#" class="clickable">
										<img src="assets/images/article1.jpg" alt="Article Title" class="post-image"/>
										<h6 class="post-title light">News & blogs title</h6>
										<p class="post-desc">Subtitle or subheadline</p>
										<span class="post-date">March 27, 2013</span>
									</a>
								</li>
								
								<!-- More code following the same markup as the previous <LI> element -->
							</ul>
						</section>
					</div>
				</div>
			</div>
		</footer>
		
		<!-- === Page Bottom Bar === -->
		<div class="bottom-bar">
			<div class="container">
				<ul class="inline">
					<li><a href="#">FAQ</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Contact</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Terms</a></li>
					<li><a href="#">Privacy</a></li>
				</ul>
				<p>© 2013 <a href="index.html">Hum Consulting</a>. All rights reserved.</p>
			</div>
		</div>
		
		<!-- ================== Scripts ================= -->
		<script src="assets/js/jquery-1.9.1.min.js"></script>
		<script src="assets/flexslider/jquery.flexslider-min.js"></script>
		<script src="assets/bootstrap/js/bootstrap.min.js"></script>		
		<script src="assets/js/scripts.js"></script>
		
		<script>
			$(function() {
				setUpFancyNav('recent-works-categories li a');
				setUpPageSlider();
				setUpDynamicSlider();
			});
		</script>
	</body>
</html>
						
					

LESS Code

						
/* ==========================================================================
   Stylesheet For Custom Elements On All Pages
   ========================================================================== */

/* Variables
   ========================================================================== */
@sansFontFamily: Arial,Helvetica,sans-serif;
@serifFontFamily: Georgia,'Times New Roman',serif;
@bodyFontFamily: BandaRegular;
@lightFontFamily: OpenSansLight;
@regularFontFamily: OpenSansRegular;

@red: #d80C15;
@darkGrey: #434343;
@lightGrey: #e5e5e5;
@black: #000;
@white: #fff;

/* Landscape phone and up */
@mediaLandscapePhoneAndUp: ~"screen and (min-width: 480px)";
/* To portrait tablet */
@mediaToPortraitTablet: ~"screen and (max-width: 767px)";
/* Portrait tablet and up */
@mediaPortraitTabletAndUp: ~"screen and (min-width: 768px)";
/* Portrait tablet to landscape and desktop */
@mediaPortraitTabletToDesktop: ~"screen and (min-width: 768px) and (max-width: 979px)";
/* Desktop and up */
@mediaDesktopAndUp: ~"screen and (min-width: 980px)";
/* Large Desktop */
@mediaLargeDesktop: ~"screen and (min-width: 1200px)";


/* Mixins
   ========================================================================== */
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

.box-sizing(@sizing) {
  -webkit-box-sizing: @sizing;
     -moz-box-sizing: @sizing;
          box-sizing: @sizing;
}

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
      -ms-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}



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

@font-face {
  .font-face('BandaRegular','fonts/banda/banda-regular'); }

@font-face {
  .font-face('OpenSansLight','fonts/opensans/opensans-light'); }

@font-face {
  .font-face('OpenSansRegular','fonts/opensans/opensans-regular'); }



/* General Rules
   ========================================================================== */
body {
	font-family: @bodyFontFamily,@sansFontFamily;
	background-color: #eee;
	color: #626262;
	line-height: 24px;
	@media @mediaToPortraitTablet {
		padding-left: 0;
		padding-right: 0;
	}
}

.page-header,
.page-footer,
.page-content,
.bottom-bar {
	padding-left: 20px;
	padding-right: 20px;
}

a {
	color: #d80C15;
	
	&:hover,
	&:active {
		color: @black;
		text-decoration: none;
	}
}



/* Headings
   ========================================================================== */
h1,
h2,
h3 {
	line-height: 1.4em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: @darkGrey;
	text-transform: uppercase;
}

h1 small, 
h2 small, 
h3 small, 
h4 small, 
h5 small,
h6 small {
    color: inherit;
}

h2 {
	font-family: @regularFontFamily, @sansFontFamily;
	font-size: 30px;
}

h3 {
	font-family: @lightFontFamily, @sansFontFamily;
	font-size: 18px;
}

h4 {
	font-family: @lightFontFamily, @sansFontFamily;
	font-size: 16px;
}

h5 {
	font-family: @regularFontFamily, @sansFontFamily;
	font-size: 14px;
}

h6 {
	font-family: @regularFontFamily, @sansFontFamily;
	font-size: 12px;
}



/* Top Bar
   ========================================================================== */
.top-bar {
	background: #363636;
	border-bottom: 4px solid #555;
	line-height: 0;
	@media @mediaPortraitTabletAndUp {
		margin-bottom: 45px;
	}
}



/* Page Header
   ========================================================================== */
.page-header {
	border: 0;
	margin: 0;
	padding-top: 30px;
	padding-bottom: 20px;

	.container {
		position: relative;
	}

	#logo {
		position: absolute;
		margin: 0;
		left: 0;
		top: 0;

		a {
			background: url('images/logo-small.png') no-repeat left top;
			display: block;
			height: 39px;
			width: 103px;
			text-indent: -9999px;
			@media @mediaDesktopAndUp {
				background: url('images/logo.png') no-repeat left top;
				height: 66px;
				width: 176px;
			}
		}
	}
}


/*
 * Page Main Navigation
 * * * * * * * * * * */
.backgroundAndColor(@background, @color) {
	background: @background;
	color: @color;
}

.nav-collapse .nav > li > a:hover, 
.nav-collapse .dropdown-menu a:hover {
	background-color: #d80C15;
}

.page-nav {
	margin-bottom: 0;
	@media @mediaPortraitTabletAndUp { margin-bottom: 20px; }
	@media @mediaDesktopAndUp {	float: right; }
	
	.page-navigation {
		padding-top: 2em;
		@media @mediaDesktopAndUp {	padding-top: 0; }
	}
	
	/* Navigation List */
	.nav {
		background: @white;
		margin: 0;
		text-transform: uppercase;
		@media @mediaDesktopAndUp {	background: transparent; }
		
		a,
		& > li > a {
			font: normal 0.8571em/1.2em @lightFontFamily, @sansFontFamily;
			color: #434343;
			margin-bottom: 0;
			outline: none 0;
			padding: 0.93em 1.5em;
			text-shadow: none;
			vertical-align: middle;
			.border-radius(0);			
			@media @mediaPortraitTabletAndUp { font-size: 1.1429em; }
		}
		
		& > .active > a,
		& > li > a {
			&,
			&:focus,
			&:active {
				.backgroundAndColor(transparent, @darkGrey);
				.box-shadow(none);
			}
			
			&:hover {
				.box-shadow(none);
			}
		}
		
		& > .active > a {
			color: @red;
		}
		
		> li a,
		> li.active a {
			&:hover {
				.backgroundAndColor(@red, @white);
				filter: none;			
				@media @mediaDesktopAndUp {
					.backgroundAndColor(transparent, @red);
				}
			}
		}
		
		/*** === Second Level === ***/
		> li {
			> .dropdown-menu {
				&:after,
				&:before {
					@media @mediaDesktopAndUp {	border: 0; }
				}
			}
		}
		
		> li > .dropdown-menu > li a {
			@media @mediaDesktopAndUp {	padding: 1.35em 1.7143em; }
		}
		
		> li > .dropdown-menu > li+li > a {
			@media @mediaDesktopAndUp {	border-top: 1px solid @white; }
		}
		
		> li > .dropdown-menu > li+li > a:before {
			@media @mediaDesktopAndUp {
				content: '';
				display: block;
				height: 1px;
				background: #b5b5b5;
				width: 100%;
				margin: 0 auto;
				position: relative;
				top: -1.41em;
			}
		}
		
		.dropdown-menu a:focus,
		.dropdown-menu a:active {
			.backgroundAndColor(transparent, @darkGrey);
			filter: none;
		}
		
		.dropdown-menu a:hover {
			.backgroundAndColor(@red, @white);
		}
		
		.dropdown-toggle:after {
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 4px solid #000;
			content: "";
			display: inline-block;
			margin-top: -4px;
			height: 0;
			width: 0;
			vertical-align: middle;
			position: absolute;
			right: 1.5em;
			top: 1.5em;		    
			@media @mediaDesktopAndUp {
				right: 0.6em;
				top: 1.6em;
			}
		}
		
		/* White arrow down */
		.dropdown-toggle:hover:after {
			border-top: 4px solid @white;			
			/* Red Arrow Down */
			@media @mediaDesktopAndUp {	border-top: 4px solid @red; }
		}
		
		/* Red arrow down on hover */
		&.open .dropdown-toggle:hover:after {
			@media @mediaDesktopAndUp {
				border-top: 4px solid transparent;
				border-bottom: 4px solid @red;
				margin-top: -8px;
			}
		}

		/* Red arrow up */
		.open .dropdown-toggle:after {
			border-top: 4px solid transparent;
			border-bottom: 4px solid @red;
			margin-top: -8px;
		}
		
		/* White arrow up */
		.open .dropdown-toggle:hover:after {
			border-bottom: 4px solid @white;			
			@media @mediaDesktopAndUp {
				border-bottom: 4px solid @red;
			}
		}
		
		.dropdown-menu {
			border: none;
			margin: 0;
			padding: 0;		    
			@media @mediaDesktopAndUp {
				.border-radius(0);
				.box-shadow(none);
			}
		}
		
		.dropdown-menu > li > a {
			padding: 0.8em 2.5em;
			margin-bottom: 0;
			.border-radius(0);			
			@media @mediaPortraitTabletAndUp {
				font-size: 1.2em;
			}
		} 
		
		.dropdown-menu > .active > a,
		.dropdown-menu > .active > a:hover,
		.dropdown-menu > .active > a:active {
			background: #d80C15;
			color: #fff;
			filter: none;
		}
		
		li.dropdown.open > .dropdown-toggle,
		li.dropdown.active > .dropdown-toggle,
		li.dropdown.open.active > .dropdown-toggle {
			background: transparent;
			color: #d80c15;
			
			&:hover {
				.backgroundAndColor(@red, @white);
				@media @mediaDesktopAndUp {
					.backgroundAndColor(transparent, @red);
				}
			}
			
			&,
			&:hover {
				@media @mediaDesktopAndUp {
					.backgroundAndColor(@white, @red);
				}
			}
		}
		
		li.dropdown.active > .dropdown-toggle {
			&,
			&:hover {
				@media @mediaDesktopAndUp {
					background: transparent;
					color: #d80c15;
				}
			}
		}
		
		/* Global Search Button */
		a.search {
			cursor: pointer;
			padding: 15px 20px;
			outline: 0 none;
			.transition(all 130ms ease-in);
			
			&:hover {
				@media @mediaDesktopAndUp {
					background-color: @white;
				}
			}
		}
		
		a.search,
		a.search:focus {
			.backgroundAndColor(@red, @white);
		}
		
		a.search:hover,
		a.search.active {
			.backgroundAndColor(@white, @red);
		}
	}
	
	/* Global Search Box - Opened State */
	.search-box {
		background: @white;
		display: none;
		padding: 0 15px 20px;
		position: relative;	    
		@media @mediaDesktopAndUp {
			padding: 12px 10px 11px;
			position: absolute;
			right: 0;
			top: 49px;
			z-index: 100;
			width: 365px;
		}
		
		form {
			margin: 0;
			input[type="text"] {
				margin-bottom: 0;
				
				&:hover,
				&:focus {
					background-color: @lightGrey;
					border-color: @lightGrey;
				}
			}
		}
	}
	
	/* Navigation Button - Collapsed State */
	.btn.btn-navbar {
		background: @darkGrey;
		border: 0 none;
		margin-right: 0;
		margin-top: 0;
		padding: 10px;
		.border-radius(0);
	}
}



/* Page Main Content
   ========================================================================== */
.aside-block {
	margin-top: 58px;
}



/* Page Footer
   ========================================================================== */
.page-footer {
	background: #555;
	color: #d2d2d2;
	font-size: 12px;
	line-height: 20px;
	margin-top: 5.5%;
	padding-bottom: 40px;
	position: relative;
	
	&:before {
		content: url('images/flag-small.png');
		display: block;
		position: absolute;
		height: 19px;
		width: 32px;
		top: -13px;
		left: 50%;
		margin-left: -16px;		
		@media @mediaPortraitTabletAndUp {
			content: url('images/flag.png');
			width: 50px;
			height: 30px;
			top: -22px;
			margin-left: -25px;
		}
	}
	
	.middle-column {
		@media @mediaPortraitTabletAndUp {
			width: 85%;
			margin: 0 auto;
		}
	}
	
	section {
		margin: 40px 0 20px;
	}
	
	a {
		color: @white;
		
		&:hover {
			color: @red;
			text-decoration: none;
		}
	}
}


/* 
 * Recent Tweets
 * * * * * * * * * * */
.recent-tweets {
	li+li {
		margin-top: 5%;
	}
	
	.tweet-image {
		float: left;
		height: 38px;
		width: 38px;
	}
	
	.tweet-desc {
		padding-left: 55px;
	}
	
	.time {
		display: block;
		color: @white;
	}
}


/* 
 * Recent Posts
 * * * * * * * * * * */
.recent-posts {
	li {
		clear: both;
		overflow: hidden;
	}
	
	li+li {
		margin-top: 34px;
	}
	
	a.clickable:hover {
		color: @white;
	}
	
	.post-image {
		border: 3px solid #888;
		float: left;
		width: 105px;		
		@media @mediaPortraitTabletToDesktop {
			float: none;
			margin-bottom: 5px;
			width: 120px;
		}
	}
	
	.post-title,
	.post-desc,
	.post-date {
		margin: 0 0 0 120px;
		@media @mediaPortraitTabletToDesktop { margin: 0; }
	}
	
	.post-date {
		display: block;
		font-family: @serifFontFamily;
		font-style: italic;
	}
}



/* Page Bottom Bar
   ========================================================================== */
.bottom-bar {
	background: #363636;
	font-size: 11px;
	overflow: hidden;
	padding: 1.2em 0;
	text-align: center;
	
	ul, p {
		@media @mediaPortraitTabletAndUp { margin-bottom: 0; }
	}
	
	ul {
		@media @mediaPortraitTabletAndUp { float: left; }
		
		li {
			padding-left: 0;
			padding-right: 3px;
			@media @mediaLandscapePhoneAndUp {
				padding-left: 5px;
				padding-right: 5px;
			}
			
			& + li:before {
				content: '|';
				margin-right: 5px;
				@media @mediaLandscapePhoneAndUp { margin-right: 10px; }
			}
		}
	}
	
	p {
		@media @mediaPortraitTabletAndUp { float: right; }
	}

	a {
		color: #626262;
		&:hover {
			color: @white;
		}
	}
}



/* Home Page Styles
   ========================================================================== */
/* 
 * Blurbs 
 * * * * * * * * * * */
.blurbs {
	.blurb {
		margin-bottom: 4%;
		margin-top: 7.5%;
		
		.blurb-title {
			margin-bottom: 1.2143em;
		}
		
		&:hover .blurb-title {
			color: @red;
		}
	}
}


/* 
 * Blockquote
 * * * * * * * * * * */
blockquote.blockquote-h {
	border-left: 0;
	margin: 0;
	padding-left: 0;
	text-align: center;
	
	p,
	small {
		font-size: 1em;
		font-family: @serifFontFamily;
		font-style: italic;
		line-height: 1.8em;
	}
	
	small {
		color: @red;
		font-weight: bold;
		
		&:before {
			content: '';
		}
	}
}


/* 
 * Clients
 * * * * * * * * * * */
.clients {
	a {
		img {
			opacity: 0.8;
		}
		&:hover img {
			opacity: 1;
		}
	}
}


/* 
 * Recent Works
 * * * * * * * * * * */
.recent-works {
	margin-top: 45px;
	margin-bottom: 30px;
		
	.fancynav {
		.wide { width: 11%; }
		.wider { width: 27%; }
	}
	
	.navbar .nav li,
	.navbar .nav li.wide,
	.navbar .nav li.wider {
		display: block;
		width: auto;
		@media @mediaDesktopAndUp {
			display: table-cell;
			float: none;
		}
	}
	
	.recent-works-images {
		@media @mediaToPortraitTablet {
			[class*="span"] {
			 	float: left;
			 	margin-bottom: 2%;
			 	text-align: center;
			 	width: 50%;
			}
		}
		
		figure {
			margin: 0;
			position: relative;
			text-align: center;
			
			img,
			figcaption {
				border: 0.5em solid #fff;
				display: block;
				.box-sizing(border-box);
			}
			
			img {
				width: 100%;
			}
			
			figcaption {
				background: #d21016;
				background: rgba(210,16,22,0.9);
				color: #fff;
				opacity: 0;
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				.transition(all 200ms);
				
				.no-opacity & {
					background: url('images/red-bg.png') repeat;
					display: none;
				}
				
				h5 {
					color: @white;
					margin-top: 22.5%;
				}
				
				.btn-more {
					font-size: 0.8571em;
					margin-top: 10%;
					
					&:before {
						margin-right: 3px;
						padding: 0 4px;
					}
					
					&,
					&:before {
						line-height: 1em;
					}
				}
			}
			
			&:hover figcaption {
				@media @mediaDesktopAndUp {	opacity: 1;	}
			}
			
			.no-opacity &:hover figcaption {
				@media @mediaDesktopAndUp {	display: block;	}
			}
		}
	}
	
	.last {
		@media @mediaDesktopAndUp {
			text-align: right;
		}
	}
}



/* Blog Styles
   ========================================================================== */
.blog-item {
	background: @white;
	margin-bottom: 30px;
	padding: 7px;
	position: relative;
	
	&.single {
		padding-bottom: 27px;
	}

	figure {
		margin: 0 0 0.5em;
		@media @mediaPortraitTabletAndUp { margin: 0 0 1.5em; }
	}
	
	.blog-item-title {
		font: 23px/1.4em @regularFontFamily, @sansFontFamily;
		@media @mediaPortraitTabletAndUp { font: 30px/1.4em @regularFontFamily, @sansFontFamily; }
	}
	
	
	.blog-item-meta {
		font: 14px/1em @regularFontFamily, @sansFontFamily;
		background: @black;
		background: rgba(0,0,0,0.9);
		color: #e51319;
		min-width: 29.6689%;
		text-transform: uppercase;
		padding: 0.8571em 0.7143em;
		position: relative;
		@media @mediaPortraitTabletAndUp {
			display: inline-block;
			position: absolute;
			top: 24px;
			left: 0;
		}
		
		&:before,
		&:after {
			@media @mediaPortraitTabletAndUp {
				border-color: #1B1B1B transparent;
				border-style: solid;
				content: "";
				display: block;
				position: absolute;
				width: 0;
			}
		}
		
		&:before {
			@media @mediaPortraitTabletAndUp {
				border-width: 0 0 12px 8px;
				top: -12px;
				left: 0;
				bottom: auto;
			}
		}
		
		&:after {
			@media @mediaPortraitTabletAndUp {
				border-width: 12px 0 0 8px;
				bottom: -12px;
				top: auto;
				left: 0;
			}
		}
		
		p {
			margin: 0;
		}
		
		.post-date {
			font: italic 18px/1.2em @serifFontFamily;
			color: #fff;
			display: block;
			margin-top: 7px;
		}
	}
	
	.blog-item-text {
		padding: 0 13px;
		
		.blog-info {
			color: #434343;
			font-size: 14px;
			padding-left: 5px;
			position: relative;
			top: -1px;
			white-space: nowrap;
		}
		
		.share {
			margin-bottom: 20px;
			
			.blog-info {
				margin-bottom: 10px;
				overflow: hidden;
				@media @mediaPortraitTabletAndUp {
					clear: none;
					float: left;
					margin-right: 18px;
					margin-bottom: 0;
				}
			}
		}
	}
	
	.btn-more {
		@media @mediaPortraitTabletAndUp {
			position: absolute;
			bottom: 20px;
			right: 30px;
		}
	}
}



/* Reusable Elements
   ========================================================================== */
/* 
 * Dynamic Slider
 * * * * * * * * * * */
.dynamic {
	background: 
		url("images/arrow-left-small.png") repeat-x left top, 
		url("images/arrow-left-small.png") repeat-x left bottom;
	padding: 35px 50px;
	position: relative;
	
	.no-multiplebgs & {
		border-top: 3px solid #ccc;
		border-bottom: 3px solid #ccc;
	}
	
	.dynamicslider-direction-nav {
		list-style: none outside none;
		
		a {
			background: url('images/arrow-nav.png') no-repeat left top;
			cursor: pointer;
			display: block;
			font-size: 0;
			height: 35px;
			margin-top: -18px;
			opacity: 1;
			outline: 0 none;
			position: absolute;
			top: 50%;
			width: 14px;
			
			&.dynamicslider-prev {
				left: 0;
				&:hover { background-position: 0 -35px;	}
			}
			
			&.dynamicslider-next {
				background-position: -14px 0;
				right: 0;
				&:hover { background-position: -14px -35px;	}
			}
		}
	}
}


/* 
 * Full Width Page Slider
 * * * * * * * * * * * */
.page-slider {
	&.flexslider {
		background: none;
		border: 0;
		margin: 0 auto;
		position: relative;
		.border-radius(0);
		.box-shadow(none);
		@media @mediaPortraitTabletAndUp {
			max-width: 1600px;
			width: 100%;
		}
		
		img {
			max-width: 100%;
			height: auto;
		}
	}
	
	section {
		display: none;
		position: relative;
	}
	
	.info {
		background: #313131;
		color: @white;
		padding: 4% 4.27% 4% 5.7692%;
		position: relative;
		@media @mediaDesktopAndUp {
			position: absolute;
			min-width: 43%;
			max-width: 73%;
			left: -8px;
			top: 8%;
			padding: 4% 4.27% 4% 6.27%;
		}
		@media @mediaLargeDesktop { top: 14%; }
		
		&:before,
		&:after {
			border-color: #1b1b1b transparent;
			border-style: solid;
			content: '';
			display: block;
			position: absolute;
			width: 0;
		}
		
		&:before {
			border-width: 12px 8px 0 0;
			bottom: -12px;
			left: 0;
			@media @mediaDesktopAndUp {
				border-width: 0 0 12px 8px;
				top: -12px;
				left: 0;
				bottom: auto;
			}
		}
		
		&:after {
			border-width: 12px 0 0 8px;
			bottom: -12px;
			right: 0;
			@media @mediaDesktopAndUp {
				border-width: 12px 0 0 8px;
				bottom: -12px;
				top: auto;
				left: 0;
			}
		}
		
		h2 {
			font: 1.3em/1.2em 'BandaRegular', @serifFontFamily;
			color: @white;
			@media @mediaPortraitTabletAndUp { font: 2.8571em/1.2em 'BandaRegular', @serifFontFamily; }
			
			em {
				color: @red;
				font-style: normal;
			}
		}
		
		p {
			font: 0.9em/1.4em 'BandaRegular', @serifFontFamily;
			margin-top: 15px;
			@media @mediaPortraitTabletAndUp { font: 1.4286em/1.4em 'BandaRegular', @serifFontFamily; }
		}
		
		.more {
			font-size: 0.7855em;
			line-height: 1em;
			color: @white;
			display: block;
			margin-top: 20px;
			position: relative;
			text-align: right;
			@media @mediaPortraitTabletAndUp { font: 1em/1.2em 'BandaRegular', @serifFontFamily; }
			
			&:after {
				background: @white;
				content: '';
				margin-top: -1px;
				height: 1px;
				width: 100%;
				position: absolute;
				left: 0;
				top: 50%;
			}
			
			&:hover:after {
				background: @red;
			}
			
			span {
				background: #313131;
				display: inline-block;
				line-height: 1.2em;
				padding-left: 10px;
				position: relative;
				z-index: 1;
				
				&:before {
					border: 1px solid @white;
					color: @white;
					content: '+';
					display: inline-block;
					line-height: 1.2em;
					margin-right: 8px;
					padding: 2px 6px;
					position: relative;
				}
			}
			
			&:hover span {
				&:before {
					background: @red;
					border: 1px solid @red;
				}
			}
		}
	}
	
	.pageslider-direction-nav {
		list-style: none outside none;
		margin: 0;
		padding: 0;
		
		a {
			background: @red;
			background: rgba(216,12,21,0.5);
			bottom: 0;
			color: @white;
			cursor: pointer;
			display: block;
			margin: -20px 0 0;
			padding: 9px 0;
			position: absolute;
			text-align: center;
			text-decoration: none;
			width: 40px;
			z-index: 20;
			@media @mediaPortraitTabletAndUp { bottom: 20%;	}
			@media @mediaDesktopAndUp {
				top: 50%;
				bottom: auto;
			}
			
			&:hover {
				background: @red;
				background: rgba(216,12,21,0.7);
			}
			
			.no-opacity &,
			.no-opacity &:hover {
				background: url('images/red-bg.png') repeat;
			}
			
			&.pageslider-prev {
				left: 0;
				@media @mediaPortraitTabletAndUp { left: 10px; }
			}
			
			&.pageslider-next { 
				right: 0; 
				@media @mediaPortraitTabletAndUp { right: 18px; }
			}
			
			i:before {
				font-size: 11px;
			}
		}
	}
}


/* 
 * Fancy Navigation
 * * * * * * * * * * */
.fancyElement {
	font: 400 13px/11px 'FontAwesome',Arial,Helvetica,sans-serif;
	background: @darkGrey;
	color: @white;
	content: "\f105";
	display: inline-block;
	margin-right: 10px;
	padding: 2px 4px 2px 5px;
	text-shadow: none;
	@media @mediaDesktopAndUp { padding: 5px 7px 5px 8px; }
}

.fancynav { 
	.nav {
		margin: 0;
		display: table;
		width: 100%;
		
		li {
			color: @darkGrey;
			display: block;
			width: auto;
			
			a {
				padding: 0.83333em 1em;
				outline: 0 none;
				.border-radius(0);
				&:before {
					.fancyElement();
				}
				
				&:focus,
				&:hover {
					background: transparent;
					color: @darkGrey;
					filter: none;
				}
			}
			
			&.active > a,
			&.active > a:hover,
			&.active > a:focus {
				background: transparent;
				color: inherit;
				.box-shadow(none);
			}
		}
	}

	.fancynav-trigger {
		&:before {
			.fancyElement();
		}
	}
	
	.nav li a:hover:before,
	.nav .active > a:before,
	.fancynav-trigger:hover:before {
		background: @red;
	}
	
	.nav li a,
	.fancynav-trigger {	
		font: normal 0.8571em/1.2em 'BandaRegular', @serifFontFamily;
		@media @mediaDesktopAndUp { font: normal 1em/1.2em 'BandaRegular', @serifFontFamily; }
	}
	
	.fancynav-trigger {
		background: @white;
		border: 0;
		display: block;
		margin: 0 auto;
		padding: 0.83333em 1em;
		position: relative;
		text-align: left;
		width: 100%;
		
		&:after {
			border-style: solid;
			border-width: 4px;
			border-color: transparent;
			border-bottom-color: @red;
			content: "";
			display: inline-block;
			height: 0;
			margin-top: -6px;
			position: absolute;
			right: 1.5em;
			top: 1.5em;
			vertical-align: middle;
			width: 0;
		}
		
		&.collapsed:after {
			border-bottom: 4px solid transparent;
			border-top: 4px solid @black;
			margin-top: -3px;
		}
	}
	
	.categories {
		background: @white;
	}
}


/* 
 * Social List
 * * * * * * * * * * * */
.social-list { 
	margin: 0; 
	
	li {
		line-height: 0;
		
		a {
			background: url('images/social-sprite.png') no-repeat left top;
			display: inline-block;
			height: 28px;
			width: 28px;
			
			&.facebook { 
				background-position: 0 -28px; 
				&:hover { background-position: 0 0; }
			}
			
			&.twitter { 
				background-position: -28px -28px;
				&:hover { background-position: -28px 0; }
			}
			
			&.dribble { 
				background-position: -56px -28px;
				&:hover { background-position: -56px 0; }
			}
			
			&.mail { 
				background-position: -84px -28px;
				&:hover { background-position: -84px 0; }
			}
			
			&.youtube { 
				background-position: -112px -28px;
				&:hover { background-position: -112px 0; }
			}
			
			&.linkedin { 
				background-position: -140px -28px;
				&:hover { background-position: -140px 0; }
			}
			
			&.pinterest { 
				background-position: -168px -28px;
				&:hover { background-position: -168px 0; }
			}
			
			&.vimeo { 
				background-position: -196px -28px;
				&:hover { background-position: -196px 0; }
			}
		}
	}
	
	&.basic li a.facebook:hover { background-position: 0 -56px; }
	&.basic li a.twitter:hover { background-position: -28px -56px; }
	&.basic li a.dribble:hover { background-position: -56px -56px; }
	&.basic li a.mail:hover { background-position: -84px -56px; }
	&.basic li a.youtube:hover { background-position: -112px -56px; }
	&.basic li a.linkedin:hover { background-position: -140px -56px; }
	&.basic li a.pinterest:hover { background-position: -168px -56px; }
	&.basic li a.vimeo:hover { background-position: -196px -56px; }
	
	&.inline li {
		padding: 0;
	}
}


/* 
 * Share buttons for ShareThis
 * * * * * * * * * * * */
.share { 
	.widget {
		margin-bottom: 10px;
		overflow: hidden;
		@media @mediaPortraitTabletAndUp {
			clear: none;
			float: left;
			margin-right: 18px;
			margin-bottom: 0;
		}
		
		> .btn,
		> span {
			float: left;
		}
		
		> .btn:hover,
		> .btn:focus {
			background-position: 0 0;
		}
		
		.btn-share span {
			background: url('images/share-sprite.png') no-repeat left top;
			display: inline-block;
			height: 14px;
			min-height: 1em;
			vertical-align: middle;
			width: 49px;
			
			&.likes { 
				background-position: center 1px;
				&:hover { background-position: center -27px; }
			}
			
			&.tweets { 
				background-position: center -54px;
				&:hover { background-position: center -82px; }
			}
			
			&.pins { 
				background-position: center -110px;
				&:hover { background-position: center -137px; }
			}
		}
		
		.countbox {
			font: 0.7857em/1em 'BandaRegular', @serifFontFamily;
			background: @white;
			border: 1px solid #c9c5c5;
			display: inline-block;
			margin-left: 7px;
			padding: 6px 5px 4px;
			position: relative;
			.border-radius(3px);
			
			&:before,
			&:after {
				border-style: solid;
				border-width: 3px 4px 3px 0;
				content: "";
				display: block;
				position: absolute;
				top: 7px;
				width: 0;
			}
			
			&:before {
				border-color: transparent #c9c5c5;
				left: -5px;
			}
			
			&:after {
				border-color: transparent #fff;
				left: -4px;
			}
		}
	}
}


/* 
 * Pagination
 * * * * * * * * * * * */
.pagination-h ul {
	.box-shadow(none);
	
	> li {
		&:last-child > a
		&:last-child > span,
		&:first-child > a, 
		&:first-child > span {
			.border-radius(0);
		}
	}
	
	li {
		a {
			font: italic 14px/1.4286em @serifFontFamily;
			border: 0;
			color: @darkGrey;
			padding: 2px 11px 7px;
			.transition(all 130ms ease-in);
			
			&,
			&:focus {
				background: @white;
			}
			
			i:before {
				position: relative;
				top: 3px;
			}
		}
		
		a:hover,
		&.active a {
			background: @red;
			color: @white;
		}
		
		&+li a {
			margin-left: 5px;
		}
	}
}


/* 
 * Breadcrumbs
 * * * * * * * * * * * */
.breadcrumb-h {
	background-color: transparent;
	margin-bottom: 10px;
	padding-left: 0;
	
	li {
		& + li:before {
			content: '/';
			display: inline-block;
			margin: 0 4px 0 2px;
		} 
		
		a,
		&.active {
			color: @darkGrey;
			text-shadow: none;
		}
		
		a {
			&:hover,
			&:active {
				color: @red;
			}
		}
	}
}


/* 
 * Thumbnails
 * * * * * * * * * * */
.thumbnails-h { 
	.thumbnail {
		background: @white;
		border: 1px solid @white;
		text-align: center;
		padding: 9px;
		.border-radius(0);
		
		&:hover,
		&:focus {
			border-color: @white;
			color: @red;
			.box-shadow(none);
			
			h3 {
				color: @red;
			}
		}
		
		h3 {
			margin: 18px 0 9px;
		}
		
		img {
			width: 100%;
		}
	}
}


/* 
 * Media
 * * * * * * * * * * */
.media-items {
	background: url("images/arrow-left-small.png") repeat-x left bottom;
	padding-bottom: 20px;
	margin-bottom: 30px;
}

.media-h {
	color: #626262;
	
	.media-body {
		background: url("images/arrow-left-small.png") repeat-x left top;
		padding-top: 30px;
		
		.media-heading {
			margin-bottom: 0;
		}
		
		p,
		span.time {
			font-family: @serifFontFamily;
			font-style: italic;
		}
		
		span.time {
			color: @red;
			font-size: 11px;
		}
	}
	
	&.first .media-body {
		background: none;
		padding-top: 0;
	}
}


/* 
 * Form
 * * * * * * * * * * * */
.form-h {
	overflow: hidden;
	
	textarea,
	input[type="text"],
	input[type="password"] {
		background: #e5e5e5;
		border-color: #e5e5e5;
		color: #555;
		font-family: @serifFontFamily;
		font-style: italic;
		line-height: 20px;
		-webkit-appearance: none;
		.border-radius(0);
		.box-shadow(none);
		.transition(all 130ms ease-in);
	}
	
	textarea,
	input[type="text"],
	input[type="password"] {
		&:hover,
		&:focus {
			background-color: @white;
			border-color: @white;
		}
	}
	
	&.dark textarea,
	&.dark input[type="text"],
	&.dark input[type="password"] {
		background-color: #959595;
		border-color: #959595;
	}
	
	&.dark textarea,
	&.dark input[type="text"],
	&.dark input[type="password"] {
		&:hover,
		&:focus {
			background-color: #e5e5e5;
			border-color: #e5e5e5;
		}
	}
	
	&.row-fluid .btn-h.span4 {
		 @media @mediaToPortraitTablet {
			margin-left: 0;
			margin-top: 5px;
		}
	}
	
	
	/* Target only IE8 */
	input[type="text"][class*="span"],
	.btn-h[class*="span"] {
		min-height: ~"20px\0/";
	}
	 
	.boxshadow & input[type="text"][class*="span"],
	.boxshadow & .btn-h[class*="span"] {
		min-height: ~"30px\0/";
	}
}


/* 
 * Button
 * * * * * * * * * * * */
.btn-h {
	background: #959595;
	border: 0 none;
	color: #555;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	line-height: 2.0833em;
	padding: 0 33px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	.transition(all 130ms ease-in);
	
	&.light {
		background: #e5e5e5;
		color: #555;
	}
	
	&:hover,
	&:active {
		background: @red;
		color: @white;
	}
	
	&.fluid {
		padding-left: 0;
		padding-right: 0;
	}

	&::-moz-focus-inner {
	 	padding: 0;
		border: 0
	}
}

.btn-more {
	display: inline-block;
	line-height: 1.2em;
	position: relative;
	
	&:before {
		background: @red;
		border: 1px solid @red;
		content: '+';
		color: @white;
		display: inline-block;
		font-size: 1.4em;
		padding: 3px 6px;
		margin-right: 8px;
		position: relative;
		.transition(all 130ms);
	}
	
	&:hover:before {
		background: transparent;
		border: 1px solid @red;
		color: @red;
	}
	
	&,
	&:hover,
	&:active {
		color: @red;
		text-decoration: none;
	}
	
	&.light,
	&.light:hover,
	&.light:active {
		color: @white;
		text-decoration: none;
	}
	
	&.light:before {
		background: transparent;
		border: 1px solid @white;
		color: @white;
	}
	
	&.light:hover:before {
		background: @white;
		color: @red;
	}
}


/* 
 * List of Links
 * * * * * * * * * * * */
.list-of-links { 
	li {
		padding-left: 1.4286em;
		text-transform: uppercase;
		
		& + li {
			margin-top: 1.2em;
		}
	
		a {
			color: #626262;
			&:hover,
			&:active {
				color: @red;
			}
		}
	}
}



/* Individual Elements
   ========================================================================== */
a.clickable {
	color: inherit;
	text-decoration: none;
	outline: 0 none;
}

.contact i {
	color: #f0f0f0;
	margin-right: 4px;
}

.headline {
	background: url("images/arrow-left-small.png") repeat-x left bottom;	
	color: @darkGrey;
	margin-bottom: 40px;
	padding-bottom: 10px;
}

.no-margin { margin: 0; }
.margin-bottom-5 { margin-bottom: 5px; }
.margin-bottom-45 { margin-bottom: 45px; }
.light { color: #d2d2d2; }
.subtitle { text-transform: none; }
.margin-image-left { margin: 0 25px 5px 0; }
.margin-image-right { margin: 0 0 5px 20px; }
						
					

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