* {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0%;
    padding: 0%;
    text-decoration: none;
}

body {
    background-color: #D7C2C2;
}

/*---------------------------------------Header---------------*/
nav {

    background: #D7C2C2;
    height: 150px;
    /* display: flex; */
}

.enlace {
    padding: 5px 50px;
    position: absolute;

}

.logo {
    border-radius: 100px;
}

.search {
    border-radius: 10px;
    padding: 5px;
    border-color: rgb(171, 153, 153);
}

nav ul {
    float: right;
    margin-right: 20px;
}

nav ul li {
    display: inline-block;
    line-height: 140px;
    margin: 0 5px;
}

nav ul li a {
    color: white;
    font-size: 18px;
    padding: 7px 13px;
    border-radius: 3px;
}


li a.active,
li a:hover {
    background: #B2709F;
    transition: .5s;
}

.checkbtn {
    height: 30px;
    float: right;
    line-height: 160px;
    margin-right: 50px;
    cursor: pointer;
    display: none;
}

#check {
    display: none;
}

/*---------------------------serviciosyBotones---------------------------------------*/
.fotogrande {
    background-image: url(/Img/huron.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
}

.contenedor-servicios {
    display: flex;
    justify-content: space-around;
    width: 95%;
    margin: auto;
}

.botoneservicio {
    display: none;
}


.b1 {
    width: 125px;
    height: 50px;
    border-radius: 15px;
    flex-direction: column;
    justify-content: space-between;
    background-color: #B2709F;
    color: #000000;
    margin: 17px;
    font-size: 12px;
    text-align: center;
    align-items: center;
    margin-top: 15px;
    flex-direction: column;
}

.titulo {
    font-weight: bolder;
    margin-left: 37px;
    text-align: center;
    align-items: center;
    margin-top: 47px;
}

.perroservicios {
    background-image: url(./Img/perropeluqueria.png);
    background-repeat: no-repeat;
    position: relative;
    width: 357px;
    height: 296px;
    padding-top: 1px;
    padding-bottom: 10px;
    margin-top: 15px;
    background-size: 100%;
}

.educacioncanina {
    background-image: url(./Img/perrocorrea.png);
    background-repeat: no-repeat;
    position: relative;
    width: 357px;
    height: 296px;
    padding-top: 1px;
    padding-bottom: 10px;
    margin-top: 15px;
}

.veterinaria {
    background-image: url(./Img/perroveterinaria.png);
    background-repeat: no-repeat;
    position: relative;
    width: 357px;
    height: 296px;
    padding-top: 1px;
    padding-bottom: 10px;
    margin-top: 15px;
}

/*.fondoservicios::before {
    content: "";
    background-image: url("/Img/gatoservicios.png");
    background-size: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.4;
    border-radius: 10px;
}*/
.h1movile {
    display: none;
}
.h1servicios {
    margin: 15px;
    font-size: 22px;
    font: bold;
    text-align: left;
    padding-left: 3.5rem;
    padding-top: 2rem;
}


/*.perroservicios {
    width: 306px;
    height: 195px;
    border-radius: 10px;

    margin-left: 7%;
    position: absolute;
}*/

.botonpelu {
    width: 150px;
    height: 30px;
    border-radius: 10px;
    padding: 0.5rem;
    margin-top: 8rem;
    margin-left: 5.9rem;
    background-color: #b2709f84;
    text-align: center;
    font-weight: bold;

}

.botoncita {
    width: 100px;
    height: 20px;
    border-radius: 10px;
    margin-top: 1.1rem;
    margin-left: 113px;
    background-color: #EE84D0;
    text-align: center;
    padding: 0.5rem 1rem;
    font-weight: bold;
}

/*---------------------------------------------Productos-------------------------------------------*/
.productos {
    background-color: #ffe7e7;
    padding-top: 20px;
    margin: auto;
    margin-top: 80px;
    width: 95%;
    padding-bottom: 30px;
    border-radius: 10px;
}

.nombreproductos h1 {
    font-family: Arial, Helvetica, sans-serif;
    margin: 5px 10px 20px 20px;
    margin-left: 20px;
    text-align: left;
    font-weight: bolder;
    font-size: 22px;
}

.caja1 {
    background-color: #dae3d8;
    height: 30%;
    width: 30%;
    border-radius: 5px;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.productosdeimagen {
    width: 95%;
    height: 300px;
    border-radius: 10px;
    margin: 10px 5px 10px 10px;
    margin-top: 25px;
}

.btnimagen {
    width: 50%;
    height: 55px;
    position: relative;
    top: -100px;
    left: 25%;
    opacity: 0.7;
    font-weight: bold;
    border-radius: 10px;
    font-size: 20px;
}

.desde {
    width: 150px;
    height: 40px;
    position: relative;
    border-radius: 50px;
    border: none;
    background-color: #ab9b9b;
    font-weight: bolder;
    font-size: 15px;
}

.comprar {
    width: 150px;
    height: 40px;
    position: relative;
    border-radius: 50px;
    border: none;
    background-color: #b2709f;
    color: white;
    font-weight: bolder;
    font-size: 15px;
}

.botonescajas {
    display: flex;
    justify-content: space-between;
    width: 90%;
    padding: 0;
    margin-top: -38px;
    margin-left: 20px;
}

.totaldecajas {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}


/*------------------------Formulario------------------------------------*/

.containerForm {
    position: relative;
    width: 95%;
    height: 597px;
    margin: 5% auto;
    /* margin: 5% 5% 10% 5%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.containerForm::before {
    content: "";
    background-image: url("Img/IMAGEN\ FORMULARIO\ DESKTOP.png");
    background-size: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.4;

}

.containerForm h2 {
    position: relative;
    color: black;
    line-height: 1;
    text-align: center;

}

form label {
    position: relative;
    color: black;
    font: bold;
    line-height: 1;

}

form input {
    border: 2px inset #D7C2C2;
    border-radius: 10px;
    opacity: 0.5;
    height: 2rem;
    margin: 1rem;
    width: 50rem;

}

input[type="tel"] {
    margin-left: 0.7rem;
}

.mensaje {
    display: flex;
    align-items: center;
}

form textarea {
    border: 2px inset #D7C2C2;
    border-radius: 10px;
    opacity: 0.5;
    height: 16rem;
    width: 50rem;
    margin-left: 1rem;
    resize: none;


}

.email {
    margin-left: 2rem;
}

.formButton {
    margin-left: 80%;
    color: black;
    width: 10rem;
    font: bold;
}


/*----------------------------------------------------Footer---------------*/
.footer {
    display: flex;
    background-color: #D9D9D9;
}

.footer-ezquierda {
    width: 50%;
    padding: 20px 150px;
    text-align: center;
}

.footer-derecha {
    width: 50%;
    padding: 20px 150px;
}

.footer h3 {
    padding-bottom: 10px;
    text-align: center;
}

.footer p {
    padding: 10px 2px;
    text-align: left;
}

.footer-lista {
    padding: 14px 2px;
    text-align: left;
}

.footer-lista li {
    padding: 4px 0px;
}

.footer-ezquierda img {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    margin-top: 40px;
}

.footer-media {
    margin-top: 40px;
    text-align: left;
}

.footer-media i {
    color: #000000;
    background-color: none;
    font-size: 30px;
    padding: 10px;
}

/*---------------------------------Mobile---------------------*/
@media screen and (max-width: 767px) {

    /*----------Mobile-Header--------- */
    .checkbtn {
        display: block;
    }

    .enlace {
        padding-left: 20px;
    }

    nav ul li a {
        font-size: 16px;
        text-decoration: none;
    }

    nav ul {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: rgb(110, 110, 110);
        top: 150px;
        left: 100%;
        text-align: center;
        transition: all .5s;
    }

    nav ul li {
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }

    nav ul li a {
        font-size: 20px;
    }

    li a:hover,
    li a.active {
        background: #b2709f00;
        color: #B2709F;
    }

    #check:checked~ul {
        left: 0;
    }

    /*----------Mobile-Formulario--------- */

    .containerForm {
        position: relative;
        background-color: #D7C2C2;
        width: 100%;
        height: 559px;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .containerForm::before {
        content: "";
        background-image: url("Img/foto_perrete_formulario.png");
        background-size: cover;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        opacity: 0.4;

    }

    .containerForm h2 {
        position: relative;
        color: black;
        line-height: 1;
        text-align: center;

    }

    form label {
        position: relative;
        color: black;
        font: bold;
        line-height: 1;

    }

    form input {
        border: none 1px #58C4DC;
        border-radius: 10px;
        background-color: #58C4DC;
        height: 2rem;
        width: 16rem;
        margin: 1rem;
    }


    .mensaje {
        display: flex;
        align-items: center;
    }

    form textarea {
        border: none;
        border-radius: 10px;
        background-color: #58C4DC;
        height: 16rem;
        width: 16rem;
        margin-left: 1rem;
        resize: none;

    }

    .email {
        margin-left: 2rem;
    }

    .formButton {
        margin-left: 80%;
        color: black;
        width: 3.5rem;
        font: bold;
    }

    /*----------Mobile-Footer--------- */

    .footer {
        font-size: 12px;
    }

    .footer-ezquierda {
        width: 40%;
        padding: 5%;
        text-align: center;
    }

    .footer-derecha {
        width: 40%;
        padding: 5%;
    }

    .footer h3 {
        padding: 15px 0px;
        text-align: center;
    }

    .footer-media {
        padding-left: 0px !important;
        text-align: left;
        display: flex;
    }

    .footer-media i {
        padding: 7px;
    }

    /*----------Mobile-Productos--------- */
    .totaldecajas {
        width: 100%;
        display: flex;
        display: inline-block;
    }

    .productos {
        background-color: #ffe7e7;
        padding-top: 20px;
        margin-top: 80px;
        width: 100%;
        padding-bottom: 70px;
    }

    .caja1 {
        background-color: #dae3d8;
        height: 25%;
        width: 90%;
        margin: 20px;
        border-radius: 5px;
        padding-bottom: 35px;
    }

    .btnimagen {
        width: 50%;
        height: 55px;
        position: relative;
        top: -100px;
        left: 100px;
        opacity: 0.7;
        font-weight: bold;
        border-radius: 10px;
        font-size: 20px;
    }

    .desde {
        width: 135px;
        height: 55px;
        position: relative;
        border-radius: 50px;
        border: none;
        background-color: #ab9b9b;
        font-weight: bolder;
        font-size: 16px;
    }

    .comprar {
        width: 135px;
        height: 55px;
        position: relative;
        border-radius: 50px;
        border: none;
        background-color: #b2709f;
        color: white;
        font-weight: bolder;
        font-size: 16px;
    }

    .botonescajas {
        display: flex;
        justify-content: space-between;
        width: 90%;
        padding: 0;
        margin-top: -38px;
        margin-left: 15px;
    }


    /*----------Mobile-Servicios--------- */
    .servicios2 {
        display: none;
    }

    .servicios3 {
        display: none;
    }

    .fotogrande {
        background-image: url(/Img/perritotriste.png);
    }

    .botoneservicio {
        display: flex;
        background-color: #D7C2C2;
        justify-content: center;
    }

    .fondoservicios {
        position: relative;
        width: 357px;
        height: 296px;
        padding-top: 1px;
        padding-bottom: 10px;
        margin-top: 15px;
    }

    .fondoservicios::before {
        content:"";
        background-image: url("/Img/gatoservicios.png");
        background-size: cover;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        opacity: 0.4;
        border-radius: 10px;
    }

    .h1movile {
        position: relative;
        margin: 15px;
        font-size: 22px;
        text-align: center;
        display: block;
    }

    .h1servicios{
        display: none;
    }
    .perroservicios {
        width: 306px;
        height: 195px;
        background-image: url(/Img/perropeluqueria.png);
        border-radius: 10px;
        margin-left: 7%;
        position: relative;
    }

    .botonpelu {
        width: 100px;
        height: 20px;
        border-radius: 10px;
        padding: 0.5rem 1rem;
        margin-top: 8rem;
        margin-left: 5.9rem;
        background-color: #b2709f84;
        text-align: center;
        font-weight: bold;
    }

    .botoncita {
        width: 100px;
        height: 20px;
        border-radius: 10px;
        margin-top: 2.5rem;
        margin-left: 92px;
        background-color: #EE84D0;
    
        text-align: center;
        padding: 0.5rem 1rem;
        font-weight: bold;
    }

}