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

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; }

/*  Syntax Quick Reference
  --------------------------
  column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter)
  span($ratio: 1, $offset: 0)
  shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter)
  unshift()
  edit()
  center($max_width: 1410px, $pad: 0)
  stack($pad: 0, $align: false)
  unstack()
  align($direction: both)
  cf()
*/
/**
 * Grid settings.
 * All values are defaults and can therefore be easily overidden.
 */
/**
 * List functions courtesy of the wonderful folks at Team Sass.
 * Check out their awesome grid: Singularity.
 */
/**
 * Get  percentage from a given ratio.
 * @param {number} [$ratio=1] - The column ratio of the element.
 * @returns {number} - The percentage value.
 */
/**
 * Work out the column widths based on the ratio and gutter sizes.
 * @param {number} [$ratios=1] - The column ratio of the element.
 * @param {number} [$gutter=$jeet-gutter] - The gutter for the column.
 * @returns {list} $width $gutter - A list containing the with and gutter for the element.
 */
/**
 * Get the set layout direction for the project.
 * @returns {string} $direction - The layout direction.
 */
/**
 * Replace a specified list value with a new value (uses built in set-nth() if available)
 * @param {list} $list - The list of values you want to alter.
 * @param {number} $index - The index of the list item you want to replace.
 * @param {*} $value - The value you want to replace $index with.
 * @returns {list} $list - The list with the value replaced or removed.
 * @warn if an invalid index is supplied.
 */
/**
 * Reverse a list (progressively enhanced for Sass 3.3)
 * @param {list} $list - The list of values you want to reverse.
 * @returns {list} $result - The reversed list.
 */
/**
 * Get the opposite direction to a given value.
 * @param {string} $dir - The direction you want the opposite of.
 * @returns {string} - The opposite direction to $dir.
 * @warn if an incorrect string is provided.
 */
/**
 * Style an element as a column with a gutter.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
 * @param {number} [$cycle=0] - Easily create an nth column grid where $cycle equals the number of columns.
 * @param {number} [$uncycle=0] - Undo a previous cycle value to allow for a new one.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * An alias for the column mixin.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * Get the width of a column and nothing else.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * Get the gutter size of a column and nothing else.
 * @param {number} [ratios=1] - A width relative to its container as a fraction.
 * @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * An alias for the column-width function.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * An alias for the column-gutter function.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * Style an element as a column without any gutters for a seamless row.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
 * @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns.
 * @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one.
 */
/**
 * Reorder columns without altering the HTML.
 * @param {number} [$ratios=0] - Specify how far along you want the element to move.
 * @param {string} [$col-or-span=column] - Specify whether the element has a gutter or not.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * Reset an element that has had shift() applied to it.
 */
/**
 * View the grid and its layers for easy debugging.
 * @param {string} [$color=black] - The background tint applied.
 * @param {boolean} [$important=false] - Whether to apply the style as !important.
 */
/**
 *  Alias for edit().
 */
/**
 * Horizontally center an element.
 * @param {number} [$max-width=1410px] - The max width the element can be.
 * @param {number} [$pad=0] - Specify the element's left and right padding.
 */
/**
 * Uncenter an element.
 */
/**
 * Stack an element so that nothing is either side of it.
 * @param {number} [$pad=0] - Specify the element's left and right padding.
 * @param {boolean/string} [$align=false] - Specify the text align for the element.
 */
/**
 * Unstack an element.
 */
/**
 * Center an element on either or both axes.
 * @requires A parent container with relative positioning.
 * @param {string} [$direction=both] - Specify which axes to center the element on.
 */
/**
 * Apply a clearfix to an element.
 */
@font-face {
  font-family: 'Colfax';
  font-style: normal;
  font-weight: normal;
  src: url('../../fonts/Colfax-Regular.eot');
  src: url('../../fonts/Colfax-Regular.eot?#iefix') format('embedded-opentype'), url('../../fonts/Colfax-Regular.woff') format('woff'), url('../../fonts/Colfax-Regular.ttf') format('truetype'); }

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

