@charset "utf-8";



@keyframes button--infinite {
  75% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.15), 0 0 0 16px rgba(255, 255, 255, 0.15);
  }
  90% {
    box-shadow: 0 0 0 6px transparent, 0 0 0 12px transparent;
  }
}        
     
.play-button{width: 30px;height: 30px;border-radius: 50%;animation: button--infinite 2.5s ease infinite;transition: transform .2s ease;display: flex;align-items: center;justify-content: center;position:absolute;top:50%;left:50%;    transform: translate(-50%,-50%);}
.play-button:before {content: "";position: absolute;top: -8px;left: -8px;right: -8px;bottom: -8px;background: #fff;border-radius: inherit;transform: scale(0.8);transition: 1s ease;}
.play-button:hover:before {transform: scale(1);}
.play-button:active {transform: scale(0.95);}
.play-icon {border:10px solid transparent;border-left-color: #236dc7;transform: scaleY(0.8);margin-right: -12px;border-radius: 5px;}