*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans serif;
}

body{
background-color: #ffffe1;
	background-image: url('images/fondoNotas.png');
	background-repeat: repeat;
	display: none;
}

#divVelo, #divVelo2{
	position: absolute;
	width: 100vw;height: 100vh;
	background-color: rgba( 100, 100, 100, 0.7 );
	display: flex;
	justify-content: center; /*centrado horizontal*/
	align-items: center; /*centrado vertical con una height definida anteriormente*/
	flex-direction: column; /*flujo en columnas*/
	/*aparecer y desaparecer con transiciones: jugar con la opacidad y con z-index ( display y visibility no lo permiten )*/
	opacity: 1; /*con la opacidad sola desaparece el div, pero sigue encima e impide pulsar nada del div que está debajo*/
	transition: opacity 1s, z-index 2s; /*la transición z-indez no funciona, sólo demora el cambio para que de tiempo a que vea la transición de opacidad*/
}

#divVelo{
	z-index: 1; /*sólo funciona con elementos posicionados*/
}

#divVelo2{
	z-index: 0; /*sólo funciona con elementos posicionados*/
}

#divVentana, #divVentana2{
	background-color: #ffffe1;
	background-image: url('images/fondoNotas.png');
	box-shadow: 10px 10px 10px black;
	border: 1px solid black;
	border-radius: 2vw;
	font-size: 5vw;
	padding: 5vw;
	line-height: 9vw;
	width: 90vw;
	height: auto;
	display: flex;
	justify-content: center; /*centrado horizontal*/
	align-items: center; /*centrado vertical con una height definida anteriormente*/
	flex-direction: column;
}

#divVentana p{
	text-align: center;
}

#divVentana img, #divVentana2 img{
	width: 40%;
	height: auto;
	margin: 1%;
	box-shadow: 5px 5px 5px #c0c0c0;
	background-color: #c0c0c0; /*#6ECAE8;*/
	padding: 0;
	border: 3px ridge #ABDAE9; /*#6ECAE8;*/
	border-radius: 2vw;
	opacity: 0.7;
}

#divVentana2 img{
	width: 70%;
	height: auto;
	margin: 1%;
	box-shadow: 5px 5px 5px #c0c0c0;
	background-color: #6ECAE8;
	padding: 0;
	border: 3px ridge #6ECAE8;
	border-radius: 2vw;
	opacity: 1;
}

#divFondo{
	background-color: #ffffe1;
	background-image: url('images/fondoNotas.png');
	background-repeat: repeat;
	width: 100vw;
	/*height: 100vh; con una height definida, si el contenido es más alto, no se podrá hacer scroll */
	display: flex;
	justify-content: center; /*centrado horizontal*/
	align-items: center; /*centrado vertical simepre que haya una height definida anteriormente*/
	flex-direction: column; /*flujo en columnas*/
}

h1{
	font-size: 4vw;
	text-align: center;
	margin-top: 4vw;
	/*background-color: grey;*/
}

#divMarcador{
	width: 95vw;
	height: 1.3vh;
	border: 1px solid black;
	border-radius: 5vw;
	font-size: 1vh;/*sin esto el div punto queda por debajo del divMarcador...*/
}

#tocar{
	/*display: none;*/
}

#divPentagrama{
	width: 95vw;
	background-color: rgba( 255, 255, 225, 0.5 );
	/*border: 5px ridge #F0F07E;/*#C5C52A;*/*/
	border-radius: 2vw;
}

#divBotonera{
	/*background-color: rgba( 255, 255, 225, 1 );*/
	border-radius: 2vw;
	width: 100vw;
	display: flex;
	justify-content: center; /*centrado horizontal*/
	align-items: center; /*centrado vertical con una height definida anteriormente*/
	flex-direction: row; /*flujo en filas*/
	flex-wrap: wrap;
}

#divBotonera img{
	margin: 1vw;
	width: 31vw;
	box-shadow: 5px 5px 5px #c0c0c0;
	background-color: #6ECAE8;
	padding: 0;
	border: 3px ridge #ABDAE9; /*#6ECAE8;*/
	border-radius: 2vw;
}

@media only screen and ( orientation: landscape ){
	
	#divVentana, #divVentana2{
		font-size: 5vh;
		line-height: 7vh;
		width: 60vw;
		height: 80vh;
		padding: 5vh;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	#divVentana p{
		width: 50vw;
	}
	
	#divVentana img{
		width: 30%;
		border-radius: 2vh;
	}
	
	#divVentana2 img{
		width: 45%;
	}
	
	#divFondo{
		flex-direction: row;
		flex-wrap: wrap;
		/*height: 100vh; /*defino height para centrado vertical*/
	}
	
	h1{
		display: block;
		width: 100vw;
		font-size: 6vh;
		margin-top: 4vh;
	}
	
	#divMarcador{
		width: 85vw;
	}
	
	#divPentagrama{
		width: 45vw;
	}
	
	#divBotonera{
		width: 50vw;
	}
	
	#divBotonera img{
		margin: 1vw;
		width: 14.6vw;
		padding: 0;
		border-radius: 2vh;
		}
}