@media screen and (max-width: 1600px) {
    #apropos .container {
        max-width: 1050px;
    }

    .rectangle span {
        right: 300px;
    }
}

@media screen and (max-width: 1440px) {
    .modal {
        width: 1100px;
    }
}

@media screen and (max-width: 1375px) {
    .container-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-left,
    .footer-left p,
    .footer-right {
        width: 100%;
        text-align: center;
    }

    .footer-right-list ul li {
        text-align: center;
    }

    .footer-right-list {
        align-items: center;
    }

    .footer-left .nav-logo {
        justify-content: center;
        margin-right: 0;
    }

    .sub-footer {
        padding-top: 40px;
    }

    .footer-right {
        margin-top: 35px;
    }

    .footer-left {
        align-items: center;
        margin-right: 0;
    }

    #apropos .container {
        max-width: 950px;
    }

    .rectangle span {
        right: 250px;
    }
}

@media screen and (max-width: 1275px) {
    .apropos-content {
        flex-direction: column;
    }

    .rectangle {
        display: none;
    }

    .apropos-content .right .right-content::before {
        display: none;
    }

    #apropos .container {
        max-width: 1050px;
        padding: 60px 60px;
        margin: 0 20px;
    }

    .apropos-content .left {
        width: 100%;
    }

    .apropos-content .right {
        width: 100%;
    }

    .gallery {
        padding-right: 0;
    }

    .apropos-content .right .right-content {
        padding-left: 0;
        padding-right: 0;
        align-items: center;
    }

    .gallery-sub-img {
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }

    .gallery-img {
        height: 400px;
    }

    .gallery-img::after {
        display: none;
    }

    .home-btn {
        margin-top: 0;
    }

    .modal {
        width: 860px;
    }

    .modal-img {
        width: 200px;
    }

    .contact-bottom {
        flex-direction: column;
    }

    .streetview {
        padding: 0;
        width: 100%;
    }

    .infos-right {
        margin-top: 50px;
        padding: 0 30px;
    }
}

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

    #slide1:checked~#controls label:nth-child(2),
    #slide2:checked~#controls label:nth-child(3),
    #slide3:checked~#controls label:nth-child(4),
    #slide4:checked~#controls label:nth-child(1),
    #slide1:checked~#controls label:nth-last-child(2),
    #slide2:checked~#controls label:nth-last-child(3),
    #slide3:checked~#controls label:nth-last-child(4),
    #slide4:checked~#controls label:nth-last-child(1) {
        margin: 0;
    }

    #slides {
        margin: 0 auto;
    }

    .modal {
        width: 700px;
    }

    .modal-top,
    .modal-bottom {
        flex-direction: column;
        padding: 30px;
    }

    .modal-img {
        width: 155px;
    }

    .modal p {
        font-size: 20px;
    }

    .contact-content {
        flex-direction: column;
    }

    .contact-info {
        margin: 20px;
    }

    .contact-bottom {
        margin-top: 40px;
    }

    .contact-content {
        margin-top: 40px;
    }

    #contact .container {
        max-width: 700px;
    }

    iframe {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .nav-list {
        display: none;
    }

    .menu-responsive {
        display: block;
    }

    .mentions h2 {
        text-align: center;
        font-size: 28px;
    }

    .mentions h3 {
        text-align: center;
        font-size: 20px;
    }

    .footer-right {
        flex-wrap: wrap;
    }

    .footer-right-list:nth-child(2),
    .footer-right-list:nth-child(3) {
        margin-top: 35px;
    }

    .footer-right-list:nth-child(1),
    .footer-right-list:nth-child(2),
    .footer-right-list:nth-child(3) {
        width: 100%;
    }

    .sub-footer p {
        text-align: center;
    }

    .titre-call-contact {
        font-size: 32px;
    }

    .modal {
        width: 500px;
    }

}

@media screen and (max-width: 600px) {
    .sub-img {
        width: 100px;
        min-width: 100px;
        height: 100px;
    }

    #apropos .container {
        max-width: 750px;
    }

    .titre-call-contact {
        font-size: 28px;
    }

    #call-contact .container {
        padding: 50px 50px;
    }

    .modal-top-left,
    .modal-bottom-left,
    .modal-top-right,
    .modal-bottom-right {
        flex-direction: column-reverse;
    }

    .modal-bottom-left,
    .modal-top-right,
    .modal-bottom-right {
        padding: 30px 30px 0 30px;
    }

    .modal-top-left p,
    .modal-bottom-left p {
        margin-right: 0;
        margin-top: 20px;
    }

    .modal-top-right p,
    .modal-bottom-right p {
        margin-left: 0;
        margin-top: 20px;
    }

    .modal-top {
        padding: 30px 30px 0 30px;
    }

    .modal-bottom {
        padding: 0 30px 30px 30px;
    }

    .modal-img {
        width: 100px;
    }

    .modal p {
        font-size: 17px;
    }

    .modal {
        width: 400px
    }
}

