body {
  font-family: 'SoleSans';
  background-color: #202125;
  margin: 0;
}

.copertina {
  /* height: 100vh;
  width: 100vw; */
  width: 100vw;
  height: 100vh;
  display: inline-block;
 }

 .copertina video{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
 }

 .copertina_mobile {
   display: none;
 }
.autore{
    font-family: 'sole_display';
    opacity: .5;
}
.p_fonti{

  color: white;
  font-family: "SoleSans";
  font-size: 12px;
  padding: 0px;
  margin-top:0;
  padding-top: 0px;
  opacity: 0.4;
}

.p_fonti_graficofonti{

  color: white;
  font-family: "SoleSans";
  font-size: 12px;
  padding: 0px;
  margin-top:0;
  padding-top: 0px;
  opacity: 0.4;
}

/* TOP-BAR */

.top-bar {
  background-color: black;
  position: fixed;
  width: 100vw;
  height: 65px;
  top: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid white;
}

.top-bar_sx {
  width: 60px;
  padding-left: 20px;
  margin-right: 30px;
}

.top-bar_centro {
  width: 80px;
}

.top-bar_dx {
  position: relative;
  padding-right: 20px;
  display: flex;
}

.logo_social {
  position: relative;
  align-items: center;
  width: 30px;
}

#combustibili-layer {
  opacity: 1;
  transition: opacity .5s;
}

#basse-emissioni-layer {
  opacity: 1;
  transition: opacity .5s;
}

#combustibili-diviso{
  opacity: 0;
  transition: opacity .5s;
}

#basse-emissioni-diviso{
  opacity: 0;
  transition: opacity .5s;
}


.tooltip {
  opacity: 0;
  transition: opacity .5;
}

#combustibili-sub-layer{
  pointer-events: none;
}

#bassa-emissione-sub-layer{
  pointer-events: none;
}

/* .grafico-fonti {
  width: 40vw;
} */

.grafico-fonti {
  width: 110%;
  height: auto;
  padding: 10px;
  margin-top: 0px;
}

.title {
  text-align: center;
  align-self: center;

  font-size: 30px;
  padding-top: 250px;
}

.container {
width: 100vw;
display: flex;
flex-direction: column;
 justify-content: center;
align-items: center;
align-content: center;
max-width: 700px;
margin: auto;
overflow-x:hidden;
}

.footer{
  width: 100vw;
  display: flex;
  justify-content: center;
  background-color: #000;

  }

.row {
  display: flex;
  padding: 30px;
  width: 65%;
  justify-content: center;
}

.rowfooter {
  display: flex;
  padding: 30px;
  width: 100%;
  justify-content: center;
}

