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





#viewport #banniere { display:block !important; height:100% !important; }



#viewport #banniere .banniere_titre {
	position:absolute;
	display:block;
	width:48%;
	height:auto;
	left:50%;
	top:2%;
	padding-top:0px;
	padding-bottom:10px;
	font-size:2em;
	color:rgba(50,50,50,.78);
	/*color:#fff;*/
	font-weight:bold;
	text-align:center;
	
	text-shadow:-3px 3px 4px rgba(150,150,150,.8);
	-webkit-text-shadow:-3px 3px 4px rgba(150,150,150,.8);
	-moz-text-shadow:-3px 3px 4px rgba(150,150,150,.8);
	-o-text-shadow:-3px 3px 4px rgba(150,150,150,.8);

	transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	-o-transition:.5s;
}

#viewport #banniere #banniere_infos {
	position:absolute;
	width:46%;
	height:auto;
	top:0px;
	left:52%;
	bottom:230px;
	padding-bottom:30px;
	margin-left:0px;
	z-index:10;
}
#banniere_infos .content_info {
	position:absolute;
	display:block;
	width:auto;
	height:auto;
	top:2%;
	/*margin-top:75px;*/
	margin-top:10px;
	left:0px;
	right:0px;
	bottom:10px;
	padding:20px;
	padding-top:12px;
	color:rgba(50,50,50,.7);
	font-weight:bold;
	border:1px solid rgba(0,0,0,.2);
	/*background-color:rgba(0,0,0,.1);
	background-color:rgba(250,250,250,.4);*/
	background-color:rgba(250,250,250,.8);

	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-o-border-radius:20px;
	overflow:auto;
}
#banniere_infos .content_info .btn_fermer {
	position:absolute;
	width:30px;
	height:30px;
	top:10px;
	right:10px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:16px 16px;
	background-image:url(../img/fermer.png);
	
	transition:.1s;
	-moz-transition:.1s;
	-webkit-transition:.1s;
	-o-transition:.1s;

	opacity:.6;

	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	cursor:pointer;
}
#banniere_infos .content_info .btn_fermer:hover {
	background-size:18px 18px;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	opacity:.8;
}
#banniere_infos .content_info .titre {
	display:block;
	width:100%;
	text-align:center;
	font-weight:bold;
	font-size:1.3em;
	margin-bottom:18px;
	color:#009900;
}
#viewport #banniere #banniere_infos .content_info .infos_vignettes {
	position:relative;
	display:block;
	height:auto;
	width:auto;
	left:0px;
	right:0px;
	margin-top:40px;
	/*margin-left:10px;
	margin-right:10px;*/
	font-size:0px;
}
#viewport #banniere #banniere_infos .content_info .infos_vignettes .vignettes {
	position:relative;
	display:inline-block;
	width:30%;
	/*height:120px;*/
	width:0px;
	height:0px;
	padding:14.5%;
	background-color:rgba(0,0,0,.1);
	text-align:center;
	border:none;
	text-decoration:none;
	background-repeat:no-repeat;
	background-position:center;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	transition:.1s;
	-moz-transition:.1s;
	-webkit-transition:.1s;
	-o-transition:.1s;
	cursor:pointer;

	border:2px solid rgba(0,0,0,.2);
	overflow:hidden;

	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-o-border-radius:50%;
}

#viewport #banniere #banniere_infos .content_info .infos_vignettes .vignettes div {
	position:absolute;
	width:0%;
	height:0%;
	top:45%;
	left:50%;
	padding-left:5.5%;
	padding-right:5%;
	font-size:0px;
	transition:.3s;
	-moz-transition:.3s;
	-webkit-transition:.3s;
	-o-transition:.3s;
	background-color:rgba(0,0,0,0);
	font-size:0px;

	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-o-border-radius:50%;
}
#viewport #banniere #banniere_infos .content_info .infos_vignettes .vignettes div span {
	position:relative;
	display:inline-block;
	vertical-align:middle;
	color:rgba(255,255,255,1);
}
#viewport #banniere #banniere_infos .content_info .infos_vignettes .vignettes div:before {
	position:relative;
	display:inline-block;
	vertical-align:middle;
	content:'';
	height:100%;
	top:0px;
	width:1px;
	margin-left:-1px;
}

#viewport #banniere #banniere_infos .content_info .infos_vignettes .vignettes:hover div {
	width:90%;
	height:100%;
	top:0px;
	left:0px;
	font-size:14px;
	background-color:rgba(0,0,0,.4);
}


#viewport #banniere #banniere_infos .content_info .infos_vignettes .vignettes:not(:first-child) { margin-left:4%; }


