span.play-wrapper{position:relative;height:112px;width:112px;overflow:hidden}span.play-wrapper:after{content:"";width:100%;height:100%;border:2px solid #ff1aa7;border-radius:50%;display:block;transform:scale(0);opacity:0;animation-name:ringanim;animation-duration:.5s;animation-fill-mode:forwards;animation-delay:2.6s}span.play-wrapper img.anim-v{position:absolute;left:0;top:50%;transform:translateY(-50%);animation-name:vrotate;animation-duration:.4s;animation-fill-mode:forwards;animation-delay:2.4s}span.play-wrapper img.anim-i{position:absolute;left:0;top:50%;transform:translateY(-50%) translateX(48px);animation-name:vigone;animation-duration:.5s;animation-fill-mode:forwards;animation-delay:2.2s}span.play-wrapper img.anim-ii{position:absolute;left:0;top:50%;transform:translateY(-50%) translateX(71px);animation-name:viigone;animation-duration:.5s;animation-fill-mode:forwards;animation-delay:2s}@keyframes ringanim{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes vrotate{0%{transform:translateX(0) translateY(-50%) rotate(0deg)}to{transform:translateX(26px) translateY(-50%) rotate(-90deg)}}@keyframes vigone{0%{transform:translateY(-50%) translateX(48px)}to{transform:translateY(-50%) translateX(200px)}}@keyframes viigone{0%{transform:translateY(-50%) translateX(71px)}to{transform:translateY(-50%) translateX(200px)}}.play-overlay{top:0;height:100%;background-color:rgba(0,0,0,.3);z-index:2;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:opacity .5s ease-in-out;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.play-overlay,.progress-container{position:absolute;left:0;width:100%}.progress-container{z-index:10;bottom:0;height:2px;background-color:#ffb3e2;transition:transform .25s ease-in-out,height .25s ease-in-out}.progress-container .progress{height:100%;background-color:#ff1aa7;z-index:1;transition:width .25s linear;position:relative;cursor:pointer}.progress-container .progress .knob{position:absolute;top:-4px;right:0;width:14px;height:14px;background-color:#ff1aa7;border:1px solid #ffe6f5;border-radius:50%;transform:translateX(50%) scale(0);transition:opacity .5s ease-in-out,transform .5s ease-in-out}.video-container{position:relative}.video-container video{cursor:pointer}.video-container video::cue{color:#fff;font-size:20px}.video-container video::cue(b){color:#33d812;font-weight:400}.video-container video::cue(i){color:#00bafd;font-style:normal}.video-container video::cue(u){text-decoration:none;color:#f0e;font-style:normal}.video-container video::cue(.myclass){color:red}.timestamp .timestamp-text{color:#fff;font-size:15px;transition:opacity .25s ease-in-out}.control-panel{position:absolute;bottom:2px;left:0;z-index:2;width:100%;height:43px;pointer-events:none;background:rgba(0,0,0,.2);display:flex;padding:0 20px;transition:transform .5s ease-in-out,opacity .5s ease-in-out}