/*
    Theoplayer HLN skin
    -------------------

    Temporary skin provided by our friends of my channels
    merge of their default & hln skin to decrease load times

    Hidde van Bavel - 13/02/2018
*/

.video-js{
    background:#000;
    width:auto!important;
    height:auto!important
}
.video-js:hover{
    cursor:pointer
}
.video-js:hover, .video-js div:focus {
	outline: none;
}

.video-js.theo-mobile .vjs-control-bar{
    display:flex;
    text-align:center
}
.video-js.theo-mobile .vjs-control-bar.theo-top-controlbar{
    display:none
}
.video-js.theo-mobile .theo-menu.theo-menu-animatable{
    position:absolute;
    top:auto;
    bottom:50%;
    -webkit-transform:translateY(50%);
    -moz-transform:translateY(50%);
    transform:translateY(50%);
    left:15%;
    right:15%;
    width:70%;
    max-width:70%;
    max-height:100%;
    overflow-y:auto;
    -webkit-transition:none;
    -moz-transition:none;
    transition:none;
    z-index:2
}
.video-js.theo-mobile .theo-menu.theo-menu-animatable .theo-menu-animation-container{
    position:static;
    width:100%;
    height:100%;
    max-height:100%;
    overflow-y:auto;
    bottom:auto;
    right:auto;
    max-width:none;
    -webkit-transition:none;
    -moz-transition:none;
    transition:none
}
.video-js.theo-mobile .theo-menu.theo-menu-animatable .theo-menu{
    position:static;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    overflow:visible
}
.video-js.vjs-live .theo-live-control{
    color:red
}
.video-js.vjs-live .vjs-progress-control{
    display:block
}
.video-js.vjs-live .vjs-icon-subtitles,.video-js.vjs-live .vjs-time-control{
    display:none
}
.video-js.vjs-has-started.vjs-waiting .theoplayer-poster{
    visibility:visible!important;
    z-index:0!important;
    background-size:cover!important
}
.video-js.vjs-user-inactive:not(.theo-mobile) .vjs-control-bar{
    pointer-events:none
}
.video-js.theo-ad-playing .vjs-control,.video-js.theo-ad-playing .vjs-control-bar:not(.custom-center-controlbar) .vjs-play-control,.video-js.theo-ad-playing .vjs-play-control,.video-js.theo-ad-playing .vjs-time-control.vjs-time-divider{
    display:none
}
.video-js.theo-ad-playing.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{
    visibility:visible;
    opacity:1
}
.video-js.theo-ad-playing .vjs-mute-control{
    display:flex
}
.video-js.theo-ad-playing .ad-playing-text{
    display:block;
    font-size:12px;
    line-height:3.4;
    width:100%
}
.video-js.theo-ad-playing .advertisement-text{
    float:right;
    margin-right:5px;
    font-weight:700
}
.video-js .click-interceptor{
    display:block;
    z-index:10;
    position:absolute;
    width:100%;
    height:100%;
    bottom:0;
    left:0;
    cursor:default
}
.video-js .ad-playing-text{
    display:none
}
.video-js .theo-player-wrapper{
    background:none
}
.video-js .theo-top-controlbar{
    display:none
}
.video-js .theo-button-tooltip{
    display:none!important
}
.video-js .theo-cast-button,.video-js .vjs-progress-holder .vjs-tooltip-progress-bar{
    display:none
}
.video-js .vjs-icon-cog{
    -webkit-box-ordinal-group:96;
    -webkit-order:95;
    -moz-box-ordinal-group:96;
    -ms-flex-order:95;
    order:95
}
.video-js.theo-hd .theo-settings-control-label-hd{
    display:block
}
.video-js .theo-primary-background{
    background-color:#fff
}
.video-js .theo-settings-control-label-hd{
    font-weight:700;
    font-size:8px;
    padding:0 2px;
    line-height:13px;
    font-family:Arial,Helvetica,sans-serif;
    position:absolute;
    right:0;
    top:8px;
    -webkit-box-shadow:#000 0 0 1px;
    box-shadow:0 0 1px #000;
    border-radius:.125em;
    display:none
}
.video-js .theo-menu{
    position:absolute;
    bottom:4em;
    min-width:10em;
    max-width:22em;
    max-height:21em;
    overflow-y:auto;
    color:#fff;
    text-shadow:none;
    cursor:pointer;
    background-color:rgba(28,28,28,.9)
}
.video-js .theo-menu ul li{
    color:#fff
}
.video-js .vjs-menu .vjs-menu-content{
    display:block;
    padding:0;
    margin:0;
    overflow:auto;
    font-family:Arial,Helvetica,sans-serif
}
.video-js .theo-menu.theo-menu-animatable{
    overflow:visible;
    background:none
}
.video-js .theo-menu.theo-settings-control-menu,.video-js .theo-menu.theo-settings-control-menu .theo-menu-content-animatable{
    min-width:18em
}
.video-js .theo-menu.theo-menu-animatable .theo-menu-animation-container{
    position:absolute;
    right:0;
    bottom:0;
    overflow:hidden;
    -webkit-transition:width .2s cubic-bezier(.4,0,1,1),height .2s cubic-bezier(.4,0,1,1);
    -moz-transition:width .2s cubic-bezier(.4,0,1,1),height .2s cubic-bezier(.4,0,1,1);
    transition:width .2s cubic-bezier(.4,0,1,1),height .2s cubic-bezier(.4,0,1,1);
    max-width:22em
}
.video-js .theo-menu.theo-menu-animatable .theo-menu-content-animatable{
    bottom:0;
    right:0;
    -webkit-transition:opacity .3s cubic-bezier(0,0,.2,1),-webkit-transform .2s cubic-bezier(.4,0,1,1);
    transition:opacity .3s cubic-bezier(0,0,.2,1),-webkit-transform .2s cubic-bezier(.4,0,1,1);
    -moz-transition:opacity .3s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(.4,0,1,1),-moz-transform .2s cubic-bezier(.4,0,1,1);
    transition:opacity .3s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(.4,0,1,1);
    transition:opacity .3s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(.4,0,1,1),-webkit-transform .2s cubic-bezier(.4,0,1,1),-moz-transform .2s cubic-bezier(.4,0,1,1);
    position:absolute;
    background:none
}
.video-js .theo-menu-header{
    text-align:center;
    margin-bottom:.2em;
    line-height:1.4em
}
.video-js .theo-menu-header,.video-js .theo-menu-item{
    font-family:Arial,Helvetica,sans-serif;
    text-transform:capitalize;
    padding:.4em .8em;
    font-size:14px;
    line-height:1.2em
}
.video-js .theo-menu-content{
    padding:0
}
.video-js .theo-menu.theo-settings-control-menu .theo-menu-item{
    display:-webkit-box;
    display:-webkit-flex;
    display:-moz-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -moz-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:baseline;
    -webkit-align-items:baseline;
    -moz-box-align:baseline;
    -ms-flex-align:baseline;
    align-items:baseline;
    position:relative;
    padding-right:2em
}
.video-js .theo-menu .theo-menu-item{
    width:100%;
    height:auto;
    text-align:center;
    list-style-type:none
}
.video-js .theo-settings-control-menu-item-title{
    font-weight:600
}
.video-js .theo-settings-control-menu-item-value{
    font-size:12px
}
.video-js .theo-menu.theo-settings-control-menu .theo-submenu{
    min-width:10em
}
.video-js .theo-submenu .theo-menu-header{
    padding:5px 10px 5px 24px;
    background-image:url('data:image/svg+xml;charset=utf-8,<svg fill="%23fff" height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/></svg>');
    background-position:0;
    background-repeat:no-repeat;
    outline:none
}
.video-js .theo-submenu .theo-menu-content{
    position:relative;
    bottom:0;
    padding:0;
    height:100%;
    overflow:hidden
}
.video-js .theo-menu.theo-settings-control-menu .theo-submenu .theo-menu-item{
    display:block
}
.video-js .theo-menu .theo-menu-item.vjs-selected,.video-js .theo-menu .theo-menu-item.vjs-selected:focus,.video-js .theo-menu .theo-menu-item.vjs-selected:hover{
    color:#ffc50f;
    background-color:hsla(0,0%,100%,.2)
}
.video-js .theo-settings-control-menu-item-hd-label{
    display:inline;
    content:"HD";
    font-weight:700;
    font-size:8px;
    margin-left:.2em;
    position:absolute;
    top:0;
    right:.6em
}
.video-js .theo-settings-control-submenu-item-alternate-value{
    font-size:8px;
    margin-top:.9em;
    margin-left:.5em;
    vertical-align:sub;
    font-weight:400;
    text-transform:none;
    position:absolute;
    right:.6em
}
.video-js .theo-social .theo-social-container .theo-social-label,.video-js .theoplayer-skin .theo-menu-header,.video-js .theoplayer-skin .theo-settings-control-label-hd{
    background-color:#aaa
}
.video-js .theo-menu .theo-menu-item.vjs-selected,.video-js .theo-menu .theo-menu-item.vjs-selected:focus,.video-js .theo-menu .theo-menu-item.vjs-selected:hover,.video-js .theo-menu .theo-primary-color,.video-js .theo-settings-control-menu-item-hd-label,.video-js .theo-settings-control-menu-item-value{
    color:#aaa
}
.video-js .vjs-fullscreen-control{
    -webkit-box-ordinal-group:101;
    -webkit-order:100;
    -moz-box-ordinal-group:101;
    -ms-flex-order:100;
    order:100
}
.video-js.vjs-user-inactive.vjs-playing .vjs-control-bar .vjs-button{
    pointer-events:none
}
.video-js .vjs-play-progress,.video-js .vjs-volume-level{
    background:#fff
}
.video-js .vjs-play-progress:before,.video-js .vjs-volume-level:before{
    font-size:11px
}
.video-js .vjs-big-play-button{
    display:none
}
.video-js .vjs-error-display:before{
    content:"\D7";
    font-size:80px
}
.video-js .vjs-loading-spinner{
    width:56px;
    height:56px;
    border-radius:100%;
    top:-32px;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    border-width:2px;
    transform:scale(1.5);
    transform-origin:center center
}
@media screen and (min-width:1024px){
    .video-js .vjs-loading-spinner{
        transform:scale(1.7)
    }
}
.video-js .vjs-loading-spinner:after,.video-js .vjs-loading-spinner:before{
    margin:-2px;
    border-top-color:#fff
}
.video-js .vjs-control-bar{
    z-index:20;
    background:rgba(0,0,0,.7);
    height:4em;
    padding:0 .7em
}
.video-js .vjs-control-bar.custom-center-controlbar{
    top:50%;
    transform:translateY(-50%);
    font-size:3em;
    height:3em;
    justify-content:center;
    visibility:hidden;
    background:none;
    display:flex
}
.video-js .vjs-control-bar.custom-center-controlbar .theo-control-bar-shadow{
    display:none
}
.video-js .vjs-control-bar.custom-center-controlbar .theo-button-tooltip{
    top:3.3em;
    bottom:auto
}
.video-js .vjs-control-bar.custom-center-controlbar .vjs-button{
    visibility:visible;
    margin:0 .5em
}
.video-js .vjs-control{
    width:3em
}
.video-js .vjs-control:before{
    font-size:18px;
    line-height:40px
}
.video-js .vjs-control.custom-big-play-pause-button{
    color:#fff;
    background-color:#fff;
    width:56px;
    height:56px;
    line-height:56px;
    color:#8a8989;
    border-radius:100%
}
.video-js .vjs-control.custom-big-play-pause-button:focus,.video-js .vjs-control.custom-big-play-pause-button:focus:before,.video-js .vjs-control.custom-big-play-pause-button:hover,.video-js .vjs-control.custom-big-play-pause-button:hover:before{
    text-shadow:none
}
.video-js .vjs-control.custom-big-play-pause-button:before{
    width:56px;
    height:56px;
    line-height:56px;
    font-size:45px
}
.video-js .vjs-time-control{
    line-height:40px;
    text-align:center;
    color:#aaa;
    font-size:12px;
    display:block;
    padding-left:0;
    padding-right:0
}
@media screen and (min-width:1024px){
    .video-js .vjs-time-control{
        font-size:10px
    }
}
.video-js .vjs-time-control.vjs-time-divider{
    min-width:10px
}
.video-js .vjs-time-control.vjs-remaining-time{
    display:none
}
.video-js .vjs-duration-display{
    line-height:40px
}
.video-js .vjs-progress-control{
    position:relative;
    margin:0 10px;
    left:auto;
    right:auto;
    bottom:auto;
    height:4em;
    align-items:center;
    width:100%
}
.video-js .vjs-progress-control:hover,.video-js .vjs-progress-control:hover .vjs-progress-holder{
    font-size:10px
}
.video-js .vjs-progress-control:hover .vjs-play-progress:before{
    transform:scale(1.5)
}
.video-js .vjs-progress-control:hover .vjs-time-tooltip{
    font-size:10px;
    top:-45px
}
.video-js .vjs-progress-control .vjs-play-progress{
    color:#fff
}
.video-js .vjs-progress-control .vjs-play-progress:before{
    transition:all .25s
}
.video-js .vjs-progress-control .vjs-mouse-display{
    top:20px;
    width:0;
    visibility:visible;
    display:block
}
@media screen and (min-width:1024px){
    .video-js .vjs-progress-control .vjs-mouse-display{
        display:none
    }
}
.video-js .vjs-progress-control .vjs-progress-holder{
    height:4em;
    background:none
}
.video-js .vjs-progress-control .vjs-progress-holder:before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
    left:0;
    margin:auto;
    height:3px;
    background:hsla(0,0%,100%,.2)
}
.video-js .vjs-progress-control .vjs-progress-holder .vjs-load-progress,.video-js .vjs-progress-control .vjs-progress-holder .vjs-play-progress{
    height:3px;
    top:0;
    bottom:0;
    margin:auto
}
.video-js .vjs-slider{
    background-color:hsla(0,0%,100%,.2)
}
.video-js .vjs-load-progress div{
    background:#8a8989
}
@media screen and (min-width:1024px){
    .video-js .vjs-tooltip-progress-bar .vjs-time-tooltip{
        display:none
    }
}
@media screen and (min-width:1024px){
    .video-js .vjs-mute-control{
        display:flex
    }
}
.video-js .vjs-volume-control{
    width:auto;
    margin:0 7px;
    display:flex;
}
@media screen and (min-width:1024px){
    .video-js .vjs-volume-control{
        display:flex
    }
}

