@font-face {
    font-family: 'geosanslightregular';
    src: url('../fonts/geosanslight-webfont.eot');
    src: url('../fonts/geosanslight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/geosanslight-webfont.woff2') format('woff2'),
         url('../fonts/geosanslight-webfont.woff') format('woff'),
         url('../fonts/geosanslight-webfont.ttf') format('truetype'),
         url('../fonts/geosanslight-webfont.svg#geosanslightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'sansation_lightregular';
    src: url('../fonts/sansation_light-webfont.eot');
    src: url('../fonts/sansation_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sansation_light-webfont.woff2') format('woff2'),
         url('../fonts/sansation_light-webfont.woff') format('woff'),
         url('../fonts/sansation_light-webfont.ttf') format('truetype'),
         url('../fonts/sansation_light-webfont.svg#sansation_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'times_sans_serifregular';
    src: url('../fonts/timess__-webfont.eot');
    src: url('../fonts/timess__-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/timess__-webfont.woff2') format('woff2'),
         url('../fonts/timess__-webfont.woff') format('woff'),
         url('../fonts/timess__-webfont.ttf') format('truetype'),
         url('../fonts/timess__-webfont.svg#times_sans_serifregular') format('svg');
    font-weight: normal;
    font-style: normal;
}





html, body {
  margin: 0px;
  padding: 0px;
  background-color: #454545;
  font-family: arial, "sans serif";
}   

/*
#banniere-titre-g {
  float: left;
  height: 100px;
  width: 15%;
  padding: 0px 0px 0px 0px;
  background: silver;
}
*/

#banniere-titre {
  /*border: 1px solid green;*/
  /* width: 800px; */
  float: left;
  height: 100px;
  width: 100%;
  /* margin: 0px auto 0px auto; */
  padding: 0px 0px 0px 0px;
  background: silver url("../img/land-of-genesis-noir.png") no-repeat center center;
}
/*
#banniere-titre-d {
  float: left;
  height: 100px;
  width: 15%;
  padding: 0px 0px 0px 0px;
  background: silver;
}
*/

#banniere {
  /*border: 1px solid red;*/
  height: 130px;
  width: 100%;
  /* background: silver url("../img/texture-gris-clair.jpg") top left repeat; */
  background-color: Silver;
  margin: 0px auto 0px auto;
}

#banniere-sous-titre {
  /*border: 2px solid yellow;*/
  margin: 0px auto 0px auto;
  padding-top: 15px;
  text-align: center;
  font-size: 24px;
  letter-spacing: 3px;
  font-family: "geosanslightregular";
}


/* ******************************** MENU HAUT *************************************** */

#menu-haut-centre {
	width: 735px;     /* largeur du menu */	/* largeur de chaque bouton X nombre deboutons */
	height: 35px;   /* hauteur du menu */
  /* border: 1px solid blue; */
  margin: 25px auto 0px auto;
  padding: 0px;
  z-index: 99;
}
#menu-haut-centre ul {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
#menu-haut-centre ul li {
  /* border: 1px solid black; */
	float: left;
	list-style: none;
	margin: 0px 5px 0px 5px;
	padding: 0px 0px 0px 0px;
}
#menu-haut-centre ul li a {
  /* border: 1px solid blue; */
	display: block;
  width: 95px;
	height: 35px;
	line-height: 33px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	text-decoration: none;
	font-weight: normal;
	font-size: 15px;
	text-align: center;
	font-family: "times_sans_serifregular";
  letter-spacing: 2px;
	font-variant: small-caps;
  font-weight: bold;
  color: #111111;
  background: url("../img/bouton-menu-trait.png") no-repeat top left;
  background-position: -95px 0px;
}
#menu-haut-centre ul li a:hover {
  color: #df3b91;
	background-position: 0px 0px;
  transition: background-position 0.1s linear;   
}
#accueil .accueil a {
	background-position: 0px 0px;
  color: #df3b91;
}
#groupe .groupe a {
	background-position: 0px 0px;
  color: #df3b91;
}
#nouvelles .nouvelles a {
	background-position: 0px 0px;
  color: #df3b91;
}
#multimedia .multimedia a {
	background-position: 0px 0px;
  color: #df3b91;
}
#esppro .esppro a {
	background-position: 0px 0px;
  color: #df3b91;
}
#boutique .boutique a {
	background-position: 0px 0px;
  color: #df3b91;
}
#contact .contact a {
	background-position: 0px 0px;
  color: #df3b91;
}



