/*-----------------------------------------------------------------------------------

	0.	CSS Reset & Clearfix
	1.	Document Setup (body, common classes, vertical rhythm, structure etc)
	2.	Header
	3.	Navigation
	4.	Banner
	5.	Intro
	6.	Our Process Home Page
	7.	Timeline
	8.	Team
	9.	Our Process Page
	10.	Testimonials
	11.	Contact
	12.	Client Stories
	13.	Footer
	14. Responsive
	15. Retina

-----------------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------------*/
/*	0.	CSS Reset & Clearfix - http://meyerweb.com/eric/tools/css/reset/
/*-----------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display: block; } /* End hide from IE Mac */ .none { display: none; } /* End Clearfix */


/*-----------------------------------------------------------------------------------*/
/*	1.	Document Setup (body, common classes, vertical rhythm, structure etc)
/*-----------------------------------------------------------------------------------*/

body{
	
	color: #999999;
	background-color: #fcfcfc;
	font-size: 16px;
	line-height: 24px;
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-weight: 400;
	font-smoothing: antialiased;
		-webkit-font-smoothing: antialiased;
}

body div{
	overflow: hidden;
}

.clearfix{
	overflow: visible;
}

a{
	color: #cd6e57;
	text-decoration: none;
	-webkit-transition:color .15s ease-in;  
		-moz-transition:color .15s ease-in;  
		-o-transition:color .15s ease-in;  
		transition:color .15s ease-in;
}

a:visited{
	
}

p{
	margin-bottom: 25px;
}

h1, h2, h3, h4{
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	color: #84999b;
}

h1{
	font-size: 60px;
	line-height: 60px;
	text-transform: uppercase;
	text-align: center;
}

h2{
	font-size: 30px;
	line-height: 30px;
	margin-bottom: 30px;
}

h3{
	font-size: 18px;
	line-height: 18px;
}

h6{
	font-size: 30px;
	line-height: 30px;
	margin-bottom: 30px;
	text-transform: uppercase;
	color: #84999b;
}


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

.content{
	width: 1150px;
	margin: auto;
}

.sub-heading{
	font-size: 18px;
	line-height: 30px;
	font-style: italic;
	text-align: center;
	display: block;
	margin: auto;
	margin-bottom: 50px;
}

.margin-fix{
	margin-right: 0px !important;
}

/*-----------------------------------------------------------------------------------*/
/*	2.	Header
/*-----------------------------------------------------------------------------------*/

#header{
	background-color: #fcfcfc;
	position: static;
	z-index: 0;
	left: 0;
	border-bottom: 1px solid #dddddd;
}

#header .content{
		
}

#header a img{
	display: block;
	float: left;
	width:191px;
	/* height:46px; */
	transition:opacity .25s ease-in;
		-webkit-transition:opacity .25s ease-in;  
		-moz-transition:opacity .25s ease-in;  
		-o-transition:opacity .25s ease-in;  
	opacity: 1;
	margin-top: 25px;
}

#header a img:hover{
	opacity: .85;
}

#header-mobile{
	display: none;
}

#header-mobile .content{
	width: 92%;
	padding: 15px 4%;
}

#header-mobile a img{
	margin: 0px;
	float: right;
	width: 105px;
}

/*-----------------------------------------------------------------------------------*/
/*	3.	Navigation
/*-----------------------------------------------------------------------------------*/

#nav, #sub-nav{
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	line-height: 18px;
}

#nav{
	float: right;
	margin-top: 47px;
	padding-bottom: 47px;
	letter-spacing: 1px;
}

#nav li{
	display: inline;
	margin-left: 50px; 
	padding-bottom: 45px;
}

#nav li:first-child{
	margin-left: 0px;
}

.stories #nav li:first-child{
	background-image: url(images/active-arrow.png);
	background-repeat: no-repeat;
	background-position: bottom center;
}

.stories #nav ul li:first-child{
	background: none;
}

#nav a,
#sub-nav a{
	color: #999999;
}

#nav a:hover,
#nav .active,
#sub-nav a:hover,
#sub-nav .active{
	color: #cd6e57;
	border-color:#e3b5a8;
}

#nav ul{
	position: absolute;
	margin-top:38px;
	padding-top:45px;
	margin-left: -185px;
}

#nav ul li{
	margin-left: 75px;
}

#sub-nav .arrow-up {
	width: 0; 
	height: 0; 
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	
	border-bottom: 8px solid #dddddd;
	margin: auto;
	margin-bottom: 43px;
}

#mobile-nav li{
}

#mobile-nav a{

}

#mobile-nav-button{
	width: 27px;
	height: 20px;
	background-image: url(images/list-icon.png);
	background-repeat: no-repeat;
	background-size: 27px 20px;
	margin-top: 2px;
	transition:opacity .15s ease-in;
		-webkit-transition:opacity .15s ease-in;  
		-moz-transition:opacity .15s ease-in;  
		-o-transition:opacity .15s ease-in;  
}

#mobile-nav-button a{
	font-size: 50px;
}

/*-----------------------------------------------------------------------------------*/
/*	4.	Banner
/*-----------------------------------------------------------------------------------*/

.banner{
	height: 620px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	text-align: center;
}

.banner .content{
	padding-top: 160px;
}

.banner h1{
	color: #fff;
	font-weight: 900;
	font-size: 45px;
	line-height: 45px;
	letter-spacing: 2px;
	margin-bottom: 40px;
}

.banner p{
	font-family: 'Lato', sans-serif;
	font-size: 24px !important;
	line-height: 30px !important;
	font-weight: normal  !important;
	color: #fff;
	/* width: 820px; */
	width: 71.3043478261%;
	margin: auto;
	margin-bottom: 50px;
}

.banner .button{
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 15px 25px;
	border: 2px solid #fff;
	border-color: rgba(255, 255, 255, 0.5);
	border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-khtml-border-radius: 5px;
	display: inline-block;
	background-color: rgba(96, 96, 96, 0.15);
	transition:background-color .15s ease-in;
		-webkit-transition:background-color .15s ease-in;  
		-moz-transition:background-color .15s ease-in;  
		-o-transition:background-color .15s ease-in;
}

.banner .button:hover{
	background-color: rgba(255, 255, 255, 0.15);
}

.home .banner{
	background-image: url(images/banner-paul.jpg);
}

