/* Created by http://freehtml5templates.com */

/* reset */
* {
margin: 0;
padding: 0;
}

/* render html5 elements as block */
header, footer, section, aside, nav, article {
display: block;
}
img{
	max-width:100%;
	height:auto;}
body {
line-height: 1;
background: #ddd url(images/64bg.jpg) repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333;
font-size: 14px;
line-height: 18px;
}
	
/* layout */

#wrapper {
max-width: 940px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
border: 3px solid #888;
background: #fff;
/* curved border radius */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

nav {
max-width: 100%;
height: 50px;
margin: 0 auto;
background: #570f04;
margin-top: -5px;
}

#main {
max-width: 100%;
margin: 0 auto;
overflow: hidden;
}

#content {
padding-top: 30px;
float: left;
width: 57%;
border-right:3px solid #333;
border-left:3px solid #333;
/*margin-left: 40px;*/
}

#sidebar1 {
padding-top: 30px;
float: left;
width: 21%;
}

#sidebar2 {
padding-top: 30px;
float: right;
width: 21%;
}
#sidebar1 h3, #sidebar2 h3{
	padding-left:5px;
	padding-right:5px;}
footer {
max-width: 100%;
margin: 0 auto;
overflow:hidden;
clear: both;
}

/* basics */

h1,h2,h3,h4,h5,h6 {
font-weight: bold;
clear: both;
color: #333;
}

a:link, a:visited {
color:#861B0B;
}

a:hover, a:active {
color: #333;
}

p {
margin-bottom: 18px;
}

li {
padding-left: 5px;
}

/* nav */

nav .menu {
font-size: 16px;
font-weight: bold;
}

nav .menu ul {
margin: 0;
padding: 17px 0 0 20px;
list-style: none;
line-height: normal;
}

nav .menu li {
display: block;
float: left;
}

nav .menu a {
display: block;
float: left;
margin-right: 5px;
padding: 0px 15px;
text-decoration: none;
color: #F2E0DF;
}

nav .menu a:hover {
text-decoration: underline;
}

/** HEADER */

header {
padding: 20px 0 0 0;
}

header>h1 {
float: left;
margin: 0 0 18px 10px;
width: 59%;
font-size: 40px;
line-height: 36px;
}

header>h1 a {
color: #333;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 2px 3px #555;
}

header>h2 {
color: #777;
clear: right;
width:49%;
float: right;
font-style: italic;
font-size: 14px;
margin: 14px 10px 18px 0;
}

/** ARTICLES **/
article{
	padding:0 15px;}
article img {
border: none;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
}

#content p, ul, ol, hr {
margin-bottom: 24px;
}

#content ul ul, ol ol, ul ol, ol ul {
margin-bottom: 0;
}

#content h1, h2, h3, h4, h5, h6 {
color: #333;
margin: 0 0 20px 0;
line-height: 1.5em;
}

.alignleft, img.alignleft {
display: inline;
float: left;
margin-right: 10px;
}

.alignright, img.alignright {
display: inline;
float: right;
margin-left: 10px;
}

.aligncenter, img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignleft, img.alignright, img.aligncenter {
margin-bottom: 12px;
}

/* sidebar and footer widget blocks */

aside h3 {
font-size: 18px;
text-shadow: 0px 2px 3px #ddd;
}

aside ul {
list-style: square;
color: #bbb;
margin: -15px 0 15px 25px;
}

#footer-area {
background: #570f04;
color: #f2e0df;
font-size: 90%;
padding: 18px 0;
overflow: hidden;
/* curved border radius */
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}

.footer-segment {
float: left;
width: 25%;
}
iframe{
	max-width:99% !important;}
.footer-segment h4, 
.footer-segment ul, 
.footer-segment p{
    margin-left: 20px;
    margin-right: 20px;:}
footer aside h4 {
color: #faf0e6;
font-size: 16px;
line-height: 1.5em;
}

