/* @override 
	http://127.0.0.1/SitiPicov/Italiani/www.italianisrl.com/_templates/italiani_template/css/layout_italiani.css */


/* @group base fonts families override */
html,
.elf .elf-font-main,
.elf.elf-font-main {
	font-family: 'Montserrat', sans-serif;
}

.elf .elf-font-alt,
.elf elf-font-alt {
	font-family: 'Montserrat Alternates', sans-serif;
}

.elf .elf-font-labels,
.elf.elf-font-labels {
	font-family: "Open Sans";
}


.elf .elf-font-labels-alt,
.elf.elf-font-labels-alt {
	font-family: "Courier";
}

/* @end */


body {
	background-color: #f8e9da;
}

a {
	color: #239de9
}

#wrapper {
	width: 100%;
}

#main {
	width: 96%;
	max-width: 1600px;
	margin: 0px auto;
	margin-top: 16px;
	background-color: #fff;
	box-shadow: 0px 3px 9px #844;
}

#header {
	padding: 32px;
}

#header-inside {
	position: relative;
	height: 74px;
	border-bottom: 1px solid #ccc;
}


#headerlinks {
}

#language-switcher {

}

#header-sx {
	position: absolute;
	left: 0;
	bottom: 4px;
}
#header-dx {
	position: absolute;
	right: 0;
	bottom: 0;
}

#mainmenu ul {
	margin-bottom: 0;
}


#header-home {
	padding: 32px;
}

#header-home-inside {
}

#header-sx-home {
	width: 100%;
	margin-top: -30px;
	overflow: hidden;
	text-align: center;
}
#header-sx-home img {
	width: 100%;
	height: auto;
	margin-left: -400px;
	margin-right: -400px;
	min-width: 500px;
	max-width: 800px;
}


#header-dx-home {
	text-align: center;
	margin-bottom: 40px;
	padding-top: 30px;
}
#header-dx-home ul {
	border-bottom: 1px solid #ccc;	
}
#header-dx-home ul li {
	float: none;
	display: inline-block;
}


#header-bannerarea {
}
#bannerarea-container {
}
#header-bannerarea .topbannerimage {
}


#navpath {
	padding-left: 20px;
	padding-bottom: 10px;
}


#body-content-head {
}

.body-bg-top {
	clear: both;
	width: 100%;
	float: left;
}
.body-bg-middle {
	clear: both;
	width: 100%;
	float: left;
	background1: url(../img/bg_body_colsdivider_singleline.gif) repeat-y;
	background-position: 27%;
	margin-top: 16px;
	margin-bottom: 16px;
}
.body-bg-bottom {
	width: 100%;
	clear: both;
	float: left;
	background1: url(../img/bg_body_colsdivider_singleline.gif) repeat-y;
	background-position: 73%;
}

#body { 
	width: 100%;
	float: left;
}

#body-full {
padding-left: 30px;
padding-right: 30px;
}
#body-full .inside {
	margin-left1: 5%;
	margin-right1: 5%;
}

#body-left {
	width: 240px;
	float: left;
}
#body-left .inside {
	padding: 0px;
	margin-left: 32px;
	margin-right: 16px;
}

#body-right {
	width: 27%;
	float: right;
}
#body-right .inside {
	margin-right: 42px;
	margin-left: 16px;
}

#body-center {
	margin-left: 240px;
	margin-right: 16px;
}
#body-center .inside {
	padding: 0;
	margin-left: 16px;
	margin-right: 16px;
	/* IMP FIX IE6 ONLY (3px gap bug) */
	/* float1: left; IMP FIX 3 px GAP IE 6*/
	/* width1: 100%: IMP FIX 3 px GAP IE 6*/
}


/* Sovrascrivo le impostazioni per il template della sezione */
/*.hometemplate-content #body-left {
	width: 0%;
}
.hometemplate-content  #body-right {
	width: 0%;
}
.hometemplate-content #body-center {
	margin-left: 5%;
	margin-right: 5%;
}*/


#home-category-buttons {
	margin: 0 auto;
	max-width: 1200px;
}

.home-category-button {
	position: relative;
	overflow: hidden;
}

.home-category-button a {
	font-size: 15px;
	color: #fff;
	text-transform: uppercase;
}

.home-category-button img {
	box-sizing: border-box;
	border: 15px solid transparent;
}
.home-category-button.type-1 img {
	background-color: #eadac4;	
}
.home-category-button.type-2 img {
	background-color: #e4b27f;
}
.home-category-button.type-3 img {
	background-color: #2789be;
}

.home-category-button span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%, -50%); /* FIX IE 9 */	
	padding: 15px;
}

.home-category-button.type-1 span {
	background-color: #eadac4;
}
.home-category-button.type-2 span {
	background-color: #e4b27f;	
}
.home-category-button.type-3 span {
	background-color: #2789be;	
}

.home-category-button:hover img {
	box-sizing: content-box;
	border: 0;
}



#footer {
	clear: both;
	padding: 32px;
	padding-bottom: 0;
}

#footer-inside {
	min-height: 74px;
	border-top: 1px solid #ccc;
	padding-top: 16px;
	padding-bottom: 16px;
}

#footer p {
	text-align: center;
	line-height: 150%;
	font-size: 13px;
}

#footer strong {
	font-weight: bold;
}

#credits {
	/* display: none; Da riattivare al deploy*/
	float: right;
	width: 114px;
	margin-top: -52px;
	padding-right: 0px;
	/* background-color: red; */
	font-size: 0;
}
#credits img {
	padding-left: 8px;
}


#footer .social {
}




/* Sovrascrivo gli stili per la versione stampabile */
@media print {
	body {
		background-color: #fff;
		background: none;	
	}
}

/* Mobile device styles */
/*
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 */
#winsize {
	text-align: center;
	display: block;
	background-color: yellow;
	opacity: 1;	
	display: none;
}
#winsize::before {
	content: "Desktop - Large tablet";
}

#main {
	width1: 93%;
	max-width1: 950px;
}



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

@media (max-width: 768px) {

#winsize {
	background-color: lightblue;	
}
#winsize::before {
	content: "iPad 2 portrait - tablet portrait";
}

#main {
	/*width1: 94%;*/
}

#credits {
	/* display: none; Da riattivare al deploy*/
	float: none;
	margin: 0 auto;
	margin-top: 12px;
}
	
}

/* 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) {

#winsize {
	background-color: lightcoral;	
}
#winsize::before {
	content: "Phones landscape: 5 5S SE 6 6 Plus (no display zoom), 6s (no display zoom)";
}

#main {
	/*width1: 93%;*/
}
	
}

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

#winsize {
	background-color: lightslategrey;	
}
#winsize::before {
	content: "Phones: 4s landscape, 6 6S portrait";
}
#main {
	width1: 90%;
}


}

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

#winsize {
	background-color: lawngreen;	
}
#winsize::before {
	content: "Phones: 4S 5 5S SE portrait";
}
}





@media (max-width: 700px) {

#body-center {
	margin-left: 0;
	margin-right: 0;
}

#body-left {
	width: 100%;
	margin-bottom: 20px;
}


}