.column-half {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.column-half1 {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.grafico {
  padding: 0px;
}

.grafico_div {
 padding-top: 20px;
}

.notifica{
  padding: 0px;
  align-items:center;
}

.titolettocopertina {
  text-align: center;
  color: #1767D2 ;
  font-size: 30px;
}

.logo_unirsm {
  width: 16%;
  padding-top: 20px;
  /* margin-top: -1.4%;  */
  display: inline-block;
  float: left;
}

.p_footer {
    /* float: right; */
    width: 80%;
    padding-left: 10px;
    color: white;
    font-family: "SoleSans";
    font-size: 14px;
    line-height: 20px;
    display: inline-block;

}

/*INIZIO CAROSELLO*/

.gallery {
  width: 120%;
}

.gallery-container {
  align-items: center;
  height: 400px;
  margin: 0 auto;
  max-width: 1000px;
  position: relative;
}

.gallery-item {
  height: 200px;
/*opacity: 0; */
position: absolute;
transition: all 0.3s ease-in-out;
width: 200px;
z-index: 0;
}

.gallery-item-1 {
  left: 15%;
/* opacity: .4; */
transform: translateX(-50%);
}

.gallery-item-2,
.gallery-item-4 {
  height: 300px;
 opacity: 1;
width: 300px;
z-index: 1;
}

.gallery-item-2 {
  left: 30%;
  transform: translateX(-50%);
}

.gallery-item-3 {
box-shadow: 0 0 0 rgba(255, 255, 255, 0.6), 0 0 0 rgba(255, 255, 255, 0.45), 0 0 0 rgba(255, 255, 255, 0.25), 0 0 0 rgba(255, 255, 255, 0.1);
height: 400px;
/*opacity: 1; */
left: 50%;
transform: translateX(-50%);
width: 400px;
z-index: 2;
}

.gallery-item-4 {
  left: 70%;
  transform: translateX(-50%);
}

.gallery-item-5 {
  left: 85%;
  opacity: .4;
  transform: translateX(-50%);
}

.gallery-item-6{
  left: 95%;
  /* opacity: .4; */
  transform: translateX(-50%);
  /* width: 0px;
  height:0px; */
}

.gallery-item-7{
  left: 100%;
  /* opacity: .4; */
  transform: translateX(-50%);
}

.gallery-controls {
  background-color: transparent;

  border: 0;
  cursor: pointer;
  font-size: 16px;
  /* margin: 0 220px;
  padding: 0 12px; */
  text-transform: capitalize;
  /* position:absolute;
  left: -560px; */
  z-index: 999;
  margin: auto;
  width: 100%;


}
.gallery-controls-❮{
  position: absolute;
  left: 0;
}
.gallery-controls-❯{
  position: absolute;
  right: 0;
}
.gallery-controls button {
  background-color: transparent;
  color:rgb(255, 255, 255);
  font-size: 25px;
  border: 0;
  cursor: pointer;
  /* margin: 0 22px;
  padding: 0 250px; */
  align-items: center;
  text-transform: capitalize;

}

.gallery-controls button:focus {
  outline: none;
}

.gallery-controls-previous {
  position: relative;
}

.gallery-controls-previous::before {
  border: solid #000;
  border-width: 0 2px 2px 0;
  content: '';
  display: inline-block;
  height: 4px;
  left: -10px;
  padding: 2px;
  position: absolute;
  top: 0;
  transform: rotate(135deg) translateY(-50%);
  transition: left 0.15s ease-in-out;
  width: 4px;
}

.gallery-controls-previous:hover::before {
  left: -18px;
}

.gallery-controls-next {
  position: relative;
}

.gallery-controls-next::before {
  border: solid #000;
  border-width: 0 2px 2px 0;
  content: '';
  display: inline-block;
  height: 4px;
  padding: 2px;
  position: absolute;
  right: -10px;
  top: 50%;
  transform: rotate(-45deg) translateY(-50%);
  transition: right 0.15s ease-in-out;
  width: 4px;
}

.gallery-controls-next:hover::before {
  right: -18px;
}

.gallery-nav {
  bottom: -15px;
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  position: absolute;
  width: 100%;
}

.gallery-nav li {
  background: #ccc;
  border-radius: 50%;
  height: 10px;
  margin: 0 16px;
  width: 10px;
}

.gallery-nav li.gallery-item-selected {
  background: #555;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  color: black;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

/* FINE CAROSELLO */


h1 {
  text-align: center;
  color: #1767D2 ;
  font-size: 60px;
}

h2 {
  text-align: left;
  align-self: flex-start;
  color: #1767D2 ;
  font-size: 30px;
  font-family: 'sole_display';
  font-style: normal

}

.crediti p {
  text-align: center;
  color: white ;
  font-size: 20px;
  padding: 220px;
  font-family: "SoleSans";
  font-weight: 400;
	font-style: normal;
 }


p {
  color: white;
  font-size: 18px;
  padding: 0px;
  font-family: "SoleSans";
  font-weight: 300;
	font-style: normal;
  line-height: 28px;
}

.titoletto {
  color: white;
  align-self: flex-start;
  font-size: 18px;
  font-weight: bold;
}

.corpo {
  height: 100vh;
}

.testo1 {
  color: aqua;
}

.notifica {
  transition: all 0.5s;
  opacity: 0;
  box-shadow: rgb(0, 0, 0) 5px 10px 15px ;
  margin-bottom: 20px;
  font-family: 'SoleSans';
}
.notifica svg #Heading {
  opacity: .2;
}

.testo_percorso {
  transition: all 0.2s;
  opacity: 0;
  box-shadow: rgb(0, 0, 0) 0px 20px 5px -10px;
  margin-bottom: 20px;
}


iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: flex;
  align-self: center;
}


.juxtapose{
  width: 130%;
  height: 15%;
  overflow: hidden;
}

#chart_percorso .st0{fill:#FFFFFF;fill-opacity:1;}
#chart_percorso .st1{font-family: 'SoleSans';}
#chart_percorso .st2{font-size:16px;}
#chart_percorso .st3{font-size:30px;}
#chart_percorso .st4{fill:none;stroke:#FFFFFF;stroke-width:0.5;}
#chart_percorso .st5{fill:none;stroke:#FFFFFF;stroke-linecap:round;}
#chart_percorso .st6{fill:#8D897A;}
#chart_percorso .st7{font-size:10px;}
#chart_percorso .st8{font-size:18px;}
#chart_percorso .st9{fill:#1767D2;}
#chart_percorso .percentuali {font-weight: bold;}


#Grafico_tappe{
   width: 130%;
}

