/* portrait */
@media only screen and (max-width: 400px)   {
 .vjs-control {font-size:1em !important;}
 .video-js .vjs-current-time {line-height: 2.5em !important;}
 .video-js .vjs-time-control {font-size:1.2em !important;}
 .vjs-time-divider, .vjs-duration-display {display: none !important;}
.vjs-control-bar.vjs-dvrseekbar-control-bar .vjs-live-button {padding: 1em 0em !important;}
.video-js .vjs-duration{flex-shrink: 10 !important;}
}

@media all and (-ms-high-contrast:none) {
     .vjs-icon-audio::before, .video-js .vjs-audio-button .vjs-icon-placeholder::before {font-size:0.5em !important;}
     .video-js .vjs-mute-control {font-size: 0.5em !important; width:6em !important;}
     .video-js .vjs-play-control{font-size: 0.5em !important; width:6em !important;}
     .video-js .vjs-fullscreen-control{font-size: 0.5em !important; width:6em !important;}
}

.vjs-load-progress > div {
    display: none !important;
}

.vjs-modal-dialog-content {
  font-size:3vw !important;
  /* top:10% !important; */
}



.vjs-error .vjs-error-display::before {
    content: none !important;
}

.video-js {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7a7a7a+0,ffffff+50,ffffff+50,7a7a7a+100 */
background: rgb(122,122,122); /* Old browsers */
background: -moz-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 50%, rgba(122,122,122,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(122,122,122,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 50%,rgba(122,122,122,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(122,122,122,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 50%,rgba(122,122,122,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#7a7a7a',GradientType=0 ); /* IE6-9 */
}

body {
  margin:0px;
  /* max-width: 1280px; */
  margin-left:auto;
  margin-right: auto;
  overflow: auto !important;
  max-width: 100% !important;
}
.video-container {
  width: 100vw;
  height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
  max-height: 100vh;
  max-width: 177.78vh; /* 16/9 = 1.778 */
  margin: auto;
  position: absolute;
  top:0;bottom:0;
  left:0;right:0;
}

.vjs-poster {
  z-index:1 !important;
}

.video-js::before {
    /* content:url('images/android-icon-48x48.png'); */
    /* z-index:1; */
    /* position: absolute; */
}


.video-container iframe,
.video-container object,
.video-container embed,
.video-container #kavedo-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* player design starts here */

.video-js .vjs-control-bar {
background-color:rgba(105,105,105,0.8);
}
.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  transition-delay: 5s;
}

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

.video-js .vjs-live-button::before {
  font-family: VideoJS;
  content: "\f111";
  color:red;
  padding-right:0.3em;
}
.video-js .vjs-live-button{
display: inline-flex;
}
.vjs-live-button.vjs-control:hover {
    font-size: 1.2em !important;
    line-height: 0.6em !important;
}
.vjs-seek-to-live-control {
  /* display: inline-flex !important; */
}
.vjs-mouse-display {
  z-index:3 !important;
}
.vjs-load-progress {
  max-width:100% !important;
}

.video-js .vjs-custom-control-spacer {
  width:4em !important;
  background-image: url("../images/ktvlogosw.png") !important;
  background-repeat: no-repeat;
  background-size: auto 80%;
  background-position: center;
  display: flex !important;
  visibility: visible !important;
  opacity: 0.8;
}

.video-js .vjs-play-progress, .video-js .vjs-volume-level, #seekBar{
background-color:rgba(229, 135, 46, 1);
border-radius: 0.24em;
}

.vjs-volume-bar.vjs-slider-horizontal {
    height: 0.5em;
    border-radius: 0.24em;
}

.vjs-menu li.vjs-selected, .vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:hover, .video-js .vjs-play-progress, .video-js .vjs-volume-level, #seekBar  {
    background-color:rgba(210, 10, 17, 1) !important;
    color: #ffffff;
}
.video-js .vjs-progress-control .vjs-progress-holder{
border-radius: 0.24em;
margin: 0px !important;
}
.video-js .vjs-progress-control {
    position: absolute !important;
    left: 0em;
    right: 0em;
    height: 1em !important;
    width: auto !important;
    top: -1.3em !important;
    /* border-bottom: 1px solid #1F1F1F; */
    /* border-top: 1px solid #222; */
    /* background: #111; */
    -moz-opacity: 0.80;
    opacity: 0.80;
    padding:0px !important;
    /* -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); */
}

.video-js .vjs-progress-control:hover .vjs-progress-holder {
    font-size: 2.666666666666666666em;
}
.video-js .vjs-volume-level{
    font-size: 2em;
}

.vjs-resolution-button::before {
    content: "\f114";
    font-family: VideoJS;
    font-size: 3em;
}
.video-js .vjs-time-control {
 cursor: default;
 display:block;
 font-size: 2em;
 line-height: 1.5em;
 padding: 0 0.3em;
}

.vjs-time-control.vjs-time-divider {
    padding: 0px !important;
    min-width: 5px;
}

.vjs-menu-button-popup .vjs-menu {
    margin-bottom: 3em !important;
    padding-bottom: 3em !important;
}
.vjs-subs-caps-button{
  /* display: none !important; */
}
.video-js .vjs-remaining-time{
  display: none;
}
.vjs-duration {
    flex-grow: 1 !important;
    display: flex !important;
}
.video-js .vjs-big-play-button {
  /* display: none; */
margin-left:auto;
margin-right:auto;
top:35%;
border:none;
border-radius: 2vw;
background:rgba(210, 10, 17, 0.75);
position: relative;
font-size:5vw;
width:2em;
z-index:999;
}



.vjs-remaining-time {
  text-align: left !important;
}

.vjs-button > .vjs-icon-placeholder::before {
    font-size: 3em;
    line-height: 1;
}

.video-js .vjs-menu-button  {
    width: 5em;
}

.video-js .vjs-play-control {
 cursor: pointer;
}
.vjs-menu li {
  font-size: 2em;
}

[style="width: 100%"] {
  background:green !important;
  color:red !important;
}
/* mute overlayer start*/
.autoplay-overlay {
  opacity:1;
  position: absolute;
  text-align: left;
  height:20vw;
  width:20vw;
  left: 1vw;
  top: 1vw;
  /* bottom: 20vw; */
  color: #fff;
  /* padding-top: 5vw;
  padding-left: 2vw; */
  font-size: 6vw;
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  z-index:2;
}
.autoplay-overlay::before {
 content: "\f104";
 background-color: rgba(0, 0, 0, 0.2);
 border-radius: 1vw;
 font-family: VideoJS;
 font-size:1em;
 font-family: VideoJS;
}

.vjs-ended ~ .autoplay-overlay{
  display: none !important;
  opacity:0 !important;
}




/* mute overlayer end*/

.logo{
  opacity:0.8;
  position: absolute;
  right: 1vw;
  top: 1vw;
  cursor: pointer;
  z-index:2;
  background-image: url("../images/ktvlogosw.png");
  background-size: 100% auto;
  width: 4vw;
  height: 4vw;
}


 /* .vjs-ended ~ .endscreen{
  opacity:0.8;
  position: absolute;
  right: 5vw;
  left: 5vw;
  top: 2vw;
  cursor: pointer;
  z-index:9999;
  background-size: 100% auto;
  background-color:rgba(0, 0, 0, 0.5);
  height: 20vw;
} */

/*Endscreen CSS*/
.vjs-ended ~ .endscreen {
  font-family: arial;
  top: 10%;
  left: 10%;
  position: absolute;
  width: 80%;
  height: 70%;
  -webkit-border-radius: 2vw;
  -moz-border-radius: 2vw;
  border-radius: 2vw;
  font-size: 14px;
  background-color: rgba(0,0,0,0.5);
  text-align: center;
  /* do not show endscreen by default - a simpler, non-animated alternative would be:
   * display: none; */
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  transition: opacity .5s;
}

.vjs-ended ~ .endscreen .button {
  background-color: #f0b700;
  padding: 3vw 3vw;
  margin: 2vw 1vw;
  -webkit-border-radius: 3vw;
  -moz-border-radius: 3vw;
  border-radius: 1vw;
  font-size: 2vw;
  color: #444;
  cursor: pointer;
  display: inline-block;
  -webkit-transition: background-color .1s;
  -moz-transition: background-color .1s;
  transition: background-color .1s;
  text-decoration: none;
}

.kavedo_link{
  /*content: url(icons/s24.png) !important;*/
  background: #ffffff url(../images/kavedo_logo.png) !important;
  background-repeat: no-repeat !important;
  background-position: left bottom !important;
  background-size: auto 100%  !important;
  text-decoration: none;
  vertical-align: bottom;
  border-radius: 1vw 1vw 1vw 0 !important;
  width: 20%;
  margin-top:0px !important;
}


.vjs-ended ~ .endscreen p {
  color:#fff;
}

.vjs-ended ~ .endscreen .button:hover {
  background-color: #00afc6
}

.vjs-ended ~ .endscreen .button:active {
  background-color: #009db2
}

.vjs-ended ~ .endscreen .fp-toggle {
  color: #444;
  /*font-size: smaller;*/
  cursor: pointer;
  width:30%;
}

.vjs-ended ~ .endscreen .fp-toggle:hover {
  color: #444;
  text-decoration: underline;
}


.vjs-ended ~ .endscreen {
  -webkit-transition: background-color .7s;
  -moz-transition: background-color .7s;
  transition: background-color .7s;
}

.vjs-ended ~ .endscreen {
  /* make overlaying link clickable */
  z-index: 1;

  /* show endscreen - a simpler alternative would be:
   * display: block; */
  filter: alpha(opacity=100);
  opacity: 1;
}
/*Endscreen CSS*/

#archiv {
   float: left;
   width:100%;
   margin-left:auto;
   margin-right:auto;
   /* max-width:900px; */
}


#live {
    float: left;
    height: 20px;
    width: 100%;
    margin-top:0px !important;
}
#player_top {
  /* float: left; */
  /* width:100%; */
    max-width: 177.78vh !important;
    width: 100vw !important;
  margin-left:auto;
  margin-right:auto;
  /* display: table !important; */
}
#kavedo-player {
    bottom: 0;
    height: 100% !important;
    width: 100% !important;
    float:left;
    margin:0;
}
#playerdiv {
  bottom: 0;
  height: 56.25vw !important;
  max-height: 100vh !important;
  max-width: 177.78vh !important;
  width: 100vw !important;
  /* float:left; */
  margin-left:auto;
  margin-right:auto;
  display: table !important;
}
#playercontainer {
  vertical-align: top; /* here */
  display:inline-block;
  margin-left:auto;
  margin-right: auto;
}



/* player design ends here *