:root {
    --primaryColor: #00994B;
    --primaryHover: #005b2b;
    --secondaryColor: #154F90;
    --secondaryHover: #12437a;
    --defaultTextColor: #333333;
    --lightgreen: rgba(0, 153, 75, 0.2);
    --largeSpace: 80px;
    --mediumSpace: 40px;
    --smallSpace: 20px;
    --fullWidth: 1700px;
    --defaultFontSize: 1.125rem;
    --smallFontSize: 0.975rem;
    --buttonFontSize: 1.0625rem;
    --defaultBorderRadius: 6px;
    --largeBorderRadius: 12px;
}

/* Fonts */
@font-face {
    font-family: 'Jost';
    font-style: italic;
    font-weight: 100 900;
    src: url('../fonts/jost-0.woff2') format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: 'Jost';
    font-style: italic;
    font-weight: 100 900;
    src: url('../fonts/jost-1.woff2') format('woff2');
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: 'Jost';
    font-style: italic;
    font-weight: 100 900;
    src: url('../fonts/jost-2.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 100 900;
    src: url('../fonts/jost-3.woff2') format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 100 900;
    src: url('../fonts/jost-4.woff2') format('woff2');
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 100 900;
    src: url('../fonts/jost-5.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Jost', Helvetica sans-serif;
    color: var(--defaultTextColor);
    font-weight: 400;
    font-size: var(--defaultFontSize);
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 87.5;
    line-height: 1.56;
    margin: 0;
}

body.modalOpenScroll {
    overflow: hidden;
}

.contentContainer {
    width: 100%;
    max-width: 1320px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}

/* LAYOUT */

h1, h1 b, h2, h2 b, h3, h3 b, h4, h4 b {
    font-family: 'Jost', Helvetica sans-serif;
    font-weight: 600;
    color: var(--secondaryColor);
}

h1 {
    font-size: 2.625rem;
    line-height: 4.25rem;
    margin-top: 0;
    margin-bottom: 0;
}

h2, h2 b, h3, h3 b {
    font-size: 1.375rem;
    line-height: 1.44;
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
}

h4 {
    font-size: 1.0625rem;
    line-height: 1.44;
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
}

p {
    margin-top: 0;
}

button {
    font-family: 'Jost', Helvetica sans-serif;
    font-size: var(--buttonFontSize);
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 120%;
    text-transform: uppercase;
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: transparent;
    border: none;
    padding: 0;
}

a, a:visited {
    position: relative;
    color: var(--primaryColor);
    text-decoration: underline;
    transition: all 0.3s ease-in-out;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

a:hover {
    color: var(--primaryHover);
    text-decoration: underline;
}

.button, .button:visited {
    text-decoration: none;
    text-transform: uppercase;
    background-color: var(--primaryColor);
    border: 1px solid var(--primaryColor);
    color: #FFFFFF;
    font-weight: 600;
    font-size: var(--buttonFontSize);
    line-height: 120%;
    letter-spacing: normal;
    padding: 12px 32px;
    border-radius: var(--defaultBorderRadius);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.button:hover {
    text-decoration: none;
    background-color: var(--primaryHover);
    border: 1px solid var(--primaryHover);
    color: #FFFFFF;
}

.button.outline, .button.outline:visited {
    background-color: transparent;
}

a, a:visited {
    font-family: "Jost", system-ui, sans-serif;
    color: var(--primaryColor);
}

button:focus-visible, a:focus-visible, .button:focus-visible {
    outline: 2px solid var(--primaryColor);
    outline-offset: 2px;
}

hr {
    border-top: 1px solid var(--secondaryColor);
    opacity: 0.2;
    margin: var(--mediumSpace) 0;
}
ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
}
li {
    padding-left:12px;
    position: relative;
    margin-bottom: 16px;
}
li:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "•";
}
#subtitle {
    font-size: 16px;
}

/* Header */
header {
    position: sticky;
    top: 0;
    background-color: #FFFFFF;
    z-index: 500;
}

header .contentContainer {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex-direction: row;
    gap: 88px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.logo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.logo img {
    width: auto;
    max-height: 66px;
    height: 100%;
    align-items: center;
}

#headerimg {
    width: 100%;
    max-width: var(--fullWidth);
    margin: 0 auto;
}

#headerimg div {
    display: flex;
    width: 100%;
    max-height: 500px;
}

