/**
 * Wrapper
 */
.wrapper {
  max-width: -webkit-calc(1320px - (30px * 2));
  max-width: calc(1320px - (30px * 2));
  margin-right: auto;
  margin-left: auto;
  padding-right: 30px;
  padding-left: 30px; }

/**
* Content Grid
*/
.columns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; }

.column {
  display: flex;
  align-self: center; }

/**
 * Tile Grid
 */
.tile-wrapper {
  display: flex;
  justify-content: space-between; }
  .tile-wrapper > img,
  .tile-wrapper > div > img {
    width: 100%; }

.tile-1-col {
  width: 400px;
  margin-bottom: 30px; }
  .tile-1-col.is-parent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
  .tile-1-col > .tile-1-col {
    margin-left: 0;
    margin-right: 0; }
  .tile-1-col > .tile-1-col:last-child {
    margin-bottom: 0; }

.tile-2-col {
  width: -webkit-calc( ( 400px * 2 ) + 30px );
  width: calc( ( 400px * 2 ) + 30px ); }
  .tile-2-col.is-parent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
  .tile-2-col > .tile-1-col {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0; }

.tile-3-col {
  width: -webkit-calc( ( 400px * 3 ) + ( 30px * 2 ) );
  width: calc( ( 400px * 3 ) + ( 30px * 2 ) );
  margin-bottom: 30px; }
  .tile-3-col.is-parent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }

/**
* Tablet Styles
*/
@media screen and (max-width: 1320px) {
  .wrapper {
    max-width: -webkit-calc(924px - (21px * 2));
    max-width: calc(924px - (21px * 2)); }

  .tile-1-col {
    width: 280px;
    margin-bottom: 21px; }

  .tile-2-col {
    width: -webkit-calc( ( 280px * 2 ) + 21px );
    width: calc( ( 280px * 2 ) + 21px ); }

  .tile-3-col {
    width: -webkit-calc( ( 280px * 3 ) + ( 21px * 2 ) );
    width: calc( ( 280px * 3 ) + ( 21px * 2 ) );
    margin-bottom: 21px; } }
/**
* Phone Styles
*/
@media screen and (max-width: 945px) {
  .wrapper {
    max-width: -webkit-calc(360px - (20px * 2));
    max-width: calc(360px - (20px * 2)); }

  .tile-wrapper {
    flex-wrap: wrap; }

  .tile-1-col {
    width: 320px;
    margin-bottom: 20px; }

  .tile-2-col {
    width: 320px;
    margin-bottom: 20px; }

  .tile-3-col {
    width: 320px;
    margin-bottom: 20px; }

  .tile-2-col > .tile-1-col {
    margin-bottom: 20px; }

  .tile-2-col > .tile-2-col:last-child {
    margin-bottom: 0; } }
/**
 * Reset some basic elements
 */
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
  margin: 0;
  padding: 0; }

/**
 * Basic styling
 */
body {
  font: 400 16px/1.5 "lexia", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #111;
  background-color: #fdfdfd;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
  -o-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  font-kerning: normal; }

/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure {
  margin-bottom: 15px; }

/**
 * Images
 */
img {
  max-width: 100%;
  vertical-align: middle; }

/**
 * Figures
 */
figure > img {
  display: block; }

figcaption {
  font-size: 14px; }

/**
 * Lists
 */
ul, ol {
  margin-left: 30px; }

li > ul,
li > ol {
  margin-bottom: 0; }

/**
 * Headings
 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400; }

/**
 * Links
 */
a {
  color: #666;
  text-decoration: none; }
  a:visited {
    color: #404040; }
  a:hover {
    color: #111;
    text-decoration: none; }

/**
 * Blockquotes
 */
blockquote {
  color: #828282;
  border-left: 4px solid #e8e8e8;
  padding-left: 15px;
  font-size: 18px;
  letter-spacing: -1px;
  font-style: italic; }
  blockquote > :last-child {
    margin-bottom: 0; }

/**
 * Code formatting
 */
pre,
code {
  font-size: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  background-color: #eef; }

code {
  padding: 1px 5px; }

pre {
  padding: 8px 12px;
  overflow-x: auto; }
  pre > code {
    border: 0;
    padding-right: 0;
    padding-left: 0; }

/**
 * Clearfix
 */
.wrapper:after {
  content: "";
  display: table;
  clear: both; }

/**
 * Icons
 */
.icon > svg {
  display: inline-block;
  vertical-align: middle; }
  .icon > svg path {
    fill: #828282; }

/**
* Typography
*/
h1 {
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .1em; }

.site-nav {
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600; }

.home .post-link {
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  width: 100%;
  text-align: center;
  display: block;
  padding-top: 6px;
  padding-bottom: 6px; }

footer {
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em; }

/**
* Layout
*/
.site-header {
  margin-top: 30px;
  margin-bottom: 30px; }

a.site-title {
  width: 160px; }

@media screen and (max-width: 945px) {
  a.site-title > svg {
    width: 100px; }

  .site-nav {
    font-size: 12px; } }
nav.site-nav > a {
  padding-left: -webkit-calc( 30px / 2 );
  padding-left: calc( 30px / 2 );
  padding-right: -webkit-calc( 30px / 2 );
  padding-right: calc( 30px / 2 ); }

nav.site-nav > a:last-child {
  padding-right: 0; }

.site-footer {
  margin-bottom: 30px; }

#tiles {
  margin-top: 30px;
  margin-bottom: 30px; }

.post-content {
  -webkit-column-count: 2;
  -webkit-column-gap: 30px; }

.post-content a {
  color: #f56c4f;
  text-decoration: underline; }

.page .post-content {
  -webkit-column-count: 1; }

@media screen and (max-width: 1320px) {
  .post-content {
    -webkit-column-count: 1; } }