.ripple{
    position: absolute;
    top:0; left:0; bottom:0; right:0;
    overflow: hidden;
    -webkit-transform: translateZ(0); /* to contain zoomed ripple */
    transform: translateZ(0);
    border-radius: inherit; /* inherit from parent (rounded buttons etc) */
    pointer-events: none; /* allow user interaction */
                    animation: ripple-shadow 0.4s forwards;
    -webkit-animation: ripple-shadow 0.4s forwards;
}
.rippleWave{
    backface-visibility: hidden;
    position: absolute;
    border-radius: 50%;
    transform: scale(0.7); -webkit-transform: scale(0.7);
    background: #52A8CF;
    opacity: 0.3;
                    animation: ripple 1s forwards;
    -webkit-animation: ripple 1s forwards;
}
@keyframes ripple-shadow {
    0%   {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
    20%  {box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
    100% {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
}
@-webkit-keyframes ripple-shadow {
    0%   {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
    20%  {box-shadow: 0 4px 16px rgba(0,0,0,0.3);}
    100% {box-shadow: 0 0 0 rgba(0,0,0,0.0);}
}
@keyframes ripple {
    to {transform: scale(24); opacity:0;}
}
@-webkit-keyframes ripple {
    to {-webkit-transform: scale(24); opacity:0;}
}

[class*=mad-button-]{
 text-transform: uppercase;
    text-decoration: none;
    border: 0; outline: 0;
    background: none;
    transition: 0.2s;
    cursor: pointer;

}
[
.mad-button-action{

    border-radius: 32px;
    box-shadow: /*amb*/ 0 0   2px rgba(0,0,0,0.13),
                            /*key*/ 0 5px 7px rgba(0,0,0,0.2);
}.mad-button-action:hover{

}


.cell{}