@font-face {
    font-family: 'Sole24Sans-Regular';
    src: url('//c2.res.24o.it/fonts/sole-sans/Sole24SansW-Regular.eot');
    src: url('//c2.res.24o.it/fonts/sole-sans/Sole24SansW-Regular.eot?#iefix') format("eot"),
    url('//c2.res.24o.it/fonts/sole-sans/Sole24SansW-Regular.woff2') format("woff2"),
    url('//c2.res.24o.it/fonts/sole-sans/Sole24SansW-Regular.woff') format("woff"),
    url('//c2.res.24o.it/fonts/sole-sans/Sole24SansW-Regular.ttf') format("truetype");
    font-weight: 400;
    font-style: normal
    }

@font-face {
    font-family: 'Sole24Sans-Medium';
    src: url('//c2.res.24o.it/fonts/sole-sans/Sole24SansW-Medium.eot');
    src: url('//c2.res.24o.it/fonts/sole-sans/Sole24SansW-Medium.eot?#iefix') format("eot"),
    url('//c2.res.24o.it/fonts/sole-sans/Sole24SansW-Medium.woff2') format("woff2"),
    url('//c2.res.24o.it/fonts/sole-sans/Sole24SansW-Medium.woff') format("woff"),
    url('//c2.res.24o.it/fonts/sole-sans/Sole24SansW-Medium.ttf')
    format("truetype");
    font-weight: 500;
    font-style: normal
}



@font-face {
    font-family: 'Sole24SerifText-Bold';
    src: url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_Bd.eot');
    src: url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_Bd.eot?#iefix') format('embedded-opentype'),
    url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_Bd.woff2') format('woff2'),
    url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_Bd.woff') format('woff'),
    url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_Bd.ttf') format('truetype'),
    url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_Bd.svg#SoleSerifText_W_Bd') format('svg');
    font-weight: 700;
    font-style: normal
}



@font-face {
    font-family: 'Sole24SerifText-RegularIt';
      src: url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_RgIt.eot');
    src: url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_RgIt.eot?#iefix') format('embedded-opentype'),
    url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_RgIt.woff2') format('woff2'),
    url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_RgIt.woff') format('woff'),
    url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_RgIt.ttf') format('truetype'),
    url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_RgIt.svg#SoleSerifText_W_RgIt') format('svg');
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: 'Sole24SerifText-Regular';
    src: url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_Rg.eot');
    src: url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_Rg.eot?#iefix')
    format('embedded-opentype'),url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_Rg.woff2') format('woff2'),
    url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_Rg.woff') format('woff'),
    url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_Rg.ttf') format('truetype'),
    url('//c2.res.24o.it/fonts/w-fonts/SoleSerifText_W_Rg.svg#SoleSerifText_W_Rg') format('svg');
    font-weight: 400;
    font-style: normal
}



html { font-size: 12px;
overflow-x: hidden;
scroll-behavior: smooth;
}

body {
     margin: 0;
     background-color: #ECF1F4;   /* #ECF1F4; */
     font-family: 'Sole24SerifText-Regular';
}
p {
 font-size: 16px;
line-height: 24px;
}
 /* @media (min-width: 550px) {  .row { margin-right: 15%;
                                    margin-left: 15%;}  } */
 /* @media (min-width: 550px) {  .row { margin-right: 15%;
                                    margin-left: 15%;}  } */

/*Prima Pagina*/
#particles-js{
 position: absolute;
 z-index: -1;
  width: 100vw;
  height: 100vh;
  background-color:transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
#intestazione {
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 65px;
    text-align: center;
    background-color: #EAD6BB;
    z-index: 1;
}

#box_1 {
    text-align: center;
    height: 100vh;
    margin-top: 30px;
}

        #box_1 h2{
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: 600;
        }

/*Seconda Pagina*/
#box_2 {
    text-align: left;
    height: 70vh;
    margin-top: 5%;
}
#box_2 h5{ font-weight: 600; }
#citazione{
    font-style: italic;
    font-size: 0.95em;
  }
 /*Terza Pagina*/
 #box_3 {
         text-align: left;
          height: 120vh;
    }
    .panel3 {
												height: 100vh;
            width: 100%;
            margin: 0;
            padding: 0;
				}
.titolo_h3 { font-family: 'Sole24SerifText-Bold';
             font-weight: 600;
             font-size: 30px;
      }
