/* Includes: I might make things you don't want, but I'm not going to be a jerk about it. So just say if you don't want them.
*/
/* Grids & Gutters:
*/
/* Type:  Target / Context: Foundtion sets the body font size at 100% which is usually 16px A standard line height of 1.5ems on the body (@16px) is 24px
*/
/* Breakpoints: These are only here so things don't break when you don't change them.  It's better for everyone if you change these to fit your content, but we both know you won't.
*/
/* Colours:
*/
/* Forms & Buttons:
*/
/* Inspired by some stuff this guy said: http://jaydenseric.com/blog/forget-normalize-or-resets-lay-your-own-css-foundation but extended to include a few more things
*/
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; }

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

body { padding: 0; margin: 0; font-size: 100%; line-height: 1.5em; font-family: sans-serif; color: #444; }

html, body { height: 100%; }

h1, h2, h3, h4, h5, h6, p, blockquote, figure, ol, ul, dl, hr, th, td { padding: 0; margin: 0; }

table { border-collapse: collapse; }

li { display: block; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; }

a { text-decoration: none; color: inherit; -webkit-transition: .6s; transition: .6s; }
p a:hover { color: #ff8300; text-decoration: underline; }

input, textarea, select { font-family: sans-serif; }

img { max-width: 100%; height: auto; border: 0; }

hr { margin: 0.75em 0; border: none; border-bottom: solid 1px #ddd; }

/* Read the part about line length: http://trentwalton.com/2012/06/19/fluid-type/  Also using a "close-enough" vertical rhythm
*/
body { color: #444; }
@media (min-width: 60em) { body { font-size: 1.2em; } }
@media (min-width: 93.75em) { body { font-size: 1.4em; } }

::-moz-selection { color: #000; background: rgba(255, 131, 0, 0.6); text-shadow: none; }

::selection { color: #000; background: rgba(255, 131, 0, 0.6); text-shadow: none; }

p, blockquote, figure, ol, ul, dl { margin-bottom: 1.5em; }

h1 { font-size: 3.927em; line-height: 1.14591; margin-bottom: 0.38197em; }

h2 { font-size: 2.618em; line-height: 1.14591; margin-bottom: 0.57296em; }

h3 { font-size: 2.427em; line-height: 1.23609; margin-bottom: 0.61805em; }

h4 { font-size: 1.618em; line-height: 1.85414; margin-bottom: 0.92707em; }

h5 { font-size: 1em; line-height: 1.5; margin-bottom: 1.5em; }

h6 { font-size: 0.618em; line-height: 2.42718; margin-bottom: 2.42718em; }

small { font-size: 0.618em; }

/* Forms: Make them not look shitty
*/
fieldset { border: none; }

legend { width: 100%; padding-bottom: 0.5em; margin-bottom: 0.75em; border-bottom: solid 1px #ddd; }

label { display: inline-block; }

input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel], input[type=text], input[type=number], input[type=search], input[type=time], input[type=week], input[type=month], input[type=date], input[type=datetime], input[type=datetime-local], input[type=checkbox], input[type=radio], textarea, select { color: rgba(68, 68, 68, 0.8); border: solid 1px #ddd; border-radius: 3px; outline: none; -webkit-transition: .3s; transition: .3s; }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=url]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=number]:focus, input[type=search]:focus, input[type=time]:focus, input[type=week]:focus, input[type=month]:focus, input[type=date]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=checkbox]:focus, input[type=radio]:focus, textarea:focus, select:focus { color: #444; border-color: rgba(255, 131, 0, 0.6); box-shadow: 0 0 6px rgba(255, 131, 0, 0.6); }

input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel], input[type=text], input[type=number], input[type=search], input[type=time], input[type=week], input[type=month], input[type=date], input[type=datetime], input[type=datetime-local], textarea, select { font-size: 0.9em; line-height: 1.66667; margin-bottom: 1.66667em; font-weight: 100; display: block; padding: 0.25em 0.5em; }

input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel], input[type=text], input[type=number], input[type=range], textarea { width: 100%; }

input[type=file], input[type=range], input[type=color] { font-size: 0.9em; line-height: 1.66667; margin-bottom: 1.66667em; }

input[type=file] { line-height: 1em; }

input[type=search] { display: inline-block; border-radius: 1.5em; }

input[type=checkbox], input[type=radio] { vertical-align: middle; }

textarea { min-width: 100%; max-width: 100%; resize: vertical; }

select { display: inline-block; }

/* Buttons:
*/
input[type=button], input[type=reset], input[type=submit], button { font-size: 0.9em; line-height: 1.66667; margin-bottom: 1.66667em; display: inline-block; padding: 0.5em 1em; color: rgba(68, 68, 68, 0.8); background-color: white; border: solid 1px #ddd; border-radius: 3px; outline: none; -webkit-transition: .3s; transition: .3s; }
input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover, button:hover, input[type=button]:active, input[type=reset]:active, input[type=submit]:active, button:active { color: #444; text-decoration: none; cursor: pointer; background-color: #f7f7f7; border-color: #c4c4c4; }
input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus, button:focus { color: #444; background-color: #f7f7f7; border-color: rgba(255, 131, 0, 0.6); box-shadow: 0 0 6px rgba(255, 131, 0, 0.6); }

/* You will need to set you own column widths in percents because I have no idea what you're wanting to do. Also I know you were going to include these grid classes in your markup like an asshole, so I made it so you couldn't. Extend them properly.  http://css-tricks.com/dont-overthink-it-grids/ In the origonal col widths are whack because of the padding not being distributed evenly but its fixed now
*/
/* Tables suck. Make them suck less by making them act like lists. Not strickly mobile first, but suck it.  Also uses nifty content: attr(title); for th lables on small screens */
/* Table based sticky footer for dynamic footer magic-ness. Add the sticky-footer class to opt in. */
/* Shit like .make-text-centered-on-small-screens and .hide-on-whatever-other-sized-screen */
.placeholder__image { display: table; }

.placeholder__image span { display: table-cell; vertical-align: middle; }

body:after { content: 'sm'; display: block; visibility: hidden; width: 0; height: 0; margin-top: -1.5em; }
@media (min-width: 60em) { body:after { content: 'md'; } }
@media (min-width: 93.75em) { body:after { content: 'lg'; } }

.site__header, .site__footer, .project__content, .page__content, .article__content { padding: 0.75em; }
@media (min-width: 60em) { .site__header, .site__footer, .project__content, .page__content, .article__content { padding: 1.5em; } }

.project__content, .project__message, .page__content, .article__content, .article__message { max-width: 650px; margin: auto; }
@media (min-width: 60em) { .project__content, .project__message, .page__content, .article__content, .article__message { max-width: 800px; } }

.project__thumbs, .article__thumbs, .site__container--nav .site__nav--main { padding: 1.5em; }

.project__thumb, .article__thumb { margin-bottom: 1em; }

/* Show / hide mobile / desktop headers */
.site__nav { display: table; width: 100%; }

.site__nav > ul { display: table-row; }

.site__nav > ul > li { display: table-cell; text-align: center; vertical-align: middle; }

.site__container--nav .site__header--main .site__nav--links li a { display: block; font-size: 1.25em; line-height: 1.2; margin-bottom: 1.2em; margin-top: -1em; margin-bottom: 0; padding: 1em 0; text-align: left; }
.site__container--nav .site__header--main .site__nav--button, .site__container--nav .site__header--main .site__nav--logo { display: none; }

.site__container--main .site__header--main { display: none; }
.site__container--main .site__header--off-canvas { display: block; }
.site__container--main [data-oc-target="navigation"] { float: right; }
.site__container--main .site__nav--logo { text-align: left; }
.site__container--main .site__nav--links { text-align: right; }
.site__container--main .site__logo img { width: 100%; max-width: 18.75em; padding: 0 1em; vertical-align: middle; }
@media (min-width: 60em) { .site__container--main .site__logo img { max-width: 14.5em; } }
@media (min-width: 93.75em) { .site__container--main .site__logo img { max-width: 18.75em; } }
@media (min-width: 60em) { .site__container--main .site__header--main { display: block; }
  .site__container--main .site__header--off-canvas { display: none; }
  .site__container--main .site__nav--links ul { margin-bottom: 0; }
  .site__container--main .site__nav--links ul li { display: inline-block; }
  .site__container--main .site__nav--links ul li a { padding: 0.5em; } }

[role="navigation"], [role="main"], [role="complementary"] { width: 100%; height: 100%; }

.js .site__wrapper { overflow: hidden; position: relative; height: 100%; }
.js [role="navigation"], .js [role="main"], .js [role="complementary"] { overflow: scroll; -webkit-overflow-scrolling: touch; -webkit-transition: .01s ease all; transition: .01s ease all; }
.js .oc-complementary-active [role="main"], .js .oc-navigation-active [role="main"] { overflow: hidden; }
@media (min-width: 60em) { .js .oc-complementary-active [role="main"], .js .oc-navigation-active [role="main"] { overflow: scroll; -webkit-overflow-scrolling: touch; } }
.js [role="navigation"] { position: absolute; width: 80%; top: 0; right: -80%; }
.js [role="complementary"] { position: absolute; width: 80%; top: 0; left: -80%; }
@media (min-width: 36.25em) { .js [role="navigation"], .js [role="complementary"] { width: 60%; }
  .js [role="navigation"] { right: -60%; }
  .js [role="complementary"] { left: -60%; } }
@media (min-width: 60em) { .js [role="complementary"] { width: 25%; left: -25%; } }
@media (min-width: 93.75em) { .js [role="complementary"] { width: 18%; left: -18%; } }
.js .oc-navigation-active [role="main"] { position: absolute; top: 0; -webkit-transform: translateX(-80%); -ms-transform: translateX(-80%); transform: translateX(-80%); -webkit-transform: translateX(-80%) translateZ(0); transform: translateX(-80%) translateZ(0); }
.js .oc-navigation-active [role="navigation"] { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transform: translateX(-100%) translateZ(0); transform: translateX(-100%) translateZ(0); }
@media (min-width: 36.25em) { .js .oc-navigation-active [role="main"] { -webkit-transform: translateX(-60%); -ms-transform: translateX(-60%); transform: translateX(-60%); -webkit-transform: translateX(-60%) translateZ(0); transform: translateX(-60%) translateZ(0); } }
.js .oc-complementary-active [role="main"] { position: absolute; top: 0; -webkit-transform: translateX(80%); -ms-transform: translateX(80%); transform: translateX(80%); -webkit-transform: translateX(80%) translateZ(0); transform: translateX(80%) translateZ(0); }
.js .oc-complementary-active [role="complementary"] { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transform: translateX(100%) translateZ(0); transform: translateX(100%) translateZ(0); }
@media (min-width: 36.25em) { .js .oc-complementary-active [role="main"] { -webkit-transform: translateX(60%); -ms-transform: translateX(60%); transform: translateX(60%); -webkit-transform: translateX(60%) translateZ(0); transform: translateX(60%) translateZ(0); } }
@media (min-width: 60em) { .js .oc-complementary-active [role="main"] { width: 75%; -webkit-transform: translateX(33.33%); -ms-transform: translateX(33.33%); transform: translateX(33.33%); -webkit-transform: translateX(33.33%) translateZ(0); transform: translateX(33.33%) translateZ(0); } }
@media (min-width: 93.75em) { .js .oc-complementary-active [role="main"] { width: 82%; -webkit-transform: translateX(21.95%); -ms-transform: translateX(21.95%); transform: translateX(21.95%); -webkit-transform: translateX(21.95%) translateZ(0); transform: translateX(21.95%) translateZ(0); } }

.js.no-csstransforms.no-csstransitions .oc-navigation-active [role="main"] { left: -80%; }
.js.no-csstransforms.no-csstransitions .oc-navigation-active [role="navigation"] { left: 20%; }
@media (min-width: 36.25em) { .js.no-csstransforms.no-csstransitions .oc-navigation-active [role="main"] { left: -60%; }
  .js.no-csstransforms.no-csstransitions .oc-navigation-active [role="navigation"] { left: 40%; } }
.js.no-csstransforms.no-csstransitions .oc-complementary-active [role="main"] { left: 80%; }
.js.no-csstransforms.no-csstransitions .oc-complementary-active [role="complementary"] { left: 0; }
@media (min-width: 36.25em) { .js.no-csstransforms.no-csstransitions .oc-complementary-active [role="main"] { left: 60%; } }
@media (min-width: 60em) { .js.no-csstransforms.no-csstransitions .oc-complementary-active [role="main"] { left: 25%; } }
@media (min-width: 93.75em) { .js.no-csstransforms.no-csstransitions .oc-complementary-active [role="main"] { left: 18%; } }

body, h1, h2, h3, h4, h5, h6 { font-family: "myriad-pro", sans-serif; font-weight: 300; }

.project__header h1, .page__header h1, .article__header h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; line-height: 1.3; margin-top: 0.75em; margin-bottom: 0.75em; }
@media (min-width: 60em) { .project__header h1, .page__header h1, .article__header h1 { font-size: 3.927em; line-height: 1.14591; margin-bottom: 0.38197em; margin-top: 0.5em; margin-bottom: 0.75em; } }

.project__thumb-overlay h1, .article__thumb-overlay h1 { font-size: 1em; line-height: 1.5; margin-bottom: 1.5em; line-height: 1.3; font-weight: 300; margin-top: 0.5em; margin-bottom: 0; }
@media (min-width: 60em) { .project__thumb-overlay h1, .article__thumb-overlay h1 { font-size: 0.865em; line-height: 1.7341; margin-bottom: 1.7341em; margin-bottom: 0; } }

.project__message, .article__message { text-align: center; }

.project__content blockquote, .article__content blockquote { position: relative; font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
.project__content blockquote p, .article__content blockquote p { position: relative; z-index: 2; padding: 0 1em; }
.project__content blockquote:before, .project__content blockquote:after, .article__content blockquote:before, .article__content blockquote:after { display: block; position: absolute; font-size: 5em; line-height: 0; font-weight: bold; color: #eee; z-index: 1; }
.project__content blockquote:before, .article__content blockquote:before { content: '\201C'; top: 0.25em; left: 0; }
.project__content blockquote:after, .article__content blockquote:after { content: '\201D'; bottom: -0.25em; right: 0; }

.article__thumb--date { display: block; overflow: hidden; padding: 0.25em; line-height: 1em; color: #6a6a6a; background: #ddd; -webkit-transition: .3s; transition: .3s; }
.article__thumb--date:hover { color: #444; }
.article__thumb--date .date--1, .article__thumb--date .date--2, .article__thumb--date .date--3 { display: block; width: 48%; line-height: 1em; }
.article__thumb--date .date--1 { float: left; padding-right: 2%; font-size: 5em; text-align: center; border-right: solid 2px #6a6a6a; }
@media (min-width: 93.75em) { .article__thumb--date .date--1 { font-size: 4em; } }
@media (min-width: 128.75em) { .article__thumb--date .date--1 { font-size: 6em; } }
.article__thumb--date .date--2, .article__thumb--date .date--3 { float: right; padding-left: 2%; font-size: 1.75em; }
@media (min-width: 93.75em) { .article__thumb--date .date--2, .article__thumb--date .date--3 { font-size: 1.5em; } }
@media (min-width: 128.75em) { .article__thumb--date .date--2, .article__thumb--date .date--3 { font-size: 2em; } }
.article__thumb--date .date--2 { margin-top: 0.33em; }
@media (min-width: 93.75em) { .article__thumb--date .date--2 { margin-top: 0.25em; } }
@media (min-width: 128.75em) { .article__thumb--date .date--2 { margin-top: 0.33em; } }
.article__thumb--date .date--3 { margin-top: 0.25em; }

.article__meta { color: #aaa; margin-bottom: 2em; }

.awards .awards__year { margin-bottom: 3em; }
.awards h2 { padding-bottom: 0.25em; margin-bottom: 0.25em; border-bottom: solid 1px #ddd; }
.awards h3 { font-size: 1.618em; line-height: 1.85414; margin-bottom: 0.92707em; margin-bottom: 0.25em; }
.awards h3 a { display: block; overflow: hidden; }
.awards h3 a:hover { color: #ff8300; }
.awards h3 a small { float: right; margin-top: 0.5em; }
.awards h4 { font-size: 1em; line-height: 1.5; margin-bottom: 1.5em; margin-bottom: 0.5em; }

.site__container--nav, .site__container--list { background-color: #f0f0f0; }

.site__footer { font-size: 0.9em; color: #bbb; text-align: center; }

.site__nav .is_active { color: #ff8300; }

.site__nav--links li a { color: #6a6a6a; }
.no-touch .site__nav--links li a:hover { color: #444; }

.nav__button { overflow: auto; display: block; padding: 5px; }
@media (min-width: 60em) { .no-touch .nav__button:hover { text-decoration: none; background-color: #eee; } }

@media (max-width: 60em) { .oc-complementary-active .site__content, .oc-complementary-active .site__footer, .oc-navigation-active .site__content, .oc-navigation-active .site__footer { position: relative; }
  .oc-complementary-active .site__content:before, .oc-complementary-active .site__footer:before, .oc-navigation-active .site__content:before, .oc-navigation-active .site__footer:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; } }
[data-oc-target="complementary"] { width: 38px; }
[data-oc-target="complementary"] .sq-icon { display: block; float: left; width: 10px; height: 10px; margin: 2px; background-color: #444; }
.oc-complementary-active [data-oc-target="complementary"] .sq-icon { background-color: #ff8300; }

[data-oc-target="navigation"] { width: 38px; }
[data-oc-target="navigation"] .sq-icon { display: block; float: left; width: 24px; height: 5px; margin: 2px; background-color: #444; }
.oc-navigation-active [data-oc-target="navigation"] .sq-icon { background-color: #ff8300; }

.project__thumb, .article__thumb { position: relative; line-height: 0.8em; color: #6a6a6a; }
.project__thumb > a, .article__thumb > a { border-top: solid 8px transparent; display: block; }
.no-touch .project__thumb > a:hover, .no-touch .article__thumb > a:hover { color: #444; border-top-color: #444; }
.project__thumb .is_active, .article__thumb .is_active { color: #ff8300; border-top-color: #ff8300; }

.project__filter .filter__tags { margin-bottom: 0; padding: 4% 1.5em; border-bottom: solid 1px #ddd; }
.project__filter .filter__tags a { display: block; color: #6a6a6a; }
.project__filter .filter__tags a.is_active { color: #ff8300; }
.project__filter .filter__tags a:hover { color: #444; }

.site__loader { position: absolute; top: 0; left: 0; width: 100%; height: 5px; z-index: 999; }
.site__loader .progress { width: 3%; height: 100%; background-color: #ff8300; -webkit-transition: .3s ease width; transition: .3s ease width; }

.placeholder__image { width: 100%; text-align: center; color: #ddd; background-color: #eee; }

.banner__wrapper { overflow: hidden; position: relative; opacity: 0; }
.banner__wrapper ul { overflow: hidden; width: 900%; background-color: #ff8300; }
.banner__wrapper li { float: left; padding-right: 30px; background-color: #fff; }
.csstransitions .banner__wrapper li { -webkit-transition: margin .3s ease; transition: margin .3s ease; }
@media (min-width: 60em) { .csstransitions .banner__wrapper li { -webkit-transition: margin .5s ease; transition: margin .5s ease; } }
@media (min-width: 93.75em) { .csstransitions .banner__wrapper li { -webkit-transition: margin 1s ease; transition: margin 1s ease; } }
.banner__wrapper[data-image-count="1"] ul { width: 100% !important; }

.banner__wrapper--single img { width: 100%; }

.banner__wrapper, .banner__wrapper img { max-height: 300px; }
@media (min-width: 60em) { .banner__wrapper, .banner__wrapper img { max-height: 600px; } }
@media (min-width: 93.75em) { .banner__wrapper, .banner__wrapper img { max-height: 800px; } }

.banner__controls { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

[data-carousel-direction], .to-content { position: absolute; font-size: 2.75em; color: rgba(255, 255, 255, 0.5); text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3); }
.no-touch [data-carousel-direction]:hover, .no-touch .to-content:hover { color: #fff; }

[data-carousel-direction] { top: 50%; margin-top: -22px; }
[data-carousel-direction].disabled, [data-carousel-direction].disabled:hover { color: rgba(0, 0, 0, 0.3); text-shadow: none; cursor: not-allowed; }
@media (min-width: 60em) { [data-carousel-direction] { margin-top: -26.5px; } }

[data-carousel-direction="left"] { left: 2.5%; }

[data-carousel-direction="right"] { right: 2.5%; }

.to-content { bottom: 2.5%; left: 50%; margin-left: -22px; }
@media (min-width: 60em) { .to-content { margin-left: -26.5px; } }
.no-js .to-content { display: none; }
.banner__wrapper--single .to-content { display: none; }
@media (min-width: 93.75em) { .banner__wrapper--single .to-content { display: block; } }

@font-face { font-family: 'icomoon'; src: url("/dist/fonts/icomoon.eot?al0jz"); src: url("/dist/fonts/icomoon.eot?#iefixal0jz") format("embedded-opentype"), url("/dist/fonts/icomoon.woff?al0jz") format("woff"), url("/dist/fonts/icomoon.ttf?al0jz") format("truetype"), url("/dist/fonts/icomoon.svg?al0jz#icomoon") format("svg"); font-weight: normal; font-style: normal; }
[class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-arrow-left:before { content: "\e600"; }

.icon-arrow-right:before { content: "\e601"; }

.icon-arrow-down:before { content: "\e602"; }

.icon-arrow-up:before { content: "\e603"; }