/*=====================================================*/
/* Global Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, 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, caption, tbody, tfoot, thead {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	background: transparent;
	vertical-align:baseline;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
* {
	padding: 0;
	margin: 0;
}
html, body {
	height:100%;
	margin:0;
	padding:0;
}
header, nav, section, article, aside, footer {
	display: block;
}

.test {
	font-family:'Albertus W01';
}
/*=====================================================*/
/* Global Definitions */


#cda {
	position:absolute;
	top:30px;
	right:0px;
	z-index:994;
}
#cda a{
	width:86px;
	height:72px;
	text-indent:-8000px;
	display:block;
	background: url(../img/css-design-award-rhs.png) top left no-repeat;
}


#awwwards{
	position:absolute;
	top:110px;
	right:0px;
	z-index:994;
}
#awwwards a{
	width:69px;
	height:105px;
	text-indent:-8000px;
	display:block;
	background: url(../img/awwwards_siteoftheday_w_right.png) top left no-repeat;
}

body {
	background: #f1f2f2;
	width: 100%;
	margin: 0 auto;
	font: 13px arial, sans-serif;
	color: #455560;
	overflow-x: hidden;
}

.content {
	width: 70%;
	min-width: 980px;
	margin: 0 auto;
	z-index: 10;
}
p {
	margin: 15px 0px;
	line-height: 150%;
}
p.subtitle {
	font-size: 1.15em;
}

h1 {
	font-family: "BentonSans Light", "Helvetica Neue", Helvetica, Arial, Sans-serif;
  	font-style: normal;
  	font-weight: normal;
	text-decoration: none;
}
h2 {
	font-family: BentonSans, "Helvetica Neue", Helvetica, Arial, Sans-serif;
  	font-style: normal;
  	font-weight: normal;
}
h3, header nav > a {
	font-family: "BentonSans Medium", "Helvetica Neue", Helvetica, Arial, Sans-serif;
  	font-style: normal;
  	font-weight: normal;
}

h1 a, h2 a {
	text-decoration: none;	
}

.fullView .trigger.blue-button {
	height: 1px;
	display: none;
}

/*=====================================================*/
/* Layout */

#services, #work, #studio, #blog, #contact {
	width: 100%;
	min-width: 1150px;
	float: left;
	position: relative;
}

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

header {
	position: relative;
}

#logo {
	width: 314px;
	height: 106px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 999;
}
#logo a {
	display: block;
	width: 100%;
	height: 100%;
}
#logo span {
	display: none;
}

nav#nav {
	width: 100%;
	position: absolute;
	top: 40px;
	left: 0px;
}

nav#nav h1 img {
	margin-top: -14px;
}

nav#nav aside#top-links {
	width: auto;
	position: absolute;
	top: 0px;
	right: 0px;
	background: none;
	padding: 14px 0 0 0;
	z-index: 999;
}

nav#nav aside#navbar {
	width:100%;
	height: 50px;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.75);
	opacity: 0;
	z-index: 995;
}

nav#nav article.content {
	position: relative;	
}

nav#nav aside > a {
	display: block;
	float: left;
	padding: 5px 5px 15px;
	margin: 0px 0px 0px 30px;
	position: relative;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
}
nav#nav aside > a:hover {
	color: #00A4E3;
	padding: 0px 5px 5px 5px;
}


nav a h1 {
	display: none;
}

nav#nav .twitter {
	width: 38px;
	height: 33px;
	float: left;
	background: url(../img/bg_twitter.png) top left no-repeat;
	margin: -7px 5px 0px 15px;
	position: relative;
	z-index: 999;
	cursor: pointer;
	}
	.twitter > div {
		width: 330px;
		height: auto;
		padding: 15px 15px 20px 15px;
		position: absolute;
		top: 53px;
		right: -39px;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 5px;
		display: none;
	}


