/*** Variables ***/
/*** Mixins ***/
/*** Imports ***/
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
  display: block; }

/*** CSS RESET ***/
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; }

body {
  line-height: 1; }

:focus {
  outline: 1; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

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

input, select {
  vertical-align: middle; }

figure {
  float: left; }

html, body {
  height: 100%; }

body {
  color: #232323;
  font-family: "Lato", "Helvetica", "Arial", sans-serif; }
  body p a,
  body p span {
    background-image: url("../img/blank.gif"); }

#wrap {
  min-height: 100%;
  min-width: 1150px; }

.loading {
  display: block;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 64px; }

.wrapper {
  margin: 0 auto;
  position: relative;
  width: 1000px; }

/* plain semantic styling */
a {
  color: #232323;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s; }
  a:hover, a.active {
    color: #ff498a;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    -ms-transition: all 0s;
    -o-transition: all 0s;
    transition: all 0s; }

.currentNav {
  color: #ff498a; }

p {
  line-height: 1.5; }

ul {
  list-style: none; }

/* misc colors */
.orange {
  color: #db7100; }

.pink {
  color: #ff498a; }

a.pink {
  text-decoration: none; }

a.pink:hover {
  color: #232323;
  cursor: pointer; }

.purple {
  color: #da0080; }

.blue {
  color: #00a2ac; }

a.blue {
  text-decoration: underline; }

a.blue:hover {
  text-decoration: none;
  color: #00a2ac; }

.light {
  font-weight: 300; }

.italic {
  font-style: italic; }

.borderBottom {
  border-bottom: 1px solid #e0e0e0; }

/*misc style classes */
.noMargin {
  margin: 0 !important; }

.centered {
  display: block;
  text-align: center; }

.easeIn {
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s; }

/*helpers*/
.ir {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr; }

.ir br {
  display: none; }

.hidden {
  display: none !important;
  visibility: hidden; }

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

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

.invisible {
  visibility: hidden; }

.clearfix:before, .clearfix:after {
  content: "";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  zoom: 1; }

/*** Font Pre-Loaders ***/
.fontLoader {
  left: -9999px;
  position: absolute;
  text-indent: -9999px;
  top: -9999px;
  visibility: hidden; }
  .fontLoader.lato100 {
    font-family: 'Lato';
    font-weight: 100; }
  .fontLoader.lato300 {
    font-family: 'Lato';
    font-weight: 300; }
  .fontLoader.lato400 {
    font-family: 'Lato';
    font-weight: 400; }
  .fontLoader.lato700 {
    font-family: 'Lato';
    font-weight: 700; }
  .fontLoader.lato300i {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 300; }
  .fontLoader.lato400i {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400; }
  .fontLoader.lato700i {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 100; }

header {
  height: 150px;
  position: relative;
  visibility: hidden;
  z-index: 5; }
  header nav {
    padding: 13px 0;
    position: relative;
    text-align: center;
    z-index: 5; }
    header nav a {
      color: #232323;
      font-size: 14px;
      font-weight: 400;
      padding: 2px 10px;
      text-decoration: none;
      text-transform: uppercase; }
  header a#theLab {
    background-image: url("../img/btn-the-lab.png");
    background-position: left top;
    display: none;
    height: 82px;
    position: absolute;
    right: 10px;
    top: -18px;
    width: 79px;
    z-index: 20; }
  header #branding {
    position: relative;
    top: -7px;
    z-index: 3; }
    header #branding .animation {
      margin-left: 388px;
      position: relative;
      top: -10px; }
    header #branding h3 {
      font-size: 13px;
      font-weight: 400;
      margin: 0;
      position: relative;
      text-align: center;
      top: -7px; }

#oldieBackup {
  display: none; }
  #oldieBackup h1 {
    background-image: url("../img/gr-logo.png");
    background-position: center top;
    background-repeat: no-repeat;
    font-size: 13px;
    font-weight: 400;
    margin-top: 50px;
    padding-top: 70px;
    text-align: center; }
  #oldieBackup h2 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: -15px;
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase; }
  #oldieBackup p {
    font-size: 14px;
    margin-top: 20px;
    text-align: center; }
  #oldieBackup a {
    font-weight: 700;
    text-decoration: none; }

