html {
    -webkit-text-size-adjust: 100%;
    line-height: 1.15;
    font-family: 'Ubuntu', sans-serif;
}

body {
    margin: 0;

}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b, strong {
    font-weight: bolder
}

code, kbd, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    line-height: 1.15;
    margin: 0
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

[type=button], [type=submit], button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox], [type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

details {
    display: block
}

summary {
    display: list-item
}

[hidden], template {
    display: none
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
    margin: 0
}

button {
    background-color: transparent;
    background-image: none
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color
}

fieldset, ol, ul {
    margin: 0;
    padding: 0
}

ol, ul {
    list-style: none
}

html {
    line-height: 1.5
}

*, :after, :before {
    border: 0 solid #e2e8f0;
    box-sizing: border-box
}

hr {
    border-top-width: 1px
}

img {
    border-style: solid
}

textarea {
    resize: vertical
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #a0aec0
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #a0aec0
}

input::placeholder, textarea::placeholder {
    color: #a0aec0
}

[role=button], button {
    cursor: pointer
}

table {
    border-collapse: collapse
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

button, input, optgroup, select, textarea {
    color: inherit;
    line-height: inherit;
    padding: 0
}

code, kbd, pre, samp {
    font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
}

audio, canvas, embed, iframe, img, object, svg, video {
    display: block;
    vertical-align: middle
}

img, video {
    height: auto;
    max-width: 100%
}

.container {
    width: 100%
}

@media (min-width:640px) {
    .container {
        max-width: 640px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 768px
    }
}

@media (min-width:1024px) {
    .container {
        max-width: 1024px
    }
}

@media (min-width:1280px) {
    .container {
        max-width: 1280px
    }
}

.bg-gray-rlight {
    background-color: var(--color-gray-rlight)
}

.hover\:bg-white:hover {
    background-color: var(--color-white)
}

.hover\:bg-gray-rlight:hover {
    background-color: var(--color-gray-rlight)
}

.border-gray-rlight {
    border-color: var(--color-gray-rlight)
}

.border-b {
    border-bottom-width: 1px
}

.cursor-pointer {
    cursor: pointer
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.flex {
    display: flex
}

.table {
    display: table
}

.hidden {
    display: none
}

.flex-row {
    flex-direction: row
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.items-center {
    align-items: center
}

.self-center {
    align-self: center
}

.justify-center {
    justify-content: center
}

.flex-1 {
    flex: 1 1 0%
}

.flex-auto {
    flex: 1 1 auto
}

.flex-shrink-0 {
    flex-shrink: 0
}

.h-0 {
    height: 0
}

.h-auto {
    height: auto
}

.h-full {
    height: 100%
}

.text-2xsmall {
    font-size: var(--typo-size-2xsmall)
}

.text-xsmall {
    font-size: var(--typo-size-xsmall)
}

.text-small {
    font-size: var(--typo-size-small)
}

.text-base {
    font-size: var(--typo-size-base)
}

.m-0 {
    margin: 0
}

.m-2 {
    margin: .5rem
}

.mx-0 {
    margin-left: 0;
    margin-right: 0
}

.my-1 {
    margin-bottom: .25rem;
    margin-top: .25rem
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.my-gap {
    margin-bottom: var(--grid-gap);
    margin-top: var(--grid-gap)
}

.-mx-2 {
    margin-left: -.5rem;
    margin-right: -.5rem
}

.-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem
}

.mb-0 {
    margin-bottom: 0
}

.ml-0 {
    margin-left: 0
}

.mt-1 {
    margin-top: .25rem
}

.mb-1 {
    margin-bottom: .25rem
}

.mr-2 {
    margin-right: .5rem
}

.mr-5 {
    margin-right: 2rem;
}

.fuu {
    text-align: center;
}

.mb-2 {
    margin-bottom: .5rem
}

.ml-2 {
    margin-left: .5rem
}

.mt-4 {
    margin-top: 1rem
}

.mb-4 {
    margin-bottom: 1rem
}

.ml-4 {
    margin-left: 1rem
}

.mt-8 {
    margin-top: 2rem
}

.ml-10 {
    margin-left: 2.5rem
}

.mt-16 {
    margin-top: 4rem
}

.mb-16 {
    margin-bottom: 4rem
}

.mr-auto {
    margin-right: auto
}

.ml-auto {
    margin-left: auto
}

.mb-gap {
    margin-bottom: var(--grid-gap)
}

.mt-xs {
    margin-top: var(--spacing-xsmall)
}

.mb-xs {
    margin-bottom: var(--spacing-xsmall)
}

.mt-sm {
    margin-top: var(--spacing-small)
}

.mb-sm {
    margin-bottom: var(--spacing-small)
}

.mt-bs {
    margin-top: var(--spacing-base)
}

.mb-bs {
    margin-bottom: var(--spacing-base)
}

.mt-md {
    margin-top: var(--spacing-medium)
}

.mb-md {
    margin-bottom: var(--spacing-medium)
}

.mt-lg {
    margin-top: var(--spacing-large)
}

.mb-lg {
    margin-bottom: var(--spacing-large)
}

.ml-1\/12 {
    margin-left: 8.33333%
}

.min-h-screen {
    min-height: 100vh
}

.opacity-50 {
    opacity: .5
}

.hover\:opacity-100:hover {
    opacity: 1
}

.p-2 {
    padding: .5rem
}

.p-4 {
    padding: 1rem
}

.p-6 {
    padding: 1.5rem
}

.p-gap {
    padding: var(--grid-gap)
}

.px-2 {
    padding-left: .5rem;
    padding-right: .5rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.py-5 {
    padding-bottom: 1.25rem;
    padding-top: 1.25rem
}

.py-sm {
    padding-bottom: var(--spacing-small);
    padding-top: var(--spacing-small)
}

.pt-2 {
    padding-top: .5rem
}

.pb-4 {
    padding-bottom: 1rem
}

.pb-10 {
    padding-bottom: 2.5rem
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.top-0 {
    top: 0
}

.right-0 {
    right: 0
}

.bottom-0 {
    bottom: 0
}

.left-0 {
    left: 0
}

.resize {
    resize: both
}

.text-right {
    text-align: right
}

.text-white {
    color: var(--color-white)
}

.text-gray-dark {
    color: var(--color-gray-dark)
}

.text-gray-light {
    color: var(--color-gray-light)
}

.uppercase {
    text-transform: uppercase
}

.underline {
    text-decoration: underline
}

.hover\:no-underline:hover {
    text-decoration: none
}

.visible {
    visibility: visible
}

.invisible {
    visibility: hidden
}

.w-4 {
    width: 1rem
}

.w-auto {
    width: auto
}

.w-1\/12 {
    width: 8.333333%
}

.w-2\/12 {
    width: 16.666667%
}

.w-3\/12 {
    width: 25%
}

.w-4\/12 {
    width: 33.333333%
}

.w-5\/12 {
    width: 41.666667%
}

.w-6\/12 {
    width: 50%
}

.w-7\/12 {
    width: 58.333333%
}

.w-8\/12 {
    width: 66.666667%
}

.w-9\/12 {
    width: 75%
}

.w-10\/12 {
    width: 83.333333%
}

.w-11\/12 {
    width: 91.666667%
}

.w-full {
    width: 100%
}

.w-1\/12-x {
    width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*1)
}

.w-2\/12-x {
    width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*2)
}

.w-3\/12-x {
    width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*3)
}

.w-4\/12-x {
    width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*4)
}

.w-5\/12-x {
    width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*5)
}

.w-6\/12-x {
    width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*6)
}

.w-7\/12-x {
    width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*7)
}

.w-8\/12-x {
    width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*8)
}

.w-9\/12-x {
    width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*9)
}

.w-10\/12-x {
    width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*10)
}

.w-11\/12-x {
    width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*11)
}

.z-10 {
    z-index: 10
}

.transform {
    --transform-translate-x: 0;
    --transform-translate-y: 0;
    --transform-rotate: 0;
    --transform-skew-x: 0;
    --transform-skew-y: 0;
    --transform-scale-x: 1;
    --transform-scale-y: 1;
    -webkit-transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
    transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))
}

.transition-all {
    transition-property: all
}

.transition {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, -webkit-transform;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, -webkit-transform
}

.duration-200 {
    transition-duration: .2s
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@-webkit-keyframes ping {
    75%, to {
        opacity: 0;
        -webkit-transform: scale(2);
        transform: scale(2)
    }
}

@keyframes ping {
    75%, to {
        opacity: 0;
        -webkit-transform: scale(2);
        transform: scale(2)
    }
}

@-webkit-keyframes pulse {
    50% {
        opacity: .5
    }
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 1em
}

.h1, h1 {
    color: var(--color-primary);
    font-size: var(--typo-size-large);
    font-weight: 700
}

@media (min-width:768px) {
    .h1, h1 {
        font-size: var(--typo-size-xlarge)
    }
}

.h2, h2 {
    color: hsl(32.97deg 83.27% 43.68%);
    font-size: var(--typo-size-medium)
}

@media (min-width:768px) {
    .h2, h2 {
        font-size: var(--typo-size-large)
    }
}

.h3, h3 {
    color: var(--color-gray-medium);
    font-size: var(--typo-size-medium)
}

.h4, .h5, h4, h5 {
    font-size: var(--typo-size-base)
}

.h4, .h5, .h6, h4, h5, h6 {
    color: var(--color-gray-medium)
}

.h6, .tag, h6 {
    font-size: var(--typo-size-small)
}

.tag {
    align-items: center;
    display: flex;
    font-weight: 700;
    letter-spacing: 1.75;
    line-height: 16, 41;
    text-transform: uppercase
}

@font-face {
    font-family: swiper-icons;
    font-style: normal;
    font-weight: 400;
    src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff")
}

:root {
    --swiper-theme-color: #007aff
}

.swiper-container {
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    z-index: 1
}

.swiper-container-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    width: 100%;
    z-index: 1
}

.swiper-container-android .swiper-slide, .swiper-wrapper {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.swiper-container-multirow>.swiper-wrapper {
    flex-wrap: wrap
}

.swiper-container-multirow-column>.swiper-wrapper {
    flex-direction: column;
    flex-wrap: wrap
}

.swiper-container-free-mode>.swiper-wrapper {
    margin: 0 auto;
    transition-timing-function: ease-out
}

.swiper-container-pointer-events {
    touch-action: pan-y
}

.swiper-container-pointer-events.swiper-container-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    height: 100%;
    position: relative;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    width: 100%
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
    height: auto
}

.swiper-container-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: height, -webkit-transform;
    transition-property: transform, height;
    transition-property: transform, height, -webkit-transform
}

.swiper-container-3d {
    -webkit-perspective: 1200px;
    perspective: 1200px
}

.swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10
}

.swiper-container-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(270deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-css-mode>.swiper-wrapper {
    -ms-overflow-style: none;
    overflow: auto;
    scrollbar-width: none
}

.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-container-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper {
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory
}

.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper {
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next, .swiper-button-prev {
    align-items: center;
    color: var(--swiper-theme-color);
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
    cursor: pointer;
    display: flex;
    height: var(--swiper-navigation-size);
    justify-content: center;
    margin-top: calc(0px - var(--swiper-navigation-size)/2);
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size)/44*27);
    z-index: 10
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    cursor: auto;
    opacity: .35;
    pointer-events: none
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    font-variant: normal;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none !important;
    text-transform: none
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    left: 10px;
    right: auto
}

.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
    content: "prev"
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    left: auto;
    right: 10px
}

.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
    content: "next"
}

.swiper-button-next.swiper-button-white, .swiper-button-prev.swiper-button-white {
    --swiper-navigation-color: #fff
}

.swiper-button-next.swiper-button-black, .swiper-button-prev.swiper-button-black {
    --swiper-navigation-color: #000
}

.swiper-button-lock {
    display: none
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: opacity .3s;
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    font-size: 0;
    overflow: hidden
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    position: relative;
    -webkit-transform: scale(.33);
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active, .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    -webkit-transform: scale(.66);
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    -webkit-transform: scale(.33);
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    -webkit-transform: scale(.66);
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    -webkit-transform: scale(.33);
    transform: scale(.33)
}

.swiper-pagination-bullet {
    background: #000;
    border-radius: 50%;
    display: inline-block;
    height: 8px;
    opacity: .2;
    width: 8px
}

button.swiper-pagination-bullet {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    background: var(--swiper-theme-color);
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    opacity: 1
}

.swiper-container-vertical>.swiper-pagination-bullets {
    right: 10px;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    display: block;
    margin: 6px 0
}

.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 8px
}

.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: transform .2s, top .2s
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 4px
}

.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: transform .2s, left .2s
}

.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: transform .2s, right .2s
}

.swiper-pagination-progressbar {
    background: rgba(0, 0, 0, .25);
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-theme-color);
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    width: 100%
}

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    -webkit-transform-origin: right top;
    transform-origin: right top
}

.swiper-container-horizontal>.swiper-pagination-progressbar, .swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    height: 4px;
    left: 0;
    top: 0;
    width: 100%
}

.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical>.swiper-pagination-progressbar {
    height: 100%;
    left: 0;
    top: 0;
    width: 4px
}

.swiper-pagination-white {
    --swiper-pagination-color: #fff
}

.swiper-pagination-black {
    --swiper-pagination-color: #000
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    background: rgba(0, 0, 0, .1);
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none
}

.swiper-container-horizontal>.swiper-scrollbar {
    bottom: 3px;
    height: 5px;
    left: 1%;
    position: absolute;
    width: 98%;
    z-index: 50
}

.swiper-container-vertical>.swiper-scrollbar {
    height: 98%;
    position: absolute;
    right: 3px;
    top: 1%;
    width: 5px;
    z-index: 50
}

.swiper-scrollbar-drag {
    background: rgba(0, 0, 0, .5);
    border-radius: 10px;
    height: 100%;
    left: 0;
    position: relative;
    top: 0;
    width: 100%
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    text-align: center;
    width: 100%
}

.swiper-zoom-container>canvas, .swiper-zoom-container>img, .swiper-zoom-container>svg {
    max-height: 100%;
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move
}

.swiper-lazy-preloader {
    -webkit-animation: swiper-preloader-spin 1s linear infinite;
    animation: swiper-preloader-spin 1s linear infinite;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top: 4px solid transparent;
    box-sizing: border-box;
    height: 42px;
    left: 50%;
    margin-left: -21px;
    margin-top: -21px;
    position: absolute;
    top: 50%;
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    width: 42px;
    z-index: 10
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@-webkit-keyframes swiper-preloader-spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes swiper-preloader-spin {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.swiper-container .swiper-notification {
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: -1000
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-container-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-container-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-container-cube {
    overflow: visible
}

.swiper-container-cube .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 100%;
    pointer-events: none;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    visibility: hidden;
    width: 100%;
    z-index: 1
}

.swiper-container-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next+.swiper-slide, .swiper-container-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 0
}

.swiper-container-cube .swiper-cube-shadow {
    bottom: 0;
    height: 100%;
    left: 0;
    opacity: .6;
    position: absolute;
    width: 100%;
    z-index: 0
}

.swiper-container-cube .swiper-cube-shadow:before {
    background: #000;
    bottom: 0;
    content: "";
    -webkit-filter: blur(50px);
    filter: blur(50px);
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.swiper-container-flip {
    overflow: visible
}

.swiper-container-flip .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none;
    z-index: 1
}

.swiper-container-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 0
}

@font-face {
    font-family: Univia;
    font-style: normal;
    font-weight: 400;
    src: url(../../../../themes/hwl/assets/fonts/univia/Univia-Regular.woff2) format("woff2"), url(../../../../themes/hwl/assets/fonts/univia/Univia-Regular.woff) format("woff"), url(../../../../themes/hwl/assets/fonts/univia/Univia-Regular.html) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Univia;
    font-style: normal;
    font-weight: 500;
    src: url(../../../../themes/hwl/assets/fonts/univia/univiapro-medium-webfont.woff2) format("woff2"), url(../../../../themes/hwl/assets/fonts/univia/univiapro-medium-webfont.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Univia;
    font-style: normal;
    font-weight: 700;
    src: url(../../../../themes/hwl/assets/fonts/univia/Univia-Bold.woff2) format("woff2"), url(../../../../themes/hwl/assets/fonts/univia/Univia-Bold.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 100;
    src: url(../../../../themes/hwl/assets/fonts/roboto/roboto-v20-latin-ext_latin_cyrillic-100.woff2) format("woff2"), url(../../../../themes/hwl/assets/fonts/roboto/roboto-v20-latin-ext_latin_cyrillic-100.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    src: url(../../../../themes/hwl/assets/fonts/roboto/roboto-v20-latin-ext_latin_cyrillic-300.woff2) format("woff2"), url(../../../../themes/hwl/assets/fonts/roboto/roboto-v20-latin-ext_latin_cyrillic-300.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    src: url(../../../../themes/hwl/assets/fonts/roboto/roboto-v20-latin-ext_latin_cyrillic-regular.woff2) format("woff2"), url(../../../../themes/hwl/assets/fonts/roboto/roboto-v20-latin-ext_latin_cyrillic-regular.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: italic;
    font-weight: 400;
    src: url(../../../../themes/hwl/assets/fonts/roboto/roboto-v20-latin-ext_latin_cyrillic-italic.woff2) format("woff2"), url(../../../../themes/hwl/assets/fonts/roboto/roboto-v20-latin-ext_latin_cyrillic-italic.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    src: url(../../../../themes/hwl/assets/fonts/roboto/roboto-v20-latin-ext_latin_cyrillic-500.woff2) format("woff2"), url(../../../../themes/hwl/assets/fonts/roboto/roboto-v20-latin-ext_latin_cyrillic-500.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    src: url(../../../../themes/hwl/assets/fonts/roboto/roboto-v20-latin-ext_latin_cyrillic-700.woff2) format("woff2"), url(../../../../themes/hwl/assets/fonts/roboto/roboto-v20-latin-ext_latin_cyrillic-700.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 900;
    src: url(../../../../themes/hwl/assets/fonts/roboto/roboto-v20-latin-ext_latin_cyrillic-900.woff2) format("woff2"), url(../../../../themes/hwl/assets/fonts/roboto/roboto-v20-latin-ext_latin_cyrillic-900.woff) format("woff")
}

:root {
    --h-hwl-blue: 210;
    --s-hwl-blue: 100%;
    --l-hwl-blue: 30%;
    --h-hwl-red: 3;
    --s-hwl-red: 80%;
    --l-hwl-red: 49%;
    --hsl-hwl-blue: var(--h-hwl-blue), var(--s-hwl-blue), var(--l-hwl-blue);
    --hsl-hwl-red: var(--h-hwl-red), var(--s-hwl-red), var(--l-hwl-red);
    --hsl-black: 0, 0%, 0%;
    --hsl-gray-dark: var(--h-hwl-blue), 9%, 23%;
    --hsl-gray-medium: var(--h-hwl-blue), 35%, 36%;
    --hsl-gray-light: var(--h-hwl-blue), 19%, 74%;
    --hsl-gray-rlight: var(--h-hwl-blue), 19%, 94%;
    --hsl-white: 0, 0%, 100%;
    --color-hwl-blue: hsla(var(--hsl-hwl-blue), 1);
    --color-hwl-red: hsla(var(--hsl-hwl-red), 1);
    --color-primary: #DB591A;
    --color-secondary: var(--color-hwl-red);
    --color-black: hsla(var(--hsl-black), 1);
    --color-gray-dark: hsla(var(--hsl-gray-dark), 1);
    /*--color-gray-medium: hsla(var(--hsl-gray-medium), 1);*/
    --color-gray-light: hsla(var(--hsl-gray-light), 1);
    --color-gray-rlight: hsla(var(--hsl-gray-rlight), 1);
    --color-orange: #D0AD8D;
    --color-white: hsla(var(--hsl-white), 1);
    --typo-size-2xsmall: 0.75rem;
    --typo-size-xsmall: 0.8125rem;
    --typo-size-small: 0.875rem;
    --typo-size-base-small: 1;
    --typo-size-base: 1.125rem;
    --typo-size-base-large: 1.25rem;
    --typo-size-medium: 1.75rem;
    --typo-size-large: 2rem;
    --typo-size-xlarge: 2.25rem;
    --typo-size-xxlarge: 4.375rem;
    --letter-spacing: 0.1em;
    --layout-max-width: 1248px;
    --spacing-xsmall: 0.375rem;
    --spacing-small: 1rem;
    --spacing-base: 2rem;
    --spacing-medium: 4rem;
    --spacing-large: 6rem;
    --spacing-xlarge: 8rem;
    --spacing-xxlarge: 16rem;
    --spacing-xxxlarge: 22rem;
    --grid-gap: 1rem;
    --border-radius-small: 5px;
    --border-radius-medium: 8px;
    --border-radius-large: 10px;
    --box-shadow-standard: 0 10px 20px 0 rgba(0, 0, 0, 0.08), 0 0 8px 0 rgba(0, 0, 0, 0.08);
    --rotary: 10deg
}

@media (min-width:640px) {
    :root {
        --typo-size-large: 2.25rem;
        --typo-size-xlarge: 3rem
    }
}

.grid-example {
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: 9999
}

.grid-example__wrapper {
    position: relative
}

.grid-example__wrapper .paragraph--column:nth-child(2) {
    background: hsla(0, 0%, 78%, .2)
}

.grid-example .container {
    height: 100%
}

.grid-example .container .c-grid {
    flex-wrap: nowrap;
    height: 100%
}

.grid-example .container .c-grid .c-column {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.grid-example .container .c-grid .c-column:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

@-webkit-keyframes download {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes download {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes arrow-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    25% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }

    75% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes arrow-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    25% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }

    75% {
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }

    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    outline: none;
    scroll-behavior: smooth;
    scroll-margin-top: 70px
}

@media (min-width:768px) {
    * {
        scroll-margin-top: 90px
    }
}

body {
    color: var(--color-gray-dark);
    font-size: var(--typo-size-base);
    font-weight: 300;
    line-height: 1.25
}

/* logo preloader */
body.path-frontpage {
    background-image: url(static/images/logo.png);
    background-position: 50%;
    background-repeat: no-repeat
}

p {
    line-height: 1.5;
    margin-bottom: 1.5rem
}

.strong, b, strong {
    font-weight: 500
}

img {
    height: auto;
    width: 100%
}

ol, ul {
    line-height: 1.5
}

.author, time {
    color: var(--color-gray-medium);
    display: inline;
    letter-spacing: 1.8
}

nav ul {
    display: flex
}

video {
    width: 100%
}

blockquote {
    background-color: var(--color-gray-rlight);
    border-bottom-right-radius: var(--border-radius-medium);
    border-top-left-radius: var(--border-radius-medium);
    color: var(--color-gray-medium);
    display: block;
    font-size: var(--typo-size-base-large);
    font-style: italic;
    margin-bottom: var(--grid-gap);
    margin-top: calc(var(--grid-gap)*2);
    padding: calc(var(--grid-gap)*2);
    padding-left: calc(var(--grid-gap)*4);
    padding-right: calc(var(--grid-gap)*3);
    position: relative
}

blockquote>:last-child {
    margin-bottom: 0
}

blockquote:before {
    color: var(--color-gray-light);
    content: "»";
    font-size: 130px;
    font-weight: 700;
    left: 30px;
    line-height: 20px;
    margin-left: -20px;
    margin-right: 0;
    margin-top: -40px;
    position: absolute
}

.container {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(var(--layout-max-width) + var(--grid-gap)*4);
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap);
    width: 100%
}

@media (min-width:640px) {
    .container {
        padding-left: calc(var(--grid-gap)*2);
        padding-right: calc(var(--grid-gap)*2)
    }
}

@media (min-width:1024px) {
    .container {
        padding-left: calc(var(--grid-gap)*3);
        padding-right: calc(var(--grid-gap)*3)
    }
}

.container.--fluid {
    max-width: none
}

@media (min-width:768px) {
    .container.--fluid {
        max-width: none
    }
}

.c-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--grid-gap)*-1);
    margin-right: calc(var(--grid-gap)*-1)
}

.c-column {
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap)
}

.admin__tabs {
    --bg-opacity: 1;
    background-color: #edf2f7;
    background-color: rgba(237, 242, 247, var(--bg-opacity));
    border-radius: 9999px;
    display: inline-flex;
    line-height: 1;
    list-style-type: none;
    margin: 0 0 1.5rem;
    padding: .5rem;
    text-transform: uppercase;
    width: auto
}

@media (min-width:640px) {
    .admin__tabs {
        flex-direction: row
    }
}

.admin__tabs {
    font-size: 11px
}

.admin__tabs .tabs__item:not(:first-child) {
    margin-left: .5rem
}

.admin__tabs .tabs__item a {
    --text-opacity: 1;
    align-items: center;
    border-radius: 9999px;
    color: #a0aec0;
    color: rgba(160, 174, 192, var(--text-opacity));
    display: flex;
    flex-direction: row;
    padding: .5rem;
    transition-duration: .2s;
    transition-property: background-color, border-color, color, fill, stroke
}

.admin__tabs .tabs__item a[data-drupal-link-system-path]:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0AEC0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    display: block;
    height: 16px;
    margin-right: .5rem
}

.admin__tabs .tabs__item a[data-drupal-link-system-path$=edit]:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0AEC0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14 2 4 4L7 17H3v-4L14 2zM3 22h18'/%3E%3C/svg%3E")
}

.admin__tabs .tabs__item a[data-drupal-link-system-path$=delete]:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0AEC0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6'/%3E%3C/svg%3E")
}

.admin__tabs .tabs__item a[data-drupal-link-system-path$=revisions]:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0AEC0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3C/svg%3E")
}

.admin__tabs .tabs__item a[data-drupal-link-system-path$=translations]:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0AEC0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E")
}

.admin__tabs .tabs__item a[data-drupal-link-system-path$=login]:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0AEC0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v18h-6m-5-4 5-5-5-5m3.8 5H3'/%3E%3C/svg%3E")
}

.admin__tabs .tabs__item a[data-drupal-link-system-path$=password]:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0AEC0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")
}

.admin__tabs .tabs__item a[data-drupal-link-system-path$=shortcuts]:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0AEC0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")
}

.admin__tabs .tabs__item a:hover {
    --bg-opacity: 1;
    background-color: #f7fafc;
    background-color: rgba(247, 250, 252, var(--bg-opacity))
}

.admin__tabs .tabs__item--active a, .admin__tabs .tabs__item a:hover {
    --text-opacity: 1;
    color: #4a5568;
    color: rgba(74, 85, 104, var(--text-opacity))
}

.admin__tabs .tabs__item--active a {
    background-color: var(--color-white)
}

.admin__messages .messages__list {
    --bg-opacity: 1;
    background-color: #edf2f7;
    background-color: rgba(237, 242, 247, var(--bg-opacity));
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 16px;
    list-style-type: none;
    margin: 0 0 1.5rem;
    padding: .5rem
}

.admin__messages .messages__list--status {
    --bg-opacity: 1;
    --text-opacity: 1;
    background-color: #c6f6d5;
    background-color: rgba(198, 246, 213, var(--bg-opacity));
    color: #38a169;
    color: rgba(56, 161, 105, var(--text-opacity))
}

.admin__messages .messages__list--status .messages__item:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2338A169' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E")
}

.admin__messages .messages__list--warning {
    --bg-opacity: 1;
    --text-opacity: 1;
    background-color: #fefcbf;
    background-color: rgba(254, 252, 191, var(--bg-opacity));
    color: #d69e2e;
    color: rgba(214, 158, 46, var(--text-opacity))
}

.admin__messages .messages__list--warning .messages__item:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23DD6B20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h0'/%3E%3C/svg%3E")
}

.admin__messages .messages__list--error {
    --bg-opacity: 1;
    --text-opacity: 1;
    background-color: #fed7d7;
    background-color: rgba(254, 215, 215, var(--bg-opacity));
    color: #e53e3e;
    color: rgba(229, 62, 62, var(--text-opacity))
}

.admin__messages .messages__list--error .messages__item:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E53E3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h18v18H3zm12 6-6 6m0-6 6 6'/%3E%3C/svg%3E")
}

.admin__messages .messages__item {
    padding: .75rem
}

.admin__messages .messages__item em {
    margin-left: .5rem;
    margin-right: .5rem
}

.admin__messages .messages__item:before {
    display: inline-block;
    height: 16px;
    margin-right: .5rem
}

.admin__messages .messages__item:not(li:first-child):not(li:last-child) {
    margin-bottom: 1rem
}

.admin__messages .messages__item a {
    color: currentColor
}

.admin__form {
    margin-bottom: 8rem
}

.admin__form .form-item {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 1.5rem
}

@media (min-width:640px) {
    .admin__form .form-item {
        margin-bottom: 2rem
    }
}

.admin__form label {
    --text-opacity: 1;
    color: #4a5568;
    color: rgba(74, 85, 104, var(--text-opacity));
    flex: 0 1 128px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-weight: 600;
    margin-right: 1.5rem
}

.admin__form input[type=mail], .admin__form input[type=password], .admin__form input[type=text] {
    --bg-opacity: 1;
    background-color: #edf2f7;
    background-color: rgba(237, 242, 247, var(--bg-opacity))
}

.admin__form input[type=mail]:focus, .admin__form input[type=password]:focus, .admin__form input[type=text]:focus {
    --bg-opacity: 1;
    background-color: #f7fafc;
    background-color: rgba(247, 250, 252, var(--bg-opacity))
}

.admin__form input[type=mail], .admin__form input[type=password], .admin__form input[type=text] {
    --border-opacity: 1;
    border-color: #edf2f7;
    border-color: rgba(237, 242, 247, var(--border-opacity))
}

.admin__form input[type=mail]:focus, .admin__form input[type=password]:focus, .admin__form input[type=text]:focus {
    --border-opacity: 1;
    border-color: #e2e8f0;
    border-color: rgba(226, 232, 240, var(--border-opacity))
}

.admin__form input[type=mail], .admin__form input[type=password], .admin__form input[type=text] {
    border-radius: 1rem;
    border-width: 2px;
    flex: 1 1 0%;
    line-height: 1.25
}

