body {
	width: 100%;
	height: 100%;
	color: white;
	background: linear-gradient(to bottom right, #390106, #7C010E, #390106);
	margin: 0;
	font-family: 'Lato', sans-serif;
	}
			
div#general {
	width: 100%;
	height: 100%;
	display: flex;
	justify-items: center;
	align-items: center;
	align-content: center;
	flex-direction: column;
	justify-content: center;
	}

p {
	margin:0;
}
			
img {
	margin-top: 60px;
	width: 10vh;
	height: 10vh;
}
			
div#eserciziario {
	color: #cecece;
	font-size: 28px;
	text-align: center;
	margin-top: 15px;
}
			
div#mio_id {
	background: linear-gradient(to bottom right, #303030,#eee,#303030);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
   	background-clip: text;
    text-fill-color: transparent;
	font-size: 80px;
	text-align: center;
}
			
div#div_to_center {
	width: 100%;
	height: 100%;
	text-align: center;
	DISPLAY: flex;
    flex-direction: column;
   	justify-content: flex-end;
   	align-items: center;
}

div#button_entrare {
	margin: 30px;
	width: 100%;
	height: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
			
div#button1 {
	width: 170px;
	height: 60px;
	border: 1px solid white;
	background-color: #7C010E;
	text-align: center;
	border-radius: 5px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	font-family: 'Lato', sans-serif;
	font-size: 16px;

}

div#button1:hover{
	background-color: #390106;
}
			

/* pagina interna (home page) ********************** ********************** ********************** ********************** ********************** ********************** */

header#menu {
	width: 100%;
	height: 100px;
	border-bottom: 1px solid white;
	background-color: #390106;
	display: flex;
	flex-direction: row;
}
img#backbell {
	height: 90px;
	width: 90px;
	margin-top: 5px;
	margin-left: 10px;
	cursor: pointer;
}
div#sinistra {
	width: 20%;
	display: flex;
}

div#destra {
	width: 80%;	
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

a.menuitem:link, a.menuitem:visited { 
	margin-right: 40px;
	margin-left: 200px;
	font-size: 25px;
	text-decoration: none;
	color: white;
}

a.menuitem:hover {
	margin-right: 40px;
	margin-left: 200px;
	font-size: 25px;
	text-decoration: none;
	color: rgb(176, 176, 176);
}

span.menuitem {
	margin-right: 40px;
	margin-left: 200px;
	font-size: 25px;
	text-decoration:none;
	color: rgb(218, 59, 59);
}

div#testo_home {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	align-content: center;
	justify-items: center;
	justify-content: center;

}
	
div#citazione{
	display: flex;
	align-items: center;
	align-content: center;
	width: 63%;
	justify-content: center;
	justify-items: center;
	text-align: center;
	margin-top: 6vh;
	font-size: 28px;
}
div#fonte_citazione {
	margin-top: 2vh;
}
img#immagine_amijournal {
	margin-top: 2vh;
	width: 24vh;
	height: 30vh;
	
}

div#spiegazione_elaborato{
	display: flex;
	align-items: center;
	align-content: center;
	width: 83%;
	justify-content: center;
	justify-items: center;

	margin-top: 3vh;
	font-size: 16px;
}

/* pagina interna (home page) ********************** ********************** ********************** ********************** ********************** ********************** */


div#storia_scritta {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	align-content: center;
	justify-items: center;
	justify-content: center;
	margin-left: 2vw;
	margin-right: 2vw;
}

div#titolo{
	font-size: 22px;
	margin-top: 2vh;

}

div#prima_parte {
	display: flex;
	flex-direction: row;
}

div#testo_prima_parte {
	display: flex;
	float: left;
	text-align: left;
}

img#foto1 {
	margin-top: 2vh;
	width: 15vh;
	height: 20vh;
	float: right;
	margin-left: 2vw;
}




div#seconda_parte {
	display: flex;
	flex-direction: row;
}

img#foto2 {
	margin-top: 2vh;
	width: 23vh;
	height: 15vh;
	margin-right: 2vw;
}

div#testo_seconda_parte {
	display: flex;
	float: left;
	text-align: right;
}


div#terza_parte {
	display: flex;
	flex-direction: row;
}

img#foto3 {
	margin-top: 2vh;
	width: 24vh;
	height: 18vh;
	margin-left: 2vw;
}

div#testo_terza_parte {
	display: flex;
	float: left;
	text-align: left;
}


div#quarta_parte {
	display: flex;
	flex-direction: row;
}

