/* CSS Document */
/* Mobile First */



/* .......... F E A T U R E D .......... */


[class*='Featured'] a {
	margin: 0;
	border-radius: 0;
	position: relative;
	overflow: hidden;
	background-color: #b20566; /* Featured */
	z-index: 2; /* Keeps the links above the background */
	}

	/* Alt Tile colour */
		[class*='Featured']:not(.Mini) a:nth-of-type(2),
		[class*='Featured']:not(.Mini) a:nth-of-type(4),
		[class*='Featured']:not(.Mini) a:nth-of-type(5),
		[class*='Featured']:not(.Mini) a:nth-of-type(7) {
			background-color: #aa045d; /* Featured Alt */
			}

/* Text colour */	
	[class*='Featured'] p {
		color:  white;
		text-align: center;
		}	



/* Blurry image */ 
	[class*='Featured'] a > span {
		background-position: center;
		background-size: cover;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;	
		top: 0;
		filter: blur(2px) brightness(1) saturate(0);
		background-blend-mode: luminosity;
		transform: scale(1.05); /* gets rid of blurry edges */
		overflow: hidden;
		z-index: -1; /* keeps the image behind the text*/
		opacity: 0.1;
		}

/* Full image on hover */	
	[class*='Featured'] a:hover > span {
		opacity: 1;
		filter: blur(0px) brightness(1) saturate(1);
		background-blend-mode: normal;
		overflow: hidden;
		z-index: 1; /* Keeps the image above the text */
		}
	
/* Solid overlay on text */	
[class*='Featured'] a:hover > span:not([style*=".jpg"])::after { 
	background-color: rgba(162, 3, 84, 0.85); /* Featured Hover */
	background-image: url(../AFY/images/skin/nav_event_text.svg);
	}


/* "+" symbol */ 	
	[class*='Featured'] a:hover > span::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width:  100%;
		height: 100%;
		display: block;
		background-image: url(../AFY/images/skin/nav_event.svg);
		background-repeat: no-repeat;
		background-position: center center;
		overflow: hidden;
		background-size: 1.5rem;
		}
		@media (min-width: 640px) {
			[class*='Featured'] a:hover > span::after {
				background-size: 2rem;
				}
				}
		
		
		
	
/* .......... T I L E S .......... */


/* Container */

.Tiles	{
	position: relative;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	}
	@media (min-width: 1600px) {
	.Tiles:not(.Mini) {
		flex-flow: initial;
		}
		}	
	
	
/* Tiles */

.Tiles a,
.Tiles > span {
	position: relative;
	padding-top: 1.5em;
	width: 50%;
	height: 12em;
	}
	@media (min-width: 800px) {
		.Tiles:not(.Mini) a,
		.Tiles:not(.Mini) > span {
			padding-top: 3em;
			width: 25%;
			height: 15em;
			}
			}
	@media (min-width: 1600px) {
		.Tiles:not(.Mini) a,
		.Tiles:not(.Mini) > span {
			width: 100%;
			height: 15em;
			}
			}
			
	.Tiles > span {
		background-position: center;
		background-size: cover;
		filter: Saturate(.65) Sepia(.30) ;
		}	
		
		/* Data */
		.Tiles a p {
			padding-left: .5em;
			padding-right: .5em;
			}
		
		
		
		
/* Color effect on images*/
	.Tiles > span::after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		background-color: #d43287; /* Hot Pink */
		mix-blend-mode: overlay;
		opacity: 0.5;
		}







/* -----------------------  T H U M B N A I L ----------------------- */



/* Container*/	
.Thumbnails {
	position: relative;
	width: 100%;
	display: flex;
	flex-flow: row wrap;	
	padding-top: 3em;
	padding-bottom: 2em;
	}
	/* Tile */
	.Thumbnails a {
		position: relative;
		width: 49%;
		padding: 1em;
		padding-top: 1em;
		border-radius: 1em;
		height: 9em;
		margin-bottom: 2%;
		}
		@media (min-width: 640px) {
			.Thumbnails a {
				padding-top: 2em;
				width: 23%;
				height: 13em;
				}
				}
		@media (min-width: 1024px) {
			.Thumbnails a {
				padding-top: 3em;
				height: 14em;
				}
				}
		@media (min-width: 1600px) {
			.Thumbnails a {
				width: 10.5%;
				}
				}		
		
		/* Gutter */
		.Thumbnails a:nth-of-type(odd) {
			margin-right: 2%;
			}		
			@media (min-width: 640px) {
			.Thumbnails a:nth-of-type(4n+2) {
				margin-right: 2%;
				}
				}		
			
			@media (min-width: 1600px) {
			.Thumbnails a:nth-of-type(2n+2) {
				margin-right: 2%;
				}
				}		
				
	
/* .......... F E A T U R E D  S E R V I C E S .......... */


/* Conmtainer */

