*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;}
body{
    width: 100%;
    height: auto;
    margin: 0 auto;
    max-width: 2000px; 
    min-width: 320px;} 
/*----------------------------botonera*/
nav{
    width: 100%;
    max-width: 2000px; 
    float:left;
    z-index: 1000000;
	font-family:Roboto;
    position: fixed;
    height: 70px;}
.navscroll{ 
    z-index: 1000000;
    background: linear-gradient(0deg, #D8D8D8, #cecece);}
.logo{
    float: left;
    height: 40px;
    margin: 15px;} 
#btn-menu, #btn-menu2{
    display: none;}
#menu{
    width:28%;
    float: right;}
#menu ul{ list-style: none;}
#menu ul a{
    color:black;
    text-decoration: none;}
#menu ul li{
    margin-left: 2px;
    font-size: 16px;
    font-weight: 500;
    height: 70px;
    padding: 0% 4%;
    letter-spacing: 1px;
    text-decoration: none;
    text-align: center;
    line-height: 70px;
    transition: .3s;
    float: left;}
#menu ul li:hover{
    font-weight: 400;
    color: black;}
#menu ul li a:hover{
    font-weight: 400;
    color: black;}
#carrito{
    font-family: Roboto;
    width:80px;
    margin-right: 10px;
    color:black;
    line-height: 70px;
    text-decoration: none;
    float: right;
    height: 70px;}
.btn-carrito{
    height: 25px;
    margin-top: 20px;
    margin-right: 5px;
    float: left;}
.linea1{
    width: 30px;
    height: 3px;
    margin-top: 5px;
    float: left;
    transition: .3s;
    background: #2c2c2c;
    opacity: .8;}
.linea2{
    width: 30px;
    height: 3px;
    margin-top: 5px;
    float: left;
    transition: .3s;
    background: #2c2c2c;
    opacity: .8;}
#menu ul li .ulpro{
    width: 100px;
    margin-top: 0px;
    margin-left: -5px;
    float: left;
    text-align: center;
    position: absolute;
    display: none;}
#menu ul li:hover .ulpro{
    display: block;}
#menu ul li .ulpro a li{
    height: 40px;
    font-weight: 400;
    text-align: center;
    line-height: 35px;}
#menu ul li .ulpro a {
    width: 100%;
    float: left;
    text-align: center;
    background: #D8D8D8;}


@media (max-width:1800px){
    #menu{width: 35%;}
}
@media (max-width:1500px){
    #menu{width: 40%;}
}
@media (max-width:1200px){
    #menu{width: 50%;}
}
@media (max-width:1000px){
    #menu{width: 55%;}
}
@media (max-width:900px){
    #menu ul li:hover .ulpro{
        display: none;}
    #menu{
        width: 40%;
        height: auto;
        margin-top: 70px;
        position:relative;
        text-decoration: none;
        transition: .5s;
        margin-right: -100%;
        background: linear-gradient(0deg, #D8D8D8, #cecece);}
    #menu ul li{
        width: 100%;
        height: 80px;
        line-height: 80px;
        letter-spacing: 2px;
        text-decoration: none;
        font-weight: 400;
        font-size: 20px;
        border-bottom: 2px solid #9a9a9a; 
        color: black;}
    #btn-menu2{
        float: right;
        height: 100%;
        display: block;
        width: 50px;
        margin-left: 10px;
        padding: 19px 0%;}
    #btn-menu:checked ~ #menu{
        margin-top: 70px;
        margin-right: -160px;}
    #btn-menu:checked ~ #btn-menu2 .apagar{
        display: none;}
    #btn-menu:checked ~ #btn-menu2 .linea1{
        transform: rotate(45deg);
        margin-top: 15px;
        float: left;}
    #btn-menu:checked ~ #btn-menu2 .linea2{
        transform: rotate(-45deg);
        float: left;
        margin-top: -3px;}
    #carrito{
        width:60px;}
}
@media (max-width:600px){
    #menu{
        font-size: 14px;
        width: 50%;}    
}
@media (max-width:400px){
    #menu{
        margin-right: -150%;
        width: 60%;}  
    .logo{position: absolute;}
}


/*----------------------------header*/
header{
    float:left;
    width: 100%;
    height: auto;
    padding: 5% 0%;
    background-image: url(../img/fondo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;}
.log-header{
    float:right;
    width: 40%;
    height: auto;
    margin:15% 4% 0% 50%;}
.txt-frase{
    float:right;
    width: 50%;
    height: auto;
    padding: 1% 5% 8%;
    font-size: 30px;
    letter-spacing: 1px;
    font-weight: 400;
    font-style: italic;
    font-family: Montserrat;
    text-align: right;
    color: red;}


#foto{
    background-image: url(../img/perro-corriendoeditada.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width:100%;
    float: left;
    height: auto;}
.conte-foto{
    width:60%;
    float: right;}
.txt-foto{
    width:100%;
    float: left;
    font-family: Montserrat;
    color: white;
    font-size: 40px;
    text-align: center;
    letter-spacing: 1px;
    line-height: 52px;
    text-shadow: 1px 1px black;
    padding: 18% 8% 2% 0%;}
.btn-foto{
    width:25%;
    float: left;
    margin: 4% 42.5% 18% 32.5%;
    padding: 2% 0%;
    background: #343434;
    border-radius: 5px;
    color: white;
    text-align: center;
    text-decoration: none;
	font-family:Roboto;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: 2px;
    transition: .3s;}
.btn-foto:hover{
    opacity: .6;}



@media (max-width:1400px){
    #foto{
        background-position: left;}
    .txt-foto{
        font-size: 30px;
        line-height: 42px;}
    .btn-foto{
        font-size: 16px;}
}

@media (max-width:1300px){
    .log-header{
        width: 30%;
        margin: 15% 4% 0% 60%;}
    .txt-frase{
        font-size: 24px;}
}
@media (max-width:1080px){
    .txt-frase{
        font-size: 18px;}
    .txt-foto{
        font-size: 22px;
        line-height: 38px;}
    .btn-foto{
        width: 40%;
        margin: 4% 35% 18% 25%;
        padding: 1% 0%;
        font-size: 18px;}
}

@media (max-width:768px){
    header{
        height: 800px;
        padding: 15% 0% 0%;
        background-size: 120%;
        background-position: -40%;}
    .log-header{
        width: 50%;
        margin: 0% 25%;}
    .txt-frase{
        width: 50%;
        margin: 0% 25%;
        padding: 0%;
        font-size: 14px;
        text-align: center;}
    .txt-foto{
        font-size: 18px;
        line-height: 24px;}
    .btn-foto{
        padding: 2% 0%;
        font-size: 12px;}
}

