@font-face {
	font-family: 'Sulphur Point';
	src: url('../fonts/SulphurPoint-Light.ttf') format('truetype');
  	font-weight: 300;
  	font-style: normal;
 font-display: swap;
}

@font-face {
  	font-family: 'Sulphur Point';
  	src: url('../fonts/SulphurPoint-Regular.ttf') format('truetype');
  	font-weight: 400;
  	font-style: normal;
  	 font-display: swap;
}

@font-face {
  	font-family: 'Sulphur Point';
  	src: url('../fonts/SulphurPoint-Bold.ttf') format('truetype');
  	font-weight: 700;
  	font-style: normal;
 font-display: swap;
}


@font-face {
  	font-family: 'HKGrotesk';
  	src: url('../fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype');
  	font-variation-settings: "weight" 700;
  	font-style: normal;
 font-display: swap;
}

h1 		{ font-size: 1.5rem; }
h2, h3 	{ font-size: 1rem; }
h4, h5 	{ font-size: 0.8rem;}


:root {
	/* Generale - corpo del testo */
	--body-bg: #dfdfdf;
	--body-color: #22262a;
	--body-font-family: 'HKGrotesk';	
	--cassiopeia-font-family-headings: 'HKGrotesk'; 
	--body-font-size: 0.8rem;
	--body-font-weight: 300; 
	--body-line-height: 1.5;	
	--breadcrumb-bg: #cdcdcd;
	}
	
	
.container-header,.container-footer {
  background-color: var(--gray-800);
  background-image: none;
}



/* menu */
.metismenu.mod-menu .mm-collapse {
	background-color: var(--gray-600);
}
.metismenu.mod-menu .parent > ul {
		color: #fff;	
	}
.metismenu.mod-menu .parent > ul:hover {
		color: #fff;	
	}	
.metismenu.mod-menu .metismenu-item,
.nav-item {
	font-size: 1rem;
	padding: .5rem .5rem;
}
.metismenu-item a { color: currentcolor};





.item-title a {
	text-decoration: none;
	color: var(--body-color);
}
.item-title a:hover {
	text-decoration: underline;
	color: var(--link-color);
}


.container-banner {
	margin: 0;
}


