/* File da compilare SCSS */
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
@import "normalize";   
@import "admin"; 
@import "base";   /* Informazioni di base, definizione costanti, colori, mixin, ... */
@import "slick";  /* CSS dello slider http://kenwheeler.github.io/slick/ */
@import "media-query"; /* Media query per la gestione del responsive */
  
 
.GoAway{ position:absolute; top:-10000px; left:-10000px; }
html { font-size: 62.5%; }
body {
    @extend %FontTRegular;
    color: $Text;     
    min-height: 100vh;
    font-size: 1.6rem;  
}  

dl{
	width: 100% !important;
}
/* TOP HEADER */ 
.TopHeader {
	background-color: $DarkGrey;
	color: white;
	padding: 6px 0;
	.SearchWrap {
		position: absolute;
		right: 55px;
		top: -1px;
		background-color:$Green;
		.Search {
			#text { border:0; padding: 3px; color:$Black;}
			#btnOK {
				background:$Green url(kAssetsUSR/img/New/ico-cerca.png) 45% 50% no-repeat;
				position: relative;
				border: none;
				width: 27px;
				height: 27px;
				vertical-align: top;
				font-size:0;
				color:$Trasp;
				margin-left:-2px;
			}
		}
	}
	.Stampa{
		position: absolute;
		right: 10px;
		top: 0px;
		a{
			color: #FFFFFF;
			background-color: $DarkGrey;
		    font-size: 23px;
		    line-height: 27px;
			:hover{
				color: $Green;
			}
		}
	}
	ol {
		li {
			margin: 0 15px;
			a {
				color: white;
				font-size: 24px;
				line-height: 24px;
				@extend %TrColor;
				:hover {
					color: $Green;
				}
			}
			:last-child {
				margin-right: 0;
			}
		}
	}
}

/* HEADER */
header {
	padding: 10px 0;
	.LogoTop { display: block; position: relative; margin-left: 20px; }
	.MenuH {
		margin: 45px 0 0 0;
		ol {
			li {
				position: relative;
				margin: 0 10px 0 0;
				a, strong {
					@extend %FontTSemiBold;
					padding: 0 15px 0 0;
					font-size: 17px;
					line-height: 17px;
					color: black;
					display: block;
				}
				a:hover { color: $DarkGreen}
				:after {
					content: " ";
					position: absolute;
					right: 0;
					top: 0;
					height: 100%;
					width: 2px;
					background-color: black;

				}
				:last-child:after { display: none; margin: 0; }
			}
		}
		& ol ol {
			display: none;
			position: absolute;
			background-color: $Green;
			color: $Black;
			min-width: 240px;
			margin-left: 0;
			margin-top:10px;
			border-top: 3px solid $DarkGreen;
			z-index: 100;
			padding: 0px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.3);
			@extend %CenterOriz;
			& li {
				margin: 0; 
				padding: 0;
				display: block;
				&:after { display:none;}
				& a, &.LIStrong strong, &.LISel strong {
					color: $Black;
					@extend %FontTSemiBold;
					font-size: 16px;
					line-height: 16px;
					display: block;
					text-align: center;
					vertical-align: top;
					padding: 15px 10px;
					@include transition(background-color 0.3s ease-in-out);
					.home & { padding: 15px 10px; }
					& a:hover {color:$White;}
				}
				& a:hover, &.LIStrong strong, &.LISel strong { background-color: $LightGrey; color:$Black; }
			}
		}
	}
	.MenuHResp {
		background-color: $Green;
	    position: absolute;
	    padding-top: 20px;
	    padding-bottom: 20px;
	    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
	    display: none;
	    z-index:200;
		& ol {
			& > li {
				margin: 2px 0;
				display: block;
				width: 100%;
				text-align: center;
				& a, & strong {
					color: $Black;
					text-transform: uppercase;
					padding: 3px 10px;
					display: inline-block;
					&:hover { font-weight:600;}
				}
				& i.BtnOpen { 
					padding: 0 5px;
					color: $Black;
					width: 10px;
					text-align: center;
				}
			}
		}
		& ol > li > ol {
			display: none;
			background-color: $DarkGreen;
			padding: 15px 0;
			& > li {
				& a, & strong {
					color: $White;
					text-transform: none;

				}
			}
		}
		& ol > li > ol > li > ol { display: none; }
	}
	& .WrapHam {
		display: inline-block;
		float: right;
		position: relative;
		padding: 20px 10px 0;
	}
}
header.stuck {
	background-color: white;
	border-bottom: 3px solid $Green;
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
	.LogoTop {
		max-width: 130px;
	}
	.MenuH {
	    margin: 15px 0 0 0;
	}
}

