/*---- contacts section hovergraphic -----*/
div#hover {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 5 / 3;
    max-width: 1280px;
    margin: 0;
	display: flex;
    flex-direction: row;
    padding: 22% 2% 0vw !important;
    justify-content: space-evenly;
}

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

div#hover .no {
    z-index: 500;
	position: relative;
	background: var(--aurecon-green);
    border-radius: 50%;
    width: 5.625em;
    height: 5.625em;
    min-width: 2em;
    min-height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.95;
    cursor: pointer;
    transition: all 400ms ease-in-out, opacity 200ms;
}

/* ---- animate icons ----*/

div#hover .no {
    animation-name: flash;
    animation-duration: 1500ms;
	animation-timing-function: ease;
    animation-iteration-count: infinite;
}

@keyframes flash {
    0% {
		box-shadow: 0 0 0 5px rgb(197 204 204 / 50%);
	}
	50% {
		box-shadow: 0 0 0 10px rgb(197 204 204 / 30%);
	}
	100% {
		box-shadow: 0 0 0 5px rgb(197 204 204 / 50%)
	}
}

/* ---- style descriptions ----*/

div#hover .description {
    z-index: 600;
    position: absolute;
	bottom: 140%;
    width: 20vw;
    max-width: 24em;
    min-width: 18em;
    background: #fff;
    border: 2px solid var(--aurecon-green);
    color: #000;
    visibility: hidden;
    opacity: 0 !important;
    display: flex;
    justify-content: center;
	flex-direction: column;
    padding: 24px;
    transition: opacity .2s, visibility .2s;
    margin: 0;
}

div#hover .description p {
    margin: 0;
    font-size: 14px;
}

div#hover .description ul {
    margin: 5px 0 0 20px !important;
}

div#hover .description ul li {
    font-size: 14px;
    margin: 0 !important;
}

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

/* ---- hover behaviour on icons ----*/

div#hover:has(.no:hover) .no {
    background: rgb(197, 204, 204);
    opacity: 1 !important;
    box-shadow: 0 0 0 5px rgb(197 204 204 / 70%);
    animation-name: none;
}

div#hover .no.note1:hover,
div#hover .no.note2:hover,
div#hover .no.note3:hover,
div#hover .no.note4:hover {
	background: var(--aurecon-green) !important;
	animation-name: hoverflash;
}

div#hover .no:hover {
	animation-name: hoverflash;
	animation-duration: 1500ms;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

@keyframes hoverflash {
	0% {
		box-shadow: 0 0 0 10px rgb(197 204 204 / 50%);
	}
	50% {
		box-shadow: 0 0 0 13px rgb(197 204 204 / 30%);
	}
	100% {
		box-shadow: 0 0 0 10px rgb(197 204 204 / 50%)
	}
}

/*---- mobile styles ----*/

@media only screen and (max-width: 30em) {

   div#hover {
    display: none;
	}
}