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

/*          CSS RESPONSIVE LAYOUT              */

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


/* ------------------------------------------- */
/* ---------------------------------------- */
@media(max-width: 1500px) {

    /* --------------- HEADER --------------- */

    header nav {
        right: 60px;
    }

    header nav ul li {
        margin-left: 20px;
    }

    /* --------------- HEADER IMG --------------- */

    .home-img-header #persons {
        bottom: 0;
        margin: 0;
        background-repeat: no-repeat;
        background-position: -200px bottom;
        background-size: 130%;
    }

    /* --------------- HOME --------------- */

    #illustration-asso {
        right: -50px;
    }

    #illustration-membre {
        left: -100px;
        margin-top: 0;
    }

    #illustration-jeune {
        margin-top: 540px;
    }

    .container section {
        width: 100%;
        margin: 0 auto;
    }

    .container section.agenda-container {
        width: 1200px;    
    }

    .container section.agenda-container .events-page-link {
        display: none;
    }

    .container section.agenda-container article > input[type=button] {
        width: 60%;
        margin: 0 0 0 -30%;
    }

    .container section.articles-container {
        width: 1260px;
    }

    .container section.articles-container .articles-page-link {
        display: none;
    }

    .container section.articles-container article {
        width: 1260px;
        min-height: 450px;
        max-height: 450px;
    }

    .container section.articles-container article > span {
        bottom: 50px;
    }

    .container section.asso-container .texte-container span {
        width: 55%;
    }

    .container section.membre-container {
        width: 90%; /* Default */
        width: calc(100% - 300px);
    }

    .container section.membre-container .texte-container {
        width: 50%;
        margin: 10px 0 0 0;
        padding: 0;
    }

    .container section.membre-container .texte-container + img {
        position: relative;
        max-width: 45%;
        height: 600px;
        margin: -80px auto 0 auto;
    }

    .container section.jeune-container {
        width: 90%; /* Default */
        width: calc(100% - 300px);
    }

    .container section.jeune-container .texte-container {
        width: 50%;
        margin: 10px 0 0 0;
        padding: 0;
    }

    .container section.jeune-container img:first-child {
        max-width: 45%;
        height: 600px;
        margin: 0 auto;
    }

    .container section.jeune-container .texte-container .jeune-link {
        width: 60%;
    }

    /* --------------- PAGE ASSOCIATION --------------- */

    .container section.presentation-container {
        width: 1000px;
        margin: 0 auto 50px auto;
        padding: 90px 10px 200px 50px;
    }

    .container section.presentation-container .text-block {
        top: 200px;
        width: 800px;
    }

    .container section.activites-container {
        width: 1000px;
        padding: 0 50px 200px 50px;
    }

    .container section.activites-container .text-block {
        width: 800px;
    }

    .container section.activites-container img {
        top: 400px;
    }

    .container section.materiel-container {
        width: 1000px;
        margin: 0 auto 50px auto;
        padding: 90px 10px 50px 50px;
    }

    .container section.materiel-container .text-block {
        width: 800px;
    }

    /* --------------- PAGE ARTICLES --------------- */

    .container .articles-gallery-container {
        width: 90%; /* Default */
        width: calc(100% - 100px);
    }

    /* --------------- SINGLE ARTICLE / LECON --------------- */

    .container .one-article-container article .wp-caption-text,
    .container .one-lesson-container article .wp-caption-text {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        margin: 0;
    }

    /* --------------- AGENDA --------------- */

    .container section.agenda-gallery-container {
        width: 1190px;
        margin: 0 auto 100px auto;
    }

    .container section.agenda-gallery-container article {
        width: 280px;
        height: 280px;
        margin: 0 8px 45px 8px;
    }

    /* --------------- OBSERVATION DU CIEL --------------- */

    .container section.widgets-container {
        -webkit-box-flex-wrap: wrap;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex-wrap: wrap;      /* OLD - Firefox 19- */
        -ms-flex-flex-wrap: wrap;      /* TWEENER - IE 10 */
        -webkit-flex-wrap: wrap;       /* NEW - Chrome */
        flex-wrap: wrap;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
        width: 90%;
    }

    .container section.widgets-container .ephemeris-container {
        width: 80%;
        margin: 0;
    }

    .container section.widgets-container .ephemeris-container .ephemeris-block {
        display: inline-block;
        margin: 0 50px;
    }

    .container section.widgets-container .ephemeris-container .ephemeris-block img {
        height: 100px;
    }

    .container section.widgets-container .mooncalendar {
        width: 90%;
        margin: 20px auto 0 auto;
    }

    /* --------------- ESPACE JEUNE --------------- */

    .container section.presentation-ateliers-jeunes-container .text-block {
        width: 100%;
    }

    .container section.activites-jeune-container article:nth-child(n+4) {
        display: none
    }

    .city-landscape {
        height: 1000px;
    }

    #cst_ground {
        top: 400px;
    }

    #bst_ground {
        top: 600px;
    }

    #ast_ground {
        top: 1000px;
    }

    /* --------------- PAGE CONTACT --------------- */

    .container section.contact-container {
        width: 1260px;
    }

    .container section.contact-container .membre-block {
        width: 225px;
        height: 235px;
        margin: 20px 10px;
    }

    .container section.contact-container .contact-block {
        width: 1160px;
    }

    /* --------------- ESPACE MEMBRE --------------- */

    .container .cards-gallery-container {
        width: calc(100% - 200px);
    }

    /* --------------- PAGE PARTENAIRES --------------- */

    .container section.partenaires-container a.partenaire-item {
        width: 30%; /* Default */
        width: calc(100% / 3 - 20px);
    }

    /* --------------- LOGIN PAGE --------------- */

    .container section.profile-container {
        width: 90%;
    }

    /* --------------- PAGE LECONS --------------- */

    .container .lessons-gallery-container {
        width: calc(100% - 200px);
    }

    /* --------------- FOOTER --------------- */

    footer .infos-container .devenir-membre input[type="text"],
    footer .infos-container .devenir-membre input[type="email"] {
        width: 100%;
    }

    footer .infos-container .devenir-membre input#captcha {
        width: 72%;
    }

    footer .infos-container .devenir-membre input[type="submit"] {
        width: 25%;
    }

    footer .infos-container .galerie-partenaires {
        padding: 20px;
    }

    footer .infos-container .galerie-partenaires a {
        width: 80%;
    }

}