@media (max-width:600px){
    header{
        height: auto;
        padding: 100px 0% 90%;}
}
@media (max-width:500px){
    #foto{
        background-position: 20%;}
    .txt-foto{
        font-size: 14px;
        line-height: 20px;}
    .txt-frase{
        width: 60%;
        margin: 0% 20%;
        font-size: 11px;}
    .log-header{
        width: 60%;
        margin: 0% 20%;}
    header{
        padding: 100px 0% 100%;}
}
@media (max-width:400px){
    #foto{
        background-position: right;}
    .conte-foto{
        width:100%;}
    .txt-foto{
        font-size: 16px;
        line-height: 22px;
        padding: 18% 5% 2%;}
    .btn-foto{
        margin: 4% 30% 18%;}
    header{
        padding: 100px 0% 120%;}
}

/*----------------------------index productos*/

#index-productos{
    width:100%;
    padding:2% 5%;
    float:left;
    background: white;}
.titu-index-pro{
    width:100%;
    float:left;
    text-align: center;
    font-family: Montserrat;
    font-weight: 500;
    letter-spacing: 2px;
    color: black;
    font-size: 38px;
    text-transform: uppercase;
    margin-bottom: 80px;}
.btn-pro{
    width:20%;
    margin:0% 2.5% 10%;
    float:left;
    text-align:center;}
.img-pro{
    width:100%;
    float:left;
    transition:.3s;}
.txt-pro{
    font-size:30px;
    margin-top:-150px;
    width:100%;
    float:left;
    font-weight: 400;
    font-family:Roboto;
    text-transform:uppercase;
    letter-spacing: 1px;
    border-radius:10px;
    transition:.3s;
    color:black;
    opacity:0;
    text-decoration:none;}

.btn-pro:hover .img-pro{
    opacity:0;}
.btn-pro:hover .txt-pro{
    opacity:1;}


@media (max-width:1800px){
    .txt-pro{
        margin-top:-130px; }
}
@media (max-width:1400px){
    .btn-pro{
        width:15%;
        margin:0% 5% 7%;}
    .txt-pro{
        margin-top:-110px; }
}
@media (max-width:1100px){
    #index-productos{
        padding:2% 10%;}
    .btn-pro{
        width:30%;
        margin:0% 10% 5%;}
}
@media (max-width:768px){
    #index-productos{
        padding:2% 5%;
        margin-top:-200px;}
    .titu-index-pro{ 
        font-size: 24px;
        margin-bottom: 40px;}
}
@media (max-width:600px){
    .txt-pro{
        font-size:16px;
        margin-top:-60px;}
}
@media (max-width:500px){
    .titu-index-pro{ 
        font-size: 18px;
        margin-top: 40px;
        margin-bottom: 20px;}
    
}
/*--------------------------------------------MEDIOS DE PAGO HOME---------*/
#mediosdepago{
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    padding: 8%;}
#mediosdepago .medio{
    width:25%;
    margin:2% 4.15%;
    text-align:center;
    cursor: pointer;
    transition: .3s;
    opacity: .6;
    float:left;}
#mediosdepago input{ display:none;}

#mediosdepago .medio:hover{
    opacity: 1;}
#mediosdepago .medio .img-medio{
    width:50%;
    margin:0% 25%;
    float:left;}
#mediosdepago .medio .txt-medio{
    width:100%;
    float:left;
    border-top: 2px solid black;
    font-weight: 500;
    font-family:Roboto;
    font-size:20px;
    line-height:50px;}
.popup{
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    max-width: 2000px;
    z-index: 1000000;
    float:left;
    background: rgba(0, 0, 0, 0.734);}
.infopop{
    background: white;
    width: 50%;
    float:left;
    margin: 5% 25%;}
.icono-popup{
    width:30%;
    float: left;
    margin:2% 5% 2% 2%;}
.cerrarpopup{
    width: 40px;
    height: 40px;
    margin:10px;
    float:right;
    border: 2px solid black;
    cursor: pointer;
    border-radius: 20px;
    background: white;}
.txt-pop{
    width: 86%;
    font-weight: 400;
    font-family:Roboto;
    margin: 50px 7%;
    text-align: justify;
    float: left;}
.titu-pop{
    background: #c30303; 
    color: white;
    height: 60px;
    line-height: 60px;
    padding-left:20px;
    font-size: 30px;
    letter-spacing: 1px;
    text-align: left;
    font-weight: 600;
    font-family:Roboto;
    width: 100%;
    float: left;}

@media (max-width:1400px){
    #mediosdepago{
        padding: 8% 5%;}
    #mediosdepago .medio{
        padding: 2%;
        width: 33.33%;
        margin: 2% 0%;}
    .popup{
        width: 100%;}
}
@media (max-width:900px){
    #mediosdepago .medio .txt-medio{
        font-size:20px;
        line-height:24px;
        padding-top:15px;}
}

@media (max-width:768px){
    .infopop{
        width: 80%;
        margin: 5% 10%;}
    .titu-pop{
        font-size: 20px;}
}

@media (max-width:600px){
    #mediosdepago{
        padding: 8% 1%;}
    #mediosdepago .medio .txt-medio{
        width:90%;
        margin:0% 5%;
        font-size:14px;
        line-height:18px;
        padding-top:15px;}
    
    .icono-popup{
        width:80%;
        margin:5% 10%;}
    .txt-pop{
        width: 90%;
        margin: 2% 5% 5%;
        text-align:left;}
}
@media (max-width:500px){
    #mediosdepago .medio{
        width: 30%;
        margin: 2% 1.6%;}
}
@media (max-width:400px){
    .titu-pop{
        font-size: 16px;}
    .cerrarpopup{
        width: 30px;
        height: 30px;
        margin: 15px;
        border-radius: 15px;}
}
/*----------------------------footer*/
footer{
    width: 100%;
    height: auto;
    float: left;
    background: linear-gradient(0deg, #969696, #cecece);
    text-align: center;}
footer a{
    text-decoration: none;}
.logo-footer{
    width: 15%;
    margin: 5% 42.5% 0%;}
.iconos-footer{
    width: 25px;
    margin: 2% 2% 1%;} 
.txt-footer{
    font-weight: 400;
    font-family:Roboto;
    font-size: 16px;
    color: white;
    margin: 1% 0%;}

@media (max-width:1080px){
    footer{
        background: #969696;}
    .logo-footer{
        width: 20%;
        margin: 5% 40% 1%;}
}
@media (max-width:768px){
    .logo-footer{
        width: 25%;
        margin: 5% 37.5% 1%;}
    .txt-footer{
        font-size: 14px;
        margin: 2% 0%;}
}
@media (max-width:500px){
    .logo-footer{
        width: 30%;
        margin: 5% 35% 1%;}
    .txt-footer{
        font-size: 12px;}
    .iconos-footer{
        width: 22px;
        margin: 4% 2% 2%;} 
}

/*--------------------------------------BUSCADOR*/
#buscador{
    width: 5%;
    padding: 1% 0%;
    height: 100%;
    float: right;
    font-weight: 400;
    font-family:Roboto;
    color:black;
    text-decoration: none;}
#buscador:hover{ cursor: pointer;}
#buscadorabierto{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    padding: 5% 9%;
    font-family: sans-serif;
    position: fixed;
    z-index: 200000000000;
    text-align: center;
    max-width: 1200px; 
    float: left;}