@supports (display: grid) {
  .site-grid {
    grid-gap: 0 1em;
    grid-template-columns: [full-start] minmax(0, 1fr)[main-start] repeat(6, minmax(0, 19rem))[main-end] minmax(0, 1fr)[full-end];
    display: grid;
  }


  .site-grid > [class^="container-"], .site-grid > [class*=" container-"] {
    column-gap: 1em;
    width: 100%;
    max-width: none;
  }

  .site-grid > .full-width {
    grid-column: full-start / full-end;
  }



@media (width < 992px) {
    .site-grid {
      grid-template-areas:	". banner banner banner banner banner banner ."
									". top-a top-a top-a top-a top-a top-a ."
                         	". top-b top-b top-b top-b top-b top-b ."
                         	". comp comp comp comp comp comp ."
                         	". side-r side-r side-r side-r side-r side-r ."
                         	". side-l side-l side-l side-l side-l side-l ."
                         	". bot-a bot-a bot-a bot-a bot-a bot-a ."
                         "	. bot-b bot-b bot-b bot-b bot-b bot-b .";
  		}
  	}


@media (width >= 992px) {
    .site-grid {
      grid-template-areas: ". banner banner banner banner banner banner ."
                           ". top-a top-a top-a top-a top-b top-b ."
                           ". comp comp comp side-l top-b top-b ."
                           ". comp comp comp side-l side-r side-r ."
                           ". bot-a bot-a bot-a bot-a bot-a bot-a ."
                           ". bot-b bot-b bot-b bot-b bot-b bot-b .";
    }

	.container-header {
		padding : 1em;
		position: fixed;	
	}

	.site-grid {
		padding-top: 100px;	
	}

  }
  
/*  Banners *********************/   
  .trevissa { 
  background-color: #280a10;
  text-align: center;
  }
  
 .bacchin {
	background-color: #144b96;
  	text-align: center;
 } 
 /******************************/
 
 
 
 
 
 


/* header */ 
 @supports (display: grid) {
 	.container-header {
 		display: grid;	
 		grid-gap: 0 1em;
 		grid-template-columns: [full-start] minmax(0, 1fr)[main-start] repeat(6, minmax(0, 19rem))[main-end] 		minmax(0, 1fr)[full-end];
 	grid-template-areas: ". topbar topbar topbar topbar topbar topbar ."
 									". below below below below below below ."
 									". nav brand brand brand brand brand ." 
	
 		}
 
 .container-topbar { grid-area: topbar; }
 .container-below-top { grid-area: below; }
 .container-brand { grid-area: brand; }
 .container-nav { grid-area: nav;}
 
 	@media (width >= 992px) {
 		.container-header { 	
		grid-template-areas: ". topbar topbar topbar topbar topbar topbar ."
									". below below below below below below ."
 									". brand brand brand nav nav nav ." 
		} 	
 	
 	}
 
 
 
 
		.card-body { padding: 0px !important;}
 
		.card-btn {
				text-align: center;
		}
	
	
		.card-img-top {
				object-fit: cover;
				padding: 0rem;
				border-radius: 0.5rem !important;
		}
 
 
 
/* Special Articles ******************************************/ 
	.articles-card {
		border-radius: 1.25rem !important;
		cursor: pointer;
		margin-bottom: 1rem;
		padding: 0.5rem;
		} 
 
 	.articles-card:hover{
		background-color: #c0c0c0 !important;
	}
	
 	.articles-card .card-img-top {
		width: 100% !important;
		object-fit: cover;
		padding: 0rem;
		border-radius: 0.5rem !important;
	}

.articles-card h5 
 {
		color: #000000 !important;
		font-size: calc(0.7rem + .6vw) !important;
		margin-bottom: 0px !important;
		margin-top: 0.4rem !important;
	}

.articles-box {
display: grid;
}


@media ( width > 1460px) {
		.articles-box {
		 	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		}
		.articles-card {
			width: 100%;
		}
	}
 
 		.articles-card .card-img-top {
				width: 18rem !important;
				height: 12rem !important;
		}
 
 
@media (992px <= width <= 1460px) {


		.articles-box {
			 	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
			}
		.articles-card {
			width: 100%;
			}
	} 
 
 
 @media (width < 992px) {


		.articles-box {
			 	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
			}
		.articles-card {
			width: 100%;
			}
	}
 
 
 
 
 
 /* Featured ***************************************************/
		.featured-box {
			display: grid;
			justify-items: start;
			}
	
		.featured-card {
			border-radius: 1.25rem !important;
			cursor: pointer;
			margin-bottom: 1rem;
			background-color: var(--body-bg;) !important;
			padding: 0.5rem;
			}

		.featured-card:hover{
				background-color: #c0c0c0 !important;
			}

		.featured-card h5 {
				color: #000000 !important;
				font-size: calc(0.7rem + .6vw) !important;
				margin-bottom: 0px !important;
				margin-top: 0.4rem !important;
			}

		.featured-card p {
				margin: 0px;	
			}
			
		.featured-card .card-body {
			padding: 0px !important;
		}
		
		.featured-card .card-top .card-title
			{
				text-align: center;
				margin: 0px;
				padding-top: 0.5rem;
				padding-right: 0.5rem;
				padding-bottom: 0;
				padding-left: 0.5rem;
			}
			
			


	@media ( width < 410px ) 
	{
			.featured-card {
					width: 100%	
				}	
			
			.card-img-top {
					width: 100%;
					height: auto;		
				}
	} 


	@media ( 410px <= width <= 992px) 
	{
			.featured-box {
						grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
				}
			.featured-card {
						width: 12rem;
				}
				
			.card-img-top {
						width: 18rem !important;
						height: 12rem !important;				
				}			
					
	}

	@media ( width > 992px) {
			.featured-box {
					 	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
			}
			.featured-card {
						width: 15rem;
			}
			.card-img-top {
						width: 18rem !important;
						height: 12rem !important;				
			}			

	}





	
	


  .container-top-b {
    flex-direction: column;
  }
 
	.menu_special {
		display: grid;
		justify-items: center;
 	
	}

	.menu_special img {
		width: 100%; 
 	}
 
 .menu_special .nav-item {
 		border-radius: 1.25rem !important;
		cursor: pointer;
		margin-bottom: 1rem;
		padding: 0.5rem;
 
 } 
  
 	.menu_special .nav-item:hover {
 		background-color: #c0c0c0 !important;
 	}
 
  
  
 @media ( width > 992px) { 
.menu_special {
		 	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
		.menu_special .nav-item {
				width: 12rem;
			}
  }
  
  
  
  
  
  
 @media ( width <= 992px ) { 
.menu_special {
		 	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
		.menu_special .nav-item {
				width: 10rem;
			}
  }