@media all and (max-width: 450px) {

    html {
        font-size: 5px;
    }

    .enSavoirPlus, .enSavoirPlus2 {
        display: inline;
        font-size: 2.5rem;
        float: right;
        cursor: pointer;
    }

    .presentation p {
        max-height: 20rem;
        overflow: hidden;
    }

    .enSavoirPlus2 {
        color: #52514f;
    }

    footer {
        clear: both;
    }

    .partenaires > p {
        max-height: 10rem;
        overflow: hidden;
    }

    .partenaires > img {
        max-height: 24rem;
    }

    main > h3 {
        margin: -7.1% 0 0 60%;
    }

    .menu-deroulant > p,
    header > a {
        font-size: 2.2rem;
    }

    .sous-menu a {
        font-size: 1.5rem;
    }

    h4,
    article p {
        font-size: 2.5rem;
    }

    main h3 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 4rem;
    }

    h1 {
        font-size: 2.5rem;
    }

    .presentation h2,
    .conceptions > h2,
    .engagements > h2,
    .partenaires > h2,
    footer > h4 {
        text-align: center;
        margin-bottom: 5%;
    }

    .engagements h4 {
        margin-bottom: 1rem;
    }

    .engagements > ul {
        display: inline-block;
    }

    .engagements > ul > li {
        width: 100%;
        display: inline-block;
    }

    .engagements > ul > li > img {
        width: 25%;
        padding: 0;
    }

    .presentation {
        display: block;
    }

    .partenaires > h4 {
        text-align: center;
        font-size: 3rem;
    }

    footer a {
        font-size: 2rem;
    }

    footer > h4 {
        font-size: 2rem;
    }

    .partenaires > img {
        display: block;
        margin: auto;
    }

    .partenaires {
        display: block;
    }

    .fleche {
        display: none;
    }

    footer h2 {
        font-size: 2.5rem;
    }

    footer a:first-child img {
        width: 5rem;
    }

    .gallery {
        margin: auto;
        display: inline-block;
    }

    .gallery > li {
        text-align: center;
    }

    .imageGallery {
        max-height: 100%;
        max-width: 100%;
        margin-top: 2rem;
    }

}

@media all and (min-width: 451px) and (max-width: 520px) {

    html {
        font-size: 5px;
    }

    .enSavoirPlus, .enSavoirPlus2 {
        display: inline;
        font-size: 2.5rem;
        float: right;
        cursor: pointer;
    }

    .presentation p {
        max-height: 20rem;
        overflow: hidden;
    }

    .enSavoirPlus2 {
        color: #52514f;
    }

    footer {
        clear: both;
    }

    .partenaires > p {
        max-height: 10rem;
        overflow: hidden;
    }

    .partenaires > img {
        max-height: 24rem;
    }

    main > h3 {
        margin: -7.1% 0 0 60%;
    }

    .menu-deroulant > p,
    header > a {
        font-size: 2.2rem;
    }

    .sous-menu a {
        font-size: 1.5rem;
    }

    h4,
    article p {
        font-size: 2.5rem;
    }

    main h3 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 4rem;
    }

    h1 {
        font-size: 2.5rem;
    }

    .presentation h2,
    .conceptions > h2,
    .engagements > h2,
    .partenaires > h2,
    footer > h4 {
        text-align: center;
        margin-bottom: 5%;
    }

    .engagements h4 {
        margin-bottom: 1rem;
    }

    .engagements > ul {
        display: inline-block;
    }

    .engagements > ul > li {
        width: 49%;
        display: inline-block;
    }

    .engagements > ul > li > img {
        width: 25%;
        padding: 0;
    }

    .presentation {
        display: block;
    }

    .partenaires > h4 {
        text-align: center;
        font-size: 3rem;
    }

    footer a {
        font-size: 2rem;
    }

    footer > h4 {
        font-size: 2rem;
    }

    .partenaires > img {
        display: block;
        margin: auto;
    }

    .partenaires {
        display: block;
    }

    .fleche {
        display: none;
    }

    footer h2 {
        font-size: 2.5rem;
    }

    footer a:first-child img {
        width: 5rem;
    }

    .gallery {
        margin: auto;
        display: inline-block;
    }

    .gallery > li {
        text-align: center;
    }

    .imageGallery {
        max-height: 100%;
        max-width: 100%;
        margin-top: 2rem;
    }

}

@media all and (min-width: 521px) and (max-width: 576px) {

    html {
        font-size: 5px;
    }

    .enSavoirPlus, .enSavoirPlus2 {
        display: inline;
        font-size: 2.5rem;
        float: right;
        cursor: pointer;
    }

    .presentation p {
        max-height: 20rem;
        overflow: hidden;
    }

    .enSavoirPlus2 {
        color: #52514f;
    }

    .partenaires > p {
        max-height: 10rem;
        overflow: hidden;
    }

    footer {
        clear: both;
    }

    .partenaires > img {
        max-height: 24rem;
    }

    main > h3 {
        margin: -6.1% 0 0 60%;
    }

    .menu-deroulant > p,
    header > a {
        font-size: 3rem;
    }

    .sous-menu a {
        font-size: 2.4rem;
    }

    h4,
    article p {
        font-size: 2.5rem;
    }

    main h3 {
        font-size: 3.6rem;
    }

    h2 {
        font-size: 4rem;
    }

    h1 {
        font-size: 4.5rem;
    }

    .presentation h2,
    .conceptions > h2,
    .engagements > h2,
    .partenaires > h2,
    footer > h4 {
        text-align: center;
        margin-bottom: 5%;
    }

    .presentation {
        display: block;
    }

    .partenaires > h4 {
        text-align: center;
    }

    footer a {
        font-size: 3rem;
    }

    footer > h4 {
        font-size: 3rem;
    }

    .partenaires > img {
        display: block;
        margin: auto;
    }

    .partenaires {
        display: block;
    }

    footer a:first-child img {
        width: 6rem;
    }

}

@media all and (min-width: 577px) and (max-width: 768px) {

    html {
        font-size: 7px;
    }

    .partenaires > img {
        max-height: 24rem;
    }

    main > h3 {
        margin: -4.6% 0 0 60%;
    }

}

@media all and (min-width: 769px) and (max-width: 992px) {

    html {
        font-size: 8px;
    }

    .partenaires > img {
        max-height: 24rem;
    }

    main > h3 {
        margin: -4% 0 0 60%;
    }

}

@media all and (min-width: 993px) and (max-width: 1200px) {

    html {
        font-size: 9px;
    }

    .partenaires > img {
        max-height: 24rem;
    }

    main > h3 {
        margin: -3.8% 0 0 60%;
    }

}

@media all and (min-width: 1201px) and (max-width: 1440px) {

    html {
        font-size: 10px;
    }

    .partenaires > img {
        max-height: 34rem;
    }

    main > h3 {
        margin: -3.4% 0 0 60%;
    }

}