@import url('https://fonts.googleapis.com/css?family=Raleway:100,400,400i,800&display=swap');

* {
    box-sizing: border-box;
}
img {
    max-width: 100%;
   
}
p{
    margin: 0;
    line-height: 1.8;
}
a {
    color: inherit;
}
a:hover {
    opacity: .5;
}
body {

    background-color: rgb(156, 156, 156);
    margin: 0;
    font-family:Raleway, Arial, Helvetica, sans-serif;
    font-size: .75em;
}

.enveloppe {
    
    background-color: white;
    max-width: 960px;
    min-height: 100vh ;
    margin:auto;
    padding: 30px;
    box-shadow: 4px 0 16px rgba(0,0,0,.5) ;
    
}
.EntetePage {

    border-bottom: 1px solid rgba(0, 0, 0,.5);
}
.TitreSite {

    font-weight: 100;
    font-size: 3em;
    margin: 0;
    margin-left: -.1em;
}
.TitreSite a {

    color: black;
    text-decoration: none;
}
.SloganSite {

    font-size:1em;
    font-weight: 400;
    margin: 0;
}
.TitrePage {

    font-size:3em;
    font-weight: 100;
}
.PageAccueil .TitrePage {

    visibility: hidden;
}
.SommaireDiaporama,
.SommaireSite{

    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}
.SommaireDiaporama img{
    
    display: block;
}
.SommaireSite li {

    border: 1px solid rgba(0, 0, 0,.5);
    box-shadow: 4px 0 16px rgba(0,0,0,.5) ;
    padding: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
}

.SommaireSite a {

    display: block;
    text-decoration: none;
    font-weight: 800;
    text-align: center;
}
.Menu {

    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
}
.Menu a  {

    text-decoration: none;
    display : block;
    padding: 1em;
}

.Menu a[href ="paysages.html"]{

padding-left: 40px;
background: url(../images/picto-paysage.png) left center no-repeat;


}

.Menu a[href ="art.html"]{

    padding-left: 40px;
    background: url(../images/picto-artetculture.png) left center no-repeat;
    
    
}

.Menu a[href ="experimental.html"]{

        padding-left: 40px;
        background: url(../images/picto-experimental.png) left center no-repeat;
        
        
}
.Menu a[href ="architectures.html"]{

 padding-left: 40px;
 background: url(../images/picto-architectures.png) left center no-repeat;
            
            
}
.Menu a[href ="pixelart.html"]{

padding-left: 40px;
background: url(../images/picto-pixelart.png) left center no-repeat;
                
}
.Menu a[href ="portraits.html"]{

padding-left: 40px;
background: url(../images/picto-portraits.png) left center no-repeat;
                    
                    
}
.Menu a[href ="techniques.html"]{

padding-left: 40px;
background: url(../images/picto-techniques.png) left center no-repeat;
                        
                        
}
.Menu a[href ="trains.html"]{

    padding-left: 40px;
    background: url(../images/picto-trains.png) left center no-repeat;
    
    
}
.Menu a[href ="vecteurs.html"]{

    padding-left: 40px;
    background: url(../images/picto-vecteurs.png) left center no-repeat;
    
    
    }
.Rubrique {
    border: 1px solid rgba(0, 0, 0,.5);
    box-shadow: 4px 0 4px rgba(0,0,0,.5) ;
    padding:0;
    margin-right: 0.5em;

}
.SommaireDiaporama li {
    margin-right: .8em;
    margin-bottom: .8em;
    box-shadow: 4px 0 8px rgba(0,0,0,.5) ;
}
.SommaireDiaporama img {

    display: block;
    width:100px;
    height:100px;
}
.Diaporama {

    list-style-type: none;
    padding: 0;
    /* height: 600px; */
    max-width:900px;
    /*box-shadow: 8px 0 16px rgba(0,0,0,.5) ;*/
    position: relative;
    padding-top: 64.5%; 
}
.Diaporama img {
    display: block;
    width:900px;
    height:600px;
}
.Diaporama > li {
    display: flex;
    justify-content: center;
    align-items: center;

}
.Diaporama > li > img {
    display: block;

}
.PiedDePage {

    border-top: 1px solid rgba(0, 0, 0,.5);
    margin-top: 4em;
}