@charset "UTF-8";
/* CSS Document */



header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

body { font-family: "proxima-nova", sans-serif; weight: 400; 
	margin: 0 auto; 
	font-size: 16px; 
	font-weight: 300;
	color: #56616C; 
	position: relative; }
	
header {
	width:100%;
	height: 100px;
	position: fixed;
	z-index: 2000;
}

#header-logo {
	float: left;
	padding: 1em 0 0 0;
	text-align: left;
	width: 50%;
	height: auto;
	overflow: auto;
}

#header-logo img {
	width: 35%;
	height: auto;
}

#menu-btn {
	float: right;
	margin: 1.25em 0 0 0;
	text-transform: uppercase;
	color: #56616C;
	letter-spacing: 2px;
	font-size: 1.4em;
	width: 10%;
	height: auto;
	overflow: auto;
	border: none;
    background: rgba(59,177,229,0);
	cursor: pointer;
	padding: 5px 0 10px 15px;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#menu-btn .icon {
	font-size: 1.3em;
}

#menu-btn.scrolled {
	background: rgba(59,177,229,0.9);
	color: #fff;
	
}

#menu-btn:hover {
	background: rgba(59,177,229,0.8);
	color: #E8EAED;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
}

#menu-btn.scrolled:hover {
	background: rgba(59,177,229,0.8);
	color: #E8EAED;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

/*---- Menu Overlay ----*/
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 3000;
    top: 0;
    left: 0;
    background: rgba(59,177,229,0.9);
    overflow-y: hidden;
    transition: 0.3s;
}

.overlay-content {
    position:absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    margin: 30px auto;
}

.overlay a {
    padding: 20px;
    text-decoration: none;
    font-size: 3em;
    color: #fff;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #E8EAED;
	background: rgba(86,97,108,0.8);
	/*background: rgba(59,177,229,1);*/
}

.closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px !important;
	font-weight: 300;
}

.closebtn img {
	width: 50px;
	height: 50px;
}

a.closebtn:hover img  {
    opacity: 0.7;
	transition: 0.3s;
}

a.closebtn:hover  {
    background: none;
}

