/* Votre Style */
html,body{
	height:100%;
	margin:0;
	padding:0;
	background-image:url(images/background-body-grand.jpg);
	background-position:center top;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-color:#8a8792;
	color:#CCC;
	}
@media only screen and (max-width: 1930px){
	html,body{
		background-image:url(images/background-body.jpg);
		}
	}
@media only screen and (max-width: 1030px){
	html,body{
		background-image:url(images/background-body-moyen.jpg);
		}
	}
@media only screen and (max-width: 510px){
	html,body{
		background-image:url(images/background-body-petit.jpg);
		}
	}
#page{
	max-width:1300px;
	margin:auto;
	}
	
	ref font{
	font-family: "bebas-neue",sans-serif;
	font-style: normal;
	font-weight: 400;
	}

#contenu{
	width:78%;
	margin-bottom:15px;
	margin:auto;
	overflow:hidden;
	*zoom:1;
	/*background-image:url(images/background-contenu.png);*/
	}
@media only screen and (max-width: 1000px){
	#contenu{
		width:100%;
		padding:0px 15px;
		}
	}
.marge{
	padding:0px 10px;
	}
#logo{
	position:absolute;
	left:0px;
	top:118px;
	width:11%;
	z-index:100;
	padding:0px 15px;
	}
#resp_logo{
	width:70px;
	height:70px;
	}

@media only screen and (max-width: 1000px){
	#logo{
		display:none;
		}
	}

a, a:visited{
	color:#FFF;
	text-decoration:none;
	}
a:hover{
	color:#B10002;
	}
/*--------------------------------------------------------------------------------------------------------
------------------------------------------------ pied de page -------------------------------------------
--------------------------------------------------------------------------------------------------------*/
#footer{
	max-width:1300px;
	margin:auto;
	}
#pieddepage{
	width:78%;
	height:102px;
	margin:auto;
	margin-top:15px;
	background-color:#131514;
	}
.divfooter{
	float:left;
	padding:15px 8px;
	margin-right:2%;
	}
.divfooter p{
	line-height:1.3;
	}
.divfooter p a{
	color:#fff;
	}
.divfooter p a:hover{
	color:#B10002;
	}
.pieddepage{
	text-align:center;
	opacity:0.7;
	color:#131514;
	}
.pieddepage a{
	color:#131514;
	}
.pieddepage a:hover{
	color:#B10002;
	}
.lien_vignette{
	margin:30px 6px;
	}
#vignettes{
	margin:0px;
	width:20%;
	height:102px;
	padding:0px;
	}
@media only screen and (max-width: 1390px){
	.divfooter{
		margin-right:1%;
		}
	}
@media only screen and (max-width: 1237px){
	#vignettes{
		float:right;
		width:84px;
		}
	.lien_vignette{
		width:20px;
		height:20px;
		margin:14px 10px;
		}
	}
@media only screen and (max-width: 1025px){
	.divfooter{
		margin-right:5px;
		}
	}
@media only screen and (max-width: 1000px){
	#pieddepage{
		width:96.5%;
		height:102px;
		margin:auto;
		margin-top:15px;
		background-color:#131514;
		}
	.divfooter{
		float:left;
		padding:15px 2px;
		margin-right:15px;
		}
	}
@media only screen and (max-width: 822px){
	#pieddepage{
		width:96%;
		height:204px;
		}
	.divfooter{
		width:50%;
		float:left;
		padding:15px;
		padding-left:20px;
		margin:0px;
		}
	#vignettes{
		width:50%;
		float:left;
		}
	.lien_vignette{
		width:auto;
		margin:25px;;
		}
	}
@media only screen and (max-width: 627px){
	#pieddepage{
		width:92%;
		height:auto;
		}
	.divfooter{
		width:100%;
		float:none;
		padding:15px 20px 0px 15px;
		}
	#vignettes{
		width:100%;
		float:none;
		}
	.lien_vignette{
		width:auto;
		margin:25px;;
		}
	}
	
/*--------------------------------------------------------------------------------------------------------
------------------------------------------------ a l'affiche -------------------------------------------
------------------------------------------------ spectacles -------------------------------------------
--------------------------------------------------------------------------------------------------------*/
.noir{
	background-image:url(images/background-li.png);
	}
.affichecent, .affichecentgrand{
	position:relative;
	width:100%;
	border:solid 2px #181310;
	margin-top:15px;
	}
.affichecent img{
	}
