/* GENERALE */
.tpl5 figure {position: relative;float: left;overflow: hidden;text-align: center;cursor: pointer;height: 100%;}
	.tpl5 figure img {position: relative;display: block;height:auto;max-width: 100%;opacity: 1;}
	.tpl5 figure figcaption {padding: 2em;color: #fff;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
	.tpl5 figure figcaption::before,.tpl5 figure figcaption::after {pointer-events: none;}
	.tpl5 figure figcaption,.tpl5 figure figcaption > a {position: absolute;top: 0;left: 0; width: 100%;height: 100%;}
	.tpl5 figure figcaption > a {z-index: 1000;white-space: nowrap;font-size: 0;opacity: 0;}
	.tpl5 figure h2{margin: 0 5px;padding: 10px;}
	.tpl5 figure p {margin: 0;padding: 10px;}


/* ANIMAZIONE 1 (Alex)*/
figure.effect-alex {background: transparent;}
figure.effect-alex:hover {background: #333333;}
	figure.effect-alex img {max-width: none;width: -webkit-calc(100% + 50px);width: calc(100% + 50px);heigth:100px;opacity: 1;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(-40px,0, 0);transform: translate3d(-40px,0,0);}
		figure.effect-alex:hover img{opacity: 0.2;}
	figure.effect-alex figcaption {text-align: center;}
		figure.effect-alex figcaption > div {position: absolute;bottom: 0;left: 0;padding: 0em;width: 100%;height: 90%;}
	figure.effect-alex h2,figure.effect-alex p {-webkit-transform: translate3d(0,40px,0);transform: translate3d(0,40px,0);}
	figure.effect-alex h2 {background: #f8f8f8;opacity: 0;-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;}
	figure.effect-alex p {opacity: 0;-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;transition: opacity 0.2s, transform 0.35s;}
		figure.effect-alex:hover h2,figure.effect-alex:hover p {opacity: 1;}
		figure.effect-alex:hover img,figure.effect-alex:hover h2,figure.effect-alex:hover p {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
		figure.effect-alex:hover p {-webkit-transition-delay: 0.05s;transition-delay: 0.05s;-webkit-transition-duration: 0.35s;transition-duration: 0.35s;}
	figure.effect-alex a {display: inline-block;text-decoration: none;padding: 3px 10px; border:1px solid #999999;}
		figure.effect-alex a:hover {background: #990000;}


/* ANIMAZIONE 2 (Sadie)*/
figure.effect-sadie figcaption::before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;	background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);content: '';opacity: 0;	-webkit-transform: translate3d(0,50%,0);transform: translate3d(0,50%,0);}
	figure.effect-sadie img {max-width: none;width:100%;heigth:auto;opacity: 1;}
figure.effect-sadie h2 {position: absolute;top: 100px;left: 0;margin:0;width: 100%;background:rgba(0,0,0,0.6);-webkit-transition: -webkit-transform 0.35s, color 0.35s;transition: transform 0.35s, color 0.35s;-webkit-transform: translate3d(0,-50%,0);transform: translate3d(0,-50%,0);}
figure.effect-sadie figcaption::before, figure.effect-sadie p {-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}
figure.effect-sadie p {/*position: absolute;*/bottom: 0;left: 0;padding: 90px 0 10px 0;width: 100%;opacity: 0;-webkit-transform: translate3d(0,10px,0);transform: translate3d(0,10px,0);}
.effect-sadie p:nth-child(3) {padding:5px 0;}
figure.effect-sadie:hover h2 {-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);transform: translate3d(0,-50%,0) translate3d(0,-40px,0);}
figure.effect-sadie:hover figcaption::before ,figure.effect-sadie:hover p {opacity: 1;-webkit-transform: translate3d(0,20px,0);transform: translate3d(0,0,0);}
figure.effect-sadie a {display: inline-block;text-decoration: none;padding: 3px 10px; border:1px solid #999999;}
		figure.effect-sadie a:hover {background: #990000;}


/* ANIMAZIONE 3 (Roxy)*/
figure.effect-roxy {}
figure.effect-roxy img {max-width: none;width: -webkit-calc(100% + 60px);width: calc(100% + 60px);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(-50px,0,0);transform: translate3d(-50px,0,0);}
figure.effect-roxy figcaption::before {position: absolute;top: 30px;right: 30px;bottom: 30px;left: 30px;border: 1px solid #fff;content: '';opacity: 0;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(-20px,0,0);transform: translate3d(-20px,0,0);}
	figure.effect-roxy figcaption {padding: 3em;text-align: center;}
figure.effect-roxy h2 {padding: 20% 0 10px 0; font-weight:bold; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);}
figure.effect-roxy p {opacity: 0;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(-10px,0,0);transform: translate3d(-10px,0,0);}
	figure.effect-roxy:hover img {opacity: 0.7;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
	figure.effect-roxy:hover figcaption::before,
	figure.effect-roxy:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
figure.effect-roxy a {display: inline-block;text-decoration: none;padding: 3px 10px; border:1px solid #999999;}
		figure.effect-roxy a:hover {background: #990000;}


/* ANIMAZIONE 4 (Sarah)*/
figure.effect-sarah {}
figure.effect-sarah img {max-width: none; width: -webkit-calc(100% + 20px);	width: calc(100% + 20px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(-10px,0,0); transform: translate3d(-10px,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden;}
	figure.effect-sarah:hover img {opacity: 0.4; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
figure.effect-sarah figcaption {text-align: left;}
figure.effect-sarah h2 {position: relative; overflow: hidden; padding: 0.5em 0; font-weight:bold; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);}
	figure.effect-sarah h2::after {position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);}
	figure.effect-sarah:hover h2::after {-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
figure.effect-sarah p {padding: 1em 0;margin:0 5px;opacity: 0;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(100%,0,0);transform: translate3d(100%,0,0);}
	figure.effect-sarah:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.effect-sarah p:nth-child(3) {padding:5px 0;}
figure.effect-sarah a {display: inline-block;text-decoration: none;padding: 3px 10px; border:1px solid #999999;}
		figure.effect-sarah a:hover {background: #990000;}


/* EFFETTI IMMAGINI */
.effect-img figure {position: relative;float: left;overflow: hidden;text-align: center;height: 100%; margin: 8px 0;}
	.effect-img figure img {position: relative;display: block;height:auto;max-width: 100%;opacity: 1;margin: 0 !important;}
	.effect-img figure figcaption {padding: 2em;color: #fff;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
	.effect-img figure figcaption::before,.effect-img figure figcaption::after {pointer-events: none;}
	.effect-img figure figcaption,.effect-img figure figcaption > a {position: absolute;top: 0;left: 0; width: 100%;height: 100%;}
	.effect-img figure figcaption > a {z-index: 1000;white-space: nowrap;font-size: 0;opacity: 0;}
	.effect-img figure h2{margin: 0 5px;padding: 10px;}
	.effect-img figure p {margin: 0;padding: 10px;}
	
/* EFFETTI IMMAGINI: Zoom Out */
.effect-img.zoomout figure img { transition: transform 0.35s; -webkit-transform: scale(1.15); transform: scale(1.15); }
.effect-img.zoomout figure:hover img { -webkit-transform: scale(1); transform: scale(1); }

/* EFFETTI IMMAGINI: Zoom In */
.effect-img.zoomin figure img {  transition: transform .4s ease;}
.effect-img.zoomin figure:hover img {  transform: scale(1.20);}

/* EFFETTI IMMAGINI: Zoom e Ruota */
.effect-img.zoom-n-rotate figure img {  transition: transform .5s ease-in-out;}
.effect-img.zoom-n-rotate figure:hover img {  transform: scale(2) rotate(15deg);}

/* EFFETTI IMMAGINI: Point-zoom */
.effect-img.zoom-point figure img {  transform-origin: 50% 50%;  transition: transform 1s, filter .5s ease-out;}
.effect-img.zoom-point figure:hover img {  transform: scale(5);}

/* Colorize-zoom Container */
.effect-img.zoom-colorize figure img {  transition: transform .5s, filter .7s ease-in-out;  filter: grayscale(100%);}
.effect-img.zoom-colorize figure:hover img {  filter: grayscale(0);  transform: scale(1.1);}




/* MENU AD ALBERO */
.tree, .tree ul {margin:0; padding:0; list-style:none}
.tree ul { margin-left:1em; position:relative}
.tree ul ul { margin-left:.5em}
.tree ul:before { content:""; display:block; width:0; position:absolute; top:0; bottom:0; left:0; border-left:1px solid}
.tree li { margin:0; padding:0 1em; line-height:2em; font-weight:600; position:relative}
.tree li i { color:#369;}
.tree ul li:before { content:""; display:block; width:10px; height:0; border-top:1px solid; margin-top:-1px; position:absolute; top:1em; left:0}
.tree ul li:last-child:before {background:#fff; height:auto; top:1em; bottom:0}
.indicator { margin-right:5px;}
.tree li a { text-decoration: none;}
.tree li button, .tree li button:active, .tree li button:focus {text-decoration: none; border:none; background:transparent; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; outline: 0;}	


@media (max-width: 767px) {
	figure.effect-sadie h2 {top: 110px;}
	figure.effect-sadie p {padding: 70px 0 10px 0;}

	figure.effect-roxy figcaption::before {position: absolute;top: 20px;right: 20px;bottom: 20px;left: 20px;}
	figure.effect-roxy figcaption {padding: 2em;}
	figure.effect-roxy h2 {padding: 10% 0 5px 0;}
	figure.effect-roxy p {padding: 5px;}
	
	figure.effect-sarah figcaption {padding: 2em;}
}

@media (min-width: 768px) {
	figure.effect-sadie h2 {top: 75px;}
	figure.effect-sadie p {padding: 30px 0 10px 0;}
	
	figure.effect-roxy figcaption::before {position: absolute;top: 10px;right: 10px;bottom: 10px;left: 10px;}
	figure.effect-roxy figcaption {padding: 1.5em;}
	figure.effect-roxy h2 {padding: 5% 0 5px 0;}
	figure.effect-roxy p {padding: 5px;}
	
	figure.effect-sarah figcaption {padding: 1em;}
}

@media (min-width: 992px) {
	figure.effect-sadie h2 {top: 90px;}
	figure.effect-sadie p {padding: 50px 0 10px 0;}
	
	figure.effect-roxy figcaption::before {position: absolute;top: 20px;right: 20px;bottom: 20px;left: 20px;}
	figure.effect-roxy figcaption {padding: 2em;}
	figure.effect-roxy h2 {padding: 5% 0 5px 0;}
	figure.effect-roxy p {padding: 5px;}
	
	figure.effect-sarah figcaption {padding: 1.5em;}
}

@media (min-width: 1200px) {
	figure.effect-sadie h2 {top: 100px;}
	figure.effect-sadie p {padding: 65px 0 10px 0;}
	
	figure.effect-roxy figcaption::before {position: absolute;top: 30px;right: 30px;bottom: 30px;left: 30px;}
	figure.effect-roxy figcaption {padding: 3em;}
	figure.effect-roxy h2 {padding: 10% 0 10px 0;}
	figure.effect-roxy p {padding: 5px;}
	
	figure.effect-sarah figcaption {padding: 2em;}
}

@media (min-width: 1400px) {

}

@media (min-width: 1920px) {

}