/*---- Universal Styles ----*/
.white { color: #fff; }
.blue-dk { color: #2B3691;}
.left { float: left; height: auto; overflow: auto; }
.right { float: right; height: auto; overflow: auto; }
.blue { color: #3BB1E5; }
.purple { color: #9F54A0; }
.yellow { color: #EED537; }
.green { color: #109d49; }
.green-dk { color: #1E341E; }
.clearfix { clear: both; }
.blankline { letter-spacing: -2px; }
p { text-align: left; margin: 0 0 1em 0; line-height: 1.8em; font-size: 1.1em; }
h1 { font-size: 2.5em; font-weight: 300; text-align: center; line-height: 1.2em;  margin: 0 0 1em 0; }
h1.pad { line-height:2.5em; }
h1.lg { font-size: 3.5em; }
.body-h1 { text-align: left; margin: 0 0 0.6em 0; }
h2 { font-size: 2.2em; font-weight: 300; text-align: left; line-height: 1.2em;  margin: 0 0 0.5em 0; }
h2.pad { line-height: 1.5em; margin: 0 0 1.5em 0; }
h3 { font-size: 1.3em; font-weight: 400; line-height: 1.6em; }
.light { font-weight: 300; }
.reg { font-weight: 400; }
.bold { font-weight: 600; }
.bg-ltgray { background: #E8EAED; }
.bg-green { background: #109d49; }
.bg-blue { background: #3BB1E5; }
.bg-yellow { backgound: #EED537; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.border-purple { border-bottom: 20px solid #9F54A0; }

/*---- CONTAINERS ----*/

.wrap { width: 1280px; margin: 0 auto; position: relative; height: auto; overflow: auto; }
.wrap640 { width: 640px; margin: 0 auto; position: relative; height: auto; overflow: auto; }
#full { width: 100%; margin: 0 auto; position: relative; height: auto; overflow: auto; position: relative; z-index: 400;}
#container { width: 100%; margin: 0 auto; position: relative; padding: 10em 0; height: auto; overflow: auto; position: relative; z-index: 400; }
.half { width: 50%; }
.half-mid { width: 47% }
.half-pad { width: 40%; }
.one-third { width: 33.33% }
.two-thirds { width: 66.66%; }
.quarter { width: 25%; }
.wrap-pad { width: 1280px; margin: 0 auto; position: relative; height: auto; overflow: auto; padding: 10em 0; }
.wrap-pad-sm { width: 1280px; margin: 0 auto; position: relative; height: auto; overflow: auto; padding: 6em 0; }
.center { margin: 0 auto; text-align: center; }
.center-pad { margin: 4em auto; text-align: center; }

/*---- BUTTON TAGS ----*/

#narrow-btn a {
	width: 15%;
	height: auto;
	padding: 1em 1.5em 0.5em;
	overflow: auto;
	font-size: 1.5em;
	letter-spacing: 2px;
	line-height: 1.5em;
	text-transform: uppercase;
	float: right;
	margin: -3.5em 0 -3.5em 0;
	text-decoration: none;
	position: relative;
	z-index: 600;
}

#narrow-btn img, #narrow-btn-float img {
	width: 35px;
	height: auto;
}

#narrow-btn a.yellow, #narrow-btn-float a.yellow {
	background: #eed537;
	border-left: 25px solid #56616c;
	color: #56616c;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#narrow-btn a.yellow:hover, #narrow-btn-float a.yellow:hover {
	border-left: 25px solid #2b3136;
	color: #2b3136;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#narrow-btn a.blue {
	background: #8d97a2;
	border-left: 25px solid #3bb1e5;
	color: #fff;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#narrow-btn a.blue:hover {
	background: #56616c;
	color: #fff;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#narrow-btn-float a {
	width: 15%;
	height: auto;
	padding: 1em 1.5em 0.5em;
	overflow: auto;
	font-size: 1.5em;
	letter-spacing: 2px;
	line-height: 1.5em;
	text-transform: uppercase;
	float: right;
	text-decoration: none;
	position: relative;
	z-index: 600;
}

#narrow-btn-float a.purple {
	background: #9f54a0;
	border-left: 25px solid #3bb1e5;
	color: #fff;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#narrow-btn-float a.purple:hover {
	background: #773f78;
	color: #fff;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#short-btn a {
	width: 15%;
	height: auto;
	padding: 1em 1.5em 1em;
	overflow: auto;
	font-size: 1.5em;
	letter-spacing: 2px;
	line-height: 1.5em;
	text-transform: uppercase;
	float: right;
	margin: -2em 0 -2em 0;
	text-decoration: none;
	position: relative;
	z-index: 600;
}

#short-btn img {
	width: 50px;
	height: auto;
}

#short-btn a.yellow {
	background: #eed537;
	border-left: 25px solid #56616c;
	color: #56616c;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#short-btn a.yellow:hover {
	border-left: 25px solid #2b3136;
	color: #2b3136;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#short-btn-left a {
	width: 15%;
	height: auto;
	padding: 1em 1.5em 0.5em;
	overflow: auto;
	font-size: 1.5em;
	letter-spacing: 2px;
	line-height: 1.5em;
	text-transform: uppercase;
	float: left;
	margin: -2em 0 -2em 0;
	text-decoration: none;
	position: relative;
	z-index: 600;
}

#short-btn-left img {
	width: auto;
	height: 40px;
	/*margin: -10px 0 0 0;*/
	position: relative;
	z-index: 700;
}

#short-btn-left a.yellow {
	background: #eed537;
	border-right: 25px solid #56616c;
	color: #56616c;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#short-btn-left a.yellow:hover {
	border-right: 25px solid #2b3136;
	color: #2b3136;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#wide-btn a {
	width: 45%;
	height: auto;
	padding: 1em 1.5em 0.5em;
	overflow: auto;
	font-size: 1.5em;
	letter-spacing: 2px;
	line-height: 1.5em;
	text-transform: uppercase;
	float: right;
	margin: -2em 0 -2em 0;
	text-decoration: none;
	position: relative;
	z-index: 600;
}

#wide-btn img {
	width: auto;
	height: 40px;
	position: relative;
	z-index: 700;
}

#wide-btn a.green {
	background: #109d49;
	border-left: 25px solid #56616c;
	color: #fff;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#wide-btn a.green:hover, #wide-btn a.purple:hover {
	border-left: 25px solid #2b3136;
	color: #e8eaed;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#wide-btn a.purple {
	background: #9F54A0;
	border-left: 25px solid #56616c;
	color: #fff;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#wide-btn a.yellow {
	background: #eed537;
	border-left: 25px solid #56616c;
	color: #56616c;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#wide-btn a.yellow:hover {
	border-left: 25px solid #2b3136;
	color: #2b3136;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#reg-btn a {
	width: 100%;
	height: auto;
	padding: 1.2em 2em;
	overflow: auto;
	font-size: 1.2em;
	letter-spacing: 2px;
	line-height: 1.2em;
	text-transform: uppercase;
	margin: 0 auto;
	text-decoration: none;
	position: relative;
	z-index: 600;
}

#reg-btn a.blue {
	background: #3bb1e5;
	color: #fff;
	border: 2px solid #3bb1e5;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#reg-btn a.blue:hover {
	border: 2px solid #2b3691;
	color: #fff;
	-webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}

