#mappa {
	background-color:#cccccc;
	position:relative;
}

#mappa .altezza {
	padding-bottom: 25%;
}

#mappa .wrap-mappa {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#mappa .box {
	position:absolute;
	z-index: 2;
	background-color:rgba(255,255,255,0.85);
	width:80%;
	max-width:300px;
	top:50%;
	left:40px;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

#mappa .box .altezza {
	padding-bottom:80%;
}

#mappa .box .inside {
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	color:#333333;
	text-align:center;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size:1.2em;
	line-height: 1.7em;
}

/*///////////////////////////////////////////////////*/
@media (max-width: 1200px) {
	#mappa .altezza {padding-bottom:35%;}
}
@media (max-width: 992px) {
	#mappa .altezza {padding-bottom:50%;}
}
@media (max-width: 768px) {}
@media (max-width: 576px) {
	#mappa .altezza {padding-bottom:100%;}
	
	#mappa .box {
		width:80%;
		max-width:none;
		left:10%;
	}
}

@media all and (orientation:portrait) {}
@media all and (orientation:landscape) {}