/* Breadcrumb */
.WrapBread .Bread {
	margin: 10px 0;
	a {

		color: black;
		@extend %TrColor;
		:hover {
			color: $Green;
		}
	}
	a, strong { font-size: 15px; line-height: 15px; font-weight: 600;  }
}

/* CORPOPAGINA*/
.CorpoPagina {
	h1.viewTitolo {
		border-bottom: 2px solid $Green;
		font-size: 33px;
		line-height: 33px;
		display: block;
		position: relative;
		padding:0 5px 5px 5px;
	}
	h2.viewSottotitolo {
		position: relative;
		font-size: 17px;
		line-height: 19px;
		font-weight: 800;
		text-transform: uppercase;
		:before {
			content: '';
			display: block;
			position: relative;
			width: 15px;
			height: 15px;
			float: left;
			margin-right: 10px;
			background-color: $Green;
			margin-top: 3px;

		}
	}
	h4.viewTitolo4 {
		font-size: 16px;
		line-height: 16px;
		border-bottom: 1px dashed $DarkGrey;
		color: $DarkGrey;
		text-transform: uppercase;
		display: block;
		margin: 20px 0;
		padding: 0 4px 4px 4px;

	} 
}


/* FOOTER */
footer {
	background-color: $DarkGrey;
	color: white;
	padding: 20px 0;
	a {
		color: white;
		@extend %TrColor;
		:hover {
			color: $Green;
		}
	}
	ol.Social {
		li {
			margin: 0 5px;
			a {
				color: $DarkGrey;
				background-color: white;
				font-size: 20px;
				line-height: 20px;
				width: 38px;
				height: 38px;
				text-align: center;
				display: block;
				position: relative;
				@extend %TrBgColor;
				:hover {
					background-color: $Green;
				}
				i {
					position: absolute;
					@extend %CenterBoth;
				}
			}
		}
	}
	.MenuFooter {
		margin: 35px 0;
		ol {
			li {
				position: relative;
				margin: 0 5px 0 0;
				a, strong {
					text-transform: uppercase;
					padding: 0 10px 0 0;
					font-size: 16px;
					line-height: 16px;
				}
				:after {
					content: " ";
					position: absolute;
					right: 0;
					top: 0;
					height: 100%;
					width: 1px;
					background-color: white;

				}
				:last-child:after { display: none; }
			}
		}
	}
}

.WrapMenuLat {
	@include flexBox(row nowrap);
	.MenuSx {
		@include flexItem(0 1 32%);
		background-color: $LightGrey;
	}
	.CorpoInt {
		@include flexItem(0 1 68%);

	}
}
.MenuSx {
	padding-bottom: 50px;
	ol {
		margin: 0;
		padding: 0; 
		li {
			display: block;
			width: 100%;
			margin: 0; 
			a, strong {
				background-color: $Green;
				color: black;
				display: block;
				padding: 10px 20px;
				font-size: 19px;
				line-height: 19px;
				font-weight: 600;
			}
		}
	}
	ol ol {
		padding: 0 15px 0 50px;
		li {
			display: block;
			border-bottom: 1px dashed black;
			a, strong {
				background-color: transparent;
				color: black;
				padding: 10px;
				font-size: 17px;
				line-height: 17px;
				font-weight: 600;
				@include transition( background-color 0.2s ease-in-out, color 0.2s ease-in-out );
				&:hover {
					background-color: $DarkGreen;
					color:$White;
				}
			}
			strong {
				background-color: $DarkGreen;
				color:$White;
			}
		}
	}
}
/*----------Paginatore---------*/
.FlexNavi {
	display: block;
	position: relative;
	width: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 20px 0;
	border-top: 1px solid $Green;
	& span, & ol {
		display: inline-block;
		margin: 0;
		padding: 0;
	}
	& ol li {
		display: inline-block;
		margin: 0 5px;
		padding: 0;
	}
	& .NavInactive { color: $Black;
	& a { color: $Text; }  
	}
}