.admin__form input[type=mail]:focus, .admin__form input[type=password]:focus, .admin__form input[type=text]:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.admin__form input[type=mail], .admin__form input[type=password], .admin__form input[type=text] {
    --text-opacity: 1;
    color: #718096;
    color: rgba(113, 128, 150, var(--text-opacity));
    padding: .75rem 1.25rem
}

.admin__form .description {
    --text-opacity: 1;
    color: #a0aec0;
    color: rgba(160, 174, 192, var(--text-opacity));
    font-size: var(--typo-size-xsmall);
    padding-left: .5rem;
    padding-top: .5rem;
    width: 100%
}

.admin__form .button {
    min-width: 200px
}

.admin__form.user-pass p {
    --text-opacity: 1;
    color: #a0aec0;
    color: rgba(160, 174, 192, var(--text-opacity));
    font-size: var(--typo-size-xsmall);
    margin-bottom: 2rem;
    width: 100%
}

#CybotCookiebotDialog {
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    background-color: rgba(0, 0, 0, .5) !important;
    box-shadow: none !important
}

@supports not ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))) {
    #CybotCookiebotDialog {
        background-color: rgba(0, 0, 0, .8) !important
    }
}

#CybotCookiebotDialog #CybotCookiebotDialogPoweredbyImage, #CybotCookiebotDialog #CybotCookiebotDialogPoweredbyLink {
    display: none !important
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyContent {
    padding: 12px 0 8px !important
}

#CybotCookiebotDialog #CybotCookiebotDialogBody {
    max-width: 720px !important;
    padding: 20px !important
}

#CybotCookiebotDialog #CybotCookiebotDialogDetail, #CybotCookiebotDialog #CybotCookiebotDialogDetailBodyContent, #CybotCookiebotDialog #CybotCookiebotDialogDetailBodyContentCookieContainerTypes, #CybotCookiebotDialog #CybotCookiebotDialogDetailFooter, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerTypes, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerTypesSelected, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeTable, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeTable thead td, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeTable thead th, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentIABv2Tab, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentIABv2TabSelected, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentTabsItem, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentTabsItemSelected, #CybotCookiebotDialog div {
    background-color: transparent !important
}

#CybotCookiebotDialog #CybotCookiebotDialogBody, #CybotCookiebotDialog #CybotCookiebotDialogBodyContent, #CybotCookiebotDialog #CybotCookiebotDialogBodyContentText, #CybotCookiebotDialog #CybotCookiebotDialogBodyContentTitle, #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll, #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection, #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll, #CybotCookiebotDialog #CybotCookiebotDialogDetail, #CybotCookiebotDialog #CybotCookiebotDialogDetailBodyContent, #CybotCookiebotDialog #CybotCookiebotDialogDetailFooter, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerTypes, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerTypesSelected, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeTable, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeTable tbody td, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeTable thead td, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeTable thead th, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentIABv2Tab, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentIABv2TabSelected, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentTabsItem, #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentTabsItemSelected, #CybotCookiebotDialog div {
    color: var(--color-white) !important;
    font-family: var(--typo-family-default) !important;
    line-height: 1.375 !important
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyContentTitle {
    color: var(--color-white) !important;
    font-family: var(--typo-family-display) !important;
    line-height: 1.375 !important
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll, #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection, #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll, #CybotCookiebotDialog .CybotCookiebotDialogBodyButton {
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    background-color: var(--color-gray-light) !important;
    background-color: hsla(0, 0%, 100%, .3) !important;
    border: 2px solid var(--color-white) !important;
    border-radius: 5px !important;
    font-size: var(--typo-size-xsmall) !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    line-height: 1 !important;
    padding: 9px 10px 8px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    transition: .2s !important
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover, #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover, #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll:hover, #CybotCookiebotDialog .CybotCookiebotDialogBodyButton:hover {
    background-color: hsla(0, 0%, 100%, .4) !important
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
    border-color: transparent !important
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    background-color: #fff !important;
    color: rgba(0, 0, 0, .7) !important;
    opacity: .9 !important
}

#CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover {
    background-color: #fff !important;
    opacity: 1 !important
}

.spb_center {
    border: none;
    border-radius: 6px;
    margin: 0 !important;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.popup-block {
    background-color: var(--color-gray-rlight);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    display: block;
    padding: var(--spacing-xsmall);
    position: relative
}

.system_down-popup-modal-close {
    background: transparent;
    border: none;
    font-size: var(--typo-size-medium);
    height: 40px;
    margin-top: -29px;
    outline: none;
    padding: 4px 10px;
    text-align: center
}

div#system_down-popup {
    display: none;
    height: 80vh;
    overflow-y: scroll;
    padding: 40px
}

div#system_down-popup a {
    color: var(--color-primary);
    text-decoration: underline
}

div#system_down-popup:before {
    background: var(--color-gray-rlight);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    content: "";
    display: block;
    height: 40px;
    left: 0;
    position: absolute;
    top: -20px;
    width: 100%
}

@media (min-width:1024px) {
    #system_down-popup {
        height: auto !important
    }
}

.dialog-off-canvas-main-canvas {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

.dialog-off-canvas-main-canvas main {
    flex-grow: 1
}

.group_process {
    --processed: 0%;
    background: var(--color-gray-rlight);
    display: block;
    height: 4px;
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    width: 100%;
    z-index: 99
}

.user-logged-in .group_process {
    top: 169px
}

.group_process__indicator {
    background: var(--color-primary);
    height: 100%;
    width: var(--processed)
}

#block-hwl-content {
    overflow: hidden
}

.node-journal-entry #block-hwl-content {
    overflow: visible
}

#block-hwl-content .content--static section {
    overflow: hidden;
    overflow: visible;
    position: relative
}

#block-hwl-content .meta {
    padding-top: var(--spacing-medium)
}

#block-hwl-content .meta__contact, #block-hwl-content .meta__files {
    padding-bottom: var(--spacing-base);
    padding-top: var(--spacing-base)
}

.breadcrumb {
    color: var(--color-gray-light);
    font-size: var(--typo-size-2xsmall);
    margin-bottom: 2rem
}

@media (min-width:640px) {
    .breadcrumb {
        font-size: var(--typo-size-xsmall)
    }
}

@media (min-width:768px) {
    .breadcrumb {
        font-size: var(--typo-size-small);
        margin-bottom: 2.5rem
    }
}

.breadcrumb__list {
    display: flex
}

.breadcrumb__item {
    align-items: center;
    display: flex;
    font-weight: 500;
    text-transform: uppercase;
}

.breadcrumb__icon {
    stroke: var(--color-gray-light);
    display: inline-flex;
    height: 28px;
    margin-left: .25rem;
    margin-right: .25rem;
    transition: .3s;
    width: 20px;
}

.breadcrumb__link {
    color: var(--color-gray-light);
    transition: .3s
}

.breadcrumb__link:hover {
    color: var(--color-primary)
}

.breadcrumb__link:hover .breadcrumb__icon {
    stroke: var(--color-gray-light);
}

.breadcrumb__link.--home .breadcrumb__icon {
    height: 22px;
    width: 24px
}

.breadcrumb__link.--home.--home:hover .breadcrumb__icon {
    stroke: var(--color-primary)
}

@-webkit-keyframes normalizeShadow {
    0% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    to {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
}

@keyframes normalizeShadow {
    0% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    to {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
}

@-webkit-keyframes normalizeElement {
    0% {
        -webkit-transform: none;
        transform: none
    }

    to {
        -webkit-transform: none;
        transform: none
    }
}

@keyframes normalizeElement {
    0% {
        -webkit-transform: none;
        transform: none
    }

    to {
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes hover {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

@keyframes hover {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    to {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

@-webkit-keyframes shadowGrow {
    0% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    to {
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        filter: blur(5px);
        opacity: .3;
        -webkit-transform: scale(1.08) translateY(-10px);
        transform: scale(1.08) translateY(-10px)
    }
}

@keyframes shadowGrow {
    0% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    to {
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        filter: blur(5px);
        opacity: .3;
        -webkit-transform: scale(1.08) translateY(-10px);
        transform: scale(1.08) translateY(-10px)
    }
}

@-webkit-keyframes shadowShrink {
    0% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    to {
        -webkit-filter: blur(0);
        -moz-filter: blur(0);
        filter: blur(0);
        opacity: .5;
        -webkit-transform: scale(1) translateY(-8px);
        transform: scale(1) translateY(-8px)
    }
}

@keyframes shadowShrink {
    0% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    to {
        -webkit-filter: blur(0);
        -moz-filter: blur(0);
        filter: blur(0);
        opacity: .5;
        -webkit-transform: scale(1) translateY(-8px);
        transform: scale(1) translateY(-8px)
    }
}

.pyramid ul {
    margin-bottom: 1.5rem
}

.pyramid ul ul {
    margin-bottom: 0;
    margin-left: var(--grid-gap)
}

.pyramid ul li {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap
}

.pyramid ul li:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' style='enable-background:new 0 0 4 4' xml:space='preserve'%3E%3Ccircle style='fill:%233c5d7d' cx='2' cy='2' r='2'/%3E%3C/svg%3E");
    display: block;
    flex-shrink: 0;
    margin-right: calc(var(--grid-gap)/2);
    margin-top: -5px;
    width: 4px
}

.pyramid ul li span {
    max-width: calc(100% - var(--grid-gap)/2 - 4px)
}

.pyramid__graphic {
    margin-bottom: calc(var(--grid-gap)*3);
    overflow: visible
}

.pyramid__shadow {
    -webkit-filter: blur(3px);
    filter: blur(3px)
}

.pyramid__zone {
    cursor: pointer;
    z-index: var(--index)
}

.pyramid__zone.--active .pyramid__element {
    -webkit-animation: hover .7s ease-in-out infinite alternate;
    animation: hover .7s ease-in-out infinite alternate
}

.pyramid__zone.--active .pyramid__shadow {
    -webkit-animation: shadowGrow .7s ease-in-out infinite alternate;
    animation: shadowGrow .7s ease-in-out infinite alternate
}

.pyramid__zone.--active+.pyramid__zone .pyramid__shadow {
    -webkit-animation: shadowShrink .7s ease-in-out infinite alternate;
    animation: shadowShrink .7s ease-in-out infinite alternate
}

.pyramid__element {
    -webkit-animation: normalizeElement .1s infinite;
    animation: normalizeElement .1s infinite;
    -webkit-transform: none;
    transform: none
}

.pyramid__shadow {
    -webkit-animation: normalizeShadow .1s infinite;
    animation: normalizeShadow .1s infinite;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-transform-origin: top;
    transform-origin: top
}

.pyramid__content {
    display: flex
}

.pyramid__text {
    opacity: 0;
    transition: .5s;
    width: 100%
}

.pyramid__text:not(:first-child) {
    margin-left: -100%
}

.pyramid__text.--active {
    opacity: 1
}

#block-views-block-articles-archive [data-year-group]:not(.--active) {
    display: none
}

#block-views-block-articles-archive button {
    outline: none !important
}

.trackAndTrace__form__input-wrapper {
    display: flex
}

.trackAndTrace__form__item-button {
    align-items: center;
    background-color: var(--color-gray-rlight);
    border-bottom-right-radius: .5rem;
    border-top-right-radius: .5rem;
    display: flex;
    justify-content: center;
    width: 3rem
}

.trackAndTrace__form__item-button:hover {
    opacity: .8
}

.trackAndTrace__form__item-button:hover svg {
    -webkit-transform: scale(.9);
    transform: scale(.9)
}

.trackAndTrace__form__item-button__icon {
    width: 20px
}

.trackAndTrace__form__item-button__icon svg {
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s
}

.trackAndTrace__form__item-button__icon svg path {
    fill: var(--color-gray-light)
}

.trackAndTrace__link {
    font-size: var(--typo-size-xsmall);
    margin-top: var(--spacing-small);
    text-align: right;
    width: 100%
}

input[type=text].trackAndTrace__form__input-text {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0
}

.contact-flag {
    background-color: var(--color-hwl-blue);
    border-radius: 10px 0 0 10px;
    left: 100%;
    padding: 4px;
    position: fixed;
    top: 50%;
    -webkit-transform: translate(-99%, -50%);
    transform: translate(-99%, -50%);
    z-index: 1000
}

.contact-flag__item-link {
    align-items: center;
    display: flex;
    flex-direction: column;
    opacity: .6;
    padding: 5px
}

.contact-flag__item-link:hover {
    opacity: 1
}

.contact-flag__item-link__text {
    color: var(--color-white);
    display: none;
    font-size: 10px
}

@media (min-width:640px) {
    .contact-flag__item-link__text {
        display: block
    }
}

.contact-flag__item-link__icon {
    height: auto;
    margin-bottom: 5px;
    width: 28px
}

@media (min-width:768px) {
    .application__icon:after {
        background: var(--color-gray-light);
        content: "";
        display: block;
        height: 100%;
        margin-left: 47px;
        width: 2px
    }

    .application__icon.--last:after {
        display: none
    }
}

.application__text {
    font-size: var(--typo-size-small);
    margin-top: var(--grid-gap);
    min-height: 176px
}

.application__text.--last {
    min-height: unset
}

@media (min-width:768px) {
    .application__text {
        margin-top: 0
    }
}

.sm-block {
    border-top: 1px solid var(--color-gray-rlight);
    padding-top: var(--spacing-base)
}

.sm-block__cta {
    color: var(--color-gray-light)
}

@media (min-width:640px) {
    .sm-block__cta {
        width: unset
    }
}

.sm-block__link {
    grid-gap: 10px;
    color: var(--color-gray-medium);
    padding-top: var(--grid-gap)
}

@media (min-width:640px) {
    .sm-block__link {
        padding-top: 0;
        width: unset
    }
}

.sm-block__link:hover {
    color: hsla(var(--hsl-hwl-blue), .8)
}

#block-hwl-content .paragraph--type--section {
    padding-bottom: var(--spacing-xlarge);
    padding-top: var(--spacing-xlarge)
}

#block-hwl-content .paragraph--column:not(.--no-space-top) {
    padding-top: var(--spacing-base)
}

#block-hwl-content .paragraph--column:not(.--no-space-bottom) {
    padding-bottom: var(--spacing-base)
}

.paragraph--block:not(:first-child) {
    padding-top: var(--spacing-medium)
}

.paragraph--block:not(:last-child) {
    padding-bottom: var(--spacing-medium)
}

.spacer {
    display: none;
    overflow: hidden;
    position: relative
}

@media (min-width:768px) {
    .spacer {
        display: block
    }
}

.spacer {
    opacity: .8
}

.spacer:after {
    background: linear-gradient(var(--color-white), hsla(0, 0%, 100%, .01), var(--color-white));
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.facts__item {
    padding-bottom: var(--grid-gap);
    padding-top: var(--grid-gap);
    width: 100%
}

@media (min-width:640px) {
    .facts__item {
        width: 50%
    }
}

@media (min-width:768px) {
    .facts__item {
        width: 33.33333%
    }
}

@media (min-width:1024px) {
    .facts__item {
        width: 25%
    }
}

.facts__subheadline {
    margin-bottom: 0
}

.facts__text {
    margin-top: .5rem
}

.facts.--appearance-big .facts__item {
    text-align: center
}

.facts.--appearance-big .facts__item .icon {
    color: var(--color-primary);
    margin-left: auto;
    margin-right: auto
}

.facts.--appearance-big .facts__headline {
    margin-bottom: 0;
    margin-top: 1rem
}

.facts.--wrapper-appearance-arrows {
    background-color: var(--color-gray-rlight)
}

.facts.--wrapper-appearance-arrows .facts__background {
    padding: var(--spacing-medium) 0
}

@media (min-width:768px) {
    .facts.--wrapper-appearance-arrows .facts__background {
        background: url(../../../../themes/hwl/src/images/navigator/hellmann-worldwide-arrows-background.svg) no-repeat;
        background-position: 140%;
        background-size: 60% auto
    }
}

.facts.--appearance-arrows .facts__headline {
    margin-bottom: 0;
    margin-top: 1rem
}

@media (min-width:768px) {
    .facts.--appearance-arrows .facts__item:nth-child(2n) {
        margin-right: 33.33333%
    }
}

@media (min-width:1024px) {
    .facts.--appearance-arrows .facts__item:nth-child(2n) {
        margin-right: 50%
    }
}

.facts.--appearance-arrows .facts__item .label {
    color: var(--color-gray-medium);
    font-family: var(--typo-family-display);
    font-size: var(--typo-size-base);
    text-transform: none
}

.facts.--appearance-arrows .facts__icon .icon.--circled {
    background: var(--color-white)
}

.facts.--appearance-small .facts__item .icon {
    color: var(--color-gray-light)
}

.facts.--appearance-small .facts__icon {
    margin-bottom: 1rem
}

.facts.--appearance-small .facts__text {
    font-size: var(--typo-size-small)
}

.paragraph--headline {
    margin-bottom: calc(var(--spacing-base)*-1)
}

.tabs__item .field--field-type>:not(.paragraph--grid) {
    padding: var(--grid-gap)
}

.--appearance-tabs.field--field-tab-item .tabs.--tabs.swiper-container {
    overflow: visible !important
}

.paragraph--exchange-rates table td {
    padding-bottom: var(--spacing-xsmall);
    padding-right: var(--spacing-base)
}

.paragraph--exchange-rates table th {
    padding-bottom: var(--spacing-xsmall);
    text-align: left
}

.paragraph--cta .button {
    width: unset
}

.paragraph--cta .cta__content {
    padding: var(--spacing-medium) 0;
    width: 100%
}

@media (min-width:1024px) {
    .paragraph--cta .cta__background {
        background: url(../../../../themes/hwl/src/images/navigator/hellmann-worldwide-arrows-left.svg) no-repeat;
        background-position: 110%
    }
}

@media (min-width:640px) {
    .paragraph--cta.--white .cta__container {
        max-width: 640px
    }
}

@media (min-width:768px) {
    .paragraph--cta.--white .cta__container {
        max-width: 768px
    }
}

@media (min-width:1024px) {
    .paragraph--cta.--white .cta__container {
        max-width: 1024px
    }
}

@media (min-width:1280px) {
    .paragraph--cta.--white .cta__container {
        max-width: 1280px
    }
}

.paragraph--cta.--white .cta .grid-example__container {
    height: 100%
}

.paragraph--cta.--white .cta .grid-example__container .c-grid {
    flex-wrap: nowrap;
    height: 100%
}

.paragraph--cta.--white .cta .grid-example__container .c-grid .c-column {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.paragraph--cta.--white .cta .grid-example__container .c-grid .c-column:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

.paragraph--cta.--white .cta__container {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(var(--layout-max-width) + var(--grid-gap)*4);
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap);
    width: 100%
}

@media (min-width:640px) {
    .paragraph--cta.--white .cta__container {
        padding-left: calc(var(--grid-gap)*2);
        padding-right: calc(var(--grid-gap)*2)
    }
}

@media (min-width:1024px) {
    .paragraph--cta.--white .cta__container {
        padding-left: calc(var(--grid-gap)*3);
        padding-right: calc(var(--grid-gap)*3)
    }
}

.paragraph--cta.--white .cta__container.--fluid {
    max-width: none
}

@media (min-width:768px) {
    .paragraph--cta.--white .cta__container.--fluid {
        max-width: none
    }
}


.paragraph--cta.--white .cta .hero.--full-image .hero__head__container {
    padding-left: calc(var(--grid-gap)*2);
    padding-right: calc(var(--grid-gap)*2)
}

@media (min-width:1024px) {
    .paragraph--cta.--white .cta .hero.--full-image .hero__head__container {
        padding-left: calc(var(--grid-gap)*3);
        padding-right: calc(var(--grid-gap)*3)
    }
}

.paragraph--cta.--gray-medium .cta__wrapper {
    background-color: var(--color-gray-medium)
}

.paragraph--cta.--gray-medium .cta__content {
    padding-left: var(--spacing-xlarge)
}

.paragraph--cta.--gray-medium .cta__content>* {
    color: var(--color-white);
    width: 100%
}

@media (min-width:1024px) {
    .paragraph--cta.--gray-medium .cta__background {
        background: url(../../../../themes/hwl/src/images/navigator/hellmann-worldwide-arrows-cta.svg) no-repeat;
        background-position: 110%;
        background-size: 60% auto
    }
}

.paragraph--cta.--gray-medium .button.--primary {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary)
}

.paragraph--cta.--gray-medium .button.--primary:focus, .paragraph--cta.--gray-medium .button.--primary:hover {
    background-color: hsla(var(--hsl-white), .8)
}

.paragraph--cta.--gray-medium .button.--outlined {
    border-color: var(--color-white);
    color: var(--color-white)
}

.paragraph--cta.--gray-medium .button.--outlined:focus, .paragraph--cta.--gray-medium .button.--outlined:hover {
    border-color: hsla(var(--hsl-white), .7);
    color: hsla(var(--hsl-white), .7)
}

.paragraph--cta.--gray-medium .button.--secondary {
    color: var(--color-white)
}

.anchornav {
    -ms-overflow-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: -.5rem;
    overflow-x: scroll;
    overflow-y: visible;
    padding-bottom: 1.5rem;
    padding-top: .25rem;
    scrollbar-width: none
}

.anchornav::-webkit-scrollbar {
    background: transparent;
    height: 0
}

.anchornav__item {
    flex: 0 0 224px;
    padding: .5rem
}

.anchornav__link {
    display: block;
    white-space: nowrap;
    width: 100%
}

.anchornav__link:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px)
}

.download:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-rlight)
}

.download .item-list:hover .item-list__icon path:first-child {
    -webkit-animation: download .6s infinite;
    animation: download .6s infinite
}

.download .field--field-mime:after {
    content: ", "
}

.field--field-text a:not(.button) {
    color: var(--color-hwl-blue);
    text-decoration: underline
}

.field--field-text a:not(.button):hover {
    text-decoration: none
}

.field--field-text ol, .field--field-text ul {
    margin-bottom: 1em;
    margin-left: 1.5em
}

.field--field-text ol {
    list-style: decimal
}

.field--field-text ul li:before {
    color: var(--color-gray-medium);
    content: "\2022";
    display: inline-block;
    font-weight: 700;
    margin-left: -1em;
    width: 1em
}

.paragraph--gallery.--slider {
    overflow: hidden
}

.paragraph--gallery.--slider .slider__wrapper {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem
}

.paragraph--gallery.--default .grid-example .container .field--field-files {
    flex-wrap: nowrap;
    height: 100%
}

.paragraph--gallery.--default .grid-example .container .field--field-files .c-column {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.paragraph--gallery.--default .grid-example .container .field--field-files .c-column:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

.paragraph--gallery.--default .field--field-files {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--grid-gap)*-1);
    margin-right: calc(var(--grid-gap)*-1)
}

.paragraph--gallery.--default .view--jobs .view__results .field--field-files {
    grid-gap: var(--grid-gap);
    padding-bottom: var(--grid-gap)
}

.paragraph--gallery.--default .view--jobs .view--jobs__filter-wrapper.field--field-files {
    grid-gap: unset;
    margin-left: calc(var(--spacing-xsmall)*-1);
    margin-right: calc(var(--spacing-xsmall)*-1)
}

.paragraph--gallery.--default .view--jobs .view--jobs__filter-wrapper.field--field-files .c-column {
    padding-left: var(--spacing-xsmall);
    padding-right: var(--spacing-xsmall)
}

.paragraph--gallery.--default .jobs.by_type .view__results .field--field-files, .paragraph--gallery.--default .jobs.newest .view__results .field--field-files {
    grid-gap: unset;
    padding-bottom: 0
}

@media (min-width:768px) {
    .paragraph--gallery.--default .jobs.by_type .view__results .field--field-files article, .paragraph--gallery.--default .jobs.newest .view__results .field--field-files article {
        width: 50%
    }
}

.paragraph--gallery.--default .jobs.by_type .view__results .field--field-files article, .paragraph--gallery.--default .jobs.newest .view__results .field--field-files article {
    padding-bottom: calc(var(--grid-gap)*2)
}

.paragraph--gallery.--default .jobs.by_type .view__results .field--field-files .job__info, .paragraph--gallery.--default .jobs.newest .view__results .field--field-files .job__info {
    flex-wrap: wrap
}

.paragraph--gallery.--default .jobs.by_type .view__results .field--field-files .job__categories, .paragraph--gallery.--default .jobs.by_type .view__results .field--field-files .job__meta, .paragraph--gallery.--default .jobs.newest .view__results .field--field-files .job__categories, .paragraph--gallery.--default .jobs.newest .view__results .field--field-files .job__meta {
    width: 100%
}

.paragraph--gallery.--default .jobs.by_type .view__results .field--field-files .job__meta, .paragraph--gallery.--default .jobs.newest .view__results .field--field-files .job__meta {
    padding-bottom: var(--spacing-xsmall)
}

@media (min-width:1024px) {
    .paragraph--gallery.--default .ff .services .field--field-files {
        margin-left: auto;
        margin-right: auto;
        max-width: 860px
    }
}

.paragraph--gallery.--default .field--field-files {
    display: flex;
    flex-wrap: wrap
}

.paragraph--gallery.--default .field--field-files>* {
    width: 50%
}

.paragraph--gallery.--default .field--field-files .grid-example .container .c-grid>* {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.paragraph--gallery.--default .field--field-files .grid-example .container .c-grid>:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

.paragraph--gallery.--default .field--field-files>* {
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap)
}

.paragraph--gallery.--default .field--field-files .view--jobs .view--jobs__filter-wrapper.c-grid>* {
    padding-left: var(--spacing-xsmall);
    padding-right: var(--spacing-xsmall)
}

@media (min-width:768px) {
    .paragraph--gallery.--default .field--field-files>* {
        width: 33.333333%
    }
}

.webform-submission-carrier-contact-form .webform-flexbox {
    margin-bottom: 0;
    margin-top: 0
}

.webform-submission-carrier-contact-form .checkboxes--wrapper {
    margin-bottom: var(--grid-gap)
}

.webform-submission-carrier-contact-form .checkboxes--wrapper .fieldset-legend, .webform-submission-carrier-contact-form .checkboxes--wrapper .form__input.--checkbox+.form__label {
    color: var(--color-gray-light);
    font-size: var(--typo-size-xsmall);
    font-weight: 500;
    letter-spacing: .1em;
    padding-bottom: .5rem;
    padding-left: .25rem;
    text-transform: uppercase
}

.webform-submission-carrier-contact-form .checkboxes--wrapper legend {
    padding-bottom: .5rem
}

.webform-submission-carrier-contact-form .checkboxes--wrapper .form__item.--checkbox {
    margin-bottom: 0
}

.field--field-media-assets .image.--standard .image__wrapper {
    border-top-left-radius: 0
}

.field-social-media__wrapper {
    align-items: center;
    display: flex;
    gap: var(--grid-gap)
}

.field-social-media__icon {
    max-height: 32px;
    width: 32px
}

.field-social-media__icon svg path {
    fill: var(--color-gray-light)
}

.field-social-media__icon:hover svg path {
    fill: var(--color-gray-medium)
}

.article .item-list__icon .icon:hover, .article__link .icon:hover {
    background-color: var(--color-hwl-blue);
    color: var(--color-gray-light)
}

.article .item-list__icon .icon:hover svg, .article__link .icon:hover svg {
    -webkit-animation: arrow-right 1s linear infinite;
    animation: arrow-right 1s linear infinite
}

.articles.--block form {
    margin-bottom: var(--spacing-base)
}

.articles.--block form label {
    color: var(--color-gray-light) !important;
    font-size: var(--typo-size-xsmall) !important;
    font-weight: 500 !important;
    padding: .5rem 1rem !important
}

.articles.--block form .admin__form label {
    min-width: 200px !important
}

.articles.--block form .paragraph--cta label {
    width: unset !important
}

.articles.--block form .paragraph--cta.--gray-medium label.--primary {
    background: var(--color-white) !important;
    border-color: var(--color-white) !important;
    color: var(--color-primary) !important
}

.articles.--block form .paragraph--cta.--gray-medium label.--primary:focus, .articles.--block form .paragraph--cta.--gray-medium label.--primary:hover {
    background-color: hsla(var(--hsl-white), .8) !important
}

.articles.--block form .paragraph--cta.--gray-medium label.--outlined {
    border-color: var(--color-white) !important;
    color: var(--color-white) !important
}

.articles.--block form .paragraph--cta.--gray-medium label.--outlined:focus, .articles.--block form .paragraph--cta.--gray-medium label.--outlined:hover {
    border-color: hsla(var(--hsl-white), .7) !important;
    color: hsla(var(--hsl-white), .7) !important
}

.articles.--block form .paragraph--cta.--gray-medium label.--secondary {
    color: var(--color-white) !important
}

.articles.--block form .field--field-text a:not(label) {
    color: var(--color-hwl-blue) !important;
    text-decoration: underline !important
}

.articles.--block form .field--field-text a:not(label):hover {
    text-decoration: none !important
}

.articles.--block form .job__details label {
    align-items: center !important;
    display: flex !important
}

.articles.--block form .job__details label.job__bookmark svg {
    height: 25px !important
}

.articles.--block form .job__details label.job__bookmark svg #bookmark-path {
    stroke: var(--color-white) !important;
    fill: none !important
}

.articles.--block form .job__details label.job__bookmark svg #check-icon {
    fill: var(--color-primary) !important;
    display: none !important
}

.articles.--block form .job__details label.job__bookmark svg #plus-icon {
    fill: var(--color-white) !important
}

.articles.--block form .job__details label.job__bookmark.--active svg #bookmark-path {
    stroke: var(--color-white) !important;
    fill: var(--color-white) !important
}

.articles.--block form .job__details label.job__bookmark.--active svg #check-icon {
    fill: var(--color-primary) !important;
    display: block !important
}

.articles.--block form .job__details label.job__bookmark.--active svg #plus-icon {
    display: none !important
}

.articles.--block form .job__details label.job__fast-application {
    align-items: center !important;
    display: flex !important;
    width: -webkit-fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important
}

.articles.--block form .job__details label.job__fast-application .icon {
    margin-right: var(--spacing-xsmall) !important
}

.articles.--block form .job__details label .icon.job__button-icon svg {
    width: auto !important
}

