html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

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

audio, canvas, progress, video { display: inline-block; }

audio:not([controls]) { display: none; height: 0; }

progress { vertical-align: baseline; }

template, [hidden] { display: none; }

a { background-color: transparent; -webkit-text-decoration-skip: objects; }

a:active, a:hover { outline-width: 0; }

abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }

b, strong { font-weight: inherit; }

b, strong { font-weight: bolder; }

dfn { font-style: italic; }

h1 { font-size: 2em; margin: 0.67em 0; }

mark { background-color: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

img { border-style: none; }

svg:not(:root) { overflow: hidden; }

code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

figure { margin: 1em 40px; }

hr { box-sizing: content-box; height: 0; overflow: visible; }

button, input, select, textarea { font: inherit; margin: 0; }

optgroup { font-weight: bold; }

button, input { overflow: visible; }

button, select { text-transform: none; }

button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }

textarea { overflow: auto; }

[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-input-placeholder { color: inherit; opacity: 0.54; }

::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

@font-face { font-family: 'voodoo'; src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AAAQ0AAsAAAAABhQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAPsAAAFEBMC9q0ZGVE0AAAIEAAAAGgAAABxmnNGeR0RFRgAAAiAAAAAcAAAAIAAyAARPUy8yAAACPAAAAE0AAABgStjXTGNtYXAAAAKMAAAAUQAAAWID9vVjaGVhZAAAAuAAAAAvAAAANvnibIZoaGVhAAADEAAAAB4AAAAkAM3//2htdHgAAAMwAAAAFAAAABQBZwAAbWF4cAAAA0QAAAAGAAAABgAFUABuYW1lAAADTAAAANwAAAF68akh9XBvc3QAAAQoAAAADAAAACAAAwAAeJxFTD1Lw1AUPbdJGinhaSRVh2ccu0mm/gMFxcGtk5sURDGLujhqcbiOOugo4qZLnfQv+AOUToKgD6FxzHZ9aUy8w+GeT4Lrgoj8ozTdTlNQA4Rurhv5opMvuBw4HLhxi4S5xMDnk8x4GrvTGpjROAg1lKbuLJyiOwWF6HB/ZzVJknLzb9neJlbQozN4RE7vcviUqXtXxHwPBKEFGUfHgrkawsr418rIJGxqGFdGQWP1Jog7e4O2yPvrxWhCmrY9v2GLX482aT8xxWdqWmlL6lOwdXUtWHu+sws3/T4Lll/WRR5+bj3Fxu1kvvqIuH16PmLmJgetXxo8jMMAeJxjYGBgZACCM7aLzoPos/rT02E0AEhLBnAAAHicY2BkYGDgA2IJBhBgYmAEQhYwBvEYAAR2ADd4nGNgZghjnMDAysDB4MjgxsDAwAelDRhYGCQZGJgYWJkZYIBRgAEBAtJcUxgcGFI+MDDE/f/FwMkQx8DeAFQDlvQEYgUgZAQAgIEJPwAAAHicY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQzMKQw5DOUfWD4/x+sDon3f97/Sf97BVigJsABIxsDuhBNABOSlRCKmQ62EgcAY2AOSQAAAHicY2BkYGAAYo5/O3bE89t8ZeBmSAGKMJzVn56OoP//BIrGAbkcDEwgUQBGxws/AHicY2BkYGCI+/+TgZMhhYHh/xwgCRJBBqwAeq8EygAAAGQAAABZAAAATgAAAFwAAAAAAAAAAFAAAAUAAHicbZBLasMwEIY/J45LSeiuXYtClzaWs8u6+ABdZB+IMIFggfI4Sk6QXY7RA/QEuUt+y1p0EQ2j+TT880DAggsZw8koeEs84YWvxFM+OSTOpbkmnjHnN3Ehu0uZ5a/KLGLVwBN1fE885ZsycR7njjzjg1viQvk/znjZNt6cvd96xR8cHSf2bAh6uu603whaiXqOMQYpHIaGilpxJf/fbMwssVpk8EYqqzet74+tD50zTVWblRmHCpa2tGVTW2mebrXWvKDv2cUtjLoNk1m7cNj53tiqfl74AOQdNot4nGNgZsALAAB9AAQ=) format("woff"), url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTWac0Z4AAAWUAAAAHEdERUYANAAGAAAFdAAAACBPUy8ySrfW4gAAAVgAAABWY21hcAX8+GwAAAHMAAABYmdhc3D//wADAAAFbAAAAAhnbHlmKzSDIwAAA0AAAAB4aGVhZPnibIUAAADcAAAANmhoZWEAzgAAAAABFAAAACRobXR4AYgAAAAAAbAAAAAcbG9jYQBCAGAAAAMwAAAAEG1heHAASgALAAABOAAAACBuYW1l8akh9QAAA7gAAAF6cG9zdE5an+QAAAU0AAAAOAABAAAAAQAAcabNnl8PPPUACwBkAAAAAM0vl2cAAAAAzS+XZwAA//gAZABeAAAACAACAAAAAAAAAAEAAABe//gACQBkAAD/nABkAAEAAAAAAAAAAAAAAAAAAAAHAAEAAAAHAAgAAQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQBWAZAABQAIAEEARgAAAA4AQQBGAAAAMAAEABkAAAIABQMAAAAAAAAAAAABEAAAAAAAAAAAAAAAUGZFZABAAGTwAABe//oACQBeAAiAAAABAAAAAAAAAGQAAAAAAAAAIQAAAFkAAABOAAAAXAAAAAAAAAAAAAMAAAADAAAAHAABAAAAAABcAAMAAQAAABwABABAAAAADAAIAAIABAAAAGQAbwB28AD//wAAAAAAZABvAHbwAP//AAD/oP+U/48QBgABAAAAAAAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAwAAAAAAAAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEgAkADAAPAABAAD/+gBQAEoABwAAPAE2MhYUBiIXIhcXIhEiFxciFwAAAAABAAD/+gBHAEoABwAAFzI2NCYrARUeERcXER4GFyIXUAAAAAABAAD/+ABeAEoAAgAANwcnXi8vSlFRAAABAAD/+gBkAF4AAgAANRcjZGReZAAAAAAAAAwAlgABAAAAAAABAAYADgABAAAAAAACAAcAJQABAAAAAAADACIAcwABAAAAAAAEAAYApAABAAAAAAAFAAsAwwABAAAAAAAGAAYA3QADAAEECQABAAwAAAADAAEECQACAA4AFQADAAEECQADAEQALQADAAEECQAEAAwAlgADAAEECQAFABYAqwADAAEECQAGAAwAzwB2AG8AbwBkAG8AbwAAdm9vZG9vAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAHYAbwBvAGQAbwBvACAAOgAgADMAMQAtADEALQAyADAAMQAzAABGb250Rm9yZ2UgMi4wIDogdm9vZG9vIDogMzEtMS0yMDEzAAB2AG8AbwBkAG8AbwAAdm9vZG9vAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAAB2AG8AbwBkAG8AbwAAdm9vZG9vAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwAAAAEAAgBSAEcAWQECB3VuaUYwMDAAAAAB//8AAgABAAAADgAAABgAAAAAAAIAAQADAAYAAQAEAAAAAgAAAAAAAQAAAADMPaLPAAAAAM0vl2cAAAAAzS+XZw==) format("truetype"); font-weight: normal; font-style: normal; }

/*voodoo logo*/
.vclogo { font-family: 'voodoo'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; }

a.vclogo { text-decoration: none; }

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

@font-face { font-family: 'aktivgrotesk-bold'; src: url("fonts/aktivgrotesk-bold-webfont.woff2") format("woff2"), url("fonts/aktivgrotesk-bold-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'aktivgrotesk-bold-italic'; src: url("fonts/aktivgrotesk-bolditalic-webfont.woff2") format("woff2"), url("fonts/aktivgrotesk-bolditalic-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'aktivgrotesk-italic'; src: url("fonts/aktivgrotesk-italic-webfont.woff2") format("woff2"), url("fonts/aktivgrotesk-italic-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'aktivgrotesk-light'; src: url("fonts/aktivgrotesk-light-webfont.woff2") format("woff2"), url("fonts/aktivgrotesk-light-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'aktivgrotesk-light-itlaic'; src: url("fonts/aktivgrotesk-lightitalic-webfont.woff2") format("woff2"), url("fonts/aktivgrotesk-lightitalic-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'aktivgrotesk-regular'; src: url("fonts/aktivgrotesk-regular-webfont.woff2") format("woff2"), url("fonts/aktivgrotesk-regular-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }

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

[class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; 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-quote-open:before { content: "\e901"; }

.icon-quote-close:before { content: "\e902"; }

.icon-home:before { content: "\e903"; }

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

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

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

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

.icon-search:before { content: "\e906"; }

/*Lightest grey that passes WCAG2.0-AA contrast on white*/
/* Usage: use pixel size p{ @include font-size(13); } */
html { font-size: 62.5%; }

html, button, input, select, textarea { color: #222; }

body { background-color: white; font-size: 1.2rem; font-family: "aktivgrotesk-regular", sans-serif; line-height: 1.5; }

/*text selection*/
::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

/*W3C AA Placeholder Text of white inputs*/
::-webkit-input-placeholder { color: #717171; }

:-moz-placeholder { color: #717171; }

:-ms-input-placeholder { color: #717171; }

/*Example CSS3 validation*/
input[type=email]:valid { color: green; }

input[type=email]:invalid { color: red; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

textarea { resize: vertical; min-height: 2; }

/* Remove the gap between this & bottom of containers: https://github.com/h5bp/html5-boilerplate/issues/440 */
audio, canvas, iframe, img, svg, video { vertical-align: middle; }

/*conditional messages*/
#msgNojs, #msgLegacy { display: block; width: 100%; padding: 0.4em 0; font-size: 0.9em; text-align: center; background-color: #f1f1f1; text-decoration: none; color: #6e6f6f; border-bottom: solid 1px #bcbcbc; }

#msgNojs:hover, #msgNojs:focus, #msgNojs:active, #msgLegacy:hover, #msgLegacy:focus, #msgLegacy:active { background-color: #CCC; color: #575758; }

header { background-color: #ffffff; padding: 56px 0; }

header .wrapper { display: flex; align-items: center; position: relative; }

.logo-bx { position: absolute; left: 0; right: 0; margin: 0 auto; text-align: center; }

.logo-bx svg, .logo-bx img { width: 80%; min-height: 30px; }

footer { font-family: "aktivgrotesk-regular", sans-serif; color: #C4CCD0; margin-top: 110px; padding: 19px 0; font-size: 15px; font-size: 1.5rem; }

footer .wrapper { width: 86.25%; border-top: 1px solid #C4CCD0; }

footer a { color: #C4CCD0; }

footer a:hover, footer a:focus { color: #8e9ba2; }

footer .logo-bx { position: static; margin-left: 0; width: 155px; vertical-align: text-bottom; display: inline-block; }

footer .logo-bx svg, footer .logo-bx img { min-height: 0; }

footer div.\31\/2:nth-child(2) { text-align: right; }

body { font-size: 15px; font-size: 1.5rem; }

.\31\/1 { width: 100%; }

.\31\/2 { width: 50%; }

.\31\/3 { width: 33.33333%; }

.\32\/3 { width: 66.66667%; }

.\31\/4 { width: 25%; }

.\33\/4 { width: 75%; }

.\35\/6 { width: 83.33333%; }

.\33\/8 { width: 37.5%; }

.\33\/10 { width: 30%; }

.\37\/10 { width: 70%; }

.\35\/12 { width: 41.66667%; }

.\37\/12 { width: 58.33333%; }

.wrapper { width: 62.5%; margin: 0 auto; }

.wrapper.project-list { width: 86.25%; }

.col { float: left; box-sizing: border-box; }

a { text-decoration: none; -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; transition: all 700ms ease; }

a:hover, a:focus { text-decoration: underline; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: #485257; font-family: "aktivgrotesk-regular", sans-serif; font-weight: 300; line-height: 1.2; }

h1, .h1 { font-size: 40px; font-size: 4rem; }

h2, .h2 { font-size: 25px; font-size: 2.5rem; }

p { margin: 15px 0; }

blockquote { border-top: 1px solid #E9EAEA; border-bottom: 1px solid #E9EAEA; color: #db211b; text-align: center; width: 100%; clear: both; margin: 66px 0; padding: 36px 0; font-family: "another_shabbyregular"; font-size: 38px; font-size: 3.8rem; }

.home h1 { margin: 0 0 38px; letter-spacing: 0.15em; }

.home h1 strong { font-weight: 300; color: #db211b; }

.intro-bx { width: 80%; margin: 77px auto 52px; text-align: center; line-height: 1.6; font-size: 15px; font-size: 1.5rem; }

.filter-bx { padding: 52px 0; }

.filter-bx ul { margin: 0; padding: 0; text-align: center; font-size: 0; }

.filter-bx li { display: inline-block; zoom: 1; *display: inline; text-transform: lowercase; vertical-align: middle; padding-right: 35px; letter-spacing: 0.1em; font-family: "aktivgrotesk-regular", sans-serif; margin-bottom: 10px; font-size: 17px; font-size: 1.7rem; }

.filter-bx li input[type="checkbox"] { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; z-index: 999999; }

.filter-bx li input[type="checkbox"] + label { background-repeat: no-repeat; background-position: left top; height: 20px; cursor: pointer; }

.filter-bx li input[type="checkbox"]:checked + label { background-position: left bottom; border-bottom: 1px solid #000; }

.content-bx { margin-top: 77px; }

.content-bx .\32\/3.content-col { width: 66.66667%; padding-right: 16.25%; }

.content-bx a { border-bottom: 1px solid transparent; }

.contact-info .h4 { font-weight: 400; }

.contact-info .h4 dt { margin: 0; padding: 0; color: #db211b; width: 20%; float: left; margin: 15px 0; }

.contact-info .h4 dd { margin: 0; padding: 0; width: 80%; float: left; margin: 15px 0; }

.contact-info .h4 dt a, .contact-info .h4 dd a { color: #485257; }

.contact-info .h4 dt a:hover, .contact-info .h4 dt a:focus, .contact-info .h4 dd a:hover, .contact-info .h4 dd a:focus { color: #8e9ba2; text-decoration: none; border-color: #8e9ba2; }

.grid-sizer { width: 25%; }

.gutter-sizer { width: 10px; }

.project-list-bx { border-top: 1px solid #db211b; }

.project-item { box-sizing: border-box; width: 25%; }

.project-item .outer-project-bx { width: 92%; padding-top: 100%; position: relative; }

.project-item .inner-project-bx { position: absolute; box-sizing: border-box; top: 0; left: 4%; width: 92%; height: calc(100% - 10px); }

.project-item .inner-project-bx .project-info { background-color: #cfd2d4; padding: 80px; }

.project-item .inner-project-bx .project-info h3 { font-size: 25px; font-size: 2.5rem; color: #475156; }

.project-item .inner-project-bx .project-info h3 strong { font-family: 'aktivgrotesk-bold', sans-serif; }

.project-item .inner-project-bx .project-info p { font-size: 15px; font-size: 1.5rem; color: #475156; }

.project-item .inner-project-bx a { display: block; }

.project-item.wx2 { width: 50%; }

.project-item.wx2 .outer-project-bx { padding-top: 50%; }

.project-item.wx2 .inner-project-bx { left: 2%; width: 100%; }

.project-item.hx2 .outer-project-bx { padding-top: 200%; width: 93%; }

.project-item.hx1-5 .outer-project-bx { padding-top: 150%; }

.project-item .img-bx img { max-width: 100%; width: 100%; }

.staff .project-item .img-bx { background-color: transparent; }

.project-item h2, .project-item .h2 { margin-bottom: 4px; font-size: 14px; font-size: 1.4rem; font-weight: normal; }

.project-item h2 a, .project-item .h2 a { color: #db211b; float: right; }

.project-item h2 a:hover, .project-item h2 a:focus, .project-item .h2 a:hover, .project-item .h2 a:focus { color: #ae1a15; }

.staff .project-item h4 { font-size: 14px; font-size: 1.4rem; margin: 0; }

.staff .project-item h4 a { display: block; margin: 5px 0; color: #db211b; }

.staff .project-item h4 a:hover, .staff .project-item h4 a:focus { color: #ae1a15; }

.tag-bx a { display: block; float: left; line-height: 1; padding: 3px 5px; margin-right: 4px; background-color: #C4CCD0; color: #ffffff; cursor: pointer; font-family: "aktivgrotesk-regular", sans-serif; font-weight: 400; font-size: 12px; font-size: 1.2rem; }

.tag-bx a:hover, .tag-bx a:focus { color: #485257; background-color: #E9EAEA; }

.slider-bx { border-top: 1px solid #E9EAEA; background-color: #485257; position: relative; min-height: 200px; }

.slider-ctrls-bx { position: absolute; z-index: 999; top: 50%; transform: translateY(-50%); width: 100%; }

.slider-ctrls-bx li { float: left; }

.slider-ctrls-bx li a { display: block; min-width: 10px; border-radius: 2px; text-align: center; color: #d6d5d3; font-size: 124px; font-size: 12.4rem; text-decoration: none; line-height: 1; width: 69px; height: 69px; background-size: contain !important; }

.slider-ctrls-bx li a:hover, .slider-ctrls-bx li a:focus { color: white; }

.slider-ctrls-bx li a.selected a { color: white; }

.slider-ctrls-bx li a.disabled a { color: #333; background: #DDD; cursor: default; opacity: .25; }

.slider-ctrls-bx li a span { font-weight: 100; }

.slider-ctrls-bx li.next { right: 50px; position: absolute; }

.slider-ctrls-bx li.next a { background: url("../dev/next-btn.png") no-repeat top center; transition: all ease .1s ease-in-out; }

.slider-ctrls-bx li.next a:hover { background: url("../dev/next-btn-hover.png") no-repeat top center; }

.slider-ctrls-bx li.prev { margin-left: 50px; }

.slider-ctrls-bx li.prev a { background: url("../dev/prev-btn.png") no-repeat top center; transition: all ease .1s ease-in-out; }

.slider-ctrls-bx li.prev a:hover { background: url("../dev/prev-btn-hover.png") no-repeat top center; }

.slider-status { margin: 0 0 10px; }

.slider-ctrls, .slider-nav { margin: 0; padding: 0; list-style: none; }

.slider-ctrls { width: 100%; position: relative; }

.slider-nav { float: right; }

/* --- Slider --- */
.slider { margin: 0 auto; position: relative; overflow-y: visible; }

.slider ul { margin: 0; padding: 0; list-style: none; }

.slide { position: relative; }

.slide img { display: block; max-width: 100%; width: 100%; height: auto; border: none; }

.slide div { position: absolute; bottom: 0; left: 0; width: 100%; padding: 6px 12px; box-sizing: border-box; line-height: 1.25; color: #DDD; background: black; background: rgba(0, 0, 0, 0.8); }

.slide:focus { box-shadow: 0 0 5px red; }

.slide a { display: block; }

.slide:after, .slide:before { content: ''; height: 100%; width: 269px; position: absolute; top: 0; opacity: 0.4; }

/* --- Visual Timer --- */
.timer { position: relative; z-index: 1; background: #FFF; }

.timer .progress { background: #069; position: relative; left: 0; width: 20%; }

.playing .progress { height: 3px; }

.bttn.bttn--view { position: absolute; bottom: -54px; right: 18%; z-index: 1; }

.bttn.bttn--view a { color: #fff; text-decoration: none; width: 109px; height: 109px; background: url("../dev/btn-bg.png") no-repeat top center; display: block; font-size: 15px; font-size: 1.5rem; text-align: center; transition: all ease .1s ease-in-out; }

.bttn.bttn--view a span { display: inline-block; text-align: left; vertical-align: middle; }

.bttn.bttn--view a span.bttn-text { position: relative; top: 50%; transform: translateY(-50%); }

.bttn.bttn--view a span.view-text { position: relative; line-height: 1; left: 5px; }

.bttn.bttn--view a span.icon-arrow-right { position: relative; left: 5px; }

.bttn.bttn--view a:hover { background: url("../dev/btn-hover.png") no-repeat top center; }

.project-details .page-title h1 { margin-bottom: 10px; }

.project-details .tag-bx { margin-bottom: 30px; }

.project-details .project-list-bx { border-top: 0; margin-top: 80px; }

.project-details .project-item .inner-project-bx { position: relative; }

.project-details .project-item.wx2 .outer-project-bx { padding-top: 80px; }

.staff .project-list-bx { padding-top: 52px; }

@media only screen and (max-width: 1300px) { .staff .project-list-bx .col { width: 33%; } }

@media only screen and (max-width: 1140px) { .staff .project-list-bx .col { width: 50%; } }

@media only screen and (max-width: 700px) { .staff .project-list-bx .col { width: 100%; } }

@media only screen and (max-width: 360px) { .staff .project-list-bx .col h4 { font-size: 1.2rem; } }

.back-link { display: none; color: #db211b; font-size: 20px; }

.back-link:hover, .back-link:focus { color: #000; text-decoration: none; }

@media only screen and (max-width: 600px) { .back-link { display: inline-block; } }

nav ul { margin: 0; padding: 0; font-size: 0; }

.nav-toggle-bx { display: none; }

/* <============ MOVE TO MEDIA QUERIES AFTER DEV */
.main-nav-bx { width: 100%; display: flex; align-items: center; justify-content: space-between; }

.main-nav-bx .col { height: 100%; }

.main-nav-bx .left { float: left; }

.main-nav-bx .right { float: right; }

.main-nav-bx .right nav ul { text-align: right; }

.main-nav-bx li { display: inline-block; zoom: 1; *display: inline; text-align: center; vertical-align: middle; position: relative; z-index: 2; font-size: 15px; font-size: 1.5rem; }

.main-nav-bx li:after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; margin-left: 50%; background-color: white; z-index: 0; -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; transition: all 700ms ease; }

.main-nav-bx li:hover:after, .main-nav-bx li:focus:after { content: ""; width: 100%; margin-left: 0; -webkit-transition-delay: 0.2s; /* Safari */ transition-delay: 0.2s; }

.main-nav-bx li a { display: block; text-transform: lowercase; text-decoration: none; font-weight: 700; color: #485257; margin: 0 15px; position: relative; z-index: 3; border-bottom: 1px solid transparent; }

.main-nav-bx li a:hover, .main-nav-bx li a:focus { color: #000000; border-bottom: 1px solid #000; }

.main-nav-bx li a [class^="icon-"], .main-nav-bx li a [class*=" icon-"] { display: block; color: #db211b; font-size: 22px; font-size: 2.2rem; }

.main-nav-bx li a [class^="icon-"]:hover, .main-nav-bx li a [class^="icon-"]:focus, .main-nav-bx li a [class*=" icon-"]:hover, .main-nav-bx li a [class*=" icon-"]:focus { color: #971713; }

.main-nav-bx li.active a { border-bottom: 1px solid #000; }

.mobile-toggle { display: none; position: absolute; right: 0; top: -16px; }

.mobile-toggle a { color: #fff; position: relative; line-height: 60px; display: block; font-size: 20px; font-size: 2rem; text-decoration: none; text-transform: uppercase; height: 60px; width: 60px; }

.mobile-toggle a i { font-size: 20px; font-size: 2rem; }

#nav-toggle { cursor: pointer; }

#nav-toggle span { left: 0; right: 0; top: 25px; margin: 0 auto; }

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 5px; width: 35px; background: #000; position: absolute; display: block; content: ''; }

#nav-toggle span:before { top: -10px; }

#nav-toggle span:after { bottom: -10px; }

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 300ms ease-in-out; }

#nav-toggle.active span { background-color: transparent; }

#nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; }

#nav-toggle.active span:before { transform: rotate(45deg); }

#nav-toggle.active span:after { transform: rotate(-45deg); }

.main-nav-bx .mobile-nav { display: none; width: 100%; margin-top: 40px; }

.main-nav-bx .mobile-nav ul li { display: block; }

.main-nav-bx .mobile-nav ul li:hover:after, .main-nav-bx .mobile-nav ul li:focus:after { -webkit-transition-delay: 0s; /* Safari */ transition-delay: 0s !important; }

.main-nav-bx .mobile-nav ul li a { padding: 10px 0; }

.main-nav-bx .mobile-nav ul li a:hover, .main-nav-bx .mobile-nav ul li a:focus { color: #fff; transition: auto; }

.main-nav-bx .mobile-nav ul li a [class^="icon-"]:hover, .main-nav-bx .mobile-nav ul li a [class^="icon-"]:focus, .main-nav-bx .mobile-nav ul li a [class*=" icon-"]:hover, .main-nav-bx .mobile-nav ul li a [class*=" icon-"]:focus { color: #fff; }

.social-links li a svg { width: 18px; height: 18px; fill: #6d6d6d; }

.social-links li a { margin: 0; margin-right: 6px; }

.social-links li a:hover, .social-links li a:focus { border-bottom: 1px solid transparent; }

.social-links li a:hover svg, .social-links li a:focus svg { fill: #000; }

header .wrapper { width: 86.25%; }

@media only screen and (max-width: 1800px) { .video-bx { height: 400px !important; } }

@media only screen and (max-width: 1600px) { header .wrapper, .page-title.wrapper { width: 86.25%; }
  .video-bx { height: 300px !important; } }

@media only screen and (max-width: 1400px) { .project-item .inner-project-bx .project-info { padding: 50px; }
  .main-nav-bx li a { margin: 0 10px; }
  .social-links li a { margin: 0; margin-right: 6px; } }

@media only screen and (max-width: 1260px) { header .wrapper { width: 86.25%; }
  .staff .project-item h4 { font-size: 12px; font-size: 1.2rem; } }

@media only screen and (max-width: 1200px) { .project-item .inner-project-bx .project-info { padding: 30px; }
  .project-item { width: 50%; margin-bottom: 40px; }
  .project-item .inner-project-bx { width: 100%; }
  .project-item .inner-project-bx { left: 0; }
  .project-item.wx2 .inner-project-bx { left: 0; }
  .project-item .inner-project-bx { position: relative; }
  .project-item .outer-project-bx, .project-item.hx2 .outer-project-bx, .project-item.wx2 .outer-project-bx { padding-top: 0; }
  .project-item h2.title span { display: inline-block; width: 80%; }
  .video-bx { height: 200px !important; } }

@media only screen and (max-width: 1180px) { header .wrapper { width: 90%; }
  .filter-bx li { margin-bottom: 20px; }
  .filter-bx ul { text-align: left; } }

@media only screen and (max-width: 1080px) { header .wrapper { width: 95%; } }

@media only screen and (max-width: 1024px) { .main-nav-bx .left, .main-nav-bx .right { display: none; }
  .logo-bx { left: 0; margin-left: 0; width: auto; }
  .mobile-toggle { display: block; }
  header .wrapper { display: block; }
  .main-nav-bx li:hover:after, .main-nav-bx li:focus:after { transition-delay: 0s; -webkit-transition-delay: 0s; }
  .main-nav-bx li:after { transition: auto; }
  .slider-ctrls-bx li a { background-size: contain !important; width: 30px; height: 55px; }
  .staff .project-item { width: 50%; }
  .logo-bx { width: 340px; }
  .staff .project-item h4 { font-size: 15px; font-size: 1.5rem; }
  .main-nav-bx .mobile-nav ul li a:hover, .main-nav-bx .mobile-nav ul li a:focus { color: #485257; text-decoration: underline; text-underline-position: under; border-color: white; }
  .main-nav-bx .mobile-nav ul li a:hover svg, .main-nav-bx .mobile-nav ul li a:focus svg { fill: #000; }
  .main-nav-bx li.active a { border-bottom: 0; }
  .main-nav-bx .mobile-nav ul li.active a { text-decoration: underline; text-underline-position: under; }
  html.no-js .main-nav-bx .mobile-nav { display: block !important; }
  .main-nav-bx .mobile-nav ul li a [class^="icon-"]:hover, .main-nav-bx .mobile-nav ul li a [class^="icon-"]:focus, .main-nav-bx .mobile-nav ul li a [class*=" icon-"]:hover, .main-nav-bx .mobile-nav ul li a [class*=" icon-"]:focus { color: #485257; } }

@media only screen and (min-width: 1024px) { .main-nav-bx .mobile-nav { display: none !important; } }

@media only screen and (max-width: 940px) { .project-item { margin-bottom: 20px; } }

@media only screen and (max-width: 860px) { .project-item.wx2.project-text { width: 100%; }
  .project-item.wx2.project-text .outer-project-bx { width: 100%; }
  .project-details .project-item.wx2 .outer-project-bx { padding-top: 20px; }
  .project-details .project-item, .project-details .project-item .inner-project-bx, .project-details .project-item .outer-project-bx { width: 100%; }
  .video-bx { height: 420px !important; } }

@media only screen and (max-width: 768px) { .\31\/2 { width: 100%; }
  .\31\/3 { width: 100%; }
  .\32\/3 { width: 100%; }
  section .wrapper { width: 86.25%; }
  .content-bx .\32\/3.content-col { width: 100%; padding-right: 0; }
  .logo-bx { width: 340px; }
  footer div.\31\/2:nth-child(2) { text-align: center; }
  footer .logo-bx { display: block; margin: 0 auto; }
  footer p { text-align: center; }
  .filter-bx li { display: block; margin-bottom: 10px; }
  .filter-bx { padding: 30px 0; }
  .staff .project-item.hx1-5 .outer-project-bx { padding-top: 0; } }

@media only screen and (max-width: 690px) { .staff .project-item { width: 100%; }
  .staff .project-item h4 { font-size: 12px; font-size: 1.2rem; }
  .project-item .inner-project-bx .project-info h3 { font-size: 2rem; }
  .video-bx { height: 320px !important; } }

@media only screen and (max-width: 600px) { .project-item { width: 100%; margin-bottom: 40px; }
  .project-item.wx2 { width: 100%; }
  .project-item .outer-project-bx { width: 100%; padding-top: 0; }
  .project-item.hx2 .outer-project-bx { width: 100%; }
  .project-item .inner-project-bx { position: relative; }
  .project-item.hx2 .outer-project-bx { padding-top: 0; }
  .project-item.wx2 .outer-project-bx { padding-top: 0; }
  .slider-ctrls-bx li.next { right: 20px; }
  .slider-ctrls-bx li.prev { margin-left: 20px; }
  .slide:after, .slide:before { display: none; }
  .bttn.bttn--view { margin: 0; position: relative; bottom: 0; right: 0; z-index: 1; display: none; }
  .bttn.bttn--view a { background: #db211b; display: block; width: 100%; height: 60px; }
  .bttn.bttn--view a:hover, .bttn.bttn--view a:focus { background: #000; } }

@media only screen and (max-width: 600px) { .video-bx { height: 240px !important; } }

@media only screen and (max-width: 480px) { .video-bx { height: 200px !important; } }

@media only screen and (max-width: 420px) { .intro-bx { width: 100%; }
  .logo-bx { width: 70%; }
  .mobile-toggle { top: -22px; }
  .slider-ctrls-bx li a { background-size: contain !important; width: 20px; height: 35px; }
  .slider-ctrls-bx { top: 36%; }
  .home h1 { font-size: 32px; font-size: 3.2rem; }
  .contact-info .h4 dt, .contact-info .h4 dd { float: none; }
  .project-item .inner-project-bx .project-info h3 { font-size: 1.75rem; } }

@media only screen and (max-width: 380px) { .video-bx { height: 170px !important; } }

@media only screen and (max-width: 340px) { .slider-bx { min-height: auto; } }

@media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ }

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ }

.hidden { display: none !important; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.invisible { visibility: hidden; }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

@media print { *, *:before, *:after { background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  /* Don't show links that are fragment identifiers, or use the `javascript:` pseudo protocol */
  a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  /* Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables */
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; } }