@media screen and (max-width: 1050px) {
    #hero div:first-child {
        width: 100%;
    }

    #hero div:first-child>img:not(#rt) {
        -webkit-filter: brightness(50%);
        filter: brightness(50%);
    }

    #hero div:last-child {
        position: absolute;
        width: 100%;
        height: 60%;
        right: 0;
    }

    .call-to-action {
        color: white;
        border: solid 3px #E50815;
        background-color: #E50815;
    }

    #presentation>div>div>h3,
    #presentation>div>div>p,
    #reglementation_thermique>div>div>h3,
    #reglementation_thermique>div>div>p {
        width: 80%;
    }

    .icon_container {
        width: 10%;
    }

    #reglementation_thermique .icon_container {
        width: 15%;
    }

    .card_path>p {
        text-align: center;
        font-size: 11px;
    }

    .img_card_container img {
        height: 100%;
        max-height: 50px;
    }

    .card_path .call-to-action {
        margin-top: 10px;
        color: white;
        padding: 4px 8px;
    }

    .card_path a {
        font-size: 10px;
    }

    .card_path h3 {
        font-size: 14px;
    }

    #slider h3 {
        font-size: 25px;
    }

    .information_container {
        width: 80%;
    }

    .information_card {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .category_container {
        width: 90%;
        flex-direction: column;
    }

    .category_container .catergory_card {
        width: 50%;
    }
}

@media screen and (max-width: 700px) {
    h1 {
        font-size: 18px;
    }

    p {
        font-size: 14px;
    }

    #hero div>p,
    #hero div>h1 {
        text-align: left;
        width: 60%;
        margin: 10px;
        margin-left: 25px;
    }

    #hero div:last-child {
        height: 80%;
    }

    #hero div {
        align-items: flex-start;
    }

    .call-to-action {
        padding: 10px 20px;
        text-align: center;
        border: solid 3px #E50815;
        font-size: 14px;
        font-weight: 600;
        margin-left: 25px;
        z-index: 1;
    }

    #presentation div>h3,
    #presentation div>p,
    #reglementation_thermique div>h3,
    #reglementation_thermique div>p {
        width: 90%;
    }

    #slider h3 {
        font-size: 16px;
        width: 80%;
    }

    .icon_container {
        width: 25%;
    }

    #reglementation_thermique .icon_container {
        width: 30%;
    }

    .card_container {
        flex-direction: column;
    }

    .card {
        width: 80%;
    }

    .card_path>p {
        width: 90%;
    }

    .card_path .call-to-action {
        margin-top: 10px;
        color: white;
        padding: 5px 10px;
    }

    .card_path a {
        font-size: 11px;
    }

    .card_path h3 {
        font-size: 16px;
    }

    .category_container .catergory_card {
        width: 70%;
    }

    .category_container .catergory_card {
        height: 300px;
    }

    .category_container .catergory_card .content {
        visibility: visible;
        opacity: 1;
        margin-top: -40px;
    }

    .information_container {
        flex-direction: column;
        align-items: center;
    }

    .information_card {
        width: 80%;
    }

    .image_category_container h2 {
        display: none;
    }
}