/*------------------------------------------------------------------------------------------------------------------------------
	WORK GLOBALS
------------------------------------------------------------------------------------------------------------------------------ */
section.work-wrap {
	position: relative;
	overflow: hidden;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    	
	box-sizing: border-box;    
}






a.close {
	z-index: 99999;
	color: #fff;
	font-size: 1em;
	position: fixed;
	top: 10px;
	right: 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.675em;
}
	a.close:after {
		content: "";
		display: block;
		float: right;
		margin: 4px 0 0 10px;
		width: 9px;
		height: 9px;
		background: url(../img/close.png) no-repeat;
	}	


	/* --------- PROJECT IMAGE ------------------- */
	
.project-img-wrap {
	display: table;
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	text-align: center;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    	
	box-sizing: border-box;  

}

.project-img-wrap div {
	display: table-cell;
 	vertical-align: middle;
}
.project-img-wrap img {
	width: 55%;
	max-width: 55% !important;
	min-width: 500px !important;
}
	.project-img-wrap.intro {
		margin-top:  -70px;
	}







	ul.project-info {
		width: 100%;
		display: block;
		list-style: none;
		margin: 80px auto;
		padding: 0;
	}
	
	
		ul.project-info li {
			float: left;
			padding: 0 0 0 02.6315798%;
			margin: 0 3.5% 0 0;
			font-size: 0.875em;
			color: #fff;
			text-transform: uppercase;
			border-left: 1px solid #fff;
		}
		
		
		
		ul.project-info.dark li {
			color: #444;
			border-left: 1px solid #444;
		}
		
			ul.project-info li:last-child {
				margin-right: 0;
			}
				ul.project-info li:first-child img {
					width: 37px;
					height: 27px;
				}
				
				
			ul.project-info li h4, .project-info h5 {
				padding: 0;
				margin: 0;
			}
			ul.project-info li h4 {
				font-weight: 600;
			}
			ul.project-info li h5 {
				font-weight: 100;
			}
			


/*--  CIRCLE NAVIGATION --- */
ul.circle-buttons {
	z-index: 99999;
	list-style: none;
	position: fixed;
	top: 50%;
	right: 30px;
	width: 45px
	margin: 0;
	padding: 0;
}

	
	ul.circle-buttons li a {
		position: relative;
		display: block;
		width: 20px;
		height: 20px;
		padding: 0;
		margin: 0;
		text-indent: -9999px;
	}
	
		ul.circle-buttons li a span {
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -5px;
			margin-left: -5px;	
			height: 10px;
			width: 10px;	
			border-radius: 50%;
			background: #fff;
			-webkit-transition: all 0.1s ease-in-out;
			-moz-transition: all 0.1s ease-in-out;
			-ms-transition: all 0.1s ease-in-out;
			-o-transition: all 0.1s ease-in-out;
			transition: all 0.1s ease-in-out;			
		}
		
			/*-- dark --------------------------- */
			ul.circle-buttons.dark li a span {
				background: #444;
			}
			

		
			ul.circle-buttons li a:hover span {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -8px;
				margin-left: -8px;	
				height: 16px;
				width: 16px;	
			}

			ul.circle-buttons li a.active span {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -8px;
				margin-left: -9px;	
				height: 14px;
				width: 14px;
				background: none;
				border: 2px solid #fff;
			}
				/*-- dark --------------------------- */
				ul.circle-buttons.dark li a.active span {
					border: 2px solid #444;

				}		
			


