*{
    box-sizing: border-box;
}

html{
    height:90%;
    font-size:24px;
}

.logo{
    height: 3em;

}
body{
    background-color: #EEE ;
    font-family: "Arial", serif;
    font-size: 24px;
    line-height: 2em;
    word-spacing:.1em;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

a{
    text-decoration: none;
}

section{
    padding-top: 1em;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    margin: auto;
    padding-left: 5% ;
    padding-right: 5% ;
    min-height: 100% 
}

figure{
    align-items: center;
    width:100%;
    margin-left:0px;
}

figure img{
    display: flex;
  align-items: center;
  justify-content: center;
    width:100%;
    max-width:1024px;
    height:auto;
    margin: auto;
    padding: auto;
    }

figcaption {
    display: flex;
    justify-content: center;
    font-size: 20px;
    color: #808080;
    font-style:italic;
}

div{
    display: inline-flex;
}

h1{
  display: flex;
  justify-content: safe center;
  font-weight: bold;
  color: black;
}

.h11{
  display: flex;
  justify-content: right;
  font-weight: bold;
  font-style: italic;
  color: black;
  padding-top: 5%;
  padding-right: 30%;
}

h2{
  display: flex;
  justify-content: left;
  color: black;
}

h3{
  display: flex;
  justify-content: left;
  color: #0a2b58;
  border-top: solid 1px;
  border-top-color: #0a2b58;
}

p{
    text-align: justify;
    text-indent: 15px;
    margin-bottom: .5em;
}

footer{
    background-color: #0a2b58;
    color: white;
    font-size: 26px;
    height: 2em;
    padding:.25em;
    display: flex;
    justify-content: center;
}

article{
    padding: 15px;
}

blockquote
{
  font-style: normal;
  font-size: 20px;
  margin-left: 32px;
  font-family: Consolas, "Times New Roman", Verdana;
  border-left: 4px solid #CCC;
  padding-left: 8px;
}

sup {
    vertical-align: super;
    font-size: small;
    color: #0a2b58;
    }
    

/* ////////// Navigation /////////// */

header{
    background-color: #0a2b58;
    display: flex;
    vertical-align: middle;
    justify-content: center;
}
    header li{
        display:  inline-block;
        vertical-align: top;
        position: relative;
        background-color: #0a2b58;
        padding:0px;
    }
        header li a{
            display: block;
            padding: 0;
            color: white;
            height:auto;
        } 
        header li:hover a{
            background-color: none;
            text-decoration: underline;
        }
        header li:hover .sub-nav{
            display: block;
        }

        header a:hover {
            text-decoration: underline;
        }
        header li:active {
            text-decoration: underline;
        }

.wrapper ul{
    margin: 0;
    padding: 0;
}

.wrapper a{
    padding: 1em;
}

.next a:hover{
    text-decoration: underline;
    padding-top: 0px;
}

.sommaire a:hover{
    text-decoration:underline;
    color:grey;
}


.sub-nav{
    display: none;
    position: absolute;
    background-color: none;
    white-space: nowrap
}

.sub-nav li{
    display: block;
}

.logo {
    justify-content: space-between;
    float: left;
}

.top {
    background-color: black;
    display: flex;
    justify-content: center;
    flex: 1;
    color: black;
}

.title {
    display: flex;
    justify-content: space-evenly;
    flex: 3;
    color: #0a2b58;
    padding: 15px;
    border-bottom: solid;
    }

.next{
    display: flex;
    justify-content: space-evenly;
    flex: 3;
    color: #0a2b58;
    padding: 1em;
    font-size:3em;
    padding-bottom:1em;
}

.next a{
    color: black;
}

.main{
    background-color: white;
}

.main li{
      list-style-type: none;
      display: block;
      margin: auto;

}

.active-page{
    background-color: white;
    color:black;
}

.full-page
{background-color: white;
}

.center{
    margin: auto;
    text-align: center;
    padding-top: 0;
}

.sources{
  font-size: 20px;
  color: darkgray;
  text-align:justify;
}


.sources a:hover{
            text-decoration: underline;
}

.biblio {
    background-color: red;
}

form input, form textarea {
    display:block; 
    margin-top:0em; 
    padding:.5em;
    margin: 0 auto;
    width: 90%;
    max-width:800px;
    font-size:24px;
}

form textarea{
    height:500px;
}

form input:button{
    color:red;
}


.bullet_list li{
        display: list-item;
        text-align: justify;
        list-style: disc;
        margin-bottom: .5em;
}

.num_list li{
        display: list-item;
        text-align: justify;
        list-style: none;
        margin-bottom: .5em;
        padding: 0;
}

.num_list ul{
            padding: 0;

}

/* ////////reseaux sociaux ///// */

.fa {
    padding: 20px;
    font-size: 50px;
    width: 120px;
    text-align: center;
    text-decoration: none;
    margin:20px;
}

/* Add a hover effect if you want */
.fa:hover {
    opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
    background: #3B5998;
    color: white;
}

/* Twitter */
.fa-twitter {
    background: #55ACEE;
    color: white;
}

/* YouTube */
.fa-youtube {
  background: #bb0000;
  color: white;
}

/* Google Plus */
.fa-google-plus {
  background: #dd4b39;
  color: white;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: white;
  color: #0a2b58;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: white;
  color: #0a2b58;
}
.fa-envelope {
    background:#dd4b39;
    color:white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}



.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}


@media all and (min-width: 1024px)
{
    body{
        font-size:16px;
    }

    section{
        width: 100%;
        max-width:800px;
        padding-top: 1em;
        padding-left: 2.5% ;
        padding-right: 2.5% ;
    }
    
    figure img{
        width:100%;
    max-width:1024px;
    }
    
    figcaption{
        font-size:14px;
    }
    
    .sources{
        font-size:14px;
        text-align:justify;
    }

    .next{
    font-size: 2em;
    }
    form input, form textarea {
    display:block; 
    margin-top:0em; 
    padding:.2em;
    width: 90%;
    max-width:500px;
    font-size:1em;
    margin-bottom:0em;
    padding:auto;
    }

    form textarea{
    height:200px;
    }
    
    article{
    font-size: 16px;
    }
.bullet_list li{
        display: list-item;
        text-align: justify;
        list-style: disc;
        margin-bottom: .5em;
        font-size:16px;
    }

.num_list li{
        display: list-item;
        text-align: justify;
        list-style: none;
        margin-bottom: .5em;
        padding: 0;
        font-size:16px;
    }
    
    
}