/* 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,
.Nav5Cols {
	display: flex;
	flex-wrap: wrap;
	}
	
.NavMain {
	height: 100%;
	background-color: #64635e;
	}


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


/*.... Tiles ....*/
	
	/* STACKED GRID */ 
		.NavMain > div,
		.ServicesHome .Nav5Cols {
			position: relative;
			width:  100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			align-content: center;
			padding-top: 5em; /* allows for section title */
			padding-bottom: 1em;
			}

		
	/* QUAD GRID */ 
		@media (min-width: 800px){
			.NavMain > div {
				overflow: hidden;
				}
			.NavMain > div {
				width:  50%;
				height: 50%;
				min-height: 20em;
				}
				}
		@media (min-width: 2000px){
			.NavMain {
				font-size: 1.2em;
				}
				}

	/* COLUMN GRID */ 
		@media (min-width: 2400px) and (max-height: 800px){
			.NavMain > div {
				/*overflow: hidden;*/
				}
			.NavMain > div {
				width:  25%;
				height: 100%;
				min-height: 20em;
				}
				}


/*.... Section Head ....*/
	
	.NavMain h2 {
		display: block;
		width: 100%;
		text-align: center;	
		margin-bottom: 0;
		}
	
	.NavMain h2 {
		margin-top: 2.5rem;
		margin-bottom: 1em;
		position: absolute;
		top: -0.5em;
		left: 0;
		width: 100%;
		}
		/* QUAD GRID */ 
		@media (min-width: 800px){
			.NavMain h2 {
				top: calc(30% - 2.35em);
				}
				}		
			
		
		
		/* Button */
		.NavMain h2 a {
			padding-left: 2em;
			padding-right: 2em;
			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,
	.ServicesHome ul,
	.ServicesHome li a {
		background-repeat: no-repeat;
		z-index: 100 !important;
		}
	
	/* Rows */
	.NavMain ul,
	.ServicesHome ul {
		display: flex;
		width: 90%;
		padding: 0;
		margin-top: 0;
		margin-bottom: 0;
		}
		@media (min-width: 480px) {
			.NavMain ul,
			.ServicesHome ul {
				max-width: 350px;
				}
				}

				
	/* Columns */
	@media (min-width: 480px){
	 	.NavMain ul  {
	 		flex-flow: column;
	 		justify-content: flex-start;
	 		width: 25%;
	 		min-width: 160px;
	 		max-width: 240px;
	 		/*min-height: 12em;*/
			}
		  	}



	

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


	/* STACKED GRID */

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

	/* link */
	.NavMain li a,
	.ServicesHome li a{
		transition: 0;
		font-size: 1.2em;
		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;
		min-width: 5em;
		}
		.NavMain li a:visited,
		.ServicesHome li a:visited {
			color: white;
			}
		.NavMain li a:hover,
		.ServicesHome li a:hover {
			color: white; /* neutral 50% */
			filter: brightness(3);
			}
		
		@media (min-width: 480px) {
			.NavMain li {
				padding-left: .3em;
				padding-right: .3em;
				width: 100%;
		 		}
		 	.NavMain li a {
				font-size: .95em;
				}
				}
	


/* ------- B A C K G R O U N D   C O L O U R S / I M A G E S -------- */

	/* ... Solid Colours ... */ 

	#Calendrier,
	#Calendar {
		background-color: #1c1c18; /* Almost black */
		}
	#Community,
	#Communaute {
		background-color: #64635e; /* theme */
		}

	
	/*... Texture AFY ...*/

	#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;
			}
					
		
 	/* ... Image Background ... */

		/* Backgrounds */
			#Services::before,
			#Centre::before {
				content: "";
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				background-size: cover;
				background-position: center center;
				}
	
		/* Background images*/

			/* Naviguation Page */ 
			#Services.Nav5Cols::before {
				background-image: url(../AFY/images/nav/services.jpg);
				}
			#Centre::before {
				background-image: url(../AFY/images/nav/centre.jpg);
				}

			/* Service Page */
			.ServicesHome .TemplateHead span {
				background-image: url(../AFY/images/nav/services.jpg);
				}



/* ------- G R I D   3 X 1  ----------- */

		@media (min-width:480px) {
			/*... Menu Groups ...*/
			.Grid3X1 ul {
				width: 100%;
				max-width: 100%;
				justify-content: center;
		 		flex-flow: row;
				}
			/* .... Buttons .... */ 
			.Grid3X1 li {
				width: 17%;
				min-width: 8em;
				}
				}





