p,a,h6,h5,h2,label,th, span, input, .info {
					font-family: 'Didact Gothic', sans-serif;
					}
h2{
	text-transform:uppercase;
	}


h4,h3,h1{
				font-family: 'Caudex';
				}

.login{
			width: 24%;
			margin-left: 35%;
			padding-top: 3%;
			padding-bottom: 4%;
			padding-left: 3%;
			padding-right: 3%;
			margin-top:20%;
			background-color: rgba(255,255,255,.9);
			}

.login h3{
				text-align:center;
				font-size:1.8vw;
				color:#333;
				}

.login .userpass{
					font-family: 'Didact Gothic', sans-serif;
					font-weight:100;
					margin-left:17%;
					width:60%;
					background-color:transparent;
					border:solid 1px transparent;
					border-bottom:solid 1px #333;
					font-size:1.8vw;
					line-height:3vw;
					color:#333;
					text-align:center;
					margin-top:3%;
					}

#login .accedi{
						font-family: 'Didact Gothic', sans-serif;
						font-size:1.6vw;
						margin-top:10%;
						text-align:center;
						padding:3%;
						width:50%;
						margin-left:25%;
						background-color:transparent;
						color:#666;
						border:solid 1px transparent;
						float: none;
						}

#login .accedi:hover{
								border:solid 1px #999;
								color:#333;
								}

.info{
	text-align:center;
	color:#666;
}


.head{
			position: fixed;
			top:0px;
			left:0px;
			width:100%;
			background-color:rgba(0,0,0,.8);
			z-index:100;
			}

.head .applogo{
						position: fixed;
						}

.head .clientlogo{
						position: fixed;
							}
							
.background{
			background-image: url("/img/wallpaper-standard.jpg");
			background-color: #000;
			position:fixed;
			left:0;
			top:0;
			width:100%;
			height:100%;
			z-index:-1;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			}
.alert{
			position:fixed;
			left:0;
			top:0;
			width:100%;
			height:100%;
			z-index:-1;
			background-color: rgba(255,255,0,.4);
			}
.areainterattiva{
						position:absolute;
						left:0;
						top:0;
						padding-left:5%;
						}

.areainterattiva-l{
						position:absolute;
						left:0;
						padding-left:5%;
						}


.boxinterattivi{
						position: relative;
						background:rgba(255,255,255,.8);
						border:solid 1px #fff;
						border-radius:15%;
						-webkit-box-shadow: -8px 10px 12px 0px rgba(102,102,102,.4);
						-moz-box-shadow: -8px 10px 12px 0px rgba(102,102,102,.4);
						box-shadow: -8px 10px 12px 0px rgba(102,102,102,.4);	
						}


@keyframes pulse_animation {
    0% { transform: scale(1); }
    30% { transform: scale(1); }
    40% { transform: scale(1.08); }
    50% { transform: scale(1); }
    60% { transform: scale(1); }
    70% { transform: scale(1.05); }
    80% { transform: scale(1); }
    100% { transform: scale(1); }
}


.boxinterattivi:click{
	
    animation-name: pulse_animation;
    animation-duration: 2000ms;
    transform-origin:70% 70%;
    animation-iteration-count: 1;
    animation-timing-function: linear;

}


.statistiche{
					background-image: url("/img/statistiche.jpg");
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					}	
					
.look{
					background-image: url("/img/look.jpg");
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					}			
					
.write{
					background-image: url("/img/write.jpg");
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					}

.back{
					background-image: url("/img/back.jpg");
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					}

.account{
					background-image: url("/img/account.jpg");
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					}

.impostazioni{
					background-image: url("/img/impostazioni.jpg");
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					}


.amministrazione{
					background-image: url("/img/amministrazione.jpg");
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					border:2px yellow solid;
					}

.guide{
					background-image: url("/img/guide.jpg");
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					}

						
.boxinterattivi h2 {
							    position: absolute;
    							top: 37%;
    							left: 0px;
    							width: 100%;
    							height: 100%;
    							text-align: center;
    							color: transparent;
							}
