/*----- all hover graphics, short term hovergraphic 1 styles ------*/

div#hovergraphic2 {
	position: relative;
	max-width: 1280px;
	max-height: 768px;
	width: auto;
	aspect-ratio: 16 / 9;
	margin: 0 !important;
}

div#hovergraphic2.inline-graphic {
    margin: 0 !important;
}

div#hovergraphic2 img#bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

div#hovergraphic2 .no {
	z-index: 1;
    position: absolute;
    width: 5vw;
    height: 5vw;
    max-width: 5em;
    max-height: 5em;
    min-width: 2.5em;
    min-height: 2.5em;
    border-radius: 50%;
    background-color: rgb(142, 156, 156);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.95 !important;
    transition: opacity .2s, background-color .2s;
    cursor: pointer;
}

div#hovergraphic2 .no:hover {
	background-color: var(--aurecon-green);
}

div#hovergraphic2 .description {
	position: absolute;
	width: 25vw;
	max-width: 20em;
	height: fit-content;
	bottom: 110%;
	background: #fff;
	border: 2px solid var(--aurecon-green);
	color: #000;
	visibility: hidden;
	opacity: 0 !important;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	padding: 20px;
	row-gap: 5px;
	transition: opacity .2s, visibility .2s;
	margin: 0;
	display: none;
}

/*----- description right aligned ------*/
div#hovergraphic2 .no.hg2 .description,
div#hovergraphic2 .no.hg6 .description,
div#hovergraphic2 .no.hg12 .description {
	right: -0.7em;
	left: auto;
}

/*----- description left aligned ------*/
div#hovergraphic2 .no.hg3 .description,
div#hovergraphic2 .no.hg5 .description,
div#hovergraphic2 .no.hg8 .description,
div#hovergraphic2 .no.hg9 .description {
	right: auto;
	left: -0.7em;
}

div#hovergraphic2 .no .description p {
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	margin: 0;
	background: transparent;
	padding: 0;
}

div#hovergraphic2 .no:hover {
	opacity: 1 !important;
	z-index: 2;
}

div#hovergraphic2 .no:hover .description {
	display: flex;
	visibility: visible;
	opacity: 1 !important;
}

div#hovergraphic2 .no.hg1 {
	bottom: 33%;
    left: 40%;
}

div#hovergraphic2 .no.hg2 {
	bottom: 48%;
	right: 3%;
}

div#hovergraphic2 .no.hg3 {
	bottom:23%;
	left: 12%;
}

div#hovergraphic2 .no.hg4 {
	bottom: 47%;
    right: 38%;
}

div#hovergraphic2 .no.hg5 {
	bottom: 47%;
    left: 3%;
}

div#hovergraphic2 .no.hg6 {
	bottom: 22%;
	right: 10%;
}

div#hovergraphic2 .no.hg7 {
	bottom: 20%;
	left: 38%;
}

div#hovergraphic2 .no.hg8 {
	bottom: 46%;
    left: 23%;
}

div#hovergraphic2 .no.hg9 {
	bottom: 44%;
    left: 15%;
}

div#hovergraphic2 .no.hg10 {
	top: 38%;
    right: 47%;
}

div#hovergraphic2 .no.hg11 {
	bottom: 36%;
	right: 28%;
}

div#hovergraphic2 .no.hg12 {
	top: 38%;
	right: 18%;
}