.t-ripple-container {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0; }

.t-ripple-effect {
  position: relative;
  overflow: hidden !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

.t-ripple-effect-icon {
  position: relative;
  overflow: visible !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-appearance: none; }

.t-ripple {
  width: 50px;
  overflow: hidden;
  background: black;
  border-radius: 50%;
  height: 50px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.t-ripple.t-ripple-animating {
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0, 0, 0.2, 1), width 0.5s cubic-bezier(0, 0, 0.2, 1), height 0.5s cubic-bezier(0, 0, 0.2, 1), opacity 1s cubic-bezier(0, 0, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1), width 0.5s cubic-bezier(0, 0, 0.2, 1), height 0.5s cubic-bezier(0, 0, 0.2, 1), opacity 1s cubic-bezier(0, 0, 0.2, 1); }

.t-ripple-effect-icon .t-ripple.t-ripple-animating {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
  transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1); }

.t-ripple.t-ripple-visible {
  opacity: 0.24; }

.t-ripple.t-ripple-visible.t-ripple-white {
  opacity: 0.30; }