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

Project Name: moresoda
Creation date: 20 January 2011
Author: Jon MacKinnon | jon@moresoda.co.uk
Company: moresoda design ltd
Company URI:http: //www.moresoda.co.uk

===========[TABLE OF CONTENTS]===========

1. BASE
-1.1. CSS Reset [RES]
-1.2. Global Settings [GLO]
-1.3. Common Formatting [COM]
-1.4. Links [LIN]
-1.5. Forms [FOR]
-1.6. Tables [TAB]
-1.7. Global Classes [GLC]
-----
2. CONTENT
-2.1. Wrapper [WRA]
-2.2. Header [HEA]
-2.3. Nav [NAV]
-2.4. Content [CON]
-2.5. Footer [FOO]
-2.6. Classes [CLA]

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



/* =[RES]= CSS Reset ===== */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, /* HTML 5 elements */ abbr,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup, mark,menu,meter,nav,output,progress,section,summary,time,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	vertical-align: baseline;
	-webkit-text-size-adjust: none !important;
}
body {
	line-height: 1.7;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
table, td, th {
	vertical-align: middle;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: none;
}


/* =[GLO]= Global Settings ===== */
html {
	font-size: 125%;
	height: 100%;
	background: #333 url(/images/assets/html.png) top center no-repeat;
	
	/* IE7 fixes */
	
	*overflow-x: hidden; /* stops the horiz scrollbar on the off-right pages (work, method) */
	*background: #333; /* disables the background, as it shows in the wrong place on the above pages */
}
body {
	color: #fff;
	font: 50% "Helvetica Neue", Arial, Helvetica, sans-serif; /* base font size 1em (10px)*/
	padding: 22px 0 0;
}


body.work,
body.method {
	overflow-x: hidden;
}

@font-face {
	font-family: 'ITCLubalinGraphStdDemi';
	src: url('../fonts/lubalingraphstd-demi-webfont.eot');
	src: local('☺'), 
		url('../fonts/lubalingraphstd-demi-webfont.woff') format('woff'),
		url('../fonts/lubalingraphstd-demi-webfont.ttf') format('truetype'), 
		url('../fonts/lubalingraphstd-demi-webfont.svg#webfontlf7tp6VQ') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'LubalinGraphItcTOTMedium';
    src: url('/fonts/lubalingraphitctot-med-webfont.eot');
    src: url('/fonts/lubalingraphitctot-med-webfont.eot?iefix') format('eot'),
         url('/fonts/lubalingraphitctot-med-webfont.woff') format('woff'),
         url('/fonts/lubalingraphitctot-med-webfont.ttf') format('truetype'),
         url('/fonts/lubalingraphitctot-med-webfont.svg#webfontlI496xLc') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* =[COM] Common Formatting ===== */
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	color: #fff;
}
h1 {
	font-size: 2.4em;
	line-height: 1;
	text-transform: uppercase;
	margin: 0 0 25px;
}
h2 {
	font-size: 1.8em;
	margin: 0 0 20px;
}
h3 {
	font-size: 1.5em;
	line-height: 1;
	margin-bottom: 1em;
}
h4 {
	font-size: 1.3em;
	line-height: 1.25;
	margin-bottom: 1.25em; 
	text-transform: uppercase;
}
h5 {
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 1.5em;
}
h6 {
	font-size: 1em;
	font-weight: bold;
}
h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img {
	margin: 0;
}
p {
	font-size: 1.4em;
	line-height: 1.285em;
	margin: 0 0 2em; 
}
blockquote {
	color: #a7d019;
}
article, section, aside {
	display: block
}
strong {
	font-weight: bold;
}
em, dfn {
	font-style: italic;
}
dfn {
	font-weight: bold;
}
sup, sub {
	line-height: 0;
}
abbr, acronym {
	border-bottom: 1px dotted #666;
}
address {
	margin: 0 0 1.5em;
	font-style: italic;
}
del {
	color: #666;
}
pre {
	margin: 1.5em 0;
	white-space: pre;
}
pre, code, tt {
	font: 1em 'andale mono', 'lucida console', monospace;
	line-height: 1.5 !important;
	/*white-space: pre-wrap; /* css-3 */ /*white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	/*white-space: -pre-wrap; /* Opera 4-6 */
	/*white-space: -o-pre-wrap; /* Opera 7 */
	/*word-wrap: break-word; /* Internet Explorer 5.5+ */
	color: #fff; 
	background-color: rgba(0,0,0,0.05); 
	border: 1px dashed rgba(0,0,0,0.5); 
	display: block; margin: 30px; 
	padding: 20px; font-size: 13px; 
	overflow-x: auto;
}
pre::-webkit-scrollbar { 
	width: 0; 
	height: 8px; 
} 
pre::-webkit-scrollbar-button { 
	display: none; 
}
pre::-webkit-scrollbar-thumb { 
	background: #ccc; 
	-webkit-border-radius: 4px; 
}
article p code, li code {
	display: inline;
	margin: 0; 
	padding: 1px; 
	border-color: #ccc;
}
li ul, li ol {
	margin: 0;
}
ul, ol {
	margin: 0 1.5em 1.5em 0;
}
ul {
	list-style: disc;
}
ol {
	list-style: decimal;
}
dl {
	margin: 0 0 1.5em 0;
}
dl dt {
	font-weight: bold;
}
dd {
	margin-left: 1.5em;
}


/* =[LIN]= Links ===== */
a:focus {
	color: #333;
}
a {
	color: #a7d019;
	font-weight: 700;
	text-decoration: none;
}
a:hover {
	color: #333;
	background: #a7d019;
}


/* =[FOR]= Forms ===== */
label {
	font-weight: bold;
}
fieldset {
	padding: 1.4em;
	margin: 0 0 1.5em 0;
	border: 1px solid #ccc;
}
legend {
	font-weight: bold;
	font-size: 1.2em;
}
input[type=text],input[type=password], 
input.text, input.title, 
textarea, select {
	background-color: #fff;
	border: 1px solid #bbb;
}
input[type=text]:focus, input[type=password]:focus, 
input.text:focus, input.title:focus, 
textarea:focus, select:focus {
	border-color: #666;
}
input[type=text], input[type=password], 
input.text, input.title, 
textarea, select {
	margin: 0.5em 0;
}
input.text,
input.title {
	width: 140px;
	padding: 5px;
}
input.title {
	font-size: 1.5em;
}
textarea {
	width: 390px;
	height: 250px;
	padding: 5px;
}
input[type=checkbox], input[type=radio], 
input.checkbox, input.radio {
	position:relative;
	top: .25em;
}
form.inline {
	line-height: 3;
}
form.inline p {
	margin-bottom: 0;
}
.error, .notice, .success,
.error-msg, .success-msg, .note-msg, .notice-msg {
	padding: .8em;
	margin-bottom: 1em;
	border: 2px solid #ddd;
}
.error, .error-msg {
	background: #FBE3E4;
	color: #8a1f11;
	border-color: #FBC2C4;
}
.notice, .note-msg, .notice-msg {
	background: #FFF6BF;
	color: #514721;
	border-color: #FFD324;
}
.success, .success-msg {
	background: #E6EFC2;
	color: #264409;
	border-color: #C6D880;
}
.error a {
	color: #8a1f11;
}
.notice a {
	color: #514721;
}
.success a {
	color: #264409;
}


/* =[TAB]= Tables ===== */
table {
	margin-bottom: 1.4em;
	width: 100%;
}
th {
	font-weight: bold;
}
thead th {
	background: #c3d9ff;
}
th, td, caption {
	padding: 4px 10px 4px 5px;
}
tr.even td {
	background: #e5ecf9;
}
tfoot {
	font-style: italic;
}
caption {
	background: #eee;
}


/* =[GLC]= Global Classes ===== */
.clear { display: block; height: 0; line-height: 0; font-size: 0; clear: both; overflow:hidden; }
.hide {display: none;}
.quiet {color: #666;}
.loud {color: #000;}
.highlight {background: #ff0;}
.added {background: #060;color: #fff;}
.removed {background: #900;color: #fff;}

/* =[WRA]= Wrapper ===== */

.upper {
	width: 978px;
	margin: 0 auto;
}

.lower {
	background: url(/images/assets/sub-content.png) top left repeat;
	border-top: 1px solid #515151;
	padding: 70px 0 0;
} 

/* =[HEA]= Header ===== */

#header {
	width: 978px;
	height: 133px;
}

#logo {
	width: 220px;
	height: 35px;
	float: left;
}
#logo a{
	width: 220px;
	height: 35px;
	display: block;
	background: url(/images/assets/logo.png) no-repeat top left;
	text-indent: -9999px;
}


/* =[NAV]= Nav ===== */

#nav {
	overflow:hidden;
	font-size: 1.2em;
	float: right;
	text-transform: uppercase;
	margin: 4px 0 0;
}

#nav li {
	float: left;
	list-style: none;
	margin: 0 0 0 20px;
}

#nav li a {
	text-decoration: none;
	padding: 8px 10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	color: #fff;
	display: block;
}

