@media screen and (min-width: 400px) {

    /*************************************************************************
    *
    *   Componente: Credential
    *
    **************************************************************************/

    .credential {
        min-height: 730px;
    }
    .credential__image {
        max-width: 240px;
    }
}
@media screen and (min-width: 480px) {

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

    /*************************************************************************
    *
    *   Componente: Services Section
    *
    **************************************************************************/

    .services__grid:not(.services__grid--projects) {
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(2, minmax(0, 400px));
        grid-column-gap: 1rem;
    }
    .services__grid--projects {
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 0;
        grid-template-rows: repeat(3, auto);
    }

    /*************************************************************************
    *
    *   Componente: Project
    *
    **************************************************************************/

    .project:not(.project--gallery):last-child {
        grid-column-start: 1;
        grid-column-end: -1;
    }

    /*************************************************************************
    *
    *   Componente: Service
    *
    **************************************************************************/

    .service:last-child {
        grid-column: 1/3;
        max-width: calc(50% - 1rem);
        place-self: center;
    }
    /*************************************************************************
    *
    *   Componente: Credential
    *
    **************************************************************************/

    .credential__image {
        max-width: 350px;
    }
    .credential {
        min-height: 950px;
    }
}

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

    /*************************************************************************
    *
    *   Componente: Premios CLAP
    *
    **************************************************************************/

    .clap::before {
        width: 600px;
        height: 600px;
    }
    .clap__container {
        padding: 7rem 5rem;
    }
    .clap__star {
        top: -0.5rem;
        left: -4rem;
        width: 60px;
    }
    .clap__logotipo {
        width: 100px;
        margin-right: 2rem;
    }
    .clap__title {
        font-size: 1.1rem;
    }
    .clap__subtitle {
        font-size: 1.1rem;
    }


    .project-info__icon {
        display: none;
    }
    .project-info__wrapper {
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-gap: 1rem;
        margin-bottom: 4rem;
        align-items: center;
    }
    .info-graphic {
        background-color: transparent;
        padding: 0;
    }
    .info-graphic__title {
        display: none;
    }
    .project-info__graphic {
        margin: 0;
    }
    .info-graphic__list {
        margin-bottom: 4rem;
        position: relative;
    }
    .info-graphic__list:first-of-type,
    .info-graphic__list:last-of-type {
        left: -5rem;
    }
    .info-graphic__list:first-of-type {
        margin-bottom: 10rem;

        position: relative;
        top: 2rem;
    }
    .info-graphic__list-item {
        font-size: 1rem;
    }
    .project-info__wrapper .info-graphic {
        display: block;
    }

    .project-info__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .project-info__group {
        margin-bottom: 7rem;
    }
    .feature__title {
        font-size: 1rem;
    }
    .feature__description {
        font-size: .9rem;
    }
    .information__map {
        margin-bottom: 2rem;
    }
    .clauses {
        padding: 0 5rem;
    }

    /*************************************************************************
    *
    *   Componente: WhatsApp
    *
    **************************************************************************/
    .whatsapp {
        height: 50px;
        width: 50px;
        right: 2rem;
    }
    .whatsapp.sticky {
        bottom: 2rem;
    }
    .whatsapp__icon {
        font-size: 2rem;
    }

    /*************************************************************************
    *
    *   Componente: Brands (Main Menú)
    *
    **************************************************************************/

    .brands__image {
        width: 18rem;
    }
    .brands__dots {
        width: 2rem;
        height: auto;
    }

    /*************************************************************************
    *
    *   Componente: Banner
    *
    **************************************************************************/

    .no-webp .banner--about {
        background-image: url("../images/photos/banners/tablet/nosotros.jpg");
    }
    .webp .banner--about {
        background-image: url("../images/photos/banners/tablet/webp/nosotros.webp");
    }
    .no-webp .banner--habitat {
        background-image: url("../images/photos/banners/tablet/panorama-habitat.jpg");
    }
    .webp .banner--habitat {
        background-image: url("../images/photos/banners/tablet/webp/panorama-habitat.webp");
    }
    .no-webp .banner--taller-de-proyectos {
        background-image: url("../images/photos/banners/tablet/taller-de-proyectos.jpg");
    }
    .webp .banner--taller-de-proyectos {
        background-image: url("../images/photos/banners/tablet/webp/taller-de-proyectos.webp");
    }
    .no-webp .banner--panorama-capital {
        background-image: url("../images/photos/banners/tablet/panorama-capital.jpg");
    }
    .webp .banner--panorama-capital {
        background-image: url("../images/photos/banners/tablet/webp/panorama-capital.webp");
    }
    .no-webp .banner--panorama-usa {
        background-image: url("../images/photos/banners/tablet/panorama-usa.jpg");
    }
    .webp .banner--panorama-usa {
        background-image: url("../images/photos/banners/tablet/webp/panorama-usa.webp");
    }
    .no-webp .banner--panorama-inver {
        background-image: url("../images/photos/banners/tablet/panorama-inver.jpg");
    }
    .webp .banner--panorama-inver {
        background-image: url("../images/photos/banners/tablet/webp/panorama-inver.webp");
    }
    .no-webp .banner--presskit {
        background-image: url("../images/photos/banners/tablet/presskit.jpg");
    }
    .webp .banner--presskit {
        background-image: url("../images/photos/banners/tablet/webp/presskit.webp");
    }
    @media screen and (-webkit-device-pixel-ratio: 2),
            screen and (-webkit-device-pixel-ratio: 1.325),
            screen and (-webkit-device-pixel-ratio: 1.4),
            screen and (-webkit-device-pixel-ratio: 1.5),
            screen and (-webkit-device-pixel-ratio: 1.8) {
        .no-webp .banner-about {
            background-image: url("../images/photos/banners/tablet/nosotros@2x.jpg");
        }
        .webp .banner-about {
            background-image: url("../images/photos/banners/tablet/webp/nosotros@2x.webp");
        }
        .no-webp .banner--habitat {
            background-image: url("../images/photos/banners/tablet/panorama-habitat@2x.jpg");
        }
        .webp .banner--habitat {
            background-image: url("../images/photos/banners/tablet/webp/panorama-habitat@2x.webp");
        }
        .no-webp .banner--taller-de-proyectos {
            background-image: url("../images/photos/banners/tablet/taller-de-proyectos@2x.jpg");
        }
        .webp .banner--taller-de-proyectos {
            background-image: url("../images/photos/banners/tablet/webp/taller-de-proyectos@2x.webp");
        }
        .no-webp .banner--panorama-capital {
            background-image: url("../images/photos/banners/tablet/panorama-capital@2x.jpg");
        }
        .webp .banner--panorama-capital {
            background-image: url("../images/photos/banners/tablet/webp/panorama-capital@2x.webp");
        }
        .no-webp .banner--panorama-usa {
            background-image: url("../images/photos/banners/tablet/panorama-usa@2x.jpg");
        }
        .webp .banner--panorama-usa {
            background-image: url("../images/photos/banners/tablet/webp/panorama-usa@2x.webp");
        }
        .no-webp .banner--panorama-inver {
            background-image: url("../images/photos/banners/tablet/panorama-inver@2x.jpg");
        }
        .webp .banner--panorama-inver {
            background-image: url("../images/photos/banners/tablet/webp/panorama-inver@2x.webp");
        }
        .no-webp .banner--presskit {
            background-image: url("../images/photos/banners/tablet/presskit@2x.jpg");
        }
        .webp .banner--presskit {
            background-image: url("../images/photos/banners/tablet/webp/presskit@2x.webp");
        }
    }
    @media screen and (-webkit-device-pixel-ratio: 3),
            screen and (-webkit-device-pixel-ratio: 3.5),
            screen and (-webkit-device-pixel-ratio: 2.4),
            screen and (-webkit-device-pixel-ratio: 2.5),
            screen and (-webkit-device-pixel-ratio: 2.75) {
        .no-webp .banner--about {
            background-image: url("../images/photos/banners/tablet/nosotros@3x.jpg");
        }
        .webp .banner--about {
            background-image: url("../images/photos/banners/tablet/webp/nosotros@3x.webp");
        }
        .no-webp .banner--habitat {
            background-image: url("../images/photos/banners/tablet/panorama-habitat@3x.jpg");
        }
        .webp .banner--habitat {
            background-image: url("../images/photos/banners/tablet/webp/panorama-habitat@3x.webp");
        }
        .no-webp .banner--taller-de-proyectos {
            background-image: url("../images/photos/banners/tablet/taller-de-proyectos@3x.jpg");
        }
        .webp .banner--taller-de-proyectos {
            background-image: url("../images/photos/banners/tablet/webp/taller-de-proyectos@3x.webp");
        }
        .no-webp .banner--panorama-capital {
            background-image: url("../images/photos/banners/tablet/panorama-capital@3x.jpg");
        }
        .webp .banner--panorama-capital {
            background-image: url("../images/photos/banners/tablet/webp/panorama-capital@3x.webp");
        }
        .no-webp .banner--panorama-usa {
            background-image: url("../images/photos/banners/tablet/panorama-usa@3x.jpg");
        }
        .webp .banner--panorama-usa {
            background-image: url("../images/photos/banners/tablet/webp/panorama-usa@3x.webp");
        }
        .no-webp .banner--panorama-inver {
            background-image: url("../images/photos/banners/tablet/panorama-inver@3x.jpg");
        }
        .webp .banner--panorama-inver {
            background-image: url("../images/photos/banners/tablet/webp/panorama-inver@3x.webp");
        }
        .no-webp .banner--presskit {
            background-image: url("../images/photos/banners/tablet/presskit@3x.jpg");
        }
        .webp .banner--presskit {
            background-image: url("../images/photos/banners/tablet/webp/presskit@3x.webp");
        }
    }
    .banner__title {
        font-size: var(--text-banner-title-tablet);
    }
    .banner__icon {
        width: 25px;
        height: 35px;
    }

    /*************************************************************************
    *
    *   Componente: Menu
    *
    **************************************************************************/

    .menu {
        padding: 4rem 3rem;
    }
    .menu__brands-icon {
        font-size: 2rem;
    }
    .menu__brands-image {
        width: 16rem;
    }
    .menu__link {
        font-size: var(--text-menu-item-tablet);
    }
    .menu__socialmedia-link {
        font-size: var(--text-menu-item-tablet);
    }

    /*************************************************************************
    *
    *   Componente: Information
    *
    **************************************************************************/

    .information {
        padding: 7rem 3rem;
    }
    /*.information--no-padding-buttom {
        padding-bottom: 0;
    }*/
    .information__image {
        width: 270px;
    }
    .information__title {
        font-size: var(--text-title-tablet);
    }
    .information__description {
        font-size: var(--text-description-tablet);
    }
    .information__grid {
        display: grid;
        grid-template-columns: minmax(0, 0) minmax(auto, 1024px) minmax(130px, 1fr);
        grid-template-rows: 1fr;
    }
    .information__grid .information__side:first-of-type {
        padding-right: 4rem;
    }
    .information__side:last-of-type {
        justify-self: end;
    }
    .information__item {
        font-size: var(--text-title-tablet);
    }
    .information__item-description {
        font-size: var(--text-description-tablet);
    }

    /*************************************************************************
    *
    *   Componente: Navbar
    *
    **************************************************************************/

    .navbar {
        padding: .8rem 2rem;
    }
    .navbar__logotipo {
        width: 2rem;
        height: auto;
    }
    .navbar__dots {
        width: 2rem;
    }
    .navbar-menu__container {
       display: none;
    }
    .navbar-menu .menu {
        display: flex;
        height: 100%;
        position: absolute;
        top: 4rem;
        transform: translateY(0);
        background-color: transparent;
        justify-content: space-around;
    }
    .navbar-menu .menu__brands {
        display: none;
    }
    .navbar-menu .menu__close {
        visibility: hidden;
    }

    /*************************************************************************
    *
    *   Componente: Services Section
    *
    **************************************************************************/

    .services {
        padding: 5rem 0 7rem 0;
    }
    .services::after {
        width: 600px;
        height: 600px;
    }
    .services__grid:not(.services__grid--projects) {
        grid-column-gap: 2rem;
    }

    .services__title {
        font-size: var(--text-title-mobile-alternative);
    }

    .projects {
        padding: 0 0 0 0;
    }
    .projects::after {
        width: 600px;
        height: 600px;
    }

    .gallery {
        padding-bottom: 7rem;
        grid-template-rows: repeat(2, auto);
        grid-template-columns: repeat(2, auto);
    }

    /*************************************************************************
    *
    *   Componente: Service
    *
    **************************************************************************/

    .service__title {
        font-size: var(--text-title-tablet);
    }
    .service__description {
        font-size: var(--text-description-tablet);
    }

    /*************************************************************************
    *
    *   Componente: Project
    *
    **************************************************************************/
    .project__title {
        font-size: var(--text-title-tablet);
    }
    .project__description {
        font-size: var(--text-description-tablet);
    }

    /*************************************************************************
    *
    *   Componente: About
    *
    **************************************************************************/

    .about {
        padding: 7rem 3rem;
    }
    .about:nth-child(1)::before,
    .about:nth-child(4)::before,
    .about:nth-child(4)::after {
        width: 600px;
        height: 600px;
    }
    .about__grid {
        grid-template-rows: repeat(5, auto);
        /* grid-template-rows: repeat(4, auto); */
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        place-items: start center;
    }
    /* .about__item:last-child {
        grid-column-start: 1;
        grid-column-end: -1;
    } */
    .about__title {
        font-size: var(--text-title-tablet);
    }
    .about__subtitle {
        font-size: var(--text-subtitle-tablet);
    }
    .about__description {
        font-size: var(--text-description-tablet);
    }
    .about__list-item {
        font-size: var(--text-description-tablet);
    }

    /*************************************************************************
    *
    *   Componente: Project Info
    *
    **************************************************************************/

    .project-info {
        padding: 0 0 7rem 0;
    }
    .project-info__header {
        align-self: flex-end;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        max-width: 1920px;
    }
    .project-info:nth-child(1)::before,
    .project-info:nth-child(1)::after,
    .project-info:nth-child(2)::before,
    .project-info:nth-child(3)::before {
        width: 600px;
        height: 600px;
    }
    .project-info__figcaption-title {
        font-size: var(--text-title-tablet-alternative);
    }
    .project-info__figcaption-description {
        font-size: var(--text-subtitle-tablet-alternative);
    }
    .project-info__title {
        font-size: var(--text-title-tablet);
    }
    .project-info__subtitle {
        font-size: var(--text-subtitle-tablet);
    }
    .project-info__description {
        font-size: var(--text-description-tablet);
    }
    .clauses .project-info__description {
        font-size: .9rem;
    }
    .project-info__figure {
        display: block;
    }
    .project-info__figure-xl {
        padding-left: 4%;
        max-width: 1000px;
        max-height: 960px;
    }
    .project-info__video {
        padding-left: 4%;
        width: 65%;
        max-height: 960px;
        max-width: 1000px;
    }

    /*************************************************************************
    *
    *   Componente: Biography
    *
    **************************************************************************/

    .biography {
        padding: 7rem 3rem;
    }
    .biography::after,
    .biography::before {
        width: 600px;
        height: 600px;
    }
    .biography__title {
        font-size: var(--text-title-tablet);
    }
    .biography__description {
        font-size: var(--text-description-tablet);
    }
    .biography__link {
        font-size: var(--text-description-tablet);
    }

    /*************************************************************************
    *
    *   Componente: Credential
    *
    **************************************************************************/

    .credential__logotipo-mobile {
        width: 16rem;
    }
    .credential__dots {
        width: 2rem;
        height: auto;
    }
    .credential::after {
        height: 23%;
    }
    .credential__username {
        font-size: 2rem;
    }
    .credential__position {
        font-size: 1.2rem;
    }
    .credential__description {
        font-size: 1rem;
    }

    /*************************************************************************
    *
    *   Componente: Footer Section
    *
    **************************************************************************/

    .footer {
        padding: 7rem 3rem;
    }
    .footer::before {
        bottom: 5.9rem;
        font-size: 8rem;
    }
    .footer::after {
        height: 7rem;
    }
    .footer__container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .footer__section {
        width: 49%;
    }
    .footer__title {
        font-size: var(--text-title-tablet);
    }
    .footer__item {
        font-size: var(--text-description-tablet);
    }
    .footer__link {
        font-size: var(--text-description-mobile);
    }

    /*************************************************************************
    *
    *   Componente: Form
    *
    **************************************************************************/

    .form__label {
        font-size: var(--text-description-tablet);
    }
    .form__input {
        font-size: var(--text-description-tablet);
    }
    .form__input:focus + .form__label, .filled {
        font-size: .9rem;
    }

    .form__button {
        padding: .5rem 2rem;
        font-size: .8rem;
    }

    /*************************************************************************
    *
    *   Componente: Events
    *
    **************************************************************************/

    .events {
        padding: 0 0 7rem 0;
    }
    .events__header {
        max-width: 1600px;
        display: grid;
        grid-template-columns: auto 65%;
        grid-gap: 3rem;
        justify-items: end;
        align-items: center;
        margin-left: auto;
    }
    .events:nth-child(1)::before,
    .events:nth-child(1)::after,
    .events:nth-child(2)::before,
    .events:nth-child(3)::before {
        width: 600px;
        height: 600px;
    }
    .events__figcaption-title {
        font-size: var(--text-title-tablet-alternative);
    }
    .events__figcaption-description {
        font-size: var(--text-subtitle-tablet-alternative);
    }
    .events__title {
        font-size: var(--text-title-tablet);
    }
    .events__subtitle {
        font-size: var(--text-subtitle-tablet);
    }
    .events__description {
        font-size: var(--text-description-tablet);
    }
    .clauses .events__description {
        font-size: .9rem;
    }
    .events__figure {
        display: block;
    }
    .events__figure-xl {
        padding-left: 4%;
        max-width: 1000px;
        max-height: 960px;
    }
    .events__video {
        width: 100%;
        max-height: 960px;
        max-width: 1000px;
    }
    .events__image-cover {
        max-height: 960px;
        max-width: 1000px;
    }

}


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

    /*************************************************************************
    *
    *   Componente: Premios CLAP
    *
    **************************************************************************/

    .clap::before {
        width: 800px;
        height: 800px;
    }
    .clap__container {
        padding: 0 4rem 8rem 12rem;
    }
    .clap__star {
        top: -1.5rem;
        left: -8rem;
        width: 120px;
    }
    .clap__logotipo {
        width: 140px;
    }
    .clap__title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    .clap__subtitle {
        font-size: 1.5rem;
    }
    .information__image--clap {
        margin-bottom: 5rem;
    }


    .info-graphic__list-item {
        font-size: var(--text-description-desktop);
    }
    /*.feature__title {
        font-size: 1rem;
    }*/
    .feature__description {
        font-size: 1rem;
    }
    .information__map {
        margin-bottom: 7rem;
    }
    .clauses {
        padding: 0 8rem;
    }

    /*************************************************************************
    *
    *   Componente: Invalid Messages (Form)
    *
    **************************************************************************/
    .invalid-feedback {
        font-size: .9rem;
        margin-top: .4rem;
    }

    /*************************************************************************
    *
    *   Componente: Brands
    *
    **************************************************************************/

    .brands {
        margin-bottom: 3rem;
    }
    .brands__item:nth-child(2) {
        display: block;
    }
    .brands__item:last-child {
        display: none;
    }

    /*************************************************************************
    *
    *   Componente: Menu
    *
    **************************************************************************/

    .menu {
        display: block;
        flex-grow: 1;
        position: relative;
        background-color: transparent;
        padding: 0;
        text-align: left;
        transform: translateY(0);
        z-index: 1;
    }
    .menu__brands {
        display: none;
    }
    .menu__level {
        margin-left: 1rem;
    }
    .menu__link {
        color: var(--color-white);
        font-size: var(--text-menu-item-desktop);
        margin-bottom: .2rem;
        font-weight: 600;
        line-height: 1;
        position: relative;
        padding-left: 1.5rem;
    }
    .menu__link::after {
        content: "";
        display: inline-block;
        background-image: url("../images/vectors/icon-white.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        position: absolute;
        top: 45%;
        left: 0;
        transform: translateY(-45%);
        height: 12px;
        width: 12px;
    }
    .link-sublevel {
        position: static;
        font-size: var(--text-menu-item-mobile);
        padding-left: 1.3rem;
    }
    .link-sublevel::after {
        content: inherit;
    }
    .sidebar .menu__link::after {
        content: none;
    }
    .sidebar .menu__link {
        padding-left: 0;
    }
    .menu__socialmedia {
        display: none;
    }
    .banner--home::after,
    .banner--about::after,
    .banner--panorama-capital::after,
    .banner--panorama-usa::after,
    .banner--habitat::after,
    .banner--taller-de-proyectos::after,
    .banner--panorama-inver::after
    {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, transparent 25%, transparent 100%);
        z-index: 1;
    }

    /*************************************************************************
    *
    *   Componente: BANNER
    *
    **************************************************************************/

    .banner {
        min-height: 900px;
        padding: 2rem 5rem;
    }
    .no-webp .banner--about {
        background-image: url("../images/photos/banners/desktop/nosotros.jpg");
    }
    .webp .banner--about {
        background-image: url("../images/photos/banners/desktop/webp/nosotros.webp");
    }
    .no-webp .banner--habitat {
        background-image: url("../images/photos/banners/desktop/panorama-habitat.jpg");
    }
    .webp .banner--habitat {
        background-image: url("../images/photos/banners/desktop/webp/panorama-habitat.webp");
    }
    .no-webp .banner--taller-de-proyectos {
        background-image: url("../images/photos/banners/desktop/taller-de-proyectos.jpg");
    }
    .webp .banner--taller-de-proyectos {
        background-image: url("../images/photos/banners/desktop/webp/taller-de-proyectos.webp");
    }
    .no-webp .banner--panorama-capital {
        background-image: url("../images/photos/banners/desktop/panorama-capital.jpg");
    }
    .webp .banner--panorama-capital {
        background-image: url("../images/photos/banners/desktop/webp/panorama-capital.webp");
    }
    .no-webp .banner--panorama-usa {
        background-image: url("../images/photos/banners/desktop/panorama-usa.jpg");
    }
    .webp .banner--panorama-usa {
        background-image: url("../images/photos/banners/desktop/webp/panorama-usa.webp");
    }
    .no-webp .banner--panorama-inver {
        background-image: url("../images/photos/banners/desktop/panorama-inver.jpg");
    }
    .webp .banner--panorama-inver {
        background-image: url("../images/photos/banners/desktop/webp/panorama-inver.webp");
    }
    .no-webp .banner--presskit {
        background-image: url("../images/photos/banners/desktop/presskit.jpg");
    }
    .webp .banner--presskit {
        background-image: url("../images/photos/banners/desktop/webp/presskit.webp");
    }
    @media screen and (-webkit-device-pixel-ratio: 2),
            screen and (-webkit-device-pixel-ratio: 1.325),
            screen and (-webkit-device-pixel-ratio: 1.4),
            screen and (-webkit-device-pixel-ratio: 1.5),
            screen and (-webkit-device-pixel-ratio: 1.8) {
        .no-webp .banner--about {
            background-image: url("../images/photos/banners/desktop/nosotros@2x.jpg");
        }
        .webp .banner--about {
            background-image: url("../images/photos/banners/desktop/webp/nosotros@2x.webp");
        }
        .no-webp .banner--habitat {
            background-image: url("../images/photos/banners/desktop/panorama-habitat@2x.jpg");
        }
        .webp .banner--habitat {
            background-image: url("../images/photos/banners/desktop/webp/panorama-habitat@2x.webp");
        }
        .no-webp .banner--taller-de-proyectos {
            background-image: url("../images/photos/banners/desktop/taller-de-proyectos@2x.jpg");
        }
        .webp .banner--taller-de-proyectos {
            background-image: url("../images/photos/banners/desktop/webp/taller-de-proyectos@2x.webp");
        }
        .no-webp .banner--panorama-capital {
            background-image: url("../images/photos/banners/desktop/panorama-capital@2x.jpg");
        }
        .webp .banner--panorama-capital {
            background-image: url("../images/photos/banners/desktop/webp/panorama-capital@2x.webp");
        }
        .no-webp .banner--panorama-usa {
            background-image: url("../images/photos/banners/desktop/panorama-usa@2x.jpg");
        }
        .webp .banner--panorama-usa {
            background-image: url("../images/photos/banners/desktop/webp/panorama-usa@2x.webp");
        }
        .no-webp .banner--panorama-inver {
            background-image: url("../images/photos/banners/desktop/panorama-inver@2x.jpg");
        }
        .webp .banner--panorama-inver {
            background-image: url("../images/photos/banners/desktop/webp/panorama-inver@2x.webp");
        }
        .no-webp .banner--presskit {
            background-image: url("../images/photos/banners/desktop/presskit@2x.jpg");
        }
        .webp .banner--presskit {
            background-image: url("../images/photos/banners/desktop/webp/presskit@2x.webp");
        }
    }
    @media screen and (-webkit-device-pixel-ratio: 3),
            screen and (-webkit-device-pixel-ratio: 3.5),
            screen and (-webkit-device-pixel-ratio: 2.4),
            screen and (-webkit-device-pixel-ratio: 2.5),
            screen and (-webkit-device-pixel-ratio: 2.75) {
        .no-webp .banner--about {
            background-image: url("../images/photos/banners/desktop/nosotros@3x.jpg");
        }
        .webp .banner--about {
            background-image: url("../images/photos/banners/desktop/webp/nosotros@3x.webp");
        }
        .no-webp .banner--habitat {
            background-image: url("../images/photos/banners/desktop/panorama-habitat@3x.jpg");
        }
        .webp .banner--habitat {
            background-image: url("../images/photos/banners/desktop/webp/panorama-habitat@3x.webp");
        }
        .no-webp .banner--taller-de-proyectos {
            background-image: url("../images/photos/banners/desktop/taller-de-proyectos@3x.jpg");
        }
        .webp .banner--taller-de-proyectos {
            background-image: url("../images/photos/banners/desktop/webp/taller-de-proyectos@3x.webp");
        }
        .no-webp .banner--panorama-capital {
            background-image: url("../images/photos/banners/desktop/panorama-capital@3x.jpg");
        }
        .webp .banner--panorama-capital {
            background-image: url("../images/photos/banners/desktop/webp/panorama-capital@3x.webp");
        }
        .no-webp .banner--panorama-usa {
            background-image: url("../images/photos/banners/desktop/panorama-usa@3x.jpg");
        }
        .webp .banner--panorama-usa {
            background-image: url("../images/photos/banners/desktop/webp/panorama-usa@3x.webp");
        }
        .no-webp .banner--panorama-inver {
            background-image: url("../images/photos/banners/desktop/panorama-inver@3x.jpg");
        }
        .webp .banner--panorama-inver {
            background-image: url("../images/photos/banners/desktop/webp/panorama-inver@3x.webp");
        }
        .no-webp .banner--presskit {
            background-image: url("../images/photos/banners/desktop/presskit@3x.jpg");
        }
        .webp .banner--presskit {
            background-image: url("../images/photos/banners/desktop/webp/presskit@3x.webp");
        }
    }
    .banner__title {
        font-size: var(--text-banner-title-desktop);
        width: 50%;
    }
    .banner .socialmedia {
        margin: 0;
        display: block;
    }
    .banner__arrow {
        z-index: 1;
    }
    .banner__icon {
        width: 30px;
        height: 40px;
    }

    /*************************************************************************
    *
    *   Componente: Navbar
    *
    **************************************************************************/

    .navbar {
        top: 0;
        bottom: 0;
        left: -60px;
        padding: 1rem;
        width: 50px;
        flex-direction: column;
    }
    .navbar.sticky {
        left: 0;
    }
    .navbar__socialmedia {
        display: flex;
    }
    .navbar__logotipo {
        width: 30px;
    }
    .navbar__dots {
        width: 30px;
    }
    .navbar__switch {
        position: relative;
        top: -6rem;
    }

    /*************************************************************************
    *
    *   Componente: Navbar Menú
    *
    **************************************************************************/

    .navbar-menu {
        transform: translateX(-500px);
        bottom: 0;
        width: 500px;
    }
    .navbar-menu.active {
        transform: translateX(0);
    }
    .navbar-menu__container {
        margin-left: 50px;
        display: block;
    }
    .navbar-menu__item {
        margin-bottom: 1rem;
    }
    .navbar__switch:hover circle#Ellipse_14,
    .navbar__switch:hover circle#Ellipse_15,
    .navbar__switch:hover circle#Ellipse_16,
    .navbar__switch:hover circle#Ellipse_22,
    .navbar__switch:hover circle#Ellipse_24,
    .navbar__switch:hover circle#Ellipse_25
    {
        fill: var(--color-secondary);
    }
    .navbar-menu .menu {
        top: 0;
        left: 100px;
        right: 50px;
    }
    .navbar-menu .menu__level {
        margin-left: 0;
    }
    .navbar-menu .menu__link {
        font-weight: 600;
        line-height: 1.5;
    }
    .navbar-menu .menu__level .menu__link {
        font-weight: 400;
    }
    .menu__level .menu__link {
        font-weight: 600;
    }

    /*************************************************************************
    *
    *   Componente: About
    *
    **************************************************************************/

    .about {
        padding: 6rem 4rem 6rem calc(4rem + 50px);
    }
    .about:nth-child(1)::before,
    .about:nth-child(4)::before,
    .about:nth-child(4)::after {
        width: 800px;
        height: 800px;
    }
    .about__container {
        grid-template-columns: minmax(130px, 1fr) minmax(auto, 1024px) minmax(130px, 1fr);
    }
    .about__title {
        margin-bottom: 1rem;
        letter-spacing: 2px;
        font-weight: 700;
        font-size: var(--text-title-desktop-alternative);
    }
    .about__title--single {
        margin-bottom: 4rem;
    }
    .about__subtitle {
        margin-bottom: 4rem;
        letter-spacing: 2px;
        font-size: var(--text-subtitle-desktop);
    }
    .about__description {
        font-size: var(--text-description-desktop);
    }
    .about__side--content {
        padding-right: 4rem;
    }
    .about__grid {
        margin-top: 4rem;
    }
    .about__list-item {
        font-size: var(--text-description-desktop);
    }

    /*************************************************************************
    *
    *   Componente: Footer Section
    *
    **************************************************************************/

    .footer {
        padding: 5rem;
    }
    .footer::before {
        bottom: 6rem;
        font-size: 10rem;
    }
    .footer::after {
        height: 7.4rem;
    }
    .footer__section {
        width: auto;
    }
    .footer__section:last-of-type {
        margin-right: 0;
    }
    .footer__title {
        margin-bottom: 1.7rem;
        font-size: var(--text-title-tablet);
    }
    .footer__item {
        margin-bottom: 1.4rem;
        font-size: var(--text-description-tablet);
    }
    .footer__link {
        font-size: var(--text-description-tablet);
    }

    /*************************************************************************
    *
    *   Componente: Information
    *
    **************************************************************************/

    .information {
        padding: 8rem 4rem 8rem calc(4rem + 50px);
    }
    /*.information--no-padding-buttom {
        padding-bottom: 0;
    }*/
    .information--no-padding-buttom {
        padding-bottom: 0;
    }
    .information--slim {
        padding: 4rem 4rem 4rem calc(4rem + 50px);
    }
    .information__container {
        max-width: 960px;
        margin: 0 auto;
    }
    .information__container--slim {
        max-width: 100%;
    }
    .information__grid {
        grid-template-columns: minmax(130px, 1fr) minmax(auto, 1024px) minmax(130px, 1fr);
    }
    .information__grid .information__side:first-of-type {
        /*padding-left: 1.8rem;*/
    }
    .information__image {
        width: 300px;
    }
    .information__title {
        font-size: var(--text-title-desktop-alternative);
    }
    .information__title::after {
        width: 18px;
        height: 18px;
    }
    .information__description {
        font-size: var(--text-description-desktop);
    }
    .information__item {
        margin-bottom: .5rem;
        font-size: var(--text-title-desktop);
    }
    .information__item-description {
        margin-bottom: .8rem;
        font-size: var(--text-description-desktop);
    }


    /*************************************************************************
    *
    *   Componente: Team
    *
    **************************************************************************/

    .team__body {
        padding: 1.5rem 0;
    }
    .team__title {
        margin-bottom: .7rem;
    }

    /*************************************************************************
    *
    *   Componente: Services Section
    *
    **************************************************************************/

    .services {
        padding: 8rem 0 8rem 50px;
    }
    .services::after {
        width: 800px;
        height: 800px;
    }
    .services__container {
        max-width: calc(1280px + 4rem);
        margin: 0 auto;
        padding: 0 2rem;
    }
    .services__grid:not(.services__grid--projects) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 1rem;
    }
    .services__grid--projects {
        grid-template-columns: repeat(6, 1fr);
        grid-row-gap: 2rem;
        grid-template-rows: repeat(2, auto);
        grid-template-areas:
            "uno uno dos dos tres tres"
            "cuatro cuatro cuatro cinco cinco cinco";
    }
    .services__title {
        margin-bottom: 8rem ;
        font-size: var(--text-title-desktop-alternative);
    }


    .projects {
        padding: 8rem 0 8rem 50px;
    }
    .projects::after {
        width: 800px;
        height: 800px;
    }

    /*************************************************************************
    *
    *   Componente: Service
    *
    **************************************************************************/

    .service:last-child {
        grid-column: inherit;
        max-width: max-content;
        place-self: inherit;
    }
    .service__header {
        flex-grow: 1;
    }
    .service__description {
        margin-bottom: 4rem;
        flex-grow: 1;
    }

    /*************************************************************************
    *
    *   Componente: Project
    *
    **************************************************************************/

    .project:not(.project--gallery):nth-child(1) {
        grid-area: uno;
    }
    .project:not(.project--gallery):nth-child(2) {
        grid-area: dos;
    }
    .project:not(.project--gallery):nth-child(3) {
        grid-area: tres;
    }
    .project:not(.project--gallery):nth-child(4) {
        grid-area: cuatro;
    }
    .project:not(.project--gallery):nth-child(5) {
        grid-area: cinco;
    }
    .project__header {
        padding: 1rem 1rem 2rem 3rem;
        position: static;
        flex-grow: 1;
    }
    .project__title::before {
        width: 18px;
        height: 18px;
    }
    .project__image {
        height: 470px;
    }
    .project__body:before {
        background-color: rgba(0,0,0,.3);
    }

    /*************************************************************************
    *
    *   Componente: Biography
    *
    **************************************************************************/

    .biography {
        padding: 6rem 4rem 6rem calc(4rem + 50px);
    }
    .biography::after,
    .biography::before {
        width: 800px;
        height: 800px;
    }
    .biography__container {
        grid-template-columns: minmax(130px, 1fr) minmax(auto, 1024px) minmax(130px, 1fr);
    }
    .biography__side--content {
        padding: 4rem 4rem 4rem 0;
    }
    .biography__side--return {
        grid-row: inherit;
    }
    .biography__title {
        margin-bottom: 4rem;
        letter-spacing: 2px;
        font-size: var(--text-title-desktop);
    }
    .biography__description {
        font-size: var(--text-description-desktop);
    }
    .biography__link {
        font-size: var(--text-description-desktop);
        margin-bottom: 0;
    }

    /*************************************************************************
    *
    *   Componente: CREDENTIAL
    *
    **************************************************************************/

    .credential {
        min-height: 700px;
        max-height: 1080px;
        padding: 2rem 5rem 0 5rem;
    }
    .credential::before,
    .credential::after {
        height: 40%;
    }
    .credential .menu {
        display: none;
    }
    .credential__container {
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    }
    .credential__link {
        display: inline-block;
    }
    .credential__logotipo {
        display: block;
        max-width: 100%;
        height: auto;
        width: 18rem;
    }
    .credential__picture {
        width: 50%;
        height: 100%;
        justify-content: flex-end;
        padding-right: 2rem;
    }
    .credential__image {
        max-width: 100%;
        width: auto;
        margin-bottom: 0;
    }
    .credential__author {
        margin-bottom: 9rem;
        text-align: left;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .credential__username {
        font-size: 3rem;
        margin-bottom: .5rem;
    }
    .credential__position {
        font-size: 1.8rem;
    }
    .credential__description {
        margin-bottom: 4rem;
        letter-spacing: 1px;
    }
    .credential__body {
        width: 50%;
        height: 100%;
        padding-left: 2rem;
        position: relative;
    }
    .credential__navbar {
        display: none;
    }

    /*************************************************************************
    *
    *   Componente: Project Info
    *
    **************************************************************************/

    .project-info {
        padding: 8rem 0 8rem calc(8rem + 80px);
    }
    .project-info--ligth {
        padding-bottom: 0;
    }
    .project-info:nth-child(1)::before,
    .project-info:nth-child(1)::after,
    .project-info:nth-child(2)::before,
    .project-info:nth-child(3)::before {
        width: 800px;
        height: 800px;
    }
    .project-info__header {
        margin-bottom: 6rem;
    }
    .project-info__figure:first-child {
        display: block;
    }
    .project-info__body,
    .project-info__footer {
        max-width: calc(960px + 4rem);
        margin: 0 auto;
        padding: 0 4rem 0 0;
    }
    .project-info__footer {
        margin-top: 5rem;
    }
    .project-info__title {
        text-transform: uppercase;
        margin-bottom: 1rem;
        letter-spacing: 2px;
        font-weight: 500;
        font-size: var(--text-title-desktop-alternative);
    }
    .project-info__subtitle {
        margin-bottom: 4rem;
        letter-spacing: 2px;
        font-size: var(--text-subtitle-desktop);
    }
    .project-info__description {
        font-size: var(--text-description-desktop);
    }
    .project-info__button {
        padding: .8rem;
    }
    .project-info__button-icon {
        margin-right: 1rem;
        font-size: 1.2rem;
    }
    .project-info__socialmedia {
        font-size: 1.2rem;
        height: 35px;
        width: 35px;
        margin-right: 1rem;
    }

    /*************************************************************************
    *
    *   Componente: Form
    *
    **************************************************************************/

    .form {
        margin-top: 7rem;
    }
    .form__label {
        font-size: var(--text-description-desktop);
    }
    .form__group {
        margin-bottom: 4rem;
    }
    .form__input {
        padding: .8rem 0;
        font-size: var(--text-description-desktop);
    }
    .form__input:focus + .form__label, .filled {
        font-size: .9rem;
    }
    .form__button {
        padding: .8rem 2.5rem;
        font-size: 0.875rem;
    }
    .form__button:hover,
    .form__button:focus {
        color: var(--color-alternative);
        box-shadow: inset -5rem 0 0 0 var(--color-white), inset 5rem 0 0 0 var(--color-white);
    }

    /*************************************************************************
    *
    *   Componente: ARROW UP
    *
    **************************************************************************/

    .arrow-up {
        right: 2rem;
    }
    .arrow-up.sticky {
        bottom: 2rem;
    }

    .gallery {
        padding-bottom: 8rem;
    }

    /*************************************************************************
    *
    *   Componente: Events
    *
    **************************************************************************/

    .events {
        padding: 8rem 0 8rem calc(8rem + 80px);
    }
    .events--ligth {
        padding-bottom: 0;
    }
    .events:nth-child(1)::before,
    .events:nth-child(1)::after,
    .events:nth-child(2)::before,
    .events:nth-child(3)::before {
        width: 800px;
        height: 800px;
    }
    .events__header {
        margin-bottom: 6rem;
    }
    .events__figure:first-child {
        display: block;
    }
    .events__body,
    .events__footer {
        max-width: calc(960px + 4rem);
        margin: 0 auto;
        padding: 0 4rem 0 0;
    }
    .events__footer {
        margin-top: 5rem;
    }
    .events__title {
        text-transform: uppercase;
        margin-bottom: 1rem;
        letter-spacing: 2px;
        font-weight: 500;
        font-size: var(--text-title-desktop-alternative);
    }
    .events__subtitle {
        margin-bottom: 4rem;
        letter-spacing: 2px;
        font-size: var(--text-subtitle-desktop);
    }
    .events__description {
        font-size: var(--text-description-desktop);
    }
    .events__button {
        padding: .8rem;
    }
    .events__button-icon {
        margin-right: 1rem;
        font-size: 1.2rem;
    }
    .events__socialmedia {
        font-size: 1.2rem;
        height: 35px;
        width: 35px;
        margin-right: 1rem;
    }

}
@media screen and (min-width: 1260px) {

}

