/*
	Theme Name: Theme51
	Version: 1.2
	Author: Chris Sealey
	Copyright 2012 @51bits
*/

/* @group global reset */

* {
	border: none;
	margin: 0;
	padding: 0;
	}
a, a img {
	border: none;
	text-decoration: none;
	outline: none;
	}
input, textarea, button {
	outline: none;
	resize: none;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
	box-sizing: content-box;
		-webkit-appearance: none;
		-moz-appearance: none;
	appearance: none;
	}
button::-moz-focus-inner {
	border: 0;
	padding: 0;
	margin: 0;
	}
[type="search"]::-webkit-search-decoration,
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-results-button,
[type="search"]::-webkit-search-results-decoration {
	display: none;
	}
section, article, header, footer, aside, hgroup, nav, menu, small, img, label {
	display: block;
	}

/* @end */

/* @group enhancements */

::selection {
	background: #333;
	color: #fff;
	}
@-webkit-keyframes 'slide-up' {
	0%, 40% {
		opacity: 0;
			-webkit-transform: translateY(50px);
		}
	60% {
		opacity: .5;
			-webkit-transform: translateY(-3px);
		}
	100% {
		opacity: 1;
			-webkit-transform: translateY(0);
		}
	}
@-webkit-keyframes 'slide-in' {
	0% {
		opacity: 0;
			-webkit-transform: translateX(-300px);
		}
	80% {
		opacity: .5;
			-webkit-transform: translateX(10px);
		}
	100% {
		opacity: 1;
			-webkit-transform: translateX(0);
		}
	}
@font-face {
	font-family: 'goudy-bookletter';
	src: url('assets/fonts/goudy-bookletter.eot');
	src:
		url('assets/fonts/goudy-bookletter.eot?#iefix') format('embedded-opentype'),
		url('assets/fonts/goudy-bookletter.woff') format('woff'),
		url('assets/fonts/goudy-bookletter.ttf') format('truetype'),
		url('assets/fonts/goudy-bookletter.svg#GoudyBookletter1911Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	}
	
/* @end */

/* @group typography */

body {
	font: 13px/18px 'ff-meta-web-pro', 'helvetica', sans-serif;
	color: #78787b;
	}
h1 {
	font: normal 28px/32px 'ff-meta-serif-web-pro', 'georgia', serif;
	color: #222;
	}
h1 em {
	font: normal normal 42px/34px 'goudy-bookletter', serif;
	vertical-align: middle;
	}
h2, h3, label {
	font: 13px/18px 'ff-meta-web-pro', 'helvetica', sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	}
h3, h4, h5, label {
	color: #222;
	}
h3, label {
	font-weight: bold;
	}
h3 em, label em {
	font-weight: normal;
	color: #555;
	text-transform: lowercase;
	}
h4 {
	font: normal 16px/20px 'ff-meta-web-pro', 'georgia', serif;
	}
h5 {
	font: 18px/27px 'ff-meta-serif-web-pro', 'georgia', serif;
	}
h6 {
	font: normal 12px/12px 'ff-meta-web-pro', 'helvetica', sans-serif;
	color: #909090;
	letter-spacing: 1px;
	text-transform: uppercase;
	}
a {
	color: #1c8ef0;
	}
a:hover {
	color: #55a9f1;
	}
a:active {
	color: #126cba;
	}

/* @end */

/* @group core */

html {
	overflow-x: hidden;
	overflow-y: scroll;
		-webkit-font-smoothing: subpixel-antialiased;
		-moz-font-smoothing: subpixel-antialiased;
	font-smoothing: subpixel-antialiased;
		-webkit-text-size-adjust: 100%;
		-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	}
body > header {
	background: #1e1f23 url(assets/images/bg-light.jpg) center 55px repeat-x;
	background:
		url(assets/images/bg-light.jpg) center 55px repeat-x,
		url(assets/images/bg-dark.jpg) center top repeat #1e1f23;
	border-bottom: 1px solid #bbb;
	}
#content {
	position: relative;
	width: 960px;
	margin: 0 auto;
	clear: both;
	}
footer {
	border-top: 1px solid #ddd;
	width: 960px;
	padding: 0 15px;
	margin: 19px auto 0;
	clear: both;
	}
#content::after,
figure figcaption::after,
.modal ul::after,
footer::after {
	content: '';
	display: block;
	clear: both;
	}

/* @end */

/* @group globals */

a.cta,
button {
	position: absolute;
	right: 10px;
	top: 24px;
	background-color: #1c8ef0;
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,.05)));
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,.05));
		background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,.05));
	background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,.05));
	border: 1px solid #126cba;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	border-radius: 3px;
		-webkit-box-shadow:
			inset 0 1px 0 rgba(0,0,0,.2),
			0 1px 0 #fff;
		-moz-box-shadow:
			inset 0 1px 0 rgba(0,0,0,.2),
			0 1px 0 #fff;
	box-shadow:
		inset 0 1px 0 rgba(0,0,0,.2),
		0 1px 0 #fff;
	font-weight: bold;
	color: #fff;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 -1px 0 rgba(0,0,0,.2);
	padding: 8px 18px 7px;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
	user-select: none;
		-webkit-transition: background-image .2s ease;
		-moz-transition: background-image .2s ease;
	transition: background-image .2s ease;
		-webkit-tap-highlight-color: transparent;
		-moz-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	}
button {
	position: relative;
	top: auto;
	right: auto;
	font: bold 13px/18px 'ff-meta-web-pro', 'helvetica', sans-serif;
	cursor: pointer;
	}
a.cta:hover,
button:hover {
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.35)), to(rgba(255,255,255,.1)));
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,.35), rgba(255,255,255,.1));
		background-image: -moz-linear-gradient(top, rgba(255,255,255,.35), rgba(255,255,255,.1));
	background-image: linear-gradient(top, rgba(255,255,255,.35), rgba(255,255,255,.1));
	}
a.cta:active,
button:active {
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.15)), to(rgba(255,255,255,0)));
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,.15), rgba(255,255,255,0));
		background-image: -moz-linear-gradient(top, rgba(255,255,255,.15), rgba(255,255,255,0));
	background-image: linear-gradient(top, rgba(255,255,255,.15), rgba(255,255,255,0));
		-webkit-box-shadow:
			inset 0 1px 1px rgba(0,0,0,.3),
			0 1px 0 #fff;
		-moz-box-shadow:
			inset 0 1px 1px rgba(0,0,0,.3),
			0 1px 0 #fff;
	box-shadow:
		inset 0 1px 1px rgba(0,0,0,.3),
		0 1px 0 #fff;
	/*padding-top: 9px;*/
	/*padding-bottom: 6px;*/
	}
a.cta em,
button em {
	font-weight: normal;
	color: #ddd;
	color: rgba(255,255,255,.8);
	text-transform: lowercase;
	}
.action {
	position: relative;
	display: inline-block;
	padding-right: 11px;
	}
.action::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	background: url(assets/images/sprite.png) -14px -67px;
	width: 7px;
	height: 6px;
	margin-top: -3px;
	}
.action:hover::after {
	background-position: -27px -67px;
	}
.action:active::after {
	background-position: -40px -67px;
	}
	
/* @end */

/* @group navigation */

header nav {
	text-align: right;
	width: 970px;
	height: 55px;
	margin: 0 auto;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
	user-select: none;
	}
header nav a {
	position: relative;
	background: url(assets/images/loading-light.gif) -999px -999px no-repeat;
	line-height: 15px;
	color: #fff !important;
	text-shadow: 0 -1px 0 #000;
	text-align: right;
	height: 29px;
	padding: 13px 15px;
	float: right;
		-webkit-tap-highlight-color: transparent;
		-moz-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	}
