@import 'https://fonts.googleapis.com/css?family=Pinyon+Script';
*{margin:0;padding:0;}
a img{border:0;}
body
{
	background:#fff;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
}
.container{padding:1em;margin:0 auto;position:relative;max-width:800px}


header, #header
{
	position:relative;
	text-align: center;
}
footer, #footer
{
	padding:0;
	position:relative;
	text-align: center;
	float:none;
	clear:both;
}
#header h1 strong{
	font-weight: 400;
	font-style: italic;
	font-size:10px;
	color:#bbb;
}

#header h2 a.uap{
	font-family:Pinyon Script;
	text-decoration: none;
	color:#000;
	font-size:48px;
	display: inline-block;
	padding:10px 0;
	font-weight: 200 !important;
	line-height: 0.55em;
}
#header h2 a.uap span{
	/*letter-spacing: 0.17em*/
}
#header h2 a.uap em{
	font-size:60px;
	color:rgb(179, 149, 0);
}

#header ul.barre_menu,
#footer ul.barre_menu{
  list-style: none;
  display:flex;
  padding:0;
  margin:0;
  border-width:1px 0 0;
  border-color:#666;
  border-style: solid;

  }
#header ul.barre_menu li,
#footer ul.barre_menu li{
  list-style: none;
  flex-grow: 1;
  padding:0;
  margin:0;

  }
#header ul.barre_menu li a,
#footer ul.barre_menu li a{
	color:#000;
	font-size:15px;
	text-decoration: none;
	letter-spacing: -0.06em;
	font-style: italic;
	line-height:40px;
	display: inline-block;
}
#header ul.barre_menu li a:hover,
#footer ul.barre_menu li a:hover{
	text-decoration: underline;
}
/*imgs*/
.imgs1{border:1px solid #666666;padding:3px; margin:0 10px 3px 3px}
.imgs2{border:1px solid #666666;padding:3px; margin:0 3px 3px 10px}

/*content*/
.content{
	padding:20px;
	float:none;
	clear:both;
}
.content h2
{
	font-family:Pinyon Script;
	color:#000;
	font-size:30px;
	font-weight: 400 !important;
}
.content h3
{
	font-family:Pinyon Script;
	color:#333;
	font-size:26px;
	font-weight: 400 !important;
float:none;
	clear:both;
}
.content h2:first-letter{
	font-size:38px;
}

.content p
{
	text-align: left;
	font-family:arial;
	font-size:14px;
	padding:0 3em 1em;
}
.content p:first-letter{
	font-family:Pinyon Script;
	font-size:30px;
}

.content .images{
	width:100%;
	padding:0;
	margin:0;
	position:relative;
}
.content .images div{
	width:40%;
	padding:0;
	margin:10px 4%;
	position:relative;
	display:inline-block;
	text-align:center;
}
.content .images div img{
	width:90%;
	border:1px solid #666666;padding:1%;
}


/*index*/
#accueil{
	padding:20px;
}
#accueil .droite .bienvenue{
	text-align: center;
}
#accueil .droite .bienvenue p{
	text-align: left;
	font-family:arial;
	font-size:14px;
	padding:0 3em 1em;
}
#accueil .droite .bienvenue p a{
	text-decoration: none;
}
#accueil .droite .bienvenue p:first-letter{
	font-family:Pinyon Script;
	font-size:30px;
}
#accueil .droite .bienvenue i{
	font-family:Pinyon Script;
	color:#000;
	font-size:38px;
	display: inline-block;
	font-weight: 200 !important;
}

#accueil .droite .bienvenue a:hover{
	text-decoration: underline;
}
#accueil .droite .bienvenue .presentation,
#accueil .droite .bienvenue .produits_blancs,
#accueil .droite .bienvenue .contact{
	font-family:arial;
	text-decoration: none;
	font-size:15px;
	color:rgb(179, 149, 0);
	font-size:15px;
	font-style: italic;
	line-height:40px;
	display: inline-block;
	padding:0 3em;
}

#accueil .droite .bienvenue iframe{
	margin:1em 0;
	border:1px solid #ffffff;
	border-radius:10px;
	width:700px;
	height:400px;
}
/*Présentation*/
#presentation{
	padding:20px;
}
#presentation h2
{
	font-family:Pinyon Script;
	color:#000;
	font-size:30px;
	font-weight: 400 !important;
}
#presentation h2:first-letter{
	font-size:38px;
}

#presentation p
{
	text-align: left;
	font-family:arial;
	font-size:14px;
	padding:0 3em 1em;
}
#presentation p:first-letter{
	font-family:Pinyon Script;
	font-size:30px;
}


/*--------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------		page contact		-----------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*/

#contact
{
padding:10px 3%;
}
#contact form
{
	color:#000000;
	font-size:11px;
}
#contact form ul
{
	position:relative;
	list-style-type:none;
}
#contact form ul li
{
	padding:8px;
	position:relative
	list-style-type:none;
	text-align: center;
}
#contact form ul li span
{
	display:block;
	font-weight: 400;
	text-align: left;
	color:#000;
	font-size:15px;
	letter-spacing: -0.06em;
	text-transform: capitalize;
	font-style: italic;
	line-height:40px;

}
#contact form ul li .ou
{
	display:block;
	font-family: Pinyon Script;
	font-size: 30px;
	padding:1em 0;
	text-align: center;
}
#contact form ul li .Itext
{

}
#contact form .Itext,
#contact form textarea,
#contact form select
{
	font:400 14px arial;
	color:#333333;
	border:1px solid #333333;
	overflow:auto;
	padding:1px 3px;
	width:96%;
}
#contact form .Ibutton
{
	font:400 14px arial;
	color:#333333;
	padding:3px 20px;
	margin:0 1%;
	background:#fff;
	width:40%;
	display:inline-block;
	background: #eee;
}
#contact form .Isend
{
	color:#ff0000;
}
#contact form a
{
	color:#000000;
}
#contact .infoperso
{
	font:400 12px arial;
	color:#333333;
	text-align:center;
}

@media only screen and (max-width: 800px) {


	#header ul.barre_menu li a,
	#footer ul.barre_menu li a{
		color:#000;
		font-size:12px;
		letter-spacing: -0.02em;
	}
	#presentation,
	#accueil{
		padding:10px;
	}
	#accueil .droite .bienvenue .presentation,
	#accueil .droite .bienvenue .produits_blancs,
	#accueil .droite .bienvenue .contact{
		font-size:12px;
		letter-spacing: -0.02em;
		padding:0 1em;
	}
	#accueil .droite .bienvenue iframe{
		width:600px;
		height:315px;
	}
	.content p,
	#accueil .droite .bienvenue p{
		font-size:12px;
		padding:0 1em 1em;
	}
	img{max-width:700px !important;}
}

@media only screen and (max-width: 600px) {
	#header ul.barre_menu{
		flex-wrap: wrap;
		border-bottom: 1px solid #333;

	}
	#header ul.barre_menu li{
		flex-grow: 1;
		min-width: 25%;
	}

	#accueil .droite .bienvenue iframe{
		width:300px;
		height:200px;
	}

	#accueil .droite .bienvenue .presentation,
	#accueil .droite .bienvenue .produits_blancs,
	#accueil .droite .bienvenue .contact{
		padding:0 10px;
	}
	img{max-width:280px !important;}
}