/* ==========================================================================

	TeMP Framework 1.2

	Title:	Design To Production
	Date:	August 2013
	Author:	Toast Creative (http://toastcreative.com.au)
	Build:	20082013-1

   ==========================================================================

	CORE
	 - CSS Reset (2.0) & Normalize.css (2.1.2)
	 - Pseudo-class CSS transitions
	 - WordPress core
	 - Flexslider

	HELPER CLASSES
	 - Clear floats
	 - Image replacement
	 - Hide
	 - Remove inline-block gaps
	 - Device targeting

	TYPOGRAPHY
	 - Web fonts
	 - Icon fonts
	 - Base styles

	MODULES
	 - Root
	 - Forms
	 - Tables

	LAYOUT
	 - Containers
	 - Header
	 - Navigation
	 - Main
	 - Sidebar
	 - Footer

	PAGES
	 - Home
	 - Profile
	 - Case studies
	 - Projects
	 - Clients

	MEDIA QUERIES

	IE FIXES

	PRINT

   ========================================================================== */


/*	CORE
   ==========================================================================
   ========================================================================== */


/*	- CSS Reset (2.0) & Normalize (2.1.2)
   ========================================================================== */


/*	Border box sizing
   -------------------------------------------------------------------------- */

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/*	Global reset
   -------------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, nav, output, ruby, section, summary,
time, mark, audio, video {
	border: 0;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}


/*	HTML5 display definitions
   -------------------------------------------------------------------------- */

article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
	display: block;
	-webkit-backface-visibility: hidden;
}

audio,
canvas,
video {
	display: inline-block;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}


/*	Base
   -------------------------------------------------------------------------- */

html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}


/*	Links
   -------------------------------------------------------------------------- */

a {
	background: transparent;
}

a:focus {
	outline: thin dotted;
}

a:active,
a:hover {
	outline: 0;
}


/*	Typography
   -------------------------------------------------------------------------- */

h1 {
	font-size: 2em;
	margin: .67em 0;
}

abbr[title] {
	border-bottom: 1px dotted;
	cursor: help;
	text-transform: none;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}

mark {
	background: #ff0;
	color: #000;
}

code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	font-size: 1em;
}

pre {
	white-space: pre-wrap;
}

q {
	quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -.5em;
}

sub {
	bottom: -.25em;
}


/*	Embedded content
   -------------------------------------------------------------------------- */

img {
	border: 0;
	-ms-interpolation-mode: bicubic;
	max-width: 100%;
	vertical-align: middle;
}

svg:not(:root) {
	overflow: hidden;
}


/*	Lists
   -------------------------------------------------------------------------- */

ol,
ul {
	list-style: none;
}


/*	Forms
   -------------------------------------------------------------------------- */

legend {
	border: 0;
	display: table;
	padding: 0;
	white-space: normal;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	margin: 0;
}

button,
input {
	line-height: normal;
}

button,
select {
	text-transform: none;
}

label[for],
input[type="checkbox"],
input[type="radio"],
select {
	cursor: pointer;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="search"] {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}


/*	Tables
   -------------------------------------------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}


/*	- Pseudo-class CSS transitions
   ========================================================================== */

a,
button,
input,
textarea,
.transition {
	-moz-transition:
		background-color .2s ease-out,
		background-image .2s ease-out,
		border-color .2s ease-out,
		box-shadow .2s ease-out,
		color .2s ease-out,
		font-size .2s ease-out,
		line-height .2s ease-out,
		opacity .2s ease-out,
		text-shadow .2s ease-out;
	-ms-transition:
		background-color .2s ease-out,
		background-image .2s ease-out,
		border-color .2s ease-out,
		box-shadow .2s ease-out,
		color .2s ease-out,
		font-size .2s ease-out,
		line-height .2s ease-out,
		opacity .2s ease-out,
		text-shadow .2s ease-out;
	-o-transition:
		background-color .2s ease-out,
		background-image .2s ease-out,
		border-color .2s ease-out,
		box-shadow .2s ease-out,
		color .2s ease-out,
		font-size .2s ease-out,
		line-height .2s ease-out,
		opacity .2s ease-out,
		text-shadow .2s ease-out;
	-webkit-transition:
		background-color .2s ease-out,
		background-image .2s ease-out,
		border-color .2s ease-out,
		box-shadow .2s ease-out,
		color .2s ease-out,
		font-size .2s ease-out,
		line-height .2s ease-out,
		opacity .2s ease-out,
		text-shadow .2s ease-out;
	transition:
		background-color .2s ease-out,
		background-image .2s ease-out,
		border-color .2s ease-out,
		box-shadow .2s ease-out,
		color .2s ease-out,
		font-size .2s ease-out,
		line-height .2s ease-out,
		opacity .2s ease-out,
		text-shadow .2s ease-out;
}


/*	- WordPress core
   ========================================================================== */

.alignnone {
	margin: 5px 20px 20px 0;
}

.aligncenter, div.aligncenter {
	display: block;
	margin: 5px auto;
}

.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

.aligncenter {
	display: block;
	margin: 5px auto;
}

a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

a img.alignnone {
	margin: 5px 20px 20px 0;
}

a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	background: #fff;
	border: 1px solid #f0f0f0;
	max-width: 96%;
	padding: 5px 3px 10px;
	text-align: center;
}

.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}

.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	max-width: 98.5%;
	padding: 0;
	width: auto;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	margin: 0;
	padding: 0 4px 5px;
}


/*	- Flexslider
   ========================================================================== */

.flexslider {

}

.flexslider .slides > li {
	display: none;
	position: relative;
	-webkit-backface-visibility: hidden;
}

.flexslider .slides > li:first-child {
	display: block;
}

.flexslider .slides img {
	height: auto;
	min-width: none;
	width: 100%;
}


/*	HELPER CLASSES
   ==========================================================================
   ========================================================================== */


/*	- Clear floats
   ========================================================================== */

.group:before,
.group:after {
	content: " ";
	display: table;
}

.group:after {
	clear: both;
}


/*	- Image replacement
   ========================================================================== */

.ir {
	display: inline-block;
	overflow: hidden;
	position: relative;
	vertical-align: top;
}

		.lt-ie9 .ir {
			text-align: left;
			text-indent: -9999px;
			white-space: nowrap;
		}

.ir:after {
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}


/*	- Hide
   ========================================================================== */

.hidden {
	display: none !important;
	visibility: hidden;
}

.invisible {
	visibility: hidden;
}




.visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}


/*	- No inline-block gaps
   ========================================================================== */

.no-gaps {
	font-size: 0;
}

.no-gaps > * {
	display: inline-block;
	font-size: 1rem;
	vertical-align: middle;
}

		.lt-ie9 .no-gaps > * {
			font-size: 14px;
		}


/*	- Device targeting
   ========================================================================== */

.show-on-phone,
.hide-on-tablet,
.hide-on-desktop {
	display: inherit !important;
}

.hide-on-phone,
.show-on-tablet,
.show-on-desktop {
	display: none !important;
}

		@media screen and (min-width: 37.5em) {
			.show-on-tablet,
			.hide-on-phone,
			.hide-on-desktop {
				display: inherit !important;
			}

			.hide-on-tablet,
			.show-on-phone,
			.show-on-desktop {
				display: none !important;
			}
		}

		@media screen and (min-width: 60em) {
			.show-on-desktop,
			.hide-on-phone,
			.hide-on-tablet {
				display: inherit !important;
			}

			.hide-on-desktop,
			.show-on-phone,
			.show-on-tablet {
				display: none !important;
			}
		}

		@media only screen and (orientation: landscape) {
			.show-for-landscape,
			.hide-for-portrait {
				display: inherit !important;
			}

			.hide-for-landscape,
			.show-for-portrait {
				display: none !important;
			}
		}

		@media only screen and (orientation: portrait) {
			.show-for-portrait,
			.hide-for-landscape {
				display: inherit !important;
			}

			.hide-for-portrait,
			.show-for-landscape {
				display: none !important;
			}
		}


/*	TYPOGRAPHY
   ==========================================================================
   ========================================================================== */