header nav a:active > *,
header nav > a:first-child:active {
		-webkit-transform: translateY(1px);
		-moz-transform: translateY(1px);
	transform: translateY(1px);
	}
header nav a.active,
header nav a.current {
	background: #444;
		background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.15)), to(rgba(255,255,255,.05)));
		background: -webkit-linear-gradient(top, rgba(255,255,255,.15), rgba(255,255,255,.05));
		background: -moz-linear-gradient(top, rgba(255,255,255,.15), rgba(255,255,255,.05));
	background: linear-gradient(top, rgba(255,255,255,.15), rgba(255,255,255,.05));
	border-left: 1px solid #000;
	border-right: 1px solid #000;
		-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.5);
		-moz-box-shadow: inset 0 0 10px rgba(0,0,0,.5);
	box-shadow: inset 0 0 10px rgba(0,0,0,.5);
	margin: 0 -1px;
	}
header nav a.active {
	color: rgba(255,255,255,.2) !important;
	text-shadow: none;
	}
header nav > a:first-child {
	background: url(assets/images/sprite.png) -236px 6px;
	text-align: left;
	text-indent: -9999px;
	min-width: 85px;
	margin-left: 5px;
	float: left;
	}
header nav > a:first-child:hover {
	opacity: .9;
	}
header nav > a:first-child:active {
	opacity: .6;
	}
header nav a.active::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: url(assets/images/loading-light.gif);
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	}
header nav a strong {
	display: block;
	letter-spacing: 1px;
	text-transform: uppercase;
	}
header nav a em {
	display: block;
	font-style: normal;
	}
header nav a.drop-down {
	position: relative;
	padding-right: 34px;
	}
header nav a.drop-down::before,
header nav a.drop-down::after {
	content: '';
	position: absolute;
	top: 50%;
	}
header nav a.drop-down::before {
	right: 15px;
	border-right: 3px solid transparent;
	border-left: 3px solid transparent;
	border-top: 5px solid #fff;
	width: 0;
	height: 0;
	margin-top: -2px;
	}
header nav a.drop-down::after {
	right: 10px;
	background: #3c3d40;
	background: rgba(255,255,255,.1);
		background-image: -webkit-gradient(
			linear, right bottom, left top,
			color-stop(.5,rgba(255,255,255,0)),
			color-stop(.5,rgba(255,255,255,.1))
			);
		background-image: -webkit-linear-gradient(right bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,.1) 50%);
		background-image: -moz-linear-gradient(right bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,.1) 50%);
	background-image: linear-gradient(right bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,.1) 50%);
	border: 1px solid #5e5f62;
	border-color: rgba(255,255,255,.2);
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
	border-radius: 8px;
	width: 14px;
	height: 14px;
	margin-top: -8px;
	}
header nav a.drop-down:active::before {
	margin-top: -1px;
	}
header nav a.drop-down:active::after {
	margin-top: -7px;
	}
header nav a.drop-down.open::before {
	border-top: none;
	border-bottom: 5px solid #fff;
	margin-top: -3px;
	}
header nav a.drop-down.open::after {
	background-color: rgba(255,255,255,.2);
	border-color: rgba(255,255,255,.4);
	}
header nav a.drop-down.open:active::after {
	margin-top: -8px;
	}
header nav a.drop-down.open:active > * {
		-webkit-transform: none;
		-moz-transform: none;
	transform: none;
	}
header nav ul {
	display: none;
	position: absolute;
	right: -5px;
	top: 58px;
	background: #fff;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #8d8d90;
	border-color: rgba(0,0,0,.4);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	border-radius: 5px;
		-webkit-box-shadow: 0 3px 10px rgba(0,0,0,.3);
		-moz-box-shadow: 0 3px 10px rgba(0,0,0,.3);
	box-shadow: 0 3px 10px rgba(0,0,0,.3);
	z-index: 30;
	}
header nav a.drop-down.open ul {
	display: block;
	}
header nav ul li {
	position: relative;
	border-bottom: 1px solid #ddd;
	border-color: rgba(0,0,0,.1);
	line-height: 18px;
	text-align: left;
	text-shadow: none;
	list-style: none;
	padding: 15px 15px 17px 65px;
	}
header nav ul li i {
	left: 15px !important;
	}
header nav ul li:first-child {
		-webkit-border-radius: 5px 5px 0 0;
		-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	padding-top: 16px;
	}
header nav li:first-child::before,
header nav li:first-child::after {
	content: '';
	position: absolute;
	top: -8px;
	right: 15px;
	border-bottom: 8px solid rgba(0,0,0,.3);
	border-bottom-color: rgba(0,0,0,.4);
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	width: 0;
	height: 0;
	}
header nav li:first-child::after {
	top: -7px;
	border-bottom-color: #fff;
	}
header nav li:first-child:hover::after {
	border-bottom-color: #5eaff4;
	}
header nav li:first-child:active::after {
	border-bottom-color: #3c9ef2;
	}
header nav ul li:last-child {
	border-bottom: none;
		-webkit-border-radius: 0 0 5px 5px;
		-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	}
header nav ul li:hover,
#tags li.current {
	background-color: #1c8ef0;
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,.05)));
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,.05));
		background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,.05));
	background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,.05));
	border: 1px solid #126cba;
		-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
		-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
	text-shadow: -1px -1px 0 rgba(0,0,0,.2);
	/*margin: -1px -1px 0;*/
	}
header nav ul li:first-child:hover {
	margin-top: -1px;
	}
header nav ul li:last-child:hover {
	margin-bottom: -1px;
	}
header nav ul li:active {
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.15)), to(rgba(255,255,255,0)));
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,.15), rgba(255,255,255,0));
		background-image: -moz-linear-gradient(top, rgba(255,255,255,.15), rgba(255,255,255,0));
	background-image: linear-gradient(top, rgba(255,255,255,.15), rgba(255,255,255,0));
		-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.3);
		-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.3);
	box-shadow: inset 0 1px 0 rgba(0,0,0,.3);
	}
header nav ul li:hover i {
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2);
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,.2);
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
	}
header nav ul li:hover i::after {
	border-color: rgba(0,0,0,.6);
	}
header nav ul li strong {
	color: #222;
	letter-spacing: 0;
	text-transform: none;
	margin-top: 1px;
	}
header nav ul li strong span {
	font-weight: normal;
	color: #ccc;
	}
header nav ul li em {
	color: #78787b;
	white-space: nowrap;
	}
header nav ul li:hover strong,
header nav ul li:hover em {
	color: #fff;
	}
header nav ul li:hover strong span {
	color: #ddd;
	color: rgba(255,255,255,.8);
	}
header nav ul li:active::before,
header nav ul li:active::after,
header nav ul li:active * {
		-webkit-transform: translateY(1px);
		-moz-transform: translateY(1px);
	transform: translateY(1px);
	}
header hgroup {
	position: relative;
	width: 940px;
	padding: 16px 10px 17px;
	margin: 0 auto;
	}

/* @end */

/* @group portfolio */

figure {
	position: absolute;
	top: 54px;
	background: #edeef3 url(assets/images/loading-dark.gif) 50% 50% no-repeat;
	background:
		url(assets/images/loading-dark.gif) 50% 50% no-repeat,
		#edeef3 url(assets/images/bg-blue.jpg) repeat;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	width: 100%;
	overflow: hidden;
	z-index: 20;
	}
figure > *,
figure .temp {
	display: none;
	}
figure.active > * {
	display: block;
	}
figure.loading::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	background: #222 url(assets/images/loading-light.gif) 50% 50% no-repeat;
	background-color: rgba(0,0,0,.75);
	width: 100%;
	height: 100%;
	z-index: 10;
	cursor: default;
	}