#headerimg img {
    display: flex;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.headerJobTitle {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--secondaryColor);
}

/* Share and Links */
#shareAndLinks {
    background-color: var(--primaryColor);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: var(--mediumSpace);
    color: #FFFFFF;
    padding: 14px 0;
    width: 100%;
    max-width: var(--fullWidth);
    margin: 0 auto;
}

#shareAndLinks .contentContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: var(--mediumSpace);
    row-gap: var(--smallSpace);
    justify-content: space-between;
}

.shareUsContainer {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 24px;
    align-items: center;
}

#shareUsItemWrapper {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 18px;
    align-items: center;
}

#shareUsItemWrapper a {
    display: flex;
}

#shareAndLinks a {
    color: #FFFFFF;
}

#shareAndLinks a:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

#shareAndLinks a:hover {
    opacity: 0.8;
}

.textlinks {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    column-gap: var(--mediumSpace);
    row-gap: var(--smallSpace);
    align-items: center;
}

.textlinks a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    text-transform: none;
    font-weight: 500;
    font-size: var(--buttonFontSize);
    line-height: 120%;
}

.textlinks a:hover {
    opacity: 0.8;
}

/* Title and Meta */
#titleAndMeta {
    margin-top: 60px;
    margin-bottom: var(--mediumSpace);
}

.jobSubTitle {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    color: var(--secondaryColor);
    padding: 12px 0 16px;
    display: block;
}

.jobMetaContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--smallSpace);
    margin-top: 16px;
    margin-bottom: var(--mediumSpace);
}

.jobMetaContainer > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: rgba(0, 153, 75, 0.2);
    padding: 4px 12px;
    border-radius: var(--defaultBorderRadius);
    align-items: center;
    gap: 12px;
}

.jobMetaContainer > div svg {
    flex-shrink: 0;
}

/* Tasks, Skills and Additional Info */
#tasksAndSkills {
    padding-top: var(--mediumSpace);
    padding-bottom: var(--mediumSpace);
}

#additionalInfos {
    padding-bottom: var(--mediumSpace);
}

#tasksAndSkills .contentContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--mediumSpace);
}

.tasks, .skills, .additionalInfoContainer {
    flex: 1 1 0;
    min-width: 0;
    border-radius: var(--largeBorderRadius);
    padding: var(--mediumSpace);
    background: rgba(252, 250, 250, 1);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.tasks ul:last-child,
.tasks ul:last-child li:last-child,
.skills ul:last-child,
.skills ul:last-child li:last-child,
.additionalInfoContainer ul:last-child,
.additionalInfoContainer ul:last-child li:last-child {
    margin-bottom: 0;
}

/* Benefits */
#benefits {
    margin-top: var(--mediumSpace);
}

.benefitImgContainer {
    width: 100%;
    height: 140px;
    max-width: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 825px) {
    .benefit {
        width: 100%;
        margin-right: 0;
    }

    .swiper {
        max-width: 84%;
    }
}

@media screen and (max-width: 520px) {
    .swiper-wrapper {
        padding: 0;
    }

    .swiper-button-prev, .swiper-button-next {
        display: none !important;
    }

    .swiper {
        max-width: 100%;
    }
}

@media screen and (min-width: 826px) {
    .swiper-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--mediumSpace);
        align-items: stretch;
        padding: 0;
    }

    .mySwiper .swiper-slide {
        width: auto !important;
        height: auto !important;
    }

    .custom-swiper-pagination {
        display: none;
    }

    .swiper-button-prev, .swiper-button-next,
    .custom-swiper-pagination {
        display: none !important;
    }
}

@media screen and (min-width: 826px) and (max-width: 950px) {
    .benefitImgContainer {
        max-width: 80px;
        height: 80px;
    }
    .benefit img {
        width: 80px;
    }
}

@media screen and (max-width: 540px) {
    .benefitImgContainer {
        max-width: 80px;
        height: 80px;
    }
    .benefit img {
        width: 80px;
    }
}

.benefit {
    background-color: var(--secondaryColor);
    padding: 0 20px;
    border-radius: var(--largeBorderRadius);
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
    color: #fff;
    height: 100%;
}

.benefitText {
    padding: 16px 0;
}

#benefits .button, #benefits .button:visited {
    margin-top: var(--mediumSpace);
    color: var(--primaryColor);
}