.contact .banner{
	background-image: url(images/banner-contact.jpg);
	text-align: left;
}

.contact .banner h1{
	text-align: left;
}

.contact .banner p{
	/* width: 610px; */
	width: 53.0434782609%;
	margin: 0px;
	margin-bottom: 65px;
}

.contact .banner .button{
	margin-right: 50px;
}

.about .banner{
	/* height: 450px; */
	height: auto;
	background-image: url(images/about-map.jpg);
}

.about  .banner .content{
	/* padding-top: 218px; */
	padding-top: 0px;
}

.about  .banner img{
	/*
	width: 666px;
	height: 231px;
	*/
	width: 57.9130434783%;
	display: block;
	margin: auto;
	margin-top: 12%;
}

.process .banner{
	background-image: url(images/banner-process.jpg);
}

.process .banner .content{
	padding-top: 130px;
}

.process .banner .logo{
	width: 213px;
	height: 55px;
	margin-bottom: 75px;
}

.jobs .banner{
	background-image: url(images/banner-jobs2.jpg);
	text-align: left;
}

.jobs .banner h1{
	text-align: left;
}

.jobs .banner p{
	/* width: 610px; */
	width: 53.0434782609%;
	margin: 0px;
	margin-bottom: 65px;
}

.jobs .banner .button{
	margin-right: 50px;
}

/* jobs banner - individual jobs pages */
.banner-short {
  height: 200px;  
  }
.banner-short .content {
  padding-top: 60px;
  }

/*-----------------------------------------------------------------------------------*/
/*	5.	Intro
/*-----------------------------------------------------------------------------------*/

.intro{
	background-color: #f4f4f4;
	padding: 45px 0px;
}

.intro p{
	/* width: 770px; */
	width: 67%;
	font-size: 28px;
	line-height: 40px;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	float: left;
	margin-top: 25px;
}

.diagonal{
	/* width: 75px; */
	width: 6.52173913043%;
	/* height: 186px; */
	float: right;
	display: block;
	margin-right: 35px;
}

.triple{
	/* width: 213px; */
	width: 18.5217391304%;
	/* height: 55px; */
	float: right;
	display: block;
	margin-top: 65px;
}

.contact .intro p{
	margin-top: 50px;
}

.about .intro{
	background-color: #383d3e;
}

.about .intro p{
	color: #fff;
	width: auto;
	padding: 0px 70px;
}

/*-----------------------------------------------------------------------------------*/
/*	6.	Our Process Home Page
/*-----------------------------------------------------------------------------------*/

#our-process{
	background-color: #f4f4f4;
}

#our-process h2{
	font-weight: normal;
	margin-bottom: 40px;
}

#our-process a{
	width: 345px;
	background-color: #fff;
	box-shadow:0px 0px 5px #eeeeee;
		-webkit-box-shadow:0px 0px 5px #eeeeee;
		-moz-box-shadow:0px 0px 5px #eeeeee;
	border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		-khtml-border-radius: 3px;
	float: left;
	margin-bottom: 165px;
	margin-right: 57px;
}

#our-process .info{
	padding: 31px 20px;
}

#our-process a h3{
	font-size: 20px;
	margin-bottom: 15px;
	transition:color .15s ease-in;
		-webkit-transition:color .15s ease-in;  
		-moz-transition:color .15s ease-in;  
		-o-transition:color .15s ease-in;  
}

#our-process a p{
	color: #999999;
	font-family: 'Lato', sans-serif;
	margin-bottom: 20px;
}

#our-process a span{
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 16px;
	font-style: italic;
	color: #84999b;
	float: left;
	transition:color .15s ease-in;
		-webkit-transition:color .15s ease-in;  
		-moz-transition:color .15s ease-in;  
		-o-transition:color .15s ease-in;  
}

#our-process a .arrow{
	width: 32px;
	height: 15px;
	margin-left: 10px;
	background-image: url(images/process-arrow.png);
	background-repeat: no-repeat;
	float: left;
	margin-top: 5px;
}

#our-process a .arrow img{
	width: 32px;
	height: 15px;
	display: block;
	opacity: 0;
	transition:opacity .15s ease-in;
		-webkit-transition:opacity .15s ease-in;  
		-moz-transition:opacity .15s ease-in;  
		-o-transition:opacity .15s ease-in;  
}

#our-process a .image-area{
	/* height: 191px; */
	background-color:#cd6e57;
}

#our-process a .image-area .image{
	/* width: 345px; */
	width: 100%;
	display: block;
	transition:all .15s ease-in;
		-webkit-transition:all .15s ease-in;  
		-moz-transition:all .15s ease-in;  
		-o-transition:all .15s ease-in;  
}

#our-process a .icon{
	/*
	width: 104px;
	height: 104px;
	*/
	width: 30.1449275362%;
	margin: auto;
	display: block;
	opacity: 0;
	transition:opacity .15s ease-in;
		-webkit-transition:opacity .15s ease-in;  
		-moz-transition:opacity .15s ease-in;  
		-o-transition:opacity .15s ease-in;
	margin-top: -42%;
	/* margin-top: -145px; */
	/* margin-bottom: 45px; */
	margin-bottom: 14%;
	position: relative;
	z-index: 99;
}

#our-process a:hover .arrow img{
	opacity: 1;
}

#our-process a:hover h3, #our-process a:hover span{
	color: #cd6e57;
}

#our-process a:hover .image-area .image{
	opacity: .35;
	filter: blur(4px);
		-webkit-filter: blur(4px);
		-moz-filter: blur(4px);
		-o-filter: blur(4px);
		-ms-filter: blur(4px);
}

#our-process a:hover .icon{
	opacity: 1;
}

/*-----------------------------------------------------------------------------------*/
/*	7.	Timeline
/*-----------------------------------------------------------------------------------*/

#timeline{
	background-color: #f4f4f4;
	padding-bottom: 65px;
}

#timeline .content{
	width: 740px;
}

#timeline .entry{
	background-image: url(images/timeline-bullet-bg.png);
	background-repeat: no-repeat;
	background-position: 60px 0px;
	background-size: 51px 742px;
	margin-bottom: 6px;
}

#timeline .entry p{
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	width: 560px;
	float: right;
	font-size: 18px;
	line-height: 24px;
	font-weight: 300;
	margin-bottom: 50px;
}