#nav li a.last {
	color: #a7d019;
}
#nav li:last-child a {
	color: #a7d019;
}

#nav li a:hover,
#nav li a.active {
	background: #a7d019;
	color: #333;
}


/* =[CON]= Content ===== */

#content {
	width: 978px;
	margin: 0 auto;
	padding: 0 0 25px;
}

#content-left {
	float: left;
}

#content-right {
	float: right;
}


/* index */

.intro-left {
	width: 510px;
	float: left;
}

.intro-right {
	width: 460px;
	float: right;
	margin: -43px 0 -35px;
	height: 518px;
	overflow: visible;
}

#bottle {
	height: 541px;
	width: 446px;
	background: url(/images/assets/bottle/bottle.png) top left no-repeat;
	position: relative;
}

#bottle .sprite {
	height: 541px;
	width: 446px;
	background-image: url(/images/assets/bottle/sprite.png); 
	background-position: 0 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5
}

#bottle .sprite_background {
	height: 541px;
	width: 446px;
	background-image: url(/images/assets/bottle/sprite.png); 
	background-position: 0 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1
}

#bottle a {
	position: absolute;
	display: block;
	text-indent: -9999em;
	overflow: hidden;
	z-index: 10;
}
#bottle a:hover {
	background-color: transparent;
}

