/** @format */

.highlight {
	font-weight: bold;
	display: inline-block;
	font-size: 1.125rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06);
	border-radius: 50% 50% 50% 0;
	width: 20px;
	height: 20px;
	transform: rotate(-45deg);
}

.highlight:hover {
	background: #52f438;
	color: #000;
}

#content1,
#content2,
#content3,
#content4,
#content5,
/*#content6,*/
#content7,
#content8,
#content9 {
	position: absolute;
	overflow: hidden;
	padding-bottom: 1rem;
	top: 3%;
}


    #b1 {
      left: 37%;
      top: 25%;
    }

    #b2 {
      left:38%;
      top: 31%;
    }

    #b3 {
        left: 37%;
        top: 22%;
    }
    #b4 {
        left:41.4%;
        top: 31%;
      }
    
    #b5 {
        left:55%;
        top: 50.25%;
      }
 /*   #b6 {
        left:56%;
        top: 47%;
      }*/
    #b7 {
        left:63%;
        top: 61%;
      }
    #b8 {
        left:69%;
        top: 69%;
      }
    #b9 {
        left:39.25%;
        top: 32%;
      }


#hotspots1:checked ~ #content1,
#hotspots2:checked ~ #content2,
#hotspots3:checked ~ #content3,
#hotspots4:checked ~ #content4,
#hotspots5:checked ~ #content5,
/*#hotspots6:checked ~ #content6,*/
#hotspots7:checked ~ #content7,
#hotspots8:checked ~ #content8,
#hotspots9:checked ~ #content9 {
	display: block;
	margin: 2rem;
	width: 90%;
}

@supports (position: absolute) {
	#hotspots-container {
		display: block !important;
		max-height: none !important;
	}

	#fallback {
		display: none;
	}
}