body {
    background: linear-gradient(135deg,rgba(var(--breto-azure-rgb), .7) 0%,rgb(242,239,208) 53%,rgba(168,209,173, .7) 100%);
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: "Noto Sans", sans-serif;
    font-weight: 300;
    height: auto; /* keep this for the header sticking properly past the fold */
}

.c-header-container {
    width: 100%;
    /* background: #B7CFDC; */
    /* background: linear-gradient(135deg,rgb(190,228,230) 0%,rgb(242,239,208) 53%,rgb(168,209,173) 100%); */
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 15px 40px; /** @todo make it stick to the top of the page when scrolling to the bottom **/
    max-width: 1480px;
    /*position: sticky;*/
    /*top: 0px;*/
}

.c-header {
    width: 100%;
    background: #fff;
    color: rgb(121,124,128);
    display: flex;
    text-align: center;
    place-items: center;
    border-radius: 1.4rem;
    justify-content: space-between;
    padding: 10px;
    /* box-shadow: 4px 6px 39px 0px rgba(197,197,197,1); */
    user-select: none;
    cursor: default;
    /* container-type: inline-size; */
}

.c-content-container-wrapper {
    width: 100%;
    max-width: 1480px;
    padding: 15px 40px; /** @todo make it stick to the top of the page when scrolling **/
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}

.c-content-container {
    background: #fff;
    color: rgb(121,124,128);
    width: 100%;
    border-radius: 2rem;
    box-shadow: 4px 6px 39px 0px rgba(197,197,197,1);
    padding: 20px;
    display: flex;
    justify-content: center;
}

.c-above-fold {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.no-scroll {
    overflow: hidden;
}


.c-footer {
    background-color: #fff;
    height: 200px;
    display: flex;
    width: 100%;
    flex-direction: column;
    margin: 0 auto;
    padding: 15px 40px; /** @todo make it stick to the top of the page when scrolling **/
    /* border-top: 1px solid black; */
    margin-top: 100px;
}

.c-footer-elements {
    display: flex;
    max-width: 1480px;
    margin: 0 auto;
    margin-top: 40px;
    height: 100%;
    width: 100%;
    justify-content:space-around;
}

.c-footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
}

.c-footer p {
    margin: 0;
}

.c-footer-logo-section {
    display: flex;
    justify-content: flex-start;
    align-items: center;

}

.c-footer-logo {
    height: 65px;
    width: 300px;
    padding: 0;
    margin-block: 0;
    background: url("../images/logo-diagnostics-f997bca921108f95dcf68661e69655bb.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.c-footer-links {
    display: flex;
}

.c-footer-links__link {
    margin: 10px;
    color: var(--breto-cool-gray);
    text-decoration: none;
}

.c-footer-links__link:hover {
    color: var(--breto-accent-rgb);
}


.c-copyright {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: .9rem;
    color: rgba(0,0,0,.5);
}


.c-content {
    /* max-width: 500px; */
}

.c-logo {
    width: 160px;
    height: auto;
    padding: 0;
    margin-block: 0;
}

.cta-button {
    border-radius: 100px;
    font-style: normal;
    font-weight: 200;
    letter-spacing: 0.01em;
    padding: 10px;
    text-transform: none;
    color: #fff;
    text-decoration: none;
    background: var(--breto-azure);
    font-weight: bold;
}

svg > .svg-wind {
    fill: rgb(114, 194, 215);
}

svg > .svg-text {
    stroke-dasharray: 911;
    stroke-dashoffset: 911;
    stroke-width: 1px;
    stroke: rgb(121,124,128);
    fill: rgb(121,124,128);
    fill-opacity: 0;
    animation: drawPath 5s linear forwards;
}

@container msg (width < 550px) {
    .c-message__body {
        padding: calc(1.5rem + 1.4285cqw); /* taken by using 1.5 rem and the rest is the remainder of the computed size, divided by the container size*/
    }
}

@keyframes drawPath {
    from { stroke-dashoffset: 911; fill-opacity: 0; stroke-width: 1px; }
    50% {fill-opacity: 1; stroke-width: 0.5px; }
    to { stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0px; }
}


@media only screen and (max-width: 768px) {
    .c-nav-burger {
        display: block;
    }
    .c-header-container {
        padding: 15px 20px;
    }

    .c-content-container-wrapper {
        padding: 15px 20px;
    }

    .c-footer {
        padding:10px;
    }

    .c-footer-elements {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

    .c-footer-links {
        font-size: .7rem;
    }

    .c-footer-logo {
        display: flex;
        justify-content: center;
        background-position: center;
    }

    .c-copyright {
        display: none;
    }

    /*.c-content-container p {*/
    /*    font-size: 1.1rem;*/
    /*}*/
}



/* Have animations turned off for devices with reduced motion (to be polite) */
@media (prefers-reduced-motion) {
    *,
    ::before,
    ::after {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
    }
}