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


	
	
/* ---------------- P O P U P  ------------------- */



/* ....  A R E A .... */ 

[class*='PopUp'] {
	width: 100%;
    overflow: hidden;
	top: 0;
	position: fixed;
	z-index: 1000;
	transition: 0.25s;
	height: 0%;
	-webkit-backdrop-filter: blur(1px);
	z-index: 10000;
	}
	.PopUpON {
		height: 100%;
		}
	




/* ....  C L O S E  B U T T O N.... */ 


/* Trigger */

[class*='PopUp'] > a {
	position: fixed;
	top: 0;
	background-color: #51504a; /* Theme */
	background-size: cover;
	width: 100%;
	transition: 0.25s;
	opacity: 0;
	height: 0%;
	}
	.PopUpON > a {
		opacity: .95;
		height: 100%;
		}
		
	/* X */
	
	[class*='PopUp'] > a::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-image: url(../AFY/images/skin/nav_close.svg);
		background-size: 2rem;
		background-repeat: no-repeat;
		background-position: center .75rem;
		}
		[class*='PopUp'] > a:hover::before {
			filter: brightness(2);
			}
			
		

/* ....  D I A L O G   B O X .....*/

[class*='PopUp'] > div {
	margin-top: 3.5em;
	margin-left: auto;
	margin-right: auto;
	border-radius: 2em;
	box-shadow: .5em .5em 2em rgba(0,0,0,0.5);
	background-color: white;
	overflow: hidden; /*******/
	z-index: 3000;
	transition: 0.25s;
	width: 0%;
	height: 0%;
	opacity: 0;
	}	
	.PopUpON > div {
		height: auto;
		width: 90%;
		max-width: 600px;
		opacity: 1;
		}

	
	

/* ------------- P O P  G R I D --------*/ 



[class*='PopUp'] > div.PopGrid{
	padding: 2em;
	text-align: center;
	background-color: white;
	}

[class*='PopUp'] > div.PopGrid > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	list-style: none;
	padding: 0;
	}
	
[class*='PopUp'] > div.PopGrid > ul li {
	position: relative;
	width: 25%;
	text-align: center;
	margin-bottom: 2em;
	}
	
[class*='PopUp'] > div.PopGrid.PopLanguage > ul li:nth-child(2) {
	border-left: 1px solid #d0d0ce;
	}
	

[class*='PopUp'] > div.PopGrid > ul a {
	display: block;
	margin-top: 3.25rem;
	text-align: Center;
	margin-bottom: .5em;
	}
		
[class*='PopUp'] > div.PopGrid > ul li p {
		padding-left: 1.5em;
		padding-right: 1.5em;
		}

/* Icon */
	
[class*='PopUp'] > div.PopGrid > ul li a::before {
	content: "";
	position: absolute;
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	margin-left:  -1.5em;
	top: 0;
	left:  50%;
	background-repeat: no-repeat;
	filter: brightness(0.6); 
	}
	[class*='PopUp'] > div.PopGrid > ul li a:hover::before {
		filter: brightness(0.56) saturate(161) hue-rotate(260deg); /* hot pink */
		}
/* Buttons */

[class*='PopUp'] > div.PopGrid  a.Button {
	font-size: .9em;
	padding-left: 1em;
	padding-right: 1em;
	}


/* ---------------- G E N E R I C  ------------------- */

	
[class*='PopUp'] h2 {
	display: block;
	width: 100%;
	}


/* ---------------- L A N G U A G E  ------------------- */


	/* Title */

	[class*='PopUp'] > div.PopShare h2::before {
		content: "English Please";
		}

	/* Icons */

	[class*='PopUp'] > div.PopLanguage > ul li:first-child a::before {
		background-image: url(../AFY/images/skin/nav_external.svg);
		}
	[class*='PopUp'] > div.PopLanguage > ul li:last-child a::before {
		background-image: url(../AFY/images/skin/icon_trnaslate.svg);
			}


	/* grid */
	
	[class*='PopUp'] > div.PopGrid.PopLanguage ul li {
		width: 50%;
		}
	
	/* Button override */ 
	
	[class*='PopUp'] > div.PopGrid.PopLanguage a.Button { /* Really? We should fix the button core instead... */
		display: inline-block;
		padding-left: 2em;
		padding-right: 2em;
		margin-bottom: 2em;
		}
	
	

