/* contenitore base */



div.scritta {

width: 150px;

height: 50px;

position:relative;

cursor: pointer;

overflow: hidden;

display: inline-block;

z-index: 4;

}

.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;
	}
}

.image-caption h3 {
	font-size: 1em;
	margin-top: 20px;
	margin-bottom: -10px;
	color: #fff;
	font-weight: 150;
	text-align: left;
	padding-left: 0.35em;
}
@media screen and (min-width: 35em) {
	.image-caption h3 {
		font-size: 0.8em;
	}
}

/* descrizione dell'immagine  */

.image-caption p {
	color: #fff;
	font-size: 1em;
	font-family: verdana;
	line-height: 155%;
	padding-left: 8px;
	padding-right: 8px;
	text-align: left;
}
@media screen and (min-width: 35em) {
	.image-caption p {
		font-size: 0.8em;
	}
}

/* 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;

}

/* animazione da sopra 
058.
.image-container .caption-2 {
059.
top: -210px;
060.
transition: all 0.5s;
061.
}
062.
.image-container:hover .caption-2 {
063.
top: 0;
064.
transition: all 0.5s;
065.
}
066.
 
067.

 animazione da basso 
068.
.image-container .caption-3 {
069.
bottom: -210px;
070.
transition: all 0.5s;
071.
}
072.
.image-container:hover .caption-3 {
073.
bottom: 0;
074.
transition: all 0.5s;
075.
}
076.
 
077.*/

/* animazione da destra */

.image-container .caption-4 {

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

}

.image-container:hover .caption-4 {

right: 0;

transition: all 0.5s;

}

/* animazione dall'angolo in alto a sinistra  
088.
.image-container .caption-5 {
089.
left: -260px;
090.
top: -210px;
091.
transition: all 0.5s;
092.
}
093.
.image-container:hover .caption-5 {
094.
left: 0;
095.
top: 0;
096.
transition: all 0.5s;
097.
}
098.
 
099.
 animazione dall'angolo in alto a destra 
100.
.image-container .caption-6 {
101.
right: -260px;
102.
top: -210px;
103.
transition: all 0.5s;
104.
}
105.
.image-container:hover .caption-6 {
106.
right: 0;
107.
top: 0;
108.
transition: all 0.5s;
109.
}
110.
 
111.
 animazione dall'angolo in basso a sinistra 
112.
.image-container .caption-7 {
113.
left: -260px;
114.
bottom: -210px;
115.
transition: all 0.5s;
116.
}
117.
.image-container:hover .caption-7 {
118.
left: 0;
119.
bottom: 0;
120.
transition: all 0.5s;
121.
}
122.
 
123.
 animazione dall'angolo in basso a destra 
124.
.image-container .caption-8 {
125.
right: -260px;
126.
bottom: -210px;
127.
transition: all 0.5s;
128.
}
129.
.image-container:hover .caption-8 {
130.
right: 0;
131.
bottom: 0;
132.
transition: all 0.5s;
133.
}