/* ------------------------------------------- */
/* ---------------------------------------- */
@media(max-width: 1280px) {

    /* --------------- HEADER --------------- */

    header .menu-trigger {
        display: block;
        float: right;
        margin: 0 60px 0 0;
        width: 43px;
        height: 32px;
        background: url('../img/icons/rw-menu-icon.png') no-repeat center center;
        cursor: pointer;
    }

    header nav {
        display: none;
        position: fixed;
        float: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(25, 30, 75, 0.95);
        text-align: center;
        z-index: 11;
    }

    header nav.open {
        display: block;
    }

    header nav ul.rw-menu-close {
        display: block;
        position: absolute;
        top: 5%;
        left: 50%;
        width: 42px;
        height: 32px;
        margin: 0 0 0 -21px;
        background: url('../img/icons/rw-menu-close.png') no-repeat center center;
        cursor: pointer;
    }

    header nav ul.rw-menu {
        position: absolute;
        top: 50%;
        left: 50%;
        height: auto;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); 
    }

    header nav ul.rw-menu li {
        display: block;
        margin: 20px 0;
    }

    /* --------------- HEADER IMG --------------- */

    .home-img-header #persons {
        background-size: 140%;
    }

    .big-header-title.no-home {
        width: 80%;
    }

    /* --------------- HOME --------------- */

    .illustrations-container {
        display: none;
    }

    .container section.agenda-container article > input[type=button] {
        width: 60%;
        margin: 0 0 0 -30%;
        padding: 10px 0;
        font-size: 16px;
    }

    .container section.agenda-container article:hover > input[type=button] {
        bottom: -20px;
    }

    .container section.articles-container {
        width: 1180px;
    }

    .container section.articles-container article {
        width: 1180px;
        min-height: 445px;
        max-height: 445px;
    }

    .container section.membre-container .texte-container {
        width: 50%;
        margin: 10px 0 0 0;
        padding: 0;
    }

    .container section.membre-container .texte-container + img {
        position: relative;
        max-width: 45%;
        height: 500px;
        margin: -80px auto 0 auto;
    }

    .container section.jeune-container .texte-container {
        width: 50%;
        margin: 10px 0 0 0;
        padding: 0;
    }

    .container section.jeune-container img:first-child {
        max-width: 45%;
        height: 500px;
        margin: 0 auto;
    }

    .container section.jeune-container .texte-container .jeune-link {
        width: 80%;
    }

    /* --------------- ESPACE JEUNE --------------- */

    .city-landscape {
        height: 800px;
    }

    /* --------------- PAGE CONTACT --------------- */

    .container section.contact-container {
        width: 1160px;
    }

    .container section.contact-container .membre-block {
        width: 260px;
        height: 270px;
        margin: 20px 13px;
    }

    .container section.contact-container .contact-block {
        width: 1060px;
    }

    /* --------------- ESPACE MEMBRE --------------- */

    .container .cards-gallery-container {
        width: calc(100% - 100px);
    }

    /* --------------- PAGE LECONS --------------- */

    .container .lessons-gallery-container {
        width: calc(100% - 100px);
    }

    /* --------------- FOOTER --------------- */

    footer .infos-container {
        padding: 100px 0;
    }

}


/* ---------------------------------------- */
/* ---------------------------------------- */
@media(max-width: 1200px) {

    /* --------------- HEADER IMG --------------- */

    .home-img-header #persons {
        background-size: 145%;
    }

    /* --------------- HOME --------------- */

    .container section.agenda-container {
        -webkit-box-justify-content: space-around;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-justify-content: space-around;      /* OLD - Firefox 19- */
        -ms-flex-justify-content: space-around;      /* TWEENER - IE 10 */
        -webkit-justify-content: space-around;       /* NEW - Chrome */
        justify-content: space-around;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
        width: 1000px;
    }

    .container section.agenda-container article {
        width: 240px;
        height: 240px;
        margin: 0;
    }

    .container section.agenda-container article > a.event-block {
        padding: 20px;
    }

    .container section.agenda-container article > a.event-block h2 {
        margin: 30px 0;
    }

    .container section.agenda-container article > a.event-block .date-overlay span {
        font-size: 140px;
    }

    .container section.articles-container {
        width: 1000px;
    }

    .container section.articles-container article {
        width: 1000px;
        min-height: 445px;
        max-height: 445px;
    }

    .container section.asso-container {
        padding: 100px;
    }

    .container section.membre-container {
        width: 90%; /* Default */
        width: calc(100% - 200px);
    }

    .container section.membre-container .texte-container {
        width: 50%;
        margin: 10px 0 0 0;
        padding: 0;
    }

    .container section.membre-container .texte-container + img {
        position: relative;
        max-width: 45%;
        height: 400px;
        margin: -80px auto 0 auto;
    }

    .container section.jeune-container {
        width: 90%; /* Default */
        width: calc(100% - 200px);
        margin: 100px auto;
    }

    .container section.jeune-container .texte-container {
        width: 50%;
        margin: 10px 0 0 0;
        padding: 0;
    }

    .container section.jeune-container img:first-child {
        max-width: 45%;
        height: 400px;
        margin: 0 auto;
    }

    .container section.jeune-container .texte-container .jeune-link {
        width: 80%;
    }

    /* --------------- PAGE ASSOCIATION --------------- */

    .container section.presentation-container {
        width: 880px;
        margin: 0 auto 50px auto;
        padding: 90px 0 50px 0;
    }

    .container section.presentation-container img {
        left: 50%;
        max-width: 100%;
        width: 700px;
        margin: 0 0 0 -350px;
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    }

    .container section.presentation-container .text-block {
        top: 400px;
        right: 0;
        width: 880px;
    }

    .container section.activites-container {
        width: 880px;
        padding: 0 0 120px 0;
    }

    .container section.activites-container img {
        right: 50%;
        width: 700px;
        margin: -600px -350px 0 0;
    }

    .container section.activites-container .text-block {
        width: 880px;
        margin: 600px 0 0 0;
    }

    .container section.materiel-container {
        width: 880px;
        margin: 0 auto 50px auto;
        padding: 90px 0 50px 0;
    }

    .container section.materiel-container img {
        left: 50%;
        max-width: 100%;
        width: 700px;
        margin: 0 0 0 -350px;
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    }

    .container section.materiel-container .text-block {
        right: 0;
        width: 880px;
    }

    /* --------------- PAGES ARTICLES --------------- */

    .container .articles-gallery-container a {
        width: 45%;
        width: calc(100% / 2 - 40px);
    }

    /* --------------- AGENDA --------------- */

    .container section.agenda-gallery-container {
        width: 1000px;
        margin: 0 auto 100px auto;
    }

    .container section.agenda-gallery-container article {
        width: 240px;
        height: 240px;
        margin: 0 5px 40px 5px;
    }

    .container section.agenda-gallery-container article a.event-block h2 {
        margin: 20px 0;
    }

    .container section.agenda-gallery-container article a.event-block p {
        display: none;
    }

    .container section.agenda-gallery-container article > input[type=button] {
        width: 60%;
        margin: 0 0 0 -30%;
        padding: 10px 0;
        font-size: 14px;
    }

    .container section.agenda-gallery-container article:hover > input[type=button] {
        bottom: -20px;
    }

    /* --------------- OBSERVATION DU CIEL --------------- */

    .container section.widgets-container .ephemeris-container {
        width: 100%;
        margin: 0;
    }

    .container section.widgets-container .ephemeris-container .ephemeris-block {
        margin: 0 50px;
    }

    .container section.widgets-container .ephemeris-container .ephemeris-block img {
        height: 100px;
    }

    .container section.widgets-container .mooncalendar {
        width: 100%;
    }

    /* --------------- ESPACE JEUNE --------------- */

    #planete_blue {
        width: 150px;
        height: 156px;
        top: 20vh;
    }

    #planete_jaune {
        width: 113px;
        height: 111px;
        top: 60vh;
    }

    .container section.activites-jeune-container article {
        width: 240px;
        height: 220px;
        padding: 30px;
    }

    .container section.activites-jeune-container article h2 {
        margin: 20px 0;
    }

    .container section.activites-jeune-container article input {
        bottom: -30px;
        padding: 10px 0;
        font-size: 16px;
    }

    .container section.activites-jeune-container article:hover input {
        bottom: -20px;
    }

    .city-landscape {
        height: 600px;
    }

    #cst_ground {
        top: 300px;
    }

    #bst_ground {
        top: 500px;
    }

    #ast_ground {
        top: 800px;
    }

    /* --------------- PAGE CONTACT --------------- */

    .container section.contact-container {
        width: 960px;
    }

    .container section.contact-container .membre-block {
        width: 216px;
        height: 226px;
        margin: 20px 10px;
    }

    .container section.contact-container .contact-block {
        width: 860px;
    }

    /* --------------- PAGE PARTENAIRES --------------- */

    .container section.partenaires-container a.partenaire-item {
        width: 48%; /* Default */
        width: calc(100% / 2 - 20px);
    }

    /* --------------- MENTIONS LEGALES --------------- */

    .container section.mentions-container {
        width: 780px;
    }

    /* --------------- FOOTER --------------- */

    footer .infos-container {
        display: block;
    }

    footer .infos-container .galerie-partenaires,
    footer .infos-container .devenir-membre {
        width: 100%;
    }

    footer .infos-container .devenir-membre {
        margin: 0 0 50px 0;
    }

    footer .infos-container .devenir-membre input[type="text"] {
        width: 48%;
    }

    footer .infos-container .galerie-partenaires {
        margin: 50px 0 0 0;
    }

    footer .infos-container .galerie-partenaires a {
        width: 50%;
    }

}


