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

/****************************************************************** bg vontenu */
#contenu{
	background-image:url(../images/bg-sceno.jpg)
}

/****************************************************************** mentions */

#mentions{
	margin-left:200px;
	width:700px;
	height:400px;
	overflow:auto;
	background-image:url(../images/bg-mentions.png);
	padding:0 10px;
}

/******************************************************************  H1 titre vert mentions légales */

h1.sceno-titre{
	margin:0 0 25px 0;
	padding-top:25px;
	color:#89b29f;
	text-align:center;
	font-weight:700;
	font-size:15px;
}
#mentions h2{
	color:#90B7DC;
	text-align:left;
	font-weight:700;
	font-size:13px;
	margin-top:10px;
	margin-bottom:1px;
}
#mentions p{
	color:#fff;
	text-align:left;
	font-weight:400;
	font-size:10px;
}

p.saut-bas:first-letter
{
	font-weight: bold;
	font-size: 120%;
	color: #90B7DC;
}
#mentions .saut-bas{
	margin-bottom:10px;
}


#mentions a{
	color:#999;
	text-decoration:none;
}
#mentions a:hover{
	color:#CCC;
	text-decoration:none;
}
/****************************************************************** boutons accueil */

.boutonAccueil img.inactif, .boutonAccueil:hover img.inactif, .boutonAccueil img.actif, .boutonAccueil:hover img.actif {
  position:absolute;
  width:65px;
  height:58px;
  transition: opacity 0.3s ease;
  top: 228px;
  left:94px;
}
.boutonAccueil img.inactif {
  opacity:1;
}
.boutonAccueil:hover img.inactif {
  opacity:0;
}
.boutonAccueil img.actif {
  opacity:0;
}
.boutonAccueil:hover img.actif {
  opacity:1;
}

/******************************************************************  flèche retour */


.flecheRetour img.inactif, .flecheRetour:hover img.inactif, .flecheRetour img.actif, .flecheRetour:hover img.actif {
  position:absolute;
  width:65px;
  height:58px;
  transition: opacity 0.3s ease;
  top: 288px;
  left:94px;
}
.flecheRetour img.inactif {
  opacity:1;
}
.flecheRetour:hover img.inactif {
  opacity:0;
}
.flecheRetour img.actif {
  opacity:0;
}
.flecheRetour:hover img.actif {
  opacity:1;
}


/****************************************************************** box */
#box{
	width:508px;
	height:250px;
	position:absolute;
	top:175px;
	left:228px;
}
#box img{
	display:block;
	float:left;
	margin-right:4px;
	margin-bottom:4px;
}

/****************************************************************** carrés */
.carre1{
	width:123px;
	height:123px;
	float:left;
	margin-right:4px;
	margin-bottom:4px;
}
.carre{
	width:123px;
	height:123px;
	float:left;
	margin-right:4px;
	margin-bottom:4px;
	position:relative;
}
.carre img.carre-blanc{
  opacity:1;
  transition: opacity 0.5s ease;
  position:absolute;
}
.carre:hover img.carre-blanc{
  opacity:0;
}
.carre img.carre-over{
  opacity:0;
  transition: opacity 0.5s ease;
  position:absolute;
}
.carre:hover img.carre-over{
  opacity:1;
}

span.texte{
	position:absolute;
	z-index:100;
}

.carre p{
	width:123px;
	margin-top:20px;
	font-size:10px;
	color:#8d8078;
	text-align:center;
	letter-spacing:0;

}
.carre h3{
	width:123px;
	margin-top:15px;
	margin-bottom:15px;
	font-size:14px;
	color:#000;
	text-align:center;
	letter-spacing:0;
}