.boxinterattivi p {
							    position: absolute;
    							top: 70%;
    							left: 0px;
    							width: 100%;
    							height: 100%;
    							text-align: center;
    							color: grey;
							}
.comunicazioni{
						    position: fixed;
						    left:0;
   							bottom: 0;
  							height: 5%;
 							width: 100%;
							font-size: 1vw;
    						background-color: rgba(0,0,0,.90);
    						border: solid 1px black;
    						padding-left: 5%;
    						padding-right: 5%;
    						color: white;
    						z-index: 100;
							}
.comunicazioni .logout{
						position: fixed;
						right:5px;
						bottom:2%;
						color:white;
						z-index:105;
						font-size: 1vw;
    					background-color: rgba(0,0,0,.90);
    					border: solid 1px white;
						}


.ritorna{
			float:right;
			margin-top:25px;
			margin-right:25px;
			font-size: 2.5vw;
			padding:1.5vw;
			border: solid 1px #666;
			border-radius: 2px;
			color:#666;
			background-color: rgba(255,255,255,.9);
			text-decoration:none;
			}

						
/* 	FORM INSERIMENTO	*/			

.form-inserimento{
							padding-top:4vw;
							padding-left: 5%;
							padding-right:5%;
							background-color: rgba(255,255,255,.8);
							padding-bottom:8vw;
							-webkit-box-shadow: -8px 10px 12px 0px rgba(102,102,102,.4);
							-moz-box-shadow: -8px 10px 12px 0px rgba(102,102,102,.4);
							box-shadow: -8px 10px 12px 0px rgba(102,102,102,.4);	
							}

.form-inserimento label{
							position: absolute;
							left:10%;
							text-align:right;
							margin-top:15px;
							margin-right:15px;
							}	

.form-inserimento h1{
									text-transform:uppercase;
									}

.form-inserimento h2{
									padding-left:10%;
									text-transform:uppercase;
									}
							
.form-inserimento .inputbox, .inputbox_s, select{
											margin-top:15px;
											margin-left: 40%;
											padding-right:5%;
											text-align:left;
											text-align:-moz-left;
    										text-align:-webkit-left;
											width: 55%!important;
											}

.form-inserimento .inputbox, .inputbox_s, select option{
														text-align:left;
														text-align:-moz-left;
    													text-align:-webkit-left;
														}

.inputbox_s{
					width:35%;
					float:right;
					margin-top:-10px;
					}

.euro, .percento{
	text-align:right;
}

.euro::after{
    content: "\20ac"; /* € */
    padding-top: 0.3vw;
	color:grey;
    margin-left: 3px;
}

.percento::after{
    content: "\0025"; /* % */
    padding-top: 0.3vw;
	color:grey;
    margin-left: 3px;
}

/* form account */

#save_account{
				width:30%;
				margin-left:35%;
}


/* TABELLA SERVIZI */

table{
					background:none;
					border:1px solid #666;
					border-collapse:collapse;
					}

 tr th{
						text-transform:uppercase;
						}

th, td{
							width:20%;
							border:solid 1px transparent;
							color:#666;
							/*padding-left:2%;*/
							font-size:1.4vw;
							text-align: center;
							}
td{
	background-color:rgba(255,255,255,.1);
}

th{
	background-color:rgba(100,100,100,.1);
}

.tab_servizi{
	table-layout: fixed;
	width:100%;
}


.tab_servizi .small{
							width:10%;
							border:solid 1px #ccc;
							color:#666;
							padding-right:2%;
							padding-left:2%;
							}
														
.tab_servizi tr td input{
							width:80%;
							font-size: 1.2vw;
							border:none;
							text-align:right;
							background:none;
							}

.tab_servizi select {
	margin-left: 2%;
    padding-right: 2%;
    text-align: right;
    width: 100%!important;
    height: 100%!important;
    border: none!important;
    background: none!important;
	margin-top: 0px;
}

