@charset "UTF-8";
/* CSS Document */

/*generico immagini mappate*/
img[usemap] {
		border: none;
		height: auto;
		max-width: 100%;
		width: auto;
	}

/*mappa ciclo idrico con le label a comparsa*/
.img-map {position:relative;}

/*aggiungo i numeri e li posiziono*/
map[name="ciclo-idrico"] area::before {
    content: "";
    position: absolute;
    color: #666;
    font-weight: 700;
    font-size: 30px;
    text-shadow:1px 2px 2px rgba(0,0,0,0.2);
}
map[name="ciclo-idrico"] area[alt*="captazione"]::before {content: "1"; left: 18%; top: 27%;}
map[name="ciclo-idrico"] area[alt*="potabilizzazione"]::before {content: "2"; left: 37.5%; top: 10.5%;}
map[name="ciclo-idrico"] area[alt*="adduzione"]::before {content: "3"; left: 57%; top: 20%;}
map[name="ciclo-idrico"] area[alt*="distribuzione"]::before {content: "4"; left: 73.5%; top: 39%;}
map[name="ciclo-idrico"] area[alt*="acque reflue"]::before {content: "5"; left: 77%; top: 79%;}
map[name="ciclo-idrico"] area[alt*="depurazione"]::before {content: "6"; left: 53%; top: 84%;}


/*aggiungo le labels e le posiziono*/
map[name="ciclo-idrico"] area::after {
    content: "";
    width: 130px;
    background-color: rgba(85,85,85,.8);
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    line-height: 1.5;
    z-index: 1;
    display: block;
    float: left;
    position:absolute;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;
}
map[name="ciclo-idrico"] area:hover::after {visibility:visible !important; opacity: 1;}


map[name="ciclo-idrico"] area[alt*="captazione"]::after {
    content: "Fase di captazione";
    left: 14%;
    top: 44%;
}
map[name="ciclo-idrico"] area[alt*="potabilizzazione"]::after {
    content: "Fase di potabilizzazione e disinfezione";
    left: 30.5%;
    top: 22%;
}
map[name="ciclo-idrico"] area[alt*="adduzione"]::after {
    content: "Fase di adduzione e accumulo";
    left: 53%;
    top: 31%;
}
map[name="ciclo-idrico"] area[alt*="distribuzione"]::after {
    content: "Fase di distribuzione";
    left: 78%;
    top: 34%;
}
map[name="ciclo-idrico"] area[alt*="acque reflue"]::after {
    content: "Fase di raccolta delle acque reflue";
    left: 76%;
    top: 73%;
}
map[name="ciclo-idrico"] area[alt*="depurazione"]::after {
    content: "Fase di depurazione";
    left: 47%;
    top: 67%;
}


@media (max-width:600px) {
    /*media per le percentuali perchè si spostano*/
	map[name="ciclo-idrico"] area::before { font-size: 18px;}
}