/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio, canvas, progress, video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden], template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active, a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b, strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
  border: 0; }

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button, input, optgroup, select, textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8+, and Opera
 * Correct `select` style inheritance in Firefox.
 */
button, select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled], html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td, th {
  padding: 0; }

@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/quicksand-regular-webfont.eot');
  src: url('../fonts/quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/quicksand-regular-webfont.woff2') format('woff2'), url('../fonts/quicksand-regular-webfont.woff') format('woff'), url('../fonts/quicksand-regular-webfont.ttf') format('truetype'), url('../fonts/quicksand-regular-webfont.svg#quicksandregular') format('svg');
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/quicksand-bold-webfont.eot');
  src: url('../fonts/quicksand-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/quicksand-bold-webfont.woff2') format('woff2'), url('../fonts/quicksand-bold-webfont.woff') format('woff'), url('../fonts/quicksand-bold-webfont.ttf') format('truetype'), url('../fonts/quicksand-bold-webfont.svg#quicksandbold') format('svg');
  font-weight: 700;
  font-style: normal; }

body, html {
  position: relative;
  color: #ffffff;
  width: 100%;
  height: 100%;
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased; }
  body.overflow-y-hide, html.overflow-y-hide {
    overflow-y: hidden; }

html {
  overflow-y: scroll; }

h1 {
  font-size: 3em; }

h2 {
  z-index: 30;
  font-size: 2em;
  font-weight: 400; }

.noselect {
  user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  -moz-user-select: text;
  -o-user-select: text; }

.btn {
  cursor: pointer; }
  .btn.inactive, .btn.disabled {
    cursor: default; }

.bold {
  font-weight: 700; }

.content-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.fixed-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 400px;
  min-height: 300px; }
  .fixed-overlay .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000; }

.header-logo {
  background: transparent no-repeat;
  position: relative;
  height: 120px;
  margin: 0 auto;
  top: 80px;
  z-index: 70;
  background-position: center;
  background-image: url(../images/svg/logo.svg); }

#loading {
  z-index: 10; }
  #loading .background {
    opacity: 0.6;
    -webkit-opacity: 0.6;
    -ms-opacity: 0.6;
    -moz-opacity: 0.6;
    -o-opacity: 0.6; }

#preloader {
  z-index: 100; }

#four-oh-four {
  position: relative;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  height: 100%; }
  #four-oh-four p {
    padding: 0 20px 100px 20px;
    max-width: 900px;
    margin: 0 auto;
    margin-top: -180px; }
    #four-oh-four p.body-text {
      font-size: 1.5em;
      line-height: 2em; }

.four-content {
  position: absolute;
  top: 50%;
  margin: 0 auto;
  width: 100%; }

@media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-device-pixel-ratio: 1.25), only screen and (min-resolution: 200dpi), only screen and (min-resolution: 1.25dppx) {
  -webkit-font-smoothing: subpixel-antialiased; }

#wrapper {
  overflow: hidden; }

#content {
  position: relative;
  width: 100%;
  min-width: 400px;
  min-height: 300px;
  margin: 0 auto; }

.clear {
  clear: both;
  height: 200px;
  text-align: center; }

/* Menu icon styles */
.menu-icon-wrapper {
  position: fixed;
  top: 5px;
  margin-left: -16px;
  left: 50%;
  height: 40px;
  width: 40px;
  z-index: 110;
  transition: 0.1s;
  user-select: none; }
  .menu-icon-wrapper.scaled {
    transform: scale(0.8); }

.menu-icon-wrapper svg {
  position: absolute;
  top: -33px;
  left: -33px;
  transform: scale(0.1);
  transform-origin: 0 0; }

.menu-icon-wrapper svg path {
  stroke: #fff;
  stroke-width: 60px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: transparent; }

.menu-icon-wrapper .menu-icon-trigger {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: auto;
  background: none;
  border: none;
  margin: 0;
  padding: 0; }

.menu-icon-wrapper .menu-icon-trigger:hover, .menu-icon-wrapper .menu-icon-trigger:focus {
  outline: none; }

#fixed-close-button {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  z-index: 100; }
  #fixed-close-button svg {
    display: block;
    position: absolute;
    right: 0; }