/*--  bottom arrow --- */
a.work-arrow-bottom {
	display: block;
	text-indent: -9999px;
	z-index: 99999;
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -50px;
	width: 0; 
	height: 0; 
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 50px solid rgb(225,225,225);
	border-bottom: 50px solid rgba(225,225,225,0.3);
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;	
}

	/*------ dark ------------- */

	a.work-arrow-top.dark {
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-top: 50px solid rgb(0,0,0);
		border-top: 50px solid rgba(0,0,0,0.7);
	}
	
	a.work-arrow-bottom.dark {
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-bottom: 50px solid rgb(0,0,0);
		border-bottom: 50px solid rgba(0,0,0,0.5);
	}
		


	a.work-arrow-bottom.shift {
		position: absolute;
		bottom: 60px;	
	}

	

	a.work-arrow-top:hover {
		opacity: 1;
	}	
		a.work-arrow-bottom span {
			opacity: 0.5;
			display: block;
			width: 10px;
			height: 10px;
			position: relative;
			top: 20px;
			left: -8px;
			border: 3px solid #fff;
			border-top: 3px solid transparent; 
	 		border-left: 3px solid transparent;	
		 	-webkit-transform: rotate(45deg); 
			-moz-transform: rotate(45deg); 
			-o-transform: rotate(45deg);
			-ms-transform: rotate(45deg); 
		}
		
		
	/*--  top arrow --- */
	a.work-arrow-top {
		opacity: 0.5;
		display: block;
		text-indent: -9999px;
		z-index: 99999;
		display: block;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -50px;
		width: 0; 
		height: 0; 
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-top: 50px solid rgb(225,225,225);
		border-top: 50px solid rgba(225,225,225,0.8);
			-webkit-transition: all 0.1s ease-in-out;
			-moz-transition: all 0.1s ease-in-out;
			-ms-transition: all 0.1s ease-in-out;
			-o-transition: all 0.1s ease-in-out;
			transition: all 0.1s ease-in-out;	
	}
		a.work-arrow-top:hover {
			opacity: 1;
		}

			a.work-arrow-top span {
				display: block;
				width: 10px;
				height: 10px;
				position: relative;
				top: -35px;
				left: -8px;
				border: 3px solid #fff;
				border-bottom: 3px solid transparent; 
		 		border-right: 3px solid transparent;	
			 	-webkit-transform: rotate(45deg); 
				-moz-transform: rotate(45deg); 
				-o-transform: rotate(45deg);
				-ms-transform: rotate(45deg); 
			}



	/*-- TOP ARROW COLOURS ---- */
	a.work-arrow-top.yellow {
		border-top: 50px solid rgb(215,151,0);
		border-top: 50px solid rgba(215,151,0.8);	
	}
		a.work-arrow-bottom.yellow {
			border-top: 50px solid rgb(215,151,0);
			border-top: 50px solid rgba(215,151,0.8);	
		}			
				
	
/*------------------------------------------------------------------------------------------------------------------------------
	WORK GLOBALS //END
------------------------------------------------------------------------------------------------------------------------------ */










/*------------------------------------------------------------------------------------------------------------------------------
	BOYCE HATTON
------------------------------------------------------------------------------------------------------------------------------ */


section.work-wrap.boycehatton {
	z-index: 100;
	height: 100%;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	padding: 0 !important;
	background: #ba0938;
}