#viewport #banniere #banniere_infos .content_info .infos_vignettes .vignettes:hover { padding:15.5%; margin:-1%; }

#viewport #banniere #banniere_infos .content_info .infos_vignettes .vignettes:not(:first-child):hover { margin-left:3%; }


#viewport #banniere #banniere_infos .content_info .infos_description {
	margin-top:22px;
	margin-bottom:20px;
	color:#009900;
	font-weight:normal;
}




/*

	

*/
#viewport #banniere #banniere_items {
	position:absolute;
	display:block;
	width:48%;
	height:auto;
	font-size:0px;
	left:1%;
	top:0px;
	bottom:230px;
	padding:0px;
	margin:0px;
	/*background-color:rgba(0,0,0,.1);*/
	z-index:10;
}

#viewport #banniere #banniere_items .items {
	position:relative;
	display:inline-block;
	width:50%;
	height:33.33%;
	margin:0px;
}


#viewport #banniere #banniere_items .items .ico {
	position:absolute;
	display:block;
	width:auto;
	height:auto;
	top:0px;
	left:0px;
	right:0px;
	bottom:24px;
	margin:20px;
	background-color:rgba(0,0,0,.05);
	background-repeat:no-repeat;
	background-position:center;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	
	transition:.1s;
	-moz-transition:.1s;
	-webkit-transition:.1s;
	-o-transition:.1s;
	cursor:pointer;

	/*border:1px solid rgba(255,255,255,.9);*/
	
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
}
#viewport #banniere #banniere_items .items .ico {
	box-shadow:-3px 3px 4px 0px rgba(0,0,0,.3);
	-webkit-box-shadow:-3px 3px 4px 0px rgba(0,0,0,.3);
	-moz-box-shadow:-3px 3px 4px 0px rgba(0,0,0,.3);
	-o-box-shadow:-3px 3px 4px 0px rgba(0,0,0,.3);
}

#viewport #banniere #banniere_items .items:hover .ico {
	margin:5px;
}
#viewport #banniere #banniere_items .items:hover .txt {
	font-weight:bold;
	font-size:16px;
	letter-spacing:-.8px;
}


#viewport #banniere #banniere_items .items .txt {
	position:absolute;
	display:block;
	width:100%;
	height:24px;
	line-height:24px;
	font-size:14px;
	text-align:center;
	overflow:hidden;
	bottom:0px;
	left:0px;
	font-weight:bold;
}





/*



*/

#viewport {
	/*width:100%;*/
	width:auto;
	left:0px;
	right:0px;
	top:100%;
	margin-top:-40px;
	margin-top:-90px;	
	box-shadow:0px 0px 0px 0px rgba(20,20,20,0);
	-webkit-box-shadow:0px 0px 0px 0px rgba(20,20,20,0);
	-moz-box-shadow:0px 0px 0px 0px rgba(20,20,20,0);
	-o-box-shadow:0px 0px 0px 0px rgba(20,20,20,0);
}



@media screen and (min-width:900px) {
#viewport { margin-top:-90px; }
#viewport #banniere #banniere_items,
#viewport #banniere #banniere_infos { bottom:230px; }
}
@media screen and (max-width:900px) {
#viewport { margin-top:-40px; }
#viewport #banniere #banniere_items,
#viewport #banniere #banniere_infos { bottom:180px; }
}

/*
@media screen and (min-width:600px) {
#viewport #banniere #banniere_items { }
#viewport #banniere #banniere_infos {}
}
@media screen and (max-width:600px) {
#viewport #banniere #banniere_items { width:100%; }
#viewport #banniere #banniere_infos { width:100%; }
}*/


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

#viewport #banniere .banniere_titre { display:none; }

#viewport #banniere #banniere_items { width:100%; }

#viewport #banniere #banniere_infos { width:100%; }

#banniere_system:checked ~ #banniere_infos { left:100% !important; }

#banniere_system:not(:checked) ~ #banniere_infos { left:0px !important; margin-left:0px !important; width:100% !important; }

}
/*#banniere_infos { left:0% !important; width:100% !important; background-color:rgba(0,0,0,.1); }*/


 
/*#viewport {
	margin-top:-40px;
}*/


/*#banniere { height:560px !important; }*/


.fond div:nth-child(5),
.fondP1 div:nth-child(5) {
	background-attachment:fixed;
	background-repeat:no-repeat;
	/*background-size:60% auto;*/
	/*background-position:right 0px;*/
	background-image:url(../img/plan_fond.png);


	/*background-position:center;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;*/
	
	background-position:center 0px;
	background-size:auto 100%;
	/*background-position:auto 0px;*/
}

