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

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1;
  color: #7f8c8d;
  background-color: #fff; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

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

img, embed, object, video {
  max-width: 100%; }

textarea {
  resize: none; }

select {
  font-size: 0.8125em;
  /* 13/16 */
  /* 	padding: 0.15384615em;/* 4/13 ; 2/13 */ }

@font-face {
  font-family: 'ProximaNova';
  src: url("fonts/proximanova-regular-webfont.eot");
  src: url("fonts/proximanova-regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/proximanova-regular-webfont.woff") format("woff"), url("fonts/proximanova-regular-webfont.ttf") format("truetype"), url("fonts/proximanova-regular-webfont.svg#ProximaNovaRegular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'ProximaNova';
  src: url("fonts/proximanova-bold-webfont.eot");
  src: url("fonts/proximanova-bold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/proximanova-bold-webfont.woff") format("woff"), url("fonts/proximanova-bold-webfont.ttf") format("truetype"), url("fonts/proximanova-bold-webfont.svg#ProximaNovaBold") format("svg");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'fut';
  src: url("fonts/futurah-webfont.eot");
  src: url("fonts/futurah-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/futurah-webfont.woff") format("woff"), url("fonts/futurah-webfont.ttf") format("truetype"), url("fonts/futurah-webfont.svg#futura_hv_btheavy") format("svg");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'fut';
  src: url("fonts/futuram-webfont.eot");
  src: url("fonts/futuram-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/futuram-webfont.woff") format("woff"), url("fonts/futuram-webfont.ttf") format("truetype"), url("fonts/futuram-webfont.svg#futura_md_btmedium") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'fut_condensed';
  src: url("fonts/futuramc-webfont.eot");
  src: url("fonts/futuramc-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/futuramc-webfont.woff") format("woff"), url("fonts/futuramc-webfont.ttf") format("truetype"), url("fonts/futuramc-webfont.svg#futura_mdcn_btmedium") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'fut_condensed';
  src: url("fonts/futurabc-webfont.eot");
  src: url("fonts/futurabc-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/futurabc-webfont.woff") format("woff"), url("fonts/futurabc-webfont.ttf") format("truetype"), url("fonts/futurabc-webfont.svg#futura_bdcn_btbold") format("svg");
  font-weight: bold;
  font-style: normal; }

body {
  font: 100%/1.5 'ProximaNova', Arial,'Helvetica Neue',Helvetica,sans-serif; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'fut', Arial,'Helvetica Neue',Helvetica,sans-serif;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center; }

textarea, input, select {
  font-family: 'ProximaNova', Arial,'Helvetica Neue',Helvetica,sans-serif; }

a {
  color: #55a2c4; }
  a:hover {
    text-decoration: none; }

.inner {
  width: 90%;
  margin: 0 auto;
  max-width: 1024px; }

body > section {
  padding: 3.75em 0em; }

section > div.inner > h1 {
  color: #e74c3c;
  font-size: 1.75em;
  margin-bottom: 1.07143em; }

#nav-wrapper nav {
  background-color: #fff;
  border-bottom: solid 1px #ddd;
  padding: 1.25em 0em;
  overflow: hidden;
  width: 100%; }
  #nav-wrapper nav > a {
    position: absolute;
    left: 0;
    text-decoration: none;
    -moz-transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    -ms-transition: opacity 1s ease;
    transition: opacity 1s ease;
    opacity: 0;
    height: 0; }
    #nav-wrapper nav > a > span {
      display: inline-block;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      width: 36px;
      height: 36px;
      background-image: url("../images/logo_mini.png");
      background-position: 0 0;
      background-repeat: no-repeat;
      background-color: transparent;
      -moz-transition: background-position 1s ease 0.4s;
      -webkit-transition: background-position 1s ease 0.4s;
      -o-transition: background-position 1s ease 0.4s;
      -ms-transition: background-position 1s ease 0.4s;
      transition: background-position 1s ease 0.4s;
      margin: 0 0.625em 0 0.625em;
      vertical-align: middle; }
    #nav-wrapper nav > a > b {
      -moz-transition: all 1s cubic-bezier(1, -0.53, 0.405, 1.425) 0.2s;
      -webkit-transition: all 1s cubic-bezier(1, -0.53, 0.405, 1.425) 0.2s;
      -o-transition: all 1s cubic-bezier(1, -0.53, 0.405, 1.425) 0.2s;
      -ms-transition: all 1s cubic-bezier(1, -0.53, 0.405, 1.425) 0.2s;
      transition: all 1s cubic-bezier(1, -0.53, 0.405, 1.425) 0.2s;
      display: inline-block;
      -webkit-transform: translate(0, -50px);
      -moz-transform: translate(0, -50px);
      -ms-transform: translate(0, -50px);
      -o-transform: translate(0, -50px);
      transform: translate(0, -50px);
      color: #e74c3c;
      text-transform: uppercase; }
    #nav-wrapper nav > a:hover {
      text-decoration: none; }
      #nav-wrapper nav > a:hover > span {
        background-position: 0 -37px; }
      #nav-wrapper nav > a:hover > b {
        -webkit-transform: translate(0, 2px);
        -moz-transform: translate(0, 2px);
        -ms-transform: translate(0, 2px);
        -o-transform: translate(0, 2px);
        transform: translate(0, 2px); }
  #nav-wrapper nav p {
    margin: 0.3125em auto 0;
    text-align: center; }
    #nav-wrapper nav p a {
      text-transform: uppercase;
      text-decoration: none;
      -moz-transition: color 0.3s ease;
      -webkit-transition: color 0.3s ease;
      -o-transition: color 0.3s ease;
      -ms-transition: color 0.3s ease;
      transition: color 0.3s ease;
      color: #000;
      margin: 0 0.75em; }
      #nav-wrapper nav p a:last-child {
        margin-right: 0; }
      #nav-wrapper nav p a.active {
        color: #e74c3c; }
      #nav-wrapper nav p a:hover {
        color: #e74c3c; }