#bottle a.strategy {
	height: 91px;
	left: 108px;
	top: 151px;
	width: 104px;
	
}
#bottle a.brand {
	height: 82px;
	left: 235px;
	top: 181px;
	width: 87px;
}
#bottle a.email {
	height: 66px;
	left: 209px;
	top: 263px;
	width: 66px;
}
#bottle a.web {
	height: 80px;
	left: 124px;
	top: 249px;
	width: 79px;
}
#bottle a.design {
	height: 79px;
	left: 169px;
	top: 330px;
	width: 78px;
}
#bottle a.user {
	height: 84px;
	left: 84px;
	top: 330px;
	width: 77px;
}
#bottle a.content {
	height: 91px;
	left: 127px;
	top: 414px;
	width: 98px;
}
#bottle a.search {
	height: 100px;
	left: 247px;
	top: 384px;
	width: 69px;
}

#bottle .sprite.strategy {
	background-position: 0 -2705px
}
#bottle .sprite.brand {
	background-position: 0 -541px;
}
#bottle .sprite.email {
	background-position: 0 -2164px;
}
#bottle .sprite.web {
	background-position: 0 -4328px;
}
#bottle .sprite.design {
	background-position: 0 -3246px;
}
#bottle .sprite.user {
	background-position: 0 -1082px;
}
#bottle .sprite.content {
	background-position: 0 -1623px;
}
#bottle .sprite.search {
	background-position: 0 -3787px;
}


/* about */

.upper .header,
.lower .header {
	text-align: center;
	border-bottom: 6px solid #a7d019;
	margin: 0 0 40px;
}

.upper .header .replace {
	margin: 20px 0 15px;
	text-transform: none;
	font-size: 2.2em;
	line-height: 1.27em;
}

.testimonials {
	width: 326px;
	position: relative;
	height: 100px;
}

.testimonials.left {
	float: left;
}

.testimonials.left blockquote,
.testimonials.right blockquote {
	position: absolute;
}

.testimonials blockquote p {
	margin: 0 0 10px;
}

.testimonials blockquote .author {
	color: #999;
	margin: 0;
}

.testimonials.left .small {
	background: url(/images/assets/left-small.png) top left no-repeat;
	top: 26px;
	left: 4px;
	padding: 17px 40px 56px 22px;
	width: 260px;
	height: 47px;
}

.testimonials.left .big {
	background: url(/images/assets/left-big.png) top left no-repeat;
	top: 241px;
	left: 54px;
	padding: 33px 55px 25px 25px;
	width: 170px;
	height: 275px;
}

.testimonials.right {
	float: right;
}

.testimonials.right .small {
	background: url(/images/assets/right-small2.png) top left no-repeat;
	top: 360px;
	right: 29px;
	padding: 85px 30px 28px 48px;
	width: 199px;
	height: 206px;
}

.testimonials.right .big {
	background: url(/images/assets/right-big.png) top left no-repeat;
	top: 26px;
	right: 105px;
	padding: 18px 20px 35px 48px;
	width: 140px;
	height: 225px;
}

.about {
	width: 286px;
	padding: 0 15px;
	text-align: center;
	float: left;
}

.about .replace {
	margin: 0 0 10px;
	color: #a7d019;
	text-transform: uppercase;
}

.about p {
	margin: 0 0 35px;
}


/* work */

.featured {
	position: relative;
	height: 395px;
	padding: 65px 0 0;
}


.featured img {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 0 7px;
	border-bottom: 3px solid #a7d019;
	margin: 0 0 30px;
}

.featured h1 {
	position: relative;
	z-index: 10;
	float: right;
	margin: 0;
}

.featured h1 a,
.featured h2 {
	position: relative;
	z-index: 10;
	float: right;
	width: 303px;
	padding-left: 20px;
}

.featured h1 a {
	display: block;
	margin: 0;
	line-height: 2.22em;
	color: #fff;
	background: #333 url(/images/assets/arrow-w.png) 271px 9px no-repeat;
}

.featured h1 a:hover {
	color: #a7d019;
	background: #333 url(/images/assets/arrow-gn.png) 271px 9px no-repeat;
}

.featured h2 {
	clear: both;
	background: #a7d019;
	color: #333;
	font-weight: 400;
	line-height: 1.85em;
}

.featured p {
	width: 465px;
	position: absolute;
	top: 365px;
	right: 10px;
}

.featured a {
	color: #000;
}

/* work-item */

.work-item #content-left {
	float: left;
	width: 602px;
}

.work-item #content-right {
	float: right;
	width: 326px;
	padding: 70px 0 0;
}

/* method */

.method .intro {
	overflow: hidden;
	margin: 0 0 15px;
	float: right;
	width: 580px;
	height: 30px
}

.method .intro p {
	width: 490px;
	margin: 0;
	color: #fff;
}

.cogs {
	height: 530px;
	position: relative;
	top: -20px;
}

.cogs .cog {
	position: absolute;
	text-align: center;
}

.cogs .cog h3 {
	text-transform: uppercase;
	margin: 0;
	text-shadow: 2px 2px 4px #000;
}

.cogs .cog h3 a,
.cogs .cog h3 a:hover {
	color: #fff;
	background: none;
	display: block;
}



.cogs .cog .image {
	position: absolute;
	z-index: -1;
	*left: 0;
}

