@charset "utf-8";

*{
	margin:0;
	padding:0;
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
/*Fade di testi e immagini con i CSS3*/

/*effetto fade */
/* Stili : div contenitore  box.. e al suo interno creiamo un altro div textBox */

/*Sliding boxes (Verical, Horizontal, Diagonal) di testi e immagini con i CSS3*/

/*effetto slide dal basso all'alto */
/* Stili : div contenitore  box e al suo interno creiamo un altro div panel */
.panel{
	position:absolute;
	overflow:hidden;
	height: 13%;
	bottom:0;
	left:0;
	color: #ffffff;
	text-align: left;
	background-color: rgba(20, 13, 0, 0.8);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

.panel h4{
	color: #ffffff;
	padding: 2% 1% 1% 1%;
	text-align: center;
	text-shadow: 1px -2px 2px #9B7E0C;
	font-weight: 300;
	font-style: italic;
}
.panel ul{
	top: 0;
	list-style: disc;
	padding-left:40px;
	
}
#servVend{margin-top: -20%;}
#servAcq{margin-top: -28%;}
#servAcqButt{margin-top: -32%;}
.panel li{
	color: #ffffff;
	padding-top: 3px;
	text-align: left;
}
.panel p{
	color: #ffffff;
	text-align: justify;
	min-height: 72%;
	max-height: 72%;
	padding: 4%;
}
.panel span{
	color: #ffffff;
	text-align: left;
}
.panel > hr{
	color: #ffffff;
	width: 90%;
	text-align: center;
	height: 2px;
	margin-left: auto;
	margin-right: auto;
}
	/* Ora assegnamo allo stato hover del div panel l’altezza di 100px,
	ovvero lo stadio finale della nostra animazione:
	Cosi facendo al passaggio del mouse il div panel cambia la sua altezza,
	*/
	.boxServ:hover .panel{
		height: 100%;
		width:100%;
		}
		
/* bottone  "Vai alla scheda" */			
	.panel a {
	display: block;
	color: rgb(255, 255, 255);
	background-color: rgba(155, 126, 12, 0.7);
	margin-left: auto;
	padding: 7px;
	font-weight: 700;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
	text-align: right;	
}
.panel a:hover {
	text-decoration: underline;
}
.boxServ .panel:hover h3{
	margin-top: 5%;
	}
	
	/* per animarlo e ottenere lo slide verticale utilizziamo la propietà transition
	introdotta dai CSS3 e il gioco è fatto.*/	
	.panel{
		transition: all ease-in-out 500ms;
		-o-transition: all ease-in-out 500ms;
		-moz-transition: all ease-in-out 500ms;
		-webkit-transition: all ease-in-out 500ms;}	

/* effetto flip card */
/* Stili: il contenitore
Assegniamo al contenitore della (o delle) flip card la proprietà perspective,
che ci permette di dare una prospettiva 3D all’elemento child.
Notare che questa proprietà non ha effetto sull’elemento stesso in cui viene applicata
ma negli elementi in esso contenuto.
*/
.flip-card-container {
	width: 100%;
	height: 100%;
	padding: 0px 0;
	text-align: center;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	-ms-perspective: 800px;
	perspective: 800px;
}
/* Stili: la flip card
Al contenitore della flip card assegniamo transition per ottenere un’animazione
della durata di 0,8 secondi e preserve-3d per specificare che gli elementi child dovranno
preservare la loro posizione 3D.
Sull’evento :hover andiamo ad impostare una rotazione 3D della flip card di 180 gradi con rotate3d.

*/
.flip-card {
	position: relative;
	width: 100%;
	height: 100%;
	display: inline-block;
	margin: 0px;
	border: 0px solid #000;
	cursor: default;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.flip-card:hover {
	-webkit-transform: rotate3d(0,1,0,-180deg);
	-moz-transform: rotate3d(0,1,0,-180deg);
	-o-transform: rotate3d(0,1,0,-180deg);
	-ms-transform: rotate3d(0,1,0,-180deg);
	transform: rotate3d(0,1,0,-180deg);
}
/* Stili: il fronte
La parte frontale della nostra quasi completata flip card è in posizione assoluta
e ha un’immagine di background associata al suo id.
*/
.flip-card-front {
	position: absolute;
	width: 100%;
	height: 100%;
}

/* Stili: il retro
Per completare il tutto aggiungiamo gli stili relativi al retro: con backface-visibility: hidden;
nascondiamo l’elemento e il suo contenuto fino a quando non avverrà
la rotazione 3D all’evento mouse over.
*/
.flip-card-back {
	background-color: rgba(38, 79, 91, 0.8);
	border: 0px solid #000;
	width: 100%;
	height: 100%;
	padding: 3%;
	cursor: pointer;
	text-decoration: none;		
	-webkit-transform: rotate3d(0,1,0,180deg);
	-moz-transform: rotate3d(0,1,0,180deg);
	-o-transform: rotate3d(0,1,0,180deg);
	-ms-transform: rotate3d(0,1,0,180deg);
	transform: rotate3d(0,1,0,180deg);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.flip-card-back  h3 {
	color: rgba(255, 255, 255, 0.9);
	padding: 10px 0 10px 0;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.flip-card-back  a > p  {
	color: rgba(255, 255, 255, 0.9);
	padding: 4% 3% 1% 3%;
	text-align: justify;
	border-top: 1px solid rgba(255, 255, 255, 0.9);
	text-decoration: none !important;
	min-height: 85%;
	max-height: 90%;
}

.flip-card-back  > a >p:hover  {
	color: #ffffff;
	font-size: 14px;
	background-color: rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

/*
Un tocco finale
L’effetto di rotazione, come accennato all’inizio, non funzionerà su mobile e tablet
perché associata ad un evento :hover.
Per far sì che il tocco dello schermo venga interpretato come mouse over dovremo
aggiungere il seguente codice al div con la classe .flip-card.

ontouchstart="this.classList.toggle('hover');"
*/

.panel1{
	position:relative;
	overflow:hidden;
	width:100%;
    height:inherit;
}

.panel1 img{
	position:absolute;
    bottom:0;
	left:0%;
	opacity:1;
	overflow: hidden;
	width:100%;
    height:100%;
	animation:sladeLeft 30s infinite;
	transition: left 0s linear;
}
@keyframes sladeLeft {
	6%{left:150%;}
	8%{z-index:-1;}
	12%{left:0%;}
	100%{z-index:-1;}
	}
.panel1 img:nth-child(3){animation-delay:9s;}
.panel1 img:nth-child(2){animation-delay:19s;}
.panel1 img:nth-child(1){animation-delay:29s;}