.work-wrap.boycehatton .gradient-wrap {
	position: absolute !important;
	z-index: 100;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0 !important;
	background-position: center center; 
	background-repeat: no-repeat; 
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ 
	background:  -webkit-gradient(radial, center center, 0, center center, 700, from(#ba0938), to(#990527)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-radial-gradient(circle, #ba0938, #990527 ); 
	/* Firefox 3.6+ */ 
	background: -moz-radial-gradient(circle, #ba0938, #990527); 
	/* IE 10 */ 
	background: radial-gradient(circle, #ba0938, #990527);
	
	background: -moz-radial-gradient(circle, #ba0938, #990527); 
}


/*------------------------------------------------------------------------------------------------------------------------------
	//END
------------------------------------------------------------------------------------------------------------------------------ */











/*------------------------------------------------------------------------------------------------------------------------------
	BOYCE HATTON
------------------------------------------------------------------------------------------------------------------------------ */


section.work-wrap.boycehatton {
	z-index: 100;
	height: 100%;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	padding: 0 !important;
	background: #ba0938;
}


.work-wrap.boycehatton .gradient-wrap {
	position: absolute !important;
	z-index: 100;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0 !important;
	background-position: center center; 
	background-repeat: no-repeat; 
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ 
	background:  -webkit-gradient(radial, center center, 0, center center, 700, from(#ba0938), to(#990527)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-radial-gradient(circle, #ba0938, #990527 ); 
	/* Firefox 3.6+ */ 
	background: -moz-radial-gradient(circle, #ba0938, #990527); 
	/* IE 10 */ 
	background: radial-gradient(circle, #ba0938, #990527);
	
	background: -moz-radial-gradient(circle, #ba0938, #990527); 
}


/*------------------------------------------------------------------------------------------------------------------------------
	//END
------------------------------------------------------------------------------------------------------------------------------ */















/*------------------------------------------------------------------------------------------------------------------------------
	HASTINGS TOURING
------------------------------------------------------------------------------------------------------------------------------ */


section.work-wrap.hastings {
	z-index: 100;
	height: 100%;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	padding: 0 !important;
	background: #005289;
}


.work-wrap.hastings .gradient-wrap {
	position: absolute !important;
	z-index: 100;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0 !important;
	background-position: center center; 
	background-repeat: no-repeat; 
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ 
	background:  -webkit-gradient(radial, center center, 0, center center, 700, from(#005289), to(#00263a)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-radial-gradient(circle, #005289, #00263a ); 
	/* Firefox 3.6+ */ 
	background: -moz-radial-gradient(circle, #005289, #00263a); 
	/* IE 10 */ 
	background: radial-gradient(circle, #005289, #00263a);
	
	background: -moz-radial-gradient(circle, #005289, #00263a); 
}


/*------------------------------------------------------------------------------------------------------------------------------
	//END
------------------------------------------------------------------------------------------------------------------------------ */






















/*------------------------------------------------------------------------------------------------------------------------------
	HAULFRYN PINK
------------------------------------------------------------------------------------------------------------------------------ */


section.work-wrap.fitness {
	z-index: 100;
	height: 100%;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	padding: 0 !important;
	background: #db0657;
}


.work-wrap.fitness .gradient-wrap {
	position: absolute !important;
	z-index: 100;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0 !important;
	background-position: center center; 
	background-repeat: no-repeat; 
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ 
	background:  -webkit-gradient(radial, center center, 0, center center, 700, from(#db0657), to(#940341)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-radial-gradient(circle, #db0657, #940341 ); 
	/* Firefox 3.6+ */ 
	background: -moz-radial-gradient(circle, #db0657, #940341); 
	/* IE 10 */ 
	background: radial-gradient(circle, #db0657, #940341);
	
	background: -moz-radial-gradient(circle, #db0657, #940341); 
}


/*------------------------------------------------------------------------------------------------------------------------------
	//END
------------------------------------------------------------------------------------------------------------------------------ */













/*------------------------------------------------------------------------------------------------------------------------------
	Electronic Arts
------------------------------------------------------------------------------------------------------------------------------ */


section.work-wrap.ea {
	z-index: 100;
	height: 100%;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	padding: 0 !important;
	background: #25242a;
}


.work-wrap.ea .gradient-wrap {
	position: absolute !important;
	z-index: 100;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0 !important;
	background-position: center center; 
	background-repeat: no-repeat; 
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ 
	background:  -webkit-gradient(radial, center center, 0, center center, 700, from(#25242a), to(#151517)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-radial-gradient(circle, #25242a, #151517 ); 
	/* Firefox 3.6+ */ 
	background: -moz-radial-gradient(circle, #25242a, #151517); 
	/* IE 10 */ 
	background: radial-gradient(circle, #25242a, #151517);
	
	background: -moz-radial-gradient(circle, #25242a, #151517); 
}


/*------------------------------------------------------------------------------------------------------------------------------
	//END
------------------------------------------------------------------------------------------------------------------------------ */
















/*------------------------------------------------------------------------------------------------------------------------------
	Jenny Craig
------------------------------------------------------------------------------------------------------------------------------ */


section.work-wrap.jennycraig {
	z-index: 100;
	height: 100%;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	padding: 0 !important;
	background: #25242a;
}


.work-wrap.jennycraig .gradient-wrap {
	position: absolute !important;
	z-index: 100;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0 !important;
	background-position: center center; 
	background-repeat: no-repeat; 
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ 
	background:  -webkit-gradient(radial, center center, 0, center center, 700, from(#25242a), to(#d9d9d9)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-radial-gradient(circle, #fdfdfd, #d9d9d9); 
	/* Firefox 3.6+ */ 
	background: -moz-radial-gradient(circle, #fdfdfd, #d9d9d9); 
	/* IE 10 */ 
	background: radial-gradient(circle, #fdfdfd, #d9d9d9);
	
	background: -moz-radial-gradient(circle, #fdfdfd, #d9d9d9); 
}


/*------------------------------------------------------------------------------------------------------------------------------
	//END
------------------------------------------------------------------------------------------------------------------------------ */



















/*------------------------------------------------------------------------------------------------------------------------------
	DESIGN KIT
------------------------------------------------------------------------------------------------------------------------------ */


section.work-wrap.designkit {
	z-index: 100;
	height: 100%;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	padding: 0 !important;
	background: #feb200;
}


.work-wrap.designkit .gradient-wrap {
	position: absolute !important;
	z-index: 100;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0 !important;
	background-position: center center; 
	background-repeat: no-repeat; 
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ 
	background:  -webkit-gradient(radial, center center, 0, center center, 700, from(#feb200), to(#e79e00)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-radial-gradient(circle, #feb200, #e79e00); 
	/* Firefox 3.6+ */ 
	background: -moz-radial-gradient(circle, #feb200, #e79e00); 
	/* IE 10 */ 
	background: radial-gradient(circle, #feb200, #e79e00);
	
	background: -moz-radial-gradient(circle, #feb200, #e79e00); 
}


/*------------------------------------------------------------------------------------------------------------------------------
	//END
------------------------------------------------------------------------------------------------------------------------------ */













/*------------------------------------------------------------------------------------------------------------------------------
	HUMMING BIRD
------------------------------------------------------------------------------------------------------------------------------ */


section.work-wrap.hummingbird {
	z-index: 100;
	height: 100%;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	padding: 0 !important;
	background: #1979b7;
}


.work-wrap.hummingbird .gradient-wrap {
	position: absolute !important;
	z-index: 100;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0 !important;
	background-position: center center; 
	background-repeat: no-repeat; 
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ 
	background:  -webkit-gradient(radial, center center, 0, center center, 700, from(#71b6d5), to(#1979b7)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-radial-gradient(circle, #71b6d5, #1979b7); 
	/* Firefox 3.6+ */ 
	background: -moz-radial-gradient(circle, #71b6d5, #1979b7); 
	/* IE 10 */ 
	background: radial-gradient(circle, #71b6d5, #1979b7);
	
	background: -moz-radial-gradient(circle, #71b6d5, #1979b7); 
}


/*------------------------------------------------------------------------------------------------------------------------------
	//END
------------------------------------------------------------------------------------------------------------------------------ */





/*------------------------------------------------------------------------------------------------------------------------------
	ARIBA TEAM
------------------------------------------------------------------------------------------------------------------------------ */


section.work-wrap.ariba {
	z-index: 100;
	height: 100%;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	padding: 0 !important;
	background: #efa934;
}


.work-wrap.ariba .gradient-wrap {
	position: absolute !important;
	z-index: 100;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0 !important;
	background-position: center center; 
	background-repeat: no-repeat; 
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ 
	background:  -webkit-gradient(radial, center center, 0, center center, 700, from(#efa934), to(#bc7a0c)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-radial-gradient(circle, #efa934, #bc7a0c); 
	/* Firefox 3.6+ */ 
	background: -moz-radial-gradient(circle, #efa934, #bc7a0c); 
	/* IE 10 */ 
	background: radial-gradient(circle, #efa934, #bc7a0c);
	
	background: -moz-radial-gradient(circle, #efa934, #bc7a0c); 
}


/*------------------------------------------------------------------------------------------------------------------------------
	//END
------------------------------------------------------------------------------------------------------------------------------ */











/* ---------- BLACK -------------- */
section.work-wrap.black {
	z-index: 100;
	height: 100%;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	padding-bottom: 60px;
	background: url(../img/bg.jpg) repeat !important;
	overflow: hidden;
}


.work-wrap.black .gradient-wrap {
	overflow: hidden;
	position: absolute !important;
	z-index: 100;
	height: 100%;
	width: 100%;
	margin: 0;
	background-position: center center; 
	background-repeat: no-repeat; 
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ 
	background:  -webkit-gradient(radial, center center, 0, center center, 700, from(#000), to(#000)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-radial-gradient(circle, transparent, #000 ); 
	/* Firefox 3.6+ */ 
	background: -moz-radial-gradient(circle, transparent, #000); 
	/* IE 10 */ 
	background: radial-gradient(circle, transparent, #000);
	
	background: -moz-radial-gradient(circle, transparent, #000); 
}
/* ---------- //END BLACK -------------- */




















/* ---------- DARK GRAY -------------- */
section.work-wrap.dark-gray {
	z-index: 100;
	height: 100%;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	padding-bottom: 60px;
	background: #444;
	overflow: hidden;
}


.work-wrap.dark-gray .gradient-wrap {
	overflow: hidden;
	position: absolute !important;
	z-index: 100;
	height: 100%;
	width: 100%;
	margin: 0;
	background-position: center center; 
	background-repeat: no-repeat; 
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ 
	background:  -webkit-gradient(radial, center center, 0, center center, 700, from(transparent), to(#000)); 
	/* Safari 5.1+, Chrome 10+ */ 
	background: -webkit-radial-gradient(circle, transparent, #000 ); 
	/* Firefox 3.6+ */ 
	background: -moz-radial-gradient(circle, transparent, #000); 
	/* IE 10 */ 
	background: radial-gradient(circle, transparent, #000);
	
	background: -moz-radial-gradient(circle, transparent, #000); 
}
/* ---------- //END DARK GRAY -------------- */