/*	- Web fonts
   ========================================================================== */

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300;
	src: url("../fonts/opensans-light-webfont.eot");
	src: url("../fonts/opensans-light-webfont.eot#iefix") format('embedded-opentype'),
		 url("../fonts/opensans-light-webfont.woff") format('woff'),
		 url("../fonts/opensans-light-webfont.ttf") format('truetype');
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/opensans-regular-webfont.eot");
	src: url("../fonts/opensans-regular-webfont.eot#iefix") format('embedded-opentype'),
		 url("../fonts/opensans-regular-webfont.woff") format('woff'),
		 url("../fonts/opensans-regular-webfont.ttf") format('truetype');
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 500;
	src: url("../fonts/opensans-semibold-webfont.eot");
	src: url("../fonts/opensans-semibold-webfont.eot#iefix") format('embedded-opentype'),
		 url("../fonts/opensans-semibold-webfont.woff") format('woff'),
		 url("../fonts/opensans-semibold-webfont.ttf") format('truetype');
}

@font-face {
	font-family: "Sansation";
	font-style: normal;
	font-weight: 300;
	src: url("../fonts/sansation-light-webfont.eot");
	src: url("../fonts/sansation-light-webfont.eot#iefix") format('embedded-opentype'),
		 url("../fonts/sansation-light-webfont.woff") format('woff'),
		 url("../fonts/sansation-light-webfont.ttf") format('truetype');
}

@font-face {
	font-family: "Sansation";
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/sansation-regular-webfont.eot");
	src: url("../fonts/sansation-regular-webfont.eot#iefix") format('embedded-opentype'),
		 url("../fonts/sansation-regular-webfont.woff") format('woff'),
		 url("../fonts/sansation-regular-webfont.ttf") format('truetype');
}

@font-face {
	font-family: "Sansation";
	font-style: italic;
	font-weight: normal;
	src: url("../fonts/sansation-italic-webfont.eot");
	src: url("../fonts/sansation-italic-webfont.eot#iefix") format('embedded-opentype'),
		 url("../fonts/sansation-italic-webfont.woff") format('woff'),
		 url("../fonts/sansation-italic-webfont.ttf") format('truetype');
}

@font-face {
	font-family: "Sansation";
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/sansation-bold-webfont.eot");
	src: url("../fonts/sansation-bold-webfont.eot#iefix") format('embedded-opentype'),
		 url("../fonts/sansation-bold-webfont.woff") format('woff'),
		 url("../fonts/sansation-bold-webfont.ttf") format('truetype');
}

@font-face {
	font-family: "DP Icons";
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/dp-icons.eot");
	src: url("../fonts/dp-icons.eot#iefix") format('embedded-opentype'),
		 url("../fonts/dp-icons.woff") format('woff'),
		 url("../fonts/dp-icons.ttf") format('truetype');
}


/*	- Icon fonts
   ========================================================================== */

[class*="icon-"] {
	font: normal normal 1em/1 "DP Icons";
	font-variant: normal;
	text-transform: none;
	speak: none;
}

[class*="icon-"] > * {
	speak: normal;
}

.icon-dp:before				{ content: "\e000"; }
.icon-mobile:before			{ content: "\e001"; }
.icon-envelope:before		{ content: "\e002"; }
.icon-location:before		{ content: "\e003"; }
.icon-menu:before			{ content: "\e004"; }
.icon-close:before			{ content: "\e005"; }
.icon-arrow-left:before		{ content: "\e006"; }
.icon-arrow-right:before	{ content: "\e007"; }


/*	- Base styles
   ========================================================================== */

html {
	color: #9d9d9d;
	font: .875em/1.429 "Open Sans", sans-serif;
}




h1, h2, h3, h4, h5, h6 {
	font-family: "Sansation", sans-serif;
}


.bkgd-black {
	background: #000;
}
.bkgd-dkgrey {
	/*background: #1f1f1f;*/
	background: #191919;
}
.preloader {
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #000;
	text-align: center;
}
.preloader4 {
   width:35px;
   height:35px;
   display:inline-block;
   padding:0px;
   border-radius:100%;
   border:2px solid;
   border-top-color:rgba(255,255,255, 0.65);
   border-bottom-color:rgba(255,255,255, 0.15);
   border-left-color:rgba(255,255,255, 0.65);
   border-right-color:rgba(255,255,255, 0.15);
   -webkit-animation: preloader4 0.8s linear infinite;
   animation: preloader4 0.8s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -17px;
    margin-top: -17px;
}
@keyframes preloader4 {
   from {transform: rotate(0deg);}
   to {transform: rotate(360deg);}
}
@-webkit-keyframes preloader4 {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(360deg);}
}


.columns {
	color: #c5c5c7;
	font-size: 18px;
	font-weight: 300;
}

		@media screen and (min-width: 37.5em) {
			.columns {
				-moz-column-count: 2;
				-webkit-column-count: 2;
				column-count: 2;
				-moz-column-gap: 20px;
				-webkit-column-gap: 20px;
				column-gap: 20px;
				-ms-column-count: 2;
				-o-column-count: 2;
				-ms-column-gap: 20px;
				-o-column-gap: 20px;
			}

			.first.column {
				padding-right: 10px;
			}

			.last.column {
				padding-left: 10px;
			}
		}

		@media screen and (min-width: 60em) {
			.columns {
				-moz-column-count: 2;
				-webkit-column-count: 2;
				column-count: 2;
				-moz-column-gap: 40px;
				-webkit-column-gap: 40px;
				column-gap: 40px;
				-ms-column-count: 2;
				-o-column-count: 2;
				-ms-column-gap: 40px;
				-o-column-gap: 40px;
			}

			.first.column {
				padding-right: 40px;
			}

			.last.column {
				padding-left: 40px;
			}
		}




a {
	color: #fff;
	text-decoration: none;
	/*-webkit-tap-highlight-color: rgba(191,31,31,.4);*/
}

a:hover {
	color: #bf1f1f;
}

a:focus {

}

a:active {

}

a:visited {

}


/*	Entry content
   -------------------------------------------------------------------------- */

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {

}

.entry-content h1 {
	font-size: 2em;
	margin: .67em 0;
}

.entry-content h2 {
	font-size: 1.5em;
	margin: .75em 0;
}

.entry-content h3 {
	font-size: 1.17em;
	margin: .83em 0;
}

.entry-content h5 {
	font-size: .83em;
	margin: 1.5em 0;
}

.entry-content h6 {
	font-size: .75em;
	margin: 1.67em 0;
}

.entry-content h4,
.entry-content p,
.entry-content blockquote,
.entry-content pre,
.entry-content address,
.entry-content dl,
.entry-content ol,
.entry-content ul,
.entry-content table {
	margin: 1.12em 0;
}

.entry-content p a {
	margin: -.5em;
	padding: .5em;
	position: relative;
}

.entry-content ol,
.entry-content ul {
	padding: 0 0 0 2em;
}

.entry-content ol li {
	list-style: decimal outside;
}

.entry-content ul li {
	list-style: disc outside;
}

.entry-content li ol,
.entry-content li ul {
	margin: 0;
}

.entry-content dd {
	margin: 0 0 0 2em;
}

.entry-content h1:first-child,
.entry-content h2:first-child,
.entry-content h3:first-child,
.entry-content h4:first-child,
.entry-content h5:first-child,
.entry-content h6:first-child,
.entry-content p:first-child,
.entry-content blockquote:first-child,
.entry-content pre:first-child,
.entry-content address:first-child,
.entry-content dl:first-child,
.entry-content ol:first-child,
.entry-content ul:first-child,
.entry-content table:first-child {
	margin-top: 0;
}

.entry-content h1:last-child,
.entry-content h2:last-child,
.entry-content h3:last-child,
.entry-content h4:last-child,
.entry-content h5:last-child,
.entry-content h6:last-child,
.entry-content p:last-child,
.entry-content blockquote:last-child,
.entry-content pre:last-child,
.entry-content address:last-child,
.entry-content dl:last-child,
.entry-content ol:last-child,
.entry-content ul:last-child,
.entry-content table:last-child {
	margin-bottom: 0;
}


/*	Selection pseudo-elements
   -------------------------------------------------------------------------- */
::selection{
 background:transparent;
}

nav::selection,
a.more-products::selection{
	background:transparent;
}

nav::-moz-selection{
	background:#1f1f1f;
}

h1::-moz-selection,
h2::-moz-selection,
h3::-moz-selection,
h4::-moz-selection,
h5::-moz-selection,
h6::-moz-selection,
a::-moz-selection,
ul::-moz-selection,
li::-moz-selection,
p::-moz-selection {
	background: #bf1f1f;
	color: #fff;
	text-shadow: none;
}

h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
a::selection,
ul::selection,
li::selection,
p::selection {
	background: #bf1f1f;
	color: #fff;
	text-shadow: none;
}


