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


	
	
/* ........................ N A V  B A R  .................... */



[class*='NavBar'] {
	position: fixed;
	width: 100%;
	max-width: 100%;
	padding: 0;
	z-index: 1000;
	transition: 0.15s ease;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 10000;
	}
		
	
[class*='NavBar'] > * {
	display: flex;	
	position: absolute;
	}



	
	/* Background */	

	[class*='NavBar']:before {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: white;
		z-index: -10;
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.35);
		opacity: 0.9;
		}
		.PopWrapperON [class*='NavBar']::before {
			opacity: 1;
			}
	
	
	
	/* ......... Normal ........... */
	
	.NavBar {
		height:4.5rem; /* nav.bar.js must match for a smooth effect */
		}
	
	/* ......... shrink ........... */
		
	.PopWrapper .NavBarShrink {
		/*height:1.55rem;*/
		height: 1.8rem;
		}

	/* ......... Pop Nav ON ........... */
	
	.PopWrapperON [class*='NavBar'] {
		height: 3rem;
		}
	



		
	
	

/*  ----- Language Button ----- */

[class*='NavBar'] > a {
	position: absolute;
	display: block;
	width: 3.75rem;
	bottom:  3.1rem;
	bottom:  2.5rem;
	background-color: #d43287;
	color: white;
	z-index: 10;
	border-radius: 0 0 .5rem .5rem;
	padding-top: .75em;
	padding-bottom: .5em;
	text-align: center;
	right: 2.9rem; /* same as first button min-width */
	font-size: .8em;
	}
	

	@media (min-width: 1200px) { /* 4% is now <= 2.9rem)
	/* align with first buttoni width */
		[class*='NavBar'] > a {
			right: 4%;
			}
			}
	/* align with first buttoni width */
	@media (min-width: 2200px) {
		[class*='NavBar'] > a {
			right: calc(50%);
			margin-right: calc(0em - 1012px); /* ((2200px/2) - 4% padding ) */
			}
			}
	
	[class*='NavBar'] > a:hover {
		color: white;
		background-color: #a71d5c;
		}

	.PopWrapperON [class*='NavBar'] > a { 
		bottom: 0.75rem;
		border-radius: .5rem;
		padding-top: 0.25rem;
		padding-bottom: 0.26rem;
		right: calc(1rem + 2.3rem); /* same as first button min-width + a little extra*/
		}
		@media (min-width: 480px) { 
			.PopWrapperON [class*='NavBar'] > a { 
				right: calc(1rem + 2.9rem); /* same as first button min-width + a little extra*/
				}
				}

	
/* ----- Logo ----- */
	
.NavBar > ul::before { 
	content: "";
	display: block;
	position: absolute;
	height: 2rem;
	top: 0.5rem;
	background-size: cover;
	background-position: center;
	background-image: url(../AFY/images/skin/nav_afy.svg);
	transition: 0.3s;
	
	width: 5rem;
	margin-left: -3rem;
	left: 50%;
	}
	
	.PopWrapper .NavBarShrink > ul::before {
		top: -4rem;
		}
	.PopWrapperON .NavBarShrink > ul::before {
		top: 0.5rem;
		}
	
	@media (min-width:400px) {
		.NavBar > ul::before { 
			width: 5rem;
			margin-left: -3rem;
			left: 50%;
			}
			}
	
	
	
	
	
	
	
/* ----- Buttons ----- */ 

/* Structure for all*/