.articles.--block form .view--jobs .views-exposed-form .form__item.--textfield .form__item--job-search label {
    grid-gap: var(--grid-gap) !important;
    align-items: center !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: center !important;
    min-width: 200px !important
}

.articles.--block form .view--jobs .views-exposed-form .form__item.--textfield .form__item--job-search label:after {
    content: url(../../../../themes/hwl/src/images/icons/button-arrow.svg) !important
}

.articles.--block form .view--jobs .pager label {
    margin: 0 auto !important;
    max-width: 230px !important
}

.articles.--block form #getoffer label:disabled {
    opacity: .5 !important
}

.articles.--block form #getoffer .form__button label {
    width: 100%
}

.articles.--block form .ff .news label.--contact {
    display: none
}

@media (min-width:1024px) {
    .articles.--block form .ff .news label.--contact {
        display: block
    }
}

.articles.--block form label {
    background-color: var(--color-gray-light);
    border: 2px solid var(--color-gray-light);
    border-radius: 5px;
    display: inline-block;
    font-size: var(--typo-size-xsmall);
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1;
    padding: 10px 16px !important;
    text-align: center;
    text-transform: uppercase;
    transition: .2s !important
}

.articles.--block form label:active, .articles.--block form label:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

@media (min-width:768px) {
    .articles.--block form label {
        font-size: var(--typo-size-small);
        padding: 14px 20px !important
    }
}

.articles.--block form label.--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: var(--box-shadow-standard) !important;
    color: var(--color-white)
}

.articles.--block form label.--primary:focus, .articles.--block form label.--primary:hover {
    background-color: hsla(var(--hsl-hwl-blue), .8) !important;
    border-color: transparent !important
}

.articles.--block form label.--secondary {
    background-color: var(--color-gray-light);
    border-color: var(--color-gray-light);
    box-shadow: var(--box-shadow-standard) !important;
    color: var(--color-gray-medium)
}

.articles.--block form label.--secondary:hover {
    background-color: hsla(var(--hsl-gray-light), .8) !important;
    border-color: transparent !important
}

.articles.--block form label.--outlined {
    background-color: transparent;
    border-color: var(--color-gray-medium);
    color: var(--color-gray-medium)
}

.articles.--block form label.--outlined:hover {
    border-color: hsla(var(--hsl-gray-medium), .7) !important;
    color: hsla(var(--hsl-gray-medium), .7) !important
}

.articles.--block form label.--frosty {
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    background-color: hsla(0, 0%, 100%, .3) !important;
    border-color: var(--color-white)
}

.articles.--block form label.--frosty:hover {
    background-color: hsla(0, 0%, 100%, .4) !important
}

.articles.--block form label.--frosty.--filled {
    background-color: #fff !important;
    color: var(--color-gray-dark)
}

.articles.--block form .form__item.--glassy label {
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    background-color: hsla(0, 0%, 100%, .25) !important;
    border-color: var(--color-white)
}

.articles.--block form .form__item.--glassy label:hover {
    background-color: hsla(0, 0%, 100%, .35) !important
}

.articles.--block form .form__item.--glassy label:hover .form__button__icon {
    --transform-translate-x: 0;
    --transform-translate-y: 0;
    --transform-rotate: 0;
    --transform-skew-x: 0;
    --transform-skew-y: 0;
    --transform-scale-x: 1;
    --transform-scale-y: 1;
    --transform-scale-x: .9;
    --transform-scale-y: .9;
    -webkit-transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
    transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))
}

.articles.--block form .slider.--related-contents .slider__content label {
    color: var(--color-white) !important;
    display: inline !important
}

.articles.--block form .hero__job-search.--plain label {
    grid-gap: var(--grid-gap) !important;
    align-items: center !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: center !important;
    min-width: 200px !important
}

.articles.--block form .hero__job-search.--plain label:after {
    content: url(../../../../themes/hwl/src/images/icons/button-arrow.svg) !important
}

.articles.--block form .tabs__pagination__item button, .articles.--block form .tabs__pagination__item label {
    align-items: center;
    background-color: transparent;
    border-radius: .375rem;
    border-style: none;
    color: var(--color-gray-light);
    display: flex;
    padding: var(--spacing-xsmall) var(--grid-gap);
    transition: .3s !important;
    white-space: nowrap
}

.articles.--block form .tabs__pagination__item.--active+.button, .articles.--block form .tabs__pagination__item.--active+button, .articles.--block form .tabs__pagination__item.--active+label, .articles.--block form .tabs__pagination__item.--active .button, .articles.--block form .tabs__pagination__item.--active button, .articles.--block form .tabs__pagination__item.--active label, .articles.--block form .tabs__pagination__item:hover+.button, .articles.--block form .tabs__pagination__item:hover+button, .articles.--block form .tabs__pagination__item:hover+label, .articles.--block form .tabs__pagination__item:hover .button, .articles.--block form .tabs__pagination__item:hover button, .articles.--block form .tabs__pagination__item:hover label, .articles.--block form .tabs__pagination__item [type=radio]:checked+.button, .articles.--block form .tabs__pagination__item [type=radio]:checked+button, .articles.--block form .tabs__pagination__item [type=radio]:checked+label, .articles.--block form .tabs__pagination__item [type=radio]:checked .button, .articles.--block form .tabs__pagination__item [type=radio]:checked button, .articles.--block form .tabs__pagination__item [type=radio]:checked label {
    background-color: var(--color-white);
    color: var(--color-gray-medium)
}

.articles.--block form label {
    border: none;
    padding-bottom: 6px !important;
    padding-top: 6px !important
}

.articles.--block form label:before {
    display: none
}

.articles.--block form #edit-filter-year {
    display: flex
}

.articles.--block form #edit-filter-year>* {
    flex: none
}

.articles.--block form .form-actions {
    display: none
}

.page-node-type-journal-entry .ff {
    min-height: 0
}

@media (min-width:1024px) {
    .journal.matching .journal-entry__wrapper, .journal.matching .journal_entry__wrapper, .journal.simple .journal-entry__wrapper, .journal.simple .journal_entry__wrapper, .journal.teaser .journal-entry__wrapper, .journal.teaser .journal_entry__wrapper {
        width: 50%
    }
}

.journal.highlight .journal-entry__wrapper, .journal.highlight .journal_entry__wrapper, .journal.matching .journal-entry__wrapper, .journal.matching .journal_entry__wrapper, .journal.simple .journal-entry__wrapper, .journal.simple .journal_entry__wrapper, .journal.teaser .journal-entry__wrapper, .journal.teaser .journal_entry__wrapper {
    margin-bottom: var(--grid-gap);
    margin-top: var(--grid-gap)
}

.journal.highlight .pager, .journal.matching .pager, .journal.simple .pager, .journal.teaser .pager {
    border: none
}

.journal.highlight .pager__item, .journal.matching .pager__item, .journal.simple .pager__item, .journal.teaser .pager__item {
    display: flex;
    justify-content: center
}

.journal.highlight .pager__item a, .journal.matching .pager__item a, .journal.simple .pager__item a, .journal.teaser .pager__item a {
    background-color: var(--color-gray-light);
    background-color: var(--color-primary);
    border-color: var(--color-gray-light);
    border: 2px solid var(--color-primary);
    border-radius: 5px;
    box-shadow: var(--box-shadow-standard);
    color: var(--color-white);
    display: inline-block;
    font-size: var(--typo-size-xsmall);
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1;
    padding: 10px 16px;
    text-align: center;
    text-transform: uppercase;
    transition: .2s
}

.journal.matching {
    margin-top: 2.5rem
}

.journal .pager__items {
    margin-top: 4rem
}

.journal-entry, .journal_entry {
    align-items: flex-end;
    display: flex;
    height: 100%;
    overflow: hidden
}

[class*=teaser] .journal-entry, [class*=teaser] .journal_entry {
    color: var(--color-white)
}

.journal-entry .w-richtext-figure-type-image, .journal-entry figure.image, .journal_entry .w-richtext-figure-type-image, .journal_entry figure.image {
    margin-bottom: var(--spacing-small)
}

.journal-entry .w-richtext-figure-type-image figcaption, .journal-entry figure.image figcaption, .journal_entry .w-richtext-figure-type-image figcaption, .journal_entry figure.image figcaption {
    color: var(--color-gray-medium);
    font-size: var(--typo-size-small);
    margin-top: 10px
}

.journal-entry .w-richtext-align-fullwidth, .journal-entry .w-richtext-figure-type-video, .journal-entry figure, .journal_entry .w-richtext-align-fullwidth, .journal_entry .w-richtext-figure-type-video, .journal_entry figure {
    position: relative
}

.journal-entry .w-richtext-align-fullwidth iframe, .journal-entry .w-richtext-figure-type-video iframe, .journal-entry figure iframe, .journal_entry .w-richtext-align-fullwidth iframe, .journal_entry .w-richtext-figure-type-video iframe, .journal_entry figure iframe {
    height: 100%;
    position: absolute;
    width: 100%
}

.journal-entry>*, .journal_entry>* {
    flex-shrink: 0;
    width: 100%
}

.journal-entry>:not(:first-child), .journal_entry>:not(:first-child) {
    margin-left: -100%
}

.journal-entry__image, .journal_entry__image {
    align-self: stretch;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    transition: .8s;
    width: 100%
}

.journal-entry__image img, .journal_entry__image img {
    transition: .5s
}

.journal-entry__image *, .journal_entry__image * {
    height: inherit;
    -o-object-fit: inherit;
    object-fit: inherit;
    -o-object-position: inherit;
    object-position: inherit;
    width: inherit
}

.journal-entry__image>*, .journal_entry__image>* {
    height: 100%
}

.journal-entry__teaser, .journal_entry__teaser {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: .7s
}

.journal-entry__teaser__wrapper, .journal_entry__teaser__wrapper {
    display: flex;
    flex-direction: column
}

.journal_entry__wrapper--full .journal-entry__teaser, .journal_entry__wrapper--full .journal_entry__teaser, .journal_entry__wrapper--teaser_highlight .journal-entry__teaser, .journal_entry__wrapper--teaser_highlight .journal_entry__teaser {
    max-height: unset;
    opacity: 1
}

.journal-entry__content, .journal_entry__content {
    padding: 1.5rem
}

@media (min-width:640px) {
    .journal-entry__content, .journal_entry__content {
        padding: 4rem
    }
}

.journal-entry__content, .journal_entry__content {
    display: flex;
    flex-wrap: wrap;
    z-index: 10
}

@media (min-width:768px) {
    .journal_entry__wrapper--teaser_highlight .journal-entry__content__wrapper, .journal_entry__wrapper--teaser_highlight .journal_entry__content__wrapper {
        width: 83.333333%
    }
}

@media (min-width:1024px) {
    .journal_entry__wrapper--teaser_highlight .journal-entry__content__wrapper, .journal_entry__wrapper--teaser_highlight .journal_entry__content__wrapper {
        width: 75%
    }
}

.journal-entry__content__wrapper, .journal_entry__content__wrapper {
    padding-top: 2.5rem;
    width: 100%
}

.journal-entry__content__wrapper>p, .journal_entry__content__wrapper>p {
    display: none
}

.journal-entry__content__wrapper>*, .journal_entry__content__wrapper>* {
    width: 100%
}

.journal_entry__wrapper--teaser .journal-entry__content, .journal_entry__wrapper--teaser .journal_entry__content {
    padding-bottom: 24px;
    padding-top: 48px
}

.journal_entry__wrapper--teaser .journal-entry__content__wrapper, .journal_entry__wrapper--teaser .journal_entry__content__wrapper {
    padding-top: 0
}

.journal_entry__wrapper--teaser_simple .journal-entry__content, .journal_entry__wrapper--teaser_simple .journal_entry__content {
    padding-bottom: 12px;
    padding-top: 36px
}

.journal_entry__wrapper--teaser_simple .journal-entry__content__wrapper, .journal_entry__wrapper--teaser_simple .journal_entry__content__wrapper {
    padding-top: 0
}

.journal-entry__link, .journal_entry__link {
    align-self: stretch;
    z-index: 20
}

.journal-entry__group_meta, .journal_entry__group_meta {
    display: flex;
    margin-left: calc(var(--grid-gap)*-1);
    margin-right: calc(var(--grid-gap)*-1);
    order: -1
}

.journal-entry__group_meta>*, .journal_entry__group_meta>* {
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap)
}

.journal-entry:hover .journal-entry__image img, .journal-entry:hover .journal_entry__image img, .journal_entry:hover .journal-entry__image img, .journal_entry:hover .journal_entry__image img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.journal-entry:hover .journal-entry__teaser, .journal-entry:hover .journal_entry__teaser, .journal_entry:hover .journal-entry__teaser, .journal_entry:hover .journal_entry__teaser {
    max-height: 200px;
    max-height: var(--max-height, 200px);
    opacity: 1
}

@media (max-width:767.99px) {
    .journal_entry__wrapper--teaser_simple .journal-entry:hover .journal-entry, .journal_entry__wrapper--teaser_simple .journal-entry:hover .journal_entry, .journal_entry__wrapper--teaser_simple .journal_entry:hover .journal-entry, .journal_entry__wrapper--teaser_simple .journal_entry:hover .journal_entry {
        max-height: 0 !important
    }
}

.journal-entry:hover .field--title:after, .journal_entry:hover .field--title:after {
    opacity: 1 !important;
    -webkit-transform: translate(20px, 8px) !important;
    transform: translate(20px, 8px) !important
}

.journal-entry__wrapper, .journal_entry__wrapper {
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap);
    width: 100%
}

.journal-entry__wrapper--full .group_hero .field--field-key-image, .journal_entry__wrapper--full .group_hero .field--field-key-image {
    max-height: 200vh !important;
    opacity: 1 !important;
    transition: opacity .9, all .3s !important
}

.journal-entry__wrapper--full .group_hero .field--field-key-image .image__wrapper, .journal_entry__wrapper--full .group_hero .field--field-key-image .image__wrapper {
    border-radius: 0 !important;
    position: relative
}

.journal-entry__wrapper--full .group_hero .field--field-key-image .image__wrapper:before, .journal_entry__wrapper--full .group_hero .field--field-key-image .image__wrapper:before {
    background: rgba(0, 0, 0, .5);
    content: "";
    height: 100%;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    width: 100%
}

.ff--open .journal-entry__wrapper--full .group_hero .field--field-key-image, .ff--open .journal_entry__wrapper--full .group_hero .field--field-key-image {
    max-height: 0 !important;
    opacity: 0 !important
}

.journal-entry__wrapper--full .grid-example .container>.journal-entry, .journal-entry__wrapper--full .grid-example .container>.journal_entry, .journal_entry__wrapper--full .grid-example .container>.journal-entry, .journal_entry__wrapper--full .grid-example .container>.journal_entry {
    flex-wrap: nowrap;
    height: 100%
}

.journal-entry__wrapper--full .grid-example .container>.journal-entry .c-column, .journal-entry__wrapper--full .grid-example .container>.journal_entry .c-column, .journal_entry__wrapper--full .grid-example .container>.journal-entry .c-column, .journal_entry__wrapper--full .grid-example .container>.journal_entry .c-column {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.journal-entry__wrapper--full .grid-example .container>.journal-entry .c-column:after, .journal-entry__wrapper--full .grid-example .container>.journal_entry .c-column:after, .journal_entry__wrapper--full .grid-example .container>.journal-entry .c-column:after, .journal_entry__wrapper--full .grid-example .container>.journal_entry .c-column:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

.journal-entry__wrapper--full>.journal-entry, .journal-entry__wrapper--full>.journal_entry, .journal_entry__wrapper--full>.journal-entry, .journal_entry__wrapper--full>.journal_entry {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--grid-gap)*-1);
    margin-right: calc(var(--grid-gap)*-1)
}

.journal-entry__wrapper--full .view--jobs .view__results>.journal-entry, .journal-entry__wrapper--full .view--jobs .view__results>.journal_entry, .journal_entry__wrapper--full .view--jobs .view__results>.journal-entry, .journal_entry__wrapper--full .view--jobs .view__results>.journal_entry {
    grid-gap: var(--grid-gap);
    padding-bottom: var(--grid-gap)
}

.journal-entry__wrapper--full .view--jobs .view--jobs__filter-wrapper>.journal-entry, .journal-entry__wrapper--full .view--jobs .view--jobs__filter-wrapper>.journal_entry, .journal_entry__wrapper--full .view--jobs .view--jobs__filter-wrapper>.journal-entry, .journal_entry__wrapper--full .view--jobs .view--jobs__filter-wrapper>.journal_entry {
    grid-gap: unset;
    margin-left: calc(var(--spacing-xsmall)*-1);
    margin-right: calc(var(--spacing-xsmall)*-1)
}

.journal-entry__wrapper--full .view--jobs .view--jobs__filter-wrapper>.journal-entry .c-column, .journal-entry__wrapper--full .view--jobs .view--jobs__filter-wrapper>.journal_entry .c-column, .journal_entry__wrapper--full .view--jobs .view--jobs__filter-wrapper>.journal-entry .c-column, .journal_entry__wrapper--full .view--jobs .view--jobs__filter-wrapper>.journal_entry .c-column {
    padding-left: var(--spacing-xsmall);
    padding-right: var(--spacing-xsmall)
}

.journal-entry__wrapper--full .jobs.by_type .view__results>.journal-entry, .journal-entry__wrapper--full .jobs.by_type .view__results>.journal_entry, .journal-entry__wrapper--full .jobs.newest .view__results>.journal-entry, .journal-entry__wrapper--full .jobs.newest .view__results>.journal_entry, .journal_entry__wrapper--full .jobs.by_type .view__results>.journal-entry, .journal_entry__wrapper--full .jobs.by_type .view__results>.journal_entry, .journal_entry__wrapper--full .jobs.newest .view__results>.journal-entry, .journal_entry__wrapper--full .jobs.newest .view__results>.journal_entry {
    grid-gap: unset;
    padding-bottom: 0
}

@media (min-width:768px) {
    .journal-entry__wrapper--full .jobs.by_type .view__results>.journal-entry article, .journal-entry__wrapper--full .jobs.by_type .view__results>.journal_entry article, .journal-entry__wrapper--full .jobs.newest .view__results>.journal-entry article, .journal-entry__wrapper--full .jobs.newest .view__results>.journal_entry article, .journal_entry__wrapper--full .jobs.by_type .view__results>.journal-entry article, .journal_entry__wrapper--full .jobs.by_type .view__results>.journal_entry article, .journal_entry__wrapper--full .jobs.newest .view__results>.journal-entry article, .journal_entry__wrapper--full .jobs.newest .view__results>.journal_entry article {
        width: 50%
    }
}

.journal-entry__wrapper--full .jobs.by_type .view__results>.journal-entry article, .journal-entry__wrapper--full .jobs.by_type .view__results>.journal_entry article, .journal-entry__wrapper--full .jobs.newest .view__results>.journal-entry article, .journal-entry__wrapper--full .jobs.newest .view__results>.journal_entry article, .journal_entry__wrapper--full .jobs.by_type .view__results>.journal-entry article, .journal_entry__wrapper--full .jobs.by_type .view__results>.journal_entry article, .journal_entry__wrapper--full .jobs.newest .view__results>.journal-entry article, .journal_entry__wrapper--full .jobs.newest .view__results>.journal_entry article {
    padding-bottom: calc(var(--grid-gap)*2)
}

.journal-entry__wrapper--full .jobs.by_type .view__results>.journal-entry .job__info, .journal-entry__wrapper--full .jobs.by_type .view__results>.journal_entry .job__info, .journal-entry__wrapper--full .jobs.newest .view__results>.journal-entry .job__info, .journal-entry__wrapper--full .jobs.newest .view__results>.journal_entry .job__info, .journal_entry__wrapper--full .jobs.by_type .view__results>.journal-entry .job__info, .journal_entry__wrapper--full .jobs.by_type .view__results>.journal_entry .job__info, .journal_entry__wrapper--full .jobs.newest .view__results>.journal-entry .job__info, .journal_entry__wrapper--full .jobs.newest .view__results>.journal_entry .job__info {
    flex-wrap: wrap
}

.journal-entry__wrapper--full .jobs.by_type .view__results>.journal-entry .job__categories, .journal-entry__wrapper--full .jobs.by_type .view__results>.journal-entry .job__meta, .journal-entry__wrapper--full .jobs.by_type .view__results>.journal_entry .job__categories, .journal-entry__wrapper--full .jobs.by_type .view__results>.journal_entry .job__meta, .journal-entry__wrapper--full .jobs.newest .view__results>.journal-entry .job__categories, .journal-entry__wrapper--full .jobs.newest .view__results>.journal-entry .job__meta, .journal-entry__wrapper--full .jobs.newest .view__results>.journal_entry .job__categories, .journal-entry__wrapper--full .jobs.newest .view__results>.journal_entry .job__meta, .journal_entry__wrapper--full .jobs.by_type .view__results>.journal-entry .job__categories, .journal_entry__wrapper--full .jobs.by_type .view__results>.journal-entry .job__meta, .journal_entry__wrapper--full .jobs.by_type .view__results>.journal_entry .job__categories, .journal_entry__wrapper--full .jobs.by_type .view__results>.journal_entry .job__meta, .journal_entry__wrapper--full .jobs.newest .view__results>.journal-entry .job__categories, .journal_entry__wrapper--full .jobs.newest .view__results>.journal-entry .job__meta, .journal_entry__wrapper--full .jobs.newest .view__results>.journal_entry .job__categories, .journal_entry__wrapper--full .jobs.newest .view__results>.journal_entry .job__meta {
    width: 100%
}

.journal-entry__wrapper--full .jobs.by_type .view__results>.journal-entry .job__meta, .journal-entry__wrapper--full .jobs.by_type .view__results>.journal_entry .job__meta, .journal-entry__wrapper--full .jobs.newest .view__results>.journal-entry .job__meta, .journal-entry__wrapper--full .jobs.newest .view__results>.journal_entry .job__meta, .journal_entry__wrapper--full .jobs.by_type .view__results>.journal-entry .job__meta, .journal_entry__wrapper--full .jobs.by_type .view__results>.journal_entry .job__meta, .journal_entry__wrapper--full .jobs.newest .view__results>.journal-entry .job__meta, .journal_entry__wrapper--full .jobs.newest .view__results>.journal_entry .job__meta {
    padding-bottom: var(--spacing-xsmall)
}

@media (min-width:1024px) {
    .journal-entry__wrapper--full .ff .services>.journal-entry, .journal-entry__wrapper--full .ff .services>.journal_entry, .journal_entry__wrapper--full .ff .services>.journal-entry, .journal_entry__wrapper--full .ff .services>.journal_entry {
        margin-left: auto;
        margin-right: auto;
        max-width: 860px
    }
}

.journal-entry__wrapper--full>.journal-entry, .journal-entry__wrapper--full>.journal_entry, .journal_entry__wrapper--full>.journal-entry, .journal_entry__wrapper--full>.journal_entry {
    overflow: visible
}

.journal-entry__wrapper--full>.journal-entry .field--created, .journal-entry__wrapper--full>.journal_entry .field--created, .journal_entry__wrapper--full>.journal-entry .field--created, .journal_entry__wrapper--full>.journal_entry .field--created {
    color: var(--color-primary)
}

.journal-entry__wrapper--full>.journal-entry .field--created:before, .journal-entry__wrapper--full>.journal_entry .field--created:before, .journal_entry__wrapper--full>.journal-entry .field--created:before, .journal_entry__wrapper--full>.journal_entry .field--created:before {
    align-items: center;
    background: var(--color-gray-rlight);
    border-radius: 100%;
    content: url(../../../../themes/hwl/src/images/icons/hellmann-date-dark.svg);
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px
}

.journal-entry__wrapper--full>.journal-entry .field--field-category, .journal-entry__wrapper--full>.journal_entry .field--field-category, .journal_entry__wrapper--full>.journal-entry .field--field-category, .journal_entry__wrapper--full>.journal_entry .field--field-category {
    color: var(--color-primary)
}

.journal-entry__wrapper--full>.journal-entry .field--field-category:before, .journal-entry__wrapper--full>.journal_entry .field--field-category:before, .journal_entry__wrapper--full>.journal-entry .field--field-category:before, .journal_entry__wrapper--full>.journal_entry .field--field-category:before {
    align-items: center;
    background: var(--color-gray-rlight);
    border-radius: 100%;
    content: url(../../../../themes/hwl/src/images/icons/hellmann-category-dark.svg);
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px
}

.journal-entry__wrapper--full>.journal-entry .journal-entry__content, .journal-entry__wrapper--full>.journal-entry .journal_entry__content, .journal-entry__wrapper--full>.journal_entry .journal-entry__content, .journal-entry__wrapper--full>.journal_entry .journal_entry__content, .journal_entry__wrapper--full>.journal-entry .journal-entry__content, .journal_entry__wrapper--full>.journal-entry .journal_entry__content, .journal_entry__wrapper--full>.journal_entry .journal-entry__content, .journal_entry__wrapper--full>.journal_entry .journal_entry__content {
    padding: 0;
    width: 100%
}

.journal-entry__wrapper--full>.journal-entry .journal-entry__content__wrapper, .journal-entry__wrapper--full>.journal-entry .journal_entry__content__wrapper, .journal-entry__wrapper--full>.journal_entry .journal-entry__content__wrapper, .journal-entry__wrapper--full>.journal_entry .journal_entry__content__wrapper, .journal_entry__wrapper--full>.journal-entry .journal-entry__content__wrapper, .journal_entry__wrapper--full>.journal-entry .journal_entry__content__wrapper, .journal_entry__wrapper--full>.journal_entry .journal-entry__content__wrapper, .journal_entry__wrapper--full>.journal_entry .journal_entry__content__wrapper {
    padding-top: 0;
    width: 100%
}

.journal-entry__wrapper--full>.journal-entry .journal-entry__group_meta, .journal-entry__wrapper--full>.journal-entry .journal_entry__group_meta, .journal-entry__wrapper--full>.journal_entry .journal-entry__group_meta, .journal-entry__wrapper--full>.journal_entry .journal_entry__group_meta, .journal_entry__wrapper--full>.journal-entry .journal-entry__group_meta, .journal_entry__wrapper--full>.journal-entry .journal_entry__group_meta, .journal_entry__wrapper--full>.journal_entry .journal-entry__group_meta, .journal_entry__wrapper--full>.journal_entry .journal_entry__group_meta {
    margin-bottom: 4rem;
    margin-top: 2.5rem
}

.journal-entry__wrapper--full .journal_entry__group_process, .journal_entry__wrapper--full .journal_entry__group_process {
    margin-left: calc(var(--grid-gap)*-1);
    margin-right: calc(var(--grid-gap)*-1);
    width: calc(100% + var(--grid-pa)*2)
}

.journal-entry__wrapper--full .journal_entry__group_hero, .journal_entry__wrapper--full .journal_entry__group_hero {
    align-items: center;
    display: flex;
    margin-left: calc(var(--grid-gap)*-1);
    margin-right: calc(var(--grid-gap)*-1)
}

.journal-entry__wrapper--full .journal_entry__group_hero>*, .journal_entry__wrapper--full .journal_entry__group_hero>* {
    flex-shrink: 0;
    width: 100%
}

.journal-entry__wrapper--full .journal_entry__group_hero>:not(:first-child), .journal_entry__wrapper--full .journal_entry__group_hero>:not(:first-child) {
    margin-left: -100%;
    z-index: 9
}

.journal-entry__wrapper--full .journal_entry__group_hero *, .journal_entry__wrapper--full .journal_entry__group_hero * {
    transition: .3s
}

body:not(.ff--open) .journal-entry__wrapper--full .journal_entry__group_hero *, body:not(.ff--open) .journal_entry__wrapper--full .journal_entry__group_hero * {
    color: var(--color-white)
}

.journal-entry__wrapper--full .journal_entry__group_hero_content, .journal_entry__wrapper--full .journal_entry__group_hero_content {
    margin-bottom: 30px;
    margin-top: 120px
}

.journal-entry__wrapper--full .field--field-media-image, .journal_entry__wrapper--full .field--field-media-image {
    max-height: max(min(100vh, 800px), 500px, 40vw) !important;
    overflow: hidden !important
}

.journal-entry__wrapper--full .field--field-key-image, .journal_entry__wrapper--full .field--field-key-image {
    align-self: stretch
}