#Tappe_future {
  width: 80%;
}

#Grafico_tappe  .st0{fill:#1767D2;}
#Grafico_tappe  .st1{fill:#FFFFFF;}
#Grafico_tappe  .st2{font-family:'SoleSans';}
#Grafico_tappe  .st3{font-size:25px;}
#Grafico_tappe  .st4{font-size:22px;}
#Grafico_tappe  .st5{fill-opacity:0.12;}
#Grafico_tappe  .st6{fill-rule:evenodd;clip-rule:evenodd;fill:#EA352B;}
#Grafico_tappe  .st7{fill-opacity:0.4;}
#Grafico_tappe	.st8{font-family:'SoleSans';}
#Grafico_tappe	.st9{fill:#060707;fill-opacity:0.7;}
#Grafico_tappe	.st10{font-size:16px;}
#Grafico_tappe	.st11{fill:#92B3F2;fill-opacity:0.5;stroke:#92B3F2;}
#Grafico_tappe	.st12{font-family:'SoleSans';}
#Grafico_tappe	.st13{font-size:32px;}
#Grafico_tappe	.st14{opacity:0.7;}
#Grafico_tappe	.st15{fill:#060707;}
#Grafico_tappe	.st16{enable-background:new    ;}
#Grafico_tappe	.st17{font-family:'SoleSans';}


/* #Tappe_future .st0{fill:#FFFFFF;fill-opacity:0.5;}
#Tappe_future .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#EA352B;}
#Tappe_future .st2{fill-opacity:0.4;}
#Tappe_future .st3{fill:#1767D2;}
#Tappe_future .st4{fill-opacity:0.12;}
#Tappe_future .st5{fill:#FFFFFF;}
#Tappe_future .st6{font-family:'SoleSans';}
#Tappe_future .st7{font-size:18px;}
#Tappe_future .st8{font-family:'SoleSans';}
#Tappe_future .st9{font-size:30px;}
#Tappe_future .testo{font-family:'SoleSans';} */




.fonti-bassa-emissione .normale {
  display: block;
}
.fonti-bassa-emissione .hover {
  display: none;
}
.fonti-bassa-emissione:hover .normale {
  display: none;
}

