html, body{margin: 0;}
html{
    font-size: 16px;
}
body{
	background-color: rgb(255,255,255);
    margin-top: 4rem;
    padding-bottom: 4rem;
}
body,div{
    font: 400 1rem 'Source Sans Pro', 'Helvetica', sans-serif;
		color:rgb(51,51,51);
}
/* HEADER & FOOTER */
header{
    
}
nav{background-color: rgba(20,30,40,0.85);}
footer{
	width: 100%;
	background-color: rgba(20,30,40,0.85);
}
.footer-responsive{
  position: fixed;
  bottom: 0;
  left: 0;
}
footer div{
  padding: 1rem;
  font-size: 0.85rem;
  font-weight: 400;
  color:#fff;
}

/* NAVIGATION */
nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
	padding: 0 5%;
  border-bottom: solid 1px #ccc;
	z-index: 9;
}
nav ul{
	padding: 0;
  margin: 0 auto;
  list-style: none;
  font-size: 0.8rem;
  font-weight: 400;
	color:#fff;
}
nav ul li{
  display: inline-block;
	position: relative;
	padding: 0.5rem 1rem;
}
nav ul li a, #menu-button{
	color:#fff;
	text-decoration: none;
}
nav ul li:hover, nav ul li:hover a{
	background-color: rgb(240,240,240);
	color: rgba(0,0,0,0.9);
}
.submenu ul{
	display: none;
	position: absolute;
	top: 2rem;
	left: 0;
}
.submenu:hover ul{
	display: block;
	background-color: rgb(240,240,240);
}
.submenu ul li{
	width: max-content;
	border-top: solid 1px rgb(204,204,204);
}
.submenu ul li:hover{
	background-color: rgba(20,30,40,0.85);
	color:#fff;
}
.submenu ul li:hover a{
	background-color: initial;
	color:#fff;
}
#menu-button{
  display:none;
  margin-left: 5%;
	padding: 6px;
	font-size: 36px;
	cursor: pointer;
}

/* BOXES */
.container{
		padding: 0 5%;
}
.full-height{
  height: 100vh;
}
.content{
    
}
.table-box{display:table;}
.table-row{display:table-row;}
.table-cell{display:table-cell;}

/* GRID */
.row{
  display: flex;
	flex-flow: row
}
.col{
	display: flex;
	flex-flow: column;	
  box-sizing: border-box;
}
.col-1-1{width:100%;}
.col-3-4{width:75%;}
.col-2-3{width:66.667%;}
.col-1-2{width:50%;}
.col-1-3{width:33.333%;}
.col-1-4{width:25%;}
.col-1-6{width:16.667%;}

/* TIPOGRAFIA */
/* heading */
h1{
	font-size: 3rem;
	font-weight: 100;
}
h2{
	font-size: 1.8rem;
	font-weight: 300;
}
h3{
	margin-bottom: 0;
	font-size: 1.15rem;
	font-weight: 700;
}

/* paragrafi */
p{
	margin: 0.75rem 0;
  text-align: justify;
  font-size: 1rem;
  line-height: 1.5;
  color:rgb(0,0,0);
}
.small{font-size:75%;}
.large{font-size:150%;}

/* Distanziatori */
.margin-top-1{margin-top:1rem;}
.margin-bottom-1{margin-bottom:1rem;}
.margin-left-1{margin-left:1rem;}
.margin-right-1{margin-right:1rem;}

