/***** no considerar este 
don´t consired this 
********************************************/
.bs-product{
    display:inline-block;
    position:relative;
    width:400px;
    height:150px;
    background:silver;
    margin:1rem
  }
  /****** no considerar este / fin 
  don´t consired this / end 
  
  ________________________________________________
  
  > style
  ________________________________________________
  ************************************************/
  .cardbox-discount{
    text-align: center;
    color: white;
    font-size: 12px;
    font-weight: 500;
    line-height: 13px;
    padding-top: 2px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 35px;
    height: 35px;
    background: lime;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 85%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% 100%, 50% 85%, 0 100%, 0 0);
    z-index: 80;
  }
  .bs-discount{
    position:absolute;
    font-size:18px;
  }
  .bs-discount.right{
    right:0;
  }
  .bs-discount.bottom{
    bottom:0;
  }
  .bs-discount span,
  .bs-discount strong{
    box-sizing: border-box;
  }
  /***********************
    triangulo 
  ************************/ 
  .bs-discount.triangle{
    width: 6rem;
    height:3rem;
  }
  .bs-discount.triangle:before{
    content:" ";
    display:block;
    width: 0;
    height: 0;
    border-right: 3rem solid transparent;
    border-top: 2rem solid black;
    border-left: 3rem solid black;
    border-bottom: 2rem solid transparent;
  }
  .bs-discount.triangle span,
  .bs-discount.triangle strong{
    position:relative;
    top: -3rem;
    width:100%;
    padding:0 .5rem;
    display:block;
    color:white;
  }
  
  .bs-discount.triangle.right:before{
    border-right: 3rem solid black;
    border-top: 2rem solid black;
    border-left: 3rem solid transparent;
    border-bottom: 2rem solid transparent;
  }
  .bs-discount.right span,
  .bs-discount.right strong{
      text-align:right;
  }
  
  /************************************
    estrella
  *************************************/
  .bs-discount.star,
  .bs-discount.star:before,
  .bs-discount.star:after,
  .bs-discount.star span,
  .bs-discount.star span:before,
  .bs-discount.star span:after,
  .bs-discount.star strong,
  .bs-discount.star strong:before,
  .bs-discount.star strong:after
  {
    height: 4rem;
     width: 4rem;
    background:black;
  }
  .bs-discount.star:before,
  .bs-discount.star:after,
  .bs-discount.star span:before,
  .bs-discount.star span:after,
  .bs-discount.star strong:before,
  .bs-discount.star strong:after{
    content:" ";
    display:block;
    position:absolute;
  }
  .bs-discount.star{
    display:flex;
    transform: rotate(15deg);
  }
  
  .bs-discount.star:before,
  .bs-discount.star span:before,
  .bs-discount.star strong:before{
    transform: rotate(30deg);
  }
  .bs-discount.star:after,
  .bs-discount.star span:after,
  .bs-discount.star strong:after{
    transform: rotate(60deg);
  }
  .bs-discount.star span,
  .bs-discount.star strong{
    color:white;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    transform: rotate(-15deg);
    z-index:100;
  }
  .bs-discount.star span:before,
  .bs-discount.star span:after,
  .bs-discount.star strong:before,
  .bs-discount.star strong:after{
    z-index:-10;
  }
  /*************************************
    flag
  **************************************/
  .bs-discount.flag-down,
  .bs-discount.flag-side{
    background:black;
    color:white;
    text-align:center;
    width:4rem;
    line-height:3rem;
  }
  
  /*************************************
      flag-down
  **************************************/
  
  .bs-discount.flag-down:after{
    content:" ";
    border-left:2rem solid black;
    border-right:2rem solid black;
    border-bottom: 1rem solid transparent;
    position:absolute;
    top:100%;
    left:0;
    right:0;
  }
  /*********************************
    flag-side left
  **********************************/
  .bs-discount.left.flag-side:after{
    content:" ";
    border-top:1.5rem solid black;
    border-bottom:1.5rem solid black;
    border-right: 1rem solid transparent;
    position:absolute;
    top:0;
    left:100%;
    bottom:0;
  }
  /*********************************
    flag-side right
  **********************************/
  .bs-discount.right.flag-side:after{
    content:" ";
    border-top:1.5rem solid black;
    border-bottom:1.5rem solid black;
    border-left: 1rem solid transparent;
    position:absolute;
    top:0;
    right:100%;
    bottom:0;
  }
  /*************************************
    tag
  **************************************/
  .bs-discount.tag{
    margin:.25rem;
    background:black;
    color:white;
    text-align:center;
    width:4rem;
    line-height:3rem;
  }
  /******************************
     tag right
  ******************************/
  .bs-discount.tag.right:before,
  .bs-discount.tag.right:after{
    content:" ";
    display:block;
    position:absolute;
    right:100%;
  }
  .bs-discount.tag.right:before{  
    border-top:1.5rem solid transparent;
    border-bottom:1.5rem solid transparent;
    border-right: 1rem solid black;
    top:0;
    bottom:0;
  }
  .bs-discount.tag.right:after{
    
    height:0.4rem;
    width:0.4rem;
    background:white;
    top:50%;
    transform: translateY(-50%);
    border-radius:50%;
  }
  
  /******************************
     tag left
  ******************************/
  .bs-discount.tag.left:before,
  .bs-discount.tag.left:after{
    content:" ";
    display:block;
    position:absolute;
    left:100%;
  }
  .bs-discount.tag.left:before{  
    border-top:1.5rem solid transparent;
    border-bottom:1.5rem solid transparent;
    border-left: 1rem solid black;
    top:0;
    bottom:0;
  }
  .bs-discount.tag.left:after{
    
    height:0.4rem;
    width:0.4rem;
    background:white;
    top:50%;
    transform: translateY(-50%);
    border-radius:50%;
  }
  
  /******************************
     tag corner badge
  ******************************/
  
  .bs-discount.corner-badge{
    height:3rem;
    width:3rem;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .bs-discount.corner-badge span,
  .bs-discount.corner-barge strong{
    display:block;  
    background:black;
    color:white;
    width:100%;
    line-height:1.5rem;
    text-align:center;
  }
  .bs-discount.corner-badge.right span,
  .bs-discount.corner-barge.right strong{
    transform: rotate(45deg);
  }
  .bs-discount.corner-badge.left span,
  .bs-discount.corner-barge.left strong{
    transform: rotate(-45deg);
  }
  .bs-discount.corner-badge span:after,
  .bs-discount.corner-barge strong:after,
  .bs-discount.corner-badge span:before,
  .bs-discount.corner-barge strong:before{
      content:" ";
      display:block;
      border-top:solid transparent 1.5rem;
      position:absolute;
      top:0;
      bottom:0;
  }
  .bs-discount.corner-badge span:before,
  .bs-discount.corner-barge strong:before{
    border-right:solid black 1.5rem;
    right:100%;
  }
  .bs-discount.corner-badge span:after,
  .bs-discount.corner-barge strong:after{
    border-left:solid black 1.5rem;
    left:100%;
  }
  /*****************************************
    hexagon
  ******************************************/
  .bs-discount.hexagon,
  .bs-discount.hexagon span,
  .bs-discount.hexagon strong{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .bs-discount.hexagon{
    margin:0.5rem;
    color:white;
    width:4rem;
    height:2.5rem;
    background:black;
  }
  .bs-discount.hexagon:before,
  .bs-discount.hexagon:after{
    content:"";
    position:absolute;
    border-left:solid transparent 2rem;
    border-right:solid transparent 2rem; 
  }
  .bs-discount.hexagon:before{
    bottom:100%;
    border-bottom:solid black 1.4rem;
  }
  .bs-discount.hexagon:after{
    top:100%;
    border-top:solid black 1.4rem;
  }
  /*************************************
    > circle
  **************************************/
  .bs-discount.circle{
    background:black;
    color:white;
    height:4rem;
    width:4rem;
    border-radius:500rem;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:-.5rem;
  }
  /**************************************
    form-A
  ***************************************/
  .bs-discount.form-A.left{
    background:black;
    color:white;
    padding:1rem;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    margin:.5rem;
  }
  .bs-discount.form-A.right{
    background:black;
    color:white;
    padding:1rem;
    border-radius: 70% 30% 30% 70% / 30% 30% 70% 70%;
    margin:.5rem;
  }