/* toggle navigation */

.menu-toggle {
	display: none;
	width: 100%;
	height:85px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: #0087ce;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
	color: #fff;
	line-height: 4.5em;
	text-align: right;
	font-size: 18px;
	font-weight: 700;
	font-weight: bold;
	text-transform: uppercase;
	z-index: 100;
	position: relative;
	font-family: "futura-pt", Helvetica, Arial, sans-serif;
}

@media only screen and 
(max-width : 840px) {
	.menu-toggle {
		padding-right:5%;
	}
}

@media only screen and 
(max-width : 500px) {
	.menu-toggle {
		padding-right:10%;
	}
}

.menu-toggle:hover {
	color:#fff;
}

.menu-icon {
	margin:0;
	width:17px;
	height:17px;
	background:url("../img/navigation-element.png") center center no-repeat;
	background-size:17px 17px;
	display:block;
	float:right;
	top: 32px;
	position: relative;
	-webkit-transition:opacity 0.2s;
	-moz-transition:opacity 0.2s;
	-o-transition:opacity 0.2s;
	transition:opacity 0.2s;
	opacity:1;
}

.menu-icon:hover {
	opacity:0.55;
}

.header #main_nav ul li .dropdown-toggle {
	display: none;
}

@media only screen and 
(max-width : 840px) {

	.header #main_nav {
		display:none;
	}

	.header #main_nav.toggled {
		display:block;
		background:#0480c1;
		padding-bottom:0;
	}

	.menu-toggle {
		display: block;
	}

	.dropdowns ul {
		display:none;
	}
	
	.dropdowns#work_dropdowns, .dropdowns#clients_dropdowns { margin-top: -37px !important; }
	.dropdowns#work_dropdowns ul, .dropdowns#clients_dropdowns ul { margin-top: 0px !important; }
	body.home .dropdowns#work_dropdowns, body.home .dropdowns#clients_dropdowns { top: 117px; }
	.dropdowns#work_dropdowns ul li.current_state, .dropdowns#clients_dropdowns ul li.current_state { margin-top: -11px !important; }

}


/* global */

@media only screen and 
(max-width : 960px) {

	.container,
	#footer .container {
		width: 100%;
		padding:0;
	}

	#content {
		margin: 0;
		padding: 20px 0 60px;
	}

	#content #main_content {
		width: 90%;
		margin: 0 5%;
	}

}


/* main content */

@media only screen and 
(max-width : 960px) {

	#content #main_content .article iframe {
		width:100%;
	}

	#content #main_content .article p,
	#content #main_content .article ul {
		margin: 0 auto 14px;
		font-size: 16px;
		line-height: 26px;
	}

	#content #main_content .article ul {
		padding-left:0;
	}

	blockquote p {
		font-size: 18px !important;
		line-height: 30px !important;
	}

	.articleimg img {
		width:100%;
	}

	table {
		width:100% !important;
	}
	
	#content #main_content #mobile_portfolio { display: block !important; width: 100%; margin: 20px auto 0px auto; }
	
	#mobile_items {
		display: block !important;
		width: 100%;
	}
	
	#items, #portfolio {
		display: none;
	}
	
	

}

@media only screen and 
(max-width : 450px) {

	#content #main_content .article h2 {
		position: relative;
		font-size: 34px;
		font-weight: bold;
		margin: 40px auto 20px auto;
		max-width: 600px;
		text-align:center;
	}

}


/* homepage */

@media only screen and 
(max-width : 960px) {

	.header #main_nav {
		margin:0;
	}

	#header .container {
		width:90%;
		padding:0 5%;
	}

	#header.has_feature {
	background: #0087ce;
	}

	.header {
		position: relative;
		height:auto;
		overflow: hidden;
	}

	body.home #we_build {
		margin: 0;
	}

	#fixed_header {
		display:none;
	}

	#we_build_bottom h3 {
		padding: 0 40px;
	}

}

@media only screen and 
(max-width : 885px) {
	.header #main_nav ul li a {
		padding: 5px 7px;
	}
}