figure .close,
.modal .close {
	position: absolute;
	right: 20px;
	top: 20px;
	background-color: rgba(0,0,0,.1);
		background-image: -webkit-gradient(
			linear, right bottom, left top,
			color-stop(.5,rgba(255,255,255,0)),
			color-stop(.5,rgba(255,255,255,.1))
			);
		background-image: -webkit-linear-gradient(right bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,.1) 50%);
		background-image: -moz-linear-gradient(right bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,.1) 50%);
	background-image: linear-gradient(right bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,.1) 50%);
	border: 1px solid rgba(0,0,0,.3);
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
	border-radius: 100px;
	text-indent: -9999px;
	width: 28px;
	height: 28px;
	cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
	user-select: none;
	z-index: 5;
	}
figure .close::after,
.modal .close::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	background: url(assets/images/sprite.png)  -116px -64px;
	width: 11px;
	height: 11px;
	margin: -6px 0 0 -6px;
	}
figure > img {
	position: absolute;
	left: 50%;
	top: 0;
	border: none;
	padding: 0;
	margin-left: -1280px;
	z-index: -1;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
	user-select: none;
		-webkit-user-drag: none;
		-moz-user-drag: -moz-none;
	user-drag: none;
	}
figure article {
	width: 940px;
	padding: 75px 0;
	margin: 0 auto;
	}
figure figcaption {
	margin: 30px 0;
	}
figure figcaption p {
	font: normal 28px/32px 'ff-meta-serif-web-pro', 'georgia', serif;
	color: #fff;
	width: 380px;
	}
figure figcaption a {
	background-color: rgba(0,0,0,.1);
		background-image: -webkit-gradient(
			linear,left bottom,left top,
			color-stop(.5,rgba(255,255,255,0)),
			color-stop(.5,rgba(255,255,255,.1))
			);
		background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,.1) 50%);
		background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,.1) 50%);
	background-image: linear-gradient(bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,.1) 50%);
	border: 1px solid rgba(0,0,0,.3);
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
	border-radius: 100px;
		-webkit-box-shadow: 0 0 20px rgba(255,255,255,.05);
		-moz-box-shadow: 0 0 20px rgba(255,255,255,.05);
	box-shadow: 0 0 20px rgba(255,255,255,.05);
	font-size: 13px;
	color: #fff !important;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
	padding: 8px 15px 7px;
	margin: 22px 0;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
	user-select: none;
	float: left;
		-webkit-transition: -webkit-box-shadow .5s ease;
		-moz-transition: -moz-box-shadow .5s ease;
	transition: box-shadow .5s ease;
	}
figure figcaption a:hover,
figure .close:hover {
	background-color: rgba(0,0,0,.15);
	}
figure figcaption a:active,
figure .close:active,
.modal .close:active {
		-webkit-box-shadow: 0 -2px 0 rgba(255,255,255,.2);
		-moz-box-shadow: 0 -2px 0 rgba(255,255,255,.2);
	box-shadow: 0 -2px 0 rgba(255,255,255,.2);
		-webkit-transform: translateY(1px);
		-moz-transform: translateY(1px);
	transform: translateY(1px);
	}
figure figcaption a em {
	font-weight: normal;
	color: #ddd;
	color: rgba(255,255,255,.8);
	text-transform: lowercase;
	}
figure figcaption small {
	font: bold 13px/18px 'ff-meta-web-pro', 'helvetica', sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ddd;
	margin: 29px 0;
	}
figure .inverse figcaption p,
figure .inverse figcaption a {
	color: #000 !important;
	}
figure .inverse figcaption a em,
figure .inverse figcaption small {
	color: #222 !important;
	color: rgba(0,0,0,.8) !important;
	}
figure ul {
	position: absolute;
	right: 0;
	top: 50%;
	list-style-type: none;
	width: 460px;
	margin-top: -160px;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
	user-select: none;
	}
figure li {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
		-webkit-perspective: 1000;
		-webkit-backface-visibility: hidden;
	}
figure li img {
	background: none;
	border: none;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	border-radius: 5px;
		-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.1);
		-moz-box-shadow: 0 2px 10px rgba(0,0,0,.1);
	box-shadow: 0 2px 10px rgba(0,0,0,.1);
	padding: 0;
		-webkit-user-drag: none;
		-moz-user-drag: -moz-none;
	user-drag: none;
		-webkit-transition: -webkit-transform .3s ease-out;
		-moz-transition: -moz-transform .3s ease-out;
	transition: transform .3s ease-out;
		-webkit-transform-origin: right bottom;
		-moz-transform-origin: right bottom;
	transform-origin: right bottom;
	}
figure li.slide-02 {
	right: -20px;
	top: 15px;
	cursor: pointer;
	z-index: 2;
	}
figure li.slide-02 img {
	height: 290px;
	}
figure li.slide-02:hover img {
		-webkit-transform: rotate(5deg) translate(50px, 15px);
		-moz-transform: rotate(5deg) translate(50px, 5px);
	transform: rotate(5deg) translate(50px, 5px);
	}
figure li.slide-03 {
	right: -40px;
	top: 30px;
	cursor: pointer;
	z-index: 1;
	}
figure li.slide-03 img {
	height: 260px;
	}
figure li.slide-03:hover img {
		-webkit-transform: rotate(5deg) translate(50px, 5px);
		-moz-transform: rotate(5deg) translate(50px, 5px);
	transform: rotate(5deg) translate(50px, 5px);
	}
figure li.slide-02:active,
figure li.slide-03:active {
		-webkit-transform: translateY(1px);
		-moz-transform: translateY(1px);
	transform: translateY(1px);
	}

/* @end */

/* @group search form */

#search {
	position: absolute;
	right: 0;
	top: 9px;
	padding: 15px 10px;
	}
#search label {
	color: #727171;
	padding: 8.5px 10px;
	float: left;
	}
#search [type="search"] {
		-webkit-border-radius: 3px 10px 10px 3px;
		-moz-border-radius: 3px 10px 10px 3px;
	border-radius: 3px 10px 10px 3px;
	width: 198px;
	height: 33px;
	padding: 0 10px;
	float: left;
		-webkit-transition: width .3s ease;
		-moz-transition: width .3s ease;
	transition: width .3s ease;
	}
#search [type="search"]:focus {
	width: 298px;
	}
#search button {
	position: absolute;
	right: 10px;
	top: 15px;
		-webkit-border-radius: 0 3px 3px 0;
		-moz-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
	font-size: 0;
	line-height: 33px;
	text-indent: -9999px;
	width: 40px;
	height: 33px;
	padding: 0;
	}
#search button::before {
	content: '';
	position: absolute;
	left: -31px;
	top: 0;
		background: -webkit-gradient(linear, right top, left top, from(#fff), to(rgba(255,255,255,0)));
		background: -webkit-linear-gradient(right, #fff, rgba(255,255,255,0));
		background: -moz-linear-gradient(right, #fff, rgba(255,255,255,0));
	background: linear-gradient(right, #fff, rgba(255,255,255,0));
	width: 30px;
	height: 33px;
	}
#search button::after {
	left: 50%;
	right: auto;
	display: block;
	background: url(assets/images/sprite.png) -166px -61px;
	margin: -8px 0 0 -8px;
	}
#search button:active::after {
	margin-top: -7px;
	}
#search.active button::after {
	background-position: -192px -61px;
	}
#search.active button {
	background-color: #ff4242;
	border-color: #cf0000;
	cursor: pointer;
	}

/* @end */

/* @group menu */

menu {
	position: absolute;
	right: 4px;
	top: -5px;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
	user-select: none;
	}
menu a {
	background-image: url(assets/images/sprite.png);
	text-indent: -9999px;
	width: 26px;
	height: 26px;
	float: left;
		-webkit-tap-highlight-color: transparent;
		-moz-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	}
