:root {
        --text: #565656;
--links: #54A5EA;
--titles: #000000;
--page-background: #F6F8FB;
--highlight: #0086D6;
--boxes-background: #FFFFFF;
--boxes-border: #CBD2DB;
--section-titles: #FFFFFF;
--section-titles-background: #54A5EA;
--header-background: #FFFFFF;
--header-links: #000000;
--footer-background: #FFFFFF;
--footer-links: #54A5EA;
    }
    
/* ==========================================================================
LIGHT BIG HEADER THEME
========================================================================== */
/*
The CSS rules below apply to the whole portal.
Some suggestions:
- You should add below CSS rules that apply to elements that show up in all pages (such as the
header or footer) or built-in pages such as the Explore page, the MapBuilder, the ChartBuilder and the API
page.
- For CSS that applies to a specific user-created page, add it directly in the "CSS"
tab in the page edit section. This makes it easier to keep track of which classes
are page specific and which ones are generic and apply to the whole portal.
*/
/* Portal Header - Logo and main navigation
   ========================================================================== */
   .portal-header {
    padding: 0;
    border-bottom: 1px solid #DEE5EF;
    height: auto;
}
.ods-responsive-menu--collapsed.portal-header {
    height: 60px;
}
.portal-header-logo-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 125px;
    padding-bottom: 26px;
}
/* Logo */
.ods-front-header__logo {
    display: block;
    width: auto; /* Logo width */
    height: 50px; /* Logo height */
    margin-left: 13px;
    margin-right: 13px;
}
/* Logo size in responsive mode */
.ods-responsive-menu--collapsed .ods-front-header__logo {
    width: auto; /* Logo width in mobile mode */
    max-height: 48px; /* Logo max height in mobile mode */
}
.portal-navigation {
    margin: 0;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.ods-front-header__menu {
    margin: 0 auto;
}
.ods-front-header__menu-item-link {
    border: none;
    font-size: .733rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    line-height: 59px;
    padding: 0 13px;
    opacity: 1;
}
.ods-front-header__menu-item-link:hover,
.ods-front-header__menu-item-link--active {
    background-color: #0086D6;
    color: #FFFFFF; /* Header link color when the link is active */
}
/* Management Menu
   ========================================================================== */
.ods-front-header__management-menu {
    position: absolute;
    top: 0;
    right: 13px;
    line-height: 59px;
    font-size: .833rem;
}
.ods-front-header__management-menu-item {
    margin: 0 0 0 26px;
}
.ods-front-header__management-menu-item-link--active,
.ods-front-header__management-menu-item-link:hover {
    border: none;
    color: #0086D6;
}
.ods-front-header__account-avatar-container {
    margin-bottom: 0;
    vertical-align: middle;
}
.ods-front-header__management-menu-item--backoffice {
    padding: 0;
    border: none;
    background: none;
}
/* Button "Back Office" in header */
.ods-front-header__management-menu-item--backoffice .ods-front-header__management-menu-item-link--backoffice {
    display: inline-block;
    color: #142E7B;
    border: 1px solid #142E7B;
    padding: 5px;
    background-color: transparent;
    border-radius: 4px;
}
.ods-front-header__management-menu-item-link--backoffice:hover {
    color: #FFFFFF;
    background-color: #142E7B;
}
.ods-front-header__management-menu-item-link {
    padding-bottom: 0;
}
/* Header - Mobile (small screens)
   ========================================================================== */
.ods-responsive-menu-placeholder.ods-responsive-menu-placeholder--active {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.ods-responsive-menu--collapsed .ods-responsive-menu-collapsible__content {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.ods-responsive-menu-collapsible--collapsed .portal-header-logo-container {
    display: none;
}
.ods-responsive-menu-collapsible--collapsed .ods-front-header__menu-item-link {
    width: 100%;
    border-left: none;
}
.ods-responsive-menu-collapsible--collapsed .portal-navigation,
.ods-responsive-menu-collapsible--collapsed .ods-front-header__menu,
.ods-responsive-menu-collapsible--collapsed .portal-management-menu {
    width: auto;
}
/* Management Menu - Mobile (small screens)
   ========================================================================== */
.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu {
    padding: 13px;
}
.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu-item {
    padding-left: 0;
}
.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu-item--backoffice {
    padding: 0;
}
.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu-item-link--backoffice {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.home-header {
	margin-bottom: 20px;
    /* Change this value to make the background image taller or smaller */
    height: 350px;
    /* Background color before image loads */
    background-color: #0086D6;
    background-size: cover;

    /* You can replace the background-image by uploading an image to the portal assets
    and replacing the text in simple quotes below or use the URL of an image on the web */
    
    /* reprise de l'image d'en tête du site internet officiel de la ville pour uniformiser la charte graphique */
        background-image: url('https://www.saint-maur.com/fileadmin/templates/master/assets/assets_site_saint-maur/img/image_bandeau_accueil.jpg');
        /* image gratuite alternative sur la Marne entre Créteil et Saint-Maur*/
        /*('https://www.freenews.fr/wp-content/uploads/2017/01/Marne-Creteil-Saint-Maur-Aout2013.jpeg');*/

    /* Position of the background-image on x y axis. Change these values to
    modify where the image is centered.
    */
    background-position: center center;
}

/* DESKTOP SPECIFICS - STYLE OF ODS HEADER
========================================================================== */



.ods-front-header__portal-brand {
    display: flex;
    height: 40px;
    position: relative;
    top: 0;
}

/* DESKTOP SPECIFICS - STYLE OF DROPDOWN MENU
========================================================================== */

.ods-front-header__menu-item {
    position: relative;
}

.ods-front-header__menu-item-link--active {
    border-bottom: 0px solid;
    color: #FFF;
    opacity: 1;
}

li.dropdown-menu i {
    font-size: 1.2em;
    margin-left: 13.5px;
    color: #000000;
}

ul.dropdown-menu-submenu {
    display: none;
    margin: 0;
    padding: 22px 28px;
    list-style: none;
    background-color: #FFFFFF; 
}

ul.dropdown-menu-submenu.dropdown-menu-submenu__active {
    display: inherit; }

li.dropdown-menu-submenu-item {
    margin-bottom: 26px; }

li.dropdown-menu-submenu-item:last-child {
    margin-bottom: inherit; 
}

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) ul.ods-front-header__menu {
    display: flex;
    align-items: center; 
}

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) ul.dropdown-menu-submenu {
    position: absolute;
    top: 55px;
    left: 1px;
    z-index: 1001;
    filter: drop-shadow(0px 14px 8px rgba(37, 48, 59, 0.1)); 
}

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) .ods-front-header__menu .custom-menu-item-submenu {
    width: auto !important;
    top: 55px !important;
    left: 1px !important;
    padding: 20px !important;
    filter: drop-shadow(0px 0px 8px rgba(37, 48, 59, 0.2)) !important; }

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) .ods-front-header__menu .dropdown-menu-submenu a {
    white-space: nowrap; 
}


/* MOBILE SPECIFICS
========================================================================== */
.ods-responsive-menu-placeholder.ods-responsive-menu-placeholder--active {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.ods-responsive-menu--collapsed .ods-responsive-menu-collapsible__content {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.ods-responsive-menu-collapsible--collapsed .ods-front-header__logo {
    display: none;
}

.ods-responsive-menu-collapsible--collapsed .ods-front-header__menu,
.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu
{
    width: 100%;
}