/* CSS Document */

.container-photo{
display: flex;
	display: -webkit-flex;
	flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
	align-items: stretch;
	-webkit-align-items: stretch;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	margin: 10px;
		padding: 0px;
}

 @media only screen
and (min-device-width : 800px){
.container-photo li {
display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	flex: 0 1 30%;
	-webkit-flex: 0 1 32%;
	margin: 10px 0px;
	padding: 0px;
}

.container-photo:after{
	content:"";  /*contenitore fittizio per spingere le ultime immagini a sinistra, altrimenti si posizionerebbero al centro, avendo impostato il justify-content al centro*/
display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	flex: 0 1 30%;
	-webkit-flex: 0 1 32%;
	margin: 10px 0px;
	padding: 0px;
		border: 0px solid red;
}
}

 @media only screen
and (max-device-width : 799px)
and (min-device-width : 480px){
.container-photo li {
display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	flex: 0 1 45%;
	-webkit-flex: 0 1 48%;
	margin: 10px 0px;
	padding: 0px;
}

.container-photo:after{
	content:"";  /*contenitore fittizio per spingere le ultime immagini a sinistra, altrimenti si posizionerebbero al centro, avendo impostato il justify-content al centro*/
display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	flex: 0 1 45%;
	-webkit-flex: 0 1 48%;
	margin: 10px 0px;
	padding: 0px;
		border: 0px solid red;
}
}

 @media only screen
and (max-device-width : 479px){
.container-photo li {
display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	flex: 0 1 100%;
	-webkit-flex: 0 1 100%;
	margin: 10px 0px;
	padding: 0px;
}
}

.container-photo li img{
	object-fit: cover; 
	max-width: 100%; /*garantire che le immagini scalino correttamente e non interrompano il layout quando si ridimensiona il viewport*/
	width: 100%;
	height: 100% auto; /*idem come sopra*/
	vertical-align: middle;
}

 @media only screen
and (max-device-width : 479px){
 .lightbox_max_479{
	 display:none;/*disabilita il codice js lightbox per larghezze inferiori a 480px*/
 }
}

 @media only screen
and (min-device-width : 480px){
 .lightbox_min_480{
	 display:none;/*abilita il codice js lightbox per larghezze superiori a 479px*/
 }
}



/*cornice applicata all'anteprima*/
.frame{
		border:2px solid rgb(174,174,174);
		border-radius:4px;
		-webkit-border-radius: 8px;
        -moz-border-radius: 8px;
		box-sizing: border-box;
}

/*effetto dissolvenza*/
.fade-effect {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
/*entità dell'effetto dissolvenza al passaggio del mouse*/
.fade-effect:hover {
opacity: .2;
}

/*effetto zoom al passaggio del mouse*/
.view{
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
}
.view img {
	display:block;
	transform: scale(1);
	transition: all .2s linear;
}

.view img:hover {
	transform: scale(1.1);
}

/*didascalia in sovraimpressione sulle miniature*/
.text-overlay {
    position: absolute;
	background: rgba(0,0,0,0.502);
    width: 100%;
	height:33%;
	bottom:0;
	left:0;
	display:flex;
	align-items:center;
	justify-content:center;
}

.text-overlay span{
	font-weight: bold;
    color:#ffffff;
	text-align:center;
	margin:6px;
}