#icobuscador{
    width: 90px;
    height: 90px;
    padding: 20px;
    border-radius: 50%;
    height: auto;
    margin: 1% 45%;
    background: white;
    float: left;}
#cerrarbuscador{
    width: 50px;
    height: 50px;
    position: absolute;
    font-weight: 400;
    font-family:Roboto;
    font-size: 30px;
    line-height: 50px;
    border-radius: 25px;
    cursor: pointer;
    background: white;}
.lupa{
    width: 50px;
    margin: 0%;
    float: left;}
#input-search{
    width: 90%;
    margin: 1%;
    height: 40px;
    font-size: 20px;
    text-indent: 10px;}
.content-search{
    width: 90%;
    float: right;
    margin-right: 9%;
    height: auto;
    position: relative;
    background: rgba(255,255,255,0.5);
    display: none;}
.content-table{
    width: 100%;
    height: auto;
    background: rgba(0,0,0,0.3);
    overflow-y: visible;
    overflow-x: hidden;}
.content-table table{ width: 100%;}
tbody tr td a{
    display: block;
    border-bottom: 1px solid white;
    padding: 10px;
    color: white;
    text-decoration: none;}
tbody tr td a:hover{ background: rgba(0,0,0,0.3);}
#table_length, #table_filter, #table_info, #table_paginate{ display: none;}


/*----------------------------carrinho*/
#carrinho form input{
    width: 100%;
    font-weight: 400;
    font-family: Roboto;
    font-size: 14px;
    height: 40px;
    background: #f4f4f4;
    border: 0;
    float: left;
    margin: 1% 0%;
    padding: 2%;
    border-radius: 6px;}

.forma-de-entrega{
    display: inline-block;
    color: #c30303;
    padding: 5px 15px 5px 5px;
    font-size: 1em;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;}

.button-cambiar-entrega{
    background: #ccc;
    padding: 4px 8px;
    color: #000;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    margin: 0 10px;}

.button-cambiar-entrega:hover{
    background-color: #c6c6c6;
}

#carrinho .flex {
    display: flex;
}

/*----------------------------contato*/
#contato{
    width: 100%;
    height: auto;
    float: left;
    text-align: center;}
.titu-destacados{
    width: 100%;
    margin: 70px 0% 0%;
    float: left;
    padding: 25% 0% 2%;
    background-image: url(../img/cavalo-na-luz.jpeg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top right;}
#contato form{
    width: 65%;
    margin: 2% 17.5%;
    padding: 5%;
    border-radius: 20px;
    float: left;}
#contato form input{
    width: 100%;
    font-weight: 400;
    font-family:Roboto;
    font-size: 14px;
    height: 60px;
    background: #f4f4f4;
    border: 0;
    float: left;
    margin: 2% 0%;
    padding: 2%;}
#contato form textarea{
    font-size: 14px;
    padding: 2%;
    margin: 2% 0%;
    width: 100%;
    height: 150px;
    font-weight: 400;
    font-family:Roboto;
    max-width: 100%;
    background: #f4f4f4;
    border: 0;
    float: left;}
#contato form button{
    cursor: pointer;
    background: #343434;
    border-radius: 5px;
    color: white;
    letter-spacing: 3px;
    float: left;
    width: 120px;
    height: 60px;
    margin: 2% 0%;
    border: 0;
    font-weight: 500;
    font-family:Roboto;
    transition: .3s;}
#contato form button:hover{
    opacity: .6;}

.mensajeneviado{
    width: 50%;
    margin: 1% 25%;
    border-radius: 20px;
    height: 30px;
    line-height: 30px;
    float: left;
    background: rgb(109, 207, 109);
    color: white;
    font-family: Roboto;}

@media (max-width:900px){
    #contato form{
        width: 90%;
        margin: 2% 5%;
        padding: 0%;}
    .titu-destacados{
        text-align: left;
        padding-left: 5%;
        font-size: 40px;}
}
@media (max-width:600px){
    .titu-destacados{
        font-size: 30px;}
}
@media (max-width:400px){
    .titu-destacados{
        padding: 35% 5% 2%;
        font-size: 25px;}
}


/*--------------------------------------------TIENDA---------*/
#tienda{
    width: 100%;
    height: auto;
    float: left;
    padding: 70px 0%;
    font-family:Roboto;
    text-align: left;
    transition: .3s;}
.info-tienda{
    width: 100%;
    background: #969696;
    float: left;
    padding: 3%;}
.img-desta{ width: 100%; }
.titu-info{
    width: 100%;
    float: left;
    font-size: 30px; 
    color:white;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;}

.filtro-tienda{
    width: 30%;
    margin:1% 35%;
    float: right;}
.filtro-tienda select{
    width: 100%;
    float: left;
    margin-top: 10%;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #c6c6c6;
    font-size: 14px;
    line-height: 20px;
    font-family: sans-serif;}

.tienda-productos{
    width: 100%;
    padding: 4% 8%;
    height: auto;
    float: left;}
.producto{
    width: 28%;
    margin: 2.5%;
    float: left;
    text-align: center;
    transition: .3s;}
.img-produ{
    width: 100%;
    transition: .3s;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.titu-produ{
    font-family:Roboto;
    font-size: 22px;
    margin: 3% 0% 1%;
    transition: .3s;
    color: #2c2c2c;}
.clase-produ{
    font-family:sans-serif;
    font-size: 18px;
    color: #2c2c2c;
    font-size: 14px;} 
.precio-produ2{
    font-family:sans-serif;
    font-size: 18px;
    line-height: 25px;
    color: #4d4d4d;
    font-size: 14px;}
.producto:hover .titu-produ{
    text-decoration: underline;}

.producto:hover .img-produ{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
    
@media (max-width:768px){
    #tienda{
        padding: 15% 5% 10%;}
    .filtro-tienda{
        width: 35%;
        float: right;}
    .producto{
        width: 90%;
        margin: 2.5% 5%;}
    .info{
        line-height: 40px;
        font-size: 16px;}
}
@media (max-width:600px){
    #tienda{
        padding: 120px 4% 10%;}
    .info-tienda{
        width: 90%;
        text-align: center;
        margin: 2% 5%;}
    .filtro-tienda{
        width: 95%;
        margin: 0% 2.5%;}
    .filtro-tienda select{
        width: 100%;
        float: right;
        margin: 0%;}
    .titu-info{
        font-size: 20px; }
}
/*----------------------------PRODUCTO*/
.img-banner{
    width:100%;
    float: left;
    display:none;
    margin-top: 70px;}
#producto{
    width: 100%;
    padding: 5% 10%;
    max-width:2000px;
    height: auto;
    float: left;
    text-align: left;
    transition: .3s;}
.foto-producto{
    float: left;
    width: 50%;
    height: auto;
    padding: 2%;}
#foto-producto input{    
    display: none;}
.fotogrande{
    float: left;
    padding: 50%;
    overflow: hidden;
    background-size: 100%;
    background-repeat: no-repeat;
    transition: .3s;
    position: relative;
    margin-top: -130%;}
