@font-face {
    font-display: swap;
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype');
}

@font-face {
    font-display: swap;
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype');
}

:root, html {

    /* Primary colors */
    --turkis-ci: #00AAA7;
    --black-ci: #231F20;
    --turkis-web: #79B7B8;
    --dark-turkis-web: #1E7476;
    --dark-turkis-web-hover: #1A6364;

    /* Complementary Colors */
    --yellow: #F0AC00;
    --yellowLight: #F9DE99;
    --turkisLightWeb: #E4F1F1;

    /* Neutral Colors */
    --neutral-100: #1a1a1a;
    --neutral-90: #424242;
    --neutral-80: #616161;
    --neutral-70: #757575;
    --neutral-60: #9E9E9E;
    --neutral-50: #C2C2C2;
    --neutral-40: #E0E0E0;
    --neutral-30: #EDEDED;
    --neutral-20: #F5F5F5;
    --neutral-10: #fff;

    /* card drop shadow */
    --box-shadow: 4px 4px 12px 0px rgba(118, 118, 118, 0.10);

    /* headline variables */
    --main-headline-font-family: "Atkinson Hyperlegible";
    --main-headline-font-weight: 400;
    --main-headline-font-style: normal;
    --main-headline-color: var(--black-ci, #231F20);

    /* bodytext variables */
    --body-font-family: "Atkinson Hyperlegible";
    --body-font-weight: 400;
    --body-font-style: normal;
    --body-color: var(--neutral-90, #424242);

    /* spacings */
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-s: 16px;
    --space-m: 24px;
    --space-l: 32px;
    --space-xl: 48px;
    --space-xxl: 80px;
    --space-xxxl: 128px;
}


/* Headline definitions */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
#cmplz-manage-consent-container .cmplz-category-header,
#cmplz-document p.cmplz-subtitle{
    font-family: var(--main-headline-font-family);
    font-style: var(--main-headline-font-style);
    font-weight: var(--main-headline-font-weight);
    color: var(--main-headline-color);
    margin: 0;
    padding: 0;
}

h1, .h1 {
    font-size: 48px;
    line-height: 58px;
    font-size: 42px;
    line-height: 50px;

    @media screen and (min-width: 1024px){
        font-size: 68.66px;
        line-height: 89.3px;
    }
}

h2, .h2 {
    font-size: 32px;
    line-height: 33.6px;

    @media screen and (min-width: 1024px){
        font-size: 54.93px;
        line-height: 63px;
    }
}

h3, .h3,
#cmplz-document h2 {
    font-size: 26px;
    line-height: 34px;

    @media screen and (min-width: 1024px){
        font-size: 43.95px;
        line-height: 57.135px;
    }
}

h4, .h4,
#cmplz-document p.cmplz-subtitle{
    font-size: 24.4px;
    line-height: 31.3px;

    @media screen and (min-width: 1024px){
        font-size: 34px;
        line-height: 44.2px;
    }
}

h5, .h5 {
    font-size: 20px;
    line-height: 28.8px;

    @media screen and (min-width: 1024px){
        font-size: 28.13px;
        line-height: 36.569px;
    }
}

h6, .h6,
#cmplz-manage-consent-container .cmplz-category-header,
#cmplz-document .cmplz-dropdown summary div h3 {
    font-size: 18px;
    line-height: 24px;

    @media screen and (min-width: 1024px){
        font-size: 22.5px;
        line-height: 29.25px;
    }
}

@media screen and (max-width: 767px) {
    h1, h2, h3, h4, h5, h6 {
        word-break: break-word;
    }
}

#content p,
.wp-block-list li,
.font-body,
footer,
#cmplz-manage-consent-container .cmplz-description,
#cmplz-document li{
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    font-style: var(--body-font-style);
    color: var(--body-color);
    font-size: 16px;
    line-height: 26.6px;

    @media screen and (min-width: 1024px){
        font-size: 18px;
        line-height: 28.8px;
    }
}

.bold {
    font-weight: bold;
}

.not-bold {
    font-weight: 400;
}

.text-center {
    text-align: center;
}

