.video-js .vjs-big-play-button:before,.video-js .vjs-play-control:before,.vjs-icon-play:before{content:'\f101'}$primary-foreground-color: #465324; $primary-background-color: #000000; $center-big-play-button: true; .video-js{font-size:10px;color:$primary-foreground-color}.vjs-default-skin .vjs-big-play-button{font-size:2.5em;$big-play-width:2em;$big-play-height:1.5em;line-height:$big-play-height;height:$big-play-height;width:$big-play-width;border:.06666em solid;border-radius:.2em;@if $center-big-play-button {  
    left: 50%;
    top: 50%;
    margin-left: -($big-play-width / 2);
    margin-top: -($big-play-height / 2);   
  } @else {
    left: 0.5em;
    top: 0.5em;
  }}.video-js .vjs-big-play-button,.video-js .vjs-control-bar,.video-js .vjs-menu-button .vjs-menu-content{background-color:rgba($primary-background-color,.9)}$slider-bg-color: lighten($primary-background-color,90%); .video-js .vjs-slider{background-color:rgba($slider-bg-color,.9)}.video-js .vjs-play-progress,.video-js .vjs-slider-bar,.video-js .vjs-volume-level{background:0 0}.video-js .vjs-load-progress{background:ligthen($slider-bg-color,80%);background:rgba($slider-bg-color,.8)}.video-js .vjs-load-progress div{background:ligthen($slider-bg-color,80%);background:rgba($slider-bg-color,.9)}body{margin:0}.video-js .vjs-play-control.vjs-playing:before,.vjs-icon-pause:before{top:0}.video-js .vjs-control-bar{background-color:rgba(193,2,2,.8);border-radius:30px;bottom:4px;width:99%;left:0;right:0;margin-right:auto;margin-left:auto;transition:all .4s ease-out;-moz-transition:all .4s ease-out;-o-transition:all .4s ease-out;-webkit-transition:all .4s ease-out;-ms-transition:all .4s ease-out}.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{width:10%;transition:all .4s ease-out;-moz-transition:all .4s ease-out;-o-transition:all .4s ease-out;-webkit-transition:all .4s ease-out;-ms-transition:all .4s ease-out}.video-js .vjs-big-play-button{height:3em;border:4px solid rgba(255,255,255,.8);background-color:transparent;border-radius:4.2em}.video-js .vjs-big-play-button:before{font-size:2.6em;top:18px;opacity:.8;color:#fff}.video-js .vjs-mouse-display:before,.video-js .vjs-play-progress:before,.video-js .vjs-volume-level:before,.vjs-icon-circle:before{content:'\f111';color:#a81c29;border:5px outset #f7f5f7;border-radius:56px;margin-top:-5px}.video-js:hover .vjs-big-play-button:before{color:#a81c29}.vjs-big-play-centered .vjs-big-play-button{margin-top:-1.75em}.video-js:hover .vjs-big-play-button{background-color:rgba(255,255,255,.7);box-shadow:0 1px 20px 6px #797979;border:3px dotted #a81c29;animation:animationFrames linear 1s;animation-iteration-count:1;transform-origin:50% 50%;-webkit-animation:animationFrames linear 1s;-webkit-animation-iteration-count:1;-webkit-transform-origin:50% 50%;-moz-animation:animationFrames linear 1s;-moz-animation-iteration-count:1;-moz-transform-origin:50% 50%;-o-animation:animationFrames linear 1s;-o-animation-iteration-count:1;-o-transform-origin:50% 50%;-ms-animation:animationFrames linear 1s;-ms-animation-iteration-count:1;-ms-transform-origin:50% 50%}@keyframes animationFrames{0%{transform:rotate(0) scaleX(1) scaleY(1)}10%,20%{transform:rotate(-3deg) scaleX(.8) scaleY(.8)}30%,50%,70%,90%{transform:rotate(3deg) scaleX(1.2) scaleY(1.2)}40%,60%,80%{transform:rotate(-3deg) scaleX(1.2) scaleY(1.2)}100%{transform:rotate(0) scaleX(1.2) scaleY(1.2)}}@-moz-keyframes animationFrames{0%{-moz-transform:rotate(0) scaleX(1) scaleY(1)}10%,20%{-moz-transform:rotate(-3deg) scaleX(.8) scaleY(.8)}30%,50%,70%,90%{-moz-transform:rotate(3deg) scaleX(1.2) scaleY(1.2)}40%,60%,80%{-moz-transform:rotate(-3deg) scaleX(1.2) scaleY(1.2)}100%{-moz-transform:rotate(0) scaleX(1.2) scaleY(1.2)}}@-webkit-keyframes animationFrames{0%{-webkit-transform:rotate(0) scaleX(1) scaleY(1)}10%,20%{-webkit-transform:rotate(-3deg) scaleX(.8) scaleY(.8)}30%,50%,70%,90%{-webkit-transform:rotate(3deg) scaleX(1.2) scaleY(1.2)}40%,60%,80%{-webkit-transform:rotate(-3deg) scaleX(1.2) scaleY(1.2)}100%{-webkit-transform:rotate(0) scaleX(1.2) scaleY(1.2)}}@-o-keyframes animationFrames{0%{-o-transform:rotate(0) scaleX(1) scaleY(1)}10%,20%{-o-transform:rotate(-3deg) scaleX(.8) scaleY(.8)}30%,50%,70%,90%{-o-transform:rotate(3deg) scaleX(1.2) scaleY(1.2)}40%,60%,80%{-o-transform:rotate(-3deg) scaleX(1.2) scaleY(1.2)}100%{-o-transform:rotate(0) scaleX(1.2) scaleY(1.2)}}@-ms-keyframes animationFrames{0%{-ms-transform:rotate(0) scaleX(1) scaleY(1)}10%,20%{-ms-transform:rotate(-3deg) scaleX(.8) scaleY(.8)}30%,50%,70%,90%{-ms-transform:rotate(3deg) scaleX(1.2) scaleY(1.2)}40%,60%,80%{-ms-transform:rotate(-3deg) scaleX(1.2) scaleY(1.2)}100%{-ms-transform:rotate(0) scaleX(1.2) scaleY(1.2)}}