/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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 {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0; }

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

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

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

html {
  font-size: 17px;
  font-family: "freight-sans-pro",sans-serif; }

body {
  width: 100%;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0 auto;
  max-width: 1200px; }

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; }

h1 {
  font-family: "freight-text-pro",sans-serif;
  font-size: 3.4rem;
  line-height: 1.2em;
  margin: 0.6em 0 0.4em;
  font-weight: 700;
  text-align: center;
  color: #2b3033; }
  @media all and (max-width: 700px) {
    h1 {
      font-size: 2.2rem; } }

h2 {
  font-size: 1.6rem;
  line-height: 1.5em;
  font-weight: 300;
  text-align: center;
  color: #2b3033; }
  h2 a {
    font-weight: 500; }
  @media all and (max-width: 700px) {
    h2 {
      font-size: 1.2rem;
      font-weight: 500; } }

h3 {
  font-family: "freight-text-pro",sans-serif;
  font-size: 2.8rem;
  line-height: 1.3em;
  text-align: center;
  font-weight: 600;
  margin: 0 auto 3.5%;
  display: block;
  color: #2b3033; }
  @media all and (max-width: 700px) {
    h3 {
      font-size: 2rem; } }
  h3 span {
    font-family: "freight-sans-pro",sans-serif;
    font-size: 0.6em;
    line-height: 1.2em;
    font-weight: 300;
    color: #8e9aa1;
    display: block; }

h4 {
  font-family: "freight-text-pro",sans-serif;
  font-size: 1.3rem;
  line-height: 1.8rem;
  margin-bottom: 0.4em;
  font-weight: 700; }

p {
  font-size: 1rem;
  line-height: 1.6rem;
  color: #2b3033;
  margin-bottom: 1rem;
  font-weight: 500; }
  p a {
    font-weight: 700; }

a {
  color: #2b3033;
  text-decoration: none;
  border-bottom: 1px dotted #c7cacb; }
  a:hover {
    color: #2b3033;
    border-bottom: 1px solid #8e9aa1; }

@media all and (min-width: 700px) {
  .project-description-half-column {
    width: 48.25%;
    float: left; }
    .project-description-half-column + .project-description-half-column {
      margin-left: 3.5%; } }

header {
  padding: 7% 3.5%;
  width: 100%;
  max-width: 960px;
  margin: auto; }
  @media all and (max-width: 700px) {
    header {
      padding: 10.5% 3.5%; } }

.profile-img {
  width: 120px;
  height: 120px;
  margin: auto;
  border-radius: 60px;
  margin-bottom: 1.75%; }
  @media all and (max-width: 700px) {
    .profile-img {
      width: 100px;
      height: 100px; } }
  .profile-img.me {
    background: url(../i/profile-me.jpg) top left no-repeat;
    background-size: 100%; }
  .profile-img.julie {
    background: url(../i/profile-julie.jpg) top left no-repeat;
    background-size: 100%; }

.project-wrapper {
  width: 100%;
  float: left;
  border-top: 1px solid rgba(43, 48, 51, 0.2);
  text-align: center; }

.project {
  width: 100%;
  max-width: 1100px;
  padding: 7% 3.5% 3.5%;
  display: inline-block;
  margin: 0 auto;
  text-align: left; }
  @media all and (max-width: 700px) {
    .project {
      padding: 10.5% 3.5% 0; } }
  .project .project-grid {
    width: 100%; }
    @media all and (max-width: 700px) {
      .project .project-grid {
        margin-top: 10.5%; } }
    .project .project-grid .project-grid-row {
      float: left;
      width: 100%;
      padding: 3.5% 0 3.5%; }
      @media all and (max-width: 700px) {
        .project .project-grid .project-grid-row {
          padding: 0; } }
    .project .project-grid .project-grid-cell {
      float: left;
      position: relative; }
      .project .project-grid .project-grid-cell + .half {
        margin-left: 3.5%; }
      .project .project-grid .project-grid-cell + .third {
        margin-left: 3.5%; }
      .project .project-grid .project-grid-cell + .quarter {
        margin-left: 3.5%; }
      .project .project-grid .project-grid-cell.no-shadow img,
      .project .project-grid .project-grid-cell.no-shadow .video-container {
        box-shadow: none; }
      .project .project-grid .project-grid-cell.full {
        width: 100%; }
        .project .project-grid .project-grid-cell.full img,
        .project .project-grid .project-grid-cell.full .video-container {
          margin-bottom: 3.5%; }
      .project .project-grid .project-grid-cell.half {
        width: calc((100% - 3.5%) / 2); }
        .project .project-grid .project-grid-cell.half img,
        .project .project-grid .project-grid-cell.half .video-container {
          margin-bottom: 7%; }
      .project .project-grid .project-grid-cell.third {
        width: calc((100% - (2 * 3.5%)) / 3); }
        .project .project-grid .project-grid-cell.third img,
        .project .project-grid .project-grid-cell.third .video-container {
          margin-bottom: 10.5%; }
      .project .project-grid .project-grid-cell.quarter {
        width: calc((100% - (3 * 3.5%)) / 4); }
        .project .project-grid .project-grid-cell.quarter img,
        .project .project-grid .project-grid-cell.quarter .video-container {
          margin-bottom: 14%; }
      @media all and (max-width: 700px) {
        .project .project-grid .project-grid-cell.full, .project .project-grid .project-grid-cell.half, .project .project-grid .project-grid-cell.third, .project .project-grid .project-grid-cell.quarter {
          width: 100%;
          margin-left: 0;
          margin-bottom: 10.5%; }
          .project .project-grid .project-grid-cell.full img,
          .project .project-grid .project-grid-cell.full .video-container, .project .project-grid .project-grid-cell.half img,
          .project .project-grid .project-grid-cell.half .video-container, .project .project-grid .project-grid-cell.third img,
          .project .project-grid .project-grid-cell.third .video-container, .project .project-grid .project-grid-cell.quarter img,
          .project .project-grid .project-grid-cell.quarter .video-container {
            margin-bottom: 7%; } }
      .project .project-grid .project-grid-cell img,
      .project .project-grid .project-grid-cell .video-container {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
        overflow: hidden; }
      .project .project-grid .project-grid-cell .video-container {
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        position: relative; }
        .project .project-grid .project-grid-cell .video-container.screencast {
          padding-bottom: 177.5%; }
        .project .project-grid .project-grid-cell .video-container.screencast.square {
          padding-bottom: 100%; }
        .project .project-grid .project-grid-cell .video-container.screencast.with-phone-frame {
          padding-bottom: 206%; }
        .project .project-grid .project-grid-cell .video-container .play-button {
          position: absolute;
          top: -0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 10;
          content: "";
          cursor: pointer;
          background-size: cover !important;
          border: none; }
          .project .project-grid .project-grid-cell .video-container .play-button#play-button-prototyping {
            background: url(../i/video-background-prototyping.jpg) no-repeat; }
          .project .project-grid .project-grid-cell .video-container .play-button#play-button-promo {
            background: url(../i/video-background-promo-video.jpg) no-repeat; }
          .project .project-grid .project-grid-cell .video-container .play-button#play-button-photo-uploading {
            background: url(../i/video-background-photo-uploading.jpg) no-repeat; }
          .project .project-grid .project-grid-cell .video-container .play-button#play-button-upshot-preview-video {
            background: url(../i/video-background-upshot-preview-video.jpg) no-repeat; }
          .project .project-grid .project-grid-cell .video-container .play-button#play-button-upshot-walkthrough {
            background: url(../i/video-background-upshot-walkthrough.jpg) no-repeat; }
          .project .project-grid .project-grid-cell .video-container .play-button#play-button-upshot-super-likes {
            background: url(../i/video-background-upshot-super-likes.jpg) no-repeat; }
          .project .project-grid .project-grid-cell .video-container .play-button#play-button-upshot-remixing {
            background: url(../i/video-background-upshot-remixing.jpg) no-repeat; }
          .project .project-grid .project-grid-cell .video-container .play-button#play-button-penny {
            background: url(../i/video-background-penny.png) no-repeat; }
          .project .project-grid .project-grid-cell .video-container .play-button:after {
            content: "";
            position: absolute;
            width: 150px;
            height: 150px;
            background: url(../i/play-button.png) no-repeat;
            background-size: contain;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -75px;
            opacity: 0.9; }
          .project .project-grid .project-grid-cell .video-container .play-button:hover:after {
            opacity: 1; }
      .project .project-grid .project-grid-cell iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
      .project .project-grid .project-grid-cell .flexible-background-image-wrapper {
        text-align: center;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
        margin-bottom: 3.5%; }
        .project .project-grid .project-grid-cell .flexible-background-image-wrapper img {
          box-shadow: none;
          margin: 0;
          max-width: 880px; }
      .project .project-grid .project-grid-cell.facebook-1 .flexible-background-image-wrapper {
        background: url(../i/work-facebook-1-background.png) top left repeat-x; }
      .project .project-grid .project-grid-cell.facebook-2 .flexible-background-image-wrapper {
        background: #ECEFF6; }
  .project .project-quote {
    width: 100%;
    float: left; }
    @media all and (max-width: 700px) {
      .project .project-quote {
        margin-bottom: 7%; } }
    .project .project-quote .profile-img {
      margin-bottom: 3.5%; }
      @media all and (max-width: 700px) {
        .project .project-quote .profile-img {
          margin-bottom: 7%; } }
    .project .project-quote h4 {
      text-align: center; }
    .project .project-quote p {
      font-family: "freight-text-pro",sans-serif;
      font-style: italic;
      font-size: 1.3rem;
      line-height: 2rem;
      text-align: center;
      font-weight: 400;
      width: 100%;
      max-width: calc(((((100% - (3 * 3.5%)) / 4)) * 2) + 3.5%);
      margin: 0 auto 3.5%; }
      @media all and (max-width: 700px) {
        .project .project-quote p {
          max-width: 80%;
          margin: 0 auto 7%; } }
  .project.facebook .project-img {
    background: url(../i/work-facebook-bg.jpg) top left repeat-x; }
    .project.facebook .project-img .img-container {
      max-width: 851px; }

.contact {
  padding: 7% 3.5%;
  border-top: 1px solid rgba(43, 48, 51, 0.2);
  text-align: center;
  width: 100%;
  float: left; }
  .contact h3 {
    margin-bottom: 1.75%; }
  .contact p {
    text-align: center; }

/*# sourceMappingURL=style.css.map */