button, input[type=button], input[type=submit]{
	background-color: rgba(100,100,100,.2);
	border:1px #bbb solid;
	border-radius:2px;
	color:#333;
	float:right;
		}
	
.benchmark{
		background-color:rgba(50,200,50,.1);
}

.riferimento{
		background-color:rgba(230,200,0,.2);
}
	
.fixed_table{
	table-layout: fixed;
	width: 100%;
}
	
.head_28{
		width:28%!important;
	}

.head_24{
		width:24%!important;
	}

.head_13{
		width:13%!important;
}

.head_8{
		width:8%!important;
	}

.head_7{
		width:7%!important;
	}

#tab_margini_netti th, #tab_margini_netti td{
		width:10%!important;
	}
	#tab_margini_netti .nome_servizio, #tab_collaboratori .nome_servizio{
		width:20%!important;
	}
	
	#tab_collaboratori th, #tab_collaboratori td{
		width:10%!important;
	}
	#tab_indici_generali th, #tab_indici_generali td{
		width:12%!important;
	}

/*Fading Text		START

@-webkit-keyframes fade-out {
0% { opacity: 1; -webkit-transform: scale(1);}
85% {opacity: 1; -webkit-transform: scale(1.05);}
100% {-webkit-transform: scale(.1); opacity: 0;}
}

.fade-out {
    -webkit-animation: fade-out .5s ease-in;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    opacity: 1;
}

.fade-out.one {-webkit-animation-delay: .5s;}
.fade-out.two {-webkit-animation-delay: 1.5s;}
.fade-out.three {-webkit-animation-delay: 2.5s;}
.fade-out.four {-webkit-animation-delay: 5.5s;}

a.menu {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
    color: initial;
    padding: 15px;
    font-size: 20px;
	margin: 10px;    
}

*/
		
		
/* MEDIA QUERIES */

/* Iphne 6,7,8 */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {


	h1{
		font-size:4vw;
	}	
	
p, label{
			font-size:4vw;
			}		

.head{
			height:10%;
			}				

.head .applogo{
						top: 3%;		
						left:5%;
						width:20%;
						max-width:300px;
						}

.head .clientlogo{
							top: 3%;		
							right:5%;
							width:30%;
							max-width: 400px;
							}

.areainterattiva, .areainterattiva-l{
						top:12%;
						padding-bottom:10%;
						width:90%; 
						}

.login{
			width: 60%;
			margin-left: 15%;
			padding-top: 8%;
			padding-bottom: 8%;
			margin-top:65%;
			}

.login h3{
				font-size:5vw;
				}

.login .userpass{
					font-weight:100;
					font-size:5vw;
					line-height:6vw;
					margin-top:8%;
					}

#login .accedi{
						font-size:4.3vw;
						margin-top:13%;
						text-align:center;
						}
						
.boxinterattivi{
						margin:7.5%;
						padding:2.5%;	
						width:23%;
						padding-top: 25.5%;
						}

.boxinterattivi h2 {
							    position: absolute;
    							top: 37%;
    							font-size: 3vw;
    						}	
.boxinterattivi p{
	font-size:3vw;
	}
	
    										
.form-inserimento label{
										font-size:3vw;
										width:30%!important;
										}
.form-inserimento h1{
									font-size: 5vw;
									}									
.form-inserimento h2{
									font-size: 3vw;
									}
.form-inserimento .inputbox, .inputbox_s, select{
																			font-size: 2.5vw;
																			}
.tab_servizi{
					width:100%;
					}
th, td, td input{
	font-size:2vw!important;
	}


}