/* ******************************** SEPARATEUR HAUT *************************************** */
#separateur-haut {
  /* border: 1px solid yellow; */
  height: 6px;
  background: gray url("../img/lignebleue-1px.gif") repeat-x;
}

/* ******************************** NEWS DEFILANT *************************************** */
#newsdefilant {
  background:#0f0f0f;
  color:#ffffff;
  font-family: 'sansation_lightregular', 'geosanslightregular', Verdana;
  font-size:22px;
  border-style:solid;
  border:1px solid #888;
  border-radius:5px;
  width:700px;
  height:30px;
  padding: 7px 3px 3px 3px;
  margin: 15px auto 20px auto;
}
marquee {
  color: #df3b91;
  text-align: center;
  /*line-height: 60px*/
}


/* ******************************** MENU RESEAUX SOCIAUX HAUT *************************************** */
#menu-reseaux-sociaux {
  /* border: 1px solid yellow; */
  width: 210px;     /* largeur du menu */	/* largeur de chaque bouton X nombre deboutons */
	height: 60px;   /* hauteur du menu */
  margin: 30px auto 30px auto;
  padding: 0px;
  z-index: 99;
}
#menu-reseaux-sociaux ul {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
#menu-reseaux-sociaux ul li {
  /* border: 1px solid black; */
	float: left;
	list-style: none;
	margin: 0px 5px 0px 5px;
	padding: 0px 0px 0px 0px;
}
#menu-reseaux-sociaux ul li a {
  /* border: 1px solid blue; */
	display: block;
  width: 60px;
	height: 60px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	text-decoration: none;
  background: no-repeat top left;
  
}

#menu-reseaux-sociaux ul li a.img1 {
  background-image: url("../img/res-facebook.png");
  background-position: 0px 0px;
}
#menu-reseaux-sociaux ul li a.img1:hover {
	background-position: -60px 0px;
}
#menu-reseaux-sociaux ul li a.img2 {
  background-image: url("../img/res-youtube.png");
  background-position: 0px 0px;
}
#menu-reseaux-sociaux ul li a.img2:hover {
	background-position: -60px 0px;
}
#menu-reseaux-sociaux ul li a.img3 {
  background-image: url("../img/res-soundcloud.png");
  background-position: 0px 0px;
}
#menu-reseaux-sociaux ul li a.img3:hover {
	background-position: -60px 0px;
}

/* ******************************** CONTENU *************************************** */
#contenu {
  /* border: 1px solid silver; */
  width: 1000px;
  background-color: #454545;
  margin: 0px auto 0px auto;
  padding: 0px 0px 50px 0px;
  color: #f0f0f0;
  font-size: 19px;
  letter-spacing: 1.5px;
}
#contenu p, img {
  margin: 0px;
  padding: 0px;
  margin-bottom: 10px;
}
#titre {
  border-bottom: 2px solid #f0f0f0;
}
#titre h2 {
  /* color: #df3b91; */
  /* font-variant: small-caps; */
  letter-spacing: 2px;
  margin: 0px;
  padding: 0px;
  font-size: 30px;
  font-family: "sansation_lightregular";
  /* text-decoration: underline; */
}

/* ******************************** CONTENU GAUCHE ACCUEIL*************************************** */

#contenu #contenu-gauche {
  /* border: 1px solid red; */
  float: left;
  width: 55%;
  /* color: #f0f0f0; */
  margin: 0px 15px 0px 5px;
}
#contenu #contenu-gauche .affiche-log {
  /* display: block; 
  margin: 20px auto 0px auto; */
  margin: 0px 0px 0px 0px;
}

/* ******************************** CONTENU DROIT ACCUEIL*************************************** */

