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


/* .NavService applies to the Service page */



body.Lock {
    overflow: hidden;
	}





/* ------------- G E O M E T R Y ------------ */


/* Nav Container */

.NavMain,
.NavServices {
	display: flex;
	flex-wrap: wrap;
	}
	.NavServices {
		font-size: 1.5em;
		}

.NavMain {
	height: 100%;
	}


/* -------------- D E F A U L T S -------------- */


/*.... Tiles ....*/
	
	/* STACKED GRID */ 
		.NavMain > div,
		.NavServices > div {
			position: relative;
			width:  100%;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			justify-content: center;
			align-items: center;
			padding-top: 6em; /* allows for section title */
			padding-bottom: 1em;
			}
			
		
	/* QUAD GRID */ 
		@media (min-width: 800px){
			.NavMain > div,
			.NavServices > div {
				overflow: hidden;
				}
			.NavMain > div {
				width:  50%;
				height: 50%;
				min-height: 20em;
				}
				}

		


/*.... Section Head ....*/
	
	.NavMain h2,
	.NavServices h1 {
		display: block;
		width: 100%;
		text-align: center;	
		margin-bottom: 0;
		}
	
	.NavMain h2 {
		margin-top: 3rem;
		margin-bottom: 1em;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		}
		
		/* Button */
		.NavMain h2 a {
			padding-left: 4em;
			padding-right: 4em;
			padding-top: 0.25em;
			padding-bottom: 0.25em;
			border-radius: 2em;
			font-family: Book;
			letter-spacing: 0;
			font-size: .575em;
			text-transform: uppercase;
			color: white;
			background-color: rgba(255,255,255,.15);
			}
			.NavMain h2 a:hover {
				background-color: rgba(212,50,135,1);
				}
			.NavMain h2 a:visited {
				color: white;
				}
			@media (min-width: 480px){
				.NavMain h2 a{
					font-size: .38em;
					}
					}




	
/*.... Menus Groups ....*/

					
	/* Backgroud as Icon*/
	.NavMain ul,
	.NavMain li a,
	.NavServices ul,
	.NavServices li a {
		background-repeat: no-repeat;
		z-index: 100 !important;
		}
		
		
	/* STACKED GRID */
	
	.NavMain ul,
	.NavServices ul {
		display: flex;
		width: 90%;
		padding: 0;
		margin-top: 0;
		margin-bottom: 0;
		}
		@media (min-width: 480px) {
			.NavMain ul,
			.NavServices ul {
				max-width: 350px;
				}
				}
		/*horisontal dividers*/
			.NavMain ul:nth-of-type(n+2) {
				border-top: 1px solid rgba(255,255,255,0.2);
				}		
				

	/* QUAD GRID */
	
	@media (min-width: 800px){
	 	.NavMain ul {
	 		flex-flow: column;
	 		justify-content: flex-start;
	 		width: 25%;
	 		min-width: 170px;
	 		max-width: 240px;
	 		/*min-height: 12em;*/
			}
		/*horisontal dividers*/
		.NavMain ul:nth-of-type(n+2) {
			border-top: none;
			}
		/*vertical dividers*/
		 .NavMain ul:nth-of-type(n+2)  {
		 	border-left: 1px solid rgba(255,255,255,0.2);
		 	}
		 	}



		
/*.... Buttons ....*/


	/* STACKED GRID */

	.NavMain li,
	.NavServices li {
		display: flex;
		margin-top: 0;
		margin-bottom: 0;
		justify-content: center;
		width: 100%;
		}

	/* link */
	.NavMain li a,
	.NavServices li a{
		transition: 0;
		font-size: 1.1em;
		line-height: 1.3em;
		text-align: center;
		justify-content: center;	
		padding-bottom: 1.5em;
		padding-top: 4.5em;
		background-size: 2.4em;
		background-position: center 1.5em;
		color: white;

		}
		.NavMain li a:visited,
		.NavServices li a:visited {
			color: #b1b1ae; /* neutral 50% */
			}
		.NavMain li a:hover,
		.NavServices li a:hover {
			color: white; /* neutral 50% */
			filter: brightness(3);
			}
		
		@media (min-width: 480px) {
			.NavMain li a,
			.NavServices a{
				font-size: .8em;
				}
				}
	




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

	
	/*... Tile ...*/
	
	#Calendrier {
		background-color: #1c1c18; /* Almost black */
		justify-content: center;
		align-items: center;
		}


	/*... Menu Groups ...*/

	#Calendrier ul {
 		flex-flow: row;
		width: 50%;
		min-width: 200px;
		max-width: 300px;
		}
		@media (min-width: 800px){
			#Calendrier ul {
			max-width: 450px;
			}
			}
		
	/* .... Buttons .... */ 
	
	#Calendrier li a {
		font-size: 1.1em;
		max-width: 120px;
		min-height: 3rem;
		padding-top: 4em;
		padding-left: .5rem;
		padding-right: .5rem;
		background-position: center 0.5em;
		background-size: 3rem 3em;
		}







		
