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


/* ---------------------------------------- L O G I S T I C ----------------------------- */	

/* smooth scrolling to # */
.MainPane nav {
	width: 100%;	
	}

/* Container */
.Logistic {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 0;
	margin-bottom: 3em;
	margin-bottom: 2em;
	}

	
/* tiles */	
	.Logistic li{
		min-height: 14em;
		border-bottom: 1px solid rgba(100, 99, 94, 0.3); /* Theme */
		position: relative;
		display: block;
		text-align: center;
		margin-bottom: 0;
		min-width: calc(100%/3);
		width: calc(100%/3)
		}
		@media (min-width:480px){
			.Logistic li {
				min-width: calc(100%/4);
				width: calc(100%/4);
				}
				}
	
		@media (min-width:640px) , (min-width:1024px) and (max-width:1199px){
			.Logistic li {
				min-width: calc(100%/5);
				width: calc(100%/5);
				}
				}
		@media (min-width:800px) and (max-width:1023px) , (min-width:1200px) and (max-width:1439px){
			.Logistic li {
				min-width: calc(100%/6);
				width: calc(100%/6);
				}
				}
		@media (min-width:1440x) {
			.Logistic li {
				min-width: calc(100%/8);
				width: calc(100%/8);
				}
				}
		@media (min-width:1800px) {
			.Logistic li {
				min-width: calc(100%/9);
				width: calc(100%/9);
				}
				}
	
	/*vertical dividers*/	
		ul.Logistic li:not(:first-child) {
			border-left: 1px solid rgba(100, 99, 94, 0.2); /* Theme */
			}
			/* remove left border of additional rows */
			@media (max-width:479px) {
				ul.Logistic li:nth-of-type(3n+4) {
					border-left: none
					}
				ul.Logistic li.CollectionAnchor {
					border-left: none
					}	
					}
			@media (min-width:480px) and (max-width:639px) {
					ul.Logistic li:nth-of-type(4n+5) {
					border-left: none
					}
					}
			@media (min-width:640px) and (max-width:799px), (min-width:1024px) and (max-width:1199px){
					ul.Logistic li:nth-of-type(5n+6) {
					border-left: none
					}
					}			
			@media (min-width:800px) and (max-width:1023px) , (min-width:1200px) and (max-width:1439px){
					ul.Logistic li:nth-of-type(6n+7) {
					border-left: none
					}
					}	
		
	
	
	/* URL */
	.Logistic li a{
		height: 100%;
		}
		.Logistic li.DateRange,
		.Logistic li.Price,
		.Logistic li > a {
			position: relative;
			display: block;
			text-align: center;
			padding-left: .5em;
			padding-right: .5em;
			}
			.Logistic li a:hover {
				background-color: #d43287;
				}
			ul.Logistic li > a {
				width: 100%;
				}
			



/* ...... A L L   B U T   D A T E  .....*/



/* Icon */
.Logistic li.DateRange::before,
.Logistic li.Price::before,
.Logistic li:not(.Date) a:before {	
	content: "";
	position: absolute;
	top: 3em;
	width: 3em;
	height: 3em;
	margin-left: -1.5em;
	filter: brightness(.6);
	background-repeat: no-repeat;
	}
	.Logistic li:not(.Date) a:hover::before {
		filter: brightness(2);
		}
		/* Room for icon */
	.Logistic li.DateRange,
	.Logistic li.Price,
	.Logistic li:not(.Date) a{
		padding-top: 7em;	
		padding-bottom: 1em;
		}
	/* Price No URL */
		.Logistic li.Price a {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			overflow: hidden;
			}
			

/* Lable */
	.Logistic li:not(.Date) p:first-child,
	.Logistic li:not(.Date) a p:first-child {
		line-height: 1.25em;
		margin-bottom: 0.5em;
		font-family: Book;
		color: black;
		font-size: 1.15em;
		}
		@media (min-width:480px) {
			.Logistic li:not(.Date) p:first-child,
			.Logistic li:not(.Date) a p:first-child	{
				font-size: 1em;
				}
				}
		@media (min-width:1200px) {
			.Logistic li:not(.Date) p:first-child,
			.Logistic li:not(.Date) a p:first-child	{
				font-size: 1.2em;
				}
				}
		/* Hover */		
		.Logistic li:not(.Date) a:hover p:first-child {
			color: white;
			}
	
/* Sub Lable */
	.Logistic li.CollectionAnchor::before,
	.Logistic li:not(.Date) p{
		line-height: 1.3em;
		font-family: Light;
		margin-bottom: 0.5em;
		font-size: 1em;
		}
		@media (min-width:480px) {
			.Logistic li.CollectionAnchor::before,
			.Logistic li:not(.Date) p{
				font-size: 0.9em;
				}
				}
		
		/* Hover */		
		.Logistic li:not(.Date) a:hover p{
			color: white;
			}



/* ....... DateRange .......*/

	.Logistic li.DateRange::before{
		background-image: url(../AFY/images/skin/icon_thismonth.svg);
		}

		