@media only screen and 
(max-width : 840px) {

	#header .container {
		width:100%;
		padding:0;
	}

	.header,
	body.home #header {
		height:auto;
		overflow: hidden;
	}

	.header #main_nav {
		float: left;
		width:100%;
		background:#0087ce;
		padding-bottom:20px;
		-webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
		-moz-box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
		box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
	}

	body.home.no-svg #header #logo,
	body.no-svg .header #logo,
	body.no-svg #header.has_feature #logo {
		background-image: url("../img/logo-stickynav2.png");
	}

	body.home #header #logo,
	.header #logo,
	#header.has_feature #logo {
		display:block;
		margin: 0;
		z-index: 100;
		width: 90px;
		height: 82px;
		background-image: url(../svg/mobile_logo_white_10yr_badge.svg);
		background-repeat: no-repeat;
		background-position: center center;
		-webkit-background-size: 90px 82px;
		-moz-background-size: 90px 82px;
		-o-background-size: 90px 82px;
		background-size: 90px 82px;
		position: absolute;
		top: 0;
		left: 0;
	}

	body.home #header #main_nav ul,
	#header #main_nav ul {
		margin: 0;
		padding:0;
		text-align:left;
		overflow: hidden;
	}

	.header #main_nav ul li {
		float: none;
		display:inline-block;
		*display: inline;
		zoom: 1;
		clear:both;
		width: 100%;
		position:relative;
		padding: 0;
		border-bottom:1px solid #0478b5;
	}

	body.home .header #main_nav ul li a,
	#header.has_feature #main_nav ul li a,
	.header #main_nav ul li a {
		padding: 15px 20px;
		color: #fff;
		text-shadow: none;
		font-family: "futura-pt", Helvetica, Arial, sans-serif;
		font-size: 16px;
	}

	.header #main_nav ul li a:hover {
		color:#fff !important;
		background:#047ebd;
	}

	body.home #header #tagline {
		margin: 15% auto 10px;
		width:75%;
	}

	body.home #header .ten_year_banner_badge {
		  margin: 10px auto 15%;
	}

	#header #tagline h1 {
		font-size: 32px;
		line-height: 1.3;
	}

	.collapsed {
		display:block;
	}

	.header #main_nav ul li.children ul {
		position: relative;
		background-color: #02679c;
		padding: 0;
		top: inherit;
		left: inherit;
		margin: 0;
		display: block;
		width: 100%;
		text-align: center;
		float: left;
		border-bottom:1px solid #035f8f;
	}

	.header #main_nav ul li.children ul li {
		float: left;
		position: relative;
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
		border-bottom:1px solid #035f8f;
	}

	/* dropdown toggle */

	.header #main_nav ul li .dropdown-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 30px;
		z-index: 100;
		text-indent: 200%;
		white-space: nowrap;
		overflow: hidden;
		border-left:1px solid #0478b5;
		background: url(../img/browse_arrow.png) center center no-repeat #037ebe;
	}

	.header #main_nav ul li .dropdown-toggle:hover {
		background: url(../img/browse_arrow.png) center center no-repeat #0479b6;
	}

	.header #main_nav ul li.children ul li.first,
	.header #main_nav ul li.children ul li.last {
		margin: 0 !important;
	}

	.header #main_nav ul li.children ul li.last {
		border-bottom:none;
	}

	.header #main_nav ul li.children ul li a {
		text-transform: uppercase;
		padding: 0;
		width: auto;
		padding: 15px 20px;
	}

	.header #main_nav ul li.children ul li a:hover {
		background:#025f8f;
	}

	.header #main_nav ul li.children ul li a b {
		padding-top: 0;
		height: auto;
		width: 100%;
		opacity: 1;
		background:transparent !important;
		letter-spacing: 1px;
		font-family: "futura-pt", Helvetica, Arial, sans-serif;
		font-size: 16px;
		font-weight: normal;
		color: #ededed;
	}

}

@media only screen and 
(max-width : 450px) {

	#header #tagline h1 {
		font-size: 25px;
	}

}


/* homepage icon grid */

@media only screen and 
(max-width : 960px) {

	body.home #we_build {
		width:90%;
		padding:60px 5% 30px;
	}

	#we_build ul {
		text-align:center;
	} 

	#we_build ul li,
	#we_build ul li.first {
		float: none;
		margin: 0 16px 60px;
		display:inline-block;
		*display: inline;
		zoom: 1;
	}
}

@media only screen and 
(max-width : 855px) {

	#we_build ul li,
	#we_build ul li.first {
		margin: 0 5px 60px;
	}
}

@media only screen and 
(max-width : 730px) {

	#we_build ul li,
	#we_build ul li.first {
		margin: 0 0 60px;
	}
}

@media only screen and 
(max-width : 685px) {

	#we_build ul li,
	#we_build ul li.first {
		margin: 0 30px 60px;
	}
}

