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




/* .................... N A V  B A R /  S T I C K Y  ......................*/ 


/* ...js... */
/* Classes below are refered to in nav.js. Do not rename */


/* --- top bar --*/
.main_h {
	position: fixed;
	z-index: 10;
	width: 100%;
	background: none;
	overflow: hidden;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0;
	height: 3.25em; /* browser nav bar height on mobile*/
	top: -3.25em; /* hide the menu to prevent ghost navigation */
	}
	.main_h > .ContentWidth {
		padding-top: 0;
		}
		@media (max-width: 1023px){
			.main_h > .ContentWidth {
			padding: 0;
			}
			}



	@media (min-width: 1024px){
		.main_h {
			top:-4em; /* hide the menu to prevent ghost navigation */
			background-repeat: repeat-x;
			background-position: center -2.85em;
			padding-top: .5em;
			}
			.main_h::before {
				content: "";
				display: block;
				position: absolute;
				width: 100%;
				height: 0.6rem;
				top: 0em;
				}
				}


.open-nav { /*JS */
	min-height: 100%; /* height of the mobile Nav */
	height: 100%; /* height of the mobile Nav */
	}
	@media (min-width: 1024px){
		.open-nav {
			min-height: 3em; /* height of the mobile Nav */
			}
			}


/* -- Sticky -- */

.sticky { /* JS */ 
	opacity: 1;
	top: 0px; /* Bring back the menu to menu visible */ 
	background-color: #64635e;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	height: 3.25em; /* browser nav bar height */
	}
	@media (min-width: 1024px){
		.sticky {
			background-color: rgba(255, 255, 255, 0.95);
			}
		.main_h {
			height: 4.5em; /* browser nav bar height */
			}		
			}



/* .................... S I D E B A R .....................*/




/* ................. ACTIVATION ................ */

.Side .ContentWidth  {
	transition: 0.25s;
	display: grid;
	grid-template-columns: 8rem auto;
	}
.SideOn .ContentWidth  {
	transition: 0.25s;
	display: grid;
	grid-template-columns: 100vw auto;
	}
	/* make room for full width */
	@media (min-width:1024px) {
		.SideOn .ContentWidth {
		max-width: none;
		padding-left: 0;
		padding-right: 0;
		}
		}




.SideOn.main_h { /*JS */
	min-height: 100%; /* height of the mobile Nav */
	height: 100%; /* height of the mobile Nav */
	}