/*	MODULES
   ==========================================================================
   ========================================================================== */


/*	- Root
   ========================================================================== */

html,
body {
	background: #111;
	height: 100%;
}

body {
	overflow-y: scroll;
}


/*	- Forms
   ========================================================================== */

label {
	display: inline-block;
	vertical-align: top;
}


/*	Buttons
   -------------------------------------------------------------------------- */

.button {
	border: 0;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	vertical-align: top;
}




.button:hover {

}

.button:focus {

}

.button:active {

}




.button-wrap-left {
	text-align: left;
}

.button-wrap-center {
	text-align: center;
}

.button-wrap-right {
	text-align: right;
}


/*	Text inputs
   -------------------------------------------------------------------------- */

.textinput {
	color: inherit;
	-webkit-appearance: none;
}

.textinput:hover {

}

.textinput:focus {
	outline: 0;
}

textarea.textinput {
	height: auto;
	line-height: 1;
	resize: vertical;
}




::-webkit-input-placeholder {
	color: #999;
}

::-moz-placeholder {
	color: #999;
	opacity: 1;
}

:-ms-input-placeholder {
	color: #999;
}


/*	- Tables
   ========================================================================== */

table {

}

th,
td {

}


/*	LAYOUT
   ==========================================================================
   ========================================================================== */


/*	- Containers
   ========================================================================== */

.body-wrap-outer {
	height: 100%;
	position: relative;
}

.body-wrap-inner {
	background: #191919;
	min-height: 100%;
	position: relative;
	-moz-transition: .4s left ease;
	-ms-transition: .4s left ease;
	-o-transition: .4s left ease;
	-webkit-transition: .4s left ease;
	transition: .4s left ease;
	z-index: 20;
}

.offcanvasnav .body-wrap-outer {
	overflow: hidden;
}

.offcanvasnav .body-wrap-inner {
	left: 240px;
}
.offcanvasnav .project-slider,
.offcanvasnav .home-slider {
	left: 240px;
}

		@media screen and (min-width: 48em) {
			.offcanvasnav .project-slider,
			.offcanvasnav .home-slider,
			.offcanvasnav .body-wrap-inner {
				left: auto;
			}
		}




.container {
	border: solid transparent;
	border-width: 0 40px;
	margin: 0 auto;
	max-width: 1120px;
	position: relative;
}

		/*@media screen and (min-width: 37.5em) {
			.container {
				border-width: 0 60px;
			}
		}

		@media screen and (min-width: 60em) {
			.container {
				border-width: 0 80px;
			}
		}*/

		.lt-ie9 .container {
			max-width: 960px;
		}


/*	- Header
   ========================================================================== */

.header {
	background: #000;
}

		@media screen and (min-width: 48em) {
			.header {
				left: 0;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 100;
			}
		}

.nav-placeholder {
	background: #000;
	border: 0;
	position: relative;
	z-index: 10;
}

/* homepage */
@media screen and (min-width: 48em) {
	.home .header {
	    bottom: auto;
		top:0;
		position: absolute;
	}
	.home .header.sticked {
		position: fixed;
	}

}


/*	Logo
   -------------------------------------------------------------------------- */

.header .logo {
	left: 50%;
	margin-left: -18px;
	position: absolute;
	top: 0;
	z-index: 1;
	color: #bababa;
}

.header .logo:hover{
	color: #BF1F1F;
}

		@media screen and (min-width: 48em) {
			.header .logo {
				margin-left: -36px;
			}
		}

.header .logo:before {
	/*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background-image: -moz-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.5) 100%);
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.5) 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.5) 100%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,.5) 100%);
	background-image: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.5) 100%);*/
	content: "";
	height: 100%;
	left: -1%;
	position: absolute;
	top: 0;
	width: 102%;
}

/*.header .logo:before:hover{
	background:none!important;
}*/

.logo .icon-dp {
	font-size: 36px;
	line-height: 50px;
}

		@media screen and (min-width: 48em) {
			.logo .icon-dp {
				font-size: 72px;
				line-height: 100px;
			}
		}


/*	Navicon
   -------------------------------------------------------------------------- */

.navicon {
	display: inline-block;
}

.navicon .icon-menu {
	display: inline-block;
	font-size: 20px;
	line-height: 50px;
	text-align: center;
	vertical-align: top;
	width: 50px;
}

		@media screen and (min-width: 48em) {
			.navicon {
				display: none !important;
			}
		}

.offcanvasnav .navicon .icon-menu:before {
	content: "\e005";
}


/*	- Navigation
   ========================================================================== */

.nav {
	display: none;
}

.nav:target {
	display: block;
}




		@media screen and (max-width: 47.938em) {
			.nav .container {
				border-width: 0 20px;
			}
		}




.js .nav {
	display: block;
	height: 100%;
	left: 0;
	overflow-y: auto;
	position: fixed;
	top: 0;
	width: 240px;
	z-index: 10;
	-webkit-overflow-scrolling: touch;
}

		@media screen and (min-width: 48em) {
			.js .nav {
				height: auto;
				position: static;
				width: auto;
			}
		}




.js .header .nav {
	display: none;
}

@media screen and (min-width: 48em) {
	.js .header .nav {
		display: block;
	}
}




.navlinks-primary {

}

.navlinks-secondary {

}

		@media screen and (min-width: 48em) {
			.navlinks-primary {
				float: left;
				margin-left: -20px;
			}

			.navlinks-secondary {
				float: right;
				margin-right: -20px;
			}
		}




.nav ul {
	font-family: "Sansation", sans-serif;
	text-transform: uppercase;
}

		@media screen and (min-width: 48em) {
			.nav ul {
				text-align: center;
			}
		}




.nav li {
	border-bottom: 1px solid #262626;
	display: block;
}

		@media screen and (min-width: 48em) {
			.nav li {
				border: 0;
				display: inline-block;
				margin-right: 20px;
			}
		}

		@media screen and (min-width: 60em) {
			.nav li {
				margin-right: 40px;
			}
		}

		@media screen and (min-width: 64em) {
			.nav li {
				// margin-right: 105px;
				margin-right: 60px;
			}
		}

.nav li:last-child {
	margin-right: 0;
}




.nav a {
	display: block;
	line-height: 50px;
	margin: 0 -20px;
	padding: 0 20px;
	position: relative;
	font-weight: 400;
}

		@media screen and (min-width: 48em) {
			.nav a {
				line-height: 100px;
				margin: 0;
			}
		}

.nav a:hover {

}

.nav a.active {
   color: #BF1F1F;
}

		@media screen and (min-width: 48em) {
			.nav a.active {
				color: #fff;
			}

			.nav a.active:after {
				background: #fff;
				content: "";
				height: 2px;
				left: 20px;
				position: absolute;
				right: 20px;
				top: 65px;
				-moz-transition: background-color .2s ease-out;
				-ms-transition: background-color .2s ease-out;
				-o-transition: background-color .2s ease-out;
				-webkit-transition: background-color .2s ease-out;
				transition: background-color .2s ease-out;
			}

			.nav a:hover.active {
				color: #c81b2f;
			}

			.nav a:hover.active:after {
				background-color: #c81b2f;
			}
		}


/*	Sub-navigation
   -------------------------------------------------------------------------- */

.sub-nav {
	background: #1f1f1f;
}

		@media screen and (min-width: 48em) {
			.sub-nav {
				left: 0;
				position: absolute;
				top: 100px;
				-moz-transition: top .3s ease-out;
				-ms-transition: top .3s ease-out;
				-o-transition: top .3s ease-out;
				-webkit-transition: top .3s ease-out;
				transition: top .5s ease-out;
				width: 100%;
				z-index: 5;
			}

			.sub-nav.hide-me{
				top: 0px;
			}

			.case-studies.sub-nav.hide-me,
			.products.sub-nav.hide-me{
				top: -125px;
			}

			.projects .projects.sub-nav.hide-me{
				top: 100px;
			}
		}

.sub-nav ul {

}

.sub-nav li {
	font: 700 14px "Sansation", sans-serif;
}

.sub-nav a {
	display: block;
}


/*	Case studies sub-navigation
   -------------------------------------------------------------------------- */

.case-studies.sub-nav,
.products.sub-nav {
	display: none;
	padding: 8px 0 20px;
	font-weight: 300;
}