.journal-entry__wrapper--full .field--field-key-image>*, .journal_entry__wrapper--full .field--field-key-image>* {
    height: 100%;
    max-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.journal-entry__wrapper--full .field--field-key-image>* *, .journal_entry__wrapper--full .field--field-key-image>* * {
    height: inherit;
    max-height: inherit;
    -o-object-fit: inherit;
    object-fit: inherit;
    -o-object-position: inherit;
    object-position: inherit;
    width: inherit
}

.journal-entry__wrapper--box, .journal_entry__wrapper--box {
    margin-bottom: var(--grid-gap)
}

.journal-entry__wrapper--box .journal_entry>*, .journal_entry__wrapper--box .journal_entry>* {
    border-bottom-right-radius: var(--border-radius-medium);
    border-top-left-radius: var(--border-radius-medium);
    box-shadow: 0 0 20px 0 rgb(0 0 0/3%), -4px 0 4px 0 rgb(0 0 0/2%);
    overflow: hidden;
    transition: .3s
}

.journal-entry__wrapper--box .journal_entry a, .journal_entry__wrapper--box .journal_entry a {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.journal-entry__wrapper--box .journal_entry, .journal_entry__wrapper--box .journal_entry {
    align-items: stretch;
    overflow: visible;
    position: relative
}

.journal-entry__wrapper--box .journal_entry__image, .journal_entry__wrapper--box .journal_entry__image {
    width: 25%
}

.journal-entry__wrapper--box .journal_entry .grid-example .container .c-grid__image, .journal_entry__wrapper--box .journal_entry .grid-example .container .c-grid__image {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.journal-entry__wrapper--box .journal_entry .grid-example .container .c-grid__image:after, .journal_entry__wrapper--box .journal_entry .grid-example .container .c-grid__image:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

.journal-entry__wrapper--box .journal_entry__image, .journal_entry__wrapper--box .journal_entry__image {
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap)
}

.journal-entry__wrapper--box .journal_entry .view--jobs .view--jobs__filter-wrapper.c-grid__image, .journal_entry__wrapper--box .journal_entry .view--jobs .view--jobs__filter-wrapper.c-grid__image {
    padding-left: var(--spacing-xsmall);
    padding-right: var(--spacing-xsmall)
}

.journal-entry__wrapper--box .journal_entry__image, .journal_entry__wrapper--box .journal_entry__image {
    min-height: 100px;
    padding-right: 0 !important
}

.journal-entry__wrapper--box .journal_entry__content, .journal_entry__wrapper--box .journal_entry__content {
    margin-left: 0;
    padding-bottom: var(--grid-gap);
    padding-top: var(--grid-gap);
    width: 75%
}

.journal-entry__wrapper--box .journal_entry .grid-example .container .c-grid__content, .journal_entry__wrapper--box .journal_entry .grid-example .container .c-grid__content {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.journal-entry__wrapper--box .journal_entry .grid-example .container .c-grid__content:after, .journal_entry__wrapper--box .journal_entry .grid-example .container .c-grid__content:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

.journal-entry__wrapper--box .journal_entry__content, .journal_entry__wrapper--box .journal_entry__content {
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap)
}

.journal-entry__wrapper--box .journal_entry .view--jobs .view--jobs__filter-wrapper.c-grid__content, .journal_entry__wrapper--box .journal_entry .view--jobs .view--jobs__filter-wrapper.c-grid__content {
    padding-left: var(--spacing-xsmall);
    padding-right: var(--spacing-xsmall)
}

.journal-entry__wrapper--box .journal_entry__content, .journal_entry__wrapper--box .journal_entry__content {
    align-items: center;
    background-color: var(--color-gray-rlight);
    display: flex;
    margin-left: 0 !important;
    padding-left: calc(var(--grid-gap)*2);
    padding-right: calc(var(--grid-gap)*2)
}

.journal-entry__wrapper--box .journal_entry__content__wrapper, .journal_entry__wrapper--box .journal_entry__content__wrapper {
    padding-top: 0
}

.journal-entry__wrapper--box .journal_entry .field--title, .journal_entry__wrapper--box .journal_entry .field--title {
    font-size: var(--typo-size-base);
    margin: 0
}

.journal-entry__wrapper--box .journal_entry .field--field-key-image, .journal_entry__wrapper--box .journal_entry .field--field-key-image {
    width: 100%
}

.journal-entry__wrapper--box .journal_entry .image__wrapper, .journal_entry__wrapper--box .journal_entry .image__wrapper {
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    box-shadow: none !important
}

.journal-entry__wrapper--box .journal_entry .image__wrapper:before, .journal_entry__wrapper--box .journal_entry .image__wrapper:before {
    display: none
}

.journal-entry__wrapper--teaser_simple, .journal_entry__wrapper--teaser_simple {
    margin-bottom: 2rem
}

.journal-entry__wrapper--teaser_simple .journal_entry__teaser, .journal_entry__wrapper--teaser_simple .journal_entry__teaser {
    max-height: 0;
    opacity: 0
}

.journal-entry__wrapper .person, .journal_entry__wrapper .person {
    flex-direction: row
}

.journal-entry__wrapper .person__image, .journal_entry__wrapper .person__image {
    width: 25%
}

.journal-entry__wrapper .person__data, .journal_entry__wrapper .person__data {
    width: 75%
}

.journal-entry .breadcrumb__link.--home .breadcrumb__icon, .journal_entry .breadcrumb__link.--home .breadcrumb__icon {
    stroke: var(--color-white)
}

[class*=teaser] .journal-entry .field--title, [class*=teaser] .journal_entry .field--title {
    color: var(--color-white)
}

.journal-entry .field--title, .journal_entry .field--title {
    margin-bottom: 24px;
    margin-top: 20px
}

.journal_entry__wrapper--teaser_highlight .journal-entry .field--title:after, .journal_entry__wrapper--teaser_highlight .journal_entry .field--title:after {
    content: url(../../../../themes/hwl/src/images/icons/hellmann-arrow.svg);
    display: inline-block;
    opacity: 0;
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
    transition: .5s
}

.journal_entry__wrapper--teaser .journal-entry .field--title, .journal_entry__wrapper--teaser .journal_entry .field--title {
    font-size: var(--typo-size-medium);
    font-weight: 500;
    line-height: 40px
}

.journal_entry__wrapper--teaser_simple .journal-entry .field--title, .journal_entry__wrapper--teaser_simple .journal_entry .field--title {
    font-size: var(--typo-size-base);
    font-weight: 500;
    line-height: 24px
}

.journal-entry .field--created, .journal_entry .field--created {
    align-items: center;
    display: flex;
    font-family: var(--typo-family-default);
    font-size: var(--typo-size-small);
    font-weight: 700;
    font-weight: medium;
    letter-spacing: 1.75;
    letter-spacing: 1.75px;
    line-height: 16, 41;
    text-transform: uppercase
}

.journal-entry .field--created:before, .journal_entry .field--created:before {
    content: url(../../../../themes/hwl/src/images/icons/hellmann-date.svg);
    line-height: 0;
    margin-right: var(--grid-gap)
}

.journal-entry .field--field-category, .journal_entry .field--field-category {
    align-items: center;
    display: flex;
    font-family: var(--typo-family-default);
    font-size: var(--typo-size-small);
    font-weight: 700;
    font-weight: medium;
    letter-spacing: 1.75;
    letter-spacing: 1.75px;
    line-height: 16, 41;
    text-transform: uppercase
}

.journal-entry .field--field-category:before, .journal_entry .field--field-category:before {
    content: url(../../../../themes/hwl/src/images/icons/hellmann-category.svg);
    line-height: 0;
    margin-right: var(--grid-gap)
}

.journal-entry .image__wrapper, .journal_entry .image__wrapper {
    position: relative
}

.journal-entry .image__wrapper:before, .journal_entry .image__wrapper:before {
    background-image: linear-gradient(0deg, #000, transparent);
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    opacity: .65;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9
}

.related {
    display: flex;
    flex-flow: row nowrap;
    overflow: hidden;
    position: relative
}

.related>* {
    flex: none;
    width: 100%
}

.related__title {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-left: -100%;
    z-index: 5
}

.related__title h3 {
    color: var(--color-white);
    margin-bottom: var(--grid-gap);
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap)
}

.related__title .--overlay {
    flex-shrink: 0;
    margin-bottom: -30px;
    margin-right: -10px
}

.related__link {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 20
}

.related__image {
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%
}

.related__image .--image {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.related__image .--image * {
    height: inherit;
    -o-object-fit: inherit;
    object-fit: inherit;
    -o-object-position: inherit;
    object-position: inherit;
    width: inherit
}

.related__image .--image .image__wrapper {
    position: relative
}

.related__image .--image .image__wrapper:after {
    background: linear-gradient(0deg, #000, transparent);
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: .7;
    position: absolute;
    width: 100%
}

.related__image .--image img {
    -webkit-transform-origin: center;
    transform-origin: center;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s
}

.related__image .--icon {
    background: var(--color-hwl-blue);
    border-bottom-right-radius: var(--border-radius-medium);
    border-top-left-radius: var(--border-radius-medium);
    overflow: hidden;
    padding-top: 60%;
    position: relative;
    width: 100%
}

.related__image .--icon svg {
    left: 50%;
    opacity: .1;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-origin: center;
    transform-origin: center;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    width: 100%
}

.related.job_area .related__title {
    border-bottom-right-radius: var(--border-radius-medium);
    border-top-left-radius: var(--border-radius-medium)
}

.related.job_area:hover .related__title {
    background: rgba(60, 91, 123, .7)
}

.related.node:hover .related__image .--image img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.related.node:hover .related__image .--icon svg {
    -webkit-transform: translate(-50%, -50%) scale(1.2);
    transform: translate(-50%, -50%) scale(1.2)
}

.search_page .grid-example .container #block-hwl-content {
    flex-wrap: nowrap;
    height: 100%
}

.search_page .grid-example .container #block-hwl-content .c-column {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.search_page .grid-example .container #block-hwl-content .c-column:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

.search_page #block-hwl-content {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--grid-gap)*-1);
    margin-right: calc(var(--grid-gap)*-1)
}

.search_page .view--jobs .view__results #block-hwl-content {
    grid-gap: var(--grid-gap);
    padding-bottom: var(--grid-gap)
}

.search_page .view--jobs .view--jobs__filter-wrapper#block-hwl-content {
    grid-gap: unset;
    margin-left: calc(var(--spacing-xsmall)*-1);
    margin-right: calc(var(--spacing-xsmall)*-1)
}

.search_page .view--jobs .view--jobs__filter-wrapper#block-hwl-content .c-column {
    padding-left: var(--spacing-xsmall);
    padding-right: var(--spacing-xsmall)
}

.search_page .jobs.by_type .view__results #block-hwl-content, .search_page .jobs.newest .view__results #block-hwl-content {
    grid-gap: unset;
    padding-bottom: 0
}

@media (min-width:768px) {
    .search_page .jobs.by_type .view__results #block-hwl-content article, .search_page .jobs.newest .view__results #block-hwl-content article {
        width: 50%
    }
}

.search_page .jobs.by_type .view__results #block-hwl-content article, .search_page .jobs.newest .view__results #block-hwl-content article {
    padding-bottom: calc(var(--grid-gap)*2)
}

.search_page .jobs.by_type .view__results #block-hwl-content .job__info, .search_page .jobs.newest .view__results #block-hwl-content .job__info {
    flex-wrap: wrap
}

.search_page .jobs.by_type .view__results #block-hwl-content .job__categories, .search_page .jobs.by_type .view__results #block-hwl-content .job__meta, .search_page .jobs.newest .view__results #block-hwl-content .job__categories, .search_page .jobs.newest .view__results #block-hwl-content .job__meta {
    width: 100%
}

.search_page .jobs.by_type .view__results #block-hwl-content .job__meta, .search_page .jobs.newest .view__results #block-hwl-content .job__meta {
    padding-bottom: var(--spacing-xsmall)
}

@media (min-width:1024px) {
    .search_page .ff .services #block-hwl-content {
        margin-left: auto;
        margin-right: auto;
        max-width: 860px
    }
}

.search_page__form .search-help-link {
    display: none
}

.search_page__form .form__item {
    display: block
}

.search_page .views-element-container {
    width: 100%
}

@media (min-width:640px) {
    #protected-pages-enter-password {
        max-width: 640px
    }
}

@media (min-width:768px) {
    #protected-pages-enter-password {
        max-width: 768px
    }
}

@media (min-width:1024px) {
    #protected-pages-enter-password {
        max-width: 1024px
    }
}

@media (min-width:1280px) {
    #protected-pages-enter-password {
        max-width: 1280px
    }
}

#protected-pages-enter-password {
    margin-bottom: 8rem
}

.grid-example #protected-pages-enter-password {
    height: 100%
}

.grid-example #protected-pages-enter-password .c-grid {
    flex-wrap: nowrap;
    height: 100%
}

.grid-example #protected-pages-enter-password .c-grid .c-column {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.grid-example #protected-pages-enter-password .c-grid .c-column:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

#protected-pages-enter-password {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(var(--layout-max-width) + var(--grid-gap)*4);
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap);
    width: 100%
}

@media (min-width:640px) {
    #protected-pages-enter-password {
        padding-left: calc(var(--grid-gap)*2);
        padding-right: calc(var(--grid-gap)*2)
    }
}

@media (min-width:1024px) {
    #protected-pages-enter-password {
        padding-left: calc(var(--grid-gap)*3);
        padding-right: calc(var(--grid-gap)*3)
    }
}

#protected-pages-enter-password.--fluid {
    max-width: none
}

@media (min-width:768px) {
    #protected-pages-enter-password.--fluid {
        max-width: nones
    }
}

.hero.--full-image .hero__head #protected-pages-enter-password {
    padding-left: calc(var(--grid-gap)*2);
    padding-right: calc(var(--grid-gap)*2)
}

@media (min-width:1024px) {
    .hero.--full-image .hero__head #protected-pages-enter-password {
        padding-left: calc(var(--grid-gap)*3);
        padding-right: calc(var(--grid-gap)*3)
    }
}

#protected-pages-enter-password .protected_pages_description {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem
}

#protected-pages-enter-password .protected_pages_description, #protected-pages-enter-password .protected_pages h3 {
    color: var(--color-gray-medium);
    font-size: var(--typo-size-medium)
}

@media (min-width:640px) {
    #protected-pages-enter-password .protected_pages_description {
        margin-bottom: 2rem
    }
}

#protected-pages-enter-password label {
    --text-opacity: 1;
    color: #4a5568;
    color: rgba(74, 85, 104, var(--text-opacity));
    flex: 0 1 128px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-weight: 600;
    margin-right: 1.5rem
}

#protected-pages-enter-password input[type=password] {
    --bg-opacity: 1;
    background-color: #edf2f7;
    background-color: rgba(237, 242, 247, var(--bg-opacity))
}

#protected-pages-enter-password input[type=password]:focus {
    --bg-opacity: 1;
    background-color: #f7fafc;
    background-color: rgba(247, 250, 252, var(--bg-opacity))
}

#protected-pages-enter-password input[type=password] {
    --border-opacity: 1;
    border-color: #edf2f7;
    border-color: rgba(237, 242, 247, var(--border-opacity))
}

#protected-pages-enter-password input[type=password]:focus {
    --border-opacity: 1;
    border-color: #e2e8f0;
    border-color: rgba(226, 232, 240, var(--border-opacity))
}

#protected-pages-enter-password input[type=password] {
    border-radius: 1rem;
    border-width: 2px;
    flex: 1 1 0%;
    line-height: 1.25
}

#protected-pages-enter-password input[type=password]:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

#protected-pages-enter-password input[type=password] {
    --text-opacity: 1;
    color: #718096;
    color: rgba(113, 128, 150, var(--text-opacity));
    padding: .75rem 1.25rem
}

.job__wrapper {
    position: relative
}

.job__wrapper:hover .job__favorite svg #bookmark-path {
    stroke: var(--color-gray-light)
}

.job__favorite {
    cursor: pointer;
    position: absolute;
    right: calc(var(--grid-gap)*2);
    top: -5px
}

.job__favorite svg #check-icon {
    display: none
}

.job__favorite.--active svg #check-icon {
    display: block
}

.job__favorite.--active svg #plus-icon {
    display: none
}

.job__favorite.--active svg #bookmark-path {
    stroke: var(--color-gray-medium);
    fill: var(--color-gray-medium)
}

.job__description .field--field-qualification img, .job__description .field--field-text img {
    width: auto
}

.job__description p {
    margin-bottom: 8px
}

.job__description p b, .job__description p strong {
    color: var(--color-gray-medium);
    font-family: var(--typo-family-display);
    font-weight: 400;
    padding-bottom: var(--spacing-base)
}

.job__description ul li {
    padding-bottom: 16px;
    padding-left: 36px;
    position: relative
}

.job__description ul li:before {
    content: url(../../../../themes/hwl/src/images/icons/read-more-icon.svg);
    left: 0;
    padding-right: 8px;
    position: absolute
}

.job__details {
    background: var(--color-white);
    background: linear-gradient(0deg, var(--color-gray-rlight) 0, var(--color-white) 100%);
    border-bottom-left-radius: 16px;
    padding: var(--spacing-base);
    position: -webkit-sticky;
    position: sticky;
    top: 90px
}

@media (min-width:1024px) {
    .job__details.--small {
        display: none
    }
}

.job__details .job__ctas {
    display: flex;
    gap: var(--spacing-xsmall)
}

.job__details .button {
    align-items: center;
    display: flex
}

.job__details .button.job__bookmark svg {
    height: 25px
}

.job__details .button.job__bookmark svg #bookmark-path {
    stroke: var(--color-white);
    fill: none
}

.job__details .button.job__bookmark svg #check-icon {
    fill: var(--color-primary);
    display: none
}

.job__details .button.job__bookmark svg #plus-icon {
    fill: var(--color-white)
}

.job__details .button.job__bookmark.--active svg #bookmark-path {
    stroke: var(--color-white);
    fill: var(--color-white)
}

.job__details .button.job__bookmark.--active svg #check-icon {
    fill: var(--color-primary);
    display: block
}

.job__details .button.job__bookmark.--active svg #plus-icon {
    display: none
}

.job__details .button.job__fast-application {
    align-items: center;
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.job__details .button.job__fast-application .icon {
    margin-right: var(--spacing-xsmall)
}

.job__details .button .icon.job__button-icon svg {
    width: auto
}

.job .job__title {
    color: var(--color-gray-medium);
    font-family: var(--typo-family-display);
    font-weight: 400
}

.job__categories {
    grid-gap: calc(var(--grid-gap)*2);
    display: flex
}

.job__category {
    grid-gap: calc(var(--spacing-xsmall)*2);
    align-items: center;
    color: #8a8882;
    display: flex;
    font-size: var(--typo-size-small);
    padding-bottom: var(--grid-gap)
}

.job__category.--location:before {
    content: url(../../../../themes/hwl/src/images/icons/job-location.svg)
}

.job__category.--field:before {
    content: url(../../../../themes/hwl/src/images/icons/job-field.svg)
}

.job__category.--schedule:before {
    content: url(../../../../themes/hwl/src/images/icons/job-schedule.svg)
}

.job__category.--type:before {
    content: url(../../../../themes/hwl/src/images/icons/job-type.svg)
}

.job__category.--teaser-location:before {
    content: url(../../../../themes/hwl/src/images/icons/job-teaser-location.svg)
}

.job__category.--teaser-schedule:before {
    content: url(../../../../themes/hwl/src/images/icons/job-teaser-schedule.svg)
}

.job__category.--teaser-type:before {
    content: url(../../../../themes/hwl/src/images/icons/job-teaser-type.svg)
}

.job__tag {
    color: var(--color-gray-light);
    font-size: var(--typo-size-2xsmall);
    font-weight: 700;
    padding-bottom: 8px;
    text-transform: uppercase
}

.job .person .image.--standard .image__wrapper {
    box-shadow: none
}

.job--teaser {
    background: var(--color-gray-rlight);
    border-radius: 8px 0;
    cursor: pointer;
    padding: 20px;
    width: 100%
}

.job--teaser:hover {
    background: var(--color-gray-medium)
}

.job--teaser:hover .job__title {
    color: #fff
}

.job--teaser .job__info {
    display: flex;
    justify-content: space-between
}

.job--teaser.job .job__category {
    padding-bottom: 0
}

.node-job #block-hwl-content {
    overflow: visible
}

.view--jobs .grid-example .container .views-exposed-form {
    flex-wrap: nowrap;
    height: 100%
}

.view--jobs .grid-example .container .views-exposed-form .c-column {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.view--jobs .grid-example .container .views-exposed-form .c-column:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

.view--jobs .views-exposed-form {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--grid-gap)*-1);
    margin-right: calc(var(--grid-gap)*-1)
}

.view--jobs .view--jobs .view__results .views-exposed-form {
    grid-gap: var(--grid-gap);
    padding-bottom: var(--grid-gap)
}

.view--jobs .view--jobs .view--jobs__filter-wrapper.views-exposed-form {
    grid-gap: unset;
    margin-left: calc(var(--spacing-xsmall)*-1);
    margin-right: calc(var(--spacing-xsmall)*-1)
}

.view--jobs .view--jobs .view--jobs__filter-wrapper.views-exposed-form .c-column {
    padding-left: var(--spacing-xsmall);
    padding-right: var(--spacing-xsmall)
}

.view--jobs .jobs.by_type .view__results .views-exposed-form, .view--jobs .jobs.newest .view__results .views-exposed-form {
    grid-gap: unset;
    padding-bottom: 0
}

@media (min-width:768px) {
    .view--jobs .jobs.by_type .view__results .views-exposed-form article, .view--jobs .jobs.newest .view__results .views-exposed-form article {
        width: 50%
    }
}

.view--jobs .jobs.by_type .view__results .views-exposed-form article, .view--jobs .jobs.newest .view__results .views-exposed-form article {
    padding-bottom: calc(var(--grid-gap)*2)
}

.view--jobs .jobs.by_type .view__results .views-exposed-form .job__info, .view--jobs .jobs.newest .view__results .views-exposed-form .job__info {
    flex-wrap: wrap
}

.view--jobs .jobs.by_type .view__results .views-exposed-form .job__categories, .view--jobs .jobs.by_type .view__results .views-exposed-form .job__meta, .view--jobs .jobs.newest .view__results .views-exposed-form .job__categories, .view--jobs .jobs.newest .view__results .views-exposed-form .job__meta {
    width: 100%
}

.view--jobs .jobs.by_type .view__results .views-exposed-form .job__meta, .view--jobs .jobs.newest .view__results .views-exposed-form .job__meta {
    padding-bottom: var(--spacing-xsmall)
}

@media (min-width:1024px) {
    .view--jobs .ff .services .views-exposed-form {
        margin-left: auto;
        margin-right: auto;
        max-width: 860px
    }
}

.view--jobs .views-exposed-form {
    margin-left: calc(var(--grid-gap)/-2);
    margin-right: calc(var(--grid-gap)/-2)
}

.view--jobs .views-exposed-form .form__item {
    width: 100%
}

.view--jobs .views-exposed-form .form .grid-example .container .c-grid__item {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.view--jobs .views-exposed-form .form .grid-example .container .c-grid__item:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

.view--jobs .views-exposed-form .form__item {
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap)
}

.view--jobs .views-exposed-form .form .view--jobs .view--jobs__filter-wrapper.c-grid__item {
    padding-left: var(--spacing-xsmall);
    padding-right: var(--spacing-xsmall)
}

@media (min-width:768px) {
    .view--jobs .views-exposed-form .form__item {
        width: 50%
    }
}

@media (min-width:1024px) {
    .view--jobs .views-exposed-form .form__item {
        width: 25%
    }
}

.view--jobs .views-exposed-form .form__item {
    flex: unset;
    padding-left: calc(var(--grid-gap)/2);
    padding-right: calc(var(--grid-gap)/2)
}

.view--jobs .views-exposed-form .form__item.--textfield {
    display: none;
    width: 100%
}

.view--jobs .views-exposed-form .form__item.--textfield .form__item--job-search {
    grid-gap: var(--grid-gap);
    display: flex;
    width: 100%
}

@media (min-width:768px) {
    .view--jobs .views-exposed-form .form__item.--textfield .form__item--job-search {
        width: 83.333333%
    }
}

@media (min-width:1024px) {
    .view--jobs .views-exposed-form .form__item.--textfield .form__item--job-search {
        width: 75%
    }
}

.view--jobs .views-exposed-form .form__item.--textfield .form__item--job-search .button {
    grid-gap: var(--grid-gap);
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    min-width: 200px
}

.view--jobs .views-exposed-form .form__item.--textfield .form__item--job-search .button:after {
    content: url(../../../../themes/hwl/src/images/icons/button-arrow.svg)
}

