/* iamryanhuntsinger v3.0 */

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
general
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 */

@font-face {
    font-family: 'Remi Regular';
    src: url('../webfonts/Remi-Regular.eot');
    src: url('../webfonts/Remi-Regular.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/Remi-Regular.woff') format('woff'),
         url('../webfonts/Remi-Regular.svg#Remi-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Remi Black';
    src: url('../webfonts/Remi-Black.eot');
    src: url('../webfonts/Remi-Black.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/Remi-Black.woff') format('woff'),
         url('../webfonts/Remi-Black.svg#Remi-Black') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Austin Roman';
	src: url('../webfonts/Austin-Roman.eot');
	src: url('../webfonts/Austin-Roman.eot?#iefix') format('embedded-opentype'),
		url('../webfonts/Austin-Roman.woff') format('woff'),
		url('../webfonts/Austin-Roman.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
 
.nav,
.fifty,
.quarter	{
	-webkit-transform: translateZ(0);
}
 
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
 
*	{
	-webkit-backface-visibility: hidden;
}

div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

img	{
	-webkit-transform: translateZ(0);
  	-moz-transform: translateZ(0);
  	-ms-transform: translateZ(0);
  	-o-transform: translateZ(0);
  	transform: translateZ(0);
  }

#title	{display:none;}

.clear:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clear {display: inline-block;}

/* start commented backslash hack */
* html .clearfix {
	height: 1%;
}
.clear {
	display: block;
	z-index:-20;
	position:relative;
}
/* close commented backslash hack */
::selection {
	color: #fff;
	background: #000;
}
::-moz-selection {
	color: #fff;
	background: #000;
}
.left {float: left;}
.right {float: right;}
.hundred.right{float:right !important;}
.none {clear: none !important;}
.positive	{
	z-index:1;
}
#universe {
	width: 100%;
	overflow: hidden;
	position: relative;
}
body,html {
	margin: 0;
	padding: 0;
}

html	{
	background:url('../images/work-bg.jpg');
	background-repeat: repeat;
	background-attachment: fixed;
}

h1,h2,h3,h4,h5,h6,p,a {font-weight: normal;}


.bold-weight	{font-family: Remi Black;}

.break-helper-mobile	{
	display:none;
}
	
.lazy-hidden {
    opacity: 0;
    top:100px;
}
.lazy-loaded {
    -webkit-transition: opacity 1.0s .2s, top .5s .2s;
    -moz-transition: opacity 1.0s .2s, top .5s .2s;
    -ms-transition: opacity 1.0s .2s, top .5s .2s;
    -o-transition: opacity 1.0s .2s, top .5s .2s;
    transition: opacity 1.0s .2s, top .5s .2s;
    opacity: 1;
    top:0px;
}

#loader	{
	position:fixed;
	height:12px;
	width:40px;
	top:50%;
	left:50%;
	margin-top:-6px;
	margin-left:-20px;
	z-index:9999;
	display:none;
	-webkit-transition: all 0.15s 0s ease;
	-moz-transition: all 0.15s 0s ease;
	-o-transition: all 0.15s 0s ease;
	-ms-transition: all 0.15s 0s ease;
	transition: all 0.15s 0s ease;
}



/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
nav
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 */
 
.mobile-menu	{
	text-indent: -9999px;
	display:none;
}
 
.nav {
	position: fixed;
	z-index: 2000;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	-webkit-transition: .2s top ease,height 0.2s 0s ease;
	-moz-transition: .2s top ease,height 0.2s 0s ease;
	-o-transition: .2s top ease,height 0.2s 0s ease;
	-ms-transition: .2s top ease,height 0.2s 0s ease;
	transition: top 0.2s ease,height 0.2s 0s ease;
}

.nav.hover	{
	height:175px;
}

.nav.atthetop	{
	height:60px;
}

.nav-container {
	position: relative;
	width: 77.4%;
	margin: 0 auto 0 auto;
	top: -123px;
	-webkit-transition: top 0.3s .2s ease;
	-moz-transition: top 0.3s .2s ease;
	-o-transition: top 0.3s .2s ease;
	-ms-transition: top 0.3s .2s ease;
	transition: top 0.3s .2s ease;
	display:block;
	max-width:1100px;
	font-size:15px;
}

.nav-container:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}



.nav.hover .nav-container,
.nav.atthetop .nav-container	{
	top: 24px;
	-webkit-transition: top 0s .0s ease;
	-moz-transition: top 0s .0s ease;
	-o-transition: top 0s .0s ease;
	-ms-transition: top 0s .0s ease;
	transition: top 0s .0s ease;
}

.list-item {
	float: left;
	list-style: none;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	position: relative;
	-webkit-transition: opacity 0.1s .1s ease;
	-moz-transition: opacity 0.1s .1s ease;
	-o-transition: opacity 0.1s .1s ease;
	-ms-transition: opacity 0.1s .1s ease;
	transition: opacity 0.1s .1s ease;
}

.list-item.mobile	{
	display:none;
}

.sub-list-item {
	float: left;
	list-style: none;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	position: relative;
	margin-left: 7px;
	-webkit-transition: opacity 0.1s 0s ease;
	-moz-transition: opacity 0.1s 0s ease;
	-o-transition: opacity 0.1s 0s ease;
	-ms-transition: opacity 0.1s 0s ease;
	transition: opacity 0.1s 0s ease;
}
.list-item a {
	color: #ea401f;
	font-family: 'Remi Regular';
	letter-spacing:4px;
	text-decoration: none;
	padding-bottom: 1px;
	position:relative;
	top:-1px;
	text-transform: uppercase;
}

.list-item a:after,
.about-mail-link:after {
      background-color: #fff200;
    bottom: 4px;
    content: "";
    display: block;
    height: 12px;
    margin: auto 0;
    position: absolute;
    top: 0;
    transition: width .2s;
    width: 0;
    left: -2px;
    z-index: -1;
}

.about-mail-link:after	{
	left:0;
	height:2px;
	bottom:-2px;
	transition: width .1s;
}

.list-item a:hover,
.list-item a.here	{
	color:#ea401f;
}

.list-item a:hover:after,
.list-item a.here:after,
a.about-mail-link:hover:after {
  width: 100%;
}

.about-mail-link	{
	position:relative;
}

p.list-item {
	color: #000;
	font-family: 'Remi Regular';
	position: relative;
	margin: 0 10px;
}

p.list-item.job-desc 	{
	margin: 0;
	text-transform: uppercase;
	font-family: 'Remi Black';
	letter-spacing:4px;
}