.img-muestra{
    width: 22%;
    float: left;
    margin: 1.5%;
    position: relative;
    cursor: pointer;
    margin-top: 105%;}

.foto-productoactive{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 10000000000000;
    top:0;
    left: 0;
    background: rgba(0, 0, 0, 0.758);}
.fotograndeactive{
    padding: 0%;
    height: 90%;
    background-size: 45%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 2.5%;}

@media (min-width: 2000px){
    .fotograndeactive{
        height: 100%;
        background-size: 40%;
        margin:0%;}
}

#info-producto{
    float: left;
    width: 50%;
    height: auto;
    padding: 2%;}
.nombre-produ{
    font-size: 50px;
    line-height: 100px;
    font-weight: 500;
    font-family:Roboto;}
.descripcion-produ{
    font-size: 15px;
    line-height: 22px;
    color: #6c6c6c;
    font-weight: 400;
    font-family:Roboto;}
.medida-produ{
    width: 100%;
    float: left;
    margin: 2% 0% 5%;
    font-size: 15px;
    color: #6c6c6c;
    font-weight: 400;
    font-family:Roboto;}
.precio-produ{
    width: 100%;
    float: left;
    margin: 4% 0% 2%;
    font-size: 16px;
    color: #6c6c6c;
    font-weight: 400;
    font-family:Roboto;}
.verficha-produ{
    width: 100%;
    float: left;
    margin: -1% 0% 3%;
    font-size: 14px;
    color: #e6233d;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
    transition: .3s;
    font-family:Roboto;}
.verficha-produ:hover{
    font-weight: 600;}
    


.agregarcarrito{
    width: 100%;
    float: left;}
.agregarcarrito input{
    width: 50px;
    float: left;
    height: 30px;
    border: 1px solid rgb(93, 93, 93);
    font-size: 14px;
    margin-bottom: 2%;
    line-height: 20px;
    font-family: sans-serif;}
.btn-agregar{
    width: 70%;
    height: 42px;
    text-align: center;
    background: #343434;
    border-radius: 5px;
    color: white;
    line-height: 42px;
    font-weight: 500;
    font-family:Roboto;
    font-size: 18px;
    float: right;
    margin-left: 20px;
    border: 0;
    transition: .3s;}
.btn-agregar:hover{
    opacity: .5;
    cursor: pointer;}

.stock{
    margin-top: 5%;
    font-size: 16px;
    color: #6c6c6c;
    font-weight: 400;
    font-family:Roboto;}
.quantity{
  position: relative;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
  appearance: none;
  margin: 0;}
input[type=number]{
  appearance: textfield;}
.quantity input {
    width: 60px;
    height: 42px;
    line-height: 1.65;
    float: left;
    display: block;
    padding: 0;
    margin: 0;
    margin-left: 40px;
    text-align: center;}
.quantity input:focus {
    outline: 0;}
.quantity-nav {
    float: left;
    position: relative;
    height: 42px;}
.quantity-button {
    position: relative;
    cursor: pointer;
    width:40px;
    text-align: center;
    height: 100%;
    color: #333;
    font-size: 22px;
    font-family: "Trebuchet MS", Helvetica, sans-serif !important;
    line-height: 1.7;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;}
.quantity-button.quantity-up {
    float:right;
    top: 0;
    border: 1px solid #969696;}
.quantity-button.quantity-down {
    float:left;
    top: 0;
    margin-left: -100px;
    border: 1px solid #969696;
    left: 0;}
.quantity-button.quantity-down:hover, .quantity-button.quantity-up:hover {
    background: #969696;
    color: white;}
#fichatecnica{
    width: 100%;
    height: 100%;
    max-width:2000px;
    background: rgba(0,0,0,0.8);
    padding: 5% 9%;
    font-family: sans-serif;
    position: fixed;
    z-index: 200000000000;
    text-align: center;
    float: left;}
.img-ficha{
    width: 90%;
    margin: 10% 5%;
    float: left;}
.zoom{
    display:inline-block;
    position: relative;	}
.flecha{
    width:30px;
    height: 30px;
    background: rgba(255, 255, 255, 0);
    font-size: 28px;
    text-align: center;
    position: relative;
    z-index: 1000;
    color:black;
	font-family:Roboto;
    transform: scaleY(1.5);
    line-height: 35px;
    border:0;
    cursor: pointer;
    margin-top: 48%;
    transition: .3s;}
.flecha:hover{
    opacity: .5;}
#izq{ 
    float: left;
    margin-left: 20px;}
#dere{ 
    float: right;
    margin-right: 20px;}

.flechasactive{
    width: 30px;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    font-size: 28px;
    text-align: center;
    z-index: 100000000000000000000;
    color:white;
	font-family:Roboto;
    transform: scaleY(1.5);
    line-height: 35px;
    border:0;
    cursor: pointer;
    transition: .3s;}
.titurespon{
    display: none;}

@media (max-width:1700px){
    .muestra{
        float: left;
        width: 70%;
        margin: 5% 12%;}
}
@media (max-width:1500px){
    .muestra{
        width: 100%;
        margin: 5% 0%;}
    .btn-agregar{
        width:60%;}
}
@media (max-width:1300px){
    #producto{
        padding: 10% 5% 10%;}
}
@media (max-width:1040px){
    .titurespon{
        text-align: center;
        display: block;}
    .aparespon{
        display: none;}
    .foto-producto{
        width: 100%;
        padding: 2% 10%;}
    .img-muestra{
        display: none;}
    .fotogrande{
        margin-top: -50%;}

    .nombre-produ{
        font-size: 60px;}
    .verficha-produ{
        margin: 1% 0%;
        font-size: 18px;}

    #fichatecnica{ padding: 0%;}
    .img-ficha{
        width: 90%;
        margin: 15% 5%;}
    .fotograndeactive{ background-size: 70%;}

    #info-producto{
        width: 100%;
        padding: 0% 10%;
        height: auto;}
    .descripcion-produ{
        line-height: 30px;
        font-size: 22px;}
    .medida-produ{
        margin: 5% 0%;
        font-size: 20px;}
    .precio-produ{
        margin: 4% 0% 2%;
        font-size: 22px;}
        
    #relacionados{
        padding: 2%;}
    .rela{
        padding: 1%;}
}

@media (max-width:700px){
    #calcular{
        font-size: 12px;} 
    #info-producto{
        padding: 0% 5%;}
    .foto-producto{
        padding: 2% 5%;}
    #producto{
        padding: 100px 5% 10%;}
    .nombre-produ{
        font-size: 50px;}
}

@media (max-width:500px){
    .nombre-produ{
        width:95%;
        margin:0% 2.5%;
        text-transform: uppercase;
        border-bottom: 1px solid #e6233d;
        line-height: 55px;
        font-size: 40px;}
    .verficha-produ{
        margin-top: 14px;
        text-decoration: none;}
    #calcular{
        width: 70%;} 
    #info-producto{
        padding: 0% 2%;}
    .foto-producto{
        padding: 2%;}
    .agregarcarrito2{
        width: 100%;}
    .agregarcarrito{
        width: 100%;
        margin: 7% 0% 2%;}
    .descripcion-produ{
        line-height: 20px;
        font-size: 16px;}
    .medida-produ{
        font-size: 16px;}
    .precio-produ{
        font-size: 16px;}
    .btn-agregar{
        width: 80%;
        float: left;
        margin-top: 5%;
        height: 60px;
        margin-left: 0px;
        line-height: 60px;
        font-size: 16px;}
}