/* Testi personalizzati */
.EtichettaVerde {
	background-color: $Green;
	color: black;
	padding: 10px 20px;
	font-size: 16px;
	line-height: 16px;
	margin: 15px 0;
	display: inline-block;
	font-weight: 700;
}
.TestoEvidenza {
	font-size: 17px;
	line-height: 22px;
	color: black;
	@extend %FontTSemiBold;
}
.TestoBordoVerde {
	@extend %Par;
	border-left: 3px solid $Green;
	padding-left: 10px;
}
h3.TitQuadVerde {
	position: relative;
	:before {
		content: '';
		display: block;
		position: relative;
		width: 20px;
		height: 20px;
		float: left;
		margin-right: 10px;
		background-color: $Green;
		margin-top: 3px;

	}
}
.LinkSottoElenc {
	background-color: #d1d2d4;
	a {
		background-color: #d1d2d4;
	    color: black;
	    font-size: 17px;
	    line-height: 17px;
	    display: block;
	    font-weight: 600;
	    padding: 8px 10px;
	    margin-bottom: 30px;
	    @extend %TrBg;
	    :hover {
	    	background-color: $Green;
	    }
	}
}

/* Elencatori */
.ElencFotoDataTitolo {
	display: block;
	position: relative;
	ol {
		li {
			display: block;
			position: relative;
			margin: 0 0 -1px 0;
			border-top: 1px dashed $DarkGrey;
			border-bottom: 1px dashed $DarkGrey;
			@extend %TrBg;
			:nth-child(2n+1) {
				background-color: $LightGrey;
			}
			:last-child {
				margin-bottom: 0;
			}
			:hover {
				background-color: $LightGreen;
			}
		}
	}
	.Caption {
		padding: 15px 0; 
		display: block;
		position: relative;
		small {
			display: block;
			font-size: 16px;
			line-height: 16px;
			margin: 0;
			color: black;
		}
		em {
			font-style: normal;
			font-weight: 600;
			display: block;
			font-size: 16px;
			line-height: 16px;
			margin: 15px 0;
			color: black;
		}
		h3 {
			font-weight: 400;
			display: block;
			font-size: 18px;
			line-height: 22px;
			color: black;
		}
		:hover {
			@extend %TrColor;
			h3 { color: $DarkGreen; }
		}
	}
}


.home {
	.Top1 {
		position: relative;
		.EtichettaVerde {
			position: absolute;
			z-index: 50;
			left: 0;
			top: 0;
			margin: 0; 
		}
		.PrimoPianoHome {
			position: relative;
			z-index: 40;
			h2 {
			    font-size: 27px;
			    line-height: 28px;
			    display: block;
			    margin: 15px 10px;
			    color: black;
			    @extend %FontTSemiBold;
			}
			p {
				@extend %Par;
				margin: 0 10px 15px; 
			}
		}
	}
	.Top2 {
		.BLOBAlignCenter a img { margin-top: -15px; }
		.PuntoPSRHome {
			margin-top: 25px;
			.Item {
				display: block;
				position: relative;
				.EtichettaVerde {
					position: absolute;
					top: 0;
					left: 0;
					margin: 0;
				}
				h3 {
					margin: 15px 0;

				}
			}
		}
	}	
	.NewsHome {
		.Item {
			display: block;
			position: relative;
			.EtichettaVerde {
				position: absolute;
				top: 0;
				left: 0;
				margin: 0;
			}
			h3 {
				margin: 10px 0;
				font-size: 22px;
				line-height: 24px;
			}	
		}	
	}
	.HomeBottom {
		.EtichettaVerde {
			/*cambiato da michele*/
			position: absolute;
			margin: 0;
		}	
		.RegioniHome {
			display: block;
			position: relative;
			padding: 10px;
			.Item {
				display: block;
				border-bottom: 1px dashed $DarkGrey;
				padding: 8px 0;
				margin-top: 10px; 
				p {
					margin-bottom: 8px;
					font-size: 16px;
					line-height: 16px;
				}
				h3 {
					margin-bottom: 0;
					font-size: 18px;
					line-height: 20px;
				}
			}
		}
		.RRNHome {
			.Caption {
				padding: 15px 10px;
				p {
					margin-bottom: 5px;
					font-size: 16px;
					line-height: 16px;
				}
				h3 {
					margin-bottom: 0;
					font-size: 18px;
					line-height: 20px;
				}
			}
		}	
	}
}

/* VCO */
.VCOImgTestoHome {
	background-color: $Olive;
	margin: 30px 0;
	display: block; 
	position: relative;
	padding-bottom: 20px;
	.EtichettaVerde {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		padding: 8px 20px;
	}
	h3 {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 26px;
		line-height: 26px;
		padding: 13px 0;
		position: relative;
		margin: 0;
	}
}