.sub-nav-list p {
	color: #ea401f;
	font-family: 'Remi Regular';
	letter-spacing:4px;
	float: left;
	position: relative;
	-webkit-transition: all 0.1s .0s ease;
	-moz-transition: all 0.1s .0s ease;
	-o-transition: all 0.1s .0s ease;
	-ms-transition: all 0.1s .0s ease;
	transition: all 0.1s .0s ease;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	top: -2px;
}
h1.work-title {
	color: #000;
	font-family: 'Remi Regular';
	letter-spacing:4px;
	float: left;
	clear: both;
	position: relative;
	-webkit-transition: all 0.1s .0s ease;
	-moz-transition: all 0.1s .0s ease;
	-o-transition: all 0.1s .0s ease;
	-ms-transition: all 0.1s .0s ease;
	transition: all 0.1s .0s ease;
	z-index: 1001;
	font-weight: normal;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
}
.sub-list-item a {
	color: #ea401f;
	font-family: 'Remi Regular';
	letter-spacing:4px;
	text-decoration: none;
	margin-right: 16px;
	float: left;
	position: relative;
	z-index: 1002;
	padding-bottom: 1px;
}
.sub-list-item a:hover {
	text-decoration: line-through;
}
.nav.hover .nav-list .list-item {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)";
	filter: alpha(opacity=10000);
	opacity: 100;
	-webkit-transition: opacity 0.3s 0.1s ease;
	-moz-transition: opacity 0.3s 0.1s ease;
	-o-transition: opacity 0.3s 0.1s ease;
	-ms-transition: opacity 0.3s 0.1s ease;
	transition: opacity 0.3s 0.1s ease;
}
.nav.hover .work-list .sub-list-item {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)";
	filter: alpha(opacity=10000);
	opacity: 100;
	-webkit-transition: opacity 0.3s 0.4s ease;
	-moz-transition: opacity 0.3s 0.4s ease;
	-o-transition: opacity 0.3s 0.4s ease;
	-ms-transition: opacity 0.3s 0.4s ease;
	transition: opacity 0.3s 0.4s ease;
}

.nav.hover .work-list p {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)";
	filter: alpha(opacity=10000);
	opacity: 100;
	-webkit-transition: opacity 0.3s 0.4s ease;
	-moz-transition: opacity 0.3s 0.4s ease;
	-o-transition: opacity 0.3s 0.4s ease;
	-ms-transition: opacity 0.3s 0.4s ease;
	transition: opacity 0.3s 0.4s ease;
}
.nav.hover .work-title {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)";
	filter: alpha(opacity=10000);
	opacity: 100;
	-webkit-transition: opacity 0.3s 0.3s ease;
	-moz-transition: opacity 0.3s 0.3s ease;
	-o-transition: opacity 0.3s 0.3s ease;
	-ms-transition: opacity 0.3s 0.3s ease;
	transition: opacity 0.3s 0.3s ease;
}
.nav.hover .nav-list {
	width: 100%;
	-webkit-transition: height 0.2s 0s ease;
	-moz-transition: height 0.2s 0s ease;
	-o-transition: height 0.2s 0s ease;
	-ms-transition: height 0.2s 0s ease;
	transition: height 0.2s 0s ease;
	height:60px;
	top:0;
}


.nav.atthetop .nav-list .list-item {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)";
	filter: alpha(opacity=10000);
	opacity: 100;
	-webkit-transition: opacity 0.3s 0.1s ease;
	-moz-transition: opacity 0.3s 0.1s ease;
	-o-transition: opacity 0.3s 0.1s ease;
	-ms-transition: opacity 0.3s 0.1s ease;
	transition: opacity 0.3s 0.1s ease;
}
.nav.atthetop .work-list .sub-list-item {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)";
	filter: alpha(opacity=10000);
	opacity: 100;
	-webkit-transition: opacity 0.3s 0.4s ease;
	-moz-transition: opacity 0.3s 0.4s ease;
	-o-transition: opacity 0.3s 0.4s ease;
	-ms-transition: opacity 0.3s 0.4s ease;
	transition: opacity 0.3s 0.4s ease;
}
.nav.atthetop .work-list p {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)";
	filter: alpha(opacity=10000);
	opacity: 100;
	-webkit-transition: opacity 0.3s 0.4s ease;
	-moz-transition: opacity 0.3s 0.4s ease;
	-o-transition: opacity 0.3s 0.4s ease;
	-ms-transition: opacity 0.3s 0.4s ease;
	transition: opacity 0.3s 0.4s ease;
}
.nav.atthetop .work-title {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)";
	filter: alpha(opacity=10000);
	opacity: 100;
	-webkit-transition: opacity 0.3s 0.3s ease;
	-moz-transition: opacity 0.3s 0.3s ease;
	-o-transition: opacity 0.3s 0.3s ease;
	-ms-transition: opacity 0.3s 0.3s ease;
	transition: opacity 0.3s 0.3s ease;
}
.nav.atthetop .nav-list {
	width: 100%;
	-webkit-transition: height 0.2s 0s ease;
	-moz-transition: height 0.2s 0s ease;
	-o-transition: height 0.2s 0s ease;
	-ms-transition: height 0.2s 0s ease;
	transition: height 0.2s 0s ease;
	height:60px;
	top:0;
}
.nav.atthetop .sub-nav {
	height: 115px;
	-webkit-transition: height 0.2s .3s ease;
	-moz-transition: height 0.2s .3s ease;
	-o-transition: height 0.2s .3s ease;
	-ms-transition: height 0.2s .3s ease;
	transition: height 0.2s .3s ease;
}

.nav.atthetop .linkedin,
.nav.hover .linkedin	{
	opacity:1;
	-webkit-transition: opacity 0.3s 0.2s ease;
	-moz-transition: opacity 0.3s 0.2s ease;
	-o-transition: opacity 0.3s 0.2s ease;
	-ms-transition: opacity 0.3s 0.2s ease;
	transition: opacity 0.3s 0.2s ease;
}

.nav-list {
	position: absolute;
	display: block;
	left: 0;
	z-index: 1000;
	background: #f9f9f9;
	height: 0px;
	width: 100%;
	-webkit-transition: height 0.3s .2s ease;
	-moz-transition: height 0.3s .2s ease;
	-o-transition: height 0.3s .2s ease;
	-ms-transition: height 0.3s .2s ease;
	transition: height 0.3s .2s ease;
}




.work-list {
	position: absolute;
	display: block;
	top:-115px;
	left: 0;
	z-index: 1000;
	width: 100%;
	-webkit-transition: top 0.3s .2s ease;
	-moz-transition: top 0.3s .2s ease;
	-o-transition: top 0.3s .2s ease;
	-ms-transition: top 0.3s .2s ease;
	transition: top 0.3s .2s ease;
}

.nav.hover .work-list,
.nav.atthetop .work-list	{
	top: 0;
	-webkit-transition: top 0s .0s ease;
	-moz-transition: top 0s .0s ease;
	-o-transition: top 0s .0s ease;
	-ms-transition: top 0s .0s ease;
	transition: top 0s .0s ease;
}

