$font-extra: 2.3rem;
$font-large: 1.6rem;
$font-big: 1rem;
$font-medium: .8rem;
$font-normal: .6rem;
$font-small: .45rem;

$col-met: red; 
$col-eur: blue;
$col-mond: wheat; 


$lightblue: #98d0d9;


//programmes values
.programme-2{
	.views-field-field-programme{
		.field-content{
			background: $col-eur;
		}
		
	}
	.views-field{
			color: $col-eur;
	}
	.views-field-title{
		color: $col-met;
		&:hover{
			background: $col-met;
			color:white;
		}
	}
}

.programme-3{
	.views-field-field-programme{
		.field-content{
			background: $col-eur;
		}
	}
	.views-field{
		color: $col-eur;
	}
	.views-field-title{
		color: $col-eur;
		&:hover{
			background: $col-eur;
			color:white;
		}
	}
}

.programme-4{
	.views-field-field-programme{
		.field-content{
			background: $col-mond;
		}
	}
	.views-field{
		color: $col-mond;
	}
	.views-field-title{
		color: $col-met;
		&:hover{
			background: $col-met;
			color:white;
		}
	}
}

.programme-5{
	.views-field-field-programme{
		.field-content{
			background: $col-mond;
		}
	}
	.views-field{
		color: $col-mond;
	}
	.views-field-title{
		color: $col-mond;
		&:hover{
			background: $col-mond;
			color:white;
		}
	}
}
.programme-7{
	.views-field-field-programme{
		.field-content{
			background: $col-met;
		}
	}
	.views-field{
		color: $col-met;
	}
	.views-field-title{
		color: $col-met;
		&:hover{
			background: $col-met;
			color:white;
		}
	}
}
.programme-6{
	.views-field-field-programme{
		.field-content{
			background: $col-met;
		}
	}
	.views-field{
		color: $col-met;
	}
	.views-field-title{
		color: $col-met;
		&:hover{
			background: $col-met;
			color:white;
		}
	}
}

@media (min-width: 48rem) {
	:root {
	  font-size: calc(1rem + ((1vw - .48rem) * 1.389));
	  /* .48rem = viewportWidthMinimum /100 */
	  /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
	}
  }
  
  @media (min-width: 120em) {
	:root {
	  font-size: 2rem;
	}
  }