@media screen and (max-width: 1300px) {

    .container
    {
        width: 100%;
        padding:0px 20px;
    }

    #metiers 
    {
        height: 350px;
    }

    #metiers .left-content 
    {
        padding-top: 40px;
        height: 350px;
        float: left;
        width: 25%;
    }

    #metiers .right-content 
    {
        margin-left: 2%;
        float: left;
        width: 73%;
    }

    #metiers .right-content .item 
    {
        height: 350px;
        width: 25%;
    }

    #missions .content
    {
        width:100%;
    }

}

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

    #presentation h1 span
    {
        font-size: 35px;
    }

    #presentation p
    {
        font-size: 18px;
        line-height: 28px;
    }
}

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

    .btn
    {
        width:135px
    }

    .container
    {
        width: 100%;
        padding:0px 20px;
    }

    #metiers
    {
        height: auto;
    }

    #metiers .left-content
    {
        float: left;
        width: 100%;
        height: auto;
    }

    #metiers .left-content h2 {
        width: 250px;
        margin: auto;
    }

    #metiers .left-content p {
        width:100%;
        text-align: center;
    }

    #metiers .left-content p br {
        display: none;
    }

    #metiers .left-content ul {
        display: none;
    }

    #metiers .right-content {
        width: 100%;
        margin-left: 0px;
        margin-top: 30px;
        float: left;
    }

    #metiers .right-content .item {
        border:0px solid #fff;
        width: 47%;
    }

    #missions .content article
    {
        width:47%;
        margin-left: 6%;
    }
    
    #missions .content article.first-of-line
    {
       margin-left: 6%;
    }

    #missions .content article.first-of-line-tablet
    {
       margin-left: 0px;
    }
}

@media screen and (max-width: 640px) {


    .btn
    {
        width:100%;
        float: left;
        margin-top:20px;
    }
    
    header
    {
        height:auto;
        padding-bottom: 20px;
    }

    .logo
    {
        width: 100%;
        float: left;
        text-align: center;
    }

    .nav-header {
        width: 100%;
    }

    .nav-header li{
        margin-left: 0px;
    }

    #presentation
    {
        padding-top:70px;
    }

    #presentation h1 span
    {
        width: 100%;
        float: left;
        text-align: center;
        padding-right: 0px;
    }

    #presentation h1 span::after
    {
        content:"";
        width: 0px;
    }

    #presentation p
    {
        font-size: 17px;
    }

    #presentation p br
    {
        display: none;
    }

    #metiers .right-content .item {
        border:0px solid #fff;
        width: 100%;
    }

    #missions .content article
    {
        width:100%;
    }

    #missions .content article,
    #missions .content article.first-of-line
    {
       margin-left: 0px;
    }
}