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

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/* $BLACK_WT: 900;*/
.devTimeStamp {
  font-family: Arial;
  position: absolute;
  font-size: 12px;
  top: 1px;
  right: 10px;
  color: #929292;
}

.details .news .detailContent .copy, .details .work .detailContent .copy, .sections .company .copy {
  font-weight: 300;
  /* color: #373737;
  font-size: 12px;
  line-height: 20px; */
  font-size: 16px;
  line-height: 24px;
  color: #525252;
}
.details .news .detailContent .copy ol, .details .work .detailContent .copy ol, .sections .company .copy ol {
  list-style-type: decimal;
  list-style-position: inside;
}
.details .news .detailContent .copy ol, .details .work .detailContent .copy ol, .sections .company .copy ol, .details .news .detailContent .copy ul, .details .work .detailContent .copy ul, .sections .company .copy ul {
  max-width: 430px;
  margin: 0 0 1em 0;
  padding-left: 3.333em;
}
.details .news .detailContent .copy em, .details .work .detailContent .copy em, .sections .company .copy em {
  font-style: italic;
}
.details .news .detailContent .copy strong, .details .work .detailContent .copy strong, .sections .company .copy strong, .details .news .detailContent .copy b, .details .work .detailContent .copy b, .sections .company .copy b {
  font-weight: 500;
}
.details .news .detailContent .copy > *:not(:first-child), .details .work .detailContent .copy > *:not(:first-child), .sections .company .copy > *:not(:first-child) {
  margin-top: 12px;
}