.case-study .case-studies.sub-nav,
.product .products.sub-nav {
	display: block;
}

		@media screen and (max-width: 47.9em){
			.case-study .case-studies.sub-nav,
			.product .products.sub-nav {
				-webkit-transition: margin .5s ease-out;
				-moz-transition: margin .5s ease-out;
				-o-transition: margin .5s ease-out;
				transition: margin .5s ease-out;
			}

			.case-study .case-studies.sub-nav{
				margin-top: -420px;
			}

			.product .products.sub-nav{
				margin-top: -460px;
			}

			.case-study .case-studies.sub-nav.neg-margin,
			.product .products.sub-nav.neg-margin {
				margin-top: 0px;
			}

		}

		@media screen and (min-width: 48em) {
			.case-studies.sub-nav,
			.products.sub-nav {
				display: block;
				padding: 16px 0;
				text-align: center;
			}



			.case-studies.sub-nav.hide-me,
			.products.sub-nav.hide-me{
				top: -320px;
			}

			.case-study .case-studies.sub-nav.hide-me,
			.product .products.sub-nav.hide-me{
				/*top: 100px;*/
			}
		}

.more-cases,
.more-products{
	margin: 20px auto !important;
	display: block;
	width: 90%;
	text-align: center;
}

.more-cases:hover,
.more-products:hover{
	border-color: #BF1F1F;
}

	@media screen and (min-width: 48em) {
		.more-cases,
		.more-products{
			display: none;
		}
	}


/*.case-studies.sub-nav ul,
.products.sub-nav ul  {

}

		@media screen and (min-width: 37.5em) {
			.case-studies.sub-nav ul,
			.products.sub-nav ul {
				margin: -8px;
			}
		}




.case-studies.sub-nav li,
.products.sub-nav li {
	display: block;
	margin-top: 12px;
}

		@media screen and (min-width: 48em) {
			.case-studies.sub-nav li,
			.products.sub-nav li {
				display: inline-block;
				margin: 0;
				padding: 8px;
				vertical-align: top;
				width: 25%;
			}
		}

		@media screen and (min-width: 60em) {
			.case-studies.sub-nav li,
			.products.sub-nav li {
				width: 14.285%;
			}
		}
*/



.case-studies.sub-nav a,
.products.sub-nav a  {
	border: 2px solid #2f2f2f;
	border-radius: 8px;
	display: block;
	overflow: hidden;
	padding: 0 8px;
	position: relative;
	behavior: url(pie.htc);
}

		@media screen and (min-width: 48em) {
			.case-studies.sub-nav a,
			.products.sub-nav a {
				padding: 8px 8px 16px;
			}

			.no-touch .case-studies.sub-nav a,
			.no-touch .products.sub-nav a {
				border-color: transparent;
			}

			.no-touch .case-studies.sub-nav a:hover,
			.no-touch .products.sub-nav a:hover  {
				border-color: #2f2f2f;
			}
		}

		@media screen and (min-width: 60em) {
			.case-studies.sub-nav a,
			.products.sub-nav a {
				padding: 16px 8px 24px;
			}
		}




.case-study-logo,
.product-thumb {
	align-items: center;
	-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: block;
	position: relative;
	width: 100px;
	margin: 28px auto 10px !important;
	height: 100px;
}

.case-study-logo img,
.product-thumb img {
	position: relative;
  top: 50%;
  transform: translateY(-50%);
}

		@media screen and (min-width: 48em) {
			.case-study-logo,
			.product-thumb {
				margin-bottom: 16px;
			}
		}

		@media screen and (min-width: 60em) {
			.case-study-logo,
			.product-thumb {
				margin-bottom: 24px;
			}
		}

.lt-ie9 .case-study-logo,
.lt-ie9 .product-thumb {
	display: block;
}




.case-studies.sub-nav img,
.products.sub-nav img {
	height: auto;
	margin-right: 8px;
	width: 40px;
}

		@media screen and (min-width: 48em) {
			.case-studies.sub-nav img,
			.products.sub-nav img{
				margin: 0;
				width: 100%;
			}
		}




.case-studies.sub-nav img.color,
.products.sub-nav img.color {
	display: inline-block;
}

.case-studies.sub-nav img.grayscale,
.products.sub-nav img.grayscale {
	display: none;
}

		@media screen and (min-width: 48em) {
			.no-touch .case-studies.sub-nav img.grayscale,
			.no-touch .products.sub-nav img.grayscale  {
				display: inline-block;
			}

					.lt-ie9 .case-studies.sub-nav img.grayscale,
					.lt-ie9 .products.sub-nav img.grayscale  {
						display: block;
					}

			.no-touch .case-studies.sub-nav img.color,
			.no-touch .products.sub-nav img.color {
				display: none;
				height: auto;
				-moz-transition: opacity .2s ease-out;
				-ms-transition: opacity .2s ease-out;
				-o-transition: opacity .2s ease-out;
				-webkit-transition: opacity .2s ease-out;
				transition: opacity .2s ease-out;
				width: 100%;
			}

					.lt-ie9 .case-studies.sub-nav img.color,
					.lt-ie9 .products.sub-nav img.color {
						visibility: hidden;
					}

			.no-touch .case-studies.sub-nav a:hover img.color,
			.no-touch .products.sub-nav a:hover img.color {
				display: inline-block;
				opacity: 1;
			}

					.lt-ie9 .case-studies.sub-nav a:hover img.color,
					.lt-ie9 .products.sub-nav a:hover img.color {
						visibility: visible;
					}
		}




.case-study-title,
.product-menu-title {
	color: #fff;
	white-space: nowrap;
	font-weight: 300;
}

		@media screen and (min-width: 48em) {
			.case-study-title,
			.product-menu-title {
				display: block;
				padding: 0 8px;
				white-space: normal;
			}

			.no-touch .case-study-title,
			.no-touch .product-menu-title {
				opacity: 0;
				-moz-transition: opacity .2s ease-out;
				-ms-transition: opacity .2s ease-out;
				-o-transition: opacity .2s ease-out;
				-webkit-transition: opacity .2s ease-out;
				transition: opacity .2s ease-out;
			}

			.no-touch .case-studies.sub-nav a:hover .case-study-title,
			.no-touch .products.sub-nav a:hover .product-menu-title {
				opacity: 1;
			}
		}


.case-disclaimer{
	text-align: center;
	color: #9D9D9D;
	padding-bottom: 80px;
}

/*	Projects sub-navigation
   -------------------------------------------------------------------------- */

.projects.sub-nav {
	display: none;
	text-align: center;
}

.projects.sub-nav.hide-me{
	top: -30px;
}

.projects .projects.sub-nav{
	display: block;
}

		@media screen and (min-width: 48em) {
			.projects.sub-nav {
				display: block;
			}
		}

.projects.sub-nav ul {
	padding: 8px 0 20px;
}

		@media screen and (min-width: 48em) {
			.projects.sub-nav ul {
				margin: 0 -8px;
				padding: 16px 0;
			}
		}

		@media screen and (min-width: 60em) {
			.projects.sub-nav ul {
				margin: 0 -16px;
				padding: 24px 0;
			}
		}

.projects.sub-nav li {
	display: block;
	font-size: 16px;
	line-height: 2;
	margin-top: 12px;
	text-transform: uppercase;
}

		@media screen and (min-width: 48em) {
			.projects.sub-nav li {
				display: inline-block;
				margin-top: 0;
				padding: 0 8px;
				width: 33.333%;
			}
		}

		@media screen and (min-width: 60em) {
			.projects.sub-nav li {
				line-height: 3;
				padding: 0 16px;
			}
		}

.button.bespoke{
	background: url(../images/bespoke_btn_bg.jpg) no-repeat center center;
}

.button.digital{
	background: url(../images/digital_btn_bg.jpg) no-repeat center center;
}

.button.interactive{
	background: url(../images/interactive_btn_bg.jpg) no-repeat center center;
}


.projects.sub-nav a {
	border: 2px solid #616161;
	border-radius: 4px;
	background-size: cover;
	padding: 8px 0px;
	font-size: 18px;
	color: #fafafa;
	position: relative;
	behavior: url(pie.htc);
}

.projects.sub-nav a:hover {
	border-color: #bf1f1f;
	color: #bf1f1f;
}

.projects.sub-nav a.active {
	border-color: #d7d7d7;
	color: #d7d7d7;
}




/*	- Main
   ========================================================================== */

.home .main {
	overflow: hidden;
	background: #1f1f1f;
}

