*{
 margin:0;
 padding:0; 
}
.main_articulos
{
 display: block;
 float: left;   
 width:100vw;
 height:100vh;
 overflow-x: hidden;
 background: #F8F8FF;
}
.btn_wsp
{
  position: fixed;
  width: 55px;
  height: 55px;
  line-height: 55px;
  bottom: 30px;
  right: 30px;
  background: #0df053;
  color: white;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
  z-index: 100;
}
.btn_wsp:hover
{
  text-decoration: none;
  color:#0df053;
  background: white;

}
.btn_arriba
{
  position: fixed;
  width: 55px;
  height: 55px;
  line-height: 55px;
  bottom: 90px;
  right: 30px;
  background: #0d91f0;
  color: white;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
  z-index: 100;
}
.btn_arriba:hover
{
  text-decoration: none;
  color:#0d91f0;
  background: white;
}

p#titulodesta
{
 display: block;
 float: left;
 margin-left: 5%;
 margin-top: 8%;
 padding-left: 5px;
 width: 70%;
 height: 20px;
 font-weight: 600;
 font-size: 20px;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 text-align: left;
 color:black;
}
p#titulocar
{
 display: block;
 float: left;
 margin-left: 26%;
 margin-top: 2px;
 padding-left: 5px;
 width: 45%;
 height: 20px;
 font-weight: 400;
 font-size: 12px;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 text-align: center;
 color:white;
 border-radius: 3px;
 background: #BA55D3;
}
a#btn_bus_vol
{
 display: block; 
 float: right;
 margin-right: 5%;
 margin-top: 8%;
 width: 15%;
 height: 20px;
 line-height: 25px;
 text-align: right;
} 
a#btn_bus_vol:hover
{
 font-weight: 600;
 background: transparent;
}
.noproductos
{
 display: none;
 float: left;
 margin-left: 5%;
 margin-top: 3%; 
 width: 90%;
 height: 70%;
 /* background: red; */
}
.contiene
{
 display: block;
 float:left;
 margin-left: 20%;
 width: 60%;
 height: calc(10%);
 border-radius: 3px;
 background: white;
}
.nodata
{
 display: block;
 float:left;
 width: 40px;
 height: calc(90%);
 padding-left: 25px;
}
.titulo
{
 display: block;
 float: left;
 margin-left: 5px;
 margin-top: 2%;
 padding-left: 5px;
 width: 80%;
 height: auto;
 font-weight: 400;
 font-size: 12px;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 text-align: left;
 color:black;
}
.productos
{
 display: grid;
 float: left;
 margin-left: 5%;
 margin-top: 3%; 
 width: 90%;
 grid-template-columns: repeat(5, 0.5fr);
 grid-auto-rows: auto;
 grid-gap: 5px;
 grid-auto-rows: minmax(300px, 450px);
 background: #F8F8FF;
}
.productos > div 
{
 border: solid #CACACA 1px;
 border-radius: 3px;
 padding: 5px;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 background: white;
}
.trakcod
{
 display: block;
 float: left;
 width: 99%;
 padding-left: 1px;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 font-size: 11px;
 font-weight: 400;
 overflow-wrap: break-word;
 word-break: break-all;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 color:#696969;
}
.burbuja img
{
 display: block;
 float: left;
 margin-left: 6%;
 margin-top: 2%;
 width: 200px;
 height: 200px;
 background: white;
}
.burbuja:hover
{
 cursor: pointer;
} 
.nombre
{
 width: 98%; 
 height: 15%;
 margin-left: 2px;
 border:0;  
 resize: none;
 font-size: 11px;
 text-align: left;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 font-weight: 600;
 overflow: hidden;
 color:black;
}
.prelst
{
 display: block;
 float: left;   
 margin-left: 2px;
 width: 98%;
 border: 0;   
 text-align: center; 
 font-size: 18px;  
 font-weight: 600;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 color:black;
}
.btn_clides 
{
 display: block;   
 float: left;
 width: 80%;
 height: 30px;
 margin-left: 10%;
 margin-top: 2%;
 text-align: center;
 line-height: 30px;
 padding: 0;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 font-weight: bold !important;
}
.paginador
{
  display: block;
  float: left;
  margin-left: 5%;
  margin-top: 5px;
  width: 90%;
  height: 30px;
  /* background: pink; */
}
.paginador a#btn_siguiente
{
 display: block;
 float: right; 
 font-weight: 400;
 width: 140px;
 text-decoration: none;
 text-align: center;
 color:black;
}
.paginador a#btn_anterior
{
 display: block;
 float: left; 
 font-weight: 400;
 width: 140px;
 text-decoration: none;
 text-align: center;
 color:black;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
 .btn_wsp
 {
  bottom: 20px;
  right: 10px;
 }
 .btn_arriba
 {
  bottom: 80px;
  right: 10px;
 }
 p#titulodesta
 {
  margin-left: 0.5%;
  margin-top: 25%;
  width: 60%;
  font-size: 12px;
  overflow-wrap: break-word;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 p#titulocar
 {
  margin-left: 25%;
  margin-top: 3px;
  width: 50%;
  height: 15px;
  font-weight: 400;
  font-size: 10px;
 }
 a#btn_bus_vol
 {
  margin-right: 0.5%;
  margin-top: 25%;
  width: 35%;
  font-size: 10px;
  line-height: 15px;
 } 
 .noproductos
 {
  margin-left: 0.5%;
  margin-top: 3%; 
  width: 99%;
 }
 .contiene
 {
  margin-left: 1%;
  width: 98%;
 }
 .titulo
 {
  margin-top: 4%;
 }
 .productos
 {
  margin-left: 0.5%;
  width: 99%;
  grid-template-columns: repeat(2, minmax(100px, 0.5fr));
  grid-gap: 1px;
  grid-auto-rows: minmax(100px, 350px);
 }
 .burbuja img
 {
  display: block;
  float: left;
  margin-left: 10%;
  width: 150px;
  height: 150px;
  background: white;
 }
 .paginador
 {
  margin-left: 0.5%;
  width: 99%;
 }
}