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


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



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

[class*='PopUp'] {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
    overflow: hidden;
	z-index: 10000;
	top: 0;
	transition: 0.25s;
	-webkit-backdrop-filter: blur(1px);
	width: 100%;
	height: 0%;
	}
	.PopUpON {
		padding: 1rem;
		height: 100%;
		}
		
		/* Room for close button 
		   Don't change the code order */
		
		@media (min-width: 800px) and (min-height: 600px) {
			.PopUpON {
				padding: 2.5rem;
				}
				}
		@media (min-width: 1200px) and (min-height: 1024px) {
			.PopUpON {
				padding: 3.5rem;
				}
				}
				/* this must come after the above*/		
		@media (orientation: landscape) and (max-height: 340px) {
			.PopUpON  {
				padding-left: 3.5rem ;
				}
				}
		@media (min-height: 340px) {
			.PopUpON  {
				padding-top: 3.5rem;
				}
				}

		
		

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

/* Trigger */

[class*='PopUp'] > a {
	position: fixed;
	top: 0;
	left: 0;
	background-color: red; /* 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(https://assets.afy.ca/_skin/nav/nav_close.svg);
		background-size: 2rem;
		background-repeat: no-repeat;
		background-position: center .75rem;
		transition: 0.25s;
		}
		/* lanscape mobile */
		@media (orientation: landscape) and (max-height: 340px) {
			[class*='PopUp'] > a::before {
				background-position:  .75rem center;
				}
				}

		[class*='PopUp'] > a:hover::before {
			filter: brightness(2);
			}
			



		

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

[class*='PopUp'] > div {
	z-index: 3000;
	position: relative;
	overflow: auto;
	border-radius: 2em;
	background-color: white;
	box-shadow: .5em .5em 2em rgba(0,0,0,0.5);
	transition: 0.25s;
	width: 0%;
	opacity: 0;
	}	
	.PopUpON > div {
		opacity: 1;
		width: 100%;
		max-width: 2000px;
		min-width: 180px;
		min-height: 220px;
		max-height: 100%;
		}




	

/* ------------- P O P  G R I D  I C O N S--------*/ 

/* Dialog Box */

[class*='PopUp'] > div.PopGrid {
	text-align: center;
	padding-left: 1em;
	padding-right: 1em;
	max-width: 500px;
	max-height: 300px;
	}
	@media (min-height: 600px) {
		[class*='PopUp'] > div.PopGrid {
			padding-bottom: 1.5em;
			}
			}


/* Head */ 
	[class*='PopUp'] h2 {
		font-family: Bold;
		font-size: 1.75em;
		letter-spacing: -.05em;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		}


/* Group */

[class*='PopUp'] > div.PopGrid > ul {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	/*align-content: flex-start;*/
	  align-content: center;

	list-style: none;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 400px;
	}
	
/* Items */

	[class*='PopUp'] > div.PopGrid > ul li {
		position: relative;
		width: 33.33%;
		text-align: center;
		margin-bottom: 1em;
		transition: 0.25s;
		}
		@media (min-height: 340px) {
			[class*='PopUp'] > div.PopGrid > ul li {
				margin-bottom: 1.5em;
				}
				}
		@media (min-height: 600px) {
			[class*='PopUp'] > div.PopGrid > ul li {
				margin-top: 1em;
				}
				}			

	/*url */
	
	[class*='PopUp'] > div.PopGrid > ul a {
		display: block;
		margin-top: 2.75rem;
		text-align: Center;
		margin-bottom: 0em;
		font-size: 1.1em;
		}
			
	[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.25rem;
			height: 2.25rem;
			margin-left:  -1.125em;
			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;
	}




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


	/* Title */

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


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


/* ...  GRID ... */

	
	/* Core */
	[class*='PopUp'] > div.PopContact {
		display: grid;
		height: 100%;
		padding: 0;
		}
		
		[class*='PopUp'] > div.PopContact {
			grid-template-columns: 100%;
			grid-template-rows:  minmax(12em, 100%) minmax(12em, 20%);
			}
						
		@media (min-width:640px) and (min-height:430px) {
			[class*='PopUp'] > div.PopContact {
				grid-template-columns: 75% 25%;
				}
				}
		@media (min-width:800px) and (min-height:1024px){
			[class*='PopUp'] > div.PopContact {
				grid-template-rows:  minmax(12em, 100%) minmax(24em, 35%);
				}
				}		
		
	/* 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 */
	@media (max-width:639px) {
		[class*='PopUp'] > div.PopContact > div:last-child {
			display: none
			}
			}
	
	[class*='PopUp'] > div.PopContact > div:last-child {
		grid-row: 2 / span 1;
		grid-column: 2 / span 1;
		background-color: #d0d0ce;
		}
		
		
		
/* ... Map Layout ... */		
		
	/* CONTACT: See object.map.css */
	
	
	
/* ... Contact Layout ... */	
	
	/* CONTACT: See core.footer.css */
	
	
	

/* ... Staff Layout ... */

/* Tile */	
.Staff {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		text-align: center;
		padding-left: 1em;
		padding-right: 1em;
		}
		@media (min-height:1024px) {
			.Staff {
				font-size: 1.2em;
				}
				}
	
	/* Groups*/
	.Staff > * {
		width: 100%;
		}

	/* Title */ 
	.Staff h3 {
		position: relative;
		align-self: center;
		font-family: Book;
		letter-spacing: -0.05em;
		padding-top: 2.5em; /* Room for icon */
		margin-bottom: 0.5em;
		}


	/* Mail url */
	.Staff h3 a {
		position: relative;
		padding-top: 2.75em; /* Room for icon */
		font-size: .85em;
		color: #51504a; /* Theme */
		}
		.Staff h3 a:hover {
			color: #b20566; /* feeatured */
			}
		
		/* Icon */ 
		.Staff h3 a:before {
			content: "";
			display: block;
			position: absolute;
			height: 2.5em;
			width: 2.5em;
			left: 50%;
			margin-left: -1.25em;
			top: 0;
			background-image: url(https://assets.afy.ca/_skin/icons/icon_team.svg);
			background-repeat: no-repeat;
			background-color: transparent;
			filter: brightness(.4); 
			}
			.Staff h3 a:hover:before{
				background-color: transparent;
				background-blend-mode: luminosity;
				filter: brightness(.5) saturate(150) hue-rotate(255deg); /* Darker hot pink */
				}

	/* Alt URL */
	.Staff p {
		font-size: .85em;
		}







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

	/* See: popup.contactcard.css */
	


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



	[class*='PopUp'] > div.PopEvent{
		max-width: 500px;
		}

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

	/* See: events.listings.css */





/* ---------------- 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(https://assets.afy.ca/_skin/social/social_facebook.svg);
		}
	[class*='PopUp'] > div.PopShare > ul li:nth-child(2) a::before {
		background-image: url(https://assets.afy.ca/_skin/social/social_twitter.svg);
			}
	[class*='PopUp'] > div.PopShare > ul li:nth-child(3) a::before {
		background-image: url(https://assets.afy.ca/_skin/social/social_google.svg);
			}
	[class*='PopUp'] > div.PopShare > ul li:nth-child(4) a::before {
		background-image: url(https://assets.afy.ca/_skin/social/social_linkedin.svg);
			}
	[class*='PopUp'] > div.PopShare > ul li:nth-child(5) a::before {
		background-image: url(https://assets.afy.ca/_skin/social/social_mail.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(https://assets.afy.ca/_skin/popups/pop_apple.svg);
		}
	[class*='PopUp'] > div.PopCalendar > ul li:nth-child(2) a::before {
		background-image: url(https://assets.afy.ca/_skin/popups/pop_google.svg);
			}
	[class*='PopUp'] > div.PopCalendar > ul li:nth-child(3) a::before {
		background-image: url(https://assets.afy.ca/_skin/popups/pop_outlook.svg);
			}