[class*='NavBar'] > ul{
	display: flex;
  	width: 100%;
	padding: 0;
	height: 100%;
	text-align: center;
	}
	
	/*no button by default*/
	[class*='NavBar'] > ul li {
		transition: 0.3s ease-in-out;
		position: relative;
		display: flex;
		margin-bottom: 0;
		opacity: 0;
		width: 0%;
		}
		
		/* Show Current Button */
		:not(.PopWrapperON) > [class*='NavBar'] > ul li.Current {
			opacity: 1;
			}
		
		/* Current Button is full with */
		[class*='NavBar'] > ul li.Current {
			width: 100%;
			}

		@media (min-width:550px) {
			/* show all buttons @ equal width when media is large enough */
			:not(.PopWrapperON) > [class*='NavBar'] > ul li {
				opacity: 1;
				}
			[class*='NavBar'] > ul li,
			[class*='NavBar'] > ul li.Current {
				width: 25%;
				}			
				}
		
		@media (min-width:2200px) {
			/* Fix size on large Meadia */ 
			/* not wider than the Content :  see .ContentWidth in core.layout.css */		
			[class*='NavBar'] > ul li,
			[class*='NavBar'] > ul li.Current  {
				min-width: 506px; /* ((1/4) * ((100%*(4%*2))*2200px)) : 1/4 of .ContentWidth less padding */
				}
				}
	
			
					
	/*links*/
	[class*='NavBar'] > ul li a{
		align-self: flex-end;
		width: 100%;
		height: 1.8rem;
		text-transform: uppercase;
		color: black;
		font-size: 1em;
		padding-top: .3rem;
		padding-bottom: .25rem;
		}
		@media (min-width: 480px) { /* Ovverrides core.typography.css */
			[class*='NavBar'] > ul li a{
				font-size: .8em;
				}
				}

		
		
	/* Link: Current */	
	[class*='NavBar'] > ul li.Current a {
		color: white;
		background-color: #64635e; /* Theme */ 
		}
					
		
	/* Hover */	
	[class*='NavBar'] > ul li a:hover,
	[class*='NavBar'] > ul li.Current a:hover {
		color: white;
		background-color: #d43287; /* Hot Pink */
		}


			
	/* Middle Buttons' pointer */	
			
		[class*='NavBar'] > ul li a::after,
		[class*='NavBar'] > ul li.Current a::after {
			content: "";
			display: block;
			position: absolute;
			width: 0rem;
			height: 0rem;
			left: 50%	;
			transition: .6s;
			margin-left: 0;
			bottom: 0rem;
			border: 0rem solid transparent;
			}
			
			/* Hover + Current */
			[class*='NavBar'] > ul li a:hover::after,
			[class*='NavBar'] > ul li.Current a::after {
				margin-left: -0.75rem;
				bottom: -1.5rem;
				border: 0.75rem solid transparent;
				}
				/* Hover only */
				[class*='NavBar'] > ul li.Current a::after { /* Theme */ 
					border-top: 0.75rem solid #64635e;
					}
				/* Current Only */
				[class*='NavBar'] > ul li a:hover::after {
					border-top: 0.75rem solid #d43287; /* Hot Pink */
					}

			
/* Dividers */
			
	[class*='NavBar'] > ul li:not(:last-child):nth-child(n+2) a {
		border-left: 1px solid #d0d0ce; /* Theme 30% */
		}
	[class*='NavBar'] > ul li:nth-last-child(2) a {
		border-right: 1px solid #d0d0ce; /* Theme 30% */
		}



/* --- First and Last --- */


	/* Overrides: see Middle Buttons' */

	/* show always */
	[class*='NavBar'] > ul li:first-child,
	[class*='NavBar'] > ul li:last-child {
		opacity: 1;
		}
			
			
	/* no background */
	[class*='NavBar'] > ul li:first-child a:hover,
	[class*='NavBar'] > ul li:last-child a:hover {
		background-color: transparent; 
		}
		
		
	/* Right align last (contact) on small media (PORTAL PAGES ONLY) */
	@media (max-width:549px) {
	.Portal [class*='NavBar'] > ul li:last-child {
		position: absolute;
		right: 0;
		bottom: 0;
		}
		}
			
						
		
		
	/* size */
	
	@media (max-width:2200px) {
		/* match "ContentWidth" padding */
		[class*='NavBar'] > ul li:first-child,
		[class*='NavBar'] > ul li:last-child {
			width: 4%; 
			min-width: 2.9rem;
			transition: width 0;
			}
			}
			
	@media (min-width:2200px) {
		/* fill the gap when media larger than .ContentWidth */
		[class*='NavBar'] > ul li:first-child,
		[class*='NavBar'] > ul li:last-child {
			min-width: 0;
			}
			}	
					
			
						
	/*Link*/
	[class*='NavBar'] > ul li:first-child a,
	[class*='NavBar'] > ul li:last-child a{
		height: 100%;
		display: flex;
		}
		/* No pointer */
		[class*='NavBar'] > ul li:first-child a::after,
		[class*='NavBar'] > ul li:last-child) a::after {
				content: none;
				}	
		
		
	/* Text area --- */
	[class*='NavBar'] > ul li:first-child a:after,
	[class*='NavBar'] > ul li:last-child a:after {
		text-transform: uppercase;
		border: none;
		margin: 0; /* Overrides default pointer*/
		width: 90%;
		text-align: center;
		position: absolute;
		bottom: 1.75em;
		left: 5%;
		font-size: .6em;
		line-height: 1em;
		color: black;
		}
	
		/* First : MENU */
			
		.PopWrapper :not(.NavBarShrink)[class*='NavBar'] > ul li:first-child a:after {
			content: "Menu";
			}
		.PopWrapperON [class*='NavBar'] > ul li:first-child a:after {
			content: "Fermer";
			}
		.EN .PopWrapperON [class*='NavBar'] > ul li:first-child a:after {
			content: "Close";
			}
				
		/* Last : CONTACT */
		
		.PopWrapper :not(.NavBarShrink)[class*='NavBar'] > ul li:last-child a:after,
		.PopWrapperON [class*='NavBar'] > ul li:last-child a:after {
	 		content: "Contact";	
			}

	
	/* Last icon : C O N T A C T */
	
	[class*='NavBar'] > ul li:last-child a::before {
		content: "";
		position: absolute;
		display: block;
		width: 15px;
		height: 15px;
		left: 50%;
		margin-left: -0.55rem;
		bottom: 1.5rem;
		background-image: url(../AFY/images/skin/nav_location.svg);
		background-size: cover;
		background-position: center;
		transition: .3s;
		filter: brightness(0);
		}
	
		[class*='NavBar'] > ul li:last-child a:hover::before {
			filter: brightness(.25) saturate(150) hue-rotate(255deg); /* hot pink */
			}
				
		/* shrinked */
		.NavBarShrink > ul li:last-child a::before {
			bottom: 0.35rem;
			}
		/* Pop Nav ON */
		.PopWrapperON [class*='NavBar'] > ul li:last-child a::before {
			bottom: 1.25rem;
			}
		