/* ..... Location ......*/

	/*Fill Gap*/
	.Logistic li.Location {
		flex-grow: 1;
		}
	
	/*Icon*/	
	.Logistic li.Location a::before {
		background-image: url(../AFY/images/skin/contact_location.svg);
		}
	

/* ..... Tickets ......*/

	/* Icon */
	.Logistic li.Price::before,
	.Logistic li.Price a:hover::before  {
		background-image: url(../AFY/images/skin/icon_ticket.svg);
		}

	/*Fill Gap if alone*/
	@media (max-width: 479px) , {
		.Logistic li:nth-of-type(3n+4).Price {
			flex-grow: 1;
			}
			}
	@media (min-width: 480px) and (max-width: 639px) {
		.Logistic li:nth-of-type(4n+5).Price {
			flex-grow: 1;
			}
			}		
	@media (min-width: 640px) and (max-width: 799px) , (min-width: 1024px) and (max-width: 1199px){
		.Logistic li:nth-of-type(5n+6).Price {
			flex-grow: 1;
			}
			}
	@media (min-width: 800px) and (max-width: 1023px) , (min-width: 1200px) and (max-width: 1439px){
		.Logistic li:nth-of-type(6n+7).Price {
			flex-grow: 1;
			}
			}
	@media (min-width: 1440px) {
		.Logistic li:nth-of-type(7n+8).Price {
			flex-grow: 1;
			}
			}			
	


/* .....D A T E .....*/
	
	
	/* Tile */
	.Logistic li.Date a {
		padding-top: 1em;
		font-family: Light;
		font-size: 1.2em;
		}	
	
	/* Number */
	.Logistic li.Date a p:first-child span {
		display: block;
		width: 100%;
		color: black;
		line-height: 1em;
		font-size: 3.8em;
		}
		@media (min-width: 480px) {
			.Logistic li.Date a p:first-child span {
				font-size: 3.2em;
				}
				}
				
	
	/* Time box */
	.Logistic li.Date a p:not(:first-child) {
		display: block;
		width: 100%;
		background-color: #efefef; /* theme 10% */
		padding: .5em;
		border-radius: .5em;
		height: 3.5em;
		margin-bottom: 1em;
		font-size: .9em;
		}
		@media (min-width: 480px) {
			.Logistic li.Date a p:not(:first-child) {
				font-size: .8em;
				}
				}

		
	/* to/à  */
	.Logistic li.Date a p:not(:first-child) span {
		display: block;
		width: 100%;
		}
		.Logistic li.Date a p:not(:first-child) span::before {
			content:  "à ";		
			}
			.EN .Logistic li.Date a p:not(:first-child) span::before {
				content:  "to ";		
				}
				
	/* Hover */
	.Logistic li.Date a:hover p{ 
		display: none; 	/* hide content on hover */
		}
		.Logistic li.Date a:hover::after,
		.Logistic li.Date a:before {
			display: block;
			position: absolute;
			left: 50%;
			}
			
		/* Hover message */ 
		.Logistic li.Date a:hover::before {
			display: block;
			position: absolute;
			height: 100%;
			width: calc(100% - 2em); /* provides padding */
			left: 1em; /*centers the content */
			top: 0;
			color: white;
			padding-top: 5em;
			font-family: Book;
			content: "Ajouter à mon calendrier";
			} 
			.EN .Logistic li.Date a:hover::before {
				content: "Add to my calendar";
				}	
		
		/* Hover Icon */
			.Logistic li.Date a:hover::after {
				content: "";
				top: 2em;
				width: 2em;
				height: 2em;
				margin-left: -1em;
				background-image: url(../AFY/images/skin/icon_addtocal.svg);
				filter: brightness(2);
				}







/* ----------- T O G G L E D   T I L E S ---------- */ 


/* ..... EVEN ANCHOR (Collection Page) ......  */

	/*full witdh when narroe*/ 
	@media (max-width: 479px) {
		.Logistic li.EventsAnchor {
			min-width: 100%;
			max-width: 100%;
			}
			}
	/* Hide on large screen */
	@media (min-width: 1024px) {
		.Logistic li.EventsAnchor {
			display: none;
			}
			}
	
	/* Number of Events */
	.Logistic li.EventsAnchor a span{
		display: block;
		position: absolute;
		width: 100%;
		left: 0;
		top: 1.3em;
		font-size: 3em;
		font-family: Book;
		color: #64635e;
		}
		/* hover */
		.Logistic li.EventsAnchor a:hover span{
			color: white;
			}