#contenu #contenu-droit {
  /* border: 1px solid blue; */
  overflow: auto; 
  margin: 0px 5px 0px 0px; 
}
#contenu #contenu-droit .v1 {
  margin-top: 25px;
}
#contenu #contenu-droit .v2 {
  border: 1px solid #fafafa;
  -moz-box-shadow: 2px 2px 5px #FAFAFA; 
  -webkit-box-shadow: 2px 2px 5px #FAFAFA; 
  box-shadow: 2px 2px 5px #FAFAFA;
}

/* ******************************** CONTENU GROUPE ET AUTRES *************************************** */

#divis-groupe-gauche-1 {
  border: 1px solid #fafafa;

  -moz-box-shadow: 2px 2px 5px #FAFAFA; 
  -webkit-box-shadow: 2px 2px 5px #FAFAFA; 
  box-shadow: 2px 2px 5px #FAFAFA;
  float: left;
  width: 330px;
  height: 352px;
  background: silver top left no-repeat;
}
#divis-groupe-droit-1 {
  /* border: 1px solid #fafafa; */
  float: left;
  width: 550px;
  height: 352px;
  margin: 0px 0px 50px 30px;
}

#divis-groupe-gauche-2 {
  border: 1px solid #fafafa;
  -moz-box-shadow: 2px 2px 5px #FAFAFA; 
  -webkit-box-shadow: 2px 2px 5px #FAFAFA; 
  box-shadow: 2px 2px 5px #FAFAFA;
  float: right;
  width: 500px;
  height: 330px;
  background: silver top left no-repeat; */
}
#divis-groupe-droit-2 {
  /* border: 1px solid #fafafa; */
  float: right;
  width: 465px;
  height: 330px;
  margin: 0px 30px 50px 0px;
}

#divis-groupe-gauche-3 {
  border: 1px solid #fafafa;
  -moz-box-shadow: 2px 2px 5px #FAFAFA; 
  -webkit-box-shadow: 2px 2px 5px #FAFAFA; 
  box-shadow: 2px 2px 5px #FAFAFA;
  float: left;
  width: 500px;
  height: 330px;
  background: silver top left no-repeat;
}
#divis-groupe-droit-3 {
  /* border: 1px solid #fafafa; */
  float: left;
  width: 465px;
  height: 330px;
  margin: 0px 0px 50px 30px;
}

#divis-groupe-gauche-4 {
  border: 1px solid #fafafa;
  -moz-box-shadow: 2px 2px 5px #FAFAFA; 
  -webkit-box-shadow: 2px 2px 5px #FAFAFA; 
  box-shadow: 2px 2px 5px #FAFAFA;
  float: right;
  width: 500px;
  height: 330px;
  background: silver top left no-repeat; */
}
#divis-groupe-droit-4 {
  /* border: 1px solid #fafafa; */
  float: right;
  width: 465px;
  height: 330px;
  margin: 0px 30px 50px 0px;
}

#divis-groupe-gauche-5 {
  border: 1px solid #fafafa;
  -moz-box-shadow: 2px 2px 5px #FAFAFA; 
  -webkit-box-shadow: 2px 2px 5px #FAFAFA; 
  box-shadow: 2px 2px 5px #FAFAFA;
  float: left;
  width: 500px;
  height: 330px;
  background: silver top left no-repeat;
}
#divis-groupe-droit-5 {
  /* border: 1px solid #fafafa; */
  float: left;
  width: 465px;
  height: 330px;
  margin: 0px 0px 0px 30px;
}


#divis-groupe-gauche-1 {
  background-image: url("../img/page-groupe/chanteur3rec.jpg");
  margin-bottom: 50px;
}
#divis-groupe-gauche-2 {
  background-image: url("../img/page-groupe/guitaristerec.jpg");
  margin-bottom: 50px;
}
#divis-groupe-gauche-3 {
  background-image: url("../img/page-groupe/batteur7rec.jpg");
  margin-bottom: 50px;
}
#divis-groupe-gauche-4 {
  background-image: url("../img/page-groupe/JeromeDamienClaviersrec.jpg");
  margin-bottom: 50px;
}
#divis-groupe-gauche-5 {
  background-image: url("../img/page-groupe/SalimBekraouisGuitareetBasserec.jpg");
  margin-bottom: 0px;
}