img#foto4 {
	margin-top: 2vh;
	width: 24vh;
	height: 14vh;
	margin-right: 2vw;
}

div#testo_quarta_parte {
	display: flex;
	float: left;
	text-align: right;
}



/* pagina contatti (Contatti) ********************** ********************** ********************** ********************** ********************** ********************** */

.blocco_contatti {
	width: auto;
	height: calc( 100vh - 100px );
	align-items: center;
	align-content: center;
	justify-content: center;
	display: flex;
	font-family: 'Lato', sans-serif;
	flex-direction: column;
}

div#buttonemail {
	height: 60px;
	width: 200px;
	border: 1px solid rgb(86, 0, 0);
	background-color: #ffffff;
	border-color: #390106;
	text-align: center;
	border-radius: 5px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	
}
div#button_email {
	margin: 30px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
#BE {
	color:#390106;
	text-decoration: none;
}

div#domande {
	margin: 30px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
}

div#SitoWeb_TheR {
	height: 90px;
	width: 90px;
	margin-top: 5px;
	margin-left: 10px;
	cursor: pointer;
	position: fixed;
	bottom:75px;
	right: 10px;
}



/* pagina Esercizi (Esercizi) ********************** ********************** ********************** ********************** ********************** ********************** */

a.Esercizi:link, a.Esercizi:visited {
	text-decoration: none;
	margin: 30px;
	font-size: 20px;
	color: white;
}

a.Esercizi:hover {
	text-decoration: underline;
	color: rgb(149, 149, 149);
}

div#indiceesercizi {
	margin: 30px;
	font-size: 20px;
}

/* pagina Esercizio 2_1 (Esercizi) ********************** ********************** ********************** ********************** ********************** ********************** */

div#descrizione_es2_1 {
	color: #ffffff;
	font-size: 20px;
	text-align: center;
	margin-top: 20vh;
	margin-left: 200px;
	margin-right: 200px;
	border:3px solid white;
	padding-top: 2vh;
	background-color: #390106;
}

div#songes2_1 {
	text-align: center;
	border-radius: 5px;
	border-top: 60px;
	display: flex;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	margin:40px;

}

/* pagina Esercizio 2_2 (Esercizi) ********************** ********************** ********************** ********************** ********************** ********************** */

div#descrizione_es2_2 {
		color: #ffffff;
		font-size: 20px;
		text-align: center;
		margin-left: 600px;
		margin-right: 600px;
		border:3px solid white;
		padding-top: 1vh;
		padding-bottom: 1vh;
		background-color: #390106;
}

div#audio_tot_2_2 {
	text-align: center;
	border-radius: 5px;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	flex-direction: column;
}
div#contenitore_button_2_2 {
	height: 82%;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	flex-direction: column;
}
div#primi_4 {
	text-align: center;
	border-radius: 5px;
	border-top: 30px;
	display: flex;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	margin:40px;

}
div#secondi_4 {
	text-align: center;
	border-radius: 5px;
	border-top: 60px;
	display: flex;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	margin:40px;

}
div#terzi_4 {
	text-align: center;
	border-radius: 5px;
	border-top: 60px;
	display: flex;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	margin:40px;

}

/* pagina Esercizio 3_1 (Esercizi) ********************** ********************** ********************** ********************** ********************** ********************** */

audio {
	margin: 40px;
}

div#overlay_inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	text-align: center;

}

#overlay_campane {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
  }

#text_campane{
	margin-bottom: 30px;
	display: flex;
	font-size: 50px;
	color: white;
	text-align: center;
	align-items: center;
}

div#campanelle_bianche {
	width: 100%;
	display: flex;
	align-items: center;
	align-items: center;
	text-align: center;
	justify-content: space-evenly;
	margin-top: 30px;
}

div#campanelle_bianche div {
	background-image: url("immagini/bell.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}

div#campanella_1 {
	height: 10vw;
	width: 10vw;
	
}
div#campanella_2 {
	height: 9.5vw;
	width: 9.5vw;
}
div#campanella_3 {
	height: 9vw;
	width: 9vw;
}
div#campanella_4 {
	height: 8.5vw;
	width: 8.5vw;
}
div#campanella_5 {
	height: 8vw;
	width: 8vw;
}
div#campanella_6 {
	height: 7.5vw;
	width: 7.5vw;
}
div#campanella_7 {
	height: 7vw;
	width: 7vw;
}
div#campanella_8 {
	height: 6.5vw;
	width: 6.5vw;
}
div#campanella_9 {
	height: 6vw;
	width: 6vw;
}
div#campanella_10 {
	height: 5.5vw;
	width: 5.5vw;
}
div#campanella_11 {
	height: 5vw;
	width: 5vw;
}
div#campanella_12 {
	height: 4.5vw;
	width: 4.5vw;
}
div#campanella_13 {
	height: 4vw;
	width: 4vw;
}

