{% load i18n%}
<style>
  


  .shabutton {
    box-shadow: -9px -3px 33px -3px rgba(199,184,35,0.61);
-webkit-box-shadow: -9px -3px 33px -3px rgba(199,184,35,0.61);
-moz-box-shadow: -9px -3px 33px -3px rgba(199,184,35,0.61);
  background-color: #215692; /* Green */
  border: none;
  color: white;
  padding: 13px;
  text-align: center;
  text-decoration: none;
  border-radius: 25px;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  box-shadow : 10px;
}


.shabutton:hover {
  background-color: #c6c13d;
  color:  white;
}


@-webkit-keyframes bounce {
        0% {
    transform: scale(1,0) translate(0px, 0px);
  }
  
  30%{
    transform: scale(1,1) translate(0px, 10px); 
  }

  75%{
    transform: scale(1,1.1) translate(0px, -25px); 
  }
  
  

  
  
}


.bounce {
      /* animation: bounce 2s ;
        -webkit-animation: bounce 1s ;
        -moz-animation: bounce 1s ;
        -o-animation: bounce 1s ;
   */
   -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  } 
  
  
</style>

<table>
  <tr>
    <td>
      <img src='/media/images/orderkiik.png' width="50px">
  </td>
  <td>
    <a href="#"  class="shabutton bounce"   data-toggle='modal'   id='butaun_modal_detallu'  data-target= '#listaorderprodutu'>Total Order  ({{total}})</a>

  </td>
</tr>
  </table>