.RelatedServices {
	background: radial-gradient(#e0e0df, #b1b1ae); /* Theme 20% - 50% */
	padding-top: 3em;
	}
	/* Lable */
		.ServicePage .FeaturedServices::after {
			position: absolute;
			width: 100%;
			font-size: 1.5em;
			text-align: center;
			top: 0;
			left: 0;
			color: black;
			content: "Services connexes";
			}
			.EN.ServicePage .FeaturedServices::after {
				content: "Related services";
				}
				
			.ServicePage .FeaturedServices.Single::after {
				content: "Service connexe";
				}
				.EN.ServicePage .FeaturedServices.Single::after {
					content: "Related service";
					}		
	
/* Data */ 

	/* First Item */
	.FeaturedServices > a > p:first-of-type {
		font-size: 1.2em;
		margin-top: 1em;
		margin-bottom: 0.25em;
		}
	
	/* Second Item */
	.FeaturedServices > a > p:nth-of-type(2) {
		font-size: 1em;
		font-family: Light;
		}
		.FeaturedServices > a >p:nth-of-type(2)::before {
			content: "("
			}
		.FeaturedServices > a > p:nth-of-type(2)::after {
			content: ")";
			}
	
	
	
	
/* .......... F E A T U R E D  E V E N T S .......... */
	
		
/* Container */

.FeaturedEvents {
	background: radial-gradient(#64635e, #64635e); /* Theme */
	}
/*Stronger AFY texture	*/
.FeaturedEvents::before	{ 
	opacity: 0.03;
	}
	
	
/* Data */

	/* Date */
	.FeaturedEvents p.Date {
		margin-top: 0em;
		font-family: light;
		font-size: 2.75em;
		line-height: .85em;
		margin-bottom: 0.25em;
		}
	
	/* Month */
	.FeaturedEvents p.Month {
		margin-top: -.75em;
		font-size: 1em;
		font-family: Light;
		margin-bottom: 1.5em;
		}
		/* word spoacing */
		.FeaturedEvents p.Month span{
			padding-left: .25em;
			padding-right: .25em;
			}
	
		
	


.FeaturedEvents p.Lable {
	margin-bottom: 0.15em;
	font-size: 1.15em;
	padding-right: 1em;
	padding-left: 1em;
	line-height: 1.1em;
	font-family: Bold;
	}
	

/* Exclusions */ 	
	
.FeaturedEvents p.Day {
	display: none;
	}

.FeaturedEvents p.Time {
	display: none;
	}

.FeaturedEvents p.Location {
	display: none;
	}



/* .......... F E A T U R E D  E V E N T S .  M I N I......... */



/* .... Container .... */

.FeaturedEvents.Mini {
	font-size: 0.9em;
	background: radial-gradient(#e0e0df, #b1b1ae); /* Theme 20% - 50% */
	border-radius: 1.5em;
	overflow: hidden;
	margin-bottom: 3em;
	}
	/* Snug while in Dropdown */
	.DropDownON .FeaturedEvents.Mini {
		margin-bottom: 0em;
		}
		
	/*texture AFY */
	.FeaturedEvents.Mini::before {
		background-size: 4em;
		background-origin: right bottom;
		opacity: 0.1;
		}	

	/* If following a dropdown */
	[class*='DropDown'] + .FeaturedEvents.Mini {
		border-top: 5px solid #92918e; 
		border-radius: 0 0 1.5em 1.5em;
		transition: 1s;
		}
		.DropDownON + .FeaturedEvents.Mini {
			border-top: 5px solid #d0d0ce; /* theme 30% */
			}


	/* If inside a dropdown */		

	[class*='DropDown'] > .FeaturedEvents.Mini {
		border-radius: 0;
		}
		
		
	


/* .... Tiles ..... */

/* Stack pattern */
.FeaturedEvents.Mini a {
	width: 100%;
	height: 12em;
	background-color: #73726e; /* Theme 90% */
	}
	/* Quad pattern */		
	@media (min-width:640px) and (max-width:1023px) /*, (min-width:2200px) */{
		.FeaturedEvents.Mini a {
			width: 50%;
			}
			}

	/* Alt Tile colour */
		
		/* Stack pattern */
		@media (max-width:639px) , (min-width:1024px) {
			[class*='Featured'].Mini a:nth-child(2n+2) {
				background-color: #51504a; /*Darker  */
				}
				}
		/* Quad pattern */		
		@media (min-width:640px) and (max-width:1023px) /*, (min-width:2200px) */ {
			[class*='Featured'].Mini a:nth-child(4n+1),
			[class*='Featured'].Mini a:nth-child(4n) {
				background-color: #51504a; /*Darker  */
				}
				}
				
	/* Partner Hover*/
		
		/* no image */
		[class*='Featured'] a.Partner:hover 	{ 
			background-color: #64635e; /* Theme */
			}
			[class*='Featured'] a.Partner:hover > span:not([style*=".jpg"])::after { 
				background-color: rgba(100, 99, 94, 0.9);
				}
			
		
		/* With Image */
			/* Icon + Film*/			
			[class*='Featured'] a.Partner:hover > span::after { 
				background-image: url(../AFY/images/skin/nav_partner.svg);
				/*background-color: rgba(100, 99, 94, 0.9);*/
					}
					
			[class*='Featured'] a.Partner:hover > span::before { 
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					content: "";
					/*background-color: #64635e;*/
					mix-blend-mode: color;
					}
								
				
			[class*='Featured'] a.Partner:hover span[style*=".jpg"] 	{ 
				background-color: blue;
				}
	
	
	


/* ..... Data ..... */

	/* Time */ 
	.FeaturedEvents.Mini p.Time {
		display: block;
		font-size: 1.2em;
		font-family: Light;
		}

	/* */
	.FeaturedEvents.Collection a.Partner {
		display: block;
		}


/* ..... End note ..... */
	
	.CollectionPage [class*='DropDown'] + p {
		border-top: 5px solid #92918e;
		display: block;
		text-align: center;
		padding: 3em;
		}
		/* Do not show note, unless all events are over */
		.CollectionPage .FeaturedEvents.Mini.Tiles + p {
			display: none;
			}
	




/* ---------------- A D S  ------------------- */

/* Container */


.Scroll {
	position: absolute;
	width: 100%;
	overflow: auto;
	height: 5.5rem;
	margin-top: -7.5rem;
	z-index: 2; /* must be above the swipper */
	display: flex;
	justify-content: flex-start;
	}
	@media (min-width: 800px) {
		.Scroll {
		height: 7.75rem;
		margin-top: -9.5rem;
		}
		}
	
	.AdsWrapper { /* insures left alignement for narrow browwsers */
		width: 100%;
		left: 0;
		text-align: center;
		}
	
	.Ads {
		display: inline-flex;
		height: 5.5em;
		}
		@media (min-width: 800px) {
			.Ads {
				height: 7em;
				}
				}
		

/* Tiles */

.Ads a {
	display: Flex;
	flex-flow: wrap;
	border-radius: 1em;
	justify-content: center;
	padding: .75em;
	padding-top: 1em;
	height: 5.5rem;
	width: 14em;
	}
	@media (min-width: 800px) {
		.Ads a {
			padding-top: 1.5em;
			height: 7rem;
			}
			}
	@media (min-width: 1024px) {
		.Ads a {
			width: 16em;
			}
			}		
	@media (min-width: 1200px) {
		.Ads a {
			width:18em;
			}
			}					
	
	.Ads a:not(:Last-of-type) { /* Gutter*/
		margin-right: 1rem;
		}	
	.Ads a:first-of-type {
		margin-left: 2%;
		}
	.Ads a:last-of-type {
		margin-right: 2%;
		}	
	
	
	
	
	
	
/* data */

.Ads p.Lable {
	display: block;
	width: 100%;
	order: -1;
	line-height: 1.15em;
	font-size: 1.1em;
	height: 1em;
	margin-bottom: 1.5em;
	}
	
	@media (min-width: 800px) {
		.Ads p.Lable {
			margin-bottom: 1em;
			}
			}

	
	
	
	

.Ads p.Date,
.Ads p.Month {
	font-family: Light;
	font-size: 0.9em;
	height: 1em;
	}
	
.Ads p.Date {
	padding-right: .35em;
	}
	
	

/* Exclusions */

.Ads p.Day {
	display: none;
	}
.Ads p.Time {
	display: none;
	}
.Ads p.Location {
	display: none;
	}







	
	
	






/* ---------------- C O L L E C T I O N   ------------------- */

.Collection {
	position: relative;
	overflow: hidden;
	padding-bottom: 1.5rem;
	background-color: #efefef; /* Theme 10% */
	background: radial-gradient(#efefef, #d0d0ce); /* Theme 10% - 30% */
	margin-bottom: 3em;
	}
	
.Collection > *:not(a:first-child) {
	margin-left: 1rem;
	margin-right: 1rem;
	}
	
.EventPage .Collection {
	border-radius: 0 1em 1em 0;
	}

.MonthlyPage .Collection {
	border-radius: 1.25em;
	}


/* .... HEAD .... */ 

.Collection > a:first-child  {
	display: block;
	position: relative;
	width: 100%;
	text-align: center;
	padding-top: 5em;
	}

	/* Banner image */	
	.Collection > a:first-child > span {
		display: block;
		position: absolute;
		height: 5em;
		width: 100%;
		top: 0;
		background-size: cover;
		background-position: center;
		}
		
	/* Tilte */
	.Collection > a:first-child > h3  {
		font-size: 1.9em;
		margin-bottom: 0.25em;
		padding-left:  .5em;
		padding-right: .5em;
		}
		.Collection > a:first-child:hover h3 {
			color: #d43287; /* Hot Pink */
			}	
	
	 /* Period */
	.Collection > p:nth-child(2)  {
		font-family: Light;
		font-size: 1.25em;
		text-align: center;
		margin-bottom: 2em;
		}
		
	
	/* Future */
	.Collection > div.Future {
		padding: .5em;
		padding-bottom: 0;
		border-radius: .75em .75em 0 0 ;
		/*background-color: rgba(0,0,0, .1);*/
		display: none;
		}
		/*Context*/
		.Collection > div.Future p span::after {
			content: " : " ;
			}
			.EN.Collection > div.Future p span::after {
				content: ": " ;
				}
		
		/*text*/
		.Collection > div.Future p {
			text-align: center;
			color: #64635e; /* theme */
			font-size: .9em;
			font-family: Light;
			padding-bottom: 0.5em;
			}
			.Collection  > div.Future p::after {
				content: " événements";
				}
				.EN .Collection  > div.Future p::after {
					content: " events";
					}
			.Collection  > div.Future.Single p::after {
				content: " événement";
				}
				.EN .Collection  > div.Future.Single p::after {
					content: " event";
					}
	
	





	
/* ... listing ... */

.Collection a:nth-of-type(n+2) { 
	position: relative;
	display: flex;
	flex-wrap: wrap;
	padding: 0.75em;
	text-decoration: none;
	padding-right: 3.5em; /*room for icon */
	color: #4d4d4f;
	font-family: Light;
	font-size: 1em;
	}
	@media (min-width:1440px) {
		.Collection a:nth-of-type(n+2) { 
			font-size: 1.1em;
			}
			}
	
		
	.Collection a:nth-of-type(n+2),
	.Collection .DropDownON a:nth-of-type(n+3) {
		border-top: 1px solid #b1b1ae;
		}





/* data */

.Collection a p {
	padding-right: 0.25em; /* Word spacing */
	}

	
/* Collection Typography */

	.Collection a:nth-of-type(n+2) p.Lable {
		order: -1;
		width:  100%;
		font-size: 1.1em;
		font-family: book;
		margin-bottom: 0;
		}
		.Collection a p.Lable {
			color: black;
			}
		.Collection a:hover p.Lable {
			color: white;
			}
		
/* CSS Exclusions */

	.Collection p.Day {
		display: none;
		}
		
	.Collection p.Time {
		display: none;
		}
	
	.Collection p.Location{
		display: none;
		}
		
		
/* Main Hover */

.Collection > a:not(.Partner):nth-of-type(n+2):hover,
.Collection .DropDownON a:not(.Partner):nth-of-type(n+2):hover {
	background-color: #d43287; /* Hot Pink */
	}
	.Collection a.Partner:hover {
		background-color: #64635e; /* Theme */
		}

	.Collection a:not(first-child):hover p{
			color: white;
			}


/* icon */

.Collection > a:nth-of-type(n+2) > span,
.Collection .DropDownON a > span  {
	display: block;
	position: absolute;
	right:  0.75em;
	top: 0.75em;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: .5em;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}
	
.Collection a:not(.Partner):hover > span[style*=".jpg)"] {
	background-color: #a71d5c; /* Dark pink */
	background-blend-mode: luminosity;
	filter: brightness(.9) ;)
	}

.Collection a.Partner:hover > span::after{
	content: "";
	display: block;
	position: absolute;
	top: .05em;
	left: .05em;
	width: 100%;
	height: 100%;
	background-size: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(../AFY/images/skin/nav_partner.svg);
	transition: 0s;
	}
	.Collection a.Partner:hover > span{
		background-position: 10000px 10000px;
		}


/* + */
	.MonthlyPage .Collection > a:not(:nth-of-type(2)):last-of-type {
		background-image: url(../AFY/images/skin/nav_event_dark.svg);
		background-size: 1.25em;
		background-position: center 1em;
		background-repeat: no-repeat;
		transition: 0s;
		padding-top: 3em;
		justify-content: center;
		padding-left: 0;
		padding-right: 0;
		}
		.MonthlyPage .Collection > a:not(:nth-of-type(2)):last-of-type:before {
			content: "Voir tout les événements";
			}
			.EN.MonthlyPage .Collection > a:not(:nth-of-type(2)):last-of-type:before {
				content: "View all events";
				}
		/* Do to show ther is only one event */ 	 
		.MonthlyPage .Collection > a:nth-of-type(3):last-of-type {
			display: none;
			}
		
		/* Hover */
		.MonthlyPage .Collection > a:not(:nth-of-type(2)):last-of-type:hover {
			background-color: transparent;
			background-image: url(../AFY/images/skin/nav_event.svg);
			}







/* Pointer */

.EventPage .Collection > a::after,
.EventPage .Collection [class*='DropDown'] a:nth-of-type(n+2)::after,
.EventPage .Collection [class*='DropDown'] a.Current::after {
 	content: "";
	display: block;
	position: absolute;
	left: -2.25em;
	width: 0em;
	height: 0em;
	border: .75rem transparent solid;
	border-left-color: white;
	top: 0.5rem;
	transition: 0.25s ease-out;
	z-index: 10000;
	}

.EventPage .Collection a:Hover::after,
.EventPage .Collection > a.Current::after,
.EventPage .Collection .DropDownON a:hover::after, 
.EventPage .Collection .DropDownON a.Current::after {
	left: -1.25em;
	}







/*.... Ending Note ...*/

.Collection > p:last-child {
	text-align: center;
	padding: 2em;
	}
	.Collection > p:last-child a{
		color: #d43287;
		}







/* ---------------- M O N T H L Y   ------------------- */



/* Month Name */

.MonthName {
	position: relative;
	width: 100%;
	border-bottom: 3px solid black;
	z-index: 10;
	}

.MonthName h2 {
	margin-bottom: 0;
	padding-left: 1.25rem;
	}

/* Month Icon */
.MonthName a{
	display: block;
	position: absolute;
	bottom: .6em;
	height: 1.5em;
	width: 1.5em;
	background-repeat: no-repeat;
	background-image: url(../AFY/images/skin/icon_thismonth.svg);
	transition: 0s;
	right: 0.5rem;
	}
	@media (min-width:640px) {
		.MonthName a{
			right: 1rem;
			}
			}	
	
	.MonthName a:hover{
		filter: brightness(.55) saturate(150) hue-rotate(255deg); /* hot pink */
		}

/* Container */

/* Columns */
.Monthly {
	position: relative;
    column-gap: 0;
	margin-top: -1px;
	margin-bottom: 4em;
	column-count: 1;	
	}
	@media (min-width:640px) {
		.Monthly {
			column-count: 2;	
			}
			}
	@media (min-width:1600px) {
		.Monthly {
			column-count: 3;	
			}
			}		

/* Tiles */
		
.Monthly a {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	position: relative;
	text-decoration: none;
	color: #64635e; /* theme */
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 0.8em;
	padding-left: 1rem;
	min-height: 8em;
	}
	@media (min-width:640px) {
		.Monthly a {
		min-height: 9em;
		}
		}
	@media (min-width:1200px) {
		.Monthly a {
		min-height: 10em;
		}
		}

	/* Main Hover */
	.Monthly a:hover {
		background-color: #d43287; /* Hot Pink */
		}

/* vertical dividers */
		
	@media (min-width:640px) {
		.Monthly::before,
		.Monthly::after  { 
			content: "";
			position: absolute;
			display: block;	
			height:  96%;
			width:  1px;
			top: 2%;
			left: 50%;
			border-left: 1px solid #e0e0df; /* Theme 20% */
			}
			}
	@media (min-width:1600px) {
		.Monthly::before { 
			left: 33.3333%;
			}
	
		.Monthly::after  { 
			left: 66.666666%;
			}
			}
		
/* horisontal dividers*/
		
	.Monthly a::before { 
		content: "";
		position: absolute;
		display: block;
		width:  calc(100% - 3em);
		left: 1.5em;
		top: 0;
		border-top: 1px solid #e0e0df;  /* Theme 20% */
		}	
		.Monthly a:hover::before {
			display: none; /*hides the divider on hover */
			}
		
/* icon */	
	
.Monthly > a > span {
	position:  absolute;
	display: block;
	right: 0.5rem;
	background-size: cover;
	background-position: center;
	border-radius: .75rem;
	width:  3.75rem;
	height:  3.75rem;
	}
	@media (min-width:640px) {
		.Monthly > a > span {
			right: 1rem;
			}
			}	
	@media (min-width:1024px) {
		.Monthly > a > span {
			width:  4.25rem;
			height:  4.25rem;
			}
			}
	@media (min-width:1200px) {
		.Monthly > a > span {
			width:  4.5rem;
			height:  4.5rem;
			}
			}
	 	
	.Monthly > a:hover > span[style*=".jpg"] {
		background-color: #a71d5c; /* Darker pink */
		background-blend-mode: luminosity;
		filter: brightness(.9) ;)
		}		
		
		
/* data */

.Monthly a:hover p {
	color: white;
	}	

.Monthly a p {
	width: 100%;
	padding-left: 3.5rem;
	margin-right: 4.5rem;
	}
	@media (min-width:640px) {
		.Monthly a p {
			margin-right: 5.15rem;
			}
			}		
	@media (min-width:800px) {
		.Monthly a p {
			padding-left: 4.5rem;
			margin-right: 5.5rem;
			}
			}
	@media (min-width:1200px) {
		.Monthly a p {
			margin-right: 6.15rem;
			}
			}	
					
				
.Monthly .Day,
.Monthly .Date,
.Monthly .Month  {
	position: absolute;
	display: block;
	left: 0rem;
	width: 4rem;
	text-align: center;
	padding-left: 0;
	}
	@media (min-width:800px) {
		.Monthly .Day,
		.Monthly .Date,
		.Monthly .Month  {
			left: 1rem;
					}
					}	
			
.Monthly .Day{
	top: 0.9rem;
	font-size: .95em;
	color: black;
	}
		
.Monthly .Date {
	top: 2rem;
	font-size: 3.5em;
	line-height: .8em;
	color: black;
	}

.Monthly .Month  {
	top: 4.25rem;
	font-size: 1em;
	color: black;
	font-family: Light;
	}
	.Monthly .Month span {
		display: none;/* hides the current month */
		}

.Monthly .Lable  {
	font-size: 1.4em;
	line-height: 1em;
	margin-bottom: .3em;
	color: black;
	}
	@media (min-width:1200px) {
		.Monthly .Lable  {
			font-size: 1.6em;
			}
			}
	@media (min-width:2000px) {
		.Monthly .Lable  {
			font-size: 1.8em;
			}
			}	

.Monthly .Time  {
	color: black;
	font-size: 1.2em;
	font-family: light;
	margin-bottom: 0;
	margin-top: .3em;
	}


.Monthly .Location  {
	font-size: 1em;
	font-family: light;
	}
	
/* Exclusions */

.Monthly a.Partner {
	display: none;
	}



/* ------------------ C A L E N D A R  G R I D ------------------- */




.Calendar {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	padding-top: 0;
	z-index: 100;
	padding-bottom: 0em;
	}
	@media (min-width:480px) {
		.Calendar {
			top: -2rem;
			}
			}
	
	
/* Cells */

	.Calendar div{
		transition: 0.25s;
	}
	
	
	/* Stacked Grid*/
	@media (max-width:479px) {
	.Calendar div{
		width: 100%;
		padding: .5em;
		}
		}		
	
	/*column Grid*/		
		@media (min-width:480px) {
			.Calendar div{
				width: calc(100%/7);
				min-height: 5em;
				padding-bottom: 0.5em;
				}
				}
		@media (min-width:480px) and (min-height: 800px) {
			.Calendar div{
				min-height: 5em;
				}
				}
		@media (min-width:480px) and (min-height: 1024px) {
			.Calendar div{
				min-height: 8em;
				}
				}


	@media (max-width:479px) {
	.Calendar div:empty {
		display: none;
		}
		}
	



/* Days */

	.Calendar div:nth-child(1):before {
		content: "Lun";
		}
		.EN .Calendar div:nth-child(1):before {
			content: "Mon";
			}
	.Calendar div:nth-child(2):before {
		content: "Mar";
		}
		.EN .Calendar div:nth-child(2):before {
			content: "Tue";
			}
	.Calendar div:nth-child(3):before {
		content: "Mer";
		}
		.EN .Calendar div:nth-child(3):before {
			content: "Wed";
			}
	.Calendar div:nth-child(4):before {
		content: "Jeu";
		}
		.EN .Calendar div:nth-child(4):before {
			content: "Thu";
			}
	.Calendar div:nth-child(5):before {
		content: "Ven";
		}
		.EN .Calendar div:nth-child(5):before {
			content: "Fri";
			}
	.Calendar div:nth-child(6):before {
		content: "Sam";
		}
		.EN .Calendar div:nth-child(6):before {
			content: "Sat";
			}
	.Calendar div:nth-child(7):before {
		content: "Dim";
		}
		.EN .Calendar div:nth-child(7):before {
			content: "Sun";
			}

		@media (min-width:640px) {
			.Calendar div:nth-child(1):before {
				content: "Lundi";
				}
				.EN .Calendar div:nth-child(1):before {
					content: "Monday";
					}
			.Calendar div:nth-child(2):before {
				content: "Mardi";
				}
				.EN .Calendar div:nth-child(2):before {
					content: "Tuesday";
					}
			.Calendar div:nth-child(3):before {
				content: "Mercredi";
				}
				.EN .Calendar div:nth-child(3):before {
					content: "Wednesday";
					}
			.Calendar div:nth-child(4):before {
				content: "Jeudi";
				}
				.EN .Calendar div:nth-child(4):before {
					content: "Thursday";
					}
			.Calendar div:nth-child(5):before {
				content: "Vendredi";
				}
				.EN .Calendar div:nth-child(5):before {
					content: "Friday";
					}
			.Calendar div:nth-child(6):before {
				content: "Samedi";
				}
				.EN .Calendar div:nth-child(6):before {
					content: "Saturday";
					}
			.Calendar div:nth-child(7):before {
				content: "Dimanche";
				}
				.EN .Calendar div:nth-child(7):before {
					content: "Sunday";
					}
					}
				
	
	
	
	
	
	
/*....  Dates .... */

	.Calendar div p {
		padding-top: .25em;
		text-align: center;
		font-size: 1.35em;
		font-family: Light;
		color: #b1b1ae;
		margin-bottom: 0em;
		}
		@media (min-width:480px) {
			.Calendar div p {
				font-size: 1.5em;
				}
				}

/* ... Event ...*/		
	.Calendar div a {
		display: block;
		width: 100%;
		padding: .45em;
		color: #a71d5c; /* Dark Pink */
		font-size: .95em;
		}
		@media (min-width:480px) {
			.Calendar div a {
				font-size: .6em;
				}		
				}			
		@media (min-width:800px) {
			.Calendar div a {
				font-size: .7em;
				}		
				}
		@media (min-width:1024px) {
			.Calendar div a {
				font-size: .8em;
				}		
				}		
		
	.Calendar div a:hover {
		background-color: #d43287; /* Hot Pink */
		color: white;
		}
		
	
			
/* .... Dividers .... */

/*Horisontal */

.Calendar div:not(:nth-last-child(-n+7)) {
	border-bottom: 1px solid #d0d0ce; /* Theme 30% */
	}

/* Vertical */

@media (min-width:480px) {
	.Calendar div:not(:nth-child(7n+7)) {
		border-right: 1px solid #d0d0ce; /* Theme 30% */
		}
		}
	




/* .... Weekend .... */

.Calendar div:nth-child(7n+6),
.Calendar div:nth-child(7n+7) {
	background-color: #efefef; /* Theme 20% */
	}

/* .... Today .... */

.Calendar div.Today {
	border: 2px solid black;
	}




/* .... Days .... */


.Calendar div:nth-child(-n+7) {
	display: none;
	}
	
	@media (min-width:480px) {
		.Calendar div:nth-child(-n+7) {
			display: block;
			text-align: center;
			min-height: 2rem;
			color: white;	
			background-color: transparent;
			}
		.Calendar div:nth-child(-n+6) {
			border-right: 1px solid white;
			border-bottom: none;
			}
			}
		
	














/* ----------------  P O P  E V E N T ------------------- */



/* Dialog Box */
		
.PopEvent {
	position: relative;
	display: flex;
	align-content: flex-start;
	padding: 1em;
	padding-top: 3.25em; /* room for head image */
	transition: 0.25s;
	height: auto;
	}
	@media (orientation: portrait)	{
		.PopEvent {
			padding-top: 4.25em; /* room for head image */
			}
			}
	@media (orientation: landscape) {
		.PopEvent {
			padding-top: 3.25em; /* room for head image */
			padding-bottom: 1.15em;
			}	
			}
	@media (min-width: 480px) and (min-height: 600px) {
		.PopEvent {
			padding-top: 8em; /* room for head image */
			padding-bottom: 1.5em;
			}
			}
	
	.PopEvent * {
		transition: 0.25s;
		}
	
		
/* Head image */	
	
.PopEvent > span {
	position:  absolute;
	display: block;
	width: 100%;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: center;
	background-color: #73726e; /* Neutral 70% */
	height: 2.25rem;
	}
	@media (orientation: portrait)	{
		.PopEvent > span {
			height: 3.25rem;
			}
			}
	@media (orientation: landscape) {
		.PopEvent > span {
			height: 2.25rem;
			}
			}
	@media (min-width: 480px) and (min-height: 600px) {
		.PopEvent > span {
			height: 6rem;
			}
			}

	 /* smooth corner radius under the Head image*/
	 
	.PopEvent::before {
		content:  "";
		position: absolute;
		display: block;
		width: 100%;
		left: 0;
		top: 0;
		background-color: black; 
		height: 2.25rem; /* Match Head image height */
		}
		@media (orientation: portrait)	{
			.PopEvent::before  {
				height: 3.25rem;
				}
				}
		@media (orientation: landscape) {
			.PopEvent::before {
				height: 2.25rem; /* Match Head image height */
				}
				}
		@media (min-width: 480px) and (min-height: 600px) {
			.PopEvent::before {
				height: 2.25rem; /* Match Head image height */
				}
				}
			



			 	
/* data */

.PopEvent, 
.Monthly a {
	display: flex;
	flex-wrap: wrap;
	}

.PopEvent p {
	display: block;
	width: 100%;
	padding-left: 6rem; /* Room for date */
	}
	@media (min-width: 480px) {
		.PopEvent p {
			padding-left: 7rem;
			}
			}
	@media (min-width: 480px) and (min-height: 600px) {
		.PopEvent p {
			padding-left: 8rem;
			}
			}



/* Date */

	.PopEvent .Day,
	.PopEvent .Date,
	.PopEvent .Month {
		position: absolute;
		display: block;
		left: 1rem;
		width: 4rem;
		text-align: center;
		padding-left: 0;
		border-right
		}
		@media (min-width: 480px) {
			.PopEvent .Day,
			.PopEvent .Date,
			.PopEvent .Month {
				left: 2rem;
				}	
				}		
		@media (min-width: 480px) and (min-height: 600px) {
			.PopEvent .Day,
			.PopEvent .Date,
			.PopEvent .Month {
				left: 3rem;
				}	
				}	

	.PopEvent .Day {
		top: 3.25rem;
		font-size: 0.95em;
		color: black;
		}
		@media (orientation: portrait) {
			.PopEvent .Day {
				top: 4.25rem;
				}
				}	
		@media (orientation: landscape) {
			.PopEvent .Day {
				top: 3.5rem;
				}
				}		
		@media (min-width: 480px) and (min-height: 600px) {
			.PopEvent .Day {
				top: 8rem;
				}
				}
						
	.PopEvent .Date{
		top: 4.5rem;
		font-size: 4em;
		line-height: .8em;
		color: black;
		}
		
		@media (orientation: portrait) {
			.PopEvent .Date{
				top: 5.5rem;
				}		
				}
		@media (orientation: landscape) {
			.PopEvent .Date{
				top: 4.75rem;
				}
				}
		@media (min-width: 480px) and (min-height: 600px) {
			.PopEvent .Date{
				top: 9.25rem;
				}
				}
	
	.PopEvent .Month {
		top: 7.75rem;
		font-size: .95em;
		color: black;
		}
		.PopEvent .Month span {
			display: none;/* hides the current month */
			}
			
		@media (orientation: portrait) {
			.PopEvent .Month {
				top: 8.75rem;
				}
				}	
			
		@media (orientation: landscape) {
			.PopEvent .Month {
				top: 8rem;
				}
				}
		@media (min-width: 480px) and (min-height: 600px) {
			.PopEvent .Month {
				top: 12.5rem;
				}
				}
	
		/* Divider */
			.PopEvent .Day::after {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			right: -1em;
			width: 1px;
			height: 6em;
			background-color: #c1c1bf; /* neutral 40% */
			}
				
	/* Event Name */
		.PopEvent .Lable  {
			font-size: 1.3em;
			line-height: 1em;
			margin-bottom: .15em;
			color: black;
			}
			@media (min-width: 480px) and (min-height: 600px) {
				.PopEvent .Lable  {
					font-size: 2em;
					}
					}			
	
	/* Event Description */
		.PopEvent .Description  {
			font-size: 0.95em;
			line-height: 1.3em;
			font-family: light;
			margin-bottom: 0;
			color: black;
			}

			@media (min-width: 480px) and (min-height: 600px) {
				.PopEvent .Description  {
					font-size: 1.2em;
					}
					}					
		
	/* Event Time */
		.PopEvent .Time  {
			color: black;
			margin-top: 0.75em;
			margin-bottom: 0;
			font-size: 1.25em;
			font-family: light;
			}
			@media (min-height: 600px) {
				.PopEvent .Time  {
					margin-top: 1.5em;
					}
					}

	/* Event Location */
		.PopEvent .Location  {
			font-family: light;
			font-size: .95em;
			line-height: 1.15em;
			color: black;
			}
			@media (min-height: 600px) {
				.PopEvent .Location   {
					margin-bottom: 1.5em;
					}
					}			

	/* Button */
		@media (orientation: landscape) and (max-height:600px){
			.PopEvent .Button {
				font-size: .8em;
				margin-top: 1em;
				margin-bottom: 0.25em;
				}
				}


	/* ... Partner ... */
			
	.PopEvent .PartnerContact {
		position: relative;
		margin-top: 0.75em;
		margin-bottom: 0;
		background-color: #e0e0df; /* Theme 20% */
		border-radius: 1.25em;
		padding: 1em;
		text-align: center;	
		font-size: .9em;
		line-height: 1.15em;
		min-height: 4em;
		}
		@media (orientation: landscape) and (max-height:600px){
			.PopEvent .PartnerContact {
				display: flex;
				align-items: center;
				text-align: left;
				padding-right: 12em;
				font-size: .8em;
				}
				}
		@media (orientation: landscape) and (max-height:600px) and (min-width: 640px){
			.PopEvent .PartnerContact {
				padding-left: 8.75em;
				}
				}
				
		@media (min-width: 480px) and (min-height: 600px) {
			.PopEvent .PartnerContact {
				margin-top: 2em;
				padding: 2em;
				border-radius: .75em;
				}
				}
		
		/* Partner's button */
		.PopEvent .PartnerContact a {
			display: table;
			font-size: 1.15em;
			width: auto;
			margin-left: auto;
			margin-right: auto;
			margin-top: 1em;
			background-color: #64635e;
			color: white;
			border-radius: 2em;
			padding: .45em;
			padding-left: 2em;
			padding-right: 2em;
			text-align: center;
			}
			@media (orientation: landscape) and (max-height:600px) {
				.PopEvent .PartnerContact a {
					position: absolute;
					margin-top: -1em;
					margin-left: 0;
					right:  3%;
					top: 50%;
					}
					}
			
			.PopEvent .PartnerContact a:empty::before {
				content: "Voir le site";
				}
				.EN .PopEvent .PartnerContact a:empty::before {
					content: "Visit the Website";
					}
			.PopEvent p.PartnerContact a:hover {
				background-color: #51504a; /* Darker */
				text-decoration: none;
				color: white;
				}