/*####################################################
##													##
## PERCOVICH										##
## 													##
## 768.CSS 	    									##
## 													##
## 													##
## Estilo CSS										##
## Estilos responsive               				##
##                                          		##
##													##
####################################################*/

@charset "utf-8";

#block-1 .text {
    margin-left: 50px;
    font-size: 60%;
}

    #block-1 .text h4 {
        font-size: 1.14em;
        top: -18px;
        left: -150px;
    }

#block-2 .bottom {
    grid-template-columns: repeat(1, 1fr);
}

#servicios {
    grid-template-columns: 1fr;
    gap: 15px;
}

#servicios__item {
    display: none;
}

#block-4 {
    margin-top: 50px;
}

#block-5 .wrapper > .grid {
    grid-template-columns: 1fr;
}

    #block-5 .wrapper > .grid > div:first-child {
        padding: 0;
    }

#navbar {
    grid-template-columns: auto 1fr;
    gap: 25px;
    align-items: center;
    justify-items: end;
}

    #navbar nav,
    #navbar .social {
        display: none;
    }

    #navbar #menu-mobile {
        display: block;
    }

        #navbar #menu-mobile a {
            font-size: 2em;
            color: var(--color-primary);
        }

    #navbar nav {
        height: 100vh;
        padding: 25px;
        position: fixed;
        right: -100vw;
        top: 0;
        display: block;
        background: var(--color-white);
    }

        #navbar nav ul {
        }

            #navbar nav ul li,
            #navbar nav ul li#close-menu {
                display: block;
                text-align: right;
            }

                #navbar nav ul li .spacer {
                    display: none;
                }

                #navbar nav ul li a {
                    padding: 15px 0;
                    display: block;
                }

                #navbar nav ul li#close-menu {
                    padding-bottom: 25px;
                    font-size: 2em;
                }