.DepassBas {padding-bottom: 250px;}

#esppro-telecharge a {
  /* outline: 1px solid yellow; */
  background: silver url("../img/degrade-bouton-bleu.jpg") top left repeat-x;
  padding: 0px 15px 0px 15px;
  margin: 0px 30px 0px 0px;
  border-radius: 5px;
  float: left;
  font-size: 15px;
  height: 27px;
  line-height: 25px;
  color: #4a4a4a;
  text-decoration: none;
  
}
#esppro-telecharge a:hover {
  background: gray url("../img/degrade-bouton-bleu-inv.jpg") top left;
  color: #111111;
  transition: color 0.2s ease;
}


#zoom a {
  /* color: #fafafa; */
  display: inline-block;
  /* border: 1px solid red; */
  float: left;
  margin: 0px 20px 0px 0px;
  padding: 0px;
  /* text-decoration: none; */
  /* padding: 0px 3px 0px 3px; */
  /* background: transparent url("../img/loupe24.png") no-repeat left top; */
  /* text-indent: 30px;
  height: 30px;
  line-height: 24px; */
}
#zoom a img {
  margin: 0px;
  padding: 0px;
}
#zoom a:hover img {
  /* color: #df3b91; */
  outline: 1px solid #fafafa;
}
#zoom a div {
  /* border: 1px solid red; */
  /* background: url("../img/tee-shirt.jpg") no-repeat; */
  /*width: 10%;
  height: 20%;
  background-size: cover; */
  position: absolute;
  margin: -10% 0px 0px 80px;
  padding: 0px;
  display: none;
}
#zoom a:hover div {
  display: inline;
}


/* ******************************** SEPARATEUR BAS *************************************** */
#separateur-bas {
  /* border: 1px solid yellow; */
  height: 6px;
  background: gray url("../img/lignebleue-1px.gif") repeat-x;
  margin: 10px 0px 0px 0px;
  padding: 0px;
}

/* ************************************ FOOTER ***************************** */
#footer-general {
  height: 220px;
  /* background: silver url("../img/texture-gris-clair.jpg") top left repeat; */
  background-color: Silver;
  font-size: 14px;
  margin: 0px 0px 0px 0px;
}
#footer {
  /* border: 1px solid red; */
  height: 220px;
  width: 1000px;
  /* background: silver url("../img/texture-gris-clair.jpg") top left repeat; */
  background-color: Silver;
  margin: 0px auto 0px auto;
}

#footer-info-0 {
  float: left;
  width: 15%;
  height: 100px;
  margin: 8px 0px 0px 0px;
  border-right: 1px solid black;
}
#footer-info-1 {
  /* border: 1px solid purple; */
  float: left;
  width: 20%;
  height: 100px;
  margin: 8px 0px 0px 30px;
  border-right: 1px solid black;
  
}
#footer-info-2 {
  /* border: 1px solid black; */
  float: left;
  width: 35%;
  height: 100px;
  margin: 8px 0px 0px 30px;
  border-right: 1px solid black;
}
#footer-info-3 {
  /* border: 1px solid blue; */
  float: left;
  height: 100px;
  margin: 8px 0px 0px 30px;
}

/* ******************************** MENU RESEAUX SOCIAUX BAS *************************************** */
#menu-reseaux-sociaux-footer {
  /* border: 1px solid yellow;
  width: 111px;     /* largeur du menu */	/* largeur de chaque bouton X nombre deboutons */
	height: 35px;   /* hauteur du menu */
  margin: 15px 0px 10px 0px;
  padding: 0px;
  z-index: 99;
}
#menu-reseaux-sociaux-footer ul {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
#menu-reseaux-sociaux-footer ul li {
  /* border: 1px solid black; */
	float: left;
	list-style: none;
	margin: 0px 1px 0px 1px;
	padding: 0px 0px 0px 0px;
}
#menu-reseaux-sociaux-footer ul li a {
  /* border: 1px solid blue; */
	display: block;
  width: 35px;
	height: 35px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	text-decoration: none;
  background: no-repeat top left;
}

