/*------------------------------------* #FONTS
\*------------------------------------*/
/* stylelint-disable value-keyword-case */
/* stylelint-enable value-keyword-case */
/*------------------------------------* #COLOURS
\*------------------------------------*/
/*------------------------------------* #ANIMATIONS AND TRANSITIONS
\*------------------------------------*/
/*------------------------------------* #BREAKPOINTS
\*------------------------------------*/
/*------------------------------------* #Z-INDEXES
\*------------------------------------*/
/*doc
---
title: Colours
name: colours
category: colours
---
#8b5cdd - primary
#3e3750 - primary-dark
#d1bef1 - primary-light
Greys
#e3dfec - pastel
#f2f1f1 - cloud
#a0a0a0 - overcast
#6c6978 - dolphin
#2d283e - inkblot
#333333 - nimbus
*/
/* usual mixin included TTF and SVG, which we don't have for these fonts */
/* we only have woff, woff2 and eot */
/* added parameter to include svg font*/
/* stylelint-disable value-list-comma-space-after, indentation, block-closing-brace-newline-after */
/* stylelint-enable value-list-comma-space-after, indentation, block-closing-brace-newline-after */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
* without disabling user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* 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;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* 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 Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
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.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
box-sizing: content-box;
/* 2 */
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 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 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/*-------------[MIXINS]-------------*/
/*
* centered
* center a block element
*/
/*
* cf
* clearfix, for elements with floated children
*/
/*
* clean-list
* make lists look like they aren't lists
*/
/*
* Font Face
@include font-face('source-sans-pro', '/fonts/source-sans-pro/source-sans-pro-regular');
@include font-face('source-sans-pro', '/fonts/source-sans-pro/source-sans-pro-bold', bold);
@include font-face('source-sans-pro', '/fonts/source-sans-pro/source-sans-pro-italic', normal, italic);
*/
/* stylelint-disable indentation, value-list-comma-space-after */
/* stylelint-enable indentation, value-list-comma-space-after */
/*
* Fonts & related attrs
@include font($helvetica, 20px, #b4da55, 400, 1.25);
*/
/* stylelint-disable block-no-single-line, block-closing-brace-newline-before */
/* stylelint-enable block-no-single-line, block-closing-brace-newline-before */
/*
* converts the Photoshop kerning value to an em value
*/
/*
* middle
* vertically or horizontally align content
*/
/*
* Apply CSS to input placeholders
input {
width: 300px;
@include placeholder {
color: red;
}
}
*/
/* stylelint-disable */
/* stylelint-enable */
/*
* Responsive Text
* For when you want your text to scale with the viewport width
* all arguments take a pixel value
* $min-width: the minimum viewport width you want your text to start scaling
* $max-width: the maximum viewport width you want your text to stop scaling
* $min-size: the minimum font-size to start scaling with
* $max-size: the maximum font-size to finish scaling with
*
* In the exmaple below, the font-size will be 15px at 400px viewport width
* and it will scale up to 30px at 800px viewport width
.body-text {
@include responsive-text(400px, 800px, 15px, 30px);
}
*/
/*
* makes a CSS triangle
@include triangle(12px, gray, down);
@include triangle(12px 6px, gray lavender, up-left);
*/
/* stylelint-disable */
/* stylelint-enable */
/*-------------[FUNCTIONS]-------------*/
/*
* returns pixel font size in rem
*/
/*
* DEPRECATED - use rem() function above
* when using em's, when dividing by the base font size, it multiplies it based on its parent, rather than the base font size
* This function is therefore not quite correct.
* Left it in for legacy sites, but needs to be phased our
* returns pixel font size in em
*/
/**
* Helper styles
* e.g. .centered { margin-right: auto; margin-left: auto; }
*/
.position--relative {
position: relative;
}
.position--absolute {
position: absolute;
}
.text--center {
text-align: center;
}
.centered {
margin-right: auto;
margin-left: auto;
}
/* Vertically centre something within an element by using this hack */
.display--table {
display: table;
}
.vert--middle {
display: table-cell;
vertical-align: middle;
}
/*
* add .img--full to the img parent
* it will be full width for non-admins
* normal width for admins, so the crop tool isn't broken
*/
.img--full {
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.img--full > img,
.img--full > noscript > img {
display: block;
width: 100%;
height: auto;
}
/* stylelint-disable */
*,
*::after,
*::before {
box-sizing: border-box;
}
html {
font: 1.125em/2.22222 "Graphik", Helvetica, Arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
}
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;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
blockquote,
p,
address,
table,
fieldset,
figure,
pre {
margin-bottom: 40px;
margin-bottom: 2.22222rem;
}
ul,
ol,
dd {
margin-left: 80px;
margin-left: 4.44444rem;
}
img,
svg {
vertical-align: top;
}
/* stylelint-enable */
/* Patterns */
/**
* Helper styles
* e.g. .centered { margin-right: auto; margin-left: auto; }
*/
/* stylelint-disable selector-no-type */
.hide {
display: none;
}
.cf::after {
content: '';
display: table;
clear: both;
}
.img--responsive {
max-width: 100%;
height: auto;
}
.img--responsive > img {
max-width: 100%;
height: auto;
}
.img--max-full-centered {
text-align: center;
}
.img--max-full-centered > img,
.img--max-full-centered > noscript > img {
display: inline-block;
max-width: 100%;
height: auto;
}
.img-ratio-1x1,
.img-ratio-1920x1280,
.img-ratio-1920x900,
.img-ratio-1370x900,
.img-ratio-1370x720,
.img-ratio-680x340,
.img-ratio-430x665,
.img-ratio-680x800,
.img-ratio-1026x684 {
position: relative;
background: #8b5cdd;
}
.img-ratio-1x1::before,
.img-ratio-1920x1280::before,
.img-ratio-1920x900::before,
.img-ratio-1370x900::before,
.img-ratio-1370x720::before,
.img-ratio-680x340::before,
.img-ratio-430x665::before,
.img-ratio-680x800::before,
.img-ratio-1026x684::before {
content: '';
display: block;
}
.img-ratio-1x1 > div:first-child,
.img-ratio-1x1 > img:first-child,
.img-ratio-1x1 > noscript img,
.img-ratio-1920x1280 > div:first-child,
.img-ratio-1920x1280 > img:first-child,
.img-ratio-1920x1280 > noscript img,
.img-ratio-1920x900 > div:first-child,
.img-ratio-1920x900 > img:first-child,
.img-ratio-1920x900 > noscript img,
.img-ratio-1370x900 > div:first-child,
.img-ratio-1370x900 > img:first-child,
.img-ratio-1370x900 > noscript img,
.img-ratio-1370x720 > div:first-child,
.img-ratio-1370x720 > img:first-child,
.img-ratio-1370x720 > noscript img,
.img-ratio-680x340 > div:first-child,
.img-ratio-680x340 > img:first-child,
.img-ratio-680x340 > noscript img,
.img-ratio-430x665 > div:first-child,
.img-ratio-430x665 > img:first-child,
.img-ratio-430x665 > noscript img,
.img-ratio-680x800 > div:first-child,
.img-ratio-680x800 > img:first-child,
.img-ratio-680x800 > noscript img,
.img-ratio-1026x684 > div:first-child,
.img-ratio-1026x684 > img:first-child,
.img-ratio-1026x684 > noscript img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.img-ratio-1x1::before {
padding-top: 100%;
}
.img-ratio-1920x1280::before {
padding-top: 66.66667%;
}
.img-ratio-1920x900::before {
padding-top: 46.875%;
}
.img-ratio-1370x900::before {
padding-top: 65.69343%;
}
.img-ratio-1370x720::before {
padding-top: 52.55474%;
}
.img-ratio-680x340::before {
padding-top: 50%;
}
.img-ratio-430x665::before {
padding-top: 154.65116%;
}
.img-ratio-680x800::before {
padding-top: 117.64706%;
}
.img-ratio-1026x684::before {
padding-top: 66.66667%;
}
.video-ratio-1500x840,
.video-ratio-1204x834,
.video-ratio-1204x838 {
position: relative;
}
.video-ratio-1500x840::before,
.video-ratio-1204x834::before,
.video-ratio-1204x838::before {
content: '';
display: block;
}
.video-ratio-1500x840 > video,
.video-ratio-1500x840 > img,
.video-ratio-1500x840 > noscript img,
.video-ratio-1204x834 > video,
.video-ratio-1204x834 > img,
.video-ratio-1204x834 > noscript img,
.video-ratio-1204x838 > video,
.video-ratio-1204x838 > img,
.video-ratio-1204x838 > noscript img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-ratio-1500x840::before {
padding-top: 56%;
}
.video-ratio-1204x834::before {
padding-top: 69.2691%;
}
.video-ratio-1204x838::before {
padding-top: 69.60133%;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/**
* Fonts
*/
.font-secondary {
font-family: "GT-Pressura-Mono", Courier, monospace;
}
.font-tertiary {
font-family: "Calluna", Times, serif;
}
/**
* Text alignment
*/
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
/**
* Text colors
*/
.color-primary {
color: #8b5cdd;
}
.color-white {
color: #fff;
}
.color-overcast {
color: #a0a0a0;
}
/**
* Background colors
*/
.bg-light {
/* stylelint-disable declaration-no-important */
background-color: #fff !important;
/* stylelint-enable declaration-no-important */
}
.bg-dark {
/* stylelint-disable declaration-no-important */
background-color: #3e3750 !important;
/* stylelint-enable declaration-no-important */
}
.bg-purple {
/* stylelint-disable declaration-no-important */
background-color: #8b5cdd !important;
/* stylelint-enable declaration-no-important */
color: #fff;
}
.bg-split {
/* stylelint-disable declaration-no-important */
background: linear-gradient(to right, #383247 50%, #3e3750 50%) !important;
/* stylelint-enable declaration-no-important */
}
.bg-transparent {
/* stylelint-disable declaration-no-important */
background-color: transparent !important;
/* stylelint-enable declaration-no-important */
}
/**
* Links
*/
.textlink, .textarea a:not(.btn), .footer-item__email {
border-bottom: 1px solid rgba(139, 92, 221, 0.3);
padding-bottom: 5px;
transition: color 0.2s, border-bottom-color 0.2s;
}
.textlink:hover, .textarea a:hover:not(.btn), .footer-item__email:hover {
color: #8b5cdd;
border-bottom-color: #8b5cdd;
}
/**
* Squiggles
*/
.big-squiggle {
overflow: hidden;
position: relative;
}
.big-squiggle::before {
content: '';
display: block;
padding-top: 13.05604%;
}
.big-squiggle div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 300%;
background: url("../img/svg/squiggle-repeating.svg") top left repeat-x;
background-size: 33.3333333% 100%;
}
/* stylelint-disable declaration-no-important */
.m-0 {
margin: 0 !important;
}
.m-b-0 {
margin-bottom: 0 !important;
}
.m-b-40 {
margin-bottom: 40px !important;
}
.m-l-20 {
margin-left: 20px !important;
}
.p-t-0 {
padding-top: 0 !important;
}
.p-b-0 {
padding-bottom: 0 !important;
}
/* stylelint-enable declaration-no-important */
/* stylelint-enable selector-no-type */
.br::before {
content: '\A';
white-space: pre;
}
/* stylelint-disable */
.article__column > *:last-child, .case-study-header__detail > *:last-child,
.trim > *:last-child {
margin-bottom: 0 !important;
}
.article__column > *:first-child, .case-study-header__detail > *:first-child,
.trim > *:first-child {
margin-top: 0 !important;
}
.lh-1 {
line-height: 1 !important;
}
/* stylelint-enable */
/*doc
---
title: Fonts
name: fonts
category: fonts
---
Graphik - Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur velit est, tempus vitae venenatis et, convallis sed risus. Donec vestibulum dui metus, et blandit purus placerat nec. Vivamus eget justo maximus turpis dignissim semper et at mi.
GT Pressura Mono - Secondary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur velit est, tempus vitae venenatis et, convallis sed risus. Donec vestibulum dui metus, et blandit purus placerat nec. Vivamus eget justo maximus turpis dignissim semper et at mi.
Calluna - Tertiary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur velit est, tempus vitae venenatis et, convallis sed risus. Donec vestibulum dui metus, et blandit purus placerat nec. Vivamus eget justo maximus turpis dignissim semper et at mi.
*/
@font-face {
font-family: "Graphik";
font-weight: normal;
font-style: normal;
src: url("../fonts/Graphik-Regular-Web.eot");
src: url("../fonts/Graphik-Regular-Web.eot?#iefix") format("embedded-opentype"), url("../fonts/Graphik-Regular-Web.woff2") format("woff2"), url("../fonts/Graphik-Regular-Web.woff") format("woff"), url("../fonts/Graphik-Regular-Web.svg#Eczar") format("svg");
}
@font-face {
font-family: "Graphik";
font-weight: normal;
font-style: italic;
src: url("../fonts/Graphik-RegularItalic-Web.eot");
src: url("../fonts/Graphik-RegularItalic-Web.eot?#iefix") format("embedded-opentype"), url("../fonts/Graphik-RegularItalic-Web.woff2") format("woff2"), url("../fonts/Graphik-RegularItalic-Web.woff") format("woff"), url("../fonts/Graphik-RegularItalic-Web.svg#Eczar") format("svg");
}
@font-face {
font-family: "GT-Pressura-Mono";
font-weight: normal;
font-style: normal;
src: url("../fonts/GT-Pressura-Mono-Regular.eot");
src: url("../fonts/GT-Pressura-Mono-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/GT-Pressura-Mono-Regular.woff2") format("woff2"), url("../fonts/GT-Pressura-Mono-Regular.woff") format("woff"), url("../fonts/GT-Pressura-Mono-Regular.svg#Eczar") format("svg");
}
@font-face {
font-family: "Calluna";
font-weight: normal;
font-style: normal;
src: url("../fonts/Calluna.eot");
src: url("../fonts/Calluna.eot?#iefix") format("embedded-opentype"), url("../fonts/Calluna.woff2") format("woff2"), url("../fonts/Calluna.woff") format("woff"), url("../fonts/Calluna.svg#Eczar") format("svg");
}
@font-face {
font-family: "Calluna";
font-weight: bold;
font-style: normal;
src: url("../fonts/Calluna-Bold.eot");
src: url("../fonts/Calluna-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Calluna-Bold.woff2") format("woff2"), url("../fonts/Calluna-Bold.woff") format("woff"), url("../fonts/Calluna-Bold.svg#Eczar") format("svg");
}
@font-face {
font-family: "Eczar";
font-weight: bold;
font-style: normal;
src: url("../fonts/eczar-v4-latin-700.eot");
src: url("../fonts/eczar-v4-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/eczar-v4-latin-700.woff2") format("woff2"), url("../fonts/eczar-v4-latin-700.woff") format("woff"), url("../fonts/eczar-v4-latin-700.svg#Eczar") format("svg");
}
/*doc
---
title: Headings
name: headings
category: Headings
---
```html_example
Heading 1 - alpha
Heading 2 - bravo
Heading 3 - charlie
Heading 4 - delta
Heading 5 - echo
Heading 6 - foxtrot
```
*/
/* stylelint-disable selector-no-type, selector-no-qualifying-type */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
line-height: 1.2;
margin: 3em 0 1.7em;
}
.alpha-heading h1,
.alpha-heading h2,
.alpha-heading h3,
.alpha {
/* file: global */
/* stylelint-disable declaration-block-no-duplicate-properties */
font-size: 70px;
font-size: calc( (40px - 320px * 0.0463) + 4.62963vw);
/* stylelint-enable declaration-block-no-duplicate-properties */
line-height: 1.2;
}
@media screen and (max-width: 320px) {
.alpha-heading h1,
.alpha-heading h2,
.alpha-heading h3,
.alpha {
/* file: global */
font-size: 40px;
}
}
@media screen and (min-width: 1400px) {
.alpha-heading h1,
.alpha-heading h2,
.alpha-heading h3,
.alpha {
/* file: global */
font-size: 90px;
}
}
.bravo {
/* file: global */
/* stylelint-disable declaration-block-no-duplicate-properties */
font-size: 42px;
font-size: calc( (36px - 320px * 0.02222) + 2.22222vw);
/* stylelint-enable declaration-block-no-duplicate-properties */
line-height: 1.2;
margin: 2em 0 1em;
}
@media screen and (max-width: 320px) {
.bravo {
/* file: global */
font-size: 36px;
}
}
@media screen and (min-width: 1400px) {
.bravo {
/* file: global */
font-size: 60px;
}
}
.two-col h2,
.charlie, .site-nav__link {
/* file: global */
/* stylelint-disable declaration-block-no-duplicate-properties */
font-size: 31.5px;
font-size: calc( (25px - 320px * 0.01759) + 1.75926vw);
/* stylelint-enable declaration-block-no-duplicate-properties */
}
@media screen and (max-width: 320px) {
.two-col h2,
.charlie, .site-nav__link {
/* file: global */
font-size: 25px;
}
}
@media screen and (min-width: 1400px) {
.two-col h2,
.charlie, .site-nav__link {
/* file: global */
font-size: 44px;
}
}
.two-col h2,
.charlie {
line-height: 1.2;
}
.two-col h2.-looser,
.charlie.-looser {
line-height: 1.7;
}
/* no-descending-specificity stylelint rule recommended this be moved below h1, h2, h3 */
.delta {
/* file: global */
/* stylelint-disable declaration-block-no-duplicate-properties */
font-size: 24px;
font-size: calc( (24px - 320px * 0.01111) + 1.11111vw);
/* stylelint-enable declaration-block-no-duplicate-properties */
line-height: 1.2;
}
@media screen and (max-width: 320px) {
.delta {
/* file: global */
font-size: 24px;
}
}
@media screen and (min-width: 1400px) {
.delta {
/* file: global */
font-size: 36px;
}
}
.delta.-looser {
line-height: 1.38889;
}
.textarea h2,
.echo {
/* file: global */
/* stylelint-disable declaration-block-no-duplicate-properties */
font-size: 19px;
font-size: calc( (18px - 320px * 0.00926) + 0.92593vw);
/* stylelint-enable declaration-block-no-duplicate-properties */
line-height: 1.4;
}
@media screen and (max-width: 320px) {
.textarea h2,
.echo {
/* file: global */
font-size: 18px;
}
}
@media screen and (min-width: 1400px) {
.textarea h2,
.echo {
/* file: global */
font-size: 28px;
}
}
.textarea h3,
.foxtrot {
/* file: global */
/* stylelint-disable declaration-block-no-duplicate-properties */
font-size: 16px;
font-size: calc( (16px - 320px * 0.00741) + 0.74074vw);
/* stylelint-enable declaration-block-no-duplicate-properties */
line-height: 1.4;
}
@media screen and (max-width: 320px) {
.textarea h3,
.foxtrot {
/* file: global */
font-size: 16px;
}
}
@media screen and (min-width: 1400px) {
.textarea h3,
.foxtrot {
/* file: global */
font-size: 24px;
}
}
.textarea h4,
.golf {
font-size: inherit;
line-height: 1.5;
}
.background-heading {
position: fixed;
z-index: -1;
top: 50%;
left: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 80%;
margin: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.site-section.-active .background-heading {
opacity: 1;
}
.background-heading img {
width: 100%;
height: auto;
}
/* stylelint-enable selector-no-type, selector-no-qualifying-type */
/**
* Base Template bits
**/
/* stylelint-disable selector-no-type, selector-no-qualifying-type */
html {
height: 100%;
}
*:focus {
outline: 0;
}
body {
min-height: 100%;
color: #333;
background-color: #fff;
font-size: 0.77778rem;
transition: background-color 0.4s;
}
@media (min-width: 800px) {
body {
font-size: 1rem;
}
}
body.-no-scroll, body.-split-modal-active, body.-mobile-nav-active {
overflow: hidden;
}
/* stylelint-enable selector-no-type, selector-no-qualifying-type */
[class^='cover-'] {
position: fixed;
z-index: -1;
top: -100px;
right: 0;
bottom: -100px;
left: 0;
opacity: 0.01;
transition: opacity 0.4s;
will-change: opacity;
}
.cover-dark {
background: #3e3750;
}
.body--dark .cover-dark {
opacity: 0.99;
}
.cover-primary {
background: #8b5cdd;
}
.body--primary .cover-primary {
opacity: 0.99;
}
.cover-nimbus {
background: #333;
}
.body--nimbus .cover-nimbus {
opacity: 0.99;
}
/* stylelint-disable selector-no-type */
a {
text-decoration: none;
color: #333;
}
img {
max-width: 100%;
}
address {
font-style: normal;
margin: 0;
}
/* stylelint-enable selector-no-type */
.expose-body {
overflow: hidden;
position: relative;
z-index: 1;
min-height: 100vh;
}
.wc-before::before {
will-change: transform, opacity;
}
.wc-after::after {
will-change: transform, opacity;
}
.bg-0,
.bg-1 {
position: fixed;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.01;
transition: opacity 0.4s;
}
.bg-0.-active,
.bg-1.-active {
z-index: -1;
opacity: 1;
transition-delay: 0;
}
.bg-white,
.bg-primary,
.bg-dark,
.bg-nimbus,
.bg-cloud,
.bg-shapes,
.bg-martinique {
position: fixed;
z-index: -2;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
transition: opacity 0s 0.4s;
/* stylelint-disable-line time-no-imperceptible */
}
.bg-white,
.bg-shapes {
background-color: #fff;
}
.bg-shapes {
background-image: url("../img/svg/shapes-bg.svg");
background-size: 100% auto;
background-position: top;
}
.bg-primary {
background-color: #8b5cdd;
}
.bg-dark {
background-color: #3e3750;
}
.bg-nimbus {
background-color: #333;
}
.bg-cloud {
background-color: #f2f1f1;
}
.bg-martinique {
background-color: #3b3454;
}
.body--dark,
.body--primary,
.body--nimbus,
.body--martinique {
color: #fff;
}
.body--white .bg-white,
.body--primary .bg-primary,
.body--dark .bg-dark,
.body--nimbus .bg-nimbus,
.body--cloud .bg-cloud,
.body--shapes .bg-shapes,
.body--martinique .bg-martinique {
z-index: -1;
opacity: 1;
transition: opacity 0.4s;
}
.body--home {
background: #3e3750;
}
.body--home .bg-white,
.body--home .bg-primary,
.body--home .bg-dark,
.body--home .bg-nimbus,
.body--home .bg-shapes {
transition: opacity 0.4s;
}
/* stylelint-disable declaration-no-important */
/* stylelint-disable selector-no-qualifying-type */
body.-page-loading {
background: none;
}
body.-page-loading .bg-white,
body.-page-loading .bg-primary,
body.-page-loading .bg-dark,
body.-page-loading .bg-nimbus,
body.-page-loading .bg-shapes {
opacity: 0 !important;
transition: opacity 0s 0.4s !important;
}
/* stylelint-enable declaration-no-important */
/* stylelint-enable selector-no-qualifying-type */
.-disabled {
opacity: 0.5;
}
.site-section {
position: relative;
/* stylelint-disable selector-no-universal */
/* stylelint-enable selector-no-universal */
}
/* stylelint-disable declaration-no-important */
.hero.-active:not(.-home) + .site-section > * {
opacity: 1 !important;
}
/* stylelint-enable declaration-no-important */
.line {
position: absolute;
z-index: 1;
width: 1px;
height: 60px;
background: #fff;
top: -30px;
left: 50%;
will-change: transform, opacity;
opacity: 1;
transition: opacity 0.2s;
}
.grid .line {
top: -10px;
}
.line.-hide {
opacity: 0;
}
@media (min-width: 568px) {
.line {
height: 100px;
top: -50px;
}
.grid .line {
top: -30px;
}
}
@media (min-width: 768px) {
.line {
height: 160px;
top: -80px;
}
.grid .line {
top: -60px;
}
}
@media (min-width: 1200px) {
.line {
height: 240px;
top: -120px;
}
.grid .line {
top: -100px;
}
}
.body--white .line,
.body--cloud .line,
.body--dark .line,
.body--home .line,
.body--shapes .line,
.body--martinique .line {
background: #8b5cdd;
}
.line--first:not(.skrollable) {
-ms-transform-origin: top;
transform-origin: top;
opacity: 0;
}
.hero-loaded.fonts-loaded .line--first:not(.skrollable) {
animation: lineIntro 0.7s 1.7s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
.hero-loaded.fonts-loaded.landing .line--first:not(.skrollable) {
animation-delay: 2.6s;
}
@keyframes lineIntro {
from {
transform: scaleY(0);
opacity: 0;
}
to {
transform: scaleY(1);
opacity: 1;
}
}
.site-section__squiggle-icon {
width: 79px;
height: 8px;
overflow: hidden;
}
.site-section__squiggle-icon::after {
background-image: url("../img/svg/squiggle.svg");
background-repeat: no-repeat;
content: '';
display: block;
width: 200%;
height: 8px;
background-repeat: repeat;
background-size: 50% 100%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
opacity: 0;
}
.hero-loaded.fonts-loaded .site-section__squiggle-icon::after {
animation: squiggleIntro 0.6s 1.1s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
.hero-loaded.fonts-loaded.landing .site-section__squiggle-icon::after {
animation-delay: 2s;
}
.site-section__squiggle-icon.-dark::after {
background-image: url("../img/svg/squiggle-dark.svg");
background-repeat: no-repeat;
background-repeat: repeat;
}
@keyframes squiggleIntro {
from {
transform: translateX(-50%);
opacity: 0;
}
to {
opacity: 1;
transform: none;
}
}
.site-section__squiggle {
padding: 20px;
width: 119px;
height: 48px;
position: absolute;
z-index: -1;
bottom: 30px;
left: calc(50% - 60px);
}
.site-section__squiggle.-inline {
position: relative;
bottom: auto;
left: auto;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 568px) {
.site-section__squiggle {
bottom: 50px;
}
}
@media (min-width: 768px) {
.site-section__squiggle {
bottom: 80px;
padding: 40px;
width: 159px;
height: 88px;
left: calc(50% - 80px);
}
}
@media (min-width: 1200px) {
.site-section__squiggle {
bottom: 120px;
}
}
.site-container {
margin-right: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 10px;
max-width: 1660px;
}
@media (max-width: 767px) {
.site-container.-skew-left {
padding-left: 40px;
padding-right: 130px;
}
}
.site-container.-max-width-xs {
max-width: 650px;
}
.site-container.-max-width-small {
max-width: 820px;
}
.site-container.-max-width-medium {
max-width: 1500px;
}
@media (min-width: 950px) {
.site-container {
padding-left: 80px;
padding-right: 80px;
max-width: 1800px;
}
.site-container.-max-width-xs {
max-width: 790px;
}
.site-container.-max-width-small {
max-width: 960px;
}
.site-container.-max-width-medium {
max-width: 1640px;
}
}
@media (min-width: 1200px) {
.site-container {
padding-left: 160px;
padding-right: 160px;
max-width: 1960px;
}
.site-container.-max-width-xs {
max-width: 950px;
}
.site-container.-max-width-small {
max-width: 1120px;
}
.site-container.-max-width-medium {
max-width: 1800px;
}
}
@media (min-width: 1800px) {
.site-container {
padding-left: 240px;
padding-right: 240px;
max-width: 2120px;
}
.site-container.-max-width-xs {
max-width: 1110px;
}
.site-container.-max-width-small {
max-width: 1280px;
}
.site-container.-max-width-medium {
max-width: 1960px;
}
}
.max-width-sm {
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
@media (min-width: 1400px) {
.max-width-sm {
width: 66.6666666%;
}
}
/*
* PADDING
* ends: top and bottom
* sides: left and right
**/
.padding-top-hero,
.padding-ends-hero {
padding-top: 20px;
}
@media (min-width: 400px) {
.padding-top-hero,
.padding-ends-hero {
padding-top: 50px;
}
}
@media (min-width: 950px) {
.padding-top-hero,
.padding-ends-hero {
padding-top: 70px;
}
}
@media (min-width: 1800px) {
.padding-top-hero,
.padding-ends-hero {
padding-top: 100px;
}
}
.padding-bottom-hero,
.padding-ends-hero {
padding-bottom: 110px;
}
@media (min-width: 568px) {
.padding-bottom-hero,
.padding-ends-hero {
padding-bottom: 128px;
}
}
@media (min-width: 768px) {
.padding-bottom-hero,
.padding-ends-hero {
padding-bottom: 182px;
}
}
@media (min-width: 950px) {
.padding-bottom-hero,
.padding-ends-hero {
padding-bottom: 220px;
}
}
@media (min-width: 1200px) {
.padding-bottom-hero,
.padding-ends-hero {
padding-bottom: 266px;
}
}
@media (min-width: 1800px) {
.padding-bottom-hero,
.padding-ends-hero {
padding-bottom: 288px;
}
}
.padding-top-small,
.padding-ends-small {
padding-top: 25px;
}
@media (min-width: 500px) {
.padding-top-small,
.padding-ends-small {
padding-top: 50px;
}
}
@media (min-width: 800px) {
.padding-top-small,
.padding-ends-small {
padding-top: 100px;
}
}
@media (min-width: 1200px) {
.padding-top-small,
.padding-ends-small {
padding-top: 150px;
}
}
.padding-bottom-small,
.padding-ends-small {
padding-bottom: 25px;
}
@media (min-width: 500px) {
.padding-bottom-small,
.padding-ends-small {
padding-bottom: 50px;
}
}
@media (min-width: 800px) {
.padding-bottom-small,
.padding-ends-small {
padding-bottom: 100px;
}
}
@media (min-width: 1200px) {
.padding-bottom-small,
.padding-ends-small {
padding-bottom: 150px;
}
}
.padding-top-medium,
.padding-ends-medium {
padding-top: 50px;
}
@media (min-width: 500px) {
.padding-top-medium,
.padding-ends-medium {
padding-top: 100px;
}
}
@media (min-width: 800px) {
.padding-top-medium,
.padding-ends-medium {
padding-top: 150px;
}
}
@media (min-width: 1200px) {
.padding-top-medium,
.padding-ends-medium {
padding-top: 200px;
}
}
.padding-bottom-medium,
.padding-ends-medium {
padding-bottom: 50px;
}
@media (min-width: 500px) {
.padding-bottom-medium,
.padding-ends-medium {
padding-bottom: 100px;
}
}
@media (min-width: 800px) {
.padding-bottom-medium,
.padding-ends-medium {
padding-bottom: 150px;
}
}
@media (min-width: 1200px) {
.padding-bottom-medium,
.padding-ends-medium {
padding-bottom: 200px;
}
}
.padding-top-large,
.padding-ends-large {
padding-top: 100px;
}
@media (min-width: 500px) {
.padding-top-large,
.padding-ends-large {
padding-top: 150px;
}
}
@media (min-width: 800px) {
.padding-top-large,
.padding-ends-large {
padding-top: 250px;
}
}
@media (min-width: 1200px) {
.padding-top-large,
.padding-ends-large {
padding-top: 350px;
}
}
.padding-bottom-large,
.padding-ends-large {
padding-bottom: 100px;
}
@media (min-width: 500px) {
.padding-bottom-large,
.padding-ends-large {
padding-bottom: 150px;
}
}
@media (min-width: 800px) {
.padding-bottom-large,
.padding-ends-large {
padding-bottom: 250px;
}
}
@media (min-width: 1200px) {
.padding-bottom-large,
.padding-ends-large {
padding-bottom: 350px;
}
}
.padding-top-0 {
/* stylelint-disable declaration-no-important */
padding-top: 0 !important;
/* stylelint-enable declaration-no-important */
}
/*doc
---
title: Buttons
name: button
category: Buttons
---
Button styles can be applied to any element. Typically you'll want to use either a `` or an `` element.
Buttons should have a base .btn class, and a colour variant, such as -primary or -nimbus
```html_example
Button Text
Button Text
```
*/
.btn {
display: inline-block;
vertical-align: top;
overflow: hidden;
position: relative;
font-family: "GT-Pressura-Mono", Courier, monospace;
font-size: 0.88889rem;
line-height: 1.4;
text-align: center;
padding: 29px 54px;
border: 0;
border-radius: 0;
outline: 0;
background-color: transparent;
background-size: 100% 200%;
background-repeat: no-repeat;
background-position: 0 0;
transition: color 0.3s, background-position 0.3s, box-shadow 0.3s;
}
.btn:hover {
background-position: 0 100%;
}
.btn.-primary,
.body--white .btn,
.body--cloud .btn,
.body--shapes .btn,
.-split-modal-active .btn {
color: #8b5cdd;
background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #8b5cdd 50%, #8b5cdd 100%);
box-shadow: inset 0 0 0 2px rgba(139, 92, 221, 0.3);
}
.btn.-primary:hover, .btn.-primary:focus,
.body--white .btn:hover,
.body--white .btn:focus,
.body--cloud .btn:hover,
.body--cloud .btn:focus,
.body--shapes .btn:hover,
.body--shapes .btn:focus,
.-split-modal-active .btn:hover,
.-split-modal-active .btn:focus {
box-shadow: inset 0 0 0 2px #8b5cdd;
}
.btn.-primary:hover,
.body--white .btn:hover,
.body--cloud .btn:hover,
.body--shapes .btn:hover,
.-split-modal-active .btn:hover {
color: #fff;
}
.btn.-primary-reverse,
.body--white .btn.-primary-reverse {
color: #fff;
background-position: 0 100%;
}
.btn.-primary-reverse:hover, .btn.-primary-reverse:focus,
.body--white .btn.-primary-reverse:hover,
.body--white .btn.-primary-reverse:focus {
color: #8b5cdd;
background-position: 0 200%;
}
.btn.-nimbus {
color: #333;
background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #333 50%, #333 100%);
box-shadow: inset 0 0 0 2px rgba(51, 51, 51, 0.3);
}
.btn.-nimbus:hover, .btn.-nimbus:focus {
box-shadow: inset 0 0 0 2px #333;
}
.btn.-nimbus:hover {
color: #fff;
}
.btn.-white,
.body--primary .btn,
.body--dark .btn {
color: #fff;
background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.btn.-white:hover, .btn.-white:focus,
.body--primary .btn:hover,
.body--primary .btn:focus,
.body--dark .btn:hover,
.body--dark .btn:focus {
box-shadow: inset 0 0 0 2px #fff;
}
.btn.-white:hover,
.body--primary .btn:hover,
.body--dark .btn:hover {
color: #8b5cdd;
}
.body--dark .btn:hover {
color: #3e3750;
}
.btn.-fixed-170 {
width: 170px;
}
.btn[disabled] {
opacity: 0.3;
pointer-events: none;
}
.skip-to-content:focus {
z-index: 100;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
top: 30px;
left: 30px;
display: inline-block;
color: #fff;
padding: 0 10px;
}
.body--white .skip-to-content:focus,
.body--shapes .skip-to-content:focus {
color: #333;
}
.text-btn, .text-btn--purple {
color: #a0a0a0;
text-transform: lowercase;
line-height: 1;
display: inline-block;
position: relative;
white-space: nowrap;
font-size: 88.88889%;
}
.text-btn::before, .text-btn--purple::before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin-top: 2px;
height: 1px;
background: #a0a0a0;
-ms-transform-origin: left;
transform-origin: left;
-ms-transform: scaleX(0.3) translateX(-140%);
transform: scaleX(0.3) translateX(-140%);
transition: transform 0.3s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.text-btn:hover::before, .text-btn--purple:hover::before {
-ms-transform: none;
transform: none;
}
.text-btn span, .text-btn--purple span {
display: inline-block;
}
.text-btn--purple {
color: #8b5cdd;
transition: color 0.3s ease-in-out;
}
.text-btn--purple span {
padding-bottom: 10px;
border-bottom: 1px solid #d1bef1;
transition: border-bottom 0.3s ease-in-out;
}
.text-btn--purple::before {
background: #8b5cdd;
margin-top: -4px;
}
.text-btn--purple:hover {
color: #d1bef1;
}
.text-btn--purple:hover span {
border-bottom: 1px solid transparent;
}
.flip-btn {
position: relative;
display: inline-block;
text-decoration: none;
color: #8b5cdd;
line-height: 1;
padding-left: 26px;
text-transform: lowercase;
padding-bottom: 4px;
font-size: 13px;
}
.body--dark .flip-btn,
.body--primary .flip-btn,
.body--nimbus .flip-btn,
.body--martinique .flip-btn,
.body--home .flip-btn {
color: #fff;
}
@media (min-width: 800px) {
.flip-btn {
font-size: 16px;
padding-left: 36px;
}
}
.flip-btn::before {
content: '';
display: block;
position: absolute;
height: 1px;
background: currentColor;
left: 0;
width: 20px;
top: 50%;
margin-top: -1px;
transition: transform 0.3s cubic-bezier(0.42, 0.01, 0.23, 1);
-ms-transform-origin: left;
transform-origin: left;
}
@media (min-width: 800px) {
.flip-btn::before {
width: 30px;
}
}
.flip-btn span {
display: inline-block;
transition: transform 0.3s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.flip-btn:hover span {
-ms-transform: translateX(12px);
transform: translateX(12px);
}
@media (min-width: 800px) {
.flip-btn:hover span {
-ms-transform: translateX(18px);
transform: translateX(18px);
}
}
.flip-btn:hover::before {
-ms-transform: scaleX(1.333);
transform: scaleX(1.333);
}
.flip-btn--white {
color: #fff;
}
.flip-btn--grey {
color: #a0a0a0;
}
.body--dark .flip-btn--auto,
.body--primary .flip-btn--auto,
.body--nimbus .flip-btn--auto,
.body--martinique .flip-btn--auto,
.body--home .flip-btn--auto {
color: #fff;
}
.body--white .flip-btn--auto,
.body--shapes .flip-btn--auto,
.body--cloud .flip-btn--auto {
color: #8b5cdd;
}
.blockquote,
blockquote,
.case-study-header__column.-main {
font-family: "Calluna", Times, serif;
color: #8b5cdd;
}
/* stylelint-disable selector-no-type */
blockquote {
margin-bottom: 4.44444rem;
}
blockquote::before {
background-image: url("../img/svg/blockquote.svg");
background-repeat: no-repeat;
content: '';
display: block;
width: 53px;
height: 38px;
margin: 0 auto 4.44444rem;
}
/* stylelint-enable selector-no-type */
.blockquote-author {
font-family: "GT-Pressura-Mono", Courier, monospace;
color: #8b5cdd;
text-align: center;
font-size: 0.88889rem;
margin-bottom: 4.44444rem;
}
.blockquote-author::after {
content: '';
display: block;
margin: 4.44444rem auto 0;
}
.site-form .error-message, .table:not(.awards__table) th,
.textarea table th, .awards__table th, .case-study-stats__btn,
.caption {
font-family: "GT-Pressura-Mono", Courier, monospace;
font-size: 0.77778rem;
/* stylelint-disable selector-no-qualifying-type */
/* stylelint-enable selector-no-qualifying-type */
}
@media (min-width: 800px) {
.site-form .error-message, .table:not(.awards__table) th,
.textarea table th, .awards__table th, .case-study-stats__btn,
.caption {
font-size: 0.88889rem;
}
}
.site-form .-primary.error-message, .table:not(.awards__table) th.-primary,
.textarea table th.-primary, .awards__table th.-primary, .-primary.case-study-stats__btn,
.caption.-primary {
color: #8b5cdd;
}
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+php */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
/* stylelint-disable selector-no-qualifying-type */
/* stylelint-disable font-family-name-quotes */
:not(pre) > code,
code[class*='language-'],
pre[class*='language-'] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
/* stylelint-disable property-no-vendor-prefix */
tab-size: 4;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
/* stylelint-enable property-no-vendor-prefix */
}
/* stylelint-enable font-family-name-quotes */
@media print {
code[class*='language-'],
pre[class*='language-'] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*='language-'] {
padding: 20px;
margin: 0 0 2.22222rem;
overflow: auto;
}
:not(pre) > code,
pre[class*='language-'] {
background: #f5f5f5;
}
/* Inline code */
:not(pre) > code {
padding: 0.1em 0.3em;
white-space: normal;
}
/* stylelint-enable selector-no-qualifying-type */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: 0.7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #a67f59;
background: rgba(255, 255, 255, 0.5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function {
color: #dd4a68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
/*doc
---
title: Text
name: text
category: text
---
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur velit est, tempus vitae venenatis et, convallis sed risus. Donec vestibulum dui metus, et blandit purus placerat nec. Vivamus eget justo maximus turpis dignissim semper vestibulum dui metus et at mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur velit est, tempus vitae venenatis et, convallis sed risus. Donec vestibulum dui metus, et blandit purus placerat nec. Vivamus eget justo maximus turpis dignissim semper et at mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur velit est, tempus vitae venenatis et, convallis sed risus. Donec vestibulum dui metus, et blandit purus placerat nec. Vivamus eget justo maximus turpis dignissim semper vestibulum dui metus et at mi.
Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur velit est, tempus vitae venenatis et, convallis sed risus. Donec vestibulum dui metus, et blandit purus placerat nec. Vivamus eget justo maximus turpis dignissim semper et at mi.
- Lorem Ipsum, Dolor
Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
*/
/* stylelint-disable selector-no-type */
.textarea ul,
.textarea ol {
margin-left: 0;
list-style: none;
}
.textarea ul li {
position: relative;
padding-left: 24px;
}
.textarea ul li::before {
content: '\2022';
position: absolute;
top: 0;
left: 0;
}
.textarea ol {
counter-reset: i;
}
.textarea ol li {
counter-increment: i;
position: relative;
padding-left: 24px;
}
.textarea ol li::before {
content: counter(i) ".";
position: absolute;
top: 0;
left: 0;
}
.textarea hr {
box-sizing: content-box;
height: 0;
overflow: visible;
margin: 2.22222rem 0;
border: 0;
border-top: 1px solid #f2f1f1;
}
.textarea .btn {
margin-right: 20px;
}
/* stylelint-enable selector-no-type */
/*doc
---
title: Forms
name: forms
category: forms
---
The class of `
```
*/
/* stylelint-disable selector-no-type */
/* stylelint-disable selector-no-qualifying-type */
.site-form {
position: relative;
}
.site-form .input {
position: relative;
margin-bottom: 2.22222rem;
}
.site-form .input::before, .site-form .input::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
}
.site-form .input::before {
background: #f2f1f1;
}
.site-form .input::after {
background: #8b5cdd;
-ms-transform-origin: left;
transform-origin: left;
-ms-transform: scaleX(0);
transform: scaleX(0);
transition: transform 0.3s linear;
}
.site-form .input label,
.site-form .input input,
.site-form .input textarea {
display: block;
width: 100%;
}
.site-form .input label {
position: absolute;
top: 0;
left: 0;
line-height: 70px;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
transition: transform 0.3s, color 0.3s;
cursor: text;
}
.site-form .input input,
.site-form .input textarea {
-webkit-appearance: none;
appearance: none;
border: 0;
border-radius: 0;
font-size: 16px;
line-height: 1;
height: 70px;
padding: 0;
color: #8b5cdd;
background: none;
/* stylelint-disable selector-max-specificity */
/* stylelint-enable selector-max-specificity */
}
.site-form .input input:focus,
.site-form .input textarea:focus {
outline: 0;
}
.site-form .input input.form-error:focus ~ .error-message, .site-form .input input.form-error.-has-focused ~ .error-message,
.site-form .input textarea.form-error:focus ~ .error-message,
.site-form .input textarea.form-error.-has-focused ~ .error-message {
opacity: 0;
}
.site-form .input.textarea textarea {
min-height: 150px;
padding: 26px 0 0;
}
.site-form .input.-is-active::after {
-ms-transform: none;
transform: none;
}
.site-form .input.-is-active label {
-ms-transform: translateY(-70%) scale(0.8);
transform: translateY(-70%) scale(0.8);
color: #a0a0a0;
z-index: -1;
pointer-events: none;
}
.site-form .input.-has-text label {
opacity: 0;
}
.site-form .error-message {
color: #a0a0a0;
position: absolute;
top: 16px;
pointer-events: none;
opacity: 1;
transition: opacity 0.2s;
}
/* stylelint-enable selector-no-qualifying-type */
.site-form--light {
color: #fff;
}
.site-form--light .input::before {
background: rgba(255, 255, 255, 0.3);
}
.site-form--light .input input,
.site-form--light .input textarea {
color: #fff;
}
.site-form__thanks {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0;
opacity: 0;
animation: formThanks 0.4s 0.4s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
text-align: center;
transition: 0.3s opacity;
}
.site-form__thanks--hide {
opacity: 0;
}
@keyframes formThanks {
to {
opacity: 1;
}
}
.contact--active .site-form--sent {
opacity: 1;
transition-delay: 0.4s;
}
.site-form--sent .inputs,
.site-form--sent .submit {
pointer-events: none;
}
.site-form--sent .inputs {
animation: formInputsUp 0.4s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
.site-form--sent .submit {
animation: formSubmitDown 0.4s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
@keyframes formInputsUp {
to {
transform: translateY(-40px);
opacity: 0;
}
}
@keyframes formSubmitDown {
to {
transform: translateY(40px);
opacity: 0;
}
}
/* .site-form__errors {
@include clean-list;
margin-bottom: $spacing;
background-color: color(pastel);
padding: 20px;
}
.site-form__error {
@extend %caption;
} */
/* stylelint-enable selector-no-type */
/* stylelint-disable selector-no-universal, no-descending-specificity */
@media (min-width: 800px) {
.two-col {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
.two-col__col {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
padding-left: 20px;
padding-right: 20px;
}
.two-col__col > * {
margin-top: 0;
margin-bottom: 2.22222rem;
}
.two-col__col:last-child > *:last-child {
margin-bottom: 0;
}
@media (min-width: 800px) {
.two-col__col > *:last-child {
margin-bottom: 0;
}
}
.two-col__col--thin {
-ms-flex-preferred-size: 33.3333333%;
flex-basis: 33.3333333%;
}
@media (max-width: 799px) {
.two-col__col--thin {
width: 50%;
}
}
@media (max-width: 599px) {
.two-col__col--thin {
width: 66.6666666%;
}
}
/**
* Three column
*/
.three-col {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: justify;
justify-content: space-between;
margin-left: -50px;
margin-right: -50px;
}
.three-col__col {
-ms-flex: 0 0 33.3333333%;
flex: 0 0 33.3333333%;
padding: 0 50px;
}
.three-col__col:nth-child(n+4) {
margin-top: 100px;
}
.three-col__col > *:last-child {
margin-bottom: 0;
}
/* stylelint-enable selector-no-universal, no-descending-specificity */
.table:not(.awards__table),
.textarea table {
display: block;
width: calc(100% + 40px);
color: #8b5cdd;
line-height: 1.3;
margin-left: -20px;
margin-right: -20px;
}
.table:not(.awards__table) thead,
.table:not(.awards__table) tbody,
.textarea table thead,
.textarea table tbody {
display: block;
}
.table:not(.awards__table) tr,
.textarea table tr {
display: -ms-flexbox;
display: flex;
}
.table:not(.awards__table) th,
.table:not(.awards__table) td,
.textarea table th,
.textarea table td {
text-align: left;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
margin: 0 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.table:not(.awards__table) th,
.textarea table th {
font-weight: 400;
padding-bottom: 30px;
}
.table:not(.awards__table) td,
.textarea table td {
padding: 20px 0;
}
.awards {
position: relative;
}
.awards__table {
width: 100%;
table-layout: fixed;
color: #8b5cdd;
line-height: 1.3;
}
.awards__table th {
font-weight: 400;
width: 25%;
}
@media (max-width: 999px) {
.awards__table th:first-child {
width: 120px;
}
}
@media (max-width: 599px) {
.awards__table th:first-child {
width: 52px;
}
}
.awards__table th,
.awards__table td {
text-align: left;
vertical-align: top;
padding: 0 20px;
}
.awards__table th span,
.awards__table td span {
display: block;
padding: 20px 0;
}
.awards__table th span {
padding-top: 0;
}
.awards__table td span {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
@media (max-width: 599px) {
.awards__table th:nth-child(3),
.awards__table .awards__org {
display: none;
}
}
.awards__table .awards__type span::before {
content: attr(data-org) ": ";
}
.awards__table tbody tr:last-child td span {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.awards__count {
position: absolute;
z-index: 0;
font-size: 800px;
color: rgba(197, 174, 237, 0.1);
left: 0;
right: 0;
text-align: center;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 1;
}
/**
* If 2 or more elements use the same SVG background, and it's 'above the fold', add it here,
* and then use @extend to add it to your element
* It'll reduce the filesize of the compiled CSS file
**/
.blockquote-author::after, .case-study-stats__columns::after {
background-image: url("../img/svg/squiggle.svg");
background-repeat: no-repeat;
width: 79px;
height: 8px;
}
/* Components */
.social-icons {
list-style: none;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-align: center;
align-items: center;
font-size: 40px;
}
.social-icons li {
width: 1.08em;
height: 1.08em;
overflow: hidden;
opacity: 0;
transition: opacity 0.6s;
}
.social-icons li:nth-child(1) {
transition-delay: 0.3s;
}
.body--home .social-icons li:nth-child(1) {
transition-delay: 1.3s;
}
.social-icons li:nth-child(2) {
transition-delay: 0.2s;
}
.body--home .social-icons li:nth-child(2) {
transition-delay: 1.2s;
}
.social-icons li:nth-child(3) {
transition-delay: 0.1s;
}
.body--home .social-icons li:nth-child(3) {
transition-delay: 1.1s;
}
.body--home .social-icons li:nth-child(4) {
transition-delay: 1s;
}
.fonts-loaded.hero-loaded .social-icons li,
body:not(.landing) .social-icons li {
opacity: 1;
}
.social-icons--h {
max-width: 7.5em;
}
.social-icons--v {
-ms-flex-direction: column;
flex-direction: column;
}
.social-icons--v li {
margin-top: 0.5em;
}
.social-icon {
position: relative;
display: block;
width: 1em;
height: 1em;
text-decoration: none;
margin: 0.04em 0 0 0.04em;
}
.social-icon__icon {
height: 0.625em;
display: block;
position: absolute;
left: 0;
width: 100%;
top: 0.175em;
fill: #fff;
}
.social-icon__ring {
width: 1em;
height: 1em;
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
transition: transform 0.2s ease-out, opacity 0.5s;
opacity: 0.5;
}
.social-icon__ring circle {
fill: none;
stroke: #fff;
stroke-width: 7;
stroke-dasharray: 565.486677646;
stroke-dashoffset: 565.486677646;
}
.social-icon__ring--big {
-ms-transform: rotate(-90deg) scale(1.1);
transform: rotate(-90deg) scale(1.1);
opacity: 1;
}
.site-header {
position: relative;
z-index: 100;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.site-logo {
display: block;
position: fixed;
z-index: 100;
top: 30px;
left: 30px;
width: 135px;
height: 20px;
opacity: 0;
transition: opacity 0.6s 0.4s;
/* stylelint-disable selector-no-type */
/* stylelint-enable */
/* stylelint-disable selector-no-qualifying-type */
/* stylelint-enable selector-no-qualifying-type */
}
.body--home .site-logo {
transition-delay: 1.4s;
}
.fonts-loaded.hero-loaded .site-logo,
body:not(.landing) .site-logo {
opacity: 1;
}
.site-logo path {
transition: fill 0.4s;
}
.body--white:not(.-mobile-nav-active) .site-logo path,
.body--cloud:not(.-mobile-nav-active) .site-logo path,
.body--shapes:not(.-mobile-nav-active) .site-logo path,
.-page-loading .site-logo path {
fill: #8b5cdd;
}
.body--martinique:not(.-mobile-nav-active) .site-logo path,
.-page-loading .site-logo path {
fill: #fff;
}
body.-split-modal-active:not(.-split-modal-leaving) .site-logo path {
transition-delay: 0.3s;
fill: #8b5cdd;
}
body.-split-modal-leaving .site-logo path {
transition-delay: 0.6s;
}
@media (min-width: 950px) {
.site-logo {
top: 180px;
left: 40px;
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-ms-transform-origin: top left;
transform-origin: top left;
}
}
@media (min-width: 1200px) {
.site-logo {
top: 220px;
left: 80px;
}
}
@media (min-width: 1800px) {
.site-logo {
top: 250px;
left: 120px;
}
}
@media (min-width: 2120px) {
.site-logo {
left: calc((50% - 800px - 20px) / 2);
}
}
@media (min-width: 950px) {
.body--events_index .site-logo {
top: 224px;
}
}
@media (min-width: 1800px) {
.body--events_index .site-logo {
top: 250px;
}
}
.body--contact .site-footer,
.body--products_index .site-footer {
display: none;
}
.body--contact .site-nav {
display: none;
}
.site-header__email {
/* stylelint-disable declaration-block-no-duplicate-properties */
display: inline-block;
/* stylelint-enable declaration-block-no-duplicate-properties */
position: fixed;
bottom: 76px;
right: -22px;
-ms-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-size: 0.88889rem;
opacity: 0;
transition: opacity 0.6s 2.2s;
}
.body--dark .site-header__email,
.body--primary .site-header__email,
.body--nimbus .site-header__email,
.body--martinique .site-header__email,
.body--home .site-header__email {
color: #fff;
}
.body--white .site-header__email,
.body--shapes .site-header__email,
.body--cloud .site-header__email {
color: #8b5cdd;
}
.fonts-loaded.hero-loaded .site-header__email,
body:not(.landing) .site-header__email {
opacity: 1;
}
@media (min-width: 1200px) {
.site-header__email {
right: 18px;
bottom: 119px;
}
}
@media (min-width: 1800px) {
.site-header__email {
right: 57px;
}
}
@media (min-width: 2120px) {
.site-header__email {
right: calc((50% - 800px - 149px) / 2);
}
}
.body--white .site-header__email,
.body--cloud .site-header__email,
.body--shapes .site-header__email,
.-page-loading .site-header__email {
color: #8b5cdd;
}
.body--case_studies_index .site-header__email,
.body--products_index .site-header__email,
.body--events_index .site-header__email {
color: #fff;
}
.site-header__email::after {
display: none;
}
@media (max-width: 949px) {
.site-header__email {
right: -31px;
bottom: 88px;
color: white !important;
/* stylelint-disable-line */
opacity: 0 !important;
/* stylelint-disable-line */
pointer-events: none;
transition: opacity 0.2s;
}
.-mobile-nav-active .site-header__email {
opacity: 1 !important;
/* stylelint-disable-line */
pointer-events: auto;
transition: opacity 0.4s 0.3s;
}
}
@media (max-width: 799px) {
.site-header__email {
right: -26px;
}
}
.site-header__email--hidden {
display: none;
}
.header-social {
position: fixed;
z-index: 100;
bottom: 35px;
left: 28px;
margin: 0;
display: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.header-social .social-icon__icon {
transition: fill 0.4s;
/* stylelint-disable selector-no-qualifying-type */
/* stylelint-enable selector-no-qualifying-type */
}
.body--white .header-social .social-icon__icon,
.body--cloud .header-social .social-icon__icon,
.body--shapes .header-social .social-icon__icon,
.-page-loading .header-social .social-icon__icon {
fill: #8b5cdd;
}
.body--martinique .header-social .social-icon__icon {
fill: #fff;
}
body.-split-modal-active:not(.-split-modal-leaving) .header-social .social-icon__icon {
transition-delay: 0.2s;
fill: #8b5cdd;
}
body.-split-modal-leaving .header-social .social-icon__icon {
transition-delay: 0.6s;
}
.header-social .social-icon__ring circle {
/* stylelint-disable selector-no-qualifying-type */
/* stylelint-enable selector-no-qualifying-type */
}
.body--white .header-social .social-icon__ring circle,
.body--cloud .header-social .social-icon__ring circle,
.body--shapes .header-social .social-icon__ring circle {
stroke: #8b5cdd;
}
body.-split-modal-active:not(.-split-modal-leaving) .header-social .social-icon__ring circle {
stroke: #8b5cdd;
}
@media (min-width: 950px) and (min-height: 600px) {
.header-social {
display: block;
}
}
@media (min-width: 1200px) {
.header-social {
left: 68px;
bottom: 79px;
}
}
@media (min-width: 1800px) {
.header-social {
left: 108px;
}
}
@media (min-width: 2120px) {
.header-social {
left: calc((50% - 800px - 43px) / 2);
}
}
/**
* Light background version
*/
.body--white,
.body--cloud,
.body--shapes {
/* stylelint-disable selector-max-specificity */
/* stylelint-enable selector-max-specificity */
}
.body--white .site-header__btn,
.body--cloud .site-header__btn,
.body--shapes .site-header__btn {
box-shadow: inset 0 0 0 2px rgba(139, 92, 221, 0.3);
background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #8b5cdd 50%, #8b5cdd 100%);
color: #8b5cdd;
}
.body--white .site-header__btn:hover,
.body--cloud .site-header__btn:hover,
.body--shapes .site-header__btn:hover {
color: #fff;
}
@media (min-width: 950px) {
.body--white .site-nav__link,
.body--cloud .site-nav__link,
.body--shapes .site-nav__link {
color: #333;
}
}
@media (min-width: 950px) {
.body--white .site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact,
.body--cloud .site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact,
.body--shapes .site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact {
color: #8b5cdd;
box-shadow: inset 0 0 0 2px rgba(139, 92, 221, 0.3);
background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #8b5cdd 50%, #8b5cdd 100%);
}
.body--white .site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact:hover, .body--white .site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact:focus,
.body--cloud .site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact:hover,
.body--cloud .site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact:focus,
.body--shapes .site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact:hover,
.body--shapes .site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact:focus {
box-shadow: inset 0 0 0 2px #8b5cdd;
}
.body--white .site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact:hover,
.body--cloud .site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact:hover,
.body--shapes .site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact:hover {
color: #fff;
}
}
.body--white .site-nav__number,
.body--cloud .site-nav__number,
.body--shapes .site-nav__number {
color: #fff;
}
.company-intro {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
.company-intro .site-container {
width: 100%;
}
.company-intro__content {
position: relative;
color: #8b5cdd;
opacity: 0;
-ms-transform: translateY(20px);
transform: translateY(20px);
transition: transform 0.6s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.6s;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
@media (min-width: 600px) {
.company-intro__content {
-ms-transform: translateY(40px);
transform: translateY(40px);
}
}
.company-intro__content.-in-view {
opacity: 1;
-ms-transform: none;
transform: none;
}
.company-intro__content p {
max-width: 1370px;
position: relative;
z-index: 2;
font-family: "Calluna", Times, serif;
margin-right: auto;
margin-left: auto;
}
.company-intro__content p strong {
border-bottom: solid 1px #d1bef1;
}
.company-intro__content p strong:nth-child(1) {
border-bottom: none;
}
.company-intro__content p a {
color: inherit;
text-decoration: none;
background: linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(rgba(139, 92, 221, 0.3), rgba(139, 92, 221, 0.3)), linear-gradient(#8b5cdd, #8b5cdd);
background-size: 0.05em 1px, 0.05em 1px, 1px 1px, 0 1px;
background-repeat: no-repeat, no-repeat, repeat-x, no-repeat;
background-position-y: 92%, 92%, 92%, 92%;
background-position-x: 0%, 100%, 0%, 0%;
transition: background-size 0.2s linear;
}
.company-intro__content p a:hover {
background-size: 0.05em 1px, 0.05em 1px, 1px 1px, 100% 1px;
}
/**
* Nav specific stuff
* Note: despite indentation, these are *not* nested & shouldn't be
*/
.site-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
height: 80px;
}
@media (min-width: 950px) {
.site-nav {
height: auto;
padding-top: 50px;
background-color: transparent;
font-family: "GT-Pressura-Mono", Courier, monospace;
}
}
@media (min-width: 1400px) {
.site-nav {
padding-top: 70px;
}
}
@media (min-width: 1800px) {
.site-nav {
padding-top: 100px;
}
}
@media (min-width: 950px) {
.body--events_index .site-nav {
padding-top: 80px;
}
}
@media (min-width: 1800px) {
.body--events_index .site-nav {
padding-top: 100px;
}
}
.site-nav__list {
margin-bottom: 0;
margin-left: 0;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
position: relative;
margin: 0;
will-change: transform, opacity;
}
.site-nav__list > li {
list-style: none;
}
@media (min-width: 950px) {
.site-nav__list {
display: block;
left: 0;
transition: transform 0.4s 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.4s 0.4s;
/* stylelint-disable selector-no-qualifying-type */
/* stylelint-enable selector-no-qualifying-type */
}
body.-page-loading .site-nav__list {
opacity: 0;
pointer-events: none;
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.4s;
}
.site-nav--contact-page .site-nav__list {
display: none;
}
}
@media (max-width: 949px) {
.site-nav__list {
background: #8b5cdd;
position: fixed;
will-change: transform, opacity;
overflow-y: auto;
overflow-x: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding-top: 100px;
padding-bottom: 100px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.4s;
}
.site-nav__list::before, .site-nav__list::after {
content: '';
display: block;
position: absolute;
z-index: -1;
opacity: 0;
transition: all 0.7s 0.6s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.site-nav__list::before {
background: url("../img/svg/curve-black.svg") top left no-repeat;
width: 246.08px;
height: 104.968px;
background-size: cover;
top: 30%;
left: 0;
margin-left: -130px;
-ms-transform: rotate(180deg) translateX(40px);
transform: rotate(180deg) translateX(40px);
transition-delay: 0.4s;
}
}
@media (max-width: 949px) and (min-width: 600px) {
.site-nav__list::before {
width: 307.6px;
height: 131.21px;
}
}
@media (max-width: 949px) {
.site-nav__list::after {
border-radius: 50%;
background: #d1bef1;
width: 320px;
height: 320px;
top: 40%;
right: 0;
margin-right: -140px;
-ms-transform: translateX(40px);
transform: translateX(40px);
}
}
@media (max-width: 949px) and (min-width: 700px) {
.site-nav__list::after {
width: 400px;
height: 400px;
top: 50%;
margin-right: -170px;
}
}
@media (max-width: 949px) {
.site-nav.-visible .site-nav__list {
-ms-transform: none;
transform: none;
opacity: 1;
}
.site-nav.-visible .site-nav__list::before {
opacity: 0.1;
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.site-nav.-visible .site-nav__list::after {
opacity: 0.3;
-ms-transform: none;
transform: none;
}
}
@media (min-width: 950px) and (max-width: 1200px) {
.site-nav:not(.-in-v):not(.-out-v) .site-nav__list {
padding-left: 60px;
padding-right: 158px;
}
}
@media (min-width: 950px) {
.site-nav__squiggle {
display: none;
}
}
.site-nav .big-squiggle {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 6;
bottom: 10%;
left: 0;
margin-left: -25px;
width: 120px;
opacity: 0;
transition: opacity 0.7s 0.6s;
}
.site-nav .big-squiggle div {
transform: translate3d(-33%, 0, 0);
transition: transform 0.7s 0.55s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.-mobile-nav-active .site-nav .big-squiggle {
opacity: 1;
}
.-mobile-nav-active .site-nav .big-squiggle div {
transform: translate3d(0, 0, 0);
}
@media (min-width: 600px) {
.site-nav .big-squiggle {
width: 180px;
}
}
@media (min-width: 700px) {
.site-nav .big-squiggle {
margin-left: 60px;
}
}
@media (min-width: 950px) {
.site-nav .big-squiggle {
display: none;
}
}
.site-nav__item {
display: inline-block;
padding: 0 25px;
}
@media (max-width: 949px) {
.site-nav__item {
display: block;
padding: 10px 30px;
-ms-transform: translateY(30px);
transform: translateY(30px);
opacity: 0;
transition: transform 0.3s 0.3s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.3s 0.3s;
}
.site-nav.-visible .site-nav__item {
-ms-transform: none;
transform: none;
opacity: 1;
}
.site-nav__item:nth-child(2) {
transition-delay: 0.35s, 0.35s;
}
.site-nav__item:nth-child(3) {
transition-delay: 0.4s, 0.4s;
}
.site-nav__item:nth-child(4) {
transition-delay: 0.45s, 0.45s;
}
.site-nav__item:nth-child(5) {
transition-delay: 0.5s, 0.5s;
}
.site-nav__item:nth-child(6) {
transition-delay: 0.55s, 0.55s;
}
.site-nav__item:nth-child(7) {
transition-delay: 0.6s, 0.6s;
}
.site-nav__item:nth-child(8) {
transition-delay: 0.65s, 0.65s;
}
.site-nav__item:nth-child(9) {
transition-delay: 0.7s, 0.7s;
}
.site-nav__item:first-child {
margin-top: auto;
}
.site-nav__item:nth-last-child(2) {
margin-bottom: auto;
}
}
@media (min-width: 950px) {
.site-nav__item {
opacity: 0;
transition: opacity 0.6s;
}
.site-nav__item:nth-child(1) {
transition-delay: 0.5s;
}
.body--home .site-nav__item:nth-child(1) {
transition-delay: 1.5s;
}
.site-nav__item:nth-child(2) {
transition-delay: 0.6s;
}
.body--home .site-nav__item:nth-child(2) {
transition-delay: 1.6s;
}
.site-nav__item:nth-child(3) {
transition-delay: 0.7s;
}
.body--home .site-nav__item:nth-child(3) {
transition-delay: 1.7s;
}
.site-nav__item:nth-child(4) {
transition-delay: 0.8s;
}
.body--home .site-nav__item:nth-child(4) {
transition-delay: 1.8s;
}
.site-nav__item:nth-child(5) {
transition-delay: 0.9s;
}
.body--home .site-nav__item:nth-child(5) {
transition-delay: 1.9s;
}
.site-nav__item:nth-child(6) {
transition-delay: 1s;
}
.body--home .site-nav__item:nth-child(6) {
transition-delay: 2s;
}
.site-nav__item:nth-child(7) {
transition-delay: 1.1s;
}
.body--home .site-nav__item:nth-child(7) {
transition-delay: 2.1s;
}
.site-nav__item:nth-child(8) {
transition-delay: 1.2s;
}
.body--home .site-nav__item:nth-child(8) {
transition-delay: 2.2s;
}
.fonts-loaded.hero-loaded .site-nav__item,
body:not(.landing) .site-nav__item {
opacity: 1;
}
}
@media (min-width: 950px) {
.site-nav:not(.-in-v):not(.-out-v) .site-nav__item.-contact {
position: absolute;
top: -12px;
right: 40px;
padding: 0;
/* commented out for stylelint rule: declaration-block-no-ignored-properties */
/* vertical-align: top; */
}
}
@media (min-width: 950px) and (min-width: 1200px) {
.site-nav:not(.-in-v):not(.-out-v) .site-nav__item.-contact {
top: -20px;
}
}
@media (min-width: 1400px) {
.site-nav:not(.-in-v):not(.-out-v) .site-nav__item.-contact {
right: 60px;
}
}
.site-nav__link {
display: inline-block;
color: #fff;
position: relative;
transition: color 0.4s;
/* stylelint-disable selector-max-specificity */
/* stylelint-enable selector-max-specificity */
}
@media (max-width: 949px) {
.site-nav__link {
line-height: 1;
}
}
@media (min-width: 950px) {
.site-nav__link {
font-size: 0.77778rem;
}
.site-nav__link span:not(.site-nav__number)::after {
content: '';
display: block;
background-color: #8b5cdd;
height: 1px;
-ms-transform-origin: left;
transform-origin: left;
-ms-transform: scaleX(0);
transform: scaleX(0);
transition: transform 0.2s linear;
}
.body--martinique .site-nav__link span:not(.site-nav__number)::after {
background-color: #fff;
}
}
@media (min-width: 1200px) {
.site-nav__link {
font-size: 0.88889rem;
}
}
.site-nav:not(.-in-v):not(.-out-v) .site-nav__link:hover span::after,
.site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-current span::after {
-ms-transform: none;
transform: none;
}
@media (min-width: 950px) {
.site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact, .site-nav__link.-close {
opacity: 0;
-webkit-appearance: none;
appearance: none;
display: inline-block;
vertical-align: top;
overflow: hidden;
font-size: 0.88889rem;
text-align: center;
padding: 12px 0;
width: 118px;
border: 0;
outline: 0;
background-color: transparent;
background-size: 100% 200%;
background-repeat: no-repeat;
background-position: 0 0;
transition: color 0.3s, background-position 0.3s, box-shadow 0.3s, opacity 0.4s;
}
.site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact:hover, .site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact:focus, .site-nav__link.-close:hover, .site-nav__link.-close:focus {
box-shadow: inset 0 0 0 2px #8b5cdd;
color: #fff;
}
.site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact:hover, .site-nav__link.-close:hover {
background-position: 0 100%;
}
.site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact span::after, .site-nav__link.-close span::after {
display: none;
}
}
@media (min-width: 1200px) {
.site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact, .site-nav__link.-close {
padding: 22px 0;
width: 158px;
}
}
@media (min-width: 950px) {
.site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact {
color: #fff;
background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #333 50%, #333 100%);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact:hover, .site-nav:not(.-in-v):not(.-out-v) .site-nav__link.-contact:focus {
box-shadow: inset 0 0 0 2px #333;
}
}
.site-nav__link.-close {
position: absolute;
z-index: 4;
}
@media (max-width: 949px) {
.site-nav__link.-close {
top: 25px;
right: 26px;
width: 30px;
height: 30px;
-webkit-appearance: none;
appearance: none;
padding: 0;
margin: 0;
border: 0;
background: none;
}
.site-nav__link.-close::before, .site-nav__link.-close::after {
content: '';
display: block;
position: absolute;
width: 20px;
height: 2px;
background: #333 !important;
/* stylelint-disable-line */
top: 14px;
left: 5px;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.site-nav__link.-close::before {
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.site-nav__link.-close::after {
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.site-nav__link.-close span {
display: none;
}
}
@media (min-width: 950px) {
.site-nav__link.-close {
top: 38px;
right: 40px;
color: #8b5cdd;
background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #8b5cdd 50%, #8b5cdd 100%);
box-shadow: inset 0 0 0 2px rgba(139, 92, 221, 0.3);
}
.site-nav__link.-close:hover, .site-nav__link.-close:focus {
box-shadow: inset 0 0 0 2px #8b5cdd;
}
}
@media (min-width: 1100px) {
.site-nav__link.-close {
color: #fff;
background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, #333 50%, #333 100%);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.site-nav__link.-close:hover, .site-nav__link.-close:focus {
box-shadow: inset 0 0 0 2px #333;
}
}
@media (min-width: 1200px) {
.site-nav__link.-close {
top: 30px;
}
}
@media (min-width: 1400px) {
.site-nav__link.-close {
top: 50px;
right: 60px;
}
}
@media (min-width: 1800px) {
.site-nav__link.-close {
top: 79px;
}
}
.site-nav__link.-visible {
/* stylelint-disable declaration-no-important */
opacity: 1 !important;
z-index: 1 !important;
/* stylelint-enable declaration-no-important */
}
.site-nav__number {
display: inline-block;
text-align: center;
width: 21px;
height: 21px;
position: absolute;
top: -4px;
right: -25px;
font-size: 0.72222rem;
line-height: 19px;
border-radius: 50%;
background-color: #8b5cdd;
}
@media (min-width: 768px) {
.site-nav__number {
top: -20px;
right: -20px;
}
}
@media (max-width: 1199px) {
.site-nav__number {
display: none;
}
}
.nav-toggle {
display: block;
width: 32px;
height: 20px;
position: absolute;
z-index: 1;
top: 30px;
right: 30px;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.nav-toggle::before, .nav-toggle::after {
content: '';
display: block;
position: absolute;
right: 0;
height: 2px;
background: #fff;
-ms-transform-origin: right;
transform-origin: right;
}
.nav-toggle::before {
width: 25px;
top: 0;
}
.nav-toggle::after {
width: 20px;
bottom: 0;
}
@media (min-width: 950px) {
.nav-toggle {
display: none;
}
}
.nav-toggle span:not(.sr-only) {
display: block;
position: absolute;
top: 9px;
right: 0;
width: 32px;
height: 2px;
background: #fff;
}
.body--home .site-nav__link::after,
.body--dark .site-nav__link::after {
background-color: #fff;
}
.body--white:not(.-mobile-nav-active) .site-nav,
.body--cloud:not(.-mobile-nav-active) .site-nav,
.body--shapes:not(.-mobile-nav-active) .site-nav {
background-color: #fff;
}
@media (min-width: 950px) {
.body--white:not(.-mobile-nav-active) .site-nav,
.body--cloud:not(.-mobile-nav-active) .site-nav,
.body--shapes:not(.-mobile-nav-active) .site-nav {
background-color: transparent;
}
}
.body--white:not(.-mobile-nav-active) .nav-toggle,
.body--cloud:not(.-mobile-nav-active) .nav-toggle,
.body--shapes:not(.-mobile-nav-active) .nav-toggle {
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.body--white:not(.-mobile-nav-active) .nav-toggle::before, .body--white:not(.-mobile-nav-active) .nav-toggle::after,
.body--white:not(.-mobile-nav-active) .nav-toggle span:not(.sr-only),
.body--cloud:not(.-mobile-nav-active) .nav-toggle::before,
.body--cloud:not(.-mobile-nav-active) .nav-toggle::after,
.body--cloud:not(.-mobile-nav-active) .nav-toggle span:not(.sr-only),
.body--shapes:not(.-mobile-nav-active) .nav-toggle::before,
.body--shapes:not(.-mobile-nav-active) .nav-toggle::after,
.body--shapes:not(.-mobile-nav-active) .nav-toggle span:not(.sr-only) {
background: #8b5cdd;
}
/**
* Nav toggle transition
*/
/* stylelint-disable time-no-imperceptible */
.nav-toggle.-active {
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.nav-toggle.-active::before {
animation: nav-toggle-top-1 0.3s forwards, nav-toggle-top-2 0.3s 0.3s forwards;
}
.nav-toggle.-active::after {
animation: nav-toggle-top-1 0.3s 0.1s forwards, nav-toggle-bottom 0.3s 0.4s forwards;
}
.nav-toggle.-active span:not(.sr-only) {
animation: nav-toggle-middle 0.3s 0.2s forwards;
}
.nav-toggle.-out {
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.nav-toggle.-out::before {
opacity: 1;
-ms-transform: translate(-18px, 2px) rotate(-135deg) scaleX(0.8);
transform: translate(-18px, 2px) rotate(-135deg) scaleX(0.8);
animation: nav-toggle-top-2 0.3s forwards reverse, nav-toggle-top-1 0.3s 0.3s forwards reverse;
}
.nav-toggle.-out::after {
opacity: 1;
-ms-transform: translate(-18px, -2px) rotate(135deg) scaleX(1);
transform: translate(-18px, -2px) rotate(135deg) scaleX(1);
animation: nav-toggle-bottom 0.3s 0.1s forwards reverse, nav-toggle-top-1 0.3s 0.4s forwards reverse;
}
.nav-toggle.-out span:not(.sr-only) {
-ms-transform: translateX(-80%) scaleX(0);
transform: translateX(-80%) scaleX(0);
opacity: 0;
animation: nav-toggle-middle 0.3s 0.2s forwards reverse;
}
/* stylelint-enable time-no-imperceptible */
@keyframes nav-toggle-top-1 {
from {
transform: none;
opacity: 1;
}
to {
transform: translateX(-120%) scaleX(0);
opacity: 0;
}
}
@keyframes nav-toggle-top-2 {
from {
opacity: 0;
transform: translate(-18px, 2px) rotate(-135deg) scaleX(0);
}
to {
opacity: 1;
transform: translate(-18px, 2px) rotate(-135deg) scaleX(0.8);
}
}
@keyframes nav-toggle-bottom {
from {
opacity: 0;
transform: translate(-18px, -2px) rotate(135deg) scaleX(0);
}
to {
opacity: 1;
transform: translate(-18px, -2px) rotate(135deg) scaleX(1);
}
}
@keyframes nav-toggle-middle {
from {
transform: none;
opacity: 1;
}
to {
transform: translateX(-80%) scaleX(0);
opacity: 0;
}
}
@media (min-width: 950px) {
.site-nav.-out-h {
animation: navFadeOut 0.4s forwards;
}
.site-nav.-in-h {
animation: navFadeIn 0.4s forwards;
}
.site-nav.-in-v,
.site-nav.-out-v {
text-align: right;
line-height: 1.4;
left: auto;
right: -10px;
width: auto;
}
}
@media (min-width: 950px) and (min-width: 1200px) {
.site-nav.-in-v,
.site-nav.-out-v {
right: 25px;
}
}
@media (min-width: 950px) and (min-width: 1800px) {
.site-nav.-in-v,
.site-nav.-out-v {
right: 65px;
}
}
@media (min-width: 950px) and (min-width: 2120px) {
.site-nav.-in-v,
.site-nav.-out-v {
right: calc((50% - 800px - 130px) / 2);
}
}
@media (min-width: 950px) {
.site-nav.-in-v .site-nav__item,
.site-nav.-out-v .site-nav__item {
display: list-item;
}
.site-nav.-in-v .site-nav__item:nth-child(2) span,
.site-nav.-out-v .site-nav__item:nth-child(2) span {
animation-delay: 0.05s;
}
.site-nav.-in-v .site-nav__item:nth-child(3) span,
.site-nav.-out-v .site-nav__item:nth-child(3) span {
animation-delay: 0.1s;
}
.site-nav.-in-v .site-nav__item:nth-child(4) span,
.site-nav.-out-v .site-nav__item:nth-child(4) span {
animation-delay: 0.15s;
}
.site-nav.-in-v .site-nav__item:nth-child(5) span,
.site-nav.-out-v .site-nav__item:nth-child(5) span {
animation-delay: 0.2s;
}
.site-nav.-in-v .site-nav__item:nth-child(6) span,
.site-nav.-out-v .site-nav__item:nth-child(6) span {
animation-delay: 0.25s;
}
.site-nav.-in-v .site-nav__item:nth-child(7) span,
.site-nav.-out-v .site-nav__item:nth-child(7) span {
animation-delay: 0.3s;
}
.site-nav.-in-v .site-nav__item:nth-child(8) span,
.site-nav.-out-v .site-nav__item:nth-child(8) span {
animation-delay: 0.35s;
}
.site-nav.-in-v .site-nav__link,
.site-nav.-out-v .site-nav__link {
overflow: hidden;
}
.site-nav.-in-v .site-nav__link span,
.site-nav.-out-v .site-nav__link span {
display: inline-block;
-ms-transform: translateX(100%);
transform: translateX(100%);
animation: navLinkSlideIn 0.2s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
.site-nav.-out-v .site-nav__item:nth-child(8) span {
animation-delay: 0s;
}
.site-nav.-out-v .site-nav__item:nth-child(7) span {
animation-delay: 0.05s;
}
.site-nav.-out-v .site-nav__item:nth-child(6) span {
animation-delay: 0.1s;
}
.site-nav.-out-v .site-nav__item:nth-child(5) span {
animation-delay: 0.15s;
}
.site-nav.-out-v .site-nav__item:nth-child(4) span {
animation-delay: 0.2s;
}
.site-nav.-out-v .site-nav__item:nth-child(3) span {
animation-delay: 0.25s;
}
.site-nav.-out-v .site-nav__item:nth-child(2) span {
animation-delay: 0.3s;
}
.site-nav.-out-v .site-nav__item:nth-child(1) span {
animation-delay: 0.35s;
}
.site-nav.-out-v .site-nav__link span {
-ms-transform: translateX(0);
transform: translateX(0);
animation: navLinkSlideOut 0.2s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
}
@keyframes navFadeOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-40px);
}
}
@keyframes navFadeIn {
from {
opacity: 0;
transform: translateY(-40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes navLinkSlideIn {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes navLinkSlideOut {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@media (min-width: 950px) {
.site-nav.-in-v .site-nav__link,
.site-nav.-out-v .site-nav__link {
color: #a0a0a0;
}
.body--dark .site-nav.-in-v .site-nav__link,
.body--primary .site-nav.-in-v .site-nav__link,
.body--nimbus .site-nav.-in-v .site-nav__link,
.body--martinique .site-nav.-in-v .site-nav__link,
.body--home .site-nav.-in-v .site-nav__link, .body--dark
.site-nav.-out-v .site-nav__link,
.body--primary
.site-nav.-out-v .site-nav__link,
.body--nimbus
.site-nav.-out-v .site-nav__link,
.body--martinique
.site-nav.-out-v .site-nav__link,
.body--home
.site-nav.-out-v .site-nav__link {
color: #eaeaea;
}
.body--products_index .site-nav.-in-v .site-nav__link,
.body--events__index .site-nav.-in-v .site-nav__link, .body--products_index
.site-nav.-out-v .site-nav__link,
.body--events__index
.site-nav.-out-v .site-nav__link {
color: #fff;
}
.body--products_index .site-nav.-in-v .site-nav__link::after,
.body--events__index .site-nav.-in-v .site-nav__link::after, .body--products_index
.site-nav.-out-v .site-nav__link::after,
.body--events__index
.site-nav.-out-v .site-nav__link::after {
border-color: #fff;
}
.body--products_index .site-nav.-in-v .site-nav__link:hover,
.body--events__index .site-nav.-in-v .site-nav__link:hover, .body--products_index
.site-nav.-out-v .site-nav__link:hover,
.body--events__index
.site-nav.-out-v .site-nav__link:hover {
color: #fff;
}
.site-nav.-in-v .site-nav__item {
overflow: visible;
}
.site-nav.-in-v .site-nav__link {
position: relative;
}
.site-nav.-in-v .site-nav__link .site-nav__number {
display: none;
}
.site-nav.-in-v .site-nav__link::after {
content: '';
border-top: 1px solid #333;
width: 0;
display: inline-block;
-ms-transform: translateY(-4px);
transform: translateY(-4px);
transition: all 0.2s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.body--dark .site-nav.-in-v .site-nav__link::after,
.body--primary .site-nav.-in-v .site-nav__link::after,
.body--nimbus .site-nav.-in-v .site-nav__link::after,
.body--martinique .site-nav.-in-v .site-nav__link::after,
.body--home .site-nav.-in-v .site-nav__link::after {
border-color: #fff;
}
.site-nav.-in-v .site-nav__link:hover {
color: #333;
}
.body--dark .site-nav.-in-v .site-nav__link:hover,
.body--primary .site-nav.-in-v .site-nav__link:hover,
.body--nimbus .site-nav.-in-v .site-nav__link:hover,
.body--martinique .site-nav.-in-v .site-nav__link:hover,
.body--home .site-nav.-in-v .site-nav__link:hover {
color: #fff;
}
.site-nav.-in-v .site-nav__link:hover::after {
margin-left: 9px;
width: 15px;
}
}
.hero {
height: auto;
min-height: calc(80vh - 89px);
margin-top: 80px;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
.hero.-home {
min-height: calc(100vh - 80px);
}
@media (min-width: 950px) {
.hero {
margin-top: 89px;
}
.hero.-home {
min-height: calc(100vh - 89px);
}
}
@media (min-width: 1400px) {
.hero {
min-height: calc(80vh - 109px);
margin-top: 109px;
}
.hero.-home {
min-height: calc(100vh - 109px);
}
}
@media (min-width: 1800px) {
.hero {
min-height: calc(80vh - 139px);
margin-top: 139px;
}
.hero.-home {
min-height: calc(100vh - 139px);
}
}
.hero.-full {
height: auto;
min-height: calc(100vh - 89px);
margin-top: 89px;
}
@media (min-width: 1400px) {
.hero.-full {
min-height: calc(100vh - 109px);
margin-top: 109px;
}
}
.hero.-events {
padding-left: 20px;
padding-right: 20px;
}
.hero__content {
position: absolute;
/* stylelint-disable block-closing-brace-newline-after */
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* stylelint-enable block-closing-brace-newline-after */
margin-right: auto;
margin-left: auto;
padding: 20px;
width: 100%;
text-align: center;
}
.hero__title {
color: #fff;
margin: 0;
visibility: hidden;
/* stylelint-disable declaration-no-important */
/* stylelint-enable declaration-no-important */
}
.body--white .hero__title,
.body--shapes .hero__title {
color: #333;
}
.hero__title div {
overflow: hidden;
}
.hero__title span {
opacity: 0;
}
.fonts-loaded.hero-loaded.heading-ready .hero__title {
visibility: visible;
}
.fonts-loaded.hero-loaded.heading-ready .hero__title span {
display: inline-block;
vertical-align: top;
animation: heading 0.7s 0.4s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
.landing .hero__title span {
animation-delay: 1.3s !important;
}
.hero__pretitle {
margin-bottom: 40px;
line-height: 1;
overflow: hidden;
}
.hero__pretitle span {
display: block;
-ms-transform: translateY(105%);
transform: translateY(105%);
transition: transform 0.3s 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.fonts-loaded.hero-loaded.heading-ready .hero__pretitle span {
-ms-transform: none;
transform: none;
}
.landing .hero__pretitle span {
transition-delay: 0.8s;
}
@keyframes heading {
from {
transform: translateY(100%);
opacity: 1;
}
to {
transform: none;
opacity: 1;
}
}
.grid {
padding: 150px 0 50px;
}
@media (min-width: 800px) {
.grid {
padding: 200px 0 100px;
}
}
.grid-inner {
margin-top: -20px;
transition: transform 0s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0s;
}
.grid-inner.-hidden {
opacity: 0;
-ms-transform: translateY(20px);
transform: translateY(20px);
transition-duration: 0.7s, 0.7s;
}
@media (min-width: 600px) {
.grid-inner.-hidden {
-ms-transform: translateY(40px);
transform: translateY(40px);
}
}
.grid-item {
float: left;
padding: 20px;
}
.grid-item h2 {
line-height: 1.46;
margin: 0;
transition: opacity 0.2s 0.2s;
}
.grid-item p {
line-height: 1.5;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s;
}
.body--events_index .grid-item h2 {
line-height: 1.28;
margin-bottom: 5%;
}
.grid-item--half-pad {
padding: 10px;
}
.grid-item--visible {
opacity: 1;
-ms-transform: none;
transform: none;
}
.grid-item--spacer {
display: none;
}
@media (min-width: 1100px) {
.grid-item--spacer {
display: block;
}
}
.grid__inner {
display: block;
height: 0;
padding-bottom: 100%;
position: relative;
}
.grid__inner:hover h2 {
opacity: 0;
/* stylelint-disable time-no-imperceptible */
transition-delay: 0s;
/* stylelint-enable time-no-imperceptible */
}
.grid__inner:hover p {
opacity: 1;
transition-delay: 0.2s;
}
@media (max-width: 800px) {
.grid__inner {
/* stylelint-disable declaration-no-important */
/* stylelint-enable declaration-no-important */
}
.grid__inner:not(.events-item__inner) {
background: transparent !important;
}
}
.grid__content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.grid__content::before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), background 0.4s;
}
.grid-item--white .grid__content::before {
background: #fff;
}
.body--white .grid-item--white .grid__content::before,
.body--shapes .grid-item--white .grid__content::before {
background: #f5f5f5;
}
.body--dark .grid-item--white .grid__content::before,
.body--primary .grid-item--white .grid__content::before,
.body--nimbus .grid-item--white .grid__content::before,
.body--martinique .grid-item--white .grid__content::before,
.body--home .grid-item--white .grid__content::before {
background: rgba(0, 0, 0, 0.1);
}
.grid-item--nimbus .grid__content::before {
background: #333;
}
.grid-item--primary .grid__content::before {
background: #8b5cdd;
}
@media (min-width: 600px) {
.grid-item--w2 .grid__content::before {
background: #fff;
}
}
.grid__content::after {
content: '';
display: block;
position: absolute;
bottom: 12%;
right: 18%;
width: 24px;
height: 24px;
/* stylelint-disable string-quotes */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='0 0 24 24'%3E%3Cpath d='M22 12l-4-4v3H3v2h15v3z'/%3E%3C/svg%3E");
/* stylelint-enable string-quotes */
background-size: 24px 24px;
-ms-transform: translateX(-20px);
transform: translateX(-20px);
opacity: 0;
transition: transform 0.3s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.3s;
}
.grid-item--primary .grid__content::after,
.grid-item--nimbus:not(.grid-item--w2) .grid__content::after {
/* stylelint-disable string-quotes */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 24 24'%3E%3Cpath d='M22 12l-4-4v3H3v2h15v3z'/%3E%3C/svg%3E");
/* stylelint-enable string-quotes */
}
@media (max-width: 599px) {
.grid__content::after {
opacity: 1;
-ms-transform: none;
transform: none;
}
}
.grid__inner:hover .grid__content::before {
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.grid__inner:hover .grid__content::after {
-ms-transform: none;
transform: none;
opacity: 1;
transition-delay: 0.2s, 0.2s;
}
.events-item .grid__content {
text-align: center;
}
.events-item .grid__content::before, .events-item .grid__content::after {
display: none;
}
.grid-item--image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-ms-transform: scale(1.05);
transform: scale(1.05);
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.grid-item--image .grid__inner {
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
color: #fff;
}
.grid-item--image .grid__inner::before {
content: '@parall.ax';
background: rgba(139, 92, 221, 0.8) url("../img/svg/social-instagram.svg") center center no-repeat;
background-size: 50px 50px;
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
-ms-transform: scale(1.05);
transform: scale(1.05);
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.4s;
padding-bottom: 14.5%;
padding-left: 20.5%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: end;
justify-content: flex-end;
opacity: 0;
}
.grid-item--image .grid__inner:hover {
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.grid-item--image .grid__inner:hover::before {
-ms-transform: none;
transform: none;
opacity: 1;
}
.grid-item--image .grid__inner:hover img {
-ms-transform: none;
transform: none;
}
.grid-item--w1 {
width: 100%;
}
@media (min-width: 600px) {
.grid-item--w1 {
width: 50%;
}
}
@media (min-width: 1100px) {
.grid-item--w1 {
width: 33.333333333%;
}
}
.grid-item--w2 {
width: 100%;
}
@media (min-width: 1100px) {
.grid-item--w2 {
width: 66.666666667%;
}
}
@media (min-width: 600px) {
.grid-item--w2 .grid__inner {
background-color: #333;
transition: background 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
background-size: cover;
background-position: center;
}
.grid-item--w2 .grid__inner:hover {
background-color: #2b2b2b;
}
}
.grid-item--w2 .grid__content {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-width: 600px) {
.grid-item--w2 .grid__content {
top: calc(25% + 10px);
left: calc(25% + 10px);
height: calc(50% - 20px);
width: calc(50% - 20px);
}
}
@media (max-width: 599px) {
margin-top: 15px;
}
.grid__body {
position: relative;
margin-top: 20%;
padding: 0 18%;
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.grid-item--primary .grid__body,
.grid-item--nimbus:not(.grid-item--w2) .grid__body {
color: #fff;
}
.body--dark .grid-item--white .grid__body,
.body--primary .grid-item--white .grid__body,
.body--nimbus .grid-item--white .grid__body,
.body--martinique .grid-item--white .grid__body,
.body--home .grid-item--white .grid__body {
color: #fff;
}
@media (min-width: 600px) {
.grid-item--w2 .grid__body {
color: #333;
}
}
.grid__heading {
font-size: 1.55556rem;
text-transform: capitalize;
}
@media (max-width: 1399px) {
.grid__heading {
font-size: 1.55556rem;
}
}
@media (max-width: 1320px) {
.grid__heading {
font-size: 1.44444rem;
}
}
@media (max-width: 1260px) {
.grid__heading {
font-size: 1.11111rem;
}
}
.grid__network {
max-width: 51%;
width: 100%;
font-family: "GT-Pressura-Mono", Courier, monospace;
color: rgba(255, 255, 255, 0.5);
line-height: 1.55;
font-size: 0.88889rem;
position: absolute;
bottom: 12%;
left: 18%;
}
.grid-item--white .grid__network {
color: rgba(0, 0, 0, 0.3);
}
.body--dark .grid-item--white .grid__network,
.body--primary .grid-item--white .grid__network,
.body--nimbus .grid-item--white .grid__network,
.body--martinique .grid-item--white .grid__network,
.body--home .grid-item--white .grid__network {
color: rgba(255, 255, 255, 0.3);
}
@media (min-width: 600px) {
.grid-item--w2 .grid__network {
color: rgba(0, 0, 0, 0.3);
}
.body--dark .grid-item--w2 .grid__network,
.body--primary .grid-item--w2 .grid__network,
.body--nimbus .grid-item--w2 .grid__network,
.body--martinique .grid-item--w2 .grid__network,
.body--home .grid-item--w2 .grid__network {
color: rgba(255, 255, 255, 0.3);
}
}
@media (max-width: 1520px) {
.grid__network {
font-size: 0.77778rem;
}
}
@media (max-width: 1260px) {
.grid__network {
font-size: 0.72222rem;
}
}
.grid__social-icon {
position: absolute;
/* stylelint-disable block-closing-brace-newline-after */
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* stylelint-enable block-closing-brace-newline-after */
display: block;
width: 30px;
height: 30px;
}
.grid__load-more {
margin-top: 90px;
}
.site-footer {
min-height: 100vh;
text-align: center;
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.site-footer::before {
content: '';
position: absolute;
z-index: 0;
top: 90px;
left: 80%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 0;
width: 350px;
height: 350px;
}
@media (min-width: 600px) {
.site-footer::before {
left: 70%;
}
}
@media (min-width: 800px) {
.site-footer::before {
width: 500px;
height: 500px;
}
}
@media (min-width: 1200px) {
.site-footer::before {
top: 0;
}
}
.site-footer::after {
content: '';
position: absolute;
z-index: 0;
left: 50%;
top: 100%;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-ms-transform: rotate(-22deg);
transform: rotate(-22deg);
width: 650px;
height: 150px;
}
.site-footer .site-container::before {
content: '';
position: absolute;
z-index: 0;
top: 20%;
right: 100%;
-ms-transform: none;
transform: none;
opacity: 0.05;
}
@media (max-width: 767px) {
.site-footer .site-container::before {
top: 25%;
}
}
.site-footer::before, .site-footer::after,
.site-footer .site-container::before {
/* stylelint-disable time-no-imperceptible */
transition: transform 0.8s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.7s 0.1s;
/* stylelint-enable */
}
.site-footer.-seen::before {
-ms-transform: translateY(-20%);
transform: translateY(-20%);
opacity: 1;
transition-delay: 0.3s;
}
.site-footer.-seen::after {
-ms-transform: rotate(-22deg) translateY(-170%);
transform: rotate(-22deg) translateY(-170%);
transition-delay: 0.2s;
}
.site-footer.-seen .site-container::before {
-ms-transform: translateX(80%);
transform: translateX(80%);
}
@media (min-width: 1200px) {
.site-footer.-seen .site-container::before {
-ms-transform: translateX(150%);
transform: translateX(150%);
}
}
@media (max-width: 767px) {
.site-footer.-seen .site-container::before {
-ms-transform: translateX(60%);
transform: translateX(60%);
}
}
.site-footer.-seen:not(.-active)::before {
opacity: 0;
transition-delay: 0s, 0s;
}
.footer-item {
margin-bottom: 50px;
position: relative;
z-index: 1;
}
.footer-item.-subscribe {
margin-bottom: 50px;
}
@media (min-width: 768px) {
.footer-item.-subscribe {
margin-bottom: 150px;
}
}
.footer-item__title {
margin-bottom: 7px;
}
.footer-item__address {
font-style: normal;
line-height: 1.4;
}
.footer-item__email {
display: inline-block;
color: #fff;
border-bottom-color: rgba(255, 255, 255, 0.3);
}
.footer-item__email:hover {
color: white;
border-bottom-color: white;
}
.footer-social {
margin: 0 auto;
padding: 70px 0;
font-size: 50px;
}
@media (max-width: 767px) {
.footer-social {
padding: 0;
max-width: 240px;
}
}
.footer-social__link {
/* stylelint-disable selector-no-type */
/* stylelint-enable */
}
@media (max-width: 767px) {
.footer-social__link svg {
width: 30px;
height: 30px;
}
}
.footer-legal {
color: rgba(255, 255, 255, 0.3);
/* stylelint-disable selector-no-type */
/* stylelint-enable */
}
.footer-legal a {
color: inherit;
transition: color 0.2s;
}
.footer-legal a:hover {
color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 599px) {
.footer-legal {
line-height: 2;
}
}
.footer-legal__bull::before {
content: '\0020\2022\0020';
}
@media (max-width: 499px) {
.footer-legal__item:first-child + .footer-legal__bull::before {
content: '\A';
white-space: pre;
}
}
.site-footer .big-squiggle {
width: 25%;
max-width: 228.4px;
position: absolute;
left: 17%;
bottom: 32%;
}
.site-footer .big-squiggle div {
opacity: 0;
transition: transform 0.8s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.4s;
-ms-transform: translateX(-33.33333%);
transform: translateX(-33.33333%);
}
@media (max-width: 767px) {
.site-footer .big-squiggle {
left: -3%;
bottom: 29%;
}
}
@media (max-width: 599px) {
.site-footer .big-squiggle {
display: none;
}
}
.site-footer.-in-view .big-squiggle div {
opacity: 1;
-ms-transform: none;
transform: none;
}
.footer-serverless a {
display: block;
position: relative;
width: 150px;
opacity: 0.3;
margin: 0 auto;
transition: opacity 0.3s;
}
.footer-serverless a::before {
content: '';
display: block;
padding-top: 29.2592%;
}
.footer-serverless a:hover {
opacity: 0.5;
}
.footer-serverless img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.article__elements {
margin-bottom: 0;
margin-left: 0;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
max-width: 100vw;
overflow: hidden;
}
.article__elements > li {
list-style: none;
}
.article__element {
margin-bottom: 4.44444rem;
position: relative;
}
@media (min-width: 800px) {
.article__element {
margin-bottom: 8.88889rem;
}
}
@media (max-width: 949px) {
.article__element.-image .site-container {
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 949px) {
.article__element.-news-image-landscape .site-container,
.article__element.-embed .site-container {
padding-left: 0;
padding-right: 0;
}
}
.article__element.-quote {
text-align: center;
}
@media (min-width: 1000px) {
.article__columns {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.article__column {
margin-left: 20px;
margin-right: 20px;
}
.article__column.-text {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: calc(100% - 40px);
min-width: 0;
}
@media (min-width: 1000px) {
.article__column.-text {
width: calc(50% - 40px);
}
}
@media (min-width: 1400px) {
.article__column.-text {
width: calc(33.3333333% - 40px);
}
.article__column.-text.-half {
width: calc(50% - 40px);
}
}
.article__column.-image {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: calc(100% + 20px);
}
@media (max-width: 999px) {
.article__column.-image {
margin-left: -10px;
}
}
@media (min-width: 1000px) {
.article__column.-image {
width: calc(50% - 40px);
}
}
@media (min-width: 1000px) {
article .article__column.-text.-left {
margin-left: auto;
}
article .article__column.-text.-right {
margin-right: auto;
}
}
@media (min-width: 1000px) {
.article__columns--swap .article__column.-left {
-ms-flex-order: -1;
order: -1;
}
}
.article__columns--swap .article__column.-right {
margin-bottom: 2.22222rem;
}
@media (min-width: 1000px) {
.article__columns--swap .article__column.-right {
margin-bottom: 0;
}
}
.article__columns:not(.article__columns--swap) .article__column.-left {
margin-bottom: 2.22222rem;
}
@media (min-width: 1000px) {
.article__columns:not(.article__columns--swap) .article__column.-left {
margin-bottom: 0;
}
}
.article-element__delete {
display: block;
position: absolute;
z-index: 100;
top: 20px;
right: 20px;
width: 20px;
height: 20px;
text-indent: -9999px;
background-image: url("../img/svg/element-delete.svg");
background-repeat: no-repeat;
}
@media (min-width: 950px) {
.full-width-image {
margin-left: 20px;
margin-right: 20px;
}
}
.iframe-container {
position: relative;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
/* stylelint-disable selector-no-type */
/* stylelint-enable */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.article iframe {
background: #8b5cdd;
border: 0;
}
.article .article__element.-textarea .max-width-sm {
max-width: 940px !important;
/* stylelint-disable-line */
}
.admin-table {
width: 100%;
/* stylelint-disable selector-no-type */
/* stylelint-enable */
}
.admin-table th,
.admin-table td {
padding: 10px;
border: 1px solid #333;
}
.admin-table th {
background-color: #8b5cdd;
color: #fff;
}
.admin-table td {
background-color: #e3dfec;
}
.admin-table tr:nth-child(odd) td {
background-color: #fff;
}
.admin-list,
.admin-list li {
list-style: none;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
.admin-heading {
font-family: "Calluna", Times, serif;
color: #2d283e;
}
/* stylelint-disable declaration-no-important */
.expose-admin__edit-image-iframe {
background: none !important;
}
/* stylelint-enable declaration-no-important */
/*! Flickity v2.0.2
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
}
.flickity-enabled {
position: relative;
/* draggable */
}
.flickity-enabled:focus {
outline: none;
}
.flickity-enabled.is-draggable {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
/* stylelint-disable declaration-block-no-duplicate-properties */
cursor: move;
cursor: grab;
/* stylelint-enable */
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: grabbing;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
position: absolute;
top: 50%;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
/* stylelint-disable declaration-block-no-duplicate-properties */
background: #fff;
background: rgba(255, 255, 255, 0.75);
/* stylelint-enable */
cursor: pointer;
/* vertically center */
-ms-transform: translateY(-50%);
transform: translateY(-50%);
/* stylelint-disable selector-no-type */
/* stylelint-enable */
}
.flickity-prev-next-button:hover {
background: #fff;
}
.flickity-prev-next-button:focus {
outline: none;
box-shadow: 0 0 0 5px #09f;
}
.flickity-prev-next-button:active {
opacity: 0.6;
}
.flickity-prev-next-button:disabled {
opacity: 0.3;
cursor: auto;
}
.flickity-prev-next-button.previous {
left: 10px;
}
.flickity-prev-next-button.next {
right: 10px;
}
.flickity-prev-next-button svg {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
.flickity-prev-next-button .arrow {
fill: #333;
}
/* ---- page dots ---- */
.flickity-page-dots {
position: absolute;
width: 100%;
bottom: -45px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #333;
border-radius: 50%;
opacity: 0.25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
opacity: 1;
}
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px;
}
.flickity-rtl .flickity-page-dots {
direction: rtl;
}
@media (max-width: 699px) {
.phones {
position: relative;
display: inline-block;
background: #e7e7e7;
border-radius: 50px;
width: 100%;
}
.phones::before {
content: '';
display: block;
padding-top: 208.33333%;
}
}
@media (min-width: 700px) {
.phones-inner {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media (max-width: 699px) {
.phones-inner {
position: absolute;
top: 12.66667%;
left: 5.55556%;
width: 88.88889%;
height: auto;
white-space: nowrap;
overflow: hidden;
}
.phones-inner::after {
content: 'flickity';
display: none;
}
}
.phone {
display: inline-block;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
@media (max-width: 699px) {
.phone {
width: 100%;
}
}
@media (min-width: 700px) {
.phone {
position: relative;
display: inline-block;
background: #e7e7e7;
border-radius: 30px;
-ms-flex: 0 0 28%;
flex: 0 0 28%;
}
.phone::before {
content: '';
display: block;
padding-top: 208.33333%;
}
}
@media (min-width: 1200px) {
.phone {
border-radius: 50px;
}
}
.phone img {
height: auto;
}
@media (max-width: 699px) {
.phone img {
width: 100%;
}
}
@media (min-width: 700px) {
.phone img {
position: absolute;
top: 12.66667%;
left: 5.55556%;
width: 88.88889%;
}
}
.product__image {
position: relative;
width: 50%;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.4s;
-ms-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
@media (min-width: 600px) {
.product__image {
-ms-transform: translateY(40px);
transform: translateY(40px);
}
}
.product__image::before {
content: '';
display: block;
padding-top: 121.21212%;
}
.product__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-ms-transform: scale(1.05);
transform: scale(1.05);
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.product--left .product__image {
margin-right: auto;
}
.product--right .product__image {
margin-left: auto;
}
.product.-in-view .product__image {
opacity: 0.3;
-ms-transform: none;
transform: none;
}
.product {
text-align: right;
line-height: 1;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.product:not(:first-child) {
margin-top: 120px;
}
.product a {
display: block;
position: relative;
color: #fff;
}
.product.-settled a:hover {
/* stylelint-disable selector-max-specificity */
/* stylelint-enable selector-max-specificity */
}
.product.-settled a:hover .product__image {
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: 0.7;
}
.product.-settled a:hover .product__image img {
-ms-transform: none;
transform: none;
}
.product__main {
position: absolute;
top: 0;
bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: end;
align-items: flex-end;
}
.product--left .product__main {
left: 40%;
}
.product--right .product__main {
right: 40%;
}
.product__title {
line-height: 1;
margin: 0;
font-size: 6.66667rem;
overflow: hidden;
/* stylelint-disable selector-no-type, time-no-imperceptible */
/* stylelint-enable time-no-imperceptible */
}
.product__title span {
display: inline-block;
-ms-transform: translateY(100%);
transform: translateY(100%);
transition: transform 0.6s 0.1s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.product.-in-view .product__title span {
-ms-transform: none;
transform: none;
}
/* stylelint-enable selector-no-type */
/* stylelint-disable no-descending-specificity */
.product__desc {
-ms-flex-order: -1;
order: -1;
margin: 0;
position: relative;
line-height: 1.25;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.product__desc::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 100%;
margin-left: 14px;
width: 40px;
height: 1px;
background: rgba(255, 255, 255, 0.4);
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-ms-transform: scaleX(0);
transform: scaleX(0);
/* stylelint-disable time-no-imperceptible */
transition: transform 0.6s 0.1s cubic-bezier(0.42, 0.01, 0.23, 1);
/* stylelint complaining about the 0.1s */
/* stylelint-enable time-no-imperceptible */
}
.product.-in-view .product__desc::after {
-ms-transform: none;
transform: none;
}
.product__desc > span {
display: inline-block;
overflow: hidden;
}
.product__desc > span span {
display: inline-block;
-ms-transform: translateY(100%);
transform: translateY(100%);
transition: transform 0.6s 0.3s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.product.-in-view .product__desc > span span {
-ms-transform: none;
transform: none;
}
/* stylelint-enable no-descending-specificity */
/* stylelint-disable no-descending-specificity */
.product__more {
position: relative;
margin: 25px 0 0;
overflow: hidden;
/* stylelint-disable selector-no-type */
}
.product__more::after {
content: '';
display: block;
position: absolute;
left: -1px;
right: -1px;
bottom: 1px;
height: 7px;
z-index: 0;
background: #8b5cdd;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
-ms-transform: scaleX(0);
transform: scaleX(0);
transition: transform 0.6s 0.7s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.product.-in-view .product__more::after {
-ms-transform: none;
transform: none;
}
.product__more span {
display: inline-block;
position: relative;
z-index: 1;
-ms-transform: translateY(100%);
transform: translateY(100%);
transition: transform 0.6s 0.5s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.product.-in-view .product__more span {
-ms-transform: none;
transform: none;
}
/* stylelint-enable selector-no-type, no-descending-specificity */
.progress-bar {
background-color: #e3dfec;
position: fixed;
top: 0;
z-index: 1;
transition: transform 0.2s;
}
.progress-bar > div {
background-color: #8b5cdd;
}
.progress-bar--horizontal {
left: 0;
right: 0;
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.progress-bar--horizontal.-visible {
-ms-transform: translateY(0);
transform: translateY(0);
}
.progress-bar--horizontal > div {
width: 0;
height: 4px;
}
.progress-bar--vertical {
left: 270px;
bottom: 0;
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 2;
}
.progress-bar--vertical.-visible {
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.progress-bar--vertical > div {
width: 4px;
height: 0;
}
@media (max-width: 1799px) {
.progress-bar--vertical {
left: 190px;
}
}
@media (max-width: 1199px) {
.progress-bar--vertical {
left: 110px;
}
}
@media (max-width: 859px) {
.progress-bar--vertical {
left: 0;
}
}
@media (max-width: 739px) {
.progress-bar--vertical {
display: none;
}
}
.filter {
margin-top: 40px;
-ms-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
/* stylelint-disable selector-no-type */
/* stylelint-enable */
}
@media (min-width: 600px) {
.filter {
-ms-transform: translateY(40px);
transform: translateY(40px);
}
}
.hero-loaded.fonts-loaded .filter {
animation: fadeup 0.5s 0.6s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
.hero-loaded.fonts-loaded.landing .filter {
animation-delay: 1.6s;
}
.filter .caption {
margin-right: 20px;
}
.filter label {
color: #a0a0a0;
}
.filter__select {
position: relative;
display: inline-block;
color: #333;
margin-left: 20px;
/* Dropdown arrow */
/* stylelint-disable selector-no-type */
/* Hide the arrow in IE10 and up */
/* stylelint-enable */
}
.filter__select::after {
content: '';
position: absolute;
top: 50%;
margin-top: -3px;
right: 0;
display: block;
width: 0;
height: 0;
pointer-events: none;
border-style: solid;
border-width: 6px 5px 0;
border-color: #333 transparent transparent;
}
.filter__select select {
display: inline-block;
width: 100%;
height: 2em;
margin: 0;
padding: 0 30px 0 0;
line-height: 2;
color: #333;
background: none;
border: 0;
border-bottom: 1px solid #eaeaea;
border-radius: 0;
cursor: pointer;
outline: 0;
transition: border-color 0.2s;
-webkit-appearance: none;
appearance: none;
}
.filter__select select::-ms-expand {
display: none;
}
.filter__select select:focus {
border-color: #8b5cdd;
}
.filter__select select:focus:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
/* Hover state */
/* Uncomment if you need it, but be aware of the sticky iOS states.
.select select:hover {
background-color: #ddd;
}
*/
/* Media query to target Firefox only */
@-moz-document url-prefix('') {
/* Firefox hack to hide the arrow */
/* stylelint-disable selector-no-type */
/* elements inherit styles from , so reset them. */
/* stylelint-enable */
.filter__select select {
text-indent: 0.01px;
text-overflow: '';
padding-right: 1rem;
}
.filter__select option {
background-color: #fff;
}
}
/* IE9 hack to hide the arrow */
@media screen and (min-width: 0\0) {
/* stylelint-disable selector-no-type */
.filter__select select {
z-index: 1;
padding: 0 30px 0 0;
}
.filter__select::after {
z-index: 5;
}
.filter__select::before {
position: absolute;
top: 0;
right: 30px;
bottom: 1px;
z-index: 2;
content: '';
display: block;
width: 30px;
background-color: #fff;
pointer-events: none;
}
.filter__select select:hover,
.filter__select select:focus,
.filter__select select:active {
color: #333;
background: none;
}
/* stylelint-enable */
}
.dropdown {
height: 45px;
display: inline-block;
position: relative;
}
.dropdown.-is-select::after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 10px;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.dropdown.-is-select.-on-purple::after {
height: 0;
width: 0;
/* stylelint-disable block-closing-brace-empty-line-before */
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
/* stylelint-enable block-closing-brace-empty-line-before, block-closing-brace-newline-after */
}
.dropdown.-is-select.-on-white::after {
height: 0;
width: 0;
/* stylelint-disable block-closing-brace-empty-line-before */
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #8b5cdd;
/* stylelint-enable block-closing-brace-empty-line-before, block-closing-brace-newline-after */
}
.dropdown.-on-purple .dropdown__label {
color: #fff;
border-color: rgba(255, 255, 255, 0.5);
}
.dropdown.-on-purple .dropdown__label::before {
background-color: #fff;
}
.dropdown.-on-purple .dropdown__label::after {
border-color: #fff transparent transparent;
}
.dropdown.-on-purple .dropdown__list {
background-color: #d1bef1;
}
.dropdown.-on-purple .dropdown__link {
color: #fff;
}
.dropdown.-on-purple .dropdown__link:hover, .dropdown.-on-purple .dropdown__link.-selected {
color: #8b5cdd;
}
.dropdown.-on-white .dropdown__label {
border-color: #eaeaea;
}
.dropdown__select {
position: relative;
}
.dropdown__select.-bare {
max-width: 225px;
width: 100%;
height: 45px;
background-color: transparent;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
appearance: none;
}
.dropdown__select.-on-purple {
color: #fff;
border-bottom: solid 1px rgba(255, 255, 255, 0.3);
}
.dropdown__select.-on-white {
color: #8b5cdd;
border-bottom: solid 1px rgba(139, 92, 221, 0.3);
}
.dropdown__container {
display: inline-block;
vertical-align: middle;
width: 220px;
max-width: 100%;
text-align: left;
line-height: 1;
position: relative;
}
.dropdown__list {
list-style: none;
margin: 0;
position: absolute;
z-index: 5;
top: -14px;
left: -4444px;
right: 4000px;
background: #8b5cdd;
color: #fff;
padding: 15px 23px;
-ms-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.4s, left 0s 0.4s, right 0s 0.4s;
}
.dropdown.-active .dropdown__list {
left: -23px;
right: -23px;
-ms-transform: none;
transform: none;
opacity: 1;
transition-delay: 0s, 0s, 0s, 0s;
}
/* stylelint-disable selector-no-type, selector-no-qualifying-type */
.dropdown__label,
.dropdown__link {
display: block;
padding: 7px 0;
color: inherit;
-webkit-appearance: none;
appearance: none;
background: none;
border: 0;
text-align: left;
}
/* stylelint-enable selector-no-type, selector-no-qualifying-type */
.dropdown__link {
width: 100%;
}
.dropdown__link:not(.-selected) {
color: #d1bef1;
}
.dropdown__link:hover, .dropdown__link.-selected {
color: #fff;
}
/* stylelint-disable selector-no-type, selector-no-qualifying-type */
.dropdown__label {
width: 100%;
border-bottom: 1px solid #eaeaea;
padding: 0;
position: relative;
}
.dropdown__label span {
display: block;
padding: 8px 30px 8px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dropdown__label::before {
content: '';
height: 1px;
display: block;
position: absolute;
bottom: -1px;
right: 0;
left: 0;
background: #8b5cdd;
-ms-transform-origin: left;
transform-origin: left;
-ms-transform: scaleX(0);
transform: scaleX(0);
transition: transform 0.3s linear;
}
.dropdown__label::after {
content: '';
width: 0;
height: 0;
display: block;
position: absolute;
top: 50%;
margin-top: -3px;
right: 0;
pointer-events: none;
border-style: solid;
border-width: 6px 5px 0;
border-color: #333 transparent transparent;
}
.dropdown__label:hover, .dropdown__label:active, .dropdown__label:focus {
outline: 0;
}
.dropdown__label:hover::before, .dropdown__label:active::before, .dropdown__label:focus::before {
-ms-transform: scaleX(1);
transform: scaleX(1);
}
/* stylelint-enable selector-no-type, selector-no-qualifying-type */
.filter .dropdown {
margin-left: 40px;
}
.shapes {
min-height: 100vh;
position: fixed;
z-index: -4;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
transition: opacity 0.6s;
}
.shapes.-invisible {
opacity: 0;
}
.-page-loading .shapes {
transition: opacity 0.1s;
}
.shapes.-hidden {
display: none;
}
.body--events_index .shapes {
opacity: 0;
}
.body--martinique:not(.body--events_index) .shapes {
opacity: 1;
z-index: -1;
}
.shapes--events {
z-index: -1;
opacity: 0;
}
.body--events_index:not(.body--white):not(.body--dark) .shapes--events {
opacity: 1;
}
.shapes--events svg {
height: 100vh;
}
.shapes-canvas {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.shapes__image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-ms-transform: scale(1.05);
transform: scale(1.05);
background-size: cover;
background-position: center center;
opacity: 0;
transition: opacity 1s 3.2s;
}
.hero-loaded.fonts-loaded .shapes__image {
opacity: 1;
}
.body--events_index .shapes__image {
transition: opacity 1s;
}
@keyframes homeheading {
from {
transform: translateY(100%);
opacity: 1;
}
to {
transform: none;
opacity: 1;
}
}
.shapes__title {
color: #fff;
position: relative;
margin: 0 50px;
overflow: hidden;
visibility: hidden;
opacity: 0.5;
letter-spacing: -0.04em;
line-height: 1;
/* file: global */
/* stylelint-disable declaration-block-no-duplicate-properties */
font-size: 140px;
font-size: calc( (60px - 320px * 0.10185) + 10.18519vw);
/* stylelint-enable declaration-block-no-duplicate-properties */
max-width: 88%;
}
@media screen and (max-width: 320px) {
.shapes__title {
/* file: global */
font-size: 60px;
}
}
@media screen and (min-width: 1400px) {
.shapes__title {
/* file: global */
font-size: 170px;
}
}
.shapes__title div {
overflow: hidden;
}
.shapes__title span {
opacity: 0;
}
@media (min-width: 800px) {
.shapes__title {
max-width: 65%;
}
}
@media (min-width: 1600px) {
.shapes__title {
max-width: 52%;
}
}
@media (min-width: 2000px) {
.shapes__title {
max-width: 42%;
}
}
.fonts-loaded.hero-loaded.heading-ready .shapes__title {
visibility: visible;
}
.fonts-loaded.hero-loaded.heading-ready .shapes__title span {
display: inline-block;
vertical-align: top;
animation: homeheading 0.7s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
.shapes__subtitle {
font-size: 16px;
line-height: 1.5;
color: #fff;
margin: 0;
-ms-flex-order: 1;
order: 1;
max-width: 100%;
margin-top: 50px;
padding: 0 40px;
overflow: hidden;
}
@media (min-width: 500px) {
.shapes__subtitle {
max-width: 80%;
}
}
@media (min-width: 700px) {
.shapes__subtitle {
max-width: 500px;
font-size: 18px;
}
}
.shapes__subtitle div {
overflow: hidden;
}
.shapes__subtitle span {
opacity: 0;
}
.fonts-loaded.hero-loaded.heading-ready .shapes__subtitle {
visibility: visible;
}
.fonts-loaded.hero-loaded.heading-ready .shapes__subtitle span {
display: inline-block;
vertical-align: top;
animation: homeheading 0.7s 0.7s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
.shapes__bg-switch {
position: absolute;
top: 50%;
left: 0;
}
.case-study-filters ul {
margin: 40px auto;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.case-study-filters ul a {
padding: 5px;
margin: 5px;
position: relative;
}
.case-study-filters ul a::after {
content: '';
left: 0;
bottom: 5px;
background: #8b5cdd;
width: 100%;
height: 1px;
position: absolute;
opacity: 0;
transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}
.case-study-filters ul a:active::after, .case-study-filters ul a:hover::after, .case-study-filters ul a.-active::after {
opacity: 1;
}
.case-study-filters ul a:active, .case-study-filters ul a.-active {
color: #8b5cdd;
}
.case-study-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: start;
align-items: flex-start;
position: relative;
}
.case-study {
width: calc(33.333% - 40px);
margin: 20px;
position: relative;
}
.case-study__inner {
background: #8b5cdd;
color: white;
padding: 40px;
transition: transform 0.2s ease-in-out;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
height: 550px;
will-change: transform;
}
@media (max-width: 1400px) {
.case-study {
width: calc(50% - 40px);
}
}
@media (max-width: 750px) {
.case-study {
width: calc(100% - 40px);
}
}
.case-study:nth-child(3n - 1):not(.-no-bump), .case-study.-bump-up {
margin-top: -100px;
margin-top: var(--ty);
}
@media (max-width: 1400px) {
.case-study:nth-child(3n - 1):not(.-no-bump), .case-study.-bump-up {
margin-top: 20px;
}
}
.case-study__title > * {
margin: 0 0 20px;
line-height: 1.125;
}
.case-study p {
line-height: 1.5;
-ms-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
transition: opacity 0.3s, transform 0.3s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.case-study__tags {
line-height: 1.5;
-ms-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
transition: opacity 0.3s, transform 0.3s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.case-study__tags > .tag {
font-family: "GT-Pressura-Mono", Courier, monospace;
font-size: 16px;
display: inline-block;
padding-right: 5px;
}
.case-study__tags > .tag::after {
content: ',';
}
.case-study__tags > .tag:last-child::after {
content: '';
}
.case-study__hover {
position: absolute;
left: 0;
top: 0;
width: 100%;
background: #8b5cdd;
opacity: 0;
transition: opacity 0.2s ease-in-out;
will-change: opacity;
padding: 40px;
pointer-events: none;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
}
.case-study__link {
font-family: "GT-Pressura-Mono", Courier, monospace;
font-size: 16px;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
line-height: 1.5;
margin: 0;
}
.case-study__link span {
-ms-transform: translateY(100%);
transform: translateY(100%);
transition: opacity 0.3s, transform 0.3s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.case-study__link::after {
content: '';
width: 24px;
height: 24px;
display: block;
background-size: 24px 24px;
opacity: 0;
-ms-transform: translateX(-100%);
transform: translateX(-100%);
transition: opacity 0.3s, transform 0.3s cubic-bezier(0.42, 0.01, 0.23, 1);
/* stylelint-disable string-quotes */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 24 24'%3E%3Cpath d='M22 12l-4-4v3H3v2h15v3z'/%3E%3C/svg%3E");
/* stylelint-enable string-quotes */
}
.case-study:hover .case-study__inner {
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.case-study:hover .case-study__hover {
opacity: 1;
pointer-events: all;
color: white;
}
.case-study:hover .case-study__hover p {
opacity: 1;
-ms-transform: translateY(0%);
transform: translateY(0%);
}
.case-study:hover .case-study__link span {
opacity: 1;
-ms-transform: translateY(0%);
transform: translateY(0%);
}
.case-study:hover .case-study__link::after {
opacity: 1;
-ms-transform: translateX(0%);
transform: translateX(0%);
}
.case-study:hover .case-study__tags {
opacity: 0;
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.work-item {
position: relative;
}
.work-item h3,
.work-item p {
margin: 0;
width: 100%;
}
.work-item h3 {
margin-bottom: 20px;
}
.work-item p {
margin-bottom: 20px;
}
@media (min-width: 600px) {
.work-item p {
margin-bottom: 20%;
}
}
.work-item .flip-btn {
color: inherit;
}
@media (min-width: 600px) {
.work-item .flip-btn {
margin-top: 30px;
}
}
@media (min-width: 600px) {
.work-item:nth-of-type(2n) .work-item__img {
margin-left: 20px;
margin-right: auto;
}
.work-item:nth-of-type(2n) .work-item__info {
left: auto;
right: 0;
margin-right: 20px;
}
}
.work-item__img {
display: block;
background: none;
overflow: hidden;
margin-left: -10px;
margin-right: -10px;
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
}
@media (min-width: 600px) {
.work-item__img {
margin-left: auto;
margin-right: 20px;
width: calc(83.3333333% - 40px);
}
}
.work-item__img img {
-ms-transform: scale(1.05);
transform: scale(1.05);
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.work-item__img:hover {
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.work-item__img:hover img {
-ms-transform: scale(1);
transform: scale(1);
}
.work-item__info {
color: #fff;
left: 0;
bottom: 4%;
margin-left: -10px;
margin-right: -10px;
padding: 15px 20px;
background: #8b5cdd;
}
@media (min-width: 600px) {
.work-item__info {
position: absolute;
width: calc(50% - 40px);
margin-left: 20px;
margin-right: 0;
padding: 0;
background: none;
}
.work-item__info::before {
content: '';
display: block;
padding-top: 100%;
}
.work-item__info > div {
background: #8b5cdd;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0 18%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: start;
align-items: flex-start;
}
}
@media (min-width: 1300px) {
.work-item__info {
width: calc(33.3333333% - 40px);
bottom: 10%;
}
}
.work-item__squiggle {
width: 16.6666666%;
margin: 100px 0 100px calc(33.3333333% + 20px);
opacity: 0.3;
}
.work-item__squiggle:nth-of-type(even) {
margin-left: calc(50% + 20px);
}
@media (max-width: 599px) {
.work-item__squiggle {
display: none;
}
}
.icon-list {
list-style: none;
margin: 0 -30px;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (min-width: 700px) {
.icon-list {
margin: 0;
}
}
@media (max-width: 699px) {
.icon-list {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
}
.icon-list li {
width: 100%;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
@media (min-width: 700px) {
.icon-list li {
width: 50%;
}
}
@media (max-width: 699px) {
.icon-list li {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 35px 30px;
}
}
@media (min-width: 700px) {
.icon-list li:nth-child(even) {
border-left: 1px solid rgba(0, 0, 0, 0.05);
}
}
@media (min-width: 700px) {
.icon-list li:nth-child(even)::before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
height: 1px;
background: rgba(0, 0, 0, 0.05);
}
}
.icon-list li:nth-child(even) div {
margin-left: auto;
}
.icon-list li:nth-child(even) svg,
.icon-list li:nth-child(even) span {
transition-delay: 0.5s, 0.5s;
}
.icon-list li:nth-child(even) h3 {
transition-delay: 0.6s, 0.6s;
}
.icon-list li:nth-child(even) p {
transition-delay: 0.7s, 0.7s;
}
.icon-list svg,
.icon-list h3,
.icon-list p,
.icon-list span {
-ms-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.4s;
}
@media (min-width: 600px) {
.icon-list svg,
.icon-list h3,
.icon-list p,
.icon-list span {
-ms-transform: translateY(40px);
transform: translateY(40px);
}
}
.icon-list span {
display: block;
}
.icon-list svg {
fill: #8b5cdd;
}
.icon-list h3 {
margin-top: 40px;
transition-delay: 0.1s, 0.1s;
}
.icon-list p {
transition-delay: 0.2s, 0.2s;
}
.icon-list div {
padding-left: 20px;
padding-right: 20px;
/* stylelint-disable-next-line selector-no-universal */
/* stylelint-disable selector-no-qualifying-type */
/* stylelint-enable selector-no-qualifying-type */
}
@media (min-width: 700px) {
.icon-list div {
margin-top: 20px;
margin-bottom: 20px;
}
}
@media (min-width: 1100px) {
.icon-list div {
width: 66.6666666%;
margin-top: 20%;
margin-bottom: 20%;
}
}
.icon-list div > *:last-child {
margin-bottom: 0;
}
.icon-list div.-in-view svg,
.icon-list div.-in-view h3,
.icon-list div.-in-view p,
.icon-list div.-in-view span {
-ms-transform: none;
transform: none;
opacity: 1;
}
.icon-list-container hr {
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
margin: 0;
}
.loader-container {
background: #fff;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
pointer-events: none;
-ms-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
transition: opacity 0.4s, transform 0s 0.4s;
will-change: opacity, transform;
}
.-page-loading .loader-container {
opacity: 1;
-ms-transform: none;
transform: none;
transition: opacity 0.4s;
}
.loader {
width: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
}
.loader::before {
content: '';
display: block;
padding-top: 50%;
}
.loader canvas {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.split-modal {
display: -ms-flexbox;
display: flex;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 50;
overflow: auto;
overflow-x: hidden;
color: #333;
-webkit-overflow-scrolling: touch;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.split-modal:not(.split-modal--active) {
-ms-transform: translateX(-100%);
transform: translateX(-100%);
z-index: -1;
/* stylelint-disable time-no-imperceptible */
transition: transform 0s 2s, z-index 0s 2s;
/* stylelint-enable time-no-imperceptible */
}
.split-modal::before, .split-modal::after {
content: '';
display: block;
width: 50%;
position: fixed;
z-index: -1;
top: 0;
bottom: 0;
transition: transform 0.4s 0.7s cubic-bezier(0.42, 0.01, 0.23, 1);
will-change: transform;
}
.split-modal::before {
background: #fff;
left: 0;
-ms-transform: translateY(100%);
transform: translateY(100%);
z-index: 2;
}
.split-modal::after {
right: 0;
background-color: #3e3750;
-ms-transform: translateY(-100%);
transform: translateY(-100%);
z-index: 0;
}
.split-modal a {
color: inherit;
}
.split-modal h2 a {
padding: 0;
}
.split-modal .input {
opacity: 0;
transition: opacity 0.4s 0.5s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.split-modal .input::before {
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
-ms-transform: scale(0);
transform: scale(0);
transition: transform 0.4s 0.6s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.split-modal .input:nth-child(2), .split-modal .input:nth-child(2)::before {
transition-delay: 0.5s;
}
.split-modal .input:nth-child(3), .split-modal .input:nth-child(3)::before {
transition-delay: 0.4s;
}
.split-modal .input:nth-child(4), .split-modal .input:nth-child(4)::before {
transition-delay: 0.3s;
}
.split-modal .input:nth-child(5), .split-modal .input:nth-child(5)::before {
transition-delay: 0.2s;
}
.split-modal .submit {
text-align: right;
opacity: 0;
-ms-transform: translateY(30px);
transform: translateY(30px);
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.4s;
}
.split-modal .big-squiggle {
position: fixed;
z-index: 2;
bottom: 10%;
left: 50%;
margin-left: -100px;
width: 228.4px;
}
.split-modal .big-squiggle div {
opacity: 0;
transition: transform 0.8s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.4s;
}
@media (max-width: 1100px) {
.split-modal .big-squiggle {
display: none;
}
}
/* stylelint-disable no-descending-specificity */
.split-modal--active::before, .split-modal--active::after {
-ms-transform: none;
transform: none;
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.split-modal--active .site-container::before {
opacity: 0.05;
-ms-transform: rotate(180deg);
transform: rotate(180deg);
transition-delay: 0.4s, 0.4s;
}
.split-modal--active .site-nav__link.-close {
opacity: 1;
}
.split-modal--active .input {
opacity: 1;
transition-delay: 0.2s;
}
.split-modal--active .input::before {
-ms-transform: none;
transform: none;
transition-delay: 0.2s;
}
.split-modal--active .input:nth-child(2), .split-modal--active .input:nth-child(2)::before {
transition-delay: 0.3s;
}
.split-modal--active .input:nth-child(3), .split-modal--active .input:nth-child(3)::before {
transition-delay: 0.4s;
}
.split-modal--active .input:nth-child(4), .split-modal--active .input:nth-child(4)::before {
transition-delay: 0.5s;
}
.split-modal--active .input:nth-child(5), .split-modal--active .input:nth-child(5)::before {
transition-delay: 0.6s;
}
.split-modal--active .submit {
opacity: 1;
-ms-transform: none;
transform: none;
transition-delay: 0.7s, 0.7s;
}
.split-modal--active .big-squiggle div {
opacity: 1;
-ms-transform: translateX(-33.33333%);
transform: translateX(-33.33333%);
transition-delay: 0.1s, 0.1s;
}
.split-modal--relative {
height: 100vh;
position: relative;
}
.-split-modal-leaving .split-modal .big-squiggle div {
-ms-transform: translateX(-66.66667%);
transform: translateX(-66.66667%);
}
/* stylelint-enable no-descending-specificity */
.split-modal-inner {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%;
margin: auto;
}
.split-modal-inner::before {
content: '';
position: fixed;
z-index: 1;
top: 0;
left: 50%;
opacity: 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform: rotate(24deg) translateY(-50px);
transform: rotate(24deg) translateY(-50px);
transition: transform 0.6s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.6s;
width: 280px;
height: 120px;
will-change: transform, opacity;
}
@media (min-width: 1200px) {
.split-modal-inner::before {
width: 650px;
height: 150px;
}
}
.split-modal--active .split-modal-inner::before {
-ms-transform: rotate(24deg);
transform: rotate(24deg);
opacity: 0.3;
transition-delay: 0.4s, 0.4s;
}
.split-modal-inner::after {
content: '';
position: fixed;
z-index: 1;
top: 100%;
left: 100%;
-ms-transform: translate(-76%, -86%);
transform: translate(-76%, -86%);
opacity: 0;
transition: transform 0.6s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.6s;
width: 300px;
height: 300px;
will-change: transform, opacity;
}
.split-modal--active .split-modal-inner::after {
-ms-transform: translate(-96%, -86%);
transform: translate(-96%, -86%);
opacity: 0.3;
transition-delay: 0.4s, 0.4s;
}
@media (min-width: 1200px) {
.split-modal-inner::after {
width: 500px;
height: 500px;
}
}
.split-modal-col {
z-index: 3;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%;
display: -ms-flexbox;
display: flex;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.split-modal-col:first-child {
opacity: 0;
transition: opacity 0.5s 0.4s;
}
@media (min-width: 1101px) {
.split-modal-col:first-child {
padding-left: 20px;
padding-right: 100px;
}
}
@media (min-width: 1400px) {
.split-modal-col:first-child {
padding-right: 180px;
}
}
@media (min-width: 1800px) {
.split-modal-col:first-child {
padding-right: 260px;
}
}
.split-modal--active .split-modal-col:first-child {
opacity: 1;
transition-delay: 0.2s;
}
@media (min-width: 1101px) {
.split-modal-col:last-child {
padding-left: 100px;
padding-right: 20px;
}
}
@media (min-width: 1400px) {
.split-modal-col:last-child {
padding-left: 180px;
}
}
@media (min-width: 1800px) {
.split-modal-col:last-child {
padding-left: 260px;
}
}
.split-modal-col > div {
width: 100%;
}
@media (max-width: 1100px) {
.split-modal-col {
width: calc(100% + 160px);
margin-left: -80px;
margin-right: -80px;
padding-left: 100px;
padding-right: 100px;
}
}
@media (max-width: 767px) {
.split-modal-col {
width: calc(100% + 20px);
margin-left: -10px;
margin-right: -10px;
padding-left: 30px;
padding-right: 30px;
}
}
.split-modal-col--left {
padding-top: 100px;
padding-bottom: 50px;
}
@media (min-width: 500px) {
.split-modal-col--left {
padding-bottom: 100px;
}
}
@media (min-width: 800px) {
.split-modal-col--left {
padding-top: 150px;
padding-bottom: 150px;
}
}
@media (min-width: 1200px) {
.split-modal-col--left {
padding-top: 200px;
padding-bottom: 200px;
}
}
.split-modal-col--right {
position: relative;
overflow: hidden;
}
.split-modal-col--right::before {
content: '';
position: absolute;
top: 50%;
left: 40px;
display: block;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='307.6' height='131.21' viewBox='0 0 307.6 131.21'%3E%3Cpath fill='%23000000' d='M307.6,78.06l-63.37,53.14C196.17,73.9,110.45,66.38,53.14,114.43L0,51.06a218.34,218.34,0,0,1,307.6,27Z'/%3E%3C/svg%3E") top left no-repeat;
/* stylelint-disable-line */
width: 308px;
height: 132px;
opacity: 0;
-ms-transform: translateX(-30%);
transform: translateX(-30%);
transition: transform 0.6s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.6s;
}
.split-modal--active .split-modal-col--right::before {
opacity: 0.1;
-ms-transform: none;
transform: none;
transition-delay: 0.2s;
}
.split-modal-info {
margin-left: -20px;
margin-right: -20px;
line-height: 1.8;
}
.split-modal-info__col {
display: inline-block;
vertical-align: top;
width: 50%;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 2.22222rem;
}
.split-modal-info__col .btn {
padding: 29px;
}
@media (max-width: 450px) {
.split-modal-info__col {
width: 100%;
}
}
.split-modal-info__heading {
margin-top: 1rem;
margin-bottom: 1.11111rem;
line-height: 1.2;
}
.split-modal-social {
list-style: none;
margin: 0;
}
@media (max-width: 1100px) {
.split-modal,
.split-modal-inner {
display: block;
background: #3e3750;
}
.split-modal {
/* stylelint-disable declaration-no-important */
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.4s !important;
/* stylelint-enable declaration-no-important */
will-change: transform, opacity;
}
.split-modal:not(.split-modal--active) {
-ms-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
}
.split-modal-inner::before, .split-modal-inner::after {
/* stylelint-disable declaration-no-important */
display: none !important;
background: #8b5cdd !important;
opacity: 0 !important;
/* stylelint-enable declaration-no-important */
position: absolute;
}
.split-modal-inner::before {
left: -10%;
width: 90%;
}
.split-modal-inner::after {
-ms-transform: translate(-54%, -144%);
transform: translate(-54%, -144%);
}
.split-modal--active .split-modal-inner::after {
-ms-transform: translate(-74%, -144%);
transform: translate(-74%, -144%);
}
.split-modal--active .split-modal-inner::before,
.split-modal--active .split-modal-inner::after {
/* stylelint-disable declaration-no-important */
opacity: 0.1 !important;
/* stylelint-enable declaration-no-important */
}
.split-modal::before,
.split-modal::after {
display: none;
will-change: auto;
}
.split-modal-col:first-child {
background: #fff;
}
.split-modal-col--right::before {
display: none;
}
}
.scroller-page {
width: 100%;
position: relative;
margin-left: 0;
z-index: 50;
}
/* stylelint-disable declaration-block-no-duplicate-properties */
.scroller-page-nav {
width: 40%;
display: block;
list-style: none;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
top: 0;
bottom: 0;
left: 0;
z-index: 2;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
}
.scroller-page-nav::before {
content: '';
display: block;
width: 1px;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-color: #eaeaea;
}
@media (min-width: 2120px) {
.scroller-page-nav::before {
left: 15%;
}
}
@media (min-width: 950px) {
.scroller-page-nav {
width: calc(50% - 100px);
left: 100px;
}
}
@media (min-width: 1200px) {
.scroller-page-nav {
width: calc(50% - 180px);
left: 180px;
}
}
@media (min-width: 1800px) {
.scroller-page-nav {
width: calc(50% - 260px);
left: 260px;
}
}
@media (max-width: 739px) {
.scroller-page-nav {
display: none;
}
}
.scroller-page-nav__list {
width: 220px;
margin-bottom: 0;
margin-left: 0;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.scroller-page-nav__list > li {
list-style: none;
}
/* stylelint-disable declaration-no-important */
.scroller-page-nav__item {
width: 100%;
float: left;
clear: both;
position: relative;
}
.scroller-page-nav__item:nth-child(1) span {
animation-delay: 0.3s !important;
}
.landing .scroller-page-nav__item:nth-child(1) span {
animation-delay: 1.9s !important;
}
.scroller-page-nav__item:nth-child(2) span {
animation-delay: 0.4s !important;
}
.landing .scroller-page-nav__item:nth-child(2) span {
animation-delay: 2s !important;
}
.scroller-page-nav__item:nth-child(3) span {
animation-delay: 0.5s !important;
}
.landing .scroller-page-nav__item:nth-child(3) span {
animation-delay: 2.1s !important;
}
.scroller-page-nav__item:nth-child(4) span {
animation-delay: 0.6s !important;
}
.landing .scroller-page-nav__item:nth-child(4) span {
animation-delay: 2.2s !important;
}
.scroller-page-nav__item:nth-child(5) span {
animation-delay: 0.7s !important;
}
.landing .scroller-page-nav__item:nth-child(5) span {
animation-delay: 2.3s !important;
}
.scroller-page-nav__item:nth-child(6) span {
animation-delay: 0.8s !important;
}
.landing .scroller-page-nav__item:nth-child(6) span {
animation-delay: 2.4s !important;
}
.scroller-page-nav__item:nth-child(7) span {
animation-delay: 0.9s !important;
}
.landing .scroller-page-nav__item:nth-child(7) span {
animation-delay: 2.5s !important;
}
.scroller-page-nav__item:nth-child(8) span {
animation-delay: 1s !important;
}
.landing .scroller-page-nav__item:nth-child(8) span {
animation-delay: 2.6s !important;
}
.scroller-page-nav__item:nth-child(9) span {
animation-delay: 1.1s !important;
}
.landing .scroller-page-nav__item:nth-child(9) span {
animation-delay: 2.7s !important;
}
.scroller-page-nav__item:nth-child(10) span {
animation-delay: 1.2s !important;
}
.landing .scroller-page-nav__item:nth-child(10) span {
animation-delay: 2.8s !important;
}
.scroller-page-nav__item:nth-child(11) span {
animation-delay: 1.3s !important;
}
.landing .scroller-page-nav__item:nth-child(11) span {
animation-delay: 2.9s !important;
}
.scroller-page-nav__item:nth-child(12) span {
animation-delay: 1.4s !important;
}
.landing .scroller-page-nav__item:nth-child(12) span {
animation-delay: 3s !important;
}
/* stylelint-enable declaration-block-no-duplicate-properties */
.scroller-page-nav__link {
color: #a0a0a0;
display: inline-block;
vertical-align: middle;
font-size: 1.11111rem;
line-height: 1;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
transition: all 0.2s;
overflow: hidden;
}
.scroller-page-nav--visible .scroller-page-nav__link {
overflow: visible;
}
.scroller-page-nav__link::before {
position: absolute;
/* stylelint-disable block-closing-brace-newline-after */
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
/* stylelint-enable block-closing-brace-newline-after */
content: '';
display: inline-block;
width: 30px;
height: 1px;
left: -24px;
background-color: rgba(51, 51, 51, 0.3);
transition: transform 0.2s;
-ms-transform-origin: left;
transform-origin: left;
-ms-transform: scaleX(0);
transform: scaleX(0);
}
.scroller-page-nav__link span {
display: inline-block;
transition: transform 0.3s cubic-bezier(0.42, 0.01, 0.23, 1);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.hero-loaded.fonts-loaded .scroller-page-nav__link span {
animation: scrollerNavSlideIn 0.3s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
.scroller-page-nav--visible .scroller-page-nav__link span {
animation: none !important;
-ms-transform: none !important;
transform: none !important;
transition-delay: 0s !important;
}
.scroller-page-nav--visible .scroller-page-nav__link.-active {
color: #333;
}
.scroller-page-nav--visible .scroller-page-nav__link.-active::before {
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.scroller-page-nav--visible .scroller-page-nav__link.-active span {
-ms-transform: translateX(16px) !important;
transform: translateX(16px) !important;
}
/* stylelint-enable declaration-no-important */
.scroller-page-nav__link--external::after {
content: '';
display: block;
position: absolute;
top: 6px;
left: 100%;
margin-left: 3px;
width: 16px;
height: 16px;
background: url("../img/svg/icon-launch.svg") top left no-repeat;
background-size: 16px 16px;
opacity: 0;
transition: transform 0.3s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.3s;
}
.scroller-page-nav__link--external.-active::after {
-ms-transform: translateX(16px);
transform: translateX(16px);
opacity: 1;
}
@keyframes scrollerNavSlideIn {
from {
transform: translateX(-100%);
}
to {
transform: none;
}
}
.scroller-page-scroller {
pointer-events: none;
width: 50%;
padding-top: 240px;
top: 0;
right: 0;
bottom: 0;
z-index: 2;
-ms-transform-origin: right;
transform-origin: right;
transition: transform 0.2s ease-in-out;
}
@media (max-width: 1799px) {
.scroller-page-scroller {
padding-top: 190px;
}
}
@media (max-width: 1399px) {
.scroller-page-scroller {
padding-top: 139px;
}
}
@media (max-width: 949px) {
.scroller-page-scroller {
padding-top: 80px;
}
}
@media (max-width: 859px) {
.scroller-page-scroller {
width: 60%;
}
}
@media (max-width: 739px) {
.scroller-page-scroller {
position: static;
width: 100%;
}
}
.scroller-page-scroller--fixed {
pointer-events: auto;
}
@media (min-width: 740px) {
.scroller-page-scroller--fixed {
position: fixed;
}
}
.scroller-page-scroller--expand {
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.scroller-page-scroller__list {
margin-bottom: 0;
margin-left: 0;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
will-change: transform;
}
.scroller-page-scroller__list > li {
list-style: none;
}
.scroller-page-scroller__item {
position: relative;
display: block;
opacity: 0;
-ms-transform: translateY(20px);
transform: translateY(20px);
transition: transform 0.7s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.7s;
}
@media (min-width: 600px) {
.scroller-page-scroller__item {
-ms-transform: translateY(40px);
transform: translateY(40px);
}
}
.scroller-page-scroller__item:nth-child(1) {
transition-delay: 0s;
}
.scroller-page-scroller__item:nth-child(2) {
transition-delay: 0.2s;
}
.scroller-page-scroller__item:nth-child(3) {
transition-delay: 0.4s;
}
.scroller-page-scroller__item:nth-child(4) {
transition-delay: 0.6s;
}
.scroller-page-scroller__item:nth-child(5) {
transition-delay: 0.8s;
}
.scroller-page-scroller__item:nth-child(6) {
transition-delay: 1s;
}
.scroller-page-scroller__item:nth-child(7) {
transition-delay: 1.2s;
}
.scroller-page-scroller__item:nth-child(8) {
transition-delay: 1.4s;
}
.scroller-page-scroller__item:nth-child(9) {
transition-delay: 1.6s;
}
.scroller-page-scroller__item:nth-child(10) {
transition-delay: 1.8s;
}
.scroller-page-scroller__item:nth-child(11) {
transition-delay: 2s;
}
.scroller-page-scroller__item:nth-child(12) {
transition-delay: 2.2s;
}
.scroller-page-scroller__item--visible {
opacity: 1;
-ms-transform: none;
transform: none;
}
.scroller-page-scroller__link {
display: block;
position: relative;
background-position: center;
background-repeat: no-repeat;
}
.scroller-page-scroller__link::after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #3e3750;
opacity: 0;
transition: opacity 0.4s;
}
.scroller-page-scroller__link:hover::after {
opacity: 0.5;
}
.scroller-page-scroller__item:nth-child(even) .scroller-page-scroller__link {
background-color: #3e3750;
}
.scroller-page-scroller__link img {
opacity: 0;
transition: opacity 0.7s;
will-change: opacity;
}
.scroller-page-scroller__item.-loaded .scroller-page-scroller__link img {
opacity: 1;
}
.scroller-page-scroller__details {
position: absolute;
bottom: 74px;
left: 70px;
opacity: 1;
color: #fff;
z-index: 2;
transition: opacity 0.8s;
pointer-events: none;
}
@media (min-width: 740px) {
.scroller-page-scroller__item:hover .scroller-page-scroller__details::after {
opacity: 1;
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.scroller-page-scroller__details::after {
content: '';
display: block;
position: absolute;
bottom: -30%;
left: 0;
width: 24px;
height: 24px;
/* stylelint-disable string-quotes */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 24 24'%3E%3Cpath d='M22 12l-4-4v3H3v2h15v3z'/%3E%3C/svg%3E");
/* stylelint-enable string-quotes */
background-size: 24px 24px;
-ms-transform: translateX(-20px);
transform: translateX(-20px);
opacity: 0;
transition: transform 0.2s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.3s;
}
.scroller-page-scroller__item:hover .scroller-page-scroller__details::after {
transition-delay: 0.4s, 0.4s;
}
@media (max-width: 739px) {
.scroller-page-scroller__details {
pointer-events: auto;
position: relative;
bottom: auto;
left: auto;
padding: 25px 15px 15px;
color: #333;
display: block;
}
}
.scroller-page-scroller__heading {
margin-top: 0;
margin-bottom: 0;
opacity: 0;
-ms-transform: translateY(20px);
transform: translateY(20px);
transition: opacity 0.4s 0.3s, transform 0.4s 0.3s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.scroller-page-scroller__item:hover .scroller-page-scroller__heading {
opacity: 1;
-ms-transform: none;
transform: none;
transition-delay: 0s;
}
@media (max-width: 739px) {
.scroller-page-scroller__heading {
margin-bottom: 8px;
opacity: 1;
-ms-transform: none;
transform: none;
}
}
.scroller-page-scroller__summary {
display: block;
margin-bottom: 8px;
opacity: 0;
-ms-transform: translateY(20px);
transform: translateY(20px);
transition: opacity 0.4s 0.1s, transform 0.4s 0.1s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.scroller-page-scroller__item:hover .scroller-page-scroller__summary {
opacity: 1;
-ms-transform: none;
transform: none;
transition-delay: 0.2s, 0.2s;
}
@media (max-width: 739px) {
.scroller-page-scroller__summary {
line-height: 1.45;
opacity: 1;
-ms-transform: none;
transform: none;
}
}
.scroller-page-scroller__view-btn {
color: #8b5cdd;
padding-left: 25px;
position: relative;
text-decoration: none;
text-transform: lowercase;
display: none;
line-height: 1.45;
}
.scroller-page-scroller__view-btn:hover {
text-decoration: underline;
}
.scroller-page-scroller__view-btn::before {
position: absolute;
/* stylelint-disable block-closing-brace-newline-after */
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
/* stylelint-enable block-closing-brace-newline-after */
content: '';
display: block;
width: 16px;
height: 1px;
background-color: #8b5cdd;
left: 0;
}
@media (max-width: 739px) {
.scroller-page-scroller__view-btn {
display: inline-block;
}
}
.scroller-page .big-squiggle {
position: fixed;
z-index: 2;
bottom: 20%;
left: 50%;
margin-left: -159px;
width: 228.4px;
/* stylelint-disable selector-no-qualifying-type */
/* stylelint-enable selector-no-qualifying-type */
}
.scroller-page .big-squiggle div {
opacity: 0;
transition: transform 0.8s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.4s;
-ms-transform: translateX(-33.33333%);
transform: translateX(-33.33333%);
}
.scroller-page .big-squiggle div.skrollable {
transition: none;
}
@media (max-width: 739px) {
.scroller-page .big-squiggle {
display: none;
}
}
.scroller-page-scroller--fixed + .big-squiggle div {
opacity: 1;
-ms-transform: none;
transform: none;
}
@media (min-width: 600px) {
.block-image {
display: -ms-flexbox;
display: flex;
}
}
.block-image__block {
position: relative;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: 0 -10px;
}
.block-image__block > div {
background: #fff;
padding: 30px;
}
.block-image__block h3,
.block-image__block p {
width: 100%;
max-width: 300px;
}
.block-image__block h3 {
margin-bottom: 20px;
}
@media (min-width: 600px) {
.block-image__block {
width: calc(50% - 40px);
margin: 0 20px;
}
.block-image__block::before {
content: '';
display: block;
padding-top: 100%;
}
.block-image__block > div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0 40px;
}
}
.block-image__block--primary,
.block-image__block--nimbus {
color: #fff;
}
.block-image__block--primary > div {
background: #8b5cdd;
}
.block-image__block--nimbus > div {
background: #333;
}
/* stylelint-disable declaration-no-important */
.block-image__image {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: 40px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
}
@media (min-width: 600px) {
.block-image__image {
width: calc(50% - 40px);
margin: 0 20px;
transition-delay: 0.6s, 0.6s !important;
}
}
.block-image__image > div {
position: relative;
}
.block-image--analyse .block-image__image > div {
width: 100.37594%;
}
.block-image--organise .block-image__image > div {
width: 77.06767%;
}
.block-image--strategise .block-image__image > div {
width: 84.73684%;
}
.block-image--implement .block-image__image > div {
width: 73.00752%;
}
.block-image--amplify .block-image__image > div {
width: 89.09774%;
}
.block-image--refine .block-image__image > div {
width: 75.11278%;
}
@media (min-width: 600px) {
.block-image--analyse .block-image__image > div {
width: 80.37594%;
}
.block-image--organise .block-image__image > div {
width: 57.06767%;
}
.block-image--strategise .block-image__image > div {
width: 64.73684%;
}
.block-image--implement .block-image__image > div {
width: 53.00752%;
}
.block-image--amplify .block-image__image > div {
width: 69.09774%;
}
.block-image--refine .block-image__image > div {
width: 55.11278%;
}
}
@media (min-width: 1400px) {
.block-image--analyse .block-image__image > div {
width: 70.37594%;
}
.block-image--organise .block-image__image > div {
width: 47.06767%;
}
.block-image--strategise .block-image__image > div {
width: 54.73684%;
}
.block-image--implement .block-image__image > div {
width: 43.00752%;
}
.block-image--amplify .block-image__image > div {
width: 59.09774%;
}
.block-image--refine .block-image__image > div {
width: 45.11278%;
}
}
.block-image__image > div::before {
content: '';
display: block;
}
.block-image--analyse .block-image__image > div::before {
padding-top: 59.78608%;
}
.block-image--organise .block-image__image > div::before {
padding-top: 79.75036%;
}
.block-image--strategise .block-image__image > div::before {
padding-top: 70.48204%;
}
.block-image--implement .block-image__image > div::before {
padding-top: 92.97734%;
}
.block-image--amplify .block-image__image > div::before {
padding-top: 58.70657%;
}
.block-image--refine .block-image__image > div::before {
padding-top: 95.76092%;
}
.block-image__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* stylelint-enable declaration-no-important */
.block-image:nth-child(odd) .block-image__block {
-ms-flex-order: -1;
order: -1;
}
.eczar {
font-family: "Eczar", serif;
}
.events__month-container::after {
content: '';
display: table;
clear: both;
}
.events__month-container:first-child hr {
display: none;
}
.events__date {
font-size: 1.77778rem;
margin-bottom: 0.3rem;
}
@media (max-width: 1400px) {
.events__date {
font-size: 1.44444rem;
}
}
.events__title {
margin: 0;
margin-bottom: 2rem;
font-size: 4.44444rem;
overflow: hidden;
}
@media (max-width: 1400px) {
.events__title {
font-size: 3.33333rem;
}
}
.events__subtitle {
margin: 0;
font-size: 1rem;
overflow: hidden;
}
@media (max-width: 1400px) {
.events__subtitle {
font-size: 0.88889rem;
}
}
.events__month-heading {
clear: both;
padding-top: 6%;
}
.events__month-heading hr {
border: 0;
height: 4px;
background-color: #333;
margin: 0 10px;
}
.events__month-heading h2 {
font-size: 1rem;
text-align: center;
margin: 2rem 0;
}
.events-item .events-item__inner {
background-color: #8b61da;
color: #fff;
}
.events-item .events-item__inner .events-item__date,
.events-item .events-item__inner .events-item__network {
color: #fff;
}
.events-item .events-item__inner .events-item__network {
fill: #fff;
}
.events-item:nth-child(4n + 2) .events-item__inner, .events-item:nth-child(4n + 5) .events-item__inner, .events-item:nth-child(6n + 3) .events-item__inner {
background-color: #3b3454;
}
.body--martinique .events-item:nth-child(4n + 2) .events-item__inner, .body--martinique .events-item:nth-child(4n + 5) .events-item__inner, .body--martinique .events-item:nth-child(6n + 3) .events-item__inner {
background-color: #fff;
color: #8b61da;
}
.body--martinique .events-item:nth-child(4n + 2) .events-item__inner .events-item__date,
.body--martinique .events-item:nth-child(4n + 2) .events-item__inner .events-item__network,
.body--martinique .events-item:nth-child(4n + 2) .events-item__inner .events-item__heading, .body--martinique .events-item:nth-child(4n + 5) .events-item__inner .events-item__date,
.body--martinique .events-item:nth-child(4n + 5) .events-item__inner .events-item__network,
.body--martinique .events-item:nth-child(4n + 5) .events-item__inner .events-item__heading, .body--martinique .events-item:nth-child(6n + 3) .events-item__inner .events-item__date,
.body--martinique .events-item:nth-child(6n + 3) .events-item__inner .events-item__network,
.body--martinique .events-item:nth-child(6n + 3) .events-item__inner .events-item__heading {
color: #8b61da;
}
.body--martinique .events-item:nth-child(4n + 2) .events-item__inner .events-item__network, .body--martinique .events-item:nth-child(4n + 5) .events-item__inner .events-item__network, .body--martinique .events-item:nth-child(6n + 3) .events-item__inner .events-item__network {
fill: #8b61da;
}
.events-item:nth-child(4n + 2) .events-item__inner, .events-item:nth-child(4n + 3) .events-item__inner {
background-color: #e8dff7;
color: #8b61da;
}
.body--martinique .events-item:nth-child(4n + 2) .events-item__inner .events-item__heading, .body--martinique .events-item:nth-child(4n + 3) .events-item__inner .events-item__heading {
color: #8b61da;
}
.events-item:nth-child(4n + 2) .events-item__inner .events-item__date,
.events-item:nth-child(4n + 2) .events-item__inner .events-item__network, .events-item:nth-child(4n + 3) .events-item__inner .events-item__date,
.events-item:nth-child(4n + 3) .events-item__inner .events-item__network {
color: #8b61da;
}
.events-item:nth-child(4n + 2) .events-item__inner .events-item__network, .events-item:nth-child(4n + 3) .events-item__inner .events-item__network {
fill: #8b61da;
}
@media (max-width: 599px) {
.events-item {
max-width: 410px;
margin: 0 auto;
float: none;
}
}
.events-item__inner {
transition: transform 0.2s ease-in-out;
}
.events-item__inner > * {
pointer-events: none;
}
.events-item__inner:hover {
-ms-transform: scale(0.97);
transform: scale(0.97);
}
.events-item__body {
transition: transform 0.1s ease-out;
margin-top: 0;
}
.events__content-center {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
}
.events-item__date {
display: inline-block;
font-size: 1.22222rem;
line-height: 1;
margin-bottom: 10%;
}
@media (max-width: 1400px) {
.events-item__date {
font-size: 1rem;
}
}
.events-item__heading {
line-height: 1;
font-size: 1.77778rem;
font-family: "Eczar", serif;
}
.grid__inner:hover .events-item__heading {
opacity: 1;
}
@media (max-width: 1400px) {
.events-item__heading {
font-size: 18px;
}
}
.events-item__squiggle {
background: url("../img/svg/squiggle-repeating.svg") top left repeat-x;
background-size: cover;
width: 90px;
height: 11px;
display: block;
margin: 0 auto;
}
@media (max-width: 1400px) {
.events-item__squiggle {
width: 70px;
height: 9px;
}
}
.events-item__network {
text-align: left;
text-transform: capitalize;
left: 8.7%;
bottom: 7.1%;
max-width: 82%;
}
@media (max-width: 1400px) {
.events-item__network {
font-size: 0.61111rem;
height: 17px;
}
}
.events-item__pin-icon {
width: 11px;
height: 15px;
float: left;
margin-right: 10px;
position: relative;
top: 5px;
}
.events-item__pin-icon svg {
width: 11px;
height: 15px;
}
@media (max-width: 1400px) {
.events-item__pin-icon {
top: 2px;
}
}
.events-item__venue-name {
width: 82%;
display: inline-block;
line-height: 1.1;
}
.events-item__reply-icon {
width: 19px;
float: right;
}
.events-item__reply-icon svg {
width: 100%;
height: auto;
}
.events-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 57px;
background-color: #fff;
color: #333;
border-bottom: 1px solid #333;
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), height 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), border-bottom 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), background-color 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
transform: translateY(-103%) translateZ(0);
opacity: 0;
z-index: 100;
}
.events-nav.active {
height: 100vh;
border-bottom: 1px solid #8b5cdd;
background-color: #8b5cdd;
}
.body--events_index.-mobile-nav-active .events-nav {
z-index: 99;
}
@media (max-width: 799px) {
.events-nav {
height: 39px;
}
}
@media (max-width: 580px) {
.events-nav {
height: 34px;
}
}
.events-nav__share-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #8b5cdd;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1), z-index 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
overflow: hidden;
transform: translateY(-700px) translateZ(0);
z-index: -1;
}
.events-nav.active .events-nav__share-overlay {
opacity: 1;
transform: translateY(0) translateZ(0);
z-index: 1;
}
.events-nav__share-overlay-inner {
position: absolute;
/* stylelint-disable block-closing-brace-newline-after */
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* stylelint-enable block-closing-brace-newline-after */
max-width: 680px;
margin: 0 auto;
top: 43%;
}
@media (max-width: 949px) {
.events-nav__share-overlay-inner {
top: 36%;
}
}
@media (max-width: 420px) {
.events-nav__share-overlay-inner {
top: 30%;
}
}
.events.-in-view.-active + .events-nav {
transform: translateY(0) translateZ(0);
opacity: 1;
}
@media (max-width: 949px) {
.events.-in-view.-active + .events-nav {
transform: translateY(80px) translateZ(0);
}
}
.events-nav__list {
margin-bottom: 0;
margin-left: 0;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
margin: 0 auto;
}
.events-nav__list > li {
list-style: none;
}
@media (max-width: 949px) {
.events-nav__list {
padding-left: 70px;
padding-right: 70px;
}
}
@media (max-width: 580px) {
.events-nav__list {
padding: 0;
margin-left: 0;
margin-right: 60px;
width: 100px;
height: 100%;
float: right;
cursor: pointer;
display: none;
}
}
.events-nav__item {
padding-top: 9px;
padding-bottom: 8px;
width: 100%;
text-align: center;
cursor: pointer;
/* stylelint-disable declaration-no-important */
/* stylelint-enable declaration-no-important */
}
.events-nav__item button {
border: 0;
background: none;
padding: 0;
}
.events-nav__item span {
display: inline-block;
padding: 0 1px;
position: relative;
line-height: 1.9;
pointer-events: none;
}
.events-nav__item span::after {
content: '';
background-color: #8b61da;
position: absolute;
bottom: 0;
left: 0;
height: 1px;
width: 0%;
transition: width 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.events-nav__item:hover span::after {
width: 100%;
}
@media (max-width: 799px) {
.events-nav__item {
padding-top: 3px;
padding-bottom: 4px;
}
}
@media (max-width: 580px) {
.events-nav__item {
display: none;
padding-top: 1px;
padding-bottom: 1px;
}
.events-nav.-mob-open .events-nav__item {
position: static;
display: block;
background-color: #fff;
}
.events-nav.-mob-open .events-nav__item:nth-child(even) {
background-color: #f0f0f0;
}
}
@media (max-width: 580px) {
.events-nav__item.-selected {
display: block;
background-color: #8b5cdd !important;
color: #fff;
}
}
.events-nav__share-block {
display: block;
position: absolute;
top: 0;
right: 0;
height: 57px;
width: 190px;
background-color: #333;
font-family: "GT-Pressura-Mono", Courier, monospace;
font-size: 0.83333rem;
color: #fff;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
z-index: 100;
overflow: hidden;
}
.events-nav__share-block:hover {
background-color: #8b5cdd;
}
.events-nav.active .events-nav__share-block {
background-color: #333;
}
@media (max-width: 1800px) {
.events-nav__share-block {
width: 140px;
}
}
@media (max-width: 1200px) {
.events-nav__share-block {
width: 60px;
}
}
@media (max-width: 799px) {
.events-nav__share-block {
height: 39px;
}
}
@media (max-width: 580px) {
.events-nav__share-block {
height: 33px;
}
}
.events-nav__share-icon,
.events-nav__close-icon {
display: inline-block;
width: 16px;
margin-right: 10px;
}
.events-nav__share-icon svg,
.events-nav__close-icon svg {
width: 100%;
height: auto;
vertical-align: middle;
}
@media (max-width: 1200px) {
.events-nav__share-icon,
.events-nav__close-icon {
margin-right: 0;
}
.events-nav__share-icon svg,
.events-nav__close-icon svg {
width: 16px;
height: 18px;
}
}
.events-nav__close-icon {
width: 10px;
}
.events-nav__close-icon svg {
width: 10px;
height: 10px;
}
@media (max-width: 1200px) {
.events-nav__share-text {
display: none;
}
}
.events-nav__share-state {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 101;
height: 100%;
opacity: 0;
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.events-nav__share-state.active {
z-index: 102;
opacity: 1;
-ms-transform: translateY(0);
transform: translateY(0);
}
.events-nav__share-state-inner {
position: absolute;
/* stylelint-disable block-closing-brace-newline-after */
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* stylelint-enable block-closing-brace-newline-after */
}
@media (max-width: 1200px) {
.events-nav__share-state-inner {
height: 36px;
}
}
.events-nav__share-overlay-heading {
color: #fff;
font-family: "Eczar", serif;
text-align: center;
font-size: 1.77778rem;
}
.events-nav__social-list {
margin-bottom: 0;
margin-left: 0;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
width: 692px;
}
.events-nav__social-list > li {
list-style: none;
}
.events-nav__social-list::after {
content: '';
display: table;
clear: both;
}
@media (max-width: 949px) {
.events-nav__social-list {
width: 302px;
}
}
@media (max-width: 420px) {
.events-nav__social-list {
width: 182px;
}
}
.events-nav__social-item {
fill: #fff;
background-color: #333;
display: block;
float: left;
width: 226px;
height: 100px;
transition: background-color 0.2s;
cursor: pointer;
}
.events-nav__social-item svg {
width: 40px;
height: auto;
margin: 0 auto;
display: block;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
}
.events-nav__social-item:nth-child(2) {
margin: 0 1px;
}
.events-nav__social-item:hover {
background-color: #d1bef1;
}
.events-nav__social-item * {
pointer-events: none;
}
@media (max-width: 949px) {
.events-nav__social-item {
width: 100px;
height: 60px;
}
}
@media (max-width: 420px) {
.events-nav__social-item {
width: 60px;
height: 34px;
}
}
.events-nav__social-item--facebook svg {
width: 56px;
}
@media (max-width: 949px) {
.events-nav__social-item--facebook svg {
width: 40px;
}
}
@media (max-width: 420px) {
.events-nav__social-item--facebook svg {
width: 32px;
}
}
.events-nav__social-item--twitter svg {
width: 50px;
}
@media (max-width: 949px) {
.events-nav__social-item--twitter svg {
width: 40px;
}
}
@media (max-width: 420px) {
.events-nav__social-item--twitter svg {
width: 36px;
}
}
.events-nav__social-item--linkedin svg {
width: 30px;
}
@media (max-width: 949px) {
.events-nav__social-item--linkedin svg {
width: 22px;
}
}
@media (max-width: 420px) {
.events-nav__social-item--linkedin svg {
width: 20px;
}
}
/**
* Subscribe form
*/
.subscribe {
font-size: 0;
position: relative;
display: inline-block;
vertical-align: top;
}
.site-main .subscribe {
opacity: 0;
}
.hero-loaded.fonts-loaded .site-main .subscribe {
animation: fadeup 0.5s 1.8s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
.subscribe > * {
display: inline-block;
vertical-align: top;
}
.subscribe label {
position: absolute;
top: 0;
left: 31px;
line-height: 80px;
cursor: text;
transition: opacity 0.2s;
font-size: 14px;
}
@media (max-width: 767px) {
.subscribe label {
left: 21px;
line-height: 60px;
font-size: 10px;
}
}
.subscribe input,
.subscribe button {
-webkit-appearance: none;
appearance: none;
background: none;
border: 2px solid #655f73;
border-radius: 0;
height: 80px;
padding: 0;
transition: border 0.2s;
}
@media (max-width: 767px) {
.subscribe input,
.subscribe button {
height: 60px;
}
}
.subscribe input {
width: 268px;
padding: 0 30px;
font-size: 16px;
}
@media (max-width: 767px) {
.subscribe input {
width: 198px;
padding: 0 20px;
}
}
.subscribe input:focus {
outline: 0;
}
.subscribe button {
border-left: 0;
width: 79px;
}
@media (max-width: 767px) {
.subscribe button {
width: 59px;
}
}
.subscribe button div {
margin: auto;
/* stylelint-disable string-quotes */
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 24 24'%3E%3Cpath d='M22 12l-4-4v3H3v2h15v3z'/%3E%3C/svg%3E") center center no-repeat;
/* stylelint-enable string-quotes */
background-size: cover;
width: 24px;
height: 24px;
transition: transform 0.3s;
}
.site-footer .subscribe button div {
/* stylelint-disable string-quotes */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M22 12l-4-4v3H3v2h15v3z'/%3E%3C/svg%3E");
/* stylelint-enable string-quotes */
}
.subscribe button:hover div {
-ms-transform: translateX(5px);
transform: translateX(5px);
}
.subscribe.-active label, .subscribe.-has-text label {
pointer-events: none;
}
.subscribe.-active label {
opacity: 0.5;
}
.subscribe.-active input,
.subscribe.-active button {
border-color: #8b5cdd;
}
.site-footer .subscribe.-active input, .site-footer
.subscribe.-active button {
border-color: #fff;
}
.subscribe.-has-text label {
opacity: 0;
transition: none;
}
.body--subscribe .intro {
opacity: 0;
}
.body--subscribe .site-section__squiggle {
margin-top: 0;
}
.body--subscribe.hero-loaded.fonts-loaded .intro {
animation: fadeup 0.5s 1.6s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
.careers-collage {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.careers-collage__col {
width: calc(33.3333333% - 40px);
-ms-flex: none;
flex: none;
margin-left: 20px;
margin-right: 20px;
}
@media (max-width: 1199px) {
.careers-collage__col {
width: calc(50% - 40px);
}
}
@media (max-width: 499px) {
.careers-collage__col {
width: calc(100% - 40px);
}
}
.careers-collage__col > div {
position: relative;
margin-top: 40px;
}
.careers-collage__col img,
.careers-collage__col > div > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
/* stylelint-disable declaration-no-important */
height: 100% !important;
/* stylelint-enable declaration-no-important */
}
@media (max-width: 499px) {
.careers-collage__col:nth-child(1) {
margin-top: -40px;
}
}
.careers-collage__col:nth-child(1) > div:nth-child(1) {
padding-top: 81.90955%;
}
.careers-collage__col:nth-child(1) > div:nth-child(2) {
padding-top: 83.9196%;
}
@media (min-width: 500px) {
.careers-collage__col:nth-child(2) {
margin-top: -40px;
}
}
.careers-collage__col:nth-child(2) > div:nth-child(1) {
padding-top: 140.17595%;
}
.careers-collage__col:nth-child(2) > div:nth-child(2) {
padding-top: 75.07331%;
}
@media (max-width: 1199px) {
.careers-collage__col:nth-child(3) {
display: none;
}
}
.careers-collage__col:nth-child(3) > div:nth-child(1) {
padding-top: 75.07331%;
}
.careers-collage__col:nth-child(3) > div:nth-child(2) {
padding-top: 119.06158%;
}
/* Top-level site structure */
::selection {
background: #8b5cdd;
color: #fff;
text-shadow: none;
}
/* stylelint-disable selector-no-vendor-prefix */
::-moz-selection {
background: #8b5cdd;
color: #fff;
text-shadow: none;
}
/* stylelint-enable selector-no-vendor-prefix */
/*
.news-view {
}
*/
.news-view__baseline {
border-bottom: 1px solid #eaeaea;
margin: 0 20px;
}
.news-share__items {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: -2.22222rem;
}
.news-share__item {
width: 100%;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 20px;
padding-right: 20px;
text-align: center;
margin-top: 2.22222rem;
}
@media (min-width: 600px) {
.news-share__item {
width: 33.3333333%;
}
}
@media (min-width: 1400px) {
.news-share__item {
width: 16.6666666%;
}
}
.news-share__item .btn {
width: 170px;
vertical-align: top;
padding-right: 0;
padding-left: 0;
}
@media (min-width: 600px) {
.news-share__item .btn {
width: 100%;
}
}
.news-share__item.caption {
width: 100%;
text-align: center;
}
@media (min-width: 1400px) {
.news-share__item.caption {
width: 16.6666666%;
text-align: left;
}
}
/*
.news-related {
}
*/
.service-view {
background: none;
}
.service-columns {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
text-align: center;
margin: 0 20px;
}
.service-column__title {
margin-bottom: 4.44444rem;
}
.service-column__squiggle {
margin-right: auto;
margin-left: auto;
width: 79px;
height: 8px;
}
/* stylelint-disable declaration-no-important */
.service-column {
width: 100%;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 20px;
padding-right: 20px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.service-column > div {
margin-top: -40px;
}
.service-column.-nimbus {
background: #333;
margin-bottom: 40px;
}
.service-column.-nimbus .service-column__title {
color: #a0a0a0;
}
.service-column.-primary {
background: #8b5cdd;
margin-top: 40px;
animation-delay: 2.4s !important;
}
.landing .service-column.-primary {
animation-delay: 3.3s !important;
}
.service-column.-primary .service-column__title {
color: rgba(255, 255, 255, 0.6);
}
.service-column.-primary .service-column__squiggle {
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.service-column.-primary .service-column__squiggle path {
fill: #3e3750;
}
@media (min-width: 600px) {
.service-column {
width: 50%;
}
}
/* stylelint-enable declaration-no-important */
.service-column__list {
margin-bottom: 0;
margin-left: 0;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
margin-bottom: 4.44444rem;
}
.service-column__list > li {
list-style: none;
}
/*
.service-column__item {
}
*/
.service-column__link {
line-height: 1.5;
color: #fff;
display: inline-block;
position: relative;
overflow: hidden;
}
.service-column__link::after {
content: '';
display: block;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
-ms-transform: translateX(-101%);
transform: translateX(-101%);
transition: transform 0.2s;
background-color: #fff;
}
.service-column__link:hover::after {
-ms-transform: translateX(0);
transform: translateX(0);
}
.case-study-block__admin-view-link {
padding: 7px;
display: inline-block;
line-height: 1;
color: #8b5cdd;
background-color: #fff;
position: absolute;
top: 50.2%;
right: 0;
opacity: 0;
z-index: -1;
-ms-transform: translateY(0);
transform: translateY(0);
transition: transform 0.5s, opacity 0.5s, z-index 0.5s step-end;
}
.case-study-block__inner {
margin-right: auto;
margin-left: auto;
display: block;
position: relative;
z-index: 2;
width: 100%;
height: 0;
padding-bottom: 100%;
opacity: 0;
-ms-transform: translateY(30px);
transform: translateY(30px);
}
.case-study-block__inner:hover .case-study-block__admin-view-link {
-ms-transform: translateY(-100%);
transform: translateY(-100%);
z-index: 1;
opacity: 1;
transition: transform 0.5s, opacity 0.5s, z-index 0.5s step-start;
}
@media (max-width: 499px) {
.case-study-block__inner {
overflow: hidden;
}
}
@media (min-width: 500px) {
.case-study-block__inner {
padding-bottom: 58.3941606%;
}
}
.case-study-block--thin .case-study-block__inner {
width: 63%;
padding-bottom: 0;
height: auto;
}
.case-study-block--thin .case-study-block__inner::before {
content: '';
display: block;
padding-top: 70%;
}
.case-study-block__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.4s;
}
@media (max-width: 499px) {
.case-study-block__img {
height: 100%;
width: auto;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
}
.case-study-block--thin .case-study-block__img {
opacity: 0.5;
}
.case-study-block__box {
position: absolute;
/* stylelint-disable block-closing-brace-newline-after */
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* stylelint-enable block-closing-brace-newline-after */
width: 75%;
}
@media (min-width: 500px) {
.case-study-block__box {
width: 50%;
}
}
@media (min-width: 800px) {
.case-study-block__box {
width: 40%;
}
}
@media (min-width: 1000px) {
.case-study-block__box {
width: 31%;
}
}
@media (min-width: 1400px) {
.case-study-block__box {
width: 430px;
}
}
.case-study-block__box::before {
content: '';
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
background-color: rgba(139, 92, 221, 0.8);
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-ms-transform: scaleY(0);
transform: scaleY(0);
opacity: 0;
}
.case-study-block .squiggle-container {
position: absolute;
bottom: 10%;
right: -40px;
}
@media (min-width: 1100px) {
.case-study-block .squiggle-container {
bottom: 15%;
}
}
@media (min-width: 1650px) {
.case-study-block .squiggle-container {
right: -125px;
}
}
@media (max-width: 767px) {
.case-study-block .squiggle-container {
display: none;
}
}
.case-study-block__title {
position: absolute;
/* stylelint-disable block-closing-brace-newline-after */
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* stylelint-enable block-closing-brace-newline-after */
/* file: global */
/* stylelint-disable declaration-block-no-duplicate-properties */
font-size: 97.5px;
font-size: calc( (45px - 320px * 0.06944) + 6.94444vw);
/* stylelint-enable declaration-block-no-duplicate-properties */
color: #fff;
margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
@media screen and (max-width: 320px) {
.case-study-block__title {
/* file: global */
font-size: 45px;
}
}
@media screen and (min-width: 1400px) {
.case-study-block__title {
/* file: global */
font-size: 120px;
}
}
.case-study-block__title span {
display: inline-block;
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.case-study-block__subtitle {
/* file: global */
/* stylelint-disable declaration-block-no-duplicate-properties */
font-size: 11px;
font-size: calc( (10px - 320px * 0.00556) + 0.55556vw);
/* stylelint-enable declaration-block-no-duplicate-properties */
color: #fff;
margin-bottom: 0;
font-family: "GT-Pressura-Mono", Courier, monospace;
text-align: center;
position: absolute;
bottom: 17%;
left: 0;
width: 100%;
overflow: hidden;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
@media screen and (max-width: 320px) {
.case-study-block__subtitle {
/* file: global */
font-size: 10px;
}
}
@media screen and (min-width: 1400px) {
.case-study-block__subtitle {
/* file: global */
font-size: 16px;
}
}
.case-study-block__subtitle span {
display: inline-block;
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.case-study-block__subtitle::before {
content: '';
display: inline-block;
vertical-align: middle;
height: 1px;
width: 20px;
background-color: #fff;
margin-right: 10px;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
-ms-transform: scaleX(0);
transform: scaleX(0);
}
@media (min-width: 600px) {
.case-study-block__subtitle::before {
width: 30px;
margin-right: 20px;
}
}
.case-study-block__inner.-in-view {
transition: transform 0.6s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.6s;
opacity: 1;
-ms-transform: none;
transform: none;
}
.case-study-block__inner.-in-view .case-study-block__title {
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.case-study-block__inner.-in-view .case-study-block__title span {
transition: transform 0.6s 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
-ms-transform: none;
transform: none;
}
.case-study-block__inner.-in-view .case-study-block__box::before {
transition: transform 0.6s 0.8s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.6s 0.8s;
-ms-transform: none;
transform: none;
opacity: 1;
}
.case-study-block__inner.-in-view .case-study-block__subtitle {
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.case-study-block__inner.-in-view .case-study-block__subtitle span {
transition: transform 0.6s 1.2s cubic-bezier(0.42, 0.01, 0.23, 1);
-ms-transform: none;
transform: none;
}
.case-study-block__inner.-in-view .case-study-block__subtitle::before {
transition: transform 0.6s 1.2s cubic-bezier(0.42, 0.01, 0.23, 1);
-ms-transform: none;
transform: none;
}
.case-study-block__inner.-in-view.-settled .case-study-block__box::before {
transition: transform 0.4s cubic-bezier(0.42, 0.01, 0.23, 1);
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.case-study-block__inner.-in-view.-settled:hover {
/* stylelint-disable selector-max-specificity */
/* stylelint-enable selector-max-specificity */
}
.case-study-block__inner.-in-view.-settled:hover .case-study-block__img {
opacity: 0.8;
}
.case-study-block__inner.-in-view.-settled:hover .case-study-block__box::before {
-ms-transform: scale(1.05);
transform: scale(1.05);
}
@media (min-width: 800px) {
.case-study-header__columns {
display: -ms-flexbox;
display: flex;
}
}
.case-study-header__column.-main {
padding-left: 20px;
padding-right: 20px;
}
@media (min-width: 800px) {
.case-study-header__column.-main {
-ms-flex: 0 1 66.6666666%;
flex: 0 1 66.6666666%;
margin-top: -11px;
}
.case-study-header__column.-main p {
margin: 0;
}
}
@media (min-width: 1400px) {
.case-study-header__column.-main {
padding-left: calc(16.666666667% + 20px);
}
}
@media (min-width: 600px) {
.case-study-header__column.-details {
display: -ms-flexbox;
display: flex;
}
}
@media (min-width: 800px) {
.case-study-header__column.-details {
display: block;
-ms-flex: 0 1 33.333333333%;
flex: 0 1 33.333333333%;
margin-left: 0;
width: auto;
}
}
@media (min-width: 1400px) {
.case-study-header__column.-details {
padding-left: 16.666666667%;
}
}
.case-study-header__detail {
margin-bottom: 1.11111rem;
padding: 0 20px;
float: left;
width: 50%;
}
.case-study-header__detail:nth-child(2n+1) {
clear: left;
}
@media (min-width: 600px) {
.case-study-header__detail {
width: 100%;
-ms-flex: 0 1 25%;
flex: 0 1 25%;
}
}
.case-study-header__detail-title {
margin-bottom: 5px;
line-height: 30px;
}
.case-study-header__detail-value {
color: #a0a0a0;
line-height: 1.4;
font-size: 0.94444rem;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.case-study-header__detail-value a {
color: #a0a0a0;
border-bottom: 0;
transition: color 0.3s;
}
.case-study-header__detail-value a:hover {
color: #333;
}
.case-study-header__detail-value--list {
list-style: none;
margin: 0;
padding: 0;
}
.case-study-header__detail-value--list li {
display: inline;
}
.case-study-header__detail-value--list li:not(:last-child)::after {
content: ', ';
}
.case-study-stats {
text-align: center;
color: #8b5cdd;
position: relative;
}
.case-study-stats__title {
margin-bottom: 2.22222rem;
}
@media (min-width: 800px) {
.case-study-stats__title {
margin-bottom: 4.44444rem;
}
}
@media (min-width: 1200px) {
.case-study-stats__title {
margin-bottom: 6.66667rem;
}
}
.case-study-stats__columns {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
background: rgba(227, 223, 236, 0.2);
padding-top: 12%;
padding-bottom: 12%;
}
.case-study-stats__columns::after {
content: '';
display: block;
position: absolute;
top: 100%;
left: 50%;
-ms-transform: translate(-50%, -50%) rotate(-90deg);
transform: translate(-50%, -50%) rotate(-90deg);
}
@media (min-width: 800px) {
.case-study-stats__columns {
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around;
}
}
.case-study-stats__column {
padding: 20px;
}
@media (min-width: 600px) {
.case-study-stats__column {
padding: 40px 20px;
}
}
@media (min-width: 800px) {
.case-study-stats__column {
-ms-flex: 0 1 33.333333333%;
flex: 0 1 33.333333333%;
padding: 0 20px;
}
}
.case-study-stats__value {
margin: 0;
font-feature-settings: 'tnum';
}
.case-study-stats__btn {
display: inline-block;
right: 20px;
bottom: 20px;
position: absolute;
color: #8b5cdd;
}
@media (min-width: 800px) {
.case-study-stats__btn {
right: 70px;
bottom: 70px;
}
}
.case-study-stats__btn-arrow {
display: inline-block;
vertical-align: middle;
width: 9px;
height: 20px;
margin-left: 20px;
}
.case-study-next {
text-align: center;
}
.case-study-next__title {
color: #a0a0a0;
margin-bottom: 2.22222rem;
}
.case-study-next__link {
line-height: 1.4;
color: inherit;
}
.case-studies {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
}
.case-studies-nav {
list-style: none;
margin: 0;
-ms-flex: 1 0 260px;
flex: 1 0 260px;
text-align: center;
line-height: 1.5;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.case-studies-nav a {
opacity: 0.3;
transition: opacity 0.3s;
color: #fff;
/* stylelint-disable selector-no-qualifying-type */
/* stylelint-enable selector-no-qualifying-type */
}
.case-studies-nav a[aria-selected] {
opacity: 1;
}
.case-studies-nav a:not([aria-selected]):hover {
opacity: 0.5;
}
.case-study-item__title {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.case-study-item__link {
display: block;
opacity: 0.8;
}
.case-study-items {
position: relative;
width: 100%;
-ms-flex: 0 1 800px;
flex: 0 1 800px;
}
.case-study-items::before {
content: '';
display: block;
padding-top: 100%;
}
.case-study-item {
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.case-study-item img {
max-width: 100%;
}
.case-study-item--top {
z-index: 1;
}
.case-study-item__img {
position: relative;
}
.case-study-item__img::before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #8b5cdd;
-ms-transform-origin: bottom;
transform-origin: bottom;
transition: transform 0.45s cubic-bezier(0.42, 0.01, 0.23, 1);
}
.case-study-item--active .case-study-item__img::before {
-ms-transform: scaleY(0);
transform: scaleY(0);
}
.case-study-item--top:not(.case-study-item--active) .case-study-item__img::before {
-ms-transform-origin: top;
transform-origin: top;
}
/**
* Team
*/
.team {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: start;
align-items: flex-start;
margin-top: 80px;
margin-bottom: 60px;
}
@media (min-width: 1000px) {
.team {
margin-top: -13%;
}
}
.person {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: calc(100% - 40px);
margin: 0 20px;
position: relative;
}
@media (max-width: 599px) {
.person:not(:first-child) {
margin-top: 120px;
}
}
@media (min-width: 600px) {
.person {
width: calc(50% - 40px);
}
}
@media (min-width: 1100px) {
.person {
width: calc(33.3333333% - 40px);
}
}
.person__headshot {
position: relative;
background: #3e3750;
}
.person__headshot::before {
content: '';
display: block;
padding-top: 151.16279%;
}
.person__headshot img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-width: 600px) {
.person:nth-child(2) .person__headshot {
margin-top: 86.04651%;
}
.person:nth-child(2n + 3) .person__headshot {
margin-top: -44.18605%;
}
.person:nth-child(2n + 4) .person__headshot {
margin-top: 41.86047%;
}
}
@media (min-width: 1100px) {
.person:nth-child(3) .person__headshot {
margin-top: 172.09302%;
}
.person:nth-child(3n + 4) .person__headshot {
margin-top: -130.23256%;
}
.person:nth-child(3n + 5) .person__headshot {
margin-top: -44.18605%;
}
.person:nth-child(3n + 6) .person__headshot {
margin-top: 41.86047%;
}
}
.person__info {
position: absolute;
bottom: -60px;
right: 0;
left: 40px;
background: #8b5cdd;
color: #fff;
padding: 26px 32px;
}
@media (min-width: 1440px) {
.person__info {
padding: 45px 52px;
}
}
.person__name {
margin: 0 0 14px;
}
.person__title {
margin: 0;
padding-left: 30px;
position: relative;
line-height: 1.2;
}
@media (min-width: 800px) {
.person__title {
padding-left: 45px;
}
}
.person__title::before {
content: '';
display: block;
position: absolute;
top: 9px;
left: 0;
width: 20px;
height: 1px;
background: rgba(255, 255, 255, 0.3);
}
@media (min-width: 800px) {
.person__title::before {
top: 11px;
width: 30px;
}
}
@media (min-width: 1440px) {
.person__title::before {
width: 30px;
}
}
/**
* Clients
*/
.about-clients {
text-align: center;
}
.about-clients .flickity-page-dots {
display: none;
}
.about-clients__intro {
font-family: "Calluna", Times, serif;
line-height: 1.4;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.about-clients__intro p {
margin-bottom: 0;
}
.about-clients__grid {
white-space: nowrap;
margin-top: 70px;
}
@media (min-width: 700px) {
.about-clients__grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media (max-width: 699px) {
.about-clients__grid {
margin-left: -20px;
margin-right: -20px;
}
.about-clients__grid::after {
content: 'flickity';
display: none;
}
.about-clients__grid:not(.flickity-enabled) {
overflow: hidden;
}
}
@media (min-width: 800px) {
.about-clients__grid {
margin-top: 110px;
}
}
@media (min-width: 1200px) {
.about-clients__grid {
margin-top: 140px;
}
}
.about-clients__grid .dot {
width: 6px;
height: 6px;
background-color: #3e3750;
opacity: 1;
position: relative;
margin: 0 4px;
transition: background-color 0.2s;
}
.about-clients__grid .dot.is-selected {
background-color: #fff;
}
.about-clients__item {
display: inline-block;
width: 65%;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.about-clients__item > div {
max-width: 180px;
position: relative;
margin: 0 auto;
}
.about-clients__item > div::before {
content: '';
display: block;
padding-top: 50%;
}
@media (min-width: 700px) {
.about-clients__item > div {
margin: 6% auto;
}
}
@media (min-width: 800px) {
.about-clients__item > div {
margin: 15% auto;
}
}
.about-clients__item img {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto !important;
/* stylelint-disable-line declaration-no-important */
}
@media (min-width: 700px) {
.about-clients__item {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
opacity: 0;
-ms-transform: translateY(20px);
transform: translateY(20px);
transition: transform 0.7s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.7s;
}
}
@media (min-width: 700px) and (min-width: 600px) {
.about-clients__item {
-ms-transform: translateY(40px);
transform: translateY(40px);
}
}
@media (min-width: 700px) {
.about-clients__item:nth-last-child(1), .about-clients__item:nth-last-child(2) {
padding-bottom: 0;
}
.about-clients__item:nth-child(1) {
transition-delay: 0s;
}
.about-clients__item:nth-child(2) {
transition-delay: 0.1s;
}
.about-clients__item:nth-child(3) {
transition-delay: 0.2s;
}
.about-clients__item:nth-child(4) {
transition-delay: 0.3s;
}
.about-clients__item:nth-child(5) {
transition-delay: 0.4s;
}
.about-clients__item:nth-child(6) {
transition-delay: 0.5s;
}
.about-clients__item:nth-child(7) {
transition-delay: 0.6s;
}
.about-clients__item:nth-child(8) {
transition-delay: 0.7s;
}
.about-clients__item:nth-child(9) {
transition-delay: 0.8s;
}
.about-clients__item:nth-child(10) {
transition-delay: 0.9s;
}
.about-clients__item:nth-child(11) {
transition-delay: 1s;
}
.about-clients__item:nth-child(12) {
transition-delay: 1.1s;
}
.about-clients__item:nth-child(13) {
transition-delay: 1.2s;
}
.about-clients__item:nth-child(14) {
transition-delay: 1.3s;
}
.about-clients__item:nth-child(15) {
transition-delay: 1.4s;
}
.about-clients__item:nth-child(16) {
transition-delay: 1.5s;
}
.about-clients__item:nth-child(17) {
transition-delay: 1.6s;
}
.about-clients__item:nth-child(18) {
transition-delay: 1.7s;
}
.about-clients__item:nth-child(19) {
transition-delay: 1.8s;
}
.about-clients__item:nth-child(20) {
transition-delay: 1.9s;
}
.about-clients__item:nth-child(21) {
transition-delay: 2s;
}
.-in-view .about-clients__item {
-ms-transform: none;
transform: none;
opacity: 1;
}
}
@media (min-width: 800px) {
.about-clients__item {
-ms-flex: 0 0 33.333333333%;
flex: 0 0 33.333333333%;
}
.about-clients__item:nth-last-child(1), .about-clients__item:nth-last-child(2), .about-clients__item:nth-last-child(3) {
padding-bottom: 0;
}
}
@media (min-width: 1000px) {
.-work .about-clients__item {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
}
.-work .about-clients__item:nth-last-child(1), .-work .about-clients__item:nth-last-child(2), .-work .about-clients__item:nth-last-child(3), .-work .about-clients__item:nth-last-child(4) {
padding-bottom: 0;
}
}
/**
* Awards
*/
.about-awards__title {
margin-bottom: 0;
}
.about-awards__list {
margin-bottom: 0;
margin-left: 0;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
border-top: 1px solid #8b5cdd;
color: #8b5cdd;
}
.about-awards__list > li {
list-style: none;
}
.about-awards__item {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 20px 0;
border-bottom: 1px solid #8b5cdd;
}
.about-awards__item .delete-link {
display: inline-block;
margin-left: 20px;
}
.expose__logo {
position: relative;
}
.expose__logo h1 {
margin: 0 0 0 64px;
}
.expose__logo img {
display: block;
margin: 0 auto;
-ms-transform: translateX(40px);
transform: translateX(40px);
opacity: 0;
}
.fonts-loaded .expose__logo img {
animation: exposelogo 0.7s 0.4s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
.landing.fonts-loaded .expose__logo img {
animation-delay: 1.3s;
}
@keyframes exposelogo {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: none;
}
}
.expose__video.-right > div {
margin-left: auto;
}
.expose__icon {
position: absolute;
top: 50%;
left: 50%;
margin-top: -125px;
margin-left: -216px;
width: 230px;
height: 230px;
}
.expose__aws {
position: relative;
max-width: 333px;
}
.expose__aws::before {
content: '';
display: block;
padding-top: 38.68485%;
}
.expose__aws img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (max-width: 599px) {
.expose__aws {
max-width: 260px;
}
}
@media (min-width: 1000px) {
.expose__aws {
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 1500px) {
.expose__aws {
max-width: 430px;
}
}
.jspdf-demo {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: 20px;
margin-right: 20px;
}
.jspdf-demo__col {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 100%;
}
.jspdf-demo__col.-code {
background-color: #2c283c;
}
.jspdf-demo__col.-preview {
background-color: #e2dfeb;
}
@media (min-width: 750px) {
.jspdf-demo__col {
width: 50%;
}
}
.jspdf-demo__header {
width: 100%;
height: 70px;
padding: 0 22px 0 30px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
@media (min-width: 750px) {
.jspdf-demo__header {
height: 90px;
padding: 0 22px 0 40px;
}
}
.jspdf-demo__header.-purple {
background-color: #8b5cdd;
padding-right: 30px;
}
.jspdf-demo__header.-purple .caption {
color: rgba(255, 255, 255, 0.5);
line-height: 1.2;
-ms-flex: 0 1 30%;
flex: 0 1 30%;
}
@media (min-width: 750px) {
.jspdf-demo__header.-purple {
padding-right: 40px;
}
}
.jspdf-demo__header.-grey {
background-color: #c6c1d3;
}
.jspdf-demo__header.-grey .caption {
color: #fff;
line-height: 1.2;
}
.jspdf-demo__header.-align-left .caption {
display: inline-block;
margin-right: 55px;
}
.jspdf-demo__header.-space-between {
-ms-flex-pack: justify;
justify-content: space-between;
}
.jspdf-demo__header .filter,
.jspdf-demo__header .dropdown-container {
height: 45px;
}
.jspdf-demo__header .filter {
margin-top: 0;
}
.jspdf-demo__header .dropdown {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.jspdf-demo__header .dropdown-container {
top: -3px;
}
.jspdf-demo__header .dropdown__container {
width: 100%;
max-width: 220px;
}
.jspdf-demo__download {
width: auto;
}
.jspdf-demo__download .caption {
vertical-align: middle;
}
.jspdf-demo__download-link {
width: 32px;
height: 32px;
display: inline-block;
vertical-align: middle;
background-color: #a6a2b5;
border-radius: 50%;
margin-left: 20px;
position: relative;
transition: background-color 0.15s;
}
.jspdf-demo__download-link:hover {
background-color: #aeabbc;
}
.jspdf-demo__download-link svg {
position: absolute;
top: 50%;
left: 50%;
margin-top: -9px;
margin-left: -9px;
fill: #fff;
}
@media (min-width: 750px) {
.jspdf-demo__download-link {
width: 55px;
height: 55px;
}
.jspdf-demo__download-link svg {
width: 16px;
height: 16px;
margin-top: -8px;
margin-left: -8px;
}
}
.jspdf-demo__content.-preview {
padding: 40px;
}
.jspdf__logo,
.jspdf__intro,
.jspdf__button {
-ms-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
}
@media (min-width: 600px) {
.jspdf__logo,
.jspdf__intro,
.jspdf__button {
-ms-transform: translateY(40px);
transform: translateY(40px);
}
}
.fonts-loaded.hero-loaded.heading-ready .jspdf__logo, .fonts-loaded.hero-loaded.heading-ready
.jspdf__intro, .fonts-loaded.hero-loaded.heading-ready
.jspdf__button {
animation: fadeup 0.7s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
/* stylelint-disable declaration-no-important */
.jspdf__logo {
width: 243px;
height: 70px;
margin: 0 auto 40px;
}
.jspdf__logo img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.fonts-loaded.hero-loaded.heading-ready .jspdf__logo {
animation-delay: 0.4s;
}
.landing .jspdf__logo {
animation-delay: 1.3s !important;
}
.jspdf__intro {
max-width: 500px;
}
.fonts-loaded.hero-loaded.heading-ready .jspdf__intro {
animation-delay: 0.6s;
}
.landing .jspdf__intro {
animation-delay: 1.5s !important;
}
.fonts-loaded.hero-loaded.heading-ready .jspdf__button {
animation-delay: 0.8s;
}
.landing .jspdf__button {
animation-delay: 1.7s !important;
}
/* stylelint-enable declaration-no-important */
.error404 .site-section__squiggle {
margin-top: 1.7em;
}
.error404__or {
color: #a0a0a0;
margin: 0 10px;
}
.styleguide-view {
background-color: #fff;
}
.styleguide-view .site-container {
display: -ms-flexbox;
display: flex;
}
.styleguide-nav {
-ms-flex: 0 1 20%;
flex: 0 1 20%;
}
.styleguide-nav__list {
margin-bottom: 0;
margin-left: 0;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.styleguide-nav__list > li {
list-style: none;
}
/*
.styleguide-nav__item {
}
*/
.styleguide-nav__link.-current, .styleguide-nav__link:hover {
color: #8b5cdd;
}
.styleguide-body {
-ms-flex: 0 1 80%;
flex: 0 1 80%;
}
.styleguide-body .exampleOutput {
margin-bottom: 2.22222rem;
}
.styleguide-body .exampleOutput .btn {
vertical-align: top;
}
.styleguide-font.-pressura {
font-family: "GT-Pressura-Mono", Courier, monospace;
}
.styleguide-font.-calluna {
font-family: "Calluna", Times, serif;
}
.styleguide-colours {
margin-bottom: 0;
margin-left: 0;
/* stylelint-disable selector-no-type */
/* stylelint-enable selector-no-type */
}
.styleguide-colours > li {
list-style: none;
}
.styleguide-colours__item {
float: left;
width: 25%;
margin-bottom: 20px;
}
.styleguide-colours__item:nth-child(4n+1) {
clear: left;
}
.styleguide-colours__colour {
height: 100px;
}
.styleguide-colours__colour.-primary {
background-color: #8b5cdd;
}
.styleguide-colours__colour.-primary-light {
background-color: #d1bef1;
}
.styleguide-colours__colour.-primary-dark {
background-color: #3e3750;
}
.styleguide-colours__colour.-cloud {
background-color: #f2f1f1;
}
.styleguide-colours__colour.-pastel {
background-color: #e3dfec;
}
.styleguide-colours__colour.-overcast {
background-color: #a0a0a0;
}
.styleguide-colours__colour.-dolphin {
background-color: #6c6978;
}
.styleguide-colours__colour.-inkblot {
background-color: #2d283e;
}
.styleguide-colours__colour.-nimbus {
background-color: #333;
}
.styleguide-colours__colour.-lilywhite {
background-color: #eaeaea;
}
.styleguide-colours__colour.-whitesmoke {
background-color: #f5f5f5;
}
.styleguide-colours__colour.-white {
background-color: #fff;
}
.styleguide-colours__colour.-martinique {
background-color: #3b3454;
}
/**
* translateSquiggle
* moves the background-image position
*
* used by:
* .site-section__squiggle-icon::after
**/
@keyframes translateSquiggle {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0;
}
}
@keyframes fadeup {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: none;
}
}
.fade-up {
transform: translate3d(0, 20px, 0);
opacity: 0;
transition: transform 0.7s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.7s;
}
.fade-up.-in-view,
.-in-view:not(.events):not(.events__month-container) .fade-up {
transform: translate3d(0, 0, 0);
opacity: 1;
}
@media (min-width: 600px) {
.fade-up {
transform: translate3d(0, 40px, 0);
}
}
.fade-up-short {
transform: translate3d(0, 20px, 0);
}
.block-image__block h3,
.fade-up-2 {
transition-delay: 0.2s, 0.2s;
}
.block-image__block p,
.fade-up-3 {
transition-delay: 0.4s, 0.4s;
}
.fade-up-4 {
transition-delay: 0.6s, 0.6s;
}
.fade-up-5 {
transition-delay: 0.8s, 0.8s;
}
.fade-up-6 {
transition-delay: 1s, 1s;
}
.fade-up-7 {
transition-delay: 1.2s, 1.2s;
}
.fade-up-image {
-ms-transform: translateY(20px);
transform: translateY(20px);
opacity: 0;
transition: transform 0.7s 1.7s cubic-bezier(0.42, 0.01, 0.23, 1), opacity 0.7s 1.7s;
}
@media (min-width: 600px) {
.fade-up-image {
-ms-transform: translateY(40px);
transform: translateY(40px);
}
}
.fonts-loaded.heading-ready .fade-up-image.-visible {
-ms-transform: none;
transform: none;
opacity: 1;
}
.landing .fade-up-image {
transition-delay: 2.6s, 2.6s;
}
/* stylelint-disable declaration-no-important */
.service-column,
.fade-up-immediate {
opacity: 0;
-ms-transform: translateY(20px);
transform: translateY(20px);
}
@media (min-width: 600px) {
.service-column,
.fade-up-immediate {
-ms-transform: translateY(40px);
transform: translateY(40px);
}
}
.fonts-loaded.heading-ready .service-column, .fonts-loaded.heading-ready
.fade-up-immediate {
animation: fadeup 0.7s 1.7s cubic-bezier(0.42, 0.01, 0.23, 1) forwards;
}
.fonts-loaded.heading-ready.landing .service-column, .fonts-loaded.heading-ready.landing
.fade-up-immediate {
animation-delay: 2.6s;
}
.-ajaxed .service-column, .-ajaxed
.fade-up-immediate {
animation-delay: 0s !important;
}
/* stylelint-enable declaration-no-important */
.site-footer::before, .split-modal-inner::after {
display: block;
background: #d1bef1;
border-radius: 50%;
}
.site-footer::after, .split-modal-inner::before {
display: block;
background: #8b5cdd;
}
/* stylelint-disable string-quotes */
.site-footer .site-container::before {
display: block;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='307.6' height='131.21' viewBox='0 0 307.6 131.21'%3E%3Cpath fill='%23ffffff' d='M307.6,78.06l-63.37,53.14C196.17,73.9,110.45,66.38,53.14,114.43L0,51.06a218.34,218.34,0,0,1,307.6,27Z'/%3E%3C/svg%3E") top left no-repeat;
width: 308px;
height: 132px;
}
/* stylelint-enable string-quotes */
@keyframes h1 {
to {
transform: none;
}
}
/*# sourceMappingURL=main.min.css.map */