.close-container {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 113px; }

.close {
  position: relative;
  width: 26px;
  height: 26px;
  overflow: hidden;
  margin: 0 auto;
  top: 8px;
  cursor: pointer; }
  .close:hover::before, .close:hover::after {
    background: #fff; }
  .close::before, .close::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: white; }
  .close::before {
    transform: rotate(45deg); }
  .close::after {
    transform: rotate(-45deg); }
  .close.big {
    transform: scale(3); }
  .close.thick::before, .close.thick::after {
    height: 5px;
    margin-top: -2px; }
  .close.black::before, .close.black::after {
    height: 8px;
    margin-top: -4px; }
  .close.heavy::before, .close.heavy::after {
    height: 12px;
    margin-top: -6px; }
  .close.rounded::before, .close.rounded::after {
    border-radius: 5px; }
  .close.blades::before, .close.blades::after {
    border-radius: 5px 0; }
  .close.warp::before, .close.warp::after {
    border-radius: 120% 0; }
  .close.fat::before, .close.fat::after {
    border-radius: 100%; }

h1 {
  position: relative;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700; }

.button_container {
  position: fixed;
  top: 10px;
  margin-left: -15px;
  left: 50%;
  height: 40px;
  width: 40px;
  cursor: pointer;
  transition: opacity 0.25s ease;
  z-index: 110; }
  .button_container:hover {
    opacity: 0.7; }
  .button_container.active .top {
    transform: translateY(8px) translateX(0) rotate(45deg); }
  .button_container.active .middle {
    opacity: 0; }
  .button_container.active .bottom {
    transform: translateY(-8px) translateX(0) rotate(-45deg); }
  .button_container span {
    background: #0F2064;
    border: none;
    height: 5px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.35s ease;
    cursor: pointer; }
    .button_container span:nth-of-type(2) {
      top: 8px; }
    .button_container span:nth-of-type(3) {
      top: 16px; }

header {
  user-select: none;
  z-index: 80;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }
  header nav {
    color: #21ffe2;
    font-family: 'Quicksand', sans-serif;
    font-weight: 400;
    position: relative; }
  header nav ul {
    text-align: center; }
  header nav ul li {
    display: inline-block; }
    header nav ul li.nav-space {
      width: 100px; }
  header nav ul li a {
    display: inline-block;
    padding: 1em 3em;
    text-decoration: none;
    font-size: 16px;
    font-weight: 800;
    color: #21ffe2; }
  header nav ul li a.teal {
    color: #21ffe2; }
  header nav ul li a.pink {
    color: #f34335; }
  header nav ul li a:hover {
    color: #fff; }

#nav-bg {
  z-index: 105;
  position: relative; }
  #nav-bg svg {
    display: block;
    margin: 0 auto; }

#fixed-nav-bg {
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0 auto;
  z-index: 100;
  pointer-events: none; }
  #fixed-nav-bg svg {
    display: block;
    margin: 0 auto; }

.navBG {
  fill: #21ffe2; }

.navBG.teal {
  fill: #21ffe2; }

.navBG.pink {
  fill: #f34335; }

.overlay-top {
  user-select: none;
  z-index: 100;
  position: absolute;
  background-image: url(../images/svg/menu-fs-top.svg);
  background-size: auto 100%;
  background-repeat: none;
  top: -495px;
  left: 0;
  width: 100%;
  height: 500px; }

.overlay {
  user-select: none;
  z-index: 101;
  position: fixed;
  background-image: url(../images/svg/menu-fs-bg.svg);
  background-size: auto 100%;
  background-repeat: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 140%;
  visibility: hidden;
  transition: visibility 0.8s; }
  .overlay.open {
    visibility: visible; }
    .overlay.open li {
      animation: fadeInRight 0.5s ease forwards;
      animation-delay: 0.35s; }
      .overlay.open li:nth-of-type(2) {
        animation-delay: 0.4s; }
      .overlay.open li:nth-of-type(3) {
        animation-delay: 0.45s; }
      .overlay.open li:nth-of-type(4) {
        animation-delay: 0.5s; }
  .overlay nav {
    position: relative;
    height: 70%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    text-align: center; }
  .overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    height: 100%; }
    .overlay ul li {
      display: block;
      height: 25%;
      height: calc(70% / 4);
      min-height: 50px;
      position: relative;
      opacity: 0; }
      .overlay ul li a {
        display: block;
        position: relative;
        color: #FFF;
        text-decoration: none;
        overflow: hidden; }
        .overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
          width: 100%; }
        .overlay ul li a:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 0%;
          transform: translateX(-50%);
          height: 3px;
          background: #FFF;
          transition: 0.35s; }

