body {
  width: 97% ;
  margin : 0.2%;
  padding : 1%;
  border-color : #cc0000;
  background-color : #ffffff;
  color : #000000;
  border: 1px solid red;
  font : 1em Arial,geneva,helvetica;
}
p, ul, ol {
  font : 1em Arial,geneva,helvetica;
}

li {
   font : bold 1em Arial,geneva,helvetica;
}
ul {
    font : bold 1em Arial,geneva,helvetica;
    list-style-image: url('feuillette.gif');
}
p.adresse {
    font-style: italic;
}
p.photo {
    text-decoration: underline;
    font : 0.7em Arial,geneva,helvetica;
}


h1 {
  font : bold 2em Arial, Helvetica, geneva;
  text-align: center;
}
h2 {
  font : bold 1.6em Arial, Helvetica, geneva;
  text-align: center;
}
img {
    width: 100%;
    height: auto;
}
img.counter {
    width : 100px;
}
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: stretch;
    background-image: url("fond_jlm.jpg");
    background-position:  left top;
    background-repeat: repeat;
    padding: 1em;
}

.flex-header {
    background-color: white;
    width: 98%;
    border-style: solid;
    border-width: 1px;
    /* height: 100px; */
    margin: 0.5em;
    padding-top: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
}

.flex-item {
    background-color: white;
    /*width: 45%; */
    -webkit-flex: 1;
    flex: 1;
    min-width: 440px;
    border-style: solid;
    border-width: 1px;
    /*height: 100px;*/
    margin: 0.5em;
    padding-top: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
}

a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 1px;
    padding: 1px;
    transition: 0.5s;
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

a:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}