/* .................... TRIGGER.....................*/


	.SideTrigger {
		width: 8em;
		position: absolute;
		display: flex;
		color: white;
		text-transform: uppercase;
		top: 0;
		height: 3.25em;
		}
		@media (min-width:1024px) {
			.SideTrigger {
				height: 4rem;
				}
				}
		
		
		
		.SideTrigger a{
			display: block;
			padding-left: 2.35em;
			width: 8rem;
			padding-top: 1.15rem;
			color: white;
			background-color: #203A48; /* Navy */
			}
			@media (min-width:1024px) {
				.SideTrigger a{
					padding-top: 1.5rem;
					}
					}
			
			.SideTrigger a:hover{
				background-color: #294A5C; /* Navy lighter*/
				}
			
			
			/*Extended trigger for mobile phone */
			.SideTrigger a span {
				content: "";
				position: absolute;
				display: block;
				top: 0;
				left: 0;
				width: 8rem;
				height: 100vh;
				z-index: 100;
				background-image: url(https://assets.afy.ca/_skin/navbar/navbar_expand.svg);
				background-size: 1em;
				background-repeat: no-repeat;
				background-position: right center;
				filter: opacity(0.25) brightness(1.5);
				}
				.SideTrigger a:hover span {
					filter: opacity(1) brightness(1.5);
					}
				
				/*Hide when navbar is open */
				.SideOn .SideTrigger a span {
					display: none;
					}
					
					
					
			
		/*icon*/				
		.SideTrigger a::before{
			content: url(https://assets.afy.ca/_skin/navbar/navbar_menu.svg);
			display: block;
			position: absolute;
			top: 1rem;
			left: 1rem;
			width: 1.125rem;
			height: 1.125rem;
			filter: brightness(1.25);
			transition: 1s;
			}
			@media (min-width:1024px) {
				.SideTrigger a::before{
					top: 1.5rem;
					}
					}
				
			.SideOn .SideTrigger a::before{
				transform: rotate(360deg);
				content: url(https://assets.afy.ca/_skin/navbar/navbar_close.svg);
				}



		/* Lable */	
		
		.SideTrigger a::after {
			content: "Menu";
			}		
			.SideOn .SideTrigger a::after {
				content: "Fermer";
				}
				





/* .................... SIDE BAR .....................*/



.SideBar {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	position: relative;
	overflow: hidden;
	height: calc(100vh - 3.25em);
	transition: 0.25s;
	z-index: 10;
	margin-top: 3.25rem;
	margin-left: calc(8rem - 100vw);
	width: 100vw;
	}
	@media (min-width:1024px) {
		.SideBar {
			margin-top: 4em;
			margin-left: 0;
			width: 50%;
			}
			}
	

	.SideOn .SideBar {
		margin-left: 0;
		width: 100vw;
		}
		@media (min-width:1024px) {
			.SideOn .SideBar {
				width: 100%;
				}
				}
		
/* .................... SIDE CONTENT .....................*/
		
		
	.SideContent {
		display: flex;
		/*overflow: hidden;*/
		overflow: scroll;
		white-space: nowrap;
		text-align: right;
		}
		@media (min-width:1024px) {
			.SideContent {
				}
				}
		
		



/* .................... S T A N D A L O N E .....................*/




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

.Standalone {
	margin-bottom: 4em;
	position: relative;
	}
	@media (min-width: 1024px){
		.Standalone {
			/*width: 100%; */
			margin-top: 0.25em; 
			}
			}

	/*If Side Menu is present*/
	@media (min-width: 1024px){
			.Standalone {
				margin-left: 1rem;
				}
				}

	

/* Generic */

.Standalone ul {
	list-style-type: none;
	overflow: hidden;
	padding-left: 0px;
	}
	.Standalone ul a {
		display: block;
		width: 100%;
		text-decoration: none;
		}


/* ........... C O R E ............ */

	
	.Standalone ul.Core	 {
		margin-bottom: 0;
		background-color: white;
		padding-top: 3.25rem;
		}
		@media (min-width: 1024px){
			.Standalone ul.Core	 {
				background-color: transparent;
				}
				}




/* ...... LOGO / HOME  / TOP....... */

	/* Shared Position*/
	.Standalone ul.Core li.Logo,
	.Standalone ul.Core li.Home,
	.Standalone ul.Core li.Top {
		position: absolute;
		top: 0.5rem;
		}
		@media (min-width: 1024px){
			.Standalone ul.Core li.Logo,
			.Standalone ul.Core li.Home,
			.Standalone ul.Core li.Top {
				/*margin-top: 0.65em;*/
				top: .75rem;
				}
				}
		
	/* Shared Size*/
	.Standalone ul.Core li.Logo a,
	.Standalone ul.Core li.Home a,
	.Standalone ul.Core li.Top a {
		background-repeat: no-repeat;
		width: 2rem;
		height: 2rem;
		/*background-color: olive;*/
		}


/* ...... HOME / TOP....... */


	@media (min-width: 1024px){
		.Standalone ul.Core li.Home,
		.Standalone ul.Core li.Top {
			top: 1em;
			}		
			}
			

	.Standalone ul.Core li.Home a,
	.Standalone ul.Core li.Top a {
 		background-image: url(https://assets.afy.ca/_skin/navbar/navbar_home.svg);
		background-position: center;
		background-size: 75%;
		}
		@media (min-width: 1024px){
			.Standalone ul.Core li.Home a,
			.Standalone ul.Core li.Top a{
				/*width: 2.5rem;*/
				/*height: 2.5rem;*/
				background-size: 65%;
				}		
				}			

		
	.Standalone ul.Core li.Home a:hover,
	.Standalone ul.Core li.Top a:hover {
			filter: brightness(0.5); 
			}



				
				
/* LOGO */
	.Standalone ul.Core li.Logo {
		left: 1rem;
		border-right: 1px solid #d0d0ce;*/
		margin-left: 1rem;
		padding-right: 1rem;
		}
		@media (min-width: 1024px){
			.Standalone ul.Core li.Logo {
				left: 0;
				}
				}

		@media (min-width: 1024px){
			.Standalone ul.Core li.Logo a {
				width: 7rem;
				height: 2.5rem;
				}
				}



/*  HOME */

	.Standalone ul.Core li.Home {
		left: 5rem;
		}
		@media (min-width: 1024px){
			.Standalone ul.Core li.Home {
				left: 8.5rem;
				}
				}
	.Standalone ul.Core li.Home a {
		background-image: url(https://assets.afy.ca/_skin/navbar/navbar_home.svg);
		}
			
		
/*  TOP */

	.Standalone ul.Core li.Top {
		display: none;
		left: 7rem;
		}
		
		
		@media (min-width: 1024px){
			.Standalone ul.Core li.Top {
				display: block;
				left: 8.5rem;
				}
			.Standalone ul.Core li.Home + li.Top 	{
				left: 10.5rem;
				}
				}			
	.Standalone ul.Core li.Top a {
		background-image: url(https://assets.afy.ca/_skin/navbar/navbar_top.svg);
		}
		
		
		
	
			
/* ...... TITLE ....... */


.Standalone ul.Core li.Titre {
	display: block;
	font-size: 1.25em;
	line-height: 0.9em;
	text-transform: uppercase;
	z-index: 0;
	width: 100%;
	margin-bottom: 0;
	border-top: 1px solid #d0d0ce;
	}
	.Standalone ul.Core li.Titre a{
		color: black;
		padding-bottom: 1em;
		padding-top: 1em;
		padding-left: 3em;
		}
		.Standalone ul.Core li.Titre a::before{
			content: url(https://assets.afy.ca/_skin/navbar/navbar_top.svg);
			position: absolute;
			display: block;
			width: 1.25rem;
			height: 1.25rem;
			top: 4.5rem;
			left: 1em;
			}
		
		
		
	.Standalone ul.Core li.Titre a:hover{
		background-color: #c1c1bf;
		}
		.Standalone ul.Core li.Titre a:hover::before {
			filter: brightness(.5);
			}


		

	
	
	
	@media (min-width: 1024px){
		.Standalone ul.Core	 li.Titre {
			display: none;
			}
			}



/* .......... N O R M A L ..........*/


/*container*/
.Standalone ul.Normal {
	/*float: left;*/
	display: flex;
	flex-direction: column;
	/*margin-top: 3em;*/
	width: 100%;
	font-size: 1em;
	line-height: 1em;
	font-weight: normal;
	text-align: left;
	margin-top: 0em;
	border-bottom: 2px solid #51504a;
	}
	@media (min-width: 1024px){
		.Standalone ul.Normal {
			flex-direction: row;
			justify-content: flex-end;
			margin-top: -3.4em;
			margin-right: 3em; /* for social area */
			width: auto;
			}
			}
				
	/*Listings*/
	.Standalone ul.Normal li {
		float: left;
		width: 100%;
		clear: none;
		margin-bottom: 0;
		}
	
	.Standalone ul.Normal li:nth-child(n+2) {
		border-top: solid 2px #51504a;
		}
	
		@media (min-width: 1024px){
			.Standalone ul.Normal li {
				width: auto;
				}
			.Standalone ul.Normal li:nth-child(n+2) {
				border-top: none;
				}	
				}

	/*links*/
	.Standalone ul.Normal li a {
		white-space: nowrap;
		padding-left: 3.5em; /* spacing*/
		padding-right: 0.5em; /* spacing*/
		padding-top: 1em; 
		padding-bottom: 1em;
		color: white;
		}
		@media (min-width: 1024px){
			.Standalone ul.Normal li a {
				padding-top: 1.5em; /*text position */ 
				padding-left: 1.25em; /* spacing*/
				height: 4.55em; /* height of the buttons */
			   	color: #888888;
				}
				}
	.Standalone ul.Normal li:not(.Button) a:hover {
		background-color: #51504a;
		}
		
		
	@media (max-width: 1024px){
			.Standalone ul.Normal li.Button:hover {
				background-color: #51504a;
				}
				}
		
		
		
		
		@media (min-width: 1024px){
			.Standalone ul.Normal li:not(.Button) a:hover {
				color: black;
				background-color: transparent;
				}
				}
	
	
	
	
	
	
	/* Link Icones */
		.Standalone ul.Normal li a::before {
			content: "";
			position: absolute;
			left: 1em;
			right: 0;
			height: 1.5em;
			width: 1.5em;
			background-repeat: no-repeat;
			background-image: url(https://assets.afy.ca/_skin/navbar/navbar_lower.svg);
			}
			@media (min-width: 1024px) {
				.Standalone ul.Normal li a::before {
						content: none;
						}
						}
		.Standalone ul.Normal li a:hover::before {
			filter: brightness(1.5);
			}



	/* Button */

	.Standalone ul.Normal li.Button {
		margin-top: 0;
		position: relative;
		}
		@media (min-width:1024px) {
			.Standalone ul.Normal li.Button {
				padding-left: 1rem;
				}
				}


		
	@media (max-width:1024px) {
		.Standalone ul.Normal li.Button a {
			margin-left: 3.5rem;
			}
			}
	@media (min-width:1024px) {
		.Standalone ul.Normal li.Button a {
			margin-top: 1.25rem;
			padding-top: 0.3rem;
			}
			}				

	.Standalone ul.Normal li.Button a::before {
		width: 100% ;
		left: 0;
		top: 0;
		height: 4.35rem;
		background-size: 1.75em;
		background-position: 1rem 1rem;
		}



/* ........... S O C I A L  /  C O N T A C T......... */


/*Container*/
.Standalone ul.Social {
	display: flex;
	justify-content: center;
	padding-top: 1rem;
	}
	@media (min-width: 1024px){
		.Standalone ul.Social {
			position: absolute;
			padding-top: 1.25em;
			top: 0;
			right: 0;
			width: auto;
			}
			}	
		
	/*Listings*/
	.Standalone ul.Social li{
		float: right;
		margin: 0;
		margin-left: .25em;
		height: 1.25em;
   		width: 1.25em;
		transition: 0; /* Fix jumpy hover effec in Safari */
		}

	/*links*/
	.Standalone ul.Social li a{
		width: 100%;
		height: 100%;
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
		}
		.Standalone ul.Social li a:hover{
			filter: brightness(0);
			}	

		/* Contact */ 	
		.Standalone ul.Social li a.Contact {
			background-image: url(../../_skin/social/icon_social_contact.svg);
			}
		
		/* Facebook */ 
		.Standalone ul.Social li a.Facebook {
			background-image: url(../../_skin/social/icon_social_facebook.svg);
			}
	
		/* Flickr */ 
		.Standalone ul.Social li a.Flickr {
			background-image: url(../../_skin/social/icon_social_flickr.svg);
			}
			
		/* Google */ 
		.Standalone ul.Social li a.Google {
			background-image: url(../../_skin/social/icon_social_google.svg);
			}
			
		/* Instagram */ 
		.Standalone ul.Social li a.Instagram {
			background-image: url(../../_skin/social/icon_social_instagram.svg);
			}
			
		/* LinkedIn */ 
		.Standalone ul.Social li a.LinkedIn {
			background-image: url(../../_skin/social/icon_social_linkedin.svg);
			}
			
		/* Mail */ 
		.Standalone ul.Social li a.Mail {
			background-image: url(../../_skin/social/icon_social_mail.svg);
			}
			
		/* Soundcloud */ 
		.Standalone ul.Social li a.Soundcloud {
			background-image: url(../../_skin/social/icon_social_soundcloud.svg);
			}	
			
		/* Twitter*/ 
		.Standalone ul.Social li a.Twitter {
			background-image: url(../../_skin/social/icon_social_twitter.svg);
			}
			
		/* Vimeo*/ 
		.Standalone ul.Social li a.Vimeo {
			background-image: url(../../_skin/social/icon_social_vimeo.svg);
			}	
		
		/* Youtube */ 
		.Standalone ul.Social li a.Youtube {
			background-image: url(../../_skin/social/icon_social_youtube.svg);
			}	





			
/* .......... H A M B E R G E R ..........*/


.mobile-toggle {
	display: block;
	position: absolute;
	cursor: pointer;
	font-size: 1.1em;
	right: 1em;
	top: .75em;
	width: 1em;
	transition: all 200ms ease-in;
	-moz-transition: all 200ms ease-in;
	-webkit-transition: all 200ms ease-in;
	}
	@media (min-width: 1024px){
		.mobile-toggle {
			right: 2em;
			}
			}

	/* Hide if SideBar is On */
	.SideOn .mobile-toggle {
		display: none;
		}




	
.mobile-toggle span {
	width: 100%;
	height: .2em;
	margin-bottom: .25em;
	border-radius: 10px;
	background: black;
	display: block;
	}
	
.open-nav .mobile-toggle {
		transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		}

			
	@media (min-width: 1024px){
		.mobile-toggle {
			display: none;
			}
			}
	


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

a.English {
	position: absolute;
	top: 0px;
	background-color: white;
	color: #666;
	border-radius: 0 0 8px 8px;
	text-decoration: none;
	vertical-align: middle;
	z-index: 20;
	padding: .5em 1em .5em 1em;
	transition: .3s;
	right: 35%;
	width:  30%;
	font-size: .65em;
	text-align: center;
	}
	@media (min-width: 480px){
		a.English {
			width:  auto;
			right: 4em;
			margin-right: 1em;
			font-size: 1em;
			}
			}



a.English:hover {
	text-decoration: none;
	color: black;
	}