#timeline .entry h2{
	width: 560px;
	float: right;
	font-size: 22px;
	line-height: 22px;
	font-weight: normal;
	font-style: italic;
	margin-bottom: 15px;
	margin-top: 15px;
}

#timeline .entry h3{
	color: #cd6e57;
	font-size: 18px;
	float: left;
	margin-top: 15px;
}

#timeline .top{
	height: 75px;
	background-position: 60px -100px;
}

/*-----------------------------------------------------------------------------------*/
/*	7.5	JobList
/*-----------------------------------------------------------------------------------*/

#joblist{
	background-color: #f4f4f4;
	padding-bottom: 65px;
}

#joblist .content{
	width: 840px;
}

#joblist .entry{
	background-image: url(images/timeline-bullet-bg.png);
	background-repeat: no-repeat;
	background-position: 180px 0px;
	background-size: 51px 742px;
	margin-bottom: 6px;
}

#joblist .entry p,
#joblist .entry ul {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	width: 560px;
	float: right;
	font-size: 18px;
	line-height: 24px;
	font-weight: 300;
	margin-bottom: 50px;
}

#joblist .entry h2{
	width: 560px;
	float: right;
	font-size: 22px;
	line-height: 26px;
	font-weight: normal;
	font-style: italic;
	margin-bottom: 15px;
	margin-top: 15px;
}

#joblist .entry h3{
	color: #cd6e57;
	font-size: 18px;
	line-height: 22px;
	float: left;
	margin-top: 15px;
	width: 150px;
}

#joblist .top{
	height: 75px;
	background-position: 180px -100px;
}
#joblist .entry ul {
  list-style-type: disc;
  }
#joblist .entry li {
  margin-bottom: .5em;
  margin-left: 1em;
  }

/*-----------------------------------------------------------------------------------*/
/*	8.	Team
/*-----------------------------------------------------------------------------------*/

#team{
	padding: 75px 0px;
}

#team h2{
	font-size: 36px;
	line-height: 36px;
	color: #cd6e57;
	text-align: center;
	margin-bottom: 115px;
}

#team .person{
	/* width: 485px; */
	width: 42.1739130435%;
	float: left;
	/* margin: 0px 45px 50px 45px; */
	margin: 0px 3.91304347826% 50px 3.91304347826%;
}

#team .person h3{
	font-size: 18px;
	line-height: 18px;
	margin-bottom: 7px;
}

#team .person h4{
	color: #cd6e57;
	font-size: 18px;
	line-height: 18px;
	font-weight: normal;
	margin-bottom: 20px;
}

#team .person p{
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	line-height: 24px;
}

#team .person .headshot{
	/* width: 485px; */
	/* height: 298px; */
	background-color: #51534a;
	position: relative;
	z-index: 99;
}

#team .person .headshot .headshot-image{
	width: 100%;
	transition:opacity .15s ease-in;
		-webkit-transition:opacity .15s ease-in;  
		-moz-transition:opacity .15s ease-in;  
		-o-transition:opacity .15s ease-in;
	display: block;
}

#team .person:hover .headshot-image{
	opacity: .5;
}

#team .person:hover ul{
	opacity: 1;
	z-index: 99;
}

#team .person:hover ul li a{
	display: inline-block;
}

#team .person ul{
	height: 69px;
	margin-top: -35.5%;
	margin-bottom: 24.5%;
	position: relative;
	z-index: 0;
	text-align: center;
	opacity: 0;
	transition:opacity .15s ease-in;
		-webkit-transition:opacity .15s ease-in;  
		-moz-transition:opacity .15s ease-in;  
		-o-transition:opacity .15s ease-in;
}

#team .person li{
	display: inline;
	/* margin-right: 20px; */
	margin-right: 4.12371134021%;
}

#team .person li:last-child{
	margin-right: 0px;
}

#team .person li a{
	width: 69px;
	height: 69px;
	display: inline-block;
	background-repeat: no-repeat;
	background-size: 69px 138px;
	display: none;
}

#team .person li a:hover{
	background-position: 0px -69px;
}

#team .person .twitter{
	background-image: url(images/social-twitter.png);
}

#team .person .youtube{
	background-image: url(images/social-youtube.png);
}

#team .person .git{
	background-image: url(images/social-git.png);
}

#team .person .linkedin{
	background-image: url(images/social-linkedin.png);
}

.js-video {
	height: 0;
	padding-top: 25px;
	padding-bottom: 67.5%;
	/* margin-bottom: -255px; */
	position: relative;
	overflow: hidden;
	display: none;
}
.js-video.vimeo {
	padding-top: 0;
}
.js-video.widescreen {
	padding-bottom: 57.25%;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}

/* Responsive */
@media (max-width: 767px) {
	.js-video {
		padding-top: 0;
	}
}

/*-----------------------------------------------------------------------------------*/
/*	9.	Our Process Page
/*-----------------------------------------------------------------------------------*/

.process p{
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	line-height: 30px;
	font-weight: 300;
}

.process h2{
	font-size: 36px;
	line-height: 36px;
	color: #cd6e57;
}

#discovery{
	background-color: #f4f4f4;
	padding: 80px 0px;
}

#discovery img{
	/* width:450px; */
	width: 39.1304347826%;
	float: right;
	margin-right: 40px;
}

#discovery p,
#discovery h2{
	/* width: 560px; */
	width: 48.6956521739%;
	margin-left: 60px;
}

#discovery p{
	float: left;
}

#discovery ul{
	float: right;
	margin-top: 75px;
	margin-right: 60px;
}

#discovery li{
	display: inline;
	margin-left: 35px;
}

#discovery li:first-child{
	margin-left: 0px;
}

#discovery li img{
	width:106px;
	/* height:157px; */
	transition:opacity .15s ease-in;
		-webkit-transition:opacity .15s ease-in;  
		-moz-transition:opacity .15s ease-in;  
		-o-transition:opacity .15s ease-in;  
}

#discovery li:hover img{
	opacity: .75;
}

#discovery .divider{
	margin-bottom: 70px;
}

#strategy{
	color: #fff;
	background-color: #373d3e;
	background-image: url(images/strategy-bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 85px 0px;
}

#strategy img{
	/* width:450px; */
	width: 39.1304347826%;
	/* height:356px; */
	float: left;
	margin-left: 40px;
	margin-right: 120px;
	margin-bottom: 10px;
}

#development{
	background-color: #f4f4f4;
	padding-top: 100px;
}