.button-audio {
  cursor: pointer;
  position: absolute;
  top: 25px;
  right: 20px;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  background-image: url(../images/svg/audio-off.svg);
  transform: translate(0px, 0px); }
  .button-audio.active {
    background-image: url(../images/svg/audio-on.svg); }

.sprite-menu-drip {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  width: 136px;
  height: 141px;
  background-image: url(../images/sprite/sprite-menu-drip.png);
  animation: drip 5s steps(66) infinite; }

@keyframes drip {
  from {
    background-position: 0px; }

  to {
    background-position: -8976px; } }

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%; }

  100% {
    opacity: 1;
    left: 0; } }

@media screen and (max-width: 820px) {
  header nav ul {
    opacity: 0;
    visibility: hidden; }

  #nav-bg {
    display: none; }
 }

#contacts {
  position: relative;
  display: block;
  overflow: hidden; }

footer {
  color: #fff;
  background-color: #152569; }
  footer a {
    color: #21ffe2;
    display: inline-block;
    text-decoration: none; }
  footer a:hover {
    color: #FFF; }
  footer h3 {
    margin: 1em 0 0 0;
    padding: 0; }
  footer p {
    margin: 0;
    padding: 0;
    color: #5065BD;
    font-size: 1em;
    font-weight: 800; }

.footer-content {
  position: relative;
  max-width: 50em;
  margin: 0 auto;
  padding: 0 1.6875em;
  z-index: 10;
  margin-top: 120px; }

.footer-tab {
  float: left;
  width: 33.33%; }
  .footer-tab.contact-us {
    text-align: left; }
  .footer-tab.location {
    text-align: right; }
  .footer-tab.follow-us {
    text-align: center; }

#legal {
  display: block;
  clear: both;
  font-size: 0.7em;
  text-align: center;
  margin: 0 1.1875em;
  padding-top: 20px;
  padding-bottom: 10px; }

.footer-bg-container {
  width: 100%;
  margin: 0 auto;
  background-repeat: repeat-x; }

.footer-bg {
  position: absolute;
  top: 0px;
  z-index: 0;
  width: 100%;
  height: 200px;
  background-position: center top; }
  .footer-bg.one {
    background-image: url(../images/footer-bg-small-01.png);
    background-repeat: repeat-x; }
  .footer-bg.two {
    background-image: url(../images/footer-bg-small-02.png);
    background-repeat: repeat-x; }
  .footer-bg.three {
    background-image: url(../images/footer-bg-03.png);
    background-repeat: repeat-x; }

.footer-share {
  padding-top: 10px; }

.sprite-social {
  margin: 0 auto;
  z-index: 11;
  padding: 0 5px; }

.social-icon {
  fill: #21ffe2; }

.sprite-contact-cta {
  display: none;
  position: absolute;
  pointer-events: none;
  left: -110px;
  top: -120px;
  width: 434px;
  height: 220px;
  background-image: url(../images/sprite/sprite-contact-cta.png);
  background-repeat: no-repeat; }
  .sprite-contact-cta.active {
    display: block;
    animation: contact_cta 1s steps(13) forwards; }

@media (max-width: 768px) {
  .sprite-contact-cta {
    left: 50%;
    margin-left: -217px;
    top: -130px; }

  footer .footer-content {
    margin: 0 1.1875em;
    margin-top: 130px; }

  .footer-tab {
    float: none;
    width: 100%; }
    .footer-tab.contact-us {
      text-align: center; }
    .footer-tab.location {
      text-align: center; }
    .footer-tab.follow-us {
      text-align: center; }
 }

@keyframes contact_cta {
  from {
    background-position: 0px; }

  to {
    background-position: -5641px; } }

#work {
  background-color: #ffcc00; }

.project {
  visibility: hidden;
  position: relative;
  cursor: pointer;
  display: inline-table;
  width: 500px;
  padding: 10;
  text-decoration: none !important; }
  .project p.title {
    line-height: 1.5;
    padding: 0 20px;
    font-size: 1.5em;
    line-height: 1.2em;
    color: #081349;
    font-weight: 800;
    padding-top: 20px; }
  .project p.client {
    line-height: 1.5;
    padding: 0 20px;
    padding-top: 6px;
    font-size: 1.2em;
    font-weight: 800;
    color: #979797; }
  .project.active {
    visibility: visible; }

.gallery {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden; }

.gallery-thumb-container {
  width: 100%;
  position: relative;
  text-align: center;
  z-index: 29; }

.gallery-info-container {
  width: 100%;
  height: 120px;
  position: relative;
  text-align: left;
  background-color: #fff;
  z-index: 30; }

.gallery-bottom-bar {
  width: 100%;
  height: 6px;
  background-color: #ebebeb; }
  .gallery-bottom-bar.hover {
    background-color: #21ffe2; }

.bg-container {
  width: 100.1%;
  overflow: hidden; }

.data-module {
  margin: 0 auto;
  z-index: 10; }

.data-container {
  top: -30px;
  position: relative;
  z-index: 33; }

.bg {
  transform: scale(1, 1);
  transition: transform 200ms ease; }
  .bg.hover {
    transform: scale(1.1, 1.1);
    transition: transform 200ms ease; }

#gallery-work {
  position: relative;
  max-width: 1900px;
  top: 100px;
  margin: 0 auto; }
  #gallery-work img {
    width: 100.5%; }

.work-header-bg {
  position: absolute;
  width: 100%;
  background-repeat: repeat-x;
  background-position: center top;
  pointer-events: none; }
  .work-header-bg.one {
    height: 400px;
    background-image: url(../images/work-header-bg1.png);
    z-index: 0;
    top: 140; }
  .work-header-bg.two {
    height: 400px;
    background-image: url(../images/work-header-bg2.png);
    z-index: 30;
    top: 0; }

.videoWrapper {
  position: relative;
  text-align: center;
  padding-bottom: 0;
  width: 100%;
  margin: 0 auto; }

.work-bush-container {
  width: 100%;
  position: relative;
  float: left;
  z-index: 30;
  top: -30; }

.work-bushes {
  position: relative;
  height: 54px;
  z-index: 30; }
  .work-bushes.bush-bg {
    background-image: url(../images/work-bushes-bg.png); }
  .work-bushes.bush-fg {
    background-image: url(../images/work-bushes-fg.png);
    margin-top: -46px; }

#project-container {
  display: block;
  position: relative; }

.project-view {
  position: absolute;
  display: none;
  visibility: hidden;
  width: 100%;
  z-index: 500; }
  .project-view.active {
    display: block;
    visibility: visible; }

#project-mask {
  float: left;
  z-index: 700; }
  #project-mask svg {
    width: 100%;
    height: 100%; }

