/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  flex header logo */  
  .flex-logo-container {
    padding: 0;
    margin: 0;
    list-style: none;
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    -webkit-flex-flow: wrap;
    flex-wrap: wrap;
    /*justify-content: space-around;
    -webkit-justify-content: space-between;*/

  }

  .flex-logo-item {    
    width: 50%; 
    height: auto;
    padding: 0;
    margin: 0;
    align-self: flex-start;
  }

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  flex accueil  6 articles */
  .flex-accueil-article-container {
    padding: 0;
    margin: 0;
    list-style: none;
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    -webkit-flex-flow: wrap;
    flex-wrap: wrap;
    
    /*
    justify-content: space-around;
    -webkit-justify-content: space-between;
    */

    align-items: stretch;
    align-content: stretch;
  }

  .flex-accueil-article-item {    
    width: 50%; 
    height: auto;
    padding: 20px 20px 20px 20px;
    margin:10px 0 0 0;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    position: relative;
    cursor: pointer;
  }


  .article-photo{
    width:100%; height:200px;
    padding: 0px; margin:15px 0;
    border : solid 1px #eee;
    background-color: #eee;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    position:relative;
  }

  .article-photo-legende-vignette{
    width:100%; height:auto;
    padding: 10px; margin:0;
    background-color: rgba(0,0,0,0.65);
    position:absolute;
    z-index:100;
    bottom:0; left:0;
    text-align:center;
    color:#fff;
    font:400 14px 'Open Sans', sans-serif !important;
  }

  .article-photo-petit{
    width:100%; height:100px;
    padding: 0px;
    border : solid 1px #eee;
    background-color: #eee;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .article-contenu{
    width:100%;
    padding: 10px 10px 40px 10px;
    border-top : solid 1px #ccc;
    position: relative;
  }

  .flex-accueil-article-item:hover .article-contenu {    
    background: url(../img/stripes.png);
  }

  /*
  .flex-accueil-article-item:hover .article-lien,
  .flex-accueil-article-item:hover .badge {
    background:#cf1f25; color:#fff;
  }
  
  .flex-accueil-article-item:hover .article-commentaires {
    color:#cf1f25;
  }
  */

  .flex-accueil-article-item h2 {
    font:700 16px 'Open Sans', sans-serif;
  }

  .flex-accueil-article-item:hover h2 {
    color:#cf1f25;
  }

  .article-date {
    padding:0; margin:0;
    background: transparent; color:#000;
    font:700 14px 'Open Sans', sans-serif;
  }

  .article-region {
    padding:0px; margin:0;
    color:#000;
    font:700 16px 'Open Sans', sans-serif;
  }

  .article-lien {
    position: absolute;
    bottom:10px; right:10px;
    z-index:10;

    font:700 12px 'Open Sans', sans-serif;
    background:#fff; color:#cf1f25;
    border:solid 1px #cf1f25;
    padding:5px;
  }

  .article-lien:hover {
    background:#cf1f25; color:#fff;
  }

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  flex accueil  articles REGION */
  .flex-accueil-article-region-container {
    padding: 0;
    margin: 0;
    list-style: none;
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    -webkit-flex-flow: wrap;
    flex-wrap: wrap;
    
    /*
    justify-content: space-around;
    -webkit-justify-content: space-between;
    */

    align-items: stretch;
    align-content: stretch;
  }

  .flex-accueil-article-region-item {  

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;


    width: 33.33%;
    height: auto;
    padding: 20px 20px 20px 20px;
    margin: 0 0 10px 0;
    
    position: relative;
    cursor: pointer;

  }

  .article-region-contenu{
    width:100%;
    padding: 10px 10px 30px 10px;
    /*border-top: solid 1px #ccc;*/
    position:relative;
  }

  .article-region-date {
    padding:0; margin:0;
    background: transparent; color:#000;
    font:700 10px 'Open Sans', sans-serif;
  }

  .article-region-region {
    padding:0px; margin:0;
    color:#000;
    font:700 12px 'Open Sans', sans-serif;
  }

  .flex-accueil-article-region-item:hover {    
    background-color: #fff;
  }

  .flex-accueil-article-region-item:hover .article-region-contenu {    
    background: url(../img/stripes.png);
  }

  /*
  .flex-accueil-article-region-item:hover .article-lien,
  .flex-accueil-article-region-item:hover .badge {
    background:#cf1f25; color:#fff;
  }

  .flex-accueil-article-region-item:hover .article-commentaires {
    color:#cf1f25;
  }
  */

  .flex-accueil-article-region-item:hover h2 {
    color:#cf1f25;
  }

  .flex-accueil-article-region-item h2 {    
    font:700 14px 'Open Sans', sans-serif;
  }

  .flex-accueil-article-region-item .article-resume {    
    font:400 12px 'Open Sans', sans-serif;
    padding:0 0 10px 0;
  }


  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  flex accueil  20 articles */
  .flex-accueil-article-suite-container {
    padding: 0;
    margin: 0;
    list-style: none;
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    -webkit-flex-flow: wrap;
    flex-wrap: wrap;
    
    /*
    justify-content: space-around;
    -webkit-justify-content: space-between;
    */

    align-items: stretch;
    align-content: stretch;
  }

  .flex-accueil-article-suite-item {  

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;


    width: 33.33%;
    height: auto;
    padding: 20px 20px 20px 20px;
    margin: 10px 0;
    
    position: relative;
    cursor: pointer;

  }

  .article-suite-contenu{
    width:100%;
    padding: 10px 10px 30px 10px;
    border-top: solid 1px #ccc;
    position:relative;
  }

  .article-suite-date {
    padding:0; margin:0;
    background: transparent; color:#000;
    font:700 10px 'Open Sans', sans-serif;
  }

  .article-suite-region {
    padding:0px; margin:0;
    color:#000;
    font:700 12px 'Open Sans', sans-serif;
  }

  .flex-accueil-article-suite-item:hover {    
    background-color: #fff;
  }

  .flex-accueil-article-suite-item:hover .article-suite-contenu {    
    background: url(../img/stripes.png);
  }


  .flex-accueil-article-suite-item:hover .article-lien,
  .flex-accueil-article-suite-item:hover .badge {
    background:#cf1f25; color:#fff;
  }

  .flex-accueil-article-suite-item:hover h2 {
    color:#cf1f25;
  }

  .flex-accueil-article-suite-item h2 {    
    font:700 14px 'Open Sans', sans-serif;
  }

  .flex-accueil-article-suite-item .article-resume {    
    font:400 12px 'Open Sans', sans-serif;
    padding:0 0 10px 0;
  }

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  commentaires */
  .article-commentaires {
    position: absolute;
    bottom:10px; left:10px;
    z-index:10;
    color:#999;
    font:700 12px 'Open Sans', sans-serif;
  }

  .article-commentaires img { width:auto; height:25px;  }


  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  MEDIAQUERIES */
  @media only screen and (max-width: 750px) { 
    .flex-accueil-article-container, .flex-accueil-article-suite-container, .flex-accueil-article-region-container {
      -webkit-flex-direction: column; /* Safari */
      flex-direction:         column;
    }

    .flex-accueil-article-item, .flex-accueil-article-suite-item, .flex-accueil-article-region-item {    
      width: 100%; 
      margin: 0px;
    }
  }

  @media only screen and (max-width: 400px) { 
    .flex-logo-container {
      -webkit-flex-direction: column; /* Safari */
      flex-direction:         column;
    }

    .flex-logo-item {    
      width: 100%; 
    }
  }