/* variables */
:root {
    --color-primary: #e7414d;
    --color-secondary: rgb(21, 67, 122);
    --color-text: rgb(48, 48, 48);
}

/* fonts */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Light.ttf') format('truetype'), 
        url('fonts/Roboto-Light.woff') format('woff'), 
        url('fonts/Roboto-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Bold.ttf') format('truetype'),
        url('fonts/Roboto-Bold.woff') format('woff'), 
        url('fonts/Roboto-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-LightItalic.ttf') format('truetype'),
        url('fonts/Roboto-LightItalic.woff') format('woff'), 
        url('fonts/Roboto-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-BoldItalic.ttf') format('truetype'),
        url('fonts/Roboto-BoldItalic.woff') format('woff'), 
        url('fonts/Roboto-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('fonts/RobotoCondensed-Light.ttf') format('truetype'), 
        url('fonts/RobotoCondensed-Light.woff') format('woff'), 
        url('fonts/RobotoCondensed-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('fonts/RobotoCondensed-LightItalic.ttf') format('truetype'), 
        url('fonts/RobotoCondensed-LightItalic.woff') format('woff'), 
        url('fonts/RobotoCondensed-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('fonts/RobotoCondensed-Bold.ttf') format('truetype'), 
        url('fonts/RobotoCondensed-Bold.woff') format('woff'), 
        url('fonts/RobotoCondensed-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('fonts/RobotoCondensed-BoldItalic.ttf') format('truetype'), 
        url('fonts/RobotoCondensed-BoldItalic.woff') format('woff'), 
        url('fonts/RobotoCondensed-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}

/* general */

::selection {
    background: var(--color-primary);
}
body {
    font-size: 18px;
    margin: 0;
    padding: 0;
}
* {
    font-family: 'Roboto', sans-serif;
    color: var(--color-text);
}

a,
a * {
    color: var(--color-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto Condensed', sans-serif;
}

img {
    max-width: 100%;
}

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

/* header */

header {
    font-size: 0.9rem;
    border-bottom: 40px solid var(--color-primary);
}

header h1,
header h2,
header h3,
header h4,
header h5,
header h6 {
    font-weight: normal;
}

header h2 span.small-dash {
    font-family: 'Roboto Condensed', sans-serif;
    border-bottom: 1px solid var(--color-primary);
    border-image: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) 25%, transparent 25%, transparent 100%);
    border-image-slice: 1;
    color: var(--color-primary);
}
header h2 span sup {
    color: var(--color-primary);
}
header h2 small {
    color: var(--color-secondary);
    font-family: 'Roboto Condensed', sans-serif;
}

/* Social media links */

.social a {
    display: inline-block;
    margin-bottom: 5px;
    text-decoration: none;
    color: var(--color-secondary);
}
.social a i,
.social a svg {
    width: 1.25em;
}

/* footer */
footer {
    background: var(--color-primary);
    color: white;
    text-align: center;
    padding: 30px;
}
footer p,
footer summary,
footer a,
footer h3,
footer h4,
footer strong {
    color: white;
}
footer details div.align-left {
    text-align: left;
}

/* partnets */
.partners img {
    aspect-ratio: 1/1;
    object-fit: contain;
}
footer .social a,
footer .social a i {
    color: #fff;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
}

h3.maintenance-banniere {
    color: var(--color-primary);
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1rem;

}