nav#nav .facebook {
	width: 38px;
	height: 33px;
	float: left;
	background: url(../img/bg_facebook.png) top left no-repeat;
	margin: -7px 5px 0px -10px;
	position: relative;
	z-index: 995;
	}
	.facebook > div {
		width: 330px;
		height: auto;
		padding: 15px 15px 20px 15px;
		position: absolute;
		top: 53px;
		right: -5px;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 5px;
		display: none;
	}
	.facebook iframe {
		margin-bottom: 10px;
	}
	
.smtab {
	display: block;
	width: 80%;
	
	height: 20px;
	background: url(../img/bg_smtab.png) bottom right no-repeat;
	position: absolute;
	top: -20px;
	}
	.twitter .smtab {
		right: 50px;
	}
	.facebook .smtab {
		right: 15px;
	}

/*=====================================================*/
	/* Services */

#services .skew, #studio .skew, #contact .skew {
	background: url(../img/bg_bluesection.jpg) bottom center no-repeat #0b1e2e;
}
#services p, #studio p, #contact p {
	color: #FFFFFF;
}
#work .skew, #blog .skew {
	background: #f1f2f2;
}
#services {
	height: 570px;
	z-index: 2;
}
#services .content {
	height: 100%;
	position: relative;	
}
#services .skew {
	height: 570px;
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 5;
}
#services header h1 {
	font-size: 50px;
	font-weight: 100;
	color: #00a4e3;
	text-shadow: 0px 9px 10px rgba(0, 0, 0, 0.7);
	margin-top: 150px;
	text-transform: uppercase;
}
#services header h1 a {
	color: #00a4e3;	
}
#services header p {
	width: 55%;
	min-width: 470px;
	margin-top: 8px;
}
#servicelist {
	width: 100%;
	height: 800px;
	margin-top: 130px;
	float: left;
	position: relative;
	opacity: 0;
}
#servicelist nav {
	width: 30%;
	height: 500px;
	background: url(../img/bg_servicenav.png) top right no-repeat;
	position: absolute;
	top: -54px;
	right: 700px;
	display: block;
	z-index: 999;
}
#servicelist nav a {
	position: absolute;
	right: -65px;
	width: 400px;
	}
	#servicelist nav a span {
		display: none;
	}
#servicelist nav a.brand {
	height: 40px;
	width: 178px;
	top: 51px;
	right: 64px;
	background: url(../img/bg_servicenav_brand_txt.png) top right no-repeat;
}
#servicelist nav a.web {
	width: 116px;
	height: 39px;
	top: 123px;
	right: 64px;
	background: url(../img/bg_servicenav_web_txt.png) top right no-repeat;
}
#servicelist nav a.photo {
	height: 40px;
	width: 182px;
	top: 202px;
	right: 64px;
	background: url(../img/bg_servicenav_photo_txt.png) top right no-repeat;
}
#servicelist nav a {
	position: absolute;
	display: block;
	opacity: 0.3;
}
#servicelist nav a.active {
	opacity: 1 !important;
}
#servicelist article {
	width: 555px;
	position: absolute;
	right: 160px;
	top: 0px;
	overflow: hidden;
	z-index: 999;
}
#servicelist h2 {
	color: #00a4e3;
	font-size: 21px;
	margin: 0px 0px 20px 0px;
}
#servicelist p {
	margin: 0px 0px 20px 0px;
}
#servicelist h2.large {
	font-size: 32px;
}


/*=====================================================*/
	/* The Sliding Runway */

.view-pane {
	width: 100%;
	z-index: 999;
	overflow: visible !important;
	float: left;
}
.track {
	width: 100%;
	overflow: visible !important;
	position: relative;
	float: right;
}
.track > div.project, .track > div.blog {
	width: 100%;
	float: right;
	margin-right: 0%;
	overflow: visible !important;
	position: relative;
	min-height: 100%;
}
.track > div.project {
	z-index: 999;
}
.open-project {
	min-height: 1000px;
}

.track .opacity {

	opacity: 0;
}

/*=====================================================*/
	/* Work Area */

#work {
	overflow: visible !important;
	min-height: 500px;
	z-index: 3;
}
#work .skew {
	height: 460px;
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 5;
}