#reg-btn img {
	width: 40px;
	height: 100%;
	position: relative;
	z-index: 700;
	padding: 0 1em 0 0;
	margin: 0 0 -0.3em 0;
}

/*---- HOME ----*/
.home-grad {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e8eaed+0,ffffff+100 */
background: rgb(232,234,237); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,234,237,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top,  rgba(232,234,237,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom,  rgba(232,234,237,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8eaed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

	width: 100%;
	height: auto;
	overflow: auto;
}

#home-hex img {
	position: absolute;
	height: auto;
	width: 60%;
	min-height: 600px;
	z-index: 100;
	top: 1em;
}

.home-bg {
	background: url(../img/hex-grey-01.png) no-repeat top center;
	background-attachment: fixed;
	background-size: cover;
	z-index: 200;
	width: 100%;
	height: auto;
	overflow:auto;
	position: relative;
	padding: 0 0 4em 0;
}

#home-intro {
	width: 100%;
	height: auto;
	margin: 18em 0 0 0;
}

.left-intro {
	width: 60%;
	float: left;
}

.right-intro {
	width: 35%;
	float: left;
	margin: 6em 0 0 0; 
}

#home-intro h3 {
	font-size: 1.3em;
	font-weight: 300;
	text-align: left;
}

.right-intro-tag {
	width: 46%;
	height: auto;
	padding: 0.5em 1em 0.6em;
	background: rgba(86,97,108,0.5);
	float: right;
	margin: 2em 0 0 0;
	font-size: 2em;
	color: #fff;
	font-weight: 300;
	text-align: right;
}

.right-intro-tag .yellow-bold {
	font-weight: 500;
	color: #EED537;
}

#home-intro-top {
	padding: 7em 0 0;
}

#home-intro-top p {
	padding: 0 3em;
}

.wrap .home-list { width: 95%; float: right; }

.list-1 {
	color: #3BB1E5;
	opacity: 0.35;
	padding: 1em 0 0 0;
	font-size: 2.5em; 
	font-weight: 300; text-align: right; line-height: 1.2em;
}

.home-services-grad {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6d82c2+0,3bb1e5+53,3bb1e5+100 */
background: #6d82c2; /* Old browsers */
background: -moz-linear-gradient(top,  #6d82c2 0%, #3bb1e5 53%, #3bb1e5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #6d82c2 0%,#3bb1e5 53%,#3bb1e5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #6d82c2 0%,#3bb1e5 53%,#3bb1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d82c2', endColorstr='#3bb1e5',GradientType=0 ); /* IE6-9 */
width: 100%;
height: auto;
overflow: auto;
position: relative;
z-index: 300;
}


.home-services-bg {
	background:url(../img/home-howbg.svg) bottom right no-repeat;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 200;
}

#home-services-header {
	background: rgba(255,255,255,0.2);
	border-top: 1px solid #9f54a0;
	border-left: 1px solid #9f54a0;
	border-bottom: 1px solid #9f54a0;
	padding: 4em 5em 3em;
}