/* ---------------------------------------- */
/* ---------------------------------------- */
@media(max-width : 1015px) {

    /* --------------- HEADER IMG --------------- */

    .home-img-header #persons {
        background-position: -150px bottom;
        background-size: 150%;
    }

    /* --------------- HOME --------------- */

    .container section.agenda-container {
        width: 890px;
    }

    .container section.agenda-container article {
        width: 210px;
        height: 210px;
    }

    .container section.agenda-container article > a.event-block h2 {
        font-size: 14px;
    }

    .container section.agenda-container article > a.event-block p {
        font-size: 12px;
    }

    .container section.agenda-container article > a.event-block .date-overlay span {
        font-size: 130px;
    }

    .container section.articles-container > h5:first-child {
        margin: 20px 0 45px 100px;
    }

    .container section.articles-container {
        width: 880px;
    }

    .container section.articles-container article {
        width: 880px;
        min-height: 445px;
        max-height: 445px;
    }

    .container section.asso-container {
        padding: 100px 100px 140px 100px;
    }

    .container section.asso-container .texte-container span {
        width: 100%;
        margin: 0 auto 40px auto;
    }

    .container section.asso-container .texte-container span button.asso-link {
        margin: 20px auto 0 auto;
    }

    /* --------------- PAGE ARTICLES --------------- */

    .container ul.art-categories-container > li {
        width: 145px;
        height: 145px;
        background-position: center 40px;
    }

    .container ul.art-categories-container > li > a {
        font-size: 14px;
        padding: 20px 5px;
    }

    .container ul.art-categories-container {
        width: 600px;
    }

    /* --------------- SINGLE ARTICLE --------------- */

    .container .one-article-container {
        width: 800px;
    }

    .container .one-article-container article iframe,
    .container .one-lesson-container article iframe {
        height: 300px;
    }

    /* --------------- AGENDA GALLERY --------------- */

    .container section.agenda-gallery-container {
        width: 890px;
        margin: 0 auto 100px auto;
    }

    .container section.agenda-gallery-container article {
        width: 280px;
        height: 280px;
        margin: 0 8px 40px 8px;
    }

    .container section.agenda-gallery-container article a.event-block p {
        display: block;
    }

    /* --------------- SINGLE EVENT --------------- */

    .container .one-event-container {
        width: 800px;
    }

    /* --------------- OBSERVATION DU CIEL --------------- */

    .container section.widgets-container .mooncalendar td {
        padding: 20px;
    }

    .container section.widgets-container .mooncalendar td span {
        bottom: 5px;
        right: 10px;
        color: rgba(0, 0, 0, 0.4);
        font-size: 14px;
    }

    /* --------------- ESPACE JEUNE --------------- */

    .container section.activites-jeune-container {
        -webkit-box-flex-wrap: wrap;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex-wrap: wrap;      /* OLD - Firefox 19- */
        -ms-flex-flex-wrap: wrap;      /* TWEENER - IE 10 */
        -webkit-flex-wrap: wrap;       /* NEW - Chrome */
        flex-wrap: wrap;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .container section.activites-jeune-container article,
    .container section.activites-jeune-container article:last-child {
        margin: 20px 10px;
    }

    .container section.card-quiz-container {
        -webkit-box-flex-wrap: wrap;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex-wrap: wrap;      /* OLD - Firefox 19- */
        -ms-flex-flex-wrap: wrap;      /* TWEENER - IE 10 */
        -webkit-flex-wrap: wrap;       /* NEW - Chrome */
        flex-wrap: wrap;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .container section.card-quiz-container a.quiz-card {
        width: 180px;
        font-size: 12px;
    }

    .city-landscape {
        height: 500px;
    }

    /* --------------- PAGE LECONS --------------- */

    .container .lessons-gallery-container > a.lesson-link {
        width: calc(100% / 2 - 40px);
    }

    /* --------------- PAGE CONTACT --------------- */

    .container section.contact-container {
        width: 880px;
    }

    .container section.contact-container .membre-block {
        width: 250px;
        height: 260px;
        margin: 20px 20px;
    }

    .container section.contact-container .contact-block {
        width: 840px;
    }

}


/* ---------------------------------------- */
/* ---------------------------------------- */
@media(max-width: 900px) {

    /* --------------- HOME --------------- */

    .home_header-background_trames,
    .background-trames  {
        width: 90%; /* Default */
        width: calc(100% - 160px);
        left: 80px;
    }

    .background-trames .trame:first-child,
    .home-header-background-trames .trame:first-child,
    .background-trames .trame:last-child,
    .home-header-background-trames .trame:last-child {
        display: none;
    }

    .container section.agenda-container {
        -webkit-box-justify-content: space-around;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-justify-content: space-around;      /* OLD - Firefox 19- */
        -ms-flex-justify-content: space-around;      /* TWEENER - IE 10 */
        -webkit-justify-content: space-around;       /* NEW - Chrome */
        justify-content: space-around;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
        width: 800px;
    }

    .container section.agenda-container .events-page-link {
        display: none;
    }

    .container section.agenda-container article {
        width: 250px;
        height: 250px;
    }

    .container section.agenda-container article:nth-child(n+4) {
        display: none;
    }

    .container section.agenda-container article > a.event-block p {
        display: block;
    }

    .container section.agenda-container article > a.event-block h2 {
        font-size: 18px;
    }

    .container section.articles-container > h5:first-child {
        margin: 20px 0 45px 100px;
    }

    .container section.articles-container {
        width: 800px;
    }

    .container section.articles-container article {
        width: 800px;
        min-height: 445px;
        max-height: 445px;
    }

    .container section.articles-container article p {
        width: 600px;
    }

    .container section.asso-container {
        -webkit-box-flex-direction: column;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex-direction: column;      /* OLD - Firefox 19- */
        -ms-flex-flex-direction: column;      /* TWEENER - IE 10 */
        -webkit-flex-direction: column;       /* NEW - Chrome */
        flex-direction: column;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
        padding: 100px 150px;
    }

    .container section.asso-container .texte-container {
        width: 100%;
        padding: 40px 0 0 0;
    }

    .container section.asso-container .texte-container span {
        width: 60%;
        margin: 0 auto 100px auto;
    }

    .container section.membre-container {
        width: 90%; /* Default */
        width: calc(100% - 200px);
    }

    .container section.membre-container .texte-container {
        width: 50%;
        margin: 10px 0 0 0;
        padding: 0;
    }

    .container section.membre-container .texte-container + img {
        position: relative;
        max-width: 45%;
        height: 400px;
        margin: -80px 0 0 0;
    }

    .container section.jeune-container {
        width: 90%; /* Default */
        width: calc(100% - 200px);
    }

    .container section.jeune-container .texte-container {
        width: 50%;
        margin: 10px 0 0 0;
        padding: 0;
    }

    .container section.jeune-container img:first-child {
        max-width: 45%;
        height: 400px;
        margin: 0;
    }

    .container section.jeune-container .texte-container .jeune-link {
        width: 80%;
    }

    /* --------------- PAGE ASSOCIATION --------------- */

    .container section.presentation-container {
        width: 800px;
        margin: 0 auto 50px auto;
        padding: 90px 0 50px 0;
    }

    .container section.presentation-container img {
        left: 50%;
        max-width: 100%;
        width: 600px;
        margin: 0 0 0 -300px;
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    }

    .container section.presentation-container .text-block {
        top: 350px;
        right: 0;
        width: 800px;
    }

    .container section.activites-container {
        width: 800px;
        padding: 0 0 100px 0;
    }

    .container section.activites-container img {
        right: 50%;
        width: 600px;
        margin: -600px -300px 0 0;
    }

    .container section.activites-container .text-block {
        width: 800px;
        margin: 600px 0 0 0;
    }

    .container section.materiel-container {
        width: 800px;
        margin: 0 auto 50px auto;
        padding: 90px 0 50px 0;
    }

    .container section.materiel-container img {
        left: 50%;
        max-width: 100%;
        width: 600px;
        margin: 0 0 0 -300px;
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    }

    .container section.materiel-container .text-block {
        right: 0;
        width: 800px;
    }

    /* --------------- AGENDA GALLERY --------------- */

    .container section.agenda-gallery-container {
        width: 800px;
        margin: 0 auto 100px auto;
    }

    .container section.agenda-gallery-container article {
        width: 255px;
        height: 255px;
        margin: 0 5px 40px 5px;
    }

    .container section.agenda-gallery-container article a.event-block h5 {
        display: none;
    }

    .container section.agenda-gallery-container article a.event-block h2 {
        margin: 30px 0;
    }

    /* --------------- OBSERVATION DU CIEL --------------- */

    .container section.obs-ciel-container {
        display: none;
    }

    .container section.obs-ciel-container .sky-gradient h3 {
        width: 80%;
    }

    /* --------------- ESPACE JEUNE --------------- */

    .city-landscape {
        height: 500px;
    }

    #cst_ground {
        top: 290px;
    }

    #bst_ground {
        top: 500px;
    }

    #ast_ground {
        top: 860px;
    }

    /* --------------- PAGE CONTACT --------------- */

    .container section.contact-container {
        width: 800px;
    }

    .container section.contact-container .membre-block {
        width: 230px;
        height: 240px;
        margin: 20px 16px;
    }

    .container section.contact-container .contact-block {
        width: 780px;
    }

}