#work h1, #blog h1 {
	font-size: 34px;
	color: #0b1e2e;
	text-transform: uppercase;
	background: transparent;
	}
	#work h1 {
		margin-top: 80px;
	}
	#blog h1 {
		margin-top: 30px;
	}


#work h1 a, #blog h1 a {
	color: #0b1e2e;
	background: transparent;
}

#work h2, #blog h2, #contact h2 {
	color: #00a4e3;
	font-size: 21px;
	padding: 15px 0;
}
#work h2 a, #blog h2 a {
	color: #00a4e3;	
}
#blog h2 {
	padding-bottom: 0px;	
}
#work .content {
	overflow: visible !important;
	position: static;
}
#work .content h3 {
	font-size: 14px;
	margin: 5px 0px;
}
#work .content ul {
	list-style: outside;
	list-style-type: none;
}
#work .content ul li {
	padding: 5px 0;
}
#work div.media-display aside {
	width: 715px;
	height: 500px;
	position: absolute;
	right: 0px;
	top: -15px;
	overflow: hidden;
	z-index: 999;
}
div.media-display {
	width:100%;
	position:relative;
	z-index:999;
}

/*=====================================================*/
	/* The Almighty Profile <div> */

div.profile {
	position: absolute;
	z-index: 50;
	display: block;	
}

#work .profile article {
	border-bottom: 10px solid rgba(0,0,0,0.02);
	padding: 0 0 10px 0;
	margin-bottom: 15px;
}
article p a, article li a {
	text-decoration: underline;
	font-weight: bold;
	color: #00A4E3;
}

/*=====================================================*/
	/* Side Navigation */

.sidenav {
	position: absolute;
	z-index: 999;
	width: 60px;
	overflow: hidden;
}
.sidenav.left {
	left: 0px;
}
.sidenav.right {
	right: 0px;	
}
.sidenav div {
	width: 60px;
	height: 45px;
	margin: 0 0 5px 0px;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 0px 3px 3px 0px;
	position: relative;
	float: left;
	clear: left;
	margin-left:-60px;
}
.sidenav.right div {
	border-radius: 3px 0px 0px 3px;
	float: right;
	clear: right;
	margin-left: 0px;
	margin-right:-60px;
}
.sidenav div.loader {
	margin: 0 0 10px -60px;
	background: url(../img/loader.gif) rgba(0, 0, 0, 0.7) no-repeat center !important;
}

.sidenav.right div.loader {
	margin: 0 -60px 10px 0;
	background: url(../img/loader.gif) rgba(0, 0, 0, 0.7) no-repeat center !important;
}

.sidenav div#reel {
	height: 0px;
	overflow: hidden;
}
.sidenav div#reel img {
	width: 40px;
	height: 40px;
	margin: 10px 10px 0 10px;
	float: left;
}
.sidenav div#reel img.loader {
	width: 24px;
	height: 24px;
	margin: 125px 10px 0 15px;
}
.sidenav .prev, .sidenav .next {
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/sidenav_prev.png) center no-repeat;
	float: left;
}
.sidenav .next {
	background: url(../img/sidenav_next.png) center no-repeat;
}
.sidenav .project {
	display: block;
	width: 40px;
	height: 40px;
	padding: 0px 0px 9px 0px;
}
.sidenav .project.active img {
	box-shadow: 0px 0px 8px #00a4e3;
	-webkit-box-shadow: 0px 0px 8px #00a4e3;
}
.sidenav .project img {
	box-shadow: 0px 0px 4px #000;
	-webkit-box-shadow: 0px 0px 4px #000;
	-webkit-transition: box-shadow 0.2s linear;
	-moz-transition: box-shadow 0.2s linear;
}
.sidenav .project:hover img {
	box-shadow: 0px 0px 8px #00a4e3;
	-webkit-box-shadow: 0px 0px 8px #00a4e3;
}
.sidenav .project:last-child {
	display: block;
	width: 40px;
	height: 40px;
	padding: 0px 0px 0px 0px;
}
.sidenav .open {
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/sidenav_open.png) center no-repeat;
	float: left;
}
a.image-open {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 501;
	text-decoration: none;
}
.sidenav .close {
	background: url(../img/sidenav_close.png) center no-repeat;
}
#studio article img {
	top: -30px;
}