#nav-wrapper.fixed {
  height: 3.5em; }
  #nav-wrapper.fixed nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    border-top: solid 3px #e74c3c;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    font-size: 0.875em;
    padding: 0.71429em 0;
    height: 2.57143em; }
    #nav-wrapper.fixed nav p {
      margin: 0.71429em auto 0; }
    #nav-wrapper.fixed nav > a {
      opacity: 1;
      height: auto; }

#banner {
  background-color: #e74c3c;
  text-align: center;
  padding: 5em 0em; }
  #banner img {
    margin-bottom: 3.125em; }
  #banner h1 {
    color: #fff;
    font-size: 2.4375em;
    font-family: 'fut_condensed', Arial,'Helvetica Neue',Helvetica,sans-serif; }

#interlude {
  text-align: center;
  background-image: url(../images/logo_bg.png);
  background-position: 50% 400px;
  background-color: #fff;
  background-repeat: no-repeat;
  padding: 9.375em 0em; }
  #interlude div.inner h1 {
    color: #7f8c8d;
    font-family: 'fut_condensed', Arial,'Helvetica Neue',Helvetica,sans-serif;
    text-transform: none;
    font-size: 2.1875em; }

#about {
  background-color: #ecf0f1;
  text-align: center; }
  #about div.inner {
    width: 60.41667%; }
    #about div.inner p {
      font-size: 1.125em; }
      #about div.inner p + p {
        margin-top: 0.625em; }
      #about div.inner p a {
        color: #e74c3c; }
    #about div.inner div.us {
      margin-top: 2.5em; }
      #about div.inner div.us:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden; }
      #about div.inner div.us div {
        text-align: center;
        float: left;
        width: 49%; }
        #about div.inner div.us div:first-child {
          margin-right: 2%; }
        #about div.inner div.us div img {
          margin-bottom: 1.25em; }
        #about div.inner div.us div h2 {
          color: #e74c3c; }

