.proyecto-hero {
    height: 80vh;
    color: #fff
}

.proyecto-hero-img {
    width: 100%;
    height: auto;
    overflow: hidden
}

.proyecto-hero-img img {
    width: 100%;
    max-height: 100%;
    object-fit: contain
}

.proyecto-features {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(6, 1fr);
    box-shadow: 0 0 5px 5px #e9e9e93c
}

.proyecto-features>.flex-row-g1 {
    flex-wrap: wrap
}

.caseSwiper {
    width: 100%;
    height: 100%;
    overflow: clip
}

.case-swiper-slide {
    position: relative;
    text-align: center;
    font-size: 18px;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

.case-swiper-slide-tag {
    position: absolute;
    bottom: 5%;
    left: 5%;
    padding: .7rem 2rem;
    background-color: var(--accent);
    border-radius: 5px;
    color: #fff
}

.percentage,
.stages>div {
    background-color: #f3f3f3
}

.case-swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.stage {
    gap: 1rem;
    grid-column: span 10;
    justify-content: center
}

.percentage {
    border-radius: 5000px;
    height: 50px;
    position: relative
}

.percentage-color,
.project-tag {
    background-color: var(--accent)
}

#first,
#second,
#third,
.percentage {
    border: 1px solid #efa8656b
}

.percentage-color {
    position: absolute;
    border-radius: 5000px;
    top: 0;
    left: 0;
    height: 100%
}

.stages-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem
}

.stage-img {
    grid-column: span 2;
    border: 1px solid var(--accent)
}

.project-img img,
.stage-img img {
    width: 100%;
    height: 100%
}

.stages>div {
    display: grid;
    place-items: center;
    height: 50px
}

#first {
    border-top-left-radius: 5000px;
    border-bottom-left-radius: 5000px
}

#third {
    border-top-right-radius: 5000px;
    border-bottom-right-radius: 5000px
}

.project-img {
    width: 100%;
    height: 100%;
    position: relative
}

.project-tag {
    position: absolute;
    padding: .5em 1em;
    color: #fff;
    border-radius: 5px;
    top: 2rem
}

.project-description {
    box-shadow: 0 4px 15px -4px #00000052;
    padding: 2rem
}

.project-description strong {
    align-self: center;
    font-size: 2rem
}

.project-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-block: 1rem;
    border-top: 1px solid #00000040;
    border-bottom: 1px solid #00000040
}

.project-feature {
    align-items: center
}

.mapa {
    transform: scale(1);
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    transform-origin: right top;
    z-index: 0
}

.mapa-mobile {
    display: none
}

.office-hours-home {
    margin-left: 4rem
}

.cercanias {
    gap: 2rem;
    grid-template-columns: 2fr 1fr
}

#dormitorios,
#proyecto {
    color: #717171
}

.hero-slide-img-mobile {
    display: none !important
}

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

    .botones-ubicacion,
    .cercanias,
    .header-btn,
    .proyecto-hero {
        grid-template-columns: 1fr
    }

    .proyecto-hero {
        place-items: center
    }

    .mapa {
        transform: scale(.8)
    }

    .mapa-mobile {
        display: block
    }

    .awards-container,
    .header-btn .btn--secondary,
    .proyecto-hero .proyecto-hero-img,
    .sperant {
        display: none
    }

    .btn-effect {
        position: static
    }

    .awards-mobile {
        display: initial
    }

    .home-projects-list {
        grid-template-columns: 1fr 1fr
    }

    .project-logo-container {
        width: 70%
    }
}

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

    .home-projects-list,
    .single-postt {
        grid-template-columns: 1fr
    }

    .hero-slide-img-mobile {
        display: initial !important
    }

    .gtranslate_wrapper,
    .hero-slide-img-desktop {
        display: none !important
    }

    .offset-menu {
        width: 100vw !important
    }

    .offset-menu .header-menu ul li a {
        font-size: 1rem
    }

    .project-logo-container {
        width: 95%
    }

    .proyecto-features {
        grid-template-columns: repeat(3, 1fr)
    }

    .mapa {
        transform: scale(.4);
        z-index: 0
    }

    .header-btn .btn {
        padding: .5em 1em
    }
}

@media screen and (max-width:470px) {
    .proyecto-features {
        grid-template-columns: repeat(2, 1fr)
    }
}

.contact-page,
.proyecto-contacto {
    gap: 3rem
}

.nosotros-grid-projects {
    grid-template-columns: repeat(6, 1fr);
    transform: scale(1.1)
}

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

    .swiper-button-next,
    .swiper-button-prev {
        display: none !important
    }

    .mapa {
        transform: scale(.6)
    }

    #atenciongrid,
    .caracteristicas-proyecto,
    .contact-page,
    .fieldset-libro,
    .footer,
    .ofertas-archive,
    .projects,
    .proyecto-contacto,
    .referidos-wrapper,
    .stages-container,
    .trayectoria-nosotros {
        grid-template-columns: 1fr
    }

    .nosotros-grid-projects {
        grid-template-columns: repeat(5, 1fr);
        transform: scale(1)
    }

    .dci-footer,
    .footer-logo-container {
        width: 120px
    }

    .logo-recorridos {
        flex-direction: column
    }

    #hideimg,
    .divider-single,
    .stage-img {
        display: none
    }

    .office-hours-home {
        margin-left: 0
    }

    .grid-2-g1.contact_form_default {
        display: flex;
        flex-direction: column
    }

    main .post-info {
        flex-direction: column;
        align-items: start
    }

    .contact_referidos .grid-2-g1 {
        grid-template-columns: 1fr !important
    }

    .areas-comunes-wrapper {
        height: 100vw !important
    }

    .refiere-card-container {
        width: 42px;
        height: 42px;
        
    }

    .contact-page {
        gap: 2rem
    }

    .about-us {
        max-width: 100%;
        position: relative;
        z-index: 100
    }

    .referido-form-wrapper {
        padding: 1rem
    }
}

@media screen and (max-width:400px) {
    .areas-comunes-wrapper {
        height: 500px !important
    }
}