#project-hero {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 80vh;
  overflow: hidden; }
  #project-hero .hero-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover; }
  #project-hero .responsive-background-image {
    background-position: 50% 50%; }

.client-logo {
  position: relative;
  display: inline-block; }
  .client-logo img {
    width: 120px;
    height: 120px; }

.hero-divider {
  display: inline-block;
  position: relative;
  height: 80px;
  width: 3px;
  border-radius: 6px;
  margin: 20 40;
  background-color: #E0E0E0; }

.hero-data-container {
  white-space: nowrap;
  width: 100%;
  position: relative;
  text-align: center;
  background-color: white; }

.hero-text {
  color: #979797;
  display: inline-block;
  position: relative;
  text-align: left;
  margin-top: 15px;
  vertical-align: top; }
  .hero-text .project-copy {
    padding: 0;
    margin: 0;
    white-space: nowrap; }
    .hero-text .project-copy.p-title {
      color: #081349;
      font-weight: 800;
      font-size: 2.5em; }
    .hero-text .project-copy.p-client {
      font-weight: 400;
      font-size: 1.5em;
      display: inline-block; }
    .hero-text .project-copy.p-date {
      font-weight: 400;
      font-size: 1.5em;
      display: inline-block; }
    .hero-text .project-copy.p-role {
      font-size: 1.5em;
      display: inline-block;
      padding-right: 10px; }

.project-description {
  font-size: 1.5em;
  line-height: 1.8em;
  padding-bottom: 50px;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 50px;
  padding-right: 50px; }

.js-video {
  height: 0;
  padding-top: 25px;
  padding-bottom: 67.5%;
  margin-bottom: 0px;
  position: relative;
  overflow: hidden; }

.js-video.widescreen {
  padding-bottom: 56.34%; }

.js-video.vimeo {
  padding-top: 0; }

.js-video embed, .js-video iframe, .js-video object, .js-video video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute; }

