@charset "UTF-8";
/* CSS Document */
#content ul li:before, .contentEditor ul li:before,.landingText ul li:before,.textRight,.textContent{color:#7fa5c3}
.textIcon{background-color:#ccc}
.textIcon:hover{background-color:#999}
#content .highlight, .blogTips{clear: both;background:#ecf4fa}
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], textarea, select{border:1px solid#e5e5e5;background-color:#f2f2f2;}
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, textarea:focus, select:focus{background-color:#faf4e5;}
	.pageHeader.gold{background-color:rgba(209, 144, 0, 1);}
.bigSlide a{background-color:#fff;}
	.bigSlide a:hover{background-color:#fff}

.slide1 a{color:#6693b7}
.slide2 a{color:#94002f}
.slide3 a{color:#49871d}
.member{padding: 2em 0}
/* red */
    slide2, .smSlide.red,.pageHeader.red{background-color:#c5003e}
/* blue */
    .pageHeader, .pageHeader.blue,.slide1,.smSlide{background-color:#4698cb}
    .landing #creative,.landing #team,.landing #culture{background-color:#e3f0f7}
/* green */	
    .slide3, .smSlide.green,.button.green, .pageHeader.green{background-color:#66bc29}
    .landing #marketing, .landing #location{background-color:#e8f5df}
/* gray */
    /*5% ltgray*/
        #awards, #clients.clients2{background-color:#f2f2f2}
        .newsArticle .byline{color:#f2f2f2}
    /*10%*/main+aside,#portfolio{background-color:#e5e5e5}
    /*15%*/
    	#clients blockquote{border-top: 1px solid #d9d9d9;border-bottom: 1px solid #d9d9d9}
        .news article{border-bottom:1px solid #d9d9d9}
        .member,.news article:first-of-type{border-top:1px solid #d9d9d9}
    /*25%*/
        .teamFade div:first-child{background-color:#bfbfbf}
        .news>div{border-bottom:1px solid #bfbfbf;border-top:1px solid #bfbfbf}
    .news article time{color:#333}
/* gold */
    .slide4, .smSlide.gold{background-color:#d19000}




.mainSlide>*{position: absolute;left:0;top:0;right:0;bottom:0;background-image:url(/images/bg-icon.png);background-position:center center;
	display:block;}







	.landing main>section{padding-left: 2%;padding-right: 2%;}
	body>header{position:fixed;z-index:2;left:0;top:0;right:0;overflow:hidden;height:60px;background-color: #fff;
		}
		body>header:hover{height:15.6em}
	input.bulky, .bulky {line-height: 3em}
	#brand{float:left;width: 15%;}
	#brand a{height: 3.5em;
		  display: -webkit-flex;
		  display: -ms-flexbox;
		  display: -webkit-box;
		  display: flex;
		}
	#brand img{width: 100%;height:100%;margin:auto;}
	#brand svg{width: 100%;height:auto;margin:auto;}
	body>header h1{text-align: right;text-transform: lowercase;padding-top: .3em}
	.hamburger{display:none;}
	#mainnav{display: block;float: right;width: 50%}
	#mainnav>aside{display: none}
	#mainnav ul{display: inline;width:100%;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:-webkit-box;
		display:flex;
		}
	#mainnav>ul>li{display:block;float: left;padding-top:.9em;
		-webkit-flex: 1;
		-ms-flex: 1;
		       -webkit-box-flex: 1;
		        flex: 1;
		}
	#mainnav a{max-width:100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;position: relative}
		#mainnav>ul li>a:hover, body>nav>ul li>a:active{background:#fff;color:#c5003e !important;}
		#mainnav ul ul{padding-top: .3em;display: block}
	#mainnav ul ul a{float: left;}
	body>header h1,#mainnav ul ul a{color:#7f7f7f;font-size: .9em;}
    

	/* MAIN ------------------------------ */
	#content{padding:0 0 3em 20%;min-height:600px;}
    .portfolioPage#content{padding-right: 20%}
	main>div{padding-top:4.5em;}
	.photoStrip{height: 15%;max-height: 8em;width: 100%;float: left;clear: left}
	main>div>aside{position:absolute;left:0;top:4.5em;width:20%;overflow:hidden;z-index: 0;
	}
	.bigSlide{height: 90%;min-height: 50em;}
	.smSlide{height: 50%;min-height: 40em;float: left;width: 100%}
	.smSlide h1{padding-top: 2em}
	.smSlide p{width: 60%;margin: 0 auto}
	.mainSlide>*{background-attachment:fixed;}
	.mainSlide h1 span:first-child+span{font-size:3em;margin-top:1em}
	.bigSlide img{width:15em;height:15em;margin: 2em 0 4em;}
	.pageLinks a{margin:4em 0 0;opacity: .5;width: 25%}
		.pageLinks a:hover{opacity: 1}
	.pageLinks a span{opacity: .75;}
		.pageLinks a:hover span{opacity: 1;}
	.smSlide img{width:40%;height: auto}
	.smSlide img+span{width: 100%;margin: 0}
	.smSlide h1{font-size: 3em;}
	.caseSlide{height:50em}
	main .caseSlide h1{font-size: 1.5em;font-weight: 300}
	.caseSlide h2{font-size:3em;font-weight: 700}
	.caseSlide *{line-height:0}
	.caseSlide * *{line-height:1.1em}
	.caseSlide>*>*:first-child{padding-top:5em}
	.caseSlide * {color:#fff;text-shadow: 0 1px #b2b2b2}
	.caseSlide img{margin-bottom: -1px}
	.caseSlide .button{width: 20%}
	.photoStrip.arrow1{margin-top:-5.5em;}
	.photoStrip.arrow2{margin-top:-8em;}
	.photoStrip.arrow2 a{background-image:url(/images/arrow-down.png)}
	#sidenav>{border-top: 5px solid #c5003e;}
	#sidenav li.on ul li li a{padding-left:1em}
	#sidenav li.on ul li li li a{padding-left:2em}
	#sidenav li.on ul li li li li a{padding-left:3em}
	#content .photoright,#content .photoleft,.textRight{width:auto;max-width: 43.75%}
	#content .photoright.highlight,.textRight{width:43.75%}	
	#sidenav{padding:0 25% 0 0}
	#sidenav li.on ul li a{padding: .4em 0;}
	#sidenav a:hover{
		-webkit-animation: bounce-right .2s;
		        animation: bounce-right .2s;
		}
	#content .highlight, .blogTips{padding:2.5em;margin:4em 0;}
	.photoright,.textRight{float:right;margin:0 0 2em 6.25% !important;clear:right}
	.photoleft{float:left;margin:0 6.25% 2em 0;clear:left}
	.textRight, .textContent{font-size: 1.4em;}
	.portfolioRight .textRight{float:none;margin:4em 0 0 !important;width: 100%;font-size:1em;line-height: 1.5em}
	.fullImg figcaption{text-align: center}
	.fullImgRes{width:50%}
	.twoCol {
	-webkit-columns:2;
	   -moz-columns:2;
	        columns:2;
	-webkit-column-gap:40px;
	   -moz-column-gap:40px;
	        column-gap:40px;
	}
	.threeCol {
	-webkit-columns:3;
	   -moz-columns:3;
	        columns:3;
	-webkit-column-gap:30px;
	   -moz-column-gap:30px;
	        column-gap:30px;
	}
	.fourCol {
	-webkit-columns:4;
	   -moz-columns:4;
	        columns:4;
	-webkit-column-gap:1em;
	   -moz-column-gap:1em;
	        column-gap:1em;
	}
	.twoCol section,.threeCol section,.fourCol>li{display: inline-block;width: 100%}
	/* Landing ------------------------------ */
	.landing main>div{padding-top:0}
	.landing .mainSlide .wrap{margin-top: 3em;width:100%}
	.band>.wrap>*>*{padding: 0 .5em}
	.landingIcon{float: left;}
		#strategy .landingIcon, #creative .landingIcon, #development .landingIcon, #marketing .landingIcon,#approach .landingIcon,#growth .landingIcon,#background .landingIcon{width:10%;margin: 2% 5% 0;}
		#inquiries .landingIcon{width:112.5%;margin-top:2em; padding-bottom: 10%;overflow:visible;position:relative;}
			#inquiries .landingIcon img{width:50px;height: auto;margin:0;float:right;}
				#inquiries .landingIcon:before{content:""; display: block;width:170%;height:0;padding-top:45%;position:absolute;right:16%;top:0%;background:url(/images/icons/custom/inquiry-loop.png) no-repeat right top;background-size: 100% auto;}
		#location .landingIcon{width:25%;margin-top:-8%;margin-right:12.5%}
			#location .landingIcon+p{margin-top: 4%;float:left;width:62.5%;}
			#location .landingIcon+p+p{clear:left;width:50%}
				#location .button{width:100%;margin-top: 2em;}
				#support .button{width:calc(50% - .5em);}
		#support .landingIcon{width:10%;margin-right: 15%;position: relative;margin-top: -15%}
			#support .landingIcon.on{margin-top:0;}
			#support .landingIcon:before{content:"";background-color:#c5003e;width: 2px;height: 200%;display: block;position: absolute;left:50%;bottom:70%}
		#team .landingIcon{width: 50%}
		#news .wrap>.landingIcon{width: 10%;margin: 2% 45% 0;}
		#blog .landingIcon{width:25%;position:absolute;right:0;margin-top: -25%}
		#positions .landingIcon,#culture .landingIcon{width: 10%;position: absolute;right: 0;top: 0}
	.landingIcon img{width: 100%;height: auto;margin-top: 20%;padding: 0 !important}
	.landingText{float:left;}
		#strategy .landingText, #creative .landingText, #development .landingText, #marketing .landingText {width:40%;margin:10% 20% 10% 0;}
		#inquiries .landingText, #location .landingText, #support .landingText{width:40%;margin:10% 15% 10% 0;overflow:visible}
		#team .landingText{width:35%;margin:10% 10% 10% 0;overflow:visible}
		#approach .landingText,#news .landingText{width:70%;margin: 0 15%;text-align: center}
			#approach .landingText{margin-top:10%;margin-bottom: 10%}
		#culture .landingText{margin: 10% 0}
		#growth .landingText,#background .landingText{width:80%;margin:10% 0;}
	.landingText h1{font-size: 2.5em}
	#strategy ul, #creative ul, #development ul, #marketing ul,#support ul{float: left;width:15%;margin: 0 .5em;padding-top:20%;border-top:5px solid #c5003e;}
	#inquiries,#inquiries #ContactForm{overflow: visible}
		#inquiries .landingContact{float: left;width: 45%;}
		#inquiries .landingContact>div{float: left;width: 44.44%;}
		#inquiries .landingContact>div+div{margin-left: 11.11%}
	#location{position: relative;overflow: auto}
		#location:after {content:""; display: block;width:65%;height:100%;position:absolute;right:0;top:0;background:url(/images/bg/map.png) no-repeat left center;background-size: cover}
	#background .landingText>div {float: left;width:47.05%;}
		#background .landingText>div+ul {float: left;width:47.05%;margin-left: 5.88%}
		#background blockquote cite {float:left; clear:both; font-size:1em; margin-top:1em}
		#background blockquote cite:before {content:"-\0020"}
	#team{position: relative;}
		#team .landingText{margin-bottom:10%}
		#team:after {content:"";z-index:-1;display: block;width:45%;height:100%;position:absolute;left:0;top:0;background:url(/images/bg/circle.png) no-repeat right center;background-size: cover}
		#team .landingCta{width:20%;position: relative;left:auto;bottom:auto;float: left;margin-top: 5em}
			#team .landingCta .button{width: 100%;}
		.teamFade{width: 27.27%;margin:2em 9.09% 2em 0;}
		.teamFade:hover div+div{opacity: 1}
		.teamFade:nth-child(3n+3){margin-right:0;}
		#team .members{display:none}
		.teamFade div+div{padding-top:0;position: absolute;left: 0;top:0;width: 100%;height: 100%;border-radius: 50%;opacity: 0;background-color:#4698cb ;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: -webkit-box;
			display: flex;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			        flex-direction: column;
			-webkit-flex-wrap: nowrap;
				-ms-flex-wrap: nowrap;
			        flex-wrap: nowrap;
			-webkit-justify-content: center;
			-ms-flex-pack: center;
			       -webkit-box-pack: center;
			        justify-content: center;
			-ms-flex-line-pack: start;
			        -webkit-align-content: flex-start;
			        align-content: flex-start;
			-webkit-align-items: center;
			-ms-flex-align: center;
			       -webkit-box-align: center;
			        align-items: center;
			}
		.teamFade div+div>*{color:#fff;
			-webkit-order: 0;
			-ms-flex-order: 0;
			       -webkit-box-ordinal-group: 1;
			        order: 0;
			-webkit-flex: 0 1 auto;
			-ms-flex: 0 1 auto;
			       -webkit-box-flex: 0;
			        flex: 0 1 auto;
			-ms-flex-item-align: auto;
			        -webkit-align-self: auto;
			        align-self: auto;
		}

	#news{padding-bottom:6em;}
		#news .latestNews, #news #blog{float: left;width:40%;margin:0 5%}
		.latestNews>p{text-align: right}
		.latestNews>p,#blog>p{margin-bottom:0}
		#news .button{width: 50%;margin-bottom: 20%}
	#positions .wrap>h1{margin:8% 0 0}
		#positions .wrap>h1 a{padding: 0}
		#positions .careers{text-align: center;}
		#positions .careers section{width:25%;padding-top:1em;display:inline-block;text-align:left;margin-right:5%;vertical-align: top;}
			#positions .careers section:nth-child(3n+3){margin-right: 0}
		#positions .button{width: 20%;margin:5% 0 8%}
	#culture{position: relative;padding-bottom: 15%}
		#culture:after{content:"";background: url(/images/culture.jpg);background-size: cover; position: absolute;width: 100%;height:0;padding: 17.05% 0 0; bottom: 2%;left: 0}
		#culture .landingText>div{float: left;width:45%;}
		#culture .landingText>div+div{margin-left: 10%}
	#growth .landingText>div {float: left;width:47.05%;}
		#growth .landingText>div+ul {float: left;width:47.05%;margin-left: 5.88%}
	.portfolio {position: relative;overflow: auto;padding: 8% 0}
		.portfolio>*>h1{margin-bottom: 3em}
		.portfolio section{float: left;width: 25%}
		.portfolio section a{display: block;margin-bottom: 1em}
		.portfolio section div div{color:#fff;text-transform: uppercase;text-align:center;background-color:#c5003e;visibility: hidden;font-size: 1.8em}
			.portfolio section a:hover div div{visibility: visible}
	#case-studies{padding-top:5%}
		#case-studies>*>h1{font-size: 2em}

	#services{padding-top:8%;padding-bottom:8%}
		#services .wrap>h1{margin-bottom:4em;font-size:2em;}
		#services section{width:30%;padding:0 5%; display:inline-block;vertical-align: top}
		#services img{width:40%;height: auto;margin-bottom: 1em}
		#services section+p{clear: both}
		#services .landingCTA{margin-top: 4em}
		#services .landingCTA .button{width:20%}
	#approach h1{text-align: center}
	.pagination{text-align:right;}
/*home*/
    #services > .wrap > h1+section > a {background: url(/images/icons/custom/creative_ie8.png) no-repeat center top; padding-top: 171px}
    #services > .wrap > h1+section+section > a {background: url(/images/icons/custom/in-house_ie8.png) no-repeat center top; padding-top: 171px}
    #services > .wrap > h1+section+section+section a {background: url(/images/icons/custom/marketing_ie8.png) no-repeat center top; padding-top: 171px}
    #services > .wrap > h1+section a img, 
    #services > .wrap > h1+section+section a img,
    #services > .wrap > h1+section+section+section a img {display: none;}
/*services*/
    .servicesLinks > a {padding-top: 135px; background:url(/images/icons/custom/strategy-ko_ie8.png) no-repeat center top}
    .servicesLinks > a+a {background:url(/images/icons/custom/creative-ko_ie8.png) no-repeat center top}
    .servicesLinks > a+a+a {background:url(/images/icons/custom/in-house-ko_ie8.png) no-repeat center top}
    .servicesLinks > a+a+a+a {background:url(/images/icons/custom/marketing-ko_ie8.png) no-repeat center top}
    .servicesLinks > a img {display: none}
/*team*/
	#content .member>:not(div){width:75%;max-width: 100%}
	.member>*{float: left}
	.member div{display:none}
/*portfolio*/
	.portfolioRight{position:absolute;Right:0;top:0;width:18.75%;}
	#content .portfolioRight>*{max-width:100%;padding:0 .5em}
	#content .portfolioRight h1{margin-bottom:1em;font-weight:700}
	li.cadc, li.gdusa{background-position:0 0;}
	.portfolioRight h2{margin-bottom:.5em}
	#content .portfolioRight li{padding-left: .5em;line-height: 1.5em;margin-bottom: .5em}
	.portfolioPage figure{margin-bottom: 3em}
	.portfolioPage figure:first-of-type{border-top:0}
	/* FOOTER ------------------------------ */
	body>footer{padding-top:2em;padding-bottom:2em;z-index:1;position: relative}
	.fatFooter nav>*{float: left;padding: 0 .5em}
	.footerCareers{width:25%}
	.socialIcons{display: none}
	body>footer .wrap{border-top:1px solid #484848);padding:1em 10px 0;}
/* News ------------------------------ */
	.news article{min-height: 10em;}
	.news article>a{width:7em;height:7em;opacity:1;display:block;position: absolute;left: 0;top:1.5em;background-color: #fff; background-repeat:no-repeat;background-position:center center;background-size:contain;}
		.news article>a:hover,.news article a:hover{opacity:.7}
	.news article div{padding-left:8.5em;}
/* CTA ------------------------------ */
	main+aside{padding: 4em 0 2em;position: relative;z-index: 1;margin-top: 4em}
	main+aside h1{padding:0 20%;}
	main+aside p{padding:0 35%;}
	main+aside a,.homeCTA{font-size:1.2em;padding:1em;}
	.homeCTA{width:42.8%}
/* Misc. Pages */
	.loginForms{margin: 0 0 4em;width: 93.75%;
	-webkit-column-gap:0;
	   -moz-column-gap:0;
			-webkit-column-gap:0;
	        column-gap:0;
	}
	.loginForms .landingIcon{float: none}
	.loginForms img{width:25%;margin-top: 0}
	.loginForms h1{margin-bottom: 0}
	.loginForms section{width: 80%}
	.loginForms input,.loginForms .button{width: 100%}
	.titleImg{width:50%;max-width:20em;margin-top: 2em} 
	/* CARRYOVER STYLES ------------------------------ */
	#content .callout-screen{float: right;width: auto;margin: 0 0 2em 3em}
/* ANIMATION ------------------------------ */
	main+aside a,.bigSlide a{-webkit-font-smoothing:subpixel-antialiased;}
	main + aside a:hover,.bigSlide a:hover{
		-webkit-animation: inflate .2s;
		        animation: inflate .2s;
		}
/* GRID OVERLAY ------------------------------ */
	.showGrid{display: block;z-index: 100;padding: .5em;position: fixed;bottom:0;right: 0;cursor: pointer}
	.gridOverlay{display: none;position: fixed;width: 100%;height: 100%;margin: 0 auto;z-index:100;background: url(/images/grid-line.png) repeat 40% center;background-size: 100% 2em}
	.gridOverlay.on{display: block;padding: 0 2%;left: 0;top:0;}
	.gridOverlay .wrap,.gridOverlay .wrap div{background-color: #e5e5e5;height: 100%}
	.gridOverlay .wrap div{float: left;width:calc(5% - 1em);margin: 0 .5em;}






.portfolioRight li{background:none}

#brand img,#mainnav aside,.home .bigSlide, .home .photoStrip, .home #clients,.landing #clients,.shareIcons{display: none}
.email-supp *{background-image:none}
html, body, .caseslide .wrap{line-height: 1.8}
input.FormButton {width:1px;overflow:visible}
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], textarea, select{border:1px solid #DADADA}
a{color:#c41f41 }
p,h2,h3,h4,#content ul,.contentEditor ul,.landingText ul,blockquote,dd,ol,.highlight,.blogTips{margin-bottom:2em}
h1, #content article.blog > h1, #content .blog > article > h1, #content .portfolioRight h1{font-size: 1.5em}
h1{margin-bottom: 1em}
p + h2, p + h3, p + h4, p + h5, p + h6 {margin-top:2em;}
hr{border-top:1px solid #d9d9d9;margin-top:2em;margin-bottom: em;}
#content h1{line-height: 1.5em}
header{border-bottom: 5px solid #c41f41}
header:hover{}
header .wrap{overflow: visible}
#brand a{background:url(/images/WebSolutions.png) no-repeat 0 0; height: 36px;width: 200px;float: left;margin: 12px 0}
#brand h1{float: left;clear: left;width: 200px}
#mainnav{float: right;margin-top:5px;width: auto}
#mainnav li{margin-left: 2em;}
/*#mainnav a{padding: .1em .5em}
#mainnav li ul{position: absolute;top:100%;left:0;z-index: 10;background-color: #fff;display: none}
#mainnav li:hover ul{display: block}*/
#mainnav li li{margin-left: 0;}
.pageHeader{display: none}
main{margin-top: 3em;display: block}
main+aside{background-color:#dadada;padding-top: 2em}
main+aside h1{width: 100%;padding: 0;margin-bottom: .5em}

#sidenav > ul > li > a{font-size: 1.2em}
#sidenav li.on ul li li a {padding-left: 1em;}

footer .wrap{border-top:1px solid #666;padding-top: 1em}
.footerLinks{width:70%;}
.fatFooter nav ul{float: left;margin:0 2em 2em 0}
.fatFooter nav ul li{float:left}
.footerLinks li{width:auto}
.fatFooter nav li ul, .fatFooter nav ul li li {float: none}
.address{width:25%;float: left;}
.addresss *{width: 100%}
.address li{clear: left}

#content .photoright, #content .photoleft, .textRight{}
.textRight{font-size: 1.4em;line-height: 1.5em}
.fullImg img{max-width: none }

#services section{padding:2%}
#services section img{width:30%}
#portfolio{background-color: #e5e5e5}




/*a.facebook{background-image:none; height:16px; width:16px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../images/icons/32x32/facebook.png',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../images/icons/32x32/facebook.png',
sizingMethod='scale')";
}*/