/*bootstrap 3.3.2 Valleserianabike style - all righ reseved*/

/* GardaMountainbike*/
	azzurro: 		#38BAD1 	rgba(56,185,209,1)	/*sfondo*/
	azzurro scuro: 	#03869F 	rgba(3,134,159,1)	/*barra titoli*/
	arancio scuro: 	#FF7C00		rgba(255,124,0,1)	/*link A hover*/
	arancio chiaro: #FFB167		rgba(255,177,103,1)	/*link A*/
	grigio: 		#333C41 	rgba(51,60,65,1)	/*sfondo copyright - testo*/
	grigio chiaro: 	#69747A		rgba(105,116,122,1)
	
/* ValleSerianaBike*/
	verde chiaro  	#BCCC3F 	rgba(188,204,63,1)	/*sfondo*/
	verde scuro  	#929E30 	rgba(146,158,48,1)	/*barra titoli e pulsanti*/
	marrone  		#660000 	rgba(102,0,0,1)		/*testo P*/
	arancio scuro  	#FF7C00 	rgba(255,124,0,1)	/*link A hover*/
	arancio chiaro  #FFB167 	rgba(255,177,103,1)	/*link A*/
	grigio  		#333C41 	rgba(51,60,65,1)	/*testo H5, H6*/
	grigio chiaro  	#69747A 	rgba(105,116,122,1)	/*x sfondi e altro*/ 
	