/* Phone X portrait */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait)
{

	h1{
		font-size:4vw;
	}	
	
p, label,{
			font-size:4vw;
			}		
.info{
	font-size:2.4vw;
	margin-left:25%;
	color:#666;
	}
	
.head{
			height:10%;
			}				

.head .applogo{
						top: 3%;		
						left:5%;
						width:20%;
						max-width:300px;
						}

.head .clientlogo{
							top: 3%;		
							right:5%;
							width:30%;
							max-width: 400px;
							}

.areainterattiva, .areainterattiva-l{
						top:12%;
						padding-bottom:10%;
						width:90%; 
						}

.login{
			width: 60%;
			margin-left: 15%;
			padding-top: 8%;
			padding-bottom: 8%;
			margin-top:65%;
			}

.login h3{
				font-size:5vw;
				}

.login .userpass{
					font-weight:100;
					font-size:5vw;
					line-height:6vw;
					margin-top:8%;
					}

#login .accedi{
						font-size:4.3vw;
						margin-top:13%;
						text-align:center;
						}
						
.comunicazioni .logout{
						right:5%;
						bottom:2%;
						font-size:3vw;
						padding: 0 2% 0 2%;
						}	
.comunicazioni a{
				font-size:4vw;
				}
	
.boxinterattivi{
						margin:7.5%;
						padding:2.5%;	
						width:23%;
						padding-top: 25.5%;
						}

.boxinterattivi h2 {
							    position: absolute;
    							top: 37%;
    							font-size: 3vw;
    						}	
.boxinterattivi p{
	font-size:3vw;
	}
	
    										
.form-inserimento label{
										font-size:3vw;
										width:30%!important;
										}
.form-inserimento h1{
									font-size: 5vw;
									}									
.form-inserimento h2{
									font-size: 3vw;
									}
.form-inserimento .inputbox, .inputbox_s, select{
																			font-size: 2.5vw;
																			}
.tab_servizi{
					width:100%;
					}
th, td, td input{
	font-size:1.6vw!important;
	}
th, th span{
	 word-wrap: break-word;
	}
	
}

/* Phone X landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape){

h1{ font-size:3vw;
	}	
	
p{
			font-size:1.5vw;
			}		

.head{
			height:14%;
			}				

.head .applogo{
						top: 2%;		
						left:2%;
						width:20%;
						max-width:300px;
						}

.head .clientlogo{
							top: 2%;		
							right:2%;
							width:30%;
							max-width: 400px;
							}

.areainterattiva, .areainterattiva-l{
						top:12%;
						padding-bottom:10%;
						width:90%; 
						}


						
.boxinterattivi{
						margin:7.5%;
						padding:2.5%;	
						width:13%;
						padding-top: 15%;
						}

.boxinterattivi h2 {
							    position: absolute;
    							top: 10%;
    							font-size: 2vw;
    						}		

.form-inserimento label{
										font-size:3vw;
										width:30%!important;
										}
.form-inserimento h1{
									font-size: 5vw;
									}									
.form-inserimento h2{
									font-size: 3vw;
									}
.form-inserimento .inputbox, .inputbox_s, select{
																			font-size: 2.5vw;
																			}
.tab_servizi{
					width:90%;
					}
}

/* iPad Retina */
@media only screen 
and (min-device-width : 768px) 
and (-webkit-device-pixel-ratio: 2){
	p{
			font-size:2vw;
			}					
	.boxinterattivi p {
		top: 75%;
		font-size:1.4vw;
	}
	
	.info{
		font-size: 1vw;
    	margin-left: 25%;
	}
	
	.head{
			height:8%;
			}
	
	.head .applogo{
						top: 1%;
    					left: 3%;
    					width: 15%;
    					max-width: 300px;
						}

	.head .clientlogo{
							top: 2%;		
							right:3%;
							width:10%;
							max-width: 200px;
							}

	.areainterattiva, .areainterattiva-l{
						top:12%;
						padding-bottom:10%;
						width:90%; 
						}
	
	.comunicazioni .logout{
						right:3%;
						bottom:2%;
						font-size:1vw;
						padding: 0 1% 0 1%;
						}	
.comunicazioni a{
				font-size:1.5vw;
				}

	
	
	
	
	
	
	
	
	.form-inserimento label{
										font-size:1.5vw;
										width:30%!important;
										}
	.form-inserimento h1{
									font-size: 3vw;
									}									
	.form-inserimento h2{
									font-size: 2vw;
									}
	.form-inserimento .inputbox, .inputbox_s, select{
													font-size: 1vw;	
													width: 30%!important;
													}
	
	.tab_servizi{
					width:100%;
					}
	
	td, td input, td span{
		font-size:2vw!important; 
	}
	
	th{
		font-size:1.4vw;
	}
	.euro::after{
		padding-top:0.8vw;
	}
	
	#tab_margini_netti th, #tab_margini_netti td{
		width:10%!important;
	}
	#tab_margini_netti .nome_servizio, #tab_collaboratori .nome_servizio{
		width:20%!important;
	}
	
	#tab_collaboratori th, #tab_collaboratori td{
		width:10%!important;
	}
	#tab_indici_generali th, #tab_indici_generali td{
		width:12%!important;
	}
	.alto{
		line-height:5vw;
	}
	
	#usr_act{
		    height: 2.4vw;
    		float: left;
    		margin-left: 15%;
	}
	
	
	
}