/*-------------------------------------------CARRITO*/
.carrito{
    width: 100%;
    height: auto;
    float: left;
    font-family: sans-serif;
    text-align: left;
    padding: 5% 10% 10%;}
.listaproductos{
    width: 98%;
    margin: 1%;
    padding: 2%;
    float: left;}
.listaproductos table{
    width: 100%;
    text-align: center;
    float: left;}
.listaproductos table td{
    border-bottom: 0px solid black;}
.titu-td{
    background: #d3d3d3;
    margin-bottom: 5px;
    font-size: 16px;
    padding:.5% 0%;
    font-family: Roboto;
    text-align: center;}
.finalizar, .volver{
    width: 50%;
    float: left;}
.finalizarcompra{
    width: 60%;
    margin-right:15%; 
    float: right;
    text-align:center;
    background: black;
    color: white;
    padding: 2% 0%;
    border:0;
    border-radius: 20px;
    font-size: 16px;
    transition:.3s;}
.volver a{
    width: 60%;
    padding: 2% 0%;
    text-align: center;
    background: #313131;
    text-decoration: none;
    color: white;
    margin-left:15%; 
    float: left;
    border-radius: 20px;
    font-size: 16px;
    transition:.3s;}
.finalizarcompra:hover, .volver a:hover{
    opacity: .7;
    letter-spacing: 2px;
    cursor: pointer;}
.sumaresta{
    width: 100%;
    height: 40px;
    float: left;
    background: white;
    cursor: pointer;
    border: .5px solid #c6c6c6;
    transition: .3s;}
.sumaresta:hover{
    background: grey;
    color: white;}
.cantidadresta{
    width: 25%;
    float: left;
    height: 40px;
    text-align: center;}
.cantidadcarrito{
    width: 50%;
    float: left;
    height: 40px;
    border: .5px solid #c6c6c6;
    line-height: 40px;
    text-align: center;}
.cantidadsuma{
    width: 25%;
    float: right;
    height: 40px;
    text-align: center;}
.nuevoformu{   
    display: none;}
#diferente:checked ~ .nuevoformu{
    display: block;}

.cnt-imgcarrito{
    width: 110px;
    padding: 10px;}
.img-carrito{width: 100%;}
.btn-eliminar{width: 30px;}

.carri-envio, .pedido{
    width: 98%;
    margin: 1%;
    padding: 2%;
    float: left;}
.pedido table, .formulario{
    width: 100%;
    float: left;
    margin-top: 20px;}

#faltaenvio{
    width:99%;
    margin: 1% 0%;
    float: left;
    background: #a70000;
    color:white;
    text-align: center;
    font-style: italic;
    padding: .3%;}

.formulario2{
    width: 100%;
    border-radius: 5px;
    padding: 2%;
    margin: 1% 0%;
    background: white;
    border: 1px solid #d0d0d0;
    float: left;
}
.radio{
    padding-bottom: 20px;}
.linea{
    border: 1px solid #ccc; }
.radio label{
    width:30%;
    margin: .5% 70% .5% 0%;
    display: inline-block;
    cursor: pointer;
    color: rgb(75, 75, 75);
    position: relative;
    padding: 5px 15px 5px 51px;
    font-size: 1em;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }
.radio label:hover{
    background: rgba(255, 65, 54, 0.1); }
.radio label:before{
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    position: absolute;
    left: 15px;
    border-radius: 50%;
    background: none;
    border: 2px solid grey; }
.radio input[type="radio"] {
    display: none; }
.radio input[type="radio"]:checked + label:before {
    width: 12px;
    height: 12px;
    background: rgb(181, 180, 180); 
    border: 3px solid white;}
.radio input[type="radio"]:checked + label {
   background: #c30303;
    border-radius: 2px;
    color: #fff; }

@media (max-width:1400px){
    .radio label{
        width:50%;
        margin: .5% 50% .5% 0%;}
}
@media (max-width:600px){
    .radio label{
        width:100%;
        margin: .5% 0% .5% 0%;}
}
/*---------------------------------------------FINALIZAR COMPRA---*/
.conte-finalizar{
    width: 75%;
    height: auto;
    float: left;
    font-family: sans-serif;
    text-align: left;
    padding: 8% 2% 2% 5%;}
.txt-finalizar{
    width: 100%;
    margin-top: 8px;
    margin-bottom: 10px;
    font-style: italic;}
.txt-finalizar2{
    font-size: 12px;
    font-style: italic;
    color: #4d4d4d;}
#endereco{
    width:100%;
    float: left;
    line-height: 20px;
    padding: 5px;
    margin: 25px 0px 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #d8d8d8;
    font-weight: bold;}

.enviaraotro,.contendornotas,.form-finalizar{
    width: 100%;
    border-radius: 5px;
    padding: 2%;
    margin: 1% 0%;
    background: white;
    border: 1px solid #d0d0d0;
    float: left;}
h1{ 
    font-family: sans-serif;
    font-size: 22px;}
.ordennom{
    width: 50%;
    padding: 1%;
    float: left;}
.ordennom input, .ordennom label{
    width: 100%;
    float: left;}
.ordennom input{
    height: 40px;
    margin: 10px 0px;
    border-radius: 5px;
    border: 1px solid #d0d0d0;}
h22{
    color: red;
    margin-left: 3px;}
#notas{
    width: 100%;
    float: left;
    height: 100px;
    max-width: 100%;
    min-width: 100%;
    border-radius: 5px;
    border: 1px solid #d0d0d0;
    margin: 15px 0px;
    padding: 10px;}
.filatabla{
    padding: 1%;
    width: 100%;
    float: left;
    border-bottom: 1px solid #d0d0d0;}
.totaltabla{
    font-weight: bold;
    padding: 1%;
    width: 100%;
    float: left;}
#conte-pix{
    width: 100%;
    float: left;
    margin: 10px 0px;
    font-size: 14px;
    line-height: 30px;}
.btn-finalizar{
    width: 30%;
    float: right;
    background: #c30303;
    color: white;
    text-align: center;
    line-height: 40px;
    border-radius: 5px;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    margin:1%;
    transition: .3s;
    border: 0;}
.btn-continuar, .btn-continuar2{
    width: 30%;
    float: right;
    background: rgb(124, 122, 122);
    color: white;
    text-align: center;
    border-radius: 5px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 40px;
    font-size: 14px;
    margin:1%;
    height: 40px;
    border: 0;
    transition: .3s;}
.btn-continuar2{
    background: #c30303;
}
.btn-continuar:hover, .btn-continuar2:hover, .btn-finalizar:hover{
    opacity: .6;
    cursor: pointer;
    letter-spacing: 1px;}

.inputmedios{
    display:none;}
.labelmedios{
    width: 50%;
    margin: 5px 0px;
    float: left;}

.form-finalizar table{
    width: 100%;}
.td-filatabla{
    width:40%; 
    float:left;}
.td-filatabla2{
    width:60%; 
    float:left;}
.txt-fin{
    width:100%;
    float: left;
    font-size: 12px;
    padding: 4% 0% 0%;}

@media (max-width:1200px){
    #carrinho{
        padding: 8% 0% 2% 1%;}
    .carrito{ padding: 100px 2% 5%;}
}
@media (max-width:900px){
    .btn-continuar, .btn-finalizar{ width: 48%;}
}
@media (max-width:768px){
    .carrito h1{ 
        padding: .2%;
        font-size: 16px;}
    .titu-td{ font-size: 12px;}
    .cnt-imgcarrito{
        width: 50px;
        padding: 5px;}
    .btn-eliminar{width: 20px;}
    .carri-envio form label{ 
        font-size: 12px;}
    .finalizar{
        padding: 2% .5%;}
    .datoscliente, .enviaraotro{
        padding: 2%;}
    
    .mediosdepago{
        padding: 2% 0%;}
    .td-filatabla{
        width: 20%; 
        font-size: 12px;}
    .td-filatabla2{
        width: 80%;
        font-size: 12px; }
    .listaproductos table{
        font-size: 10px; }

}
@media (max-width:500px){
    .btn-continuar, .btn-finalizar{font-size: 10px;}
    .detalleenvio{width: 85%;}
    .td-filatabla{width:25%;}
    .td-filatabla2{width:75%;}
    .ordennom{
        width: 100%;}
}
@media (max-width:400px){ 
    .carri-envio form label{ 
        font-size: 10px;}
    #resultadocalculadora{
        width: 130%;
        margin-top: 10%;
        margin-left: -32%;}
    .cantidadresta, .cantidadsuma{
        width: 30%;}
    .cantidadcarrito{
        width: 40%;}
    .apagar2{
        display: none;}
    #veropciones{
        width: 100%;}
    #formuenvio select, #formuenvio input{
        margin-top:5px;}
}

