/*
Item Name : Responsive Mega Menu Complete Set
Item URI : http://codecanyon.net/item/mega-menu-complete-set/152825
Author URI : http://codecanyon.net/user/Pixelworkshop
Version : 3.2
*/

/*

TABLE OF CONTENTS

01 MEGA MENU BAR
02 MEGA MENU CONTAINERS
03 DROP DOWN COLUMNS GRID
04 FLY-OUT MENU
05 MEGA MENU WEB ELEMENTS
   1. General Typography
   2. Lists
   3. Custom Paragraphs
   4. Video + Misc.
   5. Images
   6. Paragraph Icons
   7. Social Icons
   8. Form Elements
   9. Tables
06 DEFAULT THEMES, DARK & LIGHT (COMPULSORY)
   1. Dark Menu Bar
   2. Light Menu Bar
   3. Dark Drop Down
   4. Light Drop Down
   5. Neutral Colored Elements
      - Form Elements
      - Tables
07 ADDITIONAL THEMES (OPTIONNAL)
   1. Blue
   2. Brown
   3. Cherry
   4. Coffee
   5. Green
   6. Grey
   7. Ocean
   8. Orange
   9. Pink
   10. Purple
   11. Red
   12. Tan
   13. Yellow
08 VERTICAL MEGA MENU
09 MOBILE DEVICES
   1. Common Media Queries
   2. Horizontal Mega Menu Media Queries
   3. Vertical Mega Menu Media Queries

*/




/*
	Layout container
	The menu will automatically expand into your container.
	"page_wrapper" and "page_wrapper_vertical" are just used to show how the menu fits,
	those containers are not necessary, just put the menu into a container and it will
	fit exactly to its dimensions.
*/



/*  _______________________________________________

    01 MEGA MENU BAR
    _______________________________________________  */




.megamenu_container {
	width:100%;
	height: 46px;
	*height: 44px;
	margin:0 auto;
	/*position: relative; */


/*	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border-top:1px solid black;
	border-bottom:1px solid black;*/
	
}
/*.megamenu_container { left:-50%}
.megamenu_container ul{ position:relative; left:50%; }
.megamenu_container li{float:left;position:relative;}*/

.megamenu {
	list-style:none;
	padding:0;
	/*position:relative; /* For IE7 */
	margin:0;
	line-height:1;
/*	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;*/
	
}
.megamenu:not(.megamenulineare) {
	display: -webkit-box;/*safari*/
  -webkit-box-pack: center; /* justify-content safari*/
  -webkit-box-align: center; /* align-items safari */
	 flex-wrap: wrap;display: flex;align-items: center;justify-content: center;
}

.megamenu ul{
	 display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
    width: 100%;
}
	.megamenu > li {
		
		 width: 20%; /*safari*/
    	width: -webkit-calc(100% /5);
    	width: -moz-calc(100% /5);
    	width: calc(100% /5);
		margin:0; float:left;
		border:none;
		-webkit-transition: background 0.5s ease;
		-moz-transition: background 0.5s ease;
		-o-transition: background 0.5s ease;
		-ms-transition: background 0.5s ease;
		transition: background 0.5s ease;
		
	}
		.megamenu > li > a {
			text-transform:uppercase;
			outline:0;
			text-decoration:none;
			display:block; 
			text-align:center; padding: 16px 0px 16px 0px; 
			/*padding: 16px 0px 17px 0px; mettere a 17 se deve scomparire la barra al rollover*/
		}
		.megamenulineare > li > a {
			text-align:left; padding: 16px 0px 16px 35px; 
		}
		.megamenulineare > li > div a { line-height:30px;}
		
		.megamenu > li .megamenu_drop {
			/*padding-right:30px; serve solo per quando ci voglio mettere le freccine a destra del menu*/
			
		}
		.megamenu li.megamenu_button {
			display: none;
			-webkit-transition: none;
			-moz-transition: none;
			-o-transition: none;
			-ms-transition: none;
			transition: none;
			
		}

		/* Right aligned menu item */
		
		.megamenu li.megamenu_right {
			float:right;
			margin-right:-1px;
		}
		.megamenu li.megamenu_right a {
			margin-right:5px;
		}

		