#gallery-container {
  text-align: center;
  margin: 5% 0; }

.video-container {
  width: 33.33%;
  float: left;
  display: inline;
  margin: 10% auto; }

.image-container {
  pointer-events: all;
  width: 70%;
  margin: 5% auto;
  display: block; }
  .image-container img {
    width: 100%; }
  .image-container.square {
    width: 33%;
    max-width: 800px;
    display: inline-block;
    margin: 2% 2%; }

video {
  display: block;
  width: 100%;
  cursor: pointer; }

.button {
  display: block;
  position: absolute;
  width: 100%;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%); }

.sprite-anim-project {
  visibility: hidden;
  position: relative;
  width: 84px;
  height: 92px;
  margin: 0 auto;
  background-image: url(../images/sprite/sprite-work-rollover.png);
  transform: translate(0px, 0px); }
  .sprite-anim-project.hover {
    visibility: visible;
    animation-play-state: initial;
    animation-play-state: initial;
    animation: play_rollover 2.4s -2s steps(72) infinite; }

.sprite-anim-leaves {
  z-index: 20;
  visibility: hidden;
  position: relative;
  width: 194px;
  height: 147px;
  top: -50px;
  margin: 0 auto;
  background-image: url(../images/sprite/sprite-rollover-leaves.png);
  transform: translate(0px, 0px);
  animation-play-state: forwards;
  animation: leaves_play 1.4s steps(49) forwards; }
  .sprite-anim-leaves.hover {
    visibility: visible;
    animation-play-state: forwards; }

@keyframes play_rollover {
  100% {
    background-position: -6048px; } }

@keyframes leaves_play {
  100% {
    background-position: -9506px; } }

@media (max-width: 1200px) {
  .project {
    width: 400px; }
 }

@media (max-width: 900px) {
  .project {
    width: 320px; }

  .video-container {
    width: 100%; }

  .client-logo {
    margin-left: 20px; }
    .client-logo img {
      width: 80px;
      height: 80px; }

  .hero-divider {
    height: 60px;
    width: 2px;
    margin: 12 20; }

  .image-container {
    width: 90%; }
    .image-container.square {
      width: 90%;
      display: block;
      margin: 5% 5%; }

  .hero-text {
    height: 70px; }

  .p-title {
    font-size: 1.7em !important;
    overflow: hidden; }

  .p-client {
    font-size: 1em !important; }

  .p-role {
    font-size: 1em !important; }

  .p-date {
    font-size: 1em !important; }

  .project-description {
    font-size: 1.2em;
    line-height: 1.6em;
    padding-bottom: 10px; }
 }

@media (max-width: 500px) {
  .project-copy {
    text-align: center !important;
    display: block !important; }

  .p-title {
    margin-top: -15px !important; }

  .p-role .p-date {
    padding-top: 8px !important;
    padding-right: 0px;
    font-size: 1em !important; }

  .p-date {
    display: block !important;
    padding-top: 4px !important;
    padding-bottom: 20px !important; }

  .client-logo {
    position: relative;
    display: block;
    margin-left: 0px; }

  .hero-text {
    margin-top: 0px; }

  .hero-divider {
    display: none; }
 }