/*  Syntax Quick Reference
  --------------------------
  column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter)
  span($ratio: 1, $offset: 0)
  shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter)
  unshift()
  edit()
  center($max_width: 1410px, $pad: 0)
  stack($pad: 0, $align: false)
  unstack()
  align($direction: both)
  cf()
*/
/**
 * Grid settings.
 * All values are defaults and can therefore be easily overidden.
 */
/**
 * List functions courtesy of the wonderful folks at Team Sass.
 * Check out their awesome grid: Singularity.
 */
/**
 * Get  percentage from a given ratio.
 * @param {number} [$ratio=1] - The column ratio of the element.
 * @returns {number} - The percentage value.
 */
/**
 * Work out the column widths based on the ratio and gutter sizes.
 * @param {number} [$ratios=1] - The column ratio of the element.
 * @param {number} [$gutter=$jeet-gutter] - The gutter for the column.
 * @returns {list} $width $gutter - A list containing the with and gutter for the element.
 */
/**
 * Get the set layout direction for the project.
 * @returns {string} $direction - The layout direction.
 */
/**
 * Replace a specified list value with a new value (uses built in set-nth() if available)
 * @param {list} $list - The list of values you want to alter.
 * @param {number} $index - The index of the list item you want to replace.
 * @param {*} $value - The value you want to replace $index with.
 * @returns {list} $list - The list with the value replaced or removed.
 * @warn if an invalid index is supplied.
 */
/**
 * Reverse a list (progressively enhanced for Sass 3.3)
 * @param {list} $list - The list of values you want to reverse.
 * @returns {list} $result - The reversed list.
 */
/**
 * Get the opposite direction to a given value.
 * @param {string} $dir - The direction you want the opposite of.
 * @returns {string} - The opposite direction to $dir.
 * @warn if an incorrect string is provided.
 */
/**
 * Style an element as a column with a gutter.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
 * @param {number} [$cycle=0] - Easily create an nth column grid where $cycle equals the number of columns.
 * @param {number} [$uncycle=0] - Undo a previous cycle value to allow for a new one.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * An alias for the column mixin.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * Get the width of a column and nothing else.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * Get the gutter size of a column and nothing else.
 * @param {number} [ratios=1] - A width relative to its container as a fraction.
 * @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * An alias for the column-width function.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * An alias for the column-gutter function.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * Style an element as a column without any gutters for a seamless row.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
 * @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns.
 * @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one.
 */
/**
 * Reorder columns without altering the HTML.
 * @param {number} [$ratios=0] - Specify how far along you want the element to move.
 * @param {string} [$col-or-span=column] - Specify whether the element has a gutter or not.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * Reset an element that has had shift() applied to it.
 */
/**
 * View the grid and its layers for easy debugging.
 * @param {string} [$color=black] - The background tint applied.
 * @param {boolean} [$important=false] - Whether to apply the style as !important.
 */
/**
 *  Alias for edit().
 */
/**
 * Horizontally center an element.
 * @param {number} [$max-width=1410px] - The max width the element can be.
 * @param {number} [$pad=0] - Specify the element's left and right padding.
 */
/**
 * Uncenter an element.
 */
/**
 * Stack an element so that nothing is either side of it.
 * @param {number} [$pad=0] - Specify the element's left and right padding.
 * @param {boolean/string} [$align=false] - Specify the text align for the element.
 */
/**
 * Unstack an element.
 */
/**
 * Center an element on either or both axes.
 * @requires A parent container with relative positioning.
 * @param {string} [$direction=both] - Specify which axes to center the element on.
 */
/**
 * Apply a clearfix to an element.
 */
html {
  -moz-box-sizing: border-box;
       box-sizing: border-box; }

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

