*, *:after, *:before { box-sizing:border-box }

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent }

html { font-size:100% }

body { line-height:1; color:#778; font-family:'Lato', sans-serif; font-size:1.0em }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
nav ul { list-style:none }
blockquote, q { quotes:none }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none }
table { border-collapse:collapse; border-spacing:0 }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0 }
input, select { vertical-align:middle }
img { vertical-align:bottom }

strong			{ font-weight:bold }
em              { font-style:italic }
blockquote		{ font-style:italic; display:block; margin-bottom:8px; padding:15px; background-color:#f9f9fa; font-size:1.1em; line-height:125% }

p				{ line-height:140%; margin-bottom:15px; font-size:1.1em }
ul, ol			{ line-height:140%; margin-left:40px; margin-bottom:15px }
ul              { list-style-type:square }

a				{ color:#2ba6cb; text-decoration:none }
a:hover			{ color:#2ba6cb; text-decoration:none }
a:focus			{ outline:none }
a img			{ border:0 }

h1				{ font-size:1.6em; font-weight:bold; margin-bottom:15px; text-transform:uppercase; line-height:125% }
h2				{ font-size:1.3em; font-weight:bold; margin-bottom:15px; text-transform:uppercase; line-height:125% }
h3				{ font-size:1.1em; font-weight:bold; margin-bottom:15px; text-transform:uppercase; line-height:125% }
h4				{ font-size:1.0em; font-weight:normal }
h5				{ font-size:0.9em; font-weight:normal }
h6				{ font-size:0.8em; font-weight:normal }

.fl				{ float:left }
.fr				{ float:right }
.cb				{ clear:both; width:0; height:0; line-height:0; font-size:0; margin:0; padding:0 }
.dn             { display:none }

.imgLeft		{ float:left; margin:3px 15px 5px 0 }
.imgRight	    { float:right; margin:3px 0 5px 15px }

.hamIcon { display:none; cursor:pointer; right:0; margin:10px; width:48px; background:rgba(255, 255, 255, 0.90); box-shadow:0 1px 7px #789; position:fixed; z-index:3000 }

.headerBgr          { width:100%; background-color:#adf; background-size:cover; background-repeat:no-repeat; background-position:50% 50%; box-shadow:0 1px 7px #abc } /* common to all bgrs below */

.homepage_Bgr       { background-image:url("/assets/banner_homepage.jpg") }
.paid-search_Bgr    { background-image:url("/assets/banner_paid-search.jpg") }
.social-media_Bgr   { background-image:url("/assets/banner_social-media.jpg") }
.seo_Bgr            { background-image:url("/assets/banner_seo.jpg"); background-position:25% 20% }
.web-dev_Bgr        { background-image:url("/assets/banner_web-development.jpg") }
.branding-design_Bgr { background-image:url("/assets/banner_branding-design.jpg"); background-position:50% 50% }
.web-asset-man_Bgr  { background-image:url("/assets/banner_web-asset-management.jpg") }
.charities_Bgr      { background-image:url("/assets/banner_charities.jpg"); background-position:30% 40% }
.port-approx_Bgr    { background-image:url("/assets/banner_portfolio-approach.jpg"); background-position:85% 50% }
.auto-bid-man_Bgr   { background-image:url("/assets/banner_automated-bid-management.jpg") }
.combin-explod_Bgr  { background-image:url("/assets/banner_combinatorial-explosion.jpg") }
.work_Bgr           { background-image:url("/assets/banner_work2.jpg"); background-position:75% 50% }
.contact_Bgr        { background-image:url("/assets/banner_contact.jpg") }

.homepageStaticBgr { width:100%; padding:80px 0; background-color:#adf; background-size:cover; background-repeat:no-repeat; box-shadow:0 1px 7px #000 }
.homepageStaticBgr .homeBox { width:500px; padding:30px; background:rgba(25, 30, 35, 0.85); border-radius:2px; box-shadow:0 2px 7px #000; color:#ee6; text-shadow:0 1px 5px #000 }
.homepageStaticBgr .homeBox.right { float:right }
.homepageStaticBgr .homeBox h2 a { color:#ee6 }
.homepageStaticBgr .homeBox h2 a:hover { color:#fd3 }
.homepageStaticBgr .homeBox p { color:#eee; font-size:1.2em }
.homepageStaticBgr .homeBox p:last-child { margin-bottom:0 }
.homepageStaticBgr .homeBox p a { color:#5bd6fb }
.homepageStaticBgr .homeBox p a:hover { color:#abf6fb }
.homepageStaticBgr .homeBox p.readMore { text-align:right }
.homepageStaticBgr .homeBox p.readMore a { display:inline-block; background:rgba(255, 255, 255, 0.80); border-radius:2px; box-shadow:0 2px 2px #000; padding:4px 12px; font-size:.8em; font-weight:bold; color:#000; text-shadow:0 1px 1px #fff }
.homepageStaticBgr .homeBox p.readMore a:hover { background-color:#fff  }
.homepageStaticImg1 { background-image:url("/assets/banner_work2.jpg"); background-position:50% 50% }
.homepageStaticImg2 { background-image:url("/assets/banner_homepage2.jpg"); background-position:99% 50% }
.homepageStaticImg3 { background-image:url("/assets/banner_paid-search2.jpg"); background-position:25% 20% }
.homepageStaticImg4 { background-image:url("/assets/banner_seo2.jpg"); background-position:25% 20% }
.homepageStaticImg5 { background-image:url("/assets/banner_web-development.jpg"); background-position:25% 20% }

img.breakImg    { margin-bottom:20px; max-width:100% }

.imgMask        { background:url("/assets/mask.png") center center; opacity:.7 }

header .top     { height:415px; padding-top:1px }
header .top div h5, header .top div h6 { display:inline-block; padding:12px; font-size:1.2em; font-weight:bold; border-radius:2px; box-shadow:0 1px 4px #000 }
header .top div h5 { margin:305px 0 5px 0; color:#fff; text-shadow:0 1px 2px #000; background:rgba(50, 100, 150, 0.80) }
header .top div h6 { margin:0; color:#111; text-shadow:0 1px 2px #ddd; background:rgba(255, 255, 255, 0.80) }

a.homeOut { display:none }

span.rev { unicode-bidi:bidi-override; direction:rtl }
span.rev:before { content:"014 358 7" }
span.rev:after { content:"(0) 44+ :enohP" }

/* LEVEL ONE */
nav.mainSiteNav         { background:rgba(0, 0, 0, 0.60); position:fixed; z-index:2000; border-bottom-left-radius:2px; border-bottom-right-radius:2px; box-shadow:0 1px 4px #000 }
ul.nav                  { margin:0; padding:0 }
ul.nav li               { float:left; text-transform:uppercase }
ul.nav li a             { display:block; padding:8px 12px; color:#fff; font-size:1.0em; font-weight:bold; text-shadow:0 1px 2px #000 }
ul.nav li a:hover       { color:#fd0 }
/*ul.nav li a:hover:last-child { border-bottom-right-radius:2px }*/
ul.nav li a.homeIn      { padding-top:4px; padding-bottom:3px; margin-right:40px } /* background:none */
ul.nav li a.navExpand   { cursor:default }
ul.nav li a.active      { color:#fd0 } /* brand orange is fb4 */
ul.nav li a span        { display:inline-block; font-size:0.6em; vertical-align:top }
ul.nav li:hover         { position:relative }
ul.nav li a.nava:hover  { background:rgba(255, 255, 255, 0.30) }
ul.nav li a.navaLast:hover:last-child { border-bottom-right-radius:2px }
/* LEVEL TWO (inherits) */
ul.nav ul               { width:240px; visibility:hidden; z-index:1000; opacity:0; background:rgba(255, 255, 255, 0.9); transition:opacity .3s linear; position:absolute; left:0; margin:0; padding:0; box-shadow:0 3px 5px #555; border-bottom-left-radius:2px; border-bottom-right-radius:2px }
ul.nav ul li            { font-weight:normal; margin:5px; float:none }
ul.nav ul li a          { display:block; padding:4px 12px; color:#000; font-size:0.8em; text-shadow:0 1px 1px #fff; line-height:200%; background:none }
ul.nav ul li a:hover    { background:rgba(205, 215, 225, 0.5); border-radius:0; color:#000; text-shadow:0 1px 1px #fff }
/* LEVEL THREE (inherits) */
ul.nav ul ul            { left:100%; top:0 }
ul.nav li:hover > ul    { visibility:visible; opacity:1 }

.fullVerticalArea_Grey { width:100%; padding:60px 0; background:rgba(235, 245, 255, 0.9); box-shadow:0 1px 7px #9ab }

.centerBoundary { width:960px; height:100%; margin:0 auto; padding:0 20px } /* background:rgba(255, 0, 0, 0.2) */

.colFull { width:100%; padding:30px 30px 30px 0 }
.colCon { float:right; width:594px; padding:30px 30px 30px 0 }
.colFull p:last-child, .colCon p:last-child { margin-bottom:0 }

.serviceIcons a { display:inline-block; vertical-align:top; margin:5px 8px; padding:25px; background-color:#fff; border-radius:2px; box-shadow:0 0 4px #cde }
.serviceIcons a:hover { box-shadow:0 0 20px #abc }
.serviceIcons a:last-child { margin-right:0 }
.serviceIcons a img { background-color:#ecedee; padding:5px; border-radius:2px; box-shadow:0 1px 2px #9ab }
.serviceIcons a span { display:block; width:100px; margin-top:10px; text-align:center; font-size:0.9em; font-weight:bold; color:#567; text-shadow:0 1px 1px #fff }

div.clientGrid { padding-top:15px }
img.workClient { float:left; display:inline-block; margin:0 4px 4px 0; padding:2px; background-color:#eef }
img.workClient:last-child { margin-right:0 }

.gpbSpin { margin:26px 0 26px 90px }

aside               { float:left; width:326px; padding:30px }
aside h4            { text-transform:uppercase; margin-bottom:15px }
aside ul, aside p	{ line-height:130%; font-size:0.9em }
aside ul            { margin-left:20px }
aside .badge        { margin-top:20px }

.asideBadge { border:1px solid #eee; background-color:#fff; box-shadow:0 2px 10px #ddd }
.g-partnersbadge { padding-bottom:15px }
.g-partnersbadge.home img { padding-left:40px }
.homepageBadge { margin-left:15px }
.hrBadge { border-top:1px solid #eee; margin:2em 0 }
.mcpBadge { margin-bottom:50px }

.badgeGroupWrap { display:flex; justify-content:space-around; flex-wrap:wrap; padding:50px 0 }

.badgeGroup { float:left; margin-right:40px }
.badgeGroup h3 { margin-top:30px }
.badgeGroup img { margin-bottom:30px }

.quote p { text-align:right }

.contactWrapper         { width:594px; font-size:0.9em; overflow:hidden }
.contactFloatWrapper    { padding-top:10px }
.contactFloatLeft       { float:left; width:280px }
.contactFloatRight      { float:right; width:280px }
.contactWrapper p       { margin-bottom:0; font-weight:bold }
.contactWrapper sup     { color:#f00; font-weight:normal }
.contactInput           { width:100%; padding:8px 10px; margin-bottom:20px; font-family:arial; background-color:#fff; color:#111; outline:none; border:2px solid #ddd; box-shadow:0 2px 0 0 #eee; border-radius:1px }
.contactInput:hover     { border:2px solid #ccc }
.contactInput:focus     { border:2px solid #aaa; background-color:#fafafa }
a.contactSubmit         { display:inline-block; text-align:center; padding:10px 20px; margin-bottom:5px; background-color:#555; color:#fff; text-shadow:0 1px 1px #000; font-weight:bold; box-shadow:0 1px 2px #456; border-radius:1px; text-decoration:none; outline:none }
a.contactSubmit:hover   { background-color:#222 }
.contactProgressImage   { display:none; margin-left:35px }
.contactMandatoryLine   { margin:4px 0 5px 0; font-size:0.75em }
.contactValidation      { display:none; background-color:#f00; border-radius:1px; color:#fff; padding:12px; margin-top:15px }
.contactResponse        { display:none; font-size:1.2em; font-weight:normal; line-height:140% }

footer              { background-color:#eaeef3; padding:15px 20px; text-shadow:0 1px 1px #fff; box-shadow:0 1px 8px #abc }
footer p            { float:left; font-size:1.0em; padding:15px 0 0 0 }
footer p a          { display:inline-block; margin:0 25px 0 30px; padding:4px 10px; border-radius:2px; background-color:#555; color:#fff; text-shadow:0 1px 1px #000; font-size:0.7em; font-weight:bold; box-shadow:0 1px 2px #456 }
footer p a:hover    { background-color:#222; color:#fff }
footer div.social   { float:right; padding-top:3px }
footer div.social a img { margin-left:7px }



/* ---------------------------------------------------- */
/* MEDIA QUERIES                                        */
/* ---------------------------------------------------- */

@media only screen and (max-width:991px)
{
    .centerBoundary { width:100% }
    .centerBoundary.top { padding:0 }
    nav.mainSiteNav { width:100% }
    ul.nav { display:block }
    ul.nav li a.homeIn { position:absolute }
    ul.nav li a.nava { margin-top:35px }
    header .top div h5, header .top div h6 { margin-left:20px }
    .serviceIcons a { padding:15px }
    .colCon, aside { float:none; width:100%; padding:15px 0 }
    .quote p { text-align:left }
    footer { margin-top:30px }
}

@media only screen and (max-width:767px)
{
    .hamIcon { display:inline-block }
    ul.nav { display:none }
    ul.nav li { float:none }
    ul.nav li a.homeIn { position:unset }
    ul.nav li a.nava { margin-top:0 }
    header .top div h5, header .top div h6 { display:none }
    .serviceIcons { text-align:center }
    .aside { width:100% }
    .contactWrapper { width:100% }
    .contactFloatLeft  { float:none; width:100% }
    .contactFloatRight { float:none; width:100% }
}

@media only screen and (max-width:515px)
{
    .homepageStaticBgr .homeBox { width:100% }
}

@media only screen and (max-width:479px)
{
    ul.nav ul { left:90px }
    .homepageStaticBgr .homeBox p { font-size:1.1em }
    .homepageStaticImg1 { padding-top:150px; font-size:0.9em }
    .homepageStaticImg2 { padding-top:100px; font-size:0.9em }
    .homepageStaticImg3 { padding-top:90px; font-size:0.9em }
    .homepageStaticImg4 { padding-top:50px; font-size:0.9em }
    .serviceIcons a { width:100%; padding:15px 0 }
    .serviceIcons a img { width:20% }
    .serviceIcons a span { display:inline-block; margin:0 0 30px 10px }
    .badgeGroupWrap > div:last-child { padding-top:30px }
    footer { padding-left:0 }
    footer p a { margin:10px 10px 0 0 }
    footer div.social { float:none }
    footer div.social a img { margin:0 7px 0 0 }
}