/**
 * Custom-Style fuer Video.js
 *
 * 1.4.0        2020-07-09 Ulrich Santo
 *              - "font-display: fallback;" eingefuegt
 * 1.3.0        2019-02-26  Nils Heldt
 *              - Ueberschreiben der festen Hoehe bei @media (max-width: 768px) im Embed-Modus
 * 1.2.0        2017-04-05  Nils Heldt
 *              - qualitySelector-Icon
 * 1.1.0        2017-04-03  Nils Heldt
 *              - Embed-Code
 * 1.0.0        2017-03-31  Nils Heldt
 *              - Einfuehren der Versionierung
 *              - kein lowercase bei Untertitel-Auswahl
 *
 * @package     Drupal-bpb
 * @subpackage  CSS
 * @author      Nils Heldt <heldt@glamus.de>
 */


.vjs-chapters-button .vjs-menu {
    width:30em !important;
    left:-13em;
}

.vjs-chapters-button .vjs-menu li,
.vjs-subtitles-button .vjs-menu li {
    text-transform: none;
}

.video-js-iframe-embed {
    background-color: white;
    z-index: 999;
    position: relative;
    color: black;
    width: 50%;
    left: 25%;
    height: 25%;
    top: 24.5%;
    display: none;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

.small-play-button .vjs-big-play-button {
    background-color: transparent;
    border: none;
}

.small-play-button:hover .vjs-big-play-button,
.small-play-button .vjs-big-play-button:focus {
    background-color: transparent;
}

.vjs-brand-quality-link {
    font-family: VideoJS;
    font-weight: normal;
    font-style: normal;
}

.vjs-brand-quality-link:focus:before,
.vjs-brand-quality-link:hover:before,
.vjs-brand-quality-link:focus {
    text-shadow: 0em 0em 1em white;
}

.vjs-brand-quality-link:before {
    content: "\f110";
}

.vjs-quality-dropdown {
    left: -5px;
}

.vjs-related-carousel-holder.active {
    height: 138px;
}

.video-js span.vjs-embedoverlay-text {
    width: auto;
    padding: 0;
    background: none;
}

.vjs-poster {
    background-color: transparent;
}


/* 3PC-Anpassungen */


/* Video Icons*/
@font-face {
    font-display: fallback;
    font-family: 'videojs-font';
    src:  url('fonts/videojs-font.eot');
    src:  url('fonts/videojs-font.eot') format('embedded-opentype'),
    url('fonts/videojs-font.ttf') format('truetype'),
    url('fonts/videojs-font.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.video-js .mailto:before,
.vjs-embed-button .vjs-control-content:before,
.vjs-embed-button-two .vjs-control-content:before,
.video-js .vjs-seek-button.skip-back.skip-10:before,
.video-js .vjs-seek-button.skip-forward.skip-10:before,
.video-js .vjs-volume-menu-button:before,
.video-js .icon-videojs-carousel-toggle:before,
.video-js .vjs-subtitles-button:before,
.video-js .vjs-fullscreen-control:before,
.video-js .vjs-brand-quality-link:before,
.icon-videojs-carousel-right:before,
.icon-videojs-carousel-left:before,
.video-js.vjs-vjsdownload .vjs-button.vjs-vjsdownload:before {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'videojs-font' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.vjs-embed-button .vjs-control-content:before,
.vjs-embed-button-two .vjs-control-content:before,
.video-js .icon-download:before,
.video-js .icon-videojs-carousel-toggle:before,
.video-js .icon-language:before,
.video-js .vjs-subtitles-button:before,
.video-js .vjs-fullscreen-control:before,
.video-js .vjs-seek-button.skip-forward.skip-10:before,
.video-js .vjs-seek-button.skip-back.skip-10:before,
.video-js .vjs-volume-menu-button:before,
.video-js .vjs-volume-menu-button.vjs-vol-0:before {
    top: 16px;
    z-index: 2;
}

.vjs-embed-button .vjs-control-content:before,
.vjs-embed-button-two .vjs-control-content:before {
    content: "\e90b";
    font-size: 1.2rem;
    color: #000;
    position: relative;
    top: 1px;
}
.icon-videojs-carousel-left:before {
    content: "\e907";
    font-size: 4.2rem;
}
.icon-videojs-carousel-right:before {
    content: "\e90a";
    font-size: 4.2rem;
}
.video-js .mailto:before {
    content: "\e906";
    font-size: 1.2rem;
    color: #000;
    position: relative;
    z-index: 2;
    top: 1px;
}
.video-js.vjs-vjsdownload .vjs-button.vjs-vjsdownload:before {
    content: "\e900" !important;
    color: #000;
}
.video-js .icon-videojs-carousel-toggle:before {
    content: "\e901";
    color: #000;
    top: 15px;
}
.video-js .vjs-brand-quality-link:before {
    content: "\e902";
    font-size: 1.8em;
    color: #000;
    position: relative;
    z-index: 2;
}
.video-js .icon-language:before {
    content: "\e903";
    color: #000;
}
.video-js .vjs-subtitles-button:before {
    content: "\e904";
    color: #000;
    top: 16px;
}
.video-js .vjs-fullscreen-control:before {
    content: "\e905" !important;
    color: #000;
    top: 16px;
}
.video-js .vjs-seek-button.skip-forward.skip-10:before {
    content: "\e908" !important;
}
.video-js .vjs-seek-button.skip-back.skip-10:before {
    content: "\e909" !important;
}
.video-js .vjs-volume-menu-button:before,
.video-js .vjs-volume-menu-button.vjs-vol-2:before,
.video-js .vjs-volume-menu-button.vjs-vol-1:before,
.video-js .vjs-volume-menu-button.vjs-icon-volume-low:before {

    content: "\e90e";
}
.video-js .vjs-volume-menu-button.vjs-vol-0:before {
    content: "\e90c";
}
.video-js .vjs-chapters-button:before {
    color: #000;
    z-index: 2;
    top: 9px;
}

.video-js .mailto:after,
.vjs-embed-button .vjs-control-content:after,
.vjs-embed-button-two .vjs-control-content:after,
.video-js .vjs-fullscreen-control:after,
.video-js .vjs-subtitles-button:after,
.video-js .icon-videojs-carousel-toggle:after,
.video-js .icon-quality:after,
.video-js .icon-language:after,
.video-js .vjs-subtitles-button:after,
.video-js .vjs-chapters-button:after,
.video-js .vjs-brand-quality-link:after {
    content: "";
    background-color: #fff;
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    position: absolute;
    top: calc(50% - .6rem);
    right: calc(50% - .6rem);
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

/* Play-Button */
.video-js .vjs-big-play-button {
    height: 3.5rem;
    width: 5.6rem;
    background-color: #808080;
    background-color: rgba(128, 128, 128, 0.7);
    border: medium none;
}

.video-js .vjs-big-play-button:before {
    top: 5px;
}

/* Button Order */
.vjs-play-control {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}
.vjs-volume-menu-button {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
}
.vjs-seek-button.skip-back {
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
}
.vjs-progress-control {
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
}
.vjs-seek-button.skip-forward {
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
}
.vjs-remaining-time {
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6;
}
.video-js .vjs-quality-container {
    -webkit-order: 7;
    -ms-flex-order: 7;
    order: 7;
    padding: 0;
}
.vjs-subtitles-button {
    -webkit-order: 8;
    -ms-flex-order: 8;
    order: 8;
}
.vjs-chapters-button {
    -webkit-order: 9;
    -ms-flex-order: 9;
    order: 9;
}
.vjs-related-carousel-button {
    -webkit-order: 10;
    -ms-flex-order: 10;
    order: 10;
}
.vjs-fullscreen-control {
    -webkit-order: 11;
    -ms-flex-order: 11;
    order: 11;
}

/* control-bar */
.video-js .vjs-control-bar {
    padding: 0 8px;
    height: 5em;
}

/* aside-buttons */
.vjs-control-bar .vjs-embed-button,
.vjs-control-bar .vjs-embed-button-two,
.vjs-control-bar .vjs-vjsdownload {
    display: none !important;
}

/* playbutton */
.video-js .vjs-play-control:before {
    top: 9px;
}

/* Chapter */
.vjs-chapters-button .vjs-menu {
    width:30em !important;
    left:-18em;
}
.vjs-chapters-button .vjs-menu li {
    text-transform: none;
}

/* subtitle */
.vjs-menu-button-popup .vjs-menu {
    bottom: 20px;
}
/* Social Share */
.vjs-social-share {
    height: auto;
    right: 10px;
}
.vjs-social-share-link {
    width: 20px;
    height: 25px;
    display: block;
    margin: 0;
}
.vjs-social-share-svg {
    height: 30px;
    width: 30px;
}
.video-js:not(.vjs-has-started) .vjs-social-share,
.video-js:not(.vjs-has-started) .vjs-social-share .vjs-social-share-link {
    opacity: 0 !important;
    display: none !important;
}

/* Quality */
.video-js .vjs-brand-quality-link {
    outline: none;
    padding-top: 0;
    padding-bottom: 0;
    display: block;
    top: 16px;
    position: relative;
}
.video-js .vjs-brand-quality-link span {
    display: none;
}
.video-js .vjs-quality-container .vjs-quality-dropdown {
    bottom: 50px;
}

/* related carousel title */
.vjs-related-carousel-holder h5 {
    font-size: .8rem;
    font-weight: normal;
    margin: .5rem 0;
}
.vjs-related-carousel-holder {
    bottom: 50px;
}

/* volume menu */
.vjs-menu-button-inline .vjs-menu {
    top: 10px;
}
/* aside buttons */
.video-js .mailto,
.vjs-vjsdownload.vjs-control.vjs-button,
.vjs-embed-button.vjs-control,
.vjs-embed-button-two.vjs-control {
    width: 23px !important;
    height: 22px;
    display: block;
    background-color: #fff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid black;
    margin-bottom: 5px;
}

.vjs-embed-button {
}

.vjs-embed-button.vjs-control:hover,
.vjs-embed-button-two.vjs-control:hover {
    cursor: pointer;
}
.video-js.vjs-vjsdownload .vjs-button.vjs-vjsdownload:before {
    -webkit-transform: inherit !important;
    -moz-transform: inherit !important;
    -ms-transform: inherit !important;
    -o-transform: inherit !important;
    transform: inherit !important;
    top: 1px;
}

.video-js.vjs-vjsdownload .vjs-button.vjs-vjsdownload:after {
    display: none !important;
}

/* Embed Overlay */
.vjs-embedoverlay {
    text-align: center;
    width: 100%;
    padding: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    z-index: 9999;
}
.vjs-embedoverlay:after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.vjs-embedoverlay-text {
    font-size: 1.2rem;
}
.vjs-embedoverlay-input {
    width: 80%;
    padding: .7rem;
    margin-top: 1rem;
    border: medium none;
    float: left;
}
.vjs-embedoverlay .copy-embed {
    background-color: #4990e2;
    width: 20%;
    margin-top: 1rem;
    padding: .83rem;
    cursor: pointer;
}
.vjs-embedoverlay .copy-embed:hover {
    background-color: #005bbb;
}
.vjs-embedoverlay.gray {
    background-color: rgba(255,255,255,1);
}
.close-embed {
    color: #fff;
    text-decoration: none;
    position: absolute;
    top: 6px;
    right: 3px;
    font-size: 1.4rem;
    display: block;
    width: 35px;
    text-align: center;
}
.close-embed .hidden {
    clip: rect(0 0 0 0);
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    position: absolute;
    border: 0;
}

/* Contact Mail */
.video-js .mailto {
    display: block;
    position: relative;
    margin-bottom: 5px;
    text-decoration: none;
}
.video-js .mailto span {
    display: none;
}

/* time */
.vjs-remaining-time-display {
    position: relative;
    top: 9px;
}
/* audio-poster */

/* GLAMUS */

/*.vjs-audio .vjs-poster {*/
.disable-overlay .vjs-poster {

    /* GLAMUS */

    background-position: bottom 50px center;
}

/* audio-overlay */
.disable-overlay .vjs-control-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility 0.1s, opacity 0.1s;
    -moz-transition: visibility 0.1s, opacity 0.1s;
    -o-transition: visibility 0.1s, opacity 0.1s;
    transition: visibility 0.1s, opacity 0.1s;
}
.disable-overlay .vjs-big-play-button {
    display: none;
}
.vjs-social-share-svg path:first-child{
    stroke: black;
    stroke-width: 1px;
}

/* Video ending screen */
.vsj-middle.vjs-social-share {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    width: 100%;
    top: calc(50% - 25px);
    right: 0;
    opacity: 1;
}
.vsj-middle.vjs-social-share .vjs-social-share-link {
    width: 23px;
    height: 23px;
    -webkit-transform: scale(2.2);
    -moz-transform: scale(2.2);
    -ms-transform: scale(2.2);
    -o-transform: scale(2.2);
    transform: scale(2.2);
    overflow: hidden;
}
.video-js .vsj-middle.vjs-social-share .mailto,
.video-js .vsj-middle.vjs-social-share .vjs-control,
.video-js.vjs-vjsdownload .vsj-middle.vjs-social-share .vjs-button.vjs-vjsdownload {
    -webkit-transform: scale(2.2);
    -moz-transform: scale(2.2);
    -ms-transform: scale(2.2);
    -o-transform: scale(2.2);
    transform: scale(2.2);
}
.video-js.vjs-vjsdownload .vsj-middle.vjs-social-share .vjs-button.vjs-vjsdownload:before {
    font-size: .5rem;
    top: 14px;
    left: 1px;
}
@-moz-document url-prefix() {
    .video-js.vjs-vjsdownload .vsj-middle.vjs-social-share .vjs-button.vjs-vjsdownload:before {
        top: 13px;
        left: 0;
    }
}
.video-js .carousel-item {
    /* GLAMUS */

    /* width: auto; */

    /* GLAMUS */
}
.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    right: 10px;
}

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
    .video-js .icon-videojs-carousel-toggle:before,
    .video-js .vjs-subtitles-button:before,
    .video-js .vjs-fullscreen-control:before {
        top: 15px;
    }
    .video-js .vjs-play-control:before {
        top: 10px;
    }
    .video-js .vjs-brand-quality-link {
        top: 16px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .video-js:not(.vjs-audio) {
        width: 100%;
        height: 240px !important;
        overflow: hidden;
    }

    .embed .video-js:not(.vjs-audio) {
        height: 100% !important;
    }

    .video-js:not(.vjs-audio) .vjs-control-bar .vjs-control {
        width: 3.3em;
    }
    .video-js:not(.vjs-audio) .vjs-control-bar .vjs-control.vjs-time-control {
        width: 30px;
        padding: 0;
    }
    .video-js:not(.vjs-audio) .vjs-seek-button {
        display: none;
    }
    .video-js:not(.vjs-audio) .vjs-control-bar .vjs-volume-menu-button {
        width: 4em;
    }
    .video-js .vjs-quality-container {
        width: 30px;
    }
    .video-js .vjs-brand-quality-link {
        top: 16px;
    }
    .video-js .vjs-control-bar .vjs-volume-menu-button:hover,
    .video-js .vjs-control-bar .vjs-volume-menu-button:focus,
    .video-js.vjs-no-flex .vjs-control-bar .vjs-volume-menu-button {
        width: 12em;
    }
    .video-js .vjs-quality-container .vjs-brand-quality-link,
    .vjs-remaining-time.vjs-time-control {
        padding: 0;
    }
    .vjs-audio {
        width: 100%;
    }
    .vjs-chapters-button .vjs-menu {
        left: -21.7em;
    }
    .video-js .carousel-item {
        width: 100px;
    }
    .carousel-item img {
        width: 100% !important;
        height: auto;
    }
    .vjs-social-share {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flexbox;
        display: -webkit-flex;
        display: flex;
        width: 100%;
        padding: .6rem;
        left: 0;
        top: 0;
    }
    .vjs-social-share > * {
        margin-right: 1rem !important;
    }
    .vjs-social-share .vjs-social-share-link {
        width: 23px;
        height: 23px;
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
    }
    .video-js .vjs-social-share .mailto,
    .video-js .vjs-social-share .vjs-control,
    .video-js.vjs-vjsdownload .vjs-social-share .vjs-button.vjs-vjsdownload {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
    }
    .video-js .mailto:before {
        top: 1px !important;
    }
    .vjs-embed-button .vjs-control-content:before,
    .vjs-embed-button-two .vjs-control-content:before {
        font-size: 1.3rem;
        top: 0;
    }
    .video-js.vjs-vjsdownload .vjs-social-share .vjs-button.vjs-vjsdownload:before {
        font-size: 1rem;
        top: 2px !important;
    }
    .vsj-middle.vjs-social-share {
        top: calc(50% - 25px);
    }
    .vsj-middle.vjs-social-share .vjs-social-share-link {
        width: 23px;
        height: 23px;
        -webkit-transform: scale(1.7);
        -moz-transform: scale(1.7);
        -ms-transform: scale(1.7);
        -o-transform: scale(1.7);
        transform: scale(1.7);
    }
    .video-js .vsj-middle.vjs-social-share .mailto,
    .video-js .vsj-middle.vjs-social-share .vjs-control,
    .video-js.vjs-vjsdownload .vsj-middle.vjs-social-share .vjs-button.vjs-vjsdownload {
        -webkit-transform: scale(1.7);
        -moz-transform: scale(1.7);
        -ms-transform: scale(1.7);
        -o-transform: scale(1.7);
        transform: scale(1.7);
    }
    .video-js.vjs-vjsdownload .vsj-middle.vjs-social-share .vjs-button.vjs-vjsdownload:before {
        font-size: .7rem;
        top: 8px !important;
    }
    .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
        z-index: 9999;
    }
    .vjs-embedoverlay-input {
        width: 70%;
    }
    .vjs-embedoverlay .copy-embed {
        width: 30%;
    }
    .vjs-chapters-button.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
        width: 93%;
        height: 10.4em;
    }
    .vjs-related-carousel-holder.active {
        height: 135px;
        z-index: 9999;
    }
    .vjs-playing .vjs-social-share,
    .vjs-playing .vjs-social-share.is-visible{
        display: none !important;
    }
    .vjs-social-share.is-visible,
    .vjs-paused .vjs-social-share {
        opacity: 1;
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }
    .video-js .vjs-remaining-time {
        display: none;
    }
    .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
        right: -20px;
    }
    .video-js .vjs-control-bar {
        padding: 0;
    }
    .video-js .mailto,
    .vjs-vjsdownload.vjs-control.vjs-button,
    .vjs-embed-button.vjs-control,
    .vjs-embed-button-two.vjs-control {
        height: 23px;
    }
    .video-js .vjs-brand-quality-link {
        margin-top: 0;
    }
    #audio-player .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
        right: -45px;
    }
}

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

