
/*PLAYER */

 .vjs-big-play-button {  display: none !important; } 

.theo-secondary-color.vjs-control-bar  { position: fixed !important; bottom: 0px; left: 0px; opacity: 1;   } 

.contentPlayer { position: relative; width: 100%; height: 100%; background: #000; color: white; width: 100%; height: 100%; overflow:hidden;   }
.contentPlayer div.videoheader { position: absolute; top: 0px; left: 0px;  padding: 30px; width: 100%; height: 10%; min-height: 100px; font-size: 2em;  color: white; z-index: 99; cursor: pointer;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.contentPlayer.fixed { position: fixed; top: 0px; left: 0px; z-index: 9999; background: #000; color: white; width: 100%; height: 100%; overflow:hidden; }
.contentPlayer.fixed div.videoheader { position: fixed; top: 0px; left: 0px;  padding: 30px; width: 100%; height: 10%; min-height: 100px; font-size: 2em;  color: white; z-index: 9999; cursor: pointer;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100 */
  background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  }


.contentPlayer div.videoheader .videotitle { float: left;  }
.contentPlayer div.videoheader .closePlayer { float: left;  }

.player-controls { background: rgba(0,0,0,0.9); width: 100%; height: 40px; left: 0px; bottom: 0px; position: absolute; }

.player-progress-bar { position: absolute; background: rgba(81,81,81,0.8); bottom: 40px; left: 0px; width: 100%; height: 10px; transition: all ease 0.2s; cursor: pointer;  }
.player-progress-bar:hover { height: 40px;  }

.player-timers { position: absolute; bottom: 15px; height: 20px; left: -2px; font-size: 0.7em;  }


.contentPlayer .icon-play { position: absolute; top: 40%; left: 0; right: 0; margin: 0px auto; font-size: 4em; color: white;  width: 100%; height: 100%; text-align: center; }

.btn-white { color: white !important; padding-right: 20px; }
.btn-white i { color: white !important; }


.iconlive i { color: red !important; }


.ui-slider-range { background-color: white; height: 4px;  }
.ui-slider-handle { margin-top: -2px; border-radius: 6px; }
.slider-container { display: inline-block; width: 90px; margin-top: 25px; }
#slider {  width: 100%;  height: 10px; border-color: transparent; background: rgba(255,255,255,0.3); height: 4px; padding-top: 0px;  margin-top: -8px; }

.buttongroup:hover #slider-vertical  {  display: block; }
.buttongroup #slider-vertical:hover  {  display: block; }

.relative { position: relative; }

.subsoptions .btnestilo1  { background: rgba(0,0,0,0.5);  color: white; font-size: 1.1em; border-width: 0px;  border-color: white; }
.subsoptions .btnestilo2  { background: rgba(0,0,0,0);  color: yellow; font-size: 1.1em; border-width: 0px; border-color: yellow; }
.subsoptions .btnestilo3  {  background: rgba(255,255,255,0.75); color: black; font-size: 1.1em;  border-width: 0px; border-color: black; }
.btnestilo.selected { border: 1px solid ;opacity: 1; }

.subtitles-container.subestilo1 span { background: rgba(0,0,0,0.75);  color: white; padding: 10px; }
.subtitles-container.subestilo2 span { color: yellow;   padding: 10px; }
.subtitles-container.subestilo3 span {   background: rgba(255,255,255,0.75); color: black;  padding: 10px; }
.subtitles-container.size1 { font-size: 1em; }
.subtitles-container.size2 { font-size: 1.5em; }
.subtitles-container.size3 { font-size: 2em; }

.playiconstream { position: absolute; width: 100%; height: 100%; text-align: center; padding-top: 20%; top: 0px; background: rgba(0,0,0,0.8); }

.controls {
  width: 100%;
  position: absolute;
  z-index: 100;
  bottom: 0;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

.contentPlayer.fixed .controls { position: fixed; }

.control-bar {
  width: 100%;
  height: 35px;
  position: relative;
  background: black;
}

.control-bar .btn-link  { color: white!important; }

.subtitles-container {
  height: 10%;
  width: 100%;
  text-align: center; 
  padding: 10px; 
  color: white; 
  text-shadow: 4px 3px 0 #7A7A7A, -20px -20px 1px rgba(206,89,55,0);
  position: absolute; bottom: 100px; 
}

.subsoptions { position: absolute; z-index: 120;  top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.75); color: white; font-size: 13pt; padding: 10px; text-align: center; display: none;   }


.timeline-container {
  height: 20px;
  width: 100%;
}

.timeline-container .barra {
  position: absolute; 
  width: 100%;
  height: 100%; 
}

.playhead-position {
  display: inline-block;
  text-align: center;
}
.seekbar-container {
  display: inline-block;
  width: 96%;
  margin-left: 2%; 
  position: relative;
  height: 10px; 
  background:rgba(255,255,255,0.2);
  cursor: pointer; 
}
.seekbar-container .slider-seek {
  width: 100%;
}
.duration {
  display: inline-block;
  text-align: center;
}
.buffered-block {
  position: absolute;
  background:rgba(255,255,255,0); /* buffer desactivada */
  height: 10px;
  top: 0px; left: 0px; 
  z-index: 3;
}
.hidden {
  display: none;
}

.slider-volume::-webkit-slider-thumb {
  background: white;
}

.slider-volume::-moz-range-thumb {
  background: white;
}

.slider-volume::-ms-thumb {
  background: white;
}

@media (max-width:768px){
  .settings-lang {
    width: 320px;
    height: 320px;
  }
} 

.svgicon { width: 34px; }
.controls .btn-link { color: white; font-size: 2.2em; }

.barrarep { position: absolute; width: 0px; background: rgb(255,255,255,1); height: 100%; }

.controls .btn { width: 60px; padding:5px; opacity: 0.8; cursor: pointer;  }
.controls .btn.btn-save { width: auto;  }
.controls .btn:hover { opacity: 1}

.controls .btn.disabled { opacity: 0.5}
.controls .btn.disabled:hover { opacity: 0.5}

.controls .btn.button-rw { 
  margin-left: 5px; 
  -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
  order: 1 }
  
.controls .btn.button-play, .controls .btn.button-pause { order: 2;
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2; margin-left: 5px;}
.controls .btn.button-ff { order: 3; -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
  -ms-flex-order: 3; }
.controls .timeline-container { order: 4; flex: auto;  -webkit-box-ordinal-group: 5; padding-bottom: 25px; 
  -webkit-order: 4;
  -ms-flex-order: 4; }
.controls .buttongroup { order: 5;  -webkit-box-ordinal-group: 6;
  -webkit-order: 5;
  -ms-flex-order: 5;}
.controls .btn.button-subtitles { order: 6;-webkit-box-ordinal-group: 7;
  -webkit-order: 6;
  -ms-flex-order: 6; }
.controls .btn.button-fullscreen, .controls .btn.button-inline { order: 7; -webkit-box-ordinal-group: 8;
  -webkit-order: 7;
  -ms-flex-order: 7; }


  .controls .btn.btn-link {
    color: #fff !important;
}

  .controls .btn.btn-link:hover {
    color: rgba(255,255,255,0.8) !important;
}

  .iconplay {   
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999; 
    display: none; 
  }

    .iconplay .icon {
      width: 35px;
      height: 35px;
      font-size: 3.5em; 
      display: none; 
    }

.audiocontrol .vjs-icon-subtitles,
.audiocontrol .theo-quality-label,
.audiocontrol .vjs-icon-audio,
.audiocontrol .vjs-icon-cog,
.audioplayer .vjs-fullscreen-control,
.audiocontrol .theo-cast-button,
.audioplayer video {
    display: none !important;
}

.audioplayer .vjs-control-bar {
  opacity: 1 !important;
}

.audioheightAD { height: 400px !important; }

.audioonly { height: 40px;  margin-top: 120px !important; }

.asset .audioonly { height: 0px; margin-top: 20px !important; }
@media (max-width:540px){
  .contentPlayer div.videoheader { padding: 10px !important; font-size: 1.1em !important; }
  .firstcolumn { padding: 18px 0px 0px 18px !important; }
   .buttongroup { padding: 2px !important; }
}


#my-video-play { top: 0px !important; }

.trailer .button-rw, .trailer .button-ff, .trailer .button-fullscreen { display: none; }
.trailer #slider { margin-top: 0px; }