/*  finestre modali in puro css */

/* Stili di base di ombreggiatura e finestra modale  */
.overlay {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	visibility: hidden;
	/* sfondo oscurante */
	background-color: rgba(0, 0, 0, 0.7);
	opacity: 0;
	position: fixed; /* posizionamento fisso */
	cursor: default; /* tipo del cursore */
	-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-ms-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition: all 0.6s;
}
.overlay:target {
	visibility: visible;
	opacity: 1;
}

/* Stili delle finestre modali */
.popup {
	top: 0;
	left: 50%;
	z-index: 10000;
	margin: 0 auto;
	 width: 30%;
/* Posizionamento fisso, finestra rimane icolata allo scorimento della pagina */
	position: fixed;
	padding: 15px;
	border: 1px solid #383838;
	color: #000000;
	text-align: center;
	font-weight: bold;
/* arrotondamento dei angoli */
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	background-color: #FFFFFF;
/* ombra eserna */
	-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
	-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
	-ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
	-o-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
	box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
/* trasformazioni */
	-webkit-transform: translate(-50%, -150%);
	-ms-transform: translate(-50%, -150%);
	-o-transform: translate(-50%, -150%);
	transform: translate(-50%, -150%);
/* trasformazioni animate */
	-webkit-transition: transform 0.6s ease-out;
	-moz-transition: transform 0.6s ease-out;
	-ms-transition: transform 0.6s ease-out;
	-o-transition: transform 0.6s ease-out;
	transition: transform 0.6s ease-out;
}
/* attivo la finestra popup */
.overlay:target+.popup {
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
/* tablet */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.popup {
		width: 90%;
	}
}
/* smartfone*/
@media only screen and (min-width: 320px) and (max-width: 767px) {
	.popup {
		width:85%;
	}
}
/* immagine al interno della finestra */
.popup img {
	display: block;
	border: none;
	height: 30%;
	width: auto;
}