.section-view {
  position: relative;
  text-align: center;
  visibility: hidden;
  display: none;
  margin: 0 auto; }
  .section-view p {
    padding: 0 20px 30px 20px;
    max-width: 900px;
    margin: 0 auto; }
    .section-view p.body-text {
      font-size: 1.25em;
      line-height: 2em; }
    .section-view p.career-header {
      font-size: 3em;
      font-weight: 700;
      margin-top: 100px;
      padding-bottom: 20px; }
    .section-view p.career-text {
      font-size: 1.3em;
      line-height: 2em; }
      .section-view p.career-text .large {
        line-height: 1.5em;
        font-size: 1.4em;
        font-weight: 700; }
  .section-view p.established-text {
    font-size: 1.3em;
    line-height: 1.3em;
    max-width: 80%;
    margin: 0 auto;
    padding-bottom: 20px;
    color: #21ffe2; }
  .section-view.active {
    display: block;
    visibility: visible; }
  .section-view h2 {
    position: relative;
    padding-top: 50px; }

.quote1 {
  color: #21ffe2; }

.half {
  width: 50%; }

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

.site {
  display: none; }

#preload-logo-anim {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0px;
  z-index: 700; }
  #preload-logo-anim.active {
    display: block; }

#logo-intro {
  background: transparent no-repeat;
  position: relative;
  width: 500px;
  height: 200px;
  margin: 0 auto;
  top: 220px;
  margin-left: -256px;
  left: 50%;
  background-image: url(../images/sprite/logo-intro.png);
  animation: logo_intro 2.2s steps(33) forwards; }

.text-highlight {
  color: #21ffe2; }
  .text-highlight a, .text-highlight a:visited, .text-highlight a:active {
    color: #21ffe2;
    text-decoration: none; }
  .text-highlight a:hover {
    color: #fff;
    text-decoration: underline; }

#scene {
  position: relative;
  width: 100%;
  height: 600px;
  top: -100px;
  padding: 0;
  margin: 0 auto;
  background-color: #000B38;
  pointer-events: none; }

#home-copy {
  z-index: 30;
  display: block;
  position: relative; }

.vines {
  background: transparent no-repeat;
  position: absolute;
  width: 2800px;
  height: 884px;
  left: 50%;
  margin-left: -1400px;
  top: 0px; }
  .vines.fg {
    background-image: url(../images/svg/fg_vines.svg); }
  .vines.mg {
    background-image: url(../images/svg/mg_vines.svg); }
  .vines.bg {
    background-image: url(../images/svg/bg_vines.svg); }

.jungle {
  background: transparent no-repeat;
  position: absolute;
  top: 0px;
  width: 2800px;
  height: 884px;
  left: 50%;
  margin-left: -1400px; }
  .jungle.fg {
    background-image: url(../images/svg/fg.svg); }
  .jungle.mg {
    background-image: url(../images/svg/mg.svg); }
  .jungle.bg {
    background-image: url(../images/svg/bg.svg); }

.splash-logo {
  background: transparent no-repeat;
  position: absolute;
  cursor: pointer;
  pointer-events: all;
  width: 500px;
  height: 200px;
  margin: 0 auto;
  margin-left: -250px;
  left: 50%;
  top: 320px;
  background-image: url(../images/svg/logo.svg);
  animation: none; }
  .splash-logo.hover {
    width: 500px;
    height: 220px;
    margin-top: -6px;
    background-image: url(../images/sprite/logo-hover.png);
    animation: logo_hover 0.5s steps(10) forwards; }
  .splash-logo.active {
    width: 502px;
    height: 220px;
    margin-top: -10px;
    background-image: url(../images/sprite/logo-jammin.png);
    animation: logo_jammin 0.7s steps(16) infinite; }

.svg-header {
  background: transparent no-repeat;
  position: relative;
  margin: 20px auto;
  left: 50%; }
  .svg-header.home {
    width: 260px;
    height: 140px;
    margin-top: 40px;
    margin-left: -130px;
    background-image: url(../images/svg/home-header.svg); }
  .svg-header.career {
    width: 450px;
    height: 120px;
    margin-top: 100px;
    margin-left: -225px;
    background-image: url(../images/svg/career-header.svg); }

.background {
  background-color: #152569;
  position: absolute;
  top: 100px;
  width: 2300px;
  left: 50%;
  margin-left: -1150px;
  height: 500px; }

.layer {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0; }