/*=====================================================*/
	/* Studio */

aside.images {
	width: 715px;
	position: absolute;
	right: 0px;
	z-index: 100;
}
#studio aside.images {
	background: #0b1e2e;
	top: -28px;	
}
#contact aside.images {
	position: absolute;
	right: 0px;
	z-index: 100;
	top: -42px;
}

#studio {
	height: 350px;
	z-index: 4;
}
#studio article.content {
	height: 100%;	
}
#studio .skew {
	height: 350px;
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 5;
}

#studio h1, #contact h1 {
	text-transform: uppercase;
	font-size: 34px;
	color: #00a4e3;
	text-shadow: 0px 9px 10px rgba(0, 0, 0, 0.7);
	margin-top: 30px;
}
#studio h1 a, #contact h1 a {
	color: #00a4e3;		
}
#studio h2 {
	color: #00a4e3;
	font-size: 21px;
	margin: 20px 0px 10px 0px;
}

#tweet .smallinfo {
	display: block;
	clear: left;
	color: #266599;	
	}
	.blue-button {
		display: block;
		clear: left;
	}
	.tweet_text {
		color: #fff;
		line-height: 150%;
		}
		.tweet_text a {
			text-decoration: underline;
			font-weight: bold;
			color: #00A4E3;
		}
	.tweet_time a {
		display: block;
		clear: left;
		color: #40cef6;
		margin: 4px 0px 15px 0px;
		text-decoration: none;
	}
	.tweet_time a:hover {
		text-decoration: underline;
	}
	.blue-button, .contact-button, .follow-button, .fb-button {
		position: relative;
		text-decoration: none;
		text-transform: uppercase;
		background: #35c7f0;
		background-image: -webkit-gradient(
    	linear,
    	left bottom,
    	left top,
    	color-stop(0, rgb(19,178,222)),
    	color-stop(1, rgb(80,216,254))
		);
		background-image: -moz-linear-gradient(
    	center bottom,
    	rgb(19,178,222) 0%,
    	rgb(80,216,254) 100%
		);
		border: none;
		color: #fff;
		font-weight: bold;
		font-size: 11px;
		width: 32px;
		margin: 10px 0px;
		padding: 7px;
		box-shadow: inset 0px 1px 1px #a7ebff;
		cursor: pointer;
		text-shadow: 0px 1px 0px #096883;
		border-radius: 3px;
	}
	.blue-button:hover, .contact-button:hover, .follow-button:hover, .fb-button:hover {
		text-decoration: underline;
	}
	.contact-button span {
		font-size: 0px;
	}
	.blue-button {
		padding-left: 35px;
	}
	.blue-button span {
		position: absolute;
		width: 19px;
		height: 13px;
		left: 8px;
		top: 7px;
		background: url(../img/btn_view.png) top left no-repeat;
	}
	.view-site {
		width: 85px;
		padding-left: 27px;	
	}
	.view-site span {
		background: url(../img/btn_visitsite.png) top left no-repeat;		
	}
	.contact-button {
		padding-left: 31px;
	}
	.contact-button span {
		position: absolute;
		width: 16px;
		height: 13px;
		left: 8px;
		top: 7px;
		background: url(../img/btn_contact.png) top left no-repeat;
	}
	.follow-button {
		padding-left: 31px;
	}
	.follow-button span {
		position: absolute;
		width: 21px;
		height: 16px;
		left: 6px;
		top: 6px;
		background: url(../img/btn_twitter.png) top left no-repeat;
	}
	.fb-button {
		padding-left: 25px;
	}
	.fb-button span {
		position: absolute;
		width: 9px;
		height: 18px;
		left: 8px;
		top: 5px;
		background: url(../img/btn_facebook.png) top left no-repeat;
	}
	

