/* CSS Document */
div
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 28, 2017 */
@font-face {
    font-family: 'lato';
    src: url('../polices/lato-regular-webfont.woff2') format('woff2'),
         url('../polices/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latolight';
    src: url('../polices/lato-light-webfont.woff2') format('woff2'),
         url('../polices/lato-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'abel';
    src: url('../polices/abel-regular-webfont.woff2') format('woff2'),
         url('../polices/abel-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ------------------------------------------------------
   LES ELEMENTS GENERAUX
   ------------------------------------------------------ */
body{
  margin:0;
  border:0;
  padding:0;
  font-family:'abel';
}
h1{
  padding:10px 20px 10px 30px;
  padding:0px;
  xxfont-family:'latolight';
  font-weight:lighter;
  text-align:center;
  color:white;  
}
h2{
  text-align:center;
  color:white;  
}
h3{
  padding:10px 20px 10px 30px;
  padding:0px;
  font-family:'latolight';
  font-weight:lighter;
  text-align:left;
  color:white;  
}
.col-g-4col > h1, .col-cg-4col > h1, .col-cd-4col > h1, .col-d-4col > h1{
  padding:0px 0px 0px 0px;
}
.footer-copyright > h1{
  font-family:'latolight';
  font-size:0.7em;
  font-weight:lighter;
  text-align:center;
  color:#aaaacc;
}
.nospace{
  border:0;
  margin:0;
  padding:0px 0px 0px 0px;
}
.nospacetitle{
  border:0;
  margin:0;
  padding:0px 0px 0px 0px;
  text-align:center;
  font-weight:darker;
}
.imgCenter60{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:60%;  
} 
.imgCenter100{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:100%;  
} 
.centerPaddinText{
  text-align:justify;
  padding:0px 10px 0px 10px;
}
.centerPaddinTextFooter{
  text-align:CENTER;
  padding:0px 10px 0px 10px;
  font-size:1.5em;
  color:white;
}

a{
  color: pink;
}
.centerPaddinTextFooter > a:link {color: white; text-decoration: none;}
.centerPaddinTextFooter > a:visited {color: white; text-decoration: none;}
.centerPaddinTextFooter > a:hover {color: SpringGreen; text-decoration: none;}
.centerPaddinTextFooter > a:active {color: white; text-decoration: none;}

input{
  width:100%;
  font-size: 0.8em;
}
textarea{
  width:100%;
  font-size: 1.0em;
}
select{
  width:100%;
  xfont-size: 1.0em;
}

/* ------------------------------------------------------
   LES CONTAINERS GLOBAUX  #DIV .CLASS
   ------------------------------------------------------ */
#myFullPage{
/* contenant de toutes les boites */
  top:0;
  left:0;
  height:100%;
  width:100%;
  margin:auto;
  padding-bottom:0px; /* espace entre bas de footer et bas de page */
  background:#000000;
  display:block; /* par défaut pour tous les enfants */
}


/* ----- ENTETE DE DOCUMENT ----- */
header{
  margin:0px;
  border:0px;
  padding:0px;
}
#boiteBanner{
  border:0px solid red;
  background:white;
  font-size:1.4em;
  width:100%;
  height:auto;
}
#boiteBanner > img{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  display:block;
}
.topbanner{
  max-height:80px; 
  background:white;
}

/* ----- MENU ----- */
 /* voir dans css specifique */
nav{
}  

/* ----- CAROUSSEL ----- */
/* voir aussi css carrousel */


/* ----- CORPS DU DOCUMENT ----- */
main{
  margin:0px;
  border:0px;
  padding:0px;
}

/* --------------------------------------- boite a 0 ou 1 colonne */
.bloc-1-colonnes{
  margin:0;
  border:0;
  padding:0;
  color:white;
}
.bloc-1-colonnes > h1{
  padding:0px 10px 0px 40px;
  text-align:left;
}
.col-g-1col{
    padding:10px 10px 0px 10px;
    float:left; 
    position: relative;
    left:0%;  /* largeur de droite */
    border-right:1px solid #6C85A4; 
    width:100%;
}
.col-g-0col{
    float:left; 
    position: relative;
    left:0%;  /* largeur de droite */
    border-right:1px solid #6C85A4; 
    width:100%;
}
.container-col-g-1col {
    float:left;
    width:100%;
    background-color:#6C85A4;
    position:relative;
    right:0%; /* largeur de la colone droite */
} 

/* --------------------------------------- boite a 2 colonnes */
.bloc-2-colonnes{
  margin:0;
  border:0;
  padding:0;
}
.bloc-2-colonnes > h1{
  padding:0px 10px 0px 40px;
}
.col-g-2col, .col-d-2col{
    padding:10px 10px 0px 40px;
    float:left; 
    position: relative;
    left:40%;  /* largeur de droite */
}
.col-g-2col{
    border-right:1px solid #DCDCDC; 
    width:60%;
}
.col-d-2col{
    width:40%;
    overflow: hidden;
}
.container-col-g-2col, .container-col-d-2col {
    float:left;
    width:100%;
} 
.container-col-g-2col {
    background-color:#2E8B57;
    background-color:#aaaaaa;
    position:relative;
    right:40%; /* largeur de la colone droite */
} 
.container-col-d-2col {
    background-color:#aaaaaa;
} 


/* --------------------------------------- boite 3 colonnes Principale */
.bloc-3-colonnes{
  margin:0;
  border:0;
  padding:0;
}
.col-g-3col, .col-c-3col, .col-d-3col{
  padding:0px 10px 0px 10px;
}
.col-g-3col, .col-c-3col, .col-d-3col{
    float:left; 
    position: relative;
    left:66.66%;  /* largeur de Centre+droite */
}

.col-g-3col{
    width:33.33%;
    border-top:1px solid #DCDCDC;
}
.col-c-3col{
    width:33.33%;
    border-top:1px solid #DCDCDC;
    border-left:1px solid #DCDCDC;
    border-right:1px solid #DCDCDC;
}
.col-d-3col{
    width:33.33%;
    border-top:1px solid #DCDCDC;
    overflow: hidden;
}
.container-col-g-3col, .container-col-c-3col, .container-col-d-3col {
    float:left;
    width:100%;
} 
.container-col-g-3col {
    background-color:#E3A41C;    
    position:relative;
    right:33.33%;  /* largeur de la colone centrale */
} 
.container-col-c-3col {
    background-color:#4B5969;
    position:relative;
    right:33.33%;  /* largeur de la colonne de gauche */
} 
.container-col-d-3col {
    background-color:#5C4410;
    background-color:#cccccc;
} 



/* --------------------------------------- boite 3 colonnes 2emeCouleur */
.bloc-32-colonnes{
  margin:0;
  border:0;
  padding:0;
}
.col-g-32col, .col-c-32col, .col-d-32col{
  padding:0px 10px 0px 10px;
}
.col-g-32col, .col-c-32col, .col-d-32col{
    float:left; 
    position: relative;
    left:66.66%;   /* largeur de Centre+droite */
}

.col-g-32col{
    width:33.33%;
    border-top:1px solid #DCDCDC;
}
.col-c-32col{
    width:33.33%;
    border-top:1px solid #DCDCDC;
    border-left:1px solid #DCDCDC;
    border-right:1px solid #DCDCDC;
}
.col-d-32col{
    width:33.33%;
    border-top:1px solid #DCDCDC;
    overflow: hidden;
}
.container-col-g-32col, .container-col-c-32col, .container-col-d-32col {
    float:left;
    width:100%;
} 
.container-col-g-32col {
    background-color:#2E8B57;    
    position:relative;
    right:33.33%;  /* largeur de la colone centrale */
} 
.container-col-c-32col {
    background-color:#2E8B57;
    position:relative;
    right:33.33%;  /* largeur de la colonne de gauche */
} 
.container-col-d-32col {
    background-color:#2E8B57;
} 


/* --------------------------------------- boite a 4 colonnes */
.bloc-4-colonnes{
  margin:0;
  border:0;
  padding:0;
  font-size:0.6em;
}
.col-g-4col, .col-cg-4col, .col-cd-4col, .col-d-4col{
  padding:0px 10px 0px 10px;
}
.col-g-4col, .col-cg-4col, .col-cd-4col, .col-d-4col{
    float:left; 
    position: relative;
    left:75%;   /* largeur de Centre+droite */
}

.col-g-4col{
    width:25%;
    border-top:1px solid #444444;
}
.col-cg-4col{
    width:25%;
    border-top:1px solid #444444;
    border-left:1px solid #444444;
    border-right:1px solid #444444;
}
.col-cd-4col{
    width:25%;
    border-top:1px solid #444444;
    border-left:1px solid #444444;
    border-right:1px solid #444444;
}
.col-d-4col{
    width:25%;
    border-top:1px solid #444444;
    overflow: hidden;
}
.container-col-g-4col, .container-col-cg-4col, .container-col-cd-4col, .container-col-d-4col {
    float:left;
    width:100%;
} 
.container-col-g-4col {
    background-color:#444444;    
    position:relative;
    right:25%;  /* largeur de la colone centrale */
} 
.container-col-cg-4col {
    background-color:#444444;
    position:relative;
    right:25%;  /* largeur de la colonne de gauche */
} 
.container-col-cd-4col {
    background-color:#444444;
    position:relative;
    right:25%;  /* largeur de la colonne de gauche */
} 
.container-col-d-4col {
    background-color:#444444;
} 



/* --------------------------------------- boite a 3 div */
.container-3div{
  border:0;
  margin:0 auto 0 auto;
  padding:0;
  width:100%;
  background:#0097d6;
  text-align:center;
}
.div-3div{
  display:inline-block;
  border:0px solid red;
  margin:0 auto;
  margin-bottom:10;
  padding:20;
  min-height:12%;
  width:32%;
  min-width:270px;
  background:#ffffff;
  text-align:left;
  vertical-align:top;
}

aside{
}

/* ----- BAS DE PAGE ----- */
footer{
  border:0;
  margin:0;
  padding:0;
  display:block;
  background-color:black;
}

.footer-info{
  background:darkgray;
  min-height:100px;
  width:100%;
}

.footer-copyright{
  background:black;
  color:white;
  min-height:60px;
  width:100%;  
}


article{
}

section{
}

div{
}



/* --------- RESPONSIVE DESIGN ---------- (740) */

@media all and (max-width : 840px){
    .div-3div{
        display:block;
        margin-bottom:10;
        padding:5;
        min-height:12%;
        width:96%;
    }
}


@media all and (max-width : 820px){
    .col-g-4col > h1, .col-cg-4col > h1, .col-cd-4col > h1, .col-d-4col > h1{
      xvisibility: hidden;
      font-size:1.7em;
      text-align:left;
    }
    .centerPaddinTextFooter{
      font-size:1.5em;
      text-align:left;
    }
    .col-g-3col > h1, .col-c-3col > h1, .col-d-3col > h1, .col-g-32col > h1, .col-c-32col > h1, .col-d-32col > h1{
      font-size:1.3em;
    }
    .col-g-3col > div.centerPaddinText > h2, .col-c-3col > div.centerPaddinText > h2, .col-d-3col > div.centerPaddinText > h2, .col-g-32col > div.centerPaddinText > h2, .col-c-32col > div.centerPaddinText > h2, .col-d-32col > div.centerPaddinText > h2{
      font-size:1.1em;
    }
}

@media all and (max-width : 639px){
    .menu-mobile{
        display:block;
        color:white;
        background-color:RGBa(29, 190, 150, 0.95);
        background-color:#00ABFF;
        text-align:center;
        padding: 20px 0;
        padding:20px 30px;
        color:white;
        font-size:1.0em;
        font-family:Verdana;
    }
    .col-g-3col, .col-c-3col, .col-d-3col, .col-g-32col, .col-c-32col, .col-d-32col{
        border-right:0;
        border-left:0;
        border-top:1px solid #DCDCDC;
        display:block;
        width:100%;
    }
    .col-g-3col > h1, .col-c-3col > h1, .col-d-3col > h1, .col-g-32col > h1, .col-c-32col > h1, .col-d-32col > h1{
      font-size:1.8em;
    }
    .col-g-3col > div.centerPaddinText > h2, .col-c-3col > div.centerPaddinText > h2, .col-d-3col > div.centerPaddinText > h2, .col-g-32col > div.centerPaddinText > h2, .col-c-32col > div.centerPaddinText > h2, .col-d-32col > div.centerPaddinText > h2{
      font-size:1.5em;
    }
    /* ---COULEURS DES BLOCS SUR MOBILE--- */
    .col-g-3col{
        background-color:#cccccc;
    }
    .col-c-3col{
        background-color:#bbbbbb;
    }
    .col-d-3col{
        background-color:#cccccc;
    }
    /* --------------------------- si maj couleurs
    .col-g-32col{
        background-color:#8B0000;
    }
    .col-c-32col{
        background-color:#8B0000;
    }
    .col-d-32col{
        background-color:#8B0000;
    }
    -------------------------------- */  

}

@media all and (max-width : 550px){
    .col-g-4col > h1, .col-cg-4col > h1, .col-cd-4col > h1, .col-d-4col > h1{
      xvisibility: hidden;
      font-size:1.3em;
    }
    .centerPaddinTextFooter{
      font-size:0.9em;
      text-align:left;
    }
    .col-g-2col, .col-d-2col{
        border-right:0;
        border-top:1px solid #DCDCDC;
        display:block;
        width:100%;
    }
    .col-g-2col{
        background-color:#aaaaaa;
    }
    .col-d-2col{
        background-color:#cccccc;
    }

}