html, body {
    width: 100%;
	height: 100%;
}

.square-dot:before {
    display: inline-block;
    content: ".";
    font-family: arial, sans-serif;
}

a {
    text-decoration: none;
}

p [class*='mt-'],
p [class*='pt-'] {
    display: block;
}

.heading-decorated {
    background: linear-gradient(
        to right,
        #7953cd 0%,
        #00affa 40%,
        #0d6efd 50%,
        #b098e9 90%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 20s ease-in-out infinite alternate;
}

.heading-centered {
    margin: 0 auto;
    max-width: 530px;
    text-align: center;
}

.h1, h1 {
    font-size: 4rem;
}
.h2, h2 {
    font-size: 1.75rem;
}
.h3, h3 {
    font-size: 1.45rem;
}
.h5, .h5 {
    font-size: 1.15rem;
}

@media (max-width: 767.98px) {
    .h1, h1 {
        font-size: 3.3rem;
    }
    .h2, h2 {
        font-size: calc(1.45rem + .6vw);
    }
}
@media (max-width: 575.98px) {
    .decorated {
        max-width: 430px;
        padding: 0 15px;
    }
    .h1, h1 {
        font-size: 2.8em;
    }
    .h2, h2 {
        font-size: calc(1.35rem + .6vw);
    }
}

header {
    padding: 50px;
    padding-bottom: 100px;
}
@media (max-width: 575.98px) {
    header {
        padding: 17px;
        padding-bottom: 50px;
    }
}
    header #logo {
        display: block;
        width: 200px;
    }
    @media (max-width: 575.98px) {
        header #logo {
            width: 120px;
        }
        header #logo-claim {
            margin-top: 5px;
            width: 150px;
            font-size: 0.8em;
            line-height: 1.2em;
        }
    }
        header #logo img {
            width: 100%;
            height: auto;
        }
    header #language-navigation {
        position: absolute;
        top: 0;
        right: 0;
    }
    @media (max-width: 575.98px) {
        header #language-navigation {
            top: -6px;
            font-size: 0.8em;
        }
    }

@media (max-width: 575.98px) {  
    .container:not(header .container) {
        padding-left: 30px;
        padding-right: 30px;
    }
}

main img {
    max-width: 100%;
    height: auto;
    mask-image: linear-gradient(to left, black 50%, transparent 100%);
}
@media (max-width: 991.98px) {
    main img {
        display: block;
        width: auto;
        max-height: 175px;
        float: right;
    }
}
@media (max-width: 575.98px) {
    main img {
        margin: 0 auto;
        float: none;
    }
}

footer {
    background: #f5f5f5;
}
    footer #legal-navigation li {
        padding: 0 6px;
        }
        footer #legal-navigation li:first-child {
            padding-left: 0;
        }
        footer #legal-navigation li:last-child {
            padding-right: 0;
        }
        footer #legal-navigation li a {
            padding: 0;
        }
    footer .copyright,
    footer #legal-navigation {
        font-size: 0.8em;
        line-height: 1.2em;
    }

@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}