@media screen and (max-width: 525px) {
    .home-header h1 {
        font-size: 70px;
    }

    .home-header span {
        font-size: 14px;
    }

    .home-header span::before,
    .home-header span::after {
        display: none;
    }

    .home-header p {
        font-size: 14px;
    }

    .mentions-title h1 {
        font-size: 36px;
        text-align: center;
    }

    .mentions-btn a {
        font-size: 13px;
        padding: 14px 50px;
    }

    .mentions .container {
        padding: 0 30px;
        overflow-x: hidden;
    }

    #apropos .container {
        max-width: 450px;
        padding: 30px 25px;
    }

    .sub-img {
        width: 90px;
        min-width: 90px;
        height: 90px;
    }

    .gallery {
        height: 470px;
    }

    .gallery-img {
        height: 335px;
    }

    #services .container {
        max-width: 400px;
        width: 100%;
        padding-right: 30px;
        padding-left: 30px;
    }

    .services-item {
        height: 195px;
    }

    .services-list {
        margin-top: 35px;
    }

    .titre-call-contact {
        line-height: 32px;
    }

    #essences .container {
        max-width: 400px;
        width: 100%;
        padding-right: 30px;
        padding-left: 30px;
    }
}

@media screen and (max-width: 425px) {
    .modal p {
        font-size: 13px;
    }

    .modal {
        width: 355px;
    }

    .modal-top-left p,
    .modal-bottom-left p {
        margin-top: 15px;
    }

    .modal-top {
        padding: 30px 20px 0 20px;
    }

    .modal-bottom {
        padding: 0 20px 30px 20px;
    }

    .modal-bottom-left,
    .modal-top-right,
    .modal-bottom-right {
        padding: 20px 20px 0 20px;
    }

}

@media screen and (max-width: 400px) {
    .home-header h1 {
        font-size: 50px;
        margin-bottom: 0;
    }

    .home-header h6 {
        font-size: 12px;
        margin-bottom: 0;
    }

    #apropos .container {
        max-width: 320px;
        padding: 80px 25px;
    }

    .sub-img {
        width: 80px;
        min-width: 80px;
        height: 80px;
    }

    .gallery {
        height: 450px;
    }

    #services .container {
        max-width: 350px;
    }

    .services-item {
        height: 215px;
    }

    .titre {
        font-size: 36px;
    }

    #essences .container {
        max-width: 350px;
    }

    .essences-item img {
        width: 200px;
    }

    .essences-item::after {
        width: 200px;
        height: 269px;
    }

    .modal {
        width: 295px;
    }

    .modal-img {
        width: 55px;
    }

    #contact .container {
        max-width: 300px;
        padding: 0 22px;
    }
}

@media screen and (max-width: 1275px) and (max-height: 795px) {
    #apropos .container {
        padding: 60px 25px;
    }
}

@media screen and (min-width: 1275px) and (max-height: 795px) {
    #apropos .container {
        padding: 60px 25px 0 25px;
    }
}

@media screen and (max-height: 795px) {
    .rectangle {
        height: calc(94% + 60px);
    }

    #call-contact {
        min-height: 32vh;
    }

    .modal-img {
        width: 160px;
    }
}

@media screen and (max-height: 795px) {
    .gallery-img {
        height: 415px;
    }
}

@media screen and (max-width: 525px) and (max-height: 795px) {
    .gallery-img {
        height: 335px;
    }

    .modal-img {
        width: 50px;
    }

    .modal p {
        font-size: 12px;
    }
}

@media screen and (max-width: 600px) and (min-width: 525px) and (max-height: 795px) {
    .modal-img {
        width: 50px;
    }

    .modal p {
        font-size: 12px;
    }
}

@media screen and (max-width: 768px) and (min-width: 600px) and (max-height: 795px) {
    .modal-img {
        width: 100px;
    }

    .modal p {
        font-size: 12px;
    }
}

@media screen and (max-width: 1000px) and (min-width: 768px) and (max-height: 795px) {
    .modal-img {
        width: 110px;
    }

    .modal p {
        font-size: 14px;
    }
}

@media screen and (max-width: 1275px) and (min-width: 1000px) and (max-height: 795px) {
    .modal-img {
        width: 110px;
    }

    .modal p {
        font-size: 14px;
    }
}

@media screen and (min-width: 1275px) and (max-height: 795px) {
    .modal-img {
        width: 130px;
    }

    .modal p {
        font-size: 16px;
    }

    .modal {
        width: 1100px;
    }

    .modal-top,
    .modal-bottom {
        padding: 55px;
    }
}