/* contenitore base */

div.sfondo {
	position: relative;
	left: 0em;
	top: -0.3em; 
	width: 100%;
	background-color: #4F0256;
}
div.socialsu {
	position: relative;
	font-size: 1.7em;
	text-align:center;
	color: #777;
	padding-bottom: 1em;
	top: 0em;
	background-color: transparent;
	left: 0%;
	width: 100%;
}
@media screen and (max-width: 40em) {
	div.socialsu {
		left: 30%;
	width: 70%; 
	}
}

a:link.link {
	color: #4F0256;
	font-family: Verdana,'sans-serif';
	font-weight: normal;
	text-decoration:none;
	line-height:105%;
	letter-spacing: 0.02em;
} 
a:visited.link {
	color: #4F0256;
	font-family: Verdana,'sans-serif';
	font-weight: normal;
	text-decoration:underline;
	line-height:105%;
	
	letter-spacing: 0.02em;
	}
a:active.link {
	color: #B86C91;
	font-family: Verdana,'sans-serif';
	font-weight: normal;
	text-decoration:underline;
	line-height:105%;
	
	letter-spacing: 0.02em;
	}
a:hover.link {
	color: #B86C91;
	font-family: Verdana,'sans-serif';
	font-weight: normal;
	text-decoration:underline;
	line-height:105%;
	letter-spacing: 0.02em;
	}
a:focus.link {
	color: #4F0256;
	font-family: Verdana,'sans-serif';
	font-weight: normal;
	text-decoration:underline;
	line-height:105%;
	
	letter-spacing: 0.02em;
	}

a:link.social {
	color: #fff;
	text-decoration:none;
	font-size: 1.5em;
} 
a:visited.social  {
	color: #F4D6E5;
	text-decoration:none;
	font-size: 1.5em;
	}
a:active.social  {
	color: #F4D6E5;
	text-decoration:underline;
	font-size: 1.5em;
	}
a:hover.social  {
	color: #F4B8D6;
	text-decoration:underline;
	font-size: 1.5em;
	}
a:focus.social  {
	color: #F4B8D6;
	text-decoration:underline;
	font-size: 1.5em;
	}

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

}