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

				   
				}

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

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

nav{

	/*position: absolute;*/
	z-index: 999;

	}

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

	box-shadow: 0px 4px 0px;
	opacity: 0.8;
	width: 100%;

}
#habout, #hport, #hcontact {
	float: right;
	padding: 3vh;

}

#titre {
	float: left;
	padding: 3vh;
}

#logo {
	display: inline-block;
	float: left;
	margin-top: 1vh;
	margin-left: 3vh;
	width:	3%;
}

#nav a {
	color: /*#f5e4c3*/ #000;
	font-size: 2vh;
}

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


#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: 1em;
	padding-right: 1em;

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


				}

				#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;
				}







				#ST{
					margin-top: 10vh;
					display: flex;
					align-items : center;
					justify-content: center;
				}

				.comment{
					font-size: 2vh;
					padding-top: 12vh;
					display: flex;
					flex-direction: column;
					align-items : center;
					padding-left: 2vh;


				}

				.comment a{
					color: black;
				}

				.comment a:hover{
					
				}

				.imgST{
					margin-top: 9vh;
					display: flex;

				}

				#ST h2{
					font-size: 2vh;
					padding: 2vh;
					background-color: #000;
					color: white;
					border-radius: 20%;
				}

				#ST p{
					max-width: 40vh;
					padding: 2vh;
					color: white;
					border: black solid 2px;
					margin-top: 0.5em;
					line-height: 2.5vh;
				}

				#ST h3{
					max-width: 18vh;
					padding: 2vh;
					color: white;
					background-color: black;
					margin-top: 0.5em;
					text-align: center;
					line-height: 2.5vh;
				}

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

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

					#logo {
					width: 6%;
					}

				}

				@media (max-width: 630px){
					.imgST{
						max-height: 172px;
						max-width: 280px;
					}
				}

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

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

					#logo {
					width: 8%;
					}

				}