p.headline: {
	color:#09cbdc;
	
}

body, html, img, ul, ol, li, a, h1, h2 {
	padding:0px;
	margin:0px;
	-webkit-font-smoothing:antialiased;
}

body {
	height:100%;
}


html {
	height:100%;
	background:#09cbdc;
}

/* INTRO NAME LOADER */
#intro {
	opacity:0;
}

.clouds {
	margin-top:-533px !important; /*important */
	transform:scale(.75, .75);
	-moz-transform:scale(.75, .75);
	-webkit-transform:scale(.75, .75);
}

#preloader {
	z-index:9999;
	height:25px;
	width:200px;
	position:fixed;
	top:50%;
	margin-top:-13.5px;
	left:50%;
	margin-left:-100px;

}

.load-base, .load-top {
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	height:25px;
	width:200px;
	font-size:1.35em;
	color:rgba(255, 255, 255, .10);
	text-transform: uppercase;
	font-weight:thin;
	letter-spacing:.12em;
	white-space:nowrap;
}

.load-top {
	overflow:hidden;
	width:0px;
	color:#fff;
}


/* TOP NAME */
a#name {
	position:fixed;
	left:75px;
	top:75px;
	z-index:2001;
	display:inline-block;
	font-family:"brandon-grotesque";
	font-size:.7em;
	text-transform: uppercase;
	letter-spacing:.15em;
	color:#fff;
	text-decoration:none;
	font-weight:thin;
	opacity:.5;	
}

a#name:hover {
	opacity:.75;
}


/* BANNER STYLES */


#banner-wrapper {
	position:fixed;
	height:auto;
	overflow:hidden;
	width:100%;
}

#left {	
	position:relative;
	width:auto;
	height:100%;
	background:url("../images/clouds.jpg") center center;
	
	background-size:cover;
	-webkit-background-size:cover;
	-moz-background-size:cover;
}

/* MAIN HEADLINE STYLE */
#left p {
	position:absolute;
	font-family:"abril-fatface";
	font-size:4.313em;
	line-height:1em;
	color:white;
	font-style:italic;
	font-weight:500;
	
	left:75px;
	margin-right:300px;
	top:50%;
	margin-top:-1.05em;
	
	transition:all ease-in .1s;
	-moz-transition:all ease-in .1s;
	-webkit-transition:all ease-in .1s;
	-o-transition:all ease-in .1s;	
}

#right {
	position:absolute;
	right:0px;
	top:0px;

	width:280px; /* 430 - 150 */
	padding:75px;
	background:#e3dfdf;
	background-size:cover;
}

.right-mobile {
	display:none;
	background:#e3dfdf;
	background-size:cover;
}

/* BIO HEADLINE STYLE */
#right p.bio, .right-mobile p.bio {
	margin-top:5%;
	font-family:"abril-fatface";
	/* text-transform:uppercase;*/
	color:#4a4a4a;
	letter-spacing:.15em;
	font-size:1.75em;
	font-weight:100;
	-webkit-font-smoothing:antialiased;
}

.bio-main {
	left:75px;
	width:280px;
	position:absolute;
	top:50%;
	margin-top:-318px;
}

#right p.text, .right-mobile p.text {
	font-family:"utopia-std-display";
	font-size:.76em;
	/* font-style:italic;*/
	font-weight:lighter;
	color:#4a4a4a;
	line-height:1.77em;
}



/* PACKERY GRID STYLES*/

#work-container {
	z-index:50;
	position:relative;
	height:auto;
	overflow:hidden;
	background:#ffffff;
	opacity:1 !important;
}



#thumbs-container {
	position:relative;
	margin:0px auto 0px auto;
	overflow:hidden;
	height:auto;
	
	transform:all ease-in .5s;
	-webkit-transform:all ease-in .5s;
	-moz-transform:all ease-in .5s;
	-o-transform:all ease-in .5s;
	
	position:fixed;
}

.intospace {
	-ms-transform: scale(.55); /* IE 9 */
    -webkit-transform: scale(.55); /* Chrome, Safari, Opera */
    transform: scale(.55);
    margin-right:400px;
}


.item { 
	cursor:pointer;
	position:relative;
	width: 50%; 
	padding-top:25%;
	padding-bottom:25%;
	background-size: 100% auto;
	background-repeat:no-repeat;
}

.item.quarter { 
	width: 25%;
	padding-top:12.5%;
	padding-bottom:12.5%;
}

.item.third { 
	width: 33%;
	padding-top:16.5%;
	padding-bottom:16.5%;
}


/* THIS IS THE PORTFOLIO ROLLOVER*/
.fade {
	opacity:.5;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:black;
	
	transition:all ease-in-out .33s;
	-webkit-transition:all ease-in-out .33s;
	-o-transition:all ease-in-out .33s;
	-moz-transition:all ease-in-out .33s;
}