.main {
	-moz-transition: padding .5s ease-out;
	-ms-transition: padding .5s ease-out;
	-o-transition: padding .5s ease-out;
	-webkit-transition: padding .5s ease-out;
	transition: padding .5s ease-out;
	position: relative;
    z-index: 1;
}

		@media screen and (min-width: 48em) {
			.main {
				/*padding: 100px 0 153px;*/
				padding: 100px 0 0 0;
			}

			.projects .main {
				padding-top: 168px;
			}

			.main.case-padding {
				padding-top: 284px;
			}

			.main.project-padding {
				padding-top: 168px;
			}
		}

		@media screen and (min-width: 60em) {
			.projects .main {
				padding-top: 200px;
			}

			.main.case-padding {
				padding-top: 323px;
			}

			.main.project-padding {
				padding-top: 200px;
			}
		}




/*	- Project modal
   ========================================================================== */

.project-modal {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-ms-background-size:cover;
	-o-background-size:cover;
	background-size:cover;

	background-position: center center;
	z-index: 9;
}





/*	- Footer
   ========================================================================== */

.footer-image-mask {
    height: 0;
    padding-bottom: 40%;
}
.footer-image {
	background: url(../images/homeslider/footer.jpg) no-repeat center center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
    height: 100%;
	display: none;
}
.footer-image.show {
	display: block;
}
.footer {
	background: #000;
	position: relative;
}

		/*@media screen and (min-width: 48em) {
			.footer {
				bottom: 0;
				left: 0;
				position: absolute;
				width: 100%;
			}
		}




		@media screen and (max-width: 47.938em) {
			.footer .container {
				padding: 20px 0;
			}
		}*/




.footer a {
	color: inherit;
}

.footer a:hover {
	color: #bf1f1f;
}

.footer-links .logo a:hover{
	color: #BF1F1F;
}


/*	Footer links
   -------------------------------------------------------------------------- */

.footlinks-primary {

}

.footlinks-secondary {

}

		@media screen and (min-width: 48em) {
			.footlinks-primary {
				float: left;
				margin-left: -20px;
			}

			.footlinks-secondary {
				float: right;
				margin-right: -20px;
			}
		}




.footer-links {
	text-align: center;
}

		@media screen and (min-width: 48em) {
			.footer-links {
				padding: 0;
			}
		}




.footer-links li {
	display: block;
}

		@media screen and (min-width: 48em) {
			.footer-links li {
				display: inline-block;
			}
		}

		@media screen and (min-width: 60em) {
			.footer-links li {
				font-size: 16px;
			}
		}

.footer-links .logo {

}

		@media screen and (min-width: 48em) {
			.footer-links .logo {
				left: 50%;
				margin-left: -36px;
				position: absolute;
				top: 0;
			}
		}




.footer-links a {
	display: inline-block;
	line-height: 24px;
}

		@media screen and (min-width: 48em) {
			.footer-links a {
				display: block;
				line-height: 100px;
				padding: 0 16px;
			}
		}

.footer-links .logo a {
	color: #2c2c2c;
	padding: 0;
}




.footer-links .logo .icon-dp {
	line-height: 1;
}

		@media screen and (min-width: 48em) {
			.footer-links .logo .icon-dp {
				line-height: inherit;
			}
		}


/*	Legal
   -------------------------------------------------------------------------- */

.legal {
	background: #111;
	color: #424242;
	font-size: 12px;
	font-weight: 400;
	padding: 18px 0;
	text-align: center;
}

.legal p{
	font-size:inherit;
}

.copyright {
	color: #555;
}


/*	PAGES
   ==========================================================================
   ========================================================================== */


/*	- Home
   ========================================================================== */

.home {

}


/*	- Home slider
   -------------------------------------------------------------------------- */

.home-slider, .home-slider-mask .home-slider .slides{
	min-height: 100%;
}
.home-slider {
	position: fixed;
	height: 100%;
	width: 100%;
	top:0;
	left:0;
}
.home-slider .flex-direction-nav  {
	display: none;
}
.home-slider .flex-control-nav  {
    position: fixed;
    bottom: 0;
    z-index: 9;
    right: 20px;
    margin: 80px 0;
    display: none;
}
		@media screen and (min-width: 48em) {
			.home-slider .flex-control-nav  {
				display: block;
				bottom: 100px;

			}
		}

.home-slider .flex-control-nav a,
.home-slider .flex-control-nav a.flex-active {
	border: 2px solid #FFFFFF;
}
.home-slider .flexslider {
    z-index: 1;
}
.home-slider .flex-control-nav a.flex-active {
	background: #fff;
}
.home-slider .flexslider,
.home-slider .flexslider .slides{

	position: absolute;
	height: 100%;
	width: 100%;
	top:0;
	left:0;

}
.home-slider .flexslider .slides li{
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-ms-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}


.home-slider__container {
	height: 0;
	padding-bottom: 62%;
	position: relative;
}

.home-slider__container img {
	position: absolute;
	top: 0;
	width: 100%;
	opacity: 0;
}

.home-slider__container img:first-child{
	opacity: 1;
}

.home-intro {
	color: #fff;
	position: absolute;
	left:0;
    z-index: 9;
	width: 100%;
	bottom:0;
}
		@media screen and (min-width: 48em) {
			.home-intro {
				bottom: 100px;
			}
		}
.home-intro p {
	max-width: 500px;
    font-size: 1.4em;
    line-height: 1.25em;
	font-family: "Sansation", sans-serif;
    font-weight: 200;
    position: relative;
}
	@media screen and (min-width: 48em) {
		.home-intro p {
		    font-size:1.8em;
		}
	}


.pokeout {
    position: absolute;
    left: -.5em;
}
	@media screen and (min-width: 48em) {
	}

/*.home .main {
	padding-bottom: 0;*/

/*	Home carousel
   -------------------------------------------------------------------------- */

.home .entry-content p {
    font-family: "Sansation", sans-serif;
    color: #fff;
}
.home .caption-content p {
	margin-top: 0;
	font-weight: 600;
}
	@media screen and (min-width: 48em) {
		.home .entry-content p {
		    font-size: 1.2em;
		}
		.home .caption-content p {
		    font-size: 1.5em;
		}
	}
	@media screen and (min-width: 60em)
		.home .caption-content {
			width: 80% !important;
		}
	}


/*	Home carousel
   -------------------------------------------------------------------------- */

.home-carousel-wrap {
	border: solid #2f2f2f;
	border-width: 2px 0;
	margin-bottom: 40px;
	padding: 20px 0;
	position: relative;
}

		@media screen and (min-width: 37.5em) {
			.home-carousel-wrap {
				margin-bottom: 50px;
				padding: 30px 0;
			}
		}

		@media screen and (min-width: 60em) {
			.home-carousel-wrap {
				margin-bottom: 60px;
				padding: 40px 0;
			}
		}




.home-carousel {

}




.home-carousel .half-column {
	padding: 0 20px;
}

		@media screen and (min-width: 37.5em) {
			.home-carousel .half-column {
				padding: 0 30px;
			}
		}

		@media screen and (min-width: 60em) {
			.home-carousel .half-column {
				padding: 0 40px;
			}
		}




.home-carousel .imagery {
	position: relative;
}

.home-carousel .slides img {
	width: auto;
}

.home-carousel .featured {
	position: relative;
	z-index: 1;
}

.home-carousel .intro {
	text-align: center;
}

	@media screen and (min-width: 48em) {
		.home-carousel .intro {
			text-align: left;
		}
	}

.home-carousel .product-title {
	margin: 1em 0 1.5em;
}

.home-carousel .intro .button, .more-cases, .more-products {
	border: 2px solid #616161;
	border-radius: 4px;
	color: #616161;
	font-family: "Sansation", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 40px;
	padding: 0 20px;
	position: relative;
	text-transform: uppercase;
	behavior: url(pie.htc);
}

.home-carousel .intro .button:hover {
	border-color: #bf1f1f;
	color: #bf1f1f;
}

.flex-control-nav {
	font-size: 0;
	margin: 20px 0;
	text-align: center;
}

		@media screen and (min-width: 37.5em) {
			.flex-control-nav {
				margin: 30px 0;
			}
		}

		@media screen and (min-width: 60em) {
			.flex-control-nav {
				margin: 40px 0;
			}
		}

.home-carousel .flex-control-nav {
	margin: 22px 0 0;
	position: absolute;
	top: 100%;
	width: 100%;
	z-index: 100;
}

		@media screen and (min-width: 37.5em) {
			.home-carousel .flex-control-nav {
				margin-top: 32px;
			}
		}

		@media screen and (min-width: 60em) {
			.home-carousel .flex-control-nav {
				margin-top: 42px;
			}
		}