#home-services-img {
	text-align: right;
	padding: 3em 0 0 3em;
}

#home-services-img img {
	width: 80%;
	height: auto;
}

.home-services-padding { padding: 6em 0 0; position: relative; z-index: 600; }

.home-clients-padding { padding: 1em 0 0 1em; position: relative; z-index: 600; }
.client-logos img { width:90%; height: auto; display: block; margin: 0 auto;  padding: 3em 0 0;  }

.home-industries-padding { padding: 2.5em 0 0; position: relative; z-index: 600; }

.wrap .industries-list { width: 45%; float: right; }

.list-2 {
	color: #eed537;
	opacity: 0.35;
	padding: 1em 0 0 0;
	font-size: 2.5em; 
	font-weight: 300; text-align: right; line-height: 1.2em;
}

.home-bg-bottom {
	background-image: url(../img/home-bottom-01.png);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-blend-mode: multiply;
	background-color: #109d49;
	position: relative;
	background-size: 100% auto;
	width: 100%;
	z-index: 200;
	height: auto;
	overflow:auto;
}

#narrow-btn-float.home-footer {
	margin: 3em 0 2em 0;
}

#container.home-bottom {
	padding: 10em 0 5em 0;
}


/*---- HOW WE WORK ----*/
.how-bg { background: #fff; }

.how-bg-top {
	background: url(../img/how-we-work-top-01.jpg) no-repeat bottom center;
	background-attachment: scroll;
	background-size: 100% auto;
	z-index: 200;
	width: 100%;
	height: auto;
	min-height: 640px;
	overflow:auto;
	position: relative;
	border-bottom: 4px solid #3bb1e5;
}

#how-header {
	height: auto;
	margin: 15em 0 0 0;
}

#how-header h1 {
	font-size: 4.25em;
	margin: 0 0 0.5em 0;
}

#how-header h2 {
	font-size: 2em;
	color: #56616C;
	font-weight: 300;
	text-align: center;
}

.how-bg-bottom {
	z-index: 300;
	width: 100%;
	height: 100%;
	overflow:auto;
	opacity: 1;
	position: relative;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eed537+0,3bb1e5+100&0+0,0.7+70,1+100 */

background: -moz-linear-gradient(top,  rgba(238,213,55,0) 0%, rgba(113,188,177,0.7) 70%, rgba(59,177,229,1) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top,  rgba(238,213,55,0) 0%,rgba(113,188,177,0.7) 70%,rgba(59,177,229,1) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom,  rgba(238,213,55,0) 0%,rgba(113,188,177,0.7) 70%,rgba(59,177,229,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00eed537', endColorstr='#3bb1e5',GradientType=0 ); /* IE6-9 */



}

.how-bg-img {
	background-image: url(../img/how-we-work-bottom-01.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-blend-mode: multiply;
	background-color: #eed537;
	position: relative;
	background-size: 100% auto;
	width: 100%;
	z-index: 200;
	height: auto;
	overflow:auto;
}

#how-services-header {
	background: rgba(255,255,255,0.2);
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	padding: 4em 5em;
}

#how-retainer-header {
	background: rgba(255,255,255,0.2);
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	padding: 4em 5em;
}

#how-services-header p.yellow, #how-retainer-header p.yellow {
	font-size: 1.5em;
	line-height: 0.5em;
	font-weight: 400;
}

#how-we-work h1 {
	font-size: 4.25em;
	margin: 0 0 0.5em 0;
}

#how-we-work h2 {
	font-size: 2em;
	color: #fff;
	font-weight: 300;
	text-align: center;
}

.wrap-how { width: 1280px; margin: 0 auto; position: relative; height: auto; overflow: auto; padding: 8em 0 2em 0; }