#menu-reseaux-sociaux-footer ul li a.img4 {
  background-image: url("../img/res-facebook-footer.png");
  background-position: 0px 0px;
}
#menu-reseaux-sociaux-footer ul li a.img4:hover {
	background-position: -35px 0px;
}
#menu-reseaux-sociaux-footer ul li a.img5 {
  background-image: url("../img/res-youtube-footer.png");
  background-position: 0px 0px;
}
#menu-reseaux-sociaux-footer ul li a.img5:hover {
	background-position: -35px 0px;
}
#menu-reseaux-sociaux-footer ul li a.img6 {
  background-image: url("../img/res-soundcloud-footer.png");
  background-position: 0px 0px;
}
#menu-reseaux-sociaux-footer ul li a.img6:hover {
	background-position: -35px 0px;
}


/* ****************************** FORMULAIRE DE CONTACT ******************************* */

#formulaire-contact {
/* outline: 1px solid red; */
/* background: silver  url("img/background.jpg") repeat left top; */
padding: 10px 0px 10px 0px;
width : 100%;
}
form {
 background-color: #d0d0d0;
 /* background: black url("img/texture-papier.jpg") repeat left top; */
 /* width: 990px; */
 width: 97.5%;
 padding: 15px 5px 20px 20px;
 margin-top: 5px;
 color: #111111;
 font-size: 17px;
 }
fieldset {
 padding: 2px 10px 10px 10px;
 margin-bottom:10px;
 margin-left: 2px;
 /* border: 1px solid #6c593d; */
 /* background: green  url("img/background.jpg") repeat left top; */
 /* width :600px; */
 width: 100%;
 }
legend {
 /* font-weight:bold; */
 color: #fafafa;
 }
label {
 margin-top:25px;
 margin-left: 5px;
 display:inline-block;
 }
input, textarea {
 background-color:#fafafa;
 border: 1px solid grey;
 padding:3px;
 border-radius:5px;
 color: #df3b91;
 }
input:focus, textarea:focus {
 background-color:grey;
 color: #fafafa;
 }

input[type=submit], input[type=reset] {
   /* background-color:F5E5BC; */
   background: url("../img/bouton-formulaire.png") no-repeat left top; 
   width: 100px;
   border: none;
   margin-left: 40px;
   margin-top: 20px;
   padding-top: 0px;
   color: White;

}
.rouge {
   color:red;
   font-weight: bold;
}
#formulaire-contact  p {
margin: 15px 0px 0px 0px;
padding: 0px;
letter-spacing: 0px;
}

/* ******************************DIVERS******************************* */

#clear {
clear: both;
height:1px;      /* pour IE empeche de creer un decalage vers le bas au survol de la souris   */
margin: 0;
padding: 0;
}


a {
  color: #277ef1 ;
  text-decoration: none;
}
a:visited {
  color: #277ef1;
  text-decoration: none;
}
a:hover {
  color: #df3b91;
  text-decoration: underline;
}

.gras {
  font-weight: bold;
}
.italique {
  font-style: italic;
}

.justifier {
  text-align: justify;
}

.centrer {
  text-align: center;
}

.souligner {
  text-decoration: underline;
}

.taille1 {
  font-size: 14px;
}
.taille2 {
  font-size: 11px;
}
.taille3 {
  font-size: 22px;
}
.couleur-fushia {
  color: #df3b91;
}
.couleur-bleue {
  color: #768DB7;
}

.haut-ligne-1 {
  line-height: 26px;
}

.lettrine {
  font-family: 'geosanslightregular', Arial, Helvetica, Sans-Serif; 
  float: left; 
  padding: 3px 5px 0px 5px; 
  margin: 3px 15px 0px 0px; 
  background: #fafafa url("") no-repeat center center; 
  color: #df3b91; 
  -moz-text-shadow: 1px 2px 4px #000;
  -webkit-text-shadow: 1px 2px 4px #000;
  text-shadow: 1px 2px 4px #000; 
  font-size: 35px; 
  line-height: 1em
  border: 1px solid;
  border-radius: 5px;
}

.align-v {
  vertical-align: middle;
}