.flex-control-nav li {
	display: inline-block;
	margin: 0 4px;
}

.flex-control-nav a {
	background: #191919 url(../images/px.png);
	border: 2px solid #2f2f2f;
	border-radius: 50%;
	cursor: pointer;
	display: block;
	height: 20px;
	position: relative;
	width: 20px;
	behavior: url(pie.htc);
}

.flex-control-nav a.flex-active {
	border-color: #525252;
}


/*	- Profile
   ========================================================================== */

.profile {

}


/*	Profile carousel
   -------------------------------------------------------------------------- */

.profile-carousel {
	border: solid #2f2f2f;
	border-width: 2px 0;
	margin-bottom: 80px;
	position: relative;
}

		@media screen and (min-width: 37.5em) {
			.profile-carousel {
				font-size: 24px;
				margin-bottom: 110px;
			}
		}

		@media screen and (min-width: 60em) {
			.profile-carousel {
				font-size: 32px;
				margin-bottom: 140px;
			}
		}

.profile-carousel .slide-title {
	color: #e2e2e2;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	padding: 20px 0px;
}

		@media screen and (min-width: 37.5em) {
			.profile-carousel .slide-title {
				font-size: 24px;
				padding: 40px 60px;
			}
		}

		@media screen and (min-width: 60em) {
			.profile-carousel .slide-title {
				font-size: 30px;
				padding: 60px 80px;
			}
		}

.profile-carousel .flex-control-nav {
	left: 0;
	position: absolute;
	top: 100%;
	width: 100%;
}


/*	- Case studies
   ========================================================================== */

.case-study {

}

.case-study .main {
	/*color: #d5d5d5;*/
	font-size: 18px;
	font-weight: 300;
}

@media screen and (max-width: 767px) {
	.case-study .main,
	.product .main {

	 padding-top: 50px;
}
}


.odd-section {
	background: #060000;
}

.hero {
	background: no-repeat 50% 50%;
	background-size: cover;
}

.hero-spacer {
	height: 0;
	padding-bottom: 42.1875%;
}

.case-study-120collins .hero-spacer{
	padding-bottom: 60.188%;
}


.half-column {

}

.half-column + .half-column {
	margin-top: 40px;
}

		@media screen and (min-width: 48em) {
			.half-column {
				float: left;
				width: 50%;
			}

			.half-column + .half-column {
				margin-top: 0;
			}
		}




.intro {

}

		@media screen and (min-width: 48em) {
			.intro {
				padding-right: 40px;
			}
		}

.product-title {
	color: #fff;
	font-size: 32px;
	font-weight: 400;
	margin-bottom: 1em;
	position: relative;
}

/*
.product-title:after {
	background: #313131;
	content: "";
	height: 2px;
	margin-top: .5em;
	position: absolute;
	top: 100%;
	width: 48px;
	margin-left: -24px;
	left: 50%;
}
*/

		@media screen and (min-width: 48em) {
			.product-title:after {
				margin-left: 0;
				left: 0;
			}
		}

.intro a {
	color: inherit;
	font-weight: 500;
}




.imagery {
	text-align: center;
}

		@media screen and (min-width: 48em) {
			.caption + .imagery {
				float: right;
			}
		}




.caption {

}

		@media screen and (min-width: 48em) {
			.caption {
				height: 100%;
				position: absolute;
			}

			.imagery + .caption {
				left: 50%;
			}
		}

.caption-outer-wrap {
	display: table;
	height: 100%;
	width: 100%;
}

.caption-inner-wrap {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding-bottom: 20px;
}

.caption-content {
	border: solid #2f2f2f;
	border-width: 2px 0;
	padding: 2em 0;
	text-align: left;
}

		@media screen and (min-width: 48em) {
			.caption-content {
				margin: 0 auto;
				width: 80%;
			}
		}

		@media screen and (min-width: 60em) {
			.caption-content {
				width: 60%;
			}
		}




.quote {
	color: #e2e2e2;
	font-family: "Sansation", sans-serif;
	font-weight: 400;
	line-height: 1.2;
	/*padding: 20px 0;*/
}

		@media screen and (min-width: 37.5em) {
			.quote {
				/*font-size: 20px;
				padding: 40px 80px;*/
				width: auto;
			}

			.quote p{
				font-size: 20px;
			}
		}

		@media screen and (min-width: 60em) {
			.quote {
				/*font-size: 24px;
				padding: 80px 160px;*/
			}

			.quote p{
				font-size: 24px;
			}
		}

.author {
	display: block;
	padding-left: 3em;
	position: relative;
}

.author:before {
	background: #4c4c4c;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	top: .45em;
	width: 2em;
}

.author .position {
	color: #909090;
	display: block;
}




.image-row {
	font-size: 0;
	margin-top: -80px;
	text-align: center;
}

.image-row li {
	display: block;
	margin-top: 40px;
	padding: 0 40px;
}

		@media screen and (min-width: 37.5em) {
			.image-row li {
				display: inline-block;
				padding: 0 20px;
				width: 33.333%;
			}
		}




.content-row {
	width: auto;
}

		@media screen and (min-width: 48em) {
			.content-row .half-column:first-child {
				padding-right: 10px;
			}
			.content-row .half-column:last-child {
				padding-left: 10px;
			}
		}

		@media screen and (min-width: 60em) {
			.content-row .half-column:first-child {
				padding-right: 20px;
			}
			.content-row .half-column:last-child {
				padding-left: 20px;
			}
		}

.content-row .caption-content {
	width: auto;
}




.bordered {
	position: relative;
}

.bordered:before {
	background: #2f2f2f;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	top: -40px;
	width: 100%;
}

		@media screen and (min-width: 48em) {
			.bordered:before {
				top: -60px;
			}
		}

		@media screen and (min-width: 60em) {
			.bordered:before {
				top: -80px;
			}
		}


/*	Spacing
   -------------------------------------------------------------------------- */

.margined {
	margin: 40px auto;
}

.padded {
	padding: 40px 0;
}

.pusher,
.phone-pusher {
	margin-bottom: 40px;
}

		@media screen and (min-width: 48em) {
			.margined {
				margin: 60px auto;
			}

			.padded {
				padding: 60px 0;
			}

			.pusher {
				margin-bottom: 60px;
			}

			.phone-pusher {
				margin-bottom: 0;
			}
		}

		@media screen and (min-width: 60em) {
			.margined {
				margin: 80px auto;
			}

			.padded {
				padding: 80px 0;
			}

			.pusher {
				margin-bottom: 80px;
			}
		}

.odd-section .margined:first-child {
	margin-top: 0;
}

.odd-section .margined:last-child {
	margin-bottom: 0;
}


/*	Image map
   -------------------------------------------------------------------------- */

.image-map {
	display: inline-block;
	position: relative;
}

.image-map img {
	height: auto;
	width: 100%;
}




.image-map-legend {
	color: #d7d8dd;
	counter-reset: counter;
	/*font-family: "Sansation", sans-serif;*/
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
	margin: -8px 0 40px;
	text-align: left;
}

		@media screen and (min-width: 48em) {
			.image-map-legend {
				font-size: 20px;
				left: 0;
				margin-top: 0;
				position: absolute;
				top: 0;
				width: 40%;
				z-index: 1;
			}

			.image-map-legend:before {
				border: 6px solid #e00000;
				border-radius: 50%;
				content: "";
				height: 24px;
				margin-right: 12px;
				position: absolute;
				right: 100%;
				top: -3px;
				width: 24px;
				behavior: url(pie.htc);
			}
		}

		@media screen and (min-width: 60em) {
			.image-map-legend {
				font-size: 24px;
				width: 25%;
			}

			.image-map-legend:before {
				margin-top: 4px;
			}
		}

.image-map-legend li {
	margin-top: 8px;
	padding-left: 22px;
	position: relative;
}

.image-map-legend li small {
	color: #909090;
	display: block;
}

.image-map-legend li br {
	display: none;
}

		@media screen and (min-width: 48em) {

			.image-map-legend{
				display: none;
			}

			.image-map-legend li {
				margin-top: 0;
				padding-left: 0;
			}

			.image-map-legend li,
			.image-map-legend li:before {
				display: none;
			}

			.image-map-legend li:first-child {
				display: block;
			}

			.image-map-legend li br {
				display: inherit;
			}
		}