#studio aside.images div {
	float: left;
	overflow: hidden;
}

#studiotop {
	width: 715px;
	height: 350px;
}

#studiobottom {
	width: 715px;
	height: 300px;
}


/*=====================================================*/
/* Blog */

.importantRule {
	overflow: visible !important;	
}

#blog {
	z-index: 5;
	position: relative;
	overflow: hidden;
}
#blog div.profile {
	overflow: hidden;
}

#blog .skew {
	height: 350px;
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 5;
}
#blog .view-pane {
	height: 350px;
}
#blog article.content {
	height: 340px;

}
#blog aside.images img {
	float: left;
}

#blog .images {
	top: 16px;
}

.fullView #blog-hider {
	height: 800px;	
}

#blog-hider {
	overflow: hidden;
	position: relative;
}

/*=====================================================*/
/* Contact Page */

#contact {
	background: url(../img/bg_bluesection.jpg) #0b1e2e bottom center no-repeat;
	height: 450px;
	padding: 0;
	position: relative;
	z-index: 6;
	float: left;
}
article .content {
	height: 100%;	
}
#contact .skew {
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 7;
}
#contact p {
	display: block;
	margin: 0 0 5px 0;
	float: left;
}
#contact p.title {
	font-weight: bold;
	min-width: 70px;
	clear: left;
	margin-right: 10px;
}

#contact small {
	color: #20c1ef;
	font-weight: bold;
}

#contact #map {
	width: 715px;
	height: 290px;
	overflow: hidden;
	background: url(../img/map.jpg) no-repeat;
	position: relative;
}

#contact div.profile {
	height: 250px;
	overflow: hidden;
}

#contact #juicebox {
	width: 715px;
	height: 480px;
	background: url(../img/map.jpg) no-repeat;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 999;
}

#contact iframe {
	position: relative;
	z-index: 2;
}

#contact-info {
	margin-top: 15px;	
}

#contact-form {
	width: 100%;
	opacity: 0;
	float: left;	
}

#contact-info a.blue-button {
	float: left;
	clear: left;
	margin-top: 15px;
}

form p {
	padding: 0px;
	margin: 0px;
}
input, textarea {
	background: rgba(0,0,0,0.2);
	border-radius: 3px;
	border: 1px solid #071723;
	color: #fff;
	padding: 8px;
	font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 95%;
}
form span {
	color: #7c868e;
	margin: 23px 0px 15px 10px;
	display: block;
	width: 10%;
	float: left;
}
form select {
	padding: 8px;
	margin: 21px 2% 15px 35px;
	width: 60%;
	float: right;
	border-radius: 5px;
	border: none;
	color: #7c868e;
}
@-webkit-keyframes error {
 0% {
   	background: #811b1b;
	opacity: 0.5;
 }
 100% {
   	background: rgba(0,0,0,0.2);
   	opacity: 1;
 }
}
.error {
	background: #811b1b;
	opacity: 0.5;
	-webkit-animation-name: error;
 	-webkit-animation-duration: 5s;
 	-webkit-animation-iteration-count: 1;
 	-webkit-animation-fill-mode: forwards;
}
#name {
	margin-top: 15px;	
}
#name, #number, #email {
	height: 17px;
	margin-bottom: 20px;
}
.submit {
	background: #35c7f0;
	background-image: -webkit-gradient(
    	linear,
    	left bottom,
    	left top,
    	color-stop(0, rgb(19,178,222)),
    	color-stop(1, rgb(80,216,254))
	);
	background-image: -moz-linear-gradient(
    	center bottom,
    	rgb(19,178,222) 0%,
    	rgb(80,216,254) 100%
	);
	border: none;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	width: 65px;
	margin: 15px 0px;
	padding: 6px;
	box-shadow: inset 0px 1px 1px #a7ebff;
	cursor: pointer;
	text-shadow: 0px 1px 0px #096883;	
	
	}
	.submit:hover {
		text-decoration: underline;
	}

