/* ============================================================
    Resets
============================================================ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: #F9F7EE;
}

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



/* ============================================================
    Sections
============================================================ */
body {
    font: 19px/24px 'Roboto', sans-serif;
    background: #F9F7EE;
    color: #003B49;
    font-weight: 400;
}

.wrapper {
    width: 100%;
    max-width: 960px;
    padding: 0 5%;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

header {
    margin: 1.428em 0; /* 30px/14px */
}

.side {
    width: 100%;
    float: none;
    margin-right: 0;
}

.section {
    width: 100%;
    float: none;
}

.profile {
    margin-bottom: 3.125em; /* 50px/16px */
}

footer {
    margin-top: 6.25em; /* 100px/16px */
}



/* ============================================================
    Typography
============================================================ */
h1 {
    font-size: 3.25em; /* 30px/16px */
    font-weight: bold;
    margin-bottom: 0.667em; /* 20px/30px */
    line-height: 1;
}

section h1 {
    margin-bottom: .5em; /* 15px/30px */
}

.about h1 {
    margin-bottom: 1em; /* 30px/30px */
    margin-top: 0.5em;
}

h2,
.lead {
    font-size: 1.2em; /* 22px/16px */
    margin: 0;
    line-height: 1.2em;
}

section h2 {
    margin: 1.818em 0 .909em 0; /* 40px/22px and 20px/22px */
    font-weight: 800;
}

.lead {
    font-weight: 300;
    line-height: 1.5em; /* 36px/24px */
}

.secondary-heading {
    /* font-weight: 300; */
    font-size: 1.2em; /* 22px/16px */
    display: block;
    line-height: 1.4;
}

h3 {
    font-size: 1.125em; /* 18px/16px */
    margin-top: 1.325em;
    margin-bottom: 0.75em;
    font-weight: bold;
}

h4 {
  font-size: 1em; /* 18px/16px */
  margin-top: 1.325em;
  margin-bottom: 0.5em;
  font-weight: bold;

}

section p,
section ul li,
section ol li {
    font-size: 1em; /* 16px/16px */
    line-height: 1.5em; /* 24px/16px */
    margin: 0 0 1.125em 0; /* 20px/16px */
}

section ul li,
section ol li {
    margin: 1.125em 0 1.125em 1.125em; /* 20px/16px */
}

a.return-home {
    color: #003B49;
    font-weight: bold;
    font-size: 1.875em; /* 14px/16px */
    text-decoration: none;
    float: left;
    display: block;
}

a.return-home:hover {
  color: #003B49;
}

nav {
    font-weight: bold;
    font-size: 1em; /* 14px/16px */
    clear: left;
    float: left;
    margin: 1.428em 0; /* 20px/14px */

}

nav ul a {
    text-decoration: none;
    color: #003B49;
}

nav ul a.active,
nav ul a:hover {
    border-bottom: 1px solid #333;
    color: #003B49;
}

nav ul {
    list-style: none;
    margin: 0;
}

nav ul li {
    display: inline-block;
    margin: 0 0.41em;  /* 15px/14px */
}

nav ul li:first-child {
    margin-left: 0;
}

nav ul li:last-child {
    margin: 0 0.41em 0 0.41em; /* 20px/14px AND 15px/14px */

}

a.email-contact {
    font-size: .875em; /* 14px/16px */
    text-decoration: none;
    float: right;
    display: block;
}

.case-study-list {
    font-size: 1em; /* 16px/16px */
    margin-top: 1.25em; /* 20px/16px */
}

.case-study-list a,
.case-study-list .request {

    text-decoration: underline;
    display: block;
}


.case-study-list span {
    display: block;
}

.case-study-list .client {
    font-weight: bold;
    padding-top: 1.111em; /* 20px/18px */
    padding-bottom: 0.5em;
    font-size: 1.4em;
    line-height: 1.2em;
}

.case-study-list .role {
    font-weight: bold;
    padding-top: 1.111em; /* 20px/18px */
    padding-bottom: 0.5em;
    font-size: 1.4em;
    line-height: 1.27em;
}

.case-study-list .title {
    font-weight: bold;
    padding-bottom: 1.111em; /* 20px/18px */
}

.case-study-list .subtitle {
  font-size: 1.1em;
  padding-bottom: 1.111em;
}

.column-one{
  float: left;
  width: 60%;
  padding: 0 30px 0 0;
}

.column-two{
  float: left;
  width: 33%;
  padding-top: 10px;
  padding-left: 0px;
}

.column-two p{
    font-size: 19px;
}

.row {

  display: block;
  padding: 0;
  margin: 0;

}

.request {
    color: #767676;
    position: relative;
    padding-bottom: 1.111em; /* 20px/18px */
}

.request .request-text {
    font-size: .875em; /* 14px/16px */
    text-transform: uppercase;
}

.date {
    position: relative;
    padding-bottom: 1.111em; /* 20px/18px */
}

.date .date-text {
    color: #767676;
    /* font-size: .875em; 14px/16px */
    /* text-transform: uppercase; */
}

.date-heading {
    color: #767676;
}

.details {
    font-size: .875em; /* 14px/16px */
    border-top: 3px solid #333;
    padding-top: 1.666em; /* 20px/12px */
    padding-bottom: .937em; /* 15px/16px */
}

.work .details {
    padding-bottom: 0;
}

.details dt {
    font-weight: 500;
    text-transform: uppercase;
}

.details dt.heading {
    margin-top: 1.666em; /* 20px/12px */
}

.details dd {
    margin-top: -5px;
    margin-bottom: 1.666em; /* 20px/12px */
}

.case-study .details dd:last-child {
    margin-top: -2px;
    line-height: 1.7;
}

.about .details dd {
    margin-bottom: 0; /* 20px/12px */
}

.project {
    margin-top: 3.125em; /* 25px/16px */
}

footer p {
    font-size: .675em; /* 14px/16px */
    margin: 3em 0; /* 20px/12px */
    line-height: 1.5; /* 18px/12px */
}

strong {
    font-weight: 500;
}

small {
    font-size: 80%;
    color: #666;
}

.list {
   list-style-position: inside;
}

.list li {
    margin: 0 0 .625em 0; /* 10px/16px */
    padding: 0;
}


/* ============================================================
    Links
============================================================ */
a {
    color: #1d70b8;
    outline: 0;
    text-decoration: underline;
}

a:hover {

    color: #003078;
}

.content section a {
    border-bottom: 1px solid #333;
      text-decoration: underline;
}



/* ============================================================
    Images
============================================================ */
img {
    max-width: 100%;
    height: auto;
}

.case-study .img-container,
.case-study figure {
    margin: 1.25em 0; /* 20px/16px */
}

.work .img-container,
.work figure {
    margin: 0; /* 20px/16px */
}

.work .project img {
    display: inline-block;
}

.about .img-container,
.about figure {
    float: left;
    display: block;
    width: 46.875%; /* 300px/640px */
    margin-right: 3.125%; /* 20px/640px */
}

.gallery img {
    margin-bottom: 3.125%; /* 20px/640px * 100 */
    width: 100%;
    float: left;
}

.gallery-full img {
    margin-bottom: 2.083% !important; /* 20px/960px * 100 */
}

.double img {
    width: 100%;
}

.img-border {
    border: 1px solid #D6D6D6;
    width: 100%; /* IE fix only */
}

.img-shadow {
    box-shadow: 0px 2px 3px #C5C5C5;
}

figcaption {
    color: #666;
    font-size: .875em; /* 14px/16px */
    font-weight: 400;
}

figcaption span {
    font-weight: 500;
}

figure img {
    width: 100%; /* IE fix only */
}

.no-image-below {
    margin-bottom: 1.666em; /* (40px)32px/16px */
}


/* ==========================================================================
    Media Queries
   ========================================================================== */
@media only screen and (max-width: 41.25em) { /* 350px or more */

  .column-one {
    float: left;
    width:100%;
    margin-right: 30px;
  }

  .column-two {
    float: left;
    width: 100%;
  }

}

@media only screen and (min-width: 25.9375em) { /* 415px or more */

    nav ul {
    	float: right;
    }

}

@media only screen and (min-width: 30em) { /* 480px or more */

    .double img {
        width: 48.4375%; /* 310px/640px * 100 */
    }

    .double .item-right img {
        float: right;
    }

}
@media only screen and (min-width: 41.25em) { /* 660px or more */

    header {
        margin: 3.571em 0; /* 50px/14px */
    }

    nav {
        text-align: center;
        clear: none;
        float: none !important;
        margin: 0;
    }

    nav ul li {
        margin: 0 2.142em; /* 30px/14px */
    }

    nav ul li:last-child {
        margin: 0 0 1.428em 2.142em; /* 20px/14px and 15px/14px */
    }

    .request {
        padding-bottom: 0;
    }

    .request .request-text {
        position: absolute;
        bottom: 1.15em; /* 20px/14px */
        right: 0;
    }

    .date {
        padding-bottom: 0;
    }

    .date .date-text {
        position: absolute;
        bottom: 1.15em; /* 20px/14px */
        right: 0;
    }

    .profile {
        float: left;
        width: 50%; /* 320px/640px */
    }

    .details {
        font-size: .75em; /* 12px/16px */
    }

    footer p {
        width: 50%;
        float: left;
    }

    footer p.copyright {
        /* text-align: right; */
    }

}

@media only screen and (min-width: 48em) { /* 768px or more */

    h1 {
        font-size: 7em; /* 36px/16px */
        margin-bottom: 0.25em; /* 40px/36px */
        margin-top: 0.525em;
        margin-left: -0.05em;
    }

    section h1 {
        margin-bottom: .416em; /* 15px/36px */
        margin-bottom: .277em; /* 10px/36px */
    }

    .about h1 {
        margin-bottom: 1em; /* 50px/36px */
        font-size: 3.25em;
    }

    h2,
    .lead,
    .secondary-heading {
        font-size: 1.2em; /* 24px/16px */
    }

    section h2 {
        margin: 2.083em 0 .833em 0; /* 50px/24px and 20px/24px */
    }

    section p,
    section ul li,
    section ol li {
        font-size: 1.125em; /* 18px/16px */
        margin: 0 0 1.111em 0; /* 20px/18px */
    }

    section ul li,
    section ol li {
        margin: 1.111em 0 1.111em 1.111em; /* 20px/18px */
    }

    section ol li {
        list-style: lower-roman;
    }

    aside {
        width: 27.083%; /* 260px/960px */
        float: left;
        margin-right: 6.25%; /* 60px/960px */
    }

    .about aside {
        margin-top: 4.375em; /* 70px/16px */
    }

    section {
        width: 66.667%; /* 640px/960px */
    }

    .project {
        margin-bottom: 6.25em; /* 100px/16px */
    }

    .flip section {
        float: left;
        margin-right: 6.25%; /* 60px/960px */
    }

    .flip aside {
        float: right;
        margin-right: 0;
    }

    .profile {
        margin-bottom: 0;
    }

    .lead {
        width: 66.667%; /* 640px/960px */
    }

    .case-study-list {
        font-size: 1.125em; /* 18px/16px */
        margin-top: 2.222em; /* 40px/18px */
    }

}

@media only screen and (min-width: 60em) { /* 960px or more */

    .wrapper {
        padding: 0;
    }

}



/* ==========================================================================
    Generic
   ========================================================================== */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.no-wrap {
    white-space: nowrap;
}

.left {
    float: left;
}

.right {
    float: right;
}

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

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

.margin-bottom-10 {
    margin-bottom: 1.0416%;
}



/* ==========================================================================
    Print Styles
   ========================================================================== */
@media print {

    nav,
    footer {
        display: none;
    }

    img,
    .about .img-container ,
    .about figure {
        float: none;
        margin-bottom: .5em;
    }

    .gallery {
        margin: 0 auto;
    }

    .gallery img {
        width: 48.4375%;
    }

    .profile p {
        width: 100%;
        float: none;
    }

}