/* Responsive text align */

/* @group Global Text Alignment */

/* Phone landscape and bigger */
@media (min-width: 480px) {
	.elf .elf-text-align-center\@s, 
	.elf.elf-text-align-center\@s {
		text-align: center
	}
	.elf .elf-text-align-left\@s,
	.elf.elf-text-align-left\@s {
		text-align: left
	}
	.elf .elf-text-align-right\@s,
	.elf.elf-text-align-right\@s {
		text-align: right
	}
	.elf .elf-text-align-justify\@s,
	.elf.elf-text-align-justify\@s {
		text-align: justify
	}
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
	.elf .elf-text-align-center\@m, 
	.elf.elf-text-align-center\@m {
		text-align: center
	}
	.elf .elf-text-align-left\@m,
	.elf.elf-text-align-left\@m {
		text-align: left
	}
	.elf .elf-text-align-right\@m,
	.elf.elf-text-align-right\@m {
		text-align: right
	}
	.elf .elf-text-align-justify\@m,
	.elf.elf-text-align-justify\@m {
		text-align: justify
	}
}
/* Desktop and bigger */
@media (min-width: 1280px) {
	.elf .elf-text-align-center\@l, 
	.elf.elf-text-align-center\@l {
		text-align: center
	}
	.elf .elf-text-align-left\@l,
	.elf.elf-text-align-left\@l {
		text-align: left
	}
	.elf .elf-text-align-right\@l,
	.elf.elf-text-align-right\@l {
		text-align: right
	}
	.elf .elf-text-align-justify\@l,
	.elf.elf-text-align-justify\@l {
		text-align: justify
	}
}
/* Large screen and bigger */
@media (min-width: 1600px) {
	.elf .elf-text-align-center\@xl, 
	.elf.elf-text-align-center\@xl {
		text-align: center
	}
	.elf .elf-text-align-left\@xl,
	.elf.elf-text-align-left\@xl {
		text-align: left
	}
	.elf .elf-text-align-right\@xl,
	.elf.elf-text-align-right\@xl {
		text-align: right
	}
	.elf .elf-text-align-justify\@xl,
	.elf.elf-text-align-justify\@xl {
		text-align: justify
	}
}



/* @override 
	http://127.0.0.1/SitiPicov/HomeInItaly/www.homeinitaly.com/_templates/homeinitaly_template_new/css/responsive-text.css */

/* Mobile device responsive text */
/*
Device logical resolution:
- iPhone <= 4S = 320x480
- iPhone 5, 5S, 6 (display zoom) = 320x568
- iPhone 6 Display Zoom = 375x667
- iPhone 6, 6 Plus (display zoom) = 375x667
- iPhone 6 Plus = 414x736
- iPad (all) = 768x1024
*/

/* 
NB: se imposto la viewport ad un valore fisso allora le queries scattano sempre a quel valore indipendentemente dal device perché con la viewport forzo la dimensione della finestra che imposta il browser (che è diversa dalla device-width) -> per far funzionare le queries successive devo impostare nell'HTML la viewport alla larghezza del device mettenno nell'head 
<meta name="viewport" content="width=device-width, initial-scale=1" />
altrimenti il dispositivo scala la pagina per riempire la propria viewport di default che è 980px
*/

/* Punto chiave per media queries -> devo sfruttare il cascading altrimenti in ogni range devo ripetere tutti gli stili -> al limite alla fine (così sovrascrive) faccio qualcosa selettivo usando il range */
/* SOLUZIONE:*/
/* Desktop down design -> uso max-width in modo che le impostazioni vanno a cascata scendendo di dimensione */
/* Mobile up design -> uso min-width in modo che le impostazioni vanno a cascata salendo di dimensione */
/* NB: max-width significa if (viewport-with<=max-width)

/* Desktop, Tablet landscape */
/* iPad 2/Air/Retina Landscape */

html1 {
	font-size: 16px; /* Default */
	font-size1: 1.2vw;
}



/* Tablet portrait (and below if not overwritten) */
/* iPad 2 portrait */

@media (max-width: 768px) {

html {
	font-size1: 2vw;
	font-size1: 18px;
}

}

/* Da qui in giù devo prendere tutti i telefoni perchè anche se la larghezza in pixel è poco diversa dal tablet, le dimensioni del dispositivo sono significativamente inferiori -> non devono ricadere nel caso precedente */
/* iPhone 5, 5S, 6 (display zoom) = 320x568 /* 
/* iPhone 6, 6 Plus (display zoom) = 375x667 */
/* iPhone 6S (no display-zoom) = 414x736
/* -> il phone landscape più largo = 736 -> uso questo altrimenti il 6S landscape rientrerebbe sopra */

/* iPhone 5/5S/6/6S Landscape */
@media (max-width: 736px) {

html {
	font-size1: 2.5vw; 
	font-size1: 16px;
}
	
}

/* iPhone 4S landscape (and below if not overwritten) */
/* iPhone 6/6S portrait */
@media (max-width: 480px) {

html {
	font-size1: 3.0vw;
	font-size1: 18px;
}

}

/* iPhone 4S,5,5S,SE portrait */
@media (max-width: 320px) {

html {
	font-size1: 3.5vw;
	font-size1: 12px;
}

}