#projetos .limite{
    padding: 5vh 0;
    display: flex;
    flex-wrap: wrap;
    gap: 3vh;

    .card{
        overflow: hidden;
        cursor: pointer;
        text-align: center;
        border: 2px solid var(--Azul_principal);
        border-radius: 10px;
        box-shadow: 10px 10px 15px #0f1c5734;

        img{
            padding: 2vh 0 0;
            display: none;

            &:first-child{
                display: block;
            }
        }
        h4{
            color: var(--Laranja_principal);
            font-size: 1.3rem;
        }
        h3{
            color: var(--Texto_branco);
            font-size: 1.5rem;
        }
        .info{
            background-color: var(--Azul_principal);
            padding: 1.5vh 0;
            flex-direction: column-reverse;
        }

        p, table, button{display: none;}

    }
    input{display: none;}

    .ovelay{
        width: 90vw;
        height: 90vh;
        cursor: auto;
        display: flex;
        flex-direction: column;
        background-color: var(--Azul_principal);
        color: var(--Texto_branco);
        border: 2px solid var(--Azul_principal);
        border-radius: 20px;
        text-align: start;
        box-shadow: 0 0 5vh #030925ea;
        position: absolute;
        top: 5vh;
        left: 5vw;
        z-index: 10;

        .img{
            width: 100%;
            height: 30vh;
            overflow: hidden;
            display: block;
            border-radius: 20px;
            background-color: var(--BG_contrast);
            box-shadow: 0px 10px 15px #04081867;
            display: flex;
            align-items: center;
            transition: all 1s linear;
            position: relative;
            

            img{
                display: block;
                width: 100%;
                transition: all 1s linear;

                position: absolute;

                &:nth-child(1){
                    left: -100%;
                } 
                &:nth-child(2){
                    left: 0;
                } 
                &:nth-child(3){
                    left: 100%;
                } 
                &:nth-child(4){
                    display: none;
                } 
            }


        }

        .info{
            padding: 2vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1;
        }
        
        
        
        h3{
            font-size: 2rem;
        }
        h4{
            color: var(--Laranja_principal);
            font-size: 1.5rem;
            margin: 1vh;
        }
        p{
            display: block;
            font-size: 1.1rem;
        }       
        table{
            display: table;
            width: 100%;
            margin-top: 2vh;
            td{
                width: 50%;
                font-size: 1.3rem;
                &:nth-child(2){
                    color: var(--Laranja_principal);
                }
            }
        }
        .visitar{
            display: block;
            width: 80%;
            padding: 1vh 0;
            background-color: var(--Laranja_principal);
            border: none;
            border-radius: 10px;
            margin: auto;

            
            a{
                font-size: 1.5rem;
                font-weight: bold;
                color: var(--Texto_branco);
            }
        }

            
    }
    .fechar{
        display: none;
        width: 5vh;
        height: 5vh;
        border-radius: 0 20px 0 10px;
        border: none;
        background-color: var(--Azul_principal);
        color: var(--Texto_branco);
        font-size: 2rem;
        cursor: pointer;
        font-weight: bold;
        position: absolute;
        z-index: 11;
        right: 5vw;
        top: 10vw;
    }

    .move{
        display: none;
    }
    .btn button{
        
        background-color: transparent;
        border: none;
        position: absolute;
        left: 5vw;
        top: 20vh;
        z-index: 12;
        transform: translateY(-50%);
        i{
            font-size: 3rem;
            color: var(--Azul_principal);
        }

        &:nth-child(2){
            right: 5vw;
            left: inherit;
        }
    }
     

}

@media (min-width: 1024px){
    #projetos .limite{
        justify-content: center;
        
        .card{
            width: 30%;
        }

        .ovelay{
            width: 90vw;
            flex-direction: row;
            overflow: hidden;

            .img{
                width: 45vw;
                height: 100%;
            }
            .info{
                width: 50%;
                height: 100%;
                padding: 3vw;
                
            p{
                margin: 2vw 0 3vw;
            }
            }
            .visitar{
                width: 50%;
                margin: 0;
            }
            .label, .auto{
                width: 25%;
                left: 25%;
                top: auto;
                bottom: 5%;
            }
        }
        .fechar{
            height: 3vw;
            width: 3vw;
            background-color: var(--BG_contrast);
            color: var(--Laranja_principal);
            top: 5vh;
        }

        .btn button{
            top: 50%;

            &:nth-child(2){
                left: 45vw;
                right: inherit;
            }
        }

    }
}