.cogs .cog.one {
	top: 24px;
	left: 63px;
	width: 134px;
	height: 133px;
	color: #fff;
}

.cogs .cog.one h3 a {
	padding: 54px 0 0;
	width: 134px;
	height: 79px;
}

.cogs .cog.one .image {
	background: url(/images/assets/cog1.png) top left no-repeat;
	width: 134px;
	height: 133px;
}

.cogs .cog.one:hover .image {
	background-position: 0 -133px;
}



.cogs .cog.two {
	top: 122px;
	left: 147px;
	width: 176px;
	height: 182px;
}

.cogs .cog.two h3 a {
	padding: 83px 0 0;
	width: 176px;
	height: 99px;
}

.cogs .cog.two .image {
	background: url(/images/assets/cog2.png) top left no-repeat;
	width: 176px;
	height: 182px;
}

.cogs .cog.two:hover .image {
	background-position: 0 -182px;
}



.cogs .cog.three {
	top: 28px;
	left: 322px;
	width: 399px;
	height: 410px;
}

.cogs .cog.three .image {
	background: url(/images/assets/cog3.png) top left no-repeat;
	width: 399px;
	height: 410px;
}

/*
.cogs .cog.three:hover .image {
	background: url(/images/assets/cog3-hover.png) top left no-repeat;
}
*/



.cogs .cog.three ul {
	font-size: 2.1em;
	text-shadow: 2px 2px 4px #000;
	list-style: none;
	font-weight: 700;
	color: #a7d019;
	margin: 107px 0 0;
}

.cogs .cog.three ul.white {
	color: #fff;
	padding-top: 10px;
	line-height: 1.4em;
}

.cogs .cog.three li.sep {
	height: 1px;
	background: #757576;
	width: 36px;
	margin: 8px auto;
	*margin: 4px auto;
}

.cogs .cog.four {
	top: 49px;
	right: 100px;
	width: 176px;
	height: 182px;
}

.cogs .cog.four h3 a {
	padding: 83px 0 0;
	width: 176px;
	height: 99px;
}

.cogs .cog.four .image {
	background: url(/images/assets/cog4.png) top left no-repeat;
	width: 176px;
	height: 182px;
}

.cogs .cog.four:hover .image {
	background-position: 0 -182px;
}



.cogs .cog.five {
	top: 192px;
	right: 15px;
	width: 155px;
	height: 162px;
}

.cogs .cog.five h3 a {
	padding: 72px 0 0;
	width: 155px;
	height: 90px;
}

.cogs .cog.five .image {
	background: url(/images/assets/cog5.png) top left no-repeat;
	width: 155px;
	height: 162px;
}

.cogs .cog.five:hover .image {
	background-position: 0 -162px;
}

/*
 * Cogs Rotating
 */
.cogs .cog .rotate {
	-webkit-transition:-webkit-transform 40s ease-in-out;
	-moz-transition:-moz-transform 40s ease-in-out;
}

.cogs .cog .rewind {
	-webkit-transition:-webkit-transform 10s ease-out;
	-moz-transition:-moz-transform 10s ease-out;
}

.cogs .cog.one .rotate, .cogs .three .rotate,  .cogs .cog.five .rotate {
	-webkit-transform: rotate(1080deg);  
	-moz-transform: rotate(1080deg);  
}

.cogs .cog.two .rotate,.cogs .cog.four .rotate {
	-webkit-transform: rotate(-1080deg);  
	-moz-transform: rotate(-1080deg);  
}

.cogs .cog.one .rewind, .cogs .three .rewind,  .cogs .cog.five .rewind {
	-webkit-transform: rotate(0deg);  
	-moz-transform: rotate(0deg);  
}

.cogs .cog.two .rewind,.cogs .cog.four .rewind {
	-webkit-transform: rotate(0deg);  
	-moz-transform: rotate(0deg);  
}


.cogs .mome {
	position: absolute;
	bottom: 92px;
	left: 143px;
	text-transform: none;
	font-size: 3.4em;
	margin: 0;
}

.cogs .mome span {
	color: #a7d019;
}

.cogs .off-right {
	position: absolute;
	bottom: 25px;
	left: 370px;
	width: 485px;
	float: right;
	line-height: 1.25em;
	text-transform: none;
	padding: 8px 2500px 8px 30px;
	color: #333;
}

/* services */

.services-header {
	color: #999;
	font-size: 3.9em;
	padding: 0 0 25px;
	border-bottom: 1px solid #a7d019;
	margin: 0 0 100px;
	white-space: nowrap;
}

.services-header span {
	color: #a7d019;
}

.services-upper {
	margin: 0 0 50px;
}

.services-upper .brace {
	float: left;
	width: 110px;
	background: url(/images/assets/brace.png) top center no-repeat;
	height: 263px;
	margin: -15px 10px 0;
}

.services-upper .column {
	float: left;
	width: 265px;
	margin: 0 24px 0 0;
}

.services-upper .column.first {
	width: 290px;
	margin: 0;
}
.services-upper .column:first-child {
	width: 290px;
}

.services-upper .column.last {
	margin: 0;
}
.services-upper .column:nth-child(4) {
	margin: 0;
}

.services-upper .column h1 {
	text-transform: none;
	color: #a7d019;
}