.fireflies {
  background: transparent;
  position: absolute;
  display: block;
  visibility: visible;
  width: 1920px;
  height: 800px;
  top: 0px;
  left: 50%;
  margin-left: -960px;
  transform-origin: 50% 10%; }
  .fireflies.ff-bg {
    background-image: url(../images/fireflies-bg.png);
    animation: fireflies_back 12s -2s ease-in-out infinite reverse; }
  .fireflies.ff-fg {
    background-image: url(../images/fireflies-fg.png);
    animation: fireflies_front 12s ease-in-out infinite; }

@keyframes fireflies_back {
  0% {
    transform: rotate(3deg); }

  50% {
    transform: translate(0px, -30px) rotate(-3deg); }

  100% {
    transform: translate(0px, 0px) rotate(3deg); } }

@keyframes fireflies_front {
  0% {
    transform: rotate(-3deg); }

  50% {
    transform: translate(0px, -30px) rotate(3deg); }

  100% {
    transform: translate(0px, 0px) rotate(-3deg); } }

.sprite-animal {
  background: transparent no-repeat;
  position: absolute;
  display: inline-block;
  visibility: visible;
  margin: 0 auto;
  transform: scale(1, 1);
  left: 50%; }
  .sprite-animal.bird {
    margin-left: 250px;
    top: 320px;
    width: 300px;
    height: 350px;
    background-image: url(../images/sprite/sprite-animal-bird.png);
    animation: bird_amb 2s steps(20) infinite; }
    .sprite-animal.bird.active {
      animation: bird_jam 0.6s steps(7) infinite !important; }
  .sprite-animal.ape {
    margin-left: 210px;
    top: 470px;
    width: 222px;
    height: 248px;
    background-image: url(../images/sprite/sprite-animal-ape.png);
    animation: ape_amb 0.7s steps(8) infinite; }
    .sprite-animal.ape.active {
      animation: ape_jam 1.2s steps(16) infinite !important; }
    .sprite-animal.ape.woops {
      display: block !important;
      visibility: visible !important;
      transform: scale(1, 1) !important;
      top: 50% !important;
      margin-left: -111px !important;
      margin-top: -124px !important; }
  .sprite-animal.hyena {
    margin-left: -500px;
    top: 425px;
    width: 290px;
    height: 300px;
    background-image: url(../images/sprite/sprite-animal-hyena.png);
    animation: hyena_amb 0.5s steps(8) infinite; }
    .sprite-animal.hyena.active {
      animation: hyena_jam 0.7s steps(10) infinite !important; }
  .sprite-animal.oldmonkey {
    margin-left: -480px;
    top: 250px;
    width: 236px;
    height: 300px;
    background-image: url(../images/sprite/sprite-animal-oldmonkey.png);
    animation: oldmonkey_amb 1.4s steps(18) infinite; }
    .sprite-animal.oldmonkey.active {
      animation: oldmonkey_jam 1s steps(18) infinite !important; }

.sprite-career {
  background: transparent no-repeat;
  position: relative;
  display: block;
  visibility: visible;
  margin: 0 auto;
  transform: scale(1, 1);
  left: 50%;
  margin-left: -175px;
  width: 350px;
  height: 200px;
  background-image: url(../images/sprite/sprite-animal-career.png);
  animation: career_amb 3s steps(30) infinite; }

@media (max-width: 990px) {
  #scene {
    height: 400px;
    top: 0; }

  .splash-logo {
    top: 140px;
    transform: scale(0.7, 0.7); }

  #logo-intro {
    top: 140px;
    margin-left: -254px;
    transform: scale(0.7, 0.7); }

  .home-header {
    transform: scale(0.8, 0.8);
    margin: 0 auto;
    margin-top: 30px; }

  .background {
    top: 100px;
    height: 300px; }

  .jungle {
    width: 1600px;
    height: 884px;
    margin-left: -800px; }
    .jungle.bg {
      top: 0px; }

  .vines {
    width: 1600px;
    height: 884px;
    margin-left: -800px; }

  .fireflies {
    width: 900px;
    height: 300px;
    margin-left: -450px;
    top: 100px; }

  .sprite-animal {
    transform: scale(0.62, 0.62); }
    .sprite-animal.bird {
      margin-left: 90px;
      top: 120px; }
    .sprite-animal.ape {
      margin-left: 120px;
      top: 220px; }
    .sprite-animal.hyena {
      margin-left: -400px;
      top: 180px; }
    .sprite-animal.oldmonkey {
      margin-left: -330px;
      top: 70px; }
 }

