/*NORMALIZE - imposta dimensioni standard per tutti i browser*/
*{margin: 0;
padding:0;
box-sizing: border-box;}

.display-none {
  display: none; /*nello schermo questo elemento non è più visibile*/
}

/*definire font personalizzate*/
@font-face{
font-family: "Metropolis";
src: url ('Font/Metropolis-Regular.otf');
font-weight: normal;
font-style: normal;
}

body {
  height: 100vh;  /*tutta l'altezza del display*/
  font-family: 'Mulish', sans-serif;
  padding: 0.8% 2%; /*margine interno al blocco*/
}

header {
  height: 8%; /*altezza pari al x % del body*/
  display: flex; /*posiziona gli elementi l'uno di fianco all'altro*/
  justify-content: space-between; /*ordina orizzontalmente gli elementi con distanza in modo proporzionale gli elementi; gli elementi ai margini dx e sx vengono messi alle stremità*/
  align-items: center; /*allinea gli elementi al centro in senso verticlae*/
}


/* Bottone menù dropdown*/
.dropbtn {
 background-color: white;
 color: #7cc424;
 font-family: 'Mulish', sans-serif;
 font-size: 16px;
 border: solid;
 border-radius: 10px;
 cursor: pointer; /*il puntatore mouse diventa indice nella selezione della voce*/
 padding: 10px 35px;
}
/* Effetto hover del bottone*/
.dropbtn:hover, .dropbtn:focus {
 background-color: #7cc424;
 color: white;
 border-radius: 10px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}
/* COntenuto del menù dropdown (nascosto di default) */
.dropdown-content {
 display: none;
 position: absolute;
 background-color: #f1f1f1;
 min-width: 300px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
 text-align: left;
 border-radius: 10px;
 font-family: 'Mulish', sans-serif;
}
/* Links nel menù dropdown*/
.dropdown-content li {
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 cursor: pointer;
}
/* Change color of dropdown links on hover */
.dropdown-content li:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


/** Header Centrale **/
.header-centrale {
  height: 100%;
  display: flex;
  align-items: center; /*allinea gli elementi al centro in senso verticlae*/
  transform: translateX(-35%); /*sposta il blocco in senso orizzontale*/
}

.titolo-lavoro {
font-size: 12px;
}

.logo-comune{
  height: 80%;
  padding-left: 20px;
}

.logo-comune img {
  height: 100%;
}

/** Header Destro **/
.header-destra {
  height: 100%;
  display: flex;
  align-items: flex-end; /*posiziona leementi alla base verticale del blocco*/
}

.powered {
  padding-right: 10px;
  padding-bottom: 3px;
}

.powered p {
  font-size: 12px;
}

.logo-res {
  height: 80%;
}

.logo-res img {
  height: 100%;
}

/*** MAIN ***/
main {
  display: flex;
  height: 92%;
  width: 100%;
  padding-top: 1%;
  position: relative; /*serve per farsi aggangiare da blocchi con position: absolute*/
}

/* TITOLO MAPPA */
.contenitore-titolo-mappa {
  position: absolute;
  transform: translatex(-50%) translatey(10%);
  left: 50%;
  background-color: rgba(255,255,255, 1);
  padding: 10px 40px;
  border-radius: 10px;
  font-size: 0.6rem;
  margin-top: 20px;
}

/* CONTENITORI MAPPA */
iframe{
  border: none;
  border-radius: 10px;
}

.contenitore_mappe {
  width: 100%;
}

.mappa{
width: 100%;
height: 100%;
}