/*--------------------BIBLIOTECA*/
#artigos{
    width:100%;
    float:left;}
.banner-artigos{
    width: 100%;
    margin: 70px 0% 0%;
    float: left;
    padding: 25% 0% 2%;
    background-image: url(../img/perrobiblioteca.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top right;}
.titu-banner{
    width:18%;
    text-align: left;
    background: #313131c1;
    padding-left: 10px;
    float: right;
    color: white;
    font-size: 50px;
    letter-spacing: 3px;
    font-weight: 400;
    font-family:Roboto;}
.info-artigos{
    width:100%;
    float: left;}
.titu-artigos{
    width: 100%;
    float: left;
    font-size: 30px;
    font-weight: 600;
    font-family:Roboto;}
.filtro-artigos{
    width: 100%;
    float: left;}
.filtro-artigos select{
    width: 30%;
    float: left;
    margin: 1% 35%;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #c6c6c6;
    font-size: 14px;
    line-height: 20px;
    font-family: sans-serif;}
.itemartigos{
    width: 90%;
    float: left;
    padding: 20px;
    margin:5%;
    background: linear-gradient(180deg, white,#ebebeb);
    border-radius:10px;}

.img-artigos{
    width: 50%;
    border-radius:10px;
    float: left;}
.txt-artigos{
    width: 50%;
    font-family: Roboto;
    padding:2%;
    float: left;}
.titu-arti{
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 22px;}
.conte-arti{
    width: 80%;
    margin: 2% 10%;
    text-align: justify;
    line-height: 28px;
    font-size: 22px;}
.izq{ float: left;}
.dere{ float: right;}



.conte-carrito{
    width: 20%;
    float: right;
    background: rgb(233, 233, 233);
    font-family: sans-serif;
    padding:1%;
    border-radius: 5px;
    margin: 9% 5% 2% 0%;}
.titu-contecarri{
    width: 100%;
    margin-bottom: 5%;
    font-weight: bolder;
    font-size: 18px;}
.conte-produ{
    width: 100%;
    float: left;}
.img-contecarri{
    width: 30%;
    margin: 2.5% 0% 2.5% 2.5%;
    float: left;}
.conte-canti{
    float: left;
    margin:-1% 0% 0% -5%;
    width:25px;
    height: 25px;
    border-radius: 12.5px;
    background: #969696;
    text-align: center;
    line-height: 25px;
    color: white;}
.conte-nombre{
    width: 60%;
    float: left;
    margin-top: 45px;}
.conte-precio{
    width: 60%;
    float: left;
    margin-left: 12px;
    margin-top: 3px;
    font-size: 14px;}
.conte-total{
    width: 100%;
    padding-left: 5%;
    padding-top: 2%;
    float: left;
    line-height: 25px;
    margin-top: 20px;}
.btn-contecarri{
    width: 95%;
    margin-top: 6%;
    float: left;
    background: #00bb2d;
    border-radius: 5px;
    text-align: center;
    color:white;
    padding: 1% 0%;
    transition: .3s;
    text-decoration: none;}
.btn-contecarri:hover{
    background: #313131;}

.faltacompletar{   background-color: #f4c7c7;}

/*----------------------------SISTEMA-------------------------*/
#iniciarsesion{
    width: 100%;
    float: left;
    height: auto;
    padding: 5%;
    background-image: url(../img/sim-plus-banner.jpg);
    background-attachment: fixed;
    background-size: cover;}
#iniciarsesion form{
    width: 50%;
    margin: 10% 25%;
    float: left;
    background: rgba(255,255,255,0.8);
    border-radius: 40px;}
#iniciarsesion form input{
    width: 90%;
    float: left;
    height: 50px;
    margin: 1% 5%;}
#iniciarsesion form button{
    width: 40%;
    float: left;
    height: 30px;
    border-radius: 20px;
    background: black;
    color: white;
    margin: 1% 30% 4%;
    border: 0px;
    transition: .3s;}
#iniciarsesion form button:hover{
    letter-spacing: 2px;
    cursor: pointer;}
.logo-ingresar{
    width: 50%;
    margin: 5% 25% 1%;
    float: left;}
.titu-ingresar{
    font-family: Brandon-Light;
    font-style: italic;
    text-align: center;
    font-size: 20px;}
.cpanelerror{
    width:100%;
    font-size: 16px;
    color:#c30303;
    font-style: italic;
    float: left;
    text-align: center;
    font-family: Brandon-Med;}


.navcpanel{
    height:90px;}
.user{
    width: 100%;
    padding-right: 5px;
    line-height: 25px;
    float: left;
    font-family: Brandon-Light;
    height: 25px;
    font-size: 14px;
    background: black;
    text-align: right;
    color: white;
    text-transform: uppercase;}
.user a{
    color: white;
    font-size: 14px;
    font-family: Brandon-Light;
    text-decoration: none;}
