/*
 * INTRO
 * 
 * 1.0 Pagiona web
 * 2.0 Tablet
 * 3.0 Phone
 */

/* -- 1.0 Pagiona web -- */
	

	article.cna-costola .segnaposto { position: absolute; top:0; left:20px; width:43px; height:55px; display: block; z-index:10;
		
		-webkit-border-bottom-right-radius		: 20px;
		-moz-border-radius-bottomright		: 20px;
		border-bottom-right-radius			: 20px;
		-webkit-border-bottom-left-radius		: 20px;
		-moz-border-radius-bottomleft			: 20px;
		border-bottom-left-radius			: 20px;
	
	}
	
	/* Contenitore */ 
	article.cna-costola .contenuto { position:absolute; bottom:100px; right:100px; width:40%; font-style: italic; margin-top:20px; }
	article.cna-costola .contenuto .loop { margin-top:10px; }

	
	/* Titoli */	
	article.cna-costola .titoli h1 { font-size: 2.3em; font-weight:400; font-style: normal; background: rgba(255,255,255,0.9); margin-left:-20px; padding:20px 20px 20px 40px;}
	article.cna-costola .titoli h2.sottotitolo { font-size: 1em; font-weight:200; margin-left:-20px; padding:10px 20px 10px 40px; font-style: normal; color:#fff;  display: inline-block; }
	
	/* Se c'è l'immagine di testa */
	article.cna-costola .img-testa				{ width:100%; position: relative; overflow: hidden; z-index: 0; padding-top:68px }
	article.cna-costola .img-testa img 			{ width:100%; height: auto; opacity: 1; }
	article.cna-costola .img-testa .titoli		{ position: absolute; bottom: 0; left: 0; }
	
	/* Se non c'è l'immagine di testa */ 
	article.cna-costola .img-testa.no-img  { padding-top:0 !important; }
	article.cna-costola .img-testa.no-img .titoli 	{ position:static; background: none; padding:80px 20px 0px 20px;  }
	
	article.cna-costola .img-testa.no-img .titoli h1 { padding:0; margin:0; }
	article.cna-costola .img-testa.no-img .titoli h2.sottotitolo { padding:0; margin:0; color:#222 !important;  }
	article.cna-costola .img-testa.no-img .titoli .sottotitolo {background: none !important;}
	
	/* Testo */ 
	article.cna-costola .wrapper-testo h1,
	article.cna-costola .wrapper-testo h2,
	article.cna-costola .wrapper-testo h3 { padding:10px 0 10px 0; }
	article.cna-costola .wrapper-testo h1 { font-size: 1.2em; }
	article.cna-costola .wrapper-testo h2,
	article.cna-costola .wrapper-testo h3  { font-size: 1em; color:#666; }
	
	
	/* Blockquote */
	article.cna-costola blockquote 			{ 
		
		padding: 0 20px 0 10px; margin:20px 0 20px 20px;  border-left:2px solid #ff0000;
		font-style: normal; 
		font-size: 1em; 
		
	}
	
	
	article.cna-costola blockquote:before		{ content: "\f10d"; display: block; position: absolute; top: -5px; left: -22px; font-size: 12px; }
	article.cna-costola blockquote p			{ padding:0 !important; }
	
	/* Full width */
	
	article.cna-costola .block-keep-compact blockquote,
	article.cna-costola .full-width blockquote { margin: 20px 0 20px 0; padding:20px; color:#fff; font-size: 1.2em; line-height: 1.4em; font-weight:normal; font-style: italic;  font-family: 'droid_serifregular'; }
	article.cna-costola .full-width blockquote { width:100%; padding:0; }
	article.cna-costola .full-width blockquote p { padding:20px !important; }
	
	article.cna-costola .block-keep-compact blockquote:before,
	article.cna-costola .full-width blockquote:before {content: none; clear:both; float:none;width:100%; }
	
	.costola-table {  border: none; padding: 0 !important; margin:0 !important;  table-layout:fixed; }
	.costola-table td { font-weight:inherit !important; vertical-align: top;padding: 0 !important; width:75%; }
	.costola-table td.colonna2 { width:25%; background: #5b5959; padding:20px 0 !important;  }
	
/* -- 2.0 Tablet -- */

@media screen and (max-width: 967px) {
	
	.costola-table td { width:70%; }
	.costola-table td.colonna2 { width:30%; }
		
}

@media screen and (max-width: 800px) {
	
	article.cna-costola .gutter.column2 { 
		-webkit-column-count: 1!important;
		-webkit-column-gap: 4px;
		-moz-column-count: 1!important;
		-moz-column-gap: 4px;
	}
}

@media screen and (max-width: 767px) {
	
	article.cna-costola .img-testa .titoli { position: static; }
	article.cna-costola .img-testa.no-img .titoli h2.sottotitolo {padding-bottom: 10px; }
	.immagine .caption, .img_gallery .caption { padding:10px; }
	table, tr, td { display: block; width:auto; padding:0; margin:0;  }
	
	.costola-table td { width:auto; }
	.costola-table td.colonna2 { width:auto; }
	
	article.cna-costola .contenuto-IMMAGINE.immagine img { width:100%; }
	
}