/* Reset (Meyer Reset) */
html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}

.clearfix { overflow: auto; }

/* Responsive design */

.whole_content {
	margin: 0 auto;
	word-wrap: break-spaces;
	hyphens: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
}

.main_content {
	display: inline-block;
	vertical-align:top;
	overflow: hidden;
}

.side_content {
	display: inline-block;
	vertical-align:top;
	overflow: hidden;
}

.w300 { width:300px; display: inline-block; vertical-align:top; padding:0 20px; overflow: hidden; }

@media only screen and (min-width: 0px) and (max-width: 639px) {
	.whole_content { width:300px; }
	.main_content { width:300px; }
	.side_content { width:300px; }
	
	.zone_index .w300 { padding-left:0; padding-right:0; }
	.zone_liste .w300 { padding-left:0; padding-right:0; }
}

@media only screen and (min-width: 640px) and (max-width: 979px) {
	.whole_content { width:640px; }
	.main_content { width:640px; }
	.side_content { width:640px; }

	.zone_index .w300:nth-child(2n+1) { padding-left:0; }
	.zone_index .w300:nth-child(2n+2) { padding-right:0; }
	.zone_liste .w300:nth-child(2n+1) { padding-left:0; }
	.zone_liste .w300:nth-child(2n+2) { padding-right:0; }
}

@media only screen and (min-width: 980px) and (max-width: 1319px) {
	.whole_content { width:980px; }
	.main_content { width:660px; }
	.side_content { width:320px; }

	.zone_index .w300:nth-child(2n+1) { padding-left:0; }
	.zone_liste .w300 { padding-right:0; }
}

@media only screen and (min-width: 1320px) and (max-width: 1659px) {
	.whole_content { width:1320px; }
	.main_content { width:1000px; }
	.side_content { width:320px; }

	.zone_index .w300:nth-child(3n+1) { padding-left:0; }
	.zone_liste .w300 { padding-right:0; }
}

@media only screen and (min-width: 1660px) {
	.whole_content { width:1660px; }
	.main_content { width:1340px; }
	.side_content { width:320px; }
	
	.zone_index .w300:nth-child(4n+1) { padding-left:0; }
	.zone_liste .w300 { padding-right:0; }
}


/* Body */
body {
	font-weight: 400;
	font-family: 'Raleway', sans-serif;
	font-size: 0;
}

/* Header */

