/*------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------css specifique pour creer un menu responsive-------------------------------------------*/
/*---------------------------------------inspire de l'excellent site http://www.grafikart.fr/-----------------------------------*/
/*---------------------------------------merci a eux----------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------*/
html,body{
	height:100%;
	margin:0;
	padding:0;
	background-color:#222;
	background-image:url(img/site_fond_001.jpg);
	background-position:center top;
	background-attachment:fixed;
	background-repeat:no-repeat;
	}
.header{
	background-image:url(img/site_fond_001.jpg);
	background-position:center top;
	background-attachment:fixed;
	background-repeat:no-repeat;
	}	
.contenu{
	max-width:1140px;
	margin:auto;
	overflow:hidden;
	*zoom:1;
	background-image:url(img/background-contenu.png);
	}
.site-contenu{
	padding-top:160px;
	}
.marge{
	padding:10px;
	padding-top:50px;
	padding-bottom:40px;
	}
@media screen and (max-width: 950px) {
	.marge{
		padding-top:10px;
		}
}
/*--------------------------------------------------ACCUEIL-----------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------*/
.img_news{
	border:solid #666 1px;
	margin:5px 20px 20px 0px;
	float:left;
	}
iframe{
	border:solid 1px #666;
	}	
.spacer{
	clear:both;
	}
.voir, .masquer{
	color:#bb0000;
	font-size:1.2em;
	}
.lien_fin_news{
	margin:0px 0px 0px 50px;
	}
.gris{
	color:#666;
	}
.textevent{
	padding-left:282px;
	}
.textevent p, .projetgal p{
	font-size:1.2em;
	}
h3{
	margin-bottom:0px;
	font-weight:normal;
	}
.pieddepage{
	text-align:center;
	opacity:0.7;
	}
.pieddepage a{
	color:#dd855d;
	}
.nopage{
	font-weight:bold;
	font-size:1.2em;
	}
.nobasdepage{
	text-align:center;
	font-size:1.4em;
	}
/*------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------GALERIE MENU--------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------*/
.col_photo{
	width:33.3333%;
	float:left;
	padding:0px 2px 0px 2px ;
	margin-top:6px;
	}	
.conteneur-test {
}
.bloc{
	margin-bottom:4px;
	}
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.conteneur-test:before,
.conteneur-test:after {
    content: " ";
    display: table;
}
.conteneur-test:after {
    clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
.conteneur-test {
    *zoom: 1;
}
 */
.conteneur-test li {
	display: block;
	position: relative;
	cursor: pointer;
}
.conteneur-test li img {
	height:auto;
	display: block;
	border:solid 1px #666;
}
.projetgal {
	clear:both;
	margin-top:10px;
	margin-left:10px;
	}
.gal-sans-marge{
	margin:0;
	}
.menu-image {
	background: #fff;
	background: rgba(255, 255, 255, 0.6);
	position: absolute;
	top: 20px;
	left: 20px;
	bottom: 20px;
	right: 20px;
	text-align: center;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: opacity 0.4s ease-in-out;
	-moz-transition: opacity 0.4s ease-in-out;
	-ms-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
}
.no-touch .conteneur-test li:hover .menu-image {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	filter: alpha(opacity=80);
	opacity: 1;
}
.menu-image:before {
	content: '';
	height: 50%;
}
.menu-image:before,
.menu-image h3 {
	display: inline-block;
	vertical-align: middle;
}
.menu-image h3 {
	width: 100%;
	padding: 0 20px;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: 2px;
}
.menu-image-wrapper {
	background: rgba(0,0,0,0.7);
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
	padding: 5px 0;
}
/* Make some things unselectable. Remove where selection is needed: */
.gamma-container img,
.menu-image-wrapper,
.menu-image,
.menu-image h3 {
	color:#000;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
@media screen and (max-width: 750px) {
	.menu-image {
		top: 10px;
		left: 10px;
		bottom: 10px;
		right: 10px;
	}
	.menu-image h3 {
		font-size: 14px;
		padding: 0 5px;
	}
}
	
@media only screen and (max-width: 480px){/*smartphone*/
	/*--------------------------------------------------ACCUEIL-----------------------------------------------------*/
	/*--------------------------------------------------------------------------------------------------------------*/
	.textevent{
		clear:both;
		padding:0px;
		}
	hr{
		height:1px;
		color:#666;
		background-color:#666;
		}
}
/*------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------affichage logo------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 767px){/*mini ecran*/
	#logo_big{
		display:none;
		}
	#logo_medium{
		display:none;
		}
}
@media only screen and (min-width: 768px) and (max-width: 1024px){/*moyen ecran*/
	#logo_big{
		display:none;
		}
	#logo_small{
		display:none;
		}
}
@media only screen and (min-width: 1025px){/*grand ecran*/
	#logo_medium{
		display:none;
		}
	#logo_small{
		display:none;
		}
}