/*  _______________________________________________

    02 MEGA MENU CONTAINERS
    _______________________________________________  */




.megamenu li .dropdown_container,
.megamenu li .dropdown_mediowidth,
.megamenu li .dropdown_fullwidth,
.megamenu li .dropdown_multilevel {
	position: absolute;
	margin:0;
	padding-top:10px;
	padding-bottom:10px;
	left:-9999em;
	top:-9999em;
	/*display: block;*/ visibility:hidden;
	zoom:1;
	z-index:98;
	float: left;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
	transition: position 0.1s ease;
	
	
}


.megamenu li .dropdown_first {
	margin-left:-1px;
}
.megamenu li .droplast_right {
	margin-right:-1px;
}

/* Showing Drop Down on Mouse Hover */
.dropdown_fullwidth ,.dropdown_mediowidth , .dropdown_container {
	visibility: visible;
  opacity: 0;
  transition-property: visibility, opacity ;
  transition-duration: 0s, .2s;
    transition-timing-function: ease, ease-in;
    transition-delay: 0s, .5s;
	transition:visibility 0.9s; 
}
.megamenu li .dropdown_container {
left: 50%; top: auto;
}

.megamenu li:hover .dropdown_container {
 visibility: visible;
 
  opacity: 1;
  transition-delay:.9s

}

.megamenu li:hover .dropdown_fullwidth, .megamenu li:hover .dropdown_mediowidth, .megamenu li:hover .dropdown_container {
	top:45px;
	 visibility: visible;
  opacity: 1;
 transition-property: visibility, opacity ;
    -webkit-transition:visibility 0.9s;
	-moz-transition:visibility  0.9s;
	-o-transition:visibility 0.9s;
	-ms-transition:visibility 0.9s;
	transition:visibility 0.9s;
	 transition-delay:.3s;/*tempo di risposta del menu*/
	
}
/*.megamenu li:not(:hover) .dropdown_fullwidth, .megamenu li:not(:hover) .dropdown_mediowidth, .megamenu li:not(:hover) .dropdown_container {    -webkit-transition:visibility 0.9s;
	-moz-transition:visibility  4s;
	-o-transition:visibility 4s;
	-ms-transition:visibility 4s;
	transition:visibility 4s;
}*/
.megamenu li:hover .dropdown_fullwidth, .megamenu li:not(#saldihover):hover .dropdown_mediowidth {
	left:-1px;
}
.megamenu #saldihover:hover .dropdown_mediowidth  { left:auto;right:-1px }

.megamenu li .dropdown_right {
	right:0;
}
.megamenu li:hover .dropdown_right {
	top:45px;
	left:auto;
	right:0;
}




/*  _______________________________________________

    03 DROP DOWN COLUMNS GRID
    _______________________________________________  */


.megamenu .col_1,
.megamenu .col_2,
.megamenu .col_3,
.megamenu .col_4,
.megamenu .col_5,
.megamenu .col_6,
.megamenu .col_7,
.megamenu .col_8,
.megamenu .col_9,
.megamenu .col_10,
.megamenu .col_11,
.megamenu .col_12 {
	float: left;
	display:inline;
	position: relative;/* white-space:nowrap;overflow: hidden; text-overflow: ellipsis;*/
/*	margin-left: 2%;
	margin-right: 2%;
	 
	Rounding error with IE7.
	Lower margin values will absorb the difference.
	*/
	margin-left: 1.9%;
	margin-right: 1.9%;
}

.megamenu .col_1 {width:4.33%;}
.megamenu .col_2 {width:12.66%;margin-right: 1.6%;}
.megamenu .col_3 {width:21%;}
.megamenu .col_4 {width:29.33%;}
.megamenu .col_5 {width:37.66%;}
.megamenu .col_6 {width:46%;}
.megamenu .col_7 {width:54.33%;}
.megamenu .col_8 {width:62.60%;}
.megamenu .col_9 {width:71%;}
.megamenu .col_10 {width:79.33%;}
.megamenu .col_11 {width:87.66%;}
.megamenu .col_12 {width:96%;}
.megamenulineare .col_2 {width:auto;margin-right: 0; }