.view--jobs .views-exposed-form .form-actions {
    display: none
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .grid-example .container .form-checkboxes {
    flex-wrap: nowrap;
    height: 100%
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .grid-example .container .form-checkboxes .c-column {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .grid-example .container .form-checkboxes .c-column:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .form-checkboxes {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--grid-gap)*-1);
    margin-right: calc(var(--grid-gap)*-1)
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .view--jobs .view__results .form-checkboxes {
    grid-gap: var(--grid-gap);
    padding-bottom: var(--grid-gap)
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .view--jobs .view--jobs__filter-wrapper.form-checkboxes {
    grid-gap: unset;
    margin-left: calc(var(--spacing-xsmall)*-1);
    margin-right: calc(var(--spacing-xsmall)*-1)
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .view--jobs .view--jobs__filter-wrapper.form-checkboxes .c-column {
    padding-left: var(--spacing-xsmall);
    padding-right: var(--spacing-xsmall)
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .jobs.by_type .view__results .form-checkboxes, .view--jobs .views-exposed-form #edit-field-job-field-target-id .jobs.newest .view__results .form-checkboxes {
    grid-gap: unset;
    padding-bottom: 0
}

@media (min-width:768px) {
    .view--jobs .views-exposed-form #edit-field-job-field-target-id .jobs.by_type .view__results .form-checkboxes article, .view--jobs .views-exposed-form #edit-field-job-field-target-id .jobs.newest .view__results .form-checkboxes article {
        width: 50%
    }
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .jobs.by_type .view__results .form-checkboxes article, .view--jobs .views-exposed-form #edit-field-job-field-target-id .jobs.newest .view__results .form-checkboxes article {
    padding-bottom: calc(var(--grid-gap)*2)
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .jobs.by_type .view__results .form-checkboxes .job__info, .view--jobs .views-exposed-form #edit-field-job-field-target-id .jobs.newest .view__results .form-checkboxes .job__info {
    flex-wrap: wrap
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .jobs.by_type .view__results .form-checkboxes .job__categories, .view--jobs .views-exposed-form #edit-field-job-field-target-id .jobs.by_type .view__results .form-checkboxes .job__meta, .view--jobs .views-exposed-form #edit-field-job-field-target-id .jobs.newest .view__results .form-checkboxes .job__categories, .view--jobs .views-exposed-form #edit-field-job-field-target-id .jobs.newest .view__results .form-checkboxes .job__meta {
    width: 100%
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .jobs.by_type .view__results .form-checkboxes .job__meta, .view--jobs .views-exposed-form #edit-field-job-field-target-id .jobs.newest .view__results .form-checkboxes .job__meta {
    padding-bottom: var(--spacing-xsmall)
}

@media (min-width:1024px) {
    .view--jobs .views-exposed-form #edit-field-job-field-target-id .ff .services .form-checkboxes {
        margin-left: auto;
        margin-right: auto;
        max-width: 860px
    }
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .form-checkboxes .--checkbox {
    width: 100%
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .form-checkboxes .grid-example .container .c-grid .--checkbox {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .form-checkboxes .grid-example .container .c-grid .--checkbox:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .form-checkboxes .--checkbox {
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap)
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .form-checkboxes .view--jobs .view--jobs__filter-wrapper.c-grid .--checkbox {
    padding-left: var(--spacing-xsmall);
    padding-right: var(--spacing-xsmall)
}

@media (min-width:1024px) {
    .view--jobs .views-exposed-form #edit-field-job-field-target-id .form-checkboxes .--checkbox {
        width: 50%
    }
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .form-checkboxes .--checkbox {
    flex: auto
}

.view--jobs .views-exposed-form #edit-field-job-field-target-id .form-checkboxes .--checkbox .form__label {
    align-items: flex-start
}

.view--jobs .views-exposed-form .fieldset-legend {
    color: var(--color-gray-light);
    display: block;
    font-size: var(--typo-size-xsmall);
    font-weight: 500;
    letter-spacing: .1em;
    padding-bottom: .25rem;
    text-transform: uppercase
}

.view--jobs .views-exposed-form .form__label {
    padding-left: 0
}

.view--jobs__remove-filter {
    color: var(--color-gray-light);
    cursor: pointer;
    font-size: var(--typo-size-2xsmall)
}

.view--jobs__count, .view--jobs__filter {
    color: var(--color-gray-medium)
}

.view--jobs__filter {
    align-items: center;
    background: var(--color-gray-rlight);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    font-size: var(--typo-size-2xsmall);
    font-weight: 400;
    justify-content: center;
    padding: 5px 8px;
    text-transform: uppercase
}

.view--jobs__filter span {
    padding-right: var(--grid-gap)
}

.view--jobs__filter-wrapper {
    padding-bottom: calc(var(--grid-gap)*2)
}

.view--jobs .view__results {
    padding-top: var(--spacing-medium)
}

.view--jobs .view__results .c-grid {
    grid-gap: var(--grid-gap);
    padding-bottom: var(--grid-gap)
}

.view--jobs .view--jobs__filter-wrapper.c-grid {
    grid-gap: unset;
    margin-left: calc(var(--spacing-xsmall)*-1);
    margin-right: calc(var(--spacing-xsmall)*-1)
}

.view--jobs .view--jobs__filter-wrapper.c-grid .c-column {
    padding-left: var(--spacing-xsmall);
    padding-right: var(--spacing-xsmall)
}

.view--jobs .pager {
    border: none;
    margin-top: 0;
    padding-top: 0
}

.view--jobs .pager .button {
    margin: 0 auto;
    max-width: 230px
}

.jobs.by_type .view--jobs__count, .jobs.by_type .view--jobs__filter-wrapper, .jobs.newest .view--jobs__count, .jobs.newest .view--jobs__filter-wrapper {
    display: none
}

@media (min-width:768px) {
    .jobs.by_type .view--jobs article, .jobs.newest .view--jobs article {
        width: 50%
    }
}

.jobs.by_type .view--jobs__pager, .jobs.newest .view--jobs__pager {
    justify-content: space-between
}

.jobs.by_type .view--jobs__navigation, .jobs.newest .view--jobs__navigation {
    grid-gap: 15px
}

.jobs.by_type .view--jobs__arrow .arrow, .jobs.newest .view--jobs__arrow .arrow {
    cursor: pointer;
    width: calc(var(--grid-gap)*2)
}

.jobs.by_type .view--jobs__arrow .arrow svg path, .jobs.newest .view--jobs__arrow .arrow svg path {
    fill: var(--color-gray-medium)
}

.jobs.by_type .view--jobs__arrow .arrow.--disabled, .jobs.newest .view--jobs__arrow .arrow.--disabled {
    cursor: unset
}

.jobs.by_type .view--jobs__arrow .arrow.--disabled svg path, .jobs.newest .view--jobs__arrow .arrow.--disabled svg path {
    fill: var(--color-gray-light)
}

.jobs.by_type .view__results, .jobs.newest .view__results {
    padding-top: 0
}

.jobs.by_type .view__results .c-grid, .jobs.newest .view__results .c-grid {
    grid-gap: unset;
    padding-bottom: 0
}

@media (min-width:768px) {
    .jobs.by_type .view__results .c-grid article, .jobs.newest .view__results .c-grid article {
        width: 50%
    }
}

.jobs.by_type .view__results .c-grid article, .jobs.newest .view__results .c-grid article {
    padding-bottom: calc(var(--grid-gap)*2)
}

.jobs.by_type .view__results .c-grid .job__info, .jobs.newest .view__results .c-grid .job__info {
    flex-wrap: wrap
}

.jobs.by_type .view__results .c-grid .job__categories, .jobs.by_type .view__results .c-grid .job__meta, .jobs.newest .view__results .c-grid .job__categories, .jobs.newest .view__results .c-grid .job__meta {
    width: 100%
}

.jobs.by_type .view__results .c-grid .job__meta, .jobs.newest .view__results .c-grid .job__meta {
    padding-bottom: var(--spacing-xsmall)
}

.jobs.by_type .js-pager__items, .jobs.newest .js-pager__items {
    display: none
}

.employee_stories.--related-slider .slider__content__headline {
    margin-bottom: var(--grid-gap)
}

.employee_stories.--related-slider .slider__content__meta {
    color: #fff;
    font-size: var(--typo-size-2xsmall);
    font-weight: 700;
    padding-bottom: var(--spacing-medium)
}

.employee_stories__job_area {
    grid-gap: calc(var(--spacing-xsmall)*2);
    align-items: center;
    display: flex;
    padding-top: calc(var(--grid-gap)*2)
}

.employee_stories__job_area:before {
    content: url(../../../../themes/hwl/src/images/icons/job-field.svg)
}

.field--field-related-contents-es {
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    overflow: hidden
}

.job_area .related__title h3 {
    margin-bottom: var(--spacing-xsmall);
    padding: 0
}

.job_area .related__text {
    color: #fff;
    padding: var(--grid-gap)
}

.job_area .related__job-offers {
    grid-gap: var(--spacing-xsmall);
    display: flex;
    font-family: var(--typo-family-display);
    font-weight: 500
}

.job_area .related__job-offers:before {
    content: url(../../../../themes/hwl/src/images/icons/job-offers.svg)
}

.ff__topbar {
    align-items: center;
    display: flex;
    padding-bottom: 1rem;
    padding-top: 1rem;
    position: fixed;
    transition-duration: .5s;
    transition-property: background-color, border-color, color, fill, stroke;
    width: 100%;
    z-index: 30
}

@media (min-width:1024px) {
    .ff__topbar {
        padding-bottom: 1.5rem;
        padding-top: 1.5rem
    }
}

.ff__topbar {
    height: 70px
}

@media (min-width:1024px) {
    .ff__topbar {
        height: 90px
    }
}

.ff__topbar.light {
    background-color: transparent;
}

.ff__topbar.dark {
    background-color: transparent
}

.ff .tooltip {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: hsla(var(--hsl-gray-dark), .5);
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    color: var(--color-white);
    font-size: var(--typo-size-xsmall);
    font-weight: 500;
    left: 0;
    letter-spacing: .1em;
    max-width: calc(100% - 32px);
    padding: .5rem;
    position: fixed;
    text-transform: uppercase;
    top: 0
}

@supports not ((-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px))) {
    .ff .tooltip {
        background-color: hsla(var(--hsl-gray-dark), .9) !important
    }
}

.ff .tooltip p {
    margin-bottom: 0
}

.ff .tooltip .menu__list {
    flex-direction: column;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase
}

@media (min-width:768px) {
    .ff .tooltip .menu__list {
        display: flex
    }
}

.ff .tooltip .menu__list {
    width: 300px
}

.ff .tooltip .menu__list:hover .menu__link {
    opacity: .5
}

.ff .tooltip .menu__list .menu__link {
    transition: .2s
}

.ff .tooltip .menu__list .menu__link:hover {
    opacity: 1;
    padding-left: 1rem
}

.ff .tooltip .menu__link, .ff .tooltip__headline {
    color: var(--color-white);
    display: block;
    margin: 0;
    padding: .25rem .5rem
}

.ff .tooltip__headline {
    font-size: var(--typo-size-small)
}

@media (min-width:768px) {
    .ff .tooltip__headline {
        padding: .5rem .75rem
    }
}

.ff .tooltip__text {
    color: var(--color-white);
    display: block;
    font-size: var(--typo-size-xsmall);
    margin: 0;
    padding: .25rem .5rem
}

@media (min-width:768px) {
    .ff .tooltip__text {
        padding: .5rem .75rem
    }
}

.ff .tooltip .track-hint .tooltip__text {
    text-transform: none
}

.ff .tooltip .track-hint .tooltip__text ul {
    letter-spacing: 0;
    list-style-type: disc;
    margin-left: var(--grid-gap)
}

.ff .tooltip .portal-link {
    width: 160px
}

.ff .tooltip .language-selector {
    width: 120px
}

.ff .logo {
    flex: 0 1 auto;
    height: 38px;
    width: 90px;
    margin-right: 30px;
}

.ff .logo__link {
    display: block;
    width: 90px;
}

@media (min-width:640px) {
    .ff .logo__link {
        width: 90px;
    }
}

.ff .logo__svg {
    height: auto;
    width: 100%
}

.ff .logo__svg path {
    transition-duration: .5s;
    transition-property: all
}

.ff .logo.dark .logo__svg path {
    fill: #fff
}

.ff .mainmenu {
    display: none;
    flex: 1 1 0%;
    font-size: var(--typo-size-2xsmall);
    font-weight: 500;
    letter-spacing: .1em;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    text-transform: uppercase
}

@media (min-width:1280px) {
    .ff .mainmenu {
        display: block;
        font-size: var(--typo-size-xsmall)
    }
}

.ff .mainmenu .menu__list {
    display: flex;
    flex-direction: row;
    margin-left: -.25rem;
    margin-right: -.25rem
}

@media (min-width:1280px) {
    .ff .mainmenu .menu__list {
        margin-left: -.5rem;
        margin-right: -.5rem
    }
}

@media (min-width:768px) {
    .ff .mainmenu .menu__list--lvl-2 {
        display: none
    }
}

.ff .mainmenu .menu__item {
    flex: 0 1 auto;
    white-space: nowrap
}

.ff .mainmenu .menu__link {
    color: var(--color-gray-light);
    cursor: pointer;
    margin-left: .25rem;
    margin-right: .25rem;
    padding-bottom: .75rem;
    padding-top: .75rem
}

.ff .mainmenu .menu__link--empty {
    cursor: default
}

@media (min-width:1280px) {
    .ff .mainmenu .menu__link {
        margin-left: .35rem;
        margin-right: .35rem
    }
}

.ff .mainmenu.dark .menu__link {
    color: hsla(var(--hsl-gray-light), 1) !important;
}

.ff .search {
    display: none;
    margin-left: auto
}

@media (min-width:768px) {
    .ff .search {
        display: block
    }
}

.ff .search {
    flex: 0 0 215px
}

.ff .search .form__input {
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 18px auto;
    border-width: 2px;
    height: 2.5rem;
    padding-bottom: .5rem;
    padding-top: .5rem
}

.ff .search.dark .form__input {
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46.596 44.184 35.03 32.617a1.064 1.064 0 0 0-.762-.314h-.924a18.57 18.57 0 0 0 4.96-12.652C38.302 9.348 29.953 1 19.65 1S1 9.348 1 19.651c0 10.303 8.348 18.651 18.651 18.651a18.6 18.6 0 0 0 12.652-4.95v.915c0 .287.117.556.314.762l11.567 11.567a1.077 1.077 0 0 0 1.525 0l.887-.887a1.077 1.077 0 0 0 0-1.525zm-26.945-8.751c-8.725 0-15.782-7.057-15.782-15.782S10.926 3.87 19.651 3.87s15.782 7.057 15.782 15.782-7.057 15.782-15.782 15.782z' fill='%23FFF'/%3E%3C/svg%3E");
    background-size: 20px auto;
    border-color: var(--color-white)
}

.ff .search.light .form__input {
    background-color: var(--color-gray-rlight);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46.596 44.184 35.03 32.617a1.064 1.064 0 0 0-.762-.314h-.924a18.57 18.57 0 0 0 4.96-12.652C38.302 9.348 29.953 1 19.65 1S1 9.348 1 19.651c0 10.303 8.348 18.651 18.651 18.651a18.6 18.6 0 0 0 12.652-4.95v.915c0 .287.117.556.314.762l11.567 11.567a1.077 1.077 0 0 0 1.525 0l.887-.887a1.077 1.077 0 0 0 0-1.525zm-26.945-8.751c-8.725 0-15.782-7.057-15.782-15.782S10.926 3.87 19.651 3.87s15.782 7.057 15.782 15.782-7.057 15.782-15.782 15.782z' fill='%23B0BDC9'/%3E%3C/svg%3E");
    border-color: var(--color-gray-rlight)
}

.ff .search.light .form__input::-webkit-input-placeholder {
    color: var(--color-gray-light)
}

.ff .search.light .form__input:-ms-input-placeholder {
    color: var(--color-gray-light)
}

.ff .search.light .form__input::placeholder {
    color: var(--color-gray-light)
}

.ff .search.light .form__input:focus {
    background-color: var(--color-white);
    border-color: var(--color-gray-rlight)
}

.ff .usermenu {
    flex: 0 1 auto;
    font-size: var(--typo-size-xsmall);
    letter-spacing: .1em;
    margin-left: auto;
    text-transform: uppercase
}

@media (min-width:768px) {
    .ff .usermenu {
        margin-left: 1.5rem
    }
}

.ff .usermenu__list {
    display: flex;
    flex-direction: row;
    margin-left: -6rem;
    margin-right: -6rem
}

.ff .usermenu__item {
    flex: 0 1 auto;
    margin-left: .25rem;
    margin-right: .25rem
}

.ff .usermenu__item.--portal {
    display: none
}

@media (min-width:768px) {
    .ff .usermenu__item.--portal {
        display: block
    }

}

.ff .usermenu__item.--hamburger {
    display: block
}



@media (min-width:1280px) {
    .ff .usermenu__item.--hamburger {
        display: none
    }

    .ff .usermenu__item {
        position: relative;
        left: -3rem;
    }
}

.ff .usermenu__button {
    background-color: transparent;
    border-radius: 0;
    border-style: none;
    color: var(--color-gray-light);
    cursor: pointer;
    display: block;
    font-size: var(--typo-size-xsmall);
    height: 38px;
    letter-spacing: 0;
    padding: 0;
    position: relative;
    width: 34px
}

.ff .usermenu__button:disabled {
    opacity: .5
}

.ff .usermenu .button__lang-code {
    left: 9px;
    position: absolute;
    text-transform: uppercase;
    top: 10px
}

.ff .usermenu.dark, .ff .usermenu.dark .usermenu__button {
    color: var(--color-gray-light);
}

.usermenu__button.hamburger {
    display: block
}

.usermenu__button.hamburger span {
    background-color: var(--color-gray-light);
    border-radius: .375rem;
    display: block;
    height: 2px;
    left: 0;
    opacity: 1;
    position: absolute;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: .25s ease-in-out;
    width: 100%
}

.usermenu__button.hamburger span:first-child {
    top: 8px
}

.usermenu__button.hamburger span:nth-child(2) {
    top: 15px
}

.usermenu__button.hamburger span:nth-child(3) {
    top: 22px
}

.usermenu__button.hamburger span:nth-child(4) {
    top: 29px
}

.usermenu__button.hamburger.light span {
    background-color: var(--color-gray-light)
}

.ff .navbar {
    bottom: 0;
    left: 0;
    padding: var(--spacing-small) 0;
    position: absolute;
    width: 100%;
    z-index: 10
}

@media (min-width:1024px) {
    .ff .navbar {
        padding-bottom: 1.75rem
    }
}

.ff .navbar:hover .navbar__label {
    opacity: 0 !important
}

.ff .navbar__list {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: -.75rem
}

.ff .navbar__list.active .navbar__item {
    opacity: .5 !important
}

.ff .navbar__list.active .navbar__item.active, .ff .navbar__list.active .navbar__item:hover {
    opacity: 1 !important
}

.ff .navbar__list.active .navbar__item.active .navbar__icon, .ff .navbar__list.active .navbar__item:hover .navbar__icon {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.ff .navbar__label {
    align-items: flex-end;
    display: none;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    opacity: .5;
    text-align: center;
    width: 100%
}

@media (min-width:768px) {
    .ff .navbar__label {
        display: flex
    }
}

.ff .navbar__label {
    transition: .5s
}

.ff .navbar__label-svg {
    flex: 0 1 auto;
    overflow: hidden
}

.ff .navbar__label-text {
    flex: 0 1 auto;
    padding-left: 1rem;
    padding-right: 1rem
}

@supports (display:grid) {
    .ff .navbar .navbar__list {
        grid-gap: var(--spacing-xsmall);
        display: grid;
        gap: var(--spacing-xsmall);
        grid-template-columns: repeat(4, minmax(0, 1fr));
        justify-content: flex-start;
        margin: 0
    }

    @media (min-width:768px) {
        .ff .navbar .navbar__list {
            /* grid-template-columns: repeat(6, minmax(0, 1fr))*/
            grid-template-columns: repeat(4, minmax(0, 1fr))
        }
    }
}

.ff .navbar__item {
    flex: 1 1 0%;
    flex: 0 0 70px;
    margin: .75rem;
    transition-duration: .5s;
    transition-property: opacity
}

@media (min-width:768px) {
    .ff .navbar__item {
        flex: 0 0 120px
    }
}

@media (min-width:1024px) {
    .ff .navbar__item {
        flex: 0 0 170px
    }
}

@supports (display:grid) {
    .ff .navbar .navbar__item {
        margin: 0
    }
}

.ff .navbar__button {
    align-items: center;
    background-color: transparent;
    border-width: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: var(--typo-size-small);
    justify-content: flex-start;
    padding: .25rem;
    width: 100%
}

.ff .navbar__icon {
    margin-bottom: .5rem
}

@media (min-width:768px) {
    .ff .navbar__icon {
        margin-bottom: 1.25rem
    }
}

.ff .navbar__icon {
    height: 30px;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
    width: 30px
}

@media (min-width:768px) {
    .ff .navbar__icon {
        height: 42px;
        width: 42px
    }
}

@media (min-width:1024px) {
    .ff .navbar__icon {
        height: 52px;
        width: 52px
    }
}

.ff .navbar__text {
    font-size: .563rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase
}

@media (min-width:640px) {
    .ff .navbar__text {
        font-size: var(--typo-size-2xsmall)
    }
}

@media (min-width:768px) {
    .ff .navbar__text {
        font-size: var(--typo-size-xsmall)
    }
}

@media (min-width:1024px) {
    .ff .navbar__text {
        font-size: var(--typo-size-small)
    }
}

@media (min-width:768px) {
    #getoffer {
        padding-bottom: 10rem;
        padding-top: 10rem
    }
}

#getoffer .button:disabled {
    opacity: .5
}

#getoffer .form {
    border-radius: .375rem;
    color: var(--color-white);
    font-size: var(--typo-size-small)
}

@media (min-width:768px) {
    #getoffer .form {
        font-size: var(--typo-size-base)
    }
}

#getoffer .form__group {
    flex-direction: row;
    flex-wrap: wrap
}

#getoffer .form__item.--newsletter .form__label, #getoffer .form__item.--privacy .form__label {
    color: var(--color-white)
}

#getoffer .form__item.--newsletter .form__label a, #getoffer .form__item.--privacy .form__label a {
    text-decoration: underline
}

#getoffer .form__item.--newsletter .form__label a:hover, #getoffer .form__item.--privacy .form__label a:hover {
    text-decoration: none
}

#getoffer .form__item.--concern, #getoffer .form__item.--email, #getoffer .form__item.--privacy, #getoffer .form__item.--salutation {
    flex-basis: 100%;
    width: 100%
}

#getoffer .form__item.--phone-prefix, #getoffer .form__item.--street-no, #getoffer .form__item.--zip {
    flex: 0 1 auto;
    width: 120px
}

@media (min-width:768px) {
    #getoffer .form__item.--phone-prefix, #getoffer .form__item.--salutation {
        flex: 0 1 auto;
        width: 120px
    }
}

#getoffer .form__item.--first-name, #getoffer .form__item.--last-name {
    width: calc(50% - var(--grid-gap))
}

#getoffer .form__input+.form__label {
    font-size: var(--typo-size-small)
}

@media (min-width:768px) {
    #getoffer .form__input+.form__label {
        font-size: var(--typo-size-base)
    }
}

#getoffer .form__input.--checkbox+.form__label {
    font-size: var(--typo-size-xsmall);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase
}

#getoffer .form__actions {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem
}

#getoffer .form__button {
    flex: 1;
    max-width: 220px
}

#getoffer .form__button .button {
    width: 100%
}

#getoffer .form__error-msg {
    font-weight: 700
}

#getoffer .form__step1 .form__group.--products {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

#getoffer .form__step1 .form__group.--products .form__item {
    flex-basis: calc(33.33333% - var(--grid-gap)/2);
    flex-grow: 0;
    width: calc(33.33333% - var(--grid-gap)/2)
}

@media (min-width:640px) {
    #getoffer .form__step1 .form__group.--products .form__item {
        flex-basis: calc(16.66667% - var(--grid-gap)/2);
        flex-grow: 1;
        width: calc(16.66667% - var(--grid-gap)/2)
    }
}

#getoffer .form__step1 .form__group.--products .label__icon {
    height: 32px;
    width: 32px
}

@media (min-width:640px) {
    #getoffer .form__step1 .form__group.--products .label__icon {
        height: auto;
        width: 100%
    }
}

#getoffer .form__step1 .form__group.--products .label__icon svg {
    height: 32px;
    width: 32px
}

@media (min-width:640px) {
    #getoffer .form__step1 .form__group.--products .label__icon svg {
        height: auto;
        margin: 0 auto;
        width: 48px
    }
}

#getoffer .form__step1 .form__group.--products .form__input.--radio+.form__label {
    border-color: var(--color-white);
    border-radius: .375rem;
    border-width: 2px;
    display: flex;
    flex-direction: column;
    font-size: var(--typo-size-2xsmall);
    font-weight: 700;
    justify-content: center;
    padding: .5rem;
    text-align: center;
    text-transform: uppercase
}

@media (min-width:768px) {
    #getoffer .form__step1 .form__group.--products .form__input.--radio+.form__label {
        padding: .75rem
    }
}

#getoffer .form__step1 .form__group.--products .form__input.--radio+.form__label {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: hsla(0, 0%, 100%, .2);
    height: 100%
}

#getoffer .form__step1 .form__group.--products .form__input.--radio+.form__label:before {
    display: none
}

@media (min-width:768px) {
    #getoffer .form__step1 .form__group.--products .form__input.--radio+.form__label {
        font-size: var(--typo-size-xsmall)
    }
}

#getoffer .form__step1 .form__group.--products .form__input.--radio:checked+.form__label {
    background-color: hsla(0, 0%, 100%, .6)
}

.ff .news__headline .main__headline {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

@media (min-width:1024px) {
    .ff .news__headline .main__headline {
        -webkit-line-clamp: 2
    }
}

@media (min-width:1280px) {
    .ff .news__headline .main__headline {
        -webkit-line-clamp: 3
    }
}

.ff .news__teaser {
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.ff .news .button.--contact {
    display: none
}

@media (min-width:1024px) {
    .ff .news .button.--contact {
        display: block
    }
}

.ff .highlights__item {
    border-bottom: 1px solid hsla(0, 0%, 100%, .3)
}

.ff .highlights__item:last-child {
    border-bottom: none
}

.ff .highlights__item p {
    margin-bottom: 0
}

.ff .highlights__link {
    display: block;
    font-weight: 700;
    padding-bottom: .5rem;
    padding-top: .5rem
}

.ff .main {
    height: 100%;
    position: relative;
    width: 100%
}

.ff .main__section {
    background-position: 50%;
    background-size: cover;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10
}

.ff .main__section:before {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .4) 25%, rgba(0, 0, 0, .3) 45%, rgba(0, 0, 0, .8));
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.ff .main__section p {
    font-size: var(--typo-size-small)
}

@media (min-width:768px) {
    .ff .main__section p {
        font-size: var(--typo-size-base)
    }
}

.ff .main__headline {
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .2)
}

@media (min-width:768px) {
    .ff .main__headline {
        font-size: var(--typo-size-large);
        text-shadow: 3px 3px 10px rgba(0, 0, 0, .3)
    }
}

.ff .main__picture {
    bottom: 0;
    display: flex;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 0
}

.ff .main__img {
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.front__hl-container {
    align-items: center;
    display: flex;
    flex-direction: column
}

.front__headline {
    font-size: var(--typo-size-large) !important;
    margin: 0 !important
}

@media (min-width:768px) {
    .front__headline {
        font-size: var(--typo-size-xlarge) !important
    }
}

@media (min-width:1024px) {
    .front__headline {
        font-size: var(--typo-size-xxlarge) !important
    }
}

.front__headline--one {
    text-align: center !important;
}

@media (min-width:768px) {
    .front__headline--one {
        margin-left: -5rem
    }
}

@media (min-width:1024px) {
    .front__headline--one {
        margin-left: -8rem
    }
}

.front__headline--two {
    text-align: center !important;
}

@media (min-width:768px) {
    .front__headline--two {
        margin-right: -5rem
    }
}

@media (min-width:1024px) {
    .front__headline--two {
        margin-right: -8rem
    }
}

.front__span {
    display: inline-block !important
}

.front__crisis-text {
    font-size: var(--typo-size-small) !important
}

@media (min-width:768px) {
    .front__crisis-text {
        font-size: var(--typo-size-base) !important
    }
}

@media (min-width:1024px) {
    .front__crisis-text {
        font-size: var(--typo-size-medium) !important
    }
}

.front__crisis-text {
    font-weight: 700;
    margin-bottom: 1rem;
    margin-top: 2rem
}

.front__crisis-button {
    display: flex;
    justify-content: center
}

.track .form__item {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0
}

.track .form__input {
    border-bottom-right-radius: 0 !important;
    border-right-width: 0 !important;
    border-top-right-radius: 0 !important;
    flex: 1;
    font-size: 16px;
    opacity: 1 !important
}

.track .form__button, .track .form__input {
    height: 3rem !important;
    padding: .75rem !important
}

.track .form__button {
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    flex: 0 1 auto
}

.track .form__description {
    flex-basis: 100%
}

@media (min-width:1024px) {
    .ff .services .c-grid {
        margin-left: auto;
        margin-right: auto;
        max-width: 860px
    }
}

.ff .services__dragger {
    cursor: pointer;
    height: 40px;
    left: 0;
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap);
    position: absolute;
    width: calc(80% + 10px);
    z-index: 10
}

.ff .services__dragger svg {
    height: 40px;
    margin: auto;
    width: 40px
}

.ff .services__dragger.--prev {
    top: 0
}

.ff .services__dragger.--next {
    bottom: 0
}

.ff .services__wrapper {
    margin: 24px 0;
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 40%, #000 60%, transparent);
    mask-image: linear-gradient(0deg, transparent, #000 40%, #000 60%, transparent);
    overflow: hidden;
    padding-bottom: var(--spacing-large);
    padding-top: var(--spacing-large);
    position: relative
}

.ff .services__container {
    border-color: var(--color-white);
    border-radius: .375rem;
    border-width: 2px;
    height: 2.5rem;
    position: relative;
    width: 100%
}

@media (min-width:768px) {
    .ff .services__container {
        height: 3rem
    }
}

.ff .services__container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, .25)
}

.ff .services .main__headline {
    text-align: center;
    width: fit-content;
}

@media (min-width:640px) {
    .ff .services .main__headline {
        display: block
    }
}

@media (min-width:768px) {
    .ff .services .main__headline {
        width: 100%
    }
}

@media (min-width:1024px) {
    .ff .services .main__headline {
        text-align: left
    }
}

.ff .services__button {
    background-color: var(--color-white) !important;
    color: var(--color-gray-dark) !important;
    display: block !important;
    height: 2.5rem !important;
    margin-left: auto !important;
    position: absolute !important;
    width: 20% !important
}

@media (min-width:768px) {
    .ff .services__button {
        height: 3rem !important
    }
}

.ff .services__button {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    right: -2px;
    top: -2px
}

.ff .services__select {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    width: 80%
}

.ff .services .list {
    display: flex;
    flex-direction: column;
    left: 0;
    margin: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 80%
}

.ff .services .list__item {
    align-items: center;
    font-size: var(--typo-size-small);
    font-weight: 500;
    height: 2.5rem;
    justify-content: center;
    margin: 0;
    padding-left: .75rem;
    padding-right: .75rem
}

@media (min-width:768px) {
    .ff .services .list__item {
        font-size: var(--typo-size-base);
        height: 3rem
    }
}

.ff .services .list__item {
    -webkit-transform: scale(.75);
    transform: scale(.75);
    -webkit-transform-origin: center;
    transform-origin: center
}

.ff .services .list__item.--active {
    -webkit-transform: scale(1.25);
    transform: scale(1.25)
}