.work-list-inserter {
	position: relative;
	top: 34px;
	width: 77%;
	margin: 0 auto;
	opacity:0;
	-webkit-transition: opacity 0.4s 0s ease;
	-moz-transition: opacity 0.4s 0s ease;
	-o-transition: opacity 0.4s 0s ease;
	-ms-transition: opacity 0.4s 0s ease;
	transition: opacity 0.4s 0s ease;
	max-width:1100px;
}
.logo {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	z-index: 1001;
	width: 64px;
	height: 60px;
	background: url(../images/logohover-hor.svg);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	background-repeat: no-repeat;
	background-size: 64px 60px;
    background-size: cover;
    background-position: 0px 0px;
    opacity: .3;
    -webkit-transition: all 0.4s 0s ease;
	-moz-transition: all 0.4s 0s ease;
	-o-transition: all 0.4s 0s ease;
	-ms-transition: all 0.4s 0s ease;
	transition: all 0.4s 0s ease;
}

.logo:hover	{
	cursor:pointer;
}

.atthetop .logo,
.messy .logo,
.hover .logo	{
    opacity: 1;
}
.logo a {
	display: block;
	width: 64px;
	height: 60px;
	text-indent: -9999px;
}
.linkedin {
	position: absolute;
	top: 0;
	right: 0;
	width: 64px;
	height: 60px;
	background: url(../images/linkedinhover.svg) no-repeat;
	text-indent: -9999px;
	z-index: 1001;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: opacity 0.1s ease;
	-moz-transition: opacity 0.1s ease;
	-o-transition: opacity 0.1s ease;
	-ms-transition: opacity 0.1s ease;
	transition: opacity 0.1s ease;
	display:block;
	background-repeat: no-repeat;
	background-size: 18px 18px;
    background-size: cover;
}

.linkedin a {
	width: 60px;
	height: 60px;
	display: block;
	
}

.mail-address	{
	text-transform: uppercase;
}

.previous-side,
.next-side	{
	display:none;
}


/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
content
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 */
 
 
.last-images.last-hide	{
	opacity:.2;
	-webkit-transition: 1.6s all ease;
	-moz-transition: 1.6s all ease;
	-o-transition: 1.6s all ease;
	-ms-transition: 1.6s all ease;
	transition: 1.6s all ease;
}

.last-images	{
	opacity:1;
	-webkit-transition: 1.6s all ease;
	-moz-transition: 1.6s all ease;
	-o-transition: 1.6s all ease;
	-ms-transition: 1.6s all ease;
	transition: 1.6s all ease;
}

#content {
	position: relative;
	top: 0;
	width: 100%;
	opacity:0;	
	-webkit-transition: .4s .0s opacity ease;
	-moz-transition: .4s .0s  opacity ease;
	-o-transition: .4s .0s  opacity ease;
	-ms-transition: .4s .0s  opacity ease;
	transition: opacity .4s .0s  ease;
	z-index:3;
}

.home-test {
	width: 100%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	-webkit-transition: .2s all ease;
	-moz-transition: .2s all ease;
	-o-transition: .2s all ease;
	-ms-transition: .2s all ease;
	transition: .2s all ease;
}

.home-test img	{
	width: 100%;
	position: absolute;
	left: 0;
}

.maze {
	background: url(../images/bg.png);
	width: 100%;
	height: 60px;
	position: relative;
	float: left;
}
.quarter	{
	width: 50%;
	padding-bottom: 50%;
	height: 0;
	position: relative;
	float: left;
	-webkit-transition: .3s .3s all ease-in-out;
	-moz-transition: .3s .3s all ease-in-out;
	-o-transition: .3s .3s all ease-in-out;
	-ms-transition: .3s .3s all ease-in-out;
	transition: .3s .3s all ease-in-out;
}

.quarter .project-name {
    margin: 80% 0% 41.5% 6%;
}

.fifty {
	width: 50%;
	padding-bottom: 50%;
	height: 0;
	position: relative;
	float: left;
	-webkit-transition: .3s .3s all ease-in-out;
	-moz-transition: .3s .3s all ease-in-out;
	-o-transition: .3s .3s all ease-in-out;
	-ms-transition: .3s .3s all ease-in-out;
	transition: .3s .3s all ease-in-out;
}

.hundred {
	width: 100%;
	padding-bottom: 50%;
	height: 0;
	position: relative;
	float: left;
	-webkit-transition: .3s .3s all ease-in-out;
	-moz-transition: .3s .3s all ease-in-out;
	-o-transition: .3s .3s all ease-in-out;
	-ms-transition: .3s .3s all ease-in-out;
	transition: .3s .3s all ease-in-out;
}

.left-block	{
	margin-top:-25%;
}

.hundred.square	{
	padding-bottom:100%;
}

.quarter img,
.fifty img,
.hundred img {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

.color-swatch img	{
	height:8px;
	position:relative;
	top:4px;
	
}

.hundred .home-hover	{
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0);
	z-index:3000;
	opacity:0;
	-webkit-transition: .2s all ease;
	-moz-transition: .2s all ease;
	-o-transition: .2s all ease;
	-ms-transition: .2s all ease;
	transition: .2s all ease;
}

.hundred .home-hover a	{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	text-decoration: none;
	color:#fff;
}

.home-hover	{
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0);
	z-index:3000;
	opacity:0;
	-webkit-transition: .2s all ease;
	-moz-transition: .2s all ease;
	-o-transition: .2s all ease;
	-ms-transition: .2s all ease;
	transition: .2s all ease;
}

.home-hover a	{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	text-decoration: none;
	color:#fff;
}

.home-hover img	{
	width:20%;
	height:20%;
	margin-left:40%;
	position:relative;
	margin-top:15%;
}

.home-hover h4	{
	font-family: 'Austin Roman';
	letter-spacing: 0px;
	line-height:120%;
	position:relative;
	left:-.76%;
}

.home-hover h5	{
	font-family: 'Remi Regular';
	text-transform: uppercase;
	letter-spacing: 8px;
	position:relative;
	font-size:12px;
}

.home-hover h4,
.home-hover h5	{
	top:30px;
}


.home-hover p	{
	text-align: center;
	font-family: 'Remi Regular';
	text-transform: uppercase;
}

.square .home-hover .project-name	{
	margin: 81% 25% 21% 3%;
}

.home-hover:hover	{
	opacity:100;
	background-color:rgba(0,0,0,.25);
	-webkit-transition: .1s all ease;
	-moz-transition: .1s all ease;
	-o-transition: .1s all ease;
	-ms-transition: .1s all ease;
	transition: .1s all ease;
}

.home-hover:hover h5,
.home-hover:hover h4	{
	top:0px;
	-webkit-transition: .3s all ease;
	-moz-transition: .3s all ease;
	-o-transition: .3s all ease;
	-ms-transition: .3s all ease;
	transition: .3s all ease;
}

