@charset "utf-8";
/* CSS Document */


body,
html {
	width:100%;
	height:100%;
}

body {
	margin:0px;
	font-size:16px;
	font-family:"Calibri", Fallback, sans-serif;
	text-align:center;
	cursor:default;
}



/**/
#viewport {
	position:relative;
	display:inline-block;
	width:auto;
	max-width:940px;
	height:auto;
	margin:auto;
	padding-left:20px;
	padding-right:20px;
	text-align:left;
	box-shadow:0px 0px 10px 0px rgba(20,20,20,.8);
	-webkit-box-shadow:0px 0px 10px 0px rgba(20,20,20,.8);
	-moz-box-shadow:0px 0px 10px 0px rgba(20,20,20,.8);
	-o-box-shadow:0px 0px 10px 0px rgba(20,20,20,.8);
}

#viewport .contenu {
	position:relative;
	display:block;
	width:100%;
	height:auto;
	margin-bottom:20px;
}


/*

	MENU

*/
#viewport #menu { margin-top:30px; margin-bottom:10px; }

#viewport #menu #logo {
	position:relative;
	display:inline-block;
	width:375px;
	height:auto;
	top:0px;
	left:0px;
	margin-bottom:10px;
}
#viewport #menu #logo_dplg {
	position:relative;
	display:none;
	width:0%;
	height:auto;
	margin-bottom:10px;
}
#viewport #menu .menu {
	position:absolute;
	height:32px;
	height:auto;
	line-height:30px;
	width:auto;
	top:0px;
	left:385px;
	right:0px;
	text-align:right;
	margin-bottom:10px;
	padding-right:4px;
	background-color:#659331;
}
#viewport #menu .menu .item {
	position:relative;
	display:inline-block;
	margin-right:1%;
	margin-left:1%;
	font-weight:bold;
	/*letter-spacing:0px;*/
	font-size:20px;
	height:inherit;
	line-height:inherit;
	text-decoration:none;
	border:none;
	color:#FFFFFF;
	font-family:'bebas_neue_regularregular';
}
#viewport #menu .menu .item_active { color:#000000; cursor:default; }


/*

	BANNIERE

*/
#viewport #banniere { overflow:hidden; height:400px; }


/*

	INFOS

*/
#viewport #infos {
	height:30px;
	line-height:30px;
}

#viewport #infos .infos {
	position:absolute;
	display:block;
	width:auto;
	height:inherit;
	line-height:inherit;
	left:0px;
	right:290px;
	margin:0px;
	padding-left:10px;
	font-size:24px;
	text-align:left;
	font-weight:bold;
	color:rgba(0,0,0,.8);
	/*color:rgba(255,255,255,.98);*/
	font-family:'bebas_neue_regularregular';
	background-color:#659331;
}
#viewport #infos .infos .btn_lumiere {
	position:absolute;
	width:auto;
	top:0px;
	right:10px;
	font-size:16px;
	line-height:30px;
	height:auto;
	padding:0px;
}
#viewport #infos .infos .btn_lumiere label { cursor:pointer; }
#viewport #infos .infos .btn_lumiere a { color:#ffffff; }
#viewport #infos #dplg {
	position:absolute;
	display:block;
	right:0px;
	top:0px;
	width:280px;
	height:inherit;
}




@media screen and (max-width:768px) and (min-width:600px) {
#viewport #banniere { height:320px; }
}
@media screen and (max-width:600px) {
#viewport #banniere { height:200px; }
#viewport #menu .menu { text-align:justify; }
}


@media screen and (max-width:550px) and (min-width:480px) {
#viewport #menu .menu .item { font-size:18px; }
#viewport #infos .infos { font-size:17px; }
#viewport #infos .infos .btn_lumiere { font-size:14px; }
}
@media screen and (max-width:480px) {
#viewport #infos .infos .btn_lumiere { font-size:12px; }
#viewport #infos .infos { font-size:14px; } 
}





/*

	CONTENU

*/
#viewport #page {}

#viewport #page .texte {
	position:relative;
	display:block;
	width:100%;
	height:auto;
	margin-bottom:20px;
	text-align:justify;
}