.legenda {
  font-family:'Sole24Sans-Medium';
  font-size:16px;
 }
 .variabili {
  opacity: 0.7;
  fill:#989898;
  font-family:'Sole24Sans-Regular';
  font-size:18px;
 }
 .legenda-ascolti-desktop {
  font-family:'Sole24Sans-Medium';
  font-size:18px;
 }
 .variabili-ascolti-desktop {
   opacity: 0.7;
  fill:#989898;
  font-family:'Sole24Sans-Regular';
  font-size:15px;
 }
  .fonte-ascolti-desktop {
  opacity: 0.7;
  fill:#989898;
  font-family:'Sole24Sans-Regular';
  font-size:13px;
 }
 .variabili2 {
  opacity: 0.7;
  fill:#989898;
  font-family:'Sole24Sans-Regular';
  font-size:12px;
 }

 .fonte {
  opacity: 0.7;
  fill:#989898;
  font-family:'Sole24Sans-Regular';
  font-size:12px;
 }
 .linea {
  opacity:0.15;
  fill:none;
  stroke:#1D1E1C;
  stroke-width:0.25;
  stroke-miterlimit:10;
 }
 /*Quarta Pagina*/
#box_4{
    text-align: left;
    height: 60vh;
}
/*Quinta Pagina*/
#box_5{
			text-align: left;
			height: 50vh;
		}
 /*Sesta Pagina*/
   #box_6 {   text-align: center;
			 height: 3250vh;
  }
  #contenitore_grafico {
									position: relative;
									height:76vh;
									width: 100%;
		}
	/* menu grafico */
		.menu_grafico{
																position: relative;
																height: 12vh;
																width: 100%;
														  font-size: 0.95rem;
																font-family: 'Sole24Sans-Regular';
		}

			.testo_vr_sx{
																position: absolute;
																top:0;
																left: 0;
																color: #6699FF;
																text-align: left;
																writing-mode: vertical-rl;
				}

				.testo_centro_dx{
																					position: absolute;
																					top:10%;
																					right:15%;
																					width:20%;
																					text-align: right;
				}
				.testo_centro_sx{
																					position: absolute;
																					top:10%;
																					left:15%;
																					width:20%;
																					text-align: left;
				}

		.testo_vr_dx {position: absolute;
																text-align: left;

																right: 0;
																top:0;
																writing-mode: vertical-rl;

				}
				.testo_vr_dx ul{list-style:none;
																					padding-top: 0;
															     	margin-right: 0;}

				.T{color:#3C2FE9;  }
				.M{color:#3DCFD6; }
				.S{color:#C43EC8; }

		/* menu grafico ---- end */




		 #linee{
				position: absolute;
    left: 0;
    height: inherit;
			width: inherit;
    /*z-index: -1;*/
			}

#24_gennaio,#26_gennaio,#27_gennaio,#29_gennaio,#31_gennaio,#03_febbraio,#24_febbraio,
		#02_marzo,#07_marzo,#09_marzo,#10_marzo,#16_marzo,#28_marzo,#30_marzo,#06_aprile,#13_aprile
																				{

																				}
		 #news_pubblicate {
										position: absolute;
										left:0;
										height: inherit;
										overflow:visible;
		}

		#trenitalia, #mascherine, #supermercati {
										position: absolute;
										right:0;
										height: inherit;
										overflow:visible;
		}

		/* PANEL SCROLLMAGIC*/
				.panel {
												height: 100vh;
            width: 100%;
            margin: 0;
            padding: 0;

				}

				.panel2 {
												height: 60vh;
            width: 100%;
            margin: 0;
            padding: 0;

				}
				.caption {
            margin: auto;
            width: 60vw;
												max-width: 300px;
            height: 90vh;
												}

        .data, .parola { color:red;}
        .numero {color:blue;}

			#trf_mascherine, #trf_treni, #trf_supermercati {

												background-color: #ECF1F4;
											 margin: auto;
            width: 60vw;
												max-width: 400px;
            height: auto;
			}

			.anim_mascherine{

									position: relative;
									width:100%;
									height: 100%
			}
		.anim_mascherine img{

											 width: 40vw;
            position: absolute;
            top: 0px;
            left: 0px;
            opacity: 0;

			}


			.anim_treni{

									position: relative;
									width:100%;
									height: 100%
			}
		.anim_treni img{

											 width: 40vw;
            position: absolute;
            top: 0px;
            left: 0px;
            opacity: 0;

			}

			.anim_supermercati{

									position: relative;
									width:100%;
									height: 100%
			}
		.anim_supermercati img{

											 width: 40vw;
            position: absolute;
            top: 0px;
            left: 0px;
            opacity: 0;

			}


	/* PANEL SCROLLMAGIC --- fine ----*/

  /*Settima Pagina*/
  		#box_7{
    height: 80vh;
			 text-align: left;
		}
    #box_7 h6 {
            padding-top: 5vh;
            position: relative;
            font-weight: 600;
             }
    .panel7 {
												height: 100vh;
            width: 100%;
            margin: 0;
            padding: 0;
				}
 .legenda-igienizzanti-desktop {
  font-family:'Sole24Sans-Medium';
  font-size:18px;
 }
 .variabili-igienizzanti-desktop {
   opacity: 0.7;
  fill:#989898;
  font-family:'Sole24Sans-Regular';
  font-size:15px;
 }
  .fonte-igienizzanti-desktop {
  opacity: 0.7;
  fill:#989898;
  font-family:'Sole24Sans-Regular';
  font-size:13px;
 }
 #igienizzanti-mobile {
            height: 75vh;
            border: 0.1px solid #ECF1F4;
            overflow-x: scroll;
            position: relative;
        }

        #igienizzanti-mobile #chart {
            width: 2240px;
            position: absolute;
            left: -660px;  /* qui si anticipa il grafico orizziontale*/
        }
        #chart {
        height: 100%;
        }
        #igienizzanti-mobile h7 {position: absolute;}
        #igienizzanti-mobile p {position: absolute; top:0; left:0; font-size: 0.9rem;font-family:'Sole24Sans-Medium';}
 .variabili-igienizzanti {
  fill:#989898;
  font-family:'Sole24Sans-Regular';
  font-size:12px;
 }
   /*Ottava Pagina*/
 #box_8{ text-align: left;
			height: 65vh;
	}
 /*Nona Pagina*/
