/*
Les changements effectuer dans ce fichier css
sera reflèter dans toute les pages index.html
quelque soit la langue

Il est possible 'over-rider' tout ces parametre
en intérant un code css directemnt dans la page
ou encore directement dans l'element'

Les classes sont definie par un .
Les id sont definie par un #
Les 'tag-names' n'ont pas de préfix (voir body)'

-------
span
sera appliquer a tout les elements <span>

.texteEnBleu
sera appliquer a tout les element ayant la classe texteEnbleu

#logo
sera appliquer a l'element nommé logo
-------

on peut selectioner les 'childs' en ajoutant un espace
tel que:

-----
#NomElement img
sera appliquer au image a l'interieur d'un element avec un id 'NomElement'
-----
*/

root { 
  display: block;
}

/*Contient les image du slide show*/
#image{
  position: relative;
  margin: 12px 0px;
  height: 625px; width:960px;
}

/*Les images comme tel*/
#slider img{
  position: absolute;
  top:0; left:0px;
  z-index:-1;
}

/*Appliquer a toute les barres verticale*/
.bar{
  background-color: #f6f6f6;
  z-index: 9999;
}

#bar1{
  position: absolute;
  top:-5px; left:186px;
  height:641px; width:8px;
}

#bar2{
  position: absolute;
  top:-5px; left:380px;
  height:641px; width:8px;
}



/* Pour les Slogan */
/* la bar grisse elle meme (#3)*/
#bar3{
  position: absolute;
  top:-5px;
  right:186px;
  height:605px;
  width:186px;
  padding: 25px 7px 0;
}



/* Les Slogants */
#slogans{
  position: relative;
  margin:70px 15px 0 15px;

}


/*Pour eviter le deplacement des texte lors de la transistion*/
.slogan{
  position: absolute;
  background-color: #f6f6f6;
}


/*Titre de slogans'*/
.slogan h4{
  font-family: 'PT Sans', sans-serif !important;
  position: relative;
  color:#C21C1D;
  font-size: 20px;
  width:175px; 
  height: 20px;
}


/*Sous-Titre de slogans'*/
.slogan p{
  font-family: "arial";
  position: relative;
  font-size: 11px;
  font-weight: bold;
  width:158px;
  text-align: left;
  top:-20px;
  line-height: 11px;
}



/*le texte de la bar grise */
#texte{
 font-family: "Lucida Sans Unicode","Lucida Grande","Trebuchet MS",Helvetica,Arial,sans-serif;
 font-size: 10px;
 position: relative;
 top:140px;
 margin: 15px;
 text-align: justify;
 z-index:10101;
 line-height: 11.5px;
}




/* Fleches (construction, investiseur, e-renouv */
  #fleches{
    position: absolute;
    bottom: 65px; 
    left:-28px;
    list-style: none;
  }

  #fleches li{
    margin-top: 10px; 
  }

  #fleches li a.c {
    line-height: 13px;
    padding-left: 22px;
    background:url('../img/CIE.png') 0px 0px no-repeat;
  }

  #fleches li a.c:hover {
    color: #C21C1D;
     background:url('../img/CIE_rouge.png') 0px -1px no-repeat;
  }

  #fleches li a.i {
    line-height: 13px;
    padding-left: 22px;
    background:url('../img/CIE.png') 0px -22px no-repeat;
  }

  #fleches li a.i:hover {
    color: #C21C1D;
     background:url('../img/CIE_rouge.png') 0px -23px no-repeat;
  }

  #fleches li a.e {
    line-height: 13px;
    padding-left: 22px;
    background:url('../img/CIE.png') 0px -44px no-repeat;
  }

  #fleches li a.e:hover {
    color: #C21C1D;
     background:url('../img/CIE_rouge.png') 0px -45px no-repeat;
  }

  .fleche:link, .fleche:visited{
    font-family: 'arial';
    font-size: 12px;
    color:black;
    text-decoration: none;
    border: none;
    display:block;
    font-weight:bolder;
    padding-top:5px;
  }



/**********************/
/****** CLEARFIX ******/
/**********************/
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
}

.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}

.banner{
  margin: 0 auto;
  padding: 0;
  text-align: left;
  width: 960px;
  line-height: 1.9;
  font-size: 12px;
  position: relative;




}

.btn-banner{
  width:157px;
  height:42px;	



}

.banner-dargis{
  margin-left:0px;


}


.banner-cvb{
  margin-left:10px;


}