div#frecce_tot {
	width: 100%;
	display: flex;
	align-items: center;
	align-items: center;
	text-align: center;
	justify-content: space-evenly;
	margin-top: 10px;
}

div#frecce_tot div {
	background-image: url("immagini/freccia.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

div#freccia_1 {
	height: 4vw;
	width: 10vw;
	
}
div#freccia_2 {
	height: 4vw;
	width: 9.5vw;
}
div#freccia_3 {
	height: 4vw;
	width: 9vw;
}
div#freccia_4 {
	height: 4vw;
	width: 8.5vw;
}
div#freccia_5 {
	height: 4vw;
	width: 8vw;
}
div#freccia_6 {
	height: 4vw;
	width: 7.5vw;
}
div#freccia_7 {
	height: 4vw;
	width: 7vw;
}
div#freccia_8 {
	height: 4vw;
	width: 6.5vw;
}
div#freccia_9 {
	height: 4vw;
	width: 6vw;
}
div#freccia_10 {
	height: 4vw;
	width: 5.5vw;
}
div#freccia_11 {
	height: 4vw;
	width: 5vw;
}
div#freccia_12 {
	height: 4vw;
	width: 4.5vw;
}
div#freccia_13 {
	height: 4vw;
	width: 4vw;
}

div.drag_and_drop {
	width: 350px;
	height: 70px;
	border: 1px transparent;
	align-items: center;
	justify-content: center;
	display: flex;
}

div#seconda_riga {
	width: 100%;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: space-evenly;
	margin-top: 30px;
}

div#drag_1 {
	height: 5vw;
	width: 10vw;
	
}
div#drag_2 {
	height: 5vw;
	width: 9.5vw;
}
div#drag_3 {
	height: 5vw;
	width: 9vw;
}
div#drag_4 {
	height: 5vw;
	width: 8.5vw;
}
div#drag_5 {
	height: 5vw;
	width: 8vw;
}
div#drag_6 {
	height: 5vw;
	width: 7.5vw;
}
div#drag_7 {
	height: 5vw;
	width: 7vw;
}
div#drag_8 {
	height: 5vw;
	width: 6.5vw;
}
div#drag_9 {
	height: 5vw;
	width: 6vw;
}
div#drag_10 {
	height: 5vw;
	width: 5.5vw;
}
div#drag_11 {
	height: 5vw;
	width: 5vw;
}
div#drag_12 {
	height: 5vw;
	width: 4.5vw;
}
div#drag_13 {
	height: 5vw;
	width: 4vw;
}

div.drop {
	height: 4.5vw;
	width: 4.5vw;
	border: 1px solid white;
	align-items: center;
	text-align: center;
	justify-content: center;
}

div#contenitore_campanelle_marroni {
	align-items: center;
	display: flex;
	text-align: center;
	justify-content: center;
}

div#campanelle_marroni {
	width: 60vw;
	height: 5vw;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	margin: 20px;
	margin-top: 70px;
	border: solid 1px white;
	padding: 10px;
}

img.campane_marroni {
	height: 4vw;
	width: 4vw;
	margin: 0;
	cursor: pointer;
}

div#spiegazione_3_1 {
	text-align: center;
	align-items: center;
	margin: 30px;
	font-size: 20px;
}

div#button_controlla_3_1 {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

div#button_3_1 {
	width: 170px;
	height: 60px;
	border: 1px solid white;
	background-color: #7C010E;
	text-align: center;
	border-radius: 5px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
}

div#button_3_1:hover{
	background-color: #390106;
}

div#button_container_continua_3_1 {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

div#button_continua_3_1 {
	width: 170px;
	height: 60px;
	border: 1px solid white;
	background-color: #7C010E;
	text-align: center;
	border-radius: 5px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	margin-top: 20px;
}

div#button_continua_3_1:hover{
	background-color: #390106;
}

/* pagina Esercizio 3_2 (Esercizi) ********************** ********************** ********************** ********************** ********************** ********************** */

div#legnetti_rossi {
	width: 100%;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: space-evenly;
	margin-top: 5px;

}

div#contenitore_prima_parte {
	width: 100%;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: space-evenly;
	flex-direction: row;

}

div.contenitore_colonna {
	height: 45vh;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: space-evenly;
	flex-direction: column;
}

