/*! BCGS_MET_PLAYER - v2.1.10 - 2019-01-24
* Copyright (c) 2019 Brightcove Global Services; Licensed  */
#player {
    width: 100%;
    background-color: #000;
}
    .vjs-big-play-button, #player > .vjs-control-bar, .vjs-control-text {
        display: none;
    }
#player.video-js.vjs-fullscreen {
    width: 100% !important;
    height: 100% !important;
}

#bcc-player-overlay {
    opacity: 0;
    transition: opacity .2s;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    z-index: 100;
    background-color: rgba(0, 0, 0, .02);
}
    .video-js:not(.vjs-user-inactive):hover  #bcc-player-overlay,
    .video-js.bcc-mobile.vjs-user-active  #bcc-player-overlay,
    .video-js #bcc-player-overlay.bcc-no-transition #bcc-controls > div {
        opacity: 1;
    }
    .video-js #bcc-player-overlay.bcc-no-transition {
        opacity: 1 !important;
        -moz-transition: none !important;
        -webkit-transition: none !important;
        -o-transition: color 0 ease-in !important;
        transition: none !important;
    }
    .video-js.vjs-fullscreen.vjs-user-inactive #bcc-player-overlay {
        opacity: 0;
    }
    #bcc-player-overlay-top-gradient {
        width: 100%;
        height: 50%;
        position: absolute;
        top: 0px;
        opacity: .3;
        background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
    }
    #bcc-player-overlay-bottom-gradient {
        width: 100%;
        height: 30%;
        position: absolute;
        bottom: 0px;
        opacity: .9;
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
    }

#bcc-controls {
    position: absolute;
    z-index: 500;
    bottom: 3px;
    width: 100%;
    height: 80px;
    font-family: 'Lato';
}

.bcc-disabled {
    pointer-events: none;
    opacity: .6;
    cursor: default;
}

#bcc-controls .bcc-player-button {
    width: 67px;
    height: 80px;
    background: url(../img/controls.png);
    cursor: pointer;
    float: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    .vjs-user-inactive .bcc-player-button {
        opacity: 1;
    }

#bcc-controls .bcc-play-pause-toggle {
    background-position: -67px 0px;
    margin-left: 10px;
}
#bcc-controls .bcc-play-pause-toggle.playing {
    background-position: -134px 0px;
}
#bcc-controls .bcc-volume-button {
    width: 53px;
    background-position: 0px 0px;
}
    #bcc-controls .bcc-volume-button.muted {
        background-position: 0px -80px;
    }
    .bcc-mobile #bcc-controls .bcc-volume-button {
        display: none;
    }
#bcc-volume-slider {
    width: 115px;
    height: 100%;
    float: left;
}
    #bcc-volume-slider  > .bcc-slider-track {
        background-image: url(../img/volume-track.png);
    }
    #bcc-volume-slider  > .bcc-slider-track-filled {
        background-image: url(../img/volume-track-filled.png);
        z-index: 1;
    }
    #bcc-volume-slider > .bcc-slider-track > .bcc-slider > div {
        width: 12px;
        height: 100%;
        margin-left: -6px;
        background-image: url(../img/volume-slider.png);
    }
    .bcc-mobile #bcc-volume-slider {
        display: none;
    }
    
#bcc-controls .bcc-fullscreen-button {
    background-position: -67px -80px;
}
    .vjs-fullscreen #bcc-controls .bcc-fullscreen-button {
        background-position: -134px -80px;
    }


#bcc-playhead {
    width: 400px;
    float: left;
    padding: 40px 0;
}
    #bcc-playhead  > .bcc-slider-track {
        background-color: #414141;
        height: 1px;
        top: calc(50% + 2px);
        -webkit-transition: height 1s ease, top 1s ease;
        transition: height 1s ease, top 1s ease;
    }
    #bcc-playhead  > .bcc-slider-track-filled {
        background-color: #fff;
        top: 50%;
        height: 5px;
        z-index: 1;
        -webkit-transition: height 1s ease, top 1s ease;
        transition: height 1s ease, top 1s ease;
    }
    #bcc-playhead:hover > .bcc-slider-track,
    #bcc-playhead.bcc-key-highlight > .bcc-slider-track {
        height: 3px;
        top: calc(50% + 2px);
    }
    
    #bcc-playhead:hover > .bcc-slider-track-filled,
    #bcc-playhead.bcc-key-highlight > .bcc-slider-track-filled {
        height: 15px;
        top: calc(50% - 5px);
    }

#bcc-controls .bcc-time-label {
    width: 36px;
    height: 100%;
    line-height: 86px;
    color: white;
    font-size: 12px;
    float: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    #bcc-position-label {
        text-align: right;
        margin-right: 12px;
        margin-left: -11px;
    }
    #bcc-duration-label {
        text-align: left;
        margin-left: 12px
    }

#bcc-player-overlay .main-logo {
    display: none;
    position: absolute;
    top: 17px;
    left: 24px;
    width: 142px;
    height: 125px;
    fill: white;
    cursor: pointer;
}
    .video-js.vjs-fullscreen #bcc-player-overlay .main-logo {
        display: block;
    }

.bcc-player-overlay-button {
    cursor: pointer;
    position: absolute;
}

#bcc-player-close {
    width: 87px;
    height: 87px;
    background: url(../img/player-close.png) center center no-repeat;
    top: 0px;
    right: 0px;
}
.bcc-player-overlay-navigation {
    width: 112px;
    height: 107px;
    background: center center no-repeat;
    top: 50%;
    transform: translateY(-50%);
}
#bcc-player-left {
    background-image: url(../img/player-left.png);
    left: 0px;
}
#bcc-player-right {
    background-image: url(../img/player-right.png);
    right: 0px;
}
/*
 * highlight state for tabbing through elements
 */
.video-js #bcc-player-overlay .bcc-key-highlight {
    outline-width: 2px;
    outline-style: solid;
    outline-color: Highlight;
}
/*
 * WebKit gets its native focus styles.
 */
@media (-webkit-min-device-pixel-ratio:0) {
    .video-js #bcc-player-overlay .bcc-key-highlight {
        outline: -webkit-focus-ring-color auto 5px;
    }
}