#titre-taxo{
    height: 300px;
    background: url(https://intranet.penet-plastiques.fr/wp-content/themes/themepenet/images/bibliotheque.jpg) center center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    margin-bottom: -100px;
}

#titre-taxo h1{
    position: absolute;
    top: 40%;
    left: 25%;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    color: white;
    font-size: 40px;
    text-shadow: 3px 3px 3px black;
}


.encrage{
    color: #f1f1f1;
}

.container-documents{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 25px;
    width: 95%;
    margin: auto;
}

.container-documents h2{
    font-size: 22px;
    font-weight: bold;
    color: #007CC3;
    text-transform: uppercase;
    margin-top: 125px;
    padding: 5px;
}

.groupe-documents{
    margin-bottom: -125px;
}

.liste-procedures{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 25px;
}

.groupe-procedures{
    grid-column: 1 / 5;
} 

.documents h3{ 
    font-size: 18px;
    font-weight: bold;
}

.container-documents h3{
   margin-bottom: 0px;
}

.container-documents h4{
   color: #393;
   font-size: 21px;
}

.container-documents p{
   margin-bottom: 30px;
}

.documents p, .documents h3{
   display: block;
}

.imagetaxo{
    position: relative ;
    width: 100% ;
    overflow: hidden ;
    height: 300px ;
}

#h2-procedures{
    background-color: #393;
    color: white;
}

#h2-securite{
    background-color: #a60000;
    color: white;
}

#h2-note-service{
    background-color: #09c;
    color: white;
}

#h2-com-externe{
    background-color: yellow;
    color: black;
}

#h2-integration{
    background-color: #727272;
    color: white;
}

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

    .container-documents{
        grid-template-columns: 1fr 1fr 1fr;
    }

    .groupe-procedures{
        grid-column: 1 / 4;
    } 

    .liste-procedures{
        grid-template-columns: 1fr 1fr 1fr;
    }

    #titre-taxo{
        height: 250px;
    }

}

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

    .container-documents{
        grid-template-columns: 1fr 1fr;
    }

    .groupe-procedures{
        grid-column: 1 / 3;
    } 

    .liste-procedures{
        grid-template-columns: 1fr 1fr;
    }

    #titre-taxo{
        height: 200px;
    }


}


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

    #titre-taxo h1{
        font-size: 28px;
    }

}

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

    #titre-taxo{
        height: 150px;
    }

    #titre-taxo h1{
        font-size: 25px;
    }

    .container-documents{
        grid-template-columns: 1fr;
    }

    .groupe-procedures{
        grid-column: 1 / 2;
    } 

    .liste-procedures{
        grid-template-columns: 1fr;
    }

}