.fonti-bassa-emissione:hover .hover {
  display: block;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

/* combustibili fossili */
.combustibili-fossili .normale {
  display: block;
}
.combustibili-fossili .hover {
  display: none;
}
.combustibili-fossili:hover .normale {
  display: none;
}
.combustibili-fossili:hover .hover {
  display: block;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.valori{
  display: none;
}

.singolo-valore {
  display: none;
}

.singolo-valore .visibile {
  display: block;
  font-size: 18px;
  color: white;
  z-index: 1;
}

.item {
padding-right:2px;
display: flex;
}

.item_combustibili{
display: flex;
}



/* MEDIA QUERY SITO RESPONSIVE MOBILE*/


@media only screen and (max-width: 1024px) {
  .copertina {
    /* height: 100vh; */
    width: 100vw;
    height: 75vh;
    display: inline-block;
   }

   .copertina video{
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: -1;
      width: 100%;
      height: auto;
      object-fit: cover;
   }

   .copertina_mobile {
     display: none;
   }
}

@media only screen and (max-width: 768px) {
  .copertina {
    /* height: 100vh; */
    width: 100vw;
    height: 55vh;
    display: inline-block;
   }

   .copertina video{
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: -1;
      width: 100%;
      height: auto;
      object-fit: cover;
   }

   .copertina_mobile {
     display: none;
   }
}

@media only screen and (max-width: 480px) {

   .copertina {
     display: none;
    }

    .copertina_mobile {
      display: block;
      width: 100vw;
      height: 100vh;
      display: inline-block;
    }

    .copertina_mobile video{
       position: absolute;
       top: 0px;
       left: 0px;
       z-index: -1;
       width: 100%;
       height: 100%;
       object-fit: cover;
    }

    .p {
    font-size: 18px;
    font-weight: 300;
    line-height: 28px;
    margin: auto;
    color: white;
    }
    .top-bar{
    /* display: flex;  */

    overflow-x: hidden;
    overflow-y: hidden;
    width: 100vw;
    }

    .row{
     width: 80%;
     display: flex;
     padding: 0px;
     /* padding-left: 50px; */
     justify-content: center;
     /* margin-left: auto; */
    }

    .column-half{
    width: 100%;
    }

    .grafico_div{
    width: 110%;
    }

    #chart_percorso{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin-top: 0px;
    margin: 0px;

    }

    .grafico{
    width: 85%;
    padding: 0px;
    margin-left: 20px;
    /* padding-left: 20px;  */
    }
    .p_fonti{
    width: 90%;
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 60px;
    margin-left: 24px;
    font-size:12px;
    line-height: 18px;
    opacity: 0.4;
    }

    .p_fonti_graficofonti{
    width: 90%;
    padding: 0px;
    padding-top: 0px;
    margin-left: -24px;
    font-size:12px;
    line-height: 18px;
    opacity: 0.4;
    text-align:left;

    }

    .notifica{
    /* width: 100%; */
    width: 80vw;
    border-radius: 4px;
    overflow-x: hidden;
    overflow-y: hidden;
    /* background-color: #EA352B; */
    }


    /* .grafico-fonti{
    width: 110%;
    height: auto;
    padding: 10px;
    margin-top: 0px;
    } */

    .juxtapose{
    width: 90%;
    height: 8%;
    display: block;
    padding-top: 15px;
    }

    /* carosello */

    .gallery-item {
    height: 200px;
    /*opacity: 0; */
    position: absolute;
    transition: all 0.3s ease-in-out;
    width: 200px;
    z-index: 0;
    }

    .gallery-item-1 {
    left: 15%;
    /* opacity: .4; */
    transform: translateX(-50%);
    }

    .gallery-item-2,
    .gallery-item-4 {
    height: 300px;
    opacity: 1;
    width: 300px;
    z-index: 1;
    }

    .gallery-item-2 {
    left: 30%;
    transform: translateX(-50%);
    }

    .gallery-item-3 {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.6), 0 0 0 rgba(255, 255, 255, 0.45), 0 0 0 rgba(255, 255, 255, 0.25), 0 0 0 rgba(255, 255, 255, 0.1);
    height: 400px;
    /*opacity: 1; */
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    z-index: 2;
    }

    .gallery-item-4 {
    left: 70%;
    transform: translateX(-50%);
    }

    .gallery-item-5 {
    left: 85%;
    opacity: .4;
    transform: translateX(-50%);
    }

    .gallery-item-6{
    left: 95%;
    /* opacity: .4; */
    transform: translateX(-50%);
    /* width: 0px;
    height:0px; */
    }

    .gallery-item-7{
    left: 100%;
    /* opacity: .4; */
    transform: translateX(-50%);
    }

    .gallery-controls {
    background-color: transparent;

    border: 0;
    cursor: pointer;
    font-size: 16px;
    /* margin: 0 220px; */
    /* margin: 0px 0px; */
    /* padding: 0 6px; */
    /* padding: 0 12px; */
    text-transform: capitalize;
    position:absolute;
    /* left: -335px; */
    /* left: -150px; */
    /* background-color: #EA352B; */
    /* top: 360px; */
    /* top: 370px;
    bottom: 50px; */
    }


    .gallery-controls button {
    background-color: transparent;
    color:rgb(255, 255, 255);
    font-size: 25px;
    border: 0;
    cursor: pointer;
    margin: 0 22px;
    padding: 0 25px;
    align-items: center;
    text-transform: capitalize;

    }

    .gallery-controls button:focus {
    outline: none;
    }

    .gallery-controls-previous {
    position: relative;
    }

    .gallery-controls-previous::before {
    border: solid #000;
    border-width: 0 2px 2px 0;
    content: '';
    display: inline-block;
    height: 4px;
    left: -10px;
    padding: 2px;
    position: absolute;
    top: 0;
    transform: rotate(135deg) translateY(-50%);
    transition: left 0.15s ease-in-out;
    width: 4px;
    }

    .gallery-controls-previous:hover::before {
    /* left: -18px; */
    left: 0px;
    }

    .gallery-controls-next {
    position: relative;
    }

    .gallery-controls-next::before {
    border: solid #000;
    border-width: 0 2px 2px 0;
    content: '';
    display: inline-block;
    height: 4px;
    padding: 2px;
    position: absolute;
    right: -10px;
    top: 50%;
    transform: rotate(-45deg) translateY(-50%);
    transition: right 0.15s ease-in-out;
    width: 4px;
    }

    .gallery-controls-next:hover::before {
    /* right: -18px; */
    right: 0px;
    }

    .gallery-nav {
    bottom: -15px;
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    position: absolute;
    width: 100%;
    }

    .gallery-nav li {
    background: #ccc;
    border-radius: 50%;
    height: 10px;
    margin: 0 16px;
    width: 10px;
    }

    .gallery-nav li.gallery-item-selected {
    background: #555;
    }

    a.control_prev, a.control_next {
    position: absolute;
    top: 40%;
    z-index: 999;
    display: block;
    padding: 4% 3%;
    width: auto;
    height: auto;
    color: black;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    cursor: pointer;
    }

    a.control_prev:hover, a.control_next:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease;
    }

    a.control_prev {
    border-radius: 0 2px 2px 0;
    }

    a.control_next {
    right: 0;
    border-radius: 1px 0 0 1px;
    }

    /* fine carosello */

    #Grafico_tappe{
     width: 150%;
    }

    #Tappe_future {
    width: 100%;
    padding: 40px;
    }
}