.not-full-with-text {
    @media screen and (min-width: 1024px){
        padding-right: 305px;
    }
}

.description,
#cmplz-cookies-overview .cookies-per-purpose div {
    font-size: 13.3px !important;
    line-height: 20px !important;
    font-family: var(--body-font-family) !important;
    font-weight: var(--body-font-weight) !important;
    font-style: var(--body-font-style) !important;
    color: var(--body-color);

    @media screen and (min-width: 1024px){
        font-size: 14px !important;
        line-height: 22px !important;
    }
}

.category-overhead-label {
    color: var(--neutral-80, #616161);
}

.category-container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
}

.category-tag {

    display: inline-flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-right: 24px;
    margin-bottom: 8px;
    background: var(--neutral-30, #EDEDED);
    color: var(--neutral-80, #616161);

    /* Desktop/H6 */
    font-family: "Atkinson Hyperlegible";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 29.25px; /* 130% */

    @media screen and (min-width: 1024px){
        font-size: 22.5px;
    }

    &.outline-style {
        background: none;
        border: 1px solid var(--neutral-80);
        font-size: 18px;
        color: var(--neutral-80);
    }

    &.no-style {
        background: none;
        border: 1px solid transparent;
    }
}

.wps-intro-text {
    width: 100%;
    max-width: 998px;
}

.link-default,
#cmplz-cookies-overview .cookies-per-purpose div a{
    color: var(--dark-turkis-web) !important;
    text-align: right;
    font-family: 'Atkinson Hyperlegible';
    /* font-size: 18px;*/
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    /* line-height: 28.8px; /* 160% */
    line-height: inherit;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;

    &:hover,
    &:focus,
    &:focus-visible,
    &:active {
        text-decoration: none;
    }

    &.link-black {
        color: var(--black-ci) !important;
    }
}

.gform_wrapper .gform-body.gform_body .gchoice a {
    color: var(--black-ci) !important;
}

.link-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;

    &:hover,
    &:active {

        h2, .h6 {
            color: var(--dark-turkis-web) !important;
        }
    }

    &:focus,
    &:focus-visible {
        text-decoration: underline;
        outline: dashed 1px var(--neutral-60);
        outline-offset: 2px;
        -moz-outline-radius: 4px;
        border-radius: 4px;
    }
}

.overflow-hidden {
    overflow: hidden;
}

/* buttons */