#how-we-work-sections {
	padding: 0 2em;
}

#how-we-work-sections h1, #how-we-work-sections2 h1 {
	margin: 0 0 0.5em 0;
}

#how-we-work-sections.content {
	padding: 4.4em 0 4em 3em;
}

#how-we-work-sections2 {
	padding: 10em 2em 0;
}

#how-we-work-sections2.content {
	padding: 14.4em 0 4em 3em;
}

.how-bg-grad {
	z-index: 300;
	width: 100%;
	height: 100%;
	overflow:auto;
	opacity: 1;
	position: relative;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3bb1e5+0,9f54a0+100&1+0,0.6+25,0.7+100,0+100 */
background: -moz-linear-gradient(top,  rgba(59,177,229,1) 0%, rgba(84,154,212,0.6) 25%, rgba(159,84,160,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(59,177,229,1) 0%,rgba(84,154,212,0.6) 25%,rgba(159,84,160,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(59,177,229,1) 0%,rgba(84,154,212,0.6) 25%,rgba(159,84,160,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bb1e5', endColorstr='#009f54a0',GradientType=0 ); /* IE6-9 */
}

.how-bg-img-end {
	background-image: url(../img/how-we-work-end-01.png);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-blend-mode: multiply;
	background-color: #9f54a0;
	position: relative;
	background-size: 100% auto;
	width: 100%;
	z-index: 200;
	height: auto;
	overflow:auto;
}

#how-all-header {
	background: rgba(255,255,255,0.2);
	border-top: 1px solid #9f54a0;
	border-bottom: 1px solid #9f54a0;
	padding: 4em 0 3em;
	width: 100%;
}

.how-bg-middle {
	background-image: url(../img/how-we-work-middle-01.png);
	background-position: center left;
	background-repeat: no-repeat;
	background-blend-mode: multiply;
	background-color: #3bb1e5;
	position: relative;
	background-size: 160% auto;
	width: 100%;
	z-index: 200;
	height: auto;
	overflow:auto;
	padding: 10em 0 0 0;
}

/*---- SERVICES ----*/
.services-bg { background: #fff; }

.services-bg-top {
	background: url(../img/services-top-01.jpg) no-repeat bottom center;
	background-attachment: scroll;
	background-size: 100% auto;
	z-index: 200;
	width: 100%;
	height: auto;
	min-height: 640px;
	overflow:auto;
	position: relative;
}

.services-bg-lower {
	background-image: url(../img/services-top-lower-01.png);
	background-position: top right;
	background-repeat: no-repeat;
	background-blend-mode: multiply;
	background-color: #3bb1e5;
	position: relative;
	background-size: 100% auto;
	width: 100%;
	z-index: 200;
	height: auto;
	overflow:auto;
}

.services-bg-middle {
	background-image: url(../img/services-middle-01.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-blend-mode: multiply;
	background-color: #3bb1e5;
	position: relative;
	background-size: 100% auto;
	width: 100%;
	z-index: 200;
	height: auto;
	overflow:auto;
	padding: 10em 0 0 0;
}

#services-header {
	background: rgba(255,255,255,0.2);
	padding: 5em 0 4em;
	width: 100%;
}

#services-header h1 {
	text-align: right;
}

#services-header.design {
	border-top: 2px solid #109d49;
	border-bottom: 2px solid #109d49;
}

#services-header.digital {
	border-top: 2px solid #9f54a0;
	border-bottom: 2px solid #9f54a0;
}

#services-header.content {
	border-top: 2px solid #eed537;
	border-bottom: 2px solid #eed537;
}

#services-header .left-info {
	width: 47%;
	float: left;
}

#services-header .right-info {
	width: 40%;
	padding: 1em 0 0 4em;
	float: left;
}

.list-services {
	color: #e8eaed;
	opacity: 0.35;
	padding: 1em 0 0 0;
	font-size: 2.5em; 
	font-weight: 300; text-align: right; line-height: 1.2em;
}