@media only screen and 
(max-width : 430px) {

	#we_build h3 {
		font-size: 19px;
	}

	#we_build ul li,
	#we_build ul li.first {
		margin: 0 10px 60px;
	}

	body.home #we_build_bottom {
		padding: 45px 0;
	}

	#we_build_bottom h3 {
		padding: 0 5%;
		font-size:24px;
	}
}


/* enticers */

@media only screen and 
(max-width : 960px) {

	#enticers {
		width:90%;
		padding: 70px 5%;
	}

	#enticers .enticer a .content_holder {
		position: relative;
		-webkit-transform-style: flat;
		-moz-transform-style: flat;
		transform-style: flat;
		-webkit-transition: none;
		-moz-transition: none;
		transition: none;
		-webkit-transform: none;
		-moz-transform: none;
		transform: none;
	}

	#enticers .enticer a:hover .content_holder,
	#enticers .enticer.first a:hover .content_holder {
		-webkit-transform: none;
		-moz-transform: none;
		transform: none;
	}

	#enticers .enticer.first a .content_holder .enticer_image,
	#enticers .enticer a .content_holder .enticer_image  {
		-webkit-transform: none;
		-moz-transform: none;
		transform: none;
		position:relative;
		height:auto;
	}

	#enticers .enticer.first a .content_holder .text,
	#enticers .enticer a .content_holder .text  {
		display:none;
		-webkit-transform: none;
		-moz-transform: none;
		transform: none;
	}

	#enticers .enticer {
		float: left;
		width: 45%;
		height: auto;
		margin: 0 2.5% 20px;
	}

	#enticers .enticer.first {
		float:left;
		width: 95%;
		height: auto;
		margin: 0 2.5% 40px;
	}

	#enticers .enticer a {
		-webkit-perspective: none;
		-moz-perspective: none;
		perspective: none;
	}
}

@media only screen and 
(max-width : 450px) {

	#enticers .enticer {
		width: 95%;
		margin: 0 2.5% 20px;
	}

	#enticers .enticer.first {
		margin-bottom: 20px;
	}

}


/* latest posts + testimonials */

@media only screen and 
(max-width : 960px) {

	#blog_quote {
		width: 90%;
		padding: 60px 5%;
	}

	#blog_quote #latest_posts,
	#blog_quote #testimonial {
		width: 45%;
		padding: 2.5%;
		border-left: none;
	}

	#blog_quote #latest_posts .post a h3 {
		width: 70%;
	}

	#blog_quote #testimonial .text {
		font-size: 20px;
		line-height: 30px;
	}

}

@media only screen and 
(max-width : 600px) {

	#blog_quote #latest_posts,
	#blog_quote #testimonial {
		width: 90%;
		padding: 2.5% 5%;
	}

	#blog_quote h2 {
		font-size: 32px;
		line-height: 34px;
		margin: 0 0 20px;
	}
}


/* footer */

@media only screen and 
(max-width : 960px) {

	#footer {
		padding: 40px 0;
		margin-bottom: 0;
	}

	#footer #footer_left,
	#footer #footer_middle {
		float: left;
		width: 33.33%;
	}

	#footer #footer_right {
		float: right;
		width: 33.33%;
	}

}

@media only screen and 
(max-width : 670px) {

	#footer #footer_left,
	#footer #footer_right {
		float: left;
		width: 50%;
	}

	#footer #footer_middle {
		float: left;
		clear: both;
		width: 100%;
		margin-top: 30px;
	}

}

@media only screen and 
(max-width : 360px) {

	#footer #footer_left,
	#footer #footer_right {
		float: left;
		clear: both;
		width: 100%;
		margin-bottom:20px;
	}

	#footer #footer_middle {
		margin-top: 0;
	}

	#footer #footer_left a {
		color: #0087ce;
	}

}


/* map */

@media only screen and 
(max-width : 960px) {

	#map_holder {
		position: relative;
	}

}

@media only screen and 
(max-width : 720px) {

	#map_holder {
		display:none;
	}

}


/* top footer */

@media only screen and 
(max-width : 960px) {

	#top_footer {
		width:90%;
		padding:60px 5%;
	}

	#top_footer p {
		font-size: 22px;
		margin-bottom: 40px;
	}

	#top_footer a.button {
		font-size: 20px;
	}

}


/* blog */

@media only screen and 
(max-width : 1080px) {

	#content #main_content #blog .post .post_nav {
		display:none;
	}

}


