/* TOOLTIP */
div.tooltip {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	opacity: 0.4;
}
div.tooltip:hover {
	opacity: 1;
}
div.tooltip div.tooltip-text {
	visibility: hidden;
	opacity: 0;
	width: 200px;
	background-color: #14bef0;
	color: #ffffff;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	font-weight: normal;
	padding: 15px;
	position: absolute;
	z-index: 99;
	bottom: 40px;
	left: -75px;
	border-radius: 10px;
	transition: 0.3s;
	box-shadow: 0px 0px 5px #000000;
}
div.tooltip div.tooltip-text a {
	color: #e2f8ff;
}
div.tooltip div.tooltip-text.left {
	width: 280px;
	bottom: -35px;
	left: -300px;
}
div.tooltip:hover div.tooltip-text {
	visibility: visible;
	opacity: 1;
}
div.tooltip div.tooltip-arrow {
	visibility: hidden;
	opacity: 0;
	width: 30px;
	height: 20px;
	position: absolute;
	z-index: 100;
	bottom: 20px;
	left: -4px;
	transition: 0.3s;
	background-image: url(images/tooltip-arrow.png);
	background-repeat: no-repeat;
	background-position: center center;
}
div.tooltip div.tooltip-arrow.left {
	bottom: 0px;
	left: -25px;
	transform: rotate(-90deg);
}
div.tooltip:hover div.tooltip-arrow {
	visibility: visible;
	opacity: 1;
}
@media (max-width: 1200px) {
div.tooltip div.tooltip-text, div.tooltip div.tooltip-text.left {
	position: fixed;
	width: 100%;
	padding: 15px;
	bottom: -20%;
	left: 0px;
	border-radius: 0px;
}
div.tooltip:hover div.tooltip-text, div.tooltip:hover div.tooltip-text.left {
	visibility: visible;
	opacity: 1;
	bottom: 0%;
}
div.tooltip:hover div.tooltip-arrow, div.tooltip:hover div.tooltip-arrow.left {
	display: none;
}
}
/* TOOLTIPS */










/* ENSEMBLE DU QUÉBEC */
span.nombre-quebec {
	font-size: 18px;
	font-weight: bold;
	color: #0088b6;
	
}





/* ENSEMBLE DU QUÉBEC END */







/* PAGE RÉGION */
h1.filtre-region {
	font-size: 32px;
	line-height: 38px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 40px;
	margin-bottom: 20px;
	color: #000000;
}
h2.filtre-region {
	font-size: 20px;
	line-height: 26px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-weight: normal;
	margin-bottom: 50px;
}
h3.filtre-region {
	font-size: 20px;
	line-height: 26px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	font-weight: normal;
	margin-bottom: 30px;
}
div.card {
	display: inline-block;
	vertical-align: top;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 60px;
	width: 90%;
	max-width: 300px;
	background-color: #ffffff;
	background-image: linear-gradient(#ffffff, #f5f5f5);
	border: 1px solid #dddddd;
	padding: 30px;
	box-sizing: border-box;
	border-radius: 20px;
}
div.card div.icon {
	display: block;
	width: 80px;
	height: 80px;
	margin-top: -70px;
	background-color: #ffffff;
	background-image: linear-gradient(#ffffff, #f5f5f5);
	border: 1px solid #dddddd;
	border-radius: 40px;
	box-sizing: border-box;
	padding: 15px;
	margin-left: auto;
	margin-right: auto;
}
div.card div.icon img {
	display: block;
	width: 100%;
}
div.card p.title-top {
	margin-top: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}
div.card p.nombre {
	margin-top: 0px;
	font-weight: bold;
	font-size: 40px;
	margin-bottom: 0px;
}
div.filtre-region-tag {
	display: inline-block;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 30px;
}
div.filtre-region-tag a {
	background-color: #ffffff;
	padding: 20px;
	box-sizing: border-box;
	display: block;
	width: 100%;
	box-shadow: 0px 0px 3px #cccccc;
	font-size: 18px;
	text-decoration: none;
	transition: 0.3s;
}
div.filtre-region-tag a:hover {
	color: #000000;
	background-color: #d9f0fd;
}
/* PAGE RÉGION END */

































/*
#335577;
#0088b6;
#d9f0fd;
*/