#services-hex {
	width: 125px;
	height: 240px;
	position: relative;
	left: 0;
	margin: -5em 0 -8em;
}

#services-hex img {
	width: 100%;
	height: auto;
}

.services-pad-1 {
	padding: 0 0 4em 0;
}

.services-pad-2 {
	padding: 0 0 14em 0;
}

.services-pad-3 {
	padding: 0 0 10em 0;
}

.services-bg-end {
	z-index: 300;
	width: 100%;
	height: 100%;
	overflow:auto;
	opacity: 1;
	position: relative;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3bb1e5+0,2b3691+100&0+0,1+100 */

background: -moz-linear-gradient(top,  rgba(59,177,229,0) 0%, rgba(43,54,145,1) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top,  rgba(59,177,229,0) 0%,rgba(43,54,145,1) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom,  rgba(59,177,229,0) 0%,rgba(43,54,145,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003bb1e5', endColorstr='#2b3691',GradientType=0 ); /* IE6-9 */
}


/*---- ABOUT ----*/
.about-bg { background: #fff; }

.about-bg-top {
	background: url(../img/about-top-01.png) no-repeat bottom center;
	background-attachment: fixed;
	background-size: 100% auto;
	z-index: 200;
	width: 100%;
	height: auto;
	overflow:auto;
	position: relative;
}

#about-bg-grad {
	z-index: 400;
	width: 100%;
	height: auto;
	overflow:auto;
	position: relative;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e8eaed+100&1+0,0.5+100 */

background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(232,234,237,0.5) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(232,234,237,0.5) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(232,234,237,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#80e8eaed',GradientType=0 ); /* IE6-9 */

}

.about-hex {
	overflow: hidden;
	z-index: 200;
	position: absolute;
	top: 3em;
	left: -15%;
}

.about-hex img {
	width: 60%;
	height: auto;
	opacity: 0.09;
}

#about-header {
	height: auto;
	margin: 15em auto 0 auto;
	postion: relative;
	z-index: 400;
}

.about-bg-lower {
	background-image: url(../img/about-lower-01.png);
	background-position: top right;
	background-repeat: no-repeat;
	background-blend-mode: multiply;
	background-color: #109D49;
	position: relative;
	background-size: 100% auto;
	width: 100%;
	z-index: 200;
	height: auto;
	overflow:auto;
}

.about-clients {
	width: 100%;
	height: auto;
	padding: 3em 0;
	background: #fff;
	margin: 6em auto 2em;
}

.about-clients ul.logos {
	display: inline-block;
	list-style-type: none;
	margin: 0;
	-webkit-padding-start: 0;
	-webkit-margin-before: 0;
    -webkit-margin-after: 0;
}

.about-clients ul.logos li {
	width: 25%;
	float: left;
	height: auto;
	text-align: center;
	padding: 0 0 0.8em 0;
}

.about-clients ul.logos li.tall {
	padding: 0.8em 0 1em 0;
}

.about-clients ul.logos img {
	width: 200px;
	height: auto;
}

.about-clients ul.logos img.gh {
	width: auto;
	height: 90px;
}

.about-footer-bg {
	width: 100%;
	height: auto;
	overflow:auto;
	position: relative;
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e8eaed+100 */

background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(232,234,237,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(232,234,237,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(232,234,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8eaed',GradientType=0 ); /* IE6-9 */
}

.about-footer-bg p {
	margin: 0 0 4em 0;
}

#narrow-btn-float.about-footer {
	margin: -10em 0 2em 0;
}

/*---- CONTACT ----*/

.contact-bg-top {
	background: url(../img/contact-top-01.jpg) no-repeat bottom center;
	background-attachment: scroll;
	background-size: 100% auto;
	z-index: 200;
	width: 100%;
	min-height: 640px;
	overflow:auto;
	position: relative;
}

.contact-bg-lower {
	background-image: url(../img/contact-lower-01.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-blend-mode: multiply;
	background-color: #eed537;
	position: relative;
	background-size: 100% auto;
	width: 100%;
	z-index: 200;
	height: auto;
	overflow:auto;
}

.contact-form {
	width: 90%;
	height: auto;
	padding: 4em;
	background: #fff;
	margin: 2em auto;
	position: relative;
}

.contact-thanks {
	width: 98%;
	height: 95%;
	position: absolute;
	top: 2.5%;
	left: 1%;
	background: rgba(87,97,108,0.8);
}

.thanks {
	width: 100%;
	height: auto;
	color: #fff;
	text-align: center;
	font-size: 2em;
	top: 35%;
	position: absolute;
	line-height: 2em;
}

/*---- FOOTER ----*/

footer {
	width: 100%;
	border-top: 20px solid #56616c;
	background: #8e98a3;
	padding: 2em 0;
}

.footer-logo {
	float: left;
	width: 20%;
	height: auto;
}

.footer-logo img {
	width: 100%;
	height: auto;
}

.footer-tag {
	float: left;
	padding: 2em 0 0 1em;
	font-size: 1.2em;
	color: #fff;
	text-align: left;
}

#footer-contact {
	float: right;
	width: auto;
	padding: 0.5em 0 0 0;
	text-align: right;
	overflow: auto;
}

#footer-contact a {
	color: #e8eaed;
	letter-spacing: 2px;
	font-size: 0.9em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 2em;
}

#footer-contact .icon {
	width: 40px;
	height: auto;
	float: right;
	text-align: center;
}

#footer-contact .icon img.pin {
	width: auto;
	height: 25px;
}

#footer-contact .icon img.mail {
	width: auto;
	height: 15px;
	padding: 5px 0 0 0;
}