.btn-primary,
#content .gform_wrapper #gform_submit_button_1,
#content .gform_wrapper #gform_submit_button_2 {

    display: inline-flex;
    flex-direction: column;
    padding: 10px 24px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 7px 0 0 0;
    text-decoration: none;
    background: var(--dark-turkis-web);
    color: var(--neutral-10, #FFF);
    font-family: "Atkinson Hyperlegible";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28.8px; /* 160% */
    border: solid 1.5px transparent;
    border-color: var(--dark-turkis-web) !important;
    text-align: center;

    &:hover {
        background: var(--dark-turkis-web-hover);
        border-color: var(--dark-turkis-web-hover) !important;
    }

    &:active,
    .active {
        text-decoration: underline;
        text-underline-offset: 8px;
    }

    &:focus,
    &:focus-visible {
        text-decoration: underline;
        text-underline-offset: 8px;
        box-shadow: 0 0 0 2px #1E7476;
        border: solid 2px #fff;
        border-color: #fff !important;
    }

    /* primary inverse button */
    &.btn-inverse {
        background: var(--neutral-10, #FFF);
        color:var(--dark-turkis-web);

        &:hover {
            background: var(--turkisLightWeb);
            color: var(--dark-turkis-web-hover);
        }

        &:focus,
        &:focus-visible {
            box-shadow: 0 0 0 2px #1E7476;
            border: solid 2px #fff;
            border-color: #fff !important;
            outline: none;
        }
    }



}

.btn-secondary {
    display: inline-flex;
    padding: 10px 24px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 7px 0 0 0;
    border: 1.5px solid var(--dark-turkis-web);
    text-decoration: none;
    background: #fff;
    cursor: pointer;
    text-align: center;

    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    font-style: var(--body-font-style);
    color: var(--dark-turkis-web);
    font-size: 18px;
    line-height: 26.6px;

    @media screen and (min-width: 1024px){
        font-size: 18px;
        line-height: 28.8px;
    }

    &:hover,
    &:active {
        border-radius: 7px 0 0 0;
        border: 1.5px solid #1A6364;
        background: var(--turkisLightWeb);
    }

    &:focus,
    &:focus-visible {
        border-radius: 7px 0 0 0;
        border: 2px solid #FFF;
        background: var(--dark-turkis-web);
        box-shadow: 0 0 0 2px #1E7476;
        color: var(--neutral-10);
        text-decoration: underline;
        text-underline-position: under;
    }

    &:disabled {
        cursor: none;
    }

    /* secondary inverse button */
    &.btn-inverse {
        border: 1.5px solid #fff;
        text-decoration: none;
        background: var(--dark-turkis-web);
        color: #fff;

        &:hover,
        &:active {
            border: 1.5px solid #fff;
            background: var(--turkisLightWeb);
            color: var(--dark-turkis-web);
        }

        &:focus,
        &:focus-visible {
            border: 2px solid #FFF;
            background: var(--dark-turkis-web);
            box-shadow: 0 0 0 2px #FFF;
            color: var(--neutral-10);
            outline: none;
        }
    }
}

.btn-text {
    display: inline-block;
    color: var(--black-ci, #231F20);
    font-family: "Atkinson Hyperlegible";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 29.25px; /* 162.5% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;


    &:hover {
        text-decoration: none;
    }

    &:focus,
    &:focus-within,
    &:active {
        text-decoration: none;
        outline: dashed 1px var(--neutral-60);
        outline-offset: 2px;
        -moz-outline-radius: 4px;
        border-radius: 4px;
    }

    .indicator {
        width: 32px;
        height: 32px;
        margin-left: 12px;
        display: inline-flex;
        /*padding: 10px 24px;*/
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 7px 0px;
        background: var(--dark-turkis-web);
        color: var(--neutral-10);
        border-radius: 7px 0;
        background: var(--dark-turkis-web, #1E7476);

        svg {
            fill: var(--neutral-10, #FFF);
        }
    }
}

@keyframes rotate {
    to { transform: rotate(360deg); }
}

.rotate {
    display: inline-block;
    animation: rotate 2s linear infinite;
    transform-origin: center center;
    line-height: 0;
    margin-right: 15px;

    svg {
        width: 25px;
        height: 25px;

        path {
            fill: var(--dark-turkis-web, #1E7476);
        }
    }
}

/* Search Field */
.fullwith-searchfield-container {
    position: relative;
    width: 100%;

    &::before {
        content: url("./icons/magnifyingglass.svg");
        position: absolute;
        top: .75em;
        left: .75em;
        pointer-events: none;
    }

    input[type="text"] {
        display: flex;
        padding: 8px 16px;
        align-items: center;
        gap: 16px;
        border-radius: 4px;
        border: 1.5px solid var(--neutral-80, #616161);
        background: var(--neutral-10, #FFF);
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari and Chrome */
        appearance:none;
        padding-right: 2.5em;
        color: var(--neutral-80, #616161);
        font-family: "Atkinson Hyperlegible";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 28.8px; /* 160% */
        width: 100%;
        /* max-width: 300px; */
        padding-left: 45px !important;
        box-sizing: border-box;

        &:focus,
        &:focus-visible {
            outline: dashed 1px var(--neutral-60);
            outline-offset: 2px;
            -moz-outline-radius: 4px;
            border-radius: 4px;
        }
    }
}

/* Select fields */
.profactor-select-field {
    position: relative;
    min-width: 300px;
    max-width: 100%;

    &::after {
        content: url("./icons/arrow-down.svg");
        position: absolute;
        top: 0.75em;
        right: 1em;
        pointer-events: none;
    }

    select {
        display: flex;
        padding: 8px 16px;
        align-items: center;
        gap: 16px;
        border-radius: 4px;
        border: 1.5px solid var(--neutral-80, #616161);
        background: var(--neutral-10, #FFF);
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari and Chrome */
        appearance:none;
        padding-right: 2.5em;
        color: var(--neutral-80, #616161);
        font-family: "Atkinson Hyperlegible";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 28.8px; /* 160% */
        width: 100%;

        &:focus,
        &:focus-visible {
            outline: dashed 1px var(--neutral-60);
            outline-offset: 2px;
            -moz-outline-radius: 4px;
            border-radius: 4px;
        }
    }

}


/* positions */
.position-relative {
    position: relative;
}

/* spacings margin */
.m-xxs {margin: var(--space-xxs)}
.ml-xxs {margin-left: var(--space-xxs)}
.mt-xxs {margin-top: var(--space-xxs)}
.mr-xxs {margin-right: var(--space-xxs)}
.mb-xxs {margin-bottom: var(--space-xxs)}
.m-xs {margin: var(--space-xs)}
.ml-xs {margin-left: var(--space-xs)}
.mt-xs {margin-top: var(--space-xs)}
.mr-xs {margin-right: var(--space-xs)}
.mb-xs {margin-bottom: var(--space-xs)}
.m-s {margin: var(--space-s)}
.ml-s {margin-left: var(--space-s)}
.mt-s {margin-top: var(--space-s)}
.mr-s {margin-right: var(--space-s)}
.mb-s {margin-bottom: var(--space-s)}
.m-m {margin: var(--space-m)}
.ml-m {margin-left: var(--space-m)}
.mt-m {margin-top: var(--space-m)}
.mr-m {margin-right: var(--space-m)}
.mb-m {margin-bottom: var(--space-m)}
.m-l {margin: var(--space-l)}
.ml-l {margin-left: var(--space-l)}
.mt-l {margin-top: var(--space-l)}
.mr-l {margin-right: var(--space-l)}
.mb-l {margin-bottom: var(--space-l)}
.m-xl {margin: var(--space-xl)}
.ml-xl {margin-left: var(--space-xl)}
.mt-xl {margin-top: var(--space-xl)}
.mr-xl {margin-right: var(--space-xl)}
.mb-xl {margin-bottom: var(--space-xl)}
.m-xxl {margin: var(--space-xxl)}
.ml-xxl {margin-left: var(--space-xxl)}
.mt-xxl {margin-top: var(--space-xxl)}
.mr-xxl {margin-right: var(--space-xxl)}
.mb-xxl {margin-bottom: var(--space-xxl)}
.m-xxxl {margin: var(--space-xxxl)}
.ml-xxxl {margin-left: var(--space-xxxl)}
.mt-xxxl {margin-top: var(--space-xxxl)}
.mr-xxxl {margin-right: var(--space-xxxl)}
.mb-xxxl {margin-bottom: var(--space-xxxl)}

/* spacings padding */
.p-xxs {padding: var(--space-xxs)}
.pl-xxs {padding-left: var(--space-xxs)}
.pt-xxs {padding-top: var(--space-xxs)}
.pr-xxs {padding-right: var(--space-xxs)}
.pb-xxs {padding-bottom: var(--space-xxs)}
.p-xs {padding: var(--space-xs)}
.pl-xs {padding-left: var(--space-xs)}
.pt-xs {padding-top: var(--space-xs)}
.pr-xs {padding-right: var(--space-xs)}
.pb-xs {padding-bottom: var(--space-xs)}
.p-s {padding: var(--space-s)}
.pl-s {padding-left: var(--space-s)}
.pt-s {padding-top: var(--space-s)}
.pr-s {padding-right: var(--space-s)}
.pb-s {padding-bottom: var(--space-s)}
.p-m {padding: var(--space-m)}
.pl-m {padding-left: var(--space-m)}
.pt-m {padding-top: var(--space-m)}
.pr-m {padding-right: var(--space-m)}
.pb-m {padding-bottom: var(--space-m)}
.p-l {padding: var(--space-l)}
.pl-l {padding-left: var(--space-l)}
.pt-l {padding-top: var(--space-l)}
.pr-l {padding-right: var(--space-l)}
.pb-l {padding-bottom: var(--space-l)}
.p-xl {padding: var(--space-xl)}
.pl-xl {padding-left: var(--space-xl)}
.pt-xl {padding-top: var(--space-xl)}
.pr-xl {padding-right: var(--space-xl)}
.pb-xl {padding-bottom: var(--space-xl)}
.p-xxl {padding: var(--space-xxl)}
.pl-xxl {padding-left: var(--space-xxl)}
.pt-xxl {padding-top: var(--space-xxl)}
.pr-xxl {padding-right: var(--space-xxl)}
.pb-xxl {padding-bottom: var(--space-xxl)}
.p-xxxl {padding: var(--space-xxxl)}
.pl-xxxl {padding-left: var(--space-xxxl)}
.pt-xxxl {padding-top: var(--space-xxxl)}
.pr-xxxl {padding-right: var(--space-xxxl)}
.pb-xxxl {padding-bottom: var(--space-xxxl)}

.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }

.px-m {padding-left: var(--space-m); padding-right: var(--space-m)}
.py-m {padding-top: var(--space-m); padding-bottom: var(--space-m)}

.px-l {padding-left: var(--space-l); padding-right: var(--space-l)}
.py-l {padding-top: var(--space-l); padding-bottom: var(--space-l)}

.mobile-p-0 {
    @media screen and (max-width: 1024px) {
        padding: 0 !important;
    }
}

.mobile-p-xs {@media screen and (max-width: 1024px) {padding: var(--space-xs) !important;}}
.mobile-p-s {@media screen and (max-width: 1024px) {padding: var(--space-xs) !important;}}
.mobile-p-m {@media screen and (max-width: 1024px) {padding: var(--space-m) !important;}}
.mobile-p-l {@media screen and (max-width: 1024px) {padding: var(--space-l) !important;}}

/* Background colors */
.bg-neutral-10 { background-color: var(--neutral-10)}
.bg-neutral-20 { background-color: var(--neutral-20)}
.bg-dark-turkis { background: var(--dark-turkis-web)}
.bg-light-turkis { background: rgba(121, 183, 184, 0.2)}
.bg-yellow { background: var(--yellowLight, #F9DE99)}

/* text colors */
.text-white { color: var(--neutral-10) !important;}

/* no-wrap text */
.nowrap {white-space: nowrap}

/* gradient animation */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* container sizes */

.container-full {
    width: 100%;
    max-width: 100%;

    div.inner {
        width: 100%;
        max-width: 100%;
        margin: auto;
        padding-left: var(--space-s);
        padding-right: var(--space-s);
        box-sizing: border-box;
    }
}

.container-default {
    width: 100%;
    max-width: 100%;

    .inner{
        width: 100%;
        max-width: 1202px;
        max-width: 1234px; /* 1202px + 2x 16px (margin-left & padding-left) */
        margin: auto;
        padding-left: var(--space-s);
        padding-right: var(--space-s);
        box-sizing: border-box;
    }
}

.container-tiny {
    width: 100%;
    max-width: 100%;

    .inner{
        width: 100%;
        max-width: 958px;
        margin: auto;
        padding-left: var(--space-s);
        padding-right: var(--space-s);
        box-sizing: border-box;
    }
}

/* effects */

.card-shadow {
    box-shadow: var(--box-shadow);
}

.ellipsis-2-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    max-width: 100%;
    line-height: 1.3;
    max-height: calc(2 * 1.3em);
    padding-bottom: 0 !important;
}

.ellipsis-3-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    white-space: normal;
    max-width: 100%;
    line-height: 1.3;
    max-height: calc(3 * 1.3em);
    padding-bottom: 0 !important;
}

.ellipsis-4-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    white-space: normal;
    max-width: 100%;
    line-height: 1.3;
    max-height: calc(4 * 1.3em);
    padding-bottom: 0 !important;
}

.ellipsis-5-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    white-space: normal;
    max-width: 100%;
    line-height: 1.3;
    max-height: calc(5 * 1.3em);
    padding-bottom: 0 !important;
}

.project-details,
.job-details {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: start;
    flex-wrap: wrap;

    @media screen and (min-width: 1024px){
        justify-content: space-between;
    }
}

.project-details {
    --numberOfColums: 1;
    --gapValue: var(--space-m);
    @media screen and (min-width: 1024px){--numberOfColums: 3;}
    --numberOfGaps: calc(var(--numberOfColums) - 1 );
    flex-wrap: wrap;
    gap: var(--gapValue);

    .single-detail-with-icon {
        width: calc( (100% - var(--numberOfGaps) * var(--gapValue)) / var(--numberOfColums) );
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        box-sizing: border-box;

        .label {
            display: flex;
            align-items: center;

            svg {
                margin-right: var(--space-xs);
            }
        }
    }
}

.single-detail-with-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xxs);
}

.centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.image-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    font-size: 0;

    img:not(.uncover) {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
}


.layout-2-1 .grid {
    width: 100%;
    --gapValue: var(--space-m);

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--gapValue);

    @media screen and (min-width: 1024px){
        flex-direction: row;
    }

    & > div:first-child {
        width: 100%;
        box-sizing: border-box;

        @media screen and (min-width: 1024px){
            width: calc((100%/3*2) - var(--gapValue)/2);
        }
    }

    & > div:last-child {
        width: 100%;
        box-sizing: border-box;

        @media screen and (min-width: 1024px) {
            width: calc((100% / 3 * 1) - var(--gapValue) / 2);
        }
    }
}

.sidebar-box {
    box-sizing: border-box;
    margin-bottom: var(--space-xl);
    padding: var(--space-l) var(--space-m);
    flex-direction: column;
    align-items: flex-start;
    display: flex;
    gap: 8px;
    border-radius: 4px;
    border: 1.5px solid var(--neutral-60, #9E9E9E);
    background: var(--neutral-10, #FFF);
    
    a {
        display: flex;
        text-align: left;
        line-height: 200%;
        justify-content: flex-start;
        gap: 8px;
        padding: 4px;
        flex-wrap: nowrap;

        word-break: break-word;

        & svg {
            flex-shrink:0;
            transform: translateY(4px);
        }
    }
}


div.wps-grid-of-documents {
    div.wps-single-document {
        border-bottom: 0.5px solid var(--neutral-70, #757575);


        a {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            color: inherit;
            text-decoration: inherit;
            gap: 50px;

            &:hover,
            &:focus,
            &:active {
                outline: none;

                span.h6 {
                    color: var(--dark-turkis-web);
                }
            }
        }

        &:last-child {
            /* border-bottom: 0; */
        }

        svg {
            width: 32px;
            height: 32px;
            flex-shrink: 0;
            flex-grow: 0;
        }
    }
}

/* make a grid out of everything - default is 3 items per row */
/* other grid versions the additional classses .wps-grid-4-cols, .wps-grid-2-cols */
.wps-grid {
    --gapValue: var(--space-m);
    --numberOfColums: 1;

    &.wps-grid-1-cols-mobile {--numberOfColums: 1;}
    &.wps-grid-2-cols-mobile {--numberOfColums: 2;}
    &.wps-grid-3-cols-mobile {--numberOfColums: 3;}
    &.wps-grid-4-cols-mobile {--numberOfColums: 4;}
    &.wps-grid-5-cols-mobile {--numberOfColums: 5;}
    &.wps-grid-6-cols-mobile {--numberOfColums: 6;}

    @media screen and (min-width: 1024px){
        --numberOfColums: 3;
        &.wps-grid-1-cols {--numberOfColums: 1;}
        &.wps-grid-2-cols {--numberOfColums: 2;}
        &.wps-grid-3-cols {--numberOfColums: 3;}
        &.wps-grid-4-cols {--numberOfColums: 4;}
        &.wps-grid-5-cols {--numberOfColums: 5;}
        &.wps-grid-6-cols {--numberOfColums: 6;}
    }

    --gapValue: var(--space-m);
    --numberOfGaps: calc(var(--numberOfColums) - 1 );

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gapValue);

    & > * {
        width: calc( (100% - var(--numberOfGaps) * var(--gapValue)) / var(--numberOfColums) );
        box-sizing: border-box;
        z-index: 99;
    }
}


/* responsive youtube videos with oembed */
.wps-responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    width: 100%;
    max-width: 1202px;
    margin: 0 auto;
    background-color: #ccc;

    iframe {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    /* object, embed, video */
}

.centered-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;

    .script-box {
        position: absolute;
    }

    form {
        width: 100%;

        button.btn-secondary {
            width: 100%;
        }
    }

    a.btn-primary {
        align-self: stretch;
    }

    @media screen and (min-width: 1024px){
        flex-direction: row;

        a.btn-primary {
            align-self: inherit;
        }

        form {
            width: inherit;

            button.btn-secondary {
                width: inherit;
            }
        }
    }
}

/* Gravity forms */
.gform_wrapper {

    p.gform_required_legend {
        margin: 0 !important;
    }

    .gform-body.gform_body *{
        font-family: var(--main-headline-font-family);
        font-weight: var(--main-headline-font-weight);
        color: var(--neutral-90);
    }
    ::placeholder {
        color: var(--neutral-80) !important;
    }

    .gfield_required,
    .gfield_required *,
    .gform_confirmation_message{
        font-family: var(--main-headline-font-family) !important;
        font-weight: var(--main-headline-font-weight) !important;
        color: var(--neutral-90) !important;
    }

    .gfield_label,
    label,
    .gfield_required * ,
    .gform_confirmation_message{
        font-size: 18px !important;
        line-height: 24px !important;

        @media screen and (min-width: 1024px){
            font-size: 22.5px !important;
            line-height: 29.25px !important;
        }
    }

    label {
        font-size: 18px !important;
        line-height: 24px !important;

        a {
            color: var(--dark-turkis-web) !important;

            &:hover {
                text-decoration: unset !important;
            }
        }
    }

    input,
    textarea {
        border-radius: 4px !important;
        border-color: var(--neutral-80) !important;
        background-color: var(--neutral-10) !important;
    }

    input.gform_button {
        font-family: var(--main-headline-font-family) !important;
        font-weight: var(--main-headline-font-weight) !important;
        background-color: var(--dark-turkis-web) !important;
        border-radius: 7px 0 0 0 !important;
        font-size: 18px !important;

        &:hover, &:focus, &:active {
            background-color: var(--dark-turkis-web-hover) !important;
            border-color: var(--dark-turkis-web-hover) !important;
        }
    }

    .gform_validation_errors {
        border: dashed 1px var(--neutral-50) !important;
        background-color: var(--neutral-20) !important;
        color: var(--neutral-70) !important;
        padding: 0.5rem !important;
        margin-bottom: 0.75rem !important;

        &:focus {
            outline: none !important;
        }

        p {
            color: var(--neutral-70) !important;
            font-size: 16px !important;
        }
    }

    .validation_message
    {
        background-color: var(--neutral-10);
        margin-top: 5px !important;
        /*padding: 4px 0 2px 12px;
        border-radius: 0 0 4px 4px;*/
        padding-left: 0;
        color: red !important;
    }

    input.gfield-choice-input:before {
        color: var(--dark-turkis-web) !important;
    }
}

#form-content {
    input[type='text'] {
        border-width: 1px;
        border-radius: 4px !important;
        border-color: var(--neutral-80) !important;
        background-color: var(--neutral-10) !important;
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 18px;
        height: 49px;
        font-style: normal;
        font-weight: 400;
        line-height: 28.8px;
        box-sizing: border-box;

        &:focus,
        &:focus-visible {
            border-color: var(--dark-turkis-web) !important;
            outline: solid 1px var(--dark-turkis-web);
        }
    }

    label {
        font-size: 18px !important;
        line-height: 24px !important;

        a {
            color: var(--dark-turkis-web) !important;

            &:hover {
                text-decoration: unset !important;
            }
        }
    }
}