html {
  box-sizing: border-box; }

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

/* Calculate values */
body {
  color: #666;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 1em;
  line-height: 1.5; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  line-height: 1.2;
  margin: 0 0 0.75em;
  color: #2E8DCD; }

p {
  margin: 0 0 0.75em; }

a {
  color: #7B479C;
  text-decoration: none;
  transition: color 150ms ease; }
  a:active, a:focus, a:hover {
    color: shade(#7B479C, 25%); }

hr {
  border-bottom: 1px solid #ddd;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  margin: 1.5em 0; }

table {
  border-collapse: collapse;
  margin: 0.75em 1.2em;
  table-layout: fixed;
  width: 100%; }

th {
  border-bottom: 1px solid shade(#ddd, 25%);
  font-weight: 600;
  padding: 0.75em 0;
  text-align: left; }

td {
  border-bottom: 1px solid #ddd;
  padding: 0.75em 0; }

tr,
td,
th {
  vertical-align: middle; }

@media only screen and (min-width: 45em) {
  html {
    margin: 0;
    padding: 0; } }
/*---------------------------
/   Default columns layout
---------------------------*/
@media only screen and (min-width: 45em) {
  #main-container {
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(34px, auto);
    grid-column-gap: 10px;
    grid-template-areas: "logo logo logo logo logo logo logo logo logo" "hd hd hd hd hd hd hd hd hd" "snb snb snb snb snb snb snb snb snb" "main main main main main main rc rc rc" "ft ft ft ft ft ft ft ft ft";
    border: 0px solid red;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px; }

  logo {
    max-width: unset;
    border: 0px solid orange;
    display: flex; }
    logo img {
      width: auto;
      height: auto; }

  .left-column {
    border: 0px dotted #62678C;
    padding-left: 20px; }

  .right-column {
    margin-top: 0px;
    border-left: 1px dotted #62678C;
    max-width: 350px; }
    .right-column .content {
      margin-top: 50px; }
    .right-column img {
      width: auto;
      border: 0px solid grey;
      padding: 4px;
      margin-top: 3em; }

  .body-content {
    padding-right: 20px;
    border-right: 2px dotted #62678C; }

  .page-workpage .screenshots-main img {
    width: 80%;
    box-shadow: 0px 0px 6px 0px #666; }

  .page-workindexpage .left-column {
    border: 2px solid green; }

  .page-clientlistingpage .left-column {
    /* neat include span-columns(8) */
    padding-right: 2px; }
  .page-clientlistingpage .right-column {
    /* neat include span-columns(4) */
    padding-left: 5px;
    border-left: 2px dotted #274D99;
    margin-top: 1em;
    padding: 0 1em 1em 1em; }

  .page-contactpage .left-column {
    /* neat include span-columns(8) */
    padding-right: 2px; }
  .page-contactpage .right-column {
    /* neat include span-columns(3.5) */
    border: 0px solid green;
    padding: 0; }
  .page-contactpage .contact-box {
    width: 44%;
    margin: 15px;
    padding: 20px; } }
/* ==========================================================================
    STREAM FIELD STYLES
   ========================================================================== */
@media only screen and (min-width: 45em) {
  .container.stream-field {
    padding: 0;
    max-width: none; }

  .screen-grab {
    position: relative;
    padding: 2em; }

  .img-grid .holder {
    text-align: center;
    width: 70%;
    margin: 2em auto; }

  .screen-grab img {
    width: 60%;
    margin-right: 40%;
    border-radius: 3px; }

  .screen-grab p {
    position: absolute;
    right: 10%;
    font-size: 1.25em;
    max-width: 30%;
    padding: 0.5em 1em;
    border-radius: 3px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }

  .body-copy h3 {
    font-size: 1.3em;
    margin-top: 1em;
    margin-bottom: 0.5em; }

  .stat-block {
    padding: 3em 0 6em;
    width: 70%;
    margin: 0 auto;
    background: transparent;
    border-top: 2px solid #434a4f;
    border-bottom: 2px solid #434a4f; }

  .stat-holder h4, .stat-holder p {
    color: #434a4f;
    font-weight: bold; }

  .stat-holder h2 {
    color: #ea853a; }

  .stat {
    width: 33.3%;
    float: left;
    margin: 0; }

  .sml-quote {
    margin: 2em auto 4em;
    padding: 1.5em 0; }

  .sml-quote p {
    position: absolute;
    left: -3em;
    max-width: 600px;
    font-size: 1.25em;
    margin: 0;
    top: 0;
    border-left: 2px solid;
    padding-left: 1.5em; }

  .bustout {
    position: relative;
    overflow: hidden; }

  .bustout-text {
    padding: 2em;
    width: 60%;
    float: right;
    font-size: 1.25em;
    background: #666B7B;
    z-index: 1;
    position: relative;
    margin: 0; }

  .bustout img {
    float: left;
    width: 100%;
    position: absolute; }

  .img-holder p {
    font-size: 1.2em;
    line-height: 1em; }

  .align-right .img-holder,
  .align-left .img-holder {
    max-width: 40%; }

  .align-right .img-holder {
    float: right;
    margin-left: 2em; }

  .align-left .img-holder {
    float: left;
    margin-right: 2em; }

  .align-left p {
    text-align: right; }

  .align-left .img-holder .credit,
  .align-right .img-holder .credit {
    max-width: 100%; }

  .full-width {
    width: 90%;
    margin: 0 auto; }

    /*
    .screengrab {
        padding: 5em 0;
    }

    .screengrab .laptop-container img {
        width: 54%;
        margin-bottom: 3em;
    }

    .laptop {
        position: absolute;
        top: -7%;
        left: -39%;
        right: 0;
    }

    .screengrab .laptop-container .laptop img {
        width: 51%;
        margin: 0;
    }
    */ }
@media only screen and (min-width: 1350px) {
  .bustout img {
    float: left;
    width: 40%;
    position: relative; }

  .bustout-text {
    padding: 2em;
    width: 60%;
    float: left;
    font-size: 1.25em;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 40%; } }
@media only screen and (min-width: 1250px) {
  .screen-grab img {
    width: 51%;
    margin-left: 10em; }

  .screen-grab p {
    max-width: 27%;
    font-size: 1.35em; }

  .align-right .img-holder,
  .align-left .img-holder {
    max-width: 40%; }

  .align-right .img-holder {
    margin-right: -12em; }

  .align-left .img-holder {
    margin-left: -12em; }

  .align-right p,
  .align-left p {
    max-width: 80%; }

  .align-left p {
    margin-left: 20%; } }
/*========================================================================== */
/* Desktop */
@media only screen and (min-width: 1250px) {
  .italic {
    font-size: 1.4em;
    margin: 1.5em auto 1.5em auto; }

  .page-homepage .work-intro {
    padding: 4em 0 0 3em; } }

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