@import url(https://fonts.googleapis.com/css?family=Amatic+SC:400,700);
@import url('https://fonts.googleapis.com/css?family=Montserrat');

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

body {
    /*background-color: #dcdcdc;*/
    background-color: #f5f4ea;
}

body > .container {
    background-color: #fff;
}

header>nav {
    font-size: 2rem;
}

a, a:hover, a:visited, a:active {
    color: inherit;
    text-decoration: none;
}

h1, h2, a.nav-link {
    font-family: 'Amatic SC', cursive;
}

img {
    width: 100%;
}

.logo {
    width: auto;
    max-height: 20em;
}

/* ------ Menu ------ */

header nav ul.navbar-nav {
    justify-content: space-around;
    width: 100%;
}

header nav .logo {
    max-height: 1.4em;
}

.navbar-toggler {
    border:none;
}

.dropdown-menu {
    border-radius: 0;
}

.sticky {
    position: fixed;
    top: 0;
    right:0;
    left:0;
    background-color: white;
    z-index: 1;
    border-bottom: grey solid 2px;
    padding: 0 10%;
}

/* ----------------- */

.carousel-item {
    max-height: 350px;
}

.carousel-caption {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.4);
    padding-bottom: 0;
}

.carousel-caption h1 {
    color: white;
}

#homepage_presentation {
    padding: 5% 10%;
}

/*
margin : vertical | horizontal
margin : haut | droit | bas | gauche
*/

.my-img-card {
    padding: 2%;
    margin: 2%;
    /*background-color: #dcdcdc;*/
    background-color: #f5f4ea;
}

.my-img-card img {
    width: 40%;
    vertical-align: top;
}

.my-img-card:nth-child(even) img {
    margin: 0 4% 1% 0;
    float: left;
}

.my-img-card:nth-child(odd) img {
    margin: 0 0 1% 4%;
    float: right;
}


@media screen and (max-width: 400px) {
    .my-img-card img {
        width: 100%;
    }
}

/*
my-article
*/
.my-article {
    /*------ Parallax ------*/
    /*background-repeat: no-repeat;*/
    /*background-size: contain;*/
    /*padding-top: 30%;*/
    /*background-position: top;*/
    /*background-attachment: fixed;*/
}

.my-article h1 {
    text-align: center;
    margin : 5% auto;
    background-color: #f5f4ea;
}

.my-article .my-img-card {
    margin: 0;
    padding: 1% 3%;

}

.my-article .my-img-card p {
    font-size: large;
}

/*
    About us
 */

.about-us {
    background-color: #f5f4ea;
    padding : 5%;
}

.about-us h1 {
    text-align: center;
    margin-bottom: 5%;
}

.about-us .row {
    margin-bottom: 5%;
}

.profil-picture {
    max-width: 140px;
}

.profil-picture img {
    border-radius: 50%;
    margin-top: 1%;
}

/*
my-blog-list
*/

.button-socicon {
    text-align: center;
    font-size: 2em;
}

.button-socicon i {
    padding: 10px;
}

.button-socicon i:hover {
    color: white;
    background-color: grey;
    border-radius: 50%;
}

footer {
    text-align: center;
    padding-bottom: 3%;
    margin-bottom: 3%;
}

footer hr {
    margin: 3%;
}

footer .logo {
    width: 70%;
}

footer nav ul.nav {
    justify-content: space-around;
}

/*
CONTACT
 */

#contact-section {
    font-family: "Montserrat", "Arial Black";
    margin: 5%;
}

#contact-section h1 {
    margin-bottom: 7%;
}

.form-item {
    width: auto;
    margin: 3% 5%;
}

.form-item input, .form-item textarea {
    width: 100%;
    min-height: 40px;
    border: gray solid 1px;
    padding-left: 5px;
}

.form-item textarea {
    height: 150px;
}

#contact-section i {
    font-size: 25px;
    color: #bbb;
}

#contact-section .col {
    text-align: center;
}

#contact-section button[type="submit"] {
    background-color: white;
    border: 1px solid grey;
    width: 100%;
    cursor: pointer;
}

#modalImg .modal-dialog {
    max-width: 1000px;
    max-height: 600px;
}

.m-top-50 {
    margin-top: 50px;
}

.Aligner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Aligner-item {
    flex: 1;
}

.Aligner-item--top {
    align-self: flex-start;
}

.Aligner-item--bottom {
    align-self: flex-end;
}

.Aligner-item--fixed {
    flex: none;
    max-width: 50%;
}

.notfound-404 {
    text-align: center;
    padding: 4%;
}

.notfound-404 img {
    max-width: 30%;
}