:root,
html {
    --brand-secondary: #377db7;
    --brand-white: #fff;
    /* --border-radius-base: 0px;
    --border-radius-large: 0px; */
    --font-family-base: "Roboto", "Open Sans", Helvetica, Arial, Verdana,
        sans-serif;
    --headings-font-family: "Oswald", "Open Sans Condensed", "Open Sans",
        Helvetica, Arial, Verdana, sans-serif;
    --headings-font-weight: 700;
}

@font-face {
    font-family: "Oswald";
    font-weight: 400;
    font-display: swap;
    src: url("/_Resources/Static/Packages/Esn.Dna.Site/Fonts/Oswald-Latin-Regular.woff2")
            format("woff2"),
        url("/_Resources/Static/Packages/Esn.Dna.Site/Fonts/Oswald-Latin-Regular.woff")
            format("woff");
}

@font-face {
    font-family: "Oswald";
    font-weight: 700;
    font-display: swap;
    src: url("/_Resources/Static/Packages/Esn.Dna.Site/Fonts/Oswald-Latin-Bold.woff2")
            format("woff2"),
        url("/_Resources/Static/Packages/Esn.Dna.Site/Fonts/Oswald-Latin-Bold.woff")
            format("woff");
}

@font-face {
    font-family: "Roboto";
    font-weight: 400;
    font-display: swap;
    src: url("/_Resources/Static/Packages/Esn.Dna.Site/Fonts/Roboto-Latin-Regular.woff2")
            format("woff2"),
        url("/_Resources/Static/Packages/Esn.Dna.Site/Fonts/Roboto-Latin-Regular.woff")
            format("woff");
}

@font-face {
    font-family: "Roboto";
    font-weight: 700;
    font-display: swap;
    src: url("/_Resources/Static/Packages/Esn.Dna.Site/Fonts/Roboto-Latin-Bold.woff2")
            format("woff2"),
        url("/_Resources/Static/Packages/Esn.Dna.Site/Fonts/Roboto-Latin-Bold.woff")
            format("woff");
}

.c-headline {
    font-family: var(--headings-font-family);
    font-weight: var(--headings-font-weight);
}

h1,
.c-headline.h1 {
    font-size: 30px;
}

h2,
.c-headline.h2 {
    font-size: 20px;
}

.c-paragraph {
    font-family: var(--font-family-base);
    font-size: 14px;
    font-weight: 400;
}

.c-form-button__label,
.c-button__label,
.c-form-link__inner {
    font-family: var(--headings-font-family);
    font-size: 20px;
    font-weight: 700;
}

.c-order-list__item-head-links .c-button__label {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* as fonts are not originial, buttons might look not as what we expect. Therefore added flexbox to align buttons children */
.c-button__wrapper .c-button {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

.c-page__footer .c-footer > .c-footer__link-wrapper {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 60%;
}

.c-footer__link,
.c-footer__link:hover,
.c-footer__link:active {
    color: #000;
}

.c-page__footer .c-footer > div:not(.c-footer__link-wrapper) {
    flex-grow: 1;
    flex-basis: 0%;
}

.c-page__footer .c-footer .c-responsive-image {
    max-width: 300px;
    margin: 0 auto;
}

.c-page__footer .neos-nodetypes-text {
    text-align: left;
    display: block;
}

.c-page__main-content {
    flex: 1;
}

.c-page {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: space-between;
}

.c-page .main {
    flex: 1 0 auto;
}

.c-page .c-page__footer {
    flex-shrink: 0;
    align-items: end;
    position: relative;
}

.c-page__footer .c-footer {
    display: flex;
    flex-direction: column;

    margin-top: 50px;
    margin: 50px auto auto auto;

    min-height: 400px;
    background: url("./Images/footer-main.png") no-repeat -350px bottom;

    padding: 200px 0 30px 0;

    width: 100%;
    padding: 15px auto;
    max-width: 100%;
}

.c-page__footer .c-footer::after {
    content: "";
    height: 400px;
    background: transparent url("./Images/footer-right.png") repeat-x left bottom;
    right: 0;
    bottom: 0;
    display: block;
    position: absolute;
    width: calc(50% - 585px);
}

.c-page__footer .c-footer::before {
    content: "";
    height: 400px;
    background: transparent url("./Images/footer-left.png") repeat-x left bottom;
    left: 0;
    bottom: 0;
    display: block;
    position: absolute;
    width: calc(50% - 585px);
}

@media (min-width: 768px) {
    .c-page__footer .c-footer .c-responsive-image {
        margin: 0;
    }

    .c-page__footer .c-footer > .c-footer__link-wrapper {
        margin-top: 70px;
    }

    .c-page__footer .c-footer {
        flex-direction: row-reverse;
        background: url("./Images/footer-main.png") no-repeat center bottom;
        min-height: 400px;
        padding: 100px 0 0 0;
        max-width: 766px;
    }

    .c-page__footer .c-footer::after {
        width: calc(50% - 383px);
    }

    .c-page__footer .c-footer::before {
        width: calc(50% - 383px);
    }

    .c-page__footer .c-footer .c-footer__link-wrapper {
        text-align: left;
    }
}

@media (min-width: 992px) {
    .c-page__footer .c-footer {
        max-width: 960px;
    }
    .c-page__footer .c-footer::after {
        width: calc(50% - 480px);
    }

    .c-page__footer .c-footer::before {
        width: calc(50% - 480px);
    }
}

@media (min-width: 1200px) {
    .c-page__footer .c-footer {
        max-width: 1170px;
    }
    .c-page__footer .c-footer::after {
        width: calc(50% - 585px);
    }

    .c-page__footer .c-footer::before {
        width: calc(50% - 585px);
    }
}