@media only screen and (max-width: 375px) {

.copertina {
  display: none;
 }

 .copertina_mobile {
   display: block;
   width: 100vw;
   height: 60vh;
   display: inline-block;
 }

 .copertina_mobile video{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
 }


.p {
font-size: 18px;
font-weight: 300;
line-height: 28px;
margin: auto;
color: white;
}
.top-bar{
/* display: flex;  */

overflow-x: hidden;
overflow-y: hidden;
width: 100vw;
}

.copertina{
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
margin: auto;
}

.copertina video{
  width: 100%;
}

.container{
width: 100%;
overflow-x:hidden;
/* background-color: pink;  */
}

.row{
 width: 80%;
 display: flex;
 padding: 0px;
 /* padding-left: 50px; */
 justify-content: center;
 /* margin-left: auto; */
}

.column-half{
width: 100%;
}

.grafico_div{
width: 110%;
}

#chart_percorso{
width: 100%;
height: 100%;
padding: 0px;
margin-top: 0px;
margin: 0px;

}

.grafico{
width: 85%;
padding: 0px;
margin-left: 20px;
/* padding-left: 20px;  */
}
.p_fonti{
width: 90%;
padding: 0px;
padding-top: 0px;
padding-bottom: 60px;
margin-left: 24px;
font-size:12px;
line-height: 18px;
opacity: 0.4;
}

.p_fonti_graficofonti{
width: 90%;
padding: 0px;
padding-top: 0px;
margin-left: -24px;
font-size:12px;
line-height: 18px;
opacity: 0.4;
text-align:left;

}

.notifica{
/* width: 100%; */
width: 100vw;
border-radius: 4px;
overflow-x: hidden;
overflow-y: hidden;
/* background-color: #EA352B; */
}


/* .grafico-fonti{
width: 110%;
height: auto;
padding: 10px;
margin-top: 0px;
} */

.juxtapose{
width: 90%;
height: 8%;
display: block;
padding-top: 15px;
}


/* carosello */

.gallery-item {
height: 200px;
/*opacity: 0; */
position: absolute;
transition: all 0.3s ease-in-out;
width: 200px;
z-index: 0;
}

.gallery-item-1 {
left: 15%;
/* opacity: .4; */
transform: translateX(-50%);
}

.gallery-item-2,
.gallery-item-4 {
height: 300px;
opacity: 1;
width: 300px;
z-index: 1;
}

.gallery-item-2 {
left: 30%;
transform: translateX(-50%);
}