textarea {
	max-height: 123px;
	max-width: 95%;
}

footer #footer {
	width: 100%;
	height: 50px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	background: rgba(0,0,0,0.75);
	z-index: 999;	
}

footer #footer article.content {
	position: relative;	
}

#controlbox {
	width: 200px;
	height: 26px;
	background: url(../img/controlbox.png) no-repeat;
	position: absolute;
	left: 0;
	top: 12px;
}

#subscribe {
	width: 300px;
	position: absolute;
	right: 415px;
	top: 10px;
}

#subscribe input[type=text] {
	width: 240px;	
	padding-right: 50px;
	color: #fff;
	font-weight: bold;
	font-size: 11px;
	box-shadow: inset 0px 1px 0px #000, 0px 1px 0px rgba(255, 255, 255, 0.2);
	-webkit-box-shadow: inset 0px 1px 0px #000, 0px 1px 0px rgba(255, 255, 255, 0.2);
}

#subscribe input[type=submit] {
	position: absolute;
	right: 3px;
	top: -11px;
}

#subscribe p {
	padding: 8px 0 0 4px;
	font-size: 11px;
}

a#credits {
	bottom: 0px;
	color: #00A4E3;
	font-weight: bold;
	height: 15px;
	opacity: 0;
	padding-top: 17px;
	padding-left: 18px;
	position: absolute;
	right: 18%;
	text-align: center;
	width: 100px;
	background: url(../img/btn_credits.png) 3px 17px no-repeat;
}


p.copyright {
	position: absolute;
	right: 0px;
	top: 15px;
}

#navbar #credit-focus {
	width: 100%;
	margin-top: 100px;
	height: 80%;
	min-width: inherit;
	overflow: hidden;
	position: relative;
	float: left;
	color: #fff;
}

#credit-focus #credit-roll {
	width: 100%;
	display: none;
	color: #fff;
	height: 300px;
}

#credit-roll p {
	text-align: center;	
	line-height: 150%;
	font-size: 18px;
	text-transform: uppercase;
	font-family: BentonSansCond;
  	font-style: normal;
  	font-weight: bold;
	}
	#credit-roll p span {
		font-size: 12px;
		font-family: BentonSansCond;
  		font-style: normal;
  		font-weight: normal;
	}

#credit-roll p.logos {
	margin-top: 150px;	
}

/*=====================================================*/
/* Juice, Goo & Blur */
	
#services .skew > .one {
	width: 55%;
	height: 100%;
	background: url(../img/juice_services_1.png) 100% 0px no-repeat;
	position: absolute;
	top: -1%;
	right: 85%;
	z-index: 100;
}
#services .skew > .two {
	width: 45%;
	height: 100%;
	background: url(../img/juice_services_2.png) 100% 0px no-repeat;
	position: absolute;
	top: -5%;
	right: 85%;
	z-index: 110;
}
#services .skew > .three {
	width: 40%;
	height: 100%;
	background: url(../img/juice_services_3.png) 0% 0px no-repeat;
	position: absolute;
	top: -10%;
	left: 78%;
	z-index: 110;
}
#servicelist .one {
	width: 492px;
	height: 100%;
	background: url(../img/juice_services_txt2.png) 0% 0px no-repeat;
	position: absolute;
	top: 28%;
	right: 54%;
	z-index: 1;
}
#servicelist .two {
	width: 434px;
	height: 100%;
	background: url(../img/juice_services_txt1.png) 0% 0px no-repeat;
	position: absolute;
	top: 10%;
	right: 71%;
	z-index: 110;
}
#servicelist .four {
	width: 264px;
	height: 100%;
	background: url(../img/juice_services_txt3.png) 0% 0px no-repeat;
	position: absolute;
	top: -3%;
	right: -8%;
	z-index: 110;
}
#work .one {
	width: 40%;
	height: 100%;
	background: url(../img/juice_work_1.jpg) 100% 0px no-repeat;
	border: 1px solid #f1f2f2;
	position: absolute;
	top: 0%;
	right: 90%;
	z-index: 1;
}
#work .two {
	width: 40%;
	height: 100%;
	background: url(../img/juice_work_2.jpg) 0% 0px no-repeat;
	border: 1px solid #f1f2f2;
	position: absolute;
	top: -15%;
	left: 75%;
	z-index: 1;
}
#studio .one {
	width: 40%;
	height: 150%;
	background: url(../img/juice_studio_1.png) 100% 0px no-repeat;
	position: absolute;
	top: 12%;
	right: 82%;
	z-index: 1;
}
#studio .two {
	width: 40%;
	height: 200%;
	background: url(../img/juice_studio_2.png) 100% 0px no-repeat;
	position: absolute;
	top: -31%;
	right: 85%;
	z-index: 5;
}
#blog > .skew .one {
	width: 40%;
	height: 300%;
	background: url(../img/juice_blog_1.jpg) 100% 0px no-repeat;
	border: 1px solid #f1f2f2;
	position: absolute;
	top: -12%;
	right: 83%;
	z-index: 1;
}
#blog > .skew .two {
	width: 40%;
	height: 200%;
	background: url(../img/juice_blog_2.jpg) 100% 0px no-repeat;
	border: 1px solid #f1f2f2;
	position: absolute;
	top: -15%;
	left: 65%;
	z-index: 5;
}