.ff .services .list__item.--neighbour {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.ff .services .list__item span {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    margin-left: 0;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
    width: 100%
}

@media (min-width:1024px) {
    .ff .about__hl.--line-one {
        font-size: var(--typo-size-large)
    }

    .ff .about__hl.--line-two {
        font-size: var(--typo-size-xlarge)
    }
}

.mobile-menu {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background-color: rgba(0, 0, 0, .4);
    bottom: 0;
    cursor: pointer;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 40
}

.mobile-menu__container {
    background-color: var(--color-white);
    box-shadow: var(--box-shadow-standard);
    color: var(--color-gray-dark);
    cursor: default;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: 40px;
    width: 100%;
    width: calc(100% - 40px)
}

@media (min-width:640px) {
    .mobile-menu__container {
        margin-left: 80px;
        width: calc(100% - 80px)
    }
}

.ff .mobile-menu__header {
    align-items: center;
    border-bottom: 1px solid var(--color-gray-rlight);
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    justify-content: space-between;
    padding: calc(var(--grid-gap)/2) var(--grid-gap)
}

@media (min-width:768px) {
    .ff .mobile-menu__header {
        padding-left: calc(var(--grid-gap)*2);
        padding-right: calc(var(--grid-gap)*2)
    }
}

.ff .mobile-menu__search {
    color: var(--color-gray-medium);
    flex: 1 1 0%;
    margin-left: 1rem;
    margin-right: 1rem
}

.ff .mobile-menu__search .search {
    display: block
}

.ff .mobile-menu__search .search .form__input {
    font-size: var(--typo-size-2xsmall);
    height: 2rem;
    padding-bottom: .25rem;
    padding-top: .25rem
}

.ff .mobile-menu__search .search .form__input::-webkit-input-placeholder {
    font-size: var(--typo-size-2xsmall)
}

.ff .mobile-menu__search .search .form__input:-ms-input-placeholder {
    font-size: var(--typo-size-2xsmall)
}

.ff .mobile-menu__search .search .form__input::placeholder {
    font-size: var(--typo-size-2xsmall)
}

.ff .mobile-menu__logo {
    flex: 0 1 auto
}

.ff .mobile-menu__button.--close {
    height: 38px;
    position: relative;
    transition: .5s;
    width: 28px
}

.ff .mobile-menu__button.--close span {
    background-color: var(--color-gray-light);
    border-radius: .375rem;
    display: block;
    height: 2px;
    left: 0;
    opacity: 1;
    position: absolute;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: .2s ease-in-out;
    width: 100%
}

.ff .mobile-menu__button.--close span:first-child {
    top: 18px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.ff .mobile-menu__button.--close span:nth-child(2) {
    top: 18px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.ff .mobile-menu__button.--close:hover {
    -webkit-transform: rotate(180deg) scale(.8);
    transform: rotate(180deg) scale(.8)
}

.ff .mobile-menu__navigation {
    background-color: var(--color-white);
    flex: 1;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: var(--grid-gap)
}

@media (min-width:768px) {
    .ff .mobile-menu__navigation {
        padding-left: calc(var(--grid-gap)*2);
        padding-right: calc(var(--grid-gap)*2)
    }
}

.ff .mobile-menu__navigation .mainmenu {
    display: block;
    margin: 0
}

.ff .mobile-menu__navigation .mainmenu__list {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    margin-right: 0
}

@media (min-width:768px) {
    .ff .mobile-menu__navigation .mainmenu__list {
        font-size: var(--typo-size-small)
    }
}

.ff .mobile-menu__navigation .mainmenu .menu__item {
    flex: 1 1 0%
}

.ff .mobile-menu__navigation .mainmenu .menu__link {
    display: block;
    margin: 0;
    padding-bottom: .5rem;
    padding-top: .5rem
}

.ff .mobile-menu__navigation .mainmenu .menu__list--lvl-1>.menu__item:not(:first-child) {
    margin-top: 1rem
}

.ff .mobile-menu__navigation .mainmenu .menu__list--lvl-2 .menu__link {
    letter-spacing: 0;
    padding-bottom: .25rem;
    padding-left: 1rem;
    padding-top: .25rem;
    text-transform: none
}


@media (min-width:1024px) {
    .ff {
        min-height: 90px
    }
}

.ff__container {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%
}

.ff__container.dark {
    background-color: var(--color-white);
    color: var(--color-white)
}

.officefinder {
    height: 800px;
    position: relative
}

@media (min-width:768px) {
    .officefinder {
        height: 620px
    }
}

.officefinder__map {
    background-color: var(--color-gray-light);
    border-radius: 10px;
    box-shadow: var(--box-shadow-standard);
    height: 468px;
    overflow: hidden;
    position: relative;
    width: 100%
}

@media (min-width:768px) {
    .officefinder__map {
        height: 100%
    }
}

.officefinder__loader {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%
}

.officefinder__list {
    background-color: var(--color-white);
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    box-shadow: var(--box-shadow-standard);
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    z-index: 20
}

@media (min-width:768px) {
    .officefinder__list {
        margin-bottom: 0;
        position: absolute;
        right: 1rem;
        top: -1rem;
        width: 50%
    }
}

@media (min-width:1024px) {
    .officefinder__list {
        right: 2rem;
        top: -2rem;
        width: 33.333333%
    }
}

@media (min-width:768px) {
    .officefinder__list {
        height: auto;
        max-height: 100%
    }
}

.officefinder__search {
    flex: 0 1 auto;
    padding: 1rem;
    position: relative
}

@media (min-width:768px) {
    .officefinder__search {
        padding: 1.5rem
    }
}

.officefinder__toggle {
    color: var(--color-gray-light);
    cursor: pointer;
    height: 21px;
    position: absolute;
    right: 1rem;
    top: 1rem;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
    width: 21px
}

.officefinder__toggle[data-open=false] {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

@media (min-width:768px) {
    .officefinder__toggle {
        right: 1.5rem;
        top: 1.5rem
    }
}

.officefinder__toggle svg {
    height: 21px;
    width: 21px
}

.officefinder__form {
    position: relative
}

.officefinder__form .officefinder__loader {
    height: 2rem;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 2rem
}

.officefinder__results {
    border-color: var(--color-gray-rlight);
    border-top-width: 1px;
    height: 200px;
    overflow-y: scroll
}

@media (min-width:768px) {
    .officefinder__results {
        flex: 1 1 0%;
        height: auto
    }
}

.officefinder__results[data-open=false] {
    flex: 0 0 0;
    height: 0
}

.officefinder__results .location:hover {
    background-color: var(--color-gray-rlight)
}

.officefinder__results .location {
    border-color: var(--color-gray-rlight);
    border-top-width: 1px;
    cursor: pointer;
    flex-direction: column;
    margin-bottom: 0;
    padding: .75rem
}

@media (min-width:768px) {
    .officefinder__results .location {
        padding: 1rem
    }
}

.officefinder__results .location {
    margin-bottom: 0 !important
}

.officefinder__results .location__headline {
    font-size: var(--typo-size-small);
    font-weight: 500;
    margin-bottom: .25rem
}

@media (min-width:768px) {
    .officefinder__results .location__headline {
        font-size: var(--typo-size-base)
    }
}

.officefinder__results .location__address {
    font-size: var(--typo-size-small)
}

.officefinder__results .location__details {
    font-size: var(--typo-size-small);
    overflow: hidden
}

.officefinder__results .location__country {
    color: var(--color-gray-light);
    margin-bottom: .25rem
}

.officefinder__results .location__contact {
    border-color: var(--color-white);
    border-top-width: 1px;
    margin-top: .5rem;
    padding-top: .5rem
}

.officefinder__results .location__contact__headline {
    color: var(--color-gray-dark);
    font-size: var(--typo-size-small)
}

.officefinder__results .location .contact__item:last-child {
    margin-bottom: 0
}

.officefinder__results .location .contact__icon {
    margin-left: 0
}

.officefinder__results .location .contact__content a {
    color: var(--color-gray-dark)
}

.--expand {
    background-position: 0;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1
}

.--expand--position-right {
    background-position: 100%;
    right: 0
}

.--appearance-overflowing-right {
    width: calc(100% + var(--grid-gap)*2)
}

.tabs .--appearance-overflowing-right {
    width: calc(100% + var(--grid-gap)*2 + var(--grid-gap)*3)
}

@media (min-width:640px) {
    .--appearance-overflowing-right {
        width: calc(100% + var(--grid-gap)*2)
    }

    .tabs .--appearance-overflowing-right {
        width: calc(100% + var(--grid-gap)*2 + var(--grid-gap)*3)
    }
}

@media (min-width:1024px) {
    .--appearance-overflowing-right {
        width: calc(100% + var(--grid-gap)*3)
    }

    .tabs .--appearance-overflowing-right {
        width: calc(100% + var(--grid-gap)*3 + var(--grid-gap)*3)
    }
}

@media (min-width:1280px) {
    .--appearance-overflowing-right {
        width: calc(100% + 50vw - var(--layout-max-width)/2 + var(--grid-gap))
    }

    .tabs .--appearance-overflowing-right {
        width: calc(100% + 50vw - var(--layout-max-width)/2 + var(--grid-gap) + var(--grid-gap)*3)
    }
}

.gradient--top-bottom--white-grey {
    background: linear-gradient(#fff, var(--color-gray-rlight))
}

.gradient--top-bottom--transparent-grey {
    background: linear-gradient(hsla(var(--hsl-white), .0001), rgba(245, 247, 248, .53), #eceff2)
}

.gradient--top-bottom--transparent-white {
    background: linear-gradient(rgba(255, 255, 255, .75), #fff)
}

.gradient+* {
    position: relative;
    z-index: 1
}

.shape {
    background-size: cover;
    overflow: hidden
}

@supports not ((-o-object-fit:cover) or (object-fit:cover)) {
    .shape>* {
        display: none
    }
}

.shape>* {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: right;
    object-position: right;
    width: 100%
}

.shape>* * {
    height: inherit;
    -o-object-fit: inherit;
    object-fit: inherit;
    -o-object-position: inherit;
    object-position: inherit;
    width: inherit
}

.shape.shape--bottom-left {
    border-bottom-left-radius: .5rem;
    border-top-left-radius: .5rem;
    -webkit-transform: skew(calc(var(--rotary)*-1));
    transform: skew(calc(var(--rotary)*-1));
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left
}

.shape.shape--bottom-left>* {
    -webkit-transform: skew(var(--rotary));
    transform: skew(var(--rotary));
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left
}

.shape.shape--bottom-left * {
    -o-object-position: right;
    object-position: right
}

.shape.shape--bottom-right {
    border-bottom-right-radius: .5rem;
    border-top-right-radius: .5rem;
    -webkit-transform: skew(var(--rotary));
    transform: skew(var(--rotary));
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right
}

.shape.shape--bottom-right>* {
    -webkit-transform: skew(calc(var(--rotary)*-1));
    transform: skew(calc(var(--rotary)*-1));
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right
}

.shape.shape--bottom-right * {
    -o-object-position: left;
    object-position: left
}

.shape.shape--top-right {
    border-bottom-right-radius: .5rem;
    border-top-right-radius: .5rem;
    -webkit-transform: skew(calc(var(--rotary)*-1));
    transform: skew(calc(var(--rotary)*-1));
    -webkit-transform-origin: top right;
    transform-origin: top right
}

.shape.shape--top-right>* {
    -webkit-transform: skew(var(--rotary));
    transform: skew(var(--rotary));
    -webkit-transform-origin: top right;
    transform-origin: top right
}

.shape.shape--top-right * {
    -o-object-position: left;
    object-position: left
}

.shape.shape--top-left {
    border-bottom-left-radius: .5rem;
    border-top-left-radius: .5rem;
    -webkit-transform: skew(var(--rotary));
    transform: skew(var(--rotary));
    -webkit-transform-origin: top left;
    transform-origin: top left
}

.shape.shape--top-left>* {
    -webkit-transform: skew(calc(var(--rotary)*-1));
    transform: skew(calc(var(--rotary)*-1));
    -webkit-transform-origin: top left;
    transform-origin: top left
}

.shape.shape--top-left *, .shape.shape--top-left>* {
    -o-object-position: right;
    object-position: right
}

.label {
    color: var(--color-gray-light);
    font-size: var(--typo-size-small);
    font-weight: 500;
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase
}

.label.--small {
    font-size: var(--typo-size-2xsmall)
}

.button {
    background-color: var(--color-gray-light);
    border: 2px solid var(--color-gray-light);
    border-radius: 5px;
    display: inline-block;
    font-size: var(--typo-size-xsmall);
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1;
    padding: 10px 16px;
    text-align: center;
    text-transform: uppercase;
    transition: .2s
}

.button:active, .button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

@media (min-width:768px) {
    .button {
        font-size: var(--typo-size-small);
        padding: 14px 20px
    }
}

.button.--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: var(--box-shadow-standard);
    color: var(--color-white)
}

.button.--primary:focus, .button.--primary:hover {
    background-color: var(--color-primary);
    border-color: transparent
}

.button.--secondary {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
    box-shadow: var(--box-shadow-standard);
    color: white;
}

.button.--secondary:hover {
    background-color: hsla(var(--hsl-gray-light), .8);
    border-color: transparent
}

.button.--outlined {
    background-color: transparent;
    border-color: var(--color-gray-medium);
    color: var(--color-gray-medium)
}

.button.--outlined:hover {
    border-color: hsla(var(--hsl-gray-medium), .7);
    color: hsla(var(--hsl-gray-medium), .7)
}

.button.--frosty {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: hsla(0, 0%, 100%, .3);
    border-color: var(--color-white)
}

.button.--frosty:hover {
    background-color: hsla(0, 0%, 100%, .4)
}

.button.--frosty.--filled {
    background-color: #fff;
    color: var(--color-gray-dark)
}

input[type=date], input[type=email], input[type=number], input[type=password], input[type=phone], input[type=search], input[type=tel], input[type=text], select {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-gray-rlight);
    border: 2px solid var(--color-gray-rlight);
    border-radius: .5rem;
    font-family: var(--typo-family-default);
    font-size: var(--typo-size-small);
    height: 2.5rem;
    line-height: 1;
    margin: 0;
    padding: .5rem;
    width: 100%
}

@media (min-width:768px) {
    input[type=date], input[type=email], input[type=number], input[type=password], input[type=phone], input[type=search], input[type=tel], input[type=text], select {
        height: 3rem;
        padding: .75rem;
        color: #B0BDC9;
    }
}

input[type=date]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=phone]::-webkit-input-placeholder, input[type=search]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=text]::-webkit-input-placeholder, select::-webkit-input-placeholder {
    color: var(--color-gray-medium);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase
}

input[type=date]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=phone]:-ms-input-placeholder, input[type=search]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=text]:-ms-input-placeholder, select:-ms-input-placeholder {

    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase
}

input[type=date]::placeholder, input[type=email]::placeholder, input[type=number]::placeholder, input[type=password]::placeholder, input[type=phone]::placeholder, input[type=search]::placeholder, input[type=tel]::placeholder, input[type=text]::placeholder, select::placeholder {
    color: var(--color-gray-medium);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase
}

input[type=date]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=phone]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, select:focus {
    background-color: var(--color-white);
    border-color: var(--color-gray-medium)
}

.form__input.--date, .form__input.--email, .form__input.--number, .form__input.--password, .form__input.--phone, .form__input.--search, .form__input.--select, .form__input.--tel, .form__input.--text, .form__select.--date, .form__select.--email, .form__select.--number, .form__select.--password, .form__select.--phone, .form__select.--search, .form__select.--select, .form__select.--tel, .form__select.--text {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-gray-rlight);
    border: 2px solid var(--color-gray-rlight);
    border-radius: .5rem;
    font-family: var(--typo-family-default);
    font-size: 1rem;
    height: 2.5rem;
    line-height: 1;
    margin: 0;
    padding: .5rem;
    transition: all .2s;
    width: 100%
}

@media (min-width:768px) {
    .form__input.--date, .form__input.--email, .form__input.--number, .form__input.--password, .form__input.--phone, .form__input.--search, .form__input.--select, .form__input.--tel, .form__input.--text, .form__select.--date, .form__select.--email, .form__select.--number, .form__select.--password, .form__select.--phone, .form__select.--search, .form__select.--select, .form__select.--tel, .form__select.--text {
        height: 3rem;
        padding: .75rem
    }
}

.form__input.--date::-webkit-input-placeholder, .form__input.--email::-webkit-input-placeholder, .form__input.--number::-webkit-input-placeholder, .form__input.--password::-webkit-input-placeholder, .form__input.--phone::-webkit-input-placeholder, .form__input.--search::-webkit-input-placeholder, .form__input.--select::-webkit-input-placeholder, .form__input.--tel::-webkit-input-placeholder, .form__input.--text::-webkit-input-placeholder, .form__select.--date::-webkit-input-placeholder, .form__select.--email::-webkit-input-placeholder, .form__select.--number::-webkit-input-placeholder, .form__select.--password::-webkit-input-placeholder, .form__select.--phone::-webkit-input-placeholder, .form__select.--search::-webkit-input-placeholder, .form__select.--select::-webkit-input-placeholder, .form__select.--tel::-webkit-input-placeholder, .form__select.--text::-webkit-input-placeholder {
    color: var(--color-gray-light);
    font-size: var(--typo-size-xsmall);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase
}

.form__input.--date:-ms-input-placeholder, .form__input.--email:-ms-input-placeholder, .form__input.--number:-ms-input-placeholder, .form__input.--password:-ms-input-placeholder, .form__input.--phone:-ms-input-placeholder, .form__input.--search:-ms-input-placeholder, .form__input.--select:-ms-input-placeholder, .form__input.--tel:-ms-input-placeholder, .form__input.--text:-ms-input-placeholder, .form__select.--date:-ms-input-placeholder, .form__select.--email:-ms-input-placeholder, .form__select.--number:-ms-input-placeholder, .form__select.--password:-ms-input-placeholder, .form__select.--phone:-ms-input-placeholder, .form__select.--search:-ms-input-placeholder, .form__select.--select:-ms-input-placeholder, .form__select.--tel:-ms-input-placeholder, .form__select.--text:-ms-input-placeholder {
    color: var(--color-gray-light);
    font-size: var(--typo-size-xsmall);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase
}

.form__input.--date::placeholder, .form__input.--email::placeholder, .form__input.--number::placeholder, .form__input.--password::placeholder, .form__input.--phone::placeholder, .form__input.--search::placeholder, .form__input.--select::placeholder, .form__input.--tel::placeholder, .form__input.--text::placeholder, .form__select.--date::placeholder, .form__select.--email::placeholder, .form__select.--number::placeholder, .form__select.--password::placeholder, .form__select.--phone::placeholder, .form__select.--search::placeholder, .form__select.--select::placeholder, .form__select.--tel::placeholder, .form__select.--text::placeholder {
    color: var(--color-gray-light);
    font-size: var(--typo-size-xsmall);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase
}

.form__input.--date:focus, .form__input.--email:focus, .form__input.--number:focus, .form__input.--password:focus, .form__input.--phone:focus, .form__input.--search:focus, .form__input.--select:focus, .form__input.--tel:focus, .form__input.--text:focus, .form__select.--date:focus, .form__select.--email:focus, .form__select.--number:focus, .form__select.--password:focus, .form__select.--phone:focus, .form__select.--search:focus, .form__select.--select:focus, .form__select.--tel:focus, .form__select.--text:focus {
    background-color: var(--color-white);
    border-color: var(--color-gray-light)
}

.form__input.--date.--frosty, .form__input.--email.--frosty, .form__input.--number.--frosty, .form__input.--password.--frosty, .form__input.--phone.--frosty, .form__input.--search.--frosty, .form__input.--select.--frosty, .form__input.--tel.--frosty, .form__input.--text.--frosty, .form__select.--date.--frosty, .form__select.--email.--frosty, .form__select.--number.--frosty, .form__select.--password.--frosty, .form__select.--phone.--frosty, .form__select.--search.--frosty, .form__select.--select.--frosty, .form__select.--tel.--frosty, .form__select.--text.--frosty {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: hsla(0, 0%, 100%, .2);
    border-color: var(--color-white)
}

.form__input.--date.--frosty::-webkit-input-placeholder, .form__input.--email.--frosty::-webkit-input-placeholder, .form__input.--number.--frosty::-webkit-input-placeholder, .form__input.--password.--frosty::-webkit-input-placeholder, .form__input.--phone.--frosty::-webkit-input-placeholder, .form__input.--search.--frosty::-webkit-input-placeholder, .form__input.--select.--frosty::-webkit-input-placeholder, .form__input.--tel.--frosty::-webkit-input-placeholder, .form__input.--text.--frosty::-webkit-input-placeholder, .form__select.--date.--frosty::-webkit-input-placeholder, .form__select.--email.--frosty::-webkit-input-placeholder, .form__select.--number.--frosty::-webkit-input-placeholder, .form__select.--password.--frosty::-webkit-input-placeholder, .form__select.--phone.--frosty::-webkit-input-placeholder, .form__select.--search.--frosty::-webkit-input-placeholder, .form__select.--select.--frosty::-webkit-input-placeholder, .form__select.--tel.--frosty::-webkit-input-placeholder, .form__select.--text.--frosty::-webkit-input-placeholder {
    color: var(--color-white)
}

.form__input.--date.--frosty:-ms-input-placeholder, .form__input.--email.--frosty:-ms-input-placeholder, .form__input.--number.--frosty:-ms-input-placeholder, .form__input.--password.--frosty:-ms-input-placeholder, .form__input.--phone.--frosty:-ms-input-placeholder, .form__input.--search.--frosty:-ms-input-placeholder, .form__input.--select.--frosty:-ms-input-placeholder, .form__input.--tel.--frosty:-ms-input-placeholder, .form__input.--text.--frosty:-ms-input-placeholder, .form__select.--date.--frosty:-ms-input-placeholder, .form__select.--email.--frosty:-ms-input-placeholder, .form__select.--number.--frosty:-ms-input-placeholder, .form__select.--password.--frosty:-ms-input-placeholder, .form__select.--phone.--frosty:-ms-input-placeholder, .form__select.--search.--frosty:-ms-input-placeholder, .form__select.--select.--frosty:-ms-input-placeholder, .form__select.--tel.--frosty:-ms-input-placeholder, .form__select.--text.--frosty:-ms-input-placeholder {
    color: var(--color-white)
}

.form__input.--date.--frosty::placeholder, .form__input.--email.--frosty::placeholder, .form__input.--number.--frosty::placeholder, .form__input.--password.--frosty::placeholder, .form__input.--phone.--frosty::placeholder, .form__input.--search.--frosty::placeholder, .form__input.--select.--frosty::placeholder, .form__input.--tel.--frosty::placeholder, .form__input.--text.--frosty::placeholder, .form__select.--date.--frosty::placeholder, .form__select.--email.--frosty::placeholder, .form__select.--number.--frosty::placeholder, .form__select.--password.--frosty::placeholder, .form__select.--phone.--frosty::placeholder, .form__select.--search.--frosty::placeholder, .form__select.--select.--frosty::placeholder, .form__select.--tel.--frosty::placeholder, .form__select.--text.--frosty::placeholder {
    color: var(--color-white)
}

.form__input.--date.--frosty:focus, .form__input.--email.--frosty:focus, .form__input.--number.--frosty:focus, .form__input.--password.--frosty:focus, .form__input.--phone.--frosty:focus, .form__input.--search.--frosty:focus, .form__input.--select.--frosty:focus, .form__input.--tel.--frosty:focus, .form__input.--text.--frosty:focus, .form__select.--date.--frosty:focus, .form__select.--email.--frosty:focus, .form__select.--number.--frosty:focus, .form__select.--password.--frosty:focus, .form__select.--phone.--frosty:focus, .form__select.--search.--frosty:focus, .form__select.--select.--frosty:focus, .form__select.--tel.--frosty:focus, .form__select.--text.--frosty:focus {
    background-color: hsla(0, 0%, 100%, .3)
}

.form__input.--date.--error, .form__input.--email.--error, .form__input.--number.--error, .form__input.--password.--error, .form__input.--phone.--error, .form__input.--search.--error, .form__input.--select.--error, .form__input.--tel.--error, .form__input.--text.--error, .form__select.--date.--error, .form__select.--email.--error, .form__select.--number.--error, .form__select.--password.--error, .form__select.--phone.--error, .form__select.--search.--error, .form__select.--select.--error, .form__select.--tel.--error, .form__select.--text.--error {
    --border-opacity: 1;
    border-color: #feb2b2;
    border-color: rgba(254, 178, 178, var(--border-opacity))
}

.form__input.--checkbox {
    display: none
}

.form__input.--checkbox+.form__label {
    align-items: center;
    color: var(--color-gray-dark);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    padding-left: 0;
    text-transform: none
}

.form__input.--checkbox+.form__label:before {
    color: var(--color-gray-light);
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect stroke='%23B1BDCA' stroke-width='2' fill='%23ECEFF2' x='1' y='1' width='18' height='18' rx='3' fill-rule='evenodd'/%3E%3C/svg%3E");
    height: 20px;
    margin-right: .5rem;
    transition: .2s;
    width: 20px
}

.form__input.--checkbox+.form__label:hover:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect stroke='%23B1BDCA' stroke-width='2' fill='%23B1BDCA' x='1' y='1' width='18' height='18' rx='3'/%3E%3Cpath d='M15.602 5.477a.563.563 0 0 1 .834.753l-.038.043-8.25 8.25a.563.563 0 0 1-.753.038l-.043-.038-3.75-3.75a.562.562 0 0 1 .753-.834l.043.038L7.75 13.33l7.852-7.853z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E")
}

.form__input.--checkbox:checked+.form__label:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect stroke='%23004C99' stroke-width='2' fill='%23004C99' x='1' y='1' width='18' height='18' rx='3'/%3E%3Cpath d='M15.602 5.477a.563.563 0 0 1 .834.753l-.038.043-8.25 8.25a.563.563 0 0 1-.753.038l-.043-.038-3.75-3.75a.562.562 0 0 1 .753-.834l.043.038L7.75 13.33l7.852-7.853z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E")
}

.form__input.--checkbox.--frosty+.form__label {
    color: var(--color-white)
}

.form__input.--checkbox.--frosty+.form__label:before {
    color: var(--color-white);
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect stroke='%23FFF' stroke-width='2' fill='none' x='1' y='1' width='18' height='18' rx='3'/%3E%3C/svg%3E")
}

.form__input.--checkbox.--frosty+.form__label:hover:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect stroke='%23FFF' stroke-width='2' x='1' y='1' width='18' height='18' rx='3'/%3E%3Cpath d='M15.602 5.477a.563.563 0 0 1 .834.753l-.038.043-8.25 8.25a.563.563 0 0 1-.753.038l-.043-.038-3.75-3.75a.562.562 0 0 1 .753-.834l.043.038L7.75 13.33l7.852-7.853z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E")
}

.form__input.--checkbox:checked.--frosty+.form__label:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect stroke='%23FFF' stroke-width='2' fill='rgba(255, 255, 255, 0.3)' x='1' y='1' width='18' height='18' rx='3'/%3E%3Cpath d='M15.602 5.477a.563.563 0 0 1 .834.753l-.038.043-8.25 8.25a.563.563 0 0 1-.753.038l-.043-.038-3.75-3.75a.562.562 0 0 1 .753-.834l.043.038L7.75 13.33l7.852-7.853z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E")
}

.form__input.--radio {
    display: none
}

.form__input.--radio+.form__label {
    align-items: center;
    color: var(--color-gray-dark);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    padding-left: 0;
    text-transform: none
}

.form__input.--radio+.form__label:before {
    color: var(--color-gray-light);
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle stroke='%23B1BDCA' stroke-width='2' fill='%23ECEFF2' cx='10' cy='10' r='9' fill-rule='evenodd'/%3E%3C/svg%3E");
    height: 20px;
    margin-right: .5rem;
    transition: .2s;
    width: 20px
}

.form__input.--radio+.form__label:hover:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23B1BDCA' stroke-width='2' fill='%23ECEFF2' cx='10' cy='10' r='9'/%3E%3Ccircle fill='%23B1BDCA' cx='10' cy='10' r='5'/%3E%3C/g%3E%3C/svg%3E")
}

.form__input.--radio:checked+.form__label:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23004C99' stroke-width='2' fill='%23ECEFF2' cx='10' cy='10' r='9'/%3E%3Ccircle fill='%23004C99' cx='10' cy='10' r='5'/%3E%3C/g%3E%3C/svg%3E")
}

.form__input.--radio.--frosty+.form__label {
    color: var(--color-white)
}

.form__input.--radio.--frosty+.form__label:before {
    color: var(--color-white);
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle stroke='%23FFF' stroke-width='2' fill='none' cx='10' cy='10' r='9'/%3E%3C/svg%3E")
}

.form__input.--radio.--frosty+.form__label:hover:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23FFF' stroke-width='2' fill='%23ECEFF2' cx='10' cy='10' r='9'/%3E%3Ccircle fill='rgba(255, 255, 255, .5)' cx='10' cy='10' r='5'/%3E%3C/g%3E%3C/svg%3E")
}

.form__input.--radio:checked.--frosty+.form__label:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%23FFF' stroke-width='2' cx='10' cy='10' r='9'/%3E%3Ccircle fill='%23FFF' cx='10' cy='10' r='5'/%3E%3C/g%3E%3C/svg%3E")
}

.form__textarea {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-gray-rlight);
    border: 2px solid var(--color-gray-rlight);
    border-radius: .5rem;
    font-family: var(--typo-family-default);
    font-size: 1rem;
    line-height: 1;
    margin: 0;
    min-height: 90px;
    padding: .75rem;
    transition: all .2s;
    width: 100%
}

.form__textarea::-webkit-input-placeholder {
    color: var(--color-gray-light);
    font-size: var(--typo-size-xsmall);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase
}

.form__textarea:-ms-input-placeholder {
    color: var(--color-gray-light);
    font-size: var(--typo-size-xsmall);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase
}

.form__textarea::placeholder {
    color: var(--color-gray-light);
    font-size: var(--typo-size-xsmall);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase
}

.form__textarea:focus {
    background-color: var(--color-white);
    border-color: var(--color-gray-light)
}

.form__textarea.--frosty {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: hsla(0, 0%, 100%, .2);
    border-color: var(--color-white)
}

.form__textarea.--frosty::-webkit-input-placeholder {
    color: var(--color-gray-rlight)
}

.form__textarea.--frosty:-ms-input-placeholder {
    color: var(--color-gray-rlight)
}

.form__textarea.--frosty::placeholder {
    color: var(--color-gray-rlight)
}

.form__textarea.--frosty:focus {
    background-color: hsla(0, 0%, 100%, .3)
}

.form__select {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-gray-rlight);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg' fill='%23B1BDCA'%3E%3Cpath d='M41.227 16.775a1.437 1.437 0 0 1 1.995.3 1.4 1.4 0 0 1-.196 1.887l-.106.086-18.074 13.177a1.44 1.44 0 0 1-1.573.078l-.12-.078L5.08 19.048a1.402 1.402 0 0 1-.302-1.974 1.437 1.437 0 0 1 1.88-.374l.115.075L24 29.335l17.227-12.56z'/%3E%3C/svg%3E");
    background-position: center right 16px;
    background-repeat: no-repeat;
    background-size: 28px auto;
    border: 2px solid var(--color-gray-rlight);
    border-radius: .5rem;
    cursor: pointer;
    font-family: var(--typo-family-default);
    font-size: 1rem;
    height: 2.5rem;
    line-height: 1;
    margin: 0;
    padding: .5rem;
    position: relative;
    transition: border .2s;
    width: 100%
}

@media (min-width:768px) {
    .form__select {
        height: 3rem;
        padding: .75rem
    }
}

.form__select::-ms-expand {
    display: none
}

.form__select option.placeholder {
    color: var(--color-gray-light);
    font-size: var(--typo-size-xsmall);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase
}

.form__select:focus {
    background-color: var(--color-white);
    border-color: var(--color-gray-light)
}

.form__select.--frosty {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: hsla(0, 0%, 100%, .2);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M41.227 16.775a1.437 1.437 0 0 1 1.995.3 1.4 1.4 0 0 1-.196 1.887l-.106.086-18.074 13.177a1.44 1.44 0 0 1-1.573.078l-.12-.078L5.08 19.048a1.402 1.402 0 0 1-.302-1.974 1.437 1.437 0 0 1 1.88-.374l.115.075L24 29.335l17.227-12.56z'/%3E%3C/svg%3E");
    border-color: var(--color-white)
}

.form__select.--frosty::-webkit-input-placeholder {
    color: var(--color-gray-rlight)
}

.form__select.--frosty:-ms-input-placeholder {
    color: var(--color-gray-rlight)
}

.form__select.--frosty::placeholder {
    color: var(--color-gray-rlight)
}

.form__select.--frosty:focus {
    background-color: hsla(0, 0%, 100%, .3)
}

.form__select.--frosty option {
    color: var(--color-gray-medium)
}

.image__wrapper {
    overflow: hidden
}

.image__img {
    display: block
}

.image.--hwl_image_component_nocrop .image__wrapper, .image.--hwl_related_content .image__wrapper, .image.--standard .image__wrapper {
    border-bottom-right-radius: var(--border-radius-medium);
    border-top-left-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-standard)
}

.image.--clean .image__wrapper {
    border-radius: 0;
    box-shadow: none
}

.icon__svg, .icon svg {
    display: block;
    height: auto;
    width: 100%
}

.icon.--circled {
    background-color: hsl(32.48deg 100% 94.46%);
    border-radius: 9999px;
    color: var(--color-gray-medium);
    display: flex;
    flex: 0 0 28px;
    height: 28px;
    padding: 6px;
    width: 28px
}

.icon.--circled.--big {
    padding: .75rem
}

.icon.--circled.--xl {
    padding: 1.25rem
}

.icon.--big {
    flex: 0 0 40px;
    height: 40px;
    width: 40px
}

.icon.--xl {
    flex: 0 0 40px;
    height: 96px;
    width: 96px
}

.hwl__rounded {
    border-bottom-right-radius: var(--border-radius-medium);
    border-top-left-radius: var(--border-radius-medium);
    overflow: hidden
}

.form__item {
    flex: 1;
    margin-bottom: var(--grid-gap)
}

.form__item.--glassy input[type=date], .form__item.--glassy input[type=email], .form__item.--glassy input[type=number], .form__item.--glassy input[type=password], .form__item.--glassy input[type=phone], .form__item.--glassy input[type=search], .form__item.--glassy input[type=tel], .form__item.--glassy input[type=text], .form__item.--glassy select, .form__item.--glassy textarea {
    background-color: transparent;
    border-color: var(--color-white);
    border-radius: .5rem;
    opacity: .8
}

.form__item.--glassy input[type=date]::-webkit-input-placeholder, .form__item.--glassy input[type=email]::-webkit-input-placeholder, .form__item.--glassy input[type=number]::-webkit-input-placeholder, .form__item.--glassy input[type=password]::-webkit-input-placeholder, .form__item.--glassy input[type=phone]::-webkit-input-placeholder, .form__item.--glassy input[type=search]::-webkit-input-placeholder, .form__item.--glassy input[type=tel]::-webkit-input-placeholder, .form__item.--glassy input[type=text]::-webkit-input-placeholder, .form__item.--glassy select::-webkit-input-placeholder, .form__item.--glassy textarea::-webkit-input-placeholder {
    color: var(--color-gray-rlight);
    letter-spacing: .1em;
    text-transform: uppercase
}

