/* 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 (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: .6em;
				top: 0em;
				}
				}


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


/* -- Sticky -- */

.sticky { /* JS */ 
	opacity: 1;
	top: 0px; /* Bring back the menu to menu visible */ 
	background-color: white;
	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 */
			}		
			}







/* .................... B U T T O N S .....................*/




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

.Standalone {
	float: left;
	clear: none;
	width: 100%;
	margin-bottom: 4em;
	text-align: center;
	margin-top: 0.25em;
	position: relative;
	width: calc(100% - 1em); /* room for hamberger */
	}
	@media (min-width: 1024px){
		.Standalone {
			width: 100%; 
			}
			}


/* 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	 {
		position: absolute;
		width: 100%;
		}
		@media (min-width: 1024px){
			.Standalone ul.Core	 {
				width: auto;
				}
				}


	


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

/*position*/
.Standalone ul.Core li.Logo,
.Standalone ul.Core li.Top {
	float: left;
	clear: none;
	margin-top: 0.5em;
	z-index: 10;
	}
	@media (min-width: 1024px){
		.Standalone ul.Core li.Logo,
		.Standalone ul.Core li.Top {
			margin-top: 0.65em;
			}
			}
	
/*size*/
.Standalone ul.Core li.Logo a,
.Standalone ul.Core li.Top a {
	background-repeat: no-repeat;
	width: 2em;
	height: 2em;
	}
	@media (min-width: 1024px){
		.Standalone ul.Core li.Logo a,
		.Standalone ul.Core li.Top a{
			width: 2.5em;
			height: 2.5em;
			}
			}
			

/* LOGO */

.Standalone ul.Core li.Logo a {
	}
	@media (min-width: 1024px){
		.Standalone ul.Core li.Logo a {
			width: 7em;
			}
			}
			
	
/*  TOP */

.Standalone ul.Core li.Top {
	margin-left: 1em;
	border-left: 1px solid #e0e0df;
	}
	
	.Standalone ul.Core li.Top a {
		background-image: url(http://assets.afy.yk.ca/_skin/navbar/navbar_top.svg);
		background-size: 50%;
		background-position: center;
		}
		.Standalone ul.Core li.Top a:hover {
			filter: brightness(0); 
			}

		
		
	
			
/* ...... TITLE ....... */


.Standalone ul.Core li.Titre {
	display: inline-block;
	margin-left: -3em; /* accomodate for logo width */
	margin-top: .9em;
	font-size: 1.25em;
	line-height: 0.9em;
	color: #8f8f8f;
	text-transform: uppercase;
	z-index: 0;
	}
	@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: center;
		}
	@media (min-width: 1024px){
		.Standalone ul.Normal {
			flex-direction: row;
			justify-content: flex-end;
			margin-top: 0em;
			margin-right: 4em; /* 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 1px #ccc;
		}
	
		@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;
	   	color: #888888;
		padding-left: 1.25em; /* spacing*/
		padding-right: 1.25em; /* spacing*/
		padding-top: .5em; 
		padding-bottom: .4em;
		}
		@media (min-width: 1024px){
			.Standalone ul.Normal li a {
				padding-top: 1.25em; /*text position */ 
				height: 4.55em; /* height of the buttons */
				}
				}
			
	.Standalone ul.Normal li:not(.Button) a:hover {
		color: black;
		}
			

	/*Button*/
	
	
	.Standalone ul.Normal li.Button {
		/* see buttons.css */
		border: none;	
		}




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


/*Container*/
.Standalone ul.Social {
	display: flex;
	justify-content: center;
	padding-top: 2em;
	}
	@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;
			}
			}

	
.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;
	}