img.legnetto_r {
	height: 6.5vw;
	width: 6.5vw;
	cursor: pointer;
}

div#seconda_legno_riga {
	width: 100%;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: space-evenly;
	margin-top: 5px;
}

div.drag_and_drop_legno {
	height: 70px;
	border: 1px transparent;
	align-items: center;
	justify-content: center;
	display: flex;
}

div#frecce_legno_tot {
	width: 100%;
	height: 10vw;
	display: flex;
	align-items: center;
	align-items: center;
	text-align: center;
	justify-content: space-evenly;

}

div.frecce_legno {
	width: 100%;
	height: 5vw;
	background-image: url("immagini/freccia.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

div#spiegazione_3_2 {
	text-align: center;
	align-items: center;
	margin-top: 20px;
	font-size: 20px;
}

div#button_controlla_3_2 {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

#text_legni{
	margin-bottom: 30px;
	display: flex;
	font-size: 50px;
	color: white;
	text-align: center;
	align-items: center;
}

div#button_container_continua_3_2 {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

div#button_continua_3_2 {
	width: 170px;
	height: 60px;
	border: 1px solid white;
	background-color: #7C010E;
	text-align: center;
	border-radius: 5px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	margin-top: 20px;
}

div#button_continua_3_2:hover{
	background-color: #390106;
}

div#legnettii_bluu {
	width: 30vw;
	height: 5vw;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	margin: 20px;
	margin-top: 70px;
	border: solid 1px white;
	padding: 10px;
}


#overlay_legnetti {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
  }

/* pagina Esercizi 4_1 (Esercizi) ********************** ********************** ********************** ********************** ********************** ********************** */

div#intensita_audio {
	height: 55%;
	display: flex;
	align-items: center;
	align-content: center;
	text-align: center;
	justify-content: center;
	margin: 20px;
}

.intensita {
	height: 9vw;
	width: 9vw;
	margin-left: 15px;
	margin-right: 15px;
	cursor: pointer;
}

div#pp {
	background-image: url("immagini/intensita_bianche/pp.png");
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;
}

div#p {
	background-image: url("immagini/intensita_bianche/p.png");
	background-size: 77%;
	background-position: center;
	background-repeat: no-repeat;
}
div#mp {
	background-image: url("immagini/intensita_bianche/mp.png");
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: 4px;
}
div#mf {
	background-image: url("immagini/intensita_bianche/mf.png");
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: 4px;
}
div#f {
	background-image: url("immagini/intensita_bianche/f.png");
	background-size: 77%;
	background-position: center;
	background-repeat: no-repeat;
}
div#ff {
	background-image: url("immagini/intensita_bianche/ff.png");
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;
}

/* pagina Esercizi 4_4 (Esercizi) ********************** ********************** ********************** ********************** ********************** ********************** */

div#contenitore_strumenti {
	height: 9vw;
	margin-top: 4vw;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-items: center;
	border: solid 1px white;
}

div#contenitore_strumenti div {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-items: center;
}

.percussioni_immagini {
	height: 8vw;
	width: 8vw;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	justify-items: center;
	cursor: pointer;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}

div#p_l_1 {
	background-image: url(immagini/percussioni/p_legno_1.png) ;
	cursor: pointer;
}
div#p_l_2 {
	background-image: url(immagini/percussioni/p_legno_2.png) ;
}
div#p_l_3 {
	background-image: url(immagini/percussioni/p_legno_3.png) ;
}
div#p_l_4 {
	background-image: url(immagini/percussioni/p_legno_4.png) ;
}

div#p_m_1 {
	background-image: url(immagini/percussioni/p_membrana_1.png) ;
}
div#p_m_2 {
	background-image: url(immagini/percussioni/p_membrana_2.png) ;
}
div#p_m_3 {
	background-image: url(immagini/percussioni/p_membrana_3.png) ;
}
div#p_m_4 {
	background-image: url(immagini/percussioni/p_membrana_4.png) ;
}

div#p_met_1 {
	background-image: url(immagini/percussioni/p_metallo_1.png) ;
}
div#p_met_2 {
	background-image: url(immagini/percussioni/p_metallo_2.png) ;
}
div#p_met_3 {
	background-image: url(immagini/percussioni/p_metallo_3.png) ;
}
div#p_met_4 {
	background-image: url(immagini/percussioni/p_metallo_4.png) ;
}

div#contenitore_dei_contenitori {
	align-items: center;
	display: flex;
	text-align: center;
	justify-content: center;
}