#development p{
	/* width: 860px; */
	width: 74.7826086957%;
	margin: auto;
	text-align: center;
	margin-bottom: 90px;
}

#development h2{
	text-align: center;
}

#development h3{
	margin-bottom: 35px;
}

#development .dev-image{
	/* width: 966px; */
	width: 84%;
	/* height: 519px; */
	display: block;
	margin: auto;
}

#development li{
	/* width: 275px; */
	width: 23.9130434783%;
	float: left;
	/* margin: 0px 0px 110px 80px; */
	margin-bottom: 80px;
	margin-left: 6.95652173913%;
}

#development li img{
	width: 28px;
	height: 28px;
	margin-bottom: -5px;
	margin-right: 10px;
}

/*-----------------------------------------------------------------------------------*/
/*	10.	Testimonials
/*-----------------------------------------------------------------------------------*/

#testimonials{
	background-color: #cd6e57;
	text-align: center;
	color: #fff;
	padding: 85px 0px 65px 0px;
}

/*
#testimonials .content, #testimonials li{
	border: 1px solid black;
}
*/

#testimonials img{
	width: 67px;
	height: 62px;
	margin-bottom: 40px;
}

#testimonials ul li p{
	/* width: 820px; */
	width: 71.3043478261%;
	font-family: 'Lato', sans-serif;
	font-size: 24px;
	line-height: 34px;
	font-style: italic;
	color: #fff;
	margin: auto;
	margin-bottom: 60px;
}

#testimonials ul li h2{
	font-size: 30px;
	line-height: 30px;
	color: #fff;
	font-weight: normal;
	margin-bottom: 10px;
}

#testimonials ul li h3{
	font-size: 18px;
	line-height: 18px;
	color: #df9c8b;
	font-weight: normal;
	margin-bottom: 0px;
}

#testimonials-next a,
#testimonials-prev a{
	width: 67px;
	height: 136px;
	display: block;
	position: absolute;
	margin-top: -300px;
	text-indent: -200px;
	transition:opacity .15s ease-in,margin .35s ease-in;
		-webkit-transition:opacity .15s ease-in,margin .35s ease-in;  
		-moz-transition:opacity .15s ease-in,margin .35s ease-in;  
		-o-transition:opacity .15s ease-in,margin .35s ease-in;
	overflow: hidden;
}

#testimonials-next a:hover,
#testimonials-prev a:hover{
	opacity: .75;
}

#testimonials-next a{
	background-image: url(images/testimonial_arrow_right.png);
	background-repeat: no-repeat;
	right: 0px;
	/* margin-right: 60px; */
	margin-right: 5.21739130435%;
}

#testimonials-prev a{
	background-image: url(images/testimonial_arrow_left.png);
	background-repeat: no-repeat;
	left: 0px;
	/* margin-left: 60px; */
	margin-left: 5.21739130435%;
}

/*-----------------------------------------------------------------------------------*/
/*	11.	Contact
/*-----------------------------------------------------------------------------------*/

#contact{
	padding: 60px 0px 80px 0px;
	font-size: 24px;
	line-height: 30px;
	letter-spacing: 1px;
}

#contact a{
	color: #84999b;
}

#contact .address:hover a,
#contact .phone:hover a{
	color: #cd6e57;
}

#contact img{
	width: 69px;
	height: 69px;
	float: left;
	margin-right: 20px;
}

#contact h2{
	font-size: 36px;
	color: #cd6e57;
	text-transform: uppercase;
	margin-bottom: 45px;
}

#contact .address{
	float: left;
	margin-left: 75px;
}

#contact .phone{
	float: right;
	margin-right: 75px;
}

#contact .content .address div,
#contact .content .phone div{
	float: left;
	margin-top: 17px;
}

.contact .banner .call-mobile{
	display: none;
}

.contact .phone .call-mobile{
	display: none;
}


/*-----------------------------------------------------------------------------------*/
/*	12.	Client Stories
/*-----------------------------------------------------------------------------------*/

/* home page carousel */

#clients {

  }

#clients .carousel-panel {
  background-color: #dedede;
  text-align: center;
  background-size: cover;
  }
.panel-inner-wrapper {
  padding: 20% 25%;
  }
#clients .carousel-panel h3 {
  margin-bottom: .5em;
  color: #fff;
  font-size: 1.4em;
  font-weight: 300;
  }
#clients .carousel-panel p {
  font-size: .75em;
  font-weight: 300;
  line-height: 1.5em;
  }  
#clients .carousel-panel a {
  display: block;
  width: 100%;
  height: 100%;
  }
#clients .carousel-panel a:link,
#clients .carousel-panel a:visited {
  color: #fff;
  }
#clients-next a, #clients-prev a {
  position: absolute;
  overflow: hidden;
  display: block;
  text-indent: 0;
  width: 20px;
  height: 20px;
  }
.panel-gc {
  background: transparent url('images/client-slider/panel_bg_gc.jpg') no-repeat 0 0;
  background-size: cover;
  }
.panel-apigrove {
  background: transparent url('images/client-slider/panel_bg_apigrove.jpg') no-repeat 0 0;
  background-size: cover;
  }
.panel-pwc {
  background: transparent url('images/client-slider/panel_bg_pwc.jpg') no-repeat 0 0;
  background-size: cover;
  }

.stories{
	background-color: #fff;
}

.side-nav{
	position: absolute;
	top: 550px;
	background-color: #e9e9e9;
	width: 83px;
	transition:width .15s ease-in;
		-webkit-transition:width .15s ease-in;  
		-moz-transition:width .15s ease-in;  
		-o-transition:width .15s ease-in; 
}

.side-nav-button{
	width: 83px;
	height: 83px;	
}

.side-nav:hover{
	width: 90px;
}

.side-nav-left .side-nav-button{
	float: right;
}

.side-nav-right .side-nav-button{
	float: left;
}

.side-nav-button img{
	width: 83px;
	height: 83px;
}

.side-nav-left{
	left: 0px;
}

.side-nav-right{
	right: 0px;
}

#case{
	padding-top: 100px;
	background-color: #fff;
}

#case iframe, #case img{
	width: 50%;
	float: left;
	display: block;
	margin: auto;
	margin-bottom: 75px;
}

#case p{
	width: 50%;
	margin: auto;
	color: #84999b;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size:28px;
	line-height:40px;
	text-align: center;
	float: right;
	margin-top: 50px;
	margin-bottom: 75px;
}

