/* COLORS
red: #e33b27
yellow: #e9e91a
blue: #373ab9
black: #151515

============= Global Styles ========== */

* {
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
	margin: 0; padding: 0;
	
}
html { width: 100%; height: 100%; }
body {
/* 	width: 100%; height: 100%; */
	min-height: 100%;
	font: 17px 'Josefin Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #FFF;
	font-weight: 500;
	overflow-x: hidden;
	background: url('images/bg.jpg') center top no-repeat #151515;
}

header, footer, nav, section, article, aside, hgroup { display: block; font-weight: lighter !important; }

h1, h2, h3, h4, h5, h6 { font-weight: lighter }

a { text-decoration: none; color: #666; outline: 0 !important; }
a:hover, a:active, a:focus { color: #999 }
a img { border: none }

a, a img, #clients-wrap .client .bg, #clients-wrap .client .bg-cover, #clients-wrap .client .client-slides .slide h3, #clients-wrap .client .client-slides .slide .slideshow-pager
{ -webkit-transition: all 300ms; -khtml-transition: all 300ms; -moz-transition: all 300ms; -ms-transition: all 300ms; -o-transition: all 300ms; transition: all 300ms; }


h1 {  }
h2 {
	margin: 30px 0 5px 0;
	padding-bottom: 5px;
	border-bottom: 1px solid #444;
}




#nav-wrap { position: relative; top: -150px; }
#nav-wrap nav {
	display: block;
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
	border-bottom: 1px solid #444;
}
#nav-wrap nav .logo img { margin: 20px 0; opacity: 0.75; box-shadow: 0 1px 10px rgba(0,0,0,0.8); }
#nav-wrap nav .logo:hover img { opacity: 1 }





#slides-holder-wrap {
	width: 100%;
}
#slides-holder {
	position: relative; top: 0; left: 0;
	height: 100%;
}








#content-wrap {
	position: relative;
	width: 90%;
	margin: 0 auto;
}
#content-wrap.wide {
	width: 1200px;
	left: 50%;
	margin: 0 0 0 -600px;
}


#info-wrap {
	display: none;
	width: 37%;
	float: left;
	margin: 40px 0 30px;
/* 	position: absolute; top: 0; */
}
#info-wrap div {
	width: 100%; height: 280px;
	box-shadow: inset 0 1px 10px rgba(0,0,0,0.8);
	background: url('images/info-image.jpg') bottom center no-repeat;
	background-size: cover;
}
#info-wrap p {
	margin: 15px 0 5px;
}




#clients-wrap {
	position: relative;
	width: 60%; height: 100%;
	padding: 0 0 40px 0;
	float: right;
}

.client {
	display: none;
	position: relative; top: 100%;
	width: 100%; height: 100px;
	margin-top: 40px;
	overflow: hidden;
	box-shadow: inset 0 1px 10px rgba(0,0,0,0.8);
	background: center center no-repeat;
	text-shadow: 0 1px 1px #000;
}
.client.current {
	background-color: rgba(0,0,0,0.3);
	box-shadow: inset 0 1px 10px rgba(0,0,0,1);
}

.client:hover {
	
}
.client .client-header {
	width: 100%; height: 100px;
	position: relative;
	cursor: pointer;
}
.client.current .client-header { z-index: 10; cursor: default; }






.bg-loader {
	position: absolute; left: 0; top: 0; z-index: -2;
	width: 100%; height: 100%;
	background: url('images/loader.gif') center center no-repeat;
}

.client .bg {
	width: 100%; height: 100%;
	position: absolute; left: 0; top: 0; z-index: -1;
	background: url('images/client-holding.jpg') center center no-repeat;
	background-size: cover;
/* 	transition: -webkit-filter 300ms; */
}
.client.photography .bg { background-image: url('images/clientbgs/clientbg-photography.jpg'); }
.client.design .bg { background-image: url('images/clientbgs/clientbg-design.jpg'); }
.client.web .bg { background-image: url('images/clientbgs/clientbg-web.jpg'); }
.client.video .bg { background-image: url('images/clientbgs/clientbg-video.jpg'); }

@media only screen and (max-width: 768px) {
	
	#info-wrap { width: 100%; float: none; margin-top: 0px; }
	#clients-wrap { width: 100%; float: none }
	
}

@media only screen and (max-width: 500px) {
	
	
	
	#clients-wrap .client.photography .bg { background-image: url('images/clientbgs/clientbg-photography-lores.jpg'); }
	#clients-wrap .client.design .bg { background-image: url('images/clientbgs/clientbg-design-lores.jpg'); }
	#clients-wrap .client.web .bg { background-image: url('images/clientbgs/clientbg-web-lores.jpg'); }
	#clients-wrap .client.video .bg { background-image: url('images/clientbgs/clientbg-video-lores.jpg'); }
	
}



.client.current .bg { display: none }
.client .bg-cover {
	width: 100%; height: 100%;
	position: absolute; left: 0; top: 0;
	background: rgba(0,0,0,0.25);
}
.client:hover .bg-cover { background-image: url('images/bg-trans-black-75.png'); background: rgba(0,0,0,0.75); }
.client.current .bg-cover { display: none; }