div#contenitore_strumenti_legno {
	flex-direction: column;
	align-items: center;
	display: flex;
	text-align: center;
	justify-content: center;
}
div#quadrato_legno {
	width: 29vw;
	height: 18vw;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	margin: 20px;
	margin-top: 40px;
	border: solid 3px red;
	padding: 10px;
	flex-wrap: wrap;
}

div#contenitore_strumenti_membrana {
	flex-direction: column;
	align-items: center;
	display: flex;
	text-align: center;
	justify-content: center;
}
div#quadrato_membrana {
	width: 29vw;
	height: 18vw;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	margin: 20px;
	margin-top: 40px;
	border: solid 3px blue;
	padding: 10px;
	flex-wrap: wrap;
}

div#contenitore_strumenti_metallo {
	flex-direction: column;
	align-items: center;
	display: flex;
	text-align: center;
	justify-content: center;
}
div#quadrato_metallo {
	width: 29vw;
	height: 18vw;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	margin: 20px;
	margin-top: 40px;
	border: solid 3px yellow;
	padding: 10px;
	flex-wrap: wrap;
}

div#button_controlla_4_3 {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 3vw;
	cursor: pointer;
}

div#button_4_3 {
	width: 170px;
	height: 60px;
	border: 1px solid white;
	background-color: #7C010E;
	text-align: center;
	border-radius: 5px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	cursor: pointer;
}

div#button_4_3:hover{
	background-color: #390106;
	cursor: pointer;
}

#overlay_percussioni {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
  }

  #text_percussioni{
	margin-bottom: 30px;
	display: flex;
	font-size: 50px;
	color: white;
	text-align: center;
	align-items: center;
}

/* pagina Esercizio 3_4 (Esercizi) ********************** ********************** ********************** ********************** ********************** ********************** */

div#contenitore_3_4{
	display: flex;
	width: 100vw;
	height: 80vh;
	align-items: center;
	align-content: center;
	justify-content: center;
	justify-items: center;
	margin-top: 2vw;
}

div#inno_immagine{ 
	width: 30vw;
	height: 48vw;
	display: flex;
	background-image: url("immagini/termini_mancanti/inno.jpg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-left: 4vw;
	margin-right: 4vw;

}

.immagini_completa {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	margin-right: 5vw;
	margin: 2vw;
}

.immagini_completa img {
	margin: 0;
	margin-right: 2vw;
}

input[type=text] {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	box-sizing: border-box;
  }

div#button_controlla_3_4 {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

div#button_3_4 {
	width: 170px;
	height: 60px;
	border: 1px solid white;
	background-color: #7C010E;
	text-align: center;
	border-radius: 5px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
}
div#button_3_4:hover{
	background-color: #390106;
}

#overlay_completa {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
  }

#text_completa{
	margin-bottom: 30px;
	display: flex;
	font-size: 50px;
	color: white;
	text-align: center;
	align-items: center;
}

div#button_container_continua_3_4 {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

div#button_continua_3_4 {
	width: 170px;
	height: 60px;
	border: 1px solid white;
	background-color: #7C010E;
	text-align: center;
	border-radius: 5px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	margin-top: 20px;
}

div#button_continua_3_4:hover{
	background-color: #390106;
}

/* pagina Storia ********************** ********************** ********************** ********************** ********************** ********************** */

div#prima_parte {
	display: flex;
	align-items: center;
	align-content: center;
	text-align: center;
}

div#foto1 {
	width: 110px;
	height: 130px;
}

div#seconda_parte {
	display: flex;
	align-items: center;
	align-content: center;
	text-align: center;
}

div#foto2 {
	height: 15vw;
	width: 10vw;
}

div#terza_parte {
	display: flex;
	align-items: center;
	align-content: center;
	text-align: center;
}

div#foto3 {
	height: 15vw;
	width: 10vw;
}

div#quarta_parte {
	display: flex;
	align-items: center;
	align-content: center;
	text-align: center;
}

div#foto4 {
	align-items: center;
	align-content: center;
	display: flex;
	text-align: center;
	justify-content: center;
	justify-items: center;
}

/* esercizio 3.3  ********************** ********************** ********************** ********************** ********************** ********************** */

div#sapore_di_sale {
	align-items: center;
	align-content: center;
	display: flex;
	text-align: center;
	justify-content: center;
	justify-items: center;
	
}

div#sapore_immagine{ 
	width: 43vw;
	height: 70vh;
	display: flex;
	background-image: url("IEEE/sapore_di_sale/score_piccolo.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-left: 4vw;
	margin-right: 4vw;
	margin-top: 5vw;

}

