/* contenitore base */


.image-container {

width: 130px;

height: 258px;

position: relative;

cursor: pointer;

overflow: hidden;

display: inline-block;

margin: 10px;

-webkit-box-shadow: 2px 2px 50px rgba(0,0,0,0.6);

-moz-box-shadow: 2px 2px 50px rgba(0,0,0,0.6);

box-shadow: 2px 2px 50px rgba(0,0,0,0.6);

z-index: 2;

}

/* immagine al interno del contenitore */

.image-container img {

width: 100%;

height: 100%;

position: absolute;

}


/* contenitore con didascalia */

.image-container .image-caption {

width: 100%;

height: 100%;

position: absolute;

background: rgba(0, 0, 0, 0.6);

text-align: center;

}

img.image {
	border-style: none;
	background-color:transparent;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 35em) {
	img.image {
	width: 100%; 
	hight: 100%;
	}
}


/* titolo */

.image-caption h2 {
	font-size: 1.9em;
	margin-top: 120px;
	margin-bottom: -10px;
	color: #fff;
	font-weight: 150;
	text-align: center;
}
@media screen and (min-width: 35em) {
	.image-caption h2 {
		font-size: 1.5em;
	}
}


/* Tipi di animazioni apparizione didascalie */

/* animazione da sinistra*/

.image-container .caption-1 {

left: -150px;
	
	top: 0px;

transition: all 0.5s;

}

.image-container:hover .caption-1 {

left: 0;

transition: all 0.5s;

}


.image-container .caption-4 {

right: -150px;
padding-left: 0px;
transition: all 0.5s;

}

.image-container:hover .caption-4 {

right: 0;

transition: all 0.5s;

}