/* ---------------------------------------- */
/* ---------------------------------------- */
@media(max-width: 815px) {

    /* --------------- HEADER IMG --------------- */

    .big-header-title.no-home {
        top: 50%;
    }

    .big-header-title h1 {
        font-size: 35px;
    }

    .home-img-header #persons {
        background-position: 20% bottom;
        background-size: 140%;
    }

    /* --------------- HOME --------------- */

    .container section.agenda-container {
        width: 580px;
        margin: -80px auto 40px auto;
    }

    .container section.agenda-container article {
        width: 30%; /* Default */
        width: calc(33.33% - 20px);
        height: 180px;
    }

    .container section.agenda-container article > a.event-block p {
        display: none;
    }

    .container section.articles-container > h5:first-child {
        display: none;
    }

    .container section.agenda-container article > a.event-block .date-overlay span {
        bottom: 50px;
        font-size: 120px;
    }

    .container section.articles-container {
        width: 590px;
    }

    .container section.articles-container article {
        width: 590px;
        min-height: 350px;
        max-height: 350px;
    }

    .container section.articles-container article h5 {
        margin: 0 0 40px 0;
    }

    .container section.articles-container article h2:after {
        margin: 15px auto 0 auto;
    }

    .container section.articles-container article:hover h2:after {
        height: 50px;
        opacity: 1;
    }

    .container section.articles-container article p {
        display: none;
    }

    .container section.articles-container article > span {
        bottom: 30px;
    }

    .container section.asso-container {
        padding: 50px 100px;
    }

    .container section.membre-container {
        -webkit-box-flex-direction: column;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex-direction: column;      /* OLD - Firefox 19- */
        -ms-flex-flex-direction: column;      /* TWEENER - IE 10 */
        -webkit-flex-direction: column;       /* NEW - Chrome */
        flex-direction: column;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
        width: 90%; /* Default */
        width: calc(100% - 200px);
    }

    .container section.membre-container .texte-container {
        -webkit-box-order: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-order: 1;      /* OLD - Firefox 19- */
        -ms-flex-order: 1;      /* TWEENER - IE 10 */
        -webkit-order: 1;       /* NEW - Chrome */
        order: 1;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
        width: 100%;
        margin: 10px 0 0 0;
        padding: 0;
    }

    .container section.membre-container .texte-container + img {
        -webkit-box-order: 0;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-order: 0;      /* OLD - Firefox 19- */
        -ms-flex-order: 0;      /* TWEENER - IE 10 */
        -webkit-order: 0;       /* NEW - Chrome */
        order: 0;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
        position: relative;
        max-width: 100%;
        height: auto;
        margin: -80px 0 0 0;
    }

    .container section.membre-container .texte-container .member-link {
        margin: 60px auto;
    }

    .container section.jeune-container {
        -webkit-box-flex-direction: column;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex-direction: column;      /* OLD - Firefox 19- */
        -ms-flex-flex-direction: column;      /* TWEENER - IE 10 */
        -webkit-flex-direction: column;       /* NEW - Chrome */
        flex-direction: column;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
        width: 90%; /* Default */
        width: calc(100% - 200px);
        margin: 20px auto 50px auto;
    }

    .container section.jeune-container img:first-child {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .container section.jeune-container .texte-container {
        width: 100%;
        margin: 10px 0 0 0;
        padding: 0;
    }

    /* --------------- PAGE ASSOCIATION --------------- */

    .container section.presentation-container {
        width: 590px;
    }

    .container section.presentation-container img {
        width: 520px;
        margin: 0 0 0 -260px;
    }

    .container section.presentation-container .text-block {
        top: 320px;
        width: 590px;
    }

    .container section.activites-container {
        width: 590px;
        padding: 0 0 100px 0;
    }

    .container section.activites-container img {
        right: 50%;
        width: 520px;
        margin: -550px -260px 0 0;
    }

    .container section.activites-container .text-block {
        width: 590px;
        margin: 700px 0 0 0;
    }

    .container section.materiel-container {
        margin: 0 auto 50px auto;
        width: 590px;
    }

    .container section.materiel-container img {
        width: 520px;
        margin: 0 0 0 -260px;
    }

    .container section.materiel-container .text-block {
        width: 590px;
    }

    /* --------------- PAGES ARTICLES --------------- */

    .container .articles-gallery-container a article {
        min-height: 440px;
    }

    .container .articles-gallery-container a article > img {
        max-height: 200px;
    }

    /* --------------- SINGLE ARTICLE --------------- */

    .big-header-title.no-home.single {
        width: 90%;
    }

    .big-header-title.no-home.single h1 {
        font-size: 40px;
    }

    .container .one-article-container {
        width: 100%;
    }

    .container .one-article-container .previous-art-block h3,
    .container .one-article-container .next-art-block h3 {
        font-size: 18px;
    }

    /* --------------- AGENDA GALLERY --------------- */

    .container section.agenda-gallery-container {
        width: 460px;
        margin: 0 auto 100px auto;
    }

    .container section.agenda-gallery-container article {
        width: 220px;
        height: 220px;
        margin: 0 5px 40px 5px;
    }

    .container section.agenda-gallery-container article a.event-block {
        padding: 40px;
    }

    .container section.agenda-gallery-container article a.event-block h5 {
        display: block;
    }

    .container section.agenda-gallery-container article a.event-block h2 {
        margin: 20px 0;
    }

    .container section.agenda-gallery-container article a.event-block p {
        display: none;
    }

    /* --------------- SINGLE ARTICLE --------------- */

    .container .one-article-container {
        margin: 0 auto 100px auto;
    }

    .container .one-article-container article iframe,
    .container .one-lesson-container article iframe {
        height: 280px;
    }

    /* --------------- SINGLE EVENT --------------- */

    .container .one-event-container {
        width: 100%;
        margin: 0 auto 100px auto;
    }

    .container .one-event-container article .event-infos .etiquette-date {
        width: 60%;
    }

    .container .one-event-container .previous-art-block h3,
    .container .one-event-container .next-art-block h3 {
        font-size: 18px;
    }

    /* --------------- PAGE QUIZ --------------- */

    .container form.quiz-container {
        min-height: 900px;
    }

    .container form.quiz-container .question-block,
    .container form.quiz-container .last-question-block {
        width: 500px;
        height: 740px;
        margin: 0 -250px 0 0;
        padding: 40px 50px;
    }

    .container form.quiz-container .question-block h3,
    .container form.quiz-container .last-question-block h3 {
        font-size: 16px;
    }

    .container form.quiz-container .last-question-block input[type='radio'] + label, 
    .container form.quiz-container .question-block input[type='radio'] + label {
        margin: 10px 0;
        font-size: 14px; 
    }

    .container form.quiz-container .last-question-block input[type="button"],
    .container form.quiz-container .last-question-block input[type="submit"],
    .container form.quiz-container .question-block input[type="button"],
    .container form.quiz-container .question-block input[type="submit"] {
        width: 180px;
        height: 40px;
        margin: 20px auto 0 auto;
        font-size: 16px;
    }

    .container .quiz-result-block {
        width: 80%;
    }

    /* --------------- OBSERVATION DU CIEL --------------- */

    .container section.widgets-container {
        margin: 40px auto;
    }

    .container section.widgets-container .mooncalendar {
        border-spacing: 0;
        font-size: 12px;
    }

    .container section.widgets-container .ephemeris-container .ephemeris-block {
        display: block;
        margin: 20px 0;
    }

    .container section.widgets-container .mooncalendar td {
        padding: 10px;
        border-radius: 0;
    }

    .container section.widgets-container .mooncalendar td > form select {
        font-size: 12px;
    }

    .container section.widgets-container .mooncalendar td > form select:first-child {
        width: auto;
    }

    .container section.widgets-container .mooncalendar td > form select:last-child {
        width: auto;
    }

    .container section.widgets-container .mooncalendar td img {
        width: 32px;
        margin: 0 auto 20px auto;
    }

    .container section.widgets-container .mooncalendar tr:nth-child(1) td:first-child {
        font-size: 14px;
    }

    .container section.widgets-container .mooncalendar tr:nth-child(2) td {
        padding: 10px;
    }

    /* --------------- ESPACE JEUNE --------------- */

    .container section.presentation-ateliers-jeunes-container .text-block p {
        font-size: 16px;
    }

    #planete_blue {
        width: 120px;
        height: 126px;
        top: 20vh;
    }

    #planete_jaune {
        width: 93px;
        height: 91px;
        top: 60vh;
    }

    .container section.activites-jeune-container article:nth-child(n+3) {
        display: none
    }

    .container section.card-quiz-container a.quiz-card {
        width: 150px;
    }

    .city-landscape {
        height: 400px;
    }  

    /* --------------- PAGE LECONS --------------- */

    .container .lessons-gallery-container > a.lesson-link {
        width: calc(100% / 2 - 10px);
    } 

    .container .lessons-gallery-container > a.lesson-link article {
        padding: 20px;
    }  

    /* --------------- PAGE CONTACT --------------- */

    .container section.contact-container {
        width: 596px;
    }

    .container section.contact-container .membre-block {
        width: 185px;
        height: 200px;
        margin: 20px 5px;
    }

    .container section.contact-container .contact-block {
        width: 586px;
    }

    .container section.contact-container .membre-block .head-block {
        height: 100px;
    }

    .container section.contact-container .membre-block .portrait {
        margin: -60px auto 10px auto;
    }

    .container section.contact-container .membre-block h2 {
        font-size: 14px;
    }

    .container section.contact-container .membre-block h3 {
        font-size: 12px;
    }

    /* --------------- PAGE PARTENAIRES --------------- */

    .container section.partenaires-container {
        width: 90%;
        padding: 20px 0;
    }

    /* --------------- MENTIONS LEGALES --------------- */

    .container section.mentions-container {
        width: 100%;
        margin: 0 auto 100px auto;
        padding: 40px 60px 100px 60px;
    }

    /* --------------- FOOTER --------------- */

    footer .infos-container .devenir-membre {
        padding: 0 20px;
    }

    footer .infos-container .devenir-membre img.plus-icon {
        display: none;
    }

    footer .infos-container {
        width: 90%; /* Default */
        width: calc(100% - 100px);
    }

    footer .infos-container .galerie-partenaires a {
        width: 70%;
    }

    footer .mentions {
        width: 90%;
        margin: 0 auto;
    }

}