#work div.inner > p {
  text-align: center; }
#work div.inner > article {
  padding: 1.875em 0;
  margin-bottom: 1.25em; }
  #work div.inner > article:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }
  #work div.inner > article:first-of-type {
    margin-top: 1.875em; }
  #work div.inner > article:last-of-type {
    margin-bottom: 0; }
  #work div.inner > article > div {
    float: left; }
    #work div.inner > article > div:first-child {
      width: 56.25%;
      margin-right: 2.08333%; }
    #work div.inner > article > div + div {
      width: 41.66667%; }
      #work div.inner > article > div + div h1 {
        font-size: 1.125em;
        color: #e74c3c;
        margin-bottom: 0.55556em;
        text-align: left; }
      #work div.inner > article > div + div p {
        color: #7f8c8d; }
        #work div.inner > article > div + div p.link {
          font-size: 0.875em;
          margin-top: 1.07143em;
          text-transform: uppercase; }
          #work div.inner > article > div + div p.link a {
            word-wrap: break-word;
            color: #e74c3c; }

footer#contact {
  background-color: #e74c3c;
  color: #fff;
  padding: 1.25em 0 0;
  margin-bottom: 0;
  overflow: hidden;
  border-bottom: solid 4px #c0392b; }
  footer#contact > div.inner {
    overflow: hidden;
    margin-bottom: 0.9375em; }
    footer#contact > div.inner > nav {
      float: left; }
      footer#contact > div.inner > nav > p a {
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        -moz-transition: color 0.3s ease;
        -webkit-transition: color 0.3s ease;
        -o-transition: color 0.3s ease;
        -ms-transition: color 0.3s ease;
        transition: color 0.3s ease;
        margin: 0 0.75em; }
        footer#contact > div.inner > nav > p a:first-child {
          margin-left: 0; }
        footer#contact > div.inner > nav > p a:last-child {
          margin-right: 0; }
        footer#contact > div.inner > nav > p a:hover {
          color: #000; }
    footer#contact > div.inner > section {
      float: right;
      width: 33.33333%; }
      footer#contact > div.inner > section:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden; }
      footer#contact > div.inner > section > h1 {
        font-size: 1.125em;
        text-transform: none;
        font-family: "ProximaNova", "fut", Helvetica, Arial, sans-serif;
        margin-bottom: 0.625em; }
      footer#contact > div.inner > section > p.hire {
        text-align: center;
        margin-bottom: 0.3125em; }
        footer#contact > div.inner > section > p.hire > a {
          display: inline-block;
          text-indent: 103%;
          white-space: nowrap;
          overflow: hidden;
          height: 42px;
          width: 160px;
          background: url("../images/contact_sprites.png") 0 -65px no-repeat transparent; }
          footer#contact > div.inner > section > p.hire > a:hover {
            background-position: 0 1px; }
      footer#contact > div.inner > section > p {
        font-size: 0.875em;
        text-align: center; }
        footer#contact > div.inner > section > p a {
          text-decoration: none;
          color: #fff; }
          footer#contact > div.inner > section > p a:hover {
            text-decoration: underline; }
        footer#contact > div.inner > section > p > span {
          font-size: 1.25em;
          margin: 0 0.25em; }

