*{
    box-sizing: border-box;
    outline: none; border: none;
    transition: all .2s linear;
    text-transform: capitalize;
}
body{
    margin: 0;
    padding: 0;
    background-size: 100%;
    background-color: #010103;  
    font-size: 16px;
}
.checkbtnwq{
    cursor: pointer;
    border-radius: none;  
}
#checkwq{
    display: none;
}
.wq{
    margin-left: -200%;
}
.wq{
    background-color: rgb(0, 136, 0);
    width: 6%;
    border-radius: 10px;
}
.wq p{
    margin-top: -0.5%;
}
#checkwq:checked ~ .wq{
    margin-left: 0%;
}

a{
    color: #FFFFFF;
}
.checkbtnwb{
    cursor: pointer;
    border-radius: none;
}
.beraw{
    margin-top: -7.5%;
    margin-left: -0.5%;
}
.quilw{
    margin-left: -58%;
    margin-top: -29%;
}
.elecw{
    margin-left: 55%;
    margin-top: -8%;
}
#checkwb{
    display: none;
}
.wb{
    display: none;
}
.wb{
    background-color: rgb(0, 136, 0);
    width: 10%;
    border-radius: 10px;
}
.wb p{
    margin-top: -0.5%;
}
#checkwb:checked ~ .wb{
    display:block;
}
.men{
    background-color: black;
    position:fixed;
    width: 100%;
    height: 24%;
    font-family: "Montserrat", sans-serif;
}
.menu{
   background-color: black;
    position: fixed;
    font-family: "Montserrat", sans-serif;
}
.hom{
    position:fixed;
    margin-top: 4.1%;
    margin-left: 15.5%;
    background-color: black;
}
.checkbtn{
    margin-top: 2%;
    position: absolute;
    display: none;
    cursor: pointer;
    border-radius: none;
}
#check{
    display: none;
}

.contact{
    position:fixed;
    margin-top: 4%;
    margin-left: 29%;
    background-color: black;
}
.to{
    position:fixed;
    margin-top: 2%;
    margin-left: 36.5%;
}
.rep{
    position:fixed;
    margin-top: 2.8%;
    margin-left: 49.5%;
}
.bq{
    position:fixed;
    margin-top: 3.6%;
    margin-left: 60.5%;
    background-color: black;
}
.bb{
    position:fixed;
    margin-top: 3%;
    margin-left: 70%;
    background-color: black;
}
.eq{
    position:fixed;
    margin-top: 3.1%;
    margin-left: 80.7%;
    background-color: black;
}
.car{
    position:fixed;
    margin-top: 34px;
    margin-left: 87.5%;
    background-color: black;
}
.w{
    position:fixed;
    margin-top: 43px;
    margin-left: 93.5%;
    background-color: black;
}
.catalog{
    position:fixed;
    margin-top: 3.5%;
    margin-left: 21.5%;
    font-family: "Montserrat", sans-serif;
}
.catalog .catalogo a{
    font-size: 15px;
}
#botton{
    color: white;
    padding: 0.625em 1.25em;
    border-radius:  0.25em;
    text-decoration: none;
    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
#botton:hover{
    color: brown;
}
#bottonh{
    color: white;
    padding: 0.625em 1.25em;
    border-radius:  0.25em;
    text-decoration: none;
    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
#bottonh:hover{
    color: brown;
}
a{
    text-decoration: none;
}
#zoom{
    transition: 0.5s;
    object-fit: cover;
}
#zoom:hover{
    transform: scale(1.2);
}
.catalogo a{
    color: #FFFFFF;
}
.catalogo a:hover{
    color: brown;
}
.catalogo{
    color: #FFFFFF;
    padding: 0.625em 1.25em;
    border-radius:  0.25em;
    text-decoration: none;
    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    background-color: #010103;
    border: none;
    font-family: "Montserrat", sans-serif;
}
html{
    font-size: 75%;
}
.container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
    margin-left: 5%;
}
.container .product-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 2rem;
}
.container .product-container .product{
    text-align: center;
    padding: 2rem 1rem;
    box-shadow: 0. 5rem 1rem rgba(0,0,0,.1);
    width: 10%;
}
.container .product-container .product img{
    height: 29rem;
    border-radius: 15px;
    width: 31rem;
}
.pedidobq{
    background-color: rgb(6, 177, 6);
    color: #FFFFFF;
    border-radius: 10px;
    width: 34%;
    font-family: "Montserrat", sans-serif;
    margin-top: 0%;
}
.pedidobq a {
    color: #FFFFFF;
    font-size: 35px;
}