/* BUTTONS */
button{
  padding: 0.4rem 1.2rem;
  border: solid 1px #ccc;
  border-radius: 0.2rem;
  background: linear-gradient(#fff, #eee);
  font: normal 400 0.8rem/1rem 'Lato',sans-serif;
	color: initial;
  cursor: pointer;
}
button:hover, button:active{background:#eee;}
.btn-ok{
  background: linear-gradient(#0b0, #090);
  border: solid 1px #090;
	font-weight: 700;
  color: #fff;
}
.btn-ok:hover, button.ok:active{background:#090;}
.btn-ko{
  background: linear-gradient(#f00, #c00);
  border: solid 1px #c00;
	font-weight: 700;
  color: #fff;
}
.btn-ko:hover, button.ko:active{background:#c00;}
.btn-az{
  background: linear-gradient(rgb(60,102,204), rgb(40,80,204));
  border: solid 1px rgb(40,80,204);
	font-weight: 700;
  color: #fff;
}
.btn-az:hover, button.az:active{background:rgb(40,80,204);}
.btn-block{
	margin: 1rem 0;
	display: block;
  width: 100%;
}
.pointer{cursor: pointer;}

/* FORMS */
form.styled{
  width: 33%;
}
form.styled fieldset{
  width: 100%;
  padding: 0;
  padding: 0 0 0 2rem;
  border: none;
  border-left: solid 1px rgba(20,30,40,0.85);
}
form.styled fieldset legend{
  margin-left: calc(-2rem - 1px);
  margin-bottom: 1.5rem;
  border-left: solid 1px rgba(20,30,40,0.85);
  line-height: 1rem;
  font-size: 1.5rem;
}
legend #fieldset-icon{
  padding: 0.5rem;
  margin-left: -2px;
  color: #fff;
  font-size: 1.2rem;
  background-color: rgb(20,30,40);
}
.input-group{
  margin-bottom: 1.5rem;
  width: 100%;
}
form.styled .input-group:last-child{
  margin-bottom: 0px;
}
.input-group, .input-group>div, .input-group>input{
  display: block;
}
label:first-child{
  display: block;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: bold;
}
.input-group>input, .input-group select, .input-group>div   {
  width: 100%;
  padding: 0.5rem;
}
input[type=text],input[type=password],input[type=date],textarea{
  width: calc(100% - 1rem);
}
input[type=text],input[type=password],input[type=radio],input[type=checkbox],select  {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  font-family: inherit;
  border: 0;
  border-bottom: solid 1px rgba(20,30,40,0.25);
}

.option-label{margin-right: 1rem;}
select{
  background: transparent;
  border: solid 1px rgba(20,30,40,0.25);
  border-radius: 3px;
}
.option-group{display: inline-block}
option{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding:0.5rem;
}
textarea{
  display:block;
  min-height: 150px;
  padding: 0.5rem;
  resize: none;
  border: solid 1px rgba(20,30,40,0.25);
  border-radius: 3px;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  font-family: inherit;
}

/*
------- Radiobutton e checkbox ------
*/
/* Customize the label (the container) */
.checkbox-label, .radio-label {
    display: block;
    position: relative;
    padding: 3px 12px 0px 24px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.radio-label{
    display:inline-block;
    margin-right: 16px;
}
/* Hide the browser's default checkbox */
.checkbox-label input, .radio-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background: #fff;
    border: solid 1px #999;
}
.radio-label .checkmark{
    border-radius: 50%;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-label input:checked ~ .checkmark:after, .radio-label input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-label .checkmark:after {
    left: 6px;
    top: 0px;
    width: 4px;
    height: 12px;
    border: solid rgb(40,80,204);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.radio-label .checkmark:after {
    left: 3px;
    top: 3px;
    width:12px;
    height:12px;
    border-radius: 50%;
    background: rgb(40,80,204);
}




/* TABLES */
table{
	width: 100%;
	border: solid 1px rgb(20,30,40);
	border-collapse: collapse;
  font-size:0.85rem;
  font-weight: 400;
}
table.righe tr:nth-child(even) {
  background-color: rgb(240,240,240);
}
th,td{
	border: solid 1px rgb(204,204,204);
	padding: 0.5rem;
}
table.contorno{border: solid 2px rgb(20,30,40);}
tr.bg-blue th{border: solid 1px rgb(40,80,153);}

/* PANELS */
.panel{
	height: 100%;
	box-shadow: 2px 2px 10px -2px rgba(51,51,51,0.5);
}
.col .panel{margin: auto 1rem;}
.panel header{
  position: relative;
  padding-bottom: calc(100% / 16 * 9 );
  background-repeat: no-repeat;
  background-position: center; 
  background-size: cover;
  border-bottom: solid 3px;
}
.panel header h3{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -0.75rem;
    border-radius: 1rem;
    padding: 5px 1rem;
    line-height: 1;
    font-size: 0.85rem;
    color: #fff;
}
.panel-content{
  padding-left: 2rem;
  padding-right: 2rem;
  background-color: #fff;
}
.panel h2{
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 2rem;
}
.panel p{
  font-size:0.85rem;
  line-height: 1.35rem;
}
.panel p:last-child{padding-bottom: 2rem;}


.panel-909 header{border-bottom-color: #909;}
.panel-909 header h3{background-color: #909;}
.panel-909 h2{color:#909;}

.panel-099 header{border-bottom-color: #099;}
.panel-099 header h3{background-color: #099;}
.panel-099 h2{color:#099;}

.panel-990 header{border-bottom-color: #990;}
.panel-990 header h3{background-color: #990;}
.panel-990 h2{color:#990;}
  
/* BORDERS */
.no-border, table.no-border td, table.no-border th{border: none;}
.border-collapse{
  border-collapse: collapse;
  margin-left: -1px;
  margin-right: -1px;
}
.bordered{border:solid 1px rgb(102,102,102);}

/* IMAGES */
img{}
img.logo{}

/* ALIGN */
.sx{text-align:left;}
.center{text-align:center;}
.dx{text-align:right;}
.justify{text-align:justify;}
.v-align-middle{vertical-align: middle;}

/* COLORS */
/* Foreground */
.white{color:#fff;}
.black{color:#000;}
.grey{color:rgb(153,153,153);}
.grey-dark{color:rgb(80,80,80);}
.grey-light{color:rgb(240,240,240);}
.red{color:rgb(204,0,0);}
.blue{color:rgb(40,80,204);}
.blue-light{color:rgb(120,160,240);}
.green{color:rgb(0,150,0);}
.green-light{color:rgb(80,204,80);}
.orange{color:rgb(255,153,51);}

/* Background */
.bg-white{background:#fff;}
.bg-black{background:#000;color:#fff;}
.bg-grey{background:rgb(153,153,153);color:#fff;}
.bg-grey-dark{background:rgb(80,80,80);color:#fff;}
.bg-grey-light{background:rgb(240,240,240);}
.bg-red{background:rgb(204,0,0);color:#fff;}
.bg-blue{background:rgb(40,80,204);color:#fff;}
.bg-blue-light{background:rgb(120,160,240);}
.bg-green{background:rgb(0,150,0);color:#fff;}
.bg-green-light{background:rgb(80,204,80);}
.bg-orange{background:rgb(255,153,51);}

/* Material Icons */
.material-icons{
/*  font-size: 1rem;*/
  vertical-align: text-bottom;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  form.styled{
    width: 50%;
  }
}
@media (max-width: 960px){
  .row{display: block;}
	.col{
      display: inline-block;
			flex: none;
      width: 100%;
  }
  form.styled{
    width: 100%;
    margin: 0 -5%;
  }
  .option-group{
    display: block;
    margin-bottom: 2px;
  }
  .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {width:100%;} 
  .panel, .col .panel{
    margin-left: calc(-5% - 2px);
    margin-right: calc(-5% - 2px);
  }
  
  /* Menu di navigazione */
  nav{
    padding: 0;
		z-index: 999;
  }
  nav ul{
		display: none;
    padding-right: 1rem;
  }
	
  nav ul li{
    display: block;
    margin-right: -1rem;
    padding: 1rem;
    border-bottom: solid 1px rgb(60,70,80);
  }
	nav ul li, .submenu ul{position: initial;}
	.submenu ul{display: none;}
	.submenu ul li{
		width: 100%;
		padding-bottom: 0.5rem;
		border:none;
	}
	.submenu ul li:hover, .submenu ul li:hover a{
		background-color: initial;
		color:initial;
	}
	.submenu ul li:hover{border-bottom: solid 1px rgb(204,204,204);}
	
  #menu-button{
    display: block;
  }
}