@import url('https://fonts.googleapis.com/css?family=Manrope&display=swap');

body, ul, li {
	font-size:14px; 
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	text-align:left;
}

#menu {
	list-style:none;
	width:1050px; /* modificato perchè aggiunta una voce di menu - gabriella */
	margin:0px auto 0px auto;
	height:37px;
	padding:0px 0px 0px 0px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 0px solid #fff;
}

#menu li {
	float:left;
	display:block;
	text-align:center;
	position:relative;
	padding: 4px 5px 4px 5px;
	margin-right:8px;
	margin-top:7px;
	border: 0px solid #ff8520;
}

#menu li:hover {
	/*padding: 4px 5px 10px 7px;*/
	padding: 4px 5px 4px 5px;
	/*-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;*/
}

#menu li a {
	font-family:Arial, Helvetica, sans-serif, Manrope;
	font-size:16px;  /* modificato perchè aggiunta una voce di menu - gabriella */
	font-weight:bold;
	color: #FFFFFF;
	display:block;
	outline:0;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;
	
	-moz-transition:color 0.3s ease-out;
	-webkit-transition:color 0.3s ease-out;
	-o-transition:color 0.3s ease-out;
	transition:color 0.3s ease-out;
}

#menu li:hover a {
	color:#ff6600;
	text-shadow: 1px 1px 1px #000;
}
#menu li .drop {
	padding-right:20px;
	background:url("/images/new/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
	background:url("/images/new/drop2.png") no-repeat right 7px;
}

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
	margin:2px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:10px 5px 10px 5px;
	border:2px solid #ff6600;
	/*border-top:none;*/
	background: #000000 url(/images/new/fbg_bg.gif) repeat-x;
	z-index: 10000;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 10px 10px 5px #333333;
	
	opacity: 0;
        transition: opacity .30s ease-in-out;
        -moz-transition: opacity .30s ease-in-out;
        -webkit-transition: opacity .30s ease-in-out;
	
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 360px;}
.dropdown_3columns {width: 550px;}
.dropdown_4columns {width: 610px;}
.dropdown_5columns {width: 700px;}


#menu .dropdown_2columns h5, .dropdown_3columns h5, .dropdown_5columns h5 {
  font-family:Arial, Helvetica, sans-serif;
	color:#4dbbee;
	font-size:19px;
	margin:7px 0 5px 6px;
	padding-bottom:7px;
	text-align:left;
	text-shadow: 1px 1px 1px #000;
	line-height:15px;
}

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
	left:-1px;
	top:auto;
	opacity: 1;

}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}
.col_1 {width:160px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

#menu .menu_right {
	float:right;
	margin-right:0px;
}
#menu li .align_right {
	-moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
	left:auto;
	right:-1px;
	top:auto;
}
#menu li:hover .align_center {
	left:auto;
	right:-145px;
	top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	font-size:12px;
	text-align:left;
	text-shadow: 1px 1px 1px #000;
}
#menu h2 {
	font-size:21px;
	font-weight:400;
	letter-spacing:-1px;
	margin:7px 0 14px 0;
	padding-bottom:14px;
	border-bottom:1px solid #666666;
}
#menu h3 {
	color:#ff6600;
	font-size:18px;
	margin:7px 0 5px 0;
	padding-bottom:7px;
	border-bottom:1px solid #888888;
}
#menu h4 {
  font-family:Arial, Helvetica, sans-serif;
	color:#ff6600;
	font-size:18px;
	margin:7px 0 5px 0;
	padding-bottom:7px;
	text-align:left;
	text-shadow: 1px 1px 1px #000;
	line-height:21px;
}


#menu p {
	line-height:18px;
	margin:0 0 10px 0;
}

#menu li:hover div a {
	font-size:12px;
	color:#4dbbee;
}
#menu li:hover div a:hover {
	color:#ff6600;
}


.strong {
	font-weight:bold;
}
.italic {
	font-style:italic;
}



.img_left { /* Image sticks to the left */
	width:auto;
	float:left;
	margin:5px 15px 5px 5px;

}

#menu li .black_box {
	background-color:#333333;
	color: #4dbbee;
	text-shadow: 1px 1px 1px #000;
	padding:4px 6px 4px 6px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	-webkit-box-shadow:inset 0 0 3px #000000;
	-moz-box-shadow:inset 0 0 3px #000000;
	box-shadow:inset 0 0 3px #000000;
}

#menu li ul {
	list-style:none;
	padding:0;
	margin:0 0 12px 0;
}
#menu li ul li {
	font-size:12px;
	line-height:24px;
	position:relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding:0;
	margin:0;
	float:none;
	text-align:left;
	width:130px;
}
#menu li ul li:hover {
	background:none;
	border:none;
	padding:0;
	margin:0;
}

#menu li .greybox li {
	
	border:1px solid #666;
	margin:0px 0px 4px 0px;
	padding:4px 6px 4px 6px;
	width:150px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
#menu li .greybox li:hover {
	border:1px solid #aaaaaa;
	padding:4px 6px 4px 6px;
	margin:0px 0px 4px 0px;
}


/* RESPONSIVE MENU */
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    border-bottom:1px solid #666;
    position: relative; 
    z-index: 10;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
    border-bottom:1px solid #666;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}


/* When the screen is less than 768 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:768px) {
  #menu{display:none;}
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:768px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}



@media screen and (min-width: 769px) {
	/*#menu{display:none;}*/
	ul.topnav{display:none;}
}