.user a:hover{
    font-family: Brandon-Bold;}


#sistema{
    width: 100%;
    padding: 10%;
    float: left;
    font-family: Roboto;
    background-image: url(../img/header1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;}
.titu-cpanel{
    width:100%;
    border-radius: 5px;
    margin: 3% 0%;
    padding: 1%;
    float: left;
    text-align: center;
    color:white;
    background-color: #e6233d;
	font-family:Brandon-Bold;
    font-size: 28px;}
.btn-sistema{
    width: 23%;
    padding: 5% 0%;
    margin: 4% 1%;
    border-radius: 20px;
    float: left;
    background: rgba(255,255,255,0.8);
    text-align: center;
    font-size: 20px;
    color: black;
    text-decoration: none;
    transition: .3s;}
.btn-sistema:hover{
    color: white;
    background: rgba(0, 0, 0, 0.8);}
.btn-sistema2{
    font-size: 20px;
    width:95%;
    margin: 1% 2.5%;
    padding: 1% 0%;
    border-radius: 20px;
    text-transform: uppercase;
    float: left;
    text-align: center;
    color: white;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.8);
    transition: .3s;}
.btn-sistema2:hover{
    letter-spacing: 2px;
    background: rgba(0, 0, 0, 0.382);}

.logo-sistema{
    width: 30%;
    margin: 2% 35%;
    float: left;}

#sistema form{
    width: 70%;
    margin: 0% 15%;
    float: left;
    background: rgba(255,255,255,0.8);
    border-radius: 40px;}

#sistema form input, #sistema form select{
    width: 90%;
    float: left;
    height: 50px;
    margin: 1% 5%;}


#sistema form textarea{
    width: 90%;
    float: left;
    height: 100px;
    margin: 1% 5%;}

#sistema form button{
    width: 70%;
    float: left;
    border-radius: 20px;
    background: #e6233d;
    color: white;
    margin: 1% 15% 4%;
    padding: 2% 0%;
    font-size: 18px;
    border: 0px;
    transition: .3s;}

#sistema form button:hover{
    letter-spacing: 2px;
    opacity: .5;
    cursor: pointer;}

#sistema2{
    width: 100%;
    padding: 7% 2% 15%;
    font-family: Roboto;
    font-size: 12px;
    margin-bottom: -10%;
    float: left;
    background-image: url(../img/fondo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;}

#sistema2 table{
    background: white;
    text-align: center;}
.btn-td{
    width: 30px;
    margin: 0 auto;}
.dos{
    padding: 7px;
    font-size: 14px;}
.tres{
    border-bottom: 2px solid rgb(76, 76, 76);}
.volversistema a{
    width: 40%;
    margin: 2% 30%;
    padding: .8% 0%;
    text-align: center;
    background: black;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    float: left;
    border-radius: 20px;
    font-size: 16px;
    transition:.3s;}
.volversistema a:hover{
    opacity: .7;
    letter-spacing: 2px;
    cursor: pointer;}

.usuariostabla{
    width: 100%;
    float: left;}
.usuariostabla td{
    height: 30px;
    border-bottom: 1px solid rgb(102, 102, 102);}


.tablaventas{
    width: 100%;
    font-size: 13px;
}

.tablaventas td{
    height: 40px;
    border-bottom: 1px solid rgb(102, 102, 102);}

#sistema3{
    width: 100%;
    padding: 10% 2% 15%;
    font-family: Roboto;
    font-size: 12px;
    margin-bottom: -10%;
    float: left;
    background-image: url(../img/header1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;}

#sistema3 table{
    width: 100%;
    float: left;
    background: white;
    text-align: center;}

.btn-editar{
    width: 20px;
    margin-top: 7px;
    float: left;}
.btn-editar:hover, .btn-td:hover{
    background: black;
    cursor: pointer;}

#envioabierto, #detalleabierto, #estadopagoabierto, #estadoenvioabierto{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    padding: 5% 15%;
    font-family: sans-serif;
    position: fixed;
    z-index: 200000000000;
    text-align: center;
    max-width: 1920px; 
    float: left;}
#cerrar{
    width: 50px;
    height: 50px;
    position: absolute;
    font-family: Brandon-Med;
    font-size: 30px;
    line-height: 50px;
    border-radius: 25px;
    cursor: pointer;
    background: #F4F1ED;
    margin-left: -20px;
    margin-top: -20px;
    transition: .3s;}
#cerrar:hover{  opacity: .5;}
#datosenvio{
    width: 100%;
    background: white;
    text-align: left;
    padding: 2%;
    height: auto;}
#datosenvio select{
    width:80%;
    height: 40px;
    margin: 1% 10%;}

.titupop{
    width:100%;
    background: #e6233d;
    color:white;
    padding: 1%;
    text-align: center;}
.tablapop{
    width:100%;
    padding:1%;
    line-height: 30px;}
.lineapop{
    border-bottom: 1px solid black;}

.btn-enviardatos{
    border:0;
    background: rgba(0,0,0,0.0);}
.btn-enviardatos2{
    width: 50%;
    margin:2% 25%;
    background: black;
    color:white;
    border-radius: 20px;
    font-size: 16px;
    transition: .3s;
    cursor: pointer;
    padding: 1%;}
.btn-enviardatos2:hover{
    opacity: .5;}

.gracias{
    width: 100%;
    margin-bottom: 10%;
    float: left;
    color:white;
    text-align: center;
    font-family: Roboto;
    background-image: url(../img/fondo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.txt-gracias{
    width: 60%;
    margin: 8% 20%;
    float: left;
    background: rgba(0,0,0,0.8);
    border-radius: 30px;
    padding: 5% 2%;
}
h3{
    font-size: 40px;
    line-height: 80px;
    font-weight: 300;
}
.btn-tuscompras{
    width: 70%;
    margin: 2% 15%;
    border-radius: 15px;
    height: 40px;
    line-height: 40px;
    float: left;
    background: white;
    color: black;
    cursor: pointer;
    transition: .3s;
    text-decoration: none;
}
.btn-tuscompras:hover{
    opacity: .5;
    letter-spacing: 2px;
    font-weight: bold;
}
@media (max-width:900px){ 
    h3{
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 20px;
    }
}
@media (max-width:600px){ 
    .txt-gracias{
        width: 80%;
        margin: 8% 10%;
        padding: 5%;
    }
}
.label{
    width: 100%;
    float: left;
    text-align: center;
}
.formu-editar{
    width: 100%;
    float: left;
}
#imagen,#imagendos,#imagentres,#imagencuatro{
    width: 100%;}

.custom-input-file {
    float: left;
    border:1px solid black;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    text-align: center;
    width: 40%;
    margin: 1% 5%;
    padding-top: 20px;
  }

.titu-fotos{
      width: 100%;
      float: left;
      background: black;
      color: white;
      padding: 1%;

  }

  .labelul{
    width: 90%;
    margin: 1% 5%;
    float: left;
    list-style: none;
  }


#activardesactivar{
    width: 100%;
    float: left;
    height: auto;
    padding: 5%;
    background-image: url(../img/sim-plus-banner.jpg);
    background-attachment: fixed;
    background-size: cover;}