/* First Icon :  H A M B E R G E R   */

/*Icon container */	

a.Hamberger > span {
	display: block;
	position: absolute;
	bottom: 1.5rem;
	height: .95rem;
	width:  .95rem;
	left: 50%;
	margin-left:  -0.425rem;
	}
	
	.PopWrapper .NavBar a.Hamberger > span{
		bottom: 1.4rem;
		}
	
	.PopWrapper .NavBarShrink a.Hamberger > span{
		bottom: .4rem;
		}
	
	.PopWrapperON .NavBar a.Hamberger > span{
		bottom: 1.25rem;
		}

		
	/* Rows */
		
	a.Hamberger span > span {
		display: block;
		opacity: 1;
		position: absolute;
		left: 40%;
		width: 20%;
		padding-top: 20%;
		transition: all 0.5s, transform 1s;
		}
		
		/* Row 1*/	
		a.Hamberger span > span:nth-of-type(1) {
			top: 0;
			}
		/* Row 2*/	
		a.Hamberger span > span:nth-of-type(2) {
			top: 40%;
			}
		/* Row 3*/
		a.Hamberger span > span:nth-of-type(3) {
			top: 80%;
			}	
		
		
	/* Columnss */
	
		a.Hamberger span > span::before,
		a.Hamberger span > span::after {
			content: "";
			transition: .25s;
			display: block;
			position: absolute;
			width: 100%;
			padding-top: 100%;
			top: 0;
			}
			a.Hamberger span > span::before {
				left: -200%;
				}
			a.Hamberger span > span::after {
				left: 200%;
				}
	
	/* background */
	
		a.Hamberger span > span,
		a.Hamberger span > span::before,
		a.Hamberger span > span::after {
			background-color: black;
			}		
			/* hover */
			a.Hamberger:hover span > span,
			a.Hamberger:hover span > span::before,
			a.Hamberger:hover span > span::after {
				background-color: #d43287;
				}
			
		
	/* ------- ANNIMATION (X) --------*/
	
	/* Expand */
	.PopWrapperON a.Hamberger span > span{
			/*width: 20%;*/
			}
	.PopWrapperON a.Hamberger span > span::before{
			width: 250%;
			}
	.PopWrapperON a.Hamberger span > span::after {
			left: 50%;
			width: 250%;
			}
			
	/* disapear */
		.PopWrapperON a.Hamberger span > span:nth-of-type(2) {
			opacity: 0;
			}
	
	/* Spin */
		.PopWrapperON a.Hamberger span > span:nth-of-type(1) {
			transform: rotate(315deg);
			top: 40%;
			}
		.PopWrapperON a.Hamberger span > span:nth-of-type(3) {
			transform: rotate(-315deg);
			top: 40%;
			}
			
		
		




/* ........................ P O P  N A V .................... */


/* ..... Main Nav OFF ......*/
	
.PopWrapper .PopNav {
	height: 0%;
    overflow: hidden;
	z-index: 1000;
	top: 3em;
	}



/* Pop NAv */		
.PopWrapperON .PopNav {
    height: calc(100vh - 3rem); 
    width: 100%;
    position: fixed;
    overflow: scroll;
    left: 0;
    background-color: black;
    transition: 0.3s 0.15s; /* allows for Navbar to resize first */
	z-index: 1000;
	top: 3em;
	}