/* ------- S E R V I C E  ----------- */

	/*... Tile ...*/

	#Services {
		/*top align*/
		align-items: flex-start;
		
		}
		/* Background image */
		#Services::before {
			content: "";
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-size: cover;
			background-position: center center;
			z-index: -10;
			}
			.NavMain #Services::before {
				background-image: url(../AFY/images/nav/services.jpg);
				}
				
	@media (min-width: 800px) {
		#Services {
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			}
			}

		
		
		
		
	/*... Menus groups ...*/

		/* 1 cols */
			/* STACKED GRID */ 
			#Services ul { /*ovverrides default */
				flex-flow: column;
				background-position: 0.75em 1em;
				background-size: 1.8em;
				padding-top: 0.5em;
				padding-bottom: 0.5em;
				padding-left:  3.75em;
				}

		
		/* 2 cols */
			/* STACKED GRID */ 
			@media (min-width: 480px) and (max-width: 639px) {
				#Services ul {
					width: 190px;
					padding-top: 1em;
					padding-bottom: 1em;
					padding-left:  2.25em;
					background-size: 1.6em;
					background-position: 0em 1.35em;
					}
					/* gutter */
					#Services ul:nth-of-type(odd) {
						margin-right: 5%;
						}
					#Services ul:last-of-type {
						margin-left: calc(10% + 190px);
						}
						}
						
			/* QUAD GRID */
			@media (min-width: 800px) and (max-width: 1199px) {
				#Services ul {
					font-size: .95em;
					width: 175px;
					padding-top: 1em;
					padding-bottom: 1em;
					padding-left:  2.25em;
					background-size: 1.6em;
					background-position: 0em 1.35em;
					}
					/* gutter */
					#Services ul:nth-of-type(odd) {
						margin-right: 5%;
						}	
					#Services ul:last-of-type {
						margin-left: calc(5% + 190px);
						}	
						}					
										
		/* 5 cols*/
			/* STACKED GRID */ 
			@media (min-width: 640px) and (max-width: 799px){
				#Services ul {
					align-self: center;
					width: 16%;
					min-width: 115px;
					background-position: center 0;
					background-size: 2em;
					padding-top: 3.5em;
					min-height: 15em;
					padding-left: 0;
					}
					}
			/* QUAD GRID */
			@media (min-width: 1200px) {
				#Services ul {
					align-self: center;
					width: 16%;
					min-width: 115px;
					background-position: center 0;
					background-size: 2em;
					padding-top: 3.5em;
					min-height: 15em;
					padding-left: 0;
					}
					}		


		/* Horisontal Dividers */
		

			/* 2 col */
				/* STACKED GRID */ 
				@media (min-width: 480px) and (max-width: 639px) {
					#Services > ul:nth-of-type(n+2) {
						border-top: none; /* overrides default */
						}	
					#Services > ul:nth-of-type(n+3) {
						border-top: 1px solid rgba(255,255,255,0.2);
						}
					
						}		
				/* QUAD GRID */
				@media (min-width: 800px) and (max-width: 1199px){
					#Services > ul {
						border-left: none;
						}
					#Services > ul:nth-of-type(n+2) {
						border-top: none; /* overrides default */
						}	
					
					#Services > ul:nth-of-type(n+3) {
						border-top: 1px solid rgba(255,255,255,0.2);
						}
						}		
									
		/*Vertical Dividers*/
		
			/* 5 col */
				/* STACKED GRID */ 
				@media (min-width: 640px) and (max-width: 799px){
					#Services > ul:nth-of-type(n+2) {
						border-top: none; /* overrides default */
						}	
					#Services ul:nth-child(n+3) {
						border-left: 1px solid rgba(255,255,255,0.2);
						}			
						}
				/* QUAD GRID */
				@media (min-width: 1200px) {
					#Services > ul:nth-of-type(n+2) {
						border-top: none; /* overrides default */
						}	
					#Services ul:nth-child(n+3) {
						border-left: 1px solid rgba(255,255,255,0.2);
						}			
						}
	

	
	/* .... Buttons .... */ 
	
	#Services > ul > li {
		width: 100%;
		border: none;
		}
			
		#Services li a:not(.Button) {
			height: auto;
			padding-top: .35em;
			padding-bottom: .35em;
			width: 100%;
			text-align: left; /* override default */
			}
			
			/* 2 col */	
				/* STACKED GRID */ 
				@media (min-width: 480px) {
					#Services li a:not(.Button) {
						font-size: .95em;
						padding-top: .4em;
						padding-bottom: .4em;
						}
						}
	
			/* 5 col */	
				/* STACKED GRID */ 
				@media (min-width: 640px) and (max-width: 799px) {
					#Services li a:not(.Button) {
						height: 3.5em;
						padding-top: .5em;
						padding-bottom: 2em;
						text-align: center;
						padding-left: .5em;
						padding-right: .5em;
						}
						}
				/* QUAD GRID */
				@media (min-width: 1200px){
					#Services li a:not(.Button) {
						height: 3.5em;
						padding-top: .5em;
						padding-bottom: 2em;
						text-align: center;
						padding-left: .5em;
						padding-right: .5em;
						}
						}

		/*Hover*/
		#Services li a:not(.Button):hover {
			opacity: 0.55;
			}	
		

