@charset "UTF-8";
/* CSS Document */
header{
width:100%;	
background:#ccc;
height:150px;
margin:0 auto;
}
.second{
width:100%;	
background:#ccc;
height:150px;
margin:100px auto;
}

hgroup{
border:1px solid #ccc;	
}
h1{
font-size:2em;
text-align:center;
color:#fff;
margin:0 auto;
}
h3{
font-size:1em;
text-align:center;
color:#F03;
}

.indice{
width:100%;
max-width:960px;
margin:50px auto;
	
}
.indice li{
float:left;
list-style:none;
padding:10px;
margin:10px 5px;
background:#666;
color:#fff;
border-radius:2px;
-webkit-transition:ease-out 0.2s;	
}
.indice li:first-child,
.indice li:nth-child(8){
background:#999;
}
.indice li:nth-child(3),
.indice li:nth-child(7){
background:#ccc;
}
.indice li:nth-child(4),
.indice li:nth-child(6){
background:#000;
}
.indice li:hover{
background:#ccc;	
	
}
.indice li a{
color:#fff;
text-decoration:none;
-webkit-transition:ease-out 0.2s;
}
.indice li a:hover{
color:#000;	
}



/*			ROTAZIONE + DIMENSIONE		*/
.thumbnail_rotate{
margin:0 auto;
background:#ccc;
}
.thumbnail_rotate li{
width:25%;
float:left;	
margin:0px;
padding:5px;
overflow:hidden;
}
.thumbnail_rotate li:first-child,
.thumbnail_rotate li:nth-child(5),
.thumbnail_rotate li:nth-child(9){
margin-left:-40px;

}

.thumbnail_rotate li img{
width:100%;	
-webkit-transition:ease-out 0.2s;

}
.thumbnail_rotate li img:hover{
-webkit-transform:rotate(-20deg) scale(2,2);
}

/*			SKEW		*/
.thumbnail_skew{
margin:0 auto;
background:#ccc;
}
.thumbnail_skew li{
width:25%;
float:left;	
margin:0px;
padding:5px;
overflow:hidden;
}
.thumbnail_skew li:first-child,
.thumbnail_skew li:nth-child(5),
.thumbnail_skew li:nth-child(9){
margin-left:-40px;

}

.thumbnail_skew li img{
width:100%;	
-webkit-transition:ease-out 0.2s;

}
.thumbnail_skew li img:hover{
-webkit-transform:skew(5deg,5deg)
}

/*			TRANSLATE		*/

.thumbnail_translate{
margin:0 auto;
background:#ccc;
}
.thumbnail_translate li{
width:25%;
float:left;	
margin:0px;
padding:5px;
overflow:hidden;
}
.thumbnail_translate li img:not(:hover) {
	opacity: 0.4;
}
.thumbnail_translate li:first-child,
.thumbnail_translate li:nth-child(5),
.thumbnail_translate li:nth-child(9){
margin-left:-40px;

}

.thumbnail_translate li img{
width:100%;	
-webkit-transition:ease-out 0.2s;

}
.thumbnail_translate li img:hover{
-webkit-transform:translate(-15px,5px);
}

/*			PRIMO PIANO	*/

/*
.thumbnail_primopiano{
margin:0 auto;
}
.thumbnail_primopiano div{
width:25%;
float:left;	
margin:0px;
padding:5px;
}

.thumbnail_primopiano div:first-child,
.thumbnail_primopiano div:nth-child(5),
.thumbnail_primopiano div:nth-child(9){
margin-left:-40px;

}
*/
/*
.thumbnail_primopiano div{
width:100%;	
-webkit-transition:ease-out 0.2s;

}*/
.thumbnail_primopiano div:hover{
-webkit-transform:scale(1.14,1.14);
-webkit-transition:ease-out 0.2s;

}

/*			RUOTA 360°	*/

