@charset "utf-8";

/*-----------Responsive-----------*/

@media only screen and (max-width:750px){
	.header__icon{
		display: block;
		width:66px;
		height: 66px;
		background-color: lightgrey;
		text-align: center;		
		}
	
	.header{
		position: static;
		left:0;
		right:0;
		height: 80px;

		line-height: 66px;
		color: black;

		background-color: white;


	}
	
	#lien{
		margin-top:50px;
	}
	
	
	
	nav::after{
			content: '';
			position: absolute;
			display: block;
			width: 16px;
			height: 0;

	
	}
	
	.menuDesk{
		position:absolute;
		left:0;
		top:0;
		bottom:0;
		background-color: lightgrey;
		width: 290px;
		height: 300px;
		
		transform: translateX(-290px);
		transition-duration: 0.3s;
		border-radius: 0 0 20px 0;
		
	}
	
	.menuDesk a{
		display:block;
		height:40px;
		text-align:center;
		line-height: 40px;
		border-bottom:1px solid white;
		

	}

	.header{
		position: fixed;
		left:0;
		right:0;
		height: 66px;

		line-height: 66px;
		color: black;

		background-color: white;

	}
	
	.site-content{
		padding-top:100px;
		margin-top: 0px;
	}
	
	.width--sidebar .menuDesk{
		transform: translateX(0px);
		transition-duration: 0.3s;
		
		}
	
	.width--sidebar .header__icon{
		transform: translateX(290px);
		transition-duration: 0.3s;

	}
	

	
}

/*----------- >750px ----------*/

@media only screen and (min-width:750px){
	.header__icon{
		display:none;
	}
	
	.header{
		position: fixed;
		left:0;
		right:0;
		height: 110px;

		line-height: 66px;
		color: black;

		background-color: white;
	

	}
	
	.site-content{
		padding-top:120px;
		margin-top: 0px;
	}
}




/* CSS Document */

html,body{
	font-family: Roboto;
	font-size: 16px;
	line-height: 1.4;
	heigh: 100%;
	
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none;
	color:inherit;
}

.header__logo{
	font-weight: bold;
	padding: 0 25px;
	float:left;
}

.logoMenu{
	padding-top:8px;
}

.menuDesk{
	text-align: center;
}

.menuDesk img{
	height:66px;
	margin-top: 10px;
}

.menuDesk a{
	padding: 0 10px;
	
}





.menuslide{
	height:66px;
}