/* CSS Document*/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit; }

/*=========================================
Reset
=========================================== */
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; }

blockquote, q {
  quotes: none; }

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

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

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.group:before,
.group:after {
  content: "";
  display: table; }

.group:after {
  clear: both; }

.group {
  zoom: 1; }

svg path {
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease; }

/*=========================================
General Spacing
=========================================== */
.post p {
  margin-bottom: 20px; }

/*=========================================
Base
=========================================== */
html, body {
  min-height: 100%; }

body {
  font: 14px/1 NimbusSansDOT, Helvetica, Arial, sans-serif;
  color: black;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  max-width: 100%;
  color: #404040;
  background: #fff; }

.container {
  position: relative;
  width: 100%;
  margin: 0 auto; }

nav {
  position: absolute;
  right: 40px;
  top: 40px;
  z-index: 1000; }
  nav ul {
    float: right;
    list-style-type: none; }
    nav ul li {
      display: inline-block;
      position: relative; }
      nav ul li + li {
        padding-left: 1em; }
        @media (min-width: 700px) {
          nav ul li + li {
            padding-left: 2em; } }
      nav ul li a {
        font-size: 1.5em;
        font-weight: 400;
        opacity: .4;
        color: white; }
        @media (min-width: 1030px) {
          nav ul li a {
            color: black; } }
        .light-color nav ul li a {
          color: white; }
      nav ul li.current a, nav ul li a:hover {
        opacity: 1; }
      nav ul li.current a {
        border-bottom: 2px solid currentcolor; }
  .light-color nav .joe path {
    fill: white; }

img {
  max-width: 100%; }

/*=========================================
Front Page Grid Stuff
=========================================== */
.thumbnails {
  position: relative;
  z-index: 2; }

.row {
  display: block;
  width: 100%;
  min-height: 320px;
  min-height: 100vw; }
  .row > * {
    display: block;
    min-height: 320px;
    min-height: 100vw; }
  @media (min-width: 700px) {
    .row, .row .row > * {
      min-height: 350px;
      min-height: 50vw; } }
  @media (min-width: 1030px) {
    .row, .row .row > * {
      min-height: 200px;
      min-height: 25vw; } }

@media (min-width: 700px) {
  .row {
    display: block; }
    .row .row {
      display: table;
      table-layout: fixed; }
      .row .row > * {
        display: table-cell; } }
@media (min-width: 1030px) {
  .row {
    display: table;
    table-layout: fixed; }
    .row > * {
      display: table-cell;
      vertical-align: top; } }
.tweet {
  background: #F0AF0C !important;
  color: white;
  text-align: left;
  font-size: 1.5em; }
  .tweet span.tweet-text {
    max-width: 80%; }
  .tweet span.tweet-link {
    position: absolute;
    bottom: 1.5em;
    bottom: 2.25rem;
    left: 1em;
    left: 1.5rem; }

.instagram-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: rgba(255, 255, 255, 0);
  background-color: transparent;
  background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 1em 1.5em;
  font-size: 1.5em;
  line-height: 120%;
  margin-bottom: -2px;
  -webkit-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  -ms-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1); }

.instagram:hover .instagram-text {
  margin-top: 0;
  color: white; }

.row > .project, .row > a {
  position: relative;
  overflow: hidden;
  padding: 1.5em;
  background: white center center no-repeat;
  background-size: cover, 100%;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); }
  .row > .project h2, .row > a h2 {
    display: none; }

#intro {
  min-height: auto !important; }

.row.empty, .row .row.empty {
  display: none; }
  @media (min-width: 1030px) {
    .row.empty, .row .row.empty {
      display: block; } }

#intro {
  background: #2D363A;
  color: white;
  padding: 40px;
  padding-bottom: 120px; }
  @media (min-width: 1030px) {
    #intro {
      padding-bottom: 40px; } }
  #intro a {
    color: #F0AF0C; }
    #intro a:hover {
      border-bottom: 2px solid currentcolor; }
  #intro h2 {
    margin-top: 3em; }
  #intro .joe {
    font-size: 1.5em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4); }
    #intro .joe:hover {
      color: white; }

.row .p-blix {
  background-image: url("../images/thumbnail-blix.png"); }

.row .p-target {
  background-image: url("../images/thumbnail-target.png"); }

.row .p-showtime {
  background-image: url("../images/thumbnail-showtime.png"); }

.row .p-illustration {
  background-image: url("../images/thumbnail-illustration.png"); }

.row .p-julep {
  background-image: url("../images/thumbnail-julep.png"); }

.row .p-clipcard {
  background-image: url("../images/thumbnail-clipcard.png"); }

.row .p-bluenile {
  background-image: url("../images/thumbnail-bluenile.png"); }

@media (min-width: 1030px) {
  .row > a:hover {
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
    transform: scale(1.02);
    z-index: 100000;
    box-shadow: 0em 1.5em 3em rgba(0, 0, 0, 0.5);
    border-radius: 4px; } }
/*=========================================
Footer
=========================================== */
#footer {
  position: relative;
  z-index: 1;
  background: white;
  padding: 2em 1.5em 10em 1.5em;
  min-height: 12.5vw; }

/*=========================================
Typography
=========================================== */
a {
  text-decoration: none;
  -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  -ms-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); }

ul {
  margin: 0;
  padding: 0; }

li {
  list-style-type: circle;
  list-style-position: inside; }