.services-upper .ticks {
	font-size: 1.6em;
	list-style: none;
	margin: 0 0 0 20px;
}

.services-upper .ticks li {
	background: url(/images/assets/tick.png) left center no-repeat;
	padding: 0 0 0 35px;
	margin: 0 0 8px;
}

.services-upper .column h2 {
	margin: 0 0 10px;
}

.halftone {
	background: url(/images/assets/halftone.png) top left repeat-x;
	height: 70px;
	font-size: 3.4em;
	padding: 7px 0 0;
	color: #999;
	text-transform: none;
	text-align: center;
	margin: 0 0 10px;
}

.services-lower {
	margin: 0 0 100px;
	overflow: hidden;
}

.services-lower .column {
	float: left;
	width: 308px;
	margin: 0 27px 0 0;
	border-top: 8px solid #a7d019;
	border-bottom: 8px solid #a7d019;
	padding: 35px 0 15px;
}

.services-lower .column.last {
	margin: 0;
}
.services-lower .column:last-child {
	margin: 0;
}

.services-lower h1 {
	font-size: 2.2em;
	text-transform: none;
	color: #a7d019;
}

/* blog */

.blog #content-left {
	width: 634px;
}

.blog #content-right {
	width: 286px;
}

.blog .article {
	clear: both;
	margin: 38px 0 0;
}

.blog .article .heading {
	border-bottom: 3px solid #9c9c9c;
	position: relative;
	margin: 0 0 25px;
}

.blog .article .heading h1 {
	text-transform: none;
	color: #a7d019;
	margin: 0 0 12px;
}

.blog .article h2 {
	background: #000;
	padding: 3px 6px;
}

.blog .article .heading .date {
	position: absolute;
	right: 0;
	top: 4px;
	font-weight: 700;
}

.blog .article .details {
	overflow: hidden;
	margin: 0 0 15px;
}

.blog .article .details p {
	margin: 0;
}

.blog .article .details .author {
	float: left;
}

.blog .article .details .comments {
	float: right;
}

.blog .article img {
	padding: 6px;
	border: 1px solid #fff;
	background: #1b1b1c;
	margin: 0 0 0px;
}

.blog .article p {
	overflow: hidden;
}


.blog .author-info {
	background: #000;
	overflow: hidden;
	padding: 10px 20px;
	margin: 20px 0;
}

.blog .author-info .avatar {
	float: left;
	width: 75px;
	margin: 0 20px 0 0;
}

.blog .author-info .avatar img {
	padding: 0;
	border: 0;
	height: 75px;
	width: 75px;
	display: block;
	margin: 0;
}

.blog .author-info .bio {
	float: left;
	width: 499px;
}

.blog .author-info .bio h2 {
	text-transform: none;
	font-weight: 400;
	margin: 0 0 10px;
}

.blog .author-info .bio p {
	margin: 0 0 10px;
	font-size: 1.3em;
}

.blog #content-left .tags,
.blog .share {
	font-size: 1.2em;
	overflow: hidden;
	color: #fff;
	list-style: none;
}

.blog #content-left .tags li,
.blog .share li {
	float: left;
	margin: 0;
	padding: 0 8px 0 0;
}

.blog .share {
	border-top: 1px solid #fff;
	padding: 20px 0 0;
	margin: 5px 0 75px;
}

.blog .share li img {
	border: 0;
	padding: 0;
	margin: -1px 0 0;
}

.blog .comments .heading {
	border: 0;
	background: #4d4d4d;
	color: #fff;
	margin: 0;
	padding: 16px 25px 16px;
}

.blog .comments .heading h1 {
	margin: 0;
}

.blog .comments .comment {
	padding: 20px 0;
	overflow: hidden;
	border-bottom: 1px solid #fff;
}

.blog .comments .comment .avatar {
	width: 75px;
	height: 75px;
	margin: 0 20px;
	float: left;
}

.blog .comments .comment .comment-content {
	width: 455px;
	float: left;
}

.blog .comments .comment .comment-content .author {
	overflow: hidden;
	margin: 0 0 10px;
}

.blog .comments .comment .comment-content .author * {
	float: left;
	padding: 0 5px 0 0;
}

.blog .comments .comment .comment-content .author p {
	margin: 0;
}

.blog .comments form {
	margin: 30px 0 75px 95px;
}

.blog .comments form label {
	margin: 5px 20px 0;
	color: #fff;
	width: 50px;
	font-size: 1.2em;
	font-weight: 700;
	display: block;
	float: left;
}

.blog .comments form input[type="text"] {
	margin: 0 0 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	padding: 4px;
	background: transparent;
	color: #fff;
	font-size: 1.2em;
	width: 364px;
}

.blog .comments form textarea {
	margin: 0 20px 10px;
	width: 435px;
	height: 100px;
	border: 1px solid #ccc;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	padding: 4px;
	background: transparent;
	color: #fff;
	font-size: 1.2em;
}

.blog .comments form label.full {
	width: 400px;
	margin: 0 20px 10px;
}

.blog .comments form label.full input {
	margin: -1px 5px 0 0;
}

.blog .comments form p {
	margin: 0 20px 10px;
}

.blog .comments form input[name="captcha"] {
	margin: 0 20px 10px;
	width: 140px;
}

