File: D:/HostingSpaces/SBogers10/otto-das.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
======================================== */
/* =========================================================
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
*/
/* ============================================
Define breakpoints for given formats
============================================ */
/* 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);
}
*/
/* 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, 700);
}
}
*/
/*
* Set vertical spacing only for mobile viewport
USAGE:
.example {
@include vspacing-s(
'margin-top' 1
);
}
*/
/*
* Set vertical spacing for viewport larger than mobile
* In flexible units (vw) and on max viewport in a fixed amount (px)
USAGE:
.example {
@include vspacing-m-up(
'padding-top' 0.33,
'margin-bottom' 0.5
);
}
*/
/*
* 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;
}
*/
/*
* Lobotomized owl selector.
* - Gives the children of the element spacing
* - https://alistapart.com/article/axiomatic-css-and-lobotomized-owls
*/
/**
* 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;
}
body {
font-size: 1rem;
line-height: 1.5;
position: relative;
line-height: 1.5;
font-family: "Roboto", sans-serif;
margin: 0;
color: #656565;
background: #ffffff;
overflow-x: hidden;
}
/**
* [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
*/
::selection {
background: #CCA952;
color: #ffffff;
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%;
}
/**
* 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:not([class]) {
position: relative;
color: #2BB1D9;
text-decoration: none;
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
}
a:not([class])::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 1px;
background: #2BB1D9;
content: "";
opacity: 0;
transition: height 0.3s, opacity 0.3s, transform 0.3s;
transform: translateY(-5px);
}
a:not([class]):hover::after {
height: 2px;
opacity: 1;
transform: translateY(0px);
}
h1, h2, h3, h4, h5, h6, hgroup,
ul, ol, dd,
p, figure,
pre, table, fieldset, hr {
margin-top: 0;
margin-bottom: 0;
}
h1 {
font-size: 2.5rem;
line-height: 1;
}
h2 {
font-size: 2rem;
line-height: 1.25;
font-weight: 400;
}
h3 {
font-size: 1.5rem;
line-height: 1.3333333333;
font-weight: 500;
}
h4 {
font-size: 1.25rem;
line-height: 1.6;
font-weight: 500;
}
h5, h6 {
font-size: 1rem;
line-height: 1.5;
font-weight: 600;
}
/** =====================================================================================
* 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;
}
/* 4 - Layout elements
* Design patterns (e.g. grids or media object)
=========================================================== */
/*==========================================================================
* Contain
* ========================================================================== */
.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;
}
}
/*===============================================================================
* Split layout in 2 equal columns
*
* Until viewport is wide enough the columns are stacked vertically
* ============================================================================== */
.l-split {
position: relative;
background-color: #ffffff;
height: 100%;
}
@media screen and (min-width: 840px) {
.l-split {
display: flex;
}
}
/**
* Special contain version for split.
* Doesn't restrain content on medium viewport
*/
.l-split--contain {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 840px) {
.l-split--contain {
width: 100%;
}
}
@media screen and (min-width: 1152px) {
.l-split--contain {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (min-width: 1152px) {
.l-split__column {
width: 50%;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.l-split__column:first-child {
width: 62.5%;
padding-right: 12.5%;
}
}
@media screen and (min-width: 1152px) {
.l-split__column:first-child {
padding-left: 8.3333333333%;
padding-right: 8.3333333333%;
}
}
@media screen and (max-width: 839px) {
.l-split__column:last-child {
margin-top: 6vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.l-split__column:last-child {
width: 37.5%;
}
}
.l-split--is-reversed .l-split__column:first-child {
order: 2;
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.l-split--is-reversed .l-split__column:first-child {
padding-left: 12.5%;
padding-right: 0;
}
}
@media screen and (min-width: 1152px) {
.l-split--is-reversed .l-split__column:first-child {
padding-left: 8.3333333333%;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.l-split--breakout-on-m .l-split__column:first-child {
width: 60%;
padding-left: 10%;
padding-right: 10%;
}
.l-split--breakout-on-m .l-split__column:last-child {
width: 40%;
}
}
/**
* When there is only 1 column, align it to the middle and contain the width
* Only one column is used e.g. in the tabslider when there is no image set
*/
@media screen and (min-width: 840px) {
.l-split__column:only-child {
margin: 0 auto;
width: 75%;
padding-left: 0;
padding-right: 0;
}
}
@media screen and (min-width: 1152px) {
.l-split__column:only-child {
width: 50%;
padding-left: 0 !important;
}
}
.l-split__column--vpad {
margin-top: 40px;
margin-bottom: 40px;
}
@media screen and (min-width: 840px) {
.l-split__column--vpad {
margin-top: 80px;
margin-bottom: 80px;
}
}
@media screen and (min-width: 1152px) {
.l-split__column--leftpad {
padding-left: 8.3333333333%;
}
}
/*==========================================================================
* 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-narrow {
margin-left: auto;
margin-right: auto;
width: 75%;
max-width: 38em;
}
}
@media screen and (min-width: 1152px) {
.l-restrict-narrow {
width: 50%;
}
}
@media screen and (min-width: 840px) {
.l-restrict-wide {
margin-left: auto;
margin-right: auto;
width: 87.5%;
}
}
@media screen and (min-width: 1152px) {
.l-restrict-wide {
width: 66.6666666667%;
}
}
/* 5 - COMPONENTS
* Discrete complete chunks of UI.
* Designed components
=========================================================== */
/** ==========================================================================
* Components
* =========================================================================*/
.c-button {
border-radius: 8px;
font-size: 0.875rem;
line-height: 1.1428571429;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
background-color: #CCA952;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
border: none;
padding: 16px 0;
text-transform: uppercase;
position: relative;
overflow: hidden;
cursor: pointer;
text-decoration: none;
}
.c-button:focus {
outline: none;
box-shadow: 0 0 0 1px #ffffff, 0 0 5px 2px #CCA952;
}
.c-button:active:not(:disabled) {
outline: none;
box-shadow: none;
}
.c-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.c-button::after {
content: "";
position: absolute;
z-index: 1;
top: calc(50% - 2px);
left: calc(50% - 2px);
width: 4px;
height: 4px;
opacity: 0;
border-radius: 50%;
background: #b18d34;
pointer-events: none;
transition-property: opacity, transform;
transition-duration: 0.5s;
}
.c-button:hover:not(:disabled)::after {
opacity: 1;
transform: scale(100);
}
.c-button__text {
position: relative;
z-index: 2;
padding: 0 24px;
text-align: center;
}
.c-button--icon .c-button__text {
padding-right: 16px;
}
.c-button__icon {
display: none;
position: relative;
z-index: 2;
top: -1px;
margin-right: 15px;
transition: transform 0.3s;
}
.c-button:hover:not(:disabled) .c-button__icon {
transform: translateX(3px);
}
.c-button__icon:first-child {
margin-right: 0;
margin-left: 15px;
}
.c-button--icon .c-button__icon {
display: block;
width: 16px;
}
/* ==========================================================================
* Default button
* ========================================================================== */
.c-ghostbutton {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 8px;
font-size: 0.875rem;
line-height: 1.1428571429;
color: #ffffff;
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-ghostbutton:focus {
outline: none;
box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.5);
}
.c-ghostbutton:active:not(:disabled) {
outline: none;
box-shadow: none !important;
}
.c-ghostbutton:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.c-ghostbutton::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-ghostbutton: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-ghostbutton__text {
position: relative;
z-index: 2;
padding: 0 24px;
text-align: center;
}
.c-button--icon .c-ghostbutton__text {
padding-right: 16px;
}
.c-ghostbutton__icon {
display: none;
position: relative;
z-index: 2;
top: -1px;
margin-right: 15px;
transition: transform 0.3s;
}
.c-ghostbutton:hover:not(:disabled) .c-ghostbutton__icon {
transform: translateX(3px);
}
.c-ghostbutton--icon .c-ghostbutton__icon {
display: block;
width: 16px;
}
.c-ghostbutton__icon:first-child {
margin-right: 0;
margin-left: 15px;
}
.c-card {
display: block;
text-decoration: none;
position: relative;
}
/*
* Card that does some animations on hover
*/
.c-card--has-action {
overflow: hidden;
z-index: 0;
}
.c-card--has-action::before, .c-card--has-action::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
pointer-events: none;
}
.c-card--has-action::before {
background-color: rgba(20, 44, 51, 0.92);
background: radial-gradient(rgba(20, 44, 51, 0.8) 0%, rgba(20, 44, 51, 0.92) 100%);
transform: translateX(-135%) rotate(11deg) scale(1.3);
transform-origin: center;
transition-property: opacity, transform;
transition-duration: 300ms;
transition-delay: 100ms;
transition-timing-function: cubic-bezier(0.45, 0.1, 0.3, 1);
}
.c-card--has-action::after {
z-index: 2;
width: 25px;
margin: auto;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23CCA952' d='M13.4 6.783H.762A.772.772 0 0 1 0 6c0-.432.341-.783.762-.783H13.4L9.623 1.336a.798.798 0 0 1 0-1.107.747.747 0 0 1 1.077 0l5.077 5.218a.798.798 0 0 1 0 1.106L10.7 11.771a.747.747 0 0 1-1.077 0 .798.798 0 0 1 0-1.107L13.4 6.783z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transform: scale(1.75);
transition-property: opacity, transform;
transition-duration: 200ms;
}
.c-card--has-action:hover:before {
opacity: 0.92;
transform: rotate(11deg) scale(1.3);
transition-duration: 400ms;
transition-delay: 50ms;
}
.c-card--has-action:hover:after {
opacity: 1;
transform: none;
transition-duration: 400ms;
transition-delay: 200ms;
}
.c-card--has-action:focus {
outline-offset: 2px;
outline-color: #2BB1D9;
}
.c-card__picture {
width: 100%;
display: block;
}
.c-card__img {
object-fit: cover;
width: 100%;
}
@media screen and (max-width: 839px) {
.c-card__img {
max-height: 53.5vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.c-card__img {
max-height: 25.6vw;
}
}
.c-card__label {
font-size: 0.875rem;
line-height: 1.1428571429;
position: relative;
z-index: 3;
overflow: hidden;
padding: 14px 10px 15px;
text-align: center;
font-weight: 500;
text-transform: uppercase;
color: #ffffff;
background-color: #142C33;
transition-property: background;
transition-duration: 400ms;
}
.c-card--has-action:hover .c-card__label {
color: #ffffff;
}
.c-card__label::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #CCA952;
pointer-events: none;
transform: translateY(200%) rotate(5deg) scale(2);
transform-origin: center;
transition-property: opacity, transform;
transition-duration: 200ms;
transition-delay: 200ms;
transition-timing-function: cubic-bezier(0.45, 0.1, 0.3, 1);
}
.c-card--has-action:hover .c-card__label::before {
opacity: 1;
transform: rotate(5deg) scale(2);
transition-duration: 400ms;
transition-delay: 0ms;
}
.c-card__info {
padding: 16px 32px;
background-color: #f8f8f8;
}
.c-card__heading {
font-size: 1rem;
line-height: 1.5;
color: #656565;
}
.c-card__subheading {
color: #999999;
}
.c-card__textline {
color: #999999;
}
*:not(.c-card__textline) + .c-card__textline {
margin-top: 16px;
}
.c-close {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
position: relative;
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 #ffffff;
}
.c-close:after, .c-close:before {
content: "";
position: absolute;
top: 20px;
right: 20%;
left: 20%;
height: 3px;
margin-top: -2px;
pointer-events: none;
background: #ffffff;
border-radius: 3px;
}
.c-close:before {
transform: rotate(45deg);
}
.c-close:after {
transform: rotate(-45deg);
}
.c-close:hover {
transform: scale(1.2);
}
.c-connect {
display: inline-flex;
flex-direction: column;
align-items: center;
}
@media screen and (min-width: 840px) {
.c-connect {
flex-direction: row;
}
}
.c-connect__phone {
font-size: 1.5rem;
line-height: 1.3333333333;
font-weight: 600;
text-decoration: none;
color: #1A1A1A;
transition: opacity 300ms;
}
.c-connect__phone:hover {
opacity: 0.7;
text-decoration: underline;
}
.c-connect__phone:focus {
outline: none;
color: #2BB1D9;
text-shadow: 1px 1px 0 #fff, 2px 2px 0 rgba(26, 26, 26, 0.35);
text-decoration: underline;
}
.c-connect__or {
margin: 0 16px;
color: #656565;
}
@media screen and (max-width: 839px) {
.c-connect__or {
margin: 8px 0 16px;
}
}
.c-data {
margin: 8px 0;
}
.c-data__line {
display: flex;
}
.c-data__label {
min-width: 64px;
font-weight: 600;
color: #1A1A1A;
}
.c-data__value {
flex-grow: 9999;
color: #656565;
text-decoration: none;
}
.c-data__value[href]:hover {
text-decoration: underline;
}
.c-data__value[href]:focus {
outline-color: #2BB1D9;
}
.c-download-list {
list-style: none;
padding: 0;
margin: 0;
}
.c-download-list__item {
border-bottom: 1px solid #c8c8c8;
transition: color 0.2s, background-color 0.2s;
}
.c-download-list__item:hover {
background-color: rgba(200, 200, 200, 0.2);
}
.c-download-list__link {
display: flex;
padding: 8px 0;
text-decoration: none;
}
.c-download-list__icon {
display: inline-block;
width: 16px;
}
.c-download-list__icon svg {
width: 100%;
}
.c-download-list__text {
width: calc(100% - 16px);
padding-left: 8px;
}
.c-download-list__item:hover .c-download-list__text {
color: #142C33;
}
.c-form-group__label {
font-size: 0.9375rem;
line-height: 1.6;
display: block;
padding: 4px 0;
color: #999999;
}
.c-form-group__error {
display: none;
}
.has-error .c-form-group__error:not(:empty) {
font-size: 0.875rem;
line-height: 1.1428571429;
display: block;
padding: 8px;
color: #2BB1D9;
background-color: rgba(43, 177, 217, 0.1);
border: 1px solid #2BB1D9;
border-top: none;
border-radius: 0 0 4px 4px;
}
.c-form-feedback {
font-size: 0.9375rem;
line-height: 1.6;
border-radius: 4px;
margin: 0 0 8px;
padding: 24px 32px;
color: #1A1A1A;
background-color: rgba(255, 211, 58, 0.2);
border: 1px solid #ffd33a;
}
.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: 500;
}
.c-form-feedback li::first-letter {
text-transform: uppercase;
}
.c-hamburger {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
position: relative;
width: 40px;
height: 40px;
padding: 0;
color: #000000;
background: none;
border: none;
outline: none;
cursor: pointer;
}
.c-hamburger:focus {
box-shadow: 0 0 3px 2px #2BB1D9;
}
.c-hamburger.is-light {
color: #ffffff;
}
.c-hamburger > span, .c-hamburger:after, .c-hamburger:before {
content: "";
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:before {
top: 12px;
transform: scaleX(0.8);
}
.c-hamburger:after {
top: 28px;
transform: scaleX(0.5);
}
.c-hamburger:hover > span {
transform: scaleX(0.8);
}
.c-hamburger:hover:after, .c-hamburger:hover:before {
transform: scaleX(1);
}
.is-overlay-menu-active .c-hamburger > span {
transform: scaleX(1) !important;
}
.is-overlay-menu-active .c-hamburger:before {
transform: translateY(3px) scaleX(1) !important;
transition-delay: 0s;
}
.is-overlay-menu-active .c-hamburger:after {
transform: translateY(-3px) scaleX(1) !important;
transition-delay: 0s;
}
.c-heading {
font-size: 2rem;
line-height: 1.25;
margin: 40px 0;
color: #1A1A1A;
}
@media screen and (min-width: 1152px) {
.c-heading--indent {
padding-left: 8.3333333333%;
}
}
@media screen and (min-width: 840px) {
.c-hero {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 840px) and (min-width: 840px) {
.c-hero {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 840px) and (min-width: 1152px) {
.c-hero {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
.c-hero__main {
position: relative;
background-color: #ffffff;
}
.c-hero__slider {
overflow: hidden;
position: relative;
padding-bottom: 55.556%;
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.c-hero__slider {
padding-bottom: 50%;
}
}
.c-hero__picture {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition-property: opacity, filter;
transition-duration: 500ms;
transition-timing-function: linear;
filter: blur(5px);
}
.c-hero__picture.is-active {
opacity: 1;
transform: translateY(0) scale(1);
filter: none;
}
.c-hero__image {
width: 100%;
}
.c-hero__caption {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
font-size: 3rem;
line-height: 1;
position: relative;
padding: 24px;
line-height: 1.16;
text-align: center;
color: #ffffff;
background-color: #142C33;
pointer-events: none;
}
@media screen and (max-width: 383px) {
.c-hero__caption {
font-size: 13vw;
}
}
@media screen and (min-width: 840px) {
.c-hero__caption {
position: absolute;
top: 50%;
max-width: 66.6666666667%;
padding: 32px;
text-align: left;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.c-hero__caption {
max-width: 60%;
padding: 2.6vw;
font-size: 4.2vw;
}
}
@media screen and (min-width: 1152px) {
.c-hero__caption {
font-size: 3.5rem;
line-height: 1;
padding-left: 4.1666666667%;
}
}
.c-hero__controls {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
padding: 8px;
}
.c-hero__controls::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 48px;
width: 100%;
background: linear-gradient(to top, black, transparent);
opacity: 0.3;
}
.c-hero__scroll {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
left: 50%;
width: 40px;
height: 40px;
padding: 10px;
color: #ffffff;
background-color: #CCA952;
border-radius: 100%;
transform: translate(-50%, 50%) rotate(0.25turn);
transition: background-color 200ms;
}
@media screen and (max-width: 839px) {
.c-hero__scroll {
display: none;
}
}
.c-hero__scroll > svg {
transition: transform 200ms;
}
.c-hero__scroll:hover {
cursor: pointer;
background: #b8984a;
}
.c-hero__scroll:hover > svg {
transform: translateX(3px);
}
.c-hero__scroll:focus {
outline: none;
background: #b8984a;
box-shadow: 0 0 0 3px #ffffff;
}
/*
* Alternative version of the hero element
* Comment out when needed
*/
.c-hero--alternative::before {
top: 0;
bottom: 0;
width: 50vw;
background: linear-gradient(to bottom, #007EA3 50%, #005B75 50%, #005B75 81.5%, transparent 81.5%);
}
.c-hero--alternative::after {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to bottom, #007EA3 63%, #005B75 63%);
}
.c-hero--alternative .c-hero__caption::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: -50vw;
background-color: #005B75;
}
.c-input {
font-size: 0.9375rem;
line-height: 1.6;
width: 100%;
padding: 7px 16px;
color: #1A1A1A;
background-color: #ffffff;
border: 1px solid #c8c8c8;
outline: none;
}
.has-error .c-input {
box-shadow: 0 0 7px -3px #2BB1D9;
border-color: #2BB1D9;
}
.c-input:focus {
box-shadow: 0 0 7px -3px #142C33;
border-color: #142C33;
}
textarea.c-input {
display: block;
padding: 16px;
min-height: 158px;
line-height: 24px;
resize: vertical;
}
.c-language {
position: relative;
color: #c8c8c8;
}
.c-language.is-light {
color: #ffffff;
}
.c-language__button {
font-size: 0.9375rem;
line-height: 1.6;
border-radius: 4px;
display: flex;
position: relative;
width: 100%;
padding: 8px;
text-align: left;
background: transparent;
color: inherit;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: background-color 0.15s, box-shadow 0.15s;
}
.c-language__button:focus {
outline: none;
}
.c-language:hover .c-language__button {
color: #CCA952;
}
.c-language__icon {
flex: none;
pointer-events: none;
}
.c-language__label {
margin-left: 4px;
font-weight: bold;
}
.c-language__dropdown {
position: absolute;
right: 0;
top: 100%;
min-width: 100%;
margin: 0;
opacity: 0;
list-style: none;
border-radius: 4px;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.15);
pointer-events: none;
transform: translate3d(0, -5px, 0);
transition: opacity 0.3s, transform 0.3s;
}
.c-language:hover .c-language__dropdown {
opacity: 1;
pointer-events: all;
transform: translate3d(0, 0, 0);
}
.c-language__item {
background-color: #ffffff;
overflow: hidden;
}
.c-language__item:nth-child(even) {
background-color: #f2f2f2;
}
.c-language__item:first-child {
border-radius: 4px 4px 0 0;
}
.c-language__item:last-child {
border-radius: 0 0 4px 4px;
}
.c-language__item:first-child:last-child {
border-radius: 4px;
}
.c-language__link {
display: block;
padding: 4px 8px;
text-align: center;
font-weight: bold;
text-decoration: none;
color: #656565;
transition: background-color 0.3s;
}
.c-language__link:hover {
color: #ffffff;
background-color: #CCA952;
}
.c-nav {
height: 100%;
padding: 0;
}
.c-nav__list {
display: flex;
justify-content: flex-end;
align-items: center;
margin-left: 3vw;
padding: 0;
list-style: none;
}
.c-nav__item {
white-space: nowrap;
}
.c-nav__item:last-child {
margin-right: 0;
}
@media screen and (max-width: 1151px) {
.c-nav__item {
font-size: calc(1.3vw + 0.05rem);
margin-right: 1.3vw;
}
}
@media screen and (min-width: 1152px) {
.c-nav__item {
margin-right: 2.2vw;
}
}
@media screen and (min-width: 1344px) {
.c-nav__item {
margin-right: 4%;
}
}
.c-nav__link {
position: relative;
padding: 4px;
color: #1A1A1A;
text-decoration: none;
}
.is-header-alt .c-nav__link {
color: #ffffff;
}
.c-nav__link:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
.c-nav__link.is-active {
font-weight: 500;
}
.c-nav__link.is-active::before {
background-color: #007EA3;
transform: scaleX(1);
transform-origin: bottom left;
}
.c-nav__link:focus {
outline-color: #2BB1D9;
}
.c-nav__link::before {
content: "";
display: block;
position: absolute;
z-index: -1;
left: 4px;
bottom: 1px;
width: calc(100% - 8px);
height: 2px;
background-color: #c8c8c8;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
.is-header-alt .c-nav__link::before {
background-color: rgba(255, 255, 255, 0.5);
}
.c-pagination {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 8px;
border: 1px solid #c8c8c8;
list-style: none;
margin-left: 0;
overflow: hidden;
}
.c-pagination__item {
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 839px) {
.c-pagination__item {
display: none;
}
.c-pagination__item:first-child, .c-pagination__item:last-child, .c-pagination__item.is-last-page, .c-pagination__item.is-active {
display: flex;
}
.c-pagination__item.is-last-page {
pointer-events: none;
}
}
.c-pagination__item + .c-pagination__item {
border-left: 1px solid;
border-color: inherit;
}
.c-pagination__text,
.c-pagination__link,
.c-pagination__prev,
.c-pagination__next {
display: flex;
justify-content: center;
align-items: center;
min-width: 48px;
min-height: 48px;
padding: 8px;
}
.c-pagination__text {
color: #1A1A1A;
opacity: 0.35;
}
.c-pagination__link {
color: #1A1A1A;
text-decoration: none;
transition: color 0.2s, background-color 0.2s;
}
.c-pagination__link:hover {
color: #121212;
background: #f8f8f8;
}
.is-active > .c-pagination__link {
box-shadow: inset 0 0 10px -5px #007EA3;
font-weight: bold;
color: #007EA3;
cursor: default;
}
.c-pagination__prev,
.c-pagination__next {
transition: background 0.2s;
transform: rotate(0.75turn);
}
.c-pagination__prev.is-inactive,
.c-pagination__next.is-inactive {
color: rgba(26, 26, 26, 0.4);
background: transparent;
}
.c-pagination__prev {
transform: rotate(0.25turn);
}
/*
* Page title
*/
.c-page-title {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
padding-top: 16px;
padding-bottom: 16px;
color: #1A1A1A;
}
@media screen and (min-width: 840px) {
.c-page-title {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.c-page-title {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (min-width: 840px) {
.c-page-title {
padding-top: 48px;
padding-bottom: 48px;
}
}
.c-page-title--center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 840px) {
.c-page-title--center {
width: 75%;
}
}
@media screen and (min-width: 1152px) {
.c-page-title--center {
width: 66.6666666667%;
}
}
@media screen and (min-width: 840px) {
.c-page-title__preheading {
margin-top: -16px;
margin-bottom: 16px;
}
}
.c-page-title__heading {
font-size: 2.5rem;
line-height: 1;
line-height: 1.3;
}
.c-page-title__heading-small {
display: block;
font-size: 1.25rem;
line-height: 1.6;
color: #c8c8c8;
}
.c-page-title--on-dark {
color: #ffffff;
}
.c-projector {
position: relative;
height: 100%;
max-width: 575px;
margin: 0 auto;
}
.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__caption {
font-size: 0.9375rem;
line-height: 1.6;
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 2;
grid-row: 2;
-webkit-user-select: text;
-ms-user-select: text;
user-select: text;
margin-top: 8px;
color: #999999;
}
.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;
background-color: #f8f8f8;
opacity: 0;
transition: opacity 0.5s;
}
.c-projector__picture.is-active {
opacity: 1;
}
.c-projector__control {
-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;
}
.c-projector__img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 839px) {
.c-projector__img {
max-height: 78vh;
}
}
.c-servicepoint {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
text-align: left;
margin-top: -16px;
}
.c-servicepoint__image {
margin-top: 16px;
margin-right: 16px;
border-radius: 100%;
max-width: 176px;
}
@media screen and (max-width: 539px) {
.c-servicepoint__image {
width: 96px;
}
}
.c-servicepoint__content {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
flex-grow: 9999;
min-width: 180px;
margin-top: 16px;
}
.c-servicepoint__body {
margin-top: 8px;
}
.c-servicepoint__footer {
margin-top: 8px;
}
.c-servicepoint__heading {
font-size: 1rem;
line-height: 1.5;
color: #656565;
border-radius: 100%;
}
.c-servicepoint__subheading {
font-size: 0.9375rem;
line-height: 1.6;
color: #999999;
}
.c-sitemap__item {
font-size: 1.5rem;
line-height: 1.3333333333;
color: #656565;
}
.c-sitemap__link {
display: block;
padding: 4px 0;
text-decoration: none;
}
.c-sitemap__link:hover {
color: #007EA3;
text-decoration: underline;
}
/*
* Skip Link
*/
.c-skip-link {
font-size: 0.9375rem;
line-height: 1.6;
position: fixed;
top: -100vh;
left: 50%;
transform: translateX(-50%);
color: #2BB1D9;
text-decoration: none;
}
.c-skip-link:focus {
outline-color: #2BB1D9;
outline-offset: 2px;
top: 5px;
/* Now the link will appear */
}
.c-slide-indicator {
display: flex;
justify-content: flex-end;
align-items: center;
}
.c-slide-indicator__button {
position: relative;
border: none;
background-color: #CCA952;
color: #ffffff;
height: 40px;
width: 40px;
}
.c-slide-indicator__button + .c-slide-indicator__button {
margin-left: 8px;
}
.c-slide-indicator__button[aria-label=previous] > svg {
transform: rotate(90deg);
}
.c-slide-indicator__button[aria-label=next] > svg {
transform: rotate(-90deg);
}
.c-slide-indicator__button:hover {
cursor: pointer;
background-color: #c59e3c;
}
.c-slide-indicator__button:focus {
outline: none;
background-color: #c59e3c;
}
.c-slide-indicator__dot {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
background-color: transparent;
border: none;
cursor: pointer;
transition-property: background-color, opacity;
transition-duration: 250ms;
}
.c-slide-indicator__dot:focus {
outline: none;
}
.c-slide-indicator__dot:hover:not(.is-active), .c-slide-indicator__dot:focus:not(.is-active) {
opacity: 0.5;
}
.c-slide-indicator__dot:before, .c-slide-indicator__dot: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__dot:before {
top: calc((30px - 8px) / 2);
right: calc((30px - 8px) / 2);
bottom: calc((30px - 8px) / 2);
left: calc((30px - 8px) / 2);
background-color: #ffffff;
}
.c-slide-indicator__dot:after {
top: calc((30px - 12px) / 2);
right: calc((30px - 12px) / 2);
bottom: calc((30px - 12px) / 2);
left: calc((30px - 12px) / 2);
border: 1px solid #ffffff;
transform: scale(1.4);
opacity: 0;
}
.c-slide-indicator__dot.is-active:before {
background-color: #000000;
border-color: rgba(255, 255, 255, 0.9);
transform: scale(0.75);
}
.c-slide-indicator__dot.is-active:after {
opacity: 0.9;
transform: scale(1);
}
.c-slide-indicator__dot:focus {
opacity: 1 !important;
}
.c-slide-indicator__dot:focus:before {
box-shadow: 0 0 0 2px black, 0 0 10px 1px white;
}
.c-slide-indicator__dot:focus:after {
box-shadow: 0 0 0 2px black, 0 0 10px 1px white;
}
.c-subnav {
height: 100%;
padding: 1px 6vw 80px 6vw;
background-color: #f8f8f8;
}
@media screen and (min-width: 840px) {
.c-subnav {
padding-top: 40px;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.l-split--breakout-on-m .c-subnav {
padding-left: 25%;
}
}
@media screen and (min-width: 1152px) {
.c-subnav {
padding-left: 16.6666666667%;
padding-right: 16.6666666667%;
}
}
.c-subnav__list {
margin-top: 40px;
list-style-type: none;
margin-left: 0;
}
.c-subnav__item--back {
margin-top: 24px;
}
.c-subnav__link {
position: relative;
display: flex;
padding: 8px 0;
color: #656565;
text-decoration: none;
cursor: pointer;
transition: color 250ms;
}
.c-subnav__link:hover {
color: #1A1A1A;
}
.c-subnav__link:focus {
outline-color: #2BB1D9;
}
.c-subnav__item.is-active .c-subnav__link {
color: #007EA3;
font-weight: 600;
}
.c-subnav__link::before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom: 1px solid #c8c8c8;
}
.c-subnav__item.is-active .c-subnav__link::before {
border-color: #007EA3;
border-width: 2px;
}
.c-subnav__icon {
display: inline-flex;
align-items: center;
margin-left: auto;
color: #c8c8c8;
transform: translateX(-8px);
transition-property: transform, color;
transition-duration: 250ms;
}
.c-subnav__link:hover .c-subnav__icon {
transform: none;
color: #1A1A1A;
}
.c-subnav__item.is-active .c-subnav__icon {
display: none;
}
/**
* 1. Color gets inherited and used for nested elements with 'currentColor' property
* 2. Reset default button styling
*/
.c-textbutton {
display: inline-flex;
justify-content: center;
align-items: center;
color: #007EA3;
/* 1 */
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: #2BB1D9;
}
.c-textbutton:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.c-textbutton:focus {
outline-color: #2BB1D9;
}
.c-textbutton__text {
font-size: 1rem;
line-height: 1.5;
}
.c-textbutton__icon {
display: none;
position: relative;
margin-left: 8px;
transition: transform 0.3s;
}
.c-textbutton:hover:not(:disabled) .c-textbutton__icon {
transform: translateX(3px);
}
.c-textbutton--icon .c-textbutton__icon {
display: block;
}
.c-textbutton--is-reversed .c-textbutton__text {
order: 2;
}
.c-textbutton--is-reversed .c-textbutton__icon {
order: 1;
top: 1px;
margin-left: 0;
margin-right: 8px;
transform: rotate(0.5turn);
}
.c-textbutton--is-reversed:hover:not(:disabled) .c-textbutton__icon {
transform: rotate(0.5turn) translateX(3px);
}
.c-textbutton--on-dark {
color: #ffffff !important;
}
.c-trademark {
display: inline-flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: color 200ms;
}
.c-trademark:hover {
color: #ffffff;
}
.c-trademark:focus {
outline-color: #2BB1D9;
}
.c-trademark__text {
margin-right: 7px;
white-space: nowrap;
}
.c-trademark__icon {
width: 100px;
max-height: 32px;
transition: opacity 200ms;
}
.c-trademark:hover .c-trademark__icon {
opacity: 0.7;
}
.c-video {
position: relative;
height: 0;
width: 100%;
padding-bottom: 53.6%;
background-color: #ffffff;
}
.c-video__iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 6 - ORGANISMS
* Large blocks composed of multiple components.
=========================================================== */
/** ==========================================================================
* Organisms
* =========================================================================*/
.o-accordion {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 840px) {
.o-accordion {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-accordion {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
.o-accordion__item {
border-radius: 8px;
position: relative;
overflow: hidden;
border-style: solid;
border-width: 1px;
border-color: #c8c8c8;
transition-property: border;
transition-duration: 250ms;
}
.o-accordion__item + .o-accordion__item {
margin-top: 16px;
}
.o-accordion__item:not(.is-active):hover {
border-color: #007EA3;
}
.o-accordion__title {
display: flex;
justify-content: flex-start;
align-items: center;
padding-top: 16px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 48px;
color: #000000;
cursor: pointer;
}
@media screen and (min-width: 840px) {
.o-accordion__title {
padding-left: 12.5%;
}
}
@media screen and (min-width: 1152px) {
.o-accordion__title {
padding-left: 8.3333333333%;
}
}
.o-accordion__item:not(.is-active) .o-accordion__title:hover {
color: #007EA3;
}
.o-accordion__icon {
flex: 0 0 auto;
position: absolute;
top: auto;
left: 14px;
width: 20px;
height: 20px;
color: inherit;
border-color: currentColor;
border-width: 2px;
border-style: solid;
border-radius: 100%;
transition-property: color;
transition-duration: 250ms;
transition-timing-function: ease;
}
@media screen and (min-width: 840px) {
.o-accordion__icon {
left: calc(6.25% - 10px);
}
}
@media screen and (min-width: 1152px) {
.o-accordion__icon {
left: calc(4.1666666667% - 10px);
}
}
.o-accordion__icon::before, .o-accordion__icon::after {
content: "";
display: block;
position: absolute;
height: 2px;
width: 10px;
left: 3px;
top: calc(50% - 1px);
background-color: currentColor;
transition-property: background-color, transform;
transition-duration: 250ms, 400ms;
transition-timing-function: ease, cubic-bezier(0.86, 0, 0.07, 1);
}
.o-accordion__item.is-active .o-accordion__icon::before {
transform: scaleX(0) rotate(0.25turn);
}
.o-accordion__icon::after {
transform: rotate(0.25turn);
}
.o-accordion__item.is-active .o-accordion__icon::after {
transform: rotate(0.5turn);
}
.o-accordion__header {
font-size: 1rem;
line-height: 1.5;
font-weight: 500;
color: inherit;
text-decoration: inherit;
transition-property: color;
transition-duration: 250ms;
transition-timing-function: ease;
}
@media screen and (min-width: 840px) {
.o-accordion__header {
font-size: 1.5rem;
line-height: 1.3333333333;
}
}
/* Hidden by default*/
.o-accordion__content {
opacity: 0;
max-height: 0;
overflow: hidden;
padding-left: 48px;
padding-right: 24px;
transform: translateY(6px);
transition: all 0.2s ease-in-out;
}
.o-accordion__content > * + * {
margin-top: 1.5rem;
}
@media screen and (min-width: 840px) {
.o-accordion__content {
padding-left: 12.5%;
}
}
@media screen and (min-width: 1152px) {
.o-accordion__content {
padding-left: 8.3333333333%;
}
}
.o-accordion__item.is-active .o-accordion__content {
opacity: 1;
max-height: 400px;
padding-bottom: 32px;
transform: none;
transition-property: all;
transition-duration: 400ms;
transition-timing-function: ease-out;
transition-delay: 0.2s;
}
@media screen and (max-width: 839px) {
.o-block {
margin-bottom: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-block {
margin-bottom: 10vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-block {
margin-bottom: 7.1428571429vw;
}
}
@media screen and (min-width: 1344px) {
.o-block {
margin-bottom: 96px;
}
}
@media screen and (max-width: 839px) {
.o-block + .o-block {
margin-top: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-block + .o-block {
margin-top: 10vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-block + .o-block {
margin-top: 7.1428571429vw;
}
}
@media screen and (min-width: 1344px) {
.o-block + .o-block {
margin-top: 96px;
}
}
/*
* Wrapper of the main body
* (between the header and the footer)
*/
.o-body {
z-index: 40;
position: relative;
}
.o-callout-bar {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
color: #1A1A1A;
background-color: #f8f8f8;
text-align: center;
}
.o-callout-bar__main {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
@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 (max-width: 839px) {
.o-callout-bar__main {
padding-top: 12vw;
padding-bottom: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-callout-bar__main {
padding-top: 10vw;
padding-bottom: 10vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-callout-bar__main {
padding-top: 7.1428571429vw;
padding-bottom: 7.1428571429vw;
}
}
@media screen and (min-width: 1344px) {
.o-callout-bar__main {
padding-top: 96px;
padding-bottom: 96px;
}
}
@media screen and (max-width: 839px) {
.o-callout-bar__main > * + * {
margin-top: 6vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-callout-bar__main > * + * {
margin-top: 5vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-callout-bar__main > * + * {
margin-top: 3.5714285714vw;
}
}
@media screen and (min-width: 1344px) {
.o-callout-bar__main > * + * {
margin-top: 48px;
}
}
.o-callout-bar__heading {
font-size: 2rem;
line-height: 1.25;
}
/*
* Card grid
*
*/
@media screen and (min-width: 600px) {
.o-card-grid__main {
display: flex;
flex-wrap: wrap;
}
}
@media screen and (max-width: 599px) {
.o-card-grid__item + .o-card-grid__item {
margin-top: 32px;
}
}
@media screen and (max-width: 599px) {
.o-card-grid__item {
max-width: 444px;
margin: 0 auto;
}
}
@media screen and (min-width: 600px) and (max-width: 1151px) {
.o-card-grid__item {
flex: 0;
flex-basis: calc(50% - ((2 - 1) / 2 * 32px));
margin-left: 32px;
}
.o-card-grid__item:nth-child(2n+1) {
margin-left: 0;
}
.o-card-grid__item:nth-child(n+3) {
margin-top: 32px;
}
}
@media screen and (min-width: 1152px) {
.o-card-grid__item {
flex: 0;
flex-basis: calc(33.3333333333% - ((3 - 1) / 3 * 32px));
margin-left: 32px;
}
.o-card-grid__item:nth-child(3n+1) {
margin-left: 0;
}
.o-card-grid__item:nth-child(n+4) {
margin-top: 32px;
}
}
.o-contact {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
position: relative;
}
@media screen and (min-width: 840px) {
.o-contact {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-contact {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (min-width: 1220px) {
.o-contact {
display: flex;
}
}
.o-contact__info {
background-color: #ffffff;
}
@media screen and (min-width: 840px) {
.o-contact__info {
padding: 48px 12.5%;
}
}
@media screen and (min-width: 1220px) {
.o-contact__info {
width: 50%;
padding-left: 8.3333333333%;
padding-right: 24px;
}
}
.o-contact__form {
background-color: #f8f8f8;
}
@media screen and (max-width: 839px) {
.o-contact__form {
margin-top: 12vw;
padding: 6vw;
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}
}
@media screen and (min-width: 840px) {
.o-contact__form {
padding: 48px 12.5%;
}
}
@media screen and (min-width: 1220px) {
.o-contact__form {
width: 50%;
padding-left: 8.3333333333%;
padding-right: 8.3333333333%;
}
}
.o-contact__header {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
font-size: 2rem;
line-height: 1.25;
margin-bottom: 32px;
color: #1A1A1A;
}
.o-contact__card {
margin-bottom: 40px;
}
.o-contact__address {
margin-top: 24px;
}
.o-contact__numbers {
margin-top: 16px;
}
.o-cookie-bar {
z-index: 9999;
display: none;
position: fixed;
bottom: 0;
left: 0;
height: 64px;
width: 100%;
background-color: #142C33;
opacity: 1;
box-shadow: 0 -4px 6px 0 rgba(0, 0, 0, 0.2);
transition: opacity 0.5s, transform 0.6s;
transform: none;
}
.o-cookie-bar:not(.is-accepted) {
display: flex;
justify-content: flex-start;
align-items: center;
}
.o-cookie-bar.is-transitioning-out {
opacity: 0;
transform: translateY(50%);
}
.o-cookie-bar__main {
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 373px) {
.o-cookie-bar__main {
transform: scale(0.9);
}
}
.o-cookie-bar__text {
margin: 0;
color: #ffffff;
}
@media screen and (max-width: 374px) {
.o-cookie-bar__text {
font-size: 0.875rem;
line-height: 1.1428571429;
}
}
.o-cookie-bar__link {
color: inherit;
transition: color 0.3s;
}
.o-cookie-bar__link:hover {
color: rgba(20, 44, 51, 0.75);
}
.o-cookie-bar__button {
flex: none;
margin-left: 40px;
}
@media screen and (max-width: 839px) {
.o-cookie-bar__button {
margin-left: 16px;
}
}
.o-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;
}
.o-cookie-overlay.is-accepted {
display: none;
}
.o-cookie-overlay.fade-out {
opacity: 0;
}
.o-cookie-overlay__modal {
display: block;
width: 92%;
max-width: 960px;
padding: 60px 120px;
margin: auto;
background-color: #ffffff;
}
.o-cookie-overlay__container.is-hidden {
display: none;
}
.o-cookie-overlay__title {
font-size: 24px;
line-height: 1;
font-weight: 500;
margin: 0 0 5px;
color: #1A1A1A;
}
.o-cookie-overlay__text {
font-size: 16px;
line-height: 1.2;
margin: 0;
color: #999999;
}
.o-cookie-overlay__link {
text-decoration: underline;
color: #2BB1D9;
cursor: pointer;
transition: color 0.3s;
}
.o-cookie-overlay__link:hover {
color: rgba(43, 177, 217, 0.75);
}
.o-cookie-overlay__button {
display: inline-block;
margin-top: 35px;
padding: 13px 25px;
border-radius: 4px;
background-color: #2BB1D9;
transition: background-color 0.4s;
font-size: 16px;
line-height: 1.2;
font-weight: 500;
color: #ffffff;
cursor: pointer;
outline: none;
border: none;
}
.o-cookie-overlay__button:hover {
background-color: #2197ba;
}
.o-cookie-overlay__types, .o-cookie-overlay__settings {
margin: 30px 0;
}
.o-cookie-overlay__types > * + *, .o-cookie-overlay__settings > * + * {
margin-top: 25px;
}
.o-cookie-overlay__settings {
margin-bottom: 0;
}
/*===============================================================================
* Double image in 2 equal columns
*
* Until viewport is wide enough the pictures are stacked vertically
* ============================================================================== */
.o-double-image {
margin: -1px;
text-align: center;
}
@media screen and (min-width: 1100px) {
.o-double-image {
display: flex;
}
}
.o-double-image__picture {
display: block;
margin: 1px;
order: 1;
}
@media screen and (min-width: 1100px) {
.o-double-image__picture {
width: 50%;
display: flex;
justify-content: flex-end;
}
.o-double-image__picture:last-child {
justify-content: flex-start;
}
}
.o-double-image__img {
object-fit: cover;
max-height: 85vh;
}
.o-double-image--is-reversed .o-double-image__picture {
justify-content: flex-start;
}
.o-double-image--is-reversed .o-double-image__picture:last-child {
order: 0;
justify-content: flex-end;
}
/*===============================================================================
* Double layout in 2 equal columns
*
* Until viewport is wide enough the columns are stacked vertically
* ============================================================================== */
.o-double-text {
position: relative;
background-color: #ffffff;
height: 100%;
}
@media screen and (min-width: 840px) {
.o-double-text {
display: flex;
}
}
@media screen and (min-width: 1152px) {
.o-double-text__column {
width: 50%;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-double-text__column:first-child {
width: 62.5%;
padding-right: 12.5%;
}
}
@media screen and (min-width: 1152px) {
.o-double-text__column:first-child {
padding-left: 8.3333333333%;
}
}
@media screen and (max-width: 839px) {
.o-double-text__column:last-child {
margin-top: 6vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-double-text__column:last-child {
width: 37.5%;
}
}
@media screen and (min-width: 1152px) {
.o-double-text__column:last-child {
padding-left: 8.3333333333%;
padding-right: 8.3333333333%;
}
}
@media screen and (min-width: 840px) {
.o-downloads {
display: flex;
justify-content: space-between;
}
}
@media screen and (min-width: 840px) {
.o-downloads--is-reversed {
flex-direction: row-reverse;
}
}
.o-downloads__main {
background-color: #ffffff;
padding-top: 40px;
padding-bottom: 72px;
}
@media screen and (min-width: 840px) {
.o-downloads__main {
width: 50%;
}
}
@media screen and (max-width: 1151px) {
.o-downloads__main {
padding-left: 6.25%;
padding-right: 6.25%;
}
}
@media screen and (min-width: 1152px) {
.o-downloads__main {
padding-left: 8.3333333333%;
padding-right: 8.3333333333%;
}
}
.o-downloads__main .c-heading {
margin-top: 0;
}
@media screen and (max-width: 839px) {
.o-downloads__service-point {
margin-top: 80px;
}
}
@media screen and (min-width: 840px) {
.o-downloads__service-point {
margin-top: 40px;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-downloads__service-point {
width: 37.5%;
}
}
@media screen and (min-width: 1152px) {
.o-downloads__service-point {
width: 41.6666666667%;
}
}
.o-footer {
z-index: 20;
color: #ededf3;
background-color: #007EA3;
}
.o-footer__main {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
@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: 840px) {
.o-footer__columns {
display: flex;
}
}
.o-footer__brand {
display: inline-block;
transition: opacity 200ms linear;
}
@media screen and (max-width: 839px) {
.o-footer__brand {
margin-bottom: 3.96vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-footer__brand {
margin-bottom: 3.3vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-footer__brand {
margin-bottom: 2.3571428571vw;
}
}
@media screen and (min-width: 1344px) {
.o-footer__brand {
margin-bottom: 31.68px;
}
}
.o-footer__brand:hover {
opacity: 0.5;
}
.o-footer__logo {
width: 152px;
}
.o-footer__info > * + * {
margin-top: 32px;
}
@media screen and (min-width: 840px) {
.o-footer__info {
width: 40%;
}
}
@media screen and (min-width: 1152px) {
.o-footer__info {
width: 41.6666666667%;
}
}
@media screen and (max-width: 839px) {
.o-footer__nav {
margin-top: 6vw;
}
}
@media screen and (min-width: 840px) {
.o-footer__nav {
margin-left: 10%;
}
}
@media screen and (min-width: 1152px) {
.o-footer__nav {
margin-left: 8.3333333333%;
}
}
.o-footer__list {
list-style: none;
margin: 0;
}
.o-footer__link {
display: inline-block;
position: relative;
z-index: 0;
color: #ededf3;
text-decoration: none;
cursor: pointer;
transition: color 0.3s;
}
.o-footer__link::before {
content: "";
display: block;
position: absolute;
z-index: -1;
left: -10px;
bottom: 0;
width: 100%;
height: 50%;
background-color: rgba(237, 237, 243, 0.1);
transform: scaleX(0) skew(0deg);
transform-origin: bottom left;
transition: transform 0.35s cubic-bezier(0.86, 0, 0.07, 1);
}
.o-footer__link:hover::before {
transform: scaleX(1) skew(-37deg);
}
.o-footer__link:focus {
outline-color: #2BB1D9;
}
.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%;
background-repeat: no-repeat;
background-position: center;
transition-property: opacity;
transition-duration: 0.3s;
}
.facebook .o-footer__icon {
background-image: url("/img/social/facebook.svg");
height: 21px;
}
.instagram .o-footer__icon {
background-image: url("/img/social/instagram.svg");
}
.twitter .o-footer__icon {
background-image: url("/img/social/twitter.svg");
height: 20px;
}
.linkedin .o-footer__icon {
background-image: url("/img/social/linkedin.svg");
height: 18px;
}
.o-footer__icon:hover {
opacity: 0.5;
}
.o-footer__icon:focus {
outline-color: #2BB1D9;
}
.o-form__header {
margin-bottom: 40px;
}
.o-form__footer {
margin-top: 40px;
}
.o-form__row + .o-form__row {
margin-top: 20px;
}
.o-form__pot {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
z-index: -1;
}
.o-header {
z-index: 50;
position: relative;
padding: 32px 0;
}
.o-header.is-header-alt {
background-color: #007EA3;
}
.o-header.is-sticky {
opacity: 0;
position: fixed;
z-index: 50;
top: 0;
left: 0;
width: 100%;
padding-top: 32px;
padding-bottom: 32px;
box-shadow: 0 -5px 30px black;
transform: translateY(-100%);
transition-property: transform, opacity;
transition-duration: 300ms;
transition-delay: 0s, 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
@media screen and (min-width: 1100px) {
.o-header.is-sticky {
display: none;
}
}
.is-sticky-header-visible .o-header.is-sticky {
opacity: 1;
transform: none;
transition-delay: 0s;
}
.o-header__main {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
@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;
}
}
.o-header__nav {
width: 100%;
}
@media screen and (max-width: 1099px) {
.o-header__nav {
display: none;
}
}
.o-header__language {
margin-left: 16px;
}
@media screen and (max-width: 1099px) {
.o-header__language {
margin-left: auto;
}
}
.o-header__logo {
flex: none;
}
.o-header__logo:focus {
outline-offset: 2px;
outline-color: #2BB1D9;
}
.o-header__img {
max-height: 48px;
width: 185x;
}
@media screen and (min-width: 1100px) {
.o-header__toggle {
display: none;
}
}
.o-intro {
position: relative;
z-index: 0;
}
@media screen and (max-width: 839px) {
.o-intro.is-intro-alt {
margin-bottom: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-intro.is-intro-alt {
margin-bottom: 10vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-intro.is-intro-alt {
margin-bottom: 7.1428571429vw;
}
}
@media screen and (min-width: 1344px) {
.o-intro.is-intro-alt {
margin-bottom: 96px;
}
}
.is-intro-alt .o-intro__header {
background-color: #007EA3;
}
.o-intro__body {
position: relative;
}
@media screen and (max-width: 839px) {
.o-intro__body {
margin-bottom: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-intro__body {
margin-bottom: 10vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-intro__body {
margin-bottom: 7.1428571429vw;
}
}
@media screen and (min-width: 1344px) {
.o-intro__body {
margin-bottom: 96px;
}
}
@media screen and (min-width: 840px) {
.is-intro-alt .o-intro__body {
background-color: #007EA3;
}
}
@media screen and (max-width: 839px) {
.o-intro--mobile-break-out .o-intro__main {
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}
}
@media screen and (min-width: 840px) {
.o-intro__main::before {
content: "";
position: absolute;
z-index: 0;
top: 50%;
right: 0;
bottom: 0;
left: 0;
background-color: #005B75;
}
}
.o-logos__list {
display: flex;
flex-wrap: wrap;
margin-left: 0;
margin: -2.382vw;
list-style-type: none;
}
@media screen and (min-width: 1344px) {
.o-logos__list {
margin: -32px;
}
}
.o-logos__item {
flex: 0 1 100%;
margin: 2.382vw;
}
@media screen and (min-width: 384px) {
.o-logos__item {
flex-basis: calc(50% - 5vw);
}
}
@media screen and (min-width: 840px) {
.o-logos__item {
flex-basis: calc(33.3333333333% - 5vw);
}
}
@media screen and (min-width: 1152px) {
.o-logos__item {
flex-basis: calc(25% - 5vw);
}
}
@media screen and (min-width: 1344px) {
.o-logos__item {
flex-basis: calc(25% - 64px);
margin: 32px;
}
}
.o-logos__link {
display: block;
}
.o-logos__img {
display: block;
width: 100%;
height: 0;
padding-bottom: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.o-map a:after {
display: none;
}
.o-news {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 840px) {
.o-news {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-news {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
.o-news__heading {
font-size: 2rem;
line-height: 1.25;
color: #1A1A1A;
}
.o-news__article {
position: relative;
}
.o-news__article + .o-news__article {
margin-top: 32px;
}
.o-news__link {
display: block;
cursor: pointer;
text-decoration: none;
transition: background-color 150ms linear;
}
.o-news__link::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid #c8c8c8;
transition: opacity 150ms linear;
}
.o-news__link:hover, .o-news__link:focus {
background-color: #f8f8f8;
}
.o-news__link:hover::before, .o-news__link:focus::before {
opacity: 0;
}
.o-news__link:focus {
outline-color: #2BB1D9;
}
@media screen and (min-width: 840px) {
.o-news__link {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
}
.o-news__body {
flex-grow: 1;
padding: 6vw;
}
@media screen and (min-width: 840px) {
.o-news__body {
order: 1;
padding-top: 48px;
padding-bottom: 48px;
padding-left: 12.5%;
padding-right: 12.5%;
}
}
@media screen and (min-width: 1152px) {
.o-news__body {
padding-left: 8.3333333333%;
}
}
.o-news__image {
position: relative;
width: 100%;
padding-bottom: 55%;
}
@media screen and (min-width: 840px) {
.o-news__image {
flex: none;
order: 2;
width: 25%;
padding-bottom: 25%;
}
}
.o-news__bg-image {
position: absolute;
background-position: 50% 50%;
background-size: cover;
top: 6vw;
right: 6vw;
width: calc(100% - 12vw);
height: calc(100% - 6vw);
}
@media screen and (min-width: 840px) {
.o-news__bg-image {
top: 8px;
right: 8px;
width: calc(100% - 16px);
height: calc(100% - 16px);
}
}
.o-news__intro {
margin-top: 24px;
}
.o-news__timestamp {
display: block;
margin-top: 16px;
color: #999999;
}
.o-news__action {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 8px;
color: #2BB1D9;
}
.o-news__readmore {
margin-right: 8px;
}
.o-news__footer {
margin-top: 32px;
text-align: center;
}
.o-overlay-menu {
z-index: 100;
display: flex;
flex-direction: column;
opacity: 0;
position: fixed;
height: 100%;
width: 100%;
left: 0;
top: 0;
background-color: #007EA3;
transform: translateX(-120vw);
transition-property: transform, opacity;
transition-duration: 400ms, 200ms;
transition-delay: 0s, 400ms;
transition-timing-function: cubic-bezier(0.5, 0.15, 0.1, 1), linear;
}
.is-overlay-menu-active .o-overlay-menu {
opacity: 1;
transform: none;
transition-delay: 200ms, 0s;
}
.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: 200ms;
transition-delay: 400ms;
transition-timing-function: linear;
}
.is-overlay-menu-active .o-overlay-menu::before {
opacity: 1;
transition-delay: 0s;
}
.o-overlay-menu::after {
display: block;
content: "";
position: absolute;
top: 0;
right: -20%;
width: 20%;
height: 100%;
background: linear-gradient(-86deg, transparent 50%, #007EA3 50%);
}
@media screen and (min-width: 1100px) {
.o-overlay-menu {
display: none;
}
}
.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: 32px;
padding-bottom: 32px;
}
@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__img {
height: 48px;
}
.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 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: calc(58vh);
margin-left: 0;
list-style: none;
}
.o-overlay-menu__link {
font-size: 1.5rem;
line-height: 1.3333333333;
display: block;
color: #ededf3;
text-decoration: none;
opacity: 0.7;
transition: opacity 200ms linear;
}
.o-overlay-menu__link:hover {
opacity: 1;
}
.o-overlay-menu__link:focus {
outline-offset: 2px;
outline-color: #ededf3;
}
.o-overlay-menu__link.is-active {
opacity: 1;
position: relative;
font-weight: 600;
}
.o-quote {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 840px) {
.o-quote {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-quote {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (min-width: 840px) {
.o-quote {
display: flex;
}
}
@media screen and (min-width: 840px) {
.o-quote__body {
width: 50%;
}
}
@media screen and (min-width: 1152px) {
.o-quote__body {
margin-left: 8.3333333333%;
width: 66.6666666667%;
}
}
.o-quote__picture {
display: block;
}
@media screen and (max-width: 839px) {
.o-quote__picture {
margin-top: 32px;
}
}
@media screen and (min-width: 840px) {
.o-quote__picture {
width: 37.5%;
margin-left: 12.5%;
}
}
@media screen and (min-width: 1152px) {
.o-quote__picture {
width: 33.3333333333%;
margin-left: 8.3333333333%;
margin-right: 8.3333333333%;
}
}
.o-quote__img {
display: block;
margin: 0 auto;
}
.o-quote__text {
font-size: 1.25rem;
line-height: 1.6;
quotes: "\201C" "\201D";
}
.o-quote__text::before {
content: open-quote;
}
.o-quote__text::after {
content: close-quote;
}
.o-quote__author {
margin-top: 24px;
margin-left: 8.3333333333%;
}
.o-quote__heading {
font-size: 1rem;
line-height: 1.5;
color: #656565;
}
.o-quote__subheading {
font-size: 0.9375rem;
line-height: 1.6;
color: #999999;
}
.o-references {
display: flex;
flex-wrap: wrap;
margin: -32px;
}
.o-references__item {
border-radius: 4px;
flex: 0 1 100%;
margin: 32px;
padding-top: 24px;
padding-bottom: 24px;
background-color: #ffffff;
border: 0px solid #c8c8c8;
box-shadow: 0 3px 40px -10px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 800px) {
.o-references__item {
flex-basis: calc(50% - 64px - 0px);
}
}
.o-references__body {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-top: 0;
padding-right: 24px;
}
.o-references__picture {
display: block;
flex-grow: 1;
flex-basis: 25%;
margin-bottom: 24px;
margin-left: 24px;
}
.o-references__content {
flex-grow: 9999;
flex-basis: 18em;
margin-left: 24px;
color: #656565;
}
.o-references__author {
margin-top: 24px;
}
.o-references__heading {
font-size: 1rem;
line-height: 1.5;
font-weight: normal;
color: #656565;
}
.o-references__subheading {
color: #999999;
}
.o-subfooter {
z-index: 10;
color: #ededf3;
background-color: #005B75;
padding-bottom: 64px;
transition: padding 0.6s;
}
.is-cookies-accepted .o-subfooter {
padding-bottom: 0;
}
.o-subfooter__main {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
font-size: 0.9375rem;
line-height: 1.6;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
}
@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;
}
}
.o-subfooter__copyright {
display: flex;
flex-wrap: wrap;
margin-top: 8px;
margin-bottom: 8px;
margin-right: 32px;
}
.o-subfooter__nav {
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.o-subfooter__list {
display: flex;
flex-wrap: wrap;
list-style-type: none;
margin: 0;
}
.o-subfooter__item {
margin-right: 32px;
white-space: nowrap;
}
.o-subfooter__link {
color: #ededf3;
text-decoration: none;
transition: color 200ms;
}
.o-subfooter__link:hover {
color: #b2b1ba;
}
.o-subfooter__link:focus {
outline-color: #2BB1D9;
}
.o-subfooter__trademark {
margin-top: 8px;
margin-bottom: 8px;
}
/*
* On small screens the content is stacked, without controls
* When the screen is wide enough we add the controls
* and show only the chosen 'slide content'
*/
.o-tabslider {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 840px) {
.o-tabslider {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-tabslider {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
.o-tabslider__button {
border-radius: 8px;
min-height: 48px;
color: #1A1A1A;
background-color: #ffffff;
border: 1px solid #c8c8c8;
font-weight: 500;
cursor: pointer;
transition-property: color, border;
transition-duration: 250ms;
}
.o-tabslider__button:hover {
color: #007EA3;
border-color: #007EA3;
}
.o-tabslider__button.is-active {
color: #ededf3;
background-color: #007EA3;
border-color: #007EA3;
}
.o-tabslider__button:focus {
outline: none;
border-color: #007EA3;
}
.o-tabslider__button:focus:not(.is-active):not(:active) {
box-shadow: 0 0 0 1px #ffffff, 0 0 5px 3px rgba(26, 26, 26, 0.1);
}
@media screen and (max-width: 839px) {
.o-tabslider__controls {
display: none;
}
}
@media screen and (min-width: 840px) {
.o-tabslider__controls {
display: flex;
justify-content: space-between;
align-items: center;
}
}
@media screen and (min-width: 1152px) {
.o-tabslider__controls {
margin-left: 8.3333333333%;
margin-right: 8.3333333333%;
}
}
.o-tabslider__step {
width: 48px;
}
.o-tabslider__step--prev {
transform: rotate(0.5turn);
}
@media screen and (min-width: 840px) {
.o-tabslider__tabs {
display: flex;
}
}
@media screen and (min-width: 1344px) {
.o-tabslider__tabs {
margin: -8px 8px;
}
}
.o-tabslider__tab {
font-size: 0.875rem;
line-height: 1.1428571429;
margin: 8px;
padding: 7px 16px;
text-transform: uppercase;
}
@media screen and (min-width: 840px) {
.o-tabslider__container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
margin-top: 48px;
}
}
@media screen and (max-width: 839px) {
.o-tabslider__content + .o-tabslider__content {
margin-top: 12vw;
}
}
@media screen and (min-width: 840px) {
.o-tabslider__content {
-ms-grid-row: 1;
grid-row: 1;
-ms-grid-column: 1;
grid-column: 1;
opacity: 0;
z-index: 0;
transform: translateY(6px);
pointer-events: none;
transform-origin: top center;
transition-property: opacity, transform;
transition-duration: 200ms;
transition-timing-function: ease-in;
}
.o-tabslider__content.is-active {
opacity: 1;
z-index: 1;
transform: none;
pointer-events: all;
transition-duration: 500ms;
transition-delay: 200ms;
transition-timing-function: ease-out;
}
}
.o-tabslider__label {
font-size: 0.875rem;
line-height: 1.1428571429;
display: block;
padding-bottom: 8px;
text-transform: uppercase;
color: #1A1A1A;
}
@media screen and (min-width: 840px) {
.o-tabslider__label {
display: none;
}
}
.o-team {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 840px) {
.o-team {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-team {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
@media screen and (max-width: 839px) {
.o-team {
margin-top: 12vw;
margin-bottom: 12vw;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-team {
margin-top: 10vw;
margin-bottom: 10vw;
}
}
@media screen and (min-width: 1152px) and (max-width: 1343px) {
.o-team {
margin-top: 7.1428571429vw;
margin-bottom: 7.1428571429vw;
}
}
@media screen and (min-width: 1344px) {
.o-team {
margin-top: 96px;
margin-bottom: 96px;
}
}
@media screen and (min-width: 600px) {
.o-team__matrix {
display: flex;
flex-wrap: wrap;
margin: -16px;
}
}
.o-team__item {
margin: 0 auto 32px;
max-width: 320px;
}
@media screen and (min-width: 600px) {
.o-team__item {
margin: 16px;
max-width: none;
flex: none;
flex-basis: calc(50% - 32px);
}
}
@media screen and (min-width: 1000px) {
.o-team__item {
flex-basis: calc(33.33% - 32px);
}
}
@media screen and (min-width: 1152px) {
.o-team__item {
flex-basis: calc(25% - 32px);
}
}
.o-top-bar {
color: #ffffff;
background-color: #000000;
}
@media screen and (max-width: 1099px) {
.o-top-bar {
display: none;
}
}
.o-top-bar__main {
width: calc(100% - 12vw);
margin-left: auto;
margin-right: auto;
text-align: right;
}
@media screen and (min-width: 840px) {
.o-top-bar__main {
width: calc((100% / 10) * 8);
}
}
@media screen and (min-width: 1152px) {
.o-top-bar__main {
width: calc((100% / 14) * 12);
max-width: 1152px;
}
}
.o-top-bar__list {
list-style: none;
margin-left: 0;
padding: 8px 0;
}
.o-top-bar__link {
font-size: 0.875rem;
line-height: 1.1428571429;
display: inline-block;
padding: 8px 0;
text-decoration: none;
color: #ffffff;
}
.o-top-bar__link:hover {
text-decoration: underline;
}
@media screen and (max-width: 1151px) {
.o-usp {
background-color: #007EA3;
}
}
@media screen and (min-width: 840px) {
.o-usp__main {
display: flex;
}
}
.o-usp__text {
padding: 32px 0;
color: #ededf3;
background-color: #007EA3;
}
@media screen and (min-width: 840px) {
.o-usp__text {
width: 62.5%;
padding-top: 6.25%;
padding-bottom: 6.25%;
padding-left: 0;
padding-right: 12.5%;
}
}
@media screen and (min-width: 1152px) {
.o-usp__text {
width: 50%;
padding: 4.1666666667% 8.3333333333%;
}
}
.o-usp__image {
background-position: 50% 50%;
background-size: cover;
}
@media screen and (max-width: 839px) {
.o-usp__image {
margin-left: -6vw;
margin-right: -6vw;
padding-bottom: 65%;
min-height: 360px;
}
}
@media screen and (min-width: 840px) and (max-width: 1151px) {
.o-usp__image {
width: 50%;
margin-right: -12.5%;
}
}
@media screen and (min-width: 1152px) {
.o-usp__image {
width: 50%;
}
}
.o-usp__heading {
font-size: 2rem;
line-height: 1.25;
margin-bottom: 24px;
color: #ededf3;
}
.o-usp__list {
list-style-type: none;
margin-left: 16px;
}
.o-usp__item {
position: relative;
padding-left: 16px;
}
.o-usp__item + .o-usp__item {
margin-top: 16px;
}
.o-usp__item::before {
content: "";
position: absolute;
top: 5px;
left: -16px;
width: 16px;
height: 12px;
background-image: url(/img/check/checked.svg);
background-size: 16px 12px;
}
.o-usp__action {
margin-top: 48px;
}
.o-usp__image {
background-color: #f8f8f8;
background-repeat: no-repeat;
}
.o-vacancies {
margin: 0;
padding: 0;
line-height: 1.4;
list-style: none;
}
.o-vacancies > * + * {
margin-top: 16px;
}
.o-vacancies__link {
display: block;
padding: 20px;
border: solid 2px #007EA3;
font-size: 1.1em;
color: #007EA3;
text-decoration: none;
transition: all 0.2s;
}
.o-vacancies__link:hover {
color: #b18d34;
border: solid 2px #b18d34;
}
/* 7 - Templates
* Override styling for a specific template
=========================================================== */
/** ==========================================================================
* Templates
* =========================================================================*/
/* 8 - SCOPES
* Elements and classes that are scoped by a parent class
=========================================================== */
.s-checklist {
list-style: none;
margin-left: 0;
}
.s-checklist li {
display: flex;
vertical-align: middle;
margin-top: 5px;
line-height: 1.45;
}
.s-checklist li::before {
content: "";
background-image: url(/img/check/checked.svg);
background-repeat: no-repeat;
width: 12px;
height: 12px;
margin-right: 8px;
transform: translateY(7px);
}
.checklist-has-x-small-font .s-checklist {
font-size: 0.875rem;
line-height: 1.1428571429;
}
.checklist-has-x-small-font .s-checklist li::before {
transform: translateY(5px);
}
/**
* All text elements that can be added by the user through a CMS
*/
.s-text h2, .s-text h3, .s-text h4 {
color: #1A1A1A;
}
.s-text > * + * {
margin-top: 32px;
}
.s-text > :first-child {
margin-top: 0 !important;
}
.s-text > * + .c-button {
margin-top: 40px;
}
.s-text > ul:not([class]) {
list-style: none;
}
.s-text > ul:not([class]) > li {
position: relative;
margin-left: -1.125em;
padding-left: 1.125em;
}
.s-text > ul:not([class]) > li::before {
font-size: 1.5rem;
line-height: 1.3333333333;
content: "\2022";
position: absolute;
top: -4px;
left: 0;
}
.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--900 {
background-color: #decaff;
}
*/
.u-color-primary--500 {
color: #007EA3;
}
.u-bg-primary--500 {
background-color: #007EA3;
}
.u-color-primary--700 {
color: #005B75;
}
.u-bg-primary--700 {
background-color: #005B75;
}
.u-color-secondary--500 {
color: #CCA952;
}
.u-bg-secondary--500 {
background-color: #CCA952;
}
.u-color-neutral--0 {
color: #ffffff;
}
.u-bg-neutral--0 {
background-color: #ffffff;
}
.u-color-neutral--100 {
color: #f8f8f8;
}
.u-bg-neutral--100 {
background-color: #f8f8f8;
}
.u-color-neutral--200 {
color: #F5F5F5;
}
.u-bg-neutral--200 {
background-color: #F5F5F5;
}
.u-color-neutral--300 {
color: #c8c8c8;
}
.u-bg-neutral--300 {
background-color: #c8c8c8;
}
.u-color-neutral--800 {
color: #2C2C2C;
}
.u-bg-neutral--800 {
background-color: #2C2C2C;
}
.u-color-neutral--900 {
color: #142C33;
}
.u-bg-neutral--900 {
background-color: #142C33;
}
.u-color-neutral--1000 {
color: #000000;
}
.u-bg-neutral--1000 {
background-color: #000000;
}
.u-color-text--900 {
color: #1A1A1A;
}
.u-bg-text--900 {
background-color: #1A1A1A;
}
.u-color-text--500 {
color: #656565;
}
.u-bg-text--500 {
background-color: #656565;
}
.u-color-text--300 {
color: #999999;
}
.u-bg-text--300 {
background-color: #999999;
}
.u-color-text-on-dark--100 {
color: #ffffff;
}
.u-bg-text-on-dark--100 {
background-color: #ffffff;
}
.u-color-text-on-dark--200 {
color: #ededed;
}
.u-bg-text-on-dark--200 {
background-color: #ededed;
}
.u-color-text-on-dark--300 {
color: #999999;
}
.u-bg-text-on-dark--300 {
background-color: #999999;
}
.u-color-text-on-primary--100 {
color: #ededf3;
}
.u-bg-text-on-primary--100 {
background-color: #ededf3;
}
.u-color-text-on-primary--200 {
color: #d7dbdc;
}
.u-bg-text-on-primary--200 {
background-color: #d7dbdc;
}
.u-color-text-on-primary--300 {
color: #b2b1ba;
}
.u-bg-text-on-primary--300 {
background-color: #b2b1ba;
}
.u-color-text-on-secondary--100 {
color: #ffffff;
}
.u-bg-text-on-secondary--100 {
background-color: #ffffff;
}
.u-color-feedback--action {
color: #2BB1D9;
}
.u-bg-feedback--action {
background-color: #2BB1D9;
}
.u-color-feedback--warning {
color: #ffd33a;
}
.u-bg-feedback--warning {
background-color: #ffd33a;
}
.u-color-feedback--alert {
color: #ff8100;
}
.u-bg-feedback--alert {
background-color: #ff8100;
}
.u-color-feedback--negative {
color: #cf3e3e;
}
.u-bg-feedback--negative {
background-color: #cf3e3e;
}
.u-color-feedback--positive {
color: #3ecf8e;
}
.u-bg-feedback--positive {
background-color: #3ecf8e;
}
.u-color-border--100 {
color: #c8c8c8;
}
.u-bg-border--100 {
background-color: #c8c8c8;
}
.u-color-box-shadow--900 {
color: rgba(0, 0, 0, 0.2);
}
.u-bg-box-shadow--900 {
background-color: rgba(0, 0, 0, 0.2);
}
.u-hidden {
display: none !important;
}
.u-placeholder-image {
height: 100% !important;
object-fit: cover !important;
}
@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;
}
}
.u-spacing-mb0 {
margin-bottom: 0 !important;
}
@media screen and (min-width: 1152px) {
.u-spacing-pr0\@l {
padding-right: 0 !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
*/
/* ==========================================================================
* 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(0, 43, 255, 0.07), rgba(0, 43, 255, 0.07) 25%, rgba(0, 43, 255, 0.04) 25%, rgba(0, 43, 255, 0.04) 50%);
}
@media screen and (min-width: 840px) {
.u-visible-grid__main {
background: repeating-linear-gradient(to right, rgba(0, 43, 255, 0.07), rgba(0, 43, 255, 0.07) 12.5%, rgba(0, 43, 255, 0.04) 12.5%, rgba(0, 43, 255, 0.04) 25%);
}
}
@media screen and (min-width: 1152px) {
.u-visible-grid__main {
background: repeating-linear-gradient(to right, rgba(0, 43, 255, 0.07), rgba(0, 43, 255, 0.07) 8.3333333333%, rgba(0, 43, 255, 0.04) 8.3333333333%, rgba(0, 43, 255, 0.04) 16.6666666667%);
}
}