/* noto-sans-cyrillic-ext-400-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-ext-400-normal.7923aca3.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-ext-400-normal.77c43ef6.woff) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* noto-sans-cyrillic-400-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-400-normal.326b1d91.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-400-normal.32aca3d2.woff) format('woff');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* noto-sans-devanagari-400-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-devanagari-400-normal.cf7bb28d.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-devanagari-400-normal.b35e703d.woff) format('woff');
unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
/* noto-sans-greek-ext-400-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-greek-ext-400-normal.58b63284.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-greek-ext-400-normal.53c2d238.woff) format('woff');
unicode-range: U+1F00-1FFF;
}
/* noto-sans-greek-400-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-greek-400-normal.d768f457.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-greek-400-normal.111a424f.woff) format('woff');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* noto-sans-vietnamese-400-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-vietnamese-400-normal.3270de79.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-vietnamese-400-normal.da91c40b.woff) format('woff');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* noto-sans-latin-ext-400-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-latin-ext-400-normal.c917fd3b.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-latin-ext-400-normal.d188e0cf.woff) format('woff');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* noto-sans-latin-400-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-latin-400-normal.f5cd7b61.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-latin-400-normal.922d5bfc.woff) format('woff');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* noto-sans-cyrillic-ext-400-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-ext-400-italic.98c74e03.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-ext-400-italic.467e6164.woff) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* noto-sans-cyrillic-400-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-400-italic.0158e51b.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-400-italic.adfdf89d.woff) format('woff');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* noto-sans-devanagari-400-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-devanagari-400-italic.ea0191d7.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-devanagari-400-italic.302d4cc3.woff) format('woff');
unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
/* noto-sans-greek-ext-400-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-greek-ext-400-italic.f1b04380.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-greek-ext-400-italic.b9896740.woff) format('woff');
unicode-range: U+1F00-1FFF;
}
/* noto-sans-greek-400-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-greek-400-italic.05a9b7d8.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-greek-400-italic.9de7ab71.woff) format('woff');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* noto-sans-vietnamese-400-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-vietnamese-400-italic.784d3132.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-vietnamese-400-italic.d039fbc2.woff) format('woff');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* noto-sans-latin-ext-400-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-latin-ext-400-italic.17805fc0.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-latin-ext-400-italic.b689701c.woff) format('woff');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* noto-sans-latin-400-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-latin-400-italic.e3585787.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-latin-400-italic.33364b3a.woff) format('woff');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* noto-sans-cyrillic-ext-700-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-ext-700-normal.ad4f8931.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-ext-700-normal.44945181.woff) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* noto-sans-cyrillic-700-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-700-normal.f0831d85.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-700-normal.dbb1381f.woff) format('woff');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* noto-sans-devanagari-700-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-devanagari-700-normal.6484d479.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-devanagari-700-normal.16f89790.woff) format('woff');
unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
/* noto-sans-greek-ext-700-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-greek-ext-700-normal.97163347.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-greek-ext-700-normal.9f592e03.woff) format('woff');
unicode-range: U+1F00-1FFF;
}
/* noto-sans-greek-700-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-greek-700-normal.d7f233e9.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-greek-700-normal.ddb38377.woff) format('woff');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* noto-sans-vietnamese-700-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-vietnamese-700-normal.8ea63cd2.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-vietnamese-700-normal.c0e7bc30.woff) format('woff');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* noto-sans-latin-ext-700-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-latin-ext-700-normal.94e5148a.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-latin-ext-700-normal.47e012a0.woff) format('woff');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* noto-sans-latin-700-normal */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-latin-700-normal.6d3b8182.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-latin-700-normal.99af63a8.woff) format('woff');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* noto-sans-cyrillic-ext-700-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-ext-700-italic.943ff04d.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-ext-700-italic.66dea0bc.woff) format('woff');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* noto-sans-cyrillic-700-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-700-italic.8287872f.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-cyrillic-700-italic.278041ae.woff) format('woff');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* noto-sans-devanagari-700-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-devanagari-700-italic.6ea4a5c8.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-devanagari-700-italic.f6ddce3d.woff) format('woff');
unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
/* noto-sans-greek-ext-700-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-greek-ext-700-italic.4ff39d46.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-greek-ext-700-italic.9242f2dd.woff) format('woff');
unicode-range: U+1F00-1FFF;
}
/* noto-sans-greek-700-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-greek-700-italic.31015abf.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-greek-700-italic.73ad0483.woff) format('woff');
unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* noto-sans-vietnamese-700-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-vietnamese-700-italic.d4aa14b3.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-vietnamese-700-italic.532dd04e.woff) format('woff');
unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* noto-sans-latin-ext-700-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-latin-ext-700-italic.dc75f55e.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-latin-ext-700-italic.2bac6610.woff) format('woff');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* noto-sans-latin-700-italic */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/noto-sans-latin-700-italic.c5c603f4.woff2) format('woff2'), url(/7d751ad7/26.3.4/fonts/noto-sans-latin-700-italic.aac6f4eb.woff) format('woff');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/**
* Vendor Styles
*/
/**
* Fonts
* https://fontsource.org/docs/getting-started
*/
/* http://meyerweb.com/eric/tools/css/reset/
v5.0.1 | 20191019
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
display: none;
}
body {
line-height: 1;
}
menu, ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.ss-main {
position: relative;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
color: #666;
width: 100%;
}
.ss-main .ss-single-selected {
display: flex;
cursor: pointer;
width: 100%;
height: 30px;
padding: 6px;
border: 1px solid #dcdee2;
border-radius: 4px;
background-color: #fff;
outline: 0;
box-sizing: border-box;
transition: background-color 0.2s;
}
.ss-main .ss-single-selected.ss-disabled {
background-color: #dcdee2;
cursor: not-allowed;
}
.ss-main .ss-single-selected.ss-open-above {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.ss-main .ss-single-selected.ss-open-below {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.ss-main .ss-single-selected .placeholder {
display: flex;
flex: 1 1 100%;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
width: calc(100% - 30px);
line-height: 1em;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ss-main .ss-single-selected .placeholder * {
display: flex;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
}
.ss-main .ss-single-selected .placeholder .ss-disabled {
color: #dedede;
}
.ss-main .ss-single-selected .ss-deselect {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 0 1 auto;
margin: 0 6px 0 6px;
font-weight: bold;
}
.ss-main .ss-single-selected .ss-deselect.ss-hide {
display: none;
}
.ss-main .ss-single-selected .ss-arrow {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 0 1 auto;
margin: 0 6px 0 6px;
}
.ss-main .ss-single-selected .ss-arrow span {
border: solid #666;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
transition: transform 0.2s, margin 0.2s;
}
.ss-main .ss-single-selected .ss-arrow span.arrow-up {
transform: rotate(-135deg);
margin: 3px 0 0 0;
}
.ss-main .ss-single-selected .ss-arrow span.arrow-down {
transform: rotate(45deg);
margin: -3px 0 0 0;
}
.ss-main .ss-multi-selected {
display: flex;
flex-direction: row;
cursor: pointer;
min-height: 30px;
width: 100%;
padding: 0 0 0 3px;
border: 1px solid #dcdee2;
border-radius: 4px;
background-color: #fff;
outline: 0;
box-sizing: border-box;
transition: background-color 0.2s;
}
.ss-main .ss-multi-selected.ss-disabled {
background-color: #dcdee2;
cursor: not-allowed;
}
.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-disabled {
color: #666;
}
.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-value .ss-value-delete {
cursor: not-allowed;
}
.ss-main .ss-multi-selected.ss-open-above {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.ss-main .ss-multi-selected.ss-open-below {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.ss-main .ss-multi-selected .ss-values {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex: 1 1 100%;
width: calc(100% - 30px);
}
.ss-main .ss-multi-selected .ss-values .ss-disabled {
display: flex;
padding: 4px 5px;
margin: 2px 0px;
line-height: 1em;
align-items: center;
width: 100%;
color: #dedede;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@keyframes scaleIn {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes scaleOut {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}
.ss-main .ss-multi-selected .ss-values .ss-value {
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
align-items: center;
font-size: 12px;
padding: 3px 5px;
margin: 3px 5px 3px 0px;
color: #fff;
background-color: #5897fb;
border-radius: 4px;
animation-name: scaleIn;
animation-duration: 0.2s;
animation-timing-function: ease-out;
animation-fill-mode: both;
}
.ss-main .ss-multi-selected .ss-values .ss-value.ss-out {
animation-name: scaleOut;
animation-duration: 0.2s;
animation-timing-function: ease-out;
}
.ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete {
margin: 0 0 0 5px;
cursor: pointer;
}
.ss-main .ss-multi-selected .ss-add {
display: flex;
flex: 0 1 3px;
margin: 9px 12px 0 5px;
}
.ss-main .ss-multi-selected .ss-add .ss-plus {
display: flex;
justify-content: center;
align-items: center;
background: #666;
position: relative;
height: 10px;
width: 2px;
transition: transform 0.2s;
}
.ss-main .ss-multi-selected .ss-add .ss-plus:after {
background: #666;
content: "";
position: absolute;
height: 2px;
width: 10px;
left: -4px;
top: 4px;
}
.ss-main .ss-multi-selected .ss-add .ss-plus.ss-cross {
transform: rotate(45deg);
}
.ss-content {
position: absolute;
width: 100%;
margin: -1px 0 0 0;
box-sizing: border-box;
border: solid 1px #dcdee2;
z-index: 1010;
background-color: #fff;
transform-origin: center top;
transition: transform 0.2s, opacity 0.2s;
opacity: 0;
transform: scaleY(0);
}
.ss-content.ss-open {
display: block;
opacity: 1;
transform: scaleY(1);
}
.ss-content .ss-search {
display: flex;
flex-direction: row;
padding: 8px 8px 6px 8px;
}
.ss-content .ss-search.ss-hide {
height: 0px;
opacity: 0;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.ss-content .ss-search.ss-hide input {
height: 0px;
opacity: 0;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.ss-content .ss-search input {
display: inline-flex;
font-size: inherit;
line-height: inherit;
flex: 1 1 auto;
width: 100%;
min-width: 0px;
height: 30px;
padding: 6px 8px;
margin: 0;
border: 1px solid #dcdee2;
border-radius: 4px;
background-color: #fff;
outline: 0;
text-align: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-appearance: textfield;
}
.ss-content .ss-search input::-moz-placeholder {
color: #8a8a8a;
vertical-align: middle;
}
.ss-content .ss-search input::placeholder {
color: #8a8a8a;
vertical-align: middle;
}
.ss-content .ss-search input:focus {
box-shadow: 0 0 5px #5897fb;
}
.ss-content .ss-search .ss-addable {
display: inline-flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 22px;
font-weight: bold;
flex: 0 0 30px;
height: 30px;
margin: 0 0 0 8px;
border: 1px solid #dcdee2;
border-radius: 4px;
box-sizing: border-box;
}
.ss-content .ss-addable {
padding-top: 0px;
}
.ss-content .ss-list {
max-height: 200px;
overflow-x: hidden;
overflow-y: auto;
text-align: left;
}
.ss-content .ss-list .ss-optgroup .ss-optgroup-label {
padding: 6px 10px 6px 10px;
font-weight: bold;
}
.ss-content .ss-list .ss-optgroup .ss-option {
padding: 6px 6px 6px 25px;
}
.ss-content .ss-list .ss-optgroup-label-selectable {
cursor: pointer;
}
.ss-content .ss-list .ss-optgroup-label-selectable:hover {
color: #fff;
background-color: #5897fb;
}
.ss-content .ss-list .ss-option {
padding: 6px 10px 6px 10px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ss-content .ss-list .ss-option * {
display: inline-block;
}
.ss-content .ss-list .ss-option:hover, .ss-content .ss-list .ss-option.ss-highlighted {
color: #fff;
background-color: #5897fb;
}
.ss-content .ss-list .ss-option.ss-disabled {
cursor: not-allowed;
color: #dedede;
background-color: #fff;
}
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected {
color: #666;
background-color: rgba(88, 151, 251, 0.1);
}
.ss-content .ss-list .ss-option.ss-hide {
display: none;
}
.ss-content .ss-list .ss-option .ss-search-highlight {
background-color: #fffb8c;
}
.ss-main .ss-single-selected {
border: none;
height: auto;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: right;
padding: 11px 40px 11px 8px;
}
.ss-main .ss-single-selected .ss-arrow {
display: none;
}
.ss-main .ss-single-selected .placeholder {
min-height: 18px;
}
.ss-main.select-field__input {
background-image: none;
padding-right: 0;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.tippy-box {
background: #ffffff;
box-shadow: 0 10px 10px 0 rgba(74, 78, 87, 0.2);
border-top: 1px solid rgba(74, 78, 87, 0.1);
animation: dropDown 0.2s ease-in both;
}
.tippy-content {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
text-align: center;
line-height: 20px;
color: #4a4e57;
white-space: pre-line;
justify-content: center;
width: 100%;
padding: 8px;
}
@media (min-width: 768px) {
.tippy-content {
padding: 8px 24px;
}
}
.tippy-content:hover {
background: #ebebeb;
}
.tippy-arrow {
width: 16px;
height: 16px;
color: #ffffff;
}
.tippy-arrow::before {
content: "";
position: absolute;
border-color: transparent;
border-style: solid;
}
.tippy-box[data-placement^=top] > .tippy-arrow::before {
bottom: 8px;
left: 0;
border-width: 8px 8px 0;
border-top-color: initial;
transform-origin: center top;
}
.tippy-box[data-placement^=bottom] > .tippy-arrow {
top: 0;
}
.tippy-box[data-placement^=bottom] > .tippy-arrow::before {
top: -8px;
left: 0;
border-width: 0 8px 8px;
border-color: transparent;
border-bottom-color: rgba(74, 78, 87, 0.1);
transform-origin: center bottom;
}
.tippy-box[data-placement^=bottom] > .tippy-arrow::after {
content: "";
position: absolute;
border-color: transparent;
border-style: solid;
top: -7px;
left: 0;
border-width: 0 8px 8px;
border-bottom-color: initial;
transform-origin: center bottom;
}
.tippy-box:hover .tippy-arrow {
color: #ebebeb;
}
/**
* Base styling
*/
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
html {
height: -moz-fit-content;
height: fit-content;
}
body {
--body-font: "Noto Sans", sans-serif;
--header-font: "Oswald", sans-serif;
--button-border-radius: 8px;
--button-primary-colour: #1f1f1f;
--button-primary-text-colour: #ffffff;
--button-primary-hover-colour: #454545;
--button-secondary-colour: #ebebeb;
--button-secondary-hover-colour: #cdcdcd;
--button-secondary-text-colour: #1f1f1f;
--button-highlight-text-colour: #ffffff;
--button-highlight-colour: #00a505;
--button-highlight-hover-colour: #228e46;
--body-text-color: #1f1f1f;
--title-text-colour: #1f1f1f;
background: #ffffff;
display: flex;
flex-direction: column;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.has-suppressed-highlight button:focus,
body.has-suppressed-highlight input:focus,
body.has-suppressed-highlight select:focus,
body.has-suppressed-highlight summary:focus,
body.has-suppressed-highlight textarea:focus {
outline: none;
}
body.nav-is-open {
overflow: hidden;
}
main {
flex: 1 0 auto;
display: flex;
flex-direction: column;
position: relative;
}
header,
footer {
flex-shrink: 0;
}
select {
border: 0;
background: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
button,
input {
border: 0;
background: none;
cursor: pointer;
margin: 0;
padding: 0;
}
button::-ms-clear,
input::-ms-clear {
display: none;
}
input[type=text] {
min-width: 0;
}
summary {
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
summary::after {
background: none;
}
details[open] summary::after {
background: none;
}
input[type=search],
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
strong,
b {
font-weight: 700;
}
hr {
border: 0;
height: 1px;
background: #a8a8a8;
}
dialog {
border: 0;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.75);
}
input[type=file] {
border: 0;
padding: 0;
}
input[type=file]:focus {
border: 0;
padding: 0;
}
:root {
--content-max-width: 1244px;
--text-colour: #4a4e57;
--alt-text-colour: #d9121f;
--theme-primary-colour: #69141e;
--theme-text-colour: #4a4e57;
}
:root .t-explorer {
--theme-primary-colour: #00cdbe;
--theme-text-colour: #4a4e57;
}
:root .t-creator {
--theme-primary-colour: #c8a0ff;
--theme-text-colour: #4a4e57;
}
:root .t-engineer {
--theme-primary-colour: #ffcd00;
--theme-text-colour: #4a4e57;
}
body {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: var(--body-text-color);
}
a {
color: inherit;
text-decoration: none;
}
a:hover, a:focus {
color: #4a4e57;
text-decoration: none;
}
button:hover {
text-decoration: none;
}
.header {
color: #4a4e57;
font-family: var(--body-font);
font-weight: 400;
}
.o-button:hover, .o-button:focus {
color: #ffffff;
}
.o-button.o-button--secondary:hover, .o-button.o-button--secondary:focus {
color: #1d1d1b;
}
.footer__nav-link > a:hover {
color: #ffffff;
}
.filter-bar__filter {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
line-height: normal;
}
.filter-bar__filter:hover, .filter-bar__filter:focus, .filter-bar__filter.is-active {
color: #ffffff;
}
.language-selector__link:focus {
color: #ffffff;
}
.wysiwyg ol li::before {
display: none;
}
.wysiwyg ul li {
background-image: none;
padding-left: 0;
}
/**
* Components - objects
*/
.o-avatar {
background: #a8a8a8;
border: 3px solid #a8a8a8;
display: inline-flex;
width: 38px;
height: 38px;
border-radius: 9999px;
}
.o-avatar.t-explorer {
background: #00cdbe;
border-color: #00cdbe;
}
.o-avatar.t-creator {
background: #c8a0ff;
border-color: #c8a0ff;
}
.o-avatar.t-engineer {
background: #ffcd00;
border-color: #ffcd00;
}
.o-avatar--large {
width: 72px;
height: 72px;
border-width: 5px;
}
.o-avatar--small {
width: 24px;
height: 24px;
border-width: 2px;
}
.o-badge {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
max-width: 100%;
border-radius: 4px;
padding: 4px 16px;
margin-bottom: 4px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #ffffff;
background-color: #1d1d1b;
}
.o-badge--tutorial {
background-color: #bcbcbc;
color: #1d1d1b;
}
.o-badge--product {
background-color: #d9121f;
}
.o-badge--success {
background-color: #00691e;
}
.o-badge--info {
background-color: #005f69;
}
.o-badge--warning {
background-color: #d76405;
}
.o-badge--error {
background-color: #ef0000;
}
.o-branded-text {
font-weight: 700;
}
.o-branded-text__highlight {
color: #d9121f;
}
.o-button {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
line-height: 1;
padding: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--button-primary-text-colour);
border-radius: var(--button-border-radius);
background-color: var(--button-primary-colour);
cursor: pointer;
}
.o-button:hover {
background-color: var(--button-primary-hover-colour);
}
.o-button:disabled {
pointer-events: none;
}
@media (max-width: 768px) {
.o-button--full-width-mobile {
width: 100%;
}
}
.o-button--small {
padding: 12px 16px;
}
.o-button--danger {
background-color: #d9121f;
}
.o-button--secondary {
color: var(--button-secondary-text-colour);
background-color: var(--button-secondary-colour);
}
.o-button--secondary:hover {
background-color: var(--button-secondary-hover-colour);
}
.o-button--active {
background-color: var(--button-secondary-hover-colour);
}
.o-button--highlight {
color: var(--button-highlight-text-colour);
background-color: var(--button-highlight-colour);
}
.o-button--highlight:hover {
color: var(--button-highlight-text-colour);
background-color: var(--button-highlight-hover-colour);
}
.o-button--ghost {
color: var(--button-secondary-text-colour);
background-color: transparent;
}
.o-button--ghost:hover {
color: var(--button-secondary-text-colour);
background-color: transparent;
}
.is-loading-cards .o-button__load-more, .has-all-items .o-button__load-more {
display: none;
}
.o-button--icon-left,
.o-button--icon-right {
position: relative;
vertical-align: bottom;
padding-left: 40px;
padding-right: 40px;
}
.o-button--small .o-button--icon-left,
.o-button--small .o-button--icon-right {
padding-left: 24px;
padding-right: 24px;
}
.o-button--icon-right .o-button__icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 16px;
}
.o-button--icon-left .o-button__icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 16px;
}
.o-button--blue {
background-color: #3244ff;
color: #ffffff;
}
.o-button--ghost-outlined {
border: 2px solid #a8a8a8;
color: var(--button-secondary-text-colour);
background-color: transparent;
}
.o-button--ghost-outlined:hover {
color: var(--button-secondary-text-colour);
background-color: transparent;
}
.o-show-more {
position: absolute;
bottom: -60px;
width: 120px;
border-radius: 4px;
background-color: #ebebeb;
content: "";
color: #4a4e57;
}
.o-show-more::before {
content: "keyboard_arrow_up";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 58px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
}
.is-retracted .o-show-more::before {
content: "keyboard_arrow_down";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 58px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.form__errors {
margin-bottom: 24px;
}
.form__error {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: #d9121f;
}
.form__field-group {
margin-bottom: 24px;
}
.form__field-group > .input-field {
margin-bottom: 0;
}
.form__field-group > .input-field > .input-field__label {
margin-bottom: 8px;
}
.form__field-group .o-radio {
margin-bottom: 8px;
}
.form__field-group .o-checkbox:last-child {
margin-bottom: 0;
}
.form__legend {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
}
@media (min-width: 768px) {
.form__legend {
font-size: 28px;
line-height: 36px;
}
}
.form__toggle {
display: none;
}
.form__toggle.is-visible {
margin-bottom: 24px;
display: block;
background-color: #ebebeb;
}
.form__toggle.is-visible > .input-field {
padding: 16px;
}
.form__toggle.is-visible > .select-field {
padding: 16px;
margin-bottom: 0;
}
.form__toggle.is-visible > .o-checkbox {
padding: 16px;
margin-bottom: 0;
}
/**
* FormField
*
* To be used as follows:
* @include formField(string fieldName);
* Applies default styling to basic form field elements such as input, label, errors etc.
*
*/
/**
* ToggleField
*
* To be used as follows:
* @include toggleField(string fieldName);
* Applies default styling to toggle form field elements such as checkboxes & radio buttons.
*
*/
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.o-checkbox {
margin-bottom: 24px;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
}
.o-checkbox__input {
opacity: 0;
position: absolute;
z-index: -1;
}
.o-checkbox__input:focus + .o-checkbox__label::before {
outline: 2px solid #3244ff;
outline-offset: 2px;
}
.has-suppressed-highlight .o-checkbox__input:focus + .o-checkbox__label::before {
outline: none;
outline-offset: 0;
box-shadow: 0 0 4px 0 #3244ff;
}
.o-checkbox__label {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
position: relative;
padding-left: 24px;
color: #1d1d1b;
cursor: pointer;
}
.o-checkbox__label::before {
position: absolute;
top: 4px;
left: 0;
content: "";
border: 2px solid #4a4e57;
margin-right: 8px;
display: inline-block;
background-color: #ffffff;
}
.o-checkbox__label > span {
flex: 1;
}
.o-checkbox__label:hover::before {
background: #edeff1;
}
.o-checkbox__error {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
position: relative;
margin-top: 8px;
padding-left: 24px;
color: #d9121f;
}
.o-checkbox__error::before {
content: "error";
font-family: "Material Icons Round";
font-size: 16px;
line-height: 24px;
position: absolute;
top: 0;
left: 0;
}
.o-checkbox__help {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
margin-bottom: 8px;
color: rgba(74, 78, 87, 0.8);
text-align: left;
}
.o-checkbox__help a {
color: #4a4e57;
text-decoration: underline;
}
.o-checkbox__label {
align-items: center;
}
.o-checkbox__label.input-field__label {
font-weight: normal;
}
.o-checkbox__label::before {
height: 18px;
width: 18px;
border-radius: 3px;
align-self: flex-start;
}
.o-checkbox__input:checked + .o-checkbox__label::before {
background-color: #3244ff;
border-radius: 3px;
transform: rotate(0deg) scale(1);
opacity: 1;
border: 2px solid #3244ff;
}
.o-checkbox__input:checked + .o-checkbox__label::after {
content: "";
transform: rotate(45deg) scale(1);
position: absolute;
left: 6px;
top: 6px;
opacity: 1;
width: 6px;
height: 12px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
background-color: transparent;
border-radius: 0;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.o-radio {
margin-bottom: 24px;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
}
.o-radio__input {
opacity: 0;
position: absolute;
z-index: -1;
}
.o-radio__input:focus + .o-radio__label::before {
outline: 2px solid #3244ff;
outline-offset: 2px;
}
.has-suppressed-highlight .o-radio__input:focus + .o-radio__label::before {
outline: none;
outline-offset: 0;
box-shadow: 0 0 4px 0 #3244ff;
}
.o-radio__label {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
position: relative;
padding-left: 24px;
color: #1d1d1b;
cursor: pointer;
}
.o-radio__label::before {
position: absolute;
top: 4px;
left: 0;
content: "";
border: 2px solid #4a4e57;
margin-right: 8px;
display: inline-block;
background-color: #ffffff;
}
.o-radio__label > span {
flex: 1;
}
.o-radio__label:hover::before {
background: #edeff1;
}
.o-radio__error {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
position: relative;
margin-top: 8px;
padding-left: 24px;
color: #d9121f;
}
.o-radio__error::before {
content: "error";
font-family: "Material Icons Round";
font-size: 16px;
line-height: 24px;
position: absolute;
top: 0;
left: 0;
}
.o-radio__help {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
margin-bottom: 8px;
color: rgba(74, 78, 87, 0.8);
text-align: left;
}
.o-radio__help a {
color: #4a4e57;
text-decoration: underline;
}
.o-radio__label.input-field__label {
font-weight: normal;
}
.o-radio__label::before {
width: 18px;
height: 18px;
border-radius: 50%;
flex: 0 0 18px;
align-self: flex-start;
}
.o-radio__input:checked + .o-radio__label::before {
background: transparent;
border-color: #3244ff;
}
.o-radio__input:checked + .o-radio__label::after {
content: "";
position: absolute;
left: 5px;
top: 9px;
width: 8px;
height: 8px;
display: inline-block;
border-radius: 50%;
margin-right: 10px;
background: #3244ff;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.select-field {
margin-bottom: 24px;
display: flex;
flex-direction: column;
}
.select-field [list]::-webkit-calendar-picker-indicator {
margin-top: -4px;
}
.select-field__input {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: #4a4e57;
font-weight: inherit;
border-radius: 4px;
border: 2px solid #7f8695;
background-color: #ffffff;
padding: 10px 8px;
}
.select-field__input:focus {
border: 4px solid #1d1d1b;
padding: 8px 6px;
}
.select-field__input:disabled {
background-color: #edeff1;
cursor: not-allowed;
}
.is-invalid .select-field__input {
border-color: #d9121f;
}
.select-field__input::-moz-placeholder {
color: rgba(74, 78, 87, 0.45);
}
.select-field__input::placeholder {
color: rgba(74, 78, 87, 0.45);
}
.select-field__label {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
color: #1d1d1b;
margin-bottom: 8px;
}
.select-field__label a {
font-weight: 700;
}
.o-form_row__label--disabled {
color: #7f8695;
}
.select-field__label--regular {
font-weight: 400;
}
.select-field__label-required {
font-weight: normal;
}
.select-field__error {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
display: inline-block;
position: relative;
margin-top: 8px;
padding-left: 24px;
color: #d9121f;
}
.select-field__error::before {
content: "error";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
font-size: 16px;
line-height: 24px;
position: absolute;
top: 0;
left: 0;
}
.select-field__help {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: rgba(74, 78, 87, 0.8);
text-align: left;
margin-bottom: 8px;
}
.select-field__help a {
color: #4a4e57;
text-decoration: underline;
}
.select-field__input {
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: calc(100% - 8px) 50%;
padding-right: 40px;
}
.select-field__input:focus {
padding-right: 40px;
}
.select-field__input--no-padding {
padding: 0;
}
.select-field--inline {
margin: 24px 0 0;
}
@media (min-width: 768px) {
.select-field--inline {
flex-direction: row;
align-items: center;
margin: 0;
}
}
.select-field--inline .select-field__label {
margin-bottom: 12px;
}
@media (min-width: 768px) {
.select-field--inline .select-field__label {
margin: 0 12px 0 0;
}
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.input-field {
margin-bottom: 24px;
display: flex;
flex-direction: column;
}
.input-field [list]::-webkit-calendar-picker-indicator {
margin-top: -4px;
}
.input-field__input {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: #4a4e57;
font-weight: inherit;
border-radius: 4px;
border: 2px solid #7f8695;
background-color: #ffffff;
padding: 10px 8px;
}
.input-field__input:focus {
border: 4px solid #1d1d1b;
padding: 8px 6px;
}
.input-field__input:disabled {
background-color: #edeff1;
cursor: not-allowed;
}
.is-invalid .input-field__input {
border-color: #d9121f;
}
.input-field__input::-moz-placeholder {
color: rgba(74, 78, 87, 0.45);
}
.input-field__input::placeholder {
color: rgba(74, 78, 87, 0.45);
}
.input-field__label {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
color: #1d1d1b;
margin-bottom: 8px;
}
.input-field__label a {
font-weight: 700;
}
.o-form_row__label--disabled {
color: #7f8695;
}
.input-field__label--regular {
font-weight: 400;
}
.input-field__label-required {
font-weight: normal;
}
.input-field__error {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
display: inline-block;
position: relative;
margin-top: 8px;
padding-left: 24px;
color: #d9121f;
}
.input-field__error::before {
content: "error";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
font-size: 16px;
line-height: 24px;
position: absolute;
top: 0;
left: 0;
}
.input-field__help {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: rgba(74, 78, 87, 0.8);
text-align: left;
margin-bottom: 8px;
}
.input-field__help a {
color: #4a4e57;
text-decoration: underline;
}
.input-field--with-associated-control {
margin-bottom: 8px;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.o-bar-input {
border: none;
margin: 0;
padding: 4px 0 8px;
}
.o-bar-input__title {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: #ffffff;
}
.o-bar-input__options {
display: flex;
}
.o-bar-input__input {
display: none;
}
.o-bar-input__label {
display: flex;
align-items: center;
justify-content: center;
min-height: 20px;
flex: 1 1 20%;
background-color: #edeff1;
color: #1d1d1b;
margin-right: 8px;
transition: all 0.3s ease;
text-align: center;
font-size: 9px;
font-weight: 700;
line-height: 1.2;
padding: 4px;
cursor: pointer;
}
.o-bar-input__label:last-child {
margin-right: 0;
}
.o-bar-input__input:not(:checked) + .o-bar-input__label:hover {
background-color: #d9121f;
color: #ffffff;
}
.o-bar-input__input:checked + .o-bar-input__label {
background-color: #d9121f;
color: #ffffff;
}
.o-heading-extra-large {
font-family: var(--header-font);
font-weight: 700;
font-size: 44px;
line-height: 52px;
}
@media (min-width: 768px) {
.o-heading-extra-large {
font-size: 48px;
line-height: 56px;
}
}
.o-heading-large {
font-family: var(--header-font);
font-weight: 700;
font-size: 36px;
line-height: 44px;
}
@media (min-width: 768px) {
.o-heading-large {
font-size: 40px;
line-height: 48px;
}
}
.o-heading-medium {
font-family: var(--header-font);
font-weight: 700;
font-size: 28px;
line-height: 36px;
}
@media (min-width: 768px) {
.o-heading-medium {
font-size: 32px;
line-height: 40px;
}
}
.o-heading-small {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
}
@media (min-width: 768px) {
.o-heading-small {
font-size: 28px;
line-height: 36px;
}
}
.o-tick-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.o-tick-list li {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
display: flex;
flex-direction: row;
gap: 16px;
}
.o-tick-list li::before {
content: "check";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
.o-icon {
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 16px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
.o-icon--24 {
font-size: 24px;
}
.o-icon--32 {
font-size: 32px;
}
.o-icon--36 {
font-size: 36px;
}
.o-icon--40 {
font-size: 40px;
}
.o-icon--success {
color: #00691e;
}
.o-icon--blue-circle {
background-repeat: no-repeat;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMTggMzNDMjYuMjg0MyAzMyAzMyAyNi4yODQzIDMzIDE4QzMzIDkuNzE1NzMgMjYuMjg0MyAzIDE4IDNDOS43MTU3MyAzIDMgOS43MTU3MyAzIDE4QzMgMjYuMjg0MyA5LjcxNTczIDMzIDE4IDMzWiIgc3Ryb2tlPSIjMjk3Njc2IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L3N2Zz4=);
}
.o-icon--orange-rhombus {
background-repeat: no-repeat;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMzFfMzUzKSI+DQogICAgICAgIDxwYXRoIGQ9Ik0xNy41NzU3IDEuOTI0MjZDMTcuODEwMSAxLjY4OTk1IDE4LjE4OTkgMS42ODk5NSAxOC40MjQzIDEuOTI0MjZMMzQuMDc1NyAxNy41NzU3QzM0LjMxMDEgMTcuODEwMSAzNC4zMTAxIDE4LjE4OTkgMzQuMDc1NyAxOC40MjQzTDE4LjQyNDMgMzQuMDc1N0MxOC4xODk5IDM0LjMxMDEgMTcuODEwMSAzNC4zMTAxIDE3LjU3NTcgMzQuMDc1N0wxLjkyNDI2IDE4LjQyNDNDMS42ODk5NSAxOC4xODk5IDEuNjg5OTUgMTcuODEwMSAxLjkyNDI2IDE3LjU3NTdMMTcuNTc1NyAxLjkyNDI2WiIgc3Ryb2tlPSIjRkY4QTE1IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQogICAgPC9nPg0KICAgIDxkZWZzPg0KICAgICAgICA8Y2xpcFBhdGggaWQ9ImNsaXAwXzMxXzM1MyI+DQogICAgICAgICAgICA8cmVjdCB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIGZpbGw9IndoaXRlIi8+DQogICAgICAgIDwvY2xpcFBhdGg+DQogICAgPC9kZWZzPg0KPC9zdmc+);
}
.o-icon--purple-flare {
background-repeat: no-repeat;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMTcuNDU2MyAzLjQxNTA5QzE3LjY3MTcgMi45NTM0IDE4LjMyODMgMi45NTM0IDE4LjU0MzcgMy40MTUwOUwyMy4xNTc3IDEzLjMwMjNDMjMuMjE3MyAxMy40MyAyMy4zMiAxMy41MzI3IDIzLjQ0NzcgMTMuNTkyM0wzMy4zMzQ5IDE4LjIwNjNDMzMuNzk2NiAxOC40MjE3IDMzLjc5NjYgMTkuMDc4MyAzMy4zMzQ5IDE5LjI5MzdMMjMuNDQ3NyAyMy45MDc3QzIzLjMyIDIzLjk2NzMgMjMuMjE3MyAyNC4wNyAyMy4xNTc3IDI0LjE5NzdMMTguNTQzNyAzNC4wODQ5QzE4LjMyODMgMzQuNTQ2NiAxNy42NzE3IDM0LjU0NjYgMTcuNDU2MyAzNC4wODQ5TDEyLjg0MjMgMjQuMTk3N0MxMi43ODI3IDI0LjA3IDEyLjY4IDIzLjk2NzMgMTIuNTUyMyAyMy45MDc3TDIuNjY1MDkgMTkuMjkzN0MyLjIwMzQgMTkuMDc4MyAyLjIwMzQgMTguNDIxNyAyLjY2NTA5IDE4LjIwNjNMMTIuNTUyMyAxMy41OTIzQzEyLjY4IDEzLjUzMjcgMTIuNzgyNyAxMy40MyAxMi44NDIzIDEzLjMwMjNMMTcuNDU2MyAzLjQxNTA5WiIgc3Ryb2tlPSIjQUQzMjY1IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8L3N2Zz4=);
}
.o-icon--grey {
color: #767676;
}
.o-software-icon {
background-position: left;
background-repeat: no-repeat;
background-size: contain;
}
.o-software-icon--pcb {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzkiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCAzOSA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMyLjk2NDYgNDEuNzM4OUMzMi45NjQ2IDQ0LjMyMDcgMzAuODcxMiA0Ni40MTYxIDI4LjI5MTggNDYuNDE2MUMyNS43MTI1IDQ2LjQxNjEgMjMuNjE5MSA0NC4zMjA3IDIzLjYxOTEgNDEuNzM4OUMyMy42MTkxIDM5LjE1NzEgMjUuNzEyNSAzNy4wNjE4IDI4LjI5MTggMzcuMDYxOEMzMC44NzEyIDM3LjA2MTggMzIuOTY0NiAzOS4xNTcxIDMyLjk2NDYgNDEuNzM4OVoiIGZpbGw9IiNFRjAwMDAiLz4KPHBhdGggZD0iTTEwLjAwNTggMFY4LjAyNTk4SDBWMzIuODA4NkgxMC4wMDU4VjM1LjY5NkM3LjMwMTg5IDM2LjQ1MDYgNS40MjAzNCAzOC45MjYzIDUuNDIwMzQgNDEuNzMyNkM1LjQyMDM0IDQ1LjE4NzUgOC4yMzAyIDQ4IDExLjY4OCA0OEMxNS4xNDU4IDQ4IDE3Ljk0OTQgNDUuMTg3NSAxNy45NDk0IDQxLjczMjZDMTcuOTQ5NCAzOC45MjYzIDE2LjA2NzkgMzYuNDU2OCAxMy4zNjM5IDM1LjY5NlYyOS40NDExSDMuMzU4MTJWMTEuMzg3M0gxMC45NTkxVjI1Ljc0OTNIMjcuNzEyM1Y4Ljk4MDEySDEzLjM2MzlWMy4zNTUwN0gzNS4zMTMyVjI5LjQzNDhIMjYuNjA5NVYzNS42ODk4QzIzLjkwNTYgMzYuNDQ0MyAyMi4wMjQgMzguOTIwMSAyMi4wMjQgNDEuNzI2NEMyMi4wMjQgNDUuMTgxMiAyNC44MzM5IDQ3Ljk5MzggMjguMjkxNyA0Ny45OTM4QzMxLjc0OTUgNDcuOTkzOCAzNC41NTk0IDQ1LjE4MTIgMzQuNTU5NCA0MS43MjY0QzM0LjU1OTQgMzguOTIwMSAzMi42Nzc4IDM2LjQ1MDYgMjkuOTczOSAzNS42ODk4VjMyLjgwMjRIMzguNTY1NEwzOC42ODM4IDMyLjkzMzNWMEgxMC4wMTIxSDEwLjAwNThaTTE0Ljc2NTggNDEuNzMyNkMxNC43NjU4IDQzLjQzNTEgMTMuMzgyNiA0NC44MTk1IDExLjY3NTUgNDQuODE5NUM5Ljk2ODQ1IDQ0LjgxOTUgOC41ODUzMiA0My40MzUxIDguNTg1MzIgNDEuNzMyNkM4LjU4NTMyIDQwLjAzMDEgOS45Njg0NSAzOC42NDU3IDExLjY3NTUgMzguNjQ1N0MxMy4zODI2IDM4LjY0NTcgMTQuNzY1OCA0MC4wMzAxIDE0Ljc2NTggNDEuNzMyNlpNMTIuMzk4MyAyNC4zMTQ5VjEwLjQzMzJIMjYuMjY2OVYyNC4zMTQ5SDEyLjM5ODNaTTI4LjI5MTcgNDQuODE5NUMyNi41OTA4IDQ0LjgxOTUgMjUuMjEzOSA0My40MzUxIDI1LjIxMzkgNDEuNzMyNkMyNS4yMTM5IDQwLjAzMDEgMjYuNTk3MSAzOC42Mzk1IDI4LjI5MTcgMzguNjM5NUMyOS45ODYzIDM4LjYzOTUgMzEuMzc1NyA0MC4wMjM5IDMxLjM3NTcgNDEuNzMyNkMzMS4zNzU3IDQzLjQ0MTMgMjkuOTkyNiA0NC44MTk1IDI4LjI5MTcgNDQuODE5NVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
}
.o-software-icon--pcb-black {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik00Mi41NyAyNS4wMmgyMC4wMTZ2MjAuMDE2SDQyLjU3ek0zMC4wNjIgODUuMDY2YzAgNC4wOTYgMy4zMzMgNy40MjggNy40MjkgNy40MjhzNy40MjktMy4zMzIgNy40MjktNy40MjhjMC00LjA5OC0zLjMzMy03LjQyOC03LjQyOS03LjQyOHMtNy40MjkgMy4zMzEtNy40MjkgNy40Mjh6Ii8+CiAgICA8cGF0aCBmaWxsPSIjRUYwMDAwIiBkPSJNNzIuNTE4IDc3LjYzOWMtNC4wOTYgMC03LjQyOSAzLjMzLTcuNDI5IDcuNDI4IDAgNC4wOTYgMy4zMzMgNy40MjggNy40MjkgNy40MjhzNy40MjktMy4zMzIgNy40MjktNy40MjhjLS4wMDEtNC4wOTgtMy4zMzQtNy40MjgtNy40MjktNy40Mjh6Ii8+CiAgICA8cGF0aCBmaWxsPSIjMUYxRjFGIiBkPSJNOTIuNTMzIDY1LjA1MVYwSDMyLjQ4NnYxNS4wMTJINy40Njd2NTAuMDM5aDI1LjAydjUuOTYzYy01Ljc3NiAyLjA2Mi05LjkzMSA3LjU3NC05LjkzMSAxNC4wNTMgMCA4LjIzNCA2LjcwMSAxNC45MzQgMTQuOTM1IDE0LjkzNCA4LjIzNiAwIDE0LjkzNS02LjY5OSAxNC45MzUtMTQuOTM0IDAtNi40NzktNC4xNTItMTEuOTktOS45MzEtMTQuMDUzVjU1LjA0M2gtMjUuMDJWMjUuMDJoMjAuMDkydjI1LjAySDY3LjU5VjIwLjAxNkg0Mi40OTRWMTAuMDA4aDQwLjAzMXY0NS4wMzVINjcuNTE0djE1Ljk3MWMtNS43NzggMi4wNjItOS45MzEgNy41NzQtOS45MzEgMTQuMDUzIDAgOC4yMzQgNi43IDE0LjkzNCAxNC45MzUgMTQuOTM0czE0LjkzNS02LjY5OSAxNC45MzUtMTQuOTM0YzAtNi40NzktNC4xNTMtMTEuOTktOS45MzEtMTQuMDUzdi01Ljk2M2gxNS4wMTF6TTQ0LjkxOSA4NS4wNjZjMCA0LjA5Ni0zLjMzMyA3LjQyOC03LjQyOSA3LjQyOHMtNy40MjktMy4zMzItNy40MjktNy40MjhjMC00LjA5OCAzLjMzMy03LjQyOCA3LjQyOS03LjQyOHM3LjQyOSAzLjMzMSA3LjQyOSA3LjQyOHpNNDIuNTcgMjUuMDJoMjAuMDE2djIwLjAxNkg0Mi41N1YyNS4wMnptMjkuOTQ4IDY3LjQ3NGMtNC4wOTYgMC03LjQyOS0zLjMzMi03LjQyOS03LjQyOCAwLTQuMDk4IDMuMzMzLTcuNDI4IDcuNDI5LTcuNDI4czcuNDI5IDMuMzMgNy40MjkgNy40MjhjLS4wMDEgNC4wOTYtMy4zMzQgNy40MjgtNy40MjkgNy40Mjh6Ii8+Cjwvc3ZnPgo=);
}
.o-software-icon--circuit-simulator {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAwCAYAAABKfMccAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAiISURBVHgB7VprbFRFFJ52S0uLCGg1PrECWo2B+IgKQoLhjfIKEE0kAQU1hACGHwICqQGCBiQI4SFglKigmAhRSSEKUhNeP8BACWAQJJFHizxKC4Wy3e4ev68zW+5O797eXbZICV/y5e69d+bMzLlnzpwzs2nqJoOIZOByH3gP2Aq8CywFy3lNS0srV7cyoIBmYEdwBrgPrABrJBZV4GlwI/gW+IC61YBB5YOrwCtgRPyB5Y6B48HWqqkDg8gC3wSPS/IIg9vAjqqpAp3PAeeCoTgD5JT4C9wMbgB3gCVxyhOl4DAwXTUloMMB8FMzaBtHwKlgJ/Au0daTaZR3D/gq+B1Y7lL3PNgXTFNNAexoOBweh2u1NZAgOI0K8CMDfAr8zUUhZ8FHVVMAOvqM6bA9gP4qQaBOc2Nh9qqzFWymbgaYL1dH6923VsfpG4arJCF6yn1lyeT0G6iSQErmFxp/EJe+YDcwD7zXyGaAdBTcBZ4B14LRrxYGZ4DzEEhFVJJA29m4FIEvOh6zvd6Qe1ndCKAT6Zyf4DJj6g3FCEHr/jDYxkVuK3Ao5cK/0JLeM8r26ktviXXIl8Hu6kbAKOJdsFKSx2QXuVxBuJyGI8GghCsYiNYq+UgoFOru0Z8McI8lf65qbIhe6haJ+9LoF7Sk+y259DHLI+GwVE6YIOXZ2XIhLU0u9uwp4bIy1qEltfTo10SrjSIwoBoLRhELpP6U4D0DnxXgGLAn2AN8TXRwddRS3hoX2YwjTgULC+UCbp2sHDcuWq+PR9+6WH1iuH6HaixA+GjR89EJ5hTzwYdFZ5x2nTQz0CHgOvCM26BE5yjBymnT6imj/Lnnom2N9uhbe6tvp8TFJ3khw29BCG6HSwGY43h8CRwBFsZbEfBccDkL/ggZP+HK6XHepSg9/+VAu3aZIetFoEOH6M9/VXxUg0FH/5qzqmoMiPYTTlwC+6kUQbQTXBeprpZLY8Zcs4qOHSV0hFG6nPT60nj3mDUVGbIPFx3otVKpAoTdbczOCUZ/Kc0DIO9J8ACdaGjfvlqaFeUcOMKrPbx7UdzBqUNtrhTty5qr6wEEDJBYp8mkqK1H+bbg+6Kd7RSwk/IJlH1AtNOlb7kKLgdf8FFvkDQMxjrfiJ7yicOY72JLKHebXNPlmpqawaJXFkHQFC3PpXS8zyajO19FotN2X2k5yr0t/sHtgef9yI12hiY7B9wpesVwYnKceswmz9eUlsrFPn3kQk6OVCBOCB08yDrci+jhs32m7rvAE8onRC/lzFO4YtFZbzV95xRzi4m49D7bkNA8cLXEjy45Xfo7ynPpvBd8HPw8EolIRX5+7NKI+3B57RbEFx7tUs5DINfRD037G1USMLL4QZnZ3ic6JNgv9eOjA+x7PAHdwT/FG7SSTqYOw/KZouc3M9CaEKzCjhPIUHGxmK+d6dI25XwCljnaoSk/4WPs0fpcTUaKThOo0GZWmTvBr10UstBNIJegUx5KOIevzpB4i5glTq45rWL4BzrLveGrV6W8RYtYZWRmSugwq0qhuPgAPOsjel/iD7BA9PzPVT6ActngbIndMOK02CTWDjru7wDXWuO6IM4NIdGZ4jYXBfwNTjKKaid6OrRw1KNn5trX1dy/AYauzJ4dG05PmhSVN8ltQFDkZ6I9/UsqQaDOZLYZ3LxZKnr1korOnaVq8WJhogest5WP+/tFr4ZOTHUWGCux5hMxGmzVQEd+EB0M5Zl7zlHuUUZChw5JcOVKqd6+HXe1ounQcuLIWSPaRzzh0VZLsLVFpgDH2VYZrM/5AaoW1caItJbnXWTZAeQvwqROtOfeab3k/mKDSY6tDIdC+LX2mnf0QbO8FOulDNGHSxuMBV60yChYLhcU1PNRFU8/HR3LWBeZ/a3xMpHMZW7CAOQZR1nG9x8gp6hUSQD1ruIyD8IXKJ0nVCa7kyX6gGgdyDm9AyyxijCa7Jeem5tdrx+5dS7nkovof8AypY8uiTa1skTPcye4SeIrZHWzjGQQzzJExw6cYx+Le0bMPdA93O8ob9/+mmVgL6S6qEiM5XRwqfcYFoPTjjHThzyUgYe56ekxPqbUfF1f4wAzgsFgpmoc8ACa+cgx9KnGfolnXDWmp7dps7bl7t2tg2vWKCkpUVmjRqlAfj4tfD7KHHWRezeeO6ctM96wWwpPH5Lu07SLwWFZWVncfVml9CZvPDBtP21S+pQB8uj8hkIhs7LHj38SjxhsncAKtTAQCHwZpxqPI53Wr0/5UXGgizO5U/mA6GyWURy/EJOqKg9yPedpWZaLnHjTJDqF3/HRF+ZQXPoZcbZooNx2a8xL+Y6WcRi8CEYVwGy0M/hrA+3zq3CuvYyfg5Q+IoiHgCnzkdIObalKMcw0OuNVRvQWwEiwi+Mxp0hhtAA1tcXSFCPBh1UKYb4Yl8OfpX6ofN2W4aN9pht1GbUDDCtqfV660egK0OkjmM19L8nm/S5AO6dxgbNXNOEbejgs+qBpCrhaaaccRRU4HX2jddTtgTI73AAOdhSkKTFw2qS0GZWoxECHuf96TstsiF7yuyZQhcEGz1u4PZmnYj8C+8XTvKLog1pl8BgODU1U+ljQOZ/oR143TBRbQJ55+l2m/SDPyL1e0CKWgXOcD+sCDCjkuNLOZZuKnTK3Gnj+y82pAow5ZiM+JtoyAcoQcKbS2/spjQn+R3ActP71uA7AOJeAV+xC9YIuFGLMzsRqCa6vgMz6HlH6b4iJYJ/yDsKSAc9Wfk+gPEOGU4iyixFlb8LYTngFfXEPkYxS6H25BUgLSjTkDttmmAKcBBP5Y0t1Ig7c14maEZhKR5gUzFdttH40rX/HNTJuK8OB28pw4LYyHLjRyuCWNaM/28Mzk2WOZP8hrcrx/taC6CPLti7Pc8Fnpf62flYoFOrmtgfSGPgP8WZIcj2SkYwAAAAASUVORK5CYII=);
}
.o-software-icon--circuit-simulator-black {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgIDxjaXJjbGUgZmlsbD0iI0VGMDAwMCIgY3g9IjU5Ljk4MSIgY3k9IjI5Ljg2MiIgcj0iMi4yODkiLz4KICAgIDxjaXJjbGUgZmlsbD0iI0VGMDAwMCIgY3g9IjMyLjMyOSIgY3k9IjU3LjIzOCIgcj0iMi4yODgiLz4KICAgIDxwYXRoIGZpbGw9IiNFRjAwMDAiIGQ9Ik03Mi42ODQgNjAuMDY2YTIuMjg1IDIuMjg1IDAgMCAwIDIuMjc2IDIuMTg0IDIuMjg5IDIuMjg5IDAgMSAwIDAtNC41NzYgMi4yOSAyLjI5IDAgMCAwLTIuMjg1IDIuMjU4Yy4wMDIuMDM1LjAxMi4wNy4wMTIuMTA1IDAgLjAxLS4wMDMuMDItLjAwMy4wMjl6Ii8+CiAgICA8ZyBmaWxsPSIjMUYxRjFGIj4KICAgICAgICA8cGF0aCBkPSJNNzQuOTYgNjcuMjQyYzQuMDE1IDAgNy4yOC0zLjI2OCA3LjI4LTcuMjc5IDAtNC4wMTYtMy4yNjYtNy4yODEtNy4yOC03LjI4MS0zLjE2NCAwLTUuODU1IDIuMDM1LTYuODU3IDQuODU5aC02LjgxNWMtMS4xNzcgMC0yLjIyLjQzNi0yLjk0IDEuMjI1LS45NTMgMS4wNDctMS4wMiAyLjI5Ny0uOTk2IDIuODR2MzUuODk4YTIuNDk2IDIuNDk2IDAgMSAwIDQuOTkxIDBWNjIuNTMzaDUuODE3YzEuMDQgMi43NDYgMy42OTQgNC43MDkgNi44IDQuNzA5em0wLTkuNTY4YTIuMjkgMi4yOSAwIDAgMSAwIDQuNTc2IDIuMjgzIDIuMjgzIDAgMCAxLTIuMjc2LTIuMTg0YzAtLjAxLjAwMy0uMDIuMDAzLS4wMjkgMC0uMDM1LS4wMS0uMDctLjAxMi0uMTA1YTIuMjkgMi4yOSAwIDAgMSAyLjI4NS0yLjI1OHoiLz4KICAgICAgICA8cGF0aCBkPSJNNjEuMjY5IDUxLjI4MWMuNzU5LS43MTUgMS4xNzgtMS43MzQgMS4xNzgtMi44Njd2LTExLjcxYzIuODAyLTEuMDEzIDQuODE0LTMuNjk0IDQuODE0LTYuODQyIDAtNC4wMTQtMy4yNjUtNy4yNzktNy4yNzktNy4yNzktNC4wMTQgMC03LjI4IDMuMjY1LTcuMjggNy4yNzkgMCAzLjEyNCAxLjk4MyA1Ljc4OCA0Ljc1MyA2LjgxN3YxMC42NjRoLTUuODU0Yy0xLjE3NiAwLTIuMjIuNDM0LTIuOTQgMS4yMjQtLjk1MSAxLjA0Ny0xLjAxOSAyLjI5OC0uOTk0IDIuODQxVjk3LjVhMi40OTUgMi40OTUgMCAxIDAgNC45OSAwVjUyLjMzNGg1Ljc2N2MuNTA4LjAxOCAxLjc5Mi0uMDYzIDIuODQ1LTEuMDUzem0tMS4yODgtMjMuNzA3YTIuMjkgMi4yOSAwIDAgMSAwIDQuNTc3Yy0xLjI2MyAwLTIuMjg5LTEuMDI2LTIuMjg5LTIuMjg5czEuMDI3LTIuMjg4IDIuMjg5LTIuMjg4ek0zOS4yOTUgNjcuMzQyaC05LjI2MXYtMy4yMDFhNy4yNiA3LjI2IDAgMCAwIDIuMjk1LjM3N2M0LjAxNCAwIDcuMjc5LTMuMjY4IDcuMjc5LTcuMjc5IDAtNC4wMTYtMy4yNjYtNy4yODItNy4yNzktNy4yODItMy45NzYgMC03LjIxMSAzLjIwNC03LjI3NCA3LjE2NS0uMDAxLjAzOS0uMDEyLjA3Ni0uMDEyLjExN3YxMS4xNzRjMCAxLjEzMy40MTcgMi4xNSAxLjE3NyAyLjg2NSAxLjA1Mi45OTIgMi4zMzYgMS4wNzIgMi44NDYgMS4wNTVoOS4xNzRWOTcuNWEyLjQ5NSAyLjQ5NSAwIDEgMCA0Ljk5MSAwVjcxLjQwNmMuMDIzLS41NDMtLjA0My0xLjc5NS0uOTk2LTIuODQtLjcyMS0uNzkxLTEuNzY0LTEuMjI0LTIuOTQtMS4yMjR6bS02Ljk2Ni0xMi4zOTNhMi4yOSAyLjI5IDAgMSAxLTIuMjg4IDIuMjg5IDIuMjkgMi4yOSAwIDAgMSAyLjI4OC0yLjI4OXoiLz4KICAgICAgICA8cGF0aCBkPSJNOTAuMzUxIDM4LjUxNGEyOS43MSAyOS43MSAwIDAgMCAxLjAzNS03Ljc3OUM5MS4zODYgMTMuNzg3IDc3LjMyNSAwIDYwLjA0MyAwIDQ3LjYxNCAwIDM2LjU5NyA3LjE2NyAzMS41ODYgMTguMTdjLTguNzY2Ljg3NC0xNS42OTcgNy45ODktMTYuMTE3IDE2LjcyOEM2LjA5MyAzOS4yLjAxOSA0OC4zMzcuMDE5IDU4LjY1M2MwIDE1LjA0NSAxMC43NTkgMjYuMzg5IDI1LjAyNCAyNi4zODlhNS4wNiA1LjA2IDAgMSAwIDAtMTAuMTJjLTguNzc2IDAtMTQuOTA1LTYuNjg5LTE0LjkwNS0xNi4yNyAwLTcuMDgyIDQuNzU2LTEzLjI4MiAxMS44MzctMTUuNDIxbDMuNTk0LTEuMDg4di02LjQwOGMwLTQuMTQgMy41MDEtNy41MiA3LjgwMS03LjUzN2w1LjQwOC0uMDE2IDEuMTIzLTMuNTA0YzIuNzkxLTguNzA4IDEwLjg4NS0xNC41NTkgMjAuMTQzLTE0LjU1OSAxMS43MDMgMCAyMS4yMjUgOS4yNDggMjEuMjI1IDIwLjYxNyAwIDIuNjQ3LS41MzYgNS4yNjItMS41OTIgNy43NjhsLTEuNzEyIDQuMDY2IDMuNzk2IDIuMjVjNS4wNzMgMy4wMDkgOC4xMDIgOC4xODEgOC4xMDIgMTMuODMzIDAgOS41OC02LjEzIDE2LjI3LTE0LjkwNiAxNi4yN2E1LjA2IDUuMDYgMCAwIDAgMCAxMC4xMmMxNC4yNjYgMCAyNS4wMjUtMTEuMzQ0IDI1LjAyNS0yNi4zODktLjAwMi03Ljg4NC0zLjUzOC0xNS4xNTktOS42MzEtMjAuMTR6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=);
}
.o-software-icon--designspark {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjYiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCA2NiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMi4yMDAwNUg3LjQzMTU4QzE1LjA4NDIgMi4yMDAwNSAxNy4yOTQ3IDQuOTU3OTQgMTcuMjk0NyAxMS40ODQzVjIyLjE0NzRDMTcuMjk0NyAyOC43NDc0IDE1LjA4NDIgMzEuNTc5IDcuNTA1MjYgMzEuNTc5SDBWMi4yMTA1N1YyLjIwMDA1Wk03LjUwNTI2IDI3LjA2MzJDMTAuNDQyMSAyNy4wNjMyIDEwLjYyMTEgMjUuNzg5NSAxMC42MjExIDIzLjE0NzRWMTAuMzQ3NEMxMC42MjExIDcuNzY4NDcgMTAuMzI2MyA2LjcyNjM2IDcuNDYzMTYgNi43MjYzNkg2LjQ4NDIxVjI3LjA2MzJINy41MDUyNlpNMTkuMTQ3NCAyMi42NzM3TDI0LjY5NDcgMjEuODQyMkMyNC43Njg0IDI1LjY1MjcgMjUuNjQyMSAyNy4wNjMyIDI3LjI3MzcgMjcuMDYzMkMyOC42MTA1IDI3LjA2MzIgMjguOTA1MyAyNS45MzY5IDI4LjkwNTMgMjQuOTI2NEMyOC45MDUzIDIyLjQ5NDggMjcuNjczNyAyMS4wNDIyIDI1LjY3MzcgMTkuMzQ3NEwyMy4xMzY4IDE3LjEzNjlDMjAuODg0MiAxNS4yNTI3IDE5LjE4OTUgMTMuMDQyMiAxOS4xODk1IDkuNDg0MjZDMTkuMTg5NSA0LjUxNTg0IDIyLjM0NzQgMS44MDAwNSAyNy40MjEgMS44MDAwNUMzMy42OTQ3IDEuODAwMDUgMzQuNiA2LjY5NDc4IDM0LjcwNTMgMTAuMTM2OUwyOS4xMjYzIDEwLjgyMTFDMjkuMDUyNiA4LjIxMDU4IDI4Ljg3MzcgNi41NDc0MiAyNy4yIDYuNTQ3NDJDMjYgNi41NDc0MiAyNS40NjMyIDcuODIxMSAyNS40NjMyIDguODMxNjNDMjUuNDYzMiAxMS4wMTA2IDI2LjU4OTUgMTIuMTY4NSAyOC4yOTQ3IDEzLjY1MjdMMzAuNzI2MyAxNS43ODk1QzMzLjI2MzIgMTcuOTY4NSAzNS4yOTQ3IDIwLjUzNjkgMzUuMjk0NyAyNC42QzM1LjI5NDcgMjguNjYzMiAzMi4yODQyIDMyIDI3LjYxMDUgMzJDMjIuMDYzMiAzMiAxOS4zNzg5IDI5LjIxMDYgMTkuMTU3OSAyMi42ODQzTDE5LjE0NzQgMjIuNjczN1oiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik02NS40OTQzIDE0LjUxNThINjUuNDczMkg2NS40OTQzSDY1LjQ1MjFMNDUuMDYyNyAxMi45MjYzTDUzLjAzMTEgNy4wOTQ3NEw0My4wOTQyIDEwLjM1NzlMNDcuODIwNiAwTDMzLjQ1MjEgMTQuNTE1OEw0Ny44MjA2IDI5LjAyMTFMNDMuMDk0MiAxOC42NjMyTDUzLjAzMTEgMjEuOTI2M0w0NS4wNjI3IDE2LjEwNTNMNjUuNDUyMSAxNC41MTU4SDY1LjQ5NDNaIiBmaWxsPSIjRUYwMDAwIi8+Cjwvc3ZnPgo=);
}
.o-software-icon--electrical {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDBDMTAuNzUwNiAwIDAgMTAuNzQ0NCAwIDI0QzAgMzcuMjU1NiAxMC43NTA2IDQ4IDI0IDQ4QzM3LjI0OTMgNDggNDggMzcuMjQ5MyA0OCAyNEM0OCAxMC43NTA2IDM3LjI1NTYgMCAyNCAwWk0yNCA0NC4wNTIxQzEyLjkyNDUgNDQuMDUyMSAzLjk0Nzk0IDM1LjA3NTUgMy45NDc5NCAyNEMzLjk0Nzk0IDEyLjkyNDUgMTIuOTMwOCAzLjk0Nzk0IDI0IDMuOTQ3OTRDMzUuMDY5MiAzLjk0Nzk0IDQ0LjA1MjEgMTIuOTI0NSA0NC4wNTIxIDI0QzQ0LjA1MjEgMzUuMDc1NSAzNS4wNzU1IDQ0LjA1MjEgMjQgNDQuMDUyMVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS4yNzc0IDMzLjA2NEMyNi4zOTg2IDMzLjA2NCAyMy40NTAyIDMwLjIxNTUgMjIuMjQ0NiAyNC4zNTZDMjEuMDUxNCAxOC41MjE2IDE3LjgwMzEgMTguNTIxNiAxNi43Mjg3IDE4LjUyMTZDMTMuNzA1MyAxOC41MjE2IDExLjI1NjUgMjAuOTc2NiAxMS4yNTY1IDIzLjk5MzdDMTEuMjU2NSAyNC45ODcgMTAuNDUwNyAyNS43ODY2IDkuNDYzNzIgMjUuNzg2NkM4LjQ3NjczIDI1Ljc4NjYgNy42NzA5IDI0Ljk4MDcgNy42NzA5IDIzLjk5MzdDNy42NzA5IDE4Ljk5MDEgMTEuNzM3NSAxNC45MjM1IDE2Ljc0MTIgMTQuOTIzNUMxOS40NDYgMTQuOTIzNSAyNC4yMjQ4IDE2LjA1NDEgMjUuNzc0IDIzLjYzMTRDMjYuODIzNCAyOC43NiAyOS4wNDEgMjkuNDY1OSAzMS4yODk4IDI5LjQ2NTlDMzQuMzEzMyAyOS40NjU5IDM2Ljc2MiAyNy4wMTA5IDM2Ljc2MiAyMy45OTM3QzM2Ljc2MiAyMy4wMDA1IDM3LjU2NzggMjIuMjAwOSAzOC41NTQ4IDIyLjIwMDlDMzkuNTQxOCAyMi4yMDA5IDQwLjM0NzYgMjMuMDA2OCA0MC4zNDc2IDIzLjk5MzdDNDAuMzQ3NiAyOC45OTc0IDM2LjI4MSAzMy4wNjQgMzEuMjc3NCAzMy4wNjRaIiBmaWxsPSIjRUYwMDAwIi8+Cjwvc3ZnPgo=);
}
.o-software-icon--mechanical {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0NCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjUzMTcgNDYuMTAyMVYyMi41MTQ1TDQxLjM4OTUgMTIuMjEyNFYzNS43OTM3TDIxLjUzMTcgNDYuMTAyMVoiIGZpbGw9IiNFRjAwMDAiLz4KPHBhdGggZD0iTTQyLjk5NTIgMTEuMTM5NEwyMS42MDYxIDAuMDM3MjE0MUwyMS41MzE3IDBMMjEuNDU3MyAwLjAzNzIxNDFMMC4wODA1OTYyIDExLjEzOTRMMCAxMS4xODI4VjM2LjgxNzJMMC4wODA1OTYyIDM2Ljg2MDZMMjEuNDYzNSA0Ny45NjI4TDIxLjUzNzkgNDhMMjEuNjEyMyA0Ny45NjI4TDQzLjAwMTQgMzYuODYwNkw0My4wODIgMzYuODE3MlYxMS4xODI4TDQzLjAwMTQgMTEuMTM5NEg0Mi45OTUyWk0zOS43MDMyIDEzLjIzNThWMzQuNzcwNEwyMS41MzE3IDQ0LjE5OEwzLjM2NjQ2IDM0Ljc3MDRWMTMuMjM1OEwyMS41MzE3IDMuODAyMDRMMzkuNzAzMiAxMy4yMzU4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTIxLjUzMTMgNDYuNzE2MUMyMS4xOTAzIDQ2LjcxNjEgMjAuOTE3NSA0Ni40NDMyIDIwLjkxNzUgNDYuMTAyMVYyMi41MTQ1QzIwLjkxNzUgMjIuMjg1MSAyMS4wNDc3IDIyLjA3NDIgMjEuMjUyMyAyMS45Njg3TDQxLjExMDEgMTEuNjYwNEM0MS40MTM4IDExLjUwNTQgNDEuNzg1OCAxMS42MjMyIDQxLjk0MDggMTEuOTIwOUM0Mi4wOTU4IDEyLjIyNDggNDEuOTc4IDEyLjU5MDggNDEuNjgwNCAxMi43NTJMMjIuMTU3NCAyMi44ODY3VjQ2LjA5NTlDMjIuMTU3NCA0Ni40MzcgMjEuODg0NiA0Ni43MDk5IDIxLjU0MzcgNDYuNzA5OUgyMS41MzEzVjQ2LjcxNjFaIiBmaWxsPSIjRjVGNUY1Ii8+CjxwYXRoIGQ9Ik0yMS41MzE0IDIzLjEyODZDMjEuNDM4NCAyMy4xMjg2IDIxLjMzOTMgMjMuMTAzOCAyMS4yNDYzIDIzLjA2MDRMMS4zOTQ2NyAxMi43NTIxQzEuMDkwODkgMTIuNTk3IDAuOTczMDkgMTIuMjI0OSAxLjEzNDI4IDExLjkyMDlDMS4yODkyOCAxMS42MTcgMS42NjEyNiAxMS40OTkyIDEuOTY1MDUgMTEuNjYwNEwyMS44MTY2IDIxLjk2ODdDMjIuMTIwNCAyMi4xMjM4IDIyLjIzODIgMjIuNDk1OSAyMi4wNzcgMjIuNzk5OUMyMS45NjU0IDIzLjAxMDcgMjEuNzU0NiAyMy4xMzQ4IDIxLjUzMTQgMjMuMTM0OFYyMy4xMjg2WiIgZmlsbD0iI0Y1RjVGNSIvPgo8L3N2Zz4K);
}
.o-software-icon--mechanical-black {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Im0yNC4zMTQgNzkuMzU4IDM2LjE2NSA5LjUwMSAyNi4xODItMjYuNTZMNTAuNjcyIDUzek0zNy4xMzQgMTMuNTYyIDExLjI1MSAzOS44MTdsOS43IDM1LjgzNkw0Ny4xMzQgNDkuNDd6Ii8+CiAgICA8cGF0aCBmaWxsPSIjMUYxRjFGIiBkPSJNODYuMzYzIDEzLjExMiAzNi40NjYgMCAuMTAyIDM2Ljg4OWwxMy41MzQgNDkuOTk4TDYzLjUzMyAxMDBsMzYuMzY0LTM2Ljg4OS0xMy41MzQtNDkuOTk5em0tOC4xMzYgOC4xOTggOS43OTMgMzYuMTc5LTM2LjA1OS05LjMxNy0xMC4xNDYtMzYuNDMgMzYuNDEyIDkuNTY4ek0xMS4yNTEgMzkuODE3bDI1Ljg4My0yNi4yNTUgMTAgMzUuOTA3LTI2LjE4MyAyNi4xODQtOS43LTM1LjgzNnptNDkuMjI4IDQ5LjA0Mi0zNi4xNjQtOS41MDFMNTAuNjcyIDUzbDM1Ljk4OSA5LjI5OS0yNi4xODIgMjYuNTZ6Ii8+CiAgICA8cGF0aCBmaWxsPSIjRUYwMDAwIiBkPSJNODguMDIgNTcuNDg4IDc4LjIyNyAyMS4zMWwtMzYuNDEyLTkuNTY4IDEwLjE0NiAzNi40Mjl6Ii8+Cjwvc3ZnPgo=);
}
.o-loading-indicator {
display: block;
content: "";
margin: 100px calc(50% - 25px);
width: 50px;
height: 50px;
border-radius: 50%;
border-top: 5px solid #d9121f;
border-right: 5px solid transparent;
animation: spin 0.6s linear infinite;
}
.o-loading-indicator--small {
margin: 0 16px;
display: inline-block;
width: 16px;
height: 16px;
border-top: 2px solid #d9121f;
}
.o-loading-indicator--feed {
display: none;
}
.is-loading-cards .o-loading-indicator--feed {
display: block;
}
.o-loading-indicator--lazy-load {
display: none;
}
.is-loading-cards .o-loading-indicator--lazy-load, .is-loading-content .o-loading-indicator--lazy-load {
display: block;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.o-skip-to-content {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
position: absolute;
left: -10000px;
padding: 8px;
z-index: 1;
background-color: #ffffff;
}
.o-skip-to-content:focus {
top: 80px;
left: 16px;
}
.o-text-link {
font-weight: 700;
color: #3244ff;
}
.o-text-link:hover {
color: #d9121f;
}
.o-text-link--black {
display: flex;
flex-direction: column;
gap: 16px;
font-weight: 700;
color: #1d1d1b;
border-top: 1px solid #edeff1;
padding: 16px 0 8px 0;
}
@media (min-width: 768px) {
.o-text-link--black {
gap: 24px;
align-items: center;
flex-direction: row;
}
}
.o-text-link--black:hover {
color: #3244ff;
}
.w-table {
overflow: auto;
}
.o-table {
width: 100%;
border-collapse: separate;
border: 1px solid #cdcdcd;
border-radius: 4px;
/* stylelint-disable selector-max-compound-selectors */
/* stylelint-enable selector-max-compound-selectors */
}
.o-table.is-hidden {
display: none;
}
.o-table th {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: #1d1d1b;
background: #ebebeb;
}
.o-table td {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
}
.o-table td,
.o-table th {
text-align: left;
padding: 16px;
vertical-align: top;
}
.o-table thead:not(:last-child) > tr td,
.o-table thead:not(:last-child) > tr th,
.o-table tbody:not(:last-child) > tr td,
.o-table tbody:not(:last-child) > tr th,
.o-table tfoot:not(:last-child) > tr td,
.o-table tfoot:not(:last-child) > tr th,
.o-table thead:last-child > tr:not(:last-child) td,
.o-table thead:last-child > tr:not(:last-child) th,
.o-table tbody:last-child > tr:not(:last-child) td,
.o-table tbody:last-child > tr:not(:last-child) th,
.o-table tfoot:last-child > tr:not(:last-child) td,
.o-table tfoot:last-child > tr:not(:last-child) th,
.o-table > tr:not(:last-child) td,
.o-table > tr:not(:last-child) th {
border-bottom: 1px solid #cdcdcd;
}
@media (min-width: 768px) {
.o-table--with-actions td:last-child:not([data-label]) {
text-align: right;
padding-top: 8px;
padding-bottom: 8px;
width: 1%;
white-space: nowrap;
}
}
.o-table--with-actions td:last-child:not([data-label]) {
padding-top: 8px;
padding-bottom: 0;
}
.o-table--with-actions td:last-child:not([data-label]) > * {
margin-bottom: 8px;
}
@media (max-width: 767px) {
.o-table--row-collapse {
border: none;
}
.o-table--row-collapse thead {
display: none;
}
.o-table--row-collapse tbody tr {
display: block;
}
.o-table--row-collapse tbody tr:not(:last-child) {
margin-bottom: 16px;
}
.o-table--row-collapse tbody td {
position: relative;
display: block;
border-left: 1px solid #cdcdcd;
border-right: 1px solid #cdcdcd;
border-bottom: 1px solid #cdcdcd;
padding-left: calc(35% + 16px);
}
.o-table--row-collapse tbody td:first-child {
border-top: 1px solid #cdcdcd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.o-table--row-collapse tbody td:last-child {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.o-table--row-collapse tbody td::before {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 35%;
padding: 16px;
color: #1d1d1b;
background: #ebebeb;
border-right: 1px solid #cdcdcd;
content: attr(data-label);
text-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.o-table__cell--break-word {
word-break: break-word;
}
.o-table--left-aligned td:first-child {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
background: #ebebeb;
text-align: left;
white-space: normal;
width: 10%;
}
@media (min-width: 768px) {
.o-table--left-aligned td:first-child {
white-space: nowrap;
}
}
.o-table--left-aligned td:not(:first-child) {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
background: #ffffff;
text-align: left;
}
.o-body-large-regular {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
}
.o-body-large-bold {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
}
.o-body-regular {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
}
.o-body-bold {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
}
.o-body-supporting {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
}
.o-banner-title {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
color: #ffffff;
}
.o-landing-page-title {
font-family: var(--header-font);
font-weight: 700;
font-size: 44px;
line-height: 52px;
color: #4a4e57;
}
@media (min-width: 768px) {
.o-landing-page-title {
font-size: 48px;
line-height: 56px;
}
}
.o-page-title {
font-family: var(--header-font);
font-weight: 700;
font-size: 36px;
line-height: 44px;
color: #4a4e57;
}
@media (min-width: 768px) {
.o-page-title {
font-size: 40px;
line-height: 48px;
}
}
.o-section-title {
font-family: var(--header-font);
font-weight: 700;
font-size: 28px;
line-height: 36px;
color: var(--title-text-color);
}
@media (min-width: 768px) {
.o-section-title {
font-size: 32px;
line-height: 40px;
}
}
.s-section--highlighted .o-section-title {
color: #ffffff;
}
.o-section-sub-title {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #4a4e57;
}
@media (min-width: 768px) {
.o-section-sub-title {
font-size: 28px;
line-height: 36px;
}
}
.o-content-title {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #4a4e57;
}
@media (min-width: 768px) {
.o-content-title {
font-size: 28px;
line-height: 36px;
}
}
.o-card-title {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
color: #4a4e57;
}
.o-card-title--small {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: #4a4e57;
}
.o-tag {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
max-width: 100%;
display: inline-block;
padding: 3px 15px;
border: 1px solid #3244ff;
border-radius: 24px;
background-color: rgba(50, 68, 255, 0.15);
color: #3244ff;
font-weight: bold;
}
.o-tag--everyone {
color: #1d1d1b;
max-width: -moz-fit-content;
max-width: fit-content;
}
.o-tag--explorer {
background-color: rgba(0, 205, 191, 0.1450980392);
border-color: #00cdbe;
color: #1d1d1b;
max-width: -moz-fit-content;
max-width: fit-content;
}
.o-tag--creator {
background-color: rgba(200, 160, 255, 0.1450980392);
border-color: #c8a0ff;
color: #1d1d1b;
max-width: -moz-fit-content;
max-width: fit-content;
}
.o-tag--engineer {
background-color: rgba(255, 205, 0, 0.1450980392);
border-color: #ffcd00;
color: #1d1d1b;
max-width: -moz-fit-content;
max-width: fit-content;
}
a.o-tag:hover {
background-color: rgba(50, 68, 255, 0.1);
color: #3244ff;
}
.w-tag {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: baseline;
margin-bottom: 24px;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.o-label {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
color: #1d1d1b;
}
.o-label__required-flag {
font-weight: normal;
color: #4a4e57;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.o-legend {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
color: #1d1d1b;
}
.o-legend__required-flag {
font-weight: normal;
color: #4a4e57;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.o-input {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: #4a4e57;
font-weight: inherit;
border-radius: 4px;
border: 2px solid #7f8695;
background-color: #ffffff;
padding: 10px 8px;
}
.o-input:focus {
border: 4px solid #1d1d1b;
padding: 8px 6px;
}
.o-input:disabled {
background-color: #edeff1;
cursor: not-allowed;
}
.o-input.has-error {
border-color: #d9121f;
}
.o-input::-moz-placeholder {
color: rgba(74, 78, 87, 0.45);
}
.o-input::placeholder {
color: rgba(74, 78, 87, 0.45);
}
.o-input--width-2 {
max-width: 5.4ex;
}
.o-input--width-3 {
max-width: 7.2ex;
}
.o-input--width-4 {
max-width: 9ex;
}
.o-input--width-5 {
max-width: 10.8ex;
}
.o-input--width-10 {
max-width: 23ex;
}
.o-input--password {
padding-right: 48px;
width: 100%;
}
.o-input--password:focus {
padding-right: 46px;
}
.o-input__password-toggle {
position: absolute;
right: 0;
top: 50%;
margin-top: -20px;
text-indent: -1000px;
overflow: hidden;
height: 40px;
width: 40px;
}
.o-input__password-toggle::after {
content: "visibility";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 18px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 16px;
display: block;
text-indent: 0;
color: #767676;
}
.o-input--password[type=text] ~ .o-input__password-toggle::after {
content: "visibility_off";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 18px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.o-textarea {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: #4a4e57;
font-weight: inherit;
border-radius: 4px;
border: 2px solid #7f8695;
background-color: #ffffff;
padding: 10px 8px;
}
.o-textarea:focus {
border: 4px solid #1d1d1b;
padding: 8px 6px;
}
.o-textarea:disabled {
background-color: #edeff1;
cursor: not-allowed;
}
.o-textarea.has-error {
border-color: #d9121f;
}
.o-textarea::-moz-placeholder {
color: rgba(74, 78, 87, 0.45);
}
.o-textarea::placeholder {
color: rgba(74, 78, 87, 0.45);
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.o-select {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: #4a4e57;
font-weight: inherit;
border-radius: 4px;
border: 2px solid #7f8695;
background-color: #ffffff;
padding: 10px 8px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: calc(100% - 8px) 50%;
padding-right: 40px;
width: 100%;
}
.o-select:focus {
border: 4px solid #1d1d1b;
padding: 8px 6px;
}
.o-select:disabled {
background-color: #edeff1;
cursor: not-allowed;
}
.o-select.has-error {
border-color: #d9121f;
}
.o-select::-moz-placeholder {
color: rgba(74, 78, 87, 0.45);
}
.o-select::placeholder {
color: rgba(74, 78, 87, 0.45);
}
.o-select:focus {
padding-right: 40px;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.o-radio {
display: flex;
margin-bottom: 8px;
}
.o-radio__label {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
position: relative;
padding-left: 24px;
color: #1d1d1b;
cursor: pointer;
}
.o-radio__label::before {
position: absolute;
top: 4px;
left: 0;
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #4a4e57;
background-color: #ffffff;
}
.o-radio__label:hover::before {
background: #edeff1;
}
.o-radio__input {
opacity: 0;
position: absolute;
z-index: -1;
}
.o-radio__input:focus + .o-radio__label::before {
outline: 2px solid #3244ff;
outline-offset: 2px;
}
.has-suppressed-highlight .o-radio__input:focus + .o-radio__label::before {
outline: none;
outline-offset: 0;
box-shadow: 0 0 4px 0 #3244ff;
}
.o-radio__input:checked + .o-radio__label::before {
background: transparent;
border-color: #3244ff;
}
.o-radio__input:checked + .o-radio__label::after {
content: "";
position: absolute;
left: 5px;
top: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #3244ff;
}
.o-radio--inline {
display: inline-flex;
margin-right: 8px;
}
.o-radio--large .o-radio__label {
padding-left: 40px;
}
.o-radio--large .o-radio__label::before {
top: 8px;
width: 24px;
height: 24px;
}
.o-radio--large .o-radio__input:checked + .o-radio__label::after {
left: 7px;
top: 15px;
width: 10px;
height: 10px;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.o-checkbox__label {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
display: flex;
position: relative;
padding-left: 24px;
color: #1d1d1b;
cursor: pointer;
}
.o-checkbox__label::before {
position: absolute;
top: 4px;
left: 0;
content: "";
width: 18px;
height: 18px;
border: 2px solid #4a4e57;
background-color: #ffffff;
}
.o-checkbox__label > span {
flex: 1;
}
.o-checkbox__label a {
font-weight: inherit;
color: inherit;
text-decoration: underline;
}
.o-checkbox__label:hover::before {
background: #edeff1;
}
.o-checkbox__input {
opacity: 0;
position: absolute;
z-index: -1;
}
.o-checkbox__input:focus + .o-radio__label::before {
outline: 2px solid #3244ff;
outline-offset: 2px;
}
.has-suppressed-highlight .o-checkbox__input:focus + .o-radio__label::before {
outline: none;
outline-offset: 0;
box-shadow: 0 0 4px 0 #3244ff;
}
.o-checkbox__input:checked + .o-checkbox__label::before {
background-color: #3244ff;
border-radius: 3px;
transform: rotate(0deg) scale(1);
opacity: 1;
border: 2px solid #3244ff;
}
.o-checkbox__input:checked + .o-checkbox__label::after {
content: "";
transform: rotate(45deg) scale(1);
position: absolute;
left: 6px;
top: 6px;
opacity: 1;
width: 6px;
height: 12px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
background-color: transparent;
border-radius: 0;
}
.o-checkbox--inline {
display: inline-flex;
margin-right: 8px;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.o-checkboxes {
-moz-column-gap: 16px;
column-gap: 16px;
}
@media (min-width: 480px) {
.o-checkboxes[data-columns="2"] {
-moz-column-count: 2;
column-count: 2;
}
}
@media (min-width: 480px) {
.o-checkboxes[data-columns="3"] {
-moz-column-count: 2;
column-count: 2;
}
}
@media (min-width: 768px) {
.o-checkboxes[data-columns="3"] {
-moz-column-count: 3;
column-count: 3;
}
}
@media (min-width: 480px) {
.o-checkboxes[data-columns="4"] {
-moz-column-count: 2;
column-count: 2;
}
}
@media (min-width: 768px) {
.o-checkboxes[data-columns="4"] {
-moz-column-count: 4;
column-count: 4;
}
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.o-form-msg {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
}
.o-form-msg--help {
color: #4a4e57;
text-align: left;
}
.o-form-msg--help a {
color: #4a4e57;
text-decoration: underline;
}
.o-form-msg--error {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
padding-left: 24px;
color: #454545;
padding: 8px 16px;
border-radius: 4px;
border: 4px;
background-color: #f8d7da;
border-color: #f5c6cb;
margin-bottom: 16px;
}
.o-form-msg--error ul {
margin-left: 4px;
list-style: disc inside;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.o-number-input {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: #4a4e57;
font-weight: inherit;
border-radius: 4px;
border: 2px solid #7f8695;
background-color: #ffffff;
padding: 10px 8px;
display: flex;
padding: 0;
}
.o-number-input:focus {
border: 4px solid #1d1d1b;
padding: 8px 6px;
}
.o-number-input:disabled {
background-color: #edeff1;
cursor: not-allowed;
}
.o-number-input.has-error {
border-color: #d9121f;
}
.o-number-input::-moz-placeholder {
color: rgba(74, 78, 87, 0.45);
}
.o-number-input::placeholder {
color: rgba(74, 78, 87, 0.45);
}
.o-number-input__button {
flex: 0 0 auto;
padding: 8px;
}
.o-number-input__button > .o-button__icon {
font-size: 24px;
}
.o-number-input__counter {
padding: 8px;
text-align: center;
width: 100%;
}
.o-number-input__counter::-webkit-outer-spin-button, .o-number-input__counter::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.o-number-input__counter[type=number] {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
/**
* Components - blocks
*/
.access-restriction {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
}
.access-restriction__teaser {
height: 150px;
overflow-y: hidden;
margin-bottom: 24px;
}
.access-restriction__panel {
position: relative;
}
.access-restriction__panel > * {
margin-bottom: 24px;
}
.access-restriction__panel :last-child {
margin-bottom: 0;
}
.access-restriction__panel::before {
position: absolute;
content: "";
background: linear-gradient(to bottom, transparent 0%, transparent 25px, #ffffff 150px, #ffffff 100%);
bottom: 100%;
left: 0;
height: 150px;
width: 100%;
}
.access-restriction__panel-title {
font-family: var(--header-font);
font-weight: 700;
font-size: 36px;
line-height: 44px;
}
@media (min-width: 768px) {
.access-restriction__panel-title {
font-size: 40px;
line-height: 48px;
}
}
.access-restriction__register-button {
display: flex;
}
@media (max-width: 768px) {
.access-restriction__register-button {
flex-direction: column;
}
}
.access-restriction--over {
margin-top: -150px;
}
.access-restriction--over .access-restriction__panel {
background-color: #ffffff;
}
.w-advert {
width: 100%;
padding: 24px 16px;
overflow: hidden;
display: flex;
justify-content: center;
}
.advert.advert--placeholder {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
background: rgb(216, 216, 216);
height: 250px;
width: 300px;
}
@media (min-width: 768px) {
.advert.advert--placeholder {
height: 90px;
width: 728px;
}
}
.alert {
--alert-bg-colour: #ebebeb;
--alert-text-colour: #4a4e57;
--alert-border-colour: #edeff1;
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
position: relative;
display: flex;
gap: 16px;
padding: 8px 32px 8px 16px;
color: var(--alert-text-colour);
background-color: var(--alert-bg-colour);
border: 2px solid var(--alert-border-colour);
border-radius: 4px;
}
.alert a {
text-decoration: underline;
}
.alert--success {
--alert-bg-colour: #dff0d8;
--alert-border-colour: #228e46;
}
.alert--error {
--alert-bg-colour: #f8d7da;
--alert-border-colour: #d9121f;
}
.alert--warning {
--alert-bg-colour: #fff6ef;
--alert-border-colour: #fea861;
}
.alert--info {
--alert-bg-colour: #d1ecf1;
--alert-border-colour: #3244ff;
}
.alert__close {
position: absolute;
right: 0;
top: 0;
height: 40px;
width: 40px;
color: var(--alert-icon-colour);
content: "";
}
.alert__close::before {
content: "close";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 20px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
}
.alert__icon {
font-size: 20px;
color: var(--alert-border-colour);
}
.avatar {
display: flex;
align-items: center;
}
.avatar:hover .avatar__username {
color: #d9121f;
}
.avatar__image {
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-block;
}
.avatar__image > svg {
width: 38px;
height: 38px;
fill: #4a4e57;
}
.avatar__username {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
margin-left: 16px;
color: #3244ff;
}
.avatar--large-username .avatar__username {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
}
.avatar--large-image .avatar__image {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
}
.avatar--large-image .avatar__image > svg {
width: 48px;
height: 48px;
fill: #4a4e57;
}
@media (min-width: 768px) {
.avatar--large-image .avatar__image {
width: 68px;
height: 68px;
border-radius: 50%;
display: inline-block;
}
.avatar--large-image .avatar__image > svg {
width: 68px;
height: 68px;
fill: #4a4e57;
}
}
.s-breadcrumbs {
width: 100%;
padding: 8px 16px;
}
.breadcrumbs {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
width: 100%;
max-width: 1244px;
margin-right: auto;
margin-left: auto;
padding-left: 4px;
padding-right: 4px;
}
.breadcrumbs__item {
display: inline;
}
.breadcrumbs__item a {
color: #3244ff;
}
.breadcrumbs__item a:hover {
color: #3244ff;
text-decoration: underline;
}
.breadcrumbs__item:not(:last-child)::after {
padding: 0 8px;
content: ">";
}
.breadcrumbs__item:last-child {
font-weight: 700;
pointer-events: none;
}
.breadcrumbs__item:not(:last-child)::after {
padding: 0 8px;
content: ">";
}
.banner-cta {
display: flex;
}
@media (max-width: 991px) {
.banner-cta {
gap: 24px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
}
@media (min-width: 992px) {
.banner-cta {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.banner-cta__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.banner-cta__content-title {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
}
@media (min-width: 768px) {
.banner-cta__content-title {
font-size: 28px;
line-height: 36px;
}
}
.banner-cta__content-copy {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.card__badges, .product-card__badges {
position: absolute;
z-index: 1;
top: 0;
right: 0;
padding: 8px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.card--product .card__image-container, .card--product .product-card__image-container {
position: relative;
width: 100%;
height: 0;
padding-top: 66.66%;
}
.card__image, .product-card__image {
width: 100%;
}
.card--product .card__image, .card--product .product-card__image {
-o-object-fit: contain;
object-fit: contain;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.card__label, .product-card__label {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
padding: 16px;
flex-grow: 1;
color: #4a4e57;
text-align: left;
}
.card--has-meta-data .card__label, .card--has-meta-data .product-card__label {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
}
.card--has-partnership-label .card__label, .card--has-partnership-label .product-card__label {
padding-bottom: 4px;
}
@keyframes dropDown {
from {
opacity: 0;
margin-top: calc(var(--dropdown-top-margin) - 10px);
}
to {
opacity: 1;
margin-top: var(--dropdown-top-margin);
}
}
.product-card {
width: 100%;
display: inline-flex;
flex-direction: column;
border: 1px solid rgba(29, 29, 27, 0.17);
transition: 0.2s;
position: relative;
}
.product-card:hover {
transform: scale(1.02);
}
.product-card__button {
width: 100%;
height: 100%;
}
.product-card__button-body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.product-card__overlay {
display: none;
}
.is-overlay-visible .product-card__overlay {
display: flex;
border-radius: 4px;
position: absolute;
pointer-events: none;
flex-direction: column;
justify-content: center;
padding: 24px;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(74, 78, 87, 0.8);
z-index: 10;
}
.product-card__overlay-button {
margin-bottom: 24px;
position: relative;
pointer-events: auto;
display: inline-block;
}
.product-card__overlay-button:last-child {
margin-bottom: 0;
}
.product-card__overlay-button::after {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
}
.product-card__overlay-button--basket {
transition: all 0.2s ease-in-out;
}
.product-card__overlay-button--basket::after {
content: "shopping_basket";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 16px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
color: #d9121f;
}
.product-card__overlay-button--basket.is-added {
background-color: #d9121f;
}
.product-card__overlay-button--basket.is-added::after {
color: #ffffff;
}
.product-card__overlay-button--info::after {
content: "keyboard_arrow_right";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 16px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
}
.is-added .product-card__basket-add-text {
display: none;
}
.product-card__basket-add-text--added {
display: none;
}
.is-added .product-card__basket-add-text--added {
display: block;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.product-card__badges, .card__badges {
position: absolute;
z-index: 1;
top: 0;
right: 0;
padding: 8px;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.card--product .product-card__image-container, .card--product .card__image-container {
position: relative;
width: 100%;
height: 0;
padding-top: 66.66%;
}
.product-card__image, .card__image {
width: 100%;
}
.card--product .product-card__image, .card--product .card__image {
-o-object-fit: contain;
object-fit: contain;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.product-card__label, .card__label {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
padding: 16px;
flex-grow: 1;
color: #4a4e57;
text-align: left;
}
.card--has-meta-data .product-card__label, .card--has-meta-data .card__label {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
}
.card--has-partnership-label .product-card__label, .card--has-partnership-label .card__label {
padding-bottom: 4px;
}
@keyframes dropDown {
from {
opacity: 0;
margin-top: calc(var(--dropdown-top-margin) - 10px);
}
to {
opacity: 1;
margin-top: var(--dropdown-top-margin);
}
}
.card {
width: 100%;
display: inline-flex;
flex-direction: column;
border: 1px solid rgba(29, 29, 27, 0.17);
transition: 0.2s;
position: relative;
}
.card:hover {
transform: scale(1.02);
}
.w-card__quote {
position: relative;
display: flex;
justify-content: space-around;
flex-direction: column;
padding: 40px;
flex-grow: 1;
background-color: #4a4e57;
}
.card__quote {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: #ffffff;
}
.card__quote-open {
position: absolute;
z-index: 1;
top: 16px;
left: 24px;
}
.card__quote-close {
position: absolute;
z-index: 1;
right: 24px;
bottom: 16px;
}
.card__label {
padding: 16px;
}
.card--quote .card__label {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
padding-bottom: 0;
margin-bottom: 24px;
min-height: 56px;
flex-grow: 0;
}
.card__partnership-label {
color: #ffffff;
padding: 0 16px 16px;
}
.card--muted-hover:hover {
box-shadow: 0 2px 10px 0 rgba(29, 29, 27, 0.17);
}
.card--full-height {
height: 100%;
}
.card--icon {
position: relative;
}
.card--icon::before {
position: absolute;
top: 0;
left: 0;
content: "";
border-top: 88px solid #69141e;
border-right: 100px solid transparent;
transition: 0.2s;
z-index: 1;
}
.card--icon::after {
position: absolute;
top: 16px;
left: 16px;
width: 27px;
height: 27px;
z-index: 2;
}
.card--icon:hover::before {
border-top-color: #32000f;
}
.card--icon--dse::after {
content: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggNzgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4KICAgIDxwYXRoIGQ9Ik0zOS4wMi40OUMxNy44MS40OS42IDE3LjY5LjYgMzguOTFjMCAyMS4yMiAxNy4yMSAzOC40MiAzOC40MiAzOC40MnMzOC40Mi0xNy4yMSAzOC40Mi0zOC40MlM2MC4yNC40OSAzOS4wMi40OVptMCA3MC41MmMtMTcuNzMgMC0zMi4xLTE0LjM3LTMyLjEtMzIuMSAwLTE3LjczIDE0LjM4LTMyLjEgMzIuMS0zMi4xczMyLjEgMTQuMzcgMzIuMSAzMi4xYzAgMTcuNzMtMTQuMzcgMzIuMS0zMi4xIDMyLjFaIiBmaWxsPSIjZmZmIi8+CiAgICA8cGF0aCBkPSJNNTAuNjcgNTMuNDJjLTcuODEgMC0xMi41My00LjU2LTE0LjQ2LTEzLjk0LTEuOTEtOS4zNC03LjExLTkuMzQtOC44My05LjM0LTQuODQgMC04Ljc2IDMuOTMtOC43NiA4Ljc2YTIuODcgMi44NyAwIDAgMS0yLjg3IDIuODdjLTEuNTggMC0yLjg3LTEuMjktMi44Ny0yLjg3IDAtOC4wMSA2LjUxLTE0LjUyIDE0LjUyLTE0LjUyIDQuMzMgMCAxMS45OCAxLjgxIDE0LjQ2IDEzLjk0IDEuNjggOC4yMSA1LjIzIDkuMzQgOC44MyA5LjM0IDQuODQgMCA4Ljc2LTMuOTMgOC43Ni04Ljc2YTIuODcgMi44NyAwIDAgMSAyLjg3LTIuODdjMS41OCAwIDIuODcgMS4yOSAyLjg3IDIuODcgMCA4LjAxLTYuNTEgMTQuNTItMTQuNTIgMTQuNTJaIiBmaWxsPSIjRUYwMDAwIi8+CiAgPC9nPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJhIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGg3OHY3OEgweiIvPgogICAgPC9jbGlwUGF0aD4KICA8L2RlZnM+Cjwvc3ZnPgo=);
}
.card--icon--dsm::after {
content: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzAgNzgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4KICAgIDxwYXRoIGQ9Ik0zNS4wMiA3NC41NFYzNi41MUw2Ny4wNSAxOS45djM4LjAyTDM1LjAyIDc0LjU0WiIgZmlsbD0iI0VGMDAwMCIvPgogICAgPHBhdGggZD0iTTY5LjY0IDE4LjE3IDM1LjE0LjI3bC0uMTItLjA2LS4xMi4wNkwuNDIgMTguMTdsLS4xMy4wN3Y0MS4zM2wuMTMuMDcgMzQuNDkgMTcuOS4xMi4wNi4xMi0uMDYgMzQuNS0xNy45LjEzLS4wN1YxOC4yNGwtLjEzLS4wN2gtLjAxWm0tNS4zMSAzLjM4djM0LjcybC0yOS4zMSAxNS4yLTI5LjMtMTUuMlYyMS41NWwyOS4zLTE1LjIxIDI5LjMxIDE1LjIxWiIgZmlsbD0iI2ZmZiIvPgogICAgPHBhdGggZD0iTTM1LjAyIDc1LjUzYy0uNTUgMC0uOTktLjQ0LS45OS0uOTlWMzYuNTFjMC0uMzcuMjEtLjcxLjU0LS44OEw2Ni42IDE5LjAxYTEgMSAwIDAgMSAxLjM0LjQyYy4yNS40OS4wNiAxLjA4LS40MiAxLjM0TDM2LjAzIDM3LjExdjM3LjQyYzAgLjU1LS40NC45OS0uOTkuOTloLS4wMnYuMDFaIiBmaWxsPSIjRjVGNUY1Ii8+CiAgICA8cGF0aCBkPSJNMzUuMDIgMzcuNWMtLjE1IDAtLjMxLS4wNC0uNDYtLjExTDIuNTQgMjAuNzdhLjk4Mi45ODIgMCAwIDEtLjQyLTEuMzRjLjI1LS40OS44NS0uNjggMS4zNC0uNDJsMzIuMDIgMTYuNjJjLjQ5LjI1LjY4Ljg1LjQyIDEuMzQtLjE4LjM0LS41Mi41NC0uODguNTR2LS4wMVoiIGZpbGw9IiNGNUY1RjUiLz4KICA8L2c+CiAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImEiPgogICAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNMCAwaDcwdjc4SDB6Ii8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KPC9zdmc+Cg==);
width: 24px;
height: 27px;
}
.card--icon--dspcb::after {
content: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjIgNzgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj4KICAgIDxwYXRoIGQ9Ik01Mi45IDY3LjM1YzAgNC4xNC0zLjM2IDcuNS03LjUgNy41LTQuMTQgMC03LjUtMy4zNi03LjUtNy41IDAtNC4xNCAzLjM2LTcuNSA3LjUtNy41IDQuMTQgMCA3LjUgMy4zNiA3LjUgNy41WiIgZmlsbD0iI0VGMDAwMCIvPgogICAgPHBhdGggZD0iTTE2LjA1LjQydjEyLjg3SC0uMDF2MzkuNzRoMTYuMDZ2NC42M2MtNC4zNCAxLjIxLTcuMzYgNS4xOC03LjM2IDkuNjggMCA1LjU0IDQuNTEgMTAuMDUgMTAuMDYgMTAuMDUgNS41NSAwIDEwLjA1LTQuNTEgMTAuMDUtMTAuMDUgMC00LjUtMy4wMi04LjQ2LTcuMzYtOS42OFY0Ny42M0g1LjM4VjE4LjY4aDEyLjJ2MjMuMDNoMjYuODlWMTQuODJIMjEuNDRWNS44aDM1LjIzdjQxLjgySDQyLjd2MTAuMDNjLTQuMzQgMS4yMS03LjM2IDUuMTgtNy4zNiA5LjY4IDAgNS41NCA0LjUxIDEwLjA1IDEwLjA2IDEwLjA1IDUuNTUgMCAxMC4wNi00LjUxIDEwLjA2LTEwLjA1IDAtNC41LTMuMDItOC40Ni03LjM2LTkuNjh2LTQuNjNoMTMuNzlsLjE5LjIxVi40MkgxNi4wNVptNy42NCA2Ni45MmMwIDIuNzMtMi4yMiA0Ljk1LTQuOTYgNC45NS0yLjc0IDAtNC45Ni0yLjIyLTQuOTYtNC45NXMyLjIyLTQuOTUgNC45Ni00Ljk1YzIuNzQgMCA0Ljk2IDIuMjIgNC45NiA0Ljk1Wm0tMy44LTI3LjkzVjE3LjE1aDIyLjI2djIyLjI2SDE5Ljg5Wk00NS40IDcyLjI5Yy0yLjczIDAtNC45NC0yLjIyLTQuOTQtNC45NXMyLjIyLTQuOTYgNC45NC00Ljk2IDQuOTUgMi4yMiA0Ljk1IDQuOTZjMCAyLjc0LTIuMjIgNC45NS00Ljk1IDQuOTVaIiBmaWxsPSIjZmZmIi8+CiAgPC9nPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJhIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGg2MnY3OEgweiIvPgogICAgPC9jbGlwUGF0aD4KICA8L2RlZnM+Cjwvc3ZnPgo=);
width: 24px;
height: 30px;
}
.card--icon--software::after {
content: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIwIDc4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik01Ny42OSAyNC45Mmg3LjA2YzcuMjcgMCA5LjM3IDIuNjIgOS4zNyA4LjgydjEwLjEzYzAgNi4yNy0yLjEgOC45Ni05LjMgOC45NmgtNy4xM1YyNC45MlptNy4xMyAyMy42MmMyLjc5IDAgMi45Ni0xLjIxIDIuOTYtMy43MlYzMi42NmMwLTIuNDUtLjI4LTMuNDQtMy0zLjQ0aC0uOTN2MTkuMzJoLjk3Wm0xMS4wNi00LjE3IDUuMjctLjc5Yy4wNyAzLjYyLjkgNC45NiAyLjQ1IDQuOTYgMS4yNyAwIDEuNTUtMS4wNyAxLjU1LTIuMDMgMC0yLjMxLTEuMTctMy42OS0zLjA3LTUuM2wtMi40MS0yLjFjLTIuMTQtMS43OS0zLjc1LTMuODktMy43NS03LjI3IDAtNC43MiAzLTcuMyA3LjgyLTcuMyA1Ljk2IDAgNi44MiA0LjY1IDYuOTIgNy45MmwtNS4zLjY1Yy0uMDctMi40OC0uMjQtNC4wNi0xLjgzLTQuMDYtMS4xNCAwLTEuNjUgMS4yMS0xLjY1IDIuMTcgMCAyLjA3IDEuMDcgMy4xNyAyLjY5IDQuNThsMi4zMSAyLjAzYzIuNDEgMi4wNyA0LjM0IDQuNTEgNC4zNCA4LjM3IDAgMy44Ni0yLjg2IDcuMDMtNy4zIDcuMDMtNS4yNyAwLTcuODItMi42NS04LjAzLTguODVsLS4wMS0uMDFaIiBmaWxsPSIjZmZmIi8+CiAgPHBhdGggZD0iTTUxLjI4IDEzLjMzSC4xM3Y1MS4xNWg1MS4xNVYxMy4zM1oiIGZpbGw9IiNFRjAwMDAiLz4KICA8cGF0aCBkPSJNNDMuNzYgMzcuNjljLTEuMi0xLjItMi42OC0xLjcyLTQuODktMS43MmgtNC43NWMtLjg3IDAtMS4zNC0uNDYtMS4zMy0xLjMzdi0yLjU3YzAtLjg4LjQ2LTEuMzMgMS4zMy0xLjMzaDEwLjc1di01LjgxSDMzLjUyYy00LjItLjA0LTYuNjMgMi4zNS02LjU3IDYuNTd2My43OGMwIDIuMTQuNDcgMy40OSAxLjYzIDQuNjUgMS4xNSAxLjE1IDIuNTUgMS42NSA0LjY3IDEuNjVoNC45OWMuODcgMCAxLjM0LjQ2IDEuMzMgMS4zM3YyLjc5YzAgLjQ0LS4xMS43Ni0uMzQuOTktLjIzLjIzLS41NC4zNC0uOTkuMzRIMjMuMTVsLTMuMDctNS4wNWMzLjQ2LS4wNCA1LjUzLTIuMDYgNS40Ni01LjYxdi00Ljg2YzAtMi4yNC0uNDktMy42NC0xLjctNC44NS0xLjIxLTEuMjEtMi42NS0xLjczLTQuODctMS43M0g2LjF2MjcuOUgxMlYzMC43NWg2LjM4Yy40NCAwIC43Ni4xMS45OS4zNC4yNC4yNC4zNC41NC4zNC45OXYzLjU2YzAgLjg4LS40NiAxLjMzLTEuMzMgMS4zMy0xLjgzLjA0LTMuNjMtLjM0LTQuNzEgMS4zOC0uOCAxLjI1LS41MSAzLjA0LjI2IDQuMjguODMgMS40NyA1LjMyIDkuNDYgNS4zMiA5LjQ2LjI3LjQ3Ljc3Ljc1IDEuMzcuNzVoMTguMjZjNC4yMS4wNiA2LjYxLTIuMzcgNi41Ny02LjU3di0zLjcxYzAtMi4yNC0uNDktMy42NC0xLjctNC44NXYtLjAyaC4wMVoiIGZpbGw9IiNmZmYiLz4KICA8cGF0aCBkPSJNMTE5LjkxIDM2LjYyaC0uMDIuMDItLjA0bC0xOS4zNy0xLjUxIDcuNTctNS41NC05LjQ0IDMuMSA0LjQ5LTkuODQtMTMuNjUgMTMuNzkgMTMuNjUgMTMuNzgtNC40OS05Ljg0IDkuNDQgMy4xLTcuNTctNS41MyAxOS4zNy0xLjUxaC4wNFoiIGZpbGw9IiNFRjAwMDAiLz4KPC9zdmc+Cg==);
width: 44px;
height: 18px;
top: 12px;
}
.card--icon--technologies::after {
content: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgODAgNzgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTIyLjgzIDE2LjZjLTkuMDYgMC0xNi40MyA3LjM3LTE2LjQzIDE2LjQzIDAgOS4wNiA3LjM3IDE2LjQzIDE2LjQzIDE2LjQzIDkuMDYgMCAxNi40My03LjM3IDE2LjQzLTE2LjQzIDAtOS4wNi03LjM3LTE2LjQzLTE2LjQzLTE2LjQzWm0wIDI2Ljg1Yy01Ljc1IDAtMTAuNDMtNC42OC0xMC40My0xMC40M3M0LjY4LTEwLjQzIDEwLjQzLTEwLjQzIDEwLjQzIDQuNjggMTAuNDMgMTAuNDMtNC42OCAxMC40My0xMC40MyAxMC40M1pNNTcuMjIgNC41MWMtOS4wNiAwLTE2LjQzIDcuMzctMTYuNDMgMTYuNDMgMCA5LjA2IDcuMzcgMTYuNDMgMTYuNDMgMTYuNDMgOS4wNiAwIDE2LjQzLTcuMzcgMTYuNDMtMTYuNDMgMC05LjA2LTcuMzctMTYuNDMtMTYuNDMtMTYuNDNabTAgMjYuODVjLTUuNzUgMC0xMC40My00LjY4LTEwLjQzLTEwLjQzUzUxLjQ3IDEwLjUgNTcuMjIgMTAuNXMxMC40MyA0LjY4IDEwLjQzIDEwLjQzLTQuNjggMTAuNDMtMTAuNDMgMTAuNDNaTTY1LjI5IDQzLjFINDkuMTZjLTYuNzUgMC0xMi41OCA1LjA0LTEzLjU4IDExLjczbC0uMTYgMS4xLTEuMDgtLjI4Yy0xLjE1LS4zLTIuMzEtLjQ2LTMuNDUtLjQ2SDE0Ljc3Yy03LjU4IDAtMTMuNzUgNi4xNy0xMy43NSAxMy43NXY0LjM3aDZ2LTQuMzdjMC00LjI3IDMuNDgtNy43NSA3Ljc1LTcuNzVoMTYuMTJjNC4yNyAwIDcuNzUgMy40OCA3Ljc1IDcuNzV2NC4zN2g2di00LjM3YzAtMy4xNC0xLjA0LTYuMDktMy04LjU2bC0uMjItLjI3di0zLjI2YzAtNC4yNyAzLjQ4LTcuNzUgNy43NS03Ljc1aDE2LjEyYzQuMjcgMCA3Ljc1IDMuNDggNy43NSA3Ljc1djE2LjQ2aDZWNTYuODVjMC03LjU4LTYuMTctMTMuNzUtMTMuNzUtMTMuNzVaIiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo=);
width: 28px;
height: 22px;
}
.card--tutorial,
.card--technologyhub {
background-color: #69141e;
border: 0;
color: #ffffff;
}
.card--tutorial:hover,
.card--technologyhub:hover {
background-color: #32000f;
}
.card--tutorial .card__label,
.card--technologyhub .card__label {
color: #ffffff;
}
.card--tutorial .card__image-container,
.card--technologyhub .card__image-container {
padding: 16px 16px 0;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.card-meta {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
display: flex;
justify-content: space-between;
color: #4a4e57;
font-family: var(--body-font);
padding: 8px 16px;
border-top: 1px solid #bcbcbc;
}
.card-meta__stats {
display: flex;
justify-content: space-between;
}
.card-meta__stats > span {
padding-right: 8px;
}
.card-meta__stats > span::before {
font-size: 12px;
padding-right: 4px;
vertical-align: middle;
speak: none;
}
.card-meta__views::before {
content: "remove_red_eye";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 12px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
.card-meta__comments::before {
content: "mode_comment";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 12px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
.card-meta__likes::before {
content: "thumb_up";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 12px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
.card--tutorial .card-meta,
.card--technologyhub .card-meta {
color: #ffffff;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.tech-card {
display: inline-flex;
flex-direction: row;
padding: 8px;
align-items: center;
}
@media (min-width: 992px) {
.tech-card {
flex-direction: column;
padding: 0;
align-items: flex-start;
}
}
@media (max-width: 991px) {
.tech-card.card--icon {
position: relative;
padding-right: 64px;
}
.tech-card.card--icon::before {
display: none;
}
.tech-card.card--icon::after {
left: auto;
right: 16px;
}
}
.tech-card.card--tutorial .tech-card__label, .tech-card.card--technologyhub .tech-card__label {
color: #ffffff;
}
@media (min-width: 992px) {
.tech-card.card--tutorial .tech-card__image, .tech-card.card--technologyhub .tech-card__image {
padding: 16px 16px 0;
}
}
.is-retracted .tech-card--transient {
display: none;
}
.tech-card__image {
height: 40px;
width: 40px;
margin-right: 8px;
flex-shrink: 0;
}
@media (min-width: 992px) {
.tech-card__image {
height: auto;
width: 100%;
margin-right: 0;
}
}
.tech-card__label {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: #4a4e57;
}
@media (min-width: 992px) {
.tech-card__label {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
max-width: 100%;
padding: 16px 16px 24px;
}
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.info-card {
width: 100%;
display: inline-flex;
flex-direction: column;
border: 1px solid rgba(29, 29, 27, 0.17);
transition: 0.2s;
justify-content: space-between;
}
.info-card:hover {
transform: scale(1.02);
}
.info-card__body {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: #4a4e57;
padding: 16px;
}
.info-card__body h3 {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
margin-bottom: 16px;
}
.info-card__body ul {
flex-direction: column;
}
@media (min-width: 480px) {
.info-card--jumbo .info-card__body ul {
-moz-column-count: 2;
column-count: 2;
}
}
.info-card__body li {
padding-left: 24px;
position: relative;
margin-bottom: 8px;
}
.info-card__body li::before {
content: "check";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 16px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
position: absolute;
line-height: 20px;
left: 0;
color: #d9121f;
}
.info-card__embedded-video {
margin-bottom: 16px;
}
.info-card__footer {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
font-weight: 700;
color: #1d1d1b;
border-top: 1px solid #edeff1;
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.info-card__footer::after {
content: "keyboard_arrow_right";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
}
.info-card__footer:hover {
color: #d9121f;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.post-card {
width: 100%;
display: inline-flex;
flex-direction: column;
border: 1px solid rgba(29, 29, 27, 0.17);
transition: 0.2s;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px;
}
.post-card:hover {
transform: scale(1.02);
}
@media (min-width: 768px) {
.post-card {
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
}
.post-card__metadata {
font-family: var(--header-font);
font-weight: 700;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.post-card__metadata {
margin-left: auto;
}
}
.post-card__metadata-set {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
@media (min-width: 768px) {
.post-card__metadata-set {
justify-content: flex-start;
}
}
.post-card__metadata-label {
margin-left: 8px;
}
.post-card__metadata-value {
color: #d9121f;
}
.post-card__body {
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media (min-width: 768px) {
.post-card__body {
flex-basis: 70%;
}
}
.post-card__body-title {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: #1d1d1b;
margin-bottom: 24px;
}
@media (min-width: 768px) {
.post-card__body-title {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 8px;
}
}
.post-card__body-subtext {
display: none;
}
@media (min-width: 768px) {
.post-card__body-subtext {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
display: flex;
flex-direction: row;
}
}
.post-card__author {
display: flex;
flex-direction: row;
margin-bottom: 16px;
}
@media (min-width: 768px) {
.post-card__author {
margin-bottom: 0;
}
}
.post-card__author-image {
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-block;
margin-right: 24px;
}
.post-card__author-image > svg {
width: 50px;
height: 50px;
fill: #4a4e57;
}
@media (min-width: 768px) {
.post-card__author-image {
width: 68px;
height: 68px;
border-radius: 50%;
display: inline-block;
}
.post-card__author-image > svg {
width: 68px;
height: 68px;
fill: #4a4e57;
}
}
.post-card__author-body {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.post-card__author-body {
display: none;
}
}
.post-card__author-username {
font-weight: 700;
}
@media (min-width: 768px) {
.post-card__author-username {
margin-right: 16px;
}
}
.post-card__author-subtext {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: rgba(74, 78, 87, 0.8);
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.related-article-card {
width: 100%;
display: inline-flex;
flex-direction: column;
border: 1px solid rgba(29, 29, 27, 0.17);
transition: 0.2s;
padding: 16px;
display: flex;
flex-direction: column;
border-radius: 10px;
background-color: #ffffff;
}
.related-article-card:hover {
transform: scale(1.02);
}
.related-article-card__title {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: #4a4e57;
font-weight: 700;
margin-bottom: 24px;
}
.related-article-card__details {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.related-article-card__type {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: #d9121f;
}
.related-article-card__author {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
text-align: right;
}
.related-article-card__tags {
margin-top: auto;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.search-result {
width: 100%;
display: inline-flex;
flex-direction: column;
border: 1px solid rgba(29, 29, 27, 0.17);
transition: 0.2s;
position: relative;
align-items: flex-start;
padding: 16px;
}
.search-result:hover {
transform: scale(1.02);
}
@media (min-width: 992px) {
.search-result {
flex-direction: row;
}
}
.search-result__image-container {
margin-bottom: 8px;
width: 100%;
position: relative;
text-align: center;
margin-bottom: 24px;
}
@media (min-width: 992px) {
.search-result__image-container {
width: 140px;
margin-bottom: 0;
margin-right: 24px;
}
}
.search-result__image-container .search-result--product, .search-result--part .search-result__image-container {
position: relative;
width: 100%;
height: 0;
padding-top: 50%;
}
@media (min-width: 992px) {
.search-result__image-container .search-result--product, .search-result--part .search-result__image-container {
height: 103px;
width: 140px;
padding-top: 0;
}
}
.search-result__image .search-result--product, .search-result--part .search-result__image {
-o-object-fit: contain;
object-fit: contain;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.search-result__body {
display: flex;
flex: 1;
justify-content: space-between;
flex-direction: column-reverse;
width: 100%;
}
@media (min-width: 768px) {
.search-result__body {
flex-direction: row;
}
}
.search-result--part {
align-items: flex-start;
}
.search-result--part .search-result__body--part {
display: flex;
flex: 1;
justify-content: space-between;
flex-direction: column;
width: 100%;
}
@media (min-width: 992px) {
.search-result--part .search-result__body--part {
flex-direction: row;
}
}
.search-result__badges {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
@media (min-width: 768px) {
.search-result__badges {
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
}
}
.search-result--forum,
.search-result--tutorial,
.search-result--forumpost,
.search-result--technologyhub {
background-color: #69141e;
color: #ffffff;
}
.search-result--forum .search-result-metadata__headline,
.search-result--tutorial .search-result-metadata__headline,
.search-result--forumpost .search-result-metadata__headline,
.search-result--technologyhub .search-result-metadata__headline {
color: #ffffff;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.search-result-metadata {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.search-result-metadata__headline {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
margin-bottom: 8px;
color: #1d1d1b;
}
.search-result-metadata__image {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
vertical-align: middle;
}
.search-result-metadata__image > svg {
width: 28px;
height: 28px;
fill: #4a4e57;
}
.search-result-metadata__large {
display: none;
}
@media (min-width: 768px) {
.search-result-metadata__large {
display: block;
margin-bottom: 8px;
}
}
.search-result-metadata__item {
margin-right: 24px;
}
.search-result-metadata__small {
display: flex;
align-items: flex-start;
margin-top: 8px;
}
@media (min-width: 768px) {
.search-result-metadata__small {
display: none;
}
}
.search-result-metadata__owner {
font-weight: 700;
}
.search-result-metadata__subtitle {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
margin-bottom: 8px;
}
.search-result-metadata__status {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
margin-bottom: 8px;
}
@media (min-width: 992px) {
.search-result-metadata__notices {
flex: 0 0 175px;
}
}
.search-result-metadata__notices {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) and (max-width: 991px) {
.search-result-metadata__notices {
flex-direction: row;
}
}
.search-result-metadata__notice {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
padding-top: 8px;
}
@media (min-width: 768px) {
.search-result-metadata__notice {
margin-left: 16px;
}
}
.search-result-metadata__notice:first-child {
margin-left: 0;
}
@media (min-width: 992px) {
.search-result-metadata__notice:first-child {
margin-left: 16px;
}
}
.search-result-metadata__content_parent {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
margin-bottom: 8px;
}
@media (min-width: 768px) {
.search-result-metadata__content_parent {
display: none;
}
.search-result-metadata__large .search-result-metadata__content_parent {
display: inline-block;
}
}
.search-result-metadata__price {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: #1d1d1b;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.search-placeholder-image {
position: relative;
width: 100%;
}
.search-placeholder-image::before {
content: "";
padding-top: 39%;
height: 0;
display: block;
}
@media (min-width: 768px) {
.search-placeholder-image::before {
padding-top: 71%;
}
}
.search-placeholder-image::after {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
speak: none;
color: #ffffff;
}
.search-placeholder-image--question {
background-color: #0098bf;
}
.search-placeholder-image--question::after {
content: "help";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 56px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
.search-placeholder-image--support {
background-color: #d1aadc;
}
.search-placeholder-image--support::after {
content: "article";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 56px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.subscription-features-card {
color: var(--text-colour);
display: flex;
flex-direction: column;
position: relative;
}
.subscription-features-card.subscription-features-card--waffle, .subscription-features-card.subscription-features-card--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-red-mirror.1f57c3d9..svg);
--text-colour: #ffffff;
background-color: #69141e;
background-repeat: no-repeat;
background-size: 200px;
}
@media (min-width: 768px) {
.subscription-features-card.subscription-features-card--waffle, .subscription-features-card.subscription-features-card--double-waffle {
background-size: 240px;
}
}
@media (min-width: 992px) {
.subscription-features-card.subscription-features-card--waffle, .subscription-features-card.subscription-features-card--double-waffle {
background-size: 300px;
}
}
.subscription-features-card.subscription-features-card--waffle.t-explorer, .t-explorer .subscription-features-card.subscription-features-card--waffle, .subscription-features-card.subscription-features-card--double-waffle.t-explorer, .t-explorer .subscription-features-card.subscription-features-card--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-explorer-mirror.be655235..svg);
}
.subscription-features-card.subscription-features-card--waffle.t-creator, .t-creator .subscription-features-card.subscription-features-card--waffle, .subscription-features-card.subscription-features-card--double-waffle.t-creator, .t-creator .subscription-features-card.subscription-features-card--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-creator-mirror.3dcaf902..svg);
}
.subscription-features-card.subscription-features-card--waffle.t-engineer, .t-engineer .subscription-features-card.subscription-features-card--waffle, .subscription-features-card.subscription-features-card--double-waffle.t-engineer, .t-engineer .subscription-features-card.subscription-features-card--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-engineer-mirror.5a4254ae..svg);
}
.subscription-features-card.subscription-features-card--waffle {
background-image: var(--theme-waffle-image);
background-position: bottom right;
}
.subscription-features-card.subscription-features-card--double-waffle {
background-image: var(--theme-waffle-image), url(/7d751ad7/26.3.4/images/css/waffle-red.4dc3dc6d..svg);
background-position: bottom right, top left;
}
@media (min-width: 768px) and (max-width: 991px) {
.subscription-features-card {
flex-direction: row;
}
}
.subscription-features-card.subscription-features-card--waffle, .subscription-features-card.subscription-features-card--double-waffle {
background-size: 200px;
}
@media (min-width: 768px) {
.subscription-features-card.subscription-features-card--full-width {
flex-direction: row;
}
}
.subscription-features-card__image {
flex: 1;
}
.subscription-features-card__image > img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.subscription-features-card__body {
display: flex;
flex: 2;
flex-direction: column;
gap: 32px;
padding: 72px 24px 24px;
}
@media (min-width: 768px) and (max-width: 991px) {
.subscription-features-card__body {
position: relative;
}
}
@media (min-width: 768px) {
.subscription-features-card--full-width .subscription-features-card__body {
position: relative;
}
}
.subscription-features-card__label {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
align-items: center;
background-color: var(--theme-primary-colour);
color: #1d1d1b;
display: flex;
height: 48px;
justify-content: center;
left: 24px;
padding: 8px;
position: absolute;
top: 0;
}
@media (min-width: 768px) {
.subscription-features-card__label {
font-size: 28px;
line-height: 36px;
}
}
.subscription-features-card__title {
font-family: var(--header-font);
font-weight: 700;
font-size: 28px;
line-height: 36px;
}
@media (min-width: 768px) {
.subscription-features-card__title {
font-size: 32px;
line-height: 40px;
}
}
.subscription-features-card__features-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.subscription-features-card__features-list-item {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
position: relative;
padding-left: 32px;
}
.subscription-features-card__features-list-item::after {
content: "check";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
position: absolute;
left: 0;
top: 0;
font-size: 24px;
}
.subscription-features-card__cta {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
display: flex;
flex-direction: column;
gap: 24px;
margin-top: auto;
}
.subscription-features-card__button {
border: 2px solid var(--theme-primary-colour);
}
@media (min-width: 768px) and (max-width: 991px) {
.subscription-features-card__button {
width: 355px;
}
}
@media (min-width: 768px) {
.subscription-features-card--full-width .subscription-features-card__button {
width: 355px;
}
}
.subscription-features-card--with-image .subscription-features-card__body {
padding-top: 24px;
}
@media (min-width: 768px) and (max-width: 991px) {
.subscription-features-card--with-image .subscription-features-card__body {
padding-top: 72px;
}
}
@media (min-width: 768px) {
.subscription-features-card--with-image.subscription-features-card--full-width .subscription-features-card__body {
padding-top: 72px;
}
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.light-package-card {
display: inline-flex;
flex-direction: column;
position: relative;
background-color: #ffffff;
}
@media (min-width: 768px) {
.light-package-card {
flex: 1 1;
}
}
.light-package-card .o-button--ghost-outlined {
margin-bottom: 21px;
}
.light-package-card--enterprise {
border: 5px solid #767676;
}
.light-package-card--enterprise .light-package-card__header {
background-color: #cdcdcd;
}
.light-package-card--enterprise .light-package-card__button {
margin-bottom: 19px;
}
.light-package-card__header {
background-color: var(--theme-primary-colour);
color: #1d1d1b;
padding: 24px;
justify-content: center;
}
.light-package-card__banner {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
background: #ef0000;
padding: 8px 24px;
color: #ffffff;
}
.light-package-card__price--monthly {
color: #1d1d1b;
}
.light-package-card__price--monthly-amount {
font-family: var(--header-font);
font-weight: 700;
font-size: 44px;
line-height: 52px;
}
@media (min-width: 768px) {
.light-package-card__price--monthly-amount {
font-size: 48px;
line-height: 56px;
}
}
.light-package-card__price--monthly-symbol {
font-family: var(--header-font);
font-weight: 700;
font-size: 36px;
line-height: 44px;
}
@media (min-width: 768px) {
.light-package-card__price--monthly-symbol {
font-size: 40px;
line-height: 48px;
}
}
.light-package-card__price--monthly-tax {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
}
.light-package-card__price--yearly {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
}
.light-package-card__subtitle {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
}
.light-package-card__body {
display: flex;
flex-direction: column;
padding: 24px;
gap: 56px;
}
.light-package-card__highlights {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
}
.light-package-card__highlights-list {
display: inline-flex;
flex-direction: column;
gap: 24px;
}
.light-package-card__button {
margin: auto 24px 24px 24px;
}
.glide {
position: relative;
width: 100%;
box-sizing: border-box;
}
.glide * {
box-sizing: inherit;
}
.glide__track {
overflow: hidden;
}
.glide__slides {
position: relative;
width: 100%;
list-style: none;
backface-visibility: hidden;
transform-style: preserve-3d;
touch-action: pan-Y;
overflow: hidden;
margin: 0;
padding: 0;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
will-change: transform;
}
.glide__slides--dragging {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.glide__slide {
width: 100%;
height: 100%;
flex-shrink: 0;
white-space: normal;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
.glide__slide a {
-webkit-user-select: none;
user-select: none;
-webkit-user-drag: none;
-moz-user-select: none;
-ms-user-select: none;
}
.glide__arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.glide__bullets {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.glide--rtl {
direction: rtl;
}
.glide--swipeable {
cursor: grab;
}
.glide--dragging {
cursor: grabbing;
}
.glide__track {
padding-left: 8px;
padding-right: 8px;
margin-left: -8px;
margin-right: -8px;
}
.glide__slides {
box-sizing: content-box;
padding: calc(2 * 8px) 8px;
margin-left: -8px;
margin-right: -8px;
}
.glide__slide {
box-sizing: border-box;
height: auto;
}
@media (min-width: 480px) {
[data-carousel-cards-per-view="2"] .glide__slide {
width: calc(50% - 8px);
}
}
@media (min-width: 480px) and (max-width: 991px) {
[data-carousel-cards-per-view="3"] .glide__slide {
width: calc(50% - 8px);
}
}
@media (min-width: 992px) {
[data-carousel-cards-per-view="3"] .glide__slide {
width: calc(33.3333333333% - 10.6666666667px);
}
}
@media (min-width: 480px) and (max-width: 767px) {
[data-carousel-cards-per-view="4"] .glide__slide {
width: calc(50% - 8px);
}
}
@media (min-width: 768px) and (max-width: 991px) {
[data-carousel-cards-per-view="4"] .glide__slide {
width: calc(33.3333333333% - 10.6666666667px);
}
}
@media (min-width: 992px) {
[data-carousel-cards-per-view="4"] .glide__slide {
width: calc(25% - 12px);
}
}
@media (min-width: 480px) and (max-width: 767px) {
[data-carousel-cards-per-view="5"] .glide__slide {
width: calc(50% - 8px);
}
}
@media (min-width: 768px) and (max-width: 991px) {
[data-carousel-cards-per-view="5"] .glide__slide {
width: calc(33.3333333333% - 10.6666666667px);
}
}
@media (min-width: 992px) and (max-width: 1439px) {
[data-carousel-cards-per-view="5"] .glide__slide {
width: calc(25% - 12px);
}
}
@media (min-width: 1440px) {
[data-carousel-cards-per-view="5"] .glide__slide {
width: calc(20% - 12.8px);
}
}
@media (min-width: 480px) and (max-width: 767px) {
[data-carousel-cards-per-view="6"] .glide__slide {
width: calc(50% - 8px);
}
}
@media (min-width: 768px) and (max-width: 991px) {
[data-carousel-cards-per-view="6"] .glide__slide {
width: calc(33.3333333333% - 10.6666666667px);
}
}
@media (min-width: 992px) and (max-width: 1439px) {
[data-carousel-cards-per-view="6"] .glide__slide {
width: calc(25% - 12px);
}
}
@media (min-width: 1440px) {
[data-carousel-cards-per-view="6"] .glide__slide {
width: calc(16.6666666667% - 13.3333333333px);
}
}
/**
* Carousel controls are the arrows to navigate between slides
*/
.carousel-controls__arrow {
background: #ffffff;
border: 1px solid rgb(232, 232, 232);
border-radius: 48px;
box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.5);
height: 48px;
width: 48px;
color: #d9121f;
position: absolute;
display: block;
top: 50%;
transform: translateY(-50%);
z-index: 3;
opacity: 1;
cursor: pointer;
transition: opacity 0.2s ease;
line-height: 1;
}
@media (min-width: 1440px) {
.carousel-controls__arrow {
height: 80px;
width: 80px;
}
}
.carousel-controls__arrow.is-disabled {
opacity: 0;
}
.carousel-controls__arrow--left {
left: 10px;
}
@media (min-width: 1440px) {
.carousel-controls__arrow--left {
left: calc(-80px / 2);
}
}
.carousel-controls__arrow--left::after {
content: "keyboard_arrow_left";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 34px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
color: #d9121f;
}
@media (min-width: 1440px) {
.carousel-controls__arrow--left::after {
font-size: 48px;
}
}
@media (min-width: 1440px) {
.carousel--peekaboo .carousel-controls__arrow--left {
left: calc(-80px / 2 + 100px);
}
}
.carousel-controls__arrow--right {
right: 10px;
}
@media (min-width: 1440px) {
.carousel-controls__arrow--right {
right: calc(-80px / 2);
}
}
.carousel-controls__arrow--right::after {
content: "keyboard_arrow_right";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 34px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
color: #d9121f;
}
@media (min-width: 1440px) {
.carousel-controls__arrow--right::after {
font-size: 48px;
}
}
@media (min-width: 1440px) {
.carousel--peekaboo .carousel-controls__arrow--right {
right: calc(-80px / 2 + 100px);
}
}
@media (min-width: 1440px) {
.carousel--peekaboo {
position: relative;
}
.carousel--peekaboo::before {
position: absolute;
top: 0;
left: -8px;
height: 100%;
width: 108px;
background: linear-gradient(to right, var(--carousel-bg-colour) 0%, rgba(var(--carousel-bg-colour-red), var(--carousel-bg-colour-green), var(--carousel-bg-colour-blue), 0%) 75%, rgba(var(--carousel-bg-colour-red), var(--carousel-bg-colour-green), var(--carousel-bg-colour-blue), 0%) 100%);
z-index: 2;
content: "";
}
.carousel--peekaboo::after {
position: absolute;
top: 0;
right: -8px;
height: 100%;
width: 108px;
background: linear-gradient(to left, var(--carousel-bg-colour) 0%, rgba(var(--carousel-bg-colour-red), var(--carousel-bg-colour-green), var(--carousel-bg-colour-blue), 0%) 75%, rgba(var(--carousel-bg-colour-red), var(--carousel-bg-colour-green), var(--carousel-bg-colour-blue), 0%) 100%);
z-index: 2;
content: "";
}
}
.cta {
text-align: center;
padding: 40px 16px;
color: #ffffff;
background-color: #4a4e57;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMjAiIGhlaWdodD0iNjIwIiB2aWV3Qm94PSIwIDAgMzIwIDYyMCI+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQgLTUwKSI+CiAgICA8cGF0aCBmaWxsPSIjNEE0RTU3IiBkPSJNMTQgNTBoMzQwdjYyMEgxNHoiLz4KICAgIDxjaXJjbGUgY3g9IjMzNCIgY3k9IjEwNiIgcj0iMjAiIGZpbGw9IiMwMDAiIG9wYWNpdHk9Ii4xOTIiLz4KICAgIDxjaXJjbGUgY3g9IjI1IiBjeT0iMjEyIiByPSIyMCIgZmlsbD0iIzAwMCIgb3BhY2l0eT0iLjE5MiIvPgogICAgPGcgc3Ryb2tlPSIjRkZGIiBzdHJva2Utb3BhY2l0eT0iLjIiIHN0cm9rZS13aWR0aD0iOCI+CiAgICAgIDxwYXRoIGQ9Ik0yMDAuODIgMjY2Ljk5MmwyNy42IDMwLjAzNWExMyAxMyAwIDAxMCAxNy41OTNsLTI3LjYgMzAuMDM1Yy00Ljg1OCA1LjI4Ni0xMy4wODIgNS42MzQtMTguMzY4Ljc3NmExMyAxMyAwIDAxLS43NzYtLjc3NmwtMjcuNi0zMC4wMzVhMTMgMTMgMCAwMTAtMTcuNTkzbDI3LjYtMzAuMDM1YzQuODU4LTUuMjg2IDEzLjA4MS01LjYzNCAxOC4zNjgtLjc3NmExMyAxMyAwIDAxLjc3Ni43NzZ6Ii8+CiAgICAgIDxwYXRoIGQ9Ik0xNjYuODIgMjY2Ljk5MmwyNy42IDMwLjAzNWExMyAxMyAwIDAxMCAxNy41OTNsLTI3LjYgMzAuMDM1Yy00Ljg1OCA1LjI4Ni0xMy4wODIgNS42MzQtMTguMzY4Ljc3NmExMyAxMyAwIDAxLS43NzYtLjc3NmwtMjcuNi0zMC4wMzVhMTMgMTMgMCAwMTAtMTcuNTkzbDI3LjYtMzAuMDM1YzQuODU4LTUuMjg2IDEzLjA4MS01LjYzNCAxOC4zNjgtLjc3NmExMyAxMyAwIDAxLjc3Ni43NzZ6Ii8+CiAgICA8L2c+CiAgICA8ZyBzdHJva2U9IiNGRkYiIHN0cm9rZS1vcGFjaXR5PSIuMiIgc3Ryb2tlLXdpZHRoPSI4Ij4KICAgICAgPHBhdGggZD0iTTIwMC44MiAxMC45OTJsMjcuNiAzMC4wMzVhMTMgMTMgMCAwMTAgMTcuNTkzbC0yNy42IDMwLjAzNWMtNC44NTggNS4yODYtMTMuMDgyIDUuNjM0LTE4LjM2OC43NzZhMTMgMTMgMCAwMS0uNzc2LS43NzZsLTI3LjYtMzAuMDM1YTEzIDEzIDAgMDEwLTE3LjU5M2wyNy42LTMwLjAzNWM0Ljg1OC01LjI4NiAxMy4wODEtNS42MzQgMTguMzY4LS43NzZhMTMgMTMgMCAwMS43NzYuNzc2eiIvPgogICAgICA8cGF0aCBkPSJNMTY2LjgyIDEwLjk5MmwyNy42IDMwLjAzNWExMyAxMyAwIDAxMCAxNy41OTNsLTI3LjYgMzAuMDM1Yy00Ljg1OCA1LjI4Ni0xMy4wODIgNS42MzQtMTguMzY4Ljc3NmExMyAxMyAwIDAxLS43NzYtLjc3NmwtMjcuNi0zMC4wMzVhMTMgMTMgMCAwMTAtMTcuNTkzbDI3LjYtMzAuMDM1YzQuODU4LTUuMjg2IDEzLjA4MS01LjYzNCAxOC4zNjgtLjc3NmExMyAxMyAwIDAxLjc3Ni43NzZ6Ii8+CiAgICA8L2c+CiAgICA8ZyBzdHJva2U9IiNGRkYiIHN0cm9rZS1vcGFjaXR5PSIuMiIgc3Ryb2tlLXdpZHRoPSI4Ij4KICAgICAgPHBhdGggZD0iTTIwMC44MiA1NDEuOTkybDI3LjYgMzAuMDM1YTEzIDEzIDAgMDEwIDE3LjU5M2wtMjcuNiAzMC4wMzVjLTQuODU4IDUuMjg2LTEzLjA4MiA1LjYzNC0xOC4zNjguNzc2YTEzIDEzIDAgMDEtLjc3Ni0uNzc2bC0yNy42LTMwLjAzNWExMyAxMyAwIDAxMC0xNy41OTNsMjcuNi0zMC4wMzVjNC44NTgtNS4yODYgMTMuMDgxLTUuNjM0IDE4LjM2OC0uNzc2YTEzIDEzIDAgMDEuNzc2Ljc3NnoiLz4KICAgICAgPHBhdGggZD0iTTE2Ni44MiA1NDEuOTkybDI3LjYgMzAuMDM1YTEzIDEzIDAgMDEwIDE3LjU5M2wtMjcuNiAzMC4wMzVjLTQuODU4IDUuMjg2LTEzLjA4MiA1LjYzNC0xOC4zNjguNzc2YTEzIDEzIDAgMDEtLjc3Ni0uNzc2bC0yNy42LTMwLjAzNWExMyAxMyAwIDAxMC0xNy41OTNsMjcuNi0zMC4wMzVjNC44NTgtNS4yODYgMTMuMDgxLTUuNjM0IDE4LjM2OC0uNzc2YTEzIDEzIDAgMDEuNzc2Ljc3NnoiLz4KICAgIDwvZz4KICAgIDxjaXJjbGUgY3g9IjUwIiBjeT0iMTAwIiByPSIyMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjgiIG9wYWNpdHk9Ii4xOTIiLz4KICAgIDxjaXJjbGUgY3g9IjMzNCIgY3k9IjIxOCIgcj0iMjAiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI4IiBvcGFjaXR5PSIuMTkyIi8+CiAgICA8ZyBvcGFjaXR5PSIuMTkyIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAzNDkgNDA4KSI+CiAgICAgIDxjaXJjbGUgY3g9IjMyOSIgY3k9IjI2IiByPSIyMCIgZmlsbD0iIzAwMCIvPgogICAgICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjEzMiIgcj0iMjAiIGZpbGw9IiMwMDAiLz4KICAgICAgPGNpcmNsZSBjeD0iNDUiIGN5PSIyMCIgcj0iMjAiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI4Ii8+CiAgICAgIDxjaXJjbGUgY3g9IjMyOSIgY3k9IjEzOCIgcj0iMjAiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI4Ii8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K);
background-position: center center;
background-size: cover;
}
@media (min-width: 481px) {
.cta {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSI0NTYiIHZpZXdCb3g9IjAgMCAxNDQwIDQ1NiI+CiAgPGRlZnM+CiAgICA8cGF0aCBpZD0iYSIgZD0iTTAgMGgxNDU2djQ1NkgweiIvPgogIDwvZGVmcz4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPG1hc2sgaWQ9ImIiIGZpbGw9IiNmZmYiPgogICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIi8+CiAgICA8L21hc2s+CiAgICA8dXNlIGZpbGw9IiM0QTRFNTciIHhsaW5rOmhyZWY9IiNhIi8+CiAgICA8Y2lyY2xlIGN4PSIzOTkuNSIgY3k9IjQzNS41IiByPSIyMC41IiBmaWxsPSIjRkZGIiBtYXNrPSJ1cmwoI2IpIiBvcGFjaXR5PSIuMDUyIi8+CiAgICA8ZWxsaXBzZSBjeD0iMTkiIGN5PSI0NTYuNSIgZmlsbD0iI0ZGRiIgbWFzaz0idXJsKCNiKSIgb3BhY2l0eT0iLjA1MiIgcng9IjE5IiByeT0iMjAuNSIvPgogICAgPGNpcmNsZSBjeD0iMzAyIiBjeT0iMTM2IiByPSIyMCIgZmlsbD0iI0ZGRiIgbWFzaz0idXJsKCNiKSIgb3BhY2l0eT0iLjA1MiIvPgogICAgPGNpcmNsZSBjeD0iMTM2NSIgY3k9Ijg5LjgxNSIgcj0iMjAiIGZpbGw9IiNGRkYiIG1hc2s9InVybCgjYikiIG9wYWNpdHk9Ii4wMzMiLz4KICAgIDxlbGxpcHNlIGN4PSIxMTI4LjUiIGN5PSIzNzkiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI4IiBtYXNrPSJ1cmwoI2IpIiBvcGFjaXR5PSIuMTkyIiByeD0iMTguNSIgcnk9IjE5Ii8+CiAgICA8cGF0aCBzdHJva2U9IiNGRkYiIHN0cm9rZS1vcGFjaXR5PSIuMTk5IiBzdHJva2Utd2lkdGg9IjgiIGQ9Ik0xMTY5LjEzNSAxODAuNDA0bDM3LjI1NCAxLjU1YTEzIDEzIDAgMDExMi40NDcgMTIuNDMxbDEuNTU4IDM2LjI5NmMuMzA3IDcuMTczLTUuMjU4IDEzLjIzOC0xMi40MzEgMTMuNTQ2YTEzIDEzIDAgMDEtMS4wOTggMGwtMzcuMjU0LTEuNTVhMTMgMTMgMCAwMS0xMi40NDctMTIuNDMxbC0xLjU1OC0zNi4yOTZjLS4zMDctNy4xNzMgNS4yNTgtMTMuMjM4IDEyLjQzMS0xMy41NDZhMTMgMTMgMCAwMTEuMDk4IDB6IiBtYXNrPSJ1cmwoI2IpIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAxMTg4IDIxMi4zMTUpIi8+CiAgICA8cGF0aCBzdHJva2U9IiNGRkYiIHN0cm9rZS1vcGFjaXR5PSIuMTk5IiBzdHJva2Utd2lkdGg9IjgiIGQ9Ik0xMTM4LjEzNCAxODAuNDEzbDM2LjI5NiAxLjUzM2ExMyAxMyAwIDAxMTIuNDQgMTIuNDRsMS41MzMgMzYuMjk1Yy4zMDMgNy4xNzMtNS4yNjcgMTMuMjM0LTEyLjQ0IDEzLjUzN2ExMyAxMyAwIDAxLTEuMDk3IDBsLTM2LjI5Ni0xLjUzM2ExMyAxMyAwIDAxLTEyLjQ0LTEyLjQ0bC0xLjUzMy0zNi4yOTVjLS4zMDMtNy4xNzMgNS4yNjctMTMuMjM0IDEyLjQ0LTEzLjUzN2ExMyAxMyAwIDAxMS4wOTcgMHoiIG1hc2s9InVybCgjYikiIHRyYW5zZm9ybT0icm90YXRlKDQ1IDExNTYuNSAyMTIuMzE1KSIvPgogICAgPHBhdGggc3Ryb2tlPSIjRkZGIiBzdHJva2Utb3BhY2l0eT0iLjE5OSIgc3Ryb2tlLXdpZHRoPSI4IiBkPSJNODUxLjU5OCAzNDcuNzQ5bDM4LjIxMiAxLjU2NmExMyAxMyAwIDAxMTIuNDU2IDEyLjQyM2wxLjU4IDM2LjI5N2MuMzEzIDcuMTczLTUuMjQ5IDEzLjI0LTEyLjQyMiAxMy41NTNhMTMgMTMgMCAwMS0xLjA5OC4wMDJsLTM4LjIxMi0xLjU2N2ExMyAxMyAwIDAxLTEyLjQ1Ni0xMi40MjNsLTEuNTgtMzYuMjk3Yy0uMzEzLTcuMTczIDUuMjQ5LTEzLjI0IDEyLjQyMi0xMy41NTNhMTMgMTMgMCAwMTEuMDk4LS4wMDF6IiBtYXNrPSJ1cmwoI2IpIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSA4NzAuOTYyIDM3OS42NjkpIi8+CiAgICA8cGF0aCBzdHJva2U9IiNGRkYiIHN0cm9rZS1vcGFjaXR5PSIuMTk5IiBzdHJva2Utd2lkdGg9IjgiIGQ9Ik02MjIuMTM0IDU4LjQxM2wzNi4yOTYgMS41MzNhMTMgMTMgMCAwMTEyLjQ0IDEyLjQ0bDEuNTMzIDM2LjI5NWMuMzAzIDcuMTczLTUuMjY3IDEzLjIzNC0xMi40NCAxMy41MzdhMTMgMTMgMCAwMS0xLjA5NyAwbC0zNi4yOTYtMS41MzNhMTMgMTMgMCAwMS0xMi40NC0xMi40NGwtMS41MzMtMzYuMjk1Yy0uMzAzLTcuMTczIDUuMjY3LTEzLjIzNCAxMi40NC0xMy41MzdhMTMgMTMgMCAwMTEuMDk3IDB6IiBtYXNrPSJ1cmwoI2IpIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSA2NDAuNSA5MC4zMTUpIi8+CiAgICA8cGF0aCBzdHJva2U9IiNGRkYiIHN0cm9rZS1vcGFjaXR5PSIuMTk5IiBzdHJva2Utd2lkdGg9IjgiIGQ9Ik0yMjkuNTk2IDI0Ny4wNmwzNi4yOTYgMS41MzNhMTMgMTMgMCAwMTEyLjQ0IDEyLjQ0bDEuNTMzIDM2LjI5NGMuMzAzIDcuMTc0LTUuMjY3IDEzLjIzNS0xMi40NCAxMy41MzhhMTMgMTMgMCAwMS0xLjA5OCAwbC0zNi4yOTUtMS41MzRhMTMgMTMgMCAwMS0xMi40NC0xMi40NGwtMS41MzMtMzYuMjk1Yy0uMzAzLTcuMTczIDUuMjY2LTEzLjIzNCAxMi40NC0xMy41MzdhMTMgMTMgMCAwMTEuMDk3IDB6IiBtYXNrPSJ1cmwoI2IpIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAyNDcuOTYyIDI3OC45NjIpIi8+CiAgICA8cGF0aCBzdHJva2U9IiNGRkYiIHN0cm9rZS1vcGFjaXR5PSIuMTk5IiBzdHJva2Utd2lkdGg9IjgiIGQ9Ik04MjAuNTk2IDM0Ny43NjZsMzYuMjk2IDEuNTM0YTEzIDEzIDAgMDExMi40NCAxMi40NGwxLjUzMyAzNi4yOTVjLjMwMyA3LjE3My01LjI2NyAxMy4yMzQtMTIuNDQgMTMuNTM3YTEzIDEzIDAgMDEtMS4wOTggMGwtMzYuMjk1LTEuNTM0YTEzIDEzIDAgMDEtMTIuNDQtMTIuNDRsLTEuNTMzLTM2LjI5NWMtLjMwMy03LjE3MyA1LjI2Ni0xMy4yMzQgMTIuNDQtMTMuNTM3YTEzIDEzIDAgMDExLjA5NyAweiIgbWFzaz0idXJsKCNiKSIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgODM4Ljk2MiAzNzkuNjY5KSIvPgogICAgPHBhdGggc3Ryb2tlPSIjRkZGIiBzdHJva2Utb3BhY2l0eT0iLjE5OSIgc3Ryb2tlLXdpZHRoPSI4IiBkPSJNNTkwLjEzNSA1OC40MDRsMzcuMjU0IDEuNTVhMTMgMTMgMCAwMTEyLjQ0NyAxMi40MzFsMS41NTggMzYuMjk2Yy4zMDcgNy4xNzMtNS4yNTggMTMuMjM4LTEyLjQzMSAxMy41NDZhMTMgMTMgMCAwMS0xLjA5OCAwbC0zNy4yNTQtMS41NWExMyAxMyAwIDAxLTEyLjQ0Ny0xMi40MzFsLTEuNTU4LTM2LjI5NmMtLjMwNy03LjE3MyA1LjI1OC0xMy4yMzggMTIuNDMxLTEzLjU0NmExMyAxMyAwIDAxMS4wOTggMHoiIG1hc2s9InVybCgjYikiIHRyYW5zZm9ybT0icm90YXRlKDQ1IDYwOSA5MC4zMTUpIi8+CiAgICA8cGF0aCBzdHJva2U9IiNGRkYiIHN0cm9rZS1vcGFjaXR5PSIuMTk5IiBzdHJva2Utd2lkdGg9IjgiIGQ9Ik0xOTcuNTk2IDI0Ny4wNmwzNi4yOTYgMS41MzNhMTMgMTMgMCAwMTEyLjQ0IDEyLjQ0bDEuNTMzIDM2LjI5NGMuMzAzIDcuMTc0LTUuMjY3IDEzLjIzNS0xMi40NCAxMy41MzhhMTMgMTMgMCAwMS0xLjA5OCAwbC0zNi4yOTUtMS41MzRhMTMgMTMgMCAwMS0xMi40NC0xMi40NGwtMS41MzMtMzYuMjk1Yy0uMzAzLTcuMTczIDUuMjY2LTEzLjIzNCAxMi40NC0xMy41MzdhMTMgMTMgMCAwMTEuMDk3IDB6IiBtYXNrPSJ1cmwoI2IpIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAyMTUuOTYyIDI3OC45NjIpIi8+CiAgICA8cGF0aCBzdHJva2U9IiNGRkYiIHN0cm9rZS1vcGFjaXR5PSIuMTk5IiBzdHJva2Utd2lkdGg9IjgiIGQ9Ik0xNDIzLjU5Ni0zMy45NGwzNi4yOTYgMS41MzNhMTMgMTMgMCAwMTEyLjQ0IDEyLjQ0bDEuNTMzIDM2LjI5NGMuMzAzIDcuMTc0LTUuMjY3IDEzLjIzNS0xMi40NCAxMy41MzhhMTMgMTMgMCAwMS0xLjA5OCAwbC0zNi4yOTUtMS41MzRhMTMgMTMgMCAwMS0xMi40NC0xMi40NGwtMS41MzMtMzYuMjk1Yy0uMzAzLTcuMTczIDUuMjY2LTEzLjIzNCAxMi40NC0xMy41MzdhMTMgMTMgMCAwMTEuMDk3IDB6IiBtYXNrPSJ1cmwoI2IpIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAxNDQxLjk2MiAtMi4wMzgpIi8+CiAgICA8cGF0aCBzdHJva2U9IiNGRkYiIHN0cm9rZS1vcGFjaXR5PSIuMTk5IiBzdHJva2Utd2lkdGg9IjgiIGQ9Ik0xMzkxLjU5Ni0zMy45NGwzNi4yOTYgMS41MzNhMTMgMTMgMCAwMTEyLjQ0IDEyLjQ0bDEuNTMzIDM2LjI5NGMuMzAzIDcuMTc0LTUuMjY3IDEzLjIzNS0xMi40NCAxMy41MzhhMTMgMTMgMCAwMS0xLjA5OCAwbC0zNi4yOTUtMS41MzRhMTMgMTMgMCAwMS0xMi40NC0xMi40NGwtMS41MzMtMzYuMjk1Yy0uMzAzLTcuMTczIDUuMjY2LTEzLjIzNCAxMi40NC0xMy41MzdhMTMgMTMgMCAwMTEuMDk3IDB6IiBtYXNrPSJ1cmwoI2IpIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSAxNDA5Ljk2MiAtMi4wMzgpIi8+CiAgICA8ZWxsaXBzZSBjeT0iMTcwIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iOCIgbWFzaz0idXJsKCNiKSIgb3BhY2l0eT0iLjE5MiIgcng9IjE5IiByeT0iMjEiLz4KICAgIDxlbGxpcHNlIGN4PSIzNTYuNSIgY3k9IjYuODE1IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iOCIgbWFzaz0idXJsKCNiKSIgb3BhY2l0eT0iLjE5MiIgcng9IjE4LjUiIHJ5PSIyMCIvPgogICAgPGNpcmNsZSBjeD0iNTQ0IiBjeT0iMjkyLjgxNSIgcj0iMTkiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI4IiBtYXNrPSJ1cmwoI2IpIiBvcGFjaXR5PSIuMTkyIi8+CiAgICA8Y2lyY2xlIGN4PSIxNDAyLjUiIGN5PSIyNzguNSIgcj0iMjAuNSIgZmlsbD0iI0ZGRiIgbWFzaz0idXJsKCNiKSIgb3BhY2l0eT0iLjAzMyIvPgogICAgPGNpcmNsZSBjeD0iODcyLjUiIGN5PSIxNDkuNSIgcj0iMjAuNSIgZmlsbD0iI0ZGRiIgbWFzaz0idXJsKCNiKSIgb3BhY2l0eT0iLjA1MiIvPgogICAgPGVsbGlwc2UgY3g9IjExNDYuNSIgY3k9IjQ0IiBmaWxsPSIjMDAwIiBtYXNrPSJ1cmwoI2IpIiBvcGFjaXR5PSIuMTkyIiByeD0iMTguNSIgcnk9IjIwIi8+CiAgICA8ZWxsaXBzZSBjeD0iMTguNSIgY3k9IjQ0NiIgZmlsbD0iIzAwMCIgbWFzaz0idXJsKCNiKSIgb3BhY2l0eT0iLjE5MiIgcng9IjE4LjUiIHJ5PSIyMCIvPgogICAgPGVsbGlwc2UgY3g9IjEzOTYuNSIgY3k9IjQ0NiIgZmlsbD0iIzAwMCIgbWFzaz0idXJsKCNiKSIgb3BhY2l0eT0iLjE5MiIgcng9IjE4LjUiIHJ5PSIyMCIvPgogIDwvZz4KPC9zdmc+Cg==);
background-repeat: repeat;
}
}
.cta.cta--light {
background-image: url(/7d751ad7/26.3.4/images/css/light-small.7e63ba2c..png);
background-color: #ebebeb;
color: #4a4e57;
}
@media (min-width: 768px) {
.cta.cta--light {
background-image: url(/7d751ad7/26.3.4/images/css/light-large.bc6593dd..png);
}
}
.cta.cta--fullwidth {
padding: 64px 16px;
}
.cta__label {
font-family: var(--header-font);
font-weight: 700;
font-size: 36px;
line-height: 44px;
margin-bottom: 16px;
}
@media (min-width: 768px) {
.cta__label {
font-size: 40px;
line-height: 48px;
}
}
.cta--fullwidth .cta__label {
margin-bottom: 24px;
}
.cta__description {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
max-width: 600px;
margin: 0 auto 16px;
}
.cta--fullwidth .cta__description {
margin-bottom: 24px;
}
.cta__description a {
color: inherit;
text-decoration: underline;
}
.cta--fullwidth .cta__body {
max-width: 600px;
margin: 0 auto;
}
.embedded-video__poster {
position: relative;
width: 100%;
}
.embedded-video__poster > img {
width: 100%;
pointer-events: none;
}
.embedded-video__poster::after {
content: "play_circle_outline";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 50px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
color: #d9121f;
speak: none;
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
}
@media (min-width: 768px) {
.embedded-video__poster::after {
font-size: 70px;
}
}
.embedded-video__video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.embedded-video__video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.error {
display: flex;
flex-direction: column;
justify-content: space-around;
text-align: center;
padding: 24px 24px;
}
@media (min-width: 768px) {
.error {
padding: 64px 64px;
}
}
.ff-new-registration .s-pseudo-modal > .error.d-pseudo-modal {
background-color: #ffffff;
}
.error__code {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
margin-bottom: 24px;
}
@media (min-width: 768px) {
.error__code {
font-size: 28px;
line-height: 36px;
}
}
.error__description {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
margin-bottom: 24px;
}
@media (min-width: 768px) {
.error__description {
font-size: 28px;
line-height: 36px;
}
}
.error__message {
margin-bottom: 24px;
}
.error-list {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.error-list {
flex-direction: row;
justify-content: center;
}
}
@media (min-width: 768px) {
.error-list--item {
margin-right: 24px;
}
}
.error-list--item__link {
font-weight: bold;
color: #3244ff;
}
.w-expandable-item {
display: flex;
gap: 16px;
flex-direction: column;
}
.expandable-item {
color: #1d1d1b;
border: 2px solid #69141e;
padding: 0;
}
.expandable-item__handle {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
position: relative;
padding: 16px 40px 16px 16px;
cursor: pointer;
}
.expandable-item__handle::after {
content: "add";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 16px;
color: #1d1d1b;
}
.expandable-item[open] .expandable-item__handle::after {
content: "remove";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
.expandable-item--alternate .expandable-item__handle {
background-color: #cdcdcd;
}
.expandable-item__drawer {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
padding: 8px 16px 16px;
}
.js-details-not-supported .expandable-item__drawer {
display: none;
}
.js-details-not-supported[open] .expandable-item__drawer {
display: block;
}
.expandable-item--large .expandable-item__handle {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
}
@media (min-width: 768px) {
.expandable-item--large .expandable-item__handle {
font-size: 28px;
line-height: 36px;
}
}
.expandable-item--large .expandable-item__handle::after {
font-size: 26px;
}
@media (min-width: 768px) {
.expandable-item--large .expandable-item__handle::after {
font-size: 28px;
}
}
.expandable-item[open] .expandable-item--large .expandable-item__handle::after {
font-size: 26px;
}
@media (min-width: 768px) {
.expandable-item[open] .expandable-item--large .expandable-item__handle::after {
font-size: 28px;
}
}
.expandable-item--standalone {
margin-bottom: 24px;
}
[data-js-hooks*=filter-content]:not(.is-active) {
display: none;
}
.w-filter-bar {
width: 100%;
padding: 0 16px;
background: #1d1d1b;
}
.filter-bar {
width: 100%;
max-width: 1244px;
margin-right: auto;
margin-left: auto;
padding-top: 8px;
padding-bottom: 8px;
display: flex;
justify-content: space-between;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar {
display: none;
}
.filter-bar__filters {
display: flex;
}
.filter-bar__filter {
padding: 16px 24px;
color: #ffffff;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
display: inline-block;
}
.filter-bar__filter:hover, .filter-bar__filter.is-active {
border-bottom: 2px solid #ffffff;
}
@media (max-width: 767px) {
.filter-bar--feed {
display: none;
}
}
.w-filter-bar--light {
background: #ebebeb;
}
.w-filter-bar--light .filter-bar__filter {
color: #1d1d1b;
}
.w-filter-bar--light .filter-bar__filter:hover, .w-filter-bar--light .filter-bar__filter.is-active {
border-bottom-color: #ef0000;
}
.w-filter-bar--large .filter-bar {
padding-top: 0;
padding-bottom: 0;
}
.w-filter-bar--large .filter-bar__filter {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
border-bottom-width: 8px;
}
@media (min-width: 768px) {
.w-filter-bar--large .filter-bar__filter {
font-size: 28px;
line-height: 36px;
}
}
.w-filter-bar--large .filter-bar__filter:hover, .w-filter-bar--large .filter-bar__filter.is-active {
border-bottom-width: 8px;
}
.filter-tray {
background-color: #edeff1;
color: #1d1d1b;
display: flex;
flex-direction: column;
padding: 16px;
}
@keyframes dropDown {
from {
opacity: 0;
margin-top: calc(var(--dropdown-top-margin) - 10px);
}
to {
opacity: 1;
margin-top: var(--dropdown-top-margin);
}
}
.w-footer {
width: 100%;
padding: 0 16px;
background: #32000f;
}
.footer {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
width: 100%;
max-width: 1244px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
padding-top: 24px;
padding-bottom: 24px;
color: #ffffff;
}
.footer__separator {
height: 1px;
width: 100%;
margin-top: 16px;
margin-bottom: 8px;
background-color: #ef0000;
}
.footer__branding {
margin-bottom: 16px;
text-transform: uppercase;
}
@media (min-width: 768px) {
.footer__branding {
margin-bottom: 0;
}
}
.footer__rs-group b {
font-weight: bold;
}
.footer__ds-logo {
margin-right: 16px;
}
.footer__ds-logo > img,
.footer__ds-logo > svg {
height: 24px;
}
.footer__language-selector {
width: 100%;
}
@media (min-width: 768px) {
.footer__language-selector {
width: auto;
}
}
.footer__nav-link {
position: relative;
display: inline-block;
margin: 0;
}
.footer__nav-link > a {
color: #ffffff;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 8px;
display: inline-block;
}
.footer__nav-link:not(:last-child)::after {
padding-right: 8px;
content: "|";
}
.footer__social-icons {
height: 16px;
display: inline-flex;
align-items: center;
font-weight: 700;
}
.footer__social-icons svg {
height: 16px;
}
.footer__social-icons svg > path {
fill: #ffffff;
}
.footer__social-icons-link {
line-height: 1;
padding: 0 8px;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.form__fieldset {
margin-bottom: 24px;
}
.form__legend {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #1d1d1b;
margin-bottom: 16px;
}
@media (min-width: 768px) {
.form__legend {
font-size: 28px;
line-height: 36px;
}
}
.form__field {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
width: 100%;
}
@media (max-width: 480px) {
.form__field {
max-width: calc(100vw - 32px);
}
}
@media (min-width: 768px) {
.form__fields--inline .form__field {
width: auto;
flex: 1;
}
}
.form__field-password {
position: relative;
}
.form__field--toggle {
margin-bottom: 0;
}
.form__element .o-radio,
.form__element .o-checkbox {
margin-bottom: 8px;
}
.form__fields {
position: relative;
width: 100%;
}
@media (min-width: 768px) {
.form__fields--inline {
display: flex;
align-items: baseline;
gap: 24px;
}
}
.form__fields--box {
padding: 24px 24px 0;
margin-bottom: 24px;
background-color: #edeff1;
border: 1px solid #bcbcbc;
}
.form__fields--toggleable {
display: none;
}
.form__fields--toggleable.is-visible {
display: block;
}
.form__fields--collection {
padding-right: 64px;
}
.form__delete {
position: absolute;
right: 22px;
top: 22px;
color: #d9121f;
}
.form__field ~ .form__delete, .form__fields--inline ~ .form__delete {
top: auto;
bottom: 32px;
}
@media (min-width: 768px) {
.form__field--width-half {
width: 50%;
}
}
@media (min-width: 768px) {
.form__field--width-three-quarter {
width: 75%;
}
}
@media (min-width: 768px) {
.form__field--width-one-quarter {
width: 25%;
}
}
@media (min-width: 768px) {
.form__field--width-one-third {
width: 33.3333333333%;
}
}
@media (min-width: 768px) {
.form__field--width-two-third {
width: 66.6666666667%;
}
}
.geo-notice {
background-color: #ebebeb;
}
.geo-notice__content {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
padding-left: 16px;
}
@media (min-width: 768px) {
.geo-notice__content {
padding-left: 24px;
}
}
.geo-notice__container {
justify-content: center;
align-items: center;
padding-top: 16px;
}
@media (min-width: 768px) {
.geo-notice__container {
display: flex;
justify-content: center;
align-items: center;
padding-top: 0;
}
}
.geo-notice__buttons {
margin: 24px;
gap: 24px;
}
@media (max-width: 479px) {
.geo-notice__buttons {
text-align: center;
}
.geo-notice__buttons .geo-notice__button {
display: block;
width: 100%;
}
}
@media (min-width: 768px) {
.geo-notice__buttons {
display: flex;
flex-wrap: initial;
justify-content: left;
margin: 24px;
}
}
.js-geo-notice--dismissed {
display: none;
}
.w-header {
width: 100%;
padding-left: 16px;
padding-right: 16px;
background-color: #ffffff;
position: sticky;
z-index: 10;
top: 0;
}
@media (min-width: 992px) {
.w-header {
position: relative;
height: auto;
}
}
.w-header.nav-is-open {
position: fixed;
z-index: 20;
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
}
.header {
width: 100%;
max-width: 1244px;
margin-left: auto;
margin-right: auto;
padding-top: 8px;
padding-bottom: 8px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
@media (min-width: 600px) {
.header {
min-height: 60px;
}
}
.header__logo > img {
height: 34px;
}
@media (min-width: 600px) {
.header__logo > img {
height: 30px;
}
}
.header__icons {
display: flex;
}
.header__full-width-search {
flex-basis: 100%;
opacity: 1;
position: relative;
}
@media (max-width: 767px) {
.header__full-width-search::after, .header__full-width-search::before {
content: "";
position: absolute;
top: 4px;
left: -16px;
right: -16px;
border-top: 1px solid #cdcdcd;
}
}
@media (max-width: 767px) {
.header__full-width-search::after {
top: auto;
bottom: -8px;
}
}
.is-scrolled .header__full-width-search {
opacity: 0;
height: 0;
}
.header__nav {
display: none;
flex-basis: 100%;
margin-top: 8px;
padding-bottom: 8px;
}
.nav-is-open .header__nav {
display: block;
overflow: auto;
/*
16px: header top padding
40px: header height
40px: full width search height
8px: nav top margin
*/
height: calc(100vh - 104px);
}
@media (min-width: 768px) {
.nav-is-open .header__nav {
height: calc(100vh - 64px);
}
}
.header-icon {
min-width: 48px;
position: relative;
display: flex;
flex-direction: column;
margin-left: 8px;
align-items: center;
color: #69141e;
text-align: center;
}
@media (min-width: 480px) {
.header-icon {
margin-left: 16px;
}
}
@media (min-width: 768px) {
.header-icon {
margin: 0 8px;
}
}
.header-icon:hover {
color: #1d1d1b;
fill: #1d1d1b;
}
.header-icon:hover .header-icon__label {
color: #1d1d1b;
}
.header-icon:hover .header-icon__icon > svg {
fill: #1d1d1b;
}
.header-icon--search-toggle {
display: none;
}
@media (min-width: 480px) {
.header-icon--search-toggle {
display: inherit;
}
}
.header-icon--search-toggle:hover {
color: #1d1d1b;
}
.header-icon--basket {
display: none;
}
.header-icon--basket.has-items {
display: inherit;
}
.header-icon--contribute {
display: none;
}
@media (min-width: 340px) {
.header-icon--contribute {
display: flex;
}
}
.header-icon__icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-block;
pointer-events: none;
display: inherit;
vertical-align: center;
}
.header-icon__icon > svg {
width: 24px;
height: 24px;
fill: #4a4e57;
}
.header-icon__icon > svg {
fill: #69141e;
}
.header-icon__label {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
color: #69141e;
pointer-events: none;
display: inherit;
}
.header-icon__notification {
width: 20px;
height: 20px;
top: -8px;
right: 4px;
position: absolute;
display: none;
pointer-events: none;
color: #ef0000;
text-shadow: 2px 2px 4px rgba(29, 29, 27, 0.5);
}
.has-notifications .header-icon__notification {
display: block;
}
.header-icon__counter {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
position: absolute;
top: -2px;
right: -2px;
min-width: 16px;
min-height: 16px;
display: block;
padding-left: 6px;
padding-right: 6px;
border-radius: 999em;
font-weight: 700;
font-family: var(--header-font);
background: #ef0000;
color: #ffffff;
}
.nav-button {
display: flex;
flex-direction: column;
margin-left: 8px;
cursor: pointer;
align-items: center;
}
@media (min-width: 480px) {
.nav-button {
margin-left: 24px;
}
}
@media (min-width: 992px) {
.nav-button {
display: none;
}
}
.nav-button:hover .header-icon__label {
color: #69141e;
}
.nav-button:hover .nav-button__icon {
background-color: #69141e;
}
.nav-button__icon {
width: 22px;
height: 22px;
margin: 1px;
border-radius: 50%;
background-color: #69141e;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.nav-button__burger,
.nav-button__burger::before,
.nav-button__burger::after {
width: 12px;
height: 1px;
content: "";
display: block;
background-color: #ffffff;
transition: 0.4s;
pointer-events: none;
}
.nav-button__burger::before {
position: absolute;
bottom: 3px;
}
.nav-is-open .nav-button__burger::before {
transform: rotate(-45deg) translate(-2px, 2px);
}
.nav-button__burger {
position: relative;
}
.nav-is-open .nav-button__burger {
background-color: transparent;
}
.nav-button__burger::after {
position: absolute;
bottom: -3px;
}
.nav-is-open .nav-button__burger::after {
transform: rotate(45deg) translate(-2px, -2px);
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.expanding-search {
justify-content: flex-end;
border-bottom: none;
max-height: 40px;
}
@media (max-width: 767px) {
.expanding-search {
display: none;
}
}
.expanding-search:focus-within {
transition: border 0.2s;
border-color: #69141e;
}
.expanding-search__label {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
color: #69141e;
}
.expanding-search__label > span {
opacity: 1;
transition: opacity 0.2s;
}
.expanding-search__input {
order: 2;
width: 0;
transition: width 0.2s, opacity 0.2s;
max-height: 24px;
}
.expanding-search__input.has-content {
width: 200px;
}
.expanding-search__input.has-content ~ .expanding-search__label span {
opacity: 0;
}
.expanding-search__input.has-content ~ .expanding-search__reset {
display: inline-block;
}
.expanding-search__input:focus {
width: 200px;
}
.expanding-search__input:focus ~ .expanding-search__label span {
opacity: 0;
}
.expanding-search__reset {
margin-bottom: 12px;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.full-width-search {
margin-top: 16px;
width: 100%;
position: relative;
}
@media (min-width: 768px) {
.full-width-search {
display: none;
}
}
.full-width-search__label > span {
opacity: 0;
position: absolute;
}
.header-search {
display: flex;
position: relative;
}
.header-search__label {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
order: 1;
text-align: center;
color: rgba(105, 20, 30, 0.45);
}
.header-search__label:hover {
color: #1d1d1b;
}
.header-search__label:hover::before {
color: #1d1d1b;
}
.header-search__label::before {
content: "search";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
color: #69141e;
display: block;
}
.header-search__input {
width: 100%;
padding-right: 8px;
padding-left: 8px;
order: 2;
}
.header-search__input.has-content {
padding-right: 24px;
}
.header-search__input.has-content ~ .header-search__reset {
display: inline-block;
}
.header-search__input::-moz-placeholder {
color: #4a4e57;
}
.header-search__input::placeholder {
color: #4a4e57;
}
@supports (-webkit-overflow-scrolling: touch) {
.header-search__input {
font-size: 16px;
transform: scale(0.75);
transform-origin: left;
height: 32px;
}
}
.header-search__reset {
display: none;
position: absolute;
right: 0;
top: 0;
bottom: 0;
padding: 4px;
}
.header-search__reset::after {
content: "close";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 18px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
display: block;
color: rgba(74, 78, 87, 0.45);
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.expanding-search {
justify-content: flex-end;
border-bottom: none;
max-height: 40px;
}
@media (max-width: 767px) {
.expanding-search {
display: none;
}
}
.expanding-search:focus-within {
transition: border 0.2s;
border-color: #69141e;
}
.expanding-search__label {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
color: #69141e;
}
.expanding-search__label > span {
opacity: 1;
transition: opacity 0.2s;
}
.expanding-search__input {
order: 2;
width: 0;
transition: width 0.2s, opacity 0.2s;
max-height: 24px;
}
.expanding-search__input.has-content {
width: 200px;
}
.expanding-search__input.has-content ~ .expanding-search__label span {
opacity: 0;
}
.expanding-search__input.has-content ~ .expanding-search__reset {
display: inline-block;
}
.expanding-search__input:focus {
width: 200px;
}
.expanding-search__input:focus ~ .expanding-search__label span {
opacity: 0;
}
.expanding-search__reset {
margin-bottom: 12px;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.full-width-search {
margin-top: 16px;
width: 100%;
position: relative;
}
@media (min-width: 768px) {
.full-width-search {
display: none;
}
}
.full-width-search__label > span {
opacity: 0;
position: absolute;
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.dropdown-menu-list {
position: absolute;
left: 0;
width: 100%;
background: #ffffff;
margin-top: 20px;
display: none;
box-shadow: 0 10px 10px 0 rgba(74, 78, 87, 0.2);
z-index: 1;
border-top: 1px solid rgba(74, 78, 87, 0.1);
}
@media (min-width: 768px) {
.dropdown-menu-list {
width: auto;
margin-top: 24px;
border-radius: 4px;
box-shadow: 2px 2px 1px rgba(225, 225, 225, 0.5);
left: 50%;
transform: translateX(-50%);
border-top: none;
border: 1px solid #cdcdcd;
}
.dropdown-menu-list::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #ffffff;
left: 50%;
transform: translateX(-50%);
top: -5px;
}
.dropdown-menu-list::after {
content: "";
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #cdcdcd;
left: 50%;
z-index: -1;
transform: translateX(-50%);
top: -6px;
position: absolute;
}
}
.is-dropdown-open .dropdown-menu-list {
display: block;
animation: dropDown 0.2s ease-in both;
}
@keyframes dropDown {
from {
opacity: 0;
margin-top: calc(var(--dropdown-top-margin) - 10px);
}
to {
opacity: 1;
margin-top: var(--dropdown-top-margin);
}
}
.dropdown-menu-list__item {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: #4a4e57;
white-space: nowrap;
display: flex;
justify-content: center;
width: 100%;
padding: 16px;
}
@media (min-width: 768px) {
.dropdown-menu-list__item {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
padding: 8px 24px;
}
}
.dropdown-menu-list__item:hover {
background: #ebebeb;
}
.w-dropdown-menu-list {
--dropdown-top-margin: 48px;
}
@media (min-width: 768px) {
.w-dropdown-menu-list {
--dropdown-top-margin: 20px;
position: relative;
}
}
.is-scrolled .w-dropdown-menu-list {
--dropdown-top-margin: $spacing-1;
}
@media (min-width: 768px) {
.is-scrolled .w-dropdown-menu-list {
--dropdown-top-margin: 20px;
position: relative;
}
}
.dropdown-menu-list__item--separator {
border-bottom: 1px solid rgba(74, 78, 87, 0.1);
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.site-nav {
max-width: 900px;
margin: 0 auto;
}
.site-nav__categories {
display: flex;
flex-flow: row wrap;
}
.site-nav__category {
width: 100%;
}
@media (min-width: 768px) {
.site-nav__category {
width: 33.333%;
padding: 16px;
}
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.site-nav-category {
color: #4a4e57;
border-bottom: 1px solid #ebebeb;
}
@media (min-width: 768px) {
.site-nav-category {
border: none;
}
}
.site-nav-category__heading {
position: relative;
padding-top: 16px;
display: block;
}
@media (min-width: 768px) {
.site-nav-category__heading {
border-bottom: 0;
padding-bottom: 8px;
}
}
.site-nav-category__link {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
@media (max-width: 767px) {
.site-nav-category__link::after {
content: "add";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
color: #d9121f;
margin-left: 8px;
}
.is-expanded .site-nav-category__link::after {
content: "remove";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
}
@media (min-width: 768px) {
.site-nav-category__link {
justify-content: flex-start;
}
.site-nav-category__link::after {
content: "keyboard_arrow_right";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
color: #d9121f;
margin-left: 8px;
}
}
.site-nav-category__link--small {
display: flex;
color: inherit;
width: 100%;
}
@media (min-width: 768px) {
.site-nav-category__link--small {
display: none;
}
}
.site-nav-category__link--large {
display: none;
}
@media (min-width: 768px) {
.site-nav-category__link--large {
display: flex;
}
}
.site-nav-category__title {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
line-height: 24px;
position: relative;
}
@media (min-width: 768px) {
.site-nav-category__title::before {
content: "";
width: 0;
position: absolute;
background-color: #d9121f;
transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: -1;
height: 2px;
bottom: 0;
left: 0;
}
.site-nav-category__link:hover .site-nav-category__title {
color: #d9121f;
transition: color 0.5s ease;
}
.site-nav-category__link:hover .site-nav-category__title::before {
width: 100%;
}
}
.site-nav-category__description {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
font-style: italic;
margin-bottom: 24px;
max-width: 260px;
}
@media (min-width: 768px) {
.site-nav-category__description {
margin-bottom: 0;
max-width: none;
}
}
.site-nav-category__items {
display: none;
}
@media (min-width: 768px) {
.site-nav-category__items {
display: block;
}
}
.is-expanded .site-nav-category__items {
display: block;
animation: fadeIn 0.3s ease-in both;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translate3d(0, -2%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
@media (min-width: 768px) {
.site-nav-item--small-screen-only {
display: none;
}
}
.site-nav-item__link {
display: flex;
justify-content: space-between;
padding-top: 8px;
padding-bottom: 8px;
}
.site-nav-item__link::after {
content: "keyboard_arrow_right";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
color: #d9121f;
margin-left: 8px;
}
.site-nav-item__title {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
line-height: 24px;
color: #4a4e57;
position: relative;
}
@media (min-width: 768px) {
.site-nav-item__title::before {
content: "";
width: 0;
position: absolute;
background-color: #d9121f;
transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: -1;
height: 2px;
bottom: 0;
left: 0;
}
.site-nav-item__link:hover .site-nav-item__title {
color: #d9121f;
transition: color 0.5s ease;
}
.site-nav-item__link:hover .site-nav-item__title::before {
width: 100%;
}
}
/**
* This file is read by the styleguide to automatically produce the list of colours names and variables
* in the General/Colours page.
*
* It will assume any line beginning with an "$" is a colour definition line, and will ignore all others.
*/
/**
* Site colours
*/
/**
* Theme colours
*/
/**
* General success / error type colours
*/
/**
* Overrides for defaults set in include-media.scss
*/
/**
* Icon font
*
* To be used as follows:
* @include icon(string ligature, fontSize);
* default font size 24px as this is preferred for material icons
*
*/
/**
* AvatarImage
* Styles the standard avatar image (round icon)
*
* To be used as follows:
* @include avatarImage($size);
* where $size provides the height and width of the image
*
*/
/**
* Line clamp
*
* To be used as follows:
* @include line-clamp(int number-of-lines);
*
*/
/**
* Loading shimmer
* A loading animation in which a gradient sweeps through the background
*
* To be used as follows:
* @include loadingShimmer;
*
*/
/**
* Card percentage width
*
* To be used as follows:
* @include cardPercentageWidth(int number-per-row, horizontal-margin-between);
*
*/
/**
* Fade
*
* To be used as follows:
* @include fade(int transition-time, bool reverse-animation, string transition-type);
* reverse-animation defaults to false (fadeOut), true will make this a fadeIn transition.
* transition-type defaults to ease
* Requires '.fade' class to be applied to the element.
*
*/
/**
* Fields
*
* To be used as follows:
* @include fields;
* Applies default styling to basic form field elements such as input, textarea, select etc.
*
*/
/**
* Waffles
*/
.site-nav-footer {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
display: flex;
justify-content: space-between;
flex-flow: column;
}
@media (min-width: 768px) {
.site-nav-footer {
max-width: 1244px;
margin: 0 auto;
flex-flow: row;
}
}
@media (min-width: 768px) {
.site-nav-footer__links {
display: inline;
}
}
.site-nav-footer__link {
position: relative;
display: inline-block;
margin: 0;
}
.site-nav-footer__link > a {
padding-top: 8px;
padding-bottom: 8px;
padding-right: 8px;
display: inline-block;
}
.site-nav-footer__link:not(:last-child)::after {
padding-right: 8px;
content: "|";
}
.site-nav-footer__social-icons {
display: inline-flex;
align-items: center;
}
@media (min-width: 768px) {
.site-nav-footer__social-icons {
white-space: nowrap;
margin-left: 8px;
}
}
.site-nav-footer__social-icon {
margin: 0 8px;
line-height: 1;
}
.site-nav-footer__social-icon svg {
max-width: 16px;
height: 20px;
}
.hero {
height: 100%;
position: relative;
overflow: hidden;
color: var(--text-colour);
padding: 32px 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
@media (min-width: 768px) and (max-width: 991px) {
.hero {
flex-direction: row;
flex-wrap: wrap;
}
}
@media (min-width: 992px) {
.hero {
padding: 48px 0;
gap: 48px;
}
}
.hero__stats-block {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.hero__stats-block .d-hero__stats-block {
width: calc(33.3333333333% - 10.6666666667px);
}
.hero__title {
font-family: var(--header-font);
font-weight: 700;
font-size: 44px;
line-height: 52px;
max-width: 620px;
display: inline-block;
flex: 1 1 auto;
}
@media (min-width: 768px) {
.hero__title {
font-size: 48px;
line-height: 56px;
}
}
.hero__title > b {
color: var(--alt-text-colour);
}
@media (min-width: 768px) {
.hero__title--spaced {
flex: 1 0;
}
}
.hero__body {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
@media (min-width: 768px) {
.hero__body {
flex: 1 0;
}
}
.hero__content {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
@media (min-width: 768px) and (max-width: 991px) {
.hero__content {
flex: 1 0;
flex-direction: row;
gap: 24px;
}
}
@media (min-width: 992px) {
.hero__content {
flex: 1 0;
flex-direction: row;
}
}
.hero__subtitle {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
}
@media (min-width: 768px) {
.hero__subtitle {
flex: 1;
}
}
@media (min-width: 768px) {
.hero__image {
flex: 0 1 auto;
}
}
.hero--variant-column {
flex-direction: column;
padding: 32px 0;
gap: 32px;
align-items: center;
}
@media (min-width: 992px) {
.hero--variant-column {
flex-direction: row;
gap: 64px;
padding: 16px 0;
}
}
.hero--variant-column > .hero__content {
flex-direction: column;
gap: 32px;
}
@media (min-width: 992px) {
.hero--variant-column > .hero__content {
padding: 32px 0;
flex: 1 0 calc(50vw - 32px);
}
}
@media (min-width: 992px) {
.hero--variant-column > .hero__image {
flex: 1 0 calc(50vw - 32px);
}
}
.hero--new-layout {
color: #ffffff;
gap: 40px;
text-align: center;
padding: 0;
}
.hero--new-layout .hero__body {
align-items: center;
gap: 24px;
}
.hero--new-layout .hero__content {
align-items: center;
flex-direction: column;
}
.hero--new-layout .hero__title {
max-width: -moz-max-content;
max-width: max-content;
}
.hero--new-layout .hero__subtitle {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
}
.industries-banner {
color: #767676;
display: flex;
gap: 16px;
padding: 16px;
flex-direction: column;
text-align: center;
}
.industries-banner__content {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
}
.industries-banner__industry {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.industries-banner__industry-icon {
font-size: 24px;
}
@media (min-width: 768px) {
.industries-banner__industry-icon {
font-size: 36px;
}
}
.industries-banner__industry-title {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
text-align: center;
}
@media (min-width: 768px) {
.industries-banner__industry-title {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
}
}
.active-language {
color: #ffffff;
display: flex;
align-items: center;
}
.active-language::after {
content: "keyboard_arrow_down";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 12px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
}
.is-dropdown-open .active-language::after {
content: "keyboard_arrow_up";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 12px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
.active-language__flag {
width: 16px;
height: 16px;
}
.active-language__flag,
.active-language__label {
pointer-events: none;
margin-right: 8px;
}
.language-selector {
position: relative;
}
.language-selector__list {
background: #1d1d1b;
position: absolute;
bottom: 32px;
border: 1px solid rgba(255, 255, 255, 0.35);
width: 100%;
border-radius: 5px;
box-shadow: 2px 2px 27px 0 rgba(29, 29, 27, 0.7);
right: 0;
z-index: 15;
display: none;
color: #ffffff;
}
@media (min-width: 768px) {
.language-selector__list {
min-width: 128px;
}
}
.language-selector__list::before, .language-selector__list::after {
content: "";
position: absolute;
width: 0;
height: 0;
left: 5%;
transform: translateX(-10%);
}
@media (min-width: 768px) {
.language-selector__list::before, .language-selector__list::after {
left: 70%;
transform: translateX(-70%);
}
}
.language-selector__list::before {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1d1d1b;
z-index: 2;
bottom: -5px;
}
.language-selector__list::after {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(225, 225, 225, 0.5);
z-index: 1;
bottom: -6px;
}
.is-dropdown-open .language-selector__list {
display: block;
animation: raiseIn 0.2s ease-in both;
}
@keyframes raiseIn {
from {
opacity: 0;
transform: translate3d(0, 0%, 0);
}
to {
opacity: 1;
transform: translate3d(0, -2%, 0);
}
}
.language-selector__item {
display: flex;
align-items: center;
justify-content: flex-start;
cursor: pointer;
}
.language-selector__item:hover {
background: rgba(188, 188, 188, 0.1);
}
.language-selector__link {
display: flex;
align-items: center;
width: 100%;
padding: 8px 8px;
}
.language-selector__link:hover {
color: #ffffff;
}
.language-selector__flag {
margin-right: 22px;
width: 16px;
height: 16px;
}
.media-carousel {
position: relative;
}
.media-carousel__slide {
display: flex;
justify-content: space-between;
}
.media-carousel__controls {
position: absolute;
bottom: 0;
width: 100%;
}
@media (min-width: 768px) {
.media-carousel__controls {
right: 0;
width: 50%;
}
}
.media-carousel-controls {
display: flex;
justify-content: space-between;
align-items: center;
}
.media-carousel-controls__button {
background-color: #f1f1f1;
width: 64px;
height: 56px;
}
@media (min-width: 768px) {
.media-carousel-controls__button {
width: 104px;
height: 88px;
}
}
.media-carousel-controls__button:hover {
background-color: #d9121f;
}
.media-carousel-controls__button--back::before {
content: "keyboard_arrow_left";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 36px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
}
@media (min-width: 768px) {
.media-carousel-controls__button--back::before {
content: "keyboard_arrow_left";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 56px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
}
.media-carousel-controls__button--forward::before {
content: "keyboard_arrow_right";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 36px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
}
@media (min-width: 768px) {
.media-carousel-controls__button--forward::before {
content: "keyboard_arrow_right";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 56px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
}
.media-carousel-controls__counter {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
color: #4a4e57;
display: inline-flex;
}
.media-slide {
opacity: 0;
position: absolute;
color: #4a4e57;
pointer-events: none;
top: 0;
}
.media-slide.is-current {
opacity: 1;
position: relative;
pointer-events: auto;
}
.media-slide__image {
display: none;
}
@media (min-width: 768px) {
.media-slide__image {
width: 50%;
display: block;
}
}
.media-slide__title {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
margin-bottom: 24px;
}
@media (min-width: 768px) {
.media-slide__title {
font-size: 28px;
line-height: 36px;
}
}
.media-slide__subtitle {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
margin-bottom: 24px;
}
.media-slide__body_text p {
margin-bottom: 8px;
}
.media-slide__body_text a {
font-weight: 700;
}
.media-slide__body_text a:hover {
color: #d9121f;
}
.media-slide__body {
padding: 16px 16px 104px;
}
@media (min-width: 768px) {
.media-slide__body {
width: 50%;
}
}
.mega-nav {
border-top: 1px solid #cdcdcd;
background-color: #ffffff;
position: relative;
}
@media (max-width: 991px) {
.mega-nav {
display: none;
}
.w-header.nav-is-open ~ .mega-nav {
position: fixed;
top: 56px;
left: 0;
display: block;
height: calc(100vh - 56px);
width: 100%;
padding: 24px 0;
overflow: hidden auto;
z-index: 20;
}
}
@media (min-width: 992px) {
.mega-nav {
padding: 0 16px;
border-bottom: 1px solid #cdcdcd;
}
}
.mega-nav__container {
height: 100%;
}
@media (min-width: 992px) {
.mega-nav__container {
max-width: 1244px;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 992px) {
.mega-nav__list {
display: flex;
}
}
@media (max-width: 991px) {
.mega-nav__sub-menu {
position: absolute;
top: 0;
left: 100%;
height: 100%;
width: 100%;
background-color: #ffffff;
transition: left 0.1s ease-in-out;
visibility: hidden;
}
.mega-nav__sub-menu.is-open {
left: 0;
z-index: 5;
visibility: visible;
}
}
@media (min-width: 992px) {
.mega-nav__sub-menu {
display: none;
}
.mega-nav__item:hover .mega-nav__sub-menu {
display: block;
position: absolute;
width: 100%;
top: calc(100% + 1px);
left: 0;
background: #ffffff;
z-index: 5;
padding: 40px 16px 16px;
box-shadow: 0 5px 5px 0 rgba(31, 31, 31, 0.5);
}
}
@media (max-width: 991px) {
.mega-nav__item {
margin: 0 0 8px;
}
.mega-nav__level-2-list > .mega-nav__item {
margin: 24px 0;
}
.mega-nav__level-3-list > .mega-nav__item {
margin: 0;
}
}
@media (min-width: 992px) {
.mega-nav__item {
-moz-column-break-inside: avoid;
break-inside: avoid-column;
}
.mega-nav__level-2-list > .mega-nav__item {
margin: 0 0 24px;
}
}
.mega-nav__item-link {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
}
@media (max-width: 991px) {
.mega-nav__item-link {
display: block;
height: 44px;
padding: 8px 24px;
color: #1f1f1f;
}
}
@media (min-width: 992px) {
.mega-nav__item-link {
display: block;
padding: 8px 0;
color: #1f1f1f;
}
.mega-nav__item-link:hover {
color: #454545;
}
}
.mega-nav__top-level-link {
position: relative;
display: inline-block;
}
@media (max-width: 991px) {
.mega-nav__top-level-link {
font-family: var(--header-font);
text-transform: uppercase;
font-weight: 700;
font-size: 20px;
line-height: 28px;
}
.mega-nav__top-level-link::after {
content: "chevron_right";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
position: absolute;
right: 0;
top: 12px;
speak: none;
color: #ef0000;
}
}
@media (min-width: 992px) {
.mega-nav__top-level-link {
padding: 24px;
font-family: var(--body-font);
font-weight: 700;
font-size: 14px;
line-height: 19px;
}
.mega-nav__top-level-link::after {
content: "expand_more";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
position: absolute;
right: 0;
top: 22px;
speak: none;
color: #ef0000;
transition: all 0.3s ease-in-out;
}
.mega-nav__top-level-link::before {
position: absolute;
bottom: 16px;
left: 50%;
right: 50%;
content: "";
height: 2px;
background-color: #ef0000;
transition: all 0.3s ease-in-out;
}
.mega-nav__item:hover .mega-nav__top-level-link::before {
left: 24px;
right: 0;
}
.mega-nav__item:hover .mega-nav__top-level-link::after {
transform: rotate(-180deg);
}
.mega-nav__item:first-child .mega-nav__top-level-link {
padding-left: 0;
}
.mega-nav__item:first-child:hover .mega-nav__top-level-link::before {
left: 0;
}
}
.mega-nav__top-level-link.is-active {
color: #ef0000;
}
@media (max-width: 991px) {
.mega-nav__level-2-list {
padding-bottom: 16px;
}
}
@media (min-width: 992px) {
.mega-nav__level-2-list {
-moz-column-count: 2;
column-count: 2;
-moz-column-gap: 24px;
column-gap: 24px;
max-width: 1244px;
margin: 0 auto 24px;
}
}
@media (min-width: 1200px) {
.mega-nav__level-2-list {
-moz-column-count: 4;
column-count: 4;
}
}
@media (min-width: 992px) {
.mega-nav__level-3-list {
-moz-column-break-inside: avoid;
break-inside: avoid-column;
}
}
.mega-nav__back-to-all {
display: block;
width: 100%;
position: relative;
padding: 8px 24px 8px 48px;
font-family: var(--header-font);
text-transform: uppercase;
font-weight: 700;
font-size: 16px;
line-height: 28px;
text-align: left;
border-bottom: 1px solid #cdcdcd;
}
@media (min-width: 992px) {
.mega-nav__back-to-all {
display: none;
}
}
.mega-nav__back-to-all::after {
content: "chevron_left";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
position: absolute;
left: 24px;
top: 11px;
speak: none;
color: #ef0000;
}
@media (min-width: 992px) {
.mega-nav__item-all {
display: none;
}
}
.mega-nav__level-2-header {
display: block;
}
@media (max-width: 991px) {
.mega-nav__level-2-header {
padding: 8px 24px;
font-family: var(--header-font);
text-transform: uppercase;
font-weight: 700;
font-size: 18px;
line-height: 28px;
color: #69141e;
}
}
@media (min-width: 992px) {
.mega-nav__level-2-header {
padding: 8px 0;
font-family: var(--header-font);
text-transform: uppercase;
font-weight: 700;
font-size: 24px;
line-height: 36px;
color: #69141e;
}
.mega-nav__level-2-header:hover {
color: #a00f28;
}
}
.modal {
background: #ffffff;
box-shadow: 4px 4px 14px 0 rgba(81, 81, 81, 0.5);
min-width: 100px;
min-height: 100px;
width: calc(100vw - 2 * 16px);
max-width: 821px;
max-height: calc(100vh - 2 * 16px);
padding: 0;
}
.modal[open], [open] .modal {
display: flex;
flex-direction: column;
}
.modal--media {
background: none;
box-shadow: none;
width: calc((100vh - 2 * 16px) * 1.7777777778 - 90px);
max-width: calc(100vw - 2 * 16px);
}
@media (min-width: 992px) {
.modal--media {
max-width: 1000px;
}
}
.modal__header {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
padding: 12px 24px;
border-bottom: 1px solid #ebebeb;
display: flex;
justify-content: flex-start;
gap: 8px;
align-items: center;
}
@media (min-width: 768px) {
.modal__header {
font-size: 28px;
line-height: 36px;
}
}
.modal__close {
width: 50px;
height: 40px;
color: #1d1d1b;
font-weight: normal;
font-size: 32px;
line-height: 40px;
}
.modal__close > span {
pointer-events: none;
}
.modal--media .modal__close {
color: #ffffff;
align-self: flex-end;
}
:not(.modal--media) > .modal__close {
position: absolute;
right: 0;
top: 0;
}
@media (min-width: 768px) {
:not(.modal--media) > .modal__close {
right: 5px;
top: 5px;
}
}
.modal__body {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
padding: 24px;
flex: 1 1 auto;
overflow: auto;
}
.modal__footer {
padding: 12px 24px;
border-top: 1px solid #ebebeb;
}
.page-heading {
display: flex;
flex-direction: column;
gap: 16px;
margin: 16px 0;
}
@media (min-width: 768px) {
.page-heading {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
}
.page-heading__title-container {
display: flex;
flex-direction: column;
gap: 16px;
color: #1d1d1b;
}
.page-heading__title {
font-family: var(--header-font);
font-weight: 700;
font-size: 44px;
line-height: 52px;
text-transform: uppercase;
}
@media (min-width: 768px) {
.page-heading__title {
font-size: 48px;
line-height: 56px;
}
}
.page_heading__partnership-label {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
}
.page_heading__partnership-label:hover {
color: #4a4e57;
}
.paginator {
display: flex;
align-items: center;
}
.paginator__link {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
font-weight: 700;
display: flex;
min-width: 30px;
justify-content: center;
margin-right: 4px;
}
.paginator__link:hover {
color: #d9121f;
}
.paginator__link--active {
color: #ffffff;
background-color: #4a4e57;
border-radius: 50%;
text-align: center;
border: 3px solid #4a4e57;
}
.paginator__link--active:hover {
color: #ffffff;
}
.paginator__link--previous::after {
content: "keyboard_arrow_left";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
}
.paginator__link--next::after {
content: "keyboard_arrow_right";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
speak: none;
}
.paginator__link--first::after {
margin-left: 24px;
content: "...";
}
.paginator__link--last::before {
margin-right: 24px;
content: "...";
}
.product-link {
display: inline-flex;
vertical-align: middle;
}
.product-link__product {
margin-right: 4px;
}
.product-link--unverified .product-link__product {
color: inherit;
text-decoration: inherit;
cursor: auto;
pointer-events: none;
margin-right: 0;
}
.product-link__basket {
color: #3244ff;
}
.product-link__basket:hover {
color: #d9121f;
}
.product-link__basket::before {
content: "shopping_basket";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 18px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
.product-link--unverified .product-link__basket {
display: none;
}
.form__errors {
margin-bottom: 24px;
}
.form__error {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: #d9121f;
}
.form__field-group {
margin-bottom: 24px;
}
.form__field-group > .input-field {
margin-bottom: 0;
}
.form__field-group > .input-field > .input-field__label {
margin-bottom: 8px;
}
.form__field-group .o-radio {
margin-bottom: 8px;
}
.form__field-group .o-checkbox:last-child {
margin-bottom: 0;
}
.form__legend {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
}
@media (min-width: 768px) {
.form__legend {
font-size: 28px;
line-height: 36px;
}
}
.form__toggle {
display: none;
}
.form__toggle.is-visible {
margin-bottom: 24px;
display: block;
background-color: #ebebeb;
}
.form__toggle.is-visible > .input-field {
padding: 16px;
}
.form__toggle.is-visible > .select-field {
padding: 16px;
margin-bottom: 0;
}
.form__toggle.is-visible > .o-checkbox {
padding: 16px;
margin-bottom: 0;
}
/**
* FormField
*
* To be used as follows:
* @include formField(string fieldName);
* Applies default styling to basic form field elements such as input, label, errors etc.
*
*/
/**
* ToggleField
*
* To be used as follows:
* @include toggleField(string fieldName);
* Applies default styling to toggle form field elements such as checkboxes & radio buttons.
*
*/
.search {
margin-bottom: 24px;
display: flex;
flex-direction: column;
}
.search [list]::-webkit-calendar-picker-indicator {
margin-top: -4px;
}
.search__input {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: #4a4e57;
font-weight: inherit;
border-radius: 4px;
border: 2px solid #7f8695;
background-color: #ffffff;
padding: 10px 8px;
}
.search__input:focus {
border: 4px solid #1d1d1b;
padding: 8px 6px;
}
.search__input:disabled {
background-color: #edeff1;
cursor: not-allowed;
}
.is-invalid .search__input {
border-color: #d9121f;
}
.search__input::-moz-placeholder {
color: rgba(74, 78, 87, 0.45);
}
.search__input::placeholder {
color: rgba(74, 78, 87, 0.45);
}
.search__label {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
color: #1d1d1b;
margin-bottom: 8px;
}
.search__label a {
font-weight: 700;
}
.o-form_row__label--disabled {
color: #7f8695;
}
.search__label--regular {
font-weight: 400;
}
.search__label-required {
font-weight: normal;
}
.search__error {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
display: inline-block;
position: relative;
margin-top: 8px;
padding-left: 24px;
color: #d9121f;
}
.search__error::before {
content: "error";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
font-size: 16px;
line-height: 24px;
position: absolute;
top: 0;
left: 0;
}
.search__help {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: rgba(74, 78, 87, 0.8);
text-align: left;
margin-bottom: 8px;
}
.search__help a {
color: #4a4e57;
text-decoration: underline;
}
.search-select {
margin-bottom: 24px;
display: flex;
flex-direction: column;
}
.search-select [list]::-webkit-calendar-picker-indicator {
margin-top: -4px;
}
.search-select__input {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: #4a4e57;
font-weight: inherit;
border-radius: 4px;
border: 2px solid #7f8695;
background-color: #ffffff;
padding: 10px 8px;
}
.search-select__input:focus {
border: 4px solid #1d1d1b;
padding: 8px 6px;
}
.search-select__input:disabled {
background-color: #edeff1;
cursor: not-allowed;
}
.is-invalid .search-select__input {
border-color: #d9121f;
}
.search-select__input::-moz-placeholder {
color: rgba(74, 78, 87, 0.45);
}
.search-select__input::placeholder {
color: rgba(74, 78, 87, 0.45);
}
.search-select__label {
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
color: #1d1d1b;
margin-bottom: 8px;
}
.search-select__label a {
font-weight: 700;
}
.o-form_row__label--disabled {
color: #7f8695;
}
.search-select__label--regular {
font-weight: 400;
}
.search-select__label-required {
font-weight: normal;
}
.search-select__error {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
display: inline-block;
position: relative;
margin-top: 8px;
padding-left: 24px;
color: #d9121f;
}
.search-select__error::before {
content: "error";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
font-size: 16px;
line-height: 24px;
position: absolute;
top: 0;
left: 0;
}
.search-select__help {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
color: rgba(74, 78, 87, 0.8);
text-align: left;
margin-bottom: 8px;
}
.search-select__help a {
color: #4a4e57;
text-decoration: underline;
}
.search {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin-bottom: 0;
}
@media (min-width: 768px) {
.search {
width: 100%;
}
}
.search__search-field {
display: flex;
flex: 5;
position: relative;
}
.search__search-field::before {
display: none;
}
@media (min-width: 768px) {
.search__search-field::before {
content: "search";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 8px;
color: #bcbcbc;
display: block;
}
}
.search__input {
margin-bottom: 0;
width: 100%;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@media (min-width: 768px) {
.search__input {
padding: 10px 8px 10px 32px;
margin-right: 16px;
border-right: 2px solid;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
}
.search__input:focus {
box-shadow: none;
padding-left: 30px;
}
@media (min-width: 768px) {
.search__input:focus {
box-shadow: 0 2px 4px 0 rgba(127, 134, 149, 0.5);
}
}
.search__error {
display: none;
}
.is-invalid > .search__error {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
color: #d9121f;
position: absolute;
left: 0;
margin-top: 50px;
display: block;
}
.search__text-label {
opacity: 0;
}
.search__submit {
display: inline-block;
text-align: center;
border-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
text-indent: -9999px;
position: relative;
width: 48px;
}
@media (min-width: 768px) {
.search__submit {
text-indent: 0;
width: auto;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
line-height: 16px;
}
}
.search__submit::before {
content: "search";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
color: #bcbcbc;
display: block;
position: absolute;
text-indent: 0;
left: 12px;
top: 12px;
}
@media (min-width: 768px) {
.search__submit::before {
display: none;
}
}
.search__preposition {
display: none;
}
@media (min-width: 768px) {
.search__preposition {
display: block;
margin-right: 16px;
}
}
.search-results {
display: flex;
flex-direction: column;
row-gap: 24px;
}
.search-results__search-bar {
max-width: 1244px;
margin-right: 16px;
margin-left: 16px;
}
@media (min-width: 1276px) {
.search-results__search-bar {
width: 1244px;
margin-right: auto;
margin-left: auto;
}
}
@media (max-width: 991px) {
.search-results__filter-bar {
display: none;
}
}
@media (min-width: 992px) {
.search-results__filter-drawer {
display: none;
}
}
.search-results__showing-results {
max-width: 1244px;
margin-right: 16px;
margin-left: 16px;
font-family: var(--body-font);
font-size: 18px;
line-height: 28px;
font-weight: 700;
}
@media (min-width: 1276px) {
.search-results__showing-results {
width: 1244px;
margin-right: auto;
margin-left: auto;
}
}
.search-results__showing-results strong {
color: #d9121f;
}
.search-results__pre-results {
max-width: 1244px;
margin-right: 16px;
margin-left: 16px;
}
@media (min-width: 1276px) {
.search-results__pre-results {
width: 1244px;
margin-right: auto;
margin-left: auto;
}
}
@media (min-width: 992px) {
.search-results__pre-results {
display: flex;
flex-direction: row;
gap: 24px;
justify-content: space-between;
}
}
.search-results__pre-results > .search-results__pagination {
align-self: flex-end;
}
.search-results__filters-and-sorting {
display: flex;
flex-direction: row;
gap: 16px;
align-items: flex-start;
}
@media (max-width: 991px) {
.search-results__filters-and-sorting {
display: none;
}
}
.search-results__filters-and-sorting > *:not(:first-child) {
border-left: 1px solid #1d1d1b;
padding-left: 16px;
}
.search-results__sorting,
.search-results__filters {
display: none;
align-items: center;
flex-shrink: 0;
}
@media (min-width: 992px) {
.search-results__sorting,
.search-results__filters {
display: flex;
flex-direction: row;
gap: 16px;
}
}
.search-results__sorting > .search-results__sort-field,
.search-results__sorting > .search-results__filter-field,
.search-results__filters > .search-results__sort-field,
.search-results__filters > .search-results__filter-field {
margin-bottom: 0;
width: auto;
}
.search-results__pagination {
display: flex;
justify-content: right;
}
.search-results__results {
max-width: 1244px;
margin-right: 16px;
margin-left: 16px;
}
@media (min-width: 1276px) {
.search-results__results {
width: 1244px;
margin-right: auto;
margin-left: auto;
}
}
.search-results__post-results {
max-width: 1244px;
margin-right: 16px;
margin-left: 16px;
}
@media (min-width: 1276px) {
.search-results__post-results {
width: 1244px;
margin-right: auto;
margin-left: auto;
}
}
@media (min-width: 992px) {
.search-results__post-results {
display: flex;
flex-direction: row;
gap: 24px;
justify-content: flex-end;
}
}
.search-results__sort {
display: none;
align-items: center;
flex-shrink: 0;
}
@media (min-width: 768px) {
.search-results__sort {
display: flex;
}
}
.search-results__sort > .select-field {
width: auto;
margin-right: 24px;
margin-bottom: 24px;
}
.search-select {
margin-bottom: 0;
display: flex;
flex: 2 0;
max-width: calc(55% - 48px);
}
@media (min-width: 768px) {
.search-select {
margin-right: 16px;
max-width: none;
}
}
.search-select__input {
margin-bottom: 0;
border-right: 0;
border-radius: 0;
padding-right: 24px;
min-width: 104px;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-position: right;
}
@media (min-width: 768px) {
.search-select__input {
border-radius: 4px;
border-right: 2px solid;
}
}
.search-select__input:focus {
box-shadow: none;
}
@media (min-width: 768px) {
.search-select__input:focus {
box-shadow: 0 2px 4px 0 rgba(127, 134, 149, 0.5);
}
}
.no-search-results__title {
font-family: var(--header-font);
font-weight: 700;
font-size: 24px;
line-height: 32px;
display: flex;
margin-bottom: 24px;
}
@media (min-width: 768px) {
.no-search-results__title {
font-size: 28px;
line-height: 36px;
}
}
.no-search-results__title::before {
content: "search";
font-family: "Material Icons Round";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
align-self: center;
margin-right: 24px;
}
.billing-choices {
display: flex;
flex-direction: column;
width: 100%;
gap: 32px;
}
@media (min-width: 992px) {
.billing-choices--inline {
flex-direction: row;
align-items: center;
}
}
@media (min-width: 992px) {
.billing-choices--inline > .billing-choices__link {
margin-left: auto;
}
}
@media (min-width: 768px) {
.billing-choices--inline > .billing-choices__radio-group {
flex-direction: row;
gap: 32px;
}
}
.billing-choices__radio-group {
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
}
.billing-choices__radio-group .billing-choices__form-element {
width: auto;
margin-bottom: auto;
}
.billing-choices__form-element > input[type=radio]:checked + label {
font-weight: bold;
}
.subscription-box {
--subscription-primary-colour: #a8a8a8;
display: flex;
flex-direction: column;
color: #1d1d1b;
}
.subscription-box.t-explorer > .subscription-box__header {
--subscription-primary-colour: #00cdbe;
}
.subscription-box.t-creator > .subscription-box__header {
--subscription-primary-colour: #c8a0ff;
}
.subscription-box.t-engineer > .subscription-box__header {
--subscription-primary-colour: #ffcd00;
}
.subscription-box__body {
border: 1px solid #a8a8a8;
border-top-width: 0;
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 16px;
padding: 24px 16px 32px;
}
@media (min-width: 768px) {
.subscription-box__body {
padding: 32px;
padding-bottom: 48px;
}
}
.subscription-box__header {
background: var(--subscription-primary-colour);
text-transform: uppercase;
padding: 16px;
}
@media (min-width: 768px) {
.subscription-box__header {
padding: 16px 32px;
}
}
.subscription-box__subscription_info {
display: flex;
gap: 24px;
flex-direction: column;
}
.sections-hero {
--section-padding-y: 64px;
--section-padding-top: var(--section-padding-y);
--section-padding-bottom: var(--section-padding-y);
--section-padding-x: 16px;
--section-padding-left: var(--section-padding-x);
--section-padding-right: var(--section-padding-x);
width: 100%;
padding: var(--section-padding-top) var(--section-padding-right) var(--section-padding-bottom) var(--section-padding-left);
background-color: #1f1f1f;
display: flex;
flex-direction: column;
gap: 32px;
}
.sections-hero.s-section--waffle, .sections-hero.s-section--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-red-mirror.1f57c3d9..svg);
--text-colour: #ffffff;
background-color: #69141e;
background-repeat: no-repeat;
background-size: 200px;
}
@media (min-width: 768px) {
.sections-hero.s-section--waffle, .sections-hero.s-section--double-waffle {
background-size: 240px;
}
}
@media (min-width: 992px) {
.sections-hero.s-section--waffle, .sections-hero.s-section--double-waffle {
background-size: 300px;
}
}
.sections-hero.s-section--waffle.t-explorer, .t-explorer .sections-hero.s-section--waffle, .sections-hero.s-section--double-waffle.t-explorer, .t-explorer .sections-hero.s-section--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-explorer-mirror.be655235..svg);
}
.sections-hero.s-section--waffle.t-creator, .t-creator .sections-hero.s-section--waffle, .sections-hero.s-section--double-waffle.t-creator, .t-creator .sections-hero.s-section--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-creator-mirror.3dcaf902..svg);
}
.sections-hero.s-section--waffle.t-engineer, .t-engineer .sections-hero.s-section--waffle, .sections-hero.s-section--double-waffle.t-engineer, .t-engineer .sections-hero.s-section--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-engineer-mirror.5a4254ae..svg);
}
.sections-hero.s-section--waffle {
background-image: var(--theme-waffle-image);
background-position: bottom right;
}
.sections-hero.s-section--double-waffle {
background-image: var(--theme-waffle-image), url(/7d751ad7/26.3.4/images/css/waffle-red.4dc3dc6d..svg);
background-position: bottom right, top left;
}
.sections-hero.s-section--light-waffle, .sections-hero.s-section--double-light-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-grey-mirror.c33f1ce9..svg);
--text-colour: #1d1d1b;
background-color: #ebebeb;
background-repeat: no-repeat;
background-size: 200px;
}
@media (min-width: 768px) {
.sections-hero.s-section--light-waffle, .sections-hero.s-section--double-light-waffle {
background-size: 240px;
}
}
@media (min-width: 992px) {
.sections-hero.s-section--light-waffle, .sections-hero.s-section--double-light-waffle {
background-size: 300px;
}
}
.sections-hero.s-section--light-waffle.t-explorer, .t-explorer .sections-hero.s-section--light-waffle, .sections-hero.s-section--double-light-waffle.t-explorer, .t-explorer .sections-hero.s-section--double-light-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-explorer-mirror.be655235..svg);
}
.sections-hero.s-section--light-waffle.t-creator, .t-creator .sections-hero.s-section--light-waffle, .sections-hero.s-section--double-light-waffle.t-creator, .t-creator .sections-hero.s-section--double-light-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-creator-mirror.3dcaf902..svg);
}
.sections-hero.s-section--light-waffle.t-engineer, .t-engineer .sections-hero.s-section--light-waffle, .sections-hero.s-section--double-light-waffle.t-engineer, .t-engineer .sections-hero.s-section--double-light-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-engineer-mirror.5a4254ae..svg);
}
.sections-hero.s-section--light-waffle {
background-image: var(--theme-waffle-image);
background-position: bottom right;
}
.sections-hero.s-section--double-light-waffle {
background-image: var(--theme-waffle-image), url(/7d751ad7/26.3.4/images/css/waffle-grey.6685ca3a..svg);
background-position: bottom right, top left;
}
@media (min-width: 992px) {
.sections-hero {
--section-padding-y: 88px;
--section-padding-top: var(--section-padding-y);
--section-padding-bottom: var(--section-padding-y);
--section-padding-x: 96px;
--section-padding-left: var(--section-padding-x);
--section-padding-right: var(--section-padding-x);
padding: var(--section-padding-top) var(--section-padding-right) var(--section-padding-bottom) var(--section-padding-left);
gap: 40px;
align-items: center;
}
}
.section-blocks {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
gap: 24px;
}
@media (min-width: 992px) {
.section-blocks {
flex-direction: row;
flex-wrap: nowrap;
padding: 0 104.2px;
}
}
@media (min-width: 1440px) {
.section-blocks {
padding: 0 124.4px;
}
}
.section-block {
display: flex;
flex-direction: column;
border: 2px solid;
border-radius: 8px;
padding: 24px;
gap: 24px;
}
@media (min-width: 992px) {
.section-block {
flex: 0 1 320px;
}
}
.section-block--blue-circle {
border-color: #297676;
background-color: #d0fbfb;
}
.section-block--orange-rhombus {
border-color: #ff8a15;
background-color: #ffdebd;
}
.section-block--purple-flare {
border-color: #ad3265;
background-color: #ffcce1;
}
.section-block__icon {
font-size: 36px;
width: 36px;
}
.section-block__title {
font-family: var(--header-font);
font-weight: 700;
font-size: 28px;
line-height: 36px;
display: inline-flex;
align-items: center;
gap: 8px;
}
@media (min-width: 768px) {
.section-block__title {
font-size: 32px;
line-height: 40px;
}
}
.section-block__description {
font-family: var(--body-font);
font-size: 16px;
line-height: 24px;
}
.reduced-hero {
margin: 24px 0;
}
.reduced-hero__title {
font-family: var(--header-font);
font-weight: 700;
font-size: 44px;
line-height: 52px;
margin-bottom: 16px 0;
color: #69141e;
max-width: 720px;
}
@media (min-width: 768px) {
.reduced-hero__title {
font-size: 48px;
line-height: 56px;
}
}
.s-section--highlighted .reduced-hero__title {
color: #ffffff;
}
.reduced-hero__text {
max-width: 720px;
}
.s-section--highlighted .reduced-hero__text {
color: #ffffff;
}
.onboarding-banner {
display: flex;
gap: 16px;
flex-direction: column;
background-color: #ebebeb;
padding: 32px 16px;
align-items: center;
text-align: center;
}
@media (min-width: 992px) {
.onboarding-banner {
padding: 32px 40px;
}
}
.onboarding-banner__content-title {
font-family: var(--header-font);
font-weight: 700;
font-size: 36px;
line-height: 44px;
text-transform: uppercase;
}
@media (min-width: 768px) {
.onboarding-banner__content-title {
font-size: 40px;
line-height: 48px;
}
}
.onboarding-banner__content-copy {
margin-bottom: 16px;
}
.onboarding-banner__header {
display: flex;
gap: 16px;
flex-direction: column;
align-items: center;
}
@media (min-width: 768px) {
.onboarding-banner__header {
flex-direction: row;
}
}
.onboarding-banner__header img {
width: 135px;
}
.offer-ribbon {
background-color: #ef0000;
padding: 4px 16px;
}
.offer-ribbon__copy {
font-family: var(--body-font);
font-size: 12px;
line-height: 20px;
max-width: 1244px;
margin: 0 auto;
text-align: center;
color: #ffffff;
}
.offer-ribbon__copy a,
.offer-ribbon__copy a:hover {
text-decoration: underline;
color: inherit;
}
/**
* Components - structures
*/
.s-alert {
padding: 32px 32px;
}
.s-alert .d-alert {
max-width: 1000px;
margin-right: auto;
margin-left: auto;
margin-bottom: 12px;
}
.s-alert .d-alert:last-child {
margin-bottom: 0;
}
.s-alert--floaty {
position: absolute;
top: 10px;
left: 32px;
right: 32px;
z-index: 5;
padding: 0;
}
@media (min-width: 992px) {
.s-alert--floaty {
max-width: 1244px;
margin-left: auto;
margin-right: auto;
top: -52px;
}
}
.s-alert--floaty .d-alert {
max-width: initial;
margin-left: 0;
margin-right: 0;
}
.s-button-group {
display: flex;
flex-direction: column;
gap: 8px;
padding: 4px 0;
}
@media (min-width: 480px) {
.s-button-group {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
}
@media (min-width: 480px) {
.s-button-group--left-align {
justify-content: left;
}
}
@media (min-width: 480px) {
.s-button-group--right-align {
justify-content: right;
}
}
/**
* Card decks are a structure that holds multiple cards.
*/
.s-card-deck {
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.s-card-deck > .d-card-deck {
width: 100%;
margin-bottom: 16px;
}
@media (min-width: 480px) {
.s-card-deck[data-cards-per-row="2"] > .d-card-deck {
width: calc(50% - 8px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="2"] > .d-card-deck:nth-child(2n) {
margin-right: 0;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.s-card-deck[data-cards-per-row="3"] > .d-card-deck {
width: calc(50% - 8px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="3"] > .d-card-deck:nth-child(2n) {
margin-right: 0;
}
}
@media (min-width: 768px) {
.s-card-deck[data-cards-per-row="3"] > .d-card-deck {
width: calc(33.3333333333% - 10.6666666667px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="3"] > .d-card-deck:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.s-card-deck[data-cards-per-row="4"] > .d-card-deck {
width: calc(50% - 8px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="4"] > .d-card-deck:nth-child(2n) {
margin-right: 0;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.s-card-deck[data-cards-per-row="4"] > .d-card-deck {
width: calc(33.3333333333% - 10.6666666667px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="4"] > .d-card-deck:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: 992px) {
.s-card-deck[data-cards-per-row="4"] > .d-card-deck {
width: calc(25% - 12px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="4"] > .d-card-deck:nth-child(4n) {
margin-right: 0;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.s-card-deck[data-cards-per-row="4"].card-deck--single-row > .d-card-deck {
width: calc(50% - 8px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="4"].card-deck--single-row > .d-card-deck:nth-child(2n) {
margin-right: 0;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.s-card-deck[data-cards-per-row="5"] > .d-card-deck {
width: calc(50% - 8px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="5"] > .d-card-deck:nth-child(2n) {
margin-right: 0;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.s-card-deck[data-cards-per-row="5"] > .d-card-deck {
width: calc(33.3333333333% - 10.6666666667px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="5"] > .d-card-deck:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: 992px) and (max-width: 1439px) {
.s-card-deck[data-cards-per-row="5"] > .d-card-deck {
width: calc(25% - 12px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="5"] > .d-card-deck:nth-child(4n) {
margin-right: 0;
}
}
@media (min-width: 1440px) {
.s-card-deck[data-cards-per-row="5"] > .d-card-deck {
width: calc(20% - 12.8px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="5"] > .d-card-deck:nth-child(5n) {
margin-right: 0;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.s-card-deck[data-cards-per-row="6"] > .d-card-deck {
width: calc(50% - 8px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="6"] > .d-card-deck:nth-child(2n) {
margin-right: 0;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.s-card-deck[data-cards-per-row="6"] > .d-card-deck {
width: calc(33.3333333333% - 10.6666666667px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="6"] > .d-card-deck:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: 992px) and (max-width: 1439px) {
.s-card-deck[data-cards-per-row="6"] > .d-card-deck {
width: calc(25% - 12px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="6"] > .d-card-deck:nth-child(4n) {
margin-right: 0;
}
}
@media (min-width: 1440px) {
.s-card-deck[data-cards-per-row="6"] > .d-card-deck {
width: calc(16.6666666667% - 13.3333333333px);
margin-right: 16px;
}
.s-card-deck[data-cards-per-row="6"] > .d-card-deck:nth-child(6n) {
margin-right: 0;
}
}
.s-hierarchy-deck {
display: grid;
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-columns: 1fr;
grid-template-areas: "feature-card-1" "feature-card-2" "feature-card-3" "card-4" "card-5";
}
@media (min-width: 480px) {
.s-hierarchy-deck {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-areas: "feature-card-1 feature-card-1" "feature-card-2 feature-card-2" "feature-card-3 feature-card-3" "card-4 card-5";
}
}
@media (min-width: 992px) {
.s-hierarchy-deck {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas: "feature-card-1 feature-card-1 feature-card-2 feature-card-2" "feature-card-3 feature-card-3 card-4 card-5";
}
}
.s-hierarchy-deck__feature-card-1 {
grid-area: feature-card-1;
}
.s-hierarchy-deck__feature-card-2 {
grid-area: feature-card-2;
}
.s-hierarchy-deck__feature-card-3 {
grid-area: feature-card-3;
}
.s-hierarchy-deck__card-4 {
grid-area: card-4;
}
.s-hierarchy-deck__card-5 {
grid-area: card-5;
}
.s-home-deck {
display: grid;
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-columns: 1fr;
grid-template-areas: "feature-card-1" "feature-card-2" "card-3" "card-4" "card-5" "card-6" "card-7" "card-8";
}
@media (min-width: 480px) {
.s-home-deck {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-areas: "feature-card-1 feature-card-2" "card-3 card-4" "card-5 card-6" "card-7 card-8";
}
}
@media (min-width: 992px) {
.s-home-deck {
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: repeat(6, 1fr);
grid-template-areas: "feature-card-1 card-3 card-4" "feature-card-1 card-3 card-4" "feature-card-1 card-5 card-6" "feature-card-2 card-5 card-6" "feature-card-2 card-7 card-8" "feature-card-2 card-7 card-8";
}
}
.s-home-deck__feature-card-1 {
grid-area: feature-card-1;
}
.s-home-deck__feature-card-2 {
grid-area: feature-card-2;
}
.s-home-deck__card-3 {
grid-area: card-3;
}
.s-home-deck__card-4 {
grid-area: card-4;
}
.s-home-deck__card-5 {
grid-area: card-5;
}
.s-home-deck__card-6 {
grid-area: card-6;
}
.s-home-deck__card-7 {
grid-area: card-7;
}
.s-home-deck__card-8 {
grid-area: card-8;
}
.s-extravaganza-deck {
display: grid;
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-columns: 1fr;
grid-template-areas: "feature-card-1" "card-2" "card-3";
}
@media (min-width: 480px) {
.s-extravaganza-deck {
grid-template-columns: repeat(2, 1fr);
grid-template-areas: "feature-card-1 feature-card-1" "card-2 card-3";
}
}
@media (min-width: 992px) {
.s-extravaganza-deck {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas: "feature-card-1 card-2" "feature-card-1 card-3";
}
}
.s-extravaganza-deck__feature-card-1 {
grid-area: feature-card-1;
}
.s-extravaganza-deck__card-2 {
grid-area: card-2;
}
.s-extravaganza-deck__card-3 {
grid-area: card-3;
}
.s-subscription-features-deck {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 992px) {
.s-subscription-features-deck {
flex-direction: row;
}
}
.s-subscription-features-deck > .d-subscription-features-deck {
width: 100%;
}
.s-light-package-deck {
display: flex;
flex-direction: column;
gap: 24px;
padding: 32px 0;
align-items: center;
}
@media (min-width: 992px) {
.s-light-package-deck {
gap: 56px;
padding: 56px 96px;
}
}
.s-light-package-deck > .d-light-package-deck {
width: 100%;
display: flex;
gap: 24px;
flex-direction: column;
}
@media (min-width: 1440px) {
.s-light-package-deck > .d-light-package-deck {
flex-direction: row;
}
}
.d-light-package-deck__details,
.d-light-package-deck__title {
color: #1d1d1b;
text-align: center;
}
/**
* Section for a carousel block
*/
.s-carousel {
--carousel-bg-colour-red: 255;
--carousel-bg-colour-green: 255;
--carousel-bg-colour-blue: 255;
--carousel-bg-colour: rgb(var(--carousel-bg-colour-red), var(--carousel-bg-colour-green), var(--carousel-bg-colour-blue));
background: var(--carousel-bg-colour);
width: 100%;
padding: 32px 16px;
}
.s-carousel > .d-carousel {
width: 100%;
max-width: 1244px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 1440px) {
.s-carousel > .d-carousel.d-carousel--peekaboo {
max-width: calc(2 * 100px + 1244px);
}
}
.s-carousel--alternative {
--carousel-bg-colour-red: 235;
--carousel-bg-colour-green: 235;
--carousel-bg-colour-blue: 235;
}
.s-content-with-aside {
display: flex;
flex-direction: column;
gap: 24px;
}
@media (min-width: 992px) {
.s-content-with-aside {
flex-direction: row;
}
}
@media (min-width: 992px) {
.d-content-with-aside {
flex: 1;
}
}
.d-content-with-aside--content {
margin-bottom: 16px;
}
@media (min-width: 992px) {
.d-content-with-aside--content {
flex: 2;
}
}
.s-content-with-aside--reverse-mobile {
flex-direction: column-reverse;
}
@media (min-width: 992px) {
.s-content-with-aside--reverse-mobile {
flex-direction: row;
}
}
.s-filtered-content {
display: flex;
flex-direction: column;
row-gap: 24px;
}
@media (min-width: 768px) {
.d-filtered-content {
width: 100%;
}
}
@media (max-width: 991px) {
.d-filtered-content--filter-bar {
display: none;
}
}
@media (min-width: 992px) {
.d-filtered-content--filter-drawer {
display: none;
}
}
.d-filtered-content--content {
max-width: 1244px;
margin-right: 16px;
margin-left: 16px;
}
@media (min-width: 1276px) {
.d-filtered-content--content {
margin-right: auto;
margin-left: auto;
}
}
.s-pseudo-modal {
background: #bcbcbc;
width: 100%;
height: 100%;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px 16px;
}
.s-pseudo-modal > .d-pseudo-modal {
width: 100%;
max-width: 872px;
margin-right: auto;
margin-left: auto;
background: #ffffff;
}
.ff-new-registration .s-pseudo-modal > .d-pseudo-modal {
background: none;
}
@media (min-width: 992px) {
.ff-new-registration .s-pseudo-modal > .d-pseudo-modal {
max-width: 1244px;
}
}
.s-pseudo-modal::before {
height: 100%;
width: 100%;
content: "";
background-color: #bcbcbc;
z-index: -1;
position: absolute;
top: 0;
left: 0;
}
.ff-new-registration .s-pseudo-modal.s-pseudo-modal--waffle, .ff-new-registration .s-pseudo-modal.s-pseudo-modal--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-red-mirror.1f57c3d9..svg);
--text-colour: #ffffff;
background-color: #69141e;
background-repeat: no-repeat;
background-size: 200px;
}
@media (min-width: 768px) {
.ff-new-registration .s-pseudo-modal.s-pseudo-modal--waffle, .ff-new-registration .s-pseudo-modal.s-pseudo-modal--double-waffle {
background-size: 240px;
}
}
@media (min-width: 992px) {
.ff-new-registration .s-pseudo-modal.s-pseudo-modal--waffle, .ff-new-registration .s-pseudo-modal.s-pseudo-modal--double-waffle {
background-size: 300px;
}
}
.ff-new-registration .s-pseudo-modal.s-pseudo-modal--waffle.t-explorer, .t-explorer .ff-new-registration .s-pseudo-modal.s-pseudo-modal--waffle, .ff-new-registration .s-pseudo-modal.s-pseudo-modal--double-waffle.t-explorer, .t-explorer .ff-new-registration .s-pseudo-modal.s-pseudo-modal--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-explorer-mirror.be655235..svg);
}
.ff-new-registration .s-pseudo-modal.s-pseudo-modal--waffle.t-creator, .t-creator .ff-new-registration .s-pseudo-modal.s-pseudo-modal--waffle, .ff-new-registration .s-pseudo-modal.s-pseudo-modal--double-waffle.t-creator, .t-creator .ff-new-registration .s-pseudo-modal.s-pseudo-modal--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-creator-mirror.3dcaf902..svg);
}
.ff-new-registration .s-pseudo-modal.s-pseudo-modal--waffle.t-engineer, .t-engineer .ff-new-registration .s-pseudo-modal.s-pseudo-modal--waffle, .ff-new-registration .s-pseudo-modal.s-pseudo-modal--double-waffle.t-engineer, .t-engineer .ff-new-registration .s-pseudo-modal.s-pseudo-modal--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-engineer-mirror.5a4254ae..svg);
}
.ff-new-registration .s-pseudo-modal.s-pseudo-modal--waffle {
background-image: var(--theme-waffle-image);
background-position: bottom right;
}
.ff-new-registration .s-pseudo-modal.s-pseudo-modal--double-waffle {
background-image: var(--theme-waffle-image), url(/7d751ad7/26.3.4/images/css/waffle-red.4dc3dc6d..svg);
background-position: bottom right, top left;
}
/**
* Expandable is a section with some hidden content.
*
* It'll typically have one or more d-expandable children
*/
.s-expandable {
position: relative;
width: 100%;
padding: 32px 16px;
margin-bottom: 128px;
background-color: #ebebeb;
display: flex;
flex-direction: column;
align-items: center;
}
.s-expandable > .d-expandable {
width: 100%;
max-width: 1244px;
margin-right: auto;
margin-left: auto;
}
.s-section-header {
width: 100%;
padding: 32px 16px;
}
.s-section-header > .d-section-header {
width: 100%;
max-width: 1244px;
margin-right: auto;
margin-left: auto;
background-color: #1d1d1b;
padding: 24px;
margin-bottom: 16px;
text-align: center;
}
@media (min-width: 480px) {
.s-section-header > .d-section-header {
text-align: left;
}
}
.s-section-header > .d-section-header--no-background {
background-color: inherit;
padding: 0;
text-align: inherit;
}
/**
* Section is the default block on a page.
*
* It'll typically have one or more d-section children
*/
.s-section {
--section-padding-y: 32px;
--section-padding-top: var(--section-padding-y);
--section-padding-bottom: var(--section-padding-y);
--section-padding-x: 16px;
--section-padding-left: var(--section-padding-x);
--section-padding-right: var(--section-padding-x);
width: 100%;
padding: var(--section-padding-top) var(--section-padding-right) var(--section-padding-bottom) var(--section-padding-left);
color: var(--text-colour);
}
.s-section.s-section--waffle, .s-section.s-section--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-red-mirror.1f57c3d9..svg);
--text-colour: #ffffff;
background-color: #69141e;
background-repeat: no-repeat;
background-size: 200px;
}
@media (min-width: 768px) {
.s-section.s-section--waffle, .s-section.s-section--double-waffle {
background-size: 240px;
}
}
@media (min-width: 992px) {
.s-section.s-section--waffle, .s-section.s-section--double-waffle {
background-size: 300px;
}
}
.s-section.s-section--waffle.t-explorer, .t-explorer .s-section.s-section--waffle, .s-section.s-section--double-waffle.t-explorer, .t-explorer .s-section.s-section--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-explorer-mirror.be655235..svg);
}
.s-section.s-section--waffle.t-creator, .t-creator .s-section.s-section--waffle, .s-section.s-section--double-waffle.t-creator, .t-creator .s-section.s-section--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-creator-mirror.3dcaf902..svg);
}
.s-section.s-section--waffle.t-engineer, .t-engineer .s-section.s-section--waffle, .s-section.s-section--double-waffle.t-engineer, .t-engineer .s-section.s-section--double-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-engineer-mirror.5a4254ae..svg);
}
.s-section.s-section--waffle {
background-image: var(--theme-waffle-image);
background-position: bottom right;
}
.s-section.s-section--double-waffle {
background-image: var(--theme-waffle-image), url(/7d751ad7/26.3.4/images/css/waffle-red.4dc3dc6d..svg);
background-position: bottom right, top left;
}
.s-section.s-section--light-waffle, .s-section.s-section--double-light-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-grey-mirror.c33f1ce9..svg);
--text-colour: #1d1d1b;
background-color: #ebebeb;
background-repeat: no-repeat;
background-size: 200px;
}
@media (min-width: 768px) {
.s-section.s-section--light-waffle, .s-section.s-section--double-light-waffle {
background-size: 240px;
}
}
@media (min-width: 992px) {
.s-section.s-section--light-waffle, .s-section.s-section--double-light-waffle {
background-size: 300px;
}
}
.s-section.s-section--light-waffle.t-explorer, .t-explorer .s-section.s-section--light-waffle, .s-section.s-section--double-light-waffle.t-explorer, .t-explorer .s-section.s-section--double-light-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-explorer-mirror.be655235..svg);
}
.s-section.s-section--light-waffle.t-creator, .t-creator .s-section.s-section--light-waffle, .s-section.s-section--double-light-waffle.t-creator, .t-creator .s-section.s-section--double-light-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-creator-mirror.3dcaf902..svg);
}
.s-section.s-section--light-waffle.t-engineer, .t-engineer .s-section.s-section--light-waffle, .s-section.s-section--double-light-waffle.t-engineer, .t-engineer .s-section.s-section--double-light-waffle {
--theme-waffle-image: url(/7d751ad7/26.3.4/images/css/waffle-engineer-mirror.5a4254ae..svg);
}
.s-section.s-section--light-waffle {
background-image: var(--theme-waffle-image);
background-position: bottom right;
}
.s-section.s-section--double-light-waffle {
background-image: var(--theme-waffle-image), url(/7d751ad7/26.3.4/images/css/waffle-grey.6685ca3a..svg);
background-position: bottom right, top left;
}
@media (min-width: 992px) {
.s-section {
--section-padding-y: calc(64px / 2);
--section-padding-x: 16px;
}
}
.s-section > .d-section {
width: 100%;
max-width: 1244px;
margin-right: auto;
margin-left: auto;
}
.s-section > .d-section.d-section--full-width {
width: 95%;
max-width: 95%;
}
.s-section--narrow > .d-section {
max-width: 720px;
}
.s-section--spaceless-top {
--section-padding-top: 0px;
}
.s-section--spaceless-bottom {
--section-padding-bottom: 0px;
}
.s-section--spaceless {
--section-padding-y: 0px;
--section-padding-top: 0px;
--section-padding-bottom: 0px;
}
.s-section--alternative {
background-color: #ebebeb;
}
.s-section--dark {
background-color: #454545;
}
.s-section--white {
background-color: #ffffff;
}
.s-section--highlighted {
--text-colour: #ffffff;
background-color: #69141e;
}
.s-section--subscription-stripes {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjg4IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGZpbGw9IiMwMENEQkUiIGQ9Ik0wIDBoOTAuNjY2N3YxNkgweiIvPgogIDxwYXRoIGZpbGw9IiNDOEEwRkYiIGQ9Ik05OC42NjY2IDBoOTAuNjY2N3YxNkg5OC42NjY2eiIvPgogIDxwYXRoIGZpbGw9IiNGRkNEMDAiIGQ9Ik0xOTcuMzMzIDBoOTAuNjY2N3YxNkgxOTcuMzMzeiIvPgo8L3N2Zz4K);
background-position: top left 16px;
background-repeat: no-repeat;
background-size: calc(100% - 32px) 16px;
padding-top: calc(var(--section-padding-top) + 16px);
}
@media (min-width: 768px) {
.s-section--subscription-stripes {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzI4IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGZpbGw9IiMwMENEQkUiIGQ9Ik0wIDBoMjM3LjMzM3YxNkgweiIvPgogIDxwYXRoIGZpbGw9IiNDOEEwRkYiIGQ9Ik0yNDUuMzMzIDBoMjM3LjMzM3YxNkgyNDUuMzMzeiIvPgogIDxwYXRoIGZpbGw9IiNGRkNEMDAiIGQ9Ik00OTAuNjY3IDBINzI4djE2SDQ5MC42Njd6Ii8+Cjwvc3ZnPgo=);
}
}
@media (min-width: 992px) {
.s-section--subscription-stripes {
background-repeat: repeat-y;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iMTExIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGZpbGw9IiMwMENEQkUiIGQ9Ik0wIDBoMjR2MTExSDB6Ii8+CiAgPHBhdGggZmlsbD0iI0M4QTBGRiIgZD0iTTMyIDBoMjR2MTExSDMyeiIvPgogIDxwYXRoIGZpbGw9IiNGRkNEMDAiIGQ9Ik02NCAwaDI0djExMUg2NHoiLz4KPC9zdmc+Cg==);
background-position: top left 16px;
background-size: auto;
padding-top: var(--section-padding-top);
}
.s-section--subscription-stripes > .d-section {
padding-left: calc(var(--section-padding-x) + 111px);
}
}
@media (min-width: 1276px) {
.s-section--subscription-stripes {
background-position: top left calc(50% - 578px);
}
}
@media (min-width: 768px) {
.s-title-group {
display: flex;
justify-content: space-between;
align-items: center;
}
}
.d-title-group {
display: flex;
align-items: center;
}
@media (min-width: 992px) {
.d-subscriptions.d-subscriptions--mobile {
display: none;
}
}
@media (max-width: 991px) {
.d-subscriptions.d-subscriptions--desktop {
display: none;
}
}
/**
* Utilities
*/
.u-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.u-mb-large {
margin-bottom: 64px;
}
.u-mb-medium {
margin-bottom: 40px;
}
.u-mb-small {
margin-bottom: 24px;
}
.u-mb-xsmall {
margin-bottom: 16px;
}
.u-mb-none {
margin-bottom: 0;
}
.u-mt-large {
margin-top: 64px;
}
.u-mt-medium {
margin-top: 40px;
}
.u-mt-small {
margin-top: 24px;
}
.u-mt-xsmall {
margin-top: 16px;
}
.u-mt-none {
margin-top: 0;
}
.u-ml-large {
margin-left: 64px;
}
.u-ml-medium {
margin-left: 40px;
}
.u-ml-small {
margin-left: 24px;
}
.u-ml-xsmall {
margin-left: 16px;
}
.u-ml-none {
margin-left: 0;
}
.u-mr-large {
margin-right: 64px;
}
.u-mr-medium {
margin-right: 40px;
}
.u-mr-small {
margin-right: 24px;
}
.u-mr-xsmall {
margin-right: 16px;
}
.u-mr-none {
margin-right: 0;
}
.u-standalone {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 24px;
}
.u-skeleton {
position: relative;
background: #bcbcbc;
background: linear-gradient(to right, #bcbcbc 8%, rgba(188, 188, 188, 0.8) 18%, #bcbcbc 33%);
background-size: 800px 104px;
animation: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
}
@keyframes shimmer {
0% {
background-position: -400px 0;
}
100% {
background-position: 400px 0;
}
}
.u-list {
list-style: none;
}
.u-list__item {
padding: 4px 8px;
}
.u-text-underline {
text-decoration: underline;
}
.u-blue-link a {
color: #3244ff;
}
/* oswald-cyrillic-ext-400-normal */
@font-face {
font-family: "Oswald";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/oswald-cyrillic-ext-400-normal.fc2bffcb.woff2) format("woff2"), url(/7d751ad7/26.3.4/fonts/oswald-cyrillic-ext-400-normal.ab9658b7.woff) format("woff");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* oswald-cyrillic-400-normal */
@font-face {
font-family: "Oswald";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/oswald-cyrillic-400-normal.30ed48ba.woff2) format("woff2"), url(/7d751ad7/26.3.4/fonts/oswald-cyrillic-400-normal.af0096c7.woff) format("woff");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* oswald-vietnamese-400-normal */
@font-face {
font-family: "Oswald";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/oswald-vietnamese-400-normal.a3465efd.woff2) format("woff2"), url(/7d751ad7/26.3.4/fonts/oswald-vietnamese-400-normal.324e1553.woff) format("woff");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* oswald-latin-ext-400-normal */
@font-face {
font-family: "Oswald";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/oswald-latin-ext-400-normal.d7108bdc.woff2) format("woff2"), url(/7d751ad7/26.3.4/fonts/oswald-latin-ext-400-normal.3fd17df8.woff) format("woff");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* oswald-latin-400-normal */
@font-face {
font-family: "Oswald";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/oswald-latin-400-normal.a1415da4.woff2) format("woff2"), url(/7d751ad7/26.3.4/fonts/oswald-latin-400-normal.fa6c4af7.woff) format("woff");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* oswald-cyrillic-ext-700-normal */
@font-face {
font-family: "Oswald";
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/oswald-cyrillic-ext-700-normal.4f734d7d.woff2) format("woff2"), url(/7d751ad7/26.3.4/fonts/oswald-cyrillic-ext-700-normal.8a2c6f73.woff) format("woff");
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* oswald-cyrillic-700-normal */
@font-face {
font-family: "Oswald";
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/oswald-cyrillic-700-normal.2728c83b.woff2) format("woff2"), url(/7d751ad7/26.3.4/fonts/oswald-cyrillic-700-normal.71ab9c8f.woff) format("woff");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* oswald-vietnamese-700-normal */
@font-face {
font-family: "Oswald";
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/oswald-vietnamese-700-normal.ab3ab930.woff2) format("woff2"), url(/7d751ad7/26.3.4/fonts/oswald-vietnamese-700-normal.6f56b825.woff) format("woff");
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* oswald-latin-ext-700-normal */
@font-face {
font-family: "Oswald";
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/oswald-latin-ext-700-normal.3a5597a9.woff2) format("woff2"), url(/7d751ad7/26.3.4/fonts/oswald-latin-ext-700-normal.95c71152.woff) format("woff");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* oswald-latin-700-normal */
@font-face {
font-family: "Oswald";
font-style: normal;
font-display: swap;
font-weight: 700;
src: url(/7d751ad7/26.3.4/fonts/oswald-latin-700-normal.f7ade827.woff2) format("woff2"), url(/7d751ad7/26.3.4/fonts/oswald-latin-700-normal.fde6abea.woff) format("woff");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/**
* Material icons
*/
/* material-icons-round-latin-400-normal */
@font-face {
font-family: "Material Icons Round";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(/7d751ad7/26.3.4/fonts/material-icons-round-latin-400-normal.c380809f.woff2) format("woff2"), url(/7d751ad7/26.3.4/fonts/material-icons-round-latin-400-normal.5d681e2e.woff) format("woff");
}