#copyright {
	width: 100%;
	border-top: 2px solid #56616c;
	text-align: center;
	color: #55616c;
	font-size: 0.8em;
	padding: 2em 0 0 0;
	margin: 2em 0 0 0;
}

/*---- FORM ----*/

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea,
#contact-form button[type="submit"] {
	font:400 12px/1.625 "Oxygen", sans-serif;
}
#contact-form {
	background:#FFF;
	padding:25px;
}

#contact-form label span {
	cursor:pointer;
	color:#56616c;
	display:block;
	margin:5px 0;
	font-weight:400;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
}

#contact-form label span.check {
	cursor:pointer;
	color:#56616c;
	display:block;
	margin:0 0 2em 10px;
	float: left;
	font-weight:400;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
}

#contact-form label span.required {
	color:#EED537;
}

#contact-form input[type="checkbox"] {
	width: 15px;
	height: 15px;
	float: left;
	border-radius: 0;
	margin: 0 0 2em 0;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea {
	width:95%;
	background:#f1f1f2;
	margin:5px 0 4em;
	padding:10px;
	border: 1px solid #f1f1f2;
}
#contact-form input[type="text"]:hover,
#contact-form input[type="email"]:hover,
#contact-form input[type="tel"]:hover,
#contact-form input[type="url"]:hover,
#contact-form textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #8d97a2;
}
#contact-form textarea {
	height:100px;
	max-width:100%;
}
#contact-form button[type="submit"] {
	width: 20%;
	height: auto;
	padding: 0.8em 1.5em 0.8em;
	overflow: auto;
	font-size: 1.2em;
	font-weight: 300;
	letter-spacing: 2px;
	line-height: 1.5em;
	text-transform: uppercase;
	float: right;
	text-decoration: none;
	/*position: absolute;
	z-index: 600;*/
	cursor:pointer;
	background: #8d97a2;
	border-left: 25px solid #3bb1e5;
	color: #fff;
	right: 0;
	box-shadow: none;
}

#contact-form button[type="submit"]:hover {
	background: #56616c;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}
#contact-form button[type="submit"]:active {
	box-shadow: none;
}
#contact-form input:focus,
#contact-form textarea:focus {
	outline:0;
	border:1px solid #8d97a2;
}
::-webkit-input-placeholder {
    color:#8d97a2;
}
:-moz-placeholder {
    color:#8d97a2;
}
::-moz-placeholder {
    color:#8d97a2;
}
:-ms-input-placeholder {
    color:#8d97a2;
}