/* CSS du site michelboetsch.com */


* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }
  




body{
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    background-color: #333;
    margin: 0 0 0 0;
}

a{
    color: white;
    text-decoration: none;
}

a:hover{
    text-decoration: none;
}

ul{
    list-style-type:none;
  
}


#branding {
    display:block;
    background-color: black;
    
}
.brand-wrap{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.brand-wrap H2{
   margin-left: 2em;
}
.description{
    color: yellow;
    border-left: 2px solid;
    padding: 10px;
    margin: 0 0 0 10px;
}
#nav{
display: flex;
flex-wrap: wrap;
}

.menu-header-container{

}

.go-left, .go-right{display: none}
.home-thumbs{
  
}
ul.thumbs{
    padding:0;
    margin:0;
    display: flex;

    flex-wrap: wrap;
    justify-content: flex-start;
    justify-content: left;
    
}


li.thumb{
    height: 160px;
}




.posth{
    position: relative;
    text-align: center;
    transition-timing-function: ease-in;
	transition: bottom 0.25s;
	-moz-transition: bottom 0.25s;
	-o-transition: bottom 0.25s;
	-webkit-transition:  bottom 0.25s;

}
.thumb-big{
    height: 320px;
    overflow: hidden;
    

}
.thumb-big, .thumb-big .posth{
    width: 320px;

}
.thumb-big .posth {
    position: relative;
    bottom: 100px;
    background-color: #3333337a;
    padding: 10px 0;
  
}

li.thumb-big a:hover > .posth{
   
    bottom: 0px;
}

.thumb, .thumb .posth{
    width: 160px;

}
.thumb{
    height: 160px;
    overflow: hidden;
    

}
.thumb .posth {
    position: relative;
    bottom: 100px;
    background-color: #3333337a;
    padding: 10px 0;
  
}

li.thumb a:hover > .posth{
   
    bottom: 0px;
}


/***

ul.thumbs>* {
    flex: 1 1 320px;
}
li .thumb-big{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
   
}

li .thumb{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    
}



*/

#content {
    margin:0 5px;
}
.post {
    max-width: 1280px;
}

/*** Article seul */

.titre-article, #content h2{
    color: yellow;
    margin: 20px 0 0 20px;
}

/*** Footer */

#footer-wrap {
background-color: black;

}

#footer {
    display:flex;
    flex-wrap: wrap;
}


/* ---- grid ---- */

.grid {
    background: rgb(0, 0, 0);
    margin: 0 auto;
  }
  
  /* clear fix */
  .grid:after {
    content: '';
    display: block;
    clear: both;
  }
  
  /* ---- .grid-item ---- */
  
  .grid-item {
    float: left;
    width: 320px;
    height: 320px;
    background: #0D8;
    border: 2px solid #333;
    border-color: hsla(0, 0%, 0%, 0.7);
 }
  
  .grid-item--height2 { height: 320px; }
  .grid-item--height3 { height: 160px; }
  .grid-item--width2 { width: 160px; }