/*
--------------------------
COSTANTI
--------------------------
*/
:root {
	/* non funziona ie11*/
	/* --myCOLOR: #8D181C;*/
	/* istruzione nel codice--> color: var(--myCOLOR);*/
}

*{
  /* non funziona da nessuna parte
  -my-RED: #8D181C;
  color: -my-RED;
  */
}

/*
--------------------------
SOTTOLINEATURA CON FRECCIA
--------------------------
*/


.utility-sottolinea {
	margin-top: 60px;
	margin-bottom: 60px;
	position: relative;
}

.utility-sottolinea::before {
	left: 50%; bottom: -20px;
	width: 25%;	height: 2px;
	display: block;
	position: absolute;
	content: "";
	background-color: rgb(7, 58, 99);
	transform: translateX(-50%);
}

.utility-sottolinea::after {
	
    left: 50%; bottom: -40px;
    padding: 0px 8px;
    display: block;
    position: absolute;
    font-family: "Font Awesome 5 Free"; content: "\f078"; font-weight: 900;
    background-color: rgb(255, 255,255);
	color: rgb(7, 58, 99);
	font-size:34px;
    transform: translateX(-50%);
}

/*
--------------------------
TRASFORMAZIONI
--------------------------
*/

.utility-tras-immagine .mask{
	position: absolute;
	left: 0px; top: 0px;
	width: 100%; height: 100%;
	background-size: cover;
	/*opacity: 0.9;*/
}

.utility-tras-immagine:hover .mask {
	-webkit-transition: -webkit-transform 1s ease-in-out;
	-webkit-transform: scale(1.2);
	-o-transition: -o-transform 1s ease-in-out;
	-o-transform: scale(1.2);
	-moz-transition:-moz-transform 1s ease-in-out;
	-moz-transform: scale(1.2);
	transition:transform 1s ease-in-out;
	transition:transform 1s ease-in-out;
	transform: scale(1.2);
}

.utility-tras-colore .mask{
	position: absolute;
	left: 0px; top: 0px;
	width: 100%; height: 100%;
	/*opacity: 0.9;*/
	-webkit-transition: opacity 0.3s ease-in-out;
  	-moz-transition: opacity 0.3s ease-in-out;
  	-ms-transition: opacity 0.3s ease-in-out;
  	-o-transition: opacity 0.3s ease-in-out;
  	transition: opacity 0.3s ease-in-out;
  	background-image: url("IMAGE/retina.png");
}

.utility-tras-colore:hover .mask {
	filter: alpha(opacity=90);
  	opacity: 0.9;
}