/* ----- global ----- */
html {
    overflow-x: hidden !important;

    width: 100vw;
}

body {
    position: relative;

    min-height: 100vh;

    color: var(--brand);
    background-color: var(--white);

    font-family: var(--font_family);
    font-size: 16px;
    font-weight: var(--font_weight--normal);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

body.portfolio-template-default {
    overflow-x: hidden;

    max-width: 100vw;
}

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

button,
input,
select,
textarea {
    border-radius: 0;

    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
}

* {
    outline: 0 !important;
}

* {
    -webkit-tap-highlight-color: transparent !important;
}

::-moz-selection {
    background: var(--grey_blue);
}

::selection {
    background: var(--grey_blue);
}

.container-dark ::-moz-selection,
.container-red ::-moz-selection {
    color: var(--brand);
}

.container-dark ::selection,
.container-red ::selection {
    color: var(--brand);
}

.main-content {
    min-height: calc(100vh - 100px - 106px);
    margin-top: 80px;
}

@media only screen and (max-width: 1440px) {
    .main-content {
        margin-top: 70px;
    }
}

@media only screen and (max-width: 1279px) {
    .main-content {
        margin-top: 60px;
    }
}

.page-template-getaquote-template .main-content {
    min-height: unset;
}

.main-content > section {
    max-width: 100vw;
}

img {
    height: auto;

    vertical-align: middle;
}

span {
    font-weight: inherit;
}

/* ----- typography ----- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font_weight--semibold);
}

h1 {
    font-size: var(--h1--font-size);
}

@media only screen and (max-width: 1440px) {
    h1 {
        font-size: var(--h1--font-size--large);
    }
}

@media only screen and (max-width: 1280px) {
    h1 {
        font-size: var(--h1--font-size--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    h1 {
        font-size: var(--h1--font-size--tablet);
    }
}

@media only screen and (max-width: 768px) {
    h1 {
        font-size: var(--h1--font-size--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    h1 {
        font-size: var(--h1--font-size--mobile);
    }
}

h2 {
    font-size: var(--h2--font-size);
}

@media only screen and (max-width: 1440px) {
    h2 {
        font-size: var(--h2--font-size--large);
    }
}

@media only screen and (max-width: 1280px) {
    h2 {
        font-size: var(--h2--font-size--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    h2 {
        font-size: var(--h2--font-size--tablet);
    }
}

@media only screen and (max-width: 768px) {
    h2 {
        font-size: var(--h2--font-size--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    h2 {
        font-size: var(--h2--font-size--mobile);
    }
}

.header1-hero {
    font-size: var(--h1-hero);
}

@media only screen and (max-width: 1440px) {
    .header1-hero {
        font-size: var(--h1-hero--large);
    }
}

@media only screen and (max-width: 1280px) {
    .header1-hero {
        font-size: var(--h1-hero--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    .header1-hero {
        font-size: var(--h1-hero--tablet);
    }
}

@media only screen and (max-width: 768px) {
    .header1-hero {
        font-size: var(--h1-hero--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    .header1-hero {
        font-size: var(--h1-hero--mobile);
    }
}

.header2-hero {
    font-size: var(--h2-hero);
}

@media only screen and (max-width: 1440px) {
    .header2-hero {
        font-size: var(--h2-hero--large);
    }
}

@media only screen and (max-width: 1280px) {
    .header2-hero {
        font-size: var(--h2-hero--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    .header2-hero {
        font-size: var(--h2-hero--tablet);
    }
}

@media only screen and (max-width: 768px) {
    .header2-hero {
        font-size: var(--h2-hero--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    .header2-hero {
        font-size: var(--h2-hero--mobile);
    }
}

.header2 {
    font-size: var(--h2);
}

@media only screen and (max-width: 1440px) {
    .header2 {
        font-size: var(--h2--large);
    }
}

@media only screen and (max-width: 1280px) {
    .header2 {
        font-size: var(--h2--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    .header2 {
        font-size: var(--h2--tablet);
    }
}

@media only screen and (max-width: 768px) {
    .header2 {
        font-size: var(--h2--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    .header2 {
        font-size: var(--h2--mobile);
    }
}

h3 {
    font-size: var(--h3--font-size);
}

@media only screen and (max-width: 1440px) {
    h3 {
        font-size: var(--h3--font-size--large);
    }
}

@media only screen and (max-width: 1280px) {
    h3 {
        font-size: var(--h3--font-size--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    h3 {
        font-size: var(--h3-font-size--tablet);
    }
}

@media only screen and (max-width: 768px) {
    h3 {
        font-size: var(--h3--font-size--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    h3 {
        font-size: var(--h3--font-size--mobile);
    }
}

.header1-hero {
    font-size: var(--h1-hero);
}

@media only screen and (max-width: 1440px) {
    .header1-hero {
        font-size: var(--h1-hero--large);
    }
}

@media only screen and (max-width: 1280px) {
    .header1-hero {
        font-size: var(--h1-hero--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    .header1-hero {
        font-size: var(--h1-hero--tablet);
    }
}

@media only screen and (max-width: 768px) {
    .header1-hero {
        font-size: var(--h1-hero--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    .header1-hero {
        font-size: var(--h1-hero--mobile);
    }
}

.header2-hero {
    font-size: var(--h2-hero);
    line-height: var(--line-height--l);
}

@media only screen and (max-width: 1440px) {
    .header2-hero {
        font-size: var(--h2-hero--large);
    }
}

@media only screen and (max-width: 1280px) {
    .header2-hero {
        font-size: var(--h2-hero--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    .header2-hero {
        font-size: var(--h2-hero--tablet);
    }
}

@media only screen and (max-width: 768px) {
    .header2-hero {
        font-size: var(--h2-hero--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    .header2-hero {
        font-size: var(--h2-hero--mobile);
    }
}

.header2 {
    font-size: var(--h2);
    line-height: var(--line-height--m);
}

@media only screen and (max-width: 1440px) {
    .header2 {
        font-size: var(--h2--large);
    }
}

@media only screen and (max-width: 1280px) {
    .header2 {
        font-size: var(--h2--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    .header2 {
        font-size: var(--h2--tablet);
    }
}

@media only screen and (max-width: 768px) {
    .header2 {
        font-size: var(--h2--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    .header2 {
        font-size: var(--h2--mobile);
    }
}

.header3 {
    font-size: var(--h3);
    line-height: var(--line-height--m);
}

@media only screen and (max-width: 1440px) {
    .header3 {
        font-size: var(--h3--large);
    }
}

@media only screen and (max-width: 1280px) {
    .header3 {
        font-size: var(--h3--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    .header3 {
        font-size: var(--h3--tablet);
    }
}

@media only screen and (max-width: 768px) {
    .header3 {
        font-size: var(--h3--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    .header3 {
        font-size: var(--h3--mobile);
    }
}

.header4 {
    font-size: var(--h4);
    line-height: var(--line-height--m);
}

@media only screen and (max-width: 1440px) {
    .header4 {
        font-size: var(--h4--large);
    }
}

@media only screen and (max-width: 1280px) {
    .header4 {
        font-size: var(--h4--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    .header4 {
        font-size: var(--h4--tablet);
    }
}

@media only screen and (max-width: 768px) {
    .header4 {
        font-size: var(--h4--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    .header4 {
        font-size: var(--h4--mobile);
    }
}

.header5-blog {
    font-size: var(--h5-blog);
    line-height: var(--line-height--m);
}

@media only screen and (max-width: 1440px) {
    .header5-blog {
        font-size: var(--h5-blog--large);
    }
}

@media only screen and (max-width: 1280px) {
    .header5-blog {
        font-size: var(--h5-blog--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    .header5-blog {
        font-size: var(--h5-blog--tablet);
    }
}

@media only screen and (max-width: 768px) {
    .header5-blog {
        font-size: var(--h5-blog--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    .header5-blog {
        font-size: var(--h5-blog--mobile);
    }
}

h4 {
    font-size: var(--h4);
}

@media only screen and (max-width: 1440px) {
    h4 {
        font-size: var(--h4--large);
    }
}

@media only screen and (max-width: 1280px) {
    h4 {
        font-size: var(--h4--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    h4 {
        font-size: var(--h4--tablet);
    }
}

@media only screen and (max-width: 768px) {
    h4 {
        font-size: var(--h4--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    h4 {
        font-size: var(--h4--mobile);
    }
}

h5 {
    font-size: var(--h5--font-size);
}

@media only screen and (max-width: 1440px) {
    h5 {
        font-size: var(--h5--font-size--large);
    }
}

@media only screen and (max-width: 1280px) {
    h5 {
        font-size: var(--h5--font-size--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    h5 {
        font-size: var(--h5-font-size--tablet);
    }
}

@media only screen and (max-width: 768px) {
    h5 {
        font-size: var(--h5--font-size--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    h5 {
        font-size: var(--h5--font-size--mobile);
    }
}

p,
.paragraph {
    font-size: var(--p);
    font-weight: var(--font_weight--normal);
}

@media only screen and (max-width: 1440px) {
    p,
    .paragraph {
        font-size: var(--p--large);
    }
}

@media only screen and (max-width: 1280px) {
    p,
    .paragraph {
        font-size: var(--p--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    p,
    .paragraph {
        font-size: var(--p--tablet);
    }
}

@media only screen and (max-width: 768px) {
    p,
    .paragraph {
        font-size: var(--p--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    p,
    .paragraph {
        font-size: var(--p--mobile);
    }
}

ul li,
ol li {
    font-size: var(--list-font-size);
    line-height: var(--line_hight--extralarge);
}

@media only screen and (max-width: 1024px) {
    ul li,
    ol li {
        font-size: var(--list-font-size--tablet);
    }
}

@media only screen and (max-width: 768px) {
    ul li,
    ol li {
        font-size: var(--list-font-size--mobile);
    }
}

.label {
    font-size: var(--label);
}

@media only screen and (max-width: 1440px) {
    .label {
        font-size: var(--label--large);
    }
}

@media only screen and (max-width: 1280px) {
    .label {
        font-size: var(--label--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    .label {
        font-size: var(--label--tablet);
    }
}

@media only screen and (max-width: 768px) {
    .label {
        font-size: var(--label--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    .label {
        font-size: var(--label--mobile);
    }
}

blockquote {
    font-size: var(--blockquote--font-size);
    font-weight: var(--font_weight--normal);
    line-height: var(--line_hight--large);
}

blockquote:before {
    font-size: var(--blockquote--font-size);
}

blockquote:after {
    font-size: var(--blockquote--font-size);
}

@media only screen and (max-width: 1440px) {
    blockquote {
        font-size: var(--blockquote--font-size--large);
    }

    blockquote:before {
        font-size: var(--blockquote--font-size--large);
    }

    blockquote:after {
        font-size: var(--blockquote--font-size--large);
    }
}

@media only screen and (max-width: 1024px) {
    blockquote {
        font-size: var(--blockquote--font-size--tablet);
    }

    blockquote:before {
        font-size: var(--blockquote--font-size--tablet);
    }

    blockquote:after {
        font-size: var(--blockquote--font-size--tablet);
    }
}

@media only screen and (max-width: 460px) {
    blockquote {
        font-size: var(--blockquote--font-size--mobile);
    }

    blockquote:before {
        font-size: var(--blockquote--font-size--mobile);
    }

    blockquote:after {
        font-size: var(--blockquote--font-size--mobile);
    }
}

a {
    position: relative;

    overflow: hidden;

    text-decoration: none;
    text-decoration: none;

    color: var(--c_brand--200);
}

a:hover {
    text-decoration: underline;

    color: var(--c_brand--200);

    text-underline-offset: 6px;
}

a.link--underline {
    display: inline-block;
    overflow: hidden;

    padding-bottom: 5px;

    text-decoration: none !important;

    font-weight: var(--font_weight--semibold);
    line-height: var(--line_hight--large);
}

@media only screen and (max-width: 460px) {
    a.link--underline {
        line-height: unset;
    }
}

a.link--underline:after {
    position: absolute;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 2px;

    content: "";

    background-color: var(--red);
}

a.link--underline--dark:after {
    background-color: var(--brand);
}

@media only screen and (max-width: 460px) {
    a.link--underline:after {
        height: 1px;
    }
}

a.link--underline.anim:after {
    animation-name: linkHover;
    animation-duration: var(--translation_duration);
}

a.link--underline:hover:after {
    animation-name: linkHover;
    animation-duration: var(--translation_duration);
}

.link--arrow {
    display: inline-block;
    overflow: visible;

    padding-right: 10px;

    transition: all var(--translation_duration);
    white-space: pre;
    text-decoration: none !important;

    color: var(--red);

    font-weight: var(--font_weight--semibold);
}

@media only screen and (max-width: 320px) {
    .link--arrow {
        white-space: normal;
    }
}

.link--arrow:hover {
    color: var(--c_brand--800);
}

.arrow--right > .arrow--right,
.link--arrow .arrow--right {
    display: inline;

    padding-left: 5px;
}

.link--arrow .arrow--right svg {
    margin-bottom: -1px;

    transition: transform var(--translation_duration);
}

@media only screen and (max-width: 460px) {
    .link--arrow.secondary-link .arrow--right svg {
        margin-bottom: -1px;
    }
}

.link--arrow:hover .arrow--right svg {
    transform: translateX(5px);
}

.link--arrow .arrow--right svg path {
    transition: all var(--translation_duration);

    fill: var(--red);
}

.link--arrow:hover .arrow--right svg path {
    fill: var(--c_brand--800);
}

.link--arrow .arrow--right.arrow--white svg path {
    fill: var(--white);
}

.primary-link {
    font-size: var(--link-primary);
}

@media only screen and (max-width: 1440px) {
    .primary-link {
        font-size: var(--link-primary--large);
    }
}

@media only screen and (max-width: 1280px) {
    .primary-link {
        font-size: var(--link-primary--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    .primary-link {
        font-size: var(--link-primary--tablet);
    }
}

@media only screen and (max-width: 768px) {
    .primary-link {
        font-size: var(--link-primary--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    .primary-link {
        font-size: var(--link-primary--mobile);
    }
}

.secondary-link {
    font-size: var(--link-secondary);
}

@media only screen and (max-width: 1440px) {
    .secondary-link {
        font-size: var(--link-secondary--large);
    }
}

@media only screen and (max-width: 1280px) {
    .secondary-link {
        font-size: var(--link-secondary--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    .secondary-link {
        font-size: var(--link-secondary--tablet);
    }
}

@media only screen and (max-width: 768px) {
    .secondary-link {
        font-size: var(--link-secondary--mobile_landscape);
    }
}

@media only screen and (max-width: 460px) {
    .secondary-link {
        font-size: var(--link-secondary--mobile);
    }
}

.container-dark a:not(.cta_button),
.container-red a {
    text-decoration: underline;

    color: var(--white);
}

.container-dark a:not(.cta_button):after,
.container-red a:after {
    background-color: var(--white);
}

.container-light-grey a.link--red {
    color: var(--red);
}

.container-light-grey a.link--red:hover {
    color: var(--red--dark);
}

.container-light-grey a.link--red:after {
    background-color: var(--red);
}

a.cta-primary {
    display: inline-flex;
    overflow: initial;
    align-items: center;

    padding: 16px 25px 19px;

    transition: background-color var(--translation_duration);
    text-decoration: none;

    color: var(--white);
    background-color: var(--red);

    font-size: var(--link-primary);
    font-weight: var(--font_weight--semibold);
}

@media only screen and (max-width: 1440px) {
    a.cta-primary {
        padding: 15px 25px 17px;

        font-size: var(--link-primary--large);
    }
}

@media only screen and (max-width: 1280px) {
    a.cta-primary {
        padding: 14px 25px 15px;

        font-size: var(--link-primary--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    a.cta-primary {
        padding: 15px 20px 17px;

        font-size: var(--link-primary--tablet);
    }
}

@media only screen and (max-width: 768px) {
    a.cta-primary {
        font-size: var(--link-primary--mobile_landscape);
    }
}

@media only screen and (max-width: 768px) {
    a.cta-primary {
        padding: 13px 20px 14px;

        font-size: var(--link-primary--mobile);
    }
}

@media only screen and (max-width: 768px) {
    a.cta-primary {
        padding: 13px 20px 14px;

        font-size: var(--link-primary--mobile);
    }
}

@media only screen and (max-width: 460px) {
    a.cta-primary {
        padding: 0 15px;

        font-size: var(--link-primary--mobile);
        line-height: 40px;
    }
}


a.cta-primary img {
    width: auto;
    margin-left: 25px;

    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

a.cta-primary:hover {
    transition: all var(--translation_duration);

    background-color: var(--red--dark);
}

a.cta-primary:hover img {
    width: auto;

    -webkit-animation-name: btnarrow;
    animation-name: btnarrow;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.container-dark a.cta-primary {
    color: var(--red);
    background-color: var(--white);
}

.container-dark a.cta-primary:hover {
    color: var(--red);
    background-color: var(--red--light);
}

a.cta-secondary {
    display: inline-flex;
    align-items: center;

    padding: 21px 25px 22px;

    text-decoration: none;

    color: var(--white);
    background-color: transparent;

    font-size: var(--link-primary);
    font-weight: var(--font_weight--semibold);
    line-height: 90%;
}

@media only screen and (max-width: 1440px) {
    a.cta-secondary {
        padding: 0 25px;

        font-size: var(--link-primary--large);
        line-height: 42px;
    }
}

@media only screen and (max-width: 1280px) {
    a.cta-secondary {
        font-size: var(--link-primary--desktop);
    }
}

@media only screen and (max-width: 1024px) {
    a.cta-secondary {
        padding: 0 25px;

        font-size: var(--link-primary--tablet);
        line-height: 42px;
    }
}

@media only screen and (max-width: 768px) {
    a.cta-secondary {
        padding: 0 15px;

        font-size: var(--link-primary--mobile_landscape);
        line-height: 42px;
    }
}

@media only screen and (max-width: 460px) {
    a.cta-secondary {
        font-size: var(--link-primary--mobile_landscape);
        line-height: 40px;
    }
}

a.cta-secondary--border {
    padding: 16px 25px 18px;

    border: 2px solid var(--white);
}

@media only screen and (max-width: 1440px) {
    a.cta-secondary--border {
        padding: 13px 25px 15px;

        line-height: unset;
    }
}

@media only screen and (max-width: 1280px) {
    a.cta-secondary--border {
        padding: 12px 25px 13px;
    }
}

@media only screen and (max-width: 1024px) {
    a.cta-secondary--border {
        padding: 13px 20px 15px;
    }
}

@media only screen and (max-width: 460px) {
    a.cta-secondary--border {
        padding: 11px 20px 12px;
    }
}

a.cta-secondary--border--red {
    display: inline-block;

    padding: 4px 15px;

    text-decoration: none;

    color: var(--red);
    border: 2px solid var(--red);

    font-size: var(--caption-font-size);
    font-weight: var(--font_weight--semibold);
    line-height: var(--line-height--xl);
}

a.cta-secondary--border--red:hover {
    color: var(--white);
    background: var(--red);
}

a.cta-secondary img {
    margin-left: 25px;

    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

a.cta-secondary:hover {
    transition: all var(--translation_duration);

    color: var(--brand);
    background-color: var(--white);
}

a.cta-secondary:hover img {
    -webkit-animation-name: btnarrow;
    animation-name: btnarrow;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

a.cta-secondary.dark {
    color: var(--red);
    background-color: var(--white);
}

a.cta-secondary.dark:hover {
    background-color: var(--white);
}

a.cta-secondary--border.red {
    color: var(--red);
    border: 2px solid var(--red);
    background-color: transparent;
}

a.cta-secondary--border.red:hover {
    color: var(--white);
    background-color: var(--red);
}

strong {
    font-weight: var(--font_weight--semibold);
}

em {
    font-style: italic;
}

.letterAnimation {
    position: relative;

    display: inline-block;

    height: 20px;
}

@media only screen and (max-width: 1440px) {
    .letterAnimation {
        height: 18px;
    }
}

@media only screen and (max-width: 1024px) {
    .letterAnimation {
        height: 16px;
    }
}

@media only screen and (max-width: 460px) {
    .letterAnimation {
        height: 14px;
    }
}

@media only screen and (max-width: 1175px) and (min-width: 1024px) {
    .letterAnimation {
        display: block;
    }
}

@media only screen and (max-width: 674px) and (min-width: 521px) {
    .letterAnimation {
        display: block;
    }
}
.letterAnimation span {
    position: absolute;
    left: 0;

    display: inline-block;

    white-space: nowrap;

    opacity: 0;
}


/* ----- spacing ----- */
@media screen and (min-width: 1441px) {
    .section-space-bottom {
        margin-bottom: var(--margin-bottom);
    }
}

@media screen and (max-width: 1440px) {
    .section-space-bottom {
        margin-bottom: var(--margin-bottom--large);
    }
}

@media screen and (max-width: 1280px) {
    .section-space-bottom {
        margin-bottom: var(--margin-bottom--desktop);
    }
}

@media screen and (max-width: 1024px) {
    .section-space-bottom {
        margin-bottom: var(--margin-bottom--tablet);
    }
}

@media screen and (max-width: 460px) {
    .section-space-bottom {
        margin-bottom: var(--margin-bottom--mobile);
    }
}

/* ----- containers ----- */
.container-dark {
    position: relative;

    color: var(--white);
    background-color: var(--brand);
}

@media only screen and (max-width: 1024px) {
    .container-dark:after {
        width: 200vw;

        transform: translateX(-50%);
    }
}

.container-red {
    position: relative;

    color: var(--white);
    background-color: var(--red);
}

.container-light-grey {
    color: var(--brand);
    background: var(--c_neutral--25);
}

.container-transparent {
    color: var(--brand);
    background: transparent;
}

.container-darker-grey {
    color: var(--brand);
    background: var(--c_neutral--50);
}

/* ----- shape ----- */
.shape {
    position: absolute;
    z-index: 1;
}

.shape svg {
    display: none;
}

.shape-plain {
    position: absolute;
    z-index: -1;
}

.noscroll {
    overflow: hidden;
}


/* ----- CookieBot ----- */
.CookieDeclaration {
    display: none;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #A3A6AD !important;
}

#CybotCookiebotDialog input[type=checkbox][checked]:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #181A1F !important;
}

#CybotCookiebotDialog form input[type=checkbox][disabled]:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #d6d6d6 !important;
}