#benefits .button:hover {
    color: #FFFFFF;
    background-color: var(--primaryHover);
}

.swiper-button-prev::after, .swiper-rtl .swiper-button-next::after,
.swiper-button-next::after, .swiper-rtl .swiper-button-prev::after {
    display: none;
}

.swiper-button-prev, .swiper-button-next {
    color: var(--primaryColor);
    bottom: 130px;
    top: inherit;
}

.swiper-button-prev {
    left: 0;
}

.swiper-button-next {
    right: 0;
}

.custom-swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--mediumSpace);
}

.custom-swiper-pagination .swiper-pagination-bullet {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    color: var(--primaryColor);
    font-weight: bold;
    border-radius: var(--defaultBorderRadius);
    cursor: pointer;
    transition: background 0.2s ease;
    border: 1px solid var(--primaryColor);
    opacity: 1;
}

.custom-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--primaryColor);
    color: #FFFFFF;
}

/* Further Details, Contact, Maps */
#furtherDetails {
    width: 100%;
    max-width: var(--fullWidth);
    margin: var(--largeSpace) auto 0;
    background: #fafafa;
    padding: 0 0 var(--largeSpace);
}

.further-imageContainer {
    display: flex;
    width: 100%;
    height: 500px;
}

.further-imageContainer img {
    width: 100%;
    object-fit: cover;
    object-position: 30% center;
}

.contactAndLocation {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--mediumSpace);
    margin-top: -140px;
}

.contactAndLocation > div {
    flex: 1 1 0;
    min-width: 0;
    border-radius: var(--largeBorderRadius);
    background-color: #FFFFFF;
    padding: var(--mediumSpace);
    box-shadow: 0 0 10px 0 #0000001A;
}

.locationButton {
    display: inline-flex;
    gap: 12px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.locationButton:hover {
    text-decoration: none;
}

#contacts {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contactHolder {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    column-gap: 20px;
    row-gap: var(--mediumSpace);
    margin-top: var(--smallSpace);
}

.contactHolder > div {
    flex: 1 1 0;
    min-width: 0;
}

.contactName {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.contactAdditional {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 20px;
}

.contactAdditional button, .contactAdditional a,
.contactAdditional button:visited, .contactAdditional a:visited {
    background: none;
    border: none;
    padding: 0;
    text-decoration: none;
    color: var(--primaryColor);
    display: inline-flex;
    gap: 12px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.contactAdditional button:hover, .contactAdditional a:hover {
    color: var(--primaryHover);
}

.contactAdditional button svg, .contactAdditional a svg {
    flex-shrink: 0;
}

#place {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.placeDetails {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 20px;
    align-items: flex-end;
    justify-content: space-between;
}

#place iframe {
    aspect-ratio: 3 / 1;
    width: 100%;
    height: auto;
}

#applicationCta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mediumSpace);
    margin-top: var(--largeSpace);
}

/* About & Video */
#about {
    padding: var(--largeSpace) 0 var(--mediumSpace);
}

.aboutContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--mediumSpace);
}

.aboutTextContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--mediumSpace);
}

.aboutContainer > div {
    flex: 1 1 0;
    min-width: 0;
}

.aboutMoreLink a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--buttonFontSize);
    line-height: 120%;
}

.video-wrapper {
    position: relative;
    max-width: 1380px;
    margin: 0 auto;
    width: 100%;
    cursor: pointer;
}

.video-wrapper iframe,
.video-wrapper .video-thumbnail {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.video-thumbnail {
    cursor: pointer;
    display: block;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.play-button {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    color: var(--secondaryColor);
    position: absolute;
    cursor: pointer;
    transition: .3s ease;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    border-radius: 50%;
}

.play-button:hover {
    color: var(--secondaryHover);
}

.play-button:focus-visible {
    color: var(--primaryColor);
}

.play-button svg {
    height: 100px;
    width: 101px;
}

/* Similar Jobs */
#similarJobs {
    padding: var(--largeSpace) 0 var(--mediumSpace);
}

#jobs {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#jobs a {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--smallSpace);
    width: 100%;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: var(--defaultTextColor);
    border-radius: var(--defaultBorderRadius);
    overflow: hidden;
}

#jobs a:hover {
    text-decoration: none;
}

.similar-imageContainer {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
}

.similar-imageContainer img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.similar-textContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--smallSpace);
    padding: 12px 10px 12px 0;
}