@media only screen 
and (min-device-width : 768px) 
and (-webkit-device-pixel-ratio: 2)
and (orientation : landscape){

	.head{
			height:12%;
			}	
						
	.boxinterattivi{
						margin:5%;
						padding:2.5%;	
						width:10%;
						padding-top: 12%;
						}

	.boxinterattivi h2 {
							    position: absolute;
    							top: 8%;
    							font-size: 1.3vw;
    						}	
	
}

@media only screen 
and (min-device-width : 768px) 
and (-webkit-device-pixel-ratio: 2)
and (orientation : portrait){

.head{
			height:8%;
			}	
						
.boxinterattivi{
						margin:5%;
						padding:2.5%;	
						width:13%;
						padding-top: 15%;
						}

.boxinterattivi h2 {
							    position: absolute;
    							top: 10%;
    							font-size: 2vw;
    						}	
}

/* SCHERMO PC */

@media only screen 
and (min-device-width : 0px) 
and (max-device-width : 5000px)
and (-webkit-device-pixel-ratio: 1)
{
p{
			font-size:1.2vw;
			}					

.head .applogo{
						top: 2%;		
						left:2%;
						width:12%;
						max-width:300px;
						}

.head .clientlogo{
							top: 2%;		
							right:2%;
							width:20%;
							max-width: 400px;
							}

.areainterattiva, .areainterattiva-l{
						top:12%;
						padding-bottom:10%;
						width:90%; 
						}

.head{
			height:12%;
			}	
						
.boxinterattivi{
						margin:5%;
						padding:2.5%;	
						width:10%;
						padding-top: 12%;
						}

.boxinterattivi h2 {
							    position: absolute;
    							top: 8%;
    							font-size: 1.3vw;
    						}	

	
.comunicazioni{
						    position: fixed;
						    left:0;
   							bottom: 0;
  							height: 5%;
 							width: 100%;
							font-size: 1.4vw;
    						background-color: rgba(0,0,0,.90);
    						border: solid 1px black;
    						padding-left: 5%;
    						padding-right: 5%;
    						color: white;
    						z-index: 100;
							}
.comunicazioni .logout{
						position: fixed;
						right:5px;
						bottom:5px;
						color:white;
						z-index:105;
						font-size: 1.4vw;
    					background-color: rgba(0,0,0,.90);
    					border: solid 1px white;
						}




.form-inserimento label{
										font-size:1.2vw;
										width:30%!important;
										}
.form-inserimento h1{
									font-size: 1.7vw;
									}									
.form-inserimento h2{
									font-size: 1.4vw;
									}
.form-inserimento .inputbox, .inputbox_s, select{
																			font-size: 1.2vw;
																			}
.tab_servizi{
					width:100%;
					}
}