#company{
	background-image: url(images/company-bg.gif);
	background-repeat: repeat-y;
	background-position: top center;
	padding: 90px 0px 85px 0px;
}

#company .content{
	display: table;
}

#company p{
	/* width: 700px; */
	/* width: 60.8695652174%; */
	width: 92%;
	float: right;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size:20px;
	line-height:34px;
	color: #fff;
	margin-bottom: 0px;
}

#company .company-logo{
	/* width: 390px; */
	width: 33.9130434783%;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

#company .company-logo img{
	margin: auto;
}

#process{
	padding: 80px 0px;
}

#process h2{
	/* margin-left: 58px; */
	margin-left: 5.04347826087%;
}

#process .column{
	/* margin-left: 58px; */
	margin-left: 5.04347826087%;
	/* width: 488px; */
	width: 42.4347826087%;
	float: left;
	margin-bottom: 50px;
}

#process blockquote{
	color: #d26d54;
	font-family: 'Lato', sans-serif;
	font-style: italic;
	font-size: 36px;
	line-height: 40px;
	text-align: center;
	clear: both;
	border-top: 1px solid #dcdcdd;
	border-bottom: 1px solid #dcdcdd;
	padding: 100px 90px 120px 90px;
	margin-bottom: 60px;
}

.divider{
	width: 285px;
	height: 0px;
	border-bottom: 1px solid #dcdcdd;
	margin: auto;
	margin-bottom: 70px;
}

#process .screen-image{
	margin-bottom: 50px;
	overflow: visible;
}

#process .screen-image img{
	width: 193.032786885%;
	/*
	width:942px;
	height:719px;
	*/
	margin-top: -50px;
}

#process .process-slider{
	/* width: 960px; */
	width: 83.4782608696%;
	margin: auto;
	margin-bottom: 50px;
}

#process .process-slider img{
	/*
	width: 960px;
	height: 500px;
	*/
	width: 100%;
}

#process .process-slider .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

#process .process-slider .bx-pager .bx-pager-item,
#process .process-slider .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

#process .process-slider .bx-pager.bx-default-pager a {
	background: #d9d9da;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		-khtml-border-radius: 5px;
	transition:background-color .15s ease-in;
		-webkit-transition:background-color .15s ease-in;  
		-moz-transition:background-color .15s ease-in;  
		-o-transition:background-color .15s ease-in;	
}

#process .process-slider .bx-pager.bx-default-pager a:hover,
#process .process-slider .bx-pager.bx-default-pager a.active {
	background: #d26d54;
}

.technical-heading{
	margin: 70px 0px 80px 0px;
}

.technical{
	/* width:308px; */
	width: 26.7826086957%;
	/* margin-left: 58px; */
	margin-left: 5.04347826087%;
	float: left;
	margin-bottom: 100px;
}

.technical h3{
	text-align: center;
	border-bottom: 1px solid #ececec;
	padding-bottom: 35px;
	margin-bottom: 39px;
}

.technical img{
	display: block;
	margin: auto;
	margin-bottom: 15px;
	width: 62px;
}

.technical li{
	list-style-type: disc;
	font-size: 14px;
	line-height: 16px;
	padding-bottom: 39px;
	padding-left: 15px;
	margin-left: 30px;
}

.gray, .gray h3{
	color: #84999b;
}

.orange, .orange h3{
	color: #cd6e57;
}

.tan, .tan h3{
	color: #b9b2a1;
}

.green, .green h3{
	color: #939b84;
}

.purple, .purple h3{
	color: #9d8499;
}

.blue, .blue h3{
	color: #6f9eae;
}

/*-----------------------------------------------------------------------------------*/
/*	13.	Footer Styles
/*-----------------------------------------------------------------------------------*/

#footer{
	font-family: 'Lato', sans-serif;
	background-color: #2e3133;
	color: #fff;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 1px;
	height: 395px;
}

#footer h4{
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	color: #838485;
	text-transform: uppercase;
	line-height: 16px;
	margin-bottom: 35px;
}

#footer a{
	color: #fff;
}

#footer a:hover{
	color: #cd6e57;
}

#footer .col{
	float: left;
	/* margin-right: 65px; */
	margin-right: 5.65217391304%;
	margin-top: 35px;
}

#footer ul{
	margin-right: 75px;
}

#footer .map{
	width: 566px;
	height: 395px;
	/* width: 49.2173913043%; */
	float: right;
	position: absolute;
	right: 0;
	transition:opacity .25s ease-in;
		-webkit-transition:opacity .25s ease-in;  
		-moz-transition:opacity .25s ease-in;  
		-o-transition:opacity .25s ease-in; 
	background-image: url(images/footer-map.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

#footer .map:hover{
	opacity: .8;
}

/*-----------------------------------------------------------------------------------*/
/*	14.	Responsive
/*-----------------------------------------------------------------------------------*/

/* screens (2560px) ----------- */
@media screen and (max-width: 1450px) {
	
	#footer .map{
		width: 35%;
	}

}

