@charset "utf-8";
h1#h1_historia {
    box-sizing: border-box;
    display: table;
    width: 100%;
    color: #76bc42;
    padding: 0;
}

h1#h1_historia span {
    display: table-cell;
    vertical-align: middle;
}

span#h1_historia_img {
    width: 22vw;
    text-align: center;
}

h1#h1_historia img {
    max-width: 20vw;
    min-width: 20vw;
}

@media screen and (min-width: 961px) {
    h1#h1_historia {
        padding-left: 15vw;
        padding-right: 15vw;
    }
}

@media screen and (min-width: 641px) and (max-width: 960px) {
    h1#h1_historia {
        padding-left: 10vw;
        padding-right: 10vw;
    }
}

@media screen and (max-width: 640px) {
    h1#h1_historia {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}

/*--------------------------nav-----------------*/

nav.listhistorias {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

@media screen and (min-width: 961px) {
    nav.listhistorias {
        width: 60VW;
    }
}

@media screen and (min-width: 641px) and (max-width: 960px) {
    nav.listhistorias {
        width: 80VW;
    }
}

@media screen and (max-width: 640px) {
    nav.listhistorias {
        width: 90VW;
    }
}

/*---------------------------annees----------------------*/

span.annee {
    display: block;
    font-family: 'roboto_slabregular', 'Arial', 'Helvetica', sans-serif;
    color: #c4c1c1;
    width: 100%;
    text-align: center;
    font-size: 3em;
}

/*---------------------------bots-------------------*/


nav.listhistorias a {
    background-color: #ffffff;
    border: 1px solid #c5c5c5;
    border-radius: 1vw;
    box-shadow: 0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.15);
    margin-bottom: 1vw;
    color: #888888;
}

nav.listhistorias a:hover {
    border: 1px solid #76bc42;
    color: #888888;
}

nav.listhistorias span.span_img {
    text-align: center;
}

nav.listhistorias h2 {
    color: #76bc42;
    margin: 0;
    font-size: 2.2em;
}

nav.listhistorias span.span_bot {
    display: inline-block;
    color: #ffffff;
    font-size: 1.2em;
    padding-left: 0.4vw;
    padding-right: 0.4vw;
    margin-top: 0.4vw;
    background-color: #76bc42;
    border: 1px solid #76bc42;
}

nav.listhistorias span.span_bot:hover {
    color: #76bc42;
    background-color: #ffffff;
}

@media screen and (min-width: 641px) {
    nav.listhistorias a {
        display: table;
    }
    nav.listhistorias span.span_img, nav.listhistorias p {
        display: table-cell;
        vertical-align: middle;
    }
    nav.listhistorias span.span_img {
        border-right: 1px solid #e0dddd;
    }
    nav.listhistorias p {
        padding-left: 2vw;
    }
}

@media screen and (min-width: 961px) {
    nav.listhistorias a {
        width: 58vw;
        padding-right: 2vw;
        padding-top: 1vw;
        padding-bottom: 1vw;
    }
    nav.listhistorias span.span_img {
        width: 20vw;
    }
    nav.listhistorias img {
        max-width: 16vw;
        max-height: 8vw;
    }
}

@media screen and (min-width: 641px) and (max-width: 960px) {
    nav.listhistorias a {
        width: 78vw;
        padding-right: 2vw;
        padding-top: 1vw;
        padding-bottom: 1vw;
    }
    nav.listhistorias span.span_img {
        width: 20vw;
    }
    nav.listhistorias img {
        max-width: 18vw;
        max-height: 9vw;
    }
}

@media screen and (max-width: 640px) {
    nav.listhistorias a {
        width: 82vw;
        display: block;
        padding-left: 4vw;
        padding-right: 4vw;
        padding-top: 1vw;
        padding-bottom: 1vw;
    }
    nav.listhistorias span.span_img {
        display: block;
        width: 100%;
        text-align: center;
    }
    nav.listhistorias img {
        max-width: 40vw;
        max-height: 40vw;
    }
}