/* ---------------------------------------- */
/* ---------------------------------------- */
@media(max-width: 605px) {

    /* --------------- HEADER --------------- */

    header .logo {
        margin: 0 0 0 40px;
    }

    header .menu-trigger {
        margin: 0 40px 0 0;
    }

    /* --------------- IMG HEADER --------------- */

    .home-img-header #persons {
        background-size: 200%;
    }

    /* --------------- HOME --------------- */

    .container section.agenda-container {
        width: 400px;
    }

    .container section.agenda-container article {
        width: 45%; /* Default */
        width: calc(50% - 20px);
        height: 180px;
    }

    .container section.agenda-container article:nth-child(n+3) {
        display: none;
    }

    .container section.agenda-container article a.event-block {
        padding: 30px 20px;
    }

    .container section.agenda-container article a.event-block p {
        display: none;
    }

    .container section.articles-container {
        width: 560px;
    }

    .container section.articles-container article {
        width: 550px;
        min-height: 320px;
        max-height: 320px;
    }

    .container section.articles-container article h2:after  {
        margin: 10px auto;
        height: 30px;
    }

    .container section.articles-container article:hover h2:after  {
        opacity: 1;
        height: 10px;
    }

    .container section.articles-container article h5 {
        margin: 0 0 40px 0;
    }

    .container section.articles-container article p {
        display: none;
        width: 400px;
    }

    .container section.articles-container article > span {
        width: 180px;
        margin: 0 0 0 -90px;
    }

    .container section.asso-container {
        padding: 50px 20px;
    }

    .container section.membre-container,
    .container section.jeune-container {
        width: 90%; /* Default */
        width: calc(100% - 100px);
    }

    /* --------------- PAGE ASSOCIATION --------------- */

    .container section.presentation-container {
        width: 550px;
        margin: 0 auto 50px auto;
    }

    .container section.presentation-container img {
        width: 500px;
        margin: 0 0 0 -250px;
    }

    .container section.presentation-container .text-block {
        top: 320px;
        width: 550px;
    }

    .container section.activites-container {
        width: 550px;
        padding: 0 0 100px 0;
    }

    .container section.activites-container img {
        top: 200px;
        right: 50%;
        width: 500px;
        margin: -360px -250px 0 0;
    }

    .container section.activites-container .text-block {
        width: 550px;
        margin: 700px 0 0 0;
    }

    .container a.contact-button {
        width: 90%;
    }

    .container section.materiel-container {
        width: 550px;
    }

    .container section.materiel-container img {
        width: 500px;
        margin: 0 0 0 -250px;
    }

    .container section.materiel-container .text-block {
        width: 550px;
    }

    /* --------------- PAGE ARTICLES --------------- */

    .container .articles-gallery-container {
        width: 90%; /* Default */
        width: calc(100% - 10px);
    }

    .container ul.art-categories-container {
        width: 90%;
    }

    .container ul.art-categories-container > li {
        width: 100px;
        height: 100px;
        background-position: center 20px;
    }

    .container ul.art-categories-container > li > a {
        padding: 0 0 5px 0;
        font-size: 10px;
    }

    .container .articles-gallery-container > a {
        width: 45%; /* Default */
        width: calc(100% / 2 - 10px);
    }

    .container .articles-gallery-container a article {
        min-height: 440px;
    }

    /* --------------- SINGLE ARTICLE --------------- */

    .big-header-title.no-home.single h1 {
        font-size: 24px;
    }

    .container .one-article-container article .article-infos {
        border: none;
    }

    .container .one-article-container article .article-infos .etiquette-date,
    .container .one-article-container article .article-infos .etiquette-categorie {
        display: block;
        width: 100%;
        margin: 0;
        border-right: none;
        border-bottom: 1px solid rgb(202, 202, 202);
        text-align: center;
    }

    .container .one-article-container article .article-infos .a2a_kit {
        float: left;
    }

    .container .one-article-container .previous-art-block,
    .container .one-article-container .next-art-block {
        width: 100%;
        padding: 40px;
        border-right: none;
    }

    /* --------------- SINGLE EVENT --------------- */

    .container .one-event-container article .event-infos {
        border: none;
    }

    .container .one-event-container article .event-infos .etiquette-date,
    .container .one-event-container article .event-infos .etiquette-categorie {
        display: block;
        width: 100%;
        margin: 0;
        border-right: none;
        border-bottom: 1px solid rgb(202, 202, 202);
        text-align: center;
    }

    .container .one-event-container article .event-infos .a2a_kit {
        float: left;
    }

    .container .one-event-container .previous-art-block,
    .container .one-event-container .next-art-block {
        width: 100%;
        padding: 40px;
        border-right: none;
    }

    /* --------------- ESPACE JEUNE --------------- */

    #planete_blue {
        width: 100px;
        height: 106px;
        top: 20vh;
        left: 60%;
    }

    #planete_jaune {
        width: 73px;
        height: 71px;
        top: 70vh;
    }

    #content_espace_jeune .presentation-ateliers-jeunes-container {
        width: 80%;
    }

    .city-landscape {
        height: 300px;
    }

    #ast_ground {
        top: 800px;
    }

    /* --------------- PAGE QUIZ --------------- */

    .container .quiz-result-block {
        width: 90%;
        padding: 40px;
    }

    /* --------------- PAGE LECONS --------------- */

    .container .lessons-gallery-container > a.lesson-link {
        width: 100%;
    }

    /* --------------- PAGE CONTACT --------------- */

    .container section.contact-container {
        width: 540px;
    }

    .container section.contact-container .membre-block {
        width: 220px;
        height: 230px;
        margin: 20px 23px;
    }

    .container section.contact-container .contact-block {
        width: 540px;
    }

    .container section.contact-container .membre-block .portrait {
        margin: -60px auto 15px auto;
    }

    .container section.contact-container .membre-block h2 {
        font-size: 16px;
    }

    .container section.contact-container .membre-block h3 {
        font-size: 14px;
    }

    .container section.contact-container .contact-block {
        -webkit-box-flex-direction: column;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex-direction: column;      /* OLD - Firefox 19- */
        -ms-flex-flex-direction: column;      /* TWEENER - IE 10 */
        -webkit-flex-direction: column;       /* NEW - Chrome */
        flex-direction: column;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
        width: 100%;
        height: auto;
    }

    .container section.contact-container .contact-block .text-block {
        -webkit-box-order: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-order: 1;      /* OLD - Firefox 19- */
        -ms-flex-order: 1;      /* TWEENER - IE 10 */
        -webkit-order: 1;       /* NEW - Chrome */
        order: 1;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
        width: 100%;
        padding: 20px 20px;
    }

    .container section.contact-container .contact-block .text-block h1 {
        margin: 0;
    }

    .container section.contact-container .contact-block .text-block h5 {
        margin: 20px 0 0 0;
    }

    .container section.contact-container .contact-block .map-block {
        width: 100%;
        height: 400px;
    }

    /* --------------- PAGE PARTENAIRES --------------- */

    .container section.partenaires-container a.partenaire-item {
        width: 100%;
    }

}