.client h2 {
	width: 90%; height: 100px;
	position: relative; z-index: 100;
	height: 100px; line-height: 100px;
	font-size: 28px;
	text-shadow: 0 2px 3px black;
	color: #FFF !important;
	margin: 0 auto;
	border-bottom: 1px solid transparent;
	-webkit-transition: height 300ms, line-height 300ms; -moz-transition: height 300ms, line-height 300ms; -ms-transition: height 300ms, line-height 300ms; transition: height 300ms, line-height 300ms;
}
.client.current h2 { height: 80px; line-height: 80px }
.client.current h2.photo { border-bottom-color: #2d60b5 }
.client.current h2.design { border-bottom-color: #e33b27 }
.client.current h2.web { border-bottom-color: #008000 }
.client.current h2.video { border-bottom-color: #cd8500 }
/* COLORS
red: #e33b27
yellow: #e9e91a
blue: #373ab9 / #2d60b5
orange: #cd8500
green: #008000
purple: #
black: #151515
*/

.client .type-of-work-wrap {
	width: 260px; height: 100px; line-height: 100px;
	position: absolute; right: -300px;
	padding: 0 20px;
	text-align: right;
	opacity: 0;
	text-shadow: 0 0 100px black;
	-webkit-transition: right 300ms, opacity 600ms; -moz-transition: right 300ms, opacity 600ms; -ms-transition: right 300ms, opacity 600ms; transition: right 300ms, opacity 600ms;
}
.client:hover .type-of-work-wrap, .client.current .type-of-work-wrap {
	opacity: 0.9;
	right: 0;
}

.client .type-of-work {
	font-size: 24px;
	padding: 5px 4px 3px 4px;
	text-shadow: 0 1px 2px #000;
	border-radius: 2px;
}
span.web { color: #008000 }
span.design { color: #e33b27 }
span.photo { color: #2d60b5 }
span.video { color: #cd8500 }
span.app { color: #7b3b9b }
span.highlight { color: #FFF }


.client-header .client-control {
	display: block;
	position: absolute; right: 5%; top: 0; z-index: 1100;
	height: 100%;
}
.client-header .client-control a {
	display: block;
	width: 40px; height: 40px;
	opacity: 0.4;
	margin: 30px 0 0 10px;
	background: transparent center center no-repeat;
	float: right;
}
.client .client-control .slides-nav-link { display: none; opacity: 0; }
.client.current .client-control .slides-nav-link { display: block; opacity: 0.4; }
.client.current .client-control a { margin-top: 23px }
.client.current .client-control a:hover { opacity: 0.8 }
.client .client-control .slides-nav-link.prev { background-image: url('images/prev.png') }
.client .client-control .slides-nav-link.prev.first-slide { opacity: 0.1 !important; cursor: default; }
.client .client-control .slides-nav-link.next { background-image: url('images/next.png'); margin-left: 0; }
.client .client-control .client-view-control.open { background-image: url('images/open.png'); opacity: 0; }
.client .client-control .client-view-control.close { background-image: url('images/close.png'); }
.client:hover .client-control .client-view-control.open { opacity: 0.8 }
.client .client-control .slides-nav-link.pause-play { background-image: url('images/pause.png'); margin-left: 0 }
.client .client-control .slides-nav-link.pause-play.paused { background-image: url('images/play.png') }







/* ===== Client Slides ===== */


.client .client-slides {
	display: none;
	position: absolute; left: 0; top: 100px;
	width: 100%;
}
.client .client-slides .slide {
	position: relative; top: 0;
	width: 100%; height: 100%;
	display: block;
	text-align: center;
}

.client .client-slides .slide a:hover img { opacity: 0.5 }

.client .client-slides .slide .caption {
	width: 90%;
	padding: 10px 0;
	margin: 0 auto 15px;
	text-align: left;
	border-bottom: 1px solid #444;
}



.client .client-slides .slide img {
	max-width: 90%; max-height: 80%;
	box-shadow: 0 1px 8px black;
}
.client .client-slides .slide iframe {
	max-width: 90%; max-height: 80%;
	box-shadow: 0 1px 8px black;
}

.client .client-slides .slide .landing-slide { display: table; margin: 0 auto; }
.client .client-slides .slide .landing-slide p {
	display: table-cell;
	vertical-align: top;
	padding-top: 20px;
	line-height: 20px;
}
.client .client-slides .slide .landing-slide p b { font-size: 1.3em; line-height: 1.6em; }
.client .client-slides .slide .landing-slide p.services-list { text-align: right; padding-right: 15px; }
.client .client-slides .slide .landing-slide p.client-list { text-align: left; padding-left: 15px; }















/* ========== Screen Specific Styles ========== */

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


/* ----- iPhone / Smartphones ----- */
@media only screen and (max-width: 500px) {
	
	.client .client-control .slides-nav-link { display: none !important; }
		
}