menu a:hover {
	opacity: .8;
	}
menu a:active {
		-webkit-transform: translateY(1px);
		-moz-transform: translateY(1px);
	transform: translateY(1px);
	}
menu aside {
	display: none;
	position: absolute;
	right: 100%;
	top: 50%;
	background-color: #333;
	background-color: rgba(0,0,0,.8);
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(255,255,255,0)));
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,0));
		background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,0));
	background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,0));
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	border-radius: 3px;
		-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.1);
		-moz-box-shadow: 0 1px 5px rgba(0,0,0,.1);
	box-shadow: 0 1px 5px rgba(0,0,0,.1);
	font-size: 10px;
	color: #fff;
	letter-spacing: 1px;
	text-shadow: -1px -1px 0 #333;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 4px 8px 1px;
	margin: -11.5px 10px 0 0;
	z-index: 10;
	cursor: default;
	}
menu aside::after {
	content: '';
	position: absolute;
	right: -6px;
	top: 50%;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid #3d3d3d;
	width: 0;
	height: 0;
	margin-top: -6px;
	}
menu aside em {
	color: #ddd;
	color: rgba(255,255,255,.8);
	text-transform: lowercase;
	}

/* @end */

/* @group content */

#content section,
#content article {
	float: left;
	}
h3 {
	margin: 31px 10px 10px;
	}
h4 {
	padding: 18px 0 0;
	}
a:hover h4 {
	color: #555;
	}
time, cite {
	font-style: normal;
	color: #ccc;
	}
p {
	margin: 8px 0 10px;
	}
article {
	position: relative;
	background: url(assets/images/loading-light.gif) -9999px -9999px no-repeat;
	width: 220px;
	min-height: 290px;
	margin: 10px;
	}
article.focused {
	background: #fafafa;
	background: rgba(0,0,0,.02);
	border: 3px solid #1c8ef0;
		-webkit-border-radius: 7px 7px 5px 5px;
		-moz-border-radius: 7px 7px 5px 5px;
	border-radius: 7px 7px 5px 5px;
	padding: 7px;
	margin: 0;
	}
article.loading > a,
article.active > a {
	cursor: default;
	}
article.new > a::after {
	content: 'new';
	position: absolute;
	left: -2px;
	top: 10px;
	background-color: #1c8ef0;
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.25)), to(rgba(255,255,255,.05)));
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,.25), rgba(255,255,255,.05));
		background-image: -moz-linear-gradient(top, rgba(255,255,255,.25), rgba(255,255,255,.05));
	background-image: linear-gradient(top, rgba(255,255,255,.25), rgba(255,255,255,.05));
		-webkit-border-radius: 2px 5px 5px 2px;
		-moz-border-radius: 2px 5px 5px 2px;
	border-radius: 2px 5px 5px 2px;
		-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.05);
		-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.05);
	box-shadow: 1px 2px 3px rgba(0,0,0,.05);
	font: normal 10px/16px 'ff-meta-web-pro', 'helvetica', sans-serif;
	color: #fff;
	text-shadow: -1px -1px 0 rgba(0,0,0,.05);
	text-transform: uppercase;
	padding: 4px 8px 0;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
	user-select: none;
	z-index: 2;
	}
article.focused.new > a::after {
	left: 7px;
	top: 19px;
	}
article.loading > a:first-child::before {
	content: '';
	position: absolute;
	left: 5px;
	top: 5px;
	background: #222 url(assets/images/loading-light.gif) 50% 50% no-repeat;
	background-color: rgba(0,0,0,.75);
	width: 210px;
	height: 133px;
	z-index: 1;
	cursor: default;
	}
article.focused.loading > a::before {
	left: 12px;
	top: 12px;
	}
[role="articles"] article.loading > a::before {
	height: 95px;
	}
img, a img {
	/*background: #fafafa;*/
	/*background: rgba(0,0,0,.02);*/
	border: 1px solid #e5e5e5;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 4px;
		-webkit-transition: -webkit-box-shadow .2s ease;
		-moz-transition: -moz-box-shadow .2s ease;
	transition: box-shadow .2s ease;
	}
[role="services"] img,
[role="work"] img, 
[role="articles"] img {
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
	user-select: none;
		-webkit-user-drag: none;
		-moz-user-drag: -moz-none;
	user-drag: none;
	}
a:hover img {
	/*border-color: #1c8ef0;*/
		/*-webkit-box-shadow: 0 0 5px #51cbee;*/
		/*-moz-box-shadow: 0 0 5px #51cbee;*/
	/*box-shadow: 0 0 5px #51cbee;*/
	}
a:active img,
article.active img {
	background-color: #1c8ef0 !important;
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,.2)));
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
	border-color: #126cba;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
	box-shadow: none;
	}
article.focused img {
	background-color: #fff;
	}
[role="work"],
[role="articles"] {
	width: 720px;
	}
[role="articles"] article > a:last-child:active {
		-webkit-transform: translateY(1px);
		-moz-transform: translateY(1px);
	transform: translateY(1px);
	}

/* @end */

/* @group copy */

#copy {
	font: normal 17px/30px 'ff-meta-serif-web-pro', 'georgia', serif;
	color: #444;
	width: 640px;
	}
#copy h1 {
	margin: 30px 0 20px;
	}
#copy h2 {
	font: normal 28px/32px 'ff-meta-serif-web-pro', 'georgia', serif;
	color: #222;
	letter-spacing: 0;
	text-transform: none;
	margin: 30px 0 20px;
	}
#copy h3 {
	font: bold 13px/18px 'ff-meta-web-pro', 'helvetica', sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #222;
	margin: 30px 0 20px;
	}
#copy h3 em {
	font-weight: normal;
	color: #333;
	text-transform: lowercase;
	}
#copy h1 + p {
	font: normal 20px/36px 'ff-meta-serif-web-pro', 'georgia', serif;
	color: #222;
	margin-bottom: 20px;
	}
#copy p {
	margin: 15px 0;
	}
#copy p + p {
	text-indent: 1.5em;
	}
#copy ul,
#copy ol {
	padding-left: 1.5em;
	margin: 15px 0 15px 20px;
	}
#copy li {
	list-style-type: disc;
	margin: 4px 0;
	}
#copy ol li {
	list-style-type: decimal;
	}
#copy img {
	margin: 25px auto;
	}
blockquote {
	color: #999;
	padding: 0 32px;
	}
code,
pre {
	font: normal 13px/18px 'monaco', 'courier new', 'courier', monospace;
	color: #ea277c;
	}
pre {
	position: relative;
	overflow-x: hidden;
	margin: 15px 30px;
	}