/* ---------------------------------------- */
/* ---------------------------------------- */
@media(max-width: 575px) {

    /* --------------- HOME --------------- */

    .container section.articles-container {
        width: 450px;
    }

    .container section.articles-container article {
        width: 450px;
        min-height: 300px;
        max-height: 300px;
    }

    .container section.articles-container article h2:after {
        display: none;
    }

    .container section.membre-container,
    .container section.jeune-container {
        width: 90%;
    }

    /* --------------- PAGE ASSOCIATION --------------- */

    .container section.presentation-container {
        width: 450px;
    }

    .container section.presentation-container img {
        width: 400px;
        margin: 0 0 0 -200px;
    }

    .container section.presentation-container .text-block {
        top: 260px;
        width: 450px;
    }

    .container section.activites-container img {
        width: 400px;
        margin: -280px -200px 0 0;
    }

    .container section.activites-container .text-block {
        left: 50%;
        width: 450px;
        margin: 700px 0 0 -225px;
    }

    .container a.contact-button {
        padding: 30px;
    }

    .container a.contact-button h2 {
        margin: 10px 0;
        font-size: 18px;
    }

    .container section.materiel-container {
        width: 450px;
        margin: 0 auto 50px auto;
    }

    .container section.materiel-container img {
        width: 400px;
        margin: 0 0 0 -200px;
    }

    .container section.materiel-container .text-block {
        width: 450px;
    }

    /* --------------- OBSERVATION DU CIEL --------------- */

    .container section.widgets-container .mooncalendar td img {
        width: 16px;
    }

    /* --------------- ESPACE JEUNE --------------- */

    .container section.activites-jeune-container article {
        width: 200px;
        height: 180px;
        padding: 20px;
    }


    .container section.activites-jeune-container article p {
        display: none;
    }

    /* --------------- PAGE QUIZ --------------- */

    .container h3.quiz-name {
        width: 90%;
    }

    .container form.quiz-container {
        min-height: 900px;
    }

    .container form.quiz-container .question-block,
    .container form.quiz-container .last-question-block {
        width: 90%;
        height: 740px;
        margin: 0 -45% 0 0;
        padding: 40px 20px;
    }

    .container form.quiz-container .last-question-block input[type='radio'] + label, 
    .container form.quiz-container .question-block input[type='radio'] + label {
        padding: 10px 0 10px 50px; 
    }

    .container .quiz-result-block a.retry-button  {
        width: 60%;
    }

    .container .quiz-result-block p {
        font-size: 14px;
    }

    .container .quiz-result-block p:first-child {
        font-size: 16px;
    }

    /* --------------- PAGE CONTACT --------------- */

    .container section.contact-container {
        width: 450px;
    }

    .container section.contact-container .membre-block {
        width: 200px;
        height: 210px;
        margin: 20px 11px;
    }

    .container section.contact-container .contact-block {
        width: 350px;
    }

    /* --------------- FOOTER --------------- */

    footer .infos-container {
        width: 90%;
    }

}


