html, body { font-family: 'Lato', sans-serif; font-size: 16px; }

.marginnavbar { margin-top: 80px !important; }

h1, h2 { font-family: 'Dosis', sans-serif; }

.bg-666, .btn-666 { background-color: #666; color: white; }
.btn-666:hover { background-color: #888; color: white; }
.bg-eee { background-color: #eee; }

.fs-7 { font-size: .7em; }

a.link-stripped:link, a.link-stripped:active, a.link-stripped:visited { color: #27272a; text-decoration: none; border-bottom: 1px dashed #27272a; }
a.link-stripped:hover { color: #777; text-decoration: none; border-bottom: 1px solid #777; }

.img-xl, .img-lg, .img-xmd, .img-md, .img-sm, .img-xs, .img-xxs { width: 100%; height: auto; }
.img-xl { max-width: 1024px; }
.img-lg { max-width: 512px; }
.img-xmd { max-width: 384px; }
.img-md { max-width: 256px; }
.img-sm { max-width: 128px; }
.img-xs { max-width: 64px; }
.img-xxs { max-width: 32px; }

img.filter-white { filter: invert(99%) sepia(100%) saturate(16%) hue-rotate(214deg) brightness(104%) contrast(100%); }

blockquote p::before { content: '\201C'; }
blockquote p::after { content: '\201D'; }
blockquote.avis { /*font-family: 'Alegreya', sans-serif; */font-size: .8em; }

div.avis p { text-indent: 10%; text-align: justify; }
div.avis p:first-letter { font-size: 1.2em; letter-spacing: 0.1em; }

div.chartbarleftright { overflow: hidden; height: 31px; border-radius: 10px; border: medium solid black; background-color: darkred; color: white; }
div.chartbarleftright div.bar, div.chartbarleftright div.bar0, div.chartbarleftright div.bar5, div.chartbarleftright div.bar10, div.chartbarleftright div.bar15, div.chartbarleftright div.bar20, div.chartbarleftright div.bar25, div.chartbarleftright div.bar30, div.chartbarleftright div.bar35, div.chartbarleftright div.bar40, div.chartbarleftright div.bar45, div.chartbarleftright div.bar50, div.chartbarleftright div.bar55, div.chartbarleftright div.bar60, div.chartbarleftright div.bar65, div.chartbarleftright div.bar70, div.chartbarleftright div.bar75, div.chartbarleftright div.bar80, div.chartbarleftright div.bar85, div.chartbarleftright div.bar90, div.chartbarleftright div.bar95, div.chartbarleftright div.bar100 { height: 30px; background-color: darkblue; }
div.chartbarleftright div.bar0 { width: 0; }
div.chartbarleftright div.bar5 { width: 5%; }
div.chartbarleftright div.bar10 { width: 10%; }
div.chartbarleftright div.bar15 { width: 15%; }
div.chartbarleftright div.bar20 { width: 20%; }
div.chartbarleftright div.bar25 { width: 25%; }
div.chartbarleftright div.bar30 { width: 30%; }
div.chartbarleftright div.bar35 { width: 35%; }
div.chartbarleftright div.bar40 { width: 40%; }
div.chartbarleftright div.bar45 { width: 45%; }
div.chartbarleftright div.bar50 { width: 50%; }
div.chartbarleftright div.bar55 { width: 55%; }
div.chartbarleftright div.bar60 { width: 60%; }
div.chartbarleftright div.bar65 { width: 65%; }
div.chartbarleftright div.bar70 { width: 70%; }
div.chartbarleftright div.bar75 { width: 75%; }
div.chartbarleftright div.bar80 { width: 80%; }
div.chartbarleftright div.bar85 { width: 85%; }
div.chartbarleftright div.bar90 { width: 90%; }
div.chartbarleftright div.bar95 { width: 95%; }
div.chartbarleftright div.bar100 { width: 100%; }
div.chartbarleftright div.text { position: relative; top: -36px; float: left; width: 48%; padding: 5px 0 5px 2%; text-align: left; }
div.chartbarleftright div.image { position: relative; top: -36px; float: right; width: 48%; padding: 5px 2% 5px 0; text-align: right; }

ul.tags { list-style-type: none; margin: 0 auto; padding: 5px; text-transform: uppercase; text-align: center; }
ul.tags li { display: inline-block; margin: 10px 0; }
ul.tags li.niv1 { font-size: 1em; }
ul.tags li.niv2 { font-size: 1.2em; }
ul.tags li.niv3 { font-size: 1.4em; }
ul.tags li.niv4 { font-size: 1.6em; }
ul.tags li.niv5 { font-size: 1.8em; }
a.tag { margin: 0 5px; padding: 5px; border: 1px dashed #27272a; text-decoration: none; color: #27272a; }
a.tag:hover { border: 1px solid #777; }

#commentaires { padding: 20px; background-color: #fff; }

#comform { margin: 0; padding: 10px; background-color: white; }
#comform p.titre { margin: 0; padding: 0; text-align: right; font-size: 1.6em; border-bottom: 1px solid #bbb; }
#comform p.explications { margin: 10px 0 0 0; padding: 0; text-align: center; font-size: .8em; }
#comform span.rouge { color: red; }
#comform p.warning { text-align: center; font-size: 1.4em; }
#comform p.success { color: green; }
#comform p.error { color: red; }
#comform .hidden { display: none; }
#comform div.gauche { width: 48%; margin: 0 2% 0 0; }
#comform div.droite { width: 48%; margin: 0 0 0 2%; }
#comform label, #comform input, #comform textarea { display: inline-block; }
#comform label { margin: 15px 0 5px 0; font-size: 1.2em; }
#comform input, #comform textarea { box-sizing: border-box; width: 100%; border: 1px solid #bbb; padding: 5px 15px; }
#comform input[type="text"] { width: 100%; }
#comform button { margin: 10px; padding: 10px 15px; font-weight: bold; text-align: center; color: white; background-color: green; border: none; border-radius: 5px; }
#comform button:hover { cursor: pointer; }

@media all and (max-width: 992px) { /* version mobile */

html, body { font-size: 12px; }

.marginnavbar { margin-top: 60px !important; }

}