@media only screen and 
(max-width : 960px) {

	#content #main_content #blog .left_column {
		width: 30%;
	}

	#content #main_content #blog .right_column {
		width: 70%;
	}

	#content #main_content #blog .post .right_column .post_content .right.articleimg img {
		width:auto;
		margin: 0 0 10px 20px;
		float: right;
	}

	#content #main_content #blog .post .right_column .post_content .left.articleimg img {
		width:auto;
		margin: 0 20px 10px 0;
		float: left;
	}

}

@media only screen and 
(max-width : 670px) {

	#content #main_content #blog .left_column,
	#content #main_content #blog .right_column {
		width: 100%;
		clear:both;
		margin-bottom:40px;
	}

	#content #main_content #blog .right_column #all_tags {
		float: none;
		margin:0 auto 20px;
		width: 60%;
		z-index: 100;
		position: relative;
	}

	#content #main_content #blog .right_column #all_tags ul.tags {
		width:100%;
	}

}

@media only screen and 
(max-width : 450px) {
	
	form .row label { font-size: 1em; }

	form input.text { font-size: 1em; }

	form .file .button { font-size: 1em; }

	#content #main_content #blog .post {
		margin: 0 0 50px 0;
		border-bottom: 1px solid #bcbebe;
		padding-bottom: 20px;
	}

	#content #main_content #blog .post.single {
		border-bottom:none;
	}

	#content #main_content #blog .left_column,
	#content #main_content #blog .right_column {
		width: 100%;
		clear:both;
		margin-bottom:20px;
	}

	#content #main_content #blog .post .left_column #tags,
	#content #main_content #blog .post .left_column a.backto_blog {
		display:none;
	}

	#content #main_content #blog .post .right_column .post_content .left.articleimg,
	#content #main_content #blog .post .right_column .post_content .right.articleimg,
	#content #main_content #blog .post .right_column .post_content {
		max-width:100%;
		width:100%;
	}

	#content #main_content #blog .post .right_column .post_content .left.articleimg img,
	#content #main_content #blog .post .right_column .post_content .right.articleimg img,
	#content #main_content #blog .post .right_column .post_content img {
		float: left;
		margin: 0 0 20px;
		width:100%;
	}

	#content #main_content #blog .post .right_column .post_content p,
	#content #main_content #blog .post .right_column .post_content ol,
	#content #main_content #blog .post .right_column .post_content ul {
		font-size: 1em;
		line-height: 1.6em;
	}

	#content #main_content #blog .post .right_column .post_content ol,
	#content #main_content #blog .post .right_column .post_content ul {
		margin: 0 0 20px 0;
		padding: 0 0 0 20px;
	}

	#content #main_content #blog .post .right_column .post_content ol li,
	#content #main_content #blog .post .right_column .post_content ul li {
		margin: 0 0 10px 0;
	}

	#content #main_content #blog .post .right_column #comments,
	#content #main_content #blog .post .right_column .post_content {
		padding: 10px;
	}

	#content #main_content #blog .post .right_column #comments h2 {
		margin-bottom:20px;
	}

	#content #main_content #blog .post .right_column {
		background:transparent;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	#content #main_content #blog .post .left_column .avatar {
		margin: 40px auto;
	}
}


/* forms/contact page */

@media only screen and 
(max-width : 960px) {

	form input.text,
	form textarea {
		width:100%;
		padding:10px 5%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	form input.submit {
		line-height:1em;
		width:50%;
		padding:10px 5%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

}

@media only screen and 
(max-width : 855px) {

	form input.submit {
		width:100%;
		padding:10px 5%;
	}

}

@media only screen and (max-width : 670px) {
	#content #main_content .article .form_builder_form .checkbox_row .checkbox_label {
		width: 90%;
	}
}


/* portfolio */

@media only screen and 
(max-width : 960px) {

	.feature {
		position: relative;
		height:300px;
	}

	.feature .feature_inside {
		height:300px;
	}

	.feature .feature_inside .feature_image {
		position: absolute;
		opacity: 0.2;
		display:none;
		opacity:0;
	}

	.feature .feature_inside .feature_image.full_width {
		display:block;
		opacity:1;
	}

	#content.has_feature {
		margin: 0;
	}

	.feature .feature_inside .feature_text {
		overflow:hidden;
		width:100%;
		height:100%;
		position:absolute;
	}

	.feature .feature_inside .feature_text p {
		margin: 0;
		top:50%;
		width:100%;
		z-index: 100;
		position:absolute;
	}

	#content #main_content .article .case_study_button {
		position: relative;
		z-index: 3;
		width: auto;
		float: none;
		margin: 0 0 40px 0;
	}

	#content #main_content .article .case_study_button a {
		display: block;
		float: none;
		margin: 0 10%;
	}

	#content #main_content .case_study_button a { 
		float:right;
	}

}