/* ..... COLLECTION ANCHOR (Event Page)......  */

	/* Tiles  */
	.Logistic li.CollectionAnchor{
		flex-grow: ;
		display: flex;
		justify-content: center;
		padding-top: 3.5em;
		padding-bottom: 2em;
		padding-left: .75em;
		padding-right: .75em;
		min-width: 100%;
		max-width: 100%;
		border-top: 1px solid rgba(100, 99, 94, 0.2);
		margin-top: -1px;
		border-left: 10px solid #333;;
		}
		
		
		
		/* When not full width */
		@media (min-width: 480px) and (max-width:639px){
			.Logistic li:not(:nth-child(4n+5)).CollectionAnchor{
				flex-direction: column;
				min-width: calc(100%/4);
				width: calc(100%/4);
				padding-top: 2.5em;
				padding-bottom: 1em;
				border-top: none;
				margin-top: 0;
				}
				}
		@media (min-width: 640px) and (max-width:799px){
			.Logistic li:not(:nth-child(5n+6)).CollectionAnchor{
				flex-direction: column;
				min-width: calc(100%/5);
				width: calc(100%/5);
				padding-top: 2.5em;
				padding-bottom: 1em;
				border-top: none;
				margin-top: 0;
				}
				}
		@media (min-width: 800px) {
			.Logistic li:not(:nth-child(6n+7)).CollectionAnchor{
				flex-direction: column;
				min-width: calc(100%/6);
				width: calc(100%/6);
				padding-top: 2.5em;
				padding-bottom: 1em;
				border-top: none;
				margin-top: 0;
				}
				}
		/* Hide on large screen */
		@media (min-width: 1024px) {
			.Logistic li.CollectionAnchor {
				display: none;
				}
				}
		
	/* lable */
	.Logistic li.CollectionAnchor::before {
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		padding-top: 1em;
		color: black;
		content: "Dans le cadre de";
		}
		.EN .Logistic li.CollectionAnchor::before {
			content: "Part of";
			}	
	
		/* Collection Tiles */
		.Logistic li.CollectionAnchor a{
			position: relative;
			display: flex;
			align-self: center;
			margin-bottom: .5em;
			margin-left: .25em;
			margin-right: .25em;
			border-radius: .5em;
			overflow: hidden;
			width: 100%;
			border: 1px solid #e0e0df; /* Theme 20% */
			max-width: 15em;
			background-color: #efefef;
			padding: 0;
			padding-top: 1em;
			font-size: 1.35em;
			}
			/* When not full width */
			@media (min-width: 480px) and (max-width:639px){
				.Logistic li:not(:nth-child(4n+5)).CollectionAnchor a {
					padding-top: 0;
					font-size: 1em;
					align-items: center;
					}
					}
			@media (min-width: 640px) and (max-width:799px){
				.Logistic li:not(:nth-child(5n+6)).CollectionAnchor a {
					padding-top: 0;
					font-size: 1em;
					align-items: center;
					}
					}			
			@media (min-width: 800px) {
				.Logistic li:not(:nth-child(6n+7)).CollectionAnchor a {
					padding-top: 0;
					font-size: 1em;
					align-items: center;
					}
					}
				
			/* Image */
				.Logistic li.CollectionAnchor a span{
					display: block;
					position: absolute;
					width: 100%;
					top: 0;
					left: 0;
					background-size: cover;
					background-position: center;
					background-color: #b1b1ae; /* Theme 50% */
					height: 2em;
					}
					/* When not full width */
					@media (min-width: 480px) and (max-width:639px){
						.Logistic li:not(:nth-child(4n+5)).CollectionAnchor a span{
							height: 1.5em;
							}
							}
					@media (min-width: 640px) and (max-width:799px){
						.Logistic li:not(:nth-child(5n+6)).CollectionAnchor a span{
							height: 1.5em;
							}
							}
					@media (min-width: 800px) {
						.Logistic li:not(:nth-child(6n+7)).CollectionAnchor a span{
							height: 1.5em;
							}
							}
					
							
					/* Hover */
					.Logistic li.CollectionAnchor a:hover span{
						background-color: #a71d5c; /* Dark pink */
						background-blend-mode: luminosity;
						filter: brightness(.9) ;)	
						}		
							
							
							
					
			/* Collection Tiles lable*/	
				.Logistic li.CollectionAnchor a p{
					text-align: center;
					font-size: .85em;
					font-family: Book;
					width: 100%;
					padding: .75em;
					margin-bottom: 0;
					padding-top: 2em;
					padding-bottom: 1em;
					}
					
					/* When not full width */
					@media (min-width: 480px) and (max-width:639px){
						.Logistic li:not(:nth-child(4n+5)).CollectionAnchor a p{
							padding: .5em;
							padding-top: 2em;
							font-size: .8em;
							}
							}
					@media (min-width: 640px) and (max-width:799px){
						.Logistic li:not(:nth-child(5n+6)).CollectionAnchor a p{
							padding: .5em;
							padding-top: 2em;
							font-size: .8em;
							}
							}
					@media (min-width: 800px) {
						.Logistic li:not(:nth-child(6n+7)).CollectionAnchor a p{
							padding: .5em;
							padding-top: 2em;
							font-size: .8em;
							}
							}
														
							
							
							
							
							
												
					/* Hover */
					.Logistic li.CollectionAnchor a:hover p{
						color: #d43287;
						}
						

		
	/* hover "+" size */
	.Logistic .Featured > a:nth-child(-n+4):hover > span::after {
		background-size: 2em;
		background-image: url(../AFY/images/skin/nav_collection.svg);
		}		
			
			
	/*No Icon */
		.Logistic li.CollectionAnchor a::before{
			display: none;
			}