﻿/*Eliminates padding, centers the thumbnail */

body, html {
padding: 0;
margin: 0;
text-align: center;
}


#gallery_wrapper {
/*	margin:0 200px 0 200px;
	position:relative;
*/
	width:96%;
	margin:auto;
}

a.lightbox {
	color:white;
}

/* Styles the thumbnail */
/*cambia height per cambiare le dimensioni della thumbnail*/
a.lightbox img {
	height : 300px;
	width:  300px;
	object-fit: cover;
	
	/*border: 3px solid white;*/
	/*box-shadow: 0px 0px 8px rgba(0,0,0,.3);*/
	margin: 4px 8px 4px 8px;
	padding:0 0 0 0;
}

/*formatta e posizione il testo di commento alla slide*/
.lightbox-text {
	position:absolute;
	bottom:0;margin:0;
	padding-left:5%;
	padding-right:5%;
	width:90%;
	color:#F5F5F5;
	font-family:"Helvetica";
	letter-spacing:1px;
	font-size:24px;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.lightbox-target {
position: fixed;
top: -100%;
background: rgba(0,0,0,.9);
width: 100%;
height:auto;
left:0;
opacity: .8;
-webkit-transition: opacity 1.5s ease-in-out;
-moz-transition: opacity 1.5s ease-in-out;
-o-transition: opacity 1.5s ease-in-out;
transition: opacity 1.5s ease-in-out;
overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
width:auto;
height:auto;
margin: auto; 
/*padding-top:12%;
padding-bottom:8%;
*/
padding-top:12px;
padding-bottom:40px;
position: relative;
max-height: 0%;
max-width: 0%;
/*border: 3px solid white;*/
border:0;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
/*-webkit-transition: opacity 1.5s ease-in-out;
-moz-transition: opacity 1.5s ease-in-out;
-o-transition: opacity 1.5s ease-in-out;
transition: opacity 3.5s ease-in-out;
*/overflow: hidden;
}


/* Styles the left link, adds the slide down transition */
a.lightbox-left {
display: block;
width:70px;
height:70px;
box-sizing: border-box;
background:rgba(0,0,0,0);
/*background:black;*/
border-radius:10px;
opacity: .8;
color: white;
text-decoration: none;
position: absolute;
/*top: -80px;*/
margin-top:22%;
left: 2%;
/*-webkit-transition: 1.0s ease-in-out;
-moz-transition: 1.0s ease-in-out;
-o-transition: 1.0s ease-in-out;
transition: 1.0s ease-in-out;
*/}


/* Provides part of the "<" to go left to an image */
a.lightbox-left:before {
content: "";
display: block;
height: 35px;
width: 3px;
background:white;
position: absolute;
left: 34px;
top:7px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "<" to go left to an image */
a.lightbox-left:after {
content: "";
display: block;
height: 35px;
width: 3px;
background:white;
position: absolute;
left: 34px;
top:30px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}


/* Styles the right link, adds the slide down transition */
a.lightbox-right {
display: block;
width:70px;
height:70px;
box-sizing: border-box;
background:rgba(0,0,0,0);
/*background:white;*/
border-radius:10px;
opacity: 1;
color: white;
text-decoration: none;
position: absolute;
/*top: -80px;*/
margin-top:22%;
right: 2%;
/*-webkit-transition: 1.0s ease-in-out;
-moz-transition: 1.0s ease-in-out;
-o-transition: 1.0s ease-in-out;
transition: 1.0s ease-in-out;
*/}


/* Provides part of the ">" to go right to an image */
a.lightbox-right:before {
content: "";
display: block;
height: 35px;
width: 3px;
background:white;
position: absolute;
left: 34px;
top:30px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the ">" to go right to an image */
a.lightbox-right:after {
content: "";
display: block;
height: 35px;
width: 3px;
background:white;
position: absolute;
left: 34px;
top:7px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}



/* Styles the close link, adds the slide down transition */
a.lightbox-close {
display: block;
width:70px;
height:70px;
box-sizing: border-box;
/*background:rgba(0,0,0,.4);*/
background:white;
border-radius:10px;
/*opacity: 0.6;*/
color: white;
text-decoration: none;
position: absolute;
/*top: -80px;*/
margin-top:2%;
right: 2%;
-webkit-transition: 1.0s ease-in-out;
-moz-transition: 1.0s ease-in-out;
-o-transition: 1.0s ease-in-out;
transition: 1.0s ease-in-out;
}

/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:before {
content: "";
display: block;
height: 50px;
width: 3px;
background:black;
position: absolute;
left: 34px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:after {
content: "";
display: block;
height: 50px;
width: 3px;
background:black;
position: absolute;
left: 34px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}

.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}

.lightbox-target:target a.lightbox-close {
top: 0px;
}

.lightbox-target:target a.lightbox-right {
top: 0px;
}

.lightbox-target:target a.lightbox-left {
top: 0px;
}