/* USER CONTROL */

/* * { border: 1px solid red; }*/ /* DEBUG */

/* Aggiunge il simbolo > prima della voce di menu */
/*.menu ul a:before { 
	content: '\203A';
	margin-right: 20px;
}*/

.menuCentrale{
    width:100%;
    text-align:center;

    border-top: 1px solid #FFF;  /*#E0E0E0 - BORDO MENU TOP*/
    border-bottom: 1px solid #FFF;  /*#E0E0E0 - BORDO MENU BOTTOM*/
}

.menu .sub-arrow:after {
	content: '\203A';
	float: right;
	margin-right: 10px;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}

.menu li:hover .sub-arrow:after {
	content: '\2039';
}

.menu ul li, .menu ul ul li {
	/*border-bottom:1px solid #555;*/ /* mette un bordo ad ogni voce del menu*/
}

/* LIVELLO 00 */
.menu {
    margin: 0 auto; /* auto - Centra il container nella pagina */

    /*position:relative;*/
	/*width:100%;*/
	font-family:'Segoe UI', Verdana, Arial, Tahoma, Trebuchet MS;

    /*border-top: 1px solid #E0E0E0;*/  /*BORDO MENU TOP*/
    /*border-bottom: 1px solid #E0E0E0;*/  /*BORDO MENU BOTTOM*/

	background-color:#FFFFFF; /* colore sfondo menu - livello TUTTI */
}

.menu ul {
	list-style:none;
	position:relative;
    padding:0; /* top right bottom left */
    margin:0;

    z-index: 1001;
}

.menu a {
	padding:17px;
	display:block; /* dispone i blocchi uno di seguito all'altro */

	text-decoration:none;
	text-align:center; /* allineamento voci all'interno del menu*/

	color:#888; /* colore voci menu - livello TUTTI */
	background-color:#FFFFFF; /* colore sfondo menu - livello TUTTI - utile per la versione mobile, altrimenti le voci non hanno sfondo */

    /*font-size:11px;*/

	/*border: 1px solid black;*/
}

.menu a:hover {
	background-color:#FFFFFF; /* colore sfondo menu - livello TUTTI */
	color:#AC1A2F; /*RED*/ /*#555 ;*/

    /*font-size:11px;*/
}

/* LIVELLO 01 */
.menu ul ul li {
	float:none; /*posizione le voci in verticale - livello 01*/
	/*border-bottom:3px solid #555;*/
}

.menu ul ul li a {
	/*background-color:#444;*/ /*[facoltativo] colore di sfondo del livello 01*/
    color:#888;
}

label[for="bt_menu"]{
	padding:5px;
	background-color:#FFFFFF;
	color: #888;
	font-family: 'Segoe UI', Verdana, Arial, Tahoma, Trebuchet MS;
	text-align:center;
	font-size:30px;
	cursor:pointer;
    border-top: 1px solid #FFF;  /*#E0E0E0 - BORDO MENU TOP*/
    border-bottom: 1px solid #FFF;  /*#E0E0E0 - BORDO MENU BOTTOM*/
	/*width:30px;
	height:30px;*/
}
#bt_menu {
	display:none; /*rende il checkbox invisibile*/
}
#menuPhone {
    width:100%;
    text-align: left; /* allineamento della scritta MENU (phone) */
    padding: 13px 0px 13px 0px; /* spazio tra scritte e bordo - top, right, bottom, left  */
}

/* DESKTOP */
@media only screen and (min-width:1200px) {
	label[for="bt_menu"], #menuPhone {
		display:none;
	}

    .menu {
        width:1200px;
        height:51px; /* altezza riga menu - livello 00*/
    }

	/* LIVELLO 00 */
	.menu ul li {
		width:170px; /*larghezza voci menu*/
		float:left; /*posiziona in linea orizzontale le voci del menu*/
	}


	/* LIVELLO 01 */
	.menu ul ul {
		position:absolute; 
		visibility:hidden; /*rende invisibile il livello 01 del muenu*/

        -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); /* OMBRA */
	    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); /* OMBRA */
	    box-shadow: 0 3px 3px rgba(0,0,0,0.2); /* OMBRA */
	}
	.menu ul li:hover ul {
		visibility:visible; /*rende invisibile il livello 01 del muenu*/
	}
}

/* TABLET */
@media only screen and (min-width:767px) and (max-width:1199px) {
	label[for="bt_menu"], #menuPhone {
		display:none;
	}

    /* LIVELLO 00 */
    .menu {
        width:100%;
        height: 64px; /* altezza riga menu - livello 00*/
    }
	.menu ul li {
		float:left; /*posiziona in linea orizzontale le voci del menu*/
	}

	/* LIVELLO 01 */
	.menu ul ul {
		position:absolute; 
		visibility:hidden; /*rende invisibile il livello 01 del muenu*/

        -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); /* OMBRA */
	    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); /* OMBRA */
	    box-shadow: 0 3px 3px rgba(0,0,0,0.2); /* OMBRA */
	}
	.menu ul li:hover ul {
		visibility:visible; /*rende invisibile il livello 01 del muenu*/
	}
}
/* TABLET - VERTICALE*/
@media only screen and (min-width:767px) and (max-width:1024px) and (orientation: portrait) 
{
    /* LIVELLO 00 */
	.menu ul li {
		width:103px; /*larghezza voci menu*/
	}
}
/* TABLET - ORIZZONTALE*/
@media only screen and (min-width:767px) and (max-width:1024px) and (orientation: landscape) 
{
	/* LIVELLO 00 */
	.menu ul li {
		width:140px; /*larghezza voci menu*/
	}
}

/* MOBILE */
@media only screen and (min-width:300px) and (max-width:767px) {
    #menuPhone {
        display:block;
    }
    label[for="bt_menu"] {
		display:inline;
        float:right;
        vertical-align:middle;
	}
	#bt_menu:checked ~ .menu{
		/*margin-left: 0px;*/   /* animazione 01 - se la checkbox risulta selezionata allora il margine va a 0px */
		/*visibility:visible;*/ /* animazione 02 - rende il menu visibile mantenendo lo spazio del menu */
		display:block;			/* animazione 03 - rende il menu visibile aggiungendo il relativo spazio */
	}
	.menu {
		/*margin-top:1px;*/     /* distanza tra MENU Phone e menu dinamico */
		/*margin-left: -100%;*/ /* animazione 01 - se la checkbox non risulta selezionata allora il margine va a -100% */
		/*visibility:hidden;*/	/* animazione 02 - rende il menu invisibile mantenendo lo spazio del menu */
		display:none;			/* animazione 03 - rende il menu invisibile eliminando il relativo spazio */
		transition:all .4s;
	}


	/* LIVELLO 00 */
	.menu ul li {
		width:100%; /*larghezza voci menu*/
		float:none; /*posiziona in linea orizzontale le voci del menu*/
	}
    .menu ul li, .menu ul ul li {
	    border:1px solid #FFF;  /*#E0E0E0 - mette un bordo ad ogni voce del menu*/
    }


	/* LIVELLO 01 */
	.menu ul ul {
		position:static;
		overflow:hidden;
		max-height:0;
		transition:all .4s;
	}
	.menu ul li:hover ul {
		height:auto;
		max-height:200px;
	}
    .menu ul ul li {
        background-color: #FFF;  /*#E0E0E0*/
    }
}