.thumbnail_rotate_completa{
margin:0 auto;
background:#ccc;
}
.thumbnail_rotate_completa li{
width:25%;
float:left;	
margin:0px;
padding:5px;
overflow:hidden;
}
.thumbnail_rotate_completa li:first-child,
.thumbnail_rotate_completa li:nth-child(5),
.thumbnail_rotate_completa li:nth-child(9){
margin-left:-40px;

}

.thumbnail_rotate_completa li img{
width:100%;	
-webkit-transition:ease-out 0.8s;

}
.thumbnail_rotate_completa li img:hover{
-webkit-transform:rotate(-360deg);
}

/*			IMMAGINE CON CAPTION	*/

.contenitore_foto {
	width:100%;
	max-width:1440px;
	margin:0 auto;
	overflow:hidden;
	
}

.colonna {
	float: left;
	width: 33%;
	position: relative;
	border:1px solid #ddd;
	
}
.colonna a img{
width:100%;
max-width:100%;	
}

.caption {
	display: inline-block;
	position: relative;
	margin: 10px;
}

.caption img {
	display: block;
	width:100%;
	max-width:100%;
}



/* CAPTION SU HOVER - CASO 1 */
.caption::before,
.caption::after {
	opacity: 0;
	position: absolute;
	width: 91.5%;
	color: #333;
	padding: 20px 20px;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
	
}

.caption::before {
	content: attr(data-title);
	top: 0;
	height: 30%;
	background: #000;
	font-size: 40px;
	font-weight: 300;
	color:#fff;
}

.caption::after {
	content:attr(data-description);
	top: 31%;
	height: 58.5%;
	background: #ccc;
	font-size: 16px;
	text-align: right;
}

.caption:hover::before,
.caption:hover::after {
	opacity: 1;
}




/* CAPTION SU HOVER CON BOX A COMPARSA CON TRASLAZIONE - CASO 2 */
.caption1 {
	overflow: hidden;
	background: #000;
}

.caption1 img {
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

.caption1:hover img {
	opacity: 0.5;
}

.caption1::after,
.caption1::before {
	position: absolute;
	width: 100%;
	height: 50%;
	color: #000;
	z-index: 1;
	-webkit-transition: -webkit-transform 0.3s ease-in-out; 
	-moz-transition: -moz-transform 0.3s ease-in-out; 
	transition: transform 0.3s ease-in-out; 
}

.caption1::after {
	content: attr(data-title);
	top: 0;
	background: #ccc;
	font-size: 40px;
	font-weight: 300;
	padding: 10px;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
	text-align:left;
}

.caption1::before {
	width:95%;
	content: attr(data-description);
	top: 50%;
	background: #666;
	font-size: 14px;
	padding:50px 20px 0 20px;
	text-align:left;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	transform: translateY(100%);
	color:#fff;
}

.caption1:hover::after,
.caption1:hover::before {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}




/* CAPTION CON BOX A COMPARSA SLIDE - CASO 3 */

.caption2 {
	overflow: hidden;
	background: rgba(0,0,0,0.2);
	-webkit-transition: background 0.3s ease-in-out;
	-moz-transition: background 0.3s ease-in-out;
	transition: background 0.3s ease-in-out;
}

.caption2:hover {
	background: rgba(0,0,0,0);
}

.caption2 img {
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

.caption2:hover img {
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
}

.caption2::before,
.caption2::after {
	position: absolute;
	width: 100%;
	z-index: -1;
	background: #cecece;
	-webkit-transform: translateX(-30%);
	-moz-transform: translateX(-30%);
	transform: translateX(-30%);
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

.caption2::before {
	content: attr(data-title);
	height: 30%;
	color: #05b19a;
	font-size: 40px;
	font-weight: 300;
	padding: 30px;
}

.caption2::after {
	width:90%;
	content: attr(data-description);
	top: 30%;
	height: 70%;
	color: #fff;
	font-size: 14px;
	padding: 20px 30px;
	text-align:left;

}

.caption2:hover::before,
.caption2:hover::after  {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
}