.box{
	width: 5%;
}	
.titolo{
	width: 40%;
}

#img1{
	width: 470px;
}

.documento{
	width: 70px;
	margin-top: -74px;
	right: 50px; /*sempre allineata a 50px dal margine destro del rettangolo, inl inea con il testo*/
}



@media (max-width: 2200px) { /*fuchsia*/
	
	.titolo{
		/*color: fuchsia;*/
	}
}

@media (max-width: 1850px) { /*yellow*/
	
	.titolo{
		/*color: yellow;*/
		width: 48%;
	}
	.box{
	}	
	.documento{
		width: 70px;
		margin-top: -90px;
	}
}		


@media (max-width: 1350px) { /*pink*/
	
	.titolo{
		/*color: pink;*/
		width: 48%;
	}
	.box{
		width:8%;
	}
	#img1{
		width: 450px;
	}	
	.documento{
		width: 65px;
		margin-top: -90px;
	}
}	

@media (max-width: 1200px) { /*orange*/
	
	.titolo{
		/*color: orange;*/
		width: 54%;
	}
	.box{
		width: 10%;
	}
	#img1{
		width: 400px;
	}
	.documento{
		width: 65px;
		margin-top: -90px;
	}
}

@media (max-width: 1000px){ /*green*/
	
	.titolo{
		/*color: green;*/
		width: 58%;
	}
	.box{
		width: 10%;
	}
	#img1{
		width: 350px;
	}	
	.documento{
		width: 60px;
		margin-top: -80px;
	}
}

@media (max-width: 850px){ /*aqua*/
	
	.titolo{
		/*color: aqua;*/
	}
	.box{
		width: 10%;
	}
	#img1{
		width: 300px;
	}		
	.documento{
		width: 60px;
		margin-top: -100px;
	}
}	

@media (max-width: 768px) { /*red*/
	
	.box{
		width: 10%;
	}
	.titolo{
		/*color: red;*/
		width: 85%;
	}
	#img1{
		width: 240px;
	}		
	.documento{
		width: 50px;
		margin-top: -100px;
		right: 30px;  /*per le immagini dei riquadri di DESTRA, mettere right 30px così è allineato al testo che ha padding-right 30px*/
	}
}	

@media (max-width: 570px) { /*brown*/
	.titolo{
		/*color: brown;*/
	}
	#img1{
		width: 200px;
	}
	.documento{
		width: 40px;
	}

}