.intro h1 {
    line-height: 75%;
}

.mosaico, .cosmetics {
    overflow: hidden;
}

.txt li {
    font-family: neue;
}

.work p {
    margin-top: 1rem;
}
.faqs .gridC {
     
      
        grid-template-rows: repeat(auto-fit, minmax(auto, 40vh) minmax(auto, 40vh)minmax(auto, 40vh));

    }


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

    .icon-menu {
        display: block;
    }

    .bi-list {
        color: #000 !important;
    }

    header {
        align-items: flex-start;
    }

    header img {
        padding-right: 1rem;
    }

    .nav.responsive {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav.responsive div {
        display: flex;
        flex-direction: column;
    }

    .nav div {
        display: none;
    }

    section {
        width: 95vw;
        overflow-x: hidden;
    }

    .mosaico {
        padding: 0 0.75rem;
    }

    #filtro {
        display: flex;
        justify-content: flex-start;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .filtro {
        width: max-content;
        border-radius: 1000px;
        border: 2px solid var(--turquesa);
        padding: 0.5rem 2rem;
    }

    .cards {
        display: grid;
        min-height: auto;
        margin-top: 0.75rem;
        grid-template-areas: ". . "
            " . Area"
            " . Area";
        grid-template-columns: minmax(100px, 50vw) repeat(auto-fit, minmax(100px, 50vw));
        grid-template-rows: repeat(auto-fit, minmax(auto, 30vh) minmax(auto, 30vh)minmax(auto, 30vh)minmax(auto, 30vh)minmax(auto, 30vh)minmax(auto, 30vh)minmax(auto, 30vh));
        gap: 0.75rem;
        max-width: 98%;
    }

    .banner-4,
    .title-4 {
        grid-column: span 2;
    }



    .title-2,
    .title-3,
    .img-1,
    .img-2-1 {
        grid-column: auto;
    }


    .title {

        font-size: 2.5rem;

    }

    .txt-2 {
        grid-column: auto;
        grid-row: span 2;
    }

    .title-3,
    .txt-1-2,
    .txt-2-2,
    .quote-1,
    .img-2,
    .video-1-2,
    .video-2 {
        grid-column: auto;

    }

    .img-1-2 {
        grid-row: 1;
    }

    .modal-content {
        border-radius: 16px;
        font-size: 1.25rem;
        margin: 0;
        padding: 1.5rem;
        width: 90vw;
        position: absolute;
        right: 0.5rem;
        transform: translate(0, 50%);
    }

    .hover-img, .mosaico {
        overflow-y: hidden;
        width: 100% !important;
    }
.cosmetics{
    overflow: hidden;
}
    #animation {
        height: 80%;
    }
}

@media screen and (max-width:670px) {
	footer a[href*="es/nutraceutical"] {
	font-size:0.9rem;
	}
    .intro h1 {
        font-size: 3.5rem;
        line-height: 3.5rem;
    }
.mosaico h4, .h4 {
		font-size: 5.5rem;}
    .intro span {
        font-size: 3rem !important;
    }

    .cards {
        width: 100%;
        display: grid;
        min-height: auto;
        margin-top: 0.75rem;
        grid-template-areas: "."
            "."
            ".";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 0.75rem;
    }

    .banner-4,
    .title-4 {
        grid-column: auto;
    }

    .modal-content {
        border-radius: 16px;
        font-size: 1.25rem;
        margin: 0;
        padding: 1.5rem;
        width: 85%;
        position: absolute;
        transform: translate(0, 0);
        right: 0.5rem;
        top: 2rem;
    }

    .txt-2,
    .txt-1-2,
    .txt-2-2,
    .video-2,
    .video-1-2 {
        grid-column: auto;
        grid-row: auto;
    }

    .hover-img h2 {

        padding: 1rem !important;
        font-size: 3.5rem;
    }


    .mosaico {
        padding: 0 0.5rem;
        width: 96vw !important;
    }

    .infoC .txt-info {
        width: 100%;
    }

    .up-info {
        padding: 0;
        padding-bottom: 5rem;
    }

    #next,
    #previous {
        z-index: 10000;
        padding: 0;
    }

    #animation {
        min-width: 50%;
        height: 50%;
    }

    .title h3 {
        padding: 1rem;
    }

/*    footer {
        padding: 0;
    }*/

}

@media screen and (max-width:495px) {
    .nav.responsive .enlace-nav:nth-child(4) {
        height: 2rem;
    }
}