/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 .holder {
    max-width: 455px;
    margin: 0 0;
    display: grid;
}
.holder div  {
  display: inline-flex;
}
  .holder .follow {
    display: block;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 12px;
    color: #666;
    text-align: center;
  }
  
  .live_in_stock {
    width: 20px;
    height: 20px;
    padding: 0px 0px 0px 5px;
    display: inline-block;
    margin: 0 auto;
    scale: 0.17;
}
  
  .live_in_stock > div {
    vertical-align: middle;
    width: 11px;
    height: 0px;
    border-radius: 61%;
    position: absolute;
    margin: 0 auto;
    border: 2px solid white;
    -webkit-animation: live 1.4s infinite ease-in-out;
    animation: live 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: table-cell;
    padding: 35px;
  }
  .live_in_stock > div:nth-child(1) {
    background-color: #02B2a8;
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
  }
  .live_in_stock > div:nth-child(2) {
    -webkit-animation-delay: 0.16s;
    animation-delay: 0.16s;
  }
  .live_in_stock > div:nth-child(3) {
    -webkit-animation-delay: 0.42s;
    animation-delay: 0.42s;
    border: 3px solid rgba(2, 178, 168, 0.7);
  }
  .live_in_stock > div:nth-child(4) {
    border: 3px solid #02B2a8;
    -webkit-animation-delay: -0.42s;
    animation-delay: -0.42s;
  }

  /** out of stock color */
  .live_out_of_stock {
    width: 20px;
    height: 20px;
    padding: 0px 0px 0px 5px;
    display: inline-block;
    margin: 0 auto;
    scale: 0.17;
  } 
  .live_out_of_stock > div {
    vertical-align: middle;
    width: 11px;
    height: 0px;
    border-radius: 100%;
    position: absolute;
    margin: 0 auto;
    border: 2px solid white;
    -webkit-animation: live 1.4s infinite ease-in-out;
    animation: live 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: table-cell;
    padding: 35px;
  }
  .live_out_of_stock > div:nth-child(1) {
    background-color: red;
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
  }
  .live_out_of_stock > div:nth-child(2) {
    -webkit-animation-delay: 0.16s;
    animation-delay: 0.16s;
  }
  .live_out_of_stock > div:nth-child(3) {
    -webkit-animation-delay: 0.42s;
    animation-delay: 0.42s;
    border: 3px solid rgba(255, 0, 0, 0.7);
  }
  .live_out_of_stock > div:nth-child(4) {
    border: 3px solid red;
    -webkit-animation-delay: -0.42s;
    animation-delay: -0.42s;
  }

  /** */
  
  @-webkit-keyframes live {
    0%, 80%, 100% {
      -webkit-transform: scale(0.6);
    }
    40% {
      -webkit-transform: scale(1);
    }
  }
  @keyframes live {
    0%, 80%, 100% {
      transform: scale(0.6);
      -webkit-transform: scale(0.6);
    }
    40% {
      transform: scale(1);
      -webkit-transform: scale(1);
    }
  }