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


/* ...js... */
/* Classes below are refered to in nav.js. Do not rename */



/* top bar */
.main_h {
	position: fixed;
	top: 0px;
	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*/
	}
	@media (min-width: 50em){
		.main_h {
			height: 4em; /* browser nav bar height */
			background-image: url(Skin/head.png);
			background-repeat: repeat-x;
			background-position: center -2.85em;
			padding-top: .5em
			}
			}



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


/* Sticky */

.sticky {
	background-color: rgba(255, 255, 255, 0.75);
	opacity: 1;
	top: 0px;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}




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




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;
		height: 1.8em;
		background-image: url(skin/logo_nav_small.svg);
		background-repeat: no-repeat;
		}
		@media (min-width: 50em) {
			ul.Nav.Main li.Logo a{
				width: 7em;
				height: 3em;
				background-image: url(skin/logo_nav_full.svg);
				}
				}
		
				

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


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


.Nav.Main .Titre h3 {
	}
	


/* ..... 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: 50em) {
		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;
	border-bottom: solid 1px #ccc;
	}
	@media (min-width: 50em) {
		ul.Nav.Main .Normal li {
			width: auto;
			border-bottom: 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: 50em) {
		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;
	}
		




	


/* ........... 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: 50em) {
		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);
	}
	.Nav.Main .Social li a.Facebook:hover {
		background-image: url(skin/icon_social_facebook_hover.svg);
		}


/* Twitter*/ 


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


.Nav.Main .Social li a.LinkedIn {
	background-image: url(skin/icon_social_LinkedIn.svg);
	}
	.Nav.Main .Social li a.LinkedIn:hover {
		background-image: url(skin/icon_social_LinkedIn_hover.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);
	}
	.Nav.Main .Social li a.Contact:hover {
		background-image: url(../images/icons_contact_current.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: 1.23em;
	transition: all 200ms ease-in;
	-moz-transition: all 200ms ease-in;
	-webkit-transition: all 200ms ease-in;
	}
	@media (min-width: 30em) {
		.mobile-toggle {
			right: 2em;
			}
			}

	
.mobile-toggle span {
	width: 100%;
	height: .2em;
	margin-bottom: .25em;
	border-radius: 10px;
	background: #8f8f8f;
	display: block;
	}
	
.open-nav .mobile-toggle {
		transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		}

			
	@media (min-width: 50em) {
		.mobile-toggle {
			display: none;
			}
			}
	


/* .......... L A N G U A G E ..........*/



a.English {
	position: absolute;
	top: 0px;
	right: 4em;
	background-color: white;
	border-radius: 0 0 8px 8px;
	padding: .5em 1em .5em 1em;
	margin-right: 1em;
	/*color: white;*/
	text-decoration: none;
	font-size: 1em;
	vertical-align: middle;
	z-index: 20;
	transition: .3s;
	}
	a.English:hover {
	background-color: #5662AC;
	color: white;
	}