/* ------- G R I D   2 X 2  ----------- */

			/*... Menu Groups ...*/
			
	
			
			.Grid2X2 ul {
				max-width: 100%;
				flex-flow: row wrap;
				}
				@media (min-width:480px) {
					.Grid2X2 ul {
						width: 100%;
						justify-content: center;
						}
						}
					
			/* .... Buttons .... */ 
				.Grid2X2 li {
					padding-left: .5em;
					padding-right: .5em;
					width: 50%;
					min-width: 7em;
					}
			
			
				@media (min-width:480px) and (max-width:799px) , (min-width:1024px){
					.Grid2X2 li {
						width: 17%;
						min-width: 7em;
						}
						}
				@media (min-width:800px) and (max-width:1023px){
					.Grid2X2 li {
						width: 17%;
						min-width: 6em;
						}
						}
						
						
						
						

/* ------- 1 - R O W   ----------- */

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

	.Nav1Row ul {
 		flex-flow: row;
		width: 100%;
		min-width: 100%;
		justify-content: center;
		}

	/* .... Buttons .... */ 
	
	
	.Nav1Row li {
		width: 17%;
		min-width: 9em;
		}	
	
	.Nav1Row li a {
		font-size: 1.1em;
		max-width: 120px;
		min-height: 3.5rem;
		padding-top: 4em;
		padding-left: .5rem;
		padding-right: .5rem;
		background-position: center 0.5em;
		background-size: 3rem 3em;
		}







		
