File: D:/HostingSpaces/SBogers10/stafa.komma.pro/wwwroot/css/style.css
@charset "UTF-8";
/* 1 - SETTINGS
* Global variables, site-wide settings,
* config switches etc.
*
* The order in which these Sass files
* are loaded is critical!
* So please be careful when editing
=========================================================== */
/* ==========================================================================
Config settings
========================================================================== */
/* ============================================
Define breakpoints for given formats
============================================ */
/* =========================================================
Organize color variables in a Sass Map.
This way, the colors can be iterated, are more organized,
and are more intuitive to reference.
========================================================= */
/** =====================================================================================
* Defines the typographic baseline.
* We define every size in pixels, the underlying system converts the
* respective units to the responsive REM value.
===================================================================================== */
/**
* Our base font-size and line-height
*/
/**
* Here we assign short names for the font families
*/
/* 2 - TOOLS
* Site wide mixins and functions
=========================================================== */
/* ==========================================================================
Functions used in grid calculation
========================================================================== */
/**
* Return percentage based on amount of columns
* Use parent column size to adjust the origin
*/
/**
* Default function for columns
* Return as percentage
*/
/**
* Return as viewport width
*/
/* ==========================================================================
* Font related functions
* ========================================================================== */
/**
* Mixin for setting font-size in REM through a Sass Map with all available sizes
USAGE:
.myClass {
@include font-size(xl);
}
*/
/**
* Mixin for setting font-weight through a Sass Map with all available weights
USAGE:
.myClass {
@include font-weight(semi-bold);
}
.myClass {
@include font-weight(700);
}
*/
/**
* A simple function for accessing the font families from our mapping
USAGE:
span {
@include font-family(primary);
}
*/
/* Media query mixin for writing Mobile First
* ========================================== */
/** =====================================================================================
* Toolbox functions
===================================================================================== */
/**
* Maths helpers.
* Halve and double numbers, returning rounded integers.
USAGE:
.foo {
padding: halve(30px);
}
*/
/**
* Remove the unit of a length
* @param {Number} $number - Number to remove unit from
* @return {Number} - Unitless number
*/
/* Check if value is number */
/* Value to Em */
/* Value to Rem */
/**
* A simple function for accessing the colors from our mapping
* To access colors in our palette, we use a very simple custom Sass function
USAGE:
a {
color: palette(primary);
&:hover {
color: palette(primary, 400);
}
}
*/
/*
* Set vertical spacing only for mobile viewport
USAGE:
.example {
@include vspacing-s(
'margin-top' 1
);
}
*/
/*
* From values given return the correct v-spacing for each breakpoint
*/
/**
* A simple function for setting a consistent box-shadow
USAGE:
.card {
@include box-shadow;
}
.card--alt {
@include box-shadow(low);
}
*/
/**
* A simple function for setting a consistent border-radius
USAGE:
.card {
@include border-radius;
}
.card--alt {
@include border-radius(l);
}
*/
/**
* Lobotomized Owl Selector mixin:
* - Set spacing for consecutive items with margin-top on all but the first item
USAGE:
.box {
@include owl-children;
}
.card__item {
@include owl;
}
*/
/**
* Show hyphens for every browser supporting it
* and will break lines in every other browser
*/
/*
* Restrict an element to a max-width for creating gutters on the side
*/
/** =================================================================================================
* The 'z-index-map' is used for managing the elements stacking order in the 'root' stacking context
* This way we have a overview of all the z-index values that are used across the project.
==================================================================================================== */
/**
USAGE:
@include z(z-modal);
*/
/* 3 - ELEMENTS
* Plain old simple HTML elements without a class (type selectors)
=========================================================== */
/* ==========================================================================
* Basic elements (no class selectors allowed)
* ========================================================================== */
/**
* Set up the html
*
* 1. Makes sure that some fonts are better rendered
* 2. Set font to lining figures
*/
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "lnum";
box-sizing: border-box;
height: 100%;
}
body {
font-size: 1.125rem;
line-height: 1.5555555556;
font-family: "Barlow", sans-serif;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
color: #616366;
}
/**
* [1] Make sure elements like input and textarea inherit some base properties
* https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/
*
* [2] Setting box-sizing the best way per:
* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/
* {
font-family: inherit;
line-height: inherit;
color: inherit;
}
*, *:before, *:after {
box-sizing: inherit;
}
/**
* [1] Turn off text-shadow when selecting text for better readability
*/
::-moz-selection {
background: #DCA669;
color: white;
text-shadow: none;
/* [1] */
}
::selection {
background: #DCA669;
color: white;
text-shadow: none;
/* [1] */
}
/* Remove default margin around figure
*/
figure {
margin: 0;
}
/**
* [1] Setting 'vertical-align' removes the whitespace that appears under 'img'
* elements when they are dropped into a page as-is. Safer alternative to
* using 'display: block;'.
* [2] Remove border / especially on older browsers
*/
img, svg {
vertical-align: middle;
/*[1]*/
border: none;
/*[2]*/
max-width: 100%;
}
/**
* Still add display block to svg and picture to prevent unwanted spacing or collapsing
*/
svg, picture {
display: block;
}
/**
* Needed for iOS to prevent input zooming
* https://uxcellence.com/2014/01/15/quick-fix-increase-font-size-to-16px-to-fix-input-zoom
*/
input,
select,
textarea {
font-size: 16px;
}
a {
color: #72A3F5;
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
}
a:not([class]):hover {
color: #2f77f0;
}
h1, h2, h3, h4, h5, h6, hgroup,
ul, ol, dd,
p, figure,
pre, table, fieldset, hr {
margin-top: 0;
margin-bottom: 0;
}
h1, .h1 {
font-size: 3rem;
line-height: 1.1666666667;
}
h2, .h2 {
font-size: 2rem;
line-height: 1.25;
}
h3, .h3 {
font-size: 1.5rem;
line-height: 1.3333333333;
}
h4, .h4 {
font-size: 1.125rem;
line-height: 1.5555555556;
}
h5, h6 {
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
}
/** =====================================================================================
* Lists
===================================================================================== */
/**
* Default indentation value for lists
*/
ul,
ol {
padding: 0;
margin: 0;
margin-left: 1.125em;
}
dd {
margin-left: 0;
}
/**
* Remove extra vertical spacing when nesting lists.
*/
li > ul,
li > ol {
margin-bottom: 0;
}
/* titillium-web-regular - latin */
@font-face {
font-family: "Titillium Web";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/titillium-web-v10-latin-regular.eot");
/* IE9 Compat Modes */
src: local(""), url("/fonts/titillium-web-v10-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/titillium-web-v10-latin-regular.woff2") format("woff2"), url("/fonts/titillium-web-v10-latin-regular.woff") format("woff"), url("/fonts/titillium-web-v10-latin-regular.ttf") format("truetype"), url("/fonts/titillium-web-v10-latin-regular.svg#TitilliumWeb") format("svg");
/* Legacy iOS */
}
/* titillium-web-700 - latin */
@font-face {
font-family: "Titillium Web";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/titillium-web-v10-latin-700.eot");
/* IE9 Compat Modes */
src: local(""), url("/fonts/titillium-web-v10-latin-700.eot?#iefix") format("embedded-opentype"), url("/fonts/titillium-web-v10-latin-700.woff2") format("woff2"), url("/fonts/titillium-web-v10-latin-700.woff") format("woff"), url("/fonts/titillium-web-v10-latin-700.ttf") format("truetype"), url("/fonts/titillium-web-v10-latin-700.svg#TitilliumWeb") format("svg");
/* Legacy iOS */
}
/* barlow-regular - latin */
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/barlow-v5-latin-regular.eot");
/* IE9 Compat Modes */
src: local(""), url("/fonts/barlow-v5-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/barlow-v5-latin-regular.woff2") format("woff2"), url("/fonts/barlow-v5-latin-regular.woff") format("woff"), url("/fonts/barlow-v5-latin-regular.ttf") format("truetype"), url("/fonts/barlow-v5-latin-regular.svg#Barlow") format("svg");
/* Legacy iOS */
}
/* barlow-500 - latin */
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/fonts/barlow-v5-latin-500.eot");
/* IE9 Compat Modes */
src: local(""), url("/fonts/barlow-v5-latin-500.eot?#iefix") format("embedded-opentype"), url("/fonts/barlow-v5-latin-500.woff2") format("woff2"), url("/fonts/barlow-v5-latin-500.woff") format("woff"), url("/fonts/barlow-v5-latin-500.ttf") format("truetype"), url("/fonts/barlow-v5-latin-500.svg#Barlow") format("svg");
/* Legacy iOS */
}
/* barlow-600 - latin */
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/barlow-v5-latin-600.eot");
/* IE9 Compat Modes */
src: local(""), url("/fonts/barlow-v5-latin-600.eot?#iefix") format("embedded-opentype"), url("/fonts/barlow-v5-latin-600.woff2") format("woff2"), url("/fonts/barlow-v5-latin-600.woff") format("woff"), url("/fonts/barlow-v5-latin-600.ttf") format("truetype"), url("/fonts/barlow-v5-latin-600.svg#Barlow") format("svg");
/* Legacy iOS */
}
/* barlow-700 - latin */
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/barlow-v5-latin-700.eot");
/* IE9 Compat Modes */
src: local(""), url("/fonts/barlow-v5-latin-700.eot?#iefix") format("embedded-opentype"), url("/fonts/barlow-v5-latin-700.woff2") format("woff2"), url("/fonts/barlow-v5-latin-700.woff") format("woff"), url("/fonts/barlow-v5-latin-700.ttf") format("truetype"), url("/fonts/barlow-v5-latin-700.svg#Barlow") format("svg");
/* Legacy iOS */
}
/* 4 - Layout elements
* Design patterns (e.g. grids or media object)
=========================================================== */
.l-bisect {
display: -ms-grid;
display: grid;
grid-gap: 16px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-ms-grid-rows: auto 16px auto;
grid-template-areas: "a" "b";
}
.l-bisect__a {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: a;
display: block;
}
.l-duo-column > .l-bisect__a {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.l-bisect__b {
-ms-grid-row: 3;
-ms-grid-column: 1;
grid-area: b;
display: block;
}
.l-duo-column > .l-bisect__b {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
@media screen and (min-width: 700px) {
.l-bisect {
-ms-grid-columns: 1fr 16px 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "a b";
}
.l-bisect__a {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.l-bisect__b {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
}
@media screen and (min-width: 700px) {
.l-bisect__b {
text-align: right;
}
}
/*==========================================================================
* Contains
* ========================================================================== */
.l-contain {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 840px) {
.l-contain {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.l-contain {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
.l-contain--small {
max-width: 578px;
}
.l-duo-column {
display: -ms-grid;
display: grid;
grid-gap: 64px;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-ms-grid-rows: auto 64px auto;
grid-template-areas: "a" "b";
}
.l-duo-column__a {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: a;
display: block;
}
.l-duo-column > .l-duo-column__a {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.l-duo-column__b {
-ms-grid-row: 3;
-ms-grid-column: 1;
grid-area: b;
display: block;
}
.l-duo-column > .l-duo-column__b {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
@media screen and (min-width: 700px){
.l-duo-column__a {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.l-duo-column__b {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
}
@media screen and (min-width: 1152px) {
.l-duo-column {
grid-gap: 8.3333333333%;
-ms-grid-columns: 1fr 8.3333333333% 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "a b";
}
.l-duo-column > .l-bisect__a {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.l-duo-column > .l-bisect__b {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
.l-duo-column > .l-duo-column__a {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.l-duo-column > .l-duo-column__b {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
}
@media screen and (min-width: 1344px) {
.l-duo-column {
grid-gap: 16.6666666667%;
}
}
.l-newsgrid__header {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
font-weight: 400;
padding-bottom: 48px;
color: #1E2329;
}
@media screen and (min-width: 840px) {
.l-newsgrid__header {
font-size: 2rem;
line-height: 1.25;
}
}
.l-newsgrid__footer {
margin-top: 80px;
text-align: center;
}
.l-newsgrid__list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-left: 0;
list-style: none;
}
@media screen and (max-width: 1151px) {
.l-newsgrid__list {
margin-top: 56px;
}
.l-newsgrid__list.no-images {
margin: auto;
}
}
@media screen and (min-width: 1152px) {
.l-newsgrid__list {
margin-top: -48px;
margin-bottom: -48px;
margin-left: 4.1666666667%;
margin-right: 4.1666666667%;
}
.l-newsgrid__list.no-images {
margin-left: 0;
}
}
@media screen and (max-width: 1151px) {
.l-newsgrid__item {
width: 100%;
margin-bottom: 96px;
}
.l-newsgrid__list--no-images > .l-newsgrid__item {
margin-bottom: 48px;
}
.l-newsgrid__item:last-child {
margin-bottom: 0;
}
}
@media screen and (min-width: 1152px) {
.l-newsgrid__item {
margin-top: 48px;
margin-bottom: 48px;
width: calc(50% - 4.1666666667%);
}
.l-newsgrid__item:nth-child(odd) {
margin-right: 4.1666666667%;
}
}
/*==========================================================================
* Restrict
*
* When a block shouldn't take up the whole width of the container
* we can restrict the maximum width
* ========================================================================== */
@media screen and (min-width: 840px) {
.l-restrict-s {
margin-left: auto;
margin-right: auto;
width: 62.5%;
max-width: 38em;
}
}
@media screen and (min-width: 1152px) {
.l-restrict-s {
width: 50%;
}
}
@media screen and (min-width: 840px) {
.l-restrict-m {
margin-left: auto;
margin-right: auto;
width: 75%;
}
}
@media screen and (min-width: 1152px) {
.l-restrict-m {
width: 66.6666666667%;
}
}
@media screen and (min-width: 840px) {
.l-restrict-l {
margin-left: auto;
margin-right: auto;
width: 87.5%;
}
}
@media screen and (min-width: 1152px) {
.l-restrict-l {
width: 83.3333333333%;
}
}
/* 5 - COMPONENTS
* Discrete complete chunks of UI.
* Designed components
=========================================================== */
/** ==========================================================================
* Components
* =========================================================================*/
/* ==========================================================================
* Default button
* ========================================================================== */
.c-button {
font-size: 0.75rem;
line-height: 1.3333333333;
font-weight: 700;
position: relative;
display: inline-flex;
align-items: center;
margin-right: 14px;
height: 48px;
border: none;
background-color: #4D7DCF;
color: #fff;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition-property: background-color;
transition-duration: 0.3s;
}
.c-button::after {
position: absolute;
right: -14px;
top: 0;
bottom: 0;
content: "";
display: block;
width: 0;
height: 0;
border: 24px solid transparent;
border-left: 14px solid #4D7DCF;
border-right-width: 0;
background-color: transparent;
transition-property: border;
transition-duration: 0.3s;
}
.c-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.c-button:hover:not(:disabled) {
background-color: #3061b3;
}
.c-button:hover:not(:disabled)::after {
border-left-color: #3061b3;
}
.c-button__text {
display: inline-flex;
align-items: center;
padding: 16px;
}
.c-button__icon {
display: none;
position: relative;
color: white;
margin-right: 16px;
transition: transform 0.3s;
transform: rotate(-0.25turn);
}
.c-button:hover:not(:disabled) .c-button__icon {
transform: rotate(-0.25turn) translateY(4px);
}
.c-button--icon .c-button__icon {
display: block;
}
.c-card {
position: relative;
display: block;
text-decoration: none;
transition: transform 200ms ease-out;
}
.c-card:hover {
transform: scale(1.04) translate3d(0, 0, 0);
}
@supports ((-webkit-clip-path: inset(50%)) or (clip-path: inset(50%))) {
.c-card::after {
content: "";
display: block;
background: white;
padding-bottom: 29.607%;
-webkit-clip-path: polygon(50% 100%, 0% 1px, 0% 0%, 100% 0%, 100% 1px);
clip-path: polygon(50% 100%, 0% 1px, 0% 0%, 100% 0%, 100% 1px);
transform: translateY(-1px);
}
.c-card::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
padding-bottom: 50%;
width: 50%;
background: transparent;
border-radius: 40px;
box-shadow: 0 0 50px -10px rgba(0, 0, 0, 0.5);
transform-origin: right bottom;
transform: matrix(0.9, 0.52, -0.9, 0.52, 0, -2);
transition: box-shadow 200ms ease-out;
}
.c-card:hover::before {
box-shadow: 0 0 50px -15px rgba(0, 0, 0, 0.4);
}
}
.c-card__image {
position: relative;
z-index: 1;
height: 0;
padding-bottom: 86.111%;
-webkit-clip-path: polygon(50% 0%, 0% 33.17%, 0% 100%, 100% 100%, 100% 33.17%);
clip-path: polygon(50% 0%, 0% 33.17%, 0% 100%, 100% 100%, 100% 33.17%);
background-color: lightgrey;
overflow: hidden;
}
.c-card__image img {
transform: scale(1.04);
transition: transform 200ms ease-out;
}
.c-card:hover .c-card__image img {
transform: scale(1);
}
.c-card__content {
position: relative;
z-index: 1;
padding: 24px 24px 0 24px;
background: white;
text-align: center;
padding-bottom: 24px;
box-shadow: 0 30px 50px -35px rgba(0, 0, 0, 0.5);
}
@supports ((-webkit-clip-path: inset(50%)) or (clip-path: inset(50%))) {
.c-card__content {
padding-bottom: 0;
box-shadow: none;
}
}
.c-card__label {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
color: #DCA669;
}
.c-card__title {
font-weight: 700;
font-size: 1.125rem;
line-height: 1.3333333333;
color: #1E2329;
}
.c-card__action {
margin-top: 24px;
}
.o-card-grid__footer {
margin-top: 16px;
margin-bottom: 40px;
}
.c-cta-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
}
@supports ((-webkit-clip-path: inset(50%)) or (clip-path: inset(50%))) {
.c-cta-card::before, .c-cta-card::after {
content: "";
display: block;
background-color: #375082;
padding-bottom: 29.607%;
width: 100%;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 0% 100%, 100% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 0% 100%, 100% 100%, 100% 100%);
transform: translateY(1px);
}
.c-cta-card::after {
background-color: #20335A;
-webkit-clip-path: polygon(50% 100%, 0% 1px, 0% 0%, 100% 0%, 100% 1px);
clip-path: polygon(50% 100%, 0% 1px, 0% 0%, 100% 0%, 100% 1px);
transform: translateY(-1px);
}
}
.c-cta-card__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
background: linear-gradient(#375082, #20335A);
padding: 48px 24px;
}
@media screen and (min-width: 1152px) {
.c-cta-card__content {
padding: 48px;
}
}
.c-cta-card__lead {
font-weight: 700;
padding-bottom: 24px;
color: #fff;
}
.c-close {
position: relative;
display: flex;
justify-content: center;
align-items: center;
-ms-grid-row-align: center;
align-self: center;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
outline: none;
cursor: pointer;
transition: transform 180ms ease-out;
}
.c-close:focus {
box-shadow: 0 0 3px 2px white;
}
.c-close:after, .c-close:before {
content: "";
position: absolute;
top: 20px;
right: 20%;
left: 20%;
height: 3px;
margin-top: -2px;
pointer-events: none;
background: white;
border-radius: 3px;
}
.c-close:before {
transform: rotate(45deg);
}
.c-close:after {
transform: rotate(-45deg);
}
.c-close:hover {
transform: scale(1.2);
}
.c-cookie-overlay {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
opacity: 1;
transition: opacity 0.5s;
}
.c-cookie-overlay.is-accepted {
display: none;
}
.c-cookie-overlay.fade-out {
opacity: 0;
}
.c-cookie-overlay__modal {
display: block;
width: 92%;
max-width: 960px;
padding: 60px 120px;
margin: auto;
background-color: white;
}
.c-cookie-overlay__container.is-hidden {
display: none;
}
.c-cookie-overlay__title {
font-size: 24px;
line-height: 1;
font-weight: 500;
margin: 0 0 5px;
color: #1E2329;
}
.c-cookie-overlay__text {
font-size: 16px;
line-height: 1.2;
margin: 0;
color: #1E2329;
}
.c-cookie-overlay__link {
text-decoration: underline;
color: #72A3F5;
cursor: pointer;
transition: color 0.3s;
}
.c-cookie-overlay__link:hover {
color: rgba(114, 163, 245, 0.75);
}
.c-cookie-overlay__button {
display: inline-block;
margin-top: 35px;
padding: 13px 25px;
border-radius: 4px;
background-color: #72A3F5;
transition: background-color 0.4s;
font-size: 16px;
line-height: 1.2;
font-weight: 500;
color: white;
cursor: pointer;
outline: none;
border: none;
}
.c-cookie-overlay__button:hover {
background-color: #4c8af2;
}
.c-cookie-overlay__types, .c-cookie-overlay__settings {
margin: 30px 0;
}
.c-cookie-overlay__types > * + *, .c-cookie-overlay__settings > * + * {
margin-top: 25px;
}
.c-cookie-overlay__settings {
margin-bottom: 0;
}
.c-cookie-switch__title {
font-size: 24px;
line-height: 1;
font-weight: 500;
margin: 0 0 5px;
color: #1E2329;
}
.c-cookie-switch__text {
font-size: 16px;
line-height: 1.2;
margin: 0;
color: #1E2329;
}
.c-cookie-switch__settings {
margin: 30px 0 0;
}
.c-cookie-switch__settings > * + * {
margin-top: 25px;
}
.c-cookie-switch__button {
display: inline-block;
margin-top: 35px;
padding: 13px 25px;
border-radius: 4px;
background-color: #72A3F5;
transition: background-color 0.4s;
font-size: 16px;
line-height: 1.2;
font-weight: 500;
color: white;
cursor: pointer;
outline: none;
border: none;
}
.c-cookie-switch__button:hover {
background-color: #4c8af2;
}
.c-cookie-type {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
.c-cookie-type--static {
pointer-events: none;
}
.c-cookie-type__icon {
display: block;
margin: 0;
width: 26px;
height: 26px;
}
.c-cookie-type__icon svg {
width: 100%;
max-height: 26px;
}
.c-cookie-type--static .c-cookie-type__input {
opacity: 0.3;
}
.c-cookie-type__text {
margin: 0;
width: calc(100% - 55px);
font-size: 14px;
line-height: 1.2;
color: #1E2329;
}
.c-cookie-type__title {
display: block;
margin: 0 0 5px;
font-size: 18px;
font-weight: 600;
color: #1E2329;
}
.c-data {
display: inline-flex;
flex-direction: column;
}
.c-data__link {
display: inline-flex;
transition: color 200ms linear;
color: #4D7DCF;
text-decoration: none;
}
.c-data--on-dark .c-data__link {
color: #fff;
}
.c-data__link:hover {
color: #72A3F5;
}
.c-data__link[data-icon]::before {
content: "";
flex: none;
width: 24px;
height: 24px;
margin-right: 8px;
background-repeat: no-repeat;
background-position: center;
transform: translateY(2px);
}
.c-data__link[data-icon=phone]::before {
background-image: url(/img/phone.svg);
}
.c-data__link[data-icon=mail]::before {
background-image: url(/img/mail.svg);
}
.c-documents {
list-style: none;
padding: 0;
margin: 0;
}
.c-documents__item + .c-documents__item {
margin-top: 16px;
}
.c-documents__link {
display: flex;
align-items: center;
text-decoration: none;
color: #1E2329;
transition: color 100ms linear;
}
.c-documents__link:hover {
color: #72A3F5;
}
.c-documents__icon {
flex: none;
display: flex;
align-items: center;
height: 32px;
width: 32px;
margin-right: 16px;
color: #DCA669;
transition: color 100ms linear;
}
.c-documents__link:hover .c-documents__icon {
color: currentColor;
}
.c-eventcard {
text-decoration: none;
height: 100%;
}
.c-eventcard__frame {
border-radius: 8px;
height: 100%;
background: #fff;
filter: drop-shadow(0 10px 6px rgba(0, 0, 0, 0.15));
transition-property: filter, transform;
transition-duration: 200ms;
transition-timing-function: linear, ease-out;
}
a.c-eventcard:hover .c-eventcard__frame {
filter: drop-shadow(0 13px 8px rgba(0, 0, 0, 0.25));
transform: translateY(-3px);
}
.c-eventcard__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.c-eventcard__content {
display: flex;
flex-direction: column;
position: relative;
padding: 16px;
}
@media screen and (min-width: 500px) {
.c-eventcard__content {
padding-left: 40px;
padding-bottom: 40px;
}
}
@media screen and (min-width: 840px) {
.c-eventcard__content {
padding-left: 80px;
height: 100%;
}
}
.c-eventcard__date {
margin-top: 8px;
display: flex;
flex-direction: column;
}
.c-eventcard__year {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
color: #DCA669;
}
.c-eventcard__period {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
color: #1E2329;
}
@media screen and (min-width: 840px) {
.c-eventcard__period {
font-size: 2rem;
line-height: 1.25;
}
}
.c-eventcard__title {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 1.5rem;
line-height: 1.3333333333;
margin-top: 16px;
color: #1E2329;
transition: color 200ms linear;
}
@media screen and (min-width: 840px) {
.c-eventcard__title {
padding-right: 88px;
}
}
.c-eventcard__standnumber {
font-weight: 700;
color: #678AB4;
}
.c-eventcard__location {
margin-top: 8px;
margin-bottom: 16px;
color: #616366;
display: flex;
}
.c-eventcard__location::before {
content: "";
flex: none;
background-image: url(/img/pin.svg);
background-repeat: no-repeat;
height: 16px;
width: 12px;
margin-right: 12px;
transform: translateY(7px);
}
.c-eventcard__link {
margin-top: auto;
}
@media screen and (max-width: 399px) {
.c-eventcard__link {
font-size: 0.875rem;
line-height: 1.4285714286;
}
}
.c-flash-message-container {
position: relative;
}
.c-flash-message {
border-radius: 8px;
position: absolute;
bottom: -80%;
left: 50%;
display: inline-block;
white-space: nowrap;
padding: 5px 15px;
background-color: #72A3F5;
font-size: 0.6rem;
line-height: 1;
font-weight: 700;
text-transform: uppercase;
color: white;
opacity: 0;
transform: translate3d(-50%, -5px, 0);
transition-property: opacity, transform;
transition-duration: 0.3s;
}
.c-flash-message::after {
content: "";
position: absolute;
top: -8px;
left: calc(50% - 7.5px);
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 8px 7.5px;
border-color: transparent transparent #72A3F5 transparent;
}
.c-flash-message.clicked {
opacity: 1;
transform: translate3d(-50%, 0, 0);
}
.c-form-element {
display: flex;
flex-direction: column;
}
.c-form-element--honey {
position: fixed;
top: -100px;
height: 20px;
width: 100%;
}
.c-form-element__error:not(:empty) {
font-weight: 700;
color: #72A3F5;
display: block;
margin-top: 4px;
padding: 2px 0;
}
.c-form-element__label {
padding-bottom: 8px;
color: #DCA669;
}
.c-form-feedback {
margin: 0 0 8px;
padding: 24px 32px;
background-color: #fef5e1;
border: 1px solid #f8cd6b;
color: #375082;
}
.c-form-feedback:not(:empty) {
display: block;
}
.c-form-feedback:before {
content: attr(data-feedback);
display: inline-block;
margin-left: -16px;
margin-bottom: 8px;
font-weight: 700;
color: #da9b0c;
}
.c-form-feedback li::first-letter {
text-transform: uppercase;
}
.c-ghost-button {
display: inline-flex;
justify-content: center;
border-radius: 8px;
font-size: 0.75rem;
line-height: 1.3333333333;
color: #CB985E;
background: transparent;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
border: 1px solid currentColor;
padding: 16px 0;
text-transform: uppercase;
position: relative;
cursor: pointer;
text-decoration: none;
}
.c-ghost-button:focus {
outline: none;
box-shadow: 0 0 4px 2px rgba(220, 166, 105, 0.5);
}
.c-ghost-button:active:not(:disabled) {
outline: none;
box-shadow: none !important;
}
.c-ghost-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.c-ghost-button::after {
border-radius: 8px;
border: 1px solid transparent;
background: rgba(0, 0, 0, 0.07);
background-clip: content-box;
content: "";
position: absolute;
top: -1px;
bottom: -1px;
right: -1px;
left: -1px;
transform: scaleX(0);
opacity: 0;
pointer-events: none;
transition-duration: 0.5s;
}
.c-ghost-button:hover:not(:disabled)::after {
transform: scaleX(1);
opacity: 1;
transition-property: opacity, transform;
transition-duration: 0.35s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.c-ghost-button__text {
position: relative;
z-index: 2;
padding: 0 24px;
text-align: center;
}
.c-button--icon .c-ghost-button__text {
padding-right: 16px;
}
.c-ghost-button__icon {
display: none;
position: relative;
z-index: 2;
top: -1px;
margin-right: 15px;
transition: transform 0.3s;
}
.c-ghost-button:hover:not(:disabled) .c-ghost-button__icon {
transform: translateX(3px);
}
.c-ghost-button--icon .c-ghost-button__icon {
display: block;
width: 16px;
}
.c-ghost-button__icon:first-child {
margin-right: 0;
margin-left: 15px;
}
.c-hamburger {
display: flex;
justify-content: center;
-ms-grid-row-align: center;
align-self: center;
position: relative;
width: 40px;
height: 40px;
padding: 0;
color: #fff;
background: none;
border: none;
outline: none;
cursor: pointer;
}
.c-hamburger:focus {
box-shadow: 0 0 3px 2px #72A3F5;
}
.c-hamburger.is-light {
color: white;
}
.c-hamburger > span {
position: absolute;
top: 20px;
right: 20%;
left: 20%;
height: 3px;
margin-top: -2px;
pointer-events: none;
background: currentColor;
border-radius: 3px;
transform-origin: right;
transition-property: transform;
transition-duration: 150ms;
transition-timing-function: ease-out;
transition-delay: 100ms;
}
.c-hamburger > span:nth-child(1) {
top: 12px;
transform: scaleX(0.8);
}
.c-hamburger > span:nth-child(3) {
top: 28px;
transform: scaleX(0.5);
}
.c-hamburger:hover > span {
transform: scaleX(0.8);
}
.c-hamburger:hover > span:nth-child(1), .c-hamburger:hover > span:nth-child(3) {
transform: scaleX(1);
}
.is-overlay-menu-active .c-hamburger > span {
transform: scaleX(1) !important;
}
.is-overlay-menu-active .c-hamburger > span:nth-child(1) {
transform: translateY(3px) scaleX(1) !important;
transition-delay: 0s;
}
.is-overlay-menu-active .c-hamburger > span:nth-child(3) {
transform: translateY(-3px) scaleX(1) !important;
transition-delay: 0s;
}
.c-heading {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
font-weight: 400;
color: #1E2329;
margin-bottom: 48px;
}
@media screen and (min-width: 840px) {
.c-heading {
font-size: 2rem;
line-height: 1.25;
}
}
.c-heading--big {
font-size: 2rem;
line-height: 1.25;
font-family: "Titillium Web", sans-serif;
font-weight: 700;
color: #375082;
}
@media screen and (min-width: 840px) {
.c-heading--big {
font-size: 3rem;
line-height: 1.1666666667;
}
}
.c-hero-slider {
position: relative;
height: 100%;
}
.c-hero-slider__frame {
position: relative;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
grid-gap: 16px;
width: 100%;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.c-hero-slider__frame::before {
-ms-grid-row: 1;
grid-row: 1;
-ms-grid-column: 1;
grid-column: 1;
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: 115.625%;
}
.c-hero-slider__picture {
-ms-grid-row: 1;
grid-row: 1;
-ms-grid-column: 1;
grid-column: 1;
opacity: 0;
transition-property: transform, opacity, filter;
transition-duration: 600ms;
transition-timing-function: ease-out;
transform: scale(1.03) translate(-1.2%, 0.6%);
filter: blur(2px) saturate(100%);
}
.c-hero-slider__picture.is-active {
opacity: 1;
transform: none;
filter: none;
}
/*
* Controls:
*
* - Buttons
* - Indicator dots
*/
.c-hero-slider__controls {
position: absolute;
bottom: -16px;
right: 0;
width: 40%;
filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.5));
}
.c-hero-slider__knobs {
display: flex;
width: 50%;
margin: auto;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.c-hero-slider__knobs::before {
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: 115.625%;
}
.c-hero-slider__button {
position: relative;
width: 50%;
border: none;
background-color: #72A3F5;
cursor: pointer;
transition-property: background-color;
transition-duration: 250ms;
transition-timing-function: linear;
}
.c-hero-slider__button::before {
content: "";
position: absolute;
left: 50%;
display: block;
background-image: url(/img/arrowhead.svg);
width: 9px;
height: 16px;
background-size: cover;
transform: translate(-50%, -50%);
}
.c-hero-slider__button:focus, .c-hero-slider__button:hover {
outline: none;
background-color: #4D7DCF;
}
.c-hero-slider__button.previous::before {
transform: rotate(0.5turn) translate(-50%, 50%);
left: auto;
right: 50%;
}
.c-hero-slider__dots {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 16px;
}
/*
* Hex shape (image):
* Based on an 6x7 aspect ratio (480w x 560h)
*/
.c-hex-shape {
display: inline-block;
position: relative;
}
@supports ((-webkit-clip-path: inset(50%)) or (clip-path: inset(50%))) {
.c-hex-shape--ornament::before {
content: "";
display: block;
position: absolute;
bottom: 25%;
left: 0;
width: 40%;
height: 40%;
background: linear-gradient(to top, #20335A, #375082);
transform: translate(-50%, 50%);
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.c-hex-shape--ornament[data-pos~=right]::before {
right: 0;
left: auto;
transform: translate(50%, 50%);
}
}
.c-hex-shape__image {
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.c-hex-shape__image--heart {
-webkit-clip-path: polygon(50% 25%, 75% 12.5%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, 25% 12.5%);
clip-path: polygon(50% 25%, 75% 12.5%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, 25% 12.5%);
}
.c-input {
width: 100%;
padding: 8px 16px;
color: #0C2243;
border: none;
outline: none;
}
.c-input:focus {
box-shadow: inset 0 -4px 0 0 #72A3F5;
}
.has-error .c-input {
box-shadow: inset 0 0 0 4px #da9b0c;
background-color: #fef5e1;
}
textarea.c-input {
display: block;
padding: 16px;
min-height: 160px;
line-height: 24px;
resize: vertical;
}
.c-image {
display: block;
}
@media screen and (min-width: 840px) {
.c-image {
margin-left: auto;
margin-right: auto;
width: 75%;
}
}
@media screen and (min-width: 1152px) {
.c-image {
width: 66.6666666667%;
}
}
.c-image > img {
display: block;
position: relative;
width: 100%;
min-height: 130px;
text-align: center;
}
.c-image > img:before {
border-radius: 4px;
font-size: 0.75rem;
line-height: 1.3333333333;
content: "We're sorry, this image is broken :(";
display: block;
position: absolute;
top: -10px;
left: 0;
height: calc(100% + 20px);
width: 100%;
padding: 15px;
background-color: #fff;
background-image: url(/img/kms/dynamic/image.svg);
background-repeat: no-repeat;
background-position: bottom 20px center;
background-size: 130px;
border: 2px solid #F7F8FA;
}
.c-image__placeholder {
display: block;
width: 100%;
height: 0;
padding-bottom: 66.67%;
background-color: #fff;
background-image: url("/img/kms/dynamic/image.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 200px auto;
border: 1px solid rgba(30, 35, 41, 0.3);
border-radius: 16px;
}
.c-image__placeholder--video {
padding-bottom: 56.25%;
background-image: url("/img/kms/dynamic/video-block.svg");
}
.c-language {
position: relative;
}
.c-language__button {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
font-family: "Barlow", sans-serif;
display: flex;
align-items: center;
position: relative;
z-index: 2;
height: 40px;
text-align: left;
background-color: transparent;
color: #72A3F5;
padding-left: 0;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
transition: color 0.15s;
}
.c-language__button:focus, .c-language__button:hover {
outline: none;
color: #aac8f9;
}
.c-language__dropdown {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
font-family: "Barlow", sans-serif;
border-radius: 8px;
position: absolute;
left: -8px;
top: 100%;
margin: 0;
padding: 8px 0;
list-style: none;
background-color: #fff;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.2);
transform: translate3d(0, -5px, 0);
opacity: 0;
pointer-events: none;
overflow: hidden;
transition: opacity 0.3s, transform 0.3s;
}
.c-language:hover .c-language__dropdown {
opacity: 1;
pointer-events: auto;
transform: translate3d(0, 0, 0);
}
.c-language__link {
display: flex;
align-items: center;
padding: 6px 16px;
text-decoration: none;
color: #616366;
background-color: transparent;
transition: background-color 0.3s;
}
.c-language__link:hover {
color: #1E2329;
background: linear-gradient(rgba(55, 80, 130, 0.15), rgba(32, 51, 90, 0.15));
}
.c-language__label {
flex: none;
margin-right: 8px;
}
.c-language__label:last-child {
margin-right: 16px;
}
.c-language__flag {
flex: none;
display: block;
transform: translateY(1px);
}
.c-language__flag:first-child {
margin-right: 8px;
}
.c-location__image {
display: inline-block;
background: #dce4ed;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.c-location__name {
font-weight: 700;
margin-top: 8px;
color: #375082;
}
.c-location__entry {
color: #616366;
}
.c-nav {
display: flex;
justify-content: flex-start;
align-items: center;
}
.c-nav__list {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 0;
list-style: none;
margin: 0 auto;
}
.c-nav__item {
display: flex;
justify-content: center;
align-items: center;
flex: 1 0 auto;
margin-top: 0;
}
.c-nav__item + .c-nav__item {
margin-left: 56px;
}
@media screen and (min-width: 840px) and (max-width: 1343px) {
.c-nav__item + .c-nav__item {
margin-left: 4vw;
}
}
.c-nav__link {
font-size: 1.5rem;
line-height: 1.3333333333;
display: inline-block;
padding: 8px 0;
color: #fff;
text-decoration: none;
transition: color 200ms linear;
}
.c-nav__link:hover {
color: #72A3F5;
}
.is-active .c-nav__link {
font-weight: 700;
color: #DCA669;
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.c-nav__link {
font-size: calc(1.39vw + 8px);
}
}
.c-options-menu {
list-style: none;
margin-left: 0;
}
@media screen and (max-width: 839px) {
.c-options-menu {
display: flex;
justify-content: space-between;
}
}
@media screen and (min-width: 840px) {
.c-options-menu__segment + .c-options-menu__segment {
margin-top: 50px;
}
}
.c-options-menu__label {
font-size: 0.75rem;
line-height: 1.3333333333;
font-weight: 500;
margin-bottom: 10px;
color: #1E2329;
}
@media screen and (max-width: 839px) {
.c-options-menu__segment:last-child .c-options-menu__label {
text-align: right;
}
}
.c-pagination {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
margin: 72px 0;
}
@media screen and (min-width: 840px) {
.c-pagination {
margin-bottom: 144px;
}
}
.c-pagination__item {
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (min-width: 840px) {
.c-pagination__item {
font-size: 1.5rem;
line-height: 1.3333333333;
}
}
.c-pagination__link {
border-radius: 4px;
margin: 0;
padding: 6px 12px;
color: #4D7DCF;
text-decoration: none;
transition: color 0.2s, background-color 0.2s;
}
@media screen and (min-width: 840px) {
.c-pagination__link {
margin: 0 16px;
}
}
.c-pagination__link:link:hover {
color: #DCA669;
}
.c-pagination__link.is-active {
font-weight: 600;
color: #DCA669;
cursor: default;
}
.c-pagination__prev,
.c-pagination__next {
display: flex;
justify-content: center;
padding: 8px;
color: rgba(77, 125, 207, 0.3);
transform: rotate(-0.25turn);
transition: color 0.2s;
}
@media screen and (min-width: 840px) {
.c-pagination__prev,
.c-pagination__next {
margin-left: 16px;
}
}
.c-pagination__prev:link,
.c-pagination__next:link {
color: #4D7DCF;
}
.c-pagination__prev[href]:hover,
.c-pagination__next[href]:hover {
color: #DCA669;
}
.c-pagination__prev {
transform: rotate(0.25turn);
}
@media screen and (min-width: 840px) {
.c-pagination__prev {
margin-left: 0;
margin-right: 16px;
}
}
.c-person__image {
-ms-grid-row: 1;
-ms-grid-row-span: 5;
-ms-grid-column: 1;
grid-area: image;
display: block;
}
.c-person__name {
-ms-grid-row: 3;
-ms-grid-column: 3;
grid-area: name;
display: block;
}
.c-person__subtitle {
-ms-grid-row: 5;
-ms-grid-column: 3;
grid-area: subtitle;
display: block;
}
.c-person__image {
display: inline-block;
background: #dce4ed;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.c-person__name {
margin-top: 8px;
color: #375082;
}
.c-person__firstname {
font-size: 1.5rem;
line-height: 1.3333333333;
font-weight: 700;
}
.c-person__subtitle {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
color: #DCA669;
}
.c-person__email {
text-decoration: none;
color: #616366;
}
.c-person__email:hover {
color: #4D7DCF;
}
.c-person--small {
display: -ms-grid;
display: grid;
grid-gap: 0 24px;
-ms-grid-columns: 96px 24px auto;
grid-template-columns: 96px auto;
-ms-grid-rows: 1fr 0 auto 0 1fr;
grid-template-rows: 1fr auto 1fr;
grid-template-areas: "image ." "image name" "image subtitle";
}
.c-person--small .c-person__name {
font-size: 1.125rem;
line-height: 1;
margin: 0 0 8px 0;
}
.c-projector {
position: relative;
height: 100%;
}
.c-projector__figure {
display: -ms-grid;
display: grid;
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
height: 100%;
}
.c-projector__picture {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
grid-row: 1;
-ms-grid-row-align: end;
align-self: end;
height: 100%;
display: block;
opacity: 0;
transition: opacity 0.5s;
}
.c-projector__picture.is-active {
opacity: 1;
}
.c-projector__img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
@media screen and (max-width: 839px) {
.c-projector__img {
max-height: 78vh;
}
}
.c-projector__control {
position: relative;
z-index: 2;
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
grid-row: 1;
-ms-grid-row-align: end;
align-self: end;
margin-bottom: 8px;
margin-right: 8px;
display: flex;
justify-content: center;
align-items: center;
}
.c-projector__button {
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
padding: 10px;
color: #72A3F5;
background: white;
border: 1px solid #F7F8FA;
border-radius: 100%;
cursor: pointer;
transition-property: background-color, border, box-shadow;
transition-duration: 0.25s;
outline: none;
}
.c-projector__button:hover {
color: white;
background-color: #72A3F5;
border-color: transparent;
cursor: pointer;
}
.c-projector__button:active {
background-color: #1162eb;
color: white;
}
.c-projector__button:focus {
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
}
.c-projector__button.previous {
transform: rotate(0.5turn);
}
.c-projector__arrow {
display: flex;
justify-content: center;
align-items: center;
height: 16px;
font-size: 0;
line-height: 0;
}
.c-quote {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
font-weight: 400;
position: relative;
}
@media screen and (min-width: 840px) {
.c-quote {
margin-left: auto;
margin-right: auto;
width: 62.5%;
max-width: 38em;
}
}
@media screen and (min-width: 1152px) {
.c-quote {
width: 50%;
}
}
@media screen and (min-width: 840px) {
.c-quote {
font-size: 2rem;
line-height: 1.25;
}
}
@media screen and (max-width: 839px) {
.c-quote {
font-size: 1.5rem;
line-height: 1.3333333333;
margin-left: 60px;
}
}
.c-quote::before {
content: "";
display: block;
position: absolute;
top: -5px;
left: -60px;
width: 38px;
height: 24px;
background-image: url("/img/quotes.svg");
}
.c-quote__text {
margin: 0;
color: #1E2329;
quotes: "\201C" "\201D";
}
.c-quote__text::before {
content: open-quote;
}
.c-quote__text::after {
content: close-quote;
}
/* ==========================================================================
* Scroll button
* ========================================================================== */
.c-scroll-button {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
display: inline-flex;
align-items: center;
color: #DCA669;
text-decoration: none;
cursor: pointer;
}
.c-scroll-button__text {
display: inline-flex;
align-items: center;
padding: 16px;
}
.c-scroll-button__icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.c-scroll-button__icon svg {
position: absolute;
transition: transform 0.25s ease-in-out, color 0.25s linear;
transform: scale(1.4);
}
.ie.v11 .c-scroll-button__icon svg {
left: 36%;
top: 36%;
}
.c-scroll-button:hover .c-scroll-button__icon svg {
transform: scale(1.2);
color: white;
}
.c-scroll-button__icon::before {
content: "";
display: block;
background-image: url(/img/hex.svg);
width: 48px;
height: 56px;
background-size: cover;
transition: transform 0.25s ease-in-out;
}
.c-scroll-button:hover .c-scroll-button__icon::before {
transform: scale(0.9);
}
.c-secondary-nav {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
margin-left: 0;
}
.c-secondary-nav__item {
list-style: none;
}
.c-secondary-nav__item + .c-secondary-nav__item:not(:last-child) {
margin-left: 20px;
}
@media screen and (min-width: 900px) {
.c-secondary-nav__item + .c-secondary-nav__item:not(:last-child) {
margin-left: 32px;
}
}
.c-secondary-nav__item--language {
margin-left: 16px;
padding-left: 16px;
position: relative;
}
.c-secondary-nav__item--language::before {
content: "";
position: absolute;
top: 8px;
left: 0;
display: block;
height: 24px;
width: 1px;
background-color: rgba(255, 255, 255, 0.2);
}
.c-secondary-nav__link {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
font-family: "Barlow", sans-serif;
display: block;
padding: 16px 0;
cursor: pointer;
text-decoration: none;
color: #72A3F5;
transition: color 100ms linear;
}
.c-secondary-nav__link.is-active {
color: #DCA669;
}
.c-secondary-nav__link:hover {
color: #aac8f9;
}
.c-servicepoint {
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
margin: -24px;
}
@media screen and (max-width: 839px) {
.c-servicepoint {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 839px) and (min-width: 840px) {
.c-servicepoint {
width: calc((100% / 10) * 8);
}
}
@media screen and (max-width: 839px) and (min-width: 1152px) {
.c-servicepoint {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
.c-servicepoint__image {
width: auto;
height: auto;
margin: 24px;
max-width: 192px;
background-color: lightgrey;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.c-servicepoint__image.is-small {
max-width: 144px;
}
.c-servicepoint__content {
flex-grow: 9999;
min-width: 180px;
max-width: 336px;
margin: 24px;
}
.c-servicepoint__content > * + * {
margin-top: 16px;
}
.c-servicepoint__intro {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
font-weight: 700;
color: #1E2329;
}
.c-servicepoint__body {
margin-bottom: 8px;
}
.c-servicepoint__info {
display: inline-flex;
flex-direction: column;
}
.c-servicepoint__data {
text-decoration: none;
color: #616366;
transition: color 0.2s linear;
}
.c-servicepoint__data:hover {
color: #4D7DCF;
}
.c-servicepoint__data[data-icon] {
display: inline-flex;
}
.c-servicepoint__data[data-icon]::before {
content: "";
flex: none;
width: 24px;
height: 24px;
margin-right: 8px;
background-repeat: no-repeat;
background-position: center;
transform: translateY(2px);
}
.c-servicepoint__data[data-icon=phone]::before {
background-image: url(/img/phone.svg);
}
.c-servicepoint__data[data-icon=mail]::before {
background-image: url(/img/mail.svg);
}
.c-servicepoint__name {
font-weight: 700;
color: #375082;
}
.c-servicepoint__function {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
color: #DCA669;
}
.c-servicepoint__action {
margin-top: 40px;
}
.c-servicepoint--small .c-servicepoint__image {
max-width: 144px;
}
.c-servicepoint--on-dark,
.c-servicepoint--on-dark .c-servicepoint__intro,
.c-servicepoint--on-dark .c-servicepoint__name,
.c-servicepoint--on-dark .c-servicepoint__data {
color: #fff;
}
.c-servicepoint--on-dark .c-servicepoint__data:hover {
color: #DCA669;
}
@media screen and (min-width: 840px) {
.c-servicepoint--is-special {
margin-left: auto;
margin-right: auto;
width: 75%;
}
}
@media screen and (min-width: 1152px) {
.c-servicepoint--is-special {
width: 66.6666666667%;
}
}
.c-servicepoint--is-special .c-servicepoint__image {
margin-left: 0;
}
.c-servicepoint--is-special .c-servicepoint__content {
max-width: 400px;
}
@media screen and (min-width: 840px) {
.c-servicepoint--is-special {
justify-content: flex-start;
}
}
@media screen and (min-width: 1240px) {
.c-servicepoint--is-special .c-servicepoint__content {
max-width: none;
}
}
.c-share {
display: flex;
flex-direction: column;
align-items: center;
color: #DCA669;
}
.c-share__title {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 16px;
color: #DCA669;
}
.c-share__list {
display: flex;
list-style: none;
margin: 0;
}
.c-share__item {
width: 55px;
height: 63px;
}
.c-share__item + .c-share__item {
margin-left: 16px;
}
.c-share__link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border: none;
background: none;
transition-property: filter;
transition-duration: 150ms;
transition-timing-function: ease-out;
}
.c-share__link > svg {
transition-property: transform;
transition-duration: 150ms;
transition-timing-function: ease-out;
}
.c-share__link::before {
content: "";
position: absolute;
display: block;
background: url(/img/hex.svg);
background-size: cover;
width: 100%;
height: 100%;
pointer-events: none;
}
.ie.v11 .c-share__link::before {
display: none;
}
.c-share__link:hover, .c-share__link:focus {
outline: none;
cursor: pointer;
filter: invert(100%) brightness(140%) hue-rotate(5deg) saturate(80%);
}
.c-share__link:hover > svg, .c-share__link:focus > svg {
transform: scale(1.25);
}
.c-slide-indicator {
display: flex;
justify-content: flex-end;
align-items: center;
}
.c-slide-indicator__button {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
background-color: transparent;
border: none;
cursor: pointer;
transition-property: background-color, opacity;
transition-duration: 250ms;
}
.c-slide-indicator__button:focus {
outline: none;
}
.c-slide-indicator__button:hover:not(.is-active), .c-slide-indicator__button:focus:not(.is-active) {
opacity: 0.5;
}
.c-slide-indicator__button:before, .c-slide-indicator__button:after {
content: "";
position: absolute;
background-clip: content-box;
transition-property: transform, background-color, opacity;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
border-radius: 100%;
}
.c-slide-indicator__button:before {
top: calc((20px - 8px) / 2);
right: calc((20px - 8px) / 2);
bottom: calc((20px - 8px) / 2);
left: calc((20px - 8px) / 2);
background-color: #DCA669;
}
.c-slide-indicator__button:after {
top: calc((20px - 10px) / 2);
right: calc((20px - 10px) / 2);
bottom: calc((20px - 10px) / 2);
left: calc((20px - 10px) / 2);
border: 1px solid #4D7DCF;
transform: scale(1.4);
opacity: 0;
}
.c-slide-indicator__button.is-active:before {
background-color: #4D7DCF;
border-color: rgba(77, 125, 207, 0.9);
transform: scale(0.5);
}
.c-slide-indicator__button.is-active:after {
opacity: 0.9;
transform: scale(1);
}
.c-star {
padding: 0 2px;
color: #F7F8FA;
line-height: 0;
}
.c-star--full {
color: #DCA669;
}
.c-star--half {
color: #F7F8FA;
}
.c-star--half .half-star {
fill: #DCA669;
}
/**
* When we need an animation we can use the following as a basis
*/
.c-switch {
position: relative;
}
.c-switch__input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.c-switch__label {
border-radius: 4px;
font-size: 0.75rem;
line-height: 1.3333333333;
font-weight: 500;
display: -ms-inline-grid;
display: inline-grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
position: relative;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
color: white;
background: #F7F8FA;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.c-switch__label::before, .c-switch__label::after {
position: relative;
z-index: 1;
padding: 9px;
line-height: 1.3;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
transition: color 0.2s;
}
.c-switch__label::before {
-ms-grid-column: 1;
grid-column: 1;
content: attr(data-checked);
}
.c-switch__input:checked ~ .c-switch__label::before {
color: rgba(30, 35, 41, 0.4);
}
.c-switch__label::after {
-ms-grid-column: 2;
grid-column: 2;
content: attr(data-unchecked);
color: rgba(255, 255, 255, 0.3);
}
.c-switch__input:checked ~ .c-switch__label::after {
color: inherit;
}
.c-switch__indicator {
position: absolute;
z-index: 0;
left: 0;
top: 0;
height: 100%;
width: 50%;
background: linear-gradient(to bottom, #72A3F5, #40bdf2);
transition: transform 0.35s cubic-bezier(0.23, 0.18, 0.3, 1);
}
.c-switch__indicator:after {
content: "";
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-image: linear-gradient(270deg, #a02d09 10%, #DE4313 100%);
opacity: 0;
transition: opacity 0.35s cubic-bezier(0.23, 0.18, 0.3, 1);
}
.c-switch__input:checked ~ .c-switch__label .c-switch__indicator {
transform: translateX(101%);
}
.c-switch__input:checked ~ .c-switch__label .c-switch__indicator:after {
opacity: 1;
}
.c-testimonial__comment {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
color: #DCA669;
}
.c-testimonial__company {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
font-weight: 700;
color: #1E2329;
}
.c-testimonial__body {
font-size: 1.5rem;
line-height: 1.3333333333;
margin-top: 40px;
color: #1E2329;
quotes: "\201C" "\201D";
}
.c-testimonial__body::before {
content: open-quote;
}
.c-testimonial__body::after {
content: close-quote;
}
.c-testimonial__person {
margin-top: 40px;
}
/* ==========================================================================
* Text button
* ========================================================================== */
/**
* 1. Color gets inherited and used for nested elements with 'currentColor' property
* 2. Reset default button styling
*/
.c-textbutton {
font-weight: 500;
display: inline-flex;
align-items: center;
color: #4D7DCF;
padding: 0;
/* 2 */
background-color: transparent;
/* 2 */
border: none;
/* 2 */
cursor: pointer;
text-decoration: none;
transition: color 0.3s;
}
.c-textbutton:hover:not(:disabled) {
color: #3061b3;
}
.c-textbutton:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.c-textbutton--on-dark {
color: #72A3F5;
}
.c-textbutton--on-dark:hover:not(:disabled) {
color: #8eb5f7;
}
.c-textbutton--is-reversed {
flex-direction: row-reverse;
}
.c-textbutton__icon {
display: none;
position: relative;
margin-left: 11px;
transition: transform 0.3s;
transform: rotate(-0.25turn) translateX(-1px);
}
.c-textbutton:hover:not(:disabled) .c-textbutton__icon {
transform: rotate(-0.25turn) translateY(4px) translateX(-1px);
}
.c-textbutton--icon .c-textbutton__icon {
display: block;
}
.c-textbutton--is-reversed .c-textbutton__icon {
margin-left: 0;
margin-right: 11px;
transform: rotate(0.25turn) translateX(1px);
}
.c-textbutton--is-reversed:hover:not(:disabled) .c-textbutton__icon {
transform: rotate(0.25turn) translateY(4px) translateX(1px);
}
.c-newscard {
text-decoration: none;
height: 100%;
display: block;
position: relative;
transition: transform 200ms ease-out;
}
.c-newscard::after {
content: "";
border-radius: 5px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
opacity: 0.4;
transition: opacity 200ms linear;
}
.c-newscard[href]:hover {
transform: translateY(-3px);
}
.c-newscard[href]:hover::after {
opacity: 1;
}
.c-newscard__frame {
border-radius: 8px;
height: 100%;
background: #fff;
}
.c-newscard__content {
display: flex;
flex-direction: column;
position: relative;
padding: 32px;
}
@media screen and (min-width: 840px) {
.c-newscard__content {
padding: 40px;
}
}
@media screen and (min-width: 1152px) {
.c-newscard__content {
height: 100%;
padding-left: 96px;
}
}
@media screen and (min-width: 1152px) {
.c-newscard--no-image .c-newscard__content {
padding-left: 80px;
padding-right: 48px;
}
}
.c-newscard__content--message {
align-items: center;
justify-content: center;
padding: 48px;
}
.c-newscard__image {
position: absolute;
top: 0;
left: 32px;
display: block;
height: 112px;
width: 96px;
transform: translateY(-50%);
background: linear-gradient(-120deg, #5073A3, #5073A3);
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
@media screen and (min-width: 1152px) {
.c-newscard__image {
top: 48px;
left: 0;
transform: translateX(-50%);
}
}
.c-newscard__date {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
display: block;
color: #DCA669;
}
@media screen and (max-width: 1151px) {
.c-newscard__date {
text-align: right;
transform: translateY(-8px);
}
}
.c-newscard__title {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 1.5rem;
line-height: 1.3333333333;
margin-top: 16px;
margin-bottom: 24px;
color: #678AB4;
transition: color 200ms linear;
}
.c-newscard--no-image .c-newscard__title {
margin-top: 0;
}
.c-newscard__intro {
margin-bottom: 24px;
color: #616366;
}
.c-newscard__more {
margin-top: auto;
}
.c-trademark {
font-size: 0.75rem;
line-height: 1.3333333333;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
margin: 0 -4px;
color: #72A3F5;
text-decoration: none;
transition: color 0.15s ease-in-out;
}
.c-trademark:hover {
color: #aac8f9;
}
.c-trademark:hover .komma-emblem {
transform-origin: 12px 12px;
-webkit-animation: logo-spin 2s linear infinite;
animation: logo-spin 2s linear infinite;
}
.c-trademark__text {
padding: 4px;
}
.c-trademark__icon {
padding: 4px;
}
@-webkit-keyframes logo-spin {
from {
transform: rotate(0);
}
to {
transform: rotate(-1turn);
}
}
@keyframes logo-spin {
from {
transform: rotate(0);
}
to {
transform: rotate(-1turn);
}
}
.c-video {
width: 100%;
max-width: 960px;
margin: auto;
}
.c-video__placeholder {
position: relative;
height: 0;
width: 100%;
padding-bottom: 53.6%;
background-color: #F7F8FA;
}
.c-video__iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pageTransitionOverlay {
position: fixed;
top: 0;
left: -17%;
width: 134%;
height: 120%;
background-color: black;
z-index: 999;
transform: translate(0, -120%);
transition: all 0.5s ease-in-out;
}
.pageTransitionOverlay.down {
transform: translate(0, 0);
}
.pageTransitionOverlay.done {
transform: translate(0, 120%);
}
/* 6 - ORGANISMS
* Large blocks composed of multiple components.
=========================================================== */
/** ==========================================================================
* Organisms
* =========================================================================*/
@media screen and (max-width: 839px) {
.o-article {
margin-top: 12vw;
margin-bottom: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-article {
margin-top: 10vw;
margin-bottom: 10vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-article {
margin-top: 7.1428571429vw;
margin-bottom: 7.1428571429vw;
}
}
@media screen and (min-width: 1344px) {
.o-article {
margin-top: 96px;
margin-bottom: 96px;
}
}
@media screen and (min-width: 840px) {
.o-article__back {
margin-left: auto;
margin-right: auto;
width: 75%;
}
}
@media screen and (min-width: 1152px) {
.o-article__back {
width: 66.6666666667%;
}
}
.o-article__heading {
font-size: 2rem;
line-height: 1.25;
font-family: "Titillium Web", sans-serif;
font-weight: 700;
margin-top: 24px;
margin-bottom: 40px;
color: #375082;
}
@media screen and (min-width: 840px) {
.o-article__heading {
margin-left: auto;
margin-right: auto;
width: 75%;
}
}
@media screen and (min-width: 1152px) {
.o-article__heading {
width: 66.6666666667%;
}
}
@media screen and (min-width: 840px) {
.o-article__heading {
font-size: 3rem;
line-height: 1.1666666667;
}
}
@media screen and (min-width: 840px) {
.o-article__heading {
margin-top: 56px;
margin-bottom: 56px;
}
}
@media screen and (max-width: 839px) {
.o-block {
margin-top: 12vw;
margin-bottom: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-block {
margin-top: 10vw;
margin-bottom: 10vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-block {
margin-top: 7.1428571429vw;
margin-bottom: 7.1428571429vw;
}
}
@media screen and (min-width: 1344px) {
.o-block {
margin-top: 96px;
margin-bottom: 96px;
}
}
.o-body {
flex: 1 0 auto;
}
.o-callout-bar {
position: relative;
text-align: center;
}
.o-callout-bar[data-ornament-type=filled]::after {
content: "";
display: block;
width: 10vw;
height: 11.5625vw;
position: absolute;
background-image: url(/img/ornament-hexagon--filled.svg);
background-size: cover;
left: 0;
top: 0;
transform: translateX(-50%) translateY(-50%);
}
.o-callout-bar__main {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
padding-top: 80px;
padding-bottom: 112px;
}
@media screen and (min-width: 840px) {
.o-callout-bar__main {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-callout-bar__main {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (min-width: 700px) {
.o-callout-bar__main {
max-width: 80%;
}
}
@media screen and (min-width: 1000px) {
.o-callout-bar__main {
max-width: 66.6666666667%;
}
}
@media screen and (min-width: 1152px) {
.o-callout-bar__main {
max-width: 50%;
}
}
.o-callout-bar__icon {
color: #DCA669;
margin-bottom: 40px;
}
.o-callout-bar__body {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
font-weight: 400;
color: #1E2329;
}
@media screen and (min-width: 840px) {
.o-callout-bar__body {
font-size: 2rem;
line-height: 1.25;
}
}
.on-dark .o-callout-bar__body {
color: white;
}
.o-callout-bar__action {
margin-top: 40px;
}
.o-card-grid {
position: relative;
}
.o-card-grid__main {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 48px 0;
}
@media screen and (min-width: 840px) {
.o-card-grid__main {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-card-grid__main {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
.o-card-grid__main[data-ornament-type=stroked]::after {
position: absolute;
width: 48px;
height: 54.927835056px;
background-image: url(/img/ornament-hexagon--stroked.svg);
bottom: 0;
left: 0;
transform: translateY(50%) rotate(180deg);
content: "";
display: block;
}
@media screen and (min-width: 800px) {
.o-card-grid__main[data-ornament-type=stroked]::after {
width: 96px;
height: 109.855670112px;
}
}
.o-card-grid__header {
width: 100%;
padding: 24px 0;
}
@media screen and (min-width: 1344px) {
.o-card-grid__header {
width: 83.3333333333%;
}
}
.o-card-grid__title {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
font-weight: 400;
color: #fff;
}
@media screen and (min-width: 840px) {
.o-card-grid__title {
font-size: 2rem;
line-height: 1.25;
}
}
.o-card-grid__back {
margin-top: 8px;
}
.o-card-grid__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
@media screen and (min-width: 600px) {
.o-card-grid__list {
justify-content: flex-start;
margin: 0 -24px;
}
}
@media screen and (max-width: 999px) {
.o-card-grid__list {
flex-wrap: wrap;
}
}
@media screen and (min-width: 1344px) {
.o-card-grid__list {
width: calc(83.3333333333% + 48px);
}
}
.o-card-grid__item {
flex-basis: auto;
width: 100%;
margin: 24px;
}
@media screen and (max-width: 599px) {
.o-card-grid__item {
max-width: 300px;
}
}
@media screen and (min-width: 600px) and (max-width: 999px) {
.o-card-grid__item {
width: calc((100% / 2) - 48px - 1px);
}
@supports ((-webkit-clip-path: inset(50%)) or (clip-path: inset(50%))) {
.o-card-grid__item:last-child:nth-child(2n+3) {
flex-grow: 0;
margin: -5% auto 24px;
}
}
}
@media screen and (min-width: 1000px) {
.o-card-grid__item {
width: calc((100% / 3) - 48px - 1px);
}
.o-card-grid__list--deluxe .o-card-grid__item {
margin-top: 64px;
margin-bottom: 64px;
}
}
@media screen and (min-width: 1000px) {
.o-card-grid__item--cta:nth-last-child(1):nth-child(3n+1) {
display: none;
}
}
.o-contact {
position: relative;
}
@media screen and (max-width: 839px) {
.o-contact {
margin-top: 9vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-contact {
margin-top: 7.5vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-contact {
margin-top: 5.3571428571vw;
}
}
@media screen and (min-width: 1344px) {
.o-contact {
margin-top: 72px;
}
}
@media screen and (min-width: 1152px) {
.o-contact__body {
grid-area: body;
display: block;
}
.o-contact__form {
grid-area: form;
display: block;
}
.o-contact__extra {
grid-area: extra;
display: block;
}
}
.o-contact__main {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 840px) {
.o-contact__main {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-contact__main {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (max-width: 839px) {
.o-contact__main > * + * {
margin-top: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-contact__main > * + * {
margin-top: 10vw;
}
}
@media screen and (min-width: 1152px) {
.o-contact__main {
display: -ms-grid;
display: grid;
-ms-grid-columns: 5fr 1fr 7fr;
grid-template-columns: 5fr 1fr 7fr;
grid-template-areas: "body . form" "extra extra extra";
}
.o-contact__main__body {
grid-area: body;
display: block;
}
.o-contact__main__form {
grid-area: form;
display: block;
}
.o-contact__body {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.o-contact__form {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
.o-contact__extra {
-ms-grid-row: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
}
@media screen and (min-width: 1152px){
.o-contact__main__body {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.o-contact__main__form {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
}
.o-contact__title {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
color: #DCA669;
}
.o-contact__heading {
font-size: 2rem;
line-height: 1.25;
font-family: "Titillium Web", sans-serif;
font-weight: 700;
color: #fff;
margin-top: 24px;
}
@media screen and (min-width: 840px) {
.o-contact__heading {
font-size: 3rem;
line-height: 1.1666666667;
}
}
.o-contact__subheading.o-contact__subheading {
font-size: 2rem;
line-height: 1.25;
font-family: "Titillium Web", sans-serif;
font-weight: 700;
color: #375082;
margin-bottom: 24px;
}
.o-contact__row + .o-contact__row {
margin-top: 24px;
}
.o-contact__label {
min-width: 40px;
}
.o-contact__timeslot {
margin-top: 24px;
}
.o-contact__timeframe {
color: #20335A;
}
.o-contact__time {
color: #DCA669;
}
/*
* content-image -> ci
*/
@media screen and (max-width: 839px) {
.o-ci {
margin-top: 12vw;
margin-bottom: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-ci {
margin-top: 10vw;
margin-bottom: 10vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-ci {
margin-top: 7.1428571429vw;
margin-bottom: 7.1428571429vw;
}
}
@media screen and (min-width: 1344px) {
.o-ci {
margin-top: 96px;
margin-bottom: 96px;
}
}
@media screen and (min-width: 840px) {
.o-ci {
display: flex;
flex-direction: row;
}
}
@media screen and (min-width: 840px) {
.o-ci__content {
width: 62.5%;
margin-top: 48px;
padding-left: 0;
padding-right: 12.5%;
}
.o-ci--is-reversed .o-ci__content {
padding-left: 12.5%;
padding-right: 0;
}
}
@media screen and (min-width: 1152px) {
.o-ci__content {
width: 50%;
padding-left: 8.3333333333% !important;
padding-right: 8.3333333333% !important;
}
}
.o-ci--is-reversed .o-ci__content {
order: 2;
}
@media screen and (max-width: 839px) {
.o-ci__image {
margin: 40px auto 0;
text-align: center;
}
.o-ci--has-shape .o-ci__image {
max-width: 71%;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-ci__image {
width: 50%;
margin-right: -12.5%;
}
.o-ci--is-indented .o-ci__image {
padding-right: 12.5%;
}
.o-ci--is-reversed .o-ci__image {
margin-right: 0;
margin-left: -12.5%;
}
.o-ci--is-indented.o-ci--is-reversed .o-ci__image {
padding-left: 12.5%;
padding-right: 0;
}
}
@media screen and (min-width: 1152px) {
.o-ci__image {
width: 50%;
}
.o-ci--is-indented .o-ci__image {
padding-right: 8.3333333333%;
}
.o-ci--is-indented.o-ci--is-reversed .o-ci__image {
padding-left: 8.3333333333%;
padding-right: 0;
}
}
.o-ci__content > * + * {
margin-top: 24px;
}
.o-ci__content h2 {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
font-weight: 400;
margin-bottom: 32px;
color: #1E2329;
}
@media screen and (min-width: 840px) {
.o-ci__content h2 {
font-size: 2rem;
line-height: 1.25;
}
}
.o-ci__content h3 {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
font-weight: 700;
color: #1E2329;
}
.o-ci__action {
margin-top: 32px;
}
.o-cookie-bar {
z-index: 9999;
position: fixed;
bottom: 0;
left: 0;
display: flex;
align-items: center;
width: 100%;
height: 64px;
background-color: #0C2243;
opacity: 1;
box-shadow: 0 -4px 6px 0 rgba(0, 0, 0, 0.2);
transition: opacity 0.5s, transform 0.6s;
transform: translate3d(0, 0, 0);
}
.o-cookie-bar.is-accepted {
display: none;
}
.o-cookie-bar.is-transitioning-out {
opacity: 0;
pointer-events: none;
transform: translate3d(0, 50%, 0);
}
.o-cookie-bar__main {
display: flex;
justify-content: center;
align-items: center;
}
.o-cookie-bar__text {
margin: 0;
font-size: 16px;
line-height: 1.2;
color: white;
}
.o-cookie-bar__link {
color: white;
transition: color 0.3s;
}
.o-cookie-bar__link:hover {
color: rgba(255, 255, 255, 0.75);
}
.o-cookie-bar__button {
display: inline-block;
margin-left: 15px;
padding: 5px 12px;
background-color: #4D7DCF;
font-size: 16px;
font-weight: 500;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
opacity: 1;
transition: background-color 0.3s;
}
.o-cookie-bar__button:hover {
background-color: rgba(77, 125, 207, 0.75);
}
@media screen and (min-width: 840px) {
.o-downloads {
display: flex;
justify-content: space-between;
}
}
@media screen and (min-width: 840px) {
.o-downloads__start,
.o-downloads__end {
width: 50%;
}
}
@media screen and (min-width: 840px) {
.o-downloads__start {
padding-right: 8.3333333333%;
}
}
@media screen and (max-width: 839px) {
.o-downloads__end {
margin-top: 12vw;
}
}
/**
* Footer organism
*/
.o-footer {
z-index: 20;
flex: none;
position: relative;
padding-bottom: 0;
color: #fff;
background-color: #375082;
transition: padding 0.6s;
}
.o-footer__brand {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
grid-area: brand;
display: block;
}
.o-footer__info {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
grid-area: info;
display: block;
}
.o-footer__nav--one {
-ms-grid-row: 7;
-ms-grid-column: 1;
grid-area: nav--one;
display: block;
}
.o-footer__nav--two {
-ms-grid-row: 7;
-ms-grid-column: 3;
grid-area: nav--two;
display: block;
}
.o-footer__title--one {
-ms-grid-row: 5;
-ms-grid-column: 1;
grid-area: title--one;
display: block;
}
.o-footer__title--two {
-ms-grid-row: 5;
-ms-grid-column: 3;
grid-area: title--two;
display: block;
}
.is-cookie-bar-visible .o-footer {
padding-bottom: 64px;
}
.o-footer.is-simple {
background-color: #20335A;
}
.ie.v11 .o-footer {
flex: none;
}
.o-footer__main {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
margin-top: 24px;
margin-bottom: 24px;
display: -ms-grid;
display: grid;
grid-gap: 32px 16px;
-ms-grid-columns: 1fr 16px 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: auto 32px auto 32px auto 32px auto;
grid-template-areas: "brand brand" "info info" "title--one title--two" "nav--one nav--two";
}
@media screen and (min-width: 840px) {
.o-footer__main {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-footer__main {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (max-width: 839px) {
.o-footer__main {
padding-top: 6vw;
padding-bottom: 6vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-footer__main {
padding-top: 5vw;
padding-bottom: 5vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-footer__main {
padding-top: 3.5714285714vw;
padding-bottom: 3.5714285714vw;
}
}
@media screen and (min-width: 1344px) {
.o-footer__main {
padding-top: 48px;
padding-bottom: 48px;
}
}
@media screen and (min-width: 700px) {
.o-footer__main {
-ms-grid-columns: 4fr 16px 2fr 16px 2fr;
grid-template-columns: 4fr 2fr 2fr;
-ms-grid-rows: auto 32px auto;
grid-template-areas: "brand title--one title--two" "info nav--one nav--two";
}
.o-footer__brand {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
}
.o-footer__info {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
}
.o-footer__nav--one {
-ms-grid-row: 3;
-ms-grid-column: 3;
}
.o-footer__nav--two {
-ms-grid-row: 3;
-ms-grid-column: 5;
}
.o-footer__title--one {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
.o-footer__title--two {
-ms-grid-row: 1;
-ms-grid-column: 5;
}
}
@media screen and (min-width: 1000px) {
.o-footer__main {
-ms-grid-columns: 3fr 2fr 3fr;
grid-template-columns: 3fr 2fr 3fr;
}
}
.o-footer__brand {
display: inline-block;
transition: opacity 200ms linear;
}
.o-footer__brand:hover {
opacity: 0.5;
}
.o-footer__logo {
width: 152px;
height: auto;
}
.o-footer__logo--logibin {
width: 180px;
}
.o-footer__title {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
color: #DCA669;
-ms-grid-row-align: center;
align-self: center;
}
.o-footer__list {
list-style: none;
margin: 0;
}
.o-footer__link {
display: inline-block;
position: relative;
z-index: 0;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: color 200ms linear;
}
.o-footer__link:hover {
color: #72A3F5;
}
.o-footer__link:focus {
outline-color: #72A3F5;
}
.o-footer__contact {
margin-top: 24px;
}
.o-footer__social {
display: flex;
list-style: none;
margin: 32px 0 0;
}
.o-footer__channel {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
margin-right: 16px;
}
.o-footer__icon {
flex: auto;
display: block;
height: 100%;
color: #fff;
background-repeat: no-repeat;
background-position: center;
transition-property: color;
transition-duration: 0.25s;
}
.o-footer__icon:hover {
color: #72A3F5;
}
/**
* NOTE:
* To prevent the honey pot from working
* the o-form can't have a position property.
*/
.o-form {
margin: 0 auto;
}
@media screen and (max-width: 1151px) {
.o-form {
max-width: 576px;
}
}
.o-form::before, .o-form::after {
content: "";
display: block;
}
.o-form::before {
padding-top: 29.607%;
background-color: #375082;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 0% 200%, 100% 200%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 0% 200%, 100% 200%, 100% 100%);
}
.o-form::after {
padding-bottom: 29.607%;
background-color: #20335A;
-webkit-clip-path: polygon(50% 100%, 100% 0%, 0% -100%, 0% -100%, 0% 0%);
clip-path: polygon(50% 100%, 100% 0%, 0% -100%, 0% -100%, 0% 0%);
}
.o-form--flat-top::before {
display: none;
}
.o-form__container {
background: linear-gradient(#375082, #20335A);
padding-left: 6vw;
padding-right: 6vw;
}
@media screen and (min-width: 1152px) {
.o-form__container {
padding-left: 0;
padding-right: 0;
}
}
.o-form__body {
max-width: 410px;
margin: 0 auto;
}
.o-form--flat-top .o-form__body {
padding-top: 64px;
}
.o-form__top {
-webkit-clip-path: polygon(50% 0%, 0% 33.17%, 0% 100%, 100% 100%, 100% 33.17%);
clip-path: polygon(50% 0%, 0% 33.17%, 0% 100%, 100% 100%, 100% 33.17%);
}
.o-form__title {
font-size: 2rem;
line-height: 1.25;
font-family: "Titillium Web", sans-serif;
font-weight: 700;
margin-bottom: 24px;
color: #fff;
text-align: center;
}
.o-form__row + .o-form__row {
margin-top: 24px;
}
.o-form__submit {
margin-top: 40px;
color: #fff;
text-align: center;
}
.o-header {
z-index: 50;
flex: none;
position: relative;
padding: 24px 0;
background-color: #375082;
}
.o-header.is-sticky {
opacity: 0;
position: fixed;
z-index: 50;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 -5px 30px black;
transform: translateY(-100%);
transition-property: transform, opacity;
transition-duration: 500ms;
transition-delay: 0s, 500ms;
transition-timing-function: cubic-bezier(0.73, 0.35, 0.44, 0.88);
}
.is-sticky-header-visible .o-header.is-sticky {
opacity: 1;
transform: none;
transition-delay: 0s;
}
@media screen and (min-width: 840px) {
.o-header {
padding: 24px 0 72px;
}
.o-header.is-sticky {
padding-bottom: 32px;
}
.o-header.is-simple {
padding: 48px 0;
}
}
.o-header__main {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
}
@media screen and (min-width: 840px) {
.o-header__main {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-header__main {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
.is-simple .o-header__main {
max-width: 578px;
}
.o-header__prenav {
display: none;
}
@media screen and (min-width: 840px) {
.o-header__prenav {
display: block;
width: 100%;
}
}
.o-header__logo {
flex: none;
margin-right: auto;
}
.o-header__logo:focus {
outline-offset: 2px;
outline-color: #72A3F5;
}
.o-header__logo--logibin .o-header__img {
height: 56px;
width: 185px;
}
.o-header__img {
height: 48px;
width: 152px;
}
.o-header__nav {
display: none;
margin-left: 32px;
}
@media screen and (min-width: 840px) {
.o-header__nav {
display: block;
}
}
@media screen and (min-width: 840px) {
.o-header__toggle {
display: none;
}
}
.o-hero {
position: relative;
z-index: 1;
color: #fff;
}
.o-hero::after {
position: absolute;
width: 24px;
height: 54.852631584px;
background-image: url(/img/ornament-hexagon-halve--stroked.svg);
bottom: 0;
left: 0;
transform: translateY(50%) rotate(180deg);
content: "";
display: block;
}
@media screen and (min-width: 480px) and (max-width: 839px) {
.o-hero::after {
width: 48px;
height: 109.705263168px;
}
}
@media screen and (min-width: 840px) {
.o-hero::after {
width: 76px;
height: 173.700000016px;
}
}
.o-hero__main {
position: relative;
z-index: 1;
}
@media screen and (min-width: 840px) {
.o-hero__main {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 840px) and (min-width: 840px) {
.o-hero__main {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 840px) and (min-width: 1152px) {
.o-hero__main {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (min-width: 840px) {
.o-hero__main {
display: flex;
flex-direction: row-reverse;
}
}
.o-hero__figure {
display: flex;
align-items: center;
}
@media screen and (max-width: 839px) {
.o-hero__figure {
width: calc(100% - 12vw);
margin: 0 auto;
}
}
@media screen and (max-width: 839px) {
.o-hero__figure {
text-align: center;
}
}
@media screen and (min-width: 840px) {
.o-hero__figure {
flex-basis: 50%;
padding-bottom: 40px;
}
}
.o-hero__content {
position: relative;
}
@media screen and (max-width: 839px) {
.o-hero__content {
padding-top: 12vw;
padding-bottom: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-hero__content {
padding-top: 10vw;
padding-bottom: 10vw;
}
}
@media screen and (max-width: 839px) {
.o-hero__content {
padding-top: 12vw;
padding-bottom: 18vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-hero__content {
padding-top: 10vw;
padding-bottom: 15vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-hero__content {
padding-top: 7.1428571429vw;
padding-bottom: 10.7142857143vw;
}
}
@media screen and (min-width: 1344px) {
.o-hero__content {
padding-top: 96px;
padding-bottom: 144px;
}
}
@media screen and (max-width: 839px) {
.o-hero__content {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 839px) and (min-width: 840px) {
.o-hero__content {
width: calc((100% / 10) * 8);
}
}
@media screen and (max-width: 839px) and (min-width: 1152px) {
.o-hero__content {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (min-width: 840px) {
.o-hero__content {
flex-basis: 50%;
}
}
/*
* --------------------------------
* Body text inside o-hero__content
* --------------------------------
*/
.o-hero__back {
display: none;
}
@media screen and (min-width: 840px) {
.o-hero__back {
display: block;
position: absolute;
top: 0;
left: 0;
}
}
.o-hero__title {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 24px;
color: #DCA669;
}
@media screen and (min-width: 840px) {
.o-hero__title {
padding-right: 8.3333333333%;
}
}
.o-hero__header {
font-size: 2rem;
line-height: 1.25;
font-family: "Titillium Web", sans-serif;
font-weight: 700;
margin-bottom: 48px;
}
@media screen and (min-width: 840px) {
.o-hero__header {
font-size: 3rem;
line-height: 1.1666666667;
}
}
@media screen and (min-width: 840px) {
.o-hero__header {
padding-right: 8.3333333333%;
}
}
@media screen and (min-width: 840px) {
.o-hero__text {
padding-right: 16.6666666667%;
}
}
.o-hero__action {
margin-top: 48px;
}
.o-hero__main[data-type=contact-person] {
flex-wrap: no-wrap;
flex-direction: column;
}
@media screen and (min-width: 1152px) {
.o-hero__main[data-type=contact-person] {
flex-direction: row;
}
}
@media screen and (max-width: 839px) {
.o-hero__main .o-hero__contact-person {
padding-bottom: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-hero__main .o-hero__contact-person {
padding-bottom: 10vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-hero__main .o-hero__contact-person {
padding-top: 7.1428571429vw;
}
}
@media screen and (min-width: 1344px) {
.o-hero__main .o-hero__contact-person {
padding-top: 96px;
}
}
@media screen and (min-width: 1152px) {
.o-hero__main .o-hero__contact-person {
flex-basis: 50%;
margin-top: 40px;
padding-bottom: 40px;
}
}
@media screen and (max-width: 1151px) {
.o-hero__main .o-hero__contact-person {
flex-basis: 100%;
}
}
@media screen and (max-width: 1151px) {
.o-hero__main .o-hero__content {
flex-basis: 100%;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-hero--focus-on-image .o-hero__figure {
flex-basis: 50%;
}
}
@media screen and (min-width: 1152px) {
.o-hero--focus-on-image .o-hero__figure {
flex-basis: 58.3333333333%;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-hero--focus-on-image .o-hero__content {
flex-basis: 50%;
padding-right: 4.1666666667%;
}
}
@media screen and (min-width: 1152px) {
.o-hero--focus-on-image .o-hero__content {
flex-basis: 41.6666666667%;
padding-right: 8.3333333333%;
}
}
.o-hero--small .o-hero__figure {
align-items: flex-end;
}
.o-hero--small .o-hero__figure > * {
margin: 0 auto;
}
@media screen and (min-width: 1344px) {
.o-hero--small .o-hero__figure {
flex-basis: 33.3333333333%;
padding-bottom: 0;
margin-bottom: -40px;
}
}
@media screen and (max-width: 839px) {
.o-hero--small .o-hero__content {
padding-bottom: 9vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-hero--small .o-hero__content {
padding-bottom: 7.5vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-hero--small .o-hero__content {
padding-bottom: 5.3571428571vw;
}
}
@media screen and (min-width: 1344px) {
.o-hero--small .o-hero__content {
padding-bottom: 72px;
}
}
@media screen and (min-width: 1152px) {
.o-hero--small .o-hero__content--wide {
flex-basis: 66.6666666667%;
margin-left: 4.1666666667%;
}
}
.o-hexagrid {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
position: relative;
}
@media screen and (min-width: 840px) {
.o-hexagrid {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-hexagrid {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (max-width: 839px) {
.o-hexagrid {
margin-top: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-hexagrid {
margin-top: 10vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-hexagrid {
margin-top: 7.1428571429vw;
}
}
@media screen and (min-width: 1344px) {
.o-hexagrid {
margin-top: 96px;
}
}
.o-hexagrid__title {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
font-weight: 400;
color: #1E2329;
margin-bottom: 48px;
}
@media screen and (min-width: 840px) {
.o-hexagrid__title {
font-size: 2rem;
line-height: 1.25;
}
}
.o-hexagrid__subtitle {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
font-weight: 700;
color: #20335A;
margin-bottom: 16px;
}
.o-hexagrid__list {
display: flex;
flex-wrap: wrap;
margin: -16px;
margin-bottom: 32px;
list-style: none;
}
@media screen and (min-width: 738px) {
.o-hexagrid__list {
margin: -2%;
margin-bottom: 48px;
}
}
.o-hexagrid__item {
flex: none;
width: calc((100% / 2) - 32px);
margin: 16px;
}
@media screen and (min-width: 738px) {
.o-hexagrid__item {
width: calc((100% / 3) - 4.1666666667%);
margin: 2.0833333333%;
}
}
@media screen and (min-width: 1124px) {
.o-hexagrid__item {
width: calc((100% / 4) - 4.1666666667%);
}
}
@media screen and (min-width: 1400px) {
.o-hexagrid__item {
width: calc((100% / 5) - 4.1666666667%);
}
}
.o-image-rack {
overflow: hidden;
}
@media screen and (max-width: 839px) {
.o-image-rack {
margin-top: 12vw;
margin-bottom: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-image-rack {
margin-top: 10vw;
margin-bottom: 10vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-image-rack {
margin-top: 7.1428571429vw;
margin-bottom: 7.1428571429vw;
}
}
@media screen and (min-width: 1344px) {
.o-image-rack {
margin-top: 96px;
margin-bottom: 96px;
}
}
.o-image-rack__main {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
position: relative;
margin-top: 64px;
}
@media screen and (min-width: 840px) {
.o-image-rack__main {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-image-rack__main {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
.o-image-rack__slide-area {
position: relative;
display: flex;
transition: transform 450ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.o-image-rack__item + .o-image-rack__item {
margin-left: 8px;
}
.o-image-rack__picture {
display: block;
}
.o-image-rack__img {
width: auto;
max-width: none;
pointer-events: none;
}
@media screen and (max-width: 589px) {
.o-image-rack__img {
max-height: 275px;
max-width: 80vw;
}
}
.o-image-rack__controls {
position: absolute;
top: 0;
right: 0;
z-index: 1;
margin-top: -48px;
width: 96px;
filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.5));
}
.o-image-rack__knobs {
display: flex;
margin: auto;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.o-image-rack__knobs::before {
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: 115.625%;
}
.o-image-rack__button {
position: relative;
width: 50%;
border: none;
background-color: #72A3F5;
cursor: pointer;
transition-property: background-color;
transition-duration: 250ms;
transition-timing-function: linear;
}
.o-image-rack__button::before {
content: "";
position: absolute;
left: 50%;
display: block;
background-image: url(/img/arrowhead.svg);
width: 9px;
height: 16px;
background-size: cover;
transform: translate(-50%, -50%);
}
.o-image-rack__button:focus, .o-image-rack__button:hover {
outline: none;
background-color: #4D7DCF;
}
.o-image-rack__button.previous::before {
transform: rotate(0.5turn) translate(-50%, 50%);
left: auto;
right: 50%;
}
.o-intro {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 840px) {
.o-intro {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-intro {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (max-width: 839px) {
.o-intro {
margin-top: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-intro {
margin-top: 10vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-intro {
margin-top: 7.1428571429vw;
}
}
@media screen and (min-width: 1344px) {
.o-intro {
margin-top: 96px;
}
}
@media screen and (min-width: 1152px) {
.o-intro__body {
margin-left: auto;
margin-right: auto;
width: 66.6666666667%;
}
}
.o-intro__title {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 16px;
color: #DCA669;
}
.o-intro__content {
font-size: 1.5rem;
line-height: 1.3333333333;
color: #1E2329;
}
.o-intro__action {
margin-top: 48px;
}
.o-other-models {
padding: 85px 0;
}
@media screen and (min-width: 850px) {
.o-other-models {
padding: 170px 0;
}
}
.o-other-models__title {
margin-bottom: 40px;
}
.o-other-models__grid > * + * {
margin-top: 60px;
}
@media screen and (min-width: 850px) {
.o-other-models__grid {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.o-other-models__grid > * + * {
margin-top: 0;
margin-left: 30px;
margin-right: 0;
}
}
@media screen and (min-width: 950px) {
.o-other-models__grid > * + * {
margin-left: 50px;
}
}
@media screen and (min-width: 1150px) {
.o-other-models__grid > * + * {
margin-left: 80px;
}
}
.o-other-models__item {
width: 100%;
max-width: 425px;
}
@media screen and (max-width: 849px) {
.o-other-models__item {
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 850px) {
.o-other-models__item {
margin-bottom: 0;
width: calc((100% - 60px) / 3);
max-width: none;
}
}
@media screen and (min-width: 950px) {
.o-other-models__item {
width: calc((100% - 100px) / 3);
}
}
@media screen and (min-width: 1150px) {
.o-other-models__item {
width: calc((100% - 160px) / 3);
}
}
.o-overlay-menu {
z-index: 100;
display: flex;
flex-direction: column;
position: fixed;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: linear-gradient(#375082, #20335A);
pointer-events: none;
opacity: 0;
transform: translateX(-100vw);
transition-property: transform, opacity;
transition-duration: 350ms, 300ms;
transition-timing-function: cubic-bezier(0.35, 0.05, 0.05, 1), linear;
transition-delay: 0s, 350ms;
}
.is-overlay-menu-active .o-overlay-menu {
pointer-events: all;
opacity: 1;
transform: none;
transition-delay: 150ms, 0s;
}
.ie .o-overlay-menu {
z-index: -1;
}
.is-overlay-menu-active .ie .o-overlay-menu {
z-index: 100;
}
.o-overlay-menu::before {
display: block;
content: "";
position: absolute;
top: 0;
right: -120vw;
width: 120vw;
height: 100%;
background: rgba(0, 0, 0, 0.6);
pointer-events: none;
opacity: 0;
transition-property: opacity;
transition-duration: 300ms;
transition-delay: 350ms;
transition-timing-function: linear;
}
.is-overlay-menu-active .o-overlay-menu::before {
opacity: 1;
transition-delay: 0s;
}
.o-overlay-menu__bar {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
padding-bottom: 24px;
}
@media screen and (min-width: 840px) {
.o-overlay-menu__bar {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-overlay-menu__bar {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
.o-overlay-menu__toggle {
transform: rotate(-0.5turn);
transition: transform 600ms ease-out;
transition-delay: 200ms;
}
.is-overlay-menu-active .o-overlay-menu__toggle {
transform: none;
}
.o-overlay-menu__nav {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
margin-top: 24px;
}
@media screen and (min-width: 840px) {
.o-overlay-menu__nav {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-overlay-menu__nav {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
.o-overlay-menu__list {
margin-left: 0;
list-style: none;
}
.o-overlay-menu__link {
font-size: 1.5rem;
line-height: 1.3333333333;
display: block;
padding: 4px 0;
color: #fff;
text-decoration: none;
transition: opacity 200ms linear;
}
.o-overlay-menu__link:hover, .o-overlay-menu__link:focus {
color: #72A3F5;
outline: none;
}
.o-overlay-menu__link.is-active {
opacity: 1;
position: relative;
font-weight: 600;
}
.o-overlay-menu__sublist {
list-style: none;
display: flex;
flex-wrap: wrap;
margin: 48px 0;
padding: 16px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.o-overlay-menu__subitem {
flex: 0 0 50%;
}
.o-overlay-menu__sublink {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
padding: 8px 0;
text-decoration: none;
}
.o-overlay-menu__sublink:hover {
color: #fff;
}
.o-page-title {
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
color: #DCA669;
}
.o-page-header {
font-size: 2rem;
line-height: 1.25;
font-family: "Titillium Web", sans-serif;
font-weight: 700;
color: #fff;
}
@media screen and (min-width: 840px) {
.o-page-header {
font-size: 3rem;
line-height: 1.1666666667;
}
}
/**
* Prefooter organism (lives inside o-footer)
*/
.o-prefooter {
position: relative;
border-bottom: 1px solid #2C5189;
}
@media screen and (max-width: 839px) {
.o-prefooter {
padding-top: 6vw;
padding-bottom: 6vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-prefooter {
padding-top: 5vw;
padding-bottom: 5vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-prefooter {
padding-top: 3.5714285714vw;
padding-bottom: 3.5714285714vw;
}
}
@media screen and (min-width: 1344px) {
.o-prefooter {
padding-top: 48px;
padding-bottom: 48px;
}
}
.o-prefooter::after {
position: absolute;
width: 24px;
height: 54.852631584px;
background-image: url(/img/ornament-hexagon-halve--stroked.svg);
top: 0;
right: 0;
transform: translateY(-50%);
content: "";
display: block;
}
@media screen and (min-width: 480px) and (max-width: 839px) {
.o-prefooter::after {
width: 48px;
height: 109.705263168px;
}
}
@media screen and (min-width: 840px) {
.o-prefooter::after {
width: 76px;
height: 173.700000016px;
}
}
.o-prefooter__main {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
}
@media screen and (min-width: 840px) {
.o-prefooter__main {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-prefooter__main {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (min-width: 920px) {
.o-prefooter__main {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.o-prefooter__tagline {
font-size: 2rem;
line-height: 1.25;
font-family: "Titillium Web", sans-serif;
font-weight: 700;
margin: 24px 0;
color: #fff;
}
@media screen and (min-width: 840px) {
.o-prefooter__tagline {
font-size: 3rem;
line-height: 1.1666666667;
}
}
.o-prefooter__cta {
display: flex;
flex-direction: column;
margin: 24px 0;
}
@media screen and (min-width: 920px) {
.o-prefooter__cta {
align-items: flex-end;
}
}
.o-prefooter__text {
font-size: 1.5rem;
line-height: 1.3333333333;
}
.o-prefooter__phone {
font-size: 1.5rem;
line-height: 1.3333333333;
font-weight: 700;
display: inline-block;
width: 100%;
text-align: right;
margin-top: 8px;
color: #fff;
text-decoration: none;
}
.o-prefooter__phone:hover {
opacity: 0.7;
text-decoration: underline;
}
.o-prefooter__action {
display: inline-block;
margin-top: 24px;
}
.o-stories__header {
margin-bottom: 12.5%;
}
.o-stories__footer {
margin-top: 8.333%;
}
/**
* Subfooter
*/
.o-subfooter {
z-index: 10;
font-family: "Titillium Web", sans-serif;
font-weight: 700;
font-size: 0.75rem;
line-height: 1.3333333333;
text-transform: uppercase;
letter-spacing: 2px;
font-family: "Barlow", sans-serif;
color: #72A3F5;
}
.o-subfooter__copyright {
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: copyright;
display: block;
}
.o-subfooter__trademark {
-ms-grid-row: 2;
-ms-grid-column: 2;
grid-area: trademark;
display: block;
}
.o-subfooter__nav {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-area: nav;
display: block;
}
.o-subfooter__main {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
border-top: 1px solid #2C5189;
display: -ms-grid;
display: grid;
-ms-grid-columns: 6fr 11fr;
grid-template-columns: 6fr 11fr;
grid-template-areas: "nav nav" "copyright trademark";
}
@media screen and (min-width: 840px) {
.o-subfooter__main {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-subfooter__main {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (min-width: 750px) {
.o-subfooter__main {
-ms-grid-columns: auto auto;
grid-template-columns: auto auto;
grid-template-areas: "nav trademark" "copyright .";
}
.o-subfooter__copyright {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
.o-subfooter__trademark {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
.o-subfooter__nav {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
}
}
@media screen and (min-width: 1152px) {
.o-subfooter__main {
-ms-grid-columns: 3fr 24px auto 24px 4fr;
grid-template-columns: 3fr auto 4fr;
grid-gap: 24px;
grid-template-areas: "copyright nav trademark";
}
.o-subfooter__copyright {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.o-subfooter__trademark {
-ms-grid-row: 1;
-ms-grid-column: 5;
}
.o-subfooter__nav {
-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-column-span: 1;
}
}
@media screen and (min-width: 750px) and (max-width: 1151px) {
.is-simple .o-subfooter__main {
grid-template-areas: "copyright trademark";
}
.is-simple .o-subfooter__main > .o-subfooter__copyright {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.is-simple .o-subfooter__main > .o-subfooter__trademark {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
}
.o-subfooter__copyright {
display: flex;
flex-wrap: wrap;
padding: 20px 0;
}
.o-subfooter__home {
text-decoration: none;
}
.o-subfooter__home:hover {
color: #aac8f9;
}
.o-subfooter__trademark {
padding: calc(20px - 8px) 0;
text-align: right;
}
.o-subfooter__list {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 12px 0;
margin: 0 -8px;
}
@media screen and (min-width: 1152px) {
.o-subfooter__list {
justify-content: flex-end;
}
}
.o-subfooter__item[data-order="1"] {
order: 1;
}
.o-subfooter__item[data-order="2"] {
order: 2;
}
.o-subfooter__item[data-order="3"] {
order: 3;
}
.o-subfooter__item[data-order="4"] {
order: 4;
}
.o-subfooter__item[data-order="5"] {
order: 5;
}
.o-subfooter__link {
display: block;
padding: 8px;
text-decoration: none;
}
@media screen and (min-width: 1152px) {
.o-subfooter__link {
padding: 8px 16px;
}
}
.o-subfooter__link:hover {
color: #aac8f9;
}
.o-usp__header {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
font-weight: 400;
margin-bottom: 48px;
text-align: center;
color: #1E2329;
}
@media screen and (min-width: 840px) {
.o-usp__header {
font-size: 2rem;
line-height: 1.25;
}
}
.o-usp__list {
margin-left: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
@media screen and (min-width: 950px) {
.o-usp__list {
margin: 0 -4.1666666667%;
}
}
@media screen and (min-width: 1152px) {
.o-usp__list {
margin: 0;
}
}
.o-usp__item {
display: flex;
color: #1E2329;
max-width: 440px;
margin: 24px auto;
}
.o-usp__item::before {
content: "";
flex: none;
display: block;
width: 48px;
height: 54px;
background-image: url(/img/usp.svg);
margin-right: 16px;
}
@media screen and (min-width: 384px) {
.o-usp__item::before {
margin-right: 24px;
}
}
@media screen and (min-width: 950px) {
.o-usp__item::before {
margin-right: 48px;
}
}
@media screen and (min-width: 450px) {
.o-usp__item {
font-size: 1.5rem;
line-height: 1.3333333333;
}
}
@media screen and (min-width: 950px) {
.o-usp__item {
max-width: none;
width: calc(50% - 8.3333333333%);
margin-right: 4.1666666667%;
margin-left: 4.1666666667%;
}
}
/* 7 - Templates
* Override styling for a specific template
=========================================================== */
/** ==========================================================================
* Templates
* =========================================================================*/
/*
* Special case for the contact page.
* Sort of a fake hero
* and create some room to pull the content back up
*/
.t-contact__header {
margin-top: 24px;
}
@media screen and (min-width: 1152px) {
.t-contact__header {
width: 50%;
min-height: 240px;
margin-top: 72px;
}
}
@media screen and (min-width: 1152px) {
.t-contact__form {
position: relative;
z-index: 2;
margin-top: -320px;
}
}
/*
* Special case for the title and list of the news index page.
* Sort of a fake hero with only the page title
* and create some room to pull the list partly back over the hero
*/
.t-news__header {
height: 272px;
margin-top: 24px;
}
@media screen and (min-width: 840px) {
.t-news__header {
height: 304px;
}
}
@media screen and (min-width: 1152px) {
.t-news__header {
height: 344px;
margin-top: 96px;
}
}
.t-news__wrapper {
min-height: 30vmin;
}
.t-news__grid {
position: relative;
z-index: 2;
margin-top: -144px;
margin-bottom: 72px;
}
@media screen and (min-width: 1152px) {
.t-news__grid {
margin-top: -240px;
}
}
/*
* Special case for the quotation page.
* Sort of a fake hero
* and create some room to pull the content back up
*/
.t-quotation__contain {
max-width: 578px;
}
.t-quotation__heading {
margin-top: 48px;
margin-bottom: 128px;
}
.t-quotation__body {
position: relative;
z-index: 1;
margin-top: -128px;
margin-bottom: 144px;
}
/* 8 - SCOPES
* Elements and classes that are scoped by a parent class
=========================================================== */
.s-checklist {
list-style: none;
margin-left: 0;
}
.s-checklist > * + * {
margin-top: 5px;
}
.s-checklist li {
position: relative;
vertical-align: middle;
padding-left: 32px;
}
.s-checklist li::before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
background-image: url(/img/check.svg);
background-repeat: no-repeat;
width: 16px;
height: 16px;
transform: translateY(7px);
}
/**
* All text elements that can be added by the user through a CMS
*/
.s-text h2, .s-text h3, .s-text h4 {
color: #1E2329;
}
.s-text h2 {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
font-weight: 400;
margin-top: 72px;
}
@media screen and (min-width: 840px) {
.s-text h2 {
font-size: 2rem;
line-height: 1.25;
}
}
.s-text h3 {
font-size: 1.5rem;
line-height: 1.3333333333;
font-family: "Titillium Web", sans-serif;
font-weight: 700;
margin-top: 48px;
}
.s-text > * + * {
margin-top: 32px;
}
.s-text > :first-child {
margin-top: 0 !important;
}
.s-text > ul:not([class]) {
list-style: none;
}
.s-text > ul:not([class]) > li {
position: relative;
margin-left: -1.125em;
padding-left: 28px;
}
.s-text > ul:not([class]) > li::before {
font-size: 2rem;
line-height: 1.25;
content: "\2022";
position: absolute;
top: -0.3em;
left: 0;
color: #DCA669;
}
.s-text > ol:not([class]) {
list-style: none;
counter-reset: ol-counter;
}
.s-text > ol:not([class]) > li {
counter-increment: ol-counter;
position: relative;
margin-left: -1.125em;
padding-left: 1.8em;
}
.s-text > ol:not([class]) > li::before {
content: counter(ol-counter) ". ";
position: absolute;
top: 0;
left: 0;
width: 1.275em;
text-align: right;
}
/* 9 - UTILITIES
* High-specificity, very explicit selectors.
* Overrides and helper classes.
=========================================================== */
/** =====================================================================================
* Color
===================================================================================== */
/**
* Here we print out all our helper classes for our defined colors
* Based on these articles:
* - http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
* - https://blog.atechmedia.com/css-for-multiple-themes/
* Output is in the form of:
.u-color-primary {
color: #bada55;
}
.u-bg-neutral--dark {
background-color: #decaff;
}
*/
.u-color-primary--500 {
color: #375082;
}
.u-bg-primary--500 {
background-color: #375082;
}
.u-color-primary--700 {
color: #20335A;
}
.u-bg-primary--700 {
background-color: #20335A;
}
.u-color-primary--900 {
color: #0C2243;
}
.u-bg-primary--900 {
background-color: #0C2243;
}
.u-color-primary--border {
color: #2C5189;
}
.u-bg-primary--border {
background-color: #2C5189;
}
.u-color-secondary--500 {
color: #DCA669;
}
.u-bg-secondary--500 {
background-color: #DCA669;
}
.u-color-secondary--700 {
color: #CB985E;
}
.u-bg-secondary--700 {
background-color: #CB985E;
}
.u-color-tertiary--300 {
color: #678AB4;
}
.u-bg-tertiary--300 {
background-color: #678AB4;
}
.u-color-tertiary--500 {
color: #5073A3;
}
.u-bg-tertiary--500 {
background-color: #5073A3;
}
.u-color-neutral--0 {
color: #fff;
}
.u-bg-neutral--0 {
background-color: #fff;
}
.u-color-neutral--100 {
color: #F7F8FA;
}
.u-bg-neutral--100 {
background-color: #F7F8FA;
}
.u-color-text--800 {
color: #1E2329;
}
.u-bg-text--800 {
background-color: #1E2329;
}
.u-color-text--500 {
color: #616366;
}
.u-bg-text--500 {
background-color: #616366;
}
.u-color-action--300 {
color: #72A3F5;
}
.u-bg-action--300 {
background-color: #72A3F5;
}
.u-color-action--500 {
color: #4D7DCF;
}
.u-bg-action--500 {
background-color: #4D7DCF;
}
.u-color-alert {
color: #ff8100;
}
.u-bg-alert {
background-color: #ff8100;
}
.u-color-warning--200 {
color: #fef5e1;
}
.u-bg-warning--200 {
background-color: #fef5e1;
}
.u-color-warning--500 {
color: #f8cd6b;
}
.u-bg-warning--500 {
background-color: #f8cd6b;
}
.u-color-warning--700 {
color: #da9b0c;
}
.u-bg-warning--700 {
background-color: #da9b0c;
}
.u-color-negative {
color: #cf3e3e;
}
.u-bg-negative {
background-color: #cf3e3e;
}
.u-color-positive {
color: #3ecf8e;
}
.u-bg-positive {
background-color: #3ecf8e;
}
.u-color-box-shadow {
color: rgba(0, 0, 0, 0.2);
}
.u-bg-box-shadow {
background-color: rgba(0, 0, 0, 0.2);
}
.u-bg-wrapper {
position: relative;
width: 100%;
/*
* Prevent collapsing margins
* If for some reason this method fails,
* NEVER try this with setting display inline-block!!
*/
}
.u-bg-wrapper::before, .u-bg-wrapper::after {
content: " ";
display: table;
}
.u-bg-triangle-primary {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
overflow: hidden;
background: linear-gradient(#375082, #20335A);
}
.u-bg-triangle-primary::before {
pointer-events: none;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 2000%;
height: 2000%;
background-color: rgba(12, 34, 67, 0.1);
transform-origin: left top;
transform: matrix(0.9, 0.52, -0.9, 0.52, 0, -2);
}
.u-bg-triangle-neutral {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
overflow: hidden;
}
.u-bg-triangle-neutral::before {
pointer-events: none;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 2000%;
height: 2000%;
background-color: rgba(12, 34, 67, 0.1);
transform-origin: left top;
transform: matrix(0.9, 0.52, -0.9, 0.52, 0, -2);
}
.u-bg-triangle-neutral::before {
top: 128px;
background-color: #F7F8FA;
}
.u-bg-half-neutral--100:before {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #f7f8fa;
}
.u-ornament-triangle {
position: absolute;
top: 0;
right: 0;
z-index: 1;
margin-bottom: 6.61vw;
}
.u-ornament-triangle::before {
pointer-events: none;
content: "";
display: block;
position: absolute;
width: 11.41vw;
height: 6.61vw;
top: 0;
right: 0;
background-image: linear-gradient(30deg, transparent 50%, #DCA669 50.5%);
}
.u-text-align-center {
text-align: center;
}
.u-fs-m {
font-size: 1.5rem;
line-height: 1.3333333333;
}
.u-fw-bold {
font-weight: 700;
}
.u-fw-regular {
font-weight: 400;
}
/** =====================================================================================
* Spacing
===================================================================================== */
/**
* For faster mobile-friendly development,
* use these utility classes for showing and hiding
* content by device via media query.
*
* Based on this table: https://v4-alpha.getbootstrap.com/layout/responsive-utilities/
*/
.u-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
overflow: hidden;
}
.u-hidden {
display: none !important;
}
@media screen and (max-width: 839px) {
.u-hidden\@s-down {
display: none !important;
}
}
@media screen and (min-width: 840px) {
.u-hidden\@m-up {
display: none !important;
}
}
@media screen and (max-width: 1151px) {
.u-hidden\@m-down {
display: none !important;
}
}
@media screen and (min-width: 1152px) {
.u-hidden\@l-up {
display: none !important;
}
}
@media screen and (max-width: 1343px) {
.u-hidden\@l-down {
display: none !important;
}
}
/*
* If you need to make a quick fix, you can do it here.
* Later when you have the time, you can move the fix into the correct place in the structure
*/
@media screen and (max-width: 839px) {
.u-spacing-pv {
padding-top: 12vw;
padding-bottom: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.u-spacing-pv {
padding-top: 10vw;
padding-bottom: 10vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.u-spacing-pv {
padding-top: 7.1428571429vw;
padding-bottom: 7.1428571429vw;
}
}
@media screen and (min-width: 1344px) {
.u-spacing-pv {
padding-top: 96px;
padding-bottom: 96px;
}
}
@media screen and (max-width: 839px) {
.u-spacing-pb- {
padding-bottom: 6vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.u-spacing-pb- {
padding-bottom: 5vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.u-spacing-pb- {
padding-bottom: 3.5714285714vw;
}
}
@media screen and (min-width: 1344px) {
.u-spacing-pb- {
padding-bottom: 48px;
}
}
@media screen and (max-width: 839px) {
.u-spacing-pb-- {
padding-bottom: 3vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.u-spacing-pb-- {
padding-bottom: 2.5vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.u-spacing-pb-- {
padding-bottom: 1.7857142857vw;
}
}
@media screen and (min-width: 1344px) {
.u-spacing-pb-- {
padding-bottom: 24px;
}
}
.u-spacing-pr0 {
padding-right: 0 !important;
}
/* ==========================================================================
* This grid can be turned on and off when you want to check
* if everything is nice in place.
* Set flag 'showGrid' to true in site.php
* ========================================================================== */
.u-visible-grid {
z-index: 10000;
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
position: fixed;
left: 0;
right: 0;
width: 100%;
pointer-events: none;
/* 8 point grid lines */
}
@media screen and (min-width: 840px) {
.u-visible-grid {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.u-visible-grid {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.u-visible-grid {
padding: 0;
}
}
.u-visible-grid__main {
height: 100vh;
background: repeating-linear-gradient(to right, rgba(255, 0, 43, 0.07), rgba(255, 0, 43, 0.07) 25%, rgba(255, 0, 43, 0.04) 25%, rgba(255, 0, 43, 0.04) 50%);
}
@media screen and (min-width: 840px) {
.u-visible-grid__main {
background: repeating-linear-gradient(to right, rgba(255, 0, 43, 0.07), rgba(255, 0, 43, 0.07) 12.5%, rgba(255, 0, 43, 0.04) 12.5%, rgba(255, 0, 43, 0.04) 25%);
}
}
@media screen and (min-width: 1152px) {
.u-visible-grid__main {
background: repeating-linear-gradient(to right, rgba(255, 0, 43, 0.07), rgba(255, 0, 43, 0.07) 8.3333333333%, rgba(255, 0, 43, 0.04) 8.3333333333%, rgba(255, 0, 43, 0.04) 16.6666666667%);
}
}