.txt{
    width: 100%;
    background-color: #BE1E30;
    color: #101010;
    margin-top: -4.5%;
    position: fixed;
    height: 6%;
}
.txt h2{
    margin-top: 0%;
    font-size: 30px;
    font-family: "Montserrat", sans-serif;
}
.wb a{
    font-family: "Quicksand", sans-serif;
}
.wq a{
    font-family: "Quicksand", sans-serif;
}
.quild{
    margin-left: 14%;
    margin-top: 2%;
    font-size: 15px;
    color:#FFFFFF;
    font-family: "Roboto", sans-serif;
}
.berad{
    margin-left: 42%;
    margin-top: -11%;
    font-size: 15px;
    color:#FFFFFF;
    font-family: "Roboto", sans-serif;
}
.elecd{
    margin-left: 69.5%;
    margin-top: -11%;
    font-size: 15px;
    color:#FFFFFF;
    font-family: "Roboto", sans-serif;
}
.cur:hover{
    color: #BE1E30;
    padding: 0.625em;
    background-color: #010103af;
    border-radius:  0.25em;
    text-decoration: underline;
}
.cura:hover{
    color: #004AAD;
    background-color: #010103af;
    padding: 0.625em;
    border-radius:  0.25em;
    text-decoration: underline;
}
@media screen and (max-width: 800px) {
    #tablaPricipal{
        margin-top: 4%;
        margin-left: 13%;
        width: 80px;
    }
    #imagenLogo{
        width: 250px;
    }
    .checkbtn{
        display: block;
        margin-top: 50px;
        margin-left: 10px;
    }
    #check:checked ~ .menucel{
        left: 0px;
    }
    .quilw{
        margin-top: -20%;
        margin-left: 0%;
    }
    .beraw{
        margin-top: -22%;
        margin-left: 0%;
    }
    .wb{
        background-color: rgb(0, 136, 0);
        width: 24%;
    }
    .wq{
        background-color: rgb(0, 136, 0);
        width: 24%;
    }
    .men{
        height: 0%;
        width: 0%;
        margin-top: -3%;
        position: fixed;
    }
    .menu{
        margin-top: -4%;
        margin-left: 0%;
        width: 100%;
        height: 30%;
    }
    .menucel{
        width: 260px;
        height: 100vh;
        display: flex;
        position: fixed;
        top: 120px;
        left: -100%;
        background-color: #010103;
        overflow: hidden;
        box-shadow: 10px 0 20px -25px #BE1E30;
        transition: all .5s;
    }
    .hom{
        margin-top: 4%;
        margin-left: 17%;
        width: 0px;
    }
    #zoom:hover{
        transform: none;
    }
    .catalog{
        margin-top: 14%;
        margin-left: 17%;
        width: 0px;
    }
    .contact{
        margin-top: 26%;
        margin-left: 16.5%;
        width: 0px;
    }
    .to{
        margin-top: 29%;
        margin-left: 16.5%;
        width: 0px;
    }
    .rep{
        margin-top: 47%;
        margin-left: 19%;
        width: 0px;
    }
    .bq{
        margin-top: 62%;
        margin-left: 19.5%;
        width: 0px;
    }
    .bb{
        margin-top: 72%;
        margin-left: 19.5%;
        width: 0px;
    }
    .eq{
        margin-top: 86%;
        margin-left: 19%;
        width: 0px;
    }
    .w{
        margin-left: 90%;
        margin-top: 55px;

    }
    .car{
        margin-left: 79%;
        margin-top: 50px;
    }
    .txt{
        position: static;
        height: 35px;
        margin-top: -21.5%;
    }
    .txt h2{
        margin-top: 10%;
    }
    .pedidobq{
        width: 56%;
    }
    .checkbtnwb{
        margin-top: -1.5%;
        margin-left: 2%;
    }
    .container{
        margin-top: -20%;
    }
    .container .product-container .product img{
        border-radius: 15px;
        width: 335px;
        height: 30rem;
        margin-left: -1677%;
    }
    .quilw{
        margin-top: -105rem;
    }
    .beraw{
        margin-top: 28rem;
    }
    .elecw{
        margin-left: 0%;
        margin-top: 27rem;
    }
    .quild{
        margin-left: 23%;
        margin-top: -232%;
    }
    .berad{
        margin-left: 23%;
        margin-top: 80%;
    }
    .elecd{
        margin-left: 23%;
        margin-top: 79%;
    }
    
}