/* ---------------- C O N T A C T  ------------------- */


[class*='PopUp'] > div.PopContact {
	display: grid;
	grid-template-columns: 70% 30%;
	grid-template-rows: auto minmax(22em, 30%);
	text-align: center;
	max-width: 90%;
	height: 90%;
	padding: 0;
	background-color: transparent;
	}
	
	
/* Map */
[class*='PopUp'] > div.PopContact > div:first-child {
	grid-column-start: span 5;
	margin-top: 0em;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0em;
	}
	[class*='PopUp'] > div.PopContact > div:first-child iframe {
		width: 100%;
		min-height: 300px;
		height: 100%;
		}
	

/* contact */
[class*='PopUp'] > div.PopContact > div:nth-child(2) {
	grid-row: 2 / span 1;
	grid-column: 1 / span 1;
	}
	
/* Staff */
[class*='PopUp'] > div.PopContact > div:last-child {
	grid-row: 2 / span 1;
	grid-column: 2 / span 1;
	padding: 2em;
	background-color: white;
	}



/* ---------------- C O N T A C T  C A R D ------------------- */
	
.PopUpON > div.PopContactCard {
	max-width: 90%;
		}

	/* See popup.contactcard.css */
	


/* ----------------   E V E N T  ------------------- */


	[class*='PopUp'] > div.PopEvent{
		max-width: 640px;
 		}
 	
	[class*='PopUp'] > div.PopEvent > a::before{
 		content: "En savoir +";
		}
		.EN [class*='PopUp'] > div.PopEvent > a::before{
			content: "Learn more";
			}


/* ---------------- S H A R E  ------------------- */


	/* Title */

	[class*='PopUp'] > div.PopShare h2::before {
		content: "Partager";
		}
		.EN [class*='PopUp'] > div.PopShare h2::before {
			content: "Share";
			}

	/* Icons */

	[class*='PopUp'] > div.PopShare > ul li:nth-child(1) a::before {
		background-image: url(../AFY/images/skin/contact_facebook.svg);
		}
	[class*='PopUp'] > div.PopShare > ul li:nth-child(2) a::before {
		background-image: url(../AFY/images/skin/contact_twitter.svg);
			}
	[class*='PopUp'] > div.PopShare > ul li:nth-child(3) a::before {
		background-image: url(../AFY/images/skin/icon_googleplus.svg);
			}
	
	[class*='PopUp'] > div.PopShare > ul li:nth-child(4) a::before {
		background-image: url(../AFY/images/skin/contact_linkedin.svg);
			}
	
	[class*='PopUp'] > div.PopShare > ul li:nth-child(5) a::before {
		background-image: url(../AFY/images/skin/contact_mail2.svg);
			}
		
	
		

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

	/* Title */

	[class*='PopUp'] > div.PopCalendar h2::before {
		content: "Ajouter au calendier";
		}
		.EN [class*='PopUp'] > div.PopCalendar h2::before {
			content: "Add to calendar";
			}

	/* Icons */
	
	[class*='PopUp'] > div.PopCalendar > ul li:nth-child(1) a::before {
		background-image: url(../AFY/images/skin/icon_apple.svg);
		}
	[class*='PopUp'] > div.PopCalendar > ul li:nth-child(2) a::before {
		background-image: url(../AFY/images/skin/icon_google.svg);
			}
	[class*='PopUp'] > div.PopCalendar > ul li:nth-child(3) a::before {
		background-image: url(../AFY/images/skin/icon_outlook.svg);
			}