html, body {
  width: 100%;
  height: 100%; }
  html.overflow, body.overflow {
    overflow: hidden; }

@media screen and (max-width: 767px) {
  html {
    box-sizing: border-box; }

  *,
  *:before,
  *:after {
    box-sizing: inherit; } }
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,
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,
main, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; }

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

a,
a:hover,
a:active {
  text-decoration: none;
  outline: 0; }

strong,
b {
  font-weight: bold; }

dfn,
em,
i {
  font-style: italic; }

ol,
ul,
li {
  list-style: none; }

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

abbr[title],
acronym[title] {
  border-bottom: 1px dotted; }

code,
pre,
kbd,
samp {
  font-family: 'Courier New', monospace; }

pre {
  white-space: pre;
  white-space: pre-wrap; }

img {
  border: 0;
  max-width: 100%;
  width: auto\9;
  height: auto;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic; }

svg:not(:root) {
  overflow: hidden; }

audio,
canvas,
video {
  display: inline-block; }

audio:not([controls]) {
  height: 0;
  display: none; }

input,
select,
textarea,
button {
  font: inherit;
  font-size: 100%;
  display: inline-block;
  outline: 0; }

input,
select,
button {
  vertical-align: middle; }

input,
select,
textarea {
  -webkit-appearance: none; }

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box; }
  input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none; }

label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer; }

input,
button {
  line-height: normal;
  margin: 0;
  *overflow: visible; }
  input::-moz-focus-inner,
  button::-moz-focus-inner {
    padding: 0;
    border: 0; }
  input[disabled],
  button[disabled] {
    cursor: default; }

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; }

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

[hidden],
template {
  display: none; }

html {
  height: 100%;
  position: relative; }