/* ---------------------------------------- */
/* ---------------------------------------- */
@media(max-width: 475px) {

    /* --------------- HEADER IMG --------------- */

    .big-header-title {
        width: 80%;
        padding: 0;
    }

    .big-header-title h2 {
        padding: 0 0 0 4px;
        font-size: 12px;
        letter-spacing: 4px;
    }

    .home-header-background-trames,
    .background-trames  {
        width: calc(100% - 80px);
        left: 40px;
    }

    .home-img-header #bg-city {
        bottom: 0;
    }

    .home-img-header #persons {
        background-size: 250%;
    }

    /* --------------- HOME --------------- */

    .container section.agenda-container {
        width: 280px;
        margin: -50px auto 40px auto;
    }

    .container section.agenda-container article {
        width: 45%; /* Default */
        width: calc(50% - 5px);
        height: 135px;
    }

    .container section.agenda-container article a.event-block {
        padding: 10px;
    }

    .container section.agenda-container article a.event-block h4 {
        font-size: 14px;
    }

    .container section.agenda-container article a.event-block h5 {
        display: none;
    }

    .container section.agenda-container article a.event-block h2 {
        font-size: 14px;
    }

    .container section.agenda-container article > input[type=button] {
        width: 70%;
        margin: 0 0 0 -35%;
        font-size: 14px;
    }

    .container section.agenda-container article:hover > input[type=button] {
        bottom: -20px;
    }

    .container section.agenda-container article > a.event-block .date-overlay span {
        right: 5px;
        font-size: 100px;
    }

    .container section.articles-container {
        width: 260px;
    }

    .container section.articles-container article {
        width: 260px;
        min-height: 200px;
        max-height: 200px;
    }

    .container section.articles-container article img {
        width: auto;
        height: 100%;
    }

    .container section.articles-container article h5 {
        margin: 0 0 20px 0;
    }

    .container section.articles-container article h4 {
        display: none;
    }

    .container section.articles-container article h2 {
        font-size: 18px;
    }

    .container section.articles-container article > span {
        bottom: 20px;
        width: 100px;
        margin: 0 0 0 -50px;
    }

    .container section.articles-container article > span > button  {
        padding: 10px;
        font-size: 10px;
    }

    .container section.asso-container .texte-container span {
        width: 100%;
    }

    .container section.membre-container .texte-container .member-link {
        width: 100%;
    }

    .container section.jeune-container .texte-container .jeune-link {
        width: 100%;
    }

    /* --------------- PAGE ASSOCIATION --------------- */

    .container section.presentation-container {
        width: 270px;
    }

    .container section.presentation-container img {
        width: 240px;
        margin: 0 0 0 -120px;
    }

    .container section.presentation-container .text-block {
        top: 200px;
        width: 270px;
        padding: 40px 20px;
    }

    .container section.presentation-container .text-block h2 {
        font-size: 20px;
    }

    .container section.activites-container {
        width: 270px;
        padding: 0 0 100px 0;
    }

    .container section.activites-container img {
        right: 50%;
        width: 240px;
        margin: -200px -120px 0 0;
    }

    .container section.activites-container .text-block {
        left: 0;
        width: 270px;
        margin: 740px 0px 0px;
        padding: 40px 20px;
    }

    .container section.activites-container .text-block h2 {
        font-size: 20px;
    }

    .container section.materiel-container {
        width: 270px;
        margin: 0 auto 50px auto;
    }

    .container section.materiel-container img {
        width: 240px;
        margin: 0 0 0 -120px;
    }

    .container section.materiel-container .text-block {
        width: 270px;
        padding: 40px 20px;
    }

    .container section.materiel-container .text-block h2 {
        font-size: 20px;
    }

    /* --------------- PAGE ARTICLES --------------- */

    .container .articles-gallery-container a {
        width: 90%; /* Default */
        width: calc(100% - 10px);
    }

    .container ul.art-categories-container {
        -webkit-box-flex-wrap: wrap;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex-wrap: wrap;      /* OLD - Firefox 19- */
        -ms-flex-flex-wrap: wrap;      /* TWEENER - IE 10 */
        -webkit-flex-wrap: wrap;       /* NEW - Chrome */
        flex-wrap: wrap;               /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .container .articles-gallery-container a article > img {
        max-height: 100%;
        max-width: 100%;
    }

    /* --------------- AGENDA GALLERY --------------- */

    .container section.agenda-gallery-container {
        width: 280px;
        margin: 0 auto 100px auto;
    }

    .container section.agenda-gallery-container article {
        display: block;
        width: 260px;
        height: 260px;
        margin: 0 8px 40px 8px;
    }

    .container section.agenda-gallery-container article a.event-block {
        padding: 30px;
    }

    .container section.agenda-gallery-container article a.event-block h2 {
        margin: 30px 0;
    }

    .container section.agenda-gallery-container article a.event-block p {
        display: block;
    }

    /* --------------- OBSERVATION DU CIEL --------------- */

    .container section.widgets-container .mooncalendar {
        font-size: 12px;
    }

    .container section.widgets-container .mooncalendar td > form select:first-child {
        width: 100%;
    }

    .container section.widgets-container .mooncalendar td > form select:last-child {
        width: 100%;
    }

    /* --------------- ESPACE JEUNE --------------- */

    #planete_blue {
        width: 90px;
        height: 96px;
    }

    #planete_jaune {
        width: 63px;
        height: 61px;
    }

    .container section.presentation-ateliers-jeunes-container .text-block h2 {
        font-size: 20px;
        text-align: left;
    }

    .container section.presentation-ateliers-jeunes-container .text-block p {
        text-align: left;
    }

    .container section.activites-jeune-container article {
        width: 130px;
        height: 130px;
        margin: 5px;
        padding: 15px;
    }

    .container section.activites-jeune-container article h4 {
        font-size: 12px;
    }

    .container section.activites-jeune-container article h5 {
        display: none;
    }

    .container section.activites-jeune-container article h2 {
        font-size: 14px;
    }

    .container section.activites-jeune-container article input {
        width: 80%;
        margin: 0 0 0 -40%;
        font-size: 14px;
    }

    .container section.activites-jeune-container article .date-overlay span {
        bottom: 40px;
        font-size: 80px;
    }

    .container section.card-quiz-container a.quiz-card {
        width: 130px;
        margin: 5px;
        padding: 10px;
    }

    .city-landscape {
        height: 100px;
    }

    #cst_ground {
        top: 250px;
    }

    #bst_ground {
        top: 450px;
    }

    #ast_ground {
        top: 700px;
    }

    /* --------------- PAGE QUIZ --------------- */

    .container .quiz-result-block a.retry-button  {
        width: 80%;
    }

    /* --------------- PAGE LECONS --------------- */

    .container .lessons-gallery-container {
        width: 90%;
    }

    /* --------------- PAGE CONTACT --------------- */

    .container section.contact-container {
        width: 260px;
    }

    .container section.contact-container .membre-block {
        width: 260px;
        height: 260px;
        margin: 20px auto;
    }

    .container section.contact-container .membre-block .head-block {
        height: 140px;
    }

    .container section.contact-container .membre-block .head-block .photo-overlay {
        width: 110%;
        height: 150px;
    }

    .container section.contact-container .contact-block {
        width: 260px;
    }

    /* --------------- ESPACE MEMBRE --------------- */

    .container .cards-gallery-container {
        width: 90%;
    }

    /* --------------- MENTIONS LEGALES --------------- */

    .container section.mentions-container {
        padding: 40px 20px 100px 20px;
    }

    /* --------------- FOOTER --------------- */

    footer .infos-container .devenir-membre form {
        display: block;
        margin: 40px 0 0 0;
    }

    footer .infos-container .devenir-membre input[type="text"],
    footer .infos-container .devenir-membre input[type="email"],
    footer .infos-container .devenir-membre input#captcha {
        width: 100%;
    }

    footer .infos-container .devenir-membre input[type="submit"] {
        display: block;
        width: 60%;
        margin: 20px auto;
    }

    footer .infos-container .galerie-partenaires a {
        width: 100%;
    }

}