.cuerpomapa { 
	margin: 0 !important;
	padding: 0 !important; 
	width: 100% !important; 
	
}
.containermapa { 
	position: relative; 
	overflow: hidden; 
	height: 60vw; 
	background-image:url(https://www.lasallep.edu.mx/ulsap/Somos-la-salle/img/Mapa-Mexico.png); 
	background-size: cover; 
}
input { 
	display: none; 
}
p { 
	margin: 0; 
}
.botonmapa { 
	color: white; 
	font-weight: bold; 
	font-size: 20px; 
	background-color: #d32f2f; 
	display: block; 
	padding: 10px 16px; 
	border-radius: 100%; 
	cursor: pointer; 
	animation: fadein .5s; 
	animation: pulse 1.5s infinite; 
}
.contenidomapa { 
	background: white; 
	padding: 1rem 1rem 2rem 1rem; 
	text-align: center; 
	display: none; 
	margin: 10%; 
	border-radius: 8px; 
	box-shadow: 0 4px 2px -2px rgba(211,47,47,0); 
}
.crossmapa { 
	font-weight: bold; 
}
#b1 { position: absolute; left: 73%; top: 12%; }
#b2 { position: absolute; left: 42%; top: 32%; }
#b3 { position: absolute; left: 67%; top: 50%; }
#input1:checked ~ #content1,
#input2:checked ~ #content2,
#input3:checked ~ #content3 { display: block !important; animation: fadein .5s; }
input:checked ~ label .button { display: none !important; animation: fadeout .5s; }

.botonmapa:hover { 
	color: #d32f2f; 
	background: white; 
}
.ctamapa { 
	display: inline-block; 
	background: #d32f2f; 
	color: white; 
	padding: 12px 24px; 
	margin-top: 48px; 
	border-radius: 24px; 
	text-decoration: none; 
	transition: all .3s ease; 
}
.ctamapa:hover { text-decoration: underline !important; box-shadow: 0 0 0 6px rgba(211, 46, 46, 0.4); }
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeout {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  from { box-shadow: 0 0 0 0px rgba(211, 47, 47); }
  to { box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); }
}

/* inspired by this article/tutorial > https://curated.email/hotspots-in-email */