#viewport #page .titre {
	font-size:22px;
	font-weight:bold;
	margin-bottom:10px;
	letter-spacing:1px;
	font-family:'bebas_neue_regularregular';
}


/*

	VIGNETTES

*/
#viewport #page .vignettes {
	position:relative;
	display:block;
	width:100%;
	height:auto;
	font-size:0px;
}
#viewport #page .vignettes .item {
	position:relative;
	display:inline-block;
	height:120px;
	margin-bottom:20px;
	overflow:hidden;
}
#viewport #page .vignettes .item a {
	position:absolute;
	text-decoration:none;
	border:none;
	width:100%;
	height:100%;
	top:0%;
	left:0%;
	color:#FFFFFF;
	font-size:0px;
	text-align:center;
	line-height:110px;
	font-weight:bold;
	background-color:rgba(0,0,0,0);
}
#viewport #page .vignettes .item:hover a { font-size:14px; background-color:rgba(0,0,0,.7); }

#viewport #page .vignettes .item_hover_s1 a { left:-100%; }
#viewport #page .vignettes .item_hover_s1:hover a { left:0%; }

#viewport #page .vignettes .item_hover_s2 a { left:100%; }
#viewport #page .vignettes .item_hover_s2:hover a { left:0%; }




@media screen and (min-width:920px) {
#viewport #page .vignettes .item { width:15%; margin-right:2%; }
#viewport #page .vignettes .item:nth-child(6n) { margin-right:0px; }
}
@media screen and (max-width:920px) and (min-width:768px) {
#viewport #page .vignettes .item { width:18%; margin-right:2.5%; }
#viewport #page .vignettes .item:nth-child(5n) { margin-right:0px; }
#viewport #page .vignettes .item:nth-child(n+6) { display:none; }
}
@media screen and (max-width:768px) and (min-width:600px) {
#viewport #page .vignettes .item { width:23%; margin-right:2.6%; }
#viewport #page .vignettes .item:nth-child(4n) { margin-right:0px; }
#viewport #page .vignettes .item:nth-child(n+5) { display:none; }
}
@media screen and (max-width:600px) {
#viewport #page .vignettes .item { width:31%; margin-right:2.3%; }
#viewport #page .vignettes .item:nth-child(3n) { margin-right:0px; }
}




/*

	ARTICLES

*/
#viewport #page .articles {
	position:relative;
	width:100%;
	margin-bottom:30px;
	font-size:0px;
	text-align:left;
}

#viewport #page .articles .titre {
	position:relative;
	width:auto;
	height:auto;
	left:0px;
	right:0px;
	padding:5px 10px 5px 10px;
	margin:10px 0px 20px 0px;
	font-size:22px;
	font-weight:bold;
	text-align:justify;
	color:rgba(255,255,255,1);
	font-family:'bebas_neue_regularregular';
	background-color:#659331;
}
#viewport #page .articles .item {
	position:relative;
	display:inline-block;
	padding-bottom:20px;
	padding-top:15px;
	min-height:180px;
	font-size:16px;
	vertical-align:text-top;
	text-align:left;
	transition:0.5s;
	-moz-transition:0.5s;
	-webkit-transition:0.5s;
	-o-transition:0.5s;
}


#viewport #page .articles .item .item_titre {
	position:relative;
	display:block;
	width:90%;
	left:5%;
	margin-bottom:15px;
	font-size:1.4em;
	font-weight:bold;
	font-family:'bebas_neue_regularregular';
}
#viewport #page .articles .item .item_img {
	position:relative;
	width:90%;
	left:5%;
	/*top:10px;*/
	padding-top:5%;
	margin:0px;
	height:210px;
	background-color:rgba(255,255,255,.2);
	margin-bottom:15px;
}
#viewport #page .articles .item .item_href {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	cursor:pointer;
	text-decoration:none;
	border:none;
}

#viewport #page .articles .item .item_description {
	position:relative;
	display:block;
	width:90%;
	left:5%;
}




