/* CSS Document */

.listaNews
{
	 width: 100%; margin-top:30px;
}
.listaNews .news:nth-child(even){background-color:#f7f1f1;}

@media screen and (max-width: 768px){
	
	
	.news-top-triangle {
	  background-color: transparent;
	  width: 100%;
	  height: 0;
	  border-style: solid;
	  border-width: 0 0 20px 200vw;
	  border-color: transparent transparent white transparent;
	}
	.listaNews .news:nth-child(even) .news-top-triangle { 	  border-color: transparent transparent #f7f1f1 transparent;
}

	
	
	.listaNews .news
	{
		height: auto;
		width: 80%;
		clear: both;
		padding:0; 
		margin:0 auto 20px auto;
		border:1px solid rgba(211,211,211,1.00);
		position: relative;
		border-radius:25px;
		
	}
	.listaNews .foto
	{ 
		width:100%; text-align: center; position:relative;
	}
	.listaNews .news .foto img
	{   
		margin:0 !important; 
		margin-bottom:-10px;
		padding:0 !important;
		height: auto;  
		width:100%; 
		border-top-left-radius: 25px; 
		border-top-right-radius: 25px; 
	}
	.listaNews .news .contenuto
	{ 
		width:100%; margin:0 auto; height: 260px; position:relative; /*border:1px solid green; */
	}
	.listaNews .news .contenuto .title
	{ 
		margin-top: 10px;  
		font-size:22px; 
		font-family:'Verdana'; 
		color:#cc0f14; 
		text-align: center;
	}
	.listaNews .news .contenuto .intro
	{ 
		margin-top:10px; width: 90%; height: 180px;margin:0 auto; text-align: justify; border:1px solid red; 
		display: none;
		white-space: pre-wrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	

	.listaNews .news .contenuto .data
	{ 
		position:absolute;  
		bottom:25px; 
		color: #CC0F14; 
		font-weight: bold; 
		width: 125px;
		left:5%;
		padding-left:24px; 
		height: 18px; 
		line-height: 18px;  
		background-image: url(../images/icona-data.png); 
		background-position: left; 
		background-size: contain;
	} 
	.listaNews .news .contenuto .button
	{ 
		position:absolute; right: 5%;  bottom:12px; padding:4px 16px;
	}

}

@media screen and (min-width:769px) 
{
	.listaNews .news .contenuto .intro{ display:none; }
	

	.listaNews .news
	{
		height: 200px;
		width: 100%;
		clear: both;
		padding:0 10%;   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; 
	}

	.listaNews .news:nth-child(even){background-color:#f7f1f1;}

	.listaNews .foto{ width:45%; height: 180px; margin-top:10px; text-align: center;}
	.listaNews .contenuto{ width:60%; height: 180px; position:relative; }
	.listaNews .contenuto .title{ margin-top: 7%;  font-size:20px; font-family:'Verdana'; color:#cc0f14;}
	.listaNews .contenuto .intro{ margin-top:10px; width: 100%; text-align: justify}

	.listaNews .contenuto .data{ position:absolute;  bottom:17%; color: #CC0F14; font-weight: bold; width: 100%; padding-left:24px; height: 18px; line-height: 18px;  background-image: url(../images/icona-data.png); background-position: left; background-size: contain;} 

	
	.listaNews .contenuto .button{ position:absolute; right: 1%;  bottom:10%; padding:4px 12px; font-size: 14px; }
	.listaNews .foto img{ max-height: 80%; margin-top:6%; max-width: 80%; border-radius: 5%; box-shadow: 2px 2px 5px #AAA}
}

@media screen and (min-width:1024px)
{
	.listaNews .foto{ width:40%; max-width: 90%; height: 190px;  margin-top:0}
	.listaNews .contenuto{ height: 210px !important; }
	.listaNews .news{ clear: both; height: 210px}
	.listaNews .contenuto .button{ font-size:16px; }
}



.navigation
{
	
}

.navigation ul
{
	  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; 
	align-items: center;
    justify-content: center;
	list-style: none;
	text-align: center;
	width: 100%;
	padding:30px 10%;
}

.navigation ul li
{
	width: 40px;
	height: 40px;
	border-radius:50%;
	line-height: 38px;
	border:1px solid #ccc;
	text-align: center;margin:10px;
}

.navigation ul li a
{
	display: block; width: 40px; color:#ccc;text-align: center;

}

.navigation ul li.current a {color:white}

.navigation ul li.current
{
	border-color:#cc0f14; background-color:#cc0f14; color:white !important ; font-weight: bold;
}


/* -- dettaglio news --------------------------------------- */
.dettaglioNews {width:100%; padding:0 10%;}
.dettaglioNews .foto{ width:100%; text-align: left; float:left; padding: 0 20px 20px 0}
.dettaglioNews .foto img{ max-height: 100%; max-width: 100%; border-radius: 5%; box-shadow: 2px 2px 5px #AAA}
.dettaglioNews .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;} 

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

.dettaglioNews .descrizione{padding-bottom:20px;}
.servizioCollegato{ background-color: #f7f1f1; height: auto; min-height: 250px; width:100%; padding:50px 10% 25px 10%; clear:both;}
.servizioCollegato .title{ background-color: #f7f1f1; width:100%; text-align:center; color:#cc0f14; font-size:22px}
.servizioCollegato .descrizione{ margin-top:30px; font-size:16px; text-align: center;} 
.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){

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

}