@media screen and (max-width:512px){
    .video-js .vjs-volume-control{
        display:none
    }
}
.video-js .vjs-volume-control .vjs-volume-bar{
    opacity:1
}
.video-js .vjs-volume-control .vjs-volume-bar .vjs-volume-level{
    color:#fff
}
.video-js .vjs-volume-control .vjs-volume-bar .vjs-volume-level:hover:before{
    transform:scale(1.5)
}
.video-js .vjs-volume-control .vjs-volume-bar .vjs-volume-level:before{
    transition:all .25s
}
.video-js .vjs-channel-logo{
    position:absolute;
    width:50px;
    height:auto;
    top:10px
}
@media screen and (min-width:1024px){
    .video-js .vjs-channel-logo{
        top:20px;
        width:100px
    }
}
.video-js .vjs-channel-logo.vjs-channel-logo--left{
    right:auto;
    left:10px
}
@media screen and (min-width:1024px){
    .video-js .vjs-channel-logo.vjs-channel-logo--left{
        left:20px
    }
}
.video-js .vjs-channel-logo.vjs-channel-logo--right{
    right:10px;
    left:auto
}
@media screen and (min-width:1024px){
    .video-js .vjs-channel-logo.vjs-channel-logo--right{
        right:20px
    }
}
.video-js .vjs-channel-logo img{
    display:block;
    width:100%
}
.video-js .vjs-channel-logo a{
    display:block;
    height:100%;
    width:100%
}
@-moz-keyframes vjs-spinner-fade{
    0%{
        border-top-color:#fff
    }
    20%{
        border-top-color:#fff
    }
    35%{
        border-top-color:#fff
    }
    60%{
        border-top-color:#fff
    }
    to{
        border-top-color:#fff
    }
}
@keyframes vjs-spinner-fade{
    0%{
        border-top-color:#fff
    }
    20%{
        border-top-color:#fff
    }
    35%{
        border-top-color:#fff
    }
    60%{
        border-top-color:#fff
    }
    to{
        border-top-color:#fff
    }
}
@-webkit-keyframes vjs-spinner-fade{
    0%{
        border-top-color:#fff
    }
    20%{
        border-top-color:#fff
    }
    35%{
        border-top-color:#fff
    }
    60%{
        border-top-color:#fff
    }
    to{
        border-top-color:#fff
    }
}
.t-hln.video-js:hover .vjs-big-play-button{
    background-color:#1313f1
}
.t-hln.video-js.vjs-live .theo-live-control{
    color:red
}
.t-hln.video-js .vjs-play-progress,.t-hln.video-js .vjs-volume-level{
    background:#1313f1
}
.t-hln.video-js .vjs-control.custom-big-play-pause-button{
    color:#1313f1;
    background-color:#1313f1;
    color:#fff
}
.t-hln.video-js .theo-primary-background{
    background-color:#1313f1;
    color:#fff
}

/* TITLE SHOW */

.video-js .vjs-title-bar {
    background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.7));
    color: white;

    display: none;
    font-family: Helvetica,sans-serif;
    font-size: 2em;
    padding: 1em;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

@media screen and (max-width:512px){
    .video-js .vjs-title-bar {     
    font-size: 1.5em !important;	
    }
}

.video-js.vjs-paused .vjs-title-bar {
    display: block;
}
  
/* REMOVE CONTEXT MENU */

.theo-context-menu-a > * {
    width: 0;
    height: 0;
    visibility: hidden;
}