.fade:hover {
	opacity:0.0;
}

.nohover {
	display:none;
}




/* WORK IMAGES */


.klerede {
	background-image: url("../images/klerede/klerede.jpg");
}

.ice {
	background-image: url("../images/ice/ice.jpg");
}

.identity {
	background-image: url("../images/identity/Main_Logo.jpg");
}

.backcountry {
	background-image: url("../images/backcountry/backcountry.jpg");
}

.fitstar {
	background-image: url("../images/fitstar/fitstar_main.jpg");
}

.fanatomy {
	background-image: url("../images/fanatomy/fanatomy_main.jpg");
}

.toughlove {
	background-image: url("../images/toughlove/toughlove_main.jpg");
}

.wingtips {
	background-image: url("../images/wingtips/wingtips_main.jpg");
}

.rehabwest {
	background-image: url("../images/rehabwest/rehabwest_main.jpg");
}
/* DETAIL OVERLAY STYLES */

#detail-popup-container {
	z-index:100;
	position:absolute;
	overflow:hidden;
	top:0px;
	left:-2000px;
	padding:75px;
	
}

.work-item {
	display:none;
	position:relative;
	overflow:hidden;
	margin-bottom:75px;
}

.work-item p.textdescription {
	font-family:"utopia-std-display";
	font-size:.8em;
	/* font-style:italic;*/
	font-weight:lighter;
	color:#4a4a4a;
	line-height:1.77em;
	
}
.work-item p.headlinedescription {
	font-family:"brandon-grotesque";
	text-transform:uppercase;
	font-size:.8em;
	font-weight:light;
	color:rgba(39, 39, 39, .55);
	letter-spacing:.15em;
	
}

.work-item img {
	padding:0px;
	margin:0px;
}


#detail-popup-container img {
	max-width:100%;
	height:auto;	
	padding:0px;
	margin:0px;
}



/* INFO BAR */
#info-container {	
	z-index:5000;
	position:absolute;
	top:0px;
	right:-2000px;	
	width:280px; /* 430 - 150 */
	padding:75px;
	background:#fff;
	overflow:hidden;
	height:100%;
}

.stick {
	position:fixed !important;
}

.info-all {
	display:none;
}

.info-all h3, .info-all-mobile h3 {
	margin-top:0px;
	padding-top:0px;
	font-family:"abril-fatface";
	/* text-transform:uppercase;*/
	color:rgba(39, 39, 39, .87);
	letter-spacing:.16em;
	font-size:1.66em;
	line-height:1.15em;
	font-weight:100;
	
}

.info-all p.role, .info-all-mobile p.role {
	font-family:"brandon-grotesque";
	text-transform:uppercase;
	font-size:.8em;
	font-weight:light;
	color:rgba(39, 39, 39, .55);
	letter-spacing:.15em;
}

.info-all h3+p.role, .info-all-mobile h3+p.role {
	margin-top:-12px;
}

.blockspacer {
	margin:26px 0px 24px 0px;
	display:block;
	height:5px;
	width:25px;
	background:#09cbdc;
}

.info-all p.description, .info-all a.fullproject, .info-all-mobile p.description, .info-all-mobile a.fullproject {
	font-family:"utopia-std-display";
	font-size:.825em;
	font-weight:lighter;
	color:rgba(39, 39, 39, .75);
	line-height:1.77em;
}


.info-all p.description a, .info-all-mobile p.description a {
	display:inline-block;
	color:rgba(39, 39, 39, .75);
}

.info-all p.description a:hover, .info-all-mobile p.description a:hover {
	color:#13CFB0;
	text-decoration:none;
}

.info-all a.fullproject, .info-all-mobile a.fullproject {
	display:inline-block;
	color:rgba(39, 39, 39, .35);
	margin-top:15px;
	text-decoration:none;
	font-style:normal;
	font-size:.85em;
	border:1px solid rgba(39, 39, 39, .15);
	padding:5px 10px 5px 10px;
}

.firstright {
	margin-right:6px;
}


.spaceleft {
	margin-left:15px;
}

.info-all-mobile {
	display:none;
	padding:50px 25px 50px 25px;
}

.info-mobile {
	display:none;
	background:#fff;
	padding:0px;
}

.closex {
	position:absolute;
	top:28px;
	right:28px;
	
	height:18px;
	width:18px;

	background:url("../images/closex.png");	
	background-size:cover;
	cursor:pointer;
	
	transition:ease-in-out all .33s;
	-webkit-transition:ease-in-out all .33s;
	-moz-transition:ease-in-out all .33s;
	-o-transition:ease-in-out all .33s;
}