/* -------  5 - C O L S  ----------- */

		/*... Tile ...*/

			/* STACKED GRID */ 
			.Nav5Cols {
				/*align-items: flex-start;*/
				/*font-size: 1rem; /* unifies nav andd page scale *!/*/
				}
				@media (max-width: 799px) {
					.Nav5Cols {
						min-height: 20em; /* just to make it breath a bit */
						}
						}
			
	
			/* STACKED GRID (Service Page) */ 
			
				/*1 col */
				.ServicesHome .Nav5Cols {
					padding-top: 1em;
					}					
				.ServicesHome .TemplateHead {
					min-height: 41em;
					}
								
				/* 2 cols */
				@media (min-width: 480px) {
					.ServicesHome .TemplateHead {
						min-height: 34em;
						}
						}
				@media (min-width: 480px) and (max-width:640px){
					.ServicesHome .Nav5Cols {
						padding-top: 0em;
						}
						}						
						
				/* 5 cols */

				@media (min-width: 640px) {
					.ServicesHome .Nav5Cols {
						padding-top: 3em;
						}
						}
				@media (min-width: 1024px) {
					.ServicesHome .Nav5Cols {
						font-size: 1.3rem; 
						}
					.ServicesHome .TemplateHead {
						min-height: 40em;
						}		
						}
				@media (min-width: 1400px) {
					.ServicesHome .Nav5Cols {
						font-size: 1.5rem; 
						}
					.ServicesHome .TemplateHead{
						min-height: 44em;
						}		
						}
						

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

		/* 1 cols */
			/* STACKED GRID */
			.Nav5Cols ul, 
			.ServicesHome .Nav5Cols ul { /*ovverrides default */
				flex-flow: column;
				background-position: 0.75em 1em;
				background-size: 1.8em 1.8em;
				padding-top: 0.5em;
				padding-bottom: 0.5em;
				padding-left: 3.75em;
				font-size: .95em;
				}
				
				/*horisontal dividers*/
				.Nav5Cols ul:nth-of-type(n+2) {
					border-top: 1px solid rgba(255,255,255,0.2);
					}		
		
		/* 2 cols */
			/* STACKED GRID */ 
			@media (min-width: 480px) and (max-width: 639px) , (min-width: 800px) and (max-width: 1199px) {
				.Nav5Cols ul,
				.NavMain .Nav5Cols ul {
					font-size: 1.0em;
					width: 40%;
					min-width: 180px;
					padding-left:  2.25em;
					background-size: 1.6em;
					background-position: 0em 1.35em;
					border-left: 0;
					}
					/* gutter */
					.Nav5Cols ul:nth-of-type(odd) {
						margin-right: 5%;
						}
					.Nav5Cols ul:last-of-type {
						width: 85%;
						max-width: 100%;
						min-width: calc(360px + 5%);
						margin-right: 0;
						}
						}
						
			/* STACKED GRID ( Service Page ) */
			@media (min-width: 480px) and (max-width: 639px) {
				.ServicesHome .Nav5Cols ul {
						font-size: 1em;
						min-width: 210px;
						}
				.ServicesHome .Nav5Cols ul:last-of-type {
						min-width: calc(420px + 5%);
						}
						}
				
			/* QUAD GRID */
			@media (min-width: 800px) and (max-width: 1199px) {
				.Nav5Cols ul {
					font-size: 1em;
						}	
						}
										
		/* 5 cols*/
			/* STACKED GRID + QUAD GRID */ 
			@media (min-width: 640px) and (max-width: 799px) , (min-width: 1200px){
				.Nav5Cols ul {
					align-self: center;
					width: 16%;
					min-width: 118px;
					background-position: center 0;
					background-size: 2em;
					padding-top: 2.75em;
					min-height: 13em;
					padding-left: 0;
					}
					}
					
			/* STACKED GRID (Service Page) */ 
			@media (min-width: 640px) {
				.ServicesHome .Nav5Cols ul {
					font-size: 1.05em;
					align-self: center;
					width: 16%;
					min-width: 118px;
					background-position: center 0;
					background-size: 2em;
					padding-top: 2.75em;
					min-height: 13em;
					padding-left: 0;
					margin-right: 0;
					}
					}
			@media (min-width: 800px) {
				.ServicesHome .Nav5Cols ul {
					font-size: 1.1em;
					}
					}			
			@media (min-width: 640px) and (min-height: 900px) {
				.ServicesHome .Nav5Cols ul {
					min-height: 17em;
					padding-top: 4.5em;
					}
					}						

		/* Horisontal Dividers */

			/* 2 col */
				/* STACKED GRID + /* QUAD GRID */ 
				@media (min-width: 480px) and (max-width: 639px) , (min-width: 800px) and (max-width: 1199px){
					.Nav5Cols ul:nth-of-type(2) {
						border-top: none; /* overrides default */
						}	
					.Nav5Cols ul:nth-of-type(2) {
						padding-bottom: 2.1em;	
						}
						}
									
		/*Vertical Dividers*/
		
			/* 5 col */
				/* STACKED GRID */ 
				@media (min-width: 640px) and (max-width: 799px) , (min-width: 1200px) {
					.Nav5Cols ul:nth-of-type(n+2) {
						border-top: none; /* overrides default */
						}	
					.Nav5Cols ul:nth-of-type(n+2) {
						border-left: 1px solid rgba(255,255,255,0.2);
						}			
						}
						
				/* STACKED GRID (Service Page) */ 
				@media (min-width: 640px){
					.ServicesHome .Nav5Cols ul:nth-of-type(n+2) {
						border-top: none; /* overrides default */
						}	
					.ServicesHome .Nav5Cols ul:nth-of-type(n+2) {
						border-left: 1px solid rgba(255,255,255,0.2);
						}			
						}						
						
				/* QUAD GRID */
				@media (min-width: 1200px) {
					.NavMain .Nav5Cols ul:nth-of-type(n+2) {
						border-top: none; /* overrides default */
						}	
						}
		
	/* .... Buttons .... */ 
	
	.Nav5Cols li {
		width: 100%;
		border: none;
	 	padding-right: 0;
		}
			
		.Nav5Cols li a {
			height: auto;
			padding-top: .35em;
			padding-bottom: .35em;
			width: 100%;
			text-align: left; /* override default */
			}
			
			/* 2 col */	
				/* STACKED GRID */ 
				@media (min-width: 480px) {
					.Nav5Cols li a {
						font-size: .9em;
						padding-top: .3em;
						padding-bottom: .3em;
						}
						}
				@media (min-width: 800px) and (max-width:1024px) {
					.Nav5Cols li a {
						font-size: .84em;
						}
						}						
						
	
			/* 5 col */	
				/* STACKED GRID */ 
				@media (min-width: 640px) and (max-width: 799px) {
					.Nav5Cols li a{
						height: 3.5em;
						padding-top: .5em;
						padding-bottom: 2em;
						text-align: center;
						padding-left: .5em;
						padding-right: .5em;
						}
						}
				/* STACKED GRID (Service Page) */ 
				@media (min-width: 640px) {
					.ServicesHome .Nav5Cols li a{
						height: 3.5em;
						padding-top: .5em;
						padding-bottom: 2em;
						text-align: center;
						padding-left: .5em;
						padding-right: .5em;
						font-size: .9em;
						}
						}
				@media (min-width: 640px) and (min-height: 900px) {
					.ServicesHome .Nav5Cols li a{
						height: 4.5em;
						}
						}
												
			
				/* QUAD GRID */
				@media (min-width: 1200px){
					.Nav5Cols li a {
						height: 3.5em;
						padding-top: .4em;
						text-align: center;
						padding-right: .5em;
						}
						}

		/*Hover*/
		.Nav5Cols li a:hover {
			opacity: 0.55;
			}	
		








 	
