/* Universal mobile media queries */
@media	only screen and (max-width: 1024px),
		only screen and (-webkit-min-device-pixel-ratio: 2),
		only screen and (-o-min-device-pixel-ratio: 20/10),
		only screen	and (min-device-pixel-ratio: 2){
	#sfondo01{
		width: 100% !important;
	}	
	#impianto1,
	#impianto2,
	#impianto3,
	#impianto4{
		width: 100% !important;
		position: relative !important;
		left: 0 !important;
		top: auto !important;
		height: auto !important;
	}
		
		
	#logo,
	#indirizzo,
	#login{
		position: relative !important;
	}
	#logo,
	#logo img{
		width: 100% !important;
		height: auto !important;
	}
	#login,
	#indirizzo{
		top: 0 !important;
		left: 0 !important;
		margin: 0 auto;
	}
	#indirizzo{
		width: auto !important;
		height: auto !important;
	}	
	#login{
		width: auto !important;
	}
	#webcamimg{
		display: none;
	}
	#webcamimg1{
		display: block !important;
	}
	
	
	
	
	.login_box{
		width: 90% !important;
		margin-top: 0 !important;
	}
	.login_input{
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}













/*  Retina media query.
    Overrides styles for devices with a 
    device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */
@media	only screen and (-webkit-min-device-pixel-ratio: 2),
		only screen and (-o-min-device-pixel-ratio: 20/10),
		only screen	and (min-device-pixel-ratio: 2){
	#testoimpianto1,
	#testoimpianto2,
	#testoimpianto3,
	#testoimpianto4,
	#linkimpianto1 a,
	#linkimpianto2 a,
	#linkimpianto3 a,
	#linkimpianto4 a,
	.testocol,
	.testobia,
	.testo,
	.testo span,
	.testo a,
	.login_box,
	.login_box a,
	.login_input{
		font-size: 17px;
		line-height: 36px;
	}
}






/* phone portrait (real resolution / device-pixel-ratio is considered) (used by IPhone (???)) */
@media only screen and (max-width: 319px) {
	#testoimpianto1,
	#testoimpianto2,
	#testoimpianto3,
	#testoimpianto4,
	#linkimpianto1 a,
	#linkimpianto2 a,
	#linkimpianto3 a,
	#linkimpianto4 a,
	.testocol,
	.testobia,
	.testo,
	.testo span,
	.testo a,
	.login_box,
	.login_box a,
	.login_input{
		font-size: 10px;
		line-height: 18px;
	}
	#login {
		text-align: center !important;
	}
	#indirizzo {
		text-align: center !important;		
	}
}







/* phone portrait (real resolution / device-pixel-ratio is considered) (used by IPhone (???)) */
@media only screen and (min-width: 320px) and (max-width: 479px)  {
	#testoimpianto1,
	#testoimpianto2,
	#testoimpianto3,
	#testoimpianto4,
	#linkimpianto1 a,
	#linkimpianto2 a,
	#linkimpianto3 a,
	#linkimpianto4 a,
	.testocol,
	.testobia,
	.testo,
	.testo span,
	.testo a,
	.login_box,
	.login_box a,
	.login_input{
		font-size: 13px;
		line-height: 24px;
	}
	#login {
		text-align: center !important;
	}
	#indirizzo {
		text-align: center !important;	
		margin-bottom: 30px;	
		line-height: 18px;
	}
	#indirizzo a {
		line-height: 18px;		
	}
	.testobia a {
		line-height: 24px !important;
	}
}





/* phone landscape (real resolution / device-pixel-ratio is considered) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#testoimpianto1,
	#testoimpianto2,
	#testoimpianto3,
	#testoimpianto4,
	#linkimpianto1 a,
	#linkimpianto2 a,
	#linkimpianto3 a,
	#linkimpianto4 a,
	.testocol,
	.testobia,
	.testo,
	.testo span,
	.testo a,
	.login_box,
	.login_box a,
	.login_input{
		font-size: 17px;
		line-height: 24px;
	}
	#login {
		text-align: center !important;
	}
	#indirizzo {
		text-align: center !important;	
		margin-bottom: 30px;	
	}
	.testobia a {
		line-height: 38px !important;
	}
}





/* tablet portrait + landscape (real resolution / device-pixel-ratio is considered) (used by IPad both portrait and landscape) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	#testoimpianto1,
	#testoimpianto2,
	#testoimpianto3,
	#testoimpianto4,
	#linkimpianto1 a,
	#linkimpianto2 a,
	#linkimpianto3 a,
	#linkimpianto4 a,
	.testocol,
	.testobia,
	.testo,
	.testo span,
	.testo a,
	.login_box,
	.login_box a{
		/*font-size: 25px;
		line-height: 60px;*/
		font-size: 15px;
		line-height: 26px;
	}
	#login {
		text-align: center !important;
	}
	#indirizzo {
		text-align: center !important;		
	}
	#loginbutton,
	.login_input{
		font-size: 40px;
	}
	/* 2 cols */
	#impianto1,
	#impianto2,
	#impianto3,
	#impianto4{
		width: 50% !important;
		float: left;
	}
	#indirizzo {
		position: relative !important;
		display: block;
		clear:both;
		float: none;
		margin: 0 auto 30px auto;
	}
}