.regioni{fill:#a5a5a5 !important;}
.regioni:hover{fill:#007bff !important;}
.filiali{fill:#0d3a93;
cursor: pointer;
stroke-width: 2px;}

.filiali:hover {
fill: #eeff00;
cursor: pointer;
stroke-width: 2px;
}

.family {
fill: #cf0404;
cursor: pointer;
stroke-width: 2px;
}

.family:hover {
fill: #eeff00;
cursor: pointer;
stroke-width: 2px;
}

.map-svg .regioni {
cursor: pointer;
-webkit-transition-duration: unset!important;
transition-duration: unset!important;
}

.wrap-svg .map-svg {
margin: auto;
}

.map-svg {
position: relative;
}

.map-svg .regioni:hover {
fill: #eeff00;
-webkit-animation: colorChange .5s ease-in-out;
animation: colorChange .5s ease-in-out;
}

.wrap-svg {
width: 75%;
}

@media (max-width:769px){
.wrap-svg {
width: 95%;
}
}

.dettaglio-filiale {
background-color: #fff;
position: fixed;
width: 465px;
max-width: 100%;
-webkit-box-shadow: 0 3px 14px -2px rgb(74 81 85 / 30%);
box-shadow: 0 3px 14px -2px rgb(74 81 85 / 30%);
margin-bottom: 40px;
margin-top: 40px;
margin-left: 20px;
}

   /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: relative; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 250px; /* Location of the box */
  right: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  border-radius:50px;
}

@media screen and (max-width: 769px) {
    .modal {
  display: none; /* Hidden by default */
  position: relative; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top:0px; /* Location of the box */
  right: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  border-radius:50px;
}  
}

/* Modal Content */
.modal-content {
background-color: #fff;
color:#254099;
position: relative;
width: 100%;
-webkit-box-shadow: 0 3px 14px -2px rgb(74 81 85 / 30%);
box-shadow: 0 3px 14px -2px rgb(74 81 85 / 30%);
margin-bottom: 40px;
margin-top: 40px;
margin-left: 20px;
margin:auto;
border-radius:10px;
border:2px solid #b3b3b3;
}

.modal-content:hover {
background-color: #fff;
color:#254099;
position: relative;
width: 100%;
-webkit-box-shadow: 0 3px 14px -2px rgb(74 81 85 / 30%);
box-shadow: 0 3px 14px -2px rgb(74 81 85 / 30%);
margin-bottom: 40px;
margin-top: 40px;
margin-left: 20px;
margin:auto;
border-radius:10px;
border:2px solid #254099;
cursor:pointer;
}

@media screen and (max-width: 769px) {
.modal-content {
   background-color: #fff;
   color:#254099;
   position: relative;
   width: 70%;
   -webkit-box-shadow: 0 3px 14px -2px rgb(74 81 85 / 30%);
   box-shadow: 0 3px 14px -2px rgb(74 81 85 / 30%);
   margin-bottom: 40px;
   margin-top: 40px;
   margin-left: 20px;
   margin:auto;
   border-radius:10px;
   border:2px solid #b3b3b3;
}  
}


.modal-text-title {
    padding-top:5px; 
    font-size:1.35em; 
    color:#254099;
    text-align:center;
    font-weight: 700;
}

.modal-text-p {
    font-size:1em; 
    color:#2a2a2a;
    font-size:16px; 
    text-align:center; 
    font-weight: 400;
}


.text-modal{
  padding:20px 20px 0px 20px;
}


 .container {
    max-width: 1140px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;

}

.icon-image{
    width:50%;
    padding-top:20px;
}

.title-page{
    font-weight: 700;
    font-size:3rem;
    padding:50px 0 0 10px;
    color:#254099;
}

.text-page{
    font-weight: 400;
    font-size:16px;
    padding:20px 0 30px 10px;
}