@media screen and (min-width: 1280px) {

    /*************************************************************************
    *
    *   Componente: Premios CLAP
    *
    **************************************************************************/

    .clap__logotipo {
        width: 160px;
    }
    .clap__title {
        font-size: 2rem;
    }
    .clap__subtitle {
        font-size: 2rem;
    }
    

    .project-info__grid {
        grid-gap: 3rem;
    }
    .feature {
        display: grid;
        grid-template-columns: 65px auto 1fr;
    }
    .feature__number {
        font-size: 4rem;
    }
    .feature__image {
        width: 100px;
        height: 100px;
    }

    /*************************************************************************
    *
    *   Componente: About
    *
    **************************************************************************/

    .about__grid {
        grid-template-columns: repeat(6, 1fr);
        /* grid-template-rows: repeat(3, auto); */
        grid-template-rows: repeat(4, auto);
        gap: 2rem;
        margin-top: 4rem;
        /* grid-template-areas:
            ". a a b b ."
            ". c c d d ."
            "e e f f g g"
            ". h h i i ."; */
        /* grid-template-areas:
            ". a a b b ."
            ". c c d d ."
            "e e f f g g"
            ". . h h . ."; */
        grid-template-areas:
            ". a a b b ."
            ". c c d d ."
            "e e f f g g"
            "h h i i j j";
    }

    .about__item:nth-child(1) {
        grid-area: a;
    }
    .about__item:nth-child(2) {
        grid-area: b;
    }
    .about__item:nth-child(3) {
        grid-area: c;
    }
    .about__item:nth-child(4) {
        grid-area: d;
    }
    .about__item:nth-child(5){
        grid-area: e;
    }
    .about__item:nth-child(6) {
        grid-area: f;
    }
    .about__item:nth-child(7) {
        grid-area: g;
    }
    .about__item:nth-child(8) {
        grid-area: h;
    }
    .about__item:nth-child(9) {
        grid-area: i;
    }
    .about__item:nth-child(10) {
        grid-area: j;
    }


    /*************************************************************************
    *
    *   Componente: Credential
    *
    **************************************************************************/

    .credential {
        min-height: 960px;
        max-height: 1180px;
    }
    .credential__description {
        /*font-size: 1.6rem;*/
        font-size: 1.45rem;
    }
    .credential__author {
        margin-bottom: 14rem;
    }
    .credential__username {
        font-size: 4.2rem;
    }
    .credential__position {
        font-size: 2.3rem;
    }

    .gallery {
        grid-template-columns: repeat(5, auto);
        grid-template-rows: 1fr;
    }
}

@media screen and (min-width: 1368px) {
    /*************************************************************************
    *
    *   Componente: Project Info
    *
    **************************************************************************/

    .project-info__figcaption {
        display: block;
        left: 2rem;
    }


    /*************************************************************************
    *
    *   Componente: Services
    *
    **************************************************************************/

    .services__grid:not(.services__grid--projects) {
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 2.5rem;
    }
    .services__grid--projects {
        grid-template-columns: repeat(5, 1fr);
        grid-column-gap: 0;
        grid-template-areas: "uno dos tres cuatro cinco";
        grid-template-rows: auto;
    }

    /*************************************************************************
    *
    *   Componente: Project
    *
    **************************************************************************/

    .project__image {
        height: 550px;
    }

    /*************************************************************************
    *
    *   Componente: Events
    *
    **************************************************************************/

    .events__figcaption {
        display: none;
        left: 2rem;
    }
}

@media screen and (min-width: 1420px) {
    /*************************************************************************
    *
    *   Componente: Footer Section
    *
    **************************************************************************/

    .footer__container {
        justify-content: flex-end;
    }
    .footer__section {
        margin-right: 8rem;
        margin-bottom: 0;
    }
}