div#do_immagine{ 
	width: 43vw;
	height: 70vh;
	display: flex;
	background-image: url("immagini/canzoneDo.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-left: 4vw;
	margin-right: 4vw;
	margin-top: 5vw;

}

div#button_ascolta {
	width: 170px;
	height: 60px;
	border: 1px solid white;
	background-color: #7C010E;
	text-align: center;
	border-radius: 5px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
}

div#button_ascolta:hover{
	background-color: #390106;
}


/* esercizio 5.2  ********************** ********************** ********************** ********************** ********************** ********************** */

div#contenitore_button {
	height: 100%;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	flex-direction: column;
}

div#button_indietro {
	width: 170px;
	height: 60px;
	border: 1px solid white;
	background-color: #7C010E;
	text-align: center;
	border-radius: 5px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	margin-top: 10vw;
}

div#button_indietro:hover{
	background-color: #390106;
}

div#button_scelta {
	width: 170px;
	height: 60px;
	border: 1px solid white;
	background-color: #7C010E;
	text-align: center;
	border-radius: 5px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	margin-top: 3vw;
}

div#button_scelta:hover{
	background-color: #390106;
}

div#contenitore_esercizio5_2 {
	margin-top: 0%;
	display: flex;
	flex-direction: column;
}

div#contenitore_drop {
	margin-top: 1vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
}


.classe_contenitore {
	height: 8vh ;
	width: 96vw;
	display: flex;
	flex-direction: row;
}

.classe_semibreve {
	height: 8vh ;
	width: 96vw;
	display: flex;
	flex-direction: row;
	background-color: #390106;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/6.png") ;
	background-size: 20%;
	background-position: center;
	background-repeat: no-repeat;

}

.classe_minima {
	height: 8vh ;
	width: 48vw;
	display: flex;
	flex-direction: row;
	background-color: #390106;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/7.png") ;
	background-size: 40%;
	background-position: center;
	background-repeat: no-repeat;
}

.classe_semiminima {
	height: 8vh ;
	width: 24vw;
	display: flex;
	flex-direction: row;
	background-color: #390106;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/8.png") ;
	background-size: 70%;
	background-position: center;
	background-repeat: no-repeat;
}

.classe_croma {
	height: 8vh ;
	width: 12vw;
	display: flex;
	flex-direction: row;
	background-color: #390106;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/9.png") ;
	background-size: 130%;
	background-position: center;
	background-repeat: no-repeat;
}

.classe_semicroma {
	height: 8vh ;
	width: 6vw;
	display: flex;
	flex-direction: row;
	background-color: #390106;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/10.png") ;
	background-size: 170%;
	background-position: center;
	background-repeat: no-repeat;
}

div#contenitore_drag {
	margin-top: 6vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
}

div#contenitore_drag_altri {
	margin-top: 1.5vw;
}


div#semiminima{
	margin-left: 2vw;
}

div#croma {
	margin-left: 2vw;
}

div#semicroma{
	margin-left: 2vw;
}
		
.classe_semibreve_drag {
	height: 8vh ;
	width: 96vw;
	display: flex;
	flex-direction: row;
	background-color: #fdb955;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/1semibreve.png") ;
	background-size: 8%;
	background-position: center;
	background-repeat: no-repeat;
}

.classe_minima_drag {
	height: 8vh ;
	width: 48vw;
	display: flex;
	flex-direction: row;
	background-color: #fdb955;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/2minima.png") ;
	background-size: 13%;
	background-position: center;
	background-repeat: no-repeat;
}

.classe_semiminima_drag {
	height: 8vh ;
	width: 24vw;
	display: flex;
	flex-direction: row;
	background-color: #fdb955;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/3semiminima.png") ;
	background-size: 25%;
	background-position: center;
	background-repeat: no-repeat;
}

.classe_croma_drag {
	height: 8vh ;
	width: 12vw;
	display: flex;
	flex-direction: row;
	background-color: #fdb955;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/4croma.png") ;
	background-size: 45%;
	background-position: center;
	background-repeat: no-repeat;
}

.classe_semicroma_drag {
	height: 8vh ;
	width: 6vw;
	display: flex;
	flex-direction: row;
	background-color: #fdb955;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/5semicroma.png") ;
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;
}

div#button_reload {
	height: 7vh ;
	width: 5vw;
	display: flex;
	flex-direction: row;
	background-image: url("immagini/immagini5_2/reload.png") ;
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: 1vw;
	cursor: pointer;
}
div#button_indietro5_2 {
	height: 7vh ;
	width: 5vw;
	display: flex;
	flex-direction: row;
	background-image: url("immagini/immagini5_2/indietro5_2.png") ;
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: 1vw;
	cursor: pointer;
}