#viewport {
  background-image: url("../img/gr-masthead-bg-loop.png");
  background-position: 0 50px;
  background-repeat: repeat-x;
  margin: -150px auto 0;
  padding-bottom: 166px;
  padding-top: 50px;
  position: relative;
  visibility: hidden;
  z-index: 1;
  overflow: hidden;
  /*** Height Helper ***/ }
  #viewport #heightHelper {
    float: left;
    height: 0px;
    position: relative;
    width: 1px;
    z-index: 0; }
  #viewport section {
    background-position: 0px 50px;
    display: none;
    position: relative;
    /*** Preloader ***/
    /*** Work Page ***/
    /*** Clients Page ***/
    /*** Awards Page ***/
    /*** Jobs Page ***/
    /*** Contact Page ***/
    /*** Work Sections ***/ }
    #viewport section .masthead {
      padding-bottom: 40px;
      text-align: center; }
      #viewport section .masthead a.hit {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0; }
        #viewport section .masthead a.hit.off {
          cursor: default; }
      #viewport section .masthead .youtube-masthead, #viewport section .masthead .video-masthead {
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden; }
        #viewport section .masthead .youtube-masthead.active, #viewport section .masthead .video-masthead.active {
          visibility: visible; }
      #viewport section .masthead .animation {
        margin: 0 auto;
        position: relative; }
      #viewport section .masthead nav {
        bottom: 6px;
        position: absolute;
        right: 0px;
        text-align: center;
        width: 100%;
        z-index: 105; }
        #viewport section .masthead nav a {
          background-color: white;
          border: 1px solid #d1d1d0;
          border-radius: 5px;
          height: 10px;
          margin: 3px;
          text-indent: -9999px;
          width: 10px; }
          #viewport section .masthead nav a.active {
            background-color: #ff498a;
            border: 1px solid #ff498a; }
          #viewport section .masthead nav a:hover:not(.active) {
            background-color: #ff498a;
            opacity: 0.7; }
    #viewport section .content {
      margin: 0 auto;
      padding-top: 45px;
      position: relative; }
      #viewport section .content p {
        font-size: 15px;
        line-height: 20px; }
      #viewport section .content hr {
        border: 0px;
        background-color: #e0e0e0;
        height: 1px;
        margin: auto 0;
        width: 780px; }
      #viewport section .content .shadowBox {
        background-image: url("../img/gr-shadowbox-bg-top-large.png");
        background-position: center top;
        background-repeat: no-repeat;
        margin: 0px auto;
        padding: 30px 0 0 0;
        width: 946px; }
        #viewport section .content .shadowBox .inner {
          background-image: url("../img/gr-shadowbox-bg-bottom-large.png");
          background-position: center bottom;
          background-repeat: no-repeat;
          padding: 30px 120px 80px;
          width: 706px; }
          #viewport section .content .shadowBox .inner h1 {
            font-size: 25px;
            font-weight: 300;
            margin: 0;
            padding: 10px 0; }
          #viewport section .content .shadowBox .inner p {
            font-size: 15px;
            line-height: 23px;
            margin: 0;
            padding: 10px 0px; }
    #viewport section#preloader {
      position: relative; }
      #viewport section#preloader .preloader {
        width: 90px;
        height: 20px;
        margin: auto;
        background-repeat: no-repeat;
        background-position: 0 0; }
      #viewport section#preloader .content {
        height: 900px; }
    #viewport section#work {
      background-position: 0px 290px;
      padding-bottom: 70px;
      padding-top: 125px; }
      #viewport section#work .masthead {
        height: 320px;
        position: relative; }
        #viewport section#work .masthead .shadow {
          height: 320px;
          line-height: 0px;
          overflow: hidden;
          margin-left: -75px;
          padding-bottom: 35px;
          width: 1150px; }
          #viewport section#work .masthead .shadow canvas {
            display: inline-block; }
          #viewport section#work .masthead .shadow > a {
            display: none;
            left: 0;
            position: absolute;
            width: 1150px;
            top: 0; }
            #viewport section#work .masthead .shadow > a.active {
              display: block;
              z-index: 100; }
        #viewport section#work .masthead .sotd {
          background-image: url("../img/gr-fwa-sotd.png");
          background-repeat: no-repeat;
          display: block;
          height: 100px;
          position: absolute;
          right: 0px;
          top: 0px;
          width: 100px; }
        #viewport section#work .masthead #photowall, #viewport section#work .masthead .video-masthead {
          position: relative; }
          #viewport section#work .masthead #photowall .overlay, #viewport section#work .masthead .video-masthead .overlay {
            left: 0;
            position: absolute;
            top: 0;
            z-index: 3; }
          #viewport section#work .masthead #photowall.playing .still, #viewport section#work .masthead .video-masthead.playing .still {
            display: none; }
        #viewport section#work .masthead a {
          display: inline-block; }
      #viewport section#work .content {
        /*** Thumbnails ***/ }
        #viewport section#work .content p {
          margin: 0 auto;
          position: relative;
          width: 700px; }
        #viewport section#work .content ul#workItems {
          list-style: none;
          position: relative;
          margin: 0 auto;
          padding: 0;
          position: relative;
          top: 40px;
          width: 100%;
          z-index: 5; }
          #viewport section#work .content ul#workItems li.row {
            float: left;
            width: 250px; }
            #viewport section#work .content ul#workItems li.row ul li.item {
              background: #fff;
              border: 1px solid #e0e0e0;
              -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
              box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
              display: block;
              float: left;
              margin: 4px;
              position: relative; }
              #viewport section#work .content ul#workItems li.row ul li.item a {
                background-color: #000;
                display: block;
                overflow: hidden;
                position: relative;
                text-decoration: none;
                width: 240px; }
                #viewport section#work .content ul#workItems li.row ul li.item a img.background {
                  float: left;
                  position: relative; }
                #viewport section#work .content ul#workItems li.row ul li.item a span.rollover {
                  background-color: #ff498a;
                  bottom: -60px;
                  color: #fff;
                  height: 60px;
                  left: 0px;
                  overflow: hidden;
                  position: absolute;
                  text-decoration: none;
                  width: 240px;
                  -webkit-transition: all 0.5s 0s cubic-bezier(0, 0.95, 0, 1);
                  -moz-transition: all 0.5s 0s cubic-bezier(0, 0.95, 0, 1);
                  -ms-transition: all 0.5s 0s cubic-bezier(0, 0.95, 0, 1);
                  -o-transition: all 0.5s 0s cubic-bezier(0, 0.95, 0, 1);
                  transition: all 0.5s 0s cubic-bezier(0, 0.95, 0, 1); }
                  #viewport section#work .content ul#workItems li.row ul li.item a span.rollover span.text {
                    height: 60px;
                    position: relative;
                    text-decoration: none;
                    top: -60px;
                    -webkit-transition: all 0.5s 0s cubic-bezier(0, 0.95, 0, 1);
                    -moz-transition: all 0.5s 0s cubic-bezier(0, 0.95, 0, 1);
                    -ms-transition: all 0.5s 0s cubic-bezier(0, 0.95, 0, 1);
                    -o-transition: all 0.5s 0s cubic-bezier(0, 0.95, 0, 1);
                    transition: all 0.5s 0s cubic-bezier(0, 0.95, 0, 1); }
                    #viewport section#work .content ul#workItems li.row ul li.item a span.rollover span.text span.heading {
                      clear: left;
                      display: block;
                      float: left;
                      font-size: 16px;
                      font-weight: 500;
                      line-height: 22px;
                      margin: 9px 0px 0px 15px;
                      position: relative;
                      width: 225px; }
                    #viewport section#work .content ul#workItems li.row ul li.item a span.rollover span.text span.subHeading {
                      clear: left;
                      display: block;
                      float: left;
                      font-size: 11px;
                      margin: 0px 0px 0px 15px;
                      position: relative;
                      width: 225px; }
                #viewport section#work .content ul#workItems li.row ul li.item a:hover span.rollover {
                  bottom: 0px; }
                #viewport section#work .content ul#workItems li.row ul li.item a:hover span.text {
                  height: 0px;
                  top: 0px; }
    #viewport section#clients {
      background-position: 0px 20px;
      padding-bottom: 100px;
      padding-top: 25px; }
      #viewport section#clients .masthead {
        padding-bottom: 0px;
        top: 62px; }
        #viewport section#clients .masthead .heading {
          position: relative;
          top: -100px; }
      #viewport section#clients .content {
        padding-top: 0px;
        top: 40px; }
        #viewport section#clients .content p {
          margin: 0 auto;
          width: 750px; }
        #viewport section#clients .content hr {
          margin: 0 auto;
          position: relative;
          top: 30px;
          width: 780px; }
        #viewport section#clients .content #clientInfo {
          margin: 0 auto;
          padding: 40px 0 20px 0;
          width: 780px; }
          #viewport section#clients .content #clientInfo ul.clientList {
            float: left;
            font-size: 14px;
            list-style: none;
            margin: 0;
            padding: 0;
            width: 230px; }
            #viewport section#clients .content #clientInfo ul.clientList li {
              padding-bottom: 5px;
              position: relative; }
              #viewport section#clients .content #clientInfo ul.clientList li a {
                text-decoration: none; }
          #viewport section#clients .content #clientInfo ul.brandList {
            background-image: url("../img/btn-brand-logos-sprite-pink.png");
            background-position: -9999px -9999px;
            background-repeat: no-repeat;
            float: right;
            margin-right: -18px;
            min-height: 600px;
            position: relative;
            top: -10px;
            width: 525px; }
            #viewport section#clients .content #clientInfo ul.brandList li {
              background-image: url("../img/btn-brand-logos-sprite-pink.png");
              background-image: url("../img/btn-brand-logos-sprite.png?v=1");
              display: block;
              float: left;
              height: 60px;
              position: relative;
              text-indent: -9999px;
              width: 105px;
              /*&:hover
              {
              	background:
              	{
              		image:					url('../img/btn-brand-logos-sprite-pink.png');
              	}
              }	*/ }
            #viewport section#clients .content #clientInfo ul.brandList li.google {
              background-position: -4px -13px; }
            #viewport section#clients .content #clientInfo ul.brandList li.old-spice {
              background-position: -109px -13px; }
            #viewport section#clients .content #clientInfo ul.brandList li.microsoft {
              background-position: -214px -13px; }
            #viewport section#clients .content #clientInfo ul.brandList li.burger-king {
              background-position: -319px -13px; }
            #viewport section#clients .content #clientInfo ul.brandList li.sprint {
              background-position: -424px -13px; }
            #viewport section#clients .content #clientInfo ul.brandList li.you-tube {
              background-position: -4px -70px; }
            #viewport section#clients .content #clientInfo ul.brandList li.toyota {
              background-position: -109px -70px; }
            #viewport section#clients .content #clientInfo ul.brandList li.hp {
              background-position: -214px -70px; }
            #viewport section#clients .content #clientInfo ul.brandList li.coke-zero {
              background-position: -319px -70px; }
            #viewport section#clients .content #clientInfo ul.brandList li.activision {
              background-position: -424px -70px; }
            #viewport section#clients .content #clientInfo ul.brandList li.mcdonalds {
              background-position: -4px -128px; }
            #viewport section#clients .content #clientInfo ul.brandList li.coca-cola {
              background-position: -109px -128px; }
            #viewport section#clients .content #clientInfo ul.brandList li.doritos {
              background-position: -214px -128px; }
            #viewport section#clients .content #clientInfo ul.brandList li.facebook {
              background-position: -319px -128px; }
            #viewport section#clients .content #clientInfo ul.brandList li.target {
              background-position: -424px -128px; }
            #viewport section#clients .content #clientInfo ul.brandList li.yahoo {
              background-position: -4px -187px; }
            #viewport section#clients .content #clientInfo ul.brandList li.volkswagon {
              background-position: -109px -187px; }
            #viewport section#clients .content #clientInfo ul.brandList li.windows-phone {
              background-position: -214px -187px; }
            #viewport section#clients .content #clientInfo ul.brandList li.disney {
              background-position: -319px -187px; }
            #viewport section#clients .content #clientInfo ul.brandList li.google-plus {
              background-position: -424px -187px; }
            #viewport section#clients .content #clientInfo ul.brandList li.got-milk {
              background-position: -4px -247px; }
            #viewport section#clients .content #clientInfo ul.brandList li.htc {
              background-position: -109px -247px; }
            #viewport section#clients .content #clientInfo ul.brandList li.puma {
              background-position: -214px -247px; }
            #viewport section#clients .content #clientInfo ul.brandList li.best-buy {
              background-position: -319px -247px; }
            #viewport section#clients .content #clientInfo ul.brandList li.jose-cuervo {
              background-position: -424px -247px; }
            #viewport section#clients .content #clientInfo ul.brandList li.marvel {
              background-position: -4px -316px; }
            #viewport section#clients .content #clientInfo ul.brandList li.cisco {
              background-position: -109px -316px; }
            #viewport section#clients .content #clientInfo ul.brandList li.chromebook {
              background-position: -214px -316px; }
            #viewport section#clients .content #clientInfo ul.brandList li.cadillac {
              background-position: -319px -316px; }
            #viewport section#clients .content #clientInfo ul.brandList li.paramount {
              background-position: -424px -316px; }
            #viewport section#clients .content #clientInfo ul.brandList li.microsoft-office {
              background-position: -4px -389px; }
            #viewport section#clients .content #clientInfo ul.brandList li.zune {
              background-position: -109px -389px; }
            #viewport section#clients .content #clientInfo ul.brandList li.american-express {
              background-position: -214px -389px; }
            #viewport section#clients .content #clientInfo ul.brandList li.old-navy {
              background-position: -319px -389px; }
            #viewport section#clients .content #clientInfo ul.brandList li.stride {
              background-position: -424px -389px; }
            #viewport section#clients .content #clientInfo ul.brandList li.neutrogena {
              background-position: -4px -460px; }
            #viewport section#clients .content #clientInfo ul.brandList li.ally {
              background-position: -109px -460px; }
            #viewport section#clients .content #clientInfo ul.brandList li.scion {
              background-position: -214px -460px; }
            #viewport section#clients .content #clientInfo ul.brandList li.rdio {
              background-position: -319px -460px; }
            #viewport section#clients .content #clientInfo ul.brandList li.virgin {
              background-position: -424px -460px; }
            #viewport section#clients .content #clientInfo ul.brandList li.michelob {
              background-position: -4px -524px; }
            #viewport section#clients .content #clientInfo ul.brandList li.suave {
              background-position: -109px -524px; }
            #viewport section#clients .content #clientInfo ul.brandList li.gmail {
              background-position: -214px -524px; }
            #viewport section#clients .content #clientInfo ul.brandList li.aveeno {
              background-position: -319px -524px; }
            #viewport section#clients .content #clientInfo ul.brandList li.lexus {
              background-position: -424px -524px; }
            #viewport section#clients .content #clientInfo ul.brandList li.unicef {
              background-position: -4px -589px; }
            #viewport section#clients .content #clientInfo ul.brandList li.juicy-juice {
              background-position: -109px -589px; }
            #viewport section#clients .content #clientInfo ul.brandList li.nintendo-ds {
              background-position: -214px -589px; }
            #viewport section#clients .content #clientInfo ul.brandList li.aveeno {
              background-position: -319px -589px; }
            #viewport section#clients .content #clientInfo ul.brandList li.ge {
              background-position: -424px -589px; }
            #viewport section#clients .content #clientInfo ul.brandList li.adidas {
              background-position: -4px -652px; }
            #viewport section#clients .content #clientInfo ul.brandList li.athenos {
              background-position: -109px -652px; }
            #viewport section#clients .content #clientInfo ul.brandList li.barilla {
              background-position: -214px -652px; }
            #viewport section#clients .content #clientInfo ul.brandList li.fedex {
              background-position: -319px -652px; }
            #viewport section#clients .content #clientInfo ul.brandList li.laika {
              background-position: -424px -652px; }
            #viewport section#clients .content #clientInfo ul.brandList li.applebees {
              background-position: -4px -714px; }
            #viewport section#clients .content #clientInfo ul.brandList li.ragu {
              background-position: -109px -714px; }
            #viewport section#clients .content #clientInfo ul.brandList li.sonic {
              background-position: -214px -714px; }
            #viewport section#clients .content #clientInfo ul.brandList li.visa {
              background-position: -319px -714px; }
            #viewport section#clients .content #clientInfo ul.brandList li.vitamin-water {
              background-position: -424px -714px; }
            #viewport section#clients .content #clientInfo ul.brandList li.adobe {
              background-position: -4px -784px; }
            #viewport section#clients .content #clientInfo ul.brandList li.capcom {
              background-position: -109px -784px; }
            #viewport section#clients .content #clientInfo ul.brandList li.jeep {
              background-position: -214px -784px; }
            #viewport section#clients .content #clientInfo ul.brandList li.td-ameritrade {
              background-position: -319px -784px; }
            #viewport section#clients .content #clientInfo ul.brandList li.tmobile {
              background-position: -424px -784px; }
            #viewport section#clients .content #clientInfo ul.brandList li.audubon {
              background-position: -4px -850px; }
            #viewport section#clients .content #clientInfo ul.brandList li.admob {
              background-position: -109px -850px; }
            #viewport section#clients .content #clientInfo ul.brandList li.aaa {
              background-position: -214px -850px; }
            #viewport section#clients .content #clientInfo ul.brandList li.union-bank {
              background-position: -319px -850px; }
            #viewport section#clients .content #clientInfo ul.brandList li.roc {
              background-position: -424px -850px; }
            #viewport section#clients .content #clientInfo ul.brandList li.footaction {
              background-position: -4px -918px; }
            #viewport section#clients .content #clientInfo ul.brandList li.metlife {
              background-position: -109px -918px; }
            #viewport section#clients .content #clientInfo ul.brandList li.sylvania {
              background-position: -214px -918px; }
            #viewport section#clients .content #clientInfo ul.brandList li.sonos {
              background-position: -319px -918px; }
            #viewport section#clients .content #clientInfo ul.brandList li.sun-valley {
              background-position: -424px -918px; }
            #viewport section#clients .content #clientInfo ul.brandList li.netapp {
              background-position: -4px -978px; }
            #viewport section#clients .content #clientInfo ul.brandList li.orbitz {
              background-position: -109px -978px; }
            #viewport section#clients .content #clientInfo ul.brandList li.jaguar {
              background-position: -214px -978px; }
            #viewport section#clients .content #clientInfo ul.brandList li.lightlife {
              background-position: -319px -978px; }
            #viewport section#clients .content #clientInfo ul.brandList li.call-of-duty {
              background-position: -424px -978px; }
            #viewport section#clients .content #clientInfo ul.brandList li.ps-vita {
              background-position: -4px -1043px; }
            #viewport section#clients .content #clientInfo ul.brandList li.us-cellular {
              background-position: -109px -1043px; }
            #viewport section#clients .content #clientInfo ul.brandList li.bouygues {
              background-position: -214px -1043px; }
            #viewport section#clients .content #clientInfo ul.brandList li.teva {
              background-position: -319px -1043px; }
            #viewport section#clients .content #clientInfo ul.brandList li.peets {
              background-position: -424px -1043px; }
            #viewport section#clients .content #clientInfo ul.brandList li.hefty {
              background-position: -4px -1100px; }
            #viewport section#clients .content #clientInfo ul.brandList li.jawbone {
              background-position: -109px -1100px; }
            #viewport section#clients .content #clientInfo ul.brandList li.qualcomm {
              background-position: -214px -1100px; }
            #viewport section#clients .content #clientInfo ul.brandList li.gilette {
              background-position: -319px -1100px; }
            #viewport section#clients .content #clientInfo ul.brandList li.international-delight {
              background-position: -424px -1100px; }
            #viewport section#clients .content #clientInfo ul.brandList li.oreo {
              background-position: -4px -1160px; }
            #viewport section#clients .content #clientInfo ul.brandList li.lunesta {
              background-position: -109px -1160px; }
            #viewport section#clients .content #clientInfo ul.brandList li.nyt {
              background-position: -214px -1160px; }
            #viewport section#clients .content #clientInfo ul.brandList li.absolut {
              background-position: -319px -1160px; }
            #viewport section#clients .content #clientInfo ul.brandList li.comcast {
              background-position: -424px -1160px; }
    #viewport section#awards {
      background-position: 0px 20px;
      padding-bottom: 50px;
      padding-top: 45px; }
      #viewport section#awards .masthead {
        padding-bottom: 0px;
        position: relative;
        top: 80px;
        z-index: 0; }
        #viewport section#awards .masthead .heading {
          position: relative;
          top: -163px; }
      #viewport section#awards .content {
        padding-top: 0px;
        position: relative;
        top: -20px;
        z-index: 1; }
        #viewport section#awards .content .awards {
          margin: 0 auto;
          padding: 30px 0;
          width: 980px; }
          #viewport section#awards .content .awards p.award {
            background: none;
            clear: left;
            display: block;
            float: left;
            font-size: 13px;
            list-style: none;
            margin: 3px 0;
            padding: 0px;
            position: relative;
            -webkit-text-size-adjust: 100%;
            width: 980px; }
            #viewport section#awards .content .awards p.award .year {
              color: #161616;
              display: block;
              float: left;
              font-size: 13px;
              font-weight: 300;
              padding-right: 8px;
              text-align: left;
              width: 40px; }
            #viewport section#awards .content .awards p.award a {
              background: none;
              display: block;
              float: left;
              width: 932px; }
              #viewport section#awards .content .awards p.award a .project {
                display: block;
                float: left;
                font-size: 13px;
                font-style: italic;
                font-weight: 400;
                text-align: left; }
              #viewport section#awards .content .awards p.award a span.award {
                float: right;
                font-size: 13px;
                font-weight: 300; }
          #viewport section#awards .content .awards hr {
            clear: left;
            position: relative;
            width: 980px; }
    #viewport section#jobs {
      background-position: 0px 20px;
      padding-bottom: 170px;
      padding-top: 45px; }
      #viewport section#jobs .masthead {
        padding-bottom: 0px;
        position: relative;
        text-align: center;
        top: 120px;
        z-index: 2; }
        #viewport section#jobs .masthead h1 {
          font-size: 30px;
          font-style: italic;
          font-weight: 300; }
      #viewport section#jobs .content {
        padding-bottom: 30px;
        padding-top: 0px;
        position: relative;
        top: 170px;
        z-index: 1; }
        #viewport section#jobs .content p.centered {
          font-size: 14px;
          margin: 0 auto;
          width: 700px; }
        #viewport section#jobs .content ul.jobs {
          padding: 60px 0 30px; }
          #viewport section#jobs .content ul.jobs li.job {
            background-image: url("../img/gr-shadowbox-bg-top.png");
            background-position: left top;
            background-repeat: no-repeat;
            margin: 0px auto 20px auto;
            padding: 30px 0 0;
            position: relative;
            width: 625px; }
            #viewport section#jobs .content ul.jobs li.job div.copy {
              background-image: url("../img/gr-shadowbox-bg-bottom.png");
              background-position: left bottom;
              background-repeat: no-repeat;
              padding-bottom: 60px;
              width: 625px; }
              #viewport section#jobs .content ul.jobs li.job div.copy h1 {
                font-size: 22px;
                font-weight: 300;
                margin: 0 40px 0 80px;
                padding: 10px 0; }
              #viewport section#jobs .content ul.jobs li.job div.copy p {
                font-size: 13px;
                line-height: 18px;
                margin: 0 40px 0 80px;
                padding: 10px 0px; }
        #viewport section#jobs .content h1 {
          font-size: 30px;
          padding-bottom: 10px;
          position: relative; }
        #viewport section#jobs .content p {
          font-size: 14px; }
    #viewport section#contact {
      background-position: 0px 20px;
      padding-bottom: 150px;
      padding-top: 45px; }
      #viewport section#contact .masthead {
        padding-bottom: 0px;
        position: relative;
        text-align: center;
        top: 100px;
        z-index: 2; }
        #viewport section#contact .masthead h1 {
          font-size: 30px;
          font-style: italic;
          font-weight: 300; }
      #viewport section#contact .content {
        padding-bottom: 30px;
        padding-top: 0px;
        position: relative;
        top: 140px;
        z-index: 1; }
        #viewport section#contact .content .locations {
          padding: 65px 0 150px;
          margin: 0 auto;
          overflow: auto;
          padding: 4px 4px 25px;
          position: relative;
          width: 648px; }
          #viewport section#contact .content .locations .location {
            float: left;
            position: relative;
            width: 310px; }
            #viewport section#contact .content .locations .location div.image {
              height: 310px;
              position: relative;
              width: 310px; }
              #viewport section#contact .content .locations .location div.image img {
                position: absolute; }
                #viewport section#contact .content .locations .location div.image img.city {
                  left: 84px;
                  top: 104px;
                  z-index: 3; }
                #viewport section#contact .content .locations .location div.image img.state {
                  left: 94px;
                  top: 199px;
                  z-index: 3; }
                #viewport section#contact .content .locations .location div.image img.square {
                  border: 1px solid #dfdfdf;
                  -webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.09);
                  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.09);
                  left: 0px;
                  top: 0px;
                  z-index: 2; }
            #viewport section#contact .content .locations .location .details {
              font-size: 14px;
              line-height: 19px;
              margin: 10px 0 0;
              position: relative;
              text-align: center; }
            #viewport section#contact .content .locations .location.aa {
              margin-right: 25px; }
              #viewport section#contact .content .locations .location.aa div.image img.city {
                left: 68px;
                top: 105px; }
              #viewport section#contact .content .locations .location.aa div.image img.state {
                left: 104px;
                top: 200px; }
        #viewport section#contact .content .shadowBox {
          margin-top: 20px;
          position: relative; }
    #viewport section.work {
      background-position: 0px 390px;
      padding-bottom: 100px;
      padding-top: 45px; }
      #viewport section.work .masthead {
        margin-bottom: 30px;
        padding-bottom: 105px;
        position: relative;
        text-align: center;
        top: 80px;
        z-index: 2; }
        #viewport section.work .masthead a.back {
          left: 10px;
          position: absolute;
          top: -23px;
          z-index: 4; }
        #viewport section.work .masthead .shadow-980 {
          position: relative;
          z-index: 2; }
          #viewport section.work .masthead .shadow-980 canvas {
            display: inline-block; }
        #viewport section.work .masthead .tag {
          bottom: -5px;
          height: 121px;
          left: 32px;
          position: absolute;
          width: 119px;
          z-index: 1; }
        #viewport section.work .masthead h1 {
          float: left;
          font-size: 36px;
          font-weight: 400;
          margin-left: 160px;
          position: relative;
          text-align: left;
          top: 22px;
          width: 830px;
          z-index: 0; }
        #viewport section.work .masthead h3 {
          clear: left;
          float: left;
          font-size: 18px;
          font-weight: 300;
          margin-left: 160px;
          position: relative;
          top: 28px;
          z-index: 0; }
      #viewport section.work .content {
        padding-bottom: 30px;
        padding-top: 10px;
        position: relative;
        top: 80px;
        z-index: 1; }
        #viewport section.work .content .copy {
          font-size: 18px;
          line-height: 24px;
          margin-left: 32px;
          padding-bottom: 50px;
          padding-top: 20px;
          position: relative;
          width: 600px; }
          #viewport section.work .content .copy.full-width {
            width: auto;
            margin-right: 32px; }
          #viewport section.work .content .copy p {
            font-size: 14px;
            font-weight: 400;
            padding-bottom: 20px; }
        #viewport section.work .content .components {
          float: right;
          position: relative;
          width: 315px;
          display: none; }
          #viewport section.work .content .components h2 {
            border-bottom: 1px solid #e0e0e0;
            font-size: 18px;
            font-weight: 300;
            margin-bottom: 10px;
            padding-bottom: 10px; }
          #viewport section.work .content .components ul li {
            color: #848484;
            font-size: 12px;
            line-height: 18px;
            position: relative; }
            #viewport section.work .content .components ul li ul {
              margin-left: 10px; }
            #viewport section.work .content .components ul li a {
              color: #009abb; }
              #viewport section.work .content .components ul li a:hover {
                color: #ff498a; }
        #viewport section.work .content .examples {
          clear: left;
          float: left;
          padding: 0px 10px;
          position: relative;
          width: 980px;
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flex;
          -ms-flex-direction: row;
          display: flex;
          justify-content: space-between;
          -webkit-justify-content: space-between;
          -ms-justify-content: space-between;
          -ms-flex-pack: space-between;
          flex-wrap: wrap;
          -webkit-flex-wrap: wrap; }
          #viewport section.work .content .examples .example {
            display: block;
            overflow: auto;
            position: relative;
            padding-bottom: 50px; }
            #viewport section.work .content .examples .example .youtube-iframe-container {
              overflow: hidden;
              opacity: 0; }
            #viewport section.work .content .examples .example span[class*='shadow'] {
              clear: left;
              display: block;
              float: left; }
            #viewport section.work .content .examples .example span.shadow-600 {
              margin-left: 21px; }
            #viewport section.work .content .examples .example .caption {
              color: #7F7F7F;
              clear: left;
              float: left;
              font-size: 12px;
              font-weight: 400;
              line-height: 15px;
              margin-top: 0px;
              text-align: left; }
              #viewport section.work .content .examples .example .caption.caption-600 {
                margin-left: 21px;
                width: 600px; }
              #viewport section.work .content .examples .example .caption.caption-980 {
                margin-top: -12px; }
            #viewport section.work .content .examples .example.cookie-vs-creme-embed {
              margin-left: 33px;
              overflow: visible; }
              #viewport section.work .content .examples .example.cookie-vs-creme-embed .tag {
                left: -31px;
                position: absolute;
                top: -35px; }
            #viewport section.work .content .examples .example.cookie-vs-creme-hub {
              background-image: url("../img/gr-large-drop-shadow.png");
              background-position: center bottom;
              background-repeat: no-repeat;
              overflow: visible;
              margin-bottom: -168px;
              padding-bottom: 258px;
              padding-top: 30px; }
              #viewport section.work .content .examples .example.cookie-vs-creme-hub img {
                margin-left: 33px; }
              #viewport section.work .content .examples .example.cookie-vs-creme-hub .tag {
                left: -33px;
                position: absolute;
                top: 5px; }
              #viewport section.work .content .examples .example.cookie-vs-creme-hub .tag2 {
                position: absolute;
                right: 1px;
                top: 378px; }

