/*
Theme Name: SNK Child
Description: SNK Child Theme
Author: SNK
Author URI: https://www.snk.de/
Template: snk
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
Text Domain: snk-child
*/
/*--------------------------------------------------------------
# Abstracts
--------------------------------------------------------------*/
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
body ol,
body ul {
margin-top: 0;
}
body ol:not([class]),
body ul:not([class]) {
padding-left: 1rem;
}
body ul:not([class]) {
list-style: none;
}
body ul:not([class]) li {
position: relative;
margin-bottom: var(--snk-list-mb, 0.5rem);
}
body ul:not([class]) li::before {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23454545"/%3e%3c/svg%3e');
background-repeat: no-repeat;
background-size: 100%;
width: var(--snk-list-bullet-width, 2rem);
height: var(--snk-list-bullet-height, 2rem);
position: absolute;
top: var(--snk-list-bullet-top, -0.125rem);
left: -1rem;
}
.snk-complexTable tr td p, .snk-complexTable tr th {
font-size: var(--snk-fs-body-s);
line-height: var(--snk-lh-body-s);
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
/* put your functions here */
:root {
--snk-text-color: #454545;
--snk-headline-color: #222;
--snk-font-headline: CHSansBold;
--snk-font-body: DMSansRegular;
--snk-container-width: 1320px;
--snk-container-sm-width: 770px;
--snk-gutter-x: 1rem;
--snk-card-gap: 1rem;
--snk-card-border-radius: 0;
--snk-card-padding: 2rem;
--snk-card-bg-color: #f0f3f4;
--snk-card-color: #454545;
--snk-accordion-border-radius: 0;
--snk-fs-h1: 1.5rem;
--snk-fs-h2: 1.25rem;
--snk-fs-h3: 1rem;
--snk-fs-h4: 0.9375rem;
--snk-fs-h5: 0.9375rem;
--snk-fs-h6: 0.9375rem;
--snk-fs-sh: 1rem;
--snk-fs-body: 0.9375rem;
--snk-fs-body-s: 0.9375rem;
--snk-fs-menu: 1.125rem;
--snk-button-fs: 0.9375rem;
--snk-lh-h1: 1.4;
--snk-lh-h2: 1.2;
--snk-lh-h3: 1.2;
--snk-lh-h4: 1.4;
--snk-lh-h5: 1.2;
--snk-lh-h6: 1.2;
--snk-lh-sh: 1.5;
--snk-lh-body: 1.5;
--snk-lh-body-s: 1.5;
--snk-lh-menu: 1.75;
--snk-mb-h1: 1rem;
--snk-mb-h2: 1rem;
--snk-mb-h3: 0.5rem;
--snk-mb-h4: 1rem;
--snk-mb-h5: 0.5rem;
--snk-mb-h6: 0.5rem;
--snk-mb-sh: 1rem;
--snk-mb-p: 1rem;
--snk-header-y-padding: 1rem;
--snk-text-btn-spacing: 1rem;
--snk-container-x-padding: 1.25rem;
--snk-wrapper-y-padding: 2rem;
--snk-wrapper-x-padding: 1.5rem;
--snk-primary-nav-padding: 0.625rem;
--snk-fw-bold: 700;
--snk-button-br: 8rem;
--snk-mobile-header-height: 65px;
--snk-header-height: 81px;
--snk-list-bullet-width: 8px;
--snk-list-bullet-top: 0.5rem;
--snk-link-color: #004959;
--snk-btn-primary-font-color: #fff;
--snk-btn-primary-color: #004959;
--snk-btn-primary-hover-color: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), #004959;
--snk-btn-primary-circle-color: #fff;
--snk-btn-primary-hover-font-color: #fff;
--snk-btn-secondary-font-color: #004959;
--snk-btn-secondary-color: #fff;
--snk-btn-secondary-border-color: #a6bfc5;
--snk-btn-secondary-hover-color: #d9e4e6;
--snk-btn-secondary-hover-font-color: #004959;
--snk-btn-secondary-focus-color: #539da6;
--snk-btn-secondary-active-color: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), #004959;
--snk-btn-secondary-active-font-color: #fff;
--snk-btn-secondary-active-border: #004959;
--snk-link-ouline-color: #a6bfc5;
--snk-input_color: #454545;
--snk-accordion-border-color: #d9e4e6;
}
@media (min-width: 1328px) {
:root {
--snk-container-x-padding: 16px;
--snk-wrapper-y-padding: 2rem;
--snk-wrapper-x-padding: 2rem;
}
}
@media (min-width: 1024px) {
:root {
--snk-fs-h1: 2.5rem;
--snk-fs-h2: 1.875rem;
--snk-fs-h3: 1.125rem;
--snk-fs-h4: 1rem;
--snk-fs-h5: 1.125rem;
--snk-fs-h6: 1.125rem;
--snk-fs-sh: 1.125rem;
--snk-fs-body: 1rem;
--snk-fs-body-s: 1rem;
--snk-fs-menu: 1rem;
--snk-button-fs: 1rem;
--snk-lh-h1: 1.1;
--snk-lh-h3: 1.4;
--snk-lh-sh: 1.5;
--snk-lh-body: 1.5;
--snk-lh-body-s: 1.5;
--snk-mb-h1: 1rem;
--snk-mb-h2: 1rem;
--snk-mb-h3: 0.5rem;
--snk-mb-h4: 1rem;
--snk-mb-h5: 0.5rem;
--snk-mb-h6: 0.5rem;
--snk-mb-sh: 1rem;
--snk-mb-p: 1rem;
}
}
@media (min-width: 1200px) {
:root {
--snk-header-y-padding: 1.25rem;
}
}
/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* Regular - Headlines */
@font-face {
font-display: swap;
font-family: CHSansRg;
font-style: normal;
font-weight: 400;
src: url(/wp-content/themes/snk-child/assets/fonts/CHSans_Rg.woff2) format("woff2"), url(/wp-content/themes/snk-child/assets/fonts/CHSans_Rg.ttf) format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* Bold - Headlines */
@font-face {
font-display: swap;
font-family: CHSansBold;
font-style: normal;
font-weight: 700;
src: url(/wp-content/themes/snk-child/assets/fonts/CHSans_Bd.woff2) format("woff2"), url(/wp-content/themes/snk-child/assets/fonts/CHSans_Bd.ttf) format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* Light - Headlines */
@font-face {
font-display: swap;
font-family: CHSansLight;
font-style: normal;
font-weight: 300;
src: url(/wp-content/themes/snk-child/assets/fonts/CHSans_Lt.woff2) format("woff2"), url(/wp-content/themes/snk-child/assets/fonts/CHSans_Lt.ttf) format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* Regular - Text */
@font-face {
font-display: swap;
font-family: DMSansRegular;
font-style: normal;
font-weight: 400;
src: url(/wp-content/themes/snk-child/assets/fonts/DMSans-Regular.woff2) format("woff2"), url(/wp-content/themes/snk-child/assets/fonts/DMSans-Regular.ttf) format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* Medium - Text */
@font-face {
font-display: swap;
font-family: DMSansMedium;
font-style: normal;
font-weight: 500;
src: url(/wp-content/themes/snk-child/assets/fonts/DMSans-Medium.ttf) format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* Bold - Text */
@font-face {
font-display: swap;
font-family: DMSansBold;
font-style: normal;
font-weight: 700;
src: url(/wp-content/themes/snk-child/assets/fonts/DMSans-Bold.woff2) format("woff2"), url(/wp-content/themes/snk-child/assets/fonts/DMSans-Bold.ttf) format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* Light - Text */
@font-face {
font-display: swap;
font-family: DMSansLight;
font-style: normal;
font-weight: 300;
src: url(/wp-content/themes/snk-child/assets/fonts/DMSans-Light.woff2) format("woff2"), url(/wp-content/themes/snk-child/assets/fonts/DMSans-Light.ttf) format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
body {
font-family: var(--snk-font-body);
color: var(--snk-text-color, #454545);
font-size: var(--snk-fs-body);
line-height: var(--snk-lh-body, 1.5);
}
h1,
h2,
h3,
h4,
h5,
h6,
.snk-h1,
.snk-h2,
.snk-h3,
.snk-h4,
.snk-h5,
.snk-h6 {
font-weight: var(--snk-fw-bold);
color: var(--snk-headline-color, #222);
font-family: var(--snk-font-headline);
}
h1,
.snk-h1 {
font-size: var(--snk-fs-h1);
line-height: var(--snk-lh-h1);
margin-bottom: var(--snk-mb-h1);
}
h2,
.snk-h2 {
font-size: var(--snk-fs-h2);
line-height: var(--snk-lh-h2);
margin-bottom: var(--snk-mb-h2);
}
h3,
.snk-h3 {
font-size: var(--snk-fs-h3);
line-height: var(--snk-lh-h3);
margin-bottom: var(--snk-mb-h3);
}
h4,
.snk-h4 {
font-size: var(--snk-fs-h4);
line-height: var(--snk-lh-h4);
margin-bottom: var(--snk-mb-h4);
}
h5,
.snk-h5 {
font-size: var(--snk-fs-h5);
line-height: var(--snk-lh-h5);
margin-bottom: var(--snk-mb-h5);
}
h6,
.snk-h6 {
font-size: var(--snk-fs-h6);
line-height: var(--snk-lh-h6);
margin-bottom: var(--snk-mb-h6);
}
.snk-sh {
font-size: var(--snk-fs-sh);
line-height: var(--snk-lh-sh);
margin-bottom: var(--snk-mb-sh);
font-family: var(--snk-font-body, "DMSansRegular");
font-weight: 400;
}
p {
margin-top: 0;
color: var(--snk-text-color);
}
p,
ul:not([class]),
ol:not([class]) {
font-size: var(--snk-fs-body);
line-height: var(--snk-lh-body);
margin-bottom: var(--snk-mb-p);
}
.snk-roofline {
color: #001a26;
font-family: "DMSansRegular";
font-size: 18px;
font-weight: 450;
line-height: 1.5;
letter-spacing: -0.0187rem;
margin-bottom: 0;
}
.single-post ol:not([class]),
.site-main ol:not([class]) {
padding-left: 1rem;
}
.single-post ul,
.site-main ul {
list-style: none;
}
.single-post ul:not([class]),
.site-main ul:not([class]) {
padding-left: 1rem;
}
.single-post ul:not([class]) li::before,
.site-main ul:not([class]) li::before {
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23004959"/%3e%3c/svg%3e');
background-repeat: no-repeat;
left: -1rem;
}
.single-post ul.checkmark,
.site-main ul.checkmark {
padding-left: 1.8125rem;
}
.single-post ul.checkmark li,
.site-main ul.checkmark li {
position: relative;
margin-bottom: var(--snk-list-mb, 0.5rem);
}
.single-post ul.checkmark li::before,
.site-main ul.checkmark li::before {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9" fill="none"%3e %3cpath d="M3.64425 8.87698L0 5.23273L1.04425 4.18848L3.64425 6.78848L10.2443 0.188477L11.2885 1.23273L3.64425 8.87698Z" fill="%23004959"/%3e %3c/svg%3e');
background-repeat: no-repeat;
background-size: 100%;
width: 0.6875rem;
height: var(--snk-list-bullet-height, 2rem);
position: absolute;
top: var(--snk-list-bullet-top, -0.125rem);
left: -1.3125rem;
}
b,
strong {
font-weight: var(--snk-fw-bold);
}
.snk-pill {
background-color: #E3E3E3;
padding: 0.1875rem 0.75rem;
border-radius: 3rem;
}
a:not([class]) {
color: #454545;
}
a:not([class]):focus-visible {
outline: 1px solid var(--snk-link-ouline-color);
outline-offset: 0.16667em;
}
.snk-link {
font-size: var(--snk-fs-body-s);
}
.snk-link .snk-btn-circle {
background-color: #004959;
border-radius: 3rem;
width: 1.25rem;
height: 1.25rem;
overflow: hidden;
display: flex;
align-items: center;
flex-shrink: 0;
}
@media (min-width: 768px) {
.snk-link .snk-btn-circle {
width: 1.25rem;
height: 1.25rem;
}
}
.snk-link .snk-btn-circle .snk-btn-arrows {
position: relative;
display: block;
width: 1.25rem;
height: 1.25rem;
transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
@media (min-width: 768px) {
.snk-link .snk-btn-circle .snk-btn-arrows {
width: 1.25rem;
height: 1.25rem;
}
}
.snk-link .snk-btn-circle .snk-btn-arrows::before, .snk-link .snk-btn-circle .snk-btn-arrows::after {
content: "";
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"%3e%3cg%3e%3cpath d="M22.4037 17H6.23438V15H22.4037L14.8087 7.405L16.2344 6L26.2344 16L16.2344 26L14.8087 24.595L22.4037 17Z" fill="%23fff"/%3e%3c/g%3e%3c/svg%3e');
background-repeat: no-repeat;
width: 0.875rem;
height: 0.875rem;
position: absolute;
background-position: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-size: contain;
}
@media (min-width: 768px) {
.snk-link .snk-btn-circle .snk-btn-arrows::before, .snk-link .snk-btn-circle .snk-btn-arrows::after {
width: 0.875rem;
height: 0.875rem;
}
}
.snk-link .snk-btn-circle .snk-btn-arrows::before {
left: -50%;
display: inline-block;
}
.snk-link .snk-btn-circle .snk-btn-arrows::after {
display: inline-block;
}
.snk-link:hover .snk-btn-circle .snk-btn-arrows {
animation: arrowsAroundTheWorld 0.5s forwards;
}
.snk-link:focus-visible {
border-radius: 0.375rem;
outline: 3px solid var(--snk-btn-secondary-focus-color);
outline-offset: 2px;
}
.snk-link:active .snk-btn-circle {
background-color: #001a26;
}
body ol,
body ul {
margin-top: 0;
}
body ol:not([class]),
body ul:not([class]) {
padding-left: 1rem;
}
body ul:not([class]) {
list-style: none;
}
body ul:not([class]) li {
position: relative;
margin-bottom: var(--snk-list-mb, 0.5rem);
}
body ul:not([class]) li::before {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23454545"/%3e%3c/svg%3e');
background-repeat: no-repeat;
background-size: 100%;
width: var(--snk-list-bullet-width, 2rem);
height: var(--snk-list-bullet-height, 2rem);
position: absolute;
top: var(--snk-list-bullet-top, -0.125rem);
left: -1rem;
}
.snk-complexTable tr td p, .snk-complexTable tr th {
font-size: var(--snk-fs-body-s);
line-height: var(--snk-lh-body-s);
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
.snk-btn-primary {
font-family: "CHSansBold";
background-color: var(--snk-btn-primary-color);
color: var(--snk-btn-primary-font-color);
padding: 0.375rem 1rem 0.375rem 0.375rem;
transition: background-color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, color 0.3s ease-out;
gap: 0.5rem;
}
.snk-btn-primary .snk-btn-circle {
background-color: var(--snk-btn-primary-circle-color);
border-radius: 3rem;
width: 1.75rem;
height: 1.75rem;
overflow: hidden;
display: flex;
align-items: center;
flex-shrink: 0;
border: 1px solid var(--snk-btn-primary-circle-border-color);
}
@media (min-width: 768px) {
.snk-btn-primary .snk-btn-circle {
width: 1.75rem;
height: 1.75rem;
}
}
.snk-btn-primary .snk-btn-circle .snk-btn-arrows {
position: relative;
display: block;
width: 1.75rem;
height: 1.75rem;
transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
@media (min-width: 768px) {
.snk-btn-primary .snk-btn-circle .snk-btn-arrows {
width: 1.75rem;
height: 1.75rem;
}
}
.snk-btn-primary .snk-btn-circle .snk-btn-arrows::before, .snk-btn-primary .snk-btn-circle .snk-btn-arrows::after {
content: "";
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"%3e%3cg%3e%3cpath d="M22.4037 17H6.23438V15H22.4037L14.8087 7.405L16.2344 6L26.2344 16L16.2344 26L14.8087 24.595L22.4037 17Z" fill="%23004959"/%3e%3c/g%3e%3c/svg%3e');
background-repeat: no-repeat;
width: 1rem;
height: 1rem;
position: absolute;
background-position: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-size: contain;
}
@media (min-width: 768px) {
.snk-btn-primary .snk-btn-circle .snk-btn-arrows::before, .snk-btn-primary .snk-btn-circle .snk-btn-arrows::after {
width: 1rem;
height: 1rem;
}
}
.snk-btn-primary .snk-btn-circle .snk-btn-arrows::before {
left: -50%;
display: inline-block;
}
.snk-btn-primary .snk-btn-circle .snk-btn-arrows::after {
display: inline-block;
}
.snk-btn-primary:hover {
background: var(--snk-btn-primary-hover-color);
color: var(--snk-btn-primary-hover-font-color);
}
.snk-btn-primary:hover .snk-btn-circle .snk-btn-arrows {
animation: arrowsAroundTheWorld 0.5s forwards;
}
.snk-btn-primary:focus-visible {
box-shadow: 0 0 0 3px var(--snk-btn-secondary-focus-color);
outline: none;
}
.snk-btn-secondary {
background: var(--snk-btn-secondary-color);
border: 1px solid var(--snk-btn-secondary-border-color);
padding: 0.53125rem 2rem;
line-height: normal;
vertical-align: bottom;
color: var(--snk-btn-secondary-font-color);
transition: background-color 0.3s ease-out, border 0.3s ease-out, color 0.3s ease-out;
overflow: hidden;
font-family: "CHSansBold";
}
.snk-btn-secondary > span {
z-index: 1;
}
.snk-btn-secondary::before {
content: "";
position: absolute;
height: 100%;
background-color: var(--snk-btn-secondary-hover-color);
border-radius: var(--snk-button-br, 8rem);
left: 0;
right: 100%;
transition: right 0.7s;
z-index: 0;
}
.snk-btn-secondary:hover {
color: var(--snk-btn-secondary-hover-font-color);
}
.snk-btn-secondary:hover::before {
right: 0;
}
.snk-btn-secondary:focus-visible {
box-shadow: 0 0 0 3px var(--snk-btn-secondary-focus-color);
outline: none;
}
.snk-btn-secondary:active {
background: var(--snk-btn-secondary-active-color);
border-color: var(--snk-btn-secondary-active-border);
color: var(--snk-btn-secondary-active-font-color);
box-shadow: none;
}
.snk-btn-secondary:active::before {
right: 100%;
transition: right 0s;
}
.snk-btn-secondary .snk-btn-circle {
background-color: #004959;
border-radius: 3rem;
width: 2rem;
height: 2rem;
overflow: hidden;
display: flex;
align-items: center;
flex-shrink: 0;
}
@media (min-width: 768px) {
.snk-btn-secondary .snk-btn-circle {
width: 1.75rem;
height: 1.75rem;
}
}
.snk-btn-secondary .snk-btn-circle .snk-btn-arrows {
position: relative;
display: block;
width: 2rem;
height: 2rem;
transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
@media (min-width: 768px) {
.snk-btn-secondary .snk-btn-circle .snk-btn-arrows {
width: 1.75rem;
height: 1.75rem;
}
}
.snk-btn-secondary .snk-btn-circle .snk-btn-arrows::before, .snk-btn-secondary .snk-btn-circle .snk-btn-arrows::after {
content: "";
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"%3e%3cg%3e%3cpath d="M22.4037 17H6.23438V15H22.4037L14.8087 7.405L16.2344 6L26.2344 16L16.2344 26L14.8087 24.595L22.4037 17Z" fill="%23fff"/%3e%3c/g%3e%3c/svg%3e');
background-repeat: no-repeat;
width: 1.875rem;
height: 1.875rem;
position: absolute;
background-position: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-size: contain;
}
@media (min-width: 768px) {
.snk-btn-secondary .snk-btn-circle .snk-btn-arrows::before, .snk-btn-secondary .snk-btn-circle .snk-btn-arrows::after {
width: 0.875rem;
height: 0.875rem;
}
}
.snk-btn-secondary .snk-btn-circle .snk-btn-arrows::before {
left: -50%;
display: inline-block;
}
.snk-btn-secondary .snk-btn-circle .snk-btn-arrows::after {
display: inline-block;
}
.snk-btn-secondary-light {
border: none;
padding: calc(1.25rem - 1px) 1rem;
}
@media (min-width: 768px) {
.snk-btn-secondary-light {
padding: calc(0.53125rem - 1px) 2rem;
}
}
.snk-btn-secondary-medium {
padding: 0.8125rem 2rem 0.875rem;
}
.snk-btn-secondary:hover .snk-btn-circle .snk-btn-arrows {
animation: arrowsAroundTheWorld 0.5s forwards;
}
@keyframes arrowsAroundTheWorld {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.snk-btn-expand {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: #fff;
border: 0 none;
cursor: pointer;
color: #004959;
font-size: 1rem;
font-family: "CHSansBold";
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 5px;
transition: 0.3s ease;
}
.snk-btn-expand:hover {
text-decoration-color: #004959;
}
.snk-btn-expand .icon-circle {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background-color: #004959;
border-radius: 50%;
color: #fff;
transition: all 0.3s ease;
}
.snk-btn-expand .icon-circle .icon-plus {
position: relative;
width: 7px;
height: 1px;
background: #fff;
display: block;
}
.snk-btn-expand .icon-circle .icon-plus::after {
content: "";
position: absolute;
top: -3px;
left: 3px;
width: 1px;
height: 7px;
background: #fff;
transition: 0.3s ease;
}
.snk-btn-expand .icon-circle.open .icon-plus::after {
transform: rotate(90deg);
}
.snk-btn-expand.block {
border-radius: 170px;
border: 1px solid rgba(204, 0, 0, 0.2);
color: #c00;
width: 100%;
padding: 8px;
justify-content: center;
}
.snk-btn-expand.block:hover {
text-decoration-color: #c00;
}
.snk-btn-expand.block .icon-circle {
background-color: #c00;
}
/* Remove this file, if you don't need it in your project */
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
@media (min-width: 1200px) {
.admin-bar .snk-header {
margin-top: 2rem;
}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.admin-bar .snk-header {
margin-top: -0.875rem;
}
}
.snk-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: transform 0.3s ease, max-height 0.2s ease;
max-height: var(--snk-header-height);
height: 100%;
border-bottom: 1px solid #d9e4e6;
}
@media (max-width: 1199.98px) {
.snk-header {
background-color: #fff;
}
}
@media (min-width: 1200px) {
.snk-header {
background: rgba(246, 245, 245, 0.7);
backdrop-filter: blur(27px);
}
.snk-header::before {
content: "";
background: #fff;
width: 100%;
height: var(--snk-header-height);
display: block;
position: absolute;
z-index: 0;
border-bottom: 1px solid #d9e4e6;
}
}
.snk-header.is-active {
max-height: 42rem;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12);
transition: max-height 0.2s ease;
}
.snk-header-wrapper {
padding-top: var(--snk-mobile-header-height);
}
@media (min-width: 1200px) {
.snk-header-wrapper {
padding-top: var(--snk-header-height);
}
}
.snk-header-branding {
z-index: 1001;
line-height: 0.5;
padding-bottom: 1.25rem;
}
.snk-header-branding .custom-logo {
height: 40px;
}
@media (max-width: 1199.98px) {
.snk-header-branding {
padding-bottom: 0;
}
.snk-header-branding .custom-logo {
width: 135px;
height: 33px;
}
}
.snk-header-inner {
padding: var(--snk-header-y-padding, 1rem) 0 0;
}
.snk-header-menu-toggle {
position: relative;
width: 22px;
height: 15px;
margin-left: 7px;
border: none;
background: transparent;
z-index: 1001;
}
.snk-header-menu-toggle span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #003838;
opacity: 1;
right: 0;
transform: rotate(0deg);
transition: 0.25s ease-in-out;
}
.snk-header-menu-toggle span:nth-child(1) {
top: 0;
}
.snk-header-menu-toggle span:nth-child(4) {
top: 15px;
}
.snk-header-menu-toggle.is-active span:nth-child(3) {
transform: rotate(-45deg);
}
.snk-header-menu-toggle.is-active span:nth-child(2) {
transform: rotate(45deg);
}
.snk-header-menu-toggle.is-active span:nth-child(1),
.snk-header-menu-toggle.is-active span:nth-child(4) {
top: 10px;
width: 0;
right: 50%;
}
.breadcrumb-list {
display: flex;
gap: 2.375rem;
padding: 0.5rem 0 0;
align-items: center;
}
.breadcrumb-list > li {
position: relative;
color: #222;
font-size: 0.875rem;
font-family: DMSansMedium;
}
.breadcrumb-list > li a {
color: #6b6b6f;
text-decoration: none;
font-weight: 300;
font-family: CHSansLight;
white-space: nowrap;
}
.breadcrumb-list > li:not(:first-child)::before {
content: "";
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"%3e%3cpath d="M9.70977 8.99813L6.25977 5.54813L7.05008 4.75781L11.2904 8.99813L7.05008 13.2384L6.25977 12.4481L9.70977 8.99813Z" fill="%236b6b6f"/%3e%3c/svg%3e');
width: 1.125rem;
height: 1.125rem;
position: absolute;
left: -1.75rem;
top: 0.125rem;
}
.breadcrumb-list > li:last-child span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
display: block;
}
@media (max-width: 767.98px) {
.breadcrumb-list > li:not([aria-current=page]) {
display: none;
}
.breadcrumb-list > li[aria-current=page] {
padding-left: 1.75rem;
}
.breadcrumb-list > li[aria-current=page] span {
max-width: calc(100vw - 88px);
}
.breadcrumb-list > li[aria-current=page]::before {
transform: rotate(180deg);
left: 0;
}
}
.snk-navigation li {
position: static;
}
.snk-navigation-menu ul .menu-parent-title {
color: #222;
font-family: "CHSansBold";
font-size: 1rem;
font-weight: 700;
line-height: var(--snk-lh-body-s);
}
.snk-navigation-menu ul .menu-item-title {
color: #6b6b6f;
font-family: "CHSansBold";
font-size: 0.875rem;
font-weight: 700;
line-height: var(--snk-lh-body-s);
text-transform: uppercase;
padding: 0 0 0.5rem 0;
margin: 0;
}
.snk-navigation-menu ul ul {
position: static;
box-shadow: none;
}
.snk-navigation-menu ul li.menu-item a {
color: #222;
font-family: "CHSansBold";
font-size: 1.25rem;
font-weight: 700;
line-height: var(--snk-lh-body-s);
text-decoration: none;
transition: color 0.4s ease;
}
.snk-navigation-menu ul li.menu-item.current-menu-item a {
color: #6b6b6f;
}
.snk-navigation-menu ul li.menu-item .sub-menu.snk-megaMenu {
display: flex;
}
.snk-navigation-menu ul li.menu-item .sub-menu li {
padding: 0.5rem 0;
width: 100%;
position: static;
}
.snk-navigation-menu ul li.menu-item .sub-menu li a {
width: 100%;
font-family: "DMSansRegular";
text-decoration: none;
font-size: 1.125rem;
font-weight: 500;
}
.snk-navigation-menu ul li.menu-item .sub-menu li:last-child {
padding-bottom: 0;
}
.snk-navigation-menu.mobile-menu {
display: none;
}
.snk-navigation-menu.is-mobile.mobile-menu {
display: flex;
}
.snk-navigation-aside {
z-index: 1;
padding-bottom: 1.25rem;
}
@media (max-width: 1199.98px) {
.snk-header-navigation {
position: absolute;
width: 100vw;
top: var(--snk-mobile-header-height);
height: calc(100vh - var(--snk-mobile-header-height));
max-height: calc(100vh - var(--snk-mobile-header-height));
right: 0;
z-index: 1000;
transform: translate3d(105%, 0, 0);
transition: transform 0.3s ease-out;
overflow: visible;
flex-direction: column;
padding: 0;
background-color: transparent;
}
.snk-header-navigation::before {
content: "";
width: 100%;
display: block;
height: 100vh;
position: absolute;
top: calc(var(--snk-header-height) * -1);
left: 0;
z-index: 1002;
background: rgba(246, 245, 245, 0.8);
backdrop-filter: blur(27px);
}
.snk-header-navigation.toggled {
transform: translate3d(0, 0, 0);
transition: transform 0.3s ease-out;
}
.snk-navigation {
display: block;
overflow: auto;
position: absolute;
width: 100vw;
z-index: 1005;
padding: 0 var(--snk-container-x-padding);
top: 0;
height: calc(100vh - var(--snk-mobile-header-height));
}
.snk-navigation ul {
display: block;
}
.snk-navigation-menu {
width: 100%;
}
.snk-navigation-menu ul li.menu-item .sub-menu {
padding: 0;
flex-direction: column;
float: none;
}
.snk-navigation-menu ul li.menu-item li.menu-item + li.menu-item:has(.menu-item-title) {
border-top: 1px solid #a6bfc5;
padding-top: 1.25rem;
margin-top: 12px;
}
.snk-navigation .nav-menu {
padding: 1rem 0 3rem;
}
.snk-navigation .nav-menu > li.menu-item > a {
padding: 1rem 0;
display: flex;
gap: 1rem;
justify-content: space-between;
align-items: center;
font-size: 1.125rem;
}
.snk-navigation .nav-menu > li.menu-item-has-children .menu-parent-title {
display: none;
}
.snk-navigation .nav-menu > li.menu-item-has-children .megamenu {
display: none;
overflow: hidden;
}
.snk-navigation .nav-menu > li.menu-item-has-children.is-active > a::after {
transform: rotate(-180deg);
}
.snk-navigation .nav-menu > li.menu-item-has-children > a::after {
content: "";
display: block;
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"%3e%3cg%3e%3cpath d="M11.9975 15.5537L6.34375 9.89994L7.3975 8.84619L11.9975 13.4462L16.5975 8.84619L17.6513 9.89994L11.9975 15.5537Z" fill="%23222"/%3e%3c/g%3e%3c/svg%3e');
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.snk-navigation .nav-menu .megamenu .sub-menu > li.menu-item:last-child {
padding-bottom: 1rem;
}
.snk-navigation-button a {
display: flex;
justify-content: center;
margin: -1rem 0 1rem;
}
.snk-navigation-megamenu-buttons {
display: none;
}
.snk-navigation-aside {
display: none;
}
}
@media (min-width: 1200px) {
.snk-header-menu-toggle,
.snk-navigation.toggled ul {
display: flex;
}
.snk-header-navigation {
z-index: 3;
padding: 0 2rem;
}
.snk-header-navigation .snk-navigation-underline {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: #004959;
transition: all 0.3s ease;
width: 0;
pointer-events: none;
top: 4.9375rem;
z-index: 2;
}
.snk-navigation-menu > ul {
display: flex;
margin: calc(var(--snk-primary-nav-padding, 1rem) * -1) -1rem;
}
.snk-navigation-menu > ul > li {
padding: var(--snk-primary-nav-padding, 1rem) 1rem 2.125rem;
}
.snk-navigation-menu > ul > li.hover-state a {
color: #6b6b6f;
}
.snk-navigation-menu > ul li.menu-item .megamenu {
display: none;
position: absolute;
left: 0;
top: var(--snk-header-height);
width: 100vw;
height: 36rem;
padding: 0 2rem;
z-index: 1003;
}
.snk-navigation-menu > ul li.menu-item .megamenu:hover {
cursor: default;
}
.snk-navigation-menu > ul li.menu-item .megamenu .container {
display: flex;
flex-direction: column;
padding: 3.5rem var(--snk-container-x-padding) 0;
justify-content: space-between;
height: 100%;
}
.snk-navigation-menu > ul li.menu-item .megamenu .snk-megaMenu > li {
width: 25%;
}
.snk-navigation-menu > ul li.menu-item a {
font-size: 1rem;
}
.snk-navigation-menu > ul li.menu-item .sub-menu li a {
font-size: 1.25rem;
transition: all 0.1s ease;
text-decoration: underline;
text-decoration-color: transparent;
}
.snk-navigation-menu > ul li.menu-item .sub-menu li a:hover {
text-decoration: underline;
text-decoration-color: #000;
text-underline-offset: 5px;
transition: all 0.3s ease;
text-decoration-thickness: 0.0625rem;
}
.snk-navigation-menu ul li.menu-item .sub-menu:not(.snk-megaMenu) {
display: grid;
grid-template-columns: 25% auto;
grid-auto-rows: auto;
}
.snk-navigation-menu ul li.menu-item .sub-menu:not(.snk-megaMenu) .menu-item {
grid-column: 2;
}
.snk-navigation .nav-menu > .menu-item {
padding-bottom: 31px;
}
.snk-navigation .nav-menu > .menu-item:hover {
cursor: pointer;
}
.snk-navigation-menu ul li.menu-item .megamenu .snk-navigation-megamenu-buttons {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
margin-left: 25%;
border-top: 1px solid #a6bfc5;
}
.snk-navigation-menu ul li.menu-item .megamenu .snk-navigation-megamenu-buttons a {
font-size: 0.875rem;
position: relative;
padding-right: 2rem;
transition: all 0.3s ease;
text-decoration: underline;
text-decoration-color: transparent;
}
.snk-navigation-menu ul li.menu-item .megamenu .snk-navigation-megamenu-buttons a:hover {
text-decoration: underline;
text-decoration-color: #000;
text-underline-offset: 5px;
transition: all 0.3s ease;
}
.snk-navigation-menu ul li.menu-item .megamenu .snk-navigation-megamenu-buttons a::after {
content: "";
background-repeat: no-repeat;
width: 1.5rem;
height: 1.5rem;
position: absolute;
background-position: center;
right: 0;
background-size: contain;
}
.snk-navigation-menu ul li.menu-item .megamenu .snk-navigation-megamenu-buttons .button-group {
display: flex;
gap: 1.5rem;
}
.snk-navigation-menu ul li.menu-item .megamenu .snk-navigation-megamenu-buttons .button-group a::after {
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"%3e%3cg%3e%3cpath d="M6.29425 18.1443L5.25 17.1L15.0905 7.25H6.14425V5.75H17.6443V17.25H16.1443V8.30375L6.29425 18.1443Z" fill="%23c00"/%3e%3c/g%3e%3c/svg%3e');
}
.snk-navigation-menu ul li.menu-item .megamenu .snk-navigation-megamenu-buttons .button-group-close a::after {
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none"%3e%3cg%3e%3cpath d="M6.3975 19.1537L5.34375 18.0999L10.9437 12.4999L5.34375 6.89994L6.3975 5.84619L11.9975 11.4462L17.5975 5.84619L18.6513 6.89994L13.0513 12.4999L18.6513 18.0999L17.5975 19.1537L11.9975 13.5537L6.3975 19.1537Z" fill="%23c00"/%3e%3c/g%3e%3c/svg%3e');
}
.snk-navigation-button {
display: none;
}
.snk-header-menu-toggle {
display: none;
}
}
.snk-footer .row {
--snk-gutter-y: 0;
}
.snk-footer-menuGroup {
display: flex;
border-bottom: 1px solid rgba(166, 191, 197, 0.24);
padding-bottom: 3rem;
margin-bottom: 1rem;
}
.snk-footer-logo {
max-width: 10.375rem;
max-height: 7.5rem;
display: block;
color: inherit;
}
.snk-footer-logo svg,
.snk-footer-logo img {
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
}
.snk-footer-logo svg {
color: inherit;
}
.snk-footer-nav {
list-style: none;
flex: 50%;
padding: 0 1.5rem;
}
.snk-footer-nav,
.snk-footer-nav h5 {
font-size: var(--snk-fs-body-s);
}
.snk-footer-nav h5 {
font-weight: 700;
font-family: "DMSansRegular";
line-height: 1.5;
margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
.snk-footer-nav h5 {
margin-bottom: 1rem;
}
}
.snk-footer-nav li:not(:last-child) {
margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
.snk-footer-nav li:not(:last-child) {
margin-bottom: 1rem;
}
}
.snk-footer-link {
color: #fff;
text-decoration: none;
}
.snk-footer-partner-logos {
display: flex;
gap: 1.1875rem;
}
.snk-footer-link, .snk-footer-privacyPolicyLinks a {
position: relative;
transition: all 0.1s ease;
text-decoration: underline;
text-decoration-color: transparent;
}
.snk-footer-link:hover, .snk-footer-privacyPolicyLinks a:hover {
text-decoration: underline;
text-underline-offset: 5px;
transition: all 0.3s ease;
text-decoration-thickness: 0.0625rem;
}
.snk-footer-socialIcons {
display: flex;
align-items: flex-end;
list-style: none;
}
.snk-footer-socialIcons a:hover {
opacity: 60%;
}
.snk-footer-socialIcons li {
margin-right: 1.5rem;
}
.snk-footer-socialIcons img {
width: 1.5rem;
height: 1.5rem;
min-width: 1.5rem;
min-height: 1.5rem;
}
.snk-footer-privacyPolicyLinks {
font-size: 1rem;
line-height: 1;
display: flex;
list-style: none;
}
.snk-footer-privacyPolicyLinks li {
margin-right: 1.5rem;
}
.snk-footer-privacyPolicyLinks a {
color: #fff;
text-decoration: none;
}
.snk-footer-copyright {
font-size: 1rem;
line-height: 1;
margin-bottom: 0;
max-width: initial;
}
@media (max-width: 767.98px) {
.snk-footer .container {
padding: 0;
}
.snk-footer-menuGroup {
flex-wrap: wrap;
}
.snk-footer-menuGroup .snk-footer-nav {
padding: 0 0.75rem;
}
.snk-footer-menuGroup .snk-footer-nav:first-child, .snk-footer-menuGroup .snk-footer-nav:nth-child(2) {
padding-bottom: 3rem;
}
.snk-footer-menuGroup .snk-footer-nav:nth-child(odd) {
padding-left: 0;
}
.snk-footer-menuGroup .snk-footer-nav:nth-child(even) {
padding-right: 0;
}
.snk-footer-menuGroup .snk-footer-nav:last-child {
padding-right: 1rem;
}
.snk-footer-menuGroup .snk-footer-nav:nth-last-child(-n+2) li:last-child {
margin-bottom: 0;
}
}
@media (max-width: 1023.98px) {
.snk-footer.snk-section {
padding: 2rem 1.25rem 1.5rem;
}
.snk-footer-copyrightLinksWrap {
margin-top: 1.5rem;
}
.snk-footer-copyrightLinksWrap + .col-12 {
margin-top: 0;
}
.snk-footer-privacyPolicyLinks {
margin: 1.5rem 0;
}
.snk-footer-privacyPolicyLinks li:last-child {
margin-right: 0;
}
.snk-footer-logo {
margin-bottom: 0.3125rem;
}
.snk-footer-meta-wrapper {
margin-top: 0;
}
}
@media (min-width: 768px) {
.snk-footer.snk-section {
padding-bottom: 1.5rem;
padding-top: 5rem;
}
.snk-footer-logo {
max-width: 10.375rem;
}
.snk-footer-logo svg {
width: 100%;
height: auto;
}
.snk-footer-menuGroup .snk-footer-nav {
width: 25%;
padding: 0 1.5rem;
margin-bottom: 0;
}
.snk-footer-menuGroup .snk-footer-nav:first-child {
padding-left: 0;
}
.snk-footer-menuGroup .snk-footer-nav:last-child {
padding-right: 0;
}
.snk-footer-menuGroup .snk-footer-nav li:last-child {
margin-bottom: 0;
}
}
@media (min-width: 1024px) {
.snk-footer-menuGroup {
justify-content: flex-end;
}
.snk-footer-menuGroup .snk-footer-nav:first-child {
padding-left: 1rem;
}
.snk-footer-menuGroup .snk-footer-nav:last-child {
padding-right: 1rem;
}
.snk-footer-meta-wrapper {
margin-top: 0;
display: flex;
flex-wrap: nowrap;
}
.snk-footer-copyrightLinksWrap {
display: flex;
align-items: flex-end;
}
.snk-footer-copyright {
padding-right: 1rem;
}
.snk-footer-socialIcons {
display: flex;
align-items: flex-end;
list-style: none;
justify-content: end;
}
.snk-footer-socialIcons li {
margin-left: 1.5rem;
margin-right: 0;
}
}
.snk-bg_3, .snk-bg_1 {
--snk-btn-link-color: #004959;
--snk-link-underline-color: #004959;
--snk-link-color: #004959;
}
.snk-bg_3 h1, .snk-bg_1 h1,
.snk-bg_3 h2,
.snk-bg_1 h2,
.snk-bg_3 h3,
.snk-bg_1 h3,
.snk-bg_3 h4,
.snk-bg_1 h4,
.snk-bg_3 h5,
.snk-bg_1 h5,
.snk-bg_3 h6,
.snk-bg_1 h6,
.snk-bg_3 .snk-h1,
.snk-bg_1 .snk-h1,
.snk-bg_3 .snk-h2,
.snk-bg_1 .snk-h2,
.snk-bg_3 .snk-h3,
.snk-bg_1 .snk-h3,
.snk-bg_3 .snk-h4,
.snk-bg_1 .snk-h4,
.snk-bg_3 .snk-h5,
.snk-bg_1 .snk-h5,
.snk-bg_3 .snk-h6,
.snk-bg_1 .snk-h6 {
color: #222;
}
.snk-bg_3, .snk-bg_1,
.snk-bg_3 p,
.snk-bg_1 p,
.snk-bg_3 .snk-roofline,
.snk-bg_1 .snk-roofline,
.snk-bg_3 .snk-sh,
.snk-bg_1 .snk-sh,
.snk-bg_3 ol,
.snk-bg_1 ol,
.snk-bg_3 ul,
.snk-bg_1 ul {
color: #454545;
}
.snk-bg_3 ul:not([class]) li::before, .snk-bg_1 ul:not([class]) li::before {
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23004959"/%3e%3c/svg%3e');
}
.snk-bg_6, .snk-bg_4, .snk-bg_2 {
--snk-btn-link-color: #fff;
--snk-link-underline-color: #fff;
--snk-link-color: #fff;
}
.snk-bg_6, .snk-bg_4, .snk-bg_2,
.snk-bg_6 h1,
.snk-bg_4 h1,
.snk-bg_2 h1,
.snk-bg_6 h2,
.snk-bg_4 h2,
.snk-bg_2 h2,
.snk-bg_6 h3,
.snk-bg_4 h3,
.snk-bg_2 h3,
.snk-bg_6 h4,
.snk-bg_4 h4,
.snk-bg_2 h4,
.snk-bg_6 h5,
.snk-bg_4 h5,
.snk-bg_2 h5,
.snk-bg_6 h6,
.snk-bg_4 h6,
.snk-bg_2 h6,
.snk-bg_6 .snk-h1,
.snk-bg_4 .snk-h1,
.snk-bg_2 .snk-h1,
.snk-bg_6 .snk-h2,
.snk-bg_4 .snk-h2,
.snk-bg_2 .snk-h2,
.snk-bg_6 .snk-h3,
.snk-bg_4 .snk-h3,
.snk-bg_2 .snk-h3,
.snk-bg_6 .snk-h4,
.snk-bg_4 .snk-h4,
.snk-bg_2 .snk-h4,
.snk-bg_6 .snk-h5,
.snk-bg_4 .snk-h5,
.snk-bg_2 .snk-h5,
.snk-bg_6 .snk-h6,
.snk-bg_4 .snk-h6,
.snk-bg_2 .snk-h6,
.snk-bg_6 p,
.snk-bg_4 p,
.snk-bg_2 p,
.snk-bg_6 .snk-roofline,
.snk-bg_4 .snk-roofline,
.snk-bg_2 .snk-roofline,
.snk-bg_6 .snk-sh,
.snk-bg_4 .snk-sh,
.snk-bg_2 .snk-sh,
.snk-bg_6 ol,
.snk-bg_4 ol,
.snk-bg_2 ol,
.snk-bg_6 ul,
.snk-bg_4 ul,
.snk-bg_2 ul,
.snk-bg_6 a:not([class]),
.snk-bg_4 a:not([class]),
.snk-bg_2 a:not([class]) {
color: #fff;
}
.snk-bg_6 ul:not([class]) li::before, .snk-bg_4 ul:not([class]) li::before, .snk-bg_2 ul:not([class]) li::before {
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23fff"/%3e%3c/svg%3e');
}
.snk-bg_1 {
background-color: #f0f4f5;
--snk-color-dark: false;
}
.snk-bg_2 {
background: linear-gradient(130deg, #004959 18.45%, #376975 77.43%, #6b8e97 136.42%);
--snk-color-dark: true;
--snk-btn-primary-font-color: #c00;
--snk-btn-primary-color: #fff;
--snk-btn-primary-hover-color: #c00;
--snk-btn-primary-hover-font-color: #fff;
--snk-btn-primary-circle-color: #fff;
--snk-btn-primary-circle-border-color: #c00;
}
.snk-bg_2 .snk-btn-primary:hover .snk-btn-circle {
border-color: #fff;
background-color: #c00;
}
.snk-bg_2 .snk-btn-primary:hover .snk-btn-circle .snk-btn-arrows::before, .snk-bg_2 .snk-btn-primary:hover .snk-btn-circle .snk-btn-arrows::after {
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"%3e%3cg%3e%3cpath d="M22.4037 17H6.23438V15H22.4037L14.8087 7.405L16.2344 6L26.2344 16L16.2344 26L14.8087 24.595L22.4037 17Z" fill="%23fff"/%3e%3c/g%3e%3c/svg%3e');
}
.snk-bg_2 .snk-btn-primary .snk-btn-circle .snk-btn-arrows::before, .snk-bg_2 .snk-btn-primary .snk-btn-circle .snk-btn-arrows::after {
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"%3e%3cg%3e%3cpath d="M22.4037 17H6.23438V15H22.4037L14.8087 7.405L16.2344 6L26.2344 16L16.2344 26L14.8087 24.595L22.4037 17Z" fill="%23c00"/%3e%3c/g%3e%3c/svg%3e');
}
.snk-bg_3 {
background-color: #fbf6eb;
--snk-color-dark: false;
}
.snk-bg_4 {
--snk-btn-secondary-font-color: #fff;
--snk-btn-secondary-color: transparent;
--snk-btn-secondary-border-color: #fff;
--snk-btn-secondary-hover-font-color: #004959;
--snk-btn-secondary-active-color: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), #004959;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), #004959;
--snk-color-dark: true;
}
.snk-bg_5 {
background: rgba(246, 245, 245, 0.7);
backdrop-filter: blur(27px);
}
.snk-bg_4, .snk-bg_5 {
--snk-btn-primary-font-color: #c00;
--snk-btn-primary-color: #fff;
--snk-btn-primary-hover-color: #c00;
--snk-btn-primary-hover-font-color: #fff;
--snk-btn-primary-circle-color: #fff;
--snk-btn-primary-circle-border-color: #c00;
}
.snk-bg_4 .snk-btn-primary:hover .snk-btn-circle, .snk-bg_5 .snk-btn-primary:hover .snk-btn-circle {
border-color: #fff;
background-color: #c00;
}
.snk-bg_4 .snk-btn-primary:hover .snk-btn-circle .snk-btn-arrows::before, .snk-bg_4 .snk-btn-primary:hover .snk-btn-circle .snk-btn-arrows::after, .snk-bg_5 .snk-btn-primary:hover .snk-btn-circle .snk-btn-arrows::before, .snk-bg_5 .snk-btn-primary:hover .snk-btn-circle .snk-btn-arrows::after {
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"%3e%3cg%3e%3cpath d="M22.4037 17H6.23438V15H22.4037L14.8087 7.405L16.2344 6L26.2344 16L16.2344 26L14.8087 24.595L22.4037 17Z" fill="%23fff"/%3e%3c/g%3e%3c/svg%3e');
}
.snk-bg_4 .snk-btn-primary .snk-btn-circle .snk-btn-arrows::before, .snk-bg_4 .snk-btn-primary .snk-btn-circle .snk-btn-arrows::after, .snk-bg_5 .snk-btn-primary .snk-btn-circle .snk-btn-arrows::before, .snk-bg_5 .snk-btn-primary .snk-btn-circle .snk-btn-arrows::after {
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"%3e%3cg%3e%3cpath d="M22.4037 17H6.23438V15H22.4037L14.8087 7.405L16.2344 6L26.2344 16L16.2344 26L14.8087 24.595L22.4037 17Z" fill="%23c00"/%3e%3c/g%3e%3c/svg%3e');
}
.snk-bg_6 {
--snk-btn-secondary-font-color: #fff;
background: transparent;
--snk-color-dark: true;
--snk-btn-primary-font-color: #c00;
--snk-btn-primary-color: #fff;
--snk-btn-primary-hover-color: #c00;
--snk-btn-primary-hover-font-color: #fff;
--snk-btn-primary-circle-color: #fff;
--snk-btn-primary-circle-border-color: #c00;
}
.snk-bg_6 .snk-btn-primary:hover .snk-btn-circle {
border-color: #fff;
background-color: #c00;
}
.snk-bg_6 .snk-btn-primary:hover .snk-btn-circle .snk-btn-arrows::before, .snk-bg_6 .snk-btn-primary:hover .snk-btn-circle .snk-btn-arrows::after {
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"%3e%3cg%3e%3cpath d="M22.4037 17H6.23438V15H22.4037L14.8087 7.405L16.2344 6L26.2344 16L16.2344 26L14.8087 24.595L22.4037 17Z" fill="%23fff"/%3e%3c/g%3e%3c/svg%3e');
}
.snk-bg_6 .snk-btn-primary .snk-btn-circle .snk-btn-arrows::before, .snk-bg_6 .snk-btn-primary .snk-btn-circle .snk-btn-arrows::after {
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"%3e%3cg%3e%3cpath d="M22.4037 17H6.23438V15H22.4037L14.8087 7.405L16.2344 6L26.2344 16L16.2344 26L14.8087 24.595L22.4037 17Z" fill="%23c00"/%3e%3c/g%3e%3c/svg%3e');
}
.snk-section {
--snk-section-y: 2rem;
padding-top: var(--snk-section-y);
padding-bottom: var(--snk-section-y);
overflow: hidden;
height: auto;
}
@media (min-width: 768px) {
.snk-section {
--snk-section-y: 4rem;
}
}
.snk-section_noTop {
padding-top: 0;
}
.snk-section_noBottom {
padding-bottom: 0;
}
.snk-section_noBtn {
padding-bottom: 0;
}
.snk-section_noPadding {
padding: 0;
}
.snk-section_center {
text-align: center;
}
.snk-section_center .snk-textBlock,
.snk-section_center .snk-404-textBlock {
align-items: center;
}
.snk-section_center ul {
text-align: left;
}
.snk-section_slim {
--snk-section-y: 2.5rem;
}
@media (min-width: 768px) {
.snk-section_slim {
--snk-section-y: 2.5rem;
}
}
.snk-section .row {
--snk-gutter-x: 1.25rem;
--snk-gutter-y: 2.5rem;
}
@media (min-width: 768px) {
.snk-section .row {
--snk-gutter-x: 2.5rem;
--snk-gutter-y: 3rem;
}
}
.snk-section_overflowInit {
overflow: initial;
}
.snk-section-headline {
align-items: center;
}
.snk-section-headline h2,
.snk-section-headline h3,
.snk-section-headline .snk-h2,
.snk-section-headline .snk-h3 {
margin-bottom: 0;
}
@media (max-width: 767.98px) {
.snk-section-headline.row {
--snk-gutter-y: 1.5rem;
}
}
.snk-section-headline_left h1,
.snk-section-headline_left h2,
.snk-section-headline_left h3,
.snk-section-headline_left .snk-h1,
.snk-section-headline_left .snk-h2,
.snk-section-headline_left .snk-h3, .snk-section-headline_right h1,
.snk-section-headline_right h2,
.snk-section-headline_right h3,
.snk-section-headline_right .snk-h1,
.snk-section-headline_right .snk-h2,
.snk-section-headline_right .snk-h3, .snk-section-headline_center h1,
.snk-section-headline_center h2,
.snk-section-headline_center h3,
.snk-section-headline_center .snk-h1,
.snk-section-headline_center .snk-h2,
.snk-section-headline_center .snk-h3 {
text-align: inherit;
}
.snk-section-headline_left {
text-align: left;
}
.snk-section-headline_center {
text-align: center;
}
.snk-section-headline_right {
text-align: right;
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
body ol,
body ul {
margin-top: 0;
}
body ol:not([class]),
body ul:not([class]) {
padding-left: 1rem;
}
body ul:not([class]) {
list-style: none;
}
body ul:not([class]) li {
position: relative;
margin-bottom: var(--snk-list-mb, 0.5rem);
}
body ul:not([class]) li::before {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23454545"/%3e%3c/svg%3e');
background-repeat: no-repeat;
background-size: 100%;
width: var(--snk-list-bullet-width, 2rem);
height: var(--snk-list-bullet-height, 2rem);
position: absolute;
top: var(--snk-list-bullet-top, -0.125rem);
left: -1rem;
}
.snk-complexTable tr td p, .snk-complexTable tr th {
font-size: var(--snk-fs-body-s);
line-height: var(--snk-lh-body-s);
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
.tooltip {
position: relative;
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-thickness: 10%;
text-underline-offset: 2px;
cursor: pointer;
}
.tooltip::after {
content: attr(data-tooltip);
font-size: 0.875rem;
font-weight: 400;
border-radius: 5px;
background: #fff;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12);
padding: 1rem;
position: absolute;
bottom: 125%;
left: 0;
width: 260px;
opacity: 0;
pointer-events: none;
transition: 0.3s ease;
z-index: 3;
white-space: pre-wrap;
}
.tooltip:hover::after {
opacity: 1;
pointer-events: all;
}
.snk-media_video {
position: relative;
}
.snk-media_video::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
z-index: 3;
}
.snk-media_video.is-active::before {
content: none;
}
.snk-media-playBtn {
position: absolute;
top: calc(50% - 34px);
left: calc(50% - 34px);
z-index: 4;
}
.snk-media-playBtn:hover {
cursor: pointer;
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
body ol,
body ul {
margin-top: 0;
}
body ol:not([class]),
body ul:not([class]) {
padding-left: 1rem;
}
body ul:not([class]) {
list-style: none;
}
body ul:not([class]) li {
position: relative;
margin-bottom: var(--snk-list-mb, 0.5rem);
}
body ul:not([class]) li::before {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23454545"/%3e%3c/svg%3e');
background-repeat: no-repeat;
background-size: 100%;
width: var(--snk-list-bullet-width, 2rem);
height: var(--snk-list-bullet-height, 2rem);
position: absolute;
top: var(--snk-list-bullet-top, -0.125rem);
left: -1rem;
}
.snk-complexTable tr td p, .snk-complexTable tr th {
font-size: var(--snk-fs-body-s);
line-height: var(--snk-lh-body-s);
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
.snk-featured-post {
align-items: center;
}
.snk-featured-post__content {
max-width: 34.5rem;
width: 100%;
}
@media (min-width: 768px) {
.snk-featured-post__content {
justify-self: flex-end;
}
}
.snk-featured-post__image img {
aspect-ratio: 1/1;
object-fit: cover;
width: 100%;
height: 350px;
object-position: center;
}
@media (max-width: 767.98px) {
.snk-featured-post__image img {
height: auto;
}
}
@media (max-width: 767.98px) {
.snk-featured-post__image + .col-12 {
margin-top: 1.5rem;
}
}
@media (max-width: 767.98px) {
.snk-featured-post__title, .snk-featured-post__excerpt {
margin-bottom: 1.5rem;
}
}
.snk-blog-teaser {
display: flex;
flex-wrap: wrap;
transform: none;
text-decoration: none;
position: relative;
padding: 0 calc(var(--snk-gutter-x) / 2);
}
@media (max-width: 767.98px) {
.snk-blog-teaser-alerts.snk-blog-teaser {
margin-top: 1.5rem;
}
}
.snk-blog-teaser-alerts .snk-blog-teaser-description {
height: auto;
}
@media (min-width: 768px) {
.snk-blog-teaser-alerts .snk-blog-teaser-content {
position: relative;
padding-right: 3rem;
padding-bottom: 1rem;
}
.snk-blog-teaser-alerts .snk-blog-teaser-content > *:nth-last-child(2) {
margin-bottom: 0;
}
.snk-blog-teaser-alerts .snk-blog-teaser-content .snk-btn-circle {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.snk-blog-teaser-alerts .snk-blog-teaser-description {
--snk-mb-p: 0;
}
}
.snk-blog-teaser a {
overflow: hidden;
text-decoration: none;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.snk-blog-teaser a .snk-btn-arrows::after {
transition: 0.3s ease;
}
.snk-blog-teaser a:hover .snk-blog-teaser-img-wrapper img {
transform: scale(1.05);
}
.snk-blog-teaser a:hover .snk-btn-circle .snk-btn-arrows {
animation: arrowsAroundTheWorld 0.5s forwards;
}
.snk-blog-teaser-img-wrapper {
overflow: hidden;
aspect-ratio: 16/9;
margin-bottom: 1.5rem;
}
.snk-blog-teaser-img-wrapper img {
aspect-ratio: 16/9;
transition: transform 0.4s ease;
width: 100%;
}
@media (max-width: 767.98px) {
.snk-blog-teaser {
width: 100%;
}
.snk-blog-teaser_custom .snk-teaser-img-wrapper,
.snk-blog-teaser_custom .snk-teaser-img {
display: none;
}
.snk-blog-teaser_custom .snk-teaser {
margin-top: 1.375rem;
}
.snk-blog-teaser_custom .snk-teaser + .snk-teaser {
margin-top: 2.125rem;
}
}
.snk-blog-teaser-date {
color: #004959;
font-size: 0.875rem;
line-height: 1.5;
}
.snk-blog-teaser-content {
border-bottom: 1px solid #d9e4e6;
padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
.snk-blog-teaser-content {
padding-bottom: 2rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
}
.snk-blog-teaser-description {
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
--snk-mb-p: 1rem;
}
@media (min-width: 768px) {
.snk-blog-teaser-description {
--snk-mb-p: 2rem;
height: 2.8125rem;
}
}
.snk-blog-teaser .snk-btn-circle {
background-color: #c00;
border-radius: 3rem;
width: 2rem;
height: 2rem;
overflow: hidden;
display: flex;
align-items: center;
flex-shrink: 0;
}
@media (min-width: 768px) {
.snk-blog-teaser .snk-btn-circle {
width: 2rem;
height: 2rem;
}
}
.snk-blog-teaser .snk-btn-circle .snk-btn-arrows {
position: relative;
display: block;
width: 2rem;
height: 2rem;
transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
@media (min-width: 768px) {
.snk-blog-teaser .snk-btn-circle .snk-btn-arrows {
width: 2rem;
height: 2rem;
}
}
.snk-blog-teaser .snk-btn-circle .snk-btn-arrows::before, .snk-blog-teaser .snk-btn-circle .snk-btn-arrows::after {
content: "";
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"%3e%3cg%3e%3cpath d="M22.4037 17H6.23438V15H22.4037L14.8087 7.405L16.2344 6L26.2344 16L16.2344 26L14.8087 24.595L22.4037 17Z" fill="%23fff"/%3e%3c/g%3e%3c/svg%3e');
background-repeat: no-repeat;
width: 1.5rem;
height: 1.5rem;
position: absolute;
background-position: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-size: contain;
}
@media (min-width: 768px) {
.snk-blog-teaser .snk-btn-circle .snk-btn-arrows::before, .snk-blog-teaser .snk-btn-circle .snk-btn-arrows::after {
width: 1.5rem;
height: 1.5rem;
}
}
.snk-blog-teaser .snk-btn-circle .snk-btn-arrows::before {
left: -50%;
display: inline-block;
}
.snk-blog-teaser .snk-btn-circle .snk-btn-arrows::after {
display: inline-block;
}
.snk-blog-teaser .snk-btn-circle {
margin-top: auto;
}
@media (min-width: 768px) {
.snk-blog-teaser.snk-blog-teaser-press .snk-blog-teaser-content {
padding-bottom: 3.5rem;
height: 100%;
}
.snk-blog-teaser.snk-blog-teaser-press .snk-btn-circle {
bottom: 1.5rem;
position: absolute;
}
}
.snk-blog-teasers-wrapper {
padding: 0;
}
.snk-blog-teasers-container {
display: flex;
flex-wrap: wrap;
row-gap: 2rem;
padding-bottom: 2rem;
}
@media (min-width: 1024px) {
.snk-blog-teasers-container {
padding-bottom: 5rem;
}
.snk-blog-teasers-container .snk-blog-teasers-press {
padding-top: 2rem;
}
}
.snk-blog-teasers-alerts .snk-blog-teasers-container {
row-gap: 0;
}
@media (min-width: 768px) {
.snk-blog-teasers-alerts .snk-blog-teasers-container {
row-gap: 1rem;
}
}
@media (min-width: 1024px) {
.snk-blog-teasers-heading h2 {
margin-bottom: 0;
}
}
.snk-blog-teasers-heading + .snk-blog-teasers-wrapper {
margin-top: 2rem;
}
@media (min-width: 1024px) {
.snk-blog-teasers-heading + .snk-blog-teasers-wrapper {
margin-top: 4rem;
}
}
.snk-article-title {
padding-top: 2rem;
padding-bottom: 3rem;
margin: 0;
}
.snk-article-image {
padding-bottom: 3rem;
margin: 0;
}
.snk-article-image img {
width: 100%;
}
.snk-article-stage {
margin-bottom: 2rem;
}
.snk-article-header {
margin-bottom: 2.5rem;
}
.snk-article-content .snk-section {
--snk-section-y: 2.5rem;
}
.snk-article-content .container {
position: relative;
}
.snk-article-meta {
padding-bottom: 2.5rem;
}
.snk-article-excerpt, .snk-article-excerpt p {
font-size: 1rem;
}
.snk-article-footer .snk-section-contact-banner {
--snk-section-y: 5rem;
}
@media (max-width: 1023.98px) {
.snk-article-title {
padding-top: 2rem;
padding-bottom: 2rem;
}
.snk-article-image {
padding-bottom: 1.5rem;
}
.snk-article-stage {
margin-bottom: 2rem;
}
.snk-article-header {
margin-bottom: 2rem;
}
.snk-article-content .snk-section {
--snk-section-y: 1.5rem;
}
.snk-article-meta {
padding-bottom: 2rem;
}
.snk-article-excerpt, .snk-article-excerpt p {
font-size: 1rem;
}
.snk-article-footer .snk-section-contact-banner {
--snk-section-y: 2rem;
}
}
.snk-tooltip {
visibility: hidden;
color: var(--snk-tooltip-color);
font-size: 0.75rem;
line-height: 1;
padding: 0.25rem 0.5rem;
border-radius: 4px;
background: var(--snk-tooltip-bg-color);
position: absolute;
z-index: 1;
top: 1.8rem;
left: 4.75rem;
transform: translate(-50%, -100%);
opacity: 0;
transition: opacity 0.3s ease-out;
}
.snk-shareButtons-item {
width: 2.375rem;
height: 2.375rem;
border-radius: 2rem;
background-color: #004959;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.4rem;
transition: 0.3s ease;
}
.snk-shareButtons-item svg {
color: #fff;
}
@media (max-width: 1199.98px) {
.snk-shareButtons {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.snk-shareButtons-item {
width: 2rem;
height: 2rem;
margin-bottom: 0;
}
}
@media (min-width: 1200px) {
.snk-post-share {
top: 0;
position: absolute;
bottom: 0;
left: max(-16.4vw, -257px);
}
.snk-post-share .snk-shareButtons {
position: sticky;
top: 8rem;
margin-top: 1.5rem;
margin-bottom: 2.5rem;
}
.snk-post-share .snk-shareButtons-item:hover {
background-color: #001a26;
}
.snk-post-share .snk-shareButtons-copy {
position: relative;
}
.snk-post-share .snk-shareButtons .snk-tooltip {
transition: opacity 0.3s, visibility 0.1s 0.3s;
visibility: hidden;
}
.snk-post-share .snk-shareButtons .snk-tooltip_displayed {
visibility: visible;
transition: opacity 0.3s, visibility 0s;
opacity: 1;
}
}
.single-post .snk-related-posts-wrapper {
display: flex;
flex-direction: column;
}
.single-post .snk-related-posts-wrapper .snk-blog-teasers-container {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.single-post .snk-related-posts-headline {
margin-bottom: 0;
padding-top: 5rem;
padding-bottom: 5rem;
}
@media (max-width: 1023.98px) {
.single-post .snk-related-posts-headline {
padding-bottom: 2.5rem;
}
}
.single-post .snk-related-posts-link {
font-size: var(--snk-fs-body-s);
align-self: end;
position: relative;
bottom: -1.5rem;
margin-bottom: -1.5rem;
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
body ol,
body ul {
margin-top: 0;
}
body ol:not([class]),
body ul:not([class]) {
padding-left: 1rem;
}
body ul:not([class]) {
list-style: none;
}
body ul:not([class]) li {
position: relative;
margin-bottom: var(--snk-list-mb, 0.5rem);
}
body ul:not([class]) li::before {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23454545"/%3e%3c/svg%3e');
background-repeat: no-repeat;
background-size: 100%;
width: var(--snk-list-bullet-width, 2rem);
height: var(--snk-list-bullet-height, 2rem);
position: absolute;
top: var(--snk-list-bullet-top, -0.125rem);
left: -1rem;
}
.snk-complexTable tr td p, .snk-complexTable tr th {
font-size: var(--snk-fs-body-s);
line-height: var(--snk-lh-body-s);
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
.snk-featured-post {
align-items: center;
}
.snk-featured-post__content {
max-width: 34.5rem;
width: 100%;
}
@media (min-width: 768px) {
.snk-featured-post__content {
justify-self: flex-end;
}
}
.snk-featured-post__image img {
aspect-ratio: 1/1;
object-fit: cover;
width: 100%;
height: 350px;
object-position: center;
}
@media (max-width: 767.98px) {
.snk-featured-post__image img {
height: auto;
}
}
@media (max-width: 767.98px) {
.snk-featured-post__image + .col-12 {
margin-top: 1.5rem;
}
}
@media (max-width: 767.98px) {
.snk-featured-post__title, .snk-featured-post__excerpt {
margin-bottom: 1.5rem;
}
}
.snk-blog-teaser {
display: flex;
flex-wrap: wrap;
transform: none;
text-decoration: none;
position: relative;
padding: 0 calc(var(--snk-gutter-x) / 2);
}
@media (max-width: 767.98px) {
.snk-blog-teaser-alerts.snk-blog-teaser {
margin-top: 1.5rem;
}
}
.snk-blog-teaser-alerts .snk-blog-teaser-description {
height: auto;
}
@media (min-width: 768px) {
.snk-blog-teaser-alerts .snk-blog-teaser-content {
position: relative;
padding-right: 3rem;
padding-bottom: 1rem;
}
.snk-blog-teaser-alerts .snk-blog-teaser-content > *:nth-last-child(2) {
margin-bottom: 0;
}
.snk-blog-teaser-alerts .snk-blog-teaser-content .snk-btn-circle {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.snk-blog-teaser-alerts .snk-blog-teaser-description {
--snk-mb-p: 0;
}
}
.snk-blog-teaser a {
overflow: hidden;
text-decoration: none;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.snk-blog-teaser a .snk-btn-arrows::after {
transition: 0.3s ease;
}
.snk-blog-teaser a:hover .snk-blog-teaser-img-wrapper img {
transform: scale(1.05);
}
.snk-blog-teaser a:hover .snk-btn-circle .snk-btn-arrows {
animation: arrowsAroundTheWorld 0.5s forwards;
}
.snk-blog-teaser-img-wrapper {
overflow: hidden;
aspect-ratio: 16/9;
margin-bottom: 1.5rem;
}
.snk-blog-teaser-img-wrapper img {
aspect-ratio: 16/9;
transition: transform 0.4s ease;
width: 100%;
}
@media (max-width: 767.98px) {
.snk-blog-teaser {
width: 100%;
}
.snk-blog-teaser_custom .snk-teaser-img-wrapper,
.snk-blog-teaser_custom .snk-teaser-img {
display: none;
}
.snk-blog-teaser_custom .snk-teaser {
margin-top: 1.375rem;
}
.snk-blog-teaser_custom .snk-teaser + .snk-teaser {
margin-top: 2.125rem;
}
}
.snk-blog-teaser-date {
color: #004959;
font-size: 0.875rem;
line-height: 1.5;
}
.snk-blog-teaser-content {
border-bottom: 1px solid #d9e4e6;
padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
.snk-blog-teaser-content {
padding-bottom: 2rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
}
.snk-blog-teaser-description {
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
--snk-mb-p: 1rem;
}
@media (min-width: 768px) {
.snk-blog-teaser-description {
--snk-mb-p: 2rem;
height: 2.8125rem;
}
}
.snk-blog-teaser .snk-btn-circle {
background-color: #c00;
border-radius: 3rem;
width: 2rem;
height: 2rem;
overflow: hidden;
display: flex;
align-items: center;
flex-shrink: 0;
}
@media (min-width: 768px) {
.snk-blog-teaser .snk-btn-circle {
width: 2rem;
height: 2rem;
}
}
.snk-blog-teaser .snk-btn-circle .snk-btn-arrows {
position: relative;
display: block;
width: 2rem;
height: 2rem;
transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
@media (min-width: 768px) {
.snk-blog-teaser .snk-btn-circle .snk-btn-arrows {
width: 2rem;
height: 2rem;
}
}
.snk-blog-teaser .snk-btn-circle .snk-btn-arrows::before, .snk-blog-teaser .snk-btn-circle .snk-btn-arrows::after {
content: "";
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"%3e%3cg%3e%3cpath d="M22.4037 17H6.23438V15H22.4037L14.8087 7.405L16.2344 6L26.2344 16L16.2344 26L14.8087 24.595L22.4037 17Z" fill="%23fff"/%3e%3c/g%3e%3c/svg%3e');
background-repeat: no-repeat;
width: 1.5rem;
height: 1.5rem;
position: absolute;
background-position: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-size: contain;
}
@media (min-width: 768px) {
.snk-blog-teaser .snk-btn-circle .snk-btn-arrows::before, .snk-blog-teaser .snk-btn-circle .snk-btn-arrows::after {
width: 1.5rem;
height: 1.5rem;
}
}
.snk-blog-teaser .snk-btn-circle .snk-btn-arrows::before {
left: -50%;
display: inline-block;
}
.snk-blog-teaser .snk-btn-circle .snk-btn-arrows::after {
display: inline-block;
}
.snk-blog-teaser .snk-btn-circle {
margin-top: auto;
}
@media (min-width: 768px) {
.snk-blog-teaser.snk-blog-teaser-press .snk-blog-teaser-content {
padding-bottom: 3.5rem;
height: 100%;
}
.snk-blog-teaser.snk-blog-teaser-press .snk-btn-circle {
bottom: 1.5rem;
position: absolute;
}
}
.snk-blog-teasers-wrapper {
padding: 0;
}
.snk-blog-teasers-container {
display: flex;
flex-wrap: wrap;
row-gap: 2rem;
padding-bottom: 2rem;
}
@media (min-width: 1024px) {
.snk-blog-teasers-container {
padding-bottom: 5rem;
}
.snk-blog-teasers-container .snk-blog-teasers-press {
padding-top: 2rem;
}
}
.snk-blog-teasers-alerts .snk-blog-teasers-container {
row-gap: 0;
}
@media (min-width: 768px) {
.snk-blog-teasers-alerts .snk-blog-teasers-container {
row-gap: 1rem;
}
}
@media (min-width: 1024px) {
.snk-blog-teasers-heading h2 {
margin-bottom: 0;
}
}
.snk-blog-teasers-heading + .snk-blog-teasers-wrapper {
margin-top: 2rem;
}
@media (min-width: 1024px) {
.snk-blog-teasers-heading + .snk-blog-teasers-wrapper {
margin-top: 4rem;
}
}
.archive .snk-stage-archive .breadcrumbs {
margin: 0.5rem 0 0;
}
.archive .snk-stage-archive h1 {
margin: 2rem 0;
}
.archive .snk-tabs-wrapper {
margin: 2.5rem 0 6.5rem 0;
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
body ol,
body ul {
margin-top: 0;
}
body ol:not([class]),
body ul:not([class]) {
padding-left: 1rem;
}
body ul:not([class]) {
list-style: none;
}
body ul:not([class]) li {
position: relative;
margin-bottom: var(--snk-list-mb, 0.5rem);
}
body ul:not([class]) li::before {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23454545"/%3e%3c/svg%3e');
background-repeat: no-repeat;
background-size: 100%;
width: var(--snk-list-bullet-width, 2rem);
height: var(--snk-list-bullet-height, 2rem);
position: absolute;
top: var(--snk-list-bullet-top, -0.125rem);
left: -1rem;
}
.snk-complexTable tr td p, .snk-complexTable tr th {
font-size: var(--snk-fs-body-s);
line-height: var(--snk-lh-body-s);
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
.snk-accordion-title {
color: #000;
font-size: 1.125rem;
}
.snk-accordion-wrapper .snk-accordion .snk-accordion-title {
color: #000;
font-size: 1.125rem;
}
.snk-accordion-heading {
margin-bottom: 2rem;
}
.snk-accordion-item {
position: relative;
border-bottom: 1px solid var(--snk-accordion-border-color, #d9e4e6);
transition: background-color 0.4s ease-out;
background-color: transparent;
}
.snk-accordion-item:first-child {
border-top: 1px solid var(--snk-accordion-border-color, #d9e4e6);
}
.snk-accordion-item:hover .snk-accordion-icon {
background-color: #004959;
}
.snk-accordion-item:hover .snk-accordion-icon::before, .snk-accordion-item:hover .snk-accordion-icon::after {
background-color: #fff;
}
.snk-accordion-item:hover .snk-accordion-header {
background-color: var(--snk-btn-secondary-hover-color);
}
.snk-accordion-item.active .snk-accordion-body {
display: block;
}
.snk-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0.25rem;
cursor: pointer;
z-index: 1;
position: relative;
transition: background-color 0.3s ease-out;
}
.snk-accordion-title {
margin-bottom: 0;
max-width: 840px;
}
.single-post .snk-accordion-title {
max-width: 650px;
}
@media (max-width: 767.98px) {
.snk-accordion-title {
max-width: 84%;
}
}
.snk-accordion-content:not(.snk-accordion-image_right):not(.snk-accordion-image_left) {
max-width: 840px;
}
@media (min-width: 768px) {
.snk-accordion-content {
padding: 0 0.25rem 1rem;
}
}
@media (min-width: 768px) {
.snk-accordion-content.snk-accordion-image_left, .snk-accordion-content.snk-accordion-image_right {
display: grid;
gap: 2rem;
grid-auto-columns: 1fr;
grid-auto-flow: column;
}
}
@media (min-width: 1024px) {
.snk-accordion-content.snk-accordion-image_left, .snk-accordion-content.snk-accordion-image_right {
gap: 6.875rem;
}
}
@media (max-width: 767.98px) {
.snk-accordion-content {
margin-bottom: 1.5rem;
}
}
.snk-accordion-content p,
.snk-accordion-content ul,
.snk-accordion-content ol {
margin-bottom: 1rem;
}
.snk-accordion-content .snk-accordion-description > *:last-child {
margin-bottom: 0;
}
.snk-accordion-image_right .snk-accordion-image {
order: 2;
}
.snk-accordion-body {
display: none;
position: relative;
z-index: 1;
}
.snk-accordion-body img {
width: 100%;
}
@media (max-width: 767.98px) {
.snk-accordion-body img {
margin-bottom: 1.5rem;
}
}
.snk-accordion-icon {
width: 2.125rem;
height: 2.125rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: background-color 0.3s ease;
background-color: #d9e4e6;
position: relative;
flex-shrink: 0;
margin-left: 1.5rem;
}
.snk-accordion-icon::before {
content: "";
width: 0.65625rem;
height: 0.075rem;
transition: background-color 0.3s ease;
background-color: #004959;
}
.snk-accordion-icon::after {
content: "";
height: 0.65625rem;
width: 0.094rem;
background-color: #004959;
position: absolute;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.snk-accordion-item.active .snk-accordion-icon:after {
transform: rotate3d(0, 0, 1, 90deg);
}
body ol,
body ul {
margin-top: 0;
}
body ol:not([class]),
body ul:not([class]) {
padding-left: 1rem;
}
body ul:not([class]) {
list-style: none;
}
body ul:not([class]) li {
position: relative;
margin-bottom: var(--snk-list-mb, 0.5rem);
}
body ul:not([class]) li::before {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23454545"/%3e%3c/svg%3e');
background-repeat: no-repeat;
background-size: 100%;
width: var(--snk-list-bullet-width, 2rem);
height: var(--snk-list-bullet-height, 2rem);
position: absolute;
top: var(--snk-list-bullet-top, -0.125rem);
left: -1rem;
}
.snk-complexTable tr td p, .snk-complexTable tr th {
font-size: var(--snk-fs-body-s);
line-height: var(--snk-lh-body-s);
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
.snk-basicTable li::before {
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23454545"/%3e%3c/svg%3e') !important;
background-size: 50% !important;
top: 0.625rem !important;
}
.snk-basicTable-heading {
margin-bottom: 2rem;
}
.snk-basicTable-heading > *:last-child {
margin-bottom: 0;
}
.snk-basicTable-heading-top .col-md-7 + .col-12 {
margin-top: 0;
}
.snk-basicTable-heading.snk-bg_2 {
padding: 3rem 1.5rem;
}
.snk-basicTable-heading-left .row {
align-items: stretch;
}
.snk-basicTable-heading-left .col-md-3 {
display: flex;
}
.snk-basicTable-heading-left .snk-basicTable-heading {
height: 100%;
width: 100%;
}
.snk-basicTable-row {
border-top: 1px solid #d9e4e6;
padding: 1rem 1.25rem;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 768px) {
.snk-basicTable-row {
flex-direction: row;
gap: 2rem;
padding: 1rem 0;
}
}
.snk-basicTable-headline {
display: flex;
align-items: flex-start;
gap: 1rem;
--snk-mb-h4: 0;
}
.snk-basicTable-headline img {
height: 24px;
}
.snk-basicTable-content > :last-child {
margin-bottom: 0;
}
.snk-basicTable-content p {
--snk-mb-p: 1.5rem;
}
.snk-basicTable-content ul {
margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
.snk-basicTable-content ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 2rem;
}
}
.snk-basicTable-content .snk-btn-expand {
height: 2rem;
}
.snk-basicTable-content .snk-btn-secondary {
padding: 0.375rem 2rem;
}
.snk-basicTable-content .snk-btn-expand + .snk-btn-secondary {
margin-left: 1.5rem;
}
.snk-basicTable-expandable-text {
display: none;
}
.snk-basicTable-btn-retract {
display: none;
}
body ol,
body ul {
margin-top: 0;
}
body ol:not([class]),
body ul:not([class]) {
padding-left: 1rem;
}
body ul:not([class]) {
list-style: none;
}
body ul:not([class]) li {
position: relative;
margin-bottom: var(--snk-list-mb, 0.5rem);
}
body ul:not([class]) li::before {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23454545"/%3e%3c/svg%3e');
background-repeat: no-repeat;
background-size: 100%;
width: var(--snk-list-bullet-width, 2rem);
height: var(--snk-list-bullet-height, 2rem);
position: absolute;
top: var(--snk-list-bullet-top, -0.125rem);
left: -1rem;
}
.snk-complexTable tr td p, .snk-complexTable tr th {
font-size: var(--snk-fs-body-s);
line-height: var(--snk-lh-body-s);
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
.snk-complexTable {
border-collapse: collapse;
border-radius: 0.5rem 0.5rem 0 0;
}
.snk-complexTable-wrapper {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
overflow-x: auto;
}
@media (max-width: 767.98px) {
.snk-complexTable-wrapper {
padding-bottom: 0.3125rem;
margin-right: calc(var(--snk-container-x-padding) * -1);
}
}
.snk-complexTable-heading {
--snk-mb-h2: 2rem;
--snk-mb-sh: 2rem;
}
.snk-complexTable-heading div :last-child {
margin-bottom: 2.25rem;
}
@media (min-width: 768px) {
.snk-complexTable-heading div :last-child {
margin-bottom: 2.5rem;
}
}
.snk-complexTable tbody {
border-top: 1px solid #d9e4e6;
}
.snk-complexTable tr td,
.snk-complexTable tr th {
border-bottom: 1px solid #d9e4e6;
color: #222;
padding: 1rem 0.75rem;
text-align: left;
vertical-align: middle;
}
.snk-complexTable tr td p,
.snk-complexTable tr th p {
--snk-text-color: $text-secondary-color;
}
.snk-complexTable tr th {
font-weight: 700;
}
.snk-complexTable tr td p:last-child {
margin-bottom: 0;
}
.snk-complexTable tr td img {
width: 24px;
min-width: 24px;
max-width: 24px;
height: 24px;
min-height: 24px;
max-height: 24px;
display: inline;
}
.snk-complexTable thead {
border-radius: 0.5rem 0.5rem 0 0;
}
.snk-complexTable thead tr {
border-radius: 0.5rem 0.5rem 0 0;
}
.snk-complexTable thead tr th {
background: #d9e4e6;
letter-spacing: 0.01em;
}
.snk-complexTable thead tr th:first-child {
border-radius: 0.5rem 0 0 0;
}
.snk-complexTable thead tr th:last-child {
border-radius: 0 0.5rem 0 0;
}
.snk-complexTable thead tr th:only-child {
border-radius: 0.5rem 0.5rem 0 0;
}
.snk-complexTable tbody tr:nth-child(even) td {
background-color: #f0f4f5;
}
.snk-complexTable tbody td {
background: #fff;
}
.snk-complexTable tbody td strong {
letter-spacing: 0.01em;
}
.snk-complexTable tbody td:not(:last-child) {
border-right: 1px solid #a6bfc5;
}
.snk-complexTable_highlightCol tr th:first-child,
.snk-complexTable_highlightCol tr td:first-child {
position: sticky;
left: 0;
top: 1px;
font-weight: 700;
z-index: 1;
border-right: 0 none;
}
.snk-complexTable_highlightCol tr td:first-child::after {
content: "";
height: calc(100% + 2px);
width: 1px;
position: absolute;
background: #a6bfc5;
right: 0;
top: -1px;
}
.snk-complexTable-heading_center,
.snk-complexTable .snk-cell-align_center {
text-align: center;
justify-content: center;
}
.snk-complexTable-heading_right,
.snk-complexTable .snk-cell-align_right {
text-align: right;
justify-content: right;
}
.snk-complexTable-image {
padding-left: 2rem;
}
@media (max-width: 767.98px) {
.snk-complexTable-image {
padding-right: 1.25rem;
}
}
.snk-complexTable-image img {
width: 100%;
}
.snk-complexTable.border-top {
border-top: 1px solid #d9e4e6;
}
body ol,
body ul {
margin-top: 0;
}
body ol:not([class]),
body ul:not([class]) {
padding-left: 1rem;
}
body ul:not([class]) {
list-style: none;
}
body ul:not([class]) li {
position: relative;
margin-bottom: var(--snk-list-mb, 0.5rem);
}
body ul:not([class]) li::before {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23454545"/%3e%3c/svg%3e');
background-repeat: no-repeat;
background-size: 100%;
width: var(--snk-list-bullet-width, 2rem);
height: var(--snk-list-bullet-height, 2rem);
position: absolute;
top: var(--snk-list-bullet-top, -0.125rem);
left: -1rem;
}
.snk-complexTable tr th, .snk-complexTable tr td p {
font-size: var(--snk-fs-body-s);
line-height: var(--snk-lh-body-s);
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
.snk-info-banner {
padding: 1.5rem;
margin: 0 auto;
}
.snk-info-banner.snk-bg_1 {
border-left: 6px solid #004959;
background-color: #f0f4f5;
}
.snk-info-banner.snk-bg_3 {
border-left: 6px solid #ca8a04;
background-color: #fbf6eb;
}
.snk-info-banner-wrapper {
flex-direction: column;
gap: 1.5rem;
display: flex;
}
.snk-info-banner-text {
display: flex;
flex-direction: column;
align-items: self-start;
max-width: 914px;
}
.snk-info-banner-text a {
font-weight: 700;
font-size: 0.875rem;
text-underline-offset: 0.3125rem;
}
.snk-info-banner-text p,
.snk-info-banner-text ul:not([class]),
.snk-info-banner-text ol:not([class]) {
font-size: var(--snk-fs-body-s);
}
.snk-info-banner-text > *:last-child,
.snk-info-banner-text ul:last-child {
margin-bottom: 0;
}
.snk-info-banner-headline {
font-size: var(--snk-fs-body-s);
line-height: var(--snk-lh-body-s);
}
.snk-info-banner .snk-info-banner-image {
min-width: 73px;
}
@media (max-width: 1023.98px) {
.snk-info-banner-text, .snk-info-banner-image {
width: 100%;
}
}
@media (min-width: 1024px) {
.snk-info-banner {
padding: 2.5rem 5rem;
}
.snk-info-banner-wrapper {
gap: 5rem;
flex-direction: row;
}
.snk-info-banner .snk-info-banner-image {
justify-content: flex-start;
}
.snk-info-banner .snk-info-banner-image img {
aspect-ratio: 1/1;
min-width: 334px;
}
}
body ol,
body ul {
margin-top: 0;
}
body ol:not([class]),
body ul:not([class]) {
padding-left: 1rem;
}
body ul:not([class]) {
list-style: none;
}
body ul:not([class]) li {
position: relative;
margin-bottom: var(--snk-list-mb, 0.5rem);
}
body ul:not([class]) li::before {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23454545"/%3e%3c/svg%3e');
background-repeat: no-repeat;
background-size: 100%;
width: var(--snk-list-bullet-width, 2rem);
height: var(--snk-list-bullet-height, 2rem);
position: absolute;
top: var(--snk-list-bullet-top, -0.125rem);
left: -1rem;
}
.snk-complexTable tr th, .snk-complexTable tr td p {
font-size: var(--snk-fs-body-s);
line-height: var(--snk-lh-body-s);
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
@media (max-width: 767.98px) {
.snk-next-best-action.snk-section {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
}
@media (min-width: 768px) {
.snk-next-best-action.snk-section {
padding-top: 2rem;
}
}
.snk-next-best-action-text {
margin-top: -0.5rem;
padding-bottom: 2.5rem;
text-align: center;
}
@media (min-width: 768px) {
.snk-next-best-action-text {
margin-top: 0;
padding-top: 2rem;
padding-bottom: 2rem;
}
}
.snk-next-best-action-text > *:last-child {
margin-bottom: 0;
}
.snk-next-best-action-links {
display: grid;
gap: 1rem;
}
@media (min-width: 576px) {
.snk-next-best-action-links {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
.snk-next-best-action .snk-btn-secondary {
padding: 1.1875rem 1rem;
gap: 0.75rem;
font-size: 0.9375rem;
}
.snk-next-best-action .snk-btn-secondary:hover {
background-color: var(--snk-btn-secondary-hover-color);
}
.snk-next-best-action .snk-btn-secondary:hover::before {
right: 100%;
}
@media (min-width: 768px) {
.snk-next-best-action .snk-btn-secondary {
padding: 1.25rem 2.5rem;
gap: 1.25rem;
font-size: 1rem;
line-height: 1.875;
}
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
body ol,
body ul {
margin-top: 0;
}
body ol:not([class]),
body ul:not([class]) {
padding-left: 1rem;
}
body ul:not([class]) {
list-style: none;
}
body ul:not([class]) li {
position: relative;
margin-bottom: var(--snk-list-mb, 0.5rem);
}
body ul:not([class]) li::before {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23454545"/%3e%3c/svg%3e');
background-repeat: no-repeat;
background-size: 100%;
width: var(--snk-list-bullet-width, 2rem);
height: var(--snk-list-bullet-height, 2rem);
position: absolute;
top: var(--snk-list-bullet-top, -0.125rem);
left: -1rem;
}
.snk-complexTable tr th, .snk-complexTable tr td p {
font-size: var(--snk-fs-body-s);
line-height: var(--snk-lh-body-s);
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
body ol,
body ul {
margin-top: 0;
}
body ol:not([class]),
body ul:not([class]) {
padding-left: 1rem;
}
body ul:not([class]) {
list-style: none;
}
body ul:not([class]) li {
position: relative;
margin-bottom: var(--snk-list-mb, 0.5rem);
}
body ul:not([class]) li::before {
content: "";
display: inline-block;
background-image: url('data:image/svg+xml,%3csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="4" cy="4" r="4" fill="%23454545"/%3e%3c/svg%3e');
background-repeat: no-repeat;
background-size: 100%;
width: var(--snk-list-bullet-width, 2rem);
height: var(--snk-list-bullet-height, 2rem);
position: absolute;
top: var(--snk-list-bullet-top, -0.125rem);
left: -1rem;
}
.snk-complexTable tr th, .snk-complexTable tr td p {
font-size: var(--snk-fs-body-s);
line-height: var(--snk-lh-body-s);
}
/*
- Add icon variables here, f.e.
$icon-check: '';
- This variables can be used like this:
.className {
background-image: background-icon($icon-check, $primary-color-1);
}
*/
.snk-card {
display: flex;
flex-wrap: wrap;
transform: none;
text-decoration: none;
position: relative;
padding: 0 calc(var(--snk-gutter-x) / 2);
margin-top: var(--snk-gutter-y);
}
.snk-card a {
overflow: hidden;
text-decoration: none;
width: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.snk-card a:hover .snk-card-img-wrapper img {
transform: scale(1.05);
}
.snk-card a:hover .snk-btn-circle .snk-btn-arrows {
animation: arrowsAroundTheWorld 0.5s forwards;
}
.snk-card-img-wrapper {
overflow: hidden;
aspect-ratio: 16/9;
margin-bottom: 1.5rem;
}
.snk-card-img-wrapper img {
transition: transform 0.4s ease;
width: 100%;
object-fit: cover;
object-position: center;
height: 100%;
}
@media (max-width: 767.98px) {
.snk-card_custom .snk-card-img-wrapper,
.snk-card_custom .snk-card-img {
display: none;
}
.snk-card_custom .snk-card {
margin-top: 1.375rem;
}
.snk-card_custom .snk-card + .snk-card {
margin-top: 2.125rem;
}
}
@media (max-width: 1023.98px) {
.snk-cards_dynamic .snk-card {
margin-top: 1.5rem;
}
}
.snk-card-type {
font-family: "CHSansBold";
color: #004959;
font-size: 0.875rem;
font-weight: 700;
}
.snk-card-date {
color: #004959;
font-size: 0.875rem;
line-height: 1;
}
.snk-card-content {
border-bottom: 1px solid #c6c6c6;
padding-bottom: 1.5rem;
flex-grow: 1;
position: relative;
}
.snk-card-description {
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
height: 2.8125rem;
margin-bottom: 3.5rem;
}
.snk-card .snk-btn-circle {
background-color: #c00;
border-radius: 3rem;
width: 2rem;
height: 2rem;
overflow: hidden;
display: flex;
align-items: center;
flex-shrink: 0;
}
@media (min-width: 768px) {
.snk-card .snk-btn-circle {
width: 2rem;
height: 2rem;
}
}
.snk-card .snk-btn-circle .snk-btn-arrows {
position: relative;
display: block;
width: 2rem;
height: 2rem;
transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
@media (min-width: 768px) {
.snk-card .snk-btn-circle .snk-btn-arrows {
width: 2rem;
height: 2rem;
}
}
.snk-card .snk-btn-circle .snk-btn-arrows::before, .snk-card .snk-btn-circle .snk-btn-arrows::after {
content: "";
background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"%3e%3cg%3e%3cpath d="M22.4037 17H6.23438V15H22.4037L14.8087 7.405L16.2344 6L26.2344 16L16.2344 26L14.8087 24.595L22.4037 17Z" fill="%23fff"/%3e%3c/g%3e%3c/svg%3e');
background-repeat: no-repeat;
width: 1.5rem;
height: 1.5rem;
position: absolute;
background-position: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-size: contain;
}
@media (min-width: 768px) {
.snk-card .snk-btn-circle .snk-btn-arrows::before, .snk-card .snk-btn-circle .snk-btn-arrows::after {
width: 1.5rem;
height: 1.5rem;
}
}
.snk-card .snk-btn-circle .snk-btn-arrows::before {
left: -50%;
display: inline-block;
}
.snk-card .snk-btn-circle .snk-btn-arrows::after {
display: inline-block;
}
.snk-card .snk-btn-circle {
display: block;
margin-top: 1.5rem;
position: absolute;
bottom: 1.5rem;
}
@media (min-width: 768px) {
.snk-card .snk-btn-circle {
margin-top: 1.5rem;
}
.snk-card-description {
height: 2.8125rem;
}
}
@media (min-width: 1024px) {
.snk-card-description {
height: 3.375rem;
}
}
@media (min-width: 1024px) {
.snk-cards-container .row.snk-cards_dynamic {
flex-wrap: nowrap;
}
.snk-cards-container .row > .snk-card:first-child {
margin-left: 25%;
}
}
.snk-cards-heading p {
margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
.snk-cards-heading p {
margin-bottom: 2rem;
}
}
.snk-cards-heading .snk-slider-btn {
border: none;
padding: 0;
background: none;
}
.snk-cards-heading .snk-slider-btn svg {
width: 2.5rem;
height: 2.5rem;
}
.snk-cards-heading .snk-slider-btn-wrapper {
display: flex;
gap: 1rem;
}
.snk-cards-heading .snk-slider-btn.is-inactive {
opacity: 0.5;
pointer-events: none;
cursor: default;
}
@media (max-width: 767.98px) {
.snk-cards-heading + .snk-card_custom {
margin-top: 1rem;
}
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.snk-cards-heading + .snk-card_custom,
.snk-cards-heading + .snk-card_custom + .snk-card_custom {
margin-top: 1rem;
}
}
.snk-cards-heading .snk-slider-count_1 {
display: none;
}
@media (min-width: 684px) {
.snk-cards-heading .snk-slider-count_2 {
display: none;
}
}
.snk-cards-slider-container {
margin-top: 0;
padding-left: 0;
padding-right: 0;
}
.snk-search {
margin-top: -1rem;
max-width: 35.25rem;
width: 100%;
}
.snk-search-buttonGroup {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
@media (min-width: 1024px) {
.snk-search-buttonGroup {
gap: 1.5rem;
}
}
.snk-search .search-wrapper {
position: relative;
margin-bottom: 0.25rem;
}
.snk-search #search-input {
background-color: #fff;
width: 100%;
padding: 0.75rem 1.1875rem; /* space for clear and button */
border: 1px solid #c6c6c6;
border-radius: 32px;
outline: none;
font-size: 0.875rem;
transition: border-color 0.3s;
}
.snk-search #search-input::placeholder {
color: #6b6b6f;
}
.snk-search #search-input:focus {
border-color: #a6bfc5;
}
.snk-search .clear {
margin: 0 0.5rem;
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%);
font-size: 1rem;
cursor: pointer;
display: none;
}
.snk-search .clear::after {
content: "";
width: 1px;
background: #d9e4e6;
height: 1.5rem;
position: absolute;
right: -8px;
top: 0;
}
.snk-search .clear:focus-visible {
box-shadow: 0 0 0 3px var(--snk-btn-secondary-focus-color);
outline: none;
border-radius: 0.375rem;
}
.snk-search .search-button {
position: absolute;
right: 1.1875rem;
top: 50%;
transform: translateY(-50%);
background: transparent;
border-radius: 0.375em;
color: #c00;
border: none;
padding: 0;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s;
}
.snk-search .search-button svg {
color: #c00;
}
.snk-search .search-button:focus-visible {
box-shadow: 0 0 0 3px var(--snk-btn-secondary-focus-color);
outline: none;
}
.snk-search-results {
position: absolute;
background: rgba(246, 245, 245, 0.8);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12);
backdrop-filter: blur(27px);
z-index: 100;
width: 35.25rem;
}
.snk-search-results li {
padding: 0.5rem 1.5rem;
}
.snk-search-results li::before {
content: none;
}
.snk-search-results li:first-child {
padding-top: 1.5rem;
}
.snk-search-results li:last-child {
padding-bottom: 1.5rem;
}
.snk-search-results a {
text-decoration-color: transparent;
text-underline-offset: 3px;
transition: 0.3s ease;
}
.snk-search-results a:hover {
text-decoration-color: #454545;
transition: 0.3s ease;
}
.snk-search-label, .snk-search-link {
font-family: "CHSansBold";
}
.snk-search-link {
color: #222;
display: flex;
gap: 0.5rem;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 5px;
transition: 0.3s ease;
}
.snk-search-link:hover {
text-decoration-color: #000;
}
.snk-search-link svg {
color: #c00;
}
.snk-stationInformation .snk-article-title {
padding-top: 0;
padding-bottom: 1rem;
}
.snk-stationInformation-meta {
padding-top: 2rem;
padding-bottom: 2rem;
}
.snk-stationInformation-meta .snk-services {
display: flex;
align-items: center;
}
.snk-stationInformation-meta .snk-services .snk-service {
display: flex;
align-items: center;
padding-right: 2rem;
gap: 0.375rem;
}
.snk-stationInformation-meta .snk-services-title {
color: #004959;
font-family: "CHSansBold";
font-weight: 700;
}
.snk-stationInformation .snk-tabs-wrapper {
margin-top: 0;
}
.snk-stationInformation .snk-tabs-content {
margin-bottom: 4rem;
}
.snk-stationInformation .snk-accordion-container {
padding: 2rem 0 0 0;
}
@media (max-width: 767.98px) {
.snk-stationInformation .snk-accordion-container {
padding: 1.25rem 0 2rem 0;
}
}
.snk-stationInformation .snk-accordion-container .snk-accordion-content {
max-width: 100%;
}
.snk-stationInformation .snk-accordion-container .snk-accordion-item + .snk-accordion-item.active {
border-bottom: 0;
}
.snk-stationInformation .snk-basicTable-row {
border-top: none;
}
.snk-stationInformation .snk-basicTable-content > *:last-child {
margin-bottom: 0;
}
.snk-stationInformation .snk-main-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.snk-stationInformation .snk-Address-row {
margin-bottom: 1rem;
}
.snk-stationInformation .snk-Address-headline {
margin-bottom: 0.25rem;
}
.snk-stationInformation .snk-Address-p {
margin-bottom: 0 !important;
}
.snk-stationInformation .snk-Address-p a {
color: #004959;
font-weight: 700;
}
.snk-stationInformation .snk-Address-p + .snk-Address-mail {
margin-top: 0.25rem;
}
.snk-stationInformation-TableWrapper {
margin-top: 4rem;
}
.snk-stationInformation-tableHeadline {
display: flex;
align-items: baseline;
gap: 2rem;
margin-top: 1.5rem;
}
.snk-stationInformation-tableHeadline .snk-pill {
margin-right: 0.5rem;
}
.snk-stationInformation-tableHeadline .snk-sh {
margin-bottom: 0;
}
.snk-stationInformation .snk-complexTable-wrapper {
margin-top: 2rem;
}
.snk-stationInformation .snk-complexTable-wrapper .snk-complexTable tbody td .snk-value {
margin-right: 2rem;
display: inline-block;
min-width: 4.875rem;
}
.snk-stationInformation .snk-complexTable-wrapper .snk-complexTable tbody td .snk-pill {
margin-right: 0.625rem;
}
.snk-stationInformation .snk-complexTable-wrapper .snk-complexTable tbody td .snk-pill.snk-pill-loose {
background-color: #66929B;
}
.snk-stationInformation .snk-complexTable-wrapper .snk-complexTable tbody td .snk-pill.snk-pill-pallet {
background-color: #a6bfc5;
}
.snk-stationInformation .snk-complexTable-wrapper .snk-complexTable tbody td .snk-pill.snk-pill-uld {
background-color: #d9e4e6;
}
.snk-stationInformation .snk-complexTable-wrapper .snk-complexTable .snk-cell-align_center svg {
width: 1.5rem;
height: 1.5rem;
}
@media (min-width: 768px) {
.snk-stationInformation .snk-complexTable-wrapper .snk-complexTable {
table-layout: fixed;
}
}
.snk-stationInformation .snk-complexTable-wrapper .snk-complexTable.snk-complexTable-capability, .snk-stationInformation .snk-complexTable-wrapper .snk-complexTable.snk-complexTable-storage {
table-layout: auto;
}
.snk-stationInformation .snk-complexTable-wrapper .snk-complexTable.snk-complexTable-capability tbody tr td:first-child, .snk-stationInformation .snk-complexTable-wrapper .snk-complexTable.snk-complexTable-storage tbody tr td:first-child {
width: 35%;
white-space: nowrap;
}
.snk-stationInformation .snk-complexTable-wrapper .snk-complexTable.snk-TableStorage-availability tbody tr:nth-child(even) td {
background-color: transparent;
}
.snk-stationInformation .snk-info-banner {
margin-top: 6.5rem;
margin-bottom: 2.5rem !important;
}
@media (max-width: 767.98px) {
.snk-stationInformation .snk-info-banner {
margin-top: 3rem;
}
}
.snk-stationInformation .snk-info-banner-header {
display: flex;
align-items: center;
gap: 1rem 2rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.snk-stationInformation .snk-info-banner-headline {
display: flex;
align-items: center;
gap: 0.5rem;
}
.snk-stationInformation .snk-info-banner-title {
font-size: 0.875rem;
}
.snk-stationInformation .snk-info-banner-icon svg {
width: 1.5rem;
height: 1.5rem;
max-width: none;
}
.snk-stationInformation .snk-next-best-action-links {
margin-bottom: 4rem;
}
@media (max-width: 767.98px) {
.snk-stationInformation .snk-TableStorage-availability .snk-cell-align_left {
vertical-align: top;
}
}
.snk-stationInformation .snk-facility-wrapper {
display: flex;
gap: 0.625rem;
}
@media (min-width: 768px) {
.snk-stationInformation .snk-facility-wrapper {
align-items: center;
}
}
@media (max-width: 767.98px) {
.snk-stationInformation .snk-facility-wrapper {
flex-direction: column;
align-items: baseline;
}
}
.snk-stationInformation .snk-facility-wrapper svg {
width: 1.5rem;
height: 1.5rem;
min-width: 1.5rem;
}
.snk-stationInformation .snk-section_Cards {
background-color: #f0f4f5;
}
/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
html,
body {
scroll-behavior: smooth;
}
.site {
min-height: 100vh;
}
@media (max-width: 782px) {
#wpadminbar {
position: fixed;
}
}
/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/
/**** ad custom splide styling here *****/
/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
.snk-section .row {
--snk-gutter-x: 2rem;
}
.snk-show-for-sr {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.entry-content > p:empty {
display: none;
}