pre::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
		background: -webkit-gradient(linear, right top, left top, from(#fff), to(rgba(255,255,255,0)));
		background: -webkit-linear-gradient(right, #fff, rgba(255,255,255,0));
		background: -moz-linear-gradient(right, #fff, rgba(255,255,255,0));
	background: linear-gradient(right, #fff, rgba(255,255,255,0));
	width: 50px;
	}
del {
	font-family: georgia, serif;
	color: #999;
	text-decoration: line-through;
	}
ins {
	font-style: italic;
	color: #000;
	text-decoration: none;
	}
#copy > p:last-child {
	background: #fafafa;
	background: rgba(0,0,0,.02);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	border-radius: 5px;
	border: 5px solid #f6f6f6;
	border-color: rgba(0,0,0,.02);
	text-align: center;
	text-indent: 0;
	padding: 12px 20px;
	margin: 23px 0;
	}
#content > aside {
	font: normal 20px/36px 'ff-meta-serif-web-pro', 'georgia', serif;
	width: 220px;
	margin: 92px 10px;
	float: right;
	}
aside time {
	color: #222;
	}
#content > aside nav em {
	font-style: normal;
	color: #838383;
	}

/* @end */

/* @group forms */

form {
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
	user-select: none;
	}
[type="text"],
[type="email"],
[type="url"],
[type="search"],
textarea {
	display: block;
	position: relative;
	background: #fff;
	border: 1px solid #aaa;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 12px;
	line-height: 16px;
	color: #23242d;
	height: 17px;
	padding: 8px 12px;
		-webkit-transition: -webkit-box-shadow .15s ease;
		-moz-transition: -moz-box-shadow .15s ease;
	transition: box-shadow .15s ease;
		-webkit-transition: .2s -webkit-box-shadow ease;
		-moz-transition: .2s -moz-box-shadow ease;
	transition: .2s box-shadow ease;
	cursor: pointer;
	}
[type="text"]:hover,
[type="email"]:hover,
[type="url"]:hover,
[type="search"]:hover,
textarea:hover {
	border-color: #7fa1be;
		-webkit-box-shadow: 0 0 5px rgba(81,203,238,.2);
		-moz-box-shadow: 0 0 5px rgba(81,203,238,.2);
	box-shadow: 0 0 5px rgba(81,203,238,.2);
	}
[type="text"]:focus,
[type="email"]:focus,
[type="url"]:focus,
[type="search"]:focus,
textarea:focus {
	border-color: #1c8ef0;
		-webkit-box-shadow: 0 0 15px rgba(81,203,238,.3);
		-moz-box-shadow: 0 0 15px rgba(81,203,238,.3);
	box-shadow: 0 0 15px rgba(81,203,238,.3);
	cursor: text;
	}
form .mask {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	top: 0;
	background: rgba(255,255,255,.4);
	z-index: 3;
	}
form button::after {
	content: '';
	display: none;
	position: absolute;
	right: -36px;
	top: 50%;
	background: url(assets/images/loading-dark.gif);
	width: 16px;
	height: 16px;
	margin-top: -8px;
	}
form.loading button::after {
	display: block;
	}
form p {
	position: absolute;
	left: 0;
	bottom: 53px;
	background-color: #18cd3a;
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,.05)));
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,.05));
		background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,.05));
	background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,.05));
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	border-radius: 3px;
		-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.1);
		-moz-box-shadow: 0 1px 5px rgba(0,0,0,.1);
	box-shadow: 0 1px 5px rgba(0,0,0,.1);
	font-size: 12px;
	line-height: 18px;
	white-space: nowrap;
	color: #fff;
	padding: 2px 8px;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	}
form p::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -5px;
	border-top: 6px solid  #18cd3a;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	width: 0;
	height: 0;
	margin-left: -5px;
	opacity: .8;
	}
form p.error {
	background-color: #fd360f;
	}
form p.error::after {
    border-top-color: #fd360f;
	}
#subscribe label {
	margin: 20px 0 6px;
	}
#subscribe input {
	width: 504px;
	}
#subscribe button {
	margin: 30px 0;
	}
#subscribe p {
	bottom: 63px;
	}
#application {
	position: relative;
	background: #f8f7f7 url(assets/images/bg-light.jpg);
	border: 1px solid #ddd;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	border-radius: 5px;
	width: 638px;
	padding: 30px;
	margin: 10px 10px 30px;
	float: left;
	}
#application hgroup::after {
	content: '';
	position: absolute;
	right: 30px;
	top: -3px;
	background: url(assets/images/sprite.png) -10px -88px;
		-webkit-border-radius: 3px 3px 0 0;
		-moz-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
	width: 68px;
	height: 64px;
	z-index: 5
	}
#application h3 {
	font: 52px/70px 'ff-meta-serif-web-pro', 'georgia', serif;
	text-transform: none;
	margin: -9px 0 1px;
	}
#application h4 {
	font-size: 22px;
	line-height: 26px;
	padding: 0;
	}
#application fieldset {
	padding: 10px 0 6px;
	}
#application fieldset.options {
	padding-bottom: 3px;
	}
#application label {
	margin: 20px 0 6px;
	clear: both;
	}
#application [type="text"],
#application [type="email"],
#application [type="url"],
#application textarea {
	width: 612px;
	}
#application [type="checkbox"],
#application [type="radio"] {
	background: url(assets/images/sprite.png) -10px -36px;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
	border-radius: 0;
	width: 16px;
	height: 16px;
	margin: 7px 0;
	cursor: pointer;
	float: left;
	clear: both;
	}
#application [type="checkbox"]:active,
#application [type="radio"]:active {
	background-position: -36px -36px;
	}
#application .checked {
	background-position: -62px -36px;
	}
#application .checked:active {
	background-position: -88px -36px;
	}
#application [type="checkbox"] + label,
#application [type="radio"] + label {
	font-weight: normal;
	letter-spacing: 0;
	text-transform: none;
	margin: 0;
	padding: 6px 0 6px 10px;
	float: left;
	clear: none;
	cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		-moz-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	}
#application label + label {
	padding-top: 17px;
	}
#application fieldset + label {
	margin-top: 25px;
	}
#application textarea {
	font: 14px/18px 'ff-meta-web-pro', 'helvetica', sans-serif;
	min-height: 130px;
	height: 130px;
	resize: vertical;
	}
#application > [type="checkbox"] {
	margin-top: 19px;
	}
#application > [type="checkbox"] + label {
	margin-top: 12px;
	}
#application button {
	margin-top: 22px;
	float: left;
	clear: both;
	}

/* @end */

/* @group sidebar */

#sidebar {
	position: relative;
	width: 220px;
	margin: 0 10px 20px;
	}
#sidebar::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	background: #fff;
	width: 1px;
	height: 100%;
	}
#sidebar h5 {
	margin-top: 3px;
	}
#sidebar h6 {
	margin: 28px 0 8px;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
	user-select: none;
	}
#sidebar p a {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	padding-right: 11px;
	}
#tag-toggle {
	position: absolute;
	right: -6px;
	top: -37px;
	background: url(assets/images/sprite.png) -52px -52px;
	text-indent: -9999px;
	width: 16px;
	height: 16px;
	padding: 10px;
	opacity: .2;
	}
#tag-toggle:hover {
	opacity: .3;
	}
#tag-toggle.active {
	opacity: .8 !important;
	}
#tag-toggle.cancel:hover {
	background-position: -78px -52px;
	opacity: 1 !important;
	}
#tags {
	display: none;
	position: absolute;
	right: -2px;
	background-color: #333;
	background-color: rgba(0,0,0,.8);
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(255,255,255,0)));
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,0));
		background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,0));
	background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,0));
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	border-radius: 3px;
		-webkit-box-shadow: 0 3px 5px rgba(0,0,0,.3);
		-moz-box-shadow: 0 3px 5px rgba(0,0,0,.3);
	box-shadow: 0 3px 5px rgba(0,0,0,.3);
	padding: 7px 0;
	z-index: 10;
		-webkit-user-select: none;
		-moz-user-select: -moz-none; 
	user-select: none;
	}
#tag-toggle.active + #tags {
	display: block;
	}
#tags::after {
	content: '';
	position: absolute;
	right: 9px;
	top: -6px;
	border-bottom: 6px solid #474747;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	width: 0;
	height: 0;
	}
#tags li {
	color: #fff;
	white-space: nowrap;
	text-shadow: 1px 1px 0 #000;
	list-style-type: none;
	padding: 2px 13px;
		-webkit-tap-highlight-color: transparent;
		-moz-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	}
#tags li:hover {
	background-color: rgba(0,0,0,.2);
	cursor: pointer;
	}
#tags li.current {
	background-color: #1c8ef0;
	border: 1px solid #000;
	border-left: none;
	border-right: none;
	margin: -1px 0;
	}