header { width: 100%; background-color: #f03433; border-bottom: 5px solid white; }
header .whole_content { height: 100%; position:relative; max-width:1320px; }
header H1 { font-family: 'Montserrat', sans-serif; font-weight: 800;  font-size:15px; line-height: 31px; color: white; }
header .logo IMG { width: 147px; }

header .search input { width:100%; text-align:right; font-size:14px; color: #FFFFFF; background-color: #f03433; }
header .search .logo { padding: 8px; cursor: pointer; width:20px; height:20px; line-height: 14px; font-size: 14px; font-weight: 700; color: #FFFFFF; }
header .search form { width:228px; z-index:1; position:absolute; padding-right:16px; top:8px; right:28px; }
header .search input:-webkit-input-placeholder { color: #ffa0a0; }
header .search input:-moz-placeholder { color: #ffa0a0; opacity: 1; }
header .search input::-moz-placeholder { color: #ffa0a0; opacity: 1; }
header .search input:-ms-input-placeholder { color: #ffa0a0; }
header .search input::-ms-input-placeholder { color: #ffa0a0; }
header .search input::placeholder { color: #ffa0a0; }


@media only screen and (min-width: 0px) and (max-width: 639px) {
	header { padding: 16px 0; }
	header .whole_content { text-align: center; }
	header .logo IMG { margin:24px 12px 12px 12px; }
	
	header .search { display:block; position:absolute; top:28px; right:0px; }
	header .search form { display:none; }
	header .search:hover form { display:block; }

	header .menu { display:block; float:left; position:absolute; top:28px; left:0px; }
	header .menu .logo { padding: 8px; display:block; cursor: pointer; width:20px; height:20px; }
	header .menu ul.l1 { display:none; width:244px; z-index:1; position:absolute; top:8px; left:28px; background-color: #f03433; }
	header .menu:hover ul.l1 { display:block; }
	header .menu li { border-top: 1px solid white; padding-top: 3px; margin: 0 6px; text-align:left; }
	header .menu li:hover, header .menu li.selected { border-top: 4px solid white; padding-top: 0px; }
	header .menu ul.l2 { margin-left:20px; width:212px; }
	header .menu a { display: inline-block;  padding: 8px 8px 12px 8px; font-size: 14px; line-height: 14px; height: 14px; font-weight: 700; text-decoration: none; color: #FFFFFF; cursor: pointer; }
	header .menu ul.l2 li:before { content:">"; font-size: 14px; font-weight: 700; color: #FFFFFF; }

	.afterheader { display:none }
}

@media only screen and (min-width: 640px) and (max-width: 1319px) {
	header { z-index: 1; padding-top: 24px; height: 93px; position: fixed; top: 0; left: 0; }
	header H1 { display:block; float:left; margin-left:179px; }
	header .button { display:block; float:right; margin-right:32px; }
	header .logo IMG { position: absolute; bottom: -48px; left: 0; }

	header .search .logo svg { display:none; }
	header .search { display:block; position:absolute; top:42px; right:0px; }

	header .menu { position: absolute; bottom: 0px; left: 153px; }
	header .menu .logo { padding: 8px; display:block; cursor: pointer; width:20px; height:20px; position:absolute; bottom:16px; }
	header .menu ul.l1 { display:none; width:444px; z-index:1; position:absolute; top:-48px; left:28px; background-color: #f03433; }
	header .menu:hover ul.l1 { display:block; }
	header .menu li { border-top: 1px solid white; padding-top: 3px; margin: 0 6px; text-align:left; }
	header .menu li:hover, header .menu li.selected { border-top: 4px solid white; padding-top: 0px; }
	header .menu ul.l2 { margin-left:20px; width:412px; }
	header .menu a { display: inline-block;  padding: 8px 8px 12px 8px; font-size: 14px; line-height: 14px; height: 14px; font-weight: 700; text-decoration: none; color: #FFFFFF; cursor: pointer; }
	header .menu ul.l2 li:before { content:">"; font-size: 14px; font-weight: 700; color: #FFFFFF; }

	.afterheader { height:122px }
}

@media only screen and (min-width: 1320px) {
	header { z-index: 1; padding-top: 24px; height: 93px; position: fixed; top: 0; left: 0; }
	header H1 { display:block; float:left; margin-left:179px; }
	header .button { display:block; float:right; margin-right:32px; }
	header .logo IMG { position: absolute; bottom: -48px; left: 0; }

	header .search .logo svg { display:none; }
	header .search { display:block; position:absolute; top:42px; right:0px; }

	header .menu { position: absolute; bottom: 0px; left: 153px; }
	header .menu .logo { display:none; }
	header .menu ul { background-color: #f03433; white-space: nowrap; }
	header .menu li { border-top: 1px solid white; padding-top: 3px; margin: 0 6px; position: relative; }
	header .menu li:hover, header .menu li.selected { border-top: 4px solid white; padding-top: 0px; }
	header .menu ul.l1 > li { display: inline-block; }
	header .menu ul.l2 > li { display: block; text-align: right; }
	header .menu ul.l2 { display: none; position: absolute; left: -6px; top: 47px; }
	header .menu li:hover ul.l2 { display: block; }
	header .menu ul.l1 a { padding: 5px 8px 28px 8px; }
	header .menu ul.l2 a { padding: 12px 8px 16px 8px; }
	header .menu a { display: inline-block; font-size: 14px; line-height: 14px; height: 14px; font-weight: 700; text-decoration: none; color: #FFFFFF; cursor: pointer; }

	.afterheader { height:122px }
}


/* Footer */
footer { text-align:center; display: table; width: 100%; background-color: #3E8599; margin-top: 36px;}
footer div { display: table-cell; vertical-align: middle; text-align: center; font-size: 14px; color: white; }
footer img { vertical-align: middle; padding: 12px 24px;}
footer a { text-decoration:none; color: white; }
footer a:hover { text-decoration:underline; }
footer span { display:inline-block; margin: 12px 0 }
@media only screen and (max-width: 800px) { footer .logo { display:block; } }




#sansunite, .sansunite {
	display: table;
	width: 100%;
	height: 128px;
}

#sansunite SPAN, .sansunite SPAN {
	display: table-cell; 
	vertical-align: middle; 
	text-align: center; 

	font-family: 'Droid Serif', serif;
	font-size: 28px;
	font-style: italic;
	font-weight: bold;
	color: #3E8599;
}



.zone_affiche {
	max-width:640px;
	margin: 0 auto;
}

.zone_affiche div.w300:nth-child(2n+1) {
	padding-right:0;
}

.zone_affiche div.w300:nth-child(2n+2) {
	padding-left:0;
}

@media only screen and (min-width: 0px) and (max-width: 639px) {
	.zone_affiche div.w300 {
		margin-left:0;
		margin-right:0;
	}
}

.zone_affiche .row1 {
	width: 100%;
	height: 22px;
	margin-bottom: 18px;

	position: relative;
}

.zone_affiche .row1 .cat {
	float: left;
	background-color: white;
} 

.zone_affiche .row1 .affiche {
	float: right;
	background-color: white;
	padding-left: 6px;

	font-family: 'Anton', sans-serif;
	font-size: 20px;
	line-height: 22px;
	color: #3e8599;
} 

.zone_affiche .row1 .ligne {
	width: 100%;
	height: 1px;

	position: absolute;
	top:11px;
	z-index: -1;
	
	background-color: #3e8599;
}




.article_titre.thumb {
	display: block;
	margin: 0 0 8px 0;
	font-size: 22px;
	line-height: 26px;
}

.article_titre.thumb-video {
	display: block;
	margin: 0 0 4px 0;
	font-size: 16px;
	line-height: 18px;
}

.article_titre.thumb A, .article_titre.thumb-video A {
	color: black;
	text-decoration: none;
}

.article_titre.thumb A:hover, .article_titre.thumb-video A:hover {
	text-decoration: underline;
}




.article_infos.thumb {
	margin-bottom: 6px;
	color: black;
	font-size: 15px;
}

.article_infos.thumb .sep {
	display: inline-block;
	margin: 0 12px;
}

.article_infos.thumb .author A {
	color: black;
	text-decoration: none;
}

.article_infos.thumb .author A:hover {
	text-decoration: underline;
}




.article_thumbnail.thumb {
	margin-bottom: 24px;
	border: 5px solid black;
}




.article_excerpt.thumb {
	padding-bottom: 40px;
}

.article_excerpt.thumb span {
	font-size: 15px;
	line-height: 18px;
	color: black;
}

.article_excerpt.thumb A.button {
	display: inline-block;
    float: right;
    margin-top: 16px;
}



.zone_index .pagination {
	text-align: center;
	padding: 32px 0;
}

.zone_index .pagination A {
	margin: 0 8px;
}



article.plain { font-size: 16px; line-height: 1.3em; color: black; margin:36px auto; max-width:800px; }
article.plain h1 { font-size: 2em; margin-bottom: 15px; line-height: 1.3em; }
article.plain .content { font-size: 16px; line-height: 1.3em; color:black; margin:36px auto; max-width:800px; }
article.plain .content h1 { font-size: 3em; }
article.plain .content h2 { font-size: 2.66em; }
article.plain .content h3 { font-size: 2.33em; }
article.plain .content h4 { font-size: 2em; }
article.plain .content h5 { font-size: 1.66em; }
article.plain .content h6 { font-size: 1.33em; }
article.plain .content h1,
article.plain .content h2,
article.plain .content h3,
article.plain .content h4,
article.plain .content h5,
article.plain .content h6 { margin-bottom: 15px; line-height: 1.3em; }
article.plain .content a { font-weight: inherit; }
article.plain .content p { margin: 0 0 15px; text-indent:2em; }
article.plain .content p img { text-indent:0; }
article.plain .content em,
article.plain .content i { font-style: italic; font-weight: inherit; }
article.plain .content b,
article.plain .content strong,
article.plain .content dt { font-weight: 700; font-style: inherit; color:#3e8599; }
article.plain .content big { font-size: 110%; line-height: 180% }
article.plain .content a,
article.plain .content a:visited,
article.plain .content a:focus { text-decoration: none; outline: 0; color:#f03433;}
article.plain .content a:hover { text-decoration: underline; }
article.plain .content p a,
article.plain .content p a:visited { line-height: inherit; }
article.plain .content img { padding:4px; border:1px solid #888; }
article.plain .content .alignleft { float:left;  margin: 0 12px 12px 0; }
article.plain .content .alignright { float:right;  margin: 0 0 12px 12px; }
article.plain .content .aligncenter { text-align:center; margin:0 auto; display:block; }
/* Notes */
article.plain .content SUP { vertical-align:super; }
article.plain .content SUP.note A { text-decoration: none; font-size: 80%; }
article.plain .content SUP.note A:hover { color: #e82e34; text-decoration: none; }
article.plain .content DIV.note { font-size:80%; border-top: 1px #ccc dotted; margin-top: 2em; padding: 2em 0; }
article.plain .content DIV.note:before { color: #444; content: "notes :"; }
article.plain .content DIV.note P { margin-bottom: 0; text-indent: 0; }




.side_header { height: 20px; margin: 18px 0; position: relative; text-align:center; }
@media only screen and (min-width: 980px) {
	.side_header { padding-left:20px; }
}
.side_header h2 { display:inline-block; background-color: white; padding: 0 6px; font-family: 'Anton', sans-serif; font-size: 18px; line-height: 20px; color: #3e8599; }
.side_header div { width: 100%; height: 1px; position: absolute; top: 10px; z-index: -1; background-color: #3e8599; }
.side_footer { float:right; }



.intertitre {
	background-color: #a6c25b;
	font-size: 22px;
	line-height: 22px;
	font-weight: 400;
	text-decoration: none;
	color: white;
	margin: 12px 0 24px 0;
	padding: 12px;
	border: 1px solid #3e8599;
}

.titrecategorie {
	background-color: #3e8599;
	font-size: 22px;
	line-height: 22px;
	font-weight: 400;
	text-decoration: none;
	color: white;
	margin: 12px 0 24px 0;
	padding: 12px;
	border: 1px solid #888;
}

/* CATEGORY */

A.category {
	padding: 0 12px;
	margin: 0 6px 6px 0;
	display: inline-block;

	text-align: center; 

	font-size: 13px;
	line-height: 23px;
	font-weight: 400;
	text-decoration: none;
	color: white;

	background-color: #3e8599;
    transition: background-color .3s;
}

A.category:hover {
	background-color: #a0a09f;
}

/* BUTTON */
A.button, INPUT.button {
	padding: 0 16px;

	display: inline-block;
	text-align: center; 

	font-size: 13px;
	line-height: 31px;
	font-weight: 700;
	text-decoration: none;
	color: white;

	background-color: #a6c25b;
    transition: background-color .3s;
}

A.button:hover, INPUT.button:hover {
	background-color: #a0a09f;
}

A.button.blue, INPUT.button.blue {
	background-color: #207ea9;
}

A.button.blue:hover, INPUT.button.blue:hover {
	background-color: #a0a09f;
}


/* IMG Link transition */
A > IMG { transition-duration: 1s; transition-property: transform; }
A > IMG:hover { transform: scale(1.1); }


/* VIDEO */
.videoWrapper { max-width:600px; margin: 24px auto; position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Facebook comments */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { !important; min-width: 100% !important; width: 100% !important; }

/* Facebook like & share */
.social-article { float:right; width:300px; }
.social-article .social-twitter { float:right; width:75px; }
.social-article .social-facebook { float:right; width:126px; }

.social-main { position:relative; }
.social-main .social-twitter { width:75px; position:absolute; top:0; right:208px; }
.social-main .facebook-follow { width:86px; height:20px; position:absolute; top:0; right:122px; }
.social-main .facebook-like { width:122px; height:20px; position:absolute; top:0; right:0; }

/* Splash screen */
#splash { position:relative; }
#splash .splashimage { position:absolute;top:0;left:0;z-index:-1;width:100%; }
#splash LABEL { width:100px; text-align:right; display:inline-block; padding-right:12px; }
#splash #email, #splash #nom { font-size:0.8em;color:#f03433;padding:2px;width:200px; }
#splash .splash1 { position:absolute;top:0;left:0;z-index:0;width:100%; }
#splash .splash2 { margin:0 auto;width:360px;text-align:center;font-size:24px;color:white;font-weight:700;margin-top:2em; }

/* Adhésion */
#adhesion LABEL { width:200px; text-align:right; display:inline-block; padding-right:12px; }
#adhesion INPUT { border:1px solid #888; background-color:#EEE; margin:4px; padding:4px; }
#adhesion #lname, #adhesion #fname, #adhesion #city { width:200px; }
#adhesion #zip { width:100px; }
#adhesion #address, #adhesion #email { width:400px; }
#adhesion INPUT.error { background-color:#ECC; }
#adhesion INPUT:disabled { border-color:white; }
#adhesion #prix { width:40px; }
.button.adhesion { width:240px; padding:0 40px; margin:12px 40px; }

BODY#adhesion-cheque { background-color:#ccc; }
#adhesion-cheque div.content { width:800px; height:1131px; margin:20px auto; border:1px solid black; background-color:white; font-size: 18px; line-height: 22px; color: black; position:relative; }
#adhesion-cheque .background { z-index:1; }
#adhesion-cheque .article_thumbnail { position:absolute; left:555px; top:51px; }
#adhesion-cheque .infos { z-index:2; position:absolute; top:730px; left:200px; }

/* RGPD (to be continued...) */
#rgpd { position:relative; }
#rgpd .banner { position:fixed;bottom:0;left:0;z-index:10;width:100%;background-color:rgba(240,51,51,0.8); }
#rgpd .banner {
	display: table-cell; 
	vertical-align: middle; 
	text-align: center; 
	padding:2em;
	font-family: 'Droid Serif', serif;
	font-size: 28px;
	font-style: italic;
	font-weight: bold;
	color: #3E8599;
}

/* Inscription mailing list */
#mailing { display:block;text-align:center; }
#mailing LABEL { text-align:right;font-size:14px;color:#a0a09f;padding:2px;width:60px;display:inline-block;line-height:1.3em; }
#mailing .field { font-size:12px;color:#a0a09f;padding:2px;width:200px;border:1px solid #888;display:inline-block;line-height:1.3em; }
#mailing .button { margin:8px; }