.fondP1 div:nth-child(5) {
	opacity:.3;
	background-position:center 12px;
}


.viewport_fixe {
	position:fixed !important;
	top:0px !important;
	/*margin-top:0px !important;*/
	height:100% !important;
	max-width:940px;
	height:100%;
	margin:auto;
	padding-left:20px;
	padding-right:20px;
	text-align:left;
	box-shadow:0px 0px 10px 0px rgba(20,20,20,.8) !important;
	-webkit-box-shadow:0px 0px 10px 0px rgba(20,20,20,.8) !important;
	-moz-box-shadow:0px 0px 10px 0px rgba(20,20,20,.8) !important;
	-o-box-shadow:0px 0px 10px 0px rgba(20,20,20,.8) !important;
}
.viewport_fixe:after {
	position:absolute;
	display:block;
	content:' ';
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background-color:rgba(255,255,225,.5);
}






/*




@media screen and (min-width:640px) {
#viewport #banniere #banniere_items { width:47%; }
}
@media screen and (max-width:640px) and (min-width:480px) {
#viewport #banniere #banniere_items { width:47%; }
}
@media screen and (max-width:480px) {
#viewport #banniere #banniere_items { width:47%; }
}*/










/*


	CHECKED


*/
#banniere_system:checked ~ .banniere_titre { top:40% !important; margin-top:-100px !important; color:#009900 !important; font-size:2em !important; opacity:1; z-index:10; }

#banniere_system:not(:checked) ~ .banniere_titre { top:0% !important; margin-top:0px !important; font-size:1.8em !important; opacity:0; }





#banniere_system_1:not(:checked) ~ #banniere_items .items:nth-child(1) .ico { border:2px solid rgba(255,255,255,.9); }

#banniere_system_1:checked ~ #banniere_items .items:nth-child(1) .ico { border:3px solid #33CC33; margin:10px !important; }

#banniere_system_2:not(:checked) ~ #banniere_items .items:nth-child(2) .ico { border:2px solid rgba(255,255,255,.9); }

#banniere_system_2:checked ~ #banniere_items .items:nth-child(2) .ico { border:3px solid #33CC33; margin:10px !important; }

#banniere_system_3:not(:checked) ~ #banniere_items .items:nth-child(3) .ico { border:2px solid rgba(255,255,255,.9); }

#banniere_system_3:checked ~ #banniere_items .items:nth-child(3) .ico { border:3px solid #33CC33; margin:10px !important; }

#banniere_system_4:not(:checked) ~ #banniere_items .items:nth-child(6) .ico { border:2px solid rgba(255,255,255,.9); }

#banniere_system_4:checked ~ #banniere_items .items:nth-child(6) .ico { border:3px solid #33CC33; margin:10px !important; }

#banniere_system_5:not(:checked) ~ #banniere_items .items:nth-child(4) .ico { border:2px solid rgba(255,255,255,.9); }

#banniere_system_5:checked ~ #banniere_items .items:nth-child(4) .ico { border:3px solid #33CC33; margin:10px !important; }

#banniere_system_6:not(:checked) ~ #banniere_items .items:nth-child(5) .ico { border:2px solid rgba(255,255,255,.9); }

#banniere_system_6:checked ~ #banniere_items .items:nth-child(5) .ico { border:3px solid #33CC33; margin:10px !important; }




#banniere_system:checked ~ #banniere_infos .content_info { display:block; }


#banniere_system_1:not(:checked) ~ #banniere_infos .content_info:nth-child(1) { display:none; }

#banniere_system_1:checked ~ #banniere_infos .content_info:nth-child(1) { display:block; }

#banniere_system_2:not(:checked) ~ #banniere_infos .content_info:nth-child(2) { display:none; }

#banniere_system_2:checked ~ #banniere_infos .content_info:nth-child(2) { display:block; }

#banniere_system_3:not(:checked) ~ #banniere_infos .content_info:nth-child(3) { display:none; }

#banniere_system_3:checked ~ #banniere_infos .content_info:nth-child(3) { display:block; }

#banniere_system_4:not(:checked) ~ #banniere_infos .content_info:nth-child(4) { display:none; }

#banniere_system_4:checked ~ #banniere_infos .content_info:nth-child(4) { display:block; }

#banniere_system_5:not(:checked) ~ #banniere_infos .content_info:nth-child(5) { display:none; }

#banniere_system_5:checked ~ #banniere_infos .content_info:nth-child(5) { display:block; }

#banniere_system_6:not(:checked) ~ #banniere_infos .content_info:nth-child(6) { display:none; }

#banniere_system_6:checked ~ #banniere_infos .content_info:nth-child(6) { display:block; }