/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block; }
/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1; }
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none; }
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/**
* Address `font-family` inconsistency between `textarea` and other form
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif; }
/**
* Address margins handled incorrectly in IE 6/7.
*/
body {
margin: 0; }
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted; }
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0; }
/* ==========================================================================
Typography
========================================================================== */
/**
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
h2 {
font-size: 1.5em;
margin: 0.83em 0; }
h3 {
font-size: 1.17em;
margin: 1em 0; }
h4 {
font-size: 1em;
margin: 1.33em 0; }
h5 {
font-size: 0.83em;
margin: 1.67em 0; }
h6 {
font-size: 0.67em;
margin: 2.33em 0; }
/**
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }
/**
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
b,
strong {
font-weight: bold; }
blockquote {
margin: 1em 40px; }
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic; }
/**
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0; }
/**
* Address styling not present in IE 6/7/8/9.
*/
mark {
background: #ff0;
color: #000; }
/**
* Address margins set differently in IE 6/7.
*/
p,
pre {
margin: 1em 0; }
/**
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em; }
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word; }
/**
* Address CSS quotes not supported in IE 6/7.
*/
q {
quotes: none; }
/**
* Address `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none; }
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
/* ==========================================================================
Lists
========================================================================== */
/**
* Address margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1em 0; }
dd {
margin: 0 0 0 40px; }
/**
* Address paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px; }
/**
* Correct list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none; }
/* ==========================================================================
Embedded content
========================================================================== */
/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
img {
border: 0;
/* 1 */
-ms-interpolation-mode: bicubic;
/* 2 */ }
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden; }
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0; }
/* ==========================================================================
Forms
========================================================================== */
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0; }
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }
/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
border: 0;
/* 1 */
padding: 0;
white-space: normal;
/* 2 */
*margin-left: -7px;
/* 3 */ }
/**
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improve appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%;
/* 1 */
margin: 0;
/* 2 */
vertical-align: baseline;
/* 3 */
*vertical-align: middle;
/* 3 */ }
/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal; }
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none; }
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
*overflow: visible;
/* 4 */ }
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default; }
/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
*height: 13px;
/* 3 */
*width: 13px;
/* 3 */ }
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box; }
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0; }
/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */ }
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
font-size: 1em;
line-height: 1.4; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none; }
::selection {
background: #b3d4fc;
text-shadow: none; }
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle; }
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0; }
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical; }
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0; }
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
* Modified by Josh
*/
.ir, .js #omninav #go-back .icon, .js #omninav #filter-reset .icon, #omninav #side-panel-toggle .icon, .swiper-arrow .icon {
overflow: hidden;
text-indent: -500%;
white-space: nowrap;
*display: block !important;
zoom: 1;
line-height: 1; }
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
/*
* Hide visually and from screenreaders, but maintain layout
*/
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */ }
.clearfix:after {
clear: both; }
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.lt-ie8 .clearfix {
zoom: 1; }
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important;
/* Black prints faster: h5bp.com/s */
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 for images, or javascript/internal links
*/
.ir a:after, .js #omninav #go-back .icon a:after, .js #omninav #filter-reset .icon a:after, #omninav #side-panel-toggle .icon a:after, .swiper-arrow .icon a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: ""; }
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid; }
thead {
display: table-header-group;
/* h5bp.com/t */ }
tr,
img {
page-break-inside: avoid; }
img {
max-width: 100% !important; }
@page {
margin: 0.5cm; }
p,
h2,
h3 {
orphans: 3;
widows: 3; }
h2,
h3 {
page-break-after: avoid; } }
/* COLOURS */
/* MIXINS */
/**
* Retina images
* Include image for high-resolution devices.
*/
/**
* Sprites
* Pass in the number of blocks to desired icon space.
*/
.nbsp {
white-space: nowrap !important; }
html {
overflow: hidden; }
html.allow-y-scrolling {
overflow-y: scroll; }
@media (orientation: landscape) {
html.fullscreen.ipad.ios7 > body {
position: fixed;
bottom: 0;
width: 100%;
height: 672px !important; } }
@media screen and (max-width: 768px) {
html.allow-y-scrolling-on-mobile {
overflow-y: scroll; } }
html, body {
width: 100%;
height: 100%; }
body {
background-color: #787878;
font-size: 13px;
font-family: "Open Sans", helvetica, arial, sans-serif; }
a:focus {
outline: none; }
strong {
font-family: "Open Sans", helvetica, arial, sans-serif;
font-weight: normal; }
header {
height: 0;
position: fixed;
z-index: 3;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
box-sizing: border-box;
pointer-events: none;
width: 79.5%;
margin-left: 10.5%;
height: 100%; }
.no-logo header {
display: none; }
.no-svg header, .no-js header {
background-image: url(../img/logo.png); }
.svg header {
/*background-image: url(../img/fadeLogo.png); */
}
header h1 a {
font-size: 0;
text-decoration: none; }
.extra-spacing {
margin-top: 30px !important; }
@media screen and (max-width: 768px) {
.extra-spacing {
margin-top: 60px !important; } }
#omninav {
position: fixed;
z-index: 100;
left: 20px;
top: 20px;
right: 20px;
color: #fff;
-webkit-font-smoothing: subpixel-antialiased; }
.js #omninav.closed {
pointer-events: none; }
#omninav #go-back, #omninav #unsubscribe {
background: #000;
line-height: 0;
padding: 17px 6px 16px;
display: block;
float: left;
margin-right: 1px;
cursor: pointer;
position: relative;
z-index: 2;
pointer-events: all; }
.js #omninav #go-back .icon {
background: url(../img/icon-sprite.png) no-repeat -39px center;
width: 13px;
height: 13px;
display: inline-block; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
.js #omninav #go-back .icon {
background-image: url(../img/icon-sprite@2x.png);
background-size: auto 17px; } }
.js #omninav.closed #go-back .icon {
background-position: -13px center; }
#omninav #unsubscribe {
width: 293px;
line-height: 1.4em;
padding: 4px 0 4px 8px;
margin: 0 1px 0 0;
cursor: default; }
@media screen and (max-width: 768px) {
#omninav #unsubscribe {
width: 100%;
position: absolute;
padding: 9px 0 10px 8px;
top: 38px;
left: 38px; } }
#omninav #filter-reset {
background: #000;
line-height: 0;
padding: 7px 6px 6px;
float: left;
margin-right: 1px;
margin-left: -26px;
cursor: pointer;
position: relative;
z-index: 2;
pointer-events: all;
-webkit-transition: margin 300ms;
-moz-transition: margin 300ms;
transition: margin 300ms; }
#omninav #filter-reset.reset {
margin-left: 0; }
.js #omninav #filter-reset .icon {
background: url(../img/icon-sprite.png) no-repeat -91px center;
width: 16px;
height: 13px;
display: inline-block; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
.js #omninav #filter-reset .icon {
background-image: url(../img/icon-sprite@2x.png);
background-size: auto 17px; } }
.js #omninav.closed #filter-reset .icon {
background-position: -13px center; }
#omninav .toggle-contents {
-webkit-transition: opacity 700ms;
transition: opacity 700ms;
position: relative;
z-index: 1;
opacity: 1; }
.lt-ie9 #omninav .toggle-contents {
display: block; }
.js #omninav.closed .toggle-contents {
opacity: 0;
pointer-events: none; }
.lt-ie9.js #omninav.closed .toggle-contents {
display: none; }
.ie-9.js #omninav.closed .toggle-contents, .ie-10.js #omninav.closed .toggle-contents {
width: 0;
overflow: hidden; }
.ie-10.js #home #omninav.closed, .ie-10.js #people #omninav.closed, .lt-ie10.js #home #omninav.closed, .lt-ie10.js #people #omninav.closed {
right: auto;
width: 200px;
height: 30px; }
#omninav ul {
margin: 0;
padding: 10px 6px 10px;
list-style: none;
background: #000; }
#omninav .filter {
overflow: hidden;
width: 165px;
float: left;
margin-right: 1px;
position: relative;
height: 26px;
z-index: 10; }
.no-touch #omninav .filter:hover, .touch #omninav .filter.doubletap-hovered {
height: auto; }
.no-touch #omninav .filter:hover ul, .touch #omninav .filter.doubletap-hovered ul {
opacity: 1; }
#omninav .filter ul {
background: #000;
padding: 6px 0 24px;
opacity: 0;
-webkit-transition: opacity 250ms;
transition: opacity 250ms; }
#omninav .filter li {
cursor: pointer;
padding: 0 8px 1px; }
#omninav .filter .sub-group {
padding-left: 20px; }
#omninav .filter h3 {
padding: 4px 8px 4px;
background: #000;
margin: 0 0 1px;
font-size: 13px;
font-weight: normal;
cursor: pointer; }
#omninav .filter .display-all {
height: 0;
overflow: hidden;
opacity: 0;
-webkit-transition: 400ms;
transition: 400ms;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
#omninav .filter.filtered h3 {
color: #bbb; }
#omninav .filter.filtered .display-all {
height: 28px;
opacity: 1; }
#omninav .filter .filter-active {
pointer-events: none;
cursor: default; }
#omninav .filter .filter-active,
#omninav .filter li:hover {
color: #bbb; }
#omninav .filter .option-disabled,
#omninav .filter .option-disabled:hover {
color: #666;
cursor: default; }
#omninav .filter:after {
content: ' ';
position: absolute;
z-index: 3;
background: url(../img/icon-sprite.png) no-repeat -26px center;
width: 13px;
height: 7px;
right: 6px;
top: 10px; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
#omninav .filter:after {
background-image: url(../img/icon-sprite@2x.png);
background-size: auto 17px; } }
#omninav a {
text-decoration: none;
color: #fff; }
#omninav a:hover {
color: #bbb; }
#omninav .active a {
color: #bbb; }
#omninav .inline {
overflow: hidden; }
#omninav .inline li {
float: right;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
transition: opacity 500ms; }
#omninav .inline a {
display: block;
padding: 4px 8px 4px; }
#omninav .inline .right {
position: absolute;
right: 0; }
#omninav .inline.revealed li {
opacity: 1; }
#omninav .contents {
top: 0;
pointer-events: all; }
#practice #omninav .contents h1, #services #omninav .contents h1 {
display: none; }
#practice #omninav .contents #side-panel-toggle, #services #omninav .contents #side-panel-toggle {
display: none; }
#omninav .contents h1 {
margin: 0;
font-size: 13px;
font-weight: normal;
font-family: "Open Sans", helvetica, arial, sans-serif;
width: 309px; }
.js #omninav .contents h1 {
cursor: pointer; }
#omninav .contents .nav-loader {
float: left;
overflow: hidden;
pointer-events: none; }
#omninav .contents .nav-loader .wrapper {
margin-left: -100px;
-webkit-transition: margin 300ms;
transition: margin 300ms; }
.no-csstransforms #omninav .contents .nav-loader .wrapper {
display: none; }
#omninav .contents .nav-loader.nav-visible .wrapper {
margin-left: 0px; }
.no-csstransforms #omninav .contents .nav-loader.nav-visible .wrapper {
display: block; }
@media screen and (max-width: 768px) {
#omninav .contents .nav-loader.nav-visible .wrapper {
margin-left: 13px; } }
#unsubscribe #omninav .contents .nav-loader {
display: none; }
#omninav .contents .block {
float: left;
background: #000;
margin-right: 1px;
padding: 4px 8px 4px; }
#omninav .contents .loading {
height: 19px;
width: 18px;
padding: 13px 2px 14px; }
#omninav .contents .loading img {
width: 100%;
height: auto;
display: block; }
#omninav #side-panel-toggle {
background: #000;
line-height: 0;
padding: 17px 6px 16px;
display: block;
float: left;
margin-right: 1px;
cursor: pointer;
position: relative; }
#omninav #side-panel-toggle .icon {
background: url(../img/icon-sprite.png) no-repeat 0 center;
background-position: -78px center;
width: 13px;
height: 13px;
display: inline-block; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
#omninav #side-panel-toggle .icon {
background-image: url(../img/icon-sprite@2x.png);
background-size: auto 17px; } }
#omninav #side-panel-toggle.open .icon {
background-position: 0 center; }
@media screen and (min-width: 1350px), screen and (max-width: 768px) {
.profile #omninav #side-panel-toggle {
display: none; } }
@media screen and (max-width: 768px) {
#omninav {
left: 0;
top: 0;
right: 0;
/* adjust padding etc to make sizes nice for fingers */ }
#omninav #filter-reset,
#omninav #go-back,
#omninav #side-panel-toggle {
padding: 23px 12px 21px; }
#omninav #go-back {
position: absolute;
top: 38px; }
#project #omninav #go-back {
top: 0; }
#omninav .contents {
left: 38px;
position: absolute;
top: 38px; }
#home #omninav .contents, #practice #omninav .contents, #people #omninav .contents, #contact #omninav .contents, #services #omninav .contents {
left: 0; }
#practice #omninav .contents h1, #services #omninav .contents h1 {
display: none; }
#practice #omninav .contents #side-panel-toggle, #services #omninav .contents #side-panel-toggle {
display: none; }
#contact #omninav .contents h1 {
padding-left: 46px; }
#profiles #omninav .contents h1 {
width: 100%; }
#project #omninav .contents {
top: 0; }
#omninav .contents .nav-loader {
position: absolute;
top: 0px;
z-index: 1;
right: 38px;
left: -15px; }
#omninav .contents .nav-loader .wrapper {
-webkit-transition: 800ms;
transition: 800ms; }
#omninav .contents .nav-loader.nav-visible {
background: #000; }
#omninav .contents .nav-loader .block.loading {
padding: 10px 10px 8px;
border-right: 1px solid #888; }
#home #omninav .contents .nav-loader, #contact #omninav .contents .nav-loader, #project #omninav .contents .nav-loader, #profiles #omninav .contents .nav-loader {
top: 30px; }
#project #omninav .contents .nav-loader, #profiles #omninav .contents .nav-loader {
left: -52px; }
#omninav .contents .block,
#omninav .inline a {
padding: 9px 8px 10px; }
#omninav #filter-reset {
margin: 0;
position: absolute;
top: 38px;
right: 0; }
#omninav .filter {
position: absolute;
top: 38px;
width: 49.845%;
height: 37px;
margin-bottom: 1px; }
#omninav .filter:after {
top: 15px; }
#omninav .filter h3 {
padding: 9px 25px 10px 8px;
overflow: hidden;
text-overflow: ellipsis; }
#omninav .filter ul {
line-height: 2;
max-height: 182px;
overflow-y: auto;
-webkit-overflow-scrolling: touch; }
#omninav .filter#location-filter {
right: 0;
margin-right: 0; }
#omninav .filter.filtered#location-filter, #omninav .filter.mobile-adjust#location-filter {
right: 41px; }
#omninav .inline {
width: 100%; }
#omninav .inline .right {
position: static; }
#project #omninav .inline {
display: none; }
#omninav .toggle-contents {
clear: left; }
#omninav .contents {
right: 0; }
#omninav .contents h1 {
width: auto;
position: absolute;
left: 0;
right: 37px;
top:20px;}
#omninav #side-panel-toggle {
position: absolute;
right: 0;
margin-right: 0;
top:20px;}
.js #wrapper.revealed {
top:40px;
}
#side-panel section:first-child {
padding-top:0px !important;
}
}
#wrapper {
width: 100%;
height: 100%;
min-height: 100%;
position: relative;
z-index: 4; }
.logo-on-top #wrapper {
z-index: 2; }
.js #wrapper {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 1000ms;
transition: opacity 1000ms;
pointer-events: none; }
.js #wrapper.revealed {
opacity: 1;
visibility: visible;
pointer-events: auto; }
@media screen and (max-width: 768px) {
#practice #wrapper, #services #wrapper {
margin-top: 38px; }
#profiles #wrapper, #contact #wrapper {
margin-top: 76px; } }
#grid-wrapper {
width: 100%;
min-height: 100%;
/* height: 100%;*/
overflow-x: hidden;
-webkit-transition: opacity 1s;
transition: opacity 1s; }
.js #grid-wrapper {
visibility: hidden;
opacity: 0; }
.js #grid-wrapper.grid-ready {
visibility: visible;
opacity: 1; }
#grid-wrapper .grid-line {
background-color: black;
position: absolute;
z-index: 1; }
#grid-wrapper .grid-line.grid-line-vertical {
top: 0;
height: 100%;
width: 1px; }
#grid-wrapper .grid-line.grid-line-horizontal {
left: 0;
width: 100%;
height: 1px; }
@media screen and (max-width: 768px) {
#home #grid-wrapper {
margin-top: 76px; }
#people #grid-wrapper {
margin-top: 38px; } }
#grid {
width: 112%;
/* extra width to avoid rounding errors */
height: 100%;
min-height: 100%;
position: relative;
z-index: 2; }
#grid .grid-item {
display: block;
position: relative;
/* will become absolute when masonry is called */
float: left;
/* fallback for masonry */
width: 17.87%;
/* 5 cols */
padding-top: 17.87%;
overflow: hidden;
text-decoration: none;
-webkit-transform: translateZ(0);
/* REALLY IMPORTANT to fix hidden scrollbar webkit bug. See http://stackoverflow.com/a/14525109/940252 */
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased; }
.no-touch #grid .grid-item:hover .colour-image {
opacity: 1;
filter: alpha(opacity=100); }
.no-touch #grid .grid-item.group-hover .colour-image {
opacity: 1;
filter: alpha(opacity=100); }
.no-touch #grid .grid-item:hover .text, .touch #grid .grid-item .text {
display: block; }
#grid .grid-item.unload-resources .bw-image, #grid .grid-item.unload-resources .colour-image {
visibility: hidden;
opacity: 0; }
#grid article {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: opacity 0.75s;
transition: opacity 0.75s; }
.js #grid article {
opacity: 0; }
.js #grid article.loaded {
opacity: 1; }
#grid .bw-image {
background: no-repeat left top;
background-size: cover;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
-webkit-transition: opacity 0.75s;
transition: opacity 0.75s;
-webkit-transform: translate3d(0, 0, 0);
}
#grid .colour-image {
background: no-repeat left top;
background-size: cover;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
-webkit-transition: opacity 0.75s;
transition: opacity 0.75s;
z-index: 4;
-webkit-transform: translate3d(0, 0, 0);
}
#grid .image-preloader {
display: none; }
#grid .text {
position: absolute;
left: 10px;
bottom: 10px;
right: 10px;
z-index: 5; }
.js #grid .text {
display: none; }
#grid .text h1, #grid .text p {
background: #000;
color: #fff;
font-size: 1em;
margin: 0;
font-weight: 200;
padding: 4px 5px 3px;
margin-top: 1px; }
.touch #grid .text h1, .touch #grid .text p {
float: left;
clear: left; }
.touch #grid .text .no-touch-only {
display: none; }
#contact #side-panel h1 {
-webkit-font-smoothing: antialiased; }
@media screen and (max-width: 768px) {
#contact #side-panel {
padding-bottom: 76px; } }
#contact form input {
-webkit-font-smoothing: antialiased;
display: inline-block;
height: 30px;
width: 260px;
margin: 10px 0 0 -10px;
padding: 0 0 0 10px;
color: #fff;
background-color: #232323;
outline: none;
border: 0;
font-weight: normal; }
html.lt-ie9 #contact form input {
padding-top: 8px;
height: 25px; }
@media screen and (max-width: 400px) {
#contact form input {
margin-right: 5px; } }
#contact form input:invalid {
-moz-box-shadow: none;
box-shadow: none; }
#contact form button {
-webkit-font-smoothing: antialiased;
font-weight: normal;
opacity: 0;
cursor: default;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
transition: opacity 500ms;
display: inline-block;
margin: 0 0 0 10px;
background: none;
border: 0;
outline: 0;
color: #fff;
padding: 0;
border-bottom: 1px solid #fff; }
html.lt-ie9 #contact form button {
visibility: hidden; }
@media screen and (max-width: 400px) {
#contact form button {
margin: 10px 0 0 0; } }
#contact form.valid button {
opacity: 1;
cursor: pointer; }
html.lt-ie9 #contact form.valid button {
visibility: visible; }
#contact form .status-message {
margin: 18px 0; }
/**** Isotope Styles **********************************************/
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2; }
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
visibility: hidden; }
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s; }
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width; }
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity; }
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s; }
@media screen and (max-width: 1900px) {
header {
width: 95%;
margin-left: 2.4%; }
#grid .grid-item {
width: 22.35%;
padding-top: 15.35%; } }
@media screen and (max-width: 1024px) {
header {
width: 82.4%;
margin-left: 8.8%; }
#grid .grid-item {
width: 29.85%;
padding-top: 29.85%; } }
@media screen and (max-width: 600px) {
header {
width: 90.7%;
margin-left: 4.8%; }
#grid .grid-item {
width: 44.8%;
padding-top: 44.8%; } }
@media screen and (max-width: 320px) {
header {
width: 90%;
margin-left: 4.7%; }
#grid .grid-item {
width: 90%;
padding-top: 90%; } }
#side-panel {
position: absolute;
left: 0;
top: 0;
bottom: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 400px;
z-index: 6;
background: #000;
border-top: 80px solid #000;
color: #fff;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-transition: 1000ms;
transition: 1000ms; }
.js #side-panel {
left: -400px; }
.lt-ie9.js #side-panel {
display: none; }
.js #side-panel.open {
left: 0; }
.lt-ie9.js #side-panel.open {
display: block; }
#practice #side-panel {
padding-bottom: 15px; }
#side-panel section {
padding: 30px 30px 30px 54px;
max-width: 400px; }
#side-panel section:first-child {
padding-top: 0; }
#side-panel section.hover-block {
padding-top: 30px; }
#contact #side-panel section {
max-width: none; }
@media screen and (min-width: 681px) {
#side-panel section.hover-block {
cursor: pointer;
-webkit-transition: background-color 200ms;
transition: background-color 200ms; }
#side-panel section.hover-block h1 {
margin-bottom: 0; }
#side-panel section.hover-block:hover, #side-panel section.hover-block.active {
background: #222; }
#side-panel section.hover-block.dimmed:hover, #side-panel section.hover-block.dimmed.active {
background: #efefef; } }
#side-panel section.dimmed {
background: #f2f2f2;
color: #000;
border-bottom: 1px solid #6d6d6d; }
#side-panel section.dimmed a {
color: #000; }
#side-panel section p:last-child {
margin-bottom: 0; }
#side-panel a {
color: #fff; }
#side-panel a:hover {
text-decoration: none; }
#side-panel h1, #side-panel h2 {
margin: 0;
font-size: 1em;
font-weight: 700;
font-family: "Open Sans", helvetica, arial, sans-serif; }
#practice #side-panel h1, #practice #side-panel h2 {
margin-bottom: 1.2em; }
#side-panel p {
margin: 0 0 1.2em; }
#side-panel p.design-credit {
margin: 0 0 2.4em; }
#side-panel blockquote {
margin: 0 0 1.2em;
font-style: italic;
text-indent: -0.2em; }
#side-panel .quote-citation {
font-style: italic;
margin: 0; }
#side-panel ul {
list-style: none;
margin: 0 0 1.2em;
padding: 0; }
#side-panel ul.bullets {
margin: 0 0 1.2em -0.35em; }
#side-panel ul.bullets li {
text-indent: -0.35em;
margin: 0 0 0 0.35em; }
#side-panel ul.bullets li:before {
content: '-';
display: inline-block;
width: 0.35em; }
#side-panel .project-stats {
overflow: hidden; }
#side-panel .project-stats dl {
float: left;
width: 50%;
min-width: 120px; }
#side-panel .project-stats dt, #side-panel .project-stats dd {
padding: 0 25px 0 0;
margin: 0; }
#side-panel .project-stats dt {
font-weight: 700;
font-family: "Open Sans", helvetica, arial, sans-serif;
margin-top: 13px; }
#side-panel::-webkit-scrollbar-track {
background-color: transparent; }
#side-panel::-webkit-scrollbar {
width: 1px;
background-color: transparent; }
#side-panel::-webkit-scrollbar-thumb {
background-color: #fff; }
#services #side-panel {
width: 25%; }
#services #side-panel h1 {
margin-bottom: 1.2em; }
@media screen and (max-width: 1000px) {
#services #side-panel {
width: 50%; } }
@media screen and (max-width: 768px) {
#side-panel {
width: 100%; }
#practice #side-panel, #services #side-panel, #profiles #side-panel {
border-top-width: 30px; }
#contact #side-panel {
border-top-width: 0; }
.js #side-panel {
left: -100%; }
#side-panel section {
padding: 20px 30px 20px 46px; }
#side-panel:after {
content: "side-panel-full-screen";
display: none; }
#side-panel.stack-on-mobile {
position: static; }
#services #side-panel {
width: 100%; }
.profile {
overflow-y: scroll; }
.profile #side-panel {
position: relative; }
.profile #wrapper {
height: auto; }
.profile .swiper-container {
height: 900px; }
.profile .swiper-arrow {
top: auto;
bottom: 432px; } }
@media screen and (max-width: 768px) and (max-width: 600px) {
.profile .swiper-container {
height: 650px; }
.profile .swiper-arrow {
bottom: 307px; } }
@media screen and (max-width: 768px) and (max-width: 500px) {
.profile .swiper-container {
height: 600px; }
.profile .swiper-arrow {
bottom: 282px; } }
@media screen and (max-width: 768px) and (max-width: 400px) {
.profile .swiper-container {
height: 500px; }
.profile .swiper-arrow {
bottom: 232px; } }
.extra-panel {
position: absolute;
left: 0;
top: 0;
bottom: 0;
overflow: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 80px 0 50px;
background: #000;
color: #fff;
-webkit-transition: opacity 1000ms;
transition: opacity 1000ms; }
.js .extra-panel {
opacity: 0; }
.lt-ie9.js .extra-panel {
display: none; }
.js .extra-panel.open {
opacity: 1; }
.lt-ie9.js .extra-panel.open {
display: block; }
.extra-panel section {
padding: 0 30px 30px 54px; }
@media screen and (max-width: 768px) {
.extra-panel section p {
max-width: 400px; } }
.extra-panel h1 {
margin: 0 0 1.2em;
font-size: 1em;
font-weight: normal;
font-family: "Open Sans", helvetica, arial, sans-serif; }
.extra-panel p {
margin: 0 0 1.2em; }
.extra-panel p:last-child {
margin-bottom: 0; }
.extra-panel a {
color: #000;
text-decoration: underline;
cursor: auto; }
.extra-panel ul {
list-style: none;
margin: 0 0 1.2em;
padding: 0; }
.extra-panel ul:last-child {
margin-bottom: 0; }
@media screen and (max-width: 768px) {
.extra-panel.stack-on-mobile {
position: static;
width: auto !important;
height: auto !important;
padding: 30px 0;
margin-left: 0 !important;
-webkit-transform: none !important;
transform: none !important;
-webkit-transition: opacity 1000ms !important;
transition: opacity 1000ms !important; }
.extra-panel.stack-on-mobile section {
padding-left: 46px; } }
.extra-panel::-webkit-scrollbar-track {
background-color: transparent; }
.extra-panel::-webkit-scrollbar {
width: 3px;
background-color: transparent; }
.extra-panel::-webkit-scrollbar-thumb {
background-color: #333; }
#second-panel {
width: 25%;
left: 401px;
z-index: 5;
background: #bcbcbc;
color: #000; }
@media screen and (max-width: 1000px) {
#second-panel {
bottom: 0;
right: 0;
width: auto; } }
#services #second-panel {
background: #e8e8e8;
left: 25%; }
@media screen and (max-width: 1000px) {
#services #second-panel {
bottom: auto;
left: 50%;
right: 0;
width: auto;
height: 140px; } }
#third-panel {
width: 25%;
left: 25%;
margin-left: 25%;
z-index: 4;
background: #bcbcbc;
color: #000; }
@media screen and (max-width: 1000px) {
#third-panel {
left: 50%;
margin-left: 0;
top: 271px;
width: auto;
right: 0;
padding-top: 25px; } }
/*=======================================================
Social Media Icon Styles
========================================================*/
#project .pinterest img {
visibility: hidden; }
.social-list {
padding: 0;
margin-top: 10px !important;
list-style: none;
overflow: hidden; }
.social-list.extra-spacing {
margin-top: 30px !important; }
.social-list li {
float: left; }
.social-list .icon {
background-image: url(../img/social-sprite.png);
background-repeat: no-repeat;
background-size: 54px auto;
opacity: 1;
width: 27px;
height: 27px;
vertical-align: -0.3em;
display: inline-block;
overflow: hidden;
text-indent: -9999px; }
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
.social-list .icon {
background-image: url("../img/social-sprite@2x.png");
background-size: 54px auto; } }
.no-touch .social-list .icon:hover {
opacity: 0.9; }
@media screen and (max-width: 768px) {
.social-list .icon {
vertical-align: -0.6em; } }
.social-list .icon.pinterest {
background-position: 0px 0px;
margin-left: -6px;
margin-right: 0.15em; }
.social-list .icon.twitter {
background-position: 0px -27px;
margin-left: -4px;
margin-right: 0.2em; }
.social-list .icon.facebook {
background-position: 0px -54px;
margin-left: -4px;
margin-right: 0.2em; }
.social-list a {
border-bottom: none;
border-right: 8px solid black;
display: block; }
.no-touch .social-list a:hover .icon, .no-touch .social-list a.icon:hover {
opacity: 0.4; }
/*
* Swiper - Mobile Touch Slider CSS
* http://www.idangero.us/sliders/swiper
*
* Vladimir Kharlampidi, The iDangero.us
* http://www.idangero.us/
*
* Copyright 2012-2013, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us
*
* Licensed under GPL & MIT
*
*/
/* ===============================================================
Basic Swiper Styles
================================================================*/
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
/* Fix of Webkit flickering */
z-index: 1; }
.swiper-wrapper {
position: relative;
width: 100%;
-webkit-transition-property: -webkit-transform, left, top;
-webkit-transition-duration: 0s;
-webkit-transform: translate3d(0px, 0, 0);
-webkit-transition-timing-function: ease;
-moz-transition-property: -moz-transform, left, top;
-moz-transition-duration: 0s;
-moz-transform: translate3d(0px, 0, 0);
-moz-transition-timing-function: ease;
-o-transition-property: -o-transform, left, top;
-o-transition-duration: 0s;
-o-transform: translate3d(0px, 0, 0);
-o-transition-timing-function: ease;
-o-transform: translate(0px, 0px);
-ms-transition-property: -ms-transform, left, top;
-ms-transition-duration: 0s;
-ms-transform: translate3d(0px, 0, 0);
-ms-transition-timing-function: ease;
transition-property: transform, left, top;
transition-duration: 0s;
transform: translate3d(0px, 0, 0);
transition-timing-function: ease; }
.swiper-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto; }
.swiper-slide {
float: left; }
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y; }
.swiper-wp8-vertical {
-ms-touch-action: pan-x; }
/* ===============================================================
Your custom styles, here you need to specify container's and slide's
sizes, pagination, etc.
================================================================*/
.swiper-container {
background: #404040;
width: 100%;
height: 100%;
z-index: 4;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.swiper-wrapper {
-webkit-transform: translate3d(0, 0px, 0px); }
.swiper-slide {
/* Specify Slides's Size: */
height: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
opacity: 0;
cursor: pointer;
visibility: hidden; }
.swiper-slide-visible {
visibility: visible;
opacity: 0.25; }
.swiper-container.single-slide .swiper-slide {
cursor: default; }
#wrapper.revealed .swiper-slide {
-webkit-transition: all 750ms;
transition: all 750ms; }
.swiper-slide .image {
height: 100%;
margin: 0 auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.lt-ie8 .swiper-slide .image {
margin: 0; }
.swiper-slide-active {
/* Specific active slide styling: */
opacity: 1; }
.swiper-can-desaturate.desaturated .swiper-slide-active {
-webkit-filter: saturate(30%);
-moz-filter: saturate(30%);
filter: saturate(30%);
opacity: 0.6; }
/* ===============================================================
Pagination Styles
================================================================*/
.swiper-pagination-switch {
/* Stylize pagination button: */ }
.swiper-active-switch {
/* Specific active button style: */ }
.swiper-visible-switch {
/* Specific visible button style: */ }
.swiper-arrow {
background: #000;
position: absolute;
z-index: 5;
top: 50%;
cursor: pointer;
line-height: 0;
padding: 5px 7px; }
.swiper-arrow .icon {
background: url(../img/icon-sprite.png) no-repeat 0 center;
width: 13px;
height: 17px;
display: inline-block; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
.swiper-arrow .icon {
background-image: url(../img/icon-sprite@2x.png);
background-size: auto 17px; } }
.swiper-arrow.arrow-right {
right: 20px; }
.swiper-arrow.arrow-right .icon {
background-position: -52px center; }
.swiper-arrow.arrow-left {
left: 20px; }
.swiper-arrow.arrow-left .icon {
background-position: -39px center; }
@media screen and (max-width: 768px) {
.swiper-arrow {
padding: 10px 12px; }
.swiper-arrow.arrow-right {
right: 0; }
.swiper-arrow.arrow-left {
left: 0; } }
.image-preloader {
width: 0;
height: 0;
overflow: hidden; }
noscript.slideshow-fallback img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
z-index: 4; }
#map-wrapper {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0; }
#map-wrapper #map {
height: 100%; }
#side-panel .credit {
color: #aaa; }
#side-panel .credit a {
color: #aaa; }
.utility-message {
color: #000;
background: #bcbcbc;
position: absolute;
left: 20px;
top: 47px;
right: 20px;
padding: 18px 34px; }
@media screen and (max-width: 768px) {
.utility-message {
left: 0;
right: 0;
top: 38px;
padding: 10px; } }
.utility-message img {
width: 200px;
height: auto;
margin-bottom: 30px; }
.utility-message h1 {
font-size: 1em;
font-weight: normal;
font-family: "Open Sans", helvetica, arial, sans-serif; }
.utility-message h1, .utility-message p {
margin: 0 0 0.5em; }
.utility-message h1:last-child, .utility-message p:last-child {
margin-bottom: 0; }
.utility-message a {
color: #000; }
div.grayscale {
background: no-repeat center;
background-size: cover;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
}
div.grayscale:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,#grayscale");
}
#grid .grid-item { width: 17.87%; padding-top: 12.63%; }
@media screen and (max-width: 1900px) { #grid .grid-item { width: 22.35%; padding-top: 15.80%; } }
@media screen and (max-width: 1024px) { #grid .grid-item { width: 29.85%; padding-top: 21.10%; } }
@media screen and (max-width: 600px) { #grid .grid-item { width: 44.8%; padding-top: 31.67%; } }
@media screen and (max-width: 320px) { #grid .grid-item { width: 90%; padding-top: 63.63%; } }