div.layout-main {
   background-image: url("https://www.bourgognefranchecomte.eu/pic/Grebe.2025.bg4.png"); 
   background-position:center 240px;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-color: rgba(0,0,0,0.1);
   background-blend-mode:darken;

}

div#galerieBFC div.vignette div.zcontent p:last-child {
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAjCAQAAACnBzsmAAACGklEQVRIx42WWZarMAwFCzpJE0IgJIyeev+7fB8MDzu2MfzWuZKla1kQ/364kfpduaZgGRUziksCe6FFMZ6DJSMahaY5DV8jMCgU9/jROwwKgUAy8xNhfxkxSAQCQxcDJ/QKCgSaZ5B9INE7KVH8+sE7cs1z+w2C3Ms2VniB4I+PP7pyQMNEReZha0dUohl82ZZoK1OF5JWYqUbw8NfUPr5GBDv7/BId/A6/IBzRPujYuyUq0by9ZSKjP3R0iZ4HrX9MQMacXWMSRaFzEmiJxJeHRonI7S4dT/f+4wO8LEtrf0fXYk1WAWR4YlyYrVz76KSwC/AKo7WDxsbFx3LLHJtuxxYopnCtHA+ocLNcdOlrxoUb168ApZWroQTylXW+wiqBZKJnZEIwM9Fad8e2oWQ4sAPNsSSVJbs4QaGQSBQayWvP+u2wamcVyp4KTwd1f4mhJwcyOmdk+th682wcXarYrs09Y3fXtwmyEsU1SVagmcjPi7Dl2yTKrs5/JMkqOueSx2RruDmPTEz2YRkszLaQMSQcbZG1J11UdnmV0mTdWRsqQrUsG/NpvpsfiyTZYrsS5sRgcr/EnxNhtRhsm2ImGv9zWKSmqPBagg0egrBCWHP19rX3iPAjlNE5y8f/baH42mTHffWzJ8LkWwMrRvQ6ldQ6n7zrDznNvnxurKQN7ZYZBTUfenre1KH9b30ASho6ejpaquMo/weEyVfKf3KqwAAAAABJRU5ErkJggg==) no-repeat left top;
    background-size: 43px 35px;
    border: none;
    padding: 14px 0 0 0;
    text-indent: 50px;
}

zdiv.row>div.col-lg-offset-1 {
    padding: 0;
    box-shadow: 0 0 0.5em black;
    background-color: #ffffff;
}


div#galerieBFC {padding:1em 2em;margin-bottom:5em; text-align:center; display: flex;
    flex-direction: row; flex-wrap: wrap; justify-content: space-around;}

div.vignette span {
    margin-top: 0.3em;
    display: block;
    line-height: 1.3em;
    font-size: 0.8em;
}
div.vignette span strong {font-size:0.9em}
div.vignette.actif span {display:none }
header.article-header {text-align:left; padding-bottom:1em !important}

h1.article-title {margin-left:0; display:inline-block; background-color:#fcd703; padding:0.5em 1em; border-radius:1em ;    
     font-size: 1.25em;   display: inline-block; }

.article-header:after { content:none !important; padding:0 !important}

