.contacto{
    width: auto;
    height: 50vh;
    padding: 6rem;
    display: flex;
    justify-content: center;
}

.img-contact{
    width: 20%;
    height: auto;
    border-radius: 5%;
}

.title-contact{
    font-weight: 200;
    font-size: 3rem;
    margin-left: 2rem;
}

.container-contacto form .campo, textarea{
    display: flex;
    margin: 1.5rem 0 0 2rem;
    padding-left: .5rem;
    font-size: 1.3rem;
    border: 1px solid #dbdbdb;
    margin-bottom: 1rem;
    border-radius: 6px;
    outline: 0px;
    color: black;
}

.container-contacto form textarea{
    width: 25rem;
    height: 10rem;
    resize: none;
}

.container-contacto .btn-enviar{
    padding: .5rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    margin-left: 2rem;
    border: none;
    outline: 0px;
    background: #e8d0d0;
    color: black;
    border-radius: 3px;
    cursor: pointer;
    transition: all 300ms ease;
}

.container-contacto .btn-enviar:hover{
    background: #867070;
    color: white;
}

@media screen and (max-width: 1180px) {
    .img-contact{
        width: auto;
    }

    .container-contacto form .campo, textarea{
        font-size: 1.5rem;
    }

    .container-contacto .btn-enviar{
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 780px) {
    .contacto{
        width: auto;
        height: 50vh;
        display: flex;
        flex-direction: column;
    }

    .img-contact{
        visibility: hidden;
        display: none;
    }

    .container-contacto form .campo, textarea{
        padding: 1rem;
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 605px) {
    .contacto{
        margin: 4rem 0;
        padding: 2rem;
    }
}

@media screen and (max-width: 575px) {
    .contacto{
        padding: 2rem;
    }

    .container-contacto form .campo, textarea{
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 530px) {
    .contacto{
        padding: 2rem;
    }

    .container-contacto form .campo, textarea{
        font-size: 1.2rem;
        width: 16rem;
    }
}

@media screen and (max-width: 460px) {
    .contacto{
        padding: 2rem;
    }

    .title-contact{
        font-size: 2rem;
    }

    .container-contacto form .campo, textarea{
        font-size: 1.2rem;
        width: 16rem;
    }
}

@media screen and (max-width: 380px) {
    .contacto{
        padding: 1rem;
    }

    .container-contacto form .campo, textarea{
        margin: 1.5rem 0 0 1rem;
        padding-left: .5rem;
        font-size: 1.3rem;
    }
    
    .container-contacto form textarea{
        width: 25rem;
        height: 10rem;
    }

    .container-contacto .btn-enviar{
        margin: 1rem;
    }
}

@media screen and (max-width: 350px) {
    .contacto{
        padding: 1rem;
    }

    .container-contacto form .campo, textarea{
        margin: 1.5rem 0 0 1rem;
        padding-left: .5rem;
        font-size: 1.3rem;
    }
    
    .container-contacto form textarea{
        width: 25rem;
        height: 10rem;
    }

    .container-contacto .btn-enviar{
        margin: 1rem;
    }
}