/* Fonts */

@font-face {
    font-family: Numito;
    src: url(fontd/Numito-regular.ttf);
    font-weight: 500;
}

@font-face {
    font-family: Numito;
    src: url(fontd/Numito-Bold.ttf);
    font-weight: 700;
}

@font-face {
    font-family: Numito;
    src: url(fontd/Numito-Light.ttf);
    font-weight: 300;
}

/* General */

body {
    background: #222;
    font-family: Numito, sans-serif;
}

a, a:hover, a:focus {
    text-decoration: none;
    color: #fff
}

img {
    width: 70%;
    height: auto;
}

/* Header */

@-webkit-keyframes clignote {
    from {opacity: 1;}
    to {opacity: 0; }
}
@keyframes clignote {
    from {opacity: 1;}
    to {opacity: 0; }
}

nav {
    font-size: 1.5em; /*corps du menu*/
    background: #04243a;
    margin-top: 1em;
}

nav a:hover {
    color:#295c7f;
} 

header {
    line-height: 50px;
    background: #04243a;
    text-align: center;
    font-weight: 700;
    padding-bottom: 20px;
}

header h1 a {
    position: relative;
    top: 1em;
    font-size: 1.5em;
}

header h1 a span {
    -webkit-animation: clignote .5s ease alternate infinite;
            animation: clignote .5s ease alternate infinite;
    position: relative;
    bottom: 50px;
}


/* Presentation index */

figure {
    position: relative;
    display: inline-block;
    background-color: #04243a;
}

figure img {
    width: 100%;
    height: auto;
}

figcaption {
    position: absolute;
    top: 10%;
    text-align: left;
    font-family: sans-serif; 
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.3em;
    color: #fff;
    margin-left: 50px;
    margin-right: 100px;
}


/* Section présentation de page illustration/graphisme-dev web */

section {
    padding: 30px 10px;
    background: #e5e5e5;
    border-bottom: 3px solid #171717;
    text-align: center
}

section h1 {
    font-weight: bold;
    color: #333;
    font-size: 2em;
    text-align: center;
}

section p {
    font-weight: bold;
    color: #565656;
    font-size: .9em;
    text-align: justify;
    margin: 0px 100px 0px 100px;
    padding-top: 10px;
}


/* Articles - contenue de la page */

article {
    padding-top: 10px;
    padding-bottom: 10px;
}

article img {
    width: 100%;
    height: auto;
}

article h1 {
    padding-top: 5px;
    font-weight: bold;
    color: #fff;
    font-size: 1.1em;
    line-height: 1.3em;
}

article h1 span {
    color: #295c7f;
}

article h2 {
    padding-top: 5px;
    font-weight: bold;
    color: #565656;
    font-size: 1.1em;
    line-height: 1.3em;
}

article h2 span {
    color: #295c7f;
}

article #carte {
    margin-top: .2em;
    padding: 0em 1.5em 1.5em 1.5em;
    border-radius: 0px 0px 20px 20px;
    background: #fff;
    border-bottom: 2px solid #000;
}

article #carte div img {
    display: inline;
    width: auto;
    height: 40px;
}

.card-body {
    height: 340px;
}

#button-block {
    position: absolute;
    width: auto;
    bottom: 40px;
}

/* titre modal */

article h5 {
    font-weight: bold;
    color: #fff;
    font-size: 1.1em;
    line-height: 1.3em;
}

article h5 span {
    color: #295c7f;
}


/* mentions légales*/

objet {
    background: #fff;
    padding: 20px;
}
objet h1 {
    margin-top: 20px;
    font-weight: bold;
    color: #04243a;
    font-size: 2em;
    line-height: 1.3em;
}

objet h2 {
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #295c7f;
    font-size: 1.1em;
    line-height: 1.3em;
}
objet a {
    color: #565656;
    font-size: 1em;
    text-align: left;
}

objet a:hover, objet a:focus {
    text-decoration: none;
    color: #565656
}

Objet p {
    color: #565656;
    font-size: 1em;
    line-height: 1.5em;
    text-align: justify;
}

/* footer */

footer {
    background: #04243a;
    padding-top: 20px;
    padding-bottom: 50px;
    }

footer img {
    width: 35%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

footer a {
    text-align: center;
    font-weight: 500;
    font-size: 0.7em;
    padding-top: 50px;
    margin-bottom: 100;
    line-height: 2.3em;
}

footer li {
    font-size: 1.5em;
}

footer #go-up {
    padding-bottom: 40px;
    font-size: 1.2em;
}
footer #go-up:hover {
    color: #295c7f;
}

/* affichage phone horizontal */

@media (min-width: 560px) {
    header h1 {
        text-align: left;
        width: 270px;
        height: auto;
    }
    
    header h1 a span {
        position: relative;
        bottom: 30px;
    }
    
    header ul {
        float: right;
        position: relative;
        text-align: right;
    }
    nav {
        font-size: 1.1em;
        
    }
    
    figcaption {
        font-size: 1.3em;
    }
    
    footer img {
        width: 100%;
        height: auto;
    }
    
    footer a {
        font-size: 0.45em;
        text-align: right;
    }

}

/* affichage tablette */

@media (min-width: 768px) {
    header h1 {
        text-align: left;
        width: 270px;
        height: auto;
    }
    
    header h1 a span {
        position: relative;
        bottom: 30px;
}
    
    header ul {
        float: right;
        position: relative;
        top: 4.4em;
    }
    
    header li {
        float: left;
        
    }
    
    header li + li {
        margin-left: 20px;
    }
    
    nav {
        font-size: 1em;
        vertical-align: bottom;
    }
    
    figcaption {
        font-size: 1.3em;
        line-height: 1.5em;
        margin-left: 50px;
        margin-right: 200px;
    }
    
    objet div {
        float: left;
    }
    
    footer img {
        width: 80%;
        height: auto;
    }
    footer a {
        text-align: right;
        font-size: 0.6em;
    }
    
    footer li {
        font-size: 1.6em;
    }
    
    footer #go-up {
        padding-bottom: 10px;
    }

}

/* affichage ordinateur de bureau */
 
@media (min-width: 992px) {

    
    figcaption {
        font-size: 1.8em;
        line-height: 2em;
        margin-left: 50px;
        margin-right: 500px;
    }
    
    .image-box img {
        -webkit-filter: grayscale(100%);
                filter: grayscale(100%);

        -webkit-transition: filter .6s linear;
                transition: filter .6s linear;
    }
    
    .image-box:hover img {
        -webkit-filter: none;
                filter: none;
    }
    
    .image-box {
        overflow: hidden;
    }
    
    .image-box img {
        -webkit-transition: .6s linear;
                transition: .6s linear;
    }
    
    .image-box img:hover {
        -webkit-transform: scale(1.05);
                transform: scale(1.05);
    }

    footer img {
        width: 40%;
        height: auto;
    }
    
    footer li {
        font-size: 2em;
    }

}

@media (min-width: 1200px) {
    figure {
        position: relative;
        left: 50%; 
        transform: translate(-50%);
        width: 1200px;
        height: auto;
    }
}