/*
 *
 * File di configurazione DMAG
 * Modificare questo file a piacimento
 *
 * 1.0 Layout generale
 *	
 * 2.0 Tipografia e colori
 * 	2.1 Links
 * 	2.2 Strong, p etc ...
 *	2.3 Header
 *	2.4 Tabelle
 *	2.5 Immagini (Caption)
 *	2.6 Blockquote
 *
 * 3.0 Tag 
 *
 * 4.0 Article
 *
 * 5.0 TOC
 *
 * 6.0 TOP Menu
 *	6.1 Left side menu
 *	6.2 Right side menu
 *
 * 7.0 Fancybox
 *
 * 8.0 Ken Burn
 */
 

/* -- 1.0 Layout generale -- */

	@import url('../../font/fontawesome/font-awesome.css');
	@import url('../../font/Lato/Lato.css');
	//@import url('http://sei.mag.iolimpresabologna.it/font/Droid-serif/Droid-serif.css');
	
/*	@import url('/font/Elsie/stylesheet.css');
	@import url('/font/Abril/stylesheet.css');*/
	
	/* Immagnine grigia di sfondo */
	
	body 			{ background: #313036 url('../../images/bg.jpg'); }
	#mag-overlay 		{ background: #313036 url('../../images/bg.jpg'); }
	#mag-overlay h1 	{ color: #ccc !important; font-weight: 300; text-transform: lowercase; }
	
	/* Logo principale DMAG */
	
	.menu-content .testa .marchio	{ 
		
		width: 110px;
		height: 110px;
		display: inline-block; 
		background-color: #fff; 
		text-align: center; 
		background-image: url('../../images/logo.png'); 
		background-repeat: no-repeat; 
		background-size: 110px 110px; 
		background-position: center center; 
		
	}
	
	.citta-magazine { background: #d6dc34; color:#fff; font-weight: normal; font-size: 16px; }
	
	.menu-content .testa .titolo-magazine { font-weight: bold; color:#d6dc34; font-size: 30px; }
	.mag-info-issue-number a,
	.mag-info-issue-number { color:#fff !important; }
	
	
	

/* -- 2.0 Tipografia-- */

	body, table, input, select, textarea { font-family: 'Lato', Helvetica, Arial; font-size: 16px; font-weight:300; color: #444;  }
	
	#main { background: #fff; }
	
	grigio 	{ color: #46555f; }
	celeste	{ color: #759ed0; }
	bordeaux  { color: #bf2932; }
	verde     { color: #77be4c; }
	arancio	{ color: #f17330; }
	azzurro	{ color: #00afec; }
	
	
	
	.primo-piano .intestazioneMagInner .cartella,
	.primo-piano blockquote:before,
	
	.primo-piano h1,
	.primo-piano h2,
	.primo-piano h3,
	.primo-piano h4,
	.primo-piano h5,
	.primo-piano h6 { color: #759ed0 !important; }
	.primo-piano h2.sottotitolo,
	.primo-piano .block-keep-compact blockquote,
	.primo-piano .full-width blockquote,
	.primo-piano .segnaposto { background: #759ed0 !important; }
	.primo-piano blockquote { border-left:3px solid  #759ed0 !important;  }
	.primo-piano h2.sottotitolo.bianco { color:#fff !important;}


	.primo-piano .block-keep-compact .reverse blockquote,
	.primo-piano .full-width .reverse blockquote { background:#fff !important; border-left:none !important; border-top:2px solid #759ed0 !important; border-bottom:2px solid #759ed0 !important;  color:#759ed0 !important; }
	
	.editoriale .intestazioneMagInner .cartella,
	.editoriale blockquote:before,
	.editoriale h1,
	.editoriale h2,
	.editoriale h3,
	.editoriale h4,
	.editoriale h5,
	.editoriale h6 { color: #46555f !important; }
	.editoriale h2.sottotitolo,
	.editoriale .block-keep-compact blockquote,
	.editoriale .full-width blockquote,
	.editoriale .segnaposto { background: #46555f !important; }
	.editoriale blockquote { border-left:3px solid  #46555f !important;  }
	.editoriale h2.sottotitolo.bianco { color:#fff !important;}
	
	.editoriale .block-keep-compact .reverse blockquote,
	.editoriale .full-width .reverse blockquote { background:#fff !important; border-left:none !important; border-top:2px solid #46555f !important; border-bottom:2px solid #46555f !important;  color:#46555f !important; }
	
	.fatti-impresa .intestazioneMagInner .cartella,
	.fatti-impresa blockquote:before,
	.fatti-impresa blockquote a,
	.fatti-impresa h1,
	.fatti-impresa h2,
	.fatti-impresa h3,
	.fatti-impresa h4,
	.fatti-impresa h5,
	.fatti-impresa h6 { color: #bf2932 !important; }
	.fatti-impresa h2.sottotitolo,
	.fatti-impresa .block-keep-compact blockquote,
	.fatti-impresa .full-width blockquote,
	.fatti-impresa .segnaposto { background: #bf2832 !important; }
	.fatti-impresa blockquote { border-left:3px solid  #bf2932 !important;  }
	.fatti-impresa h2.sottotitolo.bianco { color:#fff !important; }
	
	.fatti-impresa .block-keep-compact .reverse blockquote,
	.fatti-impresa .full-width .reverse blockquote { background:#fff !important; border-left:none !important; border-top:2px solid #bf2832 !important; border-bottom:2px solid #bf2832 !important;  color:#bf2832 !important; }
	
	.opportunita-impresa .intestazioneMagInner .cartella,
	.opportunita-impresa blockquote:before,	
	.opportunita-impresa h1,
	.opportunita-impresa h2,
	.opportunita-impresa h3,
	.opportunita-impresa h4,
	.opportunita-impresa h5,
	.opportunita-impresa h6 { color: #77be4c !important; }
	.opportunita-impresa h2.sottotitolo,
	.opportunita-impresa .block-keep-compact blockquote,
	.opportunita-impresa .full-width blockquote,
	.opportunita-impresa .segnaposto { background: #77be4c !important; }
	.opportunita-impresa blockquote { border-left:3px solid  #77be4c !important;  }
	.opportunita-impresa h2.sottotitolo.bianco { color:#fff !important; }
	
	.opportunita-impresa .block-keep-compact .reverse blockquote,
	.opportunita-impresa .full-width .reverse blockquote { background:#fff !important; border-left:none !important; border-top:2px solid #77be4c !important; border-bottom:2px solid #77be4c !important;  color:#77be4c !important; }

	.rubrica .intestazioneMagInner .cartella,
	.rubrica blockquote:before,
	.rubrica h1,
	.rubrica h2,
	.rubrica h3,
	.rubrica h4,
	.rubrica h5,
	.rubrica h6 { color: #f17330 !important; }
	.rubrica h2.sottotitolo,
	.rubrica .block-keep-compact blockquote,
	.rubrica .full-width blockquote,
	.rubrica .segnaposto { background: #f17330 !important; }
	.rubrica blockquote { border-left:3px solid  #f17330 !important;  }
	.rubrica h2.sottotitolo.bianco { color:#fff !important; }

	
	.rubrica .block-keep-compact .reverse blockquote,
	.rubrica .full-width .reverse blockquote { background:#fff !important; border-left:none !important; border-top:2px solid #f17330 !important; border-bottom:2px solid #f17330 !important;  color:#f17330 !important; }
	
	.vetrina .intestazioneMagInner .cartella,
	.vetrina blockquote:before,
	
	.vetrina h1,
	.vetrina h2,
	.vetrina h3,
	.vetrina h4,
	.vetrina h5,
	.vetrina h6 { color: #00afec !important; }
	.vetrina h2.sottotitolo,
	.vetrina .block-keep-compact blockquote,
	.vetrina .full-width blockquote,
	
	.vetrina .segnaposto { background: #00afec !important; }
	.vetrina blockquote { border-left:3px solid  #00afec !important;  }
	.vetrina h2.sottotitolo.bianco { color:#fff !important; }
	
	.vetrina .reverse .block-keep-compact blockquote,
	.vetrina .reverse .full-width blockquote { background:#fff; border-top:2px solid #00afec !important; border-bottom:2px solid #00afec !important;  color:#00afec !important; }
	
	
	.vetrina blockquote a,
	.primo-piano blockquote a,
	.editoriale-impresa blockquote a,
	.fatti-impresa blockquote a,
	.opportunita-impresa blockquote a,
	.rubrica blockquote a {
		color:#fff !important; font-weight: bold; 
	}
	
	aside .inside-costola { background: #5b5959; color:#fff; }
	aside .inside-costola a {  color:#fff; }	
	


	
	/* -- 2.1 Links -- */
	
	a 			{ text-decoration: none; }
	a:link  		{ color: #666666; }
	a:visited 	{ color: #666666; }
	a:active 		{ color: #666666; }
	a:hover 		{ color: #000; }
	
	/* Link della testa */
	.menu-content a 		{ text-decoration: none; }
	.menu-content a:link  	{ color: #000; }
	.menu-content a:visited 	{ color: #000; }
	.menu-content a:active 	{ color: #000; }
	.menu-content a:hover 	{ color: #000; text-decoration: underline;}
	
	.side-panel li a 		{ text-decoration: none; }
	.side-panel li a:link  	{ color: #222222; }
	.side-panel li a:visited { color: #222222; }
	.side-panel li a:active 	{ color: #222222; }
	.side-panel li a:hover 	{ color: #FF9900; text-decoration: underline;}
	
	#right-side a .brand		{ color: #CCCCCC; font-size: 80%; font-weight: 400; text-transform: uppercase; letter-spacing: 0.2em; }
	#right-side a .cartella		{ color: #222222; font-size: 80%; font-weight: 400; text-transform: uppercase; letter-spacing: 0.2em;  font-style: italic; }
	
	/* -- 2.2 Strong, p etc -- */
	
	strong, b { font-weight: 600; }
	
	/* Elenchi puntati */
	
	ul li:before	{ color: #ff0000; font-size: 20px;	}
		
	/* -- 2.3 Header -- */ 
	
	h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 1em; font-family: 'droid_serifregular'; }

	h1 { font-size: 1.8em; line-height: 1.15em; color: #000; font-weight: 600; }
	h2 { font-size: 1.6em; line-height: 1.15em; color: #222; font-weight: 400; }
	h3 { font-size: 1.3em; line-height: 1.1em;  color: #222; }
	h4 { font-size: 1em;   line-height: 1em;    color: #222; font-weight: 600; }
	h5 { font-size: 1em;   line-height: 1.1em;  color: #222; }
	h6 { font-size: 1em;   line-height: 1.1em;  color: #222; font-weight: 600;}
	
	.menu-content h2 { font-size: 22px; text-transform: uppercase; color: #ddd; }
	.menu-content .col1 h2,
	.menu-content .col2 h2,
	.menu-content .ricerca h2 { font-size: 16px; }
	.side-panel h1	{ color: #fff; line-height: 25px; font-size: 24px; }
	
	/* -- 2.4 Tabelle -- */

	table							{ font-size:15px;  background:#ffffff !important; border:none; }
	table td, table th					{ border-bottom: 1px solid #ccc !important;  padding:15px !important;  vertical-align: middle;}	
	table thead						{ display:none; }
	table tr:nth-child(odd)       		{ background-color:#ffffff; }
	table tr:nth-child(even)      		{ background-color:#ffffff; }
	table tr:nth-child(odd) td  			{ font-weight: bold; }
	table tr:nth-child(even) td			{ font-weight: bold; }
	
	table tr:last-child	td,
	table tr:last-child	th				{ border-bottom: none!important;  }	

	/* -- 2.5 Immagini (Caption) -- */
	
	.immagine .caption, 
	.img_gallery .caption 	
	.immagine .sottotitolo, 
	.img_gallery .sottotitolo { font-style: italic; }	

	/* Caption sotto l'immagine */
	
	.immagine .caption, 
	.img_gallery .caption 	 { font-weight:300; text-align: center;  }
	
	.immagine .testo-sotto, 
	.img_gallery .testo-sotto { font-size: 0.8em; line-height: 1.4em; }
	
	.testo-sotto .sottotiolo { background: none !important; }
	
	.immagine .ext-zoom-wrapper,
	.img_gallery .ext-zoom-wrapper	{ border: 1px solid #ededed; }
	
	/* -- 2.6 Blockquote -- */

	blockquote 			{ font-size: 1.5em; font-style: italic; line-height: 1.5em;  font-weight: 300; }
     blockquote:before		{ font-family: "FontAwesome"; font-size: 40px; color: #EE2D33; }


	
/* -- 3.0 Tag  -- */
	
	article rosso		{ color: #EE2D33!important;}
	article nero		{ color: #575651!important;}
	article bianco		{ color: #ffffff!important;}
	
	
	/* Box */
	
	article box_grigio { background: #f5f5f5; padding:15px; font-size: 1.5em; line-height:1.5em; color:#666; display:block; margin:15px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
	article bg_grigio { background: #f5f5f5; padding:3px; font-weight: 300;   }
	
	
	/* DEFINIRE QUI EVENTUALI ALTRI TAG .. */ 

/* -- 4.0 Article -- */

	article						{ line-height: 1.4em; font-weight:300; }
	
	/* Intestazione pagina */
	
	article .intestazioneMagInner		{ font-size: 14px; font-weight: 300; line-height: 14px;}
	article .intestazioneMagInner .cartella { font-weight: bold; font-style: italic; letter-spacing: 2px;font-family: 'droid_serifregular'; background: rgba(255,255,255,1);  }
	article .intestazioneMagInner i {  color: #fff; font-size: 27px; }

/* -- 5.0 TOC -- */
	
	/* Bottoni */
	
	.btn {   color:#222 !important; font-size: 10px; }
	.btn:hover {  background: #fff; color:#222 !important;}
	
	#search-text { background: none; border:none; outline: none;  }
	
	/* Linguetta menu */
	
	.inside-toc-toggle 	{ font-weight: 300; }
	
	/* Contenitore TOC */
	
	.toc-container.swiper-container 								{ background-color: #dcdf4d; }
	
	/* Colore dello slider */
	
	.toc-container.swiper-container .swiper-slide					{ background-color: #dcdf4d }
	
	/* Colore della pagina nel TOC, Dimensione del titolo*/
	
	.toc-container.swiper-container .swiper-slide .iss 				{ background-color: rgba(255,255,255,0.8) ; }
	.toc-container.swiper-container .swiper-slide .iss .titolo			{ color: #222222; font-size:13px; font-weight: 300; }
	
	/* Colore pagina attiva nel TOC */
	
	.toc-container.swiper-container .swiper-slide.current .iss 			{ background-color: #fff; /*border:1px solid #333;*/ }
	.toc-container.swiper-container .swiper-slide.current .iss .titolo	{ color: #aaa8a9; }
	
	/* Dimensione e colore del brand */
	/* Nota: Rimosso da tutti i magazine */
	
	.toc-container.swiper-container .swiper-slide .brand				{ display:none; /*font-size: 10px; color: #666; font-weight: 600; */ }
	
	
/* -- 6.0 TOP Menu -- */

	.menu-container			{ font-weight:300; }
	.menu-content .testa .issue	{ font-weight:300; font-size: 70%; padding:0 20px;  }
	.menu-content .testa .issue-text { font-weight: 600; }
	
	/* Colore della banda top sopra il logo */
	
	.menu-content 		 		{ background-color: #aaa8a9; color: #222; }
	
	/* Colore della select per il cambio lingue */
	
	.menu-content .testa .utente a, 
	.menu-content .testa .utente { color:#fff; }
	.menu-content .testa .utente #language-select #language-text { background: #fff; color: #222; border:1px solid #ddd;   }
	.menu-content .testa .utente #language-select #language-text i { background: #eee; border-left:1px solid #ddd; }
	
	/* Colore delle testa menu ( parte sotto il logo ) */
	
	.menu-content .testa 		{ background-color: #aaa8a9 }	
	
	/* Form di ricerca */
	
	.menu-content .navigazione 	{ border:1px solid #ddd;  }
	.menu-content .keyword		{ font-size: 14px; color: #222; border:none;}
	
	/* 
	
	/* -- 6.1 Left side menu -- */

	#left-side  { background-color: #eee; border-right: 1px solid #ccc; }

	/* -- 6.2 Right side menu -- */
	
	#right-side { background-color: #eee; }
	
	/* -- 6.4 Side panel -- */

	.side-panel			{ color: #222; }
	.side-panel .mini-header	{ color: #fff; background-color: #000; border-bottom: 1px solid #777; }

	.side-panel li			{ border-bottom: 1px solid #ccc; }
	.side-panel li:hover	{ border-bottom: 1px solid #ddd; }

/* -- 7.0 Fancybox -- */

	#fancybox-content	{ background-color: #101010; }
	#fancybox-overlay	{ background-color: #000; }

/* -- 8.0 Ken Burn -- */
	
	/* Configura lo sfondo della copertina con KB */
	article.kb .gallery_copertina  { background-color: whitesmoke }
	
	
/* -- 9.0 Media query -- */

	@media all and (max-width: 769px) {
	
	    body { font-size: 16px; }
	    .immagine .testo-sotto			{ font-size: 90%; }
	
	}


	@media all and (min-width: 1439px) {
	
	    #sfoglia-next, 
	    #sfoglia-prev			{ background-color: #ccc;  }
	    
	}

	@media all and (max-width: 480px) {
	    
	    article				{ font-weight: 400; }
	    
	    .toc-toggle 			{ font-size: 0.8em; color: #222; }
	    .intestazioneMagInner 	{ font-size: 0.9em; }
	
	    h1 { font-size: 1.4em; }
	    h2 { font-size: 1.4em; }
	    h3 { font-size: 1.3em; }
	    h4 { font-size: 1em; }
	    h5 { font-size: 1em; }
	    h6 { font-size: 1em; }
	    
	    .side-panel .mini-header h1		{ font-size: 16px !important; }
	    .menu-content h2				{ font-size: 18px !important; }
	
	    .menu-content .testa .issue 		{ font-size: 80%; line-height: 80%; }
	    .menu-content .testa .utente 		{ font-size: 80%; color:#fff; }
	    .inside-toc-toggle:after 			{ color: #222; }
	    .inside-toc-toggle				{ font-size: 18px;  }
	    	
	}