body {
	padding-top: 3rem;  /* Move down content because we have a fixed navbar that is 3.5rem ou 3rem tall */
	background-color: white;
}


#my-map {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 0rem;
}


#mapid {
/*	padding: 1rem; */
	margin: 0.5rem auto;
	height:100%;
	border: 2px solid black;
}

.myText {
	color: darkblue;
}
/* RAPPEL LA GRILLE DE BOOSTRAP 4.6 :
		 			Extra small		Small 	 	Medium	 	Large 		Extra large
					≥576px			<576px		≥768px		≥992px		≥1200px
.container 			100% 			540px 		720px 		960px 		1140px
.container-sm 		100% 			540px 		720px 		960px 		1140px
.container-md 		100% 			100% 		720px 		960px 		1140px
.container-lg 		100% 			100% 		100% 		960px 		1140px
.container-xl 		100% 			100% 		100% 		100% 		1140px
.container-fluid 	100% 			100% 		100% 		100% 		100%
*/


@media (max-width: 575px) {
	.myText {
		font-size: 0.8rem;
	}

	.mapid-holder {
		height: 32rem; 
		padding: 0.25rem;
		margin: 0px;
	}	
}



@media (min-width: 576px) and (max-width: 767px) {
	.myText {
		font-size: 1rem;
	}
	.mapid-holder {
		height: 36rem; 
		padding: 0.25rem;
		margin: 0px;
	}	
}

@media (min-width: 768px) and (max-width: 991px) {
	.myText {
		font-size: 1.2rem;
	}

	.mapid-holder {
		height: 40rem; 
		padding: 0.5rem;
		margin: 0px;
	}	
}


@media (min-width: 992px) and (max-width: 1199px) {
	.myText {
		font-size: 1.5rem;
	}

	.mapid-holder {
		height: 48rem; 
		padding: 1rem;
		margin: 0px;
	}
 }
 
 @media (min-width: 1200px) {
	.myText {
		font-size: 1.5rem;
	}

	.mapid-holder {
		height: 52rem; 
		padding: 1rem;
		margin: 0px;
	}
 }