*{
					box-sizing: border-box;
					text-decoration: none;


				}

				header, main, footer {
					font-family: 'Fjalla One', sans-serif;

				}

				/***********************************************************************************/

				nav{

	position: absolute;
	z-index: 999;
	width: 100%;
	}

#nav {
	position: fixed;
	display: inline-block;
	background-color: #d6ae7b;

	box-shadow: 0px 4px 0px;
	opacity: 0.8;
	width: 100%;
	/*display: inline-flex;
	flex-direction: row;*/

}
#habout, #hport, #hcontact {
	float: right;
	padding: 1.5em;

}

#titre {
	float: left;
	padding: 1.5em;
}

#logo {
	display: inline-block;
	float: left;
	margin-top: 0.5em;
	margin-left: 1.5em;
	width: 2%;
}

#nav a {
	color: /*#f5e4c3*/ #000;
	font-size: 16px;
}


				/***********************************************************************************/




				#hport li {
				/* on place les liens du  horizontalement */
				    display: inline-block;
				}
				#hport ul li {
				/* on enlève ce comportement pour les liens du sous  */
				    display: inherit;

				}
				#hport a {
				    text-decoration: none;
				    display: block;

				}

				#soushport a {
					padding-top: 0.5em;
					padding-bottom: 0.5em;
					background-color: #AF946D;
					padding-left: 2em;
					padding-right: 2em;

				}
				#hport ul {
				    position: absolute;
				/* on cache les sous s complètement sur la gauche */
				    left: -999em;
				    text-align: left;
				    z-index: 1000;

				    box-shadow: 0.5px 1px 1px;
				}
				#hport li:hover ul {
				/* Au survol des li du  on replace les sous s */
				    left: auto;
				}



				body{
					background-attachment: fixed;
					/*background-image: linear-gradient(135deg, white , rgba(175, 148, 109) 35% , rgba(127, 101, 36));*/
					background-color:  rgb(175, 135, 98);

				}

				/*****************************************************************/
				main{
					display: flex;
					flex-direction: column;
					-webkit-flex-direction: column;
				}

				#ulfoot {
					/*position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					display: inline-block;*/

					text-align: center;
					background-color: #AF946D ;
					color: #000;
					opacity: 0.8;
					margin-top: 12em;

				}

				#ulfoot h4 {
					padding-top: 0.5em;
				}

				#sociaux img {
					width: 50%;
					position: center;
				}

				#sociaux img:hover{
					transform: scale(1.2);
					}

				#sociaux {
					display: inline-flex;
					text-align: center;
					width: 15%;
					padding: 1em;
				}







				#SW{

					display: flex;
					align-items : center;
					-webkit-align-items : center;
					justify-content: center;
					-webkit-justify-content: center;
				}

				.comment{
					font-size: 18px;
					padding-top: 1.5em;
					display: flex;

					flex-direction: column;
					align-items : center;
					-webkit-flex-direction: column;
					-webkit-align-items : center;
					padding-left: 2em;


				}

				.imgSW{
					margin-top: 8em;
					display: flex;
					height: 400px;
				}

				#SW h2{
					padding: 1em;
					background-color: #000;
					color: white;
					border-radius: 20%;
				}

				#SW p{
					max-width: 400px;
					padding: 1em;
					color: white;
					border: black solid 2px;
					margin-top: 0.5em;
					line-height: 25px;
				}

				#SW h3{
					max-width: 180px;
					padding: 0.5em;
					color: white;
					background-color: black;
					margin-top: 0.5em;
					text-align: center;
					line-height: 25px;
				}

				@media (max-width: 1175px){
					#SW{
						flex-direction: column;
						-webkit-flex-direction: column;
					}
					#ulfoot{
						margin-top: 2em;
					}
					.comment{
						padding-left: 0;
						margin : 4px;
					}
				}

				@media (max-width: 875px){
					#sociaux {
						width: 30%;
					}

					#logo {
					width: 4%;
					}

				}

				@media (max-width: 630px){
					.imgSW{
						max-height: 185px;
					}
				}

				@media (max-width: 350px){
					#sociaux {
						width: 60%;
					}

					#logo {
					width: 8%;
					}

				}
				@media (max-width: 320px){
					#sociaux {
						height: 60%;
					}

					#logo {
					width: 8%;
					}
					.imgSW{
						margin-top: 12em;
						max-height: 150px;
					}
				}