.image-map-legend li:before {
	background: #e00000;
	border-radius: 50%;
	color: #fff;
	content: counter(counter);
	counter-increment: counter;
	font-size: 10px;
	font-weight: 500;
	left: 0;
	line-height: 1.6;
	position: absolute;
	text-align: center;
	top: 2px;
	width: 1.6em;
	behavior: url(pie.htc);
}




.image-map-markers {

}

.image-map-markers li {
	background: #e00000;
	border: 2px solid #e00000;
	border-radius: 50%;
	color: #fff;
	display: block;
	font-size: 14px;
	font-weight: 500;
	height: 24px;
	line-height: 20px;
	margin: -12px 0 0 -12px;
	position: absolute;
	text-align: center;
	-moz-transition: border-width .2s ease-out, height .2s ease-out, margin .2s ease-out, width .2s ease-out;
	-ms-transition: border-width .2s ease-out, height .2s ease-out, margin .2s ease-out, width .2s ease-out;
	-o-transition: border-width .2s ease-out, height .2s ease-out, margin .2s ease-out, width .2s ease-out;
	-webkit-transition: border-width .2s ease-out, height .2s ease-out, margin .2s ease-out, width .2s ease-out;
	transition: border-width .2s ease-out, height .2s ease-out, margin .2s ease-out, width .2s ease-out;
	width: 24px;
	behavior: url(pie.htc);
}

.image-map-markers li span{
	display: inline-block;
}

.image-map-markers li .caption{
	opacity: 0;
}

		@media screen and (min-width: 48em) {
			.image-map-markers li {
				background: url(../images/px.png);
				cursor: pointer;
				text-align: left;
				white-space: nowrap;
			}

			.image-map-markers li span{
				display: none;
			}

			.image-map-markers .caption{
				position: absolute;
				padding-left: 10px;
				height: auto;
				cursor: default;
				font-family: "Sansation", "Open Sans", sans-serif;
				font-size: 18px;
				line-height: 22px;
			}

			.image-map-markers li:hover .caption{
				/*opacity: 1;*/
			}


		}

.image-map-markers li:hover,
.image-map-markers li.active {

}



		@media screen and (min-width: 48em) {
			.image-map-markers li:hover,
			.image-map-markers li.active {
				border-width: 6px;
			}
		}


.vert{
	width: 1px;
	border-right: 1px dotted #E00000;
	position: absolute;
	height: 0px;
	opacity: 0;
}

.horz{
	width: 0px;
	border-top: 1px dotted #E00000;
	position: absolute;
	height: 1px;
	opacity: 0;
}

.vert,
.horz{
	z-index: 10;
}



/*	Panner
   -------------------------------------------------------------------------- */

.panner {
	position: relative;
	text-align: center;
}

.panner-viewport {
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}

.panner-prev,
.panner-next {
	background: transparent;
	border: 0;
	color: #3a3a3a;
	font-size: 32px;
	height: 100%;
	padding: 0;
	position: absolute;
	top: 0;
	width: 48px;
	z-index: 1;
}

		@media screen and (min-width: 37.5em) {
			.panner-prev,
			.panner-next {
				width: 64px;
			}
		}

		@media screen and (min-width: 60em) {
			.panner-prev,
			.panner-next {
				width: 128px;
			}
		}

.panner-prev {
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE5MTkxOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOTE5MTkiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background-image: -moz-linear-gradient(left, rgba(25,25,25,1) 0%, rgba(25,25,25,0) 100%);
	background-image: -webkit-linear-gradient(left, rgba(25,25,25,1) 0%, rgba(25,25,25,0) 100%);
	background-image: -o-linear-gradient(left, rgba(25,25,25,1) 0%, rgba(25,25,25,0) 100%);
	background-image: -ms-linear-gradient(left, rgba(25,25,25,1) 0%, rgba(25,25,25,0) 100%);
	background-image: linear-gradient(to right, rgba(25,25,25,1) 0%, rgba(25,25,25,0) 100%);
	left: 0;
}

.panner-next {
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE5MTkxOSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOTE5MTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background-image: -moz-linear-gradient(left, rgba(25,25,25,0) 0%, rgba(25,25,25,1) 100%);
	background-image: -webkit-linear-gradient(left, rgba(25,25,25,0) 0%, rgba(25,25,25,1) 100%);
	background-image: -o-linear-gradient(left, rgba(25,25,25,0) 0%, rgba(25,25,25,1) 100%);
	background-image: -ms-linear-gradient(left, rgba(25,25,25,0) 0%, rgba(25,25,25,1) 100%);
	background-image: linear-gradient(to right, rgba(25,25,25,0) 0%, rgba(25,25,25,1) 100%);
	right: 0;
}

.panner-prev:hover,
.panner-next:hover {
	color: #9d9d9d;
}

.panner-viewport img {
	height: auto;
	max-width: none;
	width: 1614px;
}


/*	Page: Westpac ATM Enclosures
   -------------------------------------------------------------------------- */

.case-study-westpac {

}


/*	Page: The Star WayFinder
   -------------------------------------------------------------------------- */

.case-study-thestar {

}

.case-study-thestar .image-map img {
	max-width: 480px;
}

		@media screen and (min-width: 48em) {
			.case-study-thestar .image-map-legend {
				left: 10%;
				top: 20%;
			}
		}

		@media screen and (min-width: 60em) {
			.case-study-thestar .image-map-legend {
				left: 20%;
			}
		}


/*	Page: oOh! Media Signage Enclosure
   -------------------------------------------------------------------------- */

.case-study-ooh {

}

.case-study-ooh .image-map img {
	max-width: 660px;
}

		@media screen and (min-width: 48em) {
			.case-study-ooh  .image-map {
				margin-top: 56px;
			}
		}


/*	Page: myKiosk iPad Stand
   -------------------------------------------------------------------------- */

.case-study-mykiosk {

}

.case-study-mykiosk .image-map {
	left: -14.481%;
}

.case-study-mykiosk .image-map img {
	max-width: 732px;
}

		@media screen and (min-width: 48em) {
			.case-study-mykiosk .image-map-legend {
				left: 5%;
				top: 40%;
			}

			.case-study-mykiosk .image-map {
				left: 0;
			}
		}

		@media screen and (min-width: 60em) {
			.case-study-mykiosk .image-map-legend {
				left: 20%;
				top: 40%;
			}
		}


/*	Page: Givv Gift Card
   -------------------------------------------------------------------------- */

.case-study-givv {

}

.case-study-givv .image-map {
	left: -12.033%;
}

.case-study-givv .image-map img {
	max-width: 964px;
}

		@media screen and (min-width: 48em) {
			.case-study-givv .image-map {
				margin-top: 56px;
			}

			.case-study-givv .image-map {
				left: 0;
			}
		}


/*	3M Multi-touch Table
   -------------------------------------------------------------------------- */

.case-study-3m {

}

.case-study-3m .image-map-legend {
	top: 15%;
}

.case-study-3m .image-map {
	left: -15.394%;
}

.case-study-3m .image-map img {
	max-width: 864px;
}

		@media screen and (min-width: 48em) {
			.case-study-3m .image-map {
				left: 0;
			}
		}


/*	Page: 120 Collins St Digital Directories
   -------------------------------------------------------------------------- */

.case-study-120collins {

}


/*	- Projects
   ========================================================================== */

.projects .main > .container {

}

		@media screen and (min-width: 48em) {
			.projects .main > .container {
				margin-bottom: 60px;
			}
		}

		@media screen and (min-width: 60em) {
			.projects .main > .container {
				margin-bottom: 80px;
			}
		}




		@media screen and (min-width: 37.5em) {
			.projects .loader {
				background: url(../images/dp_loader.gif) no-repeat 50% 100px;
			}

			.projects-list {
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				filter: alpha(opacity=0);
				opacity: 0;
			}
		}


/*	Projects list
   -------------------------------------------------------------------------- */

.project-slider {
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
    z-index: 9;
    background: #000;
 }
.bkgd-shadow {
 	content: '';
 	display: block;
 	position: absolute;
 	bottom: 0;
 	width: 100%;
 	left: 0;
 	height: 300px;
  	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.4))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 100%); /* W3C */
    z-index: 2;
}

