/* ===========================================================================
   Guida pratica alla configurazione del Cookie Banner
   Derivato da landing/intelligenza_artificiale/css/page_intelligenza_artificiale.css
   Layout: sidebar (col_one_fourth) con l'indice delle 5 voci +
           content-area (col_three_fourth) con il contenuto della pagina.
   =========================================================================== */

.content-wrap{
	padding-bottom:0;
}
#guida_cookie_banner{
	margin-top: 15px;
}
#guida_cookie_banner .container{
	padding-top:20px;
	padding-bottom:40px;
}
.mobile-title{
	position:absolute;
	left:50px;
	top:20px;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: bold;
}

/* ---------- secondary-menu.jsp (barra di navigazione sezione Cookie Banner) ---------- */
/* Stessa regola duplicata in landing/cookie_banner/css/page_configurazione.css: */
/* lo stile della barra non e' centralizzato, ogni pagina che include secondary-menu.jsp */
/* deve ripetere queste regole nel proprio CSS. */
#secondary-menu .container{
	/*text-align: center;*/
}
#secondary-menu ul{
	list-style-type: none;
	margin: 0 auto;
	display: inline-block;
}
#secondary-menu.style-2 > div > ul {
	float:left;
}
#secondary-menu ul > li {
	margin-left: 8px !important;
	float:left;
	position:relative;
}
#secondary-menu.style-2 > div > ul > li > a{
	padding-top: 19px;
	padding-bottom:15px;
}
#secondary-menu ul li > a{
	font-size:12px;
	display:block;
	line-height:22px;
	padding:39px 15px 39px 8px;
	font-weight:700;
	letter-spacing:1px;
	text-transform: uppercase;
	font-family: 'Raleway', sans-serif;
	transition: margin .4s ease, padding .4s ease;
}
#secondary-menu{
	background-color: #2E3752;
}
#secondary-menu.style-2 > div > ul > li > a span{
	color: #FFFFFF !important;
}
#secondary-menu.style-2 > div > ul > li > a:hover span,
#secondary-menu.style-2 > div > ul > li > a.selected span{
	color: #79A400 !important;
}

/* ---------- Sidebar / indice delle pagine ---------- */
#sidebar .sidebar-title{
	font-size:15px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.5px;
	color:#2E3752;
	margin:0 0 12px;
	line-height:1.3;
}
#sidebar ul.menu{
	list-style:none;
	margin:0;
	padding:0;
}
#sidebar ul.menu li{
	list-style-type:none;
	position:relative;
	padding-bottom:6px;
}
#sidebar ul.menu li a{
	background-color:#1e73be;
	padding:9px 12px;
	color:#fff !important;
	font-size:14px;
	font-weight:600;
	line-height:18px;
	display:block;
	border-radius:4px;
	position:relative;
	transition:background-color .2s ease;
}
#sidebar ul.menu li a .num{
	display:inline-block;
	min-width:22px;
	font-weight:700;
	opacity:.7;
}
#sidebar ul.menu li a:hover,
#sidebar ul.menu li a.selected{
	background-color:#2284dd;
}
/* freccia sull'elemento attivo/hover (nascosta su mobile) */
@media screen and (min-width:768px){
	#sidebar ul.menu li a:hover:after,
	#sidebar ul.menu li a.selected:after{
		left:100%;
		top:50%;
		border:solid transparent;
		content:" ";
		height:0;
		width:0;
		position:absolute;
		pointer-events:none;
		border-color:rgba(34,132,221,0);
		border-left-color:#2284dd;
		border-width:8px;
		margin-top:-8px;
	}
}

/* ---------- Content area ---------- */
#content-area h1{
	font-weight:400;
	font-size:30px;
	line-height:1.25;
	margin-bottom:18px;
	color:#2E3752;
}
#content-area p.lead{
	font-size:19px;
	line-height:1.5;
	color:#555;
	text-align:left;
	margin-bottom:24px;
}
#content-area p.lead strong{
	font-weight:600;
}
#content-area h2{
	font-weight:700;
	font-size:20px;
	line-height:1.3;
	margin:26px 0 8px;
	color:#1e73be;
}
#content-area h3{
	font-weight:700;
	font-size:16px;
	margin:18px 0 6px;
	color:#2E3752;
}
#content-area p{
	font-size:16px;
	line-height:1.65;
	text-align:justify;
	margin-bottom:14px;
}
#content-area ul, #content-area ol{
	padding-left:18px;
	font-size:16px;
	line-height:1.6;
}
#content-area ul ul, #content-area ol ol, #content-area ul ol, #content-area ol ul{
	margin:4px 0 8px;
}
#content-area .separator{
	height:20px;
}

/* ---------- Immagine screenshot in posizione nel testo ---------- */
#content-area .ia-figure{
	margin:22px 0 10px;
}
#content-area .ia-figure img{
	display:block;
	width:100%;              /* riempie la colonna e la segue nelle media query */
	height:auto !important;  /* preserva l'aspect ratio (dagli attributi width/height); vince su regole del tema */
	border-radius:6px;
	border:1px solid #e5e8ef;
}

/* ---------- CTA box (contatti / evidenze) ---------- */
#content-area .cta-box{
	margin:26px 0 8px;
	padding:18px 22px;
	background-color:#f2f7ec;
	border-left:4px solid #79A400;
	border-radius:4px;
}
#content-area .cta-box p{
	margin:0;
	font-size:16px;
	line-height:1.5;
	text-align:left;
	color:#2E3752;
}
#content-area .cta-box p strong{
	color:#4d6b00;
}

/* ---------- FAQ (punto 4.1) ---------- */
#content-area .faq-item{
	margin:0 0 16px;
	padding-bottom:16px;
	border-bottom:1px solid #e5e8ef;
}
#content-area .faq-item:last-child{
	border-bottom:none;
}
#content-area .faq-q{
	margin-bottom:6px;
	color:#2E3752;
}
#content-area .faq-a{
	margin-bottom:6px;
	color:#555;
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 767.98px){
	.container{
		padding-right:15px !important;
		padding-left:15px !important;
	}
	.col_three_fourth, .col_one_fourth{
		width:100%;
	}
	#sidebar{
		margin-bottom:30px;
	}
	#content-area h1{
		font-size:26px;
	}
}