@charset "UTF-8";
/*
  Player Skin Designer for Video.js

  This designer can be linked to at:
  https://codepen.io/heff/pen/EarCt/left/?editors=010
*/
/*farbe z.b. der Buttons*/
/*Höhe der Videosteuerung*/
/*buttons*/
/*Länge der Lautstärkeneinstellung*/
/*Textgröße der Zeitangaben*/
/*Playbutton über dem Video, wenn das Video angehalten (paused) ist*/
.vjs-bg-skin.vjs-paused .vjs-big-play-button {
  display: block; }

/*big-play-button zentrieren: margin an die halbe größe des buttons anpassen*/
.vjs-big-play-centered .vjs-big-play-button {
  margin-top: -40px;
  margin-left: -40px; }

/*Verhalten des big-play-button bei Mousover/Focus des Videos*/
.vjs-bg-skin.vjs-paused:hover .vjs-big-play-button,
.vjs-bg-skin.vjs-paused:focus .vjs-big-play-button {
  background-color: rgba(0, 0, 0, 0.5); }

.vjs-bg-skin {
  /*Container für Fortscgrittsbalken positionieren*/
  /*alle controls*/
  /*Buttons*/
  /*Playbutton links unten*/
  /*Mutebutton neben Playbutton*/
  /*Zeitangaben einblenden und zentrieren*/
  /*Farbe der Progressbar*/
  /*Farbe des Load-Progress*/
  /*Hintergrundfarbe der slider (progress und volume)*/
  /*Lautstärkeregelung zentriert neben button*/
  /*Höhe bei Moausover nocht ändern*/
  /*aktuellen Timcode (bei Mouseover) der Progressbar: nicht zeigen*/
  /*Playbutton über dem Video. zentriert wird der Button über den style vjs-big-play-centered des Videoelementes*/
  /*Symbol im big-play-button*/
  /*Verhalten des big-play-button bei Mousover/Focus des big-play-button*/ }
  .vjs-bg-skin .vjs-control-bar {
    /*Container für die gesamte controlbar: immer sichtbar, flex-end ausgerichtet*/
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    height: 65px;
    width: auto;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(rgba(153, 153, 153, 0.3)), color-stop(rgba(153, 153, 153, 0.7)), to(rgba(153, 153, 153, 0.95)));
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(153, 153, 153, 0.3), rgba(153, 153, 153, 0.7), rgba(153, 153, 153, 0.95));
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(153, 153, 153, 0.3), rgba(153, 153, 153, 0.7), rgba(153, 153, 153, 0.95)); }
  .vjs-bg-skin .vjs-progress-control {
    width: 100%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    position: absolute;
    top: 15px;
    left: 0; }
  .vjs-bg-skin .vjs-control {
    height: auto; }
  .vjs-bg-skin .vjs-control-bar .vjs-button {
    background-color: rgba(64, 64, 64, 0.8);
    border-radius: 15px;
    border: 2px solid #fff;
    margin: 7px;
    width: 30px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0; }
  .vjs-bg-skin .vjs-button > .vjs-icon-placeholder::before {
    position: relative;
    font-size: 1.5em;
    line-height: inherit; }
  .vjs-bg-skin .vjs-play-control {
    position: absolute;
    left: 0;
    bottom: 0; }
  .vjs-bg-skin .vjs-volume-panel {
    position: absolute;
    left: 37px;
    bottom: 0; }
  .vjs-bg-skin .vjs-time-control {
    display: block;
    height: 30px;
    line-height: 30px;
    margin: 7px;
    font-size: 1em;
    padding: 0;
    min-width: inherit; }
  .vjs-bg-skin .vjs-play-progress {
    background-color: #0C599F; }
  .vjs-bg-skin .vjs-play-progress::before {
    content: ""; }
  .vjs-bg-skin .vjs-load-progress div {
    background-color: rgba(230, 230, 230, 0.8); }
  .vjs-bg-skin .vjs-slider {
    background-color: rgba(255, 255, 255, 0.8); }
  .vjs-bg-skin .vjs-volume-horizontal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: auto; }
  .vjs-bg-skin .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
  .vjs-bg-skin .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
  .vjs-bg-skin .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
  .vjs-bg-skin .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal,
  .vjs-bg-skin .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
  .vjs-bg-skin .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-horizontal,
  .vjs-bg-skin .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal,
  .vjs-bg-skin .vjs-volume-panel .vjs-mute-control:active ~ .vjs-volume-control.vjs-volume-horizontal,
  .vjs-bg-skin .vjs-volume-panel .vjs-mute-control:focus ~ .vjs-volume-control.vjs-volume-horizontal,
  .vjs-bg-skin .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal,
  .vjs-bg-skin .vjs-volume-panel .vjs-volume-control {
    height: inherit;
    width: 5em; }
  .vjs-bg-skin .vjs-volume-horizontal .vjs-volume-bar {
    margin: 0 0 0 0.5em;
    width: 100%; }
  .vjs-bg-skin .vjs-volume-level {
    background-color: #0C599F; }
  .vjs-bg-skin .vjs-play-progress .vjs-time-tooltip {
    display: none !important; }
  .vjs-bg-skin .vjs-big-play-button {
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid #fff;
    border-radius: 40px;
    width: 80px;
    height: 80px; }
  .vjs-bg-skin .vjs-big-play-button .vjs-icon-placeholder:before {
    font-size: 50px;
    height: auto;
    padding: 0;
    margin: 0;
    line-height: 80px; }
  .vjs-bg-skin .vjs-big-play-button:hover,
  .vjs-bg-skin .vjs-big-play-button:focus {
    background-color: #0C599F;
    -webkit-transition: background-color .5s ease;
    -o-transition: background-color .5s ease;
    transition: background-color .5s ease; }