@font-face {
  font-family: 'Lato';
  font-style: normal;
  src: url(Montserrat-Regular.ttf);
}

body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
h1 {font-size: 2em;}
h2 {font-size: 1.5em; font-weight: bold; margin-bottom: 0;}

body, html {
  height: 100%;
  color: #111;
  line-height: 1.8;
}

p {margin-top: 0;}

strong {
  background-color: #b32d00;
  color: white;
  padding: 0 .5em;
}

dt {font-weight: bold;}

footer p {
  display: inline;
  padding: 0 1em;
}
footer p a {
  text-decoration: none;
}

form input {
  margin-bottom: .5em;
}

#titre-index1 {margin-bottom: 0 !important; font-weight: bold;}
#titre-index2 {margin-top: 0 !important;}

#top-bar {
  padding: 0;
  margin: 0;
  position: fixed;
  z-index: 8;
  width: 100%;
  background-color: white;
}
#top-bar.top-bar-index {
  background-color: transparent;
  margin-left: 4px;
}

#mySidebar {
  position: fixed;
  top: 1em;
  left: 40px;
  z-index: 10;
  border: 1px solid black;
  background-color: white;
  padding-right: 1em;
}
#mySidebar menu, #mySidebar ul {
  list-style-type: none;
  margin-inline-start: -1em;
  margin-inline-end: 0px;
}
#mySidebar menu a:hover {
  border-bottom: 8px solid #b32d00;
  text-decoration: none;
}
#menu-bouton-fermer {
  font-size: 2em;
  float: right;
  cursor: pointer;
  color: #b32d00;
  font-weight: bold;
}

#embleme-mona {
  display: inline;
  position: relative;
  animation-name: animationEmbleme;
  animation-duration: 60s;
  animation-delay: 0s;
}

@keyframes animationEmbleme {
  0%   {left:1500px; top:0px;}
  100% {left:0px; top:0px;}
}

div#articles span {
  font-weight: bold;
}
div#articles .article {
  padding: 0 1em;
  border-radius: 10px;
}
div#articles .article:hover {
  box-shadow: 0 0 20px #999;
}
div#articles .menubas, div#articles p {
  margin: 0;
}

p#titrearticle {
  color: #b32d00;
  margin-bottom: -1em;
}

div#lien div {
  display: inline-block;
  padding: 2em;
}
div#lien p {
  display: block;
  width: 300px;
}
div#lien img {
  width: 300px;
}

footer {margin-top: 2em;}

#footer-titre {
  color: #b32d00;
  font-weight: bold;
  font-size: 1.2em;
}

.w3-content {
  max-width: 750px;
  margin-left: 10%;
}

#pageindex .w3-content {
  margin: 2em auto;
}

#pageindex #lien {
  max-width: 1500px;
  margin: 2em auto;
}

#trombi img {
  width: 120px;
  border-radius: 50%;
  display: inline;
  border: 1px solid #ddd;
  margin: 5px 4px;
/*  filter: contrast(120%);  */
}
#trombi img:hover {
  transform: scale(2.5);
  box-shadow: 0 0 20px #000;
  position: relative;
  z-index: 5;
/*  filter: contrast(130%); */
}

.home-icon-img {
  height: 6em;
  vertical-align: 
}
.home-icon-cell {
/*  padding: 4px 4px !important;  */
}
.sub-home-icon-cell {
  width: 42px !important;
}
.menu-button {
  color: #b32d00;
  background-color: white;
  font-size: 3em;
  border: none;
  margin: 0;
  padding: 0 .5em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;  
}

.titrepage {
  color: white;
  text-shadow: 0 0 10px #000;
  border: 2px solid white;
  padding-left: .3em;
  font-weight: bold;
}

.debutpage {
  height: 100px;
}

/* Tooltips */
.tooltip {
  display: inline-block;
  text-decoration: underline #b32d00 dotted 2px;
  cursor: help;  
}
.tooltiptext {
  display: block;
  position: absolute;
  visibility: hidden;
  width: 200px;
  line-height: 1.3em;
  background-color: #b32d00;
  color: #fff;
  text-align: left;
  border-radius: 4px;
  padding: 5px 10px 7px 10px;
  z-index: 1;
  margin-left: -100px;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  cursor: auto;  
}
q.tooltip::after, q.tooltip::before {
  content: "";
}


/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
  background-image: url('../photos/photoB-2.jpg');
  min-height: 100%;
}

/* Second image (Calendrier) */
.bgimg-2 {
  background-image: url('../photos/photoA.jpg');
  min-height: 600px;
}

/* Third image (Contact) */
.bgimg-3 {
  background-image: url('../photos/photo2.jpg');
  min-height: 600px;
}

/* 4th image (Liens) */
.bgimg-4 {
  background-image: url('../photos/photoH.jpg');
  min-height: 600px;
}

/* 4th image (Trombi) */
.bgimg-5 {
  background-image: url('../photos/photoI.jpg');
  min-height: 600px;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

.lirelasuite {color: #bf4040; text-decoration: none;}
.lirelasuite:hover::after {content: " ..."; text-decoration: underline;}



/* Titre sur la page d'accueil */
@media only screen and (max-device-width: 500px) {
  #titre-index2 {font-size: .9em !important;}
  #embleme-mona {display: none;}
}
@media only screen and (max-device-width: 500px) {
  #trombi img {width: 100px !important;}
}

/* illustrations */
.illustration, .illustration figcaption {
  margin: 0;
}

.illustration img {
  border: 1px solid black;
  padding: 3px;
}

.diaporama {
  display: inline-block;
  margin: 0;
}

.diapo1 {
  border-spacing: 8px;
  float: left;
}

.diapo2 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #ccc;
  background-color: #eee;
  width: 220px;
  height: 220px;
  border-radius: 4px;
}

.diapo2 img {
  cursor: pointer;
}

.diapo2 img:hover {
  opacity: .8;
}

.menubas {
  color: #b32d00;
  font-size: 1.2em;
  margin-top: 2em;
}
.menubas div {
  display: inline;
}
.menubas a {
  text-decoration: none;
}
.menubas a:hover {
  border-bottom: 8px solid #b32d00;
}
.menubas span {
  font-size: 1.2em;
  font-weight: bold;
  position: relative;
  top: +1px;
}