.gallery-item-3 {
box-shadow: 0 0 0 rgba(255, 255, 255, 0.6), 0 0 0 rgba(255, 255, 255, 0.45), 0 0 0 rgba(255, 255, 255, 0.25), 0 0 0 rgba(255, 255, 255, 0.1);
height: 400px;
/*opacity: 1; */
left: 50%;
transform: translateX(-50%);
width: 400px;
z-index: 2;
}

.gallery-item-4 {
left: 70%;
transform: translateX(-50%);
}

.gallery-item-5 {
left: 85%;
opacity: .4;
transform: translateX(-50%);
}

.gallery-item-6{
left: 95%;
/* opacity: .4; */
transform: translateX(-50%);
/* width: 0px;
height:0px; */
}

.gallery-item-7{
left: 100%;
/* opacity: .4; */
transform: translateX(-50%);
}

.gallery-controls {
background-color: transparent;

border: 0;
cursor: pointer;
font-size: 16px;
/* margin: 0 220px; */
/* margin: 0px 0px; */
/* padding: 0 6px; */
/* padding: 0 12px; */
text-transform: capitalize;
position:absolute;
/* left: -335px; */
/* left: -300px; */
align-self: center
/* background-color: #EA352B; */
/* top: 360px; */
position:absolute;
bottom: 20px;
}


.gallery-controls button {
background-color: transparent;
color:rgb(255, 255, 255);
font-size: 25px;
border: 0;
cursor: pointer;
margin: 0 22px;
padding: 0 25px;
align-items: center;
text-transform: capitalize;

}

.gallery-controls button:focus {
outline: none;
}

.gallery-controls-previous {
position: relative;
}

.gallery-controls-previous::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
left: -10px;
padding: 2px;
position: absolute;
top: 0;
transform: rotate(135deg) translateY(-50%);
transition: left 0.15s ease-in-out;
width: 4px;
}

.gallery-controls-previous:hover::before {
/* left: -18px; */
left: 0px;
}

.gallery-controls-next {
position: relative;
}

.gallery-controls-next::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
padding: 2px;
position: absolute;
right: -10px;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
transition: right 0.15s ease-in-out;
width: 4px;
}

.gallery-controls-next:hover::before {
/* right: -18px; */
right: 0px;
}

.gallery-nav {
bottom: -15px;
display: flex;
justify-content: center;
list-style: none;
padding: 0;
position: absolute;
width: 100%;
}

.gallery-nav li {
background: #ccc;
border-radius: 50%;
height: 10px;
margin: 0 16px;
width: 10px;
}

.gallery-nav li.gallery-item-selected {
background: #555;
}

a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
color: black;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}

a.control_prev {
border-radius: 0 2px 2px 0;
}

a.control_next {
right: 0;
border-radius: 1px 0 0 1px;
}

/* fine carosello */

/* #Grafico_tappe{
width: 100%;
padding:0px;
} */

#Grafico_tappe{
 width: 180%;
}

#Tappe_future {
width: 110%;
padding: 40px;
}

}

@media only screen and (max-width: 320px) {

.copertina {
  display: none;
 }

 .copertina_mobile {
   display: block;
   width: 100vw;
   height: 70vh;
   display: inline-block;
 }

 .copertina_mobile video{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    width: 100vw;
    height: auto;
    object-fit: cover;
 }


.p {
font-size: 18px;
font-weight: 300;
line-height: 28px;
margin: auto;
color: white;
}
.top-bar{
/* display: flex;  */

overflow-x: hidden;
overflow-y: hidden;
width: 100vw;
}

.copertina{
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
margin: auto;
}

.copertina video{
  width: 100%;
}

.container{
width: 100%;
overflow-x:hidden;
/* background-color: pink;  */
}

.row{
 width: 80%;
 display: flex;
 padding: 0px;
 /* padding-left: 50px; */
 justify-content: center;
 /* margin-left: auto; */
}

.column-half{
width: 100%;
}

.grafico_div{
width: 110%;
}

#chart_percorso{
width: 100%;
height: 100%;
padding: 0px;
margin-top: 0px;
margin: 0px;

}

.grafico{
width: 85%;
padding: 0px;
margin-left: 20px;
/* padding-left: 20px;  */
}
.p_fonti{
width: 90%;
padding: 0px;
padding-top: 0px;
padding-bottom: 60px;
margin-left: 24px;
font-size:12px;
line-height: 18px;
opacity: 0.4;
}