.blog .comments form input[type="submit"] {
	margin: 0 20px;
}

/*
.blog .comments form input[type="submit"] {
	margin: 0 20px;
	border: 1px solid #ccc;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	padding: 4px;
	background: #a7d019;
	color: #333;
	font-size: 1.2em;
	font-weight: 700;
	text-shadow: 1px 1px 1px #666;
	box-shadow: 1px 1px 5px #000;
	-moz-box-shadow: 1px 1px 5px #000;
	-webkit-box-shadow: 1px 1px 5px #000;
}

.blog .comments form input[type="submit"]:active {
	text-shadow: -1px -1px 1px #666;
	box-shadow: -1px -1px 5px #000;
	-moz-box-shadow: -1px -1px 5px #000;
	-webkit-box-shadow: -1px -1px 5px #000;
}
*/


.blog #content-right {

}

.blog #content-right .twitter,
.blog #content-right .rss {
	float: right;
	margin: 0 0 55px 15px;
}


.blog #content-right .heading {
	border-bottom: 3px solid #9c9c9c;
	margin: 0 0 2px;
	clear: both;
}

.blog #content-right .heading h1 {
	color: #9c9c9c;
	text-transform: none;
	margin: 0 0 12px;
}

.blog #content-right .categories {
	font-size: 1.8em;
	list-style: none;
	text-align: right;
	text-transform: uppercase;
	margin: 0 0 75px;
}

.blog #content-right .categories li {
	margin: 0 0 2px;
	clear: both;
	overflow: hidden;
}

.blog #content-right .categories li a {
	background: #a7d019;
	color: #fff;
	float: right;
	padding: 0 50px 0 15px;
	line-height: 2.15em;
	position: relative;
}

.blog #content-right .categories li a .arrow {
	position: absolute;
	top: 7px;
	right: 15px;
	width: 26px;
	height: 27px;
	background: url(/images/assets/arrow-wxs.png) top left no-repeat;
}

.blog #content-right .categories li a:hover {
	background: #fff;
	color: #a7d019;
}

.blog #content-right .categories li a:hover .arrow {
	background: url(/images/assets/arrow-gns.png) top left no-repeat;
}

.blog #content-right .tags {
	font-size: 1.8em;
	text-align: right;
	text-transform: uppercase;
	margin: 5px 0 75px;
}

.blog #content-right .tags li {
	float: right;
	margin: 0 0 0 30px;
}

.blog #content-right .authors {
	font-size: 1.4em;
	margin: 5px 0 75px;
	list-style: none;
}

.blog #content-right .authors li {
	margin: 0 0 5px;
	clear: both;
	overflow: hidden;
}

.blog #content-right .authors li a {
	color: #a7d019;
}

.blog #content-right .authors li a:hover {
	color: #333;
}

.blog #content-right .authors li img {
	display: block;
	float: left;
	margin: 0 10px 0 0;
}



/* static */

.static #content-left {
	width: 634px;
}

.static #content-left ul {
	font-size: 1.4em;
	line-height: 1.285em;
	padding: 0 0 0 25px;
}

.static #content-left ul ul {
	margin: 5px 0 0;
	font-size: 1em;
	line-height: 1.285em;
}

.static #content-right {
	width: 286px;
}



/* ===== LOWER ===== */

#sub-content {
	width: 978px;
	margin: -25px auto 70px;
}

/* index */

.slider {
	display: block;
	border-bottom: 17px solid #cc6600;
	margin: 0 0 52px;
}

.slider:hover {
	background: none;
	border-bottom: 17px solid #a7d019;
}

.slider h1 {
	color: #fff;
	margin: 0 0 25px;
}

.slider:hover h1 {
	color: #a7d019;
}

.slider .client-logos {
	margin: 0 -14px 20px;
	padding: 0;
	overflow: hidden;
}

.client-logos li {
	float: left;
	list-style: none;
	margin: 0 4px;
}

.client-logos li:first-child{
	margin-left: 14px;
}


.index #content-left {
	float: left;
	width: 655px;
}

.index #content-right {
	float: right;
	width: 280px;
}

.home #content-right {
	position: relative;
}

.circles {
	margin: 0 -12px;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.7em;
	text-align: center;
	list-style: none;
	border-right: 1px solid #09d2d9;
	overflow: hidden;
	width: 670px;
}

.circles li {
	height: 139px;
	width: 140px;
	margin: 0 12px;
	float: left;
}

.circles li a {
	display: block;
	background: url(/images/assets/home-circles.png) bottom left no-repeat;
	color: #fff;
/* 	DEMI
	padding: 58px 0 59px; */
/* 	MEDIUM */
	padding: 60px 0 59px; 
	text-decoration: none;
}

.circles li a:hover,
.circles li a.active {
	background: url(/images/assets/home-circles.png) top left no-repeat;
}

#how-description{
	width: 250px;
	font-size: 1.8em;
	font-weight: 700;
	margin: 61px 64px 0 16px;
	position: absolute;
	top: -5px;
	right: -24px;
}

.how {
	font-size: 1.8em;
	margin: 0 0 0;
	color: #a7d019;
	font-weight: 700;
	display: none;
	position: absolute;
	right: -10px;
	top: 55px;
	width: 280px;
	height: 500px;
	list-style: circle;
}

