/* CSS Document */
.introServizi
{
	width:100%; padding:0 10%; margin-top:35px; margin-bottom:25px; padding-bottom:30px; text-align: center;
}
.catServizi .foto{ width:40%; text-align: left; float:left; padding: 0 40px 20px 0}
.catServizi .foto img{ max-height: 100%; max-width: 100%; border-top-left-radius: 30%; border-bottom-right-radius: 30%; }
.catServizi {width:100%; padding:0 10%;}
.catServizi .foto{ width:40%; text-align: left; float:left; padding: 0 40px 20px 0}
.catServizi .foto img{ max-height: 100%; max-width: 100%; border-radius: 5%; box-shadow: 2px 2px 5px #AAA}
.catServizi .data{ color: #CC0F14; font-weight: bold; height: 18px; line-height: 18px;  background-image: url(../images/icona-data.png); background-position: left; background-size: contain; padding-left: 22px; width: 200px;} 

.catServizi .intro, .catServizi .descrizione{ text-align: justify; margin-top:10px; font-size:16px; line-height: 20px}

.catServizi .intro{margin-top:10px;}
.catServizi .descrizione{padding-bottom:20px;margin-top:20px; }

/*SERVIZIO DENTRO CAT SERVIZIO */
.containerServizi
{
	  margin:0 auto;
	  display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  	  display: -ms-flexbox;  /* TWEENER - IE 10 */
  	  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  	  display: flex; 
	  justify-content: center;        
	  flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
	  margin-bottom: 50px;
}

.containerServizi .servizio
{
	min-height: 120px;
	width: 48%;
	padding:2% 2% 3% 2%;
	margin:1%;
	background-color: #ffe9e9;
	border-radius:10px;
	position:relative;
	cursor:pointer;
	clear: both;

}

.containerServizi .servizio .fotoServizio
{
	min-height: 120px;
	width: 20%;
	left:0;
	right: 0;
	position:absolute;
	text-align: center;
}
.containerServizi .servizio .fotoServizio img
{
	width: 70%; margin:0 auto;
}

.containerServizi .servizio .titolo
{
	font-weight: bold;
	margin-bottom:20px;
	margin-top:15px;
	font-size:15px;
	color:#a81715;
	height: 80%;
	width: 60%; left:20%;
	position:absolute;
}
	
.containerServizi .servizio .introduzione
{
	
	font-size:15px;
	text-align: justify;
	color:black;
}

.containerServizi .servizio:hover 
{
	transition:ease ;  transition-duration: 1.0s; background-color :rgba(255,215,215,1.00); 
}

.containerServizi .servizio .link
{
	position:absolute;
	font-weight: bold;
	right:15px; top:35%;
	width: 0; height: 0; line-height: 0;
	border-bottom: 20px solid transparent;
	border-left:   20px solid #a81715;
	border-top:  20px solid transparent;
}

/* DETTAGLIO SERVIZIO */
.dettaglioServizio {width:100%; padding:0 10%;}
.dettaglioServizio .foto{ width:100%; text-align: left; float:left; padding: 0 20px 20px 0}
.dettaglioServizio .foto img{ max-height: 100%; max-width: 100%; border-radius: 5%; box-shadow: 2px 2px 5px #AAA}
.dettaglioServizio .data{ color: #CC0F14; font-weight: bold; height: 18px; line-height: 18px;  background-image: url(../images/icona-data.png); background-position: left; background-size: contain; padding-left: 22px; width: 200px;} 

.dettaglioServizio .intro, .dettaglioServizio .descrizione{ text-align: left; margin-top:10px; font-size:18px; line-height: 20px}

.dettaglioServizio .descrizione{padding-bottom:20px;}
.servizioCollegato{ background-color: #f7f1f1; height: 250px; width:100%; padding:50px 10% 25px 10%}
.servizioCollegato .title{ background-color: #f7f1f1; width:100%; text-align:center; color:#cc0f14; font-size:22px}
.servizioCollegato .descrizione{ margin-top:30px; font-size:16px;} 
.servizioCollegato .pulsante{ margin-top:30px; text-align:center;} 
.servizioCollegato .pulsante a{padding: 8px 20px; font-size:16px; line-height:30px;}


@media screen and (max-width: 768px){

	.catServizi .foto{ width:50%; text-align: left; float:left; padding: 0 40px 20px 0}
	.catServizi .foto img{ max-height: 100%; max-width: 100%; border-radius: 5%; box-shadow: 2px 2px 5px #AAA}

}

@media screen and (min-width:1200px)
{
	.introServizi
	{
		padding-left: 20% !important; padding-right: 20% !important;
	}
}