article.popup {
  position: absolute;
  background-color: #fff;
  padding: 0.9375em;
  border: solid 1px #d0d0d0;
  display: none;
  z-index: 15;
  max-width: 52.08333%;
  min-width: 37.5%; }
  article.popup > p {
    text-align: right; }
    article.popup > p > a.close {
      text-transform: uppercase;
      font-size: 0.75em;
      color: #bbb;
      text-decoration: none;
      font-weight: bold; }
      article.popup > p > a.close b {
        display: inline-block;
        margin-left: 0.16667em; }
      article.popup > p > a.close:hover {
        color: #999; }
  article.popup div.content h1 {
    margin-bottom: 0.3125em;
    text-align: left;
    color: #e74c3c; }
  article.popup div.content form {
    width: 100%; }
    article.popup div.content form > h1 + p {
      margin-bottom: 1.25em; }
    article.popup div.content form > div {
      margin-bottom: 0.9375em; }
      article.popup div.content form > div:last-of-type {
        margin-bottom: 1.5625em; }
      article.popup div.content form > div label {
        display: inline-block;
        width: 15%;
        text-transform: uppercase;
        font-size: 0.875em;
        color: #000; }
      article.popup div.content form > div input, article.popup div.content form > div textarea {
        font-size: 1em;
        width: 70%;
        border: solid 1px #ddd;
        padding: 0.3125em 0.625em;
        background-color: #fff;
        -moz-transition: background 0.5s ease;
        -webkit-transition: background 0.5s ease;
        -o-transition: background 0.5s ease;
        -ms-transition: background 0.5s ease;
        transition: background 0.5s ease; }
        article.popup div.content form > div input:focus, article.popup div.content form > div textarea:focus {
          border-color: #ccc;
          background-color: #ecf0f1; }
        article.popup div.content form > div input.error, article.popup div.content form > div textarea.error {
          border-color: #f7c1bc !important; }
      article.popup div.content form > div textarea {
        margin-left: 16%; }
    article.popup div.content form > p input[type=submit] {
      font-size: 0.875em;
      text-transform: uppercase;
      color: #fff;
      background-color: #e74c3c;
      padding: 0.71429em 1.78571em;
      border: none;
      cursor: pointer; }
      article.popup div.content form > p input[type=submit]:hover {
        background-color: #DF5A4D; }
    article.popup div.content form > p img.load {
      display: none; }
  article.popup div.content > section.success {
    display: none; }

#blocker {
  display: none;
  background-color: rgba(0, 0, 0, 0.7);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 12; }

/* Media queries */
/* Cell phone portrait */
@media screen and (max-width: 320px) {
  #banner {
    padding: 3em 0; }
    #banner > div.inner > img {
      margin-bottom: 2em; }
    #banner > div.inner > h1 {
      font-size: 2.0625em; }

  #interlude {
    padding: 5em 0; }

  #about > div.inner > div.us {
    margin-top: 2.5em; }
    #about > div.inner > div.us div {
      float: none;
      width: 100%;
      margin-bottom: 1.875em;
      overflow: hidden;
      text-align: center; }
      #about > div.inner > div.us div:first-child {
        margin-right: 0; } }
/* Cell phone landscape */
@media screen and (max-width: 480px) {
  #nav-wrapper nav > a {
    display: none; }
  #nav-wrapper.fixed nav {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none; }

  #interlude {
    background-position: 50% 50%; }
    #interlude > div.inner > h1 {
      font-size: 1.75em; }

  footer#contact > div.inner > nav {
    float: none;
    margin-bottom: 1.5625em; }
    footer#contact > div.inner > nav > p {
      text-align: center;
      font-size: 0.875em; }
  footer#contact > div.inner > section {
    width: 100%;
    float: none; } }
/* Small tablet portrait */
@media screen and (max-width: 600px) {
  #work div.inner > article > div:first-child {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.9375em; }
  #work div.inner > article > div + div {
    width: 100%; }

  article.popup {
    width: 80%;
    min-width: none;
    max-width: none; }
    article.popup > div.content > form > div > label {
      display: block;
      width: 100%; }
    article.popup > div.content > form > div > textarea {
      margin-left: 0; } }
/* Large tablet portrait */
@media screen and (max-width: 768px) {
  .inner, #about > div.inner {
    position: relative;
    width: auto;
    margin: 0 5px; } }
/* Small tablet landscape */
@media screen and (max-width: 800px) {
  footer#contact > div.inner > section > p + p a {
    display: block; }
  footer#contact > div.inner > section > p + p > span {
    display: none; } }
@media screen and (min-width: 1024px) {
  .inner {
    width: 1024px; }

  #about > div.inner {
    width: 618.66667px; } }