/* roboto-slab-regular - latin */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/roboto-slab-v13-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('/fonts/roboto-slab-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/fonts/roboto-slab-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('/fonts/roboto-slab-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
        url('/fonts/roboto-slab-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/fonts/roboto-slab-v13-latin-regular.svg#RobotoSlab') format('svg'); /* Legacy iOS */
    }

    /* roboto-slab-700 - latin */
    @font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/roboto-slab-v13-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('/fonts/roboto-slab-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('/fonts/roboto-slab-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
        url('/fonts/roboto-slab-v13-latin-700.woff') format('woff'), /* Modern Browsers */
        url('/fonts/roboto-slab-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
        url('/fonts/roboto-slab-v13-latin-700.svg#RobotoSlab') format('svg'); /* Legacy iOS */
    }

    /* roboto-regular - latin */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 400;
        src: url('/fonts/roboto-v27-latin-regular.eot'); /* IE9 Compat Modes */
        src: local(''),
            url('/fonts/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('/fonts/roboto-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
            url('/fonts/roboto-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
            url('/fonts/roboto-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
            url('/fonts/roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
    }

    /* roboto-700 - latin */
    @font-face {
        font-family: 'Roboto';
        font-style: normal;
        font-weight: 700;
        src: url('/fonts/roboto-v27-latin-700.eot'); /* IE9 Compat Modes */
        src: local(''),
            url('/fonts/roboto-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('/fonts/roboto-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
            url('/fonts/roboto-v27-latin-700.woff') format('woff'), /* Modern Browsers */
            url('/fonts/roboto-v27-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
            url('/fonts/roboto-v27-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
    }


    :root {
        --color-spirkop-black: #262626;
        --color-spirkop-black-lighten: #333333;
        --color-spirkop-black-darken: #191919;
        --color-spirkop-red: #ef3838;
        --color-wool: #f1e9e3;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        color: var(--color-spirkop-black);
    }

    .container-separator::before {
        content: "";
        background: url("/img/common/spir-separator.svg");
        display: block;
        height:62px;
        width:62px;
        position: absolute;
        left: 50%;
        transform: translate(-31px, -50%);
    }

    .text-hide {
        font: 0/0 a;
        color: transparent;
        text-shadow: none;
        background-color: transparent;
        border: 0;
    }

    .size-spirkop-logo {
        width: 220px;
        height: 61px;
    }

    ul.large-circle li:before {
        display: inline-block;
        margin: 0 .5rem 0 0;
        content: "";
        width: 14px;
        height: 14px;
        border-radius: 14px;
        border: 3px solid var(--color-wool);
        transform: translateY(1px);
    }
    ul.large-circle-spirkop-black li:before {
        border-color: var(--color-spirkop-black);
    }

    .title-underline::after {
        content: "";
        display: block;
        position: absolute;
        height: 5px;
        left: -.1em;
        right: -1em;
        bottom: -5px;
        border-radius: .2em;
        background: var(--color-spirkop-black);
    }

    .title-underline-red::after {
        background: var(--color-spirkop-red);
    }

    .particule-circle {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 14px;
        border: 3px solid var(--color-spirkop-black);
    }

    .particule-circle.particule-left {
        margin: -.9em 0 0 -1.2em;
    }

    .particule-circle.particule-top-right {
        right: -1em;
        top: -.5em;
    }

    .particule-dot {
        content: "";
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 6px;
        background: var(--color-spirkop-black);
    }

    .particule-dot.particule-right {
        right: -1.3em;
        top: .3em;
    }

    .particule-dot.particule-left {
        margin: -1.3em 0 0 -.5em;
    }

    .particule-dot.particule-top-left {
        margin: -2em 0 0 -3em;
    }

    .particule-line {
        content: "";
        position: absolute;
        width: 22px;
        height: 4px;
        border-radius: 6px;
        background: var(--color-spirkop-black);
    }

    .particule-line.particule-right {
        right: -3em;
        top: .5em;
    }