/* Service page */
	
.NavServices .ContentWidth {
	min-height: 100vh;
	}









 	
/* ------- C O M M U N A U T E  ----------- */
 	

	/*... Tile ...*/

		#Communaute {
			background-color: #64635e;
			}

	/* .... Buttons .... */ 

	 	 	
		/* QUAD GRID */
		@media (min-width: 800px){
		 	/*left aligned content */
		 	#Communaute li {
		 		justify-content: left;
		 		min-height: 4em;
		 		
		 		
		 		}
		 	/*horisontal dividers */	
		 	#Communaute ul:nth-of-type(3) li:nth-of-type(n+2) {
		 		border-top: 1px solid rgba(255,255,255,0.2);
		 		}
		 	/*left aligne icons */	
			#Communaute ul li a {
				display: flex;
				align-items: center;
				justify-content: center;	
				text-align: left;
				padding-top: 0;
				padding-bottom: 0;
				padding-left: 3.75em;
				padding-right: .5em;
				background-size: 2em;
				background-position: 1em center;
				}
				}
		 	






/* ------- A F Y  ----------- */


	/*... Tile ...*/

	#AFY {
		background-image: radial-gradient(circle, #73726e 0%, #51504a 100%);
	 	}
	 	#AFY::before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url(../AFY/images/skin/background_afy.svg);
			background-size: 3em;
			opacity: 0.03;
			background-position: center top;
			}
		
		
		
		
		/* QUAD GRID */
		@media (min-width: 800px){
			#AFY {
				order:  4;
				}
				}	
					
	/*... Menu Groups ...*/

			
		/* QUAD GRID */

		@media (min-width: 800px){
			#AFY {
				flex-direction: column;
				}		
			/* left column */
			#AFY ul:nth-of-type(1),
			#AFY ul:nth-of-type(3) {
				flex-direction: row;
	 			width: 70%;
				max-width: 600px;
				min-width: 0;
				height: 26%;
				border-left: none;
				margin-left: 5%;

				}
			#AFY ul:nth-of-type(1) {
				border-bottom: 1px solid rgba(255,255,255,0.2);
				}
			/* right column */
			#AFY ul:nth-of-type(2) {
				order: 3;
				width: 20%;
				max-width: 200px;
				min-width: 0;
				height: 52%;
				margin-right: 5%;
				}
				}	
					


/* Special Membership Button */		

		#AFY {
			padding-bottom: 7em;	
			} 

		#AFY > div {
			position: absolute;
			bottom: 2em;
			left: 0;
			width: 100%;
			/*z-index: 100;*/
			}
		      

		#AFY > div a {
			font-size: .85em;
			}