@media only screen and 
(max-width : 670px) {

	.feature {
		position: relative;
		height:200px;
	}

	.feature .feature_inside {
		height:200px;
	}

	.feature .feature_inside .feature_image {
/*		opacity: 0;
*/	}

	#content #main_content .about {
		width: 95%;
		margin: 0px 2.5% 30px;
	}

	#content #main_content .about3 .about-block {
		width:100%;
		border:none;
		margin:0;
	}

	#content #main_content .about3 .about-block > div {
		width:50%;
		margin:0;
		padding:0;
	}

	#content #main_content .about3 .case_study_button { 
		float:left;
		clear:both;
		width:100%;
	}

	#content #main_content .about3 .case_study_button a { 
		float:none;
		margin: 45px auto;
		-webkit-transition: background-color .3s ease-out;
		-moz-transition: background-color .3s ease-out;
		transition: background-color .3s ease-out;
	}

}


@media only screen and 
(max-width : 450px) {

	#content #main_content .about {
		margin: 0px 2.5% 0px;
	}

	#content #main_content .about3 .case_study_button a { 
		padding: 20px 35px;
		width:auto;
	}

	#content #main_content .about3 .about-block > div {
		width:100%;
		clear:both;
	}
}

/* article content stack */

@media only screen and 
(max-width : 670px) {

	#content #main_content .article .stack {
		width: 90%;
	}

	#content #main_content .article .stack li {
		width: 100%;
		margin:0 0 40px;
	}

	#content #main_content .article .stack li h4{
		margin: 20px auto;
	}

	#content #main_content #blog .right_column .pagination {
		width:100%;
		float:left;
		clear:left;
		margin:0;
		text-align: center;
	}

	#content #main_content #blog .right_column .pagination span {
		display: inline-block;
		text-align:center;
	}

}

@media only screen and 
(max-width : 960px) {
.gallery_slide {
  top: -1px;
  margin-bottom: -30px;
  padding: 20px 20px 14px 20px;
  width: 460px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.gallery_slide p {
  line-height: 22px;
  font-size: 13px;
}
.gallery_slide .gallery_row {
  width: auto;
  height: 141px;
  margin: 0 auto;
}
.gallery_slide .gallery_row .photo {
  float: left;
  width: 135px;
  margin: 0px 6px 6px 6px;
}
.gallery_slide .gallery_row .photo .enlarge {
  width: 125px;
  height: 125px;
}
.gallery_slide .gallery_row .photo.first, .gallery_slide .gallery_row .photo.last {
  margin: 0px 0px 6px 0px;
}
.gallery_slide .gallery_row .photo:hover {
  border-color: #0065a4;     
}
.gallery_slide .gallery_row .photo img { display: block; width: 125px; }
.gallery_slide .gallery_row .photo .enlarge:hover .caption {
  padding: 0px 8px;
  margin: 12px 0px 7px;
  line-height: 16px;
  font-size: 11px;
}
}

@media all and (max-width: 830px) {

.gallery_slide {
  margin: 0 auto;
}
.gallery_slide {
    width: auto;

  }
  .gallery_slide p {
    line-height: 22px;
    font-size: 13px;
  }
  .gallery_slide .gallery_row {
    width: 210px;
    height: auto;
    margin: 0 auto;
    float: none;
  }
  .gallery_slide .gallery_row .photo {
    float: none;
    margin: 0px 0px 6px 0px;
    height: auto;
  }
  .gallery_slide .gallery_row .photo .enlarge {
    width: 200px;
    height: 200px;
  }
  .gallery_slide .gallery_row .photo .enlarge:hover {
    position: relative;
    height: auto;
    z-index:999;
    border-color: #0065a4; 
  }
  .gallery_slide .gallery_row .photo.first, .gallery_slide .gallery_row .photo.last {
    margin: 0px 0px 6px 0px;
  }
  .gallery_slide .gallery_row .photo:hover {
    border-color: #0065a4;     
  }
  .gallery_slide .gallery_row .photo img { display: block; width: 200px; }
  .gallery_slide .gallery_row .photo .enlarge:hover .caption {
    padding: 0px 8px;
    margin: 12px 0px 7px;
    line-height: 16px;
    font-size: 13px;
  }
}



/*Blog tags */

@media only screen and 
(max-width : 960px) {

	#content #main_content #blog .right_column .blogtag_right {
		max-width: 100%;
	}
	#content #main_content #blog .right_column .blogtag_left {
		display: none;
	}
}