#activardesactivar form{
    width: 70%;
    margin: 5% 15%;
    float: left;
    background: rgba(255,255,255,0.9);
    border-radius: 40px;}
.titulabel2{
    width: 90%;
    padding-bottom: 20px;
    margin: 4% 5% 1%;
    text-align: center;
    letter-spacing: 1px;
    float: left;
	font-family:US-BLAAK-REGULAR;
    font-weight: bold;
    font-size: 24px;}
.acti4{
    font-size: 16px;
	font-family:Brandon-Light;
    margin-top: 10px;}
.acti4 b{
    text-transform: uppercase;
	font-family:Brandon-Bold;
    color:#e6233d;}

.titulabel{
    width: 100%;
    padding-top: 20px;
    text-align: center;
    letter-spacing: 1px;
    float: left;
	font-family:US-BLAAK-REGULAR;
    font-weight: bold;
    font-size: 20px;}
.txtacti{
    width:80%;
    margin: 1% 10%;
    height: 150px;
    max-width: 80%;
    min-width: 80%;
    max-height: 150px;
    min-height: 150px;}

.btn-esq{
    width: 40%;
    float: left;
    height: 30px;
    border-radius: 20px;
    background: black;
    color: white;
    margin: 1% 30% 4%;
    border: 0px;
    transition: .3s;}
.btn-esq:hover{
    opacity: .7;
    cursor: pointer;
    letter-spacing: 2px;}
#conteacti{
    width:80%;
    float: left;
    margin: 0% 10%;}
.acti{
    width: 48%;
    margin: 1%;
    padding: 1%;
    float: left;
    text-align: center;
    border-radius: 20px;
    background: #2c2c2c;
    color:white;
    font-family: roboto;
    transition: .3s;}
.activa{
    background: #e6233d;}
.acti1:hover{
    font-weight: bold;
    cursor: pointer;}
.acti2:hover:hover{
    font-weight: bold;
    cursor: pointer;}



.logo-desactivado{
    width: 30%;
    float: left;
    margin: 8% 35% 4%;}
.txt-desactivado{
	font-family:US-BLAAK-REGULAR; 
    width: 60%;
    margin: 0% 20% 5%;
    float: left;
    text-align: center;
    font-weight: 300;
    font-size: 24px;
    line-height: 40px;}
.filtro-persona{
    width:100%;
    float: left;}
.btn-persona{
    width: 48%;
    margin: 0% 1% 2%;
    padding: .5%;
    text-align: center;
    float: left;
    border-radius: 10px;
    background: #6c6c6c;
    border: 2px solid #6c6c6c;
    text-decoration: none;
    color: white;
    transition:.3s;
    font-size: 18px;}
.activo{
    background: #e6233d;
    border: 2px solid #aaaaaa;}
.btn-persona:hover{
    opacity: .5;
    letter-spacing: 2px;}


.btn-formu{
    width:50%;
    margin:1% 25%;
    float: left;
    background: #e6233d;
    color:white;
}
.txt-suascompras{
    padding: 1%;
    width:100%;
    float: left;
    font-size: 18px;
    font-family: Roboto;
    text-align: center;
}
.btn-whatsapp{
    width:50%;
    margin: 2% 25%;
    background: #00bb2d;
    color: white;
    float: left;
    font-size: 14px;
    border-radius: 10px;
    padding: 1%;
    font-family: Roboto;
    text-align: center;
}
.iconowhatsapp{
    width:10%;
}

.input-select{
    width: 100%;
    padding: 10px;
    float:left;
    border-radius: 6px;
    margin: 8px 0px 12px;}

/*----------------------------icono whatsapp*/
.whatsapp{
    width: 90px;
    height: 90px;
    border-radius: 45px;
    bottom: 10px;
    right: 10px;
    position: fixed;
    z-index: 100;
    background: #00bb2d;}
.img-wpp{
    width: 60%;
    margin: 20%;}

@media (max-width:500px){
    .whatsapp{
        width: 60px;
        height: 60px;}
}


.logo-pix{
    width:50px;
    float: left;}

.txt-pix{
    font-size: 25px;
    float: left;
    margin: 10px 10px;
    font-weight: bold;
    letter-spacing: 1px;}

.saludo-suacompra{
    width:100%;
    float: left;
    margin-top: 50px;
    padding: 2%;
    font-size: 16px;
    font-family: Roboto;
    background: rgba(255, 255, 255, 0.846);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.saludo-suacompra b{
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 18px;}
.titu-td2{
    background: #d3d3d3;
    margin-bottom: 5px;
    font-size: 12px;
    padding:.5% 0%;
    font-family: Roboto;
    text-align: center;}
#suas-compras{
    width: 100%;
    float: left;
    height: auto;
    padding: 8% 5% 12%;
    background-image: url(../img/header1.png);
    background-attachment: fixed;
    background-size: cover;}



@media (max-width:1900px){
    .conte-arti{
        width: 90%;
        margin: 2% 5%;
        line-height: 24px;
        font-size: 20px;}
    .titu-banner{
        width:22%;}
}
@media (max-width:1500px){
    .conte-arti{
        width: 100%;
        margin: 0%;
        line-height: 22px;
        font-size: 16px;}
    .titu-banner{
        width:28%;
        font-size: 45px;}
}
@media (max-width:1200px){
    .img-artigos{
        width: 40%;
        margin-top: 5%;}
    .txt-artigos{
        width: 60%;
        padding:2%;}
    .titu-banner{
        width:30%;
        font-size: 42px;}

    .conte-carrito{
        width: 24%;
        margin: 9% 1% 2% 0%;}
}
@media (max-width:1000px){
    .banner-artigos, .titu-destacados{
        padding: 35% 0% 0%;
        background-size: cover;
        background-attachment:unset;
        background-position: top;}
    .titu-banner{
        width:100%;
        text-align: center;
        font-size: 40px;}
    .conte-finalizar{
        width: 98%;
        margin-top: 50px;}
    .conte-carrito{
        display:none;}
}
@media (max-width:900px){
    .img-artigos{
        width: 50%;
        margin: 0% 25%;}
    .txt-artigos{
        width: 100%;
        padding:5%;}
}
@media (max-width:550px){
    .img-artigos{
        width: 100%;
        margin: 0%;}
    .txt-artigos{
        padding:5% 0%;}
    .titu-banner{
        font-size: 30px;}
    .nobr{
        display: none;}
}


#cargando{
    width:100%;
    height: 100%;
    padding-top: 200px;
    background: rgba(255, 255, 255, 0.438);
    text-align: center;
    position: fixed;}
.conteimagen{
    background: white;
    width:100px;
    height: 100px;
    border-radius: 50px;
    margin: 0 auto;
    background-image: url(../img/loader.gif);
    background-position: center;
    background-size: cover;}
.txt-finalizar3{
    font-size: 14px;
    font-style: italic;
    color: #a70000;
    margin-top: -10px;
    margin-bottom: 5px;}