*
* This will cause the system to fill up from either the centre or the right
* hand side. Default behaviour is to fill up the layout system from the left.
*
* There are plenty more options available to us: explore them below.
*/
/* Default/mandatory classes
========================================================================== */
/**
* 1. Allows us to use the layout object on any type of element.
* 2. We need to defensively reset any box-model properties.
* 3. Use the negative margin trick for multi-row grids:
* http://csswizardry.com/2011/08/building-better-grid-systems/
*/
.o-layout {
display: block;
/* [1] */
margin: 0;
/* [2] */
padding: 0;
/* [2] */
list-style: none;
/* [1] */
margin-left: -24px;
/* [3] */
font-size: 0;
}
/**
* 1. Required in order to combine fluid widths with fixed gutters.
* 2. Allows us to manipulate grids vertically, with text-level properties,
* etc.
* 3. Default item alignment is with the tops of each other, like most
* traditional grid/layout systems.
* 4. By default, all layout items are full-width (mobile first).
* 5. Gutters provided by left padding:
* http://csswizardry.com/2011/08/building-better-grid-systems/
* 6. Fallback for old IEs not supporting `rem` values.
*/
.o-layout__item {
box-sizing: border-box;
/* [1] */
display: inline-block;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */
padding-left: 24px;
/* [5] */
font-size: 18px;
/* [6] */
font-size: 1rem;
}
/* Gutter size modifiers
========================================================================== */
.o-layout--flush {
margin-left: 0;
}
.o-layout--flush > .o-layout__item {
padding-left: 0;
}
.o-layout--tiny {
margin-left: -6px;
}
.o-layout--tiny > .o-layout__item {
padding-left: 6px;
}
.o-layout--small {
margin-left: -12px;
}
.o-layout--small > .o-layout__item {
padding-left: 12px;
}
.o-layout--large {
margin-left: -48px;
}
.o-layout--large > .o-layout__item {
padding-left: 48px;
}
.o-layout--huge {
margin-left: -96px;
}
.o-layout--huge > .o-layout__item {
padding-left: 96px;
}
/* Vertical alignment modifiers
========================================================================== */
/**
* Align all grid items to the middles of each other.
*/
.o-layout--middle > .o-layout__item {
vertical-align: middle;
}
/**
* Align all grid items to the bottoms of each other.
*/
.o-layout--bottom > .o-layout__item {
vertical-align: bottom;
}
/**
* Stretch all grid items of each row to have an equal-height.
* Please be aware that this modifier class doesn’t take any effect in IE9 and
* below and other older browsers due to the lack of `display: flex` support.
*/
.o-layout--stretch {
display: flex;
flex-wrap: wrap;
}
.o-layout--stretch > .o-layout__item {
display: flex;
}
.o-layout--stretch.o-layout--center {
justify-content: center;
}
.o-layout--stretch.o-layout--right {
justify-content: flex-end;
}
.o-layout--stretch.o-layout--left {
justify-content: flex-start;
}
/* Fill order modifiers
========================================================================== */
/**
* Fill up the layout system from the centre.
*/
.o-layout--center {
text-align: center;
}
.o-layout--center > .o-layout__item {
text-align: left;
}
/**
* Fill up the layout system from the right-hand side.
*/
.o-layout--right {
text-align: right;
}
.o-layout--right > .o-layout__item {
text-align: left;
}
/**
* Fill up the layout system from the left-hand side. This will likely only be
* needed when using in conjunction with `.o-layout--reverse`.
*/
.o-layout--left {
text-align: left;
}
.o-layout--left > .o-layout__item {
text-align: left;
}
/**
* Reverse the rendered order of the grid system.
*/
.o-layout--reverse {
direction: rtl;
}
.o-layout--reverse > .o-layout__item {
direction: ltr;
}
/* Auto-widths modifier
========================================================================== */
/**
* Cause layout items to take up a non-explicit amount of width.
*/
.o-layout--auto > .o-layout__item {
width: auto;
}
/* ==========================================================================
#MEDIA
========================================================================== */
/**
* Place any image- and text-like content side-by-side, as per:
* http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
*/
.o-media {
display: block;
}
.o-media:after {
content: "" !important;
display: block !important;
clear: both !important;
}
.o-media__img {
float: left;
margin-right: 24px;
}
.o-media__img > img {
display: block;
}
.o-media__body {
overflow: hidden;
display: block;
}
.o-media__body,
.o-media__body > :last-child {
margin-bottom: 0;
}
/* Size variants
========================================================================== */
/**
* Modify the amount of space between our image and our text. We also have
* reversible options for all available sizes.
*/
.o-media--flush > .o-media__img {
margin-right: 0;
margin-left: 0;
}
.o-media--tiny > .o-media__img {
margin-right: 6px;
}
.o-media--tiny.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 6px;
}
.o-media--small > .o-media__img {
margin-right: 12px;
}
.o-media--small.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 12px;
}
.o-media--large > .o-media__img {
margin-right: 48px;
}
.o-media--large.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 48px;
}
.o-media--huge > .o-media__img {
margin-right: 96px;
}
.o-media--huge.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 96px;
}
/* Reversed media objects
========================================================================== */
.o-media--reverse > .o-media__img {
float: right;
margin-right: 0;
margin-left: 24px;
}
/* ==========================================================================
#FLAG
========================================================================== */
/**
* The flag object is a design pattern similar to the media object, however it
* utilises `display: table[-cell];` to give us control over the vertical
* alignments of the text and image.
*
* http://csswizardry.com/2013/05/the-flag-object/
*
* 1. Allows us to control vertical alignments.
* 2. Force the object to be the full width of its parent. Combined with [1],
* this makes the object behave in a quasi-`display: block;` manner.
* 3. Reset inherited `border-spacing` declarations.
*/
.o-flag {
display: table;
/* [1] */
width: 100%;
/* [2] */
border-spacing: 0;
/* [3] */
}
/**
* Items within a flag object. There should only ever be one of each.
*
* 1. Default to aligning content to their middles.
*/
.o-flag__img,
.o-flag__body {
display: table-cell;
vertical-align: middle;
/* [1] */
}
/**
* Flag images have a space between them and the body of the object.
*
* 1. Force `.flag__img` to take up as little space as possible:
* https://pixelsvsbytes.com/2012/02/this-css-layout-grid-is-no-holy-grail/
*/
.o-flag__img {
width: 1px;
/* [1] */
padding-right: 24px;
/**
* 1. Fixes problem with images disappearing.
*
* The direct child selector '>' needs to remain in order for nested flag
* objects to not inherit their parent’s formatting. In case the image tag
* is wrapped into another tag, e.g. an anchor for linking reasons, it will
* disappear. In that case try wrapping the whole o-flag__img object into
* an anchor tag.
*
* E.g.:
*
*
*
* 
*
*
*/
}
.o-flag__img > img {
max-width: none;
/* [1] */
}
/**
* The container for the main content of the flag object.
*
* 1. Forces the `.flag__body` to take up all remaining space.
*/
.o-flag__body {
width: auto;
/* [1] */
}
.o-flag__body,
.o-flag__body > :last-child {
margin-bottom: 0;
}
/* Size variants
========================================================================== */
.o-flag--flush > .o-flag__img {
padding-right: 0;
padding-left: 0;
}
.o-flag--tiny > .o-flag__img {
padding-right: 6px;
}
.o-flag--tiny.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 6px;
}
.o-flag--small > .o-flag__img {
padding-right: 12px;
}
.o-flag--small.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 12px;
}
.o-flag--large > .o-flag__img {
padding-right: 48px;
}
.o-flag--large.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 48px;
}
.o-flag--huge > .o-flag__img {
padding-right: 96px;
}
.o-flag--huge.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 96px;
}
/* Reversed flag
========================================================================== */
/**
* 1. Swap the rendered direction of the object…
* 2. …and reset it.
* 3. Reassign margins to the correct sides.
*/
.o-flag--reverse {
direction: rtl;
/* [1] */
}
.o-flag--reverse > .o-flag__img,
.o-flag--reverse > .o-flag__body {
direction: ltr;
/* [2] */
}
.o-flag--reverse > .o-flag__img {
padding-right: 0;
/* [3] */
padding-left: 24px;
/* [3] */
}
/* Alignment variants
========================================================================== */
/**
* Vertically align the image- and body-content differently. Defaults to middle.
*/
.o-flag--top > .o-flag__img,
.o-flag--top > .o-flag__body {
vertical-align: top;
}
.o-flag--bottom > .o-flag__img,
.o-flag--bottom > .o-flag__body {
vertical-align: bottom;
}
/* ==========================================================================
#LIST-BARE
========================================================================== */
/**
* Strip list-like appearance from lists by removing their bullets and any
* indentation.
*
* Note: Declaring the item class might not be necessary everywhere,
* but is for example in
* - lists for the
- children.
*/
.o-list-bare {
list-style: none;
margin-left: 0;
}
.o-list-bare__item {
margin-left: 0;
}
/* ==========================================================================
#LIST-INLINE
========================================================================== */
/**
* The list-inline object simply displays a list of items in one line.
*/
.o-list-inline {
margin-left: 0;
list-style: none;
}
.o-list-inline__item {
display: inline-block;
}
/* ==========================================================================
#BOX
========================================================================== */
/**
* The box object simply boxes off content. Extend with cosmetic styles in the
* Components layer.
*
* 1. So we can apply the `.o-box` class to naturally-inline elements.
*/
.o-box {
display: block;
/* [1] */
padding: 24px;
}
.o-box:after {
content: "" !important;
display: block !important;
clear: both !important;
}
.o-box > :last-child {
margin-bottom: 0;
}
/* Size variants
========================================================================== */
.o-box--flush {
padding: 0;
}
.o-box--tiny {
padding: 6px;
}
.o-box--small {
padding: 12px;
}
.o-box--large {
padding: 48px;
}
.o-box--huge {
padding: 96px;
}
/* ==========================================================================
#BLOCK
========================================================================== */
/**
* Stacked image-with-text object. A simple abstraction to cover a very commonly
* occurring design pattern.
*/
.o-block {
display: block;
text-align: center;
}
.o-block__img {
margin-bottom: 24px;
/* Size variants
====================================================================== */
}
.o-block--flush > .o-block__img {
margin-bottom: 0;
}
.o-block--tiny > .o-block__img {
margin-bottom: 6px;
}
.o-block--small > .o-block__img {
margin-bottom: 12px;
}
.o-block--large > .o-block__img {
margin-bottom: 48px;
}
.o-block--huge > .o-block__img {
margin-bottom: 96px;
}
.o-block__body {
display: block;
}
/* Alignment variants
========================================================================== */
.o-block--right {
text-align: right;
}
.o-block--left {
text-align: left;
}
/* ==========================================================================
#RATIO
========================================================================== */
/**
* Create ratio-bound content blocks, to keep media (e.g. images, videos) in
* their correct aspect ratios.
*
* http://alistapart.com/article/creating-intrinsic-ratios-for-video
*
* 1. Default is a 1:1 ratio (i.e. a perfect square).
*/
.o-ratio {
position: relative;
display: block;
}
.o-ratio:before {
content: "";
display: block;
width: 100%;
padding-bottom: 100%;
/* [1] */
}
.o-ratio__content,
.o-ratio > iframe,
.o-ratio > embed,
.o-ratio > object {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
/* Ratio variants.
========================================================================== */
/**
* Generate a series of ratio classes to be used like so:
*
* * */ .o-ratio--2\:1:before { padding-bottom: 50%; } .o-ratio--4\:3:before { padding-bottom: 75%; } .o-ratio--16\:9:before { padding-bottom: 56.25%; } /* Contain modifier. ========================================================================== */ /** * Only works with image content. * Contains the image to the boundaries, without cropping or stretching it. */ .o-ratio--img-contain > .o-ratio__content:before { height: auto; margin: auto; max-height: 100%; max-width: 100%; width: auto; } /* ========================================================================== #CROP ========================================================================== */ /** * Provide a cropping container in order to display media (usually images) * cropped to certain ratios. * * 1. Set up a positioning context in which the image can sit. * 2. This is the crucial part: where the cropping happens. */ .o-crop { position: relative; /* [1] */ display: block; overflow: hidden; /* [2] */ } /** * Apply this class to the content (usually `img`) that needs cropping. * * 1. Image’s default positioning is top-left in the cropping box. * 2. Make sure the media doesn’t stop itself too soon. */ .o-crop__content { position: absolute; top: 0; /* [1] */ left: 0; /* [1] */ max-width: none; /* [2] */ } /** * We can position the media in different locations within the cropping area. */ .o-crop__content--left-top { left: 0; } .o-crop__content--left-center { top: 50%; transform: translateY(-50%); } .o-crop__content--left-bottom { top: auto; bottom: 0; } .o-crop__content--right-top { right: 0; left: auto; } .o-crop__content--right-center { top: 50%; right: 0; left: auto; transform: translateY(-50%); } .o-crop__content--right-bottom { top: auto; right: 0; bottom: 0; left: auto; } .o-crop__content--center-top { left: 50%; transform: translateX(-50%); } .o-crop__content--center, .o-crop__content--center-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .o-crop__content--center-bottom { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); } /* Crop-ratio variants ========================================================================== */ /** * Generate a series of crop classes to be used like so: * ** */ .o-crop--2\:1 { padding-bottom: 50%; } .o-crop--4\:3 { padding-bottom: 75%; } .o-crop--16\:9 { padding-bottom: 56.25%; } /* Fill modifier ========================================================================== */ /** * Content stretches to fill it's container while maintaining aspect-ratio. */ .o-crop--fill > .o-crop__content { min-height: 100%; min-width: 100%; } /* ========================================================================== #TABLE ========================================================================== */ /** * A simple object for manipulating the structure of HTML `table`s. */ .o-table { width: 100%; } /* Equal-width table cells ========================================================================== */ /** * `table-layout: fixed` forces all cells within a table to occupy the same * width as each other. This also has performance benefits: because the browser * does not need to (re)calculate cell dimensions based on content it discovers, * the table can be rendered very quickly. Further reading: * https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values */ .o-table--fixed { table-layout: fixed; } /* Size variants ========================================================================== */ .o-table--tiny th, .o-table--tiny td { padding: 6px; } .o-table--small th, .o-table--small td { padding: 12px; } .o-table--large th, .o-table--large td { padding: 48px; } .o-table--huge th, .o-table--huge td { padding: 96px; } /* ========================================================================== #PACK ========================================================================== */ /** * The pack object simply causes any number of elements pack up horizontally to * automatically fill an equal, fluid width of their parent. * * 1. Fill all available space. * 2. Remove any leftover styling from lists. * 3. Cause children to be automatically equally sized. */ .o-pack { width: 100%; /* [1] */ margin-left: 0; /* [2] */ display: table; table-layout: fixed; /* [3] */ } /** * 1. Cause children to adopt table-like structure. * 2. Default item alignment is with the tops of each other. */ .o-pack__item { display: table-cell; /* [1] */ vertical-align: top; /* [2] */ /* Vertical alignment variants ====================================================================== */ } .o-pack--middle > .o-pack__item { vertical-align: middle; } .o-pack--bottom > .o-pack__item { vertical-align: bottom; } /* Unequal-width items ========================================================================== */ .o-pack--auto { table-layout: auto; } /* Size variants ========================================================================== */ .o-pack--tiny { border-spacing: 6px; } .o-pack--small { border-spacing: 12px; } .o-pack--default { border-spacing: 24px; } .o-pack--large { border-spacing: 48px; } .o-pack--huge { border-spacing: 96px; } /* Reversed order packs ========================================================================== */ .o-pack--reverse { direction: rtl; } .o-pack--reverse > .o-pack__item { direction: ltr; } .o-container__inner { margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; } @media (min-width: 20em) { .o-container__inner { max-width: 540px; } } @media (min-width: 46.25em) { .o-container__inner { max-width: 720px; } } @media (min-width: 61.25em) { .o-container__inner { max-width: 960px; } } @media (min-width: 81.25em) { .o-container__inner { max-width: 1140px; } } .o-container--fluid .o-container__inner { padding-right: 15px; padding-left: 15px; } @media print { .o-header { display: none; } } .o-header .o-grid { margin: 0; } .o-header__top { padding: 0; background-color: rgba(0, 0, 0, 0.05); } @media (min-width: 46.25em) { .o-header__top { padding: 0; } } .o-header__top .o-header__inside { align-items: center; justify-items: flex-end; } .o-header__middle { padding: 1rem 0; } @media (min-width: 46.25em) { .o-header__middle { padding: 2rem 0; } } .o-header__middle .o-header__inside { align-items: center; } @media (min-width: 46.25em) { .o-header__middle .c-meta-contact { justify-self: flex-end; } } .o-header__bottom { background: #312783; position: -webkit-sticky; position: sticky; z-index: 1000; top: 0; } .o-header__bottom .o-header__inside { position: -webkit-sticky; position: sticky; top: 0; } .o-header__bottom .o-header__search { justify-self: flex-end; max-width: 400px; display: none; } @media (min-width: 81.25em) { .o-header__bottom .o-header__search { display: block; } } .o-grid { display: grid; grid-gap: 30px 30px; padding-left: 15px; padding-right: 15px; margin-bottom: 96px; } .o-grid--col-1, .o-grid--col-2, .o-grid--col-3, .o-grid--col-4 { grid-template-columns: 1fr; } .o-grid--sidebarLeft, .o-grid--sidebarRight { margin-top: 96px; } .o-grid--align-center { align-items: center; } @media (min-width: 61.25em) { .o-grid { padding-left: 150px; padding-right: 150px; } .o-grid--col-1 { grid-template-columns: 1fr; } .o-grid--col-2 { grid-template-columns: 1fr 1fr; } .o-grid--col-3 { grid-template-columns: 1fr 1fr 1fr; } .o-grid--col-4 { grid-template-columns: 1fr 1fr; } } @media (min-width: 81.25em) { .o-grid { padding-left: 150px; padding-right: 150px; } .o-grid--col-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } .o-grid--sidebarLeft { grid-template-columns: 300px 1fr; } .o-grid--sidebarRight { grid-template-columns: 1fr 300px; } } @media (min-width: 118.75em) { .o-grid { padding-left: 300px; padding-right: 300px; } .o-grid--sidebarLeft { grid-template-columns: 300px 1fr; } .o-grid--sidebarRight { grid-template-columns: 1fr 300px; } } @media (min-width: 140.625em) { .o-grid { padding-left: 500px; padding-right: 500px; } } .c-pageHero { color: #ffffff; display: grid; grid-template-rows: 1fr 150px; grid-template-columns: 1fr; margin-bottom: 96px; } @media (min-width: 61.25em) { .c-pageHero { grid-template-rows: 48px minmax(150px, 1fr) 48px; grid-template-columns: 150px 1fr 2fr 150px; grid-gap: 30px 30px; } } @media (min-width: 81.25em) { .c-pageHero { grid-template-columns: 150px 1fr 2fr 150px; } } @media (min-width: 140.625em) { .c-pageHero { grid-template-columns: 500px 1fr 2fr 500px; } } @media (min-width: 61.25em) { .c-pageHero:before { content: ""; display: block; background-color: #312783; grid-row-start: 1; grid-row-end: span 2; grid-column: span 4/-1; } } .c-pageHero .c-headline { background-color: #312783; align-self: center; justify-self: center; padding: 24px; grid-column: 1; grid-row: 1; z-index: 2; } @media (min-width: 61.25em) { .c-pageHero .c-headline { grid-row: 2; grid-column-start: 2; padding: 24px 0 0 0; z-index: auto; } } .c-pageHero .c-image { grid-row-start: 1; grid-row-end: span 2; grid-column: 1; z-index: 1; } @media (min-width: 61.25em) { .c-pageHero .c-image { grid-row-start: 2; grid-column-start: 3; grid-row-end: span 3; z-index: auto; } } .c-pageHero .c-image img { -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; width: 100%; max-height: 400px; } @media (min-width: 61.25em) { .c-pageHero .c-filterform { grid-row-start: 2; grid-column-start: 3; grid-row-end: span 3; } } .c-pageHero--withFilter { grid-template-columns: 1fr; grid-template-rows: 1fr; } @media (min-width: 61.25em) { .c-pageHero--withFilter { grid-template-columns: 150px 1fr 1fr 150px; grid-template-rows: 48px minmax(150px, 1fr) 48px; } } @media (min-width: 81.25em) { .c-pageHero--withFilter { grid-template-columns: 150px 1fr 1fr 150px; } } .c-contentBlocks { background-color: #f39200; color: #ffffff; padding-top: 48px; padding-bottom: 48px; text-align: center; } @media (min-width: 61.25em) { .c-contentBlocks { text-align: left; } } .c-contentBlocks__item { display: grid; grid-template-rows: -webkit-max-content 1fr -webkit-max-content; grid-template-rows: max-content 1fr max-content; } .c-contentBlocks .c-button { background-color: #ffffff; border-color: #ffffff; border-radius: 0; color: #495057; display: block; } .c-contentBlocks .c-button:hover { background-color: #b9e24a; border-color: #b9e24a; color: #3c3c3b; } .c-contentBlocks .c-button:focus { outline: 2px dotted #495057; outline-offset: 1px; } .c-contentBlocks .c-button:disabled, .c-contentBlocks .c-button[aria-disabled=true] { background-color: #ffffff; border-color: #ffffff; color: #495057; opacity: 0.5; } .c-contentBlocks--numbers { text-align: center; } .c-contentBlocks--numbers .c-contentBlocks__itemHeadline { font-size: 72px; font-size: 4rem; line-height: 1.0833333333; margin-bottom: 0; } .c-multiColumnText .c-headline { align-self: center; justify-self: center; } .c-multiColumnText--bigHeadline .c-headline { align-self: center; justify-self: center; color: #95c11f; margin-bottom: 0; } .c-multiColumnText--bigHeadline .c-headline h1, .c-multiColumnText--bigHeadline .c-headline h2, .c-multiColumnText--bigHeadline .c-headline h3, .c-multiColumnText--bigHeadline .c-headline h4, .c-multiColumnText--bigHeadline .c-headline h5, .c-multiColumnText--bigHeadline .c-headline h6 { font-size: 48px; font-size: 2.6666666667rem; line-height: 1.125; } .c-numberList__number { display: block; font-weight: 700; } .c-numberList__headline { display: block; font-weight: 700; } .c-numberList__content { margin-left: 0; } .c-headline__subheadline p { margin-bottom: 0; } .c-headline--small h1, .c-headline--small h2, .c-headline--small h3, .c-headline--small h4, .c-headline--small h5, .c-headline--small h6 { font-size: 18px; font-size: 1rem; line-height: 1.3333333333; } .c-headline--small .c-headline__subheadline { font-size: 40px; font-size: 2.2222222222rem; line-height: 1.2; } .c-headlineBlock { background-color: #312783; color: #ffffff; padding-top: 48px; padding-bottom: 48px; text-align: center; } @media (min-width: 61.25em) { .c-headlineBlock { text-align: left; } } .c-headlineBlock p { margin-bottom: 0; } .c-teamMember { display: grid; color: #ffffff; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr; margin-bottom: 96px; } @media (min-width: 61.25em) { .c-teamMember { grid-template-rows: 48px minmax(150px, 1fr) 48px; grid-template-columns: 150px 1fr 1fr 150px; grid-gap: 30px 30px; } } @media (min-width: 81.25em) { .c-teamMember { grid-template-columns: 150px 1fr 1fr 150px; } } @media (min-width: 140.625em) { .c-teamMember { grid-template-columns: 500px 1fr 1fr 500px; } } @media (min-width: 61.25em) { .c-teamMember:before { content: ""; display: block; background-color: #95c11f; grid-row: 2; grid-column: span 4/-1; } } .c-teamMember__details { background-color: #95c11f; padding: 24px; color: #ffffff; text-align: center; } @media (min-width: 61.25em) { .c-teamMember__details { grid-row: 2; grid-column-start: 2; align-self: center; background-color: transparent; padding: 0; text-align: left; } } .c-teamMember__content p { font-size: 28px; font-size: 1.5555555556rem; line-height: 1.2857142857; margin-bottom: 0; } .c-teamMember__content a { color: #ffffff; } .c-teamMember__content a:hover, .c-teamMember__content a:focus { color: #cccccc; } @media (min-width: 61.25em) { .c-teamMember .c-image { grid-row-start: 1; grid-column-start: 3; grid-row-end: span 3; } } .c-teamMember .c-image img { -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; width: 100%; max-height: 400px; } @media (min-width: 61.25em) { .c-teamMember--image-right .c-teamMember__details { grid-column-start: 3; } } @media (min-width: 61.25em) { .c-teamMember--image-right .c-image { grid-column-start: 2; } } .c-callToAction { background-color: #95c11f; color: #ffffff; padding-top: 48px; padding-bottom: 48px; } .c-callToAction .c-headline { align-self: center; justify-self: center; } .c-callToAction .c-newsletterForm { align-self: center; } .c-callToAction .c-button { background-color: #f39200; border-color: #f39200; border-radius: 0; color: #ffffff; display: flex; align-items: center; justify-content: center; } .c-callToAction .c-button:hover { background-color: #b9e24a; border-color: #b9e24a; color: #3c3c3b; } .c-callToAction .c-button:focus { outline: 2px dotted #f39200; outline-offset: 1px; } .c-callToAction .c-button:disabled, .c-callToAction .c-button[aria-disabled=true] { background-color: #f39200; border-color: #f39200; color: #ffffff; opacity: 0.5; } .c-newsletterForm .formbody { display: grid; align-items: flex-start; justify-items: flex-start; grid-template-columns: 1fr; grid-gap: 30px 30px; } .c-newsletterForm .widget-text { width: 100%; } .c-newsletterForm .widget-checkbox { width: 100%; } .c-newsletterForm .widget-checkbox .checkbox_container { margin-bottom: 0; } .c-newsletterForm .widget-checkbox label { display: inline; } .c-newsletterForm .widget-submit { width: 100%; } .c-newsletterForm label { display: none; } .c-newsletterForm .text { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; width: 100%; margin: 0; padding: 0.6rem; background: #ffffff; border: 1px solid #95c11f; border-right-width: 0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); border-radius: 0; outline: none; resize: vertical; transition: border-color 0.3s ease; color: #3c3c3b; font-family: inherit; font-size: 100%; line-height: 1.15; } .c-newsletterForm .text[disabled] { border-color: #a6d723; background-color: #f2f2f2; box-shadow: none; cursor: not-allowed; color: #494948; } .c-newsletterForm .text:focus { border-color: #b9e24a; } .c-newsletterForm .text::-webkit-input-placeholder { color: #6c757d; opacity: 1; } .c-newsletterForm .text::-moz-placeholder { color: #6c757d; opacity: 1; } .c-newsletterForm .text:-ms-input-placeholder { color: #6c757d; opacity: 1; } .c-newsletterForm .text::-ms-input-placeholder { color: #6c757d; opacity: 1; } .c-newsletterForm .text::placeholder { color: #6c757d; opacity: 1; } .c-newsletterForm .text:-ms-input-placeholder { color: #6c757d; } .c-newsletterForm .text::-ms-input-placeholder { color: #6c757d; } .c-newsletterForm .submit { display: inline-block; padding: 0.6rem; border: 0 solid transparent; font-size: 1rem; line-height: 1.15; text-align: center; transition-duration: 0.4s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; transition-property: background-color, color, border-color; background-color: #f39200; border-color: #95c11f; border-radius: 0; color: #ffffff; border-width: 1px; width: 100%; border-left-width: 0; } .c-newsletterForm .submit:not(:disabled):not([aria-disabled=true]) { cursor: pointer; } .c-newsletterForm .submit:hover, .c-newsletterForm .submit:focus { text-decoration: none; } .c-newsletterForm .submit:disabled, .c-newsletterForm .submit[aria-disabled=true] { box-shadow: none; } .c-newsletterForm .submit:hover { background-color: #b9e24a; border-color: #a0cf21; color: #3c3c3b; } .c-newsletterForm .submit:focus { outline: 2px dotted #f39200; outline-offset: 1px; } .c-newsletterForm .submit:disabled, .c-newsletterForm .submit[aria-disabled=true] { background-color: #f39200; border-color: #f39200; color: #ffffff; opacity: 0.5; } .c-button { display: inline-block; padding: 10px 20px; border: 0 solid transparent; font-size: 1rem; line-height: 1.5; text-align: center; transition-duration: 0.4s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; transition-property: background-color, color, border-color; background-color: #95c11f; border-color: #95c11f; border-radius: 0; color: #3c3c3b; } .c-button:not(:disabled):not([aria-disabled=true]) { cursor: pointer; } .c-button:hover, .c-button:focus { text-decoration: none; } .c-button:disabled, .c-button[aria-disabled=true] { box-shadow: none; } .c-button:hover { background-color: #b9e24a; border-color: #b9e24a; color: #3c3c3b; } .c-button:focus { outline: 2px dotted #95c11f; outline-offset: 1px; } .c-button:disabled, .c-button[aria-disabled=true] { background-color: #95c11f; border-color: #95c11f; color: #3c3c3b; opacity: 0.5; } .c-textImage .c-content { align-self: center; justify-self: center; } .c-textImage img { -o-object-fit: cover; object-fit: cover; width: 100%; } .c-product-detail { margin-top: 48px; margin-bottom: 0; } @media (min-width: 61.25em) { .c-product-detail { margin-top: 96px; margin-bottom: 96px; grid-row-gap: 0; } } @media print { .c-product-detail { margin-top: 0; margin-bottom: 0; padding-right: 10mm; padding-left: 10mm; font-size: 12px; line-height: 1.2; grid-row-gap: 0; } } @media print { .c-product-detail h1 { font-size: 25px; font-size: 1.3888888889rem; line-height: 1.44; font-weight: 700; } } @media print { .c-product-detail h2 { font-size: 16px; font-size: 0.8888888889rem; line-height: 1.5; font-weight: 700; } } @media print { .c-product-detail h3 { font-size: 12px; font-size: 0.6666666667rem; line-height: 1.5; font-weight: 700; } } @media print { .c-product-detail h5 { font-size: 14px; font-size: 0.7777777778rem; line-height: 1.7142857143; } } @media print { .c-product-detail__page { min-height: 29.6cm; page-break-after: always; } } .c-product-detail ul { margin-left: 0; list-style: none; } .c-product-detail__header { display: grid; grid-template-columns: 1fr; align-items: center; justify-content: space-between; margin-bottom: 30px; } @media (min-width: 81.25em) { .c-product-detail__header { grid-template-columns: 1fr 1fr; } } @media print { .c-product-detail__header { grid-template-columns: 89.8mm 1fr; margin-bottom: 10mm; justify-content: normal; } } .c-product-detail__title { color: #95c11f; } @media (min-width: 81.25em) { .c-product-detail__title { margin-bottom: 0; } } @media print { .c-product-detail__title { margin-bottom: 0; } } .c-product-detail__title-compact { color: #f39200; } .c-product-detail__title-standard { color: #95c11f; } .c-product-detail__title-special { color: #312783; } .c-product-detail__main-attributes { display: grid; grid-template-columns: 1fr; align-items: center; background-color: #d6e7f3; color: #008dbb; font-weight: 700; position: relative; font-size: 40px; font-size: 2.2222222222rem; line-height: 1.2; } @media (min-width: 61.25em) { .c-product-detail__main-attributes { grid-template-columns: 1.5fr 1fr; } } @media print { .c-product-detail__main-attributes { grid-template-columns: 45.1mm 1fr; font-size: 20px; font-size: 1.1111111111rem; line-height: 1.5; } } .c-product-detail__main-attribute--big { background-color: #008dbb; color: #ffffff; } @media (min-width: 61.25em) { .c-product-detail__main-attribute--big { text-align: center; } } @media print { .c-product-detail__main-attribute--big { text-align: center; font-size: 21px; font-size: 1.1666666667rem; line-height: 1.4285714286; } } .c-product-detail__main-attribute--big .c-product-detail__main-attribute-title { text-transform: uppercase; } .c-product-detail__main-attribute { position: relative; } .c-product-detail__main-attribute-title { padding: 6px 12px; display: block; } .c-product-detail__main-attribute-icon { position: absolute; display: block; right: 0; top: 0; width: 100%; height: 100%; text-align: right; } .c-product-detail__main-attribute-icon svg { height: 100%; fill: #ffffff; } .c-product-detail__main-attribute-icon .cls-1 { fill: #ffffff; } .c-product-detail__content { display: grid; grid-template-columns: 1fr; grid-gap: 0 30px; } @media (min-width: 61.25em) { .c-product-detail__content { grid-template-columns: 2fr 1fr; } } @media print { .c-product-detail__content { grid-template-columns: 135.3mm 45.1mm; height: 232mm; } } .c-product-detail__section-title { margin-top: 2rem; } @media print { .c-product-detail__section-title { margin-top: 1rem; } } @media print { .c-product-detail__section-title--no-margin-top { margin-top: 0; } } .c-product-detail__main { position: relative; } .c-product-detail__main:after { content: ""; display: block; position: absolute; right: 0; bottom: 0; width: 100%; height: 4px; background: #95c11f; background: linear-gradient(90deg, #312783 0%, #312783 33%, #95c11f 33%, #95c11f 66%, #f39200 66%); } @media (min-width: 61.25em) { .c-product-detail__main { padding-right: 24px; } .c-product-detail__main:after { top: 0; right: 0; bottom: auto; width: 4px; height: 100%; background: linear-gradient(180deg, #312783 0%, #312783 33%, #95c11f 33%, #95c11f 66%, #f39200 66%); } } @media print { .c-product-detail__main { height: 100%; display: grid; align-content: flex-start; padding-right: 24px; } .c-product-detail__main:after { top: 0; right: 0; bottom: auto; width: 4px; height: 100%; background: linear-gradient(180deg, #312783 0%, #312783 33%, #95c11f 33%, #95c11f 66%, #f39200 66%); } } @media print { .c-product-detail__main--align-between { align-content: space-between; } } .c-product-detail__sidebar { position: relative; margin-top: 30px; } @media (min-width: 61.25em) { .c-product-detail__sidebar { margin-top: 0; } } @media print { .c-product-detail__sidebar { margin-top: 0; font-size: 9px; line-height: 1.2; } } .c-product-detail__sidebar--align-end { align-self: end; } .c-product-detail__main-features { font-weight: 700; } @media print { .c-product-detail__main-features p { margin-bottom: 0; } } .c-product-detail__main-features ul { list-style-type: disc; margin-left: 2rem; } @media print { .c-product-detail__main-features ul { margin-left: 1rem; } } @media print { .c-product-detail__main-features { font-size: 12px; font-size: 0.6666666667rem; line-height: 1.5; } } .c-product-detail__attribute-block { display: grid; grid-template-columns: 1fr; margin-bottom: 1rem; } @media (min-width: 61.25em) { .c-product-detail__attribute-block { margin-bottom: 0; grid-template-columns: 1fr 1fr; } } @media print { .c-product-detail__attribute-block { margin-bottom: 0; grid-template-columns: 1fr 1fr; font-size: 9px; font-size: 0.5rem; line-height: 2; } } .c-product-detail__attribute-block--with-margin { margin-bottom: 1rem; } @media print { .c-product-detail__attribute-block--with-margin { margin-bottom: 0; } } .c-product-detail__attribute-title { display: block; } .c-product-detail__attribute-value { display: block; } @media (min-width: 61.25em) { .c-product-detail__attribute-value { text-align: right; } } @media print { .c-product-detail__attribute-value { text-align: right; } } .c-product-detail__color-tile { width: 100%; height: 100px; margin-bottom: 1rem; } @media print { .c-product-detail__color-tile { height: 50px; } } .c-product-detail__attributes-list-item { margin-bottom: 24px; display: grid; grid-gap: 0; grid-template-columns: 1fr; align-items: center; } @media (min-width: 61.25em) { .c-product-detail__attributes-list-item { grid-template-columns: 80px 1fr; grid-gap: 30px 30px; } } @media print { .c-product-detail__attributes-list-item { grid-template-columns: 80px 1fr; grid-gap: 15px 15px; } } .c-product-detail__attributes-list-icon { display: block; } .c-product-detail__attributes-list-icon svg { width: 100%; height: auto; } .c-product-detail .c-product-detail__sidebar .c-product-detail__attributes-list-icon svg { width: auto; max-height: 50px; } .c-product-detail__attributes-list--inline .c-product-detail__attributes-list-item { display: inline-block; width: 60px; } .c-product-detail__attributes-list--inline .c-product-detail__attributes-list-item:not(:last-child) { margin-right: 24px; } .c-product-detail__attributes-list--inline .c-product-detail__attributes-list-title { display: none; } .c-product-detail__row { display: grid; grid-template-columns: 1fr; grid-gap: 30px 30px; margin-bottom: 30px; } @media (min-width: 81.25em) { .c-product-detail__row { grid-template-columns: 1fr 1fr; margin-bottom: 0; } } @media print { .c-product-detail__row { grid-template-columns: 1fr 1fr; margin-bottom: 0; } } @media print { .c-product-detail__page--second .c-product-detail__sidebar--align-end { align-self: normal; display: grid; } .c-product-detail__page--second .c-pdfSidebarNotes { align-self: end; } } .c-product-detail__date { margin-bottom: 0; } @media print { .c-product-detail .js-pdfExport { display: none; } } .c-product-detail .c-button { display: block; width: 100%; } .c-singlechart { display: grid; grid-template-columns: 1fr; align-items: center; grid-gap: 0 6px; } @media (min-width: 61.25em) { .c-singlechart { grid-template-columns: 1fr 1fr; } } @media print { .c-singlechart { grid-template-columns: 75px 1fr; align-items: start; } } .c-singlechart__icon { font-size: 0.625rem; width: 30px; margin-right: 6px; } .c-singlechart__description { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-break: break-word; } @media print { .c-singlechart__description { font-size: 11px; line-height: 1.25; } } .c-singlechart__line { background: #d6e7f3; position: relative; width: 100%; height: 20px; } .c-singlechart__line:after { content: ""; display: block; position: absolute; top: 0; left: 0; height: 20px; background-color: #008dbb; } .c-singlechart__line--sm:after { width: calc(1/3 * 100%); } .c-singlechart__line--md:after { width: calc(2/3 * 100%); } .c-singlechart__line--lg:after { width: calc(100%); } .c-singlechart__lineBar { /* Styling an indeterminate progress bar */ /* Taken from: https://css-tricks.com/html5-progress-element/ */ width: 100%; display: block; /* Styling the determinate progress element */ /* Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element. -webkit-progress-bar -> To style the progress element container -webkit-progress-value -> To style the progress element value. */ /* Let's spice up things little bit by using pseudo elements. */ /* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */ /* Fallback technique styles */ } .c-singlechart__lineBar progress:not(value) { /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */ } .c-singlechart__lineBar progress[value] { /* Get rid of the default appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */ border: none; /* Add dimensions */ width: 100%; height: 20px; /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */ background-color: #d6e7f3; border-radius: 0; box-shadow: none; /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */ color: #008dbb; position: relative; display: block; } @media print { .c-singlechart__lineBar progress[value] { height: 10px; } } .c-singlechart__lineBar progress[value]::-webkit-progress-bar { background-color: #d6e7f3; border-radius: 0; box-shadow: none; } .c-singlechart__lineBar progress[value]::-webkit-progress-value { position: relative; border-radius: 0; background-color: #008dbb; } .c-singlechart__lineBar progress[value]::-webkit-progress-value:after { /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */ content: ""; position: absolute; width: 5px; height: 5px; top: 7px; right: 7px; background-color: #d6e7f3; border-radius: 0; } .c-singlechart__lineBar progress[value]::-moz-progress-bar { /* Gradient background with Stripes */ border-radius: 0; background-color: #008dbb; /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */ } .c-singlechart__lineBar .progress-bar { background-color: #008dbb; border-radius: 0; box-shadow: none; /* Dimensions should be similar to the parent progress element. */ width: 100%; height: 20px; } .c-singlechart__lineBar--red { /* Styling the determinate progress element */ /* Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element. -webkit-progress-bar -> To style the progress element container -webkit-progress-value -> To style the progress element value. */ /* Let's spice up things little bit by using pseudo elements. */ /* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */ /* Fallback technique styles */ } .c-singlechart__lineBar--red progress[value] { /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */ background-color: #f1d8d5; /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */ color: #b64147; } .c-singlechart__lineBar--red progress[value]::-webkit-progress-bar { background-color: #f1d8d5; } .c-singlechart__lineBar--red progress[value]::-webkit-progress-value { background-color: #b64147; } .c-singlechart__lineBar--red progress[value]::-webkit-progress-value:after { background-color: #f1d8d5; } .c-singlechart__lineBar--red progress[value]::-moz-progress-bar { background-color: #b64147; /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */ } .c-singlechart__lineBar--red .progress-bar { background-color: #b64147; } .c-filter-colors { width: 1.5rem; height: 1.5rem; border-radius: 100%; display: inline-block; } .c-filter-colors--1 { background-color: black; } .c-filter-colors--2 { background-color: white; } .c-filter-colors--3 { background-color: grey; } .c-filter-colors--4 { background-color: silver; } .c-filter-colors--5 { background-color: gold; } .c-filter-colors--6 { background-color: yellow; } .c-filter-colors--7 { background-color: orange; } .c-filter-colors--8 { background-color: red; } .c-filter-colors--9 { background-color: green; } .c-filter-colors--10 { background-color: blue; } .c-filter-colors--11 { background-color: violet; } .c-filter-colors--12 { background-color: goldenrod; } .c-filter-colors--13 { background-color: lightyellow; } .c-filter-colors--15 { background-color: lightgreen; } .c-filter-colors--16 { background-color: lightblue; } .c-filter-colors--17 { background-color: #216869; } .c-filter-colors--17 { background: linear-gradient(110deg, #216869 50%, #9CC5A1 50%); } .c-color-wrap { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } .o-control--color .o-control__input:checked ~ .o-control__label .c-filter-colors { border: 4px solid #ff9900; } .o-control--color .o-control__label:after, .o-control--color .o-control__label:before { content: none; } .c-filter-text--slider .c-filter-text__input { display: none; } .c-filter-text--slider .c-filter-text__range-slider { margin-top: 24px; margin-bottom: 24px; } .c-filter-text--slider .noUi-tooltip { display: none; } .c-filter-text--slider .noUi-active .noUi-tooltip { display: block; } .c-filter-text--slider .noUi-pips-horizontal { display: none; } .c-filter-text--slider .noUi-connects { background-image: linear-gradient(to right, #4169e1 0%, #ff0000 100%); } .c-filter-text--slider--whitePurple .noUi-connects { background-image: linear-gradient(to right, #ffffff 0%, #ff0000 50%, #800080 100%); } .c-filter-text--slider--whiteGray .noUi-connects { background-image: linear-gradient(to right, #ffffff 0%, #495057 100%); } .c-filterfield { border-bottom: 1px solid #495057; background: linear-gradient(to top, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0)); } .c-filterfield--indented { margin-left: 24px; border-bottom: 0; } .c-filterfield__label { font-weight: bold; color: #6c757d; padding-right: 6px; padding-left: 6px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; } .c-filterfield__label:after { content: "\F078"; } .c-filterfield__label.active:after { content: "\F077"; } .c-filterfield__label-content { display: flex; align-items: center; } .c-filterfield__label-content span { margin-right: 6px; } .c-filterfield .cm_lexicon_item { width: 18px; } .c-filterfield .js-accordion__panel { padding-right: 6px; padding-left: 6px; } .c-filterfield__description { font-size: 0.8125rem; margin-top: 0; margin-bottom: 1rem; } .c-filterfield .choices { margin: 0 0 0.9rem; } .c-filterfield .choices:last-child { margin: 0 0 0.9rem; } .c-filterfield__scrollable { border: 1px solid rgba(0, 0, 0, 0.05); padding: 0.5rem; width: 100%; height: 200px; overflow-y: scroll; margin-bottom: 1rem; } .c-filterfield__scrollable .o-control:last-child { margin-bottom: 0; } .c-filterfield-accordion { /* title opened */ /* title closed */ } .c-filterfield-accordion__panel[aria-hidden=true] { display: none; } .c-filterfield-accordion__header { display: block; background: none; border: 0; font-family: inherit; cursor: pointer; margin: 0; padding: 0; text-align: left; width: 100%; font-weight: bold; color: #6c757d; outline: none; } .c-filterfield-accordion__header[aria-expanded=true]:after { content: "- "; } .c-filterfield-accordion__header[aria-expanded=false]:after { content: "+ "; } .tagify--empty { display: none; } .c-filterform--small { padding: 2.625rem 1.875rem 3.125rem; background: #fff; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.045), 0 6.7px 5.3px rgba(0, 0, 0, 0.065), 0 12.5px 10px rgba(0, 0, 0, 0.08), 0 22.3px 17.9px rgba(0, 0, 0, 0.095), 0 41.8px 33.4px rgba(0, 0, 0, 0.115), 0 100px 80px rgba(0, 0, 0, 0.16); text-align: center; color: #3c3c3b; } .c-filterform--small .c-filterform__container { display: grid; grid-gap: 30px 30px; } @media (min-width: 61.25em) { .c-filterform--small .c-filterform__container { grid-template-columns: 1fr 1fr; } } @media (min-width: 61.25em) { .c-filterform--small .c-filterform__column { display: flex; flex-direction: column; justify-content: space-between; } } .c-filterform--small .c-filterform__title { color: #333; font-size: 28px; font-size: 1.5555555556rem; line-height: 1.2857142857; margin-bottom: 24px; } .c-filterform--small .c-filterform__text, .c-filterform--small .c-filterform__image { margin-bottom: 24px; } .c-filterform--small .c-filterform__image { width: -webkit-max-content; width: -moz-max-content; width: max-content; max-height: 250px; margin-right: auto; margin-left: auto; } .c-filterform--small .c-filterform__button { display: block; padding: 10px 20px; border: 0 solid transparent; font-size: 1rem; line-height: 1.5; text-align: center; transition-duration: 0.4s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; transition-property: background-color, color, border-color; background-color: #95c11f; border-color: #95c11f; border-radius: 0; color: #3c3c3b; width: 100%; } .c-filterform--small .c-filterform__button:not(:disabled):not([aria-disabled=true]) { cursor: pointer; } .c-filterform--small .c-filterform__button:hover, .c-filterform--small .c-filterform__button:focus { text-decoration: none; } .c-filterform--small .c-filterform__button:disabled, .c-filterform--small .c-filterform__button[aria-disabled=true] { box-shadow: none; } .c-filterform--small .c-filterform__button:hover { background-color: #b9e24a; border-color: #b9e24a; color: #3c3c3b; } .c-filterform--small .c-filterform__button:focus { outline: 2px dotted #95c11f; outline-offset: 1px; } .c-filterform--small .c-filterform__button:disabled, .c-filterform--small .c-filterform__button[aria-disabled=true] { background-color: #95c11f; border-color: #95c11f; color: #3c3c3b; opacity: 0.5; } .c-filterform--small .c-filterfield { margin-bottom: 24px; background: none; border-bottom: 0; } .c-filterform--small .c-filterfield__label:after { content: none; display: none; } .c-filterform--small .c-filterfield .js-accordion__panel { text-align: left; padding-right: 0; padding-left: 0; } .c-filterform--small .submit { display: block; padding: 10px 20px; border: 0 solid transparent; font-size: 1rem; line-height: 1.5; text-align: center; transition-duration: 0.4s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; transition-property: background-color, color, border-color; background-color: #95c11f; border-color: #95c11f; border-radius: 0; color: #3c3c3b; width: 100%; } .c-filterform--small .submit:not(:disabled):not([aria-disabled=true]) { cursor: pointer; } .c-filterform--small .submit:hover, .c-filterform--small .submit:focus { text-decoration: none; } .c-filterform--small .submit:disabled, .c-filterform--small .submit[aria-disabled=true] { box-shadow: none; } .c-filterform--small .submit:hover { background-color: #b9e24a; border-color: #b9e24a; color: #3c3c3b; } .c-filterform--small .submit:focus { outline: 2px dotted #95c11f; outline-offset: 1px; } .c-filterform--small .submit:disabled, .c-filterform--small .submit[aria-disabled=true] { background-color: #95c11f; border-color: #95c11f; color: #3c3c3b; opacity: 0.5; } .c-footer { color: #343a40; padding: 96px 0; } .c-footer:before { content: ""; display: block; width: 100%; height: 1px; background: #312783; background: linear-gradient(90deg, #f39200 25%, #312783 50%, #95c11f 75%); margin-bottom: 24px; } @media print { .c-footer { display: none; } } .c-footer__inside { margin: 0 auto; padding: 0 15px; display: grid; grid-template-rows: auto auto auto auto auto; grid-template-areas: "info" "navprimary" "navsecondary" "address" "subfooter"; grid-gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 46.25em) { .c-footer__inside { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "info address" "navprimary navsecondary" "subfooter subfooter"; padding: 0 15px; } } @media (min-width: 61.25em) { .c-footer__inside { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "info navprimary navsecondary address" "subfooter subfooter subfooter subfooter"; padding: 0 150px; } } @media (min-width: 81.25em) { .c-footer__inside { padding: 0 150px; } } @media (min-width: 140.625em) { .c-footer__inside { padding-left: 500px; padding-right: 500px; } } .c-footer__info { grid-area: info; } .c-footer__nav-primary { grid-area: navprimary; } .c-footer__nav-secondary { grid-area: navsecondary; } .c-footer__address { grid-area: address; } .c-footer__subfooter { grid-area: subfooter; border-top: 1px solid #ced4da; padding-top: 2rem; text-align: center; } .c-logo { max-width: 6.25rem; width: 100%; } @media (min-width: 46.25em) { .c-logo { max-width: 12.5rem; } } @media print { .c-logo { width: 200px; } } .c-logo__title { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } .c-footer-logo { margin-bottom: 2rem; } .c-meta-contact { display: none; } @media (min-width: 46.25em) { .c-meta-contact { display: flex; } } .c-meta-contact__item { border-left: 1px solid #eaeaea; padding: 0.5rem 1rem; } .c-meta-contact__item:first-child { border-left: none; } @media (min-width: 46.25em) { .c-meta-contact__item:last-child { padding-right: 0; } } .c-meta-contact__title { font-size: 0.875rem; line-height: 1.18; margin-bottom: 0.375rem; opacity: 0.7; } .c-meta-contact__content { font-size: 0.875rem; font-weight: 700; line-height: 1.18; margin-bottom: 0.375rem; } .c-navlang__list { display: inline; } .c-navlang__item { display: inline-block; padding: 0; margin: 0 0.3125rem; font-weight: 700; letter-spacing: 0.02rem; } .c-navlang__item:last-child { margin-right: 0; } .c-navlang__item:last-child .c-navlang__link, .c-navlang__item:last-child .c-navlang__active { padding-right: 0; } .c-navlang__link { display: block; padding: 0.3125rem 0; color: rgba(0, 0, 0, 0.3); transition: all 0.25s ease-in-out; position: relative; } .c-navlang__link:before { content: ""; position: absolute; height: 2px; background: rgba(0, 0, 0, 0.3); left: 0; right: 100%; bottom: 0; transition: all 0.25s ease-in-out; } .c-navlang__link:focus, .c-navlang__link:hover { color: rgba(0, 0, 0, 0.5); } .c-navlang__link:focus:before, .c-navlang__link:hover:before { right: 0; } .c-navlang__active { display: block; padding: 0.3125rem 0; color: rgba(0, 0, 0, 0.5); position: relative; } .c-navlang__active:before { content: ""; position: absolute; height: 2px; background: rgba(0, 0, 0, 0.5); left: 0; right: 0; bottom: 0; } .c-navmain__list { display: inline; } .c-navmain__item { display: inline-block; padding: 0 1rem; font-weight: 700; letter-spacing: 0.02rem; } .c-navmain__item:first-child { padding-left: 0; } .c-navmain__item:first-child .c-navmain__link, .c-navmain__item:first-child .c-navmain__active { padding-left: 0; } .c-navmain__link { display: block; padding: 1.25rem 0.5rem; color: rgba(255, 255, 255, 0.7); transition: all 0.25s ease-in-out; position: relative; } .c-navmain__link:before { content: ""; position: absolute; height: 3px; background: #fff; left: 0; right: 100%; bottom: 0; transition: all 0.25s ease-in-out; } .c-navmain__link:focus, .c-navmain__link:hover { color: white; } .c-navmain__link:focus:before, .c-navmain__link:hover:before { right: 0; } .c-navmain__active { display: block; padding: 1.25rem 0.5rem; color: white; position: relative; } .c-navmain__active:before { content: ""; position: absolute; height: 3px; background: #fff; left: 0; right: 0; bottom: 0; } .c-navmulti { height: 0; padding-top: 45px; position: relative; } @media only screen and (min-width: 768px) { .c-navmulti { width: 100%; text-align: left; height: 45px; z-index: 1000; padding: 0; } } .c-navmulti__subtoggle { display: none; } @media only screen and (min-width: 768px) { .c-navmulti__subtoggle { display: block; width: 100%; height: 45px; background: transparent; position: relative; z-index: 10; transition: 0s; margin-top: -45px; } } .c-navmulti__label { display: block; position: absolute; left: 10px; top: 15px; color: #fff; font-weight: 700; } @media only screen and (min-width: 768px) { .c-navmulti__label { display: none; } } .c-navmulti__toggle { display: block; width: 36px; height: 36px; background: #382d97; border-radius: 5px; position: absolute; right: 10px; top: 5px; cursor: pointer; } @media only screen and (min-width: 768px) { .c-navmulti__toggle { display: none; } } .c-navmulti__toggle:before { display: block; content: ""; width: 18px; height: 2px; background: #fff; position: absolute; left: 50%; top: 50%; margin-left: -9px; margin-top: -1px; transition: 0.25s; } .c-navmulti__toggle:after { display: block; content: ""; width: 2px; height: 18px; background: #fff; position: absolute; left: 50%; top: 50%; margin-left: -1px; margin-top: -9px; transition: 0.25s; } .c-navmulti__togglecheckbox { position: absolute; display: none; } .c-navmulti__togglecheckbox:checked ~ label:before { transform: rotate(360deg); } .c-navmulti__togglecheckbox:checked ~ label:after { transform: rotate(270deg); } .c-navmulti__togglecheckbox:checked ~ ul { max-height: 3000px; } .c-navmulti__item { display: block; float: none; position: relative; background: #fff; padding: 0 1rem; } @media only screen and (min-width: 768px) { .c-navmulti__item { background: transparent; margin: 0; padding: 0 1rem; font-weight: 700; letter-spacing: 0.02rem; list-style: none; display: inline-block; *display: inline; } .c-navmulti__item:first-child { padding-left: 0; } .c-navmulti__item:first-child .c-navmulti__link, .c-navmulti__item:first-child .c-navmulti__active { padding-left: 0; } .c-navmulti__item:hover > .c-navmulti__sublist { visibility: visible; right: auto; left: 1rem; top: 64px; opacity: 1; } .c-navmulti__item:hover > .c-navmulti__subtoggle { width: 0; } } .c-navmulti__sublabel { display: block; width: 36px; height: 36px; background: rgba(0, 0, 0, 0.03); border-radius: 5px; position: absolute; right: 10px; top: 5px; cursor: pointer; } @media only screen and (min-width: 768px) { .c-navmulti__sublabel { display: none; } } .c-navmulti__sublabel:before { display: block; content: ""; width: 18px; height: 2px; background: #382d97; position: absolute; left: 50%; top: 50%; margin-left: -9px; margin-top: -1px; transition: 0.25s; } .c-navmulti__sublabel:after { display: block; content: ""; width: 2px; height: 18px; background: #382d97; position: absolute; left: 50%; top: 50%; margin-left: -1px; margin-top: -9px; transition: 0.25s; } .c-navmulti__list { box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07); } @media only screen and (min-width: 768px) { .c-navmulti__list { box-shadow: none; } } .c-navmulti__list, .c-navmulti__sublist { border: 0; margin: 0; display: block; position: static; max-height: 0; overflow: hidden; transition: 0.25s; } @media only screen and (min-width: 768px) { .c-navmulti__list, .c-navmulti__sublist { padding: 0; max-height: unset; list-style: none; white-space: nowrap; text-align: left; overflow: unset; display: inline-block; transition: opacity 0.8s; *display: inline; } } .c-navmulti__sublist { background: #fff; } @media (min-width: 46.25em) { .c-navmulti__sublist { padding: 1.125rem 0 1.375rem; min-width: 15rem; } } .c-navmulti__sublist .c-navmulti__item { padding-left: 1rem; } @media only screen and (min-width: 768px) { .c-navmulti__sublist .c-navmulti__item { display: block; } } @media only screen and (min-width: 768px) { .c-navmulti__sublist { z-index: 5; position: absolute; opacity: 0; left: -9999px; border-bottom: 4px solid #312783; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07); } } .c-navmulti__link { display: block; padding: 1.25rem 0.5rem; color: rgba(49, 39, 131, 0.7); transition: all 0.25s ease-in-out; position: relative; } @media only screen and (min-width: 768px) { .c-navmulti__link { color: rgba(255, 255, 255, 0.7); padding: 1.25rem 0.5rem; } .c-navmulti__link:before { content: ""; position: absolute; height: 3px; background: #fff; left: 0; right: 100%; bottom: 0; transition: all 0.25s ease-in-out; } .c-navmulti__link:focus, .c-navmulti__link:hover { color: white; } .c-navmulti__link:focus:before, .c-navmulti__link:hover:before { right: 0; } } .c-navmulti__sublink { display: block; padding: 1.25rem 0.5rem; color: rgba(52, 58, 64, 0.7); transition: all 0.25s ease-in-out; font-weight: 400; position: relative; } @media only screen and (min-width: 768px) { .c-navmulti__sublink { padding: 0.625rem 1rem; } .c-navmulti__sublink:before { content: ""; position: absolute; height: 3px; background: #fff; left: 0; right: 100%; bottom: 0; transition: all 0.25s ease-in-out; } .c-navmulti__sublink:focus, .c-navmulti__sublink:hover { color: #312783; } .c-navmulti__sublink:focus:before, .c-navmulti__sublink:hover:before { right: 0; } } .c-navmulti__active { display: block; padding: 1.25rem 0.5rem; color: #312783; } @media (min-width: 46.25em) { .c-navmulti__active { position: relative; color: white; } .c-navmulti__active:before { content: ""; position: absolute; height: 3px; background: #fff; left: 0; right: 0; bottom: 0; } } .c-productdetail__content { display: grid; grid-template-columns: 3fr 1fr; grid-gap: 2rem; } .c-productheader { background-color: #95c11f; background-size: 110%; background-repeat: no-repeat; background-position: right center; position: relative; } .c-productheader:after { position: absolute; content: ""; left: 50%; z-index: 10; width: 189px; height: 182px; border-radius: 50%; background: inherit; transform: translateX(-50%) translateY(47%); bottom: 0px; border: 3px solid #fff; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07); } .c-productheader__title { font-size: 5rem; line-height: 1; color: #fff; } .c-productheader__subtitle { font-size: 1.25rem; color: #fff; font-weight: normal; } .c-productheader__printer { position: absolute; right: 0; bottom: 0; max-width: 500px; height: 200px; width: 200px; } .c-productlist { display: grid; grid-gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 46.25em) { .c-productlist { grid-template-columns: 1fr 1fr; } } @media (min-width: 118.75em) { .c-productlist { grid-template-columns: 1fr 1fr 1fr; } } .c-productlist-item { display: grid; grid-template-rows: auto 1fr auto auto; border: 1px solid #ced4da; position: relative; transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .c-productlist-item:after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07); opacity: 0; transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .c-productlist-item:hover { border-color: #ced4da; } .c-productlist-item:hover:after { opacity: 1; } .c-productlist-item__header { color: #95c11f; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; background-color: #f8f9fa; height: 60px; } .c-productlist-item__title { padding: 12px; font-size: 18px; font-size: 1rem; line-height: 1.3333333333; margin-bottom: 0; } .c-productlist-item__title-compact { color: #f39200; } .c-productlist-item__title-standard { color: #95c11f; } .c-productlist-item__title-special { color: #312783; } .c-productlist-item__attribute { position: relative; background-color: #d6e7f3; color: #008dbb; font-weight: 700; } .c-productlist-item__attribute--big { position: relative; background-color: #008dbb; color: #ffffff; } .c-productlist-item__attribute--big .c-productlist-item__attribute-title { text-transform: uppercase; padding-top: 6px; padding-bottom: 6px; font-size: 18px; font-size: 1rem; line-height: 1.3333333333; } .c-productlist-item__attribute-title { padding-left: 12px; display: block; font-size: 16px; font-size: 0.8888888889rem; line-height: 1.5; } .c-productlist-item__attribute-icon { position: absolute; display: block; right: 0; top: 0; width: 100%; height: 100%; text-align: right; } .c-productlist-item__attribute-icon svg { height: 100%; fill: #ffffff; } .c-productlist-item__attribute-icon .cls-1 { fill: #ffffff; } .c-productlist-item__text { background-color: #ced4da; padding: 12px 12px 0 12px; font-size: 18px; font-size: 1rem; line-height: 1.3333333333; } .c-productlist-item__text ul { margin-left: 2rem; margin-bottom: 0; } .c-productlist-item__read-more { text-align: right; font-size: 48px; background-color: #ced4da; padding-right: 12px; line-height: 1; } .c-productlist-item__read-more-link { color: #343a40; } .c-productlist-item__read-more-link:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: auto; content: ""; background-color: rgba(0, 0, 0, 0); } .c-productlist-item__read-more-link:hover, .c-productlist-item__read-more-link:focus { color: #95c11f; } .c-productlist-item__color { width: 100%; height: 40px; } .c-minisearch { position: relative; } .c-minisearch .formbody { display: flex; align-items: center; } .c-minisearch__keywords { width: 270px; border-radius: 0; border-top: 0 !important; border-right: 0 !important; border-bottom: 3px solid transparent !important; border-left: 0 !important; background: none !important; min-height: 64px; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; outline: none; padding: 3px 20px; height: 56px; color: #fff !important; transition: border 0.25s ease-in-out; } .c-minisearch__keywords::-webkit-input-placeholder { color: #fff; font-size: 0.9375rem; opacity: 1; -webkit-transition: opacity 0.25s ease-in-out !important; transition: opacity 0.25s ease-in-out !important; } .c-minisearch__keywords::-webkit-input-placeholder, .c-minisearch__keywords::-moz-placeholder, .c-minisearch__keywords:-ms-input-placeholder, .c-minisearch__keywords::placeholder { color: #fff; font-size: 0.9375rem; opacity: 1; -webkit-transition: opacity 0.25s ease-in-out !important; -moz-transition: opacity 0.25s ease-in-out !important; -ms-transition: opacity 0.25s ease-in-out !important; transition: opacity 0.25s ease-in-out !important; } .c-minisearch__keywords:focus { border-color: #ffffff !important; } .c-minisearch__keywords:focus::-webkit-input-placeholder { opacity: 0; } .c-minisearch__keywords:focus::-webkit-input-placeholder, .c-minisearch__keywords:focus::-moz-placeholder, .c-minisearch__keywords:focus:-ms-input-placeholder, .c-minisearch__keywords:focus::placeholder { opacity: 0; } .c-minisearch__submit { font-size: 18px; background: none; width: 24px; height: 24px; line-height: 50px; padding: 4px; border: 0; transition: all 0.25s ease-in-out; } .c-minisearch__submit:hover, .c-minisearch__submit:focus { padding: 0; } .c-tooltip { position: relative; text-decoration: none; display: block; } .c-tooltip:after { content: attr(data-tooltip); position: absolute; bottom: 130%; left: 5%; background: #95c11f; padding: 5px 15px; color: #f8f9fa; border-radius: 2px; white-space: nowrap; opacity: 0; transition: all 0.4s ease; } .c-tooltip:hover:after { bottom: 110%; } .c-tooltip:hover:before, .c-tooltip:hover:after { opacity: 1; } .tagify__tag > div > * { white-space: normal; word-break: normal; border-radius: 0; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .tagify__tag > div:before { box-shadow: none; background-color: #dee2e6; } .tagify__tag:hover:not([readonly]) div:before { box-shadow: none; background-color: #f8f9fa; } .tagify__tag__removeBtn:hover + div:before { box-shadow: none !important; background-color: #f1d8d5 !important; } .choices__placeholder { display: none; } .c-pdfHeader { display: none; grid-template-columns: 1fr 1fr; grid-gap: 30px 30px; align-items: center; margin-top: 15mm; margin-bottom: 5mm; } .c-pdfHeader .c-pdfHeader__subheadline { font-size: 16px; font-size: 0.8888888889rem; line-height: 1.5; text-transform: uppercase; margin-bottom: 0; page-break-before: always; } .c-pdfHeader__column--justify-right { display: flex; justify-content: flex-end; } @media print { .c-pdfHeader { display: grid; } } .c-pdfHeader .c-logo { width: 50mm; max-width: none; } .c-pdfSidebarNotes { display: block; } .c-pdfSidebarNotes .c-text { margin-bottom: 2rem; } .c-pdfSidebarNotes .c-logo { width: 100px; margin-bottom: 2rem; } .c-pdfFooter { display: none; grid-template-columns: 1fr 1fr; grid-gap: 30px 30px; border-top: 1px solid #3c3c3b; font-size: 9px; line-height: 1.2; } @media print { .c-pdfFooter { display: grid; } } .c-durability__item { margin-bottom: 1rem; } @media print { .c-durability__item { height: 26px; margin-bottom: 0; } } @media print { .c-durability__item--smudge_proof { padding-top: 10.5px; height: 34px; } } @media print { .c-durability__item--printspeed { height: 34px; } } .c-durability__item:last-child:not(.c-durability__item--temp) { margin-bottom: 0; } @media print { .c-durability .c-product-detail__attribute-block { font-size: 11px; line-height: 1.25; height: 26px; } } .c-durability__legend { display: none; } @media print { .c-durability__legend { display: block; grid-column-end: span 2; margin-left: 81px; font-size: 11px; line-height: 1; } } .c-productlistExport { margin-top: 96px; } .c-productlistExport__messageBox { border: 1px solid #ced4da; background-color: #f8f9fa; padding: 24px; display: none; } .c-searchResults { margin-top: 96px; } .c-searchResults .formbody { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 30px 0; } .c-searchResults .widget-text { width: 100%; } .c-searchResults .widget-text label { display: none; } .c-searchResults .widget-submit { width: 100%; } .c-searchResults .text { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; width: 100%; margin: 0; padding: 0.6rem; background: #ffffff; border: 1px solid #95c11f; border-right-width: 0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); border-radius: 0; outline: none; resize: vertical; transition: border-color 0.3s ease; color: #3c3c3b; font-family: inherit; font-size: 100%; line-height: 1.15; } .c-searchResults .text[disabled] { border-color: #a6d723; background-color: #f2f2f2; box-shadow: none; cursor: not-allowed; color: #494948; } .c-searchResults .text:focus { border-color: #b9e24a; } .c-searchResults .text::-webkit-input-placeholder { color: #6c757d; opacity: 1; } .c-searchResults .text::-moz-placeholder { color: #6c757d; opacity: 1; } .c-searchResults .text:-ms-input-placeholder { color: #6c757d; opacity: 1; } .c-searchResults .text::-ms-input-placeholder { color: #6c757d; opacity: 1; } .c-searchResults .text::placeholder { color: #6c757d; opacity: 1; } .c-searchResults .text:-ms-input-placeholder { color: #6c757d; } .c-searchResults .text::-ms-input-placeholder { color: #6c757d; } .c-searchResults .submit { display: inline-block; padding: 0.6rem; border: 0 solid transparent; font-size: 1rem; line-height: 1.15; text-align: center; transition-duration: 0.4s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; transition-property: background-color, color, border-color; background-color: #f39200; border-color: #95c11f; border-radius: 0; color: #ffffff; border-width: 1px; width: 100%; border-left-width: 0; } .c-searchResults .submit:not(:disabled):not([aria-disabled=true]) { cursor: pointer; } .c-searchResults .submit:hover, .c-searchResults .submit:focus { text-decoration: none; } .c-searchResults .submit:disabled, .c-searchResults .submit[aria-disabled=true] { box-shadow: none; } .c-searchResults .submit:hover { background-color: #b9e24a; border-color: #a0cf21; color: #3c3c3b; } .c-searchResults .submit:focus { outline: 2px dotted #f39200; outline-offset: 1px; } .c-searchResults .submit:disabled, .c-searchResults .submit[aria-disabled=true] { background-color: #f39200; border-color: #f39200; color: #ffffff; opacity: 0.5; } .c-searchResults .pagination ul { list-style-type: none; margin-left: 0; display: flex; } .c-searchResults .pagination li { margin-right: 12px; } .c-searchResults .pagination li:last-child { margin-right: 0; } .c-searchResults .pagination li > * { display: inline-block; padding: 10px 20px; border: 0 solid transparent; font-size: 1rem; line-height: 1.5; text-align: center; transition-duration: 0.4s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; transition-property: background-color, color, border-color; background-color: #95c11f; border-color: #95c11f; border-radius: 0; color: #3c3c3b; } .c-searchResults .pagination li > *:not(:disabled):not([aria-disabled=true]) { cursor: pointer; } .c-searchResults .pagination li > *:hover, .c-searchResults .pagination li > *:focus { text-decoration: none; } .c-searchResults .pagination li > *:disabled, .c-searchResults .pagination li > *[aria-disabled=true] { box-shadow: none; } .c-searchResults .pagination li > *:hover { background-color: #b9e24a; border-color: #b9e24a; color: #3c3c3b; } .c-searchResults .pagination li > *:focus { outline: 2px dotted #95c11f; outline-offset: 1px; } .c-searchResults .pagination li > *:disabled, .c-searchResults .pagination li > *[aria-disabled=true] { background-color: #95c11f; border-color: #95c11f; color: #3c3c3b; opacity: 0.5; } /* ========================================================================== #WIDTHS ========================================================================== */ /** * inuitcss generates a series of utility classes that give a fluid width to * whichever element they’re applied, e.g.: * *
* * These classes are most commonly used in conjunction with our layout system, * e.g.: * *
* * By default, inuitcss will also generate responsive variants of each of these * classes by using your Sass MQ configuration, e.g.: * ** * Optionally, inuitcss can generate offset classes which can push and pull * elements left and right by a specified amount, e.g.: * ** * This is useful for making very granular changes to the rendered order of * items in a layout. * * N.B. This option is turned off by default. */ /** * A series of width helper classes that you can use to size things like grid * systems. Classes take a fraction-like format (e.g. `.u-2/3`). Use these in * your markup: * ** * The following will generate widths helper classes based on the fractions * defined in the `$inuit-fractions` list. */ .u-1\/1 { width: 100% !important; } .u-1\/2 { width: 50% !important; } .u-2\/2 { width: 100% !important; } .u-1\/3 { width: 33.3333333333% !important; } .u-2\/3 { width: 66.6666666667% !important; } .u-3\/3 { width: 100% !important; } .u-1\/4 { width: 25% !important; } .u-2\/4 { width: 50% !important; } .u-3\/4 { width: 75% !important; } .u-4\/4 { width: 100% !important; } .u-1\/5 { width: 20% !important; } .u-2\/5 { width: 40% !important; } .u-3\/5 { width: 60% !important; } .u-4\/5 { width: 80% !important; } .u-5\/5 { width: 100% !important; } /** * If we’re using Sass-MQ, automatically generate grid system(s) for each of our * defined breakpoints, and give them a Responsive Suffix, e.g.: * **/ @media (min-width: 20em) { .u-1\/1\@mobile { width: 100% !important; } .u-1\/2\@mobile { width: 50% !important; } .u-2\/2\@mobile { width: 100% !important; } .u-1\/3\@mobile { width: 33.3333333333% !important; } .u-2\/3\@mobile { width: 66.6666666667% !important; } .u-3\/3\@mobile { width: 100% !important; } .u-1\/4\@mobile { width: 25% !important; } .u-2\/4\@mobile { width: 50% !important; } .u-3\/4\@mobile { width: 75% !important; } .u-4\/4\@mobile { width: 100% !important; } .u-1\/5\@mobile { width: 20% !important; } .u-2\/5\@mobile { width: 40% !important; } .u-3\/5\@mobile { width: 60% !important; } .u-4\/5\@mobile { width: 80% !important; } .u-5\/5\@mobile { width: 100% !important; } } @media (min-width: 46.25em) { .u-1\/1\@tablet { width: 100% !important; } .u-1\/2\@tablet { width: 50% !important; } .u-2\/2\@tablet { width: 100% !important; } .u-1\/3\@tablet { width: 33.3333333333% !important; } .u-2\/3\@tablet { width: 66.6666666667% !important; } .u-3\/3\@tablet { width: 100% !important; } .u-1\/4\@tablet { width: 25% !important; } .u-2\/4\@tablet { width: 50% !important; } .u-3\/4\@tablet { width: 75% !important; } .u-4\/4\@tablet { width: 100% !important; } .u-1\/5\@tablet { width: 20% !important; } .u-2\/5\@tablet { width: 40% !important; } .u-3\/5\@tablet { width: 60% !important; } .u-4\/5\@tablet { width: 80% !important; } .u-5\/5\@tablet { width: 100% !important; } } @media (min-width: 61.25em) { .u-1\/1\@desktop { width: 100% !important; } .u-1\/2\@desktop { width: 50% !important; } .u-2\/2\@desktop { width: 100% !important; } .u-1\/3\@desktop { width: 33.3333333333% !important; } .u-2\/3\@desktop { width: 66.6666666667% !important; } .u-3\/3\@desktop { width: 100% !important; } .u-1\/4\@desktop { width: 25% !important; } .u-2\/4\@desktop { width: 50% !important; } .u-3\/4\@desktop { width: 75% !important; } .u-4\/4\@desktop { width: 100% !important; } .u-1\/5\@desktop { width: 20% !important; } .u-2\/5\@desktop { width: 40% !important; } .u-3\/5\@desktop { width: 60% !important; } .u-4\/5\@desktop { width: 80% !important; } .u-5\/5\@desktop { width: 100% !important; } } @media (min-width: 81.25em) { .u-1\/1\@wide { width: 100% !important; } .u-1\/2\@wide { width: 50% !important; } .u-2\/2\@wide { width: 100% !important; } .u-1\/3\@wide { width: 33.3333333333% !important; } .u-2\/3\@wide { width: 66.6666666667% !important; } .u-3\/3\@wide { width: 100% !important; } .u-1\/4\@wide { width: 25% !important; } .u-2\/4\@wide { width: 50% !important; } .u-3\/4\@wide { width: 75% !important; } .u-4\/4\@wide { width: 100% !important; } .u-1\/5\@wide { width: 20% !important; } .u-2\/5\@wide { width: 40% !important; } .u-3\/5\@wide { width: 60% !important; } .u-4\/5\@wide { width: 80% !important; } .u-5\/5\@wide { width: 100% !important; } } @media (min-width: 118.75em) { .u-1\/1\@fullHd { width: 100% !important; } .u-1\/2\@fullHd { width: 50% !important; } .u-2\/2\@fullHd { width: 100% !important; } .u-1\/3\@fullHd { width: 33.3333333333% !important; } .u-2\/3\@fullHd { width: 66.6666666667% !important; } .u-3\/3\@fullHd { width: 100% !important; } .u-1\/4\@fullHd { width: 25% !important; } .u-2\/4\@fullHd { width: 50% !important; } .u-3\/4\@fullHd { width: 75% !important; } .u-4\/4\@fullHd { width: 100% !important; } .u-1\/5\@fullHd { width: 20% !important; } .u-2\/5\@fullHd { width: 40% !important; } .u-3\/5\@fullHd { width: 60% !important; } .u-4\/5\@fullHd { width: 80% !important; } .u-5\/5\@fullHd { width: 100% !important; } } @media (min-width: 140.625em) { .u-1\/1\@ultra { width: 100% !important; } .u-1\/2\@ultra { width: 50% !important; } .u-2\/2\@ultra { width: 100% !important; } .u-1\/3\@ultra { width: 33.3333333333% !important; } .u-2\/3\@ultra { width: 66.6666666667% !important; } .u-3\/3\@ultra { width: 100% !important; } .u-1\/4\@ultra { width: 25% !important; } .u-2\/4\@ultra { width: 50% !important; } .u-3\/4\@ultra { width: 75% !important; } .u-4\/4\@ultra { width: 100% !important; } .u-1\/5\@ultra { width: 20% !important; } .u-2\/5\@ultra { width: 40% !important; } .u-3\/5\@ultra { width: 60% !important; } .u-4\/5\@ultra { width: 80% !important; } .u-5\/5\@ultra { width: 100% !important; } } /* ========================================================================== #SPACINGS ========================================================================== */ /** * Utility classes to put specific spacing values onto elements. The below loop * will generate us a suite of classes like: * * .u-margin-top {} * .u-padding-left-large {} * .u-margin-right-small {} * .u-padding {} * .u-padding-right-none {} * .u-padding-horizontal {} * .u-padding-vertical-small {} */ .u-padding { padding: 24px !important; } .u-padding-tiny { padding: 6px !important; } .u-padding-small { padding: 12px !important; } .u-padding-large { padding: 48px !important; } .u-padding-huge { padding: 96px !important; } .u-padding-none { padding: 0 !important; } .u-padding-top { padding-top: 24px !important; } .u-padding-top-tiny { padding-top: 6px !important; } .u-padding-top-small { padding-top: 12px !important; } .u-padding-top-large { padding-top: 48px !important; } .u-padding-top-huge { padding-top: 96px !important; } .u-padding-top-none { padding-top: 0 !important; } .u-padding-right { padding-right: 24px !important; } .u-padding-right-tiny { padding-right: 6px !important; } .u-padding-right-small { padding-right: 12px !important; } .u-padding-right-large { padding-right: 48px !important; } .u-padding-right-huge { padding-right: 96px !important; } .u-padding-right-none { padding-right: 0 !important; } .u-padding-bottom { padding-bottom: 24px !important; } .u-padding-bottom-tiny { padding-bottom: 6px !important; } .u-padding-bottom-small { padding-bottom: 12px !important; } .u-padding-bottom-large { padding-bottom: 48px !important; } .u-padding-bottom-huge { padding-bottom: 96px !important; } .u-padding-bottom-none { padding-bottom: 0 !important; } .u-padding-left { padding-left: 24px !important; } .u-padding-left-tiny { padding-left: 6px !important; } .u-padding-left-small { padding-left: 12px !important; } .u-padding-left-large { padding-left: 48px !important; } .u-padding-left-huge { padding-left: 96px !important; } .u-padding-left-none { padding-left: 0 !important; } .u-padding-horizontal { padding-left: 24px !important; padding-right: 24px !important; } .u-padding-horizontal-tiny { padding-left: 6px !important; padding-right: 6px !important; } .u-padding-horizontal-small { padding-left: 12px !important; padding-right: 12px !important; } .u-padding-horizontal-large { padding-left: 48px !important; padding-right: 48px !important; } .u-padding-horizontal-huge { padding-left: 96px !important; padding-right: 96px !important; } .u-padding-horizontal-none { padding-left: 0 !important; padding-right: 0 !important; } .u-padding-vertical { padding-top: 24px !important; padding-bottom: 24px !important; } .u-padding-vertical-tiny { padding-top: 6px !important; padding-bottom: 6px !important; } .u-padding-vertical-small { padding-top: 12px !important; padding-bottom: 12px !important; } .u-padding-vertical-large { padding-top: 48px !important; padding-bottom: 48px !important; } .u-padding-vertical-huge { padding-top: 96px !important; padding-bottom: 96px !important; } .u-padding-vertical-none { padding-top: 0 !important; padding-bottom: 0 !important; } .u-margin { margin: 24px !important; } .u-margin-tiny { margin: 6px !important; } .u-margin-small { margin: 12px !important; } .u-margin-large { margin: 48px !important; } .u-margin-huge { margin: 96px !important; } .u-margin-none { margin: 0 !important; } .u-margin-top { margin-top: 24px !important; } .u-margin-top-tiny { margin-top: 6px !important; } .u-margin-top-small { margin-top: 12px !important; } .u-margin-top-large { margin-top: 48px !important; } .u-margin-top-huge { margin-top: 96px !important; } .u-margin-top-none { margin-top: 0 !important; } .u-margin-right { margin-right: 24px !important; } .u-margin-right-tiny { margin-right: 6px !important; } .u-margin-right-small { margin-right: 12px !important; } .u-margin-right-large { margin-right: 48px !important; } .u-margin-right-huge { margin-right: 96px !important; } .u-margin-right-none { margin-right: 0 !important; } .u-margin-bottom { margin-bottom: 24px !important; } .u-margin-bottom-tiny { margin-bottom: 6px !important; } .u-margin-bottom-small { margin-bottom: 12px !important; } .u-margin-bottom-large { margin-bottom: 48px !important; } .u-margin-bottom-huge { margin-bottom: 96px !important; } .u-margin-bottom-none { margin-bottom: 0 !important; } .u-margin-left { margin-left: 24px !important; } .u-margin-left-tiny { margin-left: 6px !important; } .u-margin-left-small { margin-left: 12px !important; } .u-margin-left-large { margin-left: 48px !important; } .u-margin-left-huge { margin-left: 96px !important; } .u-margin-left-none { margin-left: 0 !important; } .u-margin-horizontal { margin-left: 24px !important; margin-right: 24px !important; } .u-margin-horizontal-tiny { margin-left: 6px !important; margin-right: 6px !important; } .u-margin-horizontal-small { margin-left: 12px !important; margin-right: 12px !important; } .u-margin-horizontal-large { margin-left: 48px !important; margin-right: 48px !important; } .u-margin-horizontal-huge { margin-left: 96px !important; margin-right: 96px !important; } .u-margin-horizontal-none { margin-left: 0 !important; margin-right: 0 !important; } .u-margin-vertical { margin-top: 24px !important; margin-bottom: 24px !important; } .u-margin-vertical-tiny { margin-top: 6px !important; margin-bottom: 6px !important; } .u-margin-vertical-small { margin-top: 12px !important; margin-bottom: 12px !important; } .u-margin-vertical-large { margin-top: 48px !important; margin-bottom: 48px !important; } .u-margin-vertical-huge { margin-top: 96px !important; margin-bottom: 96px !important; } .u-margin-vertical-none { margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================================== #RESPONSIVE-SPACINGS ========================================================================== */ /** * Utility classes enhancing the normal spacing classes by adding responsiveness * to them. By default, there are not responsive spacings defined. You can * generate responsive spacings by adding entries to the following three Sass * maps, e.g.: * * $inuit-responsive-spacing-directions: ( * null: null, * bottom: bottom, * ); * * $inuit-responsive-spacing-properties: ( * "margin": "margin", * ); * * $inuit-responsive-spacing-sizes: ( * "-small": $inuit-global-spacing-unit-small, * ); * * This would bring us the following classes: * * .u-margin-small@mobile {} * .u-margin-small@tablet {} * .u-margin-small@desktop {} * .u-margin-small@wide {} * .u-margin-bottom-small@mobile {} * .u-margin-bottom-small@tablet {} * .u-margin-bottom-small@desktop {} * .u-margin-bottom-small@wide {} * * You can change the generated CSS classes by further extending the Sass maps. * If you want every ‘normal’ spacing (those from `utilities.spacings`) also as * a responsive version, you can just mirror the ‘normal’ spacings: * * $inuit-responsive-spacing-directions: $inuit-spacing-directions !default; * * $inuit-responsive-spacing-properties: $inuit-spacing-properties !default; * * $inuit-responsive-spacing-sizes: $inuit-spacing-sizes !default; * * BUT BE AWARE: This can generate a huge chunk of extra CSS, depending on the * amount of breakpoints you defined. So please check your CSS’ output and * filesize! */ /* stylelint-disable max-nesting-depth */ /* stylelint-enable max-nesting-depth */ /* ========================================================================== #HIDE ========================================================================== */ /** * Hide only visually, but have it available for screen readers: * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .u-hidden-visually { border: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } /** * Hide visually and from screen readers. */ .u-hidden { display: none !important; } .u-text-color-primary { color: #95c11f; } .u-text-color-secondary { color: #312783; } .u-text-color-white { color: #ffffff; } .u-text-color-black { color: #3c3c3b; } .u-text-color-gray-light { color: #ced4da; } .u-text-color-gray { color: #6c757d; } .u-text-color-gray-dark { color: #495057; } .u-bg-color-primary { background-color: #95c11f; } .u-bg-color-secondary { background-color: #312783; } .u-bg-color-white { background-color: #ffffff; } .u-bg-color-black { background-color: #3c3c3b; } .u-bg-color-gray-light { background-color: #ced4da; } .u-bg-color-gray { background-color: #6c757d; } .u-bg-color-gray-dark { background-color: #495057; } .u-border-color-primary { border-color: #95c11f; } .u-border-color-secondary { border-color: #312783; } .u-border-color-white { border-color: #ffffff; } .u-border-color-black { border-color: #3c3c3b; } .u-border-color-gray-light { border-color: #ced4da; } .u-border-color-gray { border-color: #6c757d; } .u-border-color-gray-dark { border-color: #495057; } .u-bg-gradient-primary { background: linear-gradient(45deg, #627f14, #b9e24a); } .u-bg-gradient-secondary { background: linear-gradient(45deg, #1b1548, #4739be); } .u-bg-gradient-gray { background: linear-gradient(45deg, #495057, #ced4da); } .u-color-block-flat-head { background-color: #008dbb; color: #ffffff; } .u-color-scheme-flat-head .u-color-block-wachs { background-color: #d6e7f3; color: #008dbb; } .u-color-scheme-flat-head .u-color-block-wachs_2 { background-color: #afd0e7; color: #008dbb; } .u-color-scheme-flat-head .u-color-block-harz { background-color: #008dbb; color: #ffffff; } .u-color-scheme-flat-head .u-color-block-wachs-harz { background-color: #87b9dc; color: #ffffff; } .u-color-block-near-edge { background-color: #b64147; color: #ffffff; } .u-color-scheme-near-edge .u-color-block-wachs { background-color: #f1d8d5; color: #b64147; } .u-color-scheme-near-edge .u-color-block-harz { background-color: #b64147; color: #ffffff; } .u-color-scheme-near-edge .u-color-block-wachs-harz { background-color: #d89189; color: #ffffff; } .u-color-info { color: #f39200; } .u-color-success { color: #95c11f; } .u-color-error { color: #b64147; } .u-color--primary { --c: #95c11f; --c-hover: shade(#95c11f, 30%); color: #95c11f; } .u-color--primary-shadow { --c: #84ab1b; --c-hover: shade(#84ab1b, 30%); color: #84ab1b; } .u-color--primary-highlight { --c: #b9e24a; --c-hover: shade(#b9e24a, 30%); color: #b9e24a; } .u-color--subbrand { --c: #312783; --c-hover: shade(#312783, 30%); color: #312783; } .u-color--subbrand-shadow { --c: #1b1548; --c-hover: shade(#1b1548, 30%); color: #1b1548; } .u-color--subbrand-highlight { --c: #4739be; --c-hover: shade(#4739be, 30%); color: #4739be; } .u-color--secondary { --c: #312783; --c-hover: shade(#312783, 30%); color: #312783; } .u-color--gray-lightest { --c: #f8f9fa; --c-hover: shade(#f8f9fa, 30%); color: #f8f9fa; } .u-color--gray-lighter { --c: #dee2e6; --c-hover: shade(#dee2e6, 30%); color: #dee2e6; } .u-color--gray-light { --c: #6c757d; --c-hover: shade(#6c757d, 30%); color: #6c757d; } .u-color--gray { --c: #6c757d; --c-hover: shade(#6c757d, 30%); color: #6c757d; } .u-color--gray-dark { --c: #495057; --c-hover: shade(#495057, 30%); color: #495057; } .u-color--black { --c: #343a40; --c-hover: shade(#343a40, 30%); color: #343a40; } .u-color--white { --c: #ffffff; --c-hover: shade(#ffffff, 30%); color: #ffffff; } .invisible, .u-hidden-visually, .u-hide { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .u-m-4 { margin: 16px; } .u-m-xs { margin: 6px; } .u-m-sm { margin: 12px; } .u-m-md { margin: 24px; } .u-m-lg { margin: 48px; } .u-m-xl { margin: 96px; } .u-m-x-4 { margin-right: 16px; margin-left: 16px; } .u-m-x-xs { margin-right: 6px; margin-left: 6px; } .u-m-x-sm { margin-right: 12px; margin-left: 12px; } .u-m-x-md { margin-right: 24px; margin-left: 24px; } .u-m-x-lg { margin-right: 48px; margin-left: 48px; } .u-m-x-xl { margin-right: 96px; margin-left: 96px; } .u-m-y-4 { margin-top: 16px; margin-bottom: 16px; } .u-m-y-xs { margin-top: 6px; margin-bottom: 6px; } .u-m-y-sm { margin-top: 12px; margin-bottom: 12px; } .u-m-y-md { margin-top: 24px; margin-bottom: 24px; } .u-m-y-lg { margin-top: 48px; margin-bottom: 48px; } .u-m-y-xl { margin-top: 96px; margin-bottom: 96px; } .u-mb-4 { margin-bottom: 16px; } .u-mb-xs { margin-bottom: 6px; } .u-mb-sm { margin-bottom: 12px; } .u-mb-md { margin-bottom: 24px; } .u-mb-lg { margin-bottom: 48px; } .u-mb-xl { margin-bottom: 96px; } .u-mt-4 { margin-top: 16px; } .u-mt-xs { margin-top: 6px; } .u-mt-sm { margin-top: 12px; } .u-mt-md { margin-top: 24px; } .u-mt-lg { margin-top: 48px; } .u-mt-xl { margin-top: 96px; } .u-ml-4 { margin-left: 16px; } .u-ml-xs { margin-left: 6px; } .u-ml-sm { margin-left: 12px; } .u-ml-md { margin-left: 24px; } .u-ml-lg { margin-left: 48px; } .u-ml-xl { margin-left: 96px; } .u-mr-4 { margin-right: 16px; } .u-mr-xs { margin-right: 6px; } .u-mr-sm { margin-right: 12px; } .u-mr-md { margin-right: 24px; } .u-mr-lg { margin-right: 48px; } .u-mr-xl { margin-right: 96px; } .u-p-4 { padding: 16px; } .u-p-xs { padding: 6px; } .u-p-sm { padding: 12px; } .u-p-md { padding: 24px; } .u-p-lg { padding: 48px; } .u-p-xl { padding: 96px; } .u-p-x-4 { padding-right: 16px; padding-left: 16px; } .u-p-x-xs { padding-right: 6px; padding-left: 6px; } .u-p-x-sm { padding-right: 12px; padding-left: 12px; } .u-p-x-md { padding-right: 24px; padding-left: 24px; } .u-p-x-lg { padding-right: 48px; padding-left: 48px; } .u-p-x-xl { padding-right: 96px; padding-left: 96px; } .u-p-y-4 { padding-top: 16px; padding-bottom: 16px; } .u-p-y-xs { padding-top: 6px; padding-bottom: 6px; } .u-p-y-sm { padding-top: 12px; padding-bottom: 12px; } .u-p-y-md { padding-top: 24px; padding-bottom: 24px; } .u-p-y-lg { padding-top: 48px; padding-bottom: 48px; } .u-p-y-xl { padding-top: 96px; padding-bottom: 96px; } .u-pb-4 { padding-bottom: 16px; } .u-pb-xs { padding-bottom: 6px; } .u-pb-sm { padding-bottom: 12px; } .u-pb-md { padding-bottom: 24px; } .u-pb-lg { padding-bottom: 48px; } .u-pb-xl { padding-bottom: 96px; } .u-pt-4 { padding-top: 16px; } .u-pt-xs { padding-top: 6px; } .u-pt-sm { padding-top: 12px; } .u-pt-md { padding-top: 24px; } .u-pt-lg { padding-top: 48px; } .u-pt-xl { padding-top: 96px; } .u-pl-4 { padding-left: 16px; } .u-pl-xs { padding-left: 6px; } .u-pl-sm { padding-left: 12px; } .u-pl-md { padding-left: 24px; } .u-pl-lg { padding-left: 48px; } .u-pl-xl { padding-left: 96px; } .u-pr-4 { padding-right: 16px; } .u-pr-xs { padding-right: 6px; } .u-pr-sm { padding-right: 12px; } .u-pr-md { padding-right: 24px; } .u-pr-lg { padding-right: 48px; } .u-pr-xl { padding-right: 96px; } .u-page-break { display: none; page-break-after: always; } @media print { .u-page-break { display: block; } } /* ========================================================================== #HEADINGS ========================================================================== */ /** * Redefine all of our basic heading styles against utility classes so as to * allow for double stranded heading hierarchy, e.g. we semantically need an H2, * but we want it to be sized like an H1: * * * */ .u-h1 { font-size: 48px !important; font-size: 2.6666666667rem !important; line-height: 1.125 !important; } .u-h2 { font-size: 40px !important; font-size: 2.2222222222rem !important; line-height: 1.2 !important; } .u-h3 { font-size: 28px !important; font-size: 1.5555555556rem !important; line-height: 1.2857142857 !important; } .u-h4 { font-size: 24px !important; font-size: 1.3333333333rem !important; line-height: 1.25 !important; } .u-h5 { font-size: 22px !important; font-size: 1.2222222222rem !important; line-height: 1.3636363636 !important; } .u-h6 { font-size: 18px !important; font-size: 1rem !important; line-height: 1.3333333333 !important; } .ce_catalogFilterForm .fields_container { display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .ce_catalogFilterForm .description { font-size: 0.875rem; }