.intro-text h1	{
	color:#777;
}


.work-container	{
	max-width:1200px;
	margin:0 auto;
	z-index:100;
}


.project-name	{
	margin: 80% 0% 41.5% 3%;
}

.hundred .project-name	{
	margin:36% 25% 21% 3%;
}

.intro-text-container {
	width: 100%;
	position: relative;
	font-family:'Austin Roman';
	line-height: 125%;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: .2s;
	letter-spacing: 0px;
    margin: 0 auto;
    padding: 0 0 150px 0;
}
.hidden-intro-container {
	height: 175px;
	-moz-transition: .2s;
}
.hidden-intro-container {
	height: 175px;
	-o-transition: .2s;
}
.hidden-intro-container {
	height: 175px;
	-ms-transition: .2s;
}
.hidden-intro-container {
	height: 175px;
	transition: .2s;
}
.hidden-intro-container {
	height: 230px;
	position: relative;
	width: 100%;
	display: block;
	float: left;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: .2s;
}
.intro-text {
	-moz-transition: .2s;
}
.intro-text {
	-o-transition: .2s;
}
.intro-text {
	-ms-transition: .2s;
}
.intro-text {
	transition: .2s;
}
.intro-text {
	z-index: 1002;
	width: 100%;
}
.intro-fit {
	width: 77%;
	display: block;
	line-height: 130%;
	margin: 0 auto;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: .2s all ease;
	-moz-transition: .2s all ease;
	-o-transition: .2s all ease;
	-ms-transition: .2s all ease;
	transition: .2s all ease;
	max-width:1100px;
}

.intro-fit p	{
	font-family: 'Remi Black';
	text-transform: uppercase;
	letter-spacing: 5px;
	font-size:12px;
	color:#fff;
	position:relative;
	left:2px;
}



/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
specific page styles
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 */



/* UNIVERSAL */ 

.icon-container h2	{
	font-family: 'Remi Regular';
	letter-spacing:4px;
	margin-bottom:24%;
	top:50%;
	left:50%;
	text-align:center;
}

.icon-container	{
	text-transform: uppercase;
}




.previous-work	{
	margin-top:19.4%;
	position:relative;
}


.previous-work h3	{
	font-family: 'Remi Regular';
	color:#000;
	text-align: center;
	letter-spacing: 8px;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-o-transition: all .1s ease;
	-ms-transition: all .1s ease;
	transition: all 0.1s ease;
	position:relative;
	left:4px;
	font-size:13px;
}

.previous-work h4	{
	font-family: 'Austin Roman';
	color:#000;
	text-align: center;
	letter-spacing: 0px;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-o-transition: all .1s ease;
	-ms-transition: all .1s ease;
	transition: all 0.1s ease;
	text-transform: none;
	position:relative;
}



.fifty.prev a,
.fifty a	{
	text-decoration: none;
}

.prev	{
	padding-bottom:25%;
	background: rgba(248,248,248,1);
	-webkit-transition: .1s background ease;
	-moz-transition: .1s background ease;
	-o-transition: .1s background ease;
	-ms-transition: .1s background ease;
	transition: background 0.1s ease;
	text-transform: uppercase;
}

.prev.beginning .previous-work h3,
.prev.beginning .previous-work h4	{
	color:#bbb;
}

.prev.beginning:hover .previous-work h3,
.prev.beginning:hover .previous-work h4	{
	color:#bbb;
}

.prev.beginning,
.prev.beginning:hover	{
	background:#eee;
}

.prev:hover 	{
	background:#000;
	-webkit-transition: .1s background ease;
	-moz-transition: .1s background ease;
	-o-transition: .1s background ease;
	-ms-transition: .1s background ease;
	transition: background 0.1s ease;
}

.prev:hover .previous-work h3,
.prev:hover .previous-work h4	{
	color:#fff;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-o-transition: all .1s ease;
	-ms-transition: all .1s ease;
	transition: all 0.1s ease;
}

.list-item a:hover:after,
.list-item a.here:after {
  width: 100%;
}

.prev.black	{
	background:#eee;
	-webkit-transition: .1s background ease;
	-moz-transition: .1s background ease;
	-o-transition: .1s background ease;
	-ms-transition: .1s background ease;
	transition: background 0.1s ease;
}

.prev.black h3,
.prev.black h4	{
	color:#000;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-o-transition: all .1s ease;
	-ms-transition: all .1s ease;
	transition: all 0.1s ease;
}

.prev.black:hover 	{
	background:#000;
	-webkit-transition: .1s background ease;
	-moz-transition: .1s background ease;
	-o-transition: .1s background ease;
	-ms-transition: .1s background ease;
	transition: background 0.1s ease;
}

.prev.black:hover .previous-work h3,
.prev.black:hover .previous-work h4	{
	color:#fff;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-o-transition: all .1s ease;
	-ms-transition: all .1s ease;
	transition: all 0.1s ease;
}

.prev a	{
	width:100%;
	height:100%;
	position:absolute;
}

.next-work	{
	background:#000;
}

.prev.beginning.go-home	{
	background:#ddd;
}

.prev.beginning.go-home h3	{
	color:#bbb;
}

.prev.beginning.go-home:hover h3	{
	color:#bbb;
}


/* video fitting */

video {
	max-width: 100%;
	height: auto;
	-webkit-transform: translateZ(0);
  	-moz-transform: translateZ(0);
  	-ms-transform: translateZ(0);
  	-o-transform: translateZ(0);
  	transform: translateZ(0);
}

iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

.video-container	{
	width: 100%;
	height: 100%;
	position: relative;
	float: left;
	transition: .3s .3s all ease-in-out;
	margin-bottom:-3px;
	margin-top:-1px;
}

/* Envoy */