.all-projects {
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 5;
    text-align: left;
    font-family: "Sansation", sans-serif;
    font-size: 1.4em;

    color: #fff;




}
.all-projects span,
.all-projects span svg rect{
    cursor: pointer;
	-webkit-transition:.5s;
	-moz-transition:.5s;
	-ms-transition:.5s;
	-o-transition:.5s;
	transition:.5s;
	fill:#fff;
}
.all-projects span:focus,
.all-projects span:hover{
	opacity: .5;
}
.all-projects svg{
    position: relative;
    top: -1px;
    margin-right: 5px;
	-webkit-transition:.5s;
	-moz-transition:.5s;
	-ms-transition:.5s;
	-o-transition:.5s;
	transition:.5s;

}
.all-projects span:focus svg rect,
.all-projects span:hover svg rect{
}
.all-projects span:focus,
.all-projects span:hover {

}

.close-project-slider,
.close-modal {
    margin-left: 20px;
}

.project-slider .flex-direction-nav  {
}
.home-slider .flex-control-nav  {
	display: none;
    position: fixed;
    bottom: 0;
    z-index: 9;
    right: 20px;
    margin: 80px 0;
    display: none;
}
		@media screen and (min-width: 48em) {
			.home-slider .flex-control-nav  {
				display: block;
				bottom: 100px;

			}
		}


.project-slider .slides{

	position: absolute;
	height: 100%;
	width: 100%;
	top:0;
	left:0;

}
.project-slider .slides li{
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-ms-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}
.project-caption {
    color: #fff;
    position: absolute;
    top: 100px;
    left: 20px;
    background: rgba(0,0,0,.5);
    padding: 20px;
	font: 1.1em;
    width: 31%;
    min-width: 280px;
    z-index: 2;
}
	@media screen and (min-width: 37.5em) {
			.project-caption {
				top:auto;
			    bottom: 120px;
			    left: 60px;
			}
			.project-caption .ttl{
				font-size: 1.6em;
			}

		}

.project-slider .flex-prev,
.project-slider .flex-next {
	-webkit-transition:.5s;
	-moz-transition:.5s;
	-ms-transition:.5s;
	-o-transition:.5s;
	transition:.5s;

    position: absolute;
    top: 50%;
    z-index: 9;
	display: none;
	height: 58px;
	width: 28px;
	text-indent: -99999px;
}
.project-slider .flex-prev {
    left: 50px;
	background: url(../images/homeslider/slider-arrows.png) no-repeat center left;
}
.project-slider .flex-next {
    right: 50px;
   	background: url(../images/homeslider/slider-arrows.png) no-repeat center right;
}
.project-slider .flex-prev:focus,
.project-slider .flex-prev:hover{
	-webkit-transform: translateX(-10px);
	-moz-transform: translateX(-10px);
	-ms-transform: translateX(-10px);
	-o-transform: translateX(-10px);
	transform: translateX(-10px);
}
.project-slider .flex-next:focus,
.project-slider .flex-next:hover {
	-webkit-transform: translateX(10px);
	-moz-transform: translateX(10px);
	-ms-transform: translateX(10px);
	-o-transform: translateX(10px);
	transform: translateX(10px);
}

.slides .container{
	max-width:100%;
	text-align:left;
}
.project-slider .flex-control-nav {
	display: none;
}

		@media screen and (min-width: 37.5em) {
			.project-slider .flex-prev,
			.project-slider .flex-next {
				display: block;

			}
		}


.projects-list {
	margin: -20px -10px 0;
}

		@media screen and (min-width: 37.5em) {
			.projects-list {
				margin: -20px 0 0;
			}
		}

.project {
	margin-top: 0px;
	/*padding: 0 10px;*/
	padding:0px;

    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;

	-webkit-transform-origin: center;
	-moz-transform-origin: center;
	-ms-transform-origin: center;
	-o-transform-origin: center;
	transform-origin: center;
	width: 100%;
	cursor: pointer;

}

.project:hover{
	box-shadow: 1px 3px 3px #333333;
}

/* add by ming at 06/11/21015*/
nav.case-studies,
nav.products{
	padding-bottom:0px !important;
}
.project .projectOverlay{
	position:absolute;
	width:100%;
	background-color:rgba(0,0,0,0.5);
	height:100%;
	top:0px;
	left:0px;
	opacity:0;
	-webkit-transition:.5s;
	-moz-transition:.5s;
	-ms-transition:.5s;
	-o-transition:.5s;
	transition:.5s;
}

		@media screen and (min-width: 37.5em) {
			.project {
				width: 50%;
			}
		}

		@media screen and (min-width: 60em) {
			.project {
				width: 16.666%;
			}
		}

		 @media screen and (min-width: 980px) {
		   .project {
				width: 20%;
			}
		}

		@media screen and (min-width: 1280px) {
		   .project {
				width: 16.666%;
			}
		}


.project figure{
	position: relative;
    display: block;
    height: 0;
    padding-bottom: 100%;
	background-position: center center;
	background-repeat: no-repeat;

	/*-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	*/

}
html.no-touch .project,
html.no-touch .project figcaption {
	-webkit-transition:.5s;
	-moz-transition:.5s;
	-ms-transition:.5s;
	-o-transition:.5s;
	transition:.5s;
    overflow:hidden;
}
html.no-touch .project figcaption {
	opacity: 0;
}
html.no-touch .project:focus,
html.no-touch .project:hover {
   /* -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);	*/
	z-index:100;
	overflow:visible
}

html.no-touch .project:focus .projectOverlay,
html.no-touch .project:hover .projectOverlay{
	opacity:0.8;
}
html.no-touch .project:focus figcaption,
html.no-touch .project:hover figcaption {
	opacity: 1;
}
.project img {
	height: auto;
	max-width: none;
	width: 100%;
	display: none;
}


@media screen and (min-width: 37.5em) {

	.no-touch .project img.color {
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}
}

.project figcaption {
	background: #0e0e0e;
	padding: 20px;
	bottom: 0;
	left: 0;
	position: absolute;
	width: 100%;
	z-index:110;
}



.project-title {
	color: #fff;
	font-size: 18px;
	margin: 0;
}


/*	- Homepage animations
   ========================================================================== */

.highlight {
	opacity: 0;
	-webkit-transition:.5s;
	-moz-transition:.5s;
	-ms-transition:.5s;
	-o-transition:.5s;
	transition:.5s;

}
.highlight.on {
	opacity: 1;
}

@-webkit-keyframes fadeinfromleft {
    0%,50%		{	opacity: 0; -webkit-transform: translateX(-20px);}
    100% 		{	opacity: 1;	-webkit-transform: translateX(0);}
}
@-moz-keyframes fadeinfromleft {
    0%,50%		{	opacity: 0; -moz-transform: translateX(-20px);}
    100% 		{	opacity: 1;	-moz-transform: translateX(0);}
}
@-ms-keyframes fadeinfromleft {
    0%,50%		{	opacity: 0; -ms-transform: translateX(-20px);}
    100% 		{	opacity: 1;	-ms-transform: translateX(0);}
}
@-o-keyframes fadeinfromleft {
    0%,50%		{	opacity: 0; -o-transform: translateX(-20px);}
    100% 		{	opacity: 1;	-o-transform: translateX(0);}
}
@keyframes fadeinfromleft {
    0%,50%		{	opacity: 0; transform: translateX(-20px);}
    100% 		{	opacity: 1;	transform: translateX(0);}
}

.home-intro {
	animation: fadeinfromleft .8s ease-in;
}



/*	- Clients
   ========================================================================== */

.clients {

}


/*	Clients list
   -------------------------------------------------------------------------- */

.clients-list {

}

.clients-list li {
	float: left;
	padding: 35px;
	text-align: center;
	width: 50%;
}

		@media screen and (min-width: 37.5em) {
			.clients-list li {
				width: 33.333%;
			}
		}

		@media (max-width: 767px){
			.clients-list li{
				padding: 25px 15px;
			}
		}


/*	MEDIA QUERIES
   ==========================================================================
   ========================================================================== */


/*	- Tablet
   -------------------------------------------------------------------------- */

@media screen and (min-width: 37.5em) {

}


/*	- Desktop
   -------------------------------------------------------------------------- */

@media screen and (min-width: 60em) {

}


/*	- Retina graphics
   -------------------------------------------------------------------------- */

@media print, (-webkit-min-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5/4), (min-resolution: 120dpi) {

}


/*	IE FIXES
   ==========================================================================
   ========================================================================== */

.lt-ie9 {

}


/*	PRINT
   ==========================================================================
   ========================================================================== */

@media print {
	* {
		background: transparent !important;
		box-shadow: none !important;
		color: #000 !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group;
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: .5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}