.similar-jobTitle {
    display: block;
    font-weight: 500;
    font-size: var(--defaultFontSize);
}

.similar-jobSubtitle {
    font-size: var(--smallFontSize);
    font-weight: 400;
    display: block;
    margin-top: 3px;
}

.similar-jobMeta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

.similar-jobMeta > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: rgba(0, 153, 75, 0.2);
    padding: 4px 8px;
    border-radius: var(--defaultBorderRadius);
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
    line-height: 100%;
}

.similar-jobMeta > div svg {
    flex-shrink: 0;
}

@media (min-width: 580px) {
    .similar-imageContainer {
        max-width: 208px;
        width: 40%;
    }
}

/* Spontanbewerbung CTA */
#spontanCta {
    margin-top: var(--mediumSpace);
    margin-bottom: var(--largeSpace);
}

#spontanCta .contentContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mediumSpace);
}

.spontanCtaContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--smallSpace);
    background-color: var(--secondaryColor);
    padding: var(--mediumSpace);
    border-radius: var(--defaultBorderRadius);
    color: #FFFFFF;
}

.spontanCtaTitleContainer {
    display: flex;
    flex-direction: row;
    gap: var(--smallSpace);;
    align-items: center;
}

.spontanCtaTitleContainer h4 {
    color: #FFFFFF;
}

.spontanCtaTitleContainer svg {
    flex-shrink: 0;
}

.spontanCtaContainer .button.outline {
    border-color: #FFFFFF;
}

.spontanCtaContainer .button.outline:hover {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    color: var(--secondaryHover);
}

/* Footer */
footer {
    border-top: 1px solid #ededed;
    background: #fafafa;
    padding: 3em 0;
    font-size: 0.85rem;
    width: 100%;
    max-width: var(--fullWidth);
    margin: 0 auto;
}

footer .contentContainer {
    display: flex;
    justify-content: space-between;
    gap: var(--mediumSpace);
    align-items: flex-start;
    flex-wrap: nowrap;
}

footer .footerFirstColumn {
    display: flex;
    flex-direction: column;
    gap: var(--mediumSpace);
}

footer .footerSecondColumn {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

footer a, footer a:visited, footer a:hover {
    text-decoration: none;
}

footer ul {
    margin: 0;
}

footer .socialFollow {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
}

footer .socialFollow li::before {
    display: none;
}

footer .socialFollow li {
    padding-left: 0;
    margin: 0;
    overflow: visible;
}

footer .follow {
    display: inline-flex;
    color: var(--secondaryColor);
}

footer .follow:hover {
    color: var(--secondaryHover);
}

footer .footerLinks {
    gap: 1rem;
    padding-left: 0;
    flex-direction: row;
}

footer .footerLinks li::before {
    display: none;
}

footer .footerLinks li {
    padding-left: 0;
    margin: 0;
}

footer p {
    margin: 0;
}

footer .footerLinks a, footer .footerLinks a:visited {
    color: #00843E;
}

footer .footerLinks a:hover {
    color: #00381a;
}

/* Modal Windows */
dialog {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    padding: 0;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    border: 0;
    z-index: 600;
    background-color: rgba(20, 30, 20, 0.4);
    overflow: hidden;
    backdrop-filter: blur(2px);
}

dialog[open] {
    opacity: 1;
    transform: translateY(0);
}

dialog::backdrop {
    background-color: rgb(0 0 0 / 0%);
    transition: background-color 0.2s ease-out;
}

dialog[open]::backdrop {
    background-color: rgb(0 0 0 / 25%);
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

dialog[open] {
    animation: fade-in .2s ease-out;
}

dialog.closing {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(270deg, rgba(0, 95, 170, 1) 0%, #154F90 100%);
    padding: var(--mediumSpace);
    border-radius: var(--largeBorderRadius);
    width: calc(100% - 3rem);
    max-width: 724px;
    box-shadow: 0 4px 128px 0 rgba(10, 10, 130, 0.1);
    z-index: 220;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.close-button, .close-button:active, .close-button:visited {
    color: #FFFFFF;
    position: absolute;
    top: var(--mediumSpace);
    right: var(--mediumSpace);
    cursor: pointer;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    border: none;
    outline: 0;
    background: transparent;
    padding: 0;
}

.close-button:hover {
    background-color: #FF0000;
}

#modalJobabo .modal-content {
    padding: 0 !important;
}

/*  Contact form */
#formContact {
    color: #FFFFFF;
}

#formContact h3 {
    color: #FFFFFF;
}

.contactFormConfirmation,
.grecaptcha-badge {
    display: none;
}

.contactFormWrapper {
    border-radius: 0;
    padding: 60px;
}

.formWrapper {
    display: grid;
    gap: 0 var(--mediumSpace);
    grid-template-columns: 1fr;
    margin-bottom: var(--mediumSpace);
    position: relative;
}

.formTitleContainer {
    display: flex;
    gap: var(--mediumSpace);
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--mediumSpace);
    max-width: calc(100% - 64px);
}

