/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body{ font-family: 'Exo 2', sans-serif; }
p{ font-size: 16px; }

a, a:visited, a:hover{ text-decoration: none; color: #000;   }
a.selected{ font-weight: bold; color: #252525;  }

/* link hover line left to right animation effect*/
a {
display: inline-block;
}
a:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
a:hover:after {
width: 100%;
background: black;
}
a.thinner:after{ height: 2px; }

/*remove hover effect from images*/
.small-block:hover:after{ background: none; display: none; }
.large-block:hover:after{ background: none; display: none; }
a.img:hover:after, .carousel-responsive div a:after{
    background: none;
    display: none;
}
a.logo:after{
    background: none;
    display: none;
}
a.no-style:after, .mobile-nav-list a:after, a.video-link:after, a.logo-link:after, .block-arrow a:after, a.logo-over:after, a.video-over:after, a.team-image:after, a.imgbtn:after, a.img:after, ul.article-icons a:after, ul.icons a:after, a.rotator-btn:after, a.rollover:after{
    display: none; 
}
a.no-style:hover:after, .mobile-nav-list a:after, a.logo:hover:after, a.video-link:hover:after, a.logo-link:hover:after, .block-arrow a:hover:after, a.logo-over:hover:after, a.video-over:hover:after, a.team-image:hover:after, a.imgbtn:hover:after, a.img:hover:after, ul.article-icons a:hover:after, ul.icons a:hover:after, a.rotator-btn:hover:after, a.rollover:hover:after{
    background: none;
    content: "";
    height: 0;
    display: none;
}

.cta a:hover:after, .footer-left a:hover:after {
width: 100%;
background: white;
}
a.award-link:hover:after{
background: #656565;
}
/* end link animation effect */



img{ max-width: 100%; }
h1{ font-size: 32px; color: #252525; }
h2{ font-size: 24px; color: #252525; }
h3{ font-size: 16px; color: #252525; }
h4{ font-size: 13px; color: #252525; }
h5{ color: #7f7f7f; font-size: 16px; }




header{ padding: 66px 0 35px 0;  margin: 0 auto; width: 972px; position: relative; }

.wrapper-wide { background-color: #ebebeb; }

.blue, .wrapper-wide.blue{ background-color: #00ccff; }
.pink, .wrapper-wide.pink{ background-color: #ff9900; }
.orange, .wrapper-wide.orange{ background-color: #fd8713; }
.white, .wrapper-wide.white{ background-color: #fff; }
.light, .light h1, .light h2, .light h3, .light p, .light a, .light a:visited{ color: white; }
.light a, .light a:visited{ color: white; text-decoration: none; }
.light a:hover:after {
  width: 100%;
  background: #fff;
}
.dark, .dark h2, h2.dark{ color: #000; }
.blue-text{ color: #00ccff; }
.mobile-bg-gray{ background-color: #ebebeb}

.wide-background{ background-color: #ebebeb; }
.content{ margin: 0px auto 40px; width: 972px; }
.pad-content{ padding: 30px 0; }
.pad-tall{ padding: 130px 0; }
.no-pad-bottom{ padding-bottom: 0; margin-bottom: 0; }
.no-pad-top{ padding-top: 0; margin-top: 0; }
.no-margin-bottom{ margin-bottom: 0; }
.emphasis{ font-style: italic; }
.top-menu{ float: right; color: #00ccff; font-weight: 700; }
.main-nav{ list-style-type: none; position: absolute; right: 0; top: 80px;  clear: both; padding-top: 15px; }
.main-nav li{ padding-left: 75px; display: inline; }
.main-nav li a, .main-nav li a:visited, .main-nav li a:hover{ color: black; font-weight: bold; }

.sidebar-quote{ color: #00ccff; }
.sidebar-attribution{ font-weight: normal; color: #7f7f7f; padding-top: 0; }

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    position: absolute;
    right: 10px; 
    top: 25px;
   /* width: 50px;  */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    /*background: #19c589;*/
    text-align: center;
    padding: 0px 0;
    display: none;
}

/*Hide checkbox*/
.show-menu-checkbox{
    display: none;
    -webkit-appearance: none;
}

/* lightbox*/
.close{ float: right; }

/*Show menu when invisible checkbox is checked*/
.mobile-nav-list{ display: none; }

.show-menu-checkbox:checked ~ .mobile-nav-list{
    display: block;
}

/*layout*/
.large-block{ width: 480px; height: 480px; display: block; position: relative; }
.small-block{ width: 234px; height: 233px; display: block; position: relative; }


.home-block-1-text{ 
    position: absolute;     
    left: 13px;
    bottom: 12px;
    color: white;
    font-size: 20px; /*36px;*/
    font-weight: 700; 
    
    /*letter-spacing: 1.2px;*/
 }
 .home-block-small-1-text{
    position: absolute;
    left: 13px;
    bottom: 16px;
    color: white;
    font-size: 20px; /*18px*/
    font-weight: 700;
    line-height: 100%;
    width: 200px; 
    /*letter-spacing: 1.2px;*/
 }

.row-third{ float: left; width: 312px; padding-bottom: 15px; padding-right: 15px;  }
.row-third:nth-of-type(3n){ padding-right: 0px; }

.row-half{ float: left; width: 480px; padding-bottom: 12px; position: relative; }
.row-quarter{ float: left; width: 234px; padding-bottom: 12px; position: relative; }
.row-quarter.no-pad-bottom{ padding-bottom: 0px; }
.row-half.pad-left{ padding-left: 12px; }
.row-quarter.pad-left{ padding-left: 12px; }

.row-third-bio{ float: left;  width: 273px; padding-bottom: 50px; padding-right: 74px;  }
.row-third-bio:nth-of-type(3n){ padding-right: 0px; }

.row-third-bio h2{ margin-bottom: 0; }
.row-third-bio h4{ margin-top: 0; }

.row-third .large-block{ width: 312px; height: 312px; background-size: 312px 312px !important; }
.row-third .large-block .home-block-1-text{ font-size: 20px; line-height: 100%;  width: 250px; }

.pad-block{ font-size: 20px; }
.row-half .large-block-over{ position: absolute; top: 0; left: 0; width: 480px; height: 480px; display: none; background: rgba(28, 28, 28, .8); color: white; cursor: pointer; line-height: 1.4;}
.row-half .pad-block{ padding: 20px 0px 0 13px; width: 360px; font-size: 18px; }
.row-half.pad-left .large-block-over{ margin-left: 12px; }
.row-third .large-block-over{ position: absolute; top: 0; left: 0; width: 312px; height: 312px; display: none; background: rgba(28, 28, 28, .8); color: white; cursor: pointer; }
.row-third .pad-block{ padding: 20px 0px 0 13px; width: 250px; font-size: 18px; }
.row-quarter .small-block-over{ position: absolute; top: 0; left: 0; width: 234px; height: 234px; display: none; background: rgba(28, 28, 28, .8);  color: white; cursor: pointer; line-height: 1.4; }
.row-quarter .small-block-over-cta{ opacity: 1; }
.row-quarter.pad-left .small-block-over{ margin-left: 12px; }
.row-quarter .pad-block{ padding: 20px 0px 0 13px; width: 200px; font-size: 18px; }

.block-over-title{ font-weight: bold; font-size: 20px; line-height: 100%; padding-bottom: 10px;  }
.row-half .large-block-over .block-over-title{ padding-top: 250px; }
.row-third .large-block-over .block-over-title{ padding-top: 0px; }
.block-arrow{ position: absolute; top: 20px; right: 0px; }

.row-third .team-image-over{ position: absolute; color: white; cursor: pointer; top: 0; left: 0; width: 318px; height: 318px; display: block; opacity: 1; background-color: transparent; z-index: 3; }
.row-third .team-image-text{ position: absolute; bottom: 20px; left: 20px; z-index: 4; }

.row-half a.block-view{ display: block; position: absolute; bottom: 16px; left: 13px; color: #fff; font-size: 12px; text-transform: uppercase; font-weight: 700; }
.row-third a.block-view{ display: block; position: absolute; bottom: 16px; left: 13px; color: #fff; font-size: 12px; text-transform: uppercase; font-weight: 700; }
.row-quarter a.block-view{ display: block; position: absolute; bottom: 16px; left: 13px; color: #fff; font-size: 12px; text-transform: uppercase; font-weight: 700; }

a.block-view:hover{ font-weight: 700; }
a.block-view:hover:after {
width: 100%;
background: white;
}

.float-right{ float: right; }
.float-left{ float: left; }

.logo-link,.video-link{ position: relative; }
.logo-over,.video-over{ position: absolute; top: 0; left: 0; padding: 105px; width: 105px; height: 105px; display: none; background-color: #252525; background: rgba(28, 28, 28, .8);} /*1c1c1c*/

/* internal */
.hero{ padding: 30px 0; }
.hero p{ font-size: 26px; }
.hero-section-title{  font-size: 22px; padding-bottom: 0px; }
.clients-say-left{ float: left; width: 280px; padding-right: 120px; }
.clients-say-right{ float: left; width:  550px;     padding-top: 30px;  }
.capabilities a, .capabilities a:visited{ font-size: 26px; color: #252525; }

/*rotator*/
.activity-window{ display: block; height: 400px;  position: relative; z-index: 1; }
.row-half .activity-window{ height: 440px; padding: 20px;  }
.clients-say-right .activity-window{ height: 358px; }
.awards .activity-window{ height: 390px; }

.activity-window-divider-line{ display: none; }

.activity-home h1{ color: #00ccff; font-size: 36px; line-height: 125%; }
.activity-home .slide p{ font-size: 20px; }
.activity-home-bottom{ position: absolute; bottom: 20px; left: 13px; color: #b7b7b7; }
.activity-home-bottom h4{ margin-bottom: 0; }
.activity-home-bottom a{ text-transform: uppercase; font-size: 13px; color: #b7b7b7; }

.large-image-mobile{ display: none; }

.slide{ position: relative; }
.slide { position: absolute; top: 0; left: 0; z-index: 3; background-size: cover; background-position: top center; width: 100%;  display: block; opacity: 0; }
.activity-window-insights .slide{ height: 400px;  }

.slide-text{ max-width: 560px;  }
.slide-image{ position: absolute; bottom: 0; left: 480px; }

.awards .slide{ height: 390px; }
/* .row-half .slide{ top: 20px; left: 20px; width: 440px; } */
.row-half .slide{
    width: 370px;
    height: 440px;
    padding: 20px 90px 20px 20px;
}
.slide .attribution{ padding-top: 20px; }
.slide .attribution p{ font-size: 12px; padding: 0; margin: 0;}

.slide-1{ opacity: 1; }
.slide p{ font-size: 18px;   }



.rotator-buttons {
  position: absolute;
  width: 200px;
  bottom: 20px;
  height: 40px;

}
.activity-window-insights .rotator-buttons{ left: 50%; margin-left: -35px; }
.activity-home .rotator-buttons{
    bottom: 20px;
    
}
.activity-contact .rotator-buttons{ left: 160px; }

.rotator-buttons-container {
  width: 100%;
  position: relative;
  height: 40px;
  z-index: 5;
}

.buttons {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 6;
}
.rotator-btn{ padding-right: 10px; }
/*end rotator*/


.sidebar{ width: 200px; float: left; margin-right: 100px; }
.main{ width: 660px; float: right; }

.sidebar ul{ list-style-type: none; padding-left: 0; margin-left: 0;  }
.sidebar li{ padding-bottom: 10px; }
.sidebar p{ color: #7f7f7f; font-size: 13px; }


.page-nav{ list-style-type: none; padding-left: 0; margin-left: 0; }
.page-nav li{ display: inline; padding-right: 5px; }
.page-nav li a.selected { color: black; font-weight: 700; }

.color-pink{ color: #ec008c !important; }
.color-green{ color: #43df43 !important; }
.color-blue{ color: #00ccff !important;}

/*case studies*/
.case-study-header{ width: 100%; margin-bottom: 55px; }

.case-studies h1{ font-size: 46px; line-height: 110%; }
.case-studies h2{ font-size: 36px;  }
.case-studies h2.related-projects-header{ font-size: 32px; }
.case-studies h3{ font-size: 26px; font-weight: 400; }
.case-studies p { font-size: 20px; }

.callout-label{ font-size: 16px; font-weight: 700; }
.callout-text{ font-size: 20px; }
.video-section{ background-color: #252525; min-height: 200px; padding: 120px 0 90px 0;  }
.video-section iframe{ max-width: 970px; width: auto; }

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

   .column-content {
        display: inline-block;
        position:relative;
        width: 100%;
    }
    .column-content img{
        margin-top:-7px;
        vertical-align: middle;        
    }

    .column-content-text { display:inline-block; vertical-align:middle }

    .container:after {
    clear: both;
}


.case-study-video-bg{
	position: relative;
    z-index: 1;
}
.case-study-video-overlay-image{
    position: absolute;
    width: 950px;
    height: 359px;
    z-index: 2;
    top: 0;
    left: 0;
}

.container > div {
    /*min-height: 400px;*/
    float: left;
    width: 50%;
    display:inline-block;
    vertical-align: middle;
}
.container-content{
    display: inline-block;
    vertical-align: middle;
    max-width: 400px; 
}

.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}
.wide-with-background-left .content{  padding-top: 180px; }
.wide-with-background-left .content h2{ width: 400px; }
.wide-with-background-left .content p{ width: 400px; }

.intro-text{ width: 500px; padding-right: 120px; float: left; }
.client-results{ width: 350px; float: left; padding-top: 20px; }
.client-results .emphasis{ font-size: 13px; margin-top: 0; }
.client-results blockquote{ padding-left: 0; margin-left: 0; font-weight: bold; line-height: 125%; }

ul.services{ list-style-type: none; padding-left: 0;  }
ul.services li a{ color: #8a8a8a; }

/*awards*/
.awards li{ list-style-type: none; padding-bottom: 15px; color: #707070; line-height: 16px; }
.awards-sidebar li a, .awards-sidebar li a:hover{ color: #707070 !important; font-size: 13px !important; }


.count-number{ font-size: 42px; color: #00ccff;  font-weight: bold; }
.stat-label{ font-size: 42px; color: #00ccff;  font-weight: bold; }
.count-text{ font-size: 20px; color: #7f7f7f; display: block; padding: 0 20px;  }

/*team*/
.bio{ padding-right: 50px; }
.bio h2{ margin-bottom: 0; }

.static-team-image{ width: 272px; height: 272px; }

/*news*/
.byline{ color: #7f7f7f; font-size: 13px; }

/*insights*/
.insight-listing{ padding-bottom: 30px; }
.insight-media-image{ padding-top: 25px; width: 234px; height: 234px; }
.insights-cta{ height: 100px; }

/*focus area*/
.clients{ list-style-type: none; padding-left: 0; margin-left: 0;  margin-bottom: 0; }
.clients.more{ margin-top: 0; }
.clients li{ padding-bottom: 10px; }
.clients p{ color: #7f7f7f; font-size: 13px; }
.clients a{ color: #7f7f7f; font-size: 16px; }

.focus-area-nav{ padding: 30px 0;  }
.focus-area-nav h4{  text-transform: uppercase; color: #252525; }
.focus-area-nav a{ color: #7f7f7f; text-transform: uppercase; font-size: 13px; font-weight: bold;  }


/*work*/
.work-filter-1{ float: left; width: 640px; padding-right: 20px;  }
.work-filter-2{ float: left; width: 130px; padding-right: 20px;  }
.work-filter-3{ float: left; width: 140px;  }

.work-filter-col-1{ float: left; padding: 0 20px 0 0; width: 130px; }
.work-filter-col-2{ float: left; padding: 0 20px 0 0; width: 170px; }
.work-filter-col-3{ float: left; padding: 0; width: 80px; }

ul.work-list{ list-style-type: none; padding-left: 0; margin-left: 0;  }
ul.work-list li{ padding-bottom: 10px; }
ul.work-list li a{ color: #7f7f7f; font-size: 13px; }
ul.work-list li a.selected{ color: #252525; font-weight: bold; }
.view-project{ padding: 20px 0 10px 0; }
.view-project a{ text-transform: uppercase; font-weight: bold; font-size: 13px; }

.expand-symbol{ display: none; }


/*article*/
.article-header{ position: relative; height: 256px;  }
.article-date{ color: #858585; font-size: 20px; }
.tags{ position: absolute; bottom: 0px; left: 0px; font-size: 11px; color: #858585; }
.tags a{ font-style: italic; color: #858585}
.recent-post{ padding-bottom: 30px;  }
.recent-post h3{ font-size: 20px; margin: 10px 0; }
.recent-post .article-date{ font-size: 12px; }
.recent-post .media.attribution {
    margin-bottom: 0;
}
.article-icons{ margin-left: 0; padding-left: 0; list-style-type: none; margin-bottom: 40px;  }
.article-icons li{ display: inline-block; padding-right: 20px; }

.our-team img{ padding-left: 7px;}
.our-team img:first-child{ padding-left: 0; }
.short-text p{ max-width: 400px; }
.view-all-work-link{ text-transform: uppercase; font-weight: bold;   text-align: center; margin: 35px 0; display: inline-block; } /*70px*/
.read-more-link{ text-transform: uppercase; font-weight: bold; margin: 30px 0; display: inline-block;  }
.more-link{ text-transform: uppercase; font-weight: bold; font-size: 12px;  }
.less-link{ text-transform: uppercase; font-weight: bold; font-size: 12px; }
.more-link img{ display: inline !important; }
.more{ display: none; }
.center{ text-align: center; }
.bold{ font-weight: bold; }

.blue-q{ color: #00ccff; font-size: 20px; font-weight: bold; padding-bottom: 15px; }
.sidebar-cta{ color: #fd8713; font-size: 20px; font-weight: bold; padding-bottom: 15px; }

.divider-line{ border-top: 5px solid #efefef; margin: 20px 0; }
.sidebar .divider-line{ margin: 40px 0; }
.quoteblock{ padding-left: 20px;  }
.slide .quoteblock{ padding-left: 0; }

blockquote{ font-size: 20px; color: #00ccff; 
line-height: 1.45;
position: relative;
margin-top:0px; 
margin-right: 0px;
font-weight: 700;
}
/*
blockquote:before {
  display: block;
  content: "\201C";
  font-size: 20px;
  position: absolute;
  left: -10px;
  top: -0px;
  color: #00ccff;
  font-weight: 700;
}
*/

.bio blockquote{ color: #45d245; font-size: 26px; font-weight: 700;    margin: 40px 20px; }
.bio blockquote:before{
    color: #45d245;
    font-size: 26px;
}
.bio.text-green blockquote{ color: #45d245; }
.bio.text-green blockquote:before{ color: #45d245; }
.bio.text-orange blockquote{ color: #f26522; }
.bio.text-orange blockquote:before{ color: #f26522; }
.bio.text-pink blockquote{ color: #ec008c; }
.bio.text-pink blockquote:before{ color: #ec008c; }

/*visual marketing book*/
.visual-marketing-book-header{ background: #e1651f; height: 350px; margin-bottom: 30px; }

/*why us*/
.selected-clients{ padding: 30px 0 170px 0; }
.selected-clients h1{ margin-bottom: 80px; }
.recent-insights h3{ font-size: 20px; }
.recent-insights{ padding-top: 30px; }

cite{ padding-left: 40px; font-style: initial; font-size: 14px; color: #252525; font-weight: 700; }
.cite-title{ padding-left: 40px; font-style: initial; font-weight: 400; display: block; }

ul.icons{ list-style-type: none; margin-top: 0; padding-top: 15px; margin-left: 0; padding-left: 0;}
ul.icons li{ display: inline; padding-right: 10px; }

.faux-image{ width: 126px; height: 126px; background-color: #858585;  }

.cta{ width: 100%; background-color: #ff9900; color: white; text-align: center; padding: 20px; margin-top: 40px; margin-bottom: 20px; }
.cta h2, .cta-box h2{ color: white; font-size: 24px; }
.cta a, .cta-box a{ color: white; }
.cta-title{ color: white; font-size: 26px; display: block; padding-bottom: 10px; font-weight: 700;  }
.cta-subtitle{ color: white; font-size: 13px; display: block;  font-weight: 700; }

.cta-box{
 	width: 240px;
 	padding: 10px 25px;
 	background-color: #ff9900;
    margin-top: 40px;
    text-align: left; 
}
.cta-box h2{ line-height: 100%; }
.cta-box a{ color: #ff9900; background-color: white; display: inline-block; padding: 10px; text-align: left; }
.cta-box a.view-all-work-link{ margin-bottom: 15px }


				.cta-fixed-box{ display: none; background-color: #ff9900; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100000; }
				.cta-box-content{ max-width: 972px; margin: 0 auto; position: relative; text-align: center; }
				.cta-fixed-box a{ color: #ff9900; background-color: white; display: inline-block; padding: 7px 15px 4px 15px; text-align: left; }
				.cta-fixed-box a.view-all-work-link{ margin-bottom: 15px;  margin-top: 15px;   margin-left: 25px;}				
				.cta-fixed-box h2{ color: white; font-size: 20px; }
				.cta-box-button{ float: right; }
				.cta-fixed-box-title{ color: white; font-size: 20px; font-weight: 400; }
                 		.cta-fixed-box a.cta-fixed-box-close{ position: absolute; top: 5px; right: 5px; color: #fff; text-decoration: none; background-image: url(/assets/images/newsletter_headline1.gif) }

				@media only screen and (max-width: 971px) {
				.intro-text{ width: auto; }
				.client-results{ width: auto; }
				iframe{ width: auto; height: auto;}
				.cta-box-content{padding: 20px; width: 480px; }
				.cta-fixed-box-title{ font-size: 16px; display: block; float: left; }
				.cta-fixed-box a.view-all-work-link{ font-size: 14px;  margin-top: 0; margin-left: 0px; float: right; }
				
				}				 
				@media only screen and (max-width: 479px) {
				.cta-box-content{padding: 10px; width: 300px; }
				.cta-fixed-box-title{ font-size: 16px; display: block; float: none;     padding-top: 30px; }
				.cta-fixed-box a.view-all-work-link{ font-size: 14px;  margin-top: 20px; margin-left: 0px; float: none;  }				
				}

/* ====== media ====== */
.media {margin:0 0 20px 0px;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 20px;}
.media .img img{display:block;}
.media .imgExt{float:right; margin-left: 10px; margin-top: 0.83em;}

.media .img.article-image {
    margin-right: 44px;
}

/* =====truncate=====*/
.truncate {
    clear:both;
    clip:auto;
    overflow: hidden;
}
.revealText {
    background: white; /* Strange problem in ie8 where the sliding animation goes too far
                            if revealText doesn't have a background color!  */
}
.hiddenText {

}
.readMore {
    cursor: pointer;
    color: blue;
}
.ellipsis {
    color: black;
}

footer{ background-color: #252525; color: white; margin: 0px 0; padding: 20px 0; min-height: 400px; }
.footer-left{ float: left; width: 45%; }
.footer-right{ float: right; width: 45%; text-align: right; }
footer ul{ list-style-type: none; margin-top: 0; margin-left: 0; padding-left: 0;}
footer ul li{ /* display: inline; */ padding-right: 30px; padding-bottom: 5px; }
footer ul li a, footer ul li a:visited, footer ul li a:hover{ color: #fff; font-weight: 400; }

.footer-right li{ padding-right: 0; padding-left: 10px; }

/*.sign-up-input{ padding: 2px 0 1px; padding-left: 10px; border: 1px solid white; background-color: #252525; }*/
.sign-up-input {
    padding: 3px 0 3px;
    padding-left: 10px;
    border: 1px solid white;
    background-color: #252525;
    font-size: 15px;
}
footer form{ margin-top: 10px; }
footer input{ vertical-align: middle; }

#gmap_canvas img{max-width:none!important;background:none!important}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 971px) {
    /* Style adjustments for viewports that meet the condition */
    header {
      width: 460px;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 25px; 
	}
    .top-menu, .main-nav{ display: none; }
    .content{ width: 460px; padding-left: 10px; padding-right: 10px;  }
    .work-grid{ width: 480px; padding-left: 0; padding-right: 0; background-color: #fff; }
    .row-half.pad-left{ padding-left: 0px; }
    .row-half.pad-left .large-block-over{ margin-left: 0px; }
    

    .row-third{ 
        float: none;
        margin: 0 auto;    
        padding-right: 0; 
        
    }
    
    .row-quarter.center {
      margin: 0 auto;
      max-width: initial;
      width: 100%;
    }       
   
   .activity-window-insights-wrapper{ background-color: #fff; }
   .activity-window-insights{ height: 600px;  }
   .activity-window-insights .slide{ height: 600px; color: black;  }
   .large-image-mobile{ display: block; width: auto; }
   .slide{ background: none !important; background-color: #fff !important; }
   .activity-window-insights-wrapper.light, .activity-window-insights-wrapper.light h1, .activity-window-insights-wrapper.light h2, .activity-window-insights-wrapper.light h3, .activity-window-insights-wrapper.light p, .activity-window-insights-wrapper.light a, .activity-window-insights-wrapper.light a:visited{ color: #000; background-color: white; }
   .sidebar{ width: auto; float: none; margin-right: 0px; }
   .activity-window-insights-wrapper .activity-window{ background: none !important; }
   .activity-window-insights-wrapper .rotator-buttons{ bottom: 0; }
    .main{ width: auto; float: none; }
    .slide{ color: #000 !important; }
    
    .activity-window-divider-line{ display: block; }
    
    .clients-say-left{ float: none; width: auto; padding-right: 0px; }
    .clients-say-right{ float: none; width:  auto; padding-top: 30px; height: 500px; }    
    .clients-say-right .img{ float: none; }
    .clients-say-right .activity-window {
        height: 540px;
    }    
    .clients-say-right .quoteblock{ padding-left: 0px; margin-left: 0;  padding-top: 20px; }
    .clients-say-right blockquote { margin-left: 0px;  }
    cite{ margin-left: 10px; padding-left: 0; }
    .cite-title{ margin-left: 10px; padding-left: 0; }    
  
    
    .work-list{ margin-bottom: 0; }
    
    .static-team-image{ width: auto; height: auto; }
    
    .our-team{  text-align: center; }
    .our-team img{ padding-left: 0px; padding-bottom: 10px; }
    .footer-left{ float: none; width: 100%; }
    .footer-right{ float: none; width: 100%;  }
    
    
.show-menu {
        display:block;
    }      
    
   .mobile-search-icon{  display: block;  position: absolute; top: 10px; right: 70px; }
    .mobile-search-box{ display: none; width: 100%;   background-color: #f1f2f4; }
    .mobile-search-box .searchbox{   text-align: center; }
    .mobile-search-box .search-input{ margin: 20px; width: 400px; }
    
    /*Make dropdown links appear inline*/
    ul.mobile-nav-list  {
        /*background-color: #f1f2f4;*/
        position: static;
        display: none;
        /*border-top: 4px solid red;*/
        margin-top: 0;
        padding-left: 0;
        padding-top: 20px;
    }
    /*Create vertical spacing*/
    ul.mobile-nav-list li {
        margin-bottom: 1px;
        display: block;
        padding: 5px;
        /*border-bottom: 1px solid #cccacb;*/
        text-align: center;
    }
    ul.mobile-nav-list li li{ border: none; }
    /*Make all menu links full width*/
    ul.mobile-nav-list li, ul.mobile-nav-list li a {
        width: 100%; display: block;
    }       
    ul.mobile-nav-list li a{ /*padding-left: 40px;*/ text-align: center; display: block; font-size: 20px; }
    ul.mobile-nav-list li a span.arrow{   position: absolute;  right: 40px; }
    ul.mobile-nav-list li ul{ padding-left: 20px; }  
    
    ul.mobile-nav-list li a.mobile-nav-connect{
      background-color: #00ccff;
      width: 180px;
      margin: 0 auto;
      color: white;
      padding: 10px;
    }
    
    .bio{ padding-right: 0; float: none; padding-bottom: 20px; }
    .media .imgExt{ margin-left: 0; float: none; }
    
    .case-study-header-image{ display: none; }
    .no-right-mobile{ margin-right: 0 !important; }
}
@media only screen and (max-width: 479px) {
	
    /* Style adjustments for viewports that meet the condition */
    .wrapper-wide{ background-color: #fff; }
    .mobile-bg-gray{ background-color: #ebebeb}
    
    header{ width: 300px; padding-left: 10px; padding-right: 10px; padding-top: 25px; }
    .logo img{ width: 80%; }

    .content{ width: 300px; padding-left: 10px; padding-right: 10px; }
    .remove-content-320{ padding-left: 0; padding-right: 0; }
    
   /* .wide-background{ background-color: #fff; }*/
    
    .work-grid{ width: 320px; padding-left: 0; padding-right: 0; background-color: #fff; }
    .row-half.pad-left{ padding-left: 0px; }
    .row-half{ max-width: 100%; }
    .row-half img{ max-width: 320px; }
    .row-quarter{ max-width: 154px; }
    .row-quarter img{ max-width: 154px; }
    .row-third{ /*width: 300px;*/ }
    .row-third.pad-left { padding-left: 0px; }
    
    .popup-gallery .row-third{ width: 320px; }
    .popup-gallery .row-third img{ width: 320px; }
    
    .recent-insights .row-third{ width: 300px; }
    .row-third .large-block {
        width: 300px;
        height: 300px;
        background-size: 300px 300px !important;
    }    
    .row-third .team-image-over{ width: 300px; height: 300px;   }
    .row-third .large-block-over{ }

    
    .row-half .activity-window{ padding: 0; width: 260px; height: 500px; }
    .row-half .slide {
        width: 280px;
        height: 460px;
        padding: 20px 20px 20px 20px;
    }
    .row-half.float-right{ float: none; }
    .row-half.float-left{ float: none; }
    
        .row-half .large-block-over{ width: 320px; height: 320px;  }
    .row-half .large-block-over .block-over-title{ max-width: 280px; padding-top: 120px;  }
    .row-quarter .small-block-over{ width: 154px; height: 154px;  }
    .row-quarter .small-block-over .block-over-title{ max-width: 135px;  }
    
    .row-half .pad-block{ width: auto; }
    
    
    .no-float-mobile{ float: none; }
    
    .container{ width: 320px; margin: 0px auto 40px; }
    .container > div{ float: none; width: 100%; }
    
    .main .media.attribution{ text-align: left; }
    .main .bd{ text-align: left; }
    .main .media .img{ float: none; margin-right: 0; text-align: center; }
  
    .cta{ padding: 0; }

    .large-block{ width: 320px; height: 320px;  display: block; position: relative; background-size: contain !important; }
    .small-block{ width: 154px; height: 154px;  display: block; position: relative; background-size: contain !important; }
    .home-block-1-text{ font-size: 20px; } /*24px*/
    .home-block-small-1-text{ font-size: 14px;  }

    .row-half .large-block-over{ width: 320px; height: 320px; }
    .row-half .large-block-over .block-over-title{ padding-top: 0; }
    .row-half .activity-window{ width: 280px; }
    .row-half .slide{ width: 280px; }
    .row-quarter .small-block-over{ width: 154px; height: 154px; font-size: 12px; }
    .row-quarter .block-over-title{ font-size: 12px; }
    .row-quarter .pad-block{ font-size: 12px; }

    
    .row-quarter.no-pad-bottom{ padding-bottom: 12px; }
    
    .clients-say-left{ float: none; width: auto; padding-right: 0px; }
    .clients-say-right{ float: none; width:  auto; padding-top: 30px; height: 500px; }    
    .clients-say-right .img{ float: none; }
    .clients-say-right .activity-window {
        height: 540px;
    }
     .clients-say-right .quoteblock{ padding-left: 0px; margin-left: 0; padding-top: 20px; }
    .clients-say-right  blockquote { margin-left: 0px; }
    cite{ margin-left: 10px; padding-left: 0; }
    .cite-title{ margin-left: 10px; padding-left: 0; }
    
    .row-third-bio{ padding-left: 0; width: 100%; }
    .row-third-bio.pad-left-bio {
       padding-left: 0px;
    }
    .row-third-bio img{ 
    	width: 100%;
      max-width: 320px;    
    }

    
    .work-filter-1{ float: none; width: auto; padding-right: 0px;  }
    .work-filter-2{ float: none; width: auto; padding-right: 0px;  }
    .work-filter-3{ float: none; width: auto;  }

    .work-filter-col-1{ float: none; padding: 0 0px 0 0; width: auto; }
    .work-filter-col-2{ float: none; padding: 0 0px 0 0; width: auto; }
    .work-filter-col-3{ float: none; padding: 0; width: auto; }  
    
    .work-list{ margin-bottom: 0; }
    
    .expand-category{ font-size: 18px; }
    ul.work-list li a{ color: #7f7f7f; font-size: 18px; }
    
    .expandable-category{ display: none; }
    .expand-symbol{ display: inline; }
    
    .media .imgExt{ float: none; margin-left: 0; }
    
    .insight-media-image{ padding-top: 25px; width: 300px; height: 300px; }
    
    .insight-detail .img{ float: none; }
    .insights-cta{ height: auto; padding: 20px 0; }
    
    .article-header{ padding-top: 20px; }
    
    .activity-home .rotator-buttons {
        bottom: 30px;
            left: 25px;
    }
    
    .media-center-activity-window{ height: 470px; }
    
    .intro-text{ padding-right: 0; float: none; }

	.visual-marketing-book-header{ background: #e1651f; height: initial; margin-bottom: 30px; }

    .footer-left{ width: 100%; }
    .footer-right{ width: 100%; text-align: left; }
    footer ul li{ display: block; padding-right: 0px; }
    footer ul.icons li{ display: inline; padding-right: 10px; padding-left: 0px; }
    
}


@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        /*background: transparent !important;*/
        /*color: #000 !important;*/ /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
       /* text-decoration: underline; */
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }



    a:link:after,

    a:visited:after {

        content: "" !important;

    }


    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}