/* Fonts - https://google-webfonts-helper.herokuapp.com/fonts */

/* roboto-regular - latin-ext */
/*@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;             FIXME Gives the font face an extremely small block period and an infinite swap period. *
font-display: font-fallback;    FIXME Gives the font face an extremely small block period and a short swap period. *
src: local('Roboto'), local('Roboto-Regular'),
url('../Fonts/roboto-v18-latin-ext-regular.woff2') format('woff2'),  Chrome 26+, Opera 23+, Firefox 39+
url('../Fonts/roboto-v18-latin-ext-regular.woff') format('woff');  Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+
}*/

/* Typography  */
@media all {
    html {
        font-size: 1rem;
        height: 100%;
        background: rgb(51, 51, 51);
    }

    body,
    input:not([type="radio"]):not([type="checkbox"]),
    button,
    select,
    textarea {
        font-size: 1rem;
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        line-height: 1.7;
        font-display: swap;
        color: rgb(51, 51, 51);
        background: rgb(255, 255, 255);

        text-rendering: optimizelegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    input:not([type="radio"]):not([type="checkbox"]) {
        line-height: 1;
        max-height: 2.25rem;
    }

    b,
    strong,
    dt {
        font-weight: 600;
    }

    a {
        color: inherit;
        /*! text-decoration: underline; */
        text-decoration-skip: ink;
        color: var(--color-primary);
    }

    .ce-frame-inverted a {
        color: var(--color-primary-neg);
    }

    p a  {
        font-weight: 700;
    }

    a:focus,
    a:hover {
        color: var(--color-primary);
    }

    li + li,
    ol li > ol,
    ul li > ol,
    ol li > ul,
    ul li > ul {
        /* margin-top: .625rem; */
    }
    /* .topnav li {
        margin-top: 0.625rem;
    } */

    .ce-bodytext ol li::marker,
    .ce-bodytext ul li::marker {
        color: var(--color-primary);
    }

    .h1-like,
    .h2-like,
    .h3-like,
    .h4-like,
    .h5-like,
    h1,
    h2,
    h3,
    h4,
    h5 {
        margin: 0;
        line-height: 1.2;
        font-weight: normal;
        /*! font-family: 'Roboto Condensed'; */
        font-weight: 500;
    }
    .h1-like a,
    .h2-like a,
    .h3-like a,
    .h4-like a,
    .h5-like a,
    h1 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a {
        /* color: rgb(70,70,70); FIXME */
        text-decoration: none;
    }

    .h1-like,
    .h2-like,
    h1,
    h2 {
        position: relative;
        padding-left: var(--size-x8);
    }

    [class*="ce-type-grid-33-33-33"] :is(.h1-like, .h2-like, h1, h2) {
        padding-left: 0;
    }

    .h1-like::before,
    .h2-like::before,
    h1::before,
    h2::before {
        content: "";
        display: block;
        position: absolute;
        top: var(--size-x1);
        bottom: var(--size-x1);
        left: 0;
        background-color: var(--color-primary);
        border-radius: var(--border-radius);
        width: var(--size-x4);
    }

    [class*="ce-type-grid-33-33-33"] :is(.h1-like, .h2-like, h1, h2)::before {
        display: none;
    }

    *.ce-header-subheader:before {
        display: none;
    }

    *.ce-header-subheader {
        padding-left: 0;
    }

    .ce-frame-inverted .h1-like::before,
    .ce-frame-inverted .h2-like::before,
    .ce-frame-inverted h1::before,
    .ce-frame-inverted h2::before {
        background-color: var(--color-text-neg);
    }

    .h1-like,
    h1 {
        font-size: 150%;
    }
    .h2-like,
    h2 {
        font-size: 125%;
    }

    .h3-like,
    h3 {
        font-size: 112.5%;
    }
    .h4-like,
    h4 {
        font-weight: 600;
    }

    blockquote {
        position: relative;
        padding-left: var(--size-x8);
        font-style: italic;
        font-size: 1.25em;
        line-height: 1.25;
        font-weight: 300;
    }

    blockquote p + p:last-child {
        font-style: normal;
        font-size: 0.8em;
        text-align: right;
        font-weight: 400;
    }

    blockquote::before {
        position: absolute;
        left: 0;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font-size: 2.5em;
        opacity: 0.05;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f10e";
    }

    blockquote::after {
        content: "";
        display: table;
    }

    /* margins */

    .ce-news,
    .ce-header,
    .ce-teaserlink-outer,
    table,
    p,
    ul,
    ol,
    dl {
        margin: 0 0 var(--size-x4);
    }

    ul,
    ol,
    dl {
        padding-left: 0.9375rem;
        padding-left: var(--size-x6);
    }

    ul ul,
    ul ol,
    ul dl,
    ol ul,
    ol ol,
    ol dl,
    dl ul,
    dl ol,
    dl dl {
        padding-left: 1.25rem;
    }

    ol li:::marker,
    ul li:::marker {
        color: rgb(255, 80, 0);
    }

    .ce-layout-box > div > .ce-teaserlink-outer {
        margin: 0;
    }

    .ce-header-subheader,
    .ce-header-date {
        margin-top: 0.3125rem;
    }

    .ce-header-subheader {
        margin-top: 0.625rem;
    }
    .ce-header-date {
        margin: 0.625rem 0 0;
    }
    ul ul,
    ul ol,
    ol ul,
    ol ol {
        margin: 0;
    }

    .ce-menu {
        margin-left: 0.625rem;
    }

    .ce-menu .ce-menu {
        margin-left: 1.25rem;
    }

    hr,
    .ce-div {
        border: none;
        /*! border-top: .25rem solid rgb(235, 235, 235); */
        margin: 0;
        height: 0;
        margin-bottom: 1.25rem;
    }

    p + hr {
        margin-top: 1.25rem;
    }

    /* text flow */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 p,
    li,
    a,
    figcaption {
        overflow-wrap: break-word;
        word-wrap: break-word;
        /*! -webkit-hyphens: auto; */
        /*! -moz-hyphens: auto; */
        /*! -ms-hyphens: auto; */
        /*! hyphens: auto; */
    }

    .ce-type-gridelements_pi1 > .ce-header,
    .ce-type-list > .ce-header,
    .ce-type-header > .ce-header {
        margin: 0 0 var(--size-x4);
    }
}

/* large */
@media all and (min-width: 62.5em) {
    /* typography */

    body,
    input:not([type="radio"]):not([type="checkbox"]),
    button,
    select,
    textarea {
        font-size: 1.125rem;
    }

    hr,
    .ce-div {
        margin-bottom: var(--size-x6);
    }

    p + hr {
        margin-top: 2.5rem;
    }

    .h1-like,
    h1 {
        font-size: 175%;
    }
    .h2-like,
    h2 {
        font-size: 150%;
    }

    .h3-like,
    h3 {
        font-size: 125%;
    }

    .h4-like,
    h4 {
        font-size: 112.5%;
        font-weight: inherit;
    }

    .h5-like,
    h5 {
        font-weight: 600;
    }

    .ce-type-gridelements_pi1 > .ce-header,
    .ce-type-list > .ce-header,
    .ce-type-header > .ce-header {
        margin: 0 0 var(--size-x6);
    }
}

/* xlarge */
@media all and (min-width: 82.5em) {
    /* typography */

    .ce-news,
    .ce-header,
    .ce-teaserlink-outer,
    table,
    p,
    ul,
    ol,
    dl {
        margin: 0 0 var(--size-x8);
    }

    .ce-type-news_pi1 > .ce-header,
    [class*="ce-type-grid"] > .ce-header,
    .ce-type-list > .ce-header,
    .ce-type-header > .ce-header {
        margin: 0 0 var(--size-x12);
    }

    .h1-like,
    .h2-like,
    h1,
    h2 {
        position: relative;
        padding-left: calc(var(--size-x8) + var(--size-x4));
        padding-left: var(--size-x8);
    }

    body,
    input:not([type="radio"]):not([type="checkbox"]),
    button,
    select,
    textarea {
        font-size: 1.25rem;
    }

    .h1-like,
    h1 {
        font-size: 200%;
        font-size: 2.5rem;
    }

    .h2-like,
    h2 {
        font-size: 175%;
        font-size: 2rem;
    }

    .h3-like,
    h3 {
        font-size: 150%;
        font-size: 1.5rem;
    }

    .h4-like,
    h4 {
        font-size: 125%;
        font-size: 1.25rem;
    }

    .h5-like,
    h5 {
        font-size: 112.5%;
        font-size: 1.125rem;
        font-weight: inherit;
    }

    hr,
    .ce-div {
        margin-bottom: var(--size-x12);
    }
}