@charset "UTF-8";

/*
    COLORI CF base FABLAB 
    Bg: #093850;
    Ln: #38a7dc;
*/

/* CONTATORE nuovo visore*/
.box_canvas {
  display: block; /*overflow: hidden;*/
  text-align: center;
  position: relative;
  width: 100%; height: auto;
  border-radius:100%;
  background:#fff;
}
.icon_top {
  visibility: hidden; /* SIMULO PRELOAD */	
  display: inline-block; overflow: hidden;
  position: relative; top: 3px; z-index: 3;
  margin-bottom: 2px;
  width: 24px; height: 24px;
  /*background: url(../img/mini_i.png) center center no-repeat transparent;*/
  background: url(../img/mini_i.svg) center center no-repeat transparent;
  background-size: cover; 
}
.canvasStyle {
  display: block; overflow: hidden;
  position: absolute; top:0; left: 0; z-index: 2; 
  width: 100%; height: 100%;
}
.imgProg {
  position: absolute; top: 0; left: 0; z-index: 1;
  display: inline-block; overflow: hidden;
  width: 100%; height: 100%;
  /*background: #333;*/
  background: transparent center no-repeat;
  background-size: 75% 75%;
  border-radius: 100%;
  /*border: 36px solid #fff;*/
}

.perc_link {
	display:inline-block; width:100%; height: 100%; position:absolute; z-index:20; top:0; left:0;
	margin:0 auto; /*padding-top: 22%;*/ overflow:hidden;
			
	vertical-align:middle; text-align:center; font-size: 4em; /*line-height:3.5em;*/ color:#eee!important; letter-spacing:-8px;
	/*text-shadow: 1px 1px #E9500E;*/ text-shadow: .001em .001em #333;
	font-family: 'Varela Round', sans-serif;
	/*text-indent:-999px;*/
	opacity: 0;
	background: rgba(0, 0, 0, 0.5);	
}
.perc_link small {
	padding-left: 2%; 
	font-size: 60%;
}
.box_canvas:hover .perc_link {
	/*text-indent:0;*/
	opacity: 1;
	color:#3b3b3b; text-decoration:none;
}

.box_canvas:hover .imgProg {
	display: inline-block;
	overflow: hidden;
	background-color: #000;
}
.box_canvas:hover .imgProg img {
	opacity:.5;

	/* animazione 
	-o-transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
	transition: 0.5s ease;*/
}