.closex:hover {
	opacity:0.5;
	
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform:rotate(90deg);
}

.nextproject-hm, .preproject-hm {
	display:block;
}


.mobilebgfix {
	display:none;
	position:fixed;
	z-index:-1;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	background:#5c5959;
}

.negative {
	padding:25px;
	font-family:"kepler-std-display", georgia, serif;
	font-size:2em;
	font-style:italic;
	font-weight:lighter;
	color:white;
	letter-spacing:.15em;
}

.negative a {
	padding:25px;
	display:inline-block;
	text-decoration:none;
	color:white;
}

.negative a:hover {
	background:rgb(29,190,163);
}



/* USE INSTEAD OF ANIMATE() */
.loadindicator {
	width:205px;
	-webkit-transition:ease 2.25s all .5s;
}

.no-opacity {
	opacity:0 !important;
	transition:ease 1s all 2.3s;
	-webkit-transition:ease 1s all 2.3s;
	-moz-transition:ease 1s all 2.3s;
}

.name-menu-in {
	opacity:.77 !important;
	transition:ease 2.5s all 4s;
	-webkit-transition:ease 2.5s all 4s;
	-moz-transition:ease 2.5s all 4s;
}

.intro-in {
	opacity:1 !important;
	transition:ease 3s all 3s;
	-webkit-transition:ease 3s all 3s;
	-moz-transition:ease 3s all 3s;
}

.thumb-container-fade {
	opacity:.01 !important;
	transition:ease 1s all .5s;
	-webkit-transition:ease 1s all .5s;
	-moz-transition:ease 1s all .5s;
}

.thumb-container-out {
	opacity:1 !important;
	transition:ease .33s all .33s;
	-webkit-transition:ease .33s all .33s;
	-moz-transition:ease .33s all .33s;
}

.info-in {
	right:0px !important;	
	transition:ease .47s all .83s;	
	-webkit-transition:ease .47s all .83s;
	-moz-transition:ease .47s all .83s;
}

.info-out {
	right:-900px !important;
	transition:ease .25s all;
	-webkit-transition:ease .25s all;
	-moz-transition:ease .25s all;
}

.detail-in {
	left:0px !important;
	transition:ease .47s all .83s;
	-webkit-transition:ease .47s all .83s;
	-moz-transition:ease .47s all .83s;
}

.detail-out {
	left:-2000px !important;
	transition:ease .25s all;
	-webkit-transition:ease .25s all;
	-moz-transition:ease .25s all;
}

.no-opacity-quick {
	opacity:0 !important;
	transition:ease .5s all;
	-webkit-transition:ease .5s all;
	-moz-transition:ease .5s all;
}

.menu-name-in-quick {
	opacity:1 !important;
	transition:ease .5s all .5s;
	-webkit-transition:ease .5s all .5s;
	-moz-transition:ease .5s all .5s;
}

.menu-wrapper-show {
	opacity:1 !important;
	transition:ease .5s all .5s;
	-webkit-transition:ease .5s all .5s;
	-moz-transition:ease .5s all .5s;
}

.menu-wrapper-hide {
	opacity:0 !important;
	transition:ease .5s all .5s;
	-webkit-transition:ease .5s all .5s;
	-moz-transition:ease .5s all .5s;
}

.list-in {
	opacity:1 !important;
	margin-top:-15%;
	transition:ease 2s all 2s;
	-webkit-transition:ease 2s all 2s;
	-moz-transition:ease 2s all 2s;
}

.list1, .list2, .list3, .list4, .list5 {
	display:inline-block;
	opacity:0;
	margin-top:-10px;
	transform:skewX(130deg);
	-webkit-transform:skewX(130deg);
	-moz-transform:skewX(130deg);
}

.in-1, .in-2, .in-3, .in-4, .in-5 {
	opacity:1 !important;
	font-size:2em;
	margin-top:0px;
	
	-webkit-transform:skewX(180deg);
	-moz-transform:skewX(180deg);
}

.in-1 {
	transition:ease .5s all .15s;
	-webkit-transition:ease .5s all .15s;
	-moz-transition:ease .5s all .15s;
}

.in-2 {
	transition:ease .5s all .25s;
	-webkit-transition:ease .5s all .25s;
	-moz-transition:ease .5s all .25s;
}

.in-3 {
	transition:ease .5s all .35s;
	-webkit-transition:ease .5s all .35s;
	-moz-transition:ease .5s all .35s;
}

.in-4 {
	transition:ease .5s all .45s;
	-webkit-transition:ease .5s all .45s;
	-moz-transition:ease .5s all .45s;
}

.in-5 {
	transition:ease .5s all .55s;
	-webkit-transition:ease .5s all .55s;
	-moz-transition:ease .5s all .55s;
}