div#buttons_note5_2 {
	width: 100vw;
	display: flex;
	align-items: center;
	align-content: space-around;
	justify-content: flex-end;
}

/* esercizio 5.2  ********************** ********************** ********************** ********************** ********************** ********************** */

.classe_pausa_semibreve_drag {
	height: 8vh ;
	width: 96vw;
	display: flex;
	flex-direction: row;
	background-color: #fdb955;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/11semibreve.png") ;
	background-size: 5%;
	background-position: center;
	background-repeat: no-repeat;
}

.classe_pausa_minima_drag {
	height: 8vh ;
	width: 48vw;
	display: flex;
	flex-direction: row;
	background-color: #fdb955;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/12minima.png") ;
	background-size: 11%;
	background-position: center;
	background-repeat: no-repeat;
}

.classe_pausa_semiminima_drag {
	height: 8vh ;
	width: 24vw;
	display: flex;
	flex-direction: row;
	background-color: #fdb955;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/13semiminima.png") ;
	background-size: 17%;
	background-position: center;
	background-repeat: no-repeat;
}

.classe_pausa_croma_drag {
	height: 8vh ;
	width: 12vw;
	display: flex;
	flex-direction: row;
	background-color: #fdb955;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/14croma.png") ;
	background-size: 30%;
	background-position: center;
	background-repeat: no-repeat;
}

.classe_pausa_semicroma_drag {
	height: 8vh ;
	width: 6vw;
	display: flex;
	flex-direction: row;
	background-color: #fdb955;
	border: 2px solid #ffffff;
	background-image: url("immagini/immagini5_2/15semicroma.png") ;
	background-size: 60%;
	background-position: center;
	background-repeat: no-repeat;
}

/* esercizio 5.2  ********************** ********************** ********************** ********************** ********************** ********************** */

.button5_1 {
	width: 170px;
	height: 60px;
	border: 1px solid white;
	background-color: #7C010E;
	text-align: center;
	border-radius: 5px;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	margin-top: 3vw;
}

.button5_1:hover{
	background-color: #390106;
}


div#contenitore_button5_1 {
	width: 100%;
	height: 82%;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	flex-direction: column;
}
div#prime_note {
	width: 60%;
	text-align: center;
	border-radius: 5px;
	border-top: 30px;
	display: flex;
	align-content: center;
	justify-content:space-between;
	cursor: pointer;
	margin:40px;

}
div#seconde_note {
	width: 60%;
	text-align: center;
	border-radius: 5px;
	border-top: 30px;
	display: flex;
	align-content: center;
	justify-content: space-between;
	cursor: pointer;
	margin:40px;

}
div#terze_note {
	text-align: center;
	border-radius: 5px;
	border-top: 30px;
	display: flex;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	margin:40px;

}

div#button_scelta1{
	background-color: #E6DD02;
}
div#button_scelta1:hover{
	background-color: #7B5F18;
}


div#button_scelta2{
	background-color: #FF69BF;
}
div#button_scelta2:hover{
	background-color: #8a0061;
}


div#button_scelta3{
	background-color: #D60000;
}
div#button_scelta3:hover{
	background-color: #5f0303;
}


div#button_scelta4{
	background-color: #FD6510;
}
div#button_scelta4:hover{
	background-color: #a24108;
}


div#button_scelta5{
	background-color: #03D40B;
}
div#button_scelta5:hover{
	background-color: #06690b;
}


div#button_scelta6{
	background-color: #025DC8;
}
div#button_scelta6:hover{
	background-color: #000279;
}


div#button_scelta7{
	background-color: #A702C8;
}
div#button_scelta7:hover{
	background-color: #6f0079;
}



div#contenitore_note {
	width: 100%;
	background-image:url("immagini/linee.png");
	background-position: top;
	background-repeat: repeat-x;
	padding-bottom: 1vh;
}

div#div_esterno_note {
	display: flex;
	flex-direction: row;
}

.note_spartito {
	height: 7.5vh;
	width: 7.5vh;
	background-color: #ffffff;
	border-radius: 100%;
	margin-top: -2.5vh;
	text-align: center;
	color: #390106;
	line-height: 7vh;
	cursor: pointer;
}

div#chiave_img {
	width: 125px;
	height: 479px;
	background-image: url("immagini/linee1.png");
	background-position: top;
}

