#grad1 { background-image: linear-gradient(#191160, #2B1DA6 50%, #191160); vertical-align: middle; position: fixed; top: 0; width: 100%; z-index: 100; float: left; clear: both; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7); }

.menu2-rechercher { color: white; font-size: 17px; font-weight: 400; text-decoration: none; text-align: center; display: block; padding: 0 20px 0; float: right; border-left: 1px solid #000; }

.menu2 { color: white; float: right; display: block; text-align: center; padding: 5px 20px; text-decoration: none; font-size: 18px; font-weight: 400; border-left: 1px solid #000; }

.menu2:hover { font-size: 18px; color: white; background-image: linear-gradient(#302870, #6a60c1 50%, #302870); /* For IE8 and earlier */
 }

.menu2-over { color: white; background-image: linear-gradient(#302870, #6a60c1 50%, #302870); float: right; display: block; text-align: center; padding: 5px 20px; text-decoration: none; font-size: 18px; font-weight: 400; border-left: 1px solid #000;
 }

.menuprincipal { font-size: 18px; color: white; text-decoration: none; }

.menuprincipal:hover { font-size: 18px; color: #f4eebe; text-decoration: none; }

.menu2-g { text-align: center; vertical-align: middle; display: block; padding: 2px 20px 0; float: left; }

.banniere { background-image: url(../images/vue-de-la-ville-9.jpg); background-repeat: no-repeat; background-position: center 50%; background-size: cover; height: 700px; z-index: 10; clear: left; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7); }

.logo-corpo { position: relative; top: 60px; z-index: 20; clear: both; }

.rangee { text-align: center; vertical-align: middle; position: relative; top: 340px; min-width: 1000px; max-width: 1200px; margin-right: auto; margin-left: auto; display: flex; }

.rangee-logos { text-align: center; vertical-align: middle; position: relative; top: 340px; min-width: 1000px; max-width: 1280px; margin-right: auto; margin-left: auto; display: flex; }

.colonne-33 { vertical-align: middle; width: 33.33%; height: auto; }

.tooltip { position: relative; cursor: pointer; display: inline-block; }

.tooltip .tooltiptext { visibility: hidden; width: auto; background-color: #1f1578; color: #fff; font-size: 16px; text-align: center; border-radius: 6px; padding: 2px 10px; position: absolute; z-index: 1; top: 90%; left: 45%; margin-left: -60px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); }

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip2 { position: relative; cursor: pointer; display: inline-block; }

.tooltip2 .tooltiptext { visibility: hidden; width: auto; background-color: #1f1578; color: #fff; font-size: 16px; text-align: center; border-radius: 6px; padding: 2px 10px; position: absolute; z-index: 1; top: 90%; left: 38%; margin-left: -60px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); }

.tooltip2 .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip2:hover .tooltiptext {
  visibility: visible;
}

.logos { background-color: rgba(255, 255, 255, 0.7); text-align: center; vertical-align: middle; width: 310px; height: 120px; margin: auto; border: solid 3px #50b748; border-radius: 40px 15px; box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); }

.opa {
  opacity: 1;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

.opa:hover {
  opacity: 0.8;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

.opa2 {
  opacity: 1;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

.opa2:hover {
  opacity: 1;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

.rangee2 { display: flex; margin-right: auto; margin-left: auto; min-width: 1000px; max-width: 1400px; vertical-align: middle; }
/* Clear floats after the columns */
. rangee:after {
  content: "";
  display: table;
  clear: both;
}

. rangee2:after { display: table; clear: both; content: ""; }
/* Responsive columns */
@media screen and (max-width: 600px) {
  .colonne {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

* {
  box-sizing: border-box;
}

.rangee-accueil {
  display: flex;
  flex-wrap: wrap;
  margin-right: auto;
  margin-left: auto;
  max-width: 1280px;
}

.colonne-33b { flex: 33.33%;
  padding: 0 30px 0; }

.resume2 { background-color: rgba(255, 255, 255, 0.7); padding: 0 20px 20px; height: auto; vertical-align: top; border: solid 3px #1f1578; border-radius: 40px 15px 70px; box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); }

.h2-titre-vert { color: #50b748; text-shadow: 2px 2px 4px rgba(0, 0, 0, .2) }

.piedpage { text-align: center; position: relative; top: -10px; }

.haut { color: white; font-size: 16px; background-color: #1f1578; position: relative; padding: 5px 15px 20px; border-radius: 30px 30px 0px 0px; }

.haut:hover { color: #f4eebe; font-size: 16px; opacity: 0.8;
  filter: alpha(opacity=100); /* For IE8 and earlier */
 }

.Copyright2 { color: white; font-size: 15px; font-weight: 400; background-color: #50b748; text-align: center; position: relative; padding: 2px; z-index: 10; max-width: 700px; margin: 9px auto 30px; border-radius: 40px 15px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); }

a { color: #42833b; font-size: 20px; line-height: 28px; text-decoration: underline; }
a:hover { color: #50b748; font-size: 20px; line-height: 28px; }

body { font-family: "Open Sans", sans-serif; font-size: 20px; color: black; line-height: 28px; background: #dcdcdc url(../images/route.svg) no-repeat fixed center top; margin-top: auto; margin-right: auto; margin-left: auto; background-size: cover; }

.photo-accueil { background-color: #50b748; text-align: center; margin: 10px 0 0 10px; padding: 2px; border: solid 3px #1f1578; box-shadow: 3px 3px 10px grey; border-radius: 50%; }


 		<!--/* fin style accueil */-->

.banniere-adapte { background-image: url(../images/Autobus-transport-adapte.jpg); background-repeat: no-repeat; background-position: center 50%; background-size: cover; height: 400px; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.7); }

.container { min-width: 1000px; max-width: 1400px; margin-right: auto; margin-left: auto; padding-top: 10px; padding-bottom: 10px; }

.Copyright { color: white; font-size: 15px; font-weight: 400; background-color: #191160; text-align: center; position: relative; z-index: 10; max-width: 700px; margin: 9px auto 30px; padding: 2px 4px; border-radius: 40px 15px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); }

table { font-family: "Open Sans", sans-serif; font-size: 20px; color: black; line-height: 28px; }

li { font-weight: normal; margin: 0 0 0.7em; }

.text { font-weight: 400; background-color: rgba(255, 255, 255, 0.8); width: auto; height: auto; margin: 40px 60px 20px; padding-right: 40px; padding-bottom: 20px; padding-left: 40px; border: solid 4px #50b748; border-radius: 40px 15px 70px; box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); }

.texte-gris-fonce { color: #323232; }

h2 { color: #1f1578; font-size: 1.4em; line-height: 26pt; font-weight: 700; }

.rangee-adapte { position: relative; top: 80px; width: auto; margin-right: auto; margin-left: auto; padding-right: 100px; padding-left: 100px; }

.photo-adapte { background-color: #323232; position: relative; right: -40px; float: right; margin: 10px 0 0 10px; padding: 2px; border: solid 3px #50b748; box-shadow: 3px 3px 10px grey; border-radius: 50%; }

.photo-adapte-2 { background-color: #323232; position: relative; top: 0px; right: -40px; float: right; margin: 0 0 0 10px; padding: 2px; border: solid 3px #50b748; box-shadow: 3px 3px 10px grey; border-radius: 50%; }


.hautadapte { color: white; font-size: 16px; background-color: #50b748; position: relative; padding: 5px 15px 20px; border-radius: 30px 30px 0px 0px; }

.hautadapte:hover { color: #f4eebe; font-size: 16px; opacity: 0.8;
  filter: alpha(opacity=100); /* For IE8 and earlier */
 }

 		<!--/* fin style adapté */-->
 		
.banniere-collectif { background-image: url(../images/Lac-St-Louis.jpg); background-repeat: no-repeat; background-position: center 50%; background-size: cover; height: 400px; z-index: 10; clear: left; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7); }
 		
.photo-collectif { background-color: #50b748; position: relative; right: -40px; float: right; margin: 10px 0 0 10px; padding: 2px; border: solid 3px #1f1578; box-shadow: 3px 3px 10px grey; border-radius: 50%; }

.photo-collectif-2 { background-color: #50b748; float: left; margin: 10px 30px 0 0; padding: 2px; border: solid 3px #1f1578; box-shadow: 3px 3px 10px grey; border-radius: 50%; }

.texte-bleu { color: #1f1578; }

 		<!--/* fin style collectif */-->

.banniere-intermunicipal { background-image: url(../images/Autobus-transport-intermunicipal-2.jpg); background-repeat: no-repeat; background-position: center 50%; background-size: cover; height: 400px; z-index: 10; clear: left; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7); }

.rangee-intermunicipal { position: relative; top: 226px; width: auto; margin-right: auto; margin-left: auto; padding-right: 100px; padding-left: 50px; }
 		
.photo-intermunicipal { background-color: #9bc459; float: right; margin: 10px 0px 0 10px; padding: 2px; border: solid 3px #4fabe7; box-shadow: 3px 3px 10px grey; border-radius: 50%; }

.tableau-intermunicipal { color: #3b84b1; }

 		<!--/* fin style intermunicipal */-->

.banniere-recherche { background-image: url(../images/vue-aerienne-de-la-tuque-2.jpg); background-repeat: no-repeat; background-position: center 50%; background-size: cover; height: 400px; z-index: 10; clear: left; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7); }

 		<!--/* fin style recherche */-->

.banniere-joindre { background-image: url(../images/vue-de-la-ville-et-usine.jpg); background-repeat: no-repeat; background-position: center 50%; background-size: cover; height: 400px; z-index: 10; clear: left; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7); }

.rangee-joindre { position: relative; top: 150px; width: auto; margin-right: auto; margin-left: auto; padding-right: 100px; padding-left: 100px; }

.text-joindre { font-weight: 400; background-color: rgba(255, 255, 255, 0.8); width: auto; height: auto; margin: 40px 60px 20px; padding-right: 40px; padding-bottom: 20px; padding-left: 40px; border: solid 4px #1f1578; border-radius: 40px 15px 70px; box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); }

 		<!--/* fin style joindre */-->
 		
 		
.banniere-qui-sommes-nous { background-image: url(../images/Vue-aerienne-de-lhopital.jpg); background-repeat: no-repeat; background-position: center 50%; background-size: cover; height: 400px; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.7); }
	
  		<!--/* fin style qui-sommes-nous */-->	
  		
  		
.banniere-equipe-ca { background-image: url(../images/Coucher-de-soleil-sur-le-St-Maurice.jpg); background-repeat: no-repeat; background-position: center 50%; background-size: cover; height: 400px; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.7); }
	
  		<!--/* fin style equipe-ca */-->	 			
 		

.banniere-politiques { background-image: url(../images/Hotel-de-ville-de-La-Tuque-nouvelliste.jpg); background-repeat: no-repeat; background-position: center 50%; background-size: cover; height: 400px; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.7); }
	
  		<!--/* fin style politiques */-->	 			


.banniere-actualites { background-image: url(../images/Vue-de-la-montagne-de-ski.jpg); background-repeat: no-repeat; background-position: center 50%; background-size: cover; height: 400px; z-index: 10; clear: left; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7); }

#vignette { background-color: #323232; position: relative; right: -40px; float: right; margin: 10px 0 0 10px; padding: 2px; border: solid 3px #50b748; border-radius: 50%; }

.photo { background-color: #50b748; border: solid 3px #1f1578; box-shadow: 3px 3px 10px grey; border-radius: 50%; padding: 2px; }

.date { color: #595959; font-size: 18px; font-style: oblique; margin-bottom: -20px; }

.titre-article { font-size: 1.3em; font-weight: 700; color: #0000b1; line-height: 1.3em; text-decoration: underline; }

.titre-article:hover { font-size: 1.3em; font-weight: 700; color: #3d8c37; line-height: 1.3em; }

.titre-article-vert { font-size: 1.3em; font-weight: 700; color: #42833b; line-height: 1.3em; text-decoration: underline; }

.titre-article-vert:hover { font-size: 1.3em; font-weight: 700; color: #50b748; line-height: 1.3em; }


.liens-actualites { color: #0000b1; }

.liens-actualites:hover { color: #3d8c37; }

.liens-actualites-vert { color: #42833b; }

.liens-actualites-vert:hover { color: #50b748; }


.text-actualites { font-weight: 400; background-color: rgba(255, 255, 255, 0.8); width: auto; height: auto; margin: 20px 60px 0; padding-right: 40px; padding-bottom: 20px; padding-left: 40px; border: solid 4px #50b748; border-radius: 40px 15px 70px; box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); }

.text-actualites-bleu { font-weight: 400; background-color: rgba(255, 255, 255, 0.8); width: auto; height: auto; margin: 20px 60px 0; padding-right: 40px; padding-bottom: 20px; padding-left: 40px; border: solid 4px #1f1578; border-radius: 40px 15px 70px; box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); }

.pagination { color: black; background-color: white; text-align: center; position: relative; width: 600px; padding: 2px; z-index: 10; margin: 30px auto 50px; border-radius: 15px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); white-space: nowrap; }

 		<!--/* fin style actualités */-->

.titre-actualites-article { font-size: 1.5em; font-weight: 700; color: #0000b1; line-height: 1.3em; }

#formulaire-commentaire { display: none; }

.tableau-formulaire { background-color: #F8F8F8; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); padding: 10px;  border-radius: 20px }

.titre-formulaire { font-size: 1.3em; font-weight: 700; color: #0000b1; line-height: 1.3em; text-decoration: underline; }

.titre-formulaire:hover { font-size: 1.3em; font-weight: 700; color: #3d8c37; line-height: 1.3em; }

.entreecomment { color: #3c3c3c; background-color: #fff; width: 80%; margin-right: auto; margin-left: auto; padding-top: 10px; padding-right: 30px; padding-left: 30px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); border: solid 2px #1f1578; border-radius: 30px }		
		
.resultats-recherche { color: black; background-color: white; text-align: center; font-size: 20px; position: relative; width: 760px; padding: 2px; z-index: 10; margin: 40px auto 10px; border-radius: 15px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); white-space: nowrap; }


/* The dropdown container */
.dropdown {
  float: right;
  overflow: hidden;
}


.navbar a:hover, .dropdown:hover .overliste {
  color: white; background-image: linear-gradient(#302870, #6a60c1 50%, #302870);
}

/* Dropdown content (hidden by default) */
.dropdown-content { display: none; background-color: #f9f9f9; position: absolute; top: 38px; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; margin-left: 1px; }

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 4px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 18px;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
.ligne { border-bottom: 1px solid #c8c8c8; }