.envoy .envoy-hero	{
	width:100%;
	padding-bottom:68%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.envoy .envoy-comps	{
	width:100%;
	padding-bottom:528.67%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.envoy .envoy-hero img,
.envoy .envoy-comps img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}


/* 150 VAN NESS */

.van-ness .van-ness-signage	{
	width:100%;
	padding-bottom:50%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.van-ness .van-ness-nametags	{
	width:100%;
	padding-bottom:38.5%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.van-ness .van-ness-invitations	{
	width:100%;
	padding-bottom:85.41%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.van-ness .van-ness-hero	{
	width:100%;
	padding-bottom:68%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.van-ness .van-ness-inspiration	{
	width:100%;
	padding-bottom:84.17%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.van-ness .van-ness-flat-spreads	{
	width:100%;
	padding-bottom:151.17%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.van-ness .van-ness-signage img,
.van-ness .van-ness-nametags img,
.van-ness .van-ness-invitations img,
.van-ness .van-ness-hero img,
.van-ness .van-ness-inspiration img,
.van-ness .van-ness-flat-spreads img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

/* FITBIT CAMPAIGN */

.fitbit-campaign .fitbit-campaign-hero	{
	width:100%;
	padding-bottom:68%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fitbit-campaign .fitbit-campaign-comps-01	{
	width:100%;
	padding-bottom:249.34%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fitbit-campaign .fitbit-campaign-comps-02	{
	width:100%;
	padding-bottom:41.67%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fitbit-campaign .fitbit-campaign-comps-03	{
	width:100%;
	padding-bottom:123.34%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fitbit-campaign .fitbit-campaign-comps-04	{
	width:100%;
	padding-bottom:117.17%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fitbit-campaign-hero img,
.fitbit-campaign-comps-01 img,
.fitbit-campaign-comps-02 img,
.fitbit-campaign-comps-03 img,
.fitbit-campaign-comps-04 img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

/* LAURA CHENEL */

.lc .lc-hero	{
	width:100%;
	padding-bottom:79.41%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.lc .lc-comps	{
	width:100%;
	padding-bottom:310.34%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.lc .lc-recipe	{
	width:100%;
	padding-bottom:60.92%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.lc .lc-products	{
	width:100%;
	padding-bottom:65.25%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.lc-hero img,
.lc-comps img,
.lc-recipe img,
.lc-products img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

/* Fitbit Sense 2 */

.fitbit-sense2 .fitbit-sense2-hero	{
	width:100%;
	padding-bottom:54.54%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fitbit-sense2 .fitbit-sense2-comps	{
	width:100%;
	padding-bottom:432%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fitbit-sense2 .fitbit-sense2-ui-1	{
	width:100%;
	padding-bottom:61.17%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fitbit-sense2 .fitbit-sense2-ui-2	{
	width:100%;
	padding-bottom:69.83%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fitbit-sense2 .fitbit-sense2-ui-3	{
	width:100%;
	padding-bottom:68.08%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fitbit-sense2 .fitbit-sense2-ui-4	{
	width:100%;
	padding-bottom:63.41%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fitbit-sense2 .fitbit-sense2-ui-5	{
	width:100%;
	padding-bottom:74.41%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fitbit-sense2 .fitbit-sense2-nature	{
	width:100%;
	padding-bottom:108.58%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fitbit-sense2-hero img,
.fitbit-sense2-comps img,
.fitbit-sense2-ui-1 img,
.fitbit-sense2-ui-2 img,
.fitbit-sense2-ui-3 img,
.fitbit-sense2-ui-4 img,
.fitbit-sense2-ui-5 img,
.fitbit-sense2-nature img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

/* SELF RECORDS */

.self .self-logo,
.self .self-ill,
.self .self-pattern,
.self .self-type	{
	width:100%;
	padding-bottom:50%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.self .self-colors	{
	width:100%;
	padding-bottom:34%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.self .self-cards	{
	width:100%;
	padding-bottom:64%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.self-logo img,
.self-ill img,
.self-pattern img,
.self-colors img,
.self-cards img,
.self-type img{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}





/* OCEAN MIST */

.oceanmist .artisplash01	{
	width:100%;
	padding-bottom:57.2%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.oceanmist .artisplash02	{
	width:100%;
	padding-bottom:49.4%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.oceanmist .artisplash03	{
	width:100%;
	padding-bottom:56.2%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.oceanmist .om-screens	{
	width:100%;
	padding-bottom:325.2%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.oceanmist .om-mobile-screens	{
	width:100%;
	padding-bottom:57.1%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.oceanmist .recipe-flyout	{
	width:100%;
	padding-bottom:57.2%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.artisplash01 img,
.artisplash02 img,
.artisplash03 img,
.om-mobile-screens img,
.recipe-flyout img,
.om-screens img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

/*
.oceanmist-text,.oceanmist-intro {
	background:#e2383f;
}

.oceanmist-text h1	{
	color:#fff;
}
*/



/* WP ENGINE */

.wp .wp-hero	{
	width:100%;
	padding-bottom:50%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.wp .wp-comps	{
	width:100%;
	padding-bottom:155.083%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.wp .wp-icons	{
	width:100%;
	padding-bottom:50%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.wp .wp-illustration	{
	width:100%;
	padding-bottom:64%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.wp .wp-mobile	{
	width:100%;
	padding-bottom:60%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.wp .wp-pattern	{
	width:100%;
	padding-bottom:50%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

/*
.wp-text,.wp-intro {
	background:#25cbd3;
}

.wp-text h1	{
	color:#fff;
}
*/

.wp-hero img,
.wp-comps img,
.wp-icons img,
.wp-illustration img,
.wp-mobile img,
.wp-pattern img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

.wp-text-01	{
	background:#152a33;
	font-family:'Remi Regular';
	color:#fff;
	padding-bottom:45%;
}




/* BLURB */

.blurb .blurb-hero	{
	width:100%;
	padding-bottom:50%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.blurb .blurb-comps	{
	width:100%;
	padding-bottom:391.8%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.blurb .blurb-switcher	{
	width:100%;
	padding-bottom:49%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.blurb .blurb-mobile	{
	width:100%;
	padding-bottom:69%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.blurb .blurb-photobook-pricing	{
	width:100%;
	padding-bottom:193%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.blurb .blurb-book-scroller	{
	width:100%;
	padding-bottom:36%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.blurb-hero img,
.blurb-comps img,
.blurb-switcher img,
.blurb-mobile img,
.blurb-photobook-pricing img,
.blurb-book-scroller img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}






/* BLURB STORIES */

.blurb-stories .blurb-stories-hero	{
	width:100%;
	padding-bottom:50%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.blurb-stories .blurb-stories-comp	{
	width:100%;
	padding-bottom:180.16%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.blurb-stories .blurb-stories-mobile	{
	width:100%;
	padding-bottom:196.33%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.blurb-stories-hero img,
.blurb-stories-comp img,
.blurb-stories-mobile img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}



/* FRESH WALLS */ 
 
/*
.freshwalls-text,.freshwalls-intro {
	background: url(../images/bg-colors/freshwalls.gif);
}
*/

.freshwalls .icon-container	{
	position:absolute;
	width: 60%;
	height: 61%;
	top: 27%;
	left: 22%;
}

.freshwalls .icon-container.download	{
	position:absolute;
	width: 78%;
	height: 61%;
	top: 23%;
	left: 12%;
}

.freshwalls .icon-container img	{
	width: 50%;
	height: 50%;
	left:23%;
}

.freshwalls .icon-container img	{
	width: 50%;
	height: 50%;
	left:25%;
}

.freshwalls .texture-bg	{
	background:url('../images/freshwalls/black-bg.png');
	-webkit-transition: .1s background ease;
	-moz-transition: .1s background ease;
	-o-transition: .1s background ease;
	-ms-transition: .1s background ease;
	transition: background 0.1s ease;
}

.freshwalls h2	{
	font-family: 'Remi Regular';
}

.freshwalls h2,
.freshwalls .fifty.texture-bg a	{
	color:#de5659;
	text-decoration: none;
}

.icon-container.download h2	{
	margin-bottom:18%;
}

.freshwalls .texture-bg:hover	{
	background: url(../images/bg-colors/freshwalls.gif);
	-webkit-transition: .1s background ease;
	-moz-transition: .1s background ease;
	-o-transition: .1s background ease;
	-ms-transition: .1s background ease;
	transition: background 0.1s ease;
}

.freshwalls .texture-bg:hover h2 {
	color:#fdfcdb;
}

.freshwalls .texture-bg a	{
	width:100%;
	height:100%;
	position:absolute;
	text-decoration: none;
}

.monitor {
	width: 100%;
	padding-bottom: 76.9%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.monitor img,
.before-after img,
.devices img,
.wireframes-fw img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

.freshwalls .before-after	{
	width: 100%;
	padding-bottom: 55.4%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
}

.freshwalls .devices	{
	width: 100%;
	padding-bottom: 61.7%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
}

.freshwalls .wireframes-fw	{
	width: 100%;
	padding-bottom: 52%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-top:-1px;
}

.freshwalls span	{
	color:#fff;
}


/* chrisf */

.chrisf .icon-container	{
	position:absolute;
	width: 60%;
	height: 61%;
	top: 27%;
	left: 22%;
}

.chrisf .icon-container img	{
	width: 50%;
	height: 50%;
	left:25%;
}

.chrisf .texture-bg	{
	background:#fff;
	-webkit-transition: .1s background ease;
	-moz-transition: .1s background ease;
	-o-transition: .1s background ease;
	-ms-transition: .1s background ease;
	transition: background 0.1s ease;
}

.chrisf .fifty.texture-bg a	{
	color:#eb3a7f;
	text-decoration: none;
}

.chrisf .texture-bg a	{
	width:100%;
	height:100%;
	position:absolute;
	text-decoration: none;
}

.chrisf .texture-bg:hover	{
	background: #eee;
	-webkit-transition: .1s background ease;
	-moz-transition: .1s background ease;
	-o-transition: .1s background ease;
	-ms-transition: .1s background ease;
	transition: background 0.1s ease;
}

.chrisf .texture-bg:hover h2 {
	color:#eb3a7f;
}

.chrisf .chrisf-hero	{
	width: 100%;
	padding-bottom: 53%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-top:-1px;
}

.chrisf .chrisf-hero img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}



/* COG1 */

.cog .icon-container	{
	position:absolute;
	width: 60%;
	height: 61%;
	top: 27%;
	left: 22%;
}

.cog .icon-container img	{
	width: 50%;
	height: 50%;
	left:25%;
}

.cog .texture-bg	{
	background:#fff;
	-webkit-transition: .1s background ease;
	-moz-transition: .1s background ease;
	-o-transition: .1s background ease;
	-ms-transition: .1s background ease;
	transition: background 0.1s ease;
}

.cog .fifty.texture-bg a	{
	color:#f93a50;
	text-decoration: none;
}

.cog .texture-bg a	{
	width:100%;
	height:100%;
	position:absolute;
	text-decoration: none;
}

.cog .texture-bg:hover	{
	background: #e5e5e5;
	-webkit-transition: .1s background ease;
	-moz-transition: .1s background ease;
	-o-transition: .1s background ease;
	-ms-transition: .1s background ease;
	transition: background 0.1s ease;
}

.cog .cog-hero	{
	width: 100%;
	padding-bottom: 50%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.cog .cog-timelapse	{
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.cog .cog-comps	{
	width: 100%;
	padding-bottom: 347.333%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.cog .cog-hero img,
.cog .cog-timelapse img,
.cog .cog-comps img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}


/* the caviar co */

.thecaviarco .thecaviarco-hero	{
	width: 100%;
	padding-bottom: 100%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
	margin-top:-1px;
}

.thecaviarco .thecaviarco-packaging	{
	width: 100%;
	padding-bottom: 52.5%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
	margin-top:-1px;
}

.thecaviarco .thecaviarco-top	{
	width: 100%;
	padding-bottom: 100%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
	margin-top:-1px;
}

.thecaviarco .thecaviarco-brandkit	{
	width: 100%;
	padding-bottom: 65%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
	margin-top:-1px;
}

.thecaviarco .thecaviarco-hero img,
.thecaviarco .thecaviarco-packaging img,
.thecaviarco .thecaviarco-top img,
.thecaviarco .thecaviarco-brandkit img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}





/* geometry */


.geometry .fullgeometryposter	{
	width: 100%;
	padding-bottom: 149.75%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
	margin-top:-1px;
}

.geometry .widegeometryposter	{
	width: 100%;
	padding-bottom: 71.5%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fullgeometryposter img,
.widegeometryposter img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}


/* fractal */

.fractal .fractal-dual	{
	width: 100%;
	padding-bottom: 50%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fractal .fractal-big	{
	width: 100%;
	padding-bottom: 74.667%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fractal .fractal-frontback	{
	width: 100%;
	padding-bottom: 63.33333%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.fractal-dual img,
.fractal-big img,
.fractal-frontback img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

/* voyager */


.mountains {
	width: 100%;
	padding-bottom: 56.37%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
	margin-top:-1px;
}

.voyager-a {
	width: 100%;
	padding-bottom: 90.3%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
	margin-top:-1px;
}

.voyager-alphabet	{
	width: 100%;
	padding-bottom: 64.25%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
	margin-top:-1px;
}

.mountains img,
.voyager-a img,
.voyager-alphabet img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

/* beyond the void */


/*
.beyondthevoid-text,.beyondthevoid-intro {
	background:url(../images/bg-colors/beyondthevoid.gif);
}

.beyondthevoid .intro-fit	{
	padding-top:20%;
}

.beyondthevoid-text h1	{
	color:#cd4844;
}
*/

.beyond-still {
	width: 100%;
	padding-bottom: 56.15%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-top:-1px;
	margin-bottom:-1px;
}

.beyond-still img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

/* what is color */

/*
.whatiscolor-text,.whatiscolor-intro {
	background: #393939;
}

.whatiscolor-text h1	{
	color:#fff;
}
*/

.color-book {
	width: 100%;
	padding-bottom: 46.9%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
}

/*
.whatiscolor .intro-fit	{
	padding-top:20%;
}
*/

.color-book img,
.spread img,
.ipad img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

.spread	{
	width: 100%;
	padding-bottom: 56.3%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-2px;
}

.ipad	{
	width: 100%;
	padding-bottom: 50%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
}

.whatiscolor .icon-container	{
	position:absolute;
	width: 60%;
	height: 61%;
	top: 27%;
	left: 22%;
}

.whatiscolor .viewbook a	{
	width:100%;
	height:100%;
	position:absolute;
	text-decoration: none;
}

.whatiscolor .icon-container img	{
	width: 50%;
	height: 50%;
	left:23%;
}

.viewbook	{
	background:#000 !important;
	-webkit-transition: .1s background ease;
	-moz-transition: .1s background ease;
	-o-transition: .1s background ease;
	-ms-transition: .1s background ease;
	transition: background 0.1s ease;
}

.viewbook:hover	{
	background:#333 !important;
	-webkit-transition: .1s background ease;
	-moz-transition: .1s background ease;
	-o-transition: .1s background ease;
	-ms-transition: .1s background ease;
	transition: background 0.1s ease;
}

.viewbook h2	{
	color:#fff;
}

/* phantom */

.phantom-hero img,
.phantom-comps img,
.phantom-fields img,
.phantom-tablet img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

.phantom-hero	{
	width: 100%;
	padding-bottom: 74.83%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.phantom-comps	{
	width: 100%;
	padding-bottom: 288.75%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.phantom-fields	{
	width: 100%;
	padding-bottom: 58.33%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.phantom-tablet	{
	width: 100%;
	padding-bottom: 65%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}



/* corrus */

.corrus-hero img,
.corrus-swatches img,
.corrus-swatches-2 img,
.corrus-type img,
.corrus-logos img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

.corrus-hero	{
	width: 100%;
	padding-bottom: 63%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.corrus-swatches	{
	width: 100%;
	padding-bottom: 65%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.corrus-swatches-2	{
	width: 100%;
	padding-bottom: 66.66667%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.corrus-type	{
	width: 100%;
	padding-bottom: 42%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.corrus-logos	{
	width: 100%;
	padding-bottom: 64.16667%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}





/* IREI */

.irei-monitor img,
.irei-comps img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

.irei-monitor	{
	width: 100%;
	padding-bottom: 50%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.irei-comps	{
	width: 100%;
	padding-bottom: 192.5%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}




/* bogle */

.bogle-comps img,
.bogle-hero img,
.bogle-hero-1 img	{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

.bogle-comps	{
	width: 100%;
	padding-bottom: 238.41%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}

.bogle-hero,
.bogle-hero-1	{
	width: 100%;
	padding-bottom: 50%;
	height: 0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:-1px;
}






/* about */

.about .aboutimg	{
	width:100%;
	padding-bottom:43%;
	height:0;
	position: relative;
	float: left;
	clear: both;
	margin-bottom:70px;
	top:-100px;
}

.about img{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
}

/*
.about-text,.about-intro {
	background:url('../images/about-bg.png');
	background-repeat: repeat;
}
*/

.about-text a	{
	color:#ea401f;
	background:#fff200;
	
	text-decoration: none;
}

.about-text h1	{
	color:#ea401f;
}

/*
.about .intro-fit	{
	padding-top:10%;
}
*/

.hidden-intro-container.about-intro	{
	height: 260px;	
}







/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
MEDIA QUERY
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 */


@media screen and (max-width:1039px)	{
	.left-block {
	    margin-top: 0;
	}
}


@media screen and (max-width:760px) {
	
	

	.mobile-hide	{
		display:none;
	}
	
	.square .self.home-hover .project-name, {
	    margin: 84% 4%;
	}
	
	.square .thecaviarco.home-hover .project-name {
	    margin: 82% 4%;
	}
	
	.logo,
	.atthetop .logo,
	.messy .logo,
	.hover .logo	{
		background-position: 0px 0px;
	    opacity: 1;
	}
	
	.intro-fit {
	    width: 100%;
	    padding: 0 20px;
	    box-sizing: border-box;
	}
	
	.intro-fit p	{
		font-family: 'Remi Black';
		text-transform: uppercase;
		letter-spacing: 3px;
		font-size:10px;
		color:#fff;
		position:relative;
		left:1px;
	}

	.nav.hover .nav-list,
	.nav.messy .nav-list,
	.nav.atthetop .nav-list {
	    height: 100%;
	}

	.messy .mobile-menu	{
		background:url(../images/close.svg);
	}
	
	::selection {
		color: auto;
		background: auto;
	}
	::-moz-selection {
		color: auto;
		background: auto;
	}
	
	.hundred .project-name	{
		margin: 37% 4%;
	}
	
	.quarter .project-name	{
		margin: 87% 6%;
	}
	
	
	.hundred .project-name h5,
	.quarter .project-name h5	{
		display:none;
	}
	
	.mobile-menu {
		position: fixed;
		z-index:99999;
		display: block;
		top: 0;
		right: 0;
		z-index: 1001;
		width: 64px;
		height: 60px;
		background:url(../images/menu.svg);
		display:block;
	}
	
	.mobile-menu:hover	{
		cursor:pointer;
	}
	
	.mobile-menu a {
		display: block;
		width: 0;
		height: 0;
		text-indent: -9999px;
		z-index:-9000;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
	}
	
	.home-test	{
		padding:50px 0 70px 0;
		background:#3a3c3d;
	}
	
	.home-test img	{
		width:122%;
	}

	.fifty,
	.logo-spread {
		width: 100%;
		padding-bottom: 100%;
		height: 0;
		position: relative;
		float: left;
	}

	
	.nav {
		position: fixed;
		z-index: 9000;
		left: 0;
		width: 100%;
		height:60px;
		text-align: center;
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: none;
		clear:both;
	}
	
	
	.nav-container {
		position: relative;
		width: 91.4%;
		left: 0px;
		top: 50%;
		margin-top:-120px;
		display:none;
	}
	
	.messy .nav-container	{
		display:block;
	}
	
	.list-item a:hover:after, .list-item a.here:after, a.about-mail-link:hover:after {
	    width: 0;
	}
	
	.nav-list {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		background: #f9f9f9;
		height: 100%;
		width: 100%;
		margin-left: 0px;
		text-align: center;
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: none;
		opacity:0;
	}
	
	.messy .nav-list{
		opacity:1;
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: none;
	}
	
	.messy.nav	{
		height: 100%;
		top:0;
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: none;
	}
	
	.nav .sub-nav	{
		display:none;
	}
	
	.messy.nav .sub-nav	{
		display:block;
	}
	
	.messy.nav .sub-nav.home	{
		display: block;
		top: 230px;
		background: #f9f9f9;
		height: 120%;
		position: absolute;
		z-index:100;
	}
	
	.messy .social-icons	{
	
	}
	
	.nav-container p	{
		display:none;
	}
	
	.nav-container	{
		position: absolute;
		width: 100%;
		height: 300px;
		top: 50%;
		bottom: 0;
		left: 0;
		font-size:15px !important;
	}
	
	.nav-container a {
	    display: block;
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    font-family: Remi Regular;
	    letter-spacing: 4px;
	    z-index: 9000;
	    font-size: 16px !important;
	    height: 50%;
	    padding: 23px 0 0 0px;
	}
	
	.mail-address a {
	    z-index: 9999;
	    display: block;
	    height: 50%;
	    width: 100%;
	}
	
	.mail-address {
	    
	}
	
	.mail-address a {
	    z-index: 9999;
	    display: block;
	    height: 100%;
	    width: 100%;
	}
	
	
	
	.nav-container li	{
		clear:both;
		top:0;
		bottom:0;
		height:70px;
		position:relative;
		font-size:16px !important;
		-webkit-user-select: none;        
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
	}
	
	.list-item	{
		float:none;
		opacity:100;
		position:relative;
	}
	
	.list-item a:hover {
		border-bottom: none;
	}
	
	.list-item.mobile	{
		display:block;
	}
	
	
	
	
	.maze	{
		display:none;
	}
	
	.logo	{
		position:fixed;
		z-index:99999;
	}
	
	.nav.atthetop .linkedin,
	.nav .linkedin	{
		display:none;
		transition:none;
	}
	
	.nav.atthetop.messy .linkedin,
	.nav.messy .linkedin{
		display: none;
	}
	
	.nav.atthetop .linkedin,
	.nav.hover .linkedin	{
		display:none
	}
	
	.nav .work-list .sub-list-item {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)";
		filter: alpha(opacity=10000);
		opacity: 100;
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: none;
	}
	.nav .work-list p {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)";
		filter: alpha(opacity=10000);
		opacity: 100;
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: none;
	}
	.nav .work-title {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10000)";
		filter: alpha(opacity=10000);
		opacity: 100;
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: none;
	}
	
	.sub-nav	{
		height:100%;
		width:100%;
		position:absolute;
		top:100%;
	}
	
	.sub-nav h1,
	.sub-nav li	{
		height:100%;
		width:100%;
		position:absolute;
		top:0;
		bottom:0;
		font-family: Remi Black;
		letter-spacing:4px;
	}
	
	.work-list,
	.work-list-inserter,
	.sub-nav-list	{
		position:absolute;
		height:100%;
		width:100%;
	}
	
	.sub-nav-list	{
		display:none;
	}
	
	.work-list-inserter	{
		top:20.5%;
	}
	
	.hidden-intro-container {
		height: 62px;
		position: relative;
		width: 100%;
		display: block;
		float: left;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		opacity: 0;
		-webkit-transition: .2s;
	}
	
	h1	{
		font-family: 'Austin Roman' !important;
		letter-spacing:0px;
	}
	
	.break-helper	{
		display:none;
	}
	
	.break-helper-mobile	{
		display:inline;
	}
	
	.prev	{
		padding-bottom:50%;
	}
	
	.nav.hover .nav-container,
	.nav.atthetop .nav-container	{
		top:50%;
	}
	

	
	.intro-fit	{
		padding-top: 150px;
		margin-bottom: 40px;
	}
	
	.intro-text-container	{
		padding: 0 0 105px 0;
	}
	
	.hidden-intro-container.about-intro {
	    height: 130px;
	}
	
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
VERY SPECIFIC MEDIA QUERIES
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 */
 
 



/* makes the homepage images go to two columns */
@media screen and (min-width:1040px) {
	.hundred	{
		width:50%;
		padding-bottom:25%;
	}
	
	.hundred.square {
	    padding-bottom: 50%;
	}
	
	.quarter {
		width: 25%;
		padding-bottom: 25%;
		height: 0;
		position: relative;
		float: left;
		-webkit-transition: .3s .3s all ease-in-out;
		-moz-transition: .3s .3s all ease-in-out;
		-o-transition: .3s .3s all ease-in-out;
		-ms-transition: .3s .3s all ease-in-out;
		transition: .3s .3s all ease-in-out;
	}
}
	
	


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

	.intro-fit {
	    width: 1200px;
	    max-width:1200px;
	}
	
	.nav-container {
	    width: 1200px;
	    max-width:1200px;
	}
	
	.about-mail-link:after	{
		left:0;
		height:4px;
		bottom:-2px;
		transition: width .1s;
	}
	
}



/*
@media screen and (min-width:1700px) {

	.atthebottom.side-pagination	{
		opacity:0;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
	
	.side-pagination	{
		opacity:1;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}

	.side-pagination .previous-side,
	.side-pagination .next-side	{
		display:block;
		text-align: center;
	}
	
	.side-pagination .previous-side,
	.side-pagination .next-side	{
		position:fixed;
		display:block;
		left:0;
		z-index:1000;
		width:64px;
		background: #f9f9f9;
		height:100%;
		text-transform: uppercase;
		-webkit-transition: all 0.3s .2s ease;
		-moz-transition: all 0.3s .2s ease;
		-o-transition: all 0.3s .2s ease;
		-ms-transition: all 0.3s .2s ease;
		transition: all 0.3s .2s ease;
	}
	
	.side-pagination .previous-side	{
		left:0;
		-webkit-transition: all 0.3s .2s ease;
		-moz-transition: all 0.3s .2s ease;
		-o-transition: all 0.3s .2s ease;
		-ms-transition: all 0.3s .2s ease;
		transition: all 0.3s .2s ease;
	}
	
	.side-pagination .next-side	{
		right:0;
		left:auto;
	}
	
	.previous-side a,
	.next-side a	{
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		text-decoration: none;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
	
	.previous-side h5,
	.next-side h5	{
		position:absolute;
		transform: translate3d(0,0,0);
		-webkit-transform: rotate(-90deg);
	    -moz-transform: rotate(-90deg);
	    -o-transform: rotate(-90deg);
	    transform: rotate(-90deg);
	    top:50%;
	    color: #999;
	    font-family: 'Remi Regular';
	    letter-spacing: 4px;
	    text-decoration: none;
	    font-size:12px;
	    left: -116px;
	    width: 300px;
	}
	
	.previous-side:hover h5,
	.next-side:hover h5	{
		color:#fff;
	}
	
	.beginning .previous-side:hover h5,
	.beginning .next-side:hover h5	{
		color:#999;
	}
	
	.next-side h5	{
		transform: translate3d(0,0,0);
	    -webkit-transform: rotate(90deg);
	    -moz-transform: rotate(90deg);
	    -o-transform: rotate(90deg);
	    transform: rotate(90deg);
	    left:-118px;
	    width:300px;
	}
	
	.previous-side:hover a,
	.next-side:hover a	{
		background:#000;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
	
	.previous-side h5.text-rotate,
	.next-side h5.text-rotate,
	.previous-side:hover h5.text-rotate-hover,
	.next-side:hover h5.text-rotate-hover	{
		opacity:1;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
	
	.previous-side h5.text-rotate-hover,
	.next-side h5.text-rotate-hover,
	.previous-side:hover h5.text-rotate,
	.next-side:hover h5.text-rotate	{
		opacity:0;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
	
}
*/