.megamenu .rowcontent {
	clear:left;
	/*
	IE7 clear issue.
	Display inline required.
	*/
	*display:inline;
}


.megamenu .col_4.last { margin-right:1.8%; }
.megamenu .col_5.last { margin-right:1.8%; }
.megamenu .col_6.last { margin-right:1.8%; }
/*  _______________________________________________

    04 FLY-OUT MENU
    _______________________________________________  */




.megamenu .dropdown_flyout, 
.megamenu .dropdown_flyout .dropdown_flyout_level {
	padding: 0;
	margin: 0;
	list-style: none;
	z-index: 9;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.megamenu .dropdown_flyout li {
	float: left;
	width: 92%;
	padding: 3px 4% 3px 4%;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}
.megamenu .dropdown_flyout ul li {
	width: 140px;
	padding: 3px 10px 3px 10px;
}
/*.megamenu .dropdown_flyout a {
	display: block;
	width: 10em;
}*/
.megamenu .dropdown_flyout .dropdown_flyout_level {
	position: absolute;
	margin:15px 0 0 4px;
	padding:6px;
	left: -9999em;
	top:-9999em;
	display: block;
	zoom:1;
	float: left;
}
.megamenu .dropdown_flyout li:hover > .dropdown_flyout_level {
	left:95%;
	top:-21px;
}
.megamenu .dropdown_flyout li:hover > .dropdown_flyout_level_left {
	left:-108%;
	right:100%;
}



.megamenu > li > div a {
	text-decoration: none;
	outline: none;
}
.megamenu > li > div a:hover {
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	-ms-transition: color 0.3s;
	transition: color 0.3s;
}
.megamenu p {
	font-size:12px; 
	line-height:21px; 
}



.megamenu li ul,
.megamenu li ol {
	padding:0;
	margin:0 0 18px 20px;
}
.megamenu li ul {
	list-style:disc;
}
.megamenu li ol {
	list-style:decimal;
	*margin-left: 22px;
}
	.megamenu li ul li,
	.megamenu li ol li {
		font-size:12px;
		line-height:21px; 
		position:relative;
		padding:0;
		margin:0;
		float:none;
		text-align:left;display:contents;width:100%;
	}
.megamenu li .list_unstyled {
	list-style: none;
	margin-left:0;
}



.megamenu img {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity:0.7;
	-webkit-transition: opacity 0.3s ease-in-out; 
	-moz-transition: opacity 0.3s ease-in-out; 
	-o-transition: opacity 0.3s ease-in-out; 
	-ms-transition: opacity 0.3s ease-in-out; 
	transition: opacity 0.3s ease-in-out;  
}
.megamenu img:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity:1;
	-webkit-transition: opacity 0.3s ease-in-out; 
	-moz-transition: opacity 0.3s ease-in-out; 
	-o-transition: opacity 0.3s ease-in-out; 
	-ms-transition: opacity 0.3s ease-in-out; 
	transition: opacity 0.3s ease-in-out;  
}




