.video-js .vjs-big-play-button,
.vjs-custom .vjs-big-play-button {
    height: 100px;
    width: 100px;
}

.video-js:hover .vjs-big-play-button, 
.video-js .vjs-big-play-button:focus,
.vjs-custom:hover .vjs-big-play-button, 
.vjs-custom .vjs-big-play-button:focus {
    background-color: transparent;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder,
.vjs-custom .vjs-big-play-button .vjs-icon-placeholder  {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    content: "";
    background-image: url('../img/blue-play-button.svg');
    background-repeat: no-repeat;
    background-size:cover;
    background-color:transparent;
    background-position: center;
    border: none !important;
    box-shadow: none !important;
    width:100px;
    height:100px;
    cursor:pointer;
    border:0px;
    outline:0;
    transition:all 0.2s ease-in-out;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:hover:before {
    transform: scale(1.1);
}

/* This style is necessary for big play button show / hide functionality */
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}

/* Big Play button styles */
.video-js .vjs-big-play-button,
.video-js .vjs-big-play-button:hover,
.video-js .vjs-big-play-button:focus {
    background-color: transparent;
    border: none;
}

.vjs-custom .vjs-big-play-button,
.vjs-custom .vjs-big-play-button:hover,
.vjs-custom .vjs-big-play-button:focus {
    background-color: transparent;
    border: none;
}


/* Change all text and icon colors in the player. */
.vjs-custom.video-js {
    color: #4AB5FE;
}

/* Change the border of the big play button. */
.vjs-custom .vjs-big-play-button {
    border-color: #4AB5FE;
}

/* Change the color of various "bars". */
.vjs-custom .vjs-volume-level,
.vjs-custom .vjs-play-progress,
.vjs-custom .vjs-slider-bar {
    background: #4AB5FE;
}

/* The default color of control backgrounds is mostly black but with a little
   bit of blue so it can still be seen on all-black video frames, which are common. */
.video-js .vjs-control-bar,
.video-js .vjs-menu-button .vjs-menu-content {
    /* IE8 - has no alpha support */
    background-color: #2B333F;
    /* Opacity: 1.0 = 100%, 0.0 = 0% */
    background-color: rgba(#2B333F, 0.7);
}

.video-js .vjs-control-bar {
    width: 60%; 
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 768px) {
    .video-js .vjs-control-bar {
      width: 90%;
    }
  }
  
  @media (min-width: 769px) {
    .vjs-control-bar {
      width: 70%;
    }
}

.video-js .vjs-current-time {
    display: block;
}

/* Control bar styles */
.vjs-play-control {
    border: 2px solid hsl(0, 0%, 100%);
    border-radius: 5px;
    background-color: #4F4F4F !important;
    color: #ffffff !important;
}
  
.vjs-play-control:hover {
    background-color: #4F4F4F;
    color: #ffffff !important;
}

.vjs-play-control .vjs-icon-placeholder:before {
    content: "\f144";
    font-family: "VideoJS";
    font-size: 20px;
}

.vjs-current-time-display {
    color: #D3D3D3;
    font-size: 14px;
    background-color: #4F4F4F;
    padding: 5px;
    border-radius: 4px;
}

.vjs-progress-control {
    background-color: transparent;
    height: 8px;
}
  
.vjs-progress-control .vjs-play-progress {
    background-color: #4AB5FE; 
}
  
.vjs-progress-control .vjs-load-progress {
    background-color: #555555; 
}

.video-js .vjs-control-bar {
    background-color: transparent;
}

.vjs-fullscreen-control {
    background-color: #4F4F4F !important;
    border-radius: 5px 0 0 5px;
}
  
.vjs-fullscreen-control:hover {
    background-color: #4F4F4F !important;
}

.vjs-fullscreen-control .vjs-icon-placeholder:before {
    color: #ffffff;
}

.vjs-volume-panel {
    border: none;
    background-color: #4F4F4F !important;
    border-radius: 0 5px 5px 0;
}
  
.vjs-volume-level {
    background-color: #ffffff;
}
  
.vjs-volume-panel .vjs-mute-control {
    color: #ffffff;
}
  

.video-js .vjs-progress-holder{
    height:5px;
    border-radius: 10px;
}

.vjs-progress-control .vjs-play-progress{
    border-radius:10px;
}

.video-js .vjs-play-progress:before{
    display:none;
}

.video-js .vjs-big-play-button{
    margin-top:-50px;
}

.video-js .vjs-progress-holder .vjs-load-progress div,
.video-js .vjs-progress-holder .vjs-load-progress{
    border-radius:10px;
}