/* ------- 3 - C O L S  ----------- */


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

		/* QUAD GRID */
		@media (min-width: 480px){
		 	.Nav3Cols ul {
		 		min-height: 12em;
		 		width: 30% ;
		 		min-width: 130px;
		 		max-width: 13em;
		 		}
		 	.Nav3Cols ul:nth-of-type(n+2) {
		 		border-left: 1px solid rgba(255,255,255,0.2);
		 		}
 			.Nav3Cols ul:nth-of-type(2) {
				order: 3 ;
				}
				}
		
		@media (min-width: 480px) and (max-width: 799px){ /* reconnaissance */
		 	.Nav3Cols ul {
		 		max-width: 11em;
		 		}
		 		}


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

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

		@media (min-width: 480px) and (max-width: 520px){ /* reconnaissance */
			.Nav3Cols ul li a {
				font-size: 0.90em;
				}
				}









/* ------- 3 - Z O N E S ----------- */

		
		/* STACKED GRID */
		@media (max-width: 799px) {
			.NavMain .Nav3Zones {
				max-height: 30em;
				padding-bottom: 5.5em; /*room for button */	
				}
				}	
		
		/* QUAD GRID */
		@media (min-width: 800px){
			.NavMain .Nav3Zones {
				order:  4;
				padding-top: 0em;  /*room for top/bottom button */	
				}
				}	

					
	/*... Menu Groups ...*/
			
		/* STACKED GRID */
		@media (min-width: 480px){
			.Nav3Zones {
				flex-direction: column;
				}
				
			/* left column */
			.Nav3Zones ul:nth-of-type(1),
			.Nav3Zones ul:nth-of-type(2) {
				flex-direction: row;
	 			width: 70%;
				max-width: 350px;
				min-width: 0;
				min-height: 6em;
				margin-left: 5%;
				}
			.Nav3Zones ul:nth-of-type(1) {
				border-bottom: 1px solid rgba(255,255,255,0.2);
				align-items: flex-end;
				}
			/* right column */
			.Nav3Zones ul:nth-of-type(3) {
				width: 20%;
				max-width: 175px;
				min-width: 0;
				min-height: 12em;
				margin-right: 5%;
				}
				}	

				
		/* QUAD GRID */
		@media (min-width: 800px){
		
			/* left column */
			.Nav3Zones ul:nth-of-type(1),
			.Nav3Zones ul:nth-of-type(2) {
				max-width: 500px;
				height: 26%;
				}
			/* right column */
			.Nav3Zones ul:nth-of-type(3) {
				order: 3;
				height: 52%;
				}
				}	
				
	/*... Button ...*/

		@media (min-width: 480px){
			.Nav3Zones ul a{
				max-height: 6em;
				padding-bottom: 2em;
				padding-top: 4em;
				background-position-y: 1em;
				}
			
			.Nav3Zones ul:nth-of-type(1) li:last-child,
			.Nav3Zones ul:nth-of-type(2) li:last-child {
				padding-right: 3%;
				border-right: 1px solid rgba(255,255,255,0.2);
				}
			.Nav3Zones ul:nth-of-type(2) li{
				max-height: 6em;
				}
			.Nav3Zones ul:nth-of-type(3) li{
				height: 52%;
				}
			.Nav3Zones ul:nth-of-type(3) li:first-child{
				align-items: flex-end;
				}
				}	
	
			/*Filler*/
			.Nav3Zones span { /* for empty button */
				display: block;
				height: 6em;
				}			
	
									

/* Special Membership Button */		



		.Nav3Zones > div {
			position: absolute;
			bottom: .25em;
			width: 100%;
			left: 0;
			}
			
			@media (min-width: 800px) and (min-height: 700px){
				.Nav3Zones > div {
					bottom: 5%;
					}
					}
		      

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












	 		
/* ------------- D E B U G ------------ */

/*	 		
ul {
	border: 1px solid #333;
	}

li {
	border: 1px solid green;
	}	

li a {
	border: 1px dotted red;
}