html {
  border: 4px solid #1b2e4c;
  min-height: 100%; }
  @media (min-width: 1051px) {
    html {
      border: 8px solid #1b2e4c; } }

body {
  font-family: 'Colfax';
  background: #ebebeb;
  color: #1b2e4c;
  max-width: 1180px;
  margin: 0 auto; }
  @media (min-width: 1051px) {
    body {
      margin: 0 auto 100px; } }

h1 {
  font-size: 30px;
  font-weight: bold; }

h2 {
  font-size: 24px;
  font-weight: bold; }

h3 {
  font-size: 18px; }

p {
  font-size: 18px;
  line-height: 1.4em; }

a {
  color: #3b7fe0;
  text-decoration: none; }

img {
  max-width: 100%; }

strong {
  font-weight: bold; }

.wrapper {
  padding: 0 20px;
  *zoom: 1; }
  .wrapper:before, .wrapper:after {
    content: '';
    display: table; }
  .wrapper:after {
    clear: both; }

@font-face {
  font-family: 'Colfax';
  font-style: normal;
  font-weight: normal;
  src: url('../../fonts/Colfax-Regular.eot');
  src: url('../../fonts/Colfax-Regular.eot?#iefix') format('embedded-opentype'), url('../../fonts/Colfax-Regular.woff') format('woff'), url('../../fonts/Colfax-Regular.ttf') format('truetype'); }

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

/*components*/
/*  Syntax Quick Reference
  --------------------------
  column($ratios: 1, $offset: 0, $cycle: 0, $uncycle: 0, $gutter: $jeet-gutter)
  span($ratio: 1, $offset: 0)
  shift($ratios: 0, $col_or_span: column, $gutter: $jeet-gutter)
  unshift()
  edit()
  center($max_width: 1410px, $pad: 0)
  stack($pad: 0, $align: false)
  unstack()
  align($direction: both)
  cf()
*/
/**
 * Grid settings.
 * All values are defaults and can therefore be easily overidden.
 */
/**
 * List functions courtesy of the wonderful folks at Team Sass.
 * Check out their awesome grid: Singularity.
 */
/**
 * Get  percentage from a given ratio.
 * @param {number} [$ratio=1] - The column ratio of the element.
 * @returns {number} - The percentage value.
 */
/**
 * Work out the column widths based on the ratio and gutter sizes.
 * @param {number} [$ratios=1] - The column ratio of the element.
 * @param {number} [$gutter=$jeet-gutter] - The gutter for the column.
 * @returns {list} $width $gutter - A list containing the with and gutter for the element.
 */
/**
 * Get the set layout direction for the project.
 * @returns {string} $direction - The layout direction.
 */
/**
 * Replace a specified list value with a new value (uses built in set-nth() if available)
 * @param {list} $list - The list of values you want to alter.
 * @param {number} $index - The index of the list item you want to replace.
 * @param {*} $value - The value you want to replace $index with.
 * @returns {list} $list - The list with the value replaced or removed.
 * @warn if an invalid index is supplied.
 */
/**
 * Reverse a list (progressively enhanced for Sass 3.3)
 * @param {list} $list - The list of values you want to reverse.
 * @returns {list} $result - The reversed list.
 */
/**
 * Get the opposite direction to a given value.
 * @param {string} $dir - The direction you want the opposite of.
 * @returns {string} - The opposite direction to $dir.
 * @warn if an incorrect string is provided.
 */
/**
 * Style an element as a column with a gutter.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
 * @param {number} [$cycle=0] - Easily create an nth column grid where $cycle equals the number of columns.
 * @param {number} [$uncycle=0] - Undo a previous cycle value to allow for a new one.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * An alias for the column mixin.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * Get the width of a column and nothing else.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * Get the gutter size of a column and nothing else.
 * @param {number} [ratios=1] - A width relative to its container as a fraction.
 * @param {number} [gutter=jeet.gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * An alias for the column-width function.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * An alias for the column-gutter function.
 * @param [$args...] - All arguments get passed through to column().
 */
/**
 * Style an element as a column without any gutters for a seamless row.
 * @param {number} [$ratios=1] - A width relative to its container as a fraction.
 * @param {number} [$offset=0] - A offset specified as a fraction (see $ratios).
 * @param {number} [cycle=0] - Easily create an nth column grid where cycle equals the number of columns.
 * @param {number} [uncycle=0] - Undo a previous cycle value to allow for a new one.
 */
/**
 * Reorder columns without altering the HTML.
 * @param {number} [$ratios=0] - Specify how far along you want the element to move.
 * @param {string} [$col-or-span=column] - Specify whether the element has a gutter or not.
 * @param {number} [$gutter=$jeet-gutter] - Specify the gutter width as a percentage of the containers width.
 */
/**
 * Reset an element that has had shift() applied to it.
 */
/**
 * View the grid and its layers for easy debugging.
 * @param {string} [$color=black] - The background tint applied.
 * @param {boolean} [$important=false] - Whether to apply the style as !important.
 */
/**
 *  Alias for edit().
 */
/**
 * Horizontally center an element.
 * @param {number} [$max-width=1410px] - The max width the element can be.
 * @param {number} [$pad=0] - Specify the element's left and right padding.
 */
/**
 * Uncenter an element.
 */
/**
 * Stack an element so that nothing is either side of it.
 * @param {number} [$pad=0] - Specify the element's left and right padding.
 * @param {boolean/string} [$align=false] - Specify the text align for the element.
 */
/**
 * Unstack an element.
 */
/**
 * Center an element on either or both axes.
 * @requires A parent container with relative positioning.
 * @param {string} [$direction=both] - Specify which axes to center the element on.
 */
/**
 * Apply a clearfix to an element.
 */
header {
  margin-top: 20px; }
  @media (min-width: 1051px) {
    header {
      margin-top: 100px; } }

.header-logo {
  text-transform: uppercase;
  text-align: center;
  font-weight: bold; }
  @media (min-width: 600px) {
    .header-logo {
      float: left; } }

.header-link {
  color: #1b2e4c; }

nav {
  margin-top: 20px; }
  @media (min-width: 600px) {
    nav {
      float: right;
      margin-top: 0px; } }

.nav-list {
  text-align: center; }
  @media (min-width: 600px) {
    .nav-list {
      margin-top: 8px; } }

.nav-item {
  display: inline-block;
  text-transform: uppercase;
  margin-left: 15px;
  font-size: 12px;
  font-weight: bold; }
  @media (min-width: 769px) {
    .nav-item {
      font-size: 16px;
      margin-left: 25px; } }
  @media (min-width: 1051px) {
    .nav-item {
      margin-left: 45px; } }
  .nav-item.is-selected {
    border-bottom: 3px solid #1B2E4C;
    padding-bottom: 2px;
    margin-bottom: -2px; }

.nav-item:first-child {
  margin-left: 0; }

.hero {
  margin-top: 45px; }
  @media (min-width: 1051px) {
    .hero {
      margin-top: 100px; } }

@media (min-width: 1051px) {
  .hero-text {
    font-size: 26px; } }

@media (min-width: 600px) {
  .hero-emphasized {
    font-weight: bold; } }

.hero-emphasized-block {
  font-weight: bold;
  display: block; }

.hero-link {
  margin-top: 6px;
  display: inline-block; }

.work {
  margin-top: 45px; }
  @media (min-width: 1051px) {
    .work {
      margin-top: 100px; } }

.work-header {
  margin-bottom: 30px; }

.work-cards {
  *zoom: 1; }
  .work-cards:before, .work-cards:after {
    content: '';
    display: table; }
  .work-cards:after {
    clear: both; }

.work-card {
  margin-bottom: 40px; }
  @media (min-width: 769px) {
    .work-card {
      *zoom: 1;
      float: left;
      clear: none;
      text-align: inherit;
      width: 48.5%;
      margin-left: 0%;
      margin-right: 3%; }
      .work-card:before, .work-card:after {
        content: '';
        display: table; }
      .work-card:after {
        clear: both; }
      .work-card:nth-child(2n) {
        margin-right: 0%;
        float: right; }
      .work-card:nth-child(2n+1) {
        clear: both; } }

.work-card-image {
  width: 100%; }
  @media (min-width: 769px) {
    .work-card-image {
      max-width: 100%; } }

/*.work-card-link {
  font-weight: bold;
}
*/
.work-card-header {
  text-transform: uppercase;
  margin-top: 10px; }

.work-card-subheader {
  margin-top: 3px;
  color: #2b2b2d; }

footer {
  padding: 5px 0 20px;
  font-size: 14px; }
  @media (min-width: 600px) {
    footer {
      text-align: center; } }
  @media (min-width: 1051px) {
    footer {
      margin-top: 60px; } }

@media (min-width: 769px) {
  .social-links {
    margin-top: 10px; } }

@media (min-width: 769px) {
  .social-link {
    margin-left: 25px;
    display: inline-block; }
    .social-link:first-child {
      margin-left: 0; } }

.footer-copyright {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 3px; }
  @media (min-width: 769px) {
    .footer-copyright {
      margin: 0 25px 0 0;
      display: inline-block; } }

.footer-text {
  font-size: 14px;
  margin-bottom: 3px; }
  @media (min-width: 769px) {
    .footer-text {
      display: inline-block; } }

.project {
  margin: 45px 0 40px; }
  @media (min-width: 1051px) {
    .project {
      margin: 100px 0 100px; } }

.project-header {
  font-size: 24px;
  font-weight: bold; }
  @media (min-width: 1051px) {
    .project-header {
      font-size: 60px; } }

.project-subheader {
  font-size: 18px;
  margin-top: 10px;
  color: #2b2b2d;
  line-height: 1.4em; }
  @media (min-width: 1051px) {
    .project-subheader {
      font-size: 22px;
      line-height: 1em; } }

.project-row {
  *zoom: 1; }
  .project-row:before, .project-row:after {
    content: '';
    display: table; }
  .project-row:after {
    clear: both; }

.project-main {
  margin-top: 20px; }
  @media (min-width: 769px) {
    .project-main {
      *zoom: 1;
      float: left;
      clear: none;
      text-align: inherit;
      width: 65.6666666667%;
      margin-left: 0%;
      margin-right: 3%; }
      .project-main:before, .project-main:after {
        content: '';
        display: table; }
      .project-main:after {
        clear: both; }
      .project-main:last-child {
        margin-right: 0%; } }
  @media (min-width: 1051px) {
    .project-main {
      margin-top: 50px; } }

.project-main-header {
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 22px; }
  @media (min-width: 1051px) {
    .project-main-header {
      font-size: 30px;
      margin-bottom: 25px; } }

.project-main-offset {
  margin-top: 30px; }
  @media (min-width: 769px) {
    .project-main-offset {
      *zoom: 1;
      float: left;
      clear: none;
      text-align: inherit;
      width: 65.6666666667%;
      margin-left: 34.3333333333%;
      margin-right: 3%; }
      .project-main-offset:before, .project-main-offset:after {
        content: '';
        display: table; }
      .project-main-offset:after {
        clear: both; }
      .project-main-offset:last-child {
        margin-right: 0%; } }
  @media (min-width: 1051px) {
    .project-main-offset {
      margin-top: 50px; } }

.project-aside {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  color: #2b2b2d;
  margin-top: 40px; }
  .project-aside.reduced-margin {
    margin-top: 20px; }
  @media (min-width: 769px) {
    .project-aside {
      *zoom: 1;
      float: left;
      clear: none;
      text-align: inherit;
      width: 31.3333333333%;
      margin-left: 0%;
      margin-right: 3%;
      margin-top: 20px; }
      .project-aside:before, .project-aside:after {
        content: '';
        display: table; }
      .project-aside:after {
        clear: both; }
      .project-aside:last-child {
        margin-right: 0%; } }
  @media (min-width: 1051px) {
    .project-aside {
      font-size: 18px;
      margin-top: 50px; }
      .project-aside.reduced-margin {
        margin-top: 50px; } }

@media (min-width: 1051px) {
  .project-text {
    font-size: 22px;
    line-height: 1.5em; } }

.project-text + .project-text {
  margin-top: 15px; }
  @media (min-width: 1051px) {
    .project-text + .project-text {
      margin-top: 25px; } }

.project-image {
  margin-top: 15px; }
  @media (min-width: 1051px) {
    .project-image {
      margin-top: 25px; } }

.project-image-half {
  margin-top: 15px;
  /*  &:nth-child(even) {
    margin-right: 0;
  }*/ }
  @media (min-width: 769px) {
    .project-image-half {
      *zoom: 1;
      float: left;
      clear: none;
      text-align: inherit;
      width: 48.5%;
      margin-left: 0%;
      margin-right: 3%; }
      .project-image-half:before, .project-image-half:after {
        content: '';
        display: table; }
      .project-image-half:after {
        clear: both; }
      .project-image-half:last-child {
        margin-right: 0%; } }

.project-button {
  display: block;
  text-align: center;
  background: #3b7fe0;
  font-size: 16px;
  padding: 20px 0;
  text-transform: uppercase;
  color: white;
  margin-top: 15px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.2); }
  .project-button:hover {
    background: #2F65B2; }
  @media (min-width: 1051px) {
    .project-button {
      font-size: 18px;
      margin-top: 25px;
      width: 50%; } }

.project-full-width-quote {
  text-align: center;
  margin-top: 15px;
  background: #1b2e4c;
  padding: 30px;
  color: white; }

.project-spacer {
  display: none; }
  @media (min-width: 1051px) {
    .project-spacer {
      display: block;
      width: 100%;
      height: 2px;
      background: #1b2e4c;
      margin-top: 50px; } }

.breadcrumb {
  font-size: 14px; }

.breadcrumb-item {
  display: inline-block; }

.breadcrumb-arrow {
  display: inline-block;
  margin: 0 10px; }

.breadcrumb-selected {
  display: inline-block; }

.about-image {
  margin-bottom: 15px; }
  @media (min-width: 1051px) {
    .about-image {
      margin-bottom: 25px; } }

@media (min-width: 1051px) {
  .about-text {
    font-size: 22px;
    line-height: 1.5em; } }

.about-text + .about-text {
  margin-top: 15px; }
  @media (min-width: 1051px) {
    .about-text + .about-text {
      margin-top: 25px; } }

.about-emphasized {
  font-weight: bold; }

.about-main-header {
  margin-top: 30px;
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 22px; }
  @media (min-width: 1051px) {
    .about-main-header {
      font-size: 30px;
      margin-top: 40px;
      margin-bottom: 25px; } }

.contact {
  margin-top: 45px; }
  @media (min-width: 600px) {
    .contact {
      text-align: center; } }
  @media (min-width: 1051px) {
    .contact {
      margin-top: 100px; } }

.contact .work-header {
  text-align: left; }

.contact-link {
  font-size: 22px;
  margin: 10px 0 40px;
  display: inline-block; }
  @media (min-width: 600px) {
    .contact-link {
      font-size: 42px;
      margin-top: 20px; } }
  @media (min-width: 1051px) {
    .contact-link {
      font-size: 60px;
      margin: 30px 0 80px; } }

.contact-icon-list {
  margin: 10px 0 40px; }
  @media (min-width: 1051px) {
    .contact-icon-list {
      margin: 10px 0 20px; } }

.icon-list-item {
  display: inline-block;
  margin-right: 20px; }
  .icon-list-item:last-child {
    margin: 0; }

.margin-bottom {
  margin-bottom: 15px; }
  @media (min-width: 1051px) {
    .margin-bottom {
      margin-bottom: 25px; } }

.no-margin-bottom {
  margin-bottom: 0 !important; }

.shame-process-text {
  margin-bottom: 20px;
  font-size: 18px; }
  @media (min-width: 1051px) {
    .shame-process-text {
      font-size: 22px;
      margin-bottom: 30px; } }