@media (max-width: 500px) {
  .sprite-animal {
    display: none;
    visibility: hidden; }
 }

.leafContainer {
  position: absolute;
  width: 40px;
  height: 40px;
  /* We use the following properties to apply the fade and drop animations to each leaf.
       Each of these properties takes two values. These values respectively match a setting
       for fade and drop.
    */
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, normal;
  animation-timing-function: linear, ease-in; }

/* This CSS rule is applied to all img elements directly inside div elements which are
   directly inside the leafContainer div. In other words, it matches the 'img' elements
   inside the leafDivs which are created in the createALeaf() function.
*/
.leaf-svg {
  position: absolute;
  width: 40px;
  height: 40px;
  /* We use the following properties to adjust the clockwiseSpin or counterclockwiseSpinAndFlip
       animations on each leaf.
       The createALeaf function in the Leaves.js file determines whether a leaf has the 
       clockwiseSpin or counterclockwiseSpinAndFlip animation.
    */
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  transform-origin: 50% -100%; }

/* Makes a leaf fall from -300 to 600 pixels in the y-axis */
@keyframes drop {
  /* Move a leaf to -300 pixels in the y-axis at the start of the animation */
  /* Move a leaf to 600 pixels in the y-axis at the end of the animation */
  0% {
    transform: translate(0px, 200px); }

  100% {
    transform: translate(0px, 600px); } }

@media screen and (max-width: 1200px) {
  @keyframes drop {
    /* Move a leaf to -300 pixels in the y-axis at the start of the animation */
    /* Move a leaf to 600 pixels in the y-axis at the end of the animation */
    0% {
      transform: translate(0px, 100px); }

    100% {
      transform: translate(0px, 300px); } }
 }

/* Rotates a leaf from -50 to 50 degrees in 2D space */
@keyframes clockwiseSpin {
  /* Rotate a leaf by -50 degrees in 2D space at the start of the animation */
  /*  Rotate a leaf by 50 degrees in 2D space at the end of the animation */
  0% {
    transform: rotate(-50deg); }

  100% {
    transform: rotate(50deg); } }

/* Flips a leaf and rotates it from 50 to -50 degrees in 2D space */
@keyframes counterclockwiseSpinAndFlip {
  /* Flip a leaf and rotate it by 50 degrees in 2D space at the start of the animation */
  /* Flip a leaf and rotate it by -50 degrees in 2D space at the end of the animation */
  0% {
    transform: scale(-1, 1) rotate(50deg); }

  100% {
    transform: scale(-1, 1) rotate(-50deg); } }

@keyframes logo_jammin {
  from {
    background-position: 0px; }

  to {
    background-position: -8032px; } }

@keyframes logo_hover {
  from {
    background-position: 0px; }

  to {
    background-position: -5020px; } }

@keyframes logo_intro {
  from {
    background-position: 0px; }

  to {
    background-position: -16896px; } }

@keyframes bird_amb {
  from {
    background-position: 0px; }

  to {
    background-position: -6000px; } }

@keyframes bird_jam {
  from {
    background-position: -6000px; }

  to {
    background-position: -8100px; } }

@keyframes ape_amb {
  from {
    background-position: 0px; }

  to {
    background-position: -1776px; } }

@keyframes ape_jam {
  from {
    background-position: -1776px; }

  to {
    background-position: -5328px; } }

@keyframes hyena_amb {
  from {
    background-position: 0px; }

  to {
    background-position: -2400px; } }

@keyframes hyena_jam {
  from {
    background-position: -2400px; }

  to {
    background-position: -5400px; } }

@keyframes oldmonkey_amb {
  from {
    background-position: 0px; }

  to {
    background-position: -4248px; } }

@keyframes oldmonkey_jam {
  from {
    background-position: -4248px; }

  to {
    background-position: -8496px; } }

@keyframes career_amb {
  from {
    background-position: 0px; }

  to {
    background-position: -10500px; } }