.form__item.--glassy input[type=date]:-ms-input-placeholder, .form__item.--glassy input[type=email]:-ms-input-placeholder, .form__item.--glassy input[type=number]:-ms-input-placeholder, .form__item.--glassy input[type=password]:-ms-input-placeholder, .form__item.--glassy input[type=phone]:-ms-input-placeholder, .form__item.--glassy input[type=search]:-ms-input-placeholder, .form__item.--glassy input[type=tel]:-ms-input-placeholder, .form__item.--glassy input[type=text]:-ms-input-placeholder, .form__item.--glassy select:-ms-input-placeholder, .form__item.--glassy textarea:-ms-input-placeholder {
    color: var(--color-gray-rlight);
    letter-spacing: .1em;
    text-transform: uppercase
}

.form__item.--glassy input[type=date]::placeholder, .form__item.--glassy input[type=email]::placeholder, .form__item.--glassy input[type=number]::placeholder, .form__item.--glassy input[type=password]::placeholder, .form__item.--glassy input[type=phone]::placeholder, .form__item.--glassy input[type=search]::placeholder, .form__item.--glassy input[type=tel]::placeholder, .form__item.--glassy input[type=text]::placeholder, .form__item.--glassy select::placeholder, .form__item.--glassy textarea::placeholder {
    color: var(--color-gray-rlight);
    letter-spacing: .1em;
    text-transform: uppercase
}

.form__item.--glassy input[type=date]:focus, .form__item.--glassy input[type=email]:focus, .form__item.--glassy input[type=number]:focus, .form__item.--glassy input[type=password]:focus, .form__item.--glassy input[type=phone]:focus, .form__item.--glassy input[type=search]:focus, .form__item.--glassy input[type=tel]:focus, .form__item.--glassy input[type=text]:focus, .form__item.--glassy select:focus, .form__item.--glassy textarea:focus {
    opacity: 1
}

.form__item.--glassy .button {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: hsla(0, 0%, 100%, .25);
    border-color: var(--color-white)
}

.form__item.--glassy .button:hover {
    background-color: hsla(0, 0%, 100%, .35)
}

.form__item.--glassy .button:hover .form__button__icon {
    --transform-translate-x: 0;
    --transform-translate-y: 0;
    --transform-rotate: 0;
    --transform-skew-x: 0;
    --transform-skew-y: 0;
    --transform-scale-x: 1;
    --transform-scale-y: 1;
    --transform-scale-x: .9;
    --transform-scale-y: .9;
    -webkit-transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
    transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))
}

.form__item.--checkbox .form__label, .form__item.--radio .form__label {
    display: flex
}

.form__label__required {
    color: var(--color-gray-medium)
}

.form__description {
    font-size: var(--typo-size-small);
    margin-top: .5rem
}

.form__error-msg {
    font-size: var(--typo-size-xsmall);
    margin-left: .5rem;
    margin-top: .25rem
}

.form__button__icon {
    display: block;
    transition-duration: .15s;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    width: 20px
}

.form__button__icon svg path {
    fill: var(--color-white)
}

.item-list {
    align-items: center;
    border-radius: .375rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: var(--grid-gap);
    position: relative;
    transition: background-color .3s;
    width: 100%
}

.item-list:hover {
    background-color: var(--color-gray-rlight)
}

.item-list:hover .item-list__icon .--circled {
    background-color: var(--color-primary);
    color: var(--color-gray-rlight)
}

.item-list__link {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9
}

.item-list__link:hover+.downloads a {
    color: var(--color-primary)
}

.item-list__content {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    max-width: calc(100% - 50px)
}

.item-list__content__meta {
    color: var(--color-gray-light)
}

.item-list__content__meta>* {
    display: inline-block
}

.item-list__content__title {
    color: var(--color-gray-dark);
    margin-bottom: 0;
    transition: color .3s;
    width: 100%
}

.item-list__icon svg {
    overflow: visible
}

.item-list__icon .--circled {
    transition: background-color .3s, color .3s
}

.list {
    margin-bottom: 1em
}

.list__item {
    align-items: self-start;
    display: flex
}

.list__item:not(:last-child) {
    margin-bottom: 1.25rem
}

.list__item span {
    margin-left: var(--spacing-small)
}

.list.--ordered .list__icon {
    align-items: center;
    display: flex;
    justify-content: center
}

.list.--ordered .list__icon:after {
    color: var(--color-gray-medium);
    content: attr(data-index);
    display: block;
    font-size: var(--typo-size-xsmall);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    width: 100%
}

.pager {
    border-color: var(--color-gray-rlight);
    border-top-width: 1px;
    margin-top: var(--grid-gap);
    padding-top: var(--grid-gap)
}

.pager__items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center
}

.pager__item {
    flex: 0 1 auto;
    padding: .25rem
}

.pager__item.is-active a, .pager__item.is-active a:hover {
    background-color: var(--color-primary);
    color: var(--color-white)
}

.pager__item a {
    border-radius: .375rem;
    color: var(--color-gray-medium);
    display: block;
    font-size: var(--typo-size-small);
    font-weight: 500;
    line-height: 1;
    padding: .5rem .75rem;
    text-transform: uppercase;
    transition: .2s
}

.pager__item a:hover {
    background-color: var(--color-gray-rlight)
}

.person {
    align-items: center
}

.person__name {
    margin-bottom: var(--spacing-xsmall)
}

.person__position {
    color: var(--color-gray-light)
}

.person__contacts {
    font-size: var(--typo-size-small)
}

.person__link {
    align-items: center;
    display: flex;
    flex-direction: row;
    margin-top: .25rem;
    transition: .3s;
    word-break: break-all
}

.person__link:hover {
    color: var(--color-primary)
}

.person__link .icon {
    margin-right: .5rem
}

.person+.person {
    margin-top: var(--spacing-small)
}

.person.--teaser .person__image {
    flex: 0 0 166px
}

.video__container {
    height: 0;
    max-width: 100%;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative
}

.video__container embed, .video__container iframe, .video__container object {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

iframe:not([data-cookieblock-src])+.video__unallowed {
    display: none
}

.video__unallowed {
    align-content: center;
    align-items: center;
    background: url(../../../../themes/hwl/src/images/icons/youtube.svg) 100%/auto 79% no-repeat, var(--color-gray-rlight);
    border-bottom-right-radius: 8px;
    border-top-left-radius: 8px;
    color: var(--color-primary);
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
    padding: var(--grid-gap);
    position: absolute;
    text-align: center;
    width: 100%
}

.video__unallowed__text {
    width: 100%
}

.video__unallowed__button {
    border-color: var(--color-gray-medium) !important;
    color: var(--color-gray-medium) !important;
    margin-top: var(--grid-gap)
}

.slider__pagination {
    position: relative
}

.slider__navigation {
    display: flex;
    justify-content: flex-end
}

.slider__navigation__item {
    color: var(--color-gray-medium);
    cursor: pointer;
    height: 32px;
    width: 32px
}

.slider__navigation__item.swiper-button-disabled {
    opacity: .5
}

.slider__navigation__item--next {
    margin-left: var(--grid-gap)
}

.slider.--gallery .slider__wrapper {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem
}

.slider.--gallery .slider__navigation {
    position: relative
}

.slider.--gallery .slider__item {
    position: relative
}

.slider.--media-assets .slider__wrapper, .slider.--media-assets .slider__wrapper *, .slider.--related-contents .slider__wrapper, .slider.--related-contents .slider__wrapper * {
    max-height: 70vh
}

.slider.--media-assets .slider__pagination, .slider.--related-contents .slider__pagination {
    -o-object-fit: none;
    object-fit: none;
    text-align: left;
    width: 100%
}

@media (min-width:640px) {
    .slider.--media-assets .slider__pagination__wrapper, .slider.--related-contents .slider__pagination__wrapper {
        max-width: 640px
    }
}

@media (min-width:768px) {
    .slider.--media-assets .slider__pagination__wrapper, .slider.--related-contents .slider__pagination__wrapper {
        max-width: 768px
    }
}

@media (min-width:1024px) {
    .slider.--media-assets .slider__pagination__wrapper, .slider.--related-contents .slider__pagination__wrapper {
        max-width: 1024px
    }
}

@media (min-width:1280px) {
    .slider.--media-assets .slider__pagination__wrapper, .slider.--related-contents .slider__pagination__wrapper {
        max-width: 1280px
    }
}

.slider.--media-assets .slider__pagination__wrapper, .slider.--related-contents .slider__pagination__wrapper {
    bottom: 0;
    height: auto;
    -o-object-fit: none;
    object-fit: none;
    padding-bottom: .5rem;
    position: absolute;
    text-align: left;
    z-index: 10
}

.slider.--media-assets .slider__pagination .grid-example__wrapper, .slider.--related-contents .slider__pagination .grid-example__wrapper {
    height: 100%
}

.slider.--media-assets .slider__pagination .grid-example__wrapper .c-grid, .slider.--related-contents .slider__pagination .grid-example__wrapper .c-grid {
    flex-wrap: nowrap;
    height: 100%
}

.slider.--media-assets .slider__pagination .grid-example__wrapper .c-grid .c-column, .slider.--related-contents .slider__pagination .grid-example__wrapper .c-grid .c-column {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.slider.--media-assets .slider__pagination .grid-example__wrapper .c-grid .c-column:after, .slider.--related-contents .slider__pagination .grid-example__wrapper .c-grid .c-column:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

.slider.--media-assets .slider__pagination__wrapper, .slider.--related-contents .slider__pagination__wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(var(--layout-max-width) + var(--grid-gap)*4);
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap);
    width: 100%
}

@media (min-width:640px) {
    .slider.--media-assets .slider__pagination__wrapper, .slider.--related-contents .slider__pagination__wrapper {
        padding-left: calc(var(--grid-gap)*2);
        padding-right: calc(var(--grid-gap)*2)
    }
}

@media (min-width:1024px) {
    .slider.--media-assets .slider__pagination__wrapper, .slider.--related-contents .slider__pagination__wrapper {
        padding-left: calc(var(--grid-gap)*3);
        padding-right: calc(var(--grid-gap)*3)
    }
}

.slider.--media-assets .slider__pagination__wrapper.--fluid, .slider.--related-contents .slider__pagination__wrapper.--fluid {
    max-width: none
}

@media (min-width:768px) {
    .slider.--media-assets .slider__pagination__wrapper.--fluid, .slider.--related-contents .slider__pagination__wrapper.--fluid {
        max-width: none
    }
}


.slider.--media-assets .slider__pagination .hero.--full-image .hero__head__wrapper, .slider.--related-contents .slider__pagination .hero.--full-image .hero__head__wrapper {
    padding-left: calc(var(--grid-gap)*2);
    padding-right: calc(var(--grid-gap)*2)
}

@media (min-width:1024px) {
    .slider.--media-assets .slider__pagination .hero.--full-image .hero__head__wrapper, .slider.--related-contents .slider__pagination .hero.--full-image .hero__head__wrapper {
        padding-left: calc(var(--grid-gap)*3);
        padding-right: calc(var(--grid-gap)*3)
    }
}

.slider.--media-assets .slider__pagination__wrapper, .slider.--related-contents .slider__pagination__wrapper {
    left: 50vw !important;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw !important
}

.slider.--media-assets .slider__pagination .swiper-pagination-bullet, .slider.--related-contents .slider__pagination .swiper-pagination-bullet {
    background-color: hsla(var(--hsl-white), .4);
    border-radius: .375rem;
    height: 5px;
    opacity: 1;
    overflow: hidden;
    position: relative;
    transition: .3s;
    width: calc(var(--spacing-small)*3)
}

@media (min-width:640px) {
    .slider.--media-assets .slider__pagination .swiper-pagination-bullet, .slider.--related-contents .slider__pagination .swiper-pagination-bullet {
        width: calc(var(--spacing-base)*3)
    }
}

.slider.--media-assets .slider__pagination .swiper-pagination-bullet:not(:first-child), .slider.--related-contents .slider__pagination .swiper-pagination-bullet:not(:first-child) {
    margin-left: .5rem
}

.slider.--media-assets .slider__pagination .swiper-pagination-bullet:hover:not(.swiper-pagination-bullet-active), .slider.--related-contents .slider__pagination .swiper-pagination-bullet:hover:not(.swiper-pagination-bullet-active) {
    background-color: hsla(var(--hsl-white), .7)
}

.slider.--media-assets .slider__pagination .swiper-pagination-bullet span, .slider.--related-contents .slider__pagination .swiper-pagination-bullet span {
    background-color: var(--color-white);
    border-radius: .375rem;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 0
}

.slider.--media-assets .slider__pagination .image.--standard .image__wrapper, .slider.--related-contents .slider__pagination .image.--standard .image__wrapper {
    border-top-left-radius: 0
}

.slider.--media-assets.--alignment-right .slider__pagination, .slider.--related-contents.--alignment-right .slider__pagination {
    text-align: right
}

.slider.--media-assets.--alignment-right .slider__pagination__wrapper, .slider.--related-contents.--alignment-right .slider__pagination__wrapper {
    left: auto !important;
    right: 50vw !important;
    -webkit-transform: translateX(50%);
    transform: translateX(50%)
}

.slider.--media-assets.--alignment-right .image.--standard .image__wrapper, .slider.--related-contents.--alignment-right .image.--standard .image__wrapper {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0
}

.slider.--media-assets.--alignment-left .image.--standard .image__wrapper, .slider.--related-contents.--alignment-left .image.--standard .image__wrapper {
    border-top-left-radius: 0
}

.slider.--related-contents h3 {
    color: var(--color-white);
    font-family: var(--typo-family-default);
    font-size: var(--typo-size-base-large);
    font-weight: 300
}

.slider.--related-contents .slider__wrapper {
    max-height: unset;
    min-height: 400px
}

.slider.--related-contents .slider__wrapper * {
    max-height: unset
}

.slider.--related-contents .slider__image {
    height: 100%;
    width: 100%
}

.slider.--related-contents .slider__image .image__wrapper {
    overflow: hidden;
    position: relative
}

.slider.--related-contents .slider__image .image__wrapper:before {
    background: hsla(var(--hsl-black), .8);
    background: linear-gradient(hsla(var(--hsl-black), .4), hsla(var(--hsl-black), .7));
    content: "";
    height: 100%;
    left: 0;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    width: 100%
}

.slider.--related-contents .slider__content {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.slider.--related-contents .slider__content .button {
    color: var(--color-white);
    display: inline
}

.slider.--related-contents .slider__pagination {
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap);
    text-align: right
}

@media (min-width:640px) {
    .slider.--related-contents .slider__pagination__wrapper {
        max-width: 640px
    }
}

@media (min-width:768px) {
    .slider.--related-contents .slider__pagination__wrapper {
        max-width: 768px
    }
}

@media (min-width:1024px) {
    .slider.--related-contents .slider__pagination__wrapper {
        max-width: 1024px
    }
}

@media (min-width:1280px) {
    .slider.--related-contents .slider__pagination__wrapper {
        max-width: 1280px
    }
}

.slider.--related-contents .slider__pagination .grid-example__wrapper {
    height: 100%
}

.slider.--related-contents .slider__pagination .grid-example__wrapper .c-grid {
    flex-wrap: nowrap;
    height: 100%
}

.slider.--related-contents .slider__pagination .grid-example__wrapper .c-grid .c-column {
    background: linear-gradient(90deg, var(--color-hwl-blue) 0, var(--color-hwl-blue) 16px, var(--color-gray-rlight) 16px, var(--color-gray-rlight) calc(100% - 16px), var(--color-hwl-blue) calc(100% - 16px));
    flex-shrink: 1;
    opacity: .2;
    padding: 0;
    position: relative;
    width: 8.333333%
}

.slider.--related-contents .slider__pagination .grid-example__wrapper .c-grid .c-column:after {
    background: #fff;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 1px
}

.slider.--related-contents .slider__pagination__wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(var(--layout-max-width) + var(--grid-gap)*4);
    padding-left: var(--grid-gap);
    padding-right: var(--grid-gap);
    width: 100%
}

@media (min-width:640px) {
    .slider.--related-contents .slider__pagination__wrapper {
        padding-left: calc(var(--grid-gap)*2);
        padding-right: calc(var(--grid-gap)*2)
    }
}

@media (min-width:1024px) {
    .slider.--related-contents .slider__pagination__wrapper {
        padding-left: calc(var(--grid-gap)*3);
        padding-right: calc(var(--grid-gap)*3)
    }
}

.slider.--related-contents .slider__pagination__wrapper.--fluid {
    max-width: none
}

@media (min-width:768px) {
    .slider.--related-contents .slider__pagination__wrapper.--fluid {
        max-width: none
    }
}

.slider.--related-contents .slider__pagination .hero.--full-image .hero__head__wrapper {
    padding-left: calc(var(--grid-gap)*2);
    padding-right: calc(var(--grid-gap)*2)
}

@media (min-width:1024px) {
    .slider.--related-contents .slider__pagination .hero.--full-image .hero__head__wrapper {
        padding-left: calc(var(--grid-gap)*3);
        padding-right: calc(var(--grid-gap)*3)
    }
}

.slider.--related-contents .slider__pagination__wrapper {
    left: 50% !important
}

@media (min-width:640px) {
    .slider.--related-contents h3 {
        font-size: var(--typo-size-medium)
    }
}

@media (min-width:768px) {
    .slider.--related-contents h3 {
        font-size: var(--typo-size-large)
    }
}

@media (min-width:1024px) {
    .slider.--related-contents h3 {
        font-size: var(--typo-size-xlarge)
    }
}

.slider.--content-left, .slider.--content-right, .slider.--history {
    position: relative
}

@media (min-width:768px) {
    @supports (display:grid) {
        .slider.--content-left .slide, .slider.--content-right .slide, .slider.--history .slide {
            display: grid;
            gap: 0 0;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr
        }

        @media (min-width:640px) {
            .slider.--content-left .slide, .slider.--content-right .slide, .slider.--history .slide {
                grid-template-rows: 1fr 1fr 1fr
            }

            .slider.--content-left .slide__image, .slider.--content-right .slide__image, .slider.--history .slide__image {
                grid-area: 1/6/3/13
            }

            .slider.--content-left .slide__content, .slider.--content-right .slide__content, .slider.--history .slide__content {
                grid-area: 2/1/4/8
            }
        }

        .slider.--content-left .slide__image, .slider.--content-right .slide__image, .slider.--history .slide__image {
            grid-area: 1/6/3/13;
            grid-area: 1/2/5/13
        }

        .slider.--content-left .slide__image *, .slider.--content-right .slide__image *, .slider.--history .slide__image * {
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            -o-object-position: center;
            object-position: center;
            width: 100%
        }

        .slider.--content-left .slide__content, .slider.--content-right .slide__content, .slider.--history .slide__content {
            grid-area: 2/1/4/8;
            grid-area: 4/1/8/12
        }
    }
}

@supports not (display:grid) {
    .slider.--content-left .slide__image, .slider.--content-right .slide__image, .slider.--history .slide__image {
        margin-left: auto;
        width: 91.666667%
    }

    @media (min-width:640px) {
        .slider.--content-left .slide__image, .slider.--content-right .slide__image, .slider.--history .slide__image {
            width: 75%
        }
    }

    @media (min-width:768px) {
        .slider.--content-left .slide__image, .slider.--content-right .slide__image, .slider.--history .slide__image {
            width: 66.666667%
        }
    }

    @media (min-width:1024px) {
        .slider.--content-left .slide__image, .slider.--content-right .slide__image, .slider.--history .slide__image {
            width: 58.333333%
        }
    }

    .slider.--content-left .slide__content, .slider.--content-right .slide__content, .slider.--history .slide__content {
        margin-top: calc(var(--spacing-base)*-1);
        width: 91.666667%
    }

    @media (min-width:640px) {
        .slider.--content-left .slide__content, .slider.--content-right .slide__content, .slider.--history .slide__content {
            width: 75%
        }
    }

    @media (min-width:768px) {
        .slider.--content-left .slide__content, .slider.--content-right .slide__content, .slider.--history .slide__content {
            margin-top: calc(var(--spacing-medium)*-1);
            width: 66.666667%
        }
    }

    @media (min-width:1024px) {
        .slider.--content-left .slide__content, .slider.--content-right .slide__content, .slider.--history .slide__content {
            width: 58.333333%
        }
    }
}

@media (max-width:767.9px) {
    .slider.--content-left .slide__image, .slider.--content-right .slide__image, .slider.--history .slide__image {
        margin-left: auto;
        width: 91.666667%
    }

    @media (min-width:640px) {
        .slider.--content-left .slide__image, .slider.--content-right .slide__image, .slider.--history .slide__image {
            width: 75%
        }
    }

    @media (min-width:768px) {
        .slider.--content-left .slide__image, .slider.--content-right .slide__image, .slider.--history .slide__image {
            width: 66.666667%
        }
    }

    @media (min-width:1024px) {
        .slider.--content-left .slide__image, .slider.--content-right .slide__image, .slider.--history .slide__image {
            width: 58.333333%
        }
    }

    .slider.--content-left .slide__content, .slider.--content-right .slide__content, .slider.--history .slide__content {
        margin-top: calc(var(--spacing-base)*-1);
        width: 91.666667%
    }

    @media (min-width:640px) {
        .slider.--content-left .slide__content, .slider.--content-right .slide__content, .slider.--history .slide__content {
            width: 75%
        }
    }

    @media (min-width:768px) {
        .slider.--content-left .slide__content, .slider.--content-right .slide__content, .slider.--history .slide__content {
            margin-top: calc(var(--spacing-medium)*-1);
            width: 66.666667%
        }
    }

    @media (min-width:1024px) {
        .slider.--content-left .slide__content, .slider.--content-right .slide__content, .slider.--history .slide__content {
            width: 58.333333%
        }
    }
}

.slider.--content-left .slide__image, .slider.--content-right .slide__image, .slider.--history .slide__image {
    -webkit-transform: translateX(var(--spacing-medium));
    transform: translateX(var(--spacing-medium))
}

.slider.--content-left .slide__content, .slider.--content-left .slide__image, .slider.--content-right .slide__content, .slider.--content-right .slide__image, .slider.--history .slide__content, .slider.--history .slide__image {
    border-bottom-right-radius: .5rem;
    border-top-left-radius: .5rem;
    opacity: 0;
    overflow: hidden;
    transition: opacity .6s, -webkit-transform .6s;
    transition: transform .6s, opacity .6s;
    transition: transform .6s, opacity .6s, -webkit-transform .6s
}

.slider.--content-left .slide__content, .slider.--content-right .slide__content, .slider.--history .slide__content {
    background-color: var(--color-gray-rlight);
    padding: var(--spacing-medium);
    padding-bottom: var(--spacing-large);
    position: relative;
    -webkit-transform: translateX(calc(var(--spacing-medium)*-1));
    transform: translateX(calc(var(--spacing-medium)*-1));
    z-index: 3
}

.slider.--content-left .swiper-slide-active .slide__content, .slider.--content-left .swiper-slide-active .slide__image, .slider.--content-right .swiper-slide-active .slide__content, .slider.--content-right .swiper-slide-active .slide__image, .slider.--history .swiper-slide-active .slide__content, .slider.--history .swiper-slide-active .slide__image {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.slider.--content-left .slider__navigation, .slider.--content-right .slider__navigation, .slider.--history .slider__navigation {
    bottom: 0;
    padding: var(--grid-gap);
    position: absolute;
    width: 91.666667%
}

@media (min-width:640px) {
    .slider.--content-left .slider__navigation, .slider.--content-right .slider__navigation, .slider.--history .slider__navigation {
        width: 75%
    }
}

@media (min-width:768px) {
    .slider.--content-left .slider__navigation, .slider.--content-right .slider__navigation, .slider.--history .slider__navigation {
        width: 66.666667%
    }
}

@media (min-width:1024px) {
    .slider.--content-left .slider__navigation, .slider.--content-right .slider__navigation, .slider.--history .slider__navigation {
        width: 58.333333%
    }
}

.slider.--content-left .slider__navigation, .slider.--content-right .slider__navigation, .slider.--history .slider__navigation {
    z-index: 5
}

@media (min-width:768px) {
    @supports (display:grid) {
        .slider.--content-right .slide__image, .slider.--history .slide__image {
            grid-area: 1/1/5/12
        }

        .slider.--content-right .slide__content, .slider.--history .slide__content {
            grid-area: 4/2/8/13
        }

        @media (min-width:640px) {
            .slider.--content-right .slide__image, .slider.--history .slide__image {
                grid-area: 1/1/3/8
            }

            .slider.--content-right .slide__content, .slider.--history .slide__content {
                grid-area: 2/6/4/13
            }
        }
    }
}

@supports not (display:grid) {
    .slider.--content-right .slide__image, .slider.--history .slide__image {
        margin-left: 0;
        width: 91.666667%
    }

    @media (min-width:640px) {
        .slider.--content-right .slide__image, .slider.--history .slide__image {
            width: 75%
        }
    }

    @media (min-width:768px) {
        .slider.--content-right .slide__image, .slider.--history .slide__image {
            width: 66.666667%
        }
    }

    @media (min-width:1024px) {
        .slider.--content-right .slide__image, .slider.--history .slide__image {
            width: 58.333333%
        }
    }

    .slider.--content-right .slide__content, .slider.--history .slide__content {
        margin-left: auto;
        margin-top: calc(var(--spacing-base)*-1);
        width: 91.666667%
    }

    @media (min-width:640px) {
        .slider.--content-right .slide__content, .slider.--history .slide__content {
            width: 75%
        }
    }

    @media (min-width:768px) {
        .slider.--content-right .slide__content, .slider.--history .slide__content {
            margin-top: calc(var(--spacing-medium)*-1);
            width: 66.666667%
        }
    }

    @media (min-width:1024px) {
        .slider.--content-right .slide__content, .slider.--history .slide__content {
            width: 58.333333%
        }
    }
}

@media (max-width:767.9px) {
    .slider.--content-right .slide__image, .slider.--history .slide__image {
        margin-left: 0;
        width: 91.666667%
    }

    @media (min-width:640px) {
        .slider.--content-right .slide__image, .slider.--history .slide__image {
            width: 75%
        }
    }

    @media (min-width:768px) {
        .slider.--content-right .slide__image, .slider.--history .slide__image {
            width: 66.666667%
        }
    }

    @media (min-width:1024px) {
        .slider.--content-right .slide__image, .slider.--history .slide__image {
            width: 58.333333%
        }
    }

    .slider.--content-right .slide__content, .slider.--history .slide__content {
        margin-left: auto;
        margin-top: calc(var(--spacing-base)*-1);
        width: 91.666667%
    }

    @media (min-width:640px) {
        .slider.--content-right .slide__content, .slider.--history .slide__content {
            width: 75%
        }
    }

    @media (min-width:768px) {
        .slider.--content-right .slide__content, .slider.--history .slide__content {
            margin-top: calc(var(--spacing-medium)*-1);
            width: 66.666667%
        }
    }

    @media (min-width:1024px) {
        .slider.--content-right .slide__content, .slider.--history .slide__content {
            width: 58.333333%
        }
    }
}

.slider.--content-right .slider__navigation, .slider.--history .slider__navigation {
    right: 0
}

.slider.--history .slider__navigation {
    bottom: 100px
}

.slider.--history .slider__pagination {
    -ms-overflow-style: none;
    bottom: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: var(--spacing-base);
    position: relative;
    scrollbar-width: none;
    -webkit-transform: none;
    transform: none;
    transition: .3s;
    z-index: 1
}

.slider.--history .slider__pagination::-webkit-scrollbar {
    background: transparent;
    height: 0
}

.slider.--history .slider__pagination__wrapper {
    position: relative
}

.slider.--history .slider__pagination__wrapper:after {
    background: linear-gradient(-90deg, var(--color-white), hsla(0, 0%, 100%, .01));
    bottom: 0;
    content: "";
    height: 100%;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    z-index: 2
}

.slider.--history .slider__pagination__bullet {
    background-color: transparent;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    font-weight: 700;
    height: auto;
    width: auto
}

.slider.--history .slider__pagination__bullet, .slider.--history .slider__pagination h5 {
    color: var(--color-gray-medium);
    font-size: var(--typo-size-base)
}

.slider.--history .slider__pagination__bullet {
    background: none;
    line-height: var(--typo-size-base-large);
    transition: font-size .3s
}

.slider.--history .slider__pagination__bullet.swiper-pagination-bullet-active, .slider.--history .slider__pagination__bullet h6 {
    color: var(--color-gray-medium);
    font-size: var(--typo-size-small)
}

.slider.--history .slider__pagination__bullet.swiper-pagination-bullet-active {
    font-size: var(--typo-size-medium)
}

.slider.--history .slider__pagination__bullet:before {
    content: url(../../../../themes/hwl/assets/images/graphic/hellmann-worldwide-history.svg);
    margin-bottom: var(--spacing-xsmall)
}

.accordion__item {
    border: 1px solid var(--color-gray-rlight);
    margin-bottom: var(--grid-gap);
    padding: var(--spacing-small)
}

.accordion__item.active .accordion__item__toggler .icon svg .line-y {
    -webkit-transform: scaleY(0);
    transform: scaleY(0)
}

.accordion__item__toggler {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    margin: calc(var(--spacing-small)*-1);
    padding: var(--spacing-small)
}

.accordion__item__toggler h4 {
    margin: 0;
    padding: 0
}

.accordion__item__toggler .icon {
    color: var(--color-gray-medium)
}

.accordion__item__toggler .icon svg .line-y {
    -webkit-transform-origin: center;
    transform-origin: center;
    transition: all .3s
}

.accordion__item__content {
    height: 0;
    margin-left: calc(var(--grid-gap)*-1);
    margin-right: calc(var(--grid-gap)*-1);
    overflow: hidden
}

#baguetteBox-overlay {
    background-color: #222;
    background-color: rgba(0, 0, 0, .8);
    display: none;
    height: 100%;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    transition: opacity .5s ease;
    width: 100%;
    z-index: 1000000
}

#baguetteBox-overlay.visible {
    opacity: 1
}

#baguetteBox-overlay .full-image {
    display: inline-block;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%
}

#baguetteBox-overlay .full-image figure {
    display: inline;
    height: 100%;
    margin: 0
}

#baguetteBox-overlay .full-image img {
    box-shadow: 0 0 8px rgba(0, 0, 0, .6);
    display: inline-block;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    width: auto
}