.ElencoCanale {
	padding-left:15px;
	a {
		@extend %Link;
	}
	p {
		margin: 0;
	}
	&.DataTitoloStrillo {
		ol {
			li {
				margin: 0 0 20px;
				display:block;
			}
		}
	}
}
.WrapMenuTopResp #toggleTopMenu {
    background-color:$DarkGreen;
	border-radius: 0 0 50px 50px;
    box-shadow: none;
    color:$White;
    cursor: pointer;
    display: block;
    margin: 0 0 20px;
    min-width: 150px;
    padding: 5px 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 100%;
    span {
		color:$White;
	}
	strong {
	    color: $White;
	    font-size: 16px;
	    margin: 0 10px;
	    text-decoration: none;
	    text-transform: uppercase;
	}
	.dropdown-menu {
	    background-clip: padding-box;
	    background-color: $White;
	    border: 1px solid rgba(0, 0, 0, 0.1);
	    border-radius: 0;
	    box-shadow: none;
	    display: none;
	    float: none;
	    font-size: 14px;
	    left: 0;
	    list-style: outside none none;
	    margin: 0;
	    width: 100%;
	    padding: 0;
	    position: relative;
	    text-align: left;
	    top: 100%;
	    z-index: 1000;
	}
	.dropdown-menu { width:100%;}
}
.WrapMenuTopResp.open .dropdown-menu { display:block; width:100% !important; }

/* MEDIA QUERY */
$xxxs:"screen and (max-width: 400px)";
$xxs:"screen and (max-width: 480px)";
$xss:"(min-width: 401px) and (max-width: 766px)";
$xs: "screen and (max-width: 767px)"; 
$sm: "screen and (max-width: 991px)";
$md: "screen and (max-width: 1199px)";
$lg: "screen and (max-width: 1393px)";

@media #{$sm} {
	.TopHeader {
		padding: 6px 0 0;
		ol {
			margin:0 0 6px;
			li a {
				font-size:18px;
				line-height:18px;
			}
		}
		.SearchWrap {
			position: relative;
			right: 0;
			display:block;
			overflow:hidden;
			.Search input#text {
				width: 80%;
				float: left;
				padding: 5px 10px;
				color: $Black;
			}
			.Search #btnOK {
				width:35px;
				height:28px;
			}
		}
		.Stampa{
			display: none;
		}
	}
	header {
		padding:0;
		border-bottom:2px solid $Green;
		.LogoTop {
			margin:10px 0 10px 20px;
		}
	}
	footer ol.Social li a {
		width:30px;
		height:30px;
	}
	.WrapMenuLat .CorpoInt {
		@include flexItem(0 1 100%);
	}
	.PadLeft { padding-left:0;}
	.MenuSx ol ol { padding:0;} 
	.WrapBread .Bread {
		a, strong { font-size: 13px; line-height: 13px;}
	}
	.CorpoPagina {
		h1.viewTitolo {
			font-size:25px;
			line-height:28px;
		}
	}
	.home {
		.Top1 .PrimoPianoHome h2, .Top2 .PuntoPSRHome .Item h3, .NewsHome .Item h3, .VCOImgTestoHome h3 {
			font-size:20px;
			line-height:25px;
		} 
		.Top2 .BLOBAlignCenter a img { margin-top:0;}
		.VCOImgTestoHome h3 {
			padding:40px 0 13px;
		}
	}
	.NoPadSx { padding-left:15px !important;}
	.ElencFotoDataTitolo {
		a {
			display: block;
			margin:0 auto;
			img { display:block; margin:0 auto;}
		}
	}
	.BgGreen {
	    display: block;
	    min-height:300px;
	    height: auto !important;
	}
}

@media #{$xss} {
	.NewsHome, .PuntoPSRHome, .RRNHome {
		a {
			margin:10px 0;
			display:block;
			img { 
			display:inline-block;
			float:left;
			max-width:40%;
			}
			.BoxCont, .Caption { 
			display:inline-block;
			max-width:60%;
			padding-left: 15px;
			}
		}
		.Item h3, .Caption h3 { 
			font-size:17px !important;
			line-height:20px !important;
		}
	}
}

@media #{$xxxs} {
	.ElencFotoDataTitolo {
		ol li div { width:100%;}
	}
}