@charset "UTF-8"; /*------------------------------------*\ #FRAMEWORK \*------------------------------------*/ /** * Abstracts. */ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ /** * Base. */ /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. * 2. Add the correct display in IE. */ article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; } /** * Add the correct display in IE 9-. */ audio, canvas, progress, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Add the correct display in IE 10-. * 1. Add the correct display in IE. */ template, [hidden] { display: none; } /* Links ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /* Forms ========================================================================== */ /** * 1. Change font properties to `inherit` in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ } /** * Restore the font weight unset by the previous rule. */ optgroup { font-weight: bold; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /*------------------------------------*\ #BOX-SIZING \*------------------------------------*/ /** * More sensible default box-sizing: * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /*------------------------------------*\ #RESET \*------------------------------------*/ /** * A very simple reset that sits on top of Normalize.css. */ body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, form, fieldset, legend, figure, table, th, td, caption, hr { margin: 0; padding: 0; } /** * Minor form resets */ input, label, select, button, textarea { margin: 0; border: 0; border-radius: 0; padding: 0; display: inline-block; vertical-align: middle; white-space: normal; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } button { background: transparent; cursor: pointer; outline: none; color: inherit; } button span { position: relative; } textarea { resize: vertical; } /*------------------------------------*\ #Links \*------------------------------------*/ a { color: inherit; text-decoration: none; cursor: pointer; transition: color 0.25s ease, opacity 0.25s ease, border 0.25s ease; } a:hover, a:focus, a:active { outline: none; } a, button, input, select, textarea, label, summary { -ms-touch-action: manipulation; touch-action: manipulation; } /*------------------------------------*\ #LISTS \*------------------------------------*/ /** * Remove trailing margins from nested lists. */ ul { list-style: inside; } li > ul, li > ol { margin-bottom: 0; } /*------------------------------------*\ #MEDIA \*------------------------------------*/ img { max-width: 100%; font-style: italic; vertical-align: middle; height: auto; } img[src*=".svg"] { width: 100% \9; } a img { border: none; } _::-ms-reveal, img[src*=".svg"] { width: 100%; } audio, canvas, iframe, video, svg { vertical-align: middle; } iframe, object { width: 100%; margin: 0; padding: 0; border: 0; outline: none; background-color: transparent; } /** * SVG reset. */ svg { display: inline-block; fill: inherit; width: inherit; height: inherit; } /*------------------------------------*\ #QUOTES \*------------------------------------*/ /** * Basic styling for quoted text. */ q { font-style: italic; quotes: "‘" "’"; } q:before { content: open-quote; } q:after { content: close-quote; } blockquote { quotes: "“" "”"; } blockquote p { text-indent: -0.375em; } blockquote p:before { content: open-quote; } blockquote p:after { content: no-close-quote; } blockquote p:last-of-type:after { content: close-quote; } /*------------------------------------*\ #FONTS \*------------------------------------*/ @font-face { font-family: "Aktiv Grotesk"; src: url("/fonts/Aktiv-Grotesk-Regular.woff") format("woff"); font-style: normal; font-weight: normal; } @font-face { font-family: "Aktiv Grotesk"; src: url("/fonts/Aktiv-Grotesk-Bold.woff") format("woff"); font-style: normal; font-weight: bold; } @font-face { font-family: "Aktiv Grotesk"; src: url("/fonts/Aktiv-Grotesk-Light.woff") format("woff"); font-style: normal; font-weight: 300; } /*------------------------------------*\ #Shared conisitent spacing \*------------------------------------*/ h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, p, address, hr, table, fieldset, pre { margin-bottom: 1.25rem; } /*------------------------------------*\ #PAGE \*------------------------------------*/ /** * Page-level styling (e.g. HTML and BODY elements). */ html { overflow-y: scroll; overflow-x: hidden; min-height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; text-rendering: optimizeLegibility; font-size: 1em; line-height: 1.5; background: #eee; color: #555; } body { font-family: "Aktiv Grotesk", "Helvetica Neue", Helvetica, sans-serif; font-weight: normal; } ::-moz-selection { background: #eee; color: #fff; text-shadow: none; } ::selection { background: #eee; color: #fff; text-shadow: none; } /*------------------------------------*\ #TYPE \*------------------------------------*/ h1, .t-h1, h2, .t-h2, h3, .t-h3, h4, .t-h4, h5, .t-h5, h6 { font-weight: normal; } h1, .t-h1 { font-size: 3.125rem; line-height: 1; letter-spacing: 0.05em; } h2, .t-h2 { font-size: 1.5625rem; line-height: 1.12; } h3, .t-h3 { font-size: 1rem; line-height: 1.3; } h4, .t-h4 { font-weight: bold; margin-bottom: 0; } p, .t-para, address, .Related, .o-prose { font-size: 1.0625rem; line-height: 1.4; letter-spacing: .02em; font-weight: 300; -moz-osx-font-smoothing: initial; -webkit-font-smoothing: initial; } .t-small { font-size: 0.8125rem; line-height: 1.25; } hr { border: 0; border-bottom: 1px solid #242424; } address { font-style: normal; } strong, b { font-weight: bold; } sub, sup { font-size: 50%; } sup { top: -.7em; } sub { bottom: 0; } /** * Objects. */ /*------------------------------------*\ #Pages \*------------------------------------*/ /** * Wrappers. */ .o-wrapper { max-width: 100em; margin-left: auto; margin-right: auto; padding-right: 1.25rem; padding-left: 1.25rem; } @media screen and (min-width: 48.0625em) { .o-wrapper { padding-right: 1.875rem; padding-left: 1.875rem; } } .o-wrapper--nopad { padding-right: 0; padding-left: 0; } .o-wrapper.is-hidden { opacity: 0; pointer-events: none; transition: opacity 0.3s; } .o-wrapper.is-active { transition: opacity 0.3s; } .o-wrapper.studio { position: absolute; width: 100%; height: 100%; top: 0; padding-bottom: 1.875rem; } .o-wrapper.studio.is-active { position: static; } /** * Grid. */ .o-grid { margin: 0 0 0 -1.875rem; padding: 0; list-style: none; font-size: 0; letter-spacing: 0; } .o-grid__item { display: inline-block; vertical-align: top; width: 100%; padding-left: 1.875rem; font-size: medium; font-size: 1rem; } .o-grid__item img { width: 100%; } .o-grid--full { margin-left: 0; overflow: hidden; } .o-grid--full > .o-grid__item { padding-left: 0; } .o-grid--right { text-align: right; } .o-grid--right > .o-grid__item { text-align: left; } @media screen and (max-width: 48em) { .o-grid--panels { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; } .o-grid--panels > .o-grid__item { -ms-flex: 1 1 50%; flex: 1 1 50%; max-width: 50%; } } @media screen and (max-width: 37.4375em) { .o-grid--panels > .o-grid__item { -ms-flex: 1 1 100%; flex: 1 1 100%; max-width: 100%; } } .o-grid--stack { background-color: #222; } @media screen and (min-width: 48.0625em) { .o-grid--stack > .o-grid__item:nth-child(n+7) { display: none; } } @media screen and (min-width: 75em) { .o-grid--stack > .o-grid__item:nth-child(n+7) { display: inline-block; } } .u-1\/2 { width: 50%; } @media screen and (min-width: 37.5em) { .u-1\/2\@x-small { width: 50%; } } @media screen and (min-width: 48.0625em) { .u-1\/2\@small { width: 50%; } .u-1\/3\@small { width: 33.33333%; } .u-2\/3\@small { width: 66.66667%; } .u-1\/4\@small { width: 25%; } } @media screen and (min-width: 62em) { .u-1\/3\@medium { width: 33.33333%; } .u-2\/3\@medium { width: 66.66667%; } .u-1\/4\@medium { width: 25%; } .u-1\/6\@medium { width: 16.66667%; } } @media screen and (min-width: 75em) { .u-1\/2\@large { width: 50%; } .u-1\/4\@large { width: 25%; } } /*------------------------------------*\ #MEDIA \*------------------------------------*/ /** * Media classes */ .o-media { position: relative; height: 0; height: auto; max-width: 100%; overflow: hidden; background-color: #f1f1f1; } .o-media img { position: absolute; top: 0; left: 0; width: 100%; } .o-media iframe, .o-media object, .o-media embed, .o-media video, .o-media .smartmap-mapcanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .o-media--map { height: 70vh; } @media screen and (min-width: 48.0625em) { .o-media--map { height: 70vh; } } .o-media--video { padding-bottom: 56.25%; } .o-media--landscape { padding-bottom: 62.85714%; } .o-media--square { padding-bottom: 100%; } .o-media--letterbox { padding-bottom: 48.50394%; } /*------------------------------------*\ #LISTS \*------------------------------------*/ /** * Lists default. */ .o-list { margin: 0; list-style: none; } .o-list--inline > li { display: inline-block; } /*------------------------------------*\ #Blocks \*------------------------------------*/ /** * Blocks of text and images. */ .o-block { padding-top: 1.25rem; } @media screen and (min-width: 48.0625em) { .o-block { padding-top: 1.875rem; } } @media screen and (min-width: 48.0625em) { .o-block:first-child { padding-top: 1.875rem; } } .o-block:last-child { padding-bottom: 1.25rem; } @media screen and (min-width: 48.0625em) { .o-block:last-child { padding-bottom: 1.875rem; } } .o-block p:last-child { margin-bottom: 0; } .o-block--cols p { max-width: 95%; } @media screen and (max-width: 48em) { .o-block--cols + .o-block--cols { padding-top: 0; } .o-block--cols .o-grid__item { margin-bottom: 1.25rem; } } /*------------------------------------*\ #Prose \*------------------------------------*/ /** * Pages. */ /*------------------------------------*\ #Pages \*------------------------------------*/ /** * Themes. */ /*------------------------------------*\ #Themes \*------------------------------------*/ .sg { margin-top: 1.875rem; } .sg .c-title { border-bottom: 1px solid #242424; line-height: 2.5rem; margin-top: 1.875rem; margin-bottom: 1.875rem; } .sg .c-swatch-wrapper { display: inline-block; text-align: center; margin-bottom: 1.25rem; margin-right: 1.25rem; } .sg .c-swatch-wrapper em { display: inline-block; margin-bottom: 0.625rem; } .sg .c-swatch { width: 5rem; height: 5rem; border-radius: 50%; } .sg .c-swatch--border { border: 1px dashed #242424; } .u-1\/12 { width: 8.33333%; } .u-1\/6 { width: 16.66667%; } .guide { position: fixed; top: 0; left: 0; transform: translate3d(0, 0, 0); width: 100%; z-index: 1000; opacity: 0; visibility: visible; pointer-events: none; transition: 0.25s ease; } @media screen and (max-width: 48em) { .guide { display: none; } } .guide__units { height: 100vh; background-color: pink; } .guide-toggle { position: fixed; bottom: 1.25rem; right: 1.25rem; outline: none; width: 3.125rem; height: 3.125rem; z-index: 100; border-radius: 50%; transform: translate3d(0, 0, 0); background-color: #fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); cursor: pointer; opacity: 1; transition: 0.25s ease; } @media screen and (max-width: 48em) { .guide-toggle { display: none; } } .guide-toggle:hover { box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); } .guide-toggle:active, .guide-toggle:checked { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .guide-toggle:checked + .guide { opacity: .3; visibility: visible; } /** * Vendors. */ /** * Swiper 3.3.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * * http://www.idangero.us/swiper/ * * Copyright 2016, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ * * Licensed under MIT * * Released on: February 7, 2016 */ .swiper-container { margin: 0 auto; position: relative; overflow: hidden; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-no-flexbox .swiper-slide { float: left; } .swiper-container-vertical > .swiper-wrapper { -ms-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -ms-flexbox; display: flex; transition-property: transform; box-sizing: content-box; cursor: grab; } .swiper-wrapper:active { cursor: grabbing; } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -ms-flex-align: start; align-items: flex-start; transition-property: transform, height; } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } /* IE10 Windows Phone 8 Fixes */ .swiper-wp8-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; touch-action: pan-x; } /* Arrows */ .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } /* Pagination Styles */ .swiper-pagination { position: absolute; text-align: center; transition: 300ms; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-white .swiper-pagination-bullet { background: #fff; } .swiper-pagination-bullet-active { opacity: 1; background: #007aff; } .swiper-pagination-white .swiper-pagination-bullet-active { background: #fff; } .swiper-pagination-black .swiper-pagination-bullet-active { background: #000; } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 5px 0; display: block; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; } /* Progress */ .swiper-pagination-progress { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progress .swiper-pagination-progressbar { background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progress { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progress { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-progress.swiper-pagination-white { background: rgba(255, 255, 255, 0.5); } .swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar { background: #fff; } .swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar { background: #000; } /* Coverflow */ .swiper-container-coverflow .swiper-wrapper, .swiper-container-flip .swiper-wrapper { /* Windows 8 IE 10 fix */ -ms-perspective: 1200px; } /* Cube + Flip */ .swiper-container-cube, .swiper-container-flip { overflow: visible; } .swiper-container-cube .swiper-slide, .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-cube .swiper-slide .swiper-slide, .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube .swiper-slide-active, .swiper-container-flip .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Cube */ .swiper-container-cube .swiper-slide { visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube.swiper-container-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; filter: blur(50px); z-index: 0; } /* Fade */ .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } /* Preloader */ .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; animation: swiper-preloader-spin 1s steps(12, end) infinite; } .swiper-lazy-preloader:after { display: block; content: ""; width: 100%; height: 100%; background-position: 50%; background-size: 100%; background-repeat: no-repeat; } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /** * Trumps. */ /** * Spits out override classes for every colour. */ .lazyload, .lazyloading { opacity: 0; transition: 1s; } .lazyloaded { opacity: 1; transition: 1s; } .l-black { background-color: #000 !important; } .t-black { color: #000 !important; } .l-white { background-color: #fff !important; } .t-white { color: #fff !important; } .l-grey-primary { background-color: #242424 !important; } .t-grey-primary { color: #242424 !important; } .l-grey-secondary { background-color: #555 !important; } .t-grey-secondary { color: #555 !important; } .l-grey-tertiary { background-color: #eee !important; } .t-grey-tertiary { color: #eee !important; } .l-grey-quaternary { background-color: #f1f1f1 !important; } .t-grey-quaternary { color: #f1f1f1 !important; } .l-red { background-color: #ff5441 !important; } .t-red { color: #ff5441 !important; } .l-blue { background-color: #68d0f0 !important; } .t-blue { color: #68d0f0 !important; } .l-green { background-color: #00aa8f !important; } .t-green { color: #00aa8f !important; } /** * Show & hide. */ .h-all { display: none !important; } @media screen and (min-width: 48.0625em) { .h-up\@small { display: none !important; } } @media screen and (max-width: 48em) { .h-down\@small { display: none !important; } } @media screen and (min-width: 62em) { .h-up\@medium { display: none !important; } } @media screen and (max-width: 61.9375em) { .h-down\@medium { display: none !important; } } @media screen and (min-width: 75em) { .h-up\@large { display: none !important; } } @media screen and (max-width: 74.9375em) { .h-down\@large { display: none !important; } } /** * Accessibility. */ .breadcrumbs { position: absolute; width: 0; height: 0; max-width: 0; max-height: 0; overflow: hidden; } .t-hide { text-indent: 100%; white-space: nowrap; overflow: hidden; } .t-center { text-align: center; } .u-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .u-accessibility { border: 0 !important; clip: rect(0 0 0 0) !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; } .u-cf { *zoom: 1; } .u-cf:before, .u-cf:after { content: ''; display: table; } .u-cf:after { clear: both; } /*------------------------------------*\ #Footer \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ .Footer { position: relative; z-index: 1; padding-top: 0; } @media screen and (min-width: 37.5em) { .is-fs .Footer { transform: translateY(100%); } } .Footer p, .Footer address, .Footer li { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .Footer__item { padding: 1.25rem 0; margin: 0 1.25rem; } @media screen and (min-width: 48.0625em) { .Footer__item { margin: 0; padding: 1.875rem; } } @media screen and (max-width: 37.4375em) { .Footer__item { border-bottom: 1px solid currentColor; } } .Footer__meta { position: relative; padding-bottom: 1.875rem; } @media screen and (max-width: 37.4375em) { .Footer__meta { padding-top: 1.875rem; } } .Footer__small { display: inline; } .Footer__small:last-of-type { display: block; margin-bottom: 1.875rem; } @media screen and (min-width: 37.5em) { .Footer__small:last-of-type { display: inline-block; border-left: 1px solid currentColor; padding-left: 0.625rem; margin-left: 0.4375rem; margin-bottom: 0; } } @media screen and (min-width: 37.5em) { .Footer__social { float: right; } } .Footer__social li { margin-left: 0.25em; } .Footer__social a { opacity: 1; } .Footer__social a:hover { opacity: 0.7; } /*------------------------------------*\ #Filter \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ .Filter { width: 100%; height: 0; background-color: #fff; transition: height 0.25s cubic-bezier(0.77, 0, 0.175, 1), transform 0.25s cubic-bezier(0.77, 0, 0.175, 1); overflow: hidden; } @media screen and (min-width: 48.0625em) { .Filter { position: fixed; top: 0; left: 0; right: 0; z-index: 10; max-width: 100em; height: auto !important; margin: 0 auto; overflow-y: auto; transform: translate3d(0, -100%, 0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } } @media screen and (min-width: 48.0625em) { .Filter.is-open { transform: translate3d(0, 0, 0); } } @media screen and (min-width: 48.0625em) { .Filter__wrapper { padding-top: 5.5rem; padding-bottom: 1.875rem; } } .Filter__list { position: relative; font-size: 1.5625rem; line-height: 1.78; color: #555; } @media screen and (min-width: 48.0625em) { .Filter__list { font-size: 1rem; line-height: 1.35; } } @media screen and (max-width: 48em) { .Filter__list:not(:last-child) .o-list { border-bottom: 1px solid #242424; } .Filter__list:first-child { padding-top: 0.625rem; } .Filter__list:last-child .o-list { padding-bottom: 1.25rem; } } .Filter__item { display: block; border-bottom: 1px solid #242424; } .Filter__item:hover, .Filter__item.is-active { color: #242424; font-weight: bold; } @media screen and (max-width: 48em) { .Filter__item:last-child { border-bottom: 0; } } .Filter a { display: block; } @media screen and (min-width: 48.0625em) { .Filter a { padding: 0.625rem 0 0.5rem; } } .Filter__search { display: inline-block; font-size: 1.5625rem; line-height: 1.76; } .Filter__close { float: right; } /*------------------------------------*\ #Burger \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ /*------------------------------------*\ #Hamburger \*------------------------------------*/ /** * Hambuger Buttons. */ @media screen and (max-width: 48em) { .Burger { position: relative; margin-top: 0.375rem; margin-bottom: 0.375rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .Burger, .Burger:before, .Burger:after { display: block; width: 1.5rem; height: 0.0625rem; transform: translate3d(0, 0, 0) rotate(0deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: currentColor; transition: transform 0.25s cubic-bezier(0.77, 0, 0.175, 1), background-color 0.25s cubic-bezier(0.77, 0, 0.175, 1); } .Burger:before, .Burger:after { content: ""; position: absolute; top: 0; } .Burger:before { transform: translate3d(0, -0.375rem, 0) rotate(0deg); } .Burger:after { transform: translate3d(0, 0.375rem, 0) rotate(0deg); } .Header__switch--navigation.is-cross .Burger { background-color: transparent; transform: translate3d(0, 0, 0) rotate(0deg); } .Header__switch--navigation.is-cross .Burger:before { transform: translate3d(0, 0, 0) rotate(-135deg); } .Header__switch--navigation.is-cross .Burger:after { transform: translate3d(0, 0, 0) rotate(135deg); } } /*------------------------------------*\ #HEADER \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ .Header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; width: 100%; max-width: 100em; margin: 0 auto; height: 4.0625rem; transition: color 0.25s ease, background-color 0.25s ease; background-color: #fff; } @media screen and (min-width: 48.0625em) { .Header { height: 4.875rem; } .Header__close { display: none; position: fixed; top: 0; left: 0; z-index: 10; height: 100%; width: 100%; } .has-nav .Header__close, .has-filter .Header__close { display: block; } } .Header__controls { position: absolute; top: 0; left: 0; right: 0; z-index: 10; width: 100%; height: 4.0625rem; background-color: #fff; font-size: 1.625rem; line-height: 1; } @media screen and (min-width: 48.0625em) { .Header__controls { height: 4.875rem; background-color: transparent; } } .Header__switch { float: right; padding: 1.625rem 0.625rem; } .Header__switch--navigation { margin-right: -1.875rem; padding-right: 1.875rem; } @media screen and (max-width: 48em) { .Header__switch--navigation { display: block; margin-right: -1.25rem; padding: 1.5625rem 1.25rem; overflow: hidden; } } .Header__switch--filter:after { content: ''; display: inline-block; position: relative; top: 0; margin-left: 0.4375rem; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 0.375rem 0.25rem 0.25rem 0.25rem; border-top-color: #b3b3b3; transform: rotate(0deg) translateZ(0); transform-origin: 50% 25%; transition: transform 0.25s ease; } .has-filter .Header__switch--filter:after { transform: rotate(90deg) translateZ(0); } @media screen and (min-width: 48.0625em) { .page-home .Header, .page-home .Logo, .page-home .Header__switch { color: #fff; background-color: transparent; } .page-home.has-nav .Header, .page-home.has-scrolled .Header, .page-home.has-filter .Header { color: #555; } .page-home.has-nav .Logo, .page-home.has-scrolled .Logo, .page-home.has-filter .Logo { color: #555; } .page-home.has-scrolled .Header, .page-home.has-filter .Header { background-color: #fff; } .page-home.has-scrolled .Header:before, .page-home.has-filter .Header:before { transform: translate3d(0, -100%, 0); } .page-home.has-scrolled .Header__switch, .page-home.has-filter .Header__switch { color: #555; } } /*------------------------------------*\ #Intro \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ .Intro { position: relative; } .Intro__headings { max-width: 25em; } .Intro__headings--extended { max-width: 90%; } .Intro__title, .Intro__subtitle { font-size: 1.5625rem; line-height: 1.12; font-weight: 300; letter-spacing: 0; } @media screen and (min-width: 48.0625em) { .Intro__title, .Intro__subtitle { font-size: 3.125rem; line-height: 1; } } .Intro__title { margin-bottom: 0; } .Intro__subtitle + p { margin-top: -1.25rem; } @media screen and (min-width: 48.0625em) { .Intro__subtitle + p { margin-top: -0.625rem; } } .Intro__copy { max-width: 37.5em; margin-bottom: 0; } .Intro__date { font-weight: 300; margin-bottom: 0; } @media screen and (min-width: 48.0625em) { .Intro__download { position: absolute; top: -1.0625rem; right: -1.25rem; padding: 1.25rem; opacity: 1; transition: opacity 0.25s ease; } .Intro__download:hover { opacity: .7; } } .Intro--people .Intro__headings, .Intro--news .Intro__headings { max-width: 37.5rem; } .Intro--people .Intro__title, .Intro--news .Intro__title { font-weight: normal; } @media screen and (min-width: 48.0625em) { .Intro--people .Intro__title, .Intro--news .Intro__title { font-weight: 300; margin-bottom: 0.625rem; } } .Intro--people .Intro__subtitle, .Intro--news .Intro__subtitle { font-size: 1.5625rem; line-height: 1.12; } .Intro--news .Intro__subtitle { font-weight: 400; } @media screen and (min-width: 48.0625em) { .Intro--project .Intro__subtitle, .Intro--project .Intro__title { font-weight: 300; } } /*------------------------------------*\ #Hero \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ /** * Hero. */ html, body { height: 100%; } .Hero { margin-top: 4.0625rem; } @media screen and (min-width: 48.0625em) { .Hero { position: relative; width: 100%; height: 100%; margin-top: 0; } } .Hero__strap { padding: 1.25rem; color: #242424; animation-name: colorchange; animation-duration: 50s; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: both; } .Hero__strap a { text-shadow: none; } @media screen and (min-width: 48.0625em) { .Hero__gallery { height: 100%; } } .Hero__slide { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; background-repeat: no-repeat; background-size: cover; background-position: center; } .Hero__title { font-size: 3.125rem; line-height: 1; font-weight: 300; text-align: center; width: 100%; } .Hero__title--shadow1 { text-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.4); } .Hero__title--shadow2 { text-shadow: 0 0 1.875rem rgba(0, 0, 0, 0.6); } .Hero__title--shadow3 { text-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.8); } .Hero__scroll { position: absolute; bottom: 0.75rem; right: 0; left: 0; z-index: 1; width: 100%; padding: 1.875rem 0; } @media screen and (min-width: 48.0625em) { .Hero__scroll { opacity: 1; transition: opacity 0.25s ease; } .Hero__scroll:hover { opacity: .7; } } .Hero__scroll:before { content: ''; position: absolute; top: 50%; left: 0; right: 0; margin-top: -1.125rem; margin-left: auto; margin-right: auto; width: 1.5625rem; height: 1.5625rem; transform: rotate(45deg); border-bottom: 2px solid #fff; border-right: 2px solid #fff; } @keyframes colorchange { 0% { background: #8edbda; } 25% { background: #90e5b4; } 50% { background: #ff844e; } 75% { background: #ffcb00; } 100% { background: #e85d6d; } } /*------------------------------------*\ #Logo \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ .Logo { position: fixed; top: 0; z-index: 40; width: 100%; } .Logo.has-search { color: #fff !important; } .Logo__wrapper { position: relative; } .Logo__link { display: block; position: absolute; top: 0; left: -0.125rem; padding: 1.375rem 1.25rem; line-height: 1; } @media screen and (min-width: 48.0625em) { .Logo__link { padding: 1.3rem 2.0625rem 1.875rem; } } /*------------------------------------*\ #Links \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ /** * Links - Smart Underline. */ p a, .t-para a { opacity: 1; text-decoration: underline; } p a:hover, .t-para a:hover { opacity: .7; } .Footer p a, .Footer .t-para a { text-decoration: none; opacity: .7; } .Footer p a:hover, .Footer .t-para a:hover { opacity: 1; } .t-subtle p a, .t-subtle .t-para a { text-decoration: none; opacity: 1; } /*------------------------------------*\ #Main wrapper \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ .Main { padding-top: 4.0625rem; } @media screen and (min-width: 48.0625em) { .Main { padding-top: 4.875rem; } } .Main__inner { position: relative; max-width: 100em; margin-left: auto; margin-right: auto; min-height: calc( 100vh - 44.0625rem); background-color: #fff; } @media screen and (min-width: 37.5em) { .Main__inner { min-height: calc( 100vh - 24.625rem); } } .page-home .Main__inner { min-height: auto; } .page-people .Main__inner, .page-project .Main__inner, .page-news .Main__inner { background-color: #222; } .Hero + .Main { padding-top: 0; } @media screen and (max-width: 48em) { .Filter + .Main { padding-top: 0; } } /*------------------------------------*\ #Map \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ .Map { position: relative; width: 100%; z-index: 1; color: #fff; background-color: #242424; height: 70vh; overflow: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .Map .smartmap-mapcanvas { margin-bottom: 1.875rem; } .Map.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .Map--project { position: absolute; opacity: 0; visibility: hidden; transform: translateY(-200%); height: calc(100vh - (4.0625rem* 2)); } @media screen and (min-width: 48.0625em) { .Map--project { height: calc(100vh - 4.875rem); } } .Map--project .Map__wrapper { top: 0; } .Map--project .o-media { height: 100%; } .Map--project.is-open { position: static; } @media screen and (max-width: 48em) { .Map--project.is-open { overflow: auto; } } .Map--project.is-open + .Projects { display: none; } .Map__wrapper { position: absolute; top: 4.0625rem; left: 0; width: 100%; display: inline-block; padding: 1.25rem; } @media screen and (min-width: 48.0625em) { .Map__wrapper { top: 4.875rem; padding: 1.875rem; } } .Map__icons { position: relative; z-index: 1; background-color: #000; display: inline-block; font-size: 0; } .Map__icon { display: inline-block; padding: 0.625rem; color: #fff; background-color: #000; transition: color 0.25s ease, background-color 0.25s ease; } .Map__icon:hover { color: #ff5441; } .is-fs .Map__icon--fs { color: #000; background-color: #ff5441; } .is-fs .Map__icon--fs:hover { color: #fff; } .Map__icon--dl:active, .Map__icon--dl:focus { color: #000; background-color: #ff5441; } .Map__list { position: absolute; display: inline-block; background-color: #353535; padding: 0.375rem 0.625rem; z-index: 1; } .Map__item:before { content: ''; display: inline-block; vertical-align: middle; width: 0.625rem; height: 0.625rem; margin-top: -0.125rem; margin-right: 0.625rem; border-radius: 50%; } .Map__item--green:before { background-color: #00aa8f; } .Map__item--blue:before { background-color: #68d0f0; } .Map__item--red:before { background-color: #ff5441; } .Map__panel { color: #242424; max-width: 19.375rem; width: 100%; padding: 0.625rem; z-index: 2; position: relative; opacity: 0; visibility: hidden; transform: scale(0.8); transition: opacity 0.25s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.25s cubic-bezier(0.77, 0, 0.175, 1), transform 0.25s cubic-bezier(0.77, 0, 0.175, 1); } .Map__panel.is-open { opacity: 1; visibility: visible; transform: scale(1); } .Map__info { padding: 1.25rem 0.625rem 0.3125rem; } .Map__infoTitle { font-size: 1.1875rem; line-height: 1.5; } .Map__infoList { font-size: 0; border-bottom: 1px solid currentColor; margin-top: 0.625rem; } .Map__infoList dt, .Map__infoList dd { display: inline-block; font-size: 1rem; line-height: 1.5; vertical-align: top; border-top: 1px solid currentColor; padding: 0.3125rem 0; } .Map__infoList dt { width: 35%; font-weight: bold; } .Map__infoList dd { width: 65%; -moz-osx-font-smoothing: initial; -webkit-font-smoothing: initial; } .Map__links { position: relative; text-align: center; } .Map__links a { opacity: 1; transition: opacity 0.25s ease; } .Map__links a:hover { opacity: 0.7; } .Map__link { display: inline-block; vertical-align: bottom; line-height: 1.1; -moz-osx-font-smoothing: initial; -webkit-font-smoothing: initial; text-decoration: underline; } .Map__download, .Map__close { position: absolute; top: -1.25rem; padding: 1.25rem; } .Map__download { left: -1.25rem; } .Map__close { right: -1.25rem; } @media screen and (max-width: 48em) { .Map__grid { position: relative; } } .page-contact { position: relative; } .page-contact .map-nav { margin-bottom: 1.875rem; } .page-contact .map-nav li { font-size: 1.5625rem; line-height: 1.12; } .page-contact .map-nav li button { color: #ccc; transition: color 0.3s; } .page-contact .map-nav li button:hover { color: #555; } .page-contact .map-nav li.is-active button { color: #555; } .page-contact .Map { margin-top: 5rem; } @media screen and (min-width: 48.0625em) { .page-contact { min-height: 50rem; } } .smartmap-mapcanvas button[title='Zoom in'] img, .smartmap-mapcanvas button[title='Zoom out'] img { top: 50%; left: 50%; } .smartmap-mapcanvas .gm-style div > img { height: 100% !important; width: 100% !important; } .smartmap-mapcanvas .transit-line-group-vehicle-icons img { position: static; width: auto !important; } .smartmap-mapcanvas button.gm-fullscreen-control { display: none; } .gm-style-cc, .gm-style a img { display: none !important; } .gm-bundled-control { bottom: auto !important; right: 35px !important; transform: scale(0.87); top: 10px !important; } @media screen and (min-width: 48.0625em) { .gm-bundled-control { right: 44px !important; } } /*------------------------------------*\ #NAV \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ .Navigation { position: relative; width: 100%; height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translate3d(0, -100%, 0); will-change: transform; transition: transform 0.25s cubic-bezier(0.77, 0, 0.175, 1); background-color: #eee; padding-top: 4.6875rem; } @media screen and (min-width: 48.0625em) { .Navigation { padding-top: 5rem; height: auto; z-index: 20; } } @media screen and (min-width: 62em) { .Navigation { padding-top: 1.6875rem; } } .Navigation.is-open { transform: translate3d(0, 0, 0); } .Navigation .o-wrapper { position: relative; } .Navigation__list { font-size: 1.5625rem; line-height: 1.78; color: #555; } @media screen and (min-width: 48.0625em) { .Navigation__list { position: relative; font-size: 1rem; line-height: 1.4; } .Navigation__list + .Navigation__list:before { content: ''; position: absolute; left: -0.0625rem; width: 1px; height: 100%; background-color: currentColor; } } .Navigation__item { display: block; } @media screen and (max-width: 48em) { .Navigation__item { border-bottom: 1px solid #242424; } } .Navigation__item:hover, .Navigation__item.is-active { color: #242424; font-weight: bold; } @media screen and (max-width: 48em) { .Navigation__item--search { position: absolute; bottom: -2.8125rem; width: calc(100% - 2.5rem); z-index: 1; } } .Navigation a { display: block; } @media screen and (min-width: 48.0625em) { .Navigation a { padding-top: 0; } } .Navigation__controls { padding-bottom: 9.0625rem; } @media screen and (min-width: 48.0625em) { .Navigation__controls { padding-bottom: 0; } } .Navigation__search { display: block; width: 100%; text-align: left; } .Navigation__close { float: right; padding: 1.875rem; margin-right: -1.875rem; } /*------------------------------------*\ #Related \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ .Related { margin-top: 1.25rem; } @media screen and (min-width: 48.0625em) { .Related { margin-top: 0; margin-bottom: 1.25rem; } } .Related__title { margin-bottom: 0.625rem; } .Related__list { border-top: 1px solid #242424; margin-bottom: 0; } .Related__list li { border-bottom: 1px solid #242424; } .Related__list a { display: block; padding: 0.625rem 0; } .Related__list a:hover { color: #242424; font-weight: bold; } /*------------------------------------*\ #HEADER \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ .Search { position: fixed; top: 0; z-index: 30; width: 100%; height: 100%; color: #fff; background-color: rgba(0, 0, 0, 0.9); opacity: 0; visibility: hidden; transition: 0.25s ease; display: none; } .Search.is-open { opacity: 1; visibility: visible; } .Search__wrapper { position: relative; } .Search__input { width: 100%; color: rgba(255, 255, 255, 0.3); outline: 0; font-size: 2.1875rem; line-height: 1; font-weight: 300; height: 1.1em; } @media screen and (min-width: 48.0625em) { .Search__input { font-size: 3.125rem; line-height: 1; } } .Search__close { position: absolute; top: 0; right: 0; padding: 1.125rem 1.375rem 1.25rem 1.25rem; } @media screen and (min-width: 48.0625em) { .Search__close { padding: 1.5625rem 1.875rem; } } .Search__content { padding: 6.25rem 0; } .Search__copy { max-width: 28.125rem; } [placeholder] { color: #fff; text-overflow: ellipsis; transition: color 0.25s ease; } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.3); text-overflow: ellipsis; transition: color 0.25s ease; } [placeholder]:focus::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } :-moz-placeholder { color: rgba(255, 255, 255, 0.3); text-overflow: ellipsis; transition: color 0.25s ease; } ::-moz-placeholder { color: rgba(255, 255, 255, 0.3); text-overflow: ellipsis; transition: color 0.25s ease; } :-ms-input-placeholder { color: rgba(255, 255, 255, 0.3); text-overflow: ellipsis; transition: color 0.25s ease; } ::input-placeholder { color: rgba(255, 255, 255, 0.3); text-overflow: ellipsis; transition: color 0.25s ease; } /*------------------------------------*\ #Panels \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ .Panel { display: block; position: relative; color: #242424; } .Panel__image { display: block; position: relative; height: 0; height: auto; max-width: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.2); padding-bottom: 64%; } .Panel img { position: absolute; top: 0; left: 0; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .Panel__date { margin-bottom: 0; } @media screen and (min-width: 48.0625em) { .Panel__date { color: currentColor !important; } } .Panel__title { display: block; width: 100%; font-size: 1.5625rem; line-height: 1.12; max-width: 18.75rem; } .Panel__content { width: 100%; padding: 1.25rem 1.25rem 0.9375rem; } @media screen and (min-width: 48.0625em) { .Panel__content { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; transition: opacity 0.25s ease; opacity: 0; padding: 1.875rem; } } .Panel:hover .Panel__content, .Panel.is-open .Panel__content { opacity: 1; } .Panel__category, .Panel__role, .Panel__qual { display: block; } .Panel__tag { display: inline-block; margin-bottom: 0; } @media screen and (min-width: 48.0625em) { .Panel__tag { position: absolute; bottom: 1.5625rem; left: 1.875rem; padding-top: 1.25rem; } } .Panel--people .Panel__tag, .Panel--news .Panel__tag { margin-top: 1.25rem; border-bottom: 1px solid #242424; transition: border 0.25s ease; } @media screen and (min-width: 48.0625em) { .Panel--people .Panel__tag, .Panel--news .Panel__tag { border-bottom-color: transparent; } } @media screen and (min-width: 48.0625em) { .Panel--people:hover .Panel__tag, .Panel--news:hover .Panel__tag { border-bottom-color: #242424; } } @media screen and (max-width: 48em) { .Panel--news { background-color: #fff; } .Panel--news:hover { /*background-color: c(white)!important;*/ } .Panel--news:hover .Panel__date { color: #fff !important; } } @media screen and (min-width: 48.0625em) { .Panel--news { background-color: #eee; transition: background-color 0.25s ease; } } @media screen and (max-width: 48em) { .Panel--news .Panel__date { font-size: 1.5625rem; line-height: 1.12; } } .Panel--news .Panel__content { position: relative; opacity: 1; padding: 1.25rem; } @media screen and (min-width: 37.5em) { .Panel--news .Panel__content:after { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; border-right: 1px solid #fff; } } @media screen and (min-width: 48.0625em) { .Panel--news .Panel__content { padding: 1.875rem; min-height: 13.75rem; } } /*------------------------------------*\ #Switches \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ .Switches { padding: 5.3125rem 1.25rem 1.25rem; background-color: #fff; } .Switches__btn { text-align: left; color: #242424; border-bottom: 1px solid currentColor; } .Switches__btn--map { position: absolute; margin-top: 0.0625rem; right: 1.25rem; } /*------------------------------------*\ #SVG COMPONENTS \*------------------------------------*/ /*------------------------------------*\ #FUNCTIONS \*------------------------------------*/ /** * Convert pixels to rems. * eg. for a relational value of 12px write rem(12) * Assumes base font-size of , default 100%/16px */ /*----------------------------------------*\ #GLOBAL - Project-level settings and setup. \*----------------------------------------*/ /** * Base typographical styles and baseline grid, DO NOT CHANGE! */ /** * Spacing. */ /** * Header heights. */ /** * Responsive breakpoints stacks. */ /** * Font stacks. */ /** * Standardise some UI treatments. */ /** * Path variables. */ /*------------------------------------*\ #COLOURS \*------------------------------------*/ /** * Palette. */ /** * Global colouration of elements based on brand colours. */ /** * Generate a font-size and baseline-compatible line-height. */ /*------------------------------------*\ #PLACEHOLDERS \*------------------------------------*/ /** * Social icons. */ .i-small { width: 1.25rem; height: 1.25rem; fill: currentColor; } .i-med { width: 1.875rem; height: 1.875rem; fill: currentColor; } .i-logo { width: 15.625rem; height: 2.3125rem; fill: currentColor; }