#box_9 {  text-align: left;
          height: 40vh;
}
#box_9 h6{
 position: relative;
 font-weight: 600;
}
/*Decima Pagina*/

#box_10 {  text-align: left;
          height: 90vh;

}
.variabili-twitter-desktop {
  opacity: 0.7;
  fill:#989898;
  font-family:'Sole24Sans-Regular';
  font-size:22px;
 }
 .legenda-twitter-desktop {
  font-family:'Sole24Sans-Medium';
  font-size:25px;
 }
.fonte-twitter-desktop {
  opacity: 0.7;
  fill:#989898;
  font-family:'Sole24Sans-Regular';
  font-size:20px;
 }
/*- GRAFICI TWITTER-------------------------------*/

#grafici_twitter {
    position: relative;
    max-width: 100%;
    width: 100%,
}
/*- GRAFICO BOLLE -------------------------*/
 #bolle_twitter {
    max-width: 100%;
    position: relative;
    height: auto
}
 #sequenza_di_bolle_desktop img {
    /*margin-top: 10%;*/
    width: 100%;
    position: relative;
    height: auto
}
 #sequenza_di_bolle_mobile img {
    margin-top: 10%;
    width: 100%;
    position: relative;
    height: auto;
}
/*- GRAFICO TWITTER LINECHART DESKTOP------*/
#linea_grafico_twitter {
            margin-top: 30%;
            width: 100%;
            /*max-width: 100%;*/
}
#grafico_twitter_desktop svg {
            /*transform: translateY(-50%);*/
            height: 100%;
            width: 100%
}
#grafico-twitter-mobile svg {
            /*transform: translateY(-50%);*/
            height: 100%;
            width: 100%;
}


/*----------------------------------------------------------------------------------------BOX 12----------*/



/*--------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------*/


/*--- PARTE PER MOBILE------------( da sistemare )-------------------*/



/*Undicesima Pagina-----BUBBLE CSS A PARTE */
#container_bubble{
                 background-color: unset;
                  }

#box_bubble {
            overflow: hidden;
            position: relative;
            text-align: center;
            height: 100vh;
            width: 100%;

        }


/*Dodicesima Pagina*/

    #box_12  h2{
            font-weight: 600;
    }
    #box_12 {
            position: relative;
            text-align: center;
            height: 70vh;
            }
 /* ------- CREDITI-----------*/

  #crediti{
    position: relative;
    text-align: center;
    background-color:#1e1e24;
    color: #ECF1F4;

    padding:3%;
    margin:auto;
    }
    .crediti_logo {
     position: relative;
                width:75px;


                }

    .crediti_logo img{
                padding-top: 5px;
                width: 70px;
                float:left;
                }

   .crediti_contenuto{
                position: relative;
                text-align: left;
                margin:auto;
                padding-left: 90px;
                }

   .crediti_contenuto p{
               font-family: 'Sole24Sans-Regular';
               font-size: 1.2rem;
               }

    /* Larger than mobile */
@media (max-width: 400px) {
 #box_3 {margin-top: 45%;}
 .legenda {
  font-family:'Sole24Sans-Medium';
  font-size:14px;
 }
 .variabili {font-size: 10px;}
 .fonte {font-size: 10px;}

 /*#box_10 {margin-top: 45%;}*/


}

@media (min-width: 500px) {
 #ascolti-tv-mobile svg {display: none;}
 #igienizzanti-mobile {display: none;}
 #grafico-twitter-mobile svg {display: none;}
 #sequenza_di_bolle_mobile img {display: none;}

 #box_10 {padding-top: 15vh;}
}


@media (max-width: 500px) {
 #ascolti-tv-desktop svg {display: none;}
 .panel7 {display: none;} /*nasconde igienizzanti desktop*/
  #box_7 {height: 100vh;}
  #grafico-twitter-desktop svg {display: none;}
  #sequenza_di_bolle_desktop img {display: none;}


}
@media (max-width: 650px) {
.menu_grafico{	font-size: 0.6rem;
		}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {

}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}