footer ul {
list-style: none;
margin: -15px 0;
}

footer a:link, footer a:visited {
color: #ccc;
}

footer a:hover { 
text-decoration: underline; 
}

footer p {
margin-top: -15px;
color: #faf0e6;
}
@media (max-width: 768px) {
	nav .menu a{
		padding: 0 10px;
		font-size:14px;
		}
	}
@media (max-width: 767px) {
	nav{
		height:auto;
		overflow:hidden;}
	nav .menu li{
		float:none;}
	nav .menu a{
		padding: 5px 5px;
		font-size:12px;
		float:none;
		}
	#sidebar1, #sidebar2, #content{
		width:100%;}
	#content{
		border:none;}
	.footer-segment {
		width: 50%;
		margin-bottom:35px;
	}
	header>h2, header>h1{
		width:96%;}
}
@media (max-width: 320px) {
	.footer-segment {
		width: 100%;
	}
}

/* ==================================================================
   PIED DE PAGE SUR TROIS COLONNES

   Ce site portait une ou plusieurs barres laterales a largeur fixe :
   sur telephone, elles poussaient le contenu hors de l'ecran. Leur
   contenu est desormais dans le pied de page, reparti sur trois
   colonnes qui se replient l'une sous l'autre quand la place manque.
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; }
img, iframe, video, table { max-width: 100%; }
img { height: auto; }

.pied-3col {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 28px;
}
.pied-col {
	flex: 1 1 240px;
	min-width: 0;
}
.pied-col > *:first-child { margin-top: 0; }

/* la colonne de contenu reprend toute la largeur */
#content {
	float: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

/* les conteneurs gardent leur largeur, sans la subir */
#wrapper {
	width: auto;
	max-width: 940px;
}

/* le pied ajoute aux pages qui n'en avaient pas */
.pied-ajoute {
	width: auto;
	max-width: 940px;
	margin: 24px auto 0 auto;
	padding: 18px 10px;
	clear: both;
}

@media screen and (max-width: 760px) {
	.pied-col { flex: 1 1 100%; }
}

/* Marges interieures de la zone de texte et pied unique */
#content { padding-left: 28px; padding-right: 28px; }
@media screen and (max-width: 600px) { #content { padding-left: 14px; padding-right: 14px; } }
.pied-3col { width: 940px; max-width: 100%; margin-left: auto; margin-right: auto; padding: 0 28px; }
footer .pied-col h3, footer .pied-col h4 { font-size: 1.05em; margin: 0 0 8px 0; }
footer .pied-col p { margin: 0 0 8px 0; }
footer .motsclefs { max-width: 940px; margin: 12px auto 0 auto; padding: 0 28px; text-align: center; }


/* Une marge laterale dans la zone de texte. Les pages qui enveloppent
   leur contenu dans <article> la tenaient de la regle article, les
   autres n'en avaient aucune et le texte touchait le bord. */
#content {
	padding-left: 15px;
	padding-right: 15px;
}
#content > article {
	padding-left: 0;
	padding-right: 0;
}


/* Le fond du pied de page. Les trois colonnes ont ete posees
   directement dans <footer>, sans le bloc #footer-area qui portait la
   couleur, et le pied restait blanc, titres compris. */
footer {
	background: #570f04;
	color: #f2e0df;
	font-size: 90%;
	padding: 18px 0;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
footer .pied-3col {
	padding: 0 20px;
}
footer h2, footer h3, footer h4 {
	color: #faf0e6;
	font-size: 16px;
	line-height: 1.4em;
	margin: 0 0 8px 0;
	clear: none;
}
footer ul {
	list-style: none;
	margin: 0 0 22px 0;
	padding: 0;
}
footer li {
	padding-left: 0;
	margin-bottom: 5px;
}
footer p {
	margin: 0 0 12px 0;
	color: #faf0e6;
}
footer iframe {
	margin-bottom: 12px;
}