body {
    background-color: #0579ab;
}

.container {
    background-color: #055b80;
    box-shadow: 1px -1px 10px -1px rgba(0,0,0,0.53);
    -webkit-box-shadow: 1px -1px 10px -1px rgba(0,0,0,0.53);
    -moz-box-shadow: 1px -1px 10px -1px rgba(0,0,0,0.53);
}

.color-header {
    background-color: #055b80;
    z-index: 1;
}

/* couleurs offcanvas */
.offcanvas-header {
    background-color: #054561;
}

.offcanvas-body {
    background-color: #076791;
}


/* XS */
@media (max-width:575px) {
    .footer-logo {
        height: 25px;
    }

    /* taille hamburger */
    .bi-list {
        width: 2em;
    }

    .offcanvas {
        width: 259px;
    }
}

/* SM */
@media (min-width:576px) and (max-width:767px) {
    .footer-logo {
        height: 25px;
    }

    /* taille hamburger */
    .bi-list {
        width: 2em;
    }

    .offcanvas {
        width: 259px;
    }
}

/* MD */
@media (min-width:768px) and (max-width:991px) {
    .footer-logo {
        height: 30px;
    }

    /* taille hamburger */
    .bi-list {
        width: 2em;
    }

    .offcanvas {
        width: 259px;
    }
}

/* LG */
@media (min-width:992px) and (max-width:1199px) {
    .footer-logo {
        height: 30px;
    }

    /* taille hamburger */
    .bi-list {
        width: 2.5em;
    }

    .offcanvas {
        width: 259px;
    }
}

/* XL */
@media (min-width:1200px) and (max-width:1399px) {
    .footer-logo {
        height: 30px;

        /* taille hamburger */
        .bi-list {
            width: 2.5em;
        }

        .offcanvas {
            width: 259px;
        }
    }

    /* XXL */
    @media (min-width:1400px) {
        .footer-logo {
            height: 30px;

            /* taille hamburger */
            .bi-list {
                width: 2.5em;
            }

            .offcanvas {
                width: 300px;
            }
        }
    }
}