/* Line Height */
.post-body, p {
  line-height: 1.5; }

h1 {
  font-family: Campton;
  text-align: center;
  display: block;
  line-height: 100%;
  font-weight: 700;
  font-size: 7em;
  padding-bottom: .15em; }

h2 {
  font-size: 36px;
  color: inherit;
  line-height: 40px;
  margin-bottom: 40px;
  font-weight: 200; }

h3 {
  font-size: 24px;
  font-weight: 200;
  margin-bottom: 6px; }

h4 {
  font-size: 1em;
  line-height: 120%;
  color: inherit;
  font-weight: 600; }

p {
  font-size: 1.5em;
  font-weight: 400;
  text-align: left; }
  aside p {
    font-size: 14px;
    font-weight: 500;
    max-width: 300px;
    margin: 0; }
  p + p {
    margin-top: 1.5em; }

/*=========================================
Post Page
=========================================== */
.post-header {
  position: relative;
  width: 100%;
  min-height: 600px;
  min-height: 50vh;
  margin: 0 auto;
  padding-top: 12%; }
  .post-header .tags {
    font-weight: 400;
    text-align: center;
    font-size: 1.25em;
    margin-bottom: 40px; }

@-webkit-keyframes fadeIn {
  from {
    -webkit-transform: translate(0px, 1em);
    opacity: 0; }
  to {
    -webkit-transform: translate(0, 0);
    opacity: 1; } }
@-moz-keyframes fadeIn {
  from {
    transform: translate(0px, 1em);
    opacity: 0; }
  to {
    transform: translate(0, 0);
    opacity: 1; } }
@keyframes fadeIn {
  from {
    transform: translate(0px, 1em);
    opacity: 0; }
  to {
    transform: translate(0, 0);
    opacity: 1; } }
.post-header, .post-body {
  opacity: 0;
  -webkit-animation: fadeIn cubic-bezier(0.58, 0.31, 0.32, 0.92) 1;
  -moz-animation: fadeIn cubic-bezier(0.58, 0.31, 0.32, 0.92) 1;
  animation: fadeIn cubic-bezier(0.58, 0.31, 0.32, 0.92) 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s; }

.ipad-persepective {
  background: transparent url("../images/ipad-air-black.png") center center no-repeat;
  background-size: contain;
  text-align: center; }
  .ipad-persepective.white {
    background-image: url("../images/ipad-air-white.png"); }
  .ipad-persepective img {
    max-width: 100%;
    max-height: 100%;
    transform: matrix3d(0.57723, -0.24136, 0, 0.0001, 0.52169, 0.24035, 0, -0.00012, 0, 0, 1, 0, 32, 351, 0, 1);
    transform-origin: 0px 0px 0px; }

.post-body section {
  display: table;
  width: 100%;
  table-layout: fixed; }
  .post-body section > * {
    display: table-cell;
    vertical-align: middle; }

.post-body {
  text-align: center; }
  .post-body p, .post-body aside {
    text-align: left; }
  .post-body img {
    width: auto;
    margin: 2em auto; }

.iphone, .icon, .ipad {
  text-align: center; }

.iphone img {
  -webkit-transform: translateX(4.16%) translateY(4.68%);
  -ms-transform: translateX(4.16%) translateY(4.68%);
  transform: translateX(4.16%) translateY(4.68%); }

.icon img {
  -webkit-transform: translateY(5.175%);
  -ms-transform: translateY(5.175%);
  transform: translateY(5.175%); }

.ipad {
  background: red url(../images/ipad-white.png) 50% 50% no-repeat;
  background-size: contain; }
  .ipad img {
    -webkit-transform: translateX(4.97%) translateY(5.03%);
    -ms-transform: translateX(4.97%) translateY(5.03%);
    transform: translateX(4.97%) translateY(5.03%); }

/*=========================================
Post Navigation
=========================================== */
#post-nav svg {
  display: inline-block;
  fill: rgba(0, 0, 0, 0.15);
  transition: inherit;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin: 0 auto; }

.post-nav-button {
  position: absolute;
  width: 50%; }
  @media (min-width: 700px) {
    .post-nav-button {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      position: fixed;
      width: auto; } }
  .post-nav-button a {
    padding: 5px;
    height: 60px;
    display: block;
    font-size: 1.5em; }
    @media (min-width: 700px) {
      .post-nav-button a {
        border-radius: 100px;
        -webkit-transition: all 200ms cubic-bezier(0.17, 0.89, 0.54, 0.95);
        transition: all 200ms cubic-bezier(0.17, 0.89, 0.54, 0.95); } }
    .post-nav-button a:hover {
      background: white;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
      overflow: visible; }
      @media (min-width: 700px) {
        .post-nav-button a:hover .title {
          opacity: 1;
          width: auto;
          display: inline-block;
          padding: 0 1em; } }
  .post-nav-button .arrow {
    height: 50px;
    width: 50px;
    text-align: center; }
  .post-nav-button .title {
    transition: inherit;
    padding: 0;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
    @media (min-width: 700px) {
      .post-nav-button .title {
        opacity: 0;
        width: 1px;
        overflow: hidden;
        display: inline-block;
        white-space: nowrap; } }

span.prev {
  left: 20px; }
  span.prev .arrow {
    float: left; }
span.next {
  right: 20px; }
  span.next .arrow {
    float: right; }

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