html, body {height: 100%;margin:0;padding:0}

.bfcnop {display:none}


#bfccontainer {  height:100%;width:100%; position:fixed;top:0;left:0;z-index:4098}
#map { height:100%;width:100%; }

#bfclogo {position:absolute;bottom:2em;right:0.6em;opacity:0.9;padding:0.5em;height:3em;z-index:4096;background-color:rgba(255,255,255,0.5);}
.bfclogo {height:3em;padding:0.5em;background-color:rgba(255,255,255,0.5)}

#bfcmenu {transition: all .3s ease; box-sizing: border-box;
    overflow-x:clip;overflow-y:scroll;width:30%;max-height:84%;
padding:0.5em 0;border-radius:0.5em 0 0 0.5em; 
position:absolute;top:4em;right:auto;left:70%;z-index:4096;
background-color:rgba(0,0,0,0.8)}
#bfcmenu img.logo {padding:0.25em 0;background-color:white;margin:1em 0 0.5em 0!important; max-width:100%;}
#bfcmenu h2 {color:white; text-align:center; margin:1em 0 0.5em 0!important; padding:0.5em 0!important;font-family:Arial, Helvetica, sans-serif;}
#bfcmenu ul {list-style:none!important;line-height:1.25em; font:14px/15px Arial, Helvetica, sans-serif;
margin:0;padding:0 0 0 0;color:white;}
#bfcmenu ul li {cursor:pointer;margin:0;padding:0.4em 0.2em 0.4em 0.5em!important;border-left:0.5em solid rgba(0,0,0,0)}
#bfcmenu ul li::before,div.bfcpopup ul li::before {content:none!important;}
#bfcmenu ul li.actif,#bfcmenu ul li:hover {border-left:0.5em solid #19b0ad;background-color:#555;}
#bfcmenu ul li span.extra {display:none}
#bfcmenu ul li span.extraout {display:block;padding:0.2em 0;font-size:0.9em;color:#f90;}


#bfcclose {transition: all .6s ease; z-index:4100;position:absolute;top:0.25em;right:0.25em; opacity:0.85;
    height: 2em; cursor:pointer;
    width: 2em;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1em;
    display: flex;}
#bfcclose:hover {background-color: #f90;}

#bfcmenuclose {transition: all .6s ease; display:flex;
    opacity:0.7;line-height:1em!important;z-index:4099;position:absolute;top:3.3em;right:0.25em;
     border-radius:1.5em;cursor:pointer;color:white;display:block;margin:0 0 0.25em 0;
     padding:0.25em;height:1.7em;width:1.7em;text-align:center;background-color:rgb(224, 197, 78);}
#bfcmenuclose img {width:100%;height:100%}
#bfcmenuclose:hover {opacity:1;background-color:#f90;}

div.leaflet-marker-pane img {transition: all 0.3s ease;}
div.leaflet-popup-content-wrapper {padding:0!important}
div.leaflet-popup-content{padding:0;margin:0}
div.leaflet-popup a.leaflet-popup-close-button {color:white!important}

div.bfcpopup {padding:0;margin:0;min-width:10em;font-size:13px}
div.bfcpopup strong {display:block;border:0;border-radius:0.5em 0.5em 0 0 ;font-size:1.2em;
    margin:0;padding:0.75em 1.5em 0.75em 1em;background-color:#19b0ad;color:#fffFFF}
div.bfcpopup ul {list-style-type:none; padding:0em 0.5em 1.5em 1em!important;margin:0 0 0 0.5em!important;line-height:1.75em}
div.bfcpopup ul li {padding:0.25em 0!important;margin:0!important;line-height:1.75em}
div.bfcpopup ul li::marker ,div.bfcpopup ul li a, div.bfcpopup ul li span.legend {  color:#02a89d;}
div.bfcpopup ul li a {  color:#0a4f54;}
div.bfcpopup ul li a:hover {  color:#c20;}
div.bfcpopup ul li img.link { height:18px;vertical-align:text-bottom}

div.bfcpopup img.visuel {margin:0;border:0;max-width:100%;zwidth:100%}
div.bfcpopup div.visuel {  display:flex;justify-content: center;
    align-items: center;margin:0;border:0;max-width:100%;height:12em;overflow: hidden;}

div.leaflet-control-attribution {font-size:14px!important ; max-height:1.5em}
div.leaflet-bottom.leaflet-left{font-size:14px!important}

#tarteaucitronIcon {z-index:4000;}


div.bfcseek {display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    padding:1em 0;
}
div.bfcseek input {padding:0.2em 0.5em;border:1px solid white; opacity:0.7; border-radius:0.2em;margin-right:0.25em;
font-family:Arial;font-size:14px ; height:1.8em}
div.bfcseek  span.out {display:flex;font-family:Verdana, Geneva, Tahoma, sans-serif; font-size:0.7em;background-color:white;
align-items: center; opacity:0.8; height:2em; margin-left:0.5em; padding:0.2em 0.5em;border-radius:1em}
div.bfcseek input {width:67%}

.info .bfc {
padding: 6px 8px;
font: 15px/17px Arial, Helvetica, sans-serif;
background: rgba(0,0,0,0.7); color:white;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
border-left:0.5em solid #02a89d;
z-index:5000; margin:0 auto;
}
.info {
    text-align:center;
    box-sizing:border-box;
    width:100%;
    display:block;
}

svg.leaflet-attribution-flag {display:none}

#bfcmenu.off {right:auto;left:100%;}

div.leaflet-bottom.leaflet-left { display: flex;flex-direction: row-reverse;}
div.leaflet-control-layers-base label {min-width:15em!important}
div.leaflet-control-layers-base label:hover {color:#f90}


@media (min-width:1000px) {
  #bfcmenu {width:25%;left:75%; }
}
@media (min-width:1300px) {
    #bfcmenu {width:20%;left:80%; }
}

@media (max-width:780px) {
    #bfcmenu { height:25%;top:75%;left:0;width:100%;border-radius:0;padding-bottom:1em}
    #bfcmenu.off {width:100%;left:auto;top:100%}
    #bfcmenu img.logo {float:right;margin:0 0.25em 0.25em 0.25em;height:3em;width:auto!important;}
    #bfcmenuclose {top:73.5%;right:0.25em;}
    div.leaflet-bottom.leaflet-left {bottom:auto;top:1em;left:4em;        
        display: flex;flex-direction: row-reverse;}
    div.info {margin:0.25em 0 }
    .leaflet-top, .leaflet-bottom {z-index:10000}
    #bfcmenu ul li {padding-left:1em!important}
    #bfcmenuclose.off {background-color:#f90;top:auto; bottom:1em;}
    #nopbfcmenuclose {right:auto; left:0.5em;}
    div.bfcseek {        padding:0.5em 0; }
    div.bfcseek input {width:67%}
}

@media screen and (max-width: 768px) {
    .paragraph img, .paragraph img.logo{
        float: none;
        width: inherit!important;
    }
}

@media (max-width:400px) {
    #bfcmenu img.logo {display:none;}
}