a.btnPortraits {cursor:pointer; color:#555; text-decoration:none; display:inline-block;}

div.panel-body {list-style-position: inside !important; padding-top:1.75em !important; padding-bottom:1em !important;}
div.panel-article {display:none}
div.panel-article.panel-article-main {display:inherit}


div.vignette.actif div.zcontent  { position: relative }
div.vignette.actif div.zcontent span {
    display:inline-block; padding:0.25em 0.5em; color:#555!important;font-size:1.2em!important;
    background-color: white;
    position: relative; ztop:0;
    margin:0;
    white-space: nowrap; overflow: hidden;
}
div.vignette.actif div.panel-body {padding-top:0; font-size:0.86em}

div.vignette.actif div.panel-body ul {margin:0 0 1em 0 ; padding:0}

div.vignette a img {height:8em!important; border-bottom:5px solid #fff}
div.vignette a:hover img {opacity:0.8; border-bottom:5px solid #6dab68}
div.vignette a:hover span {color: #6dab68}
div.vignette.actif a img { border:none}
div.vignette.actif a:hover img {opacity:1}

div.vignette.actif a img {height:12em!important}
div.vignette.actif a {float:left;margin:2em 1em 0.1em 2.5em !important}
div.vignette.actif {background-color:#e5e5e5;margin:2em 0.5em; }

div.vignette {margin:0.5em 0.5em; padding:0; cursor:pointer }

div.vignette { display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch; 
    flex: 1 40%;
    min-width:22em;
    zmax-height:10em;
    zborder:1px solid #EEE;
}

div#galerieBFC div.vignette:last-child {max-width:50% !important}

div.vignette div.prems {zwidth:10%; display:flex; align-items: center;}
div.vignette div.prems img {max-height:5em; mzax-width:6em }

div.vignette div.deums  {width:35%;padding:0.25em 0.75em ; background-color:#0d4725;
display:flex; align-items: center; justify-content: flex-start;}

div.vignette div.deums span {display:block; margin:auto;text-align:center ; 
    color:white; line-height:1.5em;text-transform: capitalize; }


div.vignette div.trems  {width:55%;padding:0.25em 0.5em ; background-color:#37a864;
color:white; font-size:0.75em; display:flex; align-items: center;}

div.vignette.actif {flex: 1 100%;min-width: 90%;}
div.vignette.actif div.deums, div.vignette.actif div.trems   {display:none }
div.vignette.actif div.prems img {height:100%;max-height:none;  }

div.vignette.actif a.btnPortraits {display:none }
div.vignette.actif div.panel-body { padding:0.5em 1em 2em 1.5em !important }


header.article-header div.menu h2 img {width:80%; height:auto}
header.article-header div.menu.bfcbtn div img {zmax-height:20em; max-width:70%; margin:auto}
header.article-header div.menu {display: flex; flex-wrap:wrap;
    flex-direction: column-reverse;    align-items: center; 
  background-color: #0d4725; padding:2em 2em 1em 2em; border-radius: 1.25em;
    justify-content:space-around;background-color:#ffffff ; border-radius:0;  }

header.article-header div.menu.bfcbtn {padding:1em 2em 2em 2em; }

header.article-header div.menu.bfcbtn {border-bottom:1px solid #0d4725; }

header.article-header div.menu div {display:inline-block; text-align:center}

header.article-header div.menu div.first {width:50%; min-width:50%}

header.article-header {padding:0 0 1em 0 }
header.article-header p.intro {font-size:1.1em; color:#222; padding:1em 0.5em 0 0.5em}

header.article-header div.menu a {
  background-color: #0d4725; padding:0.5em 1.5em; border-radius: 1.25em;
  margin:0.75em 1em; display: inline-block; color:white; font-size:1.1em;
}
header.article-header div.menu a:hover {
    background-color: #33a661; text-decoration: none; }
header.article-header div.menu a i.fa {font-size:1.25em; margin-left:0.25em}
header.article-header div.menu h1 ,header.article-header div.menu h2 {
    margin-top:0.5em;
    margin-bottom: 0.5em;
}
header.article-header div.menu h1 {font-size:1.1em}


zheader.article-header div.menu.bfcbtn >div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    align-content: stretch;
}
zheader.article-header div.menu.bfcbtn >div a {text-align: center;}


@media (max-width:720px) {
    div.vignette a img {height:6em!important}
    div#galerieBFC {padding:1em 0;}
    div.vignette.actif a {float:inherit;}
    div.panel-body {list-style-position: outside !important; }
    header.article-header div.menu h2 img {width:90%; height:auto}
    header.article-header div.menu div.first {width:90%; min-width:90%}
}

@media (max-width:800px) {
    div#galerieBFC div.vignette:last-child {max-width:inherit!important}
}
@media (min-width:720px) {
    header.article-header div.menu { flex-direction:row; flex-wrap:nowrap; } 
    header.article-header div.menu div { text-align:left; } 
    header.article-header div.menu img {max-height:20em}
}
@media (max-width:754px) {
    div.vignette.actif div.zcontent span {
        position: inherit; 
        white-space: inherit; overflow:inherit;
    }
    div.vignette.actif {text-align:left}
}

@media (min-width:800px) {
    div#galerieBFC {padding:1em;}
    header.article-header div.menu img {max-height:25em}
}

@media (max-width:800px) {
    div.vignette.actif {    flex-wrap: wrap; }
    div.vignette.actif div.panel-body ul {margin:0 0 1em 1em}
}