:root {
	 --next-color: #ffffff; /* grigio molto scuro */
	 
	/* --body-font-family: 'Sulphur Point'; */
	
	--body-font-family: 'HKGrotesk';	
	}

@media (width >= 992px) {
:root {
	 --next-font-size: 1vw;
	 --next-title-font-size: 3vw;	
	 --next-name-font-size: 1.5vw;
	 --next-info-font-size: 1.5vw;
	}
}


@media (width < 992px) {
:root {
	 --next-font-size: 3vw;
	 --next-title-font-size: 5vw;	
	 --next-name-font-size: 4vw;
	 --next-info-font-size: 4vw;
	}
}




.next-info .fa-lg {
	font-size : var(--next-font-size);
}



.next-main 
 {
	color: var(--next-color);
	text-align: center;
	padding: 15px;
	cursor : pointer;
	display: grid;
	grid-gap: 0 1vw;
	grid-template-columns: [full-start] minmax(0, 1fr)[main-start] repeat(3, minmax(0, 19rem))[main-end] minmax(0, 1fr)[full-end]; 
	grid-template-areas : " . title title title ."
							 " . cal logo info ."
							 " . cal logo info ."
							 " . name name name .";	
}

.next-title {
	grid-area : title;
}

.next-date {
	grid-area : cal;
}

.next-logo {
	grid-area : logo;
}

.next-info {
	grid-area : info;
}

.next-name { 
	grid-area : name;
}


.next-main {
	}


.next-title h4 {
	font-size: var(--next-title-font-size);
}

.next-logo img {
	vertical-align: baseline;
	width: 80%;	
	}


.next-info div {
	font-size: var(--next-info-font-size);	
	text-align: left;}

.next-info .km:before{
						background : #fff;
						/* color:<?php echo $color; ?> ; */
						}

.next-date .cal 
	{
				border: 1px solid var(--next-color); 
				text-align: center; 
				background : var(--next-color); 
				border-radius: 7px; 
				font-family: sans; 
	}
	
	.cal-day {		
						font-family : "sans-serif"; 
				 		font-weight: bold; 
				 		font-size: 50px; 
				 		margin-top: -10px;
				 } 
				 
	.cal-dow {
						font-size : var(--next-font-size);
						font-weight : bold;}
	.cal-month {
					  	color: var(--next-color);
					  	border-radius: 7px 7px 0px 0px;
					  	font-size: var(--next-font-size);
					}
					
	.cal a:hover {text-decoration: none;}						
						

.next-name {
						margin-top: 20px;
				}
.next-name h5{
						font-size: var(--next-name-font-size);
				}