.formTitleContainer svg {
    flex-shrink: 0;
}

form label {
    padding: 0 0 10px;
}

form input[type="text"],
form input[type="email"],
form textarea {
    font-family: 'Jost', Helvetica sans-serif;
    font-size: var(--defaultFontSize);
    line-height: 26px;
    border: 0;
    border-radius: var(--defaultBorderRadius);
    outline: none;
    padding: 10px;
    width: 100%;
    box-shadow: 0 0 12px 0 #0000001A;
    background: rgba(255,255,255,0.2);
    color: #FFFFFF;
}

form input[type="text"]:focus-visible,
form input[type="email"]:focus-visible,
form textarea:focus-visible {
    outline: 2px solid #FFFFFF;
}

form textarea {
    min-height: 72px;
    resize: vertical;
    vertical-align: top;
}

.parsley-errors-list {
    margin: 5px 0 0 0;
    padding: 0;
}

.parsley-errors-list li {
    list-style-type: none;
    padding: 0;
    margin: 0;
    color: #FF0000;
}

/* For Screenreaders */
.sr-only {
    display: none;
}

.print-only {
    display: none;
}

/* Responsive */
@media only screen and (max-width: 900px) {
    :root {
        --largeSpace: 60px;
        --mediumSpace: 30px;
        --smallSpace: 16px;
        --defaultFontSize: 1rem;
        --smallFontSize: 0.875rem;
        --buttonFontSize: 0.95rem;
    }
    h1 {
        font-size: 1.625rem;
        line-height: 2.25rem;
    }
    h2, h2 b, h3, h3 b {
        font-size: 1.275rem;
    }
    #tasksAndSkills .contentContainer,
    .contactAndLocation,
    .aboutContainer,
    .textlinks {
        flex-direction: column;
    }
    #spontanCta .contentContainer {
        grid-template-columns: 1fr;
    }
    header .contentContainer {
        justify-content: space-between;
        gap: var(--smallSpace);
    }
    .headerJobTitle {
        display: none;
    }
}

@media only screen and (min-width: 901px) and (max-width: 1274px) {
    .contactHolder {
        flex-direction: column;
    }
    .placeDetails {
        flex-direction: column;
        align-items: flex-start;
    }
    #place iframe {
        aspect-ratio: 8 / 5;
    }
}

@media only screen and (max-width: 825px) {
    .benefitMoreLink {
        text-align: center;
    }
}

@media only screen and (max-width: 600px) {
    :root {
        --largeSpace: 48px;
        --mediumSpace: 25px;
        --smallSpace: 12px;
    }
    .logo img {
        max-height: 44px;
    }
    header .button {
        font-size: calc(var(--buttonFontSize) - 0.2rem);
        padding: 8px var(--smallSpace) ;
    }
    .contactHolder,
    #shareAndLinks .contentContainer,
    footer .contentContainer {
        flex-direction: column;
    }
    .placeDetails {
        flex-direction: column;
        align-items: flex-start;
    }
    .textlinks {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .similar-imageContainer {
        display: none;
    }
    .similar-textContainer {
        padding: var(--mediumSpace);
    }
    #place iframe {
        aspect-ratio: 2 / 1;
    }
}

@media only screen and (max-width: 350px) {
    :root {
        --defaultFontSize: 0.875rem;
        --buttonFontSize: 0.825rem;
    }
    h1 {
        font-size: 1.25rem;
        line-height: 2.25rem;
    }
    h2, h2 b, h3, h3 b {
        font-size: 1rem;
    }
    .spontanCtaTitleContainer {
        flex-direction: column;
        align-items: flex-start;
    }
    .benefit img {
        width: 60px;
    }
}