body {
  color: #757474;
  font: 300 16px/1.5 "proxima-nova", sans-serif;
  height: 100%; }
  .the-force body {
    color: #757474; }
  .the-dark-side body {
    color: #737b84; }

a {
  color: #339fd6;
  cursor: pointer;
  -webkit-transition: color 0.1s ease-in-out;
  transition: color 0.1s ease-in-out; }
  a:hover {
    color: #373d42; }

.blue {
  color: #339fd6; }

.white {
  color: white; }

strong {
  font-weight: 600; }

strong.highlight {
  background-color: #fff7cd;
  padding: 2px 4px; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "omnes-pro", sans-serif;
  font-weight: 400;
  text-rendering: optimizelegibility; }
  h1.small,
  h2.small,
  h3.small,
  h4.small,
  h5.small,
  h6.small {
    font-weight: normal; }

h1 {
  font-size: 40px;
  line-height: 1.2; }
  h1.featured-heading {
    font-size: 45px;
    line-height: 50px; }
  h1.section-heading {
    font-size: 45px;
    line-height: 50px; }
  h1.post-title {
    font-size: 29px;
    font-weight: 400;
    line-height: 1.2; }
    h1.post-title a {
      color: #373d42; }
      h1.post-title a:hover {
        color: #339fd6; }

h2 {
  font-size: 37px; }
  h2.block-heading {
    font-size: 35px; }

h3 {
  font-size: 29px; }
  h3.block-heading {
    font-size: 28px; }
  h3.track-heading {
    font-weight: 300; }

h4 {
  font-size: 26px; }
  h4.archive-heading {
    font-size: 27px;
    line-height: 1.3; }

h5 {
  color: #373d42;
  font-size: 22px; }
  h5.artist {
    font-size: 20px;
    font-style: italic;
    font-weight: 300; }

h6 {
  font-size: 17px; }
  h6.column-heading {
    font-size: 14px;
    font-weight: 500; }

.heading {
  text-align: center; }
  .heading.left {
    text-align: left; }
  .heading h1 {
    margin: 0 0 12px 0; }
  .heading h2 {
    margin: 0 0 12px 0;
    line-height: 1.1; }
  .heading p {
    font-size: 20px;
    line-height: 1.3; }

.sub-heading {
  text-align: center;
  margin: 0 0 50px 0;
  padding-bottom: 28px;
  border-bottom: 1px solid #e3eaec; }

.heading-label {
  font-family: "omnes-pro", sans-serif; }

.break {
  display: block; }

.mid-break {
  display: inline; }

.sub-break {
  display: inline; }

.all-break {
  display: inline; }

.uppercase {
  text-transform: uppercase; }

.work-divider {
  margin: 0 auto 25px auto;
  height: 1px;
  display: block;
  opacity: 0.5;
  background-color: #8cd4f8; }

@media screen and (min-width: 768px) and (max-width: 1057px) {
  h1.featured-heading {
    font-size: 40px;
    line-height: 45px; }

  .break {
    display: inline; }

  .mid-break {
    display: block; }

  .sub-break {
    display: inline; }

  .all-break {
    display: block; } }
@media screen and (max-width: 767px) {
  body {
    font-size: 15px; }

  h1 {
    font-size: 23px; }
    h1.featured-heading {
      font-size: 27px;
      line-height: 32px; }

  h2 {
    font-size: 24px; }
    h2.block-heading {
      font-size: 24px; }

  h3 {
    font-size: 20px; }
    h3.block-heading {
      font-size: 24px; }

  h4 {
    font-size: 15px; }

  .heading h2 {
    line-height: 1.1;
    margin: 0 0 12px 0; }
  .heading p {
    font-size: 15px;
    line-height: 1.3; }

  .sub-heading {
    margin: 0 0 25px 0;
    padding: 0 0 18px 0; }
    .sub-heading h2 {
      font-size: 23px; }

  .break {
    display: inline; }

  .mid-break {
    display: inline; }

  .sub-break {
    display: block; }

  .all-break {
    display: block; } }
.the-force {
  background-color: #e3eaec; }

.the-dark-side {
  background-color: #2b3036; }

.blue-light-saber {
  background-color: #339fd6; }

@media screen and (max-width: 767px) {
  .the-force {
    background-color: white; }

  .the-dark-side {
    background-color: #171a1d; } }
.the-404 {
  width: 100%;
  height: 100%;
  background: url(../images/bg-404.jpg) no-repeat center center/cover; }

.content {
  background-color: white; }

.main-container {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  min-height: 100%;
  position: relative;
  box-sizing: border-box; }
  @media screen and (min-width: 1058px) {
    .main-container {
      width: 1038px; } }

.page-layer {
  -webkit-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
  position: relative;
  top: 0;
  left: 0;
  z-index: 0; }
  .page-layer.overlay-open {
    -webkit-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); }

.page {
  width: 100%;
  position: relative;
  z-index: 1; }
  @media screen and (min-width: 1058px) {
    .page {
      width: 1038px; } }

.group:before, .page:before, .container:before,
.row:before, .group:after, .page:after, .container:after,
.row:after {
  content: "";
  line-height: 0;
  display: table; }

.group:after, .page:after, .container:after,
.row:after {
  clear: both; }

.left {
  float: left; }

.right {
  float: right; }

.hidden {
  display: none; }

.vertical {
  display: table; }
  .vertical .vertical-content {
    height: 100%;
    display: table-cell;
    vertical-align: middle; }

@media screen and (max-width: 767px) {
  .the-force [class*="col"],
  .the-dark-side [class*="col"],
  .special-theme [class*="col"] {
    float: none; } }
.default-page {
  padding: 89px 30px 30px 30px;
  border-radius: 5px;
  background-color: white; }

.hero {
  text-align: center; }
  @media screen and (min-width: 1058px) {
    .hero {
      border-radius: 5px 5px 0 0; }
      .hero .fade-element {
        border-radius: 5px 5px 0 0; } }

.darth-fader {
  position: relative;
  background-color: #252a2d; }
  .darth-fader .container {
    position: relative;
    z-index: 3; }

.fade-element {
  -webkit-transition: opacity 1.5s ease;
  transition: opacity 1.5s ease;
  opacity: 0;
  visibility: hidden; }
  .fade-element.fade-image {
    position: relative; }
  .fade-element.fade-hero {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; }
  .fade-element.active {
    opacity: 1;
    visibility: visible; }

.the-gradient {
  background: #339fd6;
  background: #339fd6;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left bottom, #ae75cd, yellow);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top right, #ae75cd, #339fd6);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top right, #ae75cd, #339fd6);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top right, #ae75cd, #339fd6);
  /* Standard syntax (must be last) */ }

a .shape-svg,
a .shape-span {
  cursor: pointer; }

.shape-svg {
  display: block; }

.shape-span {
  display: none; }

.icon {
  background-image: url(../images/icons-global.png);
  background-repeat: no-repeat; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
    .icon {
      background-image: url(../images/icons-global@2x.png);
      background-size: 200px auto; } }

header {
  margin: 0 auto -25px auto;
  padding: 99px 30px 0 30px;
  width: 978px;
  height: 73px;
  position: relative;
  z-index: 10; }
  header .nubbin,
  header .shape-nubbin {
    width: 118px;
    height: 25px; }
  header .nubbin {
    margin-left: -59px;
    position: absolute;
    bottom: 0;
    left: 50%; }
    header .nubbin .shape-nubbin {
      fill: #e3eaec; }
    .the-dark-side header .nubbin .shape-nubbin {
      fill: #2b3036; }
  @media screen and (min-width: 1058px) and (max-width: 1058px) {
    header {
      width: 100%;
      height: 172px;
      box-sizing: border-box; } }
  @media screen and (max-width: 1057px) {
    header {
      margin: 0;
      padding: 25px 0 0 0;
      width: 100%;
      height: auto;
      position: absolute;
      top: 0;
      left: 0; }
      header .nubbin,
      header .shape-nubbin {
        display: none; } }

.logo {
  display: block; }
  .logo a {
    display: block; }
  .logo .shape-logo {
    fill: #252a2d; }
  .the-dark-side .logo .shape-logo, .blue-light-saber .logo .shape-logo, footer .logo .shape-logo {
    fill: white; }

@media screen and (min-width: 1058px) {
  header .logo {
    width: 104px;
    height: 119px; } }
@media screen and (min-width: 1058px) {
  footer .logo,
  footer .logo .shape-logo {
    width: 40px;
    height: 40px; }
  footer .logo {
    position: absolute;
    top: 52px;
    left: 71px; } }
@media screen and (min-width: 768px) {
  header .logo,
  header .logo .shape-logo {
    width: 104px;
    height: 119px; }
  header .logo {
    margin-left: -51px;
    position: absolute;
    top: 25px;
    left: 50%; } }
@media screen and (min-width: 768px) and (max-width: 1057px) {
  footer .logo,
  footer .logo .shape-logo {
    width: 74px;
    height: 74px; }
  footer .logo {
    margin: 0 auto 20px auto; } }
@media screen and (max-width: 767px) {
  header .logo,
  header .logo .shape-logo {
    width: 80px;
    height: 80px; }
  header .logo {
    margin: 0 auto; }

  footer .logo {
    display: none; } }
@media screen and (min-width: 1058px) {
  .themes-page .main-nav {
    display: none; } }
.main-nav li {
  display: block;
  float: left;
  position: relative; }
  .main-nav li a {
    font: 500 17px "omnes-pro", sans-serif;
    text-transform: uppercase;
    display: block;
    cursor: pointer; }
    .the-force .main-nav li a {
      color: #848d90; }
      .the-force .main-nav li a:hover {
        color: #252a2d; }
    .the-dark-side .main-nav li a {
      color: #737b84; }
      .the-dark-side .main-nav li a:hover {
        color: #339fd6; }
  .main-nav li.home {
    margin: 0 80px 0 0; }
  .main-nav li.company {
    margin: 0 81px 0 0; }
  .main-nav li.services {
    margin: 0 255px 0 0; }
  .main-nav li.work {
    margin: 0 95px 0 0; }
  .main-nav li.contact {
    float: right; }
  .main-nav li.planner {
    display: none; }
  @media screen and (min-width: 1058px) and (max-width: 1058px) {
    .main-nav li.services {
      margin: 0 241px 0 0; } }
  .the-force .main-nav li.active a {
    color: #252a2d; }
  .the-dark-side .main-nav li.active a {
    color: white; }
  .main-nav li.active:before {
    content: "";
    margin: 0 0 0 -6px;
    border-radius: 6px;
    width: 12px;
    height: 12px;
    display: block;
    position: absolute;
    top: -27px;
    left: 50%;
    background-color: #339fd6; }

.nav-menu,
.mobile-nav {
  display: none; }

.nav-close {
  width: 20px;
  height: 20px;
  top: 25px;
  right: 25px; }

@media screen and (max-width: 1057px) {
  .main-nav {
    display: none; }

  .nav-menu,
  .mobile-nav {
    display: block; }

  .nav-menu {
    border-radius: 0 0 0 4px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 11;
    cursor: pointer;
    background-color: #339fd6; }
    .nav-menu .shape-nav {
      fill: white; }

  .mobile-nav {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 19;
    background-color: #339fd6;
    -webkit-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }
    .mobile-nav.open {
      visibility: visible;
      left: 0;
      -webkit-transition: all 0.45s ease-in-out;
      transition: all 0.45s ease-in-out; }
    .mobile-nav ul {
      padding: 44px 0 0 52px; }
    .mobile-nav li {
      margin: 0 0 19px 0; }
      .mobile-nav li a {
        color: white;
        font: 300 25px "omnes-pro", sans-serif;
        text-transform: capitalize;
        cursor: pointer; }
        .mobile-nav li a:hover {
          font-weight: 500; }
      .mobile-nav li.planner {
        display: block; }
      .mobile-nav li.active a {
        font-weight: 500; } }
@media screen and (min-width: 768px) and (max-width: 1057px) {
  .nav-menu {
    width: 60px;
    height: 60px; }
    .nav-menu .shape-nav {
      margin: 18px auto 0 auto;
      width: 32px;
      height: 24px; } }
@media screen and (max-width: 767px) {
  .nav-menu {
    width: 44px;
    height: 44px; }
    .nav-menu .shape-nav {
      margin: 15px auto 0 auto;
      width: 20px;
      height: 14px; } }
footer .container {
  height: 100%; }
  .the-force footer .container {
    background-color: #252a2d; }
  .the-dark-side footer .container {
    background-color: #252a2d; }
footer .col {
  position: relative;
  box-sizing: border-box; }
  footer .col a {
    font-weight: bold; }
  .the-force footer .col h6 {
    color: white; }
  .the-force footer .col p {
    color: #969ba2; }
  .the-force footer .col a {
    color: #339fd6; }
    .the-force footer .col a:hover, .the-force footer .col a.active {
      color: white; }
  .the-dark-side footer .col h6 {
    color: white; }
  .the-dark-side footer .col p {
    color: #969ba2; }
  .the-dark-side footer .col a {
    color: #339fd6; }
    .the-dark-side footer .col a:hover, .the-dark-side footer .col a.active {
      color: white; }
footer .footer-nav {
  display: none; }

@media screen and (min-width: 1058px) {
  footer {
    width: 1038px;
    height: 187px; }
    footer .container {
      border-radius: 0 0 5px 5px; } }
@media screen and (min-width: 1058px) {
  footer {
    margin: 0 0 40px 0; }
    footer .col {
      font-size: 14px;
      height: 187px;
      float: left;
      padding-bottom: 71px; }
      footer .col h6 {
        font-weight: 500;
        margin-bottom: 2px; }
    footer .company.col {
      padding: 52px 0 0 123px;
      width: 38%; }
      footer .company.col .copyright {
        text-align: left; }
    footer .planner.col {
      padding: 52px 25px 0 35px;
      width: 29%; }
    footer .connect.col {
      padding: 52px 30px 0 40px;
      border-right: none;
      width: 29%; }
      footer .connect.col ul li {
        display: inline; }
      footer .connect.col .divider.temp {
        display: none; } }
@media screen and (max-width: 1057px) {
  footer {
    margin: 0;
    height: auto; } }
@media screen and (min-width: 768px) and (max-width: 1057px) {
  footer .col {
    font-size: 18px;
    text-align: center;
    width: 100%;
    box-sizing: border-box; }
    footer .col h6 {
      font-size: 22px; }
    .the-force footer .col {
      border-right: none;
      border-top: 1px solid #2f3030; }
    .the-dark-side footer .col {
      border-right: none;
      border-top: 1px solid #2f3030; }
    footer .col.company {
      border: none !important; }
      footer .col.company .copyright {
        text-align: center; }
    footer .col.connect .divider.temp {
      display: inline-block; }
    footer .col.company, footer .col.planner, footer .col.connect {
      padding: 44px 0; } }
@media screen and (max-width: 767px) {
  footer .container {
    padding: 30px; }
  footer .col {
    font-size: 17px;
    text-align: left;
    display: inline-block; }
    footer .col.company {
      padding: 0 0 20px 0;
      width: 100%; }
    footer .col.planner {
      display: none; }
    footer .col.connect {
      display: inline-block;
      vertical-align: top; }
      footer .col.connect h6,
      footer .col.connect .divider,
      footer .col.connect .email {
        display: none; }
    footer .col.footer-nav {
      margin: 0 50px 0 0; }
    footer .col nav a {
      display: block;
      font-weight: bold; } }
.contact-layer {
  width: 100%;
  height: 100%;
  background-color: #339fd6; }
  .contact-layer.fixed-layer {
    overflow: auto;
    visibility: hidden;
    position: fixed;
    -webkit-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(100%);
    transform: translateX(100%); }
  .contact-layer.absolute-layer {
    position: absolute; }
  .contact-layer.fixed-layer, .contact-layer.absolute-layer {
    top: 0;
    left: 0;
    z-index: 100; }
  .contact-layer.static-layer {
    position: relative; }
  .safari .contact-layer {
    overflow-y: auto;
    overflow-x: hidden; }
  .contact-page .contact-layer {
    visibility: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  .contact-layer.open {
    z-index: 101;
    visibility: visible;
    -webkit-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  .contact-layer .contact-header {
    padding: 40px 0; }
  .contact-layer .logo,
  .contact-layer .logo .shape-logo {
    width: 102px;
    height: 102px; }
  .contact-layer .logo {
    margin: 0 auto;
    position: relative;
    z-index: 104; }
    .contact-layer .logo .shape-logo {
      fill: white; }

.contact-close {
  width: 25px;
  height: 25px;
  top: 29px;
  right: 29px; }

.contact-reverse {
  width: 36px;
  height: 26px;
  visibility: hidden;
  top: 29px;
  left: 29px; }

.contact-panel {
  text-align: center;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 102; }
  .contact-panel.overflow {
    overflow: visible; }
  .fixed-layer .contact-panel, .absolute-layer .contact-panel {
    margin-top: -182px;
    padding-top: 182px;
    box-sizing: border-box; }
  .static-layer .contact-panel {
    overflow: visible; }
  .contact-panel .heading h2 {
    color: white; }
  .contact-panel .heading p {
    color: #bce9ff;
    font-size: 20px; }
  @media screen and (max-width: 767px) {
    .contact-panel .heading h2 {
      font-size: 24px; } }

.fixed-layer .form-choice {
  padding: 182px 0 40px 0;
  position: absolute; }
.absolute-layer .form-choice {
  position: relative; }
.fixed-layer .form-choice, .absolute-layer .form-choice {
  width: 100%;
  display: block;
  top: 0;
  left: 0;
  z-index: 103; }
.static-layer .form-choice {
  display: none; }
.form-choice.hidden {
  display: none; }
@media screen and (min-width: 1058px) {
  .form-choice ul.checkboxes {
    display: none; }
  .form-choice .desktop-options {
    width: 873px;
    margin: 42px auto 0 auto;
    display: inline-block;
    text-align: center; }
    .form-choice .desktop-options p {
      font-size: 15px;
      color: #85d3fb;
      padding-top: 45px;
      clear: both; }
    .form-choice .desktop-options a {
      font-size: 25px;
      line-height: 1.2em;
      text-align: center;
      font-family: "omnes-pro", sans-serif;
      color: #fff;
      float: left;
      width: 184px;
      border: 3px solid #99cfeb;
      border-radius: 10px;
      padding: 40px 32px 134px 32px; }
      .form-choice .desktop-options a.pp {
        background-image: url(../images/img-contact-pp.png);
        background-repeat: no-repeat;
        background-position: 90px 225px; } }
      @media screen and (min-width: 1058px) and (-webkit-min-device-pixel-ratio: 1.3), screen and (min-width: 1058px) and (min-resolution: 125dpi), screen and (min-width: 1058px) and (min-resolution: 1.3dppx) {
        .form-choice .desktop-options a.pp {
          background-image: url(../images/img-contact-pp@2x.png);
          background-size: 65px auto; } }
@media screen and (min-width: 1058px) {
      .form-choice .desktop-options a.hello {
        margin: 0 55px;
        background-image: url(../images/img-contact-hello.png);
        background-repeat: no-repeat;
        background-position: 90px 225px; } }
      @media screen and (min-width: 1058px) and (-webkit-min-device-pixel-ratio: 1.3), screen and (min-width: 1058px) and (min-resolution: 125dpi), screen and (min-width: 1058px) and (min-resolution: 1.3dppx) {
        .form-choice .desktop-options a.hello {
          background-image: url(../images/img-contact-hello@2x.png);
          background-size: 64px auto; } }
@media screen and (min-width: 1058px) {
      .form-choice .desktop-options a.themes {
        background-image: url(../images/img-contact-themes.png);
        background-repeat: no-repeat;
        background-position: 90px 225px; } }
      @media screen and (min-width: 1058px) and (-webkit-min-device-pixel-ratio: 1.3), screen and (min-width: 1058px) and (min-resolution: 125dpi), screen and (min-width: 1058px) and (min-resolution: 1.3dppx) {
        .form-choice .desktop-options a.themes {
          background-image: url(../images/img-contact-themes@2x.png);
          background-size: 64px auto; } }
@media screen and (min-width: 1058px) {
      .form-choice .desktop-options a:hover {
        border-color: #fff; }
      .form-choice .desktop-options a span {
        margin-top: 12px;
        font-size: 18px;
        line-height: 1.4em;
        font-family: "proxima-nova", sans-serif;
        color: #8cd4f8;
        display: block; } }
@media screen and (min-width: 768px) and (max-width: 1057px) {
  .form-choice .desktop-options {
    display: none; } }
@media screen and (max-width: 767px) {
  .form-choice .desktop-options {
    display: none; } }
.form-choice ul {
  margin: 0 auto;
  padding-top: 64px;
  display: table; }
  .form-choice ul li {
    text-align: left;
    padding-bottom: 22px; }
.form-choice .check {
  color: white;
  font-size: 20px;
  position: relative;
  display: block;
  cursor: pointer; }
  .form-choice .check .checkbox {
    margin: 2px 9px 0 0;
    width: 27px;
    height: 23px;
    display: block;
    float: left; }
    .form-choice .check .checkbox .check-mark,
    .form-choice .check .checkbox .check-circle,
    .form-choice .check .checkbox .check-circle-checked {
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
    .form-choice .check .checkbox .check-circle,
    .form-choice .check .checkbox .check-circle-checked {
      fill: #89d1f4; }
    .form-choice .check .checkbox .check-mark {
      fill: #89d1f4; }
    .form-choice .check .checkbox .check-circle-checked,
    .form-choice .check .checkbox .check-mark {
      opacity: 0; }
  .form-choice .check:hover .check-circle {
    opacity: 0; }
  .form-choice .check:hover .check-circle-checked,
  .form-choice .check:hover .check-mark {
    opacity: 1; }
  .form-choice .check:active .check-mark, .form-choice .check.selected .check-mark {
    fill: #f7d325; }
@media screen and (max-width: 767px) {
  .form-choice ul {
    padding-top: 34px; } }

.fixed-layer .form-panel, .absolute-layer .form-panel {
  padding-top: 182px; }
.fixed-layer .form-panel, .absolute-layer .form-panel {
  position: absolute;
  top: 0; }
.static-layer .form-panel {
  margin: 0 auto; }
@media screen and (min-width: 1058px) {
  .form-panel {
    width: 790px; }
    .fixed-layer .form-panel, .absolute-layer .form-panel {
      margin: 0 -395px 0 0;
      right: -790px; } }
@media screen and (min-width: 768px) {
  .fixed-layer .form-panel, .absolute-layer .form-panel {
    -webkit-transition: right 0.35s ease-in-out;
    transition: right 0.35s ease-in-out; }
    .fixed-layer .form-panel.visible, .absolute-layer .form-panel.visible {
      right: 50%; } }
@media screen and (min-width: 768px) and (max-width: 1057px) {
  .form-panel {
    width: 768px; }
    .fixed-layer .form-panel, .absolute-layer .form-panel {
      margin: 0 -384px 0 0;
      right: -768px; }
    .form-panel .heading {
      padding: 0 35px; } }
@media screen and (max-width: 767px) {
  .form-panel {
    width: 100%;
    left: 100%; }
    .fixed-layer .form-panel, .absolute-layer .form-panel {
      -webkit-transition: left 0.35s ease-in-out;
      transition: left 0.35s ease-in-out; }
      .fixed-layer .form-panel.visible, .absolute-layer .form-panel.visible {
        left: 0; }
    .form-panel .heading {
      padding: 0 20px;
      width: 100%;
      box-sizing: border-box; }
      .form-panel .heading p {
        font-size: 15px; } }
.form-panel .sub-text {
  color: #bce9ff;
  font-size: 15px;
  padding: 16px 0 0 0; }

.form-container {
  margin: 0 auto;
  padding: 44px 0 40px 0;
  width: 542px; }
  .form-container .field {
    margin: 0 0 40px 0; }
    .form-container .field span.error {
      display: none !important; }
  .form-container .field.left input[type="text"],
  .form-container .field.right input[type="text"] {
    width: 246px; }
  .form-container .field.full input {
    width: 100%; }
  .form-container textarea {
    width: 100%;
    height: 198px; }
  @media screen and (max-width: 767px) {
    .form-container {
      width: 100%;
      padding: 35px 20px;
      box-sizing: border-box; }
      .form-container .field.left,
      .form-container .field.right {
        width: 100%;
        float: none; }
        .form-container .field.left input[type="text"],
        .form-container .field.right input[type="text"] {
          width: 100%; } }

#project-form .label-rows {
  color: #bce9ff;
  padding: 3px 0 6px 0; }
  #project-form .label-rows .row {
    padding: 0 0 36px 0; }
#project-form .label {
  text-align: left;
  float: left; }
  #project-form .label p {
    font-size: 18px;
    -webkit-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out; }
  #project-form .label span {
    font-size: 13px; }
  #project-form .label.active-focus p {
    color: white; }
#project-form .line-field {
  font-size: 17px;
  float: right;
  position: relative; }
  #project-form .line-field span.error {
    display: none !important; }
  #project-form .line-field .symbol {
    position: absolute;
    top: 3px;
    left: 13px; }
  #project-form .line-field.budget-field input {
    padding: 4px 0 16px 33px; }
  #project-form .line-field.referrer-field input {
    padding: 4px 18px 16px 18px; }
@media screen and (max-width: 767px) {
  #project-form .label,
  #project-form .line-field {
    float: none; }
  #project-form .label {
    text-align: center;
    margin: 0 0 15px 0; }
  #project-form .line-field input {
    width: 100%; } }

#support-form .search-container {
  padding: 44px 0 20px 0; }
#support-form .support-container {
  padding: 30px 0 40px 0; }
@media screen and (max-width: 767px) {
  #support-form .search-container {
    padding: 44px 25px 20px 25px; }
  #support-form .support-container {
    padding: 30px 25px 40px 25px; } }

.success {
  display: none; }
  .success .heading {
    margin: 0 0 30px 0; }
    .success .heading p a {
      color: white;
      font-weight: 600; }
  .success span.name {
    text-transform: capitalize; }
  .success .royale-with-cheese {
    margin: 40px auto 0 auto;
    width: 247px;
    height: 241px;
    display: block; }
  @media screen and (min-width: 768px) and (max-width: 1057px) {
    .success {
      padding: 0 30px 40px 30px; } }
  @media screen and (max-width: 767px) {
    .success {
      padding: 0 20px 40px 20px; } }

.field {
  position: relative; }

.input {
  font-size: 17px;
  border-radius: 7px;
  height: 39px;
  display: block;
  background-color: transparent;
  box-sizing: border-box;
  -webkit-transition: border 0.15s;
  transition: border 0.15s; }
  @media screen and (max-width: 767px) {
    .input {
      font-size: 16px;
      border-width: 1px !important;
      border-radius: 3px; } }
  .input.input-small {
    font-size: 16px;
    height: 37px; }
  .input.input-medium {
    font-size: 18px; }
  .input.input-large {
    font-size: 22px;
    height: 49px; }
  .input.input-contact {
    color: white;
    border: 2px solid #bce9ff; }
    .input.input-contact::-webkit-input-placeholder {
      color: #bce9ff;
      -webkit-transition: color 0.3s ease-in-out;
      transition: color 0.3s ease-in-out; }
    .input.input-contact:focus::-webkit-input-placeholder {
      color: #ebf8ff;
      color: rgba(188, 233, 255, 0.3); }
    .input.input-contact::-moz-placeholder {
      color: #bce9ff;
      transition: color 0.3s ease-in-out; }
    .input.input-contact:focus::-moz-placeholder {
      color: #ebf8ff;
      color: rgba(188, 233, 255, 0.3); }
    .input.input-contact:-moz-placeholder {
      color: #bce9ff;
      transition: color 0.3s ease-in-out; }
    .input.input-contact:focus:-moz-placeholder {
      color: #ebf8ff;
      color: rgba(188, 233, 255, 0.3); }
    .input.input-contact:-ms-input-placeholder {
      color: #bce9ff;
      transition: color 0.3s ease-in-out; }
    .input.input-contact:focus:-ms-input-placeholder {
      color: #ebf8ff;
      color: rgba(188, 233, 255, 0.3); }
    .input.input-contact:focus {
      border: 2px solid white; }
    .input.input-contact.error, .input.input-contact.error:focus {
      border-color: #f7d325; }
  .input.input-blue {
    color: white;
    border: 2px solid #bce9ff; }
    .input.input-blue::-webkit-input-placeholder {
      color: #bce9ff;
      -webkit-transition: color 0.3s ease-in-out;
      transition: color 0.3s ease-in-out; }
    .input.input-blue:focus::-webkit-input-placeholder {
      color: #ebf8ff;
      color: rgba(188, 233, 255, 0.3); }
    .input.input-blue::-moz-placeholder {
      color: #bce9ff;
      transition: color 0.3s ease-in-out; }
    .input.input-blue:focus::-moz-placeholder {
      color: #ebf8ff;
      color: rgba(188, 233, 255, 0.3); }
    .input.input-blue:-moz-placeholder {
      color: #bce9ff;
      transition: color 0.3s ease-in-out; }
    .input.input-blue:focus:-moz-placeholder {
      color: #ebf8ff;
      color: rgba(188, 233, 255, 0.3); }
    .input.input-blue:-ms-input-placeholder {
      color: #bce9ff;
      transition: color 0.3s ease-in-out; }
    .input.input-blue:focus:-ms-input-placeholder {
      color: #ebf8ff;
      color: rgba(188, 233, 255, 0.3); }
    .input.input-blue:focus {
      border: 2px solid white; }
  .input.input-white {
    color: white;
    border: 2px solid white;
    background-color: transparent !important; }
    .input.input-white::-webkit-input-placeholder {
      color: white;
      -webkit-transition: color 0.3s ease-in-out;
      transition: color 0.3s ease-in-out; }
    .input.input-white:focus::-webkit-input-placeholder {
      color: white;
      color: rgba(255, 255, 255, 0.2); }
    .input.input-white::-moz-placeholder {
      color: white;
      transition: color 0.3s ease-in-out; }
    .input.input-white:focus::-moz-placeholder {
      color: white;
      color: rgba(255, 255, 255, 0.2); }
    .input.input-white:-moz-placeholder {
      color: white;
      transition: color 0.3s ease-in-out; }
    .input.input-white:focus:-moz-placeholder {
      color: white;
      color: rgba(255, 255, 255, 0.2); }
    .input.input-white:-ms-input-placeholder {
      color: white;
      transition: color 0.3s ease-in-out; }
    .input.input-white:focus:-ms-input-placeholder {
      color: white;
      color: rgba(255, 255, 255, 0.2); }
  .input.input-grey {
    color: #757474;
    border: 1px solid #e3eaec; }
    .input.input-grey::-webkit-input-placeholder {
      color: #757474;
      -webkit-transition: color 0.3s ease-in-out;
      transition: color 0.3s ease-in-out; }
    .input.input-grey:focus::-webkit-input-placeholder {
      color: #e3e3e3;
      color: rgba(117, 116, 116, 0.2); }
    .input.input-grey::-moz-placeholder {
      color: #757474;
      transition: color 0.3s ease-in-out; }
    .input.input-grey:focus::-moz-placeholder {
      color: #e3e3e3;
      color: rgba(117, 116, 116, 0.2); }
    .input.input-grey:-moz-placeholder {
      color: #757474;
      transition: color 0.3s ease-in-out; }
    .input.input-grey:focus:-moz-placeholder {
      color: #e3e3e3;
      color: rgba(117, 116, 116, 0.2); }
    .input.input-grey:-ms-input-placeholder {
      color: #757474;
      transition: color 0.3s ease-in-out; }
    .input.input-grey:focus:-ms-input-placeholder {
      color: #e3e3e3;
      color: rgba(117, 116, 116, 0.2); }
  .input.input-dark-grey {
    color: white;
    border: 2px solid #7b848f; }
    .input.input-dark-grey::-webkit-input-placeholder {
      color: #969ba2;
      -webkit-transition: color 0.3s ease-in-out;
      transition: color 0.3s ease-in-out; }
    .input.input-dark-grey:focus::-webkit-input-placeholder {
      color: #e0e1e3;
      color: rgba(150, 155, 162, 0.3); }
    .input.input-dark-grey::-moz-placeholder {
      color: #969ba2;
      transition: color 0.3s ease-in-out; }
    .input.input-dark-grey:focus::-moz-placeholder {
      color: #e0e1e3;
      color: rgba(150, 155, 162, 0.3); }
    .input.input-dark-grey:-moz-placeholder {
      color: #969ba2;
      transition: color 0.3s ease-in-out; }
    .input.input-dark-grey:focus:-moz-placeholder {
      color: #e0e1e3;
      color: rgba(150, 155, 162, 0.3); }
    .input.input-dark-grey:-ms-input-placeholder {
      color: #969ba2;
      transition: color 0.3s ease-in-out; }
    .input.input-dark-grey:focus:-ms-input-placeholder {
      color: #e0e1e3;
      color: rgba(150, 155, 162, 0.3); }
    .input.input-dark-grey.error, .input.input-dark-grey.error:focus {
      border: 2px solid #ef3535; }
  .input.confirm {
    display: none; }
  .input.invalid {
    border-color: #f34567; }

input.input {
  padding: 0 10px; }

textarea.input {
  padding: 9px 10px; }

.input-line {
  -webkit-transition: border 0.15s;
  transition: border 0.15s;
  color: white;
  font-size: 18px;
  border: none;
  border-bottom: 2px solid #bce9ff;
  border-radius: 0;
  background-color: transparent;
  box-sizing: border-box; }
  .input-line:focus {
    border-bottom: 2px solid white; }

.button {
  color: white;
  font-size: 20px;
  text-align: center;
  border: none;
  border-radius: 5px;
  height: 50px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  -webkit-transition: color 0.15s ease-in, background-color 0.15s ease-in;
  transition: color 0.15s ease-in, background-color 0.15s ease-in; }
  .button.button-small {
    font-size: 17px;
    height: 39px; }
  .button.button-medium {
    font-size: 18px;
    height: 44px; }
  .button.button-white {
    color: #339fd6;
    border: 2px solid white;
    background-color: white; }
    .button.button-white:hover {
      color: white; }
    .button.button-white.button-processing {
      background-color: transparent; }
  .button.button-blue {
    color: white;
    border: 2px solid #339fd6;
    background-color: #339fd6; }
    .button.button-blue:hover {
      color: white; }
    .button.button-blue.button-processing {
      background-color: #339fd6; }
  .button.button-blue-white {
    color: white;
    border: 2px solid #339fd6;
    background-color: #339fd6; }
    .button.button-blue-white:hover {
      color: white;
      border: 2px solid #339fd6; }
    .button.button-blue-white.button-processing {
      background-color: #339fd6; }
  .button.button-pink {
    color: white;
    border: 2px solid #f34567;
    background-color: #f34567; }
    .button.button-pink:hover {
      color: white; }
  .button.button-pinked {
    color: white;
    border: 2px solid #f34567;
    background-color: #f34567; }
    .button.button-pinked:hover {
      color: #f34567; }
  .button.button-theme-demo {
    color: white;
    border: 2px solid #339fd6;
    background-color: #339fd6; }
    .button.button-theme-demo:hover {
      color: #339fd6; }
  .button:hover {
    background-color: transparent; }
  .button.button-processing .button-text {
    opacity: 0; }
  .button.button-processing .spinner {
    opacity: 1; }
  .button .button-text {
    -webkit-transition: opacity 0.35s ease-in;
    transition: opacity 0.35s ease-in; }
  .button .spinner {
    -webkit-transition: opacity 0.35s ease-in;
    transition: opacity 0.35s ease-in;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent url(../images/img-spinner.svg?81) no-repeat center center; }

a.button {
  line-height: 49px; }
  a.button.button-medium {
    line-height: 40px; }
  a.button.button-small {
    line-height: 36px; }

.overlay-button {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  fill: white;
  display: block;
  opacity: 0;
  position: absolute;
  z-index: 105;
  cursor: pointer; }
  .overlay-button:hover {
    opacity: 0; }
  .overlay-button.visible {
    visibility: visible; }
  .overlay-button.active {
    opacity: 0.6; }
    .overlay-button.active:hover {
      opacity: 1; }

@media screen and (min-width: 1058px) {
  .button {
    padding-right: 23px;
    padding-left: 23px; } }
@media screen and (max-width: 1057px) {
  .button {
    padding-right: 18px;
    padding-left: 18px; } }
@media screen and (max-width: 767px) {
  .button {
    font-size: 18px;
    font-weight: 500;
    border-radius: 3px; }

  a.button {
    line-height: 41px;
    height: 42px; }

  input.button {
    padding-top: 2px;
    height: 40px; }

  .spinner {
    border-radius: 3px; } }
.client-section {
  text-align: center;
  background-color: white; }

.clients .client .shape-svg {
  fill: #c1cccf;
  margin: 0 auto;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  position: relative; }
.clients a.client .shape-svg,
.clients a.client .path {
  -webkit-transition: fill 0.35s ease-in-out;
  transition: fill 0.35s ease-in-out; }
.clients a.client:hover .shape-svg {
  fill: #505459; }
.clients a.client.campaign-monitor .front {
  fill: #d7dee0; }
.clients a.client.campaign-monitor .back {
  fill: #c1cccf; }
.clients a.client.campaign-monitor:hover .front {
  fill: #8f9295; }
.clients a.client.campaign-monitor:hover .back {
  fill: #505459; }
@media screen and (min-width: 768px) {
  .clients .alienware .shape-svg {
    width: 59px; }
  .clients .awdg .shape-svg {
    width: 81px; }
  .clients .criterion .shape-svg {
    width: 67px; }
  .clients .campaign-monitor .shape-svg {
    width: 80px; }
  .clients .fox-news .shape-svg {
    width: 98px; }
  .clients .lil-critters .shape-svg {
    width: 129px; }
  .clients .marvel .shape-svg {
    width: 109px; }
  .clients .mubi .shape-svg {
    width: 105px; }
  .clients .nyu-horizontal .shape-svg {
    width: 113px; }
  .clients .nyu-vertical .shape-svg {
    width: 47px;
    top: -11px; }
  .clients .rypple .shape-svg {
    width: 119px;
    top: 2px; }
  .clients .screenr .shape-svg {
    width: 123px; }
  .clients .tapulous .shape-svg {
    width: 89px; }
  .clients .tumblr .shape-svg {
    width: 142px; }
  .clients .tapulous .shape-svg {
    top: -11px;
    width: 102px; }
  .clients .tumblr-small .shape-svg {
    width: 113px;
    top: -3px; } }
@media screen and (max-width: 767px) {
  .clients .alienware .shape-svg {
    width: 39px; }
  .clients .awdg .shape-svg {
    width: 52px; }
  .clients .criterion .shape-svg {
    width: 42px; }
  .clients .campaign-monitor .shape-svg {
    width: 48px; }
  .clients .fox-news .shape-svg {
    width: 63px; }
  .clients .lil-critters .shape-svg {
    width: 90px; }
  .clients .marvel .shape-svg {
    width: 77px; }
  .clients .mubi .shape-svg {
    width: 79px; }
  .clients .nyu-horizontal .shape-svg {
    width: 91px; }
  .clients .nyu-vertical .shape-svg {
    top: -11px;
    width: 37px; }
  .clients .rypple .shape-svg {
    width: 82px; }
  .clients .screenr .shape-svg {
    width: 88px; }
  .clients .tapulous .shape-svg {
    top: -11px;
    width: 89px; }
  .clients .tumblr .shape-svg,
  .clients .tumblr-small .shape-svg {
    width: 116px; } }

@media screen and (max-width: 1057px) {
  .home-page header .logo .shape-logo {
    fill: white; }
  .home-page .break {
    display: block; } }
@media screen and (max-width: 767px) {
  .home-page .break {
    display: inline; }
  .home-page footer .container {
    padding: 0; } }
.home-page .page .hero {
  height: 1017px;
  overflow: hidden;
  position: relative;
  background-image: url(../images/img-home-foursquare-hero.jpg);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: #222429; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
    .home-page .page .hero {
      background-image: url(../images/img-home-foursquare-hero@2x.jpg);
      background-size: 1038px auto; } }
  .home-page .page .hero .container {
    padding-top: 88px;
    position: relative;
    z-index: 9; }
    .home-page .page .hero .container .iphone-screen {
      position: absolute;
      top: 562px;
      left: 227px;
      width: 163px;
      height: 289px; }
    .home-page .page .hero .container h1,
    .home-page .page .hero .container a {
      color: white; }
    .home-page .page .hero .container h1 {
      line-height: 1.2;
      font-weight: 300; }
    .home-page .page .hero .container .button {
      margin-top: 42px;
      line-height: 45px; }
      .home-page .page .hero .container .button.button-blue:hover {
        color: #fff !important; }
    .home-page .page .hero .container .mobile-device {
      display: none; }
.home-page .page .video-wrap,
.home-page .page .video-overlay,
.home-page .page .video-container video {
  border-radius: 5px 5px 0 0; }
.home-page .page .video-wrap,
.home-page .page .video-overlay {
  width: 1038px;
  height: 584px;
  position: absolute;
  top: 0;
  left: 0; }
.home-page .page .video-wrap {
  z-index: 5;
  background-color: #252a2d; }
.home-page .page .video-overlay {
  z-index: 8;
  background-color: rgba(0, 0, 0, 0.5); }
.home-page .page .video-container {
  -webkit-transition: opacity 900ms ease;
  transition: opacity 900ms ease;
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  visibility: hidden; }
  .home-page .page .video-container.active {
    opacity: 1;
    z-index: 6;
    visibility: visible; }
  .home-page .page .video-container video {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 7; }
@media screen and (min-width: 1058px) and (max-width: 1058px) {
  .home-page .page {
    background: #222429; }
    .home-page .page .hero {
      background: none;
      height: 800px; }
      .home-page .page .hero .container h1 {
        font-size: 35px;
        line-height: 1.2em; }
        .home-page .page .hero .container h1 a {
          display: block;
          width: 320px;
          margin: 0 auto; }
    .home-page .page .video-wrap {
      display: none; } }
@media screen and (max-width: 1057px) {
  .home-page .page {
    background: #222429; }
    .home-page .page .hero {
      background-image: url(../images/img-hero-shelf.jpg);
      background-repeat: no-repeat;
      background-repeat: no-repeat;
      background-position: 0 730px;
      height: 860px; } }
    @media screen and (max-width: 1057px) and (-webkit-min-device-pixel-ratio: 1.3), screen and (max-width: 1057px) and (min-resolution: 125dpi), screen and (max-width: 1057px) and (min-resolution: 1.3dppx) {
      .home-page .page .hero {
        background-image: url(../images/img-hero-shelf@2x.jpg);
        background-size: 1300px auto; } }
@media screen and (max-width: 1057px) {
      .home-page .page .hero .container h1 {
        font-size: 36px;
        line-height: 1.2em;
        padding: 0 97px; }
        .home-page .page .hero .container h1 span.responsive-large {
          display: block;
          font-size: 41px;
          margin-bottom: 10px; }
      .home-page .page .hero .mobile-device {
        display: block;
        width: 428px;
        height: 357px;
        background-image: url(../images/img-hero-devices.png);
        background-repeat: no-repeat;
        margin: 0 auto;
        position: relative;
        left: 19px;
        bottom: -85px; } }
      @media screen and (max-width: 1057px) and (-webkit-min-device-pixel-ratio: 1.3), screen and (max-width: 1057px) and (min-resolution: 125dpi), screen and (max-width: 1057px) and (min-resolution: 1.3dppx) {
        .home-page .page .hero .mobile-device {
          background-image: url(../images/img-hero-devices@2x.png);
          background-size: 428px auto; } }
@media screen and (max-width: 1057px) {
    .home-page .page .video-wrap {
      display: none; } }
@media screen and (min-width: 768px) and (max-width: 1057px) {
  .home-page .page {
    padding: 120px 0 40px 0;
    height: auto; } }
@media screen and (min-width: 768px) and (max-width: 848px) {
  .home-page .page .hero .mobile-device {
    bottom: -55px; } }
@media screen and (max-width: 767px) {
  .home-page .page {
    padding: 130px 0 0 0;
    margin-bottom: 0;
    height: auto; }
    .home-page .page .hero {
      height: 920px;
      background-position: 0 770px; }
      .home-page .page .hero .container {
        padding: 0; }
        .home-page .page .hero .container h1 {
          padding: 0 30px;
          font-size: 22px; }
          .home-page .page .hero .container h1 span.responsive-large {
            display: block;
            font-size: 30px;
            margin-bottom: 15px; }
        .home-page .page .hero .container a.button {
          height: 100%; }
      .home-page .page .hero .mobile-device {
        display: block;
        width: 332px;
        height: 566px;
        margin: 0 auto;
        position: relative;
        left: 19px;
        bottom: -43px;
        background-image: url(../images/img-hero-mobile.png);
        background-repeat: no-repeat; } }
      @media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.3), screen and (max-width: 767px) and (min-resolution: 125dpi), screen and (max-width: 767px) and (min-resolution: 1.3dppx) {
        .home-page .page .hero .mobile-device {
          background-image: url(../images/img-hero-mobile@2x.png);
          background-size: 332px auto; } }
@media screen and (max-width: 767px) {
    .home-page .page .sub-break {
      display: inline; }
    .home-page .page footer {
      padding: 30px;
      background: #252a2d;
      border-top: 1px solid #2f3030; } }
@media screen and (min-width: 508px) and (max-width: 767px) {
  .home-page .page .hero {
    height: 920px;
    background-position: 0 760px; }
    .home-page .page .hero .mobile-device {
      display: block;
      width: 332px;
      height: 566px;
      margin: 0 auto;
      position: relative;
      left: 19px;
      bottom: -45px;
      background-image: url(../images/img-hero-mobile.png);
      background-repeat: no-repeat; } }
    @media screen and (min-width: 508px) and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.3), screen and (min-width: 508px) and (max-width: 767px) and (min-resolution: 125dpi), screen and (min-width: 508px) and (max-width: 767px) and (min-resolution: 1.3dppx) {
      .home-page .page .hero .mobile-device {
        background-image: url(../images/img-hero-mobile@2x.png);
        background-size: 332px auto; } }

.home-page .client-section {
  padding: 0; }
  .home-page .client-section .container .heading {
    margin-bottom: 55px; }
  .home-page .client-section .container h2 {
    color: #2f3030; }
  .home-page .client-section .container .clients {
    width: 918px;
    margin: 0 auto; }
    .home-page .client-section .container .clients .client {
      float: left; }
      .home-page .client-section .container .clients .client.articulate {
        width: 302px;
        height: 240px;
        border-bottom: 1px solid #d6dcde; }
        .home-page .client-section .container .clients .client.articulate a {
          background-image: url(../images/img-logo-home-articulate.png);
          background-repeat: no-repeat;
          background-position: 0 0;
          width: 73px;
          height: 84px;
          margin-top: 73px; }
          @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
            .home-page .client-section .container .clients .client.articulate a {
              background-image: url(../images/img-logo-home-articulate@2x.png);
              background-size: 73px auto; } }
      .home-page .client-section .container .clients .client.foursquare {
        width: 312px;
        height: 240px;
        border-left: 1px solid #d6dcde;
        border-right: 1px solid #d6dcde;
        border-bottom: 1px solid #d6dcde; }
        .home-page .client-section .container .clients .client.foursquare a {
          background-image: url(../images/img-logo-home-foursquare.png);
          background-repeat: no-repeat;
          background-position: 0 0;
          width: 76px;
          height: 105px;
          margin-top: 62px; }
          @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
            .home-page .client-section .container .clients .client.foursquare a {
              background-image: url(../images/img-logo-home-foursquare@2x.png);
              background-size: 76px auto; } }
      .home-page .client-section .container .clients .client.mailchimp {
        width: 302px;
        height: 240px;
        border-bottom: 1px solid #d6dcde; }
        .home-page .client-section .container .clients .client.mailchimp a {
          background-image: url(../images/img-logo-home-mailchimp.png);
          background-repeat: no-repeat;
          background-position: 0 0;
          width: 204px;
          height: 50px;
          margin-top: 90px; }
          @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
            .home-page .client-section .container .clients .client.mailchimp a {
              background-image: url(../images/img-logo-home-mailchimp@2x.png);
              background-size: 204px auto; } }
      .home-page .client-section .container .clients .client.netpure {
        width: 302px;
        height: 240px; }
        .home-page .client-section .container .clients .client.netpure a {
          background-image: url(../images/img-logo-home-netpure.png);
          background-repeat: no-repeat;
          background-position: 0 0;
          width: 170px;
          height: 77px;
          margin-top: 78px; }
          @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
            .home-page .client-section .container .clients .client.netpure a {
              background-image: url(../images/img-logo-home-netpure@2x.png);
              background-size: 170px auto; } }
      .home-page .client-section .container .clients .client.tumblr {
        width: 312px;
        height: 240px;
        border-left: 1px solid #d6dcde;
        border-right: 1px solid #d6dcde; }
        .home-page .client-section .container .clients .client.tumblr a {
          background-image: url(../images/img-logo-home-tumblr.png);
          background-repeat: no-repeat;
          background-position: 0 0;
          width: 174px;
          height: 37px;
          margin-top: 106px; }
          @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
            .home-page .client-section .container .clients .client.tumblr a {
              background-image: url(../images/img-logo-home-tumblr@2x.png);
              background-size: 174px auto; } }
      .home-page .client-section .container .clients .client.wellsfargo {
        width: 302px;
        height: 240px; }
        .home-page .client-section .container .clients .client.wellsfargo a {
          background-image: url(../images/img-logo-home-wells.png);
          background-repeat: no-repeat;
          background-position: 0 0;
          width: 106px;
          height: 106px;
          margin-top: 72px; }
          @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
            .home-page .client-section .container .clients .client.wellsfargo a {
              background-image: url(../images/img-logo-home-wells@2x.png);
              background-size: 106px auto; } }
      .home-page .client-section .container .clients .client a {
        display: block;
        margin: 0 auto;
        vertical-align: middle; }
        .home-page .client-section .container .clients .client a span {
          display: none; }

@media screen and (min-width: 1058px) {
  .home-page .client-section .container {
    padding: 72px 0 79px 0; } }
@media screen and (max-width: 1057px) {
  .home-page .client-section .heading {
    padding: 0 50px; } }
@media screen and (min-width: 768px) and (max-width: 1057px) {
  .home-page .client-section {
    padding: 72px 0 79px 0; }
    .home-page .client-section .heading {
      padding: 0 25px; }
    .home-page .client-section .container .clients {
      width: 601px;
      margin: 0 auto; }
      .home-page .client-section .container .clients .client.articulate {
        width: 300px; }
      .home-page .client-section .container .clients .client.foursquare {
        width: 300px;
        border-right: none; }
      .home-page .client-section .container .clients .client.mailchimp {
        width: 300px; }
      .home-page .client-section .container .clients .client.netpure {
        width: 300px;
        border-left: 1px solid #d6dcde;
        border-bottom: 1px solid #d6dcde; }
      .home-page .client-section .container .clients .client.tumblr {
        width: 300px;
        border-left: none; }
      .home-page .client-section .container .clients .client.wellsfargo {
        width: 300px; } }
@media screen and (max-width: 767px) {
  .home-page .client-section {
    padding-top: 45px; }
    .home-page .client-section .container .heading {
      margin: 0 0 25px 0; }
      .home-page .client-section .container .heading h2 {
        margin-bottom: 15px;
        padding: 0 15px;
        font-size: 30px; }
      .home-page .client-section .container .heading p {
        font-size: 20px; }
    .home-page .client-section .container .clients {
      width: 300px;
      margin: 0 auto; }
      .home-page .client-section .container .clients .client.articulate {
        width: 300px; }
      .home-page .client-section .container .clients .client.foursquare {
        width: 300px;
        border-right: none;
        border-left: none; }
      .home-page .client-section .container .clients .client.mailchimp {
        width: 300px; }
      .home-page .client-section .container .clients .client.netpure {
        width: 300px;
        border-bottom: 1px solid #d6dcde; }
      .home-page .client-section .container .clients .client.trendabl {
        width: 300px;
        border-left: none;
        border-bottom: 1px solid #d6dcde; }
      .home-page .client-section .container .clients .client.tumblr {
        width: 300px;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #d6dcde; }
      .home-page .client-section .container .clients .client.wellsfargo {
        width: 300px; } }
.home-quotes {
  position: relative; }
  .home-quotes .quote {
    width: 100%;
    height: 506px;
    position: relative; }
    .home-quotes .quote .author-pic {
      position: absolute; }
    .home-quotes .quote .mobile.author-pic {
      display: none; }
    .home-quotes .quote h3 {
      color: white;
      font-style: italic;
      font-weight: 300;
      font-size: 34px;
      line-height: 1.3;
      margin-bottom: 47px; }
    .home-quotes .quote .author .title {
      font-size: 16px;
      font-weight: 300;
      text-transform: uppercase;
      position: relative; }
    .home-quotes .quote.quote-walter .quote-body {
      padding: 80px 0 0 84px;
      width: 520px; }
    .home-quotes .quote.quote-walter .author {
      color: white; }
      .home-quotes .quote.quote-walter .author .title {
        top: 0; }
    .home-quotes .quote.quote-walter .mailchimp-logo {
      width: 126px;
      height: 32px;
      display: inline-block;
      position: relative;
      bottom: 4px;
      text-indent: -12000px;
      background: url(../images/shape-logo-mailchimp.svg?81) no-repeat; }
    .home-quotes .quote.quote-walter .author-pic {
      width: 339px;
      height: 531px;
      right: 53px;
      bottom: 0; }
  @media screen and (min-width: 768px) and (max-width: 1057px) {
    .home-quotes .quote {
      height: 380px; }
      .home-quotes .quote .sub-break {
        display: inline; }
      .home-quotes .quote.quote-walter .quote-body {
        padding: 50px 0 0 100px;
        width: 55%; }
        .home-quotes .quote.quote-walter .quote-body h3 {
          font-size: 26px;
          padding-right: 30px; }
        .home-quotes .quote.quote-walter .quote-body h4 {
          font-size: 20px; }
      .home-quotes .quote.quote-walter .author-pic {
        width: 255px;
        height: 400px;
        right: 25px; }
      .home-quotes .quote.quote-walter .title {
        font-size: 13px; }
      .home-quotes .quote.quote-walter .mailchimp-logo {
        bottom: 8px; } }
  @media screen and (min-width: 886px) and (max-width: 1057px) {
    .home-quotes .quote {
      height: 380px; }
      .home-quotes .quote .sub-break {
        display: inline; }
      .home-quotes .quote.quote-walter .quote-body {
        padding: 60px 0 0 100px;
        width: 55%; }
        .home-quotes .quote.quote-walter .quote-body h3 {
          font-size: 30px;
          padding: 0;
          margin-bottom: 40px; }
        .home-quotes .quote.quote-walter .quote-body h4 {
          font-size: 20px; }
      .home-quotes .quote.quote-walter .author-pic {
        width: 255px;
        height: 400px;
        right: 35px; }
      .home-quotes .quote.quote-walter .title {
        font-size: 13px; }
      .home-quotes .quote.quote-walter .mailchimp-logo {
        bottom: 8px; } }
  @media screen and (max-width: 767px) {
    .home-quotes .quote {
      height: auto;
      overflow: hidden; }
      .home-quotes .quote .desktop.author-pic {
        display: none; }
      .home-quotes .quote .mobile.author-pic {
        display: block; }
      .home-quotes .quote h3 {
        font-size: 30px;
        line-height: 1.4;
        margin-bottom: 25px;
        padding: 20px 0; }
      .home-quotes .quote .author h4 {
        font-size: 22px;
        font-weight: 400;
        margin-bottom: 0; }
      .home-quotes .quote .author .title {
        font-size: 12px;
        line-height: 1.1; }
      .home-quotes .quote.quote-walter .quote-body {
        padding: 34px 24px 54px 24px;
        width: auto; }
      .home-quotes .quote.quote-walter .mailchimp-logo {
        width: 100%;
        height: 100%;
        display: inline;
        position: relative;
        bottom: 0;
        text-indent: none;
        background: none; }
      .home-quotes .quote.quote-walter .author-pic {
        display: none; } }

.home-footer {
  padding: 68px 60px 0 60px;
  background-color: #252a2d; }
  @media screen and (min-width: 1058px) {
    .home-footer {
      border-radius: 0 0 0 0; }
      .home-footer .container {
        padding-bottom: 52px;
        border-bottom: 1px solid #43494f; }
      .home-footer .blog-column {
        float: left;
        padding-left: 24px; }
      .home-footer .newsletter-column {
        float: right;
        padding-right: 24px; } }
  .home-footer .column {
    width: 366px; }
    .home-footer .column .column-heading {
      color: #339fd6;
      margin-bottom: 17px; }
    .home-footer .column h4 {
      color: white;
      line-height: 1.2;
      margin-bottom: 16px; }
    .home-footer .column h4 a {
      color: white; }
      .home-footer .column h4 a:hover {
        color: #339fd6; }
    .home-footer .column p {
      color: #969ba2;
      font-size: 15px;
      line-height: 1.55; }
      .home-footer .column p a {
        font-weight: 600; }
        .home-footer .column p a:hover {
          color: white; }
  .home-footer .subscription-form {
    padding-top: 23px;
    position: relative; }
    .home-footer .subscription-form .field {
      float: left;
      width: 235px; }
      .home-footer .subscription-form .field .input {
        padding: 0 12px;
        width: 100%;
        height: 39px; }
    .home-footer .subscription-form .submit {
      float: right; }
      .home-footer .subscription-form .submit button {
        padding-right: 18px;
        padding-left: 18px; }
  .home-footer .subscription-message {
    padding-top: 27px;
    display: none; }
    .home-footer .subscription-message p {
      color: white;
      padding-top: 5px;
      display: block;
      position: relative; }
  .home-footer .subscription-already-subscribed p,
  .home-footer .subscription-success p {
    padding-left: 41px; }
    .home-footer .subscription-already-subscribed p:before,
    .home-footer .subscription-success p:before {
      content: "";
      width: 31px;
      height: 31px;
      position: absolute;
      top: 0;
      left: 0;
      background: url(../images/shape-check.svg) no-repeat; }
  @media screen and (min-width: 1058px) and (max-width: 1058px) {
    .home-footer {
      padding: 68px 77px 74px 77px; } }
  @media screen and (max-width: 1057px) {
    .home-footer .column {
      width: 100%;
      float: none; } }
  @media screen and (min-width: 768px) and (max-width: 1057px) {
    .home-footer {
      padding: 48px 100px 54px 100px; }
      .home-footer .newsletter-column {
        padding-top: 40px; }
      .home-footer .subscription-form {
        padding: 23px 131px 0 0; }
        .home-footer .subscription-form .field {
          width: 100%; }
        .home-footer .subscription-form .submit {
          position: absolute;
          top: 23px;
          right: 0; } }
  @media screen and (max-width: 767px) {
    .home-footer {
      padding: 28px 24px 34px 24px; }
      .home-footer .column p {
        color: #969ba2;
        font-size: 17px;
        line-height: 1.5; }
      .home-footer .column .column-heading {
        margin-top: 17px;
        font-size: 20px;
        margin-top: 20px;
        font-weight: 500; }
      .home-footer .column h4 {
        line-height: 1.4;
        font-size: 24px;
        margin-bottom: 16px; }
        .home-footer .column h4 a {
          font-size: 24px;
          line-height: 1.4; }
      .home-footer .newsletter-column {
        padding: 30px 0 0 0; }
      .home-footer .subscription-form {
        padding: 23px 0 0 0; }
        .home-footer .subscription-form .field,
        .home-footer .subscription-form .submit {
          width: 100%;
          float: none; }
        .home-footer .subscription-form .field {
          margin: 0 0 10px 0; }
          .home-footer .subscription-form .field .input {
            padding: 0 12px;
            margin-bottom: 20px;
            width: 100%;
            font-size: 17px;
            height: 37px; }
        .home-footer .subscription-form .submit .button {
          width: 100%; } }

.company-page .hero {
  background-color: white; }
  .company-page .hero .container {
    padding: 89px 0 80px 0; }
    .company-page .hero .container h2 {
      color: #2f3030; }
  @media screen and (min-width: 1058px) {
    .company-page .hero {
      border-radius: 5px 5px 0 0; }
      .company-page .hero h2 {
        line-height: 1.25;
        font-size: 40px; } }
  @media screen and (min-width: 768px) and (max-width: 1057px) {
    .company-page .hero .container {
      padding: 180px 55px 37px 55px; }
    .company-page .hero h2 {
      line-height: 1.25em; } }
  @media screen and (max-width: 767px) {
    .company-page .hero .container {
      padding: 130px 35px 37px 35px; }
      .company-page .hero .container h2 {
        line-height: 1.25em;
        font-size: 28px; } }

.team {
  background-color: white; }
  .team .royaler,
  .team .hiring {
    text-align: center;
    width: 346px;
    float: left;
    position: relative;
    background-color: #252a2d;
    box-sizing: border-box; }
  .team .royaler {
    margin: 0;
    height: 346px;
    overflow: hidden; }
    .team .royaler img {
      display: block;
      min-height: 100%;
      position: relative;
      z-index: 5;
      box-sizing: border-box; }
    .team .royaler figcaption {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 6;
      box-sizing: border-box; }
    .team .royaler .name,
    .team .royaler .title {
      color: white; }
    .team .royaler .name {
      font-size: 25px;
      line-height: 1;
      margin-bottom: 4px; }
    .team .royaler .title {
      font-size: 17px;
      display: block; }
    @media screen and (min-width: 1058px) {
      .team .royaler img {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05);
        -webkit-transition: -webkit-transform 0.35s ease-in-out;
        transition: transform 0.35s ease-in-out; }
      .team .royaler figcaption {
        -webkit-transition: opacity 0.35s ease;
        transition: opacity 0.35s ease;
        padding: 46px 40px 0 40px;
        opacity: 0;
        background-color: #339fd6; }
      .team .royaler:hover img {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1); }
      .team .royaler:hover figcaption {
        opacity: 0.95; }
      .team .royaler .title {
        margin: 0 0 18px 0; }
      .team .royaler p {
        color: #bce9ff;
        line-height: 1.4; }
      .team .royaler .links {
        padding-top: 26px; }
        .team .royaler .links a {
          margin: 0 2px;
          display: inline-block;
          position: relative; }
          .team .royaler .links a span {
            display: none; }
        .team .royaler .links .icon-dribbble {
          width: 20px;
          height: 20px;
          background-position: 0 0; }
        .team .royaler .links .icon-twitter {
          width: 24px;
          height: 20px;
          background-position: -30px 0; }
        .team .royaler .links .icon-github {
          width: 20px;
          height: 20px;
          background-position: -60px 0; } }
    @media screen and (max-width: 1058px) {
      .team .royaler figcaption {
        padding-top: 230px;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(35%, transparent), color-stop(100%, black));
        background: -webkit-linear-gradient(top, transparent 0%, transparent 35%, black 100%);
        background: linear-gradient(to bottom, transparent 0%, transparent 35%, black 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); }
      .team .royaler p,
      .team .royaler .links {
        display: none; } }
  .team .hiring {
    padding-top: 238px;
    height: 346px;
    display: block;
    cursor: pointer; }
    .team .hiring .shape-hire {
      fill: #454b50;
      margin-left: -71px;
      width: 142px;
      height: 142px;
      position: absolute;
      top: 81px;
      left: 50%;
      -webkit-transition: fill 0.15s ease-in-out;
      transition: fill 0.15s ease-in-out; }
    .team .hiring:hover .shape-hire {
      fill: white; }
    .team .hiring h4 {
      color: white;
      line-height: 1;
      margin: 0 0 4px 0; }
    .team .hiring .email {
      color: #339fd6;
      font-size: 17px;
      font-weight: 600; }
  @media screen and (min-width: 1058px) and (max-width: 1058px) {
    .team .royaler,
    .team .hiring {
      width: 33.3333333333%;
      height: 341px; } }
  @media screen and (max-width: 1057px) {
    .team .row {
      margin: 0 auto; }
    .team .royaler,
    .team .hiring {
      width: 320px;
      height: 320px; }
    .team .hiring {
      padding-top: 208px; }
      .team .hiring .shape-hire {
        top: 50px; } }
  @media screen and (min-width: 768px) and (max-width: 1057px) {
    .team .row {
      width: 640px; } }
  @media screen and (max-width: 649px) {
    .team .royaler,
    .team .hiring {
      margin: 0 auto;
      float: none; } }
  @media screen and (min-width: 649px) and (max-width: 768px) {
    .team .row {
      width: 640px; } }

.world-wide .container {
  padding: 0 0 80px 0; }
.world-wide .heading {
  padding: 71px 150px 62px 150px; }
  .world-wide .heading h2 {
    color: #2f3030; }
.world-wide .map {
  margin: 0 auto;
  width: 933px;
  height: 454px;
  position: relative;
  background-image: url(../images/img-map.png);
  background-repeat: no-repeat; }
  @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
    .world-wide .map {
      background-image: url(../images/img-map@2x.png);
      background-size: 933px auto; } }
  .world-wide .map .map-point {
    width: 11px;
    height: 22px;
    position: absolute; }
    .world-wide .map .map-point .shape-svg {
      fill: #ef3535;
      width: 11px;
      height: 22px;
      display: block; }
    .world-wide .map .map-point.atlanta {
      top: 120px;
      left: 155px; }
    .world-wide .map .map-point.florida {
      top: 136px;
      left: 167px; }
    .world-wide .map .map-point.england {
      top: 54px;
      left: 403px; }
    .world-wide .map .map-point.norway {
      top: 33px;
      left: 433px; }
.world-wide .mobile-map {
  width: 100%;
  display: none; }
  .world-wide .mobile-map img {
    width: 100%; }
@media screen and (min-width: 768px) and (max-width: 1057px) {
  .world-wide .heading {
    padding: 51px 80px 62px 80px; }
  .world-wide .map {
    display: none; }
  .world-wide .mobile-map {
    display: block; } }
@media screen and (max-width: 767px) {
  .world-wide h2 {
    font-size: 28px; }
  .world-wide .container {
    padding: 0 0 40px 0; }
  .world-wide .heading {
    padding: 34px 20px 29px 20px; }
  .world-wide .map {
    display: none; }
  .world-wide .mobile-map {
    display: block; } }

.social-bunch .heading {
  padding: 70px 0 63px 0;
  background-color: #252a2d; }
  .social-bunch .heading h2 {
    color: white; }
.social-bunch .container {
  height: 672px;
  position: relative; }
.social-bunch .social-col {
  display: block;
  position: absolute; }
@media screen and (max-width: 1057px) {
  .social-bunch .container {
    height: auto; }
  .social-bunch .heading,
  .social-bunch .instagram-feed {
    display: none; } }

.twitter-feed {
  overflow: hidden; }
  .twitter-feed .social-col {
    padding: 79px 0 0 0;
    text-align: center;
    top: 0;
    background-color: #339fd6;
    box-sizing: border-box; }
  .twitter-feed .twitter-link,
  .twitter-feed .twitter-link .shape-twitter {
    width: 59px;
    height: 49px; }
  .twitter-feed .twitter-link {
    margin: 0 auto 28px auto;
    display: block; }
    .twitter-feed .twitter-link .shape-twitter {
      fill: white;
      margin: 0 auto;
      display: block; }
  .twitter-feed p {
    color: #bce9ff;
    font-size: 18px;
    line-height: 1.35;
    padding: 0 30px; }
  .twitter-feed a {
    color: white;
    font-weight: 600; }
    .twitter-feed a:hover {
      color: #bce9ff; }
  @media screen and (min-width: 1058px) {
    .twitter-feed .social-col {
      width: 346px;
      height: 336px;
      right: 0; } }
  @media screen and (min-width: 1058px) and (max-width: 1058px) {
    .twitter-feed .social-col {
      width: 33.5%;
      height: 336px;
      right: 0;
      z-index: 11; } }
  @media screen and (max-width: 1057px) {
    .twitter-feed .social-col {
      padding: 70px;
      width: 100%;
      height: auto;
      position: relative;
      top: 0;
      left: 0; }
    .twitter-feed p {
      font-size: 24px; } }
  @media screen and (max-width: 767px) {
    .twitter-feed p {
      font-size: 15px; }
    .twitter-feed .social-col {
      padding: 40px 0; } }

.instagram-feed {
  border-radius: 0;
  height: 672px;
  overflow: hidden;
  background-color: #252a2d; }
  .instagram-feed .social-col {
    -webkit-transition: all 0.35s ease-in;
    transition: all 0.35s ease-in;
    overflow: hidden;
    opacity: 0;
    box-sizing: border-box; }
    .instagram-feed .social-col.active {
      opacity: 1; }
    .instagram-feed .social-col img {
      width: 100%;
      height: 100%;
      min-height: 100%;
      display: block;
      position: relative;
      z-index: 7;
      box-sizing: border-box; }
  @media screen and (min-width: 1058px) {
    .instagram-feed .social-col {
      width: 346px;
      height: 336px; }
      .instagram-feed .social-col.photo-1 {
        top: 0;
        left: 0; }
      .instagram-feed .social-col.photo-2 {
        top: 0;
        left: 346px; }
      .instagram-feed .social-col.photo-3 {
        border-radius: 0 0 0 5px;
        top: 336px;
        left: 0; }
        .instagram-feed .social-col.photo-3 .hover {
          border-radius: 0 0 0 5px; }
      .instagram-feed .social-col.photo-4 {
        top: 336px;
        left: 346px; }
      .instagram-feed .social-col.photo-5 {
        border-radius: 0 0 5px 0;
        top: 336px;
        left: 692px; }
        .instagram-feed .social-col.photo-5 .hover {
          border-radius: 0 0 5px 0; }
      .instagram-feed .social-col .hover {
        line-height: 336px;
        text-align: center;
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 8;
        opacity: 0;
        background-color: rgba(0, 0, 0, 0.73);
        -webkit-transition: opacity 0.35s ease;
        transition: opacity 0.35s ease; }
        .instagram-feed .social-col .hover span {
          display: block; }
        .instagram-feed .social-col .hover .hover-content {
          display: inline-block;
          vertical-align: middle; }
        .instagram-feed .social-col .hover .title {
          color: white;
          font-size: 20px;
          line-height: 1.3;
          padding: 0 30px; }
        .instagram-feed .social-col .hover .icon-instagram-likes {
          color: white;
          line-height: 52px;
          margin: 14px auto 0 auto;
          width: 56px;
          height: 52px;
          background-position: -90px 0; }
      .instagram-feed .social-col:hover .hover {
        opacity: 1; } }
  @media screen and (min-width: 1058px) and (max-width: 1058px) {
    .instagram-feed .social-col {
      width: 33.5%;
      height: 336px;
      z-index: 10; }
      .instagram-feed .social-col.photo-1 {
        top: 0;
        left: 0; }
      .instagram-feed .social-col.photo-2 {
        top: 0;
        left: 33.3333333333%; }
      .instagram-feed .social-col.photo-3 {
        top: 336px;
        left: 0; }
      .instagram-feed .social-col.photo-4 {
        top: 336px;
        left: 33.3333333333%; }
      .instagram-feed .social-col.photo-5 {
        top: 336px;
        right: 0; } }

.services-page .hero {
  height: 584px;
  background-color: #252a2d; }
  @media screen and (min-width: 1058px) {
    .services-page .hero {
      border-radius: 7px 7px 0 0; }
      .services-page .hero h1 {
        font-size: 40px; } }
  .services-page .hero .container {
    padding: 437px 0 51px 0;
    width: 1038px;
    position: relative; }
    .services-page .hero .container h1 {
      color: white;
      position: relative;
      z-index: 6; }
  .services-page .hero .services-slides {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5; }
    .services-page .hero .services-slides .slide {
      display: none; }
      .services-page .hero .services-slides .slide img {
        display: block; }
        @media screen and (min-width: 1058px) {
          .services-page .hero .services-slides .slide img {
            border-radius: 5px 5px 0 0; } }
@media screen and (max-width: 1057px) {
  .services-page header .logo .shape-logo {
    fill: #252a2d; }
  .services-page .hero {
    padding: 0 63px;
    height: auto;
    background: url(../images/hero-services.jpg) no-repeat 30% 60%; }
    .services-page .hero .services-slides {
      display: none; } }
@media screen and (min-width: 768px) and (max-width: 1057px) {
  .services-page .hero .container {
    padding: 240px 0 52px 0;
    width: 100%; } }
@media screen and (max-width: 767px) {
  .services-page header .logo .shape-logo {
    fill: white; }
  .services-page .hero {
    padding: 0 33px;
    height: auto;
    background: url(../videos/video-placeholder.jpg) no-repeat 30% 60%; }
    .services-page .hero h1 {
      font-size: 28px; }
    .services-page .hero .container {
      padding: 120px 0 32px 0;
      width: 100%; }
    .services-page .hero .services-slides {
      display: none; }
  .services-page .sub-heading {
    margin: 0 0 50px 0;
    padding: 0 0 18px 0; }
    .services-page .sub-heading h2 {
      font-size: 28px; } }

.responsive-services {
  color: white;
  height: 484px; }
  .responsive-services h2 {
    color: white; }
  .responsive-services .devices-desktop img,
  .responsive-services .devices-mobile img {
    margin: 0 auto;
    display: block; }
  .responsive-services .devices-desktop {
    padding: 80px 0 38px 0; }
    .responsive-services .devices-desktop img {
      width: 765px;
      height: 172px; }
  .responsive-services .devices-mobile {
    display: none; }
  @media screen and (max-width: 1057px) {
    .responsive-services {
      height: auto;
      background-position: 20% top; }
      .responsive-services .devices-desktop {
        display: none; }
      .responsive-services .devices-mobile {
        display: block; } }
  @media screen and (min-width: 768px) and (max-width: 1057px) {
    .responsive-services {
      padding: 70px 15px; }
      .responsive-services .devices-mobile {
        padding-bottom: 38px; }
      .responsive-services .heading {
        padding: 0 70px; }
      .responsive-services h2 {
        font-size: 34px;
        margin-bottom: 17px; } }
  @media screen and (max-width: 767px) {
    .responsive-services {
      padding: 40px 25px; }
      .responsive-services .devices-mobile {
        padding-bottom: 19px; } }

.mobile-love {
  color: #bce9ff;
  position: relative;
  background-color: #339fd6; }
  @media screen and (min-width: 1058px) {
    .mobile-love {
      border-radius: 0; } }
  .mobile-love .container {
    padding: 79px 0 90px 84px;
    width: 450px; }
    .mobile-love .container .heading {
      padding-bottom: 38px; }
      .mobile-love .container .heading h2 {
        color: white; }
  .mobile-love .iphone-img {
    background-image: url(../images/img-mobile.png);
    background-repeat: no-repeat;
    width: 370px;
    height: 552px;
    position: absolute;
    right: 84px;
    bottom: 0; }
    @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
      .mobile-love .iphone-img {
        background-image: url(../images/img-mobile@2x.png);
        background-size: 370px auto; } }
  @media screen and (max-width: 1057px) {
    .mobile-love .container {
      text-align: center;
      padding: 64px 70px;
      width: auto; }
      .mobile-love .container .heading {
        text-align: center;
        padding-bottom: 30px; }
    .mobile-love .iphone-img {
      display: none; } }
  @media screen and (min-width: 768px) and (max-width: 1057px) {
    .mobile-love .container {
      padding: 64px 30px; }
      .mobile-love .container .heading p {
        font-size: 20px;
        line-height: 1.3;
        padding: 0 40px; } }
  @media screen and (max-width: 767px) {
    .mobile-love .container {
      padding: 44px 25px; }
      .mobile-love .container .heading h2 {
        line-height: 1.2;
        margin: 0 0 12px 0;
        font-size: 28px; }
      .mobile-love .container .heading p {
        font-size: 20px;
        line-height: 1.4; }
      .mobile-love .container .button.button-white {
        color: #339fd6;
        border: 2px solid white;
        background-color: white;
        margin-bottom: 20px; } }

.service-group.design-services {
  padding: 44px 0 26px 0; }
.service-group.development-services {
  padding: 44px 0; }
.service-group .container {
  padding: 0 84px; }
  .service-group .container h2 {
    color: #2f3030; }
.service-group .service-col {
  margin-bottom: 49px;
  padding-left: 118px;
  width: 282px;
  float: left;
  position: relative; }
  .service-group .service-col h4 {
    color: #2f3030;
    font-size: 24px;
    margin-bottom: 4px; }
  .service-group .service-col p {
    font-size: 17px;
    line-height: 1.3; }
  .service-group .service-col .shape-svg {
    fill: #339fd6;
    display: block; }
  .service-group .service-col .shape-discovery.shape-svg {
    width: 73px;
    height: 69px; }
  .service-group .service-col .shape-interfaces.shape-svg {
    width: 68px;
    height: 68px; }
  .service-group .service-col .shape-marketing.shape-svg {
    width: 69px;
    height: 69px; }
  .service-group .service-col .shape-architecture.shape-svg {
    width: 72px;
    height: 68px; }
  .service-group .service-col .shape-copywriting.shape-svg {
    width: 68px;
    height: 68px; }
  .service-group .service-col .shape-branding.shape-svg {
    width: 72px;
    height: 72px; }
  .service-group .service-col .shape-platforms.shape-svg {
    width: 83px;
    height: 70px; }
  .service-group .service-col .shape-frameworks.shape-svg {
    width: 72px;
    height: 72px; }
  .service-group .service-col .shape-content-management.shape-svg {
    width: 72px;
    height: 69px; }
  .service-group .service-col .shape-ecommerce.shape-svg {
    width: 80px;
    height: 63px; }
  .service-group .service-col .shape-quality-assurance.shape-svg {
    width: 72px;
    height: 70px; }
.service-group .row .service-col:first-child {
  margin-right: 80px;
  padding-left: 108px; }
@media screen and (min-width: 1058px) and (max-width: 1058px) {
  .service-group .row .service-col:first-child {
    margin-right: 66px; } }
@media screen and (min-width: 768px) {
  .service-group .service-col .shape-svg {
    position: absolute; }
  .service-group .service-col .shape-discovery.shape-svg {
    top: 11px;
    left: 10px; }
  .service-group .service-col .shape-interfaces.shape-svg {
    top: 8px;
    left: 13px; }
  .service-group .service-col .shape-marketing.shape-svg {
    top: 11px;
    left: 10px; }
  .service-group .service-col .shape-architecture.shape-svg {
    top: 10px;
    left: 11px; }
  .service-group .service-col .shape-copywriting.shape-svg {
    top: 7px;
    left: 12px; }
  .service-group .service-col .shape-branding.shape-svg {
    top: 11px;
    left: 12px; }
  .service-group .service-col .shape-platforms.shape-svg {
    top: 13px;
    left: 0px; }
  .service-group .service-col .shape-frameworks.shape-svg {
    top: 10px;
    left: 11px; }
  .service-group .service-col .shape-content-management.shape-svg {
    top: 8px;
    left: 7px; }
  .service-group .service-col .shape-ecommerce.shape-svg {
    top: 12px;
    left: 7px; }
  .service-group .service-col .shape-quality-assurance.shape-svg {
    top: 8px;
    left: 6px; } }
@media screen and (min-width: 768px) and (max-width: 1057px) {
  .service-group .container {
    padding: 0 35px; }
  .service-group .service-col {
    margin-bottom: 34px;
    padding-left: 118px;
    width: 49%;
    box-sizing: border-box; }
    .service-group .service-col h4 {
      font-size: 20px;
      line-height: 1.2;
      margin-bottom: 10px; }
    .service-group .service-col p {
      font-size: 18px;
      line-height: 1.4;
      padding: 0 30px; }
  .service-group .row .service-col:first-child {
    margin-right: 2%;
    padding-left: 118px; } }
@media screen and (max-width: 767px) {
  .service-group.design-services {
    padding: 29px 0 4px 0; }
  .service-group.development-services {
    padding: 30px 0 4px 0; }
  .service-group .container {
    padding: 0 25px; }
  .service-group .service-col {
    text-align: center;
    margin-bototm: 34px;
    padding: 0 !important;
    width: 100%;
    float: none; }
    .service-group .service-col .shape-svg {
      margin: 0 auto 10px auto; }
    .service-group .service-col h4 {
      font-size: 20px;
      margin-bottom: 4px; }
    .service-group .service-col p {
      font-size: 15px;
      line-height: 1.2; } }

.work-grid {
  background-color: #252a2d; }
  @media screen and (min-width: 1058px) {
    .work-grid {
      border-radius: 5px 5px 0 0; } }
  @media screen and (min-width: 768px) and (max-width: 1057px) {
    .work-grid {
      padding-top: 182px; } }
  @media screen and (max-width: 767px) {
    .work-grid {
      padding-top: 130px; } }

.case-study {
  margin-bottom: 2px;
  width: 100%;
  height: 600px;
  position: relative;
  background-color: #373d42; }
  .case-study img {
    display: block; }
  .case-study .case-study-title {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: white;
    text-align: center;
    padding: 0 55px;
    position: absolute;
    top: 50%; }
    .case-study .case-study-title h2 {
      font-size: 40px;
      line-height: 45px; }
    .case-study .case-study-title span.divide {
      display: block;
      margin: 15px auto 20px auto;
      height: 1px;
      width: 70px;
      background: rgba(255, 255, 255, 0.5); }
    .case-study .case-study-title p {
      font-size: 19px;
      margin-bottom: 30px; }
  @media screen and (min-width: 1058px) {
    .case-study.netpure {
      border-radius: 5px 5px 0 0; }
      .case-study.netpure img {
        border-radius: 5px 5px 0 0; }
    .case-study .case-study-title {
      width: 280px; }
      .case-study .case-study-title.left-align {
        left: 30px; }
      .case-study .case-study-title.right-align {
        right: 30px; } }
  @media screen and (min-width: 768px) and (max-width: 1057px) {
    .case-study {
      height: auto; }
      .case-study .case-study-title {
        width: 280px; }
        .case-study .case-study-title.left-align {
          left: 30px; }
        .case-study .case-study-title.right-align {
          right: 30px; } }
  @media screen and (max-width: 767px) {
    .case-study {
      height: auto; }
      .case-study .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background-color: rgba(0, 0, 0, 0.6); }
      .case-study .case-study-title {
        padding: 0 35px; }
        .case-study .case-study-title span.divide {
          display: none; }
        .case-study .case-study-title h2 {
          font-size: 27px;
          margin-bottom: 5px;
          line-height: 1.2em; }
        .case-study .case-study-title p {
          font-size: 16px;
          line-height: 1.25em;
          margin-bottom: 15px; }
        .case-study .case-study-title .button.button-medium {
          font-size: 15px;
          line-height: 35px;
          height: 38px; } }
  @media screen and (min-width: 600px) and (max-width: 767px) {
    .case-study .case-study-title {
      margin-left: -200px;
      width: 400px;
      left: 50%; }
      .case-study .case-study-title h2 {
        font-size: 30px; }
      .case-study .case-study-title p {
        font-size: 18px;
        margin-bottom: 15px; } }

.work-page .client-section .heading {
  color: #737b84; }
  .work-page .client-section .heading h2 {
    color: #2f3030; }
.work-page .clients.grid {
  padding-top: 48px;
  padding-bottom: 29px; }
  .work-page .clients.grid .client {
    cursor: pointer; }
@media screen and (min-width: 1058px) {
  .work-page .client-section .container {
    padding: 73px 0 18px 0; }
  .work-page .clients.grid {
    padding-left: 60px; }
    .work-page .clients.grid .client {
      margin: 0 0 65px 47px;
      width: 198px;
      height: 90px;
      display: block;
      float: left; }
      .work-page .clients.grid .client:nth-child(4n+1) {
        margin: 0; } }
@media screen and (min-width: 768px) and (max-width: 1057px) {
  .work-page .client-section .container {
    padding: 53px 0 8px 0; }
  .work-page .client-section .break {
    display: block; }
  .work-page .clients.grid {
    padding-right: 20px; }
    .work-page .clients.grid .client {
      margin: 0 20px 40px 20px;
      width: 110px;
      display: inline-block; } }
@media screen and (max-width: 767px) {
  .work-page .client-section .container {
    padding: 43px 20px 8px 20px; }
  .work-page .clients.grid .client {
    margin: 0 0 25px 0;
    width: 48%;
    display: inline-block; } }

.work-footer {
  text-align: center;
  padding: 44px 0 58px 0;
  border-radius: 0;
  background-color: #339fd6; }
  .work-footer h3 {
    color: white;
    display: inline-block; }
    .work-footer h3:before {
      content: "";
      margin-right: 17px;
      width: 48px;
      height: 48px;
      display: inline-block;
      position: relative;
      top: 18px;
      background: url(../images/shape-work-clipboard-light.svg) no-repeat; }
  .work-footer .button {
    margin-left: 27px;
    padding-right: 25px;
    padding-left: 25px;
    position: relative;
    top: -1px; }
  @media screen and (min-width: 768px) and (max-width: 1057px) {
    .work-footer {
      padding: 34px 0 48px 0; } }
  @media screen and (max-width: 1057px) {
    .work-footer {
      border-bottom: 1px solid #2f3030; }
      .work-footer h3 {
        margin-bottom: 20px;
        display: block; }
      .work-footer .button {
        margin: 0; } }
  @media screen and (max-width: 767px) {
    .work-footer {
      padding: 34px 30px 48px 30px; }
      .work-footer h3 {
        line-height: 1.2; }
        .work-footer h3:before {
          margin: 0 auto 15px auto;
          display: block;
          top: 0;
          left: 5px; } }

@media screen and (min-width: 768px) and (max-width: 1057px) {
  .project {
    padding-top: 182px; } }
@media screen and (max-width: 767px) {
  .project {
    padding-top: 130px; } }
.project-header {
  color: white;
  text-align: center;
  padding: 79px 165px 75px 165px;
  background-color: #339fd6; }
  .project-header .sub-title {
    color: #8cd4f8;
    margin-bottom: 6px; }
  .project-header h2 {
    margin-bottom: 18px; }
  .project-header .work-divider {
    width: 70px; }
  .project-header p {
    font-size: 21px;
    line-height: 1.4; }

@media screen and (min-width: 1058px) {
  .project-header {
    border-radius: 5px 5px 0 0; } }
@media screen and (min-width: 1058px) {
  .project-header {
    padding: 79px 165px 75px 165px; } }
@media screen and (max-width: 1057px) {
  .project-header {
    padding: 59px 35px 55px 35px; }
    .project-header p {
      font-size: 18px; } }
.project-hero {
  background-color: white; }
  .project-hero .main-image img {
    display: block; }
  .project-hero .project-meta .meta {
    padding-bottom: 30px; }
  .project-hero .project-meta span {
    display: block; }
  .project-hero .project-meta a {
    font-weight: 600; }
  .project-hero .project-meta li {
    margin-bottom: 3px; }
  .project-hero .sub-title {
    color: #2f3030;
    font-weight: 600;
    margin-bottom: 8px;
    display: block; }
  @media screen and (min-width: 1058px) {
    .project-hero .main-image {
      width: 702px; }
    .project-hero .project-meta {
      padding: 54px 0 0 64px;
      width: 272px; } }
  @media screen and (min-width: 1058px) and (max-width: 1058px) {
    .project-hero .main-image {
      width: 65%; }
    .project-hero .project-meta {
      padding: 44px 0 0 64px;
      width: 35%;
      box-sizing: border-box; } }
  @media screen and (min-width: 1058px) {
    .project-hero .main-image,
    .project-hero .project-meta {
      float: left; } }
  @media screen and (max-width: 1057px) {
    .project-hero .main-image {
      width: 100%; }
      .project-hero .main-image img {
        width: 100%; }
    .project-hero .project-meta {
      width: 100%;
      box-sizing: border-box; } }
  @media screen and (min-width: 768px) and (max-width: 1057px) {
    .project-hero .project-meta {
      padding: 54px 0 20px 44px; }
      .project-hero .project-meta .small-set,
      .project-hero .project-meta .services-set {
        float: left; }
      .project-hero .project-meta .small-set {
        margin-right: 70px; }
      .project-hero .project-meta .services-set ul {
        width: 440px; }
      .project-hero .project-meta .services-set li {
        width: 220px;
        float: left; } }
  @media screen and (max-width: 767px) {
    .project-hero .project-meta {
      padding: 34px 0 0 44px; } }

.project-container {
  padding: 73px 0 93px 0; }
  .project-container .heading {
    padding-right: 168px;
    padding-bottom: 55px;
    padding-left: 168px; }
    .project-container .heading p {
      font-size: 18px;
      line-height: 1.5; }
  .project-container .image img {
    margin-right: auto;
    margin-left: auto;
    display: block; }
  .project-container .image img:nth-child(2) {
    padding-top: 50px; }

@media screen and (max-width: 1057px) {
  .project-container .heading {
    padding-right: 35px;
    padding-left: 35px; } }
@media screen and (max-width: 767px) {
  .project-container {
    padding: 53px 0 73px 0; } }
.work-quote {
  color: white;
  text-align: center;
  background-color: #339fd6; }
  .work-quote h3 {
    font-size: 28px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.45; }

.project-quote {
  padding: 68px 168px 74px 168px; }
  .project-quote span,
  .project-quote img {
    display: block; }
  .project-quote h3 {
    padding-bottom: 17px; }
  .project-quote .avatar {
    margin: 0 auto 30px auto;
    width: 60px;
    height: 60px; }
    .project-quote .avatar img {
      border: 4px solid #60bae7;
      border-radius: 60px;
      width: 60px;
      height: 60px; }
  .project-quote .name {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 3px; }
  .project-quote .sub-title {
    color: #8cd4f8; }

.project-statement {
  padding: 80px 114px; }
  .project-statement h3 {
    padding: 48px 0 52px 0; }
  .project-statement .work-divider {
    margin: 0 auto;
    width: 70px; }

@media screen and (max-width: 1057px) {
  .project-quote {
    padding: 68px 35px 74px 35px; }

  .project-statement {
    padding: 80px 35px; } }
.project-footer {
  background-color: #339fd6; }

.project-request {
  color: white; }
  .project-request h3 {
    margin: 0 0 24px 0;
    position: relative; }
    .project-request h3:before {
      content: "";
      width: 48px;
      height: 48px;
      display: block;
      position: absolute;
      top: -1px;
      left: -65px;
      background: url(../images/shape-work-clipboard-light.svg) no-repeat; }

.project-nav {
  color: white;
  display: block;
  position: relative; }
  .project-nav:hover {
    color: white; }
    .project-nav:hover .arrow {
      -webkit-transform: scale(0.75, 0.75);
      transform: scale(0.75, 0.75); }
    .project-nav:hover .image {
      opacity: 0.5; }
  .project-nav .text {
    text-align: right;
    margin-top: -28px;
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2; }
  .project-nav .project-title {
    font-family: "omnes-pro", sans-serif;
    font-size: 28px;
    line-height: 1.2;
    display: block; }
  .project-nav .arrow {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    width: 14px;
    height: 30px;
    display: block;
    position: absolute;
    bottom: 12px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbi1wYWdpLW5leHQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMCIgeT0iMTcwcHgiIHdpZHRoPSIxNHB4IiBoZWlnaHQ9IjMwcHgiIHZpZXdCb3g9IjAgMCAxNCAzMCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTE0IDE1YzAgMC4zLTAuMSAwLjYtMC4zIDAuOEwxLjYgMjkuN0MxLjUgMjkuOSAxLjIgMzAgMSAzMGMtMC4zIDAtMC42LTAuMi0wLjgtMC40IC0wLjMtMC40LTAuMy0xLjEgMC4xLTEuNUwxMS43IDE1IDAuMyAxLjljLTAuMy0wLjQtMC40LTEtMC4xLTEuNSAwLjMtMC41IDEtMC42IDEuNC0wLjFsMTIuMSAxMy45QzEzLjkgMTQuNCAxNCAxNC43IDE0IDE1eiIvPjwvc3ZnPg==");
    background-repeat: no-repeat; }
  .project-nav .image {
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; }
  .project-nav .space {
    display: block;
    position: relative;
    z-index: 0; }
  .project-nav.nav-articulate .image {
    background-image: url(../images/work/thumb_articulate.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center; }
    @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
      .project-nav.nav-articulate .image {
        background-image: url(../images/work/thumb_articulate@2x.jpg);
        background-size: cover; } }
  .project-nav.nav-netpure .image {
    background-image: url(../images/work/thumb_netpure.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center; }
    @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
      .project-nav.nav-netpure .image {
        background-image: url(../images/work/thumb_netpure@2x.jpg);
        background-size: cover; } }
  .project-nav.nav-pandera-systems .image {
    background-image: url(../images/work/thumb_pandera.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center; }
    @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
      .project-nav.nav-pandera-systems .image {
        background-image: url(../images/work/thumb_pandera@2x.jpg);
        background-size: cover; } }
  .project-nav.nav-tumblr .image {
    background-image: url(../images/work/thumb_tumblr.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center; }
    @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
      .project-nav.nav-tumblr .image {
        background-image: url(../images/work/thumb_tumblr@2x.jpg);
        background-size: cover; } }
  .project-nav.nav-mailchimp .image {
    background-image: url(../images/work/thumb_mailchimp.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center; }
    @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
      .project-nav.nav-mailchimp .image {
        background-image: url(../images/work/thumb_mailchimp@2x.jpg);
        background-size: cover; } }
  .project-nav.nav-foursquare .image {
    background-image: url(../images/work/thumb_foursquare.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center; }
    @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
      .project-nav.nav-foursquare .image {
        background-image: url(../images/work/thumb_foursquare@2x.jpg);
        background-size: cover; } }
  .project-nav.nav-wells-fargo-capital-finance .image {
    background-image: url(../images/work/thumb_wellsfargo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center; }
    @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
      .project-nav.nav-wells-fargo-capital-finance .image {
        background-image: url(../images/work/thumb_wellsfargo@2x.jpg);
        background-size: cover; } }

@media screen and (min-width: 1058px) {
  .project-footer {
    border-radius: 0; }

  .project-nav .image {
    border-radius: 0; } }
@media screen and (min-width: 1058px) {
  .project-request {
    padding: 69px 0 0 149px; }

  .project-nav .text {
    padding-right: 116px; }
  .project-nav .arrow {
    right: 60px; } }
@media screen and (min-width: 821px) {
  .project-request,
  .project-nav {
    width: 50%;
    float: left;
    box-sizing: border-box; } }
@media screen and (min-width: 768px) and (max-width: 1057px) {
  .project-request {
    padding: 55px 35px 0 99px; }

  .project-nav .text {
    padding-right: 96px; }
  .project-nav .arrow {
    right: 50px; } }
@media screen and (max-width: 820px) {
  .project-request {
    text-align: center;
    padding: 50px 30px 48px 30px; }
    .project-request h3 {
      line-height: 1.2; }
      .project-request h3:before {
        margin: 0 auto 15px auto;
        display: block;
        position: relative;
        top: 0;
        left: 5px; }

  .project-nav .text {
    padding-right: 116px; }
  .project-nav .arrow {
    right: 60px; } }
.project-articulate .container-1 {
  color: #848e9a;
  background-color: #202328; }
  .project-articulate .container-1 h2 {
    color: white; }
.project-articulate .container-2 {
  background-color: #edf0f4; }
  .project-articulate .container-2 h2 {
    color: #2f3030; }

.project-foursquare .container-1 {
  color: #757474;
  padding-bottom: 0;
  background-color: #f1f1f3; }
  .project-foursquare .container-1 h2 {
    color: #2f3030; }
.project-foursquare .container-2 {
  color: #848e9a;
  padding-bottom: 43px;
  background-color: #202328; }
  .project-foursquare .container-2 img {
    margin-bottom: 50px; }
  .project-foursquare .container-2 h2 {
    color: white; }

.project-fpcu .container-1 {
  color: #84abd6;
  background-color: #204c7b; }
  .project-fpcu .container-1 h2 {
    color: white; }
.project-fpcu .container-2 {
  color: #848e9a;
  background-color: #202328; }
  .project-fpcu .container-2 h2 {
    color: white; }

.project-pandera-systems .project-container {
  color: #7e7d7d;
  background-color: #e1e1e1; }
  .project-pandera-systems .project-container h2 {
    color: #585555; }

.project-trendabl .container-1 {
  background-color: #edf0f4; }
  .project-trendabl .container-1 h2 {
    color: #2f3030; }
.project-trendabl .container-2 {
  color: #848e9a;
  background-color: #202328; }
  .project-trendabl .container-2 h2 {
    color: white; }

.project-netpure .container-1 {
  color: #5f5b5b;
  background-color: #d9d9d9;
  padding-bottom: 60px; }
  .project-netpure .container-1 h2 {
    color: #443f3f; }
.project-netpure .container-2 {
  color: #848e9a;
  background-color: #202328;
  padding: 0; }
  .project-netpure .container-2 div.heading {
    display: none; }

.project-wells-fargo-capital-finance .container-1 {
  background-color: #3f454f;
  color: #b0b6c0; }
  .project-wells-fargo-capital-finance .container-1 h2 {
    color: white; }
.project-wells-fargo-capital-finance .container-2 {
  color: #80868f;
  background-color: #1d2127; }
  .project-wells-fargo-capital-finance .container-2 h2 {
    color: white; }

.project-tumblr .container-1 {
  background-color: #c2d0da;
  color: #50697b; }
  .project-tumblr .container-1 h2 {
    color: #344b5c; }
.project-tumblr .container-2 {
  color: #848e9a;
  background-color: #202328; }
  .project-tumblr .container-2 h2 {
    color: white; }

.project-mailchimp .container-1 {
  background-color: #f1f0ec;
  color: #918969; }
  .project-mailchimp .container-1 h2 {
    color: #696140; }
.project-mailchimp .container-2 {
  color: #848e9a;
  background-color: #202328; }
  .project-mailchimp .container-2 h2 {
    color: white; }

.the-404 .container {
  text-align: center;
  margin: -284px 0 0 -400px;
  width: 800px;
  position: absolute;
  top: 50%;
  left: 50%; }
.the-404 .heading {
  padding-bottom: 54px; }
  .the-404 .heading h2 {
    color: white;
    font-size: 40px; }
    @media screen and (min-width: 768px) and (max-width: 1057px) {
      .the-404 .heading h2 {
        padding: 0 30px; } }
    @media screen and (max-width: 767px) {
      .the-404 .heading h2 {
        padding: 0 30px;
        font-size: 25px; } }
  .the-404 .heading p {
    color: white; }
    @media screen and (min-width: 768px) and (max-width: 1057px) {
      .the-404 .heading p {
        padding: 0 30px; } }
    @media screen and (max-width: 767px) {
      .the-404 .heading p {
        padding: 0 60px;
        font-size: 17px;
        width: 450px;
        margin: 0 auto; } }
.the-404 img {
  margin: 0 auto 60px auto;
  display: block; }
  @media screen and (max-width: 767px) {
    .the-404 img {
      width: 300px; } }

.instagram-access .container {
  color: #bce9ff;
  text-align: center; }
.instagram-access .heading {
  padding-top: 59px; }
  .instagram-access .heading h2 {
    color: white;
    margin-bottom: 40px; }
    .instagram-access .heading h2 .instagram-logo {
      margin: 0 5px;
      width: 199px;
      height: 57px;
      display: inline-block;
      position: relative;
      bottom: -19px;
      background: url(../images/shape-logo-instagram.svg) no-repeat; }
  .instagram-access .heading .description {
    margin: 0 auto;
    width: 690px; }
    .instagram-access .heading .description em {
      color: white; }
.instagram-access .token-setup {
  padding: 54px 0 46px 0; }
  .instagram-access .token-setup .token-field {
    text-align: center;
    margin: 0 auto;
    width: 500px;
    display: none; }
.instagram-access .questions {
  font-size: 14px; }
  .instagram-access .questions a {
    color: white;
    font-weight: 500; }

.newsletter-page .submit .button.button-white {
  color: #9080cf; }
@media screen and (max-width: 1057px) {
  .newsletter-page header .logo .shape-logo {
    fill: white; } }

.newsletter-content {
  color: white;
  position: relative; }
  @media screen and (min-width: 1058px) {
    .newsletter-content {
      border-radius: 5px 5px 0 0;
      height: 665px; } }
  .newsletter-content .container {
    padding: 116px 84px 0 84px; }
  .newsletter-content .heading {
    width: 420px; }
  .newsletter-content h2 {
    margin-bottom: 30px; }
  .newsletter-content p {
    margin-bottom: 35px;
    font-size: 18px; }
  .newsletter-content label {
    color: #757474; }
  .newsletter-content .field {
    margin-bottom: 30px;
    width: 246px;
    float: left; }
    .newsletter-content .field .input {
      font-size: 18px;
      width: 100%; }
  .newsletter-content .submit {
    text-align: center;
    margin-left: 20px;
    float: left; }
    .newsletter-content .submit .button.button-white {
      color: #9080cf; }
  .newsletter-content .archive-link {
    padding-top: 0;
    font-size: 15px;
    width: 420px; }
    .newsletter-content .archive-link a {
      color: white;
      text-decoration: underline;
      display: block; }
      .newsletter-content .archive-link a:hover {
        text-decoration: none; }
  .newsletter-content .subscription-message {
    display: none; }
    .newsletter-content .subscription-message p {
      padding-left: 41px;
      padding-top: 4px;
      position: relative;
      margin-bottom: 0;
      height: 65px; }
      .newsletter-content .subscription-message p:before {
        content: "";
        width: 31px;
        height: 31px;
        position: absolute;
        top: 0;
        left: 0;
        background: url(../images/shape-check-white.svg) no-repeat; }
  @media screen and (min-width: 1058px) {
    .newsletter-content .subscription-form {
      width: 420px; }
    .newsletter-content .heading {
      text-align: left; }
      .newsletter-content .heading h2 {
        margin: 0 0 12px 0;
        line-height: 1.2;
        font-weight: 300; }
      .newsletter-content .heading p {
        font-size: 20px;
        line-height: 1.4; }
    .newsletter-content .newsletter-mobile {
      width: 350px;
      height: 614px;
      position: absolute;
      right: 93px;
      bottom: 0;
      background-image: url(../images/img-newsletter-phone.png);
      background-repeat: no-repeat; } }
  @media screen and (min-width: 1058px) and (-webkit-min-device-pixel-ratio: 1.3), screen and (min-width: 1058px) and (min-resolution: 125dpi), screen and (min-width: 1058px) and (min-resolution: 1.3dppx) {
    .newsletter-content .newsletter-mobile {
      background-image: url(../images/img-newsletter-phone@2x.png);
      background-size: 350px auto; } }
  @media screen and (min-width: 1058px) {
      .newsletter-content .newsletter-mobile img {
        margin: 96px 0 0 35px; } }
  @media screen and (max-width: 1057px) {
    .newsletter-content {
      text-align: center; }
      .newsletter-content .container {
        box-sizing: border-box; }
      .newsletter-content .heading {
        text-align: center; }
      .newsletter-content .subscription-message .heading {
        text-align: left; }
      .newsletter-content .field,
      .newsletter-content .submit {
        display: inline-block;
        vertical-align: top;
        float: none; } }
  @media screen and (min-width: 768px) and (max-width: 1057px) {
    .newsletter-content .container {
      padding: 171px 80px 40px 80px; }
    .newsletter-content .heading {
      width: 100%; }
    .newsletter-content .archive-link {
      width: 100%; }
    .newsletter-content .subscription-form,
    .newsletter-content .subscription-message {
      height: 69px; }
    .newsletter-content .subscription-message {
      width: 380px;
      margin: 0 auto; }
      .newsletter-content .subscription-message .heading {
        text-align: left;
        width: 380px; }
        .newsletter-content .subscription-message .heading p {
          height: 100%; }
    .newsletter-content .submit-group {
      text-align: center; }
      .newsletter-content .submit-group .submit {
        margin-left: 16px; } }
  @media screen and (max-width: 767px) {
    .newsletter-content .container {
      padding: 121px 40px 40px 40px; }
    .newsletter-content .heading {
      width: 100%; }
      .newsletter-content .heading h2 {
        font-size: 25px; }
      .newsletter-content .heading p {
        font-size: 15px; }
    .newsletter-content .archive-link {
      width: 100%;
      margin-top: 20px;
      font-size: 13px; }
      .newsletter-content .archive-link a {
        font-size: 14px; }
    .newsletter-content .subscription-form,
    .newsletter-content .subscription-message {
      height: 93px; }
    .newsletter-content .heading {
      margin-bottom: 20px; }
    .newsletter-content .field,
    .newsletter-content .submit,
    .newsletter-content .button {
      width: 100%; }
    .newsletter-content .field {
      margin: 0 auto 15px auto; }
    .newsletter-content .submit {
      margin: 0; } }

.newsletter-benefits {
  background: #fff;
  padding: 80px 30px; }
  .newsletter-benefits .heading h2 {
    text-transform: uppercase;
    font-weight: bold;
    color: #4e5154;
    font-size: 23px;
    font-family: "proxima-nova", sans-serif;
    margin-bottom: 8px; }
  .newsletter-benefits .heading p {
    font-family: "proxima-nova", sans-serif;
    color: #757474;
    font-size: 20px; }
  .newsletter-benefits .reasons-section {
    width: 978px;
    margin: 40px auto 0 auto;
    background: yellow; }
    .newsletter-benefits .reasons-section .reason {
      float: left;
      width: 306px;
      padding-top: 164px;
      margin-right: 30px;
      text-align: center; }
      .newsletter-benefits .reasons-section .reason h3 {
        text-transform: uppercase;
        font-family: "proxima-nova", sans-serif;
        font-weight: bold;
        color: #4e5154;
        font-size: 17px; }
      .newsletter-benefits .reasons-section .reason p {
        font-family: "proxima-nova", sans-serif;
        color: #757474;
        font-size: 17px; }
      .newsletter-benefits .reasons-section .reason.hand-picked {
        width: 251px;
        padding-left: 40px;
        padding-right: 15px;
        background-image: url(../images/img-newsletter-handpicked.png);
        background-repeat: no-repeat;
        background-position: 115px 7px; }
        @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
          .newsletter-benefits .reasons-section .reason.hand-picked {
            background-image: url(../images/img-newsletter-handpicked@2x.png);
            background-size: 104px auto; } }
      .newsletter-benefits .reasons-section .reason.email {
        padding-left: 20px;
        padding-right: 20px;
        width: 266px;
        background-image: url(../images/img-newsletter-email.png);
        background-repeat: no-repeat;
        background-position: 105px 0; }
        @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
          .newsletter-benefits .reasons-section .reason.email {
            background-image: url(../images/img-newsletter-email@2x.png);
            background-size: 96px auto; } }
      .newsletter-benefits .reasons-section .reason.t-shirt {
        width: 251px;
        padding-right: 30px;
        padding-left: 15px;
        margin-right: 0;
        background-image: url(../images/img-newsletter-tshirt.png);
        background-repeat: no-repeat;
        background-position: 85px 6px; }
        @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi), (min-resolution: 1.3dppx) {
          .newsletter-benefits .reasons-section .reason.t-shirt {
            background-image: url(../images/img-newsletter-tshirt@2x.png);
            background-size: 114px auto; } }
  @media screen and (min-width: 768px) and (max-width: 1057px) {
    .newsletter-benefits .reasons-section {
      width: 306px; }
      .newsletter-benefits .reasons-section .reason.hand-picked, .newsletter-benefits .reasons-section .reason.email, .newsletter-benefits .reasons-section .reason.t-shirt {
        width: 266px;
        padding: 140px 20px 0 20px;
        margin-bottom: 30px;
        margin-right: 0; }
      .newsletter-benefits .reasons-section .reason.hand-picked {
        background-position: 101px 7px; }
      .newsletter-benefits .reasons-section .reason.t-shirt {
        background-position: 96px 6px;
        margin-bottom: 0; } }
  @media screen and (max-width: 767px) {
    .newsletter-benefits .heading h2 {
      font-size: 19px; }
    .newsletter-benefits .heading p {
      font-size: 18px; }
    .newsletter-benefits .reasons-section {
      width: 306px; }
      .newsletter-benefits .reasons-section .reason h3, .newsletter-benefits .reasons-section .reason p {
        font-size: 15px; }
      .newsletter-benefits .reasons-section .reason.hand-picked, .newsletter-benefits .reasons-section .reason.email, .newsletter-benefits .reasons-section .reason.t-shirt {
        width: 306px;
        padding: 140px 20px 0 20px;
        margin-bottom: 30px;
        margin-right: 0; }
      .newsletter-benefits .reasons-section .reason.hand-picked {
        background-position: 101px 7px; }
      .newsletter-benefits .reasons-section .reason.t-shirt {
        background-position: 96px 6px;
        margin-bottom: 0; } }