#baguetteBox-overlay .full-image figcaption {
    background-color: #000;
    background-color: rgba(0, 0, 0, .6);
    bottom: 0;
    color: #ccc;
    display: block;
    font-family: sans-serif;
    line-height: 1.8;
    position: absolute;
    text-align: center;
    white-space: normal;
    width: 100%
}

#baguetteBox-overlay .full-image:before {
    content: "";
    display: inline-block;
    height: 50%;
    margin-right: -1px;
    width: 1px
}

#baguetteBox-slider {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: left .4s ease, -webkit-transform .4s ease;
    transition: left .4s ease, transform .4s ease;
    transition: left .4s ease, transform .4s ease, -webkit-transform .4s ease;
    white-space: nowrap;
    width: 100%
}

#baguetteBox-slider.bounce-from-right {
    -webkit-animation: bounceFromRight .4s ease-out;
    animation: bounceFromRight .4s ease-out
}

#baguetteBox-slider.bounce-from-left {
    -webkit-animation: bounceFromLeft .4s ease-out;
    animation: bounceFromLeft .4s ease-out
}

@-webkit-keyframes bounceFromRight {
    0%, to {
        margin-left: 0
    }

    50% {
        margin-left: -30px
    }
}

@keyframes bounceFromRight {
    0%, to {
        margin-left: 0
    }

    50% {
        margin-left: -30px
    }
}

@-webkit-keyframes bounceFromLeft {
    0%, to {
        margin-left: 0
    }

    50% {
        margin-left: 30px
    }
}

@keyframes bounceFromLeft {
    0%, to {
        margin-left: 0
    }

    50% {
        margin-left: 30px
    }
}

.baguetteBox-button#next-button, .baguetteBox-button#previous-button {
    height: 60px;
    top: 50%;
    top: calc(50% - 30px);
    width: 44px
}

.baguetteBox-button {
    background-color: #323232;
    background-color: rgba(50, 50, 50, .5);
    border: 0;
    border-radius: 15%;
    color: #ddd;
    cursor: pointer;
    font: 1.6em sans-serif;
    margin: 0;
    outline: 0;
    padding: 0;
    position: absolute;
    transition: background-color .4s ease
}

.baguetteBox-button:focus, .baguetteBox-button:hover {
    background-color: rgba(50, 50, 50, .9)
}

.baguetteBox-button#next-button {
    right: 2%
}

.baguetteBox-button#previous-button {
    left: 2%
}

.baguetteBox-button#close-button {
    height: 30px;
    right: 2%;
    right: calc(2% + 6px);
    top: 20px;
    width: 30px
}

.baguetteBox-button svg {
    left: 0;
    position: absolute;
    top: 0
}

.baguetteBox-spinner {
    display: inline-block;
    height: 40px;
    left: 50%;
    margin-left: -20px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
    width: 40px
}

.baguetteBox-double-bounce1, .baguetteBox-double-bounce2 {
    -webkit-animation: bounce 2s ease-in-out infinite;
    animation: bounce 2s ease-in-out infinite;
    background-color: #fff;
    border-radius: 50%;
    height: 100%;
    left: 0;
    opacity: .6;
    position: absolute;
    top: 0;
    width: 100%
}

.baguetteBox-double-bounce2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

@-webkit-keyframes bounce {
    0%, to {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes bounce {
    0%, to {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

#baguetteBox-overlay .baguetteBox-button {
    background-color: transparent;
    outline: none !important
}

#baguetteBox-overlay .baguetteBox-button svg g, #baguetteBox-overlay .baguetteBox-button svg polyline {
    stroke-width: 2px
}

#baguetteBox-overlay .full-image {
    padding: var(--grid-gap)
}

#baguetteBox-overlay .full-image figure figcaption {
    font-family: inherit;
    padding: 10px
}

#baguetteBox-overlay .full-image figure img {
    border-radius: 10px;
    box-shadow: var(--box-shadow-standard)
}

.hero {
    padding-bottom: var(--spacing-medium);
    position: relative
}

.hero:not(.hero.--image, .hero.--image-job, .hero.--full-image) {
    padding-top: var(--spacing-medium)
}

.hero__head {
    position: relative;
    z-index: 2
}

.hero__content {
    margin-bottom: 2rem
}

@media (min-width:768px) {
    .hero__content {
        margin-bottom: 2.5rem
    }
}

.hero.--arrows .hero__background>* {
    background-image: url("/static/images/navigator.svg");
    background-position: 100% 0;
    background-size: cover;
    height: 100%;
    opacity: .5;
    position: absolute;
    right: 0;
    top: 0
}

.hero.--arrows .hero__background>:after {
    background: linear-gradient(var(--color-white), hsla(0, 0%, 100%, .01), var(--color-white));
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.hero+section {
    margin-top: calc(var(--spacing-base)*-1);
    z-index: 3
}

.hero.--image-job {
    margin-bottom: var(--spacing-base);
    overflow-x: hidden
}

.hero--image-job .hero__background>:first-child, .hero.--image .hero__background>:first-child {
    margin-bottom: 50px;
    margin-left: auto;
    position: relative
}

.hero--image-job .hero__background>:last-child, .hero.--image .hero__background>:last-child {
    bottom: 0;
    height: 90%;
    top: auto
}

.hero--image-job .hero__background .field--field-caption, .hero.--image .hero__background .field--field-caption {
    bottom: 0;
    color: var(--color-white);
    font-size: var(--typo-size-small);
    font-weight: 500;
    height: auto;
    left: 0;
    padding: 1rem;
    position: absolute;
    width: 100%
}

@media (min-width:1024px) {
    .hero--image-job .hero__background .field--field-caption, .hero.--image .hero__background .field--field-caption {
        padding-left: 125px;
        text-align: right
    }
}

.hero--image-job .hero__background .field--field-caption:before, .hero.--image .hero__background .field--field-caption:before {
    background: linear-gradient(0deg, rgba(0, 0, 0, .65) 0, transparent);
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

@media (min-width:1024px) {
    .hero {
        padding-bottom: var(--spacing-xlarge);
        padding-top: var(--spacing-xlarge)
    }

    .hero+section {
        margin-top: calc(var(--spacing-medium)*-1)
    }

    .hero.--image-job .hero__background>:first-child, .hero.--image .hero__background>:first-child {
        margin-bottom: 0;
        margin-left: auto;
        position: absolute
    }

    .hero.--image-job .hero__background>:last-child, .hero.--image .hero__background>:last-child {
        bottom: 0;
        height: 100%;
        top: auto
    }

    .hero.--image-job {
        padding-bottom: 0
    }

    .hero.--image-job .gradient--top-bottom--transparent-white {
        border-bottom-right-radius: 0;
        height: calc(100% - var(--spacing-xlarge) - 3rem) !important
    }
}

@media (max-width:768px) {
    .hero.--image-job .image .image__wrapper, .hero.--image .image .image__wrapper {
        border-bottom-right-radius: 0;
        border-top-left-radius: 0
    }

    .hero.--image-job .hero__background, .hero.--image .hero__background {
        position: relative
    }

    .hero.--image-job .hero__background>*, .hero.--image .hero__background>* {
        border-radius: 0;
        opacity: 1 !important;
        -webkit-transform: none !important;
        transform: none !important
    }

    .hero.--image-job .hero__background>*>*, .hero.--image .hero__background>*>* {
        -webkit-transform: none;
        transform: none
    }
}

.hero__job-search {
    grid-gap: 15px;
    border-color: var(--color-white);
    display: flex
}

.hero__job-search.--bordered {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: hsla(0, 0%, 100%, .3);
    border-radius: var(--border-radius-large);
    border-width: 2px;
    padding: 15px
}

.hero__job-search.--plain {
    padding-bottom: var(--spacing-base)
}

.hero__job-search.--plain .button {
    grid-gap: var(--grid-gap);
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    min-width: 200px
}

.hero__job-search.--plain .button:after {
    content: url(../../../../themes/hwl/src/images/icons/button-arrow.svg)
}

.hero__job-search .job-search__input {
    color: var(--color-gray-light) !important;
    font-size: var(--typo-size-2xsmall);
    font-weight: 500
}

.hero__job-search .job-search__input::-webkit-input-placeholder {
    color: var(--color-gray-light);
    letter-spacing: normal
}

.hero__job-search .job-search__input:-ms-input-placeholder {
    color: var(--color-gray-light);
    letter-spacing: normal
}

.hero__job-search .job-search__input::placeholder {
    color: var(--color-gray-light);
    letter-spacing: normal
}

.hero__job-search .job-search__input.--search {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M46.596 44.184 35.03 32.617a1.064 1.064 0 0 0-.762-.314h-.924a18.57 18.57 0 0 0 4.96-12.652C38.302 9.348 29.953 1 19.65 1S1 9.348 1 19.651c0 10.303 8.348 18.651 18.651 18.651a18.6 18.6 0 0 0 12.652-4.95v.915c0 .287.117.556.314.762l11.567 11.567a1.077 1.077 0 0 0 1.525 0l.887-.887a1.077 1.077 0 0 0 0-1.525zm-26.945-8.751c-8.725 0-15.782-7.057-15.782-15.782S10.926 3.87 19.651 3.87s15.782 7.057 15.782 15.782-7.057 15.782-15.782 15.782z' fill='%23B0BDC9'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 18px auto
}

.hero__job-search .job-search__input.form__select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg' fill='%23B1BDCA'%3E%3Cpath d='M41.227 16.775a1.437 1.437 0 0 1 1.995.3 1.4 1.4 0 0 1-.196 1.887l-.106.086-18.074 13.177a1.44 1.44 0 0 1-1.573.078l-.12-.078L5.08 19.048a1.402 1.402 0 0 1-.302-1.974 1.437 1.437 0 0 1 1.88-.374l.115.075L24 29.335l17.227-12.56z'/%3E%3C/svg%3E")
}

.hero.--full-image {
    align-items: center;
    display: flex;
    margin-left: calc(var(--grid-gap)*-1);
    margin-right: calc(var(--grid-gap)*-1);
    padding-bottom: 0;
    padding-top: 0
}

.hero.--full-image>* {
    flex-shrink: 0;
    width: 100%
}

.hero.--full-image>:not(:first-child) {
    margin-left: -100%;
    z-index: 9
}

.hero.--full-image * {
    transition: .3s
}

body:not(.ff--open) .hero.--full-image * {
    color: var(--color-white)
}

.hero.--full-image .hero__job-flag {
    align-self: flex-end
}

.hero.--full-image .hero__job-flag .job-flag__wrapper {
    display: flex;
    justify-content: flex-end
}

.hero.--full-image .hero__job-flag .job-flag__content {
    background-color: var(--color-primary);
    border-top-left-radius: var(--border-radius-large);
    display: flex;
    padding: calc(var(--spacing-xsmall)*2) 0
}

.hero.--full-image .hero__job-flag .job-flag__item {
    grid-gap: var(--spacing-xsmall);
    display: flex;
    padding: .1rem var(--spacing-small)
}

.hero.--full-image .hero__job-flag .job-flag__item:first-child {
    border-right: 1px solid #fff
}

.hero.--full-image .field--field-key-image {
    align-self: stretch;
    max-height: 200vh !important;
    opacity: 1 !important;
    transition: opacity .9, all .3s !important
}

.hero.--full-image .field--field-key-image>* {
    height: 100%;
    max-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.hero.--full-image .field--field-key-image>* * {
    height: inherit;
    max-height: inherit;
    -o-object-fit: inherit;
    object-fit: inherit;
    -o-object-position: inherit;
    object-position: inherit;
    width: inherit
}

.hero.--full-image .field--field-key-image .field--field-media-image {
    max-height: max(min(100vh, 800px), 500px, 40vw) !important;
    overflow: hidden !important
}

.hero.--full-image .field--field-key-image .image__wrapper {
    border-radius: 0 !important;
    position: relative
}

.hero.--full-image .field--field-key-image .image__wrapper:before {
    background: rgba(0, 0, 0, .5);
    content: "";
    height: 100%;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    width: 100%
}

.ff--open .hero.--full-image .field--field-key-image {
    max-height: 0 !important;
    opacity: 0 !important
}

.hero.--full-image .hero__head {
    margin-bottom: 30px;
    margin-top: 120px
}

.hero.--full-image .hero__head .container {
    padding-left: calc(var(--grid-gap)*2);
    padding-right: calc(var(--grid-gap)*2)
}

@media (min-width:1024px) {
    .hero.--full-image .hero__head .container {
        padding-left: calc(var(--grid-gap)*3);
        padding-right: calc(var(--grid-gap)*3)
    }

    .hero .hero__job {
        padding-top: var(--spacing-xlarge)
    }
}

.hero .hero__job .job__categories {
    grid-gap: calc(var(--grid-gap)*2);
    display: flex
}

.hero .hero__job .job__category {
    font-size: var(--typo-size-base)
}

.page-hero--full-image .ff {
    min-height: 0
}

.tabs__pagination {
    display: flex
}

.tabs__pagination__wrapper {
    background-color: var(--color-gray-rlight);
    border-radius: .5rem;
    display: block;
    padding: var(--spacing-xsmall);
    position: relative
}

.tabs__pagination__wrapper:after {
    background: linear-gradient(var(--color-white), hsla(0, 0%, 100%, .01), var(--color-white));
    background: linear-gradient(-90deg, var(--color-gray-rlight), hsla(var(--hsl-gray-rlight), .01));
    border-bottom-right-radius: .5rem;
    border-top-right-radius: .5rem;
    content: "";
    display: inline-block;
    height: 100%;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px
}

.tabs__pagination__scrollbar {
    overflow: auto
}

.tabs__pagination__item {
    cursor: pointer;
    display: flex;
    margin-bottom: 0
}

.tabs__pagination__item:not(:first-child) {
    padding-left: var(--spacing-xsmall)
}

.tabs__pagination__item .button, .tabs__pagination__item button {
    align-items: center;
    background-color: transparent;
    border-radius: .375rem;
    border-style: none;
    color: var(--color-gray-light);
    display: flex;
    padding: var(--spacing-xsmall) var(--grid-gap);
    transition: .3s;
    white-space: nowrap
}

.tabs__pagination__item.--active+.button, .tabs__pagination__item.--active+button, .tabs__pagination__item.--active .button, .tabs__pagination__item.--active button, .tabs__pagination__item:hover+.button, .tabs__pagination__item:hover+button, .tabs__pagination__item:hover .button, .tabs__pagination__item:hover button, .tabs__pagination__item [type=radio]:checked+.button, .tabs__pagination__item [type=radio]:checked+button, .tabs__pagination__item [type=radio]:checked .button, .tabs__pagination__item [type=radio]:checked button {
    background-color: var(--color-white);
    color: var(--color-gray-medium)
}

.gallery {
    display: flex;
    flex-direction: column
}

@media (min-width:640px) {
    .gallery {
        flex-direction: row
    }
}

.gallery {
    margin: -.75rem
}

@supports (display:grid) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
    }
}

.gallery__item {
    margin: .75rem;
    position: relative
}

.gallery__link {
    bottom: 0;
    display: block;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    width: 100%
}

.gallery__link:hover .gallery__overlay {
    opacity: 1
}

.gallery__link:hover .gallery__icon {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.gallery__overlay {
    align-items: center;
    background-color: hsla(var(--hsl-black), .6);
    border-bottom-right-radius: var(--border-radius-medium);
    border-top-left-radius: var(--border-radius-medium);
    bottom: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity .5s;
    width: 100%;
    z-index: 2
}

.gallery__icon {
    color: var(--color-white);
    -webkit-transform: scale(.5);
    transform: scale(.5);
    transition: all .5s
}

.gallery .image {
    position: relative;
    z-index: 1
}

.card {
    display: flex;
    height: 100%
}

.card__wrapper {
    display: flex;
    overflow: hidden
}

.card__wrapper>* {
    cursor: default;
    flex: none;
    width: 100%
}

.card__image * {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.card__image *>* {
    height: inherit;
    width: inherit
}

.card__image .image.--standard .image__wrapper {
    border-radius: 0;
    box-shadow: none
}

.card__text {
    align-items: stretch;
    display: flex;
    margin-left: -100%;
    overflow: hidden
}

.card__text p:last-child {
    margin-bottom: 0
}

.card__text__background {
    align-content: flex-end;
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    padding: var(--spacing-base);
    width: 100%
}

.card__text__background>* {
    width: 100%
}

.card.--overlay .card__text * {
    color: var(--color-white)
}

.card.--overlay .card__text p {
    font-size: var(--typo-size-small)
}

.card.--overlay .card__text__background {
    background-image: linear-gradient(to top, hsla(var(--hsl-black), .6), hsla(var(--hsl-black), 0) 100%);
    flex: 0 1 auto;
    position: relative;
    transition: all .75s;
    z-index: 1
}

.card.--overlay .card__text__background:before {
    background-image: linear-gradient(to top, hsla(var(--hsl-black), .6), hsla(var(--hsl-black), .6) 100%);
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity .5s;
    width: 100%;
    z-index: -1
}

.card.--overlay .card__headline {
    margin-bottom: 0;
    -webkit-transform: translateY(var(--spacing-xsmall));
    transform: translateY(var(--spacing-xsmall));
    transition: all .75s ease-in-out
}

.card.--overlay .card__content {
    margin-top: var(--spacing-xsmall);
    max-height: 0;
    overflow: hidden;
    transition: max-height .75s cubic-bezier(0, 1, 0, 1)
}

.card.--overlay:hover .card__text__background:before {
    opacity: 1
}

.card.--overlay:hover .card__headline {
    -webkit-transform: none;
    transform: none;
    transition: all .75s cubic-bezier(0, 1, 0, 1)
}

.card.--overlay:hover .card__content {
    max-height: 500px;
    transition: max-height .75s ease-in-out
}

.card.--card {
    border: 1px solid;
    border-color: var(--color-gray-rlight)
}

.card.--card .card__wrapper {
    flex-direction: column;
    flex-wrap: wrap
}

.card.--card .card__text {
    flex-grow: 1;
    margin-left: 0
}

.card.--card .card__text__background {
    align-content: flex-start
}

.form__group {
    display: flex;
    flex-direction: column;
    margin-left: calc(var(--grid-gap)/2*-1);
    margin-right: calc(var(--grid-gap)/2*-1)
}

@media (min-width:640px) {
    .form__group.--2cols {
        flex-direction: row
    }
}

@media (min-width:768px) {
    .form__group.--3cols {
        flex-direction: row
    }
}

.form__group .form__item {
    padding-left: calc(var(--grid-gap)/2);
    padding-right: calc(var(--grid-gap)/2)
}

@media (min-width:640px) {
    .sm\:hidden {
        display: none
    }

    .sm\:flex-1 {
        flex: 1 1 0%
    }

    .sm\:flex-auto {
        flex: 1 1 auto
    }

    .sm\:ml-0 {
        margin-left: 0
    }

    .sm\:ml-auto {
        margin-left: auto
    }

    .sm\:ml-1\/12 {
        margin-left: 8.33333%
    }

    .sm\:ml-2\/12 {
        margin-left: 16.66667%
    }

    .sm\:ml-3\/12 {
        margin-left: 25%
    }

    .sm\:ml-4\/12 {
        margin-left: 33.33333%
    }

    .sm\:ml-5\/12 {
        margin-left: 41.66667%
    }

    .sm\:ml-6\/12 {
        margin-left: 50%
    }

    .sm\:ml-7\/12 {
        margin-left: 58.33333%
    }

    .sm\:ml-8\/12 {
        margin-left: 66.66667%
    }

    .sm\:ml-9\/12 {
        margin-left: 75%
    }

    .sm\:ml-10\/12 {
        margin-left: 83.33333%
    }

    .sm\:ml-11\/12 {
        margin-left: 91.66667%
    }

    .sm\:w-auto {
        width: auto
    }

    .sm\:w-1\/12 {
        width: 8.333333%
    }

    .sm\:w-2\/12 {
        width: 16.666667%
    }

    .sm\:w-3\/12 {
        width: 25%
    }

    .sm\:w-4\/12 {
        width: 33.333333%
    }

    .sm\:w-5\/12 {
        width: 41.666667%
    }

    .sm\:w-6\/12 {
        width: 50%
    }

    .sm\:w-7\/12 {
        width: 58.333333%
    }

    .sm\:w-8\/12 {
        width: 66.666667%
    }

    .sm\:w-9\/12 {
        width: 75%
    }

    .sm\:w-10\/12 {
        width: 83.333333%
    }

    .sm\:w-11\/12 {
        width: 91.666667%
    }

    .sm\:w-full {
        width: 100%
    }

    .sm\:w-1\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*1)
    }

    .sm\:w-2\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*2)
    }

    .sm\:w-3\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*3)
    }

    .sm\:w-4\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*4)
    }

    .sm\:w-5\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*5)
    }

    .sm\:w-6\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*6)
    }

    .sm\:w-7\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*7)
    }

    .sm\:w-8\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*8)
    }

    .sm\:w-9\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*9)
    }

    .sm\:w-10\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*10)
    }

    .sm\:w-11\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*11)
    }
}

@media (min-width:768px) {
    .md\:block {
        display: block
    }

    .md\:hidden {
        display: none
    }

    .md\:flex-row {
        flex-direction: row
    }

    .md\:flex-1 {
        flex: 1 1 0%
    }

    .md\:flex-auto {
        flex: 1 1 auto
    }

    .md\:flex-none {
        flex: none
    }

    .md\:ml-0 {
        margin-left: 0
    }

    .md\:ml-auto {
        margin-left: auto
    }

    .md\:mt-lg {
        margin-top: var(--spacing-large)
    }

    .md\:mb-lg {
        margin-bottom: var(--spacing-large)
    }

    .md\:ml-1\/12 {
        margin-left: 8.33333%
    }

    .md\:ml-2\/12 {
        margin-left: 16.66667%
    }

    .md\:ml-3\/12 {
        margin-left: 25%
    }

    .md\:ml-4\/12 {
        margin-left: 33.33333%
    }

    .md\:ml-5\/12 {
        margin-left: 41.66667%
    }

    .md\:ml-6\/12 {
        margin-left: 50%
    }

    .md\:ml-7\/12 {
        margin-left: 58.33333%
    }

    .md\:ml-8\/12 {
        margin-left: 66.66667%
    }

    .md\:ml-9\/12 {
        margin-left: 75%
    }

    .md\:ml-10\/12 {
        margin-left: 83.33333%
    }

    .md\:ml-11\/12 {
        margin-left: 91.66667%
    }

    .md\:w-auto {
        width: auto
    }

    .md\:w-1\/12 {
        width: 8.333333%
    }

    .md\:w-2\/12 {
        width: 16.666667%
    }

    .md\:w-3\/12 {
        width: 25%
    }

    .md\:w-4\/12 {
        width: 33.333333%
    }

    .md\:w-5\/12 {
        width: 41.666667%
    }

    .md\:w-6\/12 {
        width: 50%
    }

    .md\:w-7\/12 {
        width: 58.333333%
    }

    .md\:w-8\/12 {
        width: 66.666667%
    }

    .md\:w-9\/12 {
        width: 75%
    }

    .md\:w-10\/12 {
        width: 83.333333%
    }

    .md\:w-11\/12 {
        width: 91.666667%
    }

    .md\:w-full {
        width: 100%
    }

    .md\:w-1\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*1)
    }

    .md\:w-2\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*2)
    }

    .md\:w-3\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*3)
    }

    .md\:w-4\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*4)
    }

    .md\:w-5\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*5)
    }

    .md\:w-6\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*6)
    }

    .md\:w-7\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*7)
    }

    .md\:w-8\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*8)
    }

    .md\:w-9\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*9)
    }

    .md\:w-10\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*10)
    }

    .md\:w-11\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*11)
    }
}

@media (min-width:1024px) {
    .lg\:block {
        display: block
    }

    .lg\:flex {
        display: flex
    }

    .lg\:hidden {
        display: none
    }

    .lg\:justify-end {
        justify-content: flex-end
    }

    .lg\:flex-1 {
        flex: 1 1 0%
    }

    .lg\:flex-auto {
        flex: 1 1 auto
    }

    .lg\:flex-initial {
        flex: 0 1 auto
    }

    .lg\:mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .lg\:ml-0 {
        margin-left: 0
    }

    .lg\:ml-8 {
        margin-left: 2rem
    }

    .lg\:ml-auto {
        margin-left: auto
    }

    .lg\:ml-1\/12 {
        margin-left: 8.33333%
    }

    .lg\:ml-2\/12 {
        margin-left: 16.66667%
    }

    .lg\:ml-3\/12 {
        margin-left: 25%
    }

    .lg\:ml-4\/12 {
        margin-left: 33.33333%
    }

    .lg\:ml-5\/12 {
        margin-left: 41.66667%
    }

    .lg\:ml-6\/12 {
        margin-left: 50%
    }

    .lg\:ml-7\/12 {
        margin-left: 58.33333%
    }

    .lg\:ml-8\/12 {
        margin-left: 66.66667%
    }

    .lg\:ml-9\/12 {
        margin-left: 75%
    }

    .lg\:ml-10\/12 {
        margin-left: 83.33333%
    }

    .lg\:ml-11\/12 {
        margin-left: 91.66667%
    }

    .lg\:w-auto {
        width: auto
    }

    .lg\:w-1\/12 {
        width: 8.333333%
    }

    .lg\:w-2\/12 {
        width: 16.666667%
    }

    .lg\:w-3\/12 {
        width: 25%
    }

    .lg\:w-4\/12 {
        width: 33.333333%
    }

    .lg\:w-5\/12 {
        width: 41.666667%
    }

    .lg\:w-6\/12 {
        width: 50%
    }

    .lg\:w-7\/12 {
        width: 58.333333%
    }

    .lg\:w-8\/12 {
        width: 66.666667%
    }

    .lg\:w-9\/12 {
        width: 75%
    }

    .lg\:w-10\/12 {
        width: 83.333333%
    }

    .lg\:w-11\/12 {
        width: 91.666667%
    }

    .lg\:w-full {
        width: 100%
    }

    .lg\:w-1\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*1)
    }

    .lg\:w-2\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*2)
    }

    .lg\:w-3\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*3)
    }

    .lg\:w-4\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*4)
    }

    .lg\:w-5\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*5)
    }

    .lg\:w-6\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*6)
    }

    .lg\:w-7\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*7)
    }

    .lg\:w-8\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*8)
    }

    .lg\:w-9\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*9)
    }

    .lg\:w-10\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*10)
    }

    .lg\:w-11\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*11)
    }
}

@media (min-width:1280px) {
    .xl\:hidden {
        display: none
    }

    .xl\:flex-1 {
        flex: 1 1 0%
    }

    .xl\:flex-auto {
        flex: 1 1 auto
    }

    .xl\:ml-0 {
        margin-left: 0
    }

    .xl\:ml-auto {
        margin-left: auto
    }

    .xl\:ml-1\/12 {
        margin-left: 8.33333%
    }

    .xl\:ml-2\/12 {
        margin-left: 16.66667%
    }

    .xl\:ml-3\/12 {
        margin-left: 25%
    }

    .xl\:ml-4\/12 {
        margin-left: 33.33333%
    }

    .xl\:ml-5\/12 {
        margin-left: 41.66667%
    }

    .xl\:ml-6\/12 {
        margin-left: 50%
    }

    .xl\:ml-7\/12 {
        margin-left: 58.33333%
    }

    .xl\:ml-8\/12 {
        margin-left: 66.66667%
    }

    .xl\:ml-9\/12 {
        margin-left: 75%
    }

    .xl\:ml-10\/12 {
        margin-left: 83.33333%
    }

    .xl\:ml-11\/12 {
        margin-left: 91.66667%
    }

    .xl\:w-1\/12 {
        width: 8.333333%
    }

    .xl\:w-2\/12 {
        width: 16.666667%
    }

    .xl\:w-3\/12 {
        width: 25%
    }

    .xl\:w-4\/12 {
        width: 33.333333%
    }

    .xl\:w-5\/12 {
        width: 41.666667%
    }

    .xl\:w-6\/12 {
        width: 50%
    }

    .xl\:w-7\/12 {
        width: 58.333333%
    }

    .xl\:w-8\/12 {
        width: 66.666667%
    }

    .xl\:w-9\/12 {
        width: 75%
    }

    .xl\:w-10\/12 {
        width: 83.333333%
    }

    .xl\:w-11\/12 {
        width: 91.666667%
    }

    .xl\:w-full {
        width: 100%
    }

    .xl\:w-1\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*1)
    }

    .xl\:w-2\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*2)
    }

    .xl\:w-4\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*4)
    }

    .xl\:w-5\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*5)
    }

    .xl\:w-6\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*6)
    }

    .xl\:w-7\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*7)
    }

    .xl\:w-8\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*8)
    }

    .xl\:w-9\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*9)
    }

    .xl\:w-10\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*10)
    }

    .xl\:w-11\/12-x {
        width: calc(50vw - var(--layout-max-width)/2 - var(--grid-gap)/2 + var(--layout-max-width)/12*11)
    }


}






.texto {
    width: 65%;
}

.quem_somos {
    margin-top: 40px;
    margin-left: calc(var(--grid-gap)*3);
}

.banner_mobile {
    height: 430px;
}

@media (max-width:670px) {
    .banner_mobile {
        height: 320px;
    }

    .texto {
        font-size: 15px;
        width: 100%;
    }

    .titulo {
        font-size: 25px;
    }

    .anchornav__item {
        flex: 0 0 175px;
    }

    .botao {
        font-size: 10px;
    }

    .contact1 {
        padding-left: var(--grid-gap);
    }

    .quem_somos {
        font-size: 15px;
        margin-top: 0;
        margin-left: calc(var(--grid-gap)*0);
        margin-right: calc(var(--grid-gap)*0);
        text-align: justify;
    }

    .service_descript {
        text-align: justify;
        font-size: 15px;
    }

    .solutions_title {
        font-size: 25px;
    }

    .solutions_descript {
        font-size: 15px;
    }

    #footer {
        height: 900px;
    }

    .footer__copy {
        display: none;
    }

    .row1 {
        text-align: center;
    }

    .footer-col h4::before {
        width: 0px;
    }

    .footer_title {
        margin-bottom: 10px;
    }
}