.p_fonti_graficofonti{
width: 90%;
padding: 0px;
padding-top: 0px;
margin-left: -24px;
font-size:12px;
line-height: 18px;
opacity: 0.4;
text-align:left;

}

.notifica{
/* width: 100%; */
width: 90vw;
border-radius: 4px;
overflow-x: hidden;
overflow-y: hidden;
/* background-color: #EA352B; */
}

/* .grafico-fonti{
width: 110%;
height: auto;
padding: 10px;
margin-top: 0px;
} */

.juxtapose{
width: 90%;
height: 8%;
display: block;
padding-top: 15px;
}


/* carosello */

.gallery-item {
height: 200px;
/*opacity: 0; */
position: absolute;
transition: all 0.3s ease-in-out;
width: 200px;
z-index: 0;
}

.gallery-item-1 {
left: 15%;
/* opacity: .4; */
transform: translateX(-50%);
}

.gallery-item-2,
.gallery-item-4 {
height: 300px;
opacity: 1;
width: 300px;
z-index: 1;
}

.gallery-item-2 {
left: 30%;
transform: translateX(-50%);
}

.gallery-item-3 {
box-shadow: 0 0 0 rgba(255, 255, 255, 0.6), 0 0 0 rgba(255, 255, 255, 0.45), 0 0 0 rgba(255, 255, 255, 0.25), 0 0 0 rgba(255, 255, 255, 0.1);
height: 400px;
/*opacity: 1; */
left: 50%;
transform: translateX(-50%);
width: 400px;
z-index: 2;
}

.gallery-item-4 {
left: 70%;
transform: translateX(-50%);
}

.gallery-item-5 {
left: 85%;
opacity: .4;
transform: translateX(-50%);
}

.gallery-item-6{
left: 95%;
/* opacity: .4; */
transform: translateX(-50%);
/* width: 0px;
height:0px; */
}

.gallery-item-7{
left: 100%;
/* opacity: .4; */
transform: translateX(-50%);
}

.gallery-controls {
background-color: transparent;

border: 0;
cursor: pointer;
font-size: 16px;
/* margin: 0 220px; */
/* margin: 0px 0px; */
/* padding: 0 6px; */
/* padding: 0 12px; */
text-transform: capitalize;
position:absolute;
height: 3%;
/* left: -335px; */
/* left: -210px; */
align-self: center;
/* background-color: #EA352B; */
/* top: 360px; */
/* top: 400px; */
bottom: 50px;
}


.gallery-controls button {
background-color: transparent;
color:rgb(255, 255, 255);
font-size: 25px;
border: 0;
cursor: pointer;
margin: 0 22px;
padding: 0 25px;
/* align-items: center; */
align-self: center;
text-transform: capitalize;

}

.gallery-controls button:focus {
outline: none;
}

.gallery-controls-previous {
position: relative;
}

.gallery-controls-previous::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
left: -10px;
padding: 2px;
position: absolute;
top: 0;
transform: rotate(135deg) translateY(-50%);
transition: left 0.15s ease-in-out;
width: 4px;
}

.gallery-controls-previous:hover::before {
/* left: -18px; */
left: 0px;
}

.gallery-controls-next {
position: relative;
}

.gallery-controls-next::before {
border: solid #000;
border-width: 0 2px 2px 0;
content: '';
display: inline-block;
height: 4px;
padding: 2px;
position: absolute;
right: -10px;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
transition: right 0.15s ease-in-out;
width: 4px;
}

.gallery-controls-next:hover::before {
/* right: -18px; */
right: 0px;
}

.gallery-nav {
bottom: -15px;
display: flex;
justify-content: center;
list-style: none;
padding: 0;
position: absolute;
width: 100%;
}

.gallery-nav li {
background: #ccc;
border-radius: 50%;
height: 10px;
margin: 0 16px;
width: 10px;
}

.gallery-nav li.gallery-item-selected {
background: #555;
}

a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
color: black;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}

a.control_prev {
border-radius: 0 2px 2px 0;
}

a.control_next {
right: 0;
border-radius: 1px 0 0 1px;
}

/* fine carosello */

/* #Grafico_tappe{
width: 100%;
padding:0px;
} */

#Grafico_tappe{
 width: 180%;
}

#Tappe_future {
width: 110%;
padding: 40px;
}

}