@charset "utf-8";
:root {
	
  --primary-color: 		hsl(342, 44%, 52%);
  --primary-light-color: 	hsl(342, 44%, 57%);
  --primary-color-filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(377%) hue-rotate(291deg) brightness(92%) contrast(88%);/*--https://angel-rs.github.io/css-color-filter-generator generare il colore*/
 --primary-color-soft: #FAC075;
	
  --secondary-color: 		hsl(36, 100%, 48%);
  --secondary-light-color:		hsl(36, 100%, 53%);
  --secondary-color-filter: brightness(0) saturate(100%) invert(64%) sepia(90%) saturate(3527%) hue-rotate(9deg) brightness(105%) contrast(101%);
  --secondary-color-soft: #d1e0f4;
	
  --super-color: 	hsl(310, 69%, 35%);
  --super-light-color:		hsl(310, 69%, 40%);
  --super-color-filter: brightness(0) saturate(100%) invert(19%) sepia(84%) saturate(2009%) hue-rotate(287deg) brightness(89%) contrast(103%);

  --bonus-color: #F2EADE;
  --bonus-color-filter: brightness(0) saturate(100%) invert(84%) sepia(11%) saturate(197%) hue-rotate(358deg) brightness(109%) contrast(96%);
  --soft-color: #E2BCC4;
  --soft-color-filter: brightness(0) saturate(100%) invert(82%) sepia(21%) saturate(263%) hue-rotate(298deg) brightness(94%) contrast(88%);
  --sfondo-color: #fff;
  --sfondo-color-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(143deg) brightness(106%) contrast(103%);
  --txt-color: #2D2D2D;
  --txt-color-filter: brightness(0) saturate(100%) invert(11%) sepia(0%) saturate(395%) hue-rotate(227deg) brightness(95%) contrast(83%);
  --above-color: #fff;
  --above-color-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(143deg) brightness(106%) contrast(103%);
	
  --menu-bar-mobile: var(--sfondo-color);
  --menu-bar-desktop: var(--sfondo-color);
  --menu-back-mobile: var(--sfondo-color);
  --menu-back-desktop: var(--sfondo-color);
  --menu-back-desktop-light: var(--soft-color);
  --menu-arrow-filter: var(--primary-color-filter);
	
  --txt-menu-desktop: var(--txt-color);
  --icon-color-filter: var(--primary-color-filter)
  --txt-menu-tendina-desktop: var(--txt-color);
  --txt-menu-tendina-mobile: var(--txt-color);
	
  --footer-back: var(--bonus-color);
  --footer-txt: var(--txt-color);

  --info-color: hsl(201, 59%, 78%);	
  --info-light-color: hsl(201, 59%, 78%);	
  --warning-color: hsl(49, 93%, 77%);
  --warning-light-color: hsl(49, 93%, 77%);
  --success-color: hsl(114, 35%, 68%);
  --success-light-color: hsl(114, 35%, 68%);
  --danger-color: hsl(1, 63%, 74%);
  --danger-light-color: hsl(1, 63%, 74%);
	
  --box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;;
  --border-radius: 10px;
  --border: 1px solid vat(--txt-color);/*solo per tabella*/
  --border-style: 1px solid;
  --glow: none;
	
  --font-primary: "Palanquin", sans-serif;
  --font-secondary: "Palanquin", sans-serif;
  --text-align: left;
  --titoletto-align: center;
  --h-align: left;
  --anteprime-align: left;
  --svg-color: brightness(0) saturate(100%);/*       brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)*/
  --site-width: 1300px;
  --padding-h: 40px;
  --padding-h-small: 10px;
  --padding-laterale: 10px;
	
  --color-seo: #265B7D;
  --color-web: #4F8C75;
  --color-grafica: #A84E4F;
  --color-foto: #7A77AF;

@media screen and (min-width: 1025px){
:root {
  --padding-h: 60px;
	}
}

	
	

/*------------------------ se voglio la tendina piccola con box shadow-----------------*/
@media screen and (min-width: 1025px){
	
nav ul li .sub-menu { 
	left: auto!important;
  	width: 400px!important;
	padding-bottom: var(border-radius)!important; 	
	box-shadow: 0 0px 6px 0 rgba(30,33,41,.1)!important;
	top: 70px!important;
	border-radius: var(--border-radius)!important;
	padding-top: 10px!important; 
}
	
nav ul li li .sub-menu { 
	left: auto!important;
  	width: auto!important;
	padding-bottom: none!important; 	
	box-shadow: none!important;
	top: 0!important;
	border-radius: var(--border-radius)!important;
	padding-top:0!important; 
}
	
/* colore hover menu*/	
	
#menu-visibility .current-menu-item > a {/* questo serve se il colore mobile della tendina è scuro e desktop è chiaro*/	
	border-bottom: var(--border-style) var(--primary-light-color)!important;
	background-color: transparent!important;
}

#menu-visibility .current-menu-parent > a {
        border-bottom: var(--border-style) var(--primary-light-color)!important;
		background-color: transparent!important;
    }

	/* Lev 1 menu*/	
nav ul li a {
	border-radius: 0!important;
	border: var(--border-style) var(--menu-bar-desktop)!important;
	border-bottom: var(--border-style) var(--menu-bar-desktop);
}
	
nav ul li a:hover {
	border-bottom: var(--border-style) var(--primary-light-color)!important;
	background-color: transparent;
}
	/* Lev 2 menu*/	
		
nav ul li li a {
	border-radius: 0!important;
	border: var(--border-style) var(--menu-back-desktop)!important;
	border-bottom: var(--border-style) var(--menu-bar-desktop);
}
	
nav ul li li a:hover {
	border-bottom: var(--border-style) var(--primary-light-color)!important;
	background-color: transparent!important;
}
	
}



#menu-visibility .current-menu-item > a {
	background-color: var(--bonus-color);
}

#menu-menu-header > li {
	border-bottom: var(--border-style) var(--bonus-color);
	margin-bottom: 5px!important;
}

/*------------------ fine tendina con box shadow ------------------------------------------*/


/*------------------ menu in linea su mobile------------------------------------------*/

nav ul ul { 
	display: flex;
	flex-wrap: wrap;	
}

#menu-visibility ul li a{ /* lev 2*/
	font-size: 16px;
	border-radius: var(--border-radius);
}

@media screen and (min-width: 1025px){
#menu-visibility ul li a { /* lev 2*/
	background-color:transparent;
	font-size: 18px!important;
	height: auto;
	padding: 8px 10px;
	margin-bottom: 5px;
}
	
#menu-menu-header > li {
    border-bottom: none;
}
}

/*------------------ fine lev menu in linea------------------------------------------*/