.how li {
	margin: 0 0 2px;
}

/* about */

.header h1 {
	font-size: 4em;
}

.cta-block {
	overflow: hidden;
	margin: 0 0 15px 297px;
	padding: 20px 0 20px 20px;
	border-top: 1px dotted #666;
	width: 372px;
	height: 30px;
}

.cta-block .review {
	color: #b21563;
}

.team {
	font-size: 1em;
	list-style: none;
	margin: 0;
}

.team li {
	float: left;
	margin: 0 20px 0 0;
	width: 146px;
}

.team li.last {
	margin: 0;
}
.team li:last-child {
	margin: 0;
}


.team li img {
	box-shadow: 5px 5px 5px #000;
	margin: 0 0 15px;
}

.team li h2 {
	font-weight: 400;
	color: #a7d019;
	margin: 0;
}

.team li p {

}

.team li h4 {
	margin: 0;
}

.team li .stars {
	display: block;
	height: 13px;
	margin: 6px 0;
	background: url(/images/assets/star.png) top left repeat-x;
}

.stars.one {
	width: 16px;	
}
.stars.two {
	width: 32px;
}
.stars.three {
	width: 48px;
}
.stars.four {
	width: 64px;
}
.stars.five {
	width: 80px;
}


/* work */

.projects {
}

.projects h1.heading {
	color: #333;
	background: #a7d019;
/* 	background: #a7d019 url(/images/assets/our-work.png) top left no-repeat; */
	width: 214px;
	padding: 12px 0 12px 16px;
	margin: -71px 0 35px;	
	text-transform: none;
}

.projects .work-list {
	list-style: none;
	margin: 0;
	display: block;
}

.projects .work-list .work-piece {
	margin: 0 18px 33px 0;
	position: relative;
	height: 190px;
	width: 231px;
	float: left;
}

.projects .work-list .work-piece.last {
	margin: 0 0 33px;
}
.projects .work-list .work-piece:nth-child(4n) {
	margin: 0 0 33px;
}

.projects .work-list .work-piece .over {
	background: #a7d019 url(/images/assets/arrow-bs.png) 194px 150px no-repeat;
	height: 190px;
	width: 215px;
	padding: 0 0 0 16px;
	position: relative;
	display: block;
	color: #fff;
	font-weight: 400;
}

.projects .work-list .work-piece .over h1 {
	background: #000;
	font-weight: 400;
	color: #fff;
	text-transform: none;
	margin: 0 0 10px -16px;
	font-size: 1.6em;
	line-height: 1em;
	padding: 13px 0 13px 16px;
}

.projects .work-list .work-piece .over p {
	color: #333;
}

.projects .work-list .work-piece .over img {
	width: 231px;
	height: 148px;
	position: absolute;
	z-index: 10;
	top: 42px;
	left: 0;
}

.projects .work-list .work-piece .over:hover img {
	display: none;
}

.projects .work-list .work-piece .over ul {
	font-size: 1.4em;
	line-height: 1.4em;
	color: #000;
	margin: 0 0 0 16px;
}

.projects .work-list .work-piece .over p {
	color: #000;
}

.projects .work-list .work-piece .over .button {
	position: absolute;
	bottom: 0;
	height: 55px;
	width: 231px;
	padding: 0;
	margin: 0 0 0 -16px;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	text-indent: -9999px;
	background: #a7d019 url(/images/assets/arrow-b.png)  178px 10px no-repeat;
}

/* work item */

.work-item #content-left img {
	position: relative;
	z-index: 10;
	margin: 0 0 50px;
}

.work-item #content-right .next {
	text-align: right;
	line-height: 1.5em;
	margin: -70px 0 43px;
}

.work-item #content-right .next a {
	color: #a0a0a0;
	background: url(/images/assets/arrow-g.png) right center no-repeat;
	padding: 3px 35px 3px 0;
}

.work-item #content-right .next a:hover {
	color: #A7D019;
	background: url(/images/assets/arrow-gns.png) right center no-repeat;
}

.work-item #content-right h1 {
	text-transform: none;
	width: 326px;
	padding-right: 0; 
	margin-bottom: 30px;
}

.work-item #content-right h2 {
	color: #a7d019;
	margin: 0 0 5px;
	font-weight: 400;
}

.work-item #content-right p {
	margin: 0 0 15px;
}

.work-item #content-right .sep {
	height: 1px;
	background: #4f4f4f;
	margin: 0 0 15px;
}

.work-item #content-right .view {
	text-align: right;
	padding: 0;
	line-height: 1.6em;
	margin: 0 0 43px;
	text-transform: uppercase;
}

.work-item #content-right .view a {
	padding: 3px 40px 3px 0;
	background: url(/images/assets/arrow-gns.png) right center no-repeat;
	color: #A7D019;
}

.work-item #content-right .view a:hover {
	background: url(/images/assets/arrow-ws.png) right center no-repeat;
	color: #fff;
}

/* method */

.method #content-left h1 {
	text-transform: none;
}

.method #content-left,
.method #content-right {
	width: 466px;
}


/* contact */

.contact #content-left h1 {
	text-transform: none;
}

.contact #content-left,
.contact #content-right {
	width: 466px;
}

