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




/* ........... Header/Top Nav .............*/ 


/* ...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 */
			}		
			}



/* ........... N A V I G A T I O N ............*/


/* Generic */

ul.Nav {	
	list-style-type: none;
	overflow: hidden;
	padding-left: 0px;
	}

/* ......... B A S I C ......*/

ul.Nav.Main {
	float: left;
	clear: none;
	width: 100%;
	margin-bottom: 4em;
	text-align: center;
	margin-top: 0.25em;
	}


ul.Nav.Main a {
	display: block;
	width: 100%;
	text-decoration: none;
	}




/* ........... L O G O  ............ */

ul.Nav.Main li.Logo {
	position: absolute;
	margin-top: 0.5em;
	background-size: 100%;
	background-repeat: no-repeat;
	}
				
ul.Nav.Main li.Logo a {
	width: 1.8em;
	background-repeat: no-repeat;
	}
	@media (min-width: 1024px){
		ul.Nav.Main li.Logo a{
			width: 7em;
			}
			}
	
				

			
			
/* ........... T I T L E ............ */


ul.Nav.Main li.Titre {
	display: block;
	padding-top: 1.25em;
	font-size: 1em;
	line-height: 0.9em;
	color: #8f8f8f;
	text-transform: uppercase;
	margin-bottom: 2em;
	color: black;
	}
	@media (min-width: 1024px){
		ul.Nav.Main li.Titre {
			display: none;
			}
			}



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


ul.Nav.Main .Normal {
	float: left;
	width: 100%;
	font-size: 1em;
	line-height: 1em;
	font-weight: normal;
	text-align: center;
	
	}
	@media (min-width: 1024px){
		ul.Nav.Main .Normal {
			float: right;
			margin-right: 6em; /* for social area */
			width: auto;
			}
			}	



ul.Nav.Main .Normal li {
	float: left;
	width: 100%;
	clear: none;
	margin-bottom: 0;
	}

ul.Nav.Main .Normal li:nth-child(n+2) {
	border-top: solid 1px #ccc;
	}


	@media (min-width: 1024px){
		ul.Nav.Main .Normal li {
			width: auto;
			}
		ul.Nav.Main .Normal li:nth-child(n+2) {
			border-top: none;
			}	
			}



ul.Nav.Main .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){
		ul.Nav.Main .Normal li a {
			padding-top: 1.25em; /*text position */ 
			height: 4.55em; /* height of the buttons */
			}
			}
		
ul.Nav.Main .Normal li a:hover {
	color: #5662AC;
	}
		

/* ..... N O R M A L  (button) .....*/
/* see buttons.css */

ul.Nav.Main .Normal li.Button {
	border: none;	
	}




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


ul.Nav.Main .Social {
	position: relative;
	width: 100%;
	padding-top: 2em;
	display: flex;
	display: -webkit-flex;
	font-size: 1em;
	justify-content: center;	
	-webkit-justify-content: center;
	}
	@media (min-width: 1024px){
		ul.Nav.Main .Social {
			position: absolute;
			right: 2em;
			width: auto;
			padding-top: 1.35em; /* vertical position */ 
			font-size: .9em;
			}
			}	
	
ul.Nav.Main .Social a{
		padding-top: 2em; 
		background-size: 1.25em 1.25em;
		background-position: center top;
		background-repeat: no-repeat;
		height: 4.8em;
   		width: 1.8em;
		transition: 0; /* Fix jumpy hover effec in Safari */
		}


/* Facebook */ 


.Nav.Main .Social li a.Facebook {
	background-image: url(skin/icon_social_facebook.svg);
	}


/* Twitter*/ 


.Nav.Main .Social li a.Twitter {
	background-image: url(skin/icon_social_twitter.svg);
	}

	
/* LinkedIn */ 


.Nav.Main .Social li a.LinkedIn {
	background-image: url(skin/icon_social_linkedin.svg);
	}

	

/* board */ 


.Nav.Main .Social li a.Board {
	background-image: url(../images/icons_board.svg);
	}
	.Nav.Main .Social li a.Board:hover {
		background-image: url(../images/icons_board_current.svg);
		}
	
	
/* Contact */ 	
	

.Nav.Main .Social li a.Contact {
	/*background-image: url(../images/icons_contact.svg);*/
	background-image: url(skin/icon_contact.svg);

	}
	.Nav.Main .Social li a.Contact:hover {
		/*background-image: url(../images/icons_contact_current.svg);*/
		}



.Nav.Main .Social li a.Contact::before {
		content: "Nous joindre";
		text-align: center;
		width: 100%;
		position: absolute;
		top: 4rem;
		left: 0;
		color: #888888;
		font-size: .8em;
		}




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