#sidebar ul {
	position: relative;
	margin: 10px 0;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
	user-select: none;
	}
#sidebar ul li {
	list-style-type: none;
	}
#filters {
	margin-top: -3px !important;
	}
#filters li,
#links a {
	display: block;
	position: relative;
	color: #222;
	padding: 8px 10px 8px 26px;
	cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		-moz-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	}
#filters li.current {
	background: #f8f7f7;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	border-radius: 5px;
	color: #222;
	padding-left: 36px;
	margin-left: -10px;
	}
#filters li.current::before {
	left: 5px;
	}
#filters li.current::after {
	content: '';
	position: absolute;
	left: -32px;
	top: 50%;
	background: url(assets/images/sprite.png) -105px -53px;
	width: 16px;
	height: 16px;
	padding: 9px;
	margin-top: -17px;
	}
#filters li.current:active::after {
	background-position: -131px -53px;
		-webkit-transform: translateY(1px);
		-moz-transform: translateY(1px);
	transform: translateY(1px);
	}
#filters li::before,
#links li a::before {
	content: '';
	position: absolute;
	left: -5px;
	top: 50%;
	background-image: url(assets/images/sprite.png);
	width: 26px;
	height: 26px;
	margin-top: -13px;
	}
#filters li.design::before {
	background-position: -5px -5px;
	}
#filters li.code::before {
	background-position: -57px -5px;
	}
#filters li.business::before {
	background-position: -31px -5px;
	}
#filters li.marketing::before {
	background-position: -83px -5px;
	}
#filters li span {
	display: none;
	color: #727171;
	float: right;
	}
#filters li.current span {
	display: block;
	}
#links a:hover {
	color: #1c8ef0;
	}
#links a:active {
	color: #126cba;
	}

/* @end */

/* @group modals */

#overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,.5);
	width: 100%;
	height: 100%;
	z-index: 50;
	}
.modal {
	position: fixed;
	left: 50%;
	top: -800px;
	background: #1e1f23 url(assets/images/bg-dark.jpg) center top repeat;
		-webkit-border-radius: 0 0 5px 5px;
		-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
		-webkit-box-shadow: 0 10px 30px rgba(0,0,0,.5);
		-moz-box-shadow: 0 10px 30px rgba(0,0,0,.5);
	box-shadow: 0 10px 30px rgba(0,0,0,.5);
	width: 580px;
	margin-left: -290px;
	opacity: 0;
	z-index: 100;
	}
.modal .close,
.modal .close:active {
	top: 25px;
	background-color: rgba(255,255,255,.1);
	border-color: rgba(255,255,255,.2);
	}
.modal .close:active {
		-webkit-box-shadow: 0 -2px 0 #000;
		-moz-box-shadow: 0 -2px 0 #000;
	box-shadow: 0 -2px 0 #000;
	}
.modal .close::after {
	background-position: -194px -64px;
	}
.modal .loading {
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: #333;
	background-color: rgba(0,0,0,.8);
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(255,255,255,0)));
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,0));
		background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,0));
	background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,0));
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 10px;
	color: #fff;
	letter-spacing: 1px;
	text-shadow: -1px -1px 0 #333;
	text-transform: uppercase;
	width: 100px;
	padding: 6px 10px 3px 36px;
	margin: 28px 0 0 -73px;
	z-index: 2;
	}
.modal .loading::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 50%;
	background: url(assets/images/loading-light.gif);
	width: 16px;
	height: 16px;
	margin-top: -8px;
	}
.modal .badge {
	position: absolute;
	left: 20px;
	top: 20px;
	color: #c9c9ca;
	padding: 2px 0 2px 50px;
		-webkit-animation: 'slide-up' 1.5s 1 cubic-bezier(0,0,.2,1);
	}
.modal a.badge:active {
		-webkit-transform: translateY(1px);
		-moz-transform: translateY(1px);
	transform: translateY(1px);
	}
.modal .badge * {
	display: block;
	font-style: normal;
	}
.modal .badge strong {
	color: #fff;
	}
.modal ul,
.modal fieldset {
	background: #f8f7f7 url(assets/images/bg-light.jpg) center top;
		background:
			-webkit-radial-gradient(circle, #fff, rgba(255,255,255,0)),
			#f8f7f7 url(assets/images/bg-light.jpg) center top;
		background:
			-moz-radial-gradient(circle, #fff, rgba(255,255,255,0)),
			#f8f7f7 url(assets/images/bg-light.jpg) center top;
	background:
		radial-gradient(circle, #fff, rgba(255,255,255,0)),
		#f8f7f7 url(assets/images/bg-light.jpg) center top;
		-webkit-border-radius: 0 0 5px 5px;
		-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	list-style: none;
	width: 100%;
	min-height: 200px;
	margin-top: 80px;
	float: left;
	overflow: hidden;
	}
.modal fieldset {
	width: auto;
	padding: 0 25px;
	overflow: visible;
	}
.modal ul li {
		-webkit-animation: 'slide-in' .5s 1 cubic-bezier(0,0,.2,1);
	}
.modal p {
	margin: 0;
	}
#twitter li {
	border-bottom: 1px solid #e1e1e1;
	padding: 16px 19px;
	}
#twitter li:hover {
	background: #fff;
	cursor: pointer;
	}
#twitter li:last-child {
	border: none;
	}
#twitter li p {
	font: normal 18px/23px 'ff-meta-serif-web-pro', 'georgia', serif;
	color: #222;
	}
#twitter .hashtag {
	color: #838383;
	}
#twitter .hashtag:hover {
	color: #666;
	}
#twitter li > a {
	color: #838383;
	}
#twitter li > a em {
	font-style: normal;
	color: #1c8ef0;
	padding-left: 10px;
	visibility: hidden;
	}
#twitter li:hover > a em {
	visibility: visible;
	}
#twitter li > a:hover em {
	color: #55a9f1;
	}
#twitter li > a:active em {
	color: #126cba;
	}
#dribbble li {
	position: relative;
	border: none;
	margin-bottom: -5px;
	float: left;
	}
#dribbble li a {
	display: block;
	width: 108px;
	height: 77px;
	padding: 25px 16px 0 140px;
	}
#dribbble li:first-child a {
	border-right: 1px solid #e1e1e1;
	text-align: center;
	width: 268px;
	height: 398px;
	padding: 25px 25px 0 20px;
	}
#dribbble li a:active img {
		-webkit-transform: translateY(1px);
		-moz-transform: translateY(1px);
	transform: translateY(1px);
	}
#dribbble li img {
	position: absolute;
	left: 25px;
	top: 25px;
	background-color: #fff;
	width: 90px;
	height: 67px;
	padding: 4px;
		-webkit-user-select: none;
		-moz-user-select: -moz-none;
	user-select: none;
		-webkit-user-drag: none;
		-moz-user-drag: -moz-none;
	user-drag: none;
	}
#dribbble li:first-child img {
	position: static;
	width: 258px;
	height: 193px;
	}
#dribbble li h2 {
	font: normal 14px/18px 'ff-meta-serif-web-pro', 'georgia', serif;
	color: #222;
	letter-spacing: 0;
	text-transform: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 10px;
	overflow: hidden;
	}
#dribbble li:first-child h2 {
	font-size: 22px;
	line-height: 28px;
	margin: 15px 0 6px;
	}
#dribbble li time {
	display: block;
	color: #78787b;
	}
#dribbble li cite {
	display: inline-block;
	color: #1c8ef0;
	}
#dribbble li a:hover cite {
	color: #55a9f1;
	}
#dribbble li a:active cite {
	color: #126cba;
	}

/* @end */

/* @group footer */

footer article {
	width: 220px;
	min-height: 0;
	margin: 31px 10px 22px;
	float: left;
	}
footer [role="about"] {
	width: 460px;
	}
