/* Proprietà generali */
figure{ margin:0; padding:0}
a{ text-decoration:none; color: #2e82d0}
a:hover{ text-decoration:underline; color: #333}
ul{ list-style:none; margin:0; padding:0}
html, body{ height:100%; width:100%; font-family: 'Source Sans Pro', sans-serif; margin:0}
.clearer{ clear:both}
.invisible{ display:none}
.hide{display:none;}
.pointer{cursor:pointer !important}
.no-pointer{cursor:default !important}
.no-margin{margin:0 !important}
.no-padding{padding:0 !important}
.no-min-width{min-width:0px !important}
.italic{font-style:italic !important}
.underline{text-decoration:underline !important}
h3 {font-size: 18px;
    margin-top: 10px;
    display: block;
    color: #666;
    clear: both;
}
textarea {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px dashed #ccc !important;
    min-height:100px;
}
select option {
    max-width:100%
}
/*colori*/
.violet{ color:#914ba3 !important}
.blu{ color:#007fe0 !important}
.brown{ color:#8f4300 !important}
.orange{ color:#e07e00 !important}
.yellow{ color:#b4a500 !important}
.green{ color:#3f7a34 !important}
.red{ color:#BA1D38 !important}

.bg-green{background-color: #093 !important;}
.bg-red{background-color: #900 !important;}
.bg-yellow{background-color: #FC0 !important;}

/*larghezze*/ 
.x100,.x100f{ width:100% !important;}
.x90,.x90f{ width:90% !important;}
.x80,.x80f{ width:80% !important;}
.x75,.x75f{ width:75% !important;}
.x70,.x70f{ width:70% !important;}
.x66,.x66f{ width:66% !important;}
.x60,.x60f{ width:60% !important;}
.x50,.x50f{ width:50% !important;}
.x40,.x40f{ width:40% !important;}
.x33,.x33f{ width:33.33% !important;}
.x30,.x30f{ width:30% !important;}
.x25,.x25f{ width:25% !important;}
.x20,.x20f{ width:20% !important;}
.x15,.x15f{ width:15% !important;}
.x10,.x10f{ width:10% !important;}

.errore{background-color:#f8d7da !important;border-color:#f5c6cb !important;color:#721c24 !important;}
.erroreCheckbox{border-radius: 4px;border: 4px solid rgba(204, 34, 43, 0.8); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(204, 34, 43, 0.6);}

body{ background:#f1f1f1; background: #f9fbfd; font-size:13px}
#container{ max-width:1000px; border:0px solid #e1e1e1; margin:5vh auto; background:#FFF; box-shadow: 0 1.5rem 4rem rgba(22,28,45,.05)!important; border-radius: 10px}
#head{ background:transparent url(elementi/bg-head.jpg?v=1.02) no-repeat right center; background-size: 1000px; height:190px; border-radius: 10px 10px 0 0}
/*#head header{ height: 100px; background: #fff; background:transparent url(elementi/logo.png) no-repeat 20px center; background-size: 180px  }*/
#content{border-top:1px solid  #d9e2ef}
hr{ width: 300px; width: auto; margin: 5vh auto; border: 0;  border-top: 1px solid #f1f1f1 }

article{ padding:1em 2em}
h1{ font-size:2em; font-weight:100;}
h2{ font-size:1.8em; color: #394d74; border-left: 2px solid #eaf1fd; padding: 10px 20px}
p{ font-size:1.3em; color: #506690; color: #18558d}
p a{ color:#06C; text-decoration:underline}
.titolone{ font-weight:100; font-size:2em; color:#333}
.avviso{font-weight:bold; color:#a8062b}
.alert{ color: #18558d; background:rgba(51, 116, 234, 0.1); padding: 10px 20px; border-radius: 10px; margin: 20px 0}
p.info{ padding: 10px 20px 10px 20px; position: relative}
p.info:before{ content: '\f05a'; font-weight : 900; display: block; font-size: 1em; position: absolute; top: 0.8em; left: 0px; font-family: "Font Awesome 5 Free"; color: #394d74}

ul{ margin: 20px 0; padding: 0; font-size: 1.3em}
ol{ margin: 20px 15px; padding: 0; font-size: 1.3em}
li{ padding: 0.8rem}

form{ padding:15px 20px; margin:0; border:0px solid #ccc;  background:#f1f1f1; overflow: hidden}
form h1{ text-align:center}
form h2{border-top: 2px solid #e1e1e1; clear: both; float: left; width: 100%; border-left: 0; text-align: left; color: #666; padding-left: 0px; padding-bottom: 0; margin-top: 20px; box-sizing: border-box}
form p{ color: #666666; font-size: 14px;}
form .alert{ float: left; width: 100%; box-sizing: border-box}
form .blocco, form .blocco-md, form .blocco-md-lg, form .blocco-lg, form .blocco-meta{ color: #666; box-sizing: border-box}
form #blocco_pul{ float: left; width: 100%; box-sizing: border-box;}
form .pul{ box-sizing: border-box; float: left; width: }

.data-list .blocco .campo{ width:50px; min-width:50px; border:1px solid #ccc}
.data-list .combo{ font-size:10px}
.checkForm{ display:inline-block; width:24%; padding:5px 0 15px 0; font-size:12px; font-weight:100; color:#666;height:45px}

.blocco, .blocco-md, .blocco-md-lg, .blocco-lg, .blocco-meta{ color: #506690; box-sizing: border-box; float: left; display: block}
.blocco {display: inline-block;width: 25%;padding: 5px;vertical-align: top; font-size:1.2em;}
.blocco-md{ display:inline-block; width:33.3%; padding:5px 5px 15px 5px; vertical-align:top; font-size:1.2em;}
.blocco-md-lg{ display:inline-block; width:66.6%; padding:5px 5px 15px 5px; vertical-align:top; font-size:1.2em;}
.blocco-lg{ display:inline-block; width:100%; padding:5px 5px 15px 5px; vertical-align:top; font-size:1.2em;}
.blocco-meta{ display:inline-block; width:50%; padding:5px 5px 15px 5px; vertical-align:top; font-size:1.2em;}
label{ font-size:12px; font-weight:400; color:#0d316d; text-transform:uppercase}
label p{font-size:0.9em;}
.campo{ background:#FFF; box-sizing: border-box; padding: 0 10px; display:block; border:0; border-bottom:1px dashed #ccc; height:2em; font-size:13px; line-height:2em; font-weight:200; color:#666; width:100%;     height: 30px;}
.fa.fa-info-circle {padding-right: 5px}
.parola{ display:inline-block; width:100%; padding:10px 0}
.parola .campo{ height:30px; line-height:30px; font-size:20px; width:100%}
.campo-disabilitato{ background:#F1F1F1}
.blocco-lg .campo, .blocco-lg .combo{ width:100%;}
.blocco-md-lg .campo, .blocco-md-lg .combo{ width:100%}
.blocco-meta .campo, .blocco-meta .combo{ width:100%}

a.info {
background: #333;
color: #FFF;
padding: 0 0.3em;
font-size: 0.8em;
display: inline-block;
margin: 0em 0 0em 0.2em;
width: auto;
left: auto;
}

a.visualizza {
background: #060;
color: #FFF;
padding: 0 0.3em;
font-size: 0.8em;
display: inline-block;
margin: 0em 0 0em 0.2em;
width: auto;
left: auto;
}

a.elimina {
background: #900;
color: #FFF;
padding: 0 0.3em;
font-size: 0.8em;
display: inline-block;
margin: 0em 0 0em 0.2em;
width: auto;
left: auto;
}

.pul{ text-align:center; padding:20px 0px}
.pul a {
display: inline-block;background:#dce7ee; padding:15px 20px; font-size:1.3em; border-radius:5px; color:#036; border-bottom: 2px solid rgba(0,0,0,0.04)}
.pul a:hover{ background:#333; color: #fff; text-decoration: none}

#footer{ border-top:1px solid #eaf1fd; padding:15px 0; font-size:1em; height:40px; display: flex;align-items: right; justify-content: right;}
#footer footer{ color: #94adc3;}
#footer img{height:30px; vertical-align:middle;}

ul.seleziona{ text-align:center}
ul.seleziona li{ display:block; display: inline-block; padding:10px}
ul.seleziona li a{ display:inline-block; background:#dce7ee; padding:15px 20px; font-size:1.3em; border-radius:5px; color:#036; border-bottom: 2px solid rgba(0,0,0,0.04)}
ul.seleziona li a:hover{ text-decoration:none; background:#036; color:#FFF}

/**
 * Checkbox Five
 */
input[type=checkbox] {
	visibility: hidden;
}
.checkboxFive {
	width: 25px; height:25px;
	margin:0 2px 0 0; display:inline-block;
	position: relative; font-size:16px; float: left; margin: 0 10px 20px 0
}
/**
 * Create the box for the checkbox
 */
.checkboxFive label, #edit.desabled .checkboxFive label{
	cursor: pointer;
	position: absolute;
	width: 23px;
	height: 23px;
	top: 0;
  	left: 0;
	background: #fff;
	border:2px solid #ddd; border-radius:3px;
}
#search .checkboxFive label, #search #edit.desabled .checkboxFive label{ background:#FFF}
#edit .checkboxFive label{ background:#fff}
/**
 * Display the tick inside the checkbox
 */
.checkboxFive label:after {
	opacity: 0;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 6px;
	left: 7px;
	border: 3px solid #333;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
/**
 * Create the hover event of the tick
 */
.checkboxFive label:hover::after {
	opacity: 0.5;
}

/**
 * Create the checkbox state for the tick
 */
.checkboxFive input[type=checkbox]:checked + label:after {
	opacity: 1;
}
/**
 * STILE PERSONALIZZATO PER SELECT
 */
.combo {
	border: 0 !important;  
	-webkit-appearance: none;  
	-moz-appearance: none; 
	background: #fff url(elementi/select-arrow.png) no-repeat right center;
	min-width: 80px; 
	text-indent: 0.01px; 
	text-overflow: ""; 
	color: #666; font-size:13px;
	border-radius: 5px;
	padding: 0 25px 0 5px; line-height:25px; height:25px;
	box-shadow: inset 0 0 1px rgba(000,000,000, 0.5);
	text-transform:none; width:90%; display:block;
     box-sizing: border-box; padding: 0 10px; border:0; border-bottom:1px dashed #ccc; height:2em; font-size:15px; line-height:2em; font-weight:200; color:#666; width:100%;
}
/**
 * tolgo la freccia default della select in IE10
 */
select::-ms-expand {
display:none;
}
/**
 * tolgo la freccia default della select in IE8 e 9
 */
.combo {
    padding: 0 0px 0 5px\0/IE8+9; /* IE8+9  */
}

form .combo{
    background: #fff url(elementi/select-arrow.png) no-repeat right center;
    background-size: 60%;
    background-size: 15px;
    border-radius: 0;
    border-bottom: 1px dashed #ccc !important;
    font-size: 13px;
    padding: 0.2em;
    height: 30px;
    margin: 0;
}

.sticky {
  position: fixed;
  top: 0;
  width: 948px !important;
}
.sticky + form {
  padding-top: 40px;
}

/* nav */

#menunav {
    width:100%; 
    height:40px; 
    background: #e5e5e5; 
    z-index: 400;
}

.navigation  {
 display: block;
 transition-duration: 0.5s;
}
.navigation ul  {
 margin: 0; padding:0
}
.navigation li {
    display: block;
    /*float: left;*/
    padding: 1rem;
    position: relative;
    text-decoration: none;
    transition-duration: 0.5s;
    padding: 0.5rem;
}

.navigation li a {
    color: #1b1b1b;
    width:100%;
    display: block;
}
.navigation li a:hover {
    color: #18558d;
    text-decoration: none;
    transition-duration: 0.5s;
}

.navigation  li:hover {
  cursor: pointer;
}

.navigation ul li ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    transition: all 0.5s ease;
    left: 0;
    display: none;
    -webkit-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.35);
    box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.35);
    width:100%;
    margin-top: 7px;
}

.navigation ul li:hover > ul,
.navigation ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
  transition-duration: 0.5s;
}

.navigation ul li ul li {
    clear: both;
    width: 100%;
    background: #f5f5f5;
    font-size: 14px;
    border-bottom: 1px solid #FFF;
    width:100%;
    padding:0;
}
.navigation ul li ul li a {
    padding:0.5rem;
}
.prefooter{ padding: 1em 2em; }
.prefooter img{ display: block; width: 100%}
/*REGOLE RESPONSIVE*/
@media only screen and (max-width: 600px) {
    #container{ margin: 0 auto}
    .blocco-md{ width: 100%}
    .blocco-md-lg{ width: 100%}
    .blocco-meta{ width: 100%}
    .blocco{ width: 50%}
    article{ padding: 15px}
    form{ padding: 15px}
    #footer{ background-size: 300px; background-position: bottom center; align-items:initial; text-align: center; justify-content: center}
    .pul a{ text-align: center}
}

/* Tablet Layout: 768px */
@media only screen and (max-width: 948px) {

    h1 {
        padding: 0.5rem;
    }
    article {
        padding: 0;
    }
}

/* Tablet Layout: 768px */
@media only screen and (max-width: 790px) {
    .checkboxFive label, #edit.desabled .checkboxFive label {
        width: auto;
        height: auto;
    }
    .checkboxFive label:after {
        top: 4px;
        left: 4px;
    }

	.no-mobile{ display:none !important}
	.solo-mobile{display:inline-block !important}

    label{ padding-bottom: 20px; padding-right: 20px}
    
    .x90, .x80, .x75, .x70, .x66, .x60, .x50{ width: 100% !important}
    .x40, .x35, .x33, .x30, .x25, .x20, .x15, .x10{ width: 50% !important}
}
/* Tablet Layout: 400px */
@media only screen and (max-width: 490px) {
    .x90, .x80, .x75, .x70, .x66, .x60, .x50{ width: 100% !important}
    .x40, .x35, .x33, .x30, .x25, .x20, .x15, .x10{ width: 100% !important}
    label{ font-size: 0.9em}
     #head{ background:transparent url(elementi/mobile_tap.png ) no-repeat center; background-size: 100%; height:600px }
    #head header{ background-size: 120px}


.x40, .x35, .x33, .x30, .x25, .x20, .x15, .x10 {
    width: 100% !important;
}
}