/*menu*/

@media (max-width: 900px){
    
    .nav {
        display: block;
        height: 70px;
        padding-left: 0px;
        padding-right: 0px;
    }
    
    .border-white:hover {
        border-bottom: none;
    }
    
    .logo-menus {
        display: block;
        margin-left: 0px;
    }
    
    .logo-menu {
        width: 150px;
        height: 80px;
        margin-right: 0px;
    }
    
    .line {
        width: 30px;
        height: 3px;
        background: white;
        margin: 5px;
        display: block;
    }
    
    .mobile {
        display: block;
        margin: 0;
        width: 50px;
        height: 50px;
        cursor: pointer;
        float: right;
        padding: 20px 19px 0;
        border-left: solid 1px #000;
    }
    
    .mobile-links {
        position: absolute;
        top: 70px;
        left: 0px;
        width: 100%;
        transform: translateX(-100%);
        transition: all 0.3s ease-in;
    }
    
    .mobile-links ul {
        display: block;
        background: #333333;
    }
}

.mobile-active {
    transform: translateX(0%);
}





/*pag home*/

@media (max-width: 900px) {
    .home-info {
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 3fr;
    }
    
    .home {
        grid-column: 1;
        grid-row: 1;
    }
    
    .person {
        grid-column: 1;
        grid-row: 2;
    }
    
    .doc {
        grid-column: 1;
        grid-row: 3;
    }
}





/*pag Quienes somos*/

@media (max-width: 900px) {
    .we {
        display: grid;
        grid-template-columns: 1fr; 
        grid-template-rows: 2fr;
    }
    
    .we-img img {
        width: 100%;
    }
    
    .wrap {
        width: 100%;
    }
    
    .anuncio {
        display: none;
    }

    .anuncio img {
        display: none;
    }
}





/*Pag Proyectos*/

@media (max-width: 900px){
    .projects-container {
        padding: 0 20px 40px;
    }
    
    .project {
        grid-template-columns: 1fr;
        grid-template-rows: 3fr;
    }
    
    .house {
        grid-column: 1;
        grid-row: 3;
    }
    
    .info {
        grid-template-columns: 1fr;
        grid-template-rows: 3fr;
    }
    
    .project-info {
        grid-column: 1;
        grid-row: 2;
    }
    
    .project-img-container {
        grid-row: 2;
    }
    
    .project-info-container {
        grid-column: 1;
        grid-row: 3;
    }
}





/*Pag Contacto*/

@media (max-width: 900px){
    .contacto {
        grid-template-columns: 1fr;
        grid-template-rows: 3fr;
    }
    
    .info-contact {
        grid-column: 1;
        grid-row: 3;
    }
}





/*footer*/

@media (max-width: 952px) {
    .container-flex {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 2fr;
    }
    
    .logo {
        width: 60%;
        grid-column: 1;
        grid-row: 1;
    }
    
    .contact {
        grid-column: 1;
        grid-row: 2;
        width: 80%;
        display: table;
        margin-left: 50px;
    }
    
    .social {
        width: 60%;
        display: table;
        grid-column: 2;
        grid-row: 1;
        
    }
}

@media (max-width: 618px) {
    .container-flex {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 2fr;
    }
    
    .logo {
        width: 60%;
        grid-column: 1;
        grid-row: 1;
    }
    
    .contact {
        grid-column: 1;
        grid-row: 2;
        width: 80%;
        display: table;
        margin-left: 50px;
    }
    
    .social {
        width: 60%;
        display: table;
        grid-column: 1;
        grid-row: 3;
        
    }
}

@media (max-width: 952px) {
    .container-info-footer {
        margin-left: 0px;
        margin-right: 0px;
    }
}





/*slider*/

@media (max-width: 900px) {
    
    .directions {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 50px;
    }
    
    .directions a {
        color: white;
        display: flex;
        padding: 10px 10px;
        text-decoration: none;
        font-family: monospace
    }

    .directions a:hover {
        background: none;
    }
    
    .indicators {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 3px;
    }
    
    .item {
        cursor: pointer;
        height: 3px;
        width: 30px;
        margin: 0 3px;
        background: white;
        display: block;
        margin-left: 10px;
    }
     
    .active {
        background-color: #333333;
    }
}