.line {
	clear: both; position: relative;
	display: block;
	margin: 5px auto 12px auto;
	width: 99%; height: 5px;
	border-radius: 6px;
}
.line.ginger {
	background: #f28c00;
}
.line.lineIn {
	margin-bottom: 0;
}
	/* CLASSI CUSTOM COLOR - FONT */
		.colLn-0 		{ background: #9E1F63; }		/*  CASA SOTTO COLLE 9E1F63 / 37B34A */
		.colLn-txt-0	{ color: #9E1F63!important; }	/*  */

		.colLn-1 		{ background: #38a7dc; }		/*  FAB LAB LN BASE 9E1F63 / 37B34A */
		.colLn-txt-1	{ color: #38a7dc!important; }	/*  */

		.colLn-2 		{ background: #33CC66; }		/* VERDE 33CC66 / 007F3E */
		.colLn-txt-2	{ color: #33CC66!important; }	/* */

		.colLn-3 		{ background: #FF9900; }		/* ARANCIO FF9900 / B05113 */
		.colLn-txt-3	{ color: #FF9900!important; }	/* */

		.colLn-4 		{ background: #FFCC00; }		/* GIALLO FFCC00 / F37021 */
		.colLn-txt-4	{ color: #FFCC00!important; }	/* */

		.colLn-5 		{ background: #FF3333; }		/* ROSSO FF3333 / 801013 */
		.colLn-txt-5	{ color: #FF3333!important; }	/* */

		.colLn-6 		{ background: #009999; }		/* NAVY 009999 / 005653 */
		.colLn-txt-6	{ color: #009999!important; }	/* */

		.colLn-7 		{ background: #FF3399; }		/* FUXIA FF3399 / 841A4B */
		.colLn-txt-7	{ color: #FF3399!important; }	/* */

		.colLn-8 		{ background: #99CC00; }		/* VERDINO 99CC00 / 6B8336 */
		.colLn-txt-8	{ color: #99CC00!important; }	/* */

		.colLn-9 		{ background: #9999FF; }		/* LILLA 9999FF / 5B57A6 */
		.colLn-txt-9	{ color: #9999FF!important; }	/* */

		.colLn-10 		{ background: #66CCFF; }		/* ACQUA 66CCFF / 417891 */
		.colLn-txt-10	{ color: #66CCFF!important; }	/* */

		.colLn-11 		{ background: #00FF33; }		/* ACID GREEN 00FF33 / 498B31 */
		.colLn-txt-11	{ color: #00FF33!important; }	/* */

		.colLn-12 		{ background: #3399FF; }		/* ACID BLU 3399FF / 003366 */
		.colLn-txt-12	{ color: #3399FF!important; }	/* */

		.colLn-13 		{ background: #FF99FF; }		/* ROSA FF99FF/ 8F53A1 */
		.colLn-txt-13	{ color: #FF99FF!important; }	/* */
		
		
	/**/

.dx {
	position:relative; /*overflow: hidden;*/
	float:right; width:33%; /*width:49%;*/
	text-align:right;
}
.dx p,
.sx p {
	margin: 5px 0 0 0; padding: 2px; 
	line-height: 15px; letter-spacing: -1px;
}
.dx p strong,
.sx p strong {	
	font-size: 220%; color:#4d4d4d; /*color: #6BAA07;*/ font-weight: normal!important;
}*/
.dx small,
.sx small {
	display: block;
	margin-bottom: 5px;
	color: #666666;
}

.sx {
	position:relative; /*overflow: hidden;*/
	float:left; width:66%; /*width:49%;*/
	text-align:left;
}

.titolo_prog_ns {
	margin-bottom: 10px;
	min-height: 105px;
	text-align: center;
}
.titolo_prog_ns h4 {
	margin: 0 0 2px 0; padding: 0;
	color: #3b3b3b; line-height: 20px; font-weight: bold;
}
.titolo_prog_ns h4 a {
	color: #3b3b3b;
}
.titolo_prog_ns h4 a:hover {
	color: #38a7dc;
}
.titolo_prog_ns h4 a:after {
	display: none;
}

.titolo_prog_ns small span {
	color: #f28c00; font-style: italic;
}

/* ------------- VISORE DETTAAGLIO */
.dettaglio_in {
	margin-bottom: 0;
	padding: 20px 0; 
}
.ribbon {
	margin: 0 0 15px 0; padding: 0;
	width: 100%; height: 50px;
	background: url(../img/ribbon.svg) center center no-repeat transparent;
	background-size: cover; 
}
.dettaglio_in h1, .dettaglio_in h2 {
	margin: 0; padding: 0; letter-spacing: -2px; line-height: 40px;
}
.dettaglio_in h1 {
	/*font-size: 45px; letter-spacing: -2px;*/
}
.dettaglio_in p {
	margin: 0 0 15px 0; padding: 0;
}

.dettaglio_in p.last {
	margin: 0; 
}

.dettaglio_in .dx {
	margin: 3px; padding: 25px 0;
	display: inline-block;
	float: none;
	width: 105px; height: 105px;
	text-align:center;
	background: #fff;
	border: 2px solid #e6e6e6;
	/*border-bottom: 5px solid #e6e6e6;*/
	border-radius: 100%;

	-moz-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;

	-ms-transform: rotate(-14deg); 
    -webkit-transform: rotate(-14deg);
    transform: rotate(-14deg);
}

.dettaglio_in .sx {
	margin: 3px; padding: 25px 0;
	display: inline-block;
	float: none;
	width: 105px; height: 105px;
	text-align:center;
	background: #fff;
	border: 2px solid #e6e6e6;
	/*border-bottom: 5px solid #e6e6e6;*/
	border-radius: 100%;

	-moz-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;

	-ms-transform: rotate(-14deg); /* IE 9 */
    -webkit-transform: rotate(-14deg); /* Chrome, Safari, Opera */
    transform: rotate(-14deg);
}

.dettaglio_in .sx:hover, .dettaglio_in .dx:hover {
	-moz-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;

	-ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
}

.dettaglio_in .dx p, .dettaglio_in .sx p {
	padding: 5px; 
	letter-spacing: normal;
} 
/* ------------------------------- */


/* ----------------- MOBILE CANVAS */
	.mobile_canvas {
		margin-top: 5px;
		position: relative; overflow: hidden;
		display: block;
		float: left;
		width:120px; height: 120px;
		border-radius: 100%;
	}
	.top_mobile {
		top: -1px!important;
		width: 10px!important; height: 10px!important;
	}
	.perc_link.perc_link_mobile {
		position: relative; overflow: hidden;
		display: block;
		width:120px; height: 120px;
		line-height: 120px!important; font-size: 26px!important; letter-spacing: -1px!important;
		border-radius: 100%;
	}
	.line_mobile {
		position: relative;
		display: block; margin: 0 8px 0 5px; 
		float: left;
		width:6px; height: 125px;
		border-radius: 6px;
	}
	.line_mobile.ginger {
		background: #f28c00;
	}
	.cont_dx_mobile {
		display: block; overflow: hidden;
		position: relative;
		float: left;
		width:70%; height: 140px;
	}
	.titolo_prog_ns.titolo_prog_mobile {
		margin-bottom: 5px!important;
		min-height: 80px;
		text-align: left;
	}
	.titolo_prog_ns.titolo_prog_mobile small {
		display: inline-block;
		font-size: 13px!important; line-height: 12px!important;
	}

/* ----------------- */

/* ----------------- MOBILE CANVAS */
.margin_mobile {
	margin-top: 20px;
}

.dettaglio_mobile {
	padding: 0 5px;
	text-align: center;
	/*background: #f2f2f2;
	border-bottom: 5px solid #e6e6e6;*/
}
.cont_dx_mobile.dettaglioMobile {
	overflow: visible;
	width: 46%;
}
.prezzoMobile {
	padding: 20px 0 5px 0!important;
	color: #4d4d4d; font-size: 24px!important; letter-spacing: -1px; text-align: center;;	
}

/* ----------------- */

/* ***************************** MEDIA Q */
/* ************************************* */
@media screen and (max-width: 1200px) {
	
	.icon_top {
	  top: 1px;
	  width: 20px; height: 20px;
	}

	.canvasStyle {
	}

	.imgProg {
		/*border: 28px solid #fff;*/
	}

	.perc_link {
		font-size:3em; letter-spacing:-5px;
	}

}
@media screen and (max-width: 768px) {
	.icon_top {
	  top: 5px;
	  width: 28px; height: 28px;
	}

	.canvasStyle {
	}

	.imgProg {
		/*border: 45px solid #fff;*/
	}

	.perc_link {
		font-size:4em; letter-spacing:-8px;
	}

}
@media screen and (max-width: 640px) {
	.icon_top {
	  top: 1px;
	  width: 20px; height: 20px;
	}

	.canvasStyle {
	}

	.imgProg {
		/*border: 32px solid #fff;*/
	}

	.perc_link {
		font-size:4em; letter-spacing:-8px;
	}
	.dx p strong,
	.sx p strong {	
		font-size: 135%; /*color: #6BAA07;*/ letter-spacing:-1px;
	}

	/* ******************************* MOBILE CANVAS */
	.cont_dx_mobile {
		width:65%;
	}
	/* ************************** fine MOBILE CANVAS */
}
@media screen and (max-width: 470px) {
	.icon_top {
	  top: 0px;
	  width: 14px; height: 14px;
	}

	.canvasStyle {
	}

	.imgProg {
		/*border: 22px solid #fff;*/
	}

	.perc_link {
		font-size:3em; letter-spacing:-6px;
	}
	.titolo_prog_ns{
		min-height: 125px;
	}
	.titolo_prog_ns h4 {
	font-size: 15px; line-height: 16px;
}

	.dx p strong,
	.sx p strong {	
		font-size: 120%; /*color: #6BAA07;*/ letter-spacing:-1px;
	}

	/* ******************************* MOBILE CANVAS */
	.cont_dx_mobile {
		width:50%;
	}
	/* ************************** fine MOBILE CANVAS */

}
@media screen and (max-width: 320px) {
	.icon_top {
	  top: 0px;
	  width: 14px; height: 14px;
	}

	.canvasStyle {
	}

	.imgProg {
		/*border: 18px solid #fff;*/
	}

	.perc_link {
		font-size:3em; letter-spacing:-6px;
	}

}