@charset "utf-8";

/* -----------------Menu nella versione mobile-----------------*/

.active {
	color:#FFFFFF/* primary super-lightcolor*/;
	background-color: #E9E9E9/* primary lightcolor*/;
}
	
.active-dropdown {
	color:#FFFFFF /* primary super-lightcolor*/;
	background-color:#E9E9E9/* primary lightcolor*/;
}

nav {
	height: 100%;
	background-color:#C6D5E1; /* primary lightcolor* /* sfondo menu mobile*/
	position: fixed;
	width: 100%;
	margin-top: 54px;
	visibility: hidden;
	overflow: auto; /* permette lo scroll quando il menu è aperto*/	  
}

nav ul {
	padding-bottom: 54px;
}

nav ul li a {
	padding: 16px 0 16px 32px;
	display: block;
	color: #F74A02;
	font-size: 16px;
	transition: background-color 0.3s ease;
}

.submenu {
	color:#389DC7;
	padding-bottom: 5px;
}

nav ul li ul {
	padding-left:0; 
	padding-bottom:0;
}

nav ul li ul li a {
	font-size: 16px;
	padding: 10px 0 10px 55px;
	border: hidden; 
}

/* ----------------- div bar per l'attivazione del menu ------------------ */

#bar {
	background-color: #E9E9E9 ; 
	height: 54px;
	width: 100%;
	z-index: 1000;
	position: fixed;
	box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.4);
}

#bar #logo {
	float: right;
	margin-right: 12px;
}

/* ----------------- Hamburger animation ------------------ */

#hamburger {
  display: none;
}

.menuicon {
 	position: fixed;
	height: 54px;
	width: 54px;
	margin-left: 5px;
	z-index: 1500;
}

.menuicon span {
    display: block;
    top: 25px;
    width: 40px;
    height: 3px;
    left: 8px;
    background-color: #389dc7;
    position: relative;
	border-radius: 20px;
    transition-duration: 0;  
    transition-delay: .1s;
}
    
.menuicon  span::after, .menuicon  span::before {
    display: block;
    content: '';
    position: absolute;
    width: 40px;
    height: 3px;
    background-color: #389dc7;
	border-radius: 20px;
    transition-duration: .1s;
	-webkit-transition-delay: .1s, 0;
    transition-delay: .1s, 0;
}
.menuicon  span::before {
      margin-top: -10px;
}
.menuicon  span::after {
      margin-top: 10px;
}

#hamburger:checked ~ .menuicon span{
    background-color: rgba(0,0,0,0);
}
    
#hamburger:checked ~ .menuicon span::before {
      margin-top: 0px;
      -webkit-transition-delay: 0, .3s;
      -moz-transition-delay: 0, .3s;
      -ms-transition-delay: 0,.3s;
      -o-transition-delay: 0, .3s;
      transition-delay: 0, .3s;
}
	
#hamburger:checked ~ .menuicon span::after {
      margin-top: 0px;
      -webkit-transition-delay: 0, .3s;
      -moz-transition-delay: 0, .3s;
      -ms-transition-delay: 0,.3s;
      -o-transition-delay: 0, .3s;
      transition-delay: 0, .3s;
}

#hamburger:checked ~ .menuicon span::before {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
}

#hamburger:checked ~ .menuicon span::after {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
}

/* ----------------- menu animation faccio apparire il menu ------------------ */

#hamburger:checked ~ .menu-visibility {
	visibility: visible;
}

/* -----------------media per menu orizzontale ------------------ */

@media screen and (min-width: 1500px) {
	
	.menuicon {
		display: none; /* togliere icona hambuger icon */
	}
		
	#bar #logo {
		float: left;
		margin-left: 12px;
	}

	nav {
		z-index: 10000;
		margin-top: 19px;
		height: auto;
		background-color: transparent;
		transition: none;
		width: auto;
		float: right;
		right: 12px;
		visibility: visible;
		overflow: inherit;
	}

	.active {
		background-color: transparent;
		color: #F74A02 /* primary super-lightcolor*/;
	}
		
	.active-dropdown {
		color: #fff;
		background-color: #E9E9E9/* primary lightcolor*/;
	}

	nav ul {
		padding: 0;
	}
		
	nav ul li a {
		padding: 0;
		display:inline;
		font-size: 16px;
		color: #389DC7;
	}

	nav ul li a:hover {
		background-color: transparent;
		color: #F74A02 /* primary super-lightcolor*/;
	}
		
	.submenu {
		padding-left: 0;
		color: #389DC7;
	}

	nav ul li {	
		margin: 0;
		float: left;
		position: relative;
		padding :0 10px;
	}
	
	/* ----------------- dropdown - attivare il menu a tendina ------------------ */
		
	nav ul li ul { 
		position: fixed;
		height: 0;
		overflow: hidden;
		background-color: #E9E9E9 /* primary color*/
	}
		
	nav ul li:hover ul{
		height: auto;
		padding-top: 14px;
		position: absolute;
		right: 0;	
	}

	nav ul li ul li {
		font-size: 14px;
		font-weight: normal;
		float: none;
		padding: 0;
		min-width: 260px;
		border-top: 1px solid #E9E9E9/* primary lightcolor*/;
	}

	nav ul li ul li a {
		padding: 16px 32px;
		display: block;
		background-color: #E9E9E9/* primary color*/;
		color: #389DC7;
		font-weight: normal;
	}

	nav ul li ul li a:hover {
		background-color: #E9E9E9/* primary lightcolor*/;
		color: #F7A402 /* primary super-lightcolor*/;
	}
}