.details .news .detailContent .title, .details .work .detailContent .title, .brief .work .listEl h3, .sections .work .listEl h3, .brief .company h3, .sections .company .copy p:first-child {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.listEl p {
  font-weight: 300;
  line-height: 17px;
  color: #777;
  font-size: 12px;
}

.listEl h3 {
  color: #191919;
  font-weight: 500;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 17px;
}

.listEl .meta, .details .news .detailContent .meta {
  font-family: "Roboto Slab", "Robot-Slab", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 17px;
  color: #808080;
}
.listEl .meta .date, .details .news .detailContent .meta .date {
  text-transform: uppercase;
  letter-spacing: 1px;
}
.listEl .meta .date + .author:before, .details .news .detailContent .meta .date + .author:before {
  content: ' / ';
}

.brief .announce h2, .sections .company .jobs h2, .brief .article h2, .sections .article h2, .brief .work h2, .sections .company .clients h2, .sections .company .mentions h2 {
  font-weight: 300;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 20px;
  padding: 0 0 2px 0;
  border-bottom: 1px solid #ececec;
}
.brief .announce h2, .sections .company .jobs h2, .brief .article h2, .sections .article h2, .brief .work h2, .sections .company .clients h2, .sections .company .mentions h2, .brief .announce h2 a, .sections .company .jobs h2 a, .brief .article h2 a, .sections .article h2 a, .brief .work h2 a, .sections .company .clients h2 a, .sections .company .mentions h2 a {
  color: #555;
}

.details .news .detailContent .title, .details .work .detailContent .title {
  font-weight: 300;
  color: #525252;
  font-size: 30px;
  line-height: 36px;
  margin-bottom: 8px;
}

.details .news .toDetail, .details .work .detailContent .toDetail {
  top: 240px;
}
.details .news .aside.toDetail, .details .work .detailContent .aside.toDetail {
  position: absolute;
}
.details .news .aside.next.toDetail, .details .work .detailContent .aside.next.toDetail {
  right: 0;
}
.details .news .aside.prev.toDetail, .details .work .detailContent .aside.prev.toDetail {
  left: 0;
}
.details .news .aside.toDetail .tout, .details .work .detailContent .aside.toDetail .tout {
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
.details .news .flow.toDetail, .details .work .detailContent .flow.toDetail {
  float: right;
  margin-bottom: 55px;
}
.details .news .flow.toDetail .arrow, .details .work .detailContent .flow.toDetail .arrow {
  display: none;
}
.details .news .flow.toDetail .tout, .details .work .detailContent .flow.toDetail .tout {
  width: 338px;
}
.details .news .next.toDetail .arrow, .details .work .detailContent .next.toDetail .arrow {
  float: right;
}
.details .news .next.toDetail .arrow::after, .details .work .detailContent .next.toDetail .arrow::after {
  border-left-color: #60b2d0;
  margin: 21px -6px 21px 10px;
}
.details .news .next.toDetail .tout, .details .work .detailContent .next.toDetail .tout {
  float: right;
}
.details .news .next.toDetail .tout .toutShell, .details .work .detailContent .next.toDetail .tout .toutShell {
  left: 2px;
}
.details .news .next.toDetail .tout .toutTxt, .details .work .detailContent .next.toDetail .tout .toutTxt {
  text-align: right;
  float: left;
}
.details .news .next.toDetail .tout .toutImg, .details .work .detailContent .next.toDetail .tout .toutImg {
  float: right;
}
.details .news .prev.toDetail, .details .work .detailContent .prev.toDetail {
  left: 0;
}
.details .news .prev.toDetail .arrow, .details .work .detailContent .prev.toDetail .arrow {
  float: left;
}
.details .news .prev.toDetail .arrow::after, .details .work .detailContent .prev.toDetail .arrow::after {
  border-right-color: #60b2d0;
  margin: 21px 10px 21px -6px;
}
.details .news .prev.toDetail .tout, .details .work .detailContent .prev.toDetail .tout {
  float: right;
}
.details .news .prev.toDetail .tout .toutShell, .details .work .detailContent .prev.toDetail .tout .toutShell {
  right: 2px;
}
.details .news .prev.toDetail .tout .toutTxt, .details .work .detailContent .prev.toDetail .tout .toutTxt {
  text-align: left;
  float: right;
}
.details .news .prev.toDetail .tout .toutImg, .details .work .detailContent .prev.toDetail .tout .toutImg {
  float: left;
}
.details .news .toDetail .arrow, .details .work .detailContent .toDetail .arrow {
  background: #FFF;
  display: block;
  cursor: pointer;
}
.details .news .toDetail .arrow::after, .details .work .detailContent .toDetail .arrow::after {
  content: '';
  display: block;
  border: 12px solid transparent;
}
.details .news .toDetail .tout, .details .work .detailContent .toDetail .tout {
  position: relative;
  margin: 0 3px;
  height: 66px;
  -moz-transition: all 0.15s ease-out;
  -o-transition: all 0.15s ease-out;
  -webkit-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
  background: #FFF;
}
.details .news .toDetail .tout .toutShell, .details .work .detailContent .toDetail .tout .toutShell {
  width: 338px;
  position: absolute;
}
.details .news .toDetail .tout .toutShell .toutImg, .details .work .detailContent .toDetail .tout .toutShell .toutImg {
  width: 100px;
  cursor: pointer;
}
.details .news .toDetail .tout .toutShell .toutTitle, .details .work .detailContent .toDetail .tout .toutShell .toutTitle {
  font-size: 11px;
}
.details .news .toDetail .tout .toutShell .toutLabel, .details .work .detailContent .toDetail .tout .toutShell .toutLabel {
  text-transform: uppercase;
  font-family: "Roboto Slab", "Robot-Slab", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  margin: 4px 0 4px 0;
  color: #AAA;
}
.details .news .toDetail .tout .toutShell .toutTxt, .details .work .detailContent .toDetail .tout .toutShell .toutTxt {
  width: 230px;
  padding: 0 9px;
}
.details .news .expanded.toDetail .tout, .details .work .detailContent .expanded.toDetail .tout {
  width: 338px;
  visibility: visible;
}

.details .work .detailContent .gallery .screen .videoInfo .playBtn .icon, .details .work .detailContent .gallery .screen .videoInfo .muteBtn .icon, .details .work .detailContent .links li .icon, .sections .company .social .icon {
  position: relative;
  top: 4px;
  display: inline-block;
  margin-right: 8px;
  width: 17px;
  height: 17px;
  background: url("../img/sprite_sheet.png") #60b2d0;
}

header .contactPane, .sections .company .contact, header .browsePane {
  font-size: 13px;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  line-height: 20px;
}
header .contactPane li, .sections .company .contact li, header .browsePane li {
  color: #999;
  white-space: nowrap;
}
header .contactPane li a, .sections .company .contact li a, header .browsePane li a {
  color: #555;
}
header .contactPane li a:hover, .sections .company .contact li a:hover, header .browsePane li a:hover {
  color: #a3bc56;
}

.brief .announce, .sections .company .jobs, .brief .article {
  margin-bottom: 30px;
}
.brief .announce .title, .sections .company .jobs .title, .brief .article .title {
  font-size: 12px;
}

.brief .announce .listEl > *:not(:first-child), .sections .company .jobs .listEl > *:not(:first-child) {
  padding-left: 8px;
}

.brief .company .action:after {
  content: '';
  border: 5px solid transparent;
  display: inline-block;
  margin-left: 3px;
  position: relative;
  left: 0px;
  border-left-color: #60b2d0;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.brief .company .action:hover:after {
  border-left-color: #a3bc56;
  left: 4px;
}

.brief .announce .listEl, .sections .company .jobs .listEl, .brief .article .listEl, .sections .article .categoryMenu li {
  border-bottom: 1px solid #E6E6E6;
  border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzkxNDk3NDYwRjdCMTFFNDg4MERENzgyOTBBQjJGN0YiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzkxNDk3NDcwRjdCMTFFNDg4MERENzgyOTBBQjJGN0YiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOTE0OTc0NDBGN0IxMUU0ODgwREQ3ODI5MEFCMkY3RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOTE0OTc0NTBGN0IxMUU0ODgwREQ3ODI5MEFCMkY3RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmQVGMQAAAAUSURBVHjaYli/fv1/IGAAYYAAAwA9dQkHRLtHgQAAAABJRU5ErkJggg==') 0% 0% 100% 0% repeat;
}

header .contactPane :not(.phone) + .phone, .sections .company .contact :not(.phone) + .phone, header .contactPane .address, .sections .company .contact .address {
  margin-top: 10px;
}

.details .news .toDetail .tout .toutShell::after, .details .work .detailContent .toDetail .tout .toutShell::after, .brief .work .gallery::after, .sections .work .gallery::after, .details .work .detailContent .gallery::after, .sections .company .gallery::after, header::after, .brief .article .listElContent::after, .details .news .detailContent .copy .hasImg::after, .details .work .detailContent .links::after, .sections .company .staff::after, .sections .company .connect::after {
  content: '';
  display: block;
  clear: both;
}

.details .news .toDetail .arrow, .details .work .detailContent .toDetail .arrow, .details .news .toDetail .tout, .details .work .detailContent .toDetail .tout, .brief .article img, .sections .article .listEl .imgWrap, .details .news .detailContent .copy img, .brief .work .gallery .screenShell, .sections .work .gallery .screenShell, .sections .company .gallery .screenShell, .sections .company .staff .listEl .imgWrap, .staffTooltip .tooltipCopy {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  padding: 3px;
  border: 1px solid #ededed;
}

.sections .company .staff h2, .sections .company .connect h2 {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.sections .article .categoryMenu {
  width: 180px;
  float: left;
  font-size: 13px;
  font-weight: 500;
  line-height: 47px;
  padding: 0 0 15px 0;
  border-top: 1px solid #ececec;
}
.sections .article .categoryMenu li {
  cursor: pointer;
  padding-top: 0px;
  padding-bottom: 0px;
  color: #60b2d0;
  -moz-transition-property: padding-top, padding-bottom, color;
  -o-transition-property: padding-top, padding-bottom, color;
  -webkit-transition-property: padding-top, padding-bottom, color;
  transition-property: padding-top, padding-bottom, color;
  -moz-transition-duration: 0.2s, 0.2s, 0.2s;
  -o-transition-duration: 0.2s, 0.2s, 0.2s;
  -webkit-transition-duration: 0.2s, 0.2s, 0.2s;
  transition-duration: 0.2s, 0.2s, 0.2s;
}
.sections .article .categoryMenu li:hover {
  color: #a3bc56;
}
.sections .article .categoryMenu li.selected {
  color: #aaaaaa;
  padding: 10px 0;
}

.sections .company .social .twitter .icon {
  background-position: 0 -51px;
}
.sections .company .social .facebook .icon {
  background-position: -34px -51px;
}
.sections .company .social .linkedIn .icon {
  background-position: -68px -51px;
}
.sections .company .social .youTube .icon {
  background-position: -102px -51px;
}
.sections .company .social li {
  line-height: 13px;
  position: relative;
  margin-bottom: 4px;
}
.sections .company .social li a {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 1px;
}
.sections .company .social li .icon {
  width: 34px;
  height: 34px;
  -moz-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
.sections .company .social li .label {
  position: relative;
  top: -8px;
  color: #BBB;
  -moz-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  -webkit-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}
.sections .company .social li:hover .icon {
  background-color: #a3bc56;
}
.sections .company .social li:hover .label {
  color: #333;
}

.brief .column1, .sections .company .column1 {
  width: 400px;
  margin-right: 40px;
  float: left;
}
.brief .column2, .sections .company .column2 {
  overflow: auto;
}

.brief .work .gallery, .sections .work .gallery, .details .work .detailContent .gallery, .sections .company .gallery {
  width: 100%;
  height: 438px;
  position: relative;
}
.brief .work .gallery .screenRatio, .sections .work .gallery .screenRatio, .details .work .detailContent .gallery .screenRatio, .sections .company .gallery .screenRatio {
  visibility: hidden;
}
@media (min-width: 840px) {
  .brief .work .gallery .toNextItem, .sections .work .gallery .toNextItem, .details .work .detailContent .gallery .toNextItem, .sections .company .gallery .toNextItem, .brief .work .gallery .toPrevItem, .sections .work .gallery .toPrevItem, .details .work .detailContent .gallery .toPrevItem, .sections .company .gallery .toPrevItem {
    position: absolute;
    overflow: hidden;
    background: url(../img/vBar.png) 100% 0 no-repeat;
    width: 16px;
    height: 344px;
    top: 41.5px;
    cursor: pointer;
  }
  .brief .work .gallery .toNextItem .arrow, .sections .work .gallery .toNextItem .arrow, .details .work .detailContent .gallery .toNextItem .arrow, .sections .company .gallery .toNextItem .arrow, .brief .work .gallery .toPrevItem .arrow, .sections .work .gallery .toPrevItem .arrow, .details .work .detailContent .gallery .toPrevItem .arrow, .sections .company .gallery .toPrevItem .arrow {
    position: relative;
    border: 6px solid transparent;
    border-right-color: #7C7C7C;
    left: 0px;
    top: 165px;
    -moz-transition: left 0.1s ease-in-out, border-right-color 0.3s ease-in-out;
    -o-transition: left 0.1s ease-in-out, border-right-color 0.3s ease-in-out;
    -webkit-transition: left 0.1s ease-in-out, border-right-color 0.3s ease-in-out;
    transition: left 0.1s ease-in-out, border-right-color 0.3s ease-in-out;
  }
  .brief .work .gallery .toNextItem.inactive, .sections .work .gallery .toNextItem.inactive, .details .work .detailContent .gallery .toNextItem.inactive, .sections .company .gallery .toNextItem.inactive, .brief .work .gallery .toPrevItem.inactive, .sections .work .gallery .toPrevItem.inactive, .details .work .detailContent .gallery .toPrevItem.inactive, .sections .company .gallery .toPrevItem.inactive {
    cursor: default;
  }
  .brief .work .gallery .toNextItem.inactive .arrow, .sections .work .gallery .toNextItem.inactive .arrow, .details .work .detailContent .gallery .toNextItem.inactive .arrow, .sections .company .gallery .toNextItem.inactive .arrow, .brief .work .gallery .toPrevItem.inactive .arrow, .sections .work .gallery .toPrevItem.inactive .arrow, .details .work .detailContent .gallery .toPrevItem.inactive .arrow, .sections .company .gallery .toPrevItem.inactive .arrow {
    left: 7px;
  }
  .brief .work .gallery .toNextItem:hover .arrow, .sections .work .gallery .toNextItem:hover .arrow, .details .work .detailContent .gallery .toNextItem:hover .arrow, .sections .company .gallery .toNextItem:hover .arrow, .brief .work .gallery .toPrevItem:hover .arrow, .sections .work .gallery .toPrevItem:hover .arrow, .details .work .detailContent .gallery .toPrevItem:hover .arrow, .sections .company .gallery .toPrevItem:hover .arrow {
    border-right-color: #a3bc56;
  }
  .brief .work .gallery .toPrevItem, .sections .work .gallery .toPrevItem, .details .work .detailContent .gallery .toPrevItem, .sections .company .gallery .toPrevItem {
    left: -37px;
  }
  .brief .work .gallery .toNextItem, .sections .work .gallery .toNextItem, .details .work .detailContent .gallery .toNextItem, .sections .company .gallery .toNextItem {
    right: -37px;
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
  }
}
.brief .work .gallery .screen, .sections .work .gallery .screen, .details .work .detailContent .gallery .screen, .sections .company .gallery .screen {
  position: relative;
  outline: 1px solid #EEE;
  width: 100%;
  overflow: hidden;
}
.brief .work .gallery .screen .screenWrap, .sections .work .gallery .screen .screenWrap, .details .work .detailContent .gallery .screen .screenWrap, .sections .company .gallery .screen .screenWrap {
  position: relative;
  top: 0;
  left: 0;
}
.brief .work .gallery .screen img, .sections .work .gallery .screen img, .details .work .detailContent .gallery .screen img, .sections .company .gallery .screen img, .brief .work .gallery .screen .videoArea, .sections .work .gallery .screen .videoArea, .details .work .detailContent .gallery .screen .videoArea, .sections .company .gallery .screen .videoArea {
  min-height: 1px;
  width: 640px;
  height: 427px;
  float: left;
}
.brief .work .gallery .thumbs, .sections .work .gallery .thumbs, .details .work .detailContent .gallery .thumbs, .sections .company .gallery .thumbs {
  float: right;
  height: 40px;
}
.brief .work .gallery .thumbs li, .sections .work .gallery .thumbs li, .details .work .detailContent .gallery .thumbs li, .sections .company .gallery .thumbs li {
  list-style-type: none;
  display: inline-block;
  cursor: pointer;
  padding: 20px 8px;
}
.brief .work .gallery .thumbs li .bullet, .sections .work .gallery .thumbs li .bullet, .details .work .detailContent .gallery .thumbs li .bullet, .sections .company .gallery .thumbs li .bullet {
  display: block;
  width: 8px;
  height: 8px;
  background: #D3D3D3;
  border-radius: 4px;
}
.brief .work .gallery .thumbs li.selected .bullet, .sections .work .gallery .thumbs li.selected .bullet, .details .work .detailContent .gallery .thumbs li.selected .bullet, .sections .company .gallery .thumbs li.selected .bullet {
  background: #787878;
}
.brief .work .gallery .thumbs li.videoBtn, .sections .work .gallery .thumbs li.videoBtn, .details .work .detailContent .gallery .thumbs li.videoBtn, .sections .company .gallery .thumbs li.videoBtn {
  padding: 19px 6px 19px 10px;
}
.brief .work .gallery .thumbs li.videoBtn .bullet, .sections .work .gallery .thumbs li.videoBtn .bullet, .details .work .detailContent .gallery .thumbs li.videoBtn .bullet, .sections .company .gallery .thumbs li.videoBtn .bullet {
  border-radius: 0;
  width: 0;
  background: transparent;
  border: 5px solid transparent;
  border-left-color: #D3D3D3;
}
.brief .work .gallery .thumbs li.videoBtn.selected .bullet, .sections .work .gallery .thumbs li.videoBtn.selected .bullet, .details .work .detailContent .gallery .thumbs li.videoBtn.selected .bullet, .sections .company .gallery .thumbs li.videoBtn.selected .bullet {
  border-left-color: #787878;
}

.details .work .detailContent .gallery .screen .videoDiv {
  position: relative;
  width: 640px;
  height: 360px;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  border-bottom: 1px solid #EEE;
}
.details .work .detailContent .gallery .screen .videoPlayerWrapper {
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.details .work .detailContent .gallery .screen .videoPlayerWrapper .videoLoader {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #FFF;
}
.details .work .detailContent .gallery .screen .videoPlayerWrapper .videoLoader .loadAnim {
  display: block;
  width: 66px;
  height: 40px;
  position: relative;
  top: 45%;
  margin: 0 auto;
  float: none;
}
.details .work .detailContent .gallery .screen .videoInfo {
  position: relative;
  margin-top: 6px;
  visibility: hidden;
  opacity: 0;
}
.details .work .detailContent .gallery .screen .videoInfo .playBtn, .details .work .detailContent .gallery .screen .videoInfo .muteBtn {
  padding: 16px;
  cursor: pointer;
}
.details .work .detailContent .gallery .screen .videoInfo .playBtn {
  position: absolute;
  left: 0px;
  top: 0px;
}
.details .work .detailContent .gallery .screen .videoInfo .muteBtn {
  position: absolute;
  right: 0px;
  top: 0px;
}
.details .work .detailContent .gallery .screen .videoInfo .playBtn .icon {
  margin: 0;
  background-position: -102px -34px;
  width: 17px;
  height: 17px;
}
.details .work .detailContent .gallery .screen .videoInfo .playBtn.paused .icon {
  background-position: -119px -34px;
}
.details .work .detailContent .gallery .screen .videoInfo .muteBtn .icon {
  margin: 0;
  background-position: -85px -34px;
  width: 17px;
  height: 17px;
}
.details .work .detailContent .gallery .screen .videoInfo .muteBtn.muted .icon {
  background-position: -68px -34px;
}
.details .work .detailContent .gallery .screen .videoInfo .playBtn .icon, .details .work .detailContent .gallery .screen .videoInfo .muteBtn .icon {
  -moz-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
.details .work .detailContent .gallery .screen .videoInfo .playBtn:hover .icon, .details .work .detailContent .gallery .screen .videoInfo .muteBtn:hover .icon {
  background-color: #a3bc56;
}
.details .work .detailContent .gallery .screen .videoInfo .progressBar {
  position: absolute;
  top: 13px;
  left: 49px;
  right: 49px;
  height: 31px;
  background: #FFF;
  cursor: pointer;
}
.details .work .detailContent .gallery .screen .videoInfo .progressBar .bg {
  position: relative;
  background: #E5E5E5;
  top: 14px;
  left: 0;
  height: 3px;
  width: 100%;
}
.details .work .detailContent .gallery .screen .videoInfo .progressBar .progress {
  position: relative;
  background: #A0A0A0;
  top: 12px;
  left: 0;
  height: 1px;
  width: 0%;
}

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTE4OUJGNkQwRjg1MTFFNDg4MERENzgyOTBBQjJGN0YiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTE4OUJGNkUwRjg1MTFFNDg4MERENzgyOTBBQjJGN0YiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFMTg5QkY2QjBGODUxMUU0ODgwREQ3ODI5MEFCMkY3RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFMTg5QkY2QzBGODUxMUU0ODgwREQ3ODI5MEFCMkY3RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtAfQ2sAAAAnSURBVHjaYvr+8xcQ3X3wkImBgeH58+dSkpJMz54/l5SUBPIBAgwAF+MOear3b1oAAAAASUVORK5CYII=');
}

a {
  text-decoration: none;
  -moz-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  color: #60b2d0;
}
a:hover {
  color: #a3bc56;
}

html:not(.wf-active) .rootContainer {
  visibility: hidden;
}

.rootContainer {
  height: 100%;
}

.mainContent {
  overflow: hidden;
}
.mainContent .depthSections {
  position: relative;
  left: 0%;
  width: 300%;
  -moz-transition: left 0.3s ease-in-out;
  -o-transition: left 0.3s ease-in-out;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
}
.mainContent .depthSections > div {
  position: relative;
  float: left;
  width: 33.33334%;
  min-height: 1px;
}
.mainContent .depthSections.hasSection {
  left: -100%;
}
.mainContent .depthSections.hasSection.hasDetail {
  left: -200%;
}

.rootContainer {
  margin: 0;
  min-width: 750px;
}
@media (min-width: 786px) {
  .rootContainer {
    margin: 0 18px;
  }
}

.upperWrap, .lowerWrap {
  background: #FFF;
  max-width: 1280px;
  margin: 0 auto;
}

.upperWrap {
  margin-bottom: -40px;
  padding-bottom: 40px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
}

.upperWrap {
  border-top: 7px solid #60b2d0;
}

header, .lowerWrap, .mainContent .depthSections > * {
  padding: 0 40px;
}

.listEl {
  cursor: pointer;
  padding: 15px 0;
  display: block;
}
.listEl h3 {
  color: #60b2d0;
}

.listMore {
  display: block;
  clear: both;
  text-align: center;
  padding: 10px 0 0 0;
  text-transform: uppercase;
  color: #60b2d0;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
}
.listMore:hover .more {
  background-color: #60b2d0;
  left: 3px;
}

header {
  position: relative;
  height: 103px;
  width: 100%;
  -moz-transition: height 0.3s ease-out;
  -o-transition: height 0.3s ease-out;
  -webkit-transition: height 0.3s ease-out;
  transition: height 0.3s ease-out;
}
header .logo {
  position: absolute;
  display: block;
  width: 159px;
  height: 50px;
  top: 26px;
  float: left;
  background-color: #60b2d0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
header .logo .logoImg {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 46px;
  width: 155px;
  background-image: url(../img/logo_white.svg);
}
.no-svg header .logo .logoImg {
  background-image: url(../img/logo_white.png);
}
header .logo .overlay {
  display: none;
  top: -5px;
  left: -4px;
}
header .menu {
  margin-right: 35px;
  padding: 0 0 7px 0;
}
header .menu .label {
  border-bottom: 2px solid transparent;
  -moz-transition: border-bottom-color 0.2s ease-in-out;
  -o-transition: border-bottom-color 0.2s ease-in-out;
  -webkit-transition: border-bottom-color 0.2s ease-in-out;
  transition: border-bottom-color 0.2s ease-in-out;
  font-size: 13px;
}
header .menu .selected .label {
  border-bottom-color: #60b2d0;
}
header .controls .contact, header .controls .browse {
  margin-top: 3px;
}
header .controls .contact .label:after, header .controls .browse .label:after {
  content: '';
  display: inline-block;
  border: 3px solid transparent;
  border-top-color: #60b2d0;
  position: relative;
  top: 1px;
  margin-left: 3px;
}
header .controls .search {
  display: none;
  padding-right: 20px;
}
header .controls .search .icon {
  background-position: -85px 0;
  top: 4px;
  width: 14px;
}
header .controls .contact .icon {
  background-position: -102px 0;
  width: 15px;
}
header .controls .browse .icon {
  background-position: -68px -17px;
  width: 21px;
}
header .controls .label {
  font-size: 10px;
}
header .controls, header .menu {
  float: right;
  margin-top: 42px;
  -moz-transition: margin-top 0.3s ease-out;
  -o-transition: margin-top 0.3s ease-out;
  -webkit-transition: margin-top 0.3s ease-out;
  transition: margin-top 0.3s ease-out;
}
header .controls .label, header .menu .label {
  color: #60b2d0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  padding-bottom: 3px;
}
header .controls > li, header .menu > li {
  float: left;
  cursor: pointer;
  position: relative;
}
header .controls > li:not(:last-child), header .menu > li:not(:last-child) {
  padding-right: 35px;
}
header .contactPane, header .browsePane {
  cursor: auto;
  visibility: hidden;
  opacity: 0;
  -moz-transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
  -o-transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
  -webkit-transition: opacity 0.3s ease-in-out, visibility 0s;
  -webkit-transition-delay: 0s, 0.3s;
  transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
  padding: 6px 12px;
  position: absolute;
  top: 25px;
  z-index: 10;
  background: #FFF;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #F0F0F0;
  border-bottom-color: #EAEAEA;
}
header .contactPane.active, header .browsePane.active {
  opacity: 1.0;
  visibility: visible;
  -moz-transition: opacity 0.3s ease-in-out, visibility 0s 0s;
  -o-transition: opacity 0.3s ease-in-out, visibility 0s 0s;
  -webkit-transition: opacity 0.3s ease-in-out, visibility 0s;
  -webkit-transition-delay: 0s, 0s;
  transition: opacity 0.3s ease-in-out, visibility 0s 0s;
}
header .contactPane {
  right: 0px;
}
header .browsePane {
  right: 0px;
}
.hasSection header {
  height: 40px;
}
.hasSection header .controls, .hasSection header .menu {
  margin-top: 13px;
}
.hasSection header .logo {
  top: 0px;
  -moz-border-radius-topleft: 0px;
  -webkit-border-top-left-radius: 0px;
  border-top-left-radius: 0px;
  -moz-border-radius-topright: 0px;
  -webkit-border-top-right-radius: 0px;
  border-top-right-radius: 0px;
  -moz-transform: scale(0.71875, 0.71875);
  -ms-transform: scale(0.71875, 0.71875);
  -webkit-transform: scale(0.71875, 0.71875);
  transform: scale(0.71875, 0.71875);
  			/*
  
  
  			width: 110px;
  			height: 33px;
  			
  			@include border-bottom-radius(3px);
  
  			 .logoImg {
  				$scl: 23/32;
  				top: 0px;
  				left: 0px;
  
  				
  
  
  				@include transform( scale($scl, $scl) );
  
  				//fallback
  				.ie8 & {
  					-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11="+$scl+", M12=0, M21=0, M22="+$scl+", SizingMethod='auto expand')";
  				}
  			} */
}
.ie8 .hasSection header .logo {
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.71875, M12=0, M21=0, M22=0.71875, SizingMethod='auto expand')";
}

footer {
  height: 40px;
  border-top: 1px solid gainsboro;
  font-weight: 300;
}
footer ul {
  margin-top: 10px;
  text-align: center;
}
footer li {
  display: inline-block;
  font-size: 11px;
}
footer li, footer li a {
  color: #737373;
}
footer li:not(:last-child) {
  margin-right: 16px;
}

.brief .article {
  margin-top: 30px;
}
.brief .article img {
  float: left;
  width: auto;
  max-width: 102px;
  margin: 6px 10px 0 0;
  position: relative;
  top: -5px;
}
.brief .article .textBlock {
  overflow: auto;
  width: 280px;
  float: right;
}
.brief .article .meta {
  margin-bottom: 4px;
}
.brief .announce {
  margin-top: 30px;
}

.sections .article {
  margin-top: 4px;
}
.sections .article .shellWrap {
  margin: 0 auto;
}
.sections .article .categoryMenu {
  margin-top: 13px;
  width: 160px;
  margin-right: 20px;
}
.sections .article h2 {
  margin-top: 19px;
}
.sections .article .shell {
  overflow: auto;
}

.sections .article .listEl {
  float: left;
  box-sizing: content-box;
  width: 240px;
  height: 238px;
  padding-left: 28px;
  padding-top: 9px;
  padding-bottom: 21px;
}
.sections .article .listEl .imgWrap {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 2px;
}
.sections .article .listEl .imgWrap .imgShell {
  position: relative;
}
.sections .article .listEl .imgWrap .imgShell img {
  position: absolute;
  width: 100%;
  top: 0;
}
.sections .article .listEl .imgWrap::after {
  content: '';
  display: block;
}
.sections .article .listEl .imgWrap::after {
  width: 100%;
  padding-top: 65.96639%;
}
@media (min-width: 0px) and (max-width: 803px) {
  .sections .article .shellWrap {
    width: 240px;
  }
  .sections .article .listEl:nth-child(1n+1) {
    padding-left: 0;
    clear: both;
  }
}
@media (min-width: 804px) and (max-width: 1071px) {
  .sections .article .shellWrap {
    width: 508px;
  }
  .sections .article .listEl:nth-child(2n+1) {
    padding-left: 0;
    clear: both;
  }
}
@media (min-width: 1072px) and (max-width: 100000px) {
  .sections .article .shellWrap {
    width: 776px;
  }
  .sections .article .listEl:nth-child(3n+1) {
    padding-left: 0;
    clear: both;
  }
}

.details .news {
  margin-top: 26px;
}
.details .news .categoryMenu {
  margin-top: 1px;
  font-size: 13px;
}
.details .news .categoryMenu li {
  display: inline-block;
  cursor: pointer;
  color: #60b2d0;
  -moz-transition: color 0.2s ease-in-out;
  -o-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
}
.details .news .categoryMenu li:hover {
  color: #a3bc56;
}
.details .news .categoryMenu li:not(:last-child):after {
  content: ',\2003';
}
.details .news .shellWrap {
  margin: 16px auto 0 auto;
  width: 620px;
}
.details .news .detailContent .title {
  margin-top: 4px;
}
.details .news .detailContent .meta {
  font-size: 14px;
  /* color: #8f8f8f;
  
  //font-family: $NORMAL_FONT;
  //font-weight: $LIGHT_WT;
  */
}
.details .news .detailContent .meta .date {
  text-transform: none;
  letter-spacing: 0;
}
.details .news .detailContent .copy {
  margin-bottom: 80px;
  font-size: 16px;
  line-height: 24px;
  color: #000;
  			/* strong {
  
  				font-weight: $LIGHT_WT;
  				color: #000;
  			} */
}
.details .news .detailContent .copy > *:not(:first-child), .details .news .detailContent .copy blockquote > *:not(:first-child) {
  margin-top: 18px;
}
.details .news .detailContent .copy .introText {
  font-size: 21px;
  font-family: "Roboto Slab", "Robot-Slab", Roboto, Helvetica, Arial, sans-serif;
  line-height: 35px;
  color: #444;
}
.details .news .detailContent .copy .introText:first-child {
  margin-top: 18px;
}
.details .news .detailContent .copy .hasImg:first-child {
  margin-top: 27px;
}
.details .news .detailContent .copy .alignleft {
  float: left;
}
.details .news .detailContent .copy .alignright {
  float: right;
}
.details .news .detailContent .copy img {
  max-width: 100%;
  height: auto;
}
.details .news .detailContent .copy img.alignleft, .details .news .detailContent .copy div.alignleft, .details .news .detailContent .copy img.alignright, .details .news .detailContent .copy div.alignright {
  /* box-sizing: content-box;
  padding-top: 8px; */
  margin-top: 4px;
}
.details .news .detailContent .copy img.alignleft {
  margin-right: 10px;
}
.details .news .detailContent .copy img.alignright {
  margin-left: 10px;
}
.details .news .detailContent .copy .wp-caption-text {
  font-weight: 300;
  margin-bottom: 10px;
}
.details .news .detailContent .copy a {
  color: #60b2d0;
}
.details .news .detailContent .copy a:hover {
  color: #a3bc56;
}
.details .news .detailContent .copy p.pseudoH4, .details .news .detailContent .copy h4 {
  color: #6c6c6c;
  font-weight: 500;
}
.details .news .detailContent .copy p.pseudoH4:strong, .details .news .detailContent .copy h4:strong {
  color: inherit;
  font-weight: inherit;
}
.details .news .detailContent .copy > p.pseudoH4 + * {
  margin-top: 0;
}
.details .news .detailContent .copy blockquote {
  border-left: 2px solid #666;
  margin-left: -25px;
  padding-left: 23px;
}
.details .news .detailContent .copy blockquote, .details .news .detailContent .copy blockquote p {
  font-style: italic;
}

/*	.news {


 
		.columnView, .wideView {
				.listEl p img, .listEl .wp-caption {
					display: none;
				}
		}

		.wideView, .detailView {
			

			.list {
				overflow: hidden;
				position: relative;
				height: 100%;	

				.shellWrap {
					height: 100%;
					margin: 0 auto;
					max-width: 750px;
					padding: 0 $gutter;
				}
			}

			.nano {
				width: auto;//override nanoScroll
			}
		}


		.wideView {

			.listEl {
				cursor: pointer;

				.meta {
					font-size: 13px;
					font-weight: $LIGHT_WT;
					color: #aaaaaa;

					.author {
						color: #191919;
					}
				}

				h3 {
					@extend %listTitle;
					margin-top: -5px;
				}

				h3, p {
					width: 66.7%;	
					float: right;					
				}

				&:after {
					width: 100%;
					float: left;
				}

				img {
					width: 33.3%;
					padding-right: 18px;
					float: left;
				}

				@include clearfix;
			}
		}

		.detailView {
			.shellWrap {
				margin: 1px auto 80px auto;
				width: 640px;

				.title {
					@extend %detailTitle;
				}

				.copy {
					@extend %copy;
					
					.alignleft {
						float: left;
					}

					.alignright {
						float: right;
					}

					img {
						max-width: 100%;
					}

					img.alignleft, div.alignleft, img.alignright, div.alignright {						
						box-sizing: content-box;
						padding-top: 8px;
					}

					img.alignleft {
						padding-right: 10px;
					}

					img.alignright {
						padding-left: 10px;
					}

					.wp-caption-text {
						font-weight: $LIGHT_WT;
						margin-bottom: 10px;
					}

					p {
						margin-bottom: 7px;
						//text-indent: 25px;
					}

					a {
						color: $BLUE;
					}

					a:hover {
						color: $ACCENT_COLOR;
					}

					strong {

						font-weight: $LIGHT_WT;
						color: #000;
					}
				}

			}

			@media (max-width: 940px) { 
				.categoryMenu {
					display: none;
				}
			}
		} 
	}*/
.brief .work .listEl h3, .sections .work .listEl h3 {
  font-size: 18px;
  line-height: 20px;
  position: relative;
}
.brief .work .listEl h3 a, .sections .work .listEl h3 a {
  display: block;
  width: 65%;
}
.brief .work .listEl h3 .client-logo, .sections .work .listEl h3 .client-logo {
  display: block;
  width: 30%;
  margin-top: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  /* &:before {
  	content: '';
  	display: inline-block;
  	height: 100%;
  	vertical-align: middle;
  	margin-right: -0.25em;
  } */
}
.brief .work .listEl h3 .client-logo img, .sections .work .listEl h3 .client-logo img {
  position: absolute;
  top: 0px;
  right: 4px;
  max-width: 100%;
  max-height: 25px;
}
.brief .work .listEl h3:after, .sections .work .listEl h3:after {
  content: '';
  display: block;
  clear: both;
}
.brief .work .gallery, .sections .work .gallery {
  width: auto;
  height: auto;
  margin-bottom: 5px;
}
.brief .work .gallery .screen img, .sections .work .gallery .screen img {
  height: auto;
  width: 100%;
}
.brief .work .gallery .screen img:not(:first-child), .sections .work .gallery .screen img:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}
.brief .work .gallery .screen, .sections .work .gallery .screen {
  max-height: 322px;
  outline: 0;
}
.brief .work .gallery .screenRatio, .sections .work .gallery .screenRatio {
  width: 100%;
  padding-top: 60.6403%;
}

.brief .work {
  margin-bottom: 30px;
  margin-top: 9px;
}
.brief .work h2 {
  margin-top: 19px;
}
.brief .work .listEl {
  padding-top: 0;
}
.brief .work .listEl .gallery {
  margin-bottom: 3px;
}
.brief .work .listEl h3 {
  margin-left: 4px;
  font-size: 11px;
  line-height: 13px;
}
.brief .work .listEl h3 a:not(:hover) {
  color: #888;
}
.brief .work .listMore {
  border-top: 1px solid #E6E6E6;
  border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzkxNDk3NDYwRjdCMTFFNDg4MERENzgyOTBBQjJGN0YiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzkxNDk3NDcwRjdCMTFFNDg4MERENzgyOTBBQjJGN0YiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOTE0OTc0NDBGN0IxMUU0ODgwREQ3ODI5MEFCMkY3RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOTE0OTc0NTBGN0IxMUU0ODgwREQ3ODI5MEFCMkY3RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmQVGMQAAAAUSURBVHjaYli/fv1/IGAAYYAAAwA9dQkHRLtHgQAAAABJRU5ErkJggg==') 100% 0% 100% 0% repeat;
}
@media (min-width: 1033px) {
  .brief .work .listEl {
    width: 50%;
    float: left;
  }
  .brief .work .listEl:nth-child(odd) {
    padding-right: 12px;
    clear: both;
  }
  .brief .work .listEl:nth-child(even) {
    padding-left: 12px;
  }
}

.sections .work .listEl {
  float: left;
  padding-top: 13px;
  padding-bottom: 17px;
}
.sections .work .listEl h3 {
  margin-left: 4px;
  font-size: 13px;
  line-height: 16px;
}
.sections .work .listEl h3 a:not(:hover) {
  color: #888;
}
@media (min-width: 600px) and (max-width: 1099px) {
  .sections .work .listEl {
    width: 50%;
  }
  .sections .work .listEl:nth-child(odd) {
    padding-right: 15px;
    clear: both;
  }
  .sections .work .listEl:nth-child(even) {
    padding-left: 15px;
  }
}
@media (min-width: 1100px) {
  .sections .work .listEl {
    width: 33.3333%;
  }
  .sections .work .listEl:nth-child(3n + 1) {
    padding-right: 20px;
    clear: both;
  }
  .sections .work .listEl:nth-child(3n + 2) {
    padding-left: 10px;
    padding-right: 10px;
  }
  .sections .work .listEl:nth-child(3n + 3) {
    padding-left: 20px;
  }
}

.details .work .detailContent {
  margin: 17px auto 0 auto;
  width: 640px;
}
.details .work .detailContent .gallery .screenRatio {
  width: 100%;
  padding-top: 66.66667%;
}
.details .work .detailContent .links {
  display: inline-block;
}
.details .work .detailContent .links li {
  font-size: 15px;
  float: left;
  cursor: pointer;
}
.details .work .detailContent .links li .icon {
  height: 17px;
  top: 3px;
}
.details .work .detailContent .links li a {
  color: #000;
}
.details .work .detailContent .links .launchProject {
  padding-right: 20px;
}
.details .work .detailContent .links .launchProject .icon {
  background-position: -68px 0;
  width: 16px;
}
.details .work .detailContent .links .playVideo {
  padding-right: 20px;
}
.details .work .detailContent .links .playVideo .icon {
  background-position: -51px 0;
  width: 17px;
}
.details .work .detailContent .links .shareProject {
  display: none;
  padding-right: 20px;
}
.details .work .detailContent .links .shareProject .icon {
  background-position: -119px 0;
  width: 15px;
}
.details .work .detailContent .textBlock {
  margin-top: 24px;
  width: 500px;
}
.details .work .detailContent .textBlock .videoBtn {
  display: inline-block;
  margin-bottom: 5px;
  color: #60b2d0;
  font-size: 13px;
  font-weight: 300;
  text-transform: lowercase;
}
.details .work .detailContent .clientLogo {
  margin: 38px 0;
}
@media (min-width: 940px) {
  .details .work .detailContent {
    width: 750px;
  }
  .details .work .detailContent .gallery {
    width: 100%;
    height: 511px;
  }
  .details .work .detailContent .gallery .toNextItem, .details .work .detailContent .gallery .toPrevItem {
    top: 78px;
  }
  .details .work .detailContent .gallery .screen {
    height: 500px;
    /* .videoLoader {
    	display: block;
    	width: 66px;
    	height: 40px;
    	position: relative;
    	top: -50%;
    	margin: 0 auto;
    	float: none;
    } */
  }
  .details .work .detailContent .gallery .screen img, .details .work .detailContent .gallery .screen .videoArea {
    width: 750px;
    height: 500px;
    overflow: hidden;
  }
  .details .work .detailContent .gallery .screen .videoDiv {
    left: -1px;
    width: 752px;
    height: 423px;
  }
  .details .work .detailContent .gallery .screen .videoInfo {
    margin-top: 11px;
  }
  .details .work .detailContent .textBlock {
    width: 750px;
  }
  .details .work .detailContent .textBlock .copy {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -o-column-count: 2;
    -ms-column-count: 2;
    column-count: 2;
  }
}

.section.work {
  		/* .columnView {
  			.gallery {
  				@extend %gallery;
  
  				//width: 531px;
  				width: auto;
  				height: auto;
  				margin-bottom: 5px;
  
  				.screen img {
  					height: auto;
  					width: auto;//531px;
  				}
  
  				.screen {
  					width: 100%;
  					max-height: 322px;
  					overflow:hidden;
  					outline: 0;
  				}				
  			}
  		} */
  		/* .wideView {
  			overflow-x: hidden;
  			.shell {
  				padding: 0 0 0 $gutter;
  				.shellWrap {
  					margin: 0 auto;
  				}
  			}
  			.listEl {
  				cursor: pointer;
  				height: 260px;						
  				width: 300px;
  				overflow: hidden;
  
  
  				h3 {
  					@extend %smallTitle;
  				}
  
  				&:after {
  					display: none;
  				}
  			}
  		}
  
  		.detailView {
  			.detailContent {
  				margin: 1px auto 0 auto;
  				width: 640px;
  				
  				.gallery {
  					@extend %gallery;
  				}
  
  							
  
  				.links {
  					display: inline-block;
  					@extend %clearAfter;
  
  					li {
  						font-size: 15px;
  						float: left;
  						cursor: pointer;
  						
  						.icon {
  							@extend %icon;
  							height: 17px;
  							top: 3px;
  							
  						}
  
  						a {
  							color: #000;
  						}						
  					}
  
  					.launchProject {
  						padding-right: 20px;
  
  						 .icon {
  							background-position: -( 4 * $SPRITE_WD) 0;
  							width: 16px;
  						}
  					}
  
  					.playVideo {
  						padding-right: 20px;
  
  						 .icon {
  							background-position: -( 3 * $SPRITE_WD) 0;
  							width: 17px;
  						}
  					}
  
  					.shareProject {
  						display: none;
  						padding-right: 20px;
  						
  
  						 .icon {
  							background-position: -( 7 * $SPRITE_WD) 0;
  							width: 15px;
  						}
  					}
  				} 
  			
  
  				.textBlock {
  					margin-top: 32px;
  					width: 500px;
  
  					.videoBtn {
  						display: inline-block;
  						margin-bottom: 5px;
  						color: $BLUE;
  						font-size: 13px;
  						font-weight: $LIGHT_WT;
  						text-transform: lowercase;
  						
  					}
  				}
  
  				.clientLogo {
  					margin: 38px 0;
  				}
  
  				
  
  				.title {
  					@extend %detailTitle;
  
  				}
  
  				.copy {
  					@extend %copy;
  				}
  
  				@media (min-width: 940px) {
  
  					width: 750px;
  
  					.gallery {
  						width: 100%;
  						height: 500px + 11px;
  
  						.toNextItem, .toPrevItem {
  							top: (500px - 344px) / 2;
  
  						}
  
  						.screen {
  							height: 500px;
  
  
  							img, .videoArea {
  								width: 750px;
  								height:500px;
  								overflow: hidden;
  							}
  
  							.videoDiv {
  								left: -1px; //div size matches 16x9, clipping 1px off each edge
  								width: 752px;
  								height: 423px;
  							}
  
  							.videoInfo {
  								margin-top: 23px;
  							}
  
  							.videoLoader {
  								display: block;
  								width: 66px;
  								height: 40px;
  								position: relative;
  								top: -50%;
  								margin: 0 auto;
  								float: none;
  							}
  
  
  						}						
  					}
  
  					.textBlock {
  						width: 750px;
  						.copy {
  							-webkit-column-count: 2;
  							-moz-column-count: 2;
  							-o-column-count: 2;
  							-ms-column-count: 2;
  							column-count: 2;
  						}
  					}
  
  					
  				}
  			}
  		} */
  /* @media (min-width: $MAX_WIDTH_BREAKPOINT) {
  	.listEl img {
  		min-width: 100%;
  		width: auto;
  		max-width:101%;
  	}
  } */
}

.brief .company {
  cursor: pointer;
  margin-bottom: 40px;
}
.brief .company p, .brief .company h3 {
  font-weight: 300;
  color: #4a4a4a;
}
.brief .company h3 {
  line-height: 35px;
  font-size: 25px;
}
.brief .company p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 25px;
}
.brief .company .action {
  display: block;
  text-align: right;
  margin-right: 45px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: 400;
  margin-top: 2px;
}

.sections .company {
  	/* .staff {
  		text-align: left;//justify;
  		//text-align-last: justify;
  		
  		margin-left: -23px;
  
  		.bio-item {
  			display: inline-block;
  			height: 280px;
  			overflow: auto;
  
  			margin-left: 23px;
  
  			img {
  				@extend %mediaFrame;
  				width: 158px;
  			}
  
  			.meta {
  				text-align: center;
  				text-align-last: center;
  				padding: 3px;
  				width: 158px;
  			}
  		}
  
  		&:after {
  		  content: '';
  		  width: 100%; // Force last line of images to justify
  		  display: inline-block;
  		}
  	} */
}
.sections .company .gallery {
  margin-top: 10px;
  height: auto;
}
.sections .company .gallery .screen {
  outline: 0;
}
.sections .company .gallery .screen img {
  height: auto;
}
.sections .company .gallery .screenRatio {
  width: 100%;
  padding-top: 28.8%;
}
.sections .company .copy p:first-child {
  /* font-weight: $LIGHT_WT;
  color: #888;
  font-size: 32px;
  line-height: 48px;
  margin-top:-10px;
  @extend %sharpText; */
  margin-top: 10px;
  line-height: 35px;
  font-size: 25px;
}
.sections .company .copy p:nth-child(2) {
  margin-top: 10px;
}
.sections .company .staff {
  position: relative;
}
.sections .company .staff .listEl {
  float: left;
  padding: 0 0 30px 0;
}
.sections .company .staff .listEl .imgWrap {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
.sections .company .staff .listEl .imgWrap .imgShell {
  position: relative;
}
.sections .company .staff .listEl .imgWrap .imgShell img {
  position: absolute;
  width: 100%;
  top: 0;
}
.sections .company .staff .listEl .imgWrap::after {
  content: '';
  display: block;
}
.sections .company .staff .listEl .imgWrap::after {
  width: 100%;
  padding-top: 125.14286%;
}
.sections .company .staff .listEl .meta {
  text-align: center;
}
.sections .company .staff .listEl .meta .name {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
}
@media (min-width: 600px) and (max-width: 920px) {
  .sections .company .staff .listEl {
    width: 50%;
  }
  .sections .company .staff .listEl:nth-child(odd) {
    padding-right: 15px;
    clear: both;
  }
  .sections .company .staff .listEl:nth-child(even) {
    padding-left: 15px;
  }
}
@media (min-width: 920px) {
  .sections .company .staff .listEl {
    width: 33.3333%;
  }
  .sections .company .staff .listEl:nth-child(3n + 1) {
    padding-right: 20px;
    clear: both;
  }
  .sections .company .staff .listEl:nth-child(3n + 2) {
    padding-left: 10px;
    padding-right: 10px;
  }
  .sections .company .staff .listEl:nth-child(3n + 3) {
    padding-left: 20px;
  }
}
.sections .company .social .twitter .icon {
  background-position: 0 -51px;
}
.sections .company .social .facebook .icon {
  background-position: -34px -51px;
}
.sections .company .social .linkedIn .icon {
  background-position: -68px -51px;
}
.sections .company .social .youTube .icon {
  background-position: -102px -51px;
}
.sections .company .social li {
  line-height: 13px;
  position: relative;
  margin-bottom: 4px;
}
.sections .company .social li a {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 1px;
}
.sections .company .social li .icon {
  width: 34px;
  height: 34px;
  -moz-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}
.sections .company .social li .label {
  position: relative;
  top: -8px;
  color: #BBB;
  -moz-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  -webkit-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}
.sections .company .social li:hover .icon {
  background-color: #a3bc56;
}
.sections .company .social li:hover .label {
  color: #333;
}
.sections .company .connect {
  position: relative;
  top: -3px;
  padding: 0;
  margin: 8px auto;
  width: 520px;
  overflow: hidden;
}
.sections .company .connect .connectPrompt {
  float: left;
  font-size: 18px;
  color: #CCC;
  font-family: "Roboto Slab", "Robot-Slab", Roboto, Helvetica, Arial, sans-serif;
  margin: 65px 0 0 0;
}
.sections .company .connect::after {
  background: none;
}
.sections .company .social {
  width: 200px;
  margin-left: 90px;
  /* li {
  	margin-left: $gutter - 5px;
  } */
}
.sections .company .contact {
  margin: 11px 0 0 0;
}
.sections .company .social, .sections .company .contact {
  float: left;
}
@media (max-width: 1100px) {
  .sections .company .connect {
    width: auto;
    margin-right: 0;
    margin-left: 0;
  }
  .sections .company .connect .connectPrompt {
    display: none;
  }
}
@media (max-width: 1000px) {
  .sections .company .social {
    float: none;
    width: 100%;
    margin: 11px 0 0 42px;
  }
  .sections .company .social .icon {
    margin: 0;
  }
  .sections .company .social li {
    margin: 0;
    width: 40px;
    float: left;
    text-align: center;
  }
  .sections .company .social li .label {
    display: none;
  }
  .sections .company .social::after {
    content: '';
    display: block;
    clear: both;
  }
  .sections .company .contact {
    float: none;
    margin: 20px 0 10px 50px;
    width: 100%;
  }
}
.sections .company .clients, .sections .company .mentions {
  /* img {
  	margin: 13px 0 20px 0;
  	width: 100%;
  } */
}
.sections .company .clients .imgShell, .sections .company .mentions .imgShell {
  margin: 13px 0 20px 0;
}
.sections .company .clients ul, .sections .company .mentions ul {
  display: none;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  -moz-column-gap: 40px;
  -webkit-column-gap: 40px;
  column-gap: 40px;
  margin-top: 6px;
  color: #777;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}
.sections .company .clients .imgShell {
  position: relative;
}
.sections .company .clients .imgShell img {
  position: absolute;
  width: 100%;
  top: 0;
}
.sections .company .clients::after {
  content: '';
  display: block;
}
.sections .company .clients::after {
  width: 100%;
  padding-top: 83.39844%;
}
.sections .company .mentions .imgShell {
  position: relative;
}
.sections .company .mentions .imgShell img {
  position: absolute;
  width: 100%;
  top: 0;
}
.sections .company .mentions::after {
  content: '';
  display: block;
}
.sections .company .mentions::after {
  width: 100%;
  padding-top: 35.1711%;
}
.sections .company .column1, .sections .company .column2 {
  margin-top: 5px;
}
.sections .company .column1 > div:not(:last-child), .sections .company .column2 > div:not(:last-child) {
  margin-bottom: 30px;
}

.staffTooltip .tooltipCopy {
  background: #FFF;
}
.staffTooltip .tooltipCopy .tipShell {
  background: #f6f6f6;
  font-size: 11px;
  padding: 10px;
  min-width: 250px;
  color: #717171;
}
.staffTooltip .tooltipCopy .tipShell .name {
  font-size: 18px;
  font-weight: 300;
}
.staffTooltip .tooltipCopy .tipShell .role {
  padding: 9px 0;
  line-height: 15px;
  font-family: "Roboto Slab", "Robot-Slab", Roboto, Helvetica, Arial, sans-serif;
  border-bottom: 1px solid #dbdbdb;
}
.staffTooltip .tooltipCopy .tipShell .bio {
  margin-top: 10px;
  line-height: 15px;
}
.staffTooltip .tooltipCopy .tipShell .bio p:not(:first-child) {
  margin-top: 5px;
}

.rootContainer:not(.hasSelection) {
  /* 		.wrap {		
  			@include layout($total_columns (64px 18px) split inside-static);
  			@include clearfix;
  		}
  		
  		.section {
  		
  
  			&.news, &.company {
  				@include span($narrow_columns of $total_columns no-gutters);//2 of 6 );
  			}		
  
  
  			&.work {
  				@include span($wide_columns of $total_columns no-gutters);
  			}	
  		}*/
}

.rootContainer.hasSelection .section {
  float: left;
}
.rootContainer.hasSelection .section:not(.selected) {
  width: 2.17391%;
  float: left;
  overflow-y: hidden;
}
.rootContainer.hasSelection .section.selected {
  width: 92.75362%;
  float: left;
}
.rootContainer.hasSelection .section:not(:last-child) .labelView {
  border-right: 1px solid gainsboro;
}
.rootContainer.hasSelection .selected + .section .labelView {
  border-left: 1px solid gainsboro;
}

.error-page {
  background: #FFF;
}

.error-message {
  text-align: center;
  color: #484848;
  max-width: 650px;
  margin: 74px auto;
  line-height: 38px;
  text-rendering: optimizeLegibility;
  font-kerning: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.error-message h1 {
  font-size: 40px;
  font-weight: 300;
}
.error-message sub.sub1 {
  display: block;
  font-size: 18px;
}
.error-message sub.sub2 {
  display: block;
  font-size: 13px;
  line-height: 28px;
}
.error-message .tagline {
  margin: 23px 0 12px 0;
}
.error-message p {
  font-size: 20px;
  margin-bottom: 38px;
}