/* screens (1150px) ----------- */
@media screen and (max-width: 1150px) {
	
	/*-----------------------------------------------------------------------------------*/
	/*	1.	Document Setup (body, common classes, vertical rhythm, structure etc)
	/*-----------------------------------------------------------------------------------*/
	
	.content{
		width: 96%;
		padding: 0px 2%;
		/* border: 1px solid red; */
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	2.	Header
	/*-----------------------------------------------------------------------------------*/
	
	/*-----------------------------------------------------------------------------------*/
	/*	3.	Navigation
	/*-----------------------------------------------------------------------------------*/
	
	#nav li {
		margin-left: 35px;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	4.	Banner
	/*-----------------------------------------------------------------------------------*/
	
	.banner h1{
		font-size: 35px;
		margin-bottom: 40px;
	}
	
	.banner p{
		width: 700px;
	}
	
	.contact .banner br{
		display: none;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	5.	Intro
	/*-----------------------------------------------------------------------------------*/
	
	/*-----------------------------------------------------------------------------------*/
	/*	6.	Our Process Home Page
	/*-----------------------------------------------------------------------------------*/
	
	#our-process a{
		width: 30%;
		margin-right: 5%;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	7.	Timeline
	/*-----------------------------------------------------------------------------------*/
	
	/*-----------------------------------------------------------------------------------*/
	/*	8.	Team
	/*-----------------------------------------------------------------------------------*/
	
	#team .person{
		width: 46%;
		margin: 0px 2% 50px 2%;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	9.	Our Process Page
	/*-----------------------------------------------------------------------------------*/
	
	#discovery p,
	#discovery h2{
		margin-left: 0px;
	}
	
	#discovery ul{
		margin-right: 0px;
	}
	
	#discovery li{
		margin-left: 20px;
	}
	
	#development li{
		width: 25%;
		margin-left: 6%;
	}

	/*-----------------------------------------------------------------------------------*/
	/*	10.	Testimonials
	/*-----------------------------------------------------------------------------------*/
	
	/*-----------------------------------------------------------------------------------*/
	/*	11.	Contact
	/*-----------------------------------------------------------------------------------*/
	
	#contact .address{
		margin-left: 0px;
	}
	
	#contact .phone{
		margin-right: 0px;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	12.	Client Stories
	/*-----------------------------------------------------------------------------------*/
	
	.side-nav{
		
	}
	
	#company{
		background-image: none;
		background-color: #cd6e57;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	13.	Footer Styles
	/*-----------------------------------------------------------------------------------*/
	
	#footer .col{
		margin-right: 3%;
	}
	
	#footer ul{
		margin-right: 0px;
	}
}

/* screens (955px------------- */
@media screen and (max-width: 955px) {

  #clients .carousel-panel {
    height: 175px;
  }  
}

/* screens (935px) ----------- */
@media screen and (max-width: 935px) {
	#footer .map{
		width: 22%;
	}
}

/* screens (768px) ----------- */
@media screen and (max-width: 768px) {
	
	/*-----------------------------------------------------------------------------------*/
	/*	1.	Document Setup (body, common classes, vertical rhythm, structure etc)
	/*-----------------------------------------------------------------------------------*/
	
	.content{
		/* border: 1px solid orange; */
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	2.	Header
	/*-----------------------------------------------------------------------------------*/
	
	#header a img{
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	3.	Navigation
	/*-----------------------------------------------------------------------------------*/
	
	#nav {
		width: 100%;
		text-align: center;
		font-size: 17px;
		padding-bottom: 0px;
	}
	
	#nav li{
		width: 25%;
		margin: 0px;
		display: block;
		float: left;
	}
	
	#nav ul{
		margin-top:55px;
		left: 50%;
		margin-left: -207px;
		width: 100%;
	}
	
	#nav ul, #nav ul li{
		width: auto;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	4.	Banner
	/*-----------------------------------------------------------------------------------*/
	
	.banner{
		height: auto;
	}
	
	.banner .content{
		padding-top: 80px;
		padding-bottom: 100px;
	}
	
	.banner h1{
		/*
		font-size: 50px;
		line-height: 50px;
		*/
		margin-bottom: 30px;
	}
	
	.banner p{
		font-size: 16px !important;
		line-height: 22px !important;
		width: 90%;
	}
	
	.about .banner .content{
		padding: 0px;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	5.	Intro
	/*-----------------------------------------------------------------------------------*/
	
	.intro p{
		width: 100%;
		font-size: 26px;
		line-height: 38px;
		text-align: center;
		float: none;
		margin: 0px;
	}
	
	.diagonal{
		display: none;
	}
	
	.triple{
		display: none;
	}
	
	.contact .intro p{
		margin-top: 0px;
	}
	
	.about .intro p{
		padding: 0px;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	6.	Our Process Home Page
	/*-----------------------------------------------------------------------------------*/
	
	/*-----------------------------------------------------------------------------------*/
	/*	7.	Timeline
	/*-----------------------------------------------------------------------------------*/
	
	#timeline .content{
		width: 100%;
	}
	
	#timeline .entry p{
		width: 70%;
		margin-right: 3%;
	}
	
	#timeline .entry h2{
		width: 70%;
		margin-right: 3%;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	8.	Team
	/*-----------------------------------------------------------------------------------*/
	
	#team .person li a{
		width: 60px;
		height: 60px;
		background-size: 60px 120px;
	}
	
	#team .person li a:hover{
		background-position: 0px -60px;
	}
	
	#team .person ul{
		margin-top: -37%;
		margin-bottom: 23%;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	9.	Our Process Page
	/*-----------------------------------------------------------------------------------*/
	
	#discovery img{
		float: none;
		margin: 0px;
		display: block;
		margin: auto;
	}
	
	#discovery .divider{
		margin-bottom: 60px;
	}
	
	#discovery p,
	#discovery h2{
		text-align: center;
		width: 100%;
		margin-left: 0px;
	}
	
	#discovery p{
		float: none;
	}
	
	#discovery ul{
		text-align: center;
		float: none;
		margin-top: 0px;
		margin-bottom: 30px;
	}
	
	#strategy{
		padding: 75px 0px;
		text-align: center;
	}
	
	#strategy img{
		float: none;
		margin: 0px;
		margin-bottom: 40px;
	}
	
	#development{
		padding-top: 75px;
	}
	
	#development p{
		width: 100%;
		margin-bottom: 50px;
	}
	
	#development h3{
		margin-bottom: 20px;
	}
	
	#development li{
		width: 85%;
		float: none;
		margin: auto;
		margin-bottom: 50px;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	10.	Testimonials
	/*-----------------------------------------------------------------------------------*/
	
	#testimonials{
		padding: 65px 0px 55px 0px;
	}

	#testimonials ul li p{
		font-size: 20px;
		line-height: 28px;
		margin-bottom: 40px;
	}
	
	#testimonials-next a,
	#testimonials-prev a{
		width: 51px;
		height: 120px;
		display: block;
		position: absolute;
		margin-top: -300px;
		text-indent: -200px;
		background-size: 51px 120px;
	}
	
	#testimonials-next a{
		margin-right: 2%;
	}
	
	#testimonials-prev a{
		margin-left: 2%;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	11.	Contact
	/*-----------------------------------------------------------------------------------*/
	
	#contact{
		padding: 60px 0px 30px 0px;
	}
	
	#contact .address,
	#contact .phone{
		float: none;
		width: 465px;
		margin: auto;
		margin-bottom: 50px;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	12.	Client Stories
	/*-----------------------------------------------------------------------------------*/
	
	.side-nav-button,
	.side-nav-button img{
		width: 70px;
		height: 70px;	
	}
	
	#case iframe, #case img{
		width: 65%;
		float: none;
	}
	
	#case p{
		width: 100%;
		float: none;
	}
	
	#company{
		padding: 75px 0px;
	}
	
	#company p{
		width: 100%;
		text-align: center;
	}
	
	#company .company-logo{
		width: 50%;
		margin: auto;
		margin-bottom: 30px;
		display: block;
	}
	
	#process .divider{
		margin-bottom: 55px;
	}
	
	#process h2{
		margin-left: 0px;
	}
	
	#process .column{
		margin-left: 0px;
		width: 100%;
		float: none;
		margin-bottom: 30px;
	}
	
	#process .screen-image{
		display: none;
	}
	
	#process .process-slider{
		width: 100%;
	}
	
	#process blockquote{
		font-size: 30px;
		line-height: 34px;
		padding: 70px 60px 80px 60px;
		margin-bottom: 30px;
	}
	
	.technical{
		width: 100%;
		margin-left: 0px;
		float: none;
		margin-bottom: 50px;
	}
	
	.technical h3{
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
	
	.technical img{
		margin-bottom: 15px;
	}
	
	.technical li{
		padding-bottom: 20px;
		padding-left: 15px;
		margin-left: 30px;
	}

	
	/*-----------------------------------------------------------------------------------*/
	/*	13.	Footer Styles
	/*-----------------------------------------------------------------------------------*/
	
	#footer{
		height: auto;
	}
	
	#footer h4{
		margin-bottom: 10px;
	}
	
	#footer ul{
		margin-right: 0px;
	}
	
	#footer .col{
		text-align: center;
		width: 100%;
		margin-bottom: 35px;
	}
	
	#footer .map{
		display: none;
	}

}