/*** Under-image shadows ***/
.shadow {
  background-image: url("../img/gr-masthead-drop-shadow-1150.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  padding-bottom: 32px;
  position: relative; }

.shadow-980 {
  background-image: url("../img/gr-masthead-drop-shadow-980.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  padding-bottom: 26px;
  position: relative; }

.shadow-920 {
  background-image: url("../img/gr-masthead-drop-shadow-920.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  padding-bottom: 26px;
  position: relative;
  width: 920px; }

.shadow-600 {
  background-image: url("../img/gr-masthead-drop-shadow-600.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  padding-bottom: 14px;
  position: relative;
  width: 600px; }

footer {
  background-color: #eeebe8;
  clear: both;
  color: #b4b2af;
  height: 56px;
  margin-top: -56px;
  position: relative;
  visibility: hidden;
  z-index: 30; }
  footer .social {
    display: block;
    margin: 0 auto;
    padding: 20px 0;
    position: absolute;
    text-align: center;
    top: -70px;
    width: 100%; }
    footer .social div.fb-like {
      border-left: 1px solid #b4b2af;
      left: 5px;
      overflow: hidden;
      padding: 0px;
      padding-left: 22px;
      top: 0px; }
      footer .social div.fb-like span {
        vertical-align: top !important; }
    footer .social div[id*=plusone] {
      left: 10px;
      padding: 9px;
      padding-right: 0px;
      position: relative;
      vertical-align: top !important; }
  footer p {
    background: none;
    color: #b4b2af;
    font-size: 12px;
    margin: 0;
    padding: 19px 0 0;
    vertical-align: middle; }
    footer p a {
      background: none;
      color: #b4b2af; }
      footer p a:hover {
        color: #ff498a; }

/*print styles*/
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important; }

  /* Black prints faster: h5bp.com/s */
  a, a:visited {
    text-decoration: underline; }

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

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

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

  /* Don't show links for images, or javascript/internal links */
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group; }

  /* h5bp.com/t */
  tr, img {
    page-break-inside: avoid; }

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

  @page {
    margin: 0.5cm; }

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

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