footer article h3 {
	margin: 0 0 17px;
	}
footer [role="about"] p {
	margin: 0 0 18px;
	}
footer small {
	font-size: 13px;
	}
footer small a {
	display: inline-block;
	padding: 0 7.5px;
	}
footer small a:first-child {
	color: #78787b;
	padding-left: 0;
	}
[role="projects"] a,
[role="social"] a {
	display: block;
	position: relative;
	padding-left: 50px;
	margin: 0 0 18px;
	}
[role="projects"] a:active,
[role="social"] a:active {
		-webkit-transform: translateY(1px);
		-moz-transform: translateY(1px);
	transform: translateY(1px);
	}
footer article > a * {
	display: block;
	font-style: normal;
	color: #78787b;
	}
footer article > a strong {
	font-weight: normal;
	color: #222;
	}
footer article > a:hover * {
	color: #1c8ef0;
	}
footer article > a:active i::after {
	background: rgba(0,0,0,.3);
		-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
		-moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
	box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
	}

/* @end */

/* @group icons */

menu a[href*="twitter"],
#links a[href*="twitter"]::before {
	background-position: -109px -5px;
	}
menu a[href*="dribbble"],
#links a[href*="dribbble"]::before {
	background-position: -135px -5px;
	}
menu a[href*="subscribe"],
#links a[href*="subscribe"]::before {
	background-position: -109px -31px;
	}
#links a[href*="mailto"]::before {
	background-position: -135px -31px;
	}
i {
	position: absolute;
	left: 0;
	top: 50%;
	background-image: url(assets/images/sprite.png);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
	border-radius: 5px;
	text-indent: -9999px;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	}
i::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid rgba(0,0,0,.4);
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
	border-radius: 4px;
	width: 38px;
	height: 38px;
	}
i.gridlet {
	background-position: -245px -89px;
	}
i.pressroyale {
	background-position: -349px -89px;
	}
i.framework51 {
	background-position: -297px -89px;
	}
i.twitter {
	background-position: -141px -89px;
	}
i.dribbble {
	background-position: -89px -89px;
	}
i.subscribe {
	background-position: -193px -89px;
	}

/* @end */

/* @group error page */

#error {
	background: #bb2469 url(assets/images/cogs.jpg) center top no-repeat;
	}
#error > * {
	font-family: 'ff-meta-serif-web-pro', 'georgia', serif;
	color: #fff;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	text-shadow: -1px -1px 0 #a11456;
	max-width: 600px;
	padding: 0 20px;
	margin: 10px auto;
	}
#error h1 {
	font-size: 40px;
	line-height: 48px;
	margin-top: 60px;
	}
#error h2 {
	font-size: 24px;
	line-height: 30px;
	}
#error p {
	font-size: 18px;
	line-height: 22px;
	}
#error a {
	color: #ddd;
	border-bottom: 1px dotted rgba(255,255,255,.2);
	}
#error a:hover {
	color: #fff;
	}

/* @end */

/* @group overrides */

.home header hgroup {
	text-align: center;
	}
.home header h1 {
	font-size: 34px;
	margin: 21px 0 13px;
	}
.home header h2 {
	font: normal 22px/28px 'ff-meta-serif-web-pro', 'georgia', serif;
	letter-spacing: 0;
	text-transform: none;
	margin: 0 30px 20px;
	}
.home header h2 a {
	white-space: nowrap;
	}
.home #content section + section {
	width: 480px;
	}
.home #content section + section h3 {
	margin-top: 20px;
	}
.home [role="articles"] article.loading > a::before {
	height: 95px;
	}

/* @end */

/* @group responsiveness */

@media screen and (max-width: 979px) {
	#sidebar,
	footer [role="social"],
	#content > aside time,
	[role="services"] article:first-child,
	.home [role="articles"] article:last-child {
		display: none;
		}
	#content,
	footer {
		width: 720px;
		}
	header nav {
		width: 730px;
		}
	header hgroup,
	figure article,
	#copy {
		width: 700px;
		}
	figure figcaption p {
		font-size: 22px;
		line-height: 28px;
		width: 220px;
		}
	[role="work"],
	[role="articles"] {
		width: 100%;
		}
	#copy img {
		width: 100% !important;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
		box-sizing: border-box;
		}
	#copy > p:last-child {
		margin-bottom: 10px;
		}
	#content > aside {
		font: normal 17px/30px 'ff-meta-serif-web-pro', 'georgia', serif;
		text-align: center;
		width: 100%;
		margin: 0;
		float: left;
		}
	.home #content [role="articles"] {
		width: 240px;
		}
	}
@media screen and (max-width: 739px) {
	figure figcaption,
	figure li,
	#search label,
	#application hgroup::after,
	[role="services"] article:nth-child(2),
	footer [role="projects"] {
		display: none;
		}
	header nav,
	#content,
	footer {
		width: 480px;
		}
	header hgroup,
	#copy {
		width: 460px;
		}
	#search,
	#search [type="search"],
	#application [type="text"],
	#application [type="email"],
	#application [type="url"],
	#application textarea {
		width: 100% !important;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
		box-sizing: border-box;
		}
	#search [type="search"] {
		width: 100% !important;
		height: 35px;
			-webkit-transition: none;
			-moz-transition: none;
		transition: none;
		}
	header nav > a {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
		box-sizing: border-box;
		height: 100%;
		padding-left: 10px;
		padding-right: 10px;
		margin: 0 !important;
		}
	header nav a.active,
	header nav a.current,
	header nav a.open {
		margin: 0 -1px !important;
		}
	header nav > a:first-child {
		min-width: 48px;
		}
	header nav a.drop-down {
		padding-right: 21px;
		float: left;
		}
	header nav a.drop-down.open {
		padding-right: 22px;
		}
	header nav a.drop-down > strong,
	header nav a.drop-down > em {
		display: none;
		}
	header nav ul {
		right: auto;
		left: -9px;
		}
	header nav ul li:first-child::before,
	header nav ul li:first-child::after {
		right: auto;
		left: 14px;
		}
	figure li.slide-01 {
		display: block !important;
		}
	#search + h1,
	#search + h1 + h2 {
		text-indent: -9999px;
		}
	#application {
		width: 398px;
		}
	#application h3 {
		font-size: 32px;
		line-height: 38px;
		margin-bottom: 15px;
		}
	#application h4 {
		font-size: 18px;
		}
	#application [type="text"],
	#application [type="email"],
	#application [type="url"] {
		height: 32px;
		}
	.home header h1 {
		font-size: 28px;
		padding: 0;
		}
	.home header h1 em {
		font-size: 36px;
		line-height: 32px;
		}
	.home header h2 {
		font-size: 18px;
		line-height: 24px;
		margin: 0 0 20px;
		}
	.home #content [role="work"],
	.home #content [role="articles"] {
		width: 100%;
		}
	.home [role="articles"] article:last-child {
		display: block;
		}
	}
@media screen and (max-width: 579px) {
	.modal,
	.modal fieldset,
	#subscribe input,
	#subscribe button {
		width: 100% !important;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
		box-sizing: border-box;
		}
	.modal {
		position: absolute;
		left: 0;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
		border-radius: 0;
		margin: 0;
		}
	.modal ul,
	.modal fieldset {
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
		border-radius: 0;
		}
	#subscribe input {
		height: 32px;
		}
	#subscribe button {
		margin: 30px 0 39px;
		}
	#subscribe p {
		bottom: 72px;
		}
	#subscribe button::after {
		top: auto;
		right: auto;
		left: 50%;
		bottom: -28px;
		margin-left: -8px;
		}
	#dribbble ul {
		padding-bottom: 30px;
		}
	#dribbble li {
		float: none;
		}
	#dribbble li a {
		width: auto;
		}
	#dribbble li h2 {
		overflow: visible;
		}
	#dribbble li:first-child a {
		border: none;
		text-align: left;
		width: auto;
		height: 77px;
		padding: 25px 16px 0 140px;
		}
	#dribbble li:first-child img {
		position: absolute;
		width: 90px;
		height: 67px;
		}
	#dribbble li:first-child h2 {
		font: normal 14px/18px 'ff-meta-serif-web-pro', 'georgia', serif;
		margin: 10px 0 0;
		}
	}
