html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

h1 {
    margin: .67em 0
}

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

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

a {
    background-color: transparent;
    text-decoration: none;
}

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;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

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

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

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

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

[type=button]:-moz-focusring,
[type=reset]:-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
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none
}

::selection {
    background: #b3d4fc;
    text-shadow: none
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

textarea {
    resize: vertical
}

.browserupgrade {
    margin: .2em 0;
    background: #ccc;
    color: #000;
    padding: .2em 0
}

.hidden {
    display: none!important
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit
}

.invisible {
    visibility: hidden
}

.clearfix:after,
.clearfix:before {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

figure {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.service-heading3 {
    display: block;
    font: 830 3.2rem/1.1 "Inter", sans-serif;
    padding: 0;
    margin: 0 0 0.5em;
}

.service-heading4 {
    display: block;
    font: 600 1.9rem/1.2 "Inter", sans-serif;
    padding: 0;
    margin: 0 0 0.9em;
}

.service-heading5 {
    display: block;
    font: 600 1.3rem/1 "Inter", sans-serif;
    padding: 0;
    margin: 1em 0 0.5em;
    text-decoration: none;
}


.contactbox {
    padding-right: 10px;
}

.kommuni img {
    width: 80%;
}


/*!
 * Bootstrap Grid v4.1.2 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@-ms-viewport {
    width: device-width
}

html {
    box-sizing: border-box;
    -ms-overflow-style: scrollbar
}

*,
::after,
::before {
    box-sizing: inherit
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

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

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

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

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

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.no-gutters {
    margin-right: 0;
    margin-left: 0
}

.no-gutters>.col,
.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none
}

.col-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%
}

.col-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%
}

.col-3 {
    flex: 0 0 25%;
    max-width: 25%
}

.col-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%
}

.col-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%
}

.col-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%
}

.col-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%
}

.col-9 {
    flex: 0 0 75%;
    max-width: 75%
}

.col-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%
}

.col-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%
}

.order-first {
    order: -1
}

.order-last {
    order: 13
}

.order-0 {
    order: 0
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.order-3 {
    order: 3
}

.order-4 {
    order: 4
}

.order-5 {
    order: 5
}

.order-6 {
    order: 6
}

.order-7 {
    order: 7
}

.order-8 {
    order: 8
}

.order-9 {
    order: 9
}

.order-10 {
    order: 10
}

.order-11 {
    order: 11
}

.order-12 {
    order: 12
}

.offset-1 {
    margin-left: 8.33333%
}

.offset-2 {
    margin-left: 16.66667%
}

.offset-3 {
    margin-left: 25%
}

.offset-4 {
    margin-left: 33.33333%
}

.offset-5 {
    margin-left: 41.66667%
}

.offset-6 {
    margin-left: 50%
}

.offset-7 {
    margin-left: 58.33333%
}

.offset-8 {
    margin-left: 66.66667%
}

.offset-9 {
    margin-left: 75%
}

.offset-10 {
    margin-left: 83.33333%
}

.offset-11 {
    margin-left: 91.66667%
}

@media (min-width:576px) {
    .col-sm {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }
    .col-sm-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }
    .col-sm-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }
    .col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%
    }
    .col-sm-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }
    .col-sm-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }
    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
    .col-sm-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }
    .col-sm-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }
    .col-sm-9 {
        flex: 0 0 75%;
        max-width: 75%
    }
    .col-sm-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }
    .col-sm-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }
    .col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
    .order-sm-first {
        order: -1
    }
    .order-sm-last {
        order: 13
    }
    .order-sm-0 {
        order: 0
    }
    .order-sm-1 {
        order: 1
    }
    .order-sm-2 {
        order: 2
    }
    .order-sm-3 {
        order: 3
    }
    .order-sm-4 {
        order: 4
    }
    .order-sm-5 {
        order: 5
    }
    .order-sm-6 {
        order: 6
    }
    .order-sm-7 {
        order: 7
    }
    .order-sm-8 {
        order: 8
    }
    .order-sm-9 {
        order: 9
    }
    .order-sm-10 {
        order: 10
    }
    .order-sm-11 {
        order: 11
    }
    .order-sm-12 {
        order: 12
    }
    .offset-sm-0 {
        margin-left: 0
    }
    .offset-sm-1 {
        margin-left: 8.33333%
    }
    .offset-sm-2 {
        margin-left: 16.66667%
    }
    .offset-sm-3 {
        margin-left: 25%
    }
    .offset-sm-4 {
        margin-left: 33.33333%
    }
    .offset-sm-5 {
        margin-left: 41.66667%
    }
    .offset-sm-6 {
        margin-left: 50%
    }
    .offset-sm-7 {
        margin-left: 58.33333%
    }
    .offset-sm-8 {
        margin-left: 66.66667%
    }
    .offset-sm-9 {
        margin-left: 75%
    }
    .offset-sm-10 {
        margin-left: 83.33333%
    }
    .offset-sm-11 {
        margin-left: 91.66667%
    }
}

@media (min-width:768px) {
    .col-md {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }
    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }
    .col-md-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }
    .col-md-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }
    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%
    }
    .col-md-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }
    .col-md-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
    .col-md-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }
    .col-md-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }
    .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%
    }
    .col-md-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }
    .col-md-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }
    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
    .order-md-first {
        order: -1
    }
    .order-md-last {
        order: 13
    }
    .order-md-0 {
        order: 0
    }
    .order-md-1 {
        order: 1
    }
    .order-md-2 {
        order: 2
    }
    .order-md-3 {
        order: 3
    }
    .order-md-4 {
        order: 4
    }
    .order-md-5 {
        order: 5
    }
    .order-md-6 {
        order: 6
    }
    .order-md-7 {
        order: 7
    }
    .order-md-8 {
        order: 8
    }
    .order-md-9 {
        order: 9
    }
    .order-md-10 {
        order: 10
    }
    .order-md-11 {
        order: 11
    }
    .order-md-12 {
        order: 12
    }
    .offset-md-0 {
        margin-left: 0
    }
    .offset-md-1 {
        margin-left: 8.33333%
    }
    .offset-md-2 {
        margin-left: 16.66667%
    }
    .offset-md-3 {
        margin-left: 25%
    }
    .offset-md-4 {
        margin-left: 33.33333%
    }
    .offset-md-5 {
        margin-left: 41.66667%
    }
    .offset-md-6 {
        margin-left: 50%
    }
    .offset-md-7 {
        margin-left: 58.33333%
    }
    .offset-md-8 {
        margin-left: 66.66667%
    }
    .offset-md-9 {
        margin-left: 75%
    }
    .offset-md-10 {
        margin-left: 83.33333%
    }
    .offset-md-11 {
        margin-left: 91.66667%
    }
}

@media (min-width:992px) {
    .col-lg {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }
    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }
    .col-lg-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }
    .col-lg-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%
    }
    .col-lg-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }
    .col-lg-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }
    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
    .col-lg-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }
    .col-lg-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }
    .col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%
    }
    .col-lg-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }
    .col-lg-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }
    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
    .order-lg-first {
        order: -1
    }
    .order-lg-last {
        order: 13
    }
    .order-lg-0 {
        order: 0
    }
    .order-lg-1 {
        order: 1
    }
    .order-lg-2 {
        order: 2
    }
    .order-lg-3 {
        order: 3
    }
    .order-lg-4 {
        order: 4
    }
    .order-lg-5 {
        order: 5
    }
    .order-lg-6 {
        order: 6
    }
    .order-lg-7 {
        order: 7
    }
    .order-lg-8 {
        order: 8
    }
    .order-lg-9 {
        order: 9
    }
    .order-lg-10 {
        order: 10
    }
    .order-lg-11 {
        order: 11
    }
    .order-lg-12 {
        order: 12
    }
    .offset-lg-0 {
        margin-left: 0
    }
    .offset-lg-1 {
        margin-left: 8.33333%
    }
    .offset-lg-2 {
        margin-left: 16.66667%
    }
    .offset-lg-3 {
        margin-left: 25%
    }
    .offset-lg-4 {
        margin-left: 33.33333%
    }
    .offset-lg-5 {
        margin-left: 41.66667%
    }
    .offset-lg-6 {
        margin-left: 50%
    }
    .offset-lg-7 {
        margin-left: 58.33333%
    }
    .offset-lg-8 {
        margin-left: 66.66667%
    }
    .offset-lg-9 {
        margin-left: 75%
    }
    .offset-lg-10 {
        margin-left: 83.33333%
    }
    .offset-lg-11 {
        margin-left: 91.66667%
    }
}

@media (min-width:1200px) {
    .col-xl {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%
    }
    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }
    .col-xl-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%
    }
    .col-xl-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%
    }
    .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%
    }
    .col-xl-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%
    }
    .col-xl-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%
    }
    .col-xl-6 {
        flex: 0 0 50%;
        max-width: 50%
    }
    .col-xl-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%
    }
    .col-xl-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%
    }
    .col-xl-9 {
        flex: 0 0 75%;
        max-width: 75%
    }
    .col-xl-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%
    }
    .col-xl-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%
    }
    .col-xl-12 {
        flex: 0 0 100%;
        max-width: 100%
    }
    .order-xl-first {
        order: -1
    }
    .order-xl-last {
        order: 13
    }
    .order-xl-0 {
        order: 0
    }
    .order-xl-1 {
        order: 1
    }
    .order-xl-2 {
        order: 2
    }
    .order-xl-3 {
        order: 3
    }
    .order-xl-4 {
        order: 4
    }
    .order-xl-5 {
        order: 5
    }
    .order-xl-6 {
        order: 6
    }
    .order-xl-7 {
        order: 7
    }
    .order-xl-8 {
        order: 8
    }
    .order-xl-9 {
        order: 9
    }
    .order-xl-10 {
        order: 10
    }
    .order-xl-11 {
        order: 11
    }
    .order-xl-12 {
        order: 12
    }
    .offset-xl-0 {
        margin-left: 0
    }
    .offset-xl-1 {
        margin-left: 8.33333%
    }
    .offset-xl-2 {
        margin-left: 16.66667%
    }
    .offset-xl-3 {
        margin-left: 25%
    }
    .offset-xl-4 {
        margin-left: 33.33333%
    }
    .offset-xl-5 {
        margin-left: 41.66667%
    }
    .offset-xl-6 {
        margin-left: 50%
    }
    .offset-xl-7 {
        margin-left: 58.33333%
    }
    .offset-xl-8 {
        margin-left: 66.66667%
    }
    .offset-xl-9 {
        margin-left: 75%
    }
    .offset-xl-10 {
        margin-left: 83.33333%
    }
    .offset-xl-11 {
        margin-left: 91.66667%
    }
}

.d-none {
    display: none!important
}

.d-inline {
    display: inline!important
}

.d-inline-block {
    display: inline-block!important
}

.d-block {
    display: block!important
}

.d-table {
    display: table!important
}

.d-table-row {
    display: table-row!important
}

.d-table-cell {
    display: table-cell!important
}

.d-flex {
    display: flex!important
}

.d-inline-flex {
    display: inline-flex!important
}

@media (min-width:576px) {
    .d-sm-none {
        display: none!important
    }
    .d-sm-inline {
        display: inline!important
    }
    .d-sm-inline-block {
        display: inline-block!important
    }
    .d-sm-block {
        display: block!important
    }
    .d-sm-table {
        display: table!important
    }
    .d-sm-table-row {
        display: table-row!important
    }
    .d-sm-table-cell {
        display: table-cell!important
    }
    .d-sm-flex {
        display: flex!important
    }
    .d-sm-inline-flex {
        display: inline-flex!important
    }
}

@media (min-width:768px) {
    .d-md-none {
        display: none!important
    }
    .d-md-inline {
        display: inline!important
    }
    .d-md-inline-block {
        display: inline-block!important
    }
    .d-md-block {
        display: block!important
    }
    .d-md-table {
        display: table!important
    }
    .d-md-table-row {
        display: table-row!important
    }
    .d-md-table-cell {
        display: table-cell!important
    }
    .d-md-flex {
        display: flex!important
    }
    .d-md-inline-flex {
        display: inline-flex!important
    }
}

@media (min-width:992px) {
    .d-lg-none {
        display: none!important
    }
    .d-lg-inline {
        display: inline!important
    }
    .d-lg-inline-block {
        display: inline-block!important
    }
    .d-lg-block {
        display: block!important
    }
    .d-lg-table {
        display: table!important
    }
    .d-lg-table-row {
        display: table-row!important
    }
    .d-lg-table-cell {
        display: table-cell!important
    }
    .d-lg-flex {
        display: flex!important
    }
    .d-lg-inline-flex {
        display: inline-flex!important
    }
}

@media (min-width:1200px) {
    .d-xl-none {
        display: none!important
    }
    .d-xl-inline {
        display: inline!important
    }
    .d-xl-inline-block {
        display: inline-block!important
    }
    .d-xl-block {
        display: block!important
    }
    .d-xl-table {
        display: table!important
    }
    .d-xl-table-row {
        display: table-row!important
    }
    .d-xl-table-cell {
        display: table-cell!important
    }
    .d-xl-flex {
        display: flex!important
    }
    .d-xl-inline-flex {
        display: inline-flex!important
    }
}

@media print {
    .d-print-none {
        display: none!important
    }
    .d-print-inline {
        display: inline!important
    }
    .d-print-inline-block {
        display: inline-block!important
    }
    .d-print-block {
        display: block!important
    }
    .d-print-table {
        display: table!important
    }
    .d-print-table-row {
        display: table-row!important
    }
    .d-print-table-cell {
        display: table-cell!important
    }
    .d-print-flex {
        display: flex!important
    }
    .d-print-inline-flex {
        display: inline-flex!important
    }
}

.flex-row {
    flex-direction: row!important
}

.flex-column {
    flex-direction: column!important
}

.flex-row-reverse {
    flex-direction: row-reverse!important
}

.flex-column-reverse {
    flex-direction: column-reverse!important
}

.flex-wrap {
    flex-wrap: wrap!important
}

.flex-nowrap {
    flex-wrap: nowrap!important
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse!important
}

.flex-fill {
    flex: 1 1 auto!important
}

.flex-grow-0 {
    flex-grow: 0!important
}

.flex-grow-1 {
    flex-grow: 1!important
}

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

.flex-shrink-1 {
    flex-shrink: 1!important
}

.justify-content-start {
    justify-content: flex-start!important
}

.justify-content-end {
    justify-content: flex-end!important
}

.justify-content-center {
    justify-content: center!important
}

.justify-content-between {
    justify-content: space-between!important
}

.justify-content-around {
    justify-content: space-around!important
}

.align-items-start {
    align-items: flex-start!important
}

.align-items-end {
    align-items: flex-end!important
}

.align-items-center {
    align-items: center!important
}

.align-items-baseline {
    align-items: baseline!important
}

.align-items-stretch {
    align-items: stretch!important
}

.align-content-start {
    align-content: flex-start!important
}

.align-content-end {
    align-content: flex-end!important
}

.align-content-center {
    align-content: center!important
}

.align-content-between {
    align-content: space-between!important
}

.align-content-around {
    align-content: space-around!important
}

.align-content-stretch {
    align-content: stretch!important
}

.align-self-auto {
    align-self: auto!important
}

.align-self-start {
    align-self: flex-start!important
}

.align-self-end {
    align-self: flex-end!important
}

.align-self-center {
    align-self: center!important
}

.align-self-baseline {
    align-self: baseline!important
}

.align-self-stretch {
    align-self: stretch!important
}

@media (min-width:576px) {
    .flex-sm-row {
        flex-direction: row!important
    }
    .flex-sm-column {
        flex-direction: column!important
    }
    .flex-sm-row-reverse {
        flex-direction: row-reverse!important
    }
    .flex-sm-column-reverse {
        flex-direction: column-reverse!important
    }
    .flex-sm-wrap {
        flex-wrap: wrap!important
    }
    .flex-sm-nowrap {
        flex-wrap: nowrap!important
    }
    .flex-sm-wrap-reverse {
        flex-wrap: wrap-reverse!important
    }
    .flex-sm-fill {
        flex: 1 1 auto!important
    }
    .flex-sm-grow-0 {
        flex-grow: 0!important
    }
    .flex-sm-grow-1 {
        flex-grow: 1!important
    }
    .flex-sm-shrink-0 {
        flex-shrink: 0!important
    }
    .flex-sm-shrink-1 {
        flex-shrink: 1!important
    }
    .justify-content-sm-start {
        justify-content: flex-start!important
    }
    .justify-content-sm-end {
        justify-content: flex-end!important
    }
    .justify-content-sm-center {
        justify-content: center!important
    }
    .justify-content-sm-between {
        justify-content: space-between!important
    }
    .justify-content-sm-around {
        justify-content: space-around!important
    }
    .align-items-sm-start {
        align-items: flex-start!important
    }
    .align-items-sm-end {
        align-items: flex-end!important
    }
    .align-items-sm-center {
        align-items: center!important
    }
    .align-items-sm-baseline {
        align-items: baseline!important
    }
    .align-items-sm-stretch {
        align-items: stretch!important
    }
    .align-content-sm-start {
        align-content: flex-start!important
    }
    .align-content-sm-end {
        align-content: flex-end!important
    }
    .align-content-sm-center {
        align-content: center!important
    }
    .align-content-sm-between {
        align-content: space-between!important
    }
    .align-content-sm-around {
        align-content: space-around!important
    }
    .align-content-sm-stretch {
        align-content: stretch!important
    }
    .align-self-sm-auto {
        align-self: auto!important
    }
    .align-self-sm-start {
        align-self: flex-start!important
    }
    .align-self-sm-end {
        align-self: flex-end!important
    }
    .align-self-sm-center {
        align-self: center!important
    }
    .align-self-sm-baseline {
        align-self: baseline!important
    }
    .align-self-sm-stretch {
        align-self: stretch!important
    }
}

@media (min-width:768px) {
    .flex-md-row {
        flex-direction: row!important
    }
    .flex-md-column {
        flex-direction: column!important
    }
    .flex-md-row-reverse {
        flex-direction: row-reverse!important
    }
    .flex-md-column-reverse {
        flex-direction: column-reverse!important
    }
    .flex-md-wrap {
        flex-wrap: wrap!important
    }
    .flex-md-nowrap {
        flex-wrap: nowrap!important
    }
    .flex-md-wrap-reverse {
        flex-wrap: wrap-reverse!important
    }
    .flex-md-fill {
        flex: 1 1 auto!important
    }
    .flex-md-grow-0 {
        flex-grow: 0!important
    }
    .flex-md-grow-1 {
        flex-grow: 1!important
    }
    .flex-md-shrink-0 {
        flex-shrink: 0!important
    }
    .flex-md-shrink-1 {
        flex-shrink: 1!important
    }
    .justify-content-md-start {
        justify-content: flex-start!important
    }
    .justify-content-md-end {
        justify-content: flex-end!important
    }
    .justify-content-md-center {
        justify-content: center!important
    }
    .justify-content-md-between {
        justify-content: space-between!important
    }
    .justify-content-md-around {
        justify-content: space-around!important
    }
    .align-items-md-start {
        align-items: flex-start!important
    }
    .align-items-md-end {
        align-items: flex-end!important
    }
    .align-items-md-center {
        align-items: center!important
    }
    .align-items-md-baseline {
        align-items: baseline!important
    }
    .align-items-md-stretch {
        align-items: stretch!important
    }
    .align-content-md-start {
        align-content: flex-start!important
    }
    .align-content-md-end {
        align-content: flex-end!important
    }
    .align-content-md-center {
        align-content: center!important
    }
    .align-content-md-between {
        align-content: space-between!important
    }
    .align-content-md-around {
        align-content: space-around!important
    }
    .align-content-md-stretch {
        align-content: stretch!important
    }
    .align-self-md-auto {
        align-self: auto!important
    }
    .align-self-md-start {
        align-self: flex-start!important
    }
    .align-self-md-end {
        align-self: flex-end!important
    }
    .align-self-md-center {
        align-self: center!important
    }
    .align-self-md-baseline {
        align-self: baseline!important
    }
    .align-self-md-stretch {
        align-self: stretch!important
    }
}

@media (min-width:992px) {
    .flex-lg-row {
        flex-direction: row!important
    }
    .flex-lg-column {
        flex-direction: column!important
    }
    .flex-lg-row-reverse {
        flex-direction: row-reverse!important
    }
    .flex-lg-column-reverse {
        flex-direction: column-reverse!important
    }
    .flex-lg-wrap {
        flex-wrap: wrap!important
    }
    .flex-lg-nowrap {
        flex-wrap: nowrap!important
    }
    .flex-lg-wrap-reverse {
        flex-wrap: wrap-reverse!important
    }
    .flex-lg-fill {
        flex: 1 1 auto!important
    }
    .flex-lg-grow-0 {
        flex-grow: 0!important
    }
    .flex-lg-grow-1 {
        flex-grow: 1!important
    }
    .flex-lg-shrink-0 {
        flex-shrink: 0!important
    }
    .flex-lg-shrink-1 {
        flex-shrink: 1!important
    }
    .justify-content-lg-start {
        justify-content: flex-start!important
    }
    .justify-content-lg-end {
        justify-content: flex-end!important
    }
    .justify-content-lg-center {
        justify-content: center!important
    }
    .justify-content-lg-between {
        justify-content: space-between!important
    }
    .justify-content-lg-around {
        justify-content: space-around!important
    }
    .align-items-lg-start {
        align-items: flex-start!important
    }
    .align-items-lg-end {
        align-items: flex-end!important
    }
    .align-items-lg-center {
        align-items: center!important
    }
    .align-items-lg-baseline {
        align-items: baseline!important
    }
    .align-items-lg-stretch {
        align-items: stretch!important
    }
    .align-content-lg-start {
        align-content: flex-start!important
    }
    .align-content-lg-end {
        align-content: flex-end!important
    }
    .align-content-lg-center {
        align-content: center!important
    }
    .align-content-lg-between {
        align-content: space-between!important
    }
    .align-content-lg-around {
        align-content: space-around!important
    }
    .align-content-lg-stretch {
        align-content: stretch!important
    }
    .align-self-lg-auto {
        align-self: auto!important
    }
    .align-self-lg-start {
        align-self: flex-start!important
    }
    .align-self-lg-end {
        align-self: flex-end!important
    }
    .align-self-lg-center {
        align-self: center!important
    }
    .align-self-lg-baseline {
        align-self: baseline!important
    }
    .align-self-lg-stretch {
        align-self: stretch!important
    }
}

@media (min-width:1200px) {
    .flex-xl-row {
        flex-direction: row!important
    }
    .flex-xl-column {
        flex-direction: column!important
    }
    .flex-xl-row-reverse {
        flex-direction: row-reverse!important
    }
    .flex-xl-column-reverse {
        flex-direction: column-reverse!important
    }
    .flex-xl-wrap {
        flex-wrap: wrap!important
    }
    .flex-xl-nowrap {
        flex-wrap: nowrap!important
    }
    .flex-xl-wrap-reverse {
        flex-wrap: wrap-reverse!important
    }
    .flex-xl-fill {
        flex: 1 1 auto!important
    }
    .flex-xl-grow-0 {
        flex-grow: 0!important
    }
    .flex-xl-grow-1 {
        flex-grow: 1!important
    }
    .flex-xl-shrink-0 {
        flex-shrink: 0!important
    }
    .flex-xl-shrink-1 {
        flex-shrink: 1!important
    }
    .justify-content-xl-start {
        justify-content: flex-start!important
    }
    .justify-content-xl-end {
        justify-content: flex-end!important
    }
    .justify-content-xl-center {
        justify-content: center!important
    }
    .justify-content-xl-between {
        justify-content: space-between!important
    }
    .justify-content-xl-around {
        justify-content: space-around!important
    }
    .align-items-xl-start {
        align-items: flex-start!important
    }
    .align-items-xl-end {
        align-items: flex-end!important
    }
    .align-items-xl-center {
        align-items: center!important
    }
    .align-items-xl-baseline {
        align-items: baseline!important
    }
    .align-items-xl-stretch {
        align-items: stretch!important
    }
    .align-content-xl-start {
        align-content: flex-start!important
    }
    .align-content-xl-end {
        align-content: flex-end!important
    }
    .align-content-xl-center {
        align-content: center!important
    }
    .align-content-xl-between {
        align-content: space-between!important
    }
    .align-content-xl-around {
        align-content: space-around!important
    }
    .align-content-xl-stretch {
        align-content: stretch!important
    }
    .align-self-xl-auto {
        align-self: auto!important
    }
    .align-self-xl-start {
        align-self: flex-start!important
    }
    .align-self-xl-end {
        align-self: flex-end!important
    }
    .align-self-xl-center {
        align-self: center!important
    }
    .align-self-xl-baseline {
        align-self: baseline!important
    }
    .align-self-xl-stretch {
        align-self: stretch!important
    }
}

.w-25 {
    width: 25%!important
}

.w-50 {
    width: 50%!important
}

.w-75 {
    width: 75%!important
}

.w-100 {
    width: 100%!important
}

.w-auto {
    width: auto!important
}

.h-25 {
    height: 25%!important
}

.h-50 {
    height: 50%!important
}

.h-75 {
    height: 75%!important
}

.h-100 {
    height: 100%!important
}

.h-auto {
    height: auto!important
}

.mw-100 {
    max-width: 100%!important
}

.mh-100 {
    max-height: 100%!important
}

.m-0 {
    margin: 0!important
}

.mt-0,
.my-0 {
    margin-top: 0!important
}

.mr-0,
.mx-0 {
    margin-right: 0!important
}

.mb-0,
.my-0 {
    margin-bottom: 0!important
}

.ml-0,
.mx-0 {
    margin-left: 0!important
}

.m-1 {
    margin: .25rem!important
}

.mt-1,
.my-1 {
    margin-top: .25rem!important
}

.mr-1,
.mx-1 {
    margin-right: .25rem!important
}

.mb-1,
.my-1 {
    margin-bottom: .25rem!important
}

.ml-1,
.mx-1 {
    margin-left: .25rem!important
}

.m-2 {
    margin: .5rem!important
}

.mt-2,
.my-2 {
    margin-top: .5rem!important
}

.mr-2,
.mx-2 {
    margin-right: .5rem!important
}

.mb-2,
.my-2 {
    margin-bottom: .5rem!important
}

.ml-2,
.mx-2 {
    margin-left: .5rem!important
}

.m-3 {
    margin: 1rem!important
}

.mt-3,
.my-3 {
    margin-top: 1rem!important
}

.mr-3,
.mx-3 {
    margin-right: 1rem!important
}

.mb-3,
.my-3 {
    margin-bottom: 1rem!important
}

.ml-3,
.mx-3 {
    margin-left: 1rem!important
}

.m-4 {
    margin: 1.5rem!important
}

.mt-4,
.my-4 {
    margin-top: 1.5rem!important
}

.mr-4,
.mx-4 {
    margin-right: 1.5rem!important
}

.mb-4,
.my-4 {
    margin-bottom: 1.5rem!important
}

.ml-4,
.mx-4 {
    margin-left: 1.5rem!important
}

.m-5 {
    margin: 3rem!important
}

.mt-5,
.my-5 {
    margin-top: 3rem!important
}

.mr-5,
.mx-5 {
    margin-right: 3rem!important
}

.mb-5,
.my-5 {
    margin-bottom: 3rem!important
}

.ml-5,
.mx-5 {
    margin-left: 3rem!important
}

.p-0 {
    padding: 0!important
}

.pt-0,
.py-0 {
    padding-top: 0!important
}

.pr-0,
.px-0 {
    padding-right: 0!important
}

.pb-0,
.py-0 {
    padding-bottom: 0!important
}

.pl-0,
.px-0 {
    padding-left: 0!important
}

.p-1 {
    padding: .25rem!important
}

.pt-1,
.py-1 {
    padding-top: .25rem!important
}

.pr-1,
.px-1 {
    padding-right: .25rem!important
}

.pb-1,
.py-1 {
    padding-bottom: .25rem!important
}

.pl-1,
.px-1 {
    padding-left: .25rem!important
}

.p-2 {
    padding: .5rem!important
}

.pt-2,
.py-2 {
    padding-top: .5rem!important
}

.pr-2,
.px-2 {
    padding-right: .5rem!important
}

.pb-2,
.py-2 {
    padding-bottom: .5rem!important
}

.pl-2,
.px-2 {
    padding-left: .5rem!important
}

.p-3 {
    padding: 1rem!important
}

.pt-3,
.py-3 {
    padding-top: 1rem!important
}

.pr-3,
.px-3 {
    padding-right: 1rem!important
}

.pb-3,
.py-3 {
    padding-bottom: 1rem!important
}

.pl-3,
.px-3 {
    padding-left: 1rem!important
}

.p-4 {
    padding: 1.5rem!important
}

.pt-4,
.py-4 {
    padding-top: 1.5rem!important
}

.pr-4,
.px-4 {
    padding-right: 1.5rem!important
}

.pb-4,
.py-4 {
    padding-bottom: 1.5rem!important
}

.pl-4,
.px-4 {
    padding-left: 1.5rem!important
}

.p-5 {
    padding: 3rem!important
}

.pt-5,
.py-5 {
    padding-top: 3rem!important
}

.pr-5,
.px-5 {
    padding-right: 3rem!important
}

.pb-5,
.py-5 {
    padding-bottom: 3rem!important
}

.pl-5,
.px-5 {
    padding-left: 3rem!important
}

.m-auto {
    margin: auto!important
}

.mt-auto,
.my-auto {
    margin-top: auto!important
}

.mr-auto,
.mx-auto {
    margin-right: auto!important
}

.mb-auto,
.my-auto {
    margin-bottom: auto!important
}

.ml-auto,
.mx-auto {
    margin-left: auto!important
}

@media (min-width:576px) {
    .m-sm-0 {
        margin: 0!important
    }
    .mt-sm-0,
    .my-sm-0 {
        margin-top: 0!important
    }
    .mr-sm-0,
    .mx-sm-0 {
        margin-right: 0!important
    }
    .mb-sm-0,
    .my-sm-0 {
        margin-bottom: 0!important
    }
    .ml-sm-0,
    .mx-sm-0 {
        margin-left: 0!important
    }
    .m-sm-1 {
        margin: .25rem!important
    }
    .mt-sm-1,
    .my-sm-1 {
        margin-top: .25rem!important
    }
    .mr-sm-1,
    .mx-sm-1 {
        margin-right: .25rem!important
    }
    .mb-sm-1,
    .my-sm-1 {
        margin-bottom: .25rem!important
    }
    .ml-sm-1,
    .mx-sm-1 {
        margin-left: .25rem!important
    }
    .m-sm-2 {
        margin: .5rem!important
    }
    .mt-sm-2,
    .my-sm-2 {
        margin-top: .5rem!important
    }
    .mr-sm-2,
    .mx-sm-2 {
        margin-right: .5rem!important
    }
    .mb-sm-2,
    .my-sm-2 {
        margin-bottom: .5rem!important
    }
    .ml-sm-2,
    .mx-sm-2 {
        margin-left: .5rem!important
    }
    .m-sm-3 {
        margin: 1rem!important
    }
    .mt-sm-3,
    .my-sm-3 {
        margin-top: 1rem!important
    }
    .mr-sm-3,
    .mx-sm-3 {
        margin-right: 1rem!important
    }
    .mb-sm-3,
    .my-sm-3 {
        margin-bottom: 1rem!important
    }
    .ml-sm-3,
    .mx-sm-3 {
        margin-left: 1rem!important
    }
    .m-sm-4 {
        margin: 1.5rem!important
    }
    .mt-sm-4,
    .my-sm-4 {
        margin-top: 1.5rem!important
    }
    .mr-sm-4,
    .mx-sm-4 {
        margin-right: 1.5rem!important
    }
    .mb-sm-4,
    .my-sm-4 {
        margin-bottom: 1.5rem!important
    }
    .ml-sm-4,
    .mx-sm-4 {
        margin-left: 1.5rem!important
    }
    .m-sm-5 {
        margin: 3rem!important
    }
    .mt-sm-5,
    .my-sm-5 {
        margin-top: 3rem!important
    }
    .mr-sm-5,
    .mx-sm-5 {
        margin-right: 3rem!important
    }
    .mb-sm-5,
    .my-sm-5 {
        margin-bottom: 3rem!important
    }
    .ml-sm-5,
    .mx-sm-5 {
        margin-left: 3rem!important
    }
    .p-sm-0 {
        padding: 0!important
    }
    .pt-sm-0,
    .py-sm-0 {
        padding-top: 0!important
    }
    .pr-sm-0,
    .px-sm-0 {
        padding-right: 0!important
    }
    .pb-sm-0,
    .py-sm-0 {
        padding-bottom: 0!important
    }
    .pl-sm-0,
    .px-sm-0 {
        padding-left: 0!important
    }
    .p-sm-1 {
        padding: .25rem!important
    }
    .pt-sm-1,
    .py-sm-1 {
        padding-top: .25rem!important
    }
    .pr-sm-1,
    .px-sm-1 {
        padding-right: .25rem!important
    }
    .pb-sm-1,
    .py-sm-1 {
        padding-bottom: .25rem!important
    }
    .pl-sm-1,
    .px-sm-1 {
        padding-left: .25rem!important
    }
    .p-sm-2 {
        padding: .5rem!important
    }
    .pt-sm-2,
    .py-sm-2 {
        padding-top: .5rem!important
    }
    .pr-sm-2,
    .px-sm-2 {
        padding-right: .5rem!important
    }
    .pb-sm-2,
    .py-sm-2 {
        padding-bottom: .5rem!important
    }
    .pl-sm-2,
    .px-sm-2 {
        padding-left: .5rem!important
    }
    .p-sm-3 {
        padding: 1rem!important
    }
    .pt-sm-3,
    .py-sm-3 {
        padding-top: 1rem!important
    }
    .pr-sm-3,
    .px-sm-3 {
        padding-right: 1rem!important
    }
    .pb-sm-3,
    .py-sm-3 {
        padding-bottom: 1rem!important
    }
    .pl-sm-3,
    .px-sm-3 {
        padding-left: 1rem!important
    }
    .p-sm-4 {
        padding: 1.5rem!important
    }
    .pt-sm-4,
    .py-sm-4 {
        padding-top: 1.5rem!important
    }
    .pr-sm-4,
    .px-sm-4 {
        padding-right: 1.5rem!important
    }
    .pb-sm-4,
    .py-sm-4 {
        padding-bottom: 1.5rem!important
    }
    .pl-sm-4,
    .px-sm-4 {
        padding-left: 1.5rem!important
    }
    .p-sm-5 {
        padding: 3rem!important
    }
    .pt-sm-5,
    .py-sm-5 {
        padding-top: 3rem!important
    }
    .pr-sm-5,
    .px-sm-5 {
        padding-right: 3rem!important
    }
    .pb-sm-5,
    .py-sm-5 {
        padding-bottom: 3rem!important
    }
    .pl-sm-5,
    .px-sm-5 {
        padding-left: 3rem!important
    }
    .m-sm-auto {
        margin: auto!important
    }
    .mt-sm-auto,
    .my-sm-auto {
        margin-top: auto!important
    }
    .mr-sm-auto,
    .mx-sm-auto {
        margin-right: auto!important
    }
    .mb-sm-auto,
    .my-sm-auto {
        margin-bottom: auto!important
    }
    .ml-sm-auto,
    .mx-sm-auto {
        margin-left: auto!important
    }
}

@media (min-width:768px) {
    .m-md-0 {
        margin: 0!important
    }
    .mt-md-0,
    .my-md-0 {
        margin-top: 0!important
    }
    .mr-md-0,
    .mx-md-0 {
        margin-right: 0!important
    }
    .mb-md-0,
    .my-md-0 {
        margin-bottom: 0!important
    }
    .ml-md-0,
    .mx-md-0 {
        margin-left: 0!important
    }
    .m-md-1 {
        margin: .25rem!important
    }
    .mt-md-1,
    .my-md-1 {
        margin-top: .25rem!important
    }
    .mr-md-1,
    .mx-md-1 {
        margin-right: .25rem!important
    }
    .mb-md-1,
    .my-md-1 {
        margin-bottom: .25rem!important
    }
    .ml-md-1,
    .mx-md-1 {
        margin-left: .25rem!important
    }
    .m-md-2 {
        margin: .5rem!important
    }
    .mt-md-2,
    .my-md-2 {
        margin-top: .5rem!important
    }
    .mr-md-2,
    .mx-md-2 {
        margin-right: .5rem!important
    }
    .mb-md-2,
    .my-md-2 {
        margin-bottom: .5rem!important
    }
    .ml-md-2,
    .mx-md-2 {
        margin-left: .5rem!important
    }
    .m-md-3 {
        margin: 1rem!important
    }
    .mt-md-3,
    .my-md-3 {
        margin-top: 1rem!important
    }
    .mr-md-3,
    .mx-md-3 {
        margin-right: 1rem!important
    }
    .mb-md-3,
    .my-md-3 {
        margin-bottom: 1rem!important
    }
    .ml-md-3,
    .mx-md-3 {
        margin-left: 1rem!important
    }
    .m-md-4 {
        margin: 1.5rem!important
    }
    .mt-md-4,
    .my-md-4 {
        margin-top: 1.5rem!important
    }
    .mr-md-4,
    .mx-md-4 {
        margin-right: 1.5rem!important
    }
    .mb-md-4,
    .my-md-4 {
        margin-bottom: 1.5rem!important
    }
    .ml-md-4,
    .mx-md-4 {
        margin-left: 1.5rem!important
    }
    .m-md-5 {
        margin: 3rem!important
    }
    .mt-md-5,
    .my-md-5 {
        margin-top: 3rem!important
    }
    .mr-md-5,
    .mx-md-5 {
        margin-right: 3rem!important
    }
    .mb-md-5,
    .my-md-5 {
        margin-bottom: 3rem!important
    }
    .ml-md-5,
    .mx-md-5 {
        margin-left: 3rem!important
    }
    .p-md-0 {
        padding: 0!important
    }
    .pt-md-0,
    .py-md-0 {
        padding-top: 0!important
    }
    .pr-md-0,
    .px-md-0 {
        padding-right: 0!important
    }
    .pb-md-0,
    .py-md-0 {
        padding-bottom: 0!important
    }
    .pl-md-0,
    .px-md-0 {
        padding-left: 0!important
    }
    .p-md-1 {
        padding: .25rem!important
    }
    .pt-md-1,
    .py-md-1 {
        padding-top: .25rem!important
    }
    .pr-md-1,
    .px-md-1 {
        padding-right: .25rem!important
    }
    .pb-md-1,
    .py-md-1 {
        padding-bottom: .25rem!important
    }
    .pl-md-1,
    .px-md-1 {
        padding-left: .25rem!important
    }
    .p-md-2 {
        padding: .5rem!important
    }
    .pt-md-2,
    .py-md-2 {
        padding-top: .5rem!important
    }
    .pr-md-2,
    .px-md-2 {
        padding-right: .5rem!important
    }
    .pb-md-2,
    .py-md-2 {
        padding-bottom: .5rem!important
    }
    .pl-md-2,
    .px-md-2 {
        padding-left: .5rem!important
    }
    .p-md-3 {
        padding: 1rem!important
    }
    .pt-md-3,
    .py-md-3 {
        padding-top: 1rem!important
    }
    .pr-md-3,
    .px-md-3 {
        padding-right: 1rem!important
    }
    .pb-md-3,
    .py-md-3 {
        padding-bottom: 1rem!important
    }
    .pl-md-3,
    .px-md-3 {
        padding-left: 1rem!important
    }
    .p-md-4 {
        padding: 1.5rem!important
    }
    .pt-md-4,
    .py-md-4 {
        padding-top: 1.5rem!important
    }
    .pr-md-4,
    .px-md-4 {
        padding-right: 1.5rem!important
    }
    .pb-md-4,
    .py-md-4 {
        padding-bottom: 1.5rem!important
    }
    .pl-md-4,
    .px-md-4 {
        padding-left: 1.5rem!important
    }
    .p-md-5 {
        padding: 3rem!important
    }
    .pt-md-5,
    .py-md-5 {
        padding-top: 3rem!important
    }
    .pr-md-5,
    .px-md-5 {
        padding-right: 3rem!important
    }
    .pb-md-5,
    .py-md-5 {
        padding-bottom: 3rem!important
    }
    .pl-md-5,
    .px-md-5 {
        padding-left: 3rem!important
    }
    .m-md-auto {
        margin: auto!important
    }
    .mt-md-auto,
    .my-md-auto {
        margin-top: auto!important
    }
    .mr-md-auto,
    .mx-md-auto {
        margin-right: auto!important
    }
    .mb-md-auto,
    .my-md-auto {
        margin-bottom: auto!important
    }
    .ml-md-auto,
    .mx-md-auto {
        margin-left: auto!important
    }
}

@media (min-width:992px) {
    .m-lg-0 {
        margin: 0!important
    }
    .mt-lg-0,
    .my-lg-0 {
        margin-top: 0!important
    }
    .mr-lg-0,
    .mx-lg-0 {
        margin-right: 0!important
    }
    .mb-lg-0,
    .my-lg-0 {
        margin-bottom: 0!important
    }
    .ml-lg-0,
    .mx-lg-0 {
        margin-left: 0!important
    }
    .m-lg-1 {
        margin: .25rem!important
    }
    .mt-lg-1,
    .my-lg-1 {
        margin-top: .25rem!important
    }
    .mr-lg-1,
    .mx-lg-1 {
        margin-right: .25rem!important
    }
    .mb-lg-1,
    .my-lg-1 {
        margin-bottom: .25rem!important
    }
    .ml-lg-1,
    .mx-lg-1 {
        margin-left: .25rem!important
    }
    .m-lg-2 {
        margin: .5rem!important
    }
    .mt-lg-2,
    .my-lg-2 {
        margin-top: .5rem!important
    }
    .mr-lg-2,
    .mx-lg-2 {
        margin-right: .5rem!important
    }
    .mb-lg-2,
    .my-lg-2 {
        margin-bottom: .5rem!important
    }
    .ml-lg-2,
    .mx-lg-2 {
        margin-left: .5rem!important
    }
    .m-lg-3 {
        margin: 1rem!important
    }
    .mt-lg-3,
    .my-lg-3 {
        margin-top: 1rem!important
    }
    .mr-lg-3,
    .mx-lg-3 {
        margin-right: 1rem!important
    }
    .mb-lg-3,
    .my-lg-3 {
        margin-bottom: 1rem!important
    }
    .ml-lg-3,
    .mx-lg-3 {
        margin-left: 1rem!important
    }
    .m-lg-4 {
        margin: 1.5rem!important
    }
    .mt-lg-4,
    .my-lg-4 {
        margin-top: 1.5rem!important
    }
    .mr-lg-4,
    .mx-lg-4 {
        margin-right: 1.5rem!important
    }
    .mb-lg-4,
    .my-lg-4 {
        margin-bottom: 1.5rem!important
    }
    .ml-lg-4,
    .mx-lg-4 {
        margin-left: 1.5rem!important
    }
    .m-lg-5 {
        margin: 3rem!important
    }
    .mt-lg-5,
    .my-lg-5 {
        margin-top: 3rem!important
    }
    .mr-lg-5,
    .mx-lg-5 {
        margin-right: 3rem!important
    }
    .mb-lg-5,
    .my-lg-5 {
        margin-bottom: 3rem!important
    }
    .ml-lg-5,
    .mx-lg-5 {
        margin-left: 3rem!important
    }
    .p-lg-0 {
        padding: 0!important
    }
    .pt-lg-0,
    .py-lg-0 {
        padding-top: 0!important
    }
    .pr-lg-0,
    .px-lg-0 {
        padding-right: 0!important
    }
    .pb-lg-0,
    .py-lg-0 {
        padding-bottom: 0!important
    }
    .pl-lg-0,
    .px-lg-0 {
        padding-left: 0!important
    }
    .p-lg-1 {
        padding: .25rem!important
    }
    .pt-lg-1,
    .py-lg-1 {
        padding-top: .25rem!important
    }
    .pr-lg-1,
    .px-lg-1 {
        padding-right: .25rem!important
    }
    .pb-lg-1,
    .py-lg-1 {
        padding-bottom: .25rem!important
    }
    .pl-lg-1,
    .px-lg-1 {
        padding-left: .25rem!important
    }
    .p-lg-2 {
        padding: .5rem!important
    }
    .pt-lg-2,
    .py-lg-2 {
        padding-top: .5rem!important
    }
    .pr-lg-2,
    .px-lg-2 {
        padding-right: .5rem!important
    }
    .pb-lg-2,
    .py-lg-2 {
        padding-bottom: .5rem!important
    }
    .pl-lg-2,
    .px-lg-2 {
        padding-left: .5rem!important
    }
    .p-lg-3 {
        padding: 1rem!important
    }
    .pt-lg-3,
    .py-lg-3 {
        padding-top: 1rem!important
    }
    .pr-lg-3,
    .px-lg-3 {
        padding-right: 1rem!important
    }
    .pb-lg-3,
    .py-lg-3 {
        padding-bottom: 1rem!important
    }
    .pl-lg-3,
    .px-lg-3 {
        padding-left: 1rem!important
    }
    .p-lg-4 {
        padding: 1.5rem!important
    }
    .pt-lg-4,
    .py-lg-4 {
        padding-top: 1.5rem!important
    }
    .pr-lg-4,
    .px-lg-4 {
        padding-right: 1.5rem!important
    }
    .pb-lg-4,
    .py-lg-4 {
        padding-bottom: 1.5rem!important
    }
    .pl-lg-4,
    .px-lg-4 {
        padding-left: 1.5rem!important
    }
    .p-lg-5 {
        padding: 3rem!important
    }
    .pt-lg-5,
    .py-lg-5 {
        padding-top: 3rem!important
    }
    .pr-lg-5,
    .px-lg-5 {
        padding-right: 3rem!important
    }
    .pb-lg-5,
    .py-lg-5 {
        padding-bottom: 3rem!important
    }
    .pl-lg-5,
    .px-lg-5 {
        padding-left: 3rem!important
    }
    .m-lg-auto {
        margin: auto!important
    }
    .mt-lg-auto,
    .my-lg-auto {
        margin-top: auto!important
    }
    .mr-lg-auto,
    .mx-lg-auto {
        margin-right: auto!important
    }
    .mb-lg-auto,
    .my-lg-auto {
        margin-bottom: auto!important
    }
    .ml-lg-auto,
    .mx-lg-auto {
        margin-left: auto!important
    }
}

@media (min-width:1200px) {
    .m-xl-0 {
        margin: 0!important
    }
    .mt-xl-0,
    .my-xl-0 {
        margin-top: 0!important
    }
    .mr-xl-0,
    .mx-xl-0 {
        margin-right: 0!important
    }
    .mb-xl-0,
    .my-xl-0 {
        margin-bottom: 0!important
    }
    .ml-xl-0,
    .mx-xl-0 {
        margin-left: 0!important
    }
    .m-xl-1 {
        margin: .25rem!important
    }
    .mt-xl-1,
    .my-xl-1 {
        margin-top: .25rem!important
    }
    .mr-xl-1,
    .mx-xl-1 {
        margin-right: .25rem!important
    }
    .mb-xl-1,
    .my-xl-1 {
        margin-bottom: .25rem!important
    }
    .ml-xl-1,
    .mx-xl-1 {
        margin-left: .25rem!important
    }
    .m-xl-2 {
        margin: .5rem!important
    }
    .mt-xl-2,
    .my-xl-2 {
        margin-top: .5rem!important
    }
    .mr-xl-2,
    .mx-xl-2 {
        margin-right: .5rem!important
    }
    .mb-xl-2,
    .my-xl-2 {
        margin-bottom: .5rem!important
    }
    .ml-xl-2,
    .mx-xl-2 {
        margin-left: .5rem!important
    }
    .m-xl-3 {
        margin: 1rem!important
    }
    .mt-xl-3,
    .my-xl-3 {
        margin-top: 1rem!important
    }
    .mr-xl-3,
    .mx-xl-3 {
        margin-right: 1rem!important
    }
    .mb-xl-3,
    .my-xl-3 {
        margin-bottom: 1rem!important
    }
    .ml-xl-3,
    .mx-xl-3 {
        margin-left: 1rem!important
    }
    .m-xl-4 {
        margin: 1.5rem!important
    }
    .mt-xl-4,
    .my-xl-4 {
        margin-top: 1.5rem!important
    }
    .mr-xl-4,
    .mx-xl-4 {
        margin-right: 1.5rem!important
    }
    .mb-xl-4,
    .my-xl-4 {
        margin-bottom: 1.5rem!important
    }
    .ml-xl-4,
    .mx-xl-4 {
        margin-left: 1.5rem!important
    }
    .m-xl-5 {
        margin: 3rem!important
    }
    .mt-xl-5,
    .my-xl-5 {
        margin-top: 3rem!important
    }
    .mr-xl-5,
    .mx-xl-5 {
        margin-right: 3rem!important
    }
    .mb-xl-5,
    .my-xl-5 {
        margin-bottom: 3rem!important
    }
    .ml-xl-5,
    .mx-xl-5 {
        margin-left: 3rem!important
    }
    .p-xl-0 {
        padding: 0!important
    }
    .pt-xl-0,
    .py-xl-0 {
        padding-top: 0!important
    }
    .pr-xl-0,
    .px-xl-0 {
        padding-right: 0!important
    }
    .pb-xl-0,
    .py-xl-0 {
        padding-bottom: 0!important
    }
    .pl-xl-0,
    .px-xl-0 {
        padding-left: 0!important
    }
    .p-xl-1 {
        padding: .25rem!important
    }
    .pt-xl-1,
    .py-xl-1 {
        padding-top: .25rem!important
    }
    .pr-xl-1,
    .px-xl-1 {
        padding-right: .25rem!important
    }
    .pb-xl-1,
    .py-xl-1 {
        padding-bottom: .25rem!important
    }
    .pl-xl-1,
    .px-xl-1 {
        padding-left: .25rem!important
    }
    .p-xl-2 {
        padding: .5rem!important
    }
    .pt-xl-2,
    .py-xl-2 {
        padding-top: .5rem!important
    }
    .pr-xl-2,
    .px-xl-2 {
        padding-right: .5rem!important
    }
    .pb-xl-2,
    .py-xl-2 {
        padding-bottom: .5rem!important
    }
    .pl-xl-2,
    .px-xl-2 {
        padding-left: .5rem!important
    }
    .p-xl-3 {
        padding: 1rem!important
    }
    .pt-xl-3,
    .py-xl-3 {
        padding-top: 1rem!important
    }
    .pr-xl-3,
    .px-xl-3 {
        padding-right: 1rem!important
    }
    .pb-xl-3,
    .py-xl-3 {
        padding-bottom: 1rem!important
    }
    .pl-xl-3,
    .px-xl-3 {
        padding-left: 1rem!important
    }
    .p-xl-4 {
        padding: 1.5rem!important
    }
    .pt-xl-4,
    .py-xl-4 {
        padding-top: 1.5rem!important
    }
    .pr-xl-4,
    .px-xl-4 {
        padding-right: 1.5rem!important
    }
    .pb-xl-4,
    .py-xl-4 {
        padding-bottom: 1.5rem!important
    }
    .pl-xl-4,
    .px-xl-4 {
        padding-left: 1.5rem!important
    }
    .p-xl-5 {
        padding: 3rem!important
    }
    .pt-xl-5,
    .py-xl-5 {
        padding-top: 3rem!important
    }
    .pr-xl-5,
    .px-xl-5 {
        padding-right: 3rem!important
    }
    .pb-xl-5,
    .py-xl-5 {
        padding-bottom: 3rem!important
    }
    .pl-xl-5,
    .px-xl-5 {
        padding-left: 3rem!important
    }
    .m-xl-auto {
        margin: auto!important
    }
    .mt-xl-auto,
    .my-xl-auto {
        margin-top: auto!important
    }
    .mr-xl-auto,
    .mx-xl-auto {
        margin-right: auto!important
    }
    .mb-xl-auto,
    .my-xl-auto {
        margin-bottom: auto!important
    }
    .ml-xl-auto,
    .mx-xl-auto {
        margin-left: auto!important
    }
}

.visible {
    visibility: visible!important
}

.invisible {
    visibility: hidden!important
}

:root {
    --red: #0037c1;
    --red-darker: #0037c1;
    --warm-gray: #e7e7e3;
}

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

html {
    font-size: 17px;
    padding: 0;
    margin: 0
}

body {
    width: 100%;
    overflow-x: hidden
}

::-moz-selection {
    background: #509CD4;
    text-shadow: none
}

::selection {
    background: #509CD4;
    text-shadow: none
}

article {
    position: relative;
    padding: 0;
    background: #fff;
    max-width: 100%
}

@media (max-width:991.98px) {
    article {
        overflow: hidden
    }
}

article section {
    margin-bottom: 2em;
    padding: 6em 0
}

@media (max-width:767.98px) {
    article section {
        padding: 3em 0;
        margin-bottom: 1em
    }
}

article section.pull-up-next {
    margin-bottom: -5em
}

article section.pull-up-next--under {
    position: relative;
    z-index: 1
}

article section.pull-up-next--under+section {
    padding-top: 5em
}

article section.pull-up-next--over {
    position: relative;
    padding-bottom: 10em;
    margin-bottom: -5em;
    padding-bottom: 7em
}

@media (max-width:767.98px) {
    article section.pull-up-next--over {
        margin-bottom: -6em;
        padding-bottom: 6em
    }
}

article section.pull-up-next--over+section {
    padding-top: 0;
    z-index: 1;
    position: relative
}

article section.no-bottom-margin {
    margin-bottom: 0
}

article section.no-margin {
    margin-bottom: 0;
    margin-top: 0
}

article section.little-bottom-margin {
    margin-bottom: 3em
}

article section.no-padding {
    padding: 0
}

article section.no-bottom-padding {
    padding-bottom: 0
}

article section.little-bottom-padding {
    padding-bottom: 3em
}

article section.text-box>div {
    padding-top: 3em;
    padding-bottom: 2em
}

@media (max-width:767.98px) {
    article section.text-box>div {
        padding-top: 2em
    }
}

.home article {
    margin-top: 0
}

.space-top-min {
    padding-top: 2em
}

.space-top-max {
    padding-top: 12em
}

.offset-pull-up {
    position: relative;
    margin-bottom: 2em
}

@media (min-width:576px) {
    .offset-pull-up {
        margin-top: -10em
    }
}

@media (max-width:575.98px) {
    .margin-top-mobile {
        margin-top: 2em
    }
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 1em
}

.quad-row {
    padding-top: 2em;
    padding-bottom: 2em
}

.quad-row a.more {
    font-size: .85em;
    margin-bottom: 3em
}

.wrapper-outer {
    display: flex;
    flex-direction: column;
    height: 100vh
}

.wrapper-outer .the-wrapper {
    flex: 1 1 auto
}

.wrapper-outer footer {
    flex: 0 0 auto
}

.flex {
    display: flex
}

.flex--horizontal {
    flex-direction: horizontal;
    align-items: flex-start
}

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

.grayish {
    padding: 5em 0;
    background: #e7e7e3
}

@media (max-width:767.98px) {
    .grayish {
        padding: 3em 0
    }
}

.smiley-wrapper {
    margin-top: 4em
}

.smiley-wrapper .smiley-holder {
    display: flex;
    max-width: 50%;
    margin: auto;
    align-items: flex-start
}

.smiley-wrapper .smiley-holder img {
    display: block
}

.section-ref-overview {
    margin-bottom: 0
}

.dark {
    background: #000;
    color: #fff
}

.dark .more,
.dark a,
.dark h1,
.dark h2,
.dark h3,
.dark h4 {
    color: #fff
}

.dark .fifth-heading,
.dark .page-content h3,
.dark a,
.dark a h5,
.dark a p,
.dark h5,
.dark li,
.dark p,
.page-content .dark h3 {
    color: #a9a99e
}

.dark .teaser__inner {
    border-color: transparent
}

.upper-trenner {
    padding-top: 0
}

.upper-trenner:before {
    margin-bottom: 6em;
    content: "";
    display: block;
    height: 4em;
    background: #e7e7e3 url(../img/upper-trenner-gray.svg) no-repeat right center;
    background-size: cover
}

.upper-trenner--red:before {
    background: #0bffbf url(../img/upper-trenner.svg) no-repeat right center
}

.ampersand-light {
    background-image: url(../img/ampersand--light.svg);
    background-repeat: no-repeat;
    background-position: center
}

.red-white-after,
.white-red-after {
    position: relative;
    margin-bottom: 0
}

.red-white-after::after,
.white-red-after::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    display: block;
    background: #fff;
    height: 1em;
    border-left: 50vw solid #0bffbf;
}

@media (max-width:767.98px) {
    .red-white-after::after,
    .white-red-after::after {
        height: .5em
    }
}

.white-red-after::after {
    border-left: 0;
    border-right: 50vw solid #0bffbf;
}

.start-slider .slick-slide .slide__wrapper .slide__content {
    background: #fff;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .5) 100%)
}

body,
html {
    line-height: 1.6;
    font-size: 16px;
    font-family: "Inter", sans-serif;
    color: #000;
    font-style: normal;
    font-weight: 500
}

@media (max-width:991.98px) {
    body,
    html {
        font-size: 17px
    }
}

@media (max-width:767.98px) {
    body,
    html {
        font-size: 16px
    }
}

address {
    font-style: normal
}

h1,
h2,
h3,
h4,
h5,
h6,
ul {
    letter-spacing: -.018em
}

a {
    color: #000
}

h1 {
    font: 900 5.4rem/1 "Inter", sans-serif;
    padding: 0;
    margin: 0;
    margin-bottom: .4em
}

@media (min-width:1680px) {
    h1 {
        font-size: 7.6rem
    }
}

@media (max-width:1199.98px) {
    h1 {
        font-size: 4.6rem
    }
}

@media (max-width:991.98px) {
    h1 {
        font-size: 4.6rem
    }
}

@media (max-width:767.98px) {
    h1 {
        font-size: 3.6rem
    }
   
}

h1 span {
    font: 700 2rem/1 "Inter", sans-serif;
    letter-spacing: -.02em;
    display: block;
    padding-top: 1.2em
}

@media (max-width:767.98px) {
    h1 span {
        font-size: 1.6rem;
        padding-top: .7em
    }
}

.page-content h1,
.second-heading,
h2 {
    display: block;
    font: 830 3.2rem/1.1 "Inter", sans-serif;
    padding: 0;
    margin: 0 0 .5em
}

@media (min-width:1680px) {
    .page-content h1,
    .second-heading,
    h2 {
        font-size: 3.8rem
    }
}

@media (max-width:1199.98px) {
    .page-content h1,
    .second-heading,
    h2 {
        font-size: 2.8rem
    }
}

@media (max-width:991.98px) {
    .page-content h1,
    .second-heading,
    h2 {
        font-size: 2.5rem
    }
}

@media (max-width:767.98px) {
    .page-content h1,
    .second-heading,
    h2 {
        font-size: 2.2rem
    }
}

.page-content h2,
.third-heading,
blockquote,
h3 {
    display: block;
    font: 600 1.9rem/1.2 "Inter", sans-serif;
    padding: 0;
    margin: 0 0 .9em
}

@media (max-width:1199.98px) {
    .page-content h2,
    .third-heading,
    blockquote,
    h3 {
        font-size: 1.6rem
    }
}

@media (max-width:767.98px) {
    .page-content h2,
    .third-heading,
    blockquote,
    h3 {
        font-size: 1.3rem;
        line-height: 1.2
    }
}

blockquote footer {
    background: 0 0;
    font: 400 .7em/1.2 "Inter", sans-serif;
    margin-top: 1em
}

blockquote footer:before {
    content: "–––– "
}

.fourth-heading,
blockquote,
h4 {
    display: block;
    font: 700 1.6rem/1.2 "Inter", sans-serif;
    padding: 0;
    margin: 0 0 .9em;
    letter-spacing: -.018em;
}

@media (max-width:1199.98px) {
    .fourth-heading,
    blockquote,
    h4 {
        font-size: 1.4rem
    }
}

@media (max-width:767.98px) {
    .fourth-heading,
    blockquote,
    h4 {
        font-size: 1.2rem;
        line-height: 1.2
    }
}

.fifth-heading,
.page-content h3,
h5 {
    display: block;
    font: 600 1.3rem/1 "Inter", sans-serif;
    padding: 0;
    margin: 1em 0 0.5em;
    text-decoration: none;
}

@media (max-width:767.98px) {
    .fifth-heading,
    .page-content h3,
    h5 {
        font-size: 1.1rem
    }
}

.dachzeile-padding {
    padding-top: 1em
}

@media (min-width:768px) {
    .dachzeile-padding {
        padding-top: 3.2em
    }
}

ul {
    margin: 0;
    padding: .5em 0 2em 1.4em;
    font-size: 1em;
    line-height: 1.4
}

ul li {
    padding: 0;
    margin: .5em 0 0 0
}

.ecomlist-title {
    font-size: 30px;
    line-height: 1.4;
    color: #0037c1;
    margin-bottom: 5px;
}

.ecomlist-text {
    font-size: 16px;
    line-height: 1.4;
    color: #000;
}


ul.lined {
    margin: 0 0 1.5em 0;
    padding: 0;
    font-size: 1em;
    line-height: 1.4;
    list-style: none;
    border-top: 1px solid #474743
}

ul.lined li {
    margin: 0;
    padding: .3em 0;
    border-bottom: 1px solid #474743;
    font-weight: 600
}

dl dt {
    border-top: 1px solid #000;
    font-weight: 700;
    padding: .5em 0 0 0;
    margin: .5em 0 0 0
}

dl dd {
    margin: 0;
    padding: 0
}

.blue,
.landing-page-content ul {
    display: block;
    list-style: none;
    text-decoration: none;
    color: #0037c1;
    font: 750 2.6em/1.2 "Inter", sans-serif
}

@media (max-width:1199.98px) {
    .blue,
    .landing-page-content ul {
        font-size: 1.7em
    }
}

@media (max-width:767.98px) {
    .blue,
    .landing-page-content ul {
        font-size: 1.3em
    }
}

.blue--medium,
.landing-page-content ul {
    font: 600 1.9em/1.2 "Inter", sans-serif;
    list-style: none;
    margin: 1em 0;
    padding: 0
}

.blue--medium li,
.landing-page-content ul li {
    margin: 0;
    padding: 0;
    color: #0037c1
}

@media (max-width:1199.98px) {
    .blue--medium,
    .landing-page-content ul {
        font-size: 1.7em
    }
}

@media (max-width:767.98px) {
    .blue--medium,
    .landing-page-content ul {
        font-size: 1.3em
    }
}

p {
    margin: 0;
    padding: 0;
    margin-bottom: 1.5em;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto
}

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

s {
    color: #76766e
}

.more {
    font: 600 1em/1 "Inter", sans-serif;
    color: #000;
    position: relative;
    display: flex;
    align-items: center;
    text-decoration: underline
}

.more:before {
    content: "";
    position: relative;
    display: inline-block;
    background: url(../img/arrow.svg) no-repeat;
    background-size: contain;
    height: 1.2em;
    width: 3em
}

.projekte-button {
    display: flex;
    flex-direction: row;
    margin: 6em 0 -6em 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%)
}

.projekte-button__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    height: 8em;
    width: 8em;
    border-radius: 50%;
    background: var(--red);
    color: #fff!important;
    text-decoration: none;
    margin: auto;
    text-align: center;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.3;
    cursor: pointer;
    transform: scale(1);
    transition: transform .2s ease-in-out;
    box-shadow: -3px 0 33px #00000052
}

.projekte-button__btn:hover {
    transform: scale(1.1)
}

@media (max-width:767.98px) {
    .projekte-button__btn {
        font-size: .8em
    }
}

@media (max-width:767.98px) {
    .projekte-button {
        margin: 3em 0 3em 0
    }
}

.content-icon svg {
    margin: .5em 0 1em;
    width: 4em;
    height: 4.7em
}

.content-icon p {
    margin: 1em
}

.inline-icon {
    height: 1.6em;
    width: 1.6em;
    display: inline-block;
    margin-right: .5em
}

.landing-page-content figure {
    margin: 0;
    padding: 1em 0 3em;
    height: auto
}

.landing-page-content h3 {
    padding-top: 1em
}

.landing-page-content ul {
    margin-top: 0
}

.page-content {
    padding-top: 10em
}

.logo-container-wrapper {
    height: calc(90vh - 4em);
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    background: #ff243a;
    position: fixed;
    top: 0
}

.logo-container {
    flex: 1 0 80%;
    height: 66vh;
    background: url(../img/Logo-horizontal.svg) no-repeat;
    background-position: bottom left;
    background-size: contain
}

.arrow-container {
    flex: 1 1 10em;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end
}

.arrow-container img,
.arrow-container svg {
    width: 2em;
    height: auto;
    margin: 4em 5em
}

@media (max-width:767.98px) {
    .logo-container-wrapper {
        flex-direction: column-reverse;
        height: calc(90vh - 4em)
    }
    .logo-container {
        flex: 1 1 auto;
        width: 100vw;
        background: url(../img/Logo-vertical.svg) no-repeat;
        background-position: bottom left;
        background-size: contain
    }
    .arrow-container {
        flex: 0 0 8em;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center
    }
    .arrow-container img {
        width: 1.6em;
        height: auto;
        margin: 1em
    }
}

.imprint-link {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: inline-block;
    color: #aaa;
    text-decoration: none;
    font-family: sans-serif
}

.sticky-nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 0;
    z-index: 12
}

@media (max-width:767.98px) {
    .sticky-nav {
        font-size: 70%
    }
}

.sticky-nav .logo {
    position: absolute;
    top: 1.7em;
    left: 2.4em
}

@media (max-width:767.98px) {
    .sticky-nav .logo {
        top: 14px;
        left: 15px
    }
}

.sticky-nav .logo img {
    width: 16em
}

@media (max-width:767.98px) {
    .sticky-nav .logo img {
        width: 12em
    }
}

.sticky-nav ul {
    list-style: none;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex: 0 2 auto
}

.sticky-nav ul li a {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7em;
    width: 7em;
    border-radius: 50%;
    text-transform: uppercase;
    text-decoration: none;
    font: 700 .8em/1 "Inter", sans-serif;
    margin-left: 1.2em;
    color: #fff;
    background: #76766e
}

.sticky-nav ul li:first-child a {
    background: #000
}

.sticky-nav ul.content {
    flex: 1 1 auto;
    align-items: flex-end
}

.sticky-nav ul.content li a {
    background: 0 0;
    color: #000
}

.sticky-nav ul.content li.active a {
    color: #ff243a
}

.ref-overview {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 0
}

.ref-overview__item {
    text-decoration: none!important;
    display: block;
    position: relative
}

.ref-overview__item:nth-child(2n) {
    position: relative;
    transform: translateY(60px)
}

.ref-overview__item>div {
    display: block;
    position: relative
}

.ref-overview__item .text-holder .text-box {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    padding: 1em 0 2em
}

.page-content .ref-overview__item .text-holder .text-box h3,
.ref-overview__item .text-holder .text-box .fifth-heading,
.ref-overview__item .text-holder .text-box .page-content h3,
.ref-overview__item .text-holder .text-box h5 {
    margin-bottom: .5em
}

.ref-overview__item .text-holder .text-box span {
    display: none
}

.ref-overview__item .img-holder {
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center
}

.ref-overview__item .img-holder img {
    max-width: 100%;
    width: 100%;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain
}

.img-holder:before {
    content: url("data:image/svg+xml,%0A%3Csvg height='24' viewBox='0 0 46 24' width='46' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='stroke:%23ff263c;stroke-width:3;fill:none;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round' transform='translate(2 2)'%3E%3Cpath d='m0 10h40'/%3E%3Cpath d='m32.2083333.20833333 9.5833334 9.58333334'/%3E%3Cpath d='m32.2083333 10.2083333 9.5833334 9.5833334' transform='matrix(-1 0 0 1 74 0)'/%3E%3C/g%3E%3C/svg%3E") " Projekt ansehen";
    color: #fff;
    font: 700 1.6em/1 "Inter", sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .4s ease-out;
    opacity: 0;
    text-indent: 1em
}

a.ref-overview__item:hover .img-holder:before {
    background: rgba(0, 0, 0, .6);
    opacity: 1;
    text-indent: 0
}

@media (max-width:767.98px) {
    .ref-overview {
        grid-template-columns: 1fr;
        grid-gap: 0;
        background-size: contain
    }
    .ref-overview__item:nth-child(2n) {
        transform: none
    }
}

.svg-hide {
    display: none
}

.cl-client-logos {
    text-align: center
}

.cl-client-logos .cl-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center
}

.cl-client-logos .cl-wrapper>div {
    flex: 0 0 33%;
    display: flex;
    color: #313131;
    padding: 0 .3em
}

.cl-client-logos .cl-wrapper>div svg {
    width: 100%;
    height: auto;
    margin-bottom: 0;
    max-width: 100%;
    max-height: 80px
}

@media (min-width:576px) {
    .cl-client-logos .cl-wrapper>div {
        flex: 0 0 25%;
        padding: 0 1.2em
    }
    .cl-client-logos .cl-wrapper>div svg {
        max-height: 75px
    }
}

@media (min-width:768px) {
    .cl-client-logos .cl-wrapper>div {
        flex: 0 0 25%
    }
    .cl-client-logos .cl-wrapper>div svg {
        max-height: 100px
    }
}

@media (min-width:992px) {
    .cl-client-logos .cl-wrapper>div {
        flex: 0 0 20%
    }
    .cl-client-logos .cl-wrapper>div svg {
        max-height: 120px
    }
}

.people-container {
    background: url(../img/connectthedots.svg) no-repeat;
    background-position: center
}

.people {
    padding: 0 0 0
}

.people .row:first-child {
    padding-bottom: 6em
}

.people .image-wrapper {
    display: flex
}

.people .image-wrapper .image-holder {
    width: 80%
}

.people .image-wrapper img {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 50%
}

.people__kathrin .image-wrapper {
    position: relative;
    margin-top: -10em
}

.people__michael .row:first-child {
    flex-direction: row-reverse;
    padding-bottom: 0
}

.people__michael .image-wrapper {
    justify-content: flex-end
}

@media (max-width:767.98px) {
    .people {
        padding: 2em 0 1em
    }
    .people .row:first-child {
        padding-bottom: 0
    }
    .people .image-wrapper,
    .people__michael .image-wrapper {
        justify-content: center;
        margin-bottom: 2em
    }
    .people__michael .row:first-child {
        padding-bottom: 0
    }
}

.img-fade-in-left {
    position: relative;
    transform: translate(0);
    opacity: 1
}

.animation-wrapper {
    margin: 0;
    padding: 0 0 20em!important
}

@media (max-width:991.98px) {
    .animation-wrapper {
        font-size: 75%
    }
}

@media (max-width:767.98px) {
    .animation-wrapper {
        font-size: 50%
    }
}

.animation__inner-wrapper {
    transform: rotate(23deg)
}

.animation {
    height: 70em;
    position: relative;
    margin: 0 auto
}

.bottle {
    position: absolute;
    height: 80em;
    width: 20em;
    opacity: 1
}

.bottle-1 {
    top: 8em;
    left: 50%;
    transform: rotate(0) translateX(0)
}

.bottle-2 {
    top: 0;
    right: 50%;
    transform: rotate(0) translateX(0)
}

@media (max-width:767.98px) {
    .animation-betics .grid.grid--4 {
        grid-template-columns: repeat(2, 1fr)
    }
}

.animation-betics .circle--1 {
    transform: rotate(-160deg)
}

.animation-betics .circle--2 {
    transform: rotate(-125deg)
}

.animation-betics .circle--3 {
    transform: rotate(160deg)
}

.animation-betics .circle--4 {
    transform: rotate(-160deg)
}

.animation-betics .circle--5 {
    transform: rotate(-160deg)
}

.animation-betics .circle--6 {
    transform: rotate(90deg)
}

.animation-betics .circle--7 {
    transform: rotate(-160deg)
}

.animation-betics .circle--8 {
    transform: rotate(-110deg)
}

.betics-logo-animation {
    max-width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0 4em
}

@media (min-width:768px) {
    .betics-logo-animation {
        max-width: 100%;
        margin-top: 4em;
        margin-bottom: 4em;
        padding: 0
    }
}

@media (min-width:992px) {
    .betics-logo-animation {
        margin-top: 6em;
        margin-bottom: 6em
    }
}

#on_button {
    fill: #f90;
    -webkit-animation: color-change--button 4.8s infinite steps(1) both;
    animation: color-change--button 4.8s infinite steps(1) both
}

#on_dash {
    fill: #f90;
    -webkit-animation: color-change--dash 4.8s infinite steps(1) both;
    animation: color-change--dash 4.8s infinite steps(1) both
}

@-webkit-keyframes color-change--button {
    0% {
        fill: #00d1e5
    }
    20% {
        fill: #007858
    }
    40% {
        fill: #ffbd1d
    }
    60% {
        fill: #3239b2
    }
    80% {
        fill: #9013fe
    }
    100% {
        fill: #ff8236
    }
}

@keyframes color-change--button {
    0% {
        fill: #00d1e5
    }
    20% {
        fill: #007858
    }
    40% {
        fill: #ffbd1d
    }
    60% {
        fill: #3239b2
    }
    80% {
        fill: #9013fe
    }
    100% {
        fill: #ff8236
    }
}

@-webkit-keyframes color-change--dash {
    0% {
        fill: #d7016a
    }
    20% {
        fill: #ff8236
    }
    40% {
        fill: #d7016a
    }
    60% {
        fill: #00c891
    }
    80% {
        fill: #ff8236
    }
    100% {
        fill: #00d1e5
    }
}

@keyframes color-change--dash {
    0% {
        fill: #d7016a
    }
    20% {
        fill: #ff8236
    }
    40% {
        fill: #d7016a
    }
    60% {
        fill: #00c891
    }
    80% {
        fill: #ff8236
    }
    100% {
        fill: #00d1e5
    }
}

.flyer-animation {
    position: relative;
    width: 100%
}

.flyer-animation .flyer {
    position: absolute;
    display: block;
    top: 50%;
    left: -20%;
    width: 18%;
    height: 0;
    padding-bottom: 30%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain
}

.flyer-animation .flyer_1 {
    background-image: url(../case-studies/webdesign-dmfv/img/flyer_1.svg);
    transform: translateY(-70%);
    z-index: 12
}

.flyer-animation .flyer_2 {
    background-image: url(../case-studies/webdesign-dmfv/img/flyer_2.svg);
    transform: translateY(-60%) translateX(-40%);
    z-index: 7
}

.flyer-animation .flyer_3 {
    background-image: url(../case-studies/webdesign-dmfv/img/flyer_3.svg);
    transform: translateY(-30%);
    z-index: 1
}

.flyer-animation .flyer_4 {
    background-image: url(../case-studies/webdesign-dmfv/img/flyer_4.svg);
    transform: translateY(0) translateX(-50%);
    z-index: 9
}

.flyer-animation .flyer_5 {
    background-image: url(../case-studies/webdesign-dmfv/img/flyer_5.svg);
    transform: translateY(30%);
    z-index: 2
}

.flyer-animation .flyer_6 {
    background-image: url(../case-studies/webdesign-dmfv/img/flyer_6.svg);
    transform: translateY(60%) translateX(-10%);
    z-index: 11
}

.ref-content {
    margin-top: calc(85vh - 5em);
    top: 0;
    position: relative;
    background: #fff;
    z-index: 1
}

.ref-content>section:first-child {
    padding-top: 5em
}

@media (max-width:767.98px) {
    .ref-content>section:first-child {
        padding-top: 3em
    }
}

.ref-content section {
    padding: 2em 0
}

@media (max-width:767.98px) {
    .ref-content section {
        padding: 1em 0
    }
}

header {
    position: fixed;
    top: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: calc(85vh - 5em);
    width: 100%
}

header img {
    flex: 1 1;
    max-width: 1440px;
    height: auto;
    padding: 10vh 0
}

@media (max-width:1440px) {
    header img {
        flex: 1 1;
        max-width: 90vw
    }
}

header.true-fruits img {
    flex: 1 1;
    max-width: 1440px;
    height: auto;
    padding: 10vh 0
}

@media (min-width:768px) and (max-width:1440px) {
    header.true-fruits img {
        flex: 1 1;
        max-width: 90vw
    }
}

header.hyc img {
    flex: 1 1;
    max-width: 400px;
    height: auto;
    padding: 23vh 0
}

@media (max-width:768px) {
    header.hyc img {
        flex: 1 1;
        max-width: 260px
    }
}

header.cba img {
    flex: 1 1;
    max-width: 800px;
    height: auto;
    padding: 23vh 0 26vh
}

@media (max-width:768px) {
    header.cba img {
        flex: 1 1;
        max-width: 400px
    }
}

header.dlr img {
    flex: 1 1;
    max-width: 280px;
    height: auto;
    padding: 23vh 0
}

@media (max-width:768px) {
    header.dlr img {
        flex: 1 1;
        max-width: 200px;
        padding: 0 1em
    }
}

header.ft img {
    flex: 1 1;
    max-width: 260px;
    height: auto;
    padding: 23vh 0
}

@media (max-width:768px) {
    header.ft img {
        flex: 1 1;
        max-width: 260px;
        padding: 0 3em
    }
}

header._3con img {
    flex: 1 1;
    max-width: 400px;
    height: auto;
    padding: 23vh 0
}

@media (max-width:768px) {
    header._3con img {
        flex: 1 1;
        max-width: 280px;
        padding: 0 1em
    }
}

header.dmfv img {
    flex: 1 1;
    max-width: 280px;
    padding: 0 1em;
    flex: 1 1
}

@media (min-width:769px) {
    header.dmfv img {
        max-width: 400px;
        height: auto;
        padding: 23vh 0
    }
}

@media (min-width:1280px) {
    header.dmfv img {
        max-width: 500px;
        height: auto;
        padding: 23vh 0
    }
}

.cba-intro p {
    color: #fff
}

.cba-logo-wrapper {
    padding: 2em 0 2em
}

@media (max-width:767.98px) {
    .cba-logo-wrapper {
        padding-left: 30px;
        padding-right: 30px
    }
}

.cba-dreieck {
    padding-left: 3em;
    padding-right: 3em
}

@media (max-width:767.98px) {
    .cba-dreieck {
        max-width: 280px
    }
}

.hyc-diagonale {
    position: relative
}

.hyc-diagonale>div {
    position: relative;
    z-index: 10
}

.hyc-diagonale:before {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    height: 12em;
    background: #0068b4;
    width: 100%;
    transform: skewY(-10deg)
}

.hyc-diagonale:after {
    z-index: 1;
    position: absolute;
    bottom: 1em;
    left: 0;
    content: "";
    height: 12em;
    background: #f7ac19;
    width: 100%;
    transform: skewY(-10deg)
}

@media (min-width:576px) {
    .hyc-diagonale:before {
        top: 0;
        height: 25em
    }
    .hyc-diagonale:after {
        bottom: 10em;
        height: 25em
    }
}

.hyc-diagonale-2 {
    position: relative
}

.hyc-diagonale-2>div {
    position: relative;
    z-index: 10
}

.hyc-diagonale-2:after {
    z-index: 1;
    position: absolute;
    bottom: 30%;
    left: 0;
    content: "";
    height: 12em;
    background: #e6e6e6;
    width: 100%;
    transform: skewY(-10deg)
}

@media (min-width:576px) {
    .hyc-diagonale-2:after {
        height: 25em
    }
}

.dlr-gradient {
    background: #013950;
    background: linear-gradient(to right, #013950 0, #01878d 100%)
}

.dmfv-gradient {
    background: #036;
    background: linear-gradient(90deg, #036 10%, #09c 80%)
}

.info-box {
    color: #fff
}

.info-box dt {
    border-color: #fff
}

.info-box a {
    color: #fff
}

.info-box__text {
    padding: 2.2em 2.8em
}

@media (max-width:767.98px) {
    .info-box__text {
        padding: 20px
    }
}

.info-box__image {
    display: flex;
    height: 100%;
    min-height: 15em
}

.info-box__image img {
    min-height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.bg-splash {
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 775px
}

@media (min-width:768px) {
    .bg-splash {
        background-size: 775px
    }
}

@media (min-width:992px) {
    .bg-splash {
        background-size: 1550px
    }
}

@media (max-width:767.98px) {
    article section.dlr-special-mobile {
        padding-bottom: 0;
        margin-bottom: 0;
        padding-top: 0
    }
}

.grid {
    display: grid;
    grid-gap: 20px
}

@media (max-width:991.98px) {
    .grid {
        grid-gap: 15px
    }
}

@media (max-width:767.98px) {
    .grid {
        grid-gap: 10px
    }
}

@media (max-width:575.98px) {
    .grid {
        grid-gap: 5px
    }
}

.grid.grid--2 {
    grid-template-columns: repeat(2, 1fr)
}

.grid.grid--4 {
    grid-template-columns: repeat(4, 1fr)
}

.grid.grid--5 {
    grid-template-columns: repeat(5, 1fr)
}

.grid.grid--6 {
    grid-template-columns: repeat(6, 1fr)
}

.grid.grid--12 {
    grid-template-columns: repeat(12, 1fr)
}

.grid.grid--7 {
    grid-template-columns: repeat(7, 1fr)
}

.grid-fab-upper {
    grid-template-rows: repeat(4, auto)
}

.grid-fab-upper div:nth-child(1) {
    grid-column: 1/4;
    grid-row: 1/3
}

.grid-fab-upper div:nth-child(2) {
    grid-column: 2/4;
    grid-row: 3/5
}

.grid-fab-upper div:nth-child(3) {
    grid-column: 4/-1;
    grid-row: 2/4
}

.grid-fab-upper div:nth-child(4) {
    grid-column: 2/5;
    grid-row: 3/6
}

@media (max-width:767.98px) {
    .grid-fab-upper {
        display: block
    }
    .grid-fab-upper div {
        margin-bottom: 15px
    }
}

.grid-fab-lower {
    grid-template-rows: repeat(4, auto)
}

.grid-fab-lower div:nth-child(1) {
    grid-column: 1/3;
    grid-row: 1/6
}

.grid-fab-lower div:nth-child(2) {
    grid-column: 3/7;
    grid-row: 1/4
}

.grid-fab-lower div:nth-child(3) {
    grid-column: 1/3;
    grid-row: 3/4;
    align-items: flex-end;
    display: flex
}

.grid-fab-lower div:nth-child(4) {
    grid-column: 1/3;
    grid-row: 4/5
}

.grid-fab-lower div:nth-child(5) {
    grid-column: 3/6;
    grid-row: 4/5
}

@media (max-width:767.98px) {
    .grid-fab-lower {
        display: block
    }
    .grid-fab-lower div {
        margin-bottom: 15px
    }
}

.grid-dzne {
    grid-template-rows: repeat(4, auto)
}

.grid-dzne div:nth-child(1) {
    grid-column: 1/5;
    grid-row: 1/6
}

.grid-dzne div:nth-child(2) {
    grid-column: 1/6;
    grid-row: 3/4;
    align-items: flex-end;
    display: flex
}

.grid-dzne div:nth-child(3) {
    grid-column: 6/13;
    grid-row: 1/4
}

.grid-dzne div:nth-child(4) {
    grid-column: 1/9;
    grid-row: 4/5
}

.grid-dzne div:nth-child(5) {
    grid-column: 9/13;
    grid-row: 4/5
}

.grid-fab-leafes {
    grid-template-rows: repeat(3, auto);
    align-items: center
}

.grid-fab-leafes div:nth-child(1) {
    grid-column: 1/3
}

.grid-pet-upper {
    grid-template-rows: repeat(8, auto)
}

.grid-pet-upper div:nth-child(1) {
    grid-column: 1/4;
    grid-row: 1/5
}

.grid-pet-upper div:nth-child(2) {
    grid-column: 4/6;
    grid-row: 3/8
}

@media (max-width:767.98px) {
    .grid-pet-upper div:nth-child(1) {
        grid-column: 1/3;
        grid-row: 1/5
    }
    .grid-pet-upper div:nth-child(2) {
        grid-column: 2/6;
        grid-row: 5/9
    }
}

.grid-pet-lower {
    grid-template-rows: repeat(8, auto);
    padding: 0 2em
}

.grid-pet-lower div:nth-child(1) {
    grid-column: 3/7;
    grid-row: 1/5
}

.grid-pet-lower div:nth-child(2) {
    grid-column: 1/4;
    grid-row: 4/8
}

@media (max-width:767.98px) {
    .grid-pet-lower {
        padding: 0
    }
    .grid-pet-lower div:nth-child(1) {
        grid-column: 3/7;
        grid-row: 1/5
    }
    .grid-pet-lower div:nth-child(2) {
        grid-column: 1/5;
        grid-row: 5/8
    }
}

.dmfv-grid {
    grid-gap: 5em;
    padding-top: 3em;
    padding-bottom: 3em
}

.dmfv-grid div:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/3
}

.dmfv-grid div:nth-child(2) {
    display: flex
}

.dmfv-grid div:nth-child(3) {
    grid-column: 2/3;
    align-content: flex-end;
    display: grid
}

@media (max-width:767.98px) {
    .grid.grid--2 {
        grid-template-columns: repeat(1, 100%)
    }
    .grid.grid--5 {
        grid-template-columns: repeat(3, 1fr)
    }
    .grid-dzne {
        display: flex;
        flex-direction: column
    }
    .grid-dzne div {
        margin-bottom: 10px
    }
    .dmfv-grid {
        display: flex;
        flex-direction: column;
        padding: 2em 20px
    }
    .dmfv-grid div:nth-child(2) {
        padding: 2em 0 2em
    }
    .grid-fab-leafes div:nth-child(1) {
        grid-column: 1/4
    }
}

@media (min-width:1680px) {
    .dmfv-grid {
        padding-top: 5em;
        padding-bottom: 5em
    }
}

.pet-video {
    padding-top: 4em;
    padding-bottom: 4em;
    background: #000
}

.pet-video .intro {
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    background-size: 176%
}

@media (min-width:1320px) {
    .pet-video .intro {
        background-size: auto
    }
}

.pet-video .intro video {
    height: 100%;
    width: 100%;
    max-width: 1320px;
    padding: 20px;
    -o-object-fit: contain;
    object-fit: contain
}

.teaser {
    margin-bottom: 0;
    padding-bottom: 6em;
    padding-top: 3em
}

.teaser__inner {
    border-top: 1px solid #eee
}

.teaser h3 {
    margin-bottom: .3em;
    padding-top: 3em
}

.teaser .teaser__inner>h3 {
    padding-top: 1em;
    margin-bottom: 3em
}

.teaser a {
    text-decoration: none
}

.teaser figure {
    margin: 0 0 1em 0
}

.teaser figure .teaser-box__image {
    position: relative;
    -o-object-fit: cover;
    object-fit: cover
}

.teaser figure figcaption {
    padding: 1em 0 .5em 0
}

.page-content .teaser figure h3,
.teaser figure .fifth-heading,
.teaser figure .page-content h3,
.teaser figure h4,
.teaser figure h5 {
    margin-bottom: .5em
}

.teaser figure h3 {
    font-size: 1.4em;
    padding: 0
}

@media (max-width:767.98px) {
    .page-content .teaser figure h3,
    .teaser figure .fifth-heading,
    .teaser figure .page-content h3,
    .teaser figure h4,
    .teaser figure h5 {
        font-size: 1.4em
    }
    .teaser figure h3 {
        font-size: .7em
    }
}

.teaser a .teaser-box__image {
    filter: grayscale(1);
    transition: filter .3s
}

.teaser a:hover .teaser-box__image {
    filter: none
}

@media (min-width:992px) {
    #client-nav {
        position: fixed;
        z-index: 12;
        top: 0;
        bottom: 0;
        right: -33vw;
        width: 33vw;
        transition: transform .4s cubic-bezier(.25, .46, .38, .99);
        height: 100%;
        overflow-y: auto
    }
    #client-nav.active {
        transform: translateX(-33vw)
    }
    #main-nav {
        position: fixed;
        z-index: 12;
        top: 0;
        bottom: 0;
        right: -75vw;
        width: 75vw;
        transition: transform .4s cubic-bezier(.25, .46, .38, .99);
        height: 100%;
        overflow-y: auto
    }
    #main-nav.active {
        transform: translateX(-75vw);
        box-shadow: -3px 0 33px #00000052
    }
}

nav h4 {
    font: 750 1.2em/1.4 "Inter", sans-serif;
    text-align: left;
    display: block;
    color: #fff;
    padding: 3em 0 0 1.6em
}

#client-nav {
    background: rgba(0, 0, 0, .92)
}

#client-nav ul {
    list-style: none;
    margin: 0;
    padding: 3.2em 0 1em
}

#client-nav ul li {
    padding: 0 2em;
    margin: 0;
    position: relative
}

#client-nav ul li:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: var(--red-darker);
    transition: width .2s ease-out
}

#client-nav ul li a {
    position: relative;
    z-index: 2;
    display: block;
    padding: .8em 0;
    font: 900 1.6rem/1.2 "Inter", sans-serif;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

#client-nav ul li a span {
    font: 600 .8rem/1.4 "Inter", sans-serif;
    display: block
}

#client-nav ul li.active {
    background: #333
}

#client-nav ul li:hover:after {
    width: 100%
}

#client-nav ul li:last-child a {
    border-bottom: 0
}

#main-nav {
    background: #0037c1;
}

#main-nav ul li a:hover {
    color: #0bffbf;
}

#client-nav ul li a:hover {
    color: #0bffbf;
}

#main-nav ul {
    list-style: none;
    margin: 0;
    padding: 3.2em 0 1em
}

#main-nav ul ul {
    display: none;
    margin: 0;
    padding: 0
}

#main-nav ul ul li {
    font-size: .85em
}

#main-nav ul li {
    padding: 0 2em;
    margin: 0;
    position: relative
}

#main-nav ul li a,
#main-nav ul li strong {
    display: inline-block;
    padding: .2em 0;
    margin: .2em 0;
    font: 900 2em/1.2 "Inter", sans-serif;
    color: #fff;
    text-decoration: none;
    position: relative
}

#main-nav ul li a:after,
#main-nav ul li strong:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #fff;
    display: block;
    transition: all .2s ease-out
}

#main-nav ul li a span,
#main-nav ul li strong span {
    font: 600 .7rem/1.4 "Inter", sans-serif;
    display: block
}

#main-nav ul li .show-hide-children {
    display: inline-flex;
    color: #fff;
    height: 3em;
    width: 3em;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 7px;
    top: 3px
}

#main-nav ul li .show-hide-children svg {
    height: 1.8em;
    width: 1.8em;
    transition: all .3s ease-in-out
}

#main-nav ul li strong:after,
#main-nav ul li.hover:after,
#main-nav ul li.open>a:after,
#main-nav ul li:hover>a:after {
    width: 100%;
    left: 0;
}

#main-nav ul li strong.open .show-hide-children svg,
#main-nav ul li.hover.open .show-hide-children svg,
#main-nav ul li.open.open .show-hide-children svg,
#main-nav ul li:hover>a.open .show-hide-children svg {
    transform: rotate(90deg)
}

#main-nav ul li strong.open ul,
#main-nav ul li.hover.open ul,
#main-nav ul li.open.open ul,
#main-nav ul li:hover>a.open ul {
    display: block
}

#main-nav ul li strong.hover .show-hide-children svg,
#main-nav ul li.hover.hover .show-hide-children svg,
#main-nav ul li.open.hover .show-hide-children svg,
#main-nav ul li:hover>a.hover .show-hide-children svg {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

body.nav-open {
    overflow: hidden
}

@media (max-width:991.98px) {
    .sticky-nav .logo {
        transition: all ease-in-out .3s;
        opacity: 1;
        transform: translateX(0)
    }
    .nav-open .sticky-nav .logo {
        transform: translateX(-400px);
        opacity: 0
    }
    aside#mobile-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        z-index: 12;
        transform: translateX(100%);
        transition: transform .4s cubic-bezier(.25, .46, .38, .99)
    }
    aside#mobile-nav.active {
        transform: translateX(0)
    }
    aside#mobile-nav #main-nav {
        position: relative;
        flex: 0 0 auto;
        overflow: auto;
        font-size: 70%;
        padding: 1.2rem 0 .5rem
    }
    aside#mobile-nav #main-nav ul {
        padding: 1rem 0 1rem 2.1rem
    }
    aside#mobile-nav #main-nav ul ul {
        padding: .2rem 0 .2rem .5rem
    }
    aside#mobile-nav #social-nav1,
    aside#mobile-nav #support-nav {
        display: none
    }
    aside#mobile-nav #client-nav {
        position: relative;
        flex: 1 1 auto;
        overflow: auto;
        padding-top: 1em
    }
    aside#mobile-nav #client-nav ul {
        padding: .4rem 0 6rem 1.8rem
    }
    aside#mobile-nav #client-nav ul li {
        padding: 0 2rem
    }
    aside#mobile-nav #client-nav ul li a {
        font-size: 1.3em
    }
    nav h4 {
        position: fixed;
        font-size: 1rem;
        text-align: right;
        transform: rotate(-90deg);
        transform-origin: 64px 34px;
        padding: 0
    }
}

ul#social-nav1,
ul.social-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0 0 0 -15px;
    padding-left: 2em;
    padding-right: 0
}

ul#social-nav1 li,
ul.social-nav li {
    padding: 0;
    margin: 0 15px
}

ul#social-nav1 li a,
ul.social-nav li a {
    border: 1px solid transparent;
    background-color: rgba(255, 255, 255, 0);
    display: inline-block;
    font: 1.2em/1.4 sans-serif;
    text-decoration: none;
    position: relative;
    text-align: center;
    margin: 0
}

ul#social-nav1 li a:after,
ul.social-nav li a:after {
    display: none
}

ul#social-nav1 li a svg,
ul.social-nav li a svg {
    width: 1.5em;
    height: 1.5em
}

ul#social-nav1 li a:hover,
ul.social-nav li a:hover {
    opacity: .8
}

main .social-nav {
    padding: 1em 0 2em 0
}

main .social-nav li a {
    color: #fff
}

nav ul#support-nav {
    padding-left: 2em
}

nav ul#support-nav li {
    display: inline-block;
    padding: 0 2em 0 0
}

nav ul#support-nav li a {
    font: 750 1em/1.4 "Inter", sans-serif
}

:root {
    --header-height-regular-content: calc(90vh - 4em)
}

.regular-content {
    margin-top: var(--header-height-regular-content);
    top: 0;
    position: relative;
    background: #fff;
    z-index: 1
}

.regular-content>section:first-child {
    padding-top: 5em
}

@media (max-width:767.98px) {
    .regular-content>section:first-child {
        padding-top: 1em
    }
}

body.content header {
    position: fixed;
    top: 0;
    background-color: #e7e7e3;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    height: var(--header-height-regular-content);
    width: 100%
}

body.content header img {
    flex: 1 1;
    max-width: 1440px;
    height: auto;
    padding: 10vh 0
}

@media (max-width:1440px) {
    body.content header img {
        flex: 1 1;
        max-width: 90vw
    }
}

body.content header .arrow-container {
    height: 6em;
    display: flex;
    align-items: flex-end;
    justify-content: center
}

@media (max-width:991.98px) {
    body.content header .arrow-container {
        height: 4em;
        display: flex;
        align-items: center;
        justify-content: center
    }
}

body.content header .arrow-container a {
    color: #ff243a
}

body.content header .arrow-container a:hover {
    color: #000
}

body.content header .arrow-container img,
body.content header .arrow-container svg {
    width: 1.2em;
    height: auto;
    margin: 0 0
}

.regular-content-no-header {
    margin-top: 5em
}

@media (min-width:576px) {
    .regular-content-no-header {
        margin-top: 14em
    }
}

:root {
    --header-height-split-screen: calc(95vh - 4em)
}

.regular-content {
    margin-top: 36em
}

body.content header.split {
    align-items: flex-start;
    height: 36em
}

body.content header.split img {
    padding: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

body.content header.split .arrow-container {
    flex: 0 0 50px;
    justify-self: flex-end
}

body.content header.split .split-screen {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column-reverse
}

body.content header.split .split-screen__type {
    flex: 0 0 auto;
    padding: 15px
}

body.content header.split .split-screen__type .hgroup {
    display: flex;
    align-items: flex-end
}

body.content header.split .split-screen__type h1 {
    font-size: 2.4em;
    flex: 1
}

body.content header.split .split-screen__type h1 span {
    color: #000000;
    font-size: .43em
}

body.content header.split .split-screen__type.darkheader {
    background-color: #000
}

body.content header.split .split-screen__type.darkheader h1 {
    color: #fff
}

body.content header.split .split-screen__image {
    flex: 1 0 60%
}

@media (min-width:1024px) {
    .regular-content {
        margin-top: var(--header-height-split-screen)
    }
    body.content header.split {
        align-items: flex-end;
        height: var(--header-height-split-screen)
    }
    body.content header.split .split-screen {
        flex-direction: row
    }
    body.content header.split .split-screen__type {
        flex: 0 0 50%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end
    }
    body.content header.split .split-screen__type .hgroup {
        width: 100%;
        max-width: 735px;
        padding-right: 30px;
        padding-left: 15px;
        padding-bottom: 8vh
    }
    body.content header.split .split-screen__type .hgroup h1 {
        font: 900 5.4rem/1 "Inter", sans-serif;
    }
    body.content header.split .split-screen__type .hgroup h1 span {
        color: #000000
    }
    body.content header.split .split-screen__image {
        flex: 0 0 50%
    }
}

@media (min-width:1200px) {
    body.content header.split .split-screen__type .hgroup h1 {
        font: 900 5.4rem/1 "Inter", sans-serif;
    }
}

.split-screen__image-animation-container {
    position: relative;
    height: 100%;
    max-width: 100%;
    overflow: hidden
}

.split-screen__image-animation-container img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0
}

.portfolio-content {
    margin-top: calc(85vh - 5em);
    top: 0;
    position: relative;
    background: #fff;
    z-index: 1
}

.portfolio-content>section:first-child {
    padding-top: 5em
}

@media (max-width:767.98px) {
    .portfolio-content>section:first-child {
        padding-top: 3em;
        padding-bottom: 2em
    }
}

header.portfolio {
    position: fixed;
    top: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--warm-gray);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: calc(85vh - 5em);
    width: 100%
}

header.portfolio img {
    flex: 1 1;
    max-width: 1440px;
    height: auto;
    padding: 12vh 0 5vh
}

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

@media (max-width:1440px) {
    header.portfolio img {
        flex: 1 1;
        max-width: 90vw
    }
}

footer {
    background: #e7e7e3;
    position: relative
}

@media (max-width:991.98px) {
    footer {
        font-size: 90%
    }
}

footer ul#social-nav1,
footer ul.social-nav {
    padding: 0
}

footer ul#social-nav1 li a,
footer ul.social-nav li a {
    color: #000000;
}

footer ul#social-nav1 li a svg,
footer ul.social-nav li a svg {
    width: 1.7em;
    height: 1.7em
}

footer .footer__upper {
    text-align: center;
    padding-top: 3em;
    padding-bottom: 3em;
    border-bottom: 1px solid #fff
}

footer .footer__upper img {
    width: 10em
}

@media (max-width:767.98px) {
    footer .footer__upper {
        padding-top: 2em;
        padding-bottom: 3em
    }
    footer .footer__upper img {
        width: 8em
    }
}

footer .footer__middle {
    padding-top: 2em;
    padding-bottom: 2em
}

footer .footer__middle .copyright {
    margin-top: 1.8em
}

@media (min-width:768px) {
    footer .footer__middle .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px
    }
    footer .footer__middle .grid .features {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }
}

@media (min-width:768px) and (min-width:1680px) {
    footer .footer__middle .grid .features {
        flex-direction: row
    }
}

@media (min-width:768px) {
    footer .footer__middle .grid .navigation {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end
    }
    footer .footer__middle .copyright {
        text-align: center;
        margin-top: 0
    }
}

footer .footer__middle address {
    line-height: 1.4
}

footer .footer__middle address strong {
    margin-bottom: .7em;
    display: block;
    font-size: 19px;
}

footer .footer__middle address,
footer .footer__middle nav,
footer .footer__middle p {
    margin: 1em 0
}

@media (max-width:767.98px) {
    footer .footer__middle nav {
        padding: 0 0 1em
    }
    footer .footer__middle address {
        margin-top: 0;
        padding: 0 0 1em
    }
}

footer p a {
    font-weight: 700;
    text-decoration: underline;
    color: #000
}

footer nav ul.support-navigation {
    margin: 0 -15px;
    padding: 0;
    list-style: none;
    display: flex
}

footer nav ul.support-navigation li {
    margin: 0;
    padding: 0
}

footer nav ul.support-navigation li a {
    color: #000;
    text-decoration: none;
    line-height: 1.6;
    display: block;
    padding: 0 15px
}

@media (max-width:767.98px) {
    footer nav ul.support-navigation li a {
        padding: .2em 15px
    }
}

footer .icon {
    margin: .5em 1em 1em 0;
    width: 3.4em;
    height: 4.4em
}

footer .footer__lower {
    height: 4em;
    background: url(../img/footer-lower-img.svg) no-repeat center;
    background-size: cover
}

footer .icon-heart {
    height: 1em;
    width: 1em
}

@media (max-width:767.98px) {
    footer address a {
        display: inline-block;
        margin-bottom: .5em
    }
}

button#burger {
    position: absolute;
    top: 2em;
    right: 2em;
    border: none;
    background: 0 0;
    display: block;
    margin: 0 2px 0 0;
    outline: 0;
    z-index: 12;
    cursor: pointer
}

@media (max-width:767.98px) {
    button#burger {
        top: 15px;
        right: 15px
    }
}

button#burger.burger-icon {
    margin-bottom: 0;
    height: 5em;
    width: 5em;
    transition: background .4s ease-in-out;
    background: rgba(0, 0, 0, .9);
    border: 1px solid #000;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

button#burger.burger-icon path {
    transition: all .4s ease-in-out
}

button#burger.burger-icon path#burger-upper {
    transform: rotate(0);
    transform-origin: 22px 1px
}

button#burger.burger-icon path#burger-lower {
    transform: rotate(0);
    transform-origin: 23px 16px
}

button#burger.burger-icon path#burger-middle {
    opacity: 1
}

button#burger.burger-icon.close-button {
    background: 0 0
}

button#burger.burger-icon.close-button path#burger-upper {
    transform: translateX(-2px) rotate(-45deg)
}

button#burger.burger-icon.close-button path#burger-lower {
    transform: translateX(-2px) rotate(45deg)
}

button#burger.burger-icon.close-button path#burger-middle {
    opacity: 0
}

.home header {
    height: auto;
    display: block;
    background-color: #000
}

.home .regular-content {
    margin-top: 100vh
}

@media (max-width:1140px) {
    .home .regular-content {
        margin-top: 30vh
    }
}

.start-slider .slick-slide .slide__wrapper {
    position: relative;
    height: 100vh;
    display: flex;
    width: 100%
}

@media (max-width:991.98px) {
    .start-slider .slick-slide .slide__wrapper {
        height: 80vh
    }
}

.start-slider .slick-slide .slide__wrapper .slide__image {
    width: 100%;
    height: 100%;
    display: block
}

.start-slider .slick-slide .slide__wrapper .slide__image img,
.start-slider .slick-slide .slide__wrapper .slide__image picture {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    display: block;
    position: relative;
    max-width: none;
    padding: 0;
    height: 100%;
    width: inherit
}

.start-slider .slick-slide .slide__wrapper .slide__content {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-end
}

.start-slider .slick-slide .slide__wrapper .slide__content .slide__text {
    margin: 2em 2.4em 5em;
    display: flex;
    max-width: 40em;
    align-items: flex-end
}

@media (max-width:991.98px) {
    .start-slider .slick-slide .slide__wrapper .slide__content .slide__text {
        margin: 2em 15px 3em;
        flex-direction: column;
        align-items: flex-start
    }
}

.start-slider .slick-slide .slide__wrapper .slide__content .slide__text__content {
    flex: 1 0 55%;
    color: #fff
}

.start-slider .slick-slide .slide__wrapper .slide__content .slide__text__content p {
    margin-bottom: 0
}

.start-slider .slick-slide .slide__wrapper .slide__content .slide__text__content p.pagination {
    font-weight: 700;
    margin-bottom: 2em
}

.page-content .start-slider .slick-slide .slide__wrapper .slide__content .slide__text__content h2,
.start-slider .slick-slide .slide__wrapper .slide__content .slide__text__content .page-content h2,
.start-slider .slick-slide .slide__wrapper .slide__content .slide__text__content .third-heading,
.start-slider .slick-slide .slide__wrapper .slide__content .slide__text__content h3 {
    margin-bottom: .5em
}

.start-slider .slick-slide .slide__wrapper .slide__content .slide__text__link {
    flex: 0 0 54%;
    justify-content: end;
    display: flex
}

.start-slider .slick-slide .slide__wrapper .slide__content .slide__text__link a.more {
    color: #fff
}

@media (max-width:991.98px) {
    .start-slider .slick-slide .slide__wrapper .slide__content .slide__text__link a.more {
        margin-top: 1em;
        margin-bottom: 1em
    }
}

.start-slider .slick-slide .slide__wrapper .slide__content--light {
    background: 0 0
}

.start-slider .slick-slide .slide__wrapper .slide__content--light .slide__text__content,
.start-slider .slick-slide .slide__wrapper .slide__content--light .slide__text__link a.more {
    color: #000
}

.start-slider .slick-dots {
    bottom: 2em;
    margin: 0 0 0 2em;
    text-align: left
}

@media (max-width:991.98px) {
    .start-slider .slick-dots {
        margin-left: 10px;
        bottom: 15px
    }
}

.slick-dotted.slick-slider {
    margin-bottom: 0
}

.invisible-mobile {
    white-space: nowrap
}

@media (max-width:767.98px) {
    .invisible-mobile {
        display: none
    }
}

.grid-landingpage {
    display: grid
}

@media (min-width:992px) {
    .grid-landingpage {
        grid-template-columns: repeat(12, 1fr)
    }
    .grid-landingpage>* {
        grid-column: 3/11
    }
    .grid-landingpage h2 {
        grid-column: 3/11
    }
    .grid-landingpage figure {
        grid-column: 2/12
    }
    .grid-landingpage .einzug {
        grid-column: 7/-1;
        padding-top: 3em
    }
}

@media (min-width:1200px) {
    .grid-landingpage {
        grid-template-columns: repeat(12, 1fr)
    }
    .grid-landingpage>* {
        grid-column: 4/10
    }
    .grid-landingpage h2 {
        grid-column: 4/11
    }
    .grid-landingpage figure {
        grid-column: 3/11
    }
}

.grid-fiftyFifty {
    display: grid
}

@media (min-width:768px) {
    .grid-fiftyFifty {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px
    }
}

video {
    width: 100%;
    height: auto
}

.screencast__inner {
    background: url(../img/movie-bg.jpg) no-repeat;
    background-position: center;
    padding: 18% 16% 25%;
    background-size: 96%;
    max-width: 1120px;
    margin: auto
}

@media (min-width:1680px) {
    .screencast__inner {
        background: url(../img/movie-bg.jpg) no-repeat;
        background-position: center;
        padding: 18% 11% 23.5%;
        background-size: 100%;
        max-width: 1120px;
        margin: auto
    }
}

.klaro .cookie-modal,
.klaro .cookie-notice {
    font-size: 14px
}

.klaro .cookie-modal .switch,
.klaro .cookie-notice .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 30px
}

.klaro .cookie-modal .cm-app-input:checked+.cm-app-label .slider,
.klaro .cookie-notice .cm-app-input:checked+.cm-app-label .slider {
    background-color: #0885ba
}

.klaro .cookie-modal .cm-app-input.required:checked+.cm-app-label .slider,
.klaro .cookie-notice .cm-app-input.required:checked+.cm-app-label .slider {
    opacity: .8;
    background-color: #006a4e;
    cursor: not-allowed
}

.klaro .cookie-modal .slider,
.klaro .cookie-notice .slider {
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .2), 5px 5px 10px 0 rgba(0, 0, 0, .19)
}

.klaro .cookie-modal .cm-app-input,
.klaro .cookie-notice .cm-app-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 50px;
    height: 30px
}

.klaro .cookie-modal .cm-app-label .slider,
.klaro .cookie-notice .cm-app-label .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    width: 50px;
    display: inline-block
}

.klaro .cookie-modal .cm-app-label .slider:before,
.klaro .cookie-notice .cm-app-label .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 5px;
    bottom: 5px;
    background-color: #fff;
    transition: .4s
}

.klaro .cookie-modal .cm-app-label .slider.round,
.klaro .cookie-notice .cm-app-label .slider.round {
    border-radius: 30px
}

.klaro .cookie-modal .cm-app-label .slider.round:before,
.klaro .cookie-notice .cm-app-label .slider.round:before {
    border-radius: 50%
}

.klaro .cookie-modal .cm-app-label input:focus+.slider,
.klaro .cookie-notice .cm-app-label input:focus+.slider {
    box-shadow: 0 0 1px #0885ba
}

.klaro .cookie-modal .cm-app-label input:checked+.slider:before,
.klaro .cookie-notice .cm-app-label input:checked+.slider:before {
    transform: translateX(20px)
}

.klaro .cookie-modal .cm-app-input:focus+.cm-app-label .slider,
.klaro .cookie-notice .cm-app-input:focus+.cm-app-label .slider {
    box-shadow: 0 4px 6px 0 rgba(125, 125, 125, .2), 5px 5px 10px 0 rgba(125, 125, 125, .19)
}

.klaro .cookie-modal .cm-app-input:checked+.cm-app-label .slider:before,
.klaro .cookie-notice .cm-app-input:checked+.cm-app-label .slider:before {
    transform: translateX(20px)
}

.klaro .cookie-modal .slider,
.klaro .cookie-notice .slider {
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .2), 5px 5px 10px 0 rgba(0, 0, 0, .19)
}

.klaro .cookie-modal a,
.klaro .cookie-notice a {
    color: #00aa3e;
    text-decoration: none
}

.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal li,
.klaro .cookie-modal p,
.klaro .cookie-modal strong,
.klaro .cookie-modal ul,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice li,
.klaro .cookie-notice p,
.klaro .cookie-notice strong,
.klaro .cookie-notice ul {
    font-family: inherit;
    color: #eee
}

.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal li,
.klaro .cookie-modal p,
.klaro .cookie-modal ul,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice li,
.klaro .cookie-notice p,
.klaro .cookie-notice ul {
    display: block;
    text-align: left;
    margin: 0;
    padding: 0;
    margin-top: .7em
}

.klaro .cookie-modal .cm-link,
.klaro .cookie-notice .cm-link {
    padding-left: 4px;
    vertical-align: middle
}

.klaro .cookie-modal .cm-btn,
.klaro .cookie-notice .cm-btn {
    background: #555;
    color: #eee;
    border-radius: 0;
    padding: 6px 10px;
    margin-right: .5em;
    border: 0
}

.klaro .cookie-modal .cm-btn:disabled,
.klaro .cookie-notice .cm-btn:disabled {
    opacity: .5
}

.klaro .cookie-modal .cm-btn.cm-btn-sm,
.klaro .cookie-notice .cm-btn.cm-btn-sm {
    padding: .4em;
    font-size: 1em
}

.klaro .cookie-modal .cm-btn.cm-btn-close,
.klaro .cookie-notice .cm-btn.cm-btn-close {
    background: #eee;
    color: #000
}

.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success {
    background: #00aa3e
}

.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-info {
    background: #0885ba
}

.klaro .cookie-modal .cm-btn.cm-btn-right,
.klaro .cookie-notice .cm-btn.cm-btn-right {
    float: right;
    margin-left: .5em;
    margin-right: 0
}

.klaro .cookie-modal {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    left: 0;
    top: 0;
    z-index: 1000
}

.klaro .cookie-modal .cm-bg {
    background: rgba(0, 0, 0, .5);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0
}

.klaro .cookie-modal .cm-modal {
    z-index: 1001;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .2), 5px 5px 10px 0 rgba(0, 0, 0, .19);
    width: 100%;
    max-height: 98%;
    top: 50%;
    transform: translateY(-50%);
    position: fixed;
    overflow: auto;
    background: #333;
    color: #eee
}

@media (min-width:1024px) {
    .klaro .cookie-modal .cm-modal {
        border-radius: 4px;
        position: relative;
        margin: 0 auto;
        max-width: 640px;
        height: auto;
        width: auto
    }
}

.klaro .cookie-modal .cm-modal .hide {
    border: none;
    background: 0 0;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1
}

.klaro .cookie-modal .cm-modal .hide svg {
    stroke: #eee
}

.klaro .cookie-modal .cm-modal .cm-footer {
    padding: 1em;
    border-top: 1px solid #555
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons::after,
.klaro .cookie-modal .cm-modal .cm-footer-buttons::before {
    content: " ";
    display: table
}

.klaro .cookie-modal .cm-modal .cm-footer-buttons::after {
    clear: both
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by {
    font-size: .8em;
    padding-top: 4px;
    text-align: center
}

.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
    color: #999
}

.klaro .cookie-modal .cm-modal .cm-header {
    padding: 1em;
    padding-right: 24px;
    border-bottom: 1px solid #555
}

.klaro .cookie-modal .cm-modal .cm-header h1 {
    margin: 0;
    font-size: 2em;
    display: block
}

.klaro .cookie-modal .cm-modal .cm-header h1.title {
    padding-right: 20px
}

.klaro .cookie-modal .cm-modal .cm-body {
    padding: 1em
}

.klaro .cookie-modal .cm-modal .cm-body ul {
    display: block
}

.klaro .cookie-modal .cm-modal .cm-body span {
    display: inline-block;
    width: auto
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-apps {
    padding: 0;
    margin: 0
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-apps li.cm-app {
    position: relative;
    line-height: 20px;
    vertical-align: middle;
    padding-left: 60px;
    min-height: 40px
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-apps li.cm-app:first-child {
    margin-top: 0
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-apps li.cm-app .switch {
    position: absolute;
    left: 0
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-apps li.cm-app p {
    margin-top: 0
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-apps li.cm-app p.purposes {
    font-size: .8em;
    color: #999
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-apps li.cm-app.cm-toggle-all {
    border-top: 1px solid #555;
    padding-top: 1em
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-apps li.cm-app span.cm-app-title {
    font-weight: 600
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-apps li.cm-app span.cm-opt-out,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-apps li.cm-app span.cm-required {
    padding-left: .2em;
    font-size: .8em;
    color: #999
}

.klaro .cookie-notice {
    background: #333;
    z-index: 999;
    position: fixed;
    width: 100%;
    bottom: 0;
    right: 0
}

@media (min-width:990px) {
    .klaro .cookie-notice {
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .2), 5px 5px 10px 0 rgba(0, 0, 0, .19);
        border-radius: 4px;
        position: fixed;
        bottom: 20px;
        right: 20px;
        max-width: 300px
    }
}

@media (max-width:989px) {
    .klaro .cookie-notice {
        border: none;
        border-radius: 0
    }
}

.klaro .cookie-notice .cn-body {
    margin-bottom: 0;
    margin-right: 0;
    bottom: 0;
    padding: 1em;
    padding-top: 0
}

.klaro .cookie-notice .cn-body p {
    margin-bottom: .5em
}

.klaro .cookie-notice .cn-body p.cn-changes {
    text-decoration: underline
}

.klaro .cookie-notice .cn-body .cn-learn-more {
    display: inline-block
}

.klaro .cookie-notice .cn-body p.cn-ok {
    padding-top: .5em;
    margin: 0
}

.klaro .cookie-notice-hidden {
    display: none!important
}

:root {
    --klaro-akzentfarbe: #177759;
    --klaro-font-color: #333;
    --klaro-background-color: #fff;
    --klaro-line-color: #aaa;
    --klaro-secondary-btn: var(--klaro-font-color)
}

.klaro .cookie-notice .cm-btn.cm-btn-sm.cn-decline {
    display: none
}

.klaro .cookie-notice {
    background: var(--klaro-background-color)
}

.klaro .cookie-notice .cm-btn.cm-btn-success {
    background: 0 0;
    border: 1px solid var(--klaro-font-color);
    color: var(--klaro-font-color);
    padding: .5em 1.3em;
    font-size: 1.2em;
    font-weight: 700;
    cursor: pointer
}

.klaro .cookie-modal h1,
.klaro .cookie-modal h2,
.klaro .cookie-modal li,
.klaro .cookie-modal p,
.klaro .cookie-modal strong,
.klaro .cookie-modal ul,
.klaro .cookie-notice h1,
.klaro .cookie-notice h2,
.klaro .cookie-notice li,
.klaro .cookie-notice p,
.klaro .cookie-notice strong,
.klaro .cookie-notice ul {
    font-family: inherit;
    color: var(--klaro-font-color)
}

.klaro .cookie-notice a {
    color: var(--klaro-font-color);
    text-decoration: underline;
    font-weight: 400
}

.klaro .cookie-modal a {
    color: var(--klaro-akzentfarbe)
}

.klaro .cookie-modal .cm-app-input:checked+.cm-app-label .slider {
    background: var(--klaro-akzentfarbe)
}

.klaro .cookie-modal .cm-btn,
.klaro .cookie-modal .cm-btn.cm-btn-info {
    background: 0 0;
    border: 1px solid var(--klaro-secondary-btn);
    color: var(--klaro-secondary-btn)
}

.klaro .cookie-modal .cm-btn.cm-btn-accept-all {
    background: var(--klaro-akzentfarbe);
    border: 1px solid transparent;
    color: var(--klaro-background-color)
}

@media (min-width:990px) {
    .klaro .cookie-notice {
        min-width: 350px;
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .2), 0 0 21px 0 rgba(0, 0, 0, .09)
    }
}

.klaro .cookie-modal .cm-modal {
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .2), 5px 5px 10px 0 rgba(0, 0, 0, .19);
    background: var(--klaro-background-color);
    color: var(--klaro-font-color)
}

.klaro .cookie-modal .slider,
.klaro .cookie-notice .slider {
    box-shadow: none
}

.klaro .cookie-modal .cm-modal .cm-footer,
.klaro .cookie-modal .cm-modal .cm-header {
    border-color: var(--klaro-line-color)
}

.klaro-disabled-resource {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ddd
}

iframe[src]+.klaro-disabled-resource {
    display: none
}

@media print {
     :after,
     :before,
     :not(header) {
        background: #fff!important;
        color: #000!important;
        box-shadow: none!important;
        text-shadow: none!important
    }
    a,
    a:visited {
        text-decoration: none;
    }
    a[href]:after {
        content: " (" attr(href) ")";
        text-decoration: none;
    }
    abbr[title]:after {
        content: " (" attr(title) ")"
    }
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
        text-decoration: none;
    }
    pre {
        white-space: pre-wrap!important
    }
    blockquote,
    pre {
        border: 1px solid #999;
        page-break-inside: avoid
    }
    thead {
        display: table-header-group
    }
    img,
    tr {
        page-break-inside: avoid
    }
    h2,
    h3,
    p {
        orphans: 3;
        widows: 3
    }
    h2,
    h3 {
        page-break-after: avoid
    }
    #klaro {
        display: none
    }
}


/* custom css */

.gallery-title {
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}

.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}

.filter-button {
    font-size: .875rem;
    letter-spacing: .0892857143em;
    border: 1px solid #0bffbf;
    border-radius: 4px;
    text-align: center;
    color: #0B0C27;
    background-color: #0bffbf;
    margin-bottom: 30px;
    padding: 10px 20px;
    margin-right: 10px;
    font-weight: 500;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.filter-button:hover {
    font-size: .875rem;
    letter-spacing: .0892857143em;
    border: 1px solid #0037c1;
    border-radius: 4px;
    text-align: center;
    color: #ffffff;
    background-color: #0037c1;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.btn-default:active .filter-button:active {
    background-color: #0037c1;
    color: white;
}

.port-image {
    width: 100%;
}

.gallery_product {
    margin-bottom: 30px;
}

.home-heading {
    font: 900 3.6rem/1 "Inter", sans-serif;
}

.home-heading2 {
    font: 900 3.6rem/1 "Inter", sans-serif;
}

@media (max-width:767.98px) {
    h1 {
        font-size: 2.6rem
    }
    .home-heading  {
        font: 900 2.6rem/1 "Inter", sans-serif;
    }

    .home-heading2  {
        font: 900 2.5rem/1 "Inter", sans-serif;
    }
}

@media (max-width:1024px) {
    h1 {
        font-size: 2.6rem
    }
    .home-heading  {
        font: 900 2.1rem/1 "Inter", sans-serif;
    }

    .home-heading2  {
        font: 900 2rem/1 "Inter", sans-serif;
    }
}

.referenzen-home {
 padding: 0px 10px;
}

@media (max-width:767.98px) {
    .referenzen-home {
        padding: 0px 20px;
       }
}



.service-heading1 {
    font: 900 "Inter", sans-serif;
    font-size: 5.4rem!important;
    margin: 0 60px 120px 60px;
}

@media (max-width:767.98px) {
    .service-heading1 {
        font-size: 3.7rem!important;
        margin: 0 30px 50px 30px;
    }
}



.project-content {
    margin-top: 150px;
}

.headline-project h1 {
    font: 900 3.8rem/1 "Inter", sans-serif;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 120px;
}

.headline-project span {
    font: 600 1.6rem/1 "Inter", sans-serif;
    text-align: center;
    padding-bottom: 20px;
}

.project-headings {
    font: 600 1.3rem/1 "Inter", sans-serif;
}

.heading2 {
    font: 830 3.8rem/1.1 "Inter", sans-serif;
    padding: 0;
    margin: 0 0 .5em;
}

.heading3 {
    font: 600 1.9rem/1.2 "Inter", sans-serif;
    padding: 0;
    margin: 0 0 .9em;
}

.nav-heading {
    font: 750 1.2em/1.4 "Inter", sans-serif;
    text-align: left;
    display: block;
    color: #fff;
    padding: 3em 0 0 1.6em;
}

.container-full {
    margin: 0 30px!important;
}