.megamenu_dark_bar {
	background: #212121;
	background: -webkit-linear-gradient(top,#333333 0%,#181818);
	background: -moz-linear-gradient(top,#333333 0%,#181818);
	background: -o-linear-gradient(top,#333333 0%,#181818);
	background: -ms-linear-gradient(top,#333333 0%,#181818);
	background: linear-gradient(top,#333333 0%,#181818);	
	-webkit-box-shadow:inset 0px 0px 2px rgba(40,40,40,0.7);
	-moz-box-shadow:inset 0px 0px 2px rgba(40,40,40,0.7);
	box-shadow:inset 0px 0px 2px rgba(40,40,40,0.7);
}
.megamenu_dark_bar .megamenu {
	color:#FFFFFF;
}
	.megamenu_dark_bar .megamenu > li:hover, 
	.megamenu_dark_bar .megamenu > li.active {
		background: #121212;
		-webkit-box-shadow:inset 0px 3px 6px rgba(0,0,0,0.2);
		-moz-box-shadow:inset 0px 3px 6px rgba(0,0,0,0.2);
		box-shadow:inset 0px 3px 6px rgba(0,0,0,0.2);
	}
	.megamenu_dark_bar .megamenu li.noactive {
		background:none;
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		box-shadow:none;
	}
	.megamenu_dark_bar .megamenu > li > a {
		color:#FFFFFF;
		text-shadow:1px 1px 1px #000000;
	}
	.megamenu_dark_bar .megamenu > li:hover > a {
		color:#FFFFFF;
		text-shadow:1px 1px 1px #000000;
	}

.megamenu_light_bar .megamenu {
	color: #212121;
}
.megamenu_light_bar .active span {font-weight:bold;  border-bottom:1px solid #666;  }
.megamenu_dark_bar .active span { border-bottom:1px solid #fff;  }
.megamenu_light_bar .megamenu li.noactive {
	background: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.megamenu_light_bar .megamenu > li > a {
	color: #212121;
}
.megamenu_light_bar .megamenu > li:hover > a {
	color: #212121;
}


/* questa parte di codice decide il comportamento hover del box interno */
.megamenu_light  .dropdown_container, .megamenu_light  .dropdown_fullwidth, .megamenu_light  .dropdown_mediowidth {
	margin: 0 1px;
	color: #000;
	text-transform:uppercase;

	}


.megamenu_dark .megamenu li ul li:hover, .megamenu_dark .megamenu li ol li:hover {
	margin: 0 1px;
	color: #fff;
	text-decoration:underline;
} 

.megamenu_dark .megamenu li .dropdown_container,
.megamenu_dark .megamenu li .dropdown_fullwidth,
.megamenu_dark .megamenu li .dropdown_mediowidth,
.megamenu_dark .megamenu li .dropdown_flyout li ul {
	font-weight:normal;
	border:0px solid #CCCCCC;
	border-top-width: 0;
	background:#333;/* sfondo*/
	color: #eee; /* contenitore del dropdown*/
	/*margin-top:2px;*/
	z-index:9999; width:500px;

}
.megamenu_dark .megamenu li .dropdown_fullwidth {width:100%; }
.megamenu_dark a:link { color:#aaa}
.megamenu_dark a:visited { color:#aaa}
.megamenu_dark a:hover { color:#fff}
.megamenu_dark .megamenu p, 
.megamenu_dark .megamenu h1, 
.megamenu_dark .megamenu h2, 
.megamenu_dark .megamenu h3, 
.megamenu_dark .megamenu h4, 
.megamenu_dark .megamenu h5, 
.megamenu_dark .megamenu h6 {
	color: #ccc;
		border-bottom:1px solid #ccc;
}
.megamenu_light .megamenu h4 a:link{ color:#000 ; font-weight:300; }
.megamenu_light .megamenu h4 a:visited{ color:#000 }

.megamenu_light .megamenu h2 {
	color: #eba00f;
	text-shadow: none;
	font-size: 1.2em;
	/*font-family: "sansationregular";*/
	padding: 0 0 2px 0;
}
.megamenu_light .megamenu p {
	color: #000;
	font-size: 0.87em;
	margin: 0 0 8px;
	padding: 0;
	line-height: 15px;
}



/*mettere questa classe dropdown_container per il menu più piccolo*/
.megamenu_light .megamenu li .dropdown_container
 {
	font-weight:normal;
	border-top-width: 0;
	/*margin-top:2px;*/
	z-index:9999;
	/*width: 40vw;*/
	background-color:#FFF;
}

/*.dropdown_fullwidth .containercentrale .megamenu > li {
		position:relative
		
	}*/

.dropdown_fullwidth .containercentrale {max-width:1220px; margin:0 auto;display: -webkit-box;/*ios*/
-webkit-box-orient: horizontal;
    display: flex; justify-content: center; }
.dropdown_mediowidth  .containercentrale {max-width:1220px; margin:0 auto;display: -webkit-box;/*ios*/
-webkit-box-orient: horizontal;
   display: flex;  justify-content: center; } /*è quello che mi tiene al centro il menu da commentare per il menu normale*/
/*mettere questa classe dropdown_fullwidth per il menu al 100%*/

.megamenu_light .megamenu li .dropdown_mediowidth {
	font-weight:normal;
	border-top-width: 0;
	z-index:9999;
	width: 300%;/*safari*/
	width: 40vw;
	background-color:#FFF;
}

.megamenu_light .megamenu li .dropdown_fullwidth,
.megamenu_light .megamenu li .dropdown_flyout li ul {
	font-weight:normal;
	border-top-width: 0;
	/*margin-top:2px;*/
	z-index:9999;
	width: 100%;
	/*commentare queste righe per togliere a tutto schermo*/
	/* width: 100vw;<-- children as wide as the browser window (viewport) */
  margin-left: calc(-1 * ((100vw - 100%) / 2));/* align left edge to the left edge of the viewport */
  /* The above is basically saying to set the left margin to minus the width of the viewport MINUS the width of the parent, divided by two, so the left edge of the viewport 
	width: 100%;*/
	 margin-top:-1px;
}
.megamenu_light .megamenu li .dropdown_flyout li ul {
	border:1px solid #CCCCCC;
}
.megamenu_light .megamenu li .dropdown_flyout .dropdown_parent {
	background: url(../img/b_frecciagrande_g.gif) no-repeat right 9px;
}
.megamenu_light .megamenu li .dropdown_flyout .dropdown_parent:hover,
.megamenu_light .megamenu li .dropdown_flyout .dropdown_parent.active {
	background-color:#eeeeee;
}
.megamenu_light .megamenu li .dropdown_flyout .dropdown_parent.noactive {
	background-color:transparent;
}


.megamenu_light .megamenu > li > div a,
.megamenu_light .megamenu li ul li,
.megamenu_light .megamenu li ol li {
	color:#888888; 
}

.megamenu_light .megamenu li ul li,
.megamenu_light .megamenu li ol li {
	width:100%; display:block
}
.megamenu_light .megamenu > li > div a:hover {
	color:#333333;
}

.megamenu_containerstick,
.megamenu_container,
a:link,
li {
	transition: .7s all;
	-moz-transition: .7s all;
	-webkit-transition: .7s all;
	-o-transition: .7s all;
}


/*.containercentrale,.dropdown_fullwidth { background-color:#FFF }*/
@media only screen and (max-width: 1200px) {


	.megamenu > li > a {
			padding: 16px 0px 17px 0px;
		}

}
@media only screen and (max-width: 1024px) {


	.megamenu > li > a {
			padding: 16px 0px 17px 0px;
		}

}
/* 1. Common Media Queries */


@media only screen and (max-width: 984px) {

	.megamenu img {
		max-width: 96%;
		height: auto;
	}
	.megamenu textarea {
		width:96%;
	}
	.megamenu > li > a {
			padding: 16px 0px 17px 0px;
		}

}


@media only screen and (min-width: 480px) and (max-width: 767px) {

	.megamenu_container .megamenu > li > div > .responsive_sixths {
		width: 8.66%;
	}
	.megamenu_container .megamenu > li > div > .responsive_fourths {
		width: 17%;
	}
	.megamenu_container .megamenu > li > div > .responsive_thirds {
		width: 25.33334%;
	}
	.megamenu_container .megamenu > li > div > .responsive_halfs {
		width: 42%;
	}

}


/* 2. Horizontal Mega Menu Media Queries */


@media only screen and (min-width: 812px) and (max-width: 984px) {

	.megamenu_container .megamenu > li {
		/*margin:0 8px 0 0;*/
	}
		.megamenu_container .megamenu > li.right {
			margin-right:-1px;
		}
		.megamenu_container .megamenu > li > a {
			padding: 16px 0px 17px 0px;
		}
		.megamenu_container .megamenu > li .megamenu_drop {
			/*padding-right:30px;*/

		}
		

}

@media only screen  (max-width: 812px) {

	.megamenu_container{
		display:none; 
	}
		

}