@media screen and (max-width: 499px) {
	header nav a > em,
	menu,
	a.cta,
	article > a:last-child,
	article.new > a::after,
	article time,
	article cite,
	#content h3,
	footer article,
	footer article > * {
		display: none !important;
		}
	header nav,
	header hgroup,
	#content,
	article,
	figure article,
	figure ul,
	figure li img,
	#copy,
	#application,
	#application button,
	footer,
	footer [role="about"],
	footer small {
		width: 100%;
		}
	header nav,
	header nav > a,
	header hgroup,
	article,
	figure li,
	#copy,
	#application,
	#application button,
	footer,
	footer [role="about"],
	footer small {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
		box-sizing: border-box;
		}
	body > header {
		background-position:
			center 39px,
			center top;
		}
	header nav {
		height: 39px;
		padding: 0 10px;
		}
	header nav > a:first-child {
		background-position: -365px 1px;
		min-width: 34px;
		}
	header nav a.current {
		background: #1c8ef0;
			background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(0,0,0,0)));
			background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
			background-image: -moz-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
		background-image: linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,0));
		border-bottom: 1px solid #000;
			-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.3);
			-moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.3);
		box-shadow: inset 0 3px 7px rgba(0,0,0,.3);
		text-shadow: 0 1px 0 rgba(0,0,0,.2);
		}
	header nav ul {
		top: 43px;
		}
	header hgroup {
		text-align: left !important;
		padding: 18px 20px 19px !important;
		}
	header h1 {
		font: bold 13px/18px 'ff-meta-web-pro', 'helvetica', sans-serif !important;
		letter-spacing: 1px;
		text-transform: uppercase;
		}
	header h2,
	#application h4 {
		font: normal 13px/18px 'ff-meta-web-pro', 'helvetica', sans-serif !important;
		text-transform: none;
		letter-spacing: 0;
		color: #78787b;
		margin: 0 !important;
		}
	[role="work"],
	[role="articles"] {
		padding-top: 15px;
		}
	h3 {
		margin: 21px 20px 8px;
		}
	article {
		min-height: 0;
		padding: 10px 20px;
		margin: 0;
		}
	article.focused {
		background: none;
		border: none;
		padding: 10px 20px;
		}
	article > a {
			-webkit-tap-highlight-color: transparent;
			-moz-tap-highlight-color: transparent;
		tap-highlight-color: transparent;
		}
	article > a::before {
		content: '';
		position: absolute;
		left: 0 !important;
		top: 0 !important;
		bottom: 0  !important;
		width: 100% !important;
		height: auto !important;
		}
	article img {
		float: right;
		width: 100px;
		margin: 4px 0 10px 20px;
		}
	article h4 {
		padding: 0;
		}
	article p {
		margin-bottom: 0;
		}
	#copy,
	#copy h1 + p,
	#content > aside {
		font: 13px/18px 'ff-meta-web-pro', 'helvetica', sans-serif;
		color: #78787b;
		}
	#copy h1 {
		font: normal 16px/20px 'ff-meta-serif-web-pro', 'georgia', serif;
		margin: 15px 0 8px;
		}
	#copy h3 {
		display: block !important;
		margin-bottom: 10px;
		}
	#copy p {
		margin: 10px 0;
		}
	#copy h1 + p {
		color: #222;
		margin-top: 0;
		}
	#copy img {
		margin: 14px auto 13px;
		float: none;
		}
	code,
	pre {
		font: normal 11px/18px 'monaco', 'courier new', 'courier', monospace;
		}
	footer {
		padding: 0;
		}
	footer [role="about"] {
		display: block !important;
		margin: 10px 0;
		}
	footer small {
		display: block !important;
		text-align: center;
		}
	figure {
		top: 39px;
		max-height: 427px;
		}
	figure ul {
		position: static;
		margin: 0;
		}
	figure li {
		display: block;
		position: static !important;
		padding: 0 20px;
		}
	figure li img {
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
		border-radius: 3px;
		margin: 0;
		float: none;
			-webkit-transform: none !important;
			-moz-transform: none !important;
		transform: none !important;
		}
	figure li.slide-02,
	figure li.slide-03 {
		padding: 20px 10px;
		float: left;
		}
	figure li.slide-02 {
		padding-left: 20px;
		}
	figure li.slide-02 img,
	figure li.slide-03 img {
		width: 100px;
		height: auto;
		}
	#search {
		top: 4px;
		padding: 15px 20px;
			-webkit-tap-highlight-color: transparent;
			-moz-tap-highlight-color: transparent;
		tap-highlight-color: transparent;
		}
	#search::after {
		right: 62px;
		}
	#search button {
		right: 20px;
		}
	#application {
		background: none;
		border: none;
		padding: 20px;
		margin: 0;
		}
	form p,
	#application p {
		text-align: center;
		left: 20px;
		right: 20px;
		margin-left: 0 !important;
		}
	#application p {
		bottom: 43px;
		}
	#application button::after {
		top: auto;
		right: auto;
		left: 50%;
		bottom: -28px;
		margin-left: -8px;
		}
	.home header h1 {
		margin: 0 0 8px !important;
		}
	.home header h1 em {
		font-size: 22px;
		line-height: 18px;
		}
	.home #content h3,
	[role="services"] article {
		display: block !important;
		}
	}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.action::after,
	header nav > a:first-child,
	figure .close::after,
	.modal .close::after,
	#search button::after,
	menu a,
	#application hgroup::after,
	#application [type="checkbox"],
	#application [type="radio"],
	#tag-toggle,
	#filters li.current::after,
	#filters li::before,
	#links li a::before,
	i {
		background-image: url(assets/images/@2x-sprite.png);
			-webkit-background-size: 400px;
			-moz-background-size: 400px;
		background-size: 400px;
		}
	body > header {
			-webkit-background-size: 250px, 128px;
			-moz-background-size: 250px, 128px;
		background-size: 250px, 128px;
		}
	header nav a {
		background: url(assets/images/@2x-loading-light.gif) -999px -999px no-repeat;
		}
	header nav a.active::after,
	article,
	.modal .loading::before {
		background-image: url(assets/images/@2x-loading-light.gif);
			-webkit-background-size: 16px;
			-moz-background-size: 16px;
		background-size: 16px;
		}
	figure {
		background-image:
			url(assets/images/@2x-loading-dark.gif),
			url(assets/images/bg-blue.jpg);
					-webkit-background-size: 16px, 50px;
			-moz-background-size: 16px, 50px;
		background-size: 16p, 50px;
		}
	figure.loading::before,
	article.loading > a:first-child::before {
		background-image: url(assets/images/@2x-loading-light.gif);
			-webkit-background-size: 16px;
			-moz-background-size: 16px;
		background-size: 16px;
		}
	.modal {
			-webkit-background-size: 128px;
			-moz-background-size: 128px;
		background-size: 128px;
		}
	.modal ul,
	.modal fieldset {
			-webkit-background-size: 100%, 250px;
			-moz-background-size: 100%, 250px;
		background-size: 100%, 250px;
		}
	form button::after {
			-webkit-background-size: 16px;
			-moz-background-size: 16px;
		background-size: 16px;
		background: url(assets/images/@2x-loading-dark.gif);
	}

/* @end */