/* screens (480px) ----------- */
@media screen and (max-width: 480px) {

	/*-----------------------------------------------------------------------------------*/
	/*	1.	Document Setup (body, common classes, vertical rhythm, structure etc)
	/*-----------------------------------------------------------------------------------*/
	
	.content{
		/* border: 1px solid yellow; */
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	2.	Header
	/*-----------------------------------------------------------------------------------*/
	
	#header{
		display: none;
	}
	
	/*
	#header .content{
		width: 92%;
		padding: 20px 4%;
	}
	
	#header a img{
		margin: 0px;
		float: right;
		width: 105px;
	}
*/
	
	#header-mobile{
		display: block;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	3.	Navigation
	/*-----------------------------------------------------------------------------------*/
	
	#nav {
		margin-bottom: 0px;
		display: none;
	}
	/*
	#nav li{
		width: 50%;
		margin-bottom: 47px;
	}
	*/
	
	/*-----------------------------------------------------------------------------------*/
	/*	4.	Banner
	/*-----------------------------------------------------------------------------------*/
	
	.contact .banner .content{
		padding-bottom: 50px;
	}
	
	.contact .banner .button{
		margin-bottom: 20px;
	}
	.process .banner .content{
		padding-top: 75px;
		padding-bottom: 40px;
	}
	
	.process .banner .logo{
		margin-bottom: 35px;
	}
	
	.contact .banner .call-mobile{
		display:inline-block;
	}
	
	.contact .banner .call-screen{
		display: none;
	}
	
	.contact .phone .call-mobile{
		display: block;
	}
	
	.contact .phone .call-screen{
		display: none;
	}

	/*-----------------------------------------------------------------------------------*/
	/*	5.	Intro
	/*-----------------------------------------------------------------------------------*/
	
	/*-----------------------------------------------------------------------------------*/
	/*	6.	Our Process Home Page
	/*-----------------------------------------------------------------------------------*/
	
	#our-process h2{
		text-align: center;
	}
	
	#our-process a{
		width: 100%;
		margin-bottom: 50px;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	7.	Timeline
	/*-----------------------------------------------------------------------------------*/
	
	#timeline .entry{
		background-position: 50px 11px;
		background-size: 26px 371px;
	}
	
	#timeline .entry p{
		width: 70%;
		margin-right: 4%;
	}
	
	#timeline .entry h2{
		width: 70%;
		margin-right: 4%;
	}
	
	#timeline .top{
		height: 75px;
		background-position: 50px -100px;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	8.	Team
	/*-----------------------------------------------------------------------------------*/
	
	#team .person{
		width: 100%;
		margin: 0px;
	}
	
	#team .person li a{
		width: 69px;
		height: 69px;
		background-size: 69px 138px;
	}
	
	#team .person li a:hover{
		background-position: 0px -69px;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	9.	Our Process Page
	/*-----------------------------------------------------------------------------------*/
	
	/*-----------------------------------------------------------------------------------*/
	/*	10.	Testimonials
	/*-----------------------------------------------------------------------------------*/
	
	#testimonials{
		padding: 50px 0px 50px 0px;
	}

	#testimonials ul li p{
		font-size: 12px;
		line-height: 16px;
		margin-bottom: 25px;
		width: 90%;
	}
	
	#testimonials-next a,
	#testimonials-prev a{
		display: none;
	}
	
	#testimonials ul li h2{
		font-size: 22px;
		line-height: 22px;
		margin-bottom: 10px;
	}
	
	#testimonials ul li h3{
		font-size: 14px;
		line-height: 14px;
		margin-bottom: 0px;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	11.	Contact
	/*-----------------------------------------------------------------------------------*/
	
	#contact{
		text-align: center;
	}
	
	#contact h2{
		margin-bottom: 15px;
	}
	
	#contact .address div,
	#contact .phone div,
	#contact .address,
	#contact .phone{
		width: 100%;
	}
	
	#contact img{
		float: none;
		margin-right: 20px;
		clear: both;
		display: block;
		margin: auto;
	}
	
	.contact .banner{
		background-position: -750px center;
	}


	
	/*-----------------------------------------------------------------------------------*/
	/*	12.	Client Stories
	/*-----------------------------------------------------------------------------------*/
	
	.side-nav{
		top: 0px;
	}
	
	#case iframe, #case img{
		width: 100%;
		margin-bottom: 50px;
	}
	
	#case p{
		width: 100%;
		font-size:20px;
		line-height:32px;
		margin-bottom: 50px;
	}
	
	#company .company-logo{
		width: 75%;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	13.	Footer Styles
	/*-----------------------------------------------------------------------------------*/
	
}