/* ab hier wieder GLAMUS */

.carousel-item .carousel-item-title {
    word-wrap: break-word;
}

.carousel-item {
    width: 128px;
}

.vjs-progress-holder {
    z-index: 999;
}

.low.active,
.high.active {
    font-weight: bold;
    text-shadow: 0em 0em 1em white;
}

/*
.vjs-brand-quality-link.active:before{
    box-shadow: 0em 0em 1em white;
}
*/

.carousel-item {
    margin-right: 4px;
}

.vjs-quality-dropdown ul li a {
    line-height: 1.4em;
    font-size: 1.2em;
}

.vjs-chapters-button li.vjs-menu-title {
    line-height: 1.4em;
    font-size: 1.2em;
}

.vjs-social-share .mailto,
.vjs-embed-button,
.vjs-embed-button-two,
.vjs-vjsdownload {
    border: 1px solid black !important;
}

.vjs-social-share .mailto:after,
.vjs-embed-button .vjs-control-content:after,
.vjs-embed-button-two .vjs-control-content:after{
    display: none;
}

.video-js .mailto:before,
.vjs-vjsdownload:before,
.vjs-embed-button .vjs-control-content:before,
.vjs-embed-button-two .vjs-control-content:before{
    top: 0;
}

.video-js .vjs-control {
    width: 3.5em;
}

.vjs-brand-quality-link {
    width: 3.5em;
}

.vjs-social-share-svg path:first-child {
    stroke: black;
    stroke-width: 1px;
}

.video-js {
    overflow: hidden;
}

.vjs-remaining-time.vjs-time-control.vjs-control {
    width: 4.5em;
    padding-left: 0.5em;
}

.vjs-text-track-display > div > div {
    font-size: 23px !important;
}

.vjs-audio .vjs-text-track-display > div > div > div {
    top: -4em !important;
}

.vjs-audio.vjs-fullscreen .vjs-text-track-display > div > div > div {
    top: -6em !important;
}