@font-face {
    font-family: bnpp_sans_condensedlight;
    src: url('webfonts/BNP_Sans_Cond_Light/bnpp_sans_cond_light_v2-webfont.woff2') format('woff2'),
        url('webfonts/BNP_Sans_Cond_Light/bnpp_sans_cond_light_v2-webfont.woff') format('woff');
}

@font-face {
    font-family: bnpp_sansregular;
    src: url('webfonts/BNP_Sans/bnpp_sans-webfont.woff2') format('woff2'),
        url('webfonts/BNP_Sans/bnpp_sans-webfont.woff') format('woff');
}



.all-content {
    background: #DCDCDC;
    font-family: "bnpp_sansregular";
    position: relative;
    min-height: 100vh;
}

.all-content .content {
    padding: 15px;
}

.head-content {
    height: auto;
    width: 100%;
}

.head-content nav a span {
    font-size: 20px;
}


.head-content .navigation {
    height: auto;
    background-image: linear-gradient(to top, #9d9d9d, #fff) !important;
}

.head-content .navigation a img {
    height: 40px
}

.head-content .navigation span {
    font-size: 20px;
    font-weight: bold;
}


.content-maintenance {
    height: auto;
    border: 0px solid #DCDCDC;
    background-color: white;
    text-align: center;
    border-radius: 2px;
    margin: 0 auto;
    margin-top: 50px;
    padding: 88px;
    width: 100%;
}

.content-maitenance-icons .icon-center {
    font-size: 10rem;
    color: #00965e;
    margin: 40px 0 40px 0;
}

.content-maitenance-icons .icons-items {
    font-size: 3rem;
    color: #00965e;
}


.content-maintenance h2 {
    color: #00965e;
    font-size: 20px;
}

.header-gradient-content {
    width: 100%;
    background: #00965e;
    padding: 3px;
}

.footer-gradient-content {
    width: 100%;
    background: #00965e;
    padding: 3px;
    position: absolute;
    bottom: 0;
}



/*  LES MEDIAS QUERIES   */


@media screen and (min-width: 200px) and (max-width: 320px) {

    .content-maintenance {
        padding: 50px;
        margin-bottom: 50px;
    }

    .content-maintenance h2 {
        font-size: 15px
    }

    .head-content .navigation span {
        font-size: 14px;
        margin-left: 48px;
        font-weight: bold;
    }


    .content-maitenance-icons .icon-center {
        font-size: 7rem;
        color: #00965e;
        margin: 30px 0 50px 0;
    }

    .content-maitenance-icons .icons-items {
        font-size: 2rem;
        color: #00965e;
    }


    .footer-gradient-content {
        width: 100%;
        background: #00965e;
        padding: 3px;
    }

}



@media screen and (min-width: 321px) and (max-width: 413px) {

    .content-maintenance {
        padding: 61px;
        margin-bottom: 73px;
    }

    .head-content .navigation span {
        font-size: 16px;
        margin-left: 51px;
        font-weight: bold;
    }

    .content-maitenance-icons .icon-center {
        font-size: 8rem;
        color: #00965e;
        margin: 30px 0 50px 0;
    }

    .content-maitenance-icons .icons-items {
        font-size: 2rem;
        color: #00965e;
    }


    .content-maintenance h2 {
        font-size: 16px
    }

.footer-gradient-content {
    width: 100%;
    background: #00965e;
    padding: 3px;
}
}



@media screen and (min-width: 414px) and (max-width: 767px) {

    .head-content .navigation span {
        font-size: 18px;
        margin-left: 48px;
        font-weight: bold;
    }

    .content-maintenance h2 {
        font-size: 16px
    }

    .content-maintenance {
        margin-bottom: 50px;
    }

    .content-maitenance-icons .icon-center {
        font-size: 7rem;
    }

    .content-maitenance-icons .icons-items {
        font-size: 2rem;
    }

    .footer-gradient-content {
        width: 100%;
        background: #00965e;
        padding: 3px;
    }
}



@media screen and (min-width: 768px) and (max-width: 1024px) {

    .content-maintenance {
        margin-top: 180px!important;
    }


    .footer-gradient-content {
        width: 100%;
        background: #00965e;
        padding: 3px;
        position: absolute;
        bottom: 0;
    }

}