/* azzurro Primary color */
	.color-primary-0 { color: #38BAD1 rgba( 56,185,209,1)}	/* azzurro OK */
	.color-primary-1 { color: #8CDDEC rgba(140,221,236,1)}
	.color-primary-2 { color: #5DCADE rgba( 93,202,222,1)}
	.color-primary-3 { color: #16A8C3 rgba( 22,168,195,1)}
	.color-primary-4 { color: #03869F rgba(  3,134,159,1)} /* azzurro scuro*/
/* arancio Complement color */
	.color-complement-0 { color: #FF9D40 rgba(255,157, 64,1)}	
	.color-complement-1 { color: #FFC996 rgba(255,201,150,1)}
	.color-complement-2 { color: #FFB167 rgba(255,177,103,1)} /*arancio Chiaro*/
	.color-complement-3 { color: #FF8918 rgba(255,137, 24,1)}
	.color-complement-4 { color: #FF7C00 rgba(255,124,0,1)} /*arancio scuro OK*/
/* Generated by Paletton.com*/
/* http://paletton.com */






/*==========================================*/


/*======= STRUTTURA ========*/

/*phones 	xs <576px 	sm ≥576px */
@media (max-width: 767px) {

}
/*tablets 	md ≥768px */
@media (min-width: 768px) {
	.container {
		width: 750px;
	}
}
/*desktop 	lg ≥992px */
@media (min-width: 992px) {
	.container {
		width: 972px;
	}
}
/*large desktop 	xl ≥1200px 	xxl ≥1400px */
@media (min-width: 1200px) {
	.container {
		width: 1180px;
	}
}


/* elimina spazio a destra barra scorrimento verticale nei dispositivi mobili https://stackoverflow.com/questions/46012482/unwanted-white-space-on-right-side-in-mobile-view */
html, body {
	overflow-x: hidden !important;

}

body {
    color: #525252;
    font-family: Verdana,sans-serif;
    font-size: 14px;
    line-height: 22px;/*spazio linee di tutte le pagine*/
	background-image: url(../images/featured/background.jpg);/*sfondo di tutte le pagine*/
}

/* container = larghezza definita */
.container {
	padding-right: 0px;/*distanza laterale destra*/
	padding-left: 0px;/*distanza laterale sinistra*/
	margin-right: auto;
	margin-left: auto;
}

/* container fluid = tutta larghezza*/
.container-fluid {
	padding-right: 0px;/*distanza laterale destra*/
	padding-left: 0px;/*distanza laterale sinistra*/
	margin-right: auto;
	margin-left: auto;
}
.row {
	margin-right: -10px;
	margin-left: -10px;
}


h1,h2,h3,h4,h5,h6 {
	font-family: sans-serif;/*'Open Sans','Oswald',sans-serif*/
	color: #38BAD1; /*colore testo*/
	font-weight: bold; /*spessore testo*/
	/*text-shadow: 0 0 1px rgba(0,0,0,0.01);/*ombra testo*/
	text-rendering: optimizelegibility;
}
h1,h2,h3,h4,h5 {
	text-transform: uppercase; /*trasforma tutto il testo in maiuscolo*/
}
/*H1 utilizzare SOLO per titolo - utilizzato per SEO*/
h1, h3 {
	font-size: 20px; /*dimensione testo*/
	color: #ffffff; /*colore testo*/
	background-color: #38BAD1; /*#38BAD1*/
	text-align:center;
	padding:10px 10px 10px 10px;/*distanza testo*/
	margin:15px -5px 15px -5px; /*distanze (-5 dx e sx per compensare le distanze padding in row)*/
	border: 0px solid;/*spessore linea di contorno*/
	border-color: #38BAD1;/*colore linea di contorno*/
}
/*H2 utilizzare SOLO per tag luoghi - utilizzato per SEO*/
h2 {
	font-size: 20px; /*dimensione testo*/
	padding:10px 5px 5px 10px;/*distanza testo*/
	margin:0px 10px 0px 0px; /*distanze*/
}
h4 {
    font-size: 16px; /*dimensione testo*/
	padding:15px 5px 5px 5px;/*distanza testo*/
	margin:0px 10px 0px 0px; /*distanze*/
}
h5 {
    font-size: 15px; /*dimensione testo*/
	padding: 5px 5px 5px 5px;/*distanza testo*/
	margin:0px 10px 0px 0px; /*distanze*/
	color: #333C41; /*colore testo*/
}
h6 {
    font-size: 17px; /*dimensione testo*/
	padding:10px 5px 5px 10px;/*distanza testo*/
	margin:0px 10px 0px 0px; /*distanze*/
	color: #333C41; /*colore testo*/
}
p {
    font-size: 17px;
	padding: 5px 5px 5px 5px;/*distanza testo*/
    line-height: 22px;/*spazio linee di tutta la pagina web*/
	color: #444444;
    font-family: verdana,sans-serif; /*verdana,sans-serif*/
	line-height: 150%;
}

/*proprità link*/
a {
	text-decoration: none;/*elimina sottolineatura a tutti i link*/
}


/*distanziatore sezioni*/
spacer {
   display: block;
   margin: 10px 0; /*distanza linee dopo un BR*/
}

h3.title {
	overflow: hidden;
	line-height:28px;
}
h3.title:after {
    background: url(../img/bg_off.png) repeat;
    content: "";
    height: 5px;
    margin-left: 10px;
    position: absolute;
    top: 12px;
    width: 99%;
}
/*------- stabilisce grandezza caratteri per phones--------*/
@media (max-width: 767px) {
	/*
	p {
		font-size: 1.1em; /*stabilisce grandezza caratteri per phones
	}*/
}

/*proprietà linea orizzontale*/
hr {
	margin: 12px 0px 12px 0px;/*-5px a destra e sinistra per coprire tutta la larghezza*/
	border: 0;
	border-top: 2px solid #38BAD1;
	border-bottom: 0px solid #dddddd;
}

/*proprietà hr2*/
.hr2 hr {
	margin-top: 10px;
	margin-bottom: 10px;
	border: 10;
	size: 1;
	border-top: 1px solid #666666;
}

/*proprietà testo giustificato*/
.justify {
    text-align: justify;
}
.left{
	text-align: left;
}
.right{
	text-align: right;
}
.center{
	display: block;
	text-align: center;
}

/*proprietà testo link informazioni (esempio istruzioni download, istruzioni mappa interattiva, ecc)*/
.info-link {
    font-size: 15px;
    color: #555555;
    text-transform: lowercase;
    font-style: italic;
    margin: 0px 0px 0px 0px;
    text-rendering: optimizelegibility;
}
.info-link a {
    color: #111111;
}

/*======= FINE STRUTTURA ========*/



/*=================== LOGO =======================*/	
/*stile logo*/
.head-logo {
	background-color: #ffffff; /*ex #38BAD1*/
	color: #333C41; /*colore testo*/
	padding: 5px 10px 0px 10px;/*distanza testo*/
	/*border-top-color: #808080;/*colore linea superiore*/ 
	/*border-top-width: 2px; /*spessore linea superiore*/
	/*border-top-style: solid;/*tipo linea superiore*/
}
.logo {
	padding: 0px 0px 10px 0px;/*distanza testo*/
	width: 100%;
	max-width: 500px;
}
.navbar-brand {
	float: left;
	height: 80px;
	padding: 15px 15px;
	font-size: 18px;
	line-height: 20px;
}


/*=================== TOP BAR (login, search, language ) =======================*/	
.top {
	padding-top: 0px;
	margin-right: 20px;
	float: right;
}
.top ul {
	margin: 0;
	padding: 0;
	z-index: 9999;
	position: relative;
}
/*---proprietà gliphicon top bar---*/
.top ul span.glyphicon {
    font-size: 0.9em;
	color: #7c8082; /*colore */
}
.top ul > li {
	display: inline;
	list-style: none;
	padding-bottom: 15px;
}
.top ul > li > a, 
.top ul > li > a:hover {
	color: #7c8082; /*colore testo top*/
	font-size: 11px;
	text-transform: uppercase;
	/*font-family: 'Open Sans', sans-serif;*/
}
.top ul li.devider { 
	top: -1px;
	padding: 0;
	font-size: 8px;
	position: relative;
	margin: 0 9px 0 5px;
	/*font-family: Tahoma;*/
	border-right: solid 1px #bbb;
}
.top ul li i.icon-globe { 
	color: #bbb;
}
/*dropdown-language top bar*/
.top ul.dropdown-language {
	top: 25px;
	left: -5px;
	display: none;
	padding: 4px 0;
	padding-left: 0; 
	list-style: none;
	min-width: 100px;
	position: absolute;
	background: #f0f0f0;
}
.top li:hover ul.dropdown-language {
	display: block;
}
.top ul.dropdown-language:after {
	top: -4px;
	width: 0; 
	height: 0;
	left: 8px;
	content: " "; 
	display: block; 
	position: absolute;
	border-bottom: 6px solid #f0f0f0;	
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-left-style: inset; /*FF fixes*/
	border-right-style: inset; /*FF fixes*/
}
.top ul.dropdown-language li a {
	color: #555;
	display: block;
	font-size: 10px;
	padding: 2px 12px;
	margin-bottom: 1px;
	text-transform: uppercase; 
	/*font-family:'Open Sans', sans-serif;*/
}
.top ul.dropdown-language li.active a i {
	color: #999;
	float: right;
	margin-top: 2px;
}
.top ul.dropdown-language li a:hover, 
.top ul.dropdown-lamguage li.active a {
	background: #fafafa;
}
.top ul.dropdown-language li a:hover {
	text-decoration: none; 
}


/*======= INIZIO MENU (da ottimizzare eliminando il superfluo o doppione) ========*/

/*NAVBAR*/

/* nuovo CSS per BS5 */
 /*proprietà generali menu*/
.navbar {
	padding: 0px 0px 0px 20px;
	margin: 0px 0px 0px 0px;
	background-color: #ffffff;
	/*font-family: Arial,Helvetica,sans-serif;*/
	font-size: 14px;
	/*font-weight: 700;*/
	text-transform: uppercase;
	border-bottom-width: 5px;
	border-bottom-color: #d5d5d5;
	border-bottom-style: solid;
 }
 

 .navbar-nav {
	margin-bottom: 2px; /*mette lo spazio tra menu e riga sotto*/
 }

 .navbar-nav > li {
	transition: 0.3s; /*transizione hover in*/
 } 
 
 /*proprietà testo menu*/ 
.navbar-nav > li > a {
	/*transition: 0.5s;*//*transizione hover out*/
	float: none;
	min-height: 32px;
	padding: 11px 17px 11px; /*distanze superiore,laterale, inferiore*/
	color: #113C41;
	text-decoration: none;
	/*text-shadow: 0 0 0 #113;*/
	/*border-top-width: 0;*/
	display: block;

 }
 /*proprietà menu quando hover e focus*/
.navbar-nav > li > a:focus,
.navbar-nav > li > a:hover {
	transition: 0.5s;
	color:#fff000;/* colore testo */
	text-decoration: none;
	/*text-shadow: 0 2px 0 #111133;/*ombra testo*/
	background-color: #38BAD1;
	/*background: -moz-linear-gradient(top, #000000, #888888);
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#525252));
	background: -webkit-linear-gradient(top, #000000, #525252);
	background: -o-linear-gradient(top, #000000, #525252);
	background: linear-gradient(to bottom, #000000, #888888);/*colore di sfondo menu*/
	/*background-repeat: repeat-x;*/
		/*effetto transizione in test*/	
		-moz-transition: background-color 1.0s ease; 
		-o-transition: background-color 1.0s ease; 
		-webkit-transition: background-color 1.0s ease-in-out; 
		transition: background-color 1.0s ease;
	/*border-bottom-color: #AAD5F0; colore linea inferiore*/
	/*border-bottom-width: 4px; spessore linea inferiore*/
	/*border-bottom-style: solid; forma linea inferiore*/
}
/*proprietà menu attivo*/
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
	color:#ffffff;/* colore testo */
	text-decoration: none;
	/*text-shadow: 0 2px 0 #111133;/*ombra testo*/
	background-color: #38BAD1;
	/*background-image: -moz-linear-gradient(top, #000000, #525252);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#525252));
	background-image: -webkit-linear-gradient(top, #000000, #525252);
	background-image: -o-linear-gradient(top, #000000, #525252);
	background-image: linear-gradient(to bottom, #000000, #525252);/*colore di sfondo menu*/
	/*background-repeat: repeat-x;*/
	/* -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
	-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
	box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);*//*ombra intorno al box*/
	/* background-image: -moz-linear-gradient(top, #24418B, #4418B);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#24418B), to(#24418B));
	background-image: -webkit-linear-gradient(top, #24418B, #14418B);
	background-image: -o-linear-gradient(top, #24418B, #14418B);
	background-image: linear-gradient(to bottom, #24418B, #444444);/*colore di sfondo menu*/
	/*background-repeat: repeat-x;*/
	/*border-bottom-color: #AAD5F0; /*android #015470;*/ /*colore linea inferiore*/
	/*border-bottom-width: 4px; /*spessore linea inferiore*/
	/*border-bottom-style: solid; /*forma linea inferiore*/
}

/*esempio variabile*/
:root {
	--bs-navbar-color1: #ffffff;
}





/*DROPDOWN*/

/* dropdown menu automatico*/ 
.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

.dropdown-menu {
	margin: 2px;
	width: 200px; /*larghezza*/
	opacity: 0.90; /*trasparenza*/
	transition: 1s; /*non funziona....*/
	background-color: #333C41; /*colore sfondo*/

	font-family: Arial,Helvetica,sans-serif;
	font-size: 14px;
	font-weight: 700;
  
	border-radius: 0;/*raggio angoli*/
	border-top-color: #ffffff; /*colore linea superiore*/
	border-top-width: 2px; /*spessore linea superiore*/
	border-top-style: solid; /*forma linea superiore*/
	border-bottom-color: #ffffff; /*colore linea inferiore*/
	border-bottom-width: 2px; /*spessore linea inferiore*/
	border-bottom-style: solid; /*forma linea inferiore*/
}

.dropdown-menu > li  {

	/*width: 200px; /*larghezza*/
 }

.dropdown-menu > li > a {
	display: block; /*evidenzia hover tutta larghezza*/
	width: 200px; /*larghezza*
	transition: 1s; /*tempo di passaggio a questo stato, cioè da hover a non hover*/
	float: none;
	min-height: 32px;
	padding: 11px;
	color: #ffffff;
	text-decoration: none;
	text-shadow: 0 0 0 #113;
	border-top-width: 0;

 }
 
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
	transition: 0.35s;/*tempo di passaggio a questo stato, cioè hover*/
	color:#fff000;/* colore testo */
	text-decoration: none;
	/*text-shadow: 0 2px 0 #111133;/*ombra testo*/
	filter:; background-image: none !important; 
	background-color: #38BAD1;
	margin: 0 0px; /*bordo laterale*/

	/*background: -moz-linear-gradient(top, #000000, #888888);
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#525252));
	background: -webkit-linear-gradient(top, #000000, #525252);
	background: -o-linear-gradient(top, #000000, #525252);
	background: linear-gradient(to bottom, #000000, #888888);/*colore di sfondo menu*/
	/*background-repeat: repeat-x;*/
		/*effetto transizione in test*/	
		-moz-transition: background-color 1.0s ease; 
		-o-transition: background-color 1.0s ease; 
		-webkit-transition: background-color 1.0s ease-in-out; 
		transition: background-color 1.0s ease;
	/*border-bottom-color: #AAD5F0; colore linea inferiore*/
	/*border-bottom-width: 4px; spessore linea inferiore*/
	/*border-bottom-style: solid; forma linea inferiore*/
}


/*NAVBAR-TOGGLE*/
/*proprietà pulsante smartphone*/
/*proprieta pulsante toggle quando cellulari*/

/*da testare....con variabili....*/
	.navbar-toggler {
		padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
		font-size: var(--bs-navbar-toggler-font-size);
		line-height: 1;
		color: var(--bs-navbar-color1);/*variabile*/
		background-color: #38BAD1;
		border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
		border-radius: var(--bs-navbar-toggler-border-radius);
		transition: var(--bs-navbar-toggler-transition);
	}


	.navbar-toggler {
		transition: 0.75s;
		position: right;
		float: right;
		padding: 10px 15px; /* distanze dal testo (quindi grandezza pulsante)*/
		margin: 0px 30px 10px 0px;
		font-weight: bold;/*testo grassetto*/
		text-transform: uppercase; /*trasforma tutto il testo in maiuscolo*/
		border: 3px solid;/*spessore linea di contorno*/
		border-color: #38BAD1;/*colore linea di contorno*/
		border-radius: 2px;/*raggio angoli*/
	}
	
	/*proprietà pulsante quando hover-attivo ecc OK*/
	.navbar-toggler :hover,
	.navbar-toggler :focus,
	.navbar-toggler :active
	{
		transition: 0.5s;
		color: #38BAD1;
		background-color: #38BAD1;
		border-color: #38BAD1;
		/*
		background-image: -moz-linear-gradient(top, #CFB223, #E7CF57);
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#CFB223), to(#E7CF57));
		background-image: -webkit-linear-gradient(top, #CFB223, #E7CF57);
		background-image: -o-linear-gradient(top, #CFB223, #E7CF57);
		background-image: linear-gradient(to bottom, #11B223, #11CF57);/*colore bottone sopra-sotto*/
	}
	.navbar-toggler .icon-bar {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 10px;
	}
	.navbar-toggler .icon-bar + .icon-bar {
	  margin-top: 4px;
	}

/*NAVBAR-COLLAPSE*/

/*deve corrispondere a quando collapse il menu, vedi html ms-auto*/
@media (max-width: 576px) {
	.navbar-collapse {
		margin-top: 20px;
	}

	/*proprietà pulsanti menu OK*/
	.navbar-collapse > ul > li > a {
		transition:0.35s linear; /*tempo di passaggio a questo stato*/
		float: none;
		padding: 10px 15px 10px;
		margin: 5px 10px 5px;
		color: #38BAD1; /*colore testo menu*/
		text-indent: 30px; /*spostamento orizzontale*/
		
		/*bordi pulsante e colori*/
		border-style: solid;
		border-width: 2px;
		border-color: #38BAD1;
		border-radius: 2px;/*raggio pulsanti*/
	}

}

/*======= FINE MENU ========*/





/*============== WOW SLIDER (slider fotografie sotto il menu) ===============*/

/*disabilita slider per cellulari*/
/*@media (max-width: 767px) {
	.slider {
		display: none;
	}
}*/

/*figcaption - testo testo fisso in sovraimpressione wowslider*/
#wowslider-container1 figcaption {
	position: absolute;
	bottom: 5%;
	left:45%;
	font-size:3.00em;
	color:white;
	background:rgba(0,0,0,0.40);
	padding:1%;
	z-index: 10;
	text-align: center;
}

/*disabilita il titolo, il testo e i pallini sotto per smartphones (ws-title=titolo, ws-title-div ws-title-span=testo)*/
@media (max-width: 767px) {
	#wowslider-container1 .ws-title,
	#wowslider-container1 .ws-title div,
	#wowslider-container1 .ws-title span {
		display: none;
	}
	/*disabilita i pallini sotto (ws-bullet e ws-bullet-div)*/
	#wowslider-container1  .ws_bullets,
	#wowslider-container1  .ws_bullets div{
		display: none;
	}
	/*disabilita le frecce laterali (ws-next e ws-prev)*/
	#wowslider-container1 a.ws_next,
	#wowslider-container1 a.ws_prev,
	#wowslider-container1 a.ws_next:hover,
	#wowslider-container1 a.ws_prev:hover {
		display: none;
	} 
}

/*=================== COUNTER  proprietà contatore homepage =======================*/	
/*proprietà testo giustificato*/
.counters {
	background-color: #38BAD1;
	color: #ffffff;
	padding: 20px;
}
.counters h2{
	color: #ffffff;
	font-size: 30px
}
.counters h3{
	color: #ffffff;
	font-size: 18px
}

/*=================== SIDE-DESCRIPTION - colonna descrizione dettagliata percorso =======================*/	
/*proprietà testo giustificato*/
.side-description {
    text-align: justify;
	border-right: 2px solid #38BAD1;/*linea verticale divisoria*/
}
	
/*=================== SIDEBAR - colonna con indicazioni fotografiche =======================*/	
/*nasconde sidebar per smartphone*/
@media (max-width: 767px) {
	.sidebar {
		display: none; 
	}
	/*nasconde linea verticale quando non c'è la sidebar(per smartphone)*/
	.side-description {
	border-right: none;/*linea verticale divisoria*/
	}
}
/*prorpietà generali sidebar*/
.sidebar {
	padding: 10px;
	margin: 0px;
	/*border-left: 2px solid #38BAD1;*//*linea verticale divisoria*/
	min-height: 100%;
	background-color: none;
}
 /*prorpietà testo*/
.sidebar h1{
	color: #123456;
	vertical-align: middle;
}

/*=================== HIMAGE e HCAPTION - per foto con effetto quando hover =======================*/
/*---himage -> proprietà immagine ---*/
.himage {
    position: relative;
	text-align: center;/*centra hcaption orizzontalmente*/
	overflow: hidden;/*evita la fuoriuscita dell'immagine dalla dimensione originale quanzo zoomma*/
}
/*effetto transizione*/
.himage img {
		-webkit-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
/*effetto immagine quando hover (copiare effetti desiderati da originale)*/
.himage:hover img {
	filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
	filter: grayscale(1) blur(3px);
		-webkit-filter: grayscale(1) blur(3px);
	opacity: 0.6;/*invisibile quando non hover*/
	filter: alpha(opacity=60);/*invisibile quando non hover*/
		-webkit-transform: scale(1.0);
		-ms-transform: scale(1.0);
	transform: scale(1.0);
}

/*---hcaption -> immagine in overlay che appare sopra l'immagine himage ---*/
/*proprietà immagine messa sopra l'immagine himage (inserisce un overlay colorato + lente di zoom sulle PIC)*/
.hcaption {
	color: #fff;/*colore hcaption*/
	padding: 40px 40px;/*dimensione finestra per la label*/
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -40px 0px 0px -40px;/*centraggio label (medesimo valore di padding*/
	background: url('../images/featured/zoom.png') center center no-repeat;/*immagine che appare*/
	/*effetto quando non hover (copiare effetti desiderati da originale)*/
	opacity: 0;/*invisibile quando non hover*/
	filter: alpha(opacity=0);/*invisibile quando non hover*/
		-webkit-transform: scale(0.7);
		-ms-transform: scale(0.7);
	transform: scale(0.7);
		-webkit-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
/*per testi e gliphicon (inserisce un overlay colorato)*/
.hcaption2 {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
	opacity: 0;/*invisibile quando non hover*/
	filter: alpha(opacity=0);/*invisibile quando non hover*/
	color: #fff;/*colore hcaption2*/
	/*effetto quando non hover (copiare effetti desiderati da originale)*/
		-webkit-transform: scale(0.7);
		-ms-transform: scale(0.7);
	transform: scale(0.7);
		-webkit-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
/* x overlay video - proprietà immagine messa sopra l'immagine himage (inserisce un overlay colorato + logo youtube)*/
.hcaption3 {
	color: #fff;/*colore hcaption*/
	padding: 35px 50px;/*dimensione finestra per la label*/
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -35px 0px 0px -50px;/*centraggio label (medesimo valore di padding)*/
	background: url('../images/featured/youtube.png') center center no-repeat;/*immagine che appare*/
	
	/*effetto quando non hover (copiare effetti desiderati da originale)*/
	opacity: 1;/*invisibile quando non hover*/
	filter: alpha(opacity=100);/*invisibile quando non hover*/
		-webkit-transform: scale(0.8);
		-ms-transform: scale(0.8);
	transform: scale(0.8);
		-webkit-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
/*decide cosa deve fare hcaption quando himage è hover*/
.himage:hover > .hcaption,
.himage:hover > .hcaption2, 
.himage:hover > .hcaption3 {
	/*effetto quando hover (copiare effetti desiderati da originale)*/    
	opacity: 1;/*hcaption visibile quando himage è hover*/
	filter: alpha(opacity=100);/*hcaption visibile quando himage è hover*/
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
	transform: scale(1);
}
 
/*=================== INFO - proprietà paragrafo info =======================*/	
/*proprietà testo giustificato*/
.info {
    text-align: justify;
}


  
/*=================== JUMBOTRON =======================*/	
/*jumbotron-frame-out serve per creare la cornice*/
.container .jumbotron-frame-out {
	border: 5px solid;/*spessore linea cornice*/
	margin: 15px 0px 15px 0px; /*distanze*/
	padding: 5px;/*distanza cornicie esterna-interna*/
	border-color: #38BAD1; /*colore linea cornice*/
	border-radius: 2px;
	-webkit-border-radius: 0 0 2px 2px;
		-moz-border-radius: 0 0 2px 2px;
	border-radius: 2px 2px 2px 2px;
}
.container-fluid .jumbotron,
.container .jumbotron,
.jumbotron {
	background-color: #38BAD1; /* #eeeeee; #38BAD1*//*colore sfondo*/
	font-size: 20px;
	color: #ffffff; /*#333C41;colore testo*/
	padding: 10px;/*distanze interne*/
	margin: 5px 0px 15px 0px; /*distanze esterne*/
	border: 0px solid;/*spessore linea di contorno*/
	border-color: #aaaaaa;
	border-radius: 0px;
		-webkit-border-radius: 0 0 0px 0px;
		-moz-border-radius: 0 0 0px 0px;
	border-radius: 0 0 0px 0px;
}
.container .jumbotron-frame-in {
	margin: 0px;/*azzera lo spazio con la cornice*/
}
/*prorpietà titolo jumbotron*/
.jumbotron h1{
	font-size: 26px;
	line-height: 30px; /* distanza tra le righe*/
	/*font-family: "Open Sans",Helvetica,Arial,sans-serif;
   	color: #333C41;
	text-shadow: 0 0 5px rgba(0,0,0,0.01);
	margin-top: -0px;/*elimina spazio sopra*//*
	padding: 0px 10px 0px 20px;*/
}
/*proprietà testo jumbotron*/
.jumbotron p{
	/*font-family: "Open Sans",Helvetica,Arial,sans-serif;*/
    font-size: 20px;
	line-height: 30px; /* distanza tra le righe*/
	margin-top: 8px;/*aggiunge spazio sopra*/
	margin-bottom: 5px;/*aggiunge spazio sotto*/
	color: #ffffff; /*#333C41;colore testo*/
}

/*=================== DATA (dati percorso) =======================*/
/*=================== DOWNLOAD (area download percorso) =======================*/
/*eliminato in test
.data {
    padding-top: 25px;
}
*/
.data p, .download p, .news p, .events p{
	/*font-family: 'Open Sans'; /*,'Oswald',sans-serif*/
	font-size: 12px; /*dimensione testo*/
	color: #69747A; /*colore testo*/
	font-weight: bold; /*spessore testo*/
	text-transform: uppercase; /*trasforma tutto il testo in maiuscolo*/
	margin: 5px 0px 15px 0px; /*distanze*/
	text-shadow: 0 0 1px rgba(0,0,0,0.01);/*ombra testo*/
	text-rendering: optimizelegibility;	
}
/*data H3-utilizzato per luogo partenza-arrivo elenco percorsi e ciclabili)*/
.data h3, .download h3{
	font-size: 14px; /*dimensione testo*/
	color: #69747A; /*colore testo*/
	margin: 0px 0px 10px 10px; /*distanze*/
	text-rendering: optimizelegibility;
}	
.data h4, .download h4{
	font-size: 16px; /*dimensione testo*/
	color: #38BAD1; /*colore testo*/
	margin: 0px 0px 15px 10px; /*distanze*/
	text-rendering: optimizelegibility;
}
.data h5, .download h5{
	font-size: 14px; /*dimensione testo*/
	color: #38BAD1; /*colore testo*/
	margin: 0px 0px 5px 10px; /*distanze*/
	text-rendering: optimizelegibility;
}
.data h6, .download h6{
	font-size: 15px; /*dimensione testo*/
	color: #ffffff; /*colore testo*/
	text-transform: lowercase; /*trasforma tutto il testo in maiuscolo*/
	font-style: italic;
	margin: 0px 0px 0px 0px; /*distanze*/
	text-rendering: optimizelegibility;
}
.data i{
	color: #69747A; /*colore icone gliphicon*/
}


/*=================== WELL (cornice utilizzata per area DOWNLOAD e area DATI percorso) =======================*/	
.well {
	background-image:none; /*azzera background well boostrap-theme*/
	min-height: 20px;
	padding: 15px;
	margin: 10px 0px 0px 0px;
	background-color: #69747A; /*333C41; /*#eee*/
	border: 0px solid #38BAD1;
	border-left: 0px solid #38BAD1;
	border-right: 0px solid #38BAD1;
	border-radius: 2px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well i{
	color: #fff; /*colore icone gliphicon*/
}
.well a{
	color: #fff; /*colore testo link*/
}
.well h6,.well p{
	color: #ffffff; /*#333C41;colore testo quando well*/
}

/*=================== WELL2 (cornice utilizzata per area EBIKE e GALLERY da fare) =======================*/	
.well2 {
	background-color: #38BAD1
}
.ebike {
	background-color: none;/*#38BAD1*/
}

/*=================== MODAL (proprietà finestra modal area download)=======================*/	
.modal-content a, .modal-content i{
	color: #333333;
}
	

/*=================== BLOCKQUOTE (testo per note)=======================*/	
blockquote {
    border: 1px solid #ddd;
    page-break-inside: avoid;
}
blockquote {
	padding: 10px 10px;
	margin: 0 0 0px 10px;
	border-left: 6px solid #38BAD1;
	background: #f5f5f5;
}
/*proprietà testo blockquote*/
blockquote p{
	font-size: 15px;
	font-style: italic;
	color: #333333;
}

/*=================== IMG (proprietà immagini) =======================*/	
.img {
	margin: 5px, 0px, 15px, 0px;
}

/* non in uso con BS5 */
/* .img-responsive { */
	/* margin: 5px, 0px, 15px, 0px; */
/* } */

.img-rounded {
	border-radius: 2px;/*raggio angoli*/
}

/*=================== SPACER =======================*/	
/*crea distanze sopra e sotto*/
.spacer {
    margin:25px 0px 25px 0px; /*distanze*/
}



/*=================== CARD =======================*/
/*ex thumbnail, scheda percorsi e ciclabili*/
.card {
	border: 1px solid #38BAD1; /* colore e dimensione del bordo card*/
	margin: 15px;
	/*width: 19rem;*/
	word-wrap: normal; /* decide se tagliare le scritte a capo o no break-word -> le taglia, normal -> le lascia intere */
	max-width: 1200px;
}

/* card-list = card in elenco percorsi e elenco ciclabili */
.card-list {
	margin: 0px; /* inserito 0px e aggiunto un <br> in html perchè con il filtro le card andavano sopra il footer*/
}
/*proprietà card quando hover*/
.card-list:hover,
.card-list:focus,
.card-list.active {
	box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75); /*ombra quando hover*/
		-webkit-box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.75);
	transition: box-shadow .5s;	/*tempo transizione ombra*/
		-webkit-transition: box-shadow .3s;
		-moz-transition: box-shadow .3s;
		-ms-transition: box-shadow .3s;
		-o-transition: box-shadow .3s;
}


/*card2 - per foto testo percorsi*/
.card2{
	max-width: 768px;
	padding: 5px;
	margin: auto;/*centra la card*/
}

/*riduce larghezza massima per smartphone */
/*phones 	xs 576px 	sm ≥576px */
@media (max-width: 767px) {
	/*riduce larghezza massima per smartphone */
	.card {
		/*width: 90%;*/
	}

	 /*card2 = testo foto descrizione percorsi -> fitta le foto alla max larghezza per smartphone */
	.card2 {
		/*width: 100%;*/
		/*margin-left: -2px;*/
		/*margin-right: -4px;*/
	}
  
}

.card-title {
	text-align: center;
	margin-bottom: 0rem;
}

/* proprietà dati card (simbolo e testo icone lunghezza-dislivello-difficoltà)*/
.card-data {
	color: #69747A;
	font-size: 14px;
	text-align: center;
	padding-top: 10px;
	/*background-color: #f5f5f5;*/
	margin-right: 15px;
}
.card-data p {
	font-size: 12px;
	color: #69747A;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0px 0px 5px 0px;
	padding: 0px;
	text-shadow: 0 0 1px rgba(0,0,0,0.01);
	text-rendering: optimizelegibility;
}

/* proprietà testo card*/
.card-text {
	margin-bottom: 3px;
}
/* .card-img-overlay p -> teto didascalia foto descrizione + foto indicazioni sidebar*/
.card-img-overlay p {
	color: #ffffff !important;
	font-size: 1.1em;
	background-color: rgba(0, 0, 0, 0.3);
	margin-bottom: -10px;
	margin-left: -10px;
	text-transform: uppercase;
}


/* CSS PER FITTARE LE FOTO DENTRO LA CARD SENZA BORDI */
.fit-image{
	width: 100%;
	object-fit: cover;
	height: 300px !important;  /*only if you want fixed height */
}

/*elimina lo spazio tra contenuto e contenitore - per foto thumbnail*/	
.card-image {
	padding-right: 10px !important;
	/* padding-top: 0px !important; */
	/* padding-bottom: 0px !important; */
	padding-left: 10px !important;

	}

    /* .padding-zero { */
        /* padding-right: 10px !important; */
		/* padding-top: 0px !important; */
		/* padding-bottom: 0px !important; */
		/* padding-left: 10px !important; */

        /* } */
		
		
/* /*aggiunge lo spazio tra contenuto e contenitore - per testo thumbnail*/		 */
	/* .padding-15 { */
        /* padding-right: 15px !important; */
		/* padding-top: 15px !important; */
		/* padding-bottom: 15px !important; */
		/* padding-left: 15px !important; */

        /* } */
		
/* allinea il contenuto al centro pagina (per card elenco percorsi)  - (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container) */
.center-box {
	/*display: flex;*/ /*disabilitato perchè riduce larghezza quando il testo è corto*/
	justify-content: center;
}

/*colore badge bg-green */
.bg-green {
	background-color: #38BAD1; !important;
}




/*=================== IMAGE-ROTATE (effetto rotazione+zoom immagine) NON IN USO =======================*/
/*------image-rotate - effetto rotazione+zoom immagine------*/
.image-rotate img {
	left: 0px;
	margin-left: 0px;
	position: relative;
		-webkit-transition: all 0.5s ease-in-out;/*tempo di rotazione*/
		-moz-transition: all 0.5s ease-in-out;
			-o-transition: all 0.5s ease-in-out;
			-ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.image-rotate:hover img {
		-webkit-transform: scale(1.3) rotate(10deg);/* scala e angolo di rotazione*/
		-moz-transform: scale(1.3) rotate(10deg);
		-o-transform: scale(1.3) rotate(10deg);
		-ms-transform: scale(1.3) rotate(10deg);
	transform: scale(1.3) rotate(10deg);
}
/*------overflow-hidden - da aggiungere se si vuole evitare la fuoriuscita dell'immagine dal quadro immagine originale------*/
.overflow-hidden {
    position: relative;
	text-align: center;/*centra orizzontalmente*/
	overflow: hidden;/*evita la fuoriuscita dell'immagine dalla dimensione originale quanzo zoomma*/
}
 
 
 
 
/*=================== BTN - BOTTONI (sistemato con bottoni standard bootstrap) =======================*/	
/*---cambia lo stile a tutti i bottoni---*/
.btn {
	font-family: sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	border: 3px solid;/*spessore linea di contorno*/
	border-color: #38BAD1;/*colore linea di contorno*/
	border-radius: 3px 3px 3px 3px;/*raggio angoli*/
	transition: 0.5s;
	-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
	transition: all 0.5s;
}
/* proprietà testo BTN con nuovo bottone boostrap 5 */
.btn a {
  color: #ffffff;
  text-decoration: none;
}
.btn i.fa{
	padding-left: 5px;/*sposta leggermente piu a destra FA*/
	font-size: 17px;/*ingrandisce leggemrente*/
}
.btn-xl {
	padding: 15px 30px;
}
/*proprietà FA con btn-xl*/
.btn-xl i.fa{
	padding-left: 15px;/*sposta leggermente piu a destra FA nel caso di btn-xl*/
	font-size: 20px;/*ingrandisce leggemrente*/
}
.btn-default {
	color: #ffffff;
	background-color: #38BAD1;
	border-color: #38BAD1;
/*	padding: 6px;*/
	margin: 2px;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
	color: #38BAD1;
	background-color: #ffffff;
	border-color: #38BAD1;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
	background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
	background-color: white;
	border-color: white;
}
.btn-default .badge {
	color: white;
	background-color: #222222;
}
/*btn-primay - bottone bianco per sfondi colorati*/
.btn-primary {
	color: #ffffff;
	background-color: #38BAD1;
	border-color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	color: #38BAD1;
	background-color: #ffffff;
	border-color: #ffffff;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
	background-color: #F05F40;
	border-color: #F05F40;
}
.btn-primary .badge {
	color: #F05F40;
	background-color: white;
}
/*BTN-RIGHT (proprietà bottone nella pagina elenco percorsi)*/
.btn-right{
	text-align: right;
	margin-right: 15px;
}


/*=================== SCROLL TO TOP (pulsante per salite all'inizio pagina) =======================*/

/*nasconte scrolltptop*/
.scrollToTop {
  visibility: hidden;
}
/*visualizza scrolltotop*/
@media (min-width: 576px) {

	.scrollToTop{
		visibility: visible;
		width:85px; /*deve essere + largo dell'immagine*/
		height:85px;
		padding:0px; 
		position:fixed;
		bottom:50px;
		right:15px;
		display:none;
		opacity: 0.7;
		filter: alpha(opacity=40); /* For IE8 and earlier */
		background: url('../images/featured/top.png') no-repeat 0px 0px; /*immagine*/
		z-index: 10; /*posizione sopra tutti gli altri elementi*/
	}
	.scrollToTop:hover{
		text-decoration:none;
		opacity: 1.0;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}	

}
/*=================== FA font awesome =======================*/
/* posiziona le gliphicon centrandole verticalmente con il testo a fianco*/
/* .fa{ */
/* vertical-align: middle; */
/* } */

/*============== SHARE BUTTON per social da https://simplesharingbuttons.com/ ===============*/
.share-buttons{
	margin: 5px 0px 5px 0px;
	float: right !important;
	margin-right: 20px;
	/*float: right;/*posiziona i pulsanti share a destra*/
}
ul.share-buttons{
	list-style: none;
	padding: 0;
}
ul.share-buttons li{
	margin: 0px 0px 0px 10px;/*distanza tra i pulsanti*/
	display: inline;
}
ul.share-buttons img{
	width: 32px;
	height: 32px;
}
ul.share-buttons img:hover{
  	opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}
.share-buttons h4{
	padding:0px 0px 0px 0px;/*distanza testo*/
	margin:0px 0px 0px 0px; /*distanze*/
}
.pull-right {
	float: right !important;
	margin-right: 20px;
}

/*============== CONTACTS modulo contatti ===============*/
 /*proprietà input e text area modulo contatti*/
input, input[type="text"], textarea {
    border-radius: 0px;
    /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	margin-bottom: 10px;
}
/*proprietà bottone invia modulo contatti quando disabilitato*/
form .btn[disabled] {
    color: #FFF;
    background-color: #aaa;
    opacity: 0.55;
    border-radius: 0px;
    border-color: #999;
}

/*============== COLLABORATIONS - PUBBLICATIONS ===============*/
.collaborations, .publications
{
	/*background-color: #f1f1f1;*/
}
.collaborations h6, .publications h6
{
	/*font-family: Arial; */
	font-size: 10pt;
	text-transform: uppercase;
	color: #333333;
	padding: 5px;
	margin: 0px 0px 0px 0px;
	font-weight: bold;
}
.collaborations p, .publications p
{
	/*font-family: Arial; */
	font-size: 10pt;
	text-transform: none;
	color: #333333;
	padding: 5px;
}

/*===========================================*/
/*===============  PERCORSI  ================*/
/*===========================================*/

/*============== TITLE (titolo percorsi) ===============*/
/*stile descrizione breve percorsi*/
.title h2 {
    font-weight: normal; /*spessore testo*/
	line-height: 140%; /*distanza tra le righe*/
	font-size: 18px;
    color: #333333;
    /*font-family: 'Oswald',sans-serif;*/
    /*text-transform: none; /*trasforma tutto il testo in minuscolo*/
}
.title p {
	text-align: justify;
	color: #333333;
}
.tag h2{
	font-size: 14px;
	text-transform: uppercase; /*trasforma tutto il testo in maiuscolo*/
	color: #333C41;
}

/*============== IMAGE-WRAPPER (foto con testo sopraimpresso) ===============*/
/*nasconde image-wrapper per smartphone*/
@media (max-width: 767px) {
	.image-wrapper {
		display: none; 
	}
}

.image-wrapper {
    position: relative;
}
.image-wrapper h1 {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 20px;
    /*border: 1px solid #FFF;*/
    /*width: 218px;*/
    color: #FFF;
    margin: 5px;
	font-size: 30px;
	opacity: 0.8;
}
.image-wrapper p {
    position: absolute;
    right: -5px; /*distanza DX sfondo-immagine*/
    bottom: 10px; /*distanza INF sfondo-immagine*/
   	text-align:right;
	padding:3px 15px 3px 30px;/*distanza testo-sfondo*/
	margin:100px 30px 10px 30px; /*distanze*/
    /*border: 1px solid #FFF;*/
    /*width: 218px;*/
    color: #FFF;
    margin: 5px;
	font-size: 16px;
	opacity: 0.8;
	width: 90%;
	max-width: 600px;/* massima larghezza sfondo*/
	font-style: italic;
	/*background-color: #333C41; /*da lasciare, per browser che non supportano linear-gradient*/
	background-image:  -webkit-linear-gradient(left, rgba(51,60,65,  0),  rgba(51,60,65, 1)), url(way.jpg); 
	background-image:     -moz-linear-gradient(left, rgba(51,60,65,  0),  rgba(51,60,65, 1)), url(way.jpg);
	background-image:      -ms-linear-gradient(left, rgba(51,60,65,  0),  rgba(51,60,65, 1)), url(way.jpg);
	background-image:       -o-linear-gradient(left, rgba(51,60,65,  0),  rgba(51,60,65, 1)), url(way.jpg);
	background-image:          linear-gradient(left, rgba(51,60,65,  0),  rgba(51,60,65,, 1)), url(way.jpg);	
}

/*============== TABLE-DATI (tabella dati percorso) ===============*/
/*------ table-dati (in uso)------*/
.table-dati {
	width: 100%;
	max-width: 100%;
	margin-bottom: 0px;
	padding: 2px; /* distanza tra le righe tabella*/
}
/*prorpietà testo sinistro*/
.table-dati h5{
	font-size: 14px;
	width: 100%;
	max-width: 100%;
	padding: 0px;
	margin: 0px;
	margin-left: 30px;
}
/*prorpietà testo destro*/
.table-dati h6{
	font-size: 14px;
	color: #ffffff;
	width: 100%;
	max-width: 100%;
	margin: 0px;
	text-transform: none;
	font-style: normal;
}
/*proprietà table-dati (tabella dove sono inseriti i dati percorso)*/
.table-dati > thead > tr > th,
.table-dati > tbody > tr > th,
.table-dati > tfoot > tr > th,
.table-dati > thead > tr > td,
.table-dati > tbody > tr > td,
.table-dati > tfoot > tr > td {
	padding: 1px;/*altezza righe*/
	line-height: 0.8;
	vertical-align: middle;	
	border-top: 1px solid #ddd;/*spessore e colore linee divisorie*/
}

/*============== PROPRIETA' NAV-PILLS NAV-LINK e LIST ===============*/
/* prorietà menu descrizione-mappa-foto  presente nei percorsi con cellulari*/

.nav-pills {
    background-color: #69747A; /*#dddddd*/
	border-bottom: 1px solid #bbbbbb; /*linea sotto*/
}

/* list -> lista presente in elenco percorsi, percorsi, images e map */
.list {
	padding-top: 10px;/*--mette lievemente sotto il menu affix quando top*/
	background-color: #69747A;
	/*display: flex;
	justify-content: center;*/
}
/*List2 -> personalizzazione lista percorsi - nasconde il menu nav-pill sopra i 768px */
@media (min-width: 768px) {
	.list2 {
		display: none; 
	}
}
/* list3 -> lista presente nelle schede percorsi map e images */
.list3 {
	padding-top: 0px;
}
/*proprietà testo (.nav-pills > li > a:focus = rende bianco dopo la selezione e si torna indietro)*/
.nav-pills > li > a, .nav-pills > li > a:focus {
	color: #ffffff;/*colore testo*/
	text-transform: uppercase; /*trasforma tutto il testo in maiuscolo*/
	font-weight: bold;
	font-size: 12px;
}
/*proprità selezione active*/
/*.nav-pills > li .active{
	border-bottom: 3px solid #38BAD1; /*linea sotto active*/
/*	color: #38BAD1; /*colore testo*//*
}*/
/*proprità selezione hover*/
.nav-pills > li > a:hover {
	/*border-bottom: 3px solid #38BAD1; /*linea sotto active*/
	color: #38BAD1 !important; /*colore testo*/
	background-color: #69747A !important;
}
/*proprità selezione active*/
.nav-pills .nav-link.active {
	border-bottom: 3px solid #38BAD1; /*linea sotto active*/
	color: #38BAD1; /*colore testo*/
	background-color: #69747A !important;
}

/*============== GALLERY e MAPS ===============*/
/*nasconde GALLERY e MAPS per smartphone*/
@media (max-width: 767px) {
	.gallery, .maps {
		display: none; 
	}
}

/*============== LEAFLET MAP ===============*/
/* MAPS=mappa leaflet presente nel percorso, MAP= mappa per cellulari map.html */
/* proprieta testo dentro la mappa (elevation, selezione traccia, ecc)*/
/*una volta modificato tutto il sito a bootstrap 5, inserire questa modifica nel file leaflet-style*/
.leaflet-container {
	font-size: 9px !important;
	font-size: 0.9rem !important;
}	
/* sposta la barra zoom a sinistra leggermente piu in basso sotto il bottone back - solo in pagina map.html */
.map .leaflet-control-zoom {
	margin-top: 70px !important;
}
/* posizione pulsante back fixed-top map.html e images.html */
.top2 {
	top: 5px;
	left: 5px;
	width: 150px;/* larghezza area per nonandare a coprire i checkbox a destra del pannello leaflet sat e traccia*/
}



/*============== CAROUSEL GALLERY foto gallery ===============*/
/*prorpietà area gallery percorsi*/
.gallery {
	padding: 5px 15px 15px 15px;
	background-color: #38BAD1; /*333C41; /*#eee*/
}

.gallery h4, .gallery h5, .gallery p{
	color: #ffffff; /*#333C41;colore testo*/
	padding:15px 5px 15px 5px;/*distanza testo*/
}


/*============== IMAGES personalizzazione pagina IMAGES ===============*/
/* elimina gli spazi tra le colonne delle thumbnail*/
.images .row, .images .col-xs-4, .images .col-xs-3, .images .col-xs-12 {
    padding-right: 0px;
	padding-left: 0px;
	margin-right: 0px;
	margin-left: 0px;
	background-color: #333C41;/*colore sfondo pagina*/
}
.carousel-inner {
	margin-top: 20px;/*centra l'immagine grande con le thumbnail*/
}
/* rende carousel a tutta larghezza*/
.images .carousel-inner>.item>img, .images .carousel-inner>.item>a>img {
    width: 100%;
	margin:5px;/*distanza immagini*/
}


/*============== BADGE (proprietà badge nella pagina elenco percorsi)===============*/
.badge {
	padding: 5px 7px;
	margin-right: 10px;
    text-transform: uppercase; /*trasforma tutto il testo in maiuscolo*/
	vertical-align: middle;
	border-radius: 5px;
}

/*============== LIGHTBOX (personalizzazione lightbox) ===============*/
.lb-nav a.lb-next {
	opacity: 0.4 !important;/*opacità freccia next*/
}
.lb-nav a.lb-prev {
    opacity: 0.4 !important;/*opacità freccia prev*/
}
.lb-nav a.lb-next:hover {
	opacity: 1 !important;/*opacità freccia next quando hover*/
}
.lb-nav a.lb-prev:hover {
	opacity: 1 !important;/*opacità freccia prec quando hover*/
}

/*============== PERSONALIZZAZIONE VIDEO ===============*/
.video img{
	width: 95%;/*larghezza immagine*/
	max-width: 800px;/*massima larghezza immagine*/

}

/*=================== STARTMAP - proprietà paragrafo come raggiungere il punto di partenza =======================*/	
/*proprietà testo giustificato*/
.startmap {
    text-align: justify;
}
/* IMMAGINE STARTMAP CROPPATA (rimane sempre alta 400px e centrata) */
.center-cropped {
  width: 100%;
  height: 400px;
  overflow:hidden;
}
.center-cropped img {
  height: 100%;
  min-width: 100%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}


/*=================== EVENTS (sezione eventi messo sopra footer) =======================*/
.events {
	/*margin-bottom: -40px;*/ /*elimina spazio tra events e footer SOLO SE METTI FOTO IN MEZZO*/
}

/*========== FOOTER ===========*/
footer {
	color: #ffffff;
	margin-top: 0px;/*messo a 0 perchè inserito immagine sopra il footer*/
	padding: 20px 0px 30px;
	padding-right: 15px;
	padding-left: 15px;
	/*background: #585f69;
	background-image: url("../images/footer4.jpg");
	background-repeat: repeat;*/
	/*sfumatura sfondo*/
	background: #38BAD1; /*da lasciare, per browser che non supportano linear-gradient*/
	/*linear gradient (non in uso)*//*
	background:  -webkit-linear-gradient(top, rgba(56,185,209,  1),  rgba(3,134,159, 1)), url(way.jpg); 
	background:     -moz-linear-gradient(top, rgba(56,185,209,  1),  rgba(3,134,159, 1)), url(way.jpg);
	background:      -ms-linear-gradient(top, rgba(56,185,209,  1),  rgba(3,134,159, 1)), url(way.jpg);
	background:       -o-linear-gradient(top, rgba(56,185,209,  1),  rgba(3,134,159, 1)), url(way.jpg);
	background:          linear-gradient(top, rgba(56,185,209,  1),  rgba(3,134,159, 1)), url(way.jpg); /*android #4E667A, #374858*/ /*colore di sfondo footer*/
	/*background-repeat: repeat-x;*/
}
footer .headline {
	display: block;
	margin: 10px 0 25px 0;
	border-bottom: 2px solid #e4e9f0;/*linea sotto su tutta la lunghezza*/
}
footer h1, footer h2, footer h3, footer h4, footer h5 {
  color: #eeeeee;
  background: none;
  text-shadow: none;
}
footer p {
	color: #ffffff;
	line-height: 1.6; 
	font-size: 15px;
} 
footer a {
	color: #FF7C00;
}
footer a:hover {
	color: #FFB167;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

/*===== proprietà social-icons footer =====*/
.social-icons { 
	margin: 0px; 
	padding: 0px; 
}
.social-icons li { 
	float: left; 
	display: inline; 
	list-style: none outside none; 
	margin-right: 10px; /*distanza tra le icone*/
	margin-bottom: 5px; 
	/*text-indent: -9999px;*/ /*disabilitato*/
}
.social-icons li a, a.social-icon { 
	width: 35px; /*dimensione icona (deve corrispondere con la larghezza dell'immagine)*/
	height: 35px; /*dimensione icona (deve corrispondere con l'altezza della parte di immagine da visualizzare)*/
	display: block; 
	background-position: 0px 0px; 
	background-repeat: no-repeat; 
	transition: all 0.3s ease-in-out 0s; 
}
.social-icons li:hover a { 
	background-position: 0px -47px; /*movimento verticale quando hover*/
}
/*posizione delle icone da utilizzare*/
.social_facebook { 
	background: url('../images/footer/facebook.png') no-repeat scroll 0% 0% transparent; 
}
.social_instagram { 
	background: url('../images/footer/instagram.png') no-repeat scroll 0% 0% transparent; 
}
.social_googleplus { 
	background: url('../images/footer/googleplus.png') no-repeat scroll 0% 0% transparent; 
}
.social_linkedin { 
	background: url('../images/footer/linkedin.png') no-repeat scroll 0% 0% transparent; 
}
.social_pintrest { 
	background: url('../images/footer/pintrest.png') no-repeat scroll 0% 0% transparent; 
}
.social_rss { 
	background: url('../images/footer/rss.png') no-repeat scroll 0% 0% transparent; 
}
.social_twitter { 
	background: url('../images/footer/twitter.png') no-repeat scroll 0% 0% transparent; 
}
.social_vimeo { 
	background: url('../images/footer/vimeo.png') no-repeat scroll 0% 0% transparent; 
}
.social_youtube { 
	background: url('../images/footer/youtube.png') no-repeat scroll 0% 0% transparent; 
}
/*===============================*/

/*====== proprietà Copyright ======*/
.copyright {
	font-size: 12px;
	padding: 11px 0 7px;
	background: #333C41; /*colore sfondo footer-copyright*/
	border-top: solid 1px #777;	
	padding-right: 15px;
	padding-left: 15px;
}

.copyright p {
	color: #eeeeee;
	font-size: 13px;
}
.copyright a {
	margin: 0 5px;
	color: #FF7C00;
}
.copyright a:hover {
	color: #FFB167;
	text-decoration: none;/*elimina sottolineature quando hover*/
}
/*===============================*/


/*============== PERSONALIZZAZIONE COMMENTBOX(area commenti lettori) ===============*/
/*generale*/
#HCB_comment_box {
    background: #ffffff;
	border: 1px solid #38BAD1;
	margin: 15px 0px 15px 0px;
	padding: 8px;
	font-family: Verdana,sans-serif;
	font-size: 14px;
	border-radius: none;
}
/*formato titolo*/
#HCB_comment_box h3{
    font-size:18px; /*dimensione testo*/
	color:#38BAD1; /*colore testo*/
	background-color:transparent;
	text-align:center;
	padding:10px 5px 5px 5px;/*distanza testo*/
	margin:0px 10px 0px 0px; /*distanze*/
	text-shadow:0 0 1px rgba(0,0,0,0.01);/*ombra testo*/
	line-height:22px; 
	border:none;/*spessore linea di contorno*/
	border-color:transparent;/*colore linea di contorno*/
}
/*testo commento fatto*/
#HCB_comment_box blockquote {
    padding: 8px 20px;
    margin: 0px !important;
    border-left: 3px solid #38BAD1;
    background: #fcfcfc;
	font-family: Verdana,sans-serif;
	font-size: 14px;
	color: #222222;

}
#HCB_comment_box .hcb-comment-tb {
    margin-bottom: 5px !important;
}
/*bottoni html comment box*/
#HCB_comment_box .btn {
	  visibility: hidden; /*nasconde bottoni html comment box (per nascondere bottone add image)*/
}
/*proprietà bottone invia*/
#HCB_comment_box input.btn {
	/*reset proprietà default*/
	font-family: none;
	line-height: 18px; /*altezza*/
	font-size: none;/*testo*/
	text-shadow: none;
	border: none;
    border-top-color: none;
    border-right-color: none;
    border-bottom-color: none;
    border-left-color: none;
	background-image: none;
	visibility: visible; /*rende visibile bottone invia*/
	/*proprietà tasto submit*/
	font-family: Verdana,sans-serif;
	border-radius: 300px;
	font-weight: 700;/*testo*/
	text-transform: uppercase;
	color: #ffffff;/*testo*/
	background-color: #38BAD1;
	border-color: white;
	padding: 8px 22px;
	margin: 2px;
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
  }
 /*bottone invia quando hover*/ 
#HCB_comment_box .btn:hover,
#HCB_comment_box .btn:focus,
#HCB_comment_box .btn:active,
#HCB_comment_box input.btn:hover,
#HCB_comment_box input.btn:focus,
#HCB_comment_box input.btn:active
 {
	 /*reset proprietà default*/
	font-size: none;
	text-shadow: none;
	border: none;
    border-top-color: none;
    border-right-color: none;
    border-bottom-color: none;
    border-left-color: none;
	
	/*proprietà tasto submit*/
	color: #ffffff;
	background-color: #38BAD1;
	background-image: #38BAD1;
	border-color: #111111;
	padding: 8px 22px;
	-webkit-transition: all 0.35s;
	-moz-transition: all 0.35s;
	transition: all 0.35s;
}