/*=====================================================*/
/* <aside> Skews */

#services .skew {
	-webkit-transform-origin: 0 0;
	-webkit-transform: skew(0deg, -2deg) translate3d(0px, 0px, 0);
	-moz-transform-origin: 0 0;
	-moz-transform: skew(0deg, -2deg);
	-o-transform-origin: 0 0;
	-o-transform: skew(0deg, -2deg);
	-ms-transform-origin: 0 0;
	-ms-transform: skew(0deg, -2deg);
	overflow: hidden;

	width: 100%;
}
#work {
	margin-top: -6%;
}

#work .skew {
	overflow: hidden;
	-webkit-transform-origin: 0 0;
	-webkit-transform: skew(0deg, 1deg) translate3d(0px, 0px, 0);
	-moz-transform-origin: 0 0;
	-moz-transform: skew(0deg, 1deg);
	-o-transform-origin: 0 0;
	-o-transform: skew(0deg, 1deg);
	-ms-transform-origin: 0 0;
	-ms-transform: skew(0deg, 1deg);

	width: 100%;
}
#studio {
	margin-top: -6%;
}
#studio .skew {
	overflow: hidden;
	-webkit-transform-origin: 0 0;
	-webkit-transform: skew(0deg, -1deg) translate3d(0px, 0px, 0);
	-moz-transform-origin: 0 0;
	-moz-transform: skew(0deg, -1deg);
	-o-transform-origin: 0 0;
	-o-transform: skew(0deg, -1deg);
	-ms-transform-origin: 0 0;
	-ms-transform: skew(0deg, -1deg);

}
#blog {
	margin-top: -6%;
}
#blog .skew {
	overflow: hidden;
	-webkit-transform-origin: 0 0;
	-webkit-transform: skew(0deg, 1deg) translate3d(0px, 0px, 0);
	-moz-transform-origin: 0 0;
	-moz-transform: skew(0deg, 1deg);
	-o-transform-origin: 0 0;
	-o-transform: skew(0deg, 1deg);
	-ms-transform-origin: 0 0;
	-ms-transform: skew(0deg, 1deg);

}
#contact .skew {
	background: #0b1e2e;
	height: 66px;
	-webkit-transform-origin: 0 0;
	-webkit-transform: skew(0deg, -1.5deg) translate3d(0px, 0px, 0);
	-moz-transform-origin: 0 0;
	-moz-transform: skew(0deg, -1.5deg);
	-o-transform-origin: 0 0;
	-o-transform: skew(0deg, -1.5deg);
	-ms-transform-origin: 0 0;
	-ms-transform: skew(0deg, -1.5deg);
}