div#nota1 {
	background-color: #ffffff;
	margin-left: 90%;
	visibility: hidden;

}
div#nota2 {
	background-color: #ffffff;
	margin-left: 80%;
	margin-top: 5vh;
}
div#nota3 {
	background-color: #ffffff;
	margin-left: 70%;
}
div#nota4 {
	background-color: #ffffff;
	margin-left: 60%;
}
div#nota5 {
	background-color: #ffffff;
	margin-left: 50%;
}
div#nota6 {
	background-color: #ffffff;
	margin-left: 40%;
}
div#nota7 {
	background-color: #ffffff;
	margin-left: 30%;
}
div#nota8 {
	background-color: #ffffff;
	margin-left: 20%;
}
div#nota9 {
	background-color: #ffffff;
	margin-left: 10%;
}

.note_spartito_sotto {
	height: 7.5vh;
	width: 7.5vh;
	background-color: #ffffff;
	border-radius: 100%;
	text-align: center;
	color: #390106;
	line-height: 7vh;
	background-color: yellow;
	cursor: pointer;
	margin-top: -7vh;
}
div#contenitore_note_sotto {
	width: 100%;
	margin-top: 14vh;
	flex-direction: row;
	display: flex ;
	align-items: center;
	justify-items: center;
	align-content: center;
	justify-content: space-around;
	
}

/* esercizio 5.2 RE ********************** ********************** ********************** ********************** ********************** ********************** */

.note_spartito_sotto_re {
	height: 7.5vh;
	width: 7.5vh;
	background-color: #ffffff;
	border-radius: 100%;
	text-align: center;
	color: #390106;
	line-height: 7vh;
	background-color: #FF69BF;
	cursor: pointer;
	margin-top: -7vh;
}

div#chiave_img_re {
	width: 125px;
	height: 479px;
	background-image: url("immagini/re.png");
	background-position: top;
}

/* esercizio 5.2 MI ********************** ********************** ********************** ********************** ********************** ********************** */

.note_spartito_sotto_mi {
	height: 7.5vh;
	width: 7.5vh;
	background-color: #ffffff;
	border-radius: 100%;
	text-align: center;
	color: #390106;
	line-height: 7vh;
	background-color: #D60000;
	cursor: pointer;
	margin-top: -7vh;
}

div#chiave_img_mi {
	width: 125px;
	height: 479px;
	background-image: url("immagini/mi.png");
	background-position: top;
}

/* esercizio 5.2 FA ********************** ********************** ********************** ********************** ********************** ********************** */

.note_spartito_sotto_fa {
	height: 7.5vh;
	width: 7.5vh;
	background-color: white;
	border-radius: 100%;
	text-align: center;
	color: #390106;
	line-height: 7vh;
	background-color: #FD6510;
	cursor: pointer;
	margin-top: -7vh;
}

div#chiave_img_fa {
	width: 125px;
	height: 479px;
	background-image: url("immagini/fa.png");
	background-position: top;
}


/* esercizio 5.2 SOL ********************** ********************** ********************** ********************** ********************** ********************** */

.note_spartito_sotto_sol {
	height: 7.5vh;
	width: 7.5vh;
	background-color: white;
	border-radius: 100%;
	text-align: center;
	color: #390106;
	line-height: 7vh;
	background-color: #03D40B;
	cursor: pointer;
	margin-top: -7vh;
}


div#chiave_img_sol {
	width: 125px;
	height: 479px;
	background-image: url("immagini/sol.png");
	background-position: top;
}



/* esercizio 5.2 LA ********************** ********************** ********************** ********************** ********************** ********************** */

.note_spartito_sotto_la {
	height: 7.5vh;
	width: 7.5vh;
	background-color: white;
	border-radius: 100%;
	text-align: center;
	color: #390106;
	line-height: 7vh;
	background-color: #025DC8;
	cursor: pointer;
	margin-top: -7vh;
}

div#chiave_img_la {
	width: 125px;
	height: 479px;
	background-image: url("immagini/la.png");
	background-position: top;
}


/* esercizio 5.2 SI ********************** ********************** ********************** ********************** ********************** ********************** */

.note_spartito_sotto_si {
	height: 7.5vh;
	width: 7.5vh;
	background-color: #ffffff;
	border-radius: 100%;
	text-align: center;
	color: #390106;
	line-height: 7vh;
	background-color: #A702C8;
	cursor: pointer;
	margin-top: -7vh;
}

div#chiave_img_si {
	width: 125px;
	height: 479px;
	background-image: url("immagini/si.png");
	background-position: top;
}