/*
- Defini les couleurs du template
- bg-nom de la couleur pour le background
- fg-nom de la couleur pour le foreground
*/


.clear{
    clear: both;
}

/* Couleur */
.bg-blanc{
    background-color: #FFFFFF;
}

.bg-fondgris{
  background-color: #D6D5D5;  
}

.bg-bleu{
  background-color: #E197C1;  
}

.bg-violet{
    background-color:#6C1344;
}

.bg-gris{
    background-color:#49494C;
}

.bg-bleuturquoise{
    background-color:#08AB9E;
}

.bg-bordeau{
    background-color:#931C3E;
}

.bg-jaune{
    background-color:#FDC41F;
}

.bg-orange{
    background-color:#F39325;
}

.bg-marron{
    background-color:#C24A18;
}

.bg-orangefonce{
    background-color:#EC6608;
}

.bg-bleufonce{
    background-color:#00467F;
}

.bg-vert{
    background-color:#73B738;
}

.bg-vertclair{
    background-color:#BCCF00;
}

.bg-grisclair{
    background-color:#D1D1D2;
}

.bg-fondgrisclair{
    background-color: #f2f0f0;
}


.fg-bleu{
  color: #E197C1;  
}

.fg-violet{
   color:#6C1344;
}

.fg-gris{
   color:#49494C;
}

.fg-bleuturquoise{
   color:#08AB9E;
}

.fg-bordeau{
  color:#931C3E;
}

.fg-jaune{
   color:#FDC41F;
}

.fg-orange{
  color:#F39325;
}

.fg-marron{
  color:#C24A18;
}

.fg-orangefonce{
   color:#EC6608;
}

.fg-rouge{
    color :#ec6608;
}

.fg-bleufonce{
   color:#00467F;
}

.fg-vert{
   color:#73B738;
}

.fg-vertclair{
   color:#BCCF00;
}

.fg-grisclair{
   color:#D1D1D2;
}

.fg-blanc{
    color:#FFF;
}

/* Content */
.padding30{
    padding: 30px;
}

.t-center{
    text-align: center;
}
.t-left{
    text-align: left;
}
.t-right{
    text-align: right;
}



/* Typo */
.t-bold{
    font-weight: bold;
}

.t-italic{
    font-style: italic;
}


/* police et font */
.thin{
    font-size: 12px;
    color: #49494C;
    font-weight: normal;
}

.italic{
    font-style: italic;
}



/* tailles */
.t-s24{
    font-size: 24px;
}

.t-s16{
    font-size: 16px;
}

.t-s14{
    font-size: 14px;
}

.t-s22{
    font-size: 22px;
}

.t-s12{
    font-size: 12px;
}

.t-s18{
    font-size: 18px;
}

/* Raccoucis pour les positionnements */

.fl{
    float:left;
}

.fr{
    float:right;
}

.flex{
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
  flex : 1 0 1;
}

.flex-center{
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
    
  -webkit-flex-flow:row wrap;
  flex-flow: row wrap;

  justify-content: center;
  -webkit-justify-content: center;
    
  flex :1;
}

.flex-left{
    
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
    
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items:flex-start;
  align-items: flex-start;
  
  flex :1;

}

.flex-right{
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
    
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items:flex-start;
  align-items: flex-start;
  
  flex :1; 
}

.colonne{
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
    
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items:flex-start;
  align-items: flex-start;
  
  flex :1;

    flex-direction: column;
}

/* Float */
.float-left{
    float:left;
}

.float-right{
    float:right;
}

/*margin */

.mauto{
    margin: auto;
}

.m5{
    margin:5px;
}

.m10{
    margin:10px;
}

/* raccourcis taille */
.w10{
    width: 9%;
}

.w25{
    width: 23%;
}

.w33{
    width:30%;
}

.w40{
    width:38%;
}

.w50{
    width:48%;
}

.w66{
    width: 64%;
}

.w70{
    width: 68%;
}

.w75{
    width: 73%;
}

.w85{
    width: 83%;
}

.w100{
    width: 98%;
}

.w145px{
    width: 145px;
}

.h20{
    height: 20px;
}

.h30{
    height: 30px;
}

/* raccourcis Padding */

.padding5{
    padding: 5px;
}

.padding10{
    padding: 10px;
}

padding20{
    padding: 20px;
}

/* raccourcis border */

.border-left-gris{
    border-left: 1px solid #49494C;
    padding-left:20px;
}

.border-bottom-gris{
    border-bottom: 2px solid #D6D5D5;
}

.border-left-jaune{
    border-left: 8px solid #fdc41f;
}

.border-left-orange{
    border-left: 8px solid #F39325;
}

.border-left-rouge{
    border-left: 8px solid #ec6608;
}

.border-blanc{
    border: 2px solid #FFF;
}


/* les spaces */

.space-10{
    height:10px;
    width: 100%;
}


.space-20{
    height:20px;
    width: 100%;
}


.space-30{
    height:30px;
    width: 100%;
}

.space-40{
    height:40px;
    width: 100%;
}

.space-50{
    height:50px;
    width: 100%;
}

/* Boutons */ 

.buttonvert{
    width: 100%;
    background-color: #BCCF00;
    color: #FFF;
    text-align: center;
    margin-top:20px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-transform: uppercase;
    cursor:  pointer;
}

.buttongris{
    width: 100%;
    background-color: #49494C;
    color: #FFF;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    text-transform: uppercase;
    cursor:  pointer;
    display: block;
}

/* boite */

.boite-grise{
    display: block;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #D6D5D5;
}

.boite-grisefonce{
    display: block;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    background-color: #49494C;
}

.readmore{
    background: url('../img/picto/plus.png') no-repeat left;
    padding-left: 20px;
    height: 17px;
}

.readmore a{
    text-decoration: none;
    font-weight: bolder;
        
}