@media screen and (min-width:640px) {
/*#viewport #page .articles .item { width:32%; margin-right:2%; }
#viewport #page .articles .item:nth-child(3n) { margin-right:0px; }*/
#viewport #page .articles .item { width:33%; }
}
@media screen and (max-width:640px) and (min-width:480px) {
/*#viewport #page .articles .item { width:48%; margin-right:2%; }
#viewport #page .articles .item:nth-child(2n) { margin-right:0px; }*/
#viewport #page .articles .item { width:50%; }
}
@media screen and (max-width:480px) {
/*#viewport #page .articles .item { width:100%; min-height:0px; margin-right:0px; }*/
}

@media screen and (max-width:480px) {
#viewport #page .articles .item {
	display:block;
	width:auto;
	left:0px;
	right:0px;
	padding:10px;
	border:1px solid rgba(0,0,0,.1);
	background-color:rgba(0,0,0,.1);
	margin-bottom:20px;
}
}




/*

	PIED

*/
#viewport #pied {
	position:relative;
	display:block;
	width:auto;
	height:auto;
	margin-top:20px;
	padding:20px;
	text-align:center;
	color:#FFFFFF;
	background-color:#669933;
}





@media screen and (max-width:980px) { /* > 920 */

/*#viewport #menu .menu { position:relative; left:0px; }
*/

}

@media screen and (max-width:980px) { /* > 920 */

#viewport #menu .menu { position:relative; left:0px; }

#viewport #menu #logo { width:63%; height:auto; }

#viewport #menu #logo_dplg { width:35%; display:inline-block; }

#viewport #infos #dplg { display:none; }

#viewport #infos .infos { width:auto; right:0px; padding-left:2px; }

}




/**/
.separateur {
	position:relative;
	width:100%;
	height:30px;
	margin-bottom:20px;
	background-color:#659331;
	font-size:24px;
	line-height:1.3em;
	text-align:left;
	font-weight:bold;
	color:rgba(0,0,0,.8);
	font-family:'bebas_neue_regularregular';
}


.anim5 {
	transition:0.5s;
	-moz-transition:0.5s;
	-webkit-transition:0.5s;
	-o-transition:0.5s;
}
.bgcover {
	background-position:center;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}
.bgcontain {
	background-repeat:no-repeat;
	background-position:center;
	-webkit-background-size:contain;
	-moz-background-size:contain;
	-o-background-size:contain;
	background-size:contain;
}
@font-face {
    font-family:'bebas_neue_regularregular';
    src: url('../img/typos/bebasneue_regular-webfont.eot');
    src: url('../img/typos/bebasneue_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../img/typos/bebasneue_regular-webfont.woff2') format('woff2'),
         url('../img/typos/bebasneue_regular-webfont.woff') format('woff'),
         url('../img/typos/bebasneue_regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family:'nexarust';
	src:url('../img/typos/NexaRustSans-Black-webfont.eot');
	src:url('../img/typos/NexaRustSans-Black-webfont.eot?#iefix') format('embedded-opentype'),
		url('../img/typos/NexaRustSans-Black-webfont.woff2') format('woff2'),
		url('../img/typos/NexaRustSans-Black-webfont.woff') format('woff'),
		url('../img/typos/NexaRustSans-Black-webfont.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
}




/*

	FOND


*/
.fond {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
}
.fond div {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background-position:center;
}
.fond div:nth-child(2) { background-image:url(../img/fondNoir.jpg); }
.fond div:nth-child(1) { background-image:url(../img/fondBlanc.jpg); }
.fond div:nth-child(3) {
	position:fixed;
	width:140%;
	height:140%;
	top:-20%;
	left:-20%;
	background-size:170% 170%;
	background-image:url(../img/lueurFond2.png);
}
.fond div:nth-child(4) {
	position:fixed;
	background-repeat:no-repeat;
	background-size:80% 80%;
	background-image:url(../img/lueurFond1.png);
	background-image:url(../img/lueurFond2.png);
}



.fondP1 { position:fixed; }
.fondP1 div:nth-child(2) { background-position:inherit; }
.fondP1 div:nth-child(1) { background-position:inherit; }
.fondP1 div:nth-child(3) { background:none; }
.fondP1 div:nth-child(4) { background-size:100% 100%; background-image:url(../img/lueurFond1.png); }