.affichecent p, .affichecentgrand p{
	margin:0;
	font-family: "bebas-neue",sans-serif;
	color:#ccc;
	font-weight:normal;
	text-transform:uppercase;
	position:absolute;
	font-size:36px;
	line-height:1.1em;
	}
.affichevingt{
	position:relative;
	float:right;
	width:33.5%;
	margin-top:15px;
	border:solid 2px #131514;
	}
.affichevingt p{
	font-family: "bebas-neue",sans-serif;
	color:#ccc;
	font-weight:normal;
	text-transform:uppercase;
	font-size:36px;;
	position:absolute;
	margin:0px;
	}
.affichevingtsmart{
	display:none;
	}
@media only screen and (max-width: 750px){/*mini ecran*/
	.affichevingt{
		float:left;
		width:48.5%;
		}
	#vignettephoto{
		float:right;
		}
	}
@media only screen and (max-width: 450px){/*mini ecran*/
	.affichevingt{
		display:none;
		}
	.affichevingtsmart{
		display:block;
		float:left;
		width:48.5%;
		margin-top:15px;
		border:solid 2px #131514;
		}
	#vignettephotosmart{
		float:right;
		}
	}
.cachee{
	display:none;
	}
/*- les styles suivants sont pour le positionnement du texte dans les images des affiches et bannières -*/
.hg{
	top:6%;
	left:15px;
	text-align:left;
	}
.hd{
	top:6%;
	right:15px;
	text-align:right;
	}
.bg{
	bottom:6%;
	left:15px;
	text-align:left;
	}
.bd{
	bottom:6%;
	right:15px;
	text-align:right;
	}
/*- les styles suivants sont pour le positionnement du texte dans les images des photos et videos -*/
.photohg{
	top:3%;
	left:3%;
	text-align:left;
	}
.photohd{
	top:3%;
	right:3%;
	text-align:right;
	}
.photobg{
	bottom:3%;
	left:3%;
	text-align:left;
	}
.photobd{
	bottom:3%;
	right:3%;
	text-align:right;
	}
@media only screen and (max-width: 700px){
	.affichecent p, .affichecentgrand p{
		font-size:5vw;
		}
	}
#texte23{
	width:64.9%;
	background-color:#131514;
	padding:20px;
	padding-right:25px;
	float:left;
	margin-top:15px;
	}
#texte23 p{
	font-size:18px;
	}
#texte23 h2{
	font-family: "bebas-neue",sans-serif;
	color:#ccc;
	font-weight:normal;
	text-transform:uppercase;
	font-size:36px;
	margin:0px;
	}
#texte23 br{
	content: "";
	margin: 2em;
	display: block;
	font-size: 24%;
  }
.generique{
	background-color:#131514;
	padding-left:17px;
	padding-right:17px;
	margin-top:15px;
	height:auto;
	}
.generique h2, .generiquedemig h2, .generiquedemid h2{
	font-family: "bebas-neue",sans-serif;
	color:#ccc;
	font-weight:normal;
	text-transform:uppercase;
	font-size:36px;;
	margin:0px;
	line-height:auto;
	}
@media only screen and (max-width: 400px){/*mini ecran*/
	.generique h2, .generiquedemig h2, .generiquedemid h2{
		font-size:28px;;
		}
	}
.generiquedemid h2{
	text-align:right;
	}
a.voir, a.voir2, a.voirs{
	text-decoration:none;
	}
a:hover div h2{
	color:#B10002;
	}
a.masquer:hover{
	color:#B10002;
	text-decoration:none;
	}
.suite, .suiteopen{
	background-color:#131514;
	padding:20px;
	margin-bottom:15px;
	}
.suites{
	background-color:#131514;
	padding:20px;
	margin-bottom:0px;
	}
.suite p, .suites p, .suiteopen p{
	font-size:18px;
	}
#dernieresuite{
	margin-bottom:0px;
	}
.generiquedemig, .generiquedemid{
	background-color:#131514;
	padding-left:15px;
	padding-right:15px;
	margin-top:15px;
	width:50%;
	float:left;
	display:block;
	overflow:hidden;
	}
.suiteopen iframe{
	width:100%;
	height:500px;
	}
@media only screen and (max-width: 1300px){
	#texte23 p, .suite p, .suites p{
		font-size:16px;
		}
	}
@media only screen and (max-width: 850px){
	#texte23 p, .suite p, .suites p{
		font-size:14px;
		}
	}
@media only screen and (max-width: 750px){
	#texte23{
		width:100%;
		float:none;
		}
	#texte23 p, .suite p, .suites p{
		font-size:16px;
		}
	.smart{
		display:none;
		}
	}