/*=====================================================*/
/* Resolution Independent Definitions 
. 	
1280x800
	175 	22.29% 	
2. 	
1680x1050
	90 	11.46% 	
3. 	
1920x1200
	81 	10.32% 	
4. 	
1440x900
	78 	9.94% 	
5. 	
1920x1080
	60 	7.64% 	
6. 	
1366x768
	52 	6.62% 	
7. 	
1024x768

*/

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

body {
 	width: 120%;
 	overflow-x: hidden !important;
 	max-width: 120%;
}

p {
	margin: 8px 0px;
}

#services header h1 {
	font-size: 46px;
}

#work h1, #blog h1, #studio h1, #contact h1 {
	font-size: 28px;
}

#work h2, #blog h2, #studio h2, #contact h2 {
	font-size: 18px;
	padding: 8px 0px;
}

#work {
 	overflow-x: hidden !important;
}

.content, .view-pane {
 	min-width: 960px;
 	max-width: 100%;
}

.sidenav {
 	left: 0px;
}

#work div.media-display aside {
	top: 7px;
}

#studio aside.images {
	top: -18px;
}

#blog .images {
	top: 6px;
}

#contact aside.images {
	top: -26px;
}

}

@media only screen and (min-width: 1px) and (max-width: 1024px) {

p {
	margin: 8px 0px;
}
 
#services header h1 {
	font-size: 46px;
}

#work h1, #blog h1, #studio h1, #contact h1 {
	font-size: 28px;
}

#work h2, #blog h2, #studio h2, #contact h2 {
	font-size: 18px;
	padding: 8px 0px;
}

#work div.media-display aside, aside.images, #contact aside.images {
	right: 70px;
}
 
div.profile {
	width: 15%;
}

.mail, .title {
	font-size: 11px;
}
 
#contact p.title {
	min-width: 49px;
	margin-right: 5px;
}
 
#work div.media-display aside {
	top: -10px;
}

#studio aside.images {
	top: -45px;
}

#blog .images {
	top: -15px;
}

#contact aside.images {
	top: -29px;
}
 
}







@media only screen and (min-width: 980px) and (max-width: 1280px) {

p {
	margin: 8px 0px;
}
 
#services header h1 {
	font-size: 42px;
}

#work h1, #blog h1, #studio h1, #contact h1 {
	font-size: 28px;
}

#work h2, #blog h2, #studio h2, #contact h2 {
	font-size: 18px;
	padding: 8px 0px;
}
 
div.profile {
	width: 15%;
}

.mail, .title {
	font-size: 11px;
}
 
#contact p.title {
	min-width: 49px;
	margin-right: 5px;
}
 
#work div.media-display aside {
	top: -10px;
}

#studio aside.images {
	top: -45px;
}

#blog .images {
	top: -15px;
}

#contact aside.images {
	top: -29px;
}
 
}










@media only screen and (min-width: 1281px) and (max-width: 1500px) {

#services header h1 {
	font-size: 46px;
}

div.profile {
	 width: 15%;
}
 
.mail, .title {
 	font-size: 11px;
}
 
#contact p.title {
 	min-width: 50px;
}

#work div.media-display aside {
	top: -20px;
}

#studio aside.images {
	top: -45px;
}

#blog .images {
	top: -15px;
}

#contact aside.images {
	top: -37px;
}

}

@media only screen and (min-width: 1501px) and (max-width: 1680px) {

div.profile {
 	width: 20%;
}

#work div.media-display aside {
	top: -20px;
}

#studio aside.images {
	top: -45px;
}

#blog .images {
	top: -15px;
}

#contact aside.images {
	top: -50px;
}

}

@media only screen and (min-width: 1681px) {

div.profile {
 	width: 25%;
}

#work div.media-display aside {
	top: -20px;
}

#studio aside.images {
	top: -50px;
}

#blog .images {
	top: -15px;
}

#contact aside.images {
	top: -58px;
}

}