body { margin: 0 !important; padding: 0 !important; width: 100% !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important; }
.container { position: relative; overflow: hidden; height: 80vw; background-image: url("pastoncollege.jpg"); background-size: cover; }
input { display: none; }
p { margin: 0; }
.button { color: white; font-weight: bold; font-size: 10px; background-color: #FFFFFF; display: inline; padding: 10px 10px; border-radius: 100%; cursor: pointer; animation: fadein .5s; animation: pulse 1.5s infinite; }
.content { background: white; padding: 30px 6px 30px 6px; text-align: center; display: none; margin: 24% 40%; border-radius: 8px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); }
.cross { font-weight: bold; }
#b1 { position: absolute; left: 33%; top: 74%; }
#b2 { position: absolute; left: 43%; top: 11%; }
#b3 { position: absolute; left: 32%; top: 15%; }
#b4 { position: absolute; left: 37%; top: 13%; }
#b5 { position: absolute; left: 19%; top: 25%; }
#b6 { position: absolute; left: 52%; top: 6%; }
#b7 { position: absolute; left: 28%; top: 81%; }
#b8 { position: absolute; left: 55%; top: 15%; }
#b9 { position: absolute; left: 42%; top: 59%; }
#b10 { position: absolute; left: 12%; top: 21%; }
#b11 { position: absolute; left: 85%; top: 50%; }
#b12 { position: absolute; left: 48%; top: 7%; }
#b13 { position: absolute; left: 77%; top: 36%; }
#b14 { position: absolute; left: 82%; top: 55%; }
#b15 { position: absolute; left: 38%; top: 67%; }
#b16 { position: absolute; left: 70%; top: 51%; }
#b17 { position: absolute; left: 67%; top: 57%; }




#input1:checked ~ #content1,
#input2:checked ~ #content2,
#input3:checked ~ #content3,
#input4:checked ~ #content4,
#input5:checked ~ #content5,
#input6:checked ~ #content6,
#input7:checked ~ #content7,
#input8:checked ~ #content8,
#input9:checked ~ #content9,
#input10:checked ~ #content10,
#input11:checked ~ #content11,
#input12:checked ~ #content12,
#input13:checked ~ #content13,
#input14:checked ~ #content14,
#input15:checked ~ #content15,
#input16:checked ~ #content16,
#input17:checked ~ #content17{ display: block !important; animation: fadein .5s; }
input:checked ~ label .button { display: none !important; animation: fadeout .5s; }
.button:hover { color: #FFFFFF; background: white; }
.cta { display: inline-block; background: #a14694; color: white; padding: 15px 30px; margin-top: 5px; border-radius: 8px; text-decoration: none; transition: all .3s ease; }
.cta:hover { text-decoration: none !important;  background: #e32826 !important; box-shadow: 0 0 0 4px #f5a31d; }
@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(255, 255, 255); }
  to { box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); }
}

h1{font-size: 30px; margin: 10px; padding: 20px;}
/* inspired by this article/tutorial > https://curated.email/hotspots-in-email */

@media only screen and (min-width: 801px) and (max-width: 1900px) {
.content { background: white; padding: 20px; text-align: center; display: none; margin: 25% 30%; border-radius: 12px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); }
	.cta { display: inline-block; background: #a14694; color: white; padding: 5px 12px; margin-top: 15px; border-radius: 8px; text-decoration: none; transition: all .3s ease; }
  
	h1{font-size:30px; display: block; margin:0px; padding:0px}
	.button { color: white; font-weight: bold; font-size: 5px; background-color: #FFFFFF; display: block; padding: 10px 10px; border-radius: 100%; cursor: pointer; animation: fadein .5s; animation: pulse 1.5s infinite; }

}

@media only screen and (min-width: 601px)  and (max-width: 800px) {
.content { background: white; padding: 20px; text-align: center; display: none; margin: 20% 30%; border-radius: 12px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); }
	.cta { display: inline-block; background: #a14694; color: white; padding: 5px 12px; margin-top: 15px; border-radius: 8px; text-decoration: none; transition: all .3s ease; }
  
	h1{font-size:22px; display: block; margin:0px; padding:0px}
	.button { color: white; font-weight: bold; font-size: 5px; background-color: #FFFFFF; display: block; padding: 8px 8px; border-radius: 100%; cursor: pointer; animation: fadein .5s; animation: pulse 1.5s infinite; }

}




@media only screen and (max-width: 600px) {
.content { background: white; padding: 20px; text-align: center; display: none; margin: 10% 20%; border-radius: 12px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); }
	.cta { display: inline-block; background: #a14694; color: white; padding: 5px 12px; margin-top: 15px; border-radius: 8px; text-decoration: none; transition: all .3s ease; }
  
	h1{font-size:18px; display: block; margin:0px; padding:4px}
	.button { color: white; font-weight: bold; font-size: 10px; background-color: #FFFFFF; display: block; padding: 5px 5px; border-radius: 100%; cursor: pointer; animation: fadein .5s; animation: pulse 1.5s infinite; }

}