.contact .details,
.contact .map,
.contact .gmap {
	float: left;
	width: 300px;
	height: 357px;
	margin: 0 0 50px;	
}

.contact .details {
	margin: 0 10px 0 0;
}

.contact .map {
	margin: 0 65px 0 0;
}

.contact .details .off-left {
	margin-bottom: 30px;
}

.contact .details .phone {
	font-size: 3.6em;
	clear: both;
	color: #a7d019;
	margin: 0 0 15px;
}

.contact .details p {
	font-size: 1.6em;
}

.contact .off-left.pink {
	margin-bottom: 20px;
}

/* =[FOO]= Footer ===== */
#footer{
	margin: 0 auto 0;
	width: 978px;
}

#footer .columns {
	background: #333;
	padding: 47px 30px;
	overflow: hidden;
	
}

#footer .column {
	width: 278px;
	float: left;
	margin: 0 42px 0 0;
	position: relative;
}

#footer .column .rss,
#footer .column .twitter {
	position: absolute;
	right: 0;
	top: 0;
}

#footer .column.last {
	margin: 0;
}
#footer .column:last-child {
	margin: 0;
}

#footer .column p.phone {
	font-size: 3.6em;
	margin-bottom: 20px;
}

#footer .column .posts {
	font-size: 1.25em;
	list-style: none;
	margin: -10px 0 10px;
}

#footer .column .posts li {
	border-bottom: 1px solid #4c4c4c;
	padding: 10px 0;
}

#footer .column .posts li.last {
	border: 0;
}
#footer .column .posts li:last-child {
	border: 0;
}

#footer .column p {
	font-size: 1.25em;
}

#footer .foot-address p {
	font-size: 1.6em;
}

#footer .copy {
	padding: 20px 30px;
	background: url(/images/assets/ee-pro.png) 713px 18px no-repeat;
}

#footer .copy p {
	font-size: 1.1em;
	color: #aaa;
	margin: 0 0 5px;
}

#footer .copy ul {
	font-size: 1.1em;
	overflow: hidden;
	list-style: none;
	
}

#footer .copy li {
	padding: 0 10px 0 0;
	margin: 0 0 0 10px;
	float: left;
}

#footer .copy li.first {
	margin: 0;
/* 	border-right: 1px solid #aaa; */
}
#footer .copy li:first-child {
	margin: 0;
	/* border-right: 1px solid #aaa; */
}

#footer .copy li a {
	color: #fff;
}

#footer .copy li a:hover {
	background: none;
	text-decoration: underline;
}


/* =[CLA]= Classes ===== */

.wf-loading .replace {
  visibility: hidden;
}

.wf-active .replace, 
.wf-inactive .replace {
	visibility: visible;
	font-family: "LubalinGraphItcTOTMedium";
	font-weight: 400 !important;
}

.replace {
	font-family: "LubalinGraphItcTOTMedium";
	font-weight: 400 !important;
}

.replace a {
	font-weight: 400 !important;
}

h1.giant {
	font-size: 6.2em;
	line-height: 1.05em;
	color: #9c9c9c;
	text-transform: uppercase;
	margin: -10px 0 6px;
}

h1.giant.home {
	margin-top: 28px;
	font-size: 8.5em;
	color: #fff;
	margin-bottom: 20px;
	line-height: 0.9em;
}

h2 span.big {
	font-size: 1.4em;
	line-height: 1.75em;
	*clear: both;
	*width: 400px;
	*font-size:1.1em;
}

.off-left {
	margin: 0 0 4px -2500px;
	padding: 0 30px 0 2500px;
	float: left;
	line-height: 1.88em;
}

.off-right {
	margin: 0 -2500px 0 0;
	padding: 0 2500px 0 0;
	float: right;
}

.green {
	background: #a7d019;
}

.green-text {
	color: #a7d019;
}

.pink {
	background: #b21563;
	color: #fff;
}

.grey {
	background: #9c9c9c;
	color: #fff;
}

.italics {
	font-style: italic;
}

.button {
	padding: 8px 10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: none;
	background: #a7d019;
	display: block;
	float: left;
	color: #000;
	font-size: 1.25em;
}

.button:hover {
	background: #fff;
/* 	color: #a7d019; */
	color: #000;
}

.review {
	/* float: right; */
	font-size: 1.8em;
	line-height: 1.5em;
	text-transform: uppercase;
	padding: 5px 40px 5px 0;
	color: #b21563;
	background: url(/images/assets/arrow-ps.png) center right no-repeat;
	height: 30px;
}


.review:hover {
	background: url(/images/assets/arrow-gns.png) right center no-repeat;
	color: #A7D019;
}

a.rss:hover,
a.twitter:hover {
	background: none;
}

/* iPad fixes */

@media only screen and (device-width: 768px) {

	html {
		width: 1024px;
		overflow-x: hidden;
	}

}

/* iPhone 4 fixes */

@media only screen and (-webkit-min-device-pixel-ratio: 2) {


	html {
		width: 1024px;
		overflow-x: hidden;
	}

}

/* iPhone 3 fixes */

@media only screen and (max-device-width: 480px) and (-webkit-max-device-pixel-ratio: 1) {

	html {
		width: 1024px;
		overflow-x: hidden;
	}

}