/* screens (320px) ----------- */
@media screen and (max-width: 320px) {
	
	/*-----------------------------------------------------------------------------------*/
	/*	1.	Document Setup (body, common classes, vertical rhythm, structure etc)
	/*-----------------------------------------------------------------------------------*/
	
	.content{
		/* border: 1px solid purple; */
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	2.	Header
	/*-----------------------------------------------------------------------------------*/
	
	/*-----------------------------------------------------------------------------------*/
	/*	3.	Navigation
	/*-----------------------------------------------------------------------------------*/
	
	/*-----------------------------------------------------------------------------------*/
	/*	4.	Banner
	/*-----------------------------------------------------------------------------------*/
	
	.contact .banner .content{
		padding-top: 50px;
		padding-bottom: 50px;
	}
	
	.contact .banner{
		text-align: center;
	}
	
	.contact .banner h1{
		text-align: center;
		font-size: 45px;
		line-height: 45px;
	}
	
	.contact .banner p{
		width: 100%;
		margin-bottom: 30px;
	}
	
	.contact .banner .button{
		margin-right: 0px;
		clear: both;
		display: block;
		margin-bottom: 20px;
	}
	
	.contact .banner{
		background-position: -800px center;
	}
	
	.contact .banner .call-mobile{
		display: block;
	}
	
	.contact .banner .call-screen{
		display: none;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	5.	Intro
	/*-----------------------------------------------------------------------------------*/
	
	/*-----------------------------------------------------------------------------------*/
	/*	6.	Our Process Home Page
	/*-----------------------------------------------------------------------------------*/
	
	/*-----------------------------------------------------------------------------------*/
	/*	7.	Timeline
	/*-----------------------------------------------------------------------------------*/
	
	/*-----------------------------------------------------------------------------------*/
	/*	8.	Team
	/*-----------------------------------------------------------------------------------*/
	
	#team .person ul{
		margin-top: -42%;
		margin-bottom: 22%;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	9.	Our Process Page
	/*-----------------------------------------------------------------------------------*/
	
	#discovery li img{
		width:75px;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	10.	Testimonials
	/*-----------------------------------------------------------------------------------*/
	
	/*-----------------------------------------------------------------------------------*/
	/*	11.	Contact
	/*-----------------------------------------------------------------------------------*/
	
	#contact{
		font-size: 18px;
		line-height: 24px;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	12.	Client Stories
	/*-----------------------------------------------------------------------------------*/
	
	#process blockquote{
		font-size: 26px;
		line-height: 30px;
		padding: 20px 10px 30px 10px;
		margin-bottom: 30px;
	}
	
	/*-----------------------------------------------------------------------------------*/
	/*	13.	Footer Styles
	/*-----------------------------------------------------------------------------------*/

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	
	#testimonials-next a,
	#testimonials-prev a{
		display: none;
	}
	
	#process .process-slider .bx-pager {
		display: none;
	}
	
}

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

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

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {	
}

/*-----------------------------------------------------------------------------------*/
/*	15.	Retina
/*-----------------------------------------------------------------------------------*/

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {

	#our-process a .arrow{
		background-image: url(images/process-arrow@2x.png);
		background-size: 32px 15px;
	}
	
	#timeline .entry{
		background-image: url(images/timeline-bullet-bg@2x.png);
	}
	
	#footer .map{
		background-image: url(images/footer-map@2x.jpg);
		background-size: 566px 395px;
	}
	
	#team .person .twitter{
		background-image: url(images/social-twitter@2x.png);
		background-size: 69px 138px;
	}
	
	#team .person .youtube{
		background-image: url(images/social-youtube@2x.png);
		background-size: 69px 138px;
	}
	
	#team .person .git{
		background-image: url(images/social-git@2x.png);
		background-size: 69px 138px;
	}
	
	#team .person .linkedin{
		background-image: url(images/social-linkedin@2x.png);
		background-size: 69px 138px;
	}
	
	#mobile-nav-button{
		background-image: url(images/list-icon@2x.png);
	}
	
	#build-menu .call{
		background-image: url(images/nav-mobile-phone-icon@2x.png);
		background-size: 21px 20px;
	}
	
	#build-menu .directions{
		background-image: url(images/nav-mobile-map-icon@2x.png);
		background-size: 21px 20px;
	}
	
}

/* linkedin widget - jobs page */
#li-widget {
  padding: 1em 0;
  }

/* banner heading */
.jobs .banner h1 {
  margin-bottom: 0;
  }
/* linkedin widget */
.linkedin {
  width: auto;
  margin: 2em auto 0;
  text-align: center;
  }

/* jobs call to action */
#company.cta {
  background-image: none;
  background-color: #cd6e57;
  }

.cta a:link,
.cta a:visited {
  color: #fff; 
  border-bottom: 1px dotted #fff;
  padding: .25em;
  }
.cta a:hover {color: #fff; background-color: rgba(0,0,0,.2);}

@media screen and (max-width: 768px) {
	#joblist .content{
		width: 100%;
	}
	
	#joblist .entry {
		background-position: 120px 0;
		margin-bottom: 0;
	}
	
	#joblist .entry p,
	#joblist .entry ul {
		width: 70%;
		margin-right: 3%;
	}
	
	#joblist .entry h2{
		width: 70%;
		margin-right: 3%;
	}
	#joblist .top {
		background-position: 120px -100px;
    height: 40px;
	}
}
	
@media screen and (max-width: 480px) {
  
	#joblist .entry {
		background-position: 10px 0;
		background-size: 26px 371px;
		margin-bottom: 0;
	}
	
	#joblist .entry p,
	#joblist .entry ul {
		width: 75%;
		margin-right: 10%;
	}
	
	#joblist .entry h2 {
		width: 75%;
		margin-right: 10%;
	}

	#joblist .entry h3 {
		float: right;
		width: 75%;
		margin-right: 10%;
		margin-top: 3px;
	}
	
	#joblist .top {
		background-position: 10px -100px;
    height: 20px;
	}
}

/* contact form */
.contact_form_wrapper {
  margin-top: 2em;
  padding: 1em;
  background-color: #fff;
  border: 1px solid #dedede;
  width: 70%;
  }

/* we're hiring link */
#nav a[href="jobs.html"] {
  border: 1px solid rgba(153,153,153, 0.5);
  padding: .5em;
  }